merge: 合并pre-release分支

Change-Id: I91249304a5c80b68857846cdd2b88744753d7084

packages/amis-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amis-editor",
-  "version": "5.2.1",
+  "version": "5.2.1-beta.2",
   "description": "amis 可视化编辑器",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -61,24 +61,14 @@
     "@types/sortablejs": "^1.10.7",
     "@types/tinycolor2": "^1.4.3",
     "ajv": "^8.8.2",
-    "amis": "2.3.2-beta.1",
+    "amis": "2.4.0",
-    "amis-core": "2.3.2-beta.1",
+    "amis-core": "2.4.0",
-    "amis-formula": "2.3.2-beta.1",
+    "amis-formula": "2.4.0",
-    "amis-ui": "2.3.2-beta.1",
+    "amis-ui": "2.4.0",
     "axios": "0.21.1",
     "concurrently": "^6.2.0",
     "css-loader": "^6.2.0",
     "faker": "^5.5.3",
-    "fis-parser-sass": "^1.1.0",
-    "fis-parser-svgr": "^1.0.1",
-    "fis3": "^3.5.0-beta.0",
-    "fis3-hook-commonjs": "^0.1.32",
-    "fis3-hook-node_modules": "^2.3.1",
-    "fis3-parser-typescript": "^1.4.0",
-    "fis3-postpackager-loader": "^2.1.12",
-    "fis3-prepackager-stand-alone-pack": "^1.0.1",
-    "fis3-preprocessor-js-require-css": "^0.1.3",
-    "fis3-preprocessor-js-require-file": "^0.1.3",
     "husky": "^7.0.0",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.3.0",

packages/amis-editor/src/plugin/Chart.tsx

@@ -8,8 +8,10 @@ import {
   diff,
   defaultValue,
   getSchemaTpl,
-  CodeEditor as AmisCodeEditor
+  CodeEditor as AmisCodeEditor,
+  RendererPluginEvent
 } from 'amis-editor-core';
+import {getEventControlConfig} from '../renderer/event-control/helper';
 
 const ChartConfigEditor = ({value, onChange}: any) => {
   return (
@@ -19,6 +21,54 @@ const ChartConfigEditor = ({value, onChange}: any) => {
   );
 };
 
+const DEFAULT_EVENT_PARAMS = [
+  {
+    type: 'object',
+    properties: {
+      'event.data.componentType': {
+        type: 'string',
+        title: 'componentType'
+      },
+      'event.data.seriesType': {
+        type: 'string',
+        title: 'seriesType'
+      },
+      'event.data.seriesIndex': {
+        type: 'number',
+        title: 'seriesIndex'
+      },
+      'event.data.seriesName': {
+        type: 'string',
+        title: 'seriesName'
+      },
+      'event.data.name': {
+        type: 'string',
+        title: 'name'
+      },
+      'event.data.dataIndex': {
+        type: 'number',
+        title: 'dataIndex'
+      },
+      'event.data.data': {
+        type: 'object',
+        title: 'data'
+      },
+      'event.data.dataType': {
+        type: 'string',
+        title: 'dataType'
+      },
+      'event.data.value': {
+        type: 'number',
+        title: 'data'
+      },
+      'event.data.color': {
+        type: 'string',
+        title: 'color'
+      }
+    }
+  }
+];
+
 export class ChartPlugin extends BasePlugin {
   // 关联渲染器名字
   rendererName = 'chart';
@@ -56,6 +106,42 @@ export class ChartPlugin extends BasePlugin {
     ...this.scaffold
   };
 
+  // 事件定义
+  events: RendererPluginEvent[] = [
+    {
+      eventName: 'click',
+      eventLabel: '鼠标点击',
+      description: '鼠标点击时触发',
+      dataSchema: DEFAULT_EVENT_PARAMS
+    },
+    {
+      eventName: 'mouseover',
+      eventLabel: '鼠标悬停',
+      description: '鼠标悬停时触发',
+      dataSchema: DEFAULT_EVENT_PARAMS
+    },
+    {
+      eventName: 'legendselectchanged',
+      eventLabel: '切换图例选中状态',
+      description: '切换图例选中状态时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.name': {
+              type: 'string',
+              title: 'name'
+            },
+            'event.data.selected': {
+              type: 'object',
+              title: 'selected'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
   // 动作定义
   actions: RendererPluginAction[] = [
     {
@@ -68,6 +154,7 @@ export class ChartPlugin extends BasePlugin {
       actionLabel: '更新数据',
       description: '触发组件数据更新'
     }
+    // 特性动作太多了，这里先不加了，可以通过写代码配置
   ];
 
   panelTitle = '图表';
@@ -184,6 +271,16 @@ export class ChartPlugin extends BasePlugin {
         {
           title: '其他',
           body: [getSchemaTpl('name')]
+        },
+        {
+          title: '事件',
+          className: 'p-none',
+          body: [
+            getSchemaTpl('eventControl', {
+              name: 'onEvent',
+              ...getEventControlConfig(this.manager, context)
+            })
+          ]
         }
       ])
     ];

packages/amis-editor/src/plugin/Form/InputDateRange.tsx

@@ -5,15 +5,19 @@ import {BasePlugin, BaseEventContext} from 'amis-editor-core';
 import {ValidatorTag} from '../../validator';
 import {getEventControlConfig} from '../../renderer/event-control/helper';
 import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
+import {getRendererByName} from 'amis-core';
 
 const DateType: {
   [key: string]: {
     format: string;
     placeholder: string;
     ranges: string[];
+    sizeMutable?: boolean;
+    type?: string;
   };
 } = {
   date: {
+    ...getRendererByName('input-date-range'),
     format: 'YYYY-MM-DD',
     placeholder: '请选择日期范围',
     ranges: [
@@ -26,6 +30,7 @@ const DateType: {
     ]
   },
   datetime: {
+    ...getRendererByName('input-datetime-range'),
     format: 'YYYY-MM-DD HH:mm:ss',
     placeholder: '请选择日期时间范围',
     ranges: [
@@ -38,27 +43,35 @@ const DateType: {
     ]
   },
   time: {
+    ...getRendererByName('input-time-range'),
     format: 'HH:mm',
     placeholder: '请选择时间范围',
     ranges: []
   },
   month: {
+    ...getRendererByName('input-month-range'),
     format: 'YYYY-MM',
     placeholder: '请选择月份范围',
     ranges: []
   },
   quarter: {
+    ...getRendererByName('input-quarter-range'),
     format: 'YYYY [Q]Q',
     placeholder: '请选择季度范围',
     ranges: ['thisquarter', 'prevquarter']
   },
   year: {
+    ...getRendererByName('input-year-range'),
     format: 'YYYY',
     placeholder: '请选择年范围',
     ranges: ['thisyear', 'lastYear']
   }
 };
 
+const sizeImmutableComponents = Object.values(DateType)
+  .map(item => (item?.sizeMutable === false ? item.type : null))
+  .filter(a => a);
+
 const tipedLabelText =
   '支持 <code>now、+1day、-2weeks、+1hours、+2years</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>';
 
@@ -206,7 +219,11 @@ export class DateRangeControlPlugin extends BasePlugin {
                       minDate: '',
                       maxDate: '',
                       value: '',
-                      ranges: DateType[type]?.ranges
+                      ranges: DateType[type]?.ranges,
+                      // size immutable 组件去除 size 字段
+                      size: sizeImmutableComponents.includes(value)
+                        ? undefined
+                        : form.data?.size
                     });
                   }
                 }),
@@ -307,16 +324,27 @@ export class DateRangeControlPlugin extends BasePlugin {
                 }),
                 getSchemaTpl('dateShortCutControl', {
                   mode: 'normal',
-                  dropDownOption: {
+                  normalDropDownOption: {
-                    'yesterday': '昨天',
+                    yesterday: '昨天',
-                    'thisweek': '这个周',
+                    thisweek: '这个周',
-                    'prevweek': '上周',
+                    prevweek: '上周',
-                    '7daysago': '最近7天',
+                    thismonth: '这个月',
-                    'thismonth': '这个月',
+                    prevmonth: '上个月',
-                    'prevmonth': '上个月',
+                    thisquarter: '这个季度',
-                    'thisquarter': '这个季度',
+                    prevquarter: '上个季度',
-                    'prevquarter': '上个季度',
+                    thisyear: '今年'
-                    'thisyear': '今年'
+                  },
+                  customDropDownOption: {
+                    daysago: '最近n天',
+                    dayslater: 'n天以内',
+                    weeksago: '最近n周',
+                    weekslater: 'n周以内',
+                    monthsago: '最近n月',
+                    monthslater: 'n月以内',
+                    quartersago: '最近n季度',
+                    quarterslater: 'n季度以内',
+                    yearsago: '最近n年',
+                    yearslater: 'n年以内'
                   }
                 }),
                 // getSchemaTpl('remark'),
@@ -349,7 +377,17 @@ export class DateRangeControlPlugin extends BasePlugin {
         body: getSchemaTpl(
           'collapseGroup',
           [
-            getSchemaTpl('style:formItem', renderer),
+            getSchemaTpl('style:formItem', {
+              renderer: {...renderer, sizeMutable: false},
+              schema: [
+                // 需要作为一个字符串表达式传入，因为切换 type 后 panelBodyCreator 不会重新执行
+                getSchemaTpl('formItemSize', {
+                  hiddenOn: `["${sizeImmutableComponents.join(
+                    '","'
+                  )}"].includes(this.type)`
+                })
+              ]
+            }),
             getSchemaTpl('style:classNames', [
               getSchemaTpl('className', {
                 label: '描述',

packages/amis-editor/src/plugin/Form/InputNumber.tsx

@@ -32,7 +32,8 @@ export class NumberControlPlugin extends BasePlugin {
   scaffold = {
     type: 'input-number',
     label: '数字',
-    name: 'number'
+    name: 'number',
+    keyboard: true
   };
   previewSchema: any = {
     type: 'form',
@@ -137,7 +138,16 @@ export class NumberControlPlugin extends BasePlugin {
                   required: true
                 }),
                 getSchemaTpl('label'),
-                getSchemaTpl('numberSwitchKeyboard'),
+                {
+                  type: 'switch',
+                  label: tipedLabel(
+                    '键盘事件',
+                    '通过键盘上下方向键来加减数据值'
+                  ),
+                  name: 'keyboard',
+                  value: true,
+                  inputClassName: 'is-inline'
+                },
                 getSchemaTpl('kilobitSeparator'),
 
                 getSchemaTpl('valueFormula', {
@@ -152,10 +162,7 @@ export class NumberControlPlugin extends BasePlugin {
                     value: context?.schema.min
                   },
                   needDeleteProps: ['min'], // 避免自我限制
-                  label: tipedLabel(
+                  label: '最小值',
-                    '最小值',
-                    '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
-                  ),
                   valueType: 'number'
                 }),
 
@@ -166,10 +173,7 @@ export class NumberControlPlugin extends BasePlugin {
                     value: context?.schema.max
                   },
                   needDeleteProps: ['max'], // 避免自我限制
-                  label: tipedLabel(
+                  label: '最大值',
-                    '最大值',
-                    '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
-                  ),
                   valueType: 'number'
                 }),
 
@@ -194,18 +198,12 @@ export class NumberControlPlugin extends BasePlugin {
                 {
                   type: 'input-text',
                   name: 'prefix',
-                  label: tipedLabel(
+                  label: tipedLabel('前缀', '输入内容前展示，不包含在数据值中')
-                    '前缀',
-                    '仅在输入内容前展示，不包含在数据值中'
-                  )
                 },
                 {
                   type: 'input-text',
                   name: 'suffix',
-                  label: tipedLabel(
+                  label: tipedLabel('后缀', '输入内容后展示，不包含在数据值中')
-                    '后缀',
-                    '仅在输入内容前展示，不包含在数据值中'
-                  )
                 },
 
                 getSchemaTpl('combo-container', {
@@ -263,7 +261,7 @@ export class NumberControlPlugin extends BasePlugin {
                     label: '快捷编辑',
                     name: 'displayMode',
                     type: 'select',
-                    value: 'base',
+                    pipeIn: defaultValue('base'),
                     options: [
                       {
                         label: '单侧按钮',

packages/amis-editor/src/plugin/Form/InputRating.tsx

@@ -112,28 +112,18 @@ export class RateControlPlugin extends BasePlugin {
                 valueType: 'number', // 期望数值类型
                 visibleOn: '!data.multiple'
               }),
-
+              // 评分组件没有 min、max 属性，有 count 属性
               getSchemaTpl('valueFormula', {
-                name: 'min',
+                name: 'count',
                 rendererSchema: {
                   ...context?.schema,
-                  type: 'input-number'
+                  type: 'input-number',
+                  max: 10,
+                  min: 1,
+                  step: 1,
+                  precision: 0
                 },
-                needDeleteProps: ['min'], // 避免自我限制
+                needDeleteProps: ['count'], // 避免自我限制
-                label: tipedLabel(
-                  '最小值',
-                  '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
-                ),
-                valueType: 'number'
-              }),
-
-              getSchemaTpl('valueFormula', {
-                name: 'max',
-                rendererSchema: {
-                  ...context?.schema,
-                  type: 'input-number'
-                },
-                needDeleteProps: ['max'], // 避免自我限制
                 label: tipedLabel(
                   '最大值',
                   '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'

packages/amis-editor/src/plugin/Form/InputTable.tsx

@@ -190,13 +190,12 @@ export class TableControlPlugin extends BasePlugin {
             visibleOn: 'data.addable',
             pipeIn: defaultValue('')
           },
-          {
+          getSchemaTpl('icon', {
             name: 'addBtnIcon',
             label: '增加按钮图标',
-            type: 'icon-picker',
             className: 'fix-icon-picker-overflow',
             visibleOn: 'data.addable'
-          },
+          }),
           getSchemaTpl('api', {
             name: 'addApi',
             label: '新增时提交的 API',
@@ -213,13 +212,12 @@ export class TableControlPlugin extends BasePlugin {
             visibleOn: 'data.removable',
             pipeIn: defaultValue('')
           },
-          {
+          getSchemaTpl('icon', {
             name: 'deleteBtnIcon',
             label: '删除按钮图标',
-            type: 'icon-picker',
             className: 'fix-icon-picker-overflow',
             visibleOn: 'data.removable'
-          },
+          }),
           getSchemaTpl('api', {
             name: 'deleteApi',
             label: '删除时提交的 API',
@@ -236,13 +234,12 @@ export class TableControlPlugin extends BasePlugin {
             visibleOn: 'data.editable',
             pipeIn: defaultValue('')
           },
-          {
+          getSchemaTpl('icon', {
             name: 'editBtnIcon',
             label: '编辑按钮图标',
-            type: 'icon-picker',
             className: 'fix-icon-picker-overflow',
             visibleOn: 'data.editable'
-          },
+          }),
           getSchemaTpl('switch', {
             label: '是否可复制',
             name: 'copyable'
@@ -254,13 +251,12 @@ export class TableControlPlugin extends BasePlugin {
             visibleOn: 'data.copyable',
             pipeIn: defaultValue('')
           },
-          {
+          getSchemaTpl('icon', {
             name: 'copyBtnIcon',
             label: '复制按钮图标',
-            type: 'icon-picker',
             className: 'fix-icon-picker-overflow',
             visibleOn: 'data.copyable'
-          },
+          }),
           getSchemaTpl('api', {
             name: 'updateApi',
             label: '修改时提交的 API',
@@ -273,13 +269,12 @@ export class TableControlPlugin extends BasePlugin {
             visibleOn: 'data.editable',
             pipeIn: defaultValue('')
           },
-          {
+          getSchemaTpl('icon', {
             name: 'confirmBtnIcon',
             label: '确认编辑按钮图标',
-            type: 'icon-picker',
             className: 'fix-icon-picker-overflow',
             visibleOn: 'data.editable'
-          },
+          }),
           {
             type: 'input-text',
             name: 'cancelBtnLabel',
@@ -287,13 +282,12 @@ export class TableControlPlugin extends BasePlugin {
             visibleOn: 'data.editable',
             pipeIn: defaultValue('')
           },
-          {
+          getSchemaTpl('icon', {
             name: 'cancelBtnIcon',
             label: '取消编辑按钮图标',
-            type: 'icon-picker',
             className: 'fix-icon-picker-overflow',
             visibleOn: 'data.editable'
-          },
+          }),
           getSchemaTpl('switch', {
             label: '是否可拖拽排序',
             name: 'draggable'

packages/amis-editor/src/plugin/Link.tsx

@@ -51,35 +51,16 @@ export class LinkPlugin extends BasePlugin {
                 name: 'blank',
                 label: '在新窗口打开'
               }),
-              {
-                label: '图标位置',
-                type: 'button-group-select',
-                name: 'position',
-                pipeIn: defaultValue('rightIcon'),
-                size: 'sm',
-                value: 'rightIcon',
-                options: [
-                  {
-                  label: '左侧',
-                  value: 'icon'
-                  },
-
-                  {
-                  label: '右侧',
-                  value: 'rightIcon'
-                  }
-                ]
-              },
 
               getSchemaTpl('iconLink', {
                 name: 'icon',
-                visibleOn: 'this.position == "icon"'
+                label: '左侧图标'
               }),
 
               getSchemaTpl('iconLink', {
                 name: 'rightIcon',
-                visibleOn: 'this.position == "rightIcon"'
+                label: '右侧图标'
-              }),
+              })
             ]
           },
           getSchemaTpl('status', {

packages/amis-editor/src/plugin/Page.tsx

@@ -210,6 +210,7 @@ export class PagePlugin extends BasePlugin {
                   }),
                   getSchemaTpl('apiControl', {
                     name: 'initApi',
+                    mode: 'row',
                     labelClassName: 'none',
                     label: tipedLabel(
                       '初始化接口',

packages/amis-editor/src/renderer/APIControl.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import mergeWith from 'lodash/mergeWith';
-import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import cx from 'classnames';
 import {FormItem, Icon} from 'amis';
@@ -324,7 +323,20 @@ export default class APIControl extends React.Component<
     }
 
     if (typeof value !== 'string' || typeof values !== 'string') {
-      api = merge({}, normalizeApi(values));
+      api = mergeWith({}, normalizeApi(value), normalizeApi(values),
+        (value, srcValue, key) => {
+          // 这三个支持删除单个key的属性需用新值完全替换
+          // 否则删除无效
+          if (['data', 'responseData', 'headers'].includes(key)) {
+            return srcValue;
+          }
+        }
+      );
+      ['data', 'responseData', 'headers'].forEach((item: keyof(Api)) => {
+        if (api[item] == null) {
+          delete api[item];
+        }
+      });
     }
     onChange?.(api);
   }

packages/amis-editor/src/renderer/ActionApiControl.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
+import mergeWith from 'lodash/mergeWith';
 import cloneDeep from 'lodash/cloneDeep';
 import cx from 'classnames';
 import {FormItem, InputBox} from 'amis';
@@ -195,7 +195,20 @@ export default class APIControl extends React.Component<
     }
 
     if (typeof value !== 'string' || typeof values !== 'string') {
-      api = merge({}, normalizeApi(value), normalizeApi(values));
+      api = mergeWith({}, normalizeApi(value), normalizeApi(values),
+        (value, srcValue, key) => {
+          // 这三个支持删除单个key的属性需用新值完全替换
+          // 否则删除无效
+          if (['data', 'responseData', 'headers'].includes(key)) {
+            return srcValue;
+          }
+        }
+      );
+      ['data', 'responseData', 'headers'].forEach((item: keyof(Api)) => {
+        if (api[item] == null) {
+          delete api[item];
+        }
+      });
     }
 
     onChange?.(api);

packages/amis-editor/src/renderer/DateShortCutControl.tsx

@@ -5,41 +5,71 @@ import React from 'react';
 import cx from 'classnames';
 import Sortable from 'sortablejs';
 import {findDOMNode} from 'react-dom';
-import {FormItem, Button, Icon, InputBox} from 'amis';
+import {FormItem, Icon} from 'amis';
 
 import type {FormControlProps} from 'amis-core';
 import type {BaseEventContext} from 'amis-editor-core';
+import type {Option} from 'amis';
 
 import {autobind} from 'amis-editor-core';
-import FormulaControl from './FormulaControl';
 
-const CustomType = 'custom';
+type $Object = {
-
-type RangesType = Array<string | {label: string; range: any}>;
-
-type DropDownOption = {
   [key: string]: string;
 };
 
+enum RangeType {
+  Normal = 'Normal',
+  Custom = 'Custom'
+}
+
 export interface DateShortCutControlProps extends FormControlProps {
   className?: string;
   /**
    * 编辑器上下文数据，用于获取字段所在Form的其他字段
    */
   context: BaseEventContext;
-  dropDownOption: DropDownOption;
+  normalDropDownOption: $Object;
+  customDropDownOption: $Object;
 }
 
 interface OptionsType {
-  label: string;
+  label?: string;
-  type: string;
+  value: string;
-  inputValue: string;
+  type: RangeType;
+  inputType?: string;
 }
 
 interface DateShortCutControlState {
   options: Array<OptionsType>;
 }
 
+interface InputOption {
+  type: 'middle' | 'suffix',
+  prefix?: string,
+  suffix: string
+}
+
+const ShortCutItemWrap = (
+  props: {
+    index: number,
+    children: React.ReactNode,
+    handleDelete: (index: number, e: React.SyntheticEvent<any>) => void
+  }) => {
+  return (
+    <>
+      <a className={klass + 'Item-dragBar'}><Icon icon='drag-bar' className='icon' /></a>
+      <span className={klass + 'Item-content'}>
+        {props.children}
+      </span>
+      <span
+        className={klass + 'Item-close'}
+        onClick={(e) => props.handleDelete(props.index, e)}>
+        <Icon icon='status-close' className='icon' />
+      </span>
+    </>
+  );
+}
+
 const klass = 'ae-DateShortCutControl';
 
 export class DateShortCutControl extends React.PureComponent<
@@ -49,10 +79,8 @@ export class DateShortCutControl extends React.PureComponent<
   sortable?: Sortable;
   drag?: HTMLElement | null;
   target: HTMLElement | null;
-  dropDownOptionArr: Array<{
+  normalDropDownOptionArr: Array<Option>;
-    label: string;
+  customDropDownOptionArr: Array<Option>
-    value: string;
-  }>;
 
   static defaultProps: Partial<DateShortCutControlProps> = {
     label: '快捷键'
@@ -60,70 +88,40 @@ export class DateShortCutControl extends React.PureComponent<
 
   constructor(props: DateShortCutControlProps) {
     super(props);
-    const {dropDownOption, data} = props;
+    const {normalDropDownOption, customDropDownOption, data} = props;
-    this.dropDownOptionArr = Object.keys(dropDownOption).map(key => ({
+    this.normalDropDownOptionArr = Object.keys(normalDropDownOption).map(key => ({
-      label: dropDownOption[key],
+      label: normalDropDownOption[key],
       value: key
     }));
-    this.initOptions(data.ranges);
+    this.customDropDownOptionArr = Object.keys(customDropDownOption).map(key => ({
-  }
+      label: customDropDownOption[key],
-
+      value: key
-  initOptions(ranges: RangesType) {
+    }));
-    if (!ranges) {
+    const defaultRanges = [
-      // 这里先写固定，如果amis的dateTimeRange组件暴露对应属性，从中获取更合适，到时需要让其暴露下
+      'yesterday',
-      ranges = [
+      '7daysago',
-        'yesterday',
+      'prevweek',
-        '7daysago',
+      'thismonth',
-        'prevweek',
+      'prevmonth',
-        'thismonth',
+      'prevquarter'
-        'prevmonth',
+    ];
-        'prevquarter'
+    this.state = {
-      ];
+      options: (data?.ranges ?? defaultRanges).map((item: string, index: number) => {
-    }
+        const arr = item.match(/^(\d+)[a-zA-Z]+/);
-    const {dropDownOption} = this.props;
+        if (arr) {
-    const options: Array<OptionsType> = [];
+          return {
-    if (Array.isArray(ranges)) {
+            value: arr[1],
-      ranges.map(item => {
+            type: RangeType.Custom,
-        if (typeof item === 'string' && dropDownOption.hasOwnProperty(item)) {
+            inputType: item.match(/[a-zA-Z]+/)?.[0]
-          options.push({
-            label: dropDownOption[item as keyof typeof dropDownOption],
-            type: item,
-            inputValue: item
-          });
-        }
-        if (typeof item === 'object') {
-          options.push({
-            label: item?.label,
-            type: CustomType,
-            inputValue: item.range
-          });
-        }
-      });
-    }
-    this.state = {options};
-  }
-
-  /**
-   * 添加
-   */
-  addItem(item: {label: string; value: string}) {
-    const {options} = this.state;
-    this.setState(
-      {
-        options: [
-          ...options,
-          {
-            ...item,
-            inputValue: item.value === CustomType ? '' : item.value,
-            type: item.value
           }
-        ]
+        }
-      },
+        return {
-      () => {
+            label: normalDropDownOption[item],
-        this.onChangeOptions();
+            value: item,
-        this.scrollToBottom();
+            type: RangeType.Normal,
-      }
+        }
-    );
+      })
+    };
   }
 
   @autobind
@@ -207,72 +205,121 @@ export class DateShortCutControl extends React.PureComponent<
       <div className={klass + '-wrapper'}>
         {options && options.length ? (
           <ul className={klass + '-content'} ref={this.dragRef}>
-            {options.map((option, index) => this.renderOption(option, index))}
+              {options.map(
+                (option, index) =>
+                  <li className={klass + 'Item'} key={index}>
+                    {option.type === RangeType.Normal
+                      ? this.renderNormalOption(option, index)
+                      : this.renderCustomOption(option, index)}
+                  </li>
+                )
+              }
           </ul>
         ) : (
-          <div className="ae-OptionControl-placeholder">未配置</div>
+          <div className={klass + '-content ' + klass + '-empty'}>未配置</div>
         )}
       </div>
     );
   }
 
   /**
-   * 生成选项
+   * 生成固定跨度选项
    */
-  renderOption(option: OptionsType, index: number) {
+  renderNormalOption(option: OptionsType, index: number) {
     return (
-      <li className={klass + 'Item'} key={index}>
+      <ShortCutItemWrap index={index} handleDelete={this.handleDelete}>
-        <a className={klass + 'Item-dragBar'}>
+        <span>{option.label}</span>
-          <Icon icon="drag-bar" className="icon" />
+      </ShortCutItemWrap>);
-        </a>
+  }
-        <InputBox
+
-          className={klass + 'Item-input'}
+  /**
-          clearable={false}
+   * 生成自定义跨度选项
-          placeholder="名称"
+   */
-          value={option.label}
+  renderCustomOption(option: OptionsType, index: number) {
-          onInput={(e: React.FocusEvent<HTMLInputElement>) =>
+    const {render} = this.props;
-            this.onInputChange(index, e.target.value, 'label')
+
-          }
+    const renderInput = (option: InputOption & {value: string}) => {
-        />
+      if (option.type === 'middle') {
-        <FormulaControl
+        return render('inner', {
-          {...this.props}
+          type: 'input-text',
-          simple
+          prefix: option?.prefix,
-          variables={[]}
+          suffix: option.suffix,
-          functions={[]}
+          mode: 'normal',
-          header={''}
+          placeholder: 'n',
-          onChange={(value: string) =>
+          value: option?.value,
-            this.onInputChange(index, value, 'inputValue')
+          onChange: (value: string) => this.handleCustomItemChange(value, index)
-          }
+        })
-          value={option.inputValue}
+      }
-        />
+      return render('inner', {
-        <Button
+        type: 'input-text',
-          className={klass + 'Item-action'}
+        placeholder: 'n',
-          level="link"
+        mode: 'normal',
-          size="md"
+        suffix: option.suffix,
-          onClick={(e: React.UIEvent<any>) => this.handleDelete(index, e)}
+        value: option?.value,
-        >
+        onChange: (value: string) => this.handleCustomItemChange(value, index)
-          <Icon icon="delete-btn" className="icon" />
+      })
-        </Button>
+    }
-      </li>
+
+    const dateMap: {[key: string]: InputOption} = {
+      daysago: {prefix: '最近', suffix: '天', type: 'middle'},
+      dayslater: {suffix: '天以内', type: 'suffix'},
+      weeksago: {prefix: '最近', suffix: '周', type: 'middle'},
+      weekslater: {suffix: '周以内', type: 'suffix'},
+      monthsago: {prefix: '最近', suffix: '月', type: 'middle'},
+      monthslater: {suffix: '月以内', type: 'suffix'},
+      quartersago: {prefix: '最近', suffix: '季度', type: 'middle'},
+      quarterslater: {suffix: '季度以内', type: 'suffix'},
+      yearsago: {prefix: '最近', suffix: '年', type: 'middle'},
+      yearslater: {suffix: '年以内', type: 'suffix'}
+    }
+  
+    return (
+      <ShortCutItemWrap index={index} handleDelete={this.handleDelete}>
+        {option.inputType
+          ? renderInput({...dateMap[option.inputType], value: option.value})
+          : null}
+      </ShortCutItemWrap>
     );
   }
 
   /**
-   * 输入框的改变
+   * 自定义跨度变化
    */
-  onInputChange(index: number, value: string, key: 'inputValue' | 'label') {
+  handleCustomItemChange(value: string, index: number) {
-    const options = this.state.options.concat();
+    const options = [...this.state.options];
-    options[index][key] = value;
+    options[index].value = value;
-    options[index].type = CustomType;
     this.setState({options}, () => this.onChangeOptions());
   }
 
+  /**
+   * option添加
+   */
+  addItem(item: Option, type: RangeType) {
+    this.setState(
+      {
+        options: [
+          ...this.state.options,
+          {
+            label: item?.label ?? '',
+            type,
+            value: type === RangeType.Normal ? item.value : '',
+            ...(type === RangeType.Normal ? {} : {inputType: item.value})
+          }
+        ]
+      },
+      () => {
+        this.onChangeOptions();
+        this.scrollToBottom();
+      }
+    );
+  }
+
   /**
    * 删除选项
    */
+  @autobind
   handleDelete(index: number, e: React.UIEvent<any>) {
     const options = this.state.options.concat();
-
     options.splice(index, 1);
     this.setState({options}, () => this.onChangeOptions());
   }
@@ -283,28 +330,20 @@ export class DateShortCutControl extends React.PureComponent<
   onChangeOptions() {
     const {options} = this.state;
     const {onBulkChange} = this.props;
-    const newOptions: RangesType = [];
+    const newOptions: Array<string> = [];
-    options.forEach(item => {
+    options.forEach((item, index) => {
-      if (item.type !== CustomType) {
+      if (item.type === RangeType.Normal) {
-        newOptions.push(item.inputValue);
+        newOptions[index] = item.value;
-      } else {
+      }
-        newOptions.push({
+      if (item.type === RangeType.Custom && item.value) {
-          label: item.label,
+        newOptions[index] = `${item.value}${item.inputType}`;
-          range: item.inputValue
-        });
       }
     });
-
     onBulkChange && onBulkChange({ranges: newOptions});
   }
 
   render() {
     const {className, label, render} = this.props;
-    const optionList = this.dropDownOptionArr.map((item: any) => ({
-      ...item,
-      type: 'button',
-      onAction: (e: React.MouseEvent, action: any) => this.addItem(item)
-    }));
     return (
       <div className={cx(klass, className)}>
         <header className={klass + '-header'}>
@@ -312,19 +351,45 @@ export class DateShortCutControl extends React.PureComponent<
         </header>
         {this.renderContent()}
         <div className={klass + '-footer'}>
-          {render(
+          <div className={klass + '-footer-btn'}>
-            'inner',
+            {render(
-            {
+              'inner',
-              type: 'dropdown-button',
+              {
-              label: '添加选项',
+                type: 'dropdown-button',
-              closeOnClick: true,
+                label: '常用跨度',
-              closeOnOutside: true,
+                closeOnClick: true,
-              buttons: optionList
+                closeOnOutside: true,
-            },
+                level: 'enhance',
-            {
+                buttons: this.normalDropDownOptionArr.map((item: any) => ({
-              popOverContainer: null // amis 渲染挂载节点会使用 this.target
+                  ...item,
-            }
+                  type: 'button',
-          )}
+                  onAction: (e: React.MouseEvent, action: any) => this.addItem(item, RangeType.Normal)
+                }))
+              },
+              {
+                popOverContainer: null
+              }
+            )}
+          </div>
+          <div className={klass + '-footer-btn'}>
+            {render(
+              'inner',
+              {
+                type: 'dropdown-button',
+                label: '自定义跨度',
+                closeOnClick: true,
+                closeOnOutside: true,
+                buttons: this.customDropDownOptionArr.map((item: any) => ({
+                  ...item,
+                  type: 'button',
+                  onAction: (e: React.MouseEvent, action: any) => this.addItem(item, RangeType.Custom)
+                }))
+              },
+              {
+                popOverContainer: null
+              }
+            )}
+          </div>
         </div>
       </div>
     );

packages/amis-editor/src/renderer/SwitchMoreControl.tsx

@@ -356,7 +356,7 @@ export default class SwitchMore extends React.Component<
     return {
       type: 'input-sub-form',
       btnLabel: '',
-      className: 'inline-block m-0 h-6',
+      className: 'inline-block m-0 h-6 bg-white ',
       itemClassName: 'bg-white hover:bg-white m-0 p-0',
       icon: 'fa fa-cog',
       form: {

packages/amis-editor/src/renderer/TimelineItemControl.tsx

@@ -163,14 +163,11 @@ export default class TimelineItemControl extends React.Component<
         placeholder: '请输入',
         label: '颜色'
       },
-      {
+      getSchemaTpl('icon', {
-        type: 'icon-picker',
-        name: 'icon',
         value: props?.['icon'],
         placeholder: '请输入',
         clearable: true,
         description: '',
-        label: '图标',
         className: 'fix-icon-picker-overflow',
         pipeIn: (value: any) => value?.icon,
         pipeOut: (value: any) => {
@@ -183,7 +180,7 @@ export default class TimelineItemControl extends React.Component<
           }
           return undefined;
         }
-      }
+      })
     ];
   }
 

packages/amis-editor/src/tpl/common.tsx

@@ -120,7 +120,7 @@ setSchemaTpl('formItemSize', {
   name: 'size',
   label: '控件宽度',
   type: 'select',
-  pipeIn: defaultValue(''),
+  pipeIn: defaultValue('full'),
   // mode: 'inline',
   // className: 'w-full',
   options: [
@@ -144,12 +144,8 @@ setSchemaTpl('formItemSize', {
       value: 'lg'
     },
     {
-      label: '占满',
+      label: '默认（占满）',
       value: 'full'
-    },
-    {
-      label: '默认',
-      value: ''
     }
   ]
 });
@@ -617,8 +613,8 @@ setSchemaTpl(
       body: [
         getSchemaTpl('newVisible'),
         getSchemaTpl('hidden'),
-        !config?.unsupportStatic && config?.isFormItem 
+        !config?.unsupportStatic && config?.isFormItem
-          ? getSchemaTpl('static') 
+          ? getSchemaTpl('static')
           : null,
         config?.readonly ? getSchemaTpl('readonly') : null,
         config?.disabled || config?.isFormItem
@@ -692,7 +688,6 @@ setSchemaTpl('visible', {
   expressionName: 'visibleOn'
 });
 
-
 setSchemaTpl('static', {
   type: 'ae-StatusControl',
   label: '静态展示',
@@ -752,13 +747,6 @@ setSchemaTpl('numberSwitchDefaultValue', {
   pipeOut: (value: any, origin: any, data: any) => (value ? '' : undefined)
 });
 
-setSchemaTpl('numberSwitchKeyboard', {
-  type: 'switch',
-  label: tipedLabel('键盘事件', '默认是不启用'),
-  name: 'keyboard',
-  inputClassName: 'is-inline'
-});
-
 setSchemaTpl('kilobitSeparator', {
   type: 'switch',
   label: '千分符',
@@ -1086,12 +1074,16 @@ setSchemaTpl('app-page-args', {
 
 setSchemaTpl(
   'iconLink',
-  (schema: {name: 'icon' | 'rightIcon'; visibleOn: boolean}) => {
+  (schema: {
-    const {name, visibleOn} = schema;
+    name: 'icon' | 'rightIcon';
+    visibleOn: boolean;
+    label?: string;
+  }) => {
+    const {name, visibleOn, label} = schema;
     return getSchemaTpl('icon', {
       name: name,
       visibleOn,
-      label: '图标',
+      label: label ?? '图标',
       placeholder: '点击选择图标',
       clearable: true,
       description: ''