merge: 合并pre-release分支

Change-Id: I91249304a5c80b68857846cdd2b88744753d7084
2024-12-16 01:40:53 +08:00 · 2022-11-14 11:03:39 +08:00 · 2022-11-14 11:03:39 +08:00 · d448835f43
commit d448835f43
parent 540ec77e92 ba36d5aaae
14 changed files with 450 additions and 282 deletions
--- a/packages/amis-editor/package.json
+++ b/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-core": "2.3.2-beta.1",
-    "amis-formula": "2.3.2-beta.1",
-    "amis-ui": "2.3.2-beta.1",
+    "amis": "2.4.0",
+    "amis-core": "2.4.0",
+    "amis-formula": "2.4.0",
+    "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",
--- a/packages/amis-editor/src/plugin/Chart.tsx
+++ b/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)
+            })
+          ]
        }
      ])
    ];
--- a/packages/amis-editor/src/plugin/Form/InputDateRange.tsx
+++ b/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: {
-                    'yesterday': '昨天',
-                    'thisweek': '这个周',
-                    'prevweek': '上周',
-                    '7daysago': '最近7天',
-                    'thismonth': '这个月',
-                    'prevmonth': '上个月',
-                    'thisquarter': '这个季度',
-                    'prevquarter': '上个季度',
-                    'thisyear': '今年'
+                  normalDropDownOption: {
+                    yesterday: '昨天',
+                    thisweek: '这个周',
+                    prevweek: '上周',
+                    thismonth: '这个月',
+                    prevmonth: '上个月',
+                    thisquarter: '这个季度',
+                    prevquarter: '上个季度',
+                    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: '描述',
--- a/packages/amis-editor/src/plugin/Form/InputNumber.tsx
+++ b/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(
-                    '最小值',
-                    '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
-                  ),
+                  label: '最小值',
                  valueType: 'number'
                }),

@ -166,10 +173,7 @@ export class NumberControlPlugin extends BasePlugin {
                    value: context?.schema.max
                  },
                  needDeleteProps: ['max'], // 避免自我限制
-                  label: tipedLabel(
-                    '最大值',
-                    '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
-                  ),
+                  label: '最大值',
                  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: '单侧按钮',
--- a/packages/amis-editor/src/plugin/Form/InputRating.tsx
+++ b/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'], // 避免自我限制
-                label: tipedLabel(
-                  '最小值',
-                  '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
-                ),
-                valueType: 'number'
-              }),
-
-              getSchemaTpl('valueFormula', {
-                name: 'max',
-                rendererSchema: {
-                  ...context?.schema,
-                  type: 'input-number'
-                },
-                needDeleteProps: ['max'], // 避免自我限制
+                needDeleteProps: ['count'], // 避免自我限制
                label: tipedLabel(
                  '最大值',
                  '请输入数字或使用 <code>\\${xxx}</code> 来获取变量，否则该配置不生效'
--- a/packages/amis-editor/src/plugin/Form/InputTable.tsx
+++ b/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'
--- a/packages/amis-editor/src/plugin/Link.tsx
+++ b/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', {
--- a/packages/amis-editor/src/plugin/Page.tsx
+++ b/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(
                      '初始化接口',
--- a/packages/amis-editor/src/renderer/APIControl.tsx
+++ b/packages/amis-editor/src/renderer/APIControl.tsx
@ -1,6 +1,5 @@
 import React from 'react';
-import merge from 'lodash/merge';
-import isEqual from 'lodash/isEqual';
+import mergeWith from 'lodash/mergeWith';
 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);
  }
--- a/packages/amis-editor/src/renderer/ActionApiControl.tsx
+++ b/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);
--- a/packages/amis-editor/src/renderer/DateShortCutControl.tsx
+++ b/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 RangesType = Array<string | {label: string; range: any}>;
-
-type DropDownOption = {
+type $Object = {
  [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;
-  type: string;
-  inputValue: string;
+  label?: string;
+  value: 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<{
-    label: string;
-    value: string;
-  }>;
+  normalDropDownOptionArr: Array<Option>;
+  customDropDownOptionArr: Array<Option>

  static defaultProps: Partial<DateShortCutControlProps> = {
    label: '快捷键'
@ -60,70 +88,40 @@ export class DateShortCutControl extends React.PureComponent<

  constructor(props: DateShortCutControlProps) {
    super(props);
-    const {dropDownOption, data} = props;
-    this.dropDownOptionArr = Object.keys(dropDownOption).map(key => ({
-      label: dropDownOption[key],
+    const {normalDropDownOption, customDropDownOption, data} = props;
+    this.normalDropDownOptionArr = Object.keys(normalDropDownOption).map(key => ({
+      label: normalDropDownOption[key],
      value: key
    }));
-    this.initOptions(data.ranges);
-  }
-
-  initOptions(ranges: RangesType) {
-    if (!ranges) {
-      // 这里先写固定，如果amis的dateTimeRange组件暴露对应属性，从中获取更合适，到时需要让其暴露下
-      ranges = [
-        'yesterday',
-        '7daysago',
-        'prevweek',
-        'thismonth',
-        'prevmonth',
-        'prevquarter'
-      ];
-    }
-    const {dropDownOption} = this.props;
-    const options: Array<OptionsType> = [];
-    if (Array.isArray(ranges)) {
-      ranges.map(item => {
-        if (typeof item === 'string' && dropDownOption.hasOwnProperty(item)) {
-          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
+    this.customDropDownOptionArr = Object.keys(customDropDownOption).map(key => ({
+      label: customDropDownOption[key],
+      value: key
+    }));
+    const defaultRanges = [
+      'yesterday',
+      '7daysago',
+      'prevweek',
+      'thismonth',
+      'prevmonth',
+      'prevquarter'
+    ];
+    this.state = {
+      options: (data?.ranges ?? defaultRanges).map((item: string, index: number) => {
+        const arr = item.match(/^(\d+)[a-zA-Z]+/);
+        if (arr) {
+          return {
+            value: arr[1],
+            type: RangeType.Custom,
+            inputType: item.match(/[a-zA-Z]+/)?.[0]
          }
-        ]
-      },
-      () => {
-        this.onChangeOptions();
-        this.scrollToBottom();
-      }
-    );
+        }
+        return {
+            label: normalDropDownOption[item],
+            value: item,
+            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}>
-        <a className={klass + 'Item-dragBar'}>
-          <Icon icon="drag-bar" className="icon" />
-        </a>
-        <InputBox
-          className={klass + 'Item-input'}
-          clearable={false}
-          placeholder="名称"
-          value={option.label}
-          onInput={(e: React.FocusEvent<HTMLInputElement>) =>
-            this.onInputChange(index, e.target.value, 'label')
-          }
-        />
-        <FormulaControl
-          {...this.props}
-          simple
-          variables={[]}
-          functions={[]}
-          header={''}
-          onChange={(value: string) =>
-            this.onInputChange(index, value, 'inputValue')
-          }
-          value={option.inputValue}
-        />
-        <Button
-          className={klass + 'Item-action'}
-          level="link"
-          size="md"
-          onClick={(e: React.UIEvent<any>) => this.handleDelete(index, e)}
-        >
-          <Icon icon="delete-btn" className="icon" />
-        </Button>
-      </li>
+      <ShortCutItemWrap index={index} handleDelete={this.handleDelete}>
+        <span>{option.label}</span>
+      </ShortCutItemWrap>);
+  }
+
+  /**
+   * 生成自定义跨度选项
+   */
+  renderCustomOption(option: OptionsType, index: number) {
+    const {render} = this.props;
+
+    const renderInput = (option: InputOption & {value: string}) => {
+      if (option.type === 'middle') {
+        return render('inner', {
+          type: 'input-text',
+          prefix: option?.prefix,
+          suffix: option.suffix,
+          mode: 'normal',
+          placeholder: 'n',
+          value: option?.value,
+          onChange: (value: string) => this.handleCustomItemChange(value, index)
+        })
+      }
+      return render('inner', {
+        type: 'input-text',
+        placeholder: 'n',
+        mode: 'normal',
+        suffix: option.suffix,
+        value: option?.value,
+        onChange: (value: string) => this.handleCustomItemChange(value, index)
+      })
+    }
+
+    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') {
-    const options = this.state.options.concat();
-    options[index][key] = value;
-    options[index].type = CustomType;
+  handleCustomItemChange(value: string, index: number) {
+    const options = [...this.state.options];
+    options[index].value = value;
    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 = [];
-    options.forEach(item => {
-      if (item.type !== CustomType) {
-        newOptions.push(item.inputValue);
-      } else {
-        newOptions.push({
-          label: item.label,
-          range: item.inputValue
-        });
+    const newOptions: Array<string> = [];
+    options.forEach((item, index) => {
+      if (item.type === RangeType.Normal) {
+        newOptions[index] = item.value;
+      }
+      if (item.type === RangeType.Custom && item.value) {
+        newOptions[index] = `${item.value}${item.inputType}`;
      }
    });
-
    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(
-            'inner',
-            {
-              type: 'dropdown-button',
-              label: '添加选项',
-              closeOnClick: true,
-              closeOnOutside: true,
-              buttons: optionList
-            },
-            {
-              popOverContainer: null // amis 渲染挂载节点会使用 this.target
-            }
-          )}
+          <div className={klass + '-footer-btn'}>
+            {render(
+              'inner',
+              {
+                type: 'dropdown-button',
+                label: '常用跨度',
+                closeOnClick: true,
+                closeOnOutside: true,
+                level: 'enhance',
+                buttons: this.normalDropDownOptionArr.map((item: any) => ({
+                  ...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>
    );
--- a/packages/amis-editor/src/renderer/SwitchMoreControl.tsx
+++ b/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: {
--- a/packages/amis-editor/src/renderer/TimelineItemControl.tsx
+++ b/packages/amis-editor/src/renderer/TimelineItemControl.tsx
@ -163,14 +163,11 @@ export default class TimelineItemControl extends React.Component<
        placeholder: '请输入',
        label: '颜色'
      },
-      {
-        type: 'icon-picker',
-        name: 'icon',
+      getSchemaTpl('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;
        }
-      }
+      })
    ];
  }

--- a/packages/amis-editor/src/tpl/common.tsx
+++ b/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: ''
    }
  ]
 });
@ -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}) => {
-    const {name, visibleOn} = schema;
+  (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: ''