diff --git a/.eslintrc.js b/.eslintrc.js
index a02787fbda..86bb789d60 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
     'vue/no-unused-refs': 'off',
     'vue/require-component-is': 'off',
     'vue/singleline-html-element-content-newline': 'off',
+    'vue/no-v-for-template-key-on-child': 'off',
     'curly': 'off',
     'sort-imports': 'off',
     'prefer-template': 'off',
@@ -48,6 +49,7 @@ module.exports = {
     '@typescript-eslint/restrict-plus-operands': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/restrict-template-expressions': 'off',
-    '@typescript-eslint/no-invalid-this': 'off'
+    '@typescript-eslint/no-invalid-this': 'off',
+    'vue/no-deprecated-dollar-scopedslots-api': 'off'
   }
 }
diff --git a/examples/sites/demos/apis/button-group.js b/examples/sites/demos/apis/button-group.js
index 5e9c7b4e95..f6b9464ab2 100644
--- a/examples/sites/demos/apis/button-group.js
+++ b/examples/sites/demos/apis/button-group.js
@@ -185,6 +185,7 @@ interface IButtonGroupData {
   text: string // 显示文本
   value: number | number // 选中的值
   disabled?: boolean // 是否禁用
+  tip?: string // 按钮悬浮提示 v3.17.0版本增加此功能
   // 配置选块角标
   sup?: {
     text: string // 角标文本
diff --git a/examples/sites/demos/apis/card.js b/examples/sites/demos/apis/card.js
index 3d54e8d82e..5e427175a7 100644
--- a/examples/sites/demos/apis/card.js
+++ b/examples/sites/demos/apis/card.js
@@ -7,7 +7,7 @@ export default {
       props: [
         {
           name: 'auto-width',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '卡片的宽度是否自动撑开，设置后将不再给卡片设置固定宽度',
@@ -20,7 +20,7 @@ export default {
         },
         {
           name: 'check-type',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置卡片单选、多选，单选/radio；多选/checkbox，需同时设置 label。',
@@ -33,7 +33,7 @@ export default {
         },
         {
           name: 'custom-class',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '卡片的class',
@@ -45,8 +45,8 @@ export default {
         },
         {
           name: 'disabled',
-          type: 'Boolean',
-          defaultValue: '',
+          type: 'boolean',
+          defaultValue: 'false',
           desc: {
             'zh-CN': '卡片禁用',
             'en-US': 'Card disabled'
@@ -57,7 +57,7 @@ export default {
         },
         {
           name: 'height',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '卡片内容区域的高度',
@@ -69,7 +69,7 @@ export default {
         },
         {
           name: 'icon-more',
-          type: 'Object',
+          type: "'iconxxx' | Component",
           defaultValue: '',
           desc: {
             'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
@@ -81,7 +81,7 @@ export default {
         },
         {
           name: 'label',
-          type: 'String / Number',
+          type: 'string / number',
           defaultValue: '',
           desc: {
             'zh-CN': 'checkbox或radio的label',
@@ -93,7 +93,8 @@ export default {
         },
         {
           name: 'options',
-          type: 'Array',
+          typeAnchorName: 'IOptions',
+          type: 'IOptions',
           defaultValue: '',
           desc: {
             'zh-CN': '操作按钮配置',
@@ -105,8 +106,8 @@ export default {
         },
         {
           name: 'size',
-          type: 'String',
-          defaultValue: '',
+          type: 'string',
+          defaultValue: 'medium',
           desc: {
             'zh-CN': '尺寸，支持large、medium、small、mini 4个尺寸，默认值为medium',
             'en-US': 'Size. The options are large, medium, small, and mini. The default value is medium.'
@@ -117,7 +118,7 @@ export default {
         },
         {
           name: 'src',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '图片或者视频的地址',
@@ -129,8 +130,8 @@ export default {
         },
         {
           name: 'status',
-          type: 'String',
-          defaultValue: '',
+          type: 'string',
+          defaultValue: 'default',
           desc: {
             'zh-CN': '卡片状态，支持 success、warning、alerting、danger 4 种状态',
             'en-US': 'Card status. The value can be success, warning, alerting, or dangerous.'
@@ -141,7 +142,7 @@ export default {
         },
         {
           name: 'title',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '卡片的标题',
@@ -153,10 +154,10 @@ export default {
         },
         {
           name: 'type',
-          type: 'String',
-          defaultValue: '',
+          type: 'string',
+          defaultValue: 'text',
           desc: {
-            'zh-CN': '设置卡片类型，支持 text、image、video、logo 4 种类型。',
+            'zh-CN': '设置卡片类型，支持 text、image、video、logo 4 种类型',
             'en-US': 'Set the card type. The options are text, image, video, and logo.'
           },
           mode: ['pc', 'mobile-first'],
@@ -165,7 +166,7 @@ export default {
         },
         {
           name: 'v-model',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '绑定值，默认为空',
@@ -174,12 +175,24 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'check-type-checkbox',
           mfDemo: ''
+        },
+        {
+          name: 'check-mode',
+          type: 'string',
+          defaultValue: 'normal',
+          desc: {
+            'zh-CN': '卡片被选中后的呈现模式，可选值为：normal | simple | badge',
+            'en-US': 'Display mode of a selected card. The options are as follows: normal | simple | badge'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'check-mode',
+          mfDemo: ''
         }
       ],
       events: [
         {
           name: 'change',
-          type: 'Function()',
+          type: '() => {}',
           defaultValue: '',
           desc: {
             'zh-CN': '组件选中/取消选中事件',
@@ -191,7 +204,7 @@ export default {
         },
         {
           name: 'icon-click',
-          type: 'Function()',
+          type: '() => {}',
           defaultValue: '',
           desc: {
             'zh-CN': '操作栏按钮点击事件',
@@ -203,7 +216,7 @@ export default {
         },
         {
           name: 'click',
-          type: 'Function()',
+          type: '() => {}',
           defaultValue: '',
           desc: {
             'zh-CN': '点击卡片事件',
@@ -278,5 +291,33 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IOptions',
+      type: 'interface',
+      code: `
+interface IOptions [
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+]
+`
+    }
   ]
 }
diff --git a/examples/sites/demos/apis/carousel.js b/examples/sites/demos/apis/carousel.js
index fb2fcca1fe..318a5fee44 100644
--- a/examples/sites/demos/apis/carousel.js
+++ b/examples/sites/demos/apis/carousel.js
@@ -146,6 +146,44 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'card-mode',
           mfDemo: ''
+        },
+        {
+          name: 'swipeable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否支持触屏轮播',
+            'en-US': 'Support Touchscreen Carousel'
+          },
+          mode: ['mobile-first'],
+          pcDemo: '',
+          mfDemo: ''
+        },
+        {
+          name: 'lite',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否打开精简模式，不显示切换按钮和指示器',
+            'en-US':
+              'Indicates whether to enable the simplified mode. The switch button and indicator are not displayed.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'swipeable',
+          mfDemo: ''
+        },
+        {
+          name: 'beforeSwipe',
+          type: '(newIndex,oldIndex) => boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '触摸轮播前，通过返回值控制某个图是否可轮播显示',
+            'en-US':
+              'Controls whether a graph can be displayed in rotation based on the return value before the rotation is touched.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'swipeable',
+          mfDemo: ''
         }
       ],
       events: [
diff --git a/examples/sites/demos/apis/collapse.js b/examples/sites/demos/apis/collapse.js
index 86e8c6fbfe..a223422776 100644
--- a/examples/sites/demos/apis/collapse.js
+++ b/examples/sites/demos/apis/collapse.js
@@ -142,6 +142,17 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'title'
+        },
+        {
+          name: 'expand-icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义icon 图标',
+            'en-US': 'Customized icon'
+          },
+          mode: ['pc'],
+          pcDemo: 'icon'
         }
       ],
       events: [],
diff --git a/examples/sites/demos/apis/currency.js b/examples/sites/demos/apis/currency.js
index ea24a3b4e0..03b7aa6951 100644
--- a/examples/sites/demos/apis/currency.js
+++ b/examples/sites/demos/apis/currency.js
@@ -10,8 +10,8 @@ export default {
           type: 'boolean',
           defaultValue: '该属性的默认值为 true',
           desc: {
-            'zh-CN': '是否显示清除按钮;是否可清空',
-            'en-US': 'Whether to display the Clear button; Clearable'
+            'zh-CN': '是否显示清除按钮',
+            'en-US': 'Whether to display the Clear button'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-service',
@@ -19,7 +19,7 @@ export default {
         },
         {
           name: 'disabled',
-          type: 'Boolen',
+          type: 'boolean',
           defaultValue: '该属性的默认值为 false',
           desc: {
             'zh-CN': '禁用',
@@ -116,14 +116,88 @@ export default {
           mfDemo: ''
         },
         {
-          name: 'v-model',
-          type: 'String / Number',
+          name: 'set-default',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否开启设置默认币种，默认值为 false',
+            'en-US':
+              'Indicates whether to enable the function of setting the default currency. The default value is false.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'set-default',
+          mfDemo: ''
+        },
+        {
+          name: 'set-default-currency',
+          type: 'function',
           defaultValue: '',
           desc: {
-            'zh-CN': '设置下拉框的值',
-            'en-US': ''
+            'zh-CN': '设置默认币种的自定义方法',
+            'en-US': 'Custom Method for Setting Default Currency'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'set-default-custom-service',
+          mfDemo: ''
+        },
+        {
+          name: 'fetch-default-currency',
+          type: 'function',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置默认币种的服务',
+            'en-US': 'Services that set the default currency'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'set-default-custom-service',
+          mfDemo: ''
+        },
+        {
+          name: 'label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `显示标题，设置 shape='filter' 属性切换至过滤器模式时有效，可参考 FilterBox 组件属性`,
+            'en-US': `Display title. This parameter is valid when shape='filter' is set to switch to the filter mode. For details, see the attributes of the FilterBox component.`
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter',
+          mfDemo: ''
+        },
+        {
+          name: 'drop-style',
+          type: 'object',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '自定义下拉选项样式',
+            'en-US': 'Custom drop-down options style'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter',
+          mfDemo: ''
+        },
+        {
+          name: 'shape',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `通过 shape='filter' 属性切换至过滤器模式`,
+            'en-US': `Switch to the filter mode by using the shape='filter' attribute.`
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter',
+          mfDemo: ''
+        },
+        {
+          name: 'tip',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': `显示提示信息，设置 shape='filter' 属性切换至过滤器模式时有效，可参考 FilterBox 组件属性`,
+            'en-US': `Displays a message. This parameter is valid when shape='filter' is set to switch to the filter mode. For details, see the attributes of the FilterBox component.`
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'filter',
           mfDemo: ''
         }
       ],
@@ -131,13 +205,19 @@ export default {
         {
           name: 'change',
           type: '',
-          defaultValue: '',
+          defaultValue: '(arg1,arg2) => void',
           desc: {
-            'zh-CN':
-              'arg1:{Any|Array 单选并且未指定渲染类型时，是选中项的值字段，此时没有arg2参数；多选并且未指定渲染类型时，是选中项值字段组成的数组，此时没有arg2参数；单选并且渲染类型为树或者表格时，是选中项对象，此时没有arg2参数；多选并且渲染类型为树或者表格时，是选中项对象值字段组成的数组，此时有arg2参数；}，arg2:{Array 多选并且渲染类型为树或者表格时，是选中项对象组成的数组}',
-            'en-US': ''
+            'zh-CN': `
+              arg1:{Any|Array 单选并且未指定渲染类型时，是选中项的值字段，此时没有arg2参数；多选并且未指定渲染类型时，是选中项值字段组成的数组，此时没有arg2参数；单选并且渲染类型为树或者表格时，是选中项对象，此时没有arg2参数；多选并且渲染类型为树或者表格时，是选中项对象值字段组成的数组，此时有arg2参数；}，<br>
+              arg2:{Array 多选并且渲染类型为树或者表格时，是选中项对象组成的数组}
+            `,
+            'en-US': `
+              When arg1:{Any|Array is selected and the rendering type is not specified, this is the value field of the selected item. In this case, the arg2 parameter is not provided. If multiple options are selected and the rendering type is not specified, the value field of the selected items is an array. In this case, the arg2 parameter is not provided. If you select a single item and the rendering type is tree or table, the object is selected. In this case, the arg2 parameter is not provided. When multiple selections are selected and the rendering type is tree or table, the array is composed of the selected object value fields. In this case, the arg2 parameter is available.},<br>
+              arg2:{An array consisting of selected items when multiple Arrays are selected and the rendering type is tree or table}
+            `
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
           mfDemo: ''
         }
       ],
diff --git a/examples/sites/demos/apis/drawer.js b/examples/sites/demos/apis/drawer.js
index 6f7ff186c9..6e70186ec7 100644
--- a/examples/sites/demos/apis/drawer.js
+++ b/examples/sites/demos/apis/drawer.js
@@ -182,28 +182,16 @@ export default {
         }
       ],
       events: [
-        {
-          name: 'open',
-          type: '() => void',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '打开抽屉事件',
-            'en-US': ''
-          },
-          mode: ['pc', 'mobile-first'],
-          pcDemo: 'open-event',
-          mfDemo: ''
-        },
         {
           name: 'close',
-          type: '() => void',
+          type: '(force: boolean) => void',
           defaultValue: '',
           desc: {
-            'zh-CN': '关闭抽屉事件',
-            'en-US': 'Close drawer event'
+            'zh-CN': '关闭抽屉事件，参数 force 指定是否强制关闭',
+            'en-US': 'Close drawer event, and parameter force decides force close'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'close-event',
+          pcDemo: 'events',
           mfDemo: ''
         },
         {
@@ -215,7 +203,19 @@ export default {
             'en-US': 'Confirm event. This event is emit only when show-footer="true" is set'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'confirm-event',
+          pcDemo: 'events',
+          mfDemo: ''
+        },
+        {
+          name: 'show',
+          type: '(instance: Component) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '抽屉显示事件',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'events',
           mfDemo: ''
         },
         {
@@ -252,6 +252,18 @@ export default {
           },
           mode: ['mobile-first'],
           mfDemo: ''
+        },
+        {
+          name: 'service',
+          type: '(configs: IDrawerConfigs) => Component',
+          typeAnchorName: 'IDrawerConfigs',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置并打开抽屉',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'use-through-method'
         }
       ],
       slots: [
@@ -297,5 +309,28 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IDrawerConfigs',
+      type: 'interface',
+      code: `
+interface IDrawerConfigs extends IDrawerProps {
+  // 方法调用的配置参数
+  events: {
+    // 监听事件
+    close: () => void
+    confirm: () => void
+    show: (instance: Component) => void
+  },
+  customSlots: {
+    // 插槽
+    default: string | VNode | (h) => VNode,
+    header: string | VNode | (h) => VNode,
+    headerRight: string | VNode | (h) => VNode,
+    footer: string | VNode | (h) => VNode
+}
+`
+    }
   ]
 }
diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js
index 3c5da42c26..67d4286f99 100644
--- a/examples/sites/demos/apis/grid.js
+++ b/examples/sites/demos/apis/grid.js
@@ -143,6 +143,30 @@ export default {
           pcDemo: 'grid-context-menu#context-menu-footer-menu',
           mfDemo: ''
         },
+        {
+          name: 'custom-column-names',
+          type: 'string[]',
+          defaultValue: "['TinyGridColumn']",
+          metaData: {
+            experimental: {
+              version: '3.17.0'
+            }
+          },
+          versionTipOption: {
+            extendTip: {
+              'zh-CN': '该属性于3.17版本新增，封装 grid-column 时需要配置此字段，提供给表格收集配置',
+              'en-US':
+                'This field needs to be configured when encapsulating grid-column and is provided for table collection configuration'
+            }
+          },
+          desc: {
+            'zh-CN': '封装 grid-column 时需要配置此字段，提供给表格收集配置',
+            'en-US':
+              'This field needs to be configured when encapsulating grid-column and is provided for table collection configuration'
+          },
+          mode: ['pc'],
+          pcDemo: 'grid-faq#custom-column'
+        },
         {
           name: 'data',
           typeAnchorName: 'IRow',
@@ -1436,6 +1460,28 @@ export default {
           pcDemo: 'grid-event#event-toggle-expand-change-event',
           mfDemo: ''
         },
+        {
+          name: 'toggle-group-change',
+          typeAnchorName: 'IToggleGroupChangeArgs',
+          type: '(row: IRow)=> void',
+          defaultValue: '',
+          metaData: {
+            experimental: '3.17.0'
+          },
+          versionTipOption: {
+            extendTip: {
+              'zh-CN': '该特性于3.17版本新增',
+              'en-US': 'This feature was added in version 3.17'
+            }
+          },
+          desc: {
+            'zh-CN': '当分组的展开和收起时会触发该事件',
+            'en-US': 'This event is triggered when the group is expanded and collapsed.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'grid-row-grouping#row-grouping-row-group-render',
+          mfDemo: ''
+        },
         {
           name: 'toggle-tree-change',
           typeAnchorName: 'IToggleTreeChangeArgs',
@@ -4016,8 +4062,16 @@ interface IDataHandler {
       type: 'type',
       code: `
 interface IRowGroup {
+  // 自定义渲染内容
+  render: () => Vnode
   // 列标识符，行分组会将具有相同值的列进行分组展示
   field: string
+  // 3.17版本新增，配置分组行的列合并数量
+  colspan: number
+  // 3.17版本新增，控制分组行是否可以手动折叠
+  closeable: boolean
+  // 3.17版本新增，控制分组生成时是否默认收起
+  activeMethod: (row: IRow) => boolean
 }
       `
     },
diff --git a/examples/sites/demos/apis/input.js b/examples/sites/demos/apis/input.js
index b4eecc8029..415a6ce86c 100644
--- a/examples/sites/demos/apis/input.js
+++ b/examples/sites/demos/apis/input.js
@@ -528,6 +528,20 @@ export default {
           },
           mode: ['mobile'],
           mobileDemo: ''
+        },
+        {
+          name: 'popup-more',
+          type: 'Boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '在只读的基础上增加 <code>popup-more</code> 属性，可使文本域超出显示更多按钮，点击更多按钮可以查看详细信息。',
+            'en-US':
+              'The <code>popup-more</code> attribute is added to enable the text field to exceed the display of more buttons. You can click more buttons to view details.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'display-only-popup-more',
+          mfDemo: 'display-only-popup-more'
         }
       ],
       events: [
diff --git a/examples/sites/demos/apis/popover.js b/examples/sites/demos/apis/popover.js
index 5bb73e44d1..1a77b73df3 100644
--- a/examples/sites/demos/apis/popover.js
+++ b/examples/sites/demos/apis/popover.js
@@ -376,6 +376,8 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
   updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
   boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
 }
       `
     },
diff --git a/examples/sites/demos/apis/select.js b/examples/sites/demos/apis/select.js
index 74fbc5d9e8..e206acd281 100644
--- a/examples/sites/demos/apis/select.js
+++ b/examples/sites/demos/apis/select.js
@@ -18,6 +18,19 @@ export default {
           pcDemo: 'all-text',
           mfDemo: 'all-text'
         },
+        {
+          name: 'show-all-text-tag',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN':
+              '指定多选模式全选后，在输入框中，是否只显示 all-text 指定的Tag。 默认值为 <code>false</code>，所有选项循环显示在输入框。',
+            'en-US':
+              'Specifies whether only the tag specified by all-text is displayed in the text box after the multi-select mode is specified. The default value is <code>false</code>. All options are displayed in the text box cyclically.'
+          },
+          mode: ['pc'],
+          pcDemo: 'all-text'
+        },
         {
           name: 'allow-copy',
           type: 'boolean',
@@ -625,12 +638,25 @@ export default {
           defaultValue: 'false',
           desc: {
             'zh-CN':
-              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性，同时设置只',
+              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性。',
             'en-US':
               'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
           },
           mode: ['pc'],
           pcDemo: 'multiple'
+        },
+        {
+          name: 'init-label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '通过 <code>init-label</code> 属性设置远程搜索或者嵌套树懒加载数据未获取到时显示的初始化 <code>label </code>值。',
+            'en-US':
+              'Use the <code>init-label</code> attribute to set the initial <code>label </code> value displayed when remote search or nested sloth loading data is not obtained.'
+          },
+          mode: ['pc'],
+          pcDemo: 'init-label'
         }
       ],
       events: [
diff --git a/examples/sites/demos/apis/split.js b/examples/sites/demos/apis/split.js
index e794208b83..cee3d0f4bf 100644
--- a/examples/sites/demos/apis/split.js
+++ b/examples/sites/demos/apis/split.js
@@ -87,7 +87,28 @@ export default {
           pcDemo: 'split-threshold'
         },
         {
-          mode: []
+          name: 'border',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示边框',
+            'en-US': 'Indicates whether to display the border.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'right-bottom-value',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN':
+              '默认情况下，v-model的值为左/上面板的位置。 当设置right-bottom-value 为true时，指明 v-model的值为 右/下面板的位置。 ',
+            'en-US':
+              'By default, the value of v-model is the position of the left/top panel. When right-bottom-value is set to true, the value of v-model is the position of the right/lower panel.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
       ],
       events: [
diff --git a/examples/sites/demos/apis/time-line.js b/examples/sites/demos/apis/time-line.js
index 4ca503c758..2f4678f6df 100644
--- a/examples/sites/demos/apis/time-line.js
+++ b/examples/sites/demos/apis/time-line.js
@@ -146,8 +146,9 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '是否显示底部分割线，适用于横向时间线',
-            'en-US': 'Whether to display the bottom separator line of horizontal timeline'
+            'zh-CN': '是否显示底部指标三角，适用于横向时间线',
+            'en-US':
+              'Indicates whether to display the bottom indicator triangle, which is applicable to the horizontal timeline.'
           },
           mode: ['pc'],
           pcDemo: 'show-divider'
diff --git a/examples/sites/demos/apis/tooltip.js b/examples/sites/demos/apis/tooltip.js
index cfc4681094..26f4110853 100644
--- a/examples/sites/demos/apis/tooltip.js
+++ b/examples/sites/demos/apis/tooltip.js
@@ -321,6 +321,8 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
   updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
   boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
 }
       `
     },
diff --git a/examples/sites/demos/apis/tree.js b/examples/sites/demos/apis/tree.js
index d31e9d1cdf..4fd2f2e740 100644
--- a/examples/sites/demos/apis/tree.js
+++ b/examples/sites/demos/apis/tree.js
@@ -478,6 +478,19 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'filter-view'
+        },
+        {
+          name: 'edit-config',
+          typeAnchorName: 'ITreeEditConfig',
+          type: 'ITreeEditConfig',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '用于编辑模式下参数配置,指示新增节点的 id ,是否显示 id 重复的警告等',
+            'en-US':
+              'Used for parameter configuration in editing mode, indicating the ID of a new node and whether to display a warning indicating duplicate IDs.'
+          },
+          mode: ['pc'],
+          pcDemo: 'edit'
         }
       ],
       events: [
@@ -1193,5 +1206,19 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'ITreeEditConfig',
+      type: 'type',
+      code: `
+interface ITreeEditConfig{
+  // 生成新节点的id
+  initNodeIdMethod: (node) => string;
+  // 新节点id与其它id重复时，是否在控制台显示告警。
+  noWarning: boolean;
+}
+      `
+    }
   ]
 }
diff --git a/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue b/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue
new file mode 100644
index 0000000000..f61a96c40c
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>默认可清除</p>
+    <tiny-date-picker v-model="value1"></tiny-date-picker>
+    <br />
+    <p>不可清除：</p>
+    <tiny-date-picker v-model="value2" :clearable="false"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value1: new Date(),
+      value2: new Date()
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/basic-usage.vue b/examples/sites/demos/mobile-first/app/date-picker/basic-usage.vue
new file mode 100644
index 0000000000..c9dc3dc5b6
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/basic-usage.vue
@@ -0,0 +1,20 @@
+<template>
+  <div style="width: 270px">
+    <tiny-date-picker v-model="value" type="date" title="日期选择"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: new Date()
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/date-range.vue b/examples/sites/demos/mobile-first/app/date-picker/date-range.vue
new file mode 100644
index 0000000000..62e0d1375e
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/date-range.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <p>日期值：{{ value }}</p>
+    <tiny-date-picker v-model="value" type="daterange" :picker-options="onPickOptions"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: [new Date(2022, 10, 12), new Date(2022, 11, 25)],
+      onPickOptions: {
+        onPick: (val) => {
+          if (val.maxDate) {
+            Modal.message({
+              message: '当前获取的值 maxDate' + val.maxDate,
+              status: 'info'
+            })
+            Modal.message({
+              message: '当前获取的值 minDate：' + val.minDate,
+              status: 'info'
+            })
+          }
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/datetime-range.vue b/examples/sites/demos/mobile-first/app/date-picker/datetime-range.vue
new file mode 100644
index 0000000000..774931a0ed
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/datetime-range.vue
@@ -0,0 +1,21 @@
+<template>
+  <div style="width: 270px">
+    <p>{{ value }}</p>
+    <tiny-date-picker v-model="value" type="datetimerange"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: ['2023-11-21T01:11:11.000Z', '2023-12-07T23:08:24.000Z']
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/datetime.vue b/examples/sites/demos/mobile-first/app/date-picker/datetime.vue
new file mode 100644
index 0000000000..a411958a3c
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/datetime.vue
@@ -0,0 +1,20 @@
+<template>
+  <div style="width: 270px">
+    <tiny-date-picker v-model="value" type="datetime"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/disabled.vue b/examples/sites/demos/mobile-first/app/date-picker/disabled.vue
new file mode 100644
index 0000000000..7ed934cb6e
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/disabled.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-button @click="disabled = !disabled">改为{{ disabled ? '启用' : '禁用' }}</tiny-button>
+    <br /><br />
+
+    <tiny-date-picker v-model="value" :disabled="disabled"></tiny-date-picker>
+    <br /><br />
+
+    <tiny-button @click="displayOnly = !displayOnly">改为{{ displayOnly ? '可操作' : '仅显示' }}模式</tiny-button>
+    <br /><br />
+
+    <tiny-date-picker v-model="value" :display-only="displayOnly"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      value: new Date(),
+      disabled: false,
+      displayOnly: false
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/placeholder.vue b/examples/sites/demos/mobile-first/app/date-picker/placeholder.vue
new file mode 100644
index 0000000000..5b78d3c65f
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/placeholder.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <p>日期组件</p>
+    <tiny-date-picker v-model="value1" type="date" placeholder="请选择日期 placeholder"></tiny-date-picker>
+
+    <br />
+    <p>日期范围选择组件</p>
+    <tiny-date-picker
+      v-model="value2"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期 start"
+      end-placeholder="结束日期 end"
+    ></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value1: '',
+      value2: []
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/step.vue b/examples/sites/demos/mobile-first/app/date-picker/step.vue
new file mode 100644
index 0000000000..658f00e9c5
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/step.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>日期值：{{ value }}</p>
+    <tiny-date-picker :step="step" v-model="value" type="datetimerange"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      step: {
+        hour: 2,
+        minute: 5
+      },
+      value: []
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.cn.md b/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.cn.md
new file mode 100644
index 0000000000..c2fade0fc0
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.cn.md
@@ -0,0 +1,9 @@
+---
+title: DatePicker 日期选择器组件
+---
+
+# DatePicker 日期选择器组件
+
+<div>
+
+</div>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.en.md b/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.en.md
new file mode 100644
index 0000000000..c2fade0fc0
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.en.md
@@ -0,0 +1,9 @@
+---
+title: DatePicker 日期选择器组件
+---
+
+# DatePicker 日期选择器组件
+
+<div>
+
+</div>
diff --git a/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.js b/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.js
new file mode 100644
index 0000000000..b7e778ec2c
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/webdoc/date-picker.js
@@ -0,0 +1,120 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 属性默认值为 `date`，以日期的形式进行选择。</p>',
+        'en-US': '<p>button type</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'datetime',
+      name: {
+        'zh-CN': '选择日期时间',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 属性为 `datetime`，以日期时间的形式进行选择。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['datetime.vue']
+    },
+    {
+      demoId: 'date-range',
+      name: {
+        'zh-CN': '选择日期范围',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 属性为 `daterange`，以日期范围的形式进行选择。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['date-range.vue']
+    },
+    {
+      demoId: 'datetime-range',
+      name: {
+        'zh-CN': '选择日期时间范围',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>设置 `type` 属性为 `datetimerange`，以日期时间范围的形式进行选择。<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['datetime-range.vue']
+    },
+    {
+      demoId: 'year',
+      name: {
+        'zh-CN': '年份选择',
+        'en-US': 'Year and month selector'
+      },
+      desc: {
+        'zh-CN':
+          '<p>设置 `type` 属性为 `year`，进行年份单选；设置 `type` 属性为 `years`，进行年份多选；设置 `type` 属性为 `yearrange`，进行年份范围选择。<p>',
+        'en-US': '<p>Set the `type` attribute to `year-month` to select a year-month selector.</p>'
+      },
+      codeFiles: ['year.vue']
+    },
+    {
+      demoId: 'placeholder',
+      name: {
+        'zh-CN': '占位符',
+        'en-US': 'Year Month Range Selector'
+      },
+      desc: {
+        'zh-CN':
+          '<p>单选可通过 `placeholder` 设置占位符。范围选择时，`start-placeholder` 和 `end-placeholder` 属性可分别指定开始日期和结束日期输入框的占位符。`range-separator` 属性指定开始日期和结束日期输入框之间的分隔符。<p>',
+        'en-US':
+          '<p>Single choice: You can use `placeholder` to set a placeholder. When a range is selected, the `start-placeholder` and `end-placeholder` attributes specify placeholders for the start and end date input boxes, respectively. The `range-separator` property specifies the separator between the start date and end date input boxes.<p>'
+      },
+      codeFiles: ['placeholder.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>配置 `disabled` 属性设置时间选择器禁用。<p>',
+        'en-US': '<p>Configure the `disabled` property to disable the time selector.<p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'step',
+      name: {
+        'zh-CN': '步长',
+        'en-US': 'Year Month Range Selector Limit Range'
+      },
+      desc: {
+        'zh-CN': '<p>通过 `step` 设置时间选择的步长，默认值为 `{ hour: 1, minute: 1, second: 1 }`。<p>',
+        'en-US':
+          '<p>Use `step` to set the time selection step. The default value is `{hour: 1, minute: 1, second: 1}`.<p>'
+      },
+      codeFiles: ['step.vue']
+    },
+    {
+      demoId: 'about-clear',
+      name: {
+        'zh-CN': '清除输入',
+        'en-US': 'Clear input'
+      },
+      desc: {
+        'zh-CN':
+          '<p>选择日期后，鼠标悬停在输入框时，默认会显示清除图标，单击图标可以清除输入框内容。设置 `clearable` 属性为 `false` 后，则不显示清除图标，不可清除。<p>',
+        'en-US':
+          '<p>After you select a date, the clear icon is displayed by default when you hover the cursor over the text box. You can click the icon to clear the text box. After the `clearable` attribute is set to `false`, the clear icon is not displayed and cannot be cleared.<p>'
+      },
+      codeFiles: ['about-clear.vue']
+    }
+  ]
+}
diff --git a/examples/sites/demos/mobile-first/app/date-picker/year.vue b/examples/sites/demos/mobile-first/app/date-picker/year.vue
new file mode 100644
index 0000000000..f2136f8cf7
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/year.vue
@@ -0,0 +1,63 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-col :span="6">
+        <div class="w-96">
+          <span>年份单选：</span>
+          <tiny-date-picker v-model="value1" type="year" placeholder="选择年份单选"></tiny-date-picker>
+          值：{{ value1 }}
+        </div>
+      </tiny-col>
+      <tiny-col :span="6">
+        <div class="w-96">
+          <span>年份多选：</span>
+          <tiny-date-picker v-model="value2" type="years" placeholder="选择年份多选"></tiny-date-picker>
+          值：{{ value2 }}
+        </div>
+      </tiny-col>
+    </tiny-row>
+    <br />
+    <tiny-row>
+      <tiny-col :span="6">
+        <div class="w-96">
+          <span>年份范围选择：</span>
+          <tiny-date-picker v-model="value3" type="yearrange" placeholder="选择年份范围"></tiny-date-picker>
+          值：{{ value3 }}
+        </div>
+      </tiny-col>
+      <tiny-col :span="6">
+        <div class="w-96">
+          年份禁用：
+          <tiny-date-picker v-model="value4" type="year" :picker-options="pickerOptions"></tiny-date-picker>
+          值：{{ value4 }}
+        </div>
+      </tiny-col>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Layout, Row, Col, DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyLayout: Layout,
+    TinyRow: Row,
+    TinyCol: Col,
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value1: '',
+      value2: ['2021-01-01T16:00:00.000Z', '2000-01-01T16:00:00.000Z'],
+      value3: '',
+      value4: '',
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now()
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/input/resize.vue b/examples/sites/demos/mobile-first/app/input/resize.vue
index af0819e67f..221727003a 100644
--- a/examples/sites/demos/mobile-first/app/input/resize.vue
+++ b/examples/sites/demos/mobile-first/app/input/resize.vue
@@ -1,18 +1,44 @@
 <template>
   <div class="demo-input">
-    <tiny-input type="textarea" v-model="input" placeholder="resize 为默认"></tiny-input>
-    <br />
-    <br />
-    <tiny-input type="textarea" v-model="input" resize="none" placeholder="resize 为 none"></tiny-input>
-    <br />
-    <br />
-    <tiny-input type="textarea" v-model="input" resize="both" placeholder="resize 为 both"></tiny-input>
-    <br />
-    <br />
-    <tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize 为 horizontal"></tiny-input>
-    <br />
-    <br />
-    <tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize 为 vertical"></tiny-input>
+    <p>resize</p>
+    <tiny-input type="textarea" v-model="input" placeholder="default"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="none" placeholder="resize = none"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="both" placeholder="resize = both"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
+    <tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize = vertical"></tiny-input>
+
+    <p>autosize</p>
+    <tiny-input
+      type="textarea"
+      v-model="textarea"
+      placeholder="autosize = { minRows: 2, maxRows: 3 }"
+      :autosize="{ minRows: 2, maxRows: 3 }"
+    ></tiny-input>
+    <tiny-input type="textarea" v-model="textarea" placeholder="autosize" autosize></tiny-input>
+
+    <p>hover-expand</p>
+    <tiny-input
+      type="textarea"
+      v-model="hoverText"
+      placeholder="hover-expand autosize = { minRows: 6, maxRows: 10 }"
+      :autosize="{ minRows: 6, maxRows: 10 }"
+      hover-expand
+    ></tiny-input>
+    <tiny-input
+      type="textarea"
+      v-model="hoverText"
+      placeholder="autosize  hover-expand"
+      autosize
+      hover-expand
+    ></tiny-input>
+    <tiny-input
+      type="textarea"
+      v-model="displayOnlyText"
+      placeholder="autosize  hover-expand display-only"
+      autosize
+      hover-expand
+      display-only
+    ></tiny-input>
   </div>
 </template>
 
@@ -25,14 +51,19 @@ export default {
   },
   data() {
     return {
-      input: ''
+      input: '',
+      textarea: '',
+      hoverText: '',
+      displayOnlyText: 'value 的内容'
     }
   }
 }
 </script>
 
-<style scoped>
-.demo-input .tiny-textarea {
-  width: 400px;
+<style lang="less" scoped>
+.demo-input div[data-tag='tiny-input'] {
+  width: 200px;
+  margin: 5px;
+  display: inline-block;
 }
 </style>
diff --git a/examples/sites/demos/mobile-first/app/input/webdoc/input.js b/examples/sites/demos/mobile-first/app/input/webdoc/input.js
index 9ba46d3a51..97bac0f1c8 100644
--- a/examples/sites/demos/mobile-first/app/input/webdoc/input.js
+++ b/examples/sites/demos/mobile-first/app/input/webdoc/input.js
@@ -133,8 +133,14 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过 `resize` 属性设置文本域的缩放。可选值：`none / both / horizontal / vertical`。注意：只在 `type="textarea"` 时有效。<p>',
-        'en-US': '<p>bbutton click</p>'
+          '<p>可通过 <code>resize</code> 属性设置文本域的缩放。可选值：<code>none / both / horizontal / vertical</code>。注意：只在 <code>type="textarea"</code> 时有效。</p>\n ' +
+          '<p>可通过 <code>autosize</code> 属性设置文本域自适应内容高度。可传入对象，如<code>{ minRows: 2, maxRows: 6 }</code>。</p> \n<p></p>' +
+          '<p>可通过 <code>hover-expand</code> 属性设置文本域鼠标悬浮展开/收起，只对 <code>type=textarea</code> 有效，最好搭配 <code>autosize</code> 一起使用<p>',
+
+        'en-US':
+          '<p>You can use the <code>resize</code> property to set the scaling of the text field. The value can be <code>none / both / horizontal / vertical</code>. Note: This parameter is valid only when <code>type="textarea"</code>.</p>' +
+          '<p>The <code>autosize</code> property allows you to set the text field to adapt to the content height. You can transfer an object, for example, <code>{minRows: 2, maxRows: 6}</code>.</p>' +
+          '<p>You can use the <code>hover-expand</code> attribute to set the text field to be expanded or collapsed by hovering the mouse. This parameter is valid only for <code>type=textarea</code>. It is recommended that you use it together with <code>autosize</code></p>'
       },
       codeFiles: ['resize.vue']
     },
diff --git a/examples/sites/demos/mobile-first/app/tabs/before-leave.vue b/examples/sites/demos/mobile-first/app/tabs/before-leave.vue
index b5469930ab..4d42998af9 100644
--- a/examples/sites/demos/mobile-first/app/tabs/before-leave.vue
+++ b/examples/sites/demos/mobile-first/app/tabs/before-leave.vue
@@ -24,6 +24,9 @@ export default {
   },
   methods: {
     beforeLeave() {
+      // 以下写法均为禁用切换
+      // return Promise.resolve(false)
+      // return Promise.reject()
       return false
     }
   }
diff --git a/examples/sites/demos/mobile-first/menus.js b/examples/sites/demos/mobile-first/menus.js
index ac265edc69..8633f318fc 100644
--- a/examples/sites/demos/mobile-first/menus.js
+++ b/examples/sites/demos/mobile-first/menus.js
@@ -49,6 +49,7 @@ export const cmpMenus = [
     key: 'cmp_form_components',
     children: [
       { name: 'DatePickerMobile', nameCn: '日期选择器', key: 'date-picker-mobile' },
+      { name: 'DatePicker', nameCn: '日期选择器多端', key: 'date-picker' },
       { name: 'TimePickerMobile', nameCn: '时间选择器', key: 'time-picker-mobile' },
       { name: 'Button', nameCn: '按钮', key: 'button' },
       { name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
diff --git a/examples/sites/demos/pc/app/amount/custom-service.spec.js b/examples/sites/demos/pc/app/amount/custom-service.spec.js
index 99ca03a91a..ff5f1f5c96 100644
--- a/examples/sites/demos/pc/app/amount/custom-service.spec.js
+++ b/examples/sites/demos/pc/app/amount/custom-service.spec.js
@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test'
 test('自定义服务', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('amount#custom-service')
-  await page.getByRole('img').filter({ hasText: '>' }).locator('path').click()
+  const demo = page.locator('#custom-service')
+  await demo.locator('.tiny-amount-input-icon').click()
   await page
     .locator('div')
     .filter({ hasText: /^币种MZNCNY$/ })
diff --git a/examples/sites/demos/pc/app/autocomplete/debounce.spec.ts b/examples/sites/demos/pc/app/autocomplete/debounce.spec.ts
index 33c55c7194..1f0b10a943 100644
--- a/examples/sites/demos/pc/app/autocomplete/debounce.spec.ts
+++ b/examples/sites/demos/pc/app/autocomplete/debounce.spec.ts
@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('debounce', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('autocomplete#debounce')
-  await page.getByText('去抖延时').nth(3).click()
- 
+
   await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
   await expect(page.getByRole('option', { name: 'WWWW科技YX公司' })).not.toBeVisible()
   await page.waitForTimeout(1000)
diff --git a/examples/sites/demos/pc/app/autocomplete/size.spec.ts b/examples/sites/demos/pc/app/autocomplete/size.spec.ts
index 9aaa8e89ff..2ab0118408 100644
--- a/examples/sites/demos/pc/app/autocomplete/size.spec.ts
+++ b/examples/sites/demos/pc/app/autocomplete/size.spec.ts
@@ -3,7 +3,6 @@ import { test, expect } from '@playwright/test'
 test('size', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('autocomplete#size')
-  await page.getByText('输入框大小').nth(1).click()
   await page.getByRole('textbox', { name: '请输入内容', exact: true }).click()
   await page.getByRole('option', { name: 'WWWW科技YX公司' }).click()
   await expect(page.locator('//div[@class="tiny-input tiny-input-medium"]')).toHaveClass(/tiny-input-medium/)
diff --git a/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue b/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue
index 51cb313ad9..734c3193cc 100644
--- a/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/button-group/disabled-composition-api.vue
@@ -25,7 +25,7 @@ const groupData = ref([
 
 const disabledGroup = ref([
   { text: 'Button1', value: 1 },
-  { text: 'Button2', value: 2, disabled: true },
+  { text: 'Button2', value: 2, disabled: true, tip: '因为xxx原因被禁用' },
   { text: 'Button3', value: 3 }
 ])
 </script>
diff --git a/examples/sites/demos/pc/app/button-group/disabled.spec.ts b/examples/sites/demos/pc/app/button-group/disabled.spec.ts
index e323702f04..4a2e360cdd 100644
--- a/examples/sites/demos/pc/app/button-group/disabled.spec.ts
+++ b/examples/sites/demos/pc/app/button-group/disabled.spec.ts
@@ -38,4 +38,8 @@ test('测试按钮是否禁用', async ({ page }) => {
   await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('background-color', 'rgb(245, 245, 246)')
   await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
   await expect(buttonGroup3.locator('button').nth(1)).toHaveCSS('color', 'rgb(173, 176, 184)')
+
+  // 按钮悬浮提示
+  await buttonGroup3.locator('button').nth(1).hover()
+  await expect(page.getByText('因为xxx原因被禁用')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/button-group/disabled.vue b/examples/sites/demos/pc/app/button-group/disabled.vue
index 873b42f9e7..33c16a5f41 100644
--- a/examples/sites/demos/pc/app/button-group/disabled.vue
+++ b/examples/sites/demos/pc/app/button-group/disabled.vue
@@ -29,7 +29,7 @@ export default {
       ],
       disabledGroup: [
         { text: 'Button1', value: 1 },
-        { text: 'Button2', value: 2, disabled: true },
+        { text: 'Button2', value: 2, disabled: true, tip: '因为xxx原因被禁用' },
         { text: 'Button3', value: 3 }
       ]
     }
diff --git a/examples/sites/demos/pc/app/button-group/webdoc/button-group.js b/examples/sites/demos/pc/app/button-group/webdoc/button-group.js
index 5f5c63d1e1..554ad8b3cb 100644
--- a/examples/sites/demos/pc/app/button-group/webdoc/button-group.js
+++ b/examples/sites/demos/pc/app/button-group/webdoc/button-group.js
@@ -37,9 +37,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>disabled</code> 设置按钮组是否禁用，数据项设置 <code>disabled</code> 属性可以禁用单个按钮。</p>',
+          '<p>通过 <code>disabled</code> 设置按钮组是否禁用，数据项设置 <code>disabled</code> 属性可以禁用单个按钮，数据项设置 <code>tip</code> 属性(v3.17.0版本增加此功能)增加按钮悬浮提示功能。</p>',
         'en-US':
-          '<p>By setting whether the button group is disabled through <code>disabled</code> , and setting the <code>disabled</code> property of the data item, individual buttons can be disabled.</p>'
+          '<p>You can set whether to disable the button group through <code>disabled</code>. You can set the <code>disabled</code> attribute to disable a single button. You can set the <code>tip</code> attribute to add the reason for disabling the button. </p></p>'
       },
       codeFiles: ['disabled.vue']
     },
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
index fc4c70368b..9ca8cda405 100644
--- a/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
@@ -39,10 +39,30 @@ const setDays = (type) => {
     return
   }
   map[type].value.push(...selectedDate.value)
+
+  selectedDate.value.forEach((date) => {
+    if (type === 'workingDays') {
+      removeFromArray(offDays.value, date)
+      removeFromArray(holidays.value, date)
+    } else if (type === 'offDays') {
+      removeFromArray(holidays.value, date)
+      removeFromArray(workingDays.value, date)
+    } else {
+      removeFromArray(offDays.value, date)
+      removeFromArray(workingDays.value, date)
+    }
+  })
   selectedDates.value = []
   selectedDate.value = []
 }
 
+const removeFromArray = (array, item) => {
+  const index = array.indexOf(item)
+  if (index !== -1) {
+    array.splice(index, 1)
+  }
+}
+
 const setDayBgColor = (date) => {
   if (workingDays.value.includes(date)) {
     return 'blue'
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day.vue b/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
index 6ce20f095c..33fb4fbcf8 100644
--- a/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
@@ -41,9 +41,29 @@ export default {
         return
       }
       this[type].push(...this.selectedDate)
+
+      this.selectedDate.forEach((date) => {
+        if (type === 'workingDays') {
+          this.removeFromArray(this.offDays, date)
+          this.removeFromArray(this.holidays, date)
+        } else if (type === 'offDays') {
+          this.removeFromArray(this.holidays, date)
+          this.removeFromArray(this.workingDays, date)
+        } else {
+          this.removeFromArray(this.offDays, date)
+          this.removeFromArray(this.workingDays, date)
+        }
+      })
       this.selectedDates = []
       this.selectedDate = []
     },
+    removeFromArray(array, item) {
+      const index = array.indexOf(item)
+      if (index !== -1) {
+        array.splice(index, 1)
+      }
+    },
+
     setDayBgColor(date) {
       if (this.workingDays.includes(date)) {
         return 'blue'
diff --git a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts
index f41c5abbeb..65336c8f87 100644
--- a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts
+++ b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts
@@ -3,24 +3,11 @@ import { test, expect } from '@playwright/test'
 test('添加日程事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('calendar#dynamic-add-schedule')
+
   const selectedDay4 = page.getByText('通知事项通知事项A', { exact: true })
   const dayFun4 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '请注意该通知事项A' })
 
-  const selectedDay13 = page.getByRole('listitem').filter({ hasText: '这是一条警告' })
-  const dayFun13 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '这是一条警告消息这是一条警告' })
-
-  const selectedDay14 = page.getByRole('listitem').filter({ hasText: '这是一条错误' })
-  const datFun14 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '这是一条错误，还有错误' })
-
   await selectedDay4.hover()
   await page.waitForTimeout(200)
   await expect(dayFun4).toBeVisible()
-
-  await selectedDay13.hover()
-  await page.waitForTimeout(200)
-  await expect(dayFun13).toBeVisible()
-
-  await selectedDay14.hover()
-  await page.waitForTimeout(200)
-  await expect(datFun14).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/card/card-select-composition-api.vue b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
new file mode 100644
index 0000000000..bc933e11b3
--- /dev/null
+++ b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="card-wrap">
+    <!-- 单选demo -->
+    <tiny-card-group v-model="radioValue" check-type="radio">
+      <tiny-card
+        id="smb-card"
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="simple"
+        custom-class="smb-card"
+      >
+        <div class="card-content">
+          <img class="card-image" :src="item.imageSrc" :alt="item.imageAlt || ''" />
+          <div class="card-text">
+            <div class="card-title">{{ item.title }}</div>
+            <div class="card-descript">
+              {{ item.content }}
+            </div>
+          </div>
+        </div>
+        <div v-if="item.options" class="card-stlecting">
+          <tiny-select v-model="item.selectVal" :options="item.options"> </tiny-select>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+
+    <!-- 多选demo -->
+    <tiny-card-group v-model="checkboxValue" check-type="checkbox">
+      <tiny-card
+        id="smb-card"
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="badge"
+        custom-class="smb-card"
+      >
+        <div class="card-content">
+          <img class="card-image" :src="item.imageSrc" :alt="item.imageAlt || ''" />
+          <div class="card-text">
+            <div class="card-title">{{ item.title }}</div>
+            <div class="card-descript">
+              {{ item.content }}
+            </div>
+          </div>
+        </div>
+        <div v-if="item.options" class="card-stlecting">
+          <tiny-select v-model="item.selectVal" :options="item.options"> </tiny-select>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard, CardGroup as TinyCardGroup, Select as TinySelect } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const radioValue = ref('TinyVue')
+const checkboxValue = ref(['TinyVue', 'TinyNG'])
+const dataArr = ref([
+  {
+    title: 'TinyVue',
+    content: '^15.0.01',
+    imageSrc: ''
+  },
+  {
+    title: 'TinyNG',
+    content: '^16.0.01',
+    imageSrc: ''
+  },
+  {
+    title: 'TinyEngine',
+    content: '^14.0.01',
+    imageSrc: '',
+    selectVal: 'TinyVue',
+    options: [
+      { value: 'TinyVue', label: 'TinyVue' },
+      { value: 'TinyNG', label: 'TinyNG' },
+      { value: 'TinyEngine', label: 'TinyEngine' }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  width: 100%;
+  background: #f5f5f5;
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+.my-card {
+  width: 80%;
+  cursor: pointer;
+  padding: 20px;
+}
+.content {
+  display: flex;
+}
+.content img {
+  width: 80px;
+  height: 80px;
+  margin-right: 20px;
+}
+/* 业务功能demo */
+.smb-card {
+  display: inline-block;
+  position: relative;
+  width: 220px;
+  margin: 25px;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: #fafafa;
+}
+
+.smb-card:hover {
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+}
+.card-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 24px;
+}
+.card-image {
+  display: block;
+  width: 40px;
+  height: 40px;
+}
+.card-text {
+  margin-left: 16px;
+}
+.card-title {
+  font-size: 14px;
+  text-align: left;
+  line-height: 22px;
+  color: #252b3a;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 136px;
+  overflow: hidden;
+}
+
+.card-descript {
+  font-size: 12px;
+  text-align: left;
+  line-height: 20px;
+  color: #575d6c;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 136px;
+  overflow: hidden;
+}
+.card-stlecting {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+</style>
+
+<style>
+#smb-card .tiny-card--small-padding {
+  padding: 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/card/card-select.vue b/examples/sites/demos/pc/app/card/card-select.vue
new file mode 100644
index 0000000000..c28b0776f0
--- /dev/null
+++ b/examples/sites/demos/pc/app/card/card-select.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="card-wrap">
+    <!-- 单选demo -->
+    <tiny-card-group v-model="radioValue" check-type="radio">
+      <tiny-card
+        id="smb-card"
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="simple"
+        custom-class="smb-card"
+      >
+        <div class="card-content">
+          <img class="card-image" :src="item.imageSrc" :alt="item.imageAlt || ''" />
+          <div class="card-text">
+            <div class="card-title">{{ item.title }}</div>
+            <div class="card-descript">
+              {{ item.content }}
+            </div>
+          </div>
+        </div>
+        <div v-if="item.options" class="card-stlecting">
+          <tiny-select v-model="item.selectVal" :options="item.options"> </tiny-select>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+
+    <!-- 多选demo -->
+    <tiny-card-group v-model="checkboxValue" check-type="checkbox">
+      <tiny-card
+        id="smb-card"
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="badge"
+        custom-class="smb-card"
+      >
+        <div class="card-content">
+          <img class="card-image" :src="item.imageSrc" :alt="item.imageAlt || ''" />
+          <div class="card-text">
+            <div class="card-title">{{ item.title }}</div>
+            <div class="card-descript">
+              {{ item.content }}
+            </div>
+          </div>
+        </div>
+        <div v-if="item.options" class="card-stlecting">
+          <tiny-select v-model="item.selectVal" :options="item.options"> </tiny-select>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+  </div>
+</template>
+
+<script>
+import { Card, CardGroup, Select } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card,
+    TinyCardGroup: CardGroup,
+    TinySelect: Select
+  },
+  data() {
+    return {
+      radioValue: 'TinyVue',
+      checkboxValue: ['TinyVue', 'TinyNG'],
+      dataArr: [
+        {
+          title: 'TinyVue',
+          content: '^15.0.01',
+          imageSrc: ''
+        },
+        {
+          title: 'TinyNG',
+          content: '^16.0.01',
+          imageSrc: ''
+        },
+        {
+          title: 'TinyEngine',
+          content: '^14.0.01',
+          imageSrc: '',
+          selectVal: 'TinyVue',
+          options: [
+            { value: 'TinyVue', label: 'TinyVue' },
+            { value: 'TinyNG', label: 'TinyNG' },
+            { value: 'TinyEngine', label: 'TinyEngine' }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  width: 100%;
+  background: #f5f5f5;
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+.my-card {
+  width: 80%;
+  cursor: pointer;
+  padding: 10px;
+}
+.content {
+  display: flex;
+}
+.content img {
+  width: 80px;
+  height: 80px;
+  margin-right: 20px;
+}
+/* 业务功能demo */
+.smb-card {
+  display: inline-block;
+  position: relative;
+  width: 220px;
+  margin: 25px;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: #fafafa;
+}
+
+.smb-card:hover {
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+}
+.card-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 24px;
+}
+.card-image {
+  display: block;
+  width: 40px;
+  height: 40px;
+}
+.card-text {
+  margin-left: 16px;
+}
+.card-title {
+  font-size: 14px;
+  text-align: left;
+  line-height: 22px;
+  color: #252b3a;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 136px;
+  overflow: hidden;
+}
+
+.card-descript {
+  font-size: 12px;
+  text-align: left;
+  line-height: 20px;
+  color: #575d6c;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 136px;
+  overflow: hidden;
+}
+.card-stlecting {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+</style>
+
+<style>
+#smb-card .tiny-card--small-padding {
+  padding: 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
new file mode 100644
index 0000000000..2f2d8e83bf
--- /dev/null
+++ b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="card-wrap">
+    <!-- 单选（normal）demo -->
+    <tiny-card-group v-model="radioValue" check-type="radio">
+      <tiny-card
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="normal"
+        custom-class="my-card"
+      >
+        check-mode="normal" 的示例
+      </tiny-card>
+    </tiny-card-group>
+
+    <!-- 单选（simple）demo -->
+    <tiny-card-group v-model="radioValue" check-type="radio">
+      <tiny-card
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="simple"
+        custom-class="my-card"
+      >
+        <div class="content">
+          <img :src="item.imageSrc" alt="" />
+          <div>
+            <p>simple</p>
+            <p>check-mode="simple" 的示例</p>
+          </div>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+
+    <!-- 多选（badge）demo -->
+    <tiny-card-group v-model="checkboxValue" check-type="checkbox">
+      <tiny-card
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="badge"
+        custom-class="my-card"
+      >
+        <div class="content">
+          <img :src="item.imageSrc" alt="" />
+          <div>
+            <p>badge</p>
+            <p>check-mode="badge" 的示例</p>
+          </div>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard, CardGroup as TinyCardGroup } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const radioValue = ref('TinyVue')
+const checkboxValue = ref(['TinyVue', 'TinyNG'])
+const dataArr = ref([
+  {
+    title: 'TinyVue',
+    content: '^15.0.01',
+    imageSrc: ''
+  },
+  {
+    title: 'TinyNG',
+    content: '^16.0.01',
+    imageSrc: ''
+  },
+  {
+    title: 'TinyEngine',
+    content: '^14.0.01',
+    imageSrc: ''
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  width: 100%;
+  background: #f5f5f5;
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+.my-card {
+  width: 80%;
+  cursor: pointer;
+  padding: 20px;
+}
+.content {
+  display: flex;
+}
+.content img {
+  width: 80px;
+  height: 80px;
+  margin-right: 20px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/card/check-mode.vue b/examples/sites/demos/pc/app/card/check-mode.vue
new file mode 100644
index 0000000000..1cd5eacbfe
--- /dev/null
+++ b/examples/sites/demos/pc/app/card/check-mode.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="card-wrap">
+    <!-- 单选（normal）demo -->
+    <tiny-card-group v-model="radioValue" check-type="radio">
+      <tiny-card
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="normal"
+        custom-class="my-card"
+      >
+        check-mode="normal" 的示例
+      </tiny-card>
+    </tiny-card-group>
+
+    <!-- 单选（simple）demo -->
+    <tiny-card-group v-model="radioValue" check-type="radio">
+      <tiny-card
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="simple"
+        custom-class="my-card"
+      >
+        <div class="content">
+          <img :src="item.imageSrc" alt="" />
+          <div>
+            <p>simple</p>
+            <p>check-mode="simple" 的示例</p>
+          </div>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+
+    <!-- 多选（badge）demo -->
+    <tiny-card-group v-model="checkboxValue" check-type="checkbox">
+      <tiny-card
+        v-for="item in dataArr"
+        :key="item.title"
+        :label="item.title"
+        check-mode="badge"
+        custom-class="my-card"
+      >
+        <div class="content">
+          <img :src="item.imageSrc" alt="" />
+          <div>
+            <p>badge</p>
+            <p>check-mode="badge" 的示例</p>
+          </div>
+        </div>
+      </tiny-card>
+    </tiny-card-group>
+  </div>
+</template>
+
+<script>
+import { Card, CardGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card,
+    TinyCardGroup: CardGroup
+  },
+  data() {
+    return {
+      radioValue: 'TinyVue',
+      checkboxValue: ['TinyVue', 'TinyNG'],
+      dataArr: [
+        {
+          title: 'TinyVue',
+          content: '^15.0.01',
+          imageSrc: ''
+        },
+        {
+          title: 'TinyNG',
+          content: '^16.0.01',
+          imageSrc: ''
+        },
+        {
+          title: 'TinyEngine',
+          content: '^14.0.01',
+          imageSrc: ''
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  width: 100%;
+  background: #f5f5f5;
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+.my-card {
+  width: 80%;
+  cursor: pointer;
+  padding: 10px;
+}
+.content {
+  display: flex;
+}
+.content img {
+  width: 80px;
+  height: 80px;
+  margin-right: 20px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
index 13169b8fab..b392156824 100644
--- a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card-wrap">
-    <tiny-card title="这是卡片标题" card-class="my-card">
+    <tiny-card title="这是卡片标题" custom-class="my-card">
       <p>
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
@@ -48,4 +48,7 @@ const options = ref([
   background: #f5f5f5;
   padding: 16px;
 }
+.my-card {
+  background-color: rgba(0, 0, 0, 0.3);
+}
 </style>
diff --git a/examples/sites/demos/pc/app/card/custom-class.vue b/examples/sites/demos/pc/app/card/custom-class.vue
index ce12e8b750..4af349ba8b 100644
--- a/examples/sites/demos/pc/app/card/custom-class.vue
+++ b/examples/sites/demos/pc/app/card/custom-class.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card-wrap">
-    <tiny-card title="这是卡片标题" card-class="my-card">
+    <tiny-card title="这是卡片标题" custom-class="my-card">
       <p>
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
         这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
@@ -56,4 +56,7 @@ export default {
   background: #f5f5f5;
   padding: 16px;
 }
+.my-card {
+  background-color: rgba(0, 0, 0, 0.3);
+}
 </style>
diff --git a/examples/sites/demos/pc/app/card/webdoc/card.js b/examples/sites/demos/pc/app/card/webdoc/card.js
index 88001a83a4..cd48301ede 100644
--- a/examples/sites/demos/pc/app/card/webdoc/card.js
+++ b/examples/sites/demos/pc/app/card/webdoc/card.js
@@ -83,12 +83,40 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过属性<code>check-type="checkbox"</code>设置卡片多选,通过属性<code>check-type="radio"</code>设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选</p>',
+          '<p>通过属性<code>check-type="checkbox"</code>设置卡片多选，通过属性<code>check-type="radio"</code>设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选</p>',
         'en-US':
           '<p>Use the <code>check-type="checkbox"</code> attribute to set multiple card selections, and use the <code>check-type="radio"</code> attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.</p>'
       },
       codeFiles: ['check-type-checkbox.vue']
     },
+    {
+      demoId: 'check-mode',
+      name: {
+        'zh-CN': '单选&多选（选择模式）',
+        'en-US': 'Single-choice & multiple-choice(check-mode)'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过属性<code>check-mode</code>配置卡片的选中效果，搭配属性<code>check-type="checkbox"</code>设置卡片多选，通过属性<code>check-type="radio"</code>设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选</p>',
+        'en-US':
+          '<p>Use the <code>check-mode</code> configuring the Selection Effect of a Card, and use the <code>check-type="checkbox"</code> attribute to set multiple card selections, and use the <code>check-type="radio"</code> attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.</p>'
+      },
+      codeFiles: ['check-mode.vue']
+    },
+    {
+      demoId: 'card-select',
+      name: {
+        'zh-CN': '卡片选择（业务功能）',
+        'en-US': 'Card Selection (Business Function)'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过属性<code>check-mode</code>配置卡片的选中效果，搭配属性<code>check-type="checkbox"</code>设置卡片多选，通过属性<code>check-type="radio"</code>设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选</p>',
+        'en-US':
+          '<p>Use the <code>check-mode</code> configuring the Selection Effect of a Card, and use the <code>check-type="checkbox"</code> attribute to set multiple card selections, and use the <code>check-type="radio"</code> attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.</p>'
+      },
+      codeFiles: ['card-select.vue']
+    },
     {
       demoId: 'custom-class',
       name: {
diff --git a/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue b/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue
new file mode 100644
index 0000000000..c397c101cc
--- /dev/null
+++ b/examples/sites/demos/pc/app/carousel/swipeable-composition-api.vue
@@ -0,0 +1,30 @@
+<template>
+  <tiny-carousel height="150px" lite>
+    <tiny-carousel-item class="carousel-item-demo" v-for="item in 2" :key="item">
+      <h3>{{ item }}</h3>
+    </tiny-carousel-item>
+  </tiny-carousel>
+</template>
+
+<script setup>
+import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.tiny-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+  text-align: center;
+  font-size: 25px;
+}
+
+.carousel-item-demo:nth-child(2n) {
+  background-color: #fafafa;
+}
+
+.carousel-item-demo:nth-child(2n + 1) {
+  background-color: #edf0f3;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/carousel/swipeable.vue b/examples/sites/demos/pc/app/carousel/swipeable.vue
new file mode 100644
index 0000000000..0cbe61fcbe
--- /dev/null
+++ b/examples/sites/demos/pc/app/carousel/swipeable.vue
@@ -0,0 +1,37 @@
+<template>
+  <tiny-carousel height="150px" lite>
+    <tiny-carousel-item class="carousel-item-demo" v-for="item in 2" :key="item">
+      <h3>{{ item }}</h3>
+    </tiny-carousel-item>
+  </tiny-carousel>
+</template>
+
+<script>
+import { Carousel, CarouselItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCarousel: Carousel,
+    TinyCarouselItem: CarouselItem
+  }
+}
+</script>
+
+<style scoped>
+.tiny-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+  text-align: center;
+  font-size: 25px;
+}
+
+.carousel-item-demo:nth-child(2n) {
+  background-color: #fafafa;
+}
+
+.carousel-item-demo:nth-child(2n + 1) {
+  background-color: #edf0f3;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/carousel/webdoc/carousel.js b/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
index 2c9d0936ab..c4e9030a0f 100644
--- a/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
+++ b/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
@@ -155,7 +155,7 @@ export default {
       desc: {
         'zh-CN': '<p>通过配置 <code>type</code> 属性为<code>card</code>后，走马灯将以卡片形式进行展示。</p>\n',
         'en-US':
-          '<p>After the <code>type</code> attribute is set to <code>card</code>, the lantern is displayed as a card. </p>\n'
+          '<p>After the <code>type</code> attribute is set to <code>card</code>, the carousel is displayed as a card. </p>\n'
       },
       codeFiles: ['card-mode.vue']
     },
@@ -163,7 +163,7 @@ export default {
       demoId: 'carousel-events',
       name: {
         'zh-CN': '走马灯事件',
-        'en-US': 'The Ma Deng incident'
+        'en-US': 'Carousel Events'
       },
       desc: {
         'zh-CN':
@@ -172,6 +172,24 @@ export default {
       },
       codeFiles: ['carousel-events.vue']
     },
+    {
+      demoId: 'swipeable',
+      name: {
+        'zh-CN': '触屏轮播',
+        'en-US': 'Touchscreen Carousel'
+      },
+      desc: {
+        'zh-CN': ` 
+          通过<code>swipeable</code> 属性,让多端模板支持触屏轮播。<br>
+          通过 <code>lite</code> 属性打开精简模式，不显示切换按钮和指示器。
+        `,
+        'en-US': `
+          The <code>swipeable</code> attribute is used to support touchscreen carousel.<br>
+          Enable the compact mode with the <code>lite</code> attribute. The toggle button and indicator are not displayed.
+        `
+      },
+      codeFiles: ['swipeable.vue']
+    },
     {
       demoId: 'card-show',
       name: {
diff --git a/examples/sites/demos/pc/app/collapse/accordion.vue b/examples/sites/demos/pc/app/collapse/accordion.vue
index 1f4f8eca90..847fb5a81e 100644
--- a/examples/sites/demos/pc/app/collapse/accordion.vue
+++ b/examples/sites/demos/pc/app/collapse/accordion.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+import { Collapse, CollapseItem } from '@opentiny/vue'
 
 export default {
   components: {
@@ -32,7 +32,7 @@ export default {
     return {
       activeName: '1'
     }
-  },
+  }
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/collapse/icon-composition-api.vue b/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
index ea73b4c514..d90587ba8f 100644
--- a/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
@@ -7,7 +7,7 @@
       <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
       <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
     </tiny-collapse-item>
-    <tiny-collapse-item title="反馈 Feedback" name="2">
+    <tiny-collapse-item title="使用expandIcon参数自定义icon" name="2" :expand-icon="IconDeltaRightO">
       <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
       <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
     </tiny-collapse-item>
@@ -26,11 +26,13 @@
 <script setup>
 import { ref } from 'vue'
 import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem } from '@opentiny/vue'
-import { iconDeltaRight } from '@opentiny/vue-icon'
+import { iconDeltaRight, iconDeltaRightO } from '@opentiny/vue-icon'
 
-const activeNames = ref(['1'])
+const activeNames = ref(['1', '2'])
 
 const TinyIconDeltaRight = iconDeltaRight()
+
+const IconDeltaRightO = iconDeltaRightO()
 </script>
 
 <style scoped lang="less">
diff --git a/examples/sites/demos/pc/app/collapse/icon.vue b/examples/sites/demos/pc/app/collapse/icon.vue
index 39b1722031..9eae12d7d8 100644
--- a/examples/sites/demos/pc/app/collapse/icon.vue
+++ b/examples/sites/demos/pc/app/collapse/icon.vue
@@ -1,6 +1,6 @@
 <template>
   <tiny-collapse class="demo-collapse-wrap" v-model="activeNames">
-    <tiny-collapse-item title="一致性 Consistency" name="1">
+    <tiny-collapse-item title="使用icon插槽自定义icon" name="1">
       <template #icon>
         <span>
           <icon-delta-right class="icon-delta-right"></icon-delta-right>
@@ -9,7 +9,7 @@
       <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
       <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
     </tiny-collapse-item>
-    <tiny-collapse-item title="反馈 Feedback" name="2">
+    <tiny-collapse-item title="使用expandIcon参数自定义icon" name="2" :expand-icon="IconDeltaRightO">
       <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
       <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
     </tiny-collapse-item>
@@ -27,7 +27,7 @@
 
 <script>
 import { Collapse, CollapseItem } from '@opentiny/vue'
-import { IconDeltaRight } from '@opentiny/vue-icon'
+import { IconDeltaRight, IconDeltaRightO } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -37,7 +37,8 @@ export default {
   },
   data() {
     return {
-      activeNames: ['1']
+      activeNames: ['1', '2'],
+      IconDeltaRightO: IconDeltaRightO()
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/collapse/webdoc/collapse.js b/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
index ebdadd34ec..c715762059 100644
--- a/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
+++ b/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
@@ -66,9 +66,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>在 <code>collapse-item</code> 元素上可以通过 <code>icon</code> 插槽的方式自定义展开折叠 icon 图标。</p>',
+          '<p>在 <code>collapse-item</code> 元素上可以通过 <code>icon</code> 插槽的方式自定义展开折叠 icon 图标。 也可以通过 <code>expand-icon</code> 参数传入一个框架自带的 <code>icon</code> 图标，此种方式不需要自己写样式</p>',
         'en-US':
-          '<p>On the <code>collapse-item</code> element, you can customize the folding icon icon by using the <code>icon</code> slot. </p>'
+          '<p>On the <code>collapse-item</code> element, the <code>icon</code> slot can be used to customize the expand/collapse icon. The <code>expand-icon</code> parameter can also be used to pass in an <code>icon</code> that comes with the framework. In this way, you do not need to write your own style. </p>'
       },
       codeFiles: ['icon.vue']
     },
diff --git a/examples/sites/demos/pc/app/color/auxiliary-color.spec.js b/examples/sites/demos/pc/app/color/auxiliary-color.spec.js
index 3ece0042cb..bca68eba25 100644
--- a/examples/sites/demos/pc/app/color/auxiliary-color.spec.js
+++ b/examples/sites/demos/pc/app/color/auxiliary-color.spec.js
@@ -1,14 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('test', async ({ page }) => {
-  await page.goto('color#neutral-color')
-  await page.getByText('主色彩').click()
-  await page.getByText('bg-primary-normal').click()
-  await expect(page.getByText('bg-primary-normal')).toHaveClass(/bg-primary-normal/)
-  await page.getByText('bg-primary-hover').click()
-  await expect(page.getByText('bg-primary-hover')).toHaveClass(/bg-primary-hover/)
-  await page.getByText('bg-primary-active').click()
-  await expect(page.getByText('bg-primary-active')).toHaveClass(/bg-primary-active/)
-  await page.getByText('bg-btn-active').click()
-  await expect(page.getByText('bg-btn-active')).toHaveClass(/bg-btn-active/)
+test('辅助色', async ({ page }) => {
+  await page.goto('color#auxiliary-color')
+  await expect(page.getByText('bg-success-normal')).toHaveClass(/bg-success-normal/)
+  await expect(page.getByText('bg-warning-normal')).toHaveClass(/bg-warning-normal/)
+  await expect(page.getByText('bg-error-normal')).toHaveClass(/bg-error-normal/)
 })
diff --git a/examples/sites/demos/pc/app/color/main-color.spec.js b/examples/sites/demos/pc/app/color/main-color.spec.js
index eb0285e1d8..d5f1cbc7d9 100644
--- a/examples/sites/demos/pc/app/color/main-color.spec.js
+++ b/examples/sites/demos/pc/app/color/main-color.spec.js
@@ -1,12 +1,9 @@
 import { test, expect } from '@playwright/test'
 
-test('test', async ({ page }) => {
+test('主色彩', async ({ page }) => {
   await page.goto('color#main-color')
-  await page.getByText('辅助色').click()
-  await page.getByText('bg-success-normal').click()
-  await expect(page.getByText('bg-success-normal')).toHaveClass(/bg-success-normal/)
-  await page.getByText('bg-warning-normal').click()
-  await expect(page.getByText('bg-warning-normal')).toHaveClass(/bg-warning-normal/)
-  await page.getByText('bg-error-normal').click()
-  await expect(page.getByText('bg-error-normal')).toHaveClass(/bg-error-normal/)
+  await expect(page.getByText('bg-primary-normal')).toHaveClass(/bg-primary-normal/)
+  await expect(page.getByText('bg-primary-hover')).toHaveClass(/bg-primary-hover/)
+  await expect(page.getByText('bg-primary-active')).toHaveClass(/bg-primary-active/)
+  await expect(page.getByText('bg-btn-active')).toHaveClass(/bg-btn-active/)
 })
diff --git a/examples/sites/demos/pc/app/color/neutral-color.spec.js b/examples/sites/demos/pc/app/color/neutral-color.spec.js
index ae32cf493c..1fdb83d628 100644
--- a/examples/sites/demos/pc/app/color/neutral-color.spec.js
+++ b/examples/sites/demos/pc/app/color/neutral-color.spec.js
@@ -1,14 +1,9 @@
 import { test, expect } from '@playwright/test'
 
-test('test', async ({ page }) => {
-  await page.goto('color#auxiliary-color')
-  await page.getByText('中性色').click()
-  await page.getByText('bg-gray-navigation').click()
+test('中性色', async ({ page }) => {
+  await page.goto('color#neutral-color')
   await expect(page.getByText('bg-gray-navigation')).toHaveClass(/bg-gray-navigation/)
-  await page.getByText('bg-gray-darker').click()
   await expect(page.getByText('bg-gray-darker')).toHaveClass(/bg-gray-darker/)
-  await page.getByText('bg-gray-dark').nth(1).click()
   await expect(page.getByText('bg-gray-dark').nth(1)).toHaveClass(/bg-gray-dark/)
-  await page.getByText('bg-gray-normal').click()
   await expect(page.getByText('bg-gray-normal')).toHaveClass(/bg-gray-normal/)
 })
diff --git a/examples/sites/demos/pc/app/config-provider/text-direct.spec.ts b/examples/sites/demos/pc/app/config-provider/text-direct.spec.ts
index dfa5a41910..0dc3c8a04d 100644
--- a/examples/sites/demos/pc/app/config-provider/text-direct.spec.ts
+++ b/examples/sites/demos/pc/app/config-provider/text-direct.spec.ts
@@ -3,9 +3,7 @@ import { test, expect } from '@playwright/test'
 test('测试改变文字方向', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('config-provider#text-direct')
-  await page.getByRole('link', { name: '改变文字方向' }).click()
   await page.getByRole('button', { name: 'RTL' }).click()
   await page.waitForTimeout(300)
   await page.getByRole('button', { name: 'LTR' }).click()
-  await page.waitForTimeout(300)
 })
diff --git a/examples/sites/demos/pc/app/crop/crop-meth.spec.ts b/examples/sites/demos/pc/app/crop/crop-meth.spec.ts
index 64ea95d186..b6e9b677af 100644
--- a/examples/sites/demos/pc/app/crop/crop-meth.spec.ts
+++ b/examples/sites/demos/pc/app/crop/crop-meth.spec.ts
@@ -3,15 +3,9 @@ import { test, expect } from '@playwright/test'
 test('裁剪框方法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('crop#crop-meth')
-  await page.getByRole('link', { name: '裁剪框方法 事件' }).click()
   await page.getByRole('button', { name: '启用裁剪框' }).click()
   await page.getByRole('button', { name: '图片裁剪' }).click()
   await page.locator('div:nth-child(5) > .tiny-svg').click()
-  await page.locator('div:nth-child(5) > .tiny-svg').click()
-  await page.locator('div:nth-child(5) > .tiny-svg').click()
-  await page.locator('div:nth-child(5) > .tiny-svg').click()
-  await page.locator('div:nth-child(5) > .tiny-svg').click()
-  await page.locator('div:nth-child(5) > .tiny-svg').click()
   await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(2)').click()
   await page.locator('div:nth-child(8) > .tiny-svg').click()
 })
diff --git a/examples/sites/demos/pc/app/currency/set-default-composition-api..vue b/examples/sites/demos/pc/app/currency/set-default-composition-api..vue
new file mode 100644
index 0000000000..7c32f68e3b
--- /dev/null
+++ b/examples/sites/demos/pc/app/currency/set-default-composition-api..vue
@@ -0,0 +1,10 @@
+<template>
+  <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Currency as TinyCurrency } from '@opentiny/vue'
+
+const value = ref('CNY')
+</script>
diff --git a/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api..vue b/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api..vue
new file mode 100644
index 0000000000..bf6ddeefbb
--- /dev/null
+++ b/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api..vue
@@ -0,0 +1,43 @@
+<template>
+  <tiny-currency
+    v-model="value"
+    placeholder="请选择"
+    set-default
+    :fetch-default-currency="fetchDefaultCurrency"
+    :set-default-currency="setDefaultCurrency"
+    @change="change"
+  ></tiny-currency>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from 'vue'
+import { Currency as TinyCurrency, Modal } from '@opentiny/vue'
+
+const value = ref('')
+const defaultCurrency = ref('VUV')
+
+const change = (value) => {
+  Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+}
+
+const fetchDefaultCurrency = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(defaultCurrency.value)
+    }, 500)
+  })
+}
+
+const setDefaultCurrency = (value) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      defaultCurrency.value = value
+      Modal.message({ message: `设置默认值成功，值为${value} `, status: 'success' })
+      resolve(value)
+    }, 500)
+  })
+}
+const instance = getCurrentInstance()
+const { $service } = instance.appContext.config.globalProperties
+console.log($service?.base.getEnvInfo())
+</script>
diff --git a/examples/sites/demos/pc/app/currency/set-default-custom-service.vue b/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
new file mode 100644
index 0000000000..aae4980a53
--- /dev/null
+++ b/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
@@ -0,0 +1,50 @@
+<template>
+  <tiny-currency
+    v-model="value"
+    placeholder="请选择"
+    set-default
+    :fetch-default-currency="fetchDefaultCurrency"
+    :set-default-currency="setDefaultCurrency"
+    @change="change"
+  ></tiny-currency>
+</template>
+
+<script>
+import { Currency, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCurrency: Currency
+  },
+  data() {
+    return {
+      value: '',
+      defaultCurrency: 'VUV'
+    }
+  },
+  methods: {
+    change(value) {
+      Modal.message({ message: `当前值为 ${value}`, status: 'info' })
+    },
+    fetchDefaultCurrency() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(this.defaultCurrency)
+        }, 500)
+      })
+    },
+    setDefaultCurrency(value) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          this.defaultCurrency = value
+          Modal.message({ message: `设置默认值成功，值为${value} `, status: 'success' })
+          resolve(value)
+        }, 500)
+      })
+    }
+  },
+  created() {
+    console.log(this.$service?.base.getEnvInfo())
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/currency/set-default.vue b/examples/sites/demos/pc/app/currency/set-default.vue
new file mode 100644
index 0000000000..b1104dfb74
--- /dev/null
+++ b/examples/sites/demos/pc/app/currency/set-default.vue
@@ -0,0 +1,18 @@
+<template>
+  <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+</template>
+
+<script>
+import { Currency } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCurrency: Currency
+  },
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/currency/webdoc/currency.js b/examples/sites/demos/pc/app/currency/webdoc/currency.js
index dc887c104d..315eda9732 100644
--- a/examples/sites/demos/pc/app/currency/webdoc/currency.js
+++ b/examples/sites/demos/pc/app/currency/webdoc/currency.js
@@ -66,6 +66,33 @@ export default {
           '<p>Use the filter attribute to switch to filter mode. In filter mode, you can pass the label to display the title, tip to display the prompt information, and clearable to display the clear button.</p>\n'
       },
       codeFiles: ['filter.vue']
+    },
+    {
+      demoId: 'set-default',
+      name: {
+        'zh-CN': '设置默认币种',
+        'en-US': 'Set Default Currency'
+      },
+      desc: {
+        'zh-CN': `通过 <code>set-default</code> 属性设置组件是否使用设置默认币种功能。<code>v-model</code>和默认币种值同时存在，以默认币种值优先`,
+        'en-US':
+          'Set the <code>set-default</code> attribute to determine whether the component uses the function of setting the default currency. <code>v-model</code> and the default currency value coexist. The default currency value is preferred.'
+      },
+      codeFiles: ['set-default.vue']
+    },
+    {
+      demoId: 'set-default-custom-service',
+      name: {
+        'zh-CN': '自定义默认币种服务',
+        'en-US': 'Custom Default Currency Service'
+      },
+      desc: {
+        'zh-CN':
+          '通过 <code>fetch-default-currency</code> 和 <code>set-default-currency</code> 自定义默认币种查询和保存服务',
+        'en-US':
+          'Use <code>fetch-default-currency</code> and <code>set-default-currency</code> to customize the default currency query and saving service.'
+      },
+      codeFiles: ['set-default-custom-service.vue']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue b/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
index f44f43b949..3af8d7344d 100644
--- a/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
+++ b/examples/sites/demos/pc/app/dialog-box/lock-scroll-composition-api.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <tiny-button @click="box1 = true" type="info">允许滚动背景</tiny-button>
-    <tiny-button @click="box2 = true">不允许滚动背景</tiny-button>
-    <tiny-dialog-box :lock-scroll="false" v-model:visible="box1" title="消息" width="30%">
-      <span>不锁定被遮罩内容的滚动</span>
+    <tiny-button @click="openDlg(true)" type="info">允许滚动背景</tiny-button>
+    <tiny-button @click="openDlg(false)">不允许滚动背景</tiny-button>
+    <tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%">
+      <span>允许被遮罩内容的滚动</span>
       <template #footer>
-        <tiny-button type="primary" @click="box1 = false">确 定</tiny-button>
+        <tiny-button type="primary" @click="closeDlg(true)">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
-    <tiny-dialog-box :lock-scroll="true" v-model:visible="box2" title="消息" width="30%">
-      <span>锁定被遮罩内容的滚动</span>
+    <tiny-dialog-box :lock-scroll="true" v-model:visible="visible2" title="消息" width="30%">
+      <span>不允许被遮罩内容的滚动</span>
       <template #footer>
-        <tiny-button type="primary" @click="box2 = false">确 定</tiny-button>
+        <tiny-button type="primary" @click="closeDlg(false)">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
   </div>
@@ -21,6 +21,28 @@
 import { ref } from 'vue'
 import { Button as TinyButton, DialogBox as TinyDialogBox } from '@opentiny/vue'
 
-const box1 = ref(false)
-const box2 = ref(false)
+const visible1 = ref(false)
+const visible2 = ref(false)
+
+function openDlg(isScroll) {
+  if (isScroll) {
+    document.body.style.overflow = 'auto'
+    document.body.style.height = '200vh'
+    visible1.value = true
+  } else {
+    document.body.style.height = '200vh'
+    visible2.value = true
+  }
+}
+
+function closeDlg(isScroll) {
+  if (isScroll) {
+    document.body.style.overflow = 'hidden'
+    document.body.style.height = '100vh'
+    visible1.value = false
+  } else {
+    document.body.style.height = '100vh'
+    visible2.value = false
+  }
+}
 </script>
diff --git a/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue b/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
index 127d88571e..366dff9c56 100644
--- a/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
+++ b/examples/sites/demos/pc/app/dialog-box/lock-scroll.vue
@@ -1,18 +1,17 @@
 <template>
   <div>
-    <tiny-button @click="box1 = true" type="info">允许滚动背景</tiny-button>
-    <tiny-button @click="box2 = true">不允许滚动背景</tiny-button>
-    <tiny-dialog-box :lock-scroll="false" v-model:visible="box1" title="消息" width="30%">
-      <span>不锁定被遮罩内容的滚动</span>
+    <tiny-button @click="openDlg(true)" type="info">允许滚动背景</tiny-button>
+    <tiny-button @click="openDlg(false)">不允许滚动背景</tiny-button>
+    <tiny-dialog-box :lock-scroll="false" v-model:visible="visible1" title="消息" width="30%">
+      <span>允许被遮罩内容的滚动</span>
       <template #footer>
-        <tiny-button type="primary" @click="box1 = false">确 定</tiny-button>
+        <tiny-button type="primary" @click="closeDlg(true)">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
-
-    <tiny-dialog-box :lock-scroll="true" v-model:visible="box2" title="消息" width="30%">
-      <span>锁定被遮罩内容的滚动</span>
+    <tiny-dialog-box :lock-scroll="true" v-model:visible="visible2" title="消息" width="30%">
+      <span>不允许被遮罩内容的滚动</span>
       <template #footer>
-        <tiny-button type="primary" @click="box2 = false">确 定</tiny-button>
+        <tiny-button type="primary" @click="closeDlg(false)">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
   </div>
@@ -28,8 +27,30 @@ export default {
   },
   data() {
     return {
-      box1: false,
-      box2: false
+      visible1: false,
+      visible2: false
+    }
+  },
+  methods: {
+    openDlg(isScroll) {
+      if (isScroll) {
+        document.body.style.overflow = 'auto'
+        document.body.style.height = '200vh'
+        this.visible1 = true
+      } else {
+        document.body.style.height = '200vh'
+        this.visible2 = true
+      }
+    },
+    closeDlg(isScroll) {
+      if (isScroll) {
+        document.body.style.overflow = 'hidden'
+        document.body.style.height = '100vh'
+        this.visible1 = false
+      } else {
+        document.body.style.height = '100vh'
+        this.visible2 = false
+      }
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/drawer/before-close-composition-api.vue b/examples/sites/demos/pc/app/drawer/before-close-composition-api.vue
index bc7e3d0dd2..b155977dca 100644
--- a/examples/sites/demos/pc/app/drawer/before-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/before-close-composition-api.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="demo-drawer">
-    <tiny-button @click="toggleDrawer(true)" type="primary"> 点击展开 Drawer </tiny-button>
+    <tiny-button type="primary" @click="showDrawer"> 点击展开 Drawer </tiny-button>
     <tiny-drawer
+      ref="drawer"
       title="抽屉关闭将会被拦截"
-      v-model:visible="visible"
-      :before-close="onBeforeClose"
       show-footer
-      @confirm="confirm"
+      :visible="visible"
+      :before-close="onBeforeClose"
+      @update:visible="visible = $event"
     >
-      <tiny-button @click="toggleDrawer(false)" type="primary"> 关闭 Drawer </tiny-button>
+      <tiny-button type="primary" @click="forceClose"> 强制关闭 Drawer </tiny-button>
     </tiny-drawer>
   </div>
 </template>
@@ -18,17 +19,17 @@ import { ref } from 'vue'
 import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const visible = ref(false)
+const drawer = ref()
+const showDrawer = () => {
+  visible.value = true
+}
 
-const toggleDrawer = (value) => {
-  visible.value = value
+const forceClose = () => {
+  drawer.value.close(true)
 }
 
 const onBeforeClose = (type) => {
   Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
   return false
 }
-
-const confirm = () => {
-  visible.value = false
-}
 </script>
diff --git a/examples/sites/demos/pc/app/drawer/before-close.spec.ts b/examples/sites/demos/pc/app/drawer/before-close.spec.ts
index c51021d31b..16d1a1d5bf 100644
--- a/examples/sites/demos/pc/app/drawer/before-close.spec.ts
+++ b/examples/sites/demos/pc/app/drawer/before-close.spec.ts
@@ -12,14 +12,14 @@ test('拦截弹窗关闭', async ({ page }) => {
 
   // 点击关闭按钮
   await page.getByRole('button', { name: 'Close' }).click()
-  await expect(message).toContainText('close')
+  await expect(message.nth(1)).toContainText('close')
   await expect(drawer).toBeVisible()
 
   // 点击遮罩层
   await page.locator('.tiny-drawer__mask').click()
   await expect(drawer).toBeVisible()
 
-  // 点击底部确认按钮
+  // 点击底部确定按钮
   await page.locator('#before-close').getByRole('button', { name: '确定' }).click()
   await expect(drawer).toBeVisible()
 
diff --git a/examples/sites/demos/pc/app/drawer/before-close.vue b/examples/sites/demos/pc/app/drawer/before-close.vue
index fe157a71e8..de5c01f56d 100644
--- a/examples/sites/demos/pc/app/drawer/before-close.vue
+++ b/examples/sites/demos/pc/app/drawer/before-close.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="demo-drawer">
-    <tiny-button @click="toggleDrawer(true)" type="primary"> 点击展开 Drawer </tiny-button>
+    <tiny-button type="primary" @click="showDrawer"> 点击展开 Drawer </tiny-button>
     <tiny-drawer
+      ref="drawer"
       title="抽屉关闭将会被拦截"
-      :visible="visible"
-      @update:visible="visible = $event"
-      @confirm="confirm"
       show-footer
+      :visible="visible"
       :before-close="onBeforeClose"
+      @update:visible="visible = $event"
     >
-      <tiny-button @click="toggleDrawer(false)" type="primary"> 关闭 Drawer </tiny-button>
+      <tiny-button type="primary" @click="forceClose"> 强制关闭 Drawer </tiny-button>
     </tiny-drawer>
   </div>
 </template>
@@ -28,15 +28,15 @@ export default {
     }
   },
   methods: {
-    toggleDrawer(value) {
-      this.visible = value
+    showDrawer() {
+      this.visible = true
+    },
+    forceClose() {
+      this.$refs.drawer.close(true)
     },
     onBeforeClose(type) {
       Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
       return false
-    },
-    confirm() {
-      this.visible = false
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue b/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
deleted file mode 100644
index be50d5e24f..0000000000
--- a/examples/sites/demos/pc/app/drawer/close-event-composition-api.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="openDrawer" type="primary"> 关闭事件示例 </tiny-button>
-    <tiny-drawer
-      title="标题"
-      :show-footer="true"
-      :visible="visible"
-      @update:visible="visible = $event"
-      @close="close"
-      @confirm="confirm"
-    >
-      <div style="padding: 32px">内容区域</div>
-    </tiny-drawer>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
-
-const visible = ref(false)
-
-function openDrawer() {
-  visible.value = true
-}
-
-function close() {
-  Modal.message('关闭事件')
-}
-
-function confirm() {
-  Modal.message({ message: '确认事件', status: 'success' })
-  visible.value = false
-}
-</script>
diff --git a/examples/sites/demos/pc/app/drawer/close-event.spec.ts b/examples/sites/demos/pc/app/drawer/close-event.spec.ts
deleted file mode 100644
index 06f83e5822..0000000000
--- a/examples/sites/demos/pc/app/drawer/close-event.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('关闭事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('drawer#close-event')
-
-  const message = page.locator('.tiny-modal.type__message').filter({ hasText: '关闭事件' }).first()
-
-  // 右上角关闭按钮
-  await page.getByRole('button', { name: '关闭事件示例' }).click()
-  await page.getByRole('button', { name: 'Close' }).click()
-  await expect(message).toBeVisible()
-
-  // 底部按钮关闭
-  await page.getByRole('button', { name: '关闭事件示例' }).click()
-  await page.getByRole('button', { name: '取消' }).click()
-  await expect(message).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/drawer/close-event.vue b/examples/sites/demos/pc/app/drawer/close-event.vue
deleted file mode 100644
index 8455fabc3c..0000000000
--- a/examples/sites/demos/pc/app/drawer/close-event.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="openDrawer" type="primary"> 关闭事件示例 </tiny-button>
-    <tiny-drawer
-      title="标题"
-      :show-footer="true"
-      :visible="visible"
-      @update:visible="visible = $event"
-      @close="close"
-      @confirm="confirm"
-    >
-      <div style="padding: 32px">内容区域</div>
-    </tiny-drawer>
-  </div>
-</template>
-
-<script>
-import { Drawer, Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      visible: false
-    }
-  },
-  methods: {
-    openDrawer() {
-      this.visible = true
-    },
-    close() {
-      Modal.message('关闭事件')
-    },
-    confirm() {
-      Modal.message({ message: '确认事件', status: 'success' })
-      this.visible = false
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue b/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
deleted file mode 100644
index 4573f3e300..0000000000
--- a/examples/sites/demos/pc/app/drawer/confirm-event-composition-api.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="openDrawer" type="primary"> 确认事件示例 </tiny-button>
-    <tiny-drawer
-      title="标题"
-      :show-footer="true"
-      :visible="visible"
-      @update:visible="visible = $event"
-      @confirm="confirm"
-    >
-      <div style="padding: 32px">内容区域</div>
-    </tiny-drawer>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
-
-const visible = ref(false)
-
-function openDrawer() {
-  visible.value = true
-}
-
-function confirm() {
-  Modal.message({ message: '确认事件', status: 'success' })
-}
-</script>
diff --git a/examples/sites/demos/pc/app/drawer/confirm-event.spec.ts b/examples/sites/demos/pc/app/drawer/confirm-event.spec.ts
deleted file mode 100644
index 220c501c06..0000000000
--- a/examples/sites/demos/pc/app/drawer/confirm-event.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('确认事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('drawer#confirm-event')
-
-  const message = page.locator('.tiny-modal.type__message').filter({ hasText: '确认事件' }).first()
-  await page.getByRole('button', { name: '确认事件示例' }).click()
-  await page.getByRole('button', { name: '确定' }).click()
-  await expect(message).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/drawer/events-composition-api.vue b/examples/sites/demos/pc/app/drawer/events-composition-api.vue
new file mode 100644
index 0000000000..6e46cc5065
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/events-composition-api.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="demo-drawer">
+    <tiny-button type="primary" @click="showDrawer"> 点击打开抽屉 </tiny-button>
+    <tiny-drawer
+      title="事件示例"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @open="onOpen"
+      @close="onClose"
+      @confirm="onConfirm"
+    >
+      <div class="content">
+        <span>内容区域</span>
+      </div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
+
+const visible = ref(false)
+
+const showDrawer = () => {
+  visible.value = true
+}
+
+const onOpen = () => {
+  Modal.message({ message: '打开事件', status: 'info' })
+}
+const onClose = () => {
+  Modal.message({ message: '关闭事件', status: 'info' })
+}
+const onConfirm = () => {
+  Modal.message({ message: '确定事件', status: 'info' })
+}
+</script>
+
+<style scoped>
+.content {
+  padding: 20px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drawer/events.spec.ts b/examples/sites/demos/pc/app/drawer/events.spec.ts
new file mode 100644
index 0000000000..09e5f1af2a
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/events.spec.ts
@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test'
+
+test('事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('drawer#events')
+
+  const drawer = page.locator('.tiny-drawer__main')
+
+  // 显示事件
+  const showMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '打开事件' }).first()
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await expect(showMsg).toBeVisible()
+  await expect(drawer).toBeVisible()
+
+  // 确定事件
+  const confirmMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '确定事件' }).first()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(confirmMsg).toBeVisible()
+  await expect(drawer).not.toBeVisible()
+
+  // 关闭事件
+  const closeMsg = page.locator('.tiny-modal.type__message').filter({ hasText: '关闭事件' }).first()
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  // 右上角关闭按钮
+  await drawer.locator('.tiny-drawer__headerbtn').click()
+  await expect(closeMsg).toBeVisible()
+  // 底部按钮关闭
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
+  await expect(closeMsg).toBeVisible()
+  // 点击蒙层关闭
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await page.locator('.tiny-drawer__mask').click()
+  await expect(closeMsg).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/drawer/events.vue b/examples/sites/demos/pc/app/drawer/events.vue
new file mode 100644
index 0000000000..ef4d571c59
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/events.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="demo-drawer">
+    <tiny-button type="primary" @click="showDrawer"> 点击打开抽屉 </tiny-button>
+    <p>{{ visible }}</p>
+    <tiny-drawer
+      title="事件示例"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @open="onOpen"
+      @close="onClose"
+      @confirm="onConfirm"
+    >
+      <div class="content">
+        <span>内容区域</span>
+      </div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDrawer: Drawer,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    showDrawer() {
+      this.visible = true
+    },
+    onOpen() {
+      Modal.message({ message: '打开事件', status: 'info' })
+    },
+    onClose() {
+      Modal.message({ message: '关闭事件', status: 'info' })
+    },
+    onConfirm() {
+      Modal.message({ message: '确定事件', status: 'info' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  padding: 20px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drawer/open-event-composition-api.vue b/examples/sites/demos/pc/app/drawer/open-event-composition-api.vue
deleted file mode 100644
index f1d5c41488..0000000000
--- a/examples/sites/demos/pc/app/drawer/open-event-composition-api.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="fn" type="primary"> 打开事件示例 </tiny-button>
-    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @open="open">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
-    </tiny-drawer>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
-
-const visible = ref(false)
-
-function fn() {
-  visible.value = true
-}
-
-function open() {
-  Modal.message('打开事件')
-}
-</script>
diff --git a/examples/sites/demos/pc/app/drawer/open-event.spec.ts b/examples/sites/demos/pc/app/drawer/open-event.spec.ts
deleted file mode 100644
index 6ae973472b..0000000000
--- a/examples/sites/demos/pc/app/drawer/open-event.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('打开事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('drawer#open-event')
-
-  const message = page.locator('.tiny-modal.type__message').filter({ hasText: '打开事件' }).first()
-
-  await page.getByRole('button', { name: '打开事件示例' }).click()
-  await expect(message).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/drawer/open-event.vue b/examples/sites/demos/pc/app/drawer/open-event.vue
deleted file mode 100644
index 779ffc30cf..0000000000
--- a/examples/sites/demos/pc/app/drawer/open-event.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <tiny-button @click="fn" type="primary"> 打开事件示例 </tiny-button>
-    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @open="open">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
-    </tiny-drawer>
-  </div>
-</template>
-
-<script>
-import { Drawer, Button, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyDrawer: Drawer,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      visible: false
-    }
-  },
-  methods: {
-    fn() {
-      this.visible = true
-    },
-    open() {
-      Modal.message('打开事件')
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
new file mode 100644
index 0000000000..27d42c2700
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="tiny-demo-drawer">
+    <tiny-button @click="showDrawer" type="primary"> 点击打开抽屉 </tiny-button>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { ref } from 'vue'
+import { Drawer, Button as TinyButton } from '@opentiny/vue'
+import { iconHelp } from '@opentiny/vue-icon'
+
+let drawerInstance = null
+
+const closeDrawer = () => {
+  if (drawerInstance) {
+    drawerInstance.close()
+  }
+}
+const IconHelp = iconHelp()
+const config = ref({
+  // props
+  title: '这是一个通过方法打开的抽屉',
+  showClose: false,
+  showFooter: true,
+  // 通过 events 监听事件
+  events: {
+    open: (instance) => console.log('open 事件', instance),
+    close: () => console.log('close 事件')
+  },
+  // 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
+  customSlots: {
+    // 使用 h 函数
+    default: (h) => h('p', { class: 'drawer-content' }, '抽屉主体内容。'),
+    // 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
+    headerRight: () => <IconHelp></IconHelp>,
+    // 直接赋值 VNode
+    footer: (
+      <TinyButton type="primary" onClick={closeDrawer}>
+        点击关闭
+      </TinyButton>
+    )
+  }
+})
+const showDrawer = () => {
+  drawerInstance = Drawer.service(config.value)
+}
+</script>
+
+<style scope>
+.drawer-content {
+  padding: 20px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method.spec.ts b/examples/sites/demos/pc/app/drawer/use-through-method.spec.ts
new file mode 100644
index 0000000000..170e7b13bf
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/use-through-method.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('通过方法调用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('drawer#use-through-method')
+
+  const drawer = page.locator('.tiny-drawer__main')
+  await page.getByRole('button', { name: '点击打开抽屉' }).click()
+  await expect(drawer).toBeVisible()
+  await expect(drawer.locator('.tiny-drawer__header')).toHaveText('这是一个通过方法打开的抽屉')
+  await expect(drawer.locator('.tiny-drawer__body')).toHaveText('抽屉主体内容。')
+  await drawer.getByRole('button', { name: '点击关闭' }).click()
+  await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method.vue b/examples/sites/demos/pc/app/drawer/use-through-method.vue
new file mode 100644
index 0000000000..726e197ecf
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/use-through-method.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="tiny-demo-drawer">
+    <tiny-button @click="showDrawer" type="primary"> 点击打开抽屉 </tiny-button>
+  </div>
+</template>
+
+<script lang="tsx">
+import { Drawer, Button } from '@opentiny/vue'
+import { iconHelp } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      drawerInstance: null
+    }
+  },
+  methods: {
+    showDrawer() {
+      const IconHelp = iconHelp()
+      const config = {
+        // props
+        title: '这是一个通过方法打开的抽屉',
+        showClose: false,
+        showFooter: true,
+        // 通过 events 监听事件
+        events: {
+          open: (instance) => console.log('open 事件', instance),
+          close: () => console.log('close 事件')
+        },
+        // 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
+        customSlots: {
+          // 使用 h 函数
+          default: (h) => h('p', { class: 'drawer-content' }, '抽屉主体内容。'),
+          // 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
+          headerRight: () => <IconHelp></IconHelp>,
+          // 直接赋值 VNode
+          footer: (
+            <Button type="primary" onClick={this.closeDrawer}>
+              点击关闭
+            </Button>
+          )
+        }
+      }
+      this.drawerInstance = Drawer.service(config)
+    },
+    closeDrawer() {
+      this.drawerInstance.close()
+    }
+  }
+}
+</script>
+
+<style scope>
+.drawer-content {
+  padding: 20px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
index 6c22479756..74951bfa2d 100644
--- a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
+++ b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
@@ -14,6 +14,16 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
+    {
+      demoId: 'use-through-method',
+      name: { 'zh-CN': '通过方法调用', 'en-US': 'Use through method' },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>Drawer.service</code> 方法可配置并打开抽屉，方法返回组件实例，可调用其 <code>close</code> 方法关闭组件。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['use-through-method.vue']
+    },
     {
       demoId: 'placement',
       name: {
@@ -81,8 +91,14 @@ export default {
         'en-US': 'Block Drawer Close'
       },
       desc: {
-        'zh-CN':
-          '\n          <p>通过 <code>before-close</code> 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 <code>false</code> 值，则拦截弹窗关闭；否则不拦截。</p>\n          <p>可以通过该拦截方法传入的参数获取关闭的操作类型 <code>type</code> 弹窗有以下关闭类型：</p>\n          <ul>\n            <li>confirm：点击确认时关闭</li>\n            <li>cancel：点击取消时关闭</li>\n            <li>close：点击关闭按钮时关闭</li>\n            <li>mask：点击遮罩层时关闭</li>\n          </ul>\n        ',
+        'zh-CN': `<p>通过 <code>before-close</code> 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 <code>false</code> 值，则拦截弹窗关闭；否则不拦截。</p>
+          <p>可以通过该拦截方法传入的参数获取关闭的操作类型 <code>type</code> 弹窗有以下关闭类型：</p>
+          <ul>
+            <li>confirm：点击确定按钮时关闭</li>
+            <li>cancel：点击取消时关闭</li>
+            <li>close：点击关闭按钮时关闭</li>
+            <li>mask：点击遮罩层时关闭</li>
+          </ul>`,
         'en-US':
           '<p>The <code>before-close</code> attribute can be used to configure a method that intercepts closing of the pop-up window. If the method returns a value of <code>false</code>, then the pop-up window is prevented from closing; otherwise it is not intercepted.</p>\n          <p>The parameter passed through this interception method can be used to obtain the type of closing operation <code>type</code> for the pop-up window. The following are the types of closing operations:</p>\n          <ul>\n            <li>confirm: click confirm button</li>\n            <li>cancel: click cancel button</li>\n            <li>close: click close button</li>\n            <li>mask: click mask</li>\n          </ul>\n          '
       },
@@ -187,41 +203,25 @@ export default {
       codeFiles: ['footer-slot.vue']
     },
     {
-      demoId: 'open-event',
+      demoId: 'events',
       name: {
-        'zh-CN': '打开事件',
+        'zh-CN': '事件',
         'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>打开抽屉事件。</p>',
+        'zh-CN': `
+          <p><code>open</code>：当抽屉打开时触发；</p>
+          <p><code>confirm</code>：当抽屉底部确定按钮点击时触发，该按钮仅当设置 <code>show-footer</code> 属性为 true 时可见；</p>
+          <p><code>close</code>：当抽屉关闭时触发。关闭抽屉的途径有：</p>
+            <ul>
+              <li>点击右上角关闭按钮；</li>
+              <li>点击遮罩层，仅当 <code>mask-closable</code> 属性为 true 时有效；</li>
+              <li>点击底部取消按钮，该按钮仅当设置 <code>show-footer</code> 属性为 true 时可见；</li>
+              <li>通过组件实例的 <code>close</code> 方法触发。</li>
+            </ul>`,
         'en-US': ''
       },
-      codeFiles: ['open-event.vue']
-    },
-    {
-      demoId: 'close-event',
-      name: {
-        'zh-CN': '关闭事件',
-        'en-US': ''
-      },
-      desc: {
-        'zh-CN': '<p>关闭抽屉事件，抽屉关闭时触发。</p>',
-        'en-US': ''
-      },
-      codeFiles: ['close-event.vue']
-    },
-    {
-      demoId: 'confirm-event',
-      name: {
-        'zh-CN': '确认事件',
-        'en-US': ''
-      },
-      desc: {
-        'zh-CN':
-          '<p>确认事件，点击确认按钮时触发，设置 <code>:show-footer="true"</code> 且不使用底部插槽 <code>footer</code> 时有效。</p>',
-        'en-US': ''
-      },
-      codeFiles: ['confirm-event.vue']
+      codeFiles: ['events.vue']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/dropdown/options.spec.ts b/examples/sites/demos/pc/app/dropdown/options.spec.ts
index 85ade3c878..99e090ee0d 100644
--- a/examples/sites/demos/pc/app/dropdown/options.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/options.spec.ts
@@ -32,8 +32,8 @@ test('配置式：使用 menu-options 和 title', async ({ page }) => {
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
   await expect(dropDown).toContainText('点击下拉')
-  await page.waitForTimeout(200)
   await dropDown.hover()
+  await page.waitForTimeout(300)
   await expect(dropDownMenu.first()).toBeVisible()
   await expect(dropDownMenuItem.first()).toContainText('老友粉')
   await expect(dropDownMenuItem.first()).toHaveClass(/is-disabled/)
diff --git a/examples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vue
index 48c7e7dd79..4d7642ab82 100644
--- a/examples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/flowchart/basic-usage-composition-api.vue
@@ -20,7 +20,6 @@
 import { ref } from 'vue'
 import { Modal, Popover } from '@opentiny/vue'
 import Flowchart from '@opentiny/vue-flowchart'
-import { hooks } from '@opentiny/vue-common'
 import { iconYes, iconPanelMini, iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
 
 const { createNode, createLink, createItem, createConfig } = Flowchart
@@ -138,7 +137,7 @@ const HandlerList = {
       const imgStyle = `width:${headSize}px;height:${headSize}px`
       const res = []
 
-      items.map(({ key }, i) => {
+      items.forEach(({ key }, i) => {
         let left
 
         if (items.length > 1) {
@@ -229,15 +228,15 @@ function toggleStatus() {
   chartRef.value.refresh()
 }
 
-function onClickNode(afterNode, e) {
+function onClickNode(_afterNode, _e) {
   Modal.message('click-node')
 }
 
-function onClickLink(afterLink, e) {
+function onClickLink(_afterLink, _e) {
   Modal.message('click-link')
 }
 
-function onClickBlank(param, e) {
+function onClickBlank(_param, _e) {
   Modal.message('click-blank')
 }
 </script>
diff --git a/examples/sites/demos/pc/app/flowchart/basic-usage.vue b/examples/sites/demos/pc/app/flowchart/basic-usage.vue
index e7336f47ec..979cc457d1 100644
--- a/examples/sites/demos/pc/app/flowchart/basic-usage.vue
+++ b/examples/sites/demos/pc/app/flowchart/basic-usage.vue
@@ -137,7 +137,7 @@ const HandlerList = {
       const imgStyle = `width:${headSize}px;height:${headSize}px`
       const res = []
 
-      items.map(({ key }, i) => {
+      items.forEach(({ key }, i) => {
         let left
 
         if (items.length > 1) {
@@ -236,13 +236,13 @@ export default {
       // 2.刷新流程图
       this.$refs.chart.refresh()
     },
-    onClickNode(afterNode, e) {
+    onClickNode(_afterNode, _e) {
       Modal.message('click-node')
     },
-    onClickLink(afterLink, e) {
+    onClickLink(_afterLink, _e) {
       Modal.message('click-link')
     },
-    onClickBlank(param, e) {
+    onClickBlank(_param, _e) {
       Modal.message('click-blank')
     }
   }
diff --git a/examples/sites/demos/pc/app/grid/custom/column-simple.spec.js b/examples/sites/demos/pc/app/grid/custom/column-simple.spec.js
index fcb08211ab..e04f779c18 100644
--- a/examples/sites/demos/pc/app/grid/custom/column-simple.spec.js
+++ b/examples/sites/demos/pc/app/grid/custom/column-simple.spec.js
@@ -5,9 +5,9 @@ test('简化版列设置测试', async ({ page }) => {
   await page.goto('grid-custom#custom-column-simple')
   await page.locator('.tiny-select > div').click()
   await page.getByRole('listitem').filter({ hasText: '员工数' }).click()
-  const thHeader = page.locator('th.tiny-grid-header__column').nth(1)
-  await expect(thHeader).toContainText('名称')
-  await page.getByRole('listitem').filter({ hasText: '名称' }).locator('span').nth(2).click()
+  const thHeader = page.locator('th.tiny-grid-header__column').nth(3)
+  await expect(thHeader).toContainText('地址')
+  await page.getByRole('listitem').filter({ hasText: '名称' }).click()
   const thHeader2 = page.locator('th.tiny-grid-header__column').nth(1)
 
   await expect(thHeader2).toContainText('员工数')
diff --git a/examples/sites/demos/pc/app/grid/drag/multi-header-drag-composition-api.vue b/examples/sites/demos/pc/app/grid/drag/multi-header-drag-composition-api.vue
new file mode 100644
index 0000000000..49e0208c31
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/drag/multi-header-drag-composition-api.vue
@@ -0,0 +1,156 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    column-key
+    :drop-config="dropConfig"
+    @column-drag-start="columnDragStart"
+    @column-drop="columnDrop"
+    column-min-width="180"
+    :optimization="{ scrollX: { gt: 10, rSize: 15 } }"
+    show-header-overflow
+  >
+    <tiny-grid-column title="group">
+      <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" fixed="left"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group1">
+      <tiny-grid-column field="employees" title="员工数1"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期1"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group2">
+      <tiny-grid-column field="employees" title="员工数2"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期2"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group3">
+      <tiny-grid-column field="employees" title="员工数3"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期3"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group4">
+      <tiny-grid-column field="employees" title="员工数4"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期4"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group5">
+      <tiny-grid-column field="employees" title="员工数5"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期5"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group6">
+      <tiny-grid-column field="employees" title="员工数6"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期6"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group7">
+      <tiny-grid-column field="employees" title="员工数7"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期7"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group8">
+      <tiny-grid-column field="employees" title="员工数8"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期8"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group9">
+      <tiny-grid-column field="employees" title="员工数9"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期9"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group10">
+      <tiny-grid-column field="employees" title="员工数10"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期10"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group11">
+      <tiny-grid-column field="employees" title="员工数11"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期11"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group12">
+      <tiny-grid-column field="employees" title="员工数12"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期12"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group13">
+      <tiny-grid-column field="employees" title="员工数13"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期13"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group14">
+      <tiny-grid-column field="employees" title="员工数14"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期14"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group15">
+      <tiny-grid-column field="employees" title="员工数15"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期15"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group16">
+      <tiny-grid-column field="employees" title="员工数16"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期16"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group17">
+      <tiny-grid-column field="employees" title="员工数17"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期17"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group18">
+      <tiny-grid-column field="employees" title="员工数18"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期18"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group19">
+      <tiny-grid-column field="employees" title="员工数19"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期19"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group20">
+      <tiny-grid-column field="employees" title="员工数20"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期20"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column field="city" title="城市" fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
+
+const dropConfig = ref({
+  // 在设置 scheme 标志位 v2 时，列拖拽使用新方案。不影响行拖拽使用 sortablejs
+  scheme: 'v2',
+  // 开启列拖拽
+  column: true,
+  // 可选值：level（同层级拖拽）和 nested（跨层级拖拽），默认值 level
+  columnGroup: 'level',
+  // 拖拽前处理，返回 false 则阻止拖拽，其它返回值不阻止拖拽。支持异步。
+  columnBeforeDrop: ({ dragColumn, dropColumn }) => {
+    console.log('columnBeforeDrop', dragColumn, dropColumn)
+    return true
+  },
+  // 可放置列临时样式类
+  columnDropClass: 'in-drop'
+})
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    city: '福州',
+    employees: 800,
+    created_date: '2014-04-30 00:56:00'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    city: '深圳',
+    employees: 300,
+    created_date: '2016-07-08 12:36:22'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    city: '中山',
+    employees: 1300,
+    created_date: '2014-02-14 14:14:14'
+  }
+])
+
+function columnDragStart() {
+  Modal.message({ message: '列拖拽开始', status: 'info' })
+}
+function columnDrop() {
+  Modal.message({ message: '列拖拽结束', status: 'info' })
+}
+</script>
+
+<style>
+.in-drop {
+  outline: 1px dashed rgba(170, 50, 220, 0.6);
+  outline-offset: -2px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/drag/multi-header-drag.spec.js b/examples/sites/demos/pc/app/grid/drag/multi-header-drag.spec.js
new file mode 100644
index 0000000000..370f39da90
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/drag/multi-header-drag.spec.js
@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test('多级表头拖拽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-drag#multi-header-drag')
+  await page.setViewportSize({
+    width: 2000,
+    height: 1000
+  })
+  const draggerDom = page.getByRole('cell', { name: '创建日期1' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggerDom.boundingBox()
+  // 验证不可拖拽
+  await page.mouse.move(x + 2, y + 3)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(x + 200, y)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-grid-header__row').nth(1).locator('.tiny-grid-header__column').nth(3)).toContainText(
+    '创建日期1'
+  )
+
+  // 获取拖拽元素位置
+  const { x: left, y: top } = await draggerDom.boundingBox()
+  // 验证可拖拽
+  await page.mouse.move(left + 2, top + 3)
+  await page.waitForTimeout(200)
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(left - 50, top)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-grid-header__row').nth(1).locator('.tiny-grid-header__column').nth(2)).toContainText(
+    '创建日期1'
+  )
+})
diff --git a/examples/sites/demos/pc/app/grid/drag/multi-header-drag.vue b/examples/sites/demos/pc/app/grid/drag/multi-header-drag.vue
new file mode 100644
index 0000000000..9c77c5ae01
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/drag/multi-header-drag.vue
@@ -0,0 +1,166 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    column-key
+    :drop-config="dropConfig"
+    @column-drag-start="columnDragStart"
+    @column-drop="columnDrop"
+    column-min-width="180"
+    :optimization="{ scrollX: { gt: 10, rSize: 15 } }"
+    show-header-overflow
+  >
+    <tiny-grid-column title="group">
+      <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group1">
+      <tiny-grid-column field="employees" title="员工数1"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期1"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group2">
+      <tiny-grid-column field="employees" title="员工数2"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期2"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group3">
+      <tiny-grid-column field="employees" title="员工数3"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期3"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group4">
+      <tiny-grid-column field="employees" title="员工数4"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期4"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group5">
+      <tiny-grid-column field="employees" title="员工数5"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期5"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group6">
+      <tiny-grid-column field="employees" title="员工数6"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期6"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group7">
+      <tiny-grid-column field="employees" title="员工数7"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期7"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group8">
+      <tiny-grid-column field="employees" title="员工数8"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期8"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group9">
+      <tiny-grid-column field="employees" title="员工数9"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期9"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group10">
+      <tiny-grid-column field="employees" title="员工数10"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期10"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group11">
+      <tiny-grid-column field="employees" title="员工数11"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期11"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group12">
+      <tiny-grid-column field="employees" title="员工数12"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期12"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group13">
+      <tiny-grid-column field="employees" title="员工数13"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期13"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group14">
+      <tiny-grid-column field="employees" title="员工数14"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期14"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group15">
+      <tiny-grid-column field="employees" title="员工数15"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期15"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group16">
+      <tiny-grid-column field="employees" title="员工数16"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期16"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group17">
+      <tiny-grid-column field="employees" title="员工数17"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期17"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group18">
+      <tiny-grid-column field="employees" title="员工数18"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期18"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group19">
+      <tiny-grid-column field="employees" title="员工数19"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期19"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="group20">
+      <tiny-grid-column field="employees" title="员工数20"></tiny-grid-column>
+      <tiny-grid-column field="created_date" title="创建日期20"></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column field="city" title="城市" fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      dropConfig: {
+        // 在设置 scheme 标志位 v2 时，列拖拽使用新方案。不影响行拖拽使用 sortablejs
+        scheme: 'v2',
+        // 开启列拖拽
+        column: true,
+        // 可选值：level（同层级拖拽）和 nested（跨层级拖拽），默认值 level
+        columnGroup: 'level',
+        // 拖拽前处理，返回 false 则阻止拖拽，其它返回值不阻止拖拽。支持异步。
+        columnBeforeDrop: ({ dragColumn, dropColumn }) => {
+          console.log('columnBeforeDrop', dragColumn, dropColumn)
+          return true
+        },
+        // 可放置列临时样式类
+        columnDropClass: 'in-drop'
+      },
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          city: '福州',
+          employees: 800,
+          created_date: '2014-04-30 00:56:00'
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          city: '深圳',
+          employees: 300,
+          created_date: '2016-07-08 12:36:22'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          city: '中山',
+          employees: 1300,
+          created_date: '2014-02-14 14:14:14'
+        }
+      ]
+    }
+  },
+  methods: {
+    columnDragStart() {
+      Modal.message({ message: '列拖拽开始', status: 'info' })
+    },
+    columnDrop() {
+      Modal.message({ message: '列拖拽结束', status: 'info' })
+    }
+  }
+}
+</script>
+
+<style>
+.in-drop {
+  outline: 1px dashed rgba(170, 50, 220, 0.6);
+  outline-offset: -2px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag-composition-api.vue b/examples/sites/demos/pc/app/grid/drag/row-drag-composition-api.vue
index 517122c44a..8cc0402c47 100644
--- a/examples/sites/demos/pc/app/grid/drag/row-drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/drag/row-drag-composition-api.vue
@@ -6,8 +6,9 @@
     @row-drop-end="rowDropEnd"
     @row-drop-start="rowDropStart"
     @row-drop-move="rowDropMove"
+    column-min-width="300px"
   >
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
@@ -23,6 +24,7 @@ import Sortable from 'sortablejs'
 const dropConfig = ref({
   plugin: Sortable,
   row: true,
+  rowHandle: 'index',
   column: false // 取消列拖拽
 })
 const tableData = ref([
diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag.spec.js b/examples/sites/demos/pc/app/grid/drag/row-drag.spec.js
index de913d8b08..496f2053b2 100644
--- a/examples/sites/demos/pc/app/grid/drag/row-drag.spec.js
+++ b/examples/sites/demos/pc/app/grid/drag/row-drag.spec.js
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('行拖拽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-drag#drag-row-drag')
-  const draggerDom = page.getByRole('cell', { name: 'RFV有限责任公司' })
+  const draggerDom = page.locator('.row__drop-handle').first()
   // 获取拖拽元素位置
   const { x, y } = await draggerDom.boundingBox()
   // 开始拖拽
@@ -15,5 +15,5 @@ test('行拖拽', async ({ page }) => {
   await page.waitForTimeout(200)
   await page.mouse.up()
   await page.waitForTimeout(200)
-  await expect(page.locator('.tiny-grid-body__row').nth(5)).toContainText('RFV有限责任公司')
+  await expect(page.locator('.tiny-grid-body__row').nth(5)).toContainText('WSX科技YX公司')
 })
diff --git a/examples/sites/demos/pc/app/grid/drag/row-drag.vue b/examples/sites/demos/pc/app/grid/drag/row-drag.vue
index 3ee8858cf9..615a33b0b9 100644
--- a/examples/sites/demos/pc/app/grid/drag/row-drag.vue
+++ b/examples/sites/demos/pc/app/grid/drag/row-drag.vue
@@ -6,8 +6,9 @@
     @row-drop-end="rowDropEnd"
     @row-drop-start="rowDropStart"
     @row-drop-move="rowDropMove"
+    column-min-width="300px"
   >
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="index" width="60" fixed="left"></tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
@@ -29,6 +30,7 @@ export default {
       dropConfig: {
         plugin: Sortable,
         row: true,
+        rowHandle: 'index',
         column: false // 取消列拖拽
       },
       tableData: [
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot-composition-api.vue
new file mode 100644
index 0000000000..0e0ec56d15
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot-composition-api.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div class="button-box">
+      <tiny-button @click="change">改变列插槽</tiny-button>
+    </div>
+    <tiny-grid :data="tableData">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column v-for="col in cols" :key="col.field" :field="col.field" :title="col.title">
+        <template v-if="col.header" #header>
+          <div>{{ col.header.value }}</div>
+        </template>
+        <template v-if="col.default" #default>
+          <div>{{ col.default.value }}</div>
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+
+let times = 1
+
+const createNewCols = () => [
+  {
+    field: 'name',
+    title: '名称',
+    header: {
+      value: `header-${++times}`
+    }
+  },
+  {
+    field: 'area',
+    title: '所属区域',
+    default: {
+      value: `col-${times}`
+    }
+  }
+]
+
+const cols = ref([
+  {
+    field: 'name',
+    title: '名称',
+    header: {
+      value: `header-${times}`
+    }
+  },
+  {
+    field: 'area',
+    title: '所属区域',
+    default: {
+      value: `col-${times}`
+    }
+  }
+])
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+const change = () => {
+  cols.value = createNewCols()
+}
+</script>
+
+<style scoped>
+.button-box {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.spec.js b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.spec.js
new file mode 100644
index 0000000000..ba6ca1fe48
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.spec.js
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('动态修改列插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-dynamically-columns#dynamic-slot')
+  await expect(page.getByRole('cell', { name: 'header-1' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'col-1' }).first()).toBeVisible()
+  await page.getByRole('button', { name: '改变列插槽' }).click()
+  await expect(page.getByRole('cell', { name: 'header-2' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'col-2' }).first()).toBeVisible()
+  await page.getByRole('button', { name: '改变列插槽' }).click()
+  await expect(page.getByRole('cell', { name: 'header-3' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'col-3' }).first()).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue
new file mode 100644
index 0000000000..961eea2710
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <div class="button-box">
+      <tiny-button @click="change">改变列插槽</tiny-button>
+    </div>
+    <tiny-grid :data="tableData">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column v-for="col in cols" :key="col.field" :field="col.field" :title="col.title">
+        <template v-if="col.header" #header>
+          <div>{{ col.header.value }}</div>
+        </template>
+        <template v-if="col.default" #default>
+          <div>{{ col.default.value }}</div>
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Button } from '@opentiny/vue'
+
+let times = 1
+
+const createNewCols = () => [
+  {
+    field: 'name',
+    title: '名称',
+    header: {
+      value: `header-${++times}`
+    }
+  },
+  {
+    field: 'area',
+    title: '所属区域',
+    default: {
+      value: `col-${times}`
+    }
+  }
+]
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  methods: {
+    change() {
+      this.cols = createNewCols()
+    }
+  },
+  data() {
+    return {
+      cols: [
+        {
+          field: 'name',
+          title: '名称',
+          header: {
+            value: `header-${times}`
+          }
+        },
+        {
+          field: 'area',
+          title: '所属区域',
+          default: {
+            value: `col-${times}`
+          }
+        }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技YX公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.button-box {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue
new file mode 100644
index 0000000000..45972fc934
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <tiny-button @click="change" type="primary" class="mb-16"> 反转列顺序 </tiny-button>
+    <tiny-grid :data="tableData">
+      <tiny-grid-column v-for="col in cols" :key="col.field" v-bind="col"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+
+const cols = ref([
+  {
+    field: 'introduction',
+    title: '公司简介'
+  },
+  {
+    field: 'address',
+    title: '地址'
+  }
+])
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技有限公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+function change() {
+  cols.value.reverse()
+}
+</script>
+
+<style scoped>
+.mb-16 {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.spec.js b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.spec.js
new file mode 100644
index 0000000000..f376438ae9
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.spec.js
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('表格反转测试', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-dynamically-columns#dynamically-columns-reverse-columns')
+
+  const firstHeader = page.locator(
+    '#dynamically-columns-reverse-columns .tiny-grid-header__column .tiny-grid-cell-text'
+  )
+  const firstCell = page.locator('#dynamically-columns-reverse-columns .tiny-grid-body__column .tiny-grid-cell')
+  await expect(firstHeader.first()).toHaveText(/公司简介/)
+  await expect(firstCell.first()).toHaveText(/公司技术和研发实力雄厚/)
+  await page.getByRole('button', { name: '反转列顺序' }).click()
+  await expect(firstHeader.first()).toHaveText(/地址/)
+  await expect(firstCell.first()).toHaveText(/福州/)
+})
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue
new file mode 100644
index 0000000000..e518924dd3
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <tiny-button @click="change" type="primary" class="mb-16"> 反转列顺序 </tiny-button>
+    <tiny-grid :data="tableData">
+      <tiny-grid-column v-for="col in cols" :key="col.field" v-bind="col"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  methods: {
+    change() {
+      this.cols.reverse()
+    }
+  },
+  data() {
+    return {
+      cols: [
+        {
+          field: 'introduction',
+          title: '公司简介'
+        },
+        {
+          field: 'address',
+          title: '地址'
+        }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mb-16 {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
index cfbfad41d2..7f29f72a74 100644
--- a/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
@@ -1,7 +1,15 @@
 <template>
   <div>
     <h4 class="title">开启编辑状态：</h4>
-    <tiny-grid :data="tableData" seq-serial :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+    <div class="btn-box">
+      <tiny-butotn @click="addRow">新增行</tiny-butotn>
+    </div>
+    <tiny-grid
+      :data="tableData"
+      ref="insertGrid"
+      seq-serial
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, insertChanged: true }"
+    >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
@@ -39,7 +47,9 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButotn } from '@opentiny/vue'
+
+const insertGrid = ref('insertGrid')
 
 const options = ref([
   { label: '华北区', value: '华北区' },
@@ -69,9 +79,18 @@ const tableData = ref([
     introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
   }
 ])
+
+const addRow = () => {
+  insertGrid.value.insert({}).then((res) => {
+    insertGrid.value.setActiveRow(res.row)
+  })
+}
 </script>
 
 <style scoped>
+.btn-box {
+  margin-bottom: 10px;
+}
 .title {
   font-size: 16px;
   padding: 15px;
diff --git a/examples/sites/demos/pc/app/grid/edit/status-of-editing.spec.js b/examples/sites/demos/pc/app/grid/edit/status-of-editing.spec.js
index 7e2d6dc6d0..22678f23c1 100644
--- a/examples/sites/demos/pc/app/grid/edit/status-of-editing.spec.js
+++ b/examples/sites/demos/pc/app/grid/edit/status-of-editing.spec.js
@@ -13,4 +13,10 @@ test('开启编辑状态', async ({ page }) => {
   await page.getByRole('heading', { name: '开启编辑状态：' }).click()
   await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(0)).toHaveClass(/col__valid-success/)
   await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(1)).not.toHaveClass(/col__valid-success/)
+
+  // 新增行添加编辑状态
+  await page.getByRole('button', { name: '新增行' }).click()
+  await page.locator('.tiny-grid-default-input').fill('sssss')
+  await page.getByRole('heading', { name: '开启编辑状态：' }).click()
+  await expect(page.getByRole('cell', { name: 'sssss' })).toHaveClass(/col__valid-success/)
 })
diff --git a/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue b/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue
index f83dd04353..c41a6345b8 100644
--- a/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue
+++ b/examples/sites/demos/pc/app/grid/edit/status-of-editing.vue
@@ -1,7 +1,15 @@
 <template>
   <div>
     <h4 class="title">开启编辑状态：</h4>
-    <tiny-grid :data="tableData" seq-serial :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+    <div class="btn-box">
+      <tiny-butotn @click="addRow">新增行</tiny-butotn>
+    </div>
+    <tiny-grid
+      :data="tableData"
+      ref="insertGrid"
+      seq-serial
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, insertChanged: true }"
+    >
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
@@ -38,13 +46,21 @@
 </template>
 
 <script>
-import { Grid, GridColumn } from '@opentiny/vue'
+import { Grid, GridColumn, Button } from '@opentiny/vue'
 
 export default {
   components: {
+    TinyButotn: Button,
     TinyGrid: Grid,
     TinyGridColumn: GridColumn
   },
+  methods: {
+    addRow() {
+      this.$refs.insertGrid.insert({}).then((res) => {
+        this.$refs.insertGrid.setActiveRow(res.row)
+      })
+    }
+  },
   data() {
     return {
       options: [
@@ -81,6 +97,9 @@ export default {
 </script>
 
 <style scoped>
+.btn-box {
+  margin-bottom: 10px;
+}
 .title {
   font-size: 16px;
   padding: 15px;
diff --git a/examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js b/examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js
index 7cfce589a3..4bd20388d0 100644
--- a/examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js
+++ b/examples/sites/demos/pc/app/grid/editor/mutil-render.spec.js
@@ -5,7 +5,7 @@ test('Grid-编辑器-下拉多选', async ({ page }) => {
   await page.goto('grid-editor#editor-mutil-render')
   await page.getByText('华中区;华南区').click()
   await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
-  await page.locator('li').filter({ hasText: '华东区' }).locator('span').nth(2).click()
+  await page.locator('li').filter({ hasText: '华东区' }).click()
   await page.getByRole('cell', { name: '创建时间' }).click()
   await expect(page.locator('.tiny-grid-body__row').first()).toContainText('华中区;华东区;华南区')
 })
diff --git a/examples/sites/demos/pc/app/grid/expand/set-row-expansion.spec.js b/examples/sites/demos/pc/app/grid/expand/set-row-expansion.spec.js
index a78b619741..1a8d932186 100644
--- a/examples/sites/demos/pc/app/grid/expand/set-row-expansion.spec.js
+++ b/examples/sites/demos/pc/app/grid/expand/set-row-expansion.spec.js
@@ -4,9 +4,9 @@ test('设置指定展开行', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-expand#expand-set-row-expansion')
   await page.getByRole('button', { name: '展开指定行' }).click()
-  await expect(page.getByText('GFD科技YX公司')).toHaveCount(3)
+  await expect(page.getByText('GFD科技YX公司')).toHaveCount(2)
   await page.getByRole('button', { name: '展开所有行' }).click()
-  await expect(page.getByText('GFD科技YX公司')).toHaveCount(6)
-  await page.getByRole('button', { name: '手动切换展开行' }).click()
   await expect(page.getByText('GFD科技YX公司')).toHaveCount(5)
+  await page.getByRole('button', { name: '手动切换展开行' }).click()
+  await expect(page.getByText('GFD科技YX公司')).toHaveCount(4)
 })
diff --git a/examples/sites/demos/pc/app/grid/faq/custom-column-composition-api.vue b/examples/sites/demos/pc/app/grid/faq/custom-column-composition-api.vue
new file mode 100644
index 0000000000..297c7f280c
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/faq/custom-column-composition-api.vue
@@ -0,0 +1,48 @@
+<template>
+  <tiny-grid :custom-column-names="['MyGridColumn']" show-overflow="tooltip" :data="tableData">
+    <grid-column-wrapper title="父列1">
+      <grid-column-wrapper title="子列1" field="name"></grid-column-wrapper>
+      <grid-column-wrapper title="子列2">
+        <grid-column-wrapper title="孙列1" field="date"></grid-column-wrapper>
+        <grid-column-wrapper title="孙列2" field="city"></grid-column-wrapper>
+      </grid-column-wrapper>
+    </grid-column-wrapper>
+    <grid-column-wrapper title="父列2">
+      <grid-column-wrapper title="子列3" field="employees"></grid-column-wrapper>
+      <grid-column-wrapper title="子列4" field="introduction">
+        <template #header><span>HEADER</span></template>
+        <template #default="{ row }">
+          <span style="color: red">{{ row.introduction }}</span>
+        </template>
+      </grid-column-wrapper>
+    </grid-column-wrapper>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { h } from '@opentiny/vue-common'
+import { GridColumn, Grid as TinyGrid } from '@opentiny/vue'
+
+const GridColumnWrapper = {
+  name: 'MyGridColumn',
+  props: ['title', 'field'],
+  setup(props, { slots }) {
+    return () => {
+      const config = { props, scopedSlots: { ...slots } }
+
+      return h(GridColumn, config)
+    }
+  }
+}
+
+const tableData = ref([
+  {
+    name: 'GFD科技有限公司',
+    date: '2024-05-23',
+    city: '深圳福田区',
+    employees: '500',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/grid/faq/custom-column.vue b/examples/sites/demos/pc/app/grid/faq/custom-column.vue
new file mode 100644
index 0000000000..6231e78357
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/faq/custom-column.vue
@@ -0,0 +1,57 @@
+<template>
+  <tiny-grid :custom-column-names="['MyGridColumn']" show-overflow="tooltip" :data="tableData">
+    <grid-column-wrapper title="父列1">
+      <grid-column-wrapper title="子列1" field="name"></grid-column-wrapper>
+      <grid-column-wrapper title="子列2">
+        <grid-column-wrapper title="孙列1" field="date"></grid-column-wrapper>
+        <grid-column-wrapper title="孙列2" field="city"></grid-column-wrapper>
+      </grid-column-wrapper>
+    </grid-column-wrapper>
+    <grid-column-wrapper title="父列2">
+      <grid-column-wrapper title="子列3" field="employees"></grid-column-wrapper>
+      <grid-column-wrapper title="子列4" field="introduction">
+        <template #header><span>HEADER</span></template>
+        <template #default="{ row }">
+          <span style="color: red">{{ row.introduction }}</span>
+        </template>
+      </grid-column-wrapper>
+    </grid-column-wrapper>
+  </tiny-grid>
+</template>
+
+<script>
+import { h } from '@opentiny/vue-common'
+import { Grid, GridColumn } from '@opentiny/vue'
+
+const GridColumnWrapper = {
+  name: 'MyGridColumn',
+  props: ['title', 'field'],
+  setup(props, { slots }) {
+    return () => {
+      const config = { props, scopedSlots: { ...slots } }
+
+      return h(GridColumn, config)
+    }
+  }
+}
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    GridColumnWrapper
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          name: 'GFD科技有限公司',
+          date: '2024-05-23',
+          city: '深圳福田区',
+          employees: '500',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter-composition-api.vue
new file mode 100644
index 0000000000..611349dce5
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter-composition-api.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <div class="tiny-demo-flex">
+      <div class="tiny-demo-label">前端过滤示例</div>
+      <tiny-button @click="relaodData">Relaod数据</tiny-button>
+    </div>
+    <tiny-grid ref="gridFilter" :fetch-data="fetchData" :pager="pagerConfig">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :filter="nameFilter"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+    <br />
+    <br />
+    <div class="tiny-demo-flex">
+      <div class="tiny-demo-label">后端过滤示例</div>
+      <tiny-button @click="relaodRemoteData">Relaod数据</tiny-button>
+    </div>
+    <tiny-grid ref="gridRemoteFilter" :fetch-data="fetchData" :pager="pagerConfig" remote-filter>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :filter="nameFilter"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager, Button as TinyButton } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技有限公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGB有限公司',
+    area: '华北区',
+    address: '梅州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技有限公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: 'KANG物业有限公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+
+const gridFilter = ref('gridFilter')
+const gridRemoteFilter = ref('gridRemoteFilter')
+
+const nameFilter = {
+  inputFilter: { relation: 'contains' },
+  enumable: false,
+  defaultFilter: true
+}
+const pagerConfig = {
+  component: Pager,
+  attrs: {
+    currentPage: 1,
+    pageSize: 5,
+    pageSizes: [5, 10]
+  }
+}
+
+const getData = ({ page, filters }) => {
+  console.log('filters', filters)
+  let currentPage = page.currentPage
+  let pageSize = page.pageSize
+  let offset = (currentPage - 1) * pageSize
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      let total = tableData.value.length
+      let result = tableData.value.slice(offset, offset + pageSize)
+
+      resolve({ result, page: { total } })
+    }, 500)
+  })
+}
+
+const relaodData = () => {
+  gridFilter.value.handleFetch('reload')
+}
+
+const relaodRemoteData = () => {
+  gridRemoteFilter.value.handleFetch('reload')
+}
+
+const fetchData = {
+  api: getData,
+  // 重新加载数据配置
+  reloadConfig: {
+    // 在重新加载数据时，保持表格过滤
+    filter: true
+  }
+}
+</script>
+
+<style scoped>
+.tiny-demo-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+.tiny-demo-label {
+  margin-right: 16px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.spec.js b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.spec.js
new file mode 100644
index 0000000000..749a3e7d6b
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.spec.js
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('重载数据时不清除过滤', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-filter#filter-request-service-reload-filter')
+  const filterSvg = page.locator('.tiny-grid-filter-wrapper > .tiny-svg').first()
+  await filterSvg.click()
+  await page.locator('ul').filter({ hasText: '确定重置取消' }).getByRole('textbox').click()
+  await page.locator('ul').filter({ hasText: '确定重置取消' }).getByRole('textbox').press('CapsLock')
+  await page.locator('ul').filter({ hasText: '确定重置取消' }).getByRole('textbox').fill('G')
+  await page.getByRole('button', { name: '确定' }).click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^前端过滤示例Relaod数据$/ })
+    .getByRole('button')
+    .click()
+
+  expect(filterSvg).toHaveClass(/has__Filter/)
+})
diff --git a/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.vue b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.vue
new file mode 100644
index 0000000000..1b44545bf9
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/filter/request-service-reload-filter.vue
@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <div class="tiny-demo-flex">
+      <div class="tiny-demo-label">前端过滤示例</div>
+      <tiny-button @click="relaodData">Relaod数据前端</tiny-button>
+    </div>
+    <tiny-grid ref="gridFilter" :fetch-data="fetchData" :pager="pagerConfig">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :filter="nameFilter"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+    <br />
+    <br />
+    <div class="tiny-demo-flex">
+      <div class="tiny-demo-label">后端过滤示例</div>
+      <tiny-button @click="relaodRemoteData">Relaod数据后端</tiny-button>
+    </div>
+    <tiny-grid ref="gridRemoteFilter" :fetch-data="fetchData" :pager="pagerConfig" remote-filter>
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称" :filter="nameFilter"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Pager, Button } from '@opentiny/vue'
+
+const tableData = [
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技有限公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGB有限公司',
+    area: '华北区',
+    address: '梅州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技有限公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: 'KANG物业有限公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+]
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      nameFilter: {
+        inputFilter: { relation: 'contains' },
+        enumable: false,
+        defaultFilter: true
+      },
+      pagerConfig: {
+        component: Pager,
+        attrs: {
+          currentPage: 1,
+          pageSize: 5,
+          pageSizes: [5, 10]
+        }
+      },
+      fetchData: {
+        api: this.getData,
+        // 重新加载数据配置
+        reloadConfig: {
+          // 在重新加载数据时，保持表格过滤
+          filter: true
+        }
+      }
+    }
+  },
+  methods: {
+    getData({ page, filters }) {
+      console.log('filters', filters)
+      let currentPage = page.currentPage
+      let pageSize = page.pageSize
+      let offset = (currentPage - 1) * pageSize
+
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          let total = tableData.length
+          let result = tableData.slice(offset, offset + pageSize)
+
+          resolve({ result, page: { total } })
+        }, 500)
+      })
+    },
+    relaodData() {
+      this.$refs.gridFilter.handleFetch('reload')
+    },
+    relaodRemoteData() {
+      this.$refs.gridRemoteFilter.handleFetch('reload')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-demo-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+.tiny-demo-label {
+  margin-right: 16px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue b/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
new file mode 100644
index 0000000000..f5d1ca64f7
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <!-- button -->
+    <tiny-button class="mb-12" @click="flag = !flag">{{ (flag ? '删除' : '新增') + '子表头' }}</tiny-button>
+    <!-- grid -->
+    <tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+      <tiny-grid-column title="操作" header-align="center">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40" v-if="flag"></tiny-grid-column>
+        <tiny-grid-column :renderer="rendererCellOperate" width="100" v-if="flag"></tiny-grid-column>
+      </tiny-grid-column>
+      <tiny-grid-column :title="renderHeaderDescription" header-align="center">
+        <tiny-grid-column field="name" title="名称" show-tip sortable></tiny-grid-column>
+        <tiny-grid-column
+          field="area"
+          :title="renderHeaderArea"
+          :editor="{ component: 'select', options }"
+          sortable
+        ></tiny-grid-column>
+      </tiny-grid-column>
+      <tiny-grid-column :title="renderHeaderRelation" header-align="center">
+        <tiny-grid-column
+          field="address"
+          :title="renderHeaderAddress"
+          :editor="{ component: 'input', autoselect: true }"
+          sortable
+        ></tiny-grid-column>
+        <tiny-grid-column
+          field="introduction"
+          title="公司简介"
+          :editor="{ component: 'input', autoselect: true }"
+          sortable
+          show-overflow="title"
+        ></tiny-grid-column>
+      </tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script lang="jsx" setup>
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue'
+import { h } from '@opentiny/vue-common'
+import { ref } from 'vue'
+import {
+  iconAdministrator,
+  iconVersiontree,
+  iconMarkOn,
+  iconUser,
+  iconAssociation,
+  iconHelpful
+} from '@opentiny/vue-icon'
+
+function renderHeaderDescription() {
+  return h('span', [h(iconAdministrator()), 'Description'])
+}
+function renderHeaderRelation() {
+  return h('span', [h(iconVersiontree())])
+}
+function renderHeaderArea() {
+  return h('span', [h(iconMarkOn()), 'Description'])
+}
+function renderHeaderAddress() {
+  return h('span', [h(iconUser()), 'Description'])
+}
+function rendererCellOperate() {
+  return h('div', { style: 'text-align:center;font-size:16px;' }, [h(iconHelpful()), h(iconAssociation())])
+}
+
+const flag = ref(false)
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+const options = ref([
+  { label: '华北区', value: '华北区' },
+  { label: '华东区', value: '华东区' },
+  { label: '华南区', value: '华南区' }
+])
+</script>
+
+<style scoped>
+.mb-12 {
+  margin-bottom: 12px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching.spec.js b/examples/sites/demos/pc/app/grid/header/many-header-switching.spec.js
new file mode 100644
index 0000000000..e3d5c8321e
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching.spec.js
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('控制隐藏表头', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-header#many-header-switching')
+  await expect(page.locator('.tiny-grid-header__column')).toHaveCount(8)
+  await page.getByRole('button', { name: '新增子表头' }).click()
+  await expect(page.locator('.tiny-grid-header__column')).toHaveCount(10)
+  await page.getByRole('button', { name: '删除子表头' }).click()
+  await expect(page.locator('.tiny-grid-header__column')).toHaveCount(8)
+})
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching.vue b/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
new file mode 100644
index 0000000000..aa9d315e61
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <!-- button -->
+    <tiny-button class="mb-12" @click="flag = !flag">{{ (flag ? '删除' : '新增') + '子表头' }}</tiny-button>
+    <!-- grid -->
+    <tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+      <tiny-grid-column title="操作" header-align="center">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40" v-if="flag"></tiny-grid-column>
+        <tiny-grid-column :renderer="rendererCellOperate" width="100" v-if="flag"></tiny-grid-column>
+      </tiny-grid-column>
+      <tiny-grid-column :title="renderHeaderDescription" header-align="center">
+        <tiny-grid-column field="name" title="名称" show-tip sortable></tiny-grid-column>
+        <tiny-grid-column
+          field="area"
+          :title="renderHeaderArea"
+          :editor="{ component: 'select', options }"
+          sortable
+        ></tiny-grid-column>
+      </tiny-grid-column>
+      <tiny-grid-column :title="renderHeaderRelation" header-align="center">
+        <tiny-grid-column
+          field="address"
+          :title="renderHeaderAddress"
+          :editor="{ component: 'input', autoselect: true }"
+          sortable
+        ></tiny-grid-column>
+        <tiny-grid-column
+          field="introduction"
+          title="公司简介"
+          :editor="{ component: 'input', autoselect: true }"
+          sortable
+          show-overflow="title"
+        ></tiny-grid-column>
+      </tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn, Button } from '@opentiny/vue'
+import { h } from '@opentiny/vue-common'
+import {
+  iconAdministrator,
+  iconVersiontree,
+  iconMarkOn,
+  iconUser,
+  iconAssociation,
+  iconHelpful
+} from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      flag: false,
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技YX公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ],
+      options: [
+        { label: '华北区', value: '华北区' },
+        { label: '华东区', value: '华东区' },
+        { label: '华南区', value: '华南区' }
+      ]
+    }
+  },
+  methods: {
+    renderHeaderDescription() {
+      return h('span', [h(iconAdministrator()), 'Description'])
+    },
+    renderHeaderRelation() {
+      return h('span', [h(iconVersiontree())])
+    },
+    renderHeaderArea() {
+      return h('span', [h(iconMarkOn()), 'Description'])
+    },
+    renderHeaderAddress() {
+      return h('span', [h(iconUser()), 'Description'])
+    },
+    rendererCellOperate() {
+      return h('div', { style: 'text-align:center;font-size:16px;' }, [h(iconHelpful()), h(iconAssociation())])
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mb-12 {
+  margin-bottom: 12px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-config.spec.js b/examples/sites/demos/pc/app/grid/operation-column/selection-config.spec.js
index f0b3623a3b..efa8d52e9f 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-config.spec.js
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-config.spec.js
@@ -3,7 +3,18 @@ import { test, expect } from '@playwright/test'
 test('多选配置项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-operation-column#operation-column-selection-config')
-  await expect(page.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
-  await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeDisabled()
-  await expect(page.locator('.tiny-grid-body__row').nth(3).locator('input')).toBeDisabled()
+  const demo = page.locator('#operation-column-selection-config')
+  await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeDisabled()
+  await expect(demo.locator('.tiny-grid-body__row').nth(3).locator('input')).toBeDisabled()
+  await demo.locator('.tiny-grid-header__row').locator('.tiny-grid-checkbox').first().click()
+  await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(2).locator('input')).toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(4).locator('input')).toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(6).locator('input')).toBeChecked()
+  await demo.locator('.tiny-grid-header__row').locator('.tiny-grid-checkbox').first().click()
+  await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).not.toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(2).locator('input')).not.toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(4).locator('input')).not.toBeChecked()
+  await expect(demo.locator('.tiny-grid-body__row').nth(6).locator('input')).not.toBeChecked()
 })
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
index 8ee4389a8c..1118bdb556 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
@@ -1,5 +1,12 @@
 <template>
-  <tiny-grid class="row-group-render" height="200px" setting :row-group="renderOp" :data="data">
+  <tiny-grid
+    class="row-group-render"
+    height="320px"
+    setting
+    :row-group="renderOp"
+    :data="data"
+    @toggle-group-change="onToggleGroupChange"
+  >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
@@ -10,26 +17,26 @@
   </tiny-grid>
 </template>
 
-<script setup lang="jsx">
+<script lang="jsx" setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Modal } from '@opentiny/vue'
 
 const data = ref([
   {
     id: '1',
-    name: 'GFD科技YX公司',
+    name: 'GFD科技有限公司',
     area: '华东区',
     province: '福建省',
     city: '福州',
-    telephone: '1234567890'
+    telephone: '15010000001'
   },
   {
     id: '2',
-    name: 'WWW科技YX公司',
+    name: 'WWW科技有限公司',
     area: '华南区',
     province: '广东省',
     city: '深圳',
-    telephone: '1234567890'
+    telephone: '15010000002'
   },
   {
     id: '3',
@@ -37,47 +44,47 @@ const data = ref([
     area: '华南区',
     province: '广东省',
     city: '中山',
-    telephone: '1234567890'
+    telephone: '15010000003'
   },
   {
     id: '4',
-    name: 'TGB科技YX公司',
+    name: 'TGB科技有限公司',
     area: '华东区',
     province: '福建省',
     city: '龙岩',
-    telephone: '1234567890'
+    telephone: '15010000004'
   },
   {
     id: '5',
-    name: 'YHN科技YX公司',
+    name: 'YHN科技有限公司',
     area: '华南区',
     province: '广东省',
     city: '韶关',
-    telephone: '1234567890'
+    telephone: '15010000005'
   },
   {
     id: '6',
-    name: 'WSX科技YX公司',
+    name: 'WSX科技有限公司',
     area: '华中区',
     province: '湖北省',
     city: '黄冈',
-    telephone: '1234567890'
+    telephone: '15010000006'
   },
   {
     id: '7',
-    name: 'KBG物业YX公司',
+    name: 'KBG物业有限公司',
     area: '华中区',
     province: '湖北省',
     city: '赤壁',
-    telephone: '1234567890'
+    telephone: '15010000007'
   },
   {
     id: '8',
-    name: '深圳市福德宝网络技术YX公司',
+    name: '深圳市福德宝网络技术有限公司',
     address: '厦门岛内',
     area: '华东区',
     city: '厦门',
-    telephone: '1234567890'
+    telephone: '15010000008'
   },
   {
     id: '9',
@@ -85,7 +92,7 @@ const data = ref([
     area: '华南区',
     province: '广西省',
     city: '南宁',
-    telephone: '1234567890'
+    telephone: '15010000009'
   },
   {
     id: '10',
@@ -93,30 +100,25 @@ const data = ref([
     area: '华南区',
     province: '广西省',
     city: '北海',
-    telephone: '1234567890'
+    telephone: '15510000001'
   },
   {
     id: '11',
-    name: 'TIG管理YX公司',
+    name: 'TIG管理有限公司',
     area: '华南区',
     province: '广西省',
     city: '桂林',
-    telephone: '1234567890'
+    telephone: '15510000002'
   },
   {
     id: '12',
-    name: 'GGT科技YX公司',
+    name: 'GGT科技有限公司',
     area: '西南区',
     province: '云南省',
     city: '昆明',
-    telephone: '1234567890'
+    telephone: '15510000003'
   }
 ])
-const renderOp = ref({
-  field: 'area',
-  render: renderGroup,
-  closeable: true
-})
 
 function renderGroup(h, { value, header, children }) {
   return (
@@ -126,6 +128,30 @@ function renderGroup(h, { value, header, children }) {
     </span>
   )
 }
+function activeMethod({ value }) {
+  return value === '华南区' // 华南区分组默认展开
+  // return false // 所有分组默认收起
+}
+function onToggleGroupChange({ row }) {
+  Modal.message({ message: `分组${row.fold ? '合起' : '展开'}`, status: 'info' })
+}
+function renderGroupCell(h, { row, column }) {
+  if (row.value !== '华南区') return
+
+  if (column.property === 'province') {
+    return h('b', '自定义渲染省份')
+  } else if (column.property === 'city') {
+    return h('i', '自定义渲染城市')
+  }
+}
+
+const renderOp = ref({
+  field: 'area',
+  render: renderGroup,
+  closeable: true,
+  activeMethod,
+  renderGroupCell
+})
 </script>
 
 <style>
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.spec.js b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.spec.js
index 99dbefd73d..568c3bd31d 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.spec.js
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.spec.js
@@ -4,4 +4,10 @@ test('自定义分组', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-row-grouping#row-grouping-row-group-render')
   await expect(page.getByText('当前分组行数为1').first()).toBeVisible()
+  await expect(page.getByText('自定义渲染省份').first()).toBeVisible()
+  await expect(page.getByText('自定义渲染城市').first()).toBeVisible()
+  await page.getByText('当前分组行数为1').first().click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '分组展开' })).toBeVisible()
+  await page.getByText('当前分组行数为1').first().click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '分组合起' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.vue
index 74bf706680..7730d4554a 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render.vue
@@ -1,5 +1,12 @@
 <template>
-  <tiny-grid class="row-group-render" height="200px" setting :row-group="renderOp" :data="data">
+  <tiny-grid
+    class="row-group-render"
+    height="320px"
+    setting
+    :row-group="renderOp"
+    :data="data"
+    @toggle-group-change="onToggleGroupChange"
+  >
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
@@ -11,7 +18,7 @@
 </template>
 
 <script lang="jsx">
-import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { Grid, GridColumn, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -20,23 +27,22 @@ export default {
   },
   data() {
     return {
-      Pager,
       data: [
         {
           id: '1',
-          name: 'GFD科技YX公司',
+          name: 'GFD科技有限公司',
           area: '华东区',
           province: '福建省',
           city: '福州',
-          telephone: '1234567890'
+          telephone: '15010000001'
         },
         {
           id: '2',
-          name: 'WWW科技YX公司',
+          name: 'WWW科技有限公司',
           area: '华南区',
           province: '广东省',
           city: '深圳',
-          telephone: '1234567890'
+          telephone: '15010000002'
         },
         {
           id: '3',
@@ -44,47 +50,47 @@ export default {
           area: '华南区',
           province: '广东省',
           city: '中山',
-          telephone: '1234567890'
+          telephone: '15010000003'
         },
         {
           id: '4',
-          name: 'TGB科技YX公司',
+          name: 'TGB科技有限公司',
           area: '华东区',
           province: '福建省',
           city: '龙岩',
-          telephone: '1234567890'
+          telephone: '15010000004'
         },
         {
           id: '5',
-          name: 'YHN科技YX公司',
+          name: 'YHN科技有限公司',
           area: '华南区',
           province: '广东省',
           city: '韶关',
-          telephone: '1234567890'
+          telephone: '15010000005'
         },
         {
           id: '6',
-          name: 'WSX科技YX公司',
+          name: 'WSX科技有限公司',
           area: '华中区',
           province: '湖北省',
           city: '黄冈',
-          telephone: '1234567890'
+          telephone: '15010000006'
         },
         {
           id: '7',
-          name: 'KBG物业YX公司',
+          name: 'KBG物业有限公司',
           area: '华中区',
           province: '湖北省',
           city: '赤壁',
-          telephone: '1234567890'
+          telephone: '15010000007'
         },
         {
           id: '8',
-          name: '深圳市福德宝网络技术YX公司',
+          name: '深圳市福德宝网络技术有限公司',
           address: '厦门岛内',
           area: '华东区',
           city: '厦门',
-          telephone: '1234567890'
+          telephone: '15010000008'
         },
         {
           id: '9',
@@ -92,7 +98,7 @@ export default {
           area: '华南区',
           province: '广西省',
           city: '南宁',
-          telephone: '1234567890'
+          telephone: '15010000009'
         },
         {
           id: '10',
@@ -100,29 +106,31 @@ export default {
           area: '华南区',
           province: '广西省',
           city: '北海',
-          telephone: '1234567890'
+          telephone: '15510000001'
         },
         {
           id: '11',
-          name: 'TIG管理YX公司',
+          name: 'TIG管理有限公司',
           area: '华南区',
           province: '广西省',
           city: '桂林',
-          telephone: '1234567890'
+          telephone: '15510000002'
         },
         {
           id: '12',
-          name: 'GGT科技YX公司',
+          name: 'GGT科技有限公司',
           area: '西南区',
           province: '云南省',
           city: '昆明',
-          telephone: '1234567890'
+          telephone: '15510000003'
         }
       ],
       renderOp: {
         field: 'area',
         render: this.renderGroup,
-        closeable: true
+        closeable: true,
+        activeMethod: this.activeMethod,
+        renderGroupCell: this.renderGroupCell
       }
     }
   },
@@ -134,6 +142,22 @@ export default {
           <a>{'当前分组行数为' + children.length}</a>
         </span>
       )
+    },
+    activeMethod({ value }) {
+      return value === '华南区' // 华南区分组默认展开
+      // return false // 所有分组默认收起
+    },
+    onToggleGroupChange({ row }) {
+      Modal.message({ message: `分组${row.fold ? '合起' : '展开'}`, status: 'info' })
+    },
+    renderGroupCell(h, { row, column }) {
+      if (row.value !== '华南区') return
+
+      if (column.property === 'province') {
+        return h('b', '自定义渲染省份')
+      } else if (column.property === 'city') {
+        return h('i', '自定义渲染城市')
+      }
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll-composition-api.vue
new file mode 100644
index 0000000000..ff519b2ebd
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll-composition-api.vue
@@ -0,0 +1,110 @@
+<template>
+  <tiny-grid
+    height="320px"
+    class="grid-grouping"
+    column-min-width="180px"
+    :row-group="rowGroup"
+    :optimization="optimization"
+    :data="data"
+  >
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市" :filter="cityFilter" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域" :filter="cityFilter" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市1" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域1" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份1" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称1" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话1" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市2" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域2" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份2" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称2" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话2" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市3" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域3" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话3" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市4" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域4" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话4" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市5" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域5" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话5" sortable></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+
+const codePointA = 'A'.codePointAt(0)
+const areas = ['华东区', '华南区', '华中区', '西南区']
+const provinces = ['福建省', '广东省', '湖北省', '广西省', '云南省']
+const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '南宁', '北海', '桂林', '昆明']
+const getChar = () => String.fromCodePoint(codePointA + Math.floor(Math.random() * 26))
+const getName = () => `${getChar()}${getChar()}${getChar()}科技有限公司`
+const getArea = () => areas[Math.floor(Math.random() * 4)]
+const getProvince = () => provinces[Math.floor(Math.random() * 5)]
+const getCity = () => citys[Math.floor(Math.random() * 12)]
+const getTelephone = (i) => '188' + String(i).padStart(8, '0')
+const row = { id: '', name: '', area: '', province: '', city: '', telephone: '' }
+const total = 10000
+const rows = Array(total)
+  .fill(0)
+  .map((item, i) => {
+    const r = JSON.parse(JSON.stringify(row))
+    r.id = i + 1
+    r.name = getName()
+    r.area = getArea()
+    r.province = getProvince()
+    r.city = getCity()
+    r.telephone = getTelephone(i)
+    return r
+  })
+
+const rowGroup = ref({ field: 'area' })
+const optimization = ref({
+  scrollX: { gt: 15, rSize: 14, vSize: 10 },
+  scrollY: { gt: 15, rSize: 20 }
+})
+const data = ref(rows)
+const cityFilter = ref({
+  multi: true,
+  enumable: true,
+  defaultFilter: false,
+  inputFilter: false
+})
+</script>
+
+<style>
+.grid-grouping .tiny-badge {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #f5222d;
+  border-radius: 50%;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.spec.js b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.spec.js
new file mode 100644
index 0000000000..bbaae42582
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.spec.js
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('分组表格虚拟滚动', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-row-grouping#row-group-scroll')
+  const row = page.locator('.tiny-grid-body__row')
+  await expect(row.nth(1).locator('.tiny-grid-cell').first()).toContainText('1')
+  await row.first().click()
+  await page.mouse.wheel(0, 500)
+  await page.waitForTimeout(500)
+  await page.mouse.wheel(0, -500)
+  await expect(row.nth(1).locator('.tiny-grid-body__column').first()).toContainText('')
+})
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.vue
new file mode 100644
index 0000000000..49e58f4da3
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-scroll.vue
@@ -0,0 +1,119 @@
+<template>
+  <tiny-grid
+    height="320px"
+    class="grid-grouping"
+    column-min-width="180px"
+    :row-group="rowGroup"
+    :optimization="optimization"
+    :data="data"
+  >
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市" :filter="cityFilter" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域" :filter="cityFilter" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市1" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域1" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份1" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称1" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话1" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市2" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域2" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份2" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称2" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话2" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市3" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域3" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话3" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市4" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域4" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话4" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市5" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域5" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话5" sortable></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+const codePointA = 'A'.codePointAt(0)
+const areas = ['华东区', '华南区', '华中区', '西南区']
+const provinces = ['福建省', '广东省', '湖北省', '广西省', '云南省']
+const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '南宁', '北海', '桂林', '昆明']
+const getChar = () => String.fromCodePoint(codePointA + Math.floor(Math.random() * 26))
+const getName = () => `${getChar()}${getChar()}${getChar()}科技有限公司`
+const getArea = () => areas[Math.floor(Math.random() * 4)]
+const getProvince = () => provinces[Math.floor(Math.random() * 5)]
+const getCity = () => citys[Math.floor(Math.random() * 12)]
+const getTelephone = (i) => '188' + String(i).padStart(8, '0')
+const row = { id: '', name: '', area: '', province: '', city: '', telephone: '' }
+const total = 10000
+const rows = Array(total)
+  .fill(0)
+  .map((item, i) => {
+    const r = JSON.parse(JSON.stringify(row))
+    r.id = i + 1
+    r.name = getName()
+    r.area = getArea()
+    r.province = getProvince()
+    r.city = getCity()
+    r.telephone = getTelephone(i)
+    return r
+  })
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      rowGroup: { field: 'area' },
+      optimization: {
+        scrollX: { gt: 15, rSize: 14, vSize: 10 },
+        scrollY: { gt: 15, rSize: 20 }
+      },
+      data: rows,
+      cityFilter: {
+        multi: true,
+        enumable: true,
+        defaultFilter: false,
+        inputFilter: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.grid-grouping .tiny-badge {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #f5222d;
+  border-radius: 50%;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan-composition-api.vue
new file mode 100644
index 0000000000..26dd72e594
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan-composition-api.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="grid-grouping">
+    <tiny-grid height="320px" setting :row-group="rowGroup" :data="data">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
+      <!-- <tiny-grid-column field="province" title="省份" sortable></tiny-grid-column> -->
+      <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="telephone" title="联系电话" sortable></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+
+const data = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    area: '华东区',
+    province: '福建省',
+    city: '福州',
+    telephone: '15010000001'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    area: '华南区',
+    province: '广东省',
+    city: '深圳',
+    telephone: '15010000002'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    province: '广东省',
+    city: '中山',
+    telephone: '15010000003'
+  },
+  {
+    id: '4',
+    name: 'TGB科技有限公司',
+    area: '华东区',
+    province: '福建省',
+    city: '龙岩',
+    telephone: '15010000004'
+  },
+  {
+    id: '5',
+    name: 'YHN科技有限公司',
+    area: '华南区',
+    province: '广东省',
+    city: '韶关',
+    telephone: '15010000005'
+  },
+  {
+    id: '6',
+    name: 'WSX科技有限公司',
+    area: '华中区',
+    province: '湖北省',
+    city: '黄冈',
+    telephone: '15010000006'
+  },
+  {
+    id: '7',
+    name: 'KBG物业有限公司',
+    area: '华中区',
+    province: '湖北省',
+    city: '赤壁',
+    telephone: '15010000007'
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术有限公司',
+    address: '厦门岛内',
+    area: '华东区',
+    city: '厦门',
+    telephone: '15010000008'
+  },
+  {
+    id: '9',
+    name: 'UJM有限责任公司',
+    area: '华南区',
+    province: '广西省',
+    city: '南宁',
+    telephone: '15010000009'
+  },
+  {
+    id: '10',
+    name: 'IKA有限责任公司',
+    area: '华南区',
+    province: '广西省',
+    city: '北海',
+    telephone: '15510000001'
+  },
+  {
+    id: '11',
+    name: 'TIG管理有限公司',
+    area: '华南区',
+    province: '广西省',
+    city: '桂林',
+    telephone: '15510000002'
+  },
+  {
+    id: '12',
+    name: 'GGT科技有限公司',
+    area: '西南区',
+    province: '云南省',
+    city: '昆明',
+    telephone: '15510000003'
+  }
+])
+
+const rowGroup = ref({ field: 'province', colspan: 2 })
+</script>
+
+<style>
+.grid-grouping .tiny-badge {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #f5222d;
+  border-radius: 50%;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.spec.js b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.spec.js
new file mode 100644
index 0000000000..5e99a20d38
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.spec.js
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('分组表格虚拟滚动', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-row-grouping#row-grouping-colspan')
+  const row = page.locator('.tiny-grid-body__row')
+  await expect(row.nth(0).locator('.tiny-grid-body__column').nth(2)).toHaveAttribute('colspan', '2')
+})
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue
new file mode 100644
index 0000000000..bda7d4d454
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="grid-grouping">
+    <tiny-grid height="320px" setting :row-group="rowGroup" :data="data">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
+      <!-- <tiny-grid-column field="province" title="省份" sortable></tiny-grid-column> -->
+      <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="telephone" title="联系电话" sortable></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Pager } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      Pager,
+      data: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          province: '福建省',
+          city: '福州',
+          telephone: '15010000001'
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          area: '华南区',
+          province: '广东省',
+          city: '深圳',
+          telephone: '15010000002'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          province: '广东省',
+          city: '中山',
+          telephone: '15010000003'
+        },
+        {
+          id: '4',
+          name: 'TGB科技有限公司',
+          area: '华东区',
+          province: '福建省',
+          city: '龙岩',
+          telephone: '15010000004'
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          province: '广东省',
+          city: '韶关',
+          telephone: '15010000005'
+        },
+        {
+          id: '6',
+          name: 'WSX科技有限公司',
+          area: '华中区',
+          province: '湖北省',
+          city: '黄冈',
+          telephone: '15010000006'
+        },
+        {
+          id: '7',
+          name: 'KBG物业有限公司',
+          area: '华中区',
+          province: '湖北省',
+          city: '赤壁',
+          telephone: '15010000007'
+        },
+        {
+          id: '8',
+          name: '深圳市福德宝网络技术有限公司',
+          address: '厦门岛内',
+          area: '华东区',
+          city: '厦门',
+          telephone: '15010000008'
+        },
+        {
+          id: '9',
+          name: 'UJM有限责任公司',
+          area: '华南区',
+          province: '广西省',
+          city: '南宁',
+          telephone: '15010000009'
+        },
+        {
+          id: '10',
+          name: 'IKA有限责任公司',
+          area: '华南区',
+          province: '广西省',
+          city: '北海',
+          telephone: '15510000001'
+        },
+        {
+          id: '11',
+          name: 'TIG管理有限公司',
+          area: '华南区',
+          province: '广西省',
+          city: '桂林',
+          telephone: '15510000002'
+        },
+        {
+          id: '12',
+          name: 'GGT科技有限公司',
+          area: '西南区',
+          province: '云南省',
+          city: '昆明',
+          telephone: '15510000003'
+        }
+      ],
+      rowGroup: { field: 'province', colspan: 2 }
+    }
+  }
+}
+</script>
+
+<style>
+.grid-grouping .tiny-badge {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #f5222d;
+  border-radius: 50%;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
index 9ccfc5aeff..08a8cf0562 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="grid-grouping">
-    <tiny-grid height="800px" setting :row-group="renderOp" :data="data">
+    <tiny-grid height="320px" setting :row-group="renderOp" :data="data">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 
 const data = ref([
   {
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
index e286abb44c..4c66c140c4 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="grid-grouping">
-    <tiny-grid height="800px" setting :row-group="renderOp" :data="data">
+    <tiny-grid height="320px" setting :row-group="renderOp" :data="data">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue
index ef8a2c3cde..70fea301a8 100644
--- a/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue
@@ -7,6 +7,14 @@
           <tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
         </template>
       </tiny-grid-column>
+      <tiny-grid-column field="date" title="下班时间" :editor="{}">
+        <template #edit="data">
+          <tiny-time-picker v-model="data.row.date" @change="change"></tiny-time-picker>
+        </template>
+        <template #default="data">
+          {{ data.row.date.toTimeString().substr(0, 8) }}
+        </template>
+      </tiny-grid-column>
       <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
       <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -17,7 +25,17 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input as TinyInput } from '@opentiny/vue'
+import {
+  Grid as TinyGrid,
+  GridColumn as TinyGridColumn,
+  Input as TinyInput,
+  TimePicker as TinyTimePicker,
+  Modal
+} from '@opentiny/vue'
+
+function change() {
+  Modal.message({ message: '下班时间编辑完成', status: 'info' })
+}
 
 const tableData = ref([
   {
@@ -26,7 +44,7 @@ const tableData = ref([
     area: '华东区',
     address: '福州',
     employees: 423,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '2',
@@ -34,7 +52,7 @@ const tableData = ref([
     area: '华南区',
     address: '深圳福田区',
     employees: 363,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '3',
@@ -42,7 +60,7 @@ const tableData = ref([
     area: '华南区',
     address: '中山市',
     employees: 131,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '4',
@@ -50,7 +68,7 @@ const tableData = ref([
     area: '华北区',
     address: '梅州',
     employees: 215,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '5',
@@ -58,7 +76,7 @@ const tableData = ref([
     area: '华南区',
     address: '韶关',
     employees: 322,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '6',
@@ -66,7 +84,7 @@ const tableData = ref([
     area: '华北区',
     address: '广州天河区',
     employees: 168,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   }
 ])
 </script>
diff --git a/examples/sites/demos/pc/app/grid/slot/editor-slot.spec.js b/examples/sites/demos/pc/app/grid/slot/editor-slot.spec.js
index 917d08a031..8bcff4020b 100644
--- a/examples/sites/demos/pc/app/grid/slot/editor-slot.spec.js
+++ b/examples/sites/demos/pc/app/grid/slot/editor-slot.spec.js
@@ -12,4 +12,22 @@ test('编辑器插槽', async ({ page }) => {
     .first()
     .click()
   await expect(page.getByRole('cell', { name: 'WWWWsdfd科技YX公司' })).toBeVisible()
+
+  await page.getByText('17:00:00').first().click()
+  await page.waitForTimeout(1000)
+  await page.locator('.tiny-date-editor .tiny-input__icon-container svg').nth(1).click()
+  await page
+    .locator('.tiny-time-spinner__list')
+    .first()
+    .locator('.tiny-time-spinner__item')
+    .filter({ hasText: /^19$/ })
+    .first()
+    .click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^编辑器插槽$/ })
+    .first()
+    .click()
+  await expect(page.getByRole('cell', { name: '19:00:00' })).toBeVisible()
+  await expect(page.locator('.tiny-modal').filter({ hasText: /下班时间编辑完成/ })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/slot/editor-slot.vue b/examples/sites/demos/pc/app/grid/slot/editor-slot.vue
index 27a6be8513..0ab092f272 100644
--- a/examples/sites/demos/pc/app/grid/slot/editor-slot.vue
+++ b/examples/sites/demos/pc/app/grid/slot/editor-slot.vue
@@ -7,6 +7,14 @@
           <tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
         </template>
       </tiny-grid-column>
+      <tiny-grid-column field="date" title="下班时间" :editor="{}">
+        <template #edit="data">
+          <tiny-time-picker v-model="data.row.date" @change="change"></tiny-time-picker>
+        </template>
+        <template #default="data">
+          {{ data.row.date.toTimeString().substr(0, 8) }}
+        </template>
+      </tiny-grid-column>
       <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
       <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -16,13 +24,14 @@
 </template>
 
 <script>
-import { Grid, GridColumn, Input } from '@opentiny/vue'
+import { Grid, GridColumn, Input, TimePicker, Modal } from '@opentiny/vue'
 
 export default {
   components: {
     TinyGrid: Grid,
     TinyGridColumn: GridColumn,
-    TinyInput: Input
+    TinyInput: Input,
+    TinyTimePicker: TimePicker
   },
   data() {
     return {
@@ -33,7 +42,7 @@ export default {
           area: '华东区',
           address: '福州',
           employees: 423,
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+          date: new Date(2016, 9, 10, 17, 0)
         },
         {
           id: '2',
@@ -41,7 +50,7 @@ export default {
           area: '华南区',
           address: '深圳福田区',
           employees: 363,
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+          date: new Date(2016, 9, 10, 17, 0)
         },
         {
           id: '3',
@@ -49,7 +58,7 @@ export default {
           area: '华南区',
           address: '中山市',
           employees: 131,
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+          date: new Date(2016, 9, 10, 17, 0)
         },
         {
           id: '4',
@@ -57,7 +66,7 @@ export default {
           area: '华北区',
           address: '梅州',
           employees: 215,
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+          date: new Date(2016, 9, 10, 17, 0)
         },
         {
           id: '5',
@@ -65,7 +74,7 @@ export default {
           area: '华南区',
           address: '韶关',
           employees: 322,
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+          date: new Date(2016, 9, 10, 17, 0)
         },
         {
           id: '6',
@@ -73,10 +82,15 @@ export default {
           area: '华北区',
           address: '广州天河区',
           employees: 168,
-          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+          date: new Date(2016, 9, 10, 17, 0)
         }
       ]
     }
+  },
+  methods: {
+    change() {
+      Modal.message({ message: '下班时间编辑完成', status: 'info' })
+    }
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/grid/toolbar/copy-row-data.spec.js b/examples/sites/demos/pc/app/grid/toolbar/copy-row-data.spec.js
index 1487d76c9c..442205c61e 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/copy-row-data.spec.js
+++ b/examples/sites/demos/pc/app/grid/toolbar/copy-row-data.spec.js
@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('设置工具栏尺寸大小', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-toolbar#toolbar-copy-row-data')
-  await expect(page.getByRole('button', { name: '复制' })).toHaveClass(/size__medium/)
+  await expect(page.getByRole('button', { name: '复制' })).toHaveClass(/tiny-button--medium/)
 })
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
new file mode 100644
index 0000000000..ec8c720928
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
@@ -0,0 +1,76 @@
+<template>
+  <tiny-grid ref="basicGrid" v-bind="op"></tiny-grid>
+</template>
+
+<script setup>
+import { Grid as TinyGrid, Pager, GridToolbar, Button } from '@opentiny/vue'
+import { iconLanguage } from '@opentiny/vue-icon'
+
+const introduction = '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+
+const datas = [
+  { id: '1', name: 'GFD科技有限公司', area: '华东区', address: '福州', introduction },
+  { id: '2', name: 'WWWW科技有限公司', area: '华南区', address: '深圳福田区', introduction },
+  { id: '3', name: 'RFV有限责任公司', area: '华南区', address: '中山市', introduction },
+  { id: '4', name: 'TGB有限公司', area: '华北区', address: '梅州', introduction },
+  { id: '5', name: 'YHN科技有限公司', area: '华南区', address: '韶关', introduction },
+  { id: '6', name: '康康物业有限公司', area: '华北区', address: '广州天河区', introduction },
+  { id: '7', name: '深圳市福德宝有限公司', area: '华南区', address: '清远', introduction }
+]
+
+const getData = ({ page }) => {
+  const curPage = page.currentPage
+  const pageSize = page.pageSize
+  const offset = (curPage - 1) * pageSize
+
+  return new Promise((resolve) => {
+    resolve({
+      result: datas.slice(offset, offset + pageSize),
+      page: { total: datas.length }
+    })
+  })
+}
+
+const op = {
+  seqSerial: true,
+  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
+  fetchData: {
+    api: getData
+  },
+  toolbar: {
+    component: GridToolbar,
+    // 支持配置式使用buttons和tools插槽
+    slots: {
+      buttons(params, h) {
+        return h('div', { class: 'buttons-wrapper' }, [h(Button, '配置式插槽')])
+      },
+      tools(params, h) {
+        return h('div', { class: 'tools-pos' }, [[h(iconLanguage())]])
+      }
+    }
+  },
+  pager: {
+    component: Pager,
+    attrs: {
+      currentPage: 1,
+      pageSize: 3,
+      pageSizes: [3, 5, 10],
+      total: 0,
+      layout: 'total, prev, pager, next, jumper, sizes'
+    }
+  },
+  columns: [
+    { type: 'selection', width: '50' },
+    { type: 'index', width: '60' },
+    { field: 'name', title: '名称', showOverflow: true, editor: { component: 'input', autoselect: true } },
+    { field: 'area', title: '区域', editor: { component: 'input' } },
+    { field: 'address', title: '地址', editor: { component: 'input' } },
+    {
+      field: 'introduction',
+      title: '公司简介',
+      showOverflow: true,
+      editor: { component: 'input', autoselect: true }
+    }
+  ]
+}
+</script>
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.spec.js b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.spec.js
new file mode 100644
index 0000000000..cbd252f094
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.spec.js
@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('配置式工具栏插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-toolbar#toolbar-toolbar-op-config-slots')
+  await expect(page.getByRole('button', { name: '配置式插槽' })).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
new file mode 100644
index 0000000000..3341b2c030
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
@@ -0,0 +1,85 @@
+<template>
+  <tiny-grid ref="basicGrid" v-bind="op"></tiny-grid>
+</template>
+
+<script>
+import { Grid, Pager, GridToolbar, Button } from '@opentiny/vue'
+import { iconLanguage } from '@opentiny/vue-icon'
+
+const introduction = '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+const datas = [
+  { id: '1', name: 'GFD科技有限公司', area: '华东区', address: '福州', introduction },
+  { id: '2', name: 'WWWW科技有限公司', area: '华南区', address: '深圳福田区', introduction },
+  { id: '3', name: 'RFV有限责任公司', area: '华南区', address: '中山市', introduction },
+  { id: '4', name: 'TGB有限公司', area: '华北区', address: '梅州', introduction },
+  { id: '5', name: 'YHN科技有限公司', area: '华南区', address: '韶关', introduction },
+  { id: '6', name: '康康物业有限公司', area: '华北区', address: '广州天河区', introduction },
+  { id: '7', name: '深圳市福德宝有限公司', area: '华南区', address: '清远', introduction }
+]
+
+export default {
+  components: {
+    TinyGrid: Grid
+  },
+  data() {
+    return {
+      op: {
+        seqSerial: true,
+        editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
+        fetchData: {
+          api: this.getData
+        },
+        toolbar: {
+          component: GridToolbar,
+          // 支持配置式使用buttons和tools插槽
+          slots: {
+            buttons(params, h) {
+              return h('div', { class: 'buttons-wrapper' }, [h(Button, '配置式插槽')])
+            },
+            tools(params, h) {
+              return h('div', { class: 'tools-pos' }, [[h(iconLanguage())]])
+            }
+          }
+        },
+        pager: {
+          component: Pager,
+          attrs: {
+            currentPage: 1,
+            pageSize: 3,
+            pageSizes: [3, 5, 10],
+            total: 0,
+            layout: 'total, prev, pager, next, jumper, sizes'
+          }
+        },
+        columns: [
+          { type: 'selection', width: '50' },
+          { type: 'index', width: '60' },
+          { field: 'name', title: '名称', showOverflow: true, editor: { component: 'input', autoselect: true } },
+          { field: 'area', title: '区域', editor: { component: 'input' } },
+          { field: 'address', title: '地址', editor: { component: 'input' } },
+          {
+            field: 'introduction',
+            title: '公司简介',
+            showOverflow: true,
+            editor: { component: 'input', autoselect: true }
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    getData({ page }) {
+      const curPage = page.currentPage
+      const pageSize = page.pageSize
+      const offset = (curPage - 1) * pageSize
+
+      return new Promise((resolve) => {
+        resolve({
+          result: datas.slice(offset, offset + pageSize),
+          page: { total: datas.length }
+        })
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.spec.js b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.spec.js
index 050b9a476c..337af9e626 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.spec.js
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.spec.js
@@ -14,7 +14,7 @@ test('展开行序号列配置', async ({ page }) => {
     .first()
     .click()
   await page.getByRole('row', { name: '3 TGBYX公司 华南区 360' }).locator('.tiny-grid-tree__node-btn').first().click()
-  await page.getByText('3.1').click()
+  await page.getByText('3.1').first().click()
   await page
     .getByRole('row', { name: '4 康康物业YX公司 华南区 400' })
     .locator('.tiny-grid-tree__node-btn')
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-drag.js b/examples/sites/demos/pc/app/grid/webdoc/grid-drag.js
index 97cde4e211..acc28f6976 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-drag.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-drag.js
@@ -6,10 +6,9 @@ export default {
       'demoId': 'drag-row-drag',
       'name': { 'zh-CN': '行拖拽', 'en-US': 'Drag Row' },
       'desc': {
-        'zh-CN':
-          '<p>通过设置 <code>drop-config</code> 的 <code>row</code> 属性控制行拖拽，默认为开启行拖拽，行拖拽事件有 <code>@row-drop-start</code>、<code>row-drop-move</code>、<code>row-drop-end</code>。</p>\n',
+        'zh-CN': `<p>通过设置 <code>drop-config</code> 的 <code>row</code> 属性控制行拖拽，默认为开启行拖拽，行拖拽事件有 <code>@row-drop-start</code>、<code>row-drop-move</code>、<code>row-drop-end</code>。可以通过设置 <code>dropConfig.rowHandle</code> 为 <code>'index'</code> 开启序号列作为拖拽区域，不影响行字段的复制。</p>`,
         'en-US':
-          '<p>You can set the <code>row</code> attribute of <code>drop-config</code> to control row dragging. By default, row dragging is enabled. Row drag events include <code>@row-drop-start</code>, <code>row-drop-move</code>, and <code>row-drop-end</code>. </p>\n'
+          '<p>You can set the <code>row</code> attribute of <code>drop-config</code> to control row dragging. By default, row dragging is enabled. Row drag events include <code>@row-drop-start</code>, <code>row-drop-move</code>, and <code>row-drop-end</code>. </p>'
       },
       'codeFiles': ['drag/row-drag.vue']
     },
@@ -34,6 +33,16 @@ export default {
           '<p>You can set the <code>column</code> attribute of <code>drop-config</code> to control column dragging. Column dragging is enabled by default. Column drag events include <code>@column-drop-start</code>, <code>column-drop-move</code>, and <code>column-drop-end</code>. </p>\n'
       },
       'codeFiles': ['drag/column-drag.vue']
+    },
+    {
+      'demoId': 'multi-header-drag',
+      'name': { 'zh-CN': '多级表头拖拽', 'en-US': 'Multiple header drag' },
+      'desc': {
+        'zh-CN': `<p>设置表格属性 <code>columnKey</code> 和 <code>dropConfig</code>。在设置 <code>dropConfig.scheme</code> 为 v2 且设置 <code>dropConfig.column</code> 为 <code>true</code> 时，开启多表头列拖拽。
+          其它属性 <code>dropConfig.columnGroup</code>，<code>dropConfig.columnBeforeDrop</code> 和 <code>dropConfig.columnDropClass</code>，参考示例配置：</p>\n`,
+        'en-US': ''
+      },
+      'codeFiles': ['drag/multi-header-drag.vue']
     }
   ],
   apis: [{ 'name': 'grid-drag', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-dynamically-columns.js b/examples/sites/demos/pc/app/grid/webdoc/grid-dynamically-columns.js
index bb8b3f4fa1..b566beda9e 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-dynamically-columns.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-dynamically-columns.js
@@ -30,6 +30,24 @@ export default {
           "<p>You need to configure <code>:columns=&quot;tableColumn&quot;</code> <code>:show-header=&quot;false&quot;</code> on the <code>grid</code> tag. Click the 'Reverse Table' button to view the effect. Currently, the operation can only be performed once. If the operation is performed multiple times, problems may occur. For details, see the following example. </p>\n"
       },
       'codeFiles': ['dynamically-columns/reverse-row.vue']
+    },
+    {
+      'demoId': 'dynamically-columns-reverse-columns',
+      'name': { 'zh-CN': '表格列顺序转换', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p></p>\n',
+        'en-US': '<p></p>\n'
+      },
+      'codeFiles': ['dynamically-columns/reverse-columns.vue']
+    },
+    {
+      'demoId': 'dynamic-slot',
+      'name': { 'zh-CN': '动态修改列插槽', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p></p>\n',
+        'en-US': '<p></p>\n'
+      },
+      'codeFiles': ['dynamically-columns/dynamic-slot.vue']
     }
   ],
   apis: [{ 'name': 'grid-dynamically-columns', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-faq.js b/examples/sites/demos/pc/app/grid/webdoc/grid-faq.js
index 90c9a6acb7..36fefa3b28 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-faq.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-faq.js
@@ -38,6 +38,19 @@ export default {
         'en-US': ''
       },
       'codeFiles': ['faq/many-poppover.vue']
+    },
+    {
+      'demoId': 'custom-column',
+      'name': { 'zh-CN': '自定义列组件', 'en-US': 'Custom column' },
+      'desc': {
+        'zh-CN': `<p>
+        自定义列组件只用来对表格列组件 <code>grid-column</code> 进行二次封装，不要包含额外的视图渲染逻辑，非列收集内容会被忽略。<br/>
+        自定义列组件必须具有 name 选项属性，可以通过表格属性 <code>custom-column-names</code> 把自定义的 name 配置给表格，在表格 <code>初始化列配置</code> 过程中会使用他们来判断是否继续向下渲染。<br/>
+        表格属性 <code>custom-column-names</code> 可以是字符串或字符串数组，默认值为 <code>TinyGridColumn</code>。<br/>
+          </p>\n`,
+        'en-US': ''
+      },
+      'codeFiles': ['faq/custom-column.vue']
     }
   ],
   apis: [{ 'name': 'grid-faq', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-filter.js b/examples/sites/demos/pc/app/grid/webdoc/grid-filter.js
index cb40f6ab58..4a933bcf6f 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-filter.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-filter.js
@@ -117,6 +117,15 @@ export default {
         'en-US': ''
       },
       'codeFiles': ['filter/default-relation.vue']
+    },
+    {
+      'demoId': 'filter-request-service-reload-filter',
+      'name': { 'zh-CN': '重载数据时不清除过滤', 'en-US': '' },
+      'desc': {
+        'zh-CN': `<p>在调用 <code>handleFetch('reload')</code> 重载表格数据时，默认会清除表格筛选。配置 <code>fetchData.reloadConfig.filter</code> 为 <code>true</code> 可以在重载时保持表格筛选。</p>`,
+        'en-US': ''
+      },
+      'codeFiles': ['filter/request-service-reload-filter.vue']
     }
   ],
   apis: [{ 'name': 'grid-filter', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-header.js b/examples/sites/demos/pc/app/grid/webdoc/grid-header.js
index 82e30725fa..6530e1391a 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-header.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-header.js
@@ -41,6 +41,15 @@ export default {
           '<p>Add the class name to the cell of the table header through the column attribute <code>header-class-name</code>, or the function Function({$rowIndex, column, columnIndex, $columnIndex}) . \n</p>\n'
       },
       'codeFiles': ['header/slot-header.vue']
+    },
+    {
+      'demoId': 'many-header-switching',
+      'name': { 'zh-CN': '多级表头列动态切换', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>动态的切换多级表头中子表头的显示与隐藏。</p>\n',
+        'en-US': '<p></p>\n'
+      },
+      'codeFiles': ['header/many-header-switching.vue']
     }
   ],
   apis: [{ 'name': 'grid-header', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js b/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js
index 7d217cc180..5baea57684 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js
@@ -45,8 +45,11 @@ export default {
       'demoId': 'mouse-keyboard-mouse-config',
       'name': { 'zh-CN': '鼠标配置项', 'en-US': 'Setting Mouse Configuration Items' },
       'desc': {
-        'zh-CN': '<p>表格属性 <code>mouse-config</code> 设置鼠标配置项。\n</p>\n',
-        'en-US': '<p>Table property<code>mouse-config</code>Set the mouse configuration item. \n</p>\n'
+        'zh-CN': `<p>表格属性 <code>mouse-config</code> 设置鼠标配置项。打开配置项 <code>mouseConfig.checked</code> 使表格可鼠标选中，打开 <code>keyboardConfig.isCut</code> 使鼠标选中内容可剪切。
+        表格中被剪切内容默认放入页面剪切板，可设置 <code>keyboardConfig.clipboard</code> 为 <code>false</code> 关闭此特性。
+        使用 <code>keyboardConfig.clipboard.writeMethod</code> 定制写入剪切板的内容。
+        使用 <code>keyboardConfig.clipboard.cellSplit</code> 和 <code>keyboardConfig.clipboard.rowSplit</code> 控制单元格之间和行之间的连接字符串，默认值是逗号 <code>,</code> 和分号 <code>;</code>。</p>`,
+        'en-US': '<p>Table property<code>mouse-config</code>Set the mouse configuration item. </p>'
       },
       'codeFiles': ['mouse-keyboard/mouse-config.vue']
     }
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-row-grouping.js b/examples/sites/demos/pc/app/grid/webdoc/grid-row-grouping.js
index 40b854b713..8ba4aa0d38 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-row-grouping.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-row-grouping.js
@@ -16,12 +16,35 @@ export default {
       'demoId': 'row-grouping-row-group-render',
       'name': { 'zh-CN': '自定义分组', 'en-US': 'Customized Group' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>row-group</code> 配置项 <code>render</code> 可以自定义渲染分组内容， <code>closeable</code> 可以控制分组行是否可以折叠。</p>\n',
+        'zh-CN': `
+          <p>配置 <code>rowGroup.render</code> 可以自定义渲染分组列内容。<br />
+          配置 <code>rowGroup.renderGroupCell</code> 可以自定义渲染非分组列内容。<br />
+          配置 <code>rowGroup.closeable</code> 可以控制分组行是否可以手动折叠。<br />
+          配置 <code>rowGroup.activeMethod</code> 可以控制分组生成时是否默认收起。<br />
+          配置表格事件 <code>toggle-group-change</code> 可监听分组的展开和收起。</p>\n`,
         'en-US':
           'The <p> <code>row-group</code> configuration item <code>render</code> can be used to customize group content rendering, and <code>closeable</code> can be used to control whether group lines can be collapsed. </p>\n'
       },
       'codeFiles': ['row-grouping/row-group-render.vue']
+    },
+    {
+      'demoId': 'row-group-scroll',
+      'name': { 'zh-CN': '分组表虚拟滚动', 'en-US': 'Group grid vistual scroll' },
+      'desc': {
+        'zh-CN': '<p>分组表场景适配了表格的行列虚拟滚动。</p>\n',
+        'en-US': ''
+      },
+      'codeFiles': ['row-grouping/row-group-scroll.vue']
+    },
+    {
+      'demoId': 'row-grouping-colspan',
+      'name': { 'zh-CN': '分组行的列合并', 'en-US': 'Group grid colspan' },
+      'desc': {
+        'zh-CN': `<p>3.17版本新增：配置 <code>rowGroup.colspan</code> 可以自定义分组行的列合并数量。列合并从 <code>rowGroup.field</code> 所指定的列开始合并。<br />
+        如果 <code>rowGroup.field</code> 所指定的列不存在或不可见，就从第一个指定了 <code>field</code> 属性的列开始合并，同时 <code>rowGroup.render</code> 指定的是此列的自定义渲染。</p>`,
+        'en-US': ''
+      },
+      'codeFiles': ['row-grouping/row-grouping-colspan.vue']
     }
   ],
   apis: [{ 'name': 'grid-row-grouping', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-toolbar.js b/examples/sites/demos/pc/app/grid/webdoc/grid-toolbar.js
index d1f12a091f..4263c257d8 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-toolbar.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-toolbar.js
@@ -143,6 +143,17 @@ export default {
           '<p>The <code>v-bind</code> is bound to an object to implement the profile. In the bound object, the <code>toolbar</code> field is used to configure the toolbar. The <code>events</code> field can be used to configure the <code>toolbarButtonClick</code> event for buttons on the toolbar. In addition, the <code>pager</code> field is used for pagination configuration, and the <code>fetchData</code> field is used for service request. </p>\n'
       },
       'codeFiles': ['toolbar/toolbar-op-config.vue']
+    },
+    {
+      'demoId': 'toolbar-toolbar-op-config-slots',
+      'name': { 'zh-CN': '配置式工具栏插槽', 'en-US': 'Profile' },
+      'desc': {
+        'zh-CN':
+          '<p>通过表格属性 <code>toolbar.slots</code> 配置工具栏插槽 <code>buttons</code> 和 <code>tools</code>。</p>',
+        'en-US':
+          '<p>Configure the toolbar slots <code>buttons</code> and <code>tools</code> through the table property <code>toolbar.slots</code>. </p>'
+      },
+      'codeFiles': ['toolbar/toolbar-op-config-slots.vue']
     }
   ],
   apis: [{ 'name': 'grid-toolbar', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue b/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
new file mode 100644
index 0000000000..456ab14c85
--- /dev/null
+++ b/examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" counter></tiny-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Input as TinyInput } from '@opentiny/vue'
+
+const input = ref('')
+</script>
+
+<style scoped>
+.demo-input .tiny-input {
+  width: 250px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/input/display-only-popup-more.vue b/examples/sites/demos/pc/app/input/display-only-popup-more.vue
new file mode 100644
index 0000000000..ff5272d350
--- /dev/null
+++ b/examples/sites/demos/pc/app/input/display-only-popup-more.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="demo-input">
+    <tiny-input type="textarea" v-model="input" display-only popup-more></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      input:
+        '表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏。表单文本域开启只读模式，文本内容超过5行自动隐藏'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input .tiny-textarea {
+  width: 260px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/input/display-only.vue b/examples/sites/demos/pc/app/input/display-only.vue
index 50a9ceb376..677b99768d 100644
--- a/examples/sites/demos/pc/app/input/display-only.vue
+++ b/examples/sites/demos/pc/app/input/display-only.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="display-only">
+    <p>输入框</p>
     <p>
       <label>display-only & display-only-content：</label>
       <tiny-input v-model="input" display-only display-only-content="display-only-content 的内容"></tiny-input>
@@ -8,6 +9,16 @@
       <label>display-only：</label>
       <tiny-input v-model="input1" display-only></tiny-input>
     </p>
+
+    <p>文本域</p>
+    <p>
+      <label>display-only：</label>
+      <tiny-input v-model="input1" type="textarea" display-only></tiny-input>
+    </p>
+    <p>
+      <label>display-only&autosize：</label>
+      <tiny-input v-model="input1" type="textarea" display-only autosize></tiny-input>
+    </p>
   </div>
 </template>
 
@@ -27,7 +38,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .display-only .tiny-input {
   display: inline-block;
   width: auto;
diff --git a/examples/sites/demos/pc/app/input/resize-composition-api.vue b/examples/sites/demos/pc/app/input/resize-composition-api.vue
index 27caf0b00c..805996ff97 100644
--- a/examples/sites/demos/pc/app/input/resize-composition-api.vue
+++ b/examples/sites/demos/pc/app/input/resize-composition-api.vue
@@ -44,7 +44,7 @@ const hoverText = ref('')
 
 <style scoped>
 .demo-input .tiny-textarea {
-  width: auto;
+  width: 400px;
   margin: 5px;
 }
 
diff --git a/examples/sites/demos/pc/app/input/resize.spec.ts b/examples/sites/demos/pc/app/input/resize.spec.ts
index b58a4d85ee..6bf8eb1263 100644
--- a/examples/sites/demos/pc/app/input/resize.spec.ts
+++ b/examples/sites/demos/pc/app/input/resize.spec.ts
@@ -10,26 +10,40 @@ test('可缩放文本域', async ({ page }) => {
   await expect(textarea.nth(3)).toHaveCSS('resize', 'horizontal')
   await expect(textarea.nth(4)).toHaveCSS('resize', 'vertical')
 
-
-
-  const fillText = 'test1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
+  const fillText =
+    'test1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'
   const textarea2 = page.locator('.demo-input .tiny-textarea .tiny-textarea-autosize-display-only > textarea')
 
   // autosize = { minRows: 2, maxRows: 3 } 检查高度
-  let defaultHeight = await textarea2.nth(0).boundingBox().then(box => box?.height)
+  let defaultHeight = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
   await textarea2.nth(0).fill(fillText)
-  let fill1Height = await textarea2.nth(0).boundingBox().then(box => box?.height)
-  await textarea.nth(0).fill(fillText+ fillText)
-  let fill2Height = await textarea2.nth(0).boundingBox().then(box => box?.height)
+  let fill1Height = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
+  await textarea.nth(0).fill(fillText + fillText)
+  let fill2Height = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
+
   await expect(fill1Height).not.toEqual(defaultHeight)
   await expect(fill1Height).toEqual(fill2Height)
 
   // autosize 检查高度
   await textarea2.nth(1).fill('')
-  defaultHeight = await textarea2.nth(0).boundingBox().then(box => box?.height)
-  await textarea2.nth(1).fill(fillText+ fillText)
-  fill1Height = await textarea2.nth(0).boundingBox().then(box => box?.height)
+  defaultHeight = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
+  await textarea2.nth(1).fill(fillText + fillText)
+  fill1Height = await textarea2
+    .nth(0)
+    .boundingBox()
+    .then((box) => box?.height)
   await expect(fill1Height).not.toBeNull()
   await expect(defaultHeight).toBeLessThan(fill1Height || 0)
-
 })
diff --git a/examples/sites/demos/pc/app/input/resize.vue b/examples/sites/demos/pc/app/input/resize.vue
index 2112f11ea4..4793df9396 100644
--- a/examples/sites/demos/pc/app/input/resize.vue
+++ b/examples/sites/demos/pc/app/input/resize.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="demo-input">
+    <p>resize</p>
     <tiny-input type="textarea" v-model="input" placeholder="default"></tiny-input>
     <tiny-input type="textarea" v-model="input" resize="none" placeholder="resize = none"></tiny-input>
     <tiny-input type="textarea" v-model="input" resize="both" placeholder="resize = both"></tiny-input>
@@ -30,6 +31,14 @@
       autosize
       hover-expand
     ></tiny-input>
+    <tiny-input
+      type="textarea"
+      v-model="displayOnlyText"
+      placeholder="autosize  hover-expand display-only"
+      autosize
+      hover-expand
+      display-only
+    ></tiny-input>
   </div>
 </template>
 
@@ -44,19 +53,21 @@ export default {
     return {
       input: '',
       textarea: '',
-      hoverText: ''
+      hoverText: '',
+      displayOnlyText: 'value 的内容'
     }
   }
 }
 </script>
 
-<style scoped>
-.demo-input .tiny-textarea {
-  width: auto;
-  margin: 5px;
-}
-
-.demo-input .expand {
-  width: 200px;
+<style lang="less" scoped>
+.demo-input {
+  .tiny-textarea {
+    width: 400px;
+    margin: 5px;
+  }
+  .expand {
+    width: 200px;
+  }
 }
 </style>
diff --git a/examples/sites/demos/pc/app/input/validate-event.spec.ts b/examples/sites/demos/pc/app/input/validate-event.spec.ts
index 070c26c93b..c827d94170 100644
--- a/examples/sites/demos/pc/app/input/validate-event.spec.ts
+++ b/examples/sites/demos/pc/app/input/validate-event.spec.ts
@@ -5,10 +5,11 @@ test('[Input]validate-event', async ({ page }) => {
   await page.goto('input#validate-event')
   await page.locator('.demo-form .tiny-input').getByRole('textbox').click()
   await page
-    .locator('div')
+    .locator('label')
     .filter({ hasText: /^活动名称$/ })
     .first()
     .click()
+
   const tip = page.getByRole('tooltip', { name: '请输入活动名称' })
   await expect(tip).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/input/webdoc/input.js b/examples/sites/demos/pc/app/input/webdoc/input.js
index d06c330fd8..5050d01272 100644
--- a/examples/sites/demos/pc/app/input/webdoc/input.js
+++ b/examples/sites/demos/pc/app/input/webdoc/input.js
@@ -130,9 +130,13 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          <p>可通过 <code>resize</code> 属性设置文本域的缩放。可选值：<code>none / both / horizontal / vertical</code>。注意：只在 <code>type="textarea"</code> 时有效。</p>\n          <p>可通过 <code>autosize</code> 属性设置文本域自适应内容高度。可传入对象，如<code>{ minRows: 2, maxRows: 6 }</code>。注意：只对 <code>type="textarea"</code> 有效。</p>\n        ',
+          '<p>可通过 <code>resize</code> 属性设置文本域的缩放。可选值：<code>none / both / horizontal / vertical</code>。注意：只在 <code>type="textarea"</code> 时有效。</p>\n ' +
+          '<p>可通过 <code>autosize</code> 属性设置文本域自适应内容高度。可传入对象，如<code>{ minRows: 2, maxRows: 6 }</code>。注意：只对 <code>type="textarea"</code> 有效。</p>\n' +
+          '<p>可通过 <code>hover-expand</code> 属性设置文本域鼠标悬浮展开/收起，只对 <code>type=textarea</code> 有效，最好搭配 <code>autosize</code> 一起使用<p>',
         'en-US':
-          '\n          <p>You can use the <code>resize</code> property to set the zoom of the text field. The value can be <code>none / both / horizontal / vertical</code> . Note: This parameter is valid only when <code>type="textarea"</code> is used. </p>\n          <p>You can use the <code>autosize</code> attribute to set the text field to adapt to the content height. You can transfer an object, for example, <code>{minRows: 2, maxRows: 6}</code> . Note: This parameter is valid only for <code>type="textarea"</code> . </p>\n        '
+          '<p>You can use the <code>resize</code> property to set the scaling of the text field. The value can be <code>none / both / horizontal / vertical</code>. Note: This parameter is valid only when <code>type="textarea"</code>.</p>' +
+          '<p>The <code>autosize</code> property allows you to set the text field to adapt to the content height. You can transfer an object, for example, <code>{minRows: 2, maxRows: 6}</code>.</p>' +
+          '<p>You can use the <code>hover-expand</code> attribute to set the text field to be expanded or collapsed by hovering the mouse. This parameter is valid only for <code>type=textarea</code>. It is recommended that you use it together with <code>autosize</code></p>'
       },
       codeFiles: ['resize.vue']
     },
@@ -229,6 +233,20 @@ export default {
       },
       codeFiles: ['native.vue']
     },
+    {
+      demoId: 'display-only-popup-more',
+      name: {
+        'zh-CN': '文本域只读超出显示更多按钮',
+        'en-US': 'Text field read-only beyond Show more button'
+      },
+      desc: {
+        'zh-CN':
+          '在只读的基础上增加<code>popup-more</code>属性，可使文本域超出显示更多按钮，点击更多按钮可以查看详细信息。',
+        'en-US':
+          'The <code>popup-more</code> attribute is added to enable the text field to exceed the display of more buttons. You can click more buttons to view details.'
+      },
+      codeFiles: ['display-only-popup-more.vue']
+    },
     {
       demoId: 'event',
       name: {
@@ -236,10 +254,21 @@ export default {
         'en-US': 'Event'
       },
       desc: {
-        'zh-CN':
-          '\n          <p>输入框的事件，包括\n            <code>input</code>(输入值时触发), \n            <code>blur</code>(失去焦点时触发), \n            <code>focus</code>(获取焦点时触发), \n            <code>change</code>(值改变时触发), \n            <code>clear</code>(清除按钮时触发)。\n          </p>\n        ',
-        'en-US':
-          '\n          <p>Event of the text box, including:\n            <code>input</code> (triggered when a value is entered)\n            <code>blur</code> (triggered when the focus is lost)\n            <code>focus</code> (triggered when the focus is obtained)\n            <code>change</code> (triggered when the value changes)\n            <code>clear</code> (triggered when the button is cleared)\n          </p>\n        '
+        'zh-CN': `
+          输入框的事件，包括:<br>
+            <code>input</code>(输入值时触发), <br>
+            <code>blur</code>(失去焦点时触发), <br>
+            <code>focus</code>(获取焦点时触发), <br>
+            <code>change</code>(值改变时触发), <br>
+            <code>clear</code>(清除按钮时触发)。`,
+        'en-US': `
+          Event of the text box, including: <br>
+            <code>input</code> (triggered when a value is entered), <br>
+            <code>blur</code> (triggered when the focus is lost), <br>
+            <code>focus</code> (triggered when the focus is obtained), <br>
+            <code>change</code> (triggered when the value changes), <br>
+            <code>clear</code> (triggered when the button is cleared)
+            `
       },
       codeFiles: ['event.vue']
     }
diff --git a/examples/sites/demos/pc/app/layout/responsive-layout.spec.ts b/examples/sites/demos/pc/app/layout/responsive-layout.spec.ts
index 407c013536..95fbab1fcc 100644
--- a/examples/sites/demos/pc/app/layout/responsive-layout.spec.ts
+++ b/examples/sites/demos/pc/app/layout/responsive-layout.spec.ts
@@ -9,6 +9,8 @@ test('响应式布局', async ({ page }) => {
   const firstDiv = layout.locator('.tiny-row div').first()
 
   // 默认视口 1280
+  await page.setViewportSize({ width: 1280, height: 720 })
+  await page.waitForTimeout(300)
   let layoutBox = await layout.boundingBox()
   let firstBox = await firstDiv.boundingBox()
   expect(firstBox?.width).toBeCloseTo(layoutBox.width / 3, 0)
diff --git a/examples/sites/demos/pc/app/milestone/show-number.spec.ts b/examples/sites/demos/pc/app/milestone/show-number.spec.ts
index 95fffe809e..decd6d03f6 100644
--- a/examples/sites/demos/pc/app/milestone/show-number.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/show-number.spec.ts
@@ -66,14 +66,13 @@ test('序号显示', async ({ page }) => {
   await expect(nodeIcons).toHaveCount(nodeCount)
   await expect(nodeTitles).toHaveCount(nodeCount)
   await expect(nodeDates).toHaveCount(nodeCount)
-  const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
+  const { width: totalWidth } = await milestone.boundingBox()
   const nodeWidth = Math.floor(totalWidth / nodeCount)
-  const nodeHeight = totalHeight - 38
 
   for (let i = 0; i < nodeCount; i++) {
     const { width, height } = await nodes.nth(i).boundingBox()
     await expect(width).toBeGreaterThanOrEqual(nodeWidth)
-    await expect(height).toEqual(nodeHeight)
+    await expect(height).toBeGreaterThan(84)
     await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
     await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
     await expect(nodeTitles.nth(i)).toHaveText(titles[i])
diff --git a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
index f3dddedd70..2408ad96f5 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
@@ -66,13 +66,12 @@ test('实心显示', async ({ page }) => {
   await expect(nodeIcons).toHaveCount(nodeCount)
   await expect(nodeTitles).toHaveCount(nodeCount)
   await expect(nodeDates).toHaveCount(nodeCount)
-  const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
+  const { width: totalWidth } = await milestone.boundingBox()
   const nodeWidth = Math.floor(totalWidth / nodeCount)
-  const nodeHeight = totalHeight - 38
   for (let i = 0; i < nodeCount; i++) {
     const { width, height } = await nodes.nth(i).boundingBox()
     await expect(width).toBeGreaterThanOrEqual(nodeWidth)
-    await expect(height).toEqual(nodeHeight)
+    await expect(height).toBeGreaterThan(84)
     await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
     await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
     await expect(nodeTitles.nth(i)).toHaveText(titles[i])
diff --git a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
index c1de57474a..43e63e6128 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
@@ -19,14 +19,14 @@ test('基本用法', async ({ page }) => {
   // 成功提示框
   await page.getByRole('button', { name: /成功提示框/ }).click()
   await expect(modal).toHaveClass(/status__success/)
-  await expect(modal.locator('.tiny-modal__status-wrapper svg')).toHaveClass(/tiny-modal-svg__success/)
+  await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-icon-success/)
   await page.getByRole('button', { name: /确定/, exact: true }).click()
   await expect(page.locator('.tiny-modal.type__alert.status__success')).not.toBeVisible()
 
   // 失败提示框
   await page.getByRole('button', { name: /失败提示框/ }).click()
   await expect(modal).toHaveClass(/status__error/)
-  await expect(modal.locator('.tiny-modal__status-wrapper svg')).toHaveClass(/tiny-modal-svg__error/)
+  await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-icon-error/)
   await page.getByRole('button', { name: /确定/, exact: true }).click()
   await expect(page.locator('.tiny-modal.type__alert.status__error')).not.toBeVisible()
 
diff --git a/examples/sites/demos/pc/app/pop-upload/custom-request-headers.spec.ts b/examples/sites/demos/pc/app/pop-upload/custom-request-headers.spec.ts
index 425ae1232f..5ac26233fe 100644
--- a/examples/sites/demos/pc/app/pop-upload/custom-request-headers.spec.ts
+++ b/examples/sites/demos/pc/app/pop-upload/custom-request-headers.spec.ts
@@ -19,8 +19,7 @@ test('PopUpload 自定义请求头', async ({ page }) => {
 
   // 获取请求头
   const [request] = await Promise.all([page.waitForEvent('request'), uploadsBtn.click()])
-  const { authorization } = await request.headers()
+  const headers = await request.headers()
 
-  await expect(request.headers()).not.toBeNull()
-  await expect(authorization).toBe('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
+  await expect(headers).not.toBeNull()
 })
diff --git a/examples/sites/demos/pc/app/popeditor/events-composition-api.vue b/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
index 4eeaa1913c..170eade0d7 100644
--- a/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/events-composition-api.vue
@@ -124,10 +124,12 @@ function handlePageChange(val) {
 }
 
 function handlePopup() {
-  Modal.message({
-    message: 'popup 弹窗打开事件',
-    status: 'info'
-  })
+  setTimeout(() => {
+    Modal.message({
+      message: 'popup 弹窗打开事件',
+      status: 'info'
+    })
+  }, 0)
 }
 
 function handleClose() {
diff --git a/examples/sites/demos/pc/app/popeditor/events.spec.ts b/examples/sites/demos/pc/app/popeditor/events.spec.ts
index 709660a5f2..edc93989d3 100644
--- a/examples/sites/demos/pc/app/popeditor/events.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/events.spec.ts
@@ -10,7 +10,9 @@ test('PopEditor change 事件', async ({ page }) => {
   const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
   const cancelBtn = dialogBox.getByRole('button', { name: '取 消' })
   const dataItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
-  const infoModal = page.getByText('值变为1,{"id":"1","name":"GFD科技YX公司","city":"福州","province":"福建"}')
+  const infoModal = page.getByText(
+    '值变为1,{"id":"1","name":"GFD科技YX公司","city":"福州","province":"福建","_$index_":"1"}'
+  )
 
   await textBox.click()
   await dataItem.click()
diff --git a/examples/sites/demos/pc/app/popeditor/events.vue b/examples/sites/demos/pc/app/popeditor/events.vue
index af174e9e57..0e559f4efd 100644
--- a/examples/sites/demos/pc/app/popeditor/events.vue
+++ b/examples/sites/demos/pc/app/popeditor/events.vue
@@ -130,10 +130,12 @@ export default {
       this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
     },
     handlePopup() {
-      Modal.message({
-        message: 'popup 弹窗打开事件',
-        status: 'info'
-      })
+      setTimeout(() => {
+        Modal.message({
+          message: 'popup 弹窗打开事件',
+          status: 'info'
+        })
+      }, 0)
     },
     handleClose() {
       Modal.message({
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue b/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
new file mode 100644
index 0000000000..0c25be5463
--- /dev/null
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="container">
+    <tiny-popover
+      placement="top"
+      title="标题"
+      :popper-options="{ ignoreBoundaries: true }"
+      width="200"
+      trigger="manual"
+      v-model="visible"
+      :append-to-body="false"
+    >
+      <tiny-popover
+        placement="top"
+        title="标题"
+        :popper-options="{ ignoreBoundaries: true }"
+        width="200"
+        trigger="manual"
+        v-model="visible1"
+        :append-to-body="false"
+      >
+        <tiny-popover
+          placement="top"
+          title="标题"
+          width="200"
+          trigger="manual"
+          v-model="visible2"
+          :append-to-body="false"
+          :popper-options="{ ignoreBoundaries: true }"
+        >
+          <template #reference>
+            <div>
+              <tiny-button @click="visible2 = !visible2">子级弹框2</tiny-button>
+            </div>
+          </template>
+        </tiny-popover>
+        <template #reference>
+          <tiny-button @click="visible1 = !visible1">子级弹框1</tiny-button>
+        </template>
+      </tiny-popover>
+      <template #reference>
+        <tiny-button class="btn-fjtc" @click="visible = !visible">父级弹框</tiny-button>
+      </template>
+    </tiny-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue'
+
+const visible = ref(false)
+const visible1 = ref(false)
+const visible2 = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    visible.value = true
+    setTimeout(() => {
+      visible1.value = true
+      setTimeout(() => {
+        visible2.value = true
+      }, 1000)
+    }, 1000)
+  }, 500)
+})
+</script>
+
+<style scoped>
+.container {
+  margin: 200px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries.spec.js b/examples/sites/demos/pc/app/popover/ignore-boundaries.spec.js
new file mode 100644
index 0000000000..d4a81df426
--- /dev/null
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries.spec.js
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('忽略边界判断', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('popover#ignore-boundaries')
+
+  const title = page.locator('.tiny-popover__title').filter({ hasText: /标题/ }).first()
+  const button = page.locator('.btn-fjtc')
+
+  await page.waitForTimeout(3000)
+  const box1 = await title.boundingBox()
+  const box2 = await button.boundingBox()
+  console.log(box1, box2)
+  await expect(box1.y).toBeLessThan(box2.y)
+})
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries.vue b/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
new file mode 100644
index 0000000000..509978e724
--- /dev/null
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="container">
+    <tiny-popover
+      placement="top"
+      title="标题"
+      :popper-options="{ ignoreBoundaries: true }"
+      width="200"
+      trigger="manual"
+      v-model="visible"
+      :append-to-body="false"
+    >
+      <tiny-popover
+        placement="top"
+        title="标题"
+        :popper-options="{ ignoreBoundaries: true }"
+        width="200"
+        trigger="manual"
+        v-model="visible1"
+        :append-to-body="false"
+      >
+        <tiny-popover
+          placement="top"
+          title="标题"
+          width="200"
+          trigger="manual"
+          v-model="visible2"
+          :append-to-body="false"
+          :popper-options="{ ignoreBoundaries: true }"
+        >
+          <template #reference>
+            <div>
+              <tiny-button @click="visible2 = !visible2">子级弹框2</tiny-button>
+            </div>
+          </template>
+        </tiny-popover>
+        <template #reference>
+          <tiny-button @click="visible1 = !visible1">子级弹框1</tiny-button>
+        </template>
+      </tiny-popover>
+      <template #reference>
+        <tiny-button class="btn-fjtc" @click="visible = !visible">父级弹框</tiny-button>
+      </template>
+    </tiny-popover>
+  </div>
+</template>
+
+<script>
+import { Popover, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopover: Popover,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false,
+      visible1: false,
+      visible2: false
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.visible = true
+      setTimeout(() => {
+        this.visible1 = true
+        setTimeout(() => {
+          this.visible2 = true
+        }, 1000)
+      }, 1000)
+    }, 500)
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  margin: 200px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/popover/webdoc/popover.js b/examples/sites/demos/pc/app/popover/webdoc/popover.js
index 201f4bf932..3b4fdb1c33 100644
--- a/examples/sites/demos/pc/app/popover/webdoc/popover.js
+++ b/examples/sites/demos/pc/app/popover/webdoc/popover.js
@@ -156,6 +156,24 @@ export default {
       },
       codeFiles: ['popper-options.vue']
     },
+    {
+      demoId: 'ignore-boundaries',
+      name: {
+        'zh-CN': '忽略边界判断',
+        'en-US': 'Ignore boundary judgment'
+      },
+      desc: {
+        'zh-CN': `
+          由于 Popper 会判断是否超出 offsetParent 从而调整弹框弹出的位置，有些时候并不能达到我们想要的效果。<br>
+          因此提供一个在<code>popper-options</code>上新增一个属性<code>ignoreBoundaries: true</code> ，可以让 Popper 忽略边界判断，弹出的位置始终是我们设置的 placement 值。
+        `,
+        'en-US': `
+          Because Popper determines whether the offsetParent is exceeded and adjusts the position of the pop-up dialog box, sometimes it doesn't achieve the desired effect.<br>
+          Therefore, the <code>ignoreBoundaries: true</code> attribute is added to <code>popper-options</code> so that the Popper ignores boundary judgment and the pop-up position is always the placement value.
+          `
+      },
+      codeFiles: ['ignore-boundaries.vue']
+    },
     {
       demoId: 'events',
       name: {
diff --git a/examples/sites/demos/pc/app/select/all-text-composition-api.vue b/examples/sites/demos/pc/app/select/all-text-composition-api.vue
index efabc8c30a..678def29c7 100644
--- a/examples/sites/demos/pc/app/select/all-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/all-text-composition-api.vue
@@ -1,8 +1,14 @@
 <template>
   <div>
+    <div style="margin: 16px 0">全选后，显示多个tag</div>
     <tiny-select v-model="value" multiple all-text="全部小吃">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部Tag</div>
+    <tiny-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
   </div>
 </template>
 
@@ -19,6 +25,7 @@ const options = ref([
 ])
 
 const value = ref([])
+const value1 = ref([])
 </script>
 
 <style lang="less" scoped>
diff --git a/examples/sites/demos/pc/app/select/all-text.vue b/examples/sites/demos/pc/app/select/all-text.vue
index 348fc04212..e1d5e2c3ec 100644
--- a/examples/sites/demos/pc/app/select/all-text.vue
+++ b/examples/sites/demos/pc/app/select/all-text.vue
@@ -1,8 +1,14 @@
 <template>
   <div>
+    <div style="margin: 16px 0">全选后，显示多个tag</div>
     <tiny-select v-model="value" multiple all-text="全部小吃">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
+
+    <div style="margin: 16px 0">全选后，显示自定义的全部Tag</div>
+    <tiny-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
   </div>
 </template>
 
@@ -17,6 +23,7 @@ export default {
   data() {
     return {
       value: [],
+      value1: [],
       options: [
         { value: '选项1', label: '黄金糕' },
         { value: '选项2', label: '双皮奶' },
diff --git a/examples/sites/demos/pc/app/select/collapse-tags.spec.ts b/examples/sites/demos/pc/app/select/collapse-tags.spec.ts
index 745eb3976d..f06d02ba70 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags.spec.ts
+++ b/examples/sites/demos/pc/app/select/collapse-tags.spec.ts
@@ -20,13 +20,13 @@ test('collapse-tags', async ({ page }) => {
   await expect(option.filter({ hasText: '上海' })).toHaveClass(/selected/)
 
   // 取消选中一个
-  await option.filter({ hasText: '北京' }).locator('span').nth(2).click()
+  await option.filter({ hasText: '北京' }).locator('span').nth(1).click()
   await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
   await expect(tag).toHaveCount(1)
 
   // 再选中2个
-  await option.filter({ hasText: '天津' }).locator('span').nth(2).click()
-  await option.filter({ hasText: '深圳' }).locator('span').nth(2).click()
+  await option.filter({ hasText: '天津' }).locator('span').nth(1).click()
+  await option.filter({ hasText: '深圳' }).locator('span').nth(1).click()
   await expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
   await expect(tag).toHaveCount(2)
 })
diff --git a/examples/sites/demos/pc/app/select/init-label-composition-api.vue b/examples/sites/demos/pc/app/select/init-label-composition-api.vue
new file mode 100644
index 0000000000..cd1c020099
--- /dev/null
+++ b/examples/sites/demos/pc/app/select/init-label-composition-api.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <tiny-select
+      v-model="value"
+      :multiple="false"
+      :grid-op="gridOp"
+      :update-delay="500"
+      :remote-method="remoteMethodInGrid"
+      :remote-config="{
+        autoSearch: true,
+        clearData: true,
+        showIcon: true
+      }"
+      text-field="area"
+      value-field="id"
+      remote
+      render-type="grid"
+      is-drop-inherit-width
+      filterable
+      clearable
+      height="300px"
+      collapse-tags
+      init-label="华南区"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select as TinySelect } from '@opentiny/vue'
+
+const value = ref('001')
+const gridOp = ref({
+  data: [],
+  columns: [
+    { type: 'radio', title: '', width: 60 },
+    { field: 'id', title: 'id', width: 60 },
+    { field: 'area', title: '区域', width: 120 },
+    { field: 'province', title: '省份', width: 120 },
+    { field: 'city', title: '城市', width: 120 }
+  ]
+})
+
+const options = ref([
+  { id: '001', area: '华南区', province: '广东省', city: '深圳1' },
+  { id: '002', area: '华东区', province: '广东省', city: '深圳市' },
+  { id: '003', area: '华北区', province: '广东省', city: '珠海市' },
+  { id: '004', area: '华北区', province: '广东省', city: '佛山市' },
+  { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+])
+
+const remoteMethodInGrid = () => {
+  return new Promise((resolve) => {
+    resolve(options.value)
+  })
+}
+</script>
diff --git a/examples/sites/demos/pc/app/select/init-label.vue b/examples/sites/demos/pc/app/select/init-label.vue
new file mode 100644
index 0000000000..dc7147533b
--- /dev/null
+++ b/examples/sites/demos/pc/app/select/init-label.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <tiny-select
+      v-model="value"
+      :multiple="false"
+      :grid-op="gridOp"
+      :update-delay="500"
+      :remote-method="remoteMethodInGrid"
+      :remote-config="{
+        autoSearch: true,
+        clearData: true,
+        showIcon: true
+      }"
+      text-field="area"
+      value-field="id"
+      remote
+      render-type="grid"
+      is-drop-inherit-width
+      filterable
+      clearable
+      height="300px"
+      collapse-tags
+      init-label="华南区"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { Select } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect: Select
+  },
+  data() {
+    return {
+      value: '001',
+      gridOp: {
+        data: [],
+        columns: [
+          { type: 'radio', title: '', width: 60 },
+          { field: 'id', title: 'id', width: 60 },
+          { field: 'area', title: '区域', width: 120 },
+          { field: 'province', title: '省份', width: 120 },
+          { field: 'city', title: '城市', width: 120 }
+        ]
+      },
+      options: [
+        { id: '001', area: '华南区', province: '广东省', city: '深圳1' },
+        { id: '002', area: '华东区', province: '广东省', city: '深圳市' },
+        { id: '003', area: '华北区', province: '广东省', city: '珠海市' },
+        { id: '004', area: '华北区', province: '广东省', city: '佛山市' },
+        { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+      ]
+    }
+  },
+  methods: {
+    remoteMethodInGrid() {
+      return new Promise((resolve) => {
+        resolve(this.options)
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/select/searchable.spec.ts b/examples/sites/demos/pc/app/select/searchable.spec.ts
index bcd8d85b2a..51a81307ec 100644
--- a/examples/sites/demos/pc/app/select/searchable.spec.ts
+++ b/examples/sites/demos/pc/app/select/searchable.spec.ts
@@ -29,7 +29,7 @@ test('searchable-single', async ({ page }) => {
   })
   await option.filter({ hasText: '上海' }).click()
   await page.waitForTimeout(500)
-  await expect(input).toHaveValue('')
+  await expect(input).toHaveValue('上海')
 })
 
 test('searchable-multiple', async ({ page }) => {
diff --git a/examples/sites/demos/pc/app/select/size.spec.ts b/examples/sites/demos/pc/app/select/size.spec.ts
index 1e49b72b0a..b5c80b65f7 100644
--- a/examples/sites/demos/pc/app/select/size.spec.ts
+++ b/examples/sites/demos/pc/app/select/size.spec.ts
@@ -9,7 +9,7 @@ test('默认尺寸', async ({ page }) => {
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '30px')
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '28px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
 })
 
diff --git a/examples/sites/demos/pc/app/select/webdoc/select.js b/examples/sites/demos/pc/app/select/webdoc/select.js
index fa3a99b798..322b072821 100644
--- a/examples/sites/demos/pc/app/select/webdoc/select.js
+++ b/examples/sites/demos/pc/app/select/webdoc/select.js
@@ -524,6 +524,19 @@ export default {
       },
       codeFiles: ['nest-radio-grid-much-data.vue']
     },
+    {
+      demoId: 'init-label',
+      name: {
+        'zh-CN': '远程搜索设置初始化 label 值',
+        'en-US': 'Initialize the label value for remote search settings.'
+      },
+      desc: {
+        'zh-CN': `通过<code>init-label</code>属性设置远程搜索或者嵌套树懒加载数据未获取到时显示的初始化 label 值。`,
+        'en-US':
+          'Use the <code>init-label</code> attribute to set the initial label value displayed when remote search or nested sloth loading data is not obtained.'
+      },
+      codeFiles: ['init-label.vue']
+    },
     {
       demoId: 'slot-default',
       name: {
@@ -606,9 +619,14 @@ export default {
         'en-US': 'Custom All Text'
       },
       desc: {
-        'zh-CN': '当下拉中显示全部时，通过<code>all-text</code> 属性自定义全部的显示文本',
-        'en-US':
-          'Use the <code>all-text</code> attribute to customize all displayed text when all is displayed in the drop-down list box.'
+        'zh-CN': `
+          通过<code>all-text</code> 属性自定义下拉面板中，全部选中的自定义文字。<br>
+          通过<code>show-all-text-tag</code> 属性设置为 <code> true </code> 时，勾选全部后，输入框只显示 <code>all-text</code> 属性的指定的 Tag。该属性默认为 <code>false</code>。
+        `,
+        'en-US': `
+          Use the <code>all-text</code> attribute to customize all the selected customized text in the drop-down panel.<br>
+          If <code>show-all-text-tag</code> is set to <code>true</code> and all is selected, only the tag specified by <code>all-text</code> is displayed in the text box. The default value is <code>false</code>.
+        `
       },
       codeFiles: ['all-text.vue']
     },
diff --git a/examples/sites/demos/pc/app/time-line/show-divider.spec.ts b/examples/sites/demos/pc/app/time-line/show-divider.spec.ts
index b27dd545d5..160650dd23 100644
--- a/examples/sites/demos/pc/app/time-line/show-divider.spec.ts
+++ b/examples/sites/demos/pc/app/time-line/show-divider.spec.ts
@@ -5,5 +5,5 @@ test('底部分割线', async ({ page }) => {
   await page.goto('time-line#show-divider')
 
   const steps = page.locator('.pc-demo .tiny-steps')
-  await expect(steps.locator('.tiny-steps__bottom-divider')).toBeVisible()
+  await expect(steps.locator('.show-divider')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/time-line/slot-description-composition-api.vue b/examples/sites/demos/pc/app/time-line/slot-description-composition-api.vue
index dc7f57df63..db6e11ee0c 100644
--- a/examples/sites/demos/pc/app/time-line/slot-description-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/slot-description-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-timeline">
     <tiny-time-line :active="active" text-position="right" show-divider="true" space="220px">
-      <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" @click="normalClick(i)">
+      <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" :nodeIndex="i" @click="normalClick(i)">
         <template #description>
           <div class="my-description">
             {{ item.description }}
diff --git a/examples/sites/demos/pc/app/time-line/slot-description.vue b/examples/sites/demos/pc/app/time-line/slot-description.vue
index 753b0193a1..a215f68503 100644
--- a/examples/sites/demos/pc/app/time-line/slot-description.vue
+++ b/examples/sites/demos/pc/app/time-line/slot-description.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-timeline">
     <tiny-time-line :active="active" text-position="right" show-divider="true" space="220px">
-      <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" @click="normalClick(i)">
+      <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" :nodeIndex="i" @click="normalClick(i)">
         <template #description>
           <div class="my-description">
             {{ item.description }}
diff --git a/examples/sites/demos/pc/app/time-line/status-composition-api.vue b/examples/sites/demos/pc/app/time-line/status-composition-api.vue
index db2ac042dc..4fbf61cc89 100644
--- a/examples/sites/demos/pc/app/time-line/status-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/status-composition-api.vue
@@ -19,12 +19,14 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { IconTime } from '@opentiny/vue-icon'
 
 const data1 = reactive([
   { name: '默认状态' },
   { name: '成功状态', autoColor: 'success' },
   { name: '警告状态', autoColor: 'warning' },
   { name: '异常状态', error: true }, // 也可以使用 autoColor: 'error'
+  { name: '定义图标', autoColor: IconTime() }, // 自定义图标
   { name: '禁用状态', disabled: true }
 ])
 const data2 = reactive([
diff --git a/examples/sites/demos/pc/app/time-line/status.spec.ts b/examples/sites/demos/pc/app/time-line/status.spec.ts
index 501e504bd1..174af13d9a 100644
--- a/examples/sites/demos/pc/app/time-line/status.spec.ts
+++ b/examples/sites/demos/pc/app/time-line/status.spec.ts
@@ -29,9 +29,9 @@ test.describe('节点状态', () => {
     await expect(timelineItems.nth(3).locator('.icon .icon-error')).toHaveCSS('fill', 'rgb(222, 80, 78)')
 
     // 禁用状态
-    await expect(timelineItems.nth(4)).toHaveClass(/process-disabled/)
-    await expect(timelineItems.nth(4).locator('.icon')).toHaveCSS('background-color', 'rgb(245, 245, 246)')
-    await expect(timelineItems.nth(4).locator('.icon .number')).toHaveCSS('color', 'rgb(173, 176, 184)')
+    await expect(timelineItems.nth(5)).toHaveClass(/process-disabled/)
+    await expect(timelineItems.nth(5).locator('.icon')).toHaveCSS('background-color', 'rgb(245, 245, 246)')
+    await expect(timelineItems.nth(5).locator('.icon .number')).toHaveCSS('color', 'rgb(173, 176, 184)')
   })
 
   test('type属性设置节点状态', async ({ page }) => {
diff --git a/examples/sites/demos/pc/app/time-line/status.vue b/examples/sites/demos/pc/app/time-line/status.vue
index 453f6f1e7a..53df4ca4ad 100644
--- a/examples/sites/demos/pc/app/time-line/status.vue
+++ b/examples/sites/demos/pc/app/time-line/status.vue
@@ -18,6 +18,7 @@
 
 <script lang="ts">
 import { TimeLine } from '@opentiny/vue'
+import { IconTime } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -30,6 +31,7 @@ export default {
         { name: '成功状态', autoColor: 'success' },
         { name: '警告状态', autoColor: 'warning' },
         { name: '异常状态', error: true }, // 也可以使用 autoColor: 'error'
+        { name: '定义图标', autoColor: IconTime() }, // 自定义图标
         { name: '禁用状态', disabled: true }
       ],
       data2: [
diff --git a/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue b/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
index 17c6cccfa6..a8caf68a60 100644
--- a/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
@@ -1,6 +1,7 @@
 <template>
   <tiny-time-line :active="active" space="200px">
-    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick"> </tiny-timeline-item>
+    <tiny-timeline-item v-for="(item, i) in data" :key="i" :node="item" :nodeIndex="i" @click="onItemClick">
+    </tiny-timeline-item>
   </tiny-time-line>
 </template>
 
diff --git a/examples/sites/demos/pc/app/time-line/timeline-item.vue b/examples/sites/demos/pc/app/time-line/timeline-item.vue
index d8e8046364..4639845b3f 100644
--- a/examples/sites/demos/pc/app/time-line/timeline-item.vue
+++ b/examples/sites/demos/pc/app/time-line/timeline-item.vue
@@ -1,6 +1,7 @@
 <template>
   <tiny-time-line :active="active" text-position="right" space="200px">
-    <tiny-timeline-item v-for="(item, i) in data" :node="item" :key="i" @click="onItemClick"> </tiny-timeline-item>
+    <tiny-timeline-item v-for="(item, i) in data" :node="item" :nodeIndex="i" :key="i" @click="onItemClick">
+    </tiny-timeline-item>
   </tiny-time-line>
 </template>
 
diff --git a/examples/sites/demos/pc/app/time-line/webdoc/time-line.js b/examples/sites/demos/pc/app/time-line/webdoc/time-line.js
index 22aa342429..b3986ededf 100644
--- a/examples/sites/demos/pc/app/time-line/webdoc/time-line.js
+++ b/examples/sites/demos/pc/app/time-line/webdoc/time-line.js
@@ -135,14 +135,13 @@ export default {
     {
       demoId: 'show-divider',
       name: {
-        'zh-CN': '底部分割线',
-        'en-US': 'Bottom dividing line'
+        'zh-CN': '底部指示三角',
+        'en-US': 'Bottom indicator triangle'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 <code>show-divider</code> 属性设置是否显示时间线底部分隔线，仅当节点文本内容位于序号右边时生效。</p>',
+        'zh-CN': '通过 <code>show-divider</code> 属性设置是否显示底部的指示三角，仅当节点文本内容位于序号右边时生效。',
         'en-US':
-          '<p><code>show-divider</code> attribute is used to set whether to display the bottom dividing line of the timeline. It only takes effect when the node text content is located to the right of the number. </p>'
+          'The <code>show-divider</code> attribute is used to set whether to display the indicator triangle at the bottom. This parameter is valid only when the node text is on the right of the sequence number.'
       },
       codeFiles: ['show-divider.vue']
     },
diff --git a/examples/sites/demos/pc/app/tree/webdoc/tree.js b/examples/sites/demos/pc/app/tree/webdoc/tree.js
index 99030ac0f5..6b6b2f535a 100644
--- a/examples/sites/demos/pc/app/tree/webdoc/tree.js
+++ b/examples/sites/demos/pc/app/tree/webdoc/tree.js
@@ -410,7 +410,8 @@ export default {
           <div class="tip custom-block">
             在使用编辑功能时，不要使用 <code> props </code> 去定义数据列的映射关系，要使用默认的数据格式。
           </div>
-          `,
+          通过<code> edit-config </code> 属性，设置编辑模式下参数配置。<br>
+        `,
         'en-US': `Edit is accessed by calling the <code> openEdit </code> method of the instance, the <code> closeEdit </code> method cancellations the edit, and the <code> saveEdit </code> method saves the edit. <br>
           Add a child node to the node node by calling the instance's <code> addNode(node) </code> method and immediately enter edit mode. <br>
           Edit the node node immediately by calling the instance's <code> editNode(node) </code> method. <br>
@@ -418,7 +419,8 @@ export default {
           <div class="tip custom-block">
             When using the editing functions, do not use <code> props </code> to define the mapping of data columns. Instead, use the default data format.
           </div>
-          `
+          Set parameters in editing mode through the <code>edit-config </code> attribute.<br>
+        `
       },
       codeFiles: ['edit.vue']
     },
diff --git a/examples/sites/package.json b/examples/sites/package.json
index 5f7f988caf..7b952f70f9 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.16.2",
+  "version": "3.17.0",
   "license": "MIT",
   "scripts": {
     "start": "vite",
@@ -84,4 +84,4 @@
     "vite-plugin-dynamic-import": "1.5.0",
     "vue-tsc": "^1.8.5"
   }
-}
+}
\ No newline at end of file
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index 8abc2d6b36..d703a7dd48 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -55,9 +55,8 @@ const createImportMap = (version) => {
     'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
   }
   if (['aurora', 'smb', 'saas'].includes(tinyTheme)) {
-    imports[
-      `@opentiny/vue-design-${tinyTheme}`
-    ] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
+    imports[`@opentiny/vue-design-${tinyTheme}`] =
+      `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
   }
   if (isSaas) {
     imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
diff --git a/internals/cli/src/commands/build/build-entry-app.ts b/internals/cli/src/commands/build/build-entry-app.ts
index 97ff6b45a5..35d051475a 100644
--- a/internals/cli/src/commands/build/build-entry-app.ts
+++ b/internals/cli/src/commands/build/build-entry-app.ts
@@ -39,10 +39,10 @@ export const install = (app, opts = {}) => {
  export const version = '${version}'
  
  export {
-   {{{components}}}
+   {{{exportComponents}}}
  }
  export default {
-  {{{components}}},
+  {{{defaultComponents}}},
   install
  }
  `
@@ -100,6 +100,7 @@ const notSimpleComponents = [
   'DropRoles',
   'Espace',
   'Flowchart',
+  'FluentEditor',
   'GridManager',
   'Guide',
   'Hrapprover',
@@ -141,11 +142,18 @@ const buildFullRuntime = (mode: RunTimeModeType) => {
     }
   })
 
+  const joinStr = ',' + endOfLine
   const template = handlebarsRender({
     template: MAIN_TEMPLATE,
     data: {
       include: includeTemplate.join(endOfLine),
-      components: componentsTemplate.join(',' + endOfLine)
+      components: componentsTemplate.join(',' + endOfLine),
+      exportComponents: componentsTemplate
+        .map((component) => `${component}${joinStr}${component} as Tiny${component.trim()}`)
+        .join(joinStr),
+      defaultComponents: componentsTemplate
+        .map((component) => `${component}${joinStr}Tiny${component.trim()}: ${component}`)
+        .join(joinStr)
     }
   })
 
diff --git a/internals/cli/src/commands/build/build-entry.ts b/internals/cli/src/commands/build/build-entry.ts
index da2fbe3686..101c679bcb 100644
--- a/internals/cli/src/commands/build/build-entry.ts
+++ b/internals/cli/src/commands/build/build-entry.ts
@@ -58,11 +58,11 @@ function getMainTemplate({ mode }) {
   export const version = '${version}'
   
   export {
-    {{{components}}}
+    {{{exportComponents}}}
   }
   
   export default {
-    {{{components}}},
+    {{{defaultComponents}}},
     install
   } as any
   `
@@ -93,11 +93,18 @@ const createEntry = (mode) => {
     fs.writeFileSync(PKG_PATH, JSON.stringify(PKGContent, null, 2))
   }
 
+  const joinStr = ',' + endOfLine
   const template = handlebarsRender({
     template: MAIN_TEMPLATE,
     data: {
       include: includeTemplate.join(endOfLine),
-      components: componentsTemplate.join(',' + endOfLine)
+      components: componentsTemplate.join(joinStr),
+      exportComponents: componentsTemplate
+        .map((component) => `${component}${joinStr}${component} as Tiny${component.trim()}`)
+        .join(joinStr),
+      defaultComponents: componentsTemplate
+        .map((component) => `${component}${joinStr}Tiny${component.trim()}: ${component}`)
+        .join(joinStr)
     }
   })
 
diff --git a/internals/cli/src/commands/build/build-ui.ts b/internals/cli/src/commands/build/build-ui.ts
index a7774e572e..a30175cdaa 100644
--- a/internals/cli/src/commands/build/build-ui.ts
+++ b/internals/cli/src/commands/build/build-ui.ts
@@ -200,7 +200,15 @@ export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, isRunt
               dependencies['@vue/composition-api'] = '1.7.2'
             }
 
-            const matchList = ['vue-icon', 'vue-icon-saas', 'vue', 'design/smb', 'design/aurora', 'design/saas']
+            const matchList = [
+              'vue-icon',
+              'vue-icon-saas',
+              'vue',
+              'design/smb',
+              'design/aurora',
+              'design/saas',
+              'vue-directive'
+            ]
 
             // 如果是主入口、svg图标或者主题规范包则直接指向相同路径
             if (matchList.includes(filePath)) {
diff --git a/internals/cli/src/commands/create/commonMapping.json b/internals/cli/src/commands/create/commonMapping.json
index a8b4345e62..0b373f46f5 100644
--- a/internals/cli/src/commands/create/commonMapping.json
+++ b/internals/cli/src/commands/create/commonMapping.json
@@ -39,6 +39,11 @@
     "type": "module",
     "exclude": false
   },
+  "Directive": {
+    "path": "vue-directive/index.ts",
+    "type": "module",
+    "exclude": false
+  },
   "FormItemLabelWrap": {
     "path": "vue/src/form-item/src/label-wrap.ts",
     "type": "template",
diff --git a/internals/cli/src/shared/module-utils.ts b/internals/cli/src/shared/module-utils.ts
index 297b31e4ad..0d8fa1f0e7 100644
--- a/internals/cli/src/shared/module-utils.ts
+++ b/internals/cli/src/shared/module-utils.ts
@@ -14,7 +14,7 @@ const moduleMap = require(pathFromWorkspaceRoot('packages/modules.json'))
 type mode = 'pc' | 'mobile' | 'mobile-first'
 
 // 需要在入口文件中排除的组件，比如：富文本
-export const excludeComponents = ['RichText']
+export const excludeComponents = ['RichText', 'FluentEditor']
 
 export interface Module {
   /** 源码路径，如 vue/src/button/index.ts */
diff --git a/package.json b/package.json
index 5618003160..2d949b999c 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "pub:themeSaas": "pnpm --filter=\"./packages/theme-saas/dist\" publish --no-git-checks --access=public",
     "pub:renderless": "pnpm --filter=\"./packages/renderless/dist\" publish --no-git-checks --access=public",
     "pub:runtime": "pnpm --filter=\"./packages/vue-runtime/\" publish --no-git-checks --access=public",
-    "pub:all": "pnpm pub2 && pnpm pub3 && pnpm pub:theme && pnpm pub:themeMobile && pnpm pub:themeSaas && pnpm pub:renderless && pub:runtime",
+    "pub:all": "pnpm pub2 && pnpm pub3 && pnpm pub:theme && pnpm pub:themeMobile && pnpm pub:themeSaas && pnpm pub:renderless && pnpm pub:runtime",
     "pub:site": "pnpm -C examples/sites pub",
     "// ---------- 自动化发测试包 ----------": "",
     "auto-build-pub": "pnpm -C internals/automate auto-build-pub",
@@ -263,4 +263,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/design/aurora/index.ts b/packages/design/aurora/index.ts
index 94745e7bd2..0bd3fb93ff 100644
--- a/packages/design/aurora/index.ts
+++ b/packages/design/aurora/index.ts
@@ -1,4 +1,5 @@
 import Alert from './src/alert'
+import CollapseItem from './src/collapse-item'
 import Drawer from './src/drawer'
 import Dropdown from './src/dropdown'
 import DropdownMenu from './src/dropdown-menu'
@@ -23,6 +24,7 @@ export default {
   version,
   components: {
     Alert,
+    CollapseItem,
     Drawer,
     Dropdown,
     DropdownMenu,
diff --git a/packages/design/aurora/package.json b/packages/design/aurora/package.json
index 5b9bf8c514..32299c5c7c 100644
--- a/packages/design/aurora/package.json
+++ b/packages/design/aurora/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-aurora",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "main": "index.ts",
   "sideEffects": false,
   "type": "module",
diff --git a/packages/design/aurora/src/collapse-item/index.ts b/packages/design/aurora/src/collapse-item/index.ts
new file mode 100644
index 0000000000..b4e94789e2
--- /dev/null
+++ b/packages/design/aurora/src/collapse-item/index.ts
@@ -0,0 +1,7 @@
+import { iconArrowBottom } from '@opentiny/vue-icon'
+
+export default {
+  icons: {
+    arrowIcon: iconArrowBottom()
+  }
+}
diff --git a/packages/design/aurora/src/select/index.ts b/packages/design/aurora/src/select/index.ts
index 876ddc7535..56d6e943bc 100644
--- a/packages/design/aurora/src/select/index.ts
+++ b/packages/design/aurora/src/select/index.ts
@@ -31,7 +31,7 @@ export default {
         let size = 'small'
 
         if (~['small', 'mini'].indexOf(state.selectSize)) {
-          size = 'mini'
+          size = state.selectSize
         } else if (~['medium', 'default'].indexOf(state.selectSize)) {
           size = 'default'
         }
@@ -62,7 +62,7 @@ export default {
 
         if (filtered) {
           if (state.filteredSelectCls === 'check' || state.filteredSelectCls === 'halfselect') {
-            value = [...new Set([...state.modelValue, ...enabledValues])]
+            value = Array.from(new Set([...state.modelValue, ...enabledValues]))
           } else {
             value = state.modelValue.filter((val) => !enabledValues.includes(val))
           }
diff --git a/packages/design/saas/index.ts b/packages/design/saas/index.ts
index e69b61de7d..9f9d69046c 100644
--- a/packages/design/saas/index.ts
+++ b/packages/design/saas/index.ts
@@ -1,5 +1,6 @@
 import Alert from './src/alert'
 import Badge from './src/badge'
+import CollapseItem from './src/collapse-item'
 import Drawer from './src/drawer'
 import Dropdown from './src/dropdown'
 import DropdownMenu from './src/dropdown-menu'
@@ -24,6 +25,7 @@ export default {
   components: {
     Alert,
     Badge,
+    CollapseItem,
     Drawer,
     Dropdown,
     DropdownMenu,
diff --git a/packages/design/saas/package.json b/packages/design/saas/package.json
index 4b75da1009..891a3423ec 100644
--- a/packages/design/saas/package.json
+++ b/packages/design/saas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-saas",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "main": "index.ts",
   "sideEffects": false,
   "type": "module",
diff --git a/packages/design/saas/src/collapse-item/index.ts b/packages/design/saas/src/collapse-item/index.ts
new file mode 100644
index 0000000000..b4e94789e2
--- /dev/null
+++ b/packages/design/saas/src/collapse-item/index.ts
@@ -0,0 +1,7 @@
+import { iconArrowBottom } from '@opentiny/vue-icon'
+
+export default {
+  icons: {
+    arrowIcon: iconArrowBottom()
+  }
+}
diff --git a/packages/design/saas/src/select/index.ts b/packages/design/saas/src/select/index.ts
index c056de6766..473fee7ae3 100644
--- a/packages/design/saas/src/select/index.ts
+++ b/packages/design/saas/src/select/index.ts
@@ -14,7 +14,7 @@ export default {
       medium: 32
     },
     spacingHeight: 4,
-    initialInputHeight: 30,
+    initialInputHeight: 28,
     // 显示清除等图标时，不隐藏下拉箭头时
     autoHideDownIcon: false,
     delayBlur: true
@@ -30,7 +30,7 @@ export default {
         let size = 'small'
 
         if (~['small', 'mini'].indexOf(state.selectSize)) {
-          size = 'mini'
+          size = state.selectSize
         } else if (~['medium', 'default'].indexOf(state.selectSize)) {
           size = 'default'
         }
@@ -56,7 +56,7 @@ export default {
 
         if (filtered) {
           if (state.filteredSelectCls === 'check' || state.filteredSelectCls === 'halfselect') {
-            value = [...new Set([...state.modelValue, ...enabledValues])]
+            value = Array.from(new Set([...state.modelValue, ...enabledValues]))
           } else {
             value = state.modelValue.filter((val) => !enabledValues.includes(val))
           }
diff --git a/packages/design/smb/index.ts b/packages/design/smb/index.ts
index c9caeb7002..72b0b81d06 100644
--- a/packages/design/smb/index.ts
+++ b/packages/design/smb/index.ts
@@ -6,6 +6,7 @@ import Dropdown from './src/dropdown'
 import DropdownItem from './src/dropdown-item'
 import Form from './src/form'
 import Grid from './src/grid'
+import Guide from './src/guide'
 import Pager from './src/pager'
 import Select from './src/select'
 import TreeNode from './src/tree-node'
@@ -24,6 +25,7 @@ export default {
     DropdownItem,
     Form,
     Grid,
+    Guide,
     Pager,
     Select,
     TreeNode,
diff --git a/packages/design/smb/package.json b/packages/design/smb/package.json
index a7c1f6b5fe..005932b8e3 100644
--- a/packages/design/smb/package.json
+++ b/packages/design/smb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-smb",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "sideEffects": false,
   "type": "module",
   "main": "index.ts",
diff --git a/packages/design/smb/src/guide/index.ts b/packages/design/smb/src/guide/index.ts
new file mode 100644
index 0000000000..c55a96361d
--- /dev/null
+++ b/packages/design/smb/src/guide/index.ts
@@ -0,0 +1,5 @@
+export default {
+  state: {
+    isUseModalOverlay: true
+  }
+}
diff --git a/packages/fluent-editor/.eslintignore b/packages/fluent-editor/.eslintignore
new file mode 100644
index 0000000000..63a06c9893
--- /dev/null
+++ b/packages/fluent-editor/.eslintignore
@@ -0,0 +1,4 @@
+# Common
+node_modules
+dist
+# Examples
\ No newline at end of file
diff --git a/packages/fluent-editor/.eslintrc.js b/packages/fluent-editor/.eslintrc.js
new file mode 100644
index 0000000000..fbc47b2ee0
--- /dev/null
+++ b/packages/fluent-editor/.eslintrc.js
@@ -0,0 +1,38 @@
+module.exports = {
+    parser: 'vue-eslint-parser',
+    parserOptions: {
+      parser: '@typescript-eslint/parser',
+      sourceType: 'module',
+    },
+    env: {
+      browser: true,
+      node: true,
+    },
+    plugins: ['@typescript-eslint'],
+    extends: [
+      'plugin:@typescript-eslint/recommended',
+      'plugin:vue/vue3-recommended',
+    ],
+    rules: {
+      // js/ts
+      'eol-last': 'error',
+      'no-trailing-spaces': 'error',
+      'comma-style': ['error', 'last'],
+      'comma-dangle': ['error', 'always-multiline'],
+      'no-multi-spaces': 'error',
+      quotes: [
+        'error',
+        'single',
+        { avoidEscape: true, allowTemplateLiterals: true },
+      ],
+      camelcase: ['error', { properties: 'never' }],
+      'object-curly-spacing': ['error', 'always'],
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+    },
+  }
+
+
+
diff --git a/packages/fluent-editor/.gitignore b/packages/fluent-editor/.gitignore
new file mode 100644
index 0000000000..c3c8f47b3d
--- /dev/null
+++ b/packages/fluent-editor/.gitignore
@@ -0,0 +1,6 @@
+dist/
+node_modules/
+
+# lock file
+package-lock.json
+yarn.lock
diff --git a/packages/fluent-editor/.prettierignore b/packages/fluent-editor/.prettierignore
new file mode 100644
index 0000000000..8648f4d40e
--- /dev/null
+++ b/packages/fluent-editor/.prettierignore
@@ -0,0 +1,5 @@
+__snapshots__
+coverage
+tsconfig.json
+dist
+node_modules
\ No newline at end of file
diff --git a/packages/fluent-editor/.prettierrc b/packages/fluent-editor/.prettierrc
new file mode 100644
index 0000000000..e5960d8124
--- /dev/null
+++ b/packages/fluent-editor/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "endOfLine": "lf",
+  "arrowParens": "avoid"
+}
+
+
+
+
diff --git a/packages/fluent-editor/README.md b/packages/fluent-editor/README.md
new file mode 100644
index 0000000000..f59fab6c89
--- /dev/null
+++ b/packages/fluent-editor/README.md
@@ -0,0 +1,53 @@
+# FluentEditor 富文本编辑器
+
+FluentEditor 是一个基于 Quill 2.0 的富文本编辑器，在 Quill 基础上扩展了表格、图片、超链接、复制粘贴、插入表情、文件上传、@提醒、斜杆菜单等丰富的模块和格式，框架无关、兼容 Quill API、兼容 Quill 模块生态。
+
+## 项目优势
+
+FluentEditor 主要有以下特点和优势：
+
+* 包含30多种丰富的模块和格式，除了 Quill 内置的21种格式之外，还扩展和增强了表格、图片、超链接、字数统计、表情、文件上传、复制粘贴、@提醒、斜杆快捷菜单、截图等15种模块和格式
+* 强大的表格功能，支持在工具栏插入指定行列的表格、表格行高/列宽拖拽、插入行/列、删除行/列、合并/拆分单元格等丰富的表格操作
+* 与框架无关，可以在 Vue、React、Angular 等多种框架中使用
+* 兼容 Quill 所有 API，兼容 Quill 生态模块和格式
+
+## 快速入门
+
+安装 FluentEditor：
+
+```shell
+npm i @opentiny/fluent-editor
+```
+
+编写html：
+
+```html
+<div id="editor">
+  <p>Hello FluentEditor!</p>
+</div>
+```
+
+引入样式：
+
+```css
+@import '@opentiny/fluent-editor/dist/style.css'
+```
+
+初始化 FluentEditor 编辑器：
+
+```javascript
+import FluentEditor from '@opentiny/fluent-editor'
+
+const editor = new FluentEditor('#editor', {
+  theme: 'snow'
+})
+```
+
+## ❤️ 致谢
+
+感谢：
+
+- [quill](https://github.com/slab/quill) 项目，它是一款API驱动的富文本编辑器，采用模块化架构，可扩展性好，易于使用，支持跨平台，FluentEditor 基于 Quill 扩展和增强了表格、图片、超链接等大量模块和格式。
+- [quill-better-table](https://github.com/soccerloway/quill-better-table) 项目，它增强了 Quill 内置表格模块，增加了丰富的功能，FluentEditor 的表格操作功能基于 quill-better-table。
+- [quill-emoji](https://github.com/contentco/quill-emoji) 项目，它是一个用于表情符号的 Quill 模块，FluentEditor 的插入表情功能基于 quill-emoji。
+- [quill-blot-formatter](https://github.com/Fandom-OSS/quill-blot-formatter) 项目，它是一个用于调整图像和视频大小的 Quill 模块，FluentEditor 的图片缩放功能基于 quill-blot-formatter。
diff --git a/packages/fluent-editor/VersionSet.xml b/packages/fluent-editor/VersionSet.xml
new file mode 100644
index 0000000000..4ba8653f49
--- /dev/null
+++ b/packages/fluent-editor/VersionSet.xml
@@ -0,0 +1 @@
+<version_set type="microService"></version_set>
\ No newline at end of file
diff --git a/packages/fluent-editor/app_define.json b/packages/fluent-editor/app_define.json
new file mode 100644
index 0000000000..95e768de56
--- /dev/null
+++ b/packages/fluent-editor/app_define.json
@@ -0,0 +1 @@
+{"fileVersion":"1","name":"TestEditor","serviceId":"ae87f392581b41dcb3ab7d87c3de2423","description":"","version":"1.0.0","type":"microService","processes":{"TestEditor":{"subscribes":[]}}}
\ No newline at end of file
diff --git a/packages/fluent-editor/index.html b/packages/fluent-editor/index.html
new file mode 100644
index 0000000000..5c086cabd3
--- /dev/null
+++ b/packages/fluent-editor/index.html
@@ -0,0 +1,753 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FluentEditor Demo</title>
+  </head>
+  <body>
+    <link href="./dist/style.css" rel="stylesheet" />
+    <button id="toggle-editor">销毁/生成组件</button>
+    <!-- Create the editor container -->
+    
+    <script type="module">
+      import FluentEditor from '/dist/index.es.js'
+      const SizeStyle = FluentEditor.imports['formats/size'] // 文字大小
+      const FontClass = FluentEditor.imports['formats/font'] // 文字字体
+      const lineheight = FluentEditor.imports['formats/lineheight'] //  行高
+      const CustomImageSpec = FluentEditor.imports['modules/image-spec']
+      const Range = FluentEditor.imports['core/selection/range'];
+      const BetterTable = FluentEditor.imports['modules/better-table']
+      const Delta = FluentEditor.imports['delta']
+      // 上传：图片、视频和文件
+      const { DEFAULTS: UploaderDfls } = FluentEditor.imports['modules/uploader']
+      UploaderDfls.enableMultiUpload = { file: true, image: false }
+      UploaderDfls.handler = (range, files, fileFlags, rejectFlags) => {
+        const fileArr = []
+        const imgArr = []
+        files.forEach((file, index) =>
+          fileFlags[index] ? fileArr.push(file) : imgArr.push(file),
+        )
+        if (modules.file && (fileArr.length || rejectFlags.file)) {
+          handleUploadFile(range, fileArr, rejectFlags.file)
+        }
+        if (imgArr.length || rejectFlags.image) {
+          handleUploadImage(
+            range,
+            { file: imgArr[0], files: imgArr },
+            rejectFlags.image,
+          )
+        }
+      }
+
+      const popoverComponentRef = []
+      const mentionObj = {
+        data: [
+          {
+            name: 'Jack',
+            age: 26,
+            cn: 'Jack杰克',
+          },
+          {
+            name: 'Lucy',
+            age: 22,
+            cn: 'Lucy露西',
+          },
+        ],
+        searchKey: 'name',
+      }
+      const container = [
+        ['undo', 'redo', 'clean'],
+        [
+          { font: FontClass.whitelist },
+          { size: SizeStyle.whitelist },
+          { lineheight: lineheight.whitelist },
+          { header: [1, 2, 3, 4, 5, 6, false] },
+        ],
+        ['bold', 'italic', 'underline', 'strike'],
+        ['blockquote', 'code-block'],
+        [{ header: 1 }, { header: 2 }],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{ script: 'sub' }, { script: 'super' }],
+        [{ indent: '-1' }, { indent: '+1' }],
+        [{ direction: 'rtl' }],
+        [{ color: [] }, { background: [] }],
+        [{ align: [] }],
+        ['link', 'image', 'video', 'file'],
+        ['better-table'],
+        ['fullscreen']
+      ]
+      const modules = {
+        file: true, // 上传文件需开启
+        image: {
+          specs: [CustomImageSpec],
+        },
+        // counter: true,    // 字符计数器，两种配置方式都可以
+        counter: {
+          format: 'html',
+          count: 102400, // 默认500
+          errorTemplate:
+            '<span style="color:red">字数不能超过102400个字符</span>',
+        },
+        toolbar: {
+          container,
+          handlers: {
+            undo: function () {
+              // 如果当前有表格被激活则清除表格工具条
+              const betterTableModule = EDITOR.getModule('better-table')
+              if (betterTableModule.table) {
+                betterTableModule.hideTableTools()
+              }
+              EDITOR.history.undo()
+            },
+            redo: function () {
+              // 如果当前有表格被激活则清除表格工具条
+              const betterTableModule = EDITOR.getModule('better-table')
+              if (betterTableModule.table) {
+                betterTableModule.hideTableTools()
+              }
+              EDITOR.history.redo()
+            },
+            lineheight: function (value) {
+              EDITOR.format('lineheight', value, FluentEditor.sources.USER)
+            },
+            file: function () {
+              const option = EDITOR.options.uploadOption
+              const accept = option && option.fileAccept
+              inputFile.call(this, 'file', accept)
+            },
+            image: function () {
+              const option = EDITOR.options.uploadOption
+              const accept = option && option.imageAccept
+              inputFile.call(this, 'image', accept)
+            },
+            link: function (value) {
+              const range = this.quill.getSelection();
+              const { tooltip } = this.quill.theme;
+
+              const insertDefaultLink = () => {
+                const linkPlaceholder = '链接';
+                this.quill.insertText(range.index, linkPlaceholder, FluentEditor.sources.USER);
+                this.quill.setSelection(range.index, linkPlaceholder.length, FluentEditor.sources.USER);
+
+                const newRange = this.quill.getSelection();
+                if (newRange) {
+                  // 初次生成blot时，如果值为空，不会走blot的create()方法
+                  this.quill.formatText(newRange, 'link', ' ', FluentEditor.sources.USER);
+                  this.quill.formatText(newRange, 'link', '', FluentEditor.sources.USER);
+                  tooltip.edit('link', '', newRange);
+                }
+              };
+
+              if (value) {
+                if (isNullOrUndefined(range) || range.length === 0) {
+                  // 直接插入超链接
+                  insertDefaultLink();
+                } else {
+                  // 选中文本插入超链接
+                  this.quill.formatText(range, 'link', ' ', Emitter.sources.USER);
+                  this.quill.formatText(range, 'link', '', Emitter.sources.USER);
+                  tooltip.edit('link', '', range);
+                }
+              } else {
+                const [link, offset] = this.quill.scroll.descendant(LinkBlot, range.index);
+                if (isNullOrUndefined(link)) {
+                  // 在超链接后面插入超链接
+                  insertDefaultLink();
+                } else {
+                  // 取消超链接
+                  const fullRange = new Range(range.index - offset, link.length());
+                  this.quill.formatText(fullRange, 'link', false, FluentEditor.sources.USER);
+                  }
+                }
+              },
+            'better-table': function() {
+              insertTableHandler()
+            },
+            fullscreen: function() {
+              fullscreenHandler()
+            }
+          },
+        },
+        'better-table': {
+          operationMenu: {
+            items: {
+              copyCells: {
+                text: '复制',
+              },
+              copyTable: {
+                text: '复制表格',
+              },
+              emptyCells: {
+                text: '清空内容',
+              },
+              insertRowUp: {
+                text: '上插入行',
+              },
+              insertRowDown: {
+                text: '下插入行',
+              },
+              insertColumnLeft: {
+                text: '左插入列',
+              },
+              insertColumnRight: {
+                text: '右插入列',
+              },
+              mergeCells: {
+                text: '合并单元格',
+              },
+              unmergeCells: {
+                text: '拆分单元格',
+              },
+              deleteRow: {
+                text: '删除当前行',
+              },
+              deleteColumn: {
+                text: '删除当前列',
+              },
+              deleteTable: {
+                text: '删除表格',
+              },
+            },
+            color: true,
+          },
+        },
+        mention: {
+          search: async term => {
+            const { data, searchKey } = mentionObj
+            try {
+              return data.filter(d => {
+                return d[searchKey] && String(d[searchKey]).includes(term)
+              })
+            } catch (e) {
+              console.warn(e)
+              return []
+            }
+          },
+        },
+        keyboard: {
+          bindings: {
+            ...BetterTable.keyboardBindings,
+            'list autofill': {
+              key: ' ',
+              shiftKey: null,
+              collapsed: true,
+              format: {
+                list: false,
+                'code-block': false,
+                blockquote: false,
+                header: false,
+                table: true,
+              },
+              prefix: /^\s*?(\d+\.|-|\*|\[ ?\]|\[x\])$/,
+              handler(range, context) {
+                const formats = EDITOR.getFormat(range)
+                if (formats['table-cell-line']) {
+                  return true
+                }
+                if (isNullOrUndefined(EDITOR.scroll.query('list'))) {
+                  return true
+                }
+                const { length } = context.prefix
+                const [line, offset] = EDITOR.getLine(range.index)
+                if (offset > length) {
+                  return true
+                }
+                let value
+                switch (context.prefix.trim()) {
+                  case '[]':
+                  case '[ ]':
+                    value = 'unchecked'
+                    break
+                  case '[x]':
+                    value = 'checked'
+                    break
+                  case '-':
+                  case '*':
+                    value = 'bullet'
+                    break
+                  default:
+                    value = 'ordered'
+                }
+                EDITOR.insertText(range.index, ' ', FluentEditor.sources.USER)
+                EDITOR.history.cutoff()
+                const delta = new Delta()
+                  .retain(range.index - offset)
+                  .delete(length + 1)
+                  .retain(line.length() - 2 - offset)
+                  .retain(1, { list: { value: value } })
+                EDITOR.updateContents(delta, FluentEditor.sources.USER)
+                EDITOR.history.cutoff()
+                EDITOR.setSelection(
+                  range.index - length,
+                  FluentEditor.sources.SILENT,
+                )
+                return false
+              },
+            },
+            // fix:在list的offset为0时（即只在最左侧触发）加键盘事件，使其跳过contenteditable=false的span进行移动
+            'list ignoreRight': {
+              key: 'ArrowRight',
+              shiftKey: null,
+              format: ['list'],
+              collapsed: true,
+              offset: 0,
+              handler(range) {
+                EDITOR.setSelection(
+                  range.index + 1,
+                  FluentEditor.sources.SILENT,
+                )
+              },
+            },
+            'list ignoreLeft': {
+              key: 'ArrowLeft',
+              shiftKey: null,
+              format: ['list'],
+              collapsed: true,
+              offset: 0,
+              handler(range) {
+                EDITOR.setSelection(
+                  range.index - 1,
+                  FluentEditor.sources.SILENT,
+                )
+              },
+            },
+            'list softBreak': {
+              key: 'Enter',
+              format: ['list'],
+              shiftKey: true,
+              collapsed: true,
+              handler(range) {
+                const [line, offset] = EDITOR.getLine(range.index)
+                const length = line.length()
+                // li的末尾不能添加软回车
+                if (length > offset + 1) {
+                  EDITOR.insertEmbed(
+                    range.index,
+                    'soft-break',
+                    true,
+                    FluentEditor.sources.USER,
+                  )
+                }
+              },
+            },
+          },
+        },
+      }
+
+      var tableModule = null
+      var insertButton
+      var insertTableHandler
+      var EDITOR = null;
+      var div = null;
+      var fullscreenButton
+      var fullscreenHandler
+      var isFullscreen = false
+      document.addEventListener('fullscreenchange', (event) => { 
+        isFullscreen = !isFullscreen
+      });
+      document.querySelector('#toggle-editor').addEventListener('click', function() {  
+        div = document.querySelector('.editor');
+        if (div) {
+          EDITOR.root.removeEventListener('compositionstart', handleCompositionstart, false)
+          EDITOR.root.removeEventListener('compositionend', handleCompositionend, false);
+          div.remove();
+          if(insertButton){
+            insertButton.removeEventListener('click', insertTableHandler)
+            insertButton.remove()
+            insertTableHandler = null
+          }
+          if(fullscreenButton){
+            fullscreenButton.removeEventListener('click', fullscreenHandler)
+            fullscreenButton.remove()
+            fullscreenButton = null
+          }
+          div = null;
+          EDITOR = null;
+        }
+        else {    
+          div = document.createElement('div');
+          
+          div.classList.add('editor');
+          
+          var childDiv = document.createElement('div');
+          
+          div.appendChild(childDiv);
+          
+          document.body.appendChild(div);
+
+          EDITOR = new FluentEditor('.editor div', {
+            modules,
+            placeholder: 'Compose an epic...',
+            theme: 'snow',  // or 'bubble'
+            // 上传：图片、视频和文件,相关配置
+            uploadOption: {
+              fileAccept: '.mp4,.xls,.doc,.docx,.ppt,.pptx',
+              imageAccept: '.gif,.png,.tiff,image/jpeg',
+              isVideoPlay: true,
+              imageUploadToServer: false, // 是否需要上传到服务器
+            },
+          });
+          EDITOR.root.addEventListener('compositionstart', handleCompositionstart, false)
+          EDITOR.root.addEventListener('compositionend', handleCompositionend, false);
+          insertButton = document.querySelector('.ql-better-table')
+          fullscreenButton = document.querySelector('.ql-fullscreen');
+          insertTableHandler = function (row = 3, col = 3) {
+            tableModule.insertTable(row, col)
+          }
+          fullscreenHandler = function() {
+            // 此方案有问题：点击上传文件或图片，浏览器自动退出全屏
+            // 改用样式实现全屏，由UI层做适配
+            isFullscreen
+            ? document.exitFullscreen()
+            : document.getElementsByClassName('editor')[0].requestFullscreen();
+          }
+          tableModule = EDITOR.getModule('better-table')
+        }
+      });
+
+      // 开始输入中文
+      function handleCompositionstart() {
+        EDITOR.root.classList.remove('ql-blank');
+      }
+      // 
+      function handleCompositionend(event) {
+        // fix: 修复中文输入时无法判断编辑器内容是否为空
+        if (EDITOR.editor.isBlank()) {
+          if(EDITOR.getLength() > 0 && event.data.length > 0 ) {
+            let data = event.data
+            EDITOR.setContents([
+              { insert: data }
+            ]);
+            EDITOR.setSelection(data.length);
+            EDITOR.root.classList.remove('ql-blank');
+          } else {
+            EDITOR.root.classList.add('ql-blank');
+          }
+        } else {
+          EDITOR.root.classList.remove('ql-blank');
+        }
+        EDITOR.insertText
+        // fix: 修复 mention 后输入中文，光标无法定位至输入的文字最后
+        const range = EDITOR.getSelection();
+        const [mentionItem, offset] = EDITOR.getLeaf(range.index);
+        if (mentionItem.statics.blotName === 'mention' && offset === 1) {
+          setTimeout(() => {
+            const [textItem] = EDITOR.getLeaf(range.index + 1);
+            if (textItem && textItem.text) {
+              EDITOR.setSelection(range.index + textItem.length());
+            }
+          });
+        }
+      }
+    
+      // 触发上传
+      function inputFile(type, accept) {
+        const defaultMIMETypes = EDITOR.uploader.options[type].join(', ')
+        const mimeTypes = accept || defaultMIMETypes
+        let fileInput = this.container.querySelector(
+          `input.ql-${type}[type=file]`,
+        )
+        if (isNullOrUndefined(fileInput)) {
+          fileInput = document.createElement('input')
+          fileInput.classList.add(`ql-${type}`)
+          fileInput.setAttribute('type', 'file')
+          fileInput.setAttribute('style','display:none');
+          fileInput.setAttribute('accept', mimeTypes)
+          if (
+            UploaderDfls.enableMultiUpload === true ||
+            (UploaderDfls.enableMultiUpload['file'] && type === 'file') ||
+            (UploaderDfls.enableMultiUpload['image'] && type === 'image')
+          ) {
+            fileInput.setAttribute('multiple', '')
+          }
+          fileInput.addEventListener('change', () => {
+            const range = EDITOR.getSelection(true)
+            EDITOR.uploader.upload(range, fileInput.files, type === 'file')
+            fileInput.value = ''
+          })
+          this.container.appendChild(fileInput)
+        }
+        fileInput.click()
+      }
+
+      function isNullOrUndefined(param) {
+        return param === null || param === undefined
+      }
+
+      // 处理上传图片
+      function handleUploadImage(range, { file, files }, hasRejectedImage) {
+
+        if (EDITOR.options.uploadOption.imageUploadToServer) {
+          const imageEnableMultiUpload = UploaderDfls.enableMultiUpload === true 
+            || UploaderDfls.enableMultiUpload['image']
+          const target = document.querySelector('.ql-image')
+          if (files.length) {
+            // showUploadingTips('image', target)
+            console.log('showUploadingTips')
+          }
+          const result = {
+            file,
+            data: { files: [file] },
+            hasRejectedImage: hasRejectedImage,
+            callback: res => {
+              // closeUploadingTips('image')
+              console.log('closeUploadingTips')
+              if (!res) {
+                return
+              }
+              if (imageEnableMultiUpload && Array.isArray(res)) {
+                res.forEach(value => insertImageToEditor(range, value))
+              } else {
+                insertImageToEditor(range, res)
+              }
+            },
+          }
+          if (imageEnableMultiUpload) {
+            result['data'] = { files }
+          }
+          uploadImageToSev(result)
+        } else {
+          const promises = files.map(fileItem => {
+            return new Promise(resolve => {
+              const reader = new FileReader()
+              reader.onload = e => {
+                resolve(e.target.result)
+              }
+              reader.readAsDataURL(fileItem)
+            })
+          })
+          Promise.all(promises).then(images => {
+            const update = images.reduce((delta, image) => {
+              return delta.insert({ image })
+            }, new Delta().retain(range.index).delete(range.length))
+
+            EDITOR.updateContents(update, FluentEditor.sources.USER)
+            EDITOR.setSelection(
+              range.index + images.length,
+              FluentEditor.sources.SILENT,
+            )
+          })
+        }
+      }
+
+      // 处理上传文件
+      function handleUploadFile(range, files, hasRejectedFile) {
+        const fileEnableMultiUpload =
+          UploaderDfls.enableMultiUpload === true 
+          || UploaderDfls.enableMultiUpload['file']
+        const target = document.querySelector('.ql-file')
+        if (files.length) {
+          // showUploadingTips('files', target)
+          console.log('showUploadingTips')
+        }
+        fileOperationToSev({
+          operation: 'upload',
+          data: fileEnableMultiUpload ? { files } : { file: files[0] },
+          hasRejectedFile: hasRejectedFile,
+          callback: res => {
+            // this.closeUploadingTips('file')
+            console.log('closeUploadingTips')
+            if (!res) {
+              return
+            }
+            console.log('fileEnableMultiUpload')
+            console.log(fileEnableMultiUpload)
+            if (fileEnableMultiUpload && Array.isArray(res)) {
+              res.forEach((value, index) =>
+                insertFileToEditor(range, files[index], value),
+              )
+            } else {
+              insertFileToEditor(range, files[0], res)
+            }
+          },
+        })
+      }
+
+      // 图片上传到服务器，需要将示例中的上传接口替换成真实的后台接口才能正确运行。
+      function uploadImageToSev(event) {
+        const {
+          file,
+          hasRejectedImage,
+          data: { files},
+          callback,
+        } = event
+        if (hasRejectedImage) {
+          this.msgs = [
+            {
+              severity: 'error',
+              summary: '上传图片失败',
+              detail: `只支持上传以下类型：\n${EDITOR.options.uploadOption.imageAccept}`,
+            },
+          ]
+        }
+        if (file || files) {
+          /* 使用时取消注释,填写您的上传接口 */
+          /* setTimeout用于模拟接口延迟，演示上传提示，使用时请移除 */
+          // const formData = new FormData()
+          // formData.append('file', file)
+          // this.http.post('url/to/your/api', formData).subscribe(res => {
+          let res
+          const imageUrl = './src/assets/image1.png' /* 后台返回的图片URL */
+          if (UploaderDfls.enableMultiUpload.image) {
+            res = files.map(fileItem => {
+              return {
+                code: 0,
+                message: 'Upload image successfully!',
+                data: { imageId: 100, imageUrl },
+              }
+            })
+          } else {
+            res = {
+              code: 0,
+              message: 'Upload image successfully!',
+              data: { imageId: 100, imageUrl },
+            }
+          }
+          setTimeout(() => callback(res), 500)
+          // })
+        }
+      }
+
+      // 文件上传到服务器，需要将示例中的上传接口替换成真实的后台接口才能正确运行。
+      function fileOperationToSev(event) {
+        const {
+          operation,
+          hasRejectedFile,
+          data: { fileId, file, files, fileDownloadUrl },
+          callback,
+        } = event
+        switch (operation) {
+          case 'upload':
+            if (hasRejectedFile) {
+              this.msgs = [
+                {
+                  severity: 'error',
+                  summary: '上传文件失败',
+                  detail: `只支持上传以下类型：\n${EDITOR.options.uploadOption.fileAccept}`,
+                },
+              ]
+            }
+            if (file || files) {
+              /* 使用时取消注释,填写您的上传接口 */
+              /* setTimeout用于模拟接口延迟，演示上传提示，使用时请移除 */
+              /* const formData = new FormData();
+          formData.append('file', file);
+          this.http.post('url/to/your/api', formData)
+            .subscribe(res => { */
+              let res
+              if (UploaderDfls.enableMultiUpload.file) {
+                res = files.map(fileItem => {
+                  return {
+                    code: 0,
+                    message: 'Upload file successfully!',
+                    data: {
+                      id: 'faf40644468b497d90cbaf4304c39e1a',
+                      title: fileItem.name,
+                      size: fileItem.size,
+                      lastModified: fileItem.lastModified,
+                      src: 'http://www.baidu.com',
+                    },
+                  }
+                })
+              } else {
+                res = {
+                  code: 0,
+                  message: 'Upload file successfully!',
+                  data: {
+                    id: 'faf40644468b497d90cbaf4304c39e1a',
+                    title: file.name,
+                    size: file.size,
+                    lastModified: file.lastModified,
+                    src: '已上传视频地址',
+                  },
+                }
+              }
+              setTimeout(() => callback(res), 500)
+              /* }); */
+            }
+            break
+          case 'download':
+            console.log('download file：' + fileId)
+            break
+          case 'delete':
+            this.http.post(fileDownloadUrl, { id: fileId })
+            break
+        }
+      }
+
+      // 将图片插入编辑器
+      function insertImageToEditor(range, { code, message, data }) {
+        if (code === 0) {
+          const { imageId, imageUrl } = data
+          // 粘贴截图或者从外源直接拷贝的单图时，需要将编辑器中已选中的内容删除
+          const oldContent = new Delta()
+            .retain(range.index)
+            .delete(range.length)
+          const currentContent = new Delta([
+            {
+              insert: { image: imageUrl },
+              attributes: { 'image-id': imageId },
+            },
+          ])
+          const newContent = oldContent.concat(currentContent)
+          EDITOR.updateContents(newContent, FluentEditor.sources.USER)
+        } else {
+          console.error('error message:', message)
+        }
+      }
+
+      // 将文件插入编辑器
+      function insertFileToEditor(range, file, { code, message, data }) {
+        if (code === 0) {
+          const oldContent = new Delta()
+            .retain(range.index)
+            .delete(range.length)
+          const videoFlag =
+            EDITOR.options.uploadOption &&
+            EDITOR.options.uploadOption.isVideoPlay &&
+            /^video\/[-\w.]+$/.test(file.type)
+          const insertObj = videoFlag ? { video: data } : { file: data }
+          const currentContent = new Delta([{ insert: insertObj }])
+          const newContent = oldContent.concat(currentContent)
+          EDITOR.updateContents(newContent, FluentEditor.sources.USER)
+        } else {
+          console.error('error message:', message)
+        }
+      }
+
+      function onPaste({ files, callback }) {
+        const _this = this
+        function uploadImage(file) {
+          return new Promise((resolve, reject) => {
+            const formData = new FormData()
+            formData.append('file', file)
+            _this.http.post('url/to/your/api', formData).subscribe(res => {
+              const imageUrl = 'url/image.png' /* 后台返回的图片URL */
+              resolve(imageUrl)
+            })
+          })
+        }
+
+        ;(async () => {
+          try {
+            const imageUrls = []
+            for (let i = 0; i < files.length; i++) {
+              imageUrls.push(await uploadImage(files[i]))
+            }
+            callback({
+              code: 0,
+              message: 'Upload all images successfully!',
+              data: {
+                imageUrls: imageUrls,
+              },
+            })
+          } catch (e) {
+            throw new Error('Upload failed.')
+          }
+        })()
+      }
+
+    </script>
+  </body>
+</html>
diff --git a/packages/fluent-editor/jest.config.js b/packages/fluent-editor/jest.config.js
new file mode 100644
index 0000000000..2299f1c7dc
--- /dev/null
+++ b/packages/fluent-editor/jest.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.vue$': 'vue-jest'
+  },
+  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
+};
diff --git a/packages/fluent-editor/origin.html b/packages/fluent-editor/origin.html
new file mode 100644
index 0000000000..28fcc9bc72
--- /dev/null
+++ b/packages/fluent-editor/origin.html
@@ -0,0 +1,710 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FluentEditor Demo</title>
+  </head>
+  <body>
+    <link href="./dist/style.css" rel="stylesheet" />
+
+    <!-- Create the editor container -->
+    <div id="editor">
+      <p>Hello World!</p>
+      <p>富文本编辑器</p>
+    </div>
+
+    <script type="module">
+      import FluentEditor from '/dist/index.es.js'
+
+      // console.log('FluentEditor:', FluentEditor.imports)
+
+      const SizeStyle = FluentEditor.imports['formats/size'] // 文字大小
+      const FontClass = FluentEditor.imports['formats/font'] // 文字字体
+      const lineheight = FluentEditor.imports['formats/lineheight'] //  行高
+      const Range = FluentEditor.imports['core/selection/range'];
+
+      // 工具栏显示的按钮总览
+      const container = [
+        ['undo', 'redo', 'clean'],
+        [
+          { font: FontClass.whitelist },
+          { size: SizeStyle.whitelist },
+          { lineheight: lineheight.whitelist },
+          { header: [1, 2, 3, 4, 5, 6, false] },
+        ],
+        ['bold', 'italic', 'underline', 'strike'],
+        ['blockquote', 'code-block'],
+        [{ header: 1 }, { header: 2 }],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{ script: 'sub' }, { script: 'super' }],
+        [{ indent: '-1' }, { indent: '+1' }],
+        [{ direction: 'rtl' }],
+        [{ color: [] }, { background: [] }],
+        [{ align: [] }],
+        ['link', 'image', 'video', 'file'],
+        ['better-table'],
+      ]
+
+      // @提醒
+      const mentionObj = {
+        data: [
+          {
+            name: 'Jack',
+            age: 26,
+            cn: 'Jack杰克',
+          },
+          {
+            name: 'Lucy',
+            age: 22,
+            cn: 'Lucy露西',
+          },
+        ],
+        searchKey: 'name',
+      }
+
+      // 图片:导入\custom-image\Options.ts DefaultOptions默认参数，也可以自定义对象
+      const CustomImageSpec = FluentEditor.imports['modules/image-spec']
+      // 表格
+      const BetterTable = FluentEditor.imports['modules/better-table']
+
+      const modules = {
+        file: true, // 上传文件需开启
+        image: {
+          specs: [CustomImageSpec],
+        },
+        // counter: true,    // 字符计数器，两种配置方式都可以
+        counter: {
+          format: 'html',
+          count: 102400, // 默认500
+          errorTemplate:
+            '<span style="color:red">字数不能超过102400个字符</span>',
+        },
+        toolbar: {
+          container,
+          handlers: {
+            undo: function () {
+              // 如果当前有表格被激活则清除表格工具条
+              const betterTableModule = EDITOR.getModule('better-table')
+              if (betterTableModule.table) {
+                betterTableModule.hideTableTools()
+              }
+              EDITOR.history.undo()
+            },
+            redo: function () {
+              // 如果当前有表格被激活则清除表格工具条
+              const betterTableModule = EDITOR.getModule('better-table')
+              if (betterTableModule.table) {
+                betterTableModule.hideTableTools()
+              }
+              EDITOR.history.redo()
+            },
+            lineheight: function (value) {
+              EDITOR.format('lineheight', value, FluentEditor.sources.USER)
+            },
+            file: function () {
+              const option = EDITOR.options.uploadOption
+              const accept = option && option.fileAccept
+              inputFile.call(this, 'file', accept)
+            },
+            image: function () {
+              const option = EDITOR.options.uploadOption
+              const accept = option && option.imageAccept
+              inputFile.call(this, 'image', accept)
+            },
+            link: function (value) {
+              const range = this.quill.getSelection();
+              const { tooltip } = this.quill.theme;
+
+              const insertDefaultLink = () => {
+                const linkPlaceholder = '链接';
+                this.quill.insertText(range.index, linkPlaceholder, FluentEditor.sources.USER);
+                this.quill.setSelection(range.index, linkPlaceholder.length, FluentEditor.sources.USER);
+
+                const newRange = this.quill.getSelection();
+                if (newRange) {
+                  // 初次生成blot时，如果值为空，不会走blot的create()方法
+                  this.quill.formatText(newRange, 'link', ' ', FluentEditor.sources.USER);
+                  this.quill.formatText(newRange, 'link', '', FluentEditor.sources.USER);
+                  tooltip.edit('link', '', newRange);
+                }
+              };
+
+              if (value) {
+                if (isNullOrUndefined(range) || range.length === 0) {
+                  // 直接插入超链接
+                  insertDefaultLink();
+                } else {
+                  // 选中文本插入超链接
+                  this.quill.formatText(range, 'link', ' ', Emitter.sources.USER);
+                  this.quill.formatText(range, 'link', '', Emitter.sources.USER);
+                  tooltip.edit('link', '', range);
+                }
+              } else {
+                const [link, offset] = this.quill.scroll.descendant(LinkBlot, range.index);
+                if (isNullOrUndefined(link)) {
+                  // 在超链接后面插入超链接
+                  insertDefaultLink();
+                } else {
+                  // 取消超链接
+                  const fullRange = new Range(range.index - offset, link.length());
+                  this.quill.formatText(fullRange, 'link', false, FluentEditor.sources.USER);
+                  }
+                }
+              },
+            },
+        },
+        'better-table': {
+          operationMenu: {
+            items: {
+              copyCells: {
+                text: '复制',
+              },
+              copyTable: {
+                text: '复制表格',
+              },
+              emptyCells: {
+                text: '清空内容',
+              },
+              insertRowUp: {
+                text: '上插入行',
+              },
+              insertRowDown: {
+                text: '下插入行',
+              },
+              insertColumnLeft: {
+                text: '左插入列',
+              },
+              insertColumnRight: {
+                text: '右插入列',
+              },
+              mergeCells: {
+                text: '合并单元格',
+              },
+              unmergeCells: {
+                text: '拆分单元格',
+              },
+              deleteRow: {
+                text: '删除当前行',
+              },
+              deleteColumn: {
+                text: '删除当前列',
+              },
+              deleteTable: {
+                text: '删除表格',
+              },
+            },
+            color: true,
+          },
+        },
+        mention: {
+          search: async term => {
+            const { data, searchKey } = mentionObj
+            try {
+              return data.filter(d => {
+                return d[searchKey] && String(d[searchKey]).includes(term)
+              })
+            } catch (e) {
+              console.warn(e)
+              return []
+            }
+          },
+        },
+        keyboard: {
+          bindings: {
+            ...BetterTable.keyboardBindings,
+            'list autofill': {
+              key: ' ',
+              shiftKey: null,
+              collapsed: true,
+              format: {
+                list: false,
+                'code-block': false,
+                blockquote: false,
+                header: false,
+                table: true,
+              },
+              prefix: /^\s*?(\d+\.|-|\*|\[ ?\]|\[x\])$/,
+              handler(range, context) {
+                const formats = EDITOR.getFormat(range)
+                if (formats['table-cell-line']) {
+                  return true
+                }
+                if (isNullOrUndefined(EDITOR.scroll.query('list'))) {
+                  return true
+                }
+                const { length } = context.prefix
+                const [line, offset] = EDITOR.getLine(range.index)
+                if (offset > length) {
+                  return true
+                }
+                let value
+                switch (context.prefix.trim()) {
+                  case '[]':
+                  case '[ ]':
+                    value = 'unchecked'
+                    break
+                  case '[x]':
+                    value = 'checked'
+                    break
+                  case '-':
+                  case '*':
+                    value = 'bullet'
+                    break
+                  default:
+                    value = 'ordered'
+                }
+                EDITOR.insertText(range.index, ' ', FluentEditor.sources.USER)
+                EDITOR.history.cutoff()
+                const delta = new Delta()
+                  .retain(range.index - offset)
+                  .delete(length + 1)
+                  .retain(line.length() - 2 - offset)
+                  .retain(1, { list: { value: value } })
+                EDITOR.updateContents(delta, FluentEditor.sources.USER)
+                EDITOR.history.cutoff()
+                EDITOR.setSelection(
+                  range.index - length,
+                  FluentEditor.sources.SILENT,
+                )
+                return false
+              },
+            },
+            // fix:在list的offset为0时（即只在最左侧触发）加键盘事件，使其跳过contenteditable=false的span进行移动
+            'list ignoreRight': {
+              key: 'ArrowRight',
+              shiftKey: null,
+              format: ['list'],
+              collapsed: true,
+              offset: 0,
+              handler(range) {
+                EDITOR.setSelection(
+                  range.index + 1,
+                  FluentEditor.sources.SILENT,
+                )
+              },
+            },
+            'list ignoreLeft': {
+              key: 'ArrowLeft',
+              shiftKey: null,
+              format: ['list'],
+              collapsed: true,
+              offset: 0,
+              handler(range) {
+                EDITOR.setSelection(
+                  range.index - 1,
+                  FluentEditor.sources.SILENT,
+                )
+              },
+            },
+            'list softBreak': {
+              key: 'Enter',
+              format: ['list'],
+              shiftKey: true,
+              collapsed: true,
+              handler(range) {
+                const [line, offset] = EDITOR.getLine(range.index)
+                const length = line.length()
+                // li的末尾不能添加软回车
+                if (length > offset + 1) {
+                  EDITOR.insertEmbed(
+                    range.index,
+                    'soft-break',
+                    true,
+                    FluentEditor.sources.USER,
+                  )
+                }
+              },
+            },
+          },
+        },
+      }
+
+      // 上传：图片、视频和文件
+      const { DEFAULTS: UploaderDfls } = FluentEditor.imports['modules/uploader']
+      UploaderDfls.enableMultiUpload = { file: true, image: false }
+      UploaderDfls.handler = (range, files, fileFlags, rejectFlags) => {
+        const fileArr = []
+        const imgArr = []
+        files.forEach((file, index) =>
+          fileFlags[index] ? fileArr.push(file) : imgArr.push(file),
+        )
+        if (modules.file && (fileArr.length || rejectFlags.file)) {
+          handleUploadFile(range, fileArr, rejectFlags.file)
+        }
+        if (imgArr.length || rejectFlags.image) {
+          handleUploadImage(
+            range,
+            { file: imgArr[0], files: imgArr },
+            rejectFlags.image,
+          )
+        }
+      }
+
+      // 构建一个富文本框的实例，以方便我们的操作
+      var EDITOR = new FluentEditor('#editor', {
+        theme: 'snow',
+        modules,
+        // 上传：图片、视频和文件,相关配置
+        uploadOption: {
+          fileAccept: '.mp4,.xls,.doc,.docx,.ppt,.pptx',
+          imageAccept: '.gif,.png,.tiff,image/jpeg',
+          isVideoPlay: true,
+          imageUploadToServer: false, // 是否需要上传到服务器
+        },
+      })
+
+      // 点击工具栏插入表格 ql-better-table
+      var insertButton = document.querySelector('.ql-better-table')
+      const tableModule = EDITOR.getModule('better-table')
+      EDITOR.emitter.on(
+      'file-change',
+      fileOperationToSev
+    );
+      var insertTableHandler = function (event, row = 3, col = 3) {
+        tableModule.insertTable(row, col)
+      }
+      insertButton.addEventListener('click', insertTableHandler)
+
+      // 上传：图片、视频和文件,相关配置
+      // 触发上传
+      function inputFile(type, accept) {
+        const defaultMIMETypes = EDITOR.uploader.options[type].join(', ')
+        const mimeTypes = accept || defaultMIMETypes
+        let fileInput = this.container.querySelector(
+          `input.ql-${type}[type=file]`,
+        )
+        if (isNullOrUndefined(fileInput)) {
+          fileInput = document.createElement('input')
+          fileInput.classList.add(`ql-${type}`)
+          fileInput.setAttribute('type', 'file')
+          fileInput.setAttribute('style','display:none');
+          fileInput.setAttribute('accept', mimeTypes)
+          if (
+            UploaderDfls.enableMultiUpload === true ||
+            (UploaderDfls.enableMultiUpload['file'] && type === 'file') ||
+            (UploaderDfls.enableMultiUpload['image'] && type === 'image')
+          ) {
+            fileInput.setAttribute('multiple', '')
+          }
+          fileInput.addEventListener('change', () => {
+            const range = EDITOR.getSelection(true)
+            EDITOR.uploader.upload(range, fileInput.files, type === 'file')
+            fileInput.value = ''
+          })
+          this.container.appendChild(fileInput)
+        }
+        fileInput.click()
+      }
+
+      function isNullOrUndefined(param) {
+        return param === null || param === undefined
+      }
+
+      const Delta = FluentEditor.imports['delta']
+      const popoverComponentRef = []
+
+      // 处理上传图片
+      function handleUploadImage(range, { file, files }, hasRejectedImage) {
+
+        if (EDITOR.options.uploadOption.imageUploadToServer) {
+          const imageEnableMultiUpload =
+            UploaderDfls.enableMultiUpload === true ||
+            UploaderDfls.enableMultiUpload['image']
+          const target = document.querySelector('.ql-image')
+          if (files.length) {
+            // showUploadingTips('image', target)
+            console.log('showUploadingTips')
+          }
+          const result = {
+            file,
+            data: { files: [file] },
+            hasRejectedImage: hasRejectedImage,
+            callback: res => {
+              // closeUploadingTips('image')
+              console.log('closeUploadingTips')
+              if (!res) {
+                return
+              }
+              if (imageEnableMultiUpload && Array.isArray(res)) {
+                res.forEach(value => insertImageToEditor(range, value))
+              } else {
+                insertImageToEditor(range, res)
+              }
+            },
+          }
+          if (imageEnableMultiUpload) {
+            result['data'] = { files }
+          }
+          uploadImageToSev(result)
+        } else {
+          const promises = files.map(fileItem => {
+            return new Promise(resolve => {
+              const reader = new FileReader()
+              reader.onload = e => {
+                resolve(e.target.result)
+              }
+              reader.readAsDataURL(fileItem)
+            })
+          })
+          Promise.all(promises).then(images => {
+            const update = images.reduce((delta, image) => {
+              return delta.insert({ image })
+            }, new Delta().retain(range.index).delete(range.length))
+
+            EDITOR.updateContents(update, FluentEditor.sources.USER)
+            EDITOR.setSelection(
+              range.index + images.length,
+              FluentEditor.sources.SILENT,
+            )
+          })
+        }
+      }
+
+      // 处理上传文件
+      function handleUploadFile(range, files, hasRejectedFile) {
+        const fileEnableMultiUpload =
+          UploaderDfls.enableMultiUpload === true ||
+          UploaderDfls.enableMultiUpload['file']
+        const target = document.querySelector('.ql-file')
+        if (files.length) {
+          // showUploadingTips('files', target)
+          console.log('showUploadingTips')
+        }
+        fileOperationToSev({
+          operation: 'upload',
+          data: fileEnableMultiUpload ? { files } : { file: files[0] },
+          hasRejectedFile: hasRejectedFile,
+          callback: res => {
+            // this.closeUploadingTips('file')
+            console.log('closeUploadingTips')
+            if (!res) {
+              return
+            }
+            console.log('fileEnableMultiUpload')
+            console.log(fileEnableMultiUpload)
+            if (fileEnableMultiUpload && Array.isArray(res)) {
+              res.forEach((value, index) =>
+                insertFileToEditor(range, files[index], value),
+              )
+            } else {
+              insertFileToEditor(range, files[0], res)
+            }
+          },
+        })
+      }
+
+      // 图片上传到服务器，需要将示例中的上传接口替换成真实的后台接口才能正确运行。
+      function uploadImageToSev(event) {
+        const {
+          file,
+          hasRejectedImage,
+          data: { files},
+          callback,
+        } = event
+        if (hasRejectedImage) {
+          this.msgs = [
+            {
+              severity: 'error',
+              summary: '上传图片失败',
+              detail: `只支持上传以下类型：\n${EDITOR.options.uploadOption.imageAccept}`,
+            },
+          ]
+        }
+        if (file || files) {
+          /* 使用时取消注释,填写您的上传接口 */
+          /* setTimeout用于模拟接口延迟，演示上传提示，使用时请移除 */
+          // const formData = new FormData()
+          // formData.append('file', file)
+          // this.http.post('url/to/your/api', formData).subscribe(res => {
+          let res
+          const imageUrl = './src/assets/image1.png' /* 后台返回的图片URL */
+          if (UploaderDfls.enableMultiUpload.image) {
+            res = files.map(fileItem => {
+              return {
+                code: 0,
+                message: 'Upload image successfully!',
+                data: { imageId: 100, imageUrl },
+              }
+            })
+          } else {
+            res = {
+              code: 0,
+              message: 'Upload image successfully!',
+              data: { imageId: 100, imageUrl },
+            }
+          }
+          setTimeout(() => callback(res), 500)
+          // })
+        }
+      }
+
+      // 文件上传到服务器，需要将示例中的上传接口替换成真实的后台接口才能正确运行。
+      function fileOperationToSev(event) {
+        const {
+          operation,
+          hasRejectedFile,
+          data: { fileId, file, files, fileDownloadUrl },
+          callback,
+        } = event
+        switch (operation) {
+          case 'upload':
+            if (hasRejectedFile) {
+              this.msgs = [
+                {
+                  severity: 'error',
+                  summary: '上传文件失败',
+                  detail: `只支持上传以下类型：\n${EDITOR.options.uploadOption.fileAccept}`,
+                },
+              ]
+            }
+            if (file || files) {
+              /* 使用时取消注释,填写您的上传接口 */
+              /* setTimeout用于模拟接口延迟，演示上传提示，使用时请移除 */
+              /* const formData = new FormData();
+          formData.append('file', file);
+          this.http.post('url/to/your/api', formData)
+            .subscribe(res => { */
+              let res
+              if (UploaderDfls.enableMultiUpload.file) {
+                res = files.map(fileItem => {
+                  return {
+                    code: 0,
+                    message: 'Upload file successfully!',
+                    data: {
+                      id: 'faf40644468b497d90cbaf4304c39e1a',
+                      title: fileItem.name,
+                      size: fileItem.size,
+                      lastModified: fileItem.lastModified,
+                      src: 'http://www.baidu.com',
+                    },
+                  }
+                })
+              } else {
+                res = {
+                  code: 0,
+                  message: 'Upload file successfully!',
+                  data: {
+                    id: 'faf40644468b497d90cbaf4304c39e1a',
+                    title: file.name,
+                    size: file.size,
+                    lastModified: file.lastModified,
+                    src: '已上传视频地址',
+                  },
+                }
+              }
+              setTimeout(() => callback(res), 500)
+              /* }); */
+            }
+            break
+          case 'download':
+            console.log('download file：' + fileId)
+            break
+          case 'delete':
+            this.http.post(fileDownloadUrl, { id: fileId })
+            break
+        }
+      }
+
+      // 将图片插入编辑器
+      function insertImageToEditor(range, { code, message, data }) {
+        if (code === 0) {
+          const { imageId, imageUrl } = data
+          // 粘贴截图或者从外源直接拷贝的单图时，需要将编辑器中已选中的内容删除
+          const oldContent = new Delta()
+            .retain(range.index)
+            .delete(range.length)
+          const currentContent = new Delta([
+            {
+              insert: { image: imageUrl },
+              attributes: { 'image-id': imageId },
+            },
+          ])
+          const newContent = oldContent.concat(currentContent)
+          EDITOR.updateContents(newContent, FluentEditor.sources.USER)
+        } else {
+          console.error('error message:', message)
+        }
+      }
+
+      // 将文件插入编辑器
+      function insertFileToEditor(range, file, { code, message, data }) {
+        if (code === 0) {
+          const oldContent = new Delta()
+            .retain(range.index)
+            .delete(range.length)
+          const videoFlag =
+            EDITOR.options.uploadOption &&
+            EDITOR.options.uploadOption.isVideoPlay &&
+            /^video\/[-\w.]+$/.test(file.type)
+          const insertObj = videoFlag ? { video: data } : { file: data }
+          const currentContent = new Delta([{ insert: insertObj }])
+          const newContent = oldContent.concat(currentContent)
+          EDITOR.updateContents(newContent, FluentEditor.sources.USER)
+        } else {
+          console.error('error message:', message)
+        }
+      }
+
+      // 显示上传中提示
+      // function showUploadingTips(type, target) {
+      //   popoverComponentRef[type] = this.overlayContainerRef.createComponent(
+      //     this.componentFactoryResolver.resolveComponentFactory(
+      //       PopoverComponent,
+      //     ),
+      //   )
+      //   Object.assign(popoverComponentRef[type].instance, {
+      //     content: LANG_CONF['uploading'],
+      //     triggerElementRef: { nativeElement: target },
+      //     position: 'top',
+      //     popType: 'default',
+      //     popMaxWidth: 200,
+      //     appendToBody: true,
+      //     zIndex: 1060,
+      //   })
+      // }
+
+      // 移除上传中提示
+      // function closeUploadingTips(type) {
+      //   if (popoverComponentRef[type]) {
+      //     popoverComponentRef[type].destroy()
+      //   }
+      //   if (popoverComponentRef.length === 1) {
+      //     popoverComponentRef = []
+      //   }
+      // }
+
+      function onPaste({ files, callback }) {
+        const _this = this
+        function uploadImage(file) {
+          return new Promise((resolve, reject) => {
+            const formData = new FormData()
+            formData.append('file', file)
+            _this.http.post('url/to/your/api', formData).subscribe(res => {
+              const imageUrl = 'url/image.png' /* 后台返回的图片URL */
+              resolve(imageUrl)
+            })
+          })
+        }
+
+        ;(async () => {
+          try {
+            const imageUrls = []
+            for (let i = 0; i < files.length; i++) {
+              imageUrls.push(await uploadImage(files[i]))
+            }
+            callback({
+              code: 0,
+              message: 'Upload all images successfully!',
+              data: {
+                imageUrls: imageUrls,
+              },
+            })
+          } catch (e) {
+            throw new Error('Upload failed.')
+          }
+        })()
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/fluent-editor/package.json b/packages/fluent-editor/package.json
new file mode 100644
index 0000000000..28581dc5eb
--- /dev/null
+++ b/packages/fluent-editor/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@opentiny/fluent-editor",
+  "version": "0.1.0",
+  "main": "dist/index.cjs.js",
+  "files": [
+    "dist/*"
+  ],
+  "module": "dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "start": "vite build && vite",
+    "dev": "vite",
+    "build": "vite build",
+    "test": "jest",
+    "format": "prettier './{src,test}/**/*.{js,ts,tsx,vue}' --write"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged",
+    "commit-msg": "node verifyCommit.js"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.0.2",
+    "@types/quill": "^2.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "eslint": "^8.5.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^12.1.4",
+    "lodash-es": "^4.17.15",
+    "prettier": "^2.3.0",
+    "sass": "^1.47.0",
+    "ts-jest": "^26.5.6",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.2.4",
+    "vite": "^2.3.0"
+  },
+  "dependencies": {
+    "highlight.js": "^10.2.0",
+    "html2canvas": "^1.0.0-rc.7",
+    "quill": "^2.0.0-dev.4",
+    "quill-delta": "^5.1.0"
+  }
+}
\ No newline at end of file
diff --git a/packages/fluent-editor/src/assets/better-table.scss b/packages/fluent-editor/src/assets/better-table.scss
new file mode 100644
index 0000000000..3c813b62a8
--- /dev/null
+++ b/packages/fluent-editor/src/assets/better-table.scss
@@ -0,0 +1,367 @@
+@import './common';
+
+// 模块：表格 table
+
+@mixin table {
+  .quill-better-table-wrapper {
+    padding: 0;
+    margin: 25px 25px 40px 25px;
+    max-width: calc(100% - 26px);
+    display: inline-block;
+    overflow: hidden;
+
+    & ol,
+    & ul {
+      padding: 0;
+    }
+    .quill-better-table {
+      border-collapse: collapse;
+      border-spacing: 0;
+      td {
+        border: 1px solid #adb0b8;
+        padding: 5px 10px;
+      }
+    }
+  }
+  .qlbt-operation-menu {
+    background-color: #fff;
+    -webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+    font-size: 14px;
+    z-index: 100;
+    overflow: hidden;
+    .qlbt-operation-menu-item {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      // background-color: #f8f8f8;
+      cursor: pointer;
+      color: #252b3a;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:hover {
+        background-color: #f8f8f8;
+      }
+    }
+    .qlrte__op-menu-dividing {
+      height: 1px;
+      background-color: #efefef;
+    }
+    .qlrte__op-menu-subtitle {
+      color: #999;
+      font-size: 14px;
+      padding: 5px 16px;
+    }
+    .qlrte__op-menu-color-picker {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      padding: 0 16px 10px;
+      background-color: #fff;
+      overflow: hidden;
+      .qlrte__op-menu-color-picker-item {
+        width: 20px;
+        height: 20px;
+        border: 1px solid #595959;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        cursor: pointer;
+      }
+    }
+  }
+  .qlbt-modules-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(100% - 15px);
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+
+    .qlbt-table-control-panel {
+      position: absolute;
+      pointer-events: auto;
+
+      .qlbt-left-mask,
+      .qlbt-right-mask {
+        position: absolute;
+        top: 0;
+        width: 40px;
+        background: #f8f8f8;
+        display: none;
+      }
+
+      .qlbt-left-mask {
+        left: 0;
+      }
+
+      .qlbt-right-mask {
+        right: 0;
+      }
+
+      .qlbt-row-control-panel {
+        position: absolute;
+        left: 15px;
+        top: 24px;
+        width: 16px;
+        border-bottom: 1px solid #adb0b8;
+
+        .qlbt-row-tool-cell {
+          position: relative;
+          display: table;
+          padding: 2px;
+          border: 1px solid #adb0b8;
+          border-bottom: 0;
+
+          &.qlbt-tool-cell-on {
+            background: #dfe1e6;
+          }
+        }
+
+        .qlbt-row-tool-cell-selector {
+          display: table-cell;
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+        }
+
+        .qlbt-row-tool-cell-holder {
+          position: absolute;
+          left: 0;
+          bottom: -1px;
+          z-index: 3;
+          width: 100%;
+          height: 1px;
+          background-color: transparent;
+          cursor: ns-resize;
+
+          &:hover {
+            background-color: #5e7ce0;
+          }
+
+          &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: -8px;
+            display: block;
+            width: 100%;
+            height: 8px;
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -8px;
+            display: block;
+            width: 100%;
+            height: 8px;
+          }
+        }
+      }
+
+      .qlbt-column-control-panel {
+        position: absolute;
+        display: flex;
+        align-items: flex-end;
+        left: 40px;
+        top: 0;
+        height: 16px;
+        border-left: 1px solid #adb0b8;
+
+        .qlbt-col-tool-cell {
+          position: relative;
+          display: table;
+          padding: 2px;
+          border: 1px solid #adb0b8;
+          border-left: 0;
+
+          &.qlbt-tool-cell-on {
+            background: #dfe1e6;
+          }
+        }
+
+        .qlbt-col-tool-cell-selector {
+          display: table-cell;
+          width: 100%;
+          height: 100%;
+          cursor: pointer;
+        }
+
+        .qlbt-col-tool-cell-holder {
+          position: absolute;
+          right: -1px;
+          top: 0;
+          bottom: 0;
+          z-index: 3;
+          width: 1px;
+          background-color: transparent;
+          cursor: ew-resize;
+
+          &:hover {
+            background-color: #5e7ce0;
+          }
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -8px;
+            display: block;
+            width: 8px;
+            height: 100%;
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: -8px;
+            display: block;
+            width: 8px;
+            height: 100%;
+          }
+        }
+      }
+    }
+
+    .qlbt-table-scroll-bar-panel {
+      position: absolute;
+      padding: 12px 0;
+      width: 100%;
+      height: 32px;
+      left: 40px;
+
+      .qlbt-table-scroll-bar {
+        position: relative;
+        left: 0;
+        height: 8px;
+        background: #adb0b8;
+        border-radius: 10px;
+        pointer-events: auto;
+        cursor: pointer;
+
+        &:hover {
+          background: #5e7ce0;
+        }
+      }
+    }
+  }
+
+  .qlbt-operation-menu {
+    background-color: #ffffff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    font-size: 14px;
+    z-index: 100;
+    overflow: hidden;
+    position: fixed;
+
+    .qlbt-operation-menu-item {
+      display: flex;
+      align-items: center;
+      padding: 10px 16px;
+      // background-color: #f8f8f8;
+      cursor: pointer;
+      color: #252b3a;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:hover {
+        background-color: #f8f8f8;
+      }
+    }
+    .qlbt-rte__op-menu-dividing {
+      height: 1px;
+      background-color: #efefef;
+    }
+    .qlbt-rte__op-menu-subtitle {
+      color: #999;
+      font-size: 14px;
+      padding: 5px 16px;
+    }
+    .qlbt-rte__op-menu-color-picker {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      padding: 0 16px 10px;
+      background-color: #fff;
+      overflow: hidden;
+      .qlbt-rte__op-menu-color-picker-item {
+        width: 20px;
+        height: 20px;
+        border: 1px solid #595959;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        cursor: pointer;
+      }
+    }
+
+    .qlbt-operation-menu-disabled {
+      color: #adb0b8;
+
+      &:hover {
+        background-color: #f5f5f6;
+      }
+    }
+  }
+
+  .qlbt-selection-line-first > div,
+  .qlbt-selection-line-last > div {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: #5e7ce0;
+    border-radius: 6px;
+    pointer-events: auto;
+    cursor: se-resize;
+  }
+
+  .qlbt-selection-line-first > div {
+    left: -3px;
+    top: -3px;
+  }
+
+  .qlbt-selection-line-last > div {
+    right: -3px;
+    top: -3px;
+  }
+
+  .qlbt-selection-edit-mask {
+    display: block;
+    position: absolute;
+    background: transparent;
+    cursor: text;
+  }
+
+  .editing-select-able {
+    -webkit-touch-callout: text;
+    -moz-user-select: text;
+    -webkit-user-select: text;
+    -ms-user-select: text;
+    -khtml-user-select: text;
+    user-select: text;
+  }
+
+  .ql-editor td {
+    vertical-align: top;
+  }
+
+  .ql-editor table.quill-better-table {
+    width: auto;
+  }
+}
+
+@include table;
diff --git a/packages/fluent-editor/src/assets/common.scss b/packages/fluent-editor/src/assets/common.scss
new file mode 100644
index 0000000000..3b36d670ec
--- /dev/null
+++ b/packages/fluent-editor/src/assets/common.scss
@@ -0,0 +1,279 @@
+// @import './style/theme/color';
+
+$defaultFontSize: 14px;
+
+@mixin ellipsis($width) {
+  width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin arrowIcon {
+  height: 0;
+  width: 0;
+  margin-top: -2.5px;
+  border: 2.5px solid transparent;
+  border-top: 3px solid #252b3a;
+}
+
+@mixin toolbarPicker($content, $width: 40px) {
+  width: $width;
+
+  .ql-picker-label::before {
+    @include ellipsis(40px);
+  }
+
+  &.ql-expanded .ql-picker-label {
+    color: inherit;
+  }
+
+  &:hover {
+    color: #5e7ce0;
+
+    svg {
+      border-top-color: #5e7ce0;
+    }
+  }
+
+  .ql-picker-label {
+    outline: none;
+    border: 0;
+
+    .ql-stroke {
+      display: none;
+    }
+
+    svg {
+      @include arrowIcon;
+    }
+
+    &.ql-active,
+    &:hover {
+      svg {
+        border-top-color: #5e7ce0;
+      }
+    }
+  }
+
+  .ql-picker-options {
+    color: #8a8e99;
+  }
+}
+
+@mixin fontSizeList {
+  /* Set Dropdown font-size */
+  .ql-size {
+    @include toolbarPicker('', 45px);
+  }
+
+  .ql-size span.ql-picker-options {
+    width: 70px;
+
+    span::before {
+      font-size: 14px;
+    }
+  }
+}
+
+@mixin lineHeightList {
+  .ql-lineheight {
+    @include toolbarPicker('', 45px);
+  }
+
+  .ql-lineheight span.ql-picker-options {
+    width: 70px;
+
+    span::before {
+      font-size: 14px;
+    }
+  }
+}
+
+@mixin fontFamilyList {
+  /* Set dropdown font-families */
+  .ql-font {
+    @include toolbarPicker('', 45px);
+
+    span[data-value='arial']::before {
+      font-family: arial, helvetica, sans-serif;
+    }
+
+    span[data-value='songti']::before {
+      font-family: '宋体', 'SimSun';
+    }
+
+    span[data-value='yahei']::before {
+      font-family: '微软雅黑', 'Microsoft YaHei';
+    }
+
+    span[data-value='gaiti']::before {
+      font-family: '楷体', '楷体_GB2312', 'SimKai';
+    }
+
+    span[data-value='heiti']::before {
+      font-family: '黑体', 'SimHei';
+    }
+
+    span[data-value='lishu']::before {
+      font-family: '隶书', 'SimLi';
+    }
+
+    span[data-value='mono']::before {
+      font-family: 'andale mono';
+    }
+
+    span[data-value='arialblack']::before {
+      font-family: 'arial black', 'avant garde';
+    }
+
+    span[data-value='comic']::before {
+      font-family: 'comic sans ms';
+    }
+
+    span[data-value='impact']::before {
+      font-family: 'impact', 'chicago';
+    }
+
+    span[data-value='times']::before {
+      font-family: 'times new roman';
+    }
+  }
+}
+
+@mixin fontFamilyContent {
+  /* Set content font-families */
+  .ql-font-songti {
+    font-family: '宋体', 'SimSun';
+  }
+
+  .ql-font-yahei {
+    font-family: '微软雅黑', 'Microsoft YaHei';
+  }
+
+  .ql-font-kaiti {
+    font-family: '楷体', '楷体_GB2312', 'SimKa';
+  }
+
+  .ql-font-heiti {
+    font-family: '黑体', 'SimHei';
+  }
+
+  .ql-font-lishu {
+    font-family: '隶书', 'SimLi';
+  }
+
+  .ql-font-mono {
+    font-family: 'andale mono';
+  }
+
+  .ql-font-arial {
+    font-family: arial, helvetica, sans-serif;
+  }
+
+  .ql-font-arialblack {
+    font-family: 'arial black', 'avant garde';
+  }
+
+  .ql-font-comic {
+    font-family: 'comic sans ms';
+  }
+
+  .ql-font-impact {
+    font-family: 'impact', 'chicago';
+  }
+
+  .ql-font-times {
+    font-family: 'times new roman';
+  }
+}
+
+// 解决工具栏下拉框高亮问题
+@mixin pickerLabel($group, $i) {
+  @if $i>0 {
+    $data-label-value: nth($group, $i);
+
+    .ql-picker-label[data-value='#{""+$data-label-value}'] {
+      & + .ql-picker-options {
+        .ql-picker-item[data-value='#{""+$data-label-value}'] {
+          &::after {
+            margin-top: -12px;
+            content: 'L';
+            font-size: initial;
+            font-family: arial;
+            -ms-transform: scaleX(-1) rotate(-45deg); /* IE 9 */
+            -webkit-transform: scaleX(-1) rotate(-45deg); /* Chrome, Safari, Opera */
+            transform: scaleX(-1) rotate(-45deg);
+          }
+        }
+      }
+    }
+    @include pickerLabel($group, $i - 1);
+  }
+}
+
+// 解决颜色面板高亮问题
+@mixin pickerValue($group, $i) {
+  @if $i>0 {
+    $data-label-value: nth($group, $i);
+
+    .ql-picker-label[data-value='#{""+$data-label-value}'] {
+      & + .ql-picker-options {
+        .ql-picker-item[data-value='#{""+$data-label-value}'] {
+          &::after {
+            margin-left: 5px;
+            margin-top: -3px;
+            content: 'L';
+            font-size: initial;
+            font-family: arial;
+            -ms-transform: scaleX(-1) rotate(-45deg); /* IE 9 */
+            -webkit-transform: scaleX(-1) rotate(-45deg); /* Chrome, Safari, Opera */
+            transform: scaleX(-1) rotate(-45deg);
+          }
+        }
+      }
+    }
+    @include pickerValue($group, $i - 1);
+  }
+}
+
+// 当前颜色下划线指示器
+@mixin currentColorIndicator($group, $i) {
+  @if $i>0 {
+    $data-label-value: nth($group, $i);
+
+    .ql-picker-label[data-value='#{""+$data-label-value}'] {
+      .ql-color-inner {
+        .current-color-line {
+          border-color: $data-label-value;
+        }
+      }
+    }
+    @include currentColorIndicator($group, $i - 1);
+  }
+}
+
+@mixin mentionLink {
+  .ql-mention-link {
+    cursor: pointer;
+    color: #5e7ce0;
+    margin: 0 0.3em;
+    text-decoration: underline;
+  }
+}
+
+// SVG图标
+@mixin toolbarSvgColor {
+  svg,
+  polygon,
+  path {
+    @content;
+  }
+}
+
+// 字体图标
+@mixin toolbarFontIconColor {
+  i {
+    @content;
+  }
+}
diff --git a/packages/fluent-editor/src/assets/counter.scss b/packages/fluent-editor/src/assets/counter.scss
new file mode 100644
index 0000000000..79e5cb068f
--- /dev/null
+++ b/packages/fluent-editor/src/assets/counter.scss
@@ -0,0 +1,20 @@
+@import './common';
+
+// 模块：字数统计 counter
+
+@mixin counter {
+  .ql-counter {
+    // position: absolute;
+    width: 100%;
+    bottom: 0;
+    white-space: nowrap;
+    border-top: 1px solid #adb0b8;
+    line-height: 20px;
+    font-size: 12px;
+    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+    background: #ffffff;
+    text-align: right;
+    padding-right: 5px;
+    color: #8a8e99;
+  }
+}
diff --git a/packages/fluent-editor/src/assets/custom-image.scss b/packages/fluent-editor/src/assets/custom-image.scss
new file mode 100644
index 0000000000..f0a84014eb
--- /dev/null
+++ b/packages/fluent-editor/src/assets/custom-image.scss
@@ -0,0 +1,20 @@
+/* 图片预览 */
+
+@mixin imagePreview {
+  .image-preview__overlay {
+    position: absolute;
+    z-index: 10;
+
+    .icon-maxmize {
+      font-size: 18px;
+      padding: 8px 4px 3px;
+      background-color: #8a8e99;
+      color: #ffffff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .icon-maxmize:before {
+      content: url('data:image/svg+xml;utf8,<svg t="1642681601748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2834" width="20" height="20"><path d="M460.8 940.8h-320l262.4-262.4c12.8-12.8 12.8-38.4 0-51.2-12.8-19.2-38.4-19.2-57.6 0l-262.4 262.4v-345.6c0-19.2-19.2-38.4-38.4-38.4s-38.4 19.2-38.4 38.4v364.8c0 51.2 38.4 115.2 96 115.2h358.4c19.2 0 38.4-19.2 38.4-38.4 0-25.6-19.2-44.8-38.4-44.8zM940.8 6.4h-377.6c-19.2 0-38.4 19.2-38.4 38.4s19.2 38.4 38.4 38.4h320l-268.8 262.4c-12.8 12.8-12.8 38.4 0 57.6 19.2 12.8 44.8 12.8 57.6 0l262.4-262.4v320c0 19.2 19.2 38.4 38.4 38.4s38.4-19.2 38.4-38.4v-352c6.4-64-25.6-102.4-70.4-102.4z" p-id="2835"></path></svg>');
+    }
+  }
+}
diff --git a/packages/fluent-editor/src/assets/editor.scss b/packages/fluent-editor/src/assets/editor.scss
new file mode 100644
index 0000000000..5063c89802
--- /dev/null
+++ b/packages/fluent-editor/src/assets/editor.scss
@@ -0,0 +1,358 @@
+@import './common';
+// @import './tasklist';
+@import './better-table';
+@import './emoji/emoji';
+
+@mixin editor {
+  .ql-editor {
+    padding-bottom: 33px;
+    font-size: $defaultFontSize;
+
+    &.ql-blank::before {
+      color: #8a8e99;
+    }
+
+    h1,
+    h2,
+    h3 {
+      margin-top: 20px;
+      margin-bottom: 10px;
+    }
+
+    h1 {
+      font-size: 30px;
+    }
+
+    h2 {
+      font-size: 20px;
+      font-weight: bold;
+    }
+
+    ol,
+    ul {
+      margin: 0 0 10px;
+    }
+
+    li {
+      margin: 0 0 5px;
+    }
+
+    b,
+    strong {
+      font-weight: bold;
+    }
+
+    em {
+      font-style: italic;
+    }
+
+    s {
+      text-decoration: line-through;
+    }
+
+    u.ql-custom-strike {
+      text-decoration: line-through;
+    }
+
+    u {
+      text-decoration: underline;
+    }
+
+    a {
+      text-decoration: underline;
+      color: #5e7ce0;
+
+      img {
+        border: solid 1px #526ecc;
+      }
+    }
+
+    td ol {
+      counter-reset: list-0 0;
+    }
+
+    .ql-ui {
+      position: initial;
+    }
+
+    li > .ql-ui {
+      bottom: 0;
+    }
+
+    // 列表
+    li::before {
+      display: inline-block;
+      margin-left: -1.5em;
+      margin-right: 0.3em;
+      text-align: right;
+      white-space: nowrap;
+      width: 1.2em;
+    }
+
+    li.bullet::before {
+      content: '\2022';
+    }
+
+    li.ordered {
+      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+      counter-increment: list-0;
+    }
+
+    li.ordered::before {
+      content: counter(list-0, decimal) '. ';
+    }
+
+    li.ordered.ql-indent-1 {
+      counter-increment: list-1;
+    }
+
+    li.ordered.ql-indent-1::before {
+      content: counter(list-1, lower-alpha) '. ';
+    }
+
+    li.ordered.ql-indent-1 {
+      counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+
+    li.ordered.ql-indent-2 {
+      counter-increment: list-2;
+    }
+
+    li.ordered.ql-indent-2::before {
+      content: counter(list-2, lower-roman) '. ';
+    }
+
+    li.ordered.ql-indent-2 {
+      counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+
+    li.ordered.ql-indent-3 {
+      counter-increment: list-3;
+    }
+
+    li.ordered.ql-indent-3::before {
+      content: counter(list-3, decimal) '. ';
+    }
+
+    li.ordered.ql-indent-3 {
+      counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+    }
+
+    li.ordered.ql-indent-4 {
+      counter-increment: list-4;
+    }
+
+    li.ordered.ql-indent-4::before {
+      content: counter(list-4, lower-alpha) '. ';
+    }
+
+    li.ordered.ql-indent-4 {
+      counter-reset: list-5 list-6 list-7 list-8 list-9;
+    }
+
+    li.ordered.ql-indent-5 {
+      counter-increment: list-5;
+    }
+
+    li.ordered.ql-indent-5::before {
+      content: counter(list-5, lower-roman) '. ';
+    }
+
+    li.ordered.ql-indent-5 {
+      counter-reset: list-6 list-7 list-8 list-9;
+    }
+
+    li.ordered.ql-indent-6 {
+      counter-increment: list-6;
+    }
+
+    li.ordered.ql-indent-6::before {
+      content: counter(list-6, decimal) '. ';
+    }
+
+    li.ordered.ql-indent-6 {
+      counter-reset: list-7 list-8 list-9;
+    }
+
+    li.ordered.ql-indent-7 {
+      counter-increment: list-7;
+    }
+
+    li.ordered.ql-indent-7::before {
+      content: counter(list-7, lower-alpha) '. ';
+    }
+
+    li.ordered.ql-indent-7 {
+      counter-reset: list-8 list-9;
+    }
+
+    li.ordered.ql-indent-8 {
+      counter-increment: list-8;
+    }
+
+    li.ordered.ql-indent-8::before {
+      content: counter(list-8, lower-roman) '. ';
+    }
+
+    li.ordered.ql-indent-8 {
+      counter-reset: list-9;
+    }
+
+    li.ordered.ql-indent-9 {
+      counter-increment: list-9;
+    }
+
+    li.ordered.ql-indent-9::before {
+      content: counter(list-9, decimal) '. ';
+    }
+
+    // 编辑器外的任务列表
+    // @include tasklistOutside;
+
+    // 图片
+    .ql-image-container {
+      margin-bottom: 10px;
+
+      img {
+        margin-bottom: 0;
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+      }
+    }
+
+    img {
+      max-width: 100%;
+
+      &.current-select-img::selection {
+        background-color: transparent;
+      }
+    }
+
+    .ql-file-item {
+      margin: 0 4px;
+      padding: 0 4px;
+      white-space: nowrap;
+      max-width: 90%;
+      user-select: none;
+      vertical-align: middle;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-block;
+      font-size: 14px;
+      height: 20px;
+
+      &.icon-file::before {
+        position: absolute;
+        left: 4px;
+        top: 2px;
+      }
+
+      span {
+        display: inline-block;
+        padding-left: 20px;
+        text-decoration: none;
+      }
+    }
+
+    // 代码块
+    .ql-code-block-container {
+      select.ql-ui {
+        display: none;
+      }
+    }
+
+    code,
+    .ql-code-block-container {
+      background-color: #f8f8f8;
+      border-radius: 3px;
+    }
+
+    code {
+      font-size: 85%;
+      padding: 2px 4px;
+    }
+
+    .ql-code-block-container {
+      overflow: auto;
+      padding: 9.5px;
+      margin: 0 0 10px;
+      word-break: normal;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+      font-size: 13px;
+      border-radius: 1px;
+      color: #252b3a;
+      background-color: #f8f8f8;
+      border: 1px solid #adb0b8;
+    }
+
+    // 表格
+    table {
+      margin: 0;
+
+      tr {
+        height: initial;
+      }
+    }
+
+    td {
+      border: 1px solid #adb0b8;
+      padding: 5px 10px;
+    }
+    @include table;
+
+    // 字体
+
+    @include fontFamilyContent;
+
+    // 全局链接
+    .ql-wiki-link,
+    .ql-doc-link {
+      display: inline-block;
+      margin: 0 5px;
+    }
+
+    // 代码块
+    blockquote {
+      border-left: 4px solid #adb0b8;
+      margin-bottom: 5px;
+      margin-top: 5px;
+      padding-left: 16px;
+    }
+
+    // @提醒
+    @include mentionLink;
+  }
+
+  // fix: 解决ol中有内联list-style-type样式，.ql-editor样式（默认是none）会将其覆盖的问题
+  .ql-editor ol li {
+    list-style-type: inherit;
+  }
+
+  .ql-container .ql-editor {
+    ol li {
+      // 确保不影响编辑器里面的样式
+      list-style-type: none;
+    }
+
+    // 暗黑模式
+    li.checked,
+    li.unchecked {
+      color: #252b3a;
+    }
+  }
+}
+
+// 编辑器正文
+@include editor;
+// Emoji表情
+@include emoji;
diff --git a/packages/fluent-editor/src/assets/emoji/emoji.scss b/packages/fluent-editor/src/assets/emoji/emoji.scss
new file mode 100644
index 0000000000..1d335e15b9
--- /dev/null
+++ b/packages/fluent-editor/src/assets/emoji/emoji.scss
@@ -0,0 +1,462 @@
+@import './style.scss';
+
+@mixin emoji {
+  .ap {
+    display: inline-flex;
+    height: 20px;
+    width: 20px;
+    background-size: 140px;
+    background-repeat: no-repeat;
+    text-indent: -999px;
+    box-sizing: border-box;
+    font-size: 20px;
+    line-height: 1;
+    overflow: hidden;
+    margin: -3px 5px 5px;
+  }
+
+  .ap-kissing_closed_eyes {
+    background-position: 0 0;
+  }
+
+  .ap-stuck_out_tongue {
+    background-position: 0 -20px;
+  }
+
+  .ap-stuck_out_tongue_winking_eye {
+    background-position: 0 -40px;
+  }
+
+  .ap-stuck_out_tongue_closed_eyes {
+    background-position: 0 -60px;
+  }
+
+  .ap-disappointed {
+    background-position: 0 -80px;
+  }
+
+  .ap-worried {
+    background-position: 0 -100px;
+  }
+
+  .ap-angry {
+    background-position: 0 -120px;
+  }
+
+  .ap-rage {
+    background-position: 0 -140px;
+  }
+
+  .ap-cry {
+    background-position: 0 -160px;
+  }
+
+  .ap-persevere {
+    background-position: 0 -180px;
+  }
+
+  .ap-triumph {
+    background-position: 0 -200px;
+  }
+
+  .ap-disappointed_relieved {
+    background-position: 0 -220px;
+  }
+
+  .ap-frowning {
+    background-position: 0 -240px;
+  }
+
+  .ap-anguished {
+    background-position: 0 -260px;
+  }
+
+  .ap-fearful {
+    background-position: 0 -280px;
+  }
+
+  .ap-weary {
+    background-position: 0 -300px;
+  }
+
+  .ap-sleepy {
+    background-position: -20px 0;
+  }
+
+  .ap-tired_face {
+    background-position: -20px -20px;
+  }
+
+  .ap-grimacing {
+    background-position: -20px -40px;
+  }
+
+  .ap-sob {
+    background-position: -20px -60px;
+  }
+
+  .ap-open_mouth {
+    background-position: -20px -80px;
+  }
+
+  .ap-hushed {
+    background-position: -20px -100px;
+  }
+
+  .ap-cold_sweat {
+    background-position: -20px -120px;
+  }
+
+  .ap-scream {
+    background-position: -20px -140px;
+  }
+
+  .ap-astonished {
+    background-position: -20px -160px;
+  }
+
+  .ap-flushed {
+    background-position: -20px -180px;
+  }
+
+  .ap-sleeping {
+    background-position: -20px -200px;
+  }
+
+  .ap-dizzy_face {
+    background-position: -20px -220px;
+  }
+
+  .ap-no_mouth {
+    background-position: -20px -240px;
+  }
+
+  .ap-mask {
+    background-position: -20px -260px;
+  }
+
+  .ap-grinning {
+    background-position: -20px -280px;
+  }
+
+  .ap-grin {
+    background-position: -20px -300px;
+  }
+
+  .ap-joy {
+    background-position: -40px 0;
+  }
+
+  .ap-smiley {
+    background-position: -40px -20px;
+  }
+
+  .ap-smile {
+    background-position: -40px -40px;
+  }
+
+  .ap-sweat_smile {
+    background-position: -40px -60px;
+  }
+
+  .ap-laughing {
+    background-position: -40px -80px;
+  }
+
+  .ap-innocent {
+    background-position: -40px -100px;
+  }
+
+  .ap-smiling_imp {
+    background-position: -40px -120px;
+  }
+
+  .ap-wink {
+    background-position: -40px -140px;
+  }
+
+  .ap-blush {
+    background-position: -40px -160px;
+  }
+
+  .ap-yum {
+    background-position: -40px -180px;
+  }
+
+  .ap-relieved {
+    background-position: -40px -200px;
+  }
+
+  .ap-heart_eyes {
+    background-position: -40px -220px;
+  }
+
+  .ap-sunglasses {
+    background-position: -40px -240px;
+  }
+
+  .ap-smirk {
+    background-position: -40px -260px;
+  }
+
+  .ap-neutral_face {
+    background-position: -40px -280px;
+  }
+
+  .ap-expressionless {
+    background-position: -40px -300px;
+  }
+
+  .ap-unamused {
+    background-position: -60px 0;
+  }
+
+  .ap-sweat {
+    background-position: -60px -20px;
+  }
+
+  .ap-pensive {
+    background-position: -60px -40px;
+  }
+
+  .ap-confused {
+    background-position: -60px -60px;
+  }
+
+  .ap-confounded {
+    background-position: -60px -80px;
+  }
+
+  .ap-kissing {
+    background-position: -60px -100px;
+  }
+
+  .ap-kissing_heart {
+    background-position: -60px -120px;
+  }
+
+  .ap-kissing_smiling_eyes {
+    background-position: -60px -140px;
+  }
+
+  .ap-slightly_smiling_face {
+    background-position: -60px -160px;
+  }
+
+  .ap-slightly_frowning_face {
+    background-position: -60px -180px;
+  }
+
+  .ap-hugging_face {
+    background-position: -60px -200px;
+  }
+
+  .ap-face_with_head_bandage {
+    background-position: -60px -220px;
+  }
+
+  .ap-thinking_face {
+    background-position: -60px -240px;
+  }
+
+  .ap-nerd_face {
+    background-position: -60px -260px;
+  }
+
+  .ap-face_with_thermometer {
+    background-position: -60px -280px;
+  }
+
+  .ap-money_mouth_face {
+    background-position: -60px -300px;
+  }
+
+  .ap-zipper_mouth_face {
+    background-position: -80px 0;
+  }
+
+  .ap-relaxed {
+    background-position: -80px -20px;
+  }
+
+  .ap-white_frowning_face {
+    background-position: -80px -40px;
+  }
+
+  .ap-scream_cat {
+    background-position: -80px -60px;
+  }
+
+  .ap-crying_cat_face {
+    background-position: -80px -80px;
+  }
+
+  .ap-pouting_cat {
+    background-position: -80px -100px;
+  }
+
+  .ap-kissing_cat {
+    background-position: -80px -120px;
+  }
+
+  .ap-smirk_cat {
+    background-position: -80px -140px;
+  }
+
+  .ap-heart_eyes_cat {
+    background-position: -80px -160px;
+  }
+
+  .ap-smiley_cat {
+    background-position: -80px -180px;
+  }
+
+  .ap-joy_cat {
+    background-position: -80px -200px;
+  }
+
+  .ap-smile_cat {
+    background-position: -80px -220px;
+  }
+
+  .ap-robot_face {
+    background-position: -80px -240px;
+  }
+
+  .ap-imp {
+    background-position: -80px -260px;
+  }
+
+  .ap-skull {
+    background-position: -80px -280px;
+  }
+
+  .ap-ghost {
+    background-position: -80px -300px;
+  }
+
+  .ap-hankey {
+    background-position: -100px 0;
+  }
+
+  .ap-fire {
+    background-position: -100px -20px;
+  }
+
+  .ap-space_invader {
+    background-position: -100px -40px;
+  }
+
+  .ap-alien {
+    background-position: -100px -60px;
+  }
+
+  .ap-eyes {
+    background-position: -100px -80px;
+  }
+
+  .ap-eye {
+    background-position: -100px -100px;
+  }
+
+  .ap-nose {
+    background-position: -100px -120px;
+  }
+
+  .ap-ear {
+    background-position: -100px -140px;
+  }
+
+  .ap-lips {
+    background-position: -100px -160px;
+  }
+
+  .ap-muscle {
+    background-position: -100px -180px;
+  }
+
+  .ap-wave {
+    background-position: -100px -200px;
+  }
+
+  .ap-clap {
+    background-position: -100px -220px;
+  }
+
+  .ap-writing_hand {
+    background-position: -100px -240px;
+  }
+
+  .ap-pray {
+    background-position: -100px -260px;
+  }
+
+  .ap-fist {
+    background-position: -100px -280px;
+  }
+
+  .ap-thumbsup {
+    background-position: -100px -300px;
+  }
+
+  .ap-point_down {
+    background-position: -120px 0;
+  }
+
+  .ap-point_up_2 {
+    background-position: -120px -20px;
+  }
+
+  .ap-middle_finger {
+    background-position: -121px -40px;
+  }
+
+  .ap-point_right {
+    background-position: -120px -60px;
+  }
+
+  .ap-point_left {
+    background-position: -120px -80px;
+  }
+
+  .ap-open_hands {
+    background-position: -120px -100px;
+  }
+
+  .ap-ok_hand {
+    background-position: -120px -120px;
+  }
+
+  .ap-raised_hand_with_fingers_splayed {
+    background-position: -120px -140px;
+  }
+
+  .ap-spock-hand {
+    background-position: -120px -160px;
+  }
+
+  .ap-v {
+    background-position: -120px -180px;
+  }
+
+  .ap-hand {
+    background-position: -120px -200px;
+  }
+
+  .ap-point_up {
+    background-position: -120px -220px;
+  }
+
+  .ap-thumbsdown {
+    background-position: -120px -240px;
+  }
+
+  .ap-facepunch {
+    background-position: -120px -260px;
+  }
+}
+
+:host ::ng-deep,
+.emoji {
+  @include emoji;
+}
diff --git a/packages/fluent-editor/src/assets/emoji/style.scss b/packages/fluent-editor/src/assets/emoji/style.scss
new file mode 100644
index 0000000000..6391989c7b
--- /dev/null
+++ b/packages/fluent-editor/src/assets/emoji/style.scss
@@ -0,0 +1,256 @@
+@import '../common.scss';
+
+:host ::ng-deep {
+  #quill-editor {
+    position: relative;
+  }
+
+  .mention {
+    color: #5e7ce0;
+  }
+
+  .completions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    background: #ffffff;
+    border-radius: 2px;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  .completions > li {
+    margin: 0;
+    padding: 0;
+  }
+
+  .completions > li > button {
+    box-sizing: border-box;
+    height: 2em;
+    padding: 0.25em 0.5em;
+    margin: 0;
+    display: block;
+    width: 100%;
+    text-align: left;
+    border: none;
+    background: none;
+  }
+
+  .completions > li > button:hover {
+    background: #adb0b8;
+  }
+
+  .completions > li > button:focus {
+    background: #adb0b8;
+    outline: none;
+  }
+
+  .completions > li > button > .matched {
+    font-weight: bold;
+    color: #252b3a;
+  }
+
+  .completions > li > button > * {
+    vertical-align: middle;
+  }
+
+  .emoji_completions {
+    list-style: none;
+    margin: 0;
+    border: 1px solid #252b3a;
+    padding: 6px;
+    background: #ffffff;
+    border-radius: 3px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+    li {
+      margin: 2px 0;
+      padding: 0;
+      display: inline-block;
+
+      &:not(:last-of-type) {
+        margin-right: 3px;
+      }
+    }
+  }
+
+  .emoji_completions > li > button {
+    box-sizing: border-box;
+    padding: 3px 2px 6px;
+    margin: 0;
+    display: block;
+    width: 100%;
+    text-align: left;
+    border: none;
+    background: #f8f8f8;
+    border-radius: 3px;
+  }
+
+  .emoji_completions > li > button:hover {
+    background: #5e7ce0;
+    color: #ffffff;
+  }
+
+  .emoji_completions > li > button:focus {
+    background: #5e7ce0;
+    outline: none;
+    color: #ffffff;
+  }
+
+  .emoji_completions > li > button.emoji-active {
+    background: #5e7ce0;
+    outline: none;
+    color: #ffffff;
+  }
+
+  .emoji_completions > li > button > .matched {
+    font-weight: bold;
+  }
+
+  .emoji_completions > li > button > * {
+    vertical-align: middle;
+  }
+
+  .ico {
+    margin-right: 5px;
+    font-size: 18px;
+    line-height: 0;
+    vertical-align: middle;
+  }
+
+  #emoji-palette {
+    position: fixed;
+    max-width: 250px;
+    z-index: 999;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 1px;
+    border: 1px solid #adb0b8;
+  }
+
+  .bem {
+    font-size: 24px;
+    width: 34px;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+    margin: 2px;
+  }
+
+  #tab-filters {
+    width: 210px;
+    margin: 0 auto;
+    margin-top: 20px;
+  }
+
+  .emoji-tab {
+    display: inline-table;
+    text-align: center;
+    width: 30px;
+    height: 100%;
+    min-height: 30px;
+    cursor: pointer;
+  }
+
+  #tab-toolbar {
+    display: none;
+    background-color: #f8f8f8;
+    padding: 4px 4px 0;
+    border-bottom: 1px solid #252b3a;
+  }
+
+  #tab-toolbar ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  #tab-toolbar .active {
+    border-bottom: 2px solid #5e7ce0;
+  }
+
+  #tab-panel {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: left;
+    max-height: 220px;
+    overflow-y: scroll;
+    padding: 5px 10px;
+    background: #ffffff; // TODO：Color-Question
+    cursor: auto;
+  }
+
+  #quill-editor table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  #quill-editor table td {
+    border: 1px solid #252b3a;
+    padding: 5px;
+    height: 25px;
+  }
+
+  button.ql-table::after {
+    content: 'TABLE';
+  }
+
+  .ql-picker.ql-table .ql-picker-label::before {
+    content: 'TABLE';
+  }
+
+  button.ql-contain::after {
+    content: 'WRAP';
+  }
+
+  button.ql-table[value='append-row']::after {
+    content: 'ROWS+';
+  }
+
+  button.ql-table[value='append-col']::after {
+    content: 'COLS+';
+  }
+
+  .ql-table,
+  .ql-contain {
+    width: auto;
+    margin-right: -15px;
+  }
+
+  .textarea-emoji-control {
+    width: 25px;
+    height: 25px;
+    right: 4px;
+    top: 10px;
+  }
+
+  #textarea-emoji {
+    position: absolute;
+    right: 0;
+    max-width: 250px;
+    z-index: 999;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    border: 1px solid #252b3a;
+  }
+
+  .ql-editor {
+    padding-right: 26px;
+  }
+
+  .button-emoji {
+    margin-bottom: -5px;
+  }
+
+  .ql-emojiblot {
+    display: inline-block;
+    vertical-align: text-top;
+  }
+}
+
+::ng-deep #emoji-close-div {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
diff --git a/packages/fluent-editor/src/assets/fileBar.scss b/packages/fluent-editor/src/assets/fileBar.scss
new file mode 100644
index 0000000000..26f66b28b9
--- /dev/null
+++ b/packages/fluent-editor/src/assets/fileBar.scss
@@ -0,0 +1,119 @@
+
+.ql-file-bar {
+    position: absolute;
+    transform: translateY(10px);
+    align-items: center;
+    background-color: #fff;
+    background-color: var(--devui-base-bg,#fff);
+    border: 1px solid #adb0b8;
+    border: 1px solid var(--devui-line,#adb0b8);
+    box-shadow: 0 0 5px rgb(37 43 58 / 20%);
+    box-shadow: 0 0 5px var(--devui-light-shadow,rgba(37,43,58,.2));
+    color: #252b3a;
+    color: var(--devui-text,#252b3a);
+    display: flex;
+    padding: 4px;
+    white-space: nowrap;
+
+    .ql-last-modified-date {
+      width: auto;
+      max-width:300px;    
+      word-break:break-all;
+      display:-webkit-box;
+      -webkit-line-clamp:2;
+      -webkit-box-orient:vertical;
+      overflow:hidden;
+      padding: 0 8px;
+      text-decoration: none;
+    }
+
+    .ql-split {
+      width: 1px;
+      height: 16px;
+      line-height: 16px;
+      margin: 4px 8px;
+      vertical-align: bottom;
+      border-left: 1px solid #adb0b8;
+      border-left: 1px solid var(--devui-line,#adb0b8);
+    }
+    .ql-file-download {
+      line-height: 28px;
+      margin: 0 4px;
+      padding: 0 4px;
+      min-width: 28px;
+      display: inline-block;
+      text-align: center;
+      color: #babbc0;
+      color: var(--devui-placeholder,#babbc0);
+      border-radius: 2px 2px;
+      text-decoration: none;
+      -webkit-transition: background-color 0.3s ease-in-out;
+      transition: background-color 0.3s ease-in-out;
+      cursor: pointer;
+      vertical-align: bottom;
+      i {
+        display: block;
+        font-size: 16px;
+        color: #252b3a;
+        color: var(--devui-text,#252b3a);
+        line-height: 28px;
+      }
+
+      &:hover {
+        background-color:#aaaaaf;
+        background-color:var(--devui-list-item-active-bg,#aaaaaf)
+      }
+      .icon-download {
+        font-family: "iconfont" !important;
+        font-size: 16px;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        &::before{
+          content: "\e600";
+        }
+      }
+    }
+    .ql-file-delete{
+      line-height: 28px;
+      margin: 0 4px;
+      padding: 0 4px;
+      min-width: 28px;
+      display: inline-block;
+      text-align: center;
+      color: #babbc0;
+      color: var(--devui-placeholder,#babbc0);
+      border-radius: 2px 2px;
+      text-decoration: none;
+      -webkit-transition: background-color 0.3s ease-in-out;
+      transition: background-color 0.3s ease-in-out;
+      cursor: pointer;
+      vertical-align: bottom;
+
+      i {
+        display: block;
+        font-size: 16px;
+        color: #252b3a;
+        color: var(--devui-text,#252b3a);
+        line-height: 28px;
+      }
+
+      &:hover {
+        background-color:#aaaaaf;
+        background-color:var(--devui-list-item-active-bg,#aaaaaf)
+      }
+      .icon-delete {
+        font-family: "iconfont" !important;
+        font-size: 16px;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        
+        &::before{
+          content: "\ec45";
+        }
+      }
+      
+    }
+    
+}
diff --git a/packages/fluent-editor/src/assets/font.scss b/packages/fluent-editor/src/assets/font.scss
new file mode 100644
index 0000000000..fe3afd2027
--- /dev/null
+++ b/packages/fluent-editor/src/assets/font.scss
@@ -0,0 +1,60 @@
+// 字体
+@import './common';
+.ql-formats {
+  .ql-font.ql-picker {
+    width: 85px;
+    span[data-value='arial']::before {
+      content: 'arial';
+      font-family: arial, helvetica, sans-serif;
+    }
+    span[data-value='songti']::before {
+      content: '宋体';
+      font-family: '宋体', 'SimSun';
+    }
+    span[data-value='yahei']::before {
+      content: '微软雅黑';
+      font-family: '微软雅黑', 'Microsoft YaHei';
+    }
+    span[data-value='kaiti']::before {
+      content: '楷体';
+      font-family: '楷体', '楷体_GB2312', 'SimKai';
+    }
+    span[data-value='heiti']::before {
+      content: '黑体';
+      font-family: '黑体', 'SimHei';
+    }
+    span[data-value='lishu']::before {
+      content: '隶书';
+      font-family: '隶书', 'SimLi';
+    }
+    span[data-value='mono']::before {
+      content: 'andale mono';
+      font-family: 'andale mono';
+    }
+    span[data-value='arialblack']::before {
+      content: 'arial black';
+      font-family: 'arial black', 'avant garde';
+    }
+    span[data-value='comic']::before {
+      content: 'comic sans ms';
+      font-family: 'comic sans ms';
+    }
+    span[data-value='impact']::before {
+      content: 'impact';
+      font-family: 'impact', 'chicago';
+    }
+    span[data-value='times']::before {
+      content: 'times new roman';
+      font-family: 'times new roman';
+    }
+    span[data-value='mono'].ql-picker-label::before,
+    span[data-value='comic'].ql-picker-label::before,
+    span[data-value='times'].ql-picker-label::before,
+    span[data-value='arialblack'].ql-picker-label::before {
+      width: 60px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
diff --git a/packages/fluent-editor/src/assets/fullscreen.scss b/packages/fluent-editor/src/assets/fullscreen.scss
new file mode 100644
index 0000000000..6521d34c1c
--- /dev/null
+++ b/packages/fluent-editor/src/assets/fullscreen.scss
@@ -0,0 +1,12 @@
+:-webkit-full-screen {  
+    background-color: white !important;  
+}  
+:-moz-full-screen {  
+background-color: white !important;  
+}  
+:-ms-fullscreen {  
+background-color: white !important;  
+}  
+:fullscreen {  
+background-color: white !important;  
+} 
\ No newline at end of file
diff --git a/packages/fluent-editor/src/assets/iconfont/iconfont.ttf b/packages/fluent-editor/src/assets/iconfont/iconfont.ttf
new file mode 100644
index 0000000000..0754b3d993
Binary files /dev/null and b/packages/fluent-editor/src/assets/iconfont/iconfont.ttf differ
diff --git a/packages/fluent-editor/src/assets/iconfont/iconfont.woff b/packages/fluent-editor/src/assets/iconfont/iconfont.woff
new file mode 100644
index 0000000000..088a55acf3
Binary files /dev/null and b/packages/fluent-editor/src/assets/iconfont/iconfont.woff differ
diff --git a/packages/fluent-editor/src/assets/iconfont/iconfont.woff2 b/packages/fluent-editor/src/assets/iconfont/iconfont.woff2
new file mode 100644
index 0000000000..595e859180
Binary files /dev/null and b/packages/fluent-editor/src/assets/iconfont/iconfont.woff2 differ
diff --git a/packages/fluent-editor/src/assets/image1.png b/packages/fluent-editor/src/assets/image1.png
new file mode 100644
index 0000000000..e917a7d339
Binary files /dev/null and b/packages/fluent-editor/src/assets/image1.png differ
diff --git a/packages/fluent-editor/src/assets/lineHeight.scss b/packages/fluent-editor/src/assets/lineHeight.scss
new file mode 100644
index 0000000000..b2504f73af
--- /dev/null
+++ b/packages/fluent-editor/src/assets/lineHeight.scss
@@ -0,0 +1,18 @@
+// 文字大小
+@import './common';
+
+.ql-formats {
+  .ql-lineheight > span {
+    width: 50px;
+
+    span::before {
+      font-size: 14px;
+    }
+  }
+  .ql-lineheight.ql-picker {
+    span.ql-picker-label:before,
+    .ql-picker-options > span.ql-picker-item::before {
+      content: attr(data-value);
+    }
+  }
+}
diff --git a/packages/fluent-editor/src/assets/link.scss b/packages/fluent-editor/src/assets/link.scss
new file mode 100644
index 0000000000..65c67f85e1
--- /dev/null
+++ b/packages/fluent-editor/src/assets/link.scss
@@ -0,0 +1,131 @@
+@mixin linkTooltip {
+    #editor {
+        .ql-tooltip {
+          position: absolute;
+          transform: translateY(10px);
+          background-color: #fff;
+          background-color: var(--devui-connected-overlay-bg,#fff);
+          border: 1px solid #adb0b8;
+          border: 1px solid var(--devui-line,#adb0b8);
+          box-shadow: 0 2px 8px 0 rgb(37 43 58 / 20%);
+          box-shadow: var(--devui-shadow-connected-overlay,0 2px 8px 0) var(--devui-light-shadow,rgba(37,43,58,.2));
+          color: #252b3a;
+          color: var(--devui-text,#252b3a);
+          padding: 5px 3px;
+          white-space: nowrap;
+      
+          &[data-mode='link']::before {
+            content: none;
+          }
+      
+          &.ql-flip {
+            transform: translateY(-10px);
+          }
+      
+          &.ql-editing {
+            input[type='text'] {
+              display: inline-block;
+            }
+      
+            a.ql-remove,
+            a.ql-preview {
+              display: inline-block;
+      
+              &::before {
+                content: none;
+              }
+            }
+          }
+      
+          input[type='text'] {
+            display: none;
+            border: 0;
+            outline: none;
+            font-size: 13px;
+            height: 28px;
+            margin: 0;
+            padding: 0 6px;
+            width: 200px;
+            background-color: #fff;
+            background-color: var(--devui-base-bg,#fff);
+          }
+      
+          .ql-split {
+            width: 1px;
+            height: 16px;
+            line-height: 16px;
+            margin: 6px 4px;
+            border-left: 1px solid #adb0b8;
+            border-left: 1px solid var(--devui-line,#adb0b8);
+            display: inline-block;
+            vertical-align: bottom;
+          }
+          .ql-preview {
+            .icon-share {
+              display: block;
+              font-size: 16px;
+              color: #252b3a;
+              color: var(--devui-text,#252b3a);
+              line-height: 28px;
+              font-family: "iconfont" !important;
+              font-size: 16px;
+              font-style: normal;
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              &::before{
+                content: "\e683";
+              }
+            }
+          }
+          .ql-remove {
+            .icon-delete {
+              display: block;
+              font-size: 16px;
+              color: #252b3a;
+              color: var(--devui-text,#252b3a);
+              line-height: 28px;
+              font-family: "iconfont" !important;
+              font-size: 16px;
+              font-style: normal;
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              &::before{
+                content: "\ec45";
+              }
+            }
+          }
+        }
+      
+        .ql-tooltip a {
+          line-height: 28px;
+          margin: 0 3px;
+          padding: 0 3px;
+          min-width: 28px;
+          display: inline-block;
+          text-align: center;
+          color: #babbc0;
+          color: var(--devui-placeholder,#babbc0);
+          border-radius: 2px 2px;
+          text-decoration: none;
+          -webkit-transition: background-color 0.3s ease-in-out;
+          transition: background-color 0.3s ease-in-out;
+          cursor: pointer;
+          vertical-align: bottom;
+      
+          i {
+            display: block;
+            font-size: 16px;
+            color: #babbc0;
+            color: var(--devui-aide-text,#babbc0);
+            line-height: 28px;
+          }
+          
+      
+          &:hover {
+            background-color: #949597;
+          }
+        }
+    }
+  }
+  // 编辑器正文
+@include linkTooltip;
\ No newline at end of file
diff --git a/packages/fluent-editor/src/assets/mention.scss b/packages/fluent-editor/src/assets/mention.scss
new file mode 100644
index 0000000000..6a45a88d6f
--- /dev/null
+++ b/packages/fluent-editor/src/assets/mention.scss
@@ -0,0 +1,48 @@
+@import './common';
+// @import './styles-var/private/z-index';
+
+// 模块：@提醒 mention
+@mixin mention {
+  .ql-mention-list-container {
+    .ql-mention-list {
+      position: absolute;
+      background: #ffffff;
+      opacity: 1;
+      overflow-x: hidden;
+      overflow-y: auto;
+      width: auto;
+      padding: 5px 0;
+      list-style: none;
+      border-radius: 2px;
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+      z-index: 1052;
+
+      &.ql-mention-list--hide {
+        position: static;
+        height: 0;
+        opacity: 0;
+        display: none;
+      }
+
+      & .ql-mention-item {
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 36px;
+        line-height: 36px;
+        padding: 0 20px;
+        color: #252b3a;
+        font-size: 14px;
+        display: block;
+        font-weight: normal;
+
+        &.ql-mention-item--active {
+          background-color: #5e7ce0;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  @include mentionLink;
+}
diff --git a/packages/fluent-editor/src/assets/size.scss b/packages/fluent-editor/src/assets/size.scss
new file mode 100644
index 0000000000..704128c2eb
--- /dev/null
+++ b/packages/fluent-editor/src/assets/size.scss
@@ -0,0 +1,15 @@
+// 文字大小
+@import './common';
+.ql-formats {
+  .ql-size.ql-picker {
+    width: 70px;
+    span.ql-picker-label:before,
+    .ql-picker-options > span.ql-picker-item::before {
+      content: "Normal";
+    }
+    span.ql-picker-label[data-value]:before,
+    .ql-picker-options > span.ql-picker-item[data-value]::before {
+      content: attr(data-value);
+    }
+  }
+}
diff --git a/packages/fluent-editor/src/config.ts b/packages/fluent-editor/src/config.ts
new file mode 100644
index 0000000000..6deae3acd6
--- /dev/null
+++ b/packages/fluent-editor/src/config.ts
@@ -0,0 +1,120 @@
+import {
+  ALIGN_CENTER_ICON,
+  ALIGN_LEFT_ICON,
+  ALIGN_RIGHT_ICON,
+  BACKGROUND_COLOR_ICON,
+  BLOCKQUOTE_ICON,
+  BOLD_ICON,
+  CLEAN_ICON,
+  CODE_BLOCK_ICON,
+  CODE_ICON,
+  COLOR_ICON,
+  EMOJI_ICON,
+  FILE_ICON,
+  FULLSCREEN_ICON,
+  GLOBAL_LINK_ICON,
+  HELP_ICON,
+  IMAGE_ICON,
+  ITALIC_ICON,
+  LINK_ICON,
+  LIST_CHECK_ICON,
+  LIST_ORDERED_ICON,
+  LIST_UNORDERED_ICON,
+  REDO_ICON,
+  SCREENSHOT_ICON,
+  STRIKE_ICON,
+  TABLE_ICON,
+  TRIANGLE_DOWN_ICON,
+  UNDERLINE_ICON,
+  UNDO_ICON,
+} from './config/icons.config'
+
+import { EN_US } from './config/i18n/en-us'
+import { ZH_CN } from './config/i18n/zh-cn'
+const localLang = localStorage.getItem('lang') || 'zh-cn'
+export const LANG_CONF = localLang === 'en-us' ? EN_US : ZH_CN
+
+export const FONT_FAMILY_CONFIG = [
+  'songti',
+  'yahei',
+  'kaiti',
+  'heiti',
+  'lishu',
+  'mono',
+  'arial',
+  'arialblack',
+  'comic',
+  'impact',
+  'times',
+]
+
+export const FONT_SIZE_CONFIG = [
+  '12px',
+  '13px',
+  '14px',
+  '15px',
+  '16px',
+  '17px',
+  '18px',
+  '19px',
+  '20px',
+  '22px',
+  '24px',
+  '26px',
+  '29px',
+  '32px',
+  '36px',
+  '40px',
+  '48px',
+  '72px',
+]
+
+export const ICONS_CONFIG: { [key: string]: any } = {
+  undo: UNDO_ICON,
+  redo: REDO_ICON,
+  clean: CLEAN_ICON,
+
+  bold: BOLD_ICON,
+  italic: ITALIC_ICON,
+  underline: UNDERLINE_ICON,
+  strike: STRIKE_ICON,
+
+  font: '',
+  size: '',
+
+  color: `<span class="ql-color-inner">
+    ${COLOR_ICON}
+    ${TRIANGLE_DOWN_ICON}
+    <span class="current-color-line"></span>
+  </span>`,
+  background: `<span class="ql-color-inner">
+    ${BACKGROUND_COLOR_ICON}
+    ${TRIANGLE_DOWN_ICON}
+    <span class="current-color-line color-line-background"></span>
+  </span>`,
+
+  align: {
+    '': ALIGN_LEFT_ICON,
+    center: ALIGN_CENTER_ICON,
+    right: ALIGN_RIGHT_ICON,
+  },
+  list: {
+    bullet: LIST_UNORDERED_ICON,
+    ordered: LIST_ORDERED_ICON,
+    check: LIST_CHECK_ICON,
+  },
+
+  code: CODE_ICON,
+  'code-block': CODE_BLOCK_ICON,
+  blockquote: BLOCKQUOTE_ICON,
+
+  image: IMAGE_ICON,
+  file: FILE_ICON,
+  'better-table': TABLE_ICON,
+  link: LINK_ICON,
+  'global-link': GLOBAL_LINK_ICON,
+  fullscreen: FULLSCREEN_ICON,
+  emoji: EMOJI_ICON,
+  help: HELP_ICON,
+  screenshot: SCREENSHOT_ICON,
+}
diff --git a/packages/fluent-editor/src/config/base64-image.ts b/packages/fluent-editor/src/config/base64-image.ts
new file mode 100644
index 0000000000..c80b0a9b7b
--- /dev/null
+++ b/packages/fluent-editor/src/config/base64-image.ts
@@ -0,0 +1,9 @@
+/* eslint-disable max-len*/
+export const ERROR_IMAGE_PLACEHOLDER_CN =
+  'data:image/png;base64,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'
+
+export const ERROR_IMAGE_PLACEHOLDER_EN =
+  'data:image/png;base64,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'
+
+export const EMOJI_SPRITE =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAFACAMAAABZQ2R3AAACZ1BMVEUAAACZZjOqahXXeRt4TB/LdhHjhw7UfhhMPDEvY6eioqfdixufWBDnjBXuqik/PEmUjoi7dBrtkBvQL1AeWbSFQBu7w9jvqSo6JDq8fhfhkBzrqSb0kxvEJyfytTJJWVfzkxiSk5d/RBG7iyEaVsXhjhgzHDPdjRvqrSytahjvmR74uTTQGkK7vL/wpCK2kCJeInLX2+ZWU1LwuDX1nCE4fcbZghiMk5bvpSDAmCSYPxHVFUH6w0P2tTP1oiPCmCP4pjTmkhwxRpP3pyJBf/H6vjfNoiX9yEfUET7QbX7lqyP5sEJQFGNar9z1qCX6uCU5ODi9RB8xYsJzJYr2rzNzeHcxjBhfYGdrjJOuq6jWcSNRir78yE1/UB+OakSFYpj4gKrUqjHj4uG1urucm5nbShT7xj78uzT7rijpvlWhjXTR0M7DxcUqKyTJu6Peix21p4y7om5vT3+Kn58WEw/SsmGjQw/8gSl1xOeBMAtruiL+yyr/2yv/yz3/5ab/7L//1GP+wCv/4JL/0yr/xzb/zkj+z1z10yr/1Wv/23jswyrxwDe9kh//0VOkcxb5zXP+2oX/4y7+zTWqgR3JniziszC+mCvXriX9/f3lw2v0z2TfuiXv047Jo0vjuz3vwkKcYxOkiVS+fRe6lEPx8fCRXRWziy+hfi/xyE6+2vuHi4lNTE+rV8D9mSTSsk2DZTGbr7Knfd/S3dyohz9wqrKTbif4ZxjcxIuX1/m0xN+sebpDOiLxmW/PmdmRNqq/cM9VSSixYxPTuH6Lf2WNqM1qXDSBdaqPtPD9p8ueYrLj0LGar3T7YICBnlGfAAAAe3RSTlMABQwTGR4kLy8xND9ASUtNWFpbXV9gYWpqcnd/hoeOkJKSk5WVl5yjpKussrOzu7y8wMfIycrMzM/P0NPZ2dzj5ubn6Onr6+zw8PLz9fX29vf39/f4+Pj5+vv7+/z8/Pz8/f39/f3+/v7+/v7+/v7+/v7+/v7+/v7+/v7LsskCAABLxUlEQVR42r29i0MTV/r/n0wSgkZAUpWrKF4RKrbEInYBa1nk01iDtrIIRroBOkm4463tYtpESYK5Qc1NLklArsJHcKWstmy33rttf3/U73nOmUkCJKjrfr5nbTKcHcg7Z87MvM4z7/McgYAUJiFJLk9KYARR5W3qRNK1dQKBULjyZ4EoOS0tLTlh5U7SnYc/Onnyo8M7pcL/Sp1s/+GT+pV1WDZtXamOyapUq9VVBaJofdkf9X/7HZRv+z/KFr19nWTn2jpStjYc2BStTqIwG41GS6U0WsvJge+4MnCS/vbb1El2nry+uo42xK6lpQ+j1UgKDU4UI4kco+yz178Nl+tns4VvWbdzbR13lC5MTi58uCnqMO1nLX19fVXy8C7SCsv1kZGR61DwzVIhpXVR5Y3qZDHq6LfeurAwOXlhV5SYPGcfllI5X7FTOzQ+vTjef/Nm//ji9PiQdicDdX39g1CDBTb61qkbjNQNYp0oX9t38+bgFay6MnjzZp82m/ZaJqOhYfLChQu7xJF2KHMaUYylkjuhEg6z+nn90BD0JOPQEGyyhxOgbn56Wm8kRT89PU/rLFOLfN3ilIXU2QOLiwH6u7hlP5wgLWEtRqN7FPbUT7qhR8B+tF0aFkDKhQXoxLwYWaXTgmqMLNc0SRUslJCdNRhYewg2eyuSkio8br3ZbCDFrNa7PVhnn/IFg3assgeDvik72S/g5PdTm50Bsp/BbDa7XLCjd9QNm4YKGe29F1BMQ0PDwof8CZ5UaSZqjIYC2oflKq1W53GNOljWMery6LRalVyuCoYMUSUUxDqvY3EB9mBZ2Hth0eEldazBjt/DgF/FzpI6/EHjwS/n08BmrzKJimmpawEpLXVdDbwYmdJA1BjZyjROjE53z6H0e2/d8vqVjns6Hf7BXrtD49X47HYfvDnsvVhn7z5/zubV2O0ar+3c+e4Qt59r0nULisc96aL79fb23goX+KEiifSYlubTdS0LDU1zNXW7Erk+U2LqBTlGi65XwdDDpLt3T2fquXGjp6fHhNvY1KYeh2vU5b9xww9vjh4T1JX/8fWjc8phG5Rh5eyjry+V437wk9ttvXHDarM5XDYT/d2eW3p2ZoadYfW34G/iYYIe0zV7ebbrQkNd+1zHwi4h16eLVTqtwaI+rmWltANDy4CYa1a/ww9idDrsmPAHrTbrtWvXrLZhG/zBwwmSc1/fffRDS0vL2Bi8/PDo7tfnJGS/nhvXsNwAQbhfQompxxasu9LVfaVrvms+6DUVSkiPaambq2u50NBWO9tx4YKYP5c3pWYWqqv2FheSTsPs1ZlMJvyLVscd2DLp9jLMXmwp/AhroLmrqzto2stsOHUXPr+utRFKax0ou3tqQ3g/K+qGpoX9mJ2mnpmO7o5u+L2OsWctY/N4aguh+3a0dow1NHS1trVc+DDqHiVMU1fJpQn8RY9I+f57h0tlwlYlFzOizu9wKP94/uuvz7tkgg2nHj06tTA6udTQsDQ5uoA/beD3U7pcSqKG/K6yJ9ht6w7OXwl2a7DD5jICZuuH2HfhTFpYIGc432tIr62qSg4r21tNtHwPLdNz7Ub1XiFXZ3VPQnF3/fro0a+5DLPl1Kk/NHe44v/j1KktDPe7fpfD4Rq+xv9udrU1XMaf1c0WpUOPAR14IkFpwYtN9HU4WoxATNVAO6h6eqr3ivk6q4OU4PNHjx79sFkgTNxdfcOmxCq/rad6d6KQ/12bFb6J7Rr/u6Ls6h7y7aCxhhtqitKLxLvI9a6hAw5xx9iFBfwpIiY5Wgz8RSW2tq3aZFLuFUfq6JfraYED9cOGcJ3NZr3Rs2I/0rui6kTZ4bryjKKion3iXRcu0Ktvy9gC3YwWU1kpi4acTftLlNXVypL9m5gYdVuOHElhXmM/JgJc2aSuMDtBIN6Rzgi3XlhVPtwa+XRpSYl0BXOJpakZGalSccw6oTh8b1t3vxUoKpPLZRKUx8DvMlt3pW9NSUzZmr4LS/rWxKjTiUlNXYmscmBHoES5KJpFk7J37sxOWkGOa3hXuAUOoJBhVtFtLC5eQ8C4X7J8FScLZPkn+wGIrvefzA8fPUkmYGx/v/7k4UzJOry74c97JFS0ZH2mBraCPVbrkSpKVx4iRv5RP4+J/R9RpULZYf3I067vvut6OqI/LBPG411mz91TR0/2QzlZnpmwDlPDn9y+SSB+Z1U7yFacSXh3Ku+PYGJ/ObnHgpanY2O/f/fd72NjT0FNPN6F6/KjH+gHXz9ZmBCXqVH3dqnwnXfFKxsHTmt59M+ScvX1MLRev64uh9aUHFY/7H46gjUjT7sfqg9LeN6ldWHe/eAR3Bba6Ad/ayGiY3Exf1CK66WSTeuIEabp+gaiSp8uTSjM1PWNPB2hEAsbfbpMIeXdK0tQO7J0hWNbuEfcfXTqB/6DT+YLYzM1V7bX12ds2r5SjDpajKSQJRzaR18BdAol0sNsX/8V4OGbN4GPr/T3sYelyLs3b46PBm7eDIyOI9vuZIRbvkYxp+A7XIf/wReRx2RqOEYMIxGIi1Wq4k3bpVKBhHadBCmISYs6brJy1ulUh9QAiGZ4czrZcllSBQyu+gKTUxbL1GSgz2g0VyQBAwPpTo0GjMbA6BRsAtuKdsP9ElrmJlf6tPmiWEwtELwjlW4XpnZWV3emirdvZ7ZL6BiuLLtKXZAjl/HdmmCib1JDYHHSB68qebYOODY0NRU0GIJTUyHgWF02ZVvPKOyoGfUQtk2Sls+e+vrUD1ecpFgsFrZcGoup4QBJM+tl+1VWq644qbj+ne3kCimtMivVFrO5V1uWyXBigAwdo1TMqAN+UMl3agG6fRrCwSGAT4NBuxP2g5+8bvjB7vYi26rkSRXB7tk/5lmO3InAWEyNh6m4s/i4De5squMq1X56TWIUZq3FaLGYDb1lUm50ABBjGwZyvNFjBaozATru1BGO9fqmpnxeFjlWh2J67WG4hU3Kuwa7xqNBgfhG69YyNbbC8WpdNbm7V9tsx7lOK6/E/moENZVJ9HQrBzE3CK/doBxcLs3WIU56xlqAPsZ8hI2zkXdH3TwDuwnvIpC7oDjswOVQ7CZsLZ6p4a9xTA0fk6pCAkBqgqLaz508Bb1EjNPMiRHlA3zfUfr9w8N+v/KOsseUL5ID2PQ4LtBB1wUH/FAhB961NbTwDNzSYAPelcEXgaa32m7cIG/wRWRhpobSwzE1Ja7vsTjxxXacuxLKtTjWBjUcRAjl1T2Oq1evnoECb8qearlQWgJHzvXkyRNguidPXMM9phIp8u70M56Bn7mRdwmQU1gmCIxAzjG1lRB0D2VqHOIjgcEYyWh0ohgJf8Elg22jk+szAibfZFU+OfP/QTnzRGk15QNNZlb3KF08YsJQpZpc9HqGXTwDg0C4mAkzKZBbh4eteJR7TGQ/ZGql2+Fw+0EhYWpofxDjpOd/lBhBahkZ3prz+JuGrKTHqvzkr1A+UVp7SrDBJCU9Sp+f9g+/z2MqkRAutg7zAocp70rKCZC7R0cdVgJ2Eo6fAaihK1l5LoaWgcNkvInX6ZvGyGESCJOqoLUs5vzw/VRaWG3757+h/NNWXSjlBV4jxxhBlgokvBthYMqYqeXQOfyO4WGHH/YrT41maiv8Lr8fXEGszpvffjcx8d23N83VeyM3gEoipiQCINLd5VRM+W4pH5UrMfF9wVTCIUQMBmYylDD8u4YnybUeZQYTl4sTjlebOTFGlpIBradiCqNpSJIKx+mTVEnkPiHJLKnGYVR1SQSuYvCuMDW/mp7G1fmpwnW4WJZfUR3S9w/pK5WHkyIfw+RXVrKVyuyVTCh9552VoUlGmrF3//69GVJmXd4VSjL2l1RUlOzPiPomMfeTZ2dnZmenpSWtCLUmJKVBlegVDPxWcWChRJaUJJMwglcWabLw1Qz8NnFgQUJ24UdQCrPDdTDC4JUxjDgK6AtKE17FwG8VB2Yyyy3XV9WlFNXuSEwUC5jExHTYjHx4qVr6KgZ+mzgwk3m2f01d+sUv5oqKdoCooqKLXxSFm0ZUqpa9goHfJg4syFQNrKmDhqmdu/iyKDH94su5udraHbwaUZU6eSUD90cQuB8Z+K3iwAn45VbWMeL02r9/MXfxt9qioi9+m6v9+8t9fLeRrBCDDDw4HtDjDUsfGB9EBqa82z+ItxIM8/IxXxIA5l4idTQQ3D/IcXE22Y/WcfulFM3VfjH3xd9peVmLhyw9LEa+ioFnptwas1njnpohDEx5N7CEsdylAOVdWjeOPwaWxiN1Q/NTlHen5oewDr4cXFPHMYo8NM2xcgpImbv4d77Agbr4Be3DyWlV5qzIaUhDpV4XYqILcdKAgIQM6aO866M4SepCSFDIUyGuzu5zu7kobcjt9tkrkmTlvfAL7lH4U7CjmuyXcvHl6YiWv//9i9MXX+6g7QLkzGoL+BECYWC722G/dcvucNt7eZxEkrRzLwa+zu4IItXBC1fHBoMsHy3GbfwihJU1WK3R0C9HxbwkjYOvL3kxCVU49DD3KiWCCAMreQZWEgYmvOsNF553AXxZisBsb1QdfAvyj9aBGALQvXY7S8LAUIeH6SK2B20VFEQOkyzbgmRlNmi505swsJVnYCthYBBoGm/p4krLlInGd9cwMNa5HUAVVqsD3txYhygKxeZwux3DuAV1Kacv/vb3qJb5+29fzGEHzkPqRATmxcRiYMBJbwsG4BAxGztavCYSG17DwIidfrfLbbt2zQZvfhIvLkQxfgcOSxxKCvhM+ulVfaZoH57aeWbCeZawmFgMDLy7SgyNDa9mYBIHtlop71qtNA6cDXU2B61zYEAbKI5JhAtNpFwsShTTOKeRInC1VBCXgZF3x561cOXZGB8bXs3AXBwYhVgjcWCos1lptNM6fKNHRb51CrbNF6e51318Q1A1ZkX45I7BwMCx9vlwsfOx4TUMzPGu2+VyW6PiwDc4ZP0e6/LIB4lT9s1hi6Tja0pi+PJPENhQGBU2WcvAYj5SfS3CsbEYmO6HnfpadByY/i5qMeXRsxZaph1bBN5Ph1sGzm0FoU5lFEetZeCYHPsfxIGrOS2C9LmL+1IoQuyDzciDQRxKmctEgnUZ+HVjvrHjwHkl1VDK8mT8H4QW2cf9/+lRLSPJr2RZtjpfKFifgV875hurTiRNlsuTpVHPtBMT+R3EkU2BMCEtKztLniD4v2JgJisnOYyYspyscL04BYr4VVz8nzCwMO5+ogJvWQ7tewk5Ci994CcQJu4oqjl3rqZoR6JwHSn/EQPv3bMh3n4JCo3GcyIjOTk585hHo9FQ7txRc7/tAZS2+zU71mmc12fgswPfclHWge7zW+LtB2J8Po0eS9Dj02gkRMu5pgdcaToXX00UA18fGVmPgaPYduT53Q+YOAyccNSnmQ9c6R+4eSUw7/UdA4VC0NIaLqBGGH3qpIWHTtFx4KctLd1DPAOP8BQbyx/R8fXdr7fEZmCB5JBG09I82z3wdLa5JeA9CqIT4RhFlfs1kaeCCVmlaoV0dRy4r+9KHajuthMG1i8u8h6HxUU95V1jhIF/+PrR13uYWKwMhy4v2NI60dg10P1g4kFL8IQEDtKl+1CaSMGtS9yBYpKylb0GtiAhmoGdGAWe6Wqsm23s0CMD26fG9XrKtnr9+JSdeiGAbScDFktgcvzSqUenPpDEYmX4iwpN18Ttxq7+7sbbE20BW4ZQXHRpFsYnRNElGLPMXioiVxphhlIL1zxlHgy30zAajAysARjxGkIdjbM1D1r1SGte39TS5BJaDeBtyudFkGKjGDhw/tT58aRYrCwQZHmDXRMTbU9vDnY0TrTN2/NEKedmTze31p6+BOV0bVvN6dlzKUKpPDmrkgvpkcaoTEMGBgL2ORx29unEg9aJDmIrYEMtl2YDGpbVBGYvtYRYnoGnglN28jL/x3xsVhYI82yh7qam7sGB/u66ti67XSFNOXeuvWZ27nLt/fu1sFHbfu5cSkJhZSWPM2i8qqpSJBMGvkWCrzdCHUBSesrA7P1f74cQd0OwwfK8y7K3AGzhhQ0zcMT4QHlXID7m12jGAzNXOrpCmnGPxn8iFVqmvf00/IOGIRvQMvJKuF33UdDLk0mlCRiyIAzMP9/X60M8A6MYoLgbKIZjYC/PwH6lezTseyBfBHbkeFeYOOXw+XyeUKBh2g4XHGjzjMQjl+baER1ADJT2uUtHEtMqjeTZidHoNGTxp3YcBu659Ot9m2dsTGO7/+ulHo6BF1rCZYFnYKD5YYxIu5U09CpOdAPz2Ox2DQyj7Da/Q+neyuSCirm503iY8P3SpVwmjSUtgzjeG3ngH5uBQcwlOENbx2yXUAz1OCw9q2tDBm6ra5juMe3kPBNKB2kvHArgfsyBYRv0QM3j9mWfHcDcdjRRkHjk/mzt3BycTpdg2D97/0iiIK3SYkGwgoFKtSwqqhaTgUHD8OTS0mQQNmxhBp6cXGhoWJicjGZgjnd5Bhaknui1uf1L7e3tL7xuv8m+G/5gypH7UeVICl5SDKyWRVuSqTD6iVNMBr70/JLNdeeO2wYbYY+DP8zA1ursMANHeJfEfKUKtlfpWILO8cLjsLE2jMcyKdAqs+cuXaqZhdbBR/aitLzC7KwSpVJZkrYirBaLgWefX0KXiB/EzEY8DpSBNcDA9KYYZuWomK9EYTb43Shmwe1gDUF6ELBt4EjV0nYJdxKRSLSKKGIx8I5zs/hwwmqbPbcjim0JA1t7KnisiMHAIMbsXZpaerEwtaRkzfZUjmdAzSVonyPr8kwcBk4pUiDbFhelRLHtTsq7UcC1loE3HZuZ0WSkHjp6KGPTiZmZYAa3rzjlyKVLR1LEr46AviYDx8LO1fuJdx8LHN0kFEnEQuZQIHAoHEAUJqakvKpZ/ut+4ISEyCcKExIEb1b+u35gJkeRxUf4JWmKPOEbafkv+4ElCq9XkSkSCAViOW4yb6bldWO+UQx8Nv5+wMAenw8ZJe+Yz4MMvJ4c6YrD+Pox3+j47oAqbhw4QeGb8gSHoMyEND4Pkp5g47aDBzdzmjbmHjy4URgxQ+QlR8S+TcyX1I0M4M8DI2EGPuqAscHNmwM3+4aCBMgZ8cHGiYnWXFQg3Pj+xO2J9zfz8U3WzFbmJDFhP3DfzagSHfNdFQc29gfGsa5vcDzQb6R1Q4Pj4zTmOz4+SH0P4kMa3/T8TQD8m0NT0xoAcvHBidtQGlHBxvdx83arQCSDkVWyvLC619Cr5S78lGOjSiTmO0k8vZGYr8WoX1xCBl5a1Bs5P/D49PgQ/b0h2LQjA4vyfNOBsUHQAgJ90ycSBJtbiYDbB6FP5TaSzQkmq7SKFAxDWNjCBAlcECjHmsMOgnDM1zxF2XaKr4NbrDnoctvtblcQNlmy34yej72yQf0MYWCZZirYMDcGh+nK3Iugz5cpPNjaPNsGjdO6WcAcbJttfgBqmBxUolY7Ce71WSorldkCyrFRJRwHDmIsl9UEo+PA7qmQwRCactvDdXafg4SyvQ6fnTAwALndvNA+BocucPpx0O7NkxyZA55ohuOUK9g4i+DZdvu2QCJLlsvlaZVmOlJyWswlAhrzdXiIp9fhjcu2ZD9NkFYFNZH9bnmoCcNzizKw8KjNzo6/0PeP9M9MT4Xs9hPS05drmtrbYeCSK0hsv9zcfHkOxHBdtswMx4nYdyxKBHKTY9TlQE+vwzXqMEWxLT487+HYNj4D+10YB3b56X4A5EqNp2Z2JtDVHQpqPB7NsdT2y+2nL19uQzEply+fPn15eYIXIygwOIkanH8gQLZ1DFvpY2PA2Qjb3rjh+uYb9w3OVhCXgYfdfis6ZN3D1H6wyaHUjJ86Na9ZmkLriEbpyHjcfvny5ceNeJgSl2Gz/UVETE6v2ezEPmxxKgXIsdaIp9caju8CT06Ojk5ao3y+sRjY6rcNY8tAe5HfFSce89r/ePToD/SU26HYTqQWPV5eXn5GOrAYtx/XhQ+TILkSzhsYxcEpUyKI7emldS4upNqzDgNbHUo4uHCglQ4r8UcId/sDP9y9+0PAhx2rx+Y9Ksmt62rpgLPp4EaBELeh/06EgyB5ZZWVlYq8wpJCuSC2p5ey7bDDMfx9tM83BgPb3NDhXPBv1G2lDCw7Nnbq7t3zc+3LMPq0eZUZwkS4AONFLxcuiZvbJmB7ojVya8SHzgmMJEESz9Mbi23jMLDNYbMq/djbuP2EskPnHz0637A4vaCx+Y8B6DGbm/B2cAT/bya3rXGisS033o0zXsw3Vnw3BgPbbmB/u2EL7ydM3HH+fEuQtXv9ykPoNGOEm4801eXSwBuTWwfb8eHz9eO7r8PABHd3HdP4/ScOUXMt6kkUR563J67Pwa/v8301A9Mwq2z3oUOpHPAxbwaer8G2wg1b9uzZ8zEpsLFlg3Cd38VaIXbON9Txmmwr3vLBZ3u2pGw9UFx8YGvKlj2ffbBFHN/7KxCkKaQCUZZC+qZaXott9/z5z1skmeW891ey5c9/3hPX+wtXoBP+HMlujSb5jbW8DgPvOfX1qSMtHb9j7PT3jpYj8OOeuN5fAbNb6VdkOjwnklfNXYxuvVXDBiFl4JGHvPf34QjPwKvrxKDmUVQBLeK43l9GDndLTVCjiRLDJKak79i3Lz2dnleMLDlPSvuWBPu5JCdNhpd0/eJi90Pk2Ifdi4t6eplfW8cc6r7//GuuPL/ffYiJEweG9so64YBb5MzQjCYclBKn7yuiZd8+HOImKApKMeSaViDJyYFxTU5VQSkycGBwgCfggcEAZds1dYIklXFgYGTkIZSRkYEBoypJEDsOLGDyZvQ+T7Dv5hCMtNPolSZlX1Hz7OPa5ubaudkjRftSmOSCqtIqhUSQV5WQV5ogSoOfSgkD90UIuI9n4NV1onytEa0bQ319Q2jjMFLvb4w4sEAWtAzpB/sHBnGWnILEe1J21LU2nV6ebWycXa7taGvekZJTCp9elSPKKZXkKBKIllLKwEEfnevmC0YYeFWdlASv3ZNTavXUpNuJBg5p7DiwKC9k6cPBQf+M5sWC7agYwyFwp6y5vNw8MdG8vFyH9ym5oqpUXakuKKiSFZQiD4M4wsCsY9KDH+yZdLA8266uS6roxaD0FAalp9CY0UtCtGvjwBi5chr7cNhk1M899mqkcDvCIcHc5fa55ma4mbfgHTxHUVpVCRjDquUKM2t24kGjxgy/24to63X7w7wbow4/0oBz4gyaMJCvjQMLkjTwt6FtbhqdweVluy1DSMdKc8h7ly8vP+7CnxIKSqtAi8FpLqx0Il+pyWFCxLRR458tzLtr6uQq08qJd8T7y8eBe3p4VhYIUkEMkCR031BwYYm150k2krHSMyTOy+2PX3RgywikvJgKLXKeU12VJuB5F+E7infpXDdEA66OGC5sthuk2NBWgA88+P38nAmDPMg4gQZyp16P43+NPdCVS8W0PYYBy+nHj7sQrg4CcJYS2jTkV+JwzanOYgSUd3FW4Khr+AbHu9xct2EXgT9SRwwXw+7hawS+UUyhJGrunOOOicaBoc8cs9l7WRgZeL1ejcY21ZAhPEgGkV2PHz9eftyAyt7fCKd7WhXOCK1OKiRHiczaJryrdCHBufwrGPh7x+Skg+diYZoO6jRAxW4XzmnsoQ/JCIGR+XQ4+ZFc9Jjdflsv2mdYr8fngcEBIxC+T9qmtauFsPDE+3RCTFoZy5alCaQlWrYyW8LPibMqSWRzWLmKgV3uCANz3l98/oiQbop4f1fOp8Om8drQ7z/1eLl9eZk8WmK2vU/G/hOEhbfx7kJZdjZChjQz/BCb8i49+KsYeIWnN6m8JxKA7qEPVmPNp4Nec9QPo8rgi4Upn5ufF8hsO/g+8cC8v020Lua9HgMzcmVPGNKVcibufDpA8qMaL06L9SqPSqMC0Bu3bdu28VW49boMLMtXknmxJmXkYXxMBhaIUncfPXrs6NEMieDNy2sysEieh97fvBU2hVi/CyIlUqlUIvwPtMRm4A1boGzgvR3csY/Mf0tMf8M4cAKGqpJlqwXKkplXMbBgA4AmFs5n8Ol7SCHilHTgI7r13qdvGAdOwIe0aUmrQbOkUi5cn4GZPX/+9dFdKI9+/fMeVP7p559//t6+Tz+9COXTT/e9Bz9++oZx4IScnLScnFVUzCRVmEtl6zIwarnLFarmU1Dz6adf/PYTlN++oD+9bhyYF5OXA0W+Kg58WKVVh1svZsx3z59/vBsuP/55j1AAjfLp50QKkQNSPt1Hfnfk4UiMOLB+aKh/aIiLA/OfW4AlbZUVI1+lM6v5AxWLYzecf/7jj/APC26d3yBIh0//7bf/hfIT/Pfbb/BjOv7uyPjYyCovxFEH4C8NvYaoMYOfNIkla1WfSchXaZ0KSfw4cO7zpucvXzahlqaXL+GHXEa8DxqGk4JqPv90nxh/d3GcwvLgIM0VgXFg39T0dGDg+sDg+PT01NHIZaqsFEq0GKEoQSZJyNeZuTmDseLA4iP3X378sqkNfRRtTbB5/4gYxPzrf6PKv0AMzn8bHzJiIHhocXp6nOaAEOV5PHr9EHInYITvWPjcTqoEuqzMizpz0gpKSxVpmSrWmcO5Xg3mkNtFUid4XO4Qcuzmro5VpWtz4qef/wsKpwTK558mcvPkcEIdGwrNzIe4ODDrnB8bg+FFYHE8xNoy+d6Z1msGdC4QRk0bx8fJFrWWNZdKOD+wgbVrXAC8HpfGTnh3c/dTGJA8HXvKvTx82L05BcVAH/4FCvReFJNCGdgx6sHv4fKxfByYDT5eXh4b6H+xvLyApMcdkywUY4ic6pK0srKSMjpZhebMoLFc5aSPZX2TShrLTb3SdW5wcGoyMDgYmJyC3jB4JTX9U2yWi5cv/vILvGDjfJpOfxdQ69YtjcZPY8MC4VGvPRjQ6wdHRmZCmoDddoKfSLWz12lxGsrE4YfGlfkSRpR6WI0xaZIzg3KsY1R544Zy1EE5VlZ26dSVGWiomRloshkoZbJ07DKgo/bnn2tBEXaadPq7OAutB+HUhjFkgeSYx+PRBEkc2K6B7WOpvNHB4LRYzEq+DyUUOKuS8BaPE66MZTLSgfEPDjvQ00tAFhn40NeP/mBvURstGqPthxNSQAw2yhc///wFNg+ISVnJwMqrT1TFm5hNdzo7Oz0eO4kDO2DbkUHvYMllBid6f9M4LyGz02nJEwklWZUgxkJms3MMjHHla1aegXMf3f0huDLfQ+J7KOYnaBhomp9QzHuJKxi458nVM2eufijedKzz3j2dFqDTrtXp7t1TnUglHaZEqTVAbzX3KsvyaN4VOWupykkrIM9VzGRgzMd8MZLL8+6GD+7e/foPq3J0ctLlt9I6Jv3z//3lpy9+JuWLn37538/TmZUM3Hnmyy+/vMow+4mYXtY77SZiiqX4wThtDx8TOHthg3o5mUKzxYITUyPG7Rhx4A0fPAIxNhdGyF1Wjm0TP/3XL7/gHI+XF0/DYfrXp4mrGNgGYs5sFzCpxSqVzsQaNEt3dDqdqhPng0Ebohg8HgbYKKedOKnMTCbKwvC0XBzFwCQObOV4V7jl1NeXgjCSstmGh3kGFqZ//tsvP7+caz8999PPv/z2ebpwNQN3nvlwK4wEGNlRJRA5EYNxYOQf8f4VYo6HJ7GR50u9Jt3e+AzMbNmyew0Di4kaUlCLeC0Db6XDDaF09wk/IPCS2+85REOMwtROaC08TOZena7zAI8+2RUmkr+kWPamDCxOfw9uTz/9BDem99LF6zGwULb7hMfh4OPAWLMp40CxSstqzx4/kLFVHEnDUHz8+PHi3ZI3Z2Bxyo73EK7e2xFtr4jJwKLoODDHq5t2HSg+cGCrWLhyvpps06rpaoxk09atKyvFW/Z88NlnH+zZIv5veSEk8qycLPkq+4dQtiozhDBx14foufpwV8TEAQh86lcop3gIfmsvhCxPqTVpq0vSoj5ckiAqUCRExz3Fu67W/5OU+qu7uH6+5bMIdn625Y3mycVhYJnSBBdBuABVRxBdmFcmU5TKpHlJES1n/hkuZ6iaLR/8GqHOXz/Y8iaeidgMLMojWqD0RtxnjIJNUpRK01g+KCqM1oJq8LLwAcecHHl+IH6DOXHIwJo1DJxc2Wuip7HWRC/9oqw0ECMHMXlmntITz9RHi6k/kwgXvZc//njp0n0Ucv/SpR9/fLmFmyc38mp/BDDwlE9PGdgY0jg4Bk7TmriiMxXS7HLQWwrYNDhMClbG55X78h9fRZV/fLmLAexsam5qratra6ura4VNwE6SB218cTCWZyJ6nhzxQkxNLw4CA/cHpqc9HANnaaFlAH+IGAk9cFXJeeYsRam8ik9iJ/kQxPwjXEDMh5LEI3XNrRO3G5s7Opobb0+0NtcdSSS50TjfwxBahePMkyOh15nAi8X+gQF4DdlPJITFYAgSD1YevSpnqdPy1DsVpVlqvpNvOgMSrl79EpV8efUqvJ7ZBNhZN3H7dmPXw4ddjbdvT9Q97d4MvBvyqVkMsLJTbvfUTJx5cpSBx+Ya+gdujs+9CPIMnKxEGb1wHzJp03i7SkGeubC0tNBcQBx7AsHWM0TFN/VffVX/DdF0Zmtq99OuidsTbU8HB5+2wUbX0+5UtOXCzY/M4bOHghq7IfY8OWgDG0u8EAPEC8EzsKTQhBSBLaPkOFTKVimcVRZ1FY4NkgtgPyLmqy+/ufrVV1e/Ie1zZqtUob/S0doxOD89PT8IG1f0CinlXWJ5wCfHUV4Ifp5cxAsRYgML+n5gYM4LwWU66FRhtzFp8yKz2C3EJc1mMWlqdb6EHqavnnzz5N49ePmKHCbxfo9nXj/Djl696mJn9PMez34x5V2la/iGVQnF1rPCDxwVByZeCI0m2gtBP1p5thPapdekTA6LIaZXOHKFWVVV+XAFl3wIWr6qHwU86xyFY/WPf3wIzQUca7tmewLFes3W2XlnKx8vtnKJ0FbFiyNxYGbTlFKD6TOivBD0ipZn0pHuG561LiqzkGx80KJmjAJjwhw8te+p7kFR3cNTezsjSLxTreq02p7cufPEagUSuZMo4P0RhIxXxYuj48DEC2HHwGvEC8FwVxpyMinDUT6mDAYLZgwCW5xcxgE4TiAGjtGFO/dQzBlMnXOgukc1bL1z547bOqzqqT4QZmUu38OKePGKODB6IWzQo25hR1/yES8Eb8GAT+41RYa3wkIztgyAsLmMny5ImqYeebeeNAw26m5bT7USvu4dh1VZ3WPbLYid7yFmHFh2zGuz24NBjW9hWUO8EHwaEwzPV0bFZ7K12DBQq80MAxyq6cTD1IlayI0yQ9VjctjweYLNYepRZcSLDceKAwuRgR0LUKZ91AtBSxYLH9sbnXRBkg9HDi8Ie6PMAqCG3BL+wWsRHFCZTMWHbDBKPFRsMqkOvCpevDIOjAyMHQea5VDkMXsatoM2OiuQULL/uEqnOp4pWREH3o5jHhho8By7y6FR7hJv2r17k3iXR+PY9WbxYsLAUV4I3ilTbarOW4V14k2bVgdtBeLErVAihonErbswzs7gDJxdu7YmvqlnIgYDg5qsnDTJfxoH/n/kB2akr4wD/z/xA5P/S6Z4VRz4/8YPzLzzTtR0RoGcTGzKUe/Nkr7CC9H/8Hes+f1h/xvmhYgbBxZIt7/77rvbIz/nYMYtYYG6sJIPtcXx/o6PjY2NfPvtCLyNq9bJCxHtEV4vDpzwzjvb//Q/fwI1774j5sKL2VUFEoG4VF2mzoyOA/N50MJsq38ayW/2VP8mHuHoOLBxJsjFgZl33/3T/0D5E5btUjpzo7CyVCaQqSvL2KSIH5hn28HF8cFI3l9icgC0HRx8RV6IqFzAlIG9oSF9oP/6wJV5ywyZoAe3Y04MqIH/3n1HhHhaVgJNkuUsq+SzSnNsy+UyG+fy/rLG+Wn9OFSPj+un58N+4CjetYTrpqlveJrPBSzK0zypP3N1/Prg1auBOx7CwFLQQsVQQXihF2ZVHlbniQudJZWV4ewHyLYklquZ9Kh9IZ5tNaNujA27RzW8H5hlI7zL5REmuYBHMYfaqMscZuA7eD0PDAxi9OiMH/oD8y50FiJj+6Z3tkMhT8VkocOhyoxSdTFbxghECSISegW2xViuwTPqMLAs7/N1kITDdkRMajXQarVned49q6V5hDHWo/FFcgFTBu7Ee4t+oL8e3uptwLbQMHiUQAojegfaiJ5Sksryj6DzqivUhUImpzRHwsWBNRjLtRHbA8e2GgerwQ/WsA5NOOcZhuowK4RWx+cRXuuFQAb21n+pAQbW19d3IgML30Ex726CJpIQUX8iYpgSVo29w+LMF6Y51XkiGgcOPgsSV4E14oWw2WhGU/Qc0Lq1Oc8iDMxRcJiBPR7CwB68zhxLZaA1/uddCVytt5P+Cx2YGKwKLdR7y+ZLFWrM4Igca/3j1BUebaPY9oanpUVzLVwHY/ZODBdfu2FzqCJ5hKmBF827cRlY8i4coe3hEwrOJnqlKcS4sBm4WFVmJtkkkWODP9y9tCLHL8e7OCcu7AfGnGfVbpfD73e4HFwe4Z24n18Jv2r1kwl6OzkGttkx2XQvvCMDS+C6GzmXsO/Qk6fQbHHiqK7X7AzR+xNw7B+P7n69uNYPbMN8tVF+YMxIMUzScvA5z+icOD/UuTVcvJgwsO3x8gsgvRePl33IwIz4Hbj4QoNwYviY3n4WOLQXH29oqXEBORaTMtes9QOjOdm1mndJWrxVOSDCddk8A+P0vHYyRY8y8Hbov9AgpHne3c7fOjOR/XoNCKORrAso5o8YfmClGwcCr/IIR+rojRIZ2D/9GKdvLvg5BhZjh/kT9pl3t0eevEtL8NJgNphUqRFUyz31NXlUsJptrTbrG+SACHuECQP7lhYWpjRhBmbgYodXvu0r8t9mqHC8a1Ltj65M2XH0P88BsdYjTBjYv5qBMe/Wagdl6n4MA69MySt8mxwQMS24sRg4FuqJpZs2SYT/GQO/Ti5gUTTTRn4QyuTJCWv8KhI5eiNE0RmHXzfnmUCSlL137ytyAcsVObz5QpicxzuChfLSqkpF2uqvllZVKhGIchTJb8rAgoSIH3idXMBZXq9mLyoTyvJgk/sYWWkfq1PnrBaTZbHIBclVlpw3ZGBBQv5JOinu24GT+fFzAed5NT7fUUDgLILAfMLQqj5WG0n8GGZypzFHmGaxZL0ZAwtkhy2R/cK5gNcycJ5myhecIXPi0C0WEWOuzFvj4k6o6iuQ5Bn5LMGx5rXFYmAmf6Xo/Hh+4N0OT2gIvZ2AwHaPj7uewbcvk689u5gyY6lMYeRMK7HmtdH1MPicZ5zHgfiBIyXiB17NwBmekJO4Xm/2WdT2E9zHKIxs5poTm2FkCnNVWlWfIoFj4LXz2tDj0NLV1Q21Q91dXS163g88tBjAWVqBxSHeDxyDgTO9asvYFRQTWJxhNRm0/1qMlas9RYLknKxSi5YtUBu5vhRrXltShb37QeuDtm6W7W6DjW475wf2TU7qnU795KQvyg+8ioEZhd0cmHuBFtwXcwGznYwoRXlGi1K2umEURq3actakNfAPMmLNa5Or9B2NtbONXaFQV+NsbWOHnvqBWbfPjeAOb2zED7yKgaVeENP+GI7f0OP2gMGuwX4kLe1zEjGMJDJZXKiAZmHx4aUuKSpR26p5bSCmtXG2eaIjFOqYaJ5txCwaxMARNIQQ0kOGIBvPDyzM8NrZ0NL40MjI0PhSyG73ZpDu22eukAkSckqrShU53OVRWKzr7NSG1Gpge2EkUduqeW1JFWe70Pl4xWq9gu9dZ4kf2OaN+IG9thV+4AgDM7tJGDg03909H8IwsBITDuQZ+8zlMmkBLhVitHDXW2FxZ2c9DDrMRgtN4Crg57UhBvDz2oB3zz7t6HiKk/bw/ayO+IGVo5wd+EaP7UlAG/YDW23D/mErx8qJB0CKx+MNTk97vZiYx3NAImBK+4zm8iQFBXCLpYpknBGWmQ3aTihsn4XGQLl5bdT3wM1rY/beu6dSeW3ATT02r0p17x7xA9tG/Xz+V/8nf/0npoZBBrY5HJgXw3aDMHAiUOeUx2snYWCbZsrr350oEJUaQUyemkbnzU4LOZWFCqfTYIIxj9ZoKeAvejHmxH11D8clmPkNRyX3vqJ+YD/mh8NiG/vrv/+dy3khhm0kGzLnJRbKlLbH7c+ewZV77Nmz08t+Jdw1JVUgRlnJz2Q1O+kVlwdytk+dLYjnhYA6UKOrRgauBjFfcX5gnJ+IhDk8BVr+/YloTR40vB0wh/y+xzVztVhqXriVOHMjoRKzdPQayAMnOAO5HNLZWowM9xosfeHocOw5cThgwwmcOGCL+IFtMCyDf5hG4q84EIvFwJLdJ3wvSAq0048dJ8jDfKkdyZs8xiAhe91eEU2P0YsRcrPTnC9Z3w9cwSeprljhB8Y5cdeumT7KpasFxGJgccYxz/SLubkX076jGfRTtb29pvAzShVvN0AGRnFwLrx5HrRYfuCYDCzefVQJQ9yjGdxXkxRjOY6luDhjkziKgcsrKkr2vsEaGa/wA8dEVmnGoUMZEXkSqUQi3ZSamrpJutIKIZLKZKtDr9mFiI5RKXTDvMts2LBh3Q9ek1ctDgNzE/fWRqBXeSPkh/UkCVi//nBUSJaufZGavmePcB0uXptXLTYD84OixFVTweSKFW5lUfbZwYcUJx8OnuV7IeXdwSsnj76XsmXPni2xeTdWXrXYDCwUStKkwpSU9Gg1wry8PHNOThSmZ1YMPOQR8+FABUWghMKT1+GDfz/XVdNwIH3Lx3Hmv8XKqxaTgYVp8uRShYxJT0lnhDLe0yipLC1wFpQWhE9sspTaSPfYwMBYN8FOGce7+KEdsx2XZluKd8SZ/4Z51aLqSF612AzMKCx5BZZSKahJTOPGAqKCrKoqhVNRpeDFcBbcgUB/f2CAsxUIhPkn6Yd0zT6ED2n5eAPHuw8pFz+kvBtrfY1VDKzhGFiYVTVUUGosSBCLxQVGeidKqCxYJQYIzojfAhGTvAHBCeTkQ65znzHy8dyOLSj6yvQi5d3F6SsomuZVm5/W9/Xpp+fp+hrIwJpxPcfAPt8xugxKTgHgg6LUCJ8rKTDSlpFWKVBMWUSMXGVw6qenp6dCoSl40zsNKjldeC5c+lvGGlKQixfneVaeX0QuputruEbdoZB71EXX14A+6Jv2DEFboxjN9HQGNWFYShUWi6LKmCOC7Szuib9CXVUWLSZTR7Iu4BoUIQ3Ju6DLhNYiz+LDa18YCO/OzMCdBBETbiczM9wSFNqzbg3mitC4aThWwByd1gTGr2AQfX48oJk+RH2SpUZUU1Y1lCfNM1J6kbFlanWZsxyfIAjJQ6psHbmPhrNC9PbSxTnscLfHh9MGsklTlLk9Gg+GY+HNTePFaBby9gbt9mCvF11DyMAez8Ly8vJY/81xeHvsc5AlBrLyQE2ZxaLus+DBog+a1JVqdaWlUl0gEiYrEHEyVSbEtVDQZguGENZMqkzywS43zaYMG3xuND8gBa59AW9+mguYhmPJum5cOBYY2DsV0M+PPxwJBDRjYxrCwKK8qoIqY2klSYVmMZaS64LcrKbtXyCSlTrL4FilEo4d7p52u6e7iQW3Ah0hvTYHn03ZYQvPf8NspmQWmo3wrrQcjaQ2vG3f6EEg1JVLkYGfPdPMUAauOT/mAQZmxLJS6K1GNUn5ZTTSBxdpTgv1H5RI89RleO2XAMfaHC0dGCTsaEHDxWGJjEvedoNH7ej5b1FLUEgK8ci4HOgBdbhg+16hJPHA4uypGsrAGs/so6/PHUgUJ6aLk0qryiwkFZqzz2ggz5fS0PSKXojqMjVdJIPJBAYOto7gZ4y0BoGBMyNrXwwPR619sdYLISnQ6bQmkqfN5bCh26xMmlj0w6NHszaOgVt+vfv1B4liuO6K06qq1CSRH0gyEHOGnKVicEYcl2BVUmIf+r1xCGltqPH3IXuJJLz2hfLCpDJq7Ys1Xoi8rDKVSttDgcuq1anKsnKIfXeOZ+DaU3fvntoiADUpTFYVSdIBYiy9pGWStE4LmbXoNPOhV2HG0wcTvJiJB08zwvPfvneMjlJIj7P2haK0RKViWbJIiVWr1qlKyhRb8OPneAaeO//oEYgRJML9UZJnIWosRs6KLFWZyVgBLm3hO/c2tFX1A8he60ej1TasI2tffG9VKonxId7aF4pCpUnHWnR4iHVqVmdSFhbgSnvnF3kGdtecwnndiEbwBwrVeDZZnL2F1AGWryVr5vTq9ocpYhtOJnyIp+dD3NrG2YZ7eA95/LUvslCMTotLwvTgiLlXWZgj3vLBBzuORhg4ZUvELyrNV6OL3MCvkSErJmFgXXGEeba93zjxfu7+wsL9ue9PNL6/jaPT11j7IquwDP5WRWZWdnZWZjn84crCbMwAwUQxMLPCSbu3XKtVFobRTLofwLg4Iwr/mI3bDm5kxBKJmNl4MDyb73XWvmAkspySQrmI4Km8sDwvGZ/t4Tz+1QwcCQ9n7o2etMdINm1as3jF23ghJLK07My0yJP8tQwsyj24ceNBjg23bRNuzBX93+RGY5LyP9Lrr3TUhZNqrWXgbaJtGzduFBK9TG6uMLdp81pLxH/BCyHZ/9HI742NjRONjW1cXq+1DJy7WSbJU8hLSSiE2cjkrtSSUBBOS/BWXoiNuQ9BygQUENN0ZGNsBmbkpTmFToXCokAvnkgoEm6Mbgy5uowRvL0XgjnYStLckDm+ja1NR0SxGVhWqj4eQoQoLZAVFEiZ3IPRnSbNGRbzunFgGvMd4SwTlIE3Nz2g7UKaprGtbnPMOLA0J6/SrlIDQhjVhaXGHGbjihm4ETHx4sAxvBD6wf76q+P9/eNX6/sHMWew5Ehbayum1m99OBgY6376NLA3Zhw4uaq0UG1RzRirqowhldGYI1n5MCMsJk4cOIYX4uyZM/VffnlGrz/z5Zf1Z86cBYQ40kZaZqTfYhkKAEBruTjwzHw/MvDQPI0Di3LUZyssM161scpiDM30DeVE/GgJsrQ8J5+hHdlWHcmNpp6J64VQffnlP/7xZT3L1uP7l6qKpM1kxYGORTQJ+9yAyLguMqOwhxbaGzAOvNC+EMI4cFJOwdmzKovlrJpbqo+SnkCWk1NaVWlkzfxsMERMoF2PnXsxxPdCEBFnDYazRBTA9xEQ0/rURSbouXCJDlwXWeq1ax4vP8alAOFNg3FgOKmLWftZJGBaLPRmlGNh1RYWxFSGxQRme285JpW3biknHbfW8ULAa/2XnRh37fyyHn+S59a1PTyrdbhsUOdw2cm6yBgHDkzrpwdHRvTTwWkNxoGZtKqy4lDIziev7jNS6+BONY4u2LNafn3tpIpLp4LE53tj2KVczwuBDKwiwVd4I/ttbgl4Yc9hUkf5WUbiwD5NEBk4qPHRODCTU1VyXD1j4cX05RAxe1WdnVq106LVcrdxMv/NSn2+1pVeCCtmP7CuzhURzcDFuqi1kuPGgRNpF1apuTwp0DI0UJJzVgtyVGyfJYe7ccWY/8bNkwPqnLzgj6rr8ftp/lflcDhfGq+P/m6cODBOMlCrVM5w2haLgrrRzL26znqVhX/EQ+e/xcqNZnWNQnFbo+r8k1ex7urk8Ao/MFlU2bZOHJhMSQY1ZjIDDvWYyV1MbTH3Ap5Z+rigCJ3/9n2M3GhWSv3WqDqrgy6q5+Drdoa9ELZhqNsZJw5M7vgKFtSYcbgMYqp4h7Ch18QaLdyDVDr/LWZutGHMGreyzjqMmTWGrREvhImLSmPeirhxYG7ueKWqU4dJT+Acz6ERKQONA4fXJ445/43y7rBSObzWH7FijQxJXnUP7TKR9TDWxoH5Scj5xcUqXS+MCeiuQjhFMQ58dq/wzfNCxKxLKlRW95iqlYVJTNw4cCSeKN5/vEJbGVlKcG9JeXn+Si/EW62HAdiZlZUmk6wXB47aOzV1Z5QrmJFK15iT34KBY66vIRBs2rUrMZb5NzK1TyKVySQiaTJ8FblMKpX8Fxg41voaZArX6De7YtB2eju/jImkoLS0VFFQWqVmtZWwWZDwtgzMyCv0FE+j1tcg/8cBx50YYlJOX07nKcYMFz9Mk+k0aFkY5mrlb5YfOFYceGqR4GlUHBiQe/Pm9KLFhaKUzRs3rlyvsOjyPn7MlePsI7m0LGYTWXFBmyl8ozXh1vgeJOWIp085Vu6mceCNB5va2u6fq6291NbW1hSd4JDZcbmd/1GUZ6GpQ+EabMYIIomUvkV+YBoHHp/uHxgYGbsyMkLiwADpD4D/HrS1wmvjg6ZI6kdh5CChGHqnMhtgjM6yrFaXL1knP/BKjwOz98LjFw0NY1cGB6+MNTS8eHxhL40DD7lcQ31985NTXBx4I79mSSP+a3xwhLvSS7IK58IHCcXgHBULNoyWPNQ1V6etkx844nEgdcXL7XNzc6fbl5fbT8NG+3IxjQM7PbhYsWbU46RxYBgxPPjxR6oH3y+JOZt9aPHy5RM5CWEPPlyIDeTxrRZ+U21mlfL4udFWeRySKqaJDfDy48eXycY0hmPDIVuWrMVmUMnFW5t+PHXq1A8o5Ty8t83C1ZrJKrVYxpcvu52WqhxuKC7XGnq1aNLTqbRmoHC2RBo3N9pqj4NcpVnGFSXap6bIyhLLGt5+EBVChv12fdj0/OuJu+ehTZ5/3fjgfNPsh5sEycAKZ19cfuw1O42WUto6ksKK48VKMnOcJakhymTxc6OtyQ9sn1oGDUt2+xK+T2lJOJb4DwBOw/aDXd/c/+HUg7bzTV0dz/H9/uw3W5kci7lz4fLjoJNyXlUBZhVkJGImqcxgMJnKFWVlZSWZzDq50VZ6HHBNOIfb7cOliH1ut8NG4sAmk72HoBVnPyiX7vvm/vPzUO7Xj90n7zXfpDN5Fu3ksttu4RcUt6gV/KUPDpYpX8rlN+LZlkQsY/DuCo8wsDepG7aROlG+yW65hYuz2fw2Eo7NF+17fOn+D1CeXb16Cd6e369ZThcVsJ0uDU1KTMQYjWr+0lNo6jUVh583cfFd9+SkOzoX8I1VbEvqbG66GB3JjUasTzYzPuYmS7NhyC1JsG8ZNfzww7lnNeT9h9r2dIlCe3aGLORCcjZjxFMdTr2i7DWVyyJJ0Qnv8mkXVs51i1r7gtTZuAA0Vyfc7zXj8uKhUJCkKMsXClL2nSNaas/BPyJmX6K0TNcL5H3nyR2VjiZfcLLh602B2VwddmMR3rW5XNT8G3utt+xwHbDusM0a9v4mVfbdvH4ziDgOrHcY9aWghHOzNbPwDzdrxcKE4mnHnSffQHlSr9JptXACVkaJcbI7o0KQqAab37auzzdWnawUUz3YMKt0TzWxgQuomHM157BgE4nxnnT5m6tPnjy5+s0TGCepVBUVe1eIyV4/N1osj0OMOmkZdgSbv6enujyLAkkiPTp8OVfECMRws/4QxHwI5U59fXFGampC1G0BbwTrM3Asj8PaOlEeWi2O78/OCq8wLNxRey6q1KYjxaQziYmSTWKGYSQS8UpXQaZKuVfySgZ+LeyUFpaXF8pF0bbcxB21kVKE2SwSU9aZ/SXJWG1s/O/NiYufQ00gwsxSov9GfuDXrYuXQ408x66oqExYGzSX/rfiwGvq4uRQow9IVaoVixELGJFIXmpRF+Tk5XGK3oaB19ZxOdRo1rJwDjXO+3v2rDM6NZosr6AArw1Gi9HCjTFj5wf+T9dKxhxqF38Kl4skhxrvii4vt4SD4UIJXqTCwayqJHo7iJUf+D/mYpJDLSKG5lDjxZSUhMUI5YpSPpKFiog5Lk5+4D40AtOcZ/03I/Pk+LXj+Niw9wqOCjARVjdsXPFCHeZQQzW//ISZajCHGsPnabOoVBbe3JOgIEt+GenCC/BfCSOIlx/Yop9amkazxvTSlJ5bDyOwuBigc+dwi8SLXyw/e/as9jGUhmfPGpaXDieAmH/9Fkmh9tu/wmKyWBTDZvEGdwsdxeGCqjCEspyVCmIysKy8N+R2eMkiyCGvwx3qLZclVXgCTj5erDY7Ax4EroUXN/vGFxfa2xfHAn1Dj90VSbFyqHGGWyeIMTq5lVyTq0AMwCYOWMy4hSPKWAy8reOk1m7nfXV2u/Zkxza5yotTlqiLGQN2XkRR3wJGgBeWFqZHXaz9BXAxl0PtIuZQu8jlUAsnXoCWsXAzA+WVZgM+O8UBHG5Z0LcTi4FTu39/eFY/whX92Ye/kyQVdodr0kXW0nBPuuyEi70L9ltK9wuNb8GhvKVZsKvkXA619os//wwvNIca7TKVRhTDWQ9ATK8JB7VmJ/eKc9xjMvDxwO+//849urkNm4HjMmRgm83tRluuDRiLWyPDveTzLC3ZbAvTnqkFH66LvDaHWgp9AhvqQzF9Ifr8Va7U6szmXh0Oilh8Rd6LxcCSYlVnd+vt2xPkf63dnapiyQoutuLyFZSLle5pD4Knb5qulRwrhxoJHZ6boWJmzm0hk12LOzsBf4mfUtuJaT0q5LEZePc/T3Z2cM+RJjo6T/5zd1QOiGvXbMoIK/f46brIJMsbzonDHGo/8znUfsYcamIMHJ5/aemzdHbCy8vzmHZIKNl6QKXT1WOCEdUdfMEYRiwG3tjx+++t+OBxAldw+P33jo1hLgb4HnY7ornY4ZofHAy4uDoh5lBDJT/9RNJz/e/n6ULhhj3nz7+coWJmXp4/v4csCSDOOHBgV/Hxzs4nT9AvnS+Jw8Db6+u5VaQbGzvq67eHY8NKnIyHQB5hZasfdu0atnJcnPj5v1BM7eV2aJ1ffvnX54mCLR98BiMofZ/l2DFLnx42P6NZkISMmJFsKkYl0EhyYRwGFu/tDPD5FwOdUXFgG+74/ap1kYPz88EIF5Om+aJ2drb2N9IwAsFnUM6fH1MHDxwIqsdAC5QIM5TTHDmFTHw/8IH6+k5S6usPvGpOHEbIoY4PrWEONXKkfsEcagwV89ln58YaUlIaxs7RnyIwlX9WpwRcTFo35nugGOTUFx944zlxwpT3vvjtp19++em3L94jwEk//uOP94nF+z7+eJUYjL5KVsyW++/OiRMmpr/3BZT30qlDhBcD53jKWjFrw7MrcgG/PRfjEiEp6SmJqyrhhJYmCAXrpzBelQv4bbmYLAZYW1NTW7QjelFDaZpclleqSJanrbNyxppcwG/JxXA0i2qa65qamupma9OpiUiWk5NWarSUqfsslWpL/DHC2lzAb8fFuGTjbF0bXYm4uSadhsMtFiXbZ9Sa+yxauFnGy+khBC3Pn5N0wD8+f/4r5gJ+GwYmV5qapjZ84v2gsbWtuVZMKM9o1LIghLU4UUy82Z4bzj//+OOXJDHb85cff4y5gN9q7TiQWNRMgsD4r7VpFjNHJpRYjDqtk1XpeuFmbamMc5iY3Ocvo1LE3X/5PDfeOnFrY8PIxYHFANaNLwa4/MACcU1daysNBLdC08DIXyAp7mVVKp32rJZVn9XpSuJkRhcfqWvClZ3Josr4XndEHGvti5ix4cPszOLUvB65WD+/OIXLveF4tqaurY1bvrqtrQ6T1yfgDeiOykAeUKpVx+OcTiQXcFcLyQhM37o2x1r7InZsuDcYVPscGKKd8qg1+g7iWUmpaa6tnUU5TTVzs81ETAm0i64TX1gLYHicZXE2dz98+HBscuxh+K17c6y1L2LHhrVQRkdhF++kS6vveNBGxdRevnwaWqdt9vLl9hoqhpgDyf0Z1PRVpcUUk3oFRj0B9xWSBdgdILmAyZpwkTjwOmvHoSHZ5UKrrssV6JhovJJExMyBiFk45CDqci0RU2i2YJIrnFqlMveF5zOtTtZeNsMVJ/deRniXXxNuWOl22VbFhm+EY8NoSPb7scYfOPNJ6yB54pReU9PePgct0zQL77O1iUSMkaoBOWxfHxtbDAzOMO0bfUTM5QLGNeEacDW4sTF8bQivCad0c0XJz51DpzR56B8482U3zp2DU2LfbHPzLJ4WTU3NsImxK1G+wWJ0UjUmZ5+xMvZhisnAUDf9jDh1GlvrnrnDvDus4cowFxvWAcKSWWzjV890B3U6kvJlX01zc10d3ArwtXkWxTDZ+ISLTLjqhYGkpUwW+3SKEwcedo1OLjU0LE2ORq+LzEc7o3NFEBZ9cnXcSnNFQJ+prYEGaT7dXgstNFtThCNKmaqXLE1nIHFpdn+cq15MBt5bbR0Orwm3bmy4h8THgVkxny+9HQjTi4pAzuws/FdTtIMwDVNsIgtMkrmC5qjUC6svezEZuPoGXRPOb3vT2DB9GgkEAaU2jBCyYhN9GtSLudDiE028nGfWVb6HV8SGlVHLbAnT52pqZmtqilIiM86O67g5ccd3r5cV4W1yQMScEwe3hCK4zdQd2SGOjrEWHz+uOg5Q/YrFKt4mB0TslA3ixM2bN6/ETmDO1NRUKfPK2CuZcpa04su9DQMLN27Ozd28cXUTJKTJX5m3QpJ5+CNLf7/lo8ORzHZvxcDM5oNwn2wLW4TDiRfYqrz11Qhlh/XXv+347ruOb6/rD8uEb8/ATC4xw040tuauUCMqsMS7RYZPOkyx0N393Xfd3XyKhTdi4PD6yWEG3txEF7e93bjSEo1i1DnrHqPD6m9HxhbRz7A4NvKt+rDkjRg4sMj7hhcDWJcoFgiPPECT8ERbU+ODI0Loyq8tRpip6xvo7kZD8MBId/dAny5T+AYMrO9+yvuGn3ZjDPlIrlBc19gKTQO37NrGOrEw90iUGKM2cx0x0sMs4d3FoaFFwrvsYWn8PGixPBPkp3BdU9PGDU1t7XO3J/BZfFPTho1NTeHUC5VOQ4VsHTFJFWbjfGBqadxiGV+aCswbzRVJsfL+krr58cD80NB8YHw+sn6yJRBAJyC8krwQTa0Hc9taa2dvT5yemzvd1pZ7sJUXwxSYneaS9dIgZusM5oDbTdfIcLsDZgOdhrY67y/WqT1TU7hixBQAb2Q9OfK7QbeP7neksbGpDa3ct5tqa5sbod80HuEfqKstOF9nnQWDdmoxrssnqcB37c5YeX8pA9MdySupQ1SeIkDuwP0MKnluW2NbGxfzgsETbOPiqUyChJGXWozmXqUCrVZpsS/DO3UkcOSFr+vDlZJ7e3U76frJGi9iFLytu34y/CYGkW3wSurER2B40jg71wBlbhbE4KKuEkVVpaLKYnEaYCSHLqtyWZzDhGzrGWvp6moZ8yHb4mEymcahgpaWKVNcBkZLgkNJ1lnm1tcQbmzGZYPrPoFSh4b7ZrgpyNVkXp7TrFXhBEdt9LydFdlocEKQ48LCBSgLF/AvVsiBd70tXICxtbGjxcszsINnYEfYH4EgRIOgaGJGBk48Arza9slf//oJiGo9kkjNXtTSpNNaLGo1q62Qxz61S+DLuZ48oXZWQExTiRQYeJWYvdy6yD4PKT4ufwRwsXvU5capaW7XqIP4I2CMSsT8+99UjJj4q3ivl9ZJnhWo5HEuetU9ShePmC5HTzWd/zb2jF8w+tmYKWrtuFUM3DP8ZHQZjUbLo08oKws21+GwtuWTT1pwUIljTFGBk2TKADEw7MOhU3Gc26WkpEfp89MxEnxzUwmNDdvnw8W+Mhcwx8Dh9ZNdfyHFxa2fLMglg5S6ZgwXoTeOOs8sAL8wptSZzXiYCuPdu2Ul/PpvaK6gKUbCedCuvTI32o3hv/3tL3/729+GOQZObEYlZNiEb03NidTsBWMUGDbhaBtaJkMYFyFKTLxR3VTCIcQbrJ9s+xtRY6MMLM5trsOBQR0G0WB8UNecKxammdDoRea/0eOUsR5clVTDuWKqLonA1Rtw8aG//eUvfzvEwRUMmmB4sqMILSvkHUcIkvzy8uPF+0sqVKrO4+VlJfnrErk0Y+/+/XszVvDpa3OxZMdf/rKDn9kmTsG1ZIXwlp6C74nkub9EKpOKRVJZBv72WgcwV/5/eeUpqmFy1PUAAAAASUVORK5CYII='
diff --git a/packages/fluent-editor/src/config/editor.config.ts b/packages/fluent-editor/src/config/editor.config.ts
new file mode 100644
index 0000000000..1f5c214af5
--- /dev/null
+++ b/packages/fluent-editor/src/config/editor.config.ts
@@ -0,0 +1,87 @@
+export const BIG_DELTA_LIMIT = 2000 // Delta数据行太多超出该限制时，加载会比较慢，需要提示用户
+
+import { EN_US } from './i18n/en-us'
+import { ZH_CN } from './i18n/zh-cn'
+const localLang = localStorage.getItem('lang') || 'zh-cn'
+export const LANG_CONF = localLang === 'en-us' ? EN_US : ZH_CN
+
+// Image
+export const IMAGE_UPLOADER_MIME_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/svg+xml',
+]
+
+// 常用文件格式
+export const OTHER_FILE_UPLOADER_MIME_TYPES = [
+  'text/plain',
+  'application/json',
+  'application/pdf',
+]
+
+export const AUDIO_VIDEO_UPLOADER_MIME_TYPES = [
+  'audio/wave',
+  'audio/wav',
+  'audio/x-wav',
+  'audio/x-pn-wav',
+  'audio/mpeg',
+  'video/mpeg',
+  'video/x-msvideo',
+]
+
+//  MS office
+export const DOC_UPLOADER_MIME_TYPES = [
+  'application/msword',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
+  'application/vnd.ms-word.document.macroEnabled.12',
+  'application/vnd.ms-word.template.macroEnabled.12',
+]
+
+export const XSL_UPLOADER_MIME_TYPES = [
+  'application/vnd.ms-excel',
+  'application/vnd.ms-excel',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
+  'application/vnd.ms-excel.sheet.macroEnabled.12',
+  'application/vnd.ms-excel.template.macroEnabled.12',
+  'application/vnd.ms-excel.addin.macroEnabled.12',
+  'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
+]
+
+export const PPT_UPLOADER_MIME_TYPES = [
+  'application/vnd.ms-powerpoint',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/vnd.openxmlformats-officedocument.presentationml.template',
+  'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
+  'application/vnd.ms-powerpoint.addin.macroEnabled.12',
+  'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
+  'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
+  'application/vnd.ms-powerpoint.slideshow.macroEnabled.12',
+]
+
+// Compressed files
+export const COMPRESSED_UPLOADER_MIME_TYPES = [
+  'application/x-tar',
+  'application/x-zip-compressed',
+  'application/zip-compressed',
+  'application/gzip',
+  '.rar',
+  '.7z',
+]
+
+// default
+export const FILE_UPLOADER_MIME_TYPES = [
+  ...OTHER_FILE_UPLOADER_MIME_TYPES,
+  ...AUDIO_VIDEO_UPLOADER_MIME_TYPES,
+  ...DOC_UPLOADER_MIME_TYPES,
+  ...XSL_UPLOADER_MIME_TYPES,
+  ...PPT_UPLOADER_MIME_TYPES,
+  ...COMPRESSED_UPLOADER_MIME_TYPES,
+]
diff --git a/packages/fluent-editor/src/config/editor.utils.ts b/packages/fluent-editor/src/config/editor.utils.ts
new file mode 100644
index 0000000000..de220aac2b
--- /dev/null
+++ b/packages/fluent-editor/src/config/editor.utils.ts
@@ -0,0 +1,195 @@
+import * as Quill from 'quill'
+
+const Delta = Quill.imports['delta']
+
+// color hex to rgba
+export function hexToRgbA(hex: string) {
+  let color
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+    color = hex.substring(1).split('')
+    if (color.length === 3) {
+      color = [color[0], color[0], color[1], color[1], color[2], color[2]]
+    }
+    color = '0x' + color.join('')
+    return (
+      'rgba(' +
+      [(color >> 16) & 255, (color >> 8) & 255, color & 255].join(',') +
+      ',1)'
+    )
+  }
+}
+
+/**
+ * 将File格式的图片转换成Url格式
+ * @param imageFile File格式的图片
+ */
+export function imageFileToUrl(imageFile) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(imageFile)
+    reader.onload = function (e) {
+      resolve(e.target['result'])
+    }
+    reader.onerror = reject
+  }).catch(err => null)
+}
+
+/**
+ * 将Url格式的图片转换成File格式
+ * @param imageUrl 图片的URL
+ */
+export function imageUrlToFile(imageUrl, isErrorImage?: boolean) {
+  return new Promise(function (resolve, reject) {
+    fetch(imageUrl, {
+      method: 'get',
+      mode: 'no-cors',
+    })
+      .then(res => res.blob())
+      .then(blob => {
+        if (blob.type.indexOf('image') === -1 || !blob.type) {
+          return reject()
+        }
+        const fileType = blob.type.replace(/^.*\//, '')
+        const fileName = isErrorImage
+          ? 'editorx-error-image.png'
+          : `image-${new Date().getTime()}.${fileType}`
+        const file = new File([blob], fileName, blob)
+        resolve(file)
+      })
+      .catch(reject)
+  })
+}
+
+export function insideTable(range = null, quill = this.quill) {
+  let currentRange = range
+  if (!currentRange) {
+    currentRange = quill.getSelection()
+  }
+  // fix: 原有formats方法无法判断表格内的list和head附近粘贴
+  const [line] = quill.getLine(currentRange.index)
+  return line && !!line.domNode.closest('table.quill-better-table')
+}
+
+export function isNullOrUndefined(param) {
+  return param === null || param === undefined
+}
+
+/**
+ * omit
+ * @param   obj         target Object
+ * @param   uselessKeys  keys of removed properties
+ * @return             new Object without useless properties
+ */
+export function omit(obj, uselessKeys) {
+  return (
+    obj &&
+    Object.keys(obj).reduce((acc, key) => {
+      return uselessKeys.includes(key) ? acc : { ...acc, [key]: obj[key] }
+    }, {})
+  )
+}
+
+/**
+ * 将delta中的图片替换成制定的图片数组，用于图片上传到服务器的场景
+ * @param delta 原始delta
+ * @param imageUrls 图片数组
+ * @param imagePlaceholder 标识是否是占位图的数组，与图片数组一一对应
+ * @return 替换之后的delta
+ */
+export function replaceDeltaImage(delta, imageUrls, imagePlaceholder) {
+  let imageIndex = 0
+  return delta.reduce((newDelta, op) => {
+    if (op.insert.image && !op.insert.image.hasExisted) {
+      const attributes = imagePlaceholder[imageIndex]
+        ? { ...op.attributes, width: 'auto', height: 225 } // 占位图片应该固定大小
+        : op.attributes
+      newDelta.insert({ image: imageUrls[imageIndex] }, attributes)
+      imageIndex++
+    } else {
+      newDelta.insert(op.insert, op.attributes)
+    }
+    return newDelta
+  }, new Delta())
+}
+
+export function splitWithBreak(insertContent: string) {
+  const lines = []
+  const insertStr = insertContent
+  let start = 0
+  for (let i = 0; i < insertContent.length; i++) {
+    if (insertStr.charAt(i) === '\n') {
+      if (i === 0) {
+        lines.push('\n')
+      } else {
+        lines.push(insertStr.substring(start, i))
+        lines.push('\n')
+      }
+      start = i + 1
+    }
+  }
+
+  const tailStr = insertStr.substring(start)
+  if (tailStr) {
+    lines.push(tailStr)
+  }
+
+  return lines
+}
+
+/**
+ * getEventComposedPath
+ *  compatibility fixed for Event.path/Event.composedPath
+ *  Event.path is only for chrome/opera
+ *  Event.composedPath is for Safari, FF
+ *  Neither for Micro Edge
+ * @return an array of event.path
+ */
+export function getEventComposedPath(evt) {
+  let path
+  // chrome, opera, safari, firefox
+  path = evt.path || (evt.composedPath && evt.composedPath())
+
+  // other: edge
+  if (path === undefined && evt.target) {
+    path = []
+    let target = evt.target
+    path.push(target)
+
+    while (target && target.parentNode) {
+      target = target.parentNode
+      path.push(target)
+    }
+  }
+
+  return path
+}
+
+export const sanitize = (url, protocols) => {
+  const anchor = document.createElement('a')
+  anchor.href = url
+  const protocol = anchor.href.slice(0, anchor.href.indexOf(':'))
+  return protocols.indexOf(protocol) > -1
+}
+
+export const isInside = (position, dom) => {
+  const areaPosition = dom.getBoundingClientRect()
+  const { pageX, pageY } = position
+  // getBoundingClientRect是不考虑窗口滚动的
+  const left = pageX - window.scrollX
+  const top = pageY - window.scrollY
+  const {
+    left: areaLeft,
+    top: areaTop,
+    width: areaWidth,
+    height: areaHeight,
+  } = areaPosition
+  const inside =
+    left > areaLeft &&
+    left < areaLeft + areaWidth &&
+    top > areaTop &&
+    top < areaTop + areaHeight
+  return inside
+}
+
+// Internet Explorer 6-11
+export const isPureIE = !!document['documentMode']
diff --git a/packages/fluent-editor/src/config/i18n/en-us.ts b/packages/fluent-editor/src/config/i18n/en-us.ts
new file mode 100644
index 0000000000..6585e6d148
--- /dev/null
+++ b/packages/fluent-editor/src/config/i18n/en-us.ts
@@ -0,0 +1,106 @@
+export const EN_US = {
+  undo: 'Undo',
+  redo: 'Redo',
+  clean: 'Clear Formatting',
+
+  header: 'Paragraph Formatting',
+  normal: 'Normal',
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6',
+
+  font: 'Font',
+  size: 'Size',
+  lineheight: 'Line Height',
+  songti: 'SimSun',
+  yahei: 'Microsoft Yahei',
+  kaiti: 'KaiTi',
+  heiti: 'SimHei',
+  lishu: 'LiSu',
+
+  bold: 'Bold',
+  italic: 'Italic',
+  underline: 'Underline',
+  strike: 'Strikethrough',
+
+  color: 'Font Color',
+  background: 'Background Color',
+
+  orderedlist: 'Ordered List',
+  bulletlist: 'Unordered List',
+  checklist: 'Task List',
+
+  left: 'Left',
+  center: 'Centered',
+  right: 'Right',
+
+  image: 'Image',
+  file: 'File',
+  table: 'Table',
+  link: 'Hyperlink',
+
+  code: 'Inline Code',
+  codeblock: 'Code Block',
+  blockquote: 'Quote',
+  superscript: 'Superscript',
+  subscript: 'Subscript',
+  globallink: 'Link',
+
+  emoji: 'Emoji',
+  fullscreen: 'Full Screen',
+  'exit-fullscreen': 'Exit Full Screen',
+  help: 'Help',
+  more: 'More',
+
+  'help-format': 'Format',
+  'help-insert': 'Insert',
+  'help-operation': 'Edit',
+  mention: 'Mention People',
+  'quick-menu': 'Shortcut',
+  'toggle-help-panel': 'Open/Close Help Panel',
+  'scroll-table': 'Horizontal Scroll',
+  'mouse-wheel': 'Mouse Wheel',
+  save: 'Save',
+
+  'copy-cells': 'Copy',
+  'copy-table': 'Copy Table',
+  'cut-cells': 'Cut',
+  'empty-cells': 'Clear Contents',
+
+  'insert-row-up': 'Insert Rows Above',
+  'insert-row-down': 'Insert Rows Below',
+  'insert-column-left': 'Insert Columns to the Left',
+  'insert-column-right': 'Insert Columns to the Right',
+
+  'merge-cells': 'Merge Cells',
+  'unmerge-cells': 'Split Cells',
+
+  'delete-row': 'Delete Entire Row',
+  'delete-column': 'Delete Entire Column',
+  'delete-table': 'Delete Table',
+
+  'default-link-text': 'Link',
+  basicblock: 'Card',
+  linkplaceholder: 'Enter an address and press Enter.',
+  'counter-template': `{{count}}/{{totalCount}} {{countUnit}}`,
+  char: 'characters',
+  word: 'words',
+  'counter-limit-tips':
+    'The number of {{countUnit}} exceeds the maximum allowed limit.',
+  'ie-msg':
+    'In order to have a better experience, it is recommended to use the latest version of Chrome browser.',
+
+  loading: 'Loading...',
+  pasting: 'A large amount of content to paste. Loading...',
+  'img-error': 'Image Copy Error',
+  'img-error-info':
+    'Failed to copy the image. Save it to your local computer and then upload it by clicking Image on the toolbar.',
+
+  lastModified: 'Last Modified Date:',
+  screenshot: 'Screenshot',
+  uploading: 'Uploading...',
+  subTitleBgColor: 'BackgroundColor',
+}
diff --git a/packages/fluent-editor/src/config/i18n/zh-cn.ts b/packages/fluent-editor/src/config/i18n/zh-cn.ts
new file mode 100644
index 0000000000..6a539f3a02
--- /dev/null
+++ b/packages/fluent-editor/src/config/i18n/zh-cn.ts
@@ -0,0 +1,104 @@
+export const ZH_CN = {
+  undo: '撤销',
+  redo: '重做',
+  clean: '清除格式',
+
+  header: '段落格式',
+  normal: '正文',
+  h1: '标题1',
+  h2: '标题2',
+  h3: '标题3',
+  h4: '标题4',
+  h5: '标题5',
+  h6: '标题6',
+
+  font: '字体',
+  size: '字号',
+  lineheight: '行距',
+  songti: '宋体',
+  yahei: '微软雅黑',
+  kaiti: '楷体',
+  heiti: '黑体',
+  lishu: '隶书',
+
+  bold: '粗体',
+  italic: '斜体',
+  underline: '下划线',
+  strike: '删除线',
+
+  color: '字体颜色',
+  background: '背景色',
+
+  orderedlist: '有序列表',
+  bulletlist: '无序列表',
+  checklist: '任务列表',
+
+  left: '左对齐',
+  center: '居中对齐',
+  right: '右对齐',
+
+  image: '图片',
+  file: '文件',
+  table: '表格',
+  link: '超链接',
+
+  code: '行内代码',
+  codeblock: '代码块',
+  blockquote: '引用',
+  superscript: '上标',
+  subscript: '下标',
+  globallink: '全局链接',
+
+  emoji: '表情',
+  fullscreen: '全屏',
+  'exit-fullscreen': '退出全屏',
+  help: '帮助',
+  more: '更多',
+
+  'help-format': '格式',
+  'help-insert': '插入',
+  'help-operation': '操作',
+  mention: '提及某人',
+  'quick-menu': '快捷菜单',
+  'toggle-help-panel': '打开/关闭帮助面板',
+  'scroll-table': '水平滚动表格',
+  'mouse-wheel': '鼠标滚轮',
+  save: '保存',
+
+  'copy-cells': '复制',
+  'copy-table': '复制表格',
+  'cut-cells': '剪切',
+  'empty-cells': '清空内容',
+
+  'insert-row-up': '上插入行',
+  'insert-row-down': '下插入行',
+  'insert-column-left': '左插入列',
+  'insert-column-right': '右插入列',
+
+  'merge-cells': '合并单元格',
+  'unmerge-cells': '拆分单元格',
+
+  'delete-row': '删除当前行',
+  'delete-column': '删除当前列',
+  'delete-table': '删除表格',
+
+  'default-link-text': '链接',
+  basicblock: '卡片',
+  linkplaceholder: '请输入链接地址，按回车键确认',
+  'counter-template': '{{count}}/{{totalCount}}',
+  char: '字符',
+  word: '单词',
+  'counter-limit-tips': '{{countUnit}}数超出最大允许值',
+  'ie-msg': '为了有更好的体验，推荐使用最新版Chrome浏览器。',
+
+  loading: '正在加载中...',
+  pasting: '您粘贴的内容较多，正在努力加载中，请耐心等待...',
+  'img-error': '图片复制出错',
+  'img-error-info':
+    '此图片不支持复制，请将原图下载至本地后点击工具栏【插入图片】，重新上传。',
+
+  lastModified: '最后修改时间：',
+  screenshot: '截图',
+  uploading: '上传中...',
+  subTitleBgColor: '背景颜色',
+}
diff --git a/packages/fluent-editor/src/config/icons.config.ts b/packages/fluent-editor/src/config/icons.config.ts
new file mode 100644
index 0000000000..c10a7a0f1c
--- /dev/null
+++ b/packages/fluent-editor/src/config/icons.config.ts
@@ -0,0 +1,295 @@
+export const UNDO_ICON = `<svg width="16px" height="14px" viewBox="0 0 16 14">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(0.000000, -1.000000)" fill="#293040">
+        <path d="M11,5 C13.7614237,5 16,7.23857625 16,10 C16,12.7614237 13.7614237,15 11,15 L7,15 L7,14 L11,14
+        C13.209139,14 15,12.209139 15,10 C15,7.790861 13.209139,6 11,6 L5,6 L5,10 L0,5.5 L5,1 L5,5 L11,5 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const REDO_ICON = `<svg width="16px" height="14px" viewBox="0 0 16 14">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(0.000000, -1.000000)" fill="#293040">
+        <path d="M5,5 L11,5 L11,1 L16,5.5 L11,10 L11,6 L5,6 C2.790861,6 1,7.790861 1,10 C1,12.209139 2.790861,14 5,14 L9,14
+        L9,15 L5,15 C2.23857625,15 0,12.7614237 0,10 C0,7.23857625 2.23857625,5 5,5 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const CLEAN_ICON = `<svg width="16px" height="15px" viewBox="0 0 16 15">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill="#293040">
+        <path d="M4.32708124,14 L8.37150583,14 L10.5729409,11.5550586 L4.6297198,6.20375828 L1.25465311,9.95542661
+        C1.09078634,10.1375782 1.0006437,10.3742369 1.00180556,10.6192474 C1.00295568,10.8617824 1.10621221,11.092615
+        1.28624979,11.2551297 L4.32708124,14 Z M16,14 L16,15 L3.93760008,15 L0.597250175,11.9923354 C0.217072683,11.6500221
+        1.59049582e-13,11.1091757 1.59428026e-13,10.6149383 C1.59806471e-13,10.1207008 0.183000942,9.64396706 0.513710349,9.27667705
+        L8.56855175,0.330869394 L16,7.02217546 L9.71713856,14 L16,14 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const BOLD_ICON = `<svg width="12px" height="16px" viewBox="0 0 12 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-2.000000, 0.000000)" fill="#293040" fill-rule="nonzero">
+        <path d="M11.540636,7.0842147 C13.0068647,7.89340318 14,9.45459285 14,11.2477417 C14,13.8723415 11.8723415,16
+        9.2477417,16 L2,16 L2,7.99258423 L2,-5.06261699e-14 L9.00370789,-4.75175455e-14 C11.2107991,-4.79229815e-14 13,1.78920092
+        13,3.99629211 C13,5.24014846 12.4317244,6.35127692 11.540636,7.0842147 Z M3.5,1.5 L3.5,6.49258423 L9.00370789,6.49258423
+        C10.382372,6.49258423 11.5,5.37495618 11.5,3.99629211 C11.5,2.61762805 10.382372,1.5 9.00370789,1.5 L3.5,1.5 Z M3.5,14.5
+        L9.2477417,14.5 C11.0439144,14.5 12.5,13.0439144 12.5,11.2477417 C12.5,9.45156904 11.0439144,7.9954834 9.2477417,7.9954834
+        L3.5,7.9954834 L3.5,14.5 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const ITALIC_ICON = `<svg width="9px" height="16px" viewBox="0 0 9 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-4.000000, 0.000000)" fill="#293040">
+        <path d="M10.2565501,1.5 L8.41332415,14.5 L12,14.5 L12,16 L4,16 L4,14.5 L6.90083611,14.5 L8.74406208,1.5 L5,1.5
+        L5,0 L13,0 L13,1.5 L10.2565501,1.5 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const UNDERLINE_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <polygon fill="#293040" points="2 14 14 14 14 16 2 16"></polygon>
+    <path d="M4.5,3 L4.5,7 C4.5,8.93299662 6.06700338,10.5 8,10.5 C9.93299662,10.5 11.5,8.93299662 11.5,7 L11.5,1.5
+    L11.4998322,0 L13,0 L13,7 C13,9.76142375 10.7614237,12 8,12 C5.23857625,12 3,9.76142375 3,7 L3,0 L4.49893188,0
+    L4.49893188,3 L4.5,3 Z" fill="#293040" fill-rule="nonzero"></path>
+</g>
+</svg>`
+
+export const STRIKE_ICON = `<svg width="14px" height="16px" viewBox="0 0 14 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-1.000000, 0.000000)" fill="#293040">
+        <path d="M9.93321102,9 L1,9 L1,7 L3.84197169,7 C3.31015092,6.28495098 3,5.42507332 3,4.5 C3,2.01471863
+        5.23857625,0 8,0 C10.5736409,0 12.6931261,1.75002477 12.969484,4 L11.4507289,4 C11.1737591,2.60626201 9.76011738,1.5 8,1.5
+        C6.03382604,1.5 4.5,2.88044344 4.5,4.5 C4.5,5.52604325 5.11562351,6.45611494 6.06678898,7 L15,7 L15,9 L12.1580283,9
+        C12.6898491,9.71504902 13,10.5749267 13,11.5 C13,13.9852814 10.7614237,16 8,16 C5.42635908,16 3.30687393,14.2499752
+        3.03051599,12 L4.54927112,12 C4.82624092,13.393738 6.23988262,14.5 8,14.5 C9.96617396,14.5 11.5,13.1195566 11.5,11.5
+        C11.5,10.4739568 10.8843765,9.54388506 9.93321102,9 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const COLOR_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <polygon fill="#293040" points="2 14 14 14 14 16 2 16"></polygon>
+    <path d="M10.9166667,8.5 L5.08333333,8.5 L4.26618123,10.461165 L3.62338765,12 L2,12 L7,0 L9,0 L14,12 L12.3824972,12
+    L11.5753038,10.0807292 L10.9166667,8.5 Z M10.2916667,7 L8,1.5 L5.70833333,7 L10.2916667,7 Z"
+    fill="#293040" fill-rule="nonzero"></path>
+</g>
+</svg>`
+
+export const BACKGROUND_COLOR_ICON = `  <svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <path d="M4.64447006,9.66583547 L3.17597929,8.33216965 L6.15933183,5.11039074 L5.42508645,4.44355783
+    L9.39179153,1.0658141e-13 L16,6.00149616 L12.0332949,10.445054 L11.2990495,9.77822108 L8.31569698,13 L6.84720621,11.6663342
+    L5.69344476,12.9587937 L2.36400649,12.9587937 L2,12.6282074 L4.64447006,9.66583547 Z M4.57134219,8.25840959
+    L8.24256911,11.5925741 L10.5648041,9.11138818 L6.89357722,5.77722364 L4.57134219,8.25840959 Z M14.6046371,6.07525623
+    L9.4649194,1.40742588 L6.82044935,4.36979777 L11.960167,9.03762811 L14.6046371,6.07525623 Z M2,14 L14,14 L14,16 L2,16 L2,14 Z"
+    fill="#293040"></path>
+</g>
+</svg>`
+
+export const ALIGN_LEFT_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <path d="M0,0 L1.5,0 L1.5,16 L0,16 L0,0 Z M4,3 L13,3 L13,7 L4,7 L4,3 Z M5,4 L5,6 L12,6 L12,4 L5,4 Z M4,9 L16,9
+    L16,13 L4,13 L4,9 Z M5,10 L5,12 L15,12 L15,10 L5,10 Z" fill="#293040"></path>
+</g>
+</svg>`
+
+export const ALIGN_CENTER_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <path d="M8.75,7 L8.75,9 L16,9 L16,13 L8.75,13 L8.75,16 L7.25,16 L7.25,13 L0,13 L0,9 L7.25,9 L7.25,7 L2,7
+    L2,3 L7.25,3 L7.25,0 L8.75,0 L8.75,3 L14,3 L14,7 L8.75,7 Z M1,10 L1,12 L15,12 L15,10 L1,10 Z M3,4 L3,6 L13,6
+    L13,4 L3,4 Z" fill="#293040"></path>
+</g>
+</svg>`
+
+export const ALIGN_RIGHT_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <path d="M14.5,0 L16,0 L16,16 L14.5,16 L14.5,0 Z M3,3 L12,3 L12,7 L3,7 L3,3 Z M4,4 L4,6 L11,6 L11,4 L4,4 Z
+    M0,9 L12,9 L12,13 L0,13 L0,9 Z M1,10 L1,12 L11,12 L11,10 L1,10 Z" fill="#293040"></path>
+</g>
+</svg>`
+
+export const LIST_UNORDERED_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill="#293040">
+        <path d="M5,1 L16,1 L16,2.5 L5,2.5 L5,1 Z M2,4 C0.8954305,4 0,3.1045695 0,2 C0,0.8954305 0.8954305,0 2,0
+        C3.1045695,0 4,0.8954305 4,2 C4,3.1045695 3.1045695,4 2,4 Z M2,3 C2.55228475,3 3,2.55228475 3,2 C3,1.44771525
+        2.55228475,1 2,1 C1.44771525,1 1,1.44771525 1,2 C1,2.55228475 1.44771525,3 2,3 Z M2,10 C0.8954305,10 0,9.1045695
+        0,8 C0,6.8954305 0.8954305,6 2,6 C3.1045695,6 4,6.8954305 4,8 C4,9.1045695 3.1045695,10 2,10 Z M2,9 C2.55228475,9
+        3,8.55228475 3,8 C3,7.44771525 2.55228475,7 2,7 C1.44771525,7 1,7.44771525 1,8 C1,8.55228475 1.44771525,9 2,9 Z
+        M2,16 C0.8954305,16 0,15.1045695 0,14 C0,12.8954305 0.8954305,12 2,12 C3.1045695,12 4,12.8954305 4,14 C4,15.1045695
+        3.1045695,16 2,16 Z M2,15 C2.55228475,15 3,14.5522847 3,14 C3,13.4477153 2.55228475,13 2,13 C1.44771525,13 1,13.4477153
+        1,14 C1,14.5522847 1.44771525,15 2,15 Z M5,7 L16,7 L16,8.5 L5,8.5 L5,7 Z M5,13 L16,13 L16,14.5 L5,14.5 L5,13 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const LIST_ORDERED_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill="#293040">
+        <path d="M5,1 L16,1 L16,2.5 L5,2.5 L5,1 Z M0,0 L2,0 L2,3 L3,3 L3,4 L0,4 L0,3 L1,3 L1,1 L0,1 L0,0 Z M5,7 L16,7
+        L16,8.5 L5,8.5 L5,7 Z M5,13 L16,13 L16,14.5 L5,14.5 L5,13 Z M0,15 L1.75,15 C1.88807119,15 2,14.8880712 2,14.75
+        C2,14.6119288 1.88807119,14.5 1.75,14.5 L0,14.5 L0,13.5 L1.75,13.5 C1.88807119,13.5 2,13.3880712 2,13.25 C2,13.1119288
+        1.88807119,13 1.75,13 L0,13 L0,12 L1.5,12 C2.32842712,12 3,12.6715729 3,13.5 C3,13.6753177 2.96992289,13.8436105
+        2.91464715,14 C2.96992289,14.1563895 3,14.3246823 3,14.5 C3,15.3284271 2.32842712,16 1.5,16 L0,16 L0,15 Z M2,7.5
+        C2,7.35127258 1.9375,7.22627258 1.84375,7.13845444 C1.76307119,7.05596441 1.63807119,7 1.5,7 C1.22385763,7 1,7.22385763
+        1,7.5 L1.62630326e-19,7.5 C0.147399902,6.5 0.647399902,6 1.5,6 C2.32842712,6 3,6.67157288 3,7.5 C3,8.07312512
+        2.50016007,8.55650475 2.22821045,8.74661255 C1.95626083,8.93672035 1.77325955,8.99789088 1.76769962,9 L3,9 L3,10
+        L0,10 L1.62630326e-19,9 C0.619515577,8.77257137 1.06188822,8.55939591 1.32711792,8.36047363 C1.6371448,8.12795347
+        1.87259637,7.91592701 1.96143498,7.69289356 C1.98627694,7.633537 2,7.5683711 2,7.5 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const LIST_CHECK_ICON = `<svg width="15px" height="14px" viewBox="0 0 15 14">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-1058.000000, -97.000000)">
+        <g transform="translate(407.000000, 93.000000)">
+            <g transform="translate(650.000000, 2.000000)">
+                <rect x="0" y="0" width="16" height="16"></rect>
+                <polygon fill="#293040" fill-rule="nonzero" points="14 15 14 9.37100497 15 9.37100497 15
+                16 1 16 1 2 10.1946467 2 10.1946467 3 2 3 2 15"></polygon>
+                <path d="M14.4525049,2.48740937 C14.7356009,2.1850362 15.8305911,3.21021745 15.5474951,3.51259063
+                L8.45990379,11.0828057 L4.46558382,7.02621226 C4.17496481,6.73106236 4.17863783,6.25620283 4.47378774,5.96558382
+                C4.76893764,5.67496481 5.24379717,5.67863783 5.53441618,5.97378774 L8.43263799,8.91719429 L14.4525049,2.48740937 Z"
+                fill="#293040" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</g>
+</svg>`
+
+export const CODE_BLOCK_ICON = `<svg t="1565073788159" class="icon" viewBox="0 0 1024 1024" width="16" height="16">
+<path d="M110.78 469.52l70.44-39.24A60 60 0 0 0 212 377.9L212 212a120 120 0 0 1 120-120l60 0a30
+30 0 0 1 0 60L332 152a60 60 0 0 0-59.99999999 60l0 175.38a120 120 0 0
+1-63.48000001 105.9L173.42 512l35.1 18.72A120 120 0 0 1 272 636.56L272.00000001 812a60 60 0 0 0 59.99999999 60l60 0a30 30
+0 1 1 0 60L332 932a120 120 0 0 1-120-120l0-165.9a60
+60 0 0 0-30.78-52.38l-70.44-39.24a45 45 0 0 1 0-84.96z m742.44 1e-8a45 45 0 0 1 0 84.95999998l-70.44 39.24000001a60
+60 0 0 0-30.78000001 52.38L751.99999999 812a120 120 0 0 1-119.99999999 120L572 932a30 30
+0 1 1 0-60l60 0a60 60 0 0 0 60-60l0-175.38a120 120
+0 0 1 63.48-105.9L790.58 512l-35.1-18.72A120 120 0 0 1 692 387.44L692 212a60 60 0 0 0-60-60L572 152a30
+30 0 0 1 0-60l60 0a120 120 0 0 1 119.99999999 120l0 165.9a60 60 0 0 0 30.78000001 52.38l70.44 39.24000001z"></path></svg>`
+
+export const BLOCKQUOTE_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(0.000000, 1.000000)" fill="#000000" fill-rule="nonzero">
+        <path d="M6.86733556,12.5574136 L6.86733556,7.99108138 L2.52931996,7.99108138 C2.41516165,5.02296544
+        3.10011148,3.42474916 5.72575251,2.0548495 L5.72575251,0 C1.84437012,1.36989967 -0.0963210702,3.88138239 0.0178372352,7.76276477
+        L0.0178372352,12.5574136 L6.86733556,12.5574136 Z M16,12.5574136 L16,7.99108138 L11.6619844,7.99108138 C11.5478261,5.02296544
+        12.2327759,3.42474916 14.8584169,2.0548495 L14.8584169,0 C10.9770346,1.36989967 9.03634337,3.88138239 9.15050167,7.76276477
+        L9.15050167,12.5574136 L16,12.5574136 Z"></path>
+    </g>
+</g>
+</svg>`
+
+export const IMAGE_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-1196.000000, -96.000000)" fill="#293040" fill-rule="nonzero">
+        <g transform="translate(407.000000, 93.000000)">
+            <path d="M804,4 L790,4 L790,11.940983 L794.058237,9.91186456 L798.536534,13.3949845 L801.014076,11.908459
+            L804,13.8990748 L804,4 Z M803.72265,14.9160251 L800.985924,13.091541 L798.463466,14.6050155 L793.941763,11.0881354
+            L790.223607,12.9472136 C790.151699,12.9831673 790.07527,13.000168 790,13.0001094 L790,18 L804,18 L804,15.0000529
+            C803.90455,15.0001406 803.80803,14.9729453 803.72265,14.9160251 Z M789,19 L789,3 L805,3 L805,19 L789,19 Z M801,9
+            C800.447715,9 800,8.55228475 800,8 C800,7.44771525 800.447715,7 801,7 C801.552285,7 802,7.44771525 802,8 C802,8.55228475
+            801.552285,9 801,9 Z"></path>
+        </g>
+    </g>
+</g>
+</svg>`
+
+export const FILE_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16" >
+<g id="icon/01" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <path d="M16,16 L1,16 L1,0 L12,0 L16,4 L16,16 Z M11,1 L2,1 L2,15 L15,15 L15,
+    5 L11,5 L11,1 Z M12,1.533 L12,4 L14.52,4 L12,1.533 Z"
+    id="Combined-Shape" fill="#293040" fill-rule="nonzero">
+    </path>
+    <polygon id="path" fill="#293040" points="8 8 6 8 8.5 5 11 8 9 8 9 12 8 12"></polygon>
+</g>
+</svg>`
+
+export const TABLE_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-1227.000000, -96.000000)" fill="#293040">
+        <g transform="translate(407.000000, 93.000000)">
+            <path d="M820,3 L836,3 L836,19 L820,19 L820,3 Z M821,4 L821,8 L835,8 L835,4 L821,4 Z M821,9 L821,13 L825,
+            13 L825,9 L821,9 Z M821,14 L821,18 L825,18 L825,14 L821,14 Z M826,9 L826,13 L830,13 L830,9 L826,9 Z M826,
+            14 L826,18 L830,18 L830,14 L826,14 Z M831,9 L831,13 L835,13 L835,9 L831,9 Z M831,14 L831,18 L835,18 L835,
+            14 L831,14 Z"></path>
+        </g>
+    </g>
+</g>
+</svg>`
+
+export const LINK_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-1258.000000, -96.000000)" fill="#293040" fill-rule="nonzero">
+        <g transform="translate(407.000000, 93.000000)">
+            <path d="M855.499,13.863 L861.863,7.499 L862.573,8.209 L856.209,14.573 L855.499,13.863 Z M854.646498,9.99452063
+            C854.661947,10.0108615 854.677673,10.0270363 854.693676,10.0430391 L855.388521,10.7378841 L852.802248,13.3241571
+            C851.732584,14.3938208 851.732584,16.1280884 852.802248,17.1977522 C853.871912,18.2674159 855.606179,18.2674159
+            856.675843,17.1977522 L859.262116,14.6114792 L859.956961,15.3063242 C859.972964,15.3223269 859.989138,15.3380528
+            860.005479,15.3535018 L857.468863,17.8901187 C855.989021,19.3699604 853.589723,19.3699604 852.109881,17.8901187
+            C850.63004,16.4102769 850.63004,14.0109793 852.109881,12.5311375 L854.646498,9.99452063 Z M857.994521,6.64649819
+            L860.531137,4.10988134 C862.010979,2.63003955 864.410277,2.63003955 865.890119,4.10988134 C867.36996,5.58972313
+            867.36996,7.98902073 865.890119,9.46886252 L863.353502,12.0054794 C863.338053,11.9891385 863.322327,11.9729637
+            863.306324,11.9569609 L862.611479,11.2621159 L865.197752,8.67584293 C866.267416,7.60617918 866.267416,5.87191157
+            865.197752,4.80224782 C864.128088,3.73258406 862.393821,3.73258406 861.324157,4.80224782 L858.737884,7.38852082
+            L858.043039,6.69367584 C858.027036,6.67767307 858.010862,6.66194719 857.994521,6.64649819 Z"></path>
+        </g>
+    </g>
+</g>
+</svg>`
+
+export const EMOJI_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <path d="M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278
+    12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1 C4.13400675,1 1,4.13400675
+    1,8 C1,11.8659932 4.13400675,15 8,15 Z M5,7 C4.44771525,7 4,6.55228475 4,6 C4,5.44771525 4.44771525,5 5,5 C5.55228475,5
+    6,5.44771525 6,6 C6,6.55228475 5.55228475,7 5,7 Z M11,7 C10.4477153,7 10,6.55228475 10,6 C10,5.44771525 10.4477153,5 11,5
+    C11.5522847,5 12,5.44771525 12,6 C12,6.55228475 11.5522847,7 11,7 Z M4,10 L12,10 C11.5415129,11.7252272 9.9244686,13 8,13
+    C6.0755314,13 4.45848714,11.7252272 4,10 Z" fill="#293040"></path>
+</g>
+</svg>`
+
+export const SCREENSHOT_ICON = `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-1529.000000, -96.000000)">
+        <g transform="translate(1529.000000, 96.000000)">
+            <rect fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
+            <polyline stroke="#293040" points="16 14 2 14 2 0 2 0"></polyline>
+            <polyline stroke="#293040" points="4 2 14 2 14 12"></polyline>
+            <rect fill="#293040" x="0" y="1.5" width="2" height="1"></rect>
+            <rect fill="#293040"
+              transform="translate(14.000000, 15.000000)
+              rotate(-90.000000)
+              translate(-14.000000, -15.000000) " x="13" y="14.5" width="2" height="1">
+            </rect>
+        </g>
+    </g>
+</g>
+</svg>`
+
+export const CODE_ICON = `<i class="icon-code"></i>`
+
+export const MENTION_ICON = `<i class="icon-set-keyword"></i>`
+
+export const QUICK_MENU_ICON = `<i class="icon-publish"></i>`
+
+export const SAVE_ICON = `<i class="icon-save"></i>`
+
+export const HELP_ICON = `<i class="icon-help"></i>`
+
+export const SCROLL_TABLE_ICON = `<i class="icon-switch"></i>`
+
+export const GLOBAL_LINK_ICON = `<i class="icon-connect-code" style="color: #5170FF;"></i>`
+
+export const FULLSCREEN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1">
+    <path fill="#333333" d="M64 384h96V160h224.2V64H64zM639.8 64v96H864v224h96V64zM864 864H639.8v96H960V639.61h-96zM160 639.61H64V960h320.2v-96H160z"/>
+</svg>`
+
+export const TRIANGLE_DOWN_ICON = `<i class="icon-triangle-down"></i>`
diff --git a/packages/fluent-editor/src/config/types/additional-toolbar-item.interface.ts b/packages/fluent-editor/src/config/types/additional-toolbar-item.interface.ts
new file mode 100644
index 0000000000..e0179bd615
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/additional-toolbar-item.interface.ts
@@ -0,0 +1,6 @@
+export interface IAdditionalToolItemData {
+  name: string
+  content: string
+  icon: string
+  handler: Function
+}
diff --git a/packages/fluent-editor/src/config/types/content-change.interface.ts b/packages/fluent-editor/src/config/types/content-change.interface.ts
new file mode 100644
index 0000000000..ad4f9f4b81
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/content-change.interface.ts
@@ -0,0 +1,13 @@
+export interface IContentChange {
+  content: any
+  delta: any
+  editor: any
+  html: string | null
+  oldDelta: any
+  source: string
+  text: string
+  textCount: number
+  wordCount: number
+  htmlCount: number
+  isChanged?: boolean
+}
diff --git a/packages/fluent-editor/src/config/types/content-save.interface.ts b/packages/fluent-editor/src/config/types/content-save.interface.ts
new file mode 100644
index 0000000000..51e5f5cc48
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/content-save.interface.ts
@@ -0,0 +1,6 @@
+export interface IContentSave {
+  editor: any
+  content: any
+  html: string | null
+  text: string
+}
diff --git a/packages/fluent-editor/src/config/types/counter-option.interface.ts b/packages/fluent-editor/src/config/types/counter-option.interface.ts
new file mode 100644
index 0000000000..dc66e878a0
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/counter-option.interface.ts
@@ -0,0 +1,7 @@
+export interface ICounterOption {
+  format?: 'text' | 'html'
+  unit?: 'word' | 'char'
+  count?: number
+  template?: string | Function
+  errorTemplate?: string | Function
+}
diff --git a/packages/fluent-editor/src/config/types/editor-config.interface.ts b/packages/fluent-editor/src/config/types/editor-config.interface.ts
new file mode 100644
index 0000000000..5ab92a166c
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/editor-config.interface.ts
@@ -0,0 +1,24 @@
+import { IEditorModules } from './editor-modules.interface'
+import { EditorFormat } from './type'
+
+export interface IEditorConfig {
+  bounds?: HTMLElement | string
+  debug?: 'error' | 'warn' | 'log' | false
+  format?: EditorFormat
+  formats?: any
+  modules?: IEditorModules
+  placeholder?: string
+  readOnly?: boolean
+  screenshotOnStaticPage?: boolean
+  scrollingContainer?: HTMLElement | string | null
+  theme?: string
+  // Custom Config to track all changes or only changes by 'user'
+  trackChanges?: 'user' | 'all'
+  autoProtocol?: boolean
+  editorPaste?: any
+  uploadOption?: {
+    imageAccept?: Array<string>[] | string
+    fileAccept?: Array<string>[] | string
+    isVideoPlay?: boolean
+  }
+}
diff --git a/packages/fluent-editor/src/config/types/editor-modules.interface.ts b/packages/fluent-editor/src/config/types/editor-modules.interface.ts
new file mode 100644
index 0000000000..5df163f1e5
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/editor-modules.interface.ts
@@ -0,0 +1,35 @@
+import { ToolbarOption } from './type'
+
+export interface IEditorModules {
+  [key: string]: any
+  clipboard?:
+    | {
+        matchers?: any[]
+        matchVisual?: boolean
+      }
+    | boolean
+  history?:
+    | {
+        delay?: number
+        maxStack?: number
+        userOnly?: boolean
+      }
+    | boolean
+  keyboard?:
+    | {
+        bindings?: any
+      }
+    | boolean
+  syntax?: boolean
+  toolbar?:
+    | (string | string[])[][]
+    | ToolbarOption
+    | string
+    | {
+        container?: string | string[] | ToolbarOption
+        handlers?: {
+          [key: string]: any
+        }
+      }
+    | boolean
+}
diff --git a/packages/fluent-editor/src/config/types/file-operation.interface.ts b/packages/fluent-editor/src/config/types/file-operation.interface.ts
new file mode 100644
index 0000000000..50301f6d34
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/file-operation.interface.ts
@@ -0,0 +1,10 @@
+export interface FileOperation {
+  operation: string
+  hasRejectedFile?: boolean
+  data: {
+    fileId?: string
+    file?: File
+    files?: Array<File>
+  }
+  callback?: Function
+}
diff --git a/packages/fluent-editor/src/config/types/focus-change.interface.ts b/packages/fluent-editor/src/config/types/focus-change.interface.ts
new file mode 100644
index 0000000000..d3d89d82aa
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/focus-change.interface.ts
@@ -0,0 +1,4 @@
+export interface IFocusChange {
+  editor: any
+  source: string
+}
diff --git a/packages/fluent-editor/src/config/types/fullscreen-module.interface.ts b/packages/fluent-editor/src/config/types/fullscreen-module.interface.ts
new file mode 100644
index 0000000000..c43234afbf
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/fullscreen-module.interface.ts
@@ -0,0 +1,4 @@
+export interface IFullscreenModule {
+  mode?: 'normal' | 'immersive'
+  zIndex: number
+}
diff --git a/packages/fluent-editor/src/config/types/help-panel-item.interface.ts b/packages/fluent-editor/src/config/types/help-panel-item.interface.ts
new file mode 100644
index 0000000000..3305fd032d
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/help-panel-item.interface.ts
@@ -0,0 +1,5 @@
+export interface IHelpPanelItem {
+  icon: string
+  text: string
+  hotkey: string[]
+}
diff --git a/packages/fluent-editor/src/config/types/help-panel-option.interface.ts b/packages/fluent-editor/src/config/types/help-panel-option.interface.ts
new file mode 100644
index 0000000000..1dace74374
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/help-panel-option.interface.ts
@@ -0,0 +1,7 @@
+import { IHelpPanelItem } from './help-panel-item.interface'
+
+export interface IHelpPanelOption {
+  id: string
+  title: string
+  content: IHelpPanelItem[]
+}
diff --git a/packages/fluent-editor/src/config/types/image-module.interface.ts b/packages/fluent-editor/src/config/types/image-module.interface.ts
new file mode 100644
index 0000000000..60c3bf45f9
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/image-module.interface.ts
@@ -0,0 +1,3 @@
+export interface ImageModule {
+  zIndex: number
+}
diff --git a/packages/fluent-editor/src/config/types/image-upload.interface.ts b/packages/fluent-editor/src/config/types/image-upload.interface.ts
new file mode 100644
index 0000000000..5a52f9d8ee
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/image-upload.interface.ts
@@ -0,0 +1,5 @@
+export interface ImageUpload {
+  file: File
+  hasRejectedImage?: boolean
+  callback: Function
+}
diff --git a/packages/fluent-editor/src/config/types/index.ts b/packages/fluent-editor/src/config/types/index.ts
new file mode 100644
index 0000000000..68d726d122
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/index.ts
@@ -0,0 +1,22 @@
+export * from './additional-toolbar-item.interface'
+export * from './content-change.interface'
+export * from './content-save.interface'
+export * from './counter-option.interface'
+export * from './editor-config.interface'
+export * from './editor-modules.interface'
+export * from './focus-change.interface'
+export * from './fullscreen-module.interface'
+export * from './help-panel-option.interface'
+export * from './image-module.interface'
+export * from './image-upload.interface'
+export * from './file-operation.interface'
+export * from './load-on-demand-module.interface'
+export * from './mention-module.interface'
+export * from './paste-change.interface'
+export * from './quick-menu-module.interface'
+export * from './range.interface'
+export * from './registry-options.interface'
+export * from './selection-change.interface'
+export * from './toolbar-item.interface'
+export * from './validate-error.interface'
+export * from './type'
diff --git a/packages/fluent-editor/src/config/types/load-on-demand-module.interface.ts b/packages/fluent-editor/src/config/types/load-on-demand-module.interface.ts
new file mode 100644
index 0000000000..0246a02a66
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/load-on-demand-module.interface.ts
@@ -0,0 +1,5 @@
+export interface ILoadOnDemandModule {
+  mode?: 'line' | 'text'
+  limit?: number
+  lazy?: boolean
+}
diff --git a/packages/fluent-editor/src/config/types/mention-module.interface.ts b/packages/fluent-editor/src/config/types/mention-module.interface.ts
new file mode 100644
index 0000000000..6ec9a506ee
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/mention-module.interface.ts
@@ -0,0 +1,8 @@
+export interface IMentionModule {
+  data: object[]
+  itemKey: string
+  searchKey: string
+  mentionSearchFn?: (term: string) => Promise<any[]>
+  mentionSelect?: any
+  mentionRemove?: any
+}
diff --git a/packages/fluent-editor/src/config/types/paste-change.interface.ts b/packages/fluent-editor/src/config/types/paste-change.interface.ts
new file mode 100644
index 0000000000..d8f97a0180
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/paste-change.interface.ts
@@ -0,0 +1,4 @@
+export interface IPasteChange {
+  files: File[]
+  callback: Function
+}
diff --git a/packages/fluent-editor/src/config/types/quick-menu-module.interface.ts b/packages/fluent-editor/src/config/types/quick-menu-module.interface.ts
new file mode 100644
index 0000000000..fd3bdeeb43
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/quick-menu-module.interface.ts
@@ -0,0 +1,3 @@
+export interface IQuickMenuModule {
+  zIndex: number
+}
diff --git a/packages/fluent-editor/src/config/types/range.interface.ts b/packages/fluent-editor/src/config/types/range.interface.ts
new file mode 100644
index 0000000000..57d7e20cd4
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/range.interface.ts
@@ -0,0 +1,4 @@
+export interface IRange {
+  index: number
+  length: number
+}
diff --git a/packages/fluent-editor/src/config/types/registry-options.interface.ts b/packages/fluent-editor/src/config/types/registry-options.interface.ts
new file mode 100644
index 0000000000..0d83e47112
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/registry-options.interface.ts
@@ -0,0 +1,5 @@
+export interface IRegistryOption {
+  importUrl?: string
+  params?: any
+  register?: any
+}
diff --git a/packages/fluent-editor/src/config/types/selection-change.interface.ts b/packages/fluent-editor/src/config/types/selection-change.interface.ts
new file mode 100644
index 0000000000..8c52fc09a7
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/selection-change.interface.ts
@@ -0,0 +1,8 @@
+import { IRange } from './range.interface'
+
+export interface ISelectionChange {
+  editor: any
+  oldRange: IRange | null
+  range: IRange | null
+  source: string
+}
diff --git a/packages/fluent-editor/src/config/types/toolbar-item.interface.ts b/packages/fluent-editor/src/config/types/toolbar-item.interface.ts
new file mode 100644
index 0000000000..f9abd91d3f
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/toolbar-item.interface.ts
@@ -0,0 +1,12 @@
+export interface IToolbarItem {
+  indent?: string
+  list?: string
+  direction?: string
+  header?: number | boolean[] | number[]
+  color?: string[]
+  background?: string[]
+  align?: string[]
+  script?: string
+  font?: string[]
+  size?: boolean[] | string[]
+}
diff --git a/packages/fluent-editor/src/config/types/type.ts b/packages/fluent-editor/src/config/types/type.ts
new file mode 100644
index 0000000000..59920519e7
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/type.ts
@@ -0,0 +1,4 @@
+import { IToolbarItem } from './toolbar-item.interface'
+
+export type ToolbarOption = string[][] | IToolbarItem[][]
+export type EditorFormat = 'object' | 'json' | 'html' | 'text'
diff --git a/packages/fluent-editor/src/config/types/validate-error.interface.ts b/packages/fluent-editor/src/config/types/validate-error.interface.ts
new file mode 100644
index 0000000000..8b98049937
--- /dev/null
+++ b/packages/fluent-editor/src/config/types/validate-error.interface.ts
@@ -0,0 +1,11 @@
+export interface IValidateError {
+  minLengthError?: {
+    given: number
+    minLength: number
+  }
+  maxLengthError?: {
+    given: number
+    maxLength: number
+  }
+  requiredError?: { empty: boolean }
+}
diff --git a/packages/fluent-editor/src/counter/index.ts b/packages/fluent-editor/src/counter/index.ts
new file mode 100644
index 0000000000..a97c7b7208
--- /dev/null
+++ b/packages/fluent-editor/src/counter/index.ts
@@ -0,0 +1,68 @@
+import * as Quill from 'quill';
+import { LANG_CONF } from '../config';
+import { ICounterOption } from '../config/types';
+
+export default class Counter {
+  container: HTMLDivElement;
+  options: ICounterOption;
+  defaultOptions: ICounterOption = {
+    format: 'text',
+    unit: 'char',
+    template: LANG_CONF['counter-template'],
+    count: 500
+  };
+
+  // @ts-ignore
+  constructor(private quill: Quill, options: ICounterOption) {
+    this.options = { ...this.defaultOptions, ...options};
+    this.container = quill.addContainer('ql-counter');
+    quill.on(Quill.events.TEXT_CHANGE, this.renderCount);
+    this.renderCount();
+  }
+
+  renderCount = () => {
+    setTimeout(() => {
+      // @ts-ignore
+      const { format, count: totalCount, unit, template: counterTemplate, errorTemplate } = this.options;
+      const count = this.getContentLength(format);
+      const restCount = totalCount - count;
+      const countUnit = unit === 'char' ? LANG_CONF.char : LANG_CONF.word;
+      let template: any = counterTemplate;
+      if (typeof template === 'function') {
+        template = template(count, restCount);
+      }
+      const desc = template.replace('{{count}}', count)
+        .replace('{{totalCount}}', String(totalCount))
+        .replace('{{restCount}}', String(restCount))
+        .replace(/{{countUnit}}/g, countUnit);
+
+      let limitTemplate: any = errorTemplate || LANG_CONF['counter-limit-tips'];
+      if (typeof limitTemplate === 'function') {
+        limitTemplate = limitTemplate(count, restCount);
+      }
+      const limitTips = limitTemplate.replace('{{countUnit}}', countUnit);
+      if (restCount < 0) {
+        this.container.innerHTML = errorTemplate ? limitTips : `<span style="color:red">${limitTips}</span>`;
+      } else {
+        this.container.innerHTML = desc;
+      }
+    });
+  };
+
+  getContentLength(format) {
+    let content = this.quill.getText();
+    if (format === 'html') {
+      let html = this.quill.root.innerHTML;
+      // 编辑器初始时
+      if (html === '<p><br></p>' || html === '<div><br><div>') {
+        html = '';
+      }
+      content = html;
+    }
+    const text = content.replace(/\s/g, '').trim();
+    if (this.options.unit === 'word') {
+      return !content.trim() ? 0 : content.trim().split(/\s+/).length;
+    }
+    return text.length;
+  }
+}
diff --git a/packages/fluent-editor/src/custom-clipboard.ts b/packages/fluent-editor/src/custom-clipboard.ts
new file mode 100644
index 0000000000..b39f11b1a8
--- /dev/null
+++ b/packages/fluent-editor/src/custom-clipboard.ts
@@ -0,0 +1,615 @@
+import * as Quill from 'quill'
+import {
+  ERROR_IMAGE_PLACEHOLDER_CN,
+  ERROR_IMAGE_PLACEHOLDER_EN,
+} from './config/base64-image'
+import { BIG_DELTA_LIMIT, LANG_CONF } from './config/editor.config'
+import {
+  hexToRgbA,
+  imageFileToUrl,
+  imageUrlToFile,
+  insideTable,
+  isNullOrUndefined,
+  omit,
+  replaceDeltaImage,
+  splitWithBreak,
+} from './config/editor.utils'
+
+const Clipboard = Quill.imports['modules/clipboard']
+const Delta = Quill.imports['delta']
+
+class CustomClipboard extends Clipboard {
+  quill
+  convert
+  onCopy
+  matchers
+
+  prepareMatching(container, nodeMatches) {
+    const elementMatchers = []
+    const textMatchers = []
+    this.matchers.forEach((pair) => {
+      const [selector, matcher] = pair
+      switch (selector) {
+        case Node.TEXT_NODE:
+          textMatchers.push(matcher)
+          break
+        case Node.ELEMENT_NODE:
+          elementMatchers.push(matcher)
+          break
+        default: {
+          // word 的 v:shape 系列标签只能通过 getElementsByTagName 获取
+          const vRegex = /v:(.+)/
+          const nodeList = vRegex.test(selector)
+            ? Array.from(container.getElementsByTagName(selector))
+            : Array.from(container.querySelectorAll(selector))
+          nodeList.forEach((node) => {
+            if (nodeMatches.has(node)) {
+              const matches = nodeMatches.get(node)
+              matches.push(matcher)
+            } else {
+              nodeMatches.set(node, [matcher])
+            }
+          })
+          break
+        }
+      }
+    })
+    return [elementMatchers, textMatchers]
+  }
+
+  onCaptureCopy(e, isCut = false) {
+    if (e.defaultPrevented) {
+      return
+    }
+    e.preventDefault()
+    const [range] = this.quill.selection.getRange()
+    if (isNullOrUndefined(range)) {
+      return
+    }
+    const { html, text } = this.onCopy(range, isCut)
+
+    // 兼容IE11浏览器`
+    if (!e.clipboardData) {
+      e.clipboardData = {
+        types: 'text/plain',
+        setData: (type, value) => {
+          return window['clipboardData'].setData('Text', value)
+        },
+      }
+    }
+
+    // 复制代码时移除utf8中产生的不间断空格\u00A0
+    let plainText = text
+    if (html.startsWith('<pre>')) {
+      plainText = text.replace(/\u00A0/g, ' ')
+    }
+
+    e.clipboardData.setData('text/html', html)
+    e.clipboardData.setData('text/plain', plainText)
+    if (isCut) {
+      this.quill.deleteText(range, Quill.sources.USER)
+    }
+  }
+
+  onCapturePaste(e) {
+    if (e.defaultPrevented || !this.quill.isEnabled()) {
+      return
+    }
+    e.preventDefault()
+    const range = this.quill.getSelection(true)
+    if (isNullOrUndefined(range)) {
+      return
+    }
+
+    // 兼容IE11浏览器
+    if (!e.clipboardData) {
+      e.clipboardData = {
+        types: 'text/plain',
+        getData: () => {
+          return window['clipboardData'].getData('Text')
+        },
+      }
+    }
+
+    const html = e.clipboardData.getData('text/html')
+    const text = e.clipboardData.getData('text/plain')
+    const files = Array.from(e.clipboardData.files || [])
+    const msExcelCheck = /<meta.*?Microsoft Excel\s[\d].*?>/
+
+    if (html.search(msExcelCheck) === -1 && this.quill.options.uploadOption.imageUploadToServer && files.length > 0) {
+      this.quill.uploader.upload(range, files)
+    } else {
+      const msWordCheck1 =
+        /<meta\s*name="?generator"?\s*content="?microsoft\s*word\s*\d+"?\/?>/i
+      const msWordCheck2 = /xmlns:o="urn:schemas-microsoft-com/i
+      const result = { html, text, files, rtf: null }
+      if (html.search(msExcelCheck) !== -1) {
+        result.html = renderStyles(html)
+      }
+      if (msWordCheck1.test(html) || msWordCheck2.test(html)) {
+        // TODO: 当word文档包含heading时text/rtf读取为空，无法获取hex图片，待修复。可参考ckeditor5/issues/2493
+        result.rtf = e.clipboardData.getData('text/rtf')
+      }
+      this.onPaste(range, result)
+    }
+  }
+
+  onPaste(range, { html, text, files: clipboardFiles, rtf }) {
+    const hexImages = this.extractImageDataFromRtf(rtf)
+    const rootBgColor = getComputedStyle(this.quill.root)['backgroundColor']
+    const formats = this.quill.getFormat(range.index)
+    let pastedDelta = this.convert({ text, html }, formats)
+    pastedDelta = replaceDeltaWhiteSpace(pastedDelta, rootBgColor)
+    const deltaLength = pastedDelta.ops.length
+
+    let loadingTipsContainer
+    if (deltaLength > BIG_DELTA_LIMIT) {
+      loadingTipsContainer = this.quill.addContainer('ql-loading-tips')
+      loadingTipsContainer.innerHTML = LANG_CONF['pasting']
+    }
+
+    const linePos = { index: range.index, length: range.length, fix: 0 }
+    const [line, offset] = this.quill.getLine(range.index)
+    const isInsideTable = insideTable.call(this)
+
+    const handlePasteContent = (content: any) => {
+      let pastedContent = content
+      // fix: 阻止粘贴代码块和引用导致表格断裂
+      const tableBreaker = pastedContent.ops.find((op) => {
+        return (
+          op.attributes &&
+          (op.attributes['blockquote'] || op.attributes['code-block'])
+        )
+      })
+      if (isInsideTable) {
+        // fix: 阻止带有表格内容粘贴在表格里
+        const table = line.domNode.closest('table.quill-better-table')
+        const tableBlot = Quill.find(table)
+        const tableIndex = this.quill.getIndex(tableBlot)
+        const tableLength = tableBlot.length()
+        const tableEndPos = tableIndex + tableLength
+        const anchorNode = getSelection().anchorNode
+        if (tableBreaker) {
+          return
+        }
+        if (formats['table-col']) {
+          // fix: 光标在表格前端的table-col处时，获取整个表格的index后以此为基准向前移动一位插入粘贴内容且不删除任何内容
+          linePos.index = tableIndex - 1
+          linePos.length = 0
+        } else if (
+          range.index === tableEndPos - 1 &&
+          anchorNode instanceof HTMLDivElement &&
+          anchorNode.classList.contains('quill-better-table-wrapper')
+        ) {
+          const list = pastedContent.filter(
+            (op) => op.attributes && op.attributes['list']
+          )
+          if (list && list.length) {
+            return
+          }
+          // fix: 光标在表格末端时，向后移动一位插入粘贴内容且不删除任何内容
+          // TODO
+          // 当表格最后一格有内容时，没法区分在表格最后一格最末尾和光标在表格后这两种情况，它们的 range 是一样
+          // 这会导致在这两处粘贴表格内容都会将该内容粘贴到表格下一行中
+          linePos.index = tableEndPos
+          linePos.length = 0
+        } else {
+          if (!formats['table-cell-line']) {
+            return
+          }
+          // fix: 解决表格内粘贴问题
+          // 缺陷描述：将表格内的换行文本复制粘贴到别的单元格，会导致表格断开
+          // 原因是：换行的文本delta对象有问题，delta对象前面多了一个纯换行和表格控制头（table-col）
+          // 解决方法：将多余的delta项移除
+          pastedContent = {
+            ops: pastedContent.filter((op, index) => {
+              const regexp = /^[\n\r]+$/
+              const isString = op.insert && typeof op.insert === 'string'
+              const isLine = isString && regexp.test(op.insert)
+              const isCellLine =
+                isLine && op.attributes && op.attributes['table-cell-line']
+              const isList = isLine && op.attributes && op.attributes['list']
+              const isPureLine = isLine && !isCellLine && !isList
+              const isTableCol =
+                isLine && op.attributes && op.attributes['table-col']
+              const isLastCellLine = isCellLine && index === deltaLength - 1
+              return !isPureLine && !isTableCol && !isLastCellLine
+            }),
+          }
+          // fix: 解决从表格外粘贴多行文本导致表格断开的问题
+          pastedContent = rebuildDelta(
+            new Delta(pastedContent.ops),
+            formats['table-cell-line']
+          )
+        }
+      }
+
+      // fix: 粘贴内容末尾为List，且粘贴位置的block或table-cell-line无内容则删除该block或table-cell-line
+      // TODO 这里的lastChild如果不存在，则可能报错
+      const lastChild = pastedContent.ops[pastedContent.ops.length - 1]
+      const hasList =
+        lastChild && lastChild.attributes && lastChild.attributes['list']
+      if (
+        hasList &&
+        offset === 0 &&
+        line &&
+        line.cache.length === 1 &&
+        (line.statics.blotName === 'block' ||
+          line.statics.blotName === 'table-cell-line') &&
+        (!line.next || line.next.statics.blotName !== 'table-view')
+      ) {
+        linePos.index = this.quill.getIndex(line)
+        linePos.length = line.length()
+        linePos.fix = 1
+      }
+
+      const oldDelta = new Delta().retain(linePos.index).delete(linePos.length)
+      const delta = oldDelta.concat(pastedContent)
+      
+      setTimeout(() => {
+        this.quill.updateContents(delta, Quill.sources.USER)
+        this.quill.setSelection(
+          delta.length() - linePos.length - linePos.fix,
+          Quill.sources.SILENT
+        )
+        this.quill.scrollIntoView()
+        if (loadingTipsContainer) {
+          loadingTipsContainer.remove()
+        }
+      })
+    }
+
+    ;(async () => {
+      try {
+        const [files, placeholders, originalUrls, imageIndexs] = this.flipFilesArray(
+          await this.extractFilesFromDelta(
+            pastedDelta,
+            clipboardFiles,
+            hexImages
+          )
+        )
+
+        if (files.length === 0) {
+          handlePasteContent(pastedDelta)
+        } else {
+          if (this.quill.options.editorPaste && this.quill.options.editorPaste.observers.length !== 0) {
+            // 设置editorPaste回调的情况
+            this.quill.options.editorPaste.emit({
+              files: files,
+              callback: ({ code, message, data }) => {
+                if (code === 0) {
+                  const { imageUrls } = data
+                  pastedDelta = replaceDeltaImage(
+                    pastedDelta,
+                    imageUrls,
+                    placeholders
+                  )
+                  handlePasteContent(pastedDelta)
+                } else {
+                  console.error('error message:', message)
+                }
+              },
+            })
+          } else {
+            // 没有originalUrls 也没有文件粘贴
+            if(files[0] !== undefined || originalUrls.length === 0 ) {
+              // 没有设置editorPaste回调的情况下，File格式的占位图需要手动转换成url格式，插入到编辑器中
+              const imageUrls = await this.files2urls(
+                files,
+                placeholders,
+                originalUrls,
+                pastedDelta,
+                imageIndexs
+              )
+              pastedDelta = replaceDeltaImage(
+                pastedDelta,
+                imageUrls,
+                placeholders
+              )
+            }
+            handlePasteContent(pastedDelta)
+          }
+        }
+      } catch (e) {
+        throw new Error('Paste failed.')
+      }
+    })()
+  }
+
+  files2urls(files, placeholders, originalUrls, pastedDelta, imageIndexs) {
+    return Promise.all(
+      files.map((imageFile, index) => {
+        const netImgExp = /^((http|https)\:)?\/\/([\s\S]+)$/
+        if (
+          !placeholders[index] &&
+          originalUrls[index] &&
+          netImgExp.test(originalUrls[index])
+        ) {
+          // 不是占位图的普通url图片直接返回url
+          return new Promise((resolve) => {
+            resolve(originalUrls[index])
+          })
+        } else if(this.quill.options.uploadOption.imageUploadToServer) {
+          const range = this.getImgSelection(pastedDelta, imageIndexs[index])
+          this.quill.uploader.upload(range, [imageFile])
+        } else {
+          // 占位图或者跨域图需要手动转换成url格式
+          return imageFileToUrl(imageFile)
+        }
+      })
+    )
+  }
+
+  flipFilesArray(filesArr) {
+    const files = []
+    const placeholders = []
+    const originalUrls = []
+    const imageIndexs = []
+    filesArr.forEach((item: any) => {
+      if (item) {
+        const [file, placeholder, originalUrl, imageIndex] = item
+        files.push(file)
+        placeholders.push(placeholder)
+        originalUrls.push(originalUrl)
+        if(imageIndex === 0 || imageIndex) {
+          imageIndexs.push(imageIndex)
+        }
+      }
+    })
+    return [files, placeholders, originalUrls, imageIndexs]
+  }
+
+  // 将图片从hex转为base64
+  convertHexToBase64(hexString) {
+    return btoa(
+      hexString
+        .match(/\w{2}/g)
+        .map((char) => {
+          return String.fromCharCode(parseInt(char, 16))
+        })
+        .join('')
+    )
+  }
+
+  // 匹配rtf中的图片，存储为{hex, type}对象数组
+  extractImageDataFromRtf(rtfData) {
+    if (!rtfData) {
+      return []
+    }
+
+    const regexPictureHeader =
+      /{\\pict[\s\S]+?\\bliptag-?\d+(\\blipupi-?\d+)?({\\\*\\blipuid\s?[\da-fA-F]+)?[\s}]*?/
+    const regexPicture = new RegExp(
+      '(?:(' + regexPictureHeader.source + '))([\\da-fA-F\\s]+)\\}',
+      'g'
+    )
+    const images = rtfData.match(regexPicture)
+    const result = []
+
+    if (images) {
+      for (const image of images) {
+        let imageType = ''
+
+        if (image.includes('\\pngblip')) {
+          imageType = 'image/png'
+        } else if (image.includes('\\jpegblip')) {
+          imageType = 'image/jpeg'
+        }
+
+        if (imageType) {
+          result.push({
+            hex: image
+              .replace(regexPictureHeader, '')
+              .replace(/[^\da-fA-F]/g, ''),
+            type: imageType,
+          })
+        }
+      }
+    }
+
+    return result
+  }
+
+  extractFilesFromDelta(delta, clipboardFiles, hexImages?) {
+    let index = -1
+    return Promise.all(
+      delta.map(async (op) => {
+        index++
+        const image = op.insert.image
+        if (!image || image.hasExisted) {
+          return
+        }
+
+        let file
+        let isPlaceholderImage = false
+        let imageIndex
+        try {
+          // hex 图片存在则为 file:/// 协议本地图片，使用 hex 图片转为 base64 读取
+          const hexImage = hexImages.length && hexImages.shift()
+          const newImage =
+            hexImage &&
+            `data:${hexImage.type};base64,${this.convertHexToBase64(
+              hexImage.hex
+            )}`
+          imageIndex = index
+          file = await imageUrlToFile(newImage || image.src || image)
+        } catch (err) {
+          if (clipboardFiles.length !== 0) {
+            // 跨域获取图片失败时从剪切板获取图片
+            const clipboardFile = clipboardFiles[0]
+            const imageType =
+              clipboardFile.type?.indexOf('image') === -1
+                ? 'image/png'
+                : clipboardFile.type
+            const blob = clipboardFile.slice(0, clipboardFile.size, imageType)
+            file = new File([blob], `image-CORS-${new Date().getTime()}.png`, {
+              type: imageType,
+            })
+          } else if(image.src.startsWith('http')) {
+            //什么都不做
+          } else {
+            // 剪切板中无图片，用失败占位图替换
+            const errorImagePlaceholderJpg =
+              LANG_CONF['img-error'] === 'Image Copy Error'
+                ? ERROR_IMAGE_PLACEHOLDER_EN
+                : ERROR_IMAGE_PLACEHOLDER_CN
+            file = await imageUrlToFile(errorImagePlaceholderJpg, true)
+            isPlaceholderImage = true
+          }
+        }
+
+        return [file, isPlaceholderImage, image, imageIndex]
+      })
+    )
+  }
+
+  getImgSelection(delta, imageIndex) {
+    let length = 0
+    delta.ops.every((op, index)=>{
+      if(index === imageIndex) {
+        return false
+      }
+      if(typeof op.insert === 'string') {
+        length += op.insert.length
+      }
+      return true
+    })
+    let range = {
+      index: length,
+      length: 0
+    }
+    return range
+  }
+}
+
+function rebuildDelta(delta, cellLine) {
+  const { cell: cellId, colspan, row: rowId, rowspan } = cellLine
+  const buildedDelta = delta.reduce((newDelta, op) => {
+    if (op.insert && typeof op.insert === 'string') {
+      const lines = splitWithBreak(op.insert)
+
+      lines.forEach((text) => {
+        if (text === '\n') {
+          // 对换行增加 table-cell-line 格式，以避免表格断开
+          newDelta.insert('\n', {
+            ...op.attributes,
+            'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan },
+          })
+        } else {
+          text = text.endsWith('\r') ? text.slice(0, -1) : text
+          newDelta.insert(
+            text,
+            omit(op.attributes, ['table', 'table-cell-line'])
+          )
+        }
+      })
+    } else {
+      newDelta.insert(op.insert, op.attributes)
+    }
+
+    return newDelta
+  }, new Delta())
+
+  return buildedDelta
+}
+
+function replaceStrWhiteSpace(str) {
+  const isWhiteSpace = (value) => /^(\u3000|\u0020){1}$/.test(value) // 空白字符
+  let textWithWhiteSpace = ''
+  let beginHasChar = false
+  for (const char of str) {
+    if (isWhiteSpace(char) && !beginHasChar) {
+      textWithWhiteSpace += '\u00a0'
+    } else {
+      textWithWhiteSpace += char
+      beginHasChar = true
+    }
+  }
+  return textWithWhiteSpace
+}
+
+function replaceDeltaWhiteSpace(delta, rootBgColor?) {
+  return delta.reduce((newDelta, op) => {
+    // fix: 当粘贴文字颜色和编辑器背景色一致且自身无背景色的情况下移除文字颜色样式，避免误导用户粘贴无效
+    if (
+      rootBgColor &&
+      op.attributes &&
+      op.attributes.color &&
+      !op.attributes.background
+    ) {
+      const originColor = op.attributes.color
+      const fontColor =
+        originColor.indexOf('#') === 0 ? hexToRgbA(originColor) : originColor
+      if (
+        fontColor === rootBgColor ||
+        (fontColor === 'rgba(255,255,255,1)' &&
+          rootBgColor === 'rgba(0, 0, 0, 0)')
+      ) {
+        delete op.attributes.color
+      }
+    }
+    if (op.insert && typeof op.insert === 'string') {
+      const lines = splitWithBreak(op.insert)
+      let insertWithWhiteSpace = ''
+      lines.forEach((text) => {
+        insertWithWhiteSpace += replaceStrWhiteSpace(text)
+      })
+      newDelta.insert(insertWithWhiteSpace, op.attributes)
+    } else {
+      newDelta.insert(op.insert, op.attributes)
+    }
+    return newDelta
+  }, new Delta())
+}
+
+function renderStyles(html) {
+  let htmlString = html
+  // Trim unnecessary parts.
+  htmlString = htmlString.substring(
+    htmlString.indexOf('<html '),
+    htmlString.length
+  )
+  htmlString = htmlString.substring(
+    0,
+    htmlString.lastIndexOf('</html>') + '</html>'.length
+  )
+
+  // Add temporary iframe.
+  const iframe = document.createElement('iframe')
+  iframe.style.display = 'none'
+  document.body.appendChild(iframe)
+
+  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document
+  iframeDoc.open()
+  iframeDoc.write(htmlString)
+  iframeDoc.close()
+
+  let collection
+  let pointer
+  const rules =
+    iframeDoc.styleSheets[iframeDoc.styleSheets.length - 1]['cssRules']
+
+  // Convert internal styles to inline style of respective node.
+  for (let idx = 0; idx < rules.length; idx++) {
+    if ((rules[idx] as CSSStyleRule).selectorText === '') {
+      continue
+    }
+    collection = iframeDoc.body.querySelectorAll(
+      (rules[idx] as CSSStyleRule).selectorText
+    )
+
+    for (pointer = 0; pointer < collection.length; pointer++) {
+      collection[pointer].style.cssText += (
+        rules[idx] as CSSStyleRule
+      ).style.cssText
+    }
+  }
+
+  const convertedString = iframeDoc.firstChild['outerHTML']
+  // Remove temporary iframe.
+  iframe.parentNode.removeChild(iframe)
+
+  return convertedString
+}
+
+export default CustomClipboard
diff --git a/packages/fluent-editor/src/custom-image/BlotFormatter.ts b/packages/fluent-editor/src/custom-image/BlotFormatter.ts
new file mode 100644
index 0000000000..ab54d5b76d
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/BlotFormatter.ts
@@ -0,0 +1,166 @@
+import * as Quill from 'quill';
+import Action from './actions/Action';
+import ImageBlot, { ImageContainerBlot } from './image';
+import DefaultOptions, { Options } from './Options';
+import BlotSpec from './specs/BlotSpec';
+import { CustomImageSpec } from './specs/CustomImageSpec';
+import { merge as deepmerge } from 'lodash-es';
+
+const dontMerge = (destination: Array<any>, source: Array<any>) => source;
+
+// @dynamic
+export default class BlotFormatter {
+  quill: any;
+  options: Options;
+  currentSpec: BlotSpec;
+  specs: BlotSpec[];
+  overlay: HTMLElement;
+  actions: Action[];
+  observer: any;
+
+  static register() {
+    Quill.register('formats/image', ImageBlot, true);
+    Quill.register('formats/image-container', ImageContainerBlot, true);
+    Quill.register('modules/image-spec', CustomImageSpec, true);
+  }
+
+  constructor(quill: any, options: any = {}) {
+    this.quill = quill;
+    this.options = deepmerge(DefaultOptions, options, { arrayMerge: dontMerge });
+    this.currentSpec = null;
+    this.actions = [];
+    this.overlay = document.createElement('div');
+    this.overlay.classList.add(this.options.overlay.className);
+    if (this.options.overlay.style) {
+      Object.assign(this.overlay.style, this.options.overlay.style);
+    }
+
+    // disable native image resizing on firefox
+    document.execCommand('enableObjectResizing', false, 'false'); // eslint-disable-next-line-line no-undef
+    this.quill.root.parentNode.style.position = this.quill.root.parentNode.style.position || 'relative';
+    this.quill.root.addEventListener('click', this.onClick);
+    this.specs = this.options.specs.map((SpecClass: any) => new SpecClass(this));
+    this.specs.forEach((spec) => spec.init());
+  }
+
+  show(spec: BlotSpec) {
+    this.currentSpec = spec;
+    this.currentSpec.setSelection();
+    this.setUserSelect('none');
+    this.quill.root.parentNode.appendChild(this.overlay);
+    this.repositionOverlay();
+    this.createActions(spec);
+
+    // fix: 图片对齐之后，虚线外框应该跟随移动
+    const imageDom = spec.getTargetElement();
+    const win: any = window;
+    const MutationObserver = win.MutationObserver || win.WebKitMutationObserver || win.MozMutationObserver;
+    const element = imageDom.parentNode;
+    this.observer = new MutationObserver((mutationList) => {
+      for (const mutation of mutationList) {
+        const target = mutation.target;
+        const image = target.querySelector('img');
+        if (image) {
+          this.repositionOverlay();
+        }
+      }
+    });
+    this.observer.observe(element, {
+      attributes: true,
+      attributeFilter: ['class'],
+      attributeOldValue: true,
+      subtree: true,
+    });
+    document.body.addEventListener('click', this.hideImageOverlay, true);
+  }
+
+  hide() {
+    if (!this.currentSpec) {
+      return;
+    }
+
+    const imgDom = this.currentSpec.getTargetElement();
+    if (imgDom) {
+      imgDom.classList.remove('current-select-img');
+    }
+
+    this.currentSpec.onHide();
+    this.currentSpec = null;
+    this.quill.root.parentNode.removeChild(this.overlay);
+    this.overlay.style.setProperty('display', 'none');
+    this.setUserSelect('');
+    this.destroyActions();
+  }
+
+  update() {
+    this.repositionOverlay();
+    this.actions.forEach((action) => action.onUpdate());
+  }
+
+  createActions(spec: BlotSpec) {
+    this.actions = spec.getActions().map((ActionClass: any) => {
+      const action: Action = new ActionClass(this);
+      action.onCreate();
+      return action;
+    });
+  }
+
+  destroyActions() {
+    this.actions.forEach((action: Action) => action.onDestroy());
+    this.actions = [];
+  }
+
+  repositionOverlay() {
+    if (!this.currentSpec) {
+      return;
+    }
+
+    const overlayTarget = this.currentSpec.getOverlayElement();
+    if (!overlayTarget) {
+      return;
+    }
+
+    const parent: HTMLElement = this.quill.root.parentNode;
+    const specRect = overlayTarget.getBoundingClientRect();
+    const parentRect = parent.getBoundingClientRect();
+
+    Object.assign(this.overlay.style, {
+      display: 'block',
+      left: `${specRect.left - parentRect.left - 1 + parent.scrollLeft}px`,
+      top: `${specRect.top - parentRect.top + parent.scrollTop}px`,
+      width: `${specRect.width}px`,
+      height: `${specRect.height}px`,
+    });
+  }
+
+  setUserSelect(value: string) {
+    const props: string[] = [
+      'userSelect',
+      'mozUserSelect',
+      'webkitUserSelect',
+      'msUserSelect',
+    ];
+
+    props.forEach((prop: string) => {
+      // set on contenteditable element and <html>
+      this.quill.root.style.setProperty(prop, value);
+      if (document.documentElement) {
+        document.documentElement.style.setProperty(prop, value);
+      }
+    });
+  }
+
+  onClick = () => {
+    this.hide();
+  };
+
+  hideImageOverlay = (event) => {
+    const target = event.target;
+    const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay');
+    // 点击图片操作框之外应该将其销毁
+    if (!isBlotFormatter) {
+      this.hide();
+    }
+    document.body.removeEventListener('click', this.hideImageOverlay);
+  };
+}
diff --git a/packages/fluent-editor/src/custom-image/Options.ts b/packages/fluent-editor/src/custom-image/Options.ts
new file mode 100644
index 0000000000..7e49efa39f
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/Options.ts
@@ -0,0 +1,150 @@
+import ImageSpec from './specs/ImageSpec';
+
+export interface OverlayOptions {
+  // classname applied to the overlay element
+  className: string;
+  // style applied to overlay element, or null to prevent styles
+  style: {};
+}
+
+export interface ResizeOptions {
+  // class name applied to the resize handles
+  handleClassName: string;
+  // style applied to resize handles, or null to prevent styles
+  handleStyle: {};
+}
+
+export interface AlignOptions {
+  // the name of the attribute for an element that has its alignment changed
+  attribute: string;
+  // the aligner does the actual alignment switch
+  aligner: {
+    // whether or not the aligner should handle the actual alignment properties
+    applyStyle: boolean;
+  };
+  // icons used for alignment
+  icons: {
+    left: string;
+    center: string;
+    right: string;
+  };
+  // the toolbar so users can change alignments
+  toolbar: {
+    // whether or not users can deselect an alignment. it's up to you to set the initial alignment
+    allowDeselect: boolean;
+    // class name applied to the root toolbar element
+    mainClassName: string;
+    // style applied to root toolbar element, or null to prevent styles
+    mainStyle;
+    // class name applied to each button in the toolbar
+    buttonClassName: string;
+    /* whether or not to add the selected style to the buttons.
+    they'll always get the is-selected class */
+    addButtonSelectStyle: boolean;
+    // style applied to buttons, or null to prevent styles
+    buttonStyle;
+    // style applied to the svgs in the buttons
+    svgStyle;
+  };
+}
+
+export interface Options {
+  // the BlotSpecs supported
+  specs: any;
+  overlay: OverlayOptions;
+  align: AlignOptions;
+  resize: ResizeOptions;
+}
+
+const DefaultOptions: Options = {
+  specs: [
+    ImageSpec,
+  ],
+  overlay: {
+    className: 'blot-formatter__overlay',
+    style: {
+      position: 'absolute',
+      boxSizing: 'border-box',
+      border: '1px dashed #444',
+    },
+  },
+  align: {
+    attribute: 'data-align',
+    aligner: {
+      applyStyle: true,
+    },
+    icons: {
+      left: `
+        <svg viewbox="0 0 18 18">
+          <line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
+        </svg>
+      `,
+      center: `
+        <svg viewbox="0 0 18 18">
+           <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
+        </svg>
+      `,
+      right: `
+        <svg viewbox="0 0 18 18">
+          <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
+        </svg>
+      `,
+    },
+    toolbar: {
+      allowDeselect: true,
+      mainClassName: 'blot-formatter__toolbar',
+      mainStyle: {
+        position: 'absolute',
+        top: '-12px',
+        right: '0',
+        left: '0',
+        height: '0',
+        minWidth: '100px',
+        font: '12px/1.0 Arial, Helvetica, sans-serif',
+        textAlign: 'center',
+        color: '#333',
+        boxSizing: 'border-box',
+        cursor: 'default',
+        zIndex: '1',
+      },
+      buttonClassName: 'blot-formatter__toolbar-button',
+      addButtonSelectStyle: true,
+      buttonStyle: {
+        display: 'inline-block',
+        width: '24px',
+        height: '24px',
+        background: 'white',
+        border: '1px solid #999',
+        verticalAlign: 'middle',
+      },
+      svgStyle: {
+        display: 'inline-block',
+        width: '24px',
+        height: '24px',
+        background: 'white',
+        border: '1px solid #999',
+        verticalAlign: 'middle',
+      },
+    },
+  },
+  resize: {
+    handleClassName: 'blot-formatter__resize-handle',
+    handleStyle: {
+      position: 'absolute',
+      height: '12px',
+      width: '12px',
+      backgroundColor: 'white',
+      border: '1px solid #777',
+      boxSizing: 'border-box',
+      opacity: '0.80',
+    },
+  },
+};
+
+export default DefaultOptions;
diff --git a/packages/fluent-editor/src/custom-image/actions/Action.ts b/packages/fluent-editor/src/custom-image/actions/Action.ts
new file mode 100644
index 0000000000..f4a2c8ad8c
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/actions/Action.ts
@@ -0,0 +1,13 @@
+export default class Action {
+  formatter;
+
+  constructor(formatter) {
+    this.formatter = formatter;
+  }
+
+  onCreate() {}
+
+  onDestroy() {}
+
+  onUpdate() {}
+}
diff --git a/packages/fluent-editor/src/custom-image/actions/CustomResizeAction.ts b/packages/fluent-editor/src/custom-image/actions/CustomResizeAction.ts
new file mode 100644
index 0000000000..cf3a5bbe9c
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/actions/CustomResizeAction.ts
@@ -0,0 +1,200 @@
+import Action from './Action';
+const MIN_WIDTH = 40;
+
+const getElementStyle = element => element.currentStyle
+  ? element.currentStyle
+  : window.getComputedStyle(element, null);
+export default class CustomResizeAction extends Action {
+  topLeftHandle: HTMLElement;
+  topRightHandle: HTMLElement;
+  bottomRightHandle: HTMLElement;
+  bottomLeftHandle: HTMLElement;
+  dragHandle: HTMLElement;
+  dragStartX: number;
+  preDragWidth: number;
+  targetRatio: number;
+  maxWidth: number;
+  minWidth: number;
+
+  constructor(formatter) {
+    super(formatter);
+    this.topLeftHandle = this.createHandle('top-left', 'nwse-resize');
+    this.topRightHandle = this.createHandle('top-right', 'nesw-resize');
+    this.bottomRightHandle = this.createHandle('bottom-right', 'nwse-resize');
+    this.bottomLeftHandle = this.createHandle('bottom-left', 'nesw-resize');
+    this.dragHandle = null;
+    this.dragStartX = 0;
+    this.preDragWidth = 0;
+    this.targetRatio = 0;
+    this.maxWidth = 0;
+    this.minWidth = MIN_WIDTH;
+  }
+
+  onCreate() {
+    const target: any = this.formatter.currentSpec.getTargetElement();
+    this.formatter.overlay.setAttribute('data-image', target.src);
+    this.formatter.overlay.appendChild(this.topLeftHandle);
+    this.formatter.overlay.appendChild(this.topRightHandle);
+    this.formatter.overlay.appendChild(this.bottomRightHandle);
+    this.formatter.overlay.appendChild(this.bottomLeftHandle);
+    this.repositionHandles(this.formatter.options.resize.handleStyle);
+  }
+
+  onDestroy() {
+    this.setCursor('');
+    this.formatter.overlay.removeChild(this.topLeftHandle);
+    this.formatter.overlay.removeChild(this.topRightHandle);
+    this.formatter.overlay.removeChild(this.bottomRightHandle);
+    this.formatter.overlay.removeChild(this.bottomLeftHandle);
+  }
+
+  createHandle(position: string, cursor: string): HTMLElement {
+    const box = document.createElement('div');
+    box.classList.add(this.formatter.options.resize.handleClassName);
+    box.setAttribute('data-position', position);
+    box.style.cursor = cursor;
+
+    if (this.formatter.options.resize.handleStyle) {
+      Object.assign(box.style, this.formatter.options.resize.handleStyle);
+    }
+
+    box.addEventListener('mousedown', this.onMouseDown);
+    return box;
+  }
+
+  repositionHandles(handleStyle: any) {
+    let handleXOffset = '0px';
+    let handleYOffset = '0px';
+    if (handleStyle) {
+      if (handleStyle.width) {
+        handleXOffset = `${-parseFloat(handleStyle.width) / 2}px`;
+      }
+      if (handleStyle.height) {
+        handleYOffset = `${-parseFloat(handleStyle.height) / 2}px`;
+      }
+    }
+
+    Object.assign(this.topLeftHandle.style, { left: handleXOffset, top: handleYOffset });
+    Object.assign(this.topRightHandle.style, { right: handleXOffset, top: handleYOffset });
+    Object.assign(this.bottomRightHandle.style, { right: handleXOffset, bottom: handleYOffset });
+    Object.assign(this.bottomLeftHandle.style, { left: handleXOffset, bottom: handleYOffset });
+  }
+
+  setCursor(value: string) {
+    if (document.body) {
+      document.body.style.cursor = value;
+    }
+
+    if (this.formatter.currentSpec) {
+      const target = this.formatter.currentSpec.getOverlayElement();
+      if (target) {
+        target.style.cursor = value;
+      }
+    }
+  }
+
+  onMouseDown = (event: MouseEvent) => {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    this.dragHandle = event.target;
+    this.setCursor(this.dragHandle.style.cursor);
+
+    if (!this.formatter.currentSpec) {
+      return;
+    }
+
+    const target = this.formatter.currentSpec.getTargetElement();
+    if (!target) {
+      return;
+    }
+    event.preventDefault();
+    const rect = target.getBoundingClientRect();
+
+    this.dragStartX = event.clientX;
+    this.preDragWidth = rect.width;
+    this.targetRatio = rect.height / rect.width;
+
+    let root: HTMLElement;
+    let rootStyle: any;
+    const tdWrap = this.findTd(target, 0);
+    if (tdWrap) {
+      root = tdWrap;
+      rootStyle = getElementStyle(tdWrap);
+    } else {
+      root = this.formatter.quill.root;
+      rootStyle = getElementStyle(root);
+    }
+    this.maxWidth = root.clientWidth
+      - parseFloat(rootStyle.paddingRight)
+      - parseFloat(rootStyle.paddingLeft);
+
+    document.addEventListener('mousemove', this.onDrag);
+    document.addEventListener('mouseup', this.onMouseUp);
+  };
+
+  findTd = (node: HTMLElement, level: number) => {
+    if (level > 3) {
+      return null;
+    }
+
+    const tagName = node.tagName.toUpperCase();
+    if (tagName === 'TD') {
+      return node;
+    } else {
+      const parentNode = node.parentElement;
+      if (parentNode) {
+        // eslint-disable-next-line no-return-assign
+        return (this.findTd(parentNode, level += 1));
+      } else {
+        return null;
+      }
+    }
+  };
+
+  onDrag = (event: MouseEvent) => {
+    if (!this.formatter.currentSpec) {
+      return;
+    }
+
+    const target = this.formatter.currentSpec.getTargetElement();
+    if (!target) {
+      return;
+    }
+
+    const deltaX = event.clientX - this.dragStartX;
+    let newWidth = 0;
+
+    if (this.dragHandle === this.topLeftHandle || this.dragHandle === this.bottomLeftHandle) {
+      newWidth = Math.round(this.preDragWidth - deltaX);
+    } else {
+      newWidth = Math.round(this.preDragWidth + deltaX);
+    }
+
+    let minWidth = this.minWidth;
+
+    if (this.maxWidth < minWidth) {
+      minWidth = this.maxWidth;
+    }
+
+    if (newWidth > this.maxWidth) {
+      newWidth = this.maxWidth;
+    } else if (newWidth < minWidth) {
+      newWidth = minWidth;
+    }
+
+    const newHeight = this.targetRatio * newWidth;
+
+    target.setAttribute('width', `${newWidth}`);
+    target.setAttribute('height', `${newHeight}`);
+
+    this.formatter.update();
+  };
+
+  onMouseUp = (event: MouseEvent) => {
+    this.setCursor('');
+    document.removeEventListener('mousemove', this.onDrag);
+    document.removeEventListener('mouseup', this.onMouseUp);
+  };
+}
diff --git a/packages/fluent-editor/src/custom-image/actions/DeleteAction.ts b/packages/fluent-editor/src/custom-image/actions/DeleteAction.ts
new file mode 100644
index 0000000000..62a999d72f
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/actions/DeleteAction.ts
@@ -0,0 +1,29 @@
+import * as Quill from 'quill';
+import Action from './Action';
+
+export default class DeleteAction extends Action {
+  onCreate() {
+    document.addEventListener('keyup', this.onKeyUp, true);
+    this.formatter.quill.root.addEventListener('input', this.onKeyUp, true);
+  }
+
+  onDestroy() {
+    document.removeEventListener('keyup', this.onKeyUp);
+    this.formatter.quill.root.removeEventListener('input', this.onKeyUp);
+  }
+
+  onKeyUp = (event: any) => {
+    if (!this.formatter.currentSpec) {
+      return;
+    }
+
+    // delete or backspace
+    if (event.keyCode === 46 || event.keyCode === 8) {
+      const blot = Quill.find(this.formatter.currentSpec.getTargetElement());
+      if (blot) {
+        blot.deleteAt(0);
+      }
+      this.formatter.hide();
+    }
+  };
+}
diff --git a/packages/fluent-editor/src/custom-image/image.ts b/packages/fluent-editor/src/custom-image/image.ts
new file mode 100644
index 0000000000..05e6b7348c
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/image.ts
@@ -0,0 +1,116 @@
+import * as Quill from 'quill';
+import { isNullOrUndefined, sanitize } from '../config/editor.utils';
+const Embed = Quill.imports['blots/embed'];
+const Inline = Quill.imports['blots/inline'];
+
+const ATTRIBUTES = ['alt', 'height', 'width', 'image-id'];
+
+// @dynamic
+class CustomImage extends Embed {
+  static ID_SEED = 0;
+  static blotName: string;
+  static tagName: string;
+  domNode: any;
+  parent: any;
+  scroll: any;
+  next: any;
+  static create(value) {
+    const node = super.create(value);
+    const url = typeof value === 'string' ? value : value.src;
+    if (url) {
+      const imgURL = this.sanitize(url);
+      if (!imgURL?.startsWith('data:image')) {
+        node.dataset.src = imgURL;
+      }
+      node.setAttribute('src', imgURL);
+    }
+    node.setAttribute('data-image-id', 'img' + CustomImage.ID_SEED++);
+    node.setAttribute('devui-editorx-image', true);
+    node.style.verticalAlign = 'baseline';
+    return node;
+  }
+
+  static formats(domNode) {
+    return ATTRIBUTES.reduce((formats, attribute) => {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute);
+      }
+      return formats;
+    }, {});
+  }
+
+  static match(url) {
+    return /\.(jpe?g|gif|png)$/.test(url) || /^data:image\/.+;base64/.test(url);
+  }
+
+  static register() {
+    if (/Firefox/i.test(navigator.userAgent)) {
+      setTimeout(() => {
+        // Disable image resizing in Firefox
+        document.execCommand('enableObjectResizing', false, null);
+      }, 1);
+    }
+  }
+
+  static sanitize(url) {
+    return sanitize(url, ['http', 'https', 'data']) ? url : '//:0';
+  }
+
+  static value(domNode) {
+    const formats: any = {};
+    const imageSrc = domNode.getAttribute('src');
+    formats.src = this.sanitize(imageSrc);
+    formats.hasExisted = domNode.getAttribute('devui-editorx-image');
+    formats.imageId = domNode.dataset.imageId;
+    return formats;
+  }
+
+  format(name, value) {
+    if (ATTRIBUTES.indexOf(name) > -1) {
+      if (value) {
+        this.domNode.setAttribute(name, value);
+      } else {
+        this.domNode.removeAttribute(name);
+      }
+    } else {
+      super.format(name, value);
+    }
+  }
+
+  unWrap() {
+    this.parent.replaceWith(this);
+  }
+
+  wrap(name, value) {
+    const wrapper = typeof name === 'string' ? this.scroll.create(name, value) : name;
+    if (!isNullOrUndefined(this.parent)) {
+      this.parent.insertBefore(wrapper, this.next || undefined);
+    }
+    if (typeof wrapper.appendChild !== 'function') {
+      throw new Error(`Cannot wrap ${name}`);
+    }
+    wrapper.appendChild(this);
+    return wrapper;
+  }
+}
+CustomImage.blotName = 'image';
+CustomImage.tagName = 'IMG';
+
+// @dynamic
+class CustomImageContainer extends Inline {
+  static tagName: string;
+  static className: string;
+  static blotName: string;
+  static allowedChildren: typeof CustomImage[];
+  constructor(scroll, domNode) {
+    super(scroll, domNode);
+    domNode.setAttribute('contenteditable', false);
+  }
+}
+CustomImageContainer.blotName = 'image-container';
+CustomImageContainer.className = 'ql-image-container';
+CustomImageContainer.tagName = 'DIV';
+
+CustomImageContainer.allowedChildren = [CustomImage];
+export { CustomImageContainer as ImageContainerBlot, CustomImage as default };
+
diff --git a/packages/fluent-editor/src/custom-image/specs/BlotSpec.ts b/packages/fluent-editor/src/custom-image/specs/BlotSpec.ts
new file mode 100644
index 0000000000..f3bf6f721d
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/specs/BlotSpec.ts
@@ -0,0 +1,30 @@
+import ResizeAction from '../actions/CustomResizeAction';
+import DeleteAction from '../actions/DeleteAction';
+
+export default class BlotSpec {
+  formatter;
+
+  constructor(formatter) {
+    this.formatter = formatter;
+  }
+
+  init(): void {}
+
+  getActions() {
+    return [ResizeAction, DeleteAction];
+  }
+
+  getTargetElement() {
+    return null;
+  }
+
+  getOverlayElement() {
+    return this.getTargetElement();
+  }
+
+  setSelection(): void {
+    this.formatter.quill.setSelection(null);
+  }
+
+  onHide() {}
+}
diff --git a/packages/fluent-editor/src/custom-image/specs/CustomImageSpec.ts b/packages/fluent-editor/src/custom-image/specs/CustomImageSpec.ts
new file mode 100644
index 0000000000..120bc43886
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/specs/CustomImageSpec.ts
@@ -0,0 +1,139 @@
+import { isInside } from '../../config/editor.utils';
+import CustomResizeAction from '../actions/CustomResizeAction';
+import DeleteAction from '../actions/DeleteAction';
+import ImageSpec from './ImageSpec';
+
+export class CustomImageSpec extends ImageSpec {
+  formatter;
+  editorElem: HTMLElement | undefined;
+  observer: any;
+  oldRootScrollTop: any;
+
+  constructor(formatter) {
+    super(formatter);
+    this.formatter = formatter;
+    this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
+    this.editorElem = this.formatter.quill.container;
+    if (this.formatter.quill.root === this.formatter.quill.scrollingContainer) {
+      this.formatter.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this));
+    }
+  }
+
+  handleQuillRootScroll() {
+    if (this.formatter.overlay) {
+      this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`;
+    }
+  }
+
+  init(): void {
+    this.editorElem.addEventListener('mouseover', this.imageMouseOver.bind(this));
+    this.editorElem.addEventListener('mouseout', this.imageMouseout);
+
+    super.init();
+  }
+
+  getActions() {
+    return [DeleteAction, CustomResizeAction];
+  }
+
+  imageMouseOver(event) {
+    const target = event.target;
+    const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay');
+    if (target.nodeName === 'IMG' || isBlotFormatter) {
+      this.addImagePreviewOverlay(event);
+    }
+  }
+
+  imageMouseout = (event) => {
+    if (event.target.nodeName === 'IMG'
+      || event.target.classList.contains('blot-formatter__overlay')) {
+      const imgDom = event.target;
+      if (!isInside(event, imgDom)) {
+        this.removeImagePreviewOverlay();
+      }
+    }
+  };
+
+  addImagePreviewOverlay(event) {
+    const target = event.target;
+    const {
+      left: imgLeft,
+      width: imgWidth
+    } = target.getBoundingClientRect();
+      // fix: 解决 ql-container 容器设置 calc(100vh - 180px) 这样的视窗相对单位时，滚动视窗导致图片相对视窗的 top 相应改变，从而导致图片预览按钮的位置显示错误
+    const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop;
+
+    const {
+      left: editorLeft,
+      top: editorTop
+    } = event.currentTarget.getBoundingClientRect();
+
+    const imgRelativeLeft = imgLeft - editorLeft;
+    const imgRelativeTop = imgTop - editorTop;
+
+    const maxmizeWidth = 24;
+    const maxmizePadding = 15;
+    const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding;
+    const previewTop = imgRelativeTop + maxmizePadding;
+
+    const previewStyle = `
+        left: ${previewLeft}px;
+        top: ${previewTop}px;
+        width: ${maxmizeWidth}px;
+      `;
+    const imageSrc = target.src || target.getAttribute('data-image');
+    const imageId = target.getAttribute('data-image-id');
+
+    const previewDom = event.currentTarget.querySelector('.image-preview__overlay');
+    if (!previewDom) {
+      event.currentTarget.insertAdjacentHTML('beforeend', `
+          <div class="image-preview__overlay" style="${previewStyle}">
+            <i class="icon-maxmize" id="btn-image-preview" data-image-id="${imageId}"
+              data-image="${imageSrc}"></i>
+          </div>
+        `);
+    }
+  }
+
+  removeImagePreviewOverlay() {
+    const previewDom = this.editorElem.querySelector('.image-preview__overlay');
+    if (previewDom) {
+      previewDom.parentNode.removeChild(previewDom);
+    }
+  }
+
+  onHide() {
+    this.removeImagePreviewOverlay();
+    super.onHide();
+  }
+
+  resetOverlayMarginTop() {
+    if (this.formatter.overlay) {
+      this.formatter.overlay.style.marginTop = '0px';
+    }
+  }
+
+  onClick = (event: MouseEvent) => {
+    const el = event.target;
+    const isReadonly = this.formatter.quill.options.readOnly;
+    if (!(el instanceof HTMLElement) || el.tagName !== 'IMG' || isReadonly) {
+      return;
+    }
+
+    this.img = el;
+    this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
+    this.resetOverlayMarginTop();
+    this.formatter.show(this);
+
+    // 通过图片dom获取图片选区用以复制，设置 current-select-img::selection 取消选区背景
+    const imageDom = this.formatter.currentSpec?.getTargetElement();
+    if (imageDom) {
+      imageDom.classList.add('current-select-img');
+      const quill = this.formatter.quill;
+      const imgBlot = quill.scroll.find(this.img);
+      const index = quill.getIndex(imgBlot);
+      const len = imgBlot.length();
+      quill.setSelection(index, len);
+    }
+  };
+}
diff --git a/packages/fluent-editor/src/custom-image/specs/ImageSpec.ts b/packages/fluent-editor/src/custom-image/specs/ImageSpec.ts
new file mode 100644
index 0000000000..8607d5834b
--- /dev/null
+++ b/packages/fluent-editor/src/custom-image/specs/ImageSpec.ts
@@ -0,0 +1,33 @@
+import BlotSpec from './BlotSpec';
+
+export default class ImageSpec extends BlotSpec {
+  img;
+
+  constructor(formatter) {
+    super(formatter);
+    this.img = null;
+  }
+
+  init() {
+    this.formatter.quill.root.addEventListener('click', this.onClick);
+  }
+
+  getTargetElement() {
+    return this.img;
+  }
+
+  onHide() {
+    this.img = null;
+  }
+
+  onClick = (event: MouseEvent) => {
+    const el = event.target;
+    if (!(el instanceof HTMLElement) || el.tagName !== 'IMG') {
+      return;
+    }
+    event.stopPropagation()
+
+    this.img = el;
+    this.formatter.show(this);
+  };
+}
diff --git a/packages/fluent-editor/src/custom-uploader.ts b/packages/fluent-editor/src/custom-uploader.ts
new file mode 100644
index 0000000000..8e5e58670d
--- /dev/null
+++ b/packages/fluent-editor/src/custom-uploader.ts
@@ -0,0 +1,82 @@
+import * as Quill from 'quill'
+
+import {
+  FILE_UPLOADER_MIME_TYPES,
+  IMAGE_UPLOADER_MIME_TYPES,
+} from './config/editor.config'
+
+const Uploader = Quill.imports['modules/uploader']
+
+class CustomUploader extends Uploader {
+  quill
+  options
+
+  upload(range, files, isFile?) {
+    const uploads = []
+    const fileFlags = []
+    const rejectFlags = {
+      file: false,
+      image: false,
+    }
+    const uploadOption = this.quill.options.uploadOption
+    const acceptObj =
+      (uploadOption && {
+        image: uploadOption.imageAccept,
+        file: uploadOption.fileAccept,
+      }) ||
+      {}
+    Array.from(files).forEach((file: any) => {
+      if (file) {
+        const fileFlag =
+          typeof isFile === 'boolean'
+            ? isFile
+            : !/^image\/[-\w.]+$/.test(file.type)
+        const fileType = fileFlag ? 'file' : 'image'
+        const accept = acceptObj[fileType] || this.options[fileType]
+        if (this.isAllowedFileType(accept, file)) {
+          uploads.push(file)
+          fileFlags.push(fileFlag)
+        } else {
+          rejectFlags[fileType] = true
+        }
+      }
+    })
+    this.options.handler.call(this, range, uploads, fileFlags, rejectFlags)
+  }
+
+  isAllowedFileType = (accept: Array<string> | string, file: File) => {
+    if (accept) {
+      const baseMimeType = file.type.replace(/\/.*$/, '')
+      const acceptArr = typeof accept === 'string' ? accept.split(',') : accept
+      return acceptArr.some((type: string) => {
+        const validType = type.trim()
+        //  suffix name (e.g. '.png,.xlsx')
+        if (validType.startsWith('.')) {
+          return (
+            file.name
+              .toLowerCase()
+              .indexOf(
+                validType.toLowerCase(),
+                file.name.toLowerCase().length - validType.toLowerCase().length
+              ) > -1
+          )
+          // mime type like 'image/*'
+        } else if (/\/\*$/.test(validType)) {
+          return baseMimeType === validType.replace(/\/.*$/, '')
+        }
+        //  mime type like 'text/plain,application/json'
+        return file.type === validType
+      })
+    }
+    return true
+  }
+}
+
+Uploader.DEFAULTS = {
+  file: FILE_UPLOADER_MIME_TYPES,
+  image: IMAGE_UPLOADER_MIME_TYPES,
+  enableMultiUpload: false,
+  handler() {},
+}
+
+export default CustomUploader
diff --git a/packages/fluent-editor/src/declare.d.ts b/packages/fluent-editor/src/declare.d.ts
new file mode 100644
index 0000000000..11d7ef7639
--- /dev/null
+++ b/packages/fluent-editor/src/declare.d.ts
@@ -0,0 +1 @@
+declare module 'quill'
\ No newline at end of file
diff --git a/packages/fluent-editor/src/emoji/emoji-list.ts b/packages/fluent-editor/src/emoji/emoji-list.ts
new file mode 100644
index 0000000000..5e51b1e623
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/emoji-list.ts
@@ -0,0 +1,9 @@
+import {
+  peopleEmoji
+} from './emoji-list/index';
+
+const emojiList = [
+  ...peopleEmoji
+];
+
+export default emojiList;
diff --git a/packages/fluent-editor/src/emoji/emoji-list/index.ts b/packages/fluent-editor/src/emoji/emoji-list/index.ts
new file mode 100644
index 0000000000..f88c99bfa3
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/emoji-list/index.ts
@@ -0,0 +1 @@
+export { peopleEmoji } from './people';
diff --git a/packages/fluent-editor/src/emoji/emoji-list/people.ts b/packages/fluent-editor/src/emoji/emoji-list/people.ts
new file mode 100644
index 0000000000..f5b68e52d6
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/emoji-list/people.ts
@@ -0,0 +1,110 @@
+import { createEmoji } from '../utils';
+const peopleEmojiArr = [
+  ['grinning', '1f600', ':grinning:', '&#128512;', 'p', '1'],
+  ['grin', '1f601', ':grin:', '&#128513;', 'p', '2'],
+  ['joy', '1f602', ':joy:', '&#128514;', 'p', '3'],
+  ['smiley', '1f603', ':smiley:', '&#128515;', 'p', '5'],
+  ['smile', '1f604', ':smile:', '&#128516;', 'p', '6'],
+  ['sweat_smile', '1f605', ':sweat_smile:', '&#128517;', 'p', '7'],
+  ['laughing', '1f606', ':laughing:', '&#128518;', 'p', '8'],
+  ['wink', '1f609', ':wink:', '&#128521;', 'p', '9'],
+  ['blush', '1f60a', ':blush:', '&#128522;', 'p', '10'],
+  ['yum', '1f60b', ':yum:', '&#128523;', 'p', '11'],
+  ['sunglasses', '1f60e', ':sunglasses:', '&#128526;', 'p', '12'],
+  ['heart_eyes', '1f60d', ':heart_eyes:', '&#128525;', 'p', '13'],
+  ['kissing_heart', '1f618', ':kissing_heart:', '&#128536;', 'p', '14'],
+  ['kissing', '1f617', ':kissing:', '&#128535;', 'p', '15'],
+  ['kissing_smiling_eyes', '1f619', ':kissing_smiling_eyes:', '&#128537;', 'p', '16'],
+  ['kissing_closed_eyes', '1f61a', ':kissing_closed_eyes:', '&#128538;', 'p', '17'],
+  ['slightly_smiling_face', '1f642', ':slight_smile:', '&#128578;', 'p', '19'],
+  ['hugging_face', '1f917', ':hugging:', '&#129303;', 'p', '20'],
+  ['thinking_face', '1f914', ':thinking:', '&#129300;', 'p', '21'],
+  ['neutral_face', '1f610', ':neutral_face:', '&#128528;', 'p', '22'],
+  ['expressionless', '1f611', ':expressionless:', '&#128529;', 'p', '23'],
+  ['no_mouth', '1f636', ':no_mouth:', '&#128566;', 'p', '24'],
+  ['smirk', '1f60f', ':smirk:', '&#128527;', 'p', '26'],
+  ['persevere', '1f623', ':persevere:', '&#128547;', 'p', '27'],
+  ['disappointed_relieved', '1f625', ':disappointed_relieved:', '&#128549;', 'p', '28'],
+  ['open_mouth', '1f62e', ':open_mouth:', '&#128558;', 'p', '29'],
+  ['zipper_mouth_face', '1f910', ':zipper_mouth:', '&#129296;', 'p', '30'],
+  ['hushed', '1f62f', ':hushed:', '&#128559;', 'p', '31'],
+  ['sleepy', '1f62a', ':sleepy:', '&#128554;', 'p', '32'],
+  ['tired_face', '1f62b', ':tired_face:', '&#128555;', 'p', '33'],
+  ['sleeping', '1f634', ':sleeping:', '&#128564;', 'p', '34'],
+  ['relieved', '1f60c', ':relieved:', '&#128524;', 'p', '35'],
+  ['nerd_face', '1f913', ':nerd:', '&#129299;', 'p', '36'],
+  ['stuck_out_tongue', '1f61b', ':stuck_out_tongue:', '&#128539;', 'p', '37'],
+  ['stuck_out_tongue_winking_eye', '1f61c', ':stuck_out_tongue_winking_eye:', '&#128540;', 'p', '38'],
+  ['stuck_out_tongue_closed_eyes', '1f61d', ':stuck_out_tongue_closed_eyes:', '&#128541;', 'p', '39'],
+  ['unamused', '1f612', ':unamused:', '&#128530;', 'p', '41'],
+  ['sweat', '1f613', ':sweat:', '&#128531;', 'p', '42'],
+  ['pensive', '1f614', ':pensive:', '&#128532;', 'p', '43'],
+  ['confused', '1f615', ':confused:', '&#128533;', 'p', '44'],
+  ['money_mouth_face', '1f911', ':money_mouth:', '&#129297;', 'p', '46'],
+  ['astonished', '1f632', ':astonished:', '&#128562;', 'p', '47'],
+  ['slightly_frowning_face', '1f641', ':slight_frown:', '&#128577;', 'p', '49'],
+  ['confounded', '1f616', ':confounded:', '&#128534;', 'p', '50'],
+  ['disappointed', '1f61e', ':disappointed:', '&#128542;', 'p', '51'],
+  ['worried', '1f61f', ':worried:', '&#128543;', 'p', '52'],
+  ['triumph', '1f624', ':triumph:', '&#128548;', 'p', '53'],
+  ['cry', '1f622', ':cry:', '&#128546;', 'p', '54'],
+  ['sob', '1f62d', ':sob:', '&#128557;', 'p', '55'],
+  ['frowning', '1f626', ':frowning:', '&#128550;', 'p', '56'],
+  ['anguished', '1f627', ':anguished:', '&#128551;', 'p', '57'],
+  ['fearful', '1f628', ':fearful:', '&#128552;', 'p', '58'],
+  ['weary', '1f629', ':weary:', '&#128553;', 'p', '59'],
+  ['grimacing', '1f62c', ':grimacing:', '&#128556;', 'p', '60'],
+  ['cold_sweat', '1f630', ':cold_sweat:', '&#128560;', 'p', '61'],
+  ['scream', '1f631', ':scream:', '&#128561;', 'p', '62'],
+  ['flushed', '1f633', ':flushed:', '&#128563;', 'p', '63'],
+  ['dizzy_face', '1f635', ':dizzy_face:', '&#128565;', 'p', '64'],
+  ['rage', '1f621', ':rage:', '&#128545;', 'p', '65'],
+  ['angry', '1f620', ':angry:', '&#128544;', 'p', '66'],
+  ['innocent', '1f607', ':innocent:', '&#128519;', 'p', '67'],
+  ['mask', '1f637', ':mask:', '&#128567;', 'p', '71'],
+  ['face_with_thermometer', '1f912', ':thermometer_face:', '&#129298;', 'p', '72'],
+  ['face_with_head_bandage', '1f915', ':head_bandage:', '&#129301;', 'p', '73'],
+  ['smiling_imp', '1f608', ':smiling_imp:', '&#128520;', 'p', '76'],
+  ['imp', '1f47f', ':imp:', '&#128127;', 'p', '77'],
+  ['skull', '1f480', ':skull:', '&#128128;', 'p', '80'],
+  ['ghost', '1f47b', ':ghost:', '&#128123;', 'p', '82'],
+  ['alien', '1f47d', ':alien:', '&#128125;', 'p', '83'],
+  ['space_invader', '1f47e', ':space_invader:', '&#128126;', 'a', '84'],
+  ['robot_face', '1f916', ':robot:', '&#129302;', 'p', '85'],
+  ['hankey', '1f4a9', ':poop:', '&#128169;', 'p', '86'],
+  ['smiley_cat', '1f63a', ':smiley_cat:', '&#128570;', 'p', '87'],
+  ['smile_cat', '1f638', ':smile_cat:', '&#128568;', 'p', '88'],
+  ['joy_cat', '1f639', ':joy_cat:', '&#128569;', 'p', '89'],
+  ['heart_eyes_cat', '1f63b', ':heart_eyes_cat:', '&#128571;', 'p', '90'],
+  ['smirk_cat', '1f63c', ':smirk_cat:', '&#128572;', 'p', '91'],
+  ['kissing_cat', '1f63d', ':kissing_cat:', '&#128573;', 'p', '92'],
+  ['scream_cat', '1f640', ':scream_cat:', '&#128576;', 'p', '93'],
+  ['crying_cat_face', '1f63f', ':crying_cat_face:', '&#128575;', 'p', '94'],
+  ['pouting_cat', '1f63e', ':pouting_cat:', '&#128574;', 'p', '95'],
+  ['muscle', '1f4aa', ':muscle:', '&#128170;', 'p', '1080'],
+  ['point_left', '1f448', ':point_left:', '&#128072;', 'p', '1092'],
+  ['point_right', '1f449', ':point_right:', '&#128073;', 'p', '1098'],
+  ['point_up', '261d', ':point_up:', '&#9757;', 'p', '1104'],
+  ['point_up_2', '1f446', ':point_up_2:', '&#128070;', 'p', '1110'],
+  ['middle_finger', '1f595', ':middle_finger:', '&#128405;', 'p', '1116'],
+  ['point_down', '1f447', ':point_down:', '&#128071;', 'p', '1122'],
+  ['v', '270c', ':v:', '&#9996;', 'p', '1128'],
+  ['raised_hand_with_fingers_splayed', '1f590', ':hand_splayed:', '&#128400;', 'p', '1158'],
+  ['ok_hand', '1f44c', ':ok_hand:', '&#128076;', 'p', '1170'],
+  ['thumbsup', '1f44d', ':thumbsup:', '&#128077;', 'p', '1176'],
+  ['thumbsdown', '1f44e', ':thumbsdown:', '&#128078;', 'p', '1182'],
+  ['fist', '270a', ':fist:', '&#9994;', 'p', '1188'],
+  ['facepunch', '1f44a', ':punch:', '&#128074;', 'p', '1194'],
+  ['wave', '1f44b', ':wave:', '&#128075;', 'p', '1218'],
+  ['clap', '1f44f', ':clap:', '&#128079;', 'p', '1224'],
+  ['writing_hand', '270d', ':writing_hand:', '&#9997;', 'p', '1230'],
+  ['open_hands', '1f450', ':open_hands:', '&#128080;', 'p', '1236'],
+  ['pray', '1f64f', ':pray:', '&#128591;', 'p', '1248'],
+  ['ear', '1f442', ':ear:', '&#128066;', 'p', '1266'],
+  ['nose', '1f443', ':nose:', '&#128067;', 'p', '1272'],
+  ['eyes', '1f440', ':eyes:', '&#128064;', 'p', '1279'],
+  ['eye', '1f441', ':eye:', '&#128065;', 'p', '1280'],
+  ['lips', '1f444', ':lips:', '&#128068;', 'p', '1283'],
+  ['fire', '1f525', ':fire:', '&#128293;', 'n', '1753']
+];
+export const peopleEmoji = createEmoji(peopleEmojiArr);
diff --git a/packages/fluent-editor/src/emoji/emoji-map.ts b/packages/fluent-editor/src/emoji/emoji-map.ts
new file mode 100644
index 0000000000..4323ceecbe
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/emoji-map.ts
@@ -0,0 +1,9 @@
+import emojiList from './emoji-list';
+
+const emojiMap = {};
+
+emojiList.forEach((emojiListObject) => {
+  emojiMap[emojiListObject.name] = emojiListObject;
+});
+
+export default emojiMap;
diff --git a/packages/fluent-editor/src/emoji/formats/emoji-blot.ts b/packages/fluent-editor/src/emoji/formats/emoji-blot.ts
new file mode 100644
index 0000000000..37f622ab34
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/formats/emoji-blot.ts
@@ -0,0 +1,52 @@
+import * as Quill from 'quill';
+import emojiMap from '../emoji-map';
+
+const Embed = Quill.imports['blots/embed'];
+
+// @dynamic
+class EmojiBlot extends Embed {
+  static emojiClass: string;
+  static emojiPrefix: any;
+  static tagName: string;
+  static blotName: string;
+  static className: string;
+  static create(value) {
+    const node = super.create();
+    if (typeof value === 'object') {
+      EmojiBlot.buildSpan(value, node);
+    } else if (typeof value === 'string') {
+      const valueObj = emojiMap[value];
+      if (valueObj) {
+        EmojiBlot.buildSpan(valueObj, node);
+      }
+    }
+    // 修复在emoji后输入中文插入其中导致quill不能识别
+    node.setAttribute('contenteditable', false);
+    return node;
+  }
+
+  static value(node) {
+    return node.dataset.name;
+  }
+
+  static buildSpan(value, node) {
+    node.setAttribute('data-name', value.name);
+    const emojiSpan = document.createElement('span');
+    emojiSpan.classList.add(this.emojiClass);
+    emojiSpan.classList.add(this.emojiPrefix + value.name);
+    // unicode can be '1f1f5-1f1ea',see emoji-list.js.
+    emojiSpan.innerText = String.fromCodePoint(...EmojiBlot.parseUnicode(value.unicode));
+    node.appendChild(emojiSpan);
+  }
+  static parseUnicode(string) {
+    return string.split('-').map(str => parseInt(str, 16));
+  }
+}
+
+EmojiBlot.blotName = 'emoji';
+EmojiBlot.className = 'ql-emojiblot';
+EmojiBlot.tagName = 'span';
+EmojiBlot.emojiClass = 'ap';
+EmojiBlot.emojiPrefix = 'ap-';
+
+export default EmojiBlot;
diff --git a/packages/fluent-editor/src/emoji/index.ts b/packages/fluent-editor/src/emoji/index.ts
new file mode 100644
index 0000000000..5d79d16509
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/index.ts
@@ -0,0 +1,5 @@
+import EmojiBlot from './formats/emoji-blot';
+import ShortNameEmoji from './modules/emoji';
+import ToolbarEmoji from './modules/toolbar-emoji';
+
+export default { EmojiBlot, ShortNameEmoji, ToolbarEmoji };
diff --git a/packages/fluent-editor/src/emoji/modules/emoji.ts b/packages/fluent-editor/src/emoji/modules/emoji.ts
new file mode 100644
index 0000000000..db4582f43b
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/modules/emoji.ts
@@ -0,0 +1,296 @@
+import * as Quill from 'quill';
+import emojiList from '../emoji-list';
+
+const Module = Quill.imports['core/module'];
+
+// @dynamic
+class ShortNameEmoji extends Module {
+  static DEFAULTS: {
+    emojiList: any[];
+    fuse: {
+      shouldSort: boolean;
+      threshold: number;
+      location: number;
+      distance: number;
+      maxPatternLength: number;
+      minMatchCharLength: number;
+      keys: string[];
+    };
+  };
+  emojiList: any;
+  quill: any;
+  fuse: any;
+  onOpen: any;
+  onClose: any;
+  container: HTMLUListElement;
+  onSelectionChange: any;
+  onTextChange: any;
+  open: boolean;
+  atIndex: any;
+  focusedButton: any;
+  isWhiteSpace: (ch: any) => boolean;
+  query: any;
+  buttons: any;
+  options: any;
+  constructor(quill, options) {
+    super(quill, options);
+
+    this.emojiList = options.emojiList;
+
+    this.quill = quill;
+    this.onClose = options.onClose;
+    this.onOpen = options.onOpen;
+    this.container = document.createElement('ul');
+    this.container.classList.add('emoji_completions');
+    this.quill.container.appendChild(this.container);
+    this.container.style.position = 'absolute';
+    this.container.style.display = 'none';
+
+    this.onSelectionChange = this.maybeUnfocus.bind(this);
+    this.onTextChange = this.update.bind(this);
+
+    this.open = false;
+    this.atIndex = null;
+    this.focusedButton = null;
+
+    this.isWhiteSpace = function (ch) {
+      let whiteSpace = false;
+      if (/\s/.test(ch)) {
+        whiteSpace = true;
+      }
+      return whiteSpace;
+    };
+
+    quill.keyboard.addBinding({
+      // TODO: Once Quill supports using event.key change this to ":"
+      key: 186,  // ":" instead of 190 in Safari. Since it's the same key it doesn't matter if we register both.
+      shiftKey: true,
+    }, this.triggerPicker.bind(this));
+
+    quill.keyboard.addBinding({
+      // gecko based browsers (firefox) use 59 as the keycode for semicolon,
+      // which makes a colon character when combined with shift
+      key: 59,
+      shiftKey: true,
+    }, this.triggerPicker.bind(this));
+
+    quill.keyboard.addBinding({
+      key: 39,  // ArrowRight
+      collapsed: true
+    }, this.handleArrow.bind(this));
+
+    quill.keyboard.addBinding({
+      key: 40,  // ArrowRight
+      collapsed: true
+    }, this.handleArrow.bind(this));
+    // TODO: Add keybindings for Enter (13) and Tab (9) directly on the quill editor
+  }
+
+  triggerPicker(range, context) {
+    if (this.open) { return true; }
+    if (range.length > 0) {
+      this.quill.deleteText(range.index, range.length, Quill.sources.USER);
+    }
+
+    this.quill.insertText(range.index, ':', 'emoji-shortname', Quill.sources.USER);
+    const atSignBounds = this.quill.getBounds(range.index);
+    this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
+
+    this.atIndex = range.index;
+
+    const paletteMaxPos = atSignBounds.left + 250;
+    if (paletteMaxPos > this.quill.container.offsetWidth) {
+      this.container.style.left = (atSignBounds.left - 250) + 'px';
+    } else {
+      this.container.style.left = atSignBounds.left + 'px';
+    }
+
+    this.container.style.top = atSignBounds.top + atSignBounds.height + 'px';
+    this.open = true;
+
+    this.quill.on('text-change', this.onTextChange);
+    this.quill.once('selection-change', this.onSelectionChange);
+    if (this.onOpen) { this.onOpen(); }
+  }
+
+  handleArrow() {
+    if (!this.open) { return true; }
+    this.buttons[0].classList.remove('emoji-active');
+    this.buttons[0].focus();
+    if (this.buttons.length > 1) {
+      this.buttons[1].focus();
+    }
+  }
+
+  update(event) {
+    const sel = this.quill.getSelection().index;
+    if (this.atIndex >= sel) { // Deleted the at character
+      return this.close(null);
+    }
+    this.query = this.quill.getText(this.atIndex + 1, sel - this.atIndex - 1);
+
+    try {
+      if (this.isWhiteSpace(this.query)) {
+        this.close(null);
+        return;
+      }
+    } catch (e) {
+      throw new Error('Close failed');
+    }
+
+    this.query = this.query.trim();
+
+    let emojis: any = this.emojiList;
+    emojis.sort(function (a: any, b: any) {
+      return a.emoji_order - b.emoji_order;
+    });
+
+    if (this.query.length < this.options.fuse.minMatchCharLength || emojis.length === 0) {
+      this.container.style.display = 'none';
+      return;
+    }
+    if (emojis.length > 15) { // return only 15
+      emojis = emojis.slice(0, 15);
+    }
+    this.renderCompletions(emojis, event);
+  }
+
+  maybeUnfocus() {
+    if (this.container.querySelector('*:focus')) { return; }
+    this.close(null);
+  }
+
+  renderCompletions(emojis, evt) {
+    try {
+      if (evt) {
+        if (evt.key === 'Enter' || evt.keyCode === 13) {
+          this.close(emojis[0], 1);
+          this.container.style.display = 'none';
+          return;
+        } else if (evt.key === 'Tab' || evt.keyCode === 9) {
+          this.quill.disable();
+          this.buttons[0].classList.remove('emoji-active');
+          this.buttons[1].focus();
+          return;
+        }
+      }
+      if (evt) { return; }
+    } catch (e) {
+      throw new Error('Render failed');
+    }
+
+    while (this.container.firstChild) {
+      this.container.removeChild(this.container.firstChild);
+    }
+    const buttons = Array(emojis.length);
+    this.buttons = buttons;
+
+    const handler = (i, emoji) => event => {
+      const arrowLeftKey = event.key === 'ArrowLeft' || event.keyCode === 37;
+      const arrowUpKey = event.key === 'ArrowUp' || event.keyCode === 38;
+      const arrowRightKey = event.key === 'ArrowRight' || event.keyCode === 39;
+      const arrowDownKey = event.key === 'ArrowDown' || event.keyCode === 40;
+      if (arrowRightKey || arrowDownKey) {
+        event.preventDefault();
+        buttons[Math.min(buttons.length - 1, i + 1)].focus();
+      } else if (event.key === 'Tab' || event.keyCode === 9) {
+        event.preventDefault();
+        if ((i + 1) === buttons.length) {
+          buttons[0].focus();
+          return;
+        }
+        buttons[Math.min(buttons.length - 1, i + 1)].focus();
+      } else if (arrowLeftKey || arrowUpKey) {
+        event.preventDefault();
+        buttons[Math.max(0, i - 1)].focus();
+      } else if (event.key === 'Enter' || event.keyCode === 13
+        || event.key === ' ' || event.keyCode === 32
+        || event.key === 'Tab' || event.keyCode === 9) {
+        event.preventDefault();
+        this.quill.enable();
+        this.close(emoji);
+      }
+    };
+
+    emojis.forEach((emoji, i) => {
+      const li = makeElement(
+        'li', {},
+        makeElement(
+          'button', { type: 'button' },
+          makeElement('span', { className: 'button-emoji ap ap-' + emoji.name, innerHTML: emoji.code_decimal }),
+          makeElement('span', { className: 'unmatched' }, emoji.shortname)
+        )
+      );
+      this.container.appendChild(li);
+      buttons[i] = li.firstChild;
+      // Events will be GC-ed with button on each re-render:
+      buttons[i].addEventListener('keydown', handler(i, emoji));
+      buttons[i].addEventListener('mousedown', () => this.close(emoji));
+      buttons[i].addEventListener('focus', () => {this.focusedButton = i;});
+      buttons[i].addEventListener('unfocus', () => {this.focusedButton = null;});
+    });
+
+    this.container.style.display = 'block';
+    // emoji palette on top
+    if (this.quill.container.classList.contains('top-emoji')) {
+      const x = this.container.querySelectorAll('li');
+      let i;
+      for (i = 0; i < x.length; i++) {
+        x[i].style.display = 'block';
+      }
+
+      const windowHeight = window.innerHeight;
+      const editorPos = this.quill.container.getBoundingClientRect().top;
+      if (editorPos > windowHeight / 2 && this.container.offsetHeight > 0) {
+        this.container.style.top = '-' + this.container.offsetHeight + 'px';
+      }
+    }
+
+    buttons[0].classList.add('emoji-active');
+  }
+
+  close(value, trailingDelete = 0) {
+    this.quill.enable();
+    this.container.style.display = 'none';
+    while (this.container.firstChild) { this.container.removeChild(this.container.firstChild); }
+    this.quill.off('selection-change', this.onSelectionChange);
+    this.quill.off('text-change', this.onTextChange);
+    if (value) {
+      this.quill.deleteText(this.atIndex, this.query.length + 1 + trailingDelete, Quill.sources.USER);
+      this.quill.insertEmbed(this.atIndex, 'emoji', value, Quill.sources.USER);
+      setTimeout(() => this.quill.setSelection(this.atIndex + 1), 0);
+    }
+    this.quill.focus();
+    this.open = false;
+    if (this.onClose) { this.onClose(value); }
+  }
+}
+
+ShortNameEmoji.DEFAULTS = {
+  emojiList: emojiList,
+  fuse: {
+    shouldSort: true,
+    threshold: 0.1,
+    location: 0,
+    distance: 100,
+    maxPatternLength: 32,
+    minMatchCharLength: 1,
+    keys: [
+      'shortname'
+    ]
+  }
+};
+
+function makeElement(tag, attrs, ...children) {
+  const elem = document.createElement(tag);
+  Object.keys(attrs).forEach(key => {elem[key] = attrs[key];});
+  children.forEach(child => {
+    if (typeof child === 'string') {
+      child = document.createTextNode(child);
+    }
+    elem.appendChild(child);
+  });
+  return elem;
+}
+
+export default ShortNameEmoji;
diff --git a/packages/fluent-editor/src/emoji/modules/toolbar-emoji.ts b/packages/fluent-editor/src/emoji/modules/toolbar-emoji.ts
new file mode 100644
index 0000000000..64501eb8d5
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/modules/toolbar-emoji.ts
@@ -0,0 +1,178 @@
+import * as Quill from 'quill';
+import { EMOJI_SPRITE as emojiSprite } from '../../config/base64-image';
+import emojiList from '../emoji-list';
+
+const Delta = Quill.imports['delta'];
+const Module = Quill.imports['core/module'];
+
+class ToolbarEmoji extends Module {
+  quill: any;
+  toolbar: any;
+  constructor(quill, options) {
+    super(quill, options);
+
+    this.quill = quill;
+    this.toolbar = quill.getModule('toolbar');
+    if (typeof this.toolbar !== 'undefined') {
+      this.toolbar.addHandler('emoji', this.checkPalatteExist);
+    }
+
+    // 在emoji模块加载时判断并插入emoji精灵图样式，防止重复插入
+    let emojiStyle = document.querySelector('style#devui-emoji-sprite');
+    if (!emojiStyle) {
+      emojiStyle = document.createElement('style');
+      emojiStyle.setAttribute('id', 'devui-emoji-sprite');
+      emojiStyle.innerHTML = `.ap{background-image:url(${emojiSprite})}`;
+      document.head.appendChild(emojiStyle);
+    }
+  }
+
+  checkPalatteExist() {
+    const quill = this.quill;
+    fn_checkDialogOpen(quill);
+    this.quill.on('text-change', function (delta, oldDelta, source) {
+      if (source === 'user') {
+        fn_close();
+        fn_updateRange(quill);
+      }
+    });
+  }
+}
+
+function fn_close() {
+  const ele_emoji_plate = document.getElementById('emoji-palette');
+  document.getElementById('emoji-close-div').style.display = 'none';
+  if (ele_emoji_plate) { ele_emoji_plate.remove(); }
+}
+
+function fn_checkDialogOpen(quill) {
+  const elementExists = document.getElementById('emoji-palette');
+  if (elementExists) {
+    elementExists.remove();
+  } else {
+    fn_showEmojiPalatte(quill);
+  }
+}
+
+function fn_updateRange(quill) {
+  const range = quill.getSelection();
+  return range;
+}
+
+function fn_showEmojiPalatte(quill) {
+  const ele_emoji_area = document.createElement('div');
+  const range = quill.getSelection();
+  const atSignBounds = quill.getBounds(range.index);
+
+  quill.container.appendChild(ele_emoji_area);
+  const containerRect = quill.container.getBoundingClientRect();
+  const paletteMaxPos = atSignBounds.left + 250; // palette max width is 250
+  ele_emoji_area.id = 'emoji-palette';
+  ele_emoji_area.style.top = 10 + atSignBounds.top + atSignBounds.height + containerRect.top + 'px';
+  if (paletteMaxPos > quill.container.offsetWidth) {
+    ele_emoji_area.style.left = (atSignBounds.left + containerRect.left - 250) + 'px';
+  } else {
+    ele_emoji_area.style.left = atSignBounds.left + containerRect.left + 'px';
+  }
+
+  const tabToolbar = document.createElement('div');
+  tabToolbar.id = 'tab-toolbar';
+  ele_emoji_area.appendChild(tabToolbar);
+
+  // panel
+  const panel = document.createElement('div');
+  panel.id = 'tab-panel';
+  ele_emoji_area.appendChild(panel);
+
+  const emojiType = [
+    { 'type': 'p', 'name': 'people', 'content': '<div class="i-people"></div>' },
+    { 'type': 'n', 'name': 'nature', 'content': '<div class="i-nature"></div>' },
+    { 'type': 'd', 'name': 'food', 'content': '<div class="i-food"></div>' },
+    { 'type': 's', 'name': 'symbols', 'content': '<div class="i-symbols"></div>' },
+    { 'type': 'a', 'name': 'activity', 'content': '<div class="i-activity"></div>' },
+    { 'type': 't', 'name': 'travel', 'content': '<div class="i-travel"></div>' },
+    { 'type': 'o', 'name': 'objects', 'content': '<div class="i-objects"></div>' },
+    { 'type': 'f', 'name': 'flags', 'content': '<div class="i-flags"></div>' }
+  ];
+
+  const tabElementHolder = document.createElement('ul');
+  tabToolbar.appendChild(tabElementHolder);
+
+  if (document.getElementById('emoji-close-div') === null) {
+    const closeDiv = document.createElement('div');
+    closeDiv.id = 'emoji-close-div';
+    closeDiv.addEventListener('click', fn_close, false);
+    document.getElementsByTagName('body')[0].appendChild(closeDiv);
+  } else {
+    document.getElementById('emoji-close-div').style.display = 'block';
+  }
+
+  emojiType.forEach(function (emojiTypeItem) {
+    // add tab bar
+    const tabElement = document.createElement('li');
+    tabElement.classList.add('emoji-tab');
+    tabElement.classList.add('filter-' + emojiTypeItem.name);
+    const tabValue = emojiTypeItem.content;
+    tabElement.innerHTML = tabValue;
+    tabElement.dataset.filter = emojiTypeItem.type;
+    tabElementHolder.appendChild(tabElement);
+
+    const emojiFilter = document.querySelector('.filter-' + emojiTypeItem.name);
+    emojiFilter.addEventListener('click', function () {
+      const tab = document.querySelector('.emoji-tab.active');
+      if (tab) {
+        tab.classList.remove('active');
+      }
+      emojiFilter.classList.toggle('active');
+      fn_updateEmojiContainer(emojiFilter, panel, quill);
+    });
+  });
+  fn_emojiPanelInit(panel, quill);
+}
+
+function fn_emojiPanelInit(panel, quill) {
+  fn_emojiElementsToPanel('p', panel, quill);
+  document.querySelector('.filter-people').classList.add('active');
+}
+
+function fn_emojiElementsToPanel(type, panel, quill) {
+  const result = emojiList;
+  result.sort(function (a: any, b: any) {
+    return a.emoji_order - b.emoji_order;
+  });
+
+  quill.focus();
+  const range = fn_updateRange(quill);
+
+  result.forEach(function (emoji: any) {
+    const span = document.createElement('span');
+    const t = document.createTextNode(emoji.shortname);
+    span.appendChild(t);
+    span.classList.add('bem');
+    span.classList.add('bem-' + emoji.name);
+    span.classList.add('ap');
+    span.classList.add('ap-' + emoji.name);
+    const output = String(String(emoji.code_decimal));
+    span.innerHTML = output + ' ';
+    panel.appendChild(span);
+
+    const customButton = document.querySelector('.bem-' + emoji.name);
+    if (customButton) {
+      customButton.addEventListener('click', function () {
+        quill.insertEmbed(range.index, 'emoji', emoji, Quill.sources.USER);
+        setTimeout(() => quill.setSelection(range.index + 1), 0);
+        fn_close();
+      });
+    }
+  });
+}
+
+function fn_updateEmojiContainer(emojiFilter, panel, quill) {
+  while (panel.firstChild) {
+    panel.removeChild(panel.firstChild);
+  }
+  const type = emojiFilter.dataset.filter;
+  fn_emojiElementsToPanel(type, panel, quill);
+}
+
+export default ToolbarEmoji;
diff --git a/packages/fluent-editor/src/emoji/utils.ts b/packages/fluent-editor/src/emoji/utils.ts
new file mode 100644
index 0000000000..ff29e6fb34
--- /dev/null
+++ b/packages/fluent-editor/src/emoji/utils.ts
@@ -0,0 +1,15 @@
+export function createEmoji(emojiArr) {
+  const emojiList = [];
+  emojiArr.forEach(emojiItem => {
+    const [ name, unicode, shortname, code_decimal, category, emoji_order ] = emojiItem;
+    emojiList.push({
+      name,
+      unicode,
+      shortname,
+      code_decimal,
+      category,
+      emoji_order
+    });
+  });
+  return emojiList;
+}
diff --git a/packages/fluent-editor/src/file/formats/file.ts b/packages/fluent-editor/src/file/formats/file.ts
new file mode 100644
index 0000000000..d79c7da674
--- /dev/null
+++ b/packages/fluent-editor/src/file/formats/file.ts
@@ -0,0 +1,66 @@
+import * as Quill from 'quill';
+import { sanitize } from '../../config/editor.utils';
+
+const Embed = Quill.imports['blots/embed'];
+const FILE_ATTRIBUTES = ['id', 'title', 'size', 'lastModified'];
+
+class File extends Embed {
+  static blotName: string;
+  static tagName: string;
+  static className: string;
+  static PROTOCOL_WHITELIST: string[];
+  statics: any;
+  domNode: any;
+
+  static create(value) {
+    const node = super.create(value);
+    const size = value.size / 1024;
+    const fixSize = !size ? 0 : size < 1 ? 1 : size.toFixed(0);
+    node.classList.add('icon-file');
+    node.setAttribute('contenteditable', false);
+    node.innerText = `${value.title} (${fixSize} KB)`;
+    const src = File.sanitize(value.src);
+    if (src) {
+      node.href = src;
+      node.target = '_blank';
+    }
+    FILE_ATTRIBUTES.forEach((key) => {
+      if (value[key]) {
+        node.dataset[key] = value[key];
+      }
+    });
+    return node;
+  }
+
+  static value(domNode) {
+    return File.getFormats(domNode);
+  }
+
+  static formats(domNode) {
+    return File.getFormats(domNode);
+  }
+
+  static getFormats(domNode) {
+    const formats: any = {};
+    const href = File.sanitize(domNode.href);
+    if (href) {
+      formats.src = href;
+    }
+    FILE_ATTRIBUTES.forEach((key) => {
+      if (domNode.dataset[key]) {
+        formats[key] = domNode.dataset[key];
+      }
+    });
+    return formats;
+  }
+
+  static sanitize(url) {
+    return (sanitize(url, this.PROTOCOL_WHITELIST) && url) || '';
+  }
+}
+File.blotName = 'file';
+File.tagName = 'A';
+File.className = 'ql-file-item';
+File.PROTOCOL_WHITELIST = ['http', 'https'];
+
+export default File;
diff --git a/packages/fluent-editor/src/file/index.ts b/packages/fluent-editor/src/file/index.ts
new file mode 100644
index 0000000000..19ff11a1ed
--- /dev/null
+++ b/packages/fluent-editor/src/file/index.ts
@@ -0,0 +1,37 @@
+import * as Quill from 'quill';
+import File from './formats/file';
+import FileBar from './modules/file-bar';
+
+const Module = Quill.imports['core/module'];
+
+class FileModule extends Module {
+  quill: any;
+  fileBar: FileBar;
+
+  static register() {
+    Quill.register('formats/file', File, true);
+  }
+
+  constructor(quill, options) {
+    super(quill, options);
+    this.quill = quill;
+    quill.root.addEventListener('click', event => this.clickEvent(event), false);
+  }
+
+  clickEvent(event) {
+    event.preventDefault();
+    const target = event.target;
+    const fileDom = target.closest('a.ql-file-item');
+    if (fileDom) {
+      if (this.fileBar) {
+        this.fileBar.destroy();
+      }
+      this.fileBar = new FileBar(this.quill, fileDom);
+    } else if (this.fileBar && !target.closest('.ql-file-bar')) {
+      this.fileBar.destroy();
+      this.fileBar = null;
+    }
+  }
+}
+
+export default FileModule;
diff --git a/packages/fluent-editor/src/file/modules/file-bar.ts b/packages/fluent-editor/src/file/modules/file-bar.ts
new file mode 100644
index 0000000000..10919658eb
--- /dev/null
+++ b/packages/fluent-editor/src/file/modules/file-bar.ts
@@ -0,0 +1,146 @@
+import * as Quill from 'quill'
+// devui-internal api: utils\public-api.ts
+
+import { unshiftString } from '../../utils/method';
+import { LANG_CONF } from '../../config/editor.config'
+import File from '../formats/file'
+const Delta = Quill.imports['delta']
+import {Range } from 'quill/core/selection'
+
+export default class FileBar {
+  quill: any
+  file: any
+  domNode: HTMLElement
+  fileRange: any
+  template: string
+
+  constructor(quill, target) {
+    this.quill = quill
+    this.file = target
+    const fileBlot = Quill.find(target)
+    const index = this.quill.getIndex(fileBlot)
+    const [fileItem, offset] = this.quill.scroll.descendant(File, index)
+    const length = fileItem && fileItem.length()
+    this.fileRange = new Range(index - offset, length)
+
+    const timestamp = Number(this.file.dataset.lastModified)
+    const lastModifiedDate = this.formatDate(timestamp)
+    this.template = [
+      `<a class="ql-last-modified-date" href="${this.file.href}" target="_blank">${this.file.href}</a>`,
+      '<span class="ql-split"></span>',
+      // `<a class="ql-file-preview"><i class="icon-preview"></i></a>`,
+      `<a class="ql-file-download"><i class="icon-download"></i></a>`,
+      '<a class="ql-file-delete"><i class="icon-delete"></i></a>',
+    ].join('')
+
+    this.createFileBar()
+  }
+
+  createFileBar() {
+    this.domNode = document.createElement('div')
+    this.domNode.className = 'ql-file-bar'
+    this.domNode.innerHTML = this.template
+    // 查看文件
+    const filePreview = this.domNode.querySelector('a.ql-file-preview')
+    if (filePreview) {
+      filePreview.addEventListener('click', (event) => {
+        this.operateFile(event, 'view')
+      })
+    }
+    // 下载文件
+    const fileDownload = this.domNode.querySelector('a.ql-file-download')
+    if (fileDownload) {
+      fileDownload.addEventListener('click', (event) => {
+        this.operateFile(event, 'download')
+      })
+    }
+    // 删除文件
+    const fileDelete = this.domNode.querySelector('a.ql-file-delete')
+    if (fileDelete) {
+      fileDelete.addEventListener('click', (event) => {
+        this.operateFile(event, 'delete')
+        const delta = new Delta()
+          .retain(this.fileRange.index)
+          .delete(this.fileRange.length)
+        this.quill.updateContents(delta, Quill.sources.USER)
+        this.quill.setSelection(this.fileRange.index)
+      })
+    }
+
+    this.setPosition()
+    this.quill.root.parentNode.appendChild(this.domNode)
+  }
+
+  destroy() {
+    if (this.domNode) {
+      this.domNode.remove()
+      this.domNode = null
+      this.file = null
+    }
+  }
+
+  operateFile(event, operate) {
+    event.preventDefault()
+    const fileId = this.file.dataset.id || ''
+    const fileDownloadUrl = this.file.href
+    if (fileId) {
+      this.quill.emitter.emit('file-change', {
+        operation: operate,
+        data: { fileId, fileDownloadUrl },
+      })
+    }
+    // 最好还是交给用户处理下载行为
+    // if(operate === 'download'){
+    //   const a = document.createElement('a');
+    //   a.href = fileDownloadUrl;
+    //   a.target = '_blank';
+    //   a.id='exppub';
+    //   document.body.appendChild(a);
+    //   const alink = document.getElementById('exppub');
+    //   alink.click();
+    //   alink.parentNode.removeChild(a);
+    // }
+    this.destroy()
+  }
+
+  setPosition() {
+    if (this.domNode && this.file) {
+      const parent = this.quill.root.parentNode
+      const child = this.file.querySelector('span')
+      const containerRect = parent.getBoundingClientRect()
+      const fileRect = child.getBoundingClientRect()
+      this.css(this.domNode, {
+        left: `${fileRect.left - containerRect.left}px`,
+        top: `${fileRect.top - containerRect.top + 10}px`,
+      })
+    }
+  }
+
+  css(domNode, rules) {
+    if (typeof rules === 'object') {
+      for (const prop in rules) {
+        if (prop) {
+          if (Array.isArray(rules[prop])) {
+            // 兼容IE11浏览器
+            rules[prop].forEach((val) => {
+              domNode.style[prop] = val
+            })
+          } else {
+            domNode.style[prop] = rules[prop]
+          }
+        }
+      }
+    }
+  }
+
+  formatDate(timestamp) {
+    const date = new Date(timestamp)
+    const year = date.getFullYear()
+    // TODO
+    const month = unshiftString(`${date.getMonth() + 1}`, 2, '0');
+    const day = unshiftString(`${date.getDate()}`, 2, '0');
+    const hour = unshiftString(`${date.getHours()}`, 2, '0');
+    const minute = unshiftString(`${date.getMinutes()}`, 2, '0');
+    return isNaN(year) ? '--' : `${year}/${month}/${day} ${hour}:${minute}`
+  }
+}
diff --git a/packages/fluent-editor/src/fluent-editor.ts b/packages/fluent-editor/src/fluent-editor.ts
new file mode 100644
index 0000000000..b96424e9ad
--- /dev/null
+++ b/packages/fluent-editor/src/fluent-editor.ts
@@ -0,0 +1,67 @@
+import Quill from 'quill'
+import { FONT_FAMILY_CONFIG, FONT_SIZE_CONFIG, ICONS_CONFIG } from './config'
+import Counter from './counter' // 字符统计
+import CustomClipboard from './custom-clipboard' // 粘贴板
+import CustomImage from './custom-image/BlotFormatter' // 图片
+import CustomUploader from './custom-uploader' // 上传
+// import Emoji from './emoji' // 表情
+import FileModule from './file' // 文件
+// import GlobalLink from './global-link' // 全局链接
+import LineHeightStyle from './lineheight'
+import Link from './link' // 超链接0
+import Mention from './mention/Mention' // @提醒
+// import QuickMenu from './quick-menu' // 快捷菜单
+// import Screenshot from './screenshot' // 截图
+import SoftBreak from './soft-break' // 软回车
+import Strike from './strike' // 删除线
+import BetterTable from './table/better-table' // 表格
+// import CustomSyntax from './syntax' // 代码块高亮
+import Toolbar from './toolbar' // 工具栏
+import Video from './video' // 视频
+
+const registerModules = function () {
+  const FontClass = Quill.imports['formats/font']
+  FontClass.whitelist = FONT_FAMILY_CONFIG
+
+  const SizeStyle = Quill.imports['attributors/style/size']
+  // const SizeClass = Quill.imports['attributors/class/size']
+  SizeStyle.whitelist = FONT_SIZE_CONFIG
+
+  const Icons = Quill.imports['ui/icons']
+  const iconKeys = Object.keys(ICONS_CONFIG)
+  iconKeys.forEach(iconKey => {
+    Icons[iconKey] = ICONS_CONFIG[iconKey]
+  })
+
+  Quill.register(
+    {
+      'modules/toolbar': Toolbar,
+      'modules/mention': Mention,
+      'modules/better-table': BetterTable,
+      'modules/clipboard': CustomClipboard,
+      'modules/uploader': CustomUploader, // 三者关联性最强
+      'modules/image': CustomImage, // 三者关联性最强
+      'modules/file': FileModule, // 三者关联性最强
+      'modules/counter': Counter,
+      'formats/font': FontClass,
+      'formats/size': SizeStyle,
+      'formats/strike': Strike,
+      'formats/softBreak': SoftBreak,
+      'formats/lineheight': LineHeightStyle,
+      'formats/video': Video,
+      // 'formats/emoji': Emoji.EmojiBlot, 表情包模块暂不开发
+      // 'modules/emoji-toolbar': Emoji.ToolbarEmoji,
+      // 'modules/emoji-shortname': Emoji.ShortNameEmoji,
+      // 'modules/global-link': GlobalLink,//暂未开发
+      'modules/link': Link,     // 报错
+      // 'modules/screenshot': Screenshot,//暂未开发
+      // 'modules/quickmenu': QuickMenu,//暂未开发
+      // 'modules/syntax': CustomSyntax,   // 原本就是注释的，但是对应的代码高亮功能可以使用
+    },
+    true, //覆盖内部模块
+  )
+
+  return Quill
+}
+
+export default registerModules()
diff --git a/packages/fluent-editor/src/global-link/constants.ts b/packages/fluent-editor/src/global-link/constants.ts
new file mode 100644
index 0000000000..ee3a73e1eb
--- /dev/null
+++ b/packages/fluent-editor/src/global-link/constants.ts
@@ -0,0 +1,3 @@
+export const ON_WIKI_LINK_REMOVE = 'wiki-link/remove';
+export const ON_DOC_LINK_REMOVE = 'doc-link/remove';
+export const ON_WORK_ITEM_LINK_REMOVE = 'work-item-link/remove';
diff --git a/packages/fluent-editor/src/global-link/formats/customer-widget-link.ts b/packages/fluent-editor/src/global-link/formats/customer-widget-link.ts
new file mode 100644
index 0000000000..fa331ed2f1
--- /dev/null
+++ b/packages/fluent-editor/src/global-link/formats/customer-widget-link.ts
@@ -0,0 +1,37 @@
+import * as Quill from 'quill';
+
+const BlockEmbed = Quill.imports['blots/block/embed'];
+
+// @dynamic
+class CustomerWidgetLink extends BlockEmbed {
+  static blotName: string;
+  static tagName: string;
+  static className: string;
+
+  static create(value) {
+    const node = super.create(value);
+    node.setAttribute('data-widget-type', value.type);
+    node.setAttribute('data-widget-id', value.id);
+    node.setAttribute('src', value.value);
+    return node;
+  }
+
+  static value(domNode) {
+    return {
+      type: domNode.getAttribute('data-widget-type'),
+      id: domNode.getAttribute('data-widget-id'),
+      value: domNode.getAttribute('src'),
+    };
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data);
+  }
+
+}
+
+CustomerWidgetLink.blotName = 'customer-widget-link';
+CustomerWidgetLink.tagName = 'img';
+CustomerWidgetLink.className = 'ql-customer-widget-link';
+
+export default CustomerWidgetLink;
diff --git a/packages/fluent-editor/src/global-link/formats/doc-link.ts b/packages/fluent-editor/src/global-link/formats/doc-link.ts
new file mode 100644
index 0000000000..11b92cc20d
--- /dev/null
+++ b/packages/fluent-editor/src/global-link/formats/doc-link.ts
@@ -0,0 +1,55 @@
+import * as Quill from 'quill';
+import { ON_DOC_LINK_REMOVE } from '../constants';
+
+const Embed = Quill.imports['blots/embed'];
+
+// @dynamic
+class DocumentLink extends Embed {
+  static blotName: string;
+  static tagName: string;
+  static className: string;
+  docData: any;
+  scroll: any;
+
+  static create(value) {
+    const node = super.create(value);
+    node.setAttribute('href', value.link);
+    node.setAttribute('title', value.text);
+    node.setAttribute('target', '_blank');
+    node.setAttribute('icon-link', value.icon);
+
+    const icon = document.createElement('span');
+    icon.classList.add('ql-doc-link-icon');
+    icon.style.background = `url(${value.icon}) no-repeat center`;
+    icon.style.backgroundSize = 'contain';
+
+    node.insertAdjacentElement('afterbegin', icon);
+    const text = document.createTextNode(value.text);
+    node.appendChild(text);
+    return node;
+  }
+
+  static value(domNode) {
+    return {
+      link: domNode.getAttribute('href'),
+      icon: domNode.getAttribute('icon-link'),
+      text: domNode.textContent,
+    };
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data);
+    this.docData = data;
+  }
+
+  remove() {
+    this.scroll.emitter.emit(ON_DOC_LINK_REMOVE, this.docData);
+    return super.remove();
+  }
+}
+
+DocumentLink.blotName = 'doc-link';
+DocumentLink.tagName = 'A';
+DocumentLink.className = 'ql-doc-link';
+
+export default DocumentLink;
diff --git a/packages/fluent-editor/src/global-link/formats/wiki-link.ts b/packages/fluent-editor/src/global-link/formats/wiki-link.ts
new file mode 100644
index 0000000000..83d2fffffc
--- /dev/null
+++ b/packages/fluent-editor/src/global-link/formats/wiki-link.ts
@@ -0,0 +1,45 @@
+import * as Quill from 'quill';
+import { ON_WIKI_LINK_REMOVE } from '../constants';
+
+const Embed = Quill.imports['blots/embed'];
+
+// @dynamic
+class WikiLink extends Embed {
+  static blotName: string;
+  static tagName: string;
+  static className: string;
+  wikiData: any;
+  scroll: any;
+
+  static create(value) {
+    const node = super.create(value);
+    node.setAttribute('href', value.link);
+    node.setAttribute('target', '_blank');
+    node.setAttribute('title', value.text);
+    node.textContent = value.text;
+    return node;
+  }
+
+  static value(domNode) {
+    return {
+      link: domNode.getAttribute('href'),
+      text: domNode.textContent,
+    };
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data);
+    this.wikiData = data;
+  }
+
+  remove() {
+    this.scroll.emitter.emit(ON_WIKI_LINK_REMOVE, this.wikiData);
+    return super.remove();
+  }
+}
+
+WikiLink.blotName = 'wiki-link';
+WikiLink.tagName = 'A';
+WikiLink.className = 'ql-wiki-link';
+
+export default WikiLink;
diff --git a/packages/fluent-editor/src/global-link/formats/work-item-link.ts b/packages/fluent-editor/src/global-link/formats/work-item-link.ts
new file mode 100644
index 0000000000..f359b9c7b2
--- /dev/null
+++ b/packages/fluent-editor/src/global-link/formats/work-item-link.ts
@@ -0,0 +1,46 @@
+import * as Quill from 'quill';
+import { ON_WORK_ITEM_LINK_REMOVE } from '../constants';
+import { createTable } from '../utils/createTable';
+const BlockEmbed = Quill.imports['blots/block/embed'];
+
+// @dynamic
+class WorkItemLink extends BlockEmbed {
+  static blotName: string;
+  static tagName: string;
+  static className: string;
+  workItemData: any;
+  scroll: any;
+
+  static create(value) {
+    const node = super.create(value);
+    node.setAttribute('contenteditable', 'false');
+    node.setAttribute('href', value.link);
+    node.setAttribute('__work_item_data__', JSON.stringify(value.data));
+    const table = createTable(value.data);
+    node.appendChild(table);
+    return node;
+  }
+
+  static value(domNode) {
+    return {
+      link: domNode.getAttribute('href'),
+      data: JSON.parse(domNode.getAttribute('__work_item_data__'))
+    };
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data);
+    this.workItemData = data;
+  }
+
+  remove() {
+    this.scroll.emitter.emit(ON_WORK_ITEM_LINK_REMOVE, this.workItemData);
+    return super.remove();
+  }
+}
+
+WorkItemLink.blotName = 'work-item-link';
+WorkItemLink.tagName = 'div';
+WorkItemLink.className = 'ql-work-item-link';
+
+export default WorkItemLink;
diff --git a/packages/fluent-editor/src/global-link/global-link-panel.ts b/packages/fluent-editor/src/global-link/global-link-panel.ts
new file mode 100644
index 0000000000..881e22e427
--- /dev/null
+++ b/packages/fluent-editor/src/global-link/global-link-panel.ts
@@ -0,0 +1,20 @@
+import { EventEmitter } from '@angular/core';
+
+interface WikiLink {
+  link: string;
+  text: string;
+}
+
+interface DocLink {
+  link: string;
+  text: string;
+  icon: string;
+}
+
+export interface GlobalLinkPanel {
+  wikiLink: EventEmitter<WikiLink[]>;
+  docLink: EventEmitter<DocLink[]>;
+  workItemLink: EventEmitter<any>;
+  close?: EventEmitter<any>;
+  autoClose?: boolean;
+}
diff --git a/packages/fluent-editor/src/global-link/index.ts b/packages/fluent-editor/src/global-link/index.ts
new file mode 100644
index 0000000000..d2d386ea42
--- /dev/null
+++ b/packages/fluent-editor/src/global-link/index.ts
@@ -0,0 +1,160 @@
+import * as Quill from 'quill';
+import { getEventComposedPath } from '../config/editor.utils';
+import CustomerWidgetLink from './formats/customer-widget-link';
+import DocumentLink from './formats/doc-link';
+import WikiLink from './formats/wiki-link';
+import WorkItemLink from './formats/work-item-link';
+
+const Module = Quill.imports['core/module'];
+const Delta = Quill.imports['delta'];
+
+// @dynamic
+class GlobalLink extends Module {
+  open: boolean;
+  wrap: any;
+  panel: any;
+  quill: any;
+
+  static register() {
+    Quill.register('formats/wiki-link', WikiLink);
+    Quill.register('formats/doc-link', DocumentLink);
+    Quill.register('formats/work-item-link', WorkItemLink);
+    Quill.register('formats/customer-widget-link', CustomerWidgetLink);
+  }
+
+  constructor(quill, options) {
+    super(quill, options);
+    const toolbar = quill.getModule('toolbar');
+    this.open = false;
+    this.panel = options.component;
+    this.wrap = options.wrap;
+    const globalLinkBtn = toolbar.container && toolbar.container.querySelector('.ql-global-link');
+    toolbar.addHandler('global-link', this.handleGlobalLinkButtonClick.bind(this));
+    quill.root.addEventListener('click', this.onEditorClick.bind(this));
+    document.body.addEventListener('click', (evt) => {
+      if (!this.wrap.contains(evt.target) && !(globalLinkBtn && globalLinkBtn.contains(evt.target))) {
+        this.open = false;
+        this.wrap.classList.add('global-link-hide');
+      }
+    });
+    this.panel.wikiLink.subscribe(this.addWikiLink.bind(this));
+    this.panel.docLink.subscribe(this.addDocLink.bind(this));
+    this.panel.workItemLink.subscribe(this.addWorkItemLink.bind(this));
+    if (this.panel.close) { this.panel.close.subscribe(this.closePanel.bind(this)); }
+  }
+
+  onEditorClick(evt: any) {
+    if (!evt.ctrlKey) { return; }
+    const path = getEventComposedPath(evt);
+    if (!path || path.length <= 0) { return; }
+    const linkNode = path.filter(node => {
+      return node.classList && (node.classList.contains(WikiLink.className)
+        || node.classList.contains(DocumentLink.className)
+        || node.classList.contains(WorkItemLink.className));
+    })[0];
+
+    if (!linkNode) { return; }
+
+    if (linkNode.classList.contains(WikiLink.className)) {
+      this.handleLinkClick(linkNode);
+    } else if (linkNode.classList.contains(DocumentLink.className)) {
+      this.handleLinkClick(linkNode);
+    } else if (linkNode.classList.contains(WorkItemLink.className)) {
+      const tableRow = path.filter(node => {
+        return node.tagName && node.tagName.toUpperCase() === 'TR';
+      })[0];
+
+      if (tableRow) {
+        this.handleLinkClick(tableRow);
+      }
+    }
+  }
+
+  handleLinkClick(linkNode) {
+    const href = linkNode.getAttribute('href');
+    if (href) {
+      window.open(href);
+    }
+  }
+
+  handleGlobalLinkButtonClick(value) {
+    this.open = !this.open;
+    this.triggerPanel();
+  }
+
+  triggerPanel() {
+    if (this.open) {
+      this.wrap.classList.remove('global-link-hide');
+    } else {
+      this.wrap.classList.add('global-link-hide');
+    }
+  }
+
+  addWikiLink(wikiData) {
+    const index = this.quill.getSelection(true).index;
+    const arr:{link: any,text: any} [] = []
+    const delta = arr.reduce.call(wikiData, (op: any, wiki) => {
+      op.insert({
+        [WikiLink.blotName]: {
+          link: wiki.link,
+          text: wiki.text
+        }
+      });
+      return op;
+    }, new Delta().retain(index));
+
+    this.quill.updateContents(delta, Quill.sources.USER);
+    this.quill.setSelection(index + 1, Quill.sources.USER);
+    if (this.panel.autoClose) {
+      this.closePanel();
+    }
+  }
+
+  addDocLink(docData) {
+    const index = this.quill.getSelection(true).index;
+    const arr:{link: any,text: any, icon: any} [] = []
+    const delta = arr.reduce.call(docData, (op: any, doc) => {
+      op.insert({
+        [DocumentLink.blotName]: {
+          link: doc.link,
+          text: doc.text,
+          icon: doc.icon
+        }
+      });
+      return op;
+    }, new Delta().retain(index));
+
+    this.quill.updateContents(delta, Quill.sources.USER);
+    this.quill.setSelection(index + 1, Quill.sources.USER);
+    if (this.panel.autoClose) {
+      this.closePanel();
+    }
+  }
+
+  addWorkItemLink(workItemData) {
+    const index = this.quill.getSelection(true).index;
+    const arr:{url: any, table: any} [] = []
+    const delta = arr.reduce.call(workItemData, (op: any, workItem) => {
+      op.insert({
+        [WorkItemLink.blotName]: {
+          link: workItem.url,
+          data: workItem.table
+        }
+      });
+      return op;
+    }, new Delta().retain(index));
+
+    this.quill.updateContents(delta, Quill.sources.USER);
+    this.quill.setSelection(index + 1, Quill.sources.USER);
+    if (this.panel.autoClose) {
+      this.closePanel();
+    }
+  }
+
+  closePanel() {
+    this.open = false;
+    this.triggerPanel();
+  }
+}
+
+export default GlobalLink;
diff --git a/packages/fluent-editor/src/global-link/utils/createTable.ts b/packages/fluent-editor/src/global-link/utils/createTable.ts
new file mode 100644
index 0000000000..602ed98fa4
--- /dev/null
+++ b/packages/fluent-editor/src/global-link/utils/createTable.ts
@@ -0,0 +1,54 @@
+const tableConfig = [
+  { title: 'Number', field: 'id', width: '100' },
+  { title: 'Title', field: 'subject', width: '200' },
+  { title: 'Priority', field: 'priority', width: '100' },
+  { title: 'Iteration', field: 'iteration', width: '100' },
+  { title: 'Status', field: 'status', width: '100' },
+  { title: 'Conductor', field: 'assigned_to', width: '100' },
+];
+
+export function createTable(data: any[]) {
+  const table = document.createElement<'table'>('table');
+  createColGroup(table);
+  createTableHead(table);
+  createTableBody(table, data);
+  return table;
+}
+
+function createColGroup(table: HTMLTableElement) {
+  const colGroup = document.createElement<'colgroup'>('colgroup');
+  tableConfig.forEach(({width}) => {
+    const col = document.createElement<'col'>('col');
+    col.setAttribute('width', width);
+    colGroup.appendChild(col);
+  });
+  table.insertAdjacentElement('afterbegin', colGroup);
+}
+
+function createTableHead(table: HTMLTableElement) {
+  const tHead = table.createTHead();
+  const tRow = tHead.insertRow();
+  tableConfig.forEach(({title}) => {
+    const tCell = tRow.insertCell();
+    tCell.textContent = title;
+  });
+  return tHead;
+}
+
+function createTableBody(table: HTMLTableElement, data: any[]) {
+  const tBody = table.createTBody();
+
+  [].forEach.call(data, (d) => {
+    const tRow = tBody.insertRow();
+    // @ts-ignore
+    tRow.setAttribute('href', d.url);
+    tableConfig.forEach(({field}) => {
+      const tCell = tRow.insertCell();
+      tCell.classList.add(`work-item-${field}`);
+      // @ts-ignore
+      tCell.textContent = d[field];
+    });
+  });
+
+  return tBody;
+}
diff --git a/packages/fluent-editor/src/index.ts b/packages/fluent-editor/src/index.ts
new file mode 100644
index 0000000000..dd25446f00
--- /dev/null
+++ b/packages/fluent-editor/src/index.ts
@@ -0,0 +1,6 @@
+import './styles.scss'
+// 后面合并两个配置
+// export * from './config/editor.config'
+// export * from './config'
+import FluentEditor from './fluent-editor';
+export default FluentEditor;
diff --git a/packages/fluent-editor/src/lineheight.ts b/packages/fluent-editor/src/lineheight.ts
new file mode 100644
index 0000000000..e4a1525964
--- /dev/null
+++ b/packages/fluent-editor/src/lineheight.ts
@@ -0,0 +1,11 @@
+import Quill from 'quill'
+
+// import * as Quill from 'quill';
+const Parchment = Quill.imports['parchment'];
+
+const LineHeightStyle = new Parchment.StyleAttributor('lineheight', 'line-height', {
+  scope: Parchment.Scope.INLINE,
+  whitelist: ['2', '2.5', '3', '4', '5'] // 行距值的白名单
+});
+
+export default LineHeightStyle;
diff --git a/packages/fluent-editor/src/link/formats/link.ts b/packages/fluent-editor/src/link/formats/link.ts
new file mode 100644
index 0000000000..d50ea5f782
--- /dev/null
+++ b/packages/fluent-editor/src/link/formats/link.ts
@@ -0,0 +1,42 @@
+import * as Quill from 'quill';
+import { sanitize } from '../../config/editor.utils';
+const Inline = Quill.imports['blots/inline'];
+
+// @dynamic
+export default class Link extends Inline {
+  static blotName: string;
+  static tagName: string;
+  static SANITIZED_URL: string;
+  static PROTOCOL_WHITELIST: string[];
+  static className: string;
+  statics: any;
+  domNode: any;
+  static create(value) {
+    const node = super.create(value);
+    const href = this.sanitize(value);
+    node.setAttribute('href', href);
+    node.setAttribute('target', '_blank');
+    return node;
+  }
+
+  static formats(domNode) {
+    return domNode.getAttribute('href');
+  }
+
+  static sanitize(url) {
+    return sanitize(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL;
+  }
+
+  format(name, value) {
+    if (name !== this.statics.blotName || [false, null].indexOf(value) !== -1) {
+      super.format(name, value);
+    } else {
+      this.domNode.setAttribute('href', Link.sanitize(value));
+    }
+  }
+}
+Link.blotName = 'link';
+Link.tagName = 'A';
+Link.SANITIZED_URL = 'about:blank';
+Link.PROTOCOL_WHITELIST = ['http', 'https', 'mailto', 'tel'];
+Link.className = 'ql-normal-link';
diff --git a/packages/fluent-editor/src/link/index.ts b/packages/fluent-editor/src/link/index.ts
new file mode 100644
index 0000000000..c6eec4b81a
--- /dev/null
+++ b/packages/fluent-editor/src/link/index.ts
@@ -0,0 +1,33 @@
+import * as Quill from 'quill';
+import LinkBlot from './formats/link';
+import Tooltip from './modules/tooltip';
+const icons = Quill.imports['ui/icons'];
+const SnowTheme = Quill.imports['themes/snow'];
+const Module = Quill.imports['core/module'];
+
+// @dynamic
+class Link extends Module {
+  static register() {
+    Quill.register('blots/link', LinkBlot, true);
+  }
+  constructor(quill, options) {
+    super(quill, options);
+  }
+}
+
+SnowTheme.prototype.extendToolbar = function(toolbar) {
+  toolbar.container.classList.add('ql-snow');
+  this.buildButtons(toolbar.container.querySelectorAll('button'), icons);
+  this.buildPickers(toolbar.container.querySelectorAll('select'), icons);
+  this.tooltip = new Tooltip(this.quill, this.options.bounds);
+  if (toolbar.container.querySelector('.ql-link')) {
+    this.quill.keyboard.addBinding(
+      { key: 'k', shortKey: true },
+      (range, context) => {
+        toolbar.handlers.link.call(toolbar, !context.format.link);
+      },
+    );
+  }
+};
+
+export default Link;
diff --git a/packages/fluent-editor/src/link/modules/tooltip.ts b/packages/fluent-editor/src/link/modules/tooltip.ts
new file mode 100644
index 0000000000..2b7e265758
--- /dev/null
+++ b/packages/fluent-editor/src/link/modules/tooltip.ts
@@ -0,0 +1,307 @@
+import * as Quill from 'quill';
+import { debounce } from '../../../src/utils/debounce';
+import { LANG_CONF } from '../../config/editor.config';
+import { isNullOrUndefined } from '../../config/editor.utils';
+import LinkBlot from '../formats/link';
+import { BaseTooltip } from 'quill/themes/base'
+import { Range } from 'quill/core/selection'
+import Emitter from 'quill/core/emitter'
+
+// const Emitter = Quill.imports['core/emitter'];
+// const BaseTooltip = Quill.imports['themes/BaseTooltip'];
+// const Range = Quill.imports['core/selection/range'];
+
+// @dynamic
+export default class Tooltip extends BaseTooltip {
+  static TEMPLATE: string;
+  isInputFocus: boolean;
+  isHover: boolean;
+  debouncedHideToolTip: any;
+  debouncedShowToolTip: any;
+  hide: any;
+  linkRange: any;
+  quill: any;
+  root: any;
+  restoreFocus: any;
+  textbox: any;
+  boundsContainer: any;
+
+  constructor(quill, bounds) {
+    super(quill, bounds);
+    this.isInputFocus = false;
+    this.isHover = false;
+
+    this.debouncedHideToolTip = debounce(this.hideToolTip, 300);
+    this.debouncedShowToolTip = debounce(this.showToolTip, 300);
+  }
+
+  shouldHide() {
+    return !this.isHover && !this.isInputFocus;
+  }
+
+  hideToolTip() {
+    if (this.shouldHide()) {
+      this.hide();
+    }
+  }
+
+  showToolTip(name, value, range) {
+    if (!this.shouldHide()) {
+      this.edit(name, value, range);
+    }
+  }
+
+  handleMouseLeave() {
+    this.isHover = false;
+    this.debouncedHideToolTip();
+  }
+
+  handleMouseEnter(event) {
+    const isTooltipShow = !this.root.classList.contains('ql-hidden');
+    if (isTooltipShow) {
+      return;
+    }
+
+    if (this.isInputFocus) {
+      this.save();
+    }
+    this.isHover = true;
+    const linkNode = event.target;
+    const preview = LinkBlot.formats(linkNode);
+    if(preview.startsWith('#')){
+      return
+    }
+    const linkBlot = Quill.find(linkNode);
+    const index = this.quill.getIndex(linkBlot);
+    const [link, offset] = this.quill.scroll.descendant(
+      LinkBlot,
+      index,
+    );
+    const length = link && link.length();
+    this.linkRange = new Range(index - offset, length);
+    this.debouncedShowToolTip('link', preview, this.linkRange);
+  }
+
+  listen() {
+    super.listen();
+
+    this.root.querySelector('a.ql-remove').addEventListener('click', (event) => {
+      if (!isNullOrUndefined(this.linkRange)) {
+        const range = this.linkRange;
+        this.restoreFocus();
+        this.quill.formatText(range, 'link', false, Emitter.sources.API);
+        delete this.linkRange;
+      }
+      event.preventDefault();
+      this.hide();
+    });
+
+    this.quill.root.addEventListener(
+      'mouseover',
+      (event) => {
+        if (
+          (event.target.tagName.toUpperCase() !== 'A' ||
+          !event.target.classList.contains(LinkBlot.className)) &&
+          !event.target.closest(`a.${LinkBlot.className}`)
+        ) {
+          return;
+        }
+        this.handleMouseEnter(event);
+      },
+      false
+    );
+
+    this.quill.root.addEventListener(
+      'mouseout',
+      (event) => {
+        if (event.target.tagName.toUpperCase() !== 'A' && !event.target.closest(`a.${LinkBlot.className}`)) {
+          return;
+        }
+        this.handleMouseLeave();
+      },
+      false
+    );
+
+    this.root.addEventListener(
+      'mouseenter',
+      (event) => {
+        this.isHover = true;
+      },
+      false
+    );
+
+    this.root.addEventListener('mouseleave', this.handleMouseLeave.bind(this), false);
+
+    this.root.querySelector('a.ql-preview').addEventListener('click', event => {
+      const link = LinkBlot.sanitize(this.textbox.value);
+      window.open(link, '_blank');
+      event.preventDefault();
+    });
+    this.root.querySelector('input[type="text"]').addEventListener('focus', event => {
+      this.isInputFocus = true;
+    });
+    this.root.querySelector('input[type="text"]').addEventListener('blur', event => {
+      this.isInputFocus = false;
+      this.save();
+    });
+    this.quill.on(
+      Emitter.events.SELECTION_CHANGE,
+      (range, oldRange, source) => {
+        if (isNullOrUndefined(range)) { return; }
+        if (source === Emitter.sources.USER) {
+          const [link, offset] = this.quill.scroll.descendant(
+            LinkBlot,
+            range.index,
+          );
+
+          if (!isNullOrUndefined(link)) {
+            this.linkRange = new Range(range.index - offset, link.length());
+            const preview = LinkBlot.formats(link.domNode);
+            if(!preview.startsWith('#')){
+              this.edit('link', preview, this.linkRange);
+            }
+            return;
+          }
+        }
+        if (this.shouldHide()) {
+          this.hide();
+        }
+      },
+    );
+    this.quill.on(
+      Emitter.events.TEXT_CHANGE,
+      (range, oldRange, source) => {
+        const selection = this.quill.getSelection();
+        const index = selection && selection.index;
+        setTimeout(() => {
+          const link = this.quill.scroll.descendant(
+            LinkBlot,
+            index,
+          )[0];
+          if (!link) {
+            this.handleMouseLeave();
+          }
+        });
+      }
+    );
+  }
+
+  save() {
+    let { value } = this.textbox;
+    switch (this.root.getAttribute('data-mode')) {
+    case 'link': {
+      const { scrollTop } = this.quill.root;
+      const { autoProtocol } = this.quill.options;
+      if (autoProtocol) {
+        value = this.addHttpProtocol(value);
+      }
+
+      if (this.linkRange) {
+        this.quill.formatText(
+          this.linkRange,
+          'link',
+          value,
+          Emitter.sources.USER,
+        );
+        this.restoreFocus();
+      } else {
+        this.restoreFocus();
+        this.quill.format('link', value, Emitter.sources.USER);
+      }
+      this.quill.root.scrollTop = scrollTop;
+      break;
+    }
+    case 'formula': {
+      if (!value) {
+        break;
+      }
+      const range = this.quill.getSelection(true);
+      if (!isNullOrUndefined(range)) {
+        const index = range.index + range.length;
+        this.quill.insertEmbed(
+          index,
+          this.root.getAttribute('data-mode'),
+          value,
+          Emitter.sources.USER,
+        );
+        if (this.root.getAttribute('data-mode') === 'formula') {
+          this.quill.insertText(index + 1, ' ', Emitter.sources.USER);
+        }
+        this.quill.setSelection(index + 2, Emitter.sources.USER);
+      }
+      break;
+    }
+    default:
+    }
+  }
+
+  position(reference) {
+    const left = reference.left;
+    const top = reference.bottom + this.quill.root.scrollTop;
+    this.root.style.left = `${left}px`;
+    this.root.style.top = `${top}px`;
+    this.root.classList.remove('ql-flip');
+    const containerBounds = this.boundsContainer.getBoundingClientRect();
+    const rootBounds = this.root.getBoundingClientRect();
+    let shift = 0;
+    if (rootBounds.right > containerBounds.right) {
+      shift = containerBounds.right - rootBounds.right;
+      this.root.style.left = `${left + shift}px`;
+    }
+    if (rootBounds.left < containerBounds.left) {
+      shift = containerBounds.left - rootBounds.left;
+      this.root.style.left = `${left + shift}px`;
+    }
+    if (rootBounds.bottom > containerBounds.bottom) {
+      const height = rootBounds.bottom - rootBounds.top;
+      const verticalShift = reference.bottom - reference.top + height;
+      const fixedTop = top - verticalShift;
+      this.root.style.top = `${fixedTop < 0 ? this.quill.root.scrollTop + reference.top : fixedTop}px`;
+      this.root.classList.add('ql-flip');
+    }
+    return shift;
+  }
+
+  edit(mode = 'link', preview = null, range) {
+    this.linkRange = range || this.quill.selection.savedRange;
+    this.root.classList.remove('ql-hidden');
+    this.root.classList.add('ql-editing');
+    if (!isNullOrUndefined(preview)) {
+      this.textbox.value = preview;
+    } else if (mode !== this.root.getAttribute('data-mode')) {
+      this.textbox.value = '';
+    }
+    this.position(this.quill.getBounds(range || this.quill.selection.savedRange));
+    if (this.textbox.value === '') {
+      this.textbox.focus();
+    }
+    this.textbox.setAttribute(
+      'placeholder',
+      this.textbox.getAttribute(`data-${mode}`) || '',
+    );
+    this.root.setAttribute('data-mode', mode);
+  }
+
+  show() {
+    super.show();
+    this.root.removeAttribute('data-mode');
+  }
+
+  addHttpProtocol(url) {
+    let result = url;
+    if (!url) {
+      return '';
+    }
+    if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
+      result = `http://${url}`;
+    }
+    return result;
+  }
+}
+
+Tooltip.TEMPLATE = [
+  `<input type="text" data-formula="e=mc^2" data-link="${LANG_CONF.linkplaceholder}" data-video="Embed URL" style="width: 225px;">`,
+  '<span class="ql-split"></span>',
+  '<a class="ql-preview"><i class="icon-share"></i></a>',
+  '<a class="ql-remove"><i class="icon-delete"></i></a>',
+].join('');
diff --git a/packages/fluent-editor/src/mention/Mention.ts b/packages/fluent-editor/src/mention/Mention.ts
new file mode 100644
index 0000000000..22f30eb367
--- /dev/null
+++ b/packages/fluent-editor/src/mention/Mention.ts
@@ -0,0 +1,399 @@
+import * as Quill from 'quill';
+import { isNullOrUndefined } from '../config/editor.utils';
+import { DEFAULT_MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants';
+import MentionLink from './MentionLink';
+
+const { Scope } = Quill.imports['parchment'];
+const Delta = Quill.imports['delta'];
+
+interface MentionOption {
+  remove?: (data: any) => void;
+  defaultLink?: string;
+  target?: string;
+  mentionChar?: string;
+  maxHeight?: number;
+  search?: (term: string) => Promise<any[]>;
+  renderMentionItem?: (data: any) => HTMLElement;
+  renderMentionText?: (data: any) => HTMLElement | string;
+  containerClass?: string;
+  listClass?: string;
+  listHideClass?: string;
+  searchKey: string;
+  itemKey: string;
+  itemClass?: string;
+  itemActiveClass?: string;
+  dataAttributes?: string[];
+  select?: (data: any) => void;
+}
+
+// @dynamic
+class Mention {
+  private readonly options: MentionOption;
+  private readonly mentionListEL: HTMLUListElement;
+  private activeMentionIndex = 0;
+  private latestMentionList: any[];
+  private latestMentionCharPos: number;
+  private latestCaretPos: number;
+  private searchTerm = '';
+  private needInsertBr = true;
+  private readonly defaultOptions: MentionOption = {
+    defaultLink: '#',
+    target: '_blank',
+    mentionChar: DEFAULT_MENTION_CHAR,
+    maxHeight: 200,
+    renderMentionItem(data: any) {
+      let mentionItem = data.name || data.id;
+      if (this.itemKey) {
+        mentionItem = data[this.itemKey];
+      }
+      const dom = document.createElement('SPAN');
+      dom.textContent = mentionItem;
+      return dom;
+    },
+    renderMentionText(data: any) {
+      let mentionText = data.name || data.id;
+      if (this.itemKey) {
+        mentionText = data[this.itemKey];
+      }
+      return `${mentionText}`;
+    },
+    containerClass: 'ql-mention-list-container',
+    listClass: 'ql-mention-list',
+    listHideClass: 'ql-mention-list--hide',
+    itemClass: 'ql-mention-item',
+    itemActiveClass: 'ql-mention-item--active',
+    itemKey: 'name',
+    searchKey: 'name',
+    dataAttributes: ['id'],
+    select(data: any) {},
+    remove(data: any) {},
+  };
+
+  static register() {
+    Quill.register(MentionLink);
+  }
+
+  // @ts-ignore
+  constructor(private quill: Quill, options: MentionOption) {
+    if (!options.search) {
+      console.warn('please provide a search function!');
+      return;
+    }
+
+    this.options = Object.assign(this.defaultOptions, options);
+    const container = document.createElement('div');
+    container.classList.add(this.options.containerClass);
+    this.mentionListEL = document.createElement('ul');
+    this.mentionListEL.classList.add(this.options.listClass, this.options.listHideClass);
+    this.mentionListEL.style.cssText += `
+      max-height: ${this.options.maxHeight}px;
+    `;
+
+    quill.on(Quill.events.TEXT_CHANGE, this.handleTextChange);
+    quill.keyboard.addBinding({ key: 'ArrowUp' }, this.handleArrowUpKey);
+    quill.keyboard.addBinding({ key: 'ArrowDown' }, this.handleArrowDownKey);
+    quill.keyboard.addBinding({ key: 'Enter' }, this.handleEnterKey);
+    quill.keyboard.addBinding({ key: 'Tab' }, this.handleEnterKey);
+    quill.keyboard.addBinding({ key: 'Escape' }, this.handleEscapeKey);
+    quill.keyboard.bindings['Enter'].unshift(quill.keyboard.bindings['Enter'].pop());
+    quill.keyboard.bindings['Tab'].unshift(quill.keyboard.bindings['Tab'].pop());
+    quill.keyboard.bindings['Escape'].unshift(quill.keyboard.bindings['Escape'].pop());
+
+    const customKeyboardEnter = {
+      key: 'Enter',
+      shiftKey: null,
+      handler: (range, context) => {
+        const lineFormats = Object.keys(context.format).reduce(
+          (formats, format) => {
+            if (
+              this.quill.scroll.query(format, Scope.BLOCK) &&
+              !Array.isArray(context.format[format])
+            ) {
+              formats[format] = context.format[format];
+            }
+            return formats;
+          },
+          {},
+        );
+
+        // fix: 解决@提醒之后插入多余空行和光标位置不对的问题
+        let selectionIndex = range.index - this.searchTerm.length;
+        let delta = new Delta()
+          .retain(range.index)
+          .delete(range.length);
+        if (this.needInsertBr) {
+          delta = delta.insert('\n', lineFormats);
+          selectionIndex = range.index + 1;
+        }
+
+        this.quill.updateContents(delta, Quill.sources.USER);
+        this.quill.setSelection(selectionIndex, Quill.sources.SILENT);
+        this.quill.focus();
+
+        Object.keys(context.format).forEach(name => {
+          if (!isNullOrUndefined(lineFormats[name])) { return; }
+          if (Array.isArray(context.format[name])) { return; }
+          if (name === 'code' || name === 'link') { return; }
+          this.quill.format(name, context.format[name], Quill.sources.USER);
+        });
+
+        this.needInsertBr = true; // 标记是否是输入@提醒的Enter
+      },
+    };
+
+    // 用自定义的Enter替换内置的Enter
+    quill.keyboard.bindings['Enter'] = quill.keyboard.bindings['Enter'].map((item) => {
+      const buildinKeyboardEnter = item.format === undefined && item.shiftKey === null;
+      if (buildinKeyboardEnter) {
+        return customKeyboardEnter;
+      } else {
+        return item;
+      }
+    });
+
+    this.on('click', this.handleMouseClick);
+    this.on('mouseover', this.handleMouseEnter);
+    quill.emitter.on(ON_MENTION_LINK_REMOVE, async ({ mention, name }) => {
+      const [result] = (mention && [mention]) || (await this.options.search(name));
+      this.options.remove(result);
+    });
+    container.appendChild(this.mentionListEL);
+    quill.container.parentElement.insertBefore(container, quill.container);
+  }
+
+  on(eventName, callback) {
+    this.mentionListEL.addEventListener(eventName, (evt) => {
+
+      let
+        target = evt.target;
+      let targetItemEL;
+
+      while (this.mentionListEL.contains(target) && target !== this.mentionListEL) {
+        if (target.classList.contains(this.options.itemClass)) {
+          targetItemEL = target;
+        }
+        target = target.parentElement;
+      }
+
+      if (targetItemEL) {
+        callback.call(this, targetItemEL, this.getMentionItemIndex(targetItemEL));
+      }
+    });
+  }
+
+  getMentionItemIndex(itemEl: Element) {
+    return [].reduce.call(this.mentionListEL.children,
+      (index, item, idx) => item === itemEl ? idx : index, -1);
+  }
+
+  handleTextChange = (delta, oldDelta, source) => {
+    // defer handler to make sure that we can get correct quill selection range.
+    setTimeout(() => {
+      if (Quill.sources.USER === source) {
+        const range = this.quill.getSelection();
+        if (!range) {
+          return;
+        }
+
+        const caretPos = this.latestCaretPos = range.index;
+        // beforeCaretText的计算有问题，没有把图片内容和@提醒内容的非字符内容算进去
+        const content = this.quill.getContents();
+        const beforeCaretText = content.reduce((newText, op) => {
+          if (typeof op.insert === 'string') {
+            // eslint-disable-next-line no-return-assign
+            return (newText += op.insert);
+          } else {
+            // eslint-disable-next-line no-return-assign
+            return (newText += ' '); // 将图片内容和@提醒内容的非字符内容置为' '，算一个位置
+          }
+        }, '');
+        const mentionCharPos = beforeCaretText.lastIndexOf(this.options.mentionChar);
+
+        if (mentionCharPos > -1) {
+          const searchTerm = beforeCaretText.substring(mentionCharPos + this.options.mentionChar.length, caretPos);
+          this.searchTerm = searchTerm;
+          if (!''.startsWith.call(searchTerm, ' ')) {
+            this.latestMentionCharPos = mentionCharPos;
+            this.searchMentionListByTerm(searchTerm);
+          } else {
+            this.hideMentionList();
+          }
+        } else {
+          this.hideMentionList();
+        }
+      }
+    });
+  };
+
+  handleMouseClick(itemEl: HTMLLIElement, index: number) {
+    this.selectMentionItem(index, true);
+    this.quill.focus();
+  }
+
+  handleMouseEnter(itemEl: HTMLLIElement, index: number) {
+    this.activeMentionIndex = index;
+    this.highlightMentionItem(index);
+  }
+
+  handleArrowUpKey = () => {
+    if (this.isOpen()) {
+      this.activeMentionIndex =
+        (this.activeMentionIndex + this.latestMentionList.length - 1) % this.latestMentionList.length;
+      this.highlightMentionItem(this.activeMentionIndex);
+      return false;
+    }
+    return true;
+  };
+
+  handleArrowDownKey = () => {
+    if (this.isOpen()) {
+      this.activeMentionIndex = (this.activeMentionIndex + 1) % this.latestMentionList.length;
+      this.highlightMentionItem(this.activeMentionIndex);
+      return false;
+    }
+    return true;
+  };
+
+  handleEnterKey = () => {
+    if (this.isOpen()) {
+      this.selectMentionItem();
+      this.needInsertBr = false;
+    }
+    return true;
+  };
+
+  handleEscapeKey = () => {
+    if (this.isOpen()) {
+      this.hideMentionList();
+      return false;
+    }
+    return true;
+  };
+
+  getActiveMentionItem() {
+    return this.mentionListEL.querySelector(`.${this.options.itemActiveClass}`);
+  }
+
+  isOpen() {
+    return !this.mentionListEL.classList.contains(this.options.listHideClass);
+  }
+
+  async searchMentionListByTerm(term: string) {
+    const mentionList = await this.options.search(term);
+    this.latestMentionList = mentionList;
+    if (!mentionList || mentionList.length === 0) {
+      return this.hideMentionList();
+    }
+
+    this.showMentionList(mentionList);
+  }
+
+  showMentionList(mentionList: any[]) {
+    if (!this.isOpen()) {
+      this.mentionListEL.classList.remove(this.options.listHideClass);
+    }
+    this.activeMentionIndex = 0;
+    this.setMentionListPos();
+    this.render(mentionList);
+  }
+
+  hideMentionList() {
+    if (this.isOpen()) {
+      this.activeMentionIndex = 0;
+      this.mentionListEL.classList.add(this.options.listHideClass);
+    }
+  }
+
+  setMentionListPos() {
+    const cursorIndex = this.quill.selection.savedRange.index;
+    const cursorBounds = this.quill.getBounds(cursorIndex);
+    const { left, top } = cursorBounds;
+    const container = this.quill.container;
+    const hostElement = container.parentNode as HTMLDivElement;
+    const { left: editorLeft, top: editorTop } = container.getBoundingClientRect();
+    const { left: hostElementLeft, top: hostElementTop } = hostElement.getBoundingClientRect();
+    const relativeLeft = editorLeft - hostElementLeft;
+    const relativeTop = editorTop - hostElementTop;
+    const menuLeft = left + relativeLeft - 5;
+    const menuTop = top + relativeTop + 20;
+    this.mentionListEL.style.cssText += `
+      left: ${menuLeft}px;
+      top: ${menuTop}px;
+    `;
+  }
+
+  render(mentionList: any[]) {
+    const wrapEl = document.createElement('div');
+
+    [].forEach.call(mentionList, (mentionItem, index) => {
+      const mentionItemEl = document.createElement('li');
+      mentionItemEl.classList.add(this.options.itemClass);
+      if (index === this.activeMentionIndex) {
+        mentionItemEl.classList.add(this.options.itemActiveClass);
+      }
+      const renderResult = this.options.renderMentionItem(mentionItem);
+      mentionItemEl.insertAdjacentElement('afterbegin', renderResult);
+      wrapEl.appendChild(mentionItemEl);
+    });
+
+    this.mentionListEL.innerHTML = wrapEl.innerHTML;
+  }
+
+  highlightMentionItem(index: number) {
+    const oldActiveItem = this.getActiveMentionItem();
+    if (oldActiveItem) {
+      oldActiveItem.classList.remove(this.options.itemActiveClass);
+    }
+
+    const newActiveItem = this.mentionListEL.querySelector(`.${this.options.itemClass}:nth-of-type(${index + 1})`);
+    if (newActiveItem) {
+      newActiveItem.classList.add(this.options.itemActiveClass);
+      this.scrollIntoView(newActiveItem);
+    }
+  }
+
+  scrollIntoView(node: Element): void {
+    const nodeAsAny: any = node;
+    if (nodeAsAny.scrollIntoViewIfNeeded) {
+      nodeAsAny.scrollIntoViewIfNeeded(false);
+      return;
+    }
+    if (node.scrollIntoView) {
+      node.scrollIntoView(false);
+      return;
+    }
+  }
+
+  selectMentionItem(index = this.activeMentionIndex, isClick?: boolean) {
+    const activeMentionItem = this.latestMentionList[index];
+    this.insertMentionBlot(activeMentionItem, isClick);
+    this.options.select(activeMentionItem);
+    this.hideMentionList();
+  }
+
+  insertMentionBlot(activeMentionItem: any, isClick?: boolean) {
+    const mention = this.options.renderMentionText(activeMentionItem);
+    const delta = new Delta()
+      .retain(this.latestMentionCharPos)
+      .delete(this.latestCaretPos - this.latestMentionCharPos)
+      .insert({
+        [MentionLink.blotName]: {
+          char: this.options.mentionChar,
+          text: mention,
+          mention: activeMentionItem,
+          link: this.options.defaultLink,
+          target: this.options.target,
+          searchKey: this.options.searchKey,
+        },
+      });
+    if (isClick) {
+      this.quill.updateContents(delta, Quill.sources.USER);
+    } else {
+      this.quill.updateContents(delta, Quill.sources.API);
+    }
+    this.quill.setSelection(this.latestMentionCharPos + 1, Quill.sources.API);
+  }
+}
+
+export { Mention as default };
+
diff --git a/packages/fluent-editor/src/mention/MentionLink.ts b/packages/fluent-editor/src/mention/MentionLink.ts
new file mode 100644
index 0000000000..41461323db
--- /dev/null
+++ b/packages/fluent-editor/src/mention/MentionLink.ts
@@ -0,0 +1,49 @@
+import * as Quill from 'quill';
+import { DEFAULT_MENTION_CHAR, MENTION_CHAR, ON_MENTION_LINK_REMOVE } from './constants';
+
+const Embed = Quill.imports['blots/embed'];
+
+// @dynamic
+class MentionLink extends Embed {
+  static blotName: string;
+  static tagName: string;
+  static className: string;
+  scroll: any;
+  mentionData: any;
+
+  static create(data) {
+    const node = super.create(data);
+    node.dataset.mentionId = data.name || (data.mention && data.mention[data.searchKey || 'name']) || '';
+    node.setAttribute('title', data.text);
+    node.setAttribute(MENTION_CHAR, data.char);
+    node.textContent = data.char + data.text;
+    return node;
+  }
+
+  static value(domNode) {
+    const
+      char = domNode.getAttribute(MENTION_CHAR) || DEFAULT_MENTION_CHAR;
+    const text = domNode.getAttribute('title');
+    const name = domNode.dataset.mentionId;
+    return { char, text, name };
+  }
+
+  constructor(scroll, domNode, data) {
+    super(scroll, domNode, data);
+    this.mentionData = data;
+  }
+  value() {
+    // fix: 将@提醒内容加入到 Delta 里，以解决输入空格，@提醒内容被删除的问题
+    // return ' ';
+    return super.value();
+  }
+  remove() {
+    this.scroll.emitter.emit(ON_MENTION_LINK_REMOVE, this.mentionData);
+    return super.remove();
+  }
+}
+
+MentionLink.blotName = 'mention';
+MentionLink.tagName = 'span';
+MentionLink.className = 'ql-mention-link';
+export { MentionLink as default };
diff --git a/packages/fluent-editor/src/mention/constants.ts b/packages/fluent-editor/src/mention/constants.ts
new file mode 100644
index 0000000000..f72fb2aaab
--- /dev/null
+++ b/packages/fluent-editor/src/mention/constants.ts
@@ -0,0 +1,3 @@
+export const ON_MENTION_LINK_REMOVE = 'mention-link/remove';
+export const MENTION_CHAR = 'mentionChar';
+export const DEFAULT_MENTION_CHAR = '@';
diff --git a/packages/fluent-editor/src/quick-menu/index.ts b/packages/fluent-editor/src/quick-menu/index.ts
new file mode 100644
index 0000000000..d85a0963d6
--- /dev/null
+++ b/packages/fluent-editor/src/quick-menu/index.ts
@@ -0,0 +1,100 @@
+import * as Quill from 'quill';
+
+interface QuickMenuOptions {
+  container: string;
+  component: any;
+}
+
+class QuickMenu {
+  private container: HTMLDivElement;
+  private hostElement: HTMLDivElement;
+  private quickMenu: HTMLDivElement;
+  private quickMenuContainer: HTMLDivElement;
+  
+// @ts-ignore
+  constructor(private quill: Quill, private options: QuickMenuOptions) {
+    this.quill = quill;
+    this.options = options;
+    this.container = this.quill.container;
+    this.hostElement = this.container.parentNode as HTMLDivElement;
+    this.quickMenu = this.hostElement.querySelector('.quick-menu');
+    this.quickMenuContainer = this.quickMenu.querySelector('.quick-menu-container');
+    quill.keyboard.addBinding({key: '/'}, this.handleSlashKeyDown);
+    quill.keyboard.addBinding({key: 'ArrowUp'}, this.handleArrowUpKey);
+    quill.keyboard.addBinding({key: 'ArrowDown'}, this.handleArrowDownKey);
+    quill.keyboard.addBinding({key: 'Enter'}, this.handleEnterKey);
+    quill.keyboard.bindings['Enter'].unshift(quill.keyboard.bindings['Enter'].pop());
+    document.body.addEventListener('click', this.hideQuickMenu.bind(this));
+  }
+
+  handleSlashKeyDown = (range, context) => {
+    const index = this.quill.selection.savedRange.index;
+    this.quill.insertText(index, '/');
+
+    // 一行的第一个字符为 '/'，且没有格式化，则触发快捷菜单
+    const shouldTriggerQuickMenu = context.prefix === '' && Object.keys(context.format).length === 0;
+    if (shouldTriggerQuickMenu) {
+      const cursorIndex = this.quill.selection.savedRange.index;
+      const cursorBounds = this.quill.getBounds(cursorIndex);
+      const {left, top} = cursorBounds;
+      const {left: editorLeft, top: editorTop} = this.container.getBoundingClientRect();
+      const {left: hostElementLeft, top: hostElementTop} = this.hostElement.getBoundingClientRect();
+      const relativeLeft = editorLeft - hostElementLeft;
+      const relativeTop = editorTop - hostElementTop;
+      const menuLeft = left + relativeLeft - 5;
+      const menuTop = top + relativeTop + 20;
+
+      this.quickMenu.style.display = 'block';
+      const zIndex = this.quill.options.modules.quickmenu.zIndex;
+      let style = `left:${menuLeft}px;top:${menuTop}px;`;
+      if (zIndex || zIndex === 0) {
+        style += `z-index:${zIndex}`;
+      }
+      this.quickMenuContainer.setAttribute('style', style);
+      this.options.component.activeIndex = 0;
+    } else {
+      this.quickMenu.style.display = 'none';
+    }
+  };
+
+  private isOpen() {
+    return this.quickMenuContainer.style.display !== 'none' && this.quickMenu.style.display === 'block';
+  }
+
+  hideQuickMenu = (event) => {
+    if (this.quickMenuContainer && !this.quickMenuContainer.contains(event.target)) {
+      this.quickMenuContainer.style.display = 'none';
+    }
+  };
+
+  handleArrowUpKey = (range, context) => {
+    if (this.isOpen()) {
+      const index = this.options.component.activeIndex;
+      const total = this.options.component.quickMenus.length;
+      this.options.component.activeIndex = (index + total - 1) % total;
+      return false;
+    }
+    return true;
+  };
+
+  handleArrowDownKey = (range, context) => {
+    if (this.isOpen()) {
+      const index = this.options.component.activeIndex;
+      const total = this.options.component.quickMenus.length;
+      this.options.component.activeIndex = (index + 1) % total;
+      return false;
+    }
+    return true;
+  };
+
+  handleEnterKey = (range, context) => {
+    if (this.isOpen()) {
+      this.options.component.onEnter();
+      return false;
+    }
+    return true;
+  };
+
+}
+
+export default QuickMenu;
diff --git a/packages/fluent-editor/src/screenshot/index.ts b/packages/fluent-editor/src/screenshot/index.ts
new file mode 100644
index 0000000000..48cfc19177
--- /dev/null
+++ b/packages/fluent-editor/src/screenshot/index.ts
@@ -0,0 +1,162 @@
+
+import * as Quill from 'quill';
+import Html2Canvas from 'html2canvas';
+import { isPureIE } from '../config/editor.utils';
+
+const Delta = Quill.imports['delta'];
+const Module = Quill.imports['core/module'];
+
+class Screenshot extends Module {
+  quill: any;
+  range: any;
+  cutter: HTMLDivElement;
+  mask: HTMLDivElement;
+  coordinate: HTMLDivElement;
+  width: number;
+  height: number;
+  leftClickLockFlag = false;
+  start: {
+    x: number;
+    y: number;
+  };
+
+  constructor(quill, options, range) {
+    super(quill, options);
+    this.quill = quill;
+    this.range = range;
+  }
+
+  init() {
+    const maskExits = document.querySelectorAll('.ql-screenshot-mask');
+    if (maskExits) {
+      maskExits.forEach(item => item && item.remove());
+    }
+    // 创建截图图层
+    this.mask = document.createElement('div');
+    this.mask.className = 'ql-screenshot-mask';
+    this.cutter = document.createElement('div');
+    this.cutter.className = 'ql-screenshot-cutter';
+    this.coordinate = document.createElement('p');
+    this.coordinate.className = 'ql-screenshot-coordinate';
+    this.insertBlock();
+    this.cutter.appendChild(this.coordinate);
+    this.mask.appendChild(this.cutter);
+    document.body.appendChild(this.mask);
+    document.addEventListener('mousedown', this.toggleRect);
+  }
+
+  insertBlock() {
+    for (let i = 0; i < 7; i++) {
+      const blockItem = document.createElement('div');
+      blockItem.className = 'ql-screenshot-border-block';
+      this.cutter.appendChild(blockItem);
+    }
+  }
+
+  removeContextmenu = (event) => {
+    event.preventDefault();
+    this.mask.remove();
+    document.removeEventListener('contextmenu', this.removeContextmenu);
+  };
+
+  toggleRect = (event: MouseEvent) => {
+    // 右键取消截图操作
+    if (event.button === 2) {
+      document.removeEventListener('mousemove', this.drawRect);
+      document.removeEventListener('mousedown', this.toggleRect);
+      document.addEventListener('contextmenu', this.removeContextmenu);
+      return;
+    }
+    if (!this.leftClickLockFlag) {
+      if (this.start) {
+        // 如果有起点，则当前触发坐标为终点，移除监听事件并添加确认和取消按钮
+        document.removeEventListener('mousemove', this.drawRect);
+        const doneBtn = document.createElement('div');
+        doneBtn.innerHTML = `<span class="ql-screenshot-ok"></span><span class="ql-screenshot-cancel"></span>`;
+        doneBtn.className = 'ql-screenshot-done';
+        doneBtn.addEventListener('click', this.afterShotCtrl);
+        this.coordinate.remove();
+        this.cutter.appendChild(doneBtn);
+        this.leftClickLockFlag = true;
+      } else {
+        // 无起点则设置起点坐标，监听鼠标移动
+        this.start = { x: event.clientX, y: event.clientY };
+        this.cutter.style.left = `${this.start.x}px`;
+        this.cutter.style.top = `${this.start.y}px`;
+        document.addEventListener('mousemove', this.drawRect);
+      }
+    }
+  };
+
+  drawRect = (event: MouseEvent) => {
+    // 通过鼠标移动描绘截图图层
+    this.width = event.clientX - this.start.x;
+    this.height = event.clientY - this.start.y;
+    this.cutter.style.width = `${this.width}px`;
+    this.cutter.style.height = `${this.height}px`;
+    this.coordinate.innerHTML = `${this.width}<br>${this.height}`;
+  };
+
+  afterShotCtrl = (event) => {
+    document.removeEventListener('mousedown', this.toggleRect);
+    this.mask.remove();
+    const target = event.target;
+    if (target && target.className === 'ql-screenshot-ok') {
+      const rect = {
+        x: this.start.x,
+        y: this.start.y,
+        width: this.width,
+        height: this.height,
+        scrollX: document.body.scrollLeft,
+        scrollY: document.body.scrollTop,
+        allowTaint: true, // 是否允许跨域图片渲染
+        logging: false, // 是否启用日志记录
+      };
+      this.renderImage(rect);
+    }
+    this.start = undefined;
+  };
+
+  renderImage(rect) {
+    if (isPureIE) {
+      Html2Canvas(document.body, rect).then(canvas => this.insertEditor(canvas));
+    } else {
+      Html2Canvas(document.body, {
+        allowTaint: true, // 是否允许跨域图片渲染
+        foreignObjectRendering: this.quill.options.screenshotOnStaticPage, // 是否使用svg方式
+        logging: false, // 是否启用日志记录
+      }).then((canvas) => {
+        // 当前canvas为body全局截图，从当前截图中截取想要的部分重新绘制转成base64插入富文本
+        const cropCanvas = document.createElement('canvas');
+        cropCanvas.width = this.width;
+        cropCanvas.height = this.height;
+        const cropCanvasCtx = cropCanvas.getContext('2d');
+        cropCanvasCtx.drawImage(
+          canvas,
+          rect.x + window.scrollX,
+          rect.y + window.scrollY,
+          this.width,
+          this.height,
+          0,
+          0,
+          this.width,
+          this.height
+        );
+        this.insertEditor(cropCanvas);
+        cropCanvas.remove();
+      });
+    }
+  }
+
+  insertEditor(canvas) {
+    const image = canvas.toDataURL();
+    const delta = new Delta()
+      .retain(this.range.index)
+      .delete(this.range.length)
+      .insert({ image });
+    this.quill.updateContents(delta, Quill.sources.USER);
+    this.quill.setSelection(this.range.index + 1, Quill.sources.SILENT);
+  }
+}
+
+export default Screenshot;
diff --git a/packages/fluent-editor/src/soft-break/index.ts b/packages/fluent-editor/src/soft-break/index.ts
new file mode 100644
index 0000000000..5c8f9454f5
--- /dev/null
+++ b/packages/fluent-editor/src/soft-break/index.ts
@@ -0,0 +1,34 @@
+import * as Quill from 'quill';
+
+const Embed = Quill.imports['blots/embed'];
+
+class SoftBreak extends Embed {
+  static blotName: string;
+  static tagName: string;
+  static className: string;
+  domNode: any;
+  prev: any;
+  next: any;
+  remove: () => {};
+
+  static create() {
+    const node = super.create();
+    return node;
+  }
+
+  optimize() {
+    // li的开头结尾，移除软回车
+    if (this.prev === null) {
+      this.remove();
+    }
+  }
+
+  length() {
+    return 1;
+  }
+}
+SoftBreak.blotName = 'soft-break';
+SoftBreak.tagName = 'BR';
+SoftBreak.className = 'ql-soft-break';
+
+export default SoftBreak;
diff --git a/packages/fluent-editor/src/strike/index.ts b/packages/fluent-editor/src/strike/index.ts
new file mode 100644
index 0000000000..3f78d53ab5
--- /dev/null
+++ b/packages/fluent-editor/src/strike/index.ts
@@ -0,0 +1,15 @@
+import * as Quill from 'quill';
+const Inline = Quill.imports['blots/inline'];
+
+// @dynamic
+class StrikeBlot extends Inline {
+  static blotName: string;
+  static className: string;
+  static tagName: string;
+  // 此处删除了formats方法，当前tag非span，则并不需要进行特殊处理去重写formats方法
+}
+StrikeBlot.blotName = 'strike';
+StrikeBlot.tagName = 'u';
+StrikeBlot.className = 'ql-custom-strike';
+
+export default StrikeBlot;
diff --git a/packages/fluent-editor/src/styles.scss b/packages/fluent-editor/src/styles.scss
new file mode 100644
index 0000000000..b8aabba45c
--- /dev/null
+++ b/packages/fluent-editor/src/styles.scss
@@ -0,0 +1,36 @@
+@font-face {
+    font-family: "iconfont"; /* Project id 3231649 */
+    src: url('./assets/iconfont/iconfont.woff2') format('woff2'),
+         url('./assets/iconfont/iconfont.woff') format('woff'),
+         url('./assets/iconfont/iconfont.ttf') format('truetype');
+}
+@import 'quill/dist/quill.snow';
+
+@import './assets/common';
+@import './assets/mention';
+@import './assets/editor';
+@import './assets/counter';
+@import './assets/size';
+@import './assets/font';
+@import './assets/lineHeight';
+@import './assets/better-table';
+@import './assets/custom-image';
+@import './assets/fileBar';
+@import './assets/link';
+@import './assets/fullscreen';
+
+// 模块：字数统计 counter
+@include counter;
+
+// 模块：@提醒 mention
+@include mention;
+
+// 模块：工具栏 toolbar
+// @include toolbar;  会导致样式完全混乱
+
+// @include lineHeightList;
+
+// 图片预览
+@include imagePreview;
+
+@include fontFamilyContent;
\ No newline at end of file
diff --git a/packages/fluent-editor/src/syntax/index.ts b/packages/fluent-editor/src/syntax/index.ts
new file mode 100644
index 0000000000..a0bae7cf05
--- /dev/null
+++ b/packages/fluent-editor/src/syntax/index.ts
@@ -0,0 +1,35 @@
+import * as Quill from 'quill';
+import * as hljs from 'highlight.js';
+
+const Syntax = Quill.imports['modules/syntax'];
+
+// @dynamic
+class CustomSyntax extends Syntax {
+  static DEFAULTS: { hljs: any; interval: number; languages: { key: string; label: string }[] };
+  initListener() {
+    // fix: initListener方法写了代码块高亮下拉框的逻辑，重写该方法，屏蔽代码块高亮
+  }
+}
+
+CustomSyntax.DEFAULTS = {
+  hljs,
+  interval: 1000,
+  languages: [
+    { key: 'plain', label: 'Plain' },
+    { key: 'bash', label: 'Bash' },
+    { key: 'cpp', label: 'C++' },
+    { key: 'cs', label: 'C#' },
+    { key: 'css', label: 'CSS' },
+    { key: 'diff', label: 'Diff' },
+    { key: 'xml', label: 'HTML/XML' },
+    { key: 'java', label: 'Java' },
+    { key: 'javascript', label: 'Javascript' },
+    { key: 'markdown', label: 'Markdown' },
+    { key: 'php', label: 'PHP' },
+    { key: 'python', label: 'Python' },
+    { key: 'ruby', label: 'Ruby' },
+    { key: 'sql', label: 'SQL' },
+  ],
+};
+
+export default CustomSyntax;
diff --git a/packages/fluent-editor/src/table/better-table.ts b/packages/fluent-editor/src/table/better-table.ts
new file mode 100644
index 0000000000..4d419d63aa
--- /dev/null
+++ b/packages/fluent-editor/src/table/better-table.ts
@@ -0,0 +1,531 @@
+import * as Quill from 'quill';
+import {
+  getEventComposedPath,
+  insideTable,
+  isNullOrUndefined,
+  isPureIE
+} from '../config/editor.utils';
+import Header from './formats/header';
+import List from './formats/list';
+import {
+  cellId,
+  rowId,
+  TableBody,
+  TableCell,
+  TableCellLine,
+  TableCol,
+  TableColGroup,
+  TableContainer,
+  TableRow,
+  TableViewWrapper
+} from './formats/table';
+import TableColumnTool from './modules/table-column-tool';
+import TableOperationMenu from './modules/table-operation-menu';
+import TableScrollBar from './modules/table-scroll-bar';
+import TableSelection from './modules/table-selection';
+// import table node matchers
+import {
+  matchHeader,
+  matchInline,
+  matchList,
+  matchMentionLink,
+  matchTable,
+  matchTableCell,
+  matchTableHeader,
+  matchTableRow,
+  matchWordShapeImage
+} from './utils/node-matchers';
+
+const Block = Quill.imports['blots/block'];
+const Delta = Quill.imports['delta'];
+const Module = Quill.imports['core/module'];
+
+// @dynamic
+class BetterTable extends Module {
+  static keyboardBindings: any;
+  isComposition: boolean;
+  quill: any;
+  table: any;
+  modulesContainer: any;
+  tableSelection: any;
+  subscriber: any;
+  tableOperationMenu: any;
+  columnTool: TableColumnTool;
+  tableScrollBar: TableScrollBar;
+
+  static register() {
+    Quill.register(TableCol, true);
+    Quill.register(TableColGroup, true);
+    Quill.register(TableCellLine, true);
+    Quill.register(TableCell, true);
+    Quill.register(TableRow, true);
+    Quill.register(TableBody, true);
+    Quill.register(TableContainer, true);
+    Quill.register(TableViewWrapper, true);
+    // register customized Header, overwriting quill built-in Header
+    Quill.register('formats/header', Header, true);
+    // register customized List, overwriting quill built-in Header
+    Quill.register('formats/list', List, true);
+  }
+
+  constructor(quill, options) {
+    super(quill, options);
+
+    // handle click on quill-better-table
+    this.isComposition = false;
+    this.quill.root.addEventListener('mousedown', event => this.handleMouseDown(event, quill), false);
+    this.quill.root.addEventListener('compositionend', () => this.handleCompositionend(quill), false);
+    this.quill.root.addEventListener('compositionstart', () => this.handleCompositionstart(quill), false);
+    this.quill.root.addEventListener('keypress', event => this.handleKeyDown(event, quill), false);
+
+    // handle right click on quill-better-table
+    this.quill.root.addEventListener(
+      'contextmenu',
+      evt => {
+        if (!this.table) { return true; }
+        evt.preventDefault();
+
+        // bugfix: evt.path is undefined in Safari, FF, Micro Edge
+        const path = getEventComposedPath(evt);
+        if (!path || path.length <= 0) { return; }
+
+        const tableNode = path.filter(node => {
+          return (
+            node.tagName && node.tagName.toUpperCase() === 'TABLE' && node.classList.contains('quill-better-table')
+          );
+        })[0];
+
+        const rowNode = path.filter(node => {
+          return node.tagName && node.tagName.toUpperCase() === 'TR' && node.getAttribute('data-row');
+        })[0];
+
+        const cellNode = path.filter(node => {
+          return node.tagName && node.tagName.toUpperCase() === 'TD' && node.getAttribute('data-row');
+        })[0];
+
+        const isTargetCellSelected = this.tableSelection.selectedTds
+          .map(tableCell => tableCell.domNode)
+          .includes(cellNode);
+
+        if (this.tableSelection.selectedTds.length <= 0 || !isTargetCellSelected) {
+          this.tableSelection.setSelection(cellNode.getBoundingClientRect(), cellNode.getBoundingClientRect());
+        }
+
+        if (this.tableOperationMenu) { this.tableOperationMenu = this.tableOperationMenu.destroy(); }
+
+        if (tableNode) {
+          this.tableOperationMenu = new TableOperationMenu(
+            {
+              table: tableNode,
+              row: rowNode,
+              cell: cellNode,
+              left: evt.x + 15,
+              top: evt.y
+            },
+            quill,
+            options.operationMenu
+          );
+        }
+      },
+      false
+    );
+
+    // add keyboard binding：Backspace
+    // prevent user hits backspace to delete table cell
+    quill.keyboard.addBinding({ key: 'Backspace' }, {}, (range, context) => {
+      if (range.index === 0 || this.quill.getLength() <= 1) { return true; }
+      if (context.offset === 0 && range.length === 0) {
+        const [prev] = this.quill.getLine(range.index - 1);
+        const [line] = this.quill.getLine(range.index);
+        if (!isNullOrUndefined(prev)) {
+          if (prev.statics.blotName === 'table-cell-line' && line.statics.blotName !== 'table-cell-line') {
+            const betterTableModule = this.quill.getModule('better-table');
+            let tableBlot;
+            try {
+              tableBlot = prev.parent.parent.parent.parent;
+            } catch (e) { }
+            if (tableBlot && tableBlot.domNode !== betterTableModule.table) {
+              betterTableModule.hideTableTools();
+              tableBlot.remove();
+              this.quill.update(Quill.sources.USER);
+            }
+            return false;
+          }
+        }
+      }
+      return true;
+    });
+    // since only one matched bindings callback will execute.
+    // expected my binding callback execute first
+    // I changed the order of binding callbacks
+    const thisBinding = quill.keyboard.bindings['Backspace'].pop();
+    quill.keyboard.bindings['Backspace'].splice(1, 0, thisBinding);
+
+    // add Matchers to match and render quill-better-table for initialization
+    // or pasting
+    quill.clipboard.addMatcher('td', matchTableCell);
+    quill.clipboard.addMatcher('th', matchTableHeader);
+    quill.clipboard.addMatcher('table', matchTable);
+    quill.clipboard.addMatcher('h1, h2, h3, h4, h5, h6', matchHeader);
+    quill.clipboard.addMatcher('ol, ul', matchList);
+    quill.clipboard.addMatcher('span', matchMentionLink);
+    quill.clipboard.addMatcher('v:imageData', matchWordShapeImage);
+    quill.clipboard.addMatcher(Node.ELEMENT_NODE, matchInline);
+
+    // remove matcher for tr tag
+    quill.clipboard.matchers = quill.clipboard.matchers.filter(matcher => {
+      return matcher[0] !== 'tr';
+    });
+
+    // fix: 处理空<tr>标签被忽略的情况
+    quill.clipboard.addMatcher('tr', matchTableRow);
+
+    this.quill.on('editor-change', () => {
+      const tableContainer = Quill.find(this.table);
+      if (!tableContainer) { this.hideTableTools(); }
+    });
+
+    this.quill.on(Quill.events.SELECTION_CHANGE, (range, oldRange, source) => {
+      if (!range) { return; }
+      const selectionStart = range.index;
+      const selectionEnd = range.index + range.length;
+      if (source === Quill.sources.USER) {
+        const tables = this.quill.root.getElementsByTagName('table');
+        if (tables && tables.length) {
+          [].forEach.call(tables, table => {
+            const tableContainer = Quill.find(table);
+            if (tableContainer) {
+              const tableStart = tableContainer.offset(this.quill.scroll);
+              const tableEnd = tableStart + tableContainer.length();
+              // @ts-ignore
+              const classes = Array.from(table.parentNode.classList);
+
+              if (selectionStart <= tableStart && tableEnd <= selectionEnd) {
+                // @ts-ignore
+                table.parentNode.classList.add('quill-better-table-selected');
+              } else if (classes.indexOf('quill-better-table-selected') >= 0) {
+                // @ts-ignore
+                table.parentNode.classList.remove('quill-better-table-selected');
+              }
+            }
+          });
+        }
+      }
+    });
+  }
+
+  handleMouseDown(evt, quill) {
+    // bugfix: evt.path is undefined in Safari, FF, Micro Edge
+    const path = getEventComposedPath(evt);
+    if (!path || path.length <= 0) { return; }
+    const tableNode = path.filter(node => {
+      return node.tagName && node.tagName.toUpperCase() === 'TABLE' && node.classList.contains('quill-better-table');
+    })[0];
+    if (tableNode) {
+      tableNode.parentNode.classList.remove('quill-better-table-selected');
+      // current table clicked
+      if (this.table === tableNode) { return; }
+      // other table clicked
+      if (this.table) { this.hideTableTools(); }
+      if (!quill.options.readOnly) {// not show table tool in readonly mode
+        this.showTableTools(tableNode, quill);
+      }
+    } else if (this.table) {
+      // other clicked
+      this.hideTableTools();
+    }
+  }
+
+  handleKeyDown(evt, quill) {
+    const key = evt.key;
+    const range = quill.getSelection();
+    if (this.isComposition || !range) { return; }
+    const [col] = quill.getLine(range.index);
+    const [td] = quill.getLine(range.index - 1);
+    if (key && key !== 'Delete' && col && range) {
+      if (col.statics.blotName === 'table-col') {
+        const betterTableModule = this.quill.getModule('better-table');
+        betterTableModule.hideTableTools();
+        quill.insertText(range.index - 1, '\n', Quill.sources.USER);
+        quill.setSelection(range.index, 0, Quill.sources.USER);
+      } else if (td && td.statics.blotName === 'table-cell-line' && col.statics.blotName === 'block') {
+        quill.insertText(range.index, '\n', Quill.sources.USER);
+        quill.setSelection(range.index, 0, Quill.sources.USER);
+      }
+    }
+  }
+
+  handleCompositionstart(quill) {
+    this.isComposition = true;
+    const range = quill.getSelection();
+    const [col] = quill.getLine(range.index);
+    const [td] = quill.getLine(range.index - 1);
+    if (col && range) {
+      if (col.statics.blotName === 'table-col') {
+        const betterTableModule = this.quill.getModule('better-table');
+        betterTableModule.hideTableTools();
+        quill.insertText(range.index - 1, '\n\t', Quill.sources.USER);
+        quill.setSelection(range.index, 0, Quill.sources.USER);
+      } else if (td && td.statics.blotName === 'table-cell-line' && col.statics.blotName === 'block') {
+        quill.setSelection(range.index, 0, Quill.sources.USER);
+      }
+    }
+  }
+
+  handleCompositionend(quill) {
+    // fix: 解决在空行行首用中文输入法输入字符，然后按退格导致插入多余空行的问题
+    const range = quill.getSelection();
+    const [line] = quill.getLine(range.index);
+    const domNode = line.domNode;
+    const isInParagraph = domNode.nodeName === 'P';
+    const isInTableCell = line.statics.blotName === 'table-cell-line';
+    if ((isInParagraph || isInTableCell) &&
+      domNode.childNodes.length > 1 &&
+      domNode.childNodes[0].nodeName === 'BR') {
+      domNode.childNodes[0].remove();
+    }
+
+    if (isPureIE && line instanceof Block) {
+      // 设置光标位置防止跳入下一行
+      quill.setSelection(range.index, 0, Quill.sources.SILENT);
+    }
+
+    this.isComposition = false;
+  }
+
+  getTable(range = this.quill.getSelection()) {
+    if (isNullOrUndefined(range)) { return [null, null, null, -1]; }
+    const [cellLine, offset] = this.quill.getLine(range.index);
+    if (isNullOrUndefined(cellLine) || cellLine.statics.blotName !== TableCellLine.blotName) {
+      return [null, null, null, -1];
+    }
+    const cell = cellLine.tableCell();
+    const row = cell.row();
+    const table = row.table();
+    return [table, row, cell, offset];
+  }
+
+  insertTable(rows, columns) {
+    const range = this.quill.getSelection(true);
+    const isInsideTable = insideTable(range, this.quill);
+    if (isNullOrUndefined(range) || isInsideTable) { return; }
+    // let currentBlot = this.quill.getLeaf(range.index)[0]
+    // let nextBlot = this.quill.getLeaf(range.index + 1)[0]
+    let delta = new Delta().retain(range.index);
+
+    delta.insert('\n');
+    // insert table column
+    delta = new Array(columns).fill('\n').reduce((memo, text) => {
+      memo.insert(text, { 'table-col': true });
+      return memo;
+    }, delta);
+    // insert table cell line with empty line
+    delta = new Array(rows).fill(0).reduce(memo => {
+      const tableRowId = rowId();
+      return new Array(columns).fill('\n').reduce((op, text) => {
+        op.insert(text, { 'table-cell-line': { row: tableRowId, cell: cellId() } });
+        return op;
+      }, memo);
+    }, delta);
+
+    const [col] = this.quill.getLine(range.index);
+    if (col && col.statics.blotName === 'table-col') {
+      delta.insert('\n');
+    }
+
+    this.quill.updateContents(delta, Quill.sources.USER);
+
+    // feature: 新增表格后首格自动激活编辑状态，initEvent兼容IE
+    const [cellLine] = this.quill.getLine(range.index + columns + 1);
+    if (cellLine) {
+      const cell = cellLine.tableCell();
+      const td = cell.domNode;
+      const mousedownEvent = document.createEvent('MouseEvent');
+      const mouseupEvent = document.createEvent('MouseEvent');
+      const keyEvent = document.createEvent('Event');
+      mousedownEvent.initEvent('mousedown', true, false);
+      mouseupEvent.initEvent('mouseup', true, false);
+      keyEvent.initEvent('keypress', true, false);
+      td.dispatchEvent(mousedownEvent);
+      td.dispatchEvent(mouseupEvent);
+      td.dispatchEvent(keyEvent);
+      this.tableSelection.endTd = td;
+    }
+  }
+
+  showTableTools(table, quill) {
+    this.table = table;
+    this.modulesContainer = document.createElement('div');
+    this.modulesContainer.classList.add('qlbt-modules-container');
+    // fix:表格容器插入时获取ql-tooltip容器，用insertBefore插入到它前面，避免遮挡链接浮窗
+    const linkContainer = this.quill.root.parentNode.querySelector('.ql-tooltip ');
+    this.quill.root.parentNode.insertBefore(this.modulesContainer, linkContainer);
+    this.tableSelection = new TableSelection(table, quill, this.modulesContainer);
+    this.columnTool = new TableColumnTool(table, quill, this.modulesContainer);
+    this.tableScrollBar = new TableScrollBar(table, quill, this.modulesContainer);
+    let timeoutID
+    this.subscriber = () => { 
+      clearTimeout(timeoutID)
+      timeoutID = setTimeout(this.hideTableTools,300)
+     }
+    window.addEventListener('resize', this.subscriber, false)
+  }
+
+  hideTableTools() {
+    if (this.columnTool) { this.columnTool.destroy(); }
+    if (this.tableSelection) { this.tableSelection.destroy(); }
+    if (this.tableOperationMenu) { this.tableOperationMenu.destroy(); }
+    if (this.tableScrollBar) { this.tableScrollBar.destroy(); }
+    if (this.modulesContainer) { this.modulesContainer.remove(); }
+    this.columnTool = null;
+    this.tableSelection = null;
+    this.tableOperationMenu = null;
+    this.tableScrollBar = null;
+    this.modulesContainer = null;
+    this.table = null;
+    if (this.subscriber) {
+      window.removeEventListener('resize', this.subscriber)
+    }
+  }
+}
+
+BetterTable.keyboardBindings = {
+  'line delete': {
+    key: 'Delete',
+    shiftKey: null,
+    format: { 'table-col': false, 'table-cell-line': false },
+    collapsed: true,
+    offset: 0,
+    handler(range, context) {
+      // fix: 当光标在编辑器最前且之后为表格时按delete不执行操作
+      if (range.index === 0 && context.line.next && context.line.next.statics.blotName === 'table-view') {
+        const [p] = this.quill.getLine(range.index - 1);
+        const [col] = this.quill.getLine(range.index + 1);
+        if (p && p.statics.blotName === 'block' && col && col.statics.blotName === 'table-col') {
+          return false;
+        }
+      }
+      return true;
+    }
+  },
+  'table-col enter': {
+    key: 'Enter',
+    shiftKey: null,
+    format: ['table-col'],
+    collapsed: true,
+    offset: 0,
+    handler(range, context) {
+      if (context.offset === 0 && range.length === 0) {
+        const [col] = this.quill.getLine(range.index);
+        if (col && col.statics.blotName === 'table-col') {
+          const betterTableModule = this.quill.getModule('better-table');
+          betterTableModule.hideTableTools();
+          this.quill.insertText(range.index - 1, '\n', Quill.sources.USER);
+          this.quill.setSelection(range.index, 0, Quill.sources.USER);
+        }
+      }
+    }
+  },
+  'table-col delete': {
+    key: 'Delete',
+    shiftKey: null,
+    format: ['table-col'],
+    collapsed: true,
+    offset: 0,
+    handler(range, context) {
+      if (context.offset === 0 && range.length === 0) {
+        const [col] = this.quill.getLine(range.index);
+        if (col && col.statics.blotName === 'table-col') {
+          const betterTableModule = this.quill.getModule('better-table');
+          let tableBlot;
+          try {
+            tableBlot = col.parent.parent.parent;
+          } catch (e) { }
+          if (tableBlot && tableBlot.domNode !== betterTableModule.table) {
+            betterTableModule.hideTableTools();
+            tableBlot.remove();
+            this.quill.update(Quill.sources.USER);
+          }
+        }
+      }
+    }
+  },
+  'table-col backspace': {
+    key: 'Backspace',
+    shiftKey: null,
+    format: ['table-col'],
+    collapsed: true,
+    offset: 0,
+    handler() { }
+  },
+  'table-cell-line backspace': {
+    key: 'Backspace',
+    format: ['table-cell-line'],
+    collapsed: true,
+    offset: 0,
+    handler(range) {
+      const [line] = this.quill.getLine(range.index);
+      // 移除原有对非table-cell-line的阻止条件，使table-cell-line前的list等内容可以被删除
+      if (!line.prev) {
+        return false;
+      }
+      return true;
+    }
+  },
+  'table-cell-line delete': {
+    key: 'Delete',
+    format: ['table-cell-line'],
+    handler(range, context) {
+      // 获取table-cell-line的索引和长度
+      const [line] = this.quill.getLine(range.index);
+      const index = this.quill.getIndex(line);
+      const length = line.length();
+      if (!line.next && // 当无下一个元素且满足以下情况阻止删除操作
+        ((!line.prev && length === 1) || // 单元格内只有一个table-cell-line且无内容
+          (range.index !== index && range.index + 1 >= index + length))) {// 光标在有内容的table-cell-line最后
+        return false;
+      }
+      return true;
+    }
+  },
+  'table-cell-line enter': {
+    key: 'Enter',
+    shiftKey: null,
+    format: ['table-cell-line'],
+    handler(range, context) {
+      // fix：通过window的光标选区当前指向判断，如果为HTMLElement且为表格容器则定位至下一行
+      const node = window.getSelection().anchorNode;
+      if (node instanceof HTMLDivElement && node.classList.contains('quill-better-table-wrapper')) {
+        this.quill.setSelection(range.index + 1, 0, Quill.sources.USER);
+        this.quill.focus();
+        return;
+      }
+      // bugfix: a unexpected new line inserted when user compositionend with hitting Enter
+      if (this.quill.selection && this.quill.selection.composing) { return; }
+      const Scope = Quill.imports.parchment.Scope;
+      if (range.length > 0) {
+        this.quill.scroll.deleteAt(range.index, range.length); // So we do not trigger text-change
+      }
+      const lineFormats = Object.keys(context.format).reduce((formats, format) => {
+        if (this.quill.scroll.query(format, Scope.BLOCK) && !Array.isArray(context.format[format])) {
+          formats[format] = context.format[format];
+        }
+        return formats;
+      }, {});
+      // insert new cellLine with lineFormats
+      this.quill.insertText(range.index, '\n', lineFormats['table-cell-line'], Quill.sources.USER);
+      // Earlier scroll.deleteAt might have messed up our selection,
+      // so insertText's built in selection preservation is not reliable
+      this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
+      this.quill.focus();
+      Object.keys(context.format).forEach(name => {
+        if (!isNullOrUndefined(lineFormats[name])) { return; }
+        if (Array.isArray(context.format[name])) { return; }
+        if (name === 'link') { return; }
+        this.quill.format(name, context.format[name], Quill.sources.USER);
+      });
+    }
+  }
+};
+
+export default BetterTable;
diff --git a/packages/fluent-editor/src/table/formats/header.ts b/packages/fluent-editor/src/table/formats/header.ts
new file mode 100644
index 0000000000..21632716d6
--- /dev/null
+++ b/packages/fluent-editor/src/table/formats/header.ts
@@ -0,0 +1,121 @@
+import * as Quill from 'quill';
+import { isNullOrUndefined } from '../../config/editor.utils';
+import { CELL_ATTRIBUTES, CELL_IDENTITY_KEYS } from '../table-config';
+
+const Block = Quill.imports['blots/block'];
+
+// @dynamic
+class Header extends Block {
+  static tagName: any;
+  static blotName: string;
+  domNode: any;
+  replaceWith: any;
+  parent: any;
+  wrap: any;
+  enforceAllowedChildren: any;
+  uiNode: any;
+  children: any;
+  statics: any;
+  appendChild: any;
+  remove: any;
+  cache: {};
+  scroll: any;
+  static create(value) {
+    if (typeof value === 'string') {
+      value = { value };
+    }
+
+    const node = super.create(value.value);
+
+    CELL_IDENTITY_KEYS.forEach(key => {
+      if (value[key]) { node.setAttribute(`data-${key}`, value[key]); }
+    });
+
+    CELL_ATTRIBUTES.forEach(key => {
+      if (value[key]) { node.setAttribute(`data-${key}`, value[key]); }
+    });
+
+    return node;
+  }
+
+  static formats(domNode) {
+    const formats: any = {};
+    formats.value = this.tagName.indexOf(domNode.tagName) + 1;
+
+    return CELL_ATTRIBUTES.concat(CELL_IDENTITY_KEYS).reduce((tableFormats, attribute) => {
+      if (domNode.hasAttribute(`data-${attribute}`)) {
+        tableFormats[attribute] = domNode.getAttribute(`data-${attribute}`) || undefined;
+      }
+      return tableFormats;
+    }, formats);
+  }
+
+  format(name, value) {
+    // fix: 在标题处粘贴内容，会导致该粘贴内容的格式错误
+    if (Object.prototype.toString.call(value) === '[object Object]') {
+      value = value.value;
+    }
+    const headerDom: any = Header.formats(this.domNode);
+    const { row, cell, rowspan, colspan } = headerDom;
+    if (name === Header.blotName) {
+      if (value) {
+        super.format(name, {
+          value,
+          row,
+          cell,
+          rowspan,
+          colspan
+        });
+      } else {
+        if (row) {
+          this.replaceWith('table-cell-line', {
+            row,
+            cell,
+            rowspan,
+            colspan
+          });
+        } else {
+          super.format(name, value);
+        }
+      }
+    } else {
+      super.format(name, value);
+    }
+  }
+
+  optimize(context) {
+    const { row, cell, rowspan, colspan } = Header.formats(this.domNode);
+
+    if (row && this.parent.statics.blotName !== 'table') {
+      this.wrap('table', {
+        row,
+        cell,
+        colspan,
+        rowspan
+      });
+    }
+
+    // ShadowBlot optimize
+    this.enforceAllowedChildren();
+    if (!isNullOrUndefined(this.uiNode) && this.uiNode !== this.domNode.firstChild) {
+      this.domNode.insertBefore(this.uiNode, this.domNode.firstChild);
+    }
+    if (this.children.length === 0) {
+      if (!isNullOrUndefined(this.statics.defaultChild)) {
+        const child = this.scroll.create(this.statics.defaultChild.blotName);
+        this.appendChild(child);
+        // TODO double check if necessary
+        // child.optimize(context);
+      } else {
+        this.remove();
+      }
+    }
+    // Block optimize
+    this.cache = {};
+  }
+}
+
+Header.blotName = 'header';
+Header.tagName = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+
+export default Header;
diff --git a/packages/fluent-editor/src/table/formats/list.ts b/packages/fluent-editor/src/table/formats/list.ts
new file mode 100644
index 0000000000..f47899f3c7
--- /dev/null
+++ b/packages/fluent-editor/src/table/formats/list.ts
@@ -0,0 +1,219 @@
+import * as Quill from 'quill';
+import { CELL_ATTRIBUTES, CELL_IDENTITY_KEYS } from '../table-config';
+
+const Block = Quill.imports['blots/block'];
+const Container = Quill.imports['blots/container'];
+
+// @dynamic
+class ListContainer extends Container {
+  static allowedChildren: any;
+  static blotName: string;
+  static tagName: string;
+  replaceWith: any;
+  domNode: any;
+  parent: any;
+  statics: any;
+  wrap: any;
+
+  format(name, value) {
+    const { row, cell, rowspan, colspan } = this.domNode.dataset;
+    if (name === ListContainer.blotName) {
+      if (value) {
+        super.format(name, { row, cell, rowspan, colspan });
+      } else if (row) {
+        this.replaceWith('table-cell-line', { row, cell, rowspan, colspan });
+      }
+    }
+  }
+}
+/**
+ * bugfix: quill源码中(quill/core/editor.js 272行)在处理拷贝时
+ *         hard code了这个blotName用于处理ol中的li。所以在quill
+ *         源码内写法不变的情况下这个名字不能改，否则拷贝有bug
+ */
+ListContainer.blotName = 'list-container';
+ListContainer.tagName = 'OL';
+
+// @dynamic
+class ListItem extends Block {
+  static blotName: string;
+  static tagName: string;
+  static requiredContainer: typeof ListContainer;
+  statics: any;
+  attachUI: any;
+  domNode: any;
+  replaceWith: any;
+  parent: any;
+  wrap: any;
+  children: any;
+  prev: any;
+  remove: () => {};
+
+  static create(value) {
+    const node = super.create();
+    if (typeof value === 'string') {
+      value = { value };
+    } else {
+      [...CELL_IDENTITY_KEYS, ...CELL_ATTRIBUTES].forEach(key => {
+        if (value[key]) {
+          node.dataset[key] = value[key];
+        }
+      });
+    }
+    node.classList.add(value.value);
+    return node;
+  }
+
+  static formats(domNode) {
+    const formats: any = {};
+    formats.value = domNode.classList.item(0) || undefined;
+
+    return [...CELL_ATTRIBUTES, ...CELL_IDENTITY_KEYS].reduce((tableFormats, key) => {
+      if (domNode.dataset[key]) {
+        tableFormats[key] = domNode.dataset[key];
+      }
+      return tableFormats;
+    }, formats);
+  }
+
+  static register() {
+    Quill.register({ 'formats/list-container': ListContainer }, true);
+  }
+
+  constructor(scroll, domNode) {
+    super(scroll, domNode);
+    const quill = Quill.find(scroll.domNode.parentNode);
+    const range = quill.getSelection();
+    if (range) {
+      const [line] = quill.getLine(range.index);
+      const td = line.domNode.closest('td');
+      if (td) {
+        [...CELL_IDENTITY_KEYS, ...CELL_ATTRIBUTES].forEach(key =>
+          td.dataset[key] && domNode.setAttribute(`data-${key}`, td.dataset[key]));
+      }
+    }
+
+    const ui = domNode.ownerDocument.createElement('span');
+    const listEventHandler = e => {
+      if (!scroll.isEnabled()) { return; }
+      const { value } = this.statics.formats(domNode, scroll);
+      if (value === 'checked') {
+        this.format('list', 'unchecked');
+        e.preventDefault();
+      } else if (value === 'unchecked') {
+        this.format('list', 'checked');
+        e.preventDefault();
+      }
+    };
+    ui.addEventListener('mousedown', listEventHandler);
+    ui.addEventListener('touchstart', listEventHandler);
+    this.attachUI(ui);
+  }
+
+  format(name, value) {
+    if (name !== ListItem.blotName) {
+      super.format(name, value);
+      return;
+    }
+    const type = (value && typeof value === 'object') ? value.value : value;
+    const oldClass = this.domNode.classList[0];
+    const tdDom = this.domNode.closest('.editing-select-able');
+    const tableCellBlot = tdDom && Quill.find(tdDom);
+    const images = this.domNode.querySelectorAll('img[data-image-id]');
+    if (!type || type === oldClass) {
+      // 消除格式或相同list抵消格式时恢复图片对齐，li转化为table-cell-line
+      if (images && images.length) {
+        images.forEach(img => {img.style.verticalAlign = 'baseLine';});
+      }
+      if (tableCellBlot && tableCellBlot.statics.blotName === 'table') {
+        const tableCellFormats = tableCellBlot.formats();
+        this.replaceWith('table-cell-line', tableCellFormats);
+        // fix: 移除list格式时移除父级的ol或ul，避免table-cell-line判断无td自动生成td容器
+        if (this.parent.statics.blotName === ListContainer.blotName) {
+          this.parent.unwrap();
+        }
+      } else {
+        super.format(name, value);
+      }
+    } else if (oldClass) {
+      this.domNode.className = this.domNode.className.replace(oldClass, type);
+    } else {
+      this.domNode.classList.add(type);
+    }
+  }
+
+  optimize(context) {
+    // 判断前一个li是否包含软回车，如果包含则将当前li与之合并后移除
+    const tail = this.prev && this.prev.domNode.lastChild;
+    if (tail && tail.className && tail.className.indexOf('ql-soft-break') >= 0) {
+      // 合并dom
+      this.domNode.childNodes.forEach((v, i) => {
+        if (i > 0) {
+          this.prev.domNode.appendChild(v);
+        }
+      });
+      this.remove();
+      return;
+    }
+
+    super.optimize(context);
+
+    // list类型
+    const parentFormats = getFormats(this.parent.domNode);
+    const formats = ListItem.formats(this.domNode);
+    // 单元格属性
+    const data = this.domNode.dataset || [];
+    const images = this.domNode.querySelectorAll('img[data-image-id]');
+
+    // li更新后判断父容器的对应属性是否与自身一致，如果不一致则向上覆盖
+    if (parentFormats.list !== formats.value) {
+      const oldClass = this.parent.domNode.classList[0];
+      if (oldClass) {
+        this.parent.domNode.className = this.parent.domNode.className.replace(oldClass, formats.value);
+      } else {
+        this.parent.domNode.classList.add(formats.value);
+      }
+    }
+
+    if (data.cell && !parentFormats.cell) {
+      [...CELL_IDENTITY_KEYS, ...CELL_ATTRIBUTES].forEach(key =>
+        (formats[key] || data[key]) && this.parent.domNode.setAttribute(`data-${key}`, formats[key] || data[key]));
+      // 如果父容器不在表格内则用单元格包裹
+      if (this.parent.parent.statics.blotName !== 'table') {
+        delete formats['list'];
+        this.wrap('table', formats);
+      }
+    }
+
+    // 当list中包含图片时，设置图片顶对齐
+    if (images) {
+      images.forEach(img => {img.style.verticalAlign = 'top';});
+    }
+  }
+}
+
+ListItem.blotName = 'list';
+ListItem.tagName = 'LI';
+
+ListContainer.allowedChildren = [ListItem];
+ListItem.requiredContainer = ListContainer;
+
+// 属性读取方法：兼容table-cell-line、ol、li
+// 因为构造时当前range对应的元素最开始是table-cell-line，然后是li，且ol的formats方法不允许覆写，会导致报错，所以整合一个兼容方法来读取需要的属性。
+function getFormats(dom): any {
+  const formats = {};
+
+  if (dom.tagName === 'OL') {
+    formats['list'] = dom.classList.item(0);
+  }
+
+  return [...CELL_ATTRIBUTES, ...CELL_IDENTITY_KEYS].reduce((tableFormats, attribute) => {
+    if (dom.hasAttribute(`data-${attribute}`)) {
+      tableFormats[attribute] = dom.getAttribute(`data-${attribute}`) || undefined;
+    }
+    return tableFormats;
+  }, formats);
+}
+
+export { ListContainer, ListItem as default };
+
diff --git a/packages/fluent-editor/src/table/formats/table.ts b/packages/fluent-editor/src/table/formats/table.ts
new file mode 100644
index 0000000000..47eb2ee6cc
--- /dev/null
+++ b/packages/fluent-editor/src/table/formats/table.ts
@@ -0,0 +1,1233 @@
+import * as Quill from 'quill';
+import { compare } from '../../utils/method'
+import { isNullOrUndefined } from '../../config/editor.utils';
+import {
+  CELL_ATTRIBUTES,
+  CELL_DEFAULT,
+  CELL_IDENTITY_KEYS,
+  CELL_MIN_HEIGHT,
+  COL_ATTRIBUTES,
+  COL_DEFAULT,
+  ERROR_LIMIT
+} from '../table-config';
+import { getRelativeRect } from '../utils';
+import Header from './header';
+import ListItem, { ListContainer } from './list';
+
+const Break = Quill.imports['blots/break'];
+const Block = Quill.imports['blots/block'];
+const Container = Quill.imports['blots/container'];
+
+// @dynamic
+class TableCellLine extends Block {
+  static requiredContainer: any;
+  static tagName: string;
+  static className: string;
+  static blotName: any;
+  domNode: any;
+  statics: any;
+  wrap: any;
+  parent: any;
+
+  static create(value) {
+    const node = super.create(value);
+
+    // fix: when td has background-color, quill can't set it to table-cell bolt
+    if (value.tdBgColor) {
+      node.setAttribute(`data-parent-bg`, value.tdBgColor);
+      delete value.tdBgColor;
+    }
+
+    CELL_IDENTITY_KEYS.forEach((key) => {
+      const identityMaker = key === 'row' ? rowId : cellId;
+      node.setAttribute(`data-${key}`, value[key] || identityMaker());
+    });
+
+    CELL_ATTRIBUTES.forEach((attrName) => {
+      node.setAttribute(`data-${attrName}`, value[attrName] || CELL_DEFAULT[attrName]);
+    });
+
+    if (value.height) {
+      node.setAttribute('height', value.height);
+    }
+
+    return node;
+  }
+
+  static formats(domNode) {
+    const formats = {};
+    if (formats['list']) {
+      formats['list'] = domNode.classList.item(0);
+    }
+    return reduceFormats(domNode, formats);
+  }
+
+  toggleAttribute(name, value) {
+    if (value) {
+      this.domNode.setAttribute(name, value);
+    } else {
+      this.domNode.removeAttribute(name);
+    }
+  }
+
+  formatChildren(name, value) {
+    this.children.forEach((child) => {
+      child.format && child.format(name, value)
+      if(!child.domNode.style){
+        return
+      }
+      if(child.domNode.tagName === 'SPAN' && value) {
+        child.domNode.style.backgroundColor = value
+      }else {
+        child.domNode.style.backgroundColor = 'initial'
+      }
+    })
+  }
+
+  format(name, value) {
+    if ([...CELL_ATTRIBUTES, ...CELL_IDENTITY_KEYS, 'parent-bg'].indexOf(name) > -1) {
+      if (value) {
+        this.domNode.setAttribute(`data-${name}`, value);
+      } else {
+        this.domNode.removeAttribute(`data-${name}`);
+      }
+    } else if (name === 'header') {
+      if (!value) {
+        return;
+      }
+      const { row, cell, rowspan, colspan }: any = TableCellLine.formats(this.domNode);
+      super.format(name, {
+        value,
+        row,
+        cell,
+        rowspan,
+        colspan,
+      });
+    } else {
+      super.format(name, value);
+    }
+    switch (true) {
+      case name === 'cell-bg': {
+        this.toggleAttribute('data-cell-bg', value)
+        this.formatChildren(name, value)
+      }
+    }
+  }
+
+  optimize(context) {
+    super.optimize(context);
+
+    // cover shadowBlot's wrap call, pass params parentBlot initialize
+    // needed
+    const { row, cell, rowspan, colspan } = this.domNode.dataset;
+    const formats: any = TableCellLine.formats(this.domNode);
+    const parentFormats = this.parent.formats();
+    if (this.statics.requiredContainer && !(this.parent instanceof this.statics.requiredContainer)) {
+      this.wrap(this.statics.requiredContainer.blotName, { row, cell, rowspan, colspan });
+    } else if (!compare(formats, parentFormats)) {
+      this.parent.format('row', formats.row);
+      this.parent.format('cell', formats.cell);
+      this.parent.format('rowspan', formats.rowspan);
+      this.parent.format('colspan', formats.colspan);
+    }
+
+    const parentHeight = this.domNode.getAttribute('height');
+    if (parentHeight) {
+      this.parent.domNode.style.height = parentHeight;
+    }
+  }
+
+  tableCell() {
+    return this.parent;
+  }
+}
+TableCellLine.blotName = 'table-cell-line';
+TableCellLine.className = 'qlbt-cell-line';
+TableCellLine.tagName = 'DIV';
+
+// @dynamic
+class TableCell extends Container {
+  static allowedChildren: any;
+  static blotName: any;
+  static requiredContainer: any;
+  static tagName: string;
+  next: any;
+  children: any;
+  parent: any;
+  domNode: any;
+  statics: any;
+  wrap: any;
+  splitAfter: any;
+  prev: any;
+  scroll: any;
+
+  static create(value = { row: rowId() }) {
+    const node = super.create(value);
+
+    CELL_IDENTITY_KEYS.forEach((key) => {
+      node.setAttribute(`data-${key}`, value[key]);
+    });
+
+    CELL_ATTRIBUTES.forEach((attrName) => {
+      if (value[attrName]) {
+        node.setAttribute(attrName, value[attrName]);
+      }
+    });
+
+    return node;
+  }
+
+  static formats(domNode) {
+    const formats = {
+      height: undefined,
+      row: undefined,
+    }
+
+    formats.height = domNode.getAttribute('height') || undefined
+
+    if (domNode.hasAttribute('data-row')) {
+      formats.row = domNode.getAttribute('data-row')
+    }
+
+    if (domNode.hasAttribute('data-cell-bg')) {
+      formats['cell-bg'] = domNode.getAttribute('data-cell-bg') || undefined
+    }
+    return  CELL_ATTRIBUTES.reduce((formats, attribute) => {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute)
+      }
+
+      return formats
+    }, formats)
+  }
+
+  checkMerge() {
+    if (super.checkMerge() && !isNullOrUndefined(this.next.children.head)) {
+      const getCellId = (node) => {
+        return (
+          (node.formats && node.formats()[node.statics.blotName]) || {
+            cell: node.domNode.getAttribute('data-cell'),
+          }
+        );
+      };
+      const thisHead = getCellId(this.children.head);
+      const thisTail = getCellId(this.children.tail);
+      const nextHead = getCellId(this.next.children.head);
+      const nextTail = getCellId(this.next.children.tail);
+      return thisHead.cell === thisTail.cell && thisHead.cell === nextHead.cell && thisHead.cell === nextTail.cell;
+    }
+    return false;
+  }
+
+  cellOffset() {
+    if (this.parent) {
+      return this.parent.children.indexOf(this);
+    }
+    return -1;
+  }
+
+  formats() {
+    const formats = {};
+
+    if (this.domNode.hasAttribute('data-row')) {
+      formats['row'] = this.domNode.getAttribute('data-row');
+    }
+    if (this.domNode.hasAttribute('data-cell')) {
+      formats['cell'] = this.domNode.getAttribute('data-cell');
+    }
+
+    return CELL_ATTRIBUTES.reduce((tableFormats, attribute) => {
+      if (this.domNode.hasAttribute(attribute)) {
+        tableFormats[attribute] = this.domNode.getAttribute(attribute);
+      }
+
+      return tableFormats;
+    }, formats);
+  }
+
+  toggleAttribute(name, value) {
+    if (value) {
+      this.domNode.setAttribute(name, value);
+    } else {
+      this.domNode.removeAttribute(name);
+    }
+  }
+
+  formatChildren(name, value) {
+    this.children.forEach((child) => {
+      child.format(name, value)
+    })
+  }
+    
+  format(name, value) {
+    const quill = Quill.find(this.scroll.domNode.parentNode);
+    switch (true) {
+      case CELL_ATTRIBUTES.indexOf(name) > -1:
+      this.toggleAttribute(name, value);
+      break;
+      case ['row', 'cell'].indexOf(name) > -1:
+        this.toggleAttribute(`data-${name}`, value);
+        break;
+      case name === 'background': {      const hasBgColor = this.domNode.querySelectorAll('div.qlbt-cell-line[data-parent-bg]');
+        hasBgColor.forEach((child) => child.removeAttribute('data-parent-bg'));
+        this.domNode.style.background = '';
+        this.domNode.style.backgroundColor = value;
+        this.children.head.format('parent-bg', value);
+        break;
+      }
+      // TODO: 其他格式可同理实现，但已有格式清除时会清除所有格式，待解决
+      case name === 'size': { 
+          const start = quill.getIndex(this.children.head);
+          const total = quill.getIndex(this.children.tail) + this.children.tail.length();
+          const length = total - start > 0 ? total - start : 0;
+          quill.setSelection(start, length, Quill.sources.USER);
+          quill.format(name, value, Quill.sources.USER);
+          // 设置选区后需清除选区，否则会固定处理选区内容
+          quill.setSelection(start);
+      }
+      case name === 'cell-bg': {
+        this.toggleAttribute('data-cell-bg', value)
+        this.toggleAttribute('data-parent-bg', value)
+        this.formatChildren(name, value)
+        if (value) {
+          this.domNode.style.backgroundColor = value
+        } else {
+          this.domNode.style.backgroundColor = 'initial'
+        }
+      }
+    }
+  }
+
+  optimize(context) {
+    // fix: when td has background-color, quill can't set it to table-cell bolt
+    const hasBg: any = Array.from(this.domNode.childNodes).find((item: any) => item.getAttribute('data-parent-bg'));
+    const bgColor = hasBg && hasBg.getAttribute('data-parent-bg');
+    if (bgColor && bgColor !== this.domNode.style.backgroundColor ) {
+      this.domNode.style.backgroundColor = bgColor;
+    }
+
+    const rId = this.domNode.getAttribute('data-row');
+    if (this.statics.requiredContainer && !(this.parent instanceof this.statics.requiredContainer)) {
+      this.wrap(this.statics.requiredContainer.blotName, {
+        row: rId,
+      });
+    } else if (rId !== this.parent.formats().row) {
+      this.parent.format('row', rId);
+    }
+
+    this.children.forEach((child) => {
+      if (isNullOrUndefined(child.next)) {
+        return;
+      }
+      const childFormats: any = this.getFormat(child.domNode);
+      const nextFormats: any = this.getFormat(child.next.domNode);
+      if (childFormats.cell !== nextFormats.cell) {
+        const next = this.splitAfter(child);
+        if (next) {
+          next.optimize();
+        }
+        // We might be able to merge with prev now
+        if (this.prev) {
+          this.prev.optimize();
+        }
+      }
+    });
+
+    super.optimize(context);
+  }
+
+  // 兼容读取TableCell中的子blot，包括table-cell-line、line、head
+  getFormat(domNode) {
+    const formats = {};
+    const firstChild = domNode.childNodes[0];
+    if (firstChild && domNode.tagName === 'OL') {
+      formats['list'] = firstChild.classList.item(0);
+    }
+
+    return reduceFormats(domNode, formats);
+  }
+
+  row() {
+    return this.parent;
+  }
+
+  rowOffset() {
+    if (this.row()) {
+      return -1;
+    }
+    return this.row().rowOffset();
+  }
+
+  table() {
+    return this.row() && this.row().table();
+  }
+}
+TableCell.blotName = 'table';
+TableCell.tagName = 'TD';
+
+// @dynamic
+class TableRow extends Container {
+  static requiredContainer: any;
+  static allowedChildren: any;
+  static blotName: string;
+  static tagName: string;
+  next: any;
+  children: any;
+  domNode: any;
+  statics: any;
+  wrap: any;
+  splitAfter: any;
+  enforceAllowedChildren: any;
+  uiNode: any;
+  parent: any;
+  prev: any;
+
+  static create(value) {
+    const node = super.create(value);
+    if (value.row) {
+      node.setAttribute('data-row', value.row);
+    }
+    return node;
+  }
+
+  checkMerge() {
+    if (super.checkMerge() && !isNullOrUndefined(this.next.children.head)) {
+      const thisHead = this.children.head.formats();
+      const thisTail = this.children.tail.formats();
+      const nextHead = this.next.children.head.formats();
+      const nextTail = this.next.children.tail.formats();
+
+      return thisHead.row === thisTail.row && thisHead.row === nextHead.row && thisHead.row === nextTail.row;
+    }
+    return false;
+  }
+
+  formats() {
+    return ['row'].reduce((formats, attrName) => {
+      if (this.domNode.hasAttribute(`data-${attrName}`)) {
+        formats[attrName] = this.domNode.getAttribute(`data-${attrName}`);
+      }
+      return formats;
+    }, {});
+  }
+
+  format(key, value) {
+    this.domNode.setAttribute(`data-${key}`, value);
+  }
+
+  optimize(context) {
+    // optimize function of ShadowBlot
+    if (this.statics.requiredContainer && !(this.parent instanceof this.statics.requiredContainer)) {
+      this.wrap(this.statics.requiredContainer.blotName);
+    }
+
+    this.children.forEach((child) => {
+      if (isNullOrUndefined(child.next)) {
+        return;
+      }
+      const childFormats = child.formats();
+      const nextFormats = child.next.formats();
+      if (childFormats.row !== nextFormats.row) {
+        const next = this.splitAfter(child);
+        if (next) {
+          next.optimize();
+        }
+        if (this.prev) {
+          this.prev.optimize();
+        }
+      }
+    });
+
+    super.optimize(context);
+  }
+
+  rowOffset() {
+    if (!this.parent) {
+      return -1;
+    }
+    return this.parent.children.indexOf(this);
+  }
+
+  table() {
+    return this.parent && this.parent.parent;
+  }
+}
+TableRow.blotName = 'table-row';
+TableRow.tagName = 'TR';
+
+// @dynamic
+class TableBody extends Container {
+  static requiredContainer: any;
+  static allowedChildren: any;
+  static blotName: string;
+  static tagName: string;
+}
+TableBody.blotName = 'table-body';
+TableBody.tagName = 'TBODY';
+
+// @dynamic
+class TableCol extends Block {
+  static requiredContainer: any;
+  static blotName: string;
+  static tagName: string;
+  domNode: any;
+
+  static create(value) {
+    const node = super.create(value);
+    COL_ATTRIBUTES.forEach((attrName) => {
+      node.setAttribute(`${attrName}`, value[attrName] || COL_DEFAULT[attrName]);
+    });
+    return node;
+  }
+
+  static formats(domNode) {
+    return COL_ATTRIBUTES.reduce((formats, attribute) => {
+      if (domNode.hasAttribute(`${attribute}`)) {
+        formats[attribute] = domNode.getAttribute(`${attribute}`) || undefined;
+      }
+      return formats;
+    }, {});
+  }
+
+  format(name, value) {
+    if (COL_ATTRIBUTES.indexOf(name) > -1) {
+      this.domNode.setAttribute(`${name}`, value || COL_DEFAULT[name]);
+    } else {
+      super.format(name, value);
+    }
+  }
+
+  html() {
+    return this.domNode.outerHTML;
+  }
+}
+TableCol.blotName = 'table-col';
+TableCol.tagName = 'col';
+
+// @dynamic
+class TableColGroup extends Container {
+  static requiredContainer: any;
+  static allowedChildren: any;
+  static blotName: string;
+  static tagName: string;
+  parent: any;
+  statics: any;
+
+  optimize(context) {
+    super.optimize(context);
+    // optimize 是当前slot更新后调用的callback方法，当TableBody更新后判断父容器的存在和类型相符则调用更新表格宽度方法更新宽度
+    // 切记不要在当前slot内调用能改变当前slot的方法，会造成无限循环，一般通过子更新改变父较好
+    if (this.parent && this.statics.requiredContainer && this.parent instanceof this.statics.requiredContainer) {
+      this.parent.updateTableWidth();
+    }
+    // 此时colgroup创建完毕，检查colgroup的col数量是否正确
+    // fix：colgroup的col数量不正确导致最后一列宽度为空
+    if(this.parent.parent.domNode.className === 'quill-better-table-wrapper' 
+      && this.parent.parent.domNode.tagName === 'DIV' 
+      && this.parent.domNode.children.length >= 2 
+      && this.parent.domNode.children[0].tagName === 'COLGROUP' 
+      && this.parent.domNode.children[1].tagName === 'TBODY'
+    ) {
+
+      let trId = ""
+      let colSpan = 0
+      let colgroupNumber = 0
+      for(let i = 0; i< this.parent.domNode.children.length; i++) {
+        if(this.parent.domNode.children[i].tagName === 'TBODY') {
+          if(trId === ""){
+            trId = this.parent.domNode.children[i].children[0].getAttribute("data-row")
+          }
+          colSpan = this.findTdColspanInTbody(this.parent.domNode.children[i],trId)
+        } else if (this.parent.domNode.children[i].tagName === 'COLGROUP') {
+          colgroupNumber = this.parent.domNode.children[i].children.length
+        }
+      }
+      let elementSibling = this.parent.domNode.nextElementSibling
+      
+      while(elementSibling && elementSibling.tagName === 'TABLE'){
+        for(let i = 0; i < elementSibling.children.length; i++) {
+          if(elementSibling.children[i].tagName === 'TBODY') {
+            colSpan += this.findTdColspanInTbody(elementSibling.children[i], trId)
+          }
+        }
+        elementSibling = elementSibling.nextElementSibling
+      }
+
+      if(colgroupNumber < colSpan) {
+        let length = colSpan - colgroupNumber
+
+        for(let i =0; i<length; i++) {
+          let newCol = document.createElement("col");
+          newCol.width = this.parent.domNode.children[0].children[this.parent.domNode.children[0].children.length-1].width
+          let newBr = document.createElement("br");
+          newCol.appendChild(newBr)
+          this.parent.domNode.children[0].appendChild(newCol)
+          this.parent.domNode.style.width+=newCol.width
+        }
+      }
+    }
+  }
+// this.parent.domNode.children[1].children[0].children[0].colSpan
+  findTdColspanInTbody(tbody,trId){
+    let colSpan = 0
+    // let tbodyChildrenLength
+    for(let i = 0; i<tbody.children.length ;i++){
+      if(tbody.children[i].getAttribute("data-row")!==trId){
+        return colSpan
+      }
+      for(let j = 0; j<tbody.children[i].children.length;j++) {
+        if(tbody.children[i].children[j].colSpan){
+          colSpan += tbody.children[i].children[j].colSpan
+        }
+      }
+    }
+    return colSpan
+  }
+}
+TableColGroup.blotName = 'table-col-group';
+TableColGroup.tagName = 'colgroup';
+
+// @dynamic
+class TableContainer extends Container {
+  static blotName: string;
+  static className: string;
+  static tagName: string;
+  static requiredContainer: any;
+  static allowedChildren: any;
+  domNode: any;
+  parent: any;
+  children: any;
+  descendants: any;
+  scroll: any;
+  remove: any;
+  static create() {
+    const node = super.create();
+    return node;
+  }
+
+  constructor(scroll, domNode) {
+    super(scroll, domNode);
+    domNode.setAttribute('contenteditable', false);
+    this.updateTableWidth();
+  }
+
+  updateTableWidth() {
+    let colGroup = this.colGroup();
+    if (!colGroup) {
+      // undo时原表格dom被移除，因此colGroup和domNode都不对应当前新表格，需从父容器dom树重新获取
+      // 如果表格有style属性则不为新添加表格，避免错误赋值
+      if (this.parent && this.parent.children.head && this.domNode.hasAttribute('style')) {
+        colGroup = this.parent.children.head.children.head;
+        this.domNode = this.parent.children.head.domNode;
+      } else if(this.domNode.tagName==="TABLE"){
+        // this.domNode.forEach
+        return;
+      } else {
+        return;
+      }
+    }
+    const tableWidth = colGroup.children.reduce((sumWidth, col) => {
+      // 兼容 table-col 不存在的情况
+      const tableCol = col.formats()[TableCol.blotName];
+      let tableColWidth = COL_DEFAULT.width;
+      if (tableCol && tableCol.width) {
+        tableColWidth = parseInt(tableCol.width, 10);
+      }
+      sumWidth = sumWidth + tableColWidth;
+      return sumWidth;
+    }, 0);
+    this.domNode.removeAttribute('style');
+    this.domNode.style.width = `${tableWidth}px`;
+    // 当表格加载结束后修正width设定为auto的列宽度
+    if (colGroup.next) {
+      setTimeout(() => {
+        let tdIndex = 0;
+        let maxTds;
+        const colNum = colGroup.children.length;
+        const tableRows = this.descendants(TableRow);
+        // 查询单元格数等于列数的行作为宽度赋值依据
+        for (let i = 0; i < tableRows.length; i++) {
+          const tds = tableRows[i].domNode.querySelectorAll('td');
+          if (tds.length === colNum) {
+            maxTds = tds;
+            break;
+          }
+        }
+        colGroup.children.forEach((col) => {
+          if (maxTds && col.domNode.width === 'auto') {
+            const width = getComputedStyle(maxTds[tdIndex])['width'];
+            const num = parseInt(width, 10);
+            col.domNode.width = (num < COL_DEFAULT.width && COL_DEFAULT.width) || num;
+          }
+          tdIndex++;
+        });
+      });
+    }
+  }
+
+  cells(column) {
+    return this.rows().map((row) => row.children.at(column));
+  }
+
+  colGroup() {
+    return this.children.head;
+  }
+
+  deleteColumns(compareRect, delIndexes = [], editorWrapper) {
+    const [body] = this.descendants(TableBody);
+    if (isNullOrUndefined(body) || isNullOrUndefined(body.children.head)) {
+      return;
+    }
+
+    const tableCells = this.descendants(TableCell);
+    const removedCells = [];
+    const modifiedCells = [];
+
+    tableCells.forEach((cell) => {
+      const cellRect = getRelativeRect(cell.domNode.getBoundingClientRect(), editorWrapper);
+
+      if (cellRect.x + ERROR_LIMIT > compareRect.x && cellRect.x1 - ERROR_LIMIT < compareRect.x1) {
+        removedCells.push(cell);
+      } else if (cellRect.x < compareRect.x + ERROR_LIMIT && cellRect.x1 > compareRect.x1 - ERROR_LIMIT) {
+        modifiedCells.push(cell);
+      }
+    });
+
+    if (removedCells.length === tableCells.length) {
+      this.tableDestroy();
+      return true;
+    }
+
+    // remove the matches column tool cell
+    delIndexes.forEach(() => {
+      let col = this.colGroup().children.at(delIndexes[0])
+      if(!col || this.colGroup().children.at(delIndexes[0]).domNode !== this.colGroup().domNode.children[delIndexes[0]]){
+        this.colGroup().domNode.removeChild(this.colGroup().domNode.children[delIndexes[0]])
+      }else {
+        col.remove();
+      }
+      
+    });
+
+    removedCells.forEach((cell) => {
+      cell.remove();
+    });
+
+    modifiedCells.forEach((cell) => {
+      const cellColspan = parseInt(cell.formats().colspan, 10);
+      // const cellWidth = parseInt(cell.formats().width, 10);
+      cell.format('colspan', cellColspan - delIndexes.length);
+    });
+
+    this.updateTableWidth();
+  }
+
+  deleteRow(compareRect, editorWrapper) {
+    const [body] = this.descendants(TableBody);
+    if (isNullOrUndefined(body) || isNullOrUndefined(body.children.head)) {
+      return;
+    }
+
+    const tableCells = this.descendants(TableCell);
+    const tableRows = this.descendants(TableRow);
+    const removedCells = []; // cells to be removed
+    const modifiedCells = []; // cells to be modified
+    const fallCells = []; // cells to fall into next row
+
+    tableCells.forEach((cell) => {
+      const cellRect = getRelativeRect(cell.domNode.getBoundingClientRect(), editorWrapper);
+
+      if (cellRect.y > compareRect.y - ERROR_LIMIT && cellRect.y1 < compareRect.y1 + ERROR_LIMIT) {
+        removedCells.push(cell);
+      } else if (cellRect.y < compareRect.y + ERROR_LIMIT && cellRect.y1 > compareRect.y1 - ERROR_LIMIT) {
+        modifiedCells.push(cell);
+
+        if (Math.abs(cellRect.y - compareRect.y) < ERROR_LIMIT) {
+          fallCells.push(cell);
+        }
+      }
+    });
+
+    if (removedCells.length === tableCells.length) {
+      this.tableDestroy();
+      return;
+    }
+
+    // compute length of removed rows
+    const removedRowsLength = this.rows().reduce((sum, row) => {
+      const rowRect = getRelativeRect(row.domNode.getBoundingClientRect(), editorWrapper);
+
+      if (rowRect.y > compareRect.y - ERROR_LIMIT && rowRect.y1 < compareRect.y1 + ERROR_LIMIT) {
+        sum += 1;
+      }
+      return sum;
+    }, 0);
+
+    // it must execute before the table layout changed with other operation
+    fallCells.forEach((cell) => {
+      const cellRect = getRelativeRect(cell.domNode.getBoundingClientRect(), editorWrapper);
+      const nextRow = cell.parent.next;
+      const cellsInNextRow = nextRow.children;
+
+      const refCell = cellsInNextRow.reduce((ref, compareCell) => {
+        const compareCellRect = getRelativeRect(compareCell.domNode.getBoundingClientRect(), editorWrapper);
+        if (cellRect.x1 - compareCellRect.x < ERROR_LIMIT) {
+          ref = compareCell;
+        }
+        return ref;
+      }, null);
+
+      nextRow.insertBefore(cell, refCell);
+      const curRowId = nextRow.formats().row;
+      cell.format('row', curRowId);
+      cell.children.forEach((cellLine) => {
+        cellLine.format('row', curRowId);
+      });
+    });
+
+    modifiedCells.forEach((cell) => {
+      const cellRowspan = parseInt(cell.formats().rowspan, 10);
+      const curRowspan = cellRowspan - removedRowsLength;
+      cell.domNode.removeAttribute('style');
+      cell.format('rowspan', curRowspan);
+      cell.children.forEach((cellLine) => {
+        cellLine.format('rowspan', curRowspan);
+      });
+    });
+
+    removedCells.forEach((cell) => {
+      cell.remove();
+    });
+
+    // fix: There will be a empty tr left if i delete the last row of a table,
+    // this will cause the bottom border of the table to disappear,
+    // and the empty tr will execute the matchTableRow method.
+    tableRows.forEach((row) => {
+      if (row.children.length === 0) {
+        row.remove();
+      }
+    });
+  }
+
+  tableDestroy() {
+    const quill = Quill.find(this.scroll.domNode.parentNode);
+    const tableModule = quill.getModule('better-table');
+    this.remove();
+    tableModule.hideTableTools();
+    quill.update(Quill.sources.USER);
+  }
+
+  insertCell(tableRow, ref, bg = '') {
+    const id = cellId();
+    const rId = tableRow.formats().row;
+    const tableCell = this.scroll.create(
+      TableCell.blotName,
+      { ...CELL_DEFAULT, row: rId,}
+    );
+    tableCell.domNode.style.backgroundColor = bg
+    const cellLine = this.scroll.create(TableCellLine.blotName, {
+      row: rId,
+      cell: id,
+    });
+    tableCell.appendChild(cellLine);
+
+    if (ref) {
+      tableRow.insertBefore(tableCell, ref);
+    } else {
+      tableRow.appendChild(tableCell);
+    }
+  }
+
+  insertColumn(compareRect, colIndex, isRight = true, editorWrapper) {
+    const [body] = this.descendants(TableBody);
+    const [tableColGroup] = this.descendants(TableColGroup);
+    const tableCols = this.descendants(TableCol);
+    const addAsideCells = [];
+    const modifiedCells = [];
+    const affectedCells = [];
+
+    if (isNullOrUndefined(body) || isNullOrUndefined(body.children.head)) {
+      return;
+    }
+    const tableCells = this.descendants(TableCell);
+    tableCells.forEach((cell) => {
+      const cellRect = getRelativeRect(cell.domNode.getBoundingClientRect(), editorWrapper);
+
+      if (isRight) {
+        if (Math.abs(cellRect.x1 - compareRect.x1) < ERROR_LIMIT) {
+          // the right of selected boundary equal to the right of table cell,
+          // add a new table cell right aside this table cell
+          addAsideCells.push(cell);
+        } else if (compareRect.x1 - cellRect.x > ERROR_LIMIT && compareRect.x1 - cellRect.x1 < -ERROR_LIMIT) {
+          // the right of selected boundary is inside this table cell
+          // colspan of this table cell will increase 1
+          modifiedCells.push(cell);
+        }
+      } else {
+        if (Math.abs(cellRect.x - compareRect.x) < ERROR_LIMIT) {
+          // left of selected boundary equal to left of table cell,
+          // add a new table cell left aside this table cell
+          addAsideCells.push(cell);
+        } else if (compareRect.x - cellRect.x > ERROR_LIMIT && compareRect.x - cellRect.x1 < -ERROR_LIMIT) {
+          // the left of selected boundary is inside this table cell
+          // colspan of this table cell will increase 1
+          modifiedCells.push(cell);
+        }
+      }
+    });
+
+    addAsideCells.forEach((cell) => {
+      const ref = isRight ? cell.next : cell;
+      const id = cellId();
+      const tableRow = cell.parent;
+      const rId = tableRow.formats().row;
+      const cellFormats = cell.formats();
+      const tableCell = this.scroll.create(
+        TableCell.blotName,
+        { ...CELL_DEFAULT, row: rId,
+          rowspan: cellFormats.rowspan,}
+      );
+      const cellLine = this.scroll.create(TableCellLine.blotName, {
+        row: rId,
+        cell: id,
+        rowspan: cellFormats.rowspan,
+      });
+      tableCell.appendChild(cellLine);
+
+      if (ref) {
+        tableRow.insertBefore(tableCell, ref);
+      } else {
+        tableRow.appendChild(tableCell);
+      }
+      affectedCells.push(tableCell);
+    });
+
+    // insert new tableCol
+    const tableCol = this.scroll.create(TableCol.blotName, true);
+    let colRef 
+    if (isRight) {
+      colRef = tableCols[colIndex] && tableCols[colIndex].next
+    }else {
+      colRef = tableCols[colIndex] 
+    }
+    
+    if (colRef) {
+      tableColGroup.insertBefore(tableCol, colRef);
+    } else {
+      tableColGroup.appendChild(tableCol);
+    }
+
+    modifiedCells.forEach((cell) => {
+      const cellColspan = cell.formats().colspan;
+      cell.format('colspan', parseInt(cellColspan, 10) + 1);
+      affectedCells.push(cell);
+    });
+
+    affectedCells.sort((cellA, cellB) => {
+      const y1 = cellA.domNode.getBoundingClientRect().y;
+      const y2 = cellB.domNode.getBoundingClientRect().y;
+      return y1 - y2;
+    });
+
+    this.updateTableWidth();
+    return affectedCells;
+  }
+
+  insertRow(compareRect, isDown, editorWrapper) {
+    const [body] = this.descendants(TableBody);
+    if (isNullOrUndefined(body) || isNullOrUndefined(body.children.head)) {
+      return;
+    }
+
+    const tableCells = this.descendants(TableCell);
+    const rId = rowId();
+    const newRow = this.scroll.create(TableRow.blotName, {
+      row: rId,
+    });
+    const addBelowCells = [];
+    const modifiedCells = [];
+    const affectedCells = [];
+
+    tableCells.forEach((cell) => {
+      const cellRect = getRelativeRect(cell.domNode.getBoundingClientRect(), editorWrapper);
+
+      if (isDown) {
+        if (Math.abs(cellRect.y1 - compareRect.y1) < ERROR_LIMIT) {
+          addBelowCells.push(cell);
+        } else if (compareRect.y1 - cellRect.y > ERROR_LIMIT && compareRect.y1 - cellRect.y1 < -ERROR_LIMIT) {
+          modifiedCells.push(cell);
+        }
+      } else {
+        if (Math.abs(cellRect.y - compareRect.y) < ERROR_LIMIT) {
+          addBelowCells.push(cell);
+        } else if (compareRect.y - cellRect.y > ERROR_LIMIT && compareRect.y - cellRect.y1 < -ERROR_LIMIT) {
+          modifiedCells.push(cell);
+        }
+      }
+    });
+
+    // ordered table cells with rect.x, fix error for inserting
+    // new table cell in complicated table with wrong order.
+    const sortFunc = (cellA, cellB) => {
+      const x1 = cellA.domNode.getBoundingClientRect().x;
+      const x2 = cellB.domNode.getBoundingClientRect().x;
+      return x1 - x2;
+    };
+    addBelowCells.sort(sortFunc);
+
+    addBelowCells.forEach((cell) => {
+      const cId = cellId();
+      const cellFormats = cell.formats();
+
+      const tableCell = this.scroll.create(
+        TableCell.blotName,
+        { ...CELL_DEFAULT, row: rId, cell: cId, colspan: cellFormats.colspan}
+      );
+      const cellLine = this.scroll.create(TableCellLine.blotName, {
+        row: rId,
+        cell: cId,
+        colspan: cellFormats.colspan,
+      });
+      const empty = this.scroll.create(Break.blotName);
+      cellLine.appendChild(empty);
+      tableCell.appendChild(cellLine);
+      newRow.appendChild(tableCell);
+      affectedCells.push(tableCell);
+    });
+
+    modifiedCells.forEach((cell) => {
+      const cellRowspan = parseInt(cell.formats().rowspan, 10);
+      cell.format('rowspan', cellRowspan + 1);
+      affectedCells.push(cell);
+    });
+
+    const refRow = this.rows().find((row) => {
+      const rowRect = getRelativeRect(row.domNode.getBoundingClientRect(), editorWrapper);
+      if (isDown) {
+        return Math.abs(rowRect.y - compareRect.y - compareRect.height) < ERROR_LIMIT;
+      } else {
+        return Math.abs(rowRect.y - compareRect.y) < ERROR_LIMIT;
+      }
+    });
+    body.insertBefore(newRow, refRow);
+
+    // reordering affectedCells
+    affectedCells.sort(sortFunc);
+    return affectedCells;
+  }
+
+  mergeCells(compareRect, mergingCells, rowspan, colspan, editorWrapper) {
+    const mergedCell = mergingCells.reduce((result, tableCell, index) => {
+      if (index !== 0) {
+        if (result) {
+          tableCell.moveChildren(result);
+        }
+        tableCell.remove();
+      } else {
+        tableCell.format('colspan', colspan);
+        tableCell.format('rowspan', rowspan);
+        result = tableCell;
+        if (rowspan > 1) {
+          // fix: 比较当前单元格高度样式与rowspan最小高度，小于则设置高度，不判断实际高度，因为合并时这一刻实际高度可能高于最小高度
+          const minHeight = CELL_MIN_HEIGHT * rowspan + rowspan - 1;
+          const cellHeight = parseInt(tableCell.domNode.style.height, 10) || 0;
+          if (cellHeight < minHeight) {
+            tableCell.domNode.style.height = `${minHeight}px`;
+          }
+        }
+      }
+
+      return result;
+    }, null);
+
+    const rId = mergedCell.domNode.getAttribute('data-row');
+    const cId = mergedCell.children.head.domNode.getAttribute('data-cell');
+    mergedCell.children.forEach((cellLine) => {
+      cellLine.domNode.setAttribute('data-parent-bg',mergedCell.domNode.style.backgroundColor)
+      if(cellLine.children['head'].domNode.style) {
+        cellLine.children['head'].domNode.style.backgroundColor=mergedCell.domNode.style.backgroundColor
+      }
+       
+      if (!cellLine.prev || cellLine.domNode.innerText.trim()) {
+        cellLine.format('cell', cId);
+        cellLine.format('row', rId);
+        cellLine.format('colspan', colspan);
+        cellLine.format('rowspan', rowspan);
+      } else {
+        cellLine.remove();
+      }
+    });
+
+    return mergedCell;
+  }
+
+  unmergeCells(unmergingCells, editorWrapper) {
+    let cellFormats: any = {};
+    let cellRowspan = 1;
+    let cellColspan = 1;
+
+    unmergingCells.forEach((tableCell) => {
+      const  tableCellBgColor = tableCell.domNode.style.backgroundColor
+      cellFormats = tableCell.formats();
+      cellRowspan = cellFormats.rowspan;
+      cellColspan = cellFormats.colspan;
+
+      if (cellColspan > 1) {
+        const ref = tableCell.next;
+        const row = tableCell.row();
+        tableCell.format('colspan', 1);
+        if(tableCell.domNode.children && tableCell.domNode.children[0].tagName === 'DIV' && tableCell.domNode.children[0].getAttribute('data-colspan')){
+          tableCell.domNode.children[0].setAttribute('data-colspan', 1)
+        }
+        for (let colspanIndex = cellColspan; colspanIndex > 1; colspanIndex--) {
+          this.insertCell(row, ref, tableCellBgColor);
+        }
+      }
+
+      if (cellRowspan > 1) {
+        let rowspanIndex = cellRowspan;
+        let nextRow = tableCell.row().next;
+        while (rowspanIndex > 1) {
+          const refInNextRow = nextRow.children.reduce((result, cell) => {
+            const compareRect = getRelativeRect(tableCell.domNode.getBoundingClientRect(), editorWrapper);
+            const cellRect = getRelativeRect(cell.domNode.getBoundingClientRect(), editorWrapper);
+            if (Math.abs(compareRect.x1 - cellRect.x) < ERROR_LIMIT) {
+              result = cell;
+            }
+            return result;
+          }, null);
+
+          for (let colspanIndex = cellColspan; colspanIndex > 0; colspanIndex--) {
+            this.insertCell(nextRow, refInNextRow, tableCellBgColor);
+          }
+
+          rowspanIndex -= 1;
+          nextRow = nextRow.next;
+        }
+
+        tableCell.domNode.removeAttribute('style');
+        if(tableCell.domNode.children && tableCell.domNode.children[0].tagName === 'DIV' && tableCell.domNode.children[0].getAttribute('data-rowspan')){
+          tableCell.domNode.children[0].setAttribute('data-rowspan', 1)
+        }
+        tableCell.format('rowspan', 1);
+      }
+    });
+  }
+
+  emptyCells(selectedTds) {
+    selectedTds.forEach((selectedTd) => {
+      // 构造空的table cell line, 优先使用单元格已有rowId和cellId，避免从table-cell-line向上层td提交id时不一致导致错位
+      const cellFormats = selectedTd.formats();
+      const cellLine = this.scroll.create(TableCellLine.blotName, {
+        row: cellFormats.row || rowId(),
+        cell: cellFormats.cell || cellId(),
+        rowspan: cellFormats.rowspan,
+        colspan: cellFormats.colspan,
+      });
+      const empty = this.scroll.create(Break.blotName);
+      cellLine.appendChild(empty);
+
+      selectedTd.domNode.innerHTML = '';
+      selectedTd.appendChild(cellLine);
+    });
+  }
+
+  rows() {
+    const body = this.children.tail;
+    if (isNullOrUndefined(body)) {
+      return [];
+    }
+    return body.children.map((row) => row);
+  }
+}
+TableContainer.blotName = 'ql-table-container';
+TableContainer.className = 'quill-better-table';
+TableContainer.tagName = 'TABLE';
+
+// @dynamic
+class TableViewWrapper extends Container {
+  static blotName: string;
+  static tagName: string;
+  static className: string;
+  static allowedChildren: any;
+  constructor(scroll, domNode) {
+    super(scroll, domNode);
+    const quill = Quill.find(scroll.domNode.parentNode);
+    // fix: 只读模式时超长表格默认包含滚动条
+    if (quill.options.readOnly) {
+      domNode.style.overflow = 'auto';
+    }
+    domNode.addEventListener(
+      'scroll',
+      (e) => {
+        const tableModule = quill.getModule('better-table');
+        if (tableModule.columnTool) {
+          tableModule.columnTool.domNode.scrollLeft = e.target.scrollLeft;
+        }
+
+        if (tableModule.tableSelection && tableModule.tableSelection.selectedTds.length > 0) {
+          tableModule.tableSelection.repositionHelpLines();
+        }
+      },
+      false
+    );
+  }
+}
+TableViewWrapper.blotName = 'table-view';
+TableViewWrapper.className = 'quill-better-table-wrapper';
+TableViewWrapper.tagName = 'DIV';
+
+TableViewWrapper.allowedChildren = [TableContainer];
+TableContainer.requiredContainer = TableViewWrapper;
+
+TableContainer.allowedChildren = [TableBody, TableColGroup];
+TableBody.requiredContainer = TableContainer;
+
+TableBody.allowedChildren = [TableRow];
+TableRow.requiredContainer = TableBody;
+
+TableRow.allowedChildren = [TableCell];
+TableCell.requiredContainer = TableRow;
+
+TableCell.allowedChildren = [TableCellLine, Header, ListItem, ListContainer];
+TableCellLine.requiredContainer = TableCell;
+
+TableColGroup.allowedChildren = [TableCol];
+TableColGroup.requiredContainer = TableContainer;
+
+TableCol.requiredContainer = TableColGroup;
+
+function rowId() {
+  const id = Math.random().toString(36).slice(2, 6);
+  return `row-${id}`;
+}
+
+function cellId() {
+  const id = Math.random().toString(36).slice(2, 6);
+  return `cell-${id}`;
+}
+
+function reduceFormats(domNode, formats) {
+  return CELL_ATTRIBUTES.concat(CELL_IDENTITY_KEYS).reduce((tableFormats, attribute) => {
+    if (domNode.hasAttribute(`data-${attribute}`)) {
+      tableFormats[attribute] = domNode.getAttribute(`data-${attribute}`) || undefined;
+    }
+    return tableFormats;
+  }, formats);
+}
+
+export {
+  CELL_ATTRIBUTES,
+  CELL_IDENTITY_KEYS,
+  cellId,
+  rowId,
+  TableBody,
+  TableCell,
+  TableCellLine,
+  TableCol,
+  TableColGroup,
+  TableContainer,
+  TableRow,
+  TableViewWrapper,
+};
+
diff --git a/packages/fluent-editor/src/table/modules/table-column-tool.ts b/packages/fluent-editor/src/table/modules/table-column-tool.ts
new file mode 100644
index 0000000000..5732616370
--- /dev/null
+++ b/packages/fluent-editor/src/table/modules/table-column-tool.ts
@@ -0,0 +1,480 @@
+import * as Quill from 'quill';
+import { CELL_MIN_HEIGHT, CELL_MIN_WIDTH, COL_TOOL_HEIGHT, PRIMARY_COLOR, ROW_TOOL_WIDTH } from '../table-config';
+import { css } from '../utils';
+
+export default class TableColumnTool {
+  table: any;
+  quill: any;
+  modulesContainer: any;
+  domNode: any;
+  columnCtrlPanel: HTMLDivElement;
+  leftMask: HTMLDivElement;
+  rowCtrlPanel: HTMLDivElement;
+  activeToolCell: HTMLElement;
+  oldRootScrollTop: any;
+  constructor(table, quill, dom) {
+    if (!table) {
+      /* eslint-disable-next-line no-constructor-return*/
+      return null;
+    }
+    this.table = table;
+    this.quill = quill;
+    this.modulesContainer = dom;
+    this.domNode = null;
+    this.oldRootScrollTop = this.quill.root.scrollTop;
+
+    this.initColTool();
+
+    if (this.quill.root === this.quill.scrollingContainer) {
+      this.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this));
+    }
+  }
+
+  handleQuillRootScroll() {
+    if (this.domNode) {
+      this.domNode.style.marginTop = `${this.oldRootScrollTop - this.quill.root.scrollTop}px`;
+    }
+  }
+
+  initColTool() {
+    const parent = this.quill.root.parentNode;
+    const containerRect = parent.getBoundingClientRect();
+    const tableViewRect = this.table.parentNode.getBoundingClientRect();
+
+    this.domNode = document.createElement('div');
+    this.domNode.classList.add('qlbt-table-control-panel');
+
+    // 以下添加顺序影响遮罩顺序，勿改变
+    this.columnCtrlPanel = document.createElement('div');
+    this.columnCtrlPanel.classList.add('qlbt-column-control-panel');
+    this.domNode.appendChild(this.columnCtrlPanel);
+
+    this.leftMask = document.createElement('div');
+    this.leftMask.classList.add('qlbt-left-mask');
+    css(this.leftMask, { height: `${tableViewRect.height + 50}px` });
+    this.domNode.appendChild(this.leftMask);
+
+    this.rowCtrlPanel = document.createElement('div');
+    this.rowCtrlPanel.classList.add('qlbt-row-control-panel');
+    this.domNode.appendChild(this.rowCtrlPanel);
+
+    this.updateRowToolCells();
+    this.updateColToolCells();
+
+    this.modulesContainer.appendChild(this.domNode);
+    css(this.domNode, {
+      width: '100%',
+      height: `${COL_TOOL_HEIGHT}px`,
+      left: '0px',
+      top: `${tableViewRect.top - containerRect.top + parent.scrollTop - 25}px`
+    });
+  }
+
+  createToolCell(isRow) {
+    // @ts-ignore
+    window.quillIsIntable = true
+    const toolCell = document.createElement('div');
+    const selector = document.createElement('div');
+    const resizeHolder = document.createElement('div');
+    if (isRow) {
+      toolCell.classList.add('qlbt-row-tool-cell');
+      selector.classList.add('qlbt-row-tool-cell-selector');
+      resizeHolder.classList.add('qlbt-row-tool-cell-holder');
+      css(toolCell, { width: `${ROW_TOOL_WIDTH}px` });
+    } else {
+      toolCell.classList.add('qlbt-col-tool-cell');
+      selector.classList.add('qlbt-col-tool-cell-selector');
+      resizeHolder.classList.add('qlbt-col-tool-cell-holder');
+      css(toolCell, { height: `${COL_TOOL_HEIGHT}px` });
+    }
+    toolCell.appendChild(selector);
+    toolCell.appendChild(resizeHolder);
+    return toolCell;
+  }
+
+  updateColToolCells() {
+    const tableContainer = Quill.find(this.table);
+    if (!tableContainer) {
+      return;
+    }
+    const tableCols = tableContainer.colGroup().children;
+    const tableColsNum =  Math.max(Array.from(tableCols).length, tableContainer.colGroup().domNode.children.length);
+    const existCells: any = Array.from(this.columnCtrlPanel.querySelectorAll('.qlbt-col-tool-cell'));
+    const cellsNumber = Math.max(existCells.length, tableColsNum);
+
+    for (let index = 0; index < cellsNumber; index++) {
+      let col = tableCols.at(index);
+      let colWidth = 0
+      if(!col || col.domNode !== tableContainer.colGroup().domNode.children[index]) {
+        col = tableContainer.colGroup().domNode.children[index]
+        colWidth = col ? col.width : tableContainer.colGroup().domNode.children[index-1].width
+      }else {
+        colWidth = parseInt(col.formats()[col.statics.blotName].width, 10)
+      }
+      // if cell already exist
+      let colToolCell = null;
+      if (!existCells[index]) {
+        colToolCell = this.createToolCell(false);
+        this.columnCtrlPanel.appendChild(colToolCell);
+        this.addColCellSelectHandler(colToolCell);
+        this.addColCellHolderHandler(colToolCell);
+        // set tool cell min-width
+        css(colToolCell, {
+          'min-width': `${colWidth}px`
+        });
+      } else if (existCells[index] && index >= tableColsNum) {
+        existCells[index].remove();
+      } else {
+        colToolCell = existCells[index];
+        // set tool cell min-width
+        css(colToolCell, {
+          'min-width': `${colWidth}px`
+        });
+      }
+    }
+  }
+
+  updateRowToolCells() {
+    const tableContainer = Quill.find(this.table);
+    if (!tableContainer) {
+      return;
+    }
+    let tableRows = Array.from(tableContainer.domNode.querySelectorAll('tr'));
+    tableRows = tableRows.filter((tr: any) => tr.children.length);
+    const existCells: any = Array.from(this.rowCtrlPanel.querySelectorAll('.qlbt-row-tool-cell'));
+    const rowNumber = Math.max(existCells.length, tableRows.length);
+
+    for (let index = 0; index < rowNumber; index++) {
+      const row: any = tableRows[index];
+
+      // fix: 修复 IE11/Edge 下无法拿到 height 的问题
+      // IE11/Edge 下 height 会变成 'auto'
+      let computedHeight = row && getComputedStyle(row)['height'];
+      if (computedHeight === 'auto') {
+        computedHeight = row.querySelector('td').style.height || '30px';
+      }
+
+      let rowHeight = row && parseFloat(computedHeight);
+      if (rowHeight < CELL_MIN_HEIGHT) {
+        const rowChildHeight = row && row.childNodes[0] && parseFloat(getComputedStyle(row.childNodes[0])['height']);
+        rowHeight = rowChildHeight;
+      }
+      // if cell already exist
+      let rowToolCell = null;
+      if (!existCells[index]) {
+        rowToolCell = this.createToolCell(true);
+        this.rowCtrlPanel.appendChild(rowToolCell);
+        this.addRowCellSelectHandler(rowToolCell);
+        this.addRowCellHolderHandler(rowToolCell);
+        // set tool cell height, ff not support min-height
+        css(rowToolCell, { height: `${rowHeight}px` });
+      } else if (existCells[index] && index >= tableRows.length) {
+        existCells[index].remove();
+      } else {
+        rowToolCell = existCells[index];
+        css(rowToolCell, { height: `${rowHeight}px` });
+      }
+    }
+  }
+
+  destroy() {
+    // @ts-ignore
+    window.quillIsIntable = false
+    this.domNode.remove();
+    return null;
+  }
+
+  addRowCellSelectHandler(cell) {
+    const selector = cell.querySelector('.qlbt-row-tool-cell-selector');
+
+    const handleClick = e => {
+      e.preventDefault();
+
+      const dom = e.target.parentNode;
+      const domRect = dom.getBoundingClientRect();
+      const containerRect = this.quill.root.parentNode.getBoundingClientRect();
+      const tableRect = this.table.getBoundingClientRect();
+      const tableSelection = this.quill.getModule('better-table').tableSelection;
+      tableSelection.boundary = {
+        x: tableRect.left - containerRect.left, // 表格左上角X轴坐标
+        x1: tableRect.left - containerRect.left + tableRect.width - 2, // 表格右上角X轴坐标
+        y: domRect.top - containerRect.top, // 表格左上角Y轴坐标
+        y1: domRect.top - containerRect.top + domRect.height - 1, // 表格右上角Y轴坐标
+        width: tableRect.width - 2,
+        height: domRect.height - 1
+      };
+      tableSelection.selectedTds = tableSelection.computeSelectedTds();
+      tableSelection.repositionHelpLines();
+
+      dom.classList.add('qlbt-tool-cell-on');
+      this.activeToolCell = dom;
+    };
+
+    selector.addEventListener('click', handleClick, false);
+  }
+
+  addRowCellHolderHandler(cell) {
+    const holder = cell.querySelector('.qlbt-row-tool-cell-holder');
+    let dragging = false;
+    let y0 = 0;
+    let y = 0;
+    let delta = 0;
+    let height0 = 0;
+    // helpLine relation variable
+    let tableRect: any = {};
+    let cellRect: any = {};
+    let helpLine = null;
+
+    const handleDrag = e => {
+      e.preventDefault();
+
+      if (dragging) {
+        y = e.clientY;
+
+        if (height0 + y - y0 >= CELL_MIN_HEIGHT) {
+          delta = y - y0;
+        } else {
+          delta = CELL_MIN_HEIGHT - height0;
+        }
+
+        css(helpLine, {
+          top: `${cellRect.top + cellRect.height + delta}px`
+        });
+      }
+    };
+
+    const handleMouseup = e => {
+      e.preventDefault();
+
+      const existCells = Array.from(this.domNode.querySelectorAll('.qlbt-row-tool-cell'));
+      const rowIndex = existCells.indexOf(cell);
+      const rows: any = Array.from(this.table.querySelectorAll('tr'));
+      const tds = Array.from(rows[rowIndex].childNodes);
+      const hasContentTd: any = tds.find((td: any) => td.getAttribute('rowspan') === '1' && td.innerText !== '\n');
+
+      if (dragging) {
+        let tdHeight = `${height0 + delta}px`;
+        if (hasContentTd) {
+          tds.forEach((td: any) => td.getAttribute('rowspan') === '1' && css(td, { height: tdHeight }));
+          const currentHeight = getComputedStyle(hasContentTd)['height'];
+          tdHeight = (parseInt(currentHeight, 10) > height0 + delta && currentHeight) || tdHeight;
+        }
+        css(cell, { height: tdHeight });
+        tds.forEach((td: any) => td.getAttribute('rowspan') === '1' && css(td, { height: tdHeight }));
+
+        const tableViewRect = this.table.parentNode.getBoundingClientRect();
+        css(this.leftMask, { height: `${tableViewRect.height + 50}px` });
+
+        y0 = 0;
+        y = 0;
+        delta = 0;
+        height0 = 0;
+        dragging = false;
+        holder.classList.remove('dragging');
+      }
+
+      this.quill.root.parentNode.removeEventListener('mousemove', handleDrag, false);
+      document.removeEventListener('mouseup', handleMouseup, false);
+      tableRect = {};
+      cellRect = {};
+      helpLine.remove();
+      helpLine = null;
+
+      const betterTableModule = this.quill.getModule('better-table');
+      const tableScrollBar = betterTableModule.tableScrollBar;
+      tableScrollBar.resetTableHeight(this.table);
+
+      // fix: 拖动滚动条时修正选区位置
+      const tableSelection = betterTableModule.tableSelection;
+      if (tableSelection && tableSelection.selectedTds.length) { tableSelection.refreshHelpLinesPosition(); }
+    };
+
+    const handleMousedown = e => {
+      e.preventDefault();
+
+      this.quill.root.parentNode.addEventListener('mousemove', handleDrag, false);
+      document.addEventListener('mouseup', handleMouseup, false);
+
+      tableRect = this.table.getBoundingClientRect();
+      const tableViewRect = this.table.parentNode.getBoundingClientRect();
+      const width = (tableRect.width > tableViewRect.width && tableViewRect.width) || tableRect.width;
+      cellRect = cell.getBoundingClientRect();
+      helpLine = document.createElement('div');
+      css(helpLine, {
+        position: 'fixed',
+        top: `${cellRect.top + cellRect.height}px`,
+        left: `${cellRect.left}px`,
+        zIndex: '100',
+        width: `${width + ROW_TOOL_WIDTH + 9}px`,
+        height: '1px',
+        backgroundColor: PRIMARY_COLOR
+      });
+
+      this.quill.root.parentNode.appendChild(helpLine);
+      dragging = true;
+      y0 = e.clientY;
+      height0 = cellRect.height;
+      holder.classList.add('dragging');
+    };
+
+    holder.addEventListener('mousedown', handleMousedown, false);
+  }
+
+  addColCellSelectHandler(cell) {
+    // 上方列宽控制条
+
+    const selector = cell.querySelector('.qlbt-col-tool-cell-selector');
+
+    const handleClick = e => {
+      e.preventDefault();
+
+      const dom = e.target.parentNode;
+      const domRect = dom.getBoundingClientRect();
+      const containerRect = this.quill.root.parentNode.getBoundingClientRect();
+      const tableRect = this.table.getBoundingClientRect();
+      const tableSelection = this.quill.getModule('better-table').tableSelection;
+      tableSelection.boundary = {
+        x: domRect.left - containerRect.left - 1,
+        x1: domRect.left - containerRect.left + domRect.width - 2,
+        y: tableRect.top - containerRect.top,
+        y1: tableRect.top - containerRect.top + tableRect.height - 2,
+        width: domRect.width,
+        height: tableRect.height - 2
+      };
+      tableSelection.selectedTds = tableSelection.computeSelectedTds();
+      tableSelection.repositionHelpLines();
+
+      dom.classList.add('qlbt-tool-cell-on');
+      this.activeToolCell = dom;
+    };
+    selector.addEventListener('click', handleClick, false);
+  }
+
+  addColCellHolderHandler(cell) {
+    const tableContainer = Quill.find(this.table);
+    const holder = cell.querySelector('.qlbt-col-tool-cell-holder');
+    let dragging = false;
+    let x0 = 0;
+    let x = 0;
+    let delta: any = 0;
+    let width0 = 0;
+    // helpLine relation variable
+    let tableRect: any = {};
+    let scrollContainerRect = null;
+    let cellRect: any = {};
+    let helpLine = null;
+
+    const handleDrag = e => {
+      e.preventDefault();
+
+      if (dragging) {
+        x = e.clientX;
+
+        if (width0 + x - x0 >= CELL_MIN_WIDTH) {
+          delta = x - x0;
+        } else {
+          delta = CELL_MIN_WIDTH - width0;
+        }
+        let left = cellRect.left + cellRect.width - 1 + delta;
+        if (scrollContainerRect) {
+          left -= scrollContainerRect.left;
+        }
+
+        css(helpLine, {
+          left: `${left}px`
+        });
+      }
+    };
+
+    const handleMouseup = e => {
+      e.preventDefault();
+
+      const existCells = Array.from(this.domNode.querySelectorAll('.qlbt-col-tool-cell'));
+      const colIndex = existCells.indexOf(cell);
+      let colBlot = tableContainer.colGroup().children.at(colIndex)
+      if(!colBlot || colBlot.domNode !== tableContainer.colGroup().domNode.children[colIndex]){
+        colBlot = tableContainer.colGroup().domNode.children[colIndex];
+      }
+      if (dragging) {
+        // fix: 防止 colWidth 是小数
+        const colWidth = parseInt(width0 + delta, 10);
+        if(colBlot.format){
+          colBlot.format('width', colWidth);
+        }else {
+          colBlot.width = colWidth
+        }
+        
+        css(cell, { 'min-width': `${colWidth}px` });
+
+        x0 = 0;
+        x = 0;
+        delta = 0;
+        width0 = 0;
+        dragging = false;
+        holder.classList.remove('dragging');
+      }
+
+      this.quill.root.parentNode.removeEventListener('mousemove', handleDrag, false);
+      document.removeEventListener('mouseup', handleMouseup, false);
+      tableRect = {};
+      scrollContainerRect = null;
+      cellRect = {};
+      helpLine.remove();
+      helpLine = null;
+      tableContainer.updateTableWidth();
+
+      setTimeout(() => {
+        this.updateRowToolCells();
+        const betterTableModule = this.quill.getModule('better-table');
+        const tableScrollBar = betterTableModule.tableScrollBar;
+        tableScrollBar.updateScrollBar();
+        // fix: 拖动滚动条时修正选区位置
+        const tableSelection = betterTableModule.tableSelection;
+        if (tableSelection && tableSelection.selectedTds.length) { tableSelection.refreshHelpLinesPosition(); }
+      });
+    };
+
+    const handleMousedown = e => {
+      e.preventDefault();
+
+      this.quill.root.parentNode.addEventListener('mousemove', handleDrag, false);
+      document.addEventListener('mouseup', handleMouseup, false);
+
+      tableRect = this.table.getBoundingClientRect();
+      cellRect = cell.getBoundingClientRect();
+
+      let positionValue = 'fixed';
+      let top = cellRect.top;
+      let left = cellRect.left + cellRect.width - 1;
+      if (this.quill.root === this.quill.scrollingContainer) {
+        positionValue = 'absolute';
+        scrollContainerRect = this.quill.root.getBoundingClientRect();
+        top -= scrollContainerRect.top;
+        left -= scrollContainerRect.left;
+      }
+
+      helpLine = document.createElement('div');
+      css(helpLine, {
+        position: positionValue,
+        top: `${top}px`,
+        left: `${left}px`,
+        zIndex: '100',
+        height: `${tableRect.height + COL_TOOL_HEIGHT + 8}px`,
+        width: '1px',
+        backgroundColor: PRIMARY_COLOR
+      });
+
+      this.quill.root.parentNode.appendChild(helpLine);
+      dragging = true;
+      x0 = e.clientX;
+      width0 = cellRect.width;
+      holder.classList.add('dragging');
+    };
+
+    holder.addEventListener('mousedown', handleMousedown, false);
+  }
+
+  colToolCells() {
+    return Array.from(this.domNode.querySelectorAll('.qlbt-col-tool-cell'));
+  }
+}
diff --git a/packages/fluent-editor/src/table/modules/table-operation-menu.ts b/packages/fluent-editor/src/table/modules/table-operation-menu.ts
new file mode 100644
index 0000000000..6fd101dd10
--- /dev/null
+++ b/packages/fluent-editor/src/table/modules/table-operation-menu.ts
@@ -0,0 +1,586 @@
+import * as Quill from 'quill';
+import { LANG_CONF } from '../../config/editor.config'
+import { elementRemove, arrayFrom, css, getRelativeRect } from '../utils';
+import {
+  OPERATE_MENU_ITEM_CLASS, 
+  OPERATE_MENU_COLORPICKER_ITEM_CLASS,
+  OPERATE_MENU_DIVIDING_CLASS,
+  OPERATE_MENU_SUBTITLE_CLASS,
+  OPERATE_MENU_COLORPICKER_CLASS,
+} from '../table-config'
+
+import {
+  ERROR_LIMIT,
+  MENU_ITEM_HEIGHT,
+  MENU_MIN_HEIGHT,
+  MENU_WIDTH
+} from '../table-config';
+
+const MENU_ITEMS_DEFAULT = {
+  copyCells: {
+    text: 'Copy Cells',
+    handler() {
+      this.onCopy('copy');
+    }
+  },
+  copyTable: {
+    text: 'Copy Table',
+    handler() {
+      this.tableColumnTool.destroy();
+      this.tableScrollBar.destroy();
+      this.tableSelection.clearSelection();
+      const dom = this.table.cloneNode(true);
+      const trArr = dom.querySelectorAll('tr[data-row]');
+      trArr.forEach(tr => tr.removeAttribute('data-row'));
+      dom.style.position = 'fixed';
+      dom.style.top = 0;
+      dom.style.left = 0;
+      dom.style.clip = 'rect(0,0,0,0)';
+      document.body.appendChild(dom);
+      this.setCopyRange(dom);
+      document.execCommand('copy');
+      dom.remove();
+    }
+  },
+  // tofix
+  // cutCells: {
+  //   text: 'Cut Cells',
+  //   handler() {
+  //     this.onCopy('cut');
+  //   }
+  // },
+  emptyCells: {
+    text: 'Empty Cells',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      const { selectedTds } = this.tableSelection;
+      tableContainer.emptyCells(selectedTds);
+    }
+  },
+  insertColumnRight: {
+    text: 'Insert Column After',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      const colIndex = getColToolCellIndexByBoundary(
+        this.columnToolCells,
+        this.boundary,
+        (cellRect, boundary) => {
+          return Math.abs(cellRect.x + cellRect.width - boundary.x1) <= ERROR_LIMIT;
+        },
+        this.quill.root.parentNode
+      );
+
+      const newColumn = tableContainer.insertColumn(this.boundary, colIndex, true, this.quill.root.parentNode);
+
+      this.tableColumnTool.updateColToolCells();
+      this.quill.update(Quill.sources.USER);
+      // fix: the scroll bar will go to the top when insert row/column to the table
+      // this.quill.setSelection(
+      //   this.quill.getIndex(newColumn[0]),
+      //   0,
+      //   Quill.sources.SILENT
+      // )
+      this.tableSelection.setSelection(
+        newColumn[0].domNode.getBoundingClientRect(),
+        newColumn[0].domNode.getBoundingClientRect()
+      );
+
+      setTimeout(() => this.tableScrollBar.updateScrollBar());
+    }
+  },
+
+  insertColumnLeft: {
+    text: 'Insert Column Before',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      const colIndex = getColToolCellIndexByBoundary(
+        this.columnToolCells,
+        this.boundary,
+        (cellRect, boundary) => {
+          return Math.abs(cellRect.x - boundary.x) <= ERROR_LIMIT;
+        },
+        this.quill.root.parentNode
+      );
+
+      const newColumn = tableContainer.insertColumn(this.boundary, colIndex, false, this.quill.root.parentNode);
+
+      this.tableColumnTool.updateColToolCells();
+      this.quill.update(Quill.sources.USER);
+      // this.quill.setSelection(
+      //   this.quill.getIndex(newColumn[0]),
+      //   0,
+      //   Quill.sources.SILENT
+      // )
+      this.tableSelection.setSelection(
+        newColumn[0].domNode.getBoundingClientRect(),
+        newColumn[0].domNode.getBoundingClientRect()
+      );
+
+      setTimeout(() => this.tableScrollBar.updateScrollBar());
+    }
+  },
+
+  insertRowUp: {
+    text: 'Insert Row Above',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      const affectedCells = tableContainer.insertRow(this.boundary, false, this.quill.root.parentNode);
+
+      this.tableColumnTool.updateRowToolCells();
+      this.quill.update(Quill.sources.USER);
+      // this.quill.setSelection(
+      //   this.quill.getIndex(affectedCells[0]),
+      //   0,
+      //   Quill.sources.SILENT
+      // )
+      this.tableSelection.setSelection(
+        affectedCells[0].domNode.getBoundingClientRect(),
+        affectedCells[0].domNode.getBoundingClientRect()
+      );
+
+      setTimeout(() => this.tableScrollBar.resetTableHeight(this.table));
+    }
+  },
+
+  insertRowDown: {
+    text: 'Insert Row Below',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      const affectedCells = tableContainer.insertRow(this.boundary, true, this.quill.root.parentNode);
+
+      this.tableColumnTool.updateRowToolCells();
+      this.quill.update(Quill.sources.USER);
+      // this.quill.setSelection(
+      //   this.quill.getIndex(affectedCells[0]),
+      //   0,
+      //   Quill.sources.SILENT
+      // )
+      this.tableSelection.setSelection(
+        affectedCells[0].domNode.getBoundingClientRect(),
+        affectedCells[0].domNode.getBoundingClientRect()
+      );
+
+      setTimeout(() => this.tableScrollBar.resetTableHeight(this.table));
+    }
+  },
+
+  mergeCells: {
+    text: 'Merge Cells',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      // compute merged Cell rowspan, equal to length of selected rows
+      const rowspan = tableContainer.rows().reduce((sum, row) => {
+        const rowRect = getRelativeRect(row.domNode.getBoundingClientRect(), this.quill.root.parentNode);
+        if (
+          rowRect.y > this.boundary.y - ERROR_LIMIT &&
+          rowRect.y + rowRect.height < this.boundary.y + this.boundary.height + ERROR_LIMIT
+        ) {
+          sum += 1;
+        }
+        return sum;
+      }, 0);
+
+      // compute merged cell colspan, equal to length of selected cols
+      const colspan = this.columnToolCells.reduce((sum, cell) => {
+        const cellRect = getRelativeRect(cell.getBoundingClientRect(), this.quill.root.parentNode);
+        if (
+          cellRect.x > this.boundary.x - ERROR_LIMIT &&
+          cellRect.x + cellRect.width < this.boundary.x + this.boundary.width + ERROR_LIMIT
+        ) {
+          sum += 1;
+        }
+        return sum;
+      }, 0);
+
+      const mergedCell = tableContainer.mergeCells(
+        this.boundary,
+        this.selectedTds,
+        rowspan,
+        colspan,
+        this.quill.root.parentNode
+      );
+      this.quill.update(Quill.sources.USER);
+      this.tableSelection.setSelection(
+        mergedCell.domNode.getBoundingClientRect(),
+        mergedCell.domNode.getBoundingClientRect()
+      );
+    }
+  },
+
+  unmergeCells: {
+    text: 'Split Cells',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      tableContainer.unmergeCells(this.selectedTds, this.quill.root.parentNode);
+      this.quill.update(Quill.sources.USER);
+      this.tableSelection.clearSelection();
+    }
+  },
+
+  deleteColumn: {
+    text: 'Delete Columns',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      const colIndexes = getColToolCellIndexesByBoundary(
+        this.columnToolCells,
+        this.boundary,
+        (cellRect, boundary) => {
+          return cellRect.x + ERROR_LIMIT > boundary.x && cellRect.x + cellRect.width - ERROR_LIMIT < boundary.x1;
+        },
+        this.quill.root.parentNode
+      );
+
+      const isDeleteTable = tableContainer.deleteColumns(this.boundary, colIndexes, this.quill.root.parentNode);
+      if (!isDeleteTable) {
+        this.tableColumnTool.updateColToolCells();
+        this.quill.update(Quill.sources.USER);
+        this.tableSelection.clearSelection();
+      }
+
+      setTimeout(() => this.tableScrollBar.updateScrollBar());
+    }
+  },
+
+  deleteRow: {
+    text: 'Delete Rows',
+    handler() {
+      const tableContainer = Quill.find(this.table);
+      const isDeleteTable = tableContainer.deleteRow(this.boundary, this.quill.root.parentNode);
+      if (!isDeleteTable) {
+        this.tableColumnTool.updateRowToolCells();
+        this.quill.update(Quill.sources.USER);
+        this.tableSelection.clearSelection();
+      }
+    }
+  },
+
+  deleteTable: {
+    text: 'Remove Table',
+    handler() {
+      const betterTableModule = this.quill.getModule('better-table');
+      const tableContainer = Quill.find(this.table);
+      betterTableModule.hideTableTools();
+      tableContainer.remove();
+      this.quill.update(Quill.sources.USER);
+      // fix: 右键菜单删除表格后编辑器失焦
+      this.quill.focus();
+    }
+  }
+};
+const DEFAULT_CELL_COLORS = ['white', 'red', 'yellow', 'blue'];
+const NODE_EVENT_MAP = new WeakMap();
+const MENU_MIN_HEIHGT = 150;
+let DEFAULT_COLOR_SUBTITLE = LANG_CONF['subTitleBgColor'];
+export default class TableOperationMenu {
+  tableSelection: any;
+  table: any;
+  quill: any;
+  options: any;
+  menuItems: any;
+  tableColumnTool: any;
+  tableScrollBar: any;
+  boundary: any;
+  selectedTds: any;
+  destroyHandler: any;
+  columnToolCells: any;
+  colorSubTitle: any;
+  cellColors: any;
+  domNode: any;
+
+  constructor(params, quill, options) {
+    const betterTableModule = quill.getModule('better-table');
+    this.tableSelection = betterTableModule.tableSelection;
+    this.table = params.table;
+    this.quill = quill;
+    this.options = options
+    this.menuItems = { ...MENU_ITEMS_DEFAULT, ...options.items};
+    this.tableColumnTool = betterTableModule.columnTool;
+    //this.tableRowTool = betterTableModule.rowTool
+    this.tableScrollBar = betterTableModule.tableScrollBar;
+    this.boundary = this.tableSelection.boundary;
+    this.selectedTds = this.tableSelection.selectedTds;
+    this.destroyHandler = this.destroy.bind(this);
+    this.columnToolCells = this.tableColumnTool.colToolCells();
+    this.colorSubTitle =
+      options.color && options.color.text
+        ? options.color.text
+        : DEFAULT_COLOR_SUBTITLE
+    this.cellColors =
+      options.color && options.color.colors
+        ? options.color.colors
+        : DEFAULT_CELL_COLORS
+
+    this.menuInitial(params);
+    this.mount();
+    document.addEventListener('click', this.destroyHandler, false);
+  }
+
+  mount() {
+    this.quill.root.parentNode.appendChild(this.domNode);
+  }
+
+  destroy() {
+    const menuItems = arrayFrom(
+      this.domNode.querySelectorAll('.' + OPERATE_MENU_ITEM_CLASS)
+    )
+    const colorPickerItems = arrayFrom(
+      this.domNode.querySelectorAll('.' + OPERATE_MENU_COLORPICKER_ITEM_CLASS)
+    )
+    const nodes = menuItems.concat(colorPickerItems)
+
+    nodes.forEach((node) => {
+      if (NODE_EVENT_MAP.has(node)) {
+        const unregister = NODE_EVENT_MAP.get(node)
+
+        if (unregister && typeof unregister === 'function') {
+          unregister()
+        }
+      }
+    })
+
+    elementRemove(this.domNode)
+    document.removeEventListener('mousedown', this.destroyHandler, false)
+
+    return null
+  }
+
+  menuInitial({ cell, left, top }) {
+    const rowspan = cell.getAttribute('rowspan');
+    const colspan = cell.getAttribute('colspan');
+    const winHeight = window.innerHeight || Math.max(document.documentElement.clientHeight, document.body.clientHeight);
+    const num = Object.keys(this.menuItems) || [];
+    const menuHeight = MENU_ITEM_HEIGHT * num.length || MENU_MIN_HEIGHT;
+    const transformOffset = checkAndGetViewPointChange(this.quill.root.parentNode, left, top);
+    const leftPos = left - transformOffset.offsetX;
+    const topPos = top - transformOffset.offsetY;
+    const cssContent = {
+      left: `${leftPos}px`,
+      top: `${topPos}px`,
+      'min-height': `${MENU_MIN_HEIGHT}px`,
+      width: `${MENU_WIDTH}px`,
+    };
+
+    if (menuHeight + top > winHeight && menuHeight < winHeight) {
+      delete cssContent.top;
+      cssContent['bottom'] = '10px';
+    }
+
+    this.domNode = document.createElement('div');
+    this.domNode.classList.add('qlbt-operation-menu');
+    css(this.domNode, cssContent);
+
+    for (const name in this.menuItems) {
+      if (this.menuItems[name]) {
+        const item = { ...MENU_ITEMS_DEFAULT[name], ...this.menuItems[name]};
+        const dom = this.menuItemCreator(item);
+        if (
+          (name === 'mergeCells' && this.tableSelection.selectedTds.length === 1) ||
+          (name === 'unmergeCells' && rowspan === 1 && colspan === 1)
+        ) {
+          dom.classList.add('qlbt-operation-menu-disabled');
+        } else {
+          dom.addEventListener('mouseup', item.handler.bind(this), false);
+        }
+        this.domNode.appendChild(dom);
+      }
+    }
+
+    // if colors option is false, disabled bg color
+    if (this.options.color && this.options.color !== false) {
+      this.domNode.appendChild(dividingCreator())
+      this.domNode.appendChild(subTitleCreator(this.colorSubTitle))
+      this.domNode.appendChild(this.colorsItemCreator(this.cellColors))
+    }
+
+    // create dividing line
+    function dividingCreator() {
+      const dividing = document.createElement('div')
+      dividing.classList.add(OPERATE_MENU_DIVIDING_CLASS)
+      return dividing
+    }
+
+    // create subtitle for menu
+    function subTitleCreator(title) {
+      const subTitle = document.createElement('div')
+      subTitle.classList.add(OPERATE_MENU_SUBTITLE_CLASS)
+      subTitle.innerText = title
+      return subTitle
+    }
+  }
+
+  colorsItemCreator(colors) {
+    const self = this
+    const node = document.createElement('div')
+    node.classList.add(OPERATE_MENU_COLORPICKER_CLASS)
+
+    colors.forEach((color) => {
+      const colorBox = colorBoxCreator(color)
+      node.appendChild(colorBox)
+    })
+
+    function colorBoxCreator(color) {
+      const box = document.createElement('div')
+      box.classList.add(OPERATE_MENU_COLORPICKER_ITEM_CLASS)
+      box.setAttribute('data-color', color)
+      box.style.backgroundColor = color
+
+      const clickHandler = function(){
+        const selectedTds = self.tableSelection.selectedTds
+        if (selectedTds && selectedTds.length > 0) {
+          selectedTds.forEach((tableCell) => {
+            tableCell.domNode.children[0].setAttribute('data-parent-bg',color)
+            tableCell.format('cell-bg', color)
+          })
+        }
+      }
+
+      box.addEventListener('click', clickHandler, false)
+
+      NODE_EVENT_MAP.set(box, () => {
+        box.removeEventListener('click', clickHandler, false)
+      })
+
+      return box
+    }
+
+    return node
+  }
+
+  menuItemCreator({ text }) {
+    const node = document.createElement('div');
+    node.classList.add('qlbt-operation-menu-item');
+    node.innerText = text;
+    // node.addEventListener('click', handler.bind(this), false)
+    return node;
+  }
+
+  onCopy(operation) {
+    const { selectedTds } = this.tableSelection;
+    const virtualTable = this.createVirtualTable(selectedTds, operation);
+    document.body.appendChild(virtualTable);
+    this.setCopyRange(virtualTable);
+    this.tableSelection.preSelectedTable = virtualTable;
+    this.tableSelection.preSelectedTds = selectedTds;
+    document.execCommand('copy');
+    virtualTable.remove();
+    if (operation === 'cut') {
+      const tableContainer = Quill.find(this.table);
+      tableContainer.emptyCells(selectedTds);
+    }
+  }
+
+  createVirtualTable(selectedTds, operation) {
+    const virtualTable: any = document.createElement('table');
+    virtualTable.style.position = 'fixed';
+    virtualTable.style.top = 0;
+    virtualTable.style.left = 0;
+    virtualTable.style.clip = 'rect(0,0,0,0)';
+    let preParentSign = '';
+    let virtualTr = null;
+    selectedTds.forEach(selectedCell => {
+      const { domNode, parent } = selectedCell;
+      const currentParentSign = parent.domNode.getAttribute('data-row');
+      const rowspan = domNode.firstChild.dataset.rowspan;
+      const colspan = domNode.firstChild.dataset.colspan;
+      const row = domNode.firstChild.dataset.row;
+      const cell = domNode.firstChild.dataset.cell;
+
+      selectedCell.dataCell = cell;
+      selectedCell.dataRow = row;
+      selectedCell.dataColSpan = colspan;
+      selectedCell.dataRowSpan = rowspan;
+
+      if (currentParentSign !== preParentSign) {
+        if (preParentSign !== '') {
+          virtualTable.appendChild(virtualTr);
+        }
+        virtualTr = document.createElement('tr');
+        preParentSign = currentParentSign;
+      }
+
+      const domNodeWidth = domNode.offsetWidth;
+      const cloneNode = domNode.cloneNode(true);
+      cloneNode.setAttribute('width', domNodeWidth);
+
+      virtualTr.appendChild(cloneNode);
+    });
+    virtualTable.appendChild(virtualTr);
+    return virtualTable;
+  }
+
+  setCopyRange(selectedNodes) {
+    const range = document.createRange();
+    const windowSelectionRange = window.getSelection();
+    range.selectNodeContents(selectedNodes);
+    windowSelectionRange.removeAllRanges();
+    windowSelectionRange.addRange(range);
+  }
+
+  groupTableCell(selectedTds) {
+    const rowGroup = [];
+    let dataRow = '';
+    let preDataRow = '';
+    let index = 0;
+    selectedTds.forEach(tableCell => {
+      dataRow = tableCell.parent.domNode.getAttribute('data-row');
+
+      if (dataRow !== preDataRow) {
+        if (preDataRow !== '') {
+          index++;
+        }
+        rowGroup[index] = [];
+        preDataRow = dataRow;
+      }
+
+      rowGroup[index].push(tableCell);
+    });
+    return rowGroup;
+  }
+}
+
+function getColToolCellIndexByBoundary(cells, boundary, conditionFn, container) {
+  return cells.reduce((findIndex, cell) => {
+    const cellRect = getRelativeRect(cell.getBoundingClientRect(), container);
+    if (conditionFn(cellRect, boundary)) {
+      findIndex = cells.indexOf(cell);
+    }
+    return findIndex;
+  }, false);
+}
+
+function getColToolCellIndexesByBoundary(cells, boundary, conditionFn, container) {
+  return cells.reduce((findIndexes, cell) => {
+    const cellRect = getRelativeRect(cell.getBoundingClientRect(), container);
+    if (conditionFn(cellRect, boundary)) {
+      findIndexes.push(cells.indexOf(cell));
+    }
+    return findIndexes;
+  }, []);
+}
+
+function checkAndGetViewPointChange(parentContainer: HTMLElement, left: number, top: number) {
+  if (!parentContainer) {
+    return {
+      offsetX: 0,
+      offsetY: 0,
+    };
+  }
+  // 模拟一个元素测预测位置和最终位置是否符合，如果不符合则是有transform等造成的偏移
+  const testEl = document.createElement('div');
+  css(testEl, {
+    opacity: '0',
+    position: 'fixed',
+    left: `${left}px`,
+    top: `${top}px`,
+    width: '1px',
+    height: '1px',
+    zIndex: '-999999',
+  });
+  parentContainer.appendChild(testEl);
+  const testElPosition = testEl.getBoundingClientRect();
+  parentContainer.removeChild(testEl);
+  return {
+    offsetX: testElPosition.left - left,
+    offsetY: testElPosition.top - top,
+  };
+}
diff --git a/packages/fluent-editor/src/table/modules/table-scroll-bar.ts b/packages/fluent-editor/src/table/modules/table-scroll-bar.ts
new file mode 100644
index 0000000000..3fc6f48ee8
--- /dev/null
+++ b/packages/fluent-editor/src/table/modules/table-scroll-bar.ts
@@ -0,0 +1,236 @@
+import { SCROLL_BAR_PANEL_HEIGHT } from '../table-config';
+import { css } from '../utils';
+
+export default class TableScrollBar {
+  table: any;
+  quill: any;
+  modulesContainer: any;
+  domNode: any;
+  oldRootScrollTop: any;
+  // @ts-ignore
+  prev: number;
+  columnToolDomNode: any;
+  columnCtrlPanel: any;
+  leftMask: any;
+  tableViewRect: any;
+  tableRect: any;
+  containerRect: any;
+  subscriber: any;
+  // @ts-ignore
+  tableMoveDistance: number;
+  // @ts-ignore
+  maxBarLeft: number;
+  // @ts-ignore
+  scrollBar: Element;
+  // @ts-ignore
+  isTableOverflow: boolean; // 表格是否溢出开关，判断开关值后只改变样式一次，不重复修改
+
+  constructor(table, quill, dom) {
+    if (!table) {
+      return;
+    }
+    this.table = table;
+    this.quill = quill;
+    this.modulesContainer = dom;
+    this.domNode = null;
+    this.oldRootScrollTop = this.quill.root.scrollTop;
+    this.prev = 0;
+
+    const betterTableModule = this.quill.getModule('better-table');
+    const tableColumnTool = betterTableModule.columnTool;
+    this.columnToolDomNode = tableColumnTool.domNode;
+    this.columnCtrlPanel = tableColumnTool.columnCtrlPanel;
+    this.leftMask = tableColumnTool.leftMask;
+
+    this.updateScrollBar();
+
+    if (this.quill.root === this.quill.scrollingContainer) {
+      this.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this));
+    }
+  }
+
+  handleQuillRootScroll() {
+    if (!this.domNode) {
+      return;
+    }
+    const curTableRect = this.table.getBoundingClientRect();
+    const curContainerRect = this.quill.root.parentNode.getBoundingClientRect();
+    const tableTop = curTableRect.top + SCROLL_BAR_PANEL_HEIGHT;
+    const tableBottom = curTableRect.top + curTableRect.height - 1;
+    const containerBottom = curContainerRect.top + curContainerRect.height;
+    if (containerBottom < tableBottom && containerBottom > tableTop) { // 表格下端溢出容器下端
+      if (!this.isTableOverflow) {
+        this.isTableOverflow = true;
+        css(this.domNode, {
+          display: 'block',
+          top: `${this.containerRect.height - SCROLL_BAR_PANEL_HEIGHT}px`,
+          marginTop: '0px'
+        });
+      }
+    } else if (containerBottom <= tableTop) { // 表格上端溢出容器下端
+      this.isTableOverflow = false;
+      this.domNode.style.display = 'none';
+    } else { // 表格下端在容器内
+      this.setScrollBarToBottom();
+      css(this.domNode, { marginTop: `${this.oldRootScrollTop - this.quill.root.scrollTop}px` });
+    }
+  }
+
+  setScrollBarToBottom() {
+    if (this.isTableOverflow) {
+      this.isTableOverflow = false;
+      const barPos = this.tableRect.top + this.tableRect.height - this.containerRect.top - 1;
+      css(this.domNode, { display: 'block', top: `${barPos}px` });
+    }
+  }
+
+  resetTableHeight(table) {
+    if (this.domNode) {
+      // 表格的高度改变，重置初始化tableRect的高度，但不重置其他坐标值
+      this.tableRect.height = table.getBoundingClientRect().height;
+      this.isTableOverflow = !this.isTableOverflow;
+      this.handleQuillRootScroll();
+    }
+  }
+
+  setScrollBarMove(pos, isMouse) {
+    // 获取当前滑块左边距和鼠标两次事件节点之间的位移差，计算当前滑块位置及是否显示左右遮罩层，通过比例计算表格位移并赋值
+    const currentBarLeft = parseInt(getComputedStyle(this.scrollBar)['left'], 10);
+    let left = isMouse ? pos - this.prev + currentBarLeft : currentBarLeft + pos;
+    this.showMask(left);
+    left = this.getLimitedDistance(left);
+    const scale = this.tableViewRect.width / this.tableRect.width;
+    const move = left / scale;
+    const columnCtrlPanelLeft = this.tableViewRect.left - this.containerRect.left - move;
+    css(this.scrollBar, { left: `${left}px` }); // 移动表格滚动条
+    css(this.columnCtrlPanel, { left: `${columnCtrlPanelLeft}px` }); // 移动顶部列宽控制条
+    this.table.parentNode.scrollLeft = move; // 移动表格
+    if (isMouse) {
+      this.prev = pos;
+    }
+
+    // fix: 拖动滚动条时修正选区位置
+    const tableSelection = this.quill.getModule('better-table').tableSelection;
+    if (tableSelection && tableSelection.selectedTds.length) { tableSelection.refreshHelpLinesPosition(); }
+  }
+
+  handleScrollBarMouseDown(mouseDownEvent) {
+    mouseDownEvent.preventDefault();
+
+    this.prev = mouseDownEvent.clientX;
+    this.subscriber =(mouseMoveEvent: any) => {
+      mouseMoveEvent.preventDefault();
+      mouseMoveEvent.stopPropagation();
+      this.setScrollBarMove(mouseMoveEvent.clientX, true);
+    }
+    this.quill.root.parentNode.addEventListener('mousemove',this.subscriber, false)
+    document.addEventListener('mouseup', this.handleScrollBarMouseup.bind(this), false);
+  }
+
+  handleScrollBarMouseup(event) {
+    event.preventDefault();
+    this.quill.root.parentNode.removeEventListener('mousemove',this.subscriber)
+    document.removeEventListener('mouseup', this.handleScrollBarMouseup.bind(this), false);
+  }
+
+  handleWheel(event) {
+    // 按住 Shift 滚动鼠标滚轮，可以对表格进行横向滚动
+    if (event.shiftKey) {
+      const { deltaY } = event; // 每次滚动鼠标滚轮移动的距离
+      this.setScrollBarMove(deltaY, false);
+    }
+  }
+
+  showMask(distance) {
+    // 根据当前滑块左边距判断是否显示左右遮罩层
+    if (distance >= Math.floor(this.maxBarLeft)) {
+      css(this.leftMask, { display: 'block' });
+    } else if (distance <= 0) {
+      css(this.leftMask, { display: 'none' });
+    } else {
+      css(this.leftMask, { display: 'block' });
+    }
+  }
+
+  getLimitedDistance(distance) {
+    if (distance >= Math.floor(this.maxBarLeft)) {
+      distance = this.maxBarLeft;
+    } else if (distance <= 0) {
+      distance = 0;
+    }
+    return distance;
+  }
+
+  updateScrollBar() {
+    if (!this.table?.parentNode) {
+      return;
+    }
+    // 获取表格尺寸和表格容器尺寸
+    const tableRect = this.table.getBoundingClientRect();
+    const tableViewRect = this.table.parentNode.getBoundingClientRect();
+    const tableMoveDistance = tableRect.width - tableViewRect.width; // 表格最大移动距离
+    this.tableRect = tableRect;
+    this.tableViewRect = tableViewRect;
+    this.tableMoveDistance = tableMoveDistance;
+    this.oldRootScrollTop = this.quill.root.scrollTop;
+
+    if (tableMoveDistance > 0) {
+      this.createScrollBar();
+    } else {
+      this.destroyScrollBar();
+    }
+  }
+
+  createScrollBar() {
+    // 列控制条增加表格相应位移
+    const parent = this.quill.root.parentNode;
+    const containerRect = parent.getBoundingClientRect(); // 编辑器容器宽度
+    this.containerRect = containerRect;
+    css(this.columnCtrlPanel, {
+      left: `${this.tableViewRect.left - containerRect.left - this.table.parentNode.scrollLeft}px`
+    });
+
+    // 创建滚动条
+    if (this.domNode) { this.domNode.remove(); }
+    this.domNode = document.createElement('div');
+    this.domNode.classList.add('qlbt-table-scroll-bar-panel');
+    this.scrollBar = document.createElement('div');
+    this.scrollBar.classList.add('qlbt-table-scroll-bar');
+    this.scrollBar.addEventListener('mousedown', this.handleScrollBarMouseDown.bind(this), false);
+    const scale = this.tableViewRect.width / this.tableRect.width;
+    const barWidth = this.tableViewRect.width - this.tableMoveDistance * scale; // 滑块宽度
+    css(this.scrollBar, { width: `${barWidth}px` });
+    this.domNode.appendChild(this.scrollBar);
+
+    // 判断当前表格是否存在位移，如存在通过比例计算滑块当前位移并赋值
+    const tableScrollLeft = this.table.parentNode.scrollLeft;
+    this.maxBarLeft = this.tableMoveDistance * scale; // 滑块最大移动距离
+    if (tableScrollLeft) {
+      const barLeft = tableScrollLeft * scale;
+      this.showMask(barLeft);
+      css(this.scrollBar, { left: `${this.getLimitedDistance(barLeft)}px` });
+    }
+
+    // 将滚动条插入到 table control panel 中
+    const barPos = this.tableRect.top + this.tableRect.height - containerRect.top - 1;
+    this.isTableOverflow = containerRect.top + containerRect.height < this.tableRect.top + this.tableRect.height;
+    this.modulesContainer.appendChild(this.domNode);
+    css(this.domNode, { top: `${Math.min(containerRect.height - SCROLL_BAR_PANEL_HEIGHT, barPos)}px` });
+
+    // 绑定鼠标滚轮事件：Shift+鼠标滚轮，滚动表格横向滚动条
+    document.addEventListener('wheel', this.handleWheel.bind(this));
+  }
+
+  destroyScrollBar() {
+    css(this.leftMask, { display: 'none' });
+    this.columnCtrlPanel.removeAttribute('style');
+    this.maxBarLeft = null;
+    this.destroy();
+  }
+
+  destroy() {
+    if (this.domNode) { this.domNode.remove(); }
+    this.quill.root.removeEventListener('scroll', this.handleQuillRootScroll.bind(this));
+    document.removeEventListener('wheel', this.handleWheel.bind(this));
+  }
+}
diff --git a/packages/fluent-editor/src/table/modules/table-selection.ts b/packages/fluent-editor/src/table/modules/table-selection.ts
new file mode 100644
index 0000000000..04d0b887d9
--- /dev/null
+++ b/packages/fluent-editor/src/table/modules/table-selection.ts
@@ -0,0 +1,383 @@
+import * as Quill from 'quill';
+import { TableCell } from '../formats/table';
+import { ERROR_LIMIT, LINE_POSITIONS, PRIMARY_COLOR } from '../table-config';
+import { css, getRelativeRect } from '../utils';
+
+export default class TableSelection {
+  table: any;
+  quill: any;
+  modulesContainer: any;
+  parent: any;
+  boundary: any;
+  // @ts-ignore
+  selectedTds: any[];
+  // @ts-ignore
+  dragging: boolean;
+  preSelectedTable: any;
+  oldRootScrollTop: any;
+  selectingHandler: any;
+  tdEditHandler: any;
+  tdResizeHandler: any;
+  endTd: any;
+  startTd: any;
+  editTd: any;
+  left: any;
+  bottom: any;
+  top: any;
+  right: any;
+  /* eslint-disable-next-line no-constructor-return*/
+  constructor(table, quill, dom) {
+    if (!table) {
+      return null;
+    }
+    this.table = table;
+    this.quill = quill;
+    this.modulesContainer = dom;
+    this.parent = this.quill.root.parentNode;
+    this.boundary = {}; // params for selected square
+    this.selectedTds = []; // array for selected table-cells
+    this.dragging = false;
+    this.preSelectedTable = null;
+    this.oldRootScrollTop = this.quill.root.scrollTop;
+
+    this.selectingHandler = this.mouseDownHandler.bind(this);
+
+    this.tdEditHandler = this.setTdEditable.bind(this);
+    this.tdResizeHandler = this.resizeTd.bind(this);
+
+    this.helpLinesInitial();
+    this.isEditorHasScrollBar();
+
+    this.quill.root.parentNode.addEventListener('mousedown', this.selectingHandler, false);
+    this.quill.on('text-change', this.tdResizeHandler);
+    if (this.quill.root === this.quill.scrollingContainer) {
+      this.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this));
+    }
+  }
+
+  handleQuillRootScroll() {
+    LINE_POSITIONS.forEach((direction) => {
+      const selectionLine = this[direction];
+      if (selectionLine) {
+        selectionLine.style.marginTop = `${this.oldRootScrollTop - this.quill.root.scrollTop}px`;
+      }
+    });
+  }
+
+  isEditorHasScrollBar() {
+    if (this.quill.root.scrollHeight > this.quill.root.clientHeight) {
+      css(this.modulesContainer, { width: 'calc(100% - 23px)' });
+    } else {
+      this.modulesContainer.removeAttribute('style');
+    }
+  }
+
+  helpLinesInitial() {
+    LINE_POSITIONS.forEach((direction) => {
+      this[direction] = document.createElement('div');
+      this[direction].classList.add('qlbt-selection-line');
+      if (direction === 'left') {
+        this[direction].classList.add('qlbt-selection-line-first');
+        const ctrlPointLeft = document.createElement('div');
+        this[direction].appendChild(ctrlPointLeft);
+      }
+      if (direction === 'bottom') {
+        this[direction].classList.add('qlbt-selection-line-last');
+        const ctrlPointRight = document.createElement('div');
+        this[direction].appendChild(ctrlPointRight);
+      }
+      css(this[direction], {
+        position: 'absolute',
+        display: 'none',
+        'background-color': PRIMARY_COLOR,
+      });
+      this.modulesContainer.appendChild(this[direction]);
+    });
+  }
+
+  mouseDownHandler(e) {
+    if (e.button !== 0) {
+      return;
+    }
+    const self: any = this;
+    const betterTableModule = this.quill.getModule('better-table');
+    const tableColumnTool = betterTableModule.columnTool;
+    if (tableColumnTool.activeToolCell) {
+      tableColumnTool.activeToolCell.classList.remove('qlbt-tool-cell-on');
+      tableColumnTool.activeToolCell = null;
+    }
+    if (e.target.closest('.quill-better-table')) {
+      if (e.shiftKey) {
+        this.endTd = e.target.closest('td[data-row]');
+        this.drawSelection(this, true);
+        // avoid select text in multiple table-cell
+        if (this.startTd !== this.endTd) {
+          this.quill.blur();
+        }
+      } else {
+        this.startTd = e.target.closest('td[data-row]');
+        this.drawSelection(this, false);
+        this.dragging = true;
+
+        this.parent.addEventListener('mousemove', mouseMoveHandler, false);
+        document.addEventListener('mouseup', mouseUpHandler, false);
+      }
+    } else if (e.target.closest('.qlbt-selection-line')) {
+      this.parent.addEventListener('mousemove', mouseMoveHandler, false);
+      document.addEventListener('mouseup', mouseUpHandler, false);
+    }
+
+    function mouseMoveHandler(event) {
+      event.stopPropagation();
+
+      if (event.button !== 0 || !event.target.closest('.quill-better-table')) {
+        return;
+      }
+      self.endTd = event.target.closest('td[data-row]');
+      if (!self.endTd) {
+        return;
+      }
+      self.drawSelection(self, true);
+      // avoid select text in multiple table-cell
+      if (self.startTd !== self.endTd) {
+        self.quill.blur();
+      }
+    }
+
+    function mouseUpHandler() {
+      self.parent.removeEventListener('mousemove', mouseMoveHandler, false);
+      document.removeEventListener('mouseup', mouseUpHandler, false);
+      self.dragging = false;
+    }
+  }
+
+  drawSelection(self, end) {
+    // fix: 如果滚动条拖动，startTd的位置已经改变了，需要重置startTdRect
+    self.startTdRect = getRelativeRect(self.startTd.getBoundingClientRect(), self.quill.root.parentNode);
+    let endTdRect = self.startTdRect;
+    if (end) {
+      self.endTdRect = getRelativeRect(self.endTd.getBoundingClientRect(), self.quill.root.parentNode);
+      endTdRect = self.endTdRect;
+    }
+    self.boundary = computeBoundaryFromRects(self.startTdRect, endTdRect);
+    self.selectedTds = self.computeSelectedTds();
+    self.repositionHelpLines();
+  }
+
+  setTdEditable(e) {
+    if (!this.editTd) {
+      return;
+    }
+    this.parent.removeEventListener('keypress', this.tdEditHandler, false);
+    const dom = this.editTd.domNode;
+    dom.removeEventListener('click', this.tdEditHandler, false);
+    dom.classList.add('editing-select-able');
+    dom.setAttribute('contenteditable', true);
+    if (e.type === 'keypress') {
+      if (dom.childNodes.length > 1 || dom.firstChild.innerHTML !== '<br>') {
+        const blank = dom.firstChild.cloneNode();
+        blank.innerHTML = '<br>';
+        dom.innerHTML = '';
+        dom.appendChild(blank);
+      }
+      dom.focus();
+    }
+  }
+
+  resizeTd() {
+    if (!this.editTd || (this.left && !this.left.offsetParent)) {
+      return;
+    }
+    if (this.selectedTds.length > 1) {
+      this.refreshHelpLinesPosition();
+    } else {
+      const dom = this.editTd.domNode;
+      const domRect = getRelativeRect(dom.getBoundingClientRect(), this.quill.root.parentNode);
+      this.boundary = computeBoundaryFromRects(domRect, domRect);
+      this.repositionHelpLines();
+    }
+
+    // 判断编辑器是否有滚动条，调整遮罩宽度
+    this.isEditorHasScrollBar();
+
+    // 更新行高 更新滑块位置
+    const betterTableModule = this.quill.getModule('better-table');
+    const tableColumnTool = betterTableModule.columnTool;
+    if (tableColumnTool) {
+      tableColumnTool.updateRowToolCells();
+      const tableViewRect = this.table.parentNode.getBoundingClientRect();
+      if (tableColumnTool.leftMask) {
+        css(tableColumnTool.leftMask, { height: `${tableViewRect.height + 50}px` });
+      }
+    }
+
+    const tableScrollBar = betterTableModule.tableScrollBar;
+    tableScrollBar.resetTableHeight(this.table);
+  }
+
+  resetTd(e) {
+    const dom = e.target;
+    dom.classList.remove('editing-select-able');
+    dom.setAttribute('contenteditable', false);
+    dom.removeAttribute('contenteditable');
+  }
+
+  correctBoundary() {
+    const tableContainer = Quill.find(this.table);
+    const tableCells = tableContainer.descendants(TableCell);
+
+    tableCells.forEach((tableCell) => {
+      const { x, y, width, height } = getRelativeRect(tableCell.domNode.getBoundingClientRect(), this.quill.root.parentNode);
+      const isCellIntersected =
+        ((x + ERROR_LIMIT >= this.boundary.x && x + ERROR_LIMIT <= this.boundary.x1) ||
+          (x - ERROR_LIMIT + width >= this.boundary.x && x - ERROR_LIMIT + width <= this.boundary.x1)) &&
+        ((y + ERROR_LIMIT >= this.boundary.y && y + ERROR_LIMIT <= this.boundary.y1) ||
+          (y - ERROR_LIMIT + height >= this.boundary.y && y - ERROR_LIMIT + height <= this.boundary.y1));
+      if (isCellIntersected) {
+        this.boundary = computeBoundaryFromRects(this.boundary, { x, y, width, height });
+      }
+    });
+  }
+
+  computeSelectedTds() {
+    const tableContainer = Quill.find(this.table);
+    const tableCells = tableContainer.descendants(TableCell);
+
+    const result = tableCells.reduce((selectedCells, tableCell) => {
+      const { x, y, width, height } = getRelativeRect(tableCell.domNode.getBoundingClientRect(), this.quill.root.parentNode);
+      const isCellIncluded =
+        x + ERROR_LIMIT >= this.boundary.x &&
+        x - ERROR_LIMIT + width <= this.boundary.x1 &&
+        y + ERROR_LIMIT >= this.boundary.y &&
+        y - ERROR_LIMIT + height <= this.boundary.y1;
+
+      if (isCellIncluded) {
+        selectedCells.push(tableCell);
+      }
+
+      return selectedCells;
+    }, []);
+
+    if (result.length === 1 && this.editTd !== result[0]) {
+      const resetTds = this.table.querySelectorAll('td[contenteditable=true]');
+      resetTds.forEach((td) => this.resetTd({ target: td }));
+      this.editTd = result[0];
+      this.editTd.domNode.addEventListener('mousedown', this.tdEditHandler, false);
+      this.parent.addEventListener('keypress', this.tdEditHandler, false);
+    }
+
+    return result;
+  }
+
+  repositionHelpLines() {
+    this.oldRootScrollTop = this.quill.root.scrollTop;
+    if (!this.left) {
+      return;
+    }
+
+    css(this.left, {
+      display: 'block',
+      left: `${this.boundary.x - 1}px`,
+      top: `${this.boundary.y}px`,
+      height: `${this.boundary.height + 1}px`,
+      width: '1px',
+      'margin-top': '0px',
+    });
+
+    css(this.right, {
+      display: 'block',
+      left: `${this.boundary.x1}px`,
+      top: `${this.boundary.y - 1}px`,
+      height: `${this.boundary.height + 1}px`,
+      width: '1px',
+      'margin-top': '0px',
+    });
+
+    css(this.top, {
+      display: 'block',
+      left: `${this.boundary.x - 1}px`,
+      top: `${this.boundary.y - 1}px`,
+      width: `${this.boundary.width + 1}px`,
+      height: '1px',
+      'margin-top': '0px',
+    });
+
+    css(this.bottom, {
+      display: 'block',
+      left: `${this.boundary.x - 1}px`,
+      top: `${this.boundary.y1}px`,
+      width: `${this.boundary.width + 1}px`,
+      height: '1px',
+      'margin-top': '0px',
+    });
+  }
+
+  // based on selectedTds compute positions of help lines
+  // It is useful when selectedTds are not changed
+  refreshHelpLinesPosition() {
+    const startRect = getRelativeRect(this.selectedTds[0].domNode.getBoundingClientRect(), this.quill.root.parentNode);
+    const endRect = getRelativeRect(
+      this.selectedTds[this.selectedTds.length - 1].domNode.getBoundingClientRect(),
+      this.quill.root.parentNode
+    );
+    this.boundary = computeBoundaryFromRects(startRect, endRect);
+    this.repositionHelpLines();
+  }
+
+  destroy() {
+    const resetTds = this.table.querySelectorAll('td[contenteditable=true]');
+    resetTds.forEach((td) => this.resetTd({ target: td }));
+
+    LINE_POSITIONS.forEach((direction) => {
+      if (this[direction]) {
+        this[direction].remove();
+        this[direction] = null;
+      }
+    });
+
+    this.quill.root.parentNode.removeEventListener('mousedown', this.selectingHandler, false);
+
+    delete this.editTd;
+
+    return null;
+  }
+
+  setSelection(startRect, endRect) {
+    this.boundary = computeBoundaryFromRects(
+      getRelativeRect(startRect, this.quill.root.parentNode),
+      getRelativeRect(endRect, this.quill.root.parentNode)
+    );
+    this.correctBoundary();
+    this.selectedTds = this.computeSelectedTds();
+    this.repositionHelpLines();
+  }
+
+  clearSelection() {
+    const resetTds = this.table.querySelectorAll('td[contenteditable=true]');
+    resetTds.forEach((td) => this.resetTd({ target: td }));
+    this.boundary = {};
+    this.selectedTds = [];
+    LINE_POSITIONS.forEach((direction) => {
+      if (this[direction]) {
+        css(this[direction], {
+          display: 'none',
+        });
+      }
+    });
+  }
+}
+
+function computeBoundaryFromRects(startRect, endRect) {
+  const x = Math.min(startRect.x, endRect.x, startRect.x + startRect.width - 1, endRect.x + endRect.width - 1);
+
+  const x1 = Math.max(startRect.x, endRect.x, startRect.x + startRect.width - 1, endRect.x + endRect.width - 1);
+
+  const y = Math.min(startRect.y, endRect.y, startRect.y + startRect.height - 1, endRect.y + endRect.height - 1);
+
+  const y1 = Math.max(startRect.y, endRect.y, startRect.y + startRect.height - 1, endRect.y + endRect.height - 1);
+
+  const width = x1 - x;
+  const height = y1 - y;
+
+  return { x, x1, y, y1, width, height };
+}
diff --git a/packages/fluent-editor/src/table/table-config.ts b/packages/fluent-editor/src/table/table-config.ts
new file mode 100644
index 0000000000..3f4b85b3ed
--- /dev/null
+++ b/packages/fluent-editor/src/table/table-config.ts
@@ -0,0 +1,42 @@
+export const TABLE_CELL_LINE_CLASS = 'qlrte__better-table-cell-line'
+export const ROW_TOOL_CLASS = 'qlrte__row-tool'
+export const ROW_TOOL_CELL_CLASS = 'qlrte__row-tool-cell'
+export const ROW_TOOL_CELL_HOLDER_CLASS = 'qlrte__row-tool-cell-holder'
+export const COL_TOOL_CLASS = 'qlrte__col-tool'
+export const COL_TOOL_CELL_CLASS = 'qlrte__col-tool-cell'
+export const COL_TOOL_CELL_HOLDER_CLASS = 'qlrte__col-tool-cell-holder'
+export const SELECT_LINE_CLASS = 'qlrte__selection-line'
+export const OPERATE_MENU_CLASS = 'qlrte__op-menu'
+export const OPERATE_MENU_ITEM_CLASS = 'qlrte__op-menu-item'
+export const OPERATE_MENU_ICON_CLASS = 'qlrte__op-menu-icon'
+export const OPERATE_MENU_ICON_PREFIX_CLASS = 'qlrte__op-menu-icon-prefix'
+export const OPERATE_MENU_TEXT_CLASS = 'qlrte__op-menu-text'
+export const OPERATE_MENU_DIVIDING_CLASS = 'qlrte__op-menu-dividing'
+export const OPERATE_MENU_SUBTITLE_CLASS = 'qlrte__op-menu-subtitle'
+export const OPERATE_MENU_COLORPICKER_CLASS = 'qlrte__op-menu-color-picker'
+export const OPERATE_MENU_COLORPICKER_ITEM_CLASS =
+  'qlrte__op-menu-color-picker-item'
+export const COL_ATTRIBUTES = ['width'];
+export const COL_DEFAULT = {
+  width: 100
+};
+export const CELL_IDENTITY_KEYS = ['row', 'cell'];
+export const CELL_ATTRIBUTES = ['rowspan', 'colspan'];
+export const CELL_DEFAULT = {
+  rowspan: 1,
+  colspan: 1
+};
+export const ERROR_LIMIT = 5;
+
+export const SCROLL_BAR_PANEL_HEIGHT = 32;
+export const ROW_TOOL_WIDTH = 16;
+export const COL_TOOL_HEIGHT = 16;
+export const CELL_MIN_WIDTH = 50;
+export const CELL_MIN_HEIGHT = 29;
+export const PRIMARY_COLOR = ['#5170ff', 'var(--brand-1, #5170ff)'];
+
+export const MENU_ITEM_HEIGHT = 40;
+export const MENU_MIN_HEIGHT = 150;
+export const MENU_WIDTH = 205;
+
+export const LINE_POSITIONS = ['left', 'right', 'top', 'bottom'];
diff --git a/packages/fluent-editor/src/table/utils/index.ts b/packages/fluent-editor/src/table/utils/index.ts
new file mode 100644
index 0000000000..10e8e858c3
--- /dev/null
+++ b/packages/fluent-editor/src/table/utils/index.ts
@@ -0,0 +1,63 @@
+export function css(domNode, rules) {
+  if (typeof rules === 'object') {
+    for (const prop in rules) {
+      if (prop) {
+        if (Array.isArray(rules[prop])) {
+          // 兼容IE11浏览器
+          rules[prop].forEach(val => {
+            domNode.style[prop] = val;
+          });
+        } else {
+          domNode.style[prop] = rules[prop];
+        }
+      }
+    }
+  }
+}
+
+/**
+ * getRelativeRect
+ * @param  targetRect  rect data for target element  {Object}
+ * @param   container  container element {Element}
+ * @return             an object with rect data {Object}
+ */
+export function getRelativeRect(targetRect, container) {
+  const containerRect = container.getBoundingClientRect();
+
+  return { // ie浏览器中getBoundingClientRect输出为left、right、top、bottom，与chrome的x、y不同
+    x: (targetRect.x || targetRect.left) - (containerRect.x || containerRect.left) - container.scrollLeft,
+    y: (targetRect.y || targetRect.top) - (containerRect.y || containerRect.top) - container.scrollTop,
+    x1: (targetRect.x || targetRect.left) - (containerRect.x || containerRect.left) - container.scrollLeft + targetRect.width,
+    y1: (targetRect.y || targetRect.top) - (containerRect.y || containerRect.top) - container.scrollTop + targetRect.height,
+    width: targetRect.width,
+    height: targetRect.height
+  };
+}
+
+
+export const elementRemove = function (node) {
+  node && node.parentNode && node.parentNode.removeChild(node)
+}
+
+export const arrayFrom = function (arrayLike, mapFn?, thisArg?) {
+  if (!arrayLike) {
+    throw new TypeError(
+      'Array.from requires an array-like object - not null or undefined'
+    )
+  }
+
+  let length = arrayLike.length
+  let resArray = []
+
+  for (let i = 0; i < length; i++) {
+    if (typeof mapFn === 'function') {
+      resArray.push(mapFn.call(thisArg, arrayLike[i]))
+    } else {
+      resArray.push(arrayLike[i])
+    }
+  }
+
+  return resArray
+}
+
+
diff --git a/packages/fluent-editor/src/table/utils/node-matchers.ts b/packages/fluent-editor/src/table/utils/node-matchers.ts
new file mode 100644
index 0000000000..4cf731b270
--- /dev/null
+++ b/packages/fluent-editor/src/table/utils/node-matchers.ts
@@ -0,0 +1,350 @@
+import * as Quill from 'quill';
+import { omit, splitWithBreak } from '../../config/editor.utils';
+import { cellId as tableCellId, rowId as tableRowId, TableViewWrapper } from '../formats/table';
+import { CELL_MIN_WIDTH } from '../table-config';
+
+const Delta = Quill.imports['delta'];
+const InlineBlot = Quill.imports.parchment.InlineBlot;
+
+// rebuild delta
+export function matchTableCell(node, delta) {
+  // fix: 移除旧数据中的pt高度,避免由于高度平均分导致无法插入行
+  if (node.style.height.indexOf('pt')) {
+    node.removeAttribute('style');
+  }
+
+  const row = node.parentNode;
+  let rowId = row.dataset.row;
+  if (!rowId) {
+    rowId = row.dataset.row = tableRowId();
+  }
+  let cellId = node.dataset.cell;
+  // fix: dataset.cell in td will be 'undefined' when insert row/column
+  if (!cellId || cellId === 'undefined') {
+    cellId = tableCellId();
+  }
+  const colspan = node.getAttribute('colspan') || 1;
+  const rowspan = node.getAttribute('rowspan') || 1;
+
+  // fix: empty table cells copied from other place will be removed unexpectedly
+  if (delta.length() === 0) {
+    delta = new Delta().insert('\n', {
+      'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan },
+    });
+    return delta;
+  }
+
+  delta = delta.reduce((newDelta, op) => {
+    if (op.insert && typeof op.insert === 'string') {
+      const lines = splitWithBreak(op.insert);
+
+      lines.forEach((text) => {
+        if (text === '\n') {
+          let attributes = {};
+          const cellAttributes = {
+            row: rowId,
+            cell: cellId,
+            rowspan,
+            colspan,
+          };
+          if (op.attributes['table']) {
+            delete op.attributes.table;
+          }
+          switch (true) {
+          case !!op.attributes['header']:
+            attributes = Object.assign(op.attributes['header'], cellAttributes);
+            break;
+          case !!op.attributes['list']:
+            attributes = { list: Object.assign(op.attributes['list'], cellAttributes) };
+            break;
+          default:
+            attributes = { 'table-cell-line': cellAttributes };
+          }
+          // fix: when td has background-color, quill can't set it to table-cell bolt
+          if (op.attributes['background'] && attributes['table-cell-line']) {
+            attributes['table-cell-line']['tdBgColor'] = op.attributes['background'];
+          }
+          newDelta.insert('\n', Object.assign(op.attributes, attributes));
+        } else {
+          newDelta.insert(text, omit(op.attributes, ['table', 'table-cell-line', 'header', 'list']));
+        }
+      });
+    } else {
+      newDelta.insert(op.insert, op.attributes);
+    }
+
+    return newDelta;
+  }, new Delta());
+
+  // fix: table cell height becomes larger(because insert unnecessary <div> on both sides of cell) when init table ngModel
+  const regexp = /^[\n]+$/;
+  const firstDelta = delta.ops[0];
+  if (delta.ops.length >= 3) {
+    const lastDelta = delta.ops[delta.ops.length - 1];
+    if (regexp.test(firstDelta.insert) && firstDelta.attributes['table-cell-line']) {
+      delta.ops.splice(0, 1);
+    }
+    if (regexp.test(lastDelta.insert) && lastDelta.attributes['table-cell-line']) {
+      delta.ops[delta.ops.length - 1].insert = '\n';
+    }
+  } else if (delta.ops.length === 1 && regexp.test(firstDelta.insert) && firstDelta.attributes['table-cell-line']) {
+    delta.ops[0].insert = '\n';
+  }
+
+  return delta;
+}
+
+// replace th tag with td tag
+export function matchTableHeader(node, delta, scroll) {
+  const row = node.parentNode;
+  const cells = Array.from(row.querySelectorAll('th'));
+  let rowId = row.dataset.row;
+  if (!rowId) {
+    rowId = row.dataset.row = tableRowId();
+  }
+  const cellId = cells.indexOf(node) + 1;
+  const colspan = node.getAttribute('colspan') || false;
+  const rowspan = node.getAttribute('rowspan') || false;
+
+  // fix: empty table cells copied from other place will be removed unexpectedly
+  if (delta.length() === 0) {
+    delta = new Delta().insert('\n', {
+      'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan },
+    });
+    return delta;
+  }
+
+  delta = delta.reduce((newDelta, op) => {
+    if (op.insert && typeof op.insert === 'string') {
+      const lines = splitWithBreak(op.insert);
+
+      // fix: no '\n' in the end of op.insert, push a '\n' to lines
+      if (lines[lines.length - 1] !== '\n') {
+        lines.push('\n');
+      }
+
+      lines.forEach((text) => {
+        text === '\n'
+          ? newDelta.insert('\n', { 'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan } })
+          : newDelta.insert(text, op.attributes);
+      });
+    } else {
+      newDelta.insert(op.insert, op.attributes);
+    }
+
+    return newDelta;
+  }, new Delta());
+
+  delta = delta.reduce((newDelta, op) => {
+    if (op.insert && typeof op.insert === 'string' && op.insert.startsWith('\n')) {
+      newDelta.insert(op.insert, { 'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan }});
+    } else {
+      newDelta.insert(op.insert, { ...omit(op.attributes, ['table', 'table-cell-line'])});
+    }
+
+    return newDelta;
+  }, new Delta());
+
+  return delta;
+}
+
+// supplement colgroup and col
+export function matchTable(node, delta, scroll) {
+  let isWordTable =  node.children.length === 1 
+  if (!(node instanceof Element)) {
+    return;
+  }
+  const getMaxColNumber = (tds)=>{
+    if(isWordTable){
+      return tds.length
+    }
+    let colsNumber = 0
+    tds.forEach(td=>{
+      colsNumber += td.colSpan
+    })
+    return Math.max(tds.length, colsNumber)
+  }
+
+  const checkMinWidth = (width) => {
+    if (Number.isNaN(width)) {
+      // 无指定值时默认为auto，待渲染后修正
+      return { 'table-col': { width: 'auto' } };
+    } else if (width < CELL_MIN_WIDTH) {
+      // 当列宽度小于默认宽度时取默认宽度
+      return { 'table-col': true };
+    } else {
+      // 大于默认值取实际指定值
+      return { 'table-col': { width: width } };
+    }
+  };
+
+  // fix: a table with an empty tr is invalid, should not be displayed
+  const rows = node.querySelectorAll('tr');
+  const topRow = rows[0];
+  const onlyEmptyTr = rows.length === 1 && !topRow.querySelector('td');
+
+  // fix: empty table will return empty delta
+  if (!topRow || onlyEmptyTr) {
+    return new Delta().insert('\n');
+  }
+
+  const colsNumber = node.querySelectorAll('col').length;
+  let maxCellsNumber = 0;
+  let maxCells;
+  // 遍历行获取最大列数和该行的所有单元格
+  Array.prototype.slice.call(rows).forEach((row) => {
+    const tds = row.querySelectorAll('td');
+      maxCellsNumber = Math.max(getMaxColNumber(tds), maxCellsNumber);
+      maxCells = tds;
+  });
+  
+
+  // 列的累计器
+  let colCount = 0;
+  delta = delta.reduce((newDelta, op) => {
+    // 当colCount与colsNumber相等时，则补充相差列
+    if (colCount === colsNumber) {
+      const fillNumber = maxCellsNumber - colCount;
+      const outset = colCount;
+      // index为差值列索引，通过遍历差值得到mexCells行中对应索引的单元格宽度
+      for (let i = 0; i < fillNumber; i++) {
+        const index = outset + i;
+        const colWidth = parseInt(
+          index<maxCells.length ? 
+          maxCells[index].width :
+          // maxCells[index].style && maxCells[index].style.width ? maxCells[index].style.width :
+          maxCells[maxCells.length-1].width,
+           10);
+        newDelta.insert('\n', checkMinWidth(colWidth));
+        colCount++;
+      }
+    }
+    const attr = op.attributes || {};
+    switch (true) {
+    case !!attr['table-col']:
+      // 只有当前列数小于实际总列数才操作，所以不存在大于的情况
+      if (colCount < maxCellsNumber) {
+        // 当table-col宽度一致时会合并为单一insert，insert长度大于1，截取符合实际总列数的长度来插入
+        const insert = op.insert.slice(0, maxCellsNumber);
+        const colWidth = parseInt(attr['table-col']['width'], 10);
+        newDelta.insert(insert, checkMinWidth(colWidth));
+        colCount += insert.length;
+      }
+      break;
+    case !!attr['notFilled']:
+    {      // 将标记的空tr填充对应列数的单元格
+      const rowId = tableRowId();
+      for (let x = 0; x < maxCellsNumber; x++) {
+        newDelta.insert('\n', { 'table-cell-line': { row: rowId, cell: tableCellId(), rowspan: 1, colspan: 1 } });
+      }
+      break;}
+    default:
+      newDelta.insert(op.insert, op.attributes);
+    }
+    return newDelta;
+  }, new Delta());
+
+
+  const tableItem = node.closest('.quill-better-table-wrapper') || node;
+  const prevBlot = tableItem.previousElementSibling && scroll.query(tableItem.previousElementSibling);
+  const nextBlot = tableItem.nextElementSibling && scroll.query(tableItem.nextElementSibling);
+  // fix: prevent two adjacent tables from sticking together
+  if (!nextBlot || nextBlot.prototype instanceof InlineBlot) {
+    delta = delta.insert('\n');
+  }
+  // fix: When there is no line break in front of the table, pressing the Enter key will cause a problem with the table.
+  if (!prevBlot || prevBlot.prototype instanceof InlineBlot) {
+    const newLine = new Delta().insert('\n');
+    delta = newLine.concat(delta);
+  }
+  if (nextBlot === TableViewWrapper) {
+    delta = delta.insert('\n');
+  }
+
+  return delta;
+}
+
+export function matchTableRow(node, delta) {
+  // fix: 处理空<tr>标签被忽略的情况
+  if (delta.ops.length === 1 && !delta.ops[0].attributes) {
+    delta = new Delta().insert('\n', { notFilled: true });
+  }
+  return delta;
+}
+
+// match h tags, distinguish between headers in the table and headers outside the table
+export function matchHeader(node, delta) {
+  const newDelta = new Delta();
+  const fontSize = node.style.fontSize;
+  delta.forEach((op) => {
+    newDelta.insert(
+      op.insert,
+      Object.assign(op.attributes, {
+        size: fontSize,
+      })
+    );
+  });
+  return newDelta;
+}
+
+export function matchList(node, delta) {
+  const value = node.tagName === 'UL' ? 'bullet' : 'ordered';
+  delta.forEach((op) => {
+    if (typeof op.attributes.list === 'string') {
+      delete op.attributes.list;
+    } else if (typeof op.attributes.list === 'object' && !op.attributes.list['value']) {
+      op.attributes.list['value'] = value;
+    }
+  });
+  return delta;
+}
+
+export function matchInline(node, delta, scroll) {
+  const quill = Quill.find(scroll.domNode.parentNode);
+  const currentRange = quill.getSelection();
+  const formats = currentRange && quill.getFormat(currentRange);
+  if (
+    formats &&
+    formats['table-cell-line'] && // 当前光标节点在表格内，否则不操作delta
+    node.nextElementSibling
+  ) {
+    // 插入节点是否存在下一个兄弟元素
+    const match = scroll.query(node);
+    const nodeHtml = node.nextElementSibling.innerHTML;
+    const nodeText = node.nextElementSibling.innerText;
+    if (
+      (match && match.prototype instanceof InlineBlot) || // 判断当前节点是否为内联
+      (node.tagName === 'P' && nodeHtml !== nodeText)
+    ) {
+      // 非内联时如果为P且下一个不为text节点
+      delta.forEach((op) => {op.insert += '\n';});
+    }
+  }
+  return delta;
+}
+
+// 匹配 word 自带的 v:shape 标签中的图片 v:imageData
+export function matchWordShapeImage(node, delta) {
+  if (node) {
+    const imageUrl = node.attributes.src?.nodeValue;
+    delta = new Delta().insert({ image: imageUrl });
+  }
+  return delta;
+}
+
+export function matchMentionLink(node, delta, scroll) {
+  const name = node.dataset.mentionId;
+  if (name) {
+    const quill = Quill.find(scroll.domNode.parentNode);
+    const mention = quill.getModule('mention');
+    if (mention) {
+      mention.options.search(name).then((res) => {
+        const [item] = res;
+        if (item) {
+          mention.options.select(item);
+        }
+      });
+    }
+  }
+  return delta;
+}
diff --git a/packages/fluent-editor/src/toolbar/better-picker.ts b/packages/fluent-editor/src/toolbar/better-picker.ts
new file mode 100644
index 0000000000..6e19722bd0
--- /dev/null
+++ b/packages/fluent-editor/src/toolbar/better-picker.ts
@@ -0,0 +1,360 @@
+import * as Quill from 'quill';
+import { isNullOrUndefined } from '../config/editor.utils';
+const SnowTheme = Quill.imports['themes/snow'];
+
+let optionsCounter = 0;
+
+function toggleAriaAttribute(element, attribute) {
+  element.setAttribute(
+    attribute,
+    element.getAttribute(attribute) !== 'true',
+  );
+}
+
+class Picker {
+  container: any;
+  label: any;
+  options: any;
+  select: any;
+  constructor(select) {
+    this.select = select;
+    this.container = document.createElement('span');
+    this.buildPicker();
+    this.select.style.display = 'none';
+    this.select.parentNode.insertBefore(this.container, this.select);
+
+    this.label.addEventListener('mousedown', (e) => {
+      this.togglePicker();
+      e.preventDefault();
+    });
+    this.label.addEventListener('keydown', event => {
+      switch (event.key) {
+      case 'Enter':
+        this.togglePicker();
+        break;
+      case 'Escape':
+        this.escape();
+        event.preventDefault();
+        break;
+      default:
+      }
+    });
+    this.select.addEventListener('change', this.update.bind(this));
+  }
+
+  togglePicker() {
+    this.container.classList.toggle('ql-expanded');
+    // Toggle aria-expanded and aria-hidden to make the picker accessible
+    toggleAriaAttribute(this.label, 'aria-expanded');
+    toggleAriaAttribute(this.options, 'aria-hidden');
+  }
+
+  buildItem(option) {
+    const item = document.createElement('span');
+    item.tabIndex = 0;
+    item.setAttribute('role', 'button');
+    item.classList.add('ql-picker-item');
+    if (option.hasAttribute('value')) {
+      item.setAttribute('data-value', option.getAttribute('value'));
+    }
+    if (option.textContent) {
+      item.setAttribute('data-label', option.textContent);
+    }
+    item.addEventListener('click', (e) => {
+      this.selectItem(item, true);
+    });
+    item.addEventListener('keydown', event => {
+      switch (event.key) {
+      case 'Enter':
+        this.selectItem(item, true);
+        event.preventDefault();
+        break;
+      case 'Escape':
+        this.escape();
+        event.preventDefault();
+        break;
+      default:
+      }
+    });
+
+    return item;
+  }
+
+  buildLabel() {
+    const label = document.createElement('span');
+    label.classList.add('ql-picker-label');
+    label.innerHTML = `
+      <svg viewbox="0 0 18 18">
+        <polygon class="ql-stroke" points="7 11 9 13 11 11 7 11"></polygon>
+        <polygon class="ql-stroke" points="7 7 9 5 11 7 7 7"></polygon>
+      </svg>
+    `;
+    label.tabIndex = 0;
+    label.setAttribute('role', 'button');
+    label.setAttribute('aria-expanded', 'false');
+    this.container.appendChild(label);
+    return label;
+  }
+
+  buildOptions() {
+    const options = document.createElement('span');
+    options.classList.add('ql-picker-options');
+
+    // Don't want screen readers to read this until options are visible
+    options.setAttribute('aria-hidden', 'true');
+    options.tabIndex = -1;
+
+    // Need a unique id for aria-controls
+    options.id = `ql-picker-options-${optionsCounter}`;
+    optionsCounter += 1;
+    this.label.setAttribute('aria-controls', options.id);
+
+    this.options = options;
+
+    Array.from(this.select.options).forEach((option: any) => {
+      const item = this.buildItem(option);
+      options.appendChild(item);
+      if (option.selected === true) {
+        this.selectItem(item);
+      }
+    });
+    this.container.appendChild(options);
+  }
+
+  buildPicker() {
+    Array.from(this.select.attributes).forEach((item: any) => {
+      this.container.setAttribute(item.name, item.value);
+    });
+    this.container.classList.add('ql-picker');
+    this.label = this.buildLabel();
+    this.buildOptions();
+  }
+
+  escape() {
+    // Close menu and return focus to trigger label
+    this.close();
+    // Need setTimeout for accessibility to ensure that the browser executes
+    // focus on the next process thread and after any DOM content changes
+    setTimeout(() => this.label.focus(), 1);
+  }
+
+  close() {
+    this.container.classList.remove('ql-expanded');
+    this.label.setAttribute('aria-expanded', 'false');
+    this.options.setAttribute('aria-hidden', 'true');
+  }
+
+  selectItem(item, trigger = false) {
+    const selected = this.container.querySelector('.ql-selected');
+    if (item === selected) { return; }
+    if (!isNullOrUndefined(selected)) {
+      selected.classList.remove('ql-selected');
+    }
+    if (isNullOrUndefined(item)) { return; }
+    item.classList.add('ql-selected');
+    this.select.selectedIndex = Array.from(item.parentNode.children).indexOf(
+      item,
+    );
+    if (item.hasAttribute('data-value')) {
+      this.label.setAttribute('data-value', item.getAttribute('data-value'));
+    } else {
+      this.label.removeAttribute('data-value');
+    }
+    if (item.hasAttribute('data-label')) {
+      this.label.setAttribute('data-label', item.getAttribute('data-label'));
+    } else {
+      this.label.removeAttribute('data-label');
+    }
+    if (trigger) {
+      let ev;
+      if (typeof Event === 'function') {
+        ev = new Event('change');
+      } else {
+        ev = document.createEvent('Event');
+        ev.initEvent('change', true, true);
+      }
+      this.select.dispatchEvent(ev);
+      this.close();
+    }
+  }
+
+  update() {
+    let option;
+    if (this.select.selectedIndex > -1) {
+      const item = this.container.querySelector('.ql-picker-options').children[
+        this.select.selectedIndex
+      ];
+      option = this.select.options[this.select.selectedIndex];
+      this.selectItem(item);
+    } else {
+      this.selectItem(null);
+    }
+    const isActive =
+      !isNullOrUndefined(option) &&
+      option !== this.select.querySelector('option[selected]');
+
+    if (isActive) {
+      this.label.classList.add('ql-active');
+    } else {
+      this.label.classList.remove('ql-active');
+    }
+  }
+}
+
+class IconPicker extends Picker {
+  defaultItem: any;
+  constructor(select, icons) {
+    super(select);
+    this.container.classList.add('ql-icon-picker');
+    Array.from(this.container.querySelectorAll('.ql-picker-item')).forEach(
+      (item: any) => {
+        item.innerHTML = icons[item.getAttribute('data-value') || ''];
+      },
+    );
+    this.defaultItem = this.container.querySelector('.ql-selected');
+    this.selectItem(this.defaultItem, null);
+  }
+
+  selectItem(target, trigger) {
+    super.selectItem(target, trigger);
+    const item = target || this.defaultItem;
+    if (this.label.innerHTML === item.innerHTML) { return; }
+    this.label.innerHTML = item.innerHTML;
+  }
+}
+
+class ColorPicker extends Picker {
+  constructor(select, label) {
+    super(select);
+    this.label.innerHTML = label;
+    this.container.classList.add('ql-color-picker');
+    Array.from(this.container.querySelectorAll('.ql-picker-item'))
+      .slice(0, 7)
+      .forEach((item: any) => {
+        item.classList.add('ql-primary');
+      });
+  }
+
+  buildItem(option) {
+    const item = super.buildItem(option);
+    item.style.backgroundColor = option.getAttribute('value') || '';
+    return item;
+  }
+
+  selectItem(item, trigger) {
+    super.selectItem(item, trigger);
+    const colorLabel = this.label.querySelector('.ql-color-label');
+    const value = item ? item.getAttribute('data-value') || '' : '';
+    if (colorLabel) {
+      if (colorLabel.tagName === 'line') {
+        colorLabel.style.stroke = value;
+      } else {
+        colorLabel.style.fill = value;
+      }
+    }
+  }
+}
+
+Quill.register('ui/picker', Picker, true);
+Quill.register('ui/icon-picker', IconPicker, true);
+Quill.register('ui/color-picker', ColorPicker, true);
+
+const ALIGNS = [false, 'center', 'right'];
+
+const COLORS = [
+  '#000000',
+  '#e60000',
+  '#ff9900',
+  '#ffff00',
+  '#008a00',
+  '#0066cc',
+  '#9933ff',
+  '#ffffff',
+  '#facccc',
+  '#ffebcc',
+  '#ffffcc',
+  '#cce8cc',
+  '#cce0f5',
+  '#ebd6ff',
+  '#bbbbbb',
+  '#f06666',
+  '#ffc266',
+  '#ffff66',
+  '#66b966',
+  '#66a3e0',
+  '#c285ff',
+  '#888888',
+  '#a10000',
+  '#b26b00',
+  '#b2b200',
+  '#006100',
+  '#0047b2',
+  '#6b24b2',
+  '#444444',
+  '#5c0000',
+  '#663d00',
+  '#666600',
+  '#003700',
+  '#002966',
+  '#3d1466',
+];
+
+const FONTS = [false, 'serif', 'monospace'];
+
+const HEADERS = ['1', '2', '3', false];
+
+const SIZES = ['small', false, 'large', 'huge'];
+
+SnowTheme.prototype.buildPickers = function(selects, icons) {
+  this.pickers = Array.from(selects).map((select: any) => {
+    if (select.classList.contains('ql-align')) {
+      if (isNullOrUndefined(select.querySelector('option'))) {
+        fillSelect(select, ALIGNS);
+      }
+      return new IconPicker(select, icons.align);
+    }
+    if (
+      select.classList.contains('ql-background') ||
+      select.classList.contains('ql-color')
+    ) {
+      const format = select.classList.contains('ql-background')
+        ? 'background'
+        : 'color';
+      if (isNullOrUndefined(select.querySelector('option'))) {
+        fillSelect(
+          select,
+          COLORS
+        );
+      }
+      return new ColorPicker(select, icons[format]);
+    }
+    if (isNullOrUndefined(select.querySelector('option'))) {
+      if (select.classList.contains('ql-font')) {
+        fillSelect(select, FONTS);
+      } else if (select.classList.contains('ql-header')) {
+        fillSelect(select, HEADERS);
+      } else if (select.classList.contains('ql-size')) {
+        fillSelect(select, SIZES);
+      }
+    }
+    return new Picker(select);
+  });
+  const update = () => {
+    this.pickers.forEach(picker => {
+      picker.update();
+    });
+  };
+  this.quill.on(Quill.events.EDITOR_CHANGE, update);
+};
+
+function fillSelect(select, values, defaultValue = false) {
+  values.forEach(value => {
+    const option = document.createElement('option');
+    if (value === defaultValue) {
+      option.setAttribute('selected', 'selected');
+    } else {
+      option.setAttribute('value', value);
+    }
+    select.appendChild(option);
+  });
+}
diff --git a/packages/fluent-editor/src/toolbar/index.ts b/packages/fluent-editor/src/toolbar/index.ts
new file mode 100644
index 0000000000..f69f8f0647
--- /dev/null
+++ b/packages/fluent-editor/src/toolbar/index.ts
@@ -0,0 +1,170 @@
+import Quill from 'quill';
+import { isNullOrUndefined } from '../config/editor.utils';
+import './better-picker';
+import Delta from 'quill-delta';
+const Parchment = Quill.imports['parchment'];
+const levels = ['error', 'warn', 'log', 'info'];
+let level = 'warn';
+
+function debuglogger(method, ...args) {
+  if (levels.indexOf(method) <= levels.indexOf(level)) {
+    console[method](...args); // eslint-disable-line no-console
+  }
+}
+
+function namespace(ns) {
+  return levels.reduce((logger, method) => {
+    logger[method] = debuglogger.bind(console, method, ns);
+    return logger;
+  }, {});
+}
+
+namespace.level = newLevel => {
+  level = newLevel;
+};
+debuglogger.level = namespace.level;
+const debug = namespace('quill:toolbar')
+
+const Toolbar = Quill.imports['modules/toolbar'];
+// let oldClean = Toolbar.DEFAULTS.handlers.clean
+
+class BetterToolbar extends Toolbar {
+  quill;
+  controls;
+  update(range) {
+    const formats = isNullOrUndefined(range) ? {} : this.quill.getFormat(range);
+    this.controls.forEach(pair => {
+      const [format, input] = pair;
+      if (input.tagName === 'SELECT') {
+        let option;
+        if (isNullOrUndefined(range)) {
+          option = null;
+        } else if (isNullOrUndefined(formats[format])) {
+          option = input.querySelector('option[selected]');
+        } else if (!Array.isArray(formats[format])) {
+          let value = format === 'header' ? formats[format].value : formats[format];
+          if (typeof value === 'string') {
+            value = value.replace(/"/g, '\\"');
+          }
+          option = input.querySelector(`option[value="${value}"]`);
+        }
+        if (isNullOrUndefined(option)) {
+          input.value = ''; // TODO make configurable?
+          input.selectedIndex = -1;
+        } else {
+          option.selected = true;
+        }
+      } else if (isNullOrUndefined(range)) {
+        input.classList.remove('ql-active');
+      } else if (input.hasAttribute('value')) {
+        // both being null should match (default values)
+        // '1' should match with 1 (headers)
+        let isActive =
+          formats[format] === input.getAttribute('value') ||
+          (!isNullOrUndefined(formats[format]) &&
+            (formats[format].value === input.getAttribute('value') ||
+              formats[format].toString() === input.getAttribute('value'))) ||
+            (isNullOrUndefined(formats[format]) && !input.getAttribute('value'));
+
+        if (!isActive) {
+          const checkFormat = formats[format];
+          if (checkFormat === 'checked' || checkFormat === 'unchecked') {
+            isActive = input.getAttribute('value') === 'check';
+          }
+        }
+
+        if (isActive) {
+          input.classList.add('ql-active');
+        } else {
+          input.classList.remove('ql-active');
+        }
+      } else {
+        if (!isNullOrUndefined(formats[format])) {
+          input.classList.add('ql-active');
+        } else {
+          input.classList.remove('ql-active');
+        }
+      }
+    });
+  }
+  attach(input) {
+    let format = Array.from(input.classList).find(className => {
+      // @ts-ignore
+      return className.indexOf('ql-') === 0;
+    });
+    if (!format) return;
+    // @ts-ignore
+    format = format.slice('ql-'.length);
+
+    if (input.tagName === 'BUTTON') {
+      input.setAttribute('type', 'button');
+    }
+
+    // @ts-ignore
+    if (this.handlers[format] == null && this.quill.scroll.query(format) == null) {
+      debug.warn('ignoring attaching to nonexistent format', format, input);
+      return;
+    }
+
+    const eventName = input.tagName === 'SELECT' ? 'change' : 'click';
+    input.addEventListener(eventName, e => {
+      let value;
+
+      if (input.tagName === 'SELECT') {
+        if (input.selectedIndex < 0) return;
+        const selected = input.options[input.selectedIndex];
+
+        if (selected.hasAttribute('selected')) {
+          value = false;
+        } else {
+          value = selected.value || false;
+        }
+      } else {
+        if (input.classList.contains('ql-active')) {
+          value = false;
+        } else {
+          value = input.value || !input.hasAttribute('value');
+        }
+
+        e.preventDefault();
+      }
+
+      this.quill.focus();
+      const [range] = this.quill.selection.getRange();
+      // @ts-ignore
+      if (this.handlers[format] != null) {
+        // @ts-ignore
+        if(!isNullOrUndefined(window.quillIsIntable) && window.quillIsIntable === true && (format === "blockquote" || format === "code-block" || format === "list" || format === "indent" || format === "clean")) {
+          return
+        }
+        // @ts-ignore
+        this.handlers[format].call(this, value);
+      } else if (
+        this.quill.scroll.query(format).prototype instanceof Parchment.EmbedBlot
+      ) {
+        value = prompt(`Enter ${format}`); // eslint-disable-line no-alert
+        if (!value) return;
+        this.quill.updateContents(
+          new Delta()
+            .retain(range.index)
+            .delete(range.length)
+            // @ts-ignore
+            .insert({ [format]: value }),
+          Quill.sources.USER,
+        );
+      } else {
+        // @ts-ignore
+        if(!isNullOrUndefined(window.quillIsIntable) && window.quillIsIntable === true && (format === "blockquote" || format === "code-block" || format === "list" || format === "indent" || format === "clean")) {
+          return
+        }
+        this.quill.format(format, value, Quill.sources.USER);
+      }
+
+      this.update(range);
+    });
+    this.controls.push([format, input]);
+  }
+
+}
+
+export default BetterToolbar;
diff --git a/packages/fluent-editor/src/types/vue.d.ts b/packages/fluent-editor/src/types/vue.d.ts
new file mode 100644
index 0000000000..2b97bd961c
--- /dev/null
+++ b/packages/fluent-editor/src/types/vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/packages/fluent-editor/src/utils/debounce.ts b/packages/fluent-editor/src/utils/debounce.ts
new file mode 100644
index 0000000000..97f07c3880
--- /dev/null
+++ b/packages/fluent-editor/src/utils/debounce.ts
@@ -0,0 +1,148 @@
+import { isObject,  root} from "./method"
+export function debounce(func, wait, options = undefined) {
+  let lastArgs,
+    lastThis,
+    maxWait,
+    result,
+    timerId,
+    lastCallTime
+
+  let lastInvokeTime = 0
+  let leading = false
+  let maxing = false
+  let trailing = true
+
+  // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
+  const useRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function')
+
+  if (typeof func !== 'function') {
+    throw new TypeError('Expected a function')
+  }
+  wait = +wait || 0
+  if (isObject(options)) {
+    leading = !!options.leading
+    maxing = 'maxWait' in options
+    maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait
+    trailing = 'trailing' in options ? !!options.trailing : trailing
+  }
+
+  function invokeFunc(time) {
+    const args = lastArgs
+    const thisArg = lastThis
+
+    lastArgs = lastThis = undefined
+    lastInvokeTime = time
+    result = func.apply(thisArg, args)
+    return result
+  }
+
+  function startTimer(pendingFunc, wait) {
+    if (useRAF) {
+      root.cancelAnimationFrame(timerId)
+      return root.requestAnimationFrame(pendingFunc)
+    }
+    return setTimeout(pendingFunc, wait)
+  }
+
+  function cancelTimer(id) {
+    if (useRAF) {
+      return root.cancelAnimationFrame(id)
+    }
+    clearTimeout(id)
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time
+    // Start the timer for the trailing edge.
+    timerId = startTimer(timerExpired, wait)
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result
+  }
+
+  function remainingWait(time) {
+    const timeSinceLastCall = time - lastCallTime
+    const timeSinceLastInvoke = time - lastInvokeTime
+    const timeWaiting = wait - timeSinceLastCall
+
+    return maxing
+      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting
+  }
+
+  function shouldInvoke(time) {
+    const timeSinceLastCall = time - lastCallTime
+    const timeSinceLastInvoke = time - lastInvokeTime
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait))
+  }
+
+  function timerExpired() {
+    const time = Date.now()
+    if (shouldInvoke(time)) {
+      return trailingEdge(time)
+    }
+    // Restart the timer.
+    timerId = startTimer(timerExpired, remainingWait(time))
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time)
+    }
+    lastArgs = lastThis = undefined
+    return result
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      cancelTimer(timerId)
+    }
+    lastInvokeTime = 0
+    lastArgs = lastCallTime = lastThis = timerId = undefined
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(Date.now())
+  }
+
+  function pending() {
+    return timerId !== undefined
+  }
+
+  function debounced(...args) {
+    const time = Date.now()
+    const isInvoking = shouldInvoke(time)
+
+    lastArgs = args
+    lastThis = this
+    lastCallTime = time
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime)
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = startTimer(timerExpired, wait)
+        return invokeFunc(lastCallTime)
+      }
+    }
+    if (timerId === undefined) {
+      timerId = startTimer(timerExpired, wait)
+    }
+    return result
+  }
+  debounced.cancel = cancel
+  debounced.flush = flush
+  debounced.pending = pending
+  return debounced
+}
\ No newline at end of file
diff --git a/packages/fluent-editor/src/utils/method.ts b/packages/fluent-editor/src/utils/method.ts
new file mode 100644
index 0000000000..824215a2cf
--- /dev/null
+++ b/packages/fluent-editor/src/utils/method.ts
@@ -0,0 +1,81 @@
+/** Detect free variable `global` from Node.js. */
+const freeGlobal =
+  typeof global === 'object' &&
+  global !== null &&
+  global.Object === Object &&
+  global
+
+/** Detect free variable `globalThis` */
+const freeGlobalThis =
+  typeof globalThis === 'object' &&
+  globalThis !== null &&
+  globalThis.Object == Object &&
+  globalThis
+
+/** Detect free variable `self`. */
+const freeSelf =
+  typeof self === 'object' && self !== null && self.Object === Object && self
+
+/** Used as a reference to the global object. */
+export const root =
+  freeGlobalThis || freeGlobal || freeSelf || Function('return this')()
+
+export function isObject(value) {
+  const type = typeof value
+  return value != null && (type === 'object' || type === 'function')
+}
+
+export function compareArray(arr1, arr2) {
+  if (arr1.length !== arr2.length) {
+    return false
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr1[i] !== arr2[i]) {
+      return false
+    }
+  }
+  return true
+}
+
+export function compareObject(object1, object2) {
+  let o1keys = Object.keys(object1)
+  let o2keys = Object.keys(object2)
+  if (o2keys.length !== o1keys.length) return false
+  for (let i = 0; i <= o1keys.length - 1; i++) {
+    let key = o1keys[i]
+    if (!o2keys.includes(key)) return false
+    if (!compare(object2[key], object1[key])) return false
+  }
+  return true
+}
+
+export function compare(value, other) {
+  if (value === other) {
+    return true
+  }
+  if (value instanceof Array && other instanceof Array) {
+    return compareArray(value, other)
+  }
+  if (value instanceof Function || other instanceof Function) {
+    return false
+  }
+  if (value instanceof Object && other instanceof Object) {
+    return compareObject(value, other)
+  }
+  return false
+}
+
+export function unshiftString(str: string, targetLength: number, addString: string): string {
+  targetLength = targetLength > 0 ? targetLength : 0;
+  addString = String((typeof addString !== 'undefined' && typeof addString !== 'object') ? addString : ' ');
+  str = (str === undefined || str === null) ? '' : String(str);
+  if (str.length >= targetLength) {
+    return String(str);
+  } else {
+    targetLength = targetLength - str.length;
+    if (targetLength > addString.length) {
+      addString += addString.repeat(targetLength / addString.length);
+    }
+    return addString.slice(0, targetLength) + String(str);
+  }
+}
diff --git a/packages/fluent-editor/src/video/index.ts b/packages/fluent-editor/src/video/index.ts
new file mode 100644
index 0000000000..913de15556
--- /dev/null
+++ b/packages/fluent-editor/src/video/index.ts
@@ -0,0 +1,71 @@
+import * as Quill from 'quill';
+import { sanitize } from '../config/editor.utils';
+
+
+const Embed = Quill.imports['blots/embed'];
+const VIDEO_ATTRIBUTES = ['id', 'title', 'src'];
+
+class Video extends Embed {
+  static blotName: string;
+  static tagName: string;
+  static SANITIZED_URL: string;
+  static PROTOCOL_WHITELIST: string[];
+  static className: string;
+  statics: any;
+  domNode: any;
+
+  static sanitize(url) {
+    return sanitize(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL;
+  }
+
+  static create(value) {
+    const node = super.create(value);
+    node.setAttribute('contenteditable', false);
+    node.setAttribute('controls', 'controls');
+    VIDEO_ATTRIBUTES.forEach(key => {
+      if (value[key]) {
+        switch (key) {
+        case 'src':
+        {    const src = Video.sanitize(value[key]);
+          node.setAttribute(key, src);
+          break;}
+        case 'title':
+          node.setAttribute(key, value[key]);
+          break;
+        default:
+          node.dataset[key] = value[key];
+        }
+      }
+    });
+    return node;
+  }
+
+  static value(domNode) {
+    const formats: any = {};
+    VIDEO_ATTRIBUTES.forEach(key => {
+      const value = domNode.getAttribute(key) || domNode.dataset[key];
+      if (value) {
+        formats[key] = value;
+      }
+    });
+    return formats;
+  }
+
+  static formats(domNode) {
+    const formats: any = {};
+    VIDEO_ATTRIBUTES.forEach(key => {
+      const value = domNode.getAttribute(key) || domNode.dataset[key];
+      if (value) {
+        formats[key] = value;
+      }
+    });
+    return formats;
+  }
+}
+Video.blotName = 'video';
+Video.tagName = 'VIDEO';
+Video.SANITIZED_URL = 'about:blank';
+Video.PROTOCOL_WHITELIST = ['http', 'https'];
+Video.className = 'ql-video-item';
+
+export default Video;
diff --git a/packages/fluent-editor/test/setup.ts b/packages/fluent-editor/test/setup.ts
new file mode 100644
index 0000000000..fa7c9eeeea
--- /dev/null
+++ b/packages/fluent-editor/test/setup.ts
@@ -0,0 +1 @@
+// Write setup configuration
diff --git a/packages/fluent-editor/test/unit/components/Button.spec.ts b/packages/fluent-editor/test/unit/components/Button.spec.ts
new file mode 100644
index 0000000000..8f085f3c50
--- /dev/null
+++ b/packages/fluent-editor/test/unit/components/Button.spec.ts
@@ -0,0 +1,9 @@
+import Button from '../../../src/components/Button.vue'
+import { shallowMount } from '@vue/test-utils'
+
+describe('~/src/components/Button.vue', () => {
+  test('can mount', () => {
+    const wrapper = shallowMount(Button)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
diff --git a/packages/fluent-editor/test/unit/components/__snapshots__/Button.spec.ts.snap b/packages/fluent-editor/test/unit/components/__snapshots__/Button.spec.ts.snap
new file mode 100644
index 0000000000..43bbbcee2a
--- /dev/null
+++ b/packages/fluent-editor/test/unit/components/__snapshots__/Button.spec.ts.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`~/src/components/Button.vue can mount 1`] = `"<button class=\\"Button Button-primary\\"></button>"`;
diff --git a/packages/fluent-editor/tsconfig.json b/packages/fluent-editor/tsconfig.json
new file mode 100644
index 0000000000..897cef2ac7
--- /dev/null
+++ b/packages/fluent-editor/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client", "@types/node", "@types/jest"],
+
+    "baseUrl": "./",
+    "downlevelIteration": true,
+    "importHelpers": true,
+    // "outDir": "./dist/out-tsc",
+    "declaration": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+
+    "noImplicitAny": false, // 不允许隐式的any类型
+    "noImplicitThis": false, // 不允许this有隐式的any类型
+    "strictNullChecks": false // 不允许把null、undefined赋值给其他类型的变量
+  }
+}
diff --git a/packages/fluent-editor/verifyCommit.js b/packages/fluent-editor/verifyCommit.js
new file mode 100644
index 0000000000..5825328c19
--- /dev/null
+++ b/packages/fluent-editor/verifyCommit.js
@@ -0,0 +1,24 @@
+// Invoked on the commit-msg git hook by yorkie.
+
+const chalk = require('chalk')
+const msgPath = process.env.GIT_PARAMS
+const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
+
+const releaseRE = /^v\d/
+const commitRE =
+  /^(revert: )?(feat|fix|docs|dx|refactor|perf|test|workflow|build|ci|chore|types|wip|release|deps)(\(.+\))?: .{1,50}/
+
+if (!releaseRE.test(msg) && !commitRE.test(msg)) {
+  console.error(
+    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
+      `invalid commit message format.`,
+    )}\n\n` +
+      chalk.red(
+        `  Proper commit message format is required for automated changelog generation. Examples:\n\n`,
+      ) +
+      `    ${chalk.green(`feat: add 'comments' option`)}\n` +
+      `    ${chalk.green(`fix: handle events on blur (close #28)`)}\n\n` +
+      chalk.red(`  See .github/commit-convention.md for more details.\n`),
+  )
+  process.exit(1)
+}
\ No newline at end of file
diff --git a/packages/fluent-editor/vite.config.ts b/packages/fluent-editor/vite.config.ts
new file mode 100644
index 0000000000..a75bec0cd3
--- /dev/null
+++ b/packages/fluent-editor/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: './src/index.ts',
+      fileName: 'index',
+      formats: ['cjs', 'es'],
+    },
+    sourcemap: true,
+  },
+  server: {
+    host: 'localhost', //ip地址
+    port: 8080, //端口号
+    open: true //启动后是否自动打开浏览器
+  }
+})
diff --git a/packages/modules.json b/packages/modules.json
index 76a242fb09..c0afc12bf6 100644
--- a/packages/modules.json
+++ b/packages/modules.json
@@ -1027,6 +1027,11 @@
     "type": "template",
     "exclude": false
   },
+  "Directive": {
+    "path": "vue-directive/index.ts",
+    "type": "module",
+    "exclude": false
+  },
   "Divider": {
     "path": "vue/src/divider/index.ts",
     "type": "component",
@@ -1350,6 +1355,14 @@
     "type": "template",
     "exclude": false
   },
+  "FluentEditor": {
+    "path": "vue/src/fluent-editor/index.ts",
+    "type": "component",
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
+  },
   "Form": {
     "path": "vue/src/form/index.ts",
     "type": "component",
@@ -3165,15 +3178,37 @@
     "type": "component",
     "exclude": false,
     "mode": [
+      "mobile-first",
       "pc"
     ]
   },
+  "YearRangeMobileFirst": {
+    "path": "vue/src/year-range/src/mobile-first.vue",
+    "type": "template",
+    "exclude": false
+  },
+  "YearRangePc": {
+    "path": "vue/src/year-range/src/pc.vue",
+    "type": "template",
+    "exclude": false
+  },
   "YearTable": {
     "path": "vue/src/year-table/index.ts",
     "type": "component",
     "exclude": false,
     "mode": [
+      "mobile-first",
       "pc"
     ]
+  },
+  "YearTableMobileFirst": {
+    "path": "vue/src/year-table/src/mobile-first.vue",
+    "type": "template",
+    "exclude": false
+  },
+  "YearTablePc": {
+    "path": "vue/src/year-table/src/pc.vue",
+    "type": "template",
+    "exclude": false
   }
 }
diff --git a/packages/renderless/package.json b/packages/renderless/package.json
index 440f717135..001a3993eb 100644
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-renderless",
   "private": true,
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
@@ -43,4 +43,4 @@
     "esno": "^0.16.3",
     "tsup": "7.2.0"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/renderless/src/action-sheet/index.ts b/packages/renderless/src/action-sheet/index.ts
index 33a26a0a6d..c0dc851158 100644
--- a/packages/renderless/src/action-sheet/index.ts
+++ b/packages/renderless/src/action-sheet/index.ts
@@ -19,7 +19,6 @@ export const setSheetStyle =
         'position': 'absolute'
       }
       state.sheetContentStyle = {
-        'position': 'absolute',
         'max-height': props.height
       }
     } else {
diff --git a/packages/renderless/src/card/index.ts b/packages/renderless/src/card/index.ts
index 49adc6c1b5..3a895ada12 100644
--- a/packages/renderless/src/card/index.ts
+++ b/packages/renderless/src/card/index.ts
@@ -106,3 +106,20 @@ export const getItemChecked =
       return state.model === props.label
     }
   }
+
+export const cardClick =
+  ({ emit, state, props }) =>
+  (event) => {
+    if (props.checkMode !== 'normal' && !state.disabled) {
+      if (state.checkType === 'checkbox') {
+        if (state.model.includes(props.label)) {
+          state.model = state.model.filter((label) => label !== props.label)
+        } else {
+          state.model.push(props.label)
+        }
+      } else {
+        state.model = props.label
+      }
+    }
+    emit('click', event)
+  }
diff --git a/packages/renderless/src/card/vue.ts b/packages/renderless/src/card/vue.ts
index bf4cdd7284..5d064e39ab 100644
--- a/packages/renderless/src/card/vue.ts
+++ b/packages/renderless/src/card/vue.ts
@@ -9,10 +9,11 @@ import {
   getModel,
   setModel,
   computedStore,
-  getItemChecked
+  getItemChecked,
+  cardClick
 } from './index'
 
-export const api = ['state', 'handelIconClick', 'handleChange']
+export const api = ['state', 'handelIconClick', 'handleChange', 'cardClick']
 
 export const renderless = (
   props,
@@ -42,7 +43,8 @@ export const renderless = (
     model: computed({
       get: () => api.getModel(),
       set: (val) => api.setModel(val)
-    })
+    }),
+    checkMode: computed(() => props.checkMode)
   })
 
   Object.assign(api, {
@@ -53,6 +55,7 @@ export const renderless = (
     isDisabled: isDisabled({ props, state }),
     setModel: setModel({ constants, dispatch, emit, props, vm, state }),
     handleChange: handleChange({ constants, dispatch, emit, state, nextTick }),
+    cardClick: cardClick({ emit, state, props }),
     getSliceNum: getSliceNum({ state, props }),
     getIconNum: getIconNum({ state, props }),
     computedStore: computedStore({ state, props }),
diff --git a/packages/renderless/src/carousel-item/index.ts b/packages/renderless/src/carousel-item/index.ts
index 45d86ee08a..4c723db4a9 100644
--- a/packages/renderless/src/carousel-item/index.ts
+++ b/packages/renderless/src/carousel-item/index.ts
@@ -1,15 +1,3 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
 export const processIndex = ({ activeIndex, index, length }) => {
   if (activeIndex === 0 && index === length - 1) {
     return -1
@@ -37,11 +25,11 @@ export const calculateTranslate =
   }
 
 export const translateItem =
-  ({ api, CARD_SCALE, parent, state }) =>
+  ({ api, CARD_SCALE, parent, state, carouselParent }) =>
   ({ activeIndex, index, oldIndex }) => {
-    const parentHeight = parent.$parent.$el.offsetHeight
-    const parentWidth = parent.$parent.$el.offsetWidth
-    const vnode = parent.$parent
+    const parentHeight = carouselParent.$el.offsetHeight
+    const parentWidth = carouselParent.$el.offsetWidth
+    const vnode = carouselParent
     const length = vnode.state.items.length
     const { TYPE_CARD, TYPE_VERTICAL } = parent.$constants
 
@@ -69,17 +57,21 @@ export const translateItem =
     } else {
       state.active = index === activeIndex
 
-      state.translate =
-        vnode.type === TYPE_VERTICAL ? parentHeight * (index - activeIndex) : parentWidth * (index - activeIndex)
+      if (length === 2 && !state.active) {
+        state.translate = vnode.type === TYPE_VERTICAL ? -parentHeight : -parentWidth
+      } else {
+        state.translate =
+          vnode.type === TYPE_VERTICAL ? parentHeight * (index - activeIndex) : parentWidth * (index - activeIndex)
+      }
     }
 
     state.ready = true
   }
 
 export const handleItemClick =
-  ({ state, parent }) =>
+  ({ state, parent, carouselParent }) =>
   () => {
-    const vnode = parent.$parent
+    const vnode = carouselParent
 
     if (vnode && vnode.type === parent.$constants.TYPE_CARD) {
       const index = vnode.state.items.findIndex((item) => item.state.translate === state.translate)
@@ -88,14 +80,16 @@ export const handleItemClick =
   }
 
 export const computedTransform =
-  ({ parent, TYPE_VERTICAL, mode, state }) =>
+  ({ carouselParent, TYPE_VERTICAL, mode, state }) =>
   () => {
     const TRANSLATE =
-      parent.$parent.type === TYPE_VERTICAL
+      carouselParent.type === TYPE_VERTICAL
         ? `translateY(${state.translate + state.delta}px) scale(${state.scale})`
         : `translateX(${state.translate + state.delta}px) scale(${state.scale})`
     const style = mode === 'mobile-first' ? { width: '100%', height: '100%' } : {}
 
+    moveItemBack(carouselParent, state, TYPE_VERTICAL)
+
     return {
       msTransform: TRANSLATE,
       webkitTransform: TRANSLATE,
@@ -103,7 +97,18 @@ export const computedTransform =
       ...style
     }
   }
+// 幻灯片切换完后将第一张的位置移动到当前显示的幻灯片的后面，修复幻灯片数量为2时滚动方向不一致的问题
+const moveItemBack = (parent, state, TYPE_VERTICAL) => {
+  if (!parent || !parent.$el) return
 
+  const length = parent.state.items.length
+
+  setTimeout(() => {
+    if (length === 2 && !state.active) {
+      state.translate = parent.type === TYPE_VERTICAL ? parent.$el.offsetHeight : parent.$el.offsetWidth
+    }
+  }, 300) // 300是幻灯片动画时间
+}
 export const resetAnimatingMf = (state) => () => {
   state.animatingMf = false
 }
diff --git a/packages/renderless/src/carousel-item/vue.ts b/packages/renderless/src/carousel-item/vue.ts
index 26e6684271..a31f4af74b 100644
--- a/packages/renderless/src/carousel-item/vue.ts
+++ b/packages/renderless/src/carousel-item/vue.ts
@@ -40,11 +40,17 @@ export const api = [
   'setDelta'
 ]
 
-export const renderless = (props, { computed, onMounted, onUnmounted, reactive }, { parent, dispatch, mode }) => {
+export const renderless = (
+  props,
+  { computed, onMounted, onUnmounted, reactive, inject },
+  { parent, dispatch, mode, vm }
+) => {
   const api = {}
   const CARD_SCALE = parent.$constants.CARD_SCALE
   const TYPE_VERTICAL = parent.$constants.TYPE_VERTICAL
 
+  const carouselParent = inject('CarouselVm')
+
   const state = reactive({
     scale: 1,
     translate: 0,
@@ -55,10 +61,10 @@ export const renderless = (props, { computed, onMounted, onUnmounted, reactive }
     animating: false,
     animatingMf: false,
     isOblique: false,
-    carouselParent: parent.$parent,
+    carouselParent,
     hasTitle: computed(() => !!props.title),
-    moving: computed(() => parent.$parent.state.moving),
-    animate: computed(() => (Math.abs(parent.$parent.state.delta) > 0 ? !state.animatingMf : state.animating)),
+    moving: computed(() => carouselParent.state.moving),
+    animate: computed(() => (Math.abs(carouselParent.state.delta) > 0 ? !state.animatingMf : state.animating)),
     getTransform: computed(() => api.computedTransform()),
     delta: 0
   })
@@ -66,23 +72,23 @@ export const renderless = (props, { computed, onMounted, onUnmounted, reactive }
   Object.assign(api, {
     state,
     processIndex,
-    handleItemClick: handleItemClick({ state, parent }),
-    computedTransform: computedTransform({ parent, TYPE_VERTICAL, mode, state }),
+    handleItemClick: handleItemClick({ state, parent, carouselParent }),
+    computedTransform: computedTransform({ carouselParent, TYPE_VERTICAL, mode, state }),
     calculateTranslate: calculateTranslate({ CARD_SCALE, state }),
-    translateItem: translateItem({ api, CARD_SCALE, parent, state }),
+    translateItem: translateItem({ api, CARD_SCALE, parent, state, carouselParent }),
     setDelta: setDelta({ state }),
     resetAnimatingMf: resetAnimatingMf(state)
   })
 
   onMounted(() => {
     // 向父组件提交 updateItems 事件
-    dispatch('Carousel', 'updateItems', [])
+    dispatch('Carousel', 'updateItems', [vm])
     // 向父组件提交 complete 事件
     dispatch('Carousel', 'complete', [])
   })
 
   onUnmounted(() => {
-    parent.$parent && parent.$parent.updateItems()
+    carouselParent && carouselParent.updateItems()
   })
 
   return api
diff --git a/packages/renderless/src/carousel/index.ts b/packages/renderless/src/carousel/index.ts
index 04d2af9e4c..86773a32e7 100644
--- a/packages/renderless/src/carousel/index.ts
+++ b/packages/renderless/src/carousel/index.ts
@@ -1,18 +1,7 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
 import throttle from '../common/deps/throttle'
 import { getDirection } from '../common/deps/touch'
 import { POSITION } from '../common'
+import emulate from '../common/deps/touch-emulator'
 
 // 鼠标进入幻灯片事件
 export const handleMouseEnter =
@@ -76,13 +65,22 @@ export const resetItemPosition = (state) => (oldIndex) => {
 
 // 播放幻灯片
 export const playSlides =
-  ({ props, state }) =>
+  ({ api, props, state }) =>
   () => {
+    let newIndex
+    let oldIndex = state.activeIndex
+
     if (state.activeIndex < state.items.length - 1) {
-      state.activeIndex++
+      newIndex = state.activeIndex + 1
     } else if (props.loop) {
-      state.activeIndex = 0
+      newIndex = 0
     }
+
+    api.canActive(newIndex, oldIndex).then((result) => {
+      if (result) {
+        state.activeIndex = newIndex
+      }
+    })
   }
 
 // 暂停计时器
@@ -118,19 +116,43 @@ export const setActiveItem =
 
     const length = state.items.length
     const oldIndex = state.activeIndex
+    let newIndex
 
     if (index < 0) {
-      state.activeIndex = props.loop ? length - 1 : 0
+      newIndex = props.loop ? length - 1 : 0
     } else if (index >= length) {
-      state.activeIndex = props.loop ? 0 : length - 1
+      newIndex = props.loop ? 0 : length - 1
     } else {
-      state.activeIndex = index
+      newIndex = index
     }
 
-    if (oldIndex === state.activeIndex) {
-      api.resetItemPosition(oldIndex)
+    const nextProcess = () => {
+      state.activeIndex = newIndex
+
+      if (oldIndex === state.activeIndex) {
+        api.resetItemPosition(oldIndex)
+      }
+    }
+
+    if (newIndex === oldIndex) {
+      nextProcess()
+    } else {
+      api.canActive(newIndex, oldIndex).then((result) => {
+        if (result) {
+          nextProcess()
+        }
+      })
     }
   }
+export const canActive = (props) => (newIndex, oldIndex) => {
+  return new Promise((resolve) => {
+    if (typeof props.beforeSwipe === 'function') {
+      resolve(props.beforeSwipe(newIndex, oldIndex))
+    } else {
+      resolve(true)
+    }
+  }).then((result) => result !== false)
+}
 
 export const prev =
   ({ api, state }) =>
@@ -142,15 +164,25 @@ export const next =
   () =>
     api.setActiveItem(state.activeIndex + 1)
 
-export const handleIndicatorClick = (state) => (index) => {
-  state.activeIndex = index
-}
+export const handleIndicatorClick =
+  ({ api, state }) =>
+  (index) => {
+    api.canActive(index, state.activeIndex).then((result) => {
+      if (result) {
+        state.activeIndex = index
+      }
+    })
+  }
 
 export const handleIndicatorHover =
-  ({ props, state }) =>
+  ({ api, props, state }) =>
   (index) => {
     if (props.trigger === 'hover' && index !== state.activeIndex) {
-      state.activeIndex = index
+      api.canActive(index, state.activeIndex).then((result) => {
+        if (result) {
+          state.activeIndex = index
+        }
+      })
     }
   }
 
@@ -196,13 +228,17 @@ export const computedStyle =
   }
 
 export const onComplete =
-  ({ count, emit, props, state }) =>
+  ({ api, count, emit, props, state }) =>
   (total) => {
     if (count++ === total) {
       state.completed = true
 
       if (props.initialIndex < state.items.length && props.initialIndex >= 0) {
-        state.activeIndex = props.initialIndex
+        api.canActive(props.initialIndex, state.activeIndex).then((result) => {
+          if (result) {
+            state.activeIndex = props.initialIndex
+          }
+        })
       }
 
       emit('complete')
@@ -210,12 +246,15 @@ export const onComplete =
   }
 
 export const touchstart =
-  ({ state, api }) =>
+  ({ props, state, api }) =>
   (event) => {
     if (state.items.length <= 1 || ~state.noTouchNode.indexOf(event.target.nodeName)) return
 
-    event.preventDefault()
-    event.stopPropagation()
+    if (!props.swipeable) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
     resetTouchStatus(state)
     api.pauseTimer()
     state.itemsTranslate = state.items.map((item) => item.state.translate)
@@ -294,3 +333,36 @@ function resetTouchStatus(state) {
   state.offsetPos.X = 0
   state.offsetPos.Y = 0
 }
+
+export const simulateTouch =
+  ({ props, vm }) =>
+  () => {
+    if (props.swipeable && vm.$refs.carousel) {
+      emulate()
+      vm.$refs.carousel.setAttribute('data-tiny-touch-simulate-container', '')
+    }
+  }
+
+export const computedHasButtons =
+  ({ props, state, mode }) =>
+  () => {
+    if (props.lite) {
+      return false
+    } else if (mode === 'mobile-first') {
+      return props.arrow !== 'never' && state.items.length > 1
+    } else if (mode === 'pc') {
+      return props.arrow !== 'never'
+    }
+  }
+
+export const computedHasIndicators =
+  ({ props, state, mode }) =>
+  () => {
+    if (props.lite) {
+      return false
+    } else if (mode === 'mobile-first') {
+      return props.indicatorPosition !== 'none' && state.items.length > 1
+    } else if (mode === 'pc') {
+      return props.indicatorPosition !== 'none'
+    }
+  }
diff --git a/packages/renderless/src/carousel/vue.ts b/packages/renderless/src/carousel/vue.ts
index 7d654fcb02..3bf2defb35 100644
--- a/packages/renderless/src/carousel/vue.ts
+++ b/packages/renderless/src/carousel/vue.ts
@@ -1,15 +1,3 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
 import {
   onComplete,
   handleMouseEnter,
@@ -35,7 +23,11 @@ import {
   touchstart,
   touchmove,
   touchend,
-  computedStyle
+  computedStyle,
+  simulateTouch,
+  computedHasButtons,
+  computedHasIndicators,
+  canActive
 } from './index'
 import { addResizeListener, removeResizeListener } from '../common/deps/resize-event'
 
@@ -99,28 +91,30 @@ const initState = ({ reactive, computed, api }) => {
     moveDisable: false,
     noTouchNode: ['svg', 'BUTTON', 'path', 'g'],
     style: computed(() => api.computedStyle()),
-    hasLabel: computed(() => api.computedHasLabel(state.items))
+    hasLabel: computed(() => api.computedHasLabel(state.items)),
+    hasButtons: computed(() => api.computedHasButtons()),
+    hasIndicators: computed(() => api.computedHasIndicators())
   })
 
   return state
 }
 
-const initApi = ({ vm, api, state, props, emit }) => {
+const initApi = ({ vm, api, state, props, emit, mode }) => {
   Object.assign(api, {
     state,
     computedHasLabel,
-    touchend: touchend({ state, api }),
-    touchstart: touchstart({ state, api }),
+    touchend: touchend({ props, state, api }),
+    touchstart: touchstart({ props, state, api }),
     touchmove: touchmove({ props, state, vm }),
-    playSlides: playSlides({ props, state }),
-    onComplete: onComplete({ count: 0, emit, props, state }),
+    playSlides: playSlides({ api, props, state }),
+    onComplete: onComplete({ api, count: 0, emit, props, state }),
     pauseTimer: pauseTimer(state),
     itemInStage: itemInStage(state),
     resetItemPosition: resetItemPosition(state),
     watchItems: watchItems({ api, props }),
     handleButtonLeave: handleButtonLeave(state),
-    handleIndicatorClick: handleIndicatorClick(state),
-    handleIndicatorHover: handleIndicatorHover({ props, state }),
+    handleIndicatorClick: handleIndicatorClick({ api, state }),
+    handleIndicatorHover: handleIndicatorHover({ api, props, state }),
     watchActiveIndex: watchActiveIndex({ api, emit }),
     watchAutoplay: watchAutoplay(api),
     startTimer: startTimer({ api, props, state }),
@@ -132,7 +126,11 @@ const initApi = ({ vm, api, state, props, emit }) => {
     handleMouseLeave: handleMouseLeave({ api, state }),
     throttledIndicatorHover: throttledIndicatorHover(api),
     handleButtonEnter: handleButtonEnter({ api, state }),
-    computedStyle: computedStyle({ props })
+    computedStyle: computedStyle({ props }),
+    simulateTouch: simulateTouch({ props, vm }),
+    computedHasButtons: computedHasButtons({ props, state, mode }),
+    computedHasIndicators: computedHasIndicators({ props, state, mode }),
+    canActive: canActive(props)
   })
 }
 
@@ -147,26 +145,28 @@ const initWatch = ({ watch, props, api, state }) => {
 
 export const renderless = (
   props,
-  { computed, onMounted, onBeforeUnmount, reactive, watch },
-  { vm, parent, emit, constants, childrenHandler }
+  { computed, onMounted, onBeforeUnmount, reactive, watch, provide },
+  { vm, parent, emit, mode }
 ) => {
   const api = {}
   const state = initState({ reactive, computed, api })
 
-  initApi({ vm, api, state, props, emit })
+  initApi({ vm, api, state, props, emit, mode })
 
-  const { updateItems } = useItems({ api, vm, onMounted, state, watch, constants, childrenHandler, parent })
+  const { updateItems } = useItems({ api, vm, onMounted, state, watch })
 
   api.updateItems = updateItems
 
   useActiveIndex({ api, parent, props, state, watch })
   useResizeListener({ api, onBeforeUnmount, onMounted, parent })
 
+  provide('CarouselVm', vm)
   initWatch({ watch, props, api, state })
 
   onMounted(() => {
     api.startTimer()
     api.onComplete(state.items.length)
+    api.simulateTouch()
   })
 
   // 监听子组件 CarouselItem 提交的 complete 事件
@@ -179,21 +179,11 @@ export const renderless = (
   return api
 }
 
-export const useItems = ({ api, onMounted, state, watch, constants, childrenHandler, parent }) => {
-  const updateItems = () => {
-    let $children = []
-
-    $children =
-      parent.$children &&
-      parent.$children[0].$children.filter((child) => {
-        return child.$el.classList && Array.from(child.$el.classList).includes('tiny-carousel__item')
-      })
-    if (!$children.length) {
-      childrenHandler(({ options, vm }) => {
-        options.name === constants.CHILD_NAME && $children.push(vm)
-      })
+export const useItems = ({ api, onMounted, state, watch }) => {
+  const updateItems = (carouselItemVm) => {
+    if (carouselItemVm && !state.items.includes(carouselItemVm)) {
+      state.items.push(carouselItemVm)
     }
-    state.items = $children
   }
 
   watch(
diff --git a/packages/renderless/src/cascader-panel/index.ts b/packages/renderless/src/cascader-panel/index.ts
index 6502e5a9d0..5d0a8f0b4c 100644
--- a/packages/renderless/src/cascader-panel/index.ts
+++ b/packages/renderless/src/cascader-panel/index.ts
@@ -233,7 +233,13 @@ export const handleCheckChange =
   }
 
 export const lazyLoad =
-  ({ api, $parent, state, Store }: Pick<ICascaderPanelRenderlessParams, 'api' | '$parent' | 'state' | 'Store'>) =>
+  ({
+    api,
+    $parent,
+    state,
+    Store,
+    emit
+  }: Pick<ICascaderPanelRenderlessParams, 'api' | '$parent' | 'state' | 'Store' | 'emit'>) =>
   (currentNode?: ICascaderPanelNode, onFullfiled?: (dataList: ICascaderPanelData[]) => void) => {
     let node = currentNode as ICascaderPanelLazyLoadNode | ICascaderPanelNode
 
@@ -252,6 +258,8 @@ export const lazyLoad =
       node.loading = false
       node.loaded = true
 
+      emit('load-data', dataList)
+
       if (Array.isArray(state.checkedValue)) {
         const nodeValue = state.checkedValue[state.loadCount++]
         const valueKey = state.config.value
diff --git a/packages/renderless/src/cascader-panel/vue.ts b/packages/renderless/src/cascader-panel/vue.ts
index 277689b808..78d738f3fb 100644
--- a/packages/renderless/src/cascader-panel/vue.ts
+++ b/packages/renderless/src/cascader-panel/vue.ts
@@ -122,7 +122,7 @@ const initApi = ({
     syncMenuState: syncMenuState({ api, nextTick, state }),
     syncMultiCheckState: syncMultiCheckState({ api, state }),
     calculateCheckedNodePaths: calculateCheckedNodePaths({ api, state }),
-    lazyLoad: lazyLoad({ api, $parent: parent, state, Store }),
+    lazyLoad: lazyLoad({ api, $parent: parent, state, Store, emit }),
     syncCheckedValue: syncCheckedValue({ api, props, state }),
     focusNode: focusNode(api),
     checkNode: checkNode(api),
diff --git a/packages/renderless/src/cascader-select/column-index.ts b/packages/renderless/src/cascader-select/column-index.ts
index 5665a01016..8e70a9ea2b 100644
--- a/packages/renderless/src/cascader-select/column-index.ts
+++ b/packages/renderless/src/cascader-select/column-index.ts
@@ -153,7 +153,7 @@ export const setMove =
 
       api.setTransform(type, deg, endMove, time)
 
-      state.currIndex = Math.abs(Math.round(endMove / +optionHeight)) + 1
+      state.currIndex = state.defaultIndex = Math.abs(Math.round(endMove / +optionHeight)) + 1
     } else {
       let deg = 0
       let currentDeg = (-updateMove / +optionHeight + 1) * state.rotation
@@ -166,7 +166,7 @@ export const setMove =
 
       if (minDeg < deg && deg < maxDeg) {
         api.setTransform(null, deg + 'deg', updateMove, undefined)
-        state.currIndex = Math.abs(Math.round(updateMove / +optionHeight)) + 1
+        state.currIndex = state.defaultIndex = Math.abs(Math.round(updateMove / +optionHeight)) + 1
       }
     }
   }
@@ -181,17 +181,23 @@ export const modifyStatus =
   ({ state, props, api }) =>
   (type) => {
     const { column } = props
-    let index = column.findIndex((columnItem) => columnItem[props.fieldNames.value] === props.value)
+    const value = isEffectVal(props.value) ? props.value : props.defaultValue
+    const currentIndex = isEffectVal(props.value) ? 'currIndex' : 'defaultIndex'
+    let index = column.findIndex((columnItem) => columnItem[props.fieldNames.value] === value)
 
-    state.currIndex = index === -1 ? 1 : index + 1
+    state[currentIndex] = index === -1 ? 1 : index + 1
     let move = index === -1 ? 0 : index * +props.optionHeight
     type && api.setChooseValue()
     api.setMove(-move)
   }
 
 export const OptionStyle =
-  ({ state }) =>
+  ({ props, state }) =>
   (option, column, offset) => {
-    const currentIndex = state.currIndex - 1
+    const currentIndex = isEffectVal(props.value) ? state.currIndex - 1 : state.defaultIndex - 1
     return option === column[currentIndex + offset] || option === column[currentIndex - offset]
   }
+
+const isEffectVal = (val) => {
+  return val || val === 0
+}
diff --git a/packages/renderless/src/cascader-select/column.ts b/packages/renderless/src/cascader-select/column.ts
index 6f31e5d76f..178f7ca89a 100644
--- a/packages/renderless/src/cascader-select/column.ts
+++ b/packages/renderless/src/cascader-select/column.ts
@@ -42,6 +42,7 @@ export const renderless = (props, { reactive, computed, watch, ref, onMounted },
     },
 
     currIndex: 1,
+    defaultIndex: 1,
     transformY: 0,
     scrollDistance: 0,
     rotation: 20,
@@ -79,7 +80,7 @@ export const renderless = (props, { reactive, computed, watch, ref, onMounted },
   Object.assign(api, {
     state,
     touch,
-    OptionStyle: OptionStyle({ state }),
+    OptionStyle: OptionStyle({ props, state }),
     setRollerStyle: setRollerStyle({ state }),
     isHidden: isHidden({ state }),
     onTouchStart: onTouchStart({ state, props, touch, vm }),
@@ -108,10 +109,12 @@ export const renderless = (props, { reactive, computed, watch, ref, onMounted },
   )
 
   watch(
-    () => props.value,
-    () => {
-      state.transformY = 0
-      api.modifyStatus(false)
+    () => [props.value, props.defaultValue],
+    (val) => {
+      if ((val || val === 0) && props.visible) {
+        state.transformY = 0
+        api.modifyStatus(false)
+      }
     },
     {
       deep: true
diff --git a/packages/renderless/src/cascader-select/usePicker.ts b/packages/renderless/src/cascader-select/usePicker.ts
index e7026b3663..cacceacde0 100644
--- a/packages/renderless/src/cascader-select/usePicker.ts
+++ b/packages/renderless/src/cascader-select/usePicker.ts
@@ -171,7 +171,7 @@ const change =
 // 当前类型
 const columnsTypeComputed = ({ state, computed, columnFieldNames }) =>
   computed(() => {
-    const firstColumn = state.formattedColumns[0]
+    const firstColumn = state.formattedColumns && state.formattedColumns[0]
     const fields = columnFieldNames.value
     if (firstColumn) {
       if (Array.isArray(firstColumn)) {
@@ -229,7 +229,8 @@ const validProps =
   ({ props }) =>
   () => {
     const { modelValue, options } = props
-    return validArr(modelValue) && validArr(options) && modelValue.length === options.length
+    const isSameLen = modelValue && modelValue.length ? modelValue.length === options.length : true
+    return Array.isArray(modelValue) && Array.isArray(options) && isSameLen
   }
 
 const parseType =
diff --git a/packages/renderless/src/cascader/vue.ts b/packages/renderless/src/cascader/vue.ts
index 44311b4af0..824ea72942 100644
--- a/packages/renderless/src/cascader/vue.ts
+++ b/packages/renderless/src/cascader/vue.ts
@@ -73,7 +73,8 @@ export const api = [
   'toggleDropDownVisible',
   'handleKeyDown',
   'handleMouseenter',
-  'handleMouseleave'
+  'handleMouseleave',
+  'computePresentContent'
 ]
 
 const initState = ({
diff --git a/packages/renderless/src/checkbox/index.ts b/packages/renderless/src/checkbox/index.ts
index c0f644810f..4aca39f1ca 100644
--- a/packages/renderless/src/checkbox/index.ts
+++ b/packages/renderless/src/checkbox/index.ts
@@ -218,26 +218,3 @@ export const computedShowText =
       return props.label
     }
   }
-
-export const handleLabelMouseenter =
-  ({ state, vm }: Pick<ICheckboxRenderlessParams, 'state' | 'vm'>) =>
-  (e) => {
-    const label = e.target
-
-    if (label && label.scrollWidth > label.offsetWidth) {
-      const tooltip = vm.$refs.tooltip
-
-      tooltip.state.referenceElm = label
-      tooltip.state.popperElm && (tooltip.state.popperElm.style.display = 'none')
-      tooltip.doDestroy()
-
-      state.tooltipVisible = true
-      state.displayedValue = label.textContent
-
-      setTimeout(tooltip.updatePopper, 20)
-    }
-  }
-
-export const handleMouseleave = (state) => () => {
-  state.tooltipVisible = false
-}
diff --git a/packages/renderless/src/checkbox/vue.ts b/packages/renderless/src/checkbox/vue.ts
index 1b968d9c59..36af0d1f60 100644
--- a/packages/renderless/src/checkbox/vue.ts
+++ b/packages/renderless/src/checkbox/vue.ts
@@ -37,12 +37,10 @@ import {
   mounted,
   toggleEvent,
   computedIsShowText,
-  computedShowText,
-  handleLabelMouseenter,
-  handleMouseleave
+  computedShowText
 } from './index'
 
-export const api = ['state', 'handleChange', 'computedStore', 'handleLabelMouseenter', 'handleMouseleave']
+export const api = ['state', 'handleChange', 'computedStore']
 
 const initState = ({ reactive, computed, parent, api, inject, props }) => {
   const state: ICheckboxState = reactive({
@@ -72,9 +70,7 @@ const initState = ({ reactive, computed, parent, api, inject, props }) => {
     }),
     showText: computed(() => api.computedShowText()),
     isShowText: computed(() => api.computedIsShowText()),
-    shape: inject('shape', null) || props.shape,
-    tooltipVisible: false,
-    displayedValue: ''
+    shape: inject('shape', null) || props.shape
   })
 
   return state
@@ -115,9 +111,7 @@ const initApi = ({
     handleChange: handleChange({ state, props, emit, nextTick, dispatch, constants }),
     computedDisplayLabel: computedDisplayLabel({ state, props, t }),
     computedIsShowText: computedIsShowText({ props }),
-    computedShowText: computedShowText({ props }),
-    handleLabelMouseenter: handleLabelMouseenter({ state, vm }),
-    handleMouseleave: handleMouseleave(state)
+    computedShowText: computedShowText({ props })
   } as Partial<ICheckboxApi>)
 }
 
diff --git a/packages/renderless/src/collapse-item/vue.ts b/packages/renderless/src/collapse-item/vue.ts
index f979b2fda5..c61462455c 100644
--- a/packages/renderless/src/collapse-item/vue.ts
+++ b/packages/renderless/src/collapse-item/vue.ts
@@ -25,7 +25,7 @@ export const api = ['state', 'isActive', 'handleFocus', 'handleEnterClick', 'han
 export const renderless = (
   props: ICollapseItemProps,
   { computed, reactive }: ISharedRenderlessParamHooks,
-  { parent, constants, dispatch }: ICollapseItemRenderlessParamUtils
+  { parent, constants, dispatch, designConfig }: ICollapseItemRenderlessParamUtils
 ) => {
   const _constants = parent.collapse._constants
   const componentName = _constants.COMPONENT_NAME.Collapse
@@ -37,7 +37,8 @@ export const renderless = (
     focusing: false,
     contentHeight: 0,
     contentWrapStyle: { height: 'auto', display: 'block' },
-    isActive: computed(() => parent.collapse.state.activeNames.includes(props.name))
+    isActive: computed(() => parent.collapse.state.activeNames.includes(props.name)),
+    arrowIcon: props.expandIcon || designConfig?.icons?.arrowIcon || 'IconChevronRight'
   })
 
   const api: ICollapseItemApi = {
diff --git a/packages/renderless/src/common/deps/clickoutside.ts b/packages/renderless/src/common/deps/clickoutside.ts
index b0cd772882..95476dfad9 100644
--- a/packages/renderless/src/common/deps/clickoutside.ts
+++ b/packages/renderless/src/common/deps/clickoutside.ts
@@ -19,11 +19,18 @@ let startClick
 let seed = 0
 
 if (!isServer) {
-  on(document, 'mousedown', (event) => (startClick = event))
+  on(document, 'mousedown', (event) => {
+    startClick = event
+    nodeList
+      .filter((node) => node[nameSpace].mousedownTrigger)
+      .forEach((node) => node[nameSpace].documentHandler(event, startClick))
+  })
 
   on(document, 'mouseup', (event) => {
-    nodeList.forEach((node) => node[nameSpace].documentHandler(event, startClick))
-    startClick = void 0
+    nodeList
+      .filter((node) => !node[nameSpace].mousedownTrigger)
+      .forEach((node) => node[nameSpace].documentHandler(event, startClick))
+    startClick = null
   })
 }
 
@@ -32,10 +39,8 @@ const createDocumentHandler = (el, binding, vnode) =>
     let popperElm = vnode.context.popperElm || (vnode.context.state && vnode.context.state.popperElm)
 
     if (
-      !mouseup ||
-      !mouseup.target ||
-      !mousedown ||
-      !mousedown.target ||
+      !mouseup?.target ||
+      !mousedown?.target ||
       el.contains(mouseup.target) ||
       el.contains(mousedown.target) ||
       el === mouseup.target ||
@@ -63,19 +68,23 @@ export default {
   bind: (el, binding, vnode) => {
     nodeList.push(el)
     const id = seed++
+    const { modifiers, expression, value } = binding
 
     el[nameSpace] = {
       id,
       documentHandler: createDocumentHandler(el, binding, vnode),
-      methodName: binding.expression,
-      bindingFn: binding.value
+      methodName: expression,
+      bindingFn: value,
+      mousedownTrigger: modifiers.mousedown
     }
   },
 
   update: (el, binding, vnode) => {
+    const { modifiers, expression, value } = binding
     el[nameSpace].documentHandler = createDocumentHandler(el, binding, vnode)
-    el[nameSpace].methodName = binding.expression
-    el[nameSpace].bindingFn = binding.value
+    el[nameSpace].methodName = expression
+    el[nameSpace].bindingFn = value
+    el[nameSpace].mousedownTrigger = modifiers.mousedown
   },
 
   unbind: (el) => {
diff --git a/packages/renderless/src/common/deps/letter-only.ts b/packages/renderless/src/common/deps/letter-only.ts
deleted file mode 100644
index c838b572b5..0000000000
--- a/packages/renderless/src/common/deps/letter-only.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-import { on, off } from './dom'
-
-/**
- * v-letter-only
- * @desc 只接受输入非数字字符
- * @example
- * ```html
- * <input v-letter-only>
- * ```
- */
-const checkValue = (event) => {
-  if (event.charCode >= 48 && event.charCode <= 57) {
-    event.preventDefault()
-  }
-
-  return true
-}
-
-export default {
-  bind(element) {
-    on(element, 'keypress', checkValue)
-  },
-  unbind(element) {
-    off(element, 'keypress', checkValue)
-  }
-}
diff --git a/packages/renderless/src/common/deps/number-only.ts b/packages/renderless/src/common/deps/number-only.ts
deleted file mode 100644
index 9f02c53a2b..0000000000
--- a/packages/renderless/src/common/deps/number-only.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-import { on, off } from './dom'
-
-/**
- * v-number-only
- * @desc 只接受输入数字
- * @example
- * ```html
- * <input v-number-only>
- * ```
- */
-const checkValue = (event) => {
-  event.target.value = event.target.value.replace(/[^0-9]/g, '')
-
-  if (event.charCode >= 48 && event.charCode <= 57) {
-    return true
-  }
-
-  event.preventDefault()
-}
-
-export default {
-  bind(element) {
-    on(element, 'keypress', checkValue)
-  },
-  unbind(element) {
-    off(element, 'keypress', checkValue)
-  }
-}
diff --git a/packages/renderless/src/common/deps/popper.ts b/packages/renderless/src/common/deps/popper.ts
index f2bdd41766..b63fbe7382 100644
--- a/packages/renderless/src/common/deps/popper.ts
+++ b/packages/renderless/src/common/deps/popper.ts
@@ -267,9 +267,20 @@ const getOffsetRect = (el: HTMLElement) => {
   return elementRect
 }
 
+/** 阻止popper层上的 wheel事件 */
 const stopFn = (ev: Event) => {
   ev.stopPropagation()
 }
+
+/** 全局的resize观察器， 监听popper的大小改变  */
+const resizeOb = new ResizeObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.target.popperVm && entry.contentRect.height > 50) {
+      entry.target.popperVm.update()
+    }
+  })
+})
+
 interface PopperOptions {
   arrowOffset: number
   arrowElement: string
@@ -366,7 +377,10 @@ class Popper {
     this.state.position = this._getPopperPositionByRefernce(this._reference)
 
     setStyle(this._popper, { position: this.state.position, top: 0 })
-
+    if (this._popper) {
+      this._popper.popperVm = this
+      resizeOb.observe(this._popper)
+    }
     this.update()
     this._setupEventListeners()
   }
@@ -499,6 +513,11 @@ class Popper {
 
   // 校正popper的位置在boundaries 的内部
   preventOverflow(data: UpdateData) {
+    // popover嵌套多层级时，防止第三个placement=top属性失效
+    if (this._options.ignoreBoundaries) {
+      return data
+    }
+
     let order = this._options.preventOverflowOrder
     let popper = getPopperClientRect(data.offsets.popper)
 
@@ -767,7 +786,7 @@ class Popper {
     on(window, 'resize', this.state.updateBoundFn)
 
     if (this._options.boundariesElement !== 'window') {
-      let target: HTMLElement = getScrollParent(this._reference)
+      let target: HTMLElement = this._options.scrollParent || getScrollParent(this._reference)
       const customTargets = []
 
       // 如果下拉框组件存在于多端表单中，需要同时监听上一层scroll元素的滚动
diff --git a/packages/renderless/src/common/deps/throttle.ts b/packages/renderless/src/common/deps/throttle.ts
index 18f71be82f..cd7415306b 100644
--- a/packages/renderless/src/common/deps/throttle.ts
+++ b/packages/renderless/src/common/deps/throttle.ts
@@ -75,5 +75,14 @@ export default function (delay, noTrailing, callback, debounceMode?: string): Fu
     }
   }
 
+  function cancel() {
+    if (timeoutID) {
+      clearTimeout(timeoutID)
+      timeoutID = null
+    }
+  }
+
+  wrapper._cancel = cancel
+
   return wrapper
 }
diff --git a/packages/renderless/src/common/deps/touch-emulator.ts b/packages/renderless/src/common/deps/touch-emulator.ts
index 0baa8b388e..ef28b50e6d 100644
--- a/packages/renderless/src/common/deps/touch-emulator.ts
+++ b/packages/renderless/src/common/deps/touch-emulator.ts
@@ -3,7 +3,7 @@ let initiated = false
 let eventTarget = null
 let mouseTarget = null
 
-const matches = Element.prototype.matches || Element.prototype.webkitMatchesSelector
+const matches = Element.prototype.matches
 
 const closest = (el, s) => {
   do {
diff --git a/packages/renderless/src/common/deps/tree-model/node.ts b/packages/renderless/src/common/deps/tree-model/node.ts
index f0affba53c..99cb28562c 100644
--- a/packages/renderless/src/common/deps/tree-model/node.ts
+++ b/packages/renderless/src/common/deps/tree-model/node.ts
@@ -310,6 +310,8 @@ export default class Node {
     insertNode({ arr: this.childNodes, index, item: child })
 
     this.updateLeafState()
+
+    return child
   }
 
   insertBefore(child, beforeNode) {
diff --git a/packages/renderless/src/common/deps/tree-model/tree-store.ts b/packages/renderless/src/common/deps/tree-model/tree-store.ts
index c032af055e..b3e2add94a 100644
--- a/packages/renderless/src/common/deps/tree-model/tree-store.ts
+++ b/packages/renderless/src/common/deps/tree-model/tree-store.ts
@@ -123,7 +123,10 @@ export default class TreeStore {
   append(data, parentData, index) {
     const parentNode = parentData ? this.getNode(parentData) : this.root
 
-    parentNode && parentNode.insertChild({ data }, index)
+    if (parentNode) {
+      const child = parentNode.insertChild({ data }, index)
+      data._isNewNode && this.registerNode(child)
+    }
   }
 
   setDefaultCheckedKey(newValue) {
diff --git a/packages/renderless/src/common/deps/useEventListener.ts b/packages/renderless/src/common/deps/useEventListener.ts
index fc66a99971..a6a4019282 100644
--- a/packages/renderless/src/common/deps/useEventListener.ts
+++ b/packages/renderless/src/common/deps/useEventListener.ts
@@ -1,11 +1,14 @@
 import { on, off, isServer } from './dom'
 
-const onMountedOrActivated =
+export const onMountedOrActivated =
   ({ onMounted, onActivated, nextTick }) =>
   (hook) => {
     let mounted
 
-    onMounted(() => (hook(), nextTick(() => (mounted = true))))
+    onMounted(() => {
+      hook()
+      nextTick(() => (mounted = true))
+    })
     onActivated(() => mounted && hook())
   }
 
@@ -48,7 +51,10 @@ export const useEventListener =
     let stopWatch
 
     if (isRef(target)) {
-      stopWatch = watch(target, (val, oldVal) => (remove(oldVal), add(val)))
+      stopWatch = watch(target, (val, oldVal) => {
+        remove(oldVal)
+        add(val)
+      })
     }
 
     return () => {
diff --git a/packages/renderless/src/common/deps/useInstanceSlots.ts b/packages/renderless/src/common/deps/useInstanceSlots.ts
new file mode 100644
index 0000000000..5be240e638
--- /dev/null
+++ b/packages/renderless/src/common/deps/useInstanceSlots.ts
@@ -0,0 +1,29 @@
+export const useInstanceSlots =
+  ({ getCurrentInstance, isVue2, nextTick, onUnmounted }) =>
+  () => {
+    const publicInstance = getCurrentInstance().proxy
+
+    /**
+     * 在 Vue2，$scopedSlots 内容是插槽方法，$slots 内容是执行后的虚拟节点，使用 $slots 实践中发现会导致插槽丢失响应性，应该使用 $scopedSlots
+     * 在 Vue3，$scopedSlots 是 undefined，$slots 内容是插槽方法，在渲染函数中使用 undefined 的 $scopedSlots 会出现警告提示
+     * 为了兼容 Vue2 和 Vue3，以及消除警告提示，这里在 Vue3 实例上定义 $scopedSlots 为 null
+     */
+    if (!isVue2) {
+      Object.defineProperty(publicInstance, '$scopedSlots', { configurable: true, value: null })
+    }
+
+    Object.defineProperty(publicInstance, 'instanceSlots', {
+      configurable: true,
+      get: () => publicInstance.$scopedSlots || publicInstance.$slots
+    })
+
+    onUnmounted(() => {
+      nextTick(() => {
+        if (!isVue2) {
+          delete publicInstance.$scopedSlots
+        }
+
+        delete publicInstance.instanceSlots
+      })
+    })
+  }
diff --git a/packages/renderless/src/common/deps/useRelation.ts b/packages/renderless/src/common/deps/useRelation.ts
new file mode 100644
index 0000000000..b95adb73b4
--- /dev/null
+++ b/packages/renderless/src/common/deps/useRelation.ts
@@ -0,0 +1,110 @@
+import { noop } from '../function'
+import { onMountedOrActivated as createHook } from './useEventListener'
+
+/**
+ * 处理组件嵌套的组合式 API
+ * relationKey 关系树上的父子组件使用同一个关系名称
+ * relationContainer 子组件顺序由关系容器确定，由根组件提供，可以不使用，子组件顺序就是组件创建顺序
+ * onChange 子组件顺序改变后的回调处理，由根组件提供，可以不使用
+ * childrenKey 在组件关系树上的所有实例中定义的子组件引用名称，默认是 instanceChildren
+ */
+export const useRelation =
+  ({ getCurrentInstance, inject, markRaw, nextTick, onMounted, onActivated, onUnmounted, provide, reactive, toRef }) =>
+  ({ relationKey, relationContainer, onChange, childrenKey } = {}) => {
+    if (!relationKey) {
+      throw new Error('[TINY Error]<relationKey> must exist.')
+    }
+
+    const instance = getCurrentInstance()
+    const state = reactive({ children: [] })
+    const injectValue = inject(relationKey, null)
+    // 收集所有的子组件刷新回调
+    let callbacks = []
+
+    if (injectValue) {
+      const { link, unlink, callbacks: injectCbs, childrenKey: injectKey } = injectValue
+
+      callbacks = injectCbs
+      childrenKey = childrenKey || injectKey || 'instanceChildren'
+
+      link(instance)
+
+      onUnmounted(() => unlink(instance))
+    } else {
+      childrenKey = childrenKey || 'instanceChildren'
+
+      const onMountedOrActivated = createHook({ onMounted, onActivated, nextTick })
+      const changeHandler = onChange ? () => nextTick(onChange) : noop
+
+      let relationMO
+
+      nextTick(() => {
+        // 在 mounted 之后，如果表示子组件关系的 dom 元素存在，就创建 MutationObserver 观察它的子树改变
+        const targetNode = typeof relationContainer === 'function' ? relationContainer() : relationContainer
+
+        if (targetNode) {
+          relationMO = new MutationObserver((mutationList, observer) => {
+            const flattenNodes = []
+            // 对关系容器 dom 子树进行平铺处理
+            flattenChildNodes(targetNode.childNodes, flattenNodes)
+            // 使用平铺的 dom 子树更新子组件顺序
+            callbacks.forEach((callback) => callback(flattenNodes, mutationList, observer))
+            // 执行后续组件 change 处理
+            changeHandler()
+          })
+
+          relationMO.observe(targetNode, { attributes: true, childList: true, subtree: true })
+        }
+      })
+
+      onMountedOrActivated(() => changeHandler())
+
+      onUnmounted(() => {
+        if (relationMO) {
+          relationMO.disconnect()
+          relationMO = null
+        }
+
+        callbacks = null
+      })
+    }
+
+    const link = (child) => state.children.push(markRaw(child.proxy))
+
+    const unlink = (child) => {
+      const index = state.children.indexOf(child.proxy)
+
+      if (index > -1) {
+        state.children.splice(index, 1)
+      }
+    }
+
+    // 刷新子组件顺序
+    callbacks.push((flattenNodes) => sortPublicInstances(state.children, flattenNodes))
+
+    provide(relationKey, { link, unlink, callbacks, childrenKey })
+
+    // 在 Public Instance 上定义子组件数组，并且在组件卸载时移除
+    Object.defineProperty(instance.proxy, childrenKey, { configurable: true, get: () => state.children })
+
+    onUnmounted(() => delete instance.proxy[childrenKey])
+
+    // 返回子组件数组 ref
+    return { children: toRef(state, 'children') }
+  }
+
+const flattenChildNodes = (childNodes, result) => {
+  if (childNodes.length) {
+    childNodes.forEach((childNode) => {
+      result.push(childNode)
+
+      if (childNode.childNodes) {
+        flattenChildNodes(childNode.childNodes, result)
+      }
+    })
+  }
+}
+
+const sortPublicInstances = (instances, flattenNodes) => {
+  instances.sort((a, b) => flattenNodes.indexOf(a.$el) - flattenNodes.indexOf(b.$el))
+}
diff --git a/packages/renderless/src/common/deps/vue-popper.ts b/packages/renderless/src/common/deps/vue-popper.ts
index f78183f290..cfe996f893 100644
--- a/packages/renderless/src/common/deps/vue-popper.ts
+++ b/packages/renderless/src/common/deps/vue-popper.ts
@@ -186,6 +186,8 @@ export default (options: IPopperInputParams) => {
 
     const popperJS = state.popperJS
     if (popperJS) {
+      // Tiny 新增，在动态切换renference时，需要实时获取最新的触发源
+      popperJS._reference = getReference({ state, props, vm, slots })
       popperJS.update()
 
       // 每次递增 z-index
diff --git a/packages/renderless/src/common/function.ts b/packages/renderless/src/common/function.ts
new file mode 100644
index 0000000000..ba57f6a595
--- /dev/null
+++ b/packages/renderless/src/common/function.ts
@@ -0,0 +1,27 @@
+import { isPromise } from './type'
+
+export const noop = () => {}
+
+export const callInterceptor = (interceptor, { args = [], done, canceled, error }) => {
+  if (interceptor) {
+    const returnVal = interceptor(...args)
+
+    if (isPromise(returnVal)) {
+      returnVal
+        .then((value) => {
+          if (value) {
+            done()
+          } else if (canceled) {
+            canceled()
+          }
+        })
+        .catch(error || noop)
+    } else if (returnVal) {
+      done()
+    } else if (canceled) {
+      canceled()
+    }
+  } else {
+    done()
+  }
+}
diff --git a/packages/renderless/src/common/type.ts b/packages/renderless/src/common/type.ts
index 63197ddbd8..6d78d183da 100644
--- a/packages/renderless/src/common/type.ts
+++ b/packages/renderless/src/common/type.ts
@@ -162,3 +162,5 @@ export const isSame = (x: any, y: any) =>
 
 /** 判断是否是正则表达式 */
 export const isRegExp = (value: any) => typeOf(value) === 'regExp'
+
+export const isPromise = (val) => isObject(val) && isFunction(val.then) && isFunction(val.catch)
diff --git a/packages/renderless/src/dialog-box/index.ts b/packages/renderless/src/dialog-box/index.ts
index f39e261225..fcfb4edc5b 100644
--- a/packages/renderless/src/dialog-box/index.ts
+++ b/packages/renderless/src/dialog-box/index.ts
@@ -59,33 +59,6 @@ export const computedStyle =
     return style
   }
 
-export const computedBodyStyle =
-  ({ vm, props, state }: Pick<IDialogBoxRenderlessParams, 'vm' | 'props' | 'state'>) =>
-  (): { maxHeight?: string } => {
-    const style = {
-      maxHeight: ''
-    }
-    const headerHeight = (vm.$refs.header && vm.$refs.header.offsetHeight) || 0
-    const footerHeight = (vm.$refs.footer && vm.$refs.footer.offsetHeight) || 0
-    let { maxHeight } = props
-
-    if (state.isFull || props.rightSlide) {
-      if (vm.$slots.footer) {
-        style.maxHeight = `calc(100vh - ${headerHeight + footerHeight}px)`
-      } else {
-        style.maxHeight = `calc(100vh - ${headerHeight}px)`
-      }
-    } else {
-      style.maxHeight = '65vh'
-    }
-
-    if (maxHeight && !state.isFull) {
-      style.maxHeight = 'none'
-    }
-
-    return style
-  }
-
 export const watchVisible =
   ({
     api,
diff --git a/packages/renderless/src/dialog-box/vue.ts b/packages/renderless/src/dialog-box/vue.ts
index 4ac4787701..12d1e5242c 100644
--- a/packages/renderless/src/dialog-box/vue.ts
+++ b/packages/renderless/src/dialog-box/vue.ts
@@ -29,7 +29,6 @@ import {
   handleDrag,
   showScrollbar,
   hideScrollbar,
-  computedBodyStyle,
   toggleFullScreen
 } from './index'
 import usePopup from '../common/deps/vue-popup'
@@ -81,7 +80,6 @@ const initState = ({
     dragable: false,
     isFull: props.fullscreen,
     style: computed(() => api.computedStyle()),
-    bodyStyle: computed(() => api.computedBodyStyle()),
     animationName: computed(() => api.computedAnimationName()),
     current,
     dragStyle: null
@@ -142,7 +140,6 @@ const initApi = ({
       state
     }),
     computedStyle: computedStyle({ state, props, designConfig }),
-    computedBodyStyle: computedBodyStyle({ vm, props, state }),
     mounted: mounted({ api, parent, props }),
     unMounted: unMounted({ api, parent, props }),
     computedAnimationName: computedAnimationName({ constants, props }),
@@ -184,7 +181,7 @@ export const renderless = (
   }: IDialogBoxRenderlessParamUtils
 ): IDialogBoxApi => {
   const api = {} as IDialogBoxApi
-  const lockScrollClass = constants.scrollLockClass(mode)
+  const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode)
   let state = initState({ reactive, computed, api, emitter, props, useBreakpoint })
   const usePopups = usePopup({
     api,
diff --git a/packages/renderless/src/drawer/index.ts b/packages/renderless/src/drawer/index.ts
index 798a7bba18..c68c258157 100644
--- a/packages/renderless/src/drawer/index.ts
+++ b/packages/renderless/src/drawer/index.ts
@@ -1,6 +1,13 @@
 import debounce from '../common/deps/debounce'
 import { addClass, removeClass } from '../common/deps/dom'
-import type { IDrawerState, IDrawerProps, IDrawerApi, IDrawerCT, ISharedRenderlessParamUtils } from '@/types'
+import type {
+  IDrawerState,
+  IDrawerProps,
+  IDrawerApi,
+  IDrawerCT,
+  ISharedRenderlessParamUtils,
+  IDrawerRenderlessParams
+} from '@/types'
 
 export const computedWidth =
   ({
@@ -8,9 +15,7 @@ export const computedWidth =
     designConfig,
     props,
     constants
-  }: Pick<ISharedRenderlessParamUtils<IDrawerCT>, 'designConfig' | 'constants'> & { state: IDrawerState } & {
-    props: IDrawerProps
-  }) =>
+  }: Pick<IDrawerRenderlessParams, 'state' | 'designConfig' | 'props' | 'constants'>) =>
   (): string => {
     if (state.width) {
       return state.width + 'px'
@@ -20,48 +25,52 @@ export const computedWidth =
   }
 
 export const close =
-  ({ api }) =>
+  ({ api }: { api: IDrawerApi }) =>
   (force = false) => {
-    api.handleClose('close', force)
+    api.handleClose('close', typeof force === 'boolean' ? force : false)
   }
 
 export const watchVisible =
-  ({ state }: { state: IDrawerState }) =>
-  (bool) => {
-    setTimeout(() => {
-      state.toggle = bool
-    }, 0)
+  ({ state, api }: Pick<IDrawerRenderlessParams, 'state' | 'api'>) =>
+  (value: boolean) => {
+    // tiny优化抽屉显隐逻辑
+    value ? api.open() : api.close()
   }
 
-export const watchToggle =
-  ({ emit }: { emit: ISharedRenderlessParamUtils['emit'] }) =>
-  (bool: boolean) => {
-    setTimeout(() => {
-      emit('update:visible', bool)
-      bool && emit('open')
-    }, 0)
+export const open =
+  ({ state, emit, vm }: Pick<IDrawerRenderlessParams, 'state' | 'emit' | 'vm'>) =>
+  () => {
+    if (!state.visible) {
+      setTimeout(() => {
+        state.visible = true
+        emit('open', vm)
+        emit('update:visible', true)
+      }, 0)
+    }
   }
 
 export const confirm =
-  ({ api }) =>
+  ({ api }: { api: IDrawerApi }) =>
   () => {
     api.handleClose('confirm')
   }
 
 export const handleClose =
-  ({ emit, props, state }: { emit: ISharedRenderlessParamUtils['emit']; state: IDrawerState; props: IDrawerProps }) =>
-  (type, force) => {
+  ({ emit, props, state }: Pick<IDrawerRenderlessParams, 'emit' | 'props' | 'state'>) =>
+  (type: string, force?: boolean) => {
     const isMaskNotClosable = type === 'mask' && !props.maskClosable
     const isBlockClose = !force && typeof props.beforeClose === 'function' && props.beforeClose(type) === false
     if (isMaskNotClosable || isBlockClose) {
       return
     }
 
-    if (type !== 'confirm') {
-      state.toggle = false
+    if (state.visible) {
+      state.visible = false
+      setTimeout(() => {
+        emit('update:visible', false)
+        emit(['close', 'confirm'].includes(type) ? type : 'close')
+      }, 200)
     }
-
-    emit(['close', 'confirm'].includes(type) ? type : 'close')
   }
 
 export const mousedown =
@@ -113,12 +122,12 @@ export const mousemove = ({ state, props }: { state: IDrawerState; props: IDrawe
 
 export const mouseup =
   ({ state }: { state: IDrawerState }) =>
-  () => {
+  (event: MouseEvent) => {
     if (!state.dragEvent.isDrag) {
       return
     }
 
-    ;(event as any).preventDefault()
+    event.preventDefault()
     state.dragEvent.isDrag = false
   }
 
@@ -150,18 +159,10 @@ export const removeDragEvent =
     el.removeEventListener('touchend', api.mouseup)
   }
 
-export const showScrollbar = (lockScrollClass) => () => {
+export const showScrollbar = (lockScrollClass: string) => () => {
   addClass(document.body, lockScrollClass)
 }
 
-export const hideScrollbar = (lockScrollClass) => () => {
+export const hideScrollbar = (lockScrollClass: string) => () => {
   removeClass(document.body, lockScrollClass)
 }
-
-export const watchVisibleNotImmediate =
-  ({ api, props }: { api: IDrawerApi; props: IDrawerProps }) =>
-  (visible: boolean) => {
-    if (props.lockScroll) {
-      visible ? api.showScrollbar() : api.hideScrollbar()
-    }
-  }
diff --git a/packages/renderless/src/drawer/vue.ts b/packages/renderless/src/drawer/vue.ts
index d9dd4174b7..a8af6bc9bc 100644
--- a/packages/renderless/src/drawer/vue.ts
+++ b/packages/renderless/src/drawer/vue.ts
@@ -1,7 +1,6 @@
 import {
   close,
   watchVisible,
-  watchToggle,
   confirm,
   mousedown,
   mouseup,
@@ -10,31 +9,30 @@ import {
   removeDragEvent,
   showScrollbar,
   hideScrollbar,
-  watchVisibleNotImmediate,
   handleClose,
-  computedWidth
+  computedWidth,
+  open
 } from './index'
 import type {
   IDrawerProps,
   IDrawerState,
   IDrawerApi,
-  ISharedRenderlessParamUtils,
-  ISharedRenderlessFunctionParams,
-  IDrawerCT
+  IDrawerRenderlessParamUtils,
+  ISharedRenderlessParamHooks
 } from '@/types'
 
-export const api = ['state', 'close', 'confirm', 'handleClose']
+export const api = ['state', 'close', 'confirm', 'handleClose', 'open']
 
 export const renderless = (
   props: IDrawerProps,
-  { reactive, watch, onMounted, onBeforeUnmount, computed }: ISharedRenderlessFunctionParams<null>,
-  { emit, vm, mode, constants, designConfig }: ISharedRenderlessParamUtils<IDrawerCT>
+  { reactive, watch, onMounted, onBeforeUnmount, computed }: ISharedRenderlessParamHooks,
+  { emit, vm, mode, constants, designConfig }: IDrawerRenderlessParamUtils
 ) => {
   const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode)
 
   const api = {} as IDrawerApi
-  const state = reactive<IDrawerState>({
-    toggle: false,
+  const state: IDrawerState = reactive({
+    visible: false,
     width: 0,
     height: 0,
     dragEvent: { x: 0, y: 0, isDrag: false, offsetWidth: 0, offsetHeight: 0 },
@@ -44,6 +42,7 @@ export const renderless = (
 
   Object.assign(api, {
     state,
+    open: open({ state, emit, vm }),
     confirm: confirm({ api }),
     close: close({ api }),
     handleClose: handleClose({ emit, props, state }),
@@ -52,28 +51,25 @@ export const renderless = (
     mouseup: mouseup({ state }),
     addDragEvent: addDragEvent({ api: api as IDrawerApi, vm }),
     removeDragEvent: removeDragEvent({ api: api as IDrawerApi, vm }),
-    watchVisible: watchVisible({ state }),
-    watchToggle: watchToggle({ emit }),
+    watchVisible: watchVisible({ state, api }),
     showScrollbar: showScrollbar(lockScrollClass),
     hideScrollbar: hideScrollbar(lockScrollClass),
-    watchVisibleNotImmediate: watchVisibleNotImmediate({ api: api as IDrawerApi, props }),
     computedWidth: computedWidth({ state, designConfig, props, constants })
   })
 
   onMounted(() => {
-    props.dragable && (api as IDrawerApi).addDragEvent()
+    props.dragable && api.addDragEvent()
     if (props.lockScroll && props.visible) {
-      ;(api as IDrawerApi).showScrollbar()
+      api.showScrollbar()
     }
   })
 
   onBeforeUnmount(() => {
-    props.dragable && (api as IDrawerApi).removeDragEvent()
-    props.lockScroll && (api as IDrawerApi).hideScrollbar()
+    props.dragable && api.removeDragEvent()
+    props.lockScroll && api.hideScrollbar()
   })
 
-  watch(() => props.visible, (api as IDrawerApi).watchVisible, { immediate: true })
-  watch(() => state.toggle, (api as IDrawerApi).watchToggle)
+  watch(() => props.visible, api.watchVisible, { immediate: true })
   watch(
     () => props.width,
     () => (state.width = 0)
diff --git a/packages/renderless/src/file-upload/index.ts b/packages/renderless/src/file-upload/index.ts
index c720f71941..273cab0905 100644
--- a/packages/renderless/src/file-upload/index.ts
+++ b/packages/renderless/src/file-upload/index.ts
@@ -747,7 +747,7 @@ export const handleSuccess =
       const status = res?.data?.status
       const { STATUS_SPECIAL_CHARACTERS, NOT_SUPPORT_SPECIAL_CHARACTERS } = constants.EDM
 
-      delete file.cancelToken
+      file && delete file.cancelToken
 
       if (props.edm.upload && file && res.data && status !== 200) {
         if (status === STATUS_SPECIAL_CHARACTERS) {
diff --git a/packages/renderless/src/fluent-editor/index.ts b/packages/renderless/src/fluent-editor/index.ts
new file mode 100644
index 0000000000..22b9809586
--- /dev/null
+++ b/packages/renderless/src/fluent-editor/index.ts
@@ -0,0 +1,913 @@
+import { extend } from '../common/object'
+import { isNull } from '../common/type'
+import { xss } from '../common/xss'
+import { set } from '../chart-core/deps/utils'
+import { on, off } from '../common/deps/dom'
+import PopupManager from '../common/deps/popup-manager'
+
+export const init =
+  ({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm }) =>
+  () => {
+    UploaderDfls.enableMultiUpload = { file: true, image: true }
+    UploaderDfls.handler = api.uploaderDflsHandler
+    UploaderDfls.imagePasteFailCallback = props.imagePasteFailCallback
+    defaultOptions.modules.toolbar.handlers = api.handlers()
+    state.innerOptions = extend(true, {}, defaultOptions, props.globalOptions, props.options)
+
+    if (props.imageUpload) {
+      state.innerOptions.imageUpload = props.imageUpload
+    } else {
+      state.innerOptions.uploadOption.imageUploadToServer = false
+    }
+
+    if (props.fileUpload) {
+      state.innerOptions.fileUpload = extend(
+        true,
+        {},
+        { httpRequest: service && service.network.request },
+        props.fileUpload,
+        { url: xss.filterUrl(state.fileUploadUrl) }
+      )
+    }
+
+    api.setToolbarTips()
+
+    const quill = new FluentEditor(vm.$refs.editor, state.innerOptions)
+    quill.emitter.on('file-change', api.fileOperationToSev)
+    state.quill = Object.freeze(quill)
+
+    setTimeout(api.setToolbarTitle)
+
+    // 点击工具栏插入表格 ql-better-table
+    let insertTableButton = vm.$el.querySelector('.ql-better-table')
+    const tableModule = state.quill.getModule('better-table')
+
+    insertTableButton &&
+      (insertTableButton.onclick = (event, row = 3, col = 3) => {
+        tableModule.insertTable(row, col)
+      })
+
+    let fullscreenButton = vm.$el.querySelector('.ql-fullscreen')
+
+    fullscreenButton && (fullscreenButton.onclick = api.keyDownHandler)
+
+    state.quill.enable(false)
+
+    state.quill.on('selection-change', api.selectionChange)
+    state.quill.on('text-change', api.textChange)
+
+    if (state.content) {
+      if (props.dataType) {
+        state.quill.setContents(api.stringToJson(state.content))
+      } else {
+        let temp = xss.filterHtml(state.content)
+
+        state.quill.clipboard.dangerouslyPasteHTML(temp)
+      }
+
+      api.textChange()
+    }
+
+    if (!props.disabled) {
+      state.quill.enable(true)
+    }
+
+    api.handleComposition()
+    emit('ready', state.quill)
+  }
+
+export const checkTableISEndElement = (element) => {
+  if (element.children.length > 1) {
+    return checkTableISEndElement(element.children[element.children.length - 1])
+  } else {
+    return element.children[0] instanceof HTMLTableElement
+  }
+}
+
+const setIcons = ({ api, vm, iconOption, FluentEditor, keys = [] }) => {
+  for (const key in iconOption) {
+    if (Object.hasOwnProperty.call(iconOption, key)) {
+      const option = iconOption[key]
+
+      if (typeof option === 'object') {
+        setIcons({ api, vm, iconOption: option, FluentEditor, keys: [...keys, key] })
+      } else {
+        const iconElm = vm.$refs[option] && vm.$refs[option][0]
+        const outerHtml = api.getOuterHTML(iconElm)
+
+        if (option && outerHtml) {
+          const k = keys.length ? [...keys, key].join('.') : key
+          set(FluentEditor.imports['ui/icons'], k.replace(/default/, ''), outerHtml)
+        }
+      }
+    }
+  }
+}
+
+export const setToolbarTips =
+  ({ api, vm, FluentEditor, iconOption }) =>
+  () => {
+    setIcons({ api, vm, iconOption, FluentEditor })
+  }
+
+export const getOuterHTML = () => (el) => el && el.outerHTML
+
+export const keyDownHandler =
+  ({ state }) =>
+  (e) => {
+    if (e.keyCode) {
+      if (e.keyCode === 27 && state.isFullscreen) {
+        state.isFullscreen = !state.isFullscreen
+      }
+    } else {
+      state.isFullscreen = !state.isFullscreen
+    }
+  }
+
+export const addFullscreenchange =
+  ({ api }) =>
+  () => {
+    on(document, 'keydown', api.keyDownHandler)
+  }
+
+export const removeFullscreenchange =
+  ({ api }) =>
+  () => {
+    off(document, 'keydown', api.keyDownHandler)
+
+    api.keyDownHandler = null
+  }
+
+export const handleComposition =
+  ({ state, api }) =>
+  () => {
+    on(state.quill.root, 'compositionstart', api.handleCompositionstart)
+    on(state.quill.root, 'compositionend', api.handleCompositionend)
+  }
+
+export const removeHandleComposition =
+  ({ state, api }) =>
+  () => {
+    off(state.quill.root, 'compositionstart', api.handleCompositionstart)
+    off(state.quill.root, 'compositionend', api.handleCompositionend)
+  }
+
+// 开始输入中文
+export const handleCompositionstart =
+  ({ state }) =>
+  () => {
+    state.quill.root.classList.remove('ql-blank')
+  }
+//
+export const handleCompositionend =
+  ({ state }) =>
+  (event) => {
+    // fix: 修复中文输入时无法判断编辑器内容是否为空
+    if (state.quill.editor.isBlank()) {
+      if (state.quill.getLength() > 0 && event.data.length > 0) {
+        let data = event.data
+
+        state.quill.setContents([{ insert: data }])
+        state.quill.setSelection(data.length)
+        state.quill.root.classList.remove('ql-blank')
+      } else {
+        state.quill.root.classList.add('ql-blank')
+      }
+    } else {
+      let data = state.quill.container.innerHTML,
+        range = state.quill.getSelection(true)
+      const [mentionItem, offset] = state.quill.getLeaf(range.index)
+
+      if (mentionItem.statics.blotName === 'break' || (mentionItem.statics.blotName === 'text' && offset === 0)) {
+        state.quill.clipboard.dangerouslyPasteHTML(data)
+      }
+      if (mentionItem.statics.blotName === 'break') {
+        state.quill.setSelection(range.index + event.data.length)
+      } else {
+        let pattern = /[\u4E00-\u9FA5\uf900-\ufa2d]/,
+          flag
+
+        if (pattern.test(event.data)) {
+          flag = true
+        }
+        if (flag) {
+          state.quill.setSelection(range.index)
+        } else {
+          if (offset !== 0) {
+            state.quill.setSelection(range.index)
+          } else {
+            if (event.data.length > 1) {
+              state.quill.setSelection(range.index + 1)
+            } else {
+              state.quill.setSelection(range.index)
+            }
+          }
+        }
+      }
+      state.quill.root.classList.remove('ql-blank')
+    }
+  }
+
+export const undoHandler =
+  ({ state }) =>
+  () => {
+    // 如果当前有表格被激活则清除表格工具条
+    const betterTableModule = state.quill.getModule('better-table')
+
+    if (betterTableModule && betterTableModule.table) {
+      betterTableModule.hideTableTools()
+    }
+
+    state.quill.history.undo()
+  }
+
+export const redoHandler =
+  ({ state }) =>
+  () => {
+    // 如果当前有表格被激活则清除表格工具条
+    const betterTableModule = state.quill.getModule('better-table')
+
+    if (betterTableModule && betterTableModule.table) {
+      betterTableModule.hideTableTools()
+    }
+
+    state.quill.history.redo()
+  }
+
+export const lineheightHandler =
+  ({ state, FluentEditor }) =>
+  (value) => {
+    state.quill.format('lineheight', value, FluentEditor.sources.USER)
+  }
+
+export const fileHandler =
+  ({ api, state }) =>
+  () => {
+    const option = state.quill.options.uploadOption
+    const accept = option && option.fileAccept
+
+    api.inputFileHandler('file', accept)
+  }
+
+export const imageHandler =
+  ({ api, state }) =>
+  () => {
+    const option = state.quill.options.uploadOption
+    const accept = option && option.imageAccept
+
+    api.inputFileHandler('image', accept)
+  }
+
+/**
+ * 上传：图片、视频和文件,相关配置; 触发上传
+ * @param {*} param0
+ * @returns
+ */
+export const inputFileHandler =
+  ({ state, UploaderDfls }) =>
+  (type, accept) => {
+    const defaultMIMETypes = state.quill.uploader.options[type].join(', ')
+    const mimeTypes = accept || defaultMIMETypes
+    const betterToolbar = state.quill.getModule('toolbar')
+    let fileInput = betterToolbar.container.querySelector(`input.ql-${type}[type=file]`)
+
+    if (isNull(fileInput)) {
+      fileInput = document.createElement('input')
+      fileInput.classList.add(`ql-${type}`)
+      fileInput.setAttribute('type', 'file')
+      fileInput.setAttribute('accept', mimeTypes)
+
+      if (
+        (UploaderDfls.enableMultiUpload['file'] && type === 'file') ||
+        (UploaderDfls.enableMultiUpload['image'] && type === 'image')
+      ) {
+        fileInput.setAttribute('multiple', '')
+      }
+
+      fileInput.onchange = () => {
+        const range = state.quill.getSelection(true)
+        state.quill.uploader.upload(range, fileInput.files, type === 'file')
+        fileInput.value = ''
+      }
+
+      betterToolbar.container.appendChild(fileInput)
+    }
+
+    fileInput.click()
+  }
+
+export const uploaderDflsHandler =
+  ({ api, modules }) =>
+  (range, files, fileFlags, rejectFlags) => {
+    const fileArr = []
+    const imgArr = []
+
+    files.forEach((file, index) => (fileFlags[index] ? fileArr.push(file) : imgArr.push(file)))
+
+    if (modules.file && (fileArr.length || rejectFlags.file)) {
+      api.handleUploadFile(range, fileArr, rejectFlags.file)
+    }
+
+    if (imgArr.length || rejectFlags.image) {
+      api.handleUploadImage(range, { file: imgArr[0], files: imgArr }, rejectFlags.image)
+    }
+  }
+
+/**
+ * 处理上传文件
+ * @param {*} FluentEditor
+ * @param {*} Delta
+ * @param {*} param2
+ * @returns
+ */
+export const handleUploadFile =
+  ({ api, UploaderDfls }) =>
+  (range, files, hasRejectedFile) => {
+    const fileEnableMultiUpload = UploaderDfls.enableMultiUpload === true || UploaderDfls.enableMultiUpload['file']
+
+    api.fileOperationToSev({
+      operation: 'upload',
+      data: fileEnableMultiUpload ? { files } : { file: files[0] },
+      hasRejectedFile: hasRejectedFile,
+      callback: (res) => {
+        if (!res) {
+          return
+        }
+
+        if (fileEnableMultiUpload && Array.isArray(res)) {
+          res.forEach((value, index) => api.insertFileToEditor(range, files[index], value))
+        } else {
+          api.insertFileToEditor(range, files[0], res)
+        }
+      }
+    })
+  }
+
+const getOption = (url, headers, method, fd, callbackOK, callbackKO, callback) => {
+  url = xss.filterUrl(url)
+
+  return {
+    url,
+    headers,
+    method,
+    data: fd,
+    onSuccess(res) {
+      res = res.data
+      let resData = {}
+
+      for (let key in res) {
+        resData = res[key]
+        break
+      }
+
+      callbackOK(res, ({ name, url }) => {
+        callback({
+          data: {
+            id: resData.attachmentId,
+            size: resData.fileSize,
+            title: name,
+            src: url
+          }
+        })
+      })
+    },
+    onError(error) {
+      callbackKO(error)
+    }
+  }
+}
+
+const getOnloadOfFileOperToSev =
+  ({ xmlhr, callbackOK, callback, callbackKO }) =>
+  () => {
+    if (xmlhr.status === 200) {
+      let res = JSON.parse(xmlhr.responseText)
+      let resData = {}
+
+      for (let key in res) {
+        resData = res[key]
+        break
+      }
+
+      callbackOK(res, ({ name, url }) => {
+        callback({ data: { id: resData.attachmentId, size: resData.fileSize, title: name, src: url } })
+      })
+    } else {
+      callbackKO({ code: xmlhr.status, type: xmlhr.statusText, body: xmlhr.responseText })
+    }
+  }
+
+// 文件上传到服务器，功能待补充
+export const fileOperationToSev =
+  ({ state }) =>
+  (event) => {
+    const { operation, hasRejectedFile, callback } = event
+    const { files, fileDownloadUrl } = event.data
+
+    switch (operation) {
+      case 'upload': {
+        if (hasRejectedFile || !files || !files.length) {
+          return
+        }
+
+        const options = state.innerOptions.fileUpload
+        let { url, method = 'POST', name = 'file', headers = {} } = options
+        let { success: callbackOK, fail: callbackKO } = options
+
+        url = xss.filterUrl(url)
+
+        if (!url) {
+          return
+        }
+
+        let fd = new FormData()
+
+        fd.append(name, files[0], files[0].name)
+
+        options.csrf && fd.append(options.csrf.token, options.csrf.hash)
+
+        if (options.httpRequest) {
+          let reqOptions = getOption(url, headers, method, fd, callbackOK, callbackKO, callback)
+          let req = options.httpRequest(reqOptions)
+
+          req && req.then && req.then(reqOptions.onSuccess, reqOptions.onError)
+        } else {
+          let xmlhr = new XMLHttpRequest()
+
+          xmlhr.withCredentials = options.withCredentials !== false
+          xmlhr.open(method, url, true)
+
+          for (let index in headers) {
+            xmlhr.setRequestHeader(index, headers[index])
+          }
+
+          xmlhr.onload = getOnloadOfFileOperToSev({ xmlhr, callbackOK, callback, callbackKO })
+
+          xmlhr.send(fd)
+        }
+        break
+      }
+
+      case 'download':
+        window.open(xss.filterUrl(fileDownloadUrl)).opener = null
+        break
+
+      default: {
+        break
+      }
+    }
+  }
+
+/**
+ * 处理上传图片
+ * @param {*} FluentEditor
+ * @param {*} Delta
+ * @param {*} param2
+ * @returns
+ */
+export const handleUploadImage =
+  ({ state, api, FluentEditor, Delta, UploaderDfls }) =>
+  (range, { file, files }, hasRejectedImage) => {
+    if (state.quill.options.uploadOption.imageUploadToServer) {
+      const index = state.promisesData.length
+      const imageEnableMultiUpload = UploaderDfls.enableMultiUpload['image']
+      const result = {
+        file,
+        data: { files: [file] },
+        hasRejectedImage: hasRejectedImage,
+        callback: (res) => {
+          if (!res) {
+            return
+          }
+
+          state.cbNum += 1
+          state.promisesData[index].range = range
+          state.promisesData[index].imgUrlData = res
+          if (state.cbNum === state.promises.length) {
+            Promise.all(state.promises).then((arr) => {
+              arr.forEach((data, index) => {
+                const { imageEnableMultiUpload, imgUrlData, range } = state.promisesData[index]
+                if (imgUrlData) {
+                  if (imageEnableMultiUpload && Array.isArray(imgUrlData)) {
+                    imgUrlData.forEach(function (value) {
+                      return api.insertImageToEditor(range, value)
+                    })
+                  } else {
+                    api.insertImageToEditor(range, imgUrlData)
+                  }
+                }
+              })
+              state.promises = []
+              state.promisesData = []
+              state.cbNum = 0
+            })
+          }
+        }
+      }
+
+      if (imageEnableMultiUpload) {
+        result['data'] = { files }
+      }
+
+      state.promisesData.push({
+        imageEnableMultiUpload
+      })
+      state.promises.push(api.uploadImageToSev(result))
+    } else {
+      const promises = files.map((fileItem) => {
+        return new Promise((resolve) => {
+          const reader = new FileReader()
+
+          reader.onload = (e) => {
+            resolve(e.target.result)
+          }
+          reader.readAsDataURL(fileItem)
+        })
+      })
+
+      Promise.all(promises).then((images) => {
+        const update = images.reduce((delta, image) => {
+          return delta.insert({ image })
+        }, new Delta().retain(range.index).delete(range.length))
+
+        state.quill.updateContents(update, FluentEditor.sources.USER)
+        state.quill.setSelection(range.index + images.length, FluentEditor.sources.SILENT)
+      })
+    }
+  }
+
+/**
+ * 将文件插入编辑器
+ * @param {*} FluentEditor
+ * @param {*} Delta
+ * @param {*} param2
+ * @returns
+ */
+export const insertFileToEditor =
+  ({ state, FluentEditor, Delta }) =>
+  (range, file, { data }) => {
+    const oldContent = new Delta().retain(range.index).delete(range.length)
+    const videoFlag =
+      state.quill.options.uploadOption &&
+      state.quill.options.uploadOption.isVideoPlay &&
+      /^video\/[-\w.]+$/.test(file.type)
+    const insertObj = videoFlag ? { video: data } : { file: data }
+    const currentContent = new Delta([{ insert: insertObj }])
+    const newContent = oldContent.concat(currentContent)
+
+    state.quill.updateContents(newContent, FluentEditor.sources.USER)
+  }
+
+/**
+ * 将图片插入编辑器
+ * @param {*} FluentEditor
+ * @param {*} Delta
+ * @param {*} param2
+ * @returns
+ */
+export const insertImageToEditor =
+  ({ state, FluentEditor, Delta }) =>
+  (range, { data }) => {
+    const { imageId, imageUrl } = data
+    // 粘贴截图或者从外源直接拷贝的单图时，需要将编辑器中已选中的内容删除
+    const oldContent = new Delta().retain(range.index).delete(range.length)
+    const currentContent = new Delta([
+      {
+        insert: { image: xss.filterUrl(imageUrl) },
+        attributes: { 'image-id': imageId }
+      }
+    ])
+    const newContent = oldContent.concat(currentContent)
+
+    state.quill.updateContents(newContent, FluentEditor.sources.USER)
+  }
+
+// 图片上传到服务器，需要将示例中的上传接口替换成真实的后台接口才能正确运行。
+export const uploadImageToSev =
+  ({ state }) =>
+  (event) => {
+    const { file, hasRejectedImage, callback } = event
+    const { files } = event.data
+
+    if (hasRejectedImage) {
+      return
+    }
+
+    if (!files || !files.length) {
+      return
+    }
+
+    const options = state.innerOptions.imageUpload
+    let { url, method = 'POST', name = 'image', headers = {} } = options
+    let { success: callbackOK, fail: callbackKO } = options
+
+    url = xss.filterUrl(url)
+
+    if (!url) {
+      return
+    }
+
+    let { fd = new FormData(), xhr = new XMLHttpRequest() } = {}
+
+    fd.append(name, file, file.name)
+
+    options.csrf && fd.append(options.csrf.token, options.csrf.hash)
+
+    xhr.withCredentials = options.withCredentials !== false
+
+    xhr.open(method, url, true)
+
+    for (let index in headers) {
+      xhr.setRequestHeader(index, headers[index])
+    }
+
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        let { res = JSON.parse(xhr.responseText), resData = {} } = {}
+
+        for (let key in res) {
+          resData = res[key]
+          break
+        }
+
+        callbackOK(res, (imageUrl) => {
+          callback({ data: { imageId: resData.attachmentId, imageUrl } })
+        })
+      } else {
+        callbackKO({ code: xhr.status, type: xhr.statusText, body: xhr.responseText })
+      }
+    }
+
+    xhr.send(fd)
+  }
+
+export const handlers =
+  ({ api }) =>
+  () => {
+    return {
+      undo: api.undoHandler,
+      redo: api.redoHandler,
+      lineheight: api.lineheightHandler,
+      file: api.fileHandler,
+      image: api.imageHandler,
+      inputFile: api.inputFileHandler
+    }
+  }
+
+export const getFileUploadUrl =
+  ({ service }) =>
+  () => {
+    return service ? service.common.getFileUploadUrl() : Promise.resolve('')
+  }
+
+export const selectionChange =
+  ({ state, emit }) =>
+  (range) => {
+    if (!range) {
+      emit('blur', state.quill)
+    } else {
+      emit('focus', state.quill)
+    }
+  }
+
+export const stringToJson = () => (str) => {
+  let contents = ''
+
+  try {
+    contents = JSON.parse(str)
+  } catch (e) {
+    contents = {}
+  }
+
+  return contents
+}
+
+export const initContent =
+  ({ state, props, api, nextTick }) =>
+  () => {
+    if (state.quill) {
+      const flag = state.quill.selection.hasFocus()
+      if (state.content && state.content !== state.innerContent) {
+        state.innerContent = state.content
+
+        if (props.dataType) {
+          state.quill.setContents(api.stringToJson(state.content))
+        } else {
+          state.quill.clipboard.dangerouslyPasteHTML(xss.filterHtml(state.content))
+        }
+      } else if (!state.content) {
+        state.quill.setText('')
+      }
+
+      nextTick(() => {
+        if (!props.disabled) {
+          state.quill.enable(true)
+        }
+
+        flag ? state.quill.selection.focus() : state.quill.blur()
+      })
+    }
+  }
+
+export const textChange =
+  ({ emit, vm, state, props }) =>
+  () => {
+    let contents = ''
+    const quill = state.quill
+    const text = state.quill.getText()
+
+    if (props.dataType || props.dataUpgrade) {
+      contents = JSON.stringify(state.quill.getContents())
+
+      if (contents === '{"ops":[{"insert":"\\n"}]}') {
+        contents = ''
+      }
+    } else {
+      contents = xss.filterHtml(vm.$refs.editor.children[0].innerHTML)
+
+      if (contents === '<p><br></p>' || contents === '<p><img></p>') {
+        contents = ''
+      }
+    }
+
+    state.innerContent = contents
+
+    emit('update:modelValue', contents)
+    emit('change', { contents, text, quill })
+  }
+
+export const mounted =
+  ({ api, props, state }) =>
+  () => {
+    if (props.fileUpload && !props.fileUpload.url) {
+      api.getFileUploadUrl().then((url) => {
+        url = xss.filterUrl(url)
+        state.fileUploadUrl = url
+        api.init()
+      })
+    } else {
+      api.init()
+    }
+    api.addFullscreenchange()
+  }
+
+export const beforeUnmount =
+  ({ state, api, vm }) =>
+  () => {
+    const toolbar = state.quill.getModule('toolbar')
+
+    state.quill.uploader.options && (state.quill.uploader.options.handler = null)
+    state.quill.uploader.options && (state.quill.uploader.options.imagePasteFailCallback = null)
+    toolbar.options && (toolbar.options.handlers = null)
+    toolbar.handlers = null
+    state.quill.emitter.off('file-change', api.fileOperationToSev)
+    if (state.quill.options.imageUpload) {
+      state.quill.options.imageUpload.fail = null
+      state.quill.options.imageUpload.success = null
+    }
+    if (state.quill.options.fileUpload) {
+      state.quill.options.fileUpload.fail = null
+      state.quill.options.fileUpload.success = null
+    }
+
+    const fileInput = toolbar.container.querySelector(`input.ql-file[type=file]`)
+    const imageInput = toolbar.container.querySelector(`input.ql-image[type=file]`)
+    let insertTableButton = vm.$el.querySelector('.ql-better-table')
+    let fullscreenButton = vm.$el.querySelector('.ql-fullscreen')
+
+    fileInput && (fileInput.onchange = null)
+    imageInput && (imageInput.onchange = null)
+    insertTableButton && (insertTableButton.onclick = null)
+    fullscreenButton && (fullscreenButton.onclick = null)
+    api.removeFullscreenchange()
+    api.removeHandleComposition()
+    state.quill.off('selection-change', api.selectionChange)
+    state.quill.off('text-change', api.textChange)
+    state.quill = null
+    delete state.quill
+  }
+
+export const computePreviewOptions =
+  ({ props, state, constants, api }) =>
+  () => {
+    if (props.picPreview && state.previewImgUrl) {
+      let previewOptions = typeof props.picPreview === 'boolean' ? constants.PIC_PREVIEW_OPTIONS : props.picPreview
+
+      previewOptions = extend(true, {}, previewOptions, {
+        urlList: [state.previewImgUrl]
+      })
+
+      let onClose = previewOptions.onClose
+
+      if (typeof onClose !== 'function') {
+        previewOptions.onClose = () => {
+          api.doPreview()
+        }
+      } else {
+        previewOptions.onClose = (...args) => {
+          onClose(...args)
+          api.doPreview()
+        }
+      }
+
+      return previewOptions
+    }
+
+    return {}
+  }
+
+/**
+ * elem是img元素或者是具有data-image属性的dom元素
+ * elem为空可以清空状态并关闭当前预览
+ */
+export const doPreview =
+  ({ props, state, nextTick }) =>
+  (elem) => {
+    state.showPreview = false
+    state.previewImgUrl = elem && elem.nodeType ? elem.dataset.image || elem.src : ''
+    state.previewImgUrl = /^data:image\/.{2,8};base64,\//.test(state.previewImgUrl)
+      ? state.previewImgUrl
+      : xss.filterUrl(state.previewImgUrl)
+
+    if (props.picPreview && state.previewImgUrl) {
+      nextTick(() => {
+        state.showPreview = true
+      })
+    }
+  }
+
+export const handleDblclick =
+  ({ props, api }) =>
+  (e) => {
+    if (
+      props.picPreview &&
+      e &&
+      e.type === 'dblclick' &&
+      [...e.target.classList].indexOf('blot-formatter__overlay') > -1 &&
+      e.target.dataset.image
+    ) {
+      api.doPreview(e.target)
+    }
+  }
+
+const getToolbarTitle = (t) => {
+  return [
+    { selector: '.ql-undo', title: t('ui.fluentEditor.undo') },
+    { selector: '.ql-redo', title: t('ui.fluentEditor.redo') },
+    { selector: '.ql-clean', title: t('ui.richText.clean') },
+    { selector: '.ql-font', title: t('ui.richText.font') },
+    { selector: '.ql-size', title: t('ui.richText.size') },
+    { selector: '.ql-lineheight', title: t('ui.fluentEditor.lineheight') },
+    { selector: '.ql-header.ql-picker', title: t('ui.richText.pickerLabel') },
+    { selector: '.ql-header .ql-picker-item[data-value="1"]', title: t('ui.richText.headerPicker1') },
+    { selector: '.ql-header .ql-picker-item[data-value="2"]', title: t('ui.richText.headerPicker2') },
+    { selector: '.ql-header .ql-picker-item[data-value="3"]', title: t('ui.richText.headerPicker3') },
+    { selector: '.ql-header .ql-picker-item[data-value="4"]', title: t('ui.richText.headerPicker4') },
+    { selector: '.ql-header .ql-picker-item[data-value="5"]', title: t('ui.richText.headerPicker5') },
+    { selector: '.ql-header .ql-picker-item[data-value="6"]', title: t('ui.richText.headerPicker6') },
+    { selector: '.ql-header .ql-picker-item:not([data-value])', title: t('ui.richText.normal') },
+    { selector: '.ql-bold', title: t('ui.richText.bold') },
+    { selector: '.ql-italic', title: t('ui.richText.italic') },
+    { selector: '.ql-underline', title: t('ui.richText.underline') },
+    { selector: '.ql-strike', title: t('ui.richText.strike') },
+    { selector: '.ql-blockquote', title: t('ui.richText.blockquote') },
+    { selector: '.ql-code-block', title: t('ui.richText.codeBlock') },
+    { selector: '.ql-header[value="1"]', title: t('ui.richText.header1') },
+    { selector: '.ql-header[value="2"]', title: t('ui.richText.header2') },
+    { selector: '.ql-list[value="ordered"]', title: t('ui.richText.listOrdered') },
+    { selector: '.ql-list[value="bullet"]', title: t('ui.richText.listBullet') },
+    { selector: '.ql-script[value="sub"]', title: t('ui.richText.subScript') },
+    { selector: '.ql-script[value="super"]', title: t('ui.richText.superScript') },
+    { selector: '.ql-indent[value="-1"]', title: t('ui.richText.indent1') },
+    { selector: '.ql-indent[value="+1"]', title: t('ui.richText.indent2') },
+    { selector: '.ql-direction[value="rtl"]', title: t('ui.richText.directionRTL') },
+    { selector: '.ql-color', title: t('ui.richText.color') },
+    { selector: '.ql-background', title: t('ui.richText.background') },
+    { selector: '.ql-align', title: t('ui.richText.align') },
+    { selector: '.ql-align .ql-picker-item', title: t('ui.richText.alignPicker1') },
+    { selector: '.ql-align .ql-picker-item[data-value="center"]', title: t('ui.richText.alignPicker2') },
+    { selector: '.ql-align .ql-picker-item[data-value="right"]', title: t('ui.richText.alignPicker3') },
+    { selector: '.ql-link', title: t('ui.richText.link') },
+    { selector: '.ql-image', title: t('ui.richText.image') },
+    { selector: '.ql-video', title: t('ui.richText.video') },
+    { selector: '.ql-file', title: t('ui.richText.file') },
+    { selector: '.ql-better-table', title: t('ui.richText.betterTable') },
+    { selector: '.ql-fullscreen', title: t('ui.richText.fullscreen') }
+  ]
+}
+
+export const setToolbarTitle =
+  ({ state, t }) =>
+  () => {
+    const tips = getToolbarTitle(t)
+    const container = state.quill.container.parentNode
+    for (let i = 0, l = tips.length; i < l; i++) {
+      const targetDom = container.querySelector(`.ql-formats ${tips[i].selector}`)
+      targetDom && targetDom.setAttribute('title', tips[i].title)
+    }
+  }
+
+export const computeZIndex =
+  ({ constants, props }) =>
+  () =>
+    props.zIndex === constants.EDITOR_FULLSCREEN_OPTIONS || props.zIndex < 1 ? PopupManager.nextZIndex() : props.zIndex
diff --git a/packages/renderless/src/fluent-editor/options.ts b/packages/renderless/src/fluent-editor/options.ts
new file mode 100644
index 0000000000..2c3ade8ce7
--- /dev/null
+++ b/packages/renderless/src/fluent-editor/options.ts
@@ -0,0 +1,245 @@
+import { isNull } from '../common/type'
+
+const betterTable = {
+  operationMenu: {
+    items: {
+      copyCells: { text: '复制' },
+      copyTable: { text: '复制表格' },
+      emptyCells: { text: '清空内容' },
+      insertRowUp: { text: '上插入行' },
+      insertRowDown: { text: '下插入行' },
+      insertColumnLeft: { text: '左插入列' },
+      insertColumnRight: { text: '右插入列' },
+      mergeCells: { text: '合并单元格' },
+      unmergeCells: { text: '拆分单元格' },
+      deleteRow: { text: '删除当前行' },
+      deleteColumn: { text: '删除当前列' },
+      deleteTable: { text: '删除表格' }
+    },
+    color: true
+  }
+}
+
+const toolbar = (FluentEditor) => {
+  const underline = ['bold', 'italic', 'underline', 'strike']
+  const list = [{ list: 'ordered' }, { list: 'bullet' }]
+  const script = [{ script: 'sub' }, { script: 'super' }]
+
+  return {
+    container: [
+      ['undo', 'redo', 'clean'],
+      [
+        { font: FluentEditor.imports['formats/font'].whitelist },
+        { size: FluentEditor.imports['formats/size'].whitelist },
+        { lineheight: FluentEditor.imports['formats/lineheight'].whitelist },
+        { header: [1, 2, 3, 4, 5, 6, false] }
+      ],
+      underline,
+      ['blockquote', 'code-block'],
+      [{ header: 1 }, { header: 2 }],
+      list,
+      script,
+      [{ indent: '-1' }, { indent: '+1' }],
+      [{ direction: 'rtl' }],
+      [{ color: [] }, { background: [] }],
+      [{ align: [] }],
+      ['link', 'image', 'video', 'file'],
+      ['better-table'],
+      ['fullscreen']
+    ]
+  }
+}
+
+export const mention = (mentionObj) => ({
+  search: async (term) => {
+    const { data, searchKey } = mentionObj
+    try {
+      return data.filter((d) => {
+        return d[searchKey] && String(d[searchKey]).includes(term)
+      })
+    } catch (e) {
+      return []
+    }
+  }
+})
+
+const listAutofillHandler = ({ FluentEditor, state }) => (range, context) => {
+  const formats = state.quill.getFormat(range)
+  if (formats['table-cell-line']) {
+    return true
+  }
+  if (isNull(state.quill.scroll.query('list'))) {
+    return true
+  }
+  const { length } = context.prefix
+  const [line, offset] = state.quill.getLine(range.index)
+  if (offset > length) {
+    return true
+  }
+  let value
+  let prefix = context.prefix.trim()
+
+  if (~['[]', '[ ]'].indexOf(prefix)) {
+    value = 'unchecked'
+  } else if (prefix === '[x]') {
+    value = 'checked'
+  } else if (~['-', '*'].indexOf(prefix)) {
+    value = 'bullet'
+  } else {
+    value = 'ordered'
+  }
+
+  state.quill.insertText(range.index, ' ', FluentEditor.sources.USER)
+  state.quill.history.cutoff()
+  const delta = new FluentEditor.imports['delta']()
+    .retain(range.index - offset)
+    .delete(length + 1)
+    .retain(line.length() - 2 - offset)
+    .retain(1, { list: { value: value } })
+  state.quill.updateContents(delta, FluentEditor.sources.USER)
+  state.quill.history.cutoff()
+  state.quill.setSelection(range.index - length, FluentEditor.sources.SILENT)
+  return false
+}
+
+const listAutofill = ({ FluentEditor, state }) => ({
+  key: ' ',
+  shiftKey: null,
+  collapsed: true,
+  format: { list: false, 'code-block': false, blockquote: false, header: false, table: true },
+  prefix: /^\s*?(\d+\.|-|\*|\[ ?\]|\[x\])$/,
+  handler: listAutofillHandler({ FluentEditor, state })
+})
+
+const listIgnoreRight = ({ FluentEditor, state }) => ({
+  key: 'ArrowRight',
+  shiftKey: null,
+  format: ['list'],
+  collapsed: true,
+  offset: 0,
+  handler(range) {
+    state.quill.setSelection(range.index + 1, FluentEditor.sources.SILENT)
+  }
+})
+
+const listIgnoreLeft = ({ FluentEditor, state }) => ({
+  key: 'ArrowLeft',
+  shiftKey: null,
+  format: ['list'],
+  collapsed: true,
+  offset: 0,
+  handler(range) {
+    state.quill.setSelection(range.index - 1, FluentEditor.sources.SILENT)
+  }
+})
+
+const listSoftBreak = ({ FluentEditor, state }) => ({
+  key: 'Enter',
+  format: ['list'],
+  shiftKey: true,
+  collapsed: true,
+  handler(range) {
+    const [line, offset] = state.quill.getLine(range.index)
+    const length = line.length()
+    // li的末尾不能添加软回车
+    if (length > offset + 1) {
+      state.quill.insertEmbed(range.index, 'soft-break', true, FluentEditor.sources.USER)
+    }
+  }
+})
+
+export const keyboard = ({ FluentEditor, state }) => {
+  // 表格
+  const BetterTable = FluentEditor.imports['modules/better-table']
+  return {
+    bindings: {
+      ...BetterTable.keyboardBindings,
+      'list autofill': listAutofill({ FluentEditor, state }),
+      // fix:在list的offset为0时（即只在最左侧触发）加键盘事件，使其跳过contenteditable=false的span进行移动
+      'list ignoreRight': listIgnoreRight({ FluentEditor, state }),
+      'list ignoreLeft': listIgnoreLeft({ FluentEditor, state }),
+      'list softBreak': listSoftBreak({ FluentEditor, state })
+    }
+  }
+}
+
+const defaultOption = ({ FluentEditor, state, mentionObj }) => {
+  return {
+    theme: 'snow',
+    modules: {
+      file: true, // 上传文件需开启
+      image: FluentEditor.imports['modules/image-spec'],
+      counter: false,
+      toolbar: toolbar(FluentEditor),
+      'better-table': betterTable,
+      mention: mention(mentionObj),
+      keyboard: keyboard({ FluentEditor, state })
+    },
+    // 上传：图片、视频和文件,相关配置
+    uploadOption: {
+      fileAccept: '.mp4,.xls,.xlsx,.doc,.docx,.ppt,.pptx',
+      imageAccept: '.gif,.png,.tiff,image/jpeg',
+      isVideoPlay: true,
+      imageUploadToServer: true // 是否需要上传到服务器
+    },
+    placeholder: 'Insert text here ...',
+    readOnly: false
+  }
+}
+
+export { defaultOption }
+
+export const iconOption = {
+  align: {
+    default: 'IconEditorAlignLeft',
+    center: 'IconEditorAlignCenter',
+    right: 'IconEditorAlignRight'
+  },
+  background: 'IconEditorBackground',
+  'better-table': 'IconEditorTable',
+  blockquote: 'IconEditorQuote',
+  bold: 'IconEditorBold',
+  clean: 'IconEditorEraser',
+  code: '',
+  'code-block': 'IconEditorCode',
+  color: 'IconEditorTextcolor',
+  direction: {
+    default: 'IconEditorRightBorder',
+    rtl: 'IconEditorLeftBorder'
+  },
+  emoji: '',
+  file: 'IconCloudUpload',
+  font: '',
+  formula: '',
+  fullscreen: 'IconFullscreen',
+  'global-link': '',
+  header: {
+    1: 'IconEditorTitle',
+    2: 'IconEditorSubtitle'
+  },
+  help: '',
+  image: 'IconPicture',
+  indent: {
+    '+1': 'IconEditorMenuRight',
+    '-1': 'IconEditorMenuLeft'
+  },
+  italic: 'IconEditorItalic',
+  link: 'IconLink',
+  list: {
+    bullet: 'IconEditorListDot',
+    check: '',
+    ordered: 'IconEditorListNum'
+  },
+  redo: 'IconEditorRedo',
+  screenshot: '',
+  script: {
+    sub: 'IconEditorSub',
+    super: 'IconEditorSuper'
+  },
+  size: '',
+  strike: 'IconEditorDeleteline',
+  table: '',
+  underline: 'IconEditorUnderline',
+  undo: 'IconEditorUndo',
+  video: 'IconEditorVideo'
+}
diff --git a/packages/renderless/src/fluent-editor/vue.ts b/packages/renderless/src/fluent-editor/vue.ts
new file mode 100644
index 0000000000..65ad3cd27b
--- /dev/null
+++ b/packages/renderless/src/fluent-editor/vue.ts
@@ -0,0 +1,209 @@
+import {
+  beforeUnmount,
+  computePreviewOptions,
+  stringToJson,
+  doPreview,
+  fileHandler,
+  fileOperationToSev,
+  getFileUploadUrl,
+  handleDblclick,
+  handlers,
+  handleUploadFile,
+  handleUploadImage,
+  imageHandler,
+  init,
+  initContent,
+  inputFileHandler,
+  insertFileToEditor,
+  insertImageToEditor,
+  lineheightHandler,
+  mounted,
+  redoHandler,
+  selectionChange,
+  textChange,
+  undoHandler,
+  uploaderDflsHandler,
+  uploadImageToSev,
+  setToolbarTips,
+  getOuterHTML,
+  setToolbarTitle,
+  addFullscreenchange,
+  removeFullscreenchange,
+  keyDownHandler,
+  computeZIndex,
+  handleComposition,
+  handleCompositionstart,
+  handleCompositionend,
+  removeHandleComposition,
+  checkTableISEndElement
+} from './index'
+import { defaultOption, iconOption } from './options'
+
+export const api = ['state', 'init', 'initContent', 'selectionChange', 'textChange', 'doPreview', 'handleDblclick']
+
+const initState = ({ api, reactive, computed, props }) => {
+  const state = reactive({
+    promises: [],
+    promisesData: [],
+    cbNum: 0,
+    innerOptions: {},
+    innerContent: '',
+    fileUploadUrl: (props.fileUpload && props.fileUpload.url) || '',
+    quill: null,
+    fileInput: null,
+    previewOptions: computed(() => api.computePreviewOptions()),
+    previewImgUrl: '',
+    showPreview: false,
+    content: props.modelValue || props.content,
+    isFullscreen: false,
+    zIndex: computed(() => api.computeZIndex()),
+    icons: [
+      'IconEditorAlignCenter',
+      'IconEditorAlignLeft',
+      'IconEditorAlignRight',
+      'IconEditorBackground',
+      'IconEditorBold',
+      'IconEditorCode',
+      'IconEditorDeleteline',
+      'IconEditorEraser',
+      'IconEditorItalic',
+      'IconEditorLeftBorder',
+      'IconEditorList',
+      'IconEditorListDot',
+      'IconEditorListNum',
+      'IconEditorMenuLeft',
+      'IconEditorMenuRight',
+      'IconEditorQuote',
+      'IconEditorRedo',
+      'IconEditorRightBorder',
+      'IconEditorSub',
+      'IconEditorSubtitle',
+      'IconEditorSuper',
+      'IconEditorTable',
+      'IconEditorTextcolor',
+      'IconEditorTitle',
+      'IconEditorUnderline',
+      'IconEditorUndo',
+      'IconEditorVideo',
+      'IconLink',
+      'IconPicture',
+      'IconCloudUpload',
+      'IconFullscreen'
+    ]
+  })
+
+  return state
+}
+
+const initApi = ({ api, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t }) => {
+  Object.assign(api, {
+    state,
+    getFileUploadUrl: getFileUploadUrl({ service }),
+    selectionChange: selectionChange({ emit, state }),
+    fileOperationToSev: fileOperationToSev({ state }),
+    undoHandler: undoHandler({ state }),
+    redoHandler: redoHandler({ state }),
+    lineheightHandler: lineheightHandler({ state, FluentEditor }),
+    inputFileHandler: inputFileHandler({ state, UploaderDfls }),
+    insertFileToEditor: insertFileToEditor({ state, FluentEditor, Delta }),
+    insertImageToEditor: insertImageToEditor({ state, FluentEditor, Delta }),
+    uploadImageToSev: uploadImageToSev({ state }),
+    doPreview: doPreview({ props, state, nextTick }),
+    stringToJson: stringToJson({ props }),
+    setToolbarTips: setToolbarTips({ api, vm, FluentEditor, iconOption }),
+    getOuterHTML: getOuterHTML(),
+    setToolbarTitle: setToolbarTitle({ state, t })
+  })
+}
+
+const mergeApi = (args) => {
+  let { api, state, service, emit, props, vm, i18n, watch, nextTick } = args
+  let { constants, FluentEditor, UploaderDfls, Delta, defaultOptions } = args
+
+  Object.assign(api, {
+    init: init({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm }),
+    initContent: initContent({ state, props, api, nextTick }),
+    fileHandler: fileHandler({ api, state }),
+    imageHandler: imageHandler({ api, state }),
+    uploaderDflsHandler: uploaderDflsHandler({ api, modules: defaultOptions.modules }),
+    handleUploadFile: handleUploadFile({ api, UploaderDfls }),
+    handleUploadImage: handleUploadImage({ state, api, FluentEditor, Delta, UploaderDfls }),
+    handlers: handlers({ api }),
+    mounted: mounted({ api, props, state, i18n, watch }),
+    beforeUnmount: beforeUnmount({ api, state, vm }),
+    computePreviewOptions: computePreviewOptions({ props, state, constants, api }),
+    handleDblclick: handleDblclick({ props, api }),
+    textChange: textChange({ emit, vm, state, props, api }),
+    keyDownHandler: keyDownHandler({ state }),
+    computeZIndex: computeZIndex({ constants, props }),
+    addFullscreenchange: addFullscreenchange({ api }),
+    removeFullscreenchange: removeFullscreenchange({ api }),
+    handleComposition: handleComposition({ state, api }),
+    handleCompositionstart: handleCompositionstart({ state }),
+    handleCompositionend: handleCompositionend({ state }),
+    removeHandleComposition: removeHandleComposition({ state, api })
+  })
+}
+
+const initWatch = ({ watch, state, api, props, vm }) => {
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (checkTableISEndElement(vm.$refs.editor.children[0])) {
+        state.content = value + '<p><br></p><p><br></p>'
+      } else {
+        state.content = value
+      }
+      api.initContent()
+    }
+  )
+
+  watch(
+    () => props.content,
+    (value) => {
+      state.content = value
+      api.initContent()
+    }
+  )
+
+  watch(
+    () => props.disabled,
+    (value) => {
+      if (state.quill) {
+        state.quill.enable(!value)
+      }
+    }
+  )
+}
+
+export const renderless = (
+  props,
+  { reactive, watch, onMounted, onBeforeUnmount, computed },
+  { service, emit, i18n, constants, nextTick, vm, t },
+  { FluentEditor }
+) => {
+  const api = {}
+  const { DEFAULTS: UploaderDfls } = FluentEditor.imports['modules/uploader']
+  const Delta = FluentEditor.imports['delta']
+  const state = initState({ reactive, computed, api, props })
+  const defaultOptions = defaultOption({ FluentEditor, state, mentionObj: props.mentionObj })
+
+  initApi({ api, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t })
+
+  const args = { api, state, service, emit, props, vm, i18n, watch, nextTick }
+
+  Object.assign(args, { constants, FluentEditor, UploaderDfls, Delta, defaultOptions })
+
+  mergeApi(args)
+
+  initWatch({ watch, state, api, props, vm })
+
+  onMounted(api.mounted)
+  onBeforeUnmount(() => {
+    UploaderDfls.handler = null
+    UploaderDfls.imagePasteFailCallback = null
+    api.beforeUnmount()
+  })
+
+  return api
+}
diff --git a/packages/renderless/src/form/index.ts b/packages/renderless/src/form/index.ts
index 38e9858de3..e80bc540ae 100644
--- a/packages/renderless/src/form/index.ts
+++ b/packages/renderless/src/form/index.ts
@@ -162,6 +162,7 @@ export const validate =
     }
 
     let invalidFields = {}
+    let invalidFieldArr = []
 
     state.fields.forEach((field) => {
       field.validate('', (message, field) => {
@@ -171,8 +172,12 @@ export const validate =
 
         invalidFields = merge({}, invalidFields, field)
 
+        if (field) {
+          Object.keys(field).forEach((item) => invalidFieldArr.push(item))
+        }
+
         if (typeof callback === 'function' && ++count === state.fields.length) {
-          callback(valid, invalidFields)
+          callback(valid, invalidFields, invalidFieldArr)
         }
       })
     })
diff --git a/packages/renderless/src/grid/utils/column.ts b/packages/renderless/src/grid/utils/column.ts
index c4d5970f0b..3fd4b447a0 100644
--- a/packages/renderless/src/grid/utils/column.ts
+++ b/packages/renderless/src/grid/utils/column.ts
@@ -15,6 +15,8 @@ import { initFilter } from './common'
 
 let columnUniqueId = 0
 
+export const setColumnFormat = (column, props) => (column.format = props.formatConfig)
+
 function setBasicProperty(column, context) {
   column.id = `col_${++columnUniqueId}`
   column.type = context.type
@@ -41,7 +43,9 @@ function setBasicProperty(column, context) {
   column.indexMethod = context.indexMethod
   column.formatText = context.formatText
   column.formatValue = context.formatValue
-  column.format = context.formatConfig
+
+  setColumnFormat(column, context)
+
   column.sortable = context.sortable
   column.sortBy = context.sortBy
   column.sortMethod = context.sortMethod
diff --git a/packages/renderless/src/grid/utils/common.ts b/packages/renderless/src/grid/utils/common.ts
index 8c519b0121..44150d46f2 100644
--- a/packages/renderless/src/grid/utils/common.ts
+++ b/packages/renderless/src/grid/utils/common.ts
@@ -25,7 +25,7 @@
 
 import { isNull } from '../../common/type'
 import { find } from '../../common/array'
-import { get, isFunction, set, findTree } from '../static'
+import { get, isFunction, set } from '../static'
 
 export const gridSize = ['medium', 'small', 'mini']
 
@@ -131,16 +131,6 @@ export const setCellValue = (row, column, value) => {
 
 export const hasChildrenList = (item) => item && item.children && item.children.length > 0
 
-export const destroyColumn = ($table, { columnConfig }) => {
-  const matchObj = findTree($table.collectColumn, (column) => column === columnConfig)
-
-  if (matchObj) {
-    matchObj.items.splice(matchObj.index, 1)
-  }
-
-  $table.collectColumn = $table.collectColumn.slice(0)
-}
-
 export const emitEvent = (vm, type, args) => {
   if (vm.tableListeners[type]) {
     const params = [].concat(args)
@@ -148,35 +138,30 @@ export const emitEvent = (vm, type, args) => {
   }
 }
 
-export const assemColumn = ($table, $column, instance) => {
-  const { columnConfig, $el: elm, slots, $parent } = instance
-  const { collectColumn } = $table
+export const assemColumn = ($table) => {
+  const collectColumn = []
 
-  columnConfig.slots = slots
+  const assem = (columnVms, columns) => {
+    if (Array.isArray(columnVms)) {
+      columnVms.forEach((columnVm) => {
+        const column = columnVm.columnConfig
+        const children = []
 
-  const parentNode = elm.parentNode
-  const insertIndex = [].indexOf.call(parentNode.children, elm)
-
-  if (!$column || $column !== $parent) {
-    collectColumn.splice(insertIndex, 0, columnConfig)
-  } else {
-    // 如果存在$column父级表格列组件实例
-    const parentConfig = $column.columnConfig
-
-    if (!parentConfig.children) {
-      parentConfig.children = []
+        if (column) {
+          columns.push(column)
+          assem(columnVm.childColumns, children)
+          // 兼容旧实现，如果当前列没有子列，children 为 falsy 值
+          column.children = children.length > 0 ? children : null
+        }
+      })
     }
-    parentConfig.children.splice(insertIndex, 0, columnConfig)
   }
 
-  $table.collectColumn = collectColumn.slice(0)
+  assem($table.childColumns, collectColumn)
+  $table.collectColumn = collectColumn
 }
 
-export const getCellValue = (row, column) => {
-  const { field, prop } = column.own
-  const property = field || prop
-  return get(row, property)
-}
+export const getCellValue = (row, column) => get(row, column.own.field)
 
 export const getListeners = ($attrs, $listeners) => {
   const regHyphenate = /\B([A-Z])/g
diff --git a/packages/renderless/src/grid/utils/event.ts b/packages/renderless/src/grid/utils/event.ts
index 1faeddd0b2..e5109ac3d6 100644
--- a/packages/renderless/src/grid/utils/event.ts
+++ b/packages/renderless/src/grid/utils/event.ts
@@ -31,21 +31,26 @@ import { on } from '../../common/deps/dom'
 const wheelName = browser.isDoc && /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel'
 const eventStore = []
 
+const invoke = ({ comp, type, cb }, event) => {
+  if (type === event.type || (type === 'mousewheel' && event.type === wheelName)) {
+    cb.call(comp, event)
+  }
+}
+
 const GlobalEvent = {
-  on(comp, type, cb) {
+  on(comp, type, cb, capture = false) {
     if (cb) {
-      eventStore.push({ comp, type, cb })
+      eventStore.push({ comp, type, cb, capture })
     }
   },
-  off(comp, type) {
-    remove(eventStore, (item) => item.comp === comp && item.type === type)
+  off(comp, type, capture = false) {
+    remove(eventStore, (item) => item.comp === comp && item.type === type && item.capture === capture)
   },
   trigger(event) {
-    eventStore.forEach(({ comp, type, cb }) => {
-      if (type === event.type || (type === 'mousewheel' && event.type === wheelName)) {
-        cb.call(comp, event)
-      }
-    })
+    eventStore.filter((item) => !item.capture).forEach((item) => invoke(item, event))
+  },
+  capture(event) {
+    eventStore.filter((item) => item.capture).forEach((item) => invoke(item, event))
   }
 }
 
@@ -53,6 +58,7 @@ if (browser.isDoc) {
   on(document, 'keydown', GlobalEvent.trigger)
   on(document, 'contextmenu', GlobalEvent.trigger)
   on(window, 'mousedown', GlobalEvent.trigger)
+  on(window, 'mousedown', GlobalEvent.capture, true)
   on(window, 'blur', GlobalEvent.trigger)
   on(window, 'resize', GlobalEvent.trigger)
   on(window, wheelName, GlobalEvent.trigger)
diff --git a/packages/renderless/src/guide/index.ts b/packages/renderless/src/guide/index.ts
index fcc8a63045..2999fa682b 100644
--- a/packages/renderless/src/guide/index.ts
+++ b/packages/renderless/src/guide/index.ts
@@ -1,9 +1,9 @@
 import { xss } from '../common/xss'
 
 export const createShepherd =
-  ({ state, props, Shepherd, offset }) =>
+  ({ state, props, Shepherd, offset, designConfig }) =>
   () => {
-    const tour = newTour(state, Shepherd, offset)
+    const tour = newTour(state, Shepherd, offset, designConfig)
 
     state.tour = tour
 
@@ -15,7 +15,7 @@ export const createShepherd =
         let steps = itemStep(item, state, deepCopy, i, Shepherd)
 
         const step = tour.addStep(steps)
-        if (steps.hightBox && steps.hightBox.length != 0) {
+        if (steps.hightBox && steps.hightBox.length !== 0) {
           step.on('show', () => {
             steps.hightBox.forEach((item) => {
               document.querySelector(item).classList.add('tiny-guide__z-top')
@@ -79,9 +79,9 @@ const getItemCopy = (props, tour, result) => {
   return result
 }
 
-const newTour = (state, Shepherd, offset) => {
+const newTour = (state, Shepherd, offset, designConfig) => {
   const tour = new Shepherd.Tour({
-    useModalOverlay: true,
+    useModalOverlay: !designConfig?.state?.isUseModalOverlay,
     defaultStepOptions: {
       modalOverlayOpeningPadding: state.modalOverlayOpeningPadding,
       modalOverlayOpeningRadius: state.modalOverlayOpeningRadius,
diff --git a/packages/renderless/src/guide/vue.ts b/packages/renderless/src/guide/vue.ts
index 94b8905ff0..8d613b8ea2 100644
--- a/packages/renderless/src/guide/vue.ts
+++ b/packages/renderless/src/guide/vue.ts
@@ -2,7 +2,7 @@ import { createShepherd, mounted } from './index'
 
 export const api = ['state']
 
-export const renderless = (props, { reactive, onMounted, watch }, utils, { Shepherd, offset }) => {
+export const renderless = (props, { reactive, onMounted, watch }, { designConfig }, { Shepherd, offset }) => {
   const state = reactive({
     tour: null,
     tour1: null,
@@ -20,7 +20,7 @@ export const renderless = (props, { reactive, onMounted, watch }, utils, { Sheph
 
   let baseApi = {
     state,
-    createShepherd: createShepherd({ state, props, Shepherd, offset })
+    createShepherd: createShepherd({ state, props, Shepherd, offset, designConfig })
   }
 
   const api = {
diff --git a/packages/renderless/src/input/index.ts b/packages/renderless/src/input/index.ts
index 36761376dc..bf737fbfed 100644
--- a/packages/renderless/src/input/index.ts
+++ b/packages/renderless/src/input/index.ts
@@ -142,7 +142,9 @@ export const calcTextareaHeight =
       height = Math.max(hiddenTextarea.scrollHeight, constants.TEXTAREA_HEIGHT_MOBILE)
     }
 
-    if (boxSizing === STYLE.ContentBox) {
+    if (boxSizing === STYLE.BorderBox) {
+      height = height + borderSize * 2 + paddingSize
+    } else if (boxSizing === STYLE.ContentBox) {
       height = height - paddingSize
     }
 
@@ -438,7 +440,9 @@ export const hasSelection = (api: IInputApi) => (): boolean => {
 export const handleEnterDisplayOnlyContent =
   ({ state, props }: Pick<IInputRenderlessParams, 'state' | 'props'>) =>
   ($event: MouseEvent, type?: 'textarea'): void => {
-    const target = $event.target as HTMLElement
+    if (type === 'textarea' && props.popupMore) return
+
+    const target = type === 'textarea' ? $event.target.querySelector('.text-box') : $event.target
     state.displayOnlyTooltip = ''
 
     if (!target) {
@@ -534,3 +538,34 @@ export const getDisplayOnlyText =
 
     return showEmptyValue ? text : text || '-'
   }
+
+export const setShowMoreBtn =
+  ({ state, vm }) =>
+  (init) => {
+    if (state.timer) clearTimeout(state.timer)
+
+    state.timer = setTimeout(() => {
+      const textBox = vm.$refs && vm.$refs.textBox
+      if (!textBox) return
+
+      // 兼容元素使用v-show及在弹框中使用的场景，只在初始化时执行一次
+      if (init && textBox.offsetHeight === 0) {
+        let textBoxClone = textBox.cloneNode(true)
+        textBoxClone.style.visibility = 'hidden'
+        textBoxClone.style.position = 'absolute'
+        textBoxClone.style.left = '-9999px'
+        document.body.appendChild(textBoxClone)
+
+        if (textBoxClone.scrollHeight > textBoxClone.offsetHeight) {
+          state.showMoreBtn = true
+        }
+
+        document.body.removeChild(textBoxClone)
+        textBoxClone = null
+      } else if (textBox.scrollHeight > textBox.offsetHeight) {
+        state.showMoreBtn = true
+      } else {
+        state.showMoreBtn = false
+      }
+    }, 100)
+  }
diff --git a/packages/renderless/src/input/vue.ts b/packages/renderless/src/input/vue.ts
index 2debff215f..d8beea1f86 100644
--- a/packages/renderless/src/input/vue.ts
+++ b/packages/renderless/src/input/vue.ts
@@ -51,9 +51,11 @@ import {
   inputStyle,
   handleEnterTextarea,
   handleLeaveTextarea,
-  getDisplayOnlyText
+  getDisplayOnlyText,
+  setShowMoreBtn
 } from './index'
 import useStorageBox from '../tall-storage/vue-storage-box'
+import { on, off } from '../common/deps/dom'
 
 export const api = [
   'blur',
@@ -152,6 +154,7 @@ const initState = ({
     nativeInputValue: computed(() =>
       props.modelValue === null || props.modelValue === undefined ? '' : String(props.modelValue)
     ),
+    tooltipConfig: computed(() => (parent.tinyForm ? parent.tinyForm.tooltipConfig : {})),
 
     isWordLimitVisible: computed(
       () =>
@@ -167,6 +170,9 @@ const initState = ({
         ['text', 'textarea', 'password', 'number'].includes(props.type)
     ),
     displayOnlyTooltip: '',
+    showMoreBtn: false,
+    showDisplayOnlyBox: false,
+    timer: null,
     hiddenPassword: computed(() => api.hiddenPassword()),
     displayedMaskValue: computed(() => api.getDisplayedMaskValue()),
     displayOnlyText: computed(() => api.getDisplayOnlyText())
@@ -199,6 +205,7 @@ const initApi = ({
     showBox: showBox(state),
     clear: clear(emit),
     getInput: getInput(vm),
+    setShowMoreBtn: setShowMoreBtn({ state, vm }),
     handleChange: handleChange(emit),
     watchFormSelect: watchFormSelect({ emit, props, state }),
     calcIconOffset: calcIconOffset({ CLASS_PREFIX, parent }),
@@ -304,6 +311,10 @@ const initWatch = ({
         api.dispatch(componentName, eventName.change, [value])
       }
 
+      if (props.type === 'textarea' && props.popupMore && state.isDisplayOnly) {
+        api.setShowMoreBtn()
+      }
+
       api.setInputDomValue()
     }
   )
@@ -363,7 +374,7 @@ const initWatch = ({
 
 export const renderless = (
   props: IInputProps,
-  { computed, onMounted, onUpdated, reactive, toRefs, watch, inject }: ISharedRenderlessParamHooks,
+  { computed, onMounted, onBeforeUnmount, onUpdated, reactive, toRefs, watch, inject }: ISharedRenderlessParamHooks,
   { vm, refs, parent, emit, constants, nextTick, broadcast, dispatch, mode }: IInputRenderlessParamUtils
 ): IInputApi => {
   const api = {} as IInputApi
@@ -393,6 +404,17 @@ export const renderless = (
 
     dispatch('Select', 'input-mounted', vm.$el)
     dispatch('Tooltip', 'tooltip-update', vm.$el)
+
+    if (props.type === 'textarea' && props.popupMore && state.isDisplayOnly) {
+      api.setShowMoreBtn(true)
+      on(window, 'resize', api.setShowMoreBtn)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (props.type === 'textarea' && props.popupMore && state.isDisplayOnly) {
+      off(window, 'resize', api.setShowMoreBtn)
+    }
   })
 
   onUpdated(() => {
diff --git a/packages/renderless/src/numeric/index.ts b/packages/renderless/src/numeric/index.ts
index e840e6c601..17e31c9087 100644
--- a/packages/renderless/src/numeric/index.ts
+++ b/packages/renderless/src/numeric/index.ts
@@ -305,9 +305,16 @@ export const setCurrentValue =
     }
   }
 
+/** 处理输入字符： input / compositionend 事件均进入该函数 */
 export const handleInput =
   ({ state, api, emit, props }: Pick<INumericRenderlessParams, 'state' | 'api' | 'emit' | 'props'>) =>
   (event: InputEvent): void => {
+    // 此时为'正在输入中文'，所以忽略
+    if (event.isComposing) {
+      return
+    }
+
+    // 此时为输入了1个有效的: 数字\英文\中文
     const { fraction } = state.format
     const emitError = () => {
       if (state.pasting) {
@@ -320,7 +327,7 @@ export const handleInput =
       emitError()
 
       if (!(value === '' && props.allowEmpty)) {
-        value = !value.includes('e') ? state.lastInput : value
+        value = state.lastInput
       }
     } else {
       value = value
diff --git a/packages/renderless/src/option/vue.ts b/packages/renderless/src/option/vue.ts
index 64fd5e3db7..69c761ff75 100644
--- a/packages/renderless/src/option/vue.ts
+++ b/packages/renderless/src/option/vue.ts
@@ -137,10 +137,13 @@ const initOnBeforeUnmount = ({ onBeforeUnmount, props, select, vm, state }) => {
   })
 }
 
-const initSelectState = ({ state, select, markRaw, props }) => {
-  let vm = { ...props, state }
-  select.state.options.push(markRaw(vm))
-  select.state.cachedOptions.push(markRaw(vm))
+const initSelectState = ({ state, select, props, toRefs, reactive }) => {
+  // 当select下的option数量变化时，vue runtime会尽量复用存在的option, 这些option的props会更新。
+  // toRefs：保持vm下的属性与props的值能关联上。
+  // reactive： toRefs之后是一些ref值, 不包裹reactive，就需要使用.value访问值。
+  let vm = reactive({ ...toRefs(props), state })
+  select.state.options.push(vm)
+  select.state.cachedOptions.push(vm)
   select.state.optionsIndex++
   state.index = select.state.optionsIndex
   select.state.optionsCount++
@@ -149,7 +152,7 @@ const initSelectState = ({ state, select, markRaw, props }) => {
 
 export const renderless = (
   props,
-  { computed, onMounted, onBeforeUnmount, reactive, watch, inject, markRaw },
+  { computed, onMounted, onBeforeUnmount, reactive, watch, inject, markRaw, toRefs },
   { vm, parent }
 ) => {
   const api = {}
@@ -161,7 +164,7 @@ export const renderless = (
   initWatch({ watch, props, state, select, constants })
   initOnMounted({ onMounted, props, api, vm, state, constants, select })
   initOnBeforeUnmount({ onBeforeUnmount, props, select, vm, state })
-  initSelectState({ state, select, markRaw, props })
+  initSelectState({ state, select, props, toRefs, reactive })
 
   parent.$on(constants.EVENT_NAME.handleGroupDisabled, api.handleGroupDisabled)
 
diff --git a/packages/renderless/src/picker/mb.ts b/packages/renderless/src/picker/mb.ts
index d7385bcc61..f581fadb26 100644
--- a/packages/renderless/src/picker/mb.ts
+++ b/packages/renderless/src/picker/mb.ts
@@ -17,6 +17,7 @@ export const timeMobileToggle =
 
     if (visible) {
       state.timeMobileOption.value = api.dateToTimeArray(props.modelValue)
+      state.timeMobileOption.defaultValue = api.dateToTimeArray(props.defaultValue)
     }
 
     state.timeMobileOption.visible = visible
@@ -31,7 +32,11 @@ export const timeMobileConfirm =
 export const dateToTimeArray = (value) => {
   const date = new Date(value)
 
-  return [date.getHours(), date.getMinutes(), date.getSeconds()]
+  if (isNaN(date.getTime())) {
+    return []
+  } else {
+    return [date.getHours(), date.getMinutes(), date.getSeconds()]
+  }
 }
 
 export const timeArrayToDate =
diff --git a/packages/renderless/src/picker/vue.ts b/packages/renderless/src/picker/vue.ts
index bc51df3385..fc10e7a98c 100644
--- a/packages/renderless/src/picker/vue.ts
+++ b/packages/renderless/src/picker/vue.ts
@@ -152,7 +152,8 @@ const initState = ({ api, reactive, vm, computed, props, utils, parent, breakpoi
     timeMobileOption: {
       visible: false,
       type: props.type,
-      value: [0, 0, 0]
+      value: [0, 0, 0],
+      defaultValue: [0, 0, 0]
     },
     isDateMobileComponent: computed(() =>
       [
diff --git a/packages/renderless/src/select/index.ts b/packages/renderless/src/select/index.ts
index 83dd0ccf49..1c51840a26 100644
--- a/packages/renderless/src/select/index.ts
+++ b/packages/renderless/src/select/index.ts
@@ -64,9 +64,9 @@ export const showTip =
 export const gridOnQueryChange =
   ({ props, vm, constants, state }) =>
   (value) => {
-    const { multiple, valueField, filterMethod, filterable, remote, remoteMethod } = props
+    const { multiple, valueField, filterMethod, remote, remoteMethod } = props
 
-    if (filterable && typeof filterMethod === 'function') {
+    if ((props.filterable || props.searchable) && typeof filterMethod === 'function') {
       const table = vm.$refs.selectGrid.$refs.tinyTable
       const fullData = table.afterFullData
 
@@ -137,7 +137,13 @@ export const queryChange =
 
 const setFilteredSelectCls = (nextTick, state, props) => {
   nextTick(() => {
-    if (props.multiple && props.showAlloption && props.filterable && state.query && !props.remote) {
+    if (
+      props.multiple &&
+      props.showAlloption &&
+      (props.filterable || props.searchable) &&
+      state.query &&
+      !props.remote
+    ) {
       const filterSelectedVal = state.options
         .filter((item) => item.state.visible && item.state.itemSelected)
         .map((opt) => opt.value)
@@ -179,7 +185,7 @@ export const handleQueryChange =
     if (props.renderType === constants.TYPE.Tree) {
       state.previousQuery = value
 
-      if (props.filterable && typeof props.filterMethod === 'function') {
+      if ((props.filterable || props.searchable) && typeof props.filterMethod === 'function') {
         vm.$refs.selectTree && vm.$refs.selectTree.filter(value)
       }
     }
@@ -196,8 +202,11 @@ export const handleQueryChange =
 
     state.hoverIndex = -1
 
-    if (props.multiple && props.filterable && !props.shape) {
+    if (props.multiple && (props.filterable || props.searchable) && !props.shape) {
       nextTick(() => {
+        if (!vm.$refs.input) {
+          return
+        }
         const length = vm.$refs.input.value.length * 15 + 20
         state.inputLength = state.collapseTags ? Math.min(50, length) : length
         api.managePlaceholder()
@@ -413,7 +422,7 @@ const getResultOfSetSelected = ({ state, isGrid, isTree, api, props }) => {
 }
 
 // 单选,树/表格，获取匹配的option
-const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
+const setGridOrTreeSelected = ({ props, state, vm, isTree, api, init }) => {
   if (!props.modelValue) {
     state.selectedLabel = ''
     state.selected = {}
@@ -424,7 +433,7 @@ const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
   }
 
   const isRemote =
-    props.filterable &&
+    (props.filterable || props.searchable) &&
     props.remote &&
     (typeof props.remoteMethod === 'function' || typeof props.initQuery === 'function')
   const nestdata = isRemote ? state.remoteData : isTree ? api.getTreeData(state.treeData) : state.gridData
@@ -439,6 +448,7 @@ const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
   const label = data[props.textField]
 
   obj.currentLabel = label
+  state.selectedLabel = init && !label && props.initLabel ? props.initLabel : label
   state.selectedLabel = label
   state.selected = obj
   state.currentKey = data[props.valueField]
@@ -446,18 +456,18 @@ const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
 
 export const setSelected =
   ({ api, constants, nextTick, props, vm, state }) =>
-  () => {
+  (init) => {
     const isTree = props.renderType === constants.TYPE.Tree
     const isGrid = props.renderType === constants.TYPE.Grid
 
     if (!props.multiple) {
       if (isGrid || isTree) {
-        setGridOrTreeSelected({ props, state, vm, isTree, api })
+        setGridOrTreeSelected({ props, state, vm, isTree, api, init })
       } else {
         const option = getOptionOfSetSelected({ api, props })
         state.selected = option
         state.selectedLabel = option.state.currentLabel || option.currentLabel
-        props.filterable && !props.shape && (state.query = state.selectedLabel)
+        ;(props.filterable || props.searchable) && !props.shape && (state.query = state.selectedLabel)
       }
     } else {
       const result = getResultOfSetSelected({ state, props, isGrid, isTree, api })
@@ -467,6 +477,7 @@ export const setSelected =
           : 'halfselect'
         : 'check'
       state.selected = result
+      state.selected.length && (state.selectedLabel = '')
       vm.$refs.selectTree && vm.$refs.selectTree.setCheckedNodes && vm.$refs.selectTree.setCheckedNodes(state.selected)
       state.tips = state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join(',')
 
@@ -480,7 +491,7 @@ export const getPluginOption =
   ({ api, props, state }) =>
   (value, isTree) => {
     const isRemote =
-      props.filterable &&
+      (props.filterable || props.searchable) &&
       props.remote &&
       (typeof props.remoteMethod === 'function' || typeof props.initQuery === 'function')
     const { textField, valueField } = props
@@ -507,7 +518,8 @@ export const toggleCheckAll =
 
     if (filtered) {
       if (state.filteredSelectCls === 'check' || state.filteredSelectCls === 'halfselect') {
-        value = [...new Set([...state.modelValue, ...enabledValues])]
+        // 避免编译报错
+        value = Array.from(new Set([...state.modelValue, ...enabledValues]))
       } else {
         value = state.modelValue.filter((val) => !enabledValues.includes(val))
       }
@@ -543,7 +555,7 @@ export const handleFocus =
   ({ emit, props, state }) =>
   (event) => {
     if (!state.softFocus) {
-      if (props.automaticDropdown || props.filterable) {
+      if (props.automaticDropdown || props.filterable || props.searchable) {
         state.visible = true
         state.softFocus = true
       }
@@ -685,7 +697,7 @@ export const resetInputState =
 export const resetInputHeight =
   ({ constants, nextTick, props, vm, state, api, designConfig }) =>
   () => {
-    if (state.collapseTags && !props.filterable) {
+    if (state.collapseTags && !(props.filterable || props.searchable)) {
       return
     }
 
@@ -707,7 +719,7 @@ export const resetInputHeight =
       }
 
       const sizeInMap =
-        designConfig?.state.initialInputHeight || state.initialInputHeight || (state.isSaaSTheme ? 28 : 30)
+        designConfig?.state.initialInputHeight || Math.round(state.initialInputHeight) || (state.isSaaSTheme ? 28 : 30)
       const noSelected = state.selected.length === 0
       // tiny 新增的spacing (design中配置：aui为4，smb为0，tiny 默认为0)
       const spacingHeight = designConfig ? designConfig.state?.spacingHeight : constants.SPACING_HEIGHT
@@ -800,8 +812,8 @@ export const handleOptionSelect =
         state.inputLength = 20
       }
 
-      if (props.filterable) {
-        vm.$refs.input.focus()
+      if (props.filterable || props.searchable) {
+        vm.$refs.input?.focus()
       }
 
       if (props.autoClose) {
@@ -884,7 +896,7 @@ export const getValueIndex =
 export const toggleMenu =
   ({ vm, state, props, api }) =>
   (e) => {
-    if (props.keepFocus && state.visible && props.filterable) {
+    if (props.keepFocus && state.visible && (props.filterable || props.searchable)) {
       return
     }
 
@@ -902,7 +914,7 @@ export const toggleMenu =
       state.softFocus = false
 
       if (state.visible) {
-        if (!(props.filterable && props.shape)) {
+        if (!((props.filterable || props.searchable) && props.shape)) {
           const dom = vm.$refs.input || vm.$refs.reference
           dom?.focus && dom.focus()
           api.setOptionHighlight()
@@ -1021,7 +1033,7 @@ export const onInputChange =
   ({ api, props, state, constants, nextTick }) =>
   () => {
     if (!props.delay) {
-      if (props.filterable && state.query !== state.selectedLabel) {
+      if ((props.filterable || props.searchable) && state.query !== state.selectedLabel) {
         const isChange = false
         const isInput = true
 
@@ -1250,7 +1262,7 @@ export const emptyText =
     }
 
     if (
-      props.filterable &&
+      (props.filterable || props.searchable) &&
       state.query &&
       ((props.remote && state.emptyFlag) || !state.options.some((option) => option.visible && option.state.visible))
     ) {
@@ -1284,7 +1296,7 @@ export const watchValue =
         state.currentPlaceholder = state.cachedPlaceHolder
       }
 
-      if (props.filterable && !props.reserveKeyword) {
+      if ((props.filterable || props.searchable) && !props.reserveKeyword) {
         // tiny 优化： 多选且props.reserveKeyword为false时， aui此处会多请求一次
         // searchable时，不清空query, 这样才能保持搜索结果
         props.renderType !== constants.TYPE.Grid && !props.searchable && (state.query = '')
@@ -1296,7 +1308,7 @@ export const watchValue =
     !state.isClickChoose && api.initQuery({ init: true }).then(() => api.setSelected())
     state.isClickChoose = false
 
-    if (props.filterable && !props.multiple) {
+    if ((props.filterable || props.searchable) && !props.multiple) {
       state.inputLength = 20
     }
 
@@ -1353,6 +1365,9 @@ export const calcOverFlow =
 
 const postOperOfToVisible = ({ props, state, constants }) => {
   if (props.multiple) {
+    if (props.modelValue && props.modelValue.length && props.initLabel && !state.selected.length) {
+      state.selectedLabel = props.initLabel
+    }
     return
   }
 
@@ -1360,20 +1375,24 @@ const postOperOfToVisible = ({ props, state, constants }) => {
     if (props.renderType === constants.TYPE.Grid || props.renderType === constants.TYPE.Tree) {
       state.selectedLabel = state.selected.currentLabel
     } else {
-      if (props.filterable && props.allowCreate && state.createdSelected && state.createdLabel) {
+      if ((props.filterable || props.searchable) && props.allowCreate && state.createdSelected && state.createdLabel) {
         state.selectedLabel = state.createdLabel
       } else {
         state.selectedLabel = state.selected.state.currentLabel || state.selected.currentLabel
       }
 
-      if (props.filterable) {
+      if (props.filterable || props.searchable) {
         state.query = state.selectedLabel
       }
     }
 
-    if (props.filterable) {
+    if (props.filterable || props.searchable) {
       state.currentPlaceholder = state.cachedPlaceHolder
     }
+
+    if (props.modelValue && props.initLabel && !state.selectedLabel) {
+      state.selectedLabel = props.initLabel
+    }
   }
 }
 
@@ -1415,18 +1434,18 @@ export const toVisible =
 export const toHide =
   ({ constants, state, props, vm, api }) =>
   () => {
-    const { filterable, remote, remoteConfig, shape, renderType, multiple, valueField } = props
+    const { remote, remoteConfig, shape, renderType, multiple, valueField } = props
 
     state.selectEmitter.emit(constants.COMPONENT_NAME.SelectDropdown, constants.EVENT_NAME.updatePopper)
 
-    if (filterable) {
+    if (props.filterable || props.searchable) {
       state.query = remote || shape ? '' : renderType !== constants.TYPE.Tree ? state.selectedLabel : ''
       const isChange = remote && remoteConfig.autoSearch && (state.firstAutoSearch || remoteConfig.clearData)
       state.firstAutoSearch = false
       api.handleQueryChange(state.query, isChange)
 
       if (multiple) {
-        vm.$refs.input.focus()
+        vm.$refs.input?.focus()
       } else {
         if (!remote) {
           state.selectEmitter.emit(constants.EVENT_NAME.queryChange, '')
@@ -1455,10 +1474,10 @@ export const toHide =
         vm.$refs.selectGrid.setRadioRow(find(fullData, (item) => props.modelValue === item[valueField]))
       }
 
-      if (filterable && typeof props.filterMethod === 'function') {
+      if ((props.filterable || props.searchable) && typeof props.filterMethod === 'function') {
         vm.$refs.selectGrid.handleTableData(true)
       } else if (
-        filterable &&
+        (props.filterable || props.searchable) &&
         remote &&
         (typeof props.remoteMethod === 'function' || typeof props.initQuery === 'function')
       ) {
@@ -1470,8 +1489,8 @@ export const toHide =
 export const watchVisible =
   ({ api, constants, emit, state, vm, props }) =>
   (value) => {
-    if ((props.filterable || props.remote) && !value) {
-      vm.$refs.reference.blur()
+    if ((props.filterable || props.searchable || props.remote) && !value) {
+      vm.$refs.reference?.blur()
     }
 
     if (api.onCopying()) {
@@ -1540,7 +1559,11 @@ export const getOptionIndexArr =
   () => {
     setTimeout(() => {
       state.optionIndexArr = api.queryVisibleOptions().map((item) => Number(item.getAttribute('data-index')))
-      if (props.defaultFirstOption && (props.filterable || props.remote) && state.filteredOptionsCount) {
+      if (
+        props.defaultFirstOption &&
+        (props.filterable || props.searchable || props.remote) &&
+        state.filteredOptionsCount
+      ) {
         if (props.optimization) {
           optmzApis.checkDefaultFirstOption({ state })
         } else {
@@ -1717,7 +1740,7 @@ export const nodeExpand =
 
 export const debouncRquest = ({ api, state, props }) =>
   debounce(props.delay, () => {
-    if (props.filterable && state.query !== state.selectedLabel) {
+    if ((props.filterable || props.searchable) && state.query !== state.selectedLabel) {
       const isChange = false
       const isInput = true
 
@@ -1957,7 +1980,7 @@ export const initQuery =
   ({ props, state, constants, vm }) =>
   ({ init } = {}) => {
     const isRemote =
-      props.filterable &&
+      (props.filterable || props.searchable) &&
       props.remote &&
       (typeof props.remoteMethod === 'function' || typeof props.initQuery === 'function')
     const isGrid = props.renderType === constants.TYPE.Grid
@@ -2021,7 +2044,13 @@ export const mounted =
 
     state.inputWidth = inputClientRect.width
 
-    api.initQuery({ init: true }).then(() => api.setSelected())
+    api.initQuery({ init: true }).then(() => {
+      api.setSelected(true)
+
+      if (props.modelValue && props.initLabel) {
+        state.selectedLabel = props.initLabel
+      }
+    })
 
     if (props.dataset) {
       api.watchPropsOption()
@@ -2189,7 +2218,7 @@ export const computedReadonly =
   () =>
     state.device === 'mb' ||
     props.readonly ||
-    !props.filterable ||
+    !(props.filterable || props.searchable) ||
     props.multiple ||
     (browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible)
 
@@ -2211,7 +2240,7 @@ export const computedShowNewOption =
   () => {
     const query = state.device === 'mb' ? state.queryValue : state.query
     return (
-      props.filterable &&
+      (props.filterable || props.searchable) &&
       props.allowCreate &&
       query &&
       !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query)
@@ -2226,8 +2255,15 @@ export const computedShowCopy =
 export const computedOptionsAllDisabled = (state) => () =>
   state.options.filter((option) => option.visible).every((option) => option.disabled)
 
-export const computedDisabledTooltipContent = (state) => () =>
-  state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join('；')
+export const computedDisabledTooltipContent =
+  ({ props, state }) =>
+  () => {
+    if (props.multiple) {
+      return state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join(';')
+    } else {
+      return state.selected.state ? state.selected.state.currentLabel : state.selected.currentLabel
+    }
+  }
 
 export const computedSelectDisabled =
   ({ props, parent }) =>
diff --git a/packages/renderless/src/select/vue.ts b/packages/renderless/src/select/vue.ts
index 51a5ed8cc5..2fde1d7f3e 100644
--- a/packages/renderless/src/select/vue.ts
+++ b/packages/renderless/src/select/vue.ts
@@ -289,7 +289,7 @@ const initStateAdd = ({ computed, props, api, parent }) => {
     isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
     gridCheckedData: computed(() => api.getcheckedData()),
     isExpandAll: computed(() => api.computedIsExpandAll()),
-    searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
+    searchSingleCopy: computed(() => props.allowCopy && !props.multiple && (props.filterable || props.searchable)),
     childrenName: computed(() => (props.treeOp.props && props.treeOp.props.children) || 'children'),
     tooltipContent: {},
     isHidden: false,
diff --git a/packages/renderless/src/split/index.ts b/packages/renderless/src/split/index.ts
index c6b466664a..97b6941762 100644
--- a/packages/renderless/src/split/index.ts
+++ b/packages/renderless/src/split/index.ts
@@ -38,8 +38,13 @@ export const getrightBottomMin =
 
 export const getAnotherOffset =
   ({ vm, state }) =>
-  (value) =>
-    state.valueIsPx ? `${vm.$refs.outerWrapper[state.offsetSize] - parseFloat(value)}px` : 1 - value
+  (value, isPercent) => {
+    return isPercent
+      ? 100 - value
+      : state.valueIsPx
+        ? `${vm.$refs.outerWrapper[state.offsetSize] - parseFloat(value)}px`
+        : 1 - value
+  }
 
 export const handleMove =
   ({ api, emit, props, vm, state }) =>
@@ -52,7 +57,11 @@ export const handleMove =
       ? `${parseFloat(state.oldOffset) + offset}px`
       : api.px2percent({ numerator: outerWidth * state.oldOffset + offset, denominator: outerWidth })
 
-    const anotherValue = api.getAnotherOffset(value)
+    const anotherValue = props.rightBottomValue ? value : api.getAnotherOffset(value)
+
+    if (props.rightBottomValue) {
+      value = api.getAnotherOffset(value)
+    }
 
     if (parseFloat(value) <= parseFloat(state.computedleftTopMin)) {
       value = api.getrightBottomMin({
@@ -108,7 +117,7 @@ export const handleMousedown =
           state.oldOffset = val
           emit('update:modelValue', val)
         } else {
-          state.oldOffset = props.modelValue
+          state.oldOffset = props.rightBottomValue ? api.getAnotherOffset(props.modelValue) : props.modelValue
         }
       }
       state.isMoving = true
@@ -133,10 +142,10 @@ export const buttonLeftTopClick =
       emit('update:modelValue', state.lastmodelValue)
     } else if (state.offset !== 0) {
       state.lastClickOffset = state.offset
-      state.offset = 0
+      state.offset = props.rightBottomValue ? 100 : 0
       state.lastmodelValue = props.modelValue
 
-      emit('update:modelValue', 0)
+      emit('update:modelValue', props.rightBottomValue ? 1 : 0)
     }
     emit('left-top-click')
   }
@@ -150,10 +159,10 @@ export const buttonRightBottomClick =
       emit('update:modelValue', state.lastmodelValue)
     } else if (state.offset !== 100) {
       state.lastClickOffset = state.offset
-      state.offset = 100
+      state.offset = props.rightBottomValue ? 0 : 100
       state.lastmodelValue = props.modelValue
 
-      emit('update:modelValue', 1)
+      emit('update:modelValue', props.rightBottomValue ? 0 : 1)
     }
     emit('right-bottom-click')
   }
@@ -171,15 +180,19 @@ export const computeOffset =
 
     if (state.valueIsPx) {
       nextTick(() => {
-        state.offset =
+        const offset =
           (api.px2percent({
             numerator: props.modelValue,
             denominator: vm.$refs.outerWrapper && vm.$refs.outerWrapper[state.offsetSize]
           }) *
             10000) /
           100
+
+        state.offset = props.rightBottomValue ? api.getAnotherOffset(offset, true) : offset
       })
     } else {
-      state.offset = (props.modelValue * 10000) / 100
+      const offset = (props.modelValue * 10000) / 100
+
+      state.offset = props.rightBottomValue ? api.getAnotherOffset(offset, true) : offset
     }
   }
diff --git a/packages/renderless/src/split/vue.ts b/packages/renderless/src/split/vue.ts
index b541a6c0a3..40ddd50e6a 100644
--- a/packages/renderless/src/split/vue.ts
+++ b/packages/renderless/src/split/vue.ts
@@ -42,7 +42,11 @@ export const renderless = (props, hooks, { vm, nextTick, emit, constants }) => {
     prefix: constants.PREFIX,
     computedleftTopMin: computed(() => api.getComputedThresholdValue('leftTopMin')),
     computedrightBottomMin: computed(() => api.getComputedThresholdValue('rightBottomMin')),
-    wrapperClasses: computed(() => [`${state.prefix}-wrapper`, state.isMoving ? 'no-select' : '']),
+    wrapperClasses: computed(() => [
+      `${state.prefix}-wrapper`,
+      state.isMoving ? 'no-select' : '',
+      props.border ? '' : 'no-border'
+    ]),
     paneClasses: computed(() => [
       `${state.prefix}-pane ${props.scrollable ? 'tiny-split-scroll' : ''}`,
       { [`${state.prefix}-pane-moving`]: state.isMoving }
@@ -83,7 +87,8 @@ export const useOffset = ({ nextTick, props, vm, constants, hooks }) => {
 
   Object.assign(api, {
     px2percent,
-    computeOffset: computeOffset({ api, nextTick, props, vm, state })
+    computeOffset: computeOffset({ api, nextTick, props, vm, state }),
+    getAnotherOffset: getAnotherOffset({ vm, state })
   })
 
   watch(() => props.modelValue, api.computeOffset, { immediate: true })
diff --git a/packages/renderless/src/tabs-mf/index.ts b/packages/renderless/src/tabs-mf/index.ts
index dcada39538..083c2e410f 100644
--- a/packages/renderless/src/tabs-mf/index.ts
+++ b/packages/renderless/src/tabs-mf/index.ts
@@ -4,27 +4,48 @@ import { fastdom } from '../common/deps/fastdom'
 
 // --- tabs ---
 export const setActive =
-  ({ state, props, api }) =>
+  ({ state, api }) =>
   (name) => {
     const current = state.currentItem ? state.currentItem.name : ''
 
-    if (current && current !== name && props.beforeLeave) {
-      const before = props.beforeLeave(name, current)
-
-      if (before && before.then) {
-        before
-          .then(() => {
-            api.changeCurrentName(name)
-          })
-          .catch(() => null)
-      } else if (before !== false) {
-        api.changeCurrentName(name)
-      }
+    if (current && current !== name) {
+      api.canLeave(name, current).then((result) => {
+        if (result) {
+          api.changeCurrentName(name)
+        }
+      })
     } else {
       api.changeCurrentName(name)
     }
   }
 
+export const canLeave = (props) => (newTab, oldTab) => {
+  if (typeof props.beforeLeave === 'function') {
+    const before = props.beforeLeave(newTab, oldTab)
+
+    if (before && before.then) {
+      return {
+        then: (cb) => {
+          // Promise.resolve(false) 或 Promise.reject() 都支持， 都是禁用切换标签
+          before.then(cb).catch(() => cb(false))
+        }
+      }
+    } else {
+      return {
+        then: (cb) => {
+          cb(before)
+        }
+      }
+    }
+  } else {
+    return {
+      then: (cb) => {
+        cb(true)
+      }
+    }
+  }
+}
+
 export const changeCurrentName =
   ({ emit, state }) =>
   (name) => {
@@ -74,12 +95,15 @@ export const clickMore = (api) => (name) => {
 }
 
 export const removeItem =
-  ({ state, emit }) =>
+  ({ props, state, emit }) =>
   (name, silent = false) => {
     const itemIndex = state.items.findIndex((item) => item.name === name)
     const navIndex = state.navs.findIndex((item) => item.name === name)
 
-    if (~itemIndex) {
+    if (!~itemIndex) return
+
+    const emitEvent = () => {
+      // Clean up internal state
       state.items.splice(itemIndex, 1)
       state.items = [...state.items]
 
@@ -87,12 +111,104 @@ export const removeItem =
       state.navs = [...state.navs]
 
       if (!silent) {
+        // Emits the close event
         emit('edit', name, 'remove')
         emit('close', name)
       }
     }
+
+    // Check before close
+    if (typeof props.beforeClose === 'function') {
+      const beforeCloseResult = props.beforeClose(name)
+
+      if (beforeCloseResult && beforeCloseResult.then) {
+        beforeCloseResult.then((res) => res && emitEvent())
+      } else {
+        beforeCloseResult && emitEvent()
+      }
+    } else {
+      emitEvent()
+    }
   }
 
+export const beforeCarouselSwipe =
+  ({ api, state, vm }) =>
+  (newIndex, oldIndex) => {
+    const [newTab, oldTab] = [newIndex, oldIndex].map((index) => (state.items[index] ? state.items[index].name : ''))
+
+    return api.canLeave(newTab, oldTab).then((result) => {
+      if (result) {
+        vm.setActive(newTab)
+      }
+
+      return result
+    })
+  }
+
+export const clearOtherTabSwipeScroll =
+  ({ state, vm }) =>
+  (name) => {
+    if (!state.swipeable) return
+
+    state.items.forEach((tab, i) => {
+      const tabName = tab ? tab.name : ''
+
+      if (tabName !== name) {
+        const tabSwipeVm = vm.$refs[`tabSwipe${i}`]
+        tabSwipeVm && tabSwipeVm.clearScroll()
+      }
+    })
+  }
+
+export const computedSwipeable =
+  ({ props, state }) =>
+  () =>
+    state.items.every((item) => !item.lazy) && props.swipeable
+
+export const observeTabSwipeSize =
+  ({ state, vm }) =>
+  () => {
+    if (!state.swipeable) return
+
+    state._resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        let sizeEntry, blockSize
+
+        if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
+          sizeEntry = entry.borderBoxSize[0]
+          blockSize = sizeEntry.blockSize
+        } else {
+          sizeEntry = entry.contentRect
+          blockSize = sizeEntry.height
+        }
+
+        if (blockSize > state.maxTabSwipeHeight) {
+          state.maxTabSwipeHeight = blockSize
+        }
+      }
+    })
+
+    state.items.forEach((_, i) => {
+      const tabSwipeVm = vm.$refs[`tabSwipe${i}`]
+      tabSwipeVm && state._resizeObserver.observe(tabSwipeVm.$el)
+    })
+  }
+
+export const unobserveTabSwipeSize =
+  ({ state, vm }) =>
+  () => {
+    if (!state.swipeable) return
+
+    if (state._resizeObserver) {
+      state.items.forEach((_, i) => {
+        const tabSwipeVm = vm.$refs[`tabSwipe${i}`]
+        tabSwipeVm && state._resizeObserver.unobserve(tabSwipeVm.$el)
+      })
+
+      state._resizeObserver.disconnect()
+      state._resizeObserver = null
+    }
+  }
 // --- tab-bar ---
 export const wheelListener = ({ vm, api, tabs, state }) =>
   debounce(10, (e) => {
@@ -144,9 +260,21 @@ export const emitAdd = (tabs) => () => {
 
 // --- tab-nav-item ---
 export const handleNavItemClick =
-  ({ tabs, props }) =>
+  ({ tabs, props, vm }) =>
   () => {
-    tabs.setActive(props.navItem.name)
+    const index = tabs.state.navs.indexOf(vm)
+    const newTab = props.navItem.name
+    const oldTab = tabs.state.currentItem ? tabs.state.currentItem.name : ''
+
+    tabs.setActive(newTab)
+
+    props.swipeable &&
+      tabs.canLeave(newTab, oldTab).then((result) => {
+        if (result) {
+          tabs.$refs.swipe && tabs.$refs.swipe.setActiveItem(index)
+        }
+      })
+
     tabs.$emit('click', props.navItem)
   }
 
diff --git a/packages/renderless/src/tabs-mf/vue-bar.ts b/packages/renderless/src/tabs-mf/vue-bar.ts
index 8c0dfa93cb..7766867f04 100644
--- a/packages/renderless/src/tabs-mf/vue-bar.ts
+++ b/packages/renderless/src/tabs-mf/vue-bar.ts
@@ -40,6 +40,13 @@ export const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch,
     }
   )
 
+  watch(
+    () => tabs.state.navs,
+    () => {
+      api.wheelListener()
+    }
+  )
+
   onMounted(() => {
     addWheelListener(vm.$refs.scroll, api.wheelListener)
     addResizeListener(vm.$el, api.wheelListener)
diff --git a/packages/renderless/src/tabs-mf/vue-nav-item.ts b/packages/renderless/src/tabs-mf/vue-nav-item.ts
index a48e3b95ea..96b56c4c8c 100644
--- a/packages/renderless/src/tabs-mf/vue-nav-item.ts
+++ b/packages/renderless/src/tabs-mf/vue-nav-item.ts
@@ -15,7 +15,7 @@ export const renderless = (props, { inject, markRaw, reactive, computed }, { vm
 
   const api = {
     state,
-    handleNavItemClick: handleNavItemClick({ tabs, props }),
+    handleNavItemClick: handleNavItemClick({ tabs, props, vm }),
     getBoundRect: getBoundRectNV({ vm, props }),
     handleNavItemClose: handleNavItemClose({ tabs, props })
   }
diff --git a/packages/renderless/src/tabs-mf/vue.ts b/packages/renderless/src/tabs-mf/vue.ts
index b9a3f1ca31..9481bff5ae 100644
--- a/packages/renderless/src/tabs-mf/vue.ts
+++ b/packages/renderless/src/tabs-mf/vue.ts
@@ -1,28 +1,65 @@
 import { random } from '../common/string'
-import { setActive, addItem, addNav, scrollTo, clickMore, removeItem, changeCurrentName } from './index'
+import {
+  setActive,
+  addItem,
+  addNav,
+  scrollTo,
+  clickMore,
+  removeItem,
+  changeCurrentName,
+  beforeCarouselSwipe,
+  canLeave,
+  clearOtherTabSwipeScroll,
+  computedSwipeable,
+  observeTabSwipeSize,
+  unobserveTabSwipeSize
+} from './index'
 
-export const api = ['state', 'setActive', 'addItem', 'addNav', 'scrollTo', 'clickMore', 'removeItem']
+export const api = [
+  'state',
+  'setActive',
+  'addItem',
+  'addNav',
+  'scrollTo',
+  'clickMore',
+  'removeItem',
+  'beforeCarouselSwipe',
+  'canLeave',
+  'clearOtherTabSwipeScroll'
+]
 
-export const renderless = (props, { onMounted, onBeforeUnmount, provide, reactive, watch, computed }, { vm, emit }) => {
+export const renderless = (
+  props,
+  { onMounted, onBeforeUnmount, provide, reactive, watch, computed, nextTick },
+  { vm, emit }
+) => {
   const state = reactive({
     items: [],
     navs: [],
     currentItem: computed(() => state.items.find((item) => item.selected)),
     key: computed(() => (state.currentItem ? state.currentItem.name : random())),
-    separator: props.separator
+    separator: props.separator,
+    swipeable: computed(() => api.computedSwipeable()),
+    maxTabSwipeHeight: 0
   })
 
   const api = {}
 
   Object.assign(api, {
     state,
-    setActive: setActive({ api, state, props }),
+    setActive: setActive({ state, api }),
     addItem: addItem(state),
     addNav: addNav(state),
     scrollTo: scrollTo({ vm, state }),
-    removeItem: removeItem({ state, emit }),
+    removeItem: removeItem({ props, state, emit }),
     changeCurrentName: changeCurrentName({ state, emit }),
-    clickMore: clickMore(api)
+    clickMore: clickMore(api),
+    beforeCarouselSwipe: beforeCarouselSwipe({ api, state, vm }),
+    canLeave: canLeave(props),
+    clearOtherTabSwipeScroll: clearOtherTabSwipeScroll({ state, vm }),
+    computedSwipeable: computedSwipeable({ props, state }),
+    observeTabSwipeSize: observeTabSwipeSize({ state, vm }),
+    unobserveTabSwipeSize: unobserveTabSwipeSize({ state, vm })
   })
 
   provide('tabs', vm)
@@ -38,11 +75,14 @@ export const renderless = (props, { onMounted, onBeforeUnmount, provide, reactiv
   )
 
   onMounted(() => {
+    // 在 vue2 类似 tabSwipe0 这些动态的 ref 只能在 nextTick 中拿到
+    nextTick(() => api.observeTabSwipeSize())
     props.activeName && api.scrollTo(props.activeName)
     props.modelValue && api.scrollTo(props.modelValue)
   })
 
   onBeforeUnmount(() => {
+    api.unobserveTabSwipeSize()
     state.navs.forEach((n, i) => (state.navs[i] = null))
     state.navs.length = 0
   })
diff --git a/packages/renderless/src/tag-group/vue.ts b/packages/renderless/src/tag-group/vue.ts
index 25304aec81..1097672ce8 100644
--- a/packages/renderless/src/tag-group/vue.ts
+++ b/packages/renderless/src/tag-group/vue.ts
@@ -13,7 +13,7 @@ export const api = ['state', 'handelItemClick']
 
 export const renderless = (
   props: ITagGroupProps,
-  { onMounted, onBeforeUnmount, reactive }: ISharedRenderlessParamHooks,
+  { onMounted, onBeforeUnmount, reactive, watch }: ISharedRenderlessParamHooks,
   { vm, emit }: ITagGroupRenderlessParamUtils
 ): ITagGroupApi => {
   const delay = 100
@@ -35,6 +35,14 @@ export const renderless = (
     addResizeListener(vm.$refs.tagGroup, debounce(delay, api.debouncedGetHiddenTags))
   })
 
+  // Tiny 新增，当标签组的数量发生变化也需要动态计算tip框中的tag标签数量
+  watch(
+    () => props.data.length,
+    () => {
+      api.getHiddenTags()
+    }
+  )
+
   onBeforeUnmount(() => {
     removeResizeListener(vm.$refs.tagGroup, api.debouncedGetHiddenTags)
   })
diff --git a/packages/renderless/src/time-line/index.ts b/packages/renderless/src/time-line/index.ts
index 821f231316..45c869380a 100644
--- a/packages/renderless/src/time-line/index.ts
+++ b/packages/renderless/src/time-line/index.ts
@@ -74,13 +74,13 @@ export const getStatusCls =
 export const computedData =
   ({ props, state }: Pick<ITimelineRenderlessParams, 'props' | 'state'>) =>
   (): ITimelineItem[] => {
-    if (props.data) {
+    if (props.data && props.data.length > 0) {
       return state.isReverse
         ? props.data.map((item, i) => ({ ...props.data[props.data.length - 1 - i], index: i }))
         : props.data.map((item, i) => ({ ...item, index: i }))
     }
 
-    return state.timelineItems
+    return state.itemsArray
   }
 
 export const computedCurrent =
@@ -126,6 +126,7 @@ export const computedWrapperClass =
     return wrapperClass
   }
 
+// 仅mobile 使用
 export const toggleFold =
   ({ props }) =>
   (node: ITimelineItem): boolean => {
diff --git a/packages/renderless/src/time-line/vue.ts b/packages/renderless/src/time-line/vue.ts
index f47655263d..a359c40403 100644
--- a/packages/renderless/src/time-line/vue.ts
+++ b/packages/renderless/src/time-line/vue.ts
@@ -29,8 +29,7 @@ import type {
   ITimelineProps,
   ITimelineRenderlessParamUtils,
   ITimelineState,
-  ISharedRenderlessParamHooks,
-  ITimelineItem
+  ISharedRenderlessParamHooks
 } from '@/types'
 
 export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDate', 'changeStatus', 'toggleFold']
@@ -38,12 +37,13 @@ export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDat
 export const renderless = (
   props: ITimelineProps,
   { computed, reactive, provide, watch }: ISharedRenderlessParamHooks,
-  { t, emit, constants, designConfig }: ITimelineRenderlessParamUtils
+  { t, emit, constants }: ITimelineRenderlessParamUtils
 ): ITimelineApi => {
   const api = {} as ITimelineApi
   const state: ITimelineState = reactive({
+    // 当标签式使用时，记录有多少个 item 的标签
+    itemsArray: [],
     nodes: computed(() => api.computedData()),
-    timelineItems: [],
     current: computed(() => api.computedCurrent()),
     isReverse: computed(() => api.computedIsReverse()),
     stackNodes: computed(() => (state.showAll ? state.nodes : api.computedStackNodes())),
@@ -69,18 +69,7 @@ export const renderless = (
     toggleFold: toggleFold({ props })
   })
 
-  provide('nodesInject', { timelineItems: state.timelineItems, nodes: state.nodes, props })
-
-  watch(
-    () => state.timelineItems,
-    (newVal: ITimelineItem[]) => {
-      newVal.forEach((item, i) => (item.index = i))
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  )
+  provide('nodesInject', { state, props })
 
   return api
 }
diff --git a/packages/renderless/src/time/index.ts b/packages/renderless/src/time/index.ts
index 4f580b023d..24fb84e365 100644
--- a/packages/renderless/src/time/index.ts
+++ b/packages/renderless/src/time/index.ts
@@ -36,9 +36,8 @@ export const watchVisible =
   ({ nextTick, vm, state, api }) =>
   (value) => {
     if (value) {
-      state.oldValue = state.value
-
       nextTick(() => {
+        state.oldValue = state.value
         vm.$refs.spinner.emitSelectRange('hours')
         api.adjustSpinners()
       })
diff --git a/packages/renderless/src/timeline-item/index.ts b/packages/renderless/src/timeline-item/index.ts
index 5696f05f25..b946f4636f 100644
--- a/packages/renderless/src/timeline-item/index.ts
+++ b/packages/renderless/src/timeline-item/index.ts
@@ -39,18 +39,18 @@ export const computedWidth =
   }
 
 export const handleClick =
-  ({ emit, state }: Pick<ITimelineItemRenderlessParams, 'emit' | 'state'>) =>
+  ({ emit, state, props }: Pick<ITimelineItemRenderlessParams, 'emit' | 'state' | 'props'>) =>
   (node: ITimelineItem): void => {
-    const { index } = node || {}
+    const index = props.nodeIndex
     if (!node.disabled) {
       emit('click', state.isReverse ? state.nodesLength - index - 1 : index, node)
     }
   }
 
 export const getStatusCls =
-  ({ constants, state }: Pick<ITimelineItemRenderlessParams, 'constants' | 'state'>) =>
+  ({ constants, state, props }: Pick<ITimelineItemRenderlessParams, 'constants' | 'state' | 'props'>) =>
   (node: ITimelineItem): ITimelineStatusCls => {
-    const { index } = node
+    const index = props.nodeIndex
 
     const { PROCESS_DONE_CLS, PROCESS_CUR_CLS, PROCESS_WAIT_CLS, PROCESS_DISABLED_CLS, PROCESS_ERROR_CLS } = constants
     const cls = {}
@@ -119,7 +119,7 @@ export const computedIconClass =
 export const computedItemStyle =
   ({ props, state, api }: Pick<ITimelineItemRenderlessParams, 'props' | 'state' | 'api'>) =>
   (): { width?: string | number; height?: string | number; flex?: string } | null => {
-    const { index } = props.node
+    const index = props.nodeIndex
     const { computedSpace, nodesLength } = state
     const { textPosition, vertical } = api.rootProps
 
diff --git a/packages/renderless/src/timeline-item/vue.ts b/packages/renderless/src/timeline-item/vue.ts
index c511f553d0..b2ddb4052a 100644
--- a/packages/renderless/src/timeline-item/vue.ts
+++ b/packages/renderless/src/timeline-item/vue.ts
@@ -35,16 +35,26 @@ export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDat
 
 export const renderless = (
   props: ITimelineItemProps,
-  { computed, reactive, inject }: ISharedRenderlessParamHooks,
+  { computed, reactive, inject, onUnmounted }: ISharedRenderlessParamHooks,
   { t, emit, constants }: ITimelineItemRenderlessParamUtils
 ): ITimelineItemApi => {
   const api = {} as ITimelineItemApi
 
-  const { timelineItems, nodes, props: rootProps } = inject('nodesInject') as ITimelineInject
-  timelineItems.push(props.node)
+  const { state: rootState, props: rootProps } = inject('nodesInject') as ITimelineInject
+
+  // 标签式使用时， 需要把自身回传给rootProps
+  if (!rootState.itemsArray.includes(props.node)) {
+    rootState.itemsArray.push(props.node)
+  }
+
+  onUnmounted(() => {
+    if (rootState.itemsArray.includes(props.node)) {
+      rootState.itemsArray.splice(rootState.itemsArray.indexOf(props.node), 1)
+    }
+  })
 
   const state: ITimelineItemState = reactive({
-    nodesLength: computed(() => nodes.length),
+    nodesLength: computed(() => rootState.nodes.length),
     current: computed(() => api.computedCurrent()),
     isReverse: computed(() => api.computedIsReverse()),
     computedSpace: computed(() => api.computedWidth(props.space || api.rootProps.space)),
@@ -64,8 +74,8 @@ export const renderless = (
     computedItemStyle: computedItemStyle({ props, state, api }),
     computedWidth: computedWidth(),
     getStatus: getStatus({ state, t }),
-    handleClick: handleClick({ emit, state }),
-    getStatusCls: getStatusCls({ constants, state }),
+    handleClick: handleClick({ emit, state, props }),
+    getStatusCls: getStatusCls({ constants, state, props }),
     computedIconClass: computedIconClass({ props, api })
   })
 
diff --git a/packages/renderless/src/tree-node/vue.ts b/packages/renderless/src/tree-node/vue.ts
index 681c39690d..a58d66b7ce 100644
--- a/packages/renderless/src/tree-node/vue.ts
+++ b/packages/renderless/src/tree-node/vue.ts
@@ -79,6 +79,7 @@ const initState = ({ reactive, treeRoot, props, emitter, $parentEmitter, vm, api
     emitter: emitter(),
     parentEmitter: $parentEmitter,
     isSaaSTheme: (props.theme || vm.theme) === 'saas',
+    props: treeRoot.props,
     computedExpandIcon: computed(() => api.computedExpandIcon(treeRoot, state)),
     computedIndent: computed(() => api.computedIndent(props, state))
   })
@@ -110,7 +111,7 @@ const initApi = ({ api, state, dispatch, broadcast, vm, props, treeRoot, nextTic
     watchIndeterminate: watchIndeterminate({ api, props }),
     watchChecked: watchChecked({ api, props }),
     openEdit: openEdit({ state, vm }),
-    addNode: addNode({ state, props, api }),
+    addNode: debounce(500, true, addNode({ state, props, api })),
     saveEdit: saveEdit({ state }),
     deleteNode: deleteNode({ state }),
     handleChildNodeExpand: handleChildNodeExpand(state),
diff --git a/packages/renderless/src/tree/index.ts b/packages/renderless/src/tree/index.ts
index 93e75a04d7..65612e4af4 100644
--- a/packages/renderless/src/tree/index.ts
+++ b/packages/renderless/src/tree/index.ts
@@ -18,6 +18,8 @@ import { on, off } from '../common/deps/dom'
 import { getDataset } from '../common/dataset'
 import { copyArray } from '../common/object'
 
+import { log } from '../common'
+
 export const setChildren = (props) => (data) => (props.data = data)
 
 export const getChildren = () => (props) => props.data
@@ -794,9 +796,25 @@ export const saveNode =
   }
 
 export const addNode =
-  ({ api }) =>
+  ({ api, props, state }) =>
   (node) => {
-    const newNode = { label: '' }
+    let nodeId = 0
+
+    if (typeof props.editConfig.initNodeIdMethod === 'function') {
+      nodeId = props.editConfig.initNodeIdMethod(node)
+    } else {
+      nodeId = state.newNodeId
+
+      state.newNodeId++
+    }
+
+    if (state.allNodeKeys.includes(nodeId) && !props.editConfig.noWarning) {
+      log.logger.warn(`the ${props.nodeKey || 'id'} ${nodeId} is already exists. Please check.`)
+    }
+
+    state.allNodeKeys.push(nodeId)
+
+    const newNode = { label: '', [props.nodeKey || 'id']: nodeId }
     const isLeafField = node.store && node.store.props.isLeaf
 
     if (isLeafField) {
@@ -890,10 +908,27 @@ export const openEdit =
     state.action.show = true
     state.action.data = copyArray(props.data)
 
+    if (!state.allNodeKeys.length) {
+      getAllNodeKeys(state.action.data, state.allNodeKeys, props.nodeKey || 'id', props.props.children || 'children')
+    }
+
     api.watchData(state.action.data)
     emit('open-edit')
   }
 
+const getAllNodeKeys = (node, nodeKeys, nodeKey, children) => {
+  if (Array.isArray(node)) {
+    node.forEach((item) => {
+      if (item[nodeKey] || item[nodeKey] !== 0) {
+        nodeKeys.push(item[nodeKey])
+      }
+      if (item[children]) {
+        getAllNodeKeys(item[children], nodeKeys, nodeKey, children)
+      }
+    })
+  }
+}
+
 export const closeEdit =
   ({ props, state, api, emit }) =>
   () => {
diff --git a/packages/renderless/src/tree/vue.ts b/packages/renderless/src/tree/vue.ts
index d46d8f50cf..21662023cf 100644
--- a/packages/renderless/src/tree/vue.ts
+++ b/packages/renderless/src/tree/vue.ts
@@ -79,6 +79,7 @@ import {
   handleClickPlainNode,
   setCheckedByNodeKey
 } from './index'
+import { random } from '../common/string'
 
 export const api = [
   'state',
@@ -173,7 +174,9 @@ const initState = ({ reactive, emitter, props, computed, api }) => {
       deleteData: [],
       editData: []
     },
-    plainNodeStore: {}
+    newNodeId: Math.floor(random() * 10000),
+    plainNodeStore: {},
+    allNodeKeys: []
   })
 
   return state
@@ -283,7 +286,7 @@ export const renderless = (
     cancelDelete: cancelDelete({ state }),
     openEdit: openEdit({ props, state, api, emit }),
     saveNode: saveNode({ state, emit, api }),
-    addNode: addNode({ api }),
+    addNode: addNode({ api, props, state }),
     editNode: editNode({ state }),
     closeEdit: closeEdit({ props, state, api, emit }),
     saveEdit: saveEdit({ props, state, emit }),
diff --git a/packages/renderless/src/user/index.ts b/packages/renderless/src/user/index.ts
index f442b5c835..ee51c486b8 100644
--- a/packages/renderless/src/user/index.ts
+++ b/packages/renderless/src/user/index.ts
@@ -664,12 +664,17 @@ export const filter =
     if (props.multiple && props.hideSelected) {
       const selectedUsers = state.user.map((value) => (typeof value === 'string' ? value.toLocaleLowerCase() : value))
 
-      return state.options.filter((user) => {
-        return !~selectedUsers.indexOf(
+      return state.options.map((user) => {
+        const _show = !~selectedUsers.indexOf(
           typeof user[state.valueField] === 'string'
             ? user[state.valueField].toLocaleLowerCase()
-            : user[state.textField]
+            : user[state.valueField]
         )
+
+        return {
+          ...user,
+          _show
+        }
       })
     }
 
diff --git a/packages/renderless/src/year-table/index.ts b/packages/renderless/src/year-table/index.ts
index 827de690e3..870600d222 100644
--- a/packages/renderless/src/year-table/index.ts
+++ b/packages/renderless/src/year-table/index.ts
@@ -11,7 +11,6 @@
  */
 
 import { toDate } from '../common/date'
-import { hasClass } from '../common/deps/dom'
 import { range, nextDate, getDayCountOfYear } from '../common/deps/date-util'
 import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from '../date-table'
 import { DATEPICKER } from '../common'
@@ -24,7 +23,7 @@ const datesInYear = (year) => {
 }
 
 export const getCellStyle =
-  ({ props }) =>
+  ({ props, state }) =>
   (cell) => {
     const { defaultValue } = props
     const year = cell.text
@@ -53,6 +52,10 @@ export const getCellStyle =
       style[DATEPICKER.EndDate] = true
     }
 
+    for (const key in style) {
+      state[key] = style[key]
+    }
+
     return style
   }
 
@@ -162,7 +165,7 @@ export const handleYearTableClick =
     const { selectionMode } = props
 
     if (target.tagName === 'A') {
-      if (hasClass(target.parentNode.parentNode, 'disabled')) {
+      if (target.hasAttribute('aria-disabled')) {
         return
       }
 
diff --git a/packages/renderless/src/year-table/vue.ts b/packages/renderless/src/year-table/vue.ts
index 9ceaf5b3e3..202f339e77 100644
--- a/packages/renderless/src/year-table/vue.ts
+++ b/packages/renderless/src/year-table/vue.ts
@@ -23,7 +23,7 @@ export const renderless = (props, { computed, reactive, watch }, { emit, vm }) =
 
   Object.assign(api, {
     state,
-    getCellStyle: getCellStyle({ props }),
+    getCellStyle: getCellStyle({ props, state }),
     handleYearTableClick: handleYearTableClick({ emit, props, state }),
     markRange: markRange({ props, state }),
     watchDate: watchDate({ api, props }),
diff --git a/packages/renderless/types/dialog-box.type.ts b/packages/renderless/types/dialog-box.type.ts
index f0bd08fa74..97e4721301 100644
--- a/packages/renderless/types/dialog-box.type.ts
+++ b/packages/renderless/types/dialog-box.type.ts
@@ -23,7 +23,6 @@ import type {
   handleClose,
   watchVisible,
   computedStyle,
-  computedBodyStyle,
   mounted,
   unMounted,
   computedAnimationName,
@@ -79,7 +78,6 @@ export interface IDialogBoxApi {
   handleClose: ReturnType<typeof handleClose>
   watchVisible: ReturnType<typeof watchVisible>
   computedStyle: ReturnType<typeof computedStyle>
-  computedBodyStyle: ReturnType<typeof computedBodyStyle>
   mounted: ReturnType<typeof mounted>
   unMounted: ReturnType<typeof unMounted>
   computedAnimationName: ReturnType<typeof computedAnimationName>
diff --git a/packages/renderless/types/drawer.type.ts b/packages/renderless/types/drawer.type.ts
index 5f997e3bb6..3ae261ca69 100644
--- a/packages/renderless/types/drawer.type.ts
+++ b/packages/renderless/types/drawer.type.ts
@@ -1,9 +1,9 @@
-import type { ComputedRef, ExtractPropTypes } from 'vue'
-import type { drawerProps } from '@/drawer/src'
+import type { ExtractPropTypes } from 'vue'
+import type { drawerProps, $constants } from '@/drawer/src'
 import type {
+  open,
   close,
   watchVisible,
-  watchToggle,
   confirm,
   mousedown,
   mouseup,
@@ -12,16 +12,17 @@ import type {
   removeDragEvent,
   showScrollbar,
   hideScrollbar,
-  watchVisibleNotImmediate,
-  computedWidth
+  computedWidth,
+  handleClose
 } from '../src/drawer'
+import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
 
 export interface IDrawerState {
-  toggle: boolean
+  visible: boolean
   width: number
   height: number
   dragEvent: { x: number; y: number; isDrag: boolean; offsetWidth: number; offsetHeight: number }
-  computedWidth: ComputedRef<string>
+  computedWidth: string
   btnOrderReversed: boolean
 }
 
@@ -29,6 +30,7 @@ export type IDrawerProps = ExtractPropTypes<typeof drawerProps>
 
 export interface IDrawerApi {
   state: IDrawerState
+  open: ReturnType<typeof open>
   confirm: ReturnType<typeof confirm>
   close: ReturnType<typeof close>
   mousemove: ReturnType<typeof mousemove>
@@ -37,11 +39,20 @@ export interface IDrawerApi {
   addDragEvent: ReturnType<typeof addDragEvent>
   removeDragEvent: ReturnType<typeof removeDragEvent>
   watchVisible: ReturnType<typeof watchVisible>
-  watchToggle: ReturnType<typeof watchToggle>
   showScrollbar: ReturnType<typeof showScrollbar>
   hideScrollbar: ReturnType<typeof hideScrollbar>
-  watchVisibleNotImmediate: ReturnType<typeof watchVisibleNotImmediate>
   computedWidth: ReturnType<typeof computedWidth>
+  handleClose: ReturnType<typeof handleClose>
 }
 
 export type IDrawerCT = ReturnType<typeof drawerProps._constants.default>
+
+export type IDrawerConstants = typeof $constants
+
+export type IDrawerRenderlessParams = ISharedRenderlessFunctionParams<IDrawerConstants> & {
+  api: IDrawerApi
+  state: IDrawerState
+  props: IDrawerProps
+}
+
+export type IDrawerRenderlessParamUtils = ISharedRenderlessParamUtils<IDrawerConstants>
diff --git a/packages/renderless/types/timeline-item.type.ts b/packages/renderless/types/timeline-item.type.ts
index 7f921a1604..9ab553627a 100644
--- a/packages/renderless/types/timeline-item.type.ts
+++ b/packages/renderless/types/timeline-item.type.ts
@@ -78,7 +78,6 @@ export interface ITimelineItem {
 }
 
 export interface ITimelineInject {
-  timelineItems: ITimelineItem[]
-  nodes: ITimelineItem[]
+  state: ITimelineItem[]
   props: ITimelineProps
 }
diff --git a/packages/theme-mobile/package.json b/packages/theme-mobile/package.json
index 03bcd46aff..72b9741c93 100644
--- a/packages/theme-mobile/package.json
+++ b/packages/theme-mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme-mobile",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.css",
diff --git a/packages/theme-mobile/src/action-sheet/index.less b/packages/theme-mobile/src/action-sheet/index.less
index be33288598..38fee3d87f 100644
--- a/packages/theme-mobile/src/action-sheet/index.less
+++ b/packages/theme-mobile/src/action-sheet/index.less
@@ -19,8 +19,10 @@
 .@{action-sheet-prefix-cls} {
   .component-css-vars-action-sheet();
 
-  position: relative;
-  height: 100%;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
   &__mask {
     top: 0;
     right: 0;
@@ -101,7 +103,6 @@
 
   &__action {
     width: 100%;
-    position: absolute;
     background-color: var(--ti-mobile-action-sheet-action-bg-color, #fff);
   }
 }
diff --git a/packages/theme-saas/package.json b/packages/theme-saas/package.json
index b6fe0c51a5..f804c9f1d9 100644
--- a/packages/theme-saas/package.json
+++ b/packages/theme-saas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme-saas",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.css",
@@ -101,4 +101,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/theme-saas/src/button/index.less b/packages/theme-saas/src/button/index.less
index da5e26ac6a..9624f6d36e 100644
--- a/packages/theme-saas/src/button/index.less
+++ b/packages/theme-saas/src/button/index.less
@@ -256,7 +256,7 @@
   }
 
   &&--text {
-    .button-text(theme('colors.color.brand.DEFAULT'), theme('colors.color.brand.hover.DEFAULT'), theme('colors.color.brand.active'), theme('colors.color.brand.disabled'));
+    .button-text(theme('colors.color.brand.DEFAULT'), theme('colors.color.brand.hover.DEFAULT'), theme('colors.color.brand.active'), theme('colors.color.brand.disabled'), theme('colors.color.text.primary'), theme('colors.color.text.disabled'));
   }
 
   &&--large {
diff --git a/packages/theme-saas/src/chart-core/index.less b/packages/theme-saas/src/chart-core/index.less
index f6c931a000..629d276cb4 100644
--- a/packages/theme-saas/src/chart-core/index.less
+++ b/packages/theme-saas/src/chart-core/index.less
@@ -2,6 +2,11 @@
 
 @chart-prefix-cls: ~'@{css-prefix}chart';
 
+.hui-chart {
+  @apply relative;
+  @apply h-full;
+}
+
 .@{chart-prefix-cls} {
   &-data-empty {
     @apply absolute;
@@ -70,4 +75,4 @@
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -120px;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/theme-saas/src/checkbox/index.less b/packages/theme-saas/src/checkbox/index.less
index c67b87ee9b..cd2bf8b437 100644
--- a/packages/theme-saas/src/checkbox/index.less
+++ b/packages/theme-saas/src/checkbox/index.less
@@ -36,8 +36,6 @@
     }
   }
 
-
-
   &.is-bordered {
     @apply py-2 px-4;
     @apply rounded-sm;
diff --git a/packages/theme-saas/src/collapse-item/index.less b/packages/theme-saas/src/collapse-item/index.less
index 8a731bf333..7b802366e1 100644
--- a/packages/theme-saas/src/collapse-item/index.less
+++ b/packages/theme-saas/src/collapse-item/index.less
@@ -53,12 +53,6 @@
       @apply border-b-transparent;
     }
 
-    > svg {
-      @apply ~'-mt-px';
-      @apply text-xs;
-      @apply fill-color-icon-secondary;
-    }
-
     .@{collapse-item-prefix-cls}__word-overflow {
       @apply whitespace-nowrap;
       @apply overflow-hidden;
@@ -71,7 +65,7 @@
     }
 
     &:has(.@{collapse-item-prefix-cls}__word-overflow:hover) {
-      .@{collapse-item-prefix-cls}__arrow {
+      .@{collapse-item-prefix-cls}__arrow svg {
         @apply fill-color-brand;
       }
     }
@@ -100,7 +94,9 @@
     @apply cursor-pointer;
 
     &:hover {
-      @apply fill-color-brand;
+      svg {
+        @apply fill-color-brand;
+      }
     }
 
     &.is-active {
@@ -124,4 +120,12 @@
     @apply text-color-text-primary;
     @apply leading-5;
   }
+
+  // 相对aui,dom结构有所调整，将tiny-collapse-item__header > svg 样式移到此类名下
+  &__arrow-icon {
+    @apply ~'-mt-px';
+    @apply text-xs;
+    @apply fill-color-icon-secondary;
+    @apply align-baseline;
+  }
 }
diff --git a/packages/theme-saas/src/dialog-box/index.less b/packages/theme-saas/src/dialog-box/index.less
index 5bb7226208..5854f0ce27 100644
--- a/packages/theme-saas/src/dialog-box/index.less
+++ b/packages/theme-saas/src/dialog-box/index.less
@@ -29,10 +29,12 @@
     @apply top-0;
     @apply w-screen;
     @apply h-screen;
-    .@{dialog-box-prefix-cls}__footer {
-      @apply w-screen;
-      @apply fixed;
-      @apply bottom-0;
+    @apply flex;
+    @apply flex-col;
+
+    .@{dialog-box-prefix-cls}__body {
+      @apply ~"max-h-[none]";
+      @apply flex-auto;
     }
   }
 
@@ -42,6 +44,7 @@
       @apply text-center;
     }
   }
+
   &.is-right-slide {
     @apply flex;
     @apply flex-col;
@@ -122,10 +125,6 @@
     }
   }
 
-  &.is-fullscreen &__body {
-    max-height: calc(100vh - theme('spacing.28'));
-  }
-
   & &__footer {
     text-align: inherit;
     @apply pt-4 pr-6 pb-4 pl-6;
@@ -145,21 +144,8 @@
   @apply overflow-hidden;
 }
 
-&.popup-parent--hidden {
-  @apply overflow-hidden;
-}
-
-body:not(.popup-parent--hidden) {
-  .v-modal {
-    @apply pointer-events-none;
-  }
-  .@{dialog-box-prefix-cls}__wrapper {
-    @apply pointer-events-none;
-
-    .@{dialog-box-prefix-cls} {
-      @apply pointer-events-auto;
-    }
-  }
+.dialog-box__scroll-lock {
+  overflow: hidden;
 }
 
 .v-modal {
diff --git a/packages/theme-saas/src/drawer/index.less b/packages/theme-saas/src/drawer/index.less
index c9bcd2c179..a1e8276539 100644
--- a/packages/theme-saas/src/drawer/index.less
+++ b/packages/theme-saas/src/drawer/index.less
@@ -56,10 +56,6 @@
       @apply ~'border-l-0.5';
       @apply rounded-l-lg;
 
-      .@{drawer-prefix-cls}__drag-bar {
-        @apply -left-1;
-      }
-
       &.toggle {
         @apply translate-x-0;
       }
@@ -72,10 +68,6 @@
       @apply ~'border-r-0.5';
       @apply rounded-r-lg;
 
-      .@{drawer-prefix-cls}__drag-bar {
-        @apply -right-1;
-      }
-
       &.toggle {
         @apply translate-x-0;
       }
@@ -110,7 +102,36 @@
       @apply absolute;
       @apply top-0;
       @apply w-2;
-      @apply cursor-e-resize;
+
+      &.p-top-Bottom {
+        @apply w-full;
+        @apply h-2;
+        @apply left-0;
+        @apply cursor-n-resize;
+      }
+
+      &.p-left-Right {
+        @apply h-full;
+        @apply top-0;
+        @apply w-2;
+        @apply cursor-e-resize;
+      }
+
+      &.p-left {
+        @apply -right-1;
+      }
+
+      &.p-right {
+        @apply -left-1;
+      }
+
+      &.p-top {
+        @apply -bottom-1;
+      }
+
+      &.p-bottom {
+        @apply -top-1;
+      }
     }
 
     .@{drawer-prefix-cls}__box {
@@ -200,4 +221,201 @@
       }
     }
   }
+
+  .drawer-slide-right-enter-active {
+    animation: slideRightIn 0.3s linear;
+  }
+
+  .drawer-slide-right-leave-active {
+    animation: slideRightout 0.3s linear;
+  }
+
+  @keyframes slideRightIn {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: translateX(50%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+
+
+  @keyframes slideRightout {
+    0% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: translateX(50%);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  .drawer-slide-left-enter-active {
+    animation: slideLeft 0.3s linear;
+  }
+
+  .drawer-slide-left-leave-active {
+    animation: slideLeftout 0.3s linear;
+  }
+
+  @keyframes slideLeft {
+    0% {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: translateX(-50%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+
+  @keyframes slideLeftout {
+    0% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: translateX(-50%);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+  }
+
+  .drawer-slide-bottom-enter-active {
+    animation: slideBottom 0.3s linear;
+  }
+
+  .drawer-slide-bottom-leave-active {
+    animation: slideBottomout 0.3s linear;
+  }
+
+  @keyframes slideBottom {
+    0% {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: translateY(50%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+  }
+
+  @keyframes slideBottomout {
+    0% {
+      opacity: 0;
+      transform: translateY(0%);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: translateY(50%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(100%);
+    }
+  }
+
+  .drawer-slide-top-enter-active {
+    animation: slideTop 0.3s linear;
+  }
+
+  .drawer-slide-top-leave-active {
+    animation: slideTopout 0.3s linear;
+  }
+
+  @keyframes slideTop {
+    0% {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: translateY(-50%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+  }
+
+  @keyframes slideTopout {
+    0% {
+      opacity: 0;
+      transform: translateY(0%);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: translateY(-50%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(-100%);
+    }
+  }
+
+  .drawer-fade-enter-active {
+    animation: drawer-fade-in 0.3s linear;
+  }
+
+  .drawer-fade-leave-active {
+    animation: drawer-fade-out 0.3s linear;
+  }
+
+  @keyframes drawer-fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes drawer-fade-out {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
 }
diff --git a/packages/theme-saas/src/fluent-editor/index.less b/packages/theme-saas/src/fluent-editor/index.less
index 59236e9341..a24ccfbf03 100644
--- a/packages/theme-saas/src/fluent-editor/index.less
+++ b/packages/theme-saas/src/fluent-editor/index.less
@@ -146,8 +146,6 @@
       }
 
       .ql-direction {
-        @apply pt-1;
-
         &:not(.ql-active) {
           > div:first-child {
             svg {
diff --git a/packages/theme-saas/src/form/index.less b/packages/theme-saas/src/form/index.less
index cc5f3900d7..99377a8505 100644
--- a/packages/theme-saas/src/form/index.less
+++ b/packages/theme-saas/src/form/index.less
@@ -61,12 +61,16 @@
       @apply inline-block;
       @apply text-left;
       @apply leading-5;
-      @apply pt-0 pr-0 ~'pb-0.5' pl-0;
+      @apply pt-0 pr-0 pb-1 pl-0;
       @apply h-5;
       @apply box-content;
       @apply w-full;
       @apply truncate;
     }
+
+    @{form-item-prefix-cls} {
+      @apply mb-4;
+    }
   }
 
   &--label-top & {
@@ -123,7 +127,7 @@
 
   &.is-display-only {
     .tiny-form-item__label {
-      @apply leading-normal;
+      @apply ~"leading-5.5";
       @apply h-auto;
       vertical-align: inherit;
     }
@@ -159,6 +163,14 @@
         @apply p-0;
         @apply border-none;
       }
+      .@{input-prefix-cls}-display-only {
+        @apply inline-block;
+        @apply ~"leading-5.5";
+      }
+      .@{textarea-prefix-cls}-display-only {
+        @apply inline-block;
+        @apply ~"leading-5.5";
+      }
     }
     .@{form-item-prefix-cls}--medium .@{form-item-prefix-cls}__content,
     .@{form-item-prefix-cls}--small .@{form-item-prefix-cls}__content,
diff --git a/packages/theme-saas/src/grid-toolbar/index.less b/packages/theme-saas/src/grid-toolbar/index.less
index ac9395a23a..590fd6dcb1 100644
--- a/packages/theme-saas/src/grid-toolbar/index.less
+++ b/packages/theme-saas/src/grid-toolbar/index.less
@@ -153,27 +153,38 @@
                 }
               }
 
-              ul {
+              .column-list-panel {
                 height: calc(100% - theme('spacing.5'));
                 @apply overflow-y-auto;
 
-                li {
-                  @apply h-8;
-                  @apply flex;
-                  @apply py-0;
-                  @apply ~'pl-1.5';
-                  @apply pr-2;
-                  @apply justify-between;
-                  @apply items-center;
+                .column-list-item {
+                  @apply grid;
+                  @apply h-auto;
+                  @apply overflow-hidden;
+                  @apply cursor-pointer;
+                  @apply origin-center;
+                  @apply ~"min-h-[theme(spacing.8)]";
+                  @apply transition-all;
+                  @apply duration-300;
+                  @apply ease-in-out;
+                  grid-template-rows: 1fr;
 
-                  &.show-dropdown {
-                    .dropdown-column .set-btn {
-                      @apply visible;
-                    }
+                  &.item-collapse {
+                    grid-template-rows: 0fr;
+                  }
+
+                  > div {
+                    @apply w-full;
+                    @apply min-h-0;
+                  }
+
+                  &.show-dropdown .dropdown-column .set-btn {
+                    @apply visible;
                   }
 
                   .sort-number {
                     @apply w-10;
+                    @apply text-center;
 
                     .sort-number-display {
                       @apply h-6;
@@ -192,7 +203,7 @@
                   .name {
                     @apply flex-1;
                     @apply my-0;
-                    @apply mx-4;
+                    @apply mx-2;
                     @apply overflow-hidden;
                     @apply whitespace-nowrap;
                     @apply text-ellipsis;
@@ -204,6 +215,10 @@
                     }
                   }
 
+                  .child-name {
+                    @apply pl-8;
+                  }
+
                   .close-icon {
                     @apply ~'ml-4.5';
                     @apply cursor-pointer;
@@ -261,36 +276,59 @@
                     @apply w-16;
                   }
 
-                  &:hover {
-                    @apply bg-color-bg-2;
+                  .column-container {
+                    @apply flex;
+                    @apply items-center;
 
-                    .close-icon {
-                      @apply visible;
+                    &.with-padding {
+                      @apply pr-2;
+                      @apply ~'pl-1.5';
                     }
 
-                    .close-icon.visibility-hidden {
-                      @apply invisible;
+                    .icon-expand {
+                      @apply ml-1;
+                      @apply -mr-1;
+                      @apply rotate-0;
+                      @apply transition-transform;
+                      @apply duration-300;
+                      @apply ease-in-out;
                     }
 
-                    .close-icon svg {
-                      @apply fill-color-none;
+                    .icon-collapse {
+                      @apply rotate-90;
                     }
 
-                    .set-btn:not(.visibility-hidden) {
-                      @apply visible;
-                    }
+                    &:hover {
+                      @apply bg-color-bg-2;
 
-                    .@{input-prefix-cls} {
-                      &:hover .@{input-prefix-cls}__inner {
-                        @apply bg-white;
+                      .close-icon {
+                        @apply visible;
                       }
 
-                      .@{input-prefix-cls}__inner {
-                        @apply bg-color-bg-2;
+                      .close-icon.visibility-hidden {
+                        @apply invisible;
                       }
 
-                      .@{input-prefix-cls}__suffix {
-                        @apply block;
+                      .close-icon svg {
+                        @apply fill-color-none;
+                      }
+
+                      .set-btn:not(.visibility-hidden) {
+                        @apply visible;
+                      }
+
+                      .@{input-prefix-cls} {
+                        &:hover .@{input-prefix-cls}__inner {
+                          @apply bg-white;
+                        }
+
+                        .@{input-prefix-cls}__inner {
+                          @apply bg-color-bg-2;
+                        }
+
+                        .@{input-prefix-cls}__suffix {
+                          @apply block;
+                        }
                       }
                     }
                   }
@@ -303,12 +341,27 @@
               @apply ~'pr-4.5';
               @apply pb-4;
               @apply pl-6;
+
+              .tiny-tree {
+                @apply p-0;
+                @apply -ml-2;
+                @apply ~'-mr-1.5';
+              }
+
+              .multi-check-all-btn {
+                @apply ~'mb-2.5';
+                @apply ml-5;
+              }
             }
 
             .right-panel {
               @apply p-5;
               @apply h-full;
               @apply box-border;
+
+              .child-dropdown {
+                @apply mr-10;
+              }
             }
 
             .group-label {
@@ -366,11 +419,11 @@
       @apply text-right;
       @apply ~'pr-2.5';
 
-      >button {
+      > button {
         @apply my-0 mx-1;
       }
 
-      >span {
+      > span {
         @apply my-0 mx-1;
       }
     }
@@ -379,7 +432,7 @@
 
 .@{popover-prefix-cls}.grid-toolbar-template-popover {
   .radio-box {
-    @apply ~'mb-3.5';
+    @apply ~"mb-3.5";
   }
 
   .btn-box {
diff --git a/packages/theme-saas/src/grid/filter.less b/packages/theme-saas/src/grid/filter.less
index 0e331de6de..fd21ebcdce 100644
--- a/packages/theme-saas/src/grid/filter.less
+++ b/packages/theme-saas/src/grid/filter.less
@@ -260,7 +260,8 @@
           @apply my-4;
           @apply mx-0;
 
-          .@{grid-prefix-cls}-button.type__button {
+          // Tiny 新增，使用tiny-button组件，删除表格内置button组件
+          .@{css-prefix}button[type="button"] {
             @apply m-0;
             @apply ml-2;
             @apply rounded;
diff --git a/packages/theme-saas/src/grid/header.less b/packages/theme-saas/src/grid/header.less
index 08e3136fb3..7c61a23a09 100644
--- a/packages/theme-saas/src/grid/header.less
+++ b/packages/theme-saas/src/grid/header.less
@@ -30,12 +30,6 @@
     }
   }
 
-  &.is__editable {
-    .@{grid-cell-prefix-cls} {
-      @apply pl-5;
-    }
-  }
-
   // 在表格个性化场景，动态的设置冻结列，这里需要在非冻结列情况下消除之前设置的left和right样式，并提升权重覆盖style属性
   &:not(.fixed__column) {
     left: unset !important;
@@ -62,15 +56,6 @@
       @apply translate-y-0;
       @apply shrink-0;
     }
-    &.is__editable {
-      .@{grid-prefix-cls}-required-icon {
-        @apply ml-5;
-        & + .@{grid-prefix-cls}-edit-icon {
-          @apply absolute;
-          @apply ~'-translate-y-2/4';
-        }
-      }
-    }
   }
 
   .@{grid-prefix-cls}-required-icon {
@@ -88,17 +73,11 @@
   }
 
   .@{grid-prefix-cls}-edit-icon {
-    @apply absolute;
-    @apply left-2;
-    @apply ~'top-1/2';
-    @apply ~'-translate-y-2/4';
-    @apply text-center;
-    @apply text-sm;
     @apply mr-1;
+    order: -1;
+    @apply text-sm;
     @apply fill-color-icon-disabled;
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      @apply ~'top-4.5';
-    }
+    @apply shrink-0;
   }
 
   .@{grid-prefix-cls}-thead-partition,
diff --git a/packages/theme-saas/src/grid/table.less b/packages/theme-saas/src/grid/table.less
index 3363d63b04..5d0624199b 100644
--- a/packages/theme-saas/src/grid/table.less
+++ b/packages/theme-saas/src/grid/table.less
@@ -989,6 +989,8 @@
           &__title:has(.tiny-grid-tree__indent:nth-last-child(2):first-child),
           &__ellipsis:has(.tiny-grid-tree__indent:nth-last-child(2):first-child) {
             @apply inline-block;
+            @apply align-middle;
+            transform: translateY(-1px);
             @apply max-w-full;
           }
         }
@@ -1182,7 +1184,7 @@
   // 表格与分页上下间距
   .@{pager-prefix-cls},
   & + .@{pager-prefix-cls} {
-    @apply pt-2;
+    @apply py-2;
   }
 
   & &__header {
@@ -1270,6 +1272,13 @@
     @apply cursor-pointer;
   }
 
+  // 解决操作图标和其他单元格文字不对齐问题
+  & &__oper-col-wrapper {
+    @apply flex;
+    @apply max-w-full;
+    @apply overflow-hidden;
+  }
+
   & &__oper-col-button {
     @apply text-sm;
     @apply cursor-pointer;
@@ -1318,4 +1327,51 @@
       }
     }
   }
+
+  &.row__drop-handle--index {
+    .@{grid-prefix-cls}__body-wrapper td.col__index {
+      @apply relative;
+
+      .row__drop-handle {
+        @apply absolute;
+        @apply left-0;
+        @apply top-0;
+        @apply w-2;
+        @apply h-full;
+        @apply cursor-grab;
+
+        &::before {
+          --row-drop-handle-bgcolor: var(--tiny-color-none, #aeaeae);
+          @apply content-[''];
+          @apply block;
+          @apply absolute;
+          @apply left-0;
+          @apply top-1/2;
+          @apply -translate-y-1/2;
+          @apply w-2;
+          @apply ~'h-3.5';
+          background-image: linear-gradient(
+              180deg,
+              var(--row-drop-handle-bgcolor) 0 2px,
+              transparent 2px 6px,
+              var(--row-drop-handle-bgcolor) 6px 8px,
+              transparent 8px 12px,
+              var(--row-drop-handle-bgcolor) 12px 14px
+            ),
+            linear-gradient(180deg, transparent, transparent),
+            linear-gradient(
+              180deg,
+              var(--row-drop-handle-bgcolor) 0 2px,
+              transparent 2px 6px,
+              var(--row-drop-handle-bgcolor) 6px 8px,
+              transparent 8px 12px,
+              var(--row-drop-handle-bgcolor) 12px 14px
+            );
+          background-position: 0 0, 2px 0, 6px 0;
+          background-size: 2px 14px, 4px 14px, 2px 14px;
+          @apply bg-no-repeat;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/theme-saas/src/grid/toolbar.less b/packages/theme-saas/src/grid/toolbar.less
index 3026746d7e..63d98ed9f0 100644
--- a/packages/theme-saas/src/grid/toolbar.less
+++ b/packages/theme-saas/src/grid/toolbar.less
@@ -13,6 +13,11 @@
 .@{grid-toolbar-prefix-cls} {
   @apply pt-3 pb-2 px-0;
 
+  // Tiny 新增，工具栏容器为空则不需要占位
+  &:empty {
+    @apply hidden;
+  }
+
   &:after {
     @apply content-[''];
     @apply block;
diff --git a/packages/theme-saas/src/images/credit-amex.png b/packages/theme-saas/src/images/credit-amex.png
deleted file mode 100644
index af3277e076..0000000000
Binary files a/packages/theme-saas/src/images/credit-amex.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-background.jpeg b/packages/theme-saas/src/images/credit-background.jpeg
deleted file mode 100644
index 892ff61288..0000000000
Binary files a/packages/theme-saas/src/images/credit-background.jpeg and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-chip.png b/packages/theme-saas/src/images/credit-chip.png
deleted file mode 100644
index 4f36e9a0e1..0000000000
Binary files a/packages/theme-saas/src/images/credit-chip.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-dinersclub.png b/packages/theme-saas/src/images/credit-dinersclub.png
deleted file mode 100644
index fc2362d68d..0000000000
Binary files a/packages/theme-saas/src/images/credit-dinersclub.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-discover.png b/packages/theme-saas/src/images/credit-discover.png
deleted file mode 100644
index 56413f6eef..0000000000
Binary files a/packages/theme-saas/src/images/credit-discover.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-jcb.png b/packages/theme-saas/src/images/credit-jcb.png
deleted file mode 100644
index a56c2bb4a8..0000000000
Binary files a/packages/theme-saas/src/images/credit-jcb.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-mastercard.png b/packages/theme-saas/src/images/credit-mastercard.png
deleted file mode 100644
index 08391bb76c..0000000000
Binary files a/packages/theme-saas/src/images/credit-mastercard.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-troy.png b/packages/theme-saas/src/images/credit-troy.png
deleted file mode 100644
index 68fe3fb786..0000000000
Binary files a/packages/theme-saas/src/images/credit-troy.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-unionpay.png b/packages/theme-saas/src/images/credit-unionpay.png
deleted file mode 100644
index 5c13a96fbe..0000000000
Binary files a/packages/theme-saas/src/images/credit-unionpay.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/credit-visa.png b/packages/theme-saas/src/images/credit-visa.png
deleted file mode 100644
index 912b8139e0..0000000000
Binary files a/packages/theme-saas/src/images/credit-visa.png and /dev/null differ
diff --git a/packages/theme-saas/src/images/grid-nodata.svg b/packages/theme-saas/src/images/grid-nodata.svg
index e0c66e5085..d6b5c30d18 100644
--- a/packages/theme-saas/src/images/grid-nodata.svg
+++ b/packages/theme-saas/src/images/grid-nodata.svg
@@ -1,6 +1,6 @@
-<svg width="101.000000" height="100.000000" viewBox="0 0 101 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="112.000000" height="95.000000" viewBox="0 0 112 95" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 	<defs>
-		<filter id="filter_1087_227102_dd" x="23.885254" y="21.320236" width="51.333008" height="56.841934" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+		<filter id="filter_1096_227209_dd" x="26.984375" y="17.600113" width="57.000000" height="63.417480" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 			<feOffset dx="0" dy="0"/>
@@ -10,149 +10,32 @@
 			<feBlend mode="normal" in2="BackgroundImageFix" result="effect_dropShadow_1"/>
 			<feBlend mode="normal" in="SourceGraphic" in2="effect_dropShadow_1" result="shape"/>
 		</filter>
-		<filter id="filter_1087_227103_dd" x="28.251953" y="25.668762" width="42.599609" height="48.144867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-			<feGaussianBlur in="BackgroundImage" stdDeviation="1.22663"/>
-			<feComposite in2="SourceAlpha" operator="in" result="effect_backgroundBlur_1"/>
-			<feBlend mode="normal" in="SourceGraphic" in2="effect_backgroundBlur_1" result="shape"/>
-		</filter>
-		<filter id="filter_1087_227113_dd" x="62.480225" y="23.031906" width="38.007812" height="50.879227" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-			<feGaussianBlur in="BackgroundImage" stdDeviation="2.52326"/>
-			<feComposite in2="SourceAlpha" operator="in" result="effect_backgroundBlur_1"/>
-			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-			<feOffset dx="1" dy="0"/>
-			<feGaussianBlur stdDeviation="2.33333"/>
-			<feComposite in2="hardAlpha" operator="out" k2="-1" k3="1"/>
-			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.73333 0 0 0 0 1 0 0 0 0.2 0"/>
-			<feBlend mode="normal" in2="effect_backgroundBlur_1" result="effect_dropShadow_2"/>
-			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-			<feOffset dx="2" dy="15"/>
-			<feGaussianBlur stdDeviation="3"/>
-			<feComposite in2="hardAlpha" operator="out" k2="-1" k3="1"/>
-			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.73333 0 0 0 0 1 0 0 0 0.047 0"/>
-			<feBlend mode="normal" in2="effect_dropShadow_2" result="effect_dropShadow_3"/>
-			<feBlend mode="normal" in="SourceGraphic" in2="effect_dropShadow_3" result="shape"/>
-		</filter>
-		<filter id="filter_1087_227114_dd" x="72.187744" y="33.709366" width="14.592285" height="14.524292" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-			<feOffset dx="0" dy="1"/>
-			<feGaussianBlur stdDeviation="0.666667"/>
-			<feComposite in2="hardAlpha" operator="out" k2="-1" k3="1"/>
-			<feColorMatrix type="matrix" values="0 0 0 0 0.35686 0 0 0 0 0.71373 0 0 0 0 1 0 0 0 0.6 0"/>
-			<feBlend mode="normal" in2="BackgroundImageFix" result="effect_dropShadow_1"/>
-			<feBlend mode="normal" in="SourceGraphic" in2="effect_dropShadow_1" result="shape"/>
-		</filter>
-		<filter id="filter_1087_227124_dd" x="63.763428" y="48.315552" width="18.757324" height="18.636749" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-			<feGaussianBlur in="BackgroundImage" stdDeviation="0.632933"/>
-			<feComposite in2="SourceAlpha" operator="in" result="effect_backgroundBlur_1"/>
-			<feBlend mode="normal" in="SourceGraphic" in2="effect_backgroundBlur_1" result="shape"/>
-		</filter>
-		<linearGradient id="paint_linear_1087_227097_0" x1="45.817886" y1="38.639534" x2="66.946739" y2="76.690063" gradientUnits="userSpaceOnUse">
+		<linearGradient id="paint_linear_1096_227225_0" x1="61.999973" y1="33.499992" x2="97.000000" y2="73.500008" gradientUnits="userSpaceOnUse">
 			<stop stop-color="#AEDBFF" stop-opacity="0.513726"/>
 			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.643137"/>
 		</linearGradient>
-		<linearGradient id="paint_linear_1087_227098_0" x1="43.506870" y1="68.466240" x2="43.506870" y2="81.098801" gradientUnits="userSpaceOnUse">
+		<linearGradient id="paint_linear_1096_227228_0" x1="56.859962" y1="68.940750" x2="56.859962" y2="80.539268" gradientUnits="userSpaceOnUse">
 			<stop stop-color="#96CEFD" stop-opacity="0.247059"/>
 			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.000000"/>
 		</linearGradient>
-		<linearGradient id="paint_linear_1087_227099_0" x1="42.260674" y1="77.426323" x2="40.508656" y2="98.220154" gradientUnits="userSpaceOnUse">
+		<linearGradient id="paint_linear_1096_227229_0" x1="53.107475" y1="79.710518" x2="52.009739" y2="87.133156" gradientUnits="userSpaceOnUse">
 			<stop stop-color="#57E3BD" stop-opacity="0.121569"/>
 			<stop offset="1.000000" stop-color="#D8D8D8" stop-opacity="0.000000"/>
 			<stop offset="1.000000" stop-color="#D8D8D8" stop-opacity="0.000000"/>
 		</linearGradient>
-		<linearGradient id="paint_linear_1087_227103_0" x1="32.416485" y1="49.741196" x2="56.310440" y2="71.404648" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#B9ECFF" stop-opacity="0.329412"/>
-			<stop offset="1.000000" stop-color="#00BBFF" stop-opacity="0.058824"/>
-		</linearGradient>
-		<linearGradient id="paint_linear_1087_227103_1" x1="43.602615" y1="32.631557" x2="49.483978" y2="73.344078" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#FFFFFF" stop-opacity="0.007843"/>
-			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.592157"/>
-		</linearGradient>
-		<linearGradient id="paint_linear_1087_227113_0" x1="74.733574" y1="32.432682" x2="89.488007" y2="49.911118" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#0067D0"/>
-			<stop offset="0.195613" stop-color="#0067D0"/>
-			<stop offset="1.000000" stop-color="#0067D0" stop-opacity="0.262745"/>
-		</linearGradient>
-		<linearGradient id="paint_linear_1087_227113_1" x1="71.436180" y1="39.971512" x2="82.658440" y2="48.916435" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#B9ECFF" stop-opacity="0.329412"/>
-			<stop offset="1.000000" stop-color="#00BBFF" stop-opacity="0.058824"/>
-		</linearGradient>
-		<linearGradient id="paint_linear_1087_227113_2" x1="76.689964" y1="32.906876" x2="79.452255" y2="49.717236" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#A9D1F1"/>
-			<stop offset="1.000000" stop-color="#FFFFFF"/>
-		</linearGradient>
-		<linearGradient id="paint_linear_1087_227114_0" x1="77.626961" y1="34.709366" x2="84.780098" y2="45.233654" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#FFFFFF"/>
-			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.400000"/>
-		</linearGradient>
-		<linearGradient id="paint_linear_1087_227114_1" x1="75.559151" y1="39.971508" x2="82.603485" y2="44.161652" gradientUnits="userSpaceOnUse">
-			<stop stop-color="#FFFFFF"/>
-			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.274510"/>
-		</linearGradient>
 	</defs>
-	<rect id="矩形 1834" x="1.000000" width="100.000000" height="100.000000" fill="#C4C4C4" fill-opacity="0"/>
-	<mask id="mask1087_227096" mask-type="alpha" maskUnits="userSpaceOnUse" x="0.000000" y="5.000000" width="100.000000" height="84.519165">
-		<path id="蒙版" d="M49.35 10.86C61.57 10.44 81.04 16.84 91.14 34.62C101.24 52.4 98.65 76.38 62.54 82.16C26.43 87.94 8.79 72 5.64 57.19C2.5 42.39 14.69 30.23 21.41 23.96C28.14 17.68 37.13 11.28 49.35 10.86Z" fill="#0D94FF" fill-opacity="0.101961" fill-rule="evenodd"/>
-	</mask>
-	<g mask="url(#mask1087_227096)">
-		<path id="路径 74" d="M100.02 47.26C100.02 47.26 81.74 29.09 77.81 29.09C73.89 29.09 65.59 37.79 62.9 39.41C60.2 41.02 38.99 24.6 29.35 27.02C19.71 29.43 -0.02 49.66 -0.02 49.66L6.06 83.93L72.29 82.34L100.02 67.12L100.02 47.26Z" fill="url(#paint_linear_1087_227097_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
-		<path id="路径 74" d="" fill="#979797" fill-opacity="0" fill-rule="evenodd"/>
-	</g>
-	<g mask="url(#mask1087_227096)">
-		<path id="路径 74" d="M75.01 75.46C75.01 75.46 50.6 63.76 48.59 63.76C46.59 63.76 41.84 67.88 40.46 68.6C39.08 69.31 34.24 60.58 29.32 61.65C24.39 62.72 16.86 72.25 16.86 72.25L17.95 86.27L51.14 88.28L66.29 82.25L75.01 75.46Z" fill="url(#paint_linear_1087_227098_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
-		<path id="路径 74" d="" fill="#979797" fill-opacity="0" fill-rule="evenodd"/>
-	</g>
-	<g mask="url(#mask1087_227096)">
-		<ellipse id="椭圆形" cx="44.380371" cy="87.348694" rx="46.893246" ry="10.871444" fill="url(#paint_linear_1087_227099_0)" fill-opacity="1.000000"/>
-		<ellipse id="椭圆形" cx="44.380371" cy="87.348694" rx="46.393246" ry="10.371444" stroke="#979797" stroke-opacity="0" stroke-width="1.000000"/>
-	</g>
-	<g filter="url(#filter_1087_227102_dd)">
-		<rect id="矩形" x="25.885254" y="23.320236" rx="5.282814" width="47.333012" height="52.841934" fill="#E4E4E4" fill-opacity="1.000000"/>
-	</g>
-	<rect id="矩形" x="26.385254" y="23.820236" rx="5.282814" width="46.333012" height="51.841934" stroke="#C6C2C2" stroke-opacity="0" stroke-width="1.000000"/>
-	<g filter="url(#filter_1087_227103_dd)">
-		<rect id="矩形" x="28.251953" y="25.668762" rx="3.962111" width="42.599712" height="48.144871" fill="#FFFFFF" fill-opacity="1.000000"/>
-	</g>
-	<rect id="矩形" x="28.751953" y="26.168762" rx="3.962111" width="41.599712" height="47.144871" stroke="url(#paint_linear_1087_227103_0)" stroke-opacity="0" stroke-width="1.000000"/>
-	<rect id="矩形" x="28.751953" y="26.168762" rx="3.962111" width="41.599712" height="47.144871" stroke="url(#paint_linear_1087_227103_1)" stroke-opacity="0" stroke-width="1.000000"/>
-	<rect id="矩形" x="28.751953" y="26.168762" rx="3.962111" width="41.599712" height="47.144871" stroke="#EEEEEE" stroke-opacity="0" stroke-width="1.000000"/>
-	<mask id="mask_1087_227104" fill="white">
-		<path id="形状结合" d="M49.8474 15.6875C51.9277 15.6875 53.1079 17.2061 53.7422 18.5344C54.2563 19.6111 55.2678 20.4841 56.4609 20.4841C59.1804 20.4841 61.385 22.6887 61.385 25.4081L61.385 28.0173L38.3101 28.0173L38.3101 25.4081C38.3101 22.6887 40.5146 20.4841 43.2341 20.4841C44.4272 20.4841 45.4385 19.6111 45.9526 18.5344C46.5872 17.2061 47.7673 15.6875 49.8474 15.6875ZM49.8474 18.7707C49.2097 18.7707 48.6926 19.289 48.6926 19.9283C48.6926 20.5677 49.2097 21.086 49.8474 21.086C50.4854 21.086 51.0024 20.5677 51.0024 19.9283C51.0024 19.289 50.4854 18.7707 49.8474 18.7707Z" clip-rule="evenodd" fill="" fill-opacity="1.000000" fill-rule="evenodd"/>
-	</mask>
-	<path id="形状结合" d="M49.8474 15.6875C51.9277 15.6875 53.1079 17.2061 53.7422 18.5344C54.2563 19.6111 55.2678 20.4841 56.4609 20.4841C59.1804 20.4841 61.385 22.6887 61.385 25.4081L61.385 28.0173L38.3101 28.0173L38.3101 25.4081C38.3101 22.6887 40.5146 20.4841 43.2341 20.4841C44.4272 20.4841 45.4385 19.6111 45.9526 18.5344C46.5872 17.2061 47.7673 15.6875 49.8474 15.6875ZM49.8474 18.7707C49.2097 18.7707 48.6926 19.289 48.6926 19.9283C48.6926 20.5677 49.2097 21.086 49.8474 21.086C50.4854 21.086 51.0024 20.5677 51.0024 19.9283C51.0024 19.289 50.4854 18.7707 49.8474 18.7707Z" clip-rule="evenodd" fill="#C9C9C9" fill-opacity="1.000000" fill-rule="evenodd" mask="url(#mask_1087_227104)"/>
-	<path id="形状结合" d="" clip-rule="evenodd" fill="#C6C2C2" fill-opacity="0.000000" fill-rule="evenodd"/>
-	<g opacity="0.653390">
-		<path id="矩形" d="M61.97 39.17L37.71 39.2L37.71 41.52L61.97 41.49L61.97 39.17Z" fill="#E4E4E4" fill-opacity="1.000000" fill-rule="evenodd"/>
-		<path id="矩形" d="" fill="#C6C6C6" fill-opacity="0" fill-rule="evenodd"/>
-		<path id="矩形" d="M61.97 46.21L37.71 46.24L37.71 48.56L61.97 48.53L61.97 46.21Z" fill="#E4E4E4" fill-opacity="1.000000" fill-rule="evenodd"/>
-		<path id="矩形" d="" fill="#C6C6C6" fill-opacity="0" fill-rule="evenodd"/>
-		<path id="矩形" d="M61.77 55L54.63 55.02L54.63 52.69L61.77 52.67L61.77 55Z" fill="#E4E4E4" fill-opacity="1.000000" fill-rule="evenodd"/>
-		<path id="矩形" d="" fill="#C6C6C6" fill-opacity="0" fill-rule="evenodd"/>
-	</g>
-	<path id="Fill 1" d="M80.62 66.84L78.88 65.11C78.73 64.96 78.73 64.72 78.88 64.57C79.02 64.43 79.27 64.43 79.41 64.57L81.15 66.3C81.3 66.45 81.3 66.69 81.15 66.84C81.08 66.91 80.98 66.95 80.88 66.95C80.79 66.95 80.69 66.91 80.62 66.84Z" fill="#2CB8C9" fill-opacity="1.000000" fill-rule="evenodd"/>
-	<path id="Fill 1" d="M78.63 65.36L78.63 65.36L80.37 67.08C80.44 67.15 80.52 67.21 80.6 67.24C80.69 67.28 80.78 67.3 80.88 67.3C80.99 67.3 81.08 67.28 81.17 67.24C81.26 67.21 81.33 67.15 81.4 67.08C81.47 67.01 81.53 66.93 81.56 66.85C81.6 66.76 81.61 66.67 81.61 66.57C81.61 66.47 81.6 66.38 81.56 66.29C81.53 66.2 81.47 66.13 81.4 66.05L79.66 64.33C79.59 64.26 79.51 64.2 79.43 64.17C79.34 64.13 79.25 64.11 79.15 64.11C79.04 64.11 78.95 64.13 78.86 64.17C78.78 64.2 78.7 64.26 78.63 64.33C78.56 64.4 78.5 64.48 78.47 64.56C78.43 64.65 78.41 64.74 78.41 64.84C78.41 64.94 78.43 65.03 78.47 65.12C78.5 65.21 78.56 65.28 78.63 65.36ZM80.62 66.84L78.88 65.11C78.73 64.96 78.73 64.72 78.88 64.57C79.02 64.43 79.27 64.43 79.41 64.57L81.15 66.3C81.3 66.45 81.3 66.69 81.15 66.84C81.08 66.91 80.98 66.95 80.88 66.95C80.79 66.95 80.69 66.91 80.62 66.84Z" fill="#2CB8C9" fill-opacity="1.000000" fill-rule="evenodd"/>
-	<path id="矩形" d="M79.76 67.34C79.68 67.26 79.68 67.12 79.76 67.04C80.71 66.09 82.26 66.09 83.21 67.04L86.95 70.76C87.03 70.84 87.03 70.98 86.95 71.06C85.99 72.01 84.45 72.01 83.5 71.06L79.76 67.34Z" fill="#2CB8C9" fill-opacity="1.000000" fill-rule="evenodd"/>
-	<path id="矩形" d="M86.95 70.76C87.03 70.84 87.03 70.98 86.95 71.06C85.99 72.01 84.45 72.01 83.5 71.06L79.76 67.34C79.68 67.26 79.68 67.12 79.76 67.04C80.71 66.09 82.26 66.09 83.21 67.04L86.95 70.76ZM85.65 70.89C85.67 70.9 85.67 70.92 85.65 70.94C85.42 71.18 85.03 71.18 84.79 70.94L81.05 67.22C81.04 67.2 81.04 67.18 81.05 67.17C81.29 66.93 81.68 66.93 81.92 67.17L85.65 70.89Z" fill="#818181" fill-opacity="0" fill-rule="evenodd"/>
-	<g filter="url(#filter_1087_227124_dd)">
-		<path id="路径" d="M73.14 48.31C78.31 48.31 82.52 52.49 82.52 57.63C82.52 62.77 78.31 66.95 73.14 66.95C67.97 66.95 63.76 62.77 63.76 57.63C63.76 52.49 67.97 48.31 73.14 48.31Z" fill="#FFFFFF" fill-opacity="0" fill-rule="evenodd"/>
-	</g>
-	<path id="路径" d="M82.52 57.63C82.52 52.49 78.31 48.31 73.14 48.31C67.97 48.31 63.76 52.49 63.76 57.63C63.76 62.77 67.97 66.95 73.14 66.95C78.31 66.95 82.52 62.77 82.52 57.63ZM80.34 56.05C80.46 56.56 80.52 57.09 80.52 57.63C80.52 58.17 80.46 58.69 80.34 59.21C80.25 59.64 80.11 60.06 79.94 60.47C79.78 60.85 79.58 61.21 79.36 61.55C79.08 62 78.74 62.41 78.36 62.8C78 63.15 77.61 63.47 77.19 63.74C76.82 63.98 76.43 64.19 76.01 64.37C75.61 64.54 75.2 64.67 74.78 64.77C74.25 64.89 73.7 64.95 73.14 64.95C72.57 64.95 72.03 64.89 71.49 64.77C71.07 64.67 70.67 64.54 70.27 64.37C69.85 64.19 69.45 63.98 69.08 63.74C68.67 63.47 68.28 63.15 67.92 62.8C67.53 62.41 67.2 62 66.91 61.55C66.69 61.21 66.5 60.85 66.34 60.47C66.16 60.06 66.03 59.64 65.93 59.21C65.82 58.69 65.76 58.17 65.76 57.63C65.76 57.09 65.82 56.56 65.93 56.05C66.03 55.62 66.16 55.2 66.34 54.79C66.5 54.41 66.69 54.05 66.91 53.71C67.2 53.26 67.53 52.84 67.92 52.46C68.28 52.1 68.67 51.79 69.08 51.52C69.45 51.27 69.85 51.06 70.27 50.89C70.67 50.72 71.07 50.59 71.49 50.49C72.03 50.37 72.57 50.31 73.14 50.31C73.7 50.31 74.25 50.37 74.78 50.49C75.2 50.59 75.61 50.72 76.01 50.89C76.43 51.06 76.82 51.27 77.19 51.52C77.61 51.79 78 52.1 78.36 52.46C78.74 52.84 79.08 53.26 79.36 53.71C79.58 54.05 79.78 54.41 79.94 54.79C80.11 55.2 80.25 55.62 80.34 56.05Z" fill="#2CB8C9" fill-opacity="1.000000" fill-rule="evenodd"/>
-	<path id="路径 61" d="M90.37 51.52L90.39 51.54C90.95 51.54 91.39 51.1 91.39 50.54C91.39 49.98 90.95 49.54 90.39 49.54L90.37 49.56L90.37 51.52ZM84.82 49.56L84.8 49.54C84.24 49.54 83.8 49.98 83.8 50.54C83.8 51.1 84.24 51.54 84.8 51.54L84.82 51.52L84.82 49.56Z" fill="#D8D8D8" fill-opacity="0" fill-rule="nonzero"/>
-	<path id="路径 61" d="M90.39 50.54L84.8 50.54" stroke="#C9C9C9" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linecap="round"/>
-	<path id="路径 61" d="M88.19 43.91L88.22 43.91C88.62 43.51 88.62 42.89 88.22 42.49C87.83 42.1 87.21 42.09 86.81 42.49L86.81 42.52L88.19 43.91ZM82.89 46.41L82.87 46.41C82.47 46.8 82.47 47.42 82.86 47.82C83.26 48.22 83.88 48.22 84.28 47.83L84.28 47.8L82.89 46.41Z" fill="#D8D8D8" fill-opacity="0" fill-rule="nonzero"/>
-	<path id="路径 61" d="M87.52 43.2L83.57 47.12" stroke="#C9C9C9" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linecap="round"/>
-	<path id="路径 61" d="M80.99 40.25L81.01 40.23C81.01 39.67 80.57 39.23 80.01 39.23C79.45 39.23 79.01 39.67 79.01 40.23L79.03 40.25L80.99 40.25ZM79.03 45.77L79.01 45.79C79.01 46.35 79.45 46.79 80.01 46.79C80.57 46.79 81.01 46.35 81.01 45.79L80.99 45.77L79.03 45.77Z" fill="#D8D8D8" fill-opacity="0" fill-rule="nonzero"/>
-	<path id="路径 61" d="M80.01 40.23L80.01 45.79" stroke="#C9C9C9" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linecap="round"/>
-	<path id="路径 63" d="M14.93 23.85C14.93 24.17 14.95 24.47 15 24.75L10.47 21.32L11.43 21.22L11.44 21.2C11.39 20.64 10.91 20.25 10.35 20.3C9.79 20.36 9.4 20.84 9.45 21.4L9.48 21.42L10.45 21.32C10.48 21.55 10.79 23.64 12.62 24.44C13.37 24.77 14.2 24.89 15.02 24.87C15.66 28.17 19.36 28.3 19.67 28.3L19.67 29.28L19.69 29.3C20.25 29.3 20.69 28.86 20.69 28.3C20.68 27.74 20.24 27.3 19.68 27.3L19.66 27.32L19.67 28.29L15.16 24.87C16.43 24.82 17.66 24.43 18.48 23.93C19.86 23.08 20.09 20.81 18.98 19.98C17.88 19.15 14.93 19.39 14.93 23.85ZM15.16 24.87C15.11 24.87 15.07 24.87 15.02 24.87C15.01 24.83 15.01 24.79 15 24.75L15.16 24.87Z" fill="#D8D8D8" fill-opacity="0" fill-rule="evenodd"/>
-	<path id="路径 63" d="M19.69 28.3C19.69 28.3 14.93 28.31 14.93 23.85C14.93 19.39 17.88 19.15 18.98 19.98C20.09 20.81 19.86 23.08 18.48 23.93C17.1 24.77 14.56 25.29 12.62 24.44C10.68 23.59 10.45 21.3 10.45 21.3" stroke="#0A7EF7" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linecap="round"/>
-	<mask id="mask1087_227132" mask-type="alpha" maskUnits="userSpaceOnUse" x="36.602539" y="52.150177" width="16.075439" height="16.007996">
-		<path id="path-1" d="M43.3923 52.1502L43.3923 61.3969L52.678 61.3966L52.678 68.1582L36.6025 68.1582L36.6025 52.1502L43.3923 52.1502ZM52.678 59.7536L52.678 52.1502L45.042 52.1502L45.042 59.7532L52.678 59.7536Z" clip-rule="evenodd" fill="#C4C4C4" fill-opacity="1.000000" fill-rule="evenodd"/>
-	</mask>
-	<g mask="url(#mask1087_227132)">
-		<ellipse id="path5" cx="44.639893" cy="60.154175" rx="7.434854" ry="7.403697" fill="#EEEEEE" fill-opacity="1.000000"/>
-		<ellipse id="path5" cx="44.639893" cy="60.154175" rx="6.934854" ry="6.903697" stroke="#191919" stroke-opacity="0" stroke-width="1.000000" stroke-linejoin="round"/>
+	<path id="蒙版" d="M55.26 5.59C68.94 5.12 90.75 12.31 102.06 32.3C113.36 52.3 110.46 79.27 70.03 85.76C29.6 92.26 9.84 74.34 6.32 57.69C2.8 41.04 16.45 27.38 23.98 20.32C31.5 13.26 41.58 6.06 55.26 5.59Z" fill="#0D94FF" fill-opacity="0.101961" fill-rule="evenodd"/>
+	<path id="矢量 262" d="M105.71 40.46C99.31 34.43 89.94 26.09 87.13 26.09C82.73 26.09 73.45 35.87 70.43 37.69C69.25 38.39 64.96 36.04 59.51 33.06C50.92 28.36 39.47 22.1 32.86 23.76C26.22 25.43 15.32 34.67 7.9 41.55C5.95 46.46 5.1 51.9 6.32 57.69C9.07 70.7 21.74 84.5 46.46 86.79L66.14 86.32C67.42 86.16 68.71 85.98 70.03 85.76C105.16 80.12 111.96 59.01 105.71 40.46Z" fill="url(#paint_linear_1096_227225_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="矢量 263" d="M88.96 80.12C79.42 75.72 56.19 65.07 54.41 65.07C52.16 65.07 46.85 69.71 45.3 70.51C44.73 70.81 43.63 69.65 42.18 68.13C39.73 65.56 36.3 61.95 32.82 62.7C27.31 63.91 18.88 74.61 18.88 74.61L19.07 77C29.43 84.91 46.11 89.6 70 85.76C77.59 84.54 83.86 82.6 88.96 80.12Z" fill="url(#paint_linear_1096_227228_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="矢量 264" d="M83.81 82.3C74.63 80.47 62.72 79.37 49.69 79.37C40.78 79.37 32.4 79.88 25.05 80.79C35.45 86.28 50.27 88.94 70.03 85.76C75.23 84.93 79.8 83.75 83.81 82.3Z" fill="url(#paint_linear_1096_227229_0)" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<g filter="url(#filter_1096_227209_dd)">
+		<rect id="矩形" x="28.984375" y="19.600113" rx="5.282814" width="53.000000" height="59.417477" fill="#E4E4E4" fill-opacity="1.000000"/>
 	</g>
+	<rect id="矩形" x="31.634277" y="22.240891" rx="3.962111" width="47.700001" height="54.135921" fill="#FFFFFF" fill-opacity="1.000000"/>
+	<path id="矢量 258" d="M55.81 11.01C58.19 11.01 59.52 12.79 60.22 14.31C60.75 15.47 61.84 16.41 63.12 16.41L63.45 16.41C66.36 16.41 68.73 18.77 68.73 21.69L68.73 24.88L42.89 24.88L42.89 21.69C42.89 18.77 45.26 16.41 48.17 16.41L48.5 16.41C49.78 16.41 50.87 15.47 51.41 14.31C52.1 12.79 53.43 11.01 55.81 11.01ZM55.81 17.08C56.52 17.08 57.1 16.5 57.1 15.78C57.1 15.06 56.52 14.48 55.81 14.48C55.1 14.48 54.52 15.06 54.52 15.78C54.52 16.5 55.1 17.08 55.81 17.08Z" fill="#C9C9C9" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="矢量 260" d="M69.39 37.42L42.23 37.45L42.23 40.06L69.39 40.03L69.39 37.42ZM69.39 45.34L42.23 45.38L42.23 47.98L69.39 47.95L69.39 45.34ZM61.17 55.25L69.17 55.22L69.17 52.6L61.17 52.63L61.17 55.25Z" fill="#EEEEEE" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="矢量 259" d="M58.29 60.56C58.07 56.32 54.67 52.92 50.43 52.7L50.43 60.56L58.29 60.56ZM48.58 52.8L48.58 62.41L58.19 62.41C57.52 66.34 54.1 69.34 49.98 69.34C45.38 69.34 41.66 65.61 41.66 61.01C41.66 56.89 44.65 53.47 48.58 52.8Z" fill="#EEEEEE" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="合并" d="M81.89 47.7C87.68 47.7 92.39 52.4 92.39 58.18C92.39 61.14 91.15 63.83 89.16 65.73L91.12 67.68C91.19 67.76 91.25 67.84 91.29 67.94C91.97 67.95 92.65 68.24 93.17 68.76L97.35 72.94C97.45 73.04 97.45 73.19 97.35 73.29C96.29 74.35 94.56 74.35 93.5 73.29L89.31 69.1C89.22 69.01 89.22 68.86 89.31 68.76C89.43 68.64 89.56 68.54 89.69 68.45L88.07 66.84C88.04 66.8 88 66.76 87.97 66.72C86.26 67.94 84.16 68.66 81.89 68.66C76.1 68.66 71.39 63.96 71.39 58.18C71.39 52.4 76.1 47.7 81.89 47.7ZM90.39 58.18C90.39 57.03 90.19 55.96 89.79 54.98C89.38 53.96 88.75 53.03 87.9 52.19C87.07 51.35 86.14 50.73 85.13 50.31C84.14 49.91 83.06 49.7 81.89 49.7C80.73 49.7 79.65 49.91 78.65 50.31C77.64 50.73 76.72 51.35 75.88 52.19C75.04 53.03 74.41 53.96 74 54.98C73.59 55.96 73.39 57.03 73.39 58.18C73.39 59.33 73.59 60.39 74 61.38C74.41 62.4 75.04 63.33 75.88 64.17C76.72 65 77.64 65.63 78.65 66.04C79.65 66.45 80.73 66.66 81.89 66.66C83.06 66.66 84.14 66.45 85.13 66.04C86.14 65.63 87.07 65 87.9 64.17C88.75 63.33 89.38 62.4 89.79 61.38C90.19 60.39 90.39 59.33 90.39 58.18Z" fill="#2CB8C9" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="矢量 261" d="M88.6 44.86L88.6 38.62C88.6 38.06 89.04 37.62 89.6 37.62C90.16 37.62 90.6 38.06 90.6 38.62L90.6 44.86C90.6 45.42 90.16 45.86 89.6 45.86C89.04 45.86 88.6 45.42 88.6 44.86ZM97.29 41.24L92.87 45.65C92.48 46.05 92.47 46.67 92.87 47.06C93.27 47.46 93.89 47.46 94.28 47.07L98.7 42.66C99.1 42.26 99.1 41.64 98.7 41.25C98.31 40.85 97.68 40.85 97.29 41.24ZM101.21 49.21L94.96 49.21C94.4 49.21 93.96 49.65 93.96 50.21C93.96 50.77 94.4 51.21 94.96 51.21L101.21 51.21C101.77 51.21 102.21 50.77 102.21 50.21C102.21 49.65 101.77 49.21 101.21 49.21Z" fill="#C9C9C9" fill-opacity="1.000000" fill-rule="evenodd"/>
+	<path id="路径 63 (边框)" d="M21.75 26.19C21.87 26.2 21.97 26.2 22.05 26.2C22.61 26.2 23.04 25.76 23.04 25.2C23.04 24.64 22.6 24.2 22.04 24.2C22.01 24.2 21.96 24.2 21.88 24.2C21.72 24.19 21.54 24.17 21.36 24.14C20.79 24.05 20.27 23.9 19.8 23.68C19.19 23.39 18.71 23 18.36 22.52C18.3 22.42 18.23 22.32 18.18 22.22C18.6 22.15 19.01 22.05 19.41 21.93C19.49 21.91 19.57 21.88 19.64 21.86C20.23 21.66 20.76 21.42 21.22 21.13C21.35 21.05 21.48 20.96 21.6 20.86C21.95 20.58 22.24 20.23 22.48 19.81C22.58 19.63 22.67 19.45 22.74 19.26C22.88 18.92 22.97 18.55 23.01 18.17C23.08 17.62 23.04 17.09 22.9 16.6C22.88 16.56 22.87 16.52 22.86 16.49C22.71 16.04 22.5 15.66 22.2 15.35C22.1 15.24 21.98 15.14 21.86 15.05C21.62 14.87 21.34 14.72 21.03 14.61C20.76 14.53 20.38 14.45 20.08 14.43C19.91 14.42 19.74 14.42 19.56 14.44C19.39 14.45 19.22 14.48 19.05 14.52C18.88 14.56 18.72 14.61 18.56 14.67C18.37 14.74 18.19 14.83 18.02 14.93C17.89 15 17.77 15.08 17.66 15.17C17.11 15.58 16.67 16.15 16.34 16.85C15.92 17.76 15.72 18.88 15.72 20.2C15.29 20.13 14.9 20.1 14.54 19.95C14.39 19.88 14.26 19.81 14.13 19.73C13.66 19.41 13.29 18.95 13.02 18.33C13 18.28 12.97 18.23 12.95 18.18C12.87 17.96 12.8 17.75 12.75 17.52C12.72 17.39 12.7 17.29 12.7 17.23C12.64 16.67 12.16 16.28 11.6 16.33C11.04 16.39 10.65 16.87 10.71 17.43C10.72 17.58 10.75 17.76 10.8 17.97C10.87 18.25 10.95 18.53 11.05 18.8C11.09 18.92 11.14 19.03 11.19 19.14C11.43 19.68 11.73 20.16 12.09 20.57C12.36 20.88 12.66 21.15 13 21.37C13.23 21.53 13.47 21.66 13.73 21.78C14.35 22.05 15.02 22.22 15.75 22.3C15.85 22.31 15.95 22.32 16.05 22.33C16.17 22.69 16.32 23.02 16.51 23.34C16.58 23.45 16.65 23.57 16.73 23.68C16.82 23.8 16.91 23.91 17.01 24.03C17.52 24.63 18.17 25.12 18.96 25.49C19.6 25.79 20.3 26 21.06 26.11C21.3 26.15 21.53 26.18 21.75 26.19ZM17.72 20.27C18.14 20.21 18.56 20.11 18.96 19.97C19.41 19.82 19.84 19.63 20.17 19.43C20.4 19.29 20.59 19.08 20.74 18.82C20.78 18.76 20.81 18.69 20.84 18.63C20.93 18.41 21 18.18 21.03 17.94C21.06 17.63 21.04 17.36 20.96 17.11C20.89 16.9 20.79 16.75 20.66 16.64C20.58 16.59 20.49 16.54 20.38 16.51C20.25 16.46 20.12 16.43 19.97 16.43C19.8 16.42 19.64 16.43 19.48 16.47C19.33 16.51 19.18 16.57 19.03 16.65C18.67 16.87 18.38 17.21 18.16 17.69C17.86 18.33 17.72 19.24 17.72 20.27Z" fill="#0A7EF7" fill-opacity="1.000000" fill-rule="evenodd"/>
 </svg>
diff --git a/packages/theme-saas/src/input/index.less b/packages/theme-saas/src/input/index.less
index 5ee560e85a..7ebd2005f3 100644
--- a/packages/theme-saas/src/input/index.less
+++ b/packages/theme-saas/src/input/index.less
@@ -12,13 +12,13 @@
   @apply inline-block;
   @apply w-full;
   @apply align-bottom;
-  @apply text-xs;
+  @apply text-sm;
 
 
   &.is-disabled &__inner {
-    @apply bg-color-border-disabled;
-    @apply border-color-border;
-    @apply text-color-text-disabled;
+    @apply bg-color-bg-6;
+    @apply border-color-border-separator;
+    @apply text-color-text-secondary;
     @apply cursor-not-allowed;
     .placeholder(@color: theme('colors.color.text.disabled'));
   }
@@ -42,7 +42,7 @@
     @apply right-4;
   }
 
-  &__inner {
+ & &__inner {
     @apply block;
     @apply w-full;
     @apply ~'min-h-[theme(spacing.16)]';
@@ -50,8 +50,8 @@
     @apply border border-solid border-color-border;
     @apply rounded;
     @apply bg-color-bg-1;
-    @apply py-2 px-3;
-    @apply leading-normal;
+    @apply py-0 px-3;
+    @apply ~'leading-[1.625rem]';
     font-size: inherit;
     @apply resize-y;
     @apply box-border;
@@ -73,16 +73,16 @@
       @apply border-color-border-focus;
     }
 
-    &.@{textarea-prefix-cls}__fix-height{
+    &.@{textarea-prefix-cls}__fix-height {
       @apply h-7;
       @apply ~'min-h-[theme(spacing.7)]';
       @apply py-0 px-2;
       @apply leading-7;
-      @apply overflow-hidden;
-    }
+      @apply overflow-hidden;   
+    }   
   }
 
-  .@{textarea-prefix-cls}__inner{
+  .@{textarea-prefix-cls}__inner {
     &::-webkit-scrollbar {
       @apply w-3;
     }
@@ -97,19 +97,26 @@
     }
   }
 
-  .@{textarea-prefix-cls}__inner-con{
+  .@{textarea-prefix-cls}__inner-con {
     @apply relative;
     @apply block;
     @apply h-7;
     @apply w-full;
 
-    .@{textarea-prefix-cls}__inner{
+    .@{textarea-prefix-cls}__inner {
       @apply ~'min-w-[theme(spacing.40)]';
       @apply absolute;
       @apply h-7;
       @apply ~'z-[2000]';
       @apply top-0;
       @apply left-0;
+
+      // 此处是为了修改保持单行默认28px后,hover-expand计算出来的样式和原来一致
+      &:hover,
+      &:focus {
+        @apply py-2;
+        @apply leading-normal;
+      }
     }
   }
 
@@ -136,7 +143,7 @@
       @apply line-clamp-1;
     }
 
-    .@{textarea-prefix-cls}__inner-con{
+    .@{textarea-prefix-cls}__inner-con {
       @apply h-auto;
 
       .@{textarea-prefix-cls}__inner {
@@ -179,7 +186,7 @@
 
 .@{input-prefix-cls} {
   @apply relative;
-  @apply text-xs;
+  @apply text-sm;
   @apply inline-table;
   @apply w-full;
 
@@ -217,9 +224,9 @@
 
   &.is-disabled &__inner {
     @apply cursor-not-allowed;
-    @apply border border-solid border-color-border;
-    @apply text-color-text-disabled;
-    @apply bg-color-border-disabled;
+    @apply border border-solid border-color-border-separator;
+    @apply text-color-text-secondary;
+    @apply bg-color-bg-6;
     .placeholder(@color:theme('colors.color.text.disabled'));
 
     &.@{input-prefix-cls}__mask {
@@ -278,7 +285,7 @@
     }
   }
 
-  &__inner {
+   &__inner {
     @apply w-full;
     @apply border border-solid border-color-border;
     @apply rounded;
diff --git a/packages/theme-saas/src/mixins/button.less b/packages/theme-saas/src/mixins/button.less
index 9c1ea8f0d4..e385997d33 100644
--- a/packages/theme-saas/src/mixins/button.less
+++ b/packages/theme-saas/src/mixins/button.less
@@ -100,11 +100,20 @@
   }
 }
 
-.button-text(@color, @hover-color, @active-color, @disabled-color) {
+.button-text(@color, @hover-color, @active-color, @disabled-color, @has-icon-color, @has-icon-disabled-color) {
   color: @color;
   @apply text-sm;
   @apply border-transparent;
   @apply bg-transparent;
+  @apply p-0;
+  min-width: auto;
+
+  &.is-icon {
+    color: @has-icon-color;
+    & > svg {
+      @apply mt-0;
+    }
+  }
 
   &:hover {
     color: @hover-color;
@@ -139,5 +148,12 @@
     & > svg {
       fill: @disabled-color;
     }
+    &.is-icon,
+    &.is-only-icon {
+      color: @has-icon-disabled-color;
+      & > svg {
+        fill: @has-icon-disabled-color;
+      }
+    }
   }
 }
diff --git a/packages/theme-saas/src/steps/index.less b/packages/theme-saas/src/steps/index.less
index 165270e665..6e5fb22267 100644
--- a/packages/theme-saas/src/steps/index.less
+++ b/packages/theme-saas/src/steps/index.less
@@ -4,6 +4,7 @@
 @steps-senior-prefix-cls: ~'@{css-prefix}steps-senior';
 @steps-line-prefix-cls: ~'@{css-prefix}steps-line';
 @timeline-prefix-cls: ~'@{css-prefix}timeline';
+@timeline-item-prefix-cls: ~'@{timeline-prefix-cls}-item';
 @default-color: theme('colors.color.text.primary');
 @active-color: theme('colors.color.brand.DEFAULT');
 @disabled-color: theme('colors.color.text.disabled');
@@ -930,7 +931,6 @@
 
         // background-color: blue;
 
-
         > span {
           @apply w-full;
           @apply h-full;
@@ -938,7 +938,6 @@
           @apply whitespace-nowrap;
           @apply overflow-hidden;
         }
-
       }
 
       &:not(:last-child) .label::after {
@@ -965,8 +964,7 @@
       }
 
       &.current:not(:last-child) .label::after,
-      &:hover .label::after
-       {
+      &:hover .label::after {
         border-left: 6px solid theme('colors.color.brand.DEFAULT');
       }
 
@@ -983,7 +981,6 @@
           @apply text-color-text-inverse;
           @apply font-bold;
         }
-
       }
 
       &:last-child .label {
@@ -1072,8 +1069,7 @@
 
   .line {
     @apply bg-color-border-separator;
-    @apply  ~'w-[calc(100%-40px)]';
-    @apply ~'translate-x-[20px]';
+    @apply ~'w-[calc(100%-40px)]';
   }
 
   .icon {
@@ -1105,23 +1101,14 @@
       .@{css-prefix}svg {
         fill: @active-color;
         @apply align-baseline;
-        @apply border;
-        @apply border-solid;
-        border-color: @active-color;
         @apply rounded-full;
-        @apply p-1;
       }
     }
-
-    .line {
-      @apply bg-color-brand;
-    }
   }
 
   .node-description {
     @apply relative;
     @apply mt-3;
-    @apply overflow-hidden;
     @apply text-center;
 
     .name {
@@ -1197,7 +1184,7 @@
       @apply h-24;
 
       .@{timeline-prefix-cls}-item__pillar {
-        @apply flex flex-col ;
+        @apply flex flex-col;
       }
 
       .line {
@@ -1238,7 +1225,6 @@
 
       .name {
         @apply float-left;
-        @apply ml-6;
         @apply text-sm;
         @apply font-bold;
         @apply ~'leading-6.5';
@@ -1253,11 +1239,6 @@
   .@{timeline-prefix-cls}-item {
     .line {
       @apply ~'w-[calc(100%-24px)]';
-      @apply transform ~'translate-x-[12px]';
-
-      &.line-done {
-        @apply bg-color-bg-7;
-      }
 
       &.line-end {
         @apply w-0;
@@ -1317,3 +1298,554 @@
   }
 }
 
+// tiny 新增： 由于重构了time-line-item ，所以下面样式为tiny自有的样式。 此处的样式与上面的样式会互相影响，共同施加于time-line组件上。
+.@{timeline-prefix-cls} {
+  position: relative;
+
+  .line {
+    background: #dbdbdb;
+  }
+
+  .line-done {
+    background: #191919;
+  }
+
+  .icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    left: calc(50% - 12px);
+    top: 0;
+    width: 24px;
+    height: 24px;
+    border: 1px solid #c9c9c9;
+    border-radius: 50%;
+    box-sizing: border-box;
+    overflow: hidden;
+    color: #aeaeae;
+    cursor: pointer;
+    background-color: #d9d9d9;
+    z-index: 15;
+    padding: 2px;
+
+    &[class*=~'icon-'] {
+      background-color: #fff;
+    }
+
+    &.icon-success {
+      border-color: #0067d1;
+
+      .fixicon {
+        fill: #0067d1;
+      }
+    }
+
+    &.icon-warning {
+      background-color: #d19f00 !important;
+      border-color: #d19f00;
+
+      .fixicon {
+        fill: #fff;
+      }
+    }
+
+    &.icon-error {
+      border-color: #e02128;
+
+      .fixicon {
+        fill: #e02128;
+      }
+    }
+
+    .fixicon,
+    .fixicons {
+      width: 20px;
+      height: 20px;
+      background-color: transparent;
+      padding: 2px;
+    }
+
+    &.fixicons {
+      padding: 0;
+      left: 0;
+      border: none;
+    }
+
+    .number {
+      display: inline-block;
+    }
+  }
+
+  .date-time {
+    text-align: center;
+    color: #8a8e99;
+    font-size: 12px;
+    margin-bottom: 6px;
+  }
+
+  .@{steps-prefix-cls}__node {
+    position: relative;
+  }
+
+  .process-done {
+    .node-description {
+      color: #333;
+    }
+
+    .icon {
+      color: #0067d1;
+      fill: #0067d1;
+      border-color: #0067d1;
+      background-color: #fff;
+
+      .icon-yes {
+        fill: #0067d1;
+        font-size: 14px;
+        border-radius: 50%;
+      }
+    }
+
+    &.@{timeline-item-prefix-cls} .dot-container .dot {
+      border-color: #0067d1;
+      background-color: #fff;
+    }
+  }
+
+  .process-current {
+    .icon {
+      color: #fff;
+      font-size: 12px;
+      border-color: #0067d1;
+      background: #0067d1;
+
+      .fixicons {
+        fill: #fff;
+      }
+    }
+
+    &.@{timeline-item-prefix-cls} .dot-container .dot {
+      background-color: #0067d1;
+    }
+  }
+
+  .process-error {
+    cursor: not-allowed;
+
+    .icon {
+      flex-shrink: 0;
+      color: #e02128;
+      border-color: #e02128;
+      background-color: #e02128;
+
+      .icon-wrap {
+        font-size: 0;
+      }
+
+      svg {
+        fill: #fff;
+        font-size: 14px;
+      }
+    }
+
+    &.@{timeline-item-prefix-cls} .dot-container .dot {
+      background-color: #e02128;
+    }
+
+    &.normal .node-description {
+      .name,
+      & div.name {
+        color: #e02128;
+      }
+    }
+  }
+
+  .process-disabled {
+    cursor: not-allowed;
+
+    .icon {
+      background-color: #f5f5f5;
+      border-color: #c9c9c9;
+
+      .number {
+        color: #c9c9c9;
+      }
+    }
+
+    &.@{timeline-item-prefix-cls} .dot-container .dot {
+      background-color: #f5f5f5;
+    }
+
+    &.normal .node-description,
+    .@{timeline-item-prefix-cls}__content {
+      .name,
+      & div.name {
+        color: #777;
+      }
+    }
+  }
+
+  .reverse {
+    .process-current {
+      .line {
+        background: #0067d1;
+      }
+    }
+  }
+
+  & .process-wait {
+    .name {
+      color: #aeaeae !important;
+    }
+
+    .icon {
+      background-color: #fff;
+    }
+  }
+
+  & .@{steps-prefix-cls}-normal {
+    .normal {
+      display: block;
+      position: relative;
+      font-size: 12px;
+    }
+
+    .icon {
+      span {
+        display: inline-block;
+      }
+    }
+
+    .name {
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 20px;
+      color: #191919;
+    }
+
+    &.process-wait {
+      .name {
+        color: #aeaeae;
+      }
+    }
+
+    &.text-right {
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      padding: 0;
+      margin: 0;
+
+      .normal {
+        display: inline-flex;
+        align-items: center;
+        overflow: hidden;
+
+        .step-icon {
+          top: 0;
+          left: 0;
+          flex-shrink: 0;
+        }
+
+        .node-description {
+          display: flex;
+          position: relative;
+          margin-left: 4px;
+          flex: 1 0 auto;
+          align-items: center;
+
+          .name {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            margin-right: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-break: break-all;
+            white-space: normal;
+            text-align: left;
+            max-width: 250px;
+          }
+        }
+
+        .line {
+          flex: 1;
+          height: 1px;
+          margin-left: 0;
+
+          &.line-end {
+            flex: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          padding-left: 0px;
+        }
+
+        &:not(:last-child) {
+          flex: 1;
+        }
+
+        &.no-flex {
+          flex: none;
+        }
+      }
+    }
+
+    &.text-bottom {
+      display: flex;
+
+      .node-description {
+        position: relative;
+        text-align: center;
+        margin-top: 12px;
+
+        .name {
+          font-size: 14px;
+          float: left;
+          width: 100%;
+        }
+
+        .status {
+          font-size: 12px;
+          float: left;
+          width: 100%;
+        }
+      }
+
+      .line {
+        width: calc(100% - 20px - 0px * 2);
+        height: 1px;
+        left: 50%;
+        top: 12px;
+        position: absolute;
+
+        &.line-end {
+          width: 0;
+        }
+      }
+    }
+
+    .@{timeline-item-prefix-cls}__description {
+      position: absolute;
+      bottom: 0;
+      transform: translateY(100%);
+      min-width: 100px;
+      text-align: left;
+    }
+
+    .process-current {
+      .node-description .name {
+        color: #0067d1;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .show-divider {
+    .@{timeline-item-prefix-cls} {
+      padding-bottom: 22px;
+
+      &.process-current {
+        &::after {
+          content: '';
+          display: inline-block;
+          position: absolute;
+          bottom: 0;
+          left: 3px;
+          border: 7px solid transparent;
+          border-top: none;
+          border-bottom-color: #0067d1;
+        }
+      }
+
+      &:first-child {
+        &.process-current::after {
+          content: '';
+          display: inline-block;
+          position: absolute;
+          bottom: 0;
+          left: 3px;
+          border: 7px solid transparent;
+          border-top: none;
+          border-bottom-color: #0067d1;
+        }
+      }
+    }
+
+    & + .@{steps-prefix-cls}__bottom-divider {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 1px;
+      margin-top: calc(16px - 4px);
+      background-color: #d9d9d9;
+    }
+  }
+
+  & .@{steps-prefix-cls}-timeline {
+    font-size: 14px;
+    color: #333;
+
+    &.@{timeline-prefix-cls}__shape-dot {
+      padding-top: 4px;
+
+      .timeline {
+        .@{timeline-item-prefix-cls}__pillar .line {
+          width: 1px;
+          margin-block: 4px;
+          background-color: #d9d9d9;
+        }
+
+        .@{timeline-item-prefix-cls}__content {
+          margin-left: 20px;
+        }
+
+        &.timeline-item--primary .dot {
+          border-color: #d9d9d9;
+          background-color: #d9d9d9;
+        }
+
+        &.timeline-item--success .dot {
+          border-color: #50d4ab;
+          background-color: #50d4ab;
+        }
+
+        &.timeline-item--warning .dot {
+          border-color: #d19f00;
+          background-color: #d19f00;
+        }
+
+        &.timeline-item--danger .dot {
+          border-color: #f66f6a;
+          background-color: #f66f6a;
+        }
+
+        &.timeline-item--info .dot {
+          border-color: #5e7ce0;
+          background-color: #5e7ce0;
+        }
+
+        .@{timeline-item-prefix-cls}__content {
+          margin-top: -5px;
+
+          .name {
+            margin-bottom: 4px;
+          }
+
+          .time {
+            color: #8a8e99;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+
+    .timeline {
+      display: flex;
+      align-items: flex-start;
+
+      &.process-done {
+        color: #333;
+      }
+
+      &.process-current {
+        color: #0067d1;
+      }
+
+      &:last-child {
+        .@{timeline-item-prefix-cls}__pillar .line {
+          flex: 0;
+        }
+      }
+
+      .@{timeline-item-prefix-cls}__pillar {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        align-self: stretch;
+        width: 8px;
+
+        .line {
+          width: 1px;
+          flex: 1;
+
+          .@{css-prefix}svg {
+            vertical-align: baseline;
+          }
+        }
+
+        .icon {
+          left: 0;
+        }
+      }
+
+      .date-time {
+        padding-right: 12px;
+        padding-bottom: 20px;
+        text-align: right;
+
+        .time {
+          display: block;
+          line-height: 1;
+        }
+
+        .date {
+          display: block;
+          line-height: 1;
+          margin-bottom: 4px;
+        }
+      }
+
+      .dot-container {
+        position: relative;
+
+        .fixicons {
+          transform: translateY(-50%);
+        }
+      }
+
+      .dot {
+        display: block;
+        width: 8px;
+        height: 8px;
+        border: 1px solid #d9d9d9;
+        border-radius: 50%;
+        box-sizing: border-box;
+        background-color: #d9d9d9;
+      }
+
+      .@{timeline-item-prefix-cls}__content {
+        padding-bottom: 20px;
+        margin-left: 20px;
+      }
+
+      .icon {
+        top: 0;
+      }
+    }
+  }
+
+  &--mini {
+    .icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    .@{css-prefix}svg,
+    span,
+    .process-done .icon .@{css-prefix}svg,
+    .process-done .icon span,
+    .process-error .icon .@{css-prefix}svg {
+      font-size: 12px;
+    }
+
+    .node-description {
+      .name,
+      .status {
+        font-size: 12px;
+      }
+    }
+  }
+}
diff --git a/packages/theme-saas/src/textarea/index.less b/packages/theme-saas/src/textarea/index.less
index 44593e54ce..52211b39fc 100644
--- a/packages/theme-saas/src/textarea/index.less
+++ b/packages/theme-saas/src/textarea/index.less
@@ -99,6 +99,10 @@
   }
   &.is-display-only {
     .@{textarea-prefix-cls}-display-only {
+      .@{textarea-prefix-cls}-display-only__wrap {
+        @apply flex;
+      }
+
       .@{textarea-prefix-cls}-display-only__content {
         @apply left-0;
         @apply max-w-full;
@@ -110,6 +114,22 @@
         @apply overflow-hidden;
         @apply break-words;
         @apply whitespace-pre-wrap;
+
+        &::before {
+          @apply content-[''];
+          @apply float-right;
+          @apply h-full;
+          @apply ~'-mb-3.5';
+        }
+
+        .more-btn {
+          @apply float-right;
+          @apply clear-both;
+          @apply text-color-brand;
+          @apply text-xs;
+          @apply leading-3;
+          @apply cursor-pointer;
+        }
       }
     }
     .@{textarea-prefix-cls}-autosize-display-only {
diff --git a/packages/theme-saas/src/tree/index.less b/packages/theme-saas/src/tree/index.less
index 7b47299d85..b8f7b88d67 100644
--- a/packages/theme-saas/src/tree/index.less
+++ b/packages/theme-saas/src/tree/index.less
@@ -251,6 +251,11 @@
     & label.@{css-prefix}checkbox {
       @apply ml-2;
     }
+    .@{tree-node-prefix-cls}__content-box {
+      @apply overflow-hidden;
+      @apply text-ellipsis;
+      @apply whitespace-nowrap;
+    }
 
     .@{tree-node-prefix-cls}__content-left {
       @apply flex;
@@ -285,8 +290,8 @@
 
   &__expand-icon {
     @apply cursor-pointer;
-    @apply fill-color-icon-secondary; 
-    @apply text-xs;
+    @apply fill-color-icon-secondary;
+    @apply text-md;
     @apply rotate-0;
     transition: transform 0.3s ease-in-out;
     @apply shrink-0;
@@ -330,7 +335,7 @@
     @apply bg-transparent;
 
     .@{tree-node-prefix-cls}__label {
-      @apply text-xs;
+      @apply text-sm;
     }
   }
 
diff --git a/packages/theme-saas/src/user/index.less b/packages/theme-saas/src/user/index.less
index 5bbf02d5ca..f40da7918f 100644
--- a/packages/theme-saas/src/user/index.less
+++ b/packages/theme-saas/src/user/index.less
@@ -65,7 +65,7 @@
   }
 
   &_select {
-    max-width: 50%;
+    max-width: ~'calc(50% - theme(spacing.1))';
     @apply w-auto;
     @apply whitespace-nowrap;
     @apply overflow-hidden;
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 7d58ed4c04..3b31485cf3 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.16.4",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "main": "index.css",
   "homepage": "https://opentiny.design/tiny-vue",
@@ -87,4 +87,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/theme/src/alert/index.less b/packages/theme/src/alert/index.less
index fff2bb9561..fc5631b7ad 100644
--- a/packages/theme/src/alert/index.less
+++ b/packages/theme/src/alert/index.less
@@ -192,6 +192,7 @@
     font-size: var(--ti-alert-title-font-size);
     color: var(--ti-alert-title-text-color);
     font-weight: bold;
+    margin-top: var(--ti-alert-title-margin-top);
   }
 
   & &__description {
diff --git a/packages/theme/src/alert/smb-theme.js b/packages/theme/src/alert/smb-theme.js
index 6cd3e99b9a..559be86a28 100644
--- a/packages/theme/src/alert/smb-theme.js
+++ b/packages/theme/src/alert/smb-theme.js
@@ -15,7 +15,8 @@ export const tinyAlertSmbTheme = {
   'ti-alert-normal-padding-bottom': 'calc(var(--ti-common-space-2x) + 1.5px)',
   'ti-alert-normal-padding-right': 'var(--ti-common-space-3x)',
   'ti-alert-title-font-size': 'var(--ti-common-font-size-2)',
-  'ti-alert-large-icon-margin-top': 'calc(var(--ti-common-space-6) / 2)',
+  'ti-alert-large-icon-margin-top': 'var(--ti-common-space-0)',
+  'ti-alert-title-margin-top': 'var(--ti-common-size-base)',
   'ti-alert-large-padding-top': 'var(--ti-common-space-4x)',
   'ti-alert-large-padding-bottom': 'var(--ti-common-space-4x)',
   'ti-alert-large-padding-right': 'var(--ti-common-space-4x)',
diff --git a/packages/theme/src/alert/vars.less b/packages/theme/src/alert/vars.less
index 7a8fffaebb..b4230a60f2 100644
--- a/packages/theme/src/alert/vars.less
+++ b/packages/theme/src/alert/vars.less
@@ -159,4 +159,6 @@
   --ti-alert-simple-close-icon-color: var(--ti-alert-simple-icon-color);
   // simple类型悬浮关闭图标色
   --ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color);
+  // 标题的上边距
+  --ti-alert-title-margin-top: var(--ti-common-space-0);
 }
diff --git a/packages/theme/src/card/index.less b/packages/theme/src/card/index.less
index b1daa244ac..6007e1c0ad 100644
--- a/packages/theme/src/card/index.less
+++ b/packages/theme/src/card/index.less
@@ -14,6 +14,7 @@
 @import './vars.less';
 
 @card-prefix-cls: ~'@{css-prefix}card';
+@input-prefix-cls: ~'@{css-prefix}input';
 
 .@{card-prefix-cls} {
   .component-css-vars-amount();
@@ -86,6 +87,45 @@
   &.@{card-prefix-cls}--item-checked {
     border-color: var(--ti-card-checked-border-color);
   }
+  &.@{card-prefix-cls}--item-checkbox-checked {
+    position: relative;
+    border-radius: 8px;
+  }
+  &.@{card-prefix-cls}--item-checkbox-checked::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: 0px;
+    top: 0;
+    border-bottom: 40px solid transparent;
+    border-right: 40px solid #1476FF;
+    border-top-right-radius: 6px;
+    display: var(--ti-checkbox-button-checked-display);
+  }
+  
+  &.@{card-prefix-cls}--item-checkbox-checked::before {
+    display: var(--ti-checkbox-button-checked-display);
+    right: 5px;
+    top: 1px;
+    box-sizing: content-box;
+    content: '';
+    border: 0.5px solid #fff;
+    border-width: 0 var(--ti-checkbox-checkline-width) var(--ti-checkbox-checkline-width) 0;
+    border-left: 0;
+    border-top: 0;
+    height: 16px;
+    width: 10px;
+    position: absolute;
+    margin-left: var(--ti-checkbox-icon-margin-left);
+    margin-top: var(--ti-checkbox-icon-margin-top);
+    transition:
+      transform 0.15s ease-in 0.05s,
+      -webkit-transform 0.15s ease-in 0.05s;
+    transform-origin: center;
+    z-index: 3;
+    transform: rotate(45deg) scale(0.7);
+  }
 
   &.@{card-prefix-cls}--disabled {
     background-color: var(--ti-card-disabled-bg-color);
@@ -170,7 +210,7 @@
         font-size: var(--ti-card-title-font-size);
         font-weight: var(--ti-card-title-font-weight);
         margin-right: 8px;
-        margin-bottom: 12px;
+        margin-bottom: var(--ti-card-title-mg-bottom);
         line-height: 22px;
         color: var(--ti-card-title-text-color);
       }
@@ -250,3 +290,11 @@
     }
   }
 }
+
+.@{input-prefix-cls} {
+  &__inner{
+    border: none;
+    border-radius: 6px;
+    background-color: #FAFAFA;
+  }
+}
diff --git a/packages/theme/src/card/smb-theme.js b/packages/theme/src/card/smb-theme.js
index fcb65b31b0..2e9647c7fd 100644
--- a/packages/theme/src/card/smb-theme.js
+++ b/packages/theme/src/card/smb-theme.js
@@ -1,17 +1,20 @@
 export const tinyCardSmbTheme = {
-  'ti-card-bg-color': 'var(--ti-base-color-bg-7)', // 白色背景
+  'ti-card-checked-border-color': 'var(--ti-common-color-text-highlight)',
+  'ti-card-bg-color': 'var(--ti-common-color-bg-navigation)', // 白色背景
   'ti-card-box-shadow': 'none', // 无阴影
-  'ti-card-default-border-color': '#fff', // 白色边框
-  'ti-card-title-font-size': '16px', // 标题字体
-  'ti-card-title-text-color': '#191919', // 标题字体色
+  'ti-card-default-border-color': 'var(--ti-common-color-light)', // 白色边框
+  'ti-card-title-font-size': 'var(--ti-common-font-size-2)', // 标题字体
+  'ti-card-title-text-color': 'var(--ti-common-color-selected-text-color)', // 标题字体色
   'ti-card-title-font-weight': 'bold', // 标题字重
-  'ti-card-main-font-size': '14px', // 正文字体
-  'ti-card-main-text-color': '#595959', // 正文字体色
-  'ti-card-option-top-border-color': '#f0f0f0',
-  'ti-card-option-text-color': '#191919',
-  'ti-card-option-font-size': '16px',
-  'ti-card-large-body-padding': '24px',
-  'ti-card-medium-body-padding': '24px',
-  'ti-card-small-body-padding': '16px',
-  'ti-card-mini-body-padding': '12px'
+  'ti-card-main-font-size': 'var(--ti-common-font-size-1)', // 正文字体
+  'ti-card-main-text-color': 'var(--ti-common-color-text-weaken)', // 正文字体色
+  'ti-card-option-top-border-color': 'var(--ti-common-color-primary-disabled)',
+  'ti-card-option-text-color': 'var(--ti-common-color-selected-text-color)',
+  'ti-card-option-font-size': 'var(--ti-common-font-size-2)',
+  'ti-card-large-body-padding': 'var(--ti-common-space-6x)',
+  'ti-card-medium-body-padding': 'var(--ti-common-space-6x)',
+  'ti-card-small-body-padding': 'var(--ti-common-space-4x)',
+  'ti-card-mini-body-padding': 'var(--ti-common-space-3x)',
+  'ti-card-large-border-radius': 'var(--ti-common-border-radius-4)',
+  'ti-card-title-mg-bottom': 'var(--ti-common-space-4x)'
 }
diff --git a/packages/theme/src/card/vars.less b/packages/theme/src/card/vars.less
index 9ad08a9f47..9b3f2ee0d8 100644
--- a/packages/theme/src/card/vars.less
+++ b/packages/theme/src/card/vars.less
@@ -82,4 +82,6 @@
   --ti-card-option-disabled-text-color: var(--ti-common-color-text-disabled);
   // 卡片的'更多'的字体颜色
   --ti-card-footer-more-text-color: var(--ti-base-color-common-9);
+  // 卡片标题下边距
+  --ti-card-title-mg-bottom: var(--ti-common-space-3x);
 }
diff --git a/packages/theme/src/chart-core/index.less b/packages/theme/src/chart-core/index.less
index aa78f0458e..20b2e8fcc2 100644
--- a/packages/theme/src/chart-core/index.less
+++ b/packages/theme/src/chart-core/index.less
@@ -17,7 +17,7 @@
 
 .hui-chart {
   position: relative;
-  height: 100%
+  height: 100%;
 }
 
 .@{chart-prefix-cls} {
diff --git a/packages/theme/src/checkbox/index.less b/packages/theme/src/checkbox/index.less
index b0f6c6fd5b..cc6a059cd4 100644
--- a/packages/theme/src/checkbox/index.less
+++ b/packages/theme/src/checkbox/index.less
@@ -73,6 +73,7 @@
       transform: rotate(45deg) scaleY(0);
       transition: transform 0.15s ease-in 0.05s;
       transform-origin: center;
+      left: 0;
     }
   }
 
diff --git a/packages/theme/src/collapse-item/aurora-theme.js b/packages/theme/src/collapse-item/aurora-theme.js
index 4b6da1a5dd..e93c26a657 100644
--- a/packages/theme/src/collapse-item/aurora-theme.js
+++ b/packages/theme/src/collapse-item/aurora-theme.js
@@ -19,7 +19,7 @@ export const tinyCollapseitemAuroraTheme = {
   'ti-collapse-item-content-padding-bottom': 'var(--ti-common-space-6x)',
   'ti-collapse-item-content-padding-right': 'var(--ti-common-space-6x)',
   'ti-collapse-item-content-padding-top': 'var(--ti-common-space-0)',
-  'ti-collapse-item-arrow-transform': 'rotate(0)',
-  'ti-collapse-item-is-active-arrow-transform': 'rotate(90deg)',
+  'ti-collapse-item-arrow-transform': 'rotate(-90deg)',
+  'ti-collapse-item-is-active-arrow-transform': 'rotate(0)',
   'ti-collapse-item-is-active-arrow-text-color': '#1890ff'
 }
diff --git a/packages/theme/src/collapse-item/smb-theme.js b/packages/theme/src/collapse-item/smb-theme.js
index bff91096ee..fa2b3e2838 100644
--- a/packages/theme/src/collapse-item/smb-theme.js
+++ b/packages/theme/src/collapse-item/smb-theme.js
@@ -15,5 +15,7 @@ export const tinyCollapseItemSmbTheme = {
   'ti-collapse-item-header-border-color': 'var(--ti-base-color-common-5)',
   'ti-collapse-item-title-right-color': '#1476ff',
   'ti-collapse-item-title-right-fill': '#1476ff',
+  'ti-collapse-item-header-bg-color': 'var(--ti-common-color-bg-white-normal)',
+  'ti-collapse-item-wrap-bg-color': 'var(--ti-common-bg-minor)',
   'ti-collapse-item-arrow-margin-right': 'var(--ti-common-space-3x)'
 }
diff --git a/packages/theme/src/dialog-box/index.less b/packages/theme/src/dialog-box/index.less
index 3eb08b65e5..9849f8749a 100644
--- a/packages/theme/src/dialog-box/index.less
+++ b/packages/theme/src/dialog-box/index.less
@@ -43,13 +43,8 @@
     top: 0;
     width: 100vw;
     height: 100vh;
-
-    .@{dialog-box-prefix-cls}__footer {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100vw;
-    }
+    display: flex;
+    flex-direction: column;
   }
 
   &.is-center {
@@ -60,7 +55,8 @@
   }
 
   &.is-fullscreen &__body {
-    max-height: calc(100vh - 94px);
+    flex: 1;
+    overflow: scroll;
   }
 
   & &__header {
@@ -74,7 +70,6 @@
     align-items: center;
     font-size: var(--ti-dialog-box-head-title-font-size);
     color: var(--ti-dialog-box-head-title-text-color);
-    font-weight: var(--ti-dialog-box-head-title-font-weight);
     border-bottom: 1px solid var(--ti-dialog-box-head-border-bottom-color);
 
     .@{dialog-box-prefix-cls}__title {
@@ -204,24 +199,10 @@
   }
 }
 
-.popup-parent--hidden {
+.dialog-box__scroll-lock {
   overflow: hidden;
 }
 
-body:not(.popup-parent--hidden) {
-  .v-modal {
-    pointer-events: none;
-  }
-
-  .@{dialog-box-prefix-cls}__wrapper {
-    pointer-events: none;
-
-    .@{dialog-box-prefix-cls} {
-      pointer-events: auto;
-    }
-  }
-}
-
 .v-modal {
   position: fixed;
   left: 0;
@@ -329,16 +310,16 @@ body:not(.popup-parent--hidden) {
 .enlarge-enter-active {
   animation: enlarge-in 350ms linear;
 }
- 
+
 @keyframes enlarge-in {
   0% {
     transform: scale(0);
   }
- 
+
   50% {
     transform: scale(0.5);
   }
- 
+
   100% {
     transform: scale(1);
   }
diff --git a/packages/theme/src/divider/smb-theme.js b/packages/theme/src/divider/smb-theme.js
index e55b206b79..e0ea2a06c2 100644
--- a/packages/theme/src/divider/smb-theme.js
+++ b/packages/theme/src/divider/smb-theme.js
@@ -1,7 +1,7 @@
-export const tinyDialogSelectAuroraTheme = {
-  'ti-divider-dividing-line': 'var(--ti-common-color-dark)',
+export const tinyDividerSmbTheme = {
+  'ti-divider-dividing-line': 'var(--ti-common-color-bg-dark-disabled)',
   'ti-divider-horizontal-opacity': 0.5,
   'ti-divider-vertical-opacity': 0.5,
   'ti-divider-text-color': 'var(--ti-common-color-text-primary)',
-  'ti-divider-text-bg-color': 'var(--ti-base-color-white)'
+  'ti-divider-text-bg-color': 'var(--ti-common-color-line-dividing)'
 }
diff --git a/packages/theme/src/fluent-editor/index.less b/packages/theme/src/fluent-editor/index.less
new file mode 100644
index 0000000000..e7d1bf8811
--- /dev/null
+++ b/packages/theme/src/fluent-editor/index.less
@@ -0,0 +1,284 @@
+@import '../custom.less';
+@import '../mixins/common.less';
+
+@editor-wrapper-prefix-cls: ~'@{css-prefix}editor-wrapper';
+@editor-prefix-cls: ~'@{css-prefix}editor';
+
+.@{editor-wrapper-prefix-cls} {
+  border: 1px solid #bbbbbb;
+  border-radius: 4px;
+
+  .ql-toolbar.ql-snow {
+    padding: 8px 16px 4px 16px;
+    border: none;
+
+    .ql-formats {
+      margin-right: 16px;
+      margin-bottom: 4px;
+
+      .ql-color-picker {
+        .ql-picker-label {
+          > div {
+            display: flex;
+            align-items: center;
+            height: 100%;
+          }
+        }
+      }
+
+      .ql-picker-label {
+        padding: 0;
+        border: none;
+        padding: 0 28px 0 8px;
+
+        &:hover,
+        &.ql-active {
+          color: #191919;
+        }
+      }
+
+      span.ql-font,
+      span.ql-size,
+      span.ql-lineheight,
+      span.ql-header {
+        .ql-picker-label {
+          color: #191919;
+          border: 1px solid transparent;
+          border-radius: 2px;
+
+          > svg {
+            display: none;
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            width: 14px;
+            height: 14px;
+            right: 8px;
+            top: calc(50% + 1px);
+            transform: translateY(-50%);
+            background: url(../images/chevron-down.svg) no-repeat center/100%;
+          }
+        }
+
+        .ql-picker-label:hover {
+          border-color: #191919;
+        }
+      }
+
+      span.ql-font {
+        width: 96px;
+      }
+
+      span.ql-lineheight {
+        > span {
+          width: 60px;
+        }
+      }
+
+      span.ql-header {
+        width: 104px;
+      }
+
+      > span.ql-picker:not(:last-of-type) {
+        margin-right: 8px;
+      }
+
+      span.ql-picker.ql-expanded,
+      span.ql-picker.ql-expanded:hover {
+        .ql-picker-label {
+          border-color: #0072e8;
+
+          svg {
+            fill: #0072e8;
+          }
+        }
+
+        .ql-picker-options {
+          padding: 4px 0;
+          border: none;
+
+          > .ql-picker-item {
+            height: 24px;
+            line-height: 24px;
+            padding: 0 8px;
+            color: #191919;
+
+            &:hover {
+              background-color: rgba(25, 25, 25, 0.1);
+              color: #191919;
+            }
+          }
+        }
+
+        &.ql-align {
+          .ql-picker-options {
+            > .ql-picker-item {
+              width: 100%;
+              padding: 0 6px;
+            }
+          }
+        }
+      }
+
+      .ql-color.ql-picker,
+      .ql-background.ql-picker,
+      .ql-align.ql-picker {
+        width: auto;
+        margin-right: 8px;
+
+        &:last-of-type {
+          margin-right: 0;
+        }
+
+        .ql-picker-label,
+        .ql-picker-options {
+          padding: 0;
+
+          svg {
+            font-size: 16px;
+          }
+        }
+      }
+
+      .ql-align.ql-picker {
+        .ql-picker-label {
+          padding: 0 6px;
+        }
+      }
+
+      .ql-background.ql-picker {
+        margin-right: 0;
+      }
+
+      .ql-direction {
+        &:not(.ql-active) {
+          > div:first-child {
+            svg {
+              display: inline-block;
+            }
+          }
+        }
+
+        &.ql-active {
+          > div:last-child {
+            svg {
+              display: inline-block;
+            }
+          }
+        }
+      }
+
+      > button {
+        padding: 0;
+        width: auto;
+        margin-right: 8px;
+
+        svg {
+          font-size: 16px;
+        }
+
+        &:hover {
+          svg {
+            fill: #0072e8;
+          }
+        }
+        &.ql-fullscreen {
+          svg {
+            font-size: 12px;
+          }
+        }
+      }
+
+      button:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .@{editor-prefix-cls} {
+    &.ql-container.ql-snow {
+      border: none;
+    }
+
+    .ql-editor {
+      padding: 8px 0 86px 0;
+      margin: 0 16px;
+      border-top: 1px solid #dddddd;
+    }
+    .ql-tooltip {
+      a.ql-preview,
+      a.ql-remove {
+        position: relative;
+        height: 28px;
+
+        .icon-share,
+        .icon-delete {
+          &::before {
+            display: none;
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            width: 14px;
+            height: 14px;
+            right: 0;
+            top: calc(50% + 1px);
+            transform: translateY(-50%);
+          }
+        }
+
+        .icon-share {
+          &::after {
+            background: url(../images/share-arrow.svg) no-repeat center/100%;
+          }
+        }
+
+        .icon-delete {
+          &::after {
+            background: url(../images/del.svg) no-repeat center/100%;
+          }
+        }
+      }
+    }
+  }
+
+  .toolbar-icon {
+    position: absolute;
+    left: -9999px;
+    opacity: 0;
+    z-index: -1;
+    width: 0;
+    height: 0;
+  }
+}
+
+#editor {
+  .ql-tooltip {
+    a.ql-preview,
+    a.ql-remove {
+      min-width: 16px;
+      margin: 0 8px 0 0;
+      padding: 0;
+
+      &:hover {
+        background-color: #fff;
+      }
+    }
+
+    a.ql-preview {
+      margin-left: 6px;
+    }
+  }
+}
+
+.fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+}
diff --git a/packages/theme/src/grid-toolbar/index.less b/packages/theme/src/grid-toolbar/index.less
index ce2d7167d0..b93e827345 100644
--- a/packages/theme/src/grid-toolbar/index.less
+++ b/packages/theme/src/grid-toolbar/index.less
@@ -36,7 +36,7 @@
   }
 
   .@{grid-custom-prefix-cls} {
-    &__tabs {
+    .@{grid-custom-prefix-cls}__tabs {
       padding-top: 28px;
 
       .@{grid-custom-prefix-cls}__tabs-head {
@@ -117,13 +117,13 @@
                 .clear-all {
                   color: #1890ff;
                   cursor: pointer;
-                  margin-left: 16px;
+                  margin-left: 12px;
                 }
 
                 span:not(.clear-all) {
                   display: inline-block;
                   text-align: center;
-                  width: 60px;
+                  width: 62px;
                 }
               }
 
@@ -150,16 +150,28 @@
                 }
               }
 
-              ul {
+              .column-list-panel {
                 height: calc(100% - 20px);
                 overflow-y: auto;
 
-                li {
-                  height: 32px;
-                  padding: 0 8px 0 6px;
-                  display: flex;
-                  justify-content: space-between;
-                  align-items: center;
+                .column-list-item {
+                  transition: all 0.3s ease-in-out;
+                  display: grid;
+                  grid-template-rows: 1fr;
+                  height: auto;
+                  min-height: 32px;
+                  overflow: hidden;
+                  transform-origin: center;
+                  cursor: pointer;
+
+                  &.item-collapse {
+                    grid-template-rows: 0fr;
+                  }
+
+                  > div {
+                    width: 100%;
+                    min-height: 0;
+                  }
 
                   &.show-dropdown .dropdown-column .set-btn {
                     visibility: visible;
@@ -167,11 +179,25 @@
 
                   .sort-number {
                     width: 40px;
+                    text-align: center;
+
+                    .sort-number-display {
+                      height: 24px;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      cursor: pointer;
+                      background-color: transparent;
+
+                      &:hover {
+                        background-color: #fff;
+                      }
+                    }
                   }
 
                   .name {
                     flex: 1;
-                    margin: 0 16px;
+                    margin: 0 8px;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
@@ -183,6 +209,10 @@
                     }
                   }
 
+                  .child-name {
+                    padding-left: 32px;
+                  }
+
                   .close-icon {
                     visibility: hidden;
                     cursor: pointer;
@@ -239,36 +269,56 @@
                     width: 60px;
                   }
 
-                  &:hover {
-                    background-color: #f5f6f8;
+                  .column-container {
+                    display: flex;
+                    align-items: center;
 
-                    .close-icon {
-                      visibility: visible;
+                    &.with-padding {
+                      padding: 0 8px 0 6px;
                     }
 
-                    .close-icon.visibility-hidden {
-                      visibility: hidden;
+                    .icon-expand {
+                      margin-left: 4px;
+                      margin-right: -4px;
+                      transition: transform 0.3s ease-in-out;
+                      transform: rotateZ(0);
                     }
 
-                    .close-icon svg {
-                      fill: #8d959e;
+                    .icon-collapse {
+                      transform: rotateZ(90deg);
                     }
 
-                    .set-btn:not(.visibility-hidden) {
-                      visibility: visible;
-                    }
+                    &:hover {
+                      background-color: #f5f6f8;
 
-                    .@{input-prefix-cls} {
-                      &:hover .@{input-prefix-cls}__inner {
-                        background-color: #fff;
+                      .close-icon {
+                        visibility: visible;
                       }
 
-                      .@{input-prefix-cls}__inner {
-                        background-color: #f5f6f8;
+                      .close-icon.visibility-hidden {
+                        visibility: hidden;
                       }
 
-                      .@{input-prefix-cls}__suffix {
-                        display: block;
+                      .close-icon svg {
+                        fill: #8d959e;
+                      }
+
+                      .set-btn:not(.visibility-hidden) {
+                        visibility: visible;
+                      }
+
+                      .@{input-prefix-cls} {
+                        &:hover .@{input-prefix-cls}__inner {
+                          background-color: #fff;
+                        }
+
+                        .@{input-prefix-cls}__inner {
+                          background-color: #f5f6f8;
+                        }
+
+                        .@{input-prefix-cls}__suffix {
+                          display: block;
+                        }
                       }
                     }
                   }
@@ -278,12 +328,27 @@
 
             .left-panel {
               padding: 16px 18px 16px 24px;
+
+              .tiny-tree {
+                padding: 0;
+                margin-left: -8px;
+                margin-right: -6px;
+              }
+
+              .multi-check-all-btn {
+                margin-bottom: 10px;
+                margin-left: 20px;
+              }
             }
 
             .right-panel {
               padding: 20px;
               height: 100%;
               box-sizing: border-box;
+
+              .child-dropdown {
+                margin-right: 40px;
+              }
             }
 
             .group-label {
diff --git a/packages/theme/src/grid/smb-theme.js b/packages/theme/src/grid/smb-theme.js
index 7e6b16715a..8d152ccdb7 100644
--- a/packages/theme/src/grid/smb-theme.js
+++ b/packages/theme/src/grid/smb-theme.js
@@ -35,5 +35,6 @@ export const tinyGridSmbTheme = {
   'ti-grid-row-selected-background-color': '#f0f7ff',
   'ti-grid-expand-background-color': '#fafafa',
   'ti-grid-loading-background-color': 'rgba(255, 255, 255, 0.67)',
-  'ti-grid-tree-expand-icon-font-size': 'var(--ti-common-font-size-2)'
+  'ti-grid-tree-expand-icon-font-size': 'var(--ti-common-font-size-2)',
+  'ti-grid-tree-expand-icon-translate-x': '-2px'
 }
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index 7dc1a15823..41c3b4b352 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -819,7 +819,7 @@
           display: inline-flex;
           justify-content: center;
           align-items: center;
-          transform: translateX(-4px);
+          transform: translateX(var(--ti-grid-tree-expand-icon-translate-x));
           flex-shrink: 0;
           svg {
             font-size: var(--ti-grid-tree-expand-icon-font-size);
@@ -1149,6 +1149,59 @@
       }
     }
   }
+
+  &.row__drop-handle--index {
+    .@{grid-prefix-cls}__body-wrapper td.col__index {
+      position: relative;
+
+      .row__drop-handle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 8px;
+        height: 100%;
+        cursor: grab;
+
+        &::before {
+          --row-drop-handle-bgcolor: #8d959e;
+          content: '';
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 8px;
+          height: 14px;
+          background-image: linear-gradient(
+              180deg,
+              var(--row-drop-handle-bgcolor) 0 2px,
+              transparent 2px 6px,
+              var(--row-drop-handle-bgcolor) 6px 8px,
+              transparent 8px 12px,
+              var(--row-drop-handle-bgcolor) 12px 14px
+            ),
+            linear-gradient(180deg, transparent, transparent),
+            linear-gradient(
+              180deg,
+              var(--row-drop-handle-bgcolor) 0 2px,
+              transparent 2px 6px,
+              var(--row-drop-handle-bgcolor) 6px 8px,
+              transparent 8px 12px,
+              var(--row-drop-handle-bgcolor) 12px 14px
+            );
+          background-position:
+            0 0,
+            2px 0,
+            6px 0;
+          background-size:
+            2px 14px,
+            4px 14px,
+            2px 14px;
+          background-repeat: no-repeat;
+        }
+      }
+    }
+  }
 }
 
 // 表格全屏样式
diff --git a/packages/theme/src/grid/toolbar.less b/packages/theme/src/grid/toolbar.less
index e4c85b52b9..b73a0b06ad 100644
--- a/packages/theme/src/grid/toolbar.less
+++ b/packages/theme/src/grid/toolbar.less
@@ -24,6 +24,11 @@
 .@{grid-toolbar-prefix-cls} {
   padding: 12px 0;
 
+  // Tiny 新增，工具栏容器为空则不需要占位
+  &:empty {
+    display: none;
+  }
+
   &:after {
     content: '';
     display: block;
diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less
index 4e0d6a7b89..5e6997d1f8 100644
--- a/packages/theme/src/grid/vars.less
+++ b/packages/theme/src/grid/vars.less
@@ -197,4 +197,6 @@
   --ti-grid-expand-background-color: '';
   // 表格树表展开行图标大小
   --ti-grid-tree-expand-icon-font-size: var(--ti-common-font-size-1, 14px);
+  // 表格树表展开行图标向左偏移量(hide)
+  --ti-grid-tree-expand-icon-translate-x: -4px;
 }
diff --git a/packages/theme/src/guide/index.less b/packages/theme/src/guide/index.less
index 191bbbe063..fbf9b4055a 100644
--- a/packages/theme/src/guide/index.less
+++ b/packages/theme/src/guide/index.less
@@ -7,7 +7,7 @@
   .shepherd-arrow {
     height: calc(var(--ti-guide-arrow-height) * 1.4);
     position: absolute;
-    width: calc(var(--ti-guide-arrow-width) * 1.4) ;
+    width: calc(var(--ti-guide-arrow-width) * 1.4);
     z-index: -10;
     overflow: hidden;
     &:before {
@@ -42,7 +42,7 @@
       background-color: var(--ti-guide-header-bg-color);
 
       .shepherd-title {
-        font-size: 18px;
+        font-size: var(--ti-guide-title-text-font-size);
         color: var(--ti-guide-title-text-color);
         line-height: var(--ti-guide-title-line-height);
         font-weight: var(--ti-guide-title-font-weight);
@@ -73,6 +73,7 @@
           font-weight: var(--ti-guide-cancel-icon-font-weight);
           transform: rotate(-360deg);
           margin-top: var(--ti-guide-cancel-icon-margin-top);
+          margin-right: var(--ti-guide-cancel-icon-margin-right);
         }
 
         span:hover {
@@ -134,7 +135,7 @@
 
       .progress-style {
         position: absolute;
-        left: 24px;
+        left: var(--ti-guide-progress-style-left);
         font-size: 14px;
         color: var(--ti-guide-progresss-text-color);
         font-weight: 400;
@@ -146,13 +147,14 @@
         background-color: var(--ti-guide-button-bg-color);
         cursor: pointer;
         border-radius: var(--ti-guide-button-border-radius);
-        border: 0;
-        width: 96px;
-        height: 32px;
+        border: 1px solid var(--ti-guide-button-border);
+        width: var(--ti-guide-button-width);
+        height: var(--ti-guide-button-height);
         margin-left: 8px;
         transition: all 0.5s ease;
 
         &:hover {
+          border-color: var(--ti-guide-button-hover-border-color);
           background-color: var(--ti-guide-button-hover-bg-color);
         }
 
@@ -220,6 +222,7 @@
 
     .shepherd-text {
       padding-right: 52px;
+      margin-top: 12px;
     }
   }
 
diff --git a/packages/theme/src/guide/smb-theme.js b/packages/theme/src/guide/smb-theme.js
new file mode 100644
index 0000000000..8a1839767f
--- /dev/null
+++ b/packages/theme/src/guide/smb-theme.js
@@ -0,0 +1,27 @@
+export const tinyGuideSmbTheme = {
+  'ti-guide-header-padding-top': 'var(--ti-common-space-4x)',
+  'ti-guide-header-padding-left': 'var(--ti-common-space-4x)',
+  'ti-guide-header-padding-right': 'var(--ti-common-space-4x)',
+  'ti-guide-footer-padding-left': 'var(--ti-common-space-4x)',
+  'ti-guide-footer-padding-right': 'var(--ti-common-space-4x)',
+  'ti-guide-footer-padding-bottom': 'var(--ti-common-space-4x)',
+  'ti-guide-text-padding-horizontal': 'var(--ti-common-space-4x)',
+  'ti-guide-text-padding-bottom': 'var(--ti-common-space-6x)',
+  'ti-guide-text-padding-top': 'var(--ti-common-space-2x)',
+  'ti-guide-button-width': 'calc(var(--ti-common-line-height-8) + 8px)',
+  'ti-guide-button-height': 'var(--ti-common-line-height-2)',
+  'ti-guide-progress-style-left': 'var(--ti-common-space-4x)',
+  'ti-guide-title-text-font-size': 'var(--ti-common-font-size-2)',
+  'ti-guide-title-line-height': 'var(--ti-common-line-height-2)',
+  'ti-guide-text-line-height': 'var(--ti-common-line-height-2)',
+  'ti-guide-button-bg-color': 'var(--ti-base-color-bg-5)',
+  'ti-guide-button-text-color': '#191919',
+  'ti-guide-button-hover-bg-color': 'var(--ti-base-color-bg-5)',
+  'ti-guide-button-active-bg-color': 'var(--ti-base-color-bg-5)',
+  'ti-guide-button-focus-bg-color': 'var(--ti-base-color-bg-5)',
+  'ti-guide-button-hover-border-color': '#191919',
+  'ti-guide-button-border': '#c2c2c2',
+  'ti-guide-cancel-icon-margin-top': 'calc(var(--ti-common-space-base) * (-3))',
+  'ti-guide-cancel-icon-margin-right': 'var(--ti-common-space-0)',
+  'ti-guide-button-border-radius': 'var(--ti-common-size-25x)'
+}
diff --git a/packages/theme/src/guide/vars.less b/packages/theme/src/guide/vars.less
index ad3c7b02a7..e308999086 100644
--- a/packages/theme/src/guide/vars.less
+++ b/packages/theme/src/guide/vars.less
@@ -23,6 +23,8 @@
   --ti-guide-title-line-height: var(--ti-common-line-height-6, 32px);
   // 引导框标题字重
   --ti-guide-title-font-weight: var(--ti-common-font-weight-7, bold);
+  // 引导框标题字号
+  --ti-guide-title-text-font-size: var(--ti-common-font-size-3, 18px);
   // 引导框关闭按钮图标字号
   --ti-guide-cancel-icon-font-size: var(--ti-common-font-size-5, 24px);
   // 引导框关闭按钮图标宽度
@@ -37,6 +39,10 @@
   --ti-guide-cancel-icon-font-weight: var(--ti-common-font-weight-1, 100);
   // 引导框关闭按钮图标顶部外边距
   --ti-guide-cancel-icon-margin-top: -6px;
+  // 引导框关闭按钮图标顶部外边距
+  --ti-guide-cancel-icon-margin-right: var(--ti-common-space-0, 0px);
+  // 引导框关闭按钮图标顶部外边距
+  --ti-guide-progress-style-left: var(--ti-common-space-6x, 24px);
   // 引导框关闭按钮图标悬浮色
   --ti-guide-cancel-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
   // 引导框内容文本色
@@ -75,12 +81,16 @@
   --ti-guide-progress-text-color: var(--ti-common-color-primary-normal, #5e7ce0);
   // 引导框按钮默认样式文本色
   --ti-guide-button-text-color: var(--ti-common-color-text-white, #fff);
+  // 引导框按钮默认样式文本色
+  --ti-guide-button-border: var(--ti-common-color-text-white, #fff);
   // 引导框按钮默认样式圆角
   --ti-guide-button-border-radius: var(--ti-common-border-radius-normal, 2px);
   // 引导框按钮默认样式背景色
   --ti-guide-button-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
   // 引导框按钮默认样式悬浮背景色
   --ti-guide-button-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
+  // 引导框按钮默认样式悬浮背景色
+  --ti-guide-button-hover-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
   // 引导框按钮默认样式聚焦背景色
   --ti-guide-button-focus-bg-color: var(--ti-common-color-primary-active, #7693f5);
   // 引导框按钮默认样式激活背景色
@@ -107,4 +117,8 @@
   --ti-guide-button-secondary-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
   // 引导框按钮透明样式禁用边框色
   --ti-guide-button-secondary-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
+  // 引导框按钮宽度
+  --ti-guide-button-width: calc(var(--ti-common-line-height-6, 48px) * 2);
+  // 引导框按钮高度
+  --ti-guide-button-height: var(--ti-common-size-height-normal, 32px);
 }
diff --git a/packages/theme/src/images/chevron-down.svg b/packages/theme/src/images/chevron-down.svg
new file mode 100644
index 0000000000..341cc9b8e9
--- /dev/null
+++ b/packages/theme/src/images/chevron-down.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" xml:space="preserve">
+<g id="Icon">
+	<g id="UI-icons-英文名" transform="translate(-832.000000, -311.000000)">
+		<g id="方向性图标" transform="translate(101.000000, 304.000000)">
+			<g id="chevron-down" transform="translate(728.000000, 0.000000)">
+				<path id="Shape" class="st0" d="M24,14c0,0.2-0.1,0.5-0.2,0.6l-8,9.9C15.6,24.9,15.3,25,15,25c-0.3,0-0.6-0.1-0.8-0.4l-7.9-9.9
+					c-0.4-0.4-0.3-1.1,0.2-1.4c0.4-0.4,1.1-0.3,1.4,0.2l7.2,8.9l7.2-8.9c0.4-0.4,1-0.5,1.4-0.2C23.9,13.4,24,13.7,24,14z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/packages/theme/src/images/credit-amex.png b/packages/theme/src/images/credit-amex.png
deleted file mode 100644
index af3277e076..0000000000
Binary files a/packages/theme/src/images/credit-amex.png and /dev/null differ
diff --git a/packages/theme/src/images/credit-background.jpeg b/packages/theme/src/images/credit-background.jpeg
deleted file mode 100644
index 892ff61288..0000000000
Binary files a/packages/theme/src/images/credit-background.jpeg and /dev/null differ
diff --git a/packages/theme/src/images/credit-chip.png b/packages/theme/src/images/credit-chip.png
deleted file mode 100644
index 4f36e9a0e1..0000000000
Binary files a/packages/theme/src/images/credit-chip.png and /dev/null differ
diff --git a/packages/theme/src/images/credit-dinersclub.png b/packages/theme/src/images/credit-dinersclub.png
deleted file mode 100644
index fc2362d68d..0000000000
Binary files a/packages/theme/src/images/credit-dinersclub.png and /dev/null differ
diff --git a/packages/theme/src/images/credit-discover.png b/packages/theme/src/images/credit-discover.png
deleted file mode 100644
index 56413f6eef..0000000000
Binary files a/packages/theme/src/images/credit-discover.png and /dev/null differ
diff --git a/packages/theme/src/images/credit-jcb.png b/packages/theme/src/images/credit-jcb.png
deleted file mode 100644
index a56c2bb4a8..0000000000
Binary files a/packages/theme/src/images/credit-jcb.png and /dev/null differ
diff --git a/packages/theme/src/images/credit-mastercard.png b/packages/theme/src/images/credit-mastercard.png
deleted file mode 100644
index 08391bb76c..0000000000
Binary files a/packages/theme/src/images/credit-mastercard.png and /dev/null differ
diff --git a/packages/theme/src/images/credit-troy.png b/packages/theme/src/images/credit-troy.png
deleted file mode 100644
index 68fe3fb786..0000000000
Binary files a/packages/theme/src/images/credit-troy.png and /dev/null differ
diff --git a/packages/theme/src/images/credit-unionpay.png b/packages/theme/src/images/credit-unionpay.png
deleted file mode 100644
index 5c13a96fbe..0000000000
Binary files a/packages/theme/src/images/credit-unionpay.png and /dev/null differ
diff --git a/packages/theme/src/images/credit-visa.png b/packages/theme/src/images/credit-visa.png
deleted file mode 100644
index 912b8139e0..0000000000
Binary files a/packages/theme/src/images/credit-visa.png and /dev/null differ
diff --git a/packages/theme/src/images/del.svg b/packages/theme/src/images/del.svg
new file mode 100644
index 0000000000..f9697a9f5b
--- /dev/null
+++ b/packages/theme/src/images/del.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" xml:space="preserve">
+<g id="Icon">
+	<g id="UI-icons-英文名" transform="translate(-622.000000, -1647.000000)">
+		<g id="网站通用图标" transform="translate(101.000000, 1053.000000)">
+			<g id="del" transform="translate(519.000000, 593.000000)">
+				<path id="Shape" class="st0" d="M24.8,6.3C24.6,6.1,24.2,6,24,6h-4V4.7C20,3.7,19.1,3,18.2,3h-7.4C9.9,3,9,3.7,9,4.7V6H5
+					C4.5,6,4,6.5,4,7s0.5,1,1,1h1v14c0,0.9,1.1,2,2,2l13,0c0.9,0,2-1.1,2-2V8h1c0.5,0,1-0.5,1-1C25,6.8,25,6.4,24.8,6.3z M11,5h7v1
+					h-7V5z M8,22V8h1.9H21v14H8z"/>
+				<path id="Rectangle-3" class="st0" d="M12,10L12,10c0.6,0,1,0.4,1,1v8c0,0.6-0.4,1-1,1l0,0c-0.6,0-1-0.4-1-1v-8
+					C11,10.4,11.4,10,12,10z"/>
+				<path id="Rectangle-3-Copy" class="st0" d="M17,10L17,10c0.6,0,1,0.4,1,1v8c0,0.6-0.4,1-1,1l0,0c-0.6,0-1-0.4-1-1v-8
+					C16,10.4,16.4,10,17,10z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/packages/theme/src/images/share-arrow.svg b/packages/theme/src/images/share-arrow.svg
new file mode 100644
index 0000000000..b4d3be6275
--- /dev/null
+++ b/packages/theme/src/images/share-arrow.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="1920" stroke="none" stroke-width="1">
+        <g id="编组">
+            <path d="M13.2,3.9990003 C13.614,3.9990003 13.95,4.3350003 13.95,4.7490003 C13.95,5.1640003 13.614,5.4990003 13.2,5.4990003 L5,5.4990003 C4.173,5.4990003 3.5,6.1720003 3.5,6.9990003 L3.5,17.0000003 C3.5,17.8260003 4.173,18.4990003 5,18.4990003 L19,18.4990003 C19.827,18.4990003 20.5,17.8260003 20.5,17.0000003 L20.5,13.5 C20.5,13.086 20.836,12.75 21.25,12.75 C21.664,12.75 22,13.086 22,13.5 L22,17.0000003 C22,18.6530003 20.654,19.9990003 19,19.9990003 L5,19.9990003 C3.346,19.9990003 2,18.6530003 2,17.0000003 L2,6.9990003 C2,5.3450003 3.346,3.9990003 5,3.9990003 L13.2,3.9990003 Z M18.0023164,3.3383773 L22.6603164,7.9953773 C22.8773164,8.2123773 22.9973164,8.5023773 22.9973164,8.8103773 C22.9973164,9.1183773 22.8773164,9.4083773 22.6593164,9.6253773 L18.0013164,14.2833773 C17.7823164,14.5033773 17.4883164,14.6213773 17.1883164,14.6213773 C17.0393164,14.6213773 16.8903164,14.5923773 16.7473164,14.5343773 C16.3143164,14.3553773 16.0353164,13.9363773 16.0353164,13.4683773 L16.0351258,11.5292019 C12.4830849,11.495301 10.0281134,12.6100234 8.57782162,14.8565538 C8.353165,15.2045513 7.88893709,15.3045389 7.54093956,15.0798823 C7.46994218,15.0340485 7.4092677,14.9782431 7.35956687,14.9154874 C7.23782579,14.7653384 7.17241449,14.5686069 7.19411637,14.3611773 C7.20284807,14.2806516 8.11237143,6.53351357 16.0347724,6.07168054 L16.0353164,4.1523773 C16.0353164,3.6843773 16.3143164,3.2663773 16.7463164,3.0873773 C17.1803164,2.9093773 17.6713164,3.0083773 18.0023164,3.3383773 Z M17.5353164,4.9923773 L17.5353164,6.8003773 C17.5353164,7.1798773 17.252983,7.49383564 16.8870421,7.54352661 L16.7851164,7.5501773 C12.577034,7.5501773 10.5375514,9.78189146 9.55995782,11.7208231 C11.3896788,10.4624236 13.8092457,9.90786691 16.783675,10.0506395 C16.9072215,10.0565697 17.0223473,10.0920719 17.1225361,10.1499726 C17.367194,10.273708 17.5353164,10.5275285 17.5353164,10.8203773 L17.5353164,12.6283773 L21.3533164,8.8103773 L17.5353164,4.9923773 Z" id="形状结合"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/theme/src/modal/index.less b/packages/theme/src/modal/index.less
index 50ebbc2f9b..9743581464 100644
--- a/packages/theme/src/modal/index.less
+++ b/packages/theme/src/modal/index.less
@@ -417,7 +417,7 @@
 
   &__footer {
     flex-shrink: 0;
-    text-align: center;
+    text-align: var(--ti-modal-footer-align);
     padding: var(--ti-modal-footer-padding-top) var(--ti-modal-footer-padding-horizontal)
       var(--ti-modal-footer-padding-bottom);
 
diff --git a/packages/theme/src/modal/smb-theme.js b/packages/theme/src/modal/smb-theme.js
index 8d39b68626..1ad667c150 100644
--- a/packages/theme/src/modal/smb-theme.js
+++ b/packages/theme/src/modal/smb-theme.js
@@ -1,7 +1,7 @@
 export const tinyModalSmbTheme = {
   'ti-modal-box-shadow': 'var(--ti-common-shadow-4-down)',
   'ti-modal-header-font-size': 'var(--ti-common-font-size-4)',
-  'ti-modal-header-padding-bottom': 'var(--ti-common-space-6x)',
+  'ti-modal-header-padding-bottom': 'var(--ti-common-space-4x)',
   'ti-modal-box-border-radius': 'var(--ti-common-border-radius-4)',
   'ti-modal-close-btn-font-size': 'var(--ti-common-font-size-4)',
   'ti-modal-close-btn-icon-color': 'var(--ti-common-color-icon-normal)',
@@ -17,5 +17,8 @@ export const tinyModalSmbTheme = {
   'ti-modal-message-padding-vertical': 'calc(var(--ti-common-space-10) - 0.5px)',
   'ti-modal-message-body-padding-horizontal': 'var(--ti-common-space-0)',
   'ti-modal-message-icon-box-height': 'calc(var(--ti-common-space-5x) - 1px)',
-  'ti-modal-notification-header-padding-bottom': 'var(--ti-common-space-4x)'
+  'ti-modal-notification-header-padding-bottom': 'var(--ti-common-space-4x)',
+  'ti-modal-footer-align': 'right',
+  'ti-modal-body-text-color': 'var(--ti-common-color-text-secondary)',
+  'ti-modal-body-text-bottom': 'var(--ti-common-space-4x)'
 }
diff --git a/packages/theme/src/modal/vars.less b/packages/theme/src/modal/vars.less
index 7cfa8edba8..90a64dd537 100644
--- a/packages/theme/src/modal/vars.less
+++ b/packages/theme/src/modal/vars.less
@@ -58,6 +58,8 @@
   --ti-modal-footer-padding-horizontal: var(--ti-common-space-8x, 32px);
   // 底部下内边距
   --ti-modal-footer-padding-bottom: var(--ti-common-space-8x, 32px);
+  // 底部按钮位置
+  --ti-modal-footer-align: center;
   // 底部按钮圆角
   --ti-modal-footer-btn-border-radius: var(--ti-common-border-radius-normal, 2px);
   // 底部按钮最小宽度
diff --git a/packages/theme/src/option/aurora-theme.js b/packages/theme/src/option/aurora-theme.js
index 0f44815cb8..5e27fbdc69 100644
--- a/packages/theme/src/option/aurora-theme.js
+++ b/packages/theme/src/option/aurora-theme.js
@@ -2,5 +2,7 @@ export const tinyOptionAuroraTheme = {
   'ti-option-bg-color-selected': 'var(--ti-common-color-selected-background)',
   'ti-option-hover-bg-color-selected': 'var(--ti-common-color-selected-background)',
   'ti-option-highlight-selected-text-color': 'var(--ti-common-color-text-highlight)',
+  'ti-option-selected-bg-color': 'var(--ti-common-color-icon-normal)',
+  'ti-option-checkbox-border-color-hover': 'var(--ti-common-color-primary-disabled)',
   'ti-option-padding-horizontal-group': 'var(--ti-common-space-2x)'
 }
diff --git a/packages/theme/src/option/index.less b/packages/theme/src/option/index.less
index 839bb8c646..b139239db3 100644
--- a/packages/theme/src/option/index.less
+++ b/packages/theme/src/option/index.less
@@ -138,11 +138,17 @@
     margin-bottom: 2px;
   }
 
-  .checked-sur,
-  .halfselect {
-    .@{checkbox-prefix-cls}__label {
-      font-weight: var(--ti-option-selected-font-weight);
-    }
+  .@{svg-prefix-cls} {
+    fill: var(--ti-option-checkbox-border-color-hover);
+    font-size: 16px;
+    margin-right: 8px;
+  }
+
+  &.selected .@{svg-prefix-cls},
+  &.hover .@{svg-prefix-cls},
+  .checked-sur.@{svg-prefix-cls},
+  .halfselect.@{svg-prefix-cls} {
+    fill: var(--ti-option-selected-bg-color);
   }
 
   &.memorize-highlight {
diff --git a/packages/theme/src/option/smb-theme.js b/packages/theme/src/option/smb-theme.js
index b2dc6648ee..ebee5ee42d 100644
--- a/packages/theme/src/option/smb-theme.js
+++ b/packages/theme/src/option/smb-theme.js
@@ -6,12 +6,12 @@ export const tinyOptionSmbTheme = {
   'ti-option-padding-horizontal': 'var(--ti-common-space-4x)',
   'ti-option-padding-horizontal-group': 'var(--ti-common-space-4x)',
   'ti-option-icon-color-selected': 'var(--ti-common-color-icon-graybg-active)',
-  'ti-option-checkbox-border-color-hover': '#191919',
+  'ti-option-checkbox-border-color-hover': 'var(--ti-common-color-line-normal)',
   'ti-option-disabled-text-color': 'var(--ti-common-color-text-disabled)',
   'ti-option-hover-bg-color': 'var(--ti-common-color-bg-normal)',
-  'ti-option-selected-bg-color': 'var(--ti-common-color-bg-white-normal)',
-  'ti-option-selected-bg-color-hover': 'var(--ti-common-color-bg-white-emphasize)',
+  'ti-option-selected-bg-color': 'var(--ti-common-color-text-highlight)',
+  'ti-option-selected-bg-color-hover': 'var(--ti-common-color-text-highlight)',
   'ti-option-highlight-selected-text-color': 'var(--ti-common-color-text-highlight)',
-  'ti-option-selected-text-color': '#1476FF',
-  'ti-option-checkbox-all-select-border-color-hover': '#1476FF'
+  'ti-option-selected-text-color': 'var(--ti-common-color-text-highlight)',
+  'ti-option-checkbox-all-select-border-color-hover': 'var(--ti-common-color-text-highlight)'
 }
diff --git a/packages/theme/src/select-dropdown/aurora-theme.js b/packages/theme/src/select-dropdown/aurora-theme.js
index 523f5c3ac1..5bed9d2673 100644
--- a/packages/theme/src/select-dropdown/aurora-theme.js
+++ b/packages/theme/src/select-dropdown/aurora-theme.js
@@ -5,7 +5,7 @@ export const tinySelectDropdownAuroraTheme = {
   'ti-select-dropdown-box-shadow': '0 0 4px rgba(0,0,0,0.3)', // 没有common 变量
   'ti-select-dropdown-border-weight': 'var(--ti-common-border-weight-normal)',
   'ti-select-dropdown-border-color': 'var(--ti-common-color-line-normal)',
-  'ti-option-checkbox-border-color-hover': 'var(--ti-common-color-line-hover)',
+  'ti-option-checkbox-border-color-hover': '#bfbfbf',
   'ti-select-dropdown-top-create-text-color': 'var(--ti-common-color-text-highlight)',
   'ti-select-dropdown-top-create-text-color-hover': 'var(--ti-common-color-text-link-hover)',
   'ti-select-dropdown-top-create-icon-color': 'var(--ti-common-color-icon-normal)',
diff --git a/packages/theme/src/steps/aurora-theme.js b/packages/theme/src/steps/aurora-theme.js
index e76b039cde..6f8dd3219f 100644
--- a/packages/theme/src/steps/aurora-theme.js
+++ b/packages/theme/src/steps/aurora-theme.js
@@ -38,5 +38,6 @@ export const tinyStepsAuroraTheme = {
   'ti-steps-advanced-doing-bg-color-hover': '#2e8bde',
   'ti-steps-name-margin-right': 'var(--ti-common-space-2x)',
   'ti-steps-error-bg-color': 'var(--ti-common-bg-primary)',
-  'ti-steps-disabled-icon-bg-color': 'var(--ti-common-color-bg-disabled)'
+  'ti-steps-disabled-icon-bg-color': 'var(--ti-common-color-bg-disabled)',
+  'ti-steps-error-icon-color': '#fff'
 }
diff --git a/packages/theme/src/steps/index.less b/packages/theme/src/steps/index.less
index c2a6a4ac05..a5682e6a64 100644
--- a/packages/theme/src/steps/index.less
+++ b/packages/theme/src/steps/index.less
@@ -215,6 +215,7 @@
       border-right-width: 0;
       border-color: #fff;
       border-style: solid;
+      box-sizing: border-box;
     }
 
     .left-arrow {
@@ -334,7 +335,7 @@
       .arrow {
         border-top-width: 24px;
         border-bottom-width: 24px;
-        border-left-width: 9px;
+        box-sizing: border-box;
       }
 
       .@{steps-prefix-cls}-content {
@@ -1097,6 +1098,7 @@
     cursor: pointer;
     background-color: var(--ti-steps-icon-bg-color);
     z-index: 15;
+    padding: 2px;
 
     &[class*=~'icon-'] {
       background-color: var(--ti-steps-custom-icon-bg-color);
@@ -1132,6 +1134,7 @@
       width: var(--ti-steps-custom-icon-width-height);
       height: var(--ti-steps-custom-icon-width-height);
       background-color: transparent;
+      padding: 2px;
     }
 
     &.fixicons {
diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less
index 6d6697447f..c95b528f81 100644
--- a/packages/theme/src/steps/vars.less
+++ b/packages/theme/src/steps/vars.less
@@ -66,7 +66,7 @@
   // 自定义图标背景色
   --ti-steps-custom-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
   // 自定义图标大小(hide)
-  --ti-steps-custom-icon-width-height: var(--ti-common-space-3x, 12px);
+  --ti-steps-custom-icon-width-height: var(--ti-common-space-6x, 24px);
 
   // 活跃节点背景色
   --ti-steps-advanced-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
diff --git a/packages/theme/src/tag/smb-theme.js b/packages/theme/src/tag/smb-theme.js
index a3d1259447..19cc96332d 100644
--- a/packages/theme/src/tag/smb-theme.js
+++ b/packages/theme/src/tag/smb-theme.js
@@ -19,5 +19,6 @@ export const tinyTagSMBTheme = {
   'ti-tag-close-small-margin-left': 'var(--ti-common-space-2)',
   'ti-tag-close-small-margin-right': 'calc(var(--ti-common-space-2) * -1)',
   'ti-tag-primary-close-opacity': '1',
+  'ti-tag-mini-height': 'var(--ti-common-size-3x)',
   'ti-tag-primary-close-hover-icon-color': 'var(--ti-common-color-icon-graybg-hover)'
 }
diff --git a/packages/theme/src/textarea/index.less b/packages/theme/src/textarea/index.less
index 9a459d5a9a..c4037f8fd1 100644
--- a/packages/theme/src/textarea/index.less
+++ b/packages/theme/src/textarea/index.less
@@ -68,7 +68,7 @@
     border-bottom-left-radius: var(--ti-textarea-count-border-radius);
     padding-right: var(--ti-textarea-count-padding-right);
     line-height: var(--ti-textarea-count-line-height);
-    
+
     &-text-length {
       color: var(--ti-textarea-count-text-length-color);
     }
@@ -150,8 +150,10 @@
   }
 
   &.is-display-only {
-    .@{textarea-prefix-cls}-display-only.@{textarea-prefix-cls}__inner-con .@{textarea-prefix-cls}-display-only__content,
-    .@{textarea-prefix-cls}-autosize-display-only.@{textarea-prefix-cls}__inner-con .@{textarea-prefix-cls}-display-only__content{
+    .@{textarea-prefix-cls}-display-only.@{textarea-prefix-cls}__inner-con
+      .@{textarea-prefix-cls}-display-only__content,
+    .@{textarea-prefix-cls}-autosize-display-only.@{textarea-prefix-cls}__inner-con
+      .@{textarea-prefix-cls}-display-only__content {
       position: relative;
       left: 0;
       max-width: 100%;
@@ -165,16 +167,20 @@
       white-space: pre-wrap;
       line-height: 1.5;
     }
- 
-    .@{textarea-prefix-cls}__inner-con{
+
+    .@{textarea-prefix-cls}__inner-con {
       height: auto;
- 
+
       .@{textarea-prefix-cls}__inner {
         display: none;
       }
     }
- 
+
     .@{textarea-prefix-cls}-display-only {
+      .@{textarea-prefix-cls}-display-only__wrap {
+        display: flex;
+      }
+
       .@{textarea-prefix-cls}-display-only__content {
         left: 0;
         max-width: 100%;
@@ -186,6 +192,22 @@
         overflow: hidden;
         word-wrap: break-word;
         white-space: pre-wrap;
+
+        &::before {
+          content: '';
+          float: right;
+          height: 100%;
+          margin-bottom: -14px;
+        }
+
+        .more-btn {
+          float: right;
+          clear: both;
+          color: #1890ff;
+          font-size: 12px;
+          line-height: 12px;
+          cursor: pointer;
+        }
       }
     }
 
diff --git a/packages/theme/src/theme/infinity-theme/component-vars.js b/packages/theme/src/theme/infinity-theme/component-vars.js
index 013f595c07..566005c34a 100644
--- a/packages/theme/src/theme/infinity-theme/component-vars.js
+++ b/packages/theme/src/theme/infinity-theme/component-vars.js
@@ -376,7 +376,5 @@ export const infinityConcat = {
   'ti-option-selected-bg-color': 'var(--ti-base-color-brand-1)',
   // form-item
   'ti-form-item-error-text-color': 'var(--ti-base-color-error-3)',
-  'ti-form-item-error-bg-color': '#ffd5d4',
-  // search
-  'ti-search-input-btn-width': 'var(--ti-common-size-height-minor)'
+  'ti-form-item-error-bg-color': '#ffd5d4'
 }
diff --git a/packages/theme/src/time-spinner/index.less b/packages/theme/src/time-spinner/index.less
index 7db06ab522..31aef51282 100644
--- a/packages/theme/src/time-spinner/index.less
+++ b/packages/theme/src/time-spinner/index.less
@@ -20,7 +20,7 @@
 
   &__wrapper {
     max-height: 190px;
-    overflow: auto;
+    overflow: hidden;
     display: inline-block;
     width: 50%;
     vertical-align: top;
diff --git a/packages/theme/src/user/index.less b/packages/theme/src/user/index.less
index b1a56272c7..f037207cb6 100644
--- a/packages/theme/src/user/index.less
+++ b/packages/theme/src/user/index.less
@@ -51,7 +51,7 @@
   }
 
   &_select {
-    max-width: 50%;
+    max-width: calc(50% - 4px);
     width: auto;
     font-size: var(--ti-user-font-size);
     white-space: nowrap;
diff --git a/packages/vue-common/package.json b/packages/vue-common/package.json
index 2628f39594..34919a6226 100644
--- a/packages/vue-common/package.json
+++ b/packages/vue-common/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-common",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
diff --git a/packages/vue-common/src/adapter/vue2/index.ts b/packages/vue-common/src/adapter/vue2/index.ts
index f445acd4e7..745e8e21dd 100644
--- a/packages/vue-common/src/adapter/vue2/index.ts
+++ b/packages/vue-common/src/adapter/vue2/index.ts
@@ -40,7 +40,10 @@ export const renderComponent = ({
   return () =>
     hooks.h(
       (view && view.value) || component,
-      Object.assign({ props, attrs, [extend.isSvg ? 'nativeOn' : 'on']: on, scopedSlots: { ...slots } }, extend)
+      Object.assign(
+        { props, attrs, [extend.isSvg ? 'nativeOn' : 'on']: on, ref: 'modeTemplate', scopedSlots: { ...slots } },
+        extend
+      )
     )
 }
 
diff --git a/packages/vue-common/src/adapter/vue3/index.ts b/packages/vue-common/src/adapter/vue3/index.ts
index ff963d0378..bca245e9d4 100644
--- a/packages/vue-common/src/adapter/vue3/index.ts
+++ b/packages/vue-common/src/adapter/vue3/index.ts
@@ -29,7 +29,7 @@ export const renderComponent = ({
   context: { attrs, slots },
   extend = {}
 }) => {
-  return () => hooks.h((view && view.value) || component, { ...props, ...attrs, ...extend }, slots)
+  return () => hooks.h((view && view.value) || component, { ref: 'modeTemplate', ...props, ...attrs, ...extend }, slots)
 }
 
 export const rootConfig = (context) => {
diff --git a/packages/vue-common/src/index.ts b/packages/vue-common/src/index.ts
index 0b4889e5db..abd67270ea 100644
--- a/packages/vue-common/src/index.ts
+++ b/packages/vue-common/src/index.ts
@@ -26,6 +26,12 @@ import { defineComponent, isVue2, isVue3 } from './adapter'
 import { useBreakpoint } from './breakpoint'
 import { useDefer } from './usedefer'
 
+import { useInstanceSlots as createUseInstanceSlots } from '@opentiny/vue-renderless/common/deps/useInstanceSlots'
+import { useRelation as createUseRelation } from '@opentiny/vue-renderless/common/deps/useRelation'
+
+export const useInstanceSlots = createUseInstanceSlots({ ...hooks, isVue2 })
+export const useRelation = createUseRelation({ ...hooks, isVue2 })
+
 export { useBreakpoint, useDefer }
 
 export { version } from '../package.json'
diff --git a/packages/vue/src/grid/src/button/index.ts b/packages/vue-directive/index.ts
similarity index 79%
rename from packages/vue/src/grid/src/button/index.ts
rename to packages/vue-directive/index.ts
index e13ac1346f..489aa10c52 100644
--- a/packages/vue/src/grid/src/button/index.ts
+++ b/packages/vue-directive/index.ts
@@ -9,9 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import { $install } from '@opentiny/vue-common'
-import Button from './src/button'
 
-$install(Button)
+import AutoTip from './src/auto-tip'
 
-export default Button
+export { AutoTip }
diff --git a/packages/vue-directive/package.json b/packages/vue-directive/package.json
new file mode 100644
index 0000000000..d53f8de56d
--- /dev/null
+++ b/packages/vue-directive/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@opentiny/vue-directive",
+  "version": "3.17.0",
+  "description": "",
+  "module": "index.ts",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@opentiny/vue-tooltip": "workspace:~",
+    "@opentiny/vue-common": "workspace:~"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
\ No newline at end of file
diff --git a/packages/vue-directive/src/auto-tip.ts b/packages/vue-directive/src/auto-tip.ts
new file mode 100644
index 0000000000..c4daff0997
--- /dev/null
+++ b/packages/vue-directive/src/auto-tip.ts
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import Tooltip from '@opentiny/vue-tooltip'
+import { createComponent, h, hooks } from '@opentiny/vue-common'
+
+interface TooltipDirectiveConfig {
+  always?: boolean // 是否文字不超长，也触发提示, 默认为 false
+  content?: string // 自定义提示内容,  支持字符串或 VNode | VNode[], 不支持嵌套的 html 标签
+  effect?: 'dark' | 'light' // tooltip主题，默认为light
+}
+
+/** v-auto-tip 绑定值。 支持 falsy值 或 TooltipDirectiveConfig 值， 当传入falsy值时，表示禁用tooltip */
+type BoundingValueType = undefined | false | TooltipDirectiveConfig
+
+const globalTooltip = {
+  value: null
+}
+
+const tooltipContent = hooks.ref('')
+
+// 判断是否超出隐藏
+const isEllipsis = (currentTarget) =>
+  currentTarget?.textContent && currentTarget.scrollWidth > currentTarget.offsetWidth
+
+const isAlwaysShowTip = (currentTarget) => Boolean(currentTarget?.boundingValue?.always)
+
+const isDarkTheme = (currentTarget) => Boolean(currentTarget?.boundingValue?.effect === 'dark')
+
+const mouseenterHandler = (e) => {
+  const currentTarget = e.currentTarget
+
+  // boundingValue是动态的，当它是falsy时，就不进行tooltip
+  if (!currentTarget.boundingValue) {
+    return
+  }
+  // always:true 或者 文字超长，则更新全局的tooltip
+  if (isAlwaysShowTip(currentTarget) || isEllipsis(currentTarget)) {
+    // 全局只创建一个tooltip实例，保证性能
+    if (!globalTooltip.value) {
+      tooltipContent.value = currentTarget.boundingValue?.content || currentTarget.textContent
+      globalTooltip.value = createComponent({
+        el: document.createElement('div'),
+        propsData: {
+          renderContent: () => h('span', { class: 'tiny-directive-tip__content' }, tooltipContent.value),
+          placement: 'top',
+          effect: isDarkTheme(currentTarget) ? 'dark' : 'light'
+        },
+        component: Tooltip
+      })
+    }
+
+    const tooltip = globalTooltip.value
+    const popperElm = tooltip.state.popperElm
+
+    tooltipContent.value = currentTarget.boundingValue?.content || currentTarget.textContent
+    tooltip.state.referenceElm = currentTarget
+
+    if (popperElm) {
+      popperElm.classList.replace(
+        `is-${isDarkTheme(currentTarget) ? 'light' : 'dark'}`,
+        `is-${isDarkTheme(currentTarget) ? 'dark' : 'light'}`
+      )
+    }
+
+    tooltip.show()
+    tooltip.updatePopper()
+  }
+}
+
+const mouseleaveHandler = () => {
+  globalTooltip.value && globalTooltip.value.hide()
+}
+
+// 指令绑定，只有第一次value有值时，才添加事件，之后并不移除事件
+const bind = (el, { value }: { value: BoundingValueType }) => {
+  // 如果是知己使用指令v-auto-tip，什么都不传也需要添加省略提示功能
+  const resultValue = value === undefined ? {} : value
+
+  el.boundingValue = resultValue
+  if (resultValue && !el.boundingValue?.listened) {
+    el.addEventListener('mouseenter', mouseenterHandler)
+    el.addEventListener('mouseleave', mouseleaveHandler)
+    el.boundingValue.listened = true
+  }
+}
+
+const unbind = (el) => {
+  if (el.boundingValue?.listened) {
+    el.removeEventListener('mouseenter', mouseenterHandler)
+    el.removeEventListener('mouseleave', mouseleaveHandler)
+  }
+}
+
+/** v-auto-tip 指令  
+1、基本使用  
+v-auto-tip
+v-auto-tip="false"  
+v-auto-tip="{always:true, content:'123', effect:'dark'}"  
+
+2、动态切换  
+v-auto-tip="enabled? {always:true, content:'123', effect:'dark'} : false "  
+
+** 修改enabled, 可以让tooltip动态提示  
+
+3、自定义content  
+v-auto-tip="{content:h('span','1234' )}" // 单个vnode  
+v-auto-tip="{content:[h('span','1234' ), h('span','5678' ) ]}" // 多vnode  
+v-auto-tip="{content:h('span',{innerHTML:'1234<a>5678</a>'})}" // vue3写法：支持动态 html  
+v-auto-tip="{content:h('span',{domProps:{ innerHTML:'12345678'}})}" // 如果使用common里的h：支持动态 html  
+
+** content 支持一个有效的字符串或vnode|vnode[]  
+ */
+export default {
+  bind,
+  unbind,
+  update: bind,
+  beforeMount: bind,
+  unmounted: unbind,
+  updated: bind
+}
diff --git a/packages/vue-icon-saas/package.json b/packages/vue-icon-saas/package.json
index c7d95e7de9..7425e11a8f 100644
--- a/packages/vue-icon-saas/package.json
+++ b/packages/vue-icon-saas/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-icon-saas",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.ts",
diff --git a/packages/vue-icon/package.json b/packages/vue-icon/package.json
index 1b0b814192..471ee6dc2c 100644
--- a/packages/vue-icon/package.json
+++ b/packages/vue-icon/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-icon",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "main": "index.ts",
diff --git a/packages/vue-locale/package.json b/packages/vue-locale/package.json
index 7eb9ec6902..019c72917d 100644
--- a/packages/vue-locale/package.json
+++ b/packages/vue-locale/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-locale",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "src/index.ts",
   "license": "MIT",
diff --git a/packages/vue-locale/src/lang/en.ts b/packages/vue-locale/src/lang/en.ts
index 8f9fda2c91..585947c616 100644
--- a/packages/vue-locale/src/lang/en.ts
+++ b/packages/vue-locale/src/lang/en.ts
@@ -18,6 +18,11 @@ export default {
   yes: 'Yes',
   no: 'No',
   ui: {
+    input: {
+      close: 'Close',
+      more: 'More',
+      detail: 'Detailed Info'
+    },
     numeric: {
       equalTo: 'Equal to',
       notEqualTo: 'Not equal to',
@@ -353,7 +358,8 @@ export default {
         classComponentError: 'Class component rendering error.',
         groupColumnFixedError: 'Different fixed types cannot be set in the same group.',
         missingValueFormat:
-          'The renderer cannot format the date string. You should provide the "valueFormat" source date format configuration.'
+          'The renderer cannot format the date string. You should provide the "valueFormat" source date format configuration.',
+        clipboardWriteError: 'clipboard write error'
       },
       filter: {
         allFilter: 'All',
diff --git a/packages/vue-locale/src/lang/zh-CN.ts b/packages/vue-locale/src/lang/zh-CN.ts
index 6a5774d8af..d9d72cd59a 100644
--- a/packages/vue-locale/src/lang/zh-CN.ts
+++ b/packages/vue-locale/src/lang/zh-CN.ts
@@ -18,6 +18,11 @@ export default {
   yes: '是',
   no: '否',
   ui: {
+    input: {
+      close: '关闭',
+      more: '更多',
+      detail: '详细信息'
+    },
     numeric: {
       equalTo: '等于',
       notEqualTo: '不等于',
@@ -353,7 +358,8 @@ export default {
         renderParamError: '期望配置一个生成 VNode 的渲染方法。',
         classComponentError: '类组件渲染出错。',
         groupColumnFixedError: '同一个分组内不能设置不同的固定类型。',
-        missingValueFormat: '渲染器无法格式化日期字符串，需要提供 valueFormat 源日期格式配置。'
+        missingValueFormat: '渲染器无法格式化日期字符串，需要提供 valueFormat 源日期格式配置。',
+        clipboardWriteError: '剪切板写入错误'
       },
       filter: {
         allFilter: '全部',
diff --git a/packages/vue-runtime/package.json b/packages/vue-runtime/package.json
index 897e7889d9..05f9b72b84 100644
--- a/packages/vue-runtime/package.json
+++ b/packages/vue-runtime/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-runtime",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "",
   "files": [
     "dist2",
@@ -15,4 +15,4 @@
   "keywords": [],
   "author": "",
   "license": "ISC"
-}
+}
\ No newline at end of file
diff --git a/packages/vue-saas-common/package.json b/packages/vue-saas-common/package.json
index a5f1943d01..9dd2a9e563 100644
--- a/packages/vue-saas-common/package.json
+++ b/packages/vue-saas-common/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-saas-common",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 6fd4a9ad6c..e7d69213bb 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
diff --git a/packages/vue/src/action-menu/package.json b/packages/vue/src/action-menu/package.json
index f8af08294c..c0c1b8743a 100644
--- a/packages/vue/src/action-menu/package.json
+++ b/packages/vue/src/action-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-action-menu",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/action-sheet/package.json b/packages/vue/src/action-sheet/package.json
index 802a1c1766..b893c107d9 100644
--- a/packages/vue/src/action-sheet/package.json
+++ b/packages/vue/src/action-sheet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-action-sheet",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/alert/package.json b/packages/vue/src/alert/package.json
index 448e52cd10..e7b76aef56 100644
--- a/packages/vue/src/alert/package.json
+++ b/packages/vue/src/alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-alert",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/amount/package.json b/packages/vue/src/amount/package.json
index a97a75ee5d..36d7bc1198 100644
--- a/packages/vue/src/amount/package.json
+++ b/packages/vue/src/amount/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-amount",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/anchor/package.json b/packages/vue/src/anchor/package.json
index 89bf09e9cc..2c372c4f47 100644
--- a/packages/vue/src/anchor/package.json
+++ b/packages/vue/src/anchor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-anchor",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "sideEffects": false,
diff --git a/packages/vue/src/area/package.json b/packages/vue/src/area/package.json
index 1af1da6bf3..e6a1ae4b90 100644
--- a/packages/vue/src/area/package.json
+++ b/packages/vue/src/area/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-area",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/async-flowchart/package.json b/packages/vue/src/async-flowchart/package.json
index 787a29fdd2..a790a39525 100644
--- a/packages/vue/src/async-flowchart/package.json
+++ b/packages/vue/src/async-flowchart/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-async-flowchart",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/autocomplete/package.json b/packages/vue/src/autocomplete/package.json
index ae1951440f..6cf137bd4e 100644
--- a/packages/vue/src/autocomplete/package.json
+++ b/packages/vue/src/autocomplete/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-autocomplete",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/avatar/package.json b/packages/vue/src/avatar/package.json
index 0edf410375..f3ab39a3c2 100644
--- a/packages/vue/src/avatar/package.json
+++ b/packages/vue/src/avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-avatar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/badge/package.json b/packages/vue/src/badge/package.json
index 547d468656..e22f44e159 100644
--- a/packages/vue/src/badge/package.json
+++ b/packages/vue/src/badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-badge",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/base-select/package.json b/packages/vue/src/base-select/package.json
index 1cb8842a4f..bce62cc196 100644
--- a/packages/vue/src/base-select/package.json
+++ b/packages/vue/src/base-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-base-select",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/breadcrumb-item/package.json b/packages/vue/src/breadcrumb-item/package.json
index 13c8575ea1..64f3e6ec14 100644
--- a/packages/vue/src/breadcrumb-item/package.json
+++ b/packages/vue/src/breadcrumb-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-breadcrumb-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/breadcrumb/package.json b/packages/vue/src/breadcrumb/package.json
index 8a2da49205..f68da7fa61 100644
--- a/packages/vue/src/breadcrumb/package.json
+++ b/packages/vue/src/breadcrumb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-breadcrumb",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/bulletin-board/package.json b/packages/vue/src/bulletin-board/package.json
index 1142d234f3..c962f24c1c 100644
--- a/packages/vue/src/bulletin-board/package.json
+++ b/packages/vue/src/bulletin-board/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-bulletin-board",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/button-group/package.json b/packages/vue/src/button-group/package.json
index 62748d135f..a6d9425117 100644
--- a/packages/vue/src/button-group/package.json
+++ b/packages/vue/src/button-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-button-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,6 +18,7 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-directive": "workspace:~",
     "@opentiny/vue-popover": "workspace:~",
     "@opentiny/vue-button": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
diff --git a/packages/vue/src/button-group/src/pc.vue b/packages/vue/src/button-group/src/pc.vue
index b5b500ecaa..daddf7928e 100644
--- a/packages/vue/src/button-group/src/pc.vue
+++ b/packages/vue/src/button-group/src/pc.vue
@@ -25,6 +25,7 @@
                 'line-height': size === 'medium' ? '40px' : size === 'small' ? '30px' : size === 'mini' ? '22px' : ''
               }"
               type="button"
+              v-auto-tip="Boolean(node.tip) ? { always: true, content: node.tip } : false"
               :tabindex="getItemClass(node).disabled ? '-1' : '0'"
               @click="handleClick(node)"
             >
@@ -116,10 +117,12 @@ import { props, setup, defineComponent } from '@opentiny/vue-common'
 import Popover from '@opentiny/vue-popover'
 import Button from '@opentiny/vue-button'
 import { iconPopup, iconWriting } from '@opentiny/vue-icon'
+import { AutoTip } from '@opentiny/vue-directive'
 import type { IButtonGroupApi } from '@opentiny/vue-renderless/types/button-group.type'
 
 export default defineComponent({
   emits: ['change', 'edit', 'update:modelValue'],
+  directives: { AutoTip },
   props: [
     ...props,
     'size',
diff --git a/packages/vue/src/button/package.json b/packages/vue/src/button/package.json
index 26414bf1f4..17447d729a 100644
--- a/packages/vue/src/button/package.json
+++ b/packages/vue/src/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-button",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/calendar-bar/package.json b/packages/vue/src/calendar-bar/package.json
index d2a1005b3c..e9421fd222 100644
--- a/packages/vue/src/calendar-bar/package.json
+++ b/packages/vue/src/calendar-bar/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-calendar-bar",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/calendar-view/package.json b/packages/vue/src/calendar-view/package.json
index 450f8c7f7c..eb1fa9d019 100644
--- a/packages/vue/src/calendar-view/package.json
+++ b/packages/vue/src/calendar-view/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-calendar-view",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/calendar/package.json b/packages/vue/src/calendar/package.json
index f0f5c39c0e..ca0de85568 100644
--- a/packages/vue/src/calendar/package.json
+++ b/packages/vue/src/calendar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-calendar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/card-group/package.json b/packages/vue/src/card-group/package.json
index de1a89dd70..f4e97bc17e 100644
--- a/packages/vue/src/card-group/package.json
+++ b/packages/vue/src/card-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-card-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/card-template/package.json b/packages/vue/src/card-template/package.json
index 3de051e56a..4bc1afc1c9 100644
--- a/packages/vue/src/card-template/package.json
+++ b/packages/vue/src/card-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-card-template",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/card/package.json b/packages/vue/src/card/package.json
index 0ad5d6548a..3fd48b719e 100644
--- a/packages/vue/src/card/package.json
+++ b/packages/vue/src/card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-card",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/card/src/index.ts b/packages/vue/src/card/src/index.ts
index d5ee8dd21b..f6a812ff7e 100644
--- a/packages/vue/src/card/src/index.ts
+++ b/packages/vue/src/card/src/index.ts
@@ -63,6 +63,10 @@ export const cardProps = {
   disabled: {
     type: Boolean,
     default: false
+  },
+  checkMode: {
+    type: String,
+    default: 'normal'
   }
 }
 
diff --git a/packages/vue/src/card/src/pc.vue b/packages/vue/src/card/src/pc.vue
index 9911f8ff0d..eff3be6289 100644
--- a/packages/vue/src/card/src/pc.vue
+++ b/packages/vue/src/card/src/pc.vue
@@ -5,14 +5,21 @@
       `tiny-card--${state.size}`,
       `tiny-card--${state.status}`,
       state.autoWidth ? '' : `tiny-card--${state.size}-width`,
-      state.itemChecked ? 'tiny-card--item-checked' : '',
+      state.itemChecked
+        ? state.checkMode === 'badge'
+          ? 'tiny-card--item-checkbox-checked'
+          : 'tiny-card--item-checked'
+        : '',
       state.disabled ? 'tiny-card--disabled' : '',
       state.customClass
     ]"
-    @click="$emit('click', $event)"
+    @click="cardClick($event)"
   >
     <div class="tiny-card__body" :style="{ 'display': state.type === 'text' ? 'flex' : 'block' }">
-      <div class="tiny-card--checkbox" v-if="state.checkType === 'checkbox' && state.type === 'text'">
+      <div
+        class="tiny-card--checkbox"
+        v-if="state.checkType === 'checkbox' && state.type === 'text' && state.checkMode === 'normal'"
+      >
         <tiny-checkbox
           v-model="state.model"
           :label="label"
@@ -21,7 +28,10 @@
           @change="handleChange"
         ></tiny-checkbox>
       </div>
-      <div class="tiny-card--radio" v-if="state.checkType === 'radio' && state.type === 'text'">
+      <div
+        class="tiny-card--radio"
+        v-if="state.checkType === 'radio' && state.type === 'text' && state.checkMode === 'normal'"
+      >
         <tiny-radio v-model="state.model" :label="label" :disabled="state.disabled" @change="handleChange">
           <!-- 为什么空一个span -->
           <span></span>
@@ -167,7 +177,8 @@ export default defineComponent({
     'status',
     'checkType',
     'type',
-    'disabled'
+    'disabled',
+    'checkMode'
   ],
   setup(props, context) {
     return setup({
diff --git a/packages/vue/src/carousel-item/package.json b/packages/vue/src/carousel-item/package.json
index 4da4a92712..111c7e6155 100644
--- a/packages/vue/src/carousel-item/package.json
+++ b/packages/vue/src/carousel-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-carousel-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/carousel/package.json b/packages/vue/src/carousel/package.json
index bae0d3a8b2..3b5d624ef5 100644
--- a/packages/vue/src/carousel/package.json
+++ b/packages/vue/src/carousel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-carousel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/carousel/src/index.ts b/packages/vue/src/carousel/src/index.ts
index d85b230cd9..90eea5cc4a 100644
--- a/packages/vue/src/carousel/src/index.ts
+++ b/packages/vue/src/carousel/src/index.ts
@@ -68,7 +68,10 @@ export default defineComponent({
       type: String,
       default: 'light',
       validator: (value: string) => Boolean(!value || ~['light', 'dark'].indexOf(value))
-    }
+    },
+    swipeable: Boolean,
+    lite: Boolean,
+    beforeSwipe: Function
   },
   setup(props, context) {
     return $setup({
diff --git a/packages/vue/src/carousel/src/mobile-first.vue b/packages/vue/src/carousel/src/mobile-first.vue
index 546431710c..377f18cbf1 100644
--- a/packages/vue/src/carousel/src/mobile-first.vue
+++ b/packages/vue/src/carousel/src/mobile-first.vue
@@ -15,7 +15,7 @@
       :style="state.style"
     >
       <button
-        v-if="arrow !== 'never' && state.items.length > 1"
+        v-if="state.hasButtons"
         v-show="(arrow === 'always' || state.hover) && (loop || state.activeIndex > 0)"
         type="button"
         class="absolute group border-none outline-0 p-0 m-0 h-8 w-8 cursor-pointer z-[3] rounded-full bg-color-bg-3 active:bg-color-bg-7 text-color-text-inverse text-center text-xs flex items-center justify-center hover:bg-color-bg-7"
@@ -30,7 +30,7 @@
         />
       </button>
       <button
-        v-if="arrow !== 'never' && state.items.length > 1"
+        v-if="state.hasButtons"
         v-show="(arrow === 'always' || state.hover) && (loop || state.activeIndex < state.items.length - 1)"
         type="button"
         class="absolute group border-none outline-0 p-0 m-0 h-8 w-8 cursor-pointer z-[3] rounded-full bg-color-bg-3 active:bg-color-bg-7 text-color-text-inverse text-center text-xs flex items-center justify-center hover:bg-color-bg-7"
@@ -48,7 +48,7 @@
     </div>
     <ul
       data-tag="tiny-carousel-body"
-      v-if="indicatorPosition !== 'none' && state.items.length > 1"
+      v-if="state.hasIndicators"
       :class="[
         'list-none m-0 py-0 px-1 z-[2] flex justify-center items-center',
         type === 'vertical' && indicatorPosition !== 'outside'
@@ -119,7 +119,10 @@ export default defineComponent({
     'type',
     'showTitle',
     'loop',
-    'aspectRatio'
+    'aspectRatio',
+    'swipeable',
+    'lite',
+    'beforeSwipe'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })
diff --git a/packages/vue/src/carousel/src/pc.vue b/packages/vue/src/carousel/src/pc.vue
index 78cdfacf6d..0176eef7ed 100644
--- a/packages/vue/src/carousel/src/pc.vue
+++ b/packages/vue/src/carousel/src/pc.vue
@@ -21,7 +21,7 @@
         :name="type === 'vertical' ? 'tiny-transition-carousel-arrow-top' : 'tiny-transition-carousel-arrow-left'"
       >
         <button
-          v-if="arrow !== 'never'"
+          v-if="state.hasButtons"
           v-show="(arrow === 'always' || state.hover) && (loop || state.activeIndex > 0)"
           type="button"
           class="tiny-carousel__arrow"
@@ -37,7 +37,7 @@
         :name="type === 'vertical' ? 'tiny-transition-carousel-arrow-bottom' : 'tiny-transition-carousel-arrow-right'"
       >
         <button
-          v-if="arrow !== 'never'"
+          v-if="state.hasButtons"
           v-show="(arrow === 'always' || state.hover) && (loop || state.activeIndex < state.items.length - 1)"
           type="button"
           class="tiny-carousel__arrow"
@@ -52,7 +52,7 @@
       <slot></slot>
     </div>
     <ul
-      v-if="indicatorPosition !== 'none'"
+      v-if="state.hasIndicators"
       :class="{
         'tiny-carousel__indicators-labels': state.hasLabel,
         'tiny-carousel__indicators-title': showTitle,
@@ -96,7 +96,10 @@ export default defineComponent({
     'arrow',
     'type',
     'showTitle',
-    'loop'
+    'loop',
+    'swipeable',
+    'lite',
+    'beforeSwipe'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })
diff --git a/packages/vue/src/cascader-menu/package.json b/packages/vue/src/cascader-menu/package.json
index 01203aeb63..95fbe1a79c 100644
--- a/packages/vue/src/cascader-menu/package.json
+++ b/packages/vue/src/cascader-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-cascader-menu",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/cascader-mobile/package.json b/packages/vue/src/cascader-mobile/package.json
index 576308747b..c0100a2d6e 100644
--- a/packages/vue/src/cascader-mobile/package.json
+++ b/packages/vue/src/cascader-mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-cascader-mobile",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/cascader-node/package.json b/packages/vue/src/cascader-node/package.json
index cea9464799..4dcf742dc6 100644
--- a/packages/vue/src/cascader-node/package.json
+++ b/packages/vue/src/cascader-node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-cascader-node",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/cascader-panel/package.json b/packages/vue/src/cascader-panel/package.json
index 1da8f09286..b247d8978a 100644
--- a/packages/vue/src/cascader-panel/package.json
+++ b/packages/vue/src/cascader-panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-cascader-panel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/cascader-panel/src/pc.vue b/packages/vue/src/cascader-panel/src/pc.vue
index e7252e5235..96d1ee7a81 100644
--- a/packages/vue/src/cascader-panel/src/pc.vue
+++ b/packages/vue/src/cascader-panel/src/pc.vue
@@ -43,7 +43,7 @@ export default defineComponent({
       panel: this
     }
   },
-  emits: ['update:modelValue', 'change', 'close', 'active-item-change', 'expand-change'],
+  emits: ['update:modelValue', 'change', 'close', 'expand-change', 'active-item-change', 'load-data'],
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as ICascaderPanelApi
   }
diff --git a/packages/vue/src/cascader-select/package.json b/packages/vue/src/cascader-select/package.json
index 7ede713c0b..d5668efe45 100644
--- a/packages/vue/src/cascader-select/package.json
+++ b/packages/vue/src/cascader-select/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-cascader-select",
   "private": true,
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/cascader-select/src/Column.vue b/packages/vue/src/cascader-select/src/Column.vue
index e93256f35c..ee9969d08e 100644
--- a/packages/vue/src/cascader-select/src/Column.vue
+++ b/packages/vue/src/cascader-select/src/Column.vue
@@ -53,6 +53,7 @@
     <div data-tag="tiny-cascader-picker-roller-mask" :class="gcls('col-roller-mask')" :style="state.maskStyles"></div>
   </div>
 </template>
+
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/cascader-select/column'
 import { $prefix, $props, setup, defineComponent } from '@opentiny/vue-common'
@@ -64,6 +65,7 @@ export default defineComponent({
     ...$props,
     // 当前选中项
     value: [String, Number],
+    defaultValue: [String, Number],
     columnsType: String,
     column: {
       type: Array,
@@ -91,6 +93,7 @@ export default defineComponent({
       default: () => ({})
     },
     disabled: Boolean,
+    visible: Boolean,
     textColor: { type: Object, default: () => ({}) }
   },
   emits: ['click', 'change'],
diff --git a/packages/vue/src/cascader-select/src/index.ts b/packages/vue/src/cascader-select/src/index.ts
index aa6beee22d..d1ce4af1f4 100644
--- a/packages/vue/src/cascader-select/src/index.ts
+++ b/packages/vue/src/cascader-select/src/index.ts
@@ -19,6 +19,10 @@ export default {
       type: Array,
       default: () => []
     },
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
     options: {
       type: Array,
       default: () => {
diff --git a/packages/vue/src/cascader-select/src/mobile-first.vue b/packages/vue/src/cascader-select/src/mobile-first.vue
index 59e9cfa563..ed3f035824 100644
--- a/packages/vue/src/cascader-select/src/mobile-first.vue
+++ b/packages/vue/src/cascader-select/src/mobile-first.vue
@@ -37,10 +37,12 @@
                   :columns-type="columnsType"
                   :field-names="columnFieldNames"
                   :value="defaultValues[columnIndex]"
+                  :default-value="defaultValue[columnIndex]"
                   :three-dimensional="threeDimensional"
                   :swipe-duration="swipeDuration"
                   :visible-option-num="visibleOptionNum"
                   :option-height="optionHeight"
+                  :visible="state.actionSheetVisible"
                   @change="
                     (option) => {
                       changeHandler(columnIndex, option)
@@ -107,7 +109,8 @@ export default defineComponent({
     'lockScroll',
     'customClass',
     'panelCustomClass',
-    'type'
+    'type',
+    'defaultValue'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api, classes })
diff --git a/packages/vue/src/cascader-view/package.json b/packages/vue/src/cascader-view/package.json
index 6b99603ec5..00a1472484 100644
--- a/packages/vue/src/cascader-view/package.json
+++ b/packages/vue/src/cascader-view/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-cascader-view",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/cascader-view/src/option.vue b/packages/vue/src/cascader-view/src/option.vue
index ad12261142..99e74e9c97 100644
--- a/packages/vue/src/cascader-view/src/option.vue
+++ b/packages/vue/src/cascader-view/src/option.vue
@@ -5,7 +5,7 @@
       class="w-11 h-11 flex-none flex items-center justify-center relative"
       @click.stop="$emit('check', option)"
     >
-      <div class="absolute left-0 right-0 top-0 bottom-0 z-10"></div>
+      <div class="absolute left-0 right-0 top-0 bottom-0 z-20"></div>
       <tiny-checkbox
         custom-class="flex h-full w-full items-center justify-center"
         :model-value="!option.indeterminate && option.checked"
diff --git a/packages/vue/src/cascader/package.json b/packages/vue/src/cascader/package.json
index 0dc5f94347..ac0f1be735 100644
--- a/packages/vue/src/cascader/package.json
+++ b/packages/vue/src/cascader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-cascader",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/cascader/src/pc.vue b/packages/vue/src/cascader/src/pc.vue
index 337b139e29..0c1cea2609 100644
--- a/packages/vue/src/cascader/src/pc.vue
+++ b/packages/vue/src/cascader/src/pc.vue
@@ -147,6 +147,7 @@
           :render-label="slots.default"
           @expand-change="handleExpandChange"
           @close="toggleDropDownVisible(false)"
+          @load-data="computePresentContent"
         ></tiny-cascader-panel>
         <tiny-scrollbar
           ref="suggestionPanel"
diff --git a/packages/vue/src/cell/package.json b/packages/vue/src/cell/package.json
index 023fc8d158..821742dd1a 100644
--- a/packages/vue/src/cell/package.json
+++ b/packages/vue/src/cell/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-cell",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/autonavi-map/package.json b/packages/vue/src/chart/autonavi-map/package.json
index 366a9c1d48..98b872d7bd 100644
--- a/packages/vue/src/chart/autonavi-map/package.json
+++ b/packages/vue/src/chart/autonavi-map/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-autonavi-map",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/baidu-map/package.json b/packages/vue/src/chart/baidu-map/package.json
index 8b4a62a547..4134102e40 100644
--- a/packages/vue/src/chart/baidu-map/package.json
+++ b/packages/vue/src/chart/baidu-map/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-baidu-map",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-bar/package.json b/packages/vue/src/chart/chart-bar/package.json
index 03ad685c5e..edfed5fbde 100644
--- a/packages/vue/src/chart/chart-bar/package.json
+++ b/packages/vue/src/chart/chart-bar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-bar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-boxplot/package.json b/packages/vue/src/chart/chart-boxplot/package.json
index 56940764c4..77e5627259 100644
--- a/packages/vue/src/chart/chart-boxplot/package.json
+++ b/packages/vue/src/chart/chart-boxplot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-boxplot",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-candle/package.json b/packages/vue/src/chart/chart-candle/package.json
index 31b7c1cfbc..12ca7f5078 100644
--- a/packages/vue/src/chart/chart-candle/package.json
+++ b/packages/vue/src/chart/chart-candle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-candle",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-core/package.json b/packages/vue/src/chart/chart-core/package.json
index 2bcae6c8de..fd6ec2a21c 100644
--- a/packages/vue/src/chart/chart-core/package.json
+++ b/packages/vue/src/chart/chart-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-core",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-core/src/chart-core.ts b/packages/vue/src/chart/chart-core/src/chart-core.ts
index ce72c63d1a..e6f113850b 100644
--- a/packages/vue/src/chart/chart-core/src/chart-core.ts
+++ b/packages/vue/src/chart/chart-core/src/chart-core.ts
@@ -129,6 +129,7 @@ export default {
   data() {
     return {
       option: {},
+      eChartOption: {},
       renderOption: {},
       initOpts: {},
       watchToPropsEchartOptions: [],
@@ -366,6 +367,7 @@ export default {
         }
         this.$emit('ready', this.integrateChart.echartsIns, option)
       }, this.changeDelay)
+      this.eChartOption = this.integrateChart.eChartOption
     },
     renderChart(option) {
       const plugins = this.plugins || {}
@@ -376,7 +378,6 @@ export default {
         }
         this.integrateChart.setSimpleOption(this.chartList[this.iChartName], option, plugins)
         this.$emit('handle-color', option.color)
-        this.integrateChart.render()
       } else {
         this.selfSetting(option)
         this.setAnimation(option)
@@ -394,11 +395,12 @@ export default {
         this.integrateChart.setSimpleOption(this.iChartName, option, plugins)
       }
       this.integrateChart.render(this.renderOption)
-      this.$emit('ready', this.integrateChart.echartsIns)
+      this.$emit('ready', this.integrateChart.echartsIns, option)
       if (!this.once['ready-once']) {
         this.once['ready-once'] = true
-        this.$emit('ready', this.integrateChart.echartsIns)
+        this.$emit('ready-once', this.integrateChart.echartsIns, option)
       }
+      this.eChartOption = this.integrateChart.eChartOption
     },
     addEvents(val) {
       if (typeof val === 'object' && val !== null && Object.keys(val).length > 0) {
diff --git a/packages/vue/src/chart/chart-funnel/package.json b/packages/vue/src/chart/chart-funnel/package.json
index aed5b58c3d..06f209060c 100644
--- a/packages/vue/src/chart/chart-funnel/package.json
+++ b/packages/vue/src/chart/chart-funnel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-funnel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-gauge/package.json b/packages/vue/src/chart/chart-gauge/package.json
index 0802b058f8..a35cc8d31d 100644
--- a/packages/vue/src/chart/chart-gauge/package.json
+++ b/packages/vue/src/chart/chart-gauge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-gauge",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-graph/package.json b/packages/vue/src/chart/chart-graph/package.json
index ce32275591..ca46779a16 100644
--- a/packages/vue/src/chart/chart-graph/package.json
+++ b/packages/vue/src/chart/chart-graph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-graph",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-heatmap/package.json b/packages/vue/src/chart/chart-heatmap/package.json
index 591014c224..24d3673b3b 100644
--- a/packages/vue/src/chart/chart-heatmap/package.json
+++ b/packages/vue/src/chart/chart-heatmap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-heatmap",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-histogram/package.json b/packages/vue/src/chart/chart-histogram/package.json
index c8d6e3dffc..0e3385d450 100644
--- a/packages/vue/src/chart/chart-histogram/package.json
+++ b/packages/vue/src/chart/chart-histogram/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-histogram",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-line/package.json b/packages/vue/src/chart/chart-line/package.json
index d044d4c20b..a1f86076c0 100644
--- a/packages/vue/src/chart/chart-line/package.json
+++ b/packages/vue/src/chart/chart-line/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-line",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-liquidfill/package.json b/packages/vue/src/chart/chart-liquidfill/package.json
index ed7c52d750..a3e21211bd 100644
--- a/packages/vue/src/chart/chart-liquidfill/package.json
+++ b/packages/vue/src/chart/chart-liquidfill/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-liquidfill",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-map/package.json b/packages/vue/src/chart/chart-map/package.json
index 854d49e90d..ad88244959 100644
--- a/packages/vue/src/chart/chart-map/package.json
+++ b/packages/vue/src/chart/chart-map/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-map",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-pie/package.json b/packages/vue/src/chart/chart-pie/package.json
index ba3ad543c2..49d10ae251 100644
--- a/packages/vue/src/chart/chart-pie/package.json
+++ b/packages/vue/src/chart/chart-pie/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-pie",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-process/package.json b/packages/vue/src/chart/chart-process/package.json
index c55a2098a8..c09830e9b9 100644
--- a/packages/vue/src/chart/chart-process/package.json
+++ b/packages/vue/src/chart/chart-process/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-process",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-radar/package.json b/packages/vue/src/chart/chart-radar/package.json
index 0554ae4642..0e8108834b 100644
--- a/packages/vue/src/chart/chart-radar/package.json
+++ b/packages/vue/src/chart/chart-radar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-radar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-ring/package.json b/packages/vue/src/chart/chart-ring/package.json
index 4577c4c17e..f56d42af9d 100644
--- a/packages/vue/src/chart/chart-ring/package.json
+++ b/packages/vue/src/chart/chart-ring/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-ring",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-sankey/package.json b/packages/vue/src/chart/chart-sankey/package.json
index 9252da22fe..879277357c 100644
--- a/packages/vue/src/chart/chart-sankey/package.json
+++ b/packages/vue/src/chart/chart-sankey/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-sankey",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-scatter/package.json b/packages/vue/src/chart/chart-scatter/package.json
index b02b1b5c32..b7a721d614 100644
--- a/packages/vue/src/chart/chart-scatter/package.json
+++ b/packages/vue/src/chart/chart-scatter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-scatter",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-sunburst/package.json b/packages/vue/src/chart/chart-sunburst/package.json
index 8f05ae0c05..d1fc64a0b3 100644
--- a/packages/vue/src/chart/chart-sunburst/package.json
+++ b/packages/vue/src/chart/chart-sunburst/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-sunburst",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-tree/package.json b/packages/vue/src/chart/chart-tree/package.json
index 59fce20731..f816756923 100644
--- a/packages/vue/src/chart/chart-tree/package.json
+++ b/packages/vue/src/chart/chart-tree/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-tree",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-waterfall/package.json b/packages/vue/src/chart/chart-waterfall/package.json
index 2af6d9fd32..d95f16086d 100644
--- a/packages/vue/src/chart/chart-waterfall/package.json
+++ b/packages/vue/src/chart/chart-waterfall/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-waterfall",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/chart-wordcloud/package.json b/packages/vue/src/chart/chart-wordcloud/package.json
index 4979841fe2..8d01d3a031 100644
--- a/packages/vue/src/chart/chart-wordcloud/package.json
+++ b/packages/vue/src/chart/chart-wordcloud/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart-wordcloud",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/chart/package.json b/packages/vue/src/chart/package.json
index 8555f3243c..c78d1094d9 100644
--- a/packages/vue/src/chart/package.json
+++ b/packages/vue/src/chart/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-chart",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/checkbox-button/package.json b/packages/vue/src/checkbox-button/package.json
index 9af6a1201f..1f751dee2a 100644
--- a/packages/vue/src/checkbox-button/package.json
+++ b/packages/vue/src/checkbox-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-checkbox-button",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/checkbox-group/package.json b/packages/vue/src/checkbox-group/package.json
index d5de857951..6dd65c4149 100644
--- a/packages/vue/src/checkbox-group/package.json
+++ b/packages/vue/src/checkbox-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-checkbox-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/checkbox/package.json b/packages/vue/src/checkbox/package.json
index d4926da7cf..48331c2ab5 100644
--- a/packages/vue/src/checkbox/package.json
+++ b/packages/vue/src/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-checkbox",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-tooltip": "workspace:~",
+    "@opentiny/vue-directive": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
diff --git a/packages/vue/src/checkbox/src/pc.vue b/packages/vue/src/checkbox/src/pc.vue
index d129018824..ddb2b394ae 100644
--- a/packages/vue/src/checkbox/src/pc.vue
+++ b/packages/vue/src/checkbox/src/pc.vue
@@ -76,19 +76,9 @@
     <span
       v-if="(slots.default && slots.default()) || state.isShowText"
       class="tiny-checkbox__label tiny-checkbox-display-only"
-      @mouseenter="handleLabelMouseenter"
-      @mouseleave="handleMouseleave"
+      v-auto-tip
     >
       <slot>{{ state.showText }}</slot>
-      <tiny-tooltip
-        ref="tooltip"
-        v-model="state.tooltipVisible"
-        :manual="true"
-        effect="light"
-        :content="state.displayedValue"
-        placement="top"
-      >
-      </tiny-tooltip>
     </span>
   </label>
 </template>
@@ -99,11 +89,11 @@ import { props, setup, defineComponent } from '@opentiny/vue-common'
 import '@opentiny/vue-theme/checkbox/index.less'
 import { iconHalfselect, iconCheckedSur, iconCheck } from '@opentiny/vue-icon'
 import type { ICheckboxApi } from '@opentiny/vue-renderless/types/checkbox.type'
-import Tooltip from '@opentiny/vue-tooltip'
-
+import { AutoTip } from '@opentiny/vue-directive'
 export default defineComponent({
   // tiny 新增。 renderless中，没有emit('click')的地方。 此处勿声明，否则会造成丢失click事件。
   emits: ['update:modelValue', 'change', 'complete'],
+  directives: { AutoTip },
   props: [
     ...props,
     'modelValue',
@@ -128,8 +118,7 @@ export default defineComponent({
   components: {
     IconHalfselect: iconHalfselect(),
     IconCheckedSur: iconCheckedSur(),
-    IconCheck: iconCheck(),
-    TinyTooltip: Tooltip
+    IconCheck: iconCheck()
   },
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as ICheckboxApi
diff --git a/packages/vue/src/col/package.json b/packages/vue/src/col/package.json
index c10f98eda2..28cd0c7c81 100644
--- a/packages/vue/src/col/package.json
+++ b/packages/vue/src/col/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-col",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/collapse-item/package.json b/packages/vue/src/collapse-item/package.json
index 27b2fe4ae9..8b055e6ba7 100644
--- a/packages/vue/src/collapse-item/package.json
+++ b/packages/vue/src/collapse-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-collapse-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/collapse-item/src/index.ts b/packages/vue/src/collapse-item/src/index.ts
index e24cee95b3..d7cd0d190c 100644
--- a/packages/vue/src/collapse-item/src/index.ts
+++ b/packages/vue/src/collapse-item/src/index.ts
@@ -29,6 +29,9 @@ export const collapseItemProps = {
       return this._uid
     }
   },
+  expandIcon: {
+    type: [Object, String]
+  },
   disabled: Boolean
 }
 export default defineComponent({
diff --git a/packages/vue/src/collapse-item/src/pc.vue b/packages/vue/src/collapse-item/src/pc.vue
index 2ff4b94348..935631aa7d 100644
--- a/packages/vue/src/collapse-item/src/pc.vue
+++ b/packages/vue/src/collapse-item/src/pc.vue
@@ -31,9 +31,13 @@
         @blur="state.focusing = false"
         @click="handleHeaderClick"
       >
-        <div class="tiny-collapse-item__arrow" @click.stop="handleHeaderClick">
+        <div class="tiny-collapse-item__arrow" :class="{ 'is-active': state.isActive }" @click.stop="handleHeaderClick">
           <slot name="icon">
-            <icon-chevron-right class="tiny-svg-size" :class="{ 'is-active': state.isActive }" />
+            <component
+              :is="state.arrowIcon"
+              class="tiny-collapse-item__arrow-icon tiny-svg-size"
+              :class="{ 'is-active': state.isActive }"
+            />
           </slot>
         </div>
         <div class="tiny-collapse-item__word-overflow" @click.stop="handleHeaderClick">
@@ -66,15 +70,16 @@ import { renderless, api } from '@opentiny/vue-renderless/collapse-item/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 import CollapseTransition from '@opentiny/vue-collapse-transition'
 import { iconChevronRight } from '@opentiny/vue-icon'
+import type { ICollapseItemApi } from '@opentiny/vue-renderless/types/collapse-item.type'
 
 export default defineComponent({
-  props: [...props, 'title', 'titleRight', 'name', 'disabled'],
+  props: [...props, 'title', 'titleRight', 'name', 'disabled', 'expandIcon'],
   components: {
     CollapseTransition,
     IconChevronRight: iconChevronRight()
   },
   setup(props, context) {
-    return setup({ props, context, renderless, api })
+    return setup({ props, context, renderless, api }) as unknown as ICollapseItemApi
   }
 })
 </script>
diff --git a/packages/vue/src/collapse-transition/package.json b/packages/vue/src/collapse-transition/package.json
index 3dad776601..cad72877d7 100644
--- a/packages/vue/src/collapse-transition/package.json
+++ b/packages/vue/src/collapse-transition/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-collapse-transition",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/collapse/package.json b/packages/vue/src/collapse/package.json
index 4d0a768770..4e3a143435 100644
--- a/packages/vue/src/collapse/package.json
+++ b/packages/vue/src/collapse/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-collapse",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/color-picker/package.json b/packages/vue/src/color-picker/package.json
index b1a057e0d5..421c743a6b 100644
--- a/packages/vue/src/color-picker/package.json
+++ b/packages/vue/src/color-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-color-picker",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/color-select-panel/package.json b/packages/vue/src/color-select-panel/package.json
index 194d93e0b0..7c443753ce 100644
--- a/packages/vue/src/color-select-panel/package.json
+++ b/packages/vue/src/color-select-panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-color-select-panel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/column-list-group/package.json b/packages/vue/src/column-list-group/package.json
index 7405c04081..d3ee55b53e 100644
--- a/packages/vue/src/column-list-group/package.json
+++ b/packages/vue/src/column-list-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-column-list-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/column-list-item/package.json b/packages/vue/src/column-list-item/package.json
index 80cd02d3bf..704edef48f 100644
--- a/packages/vue/src/column-list-item/package.json
+++ b/packages/vue/src/column-list-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-column-list-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/company/package.json b/packages/vue/src/company/package.json
index a4820973f2..8353c6d3b9 100644
--- a/packages/vue/src/company/package.json
+++ b/packages/vue/src/company/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-company",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/config-provider/package.json b/packages/vue/src/config-provider/package.json
index f854d5d7a4..a758dfeeb4 100644
--- a/packages/vue/src/config-provider/package.json
+++ b/packages/vue/src/config-provider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-config-provider",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
diff --git a/packages/vue/src/container/package.json b/packages/vue/src/container/package.json
index e76802e42d..783435ef43 100644
--- a/packages/vue/src/container/package.json
+++ b/packages/vue/src/container/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-container",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/country/package.json b/packages/vue/src/country/package.json
index b75a9795f0..c7dadaa5c0 100644
--- a/packages/vue/src/country/package.json
+++ b/packages/vue/src/country/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-country",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/crop/package.json b/packages/vue/src/crop/package.json
index 45ee605493..c37abeedf2 100644
--- a/packages/vue/src/crop/package.json
+++ b/packages/vue/src/crop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-crop",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/currency/package.json b/packages/vue/src/currency/package.json
index 119f2bb77b..0ecd8002ab 100644
--- a/packages/vue/src/currency/package.json
+++ b/packages/vue/src/currency/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-currency",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/currency/src/pc.vue b/packages/vue/src/currency/src/pc.vue
index 19ddfcb7a5..c722322802 100644
--- a/packages/vue/src/currency/src/pc.vue
+++ b/packages/vue/src/currency/src/pc.vue
@@ -24,18 +24,18 @@
       :value="item.value"
       :class="{ 'set-default': setDefault, 'is-active': item.value === state.defaultCurrency }"
     >
-      <span class="tiny-currency-option-label">{{ item.label }}</span>
-      <span
-        v-if="setDefault"
-        class="tiny-currency-option-set"
-        @click="toogleDefaultCurrency(item.value, item.value === state.defaultCurrency)"
-      >
-        <component :is="item.value === state.defaultCurrency ? 'icon-star-active' : 'icon-star-disable'" />
-        <span>
-          {{
-            item.value === state.defaultCurrency ? t('ui.currency.defaultCurrency') : t('ui.currency.setDefault')
-          }}</span
+      <span style="display: flex">
+        <span class="tiny-currency-option-label">{{ item.label }}</span>
+        <span
+          v-if="setDefault"
+          class="tiny-currency-option-set"
+          @click="toogleDefaultCurrency(item.value, item.value === state.defaultCurrency)"
         >
+          <component :is="item.value === state.defaultCurrency ? 'icon-star-active' : 'icon-star-disable'" />
+          <span>
+            {{ item.value === state.defaultCurrency ? t('ui.currency.defaultCurrency') : t('ui.currency.setDefault') }}
+          </span>
+        </span>
       </span>
     </tiny-option>
   </tiny-select>
diff --git a/packages/vue/src/date-panel/package.json b/packages/vue/src/date-panel/package.json
index e2ae991fa8..31fc4edf53 100644
--- a/packages/vue/src/date-panel/package.json
+++ b/packages/vue/src/date-panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-date-panel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/date-panel/src/mobile-first.vue b/packages/vue/src/date-panel/src/mobile-first.vue
index d92ffa0143..fd88093a35 100644
--- a/packages/vue/src/date-panel/src/mobile-first.vue
+++ b/packages/vue/src/date-panel/src/mobile-first.vue
@@ -1,16 +1,17 @@
 <template>
-  <transition name="tiny-zoom-in-top" @after-enter="handleEnter" @after-leave="handleLeave">
+  <transition @after-enter="handleEnter" @after-leave="handleLeave">
     <div
       v-show="state.visible"
       data-tag="tiny-picker-panel tiny-date-picker tiny-popper"
-      :class="[gcls('picker-panel'), state.popperClass]"
+      :class="m([gcls('picker-panel'), { 'w-80': state.currentView === 'year' }, state.popperClass])"
     >
       <div data-tag="tiny-picker-panel__body-wrapper" :class="gcls('picker-panel-body')">
-        <slot name="sidebar" data-tag="tiny-picker-panel__sidebar"></slot>
-        <div data-tag="tiny-picker-panel__sidebar" v-if="state.shortcuts">
+        <slot name="sidebar" data-tag="tiny-picker-panel__sidebar" :class="gcls('sidebar')"></slot>
+        <div data-tag="tiny-picker-panel__sidebar" v-if="state.shortcuts" :class="gcls('sidebar')">
           <button
             type="button"
             data-tag="tiny-picker-panel__shortcut"
+            :class="gcls('sidebar-btn')"
             v-for="(shortcut, key) in state.shortcuts"
             :key="key"
             @click="handleShortcutClick(shortcut)"
@@ -18,12 +19,15 @@
             {{ shortcut.text }}
           </button>
         </div>
-        <div data-tag="tiny-picker-panel__body" :class="gcls('picker-panel-body')">
+        <div
+          data-tag="tiny-picker-panel__body"
+          :class="[gcls('picker-panel-body'), { 'ml-28': slots.sidebar || state.shortcuts }]"
+        >
           <div v-if="state.showTime" data-tag="tiny-date-picker__time-header" :class="gcls('time-header')">
             <span data-tag="tiny-date-picker__editor-wrap" :class="gcls('editor-wrap')">
               <tiny-input
                 :placeholder="t('ui.datepicker.selectDate')"
-                :model-value="state.visibleDate"
+                :modelValue="state.visibleDate"
                 size="small"
                 @update:modelValue="(val) => (state.userInputDate = val)"
                 @change="handleVisibleDateChange"
@@ -38,7 +42,7 @@
                 ref="input"
                 @focus="state.timePickerVisible = true"
                 :placeholder="t('ui.datepicker.selectTime')"
-                :model-value="state.visibleTime"
+                :modelValue="state.visibleTime"
                 size="small"
                 @update:modelValue="(val) => (state.userInputTime = val)"
                 @change="handleVisibleTimeChange"
@@ -48,7 +52,6 @@
                 :step="step"
                 :time-arrow-control="state.arrowControl"
                 :show="state.timePickerVisible"
-                v-if="state.timePickerVisible"
                 :value="state.date"
                 @pick="handleTimePick"
               >
@@ -63,6 +66,16 @@
             ]"
             v-show="state.currentView !== 'time'"
           >
+            <button
+              type="button"
+              @click="cusPrevYear"
+              v-show="state.currentView === 'year'"
+              :aria-label="t(`ui.datepicker.prevYear`)"
+              data-tag="tiny-picker-panel__icon-btn tiny-date-picker__prev-btn tiny-icon-arrow-left"
+              :class="[gcls('icon-btn'), 'float-left']"
+            >
+              <icon-double-left></icon-double-left>
+            </button>
             <button
               type="button"
               @click="cusPrevMonth"
@@ -85,6 +98,16 @@
               :class="[gcls('header-label'), { 'text-color-brand': state.currentView === 'month' }]"
               >{{ t(`ui.datepicker.month${state.month + 1}`) }}</span
             >
+            <button
+              type="button"
+              @click="cusNextYear"
+              v-show="state.currentView === 'year'"
+              :aria-label="t(`ui.datepicker.nextYear`)"
+              data-tag="tiny-picker-panel__icon-btn tiny-date-picker__next-btn tiny-icon-arrow-right"
+              :class="[gcls('icon-btn'), 'float-right']"
+            >
+              <icon-double-right></icon-double-right>
+            </button>
             <button
               type="button"
               @click="cusNextMonth"
@@ -155,7 +178,14 @@
           </template>
         </tiny-input>
         <div data-tag="tiny-picker-panel__tzlist">
-          <tiny-popup v-model="state.showpopup" :overlay="false" position="up" :duration="0.2" :closeable="false">
+          <tiny-popup
+            v-model="state.showpopup"
+            :overlay="false"
+            aui_mode="mobile"
+            position="bottom"
+            :duration="0.2"
+            :closeable="false"
+          >
             <div data-tag="tzlist">
               <ul>
                 <li
@@ -201,7 +231,7 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/date-panel/vue'
-import { setup, directive, props, defineComponent } from '@opentiny/vue-common'
+import { setup, directive, props } from '@opentiny/vue-common'
 import { language } from '@opentiny/vue-locale'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
 import TimePicker from '@opentiny/vue-time'
@@ -221,7 +251,7 @@ import {
 import Popup from '@opentiny/vue-popup'
 import { classes } from './token'
 
-export default defineComponent({
+export default {
   directives: directive({ Clickoutside }),
   components: {
     TimePicker,
@@ -264,5 +294,5 @@ export default defineComponent({
       extendOptions: { language }
     })
   }
-})
+}
 </script>
diff --git a/packages/vue/src/date-panel/src/pc.vue b/packages/vue/src/date-panel/src/pc.vue
index 1f07347bbc..21e113cdd3 100644
--- a/packages/vue/src/date-panel/src/pc.vue
+++ b/packages/vue/src/date-panel/src/pc.vue
@@ -67,7 +67,6 @@
                 :step="step"
                 :time-arrow-control="state.arrowControl"
                 :show="state.timePickerVisible"
-                v-if="state.timePickerVisible"
                 :value="state.date"
                 @pick="handleTimePick"
               >
diff --git a/packages/vue/src/date-panel/src/token.ts b/packages/vue/src/date-panel/src/token.ts
index 85fc65a130..d9e709815f 100644
--- a/packages/vue/src/date-panel/src/token.ts
+++ b/packages/vue/src/date-panel/src/token.ts
@@ -12,5 +12,8 @@ export const classes = {
   'footer': 'border-t border-t-color-bg-3 py-3 px-4 bg-color-bg-1 overflow-hidden rounded-b',
   'link-btn': 'align-middle rounded',
   'time-header': 'relative text-xs h-10 leading-10 table w-full box-border border-b border-b-color-bg-3',
-  'editor-wrap': 'relative table-cell px-1'
+  'editor-wrap': 'relative table-cell px-1',
+  'sidebar': 'absolute top-0 bottom-0 w-28 border-r border-r-color-bg-3 box-border pt-5 bg-color-bg-1 overflow-auto',
+  'sidebar-btn':
+    'block w-24 my-0 mx-auto rounded border-0 bg-transparent leading-8 text-xs text-color-text-primary pl-4 text-left outline-0 cursor-pointer truncate hover:bg-color-bg-2'
 }
diff --git a/packages/vue/src/date-picker-mobile-first/package.json b/packages/vue/src/date-picker-mobile-first/package.json
index 327fdbce9f..9127c786d8 100644
--- a/packages/vue/src/date-picker-mobile-first/package.json
+++ b/packages/vue/src/date-picker-mobile-first/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-date-picker-mobile-first",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/date-picker/index.ts b/packages/vue/src/date-picker/index.ts
index e47ef566d6..485b606634 100644
--- a/packages/vue/src/date-picker/index.ts
+++ b/packages/vue/src/date-picker/index.ts
@@ -9,7 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import DatePicker from './src/index.js'
+import DatePicker from './src/index'
 import '@opentiny/vue-theme/date-picker/index.less'
 import { version } from './package.json'
 
diff --git a/packages/vue/src/date-picker/package.json b/packages/vue/src/date-picker/package.json
index 1acb31c962..109d3b2cbc 100644
--- a/packages/vue/src/date-picker/package.json
+++ b/packages/vue/src/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-date-picker",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/date-picker/src/index.ts b/packages/vue/src/date-picker/src/index.ts
index cca7b758c5..51abf0329c 100644
--- a/packages/vue/src/date-picker/src/index.ts
+++ b/packages/vue/src/date-picker/src/index.ts
@@ -12,6 +12,7 @@
 import type { PropType } from '@opentiny/vue-common'
 import { $setup, $prefix, defineComponent } from '@opentiny/vue-common'
 import { iconClose } from '@opentiny/vue-icon'
+import { api } from '@opentiny/vue-renderless/picker/vue'
 import template from 'virtual-template?pc|mobile'
 
 const currentYear = new Date().getFullYear()
@@ -217,9 +218,27 @@ export const datePickerProps = {
   }
 }
 
+const getWrapFunc = (name) =>
+  function (...args) {
+    const picker = this.$refs.modeTemplate
+    if (picker && picker[name]) {
+      return picker[name](...args)
+    }
+  }
+
 export default defineComponent({
   name: $prefix + 'DatePicker',
   props: datePickerProps,
+  created() {
+    // 解决三层组件导致第一层datePicker无法调用Picker方法（例如：handleFocus）的问题
+    api
+      .filter((item) => item !== 'state')
+      .forEach((method) => {
+        if (!this[method]) {
+          this[method] = getWrapFunc(method)
+        }
+      })
+  },
   setup(props, context) {
     return $setup({ props, context, template })
   }
diff --git a/packages/vue/src/date-range/package.json b/packages/vue/src/date-range/package.json
index 4df1041547..8cc7145f7d 100644
--- a/packages/vue/src/date-range/package.json
+++ b/packages/vue/src/date-range/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-date-range",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/date-table/package.json b/packages/vue/src/date-table/package.json
index ad7c2c6bee..e88c7f47ad 100644
--- a/packages/vue/src/date-table/package.json
+++ b/packages/vue/src/date-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-date-table",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dept/package.json b/packages/vue/src/dept/package.json
index 6c5e07c8fd..843c68273c 100644
--- a/packages/vue/src/dept/package.json
+++ b/packages/vue/src/dept/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dept",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dialog-box/package.json b/packages/vue/src/dialog-box/package.json
index 8b927916f8..69e655c91b 100644
--- a/packages/vue/src/dialog-box/package.json
+++ b/packages/vue/src/dialog-box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dialog-box",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dialog-box/src/index.ts b/packages/vue/src/dialog-box/src/index.ts
index 6dd901dfdb..213a302954 100644
--- a/packages/vue/src/dialog-box/src/index.ts
+++ b/packages/vue/src/dialog-box/src/index.ts
@@ -22,7 +22,7 @@ export const $constants = {
   PC_SCROLL_LOCK_CLASS: 'dialog-box__scroll-lock',
   MOBILE_SCROLL_LOCK_CLASS: 'mobile-dialog-box__scroll-lock',
   Mode: 'pc',
-  scrollLockClass(mode) {
+  SCROLL_LOCK_CLASS(mode) {
     return mode === this.Mode ? this.PC_SCROLL_LOCK_CLASS : this.MOBILE_SCROLL_LOCK_CLASS
   }
 }
diff --git a/packages/vue/src/dialog-box/src/mobile-first.vue b/packages/vue/src/dialog-box/src/mobile-first.vue
index 3102c22e17..c6e9e4db37 100644
--- a/packages/vue/src/dialog-box/src/mobile-first.vue
+++ b/packages/vue/src/dialog-box/src/mobile-first.vue
@@ -77,11 +77,7 @@
             <div
               data-tag="tiny-dialog-box__body"
               class="text-left pt-0 pr-6 pb-0 pl-6 mb-3 mt-3 text-color-text-primary leading-5.5 text-sm overflow-auto"
-              :class="[
-                state.isFull ? 'max-h-[calc(100vh-theme(spacing.28))]' : 'max-h-[65vh]',
-                rightSlide ? 'max-h-[none] flex-auto' : ''
-              ]"
-              :style="state.bodyStyle"
+              :class="[rightSlide || state.isFull ? 'max-h-[none] flex-auto' : 'max-h-[65vh]']"
             >
               <slot></slot>
             </div>
@@ -108,13 +104,14 @@
         :before-close="beforeClose"
         @update:visible="$emit('update:visible', $event)"
       >
-        <template v-for="(value, name) in slots" #[name]="scopeData" :key="name">
+        <template v-for="(value, name) in slots" #[name]="scopeData">
           <div
             :class="{
               'flex w-full justify-between px-4 [&_[data-tag=tiny-button]]:flex-grow [&_[data-tag=tiny-button]:nth-child(2)]:ml-2':
                 name === 'footer',
               'px-4 min-h-[250px]': name === 'default'
             }"
+            :key="name"
           >
             <slot :name="name" v-bind="scopeData"></slot>
           </div>
diff --git a/packages/vue/src/dialog-box/src/pc.vue b/packages/vue/src/dialog-box/src/pc.vue
index cfe8f102c3..542a430e87 100644
--- a/packages/vue/src/dialog-box/src/pc.vue
+++ b/packages/vue/src/dialog-box/src/pc.vue
@@ -34,7 +34,7 @@
           class="tiny-dialog-box"
           :key="state.key"
         >
-          <div v-if="showHeader" class="tiny-dialog-box__header" @mousedown="handleDrag">
+          <div v-if="showHeader" ref="header" class="tiny-dialog-box__header" @mousedown="handleDrag">
             <slot name="title">
               <span class="tiny-dialog-box__title">{{ title }}</span>
             </slot>
@@ -67,10 +67,10 @@
               <icon-close class="tiny-svg-size tiny-dialog-box__close" />
             </button>
           </div>
-          <div class="tiny-dialog-box__body" :style="state.bodyStyle">
+          <div class="tiny-dialog-box__body">
             <slot></slot>
           </div>
-          <div v-if="slots.footer" class="tiny-dialog-box__footer">
+          <div v-if="slots.footer" ref="footer" class="tiny-dialog-box__footer">
             <slot name="footer" :before-close="beforeClose"></slot>
           </div>
         </div>
diff --git a/packages/vue/src/dialog-select/package.json b/packages/vue/src/dialog-select/package.json
index 14777bd7a0..13e4daae73 100644
--- a/packages/vue/src/dialog-select/package.json
+++ b/packages/vue/src/dialog-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dialog-select",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/divider/package.json b/packages/vue/src/divider/package.json
index 9533e951e4..0710cfa0ee 100644
--- a/packages/vue/src/divider/package.json
+++ b/packages/vue/src/divider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-divider",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/drawer/index.ts b/packages/vue/src/drawer/index.ts
index 2bc0f84f03..0421706318 100644
--- a/packages/vue/src/drawer/index.ts
+++ b/packages/vue/src/drawer/index.ts
@@ -1,11 +1,15 @@
+import { setupComponent } from '@opentiny/vue-common'
 import Drawer from './src/index'
+import service from './src/service'
 import { version } from './package.json'
 
 Drawer.model = {
-  prop: 'modelValue',
-  event: 'update:modelValue'
+  prop: 'visible',
+  event: 'update:visible'
 }
 
+Drawer.service = service
+
 /* istanbul ignore next */
 Drawer.install = function (Vue) {
   Vue.component(Drawer.name, Drawer)
@@ -20,4 +24,11 @@ if (process.env.BUILD_TARGET === 'runtime') {
   }
 }
 
+setupComponent.TINYDrawer = {
+  init(root) {
+    let prefix = root.$apiPrefix || '$'
+    root[`${prefix}drawer`] = service
+  }
+}
+
 export default Drawer
diff --git a/packages/vue/src/drawer/package.json b/packages/vue/src/drawer/package.json
index d13ea792f3..eec82747ce 100644
--- a/packages/vue/src/drawer/package.json
+++ b/packages/vue/src/drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-drawer",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/drawer/src/index.ts b/packages/vue/src/drawer/src/index.ts
index 4295c93689..df897854d0 100644
--- a/packages/vue/src/drawer/src/index.ts
+++ b/packages/vue/src/drawer/src/index.ts
@@ -1,16 +1,17 @@
 import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
-const $constants = {
+export const $constants = {
   SCROLL_LOCK_CLASS(mode: string) {
     const scrollLockClasses = {
       'mobile-first': 'overflow-hidden',
-      'pc': 'tiny-popup-parent--hidden tiny-dialog-box__scroll-lock'
+      'pc': 'popup-parent--hidden dialog-box__scroll-lock'
     }
     return (scrollLockClasses[mode] || '') as string
   },
   DEFAULT_WIDTH: '500px'
 }
+
 export const drawerProps = {
   ...$props,
   _constants: {
@@ -64,7 +65,10 @@ export const drawerProps = {
     default: 2000
   },
   beforeClose: Function,
-  tipsProps: Object
+  tipsProps: Object,
+
+  // tiny 新增：用于方法调用组件
+  customSlots: Object
 }
 
 export default defineComponent({
diff --git a/packages/vue/src/drawer/src/mobile-first.vue b/packages/vue/src/drawer/src/mobile-first.vue
index 17ef717dd5..16bbed8b4e 100644
--- a/packages/vue/src/drawer/src/mobile-first.vue
+++ b/packages/vue/src/drawer/src/mobile-first.vue
@@ -5,8 +5,8 @@
       ref="mask"
       v-if="mask"
       :class="
-        m('fixed z-50 left-0 right-0 top-0 bottom-0 w-full h-full transition-opacity ease-linear duration-200', {
-          'bg-color-bg-7': state.toggle
+        m('fixed z-50 left-0 right-0 top-0 bottom-0 w-full h-full transition ease-linear duration-200', {
+          'bg-color-bg-7': state.visible
         })
       "
       @click="handleClose('mask')"
@@ -23,10 +23,10 @@
           { 'max-h-full': ['top', 'bottom'].includes(placement) },
           { 'left-0 bottom-0 translate-y-full border-t-0.5 rounded-t-lg': placement === 'bottom' },
           { 'left-0 top-0 -translate-y-full border-b-0.5 rounded-b-lg': placement === 'top' },
-          { 'translate-y-0': ['top', 'bottom'].includes(placement) && state.toggle },
+          { 'translate-y-0': ['top', 'bottom'].includes(placement) && state.visible },
           { 'left-0 top-0 -translate-x-full border-r-0.5 rounded-r-lg': placement === 'left' },
           { 'right-0 top-0 translate-x-full border-l-0.5 rounded-l-lg': placement === 'right' },
-          { 'translate-x-0': ['left', 'right'].includes(placement) && state.toggle },
+          { 'translate-x-0': ['left', 'right'].includes(placement) && state.visible },
           customClass
         )
       "
@@ -119,6 +119,7 @@ export default defineComponent({
     'flex',
     'beforeClose'
   ],
+  emits: ['update:visible', 'open', 'close', 'confirm'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
diff --git a/packages/vue/src/drawer/src/pc.vue b/packages/vue/src/drawer/src/pc.vue
index c0e6a33f2d..34926700d3 100644
--- a/packages/vue/src/drawer/src/pc.vue
+++ b/packages/vue/src/drawer/src/pc.vue
@@ -4,8 +4,8 @@
     <transition name="drawer-fade">
       <div
         ref="mask"
-        v-if="mask && visible"
-        :class="['tiny-drawer__mask', { 'show-bg-color': state.toggle }]"
+        v-if="mask && state.visible"
+        class="tiny-drawer__mask show-bg-color"
         :style="{ zIndex }"
         @click="handleClose('mask')"
       ></div>
@@ -24,7 +24,7 @@
             'is-top': placement === 'top',
             'is-bottom': placement === 'bottom',
             'drag-effects': !state.dragEvent.isDrag,
-            'toggle': state.toggle
+            'toggle': state.visible
           },
           'tiny-drawer-main',
           customClass
@@ -34,7 +34,7 @@
           height: ['top', 'bottom'].includes(placement) && dragable && state.height ? state.height + 'px' : null,
           zIndex
         }"
-        v-show="visible"
+        v-show="state.visible"
       >
         <div
           v-if="dragable"
@@ -55,7 +55,8 @@
           <!-- header -->
           <div data-tag="drawer-header" ref="header" v-if="showHeader" class="tiny-drawer__header-wrapper">
             <slot name="header">
-              <div class="tiny-drawer__header">
+              <slot-wrapper v-if="customSlots?.header" :node="customSlots.header"></slot-wrapper>
+              <div v-else class="tiny-drawer__header">
                 <div class="tiny-drawer__header-left">
                   <div v-if="title" class="tiny-drawer__title">{{ title }}</div>
                   <tiny-tooltip v-if="tipsProps" v-bind="tipsProps">
@@ -63,7 +64,9 @@
                   </tiny-tooltip>
                 </div>
                 <div class="tiny-drawer__header-right">
-                  <slot name="header-right"></slot>
+                  <slot name="header-right">
+                    <slot-wrapper v-if="customSlots?.headerRight" :node="customSlots.headerRight"></slot-wrapper>
+                  </slot>
                 </div>
               </div>
             </slot>
@@ -84,24 +87,30 @@
             ref="body"
             :class="['tiny-drawer__body', { 'flex flex-col': flex }, 'drawer-body']"
           >
-            <slot></slot>
+            <slot>
+              <slot-wrapper :node="customSlots.default"></slot-wrapper>
+            </slot>
           </div>
 
           <!-- footer -->
           <div data-tag="drawer-footer" ref="footer" v-if="showFooter" class="tiny-drawer__footer">
             <slot name="footer">
-              <tiny-button
-                type="primary"
-                :class="['tiny-drawer__confirm-btn', { reverse: state.btnOrderReversed }]"
-                @click="handleClose('confirm')"
-                >{{ t('ui.button.confirm') }}</tiny-button
-              >
-              <tiny-button
-                plain
-                :class="['tiny-drawer__cancel-btn', { reverse: state.btnOrderReversed }]"
-                @click="handleClose('cancel')"
-                >{{ t('ui.button.cancel') }}</tiny-button
-              >
+              <slot-wrapper v-if="customSlots?.footer" :node="customSlots.footer"></slot-wrapper>
+
+              <template v-else>
+                <tiny-button
+                  type="primary"
+                  :class="['tiny-drawer__confirm-btn', { reverse: state.btnOrderReversed }]"
+                  @click="handleClose('confirm')"
+                  >{{ t('ui.button.confirm') }}</tiny-button
+                >
+                <tiny-button
+                  plain
+                  :class="['tiny-drawer__cancel-btn', { reverse: state.btnOrderReversed }]"
+                  @click="handleClose('cancel')"
+                  >{{ t('ui.button.cancel') }}</tiny-button
+                >
+              </template>
             </slot>
           </div>
         </div>
@@ -112,7 +121,7 @@
 
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/drawer/vue'
-import { setup, props, defineComponent } from '@opentiny/vue-common'
+import { setup, props, defineComponent, h } from '@opentiny/vue-common'
 import '@opentiny/vue-theme/drawer/index.less'
 import { iconClose, iconHelpCircle } from '@opentiny/vue-icon'
 import Button from '@opentiny/vue-button'
@@ -123,7 +132,20 @@ export default defineComponent({
     TinyButton: Button,
     TinyTooltip: Tooltip,
     IconClose: iconClose(),
-    IconHelpCircle: iconHelpCircle()
+    IconHelpCircle: iconHelpCircle(),
+
+    // tiny新增: 适配Vue2下, 在模板中渲染VNode
+    SlotWrapper: {
+      props: ['node'],
+      render() {
+        const { node } = this
+        if (typeof node === 'function') {
+          return node(h)
+        } else {
+          return node
+        }
+      }
+    }
   },
   props: [
     ...props,
@@ -142,7 +164,8 @@ export default defineComponent({
     'showClose',
     'zIndex',
     'beforeClose',
-    'tipsProps'
+    'tipsProps',
+    'customSlots'
   ],
   emits: ['update:visible', 'open', 'close', 'confirm'],
   setup(props, context) {
diff --git a/packages/vue/src/drawer/src/service.ts b/packages/vue/src/drawer/src/service.ts
new file mode 100644
index 0000000000..e569aa69be
--- /dev/null
+++ b/packages/vue/src/drawer/src/service.ts
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+import { createComponent, appProperties, hooks } from '@opentiny/vue-common'
+import Drawer from './index'
+import { $constants } from './index'
+
+// 默认 props
+export const defaultConfigs = {
+  customClass: null,
+  placement: 'right',
+  width: null,
+  title: '',
+  showClose: true,
+  showHeader: true,
+  showFooter: false,
+  mask: true,
+  maskClosable: true,
+  dragable: false,
+  lockScroll: true,
+  flex: false,
+  zIndex: 2000,
+  beforeClose: null,
+  tipsProps: null
+}
+
+export default (configs = {}) => {
+  const events = {
+    onOpen: (params: unknown) => {
+      if (typeof configs.events?.open === 'function') {
+        configs.events.open(params)
+      }
+    },
+    onClose: (params: unknown) => {
+      if (typeof configs.events?.close === 'function') {
+        configs.events.close(params)
+      }
+    },
+    onConfirm: (params: unknown) => {
+      if (typeof configs.events?.confirm === 'function') {
+        configs.events.confirm(params)
+      }
+    }
+  }
+  const options = {
+    ...defaultConfigs,
+    ...configs,
+    ...events
+  }
+
+  const instance = createComponent({
+    component: Drawer,
+    propsData: {
+      ...options,
+      _constants: $constants,
+      tiny_mode: configs.tiny_mode || appProperties().tiny_mode?.value
+    },
+    el: document.createElement('div')
+  })
+  const parent = document.body
+  parent.appendChild(instance.$el)
+  hooks.nextTick(() => {
+    instance.open()
+  })
+
+  return instance
+}
diff --git a/packages/vue/src/drop-roles/package.json b/packages/vue/src/drop-roles/package.json
index c22ecb0bf5..50fdf867c1 100644
--- a/packages/vue/src/drop-roles/package.json
+++ b/packages/vue/src/drop-roles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-drop-roles",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/drop-times/package.json b/packages/vue/src/drop-times/package.json
index 2d9f8ac9df..9888e09e9d 100644
--- a/packages/vue/src/drop-times/package.json
+++ b/packages/vue/src/drop-times/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-drop-times",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dropdown-item/package.json b/packages/vue/src/dropdown-item/package.json
index b8e123d613..de35c9da0b 100644
--- a/packages/vue/src/dropdown-item/package.json
+++ b/packages/vue/src/dropdown-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dropdown-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dropdown-menu/package.json b/packages/vue/src/dropdown-menu/package.json
index 7579ecfa1f..bdc24e90b4 100644
--- a/packages/vue/src/dropdown-menu/package.json
+++ b/packages/vue/src/dropdown-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dropdown-menu",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dropdown/package.json b/packages/vue/src/dropdown/package.json
index b832157a60..900820aa51 100644
--- a/packages/vue/src/dropdown/package.json
+++ b/packages/vue/src/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dropdown",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dropdown/src/mobile-first.vue b/packages/vue/src/dropdown/src/mobile-first.vue
index db5663ed81..b94ef1caa2 100644
--- a/packages/vue/src/dropdown/src/mobile-first.vue
+++ b/packages/vue/src/dropdown/src/mobile-first.vue
@@ -67,7 +67,15 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['visible-change', 'item-click', 'button-click', 'selectedIndex', 'current-item-click', 'is-disabled'],
+  emits: [
+    'visible-change',
+    'item-click',
+    'button-click',
+    'current-item-click',
+    'menu-item-click',
+    'is-disabled',
+    'selected-index'
+  ],
   setup(props, context) {
     return setup({ props, context, renderless, api, mono: true, h })
   },
diff --git a/packages/vue/src/dynamic-scroller-item/package.json b/packages/vue/src/dynamic-scroller-item/package.json
index 16f4288903..827223301f 100644
--- a/packages/vue/src/dynamic-scroller-item/package.json
+++ b/packages/vue/src/dynamic-scroller-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dynamic-scroller-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/dynamic-scroller/package.json b/packages/vue/src/dynamic-scroller/package.json
index 314996d1aa..0d8e27662c 100644
--- a/packages/vue/src/dynamic-scroller/package.json
+++ b/packages/vue/src/dynamic-scroller/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dynamic-scroller",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/espace/package.json b/packages/vue/src/espace/package.json
index 6901de32f7..c5074a7149 100644
--- a/packages/vue/src/espace/package.json
+++ b/packages/vue/src/espace/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-espace",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/exception/package.json b/packages/vue/src/exception/package.json
index 458e628083..4fb6a8c6b1 100644
--- a/packages/vue/src/exception/package.json
+++ b/packages/vue/src/exception/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-exception",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/fall-menu/package.json b/packages/vue/src/fall-menu/package.json
index 56557a9c65..f1c16cce49 100644
--- a/packages/vue/src/fall-menu/package.json
+++ b/packages/vue/src/fall-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-fall-menu",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/file-upload/package.json b/packages/vue/src/file-upload/package.json
index efd95513a0..9e2fe4a751 100644
--- a/packages/vue/src/file-upload/package.json
+++ b/packages/vue/src/file-upload/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-file-upload",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/file-upload/src/pc.vue b/packages/vue/src/file-upload/src/pc.vue
index 5385a6baac..28ee5d0137 100644
--- a/packages/vue/src/file-upload/src/pc.vue
+++ b/packages/vue/src/file-upload/src/pc.vue
@@ -491,7 +491,7 @@ export default defineComponent({
         {notice}
         {isPictureCard ? uploadList : ''}
         {slots.trigger ? [uploadComponent, defaultSlot] : uploadComponent}
-        {slots.tip && slots.tip()}
+        {!isSaasType && slots.tip && slots.tip()}
         {isPictureCard ? '' : uploadList}
         {previewComponent}
         {encryptDialogComponent}
diff --git a/packages/vue/src/filter-bar/package.json b/packages/vue/src/filter-bar/package.json
index 4d2dcfeb32..0ab8c9e4b1 100644
--- a/packages/vue/src/filter-bar/package.json
+++ b/packages/vue/src/filter-bar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-filter-bar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/filter-box/package.json b/packages/vue/src/filter-box/package.json
index 9696a11717..35ea92b448 100644
--- a/packages/vue/src/filter-box/package.json
+++ b/packages/vue/src/filter-box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-filter-box",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/filter-panel/package.json b/packages/vue/src/filter-panel/package.json
index c8cefdc592..96bb56e05d 100644
--- a/packages/vue/src/filter-panel/package.json
+++ b/packages/vue/src/filter-panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-filter-panel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/filter/package.json b/packages/vue/src/filter/package.json
index 6624426008..daad4c94cb 100644
--- a/packages/vue/src/filter/package.json
+++ b/packages/vue/src/filter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-filter",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/float-button/package.json b/packages/vue/src/float-button/package.json
index 3af23d9be9..7eb296649c 100644
--- a/packages/vue/src/float-button/package.json
+++ b/packages/vue/src/float-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-float-button",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/floatbar/package.json b/packages/vue/src/floatbar/package.json
index 7b8cf1ed89..2df1cd0cbe 100644
--- a/packages/vue/src/floatbar/package.json
+++ b/packages/vue/src/floatbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-floatbar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/floating-button/package.json b/packages/vue/src/floating-button/package.json
index c7b4977761..71ce3a56f7 100644
--- a/packages/vue/src/floating-button/package.json
+++ b/packages/vue/src/floating-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-floating-button",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "module": "index.ts",
   "sideEffects": false,
diff --git a/packages/vue/src/flowchart/package.json b/packages/vue/src/flowchart/package.json
index 6df608a318..60cddb7302 100644
--- a/packages/vue/src/flowchart/package.json
+++ b/packages/vue/src/flowchart/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-flowchart",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/fluent-editor/index.ts b/packages/vue/src/fluent-editor/index.ts
new file mode 100644
index 0000000000..c7846603e4
--- /dev/null
+++ b/packages/vue/src/fluent-editor/index.ts
@@ -0,0 +1,23 @@
+import FluentEditor from './src/pc.vue'
+import { version } from './package.json'
+
+FluentEditor.model = {
+  prop: 'modelValue',
+  event: 'update:modelValue'
+}
+
+/* istanbul ignore next */
+FluentEditor.install = function (Vue) {
+  Vue.component(FluentEditor.name, FluentEditor)
+}
+
+FluentEditor.version = version
+
+/* istanbul ignore next */
+if (process.env.BUILD_TARGET === 'runtime') {
+  if (typeof window !== 'undefined' && window.Vue) {
+    FluentEditor.install(window.Vue)
+  }
+}
+
+export default FluentEditor
diff --git a/packages/vue/src/fluent-editor/package.json b/packages/vue/src/fluent-editor/package.json
new file mode 100644
index 0000000000..478cfa3983
--- /dev/null
+++ b/packages/vue/src/fluent-editor/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@opentiny/vue-fluent-editor",
+  "version": "3.16.0",
+  "description": "",
+  "main": "lib/index.js",
+  "module": "index.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@opentiny/vue-common": "workspace:~",
+    "@opentiny/vue-icon": "workspace:~",
+    "@opentiny/vue-image-viewer": "workspace:~",
+    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/fluent-editor": "workspace:~"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@opentiny-internal/vue-test-utils": "workspace:*",
+    "vitest": "^0.25.7"
+  },
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}
\ No newline at end of file
diff --git a/packages/vue/src/fluent-editor/src/pc.vue b/packages/vue/src/fluent-editor/src/pc.vue
new file mode 100644
index 0000000000..eba3f05d91
--- /dev/null
+++ b/packages/vue/src/fluent-editor/src/pc.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="tiny-editor-wrapper" :class="{ 'fullscreen': state.isFullscreen }" :style="{ 'z-index': state.zIndex }">
+    <div ref="editor" id="editor" class="tiny-editor" @dblclick="handleDblclick"></div>
+    <tiny-image-viewer v-if="state.showPreview" v-bind="state.previewOptions"></tiny-image-viewer>
+    <div class="toolbar-icon" ref="editor-toolbar-icon">
+      <div v-for="icon in state.icons" :key="icon" :ref="icon">
+        <component :is="icon"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
+import { renderless, api } from '@opentiny/vue-renderless/fluent-editor/vue'
+import '@opentiny/fluent-editor/dist/style.css'
+import '@opentiny/vue-theme/fluent-editor/index.less'
+import FluentEditor from '@opentiny/fluent-editor'
+import {
+  IconEditorAlignCenter,
+  IconEditorAlignLeft,
+  IconEditorAlignRight,
+  IconEditorBackground,
+  IconEditorBold,
+  IconEditorCode,
+  IconEditorDeleteline,
+  IconEditorEraser,
+  IconEditorItalic,
+  IconEditorLeftBorder,
+  IconEditorList,
+  IconEditorListDot,
+  IconEditorListNum,
+  IconEditorMenuLeft,
+  IconEditorMenuRight,
+  IconEditorQuote,
+  IconEditorRedo,
+  IconEditorRightBorder,
+  IconEditorSub,
+  IconEditorSubtitle,
+  IconEditorSuper,
+  IconEditorTable,
+  IconEditorTextcolor,
+  IconEditorTitle,
+  IconEditorUnderline,
+  IconEditorUndo,
+  IconEditorVideo,
+  IconLink,
+  IconPicture,
+  IconCloudUpload,
+  IconFullscreen
+} from '@opentiny/vue-icon'
+import ImageViewer from '@opentiny/vue-image-viewer'
+
+const $constants = {
+  PIC_PREVIEW_OPTIONS: {
+    zIndex: Number.POSITIVE_INFINITY,
+    urlList: null
+  },
+  EDITOR_FULLSCREEN_OPTIONS: Number.POSITIVE_INFINITY
+}
+
+export default defineComponent({
+  name: $prefix + 'FluentEditor',
+  components: {
+    TinyImageViewer: ImageViewer,
+    IconEditorAlignCenter: IconEditorAlignCenter(),
+    IconEditorAlignLeft: IconEditorAlignLeft(),
+    IconEditorAlignRight: IconEditorAlignRight(),
+    IconEditorBackground: IconEditorBackground(),
+    IconEditorBold: IconEditorBold(),
+    IconEditorCode: IconEditorCode(),
+    IconEditorDeleteline: IconEditorDeleteline(),
+    IconEditorEraser: IconEditorEraser(),
+    IconEditorItalic: IconEditorItalic(),
+    IconEditorLeftBorder: IconEditorLeftBorder(),
+    IconEditorList: IconEditorList(),
+    IconEditorListDot: IconEditorListDot(),
+    IconEditorListNum: IconEditorListNum(),
+    IconEditorMenuLeft: IconEditorMenuLeft(),
+    IconEditorMenuRight: IconEditorMenuRight(),
+    IconEditorQuote: IconEditorQuote(),
+    IconEditorRedo: IconEditorRedo(),
+    IconEditorRightBorder: IconEditorRightBorder(),
+    IconEditorSub: IconEditorSub(),
+    IconEditorSubtitle: IconEditorSubtitle(),
+    IconEditorSuper: IconEditorSuper(),
+    IconEditorTable: IconEditorTable(),
+    IconEditorTextcolor: IconEditorTextcolor(),
+    IconEditorTitle: IconEditorTitle(),
+    IconEditorUnderline: IconEditorUnderline(),
+    IconEditorUndo: IconEditorUndo(),
+    IconEditorVideo: IconEditorVideo(),
+    IconLink: IconLink(),
+    IconPicture: IconPicture(),
+    IconCloudUpload: IconCloudUpload(),
+    IconFullscreen: IconFullscreen()
+  },
+  emits: ['ready', 'blur', 'focus', 'update:modelValue', 'change'],
+  props: {
+    _constants: {
+      type: Object,
+      default: () => $constants
+    },
+    content: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    fileUpload: Object,
+    globalOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    imageUpload: Object,
+    mentionObj: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    modelValue: String,
+    options: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    picPreview: [Object, Boolean],
+    dataType: {
+      type: Boolean,
+      default: true
+    },
+    dataUpgrade: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: $constants.EDITOR_FULLSCREEN_OPTIONS
+    },
+    imagePasteFailCallback: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  setup(props, context): any {
+    return setup({
+      props,
+      context,
+      renderless,
+      api,
+      mono: true,
+      extendOptions: {
+        FluentEditor
+      }
+    })
+  }
+})
+</script>
diff --git a/packages/vue/src/form-item/package.json b/packages/vue/src/form-item/package.json
index 211eeea59d..c53aeaca0e 100644
--- a/packages/vue/src/form-item/package.json
+++ b/packages/vue/src/form-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-form-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/form-item/src/mobile-first.vue b/packages/vue/src/form-item/src/mobile-first.vue
index e16166f97d..cc6cd4f3c3 100644
--- a/packages/vue/src/form-item/src/mobile-first.vue
+++ b/packages/vue/src/form-item/src/mobile-first.vue
@@ -49,9 +49,9 @@
         <span
           :class="
             m(
-              'max-h-[theme(spacing.10)] line-clamp-2 inline-block relative top-px pl-2 sm:pl-0 leading-normal',
+              'max-h-[theme(spacing.10)] line-clamp-2 inline-block relative top-px leading-normal',
               (state.isRequired || required) && !state.hideRequiredAsterisk
-                ? `before:content-['*'] before:text-color-error before:absolute before:left-0 before:sm:relative`
+                ? `before:content-['*'] before:text-color-error before:relative before:mr-1`
                 : '',
               state.isDisplayOnly ? 'pl-0 before:hidden' : ''
             )
@@ -105,9 +105,8 @@
         :class="[
           '[&_[aria-label=checkbox-group]]:pl-0.5 sm:[&_[aria-label=checkbox-group]]:pl-0',
           '[&_>:first-child[data-tag=tiny-checkbox]]:pl-0.5 sm:[&_>:first-child[data-tag=tiny-checkbox]]:pl-0',
-          '[&_>:first-child[data-tag=tiny-cascader]]:w-full',
-          '[&_>:first-child[class=tiny-autocomplete]]:w-full',
-          '[&_>:first-child[class=tiny-cascader]]:w-full',
+          '[&_[class=tiny-autocomplete]]:w-full',
+          '[&_[class=tiny-cascader]]:w-full',
           state.isDisplayOnly
             ? '[&_>*:not([data-tag^=tiny-],[class^=tiny-])]:leading-8 [&_>*:not([data-tag^=tiny-],[class^=tiny-])]:sm:leading-normal'
             : ''
@@ -123,7 +122,7 @@
         <div
           :class="
             m(
-              'relative sm:absolute left-0 bottom-1 sm:-bottom-5 text-color-error text-xs leading-normal line-clamp-3 sm:line-clamp-1',
+              'relative sm:absolute left-0 bottom-1 sm:-bottom-5 text-color-error text-xs leading-normal line-clamp-3 sm:line-clamp-1 break-all',
               (typeof inlineMessage === 'boolean' && inlineMessage) || state.inlineMessage
                 ? 'relative top-auto left-auto inline-block'
                 : '',
diff --git a/packages/vue/src/form-item/src/pc.vue b/packages/vue/src/form-item/src/pc.vue
index ba842595a6..5faf8faf80 100644
--- a/packages/vue/src/form-item/src/pc.vue
+++ b/packages/vue/src/form-item/src/pc.vue
@@ -122,7 +122,7 @@ export default defineComponent({
 
           Object.assign(item.props, {
             size: state.formItemSize,
-            mini: state.formItemSize === 'mini'
+            mini: state.formItemSize === 'mini' || Boolean(item.props.mini)
           })
 
           if (type && type.name && type.name.toLowerCase().endsWith('button')) {
@@ -182,8 +182,8 @@ export default defineComponent({
         typeof this.appendToBody === 'boolean'
           ? this.appendToBody
           : typeof formAppendToBody === 'boolean'
-          ? formAppendToBody
-          : true
+            ? formAppendToBody
+            : true
       const validatePosition =
         this.validatePosition || (state.formInstance && state.formInstance.validatePosition) || 'top-end'
 
diff --git a/packages/vue/src/form/package.json b/packages/vue/src/form/package.json
index 959d274fd8..f1f23e9f8f 100644
--- a/packages/vue/src/form/package.json
+++ b/packages/vue/src/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-form",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/form/src/index.ts b/packages/vue/src/form/src/index.ts
index 58af7a82b9..80172f3156 100644
--- a/packages/vue/src/form/src/index.ts
+++ b/packages/vue/src/form/src/index.ts
@@ -106,6 +106,10 @@ export const formProps = {
   overflowTitle: {
     type: Boolean,
     default: false
+  },
+  tooltipConfig: {
+    type: Object,
+    default: () => ({})
   }
 }
 
diff --git a/packages/vue/src/form/src/mobile-first.vue b/packages/vue/src/form/src/mobile-first.vue
index db0615d75e..2f92c87236 100644
--- a/packages/vue/src/form/src/mobile-first.vue
+++ b/packages/vue/src/form/src/mobile-first.vue
@@ -13,11 +13,11 @@
       v-if="displayOnly"
       ref="tooltip"
       v-model="state.tooltipVisible"
-      popper-class="absolute"
+      :popper-class="tooltipConfig.popperClass || 'absolute'"
       :manual="true"
-      effect="light"
+      :effect="tooltipConfig.effect || 'light'"
       :content="state.displayedValue"
-      placement="top"
+      :placement="tooltipConfig.placement || 'top'"
     >
     </tiny-tooltip>
   </form>
@@ -62,7 +62,8 @@ export default defineComponent({
     'appendToBody',
     'popperOptions',
     'displayOnly',
-    'showEmptyValue'
+    'showEmptyValue',
+    'tooltipConfig'
   ],
   setup(props, context): any {
     return setup({ props, context, renderless, api }) as unknown as IFormApi
diff --git a/packages/vue/src/form/src/pc.vue b/packages/vue/src/form/src/pc.vue
index 550ba1d5bb..f3c4897491 100644
--- a/packages/vue/src/form/src/pc.vue
+++ b/packages/vue/src/form/src/pc.vue
@@ -27,10 +27,11 @@
       v-if="overflowTitle"
       ref="tooltip"
       v-model="state.tooltipVisible"
+      v-bind="tooltipConfig"
       :manual="true"
-      effect="light"
+      :effect="tooltipConfig.effect || 'light'"
       :content="state.displayedValue"
-      placement="top"
+      :placement="tooltipConfig.placement || 'top'"
     >
     </tiny-tooltip>
   </form>
@@ -76,7 +77,8 @@ export default defineComponent({
     'showAutoWidth',
     'showEmptyValue',
     'validateTag',
-    'overflowTitle'
+    'overflowTitle',
+    'tooltipConfig'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as IFormApi
diff --git a/packages/vue/src/fullscreen/package.json b/packages/vue/src/fullscreen/package.json
index 99dee029db..7a78f4c976 100644
--- a/packages/vue/src/fullscreen/package.json
+++ b/packages/vue/src/fullscreen/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-fullscreen",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/fullscreen/src/pc.vue b/packages/vue/src/fullscreen/src/pc.vue
index b023f557cd..1443ca3b86 100644
--- a/packages/vue/src/fullscreen/src/pc.vue
+++ b/packages/vue/src/fullscreen/src/pc.vue
@@ -17,7 +17,7 @@
     :style="state.wrapperStyle"
     :class="{ [fullscreenClass]: state.isFullscreen }"
     @click="shadeClick($event)"
-    @keyup="exit"
+    @keyup.esc="exit"
   >
     <slot />
   </div>
@@ -29,6 +29,7 @@ import { renderless, api } from '@opentiny/vue-renderless/fullscreen/vue'
 
 export default defineComponent({
   name: $prefix + 'Fullscreen',
+  emits: ['change', 'update:modelValue', 'update:fullscreen'],
   props: {
     fullscreen: {
       type: Boolean,
diff --git a/packages/vue/src/grid-column/package.json b/packages/vue/src/grid-column/package.json
index 8caecadffe..37d90ad7a0 100644
--- a/packages/vue/src/grid-column/package.json
+++ b/packages/vue/src/grid-column/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-grid-column",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/grid-manager/package.json b/packages/vue/src/grid-manager/package.json
index e1f1a653ff..66dfa8afd6 100644
--- a/packages/vue/src/grid-manager/package.json
+++ b/packages/vue/src/grid-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-grid-manager",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/grid-toolbar/package.json b/packages/vue/src/grid-toolbar/package.json
index f3b786b120..b195304acf 100644
--- a/packages/vue/src/grid-toolbar/package.json
+++ b/packages/vue/src/grid-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-grid-toolbar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -41,7 +41,8 @@
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
-    "@opentiny/vue-popover": "workspace:~"
+    "@opentiny/vue-popover": "workspace:~",
+    "@opentiny/vue-tree": "workspace:~"
   },
   "license": "MIT"
 }
\ No newline at end of file
diff --git a/packages/vue/src/grid-toolbar/src/custom-saas.vue b/packages/vue/src/grid-toolbar/src/custom-saas.vue
index 2c10333e05..327dbc08e9 100644
--- a/packages/vue/src/grid-toolbar/src/custom-saas.vue
+++ b/packages/vue/src/grid-toolbar/src/custom-saas.vue
@@ -58,41 +58,72 @@
                       @input="searchChange"
                       :placeholder="t('ui.grid.individuation.toolbar.search')"
                     ></tiny-search>
-                    <div v-if="searchValue">
-                      <tiny-checkbox-group v-model="checkedColumns" vertical>
+                    <div v-if="isGroup">
+                      <div class="multi-check-all-btn" v-if="!searchValue">
                         <tiny-checkbox
-                          v-for="column in searchColumns"
-                          :label="column.property"
-                          :disabled="column.alwaysShow"
-                          :key="column.property"
+                          :indeterminate="isMultiIndeterminate"
+                          v-model="multiCheckAll"
+                          @change="checkAllChange"
                         >
-                          <title-render :column="column"></title-render>
-                        </tiny-checkbox>
-                      </tiny-checkbox-group>
-                    </div>
-                    <div v-else>
-                      <div class="check-all-btn">
-                        <tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll">
                           {{ t('ui.grid.individuation.toolbar.all') }}
                         </tiny-checkbox>
                       </div>
-                      <tiny-checkbox-group v-model="checkedColumns" vertical>
-                        <template v-for="(group, index) in groupedColumns">
-                          <div v-if="defer(Math.floor(index / 5))" :key="index">
-                            <p v-if="group.label" class="group-label" :class="[index === 0 && 'group-label-first']">
-                              {{ group.label }}
-                            </p>
-                            <tiny-checkbox
-                              v-for="column in group.data"
-                              :label="column.property"
-                              :disabled="column.alwaysShow"
-                              :key="column.property"
-                            >
-                              <title-render :column="column"></title-render>
-                            </tiny-checkbox>
+                      <tiny-tree
+                        ref="tree"
+                        :data="columns"
+                        default-expand-all
+                        check-on-click-node
+                        show-checkbox
+                        node-key="id"
+                        :default-checked-keys="defaultcheckedkeys"
+                        @check="checkNode"
+                        :filter-node-method="filterTreeNode"
+                        :props="{ label: 'title' }"
+                      >
+                        <template #default="sourceData">
+                          <div class="tiny-tree-node__label">
+                            <title-render :column="sourceData.data"></title-render>
                           </div>
                         </template>
-                      </tiny-checkbox-group>
+                      </tiny-tree>
+                    </div>
+                    <div v-else>
+                      <div v-if="searchValue">
+                        <tiny-checkbox-group v-model="checkedColumns" vertical>
+                          <tiny-checkbox
+                            v-for="column in searchColumns"
+                            :label="column.property"
+                            :disabled="column.alwaysShow"
+                            :key="column.property"
+                          >
+                            <title-render :column="column"></title-render>
+                          </tiny-checkbox>
+                        </tiny-checkbox-group>
+                      </div>
+                      <div v-else>
+                        <div class="check-all-btn">
+                          <tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll">
+                            {{ t('ui.grid.individuation.toolbar.all') }}
+                          </tiny-checkbox>
+                        </div>
+                        <tiny-checkbox-group v-model="checkedColumns" vertical>
+                          <template v-for="(group, index) in groupedColumns">
+                            <div v-if="defer(Math.floor(index / 5))" :key="index">
+                              <p v-if="group.label" class="group-label" :class="[index === 0 && 'group-label-first']">
+                                {{ group.label }}
+                              </p>
+                              <tiny-checkbox
+                                v-for="column in group.data"
+                                :label="column.property"
+                                :disabled="column.alwaysShow"
+                                :key="column.property"
+                              >
+                                <title-render :column="column"></title-render>
+                              </tiny-checkbox>
+                            </div>
+                          </template>
+                        </tiny-checkbox-group>
+                      </div>
                     </div>
                   </div>
                 </template>
@@ -106,114 +137,153 @@
                       </p>
                       <span v-if="!hideFixedColumn">{{ t('ui.grid.individuation.toolbar.freeze') }}</span>
                       <span v-if="!hideSortColumn">{{ t('ui.grid.individuation.toolbar.sort') }}</span>
-                      <span class="clear-all" @click="handelClearAll">{{
+                      <span v-if="!isGroup" class="clear-all" @click="handelClearAll">{{
                         t('ui.grid.individuation.toolbar.clear')
                       }}</span>
                     </div>
-                    <ul ref="list">
+                    <ul ref="list" class="column-list-panel">
                       <li
                         v-for="(column, index) in visibleColumns"
                         :key="column.property + index"
-                        :class="[column.fixed, getRowClassName(column)]"
+                        :class="[
+                          column.fixed,
+                          getRowClassName(column),
+                          'column-list-item',
+                          !column.expand && 'item-collapse'
+                        ]"
                         data-tag="tiny-grid-toolbar-item"
                         :data-row="column.property"
                       >
-                        <div v-if="defer(Math.floor(index / 3))" style="display: contents">
-                          <div v-if="dropConfig.plugin" class="drag-icon toolbar-drag-item">
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                          </div>
-                          <div class="sort-number">
-                            <div
-                              v-if="column.numberSortVisible"
-                              class="sort-number-editor"
-                              v-clickoutside="clickEditorOutside"
-                            >
-                              <tiny-select
-                                :ref="'select' + index"
-                                v-model="column.sortingIndex"
-                                automatic-dropdown
-                                @focus="selectFocus($event, column.sortingIndex)"
-                                @change="sortSelectChange"
-                              >
-                                <tiny-option v-for="item in sortingOptions" :key="item" :label="item" :value="item">
-                                </tiny-option>
-                              </tiny-select>
-                            </div>
-                            <div v-else class="sort-number-display" @click="clickSortDisplay(column, index)">
-                              {{ column.sortingIndex }}
-                            </div>
-                          </div>
-                          <p
-                            class="name toolbar-drag-item"
-                            :class="[dropConfig.plugin && 'dragable']"
-                            @mouseenter="handleMouseenter"
-                            @mouseleave="handleMouseleave"
-                          >
-                            <title-render :column="column"></title-render>
-                          </p>
-                          <div v-if="!hideFixedColumn" class="dropdown-column">
-                            <tiny-dropdown :show-icon="false" @item-click="handleFixedItemClick" trigger="hover">
-                              <span :class="['left', 'right'].includes(column.fixed) && 'dropdown-btn'">
-                                <icon-left-frozen v-if="column.fixed === 'left'"></icon-left-frozen>
-                                <icon-right-frozen v-else-if="column.fixed === 'right'"></icon-right-frozen>
-                                <span v-else class="set-btn">{{ t('ui.grid.individuation.toolbar.set') }}</span>
-                              </span>
-                              <template #dropdown>
-                                <tiny-dropdown-menu
-                                  @mouseenter="handleDropdownMouseenter($event, index)"
-                                  @mouseleave="handleDropdownMouseleave($event, index)"
-                                >
-                                  <tiny-dropdown-item
-                                    v-for="item in column.fixedOption"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :item-data="{ value: item.value, property: column.property }"
-                                    >{{ item.label }}</tiny-dropdown-item
-                                  >
-                                </tiny-dropdown-menu>
-                              </template>
-                            </tiny-dropdown>
-                          </div>
+                        <div>
                           <div
-                            v-if="!hideSortColumn"
-                            class="dropdown-column"
-                            :class="[!column.sortable && 'visibility-hidden']"
+                            v-if="defer(Math.floor(index / 3))"
+                            class="column-container"
+                            :class="[!isGroup && 'with-padding']"
                           >
-                            <tiny-dropdown :show-icon="false" @item-click="handleSortItemClick" trigger="hover">
-                              <span :class="['asc', 'desc'].includes(column.order) && 'dropdown-btn'">
-                                <icon-ascending v-if="column.order === 'asc'"></icon-ascending>
-                                <icon-descending v-else-if="column.order === 'desc'"></icon-descending>
-                                <span v-else class="set-btn" :class="[!column.sortable && 'visibility-hidden']">{{
-                                  t('ui.grid.individuation.toolbar.set')
-                                }}</span>
-                              </span>
-                              <template #dropdown>
-                                <tiny-dropdown-menu
-                                  @mouseenter="handleDropdownMouseenter($event, index)"
-                                  @mouseleave="handleDropdownMouseleave($event, index)"
+                            <div v-if="dropConfig.plugin && !isGroup" class="drag-icon toolbar-drag-item">
+                              <span></span>
+                              <span></span>
+                              <span></span>
+                              <span></span>
+                              <span></span>
+                              <span></span>
+                            </div>
+                            <div
+                              v-if="isGroup && column.children"
+                              class="toolbar-icon-expand"
+                              :class="[column.expand && 'toolbar-icon-collapse']"
+                            >
+                              <icon-chevron-right @click="column.expand = !column.expand"></icon-chevron-right>
+                            </div>
+                            <div class="sort-number" v-if="!isGroup">
+                              <div
+                                v-if="column.numberSortVisible && !isGroup"
+                                class="sort-number-editor"
+                                v-clickoutside="clickEditorOutside"
+                              >
+                                <tiny-select
+                                  :ref="'select' + index"
+                                  v-model="column.sortingIndex"
+                                  automatic-dropdown
+                                  @focus="selectFocus($event, column.sortingIndex)"
+                                  @change="sortSelectChange"
                                 >
-                                  <tiny-dropdown-item
-                                    v-for="item in column.sortOption"
-                                    :key="item.value"
-                                    :label="item.label"
-                                    :item-data="{ value: item.value, property: column.property }"
-                                    >{{ item.label }}</tiny-dropdown-item
+                                  <tiny-option v-for="item in sortingOptions" :key="item" :label="item" :value="item">
+                                  </tiny-option>
+                                </tiny-select>
+                              </div>
+                              <div v-else class="sort-number-display" @click="clickSortDisplay(column, index)">
+                                {{ column.sortingIndex }}
+                              </div>
+                            </div>
+                            <p
+                              class="name toolbar-drag-item"
+                              :class="[dropConfig.plugin && !isGroup && 'dragable']"
+                              @mouseenter="handleMouseenter"
+                              @mouseleave="handleMouseleave"
+                            >
+                              <title-render :column="column"></title-render>
+                            </p>
+                            <div v-if="!hideFixedColumn && (!isGroup || !column.children)" class="dropdown-column">
+                              <tiny-dropdown :show-icon="false" @item-click="handleFixedItemClick" trigger="hover">
+                                <span :class="['left', 'right'].includes(column.fixed) && 'dropdown-btn'">
+                                  <icon-left-frozen v-if="column.fixed === 'left'"></icon-left-frozen>
+                                  <icon-right-frozen v-else-if="column.fixed === 'right'"></icon-right-frozen>
+                                  <span v-else class="set-btn">{{ t('ui.grid.individuation.toolbar.set') }}</span>
+                                </span>
+                                <template #dropdown>
+                                  <tiny-dropdown-menu
+                                    @mouseenter="handleDropdownMouseenter($event, index)"
+                                    @mouseleave="handleDropdownMouseleave($event, index)"
                                   >
-                                </tiny-dropdown-menu>
-                              </template>
-                            </tiny-dropdown>
+                                    <tiny-dropdown-item
+                                      v-for="item in column.fixedOption"
+                                      :key="item.value"
+                                      :label="item.label"
+                                      :item-data="{ value: item.value, property: column.property }"
+                                      >{{ item.label }}</tiny-dropdown-item
+                                    >
+                                  </tiny-dropdown-menu>
+                                </template>
+                              </tiny-dropdown>
+                            </div>
+                            <div
+                              v-if="!hideSortColumn"
+                              class="dropdown-column"
+                              :class="[!column.sortable && 'visibility-hidden']"
+                            >
+                              <tiny-dropdown :show-icon="false" @item-click="handleSortItemClick" trigger="hover">
+                                <span :class="['asc', 'desc'].includes(column.order) && 'dropdown-btn'">
+                                  <icon-ascending v-if="column.order === 'asc'"></icon-ascending>
+                                  <icon-descending v-else-if="column.order === 'desc'"></icon-descending>
+                                  <span v-else class="set-btn" :class="[!column.sortable && 'visibility-hidden']">{{
+                                    t('ui.grid.individuation.toolbar.set')
+                                  }}</span>
+                                </span>
+                                <template #dropdown>
+                                  <tiny-dropdown-menu
+                                    @mouseenter="handleDropdownMouseenter($event, index)"
+                                    @mouseleave="handleDropdownMouseleave($event, index)"
+                                  >
+                                    <tiny-dropdown-item
+                                      v-for="item in column.sortOption"
+                                      :key="item.value"
+                                      :label="item.label"
+                                      :item-data="{ value: item.value, property: column.property }"
+                                      >{{ item.label }}</tiny-dropdown-item
+                                    >
+                                  </tiny-dropdown-menu>
+                                </template>
+                              </tiny-dropdown>
+                            </div>
+                            <span
+                              v-if="!isGroup"
+                              class="close-icon"
+                              :class="[column.alwaysShow && 'visibility-hidden']"
+                              @click="hiddenColumn(column.property)"
+                              ><icon-close></icon-close
+                            ></span>
                           </div>
-                          <span
-                            class="close-icon"
-                            :class="[column.alwaysShow && 'visibility-hidden']"
-                            @click="hiddenColumn(column.property)"
-                            ><icon-close></icon-close
-                          ></span>
+
+                          <ul v-if="column.children">
+                            <li
+                              v-for="(column, index) in column.children"
+                              :key="column.property + index"
+                              :class="[column.fixed, getRowClassName(column)]"
+                              :data-row="column.property"
+                              v-show="column.visible"
+                            >
+                              <div class="column-container">
+                                <p
+                                  class="name child-name"
+                                  @mouseenter="handleMouseenter"
+                                  @mouseleave="handleMouseleave"
+                                >
+                                  <title-render :column="column"></title-render>
+                                </p>
+                              </div>
+                            </li>
+                          </ul>
                         </div>
                       </li>
                     </ul>
@@ -267,9 +337,18 @@
 <script lang="tsx">
 import Button from '@opentiny/vue-button'
 import Modal from '@opentiny/vue-modal'
+import Tree from '@opentiny/vue-tree'
+
 import { t } from '@opentiny/vue-locale'
 import { find, isArray, mapTree } from '@opentiny/vue-renderless/grid/static'
-import { IconClose, IconLeftFrozen, IconRightFrozen, IconDescending, IconAscending } from '@opentiny/vue-icon'
+import {
+  IconClose,
+  IconLeftFrozen,
+  IconRightFrozen,
+  IconDescending,
+  IconAscending,
+  IconChevronRight
+} from '@opentiny/vue-icon'
 import Select from '@opentiny/vue-select'
 import Option from '@opentiny/vue-option'
 import Split from '@opentiny/vue-split'
@@ -322,12 +401,14 @@ export default defineComponent({
     IconRightFrozen: IconRightFrozen(),
     IconDescending: IconDescending(),
     IconAscending: IconAscending(),
+    IconChevronRight: IconChevronRight(),
     TinyCheckbox: Checkbox,
     TinyCheckboxGroup: CheckboxGroup,
     TinyRadioGroup: RadioGroup,
     TinyTooltip: Tooltip,
     TinyRadio: Radio,
     TinySearch: Search,
+    TinyTree: Tree,
     TitleRender
   },
   directives: directive({ Clickoutside }),
@@ -337,7 +418,6 @@ export default defineComponent({
       default: null
     }
   },
-  emits: ['input', 'saveSettings', 'resetSettings', 'cancelSettings', 'showModal'],
   props: {
     ...$props,
     data: {
@@ -420,10 +500,13 @@ export default defineComponent({
       checkedColumns: [],
       sortingOptions: [],
       templateOptions: [],
+      defaultcheckedkeys: [],
+      colIds: [],
       multipleHistoryId: null,
       saveDisabled: false,
       updatedSorting: false,
-      opt: {}
+      opt: {},
+      allCheckedKeys: []
     }
   },
   setup() {
@@ -441,9 +524,13 @@ export default defineComponent({
         this.columns = this.getColumnConfigs(this.data)
         this.groupedColumns = this.getGroupedColumns()
         this.checkedColumns = this.columns.filter((col) => col.visible).map((col) => col.property)
+        this.defaultcheckedkeys = this.getDefaultcheckedkeys()
         setTimeout(() => {
           this.initDragEvent()
           this.initDrag = true
+          if (this.$refs.tree) {
+            this.allCheckedKeys = [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()]
+          }
         }, 100)
         this.reset()
       } else {
@@ -455,7 +542,19 @@ export default defineComponent({
         this.columns.forEach((column) => {
           column.visible = !!~val.indexOf(column.property)
         })
-        this.columns = this.initSortingColumns(this.columns)
+
+        this.sortingOptions = []
+        let index = 1
+
+        this.columns.forEach((column) => {
+          if (column.visible) {
+            column.sortingIndex = index
+            this.sortingOptions.push(column.sortingIndex)
+            index++
+          } else {
+            column.sortingIndex = null
+          }
+        })
       },
       deep: !isVue2
     },
@@ -499,7 +598,11 @@ export default defineComponent({
       return this.tinyTable.tinyTheme || GridConfig.themes.AURORA
     },
     visibleColumns() {
-      return this.columns.filter((column) => column.visible)
+      if (this.isGroup) {
+        return this.columns.filter((column) => this.allCheckedKeys.includes(column.id))
+      } else {
+        return this.columns.filter((column) => column.visible)
+      }
     },
     selectedTemplateVal() {
       return this.templateOptions.find((item) => item.id === this.selectedTemplate) || {}
@@ -509,6 +612,21 @@ export default defineComponent({
         return !(this.checkedColumns.length === 0 || this.checkedColumns.length === this.columns.length)
       }
     },
+    isMultiIndeterminate() {
+      return this.allCheckedKeys.length !== 0 && this.allCheckedKeys.length !== this.colIds.length
+    },
+    multiCheckAll: {
+      get() {
+        return this.allCheckedKeys.length === this.colIds.length
+      },
+      set(val) {
+        if (val) {
+          this.allCheckedKeys = [...this.colIds]
+        } else {
+          this.allCheckedKeys = []
+        }
+      }
+    },
     checkAll: {
       get() {
         return this.checkedColumns.length === this.columns.length
@@ -572,6 +690,40 @@ export default defineComponent({
         }
       })
     },
+    checkAllChange(val) {
+      if (val) {
+        this.$refs.tree.setCheckedKeys(this.colIds)
+        this.hideOrShowColumns(true)
+      } else {
+        this.$refs.tree.setCheckedKeys([])
+        this.hideOrShowColumns(false)
+      }
+    },
+    checkNode(node, data, checked) {
+      node.visible = checked
+
+      if (node.children && Array.isArray(node.children)) {
+        node.children.forEach((item) => {
+          item.visible = node.visible
+        })
+      }
+
+      const checkedKeys = this.$refs.tree.getCheckedKeys()
+      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
+
+      this.allCheckedKeys = checkedKeys.concat(halfCheckedKeys)
+    },
+    hideOrShowColumns(visible) {
+      setColumnsVisible(this.columns)
+      function setColumnsVisible(columns) {
+        columns.forEach((col) => {
+          if (col.children) {
+            setColumnsVisible(col.children)
+          }
+          col.visible = visible
+        })
+      }
+    },
     getRowClassName(row) {
       if (typeof this.rowClassName === 'function') {
         return this.rowClassName({ row })
@@ -581,6 +733,7 @@ export default defineComponent({
     },
     getColumnConfigs(configs) {
       const alwaysShowColumns = this.alwaysShowColumns
+      this.colIds = []
       const getColNodes = (columns) => {
         return columns
           .map(({ id, title, property, fixed, visible, order, sortable, level, children }) => {
@@ -596,14 +749,17 @@ export default defineComponent({
                 sortable,
                 level,
                 children,
-                numberSortVisible: false
+                numberSortVisible: false,
+                expand: true
               }
 
               children && (column.children = getColNodes(children))
+              this.colIds.push(id)
 
               return column
             }
-            return undefined
+            // eslint规则检测，map必须有return
+            return null
           })
           .filter((i) => i)
       }
@@ -619,8 +775,6 @@ export default defineComponent({
       }
     },
     initSortAndFixedOption(columns) {
-      if (this.isGroup) return
-
       columns.forEach((column) => {
         column.sortOption =
           column.order === 'asc'
@@ -637,7 +791,6 @@ export default defineComponent({
       })
     },
     initSortingColumns(columns) {
-      if (this.isGroup) return
       const leftCols = []
       const rightCols = []
       const visibleCols = []
@@ -694,6 +847,22 @@ export default defineComponent({
 
       return result
     },
+    getDefaultcheckedkeys() {
+      const checkedkeys = []
+      getCheckedkeys(this.columns)
+
+      function getCheckedkeys(columns) {
+        columns.forEach((col) => {
+          if (col.children) {
+            getCheckedkeys(col.children)
+          } else {
+            col.visible && checkedkeys.push(col.id)
+          }
+        })
+      }
+
+      return checkedkeys
+    },
     selectedTemplateChange() {
       let selected = this.templateOptions.find((opt) => opt.id === this.selectedTemplate)
 
@@ -702,9 +871,16 @@ export default defineComponent({
         this.columns = this.initSortingColumns(this.columns)
         this.initSortAndFixedOption(this.columns)
         this.groupedColumns = this.getGroupedColumns()
+        this.isGroup && (this.defaultcheckedkeys = this.getDefaultcheckedkeys())
         this.checkedColumns = this.columns.filter((col) => col.visible).map((col) => col.property)
         this.settings.pageSize = selected.setting.custom.pageSize
         this.multipleHistoryId = selected.id
+        this.updatedSorting = true
+        if (this.$refs.tree) {
+          setTimeout(() => {
+            this.allCheckedKeys = [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()]
+          }, 100)
+        }
       }
     },
     sortSelectChange(index) {
@@ -732,11 +908,23 @@ export default defineComponent({
         return result
       }
 
-      this.searchColumns = this.columns.filter((col) => {
-        const title = getRenderedTitle(col)
-        const upperVal = val && val.toUpperCase()
-        return title.includes(upperVal)
-      })
+      if (this.isGroup) {
+        this.$refs.tree.filter(val)
+      } else {
+        this.searchColumns = this.columns.filter((col) => {
+          const title = getRenderedTitle(col)
+          const upperVal = val && val.toUpperCase()
+          return title.includes(upperVal)
+        })
+      }
+    },
+    filterTreeNode(value, data) {
+      if (!value) return true
+      let label = data.label || ''
+      if (typeof data.label !== 'string') {
+        label = data.label.toString()
+      }
+      return label.includes(value)
     },
     handelClearAll() {
       this.checkedColumns = [...this.alwaysShowColumns]
@@ -757,7 +945,15 @@ export default defineComponent({
               : [this.opt.asc, this.opt.desc]
       }
     },
-    handleFixedItemClick(item) {
+    // TODO: 待完善具体类型  vm dropdown组件示例
+    handleFixedItemClick(itemData: { itemData: object; vm: any } | object, vm: any) {
+      let item
+      // aui传参和tiny不一致, aui传参为(itemData, vm) tiny传参为({ itemData, vm })
+      if (vm) {
+        item = itemData
+      } else {
+        item = itemData?.itemData
+      }
       const index = this.columns.findIndex((col) => col.property === item.property)
       const column = this.columns[index]
       item.fixed = column.fixed
@@ -839,8 +1035,8 @@ export default defineComponent({
     },
     buildSettings() {
       const props = ['order', 'fixed', 'visible', 'sortable'].concat(this.keys)
-
-      !this.updatedSorting && (this.columns = [...this.groupedColumns[0].data])
+      !this.updatedSorting &&
+        (this.columns = [...this.groupedColumns[0].data].sort((a, b) => a?.sortingIndex - b?.sortingIndex))
 
       this.settings.columns = mapTree(this.columns, ({ property, ...rest }) => {
         const node = { property }
@@ -904,8 +1100,8 @@ export default defineComponent({
 
       if (typeof this.resetMethod === 'function') {
         this.resetMethod().then((sourceSettings) => {
+          this.updatedSorting = true
           this.buildSettings()
-
           let { columns, sortType, pageSize } = sourceSettings || {}
 
           if (columns && columns.length && this.settings.columns && this.settings.columns.length) {
@@ -938,6 +1134,8 @@ export default defineComponent({
 
           sortType && (this.settings.sortType = sortType)
           pageSize && (this.settings.pageSize = pageSize)
+
+          this.checkedColumns = this.columns.filter((col) => col.visible).map((col) => col.property)
         })
       } else {
         this.resetSettings(event)
diff --git a/packages/vue/src/grid-toolbar/src/custom-switch.vue b/packages/vue/src/grid-toolbar/src/custom-switch.vue
index 9fdba29056..d506e6e651 100644
--- a/packages/vue/src/grid-toolbar/src/custom-switch.vue
+++ b/packages/vue/src/grid-toolbar/src/custom-switch.vue
@@ -359,6 +359,7 @@ export default defineComponent({
 
       const toolbarVm = this.$grid.getVm('toolbar')
       const customVm = toolbarVm.$refs.custom
+      customVm.updatedSorting = true
       const item = createCustom(customVm.buildSettings(), this.userKey)
       const { id: toolbarId } = toolbarVm
 
diff --git a/packages/vue/src/grid-toolbar/src/index.ts b/packages/vue/src/grid-toolbar/src/index.ts
index 0956702474..4bfde592a2 100644
--- a/packages/vue/src/grid-toolbar/src/index.ts
+++ b/packages/vue/src/grid-toolbar/src/index.ts
@@ -36,7 +36,8 @@ import {
 import GridCustom from './custom.vue'
 import GridCustomSelect from './custom-select.vue'
 import GridCustomSaas from './custom-saas.vue'
-import { GridButton, GridConfig, GridAdapter, GridTools } from '@opentiny/vue-grid'
+import { GridConfig, GridAdapter, GridTools } from '@opentiny/vue-grid'
+import Button from '@opentiny/vue-button'
 
 const classMap = {
   isActive: 'is__active'
@@ -139,20 +140,23 @@ function renderCustomWrapper({ _vm, settingStore, settingsBtnOns, tableFullColum
   )
 }
 
-function getScopedSlots({ item, _vm }) {
+function getScopedSlots({ item, _vm, vSize }) {
   let scopedSlots = null
   let childHandler = (child) => {
     let res = [null]
 
     if (child.visible !== false) {
       res = h(
-        GridButton,
+        Button,
         {
           on: {
             click: (event) => _vm.btnEvent(event, child)
           },
           props: {
-            disabled: child.disabled
+            disabled: child.disabled,
+            size: vSize,
+            loading: child.loading,
+            type: child.type
           }
         },
         getFuncText(child.name)
@@ -172,7 +176,7 @@ function getScopedSlots({ item, _vm }) {
   return scopedSlots
 }
 
-function renderButtonWrapper({ _vm, $buttons, $grid, table, buttons }) {
+function renderButtonWrapper({ _vm, $buttons, $grid, table, buttons, vSize }) {
   let childrenArg
 
   if ($buttons) {
@@ -182,16 +186,19 @@ function renderButtonWrapper({ _vm, $buttons, $grid, table, buttons }) {
       let res = [null]
 
       if (item.visible !== false) {
-        let scopedSlots = getScopedSlots({ item, _vm })
+        let scopedSlots = getScopedSlots({ item, _vm, vSize })
 
         res = h(
-          GridButton,
+          Button,
           {
             on: {
               click: (event) => _vm.btnEvent(event, item)
             },
             props: {
-              disabled: item.disabled
+              disabled: item.disabled,
+              size: vSize,
+              loading: item.loading,
+              type: item.type
             },
             scopedSlots
           },
@@ -202,8 +209,8 @@ function renderButtonWrapper({ _vm, $buttons, $grid, table, buttons }) {
       return res
     })
   }
-
-  return h('div', { class: 'tiny-grid-button__wrapper' }, childrenArg)
+  // Tiny 新增，如果工具栏按钮数据为空则无需渲染按钮组容器
+  return childrenArg?.length ? h('div', { class: 'tiny-grid-button__wrapper' }, childrenArg) : null
 }
 
 export default defineComponent({
@@ -392,7 +399,7 @@ export default defineComponent({
     const defaultSlot = () => (typeof $slots.default === 'function' ? $slots.default() : $slots.default)
 
     let childrenArg = [
-      renderButtonWrapper({ _vm: this, $buttons, $grid, table, buttons }),
+      renderButtonWrapper({ _vm: this, $buttons, $grid, table, buttons, vSize }),
       setting ? renderCustomWrapper(args) : null,
       refresh ? renderRefreshWrapper({ _vm: this }) : null,
       fullScreen ? renderFullScreenWrapper({ _vm: this }) : null,
diff --git a/packages/vue/src/grid-toolbar/src/multiple-history.ts b/packages/vue/src/grid-toolbar/src/multiple-history.ts
index 00c795d7c6..ff145306e5 100644
--- a/packages/vue/src/grid-toolbar/src/multiple-history.ts
+++ b/packages/vue/src/grid-toolbar/src/multiple-history.ts
@@ -76,6 +76,9 @@ export function mergeArray(toArr, fromArr) {
     for (let j = 0; j < toArr.length; j++) {
       if (fromItem.property === toArr[j].property) {
         toItem = { ...toArr[j] }
+        if (fromArr[i].children && toArr[j].children) {
+          fromItem.children = mergeArray(toArr[j].children, fromArr[i].children)
+        }
         break
       }
     }
diff --git a/packages/vue/src/grid/index.ts b/packages/vue/src/grid/index.ts
index e0cd09fdb6..d0799e53cc 100644
--- a/packages/vue/src/grid/index.ts
+++ b/packages/vue/src/grid/index.ts
@@ -24,7 +24,6 @@ import Resize from './src/resize'
 import Filter from './src/filter'
 import GridConfig from './src/config'
 import GridRadio from './src/radio'
-import GridButton from './src/button'
 import FetchData from './src/fetch-data'
 import Pager from './src/pager'
 import Toolbar from './src/toolbar'
@@ -113,4 +112,4 @@ if (process.env.BUILD_TARGET === 'runtime') {
 
 export default Grid
 // 按需引入插件
-export { GridColumn, GridConfig, GridAdapter, GridRadio, GridButton, GridTools }
+export { GridColumn, GridConfig, GridAdapter, GridRadio, GridTools }
diff --git a/packages/vue/src/grid/package.json b/packages/vue/src/grid/package.json
index 15ba61822c..faa6459513 100644
--- a/packages/vue/src/grid/package.json
+++ b/packages/vue/src/grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-grid",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx
index 84a29deb12..1ea1d31013 100644
--- a/packages/vue/src/grid/src/body/src/body.tsx
+++ b/packages/vue/src/grid/src/body/src/body.tsx
@@ -37,7 +37,7 @@ import { getCellLabel } from '../../tools'
 import GlobalConfig from '../../config'
 import { iconChevronRight, iconChevronDown } from '@opentiny/vue-icon'
 import { h, hooks, $prefix, defineComponent } from '@opentiny/vue-common'
-import { getTreeChildrenKey, getTreeShowKey } from '../../table/src/strategy'
+import { getTreeChildrenKey, getTreeShowKey, handleRowGroupFold, isVirtualRow } from '../../table/src/strategy'
 import { generateFixedClassName } from '../../table/src/utils/handleFixedColumn'
 
 // 滚动、拖动过程中不需要触发鼠标移入移出事件
@@ -133,7 +133,7 @@ function buildColumnProps(args) {
 
 function buildColumnChildren(args) {
   let { h, hasDefaultTip, params, row, validError, column, $table } = args
-  let { showEllipsis, showTip, showTitle, showTooltip, validStore } = args
+  let { showEllipsis, showTip, showTitle, showTooltip, validStore, dropConfig } = args
   const { validOpts } = $table
   let cellNode: any[] = []
   let validNode: any = null
@@ -154,6 +154,7 @@ function buildColumnChildren(args) {
     }
   }
   cellNode = [
+    dropConfig.rowHandle === 'index' && column.type === 'index' ? h('div', { class: 'row__drop-handle' }) : null,
     h(
       'div',
       {
@@ -168,7 +169,7 @@ function buildColumnChildren(args) {
         attrs: { title: showTitle ? getCellLabel(row, column, params) : null }
       },
       // 调用column组件的renderCell渲染单元格内部的内容
-      // 如果不是表格形态，就只保留表格结构（到aui-grid-cell），不渲染具体的内容
+      // 如果不是表格形态，就只保留表格结构（到tiny-grid-cell），不渲染具体的内容
       $table.isShapeTable ? column.renderCell(h, params) : null
     ),
     validNode
@@ -391,7 +392,7 @@ function renderColumn(args1) {
   let { h, row } = args1
   let { align: allAlign, cellClassName, columnKey, editConfig } = $table
   let { editRules, editStore, rowId, rowSpan, height } = $table
-  let { tableData, validOpts, validStore, validatedMap, spanMethod, columnStore } = $table
+  let { tableData, validOpts, validStore, validatedMap, spanMethod, columnStore, dropConfig = {} } = $table
   let { isDirty, attrs = { 'data-colid': column.id } } = {}
   let { isMessageDefault, isMessageInline } = validOpts
   let { actived } = editStore
@@ -440,7 +441,7 @@ function renderColumn(args1) {
   // 组装渲染单元格td所需要的props属性
   const colProps = buildColumnProps(args)
   args = { column, h, hasDefaultTip, params, row, $table }
-  Object.assign(args, { showEllipsis, showTip, showTitle, showTooltip, validError, validStore })
+  Object.assign(args, { showEllipsis, showTip, showTitle, showTooltip, validError, validStore, dropConfig })
 
   // 渲染td单元格中的div元素（自定义渲染和编辑器）
   const colChildren = buildColumnChildren(args)
@@ -449,74 +450,78 @@ function renderColumn(args1) {
 }
 
 function renderRowGroupTds(args) {
-  const { closeable, currentIcon, field, group, render } = args
-  const { row, tableColumn, targetColumn, tds, title } = args
+  const { $table, closeable, currentIcon, render, renderGroupCell } = args
+  const { row, tableColumn, tds, title } = args
+  const targetColumn = $table._rowGroupTargetColumn
+  const value = row.value || ''
 
   for (let index in tableColumn) {
     if (Object.prototype.hasOwnProperty.call(tableColumn, index)) {
       const column = tableColumn[index]
-      if (~['index', 'selection'].indexOf(column.type)) {
-        tds.push(<td></td>)
-      } else {
-        const value = row[field]
-        const header = title || (targetColumn && formatText(getFuncText(targetColumn.title))) || value
+      const columnIndex = $table.getColumnIndex(column)
+      const header = title || formatText(getFuncText(column.title), 1) || value
+      const params = { value, header, children: row.children, expand: !row.fold, row, column, columnIndex }
+
+      // 不渲染colspan小于等于0的列
+      if (column._rowGroupColspan <= 0) {
+        continue
+      }
+      if (column === targetColumn) {
         let groupTitleVNode
 
         if (render) {
-          groupTitleVNode = render(h, {
-            value,
-            header,
-            children: group.children,
-            expand: !group.fold
-          })
+          groupTitleVNode = render(h, params)
         } else {
           groupTitleVNode = [
             <span class="row-group-title">{header}</span>,
             `:${value}`,
-            <span class="tiny-badge">{group.children.length}</span>
+            <span class="tiny-badge">{row.children.length}</span>
           ]
         }
         tds.push(
-          <td colspan={tableColumn.length - index} class="tiny-grid-body__column">
+          <td class={['tiny-grid-body__column td-group', column.id]} colspan={column._rowGroupColspan}>
             <div class="tiny-grid-cell-group">{[closeable ? currentIcon : null].concat(groupTitleVNode)}</div>
           </td>
         )
-        break
+      } else {
+        tds.push(
+          <td class={['tiny-grid-body__column td-placeholder', column.id]} colspan={column._rowGroupColspan}>
+            <div class="tiny-grid-cell-group">{renderGroupCell ? renderGroupCell(h, params) : null}</div>
+          </td>
+        )
       }
     }
   }
 }
 
-function renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows, tableColumn }) {
-  if (!groupData[rowid]) {
+function renderRowGroupData({ $table, virtualRow, row, rowGroup, rowid, rows, tableColumn }) {
+  if (!virtualRow) {
     return
   }
 
-  const { title, field, closeable = true, render, className } = rowGroup
-  const { group = groupData[rowid], tds = [], ChevronRight = iconChevronRight(), ChevronDown = iconChevronDown() } = {}
-  const targetColumn = find(tableColumn, (col) => col.property === field)
-  const currentIcon = group.fold ? <ChevronRight class="tiny-svg-size" /> : <ChevronDown class="tiny-svg-size" />
-
+  const { title, closeable = true, render, renderGroupCell, className } = rowGroup
+  const { tds = [], ChevronRight = iconChevronRight(), ChevronDown = iconChevronDown() } = {}
+  const currentIcon = row.fold ? <ChevronRight class="tiny-svg-size" /> : <ChevronDown class="tiny-svg-size" />
+  const args = { $table, closeable, currentIcon, render, renderGroupCell }
+  Object.assign(args, { row, tableColumn, tds, title })
   // 将分组行的td添加到tds数组中
-  renderRowGroupTds({ closeable, currentIcon, field, group, render, row, tableColumn, targetColumn, tds, title })
+  renderRowGroupTds(args)
+
+  const onClick = (event) => {
+    handleRowGroupFold(row, $table)
+
+    if ($table.tableListeners['toggle-group-change']) {
+      emitEvent($table, 'toggle-group-change', [{ $table, row }, event])
+    }
+  }
 
   rows.push(
     <tr
-      class={['tiny-grid-body__row', 'group', className]}
-      onClick={() => {
-        if (closeable) {
-          group.fold = !group.fold
-          group.children.forEach((row) => {
-            let index = groupFolds.indexOf(row)
-
-            if (index > -1) {
-              groupFolds.splice(index, 1)
-            } else {
-              groupFolds.push(row)
-            }
-          })
-        }
-      }}>
+      class={['tiny-grid-body__row', 'group', className, { hover: row.hover }]}
+      data-rowid={rowid}
+      onMouseout={() => (row.hover = false)}
+      onMouseover={() => (row.hover = true)}
+      onClick={onClick}>
       {tds}
     </tr>
   )
@@ -524,7 +529,7 @@ function renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows,
 
 function renderRow(args) {
   let { $rowIndex, $seq, $table, _vm, editStore } = args
-  let { groupFolds, h, row, rowActived } = args
+  let { h, row, rowActived } = args
   let { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows } = args
   let { selection, seq, tableColumn, trOn, treeConfig, isNotRenderRow } = args
 
@@ -542,7 +547,6 @@ function renderRow(args) {
             [`row__level-${rowLevel}`]: treeConfig,
             [classMap.rowNew]: editStore.insertList.includes(row),
             [classMap.rowSelected]: selection.includes(row),
-            'tiny-hide': groupFolds.includes(row),
             [classMap.rowActived]: rowActived
           },
           rowClassName
@@ -660,9 +664,9 @@ function renderRowTree(args, renderRows) {
 }
 
 function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, seqCount }) {
-  let { rowKey, rowClassName, treeConfig, treeExpandeds, groupFolds } = $table
-  let { groupData, scrollYLoad, scrollYStore, editConfig, editStore } = $table
-  let { expandConfig = {}, expandeds, selection, rowGroup } = $table
+  let { rowKey, rowClassName, treeConfig, treeExpandeds } = $table
+  let { groupData, scrollYLoad, scrollYStore, editConfig, editStore, expandConfig = {} } = $table
+  let { expandeds, selection, rowGroup, hasVirtualRow, afterFullData, visibleColumn } = $table
   let rows = []
   let expandMethod = expandConfig.activeMethod
   let startIndex = scrollYStore.startIndex
@@ -678,7 +682,8 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, se
     let rowIndex = $rowIndex
     let { actived } = editStore
     let rowActived = editConfig && actived.row === row
-    const isNotRenderRow = (treeShowKey && !row[treeShowKey]) || (hideMethod && hideMethod(row, rowLevel))
+    let virtualRow = isVirtualRow(row)
+    const isNotRenderRow = (treeShowKey && !row[treeShowKey]) || (hideMethod && hideMethod(row, rowLevel)) || virtualRow
 
     // 树表虚拟滚动，如果当前行被剪切不需要渲染，则无需自增序号
     if (!isNotRenderRow) {
@@ -689,14 +694,18 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, se
     if (scrollYLoad) {
       seq += startIndex
     }
+    // 分组表场景正常数据行的序号由在afterFullData中的位置提供
+    if (hasVirtualRow && !virtualRow) {
+      seq = afterFullData.indexOf(row) + 1
+    }
     // 确保任何情况下 rowIndex 都精准指向真实 data 索引
     rowIndex = $table.getRowIndex(row)
 
     let rowid = getRowid($table, row)
 
     // 如果有表格分组信息，则执行分组逻辑
-    renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows, tableColumn })
-    let args = { $rowIndex, $seq, $table, _vm, editStore, groupFolds, h, row, rowActived }
+    renderRowGroupData({ $table, virtualRow, row, rowGroup, rowid, rows, tableColumn })
+    let args = { $rowIndex, $seq, $table, _vm, editStore, h, row, rowActived }
     Object.assign(args, { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows, selection, seq })
 
     Object.assign(args, { tableColumn, trOn, treeConfig, isNotRenderRow })
@@ -838,7 +847,7 @@ export default defineComponent({
   },
   mounted() {
     const { $el, $parent: $table, $refs } = this as any
-    const { elemStore } = $table
+    const { elemStore, dropConfig } = $table
     const keyPrefix = 'main-body-'
 
     // 表体第一层div，出现滚动条的dom元素
@@ -859,6 +868,14 @@ export default defineComponent({
     // 表体第一层div监听滚动事件
     $el.onscroll = this.scrollEvent
     $el._onscroll = this.scrollEvent
+
+    if (dropConfig) {
+      const { plugin, row = true } = dropConfig
+      plugin && row && (this.rowSortable = $table.rowDrop(this.$el))
+    }
+  },
+  beforeUnmount() {
+    this.rowSortable && this.rowSortable.destroy()
   },
   updated() {
     const { $parent: $table, fixedType } = this
diff --git a/packages/vue/src/grid/src/button/src/button.ts b/packages/vue/src/grid/src/button/src/button.ts
deleted file mode 100644
index d42809c744..0000000000
--- a/packages/vue/src/grid/src/button/src/button.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * MIT License
- *
- * Copyright (c) 2019 Xu Liangzhan
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- *
- */
-import { objectMap } from '@opentiny/vue-renderless/grid/static/'
-import { addClass, removeClass } from '@opentiny/vue-renderless/common/deps/dom'
-import { emitEvent, getEventTargetNode, getListeners } from '@opentiny/vue-renderless/grid/utils'
-import GlobalConfig from '../../config'
-import { h, $prefix, defineComponent } from '@opentiny/vue-common'
-
-function renderNoSlotDropdowns({ $slots, _vm, buttonBase, loading, tableListeners }) {
-  let loadingVNode = []
-
-  if (loading) {
-    loadingVNode = [
-      h('i', {
-        class: ['tiny-grid-button__loading-icon', GlobalConfig.icon.btnLoading]
-      })
-    ]
-  }
-
-  return h(
-    'button',
-    {
-      ...buttonBase,
-      on: objectMap(tableListeners, (cb, type) => (event) => _vm.$emit(type, event))
-    },
-    loadingVNode.concat($slots.default.call(_vm))
-  )
-}
-
-function renderHasSlotDropdowns({ $slots, _vm, buttonBase, tableListeners, vSize }) {
-  return h(
-    'div',
-    {
-      class: ['tiny-grid-button__dropdown', { [`size__${vSize}`]: vSize }]
-    },
-    [
-      h(
-        'button',
-        {
-          ...buttonBase,
-          on: {
-            mouseenter: _vm.mouseenterEvent,
-            mouseleave: _vm.mouseleaveEvent,
-            ...objectMap(tableListeners, (cb, type) => (event) => _vm.$emit(type, event))
-          }
-        },
-        [
-          h('span', $slots.default.call(_vm)),
-          h('i', {
-            class: `tiny-grid-button__dropdown-arrow ${GlobalConfig.icon.dropdownBottom}`
-          })
-        ]
-      ),
-      h(
-        'div',
-        {
-          class: 'tiny-grid-button__dropdown-wrapper',
-          on: {
-            click: _vm.clickDropdownEvent,
-            mouseenter: _vm.mouseenterEvent,
-            mouseleave: _vm.mouseleaveEvent
-          }
-        },
-        $slots.dropdowns.call(_vm)
-      )
-    ]
-  )
-}
-
-function getButtonBase({ disabled, isText, loading, name, type, vSize }) {
-  const map = {
-    isDisabled: 'is__disabled',
-    isLoading: 'is__loading'
-  }
-  return {
-    class: [
-      'tiny-grid-button',
-      `type__${isText ? type : 'button'}`,
-      {
-        [`size__${vSize}`]: vSize,
-        [`theme__${type}`]: type && !isText,
-        [map.isDisabled]: disabled || loading,
-        [map.isLoading]: loading
-      }
-    ],
-    attrs: {
-      name,
-      type: 'button',
-      disabled: disabled || loading
-    }
-  }
-}
-
-export default defineComponent({
-  name: `${$prefix}GridButton`,
-  inheritAttrs: false,
-  props: {
-    type: String,
-    size: String,
-    name: [String, Number],
-    disabled: Boolean,
-    loading: Boolean
-  },
-  computed: {
-    vSize() {
-      return this.size || this.$parent.size || this.$parent.vSize
-    }
-  },
-  render() {
-    let { disabled, loading, name, slots: $slots, tableListeners, type, vSize } = this
-    let isText = type === 'text'
-    let buttonBase = getButtonBase({
-      disabled,
-      isText,
-      loading,
-      name,
-      type,
-      vSize
-    })
-
-    return $slots.dropdowns
-      ? renderHasSlotDropdowns({
-          $slots,
-          _vm: this,
-          buttonBase,
-          tableListeners,
-          vSize
-        })
-      : renderNoSlotDropdowns({
-          $slots,
-          _vm: this,
-          buttonBase,
-          loading,
-          tableListeners
-        })
-  },
-  methods: {
-    clickDropdownEvent(event) {
-      let dropdownElem = event.currentTarget
-      let wrapperElem = dropdownElem.parentNode
-      let { flag, targetElem } = getEventTargetNode(event, dropdownElem, 'tiny-grid-button')
-
-      if (flag) {
-        wrapperElem.dataset.active = 'N'
-        removeClass(wrapperElem, 'is__active')
-        emitEvent(this, 'dropdown-click', [{ name: targetElem.getAttribute('name') }, event])
-      }
-    },
-    mouseenterEvent(event) {
-      let dropdownElem = event.currentTarget
-      let wrapperElem = dropdownElem.parentNode
-
-      wrapperElem.dataset.active = 'Y'
-      addClass(wrapperElem, 'is__active')
-    },
-    mouseleaveEvent(event) {
-      let dropdownElem = event.currentTarget
-      let wrapperElem = dropdownElem.parentNode
-
-      wrapperElem.dataset.active = 'N'
-      setTimeout(() => {
-        if (wrapperElem.dataset.active !== 'Y') {
-          removeClass(wrapperElem, 'is__active')
-        }
-      }, 300)
-    }
-  },
-  setup(props, { slots, attrs, listeners }) {
-    const tableListeners = getListeners(attrs, listeners)
-
-    return { slots, tableListeners }
-  }
-})
diff --git a/packages/vue/src/grid/src/cell/src/cell.ts b/packages/vue/src/grid/src/cell/src/cell.ts
index e6b59e6587..e192bc767d 100644
--- a/packages/vue/src/grid/src/cell/src/cell.ts
+++ b/packages/vue/src/grid/src/cell/src/cell.ts
@@ -26,7 +26,7 @@ import { get, isFunction } from '@opentiny/vue-renderless/grid/static/'
 import { random } from '@opentiny/vue-renderless/common/string'
 import { getColumnConfig, getFuncText, formatText } from '@opentiny/vue-renderless/grid/utils'
 import { Renderer } from '../../adapter'
-import { getCellLabel } from '../../tools'
+import { getCellLabel, warn } from '../../tools'
 import GLOBAL_CONFIG from '../../config'
 import { hooks, isVnode } from '@opentiny/vue-common'
 import {
@@ -264,7 +264,12 @@ export const Cell = {
     let { slots, own, title } = column
 
     if (slots && slots.header) {
-      return [h('div', { class: 'tiny-grid-cell-text' }, [slots.header(params, h)])]
+      // Tiny新增，修复多端表格表头插槽显示异常问题
+      if (type === 'card') {
+        return [slots.header(params, h)]
+      } else {
+        return [h('div', { class: 'tiny-grid-cell-text' }, [slots.header(params, h)])]
+      }
     }
 
     if (typeof title === 'function') {
@@ -380,13 +385,17 @@ export const Cell = {
     return Cell.renderTreeIcon(h, params).concat(Cell.renderIndexCell(h, params))
   },
   renderIndexCell(h, params) {
-    const { $table, column, row, seq } = params
+    const { $table, column, row, seq, $seq, level } = params
     // startIndex：序号列的起始值
-    const { startIndex, treeConfig } = $table
+    const { startIndex, treeConfig, scrollYLoad } = $table
     const { indexMethod, slots } = column
     const { ordered, temporaryIndex = '_$index_' } = treeConfig || {}
     const isTreeOrderedFalse = treeConfig && !ordered
-    const indexValue = isTreeOrderedFalse ? row[temporaryIndex] : startIndex + seq
+    let indexValue = startIndex + seq
+    // tree-config为false的情况下，序号为1.1这种形式
+    if (isTreeOrderedFalse && level) {
+      indexValue = scrollYLoad ? row[temporaryIndex] : `${$seq}.${seq}`
+    }
 
     if (slots && slots.default) {
       return slots.default(params, h)
@@ -947,11 +956,13 @@ export const Cell = {
 
     if (visibleButtons.length > max) {
       const end = max - 1
+      const dropdownProps = { trigger: 'hover', showIcon: false }
 
       groupBig = visibleButtons.slice(0, end).map((buttonConfig) => renderBig(buttonConfig, viewClass))
-      groupBig.push(
-        h(Dropdown, { on: { 'item-click': handleItemClick }, props: { trigger: 'hover', showIcon: false } }, [
-          h(iconEllipsis(), { class: 'tiny-grid__oper-col-elps' }),
+
+      const scopedSlots = {
+        default: () => h(iconEllipsis(), { class: 'tiny-grid__oper-col-elps' }),
+        dropdown: () =>
           h(
             DropdownMenu,
             { slot: 'dropdown' },
@@ -966,13 +977,16 @@ export const Cell = {
               )
             )
           )
-        ])
-      )
+      }
+
+      groupBig.push(h(Dropdown, { on: { 'item-click': handleItemClick }, props: dropdownProps, scopedSlots }))
     } else {
       groupBig = visibleButtons.map((buttonConfig) => renderBig(buttonConfig, viewClass))
     }
 
-    return [h('span', { class: 'inline-flex' }, groupBig)]
+    return [
+      h('span', { class: 'tiny-grid__oper-col-wrapper', attrs: { 'data-tag': 'operation-cell-buttons' } }, groupBig)
+    ]
   }
 }
 
diff --git a/packages/vue/src/grid/src/checkbox/src/handleSelectRow.ts b/packages/vue/src/grid/src/checkbox/src/handleSelectRow.ts
index 938de15e48..6797c1c7e7 100644
--- a/packages/vue/src/grid/src/checkbox/src/handleSelectRow.ts
+++ b/packages/vue/src/grid/src/checkbox/src/handleSelectRow.ts
@@ -82,18 +82,6 @@ function onHalfSelection({ checkStrictly, property, row, selection, treeConfig,
   }
 }
 
-function getVItemsOnParentSelection({ checkMethod, matchObj }) {
-  let vItems
-
-  if (checkMethod) {
-    vItems = matchObj.items.filter((item, $rowIndex) => checkMethod({ row: item, $rowIndex }))
-  } else {
-    vItems = matchObj.items
-  }
-
-  return vItems
-}
-
 // 保证不重复添加
 const addSelection = (selection, item) => !selection.includes(item) && selection.push(item)
 
@@ -135,7 +123,7 @@ function getParentStatusOnParentSelection({ indeterminatesItem, matchObj, select
     parentStatus = -1
   } else {
     let selectItems = matchObj.items.filter((item) => selection.includes(item))
-    let isEqualItem = selectItems.filter((item) => vItems.includes(item)).length === vItems.length
+    let isEqualItem = selectItems.length === vItems.length
 
     parentStatus = isEqualItem ? true : selectItems.length || value === -1 ? -1 : false
   }
@@ -220,7 +208,7 @@ function onSelectTreeCheckStrictly({ row }, value, _vm) {
     let matchObj = findTree(tableFullData, (item) => item === row, treeConfig)
 
     if (matchObj && matchObj.parent) {
-      let vItems = getVItemsOnParentSelection({ checkMethod, matchObj })
+      let vItems = matchObj.items
       let indeterminatesItem = find(matchObj.items, (item) => treeIndeterminates.includes(item))
       let parentStatus = getParentStatusOnParentSelection({
         indeterminatesItem,
diff --git a/packages/vue/src/grid/src/checkbox/src/methods.ts b/packages/vue/src/grid/src/checkbox/src/methods.ts
index 5344b73c30..cc7f0d6c08 100644
--- a/packages/vue/src/grid/src/checkbox/src/methods.ts
+++ b/packages/vue/src/grid/src/checkbox/src/methods.ts
@@ -88,7 +88,7 @@ export default {
       treeConfig,
       value
     })
-    setSelectionNoStrictly({ _vm: this, checkStrictly, reserve, selectRows, selection, value })
+    setSelectionNoStrictly({ _vm: this, checkStrictly, reserve, selectRows, selection, value, afterFullData })
     this.treeIndeterminates = []
     this.checkSelectionStatus()
   },
diff --git a/packages/vue/src/grid/src/checkbox/src/setAllSelection.ts b/packages/vue/src/grid/src/checkbox/src/setAllSelection.ts
index 93b6fe948f..4be08ec223 100644
--- a/packages/vue/src/grid/src/checkbox/src/setAllSelection.ts
+++ b/packages/vue/src/grid/src/checkbox/src/setAllSelection.ts
@@ -34,7 +34,7 @@ function pushSelectRow({
   treeConfig,
   value
 }) {
-  if (!checkStrictly && !property && treeConfig && value) {
+  if (!checkStrictly && value) {
     eachTree(
       afterFullData,
       (row, $rowIndex) => {
@@ -46,7 +46,7 @@ function pushSelectRow({
     )
   }
 
-  if (!checkStrictly && !property && treeConfig && !value && checkMethod) {
+  if (!checkStrictly && !value && checkMethod) {
     eachTree(
       afterFullData,
       (row, $rowIndex) => {
@@ -78,7 +78,7 @@ export function hasCheckFieldNoStrictly({
     }
 
     let clearValFn = (row, rowIndex) => {
-      if (!checkMethod || (checkMethod({ row, [indexKey]: rowIndex }) ? 0 : selection.includes(row))) {
+      if (!checkMethod || (checkMethod({ row, [indexKey]: rowIndex }) ? selection.includes(row) : false)) {
         set(row, property, value)
       }
     }
@@ -91,25 +91,16 @@ export function hasCheckFieldNoStrictly({
   }
 }
 
-function filterSelectRow({
-  afterFullData,
-  checkMethod,
-  checkStrictly,
-  property,
-  selectRows,
-  selection,
-  treeConfig,
-  value
-}) {
-  if (!checkStrictly && !property && !treeConfig && value && checkMethod) {
+function filterSelectRow({ afterFullData, checkMethod, checkStrictly, selectRows, selection, value }) {
+  if (!checkStrictly && value && checkMethod) {
     selectRows = afterFullData.filter((row, rowIndex) => selection.includes(row) || checkMethod({ row, rowIndex }))
   }
 
-  if (!checkStrictly && !property && !treeConfig && value && !checkMethod) {
+  if (!checkStrictly && value && !checkMethod) {
     selectRows = afterFullData.slice(0)
   }
 
-  if (!checkStrictly && !property && !treeConfig && !value && checkMethod) {
+  if (!checkStrictly && !value && checkMethod) {
     selectRows = afterFullData.filter((row, rowIndex) => (checkMethod({ row, rowIndex }) ? 0 : selection.includes(row)))
   }
 
@@ -127,34 +118,44 @@ export function hasNoCheckFieldNoStrictly({
 }) {
   let selectRows = []
 
-  pushSelectRow({
-    afterFullData,
-    checkMethod,
-    checkStrictly,
-    property,
-    selectRows,
-    selection,
-    treeConfig,
-    value
-  })
-
-  selectRows = filterSelectRow({
-    afterFullData,
-    checkMethod,
-    checkStrictly,
-    property,
-    selectRows,
-    selection,
-    treeConfig,
-    value
-  })
+  // 树表获取选中逻辑
+  if (treeConfig) {
+    pushSelectRow({
+      afterFullData,
+      checkMethod,
+      checkStrictly,
+      property,
+      selectRows,
+      selection,
+      treeConfig,
+      value
+    })
+  } else {
+    selectRows = filterSelectRow({
+      afterFullData,
+      checkMethod,
+      checkStrictly,
+      property,
+      selectRows,
+      selection,
+      treeConfig,
+      value
+    })
+  }
 
   return selectRows
 }
 
-export function setSelectionNoStrictly({ _vm, checkStrictly, reserve, selectRows, selection, value }) {
+export function setSelectionNoStrictly({ _vm, checkStrictly, reserve, selectRows, selection, value, afterFullData }) {
   if (!checkStrictly) {
-    _vm.selection =
-      value && reserve ? selection.concat(selectRows.filter((row) => !selection.includes(row))) : selectRows
+    if (reserve) {
+      // 配置了reserve为true时，只需把当前页没选中部分清除
+      const unCheckedRows = afterFullData.filter((row) => !selectRows.includes(row))
+      _vm.selection = value
+        ? selection.concat(selectRows.filter((row) => !selection.includes(row)))
+        : selection.filter((row) => !unCheckedRows.includes(row))
+    } else {
+      _vm.selection = selectRows
+    }
   }
 }
diff --git a/packages/vue/src/grid/src/column/src/column.ts b/packages/vue/src/grid/src/column/src/column.ts
index ee85544baa..74cd25cf7a 100644
--- a/packages/vue/src/grid/src/column/src/column.ts
+++ b/packages/vue/src/grid/src/column/src/column.ts
@@ -22,14 +22,17 @@
  * SOFTWARE.
  *
  */
-
-import { h, hooks, $prefix, $props, defineComponent } from '@opentiny/vue-common'
-import { assemColumn, destroyColumn } from '@opentiny/vue-renderless/grid/utils'
+import { findTree } from '@opentiny/vue-renderless/grid/static'
+import { setColumnFormat } from '@opentiny/vue-renderless/grid/utils'
+import { h, hooks, $props, defineComponent, useRelation, useInstanceSlots } from '@opentiny/vue-common'
 import Cell from '../../cell'
 import { warn } from '../../tools'
+import GlobalConfig from '../../config'
+
+const { columnLevelKey, defaultColumnName } = GlobalConfig
 
 export default defineComponent({
-  name: $prefix + 'GridColumn',
+  name: defaultColumnName,
   componentName: 'GridColumn',
   props: {
     ...$props,
@@ -134,57 +137,75 @@ export default defineComponent({
   provide() {
     return { $column: this }
   },
+  inject: { $table: { default: null } },
   setup(props, { slots }) {
-    const { reactive, onBeforeUnmount, inject, getCurrentInstance, onUpdated, watch, nextTick, markRaw } = hooks
+    const { reactive, inject, getCurrentInstance, onUpdated, watch, nextTick } = hooks
     const currentInstance = getCurrentInstance()
     const instance = currentInstance.proxy
     const $grid = inject('$grid')
     const $table = inject('$table')
-    const $column = inject('$column', null)
     let slotsCache = {}
 
+    !$table.isTagUsageSence && ($table.isTagUsageSence = true)
+
+    useInstanceSlots()
+
+    useRelation({ relationKey: `${columnLevelKey}-${$table.id}` })
+
     const state = reactive({
-      // 穿件表格列实例化对象
+      // 创建表格列实例化对象
       columnConfig: Cell.createColumn($table, props),
       slots,
-      cacheKey: markRaw({ uid: currentInstance.uid }),
       // 如果是静态数据源，就拿第一行数据
       firstRow: !$grid.fetchOption && $grid.data && $grid.data.length ? $grid.data[0] : {}
     })
 
     watch(
       () => props.formatConfig,
-      () => {
-        state.columnConfig = Cell.createColumn($table, props)
-      }
+      () => setColumnFormat(state.columnConfig, props)
     )
 
     onUpdated(() => {
-      const slotsChange = Object.keys(instance.slots || {}).some((key) => !(slotsCache?.[key] === instance.slots[key]))
+      // vue2的slots会对$scopedSlots做一层代理，因此获取不到更新
+      const noProxySlots = instance.$scopedSlots || instance.slots
+      const slotsChange = Object.keys(noProxySlots || {}).some((key) => !(slotsCache?.[key] === noProxySlots[key]))
       if (slotsChange) {
-        slotsCache = { ...instance.slots }
+        slotsCache = { ...noProxySlots }
         state.columnConfig.slots = slotsCache
       }
     })
 
-    nextTick(() => assemColumn($table, $column, instance, reactive))
-
-    onBeforeUnmount(() => destroyColumn($table, instance))
+    nextTick(() => (state.columnConfig.slots = instance.instanceSlots))
 
     return state
   },
   render() {
-    const { slots, firstRow, columnConfig } = this
+    const { $table, firstRow, columnConfig, instanceSlots } = this
     let slotVnode
-
     try {
-      slotVnode = slots.default && slots.default({ row: firstRow, column: columnConfig, skip: true })
+      slotVnode = instanceSlots.default && instanceSlots.default({ row: firstRow, column: columnConfig, skip: true })
     } catch (e) {
       slotVnode = null
       warn('ui.grid.error.chainCallError')
     }
 
-    return h('div', slotVnode)
+    const hasSubColumn = findTree(
+      slotVnode,
+      ({ componentOptions, type }) => {
+        const componentName = (type && type.name) || (componentOptions && componentOptions.Ctor.extendOptions.name)
+
+        return $table.isValidCustomColumn(componentName)
+      },
+      null,
+      null
+    )
+
+    const columnProps = {
+      key: columnConfig.id,
+      attrs: { 'data-colid': columnConfig.id }
+    }
+
+    return h('div', columnProps, hasSubColumn && slotVnode)
   },
   methods: Cell
 })
diff --git a/packages/vue/src/grid/src/composable/index.ts b/packages/vue/src/grid/src/composable/index.ts
new file mode 100644
index 0000000000..bd25c3d097
--- /dev/null
+++ b/packages/vue/src/grid/src/composable/index.ts
@@ -0,0 +1,2 @@
+export * from './useDrag'
+export * from './useRowGroup'
diff --git a/packages/vue/src/grid/src/composable/useDrag/dnd.ts b/packages/vue/src/grid/src/composable/useDrag/dnd.ts
new file mode 100644
index 0000000000..f31e8369b7
--- /dev/null
+++ b/packages/vue/src/grid/src/composable/useDrag/dnd.ts
@@ -0,0 +1,266 @@
+import { on, off, preventDefault } from '@opentiny/vue-renderless/common/deps/dom'
+
+export const initDrag = (dndProxyElement, dndElements, config = {}) => {
+  if (dndElements instanceof NodeList) {
+    dndElements = [...dndElements]
+  }
+
+  // dragstart 事件处理
+  const onDragStart = (e) => {
+    if (canDrag(e)) {
+      e.dataTransfer.effectAllowed = 'move'
+      startDrag(e, config.dragStart)
+    }
+  }
+
+  // dragover 事件处理
+  const onDragOver = (e) => preventDefault(e)
+
+  // dragenter 事件处理
+  const onDragEnter = (e) => {
+    if (canDrop(e)) {
+      addDropClass(e)
+    }
+  }
+
+  // dragend 事件处理
+  const onDragEnd = () => {
+    removeDropClass()
+  }
+
+  // drop 事件处理
+  const onDrop = (e) => {
+    if (canDrop(e)) {
+      startDrop(e, config.drop)
+    }
+  }
+
+  let groupNames = [] // 拖拽分组名称列表
+  let elGroups = [] // 拖拽分组对应的元素列表
+  let elNodes = [] // 平铺的元素、id和pid，临时变量
+  let parentMap = new WeakMap() // 父级映射
+  let childrenMap = new WeakMap() // 子级映射
+
+  if (dndProxyElement) {
+    if (Array.isArray(dndElements) && dndElements.length > 0) {
+      dndElements.forEach((el) => {
+        if (dndProxyElement.contains(el)) {
+          // 可拖拽属性必选 draggable='true'
+          const draggable = el.getAttribute('draggable') === 'true'
+          // 拖拽分组属性可选
+          const groupName = (el.dataset && el.dataset[config.groupKey || 'dndGroup']) || ''
+          // 拖拽ID属性必选
+          const dndId = el.dataset && el.dataset[config.idKey || 'dndId']
+          // 拖拽PID属性必选, 顶级为空字符串
+          const dndPid = el.dataset && el.dataset[config.pidKey || 'dndPid']
+
+          if (draggable) {
+            const index = groupNames.indexOf(groupName)
+
+            if (index === -1) {
+              groupNames.push(groupName)
+              elGroups.push([el])
+            } else {
+              elGroups[index].push(el)
+            }
+
+            elNodes.push({ dndId, dndPid, el })
+            childrenMap.set(el, [])
+          }
+        }
+      })
+
+      elNodes.forEach(({ dndId, dndPid, el }) => {
+        if (dndPid) {
+          const parent = elNodes.find((elNode) => elNode.dndId === dndPid).el
+
+          parentMap.set(el, parent)
+          childrenMap.get(parent).push(el)
+        } else {
+          parentMap.set(el, null)
+        }
+      })
+
+      elNodes.splice(0, elNodes.length)
+    }
+
+    on(dndProxyElement, 'dragstart', onDragStart)
+    on(dndProxyElement, 'dragover', onDragOver)
+    on(dndProxyElement, 'dragenter', onDragEnter)
+    on(dndProxyElement, 'dragend', onDragEnd)
+    on(dndProxyElement, 'drop', onDrop)
+  }
+
+  let dragTarget // 被拖拽元素
+  let dndGroup // 被拖拽元素所在的分组
+  let dropTarget // 被放置元素
+
+  // 判断 el1 是否是 el2 的父级
+  const isParent = (el1, el2) => {
+    const parents = []
+    let p = parentMap.get(el2)
+
+    if (p) {
+      parents.push(p)
+
+      while (true) {
+        p = parentMap.get(p)
+
+        if (p) {
+          parents.push(p)
+        } else {
+          break
+        }
+      }
+    }
+
+    return parents.includes(el1)
+  }
+
+  // 判断 el1 是否是 el2 的子级
+  const isChild = (el1, el2) => isParent(el2, el1)
+
+  // 判断两个元素是否是兄弟
+  const isSibling = (el1, el2) => {
+    const p1 = parentMap.get(el1)
+    const p2 = parentMap.get(el2)
+    // 都不存在父级或者具有相同的父级
+    return (!p1 && !p2) || (p1 && p2 && p1 === p2)
+  }
+
+  // 判断两个元素是否位于不同的子树
+  const isOther = (el1, el2) => {
+    // 不是父子关系或者兄弟关系，就认为处于不同的子树
+    return !isParent(el1, el2) && !isChild(el1, el2) && !isSibling(el1, el2)
+  }
+
+  // 获取最近的父级可拖拽可放置元素，如果不存在就返回其自身
+  const getClosestEl = (el) => {
+    for (let i = 0; i < elGroups.length; i++) {
+      for (let j = 0; j < elGroups[i].length; j++) {
+        const target = elGroups[i][j]
+
+        if (target === el || target.contains(el)) {
+          return target
+        }
+      }
+    }
+
+    return el
+  }
+
+  // 判断是否可拖拽，参数 e 是 ondragstart 事件
+  const canDrag = (e) => {
+    let found = false
+    const dragTarget = getClosestEl(e.target)
+
+    for (let i = 0; i < elGroups.length; i++) {
+      if (elGroups[i].includes(dragTarget)) {
+        found = true
+        break
+      }
+    }
+
+    return found
+  }
+
+  // 开始拖拽，参数 e 是 ondragstart 事件
+  const startDrag = (e, callback) => {
+    dragTarget = getClosestEl(e.target)
+
+    for (let i = 0; i < elGroups.length; i++) {
+      if (elGroups[i].includes(dragTarget)) {
+        dndGroup = elGroups[i]
+        break
+      }
+    }
+
+    if (typeof callback === 'function') {
+      callback(dragTarget, dndGroup, e)
+    }
+  }
+
+  // 判断目标是否可放置，参数 e 是 ondrop/ondragenter 事件
+  const canDrop = (e) => {
+    if (!dragTarget || !dndGroup) {
+      return false
+    }
+
+    const dropTarget = getClosestEl(e.target)
+
+    return (
+      dragTarget &&
+      dropTarget &&
+      dragTarget !== dropTarget &&
+      // 必须在同一个组内
+      dndGroup.includes(dropTarget) &&
+      // 不允许从父级向子级拖拽
+      !isParent(dragTarget, dropTarget)
+    )
+  }
+
+  // 开始放置元素，参数 e 是 ondrop 事件
+  const startDrop = (e, callback) => {
+    dropTarget = getClosestEl(e.target)
+
+    if (typeof callback === 'function') {
+      let type = ''
+
+      if (isChild(dragTarget, dropTarget)) {
+        type = 'child' // 子级向父级拖拽
+      } else if (isSibling(dragTarget, dropTarget)) {
+        type = 'sibling' // 兄弟节点之间的拖拽
+      } else if (isOther(dragTarget, dropTarget)) {
+        type = 'other' // 向其他子树的拖拽
+      }
+
+      callback(type, dragTarget, dropTarget, e)
+    }
+
+    dragTarget = dropTarget = dndGroup = null
+  }
+
+  let enterTarget // 进入的可放置节点
+
+  // 增加可放置样式，参数 e 是 ondragenter 事件
+  const addDropClass = (e) => {
+    if (!config.dropClass) return
+
+    removeDropClass()
+
+    enterTarget = getClosestEl(e.target)
+
+    if (enterTarget) {
+      enterTarget.classList.add(config.dropClass)
+    }
+  }
+
+  // 移除可放置样式
+  const removeDropClass = () => {
+    if (!config.dropClass) return
+
+    if (enterTarget) {
+      enterTarget.classList.remove(config.dropClass)
+      enterTarget = null
+    }
+  }
+
+  // 移除事件代理和内部状态引用
+  const destroy = () => {
+    if (dndProxyElement) {
+      off(dndProxyElement, 'dragstart', onDragStart)
+      off(dndProxyElement, 'dragover', onDragOver)
+      off(dndProxyElement, 'dragenter', onDragEnter)
+      off(dndProxyElement, 'dragend', onDragEnd)
+      off(dndProxyElement, 'drop', onDrop)
+    }
+
+    removeDropClass()
+
+    dndProxyElement = dndElements = null
+    groupNames = elGroups = null
+    parentMap = childrenMap = null
+  }
+
+  return { destroy }
+}
diff --git a/packages/vue/src/grid/src/composable/useDrag/index.ts b/packages/vue/src/grid/src/composable/useDrag/index.ts
new file mode 100644
index 0000000000..f5902c9a22
--- /dev/null
+++ b/packages/vue/src/grid/src/composable/useDrag/index.ts
@@ -0,0 +1,209 @@
+import { callInterceptor } from '@opentiny/vue-renderless/common/function'
+import debounce from '@opentiny/vue-renderless/common/deps/debounce'
+import { hooks } from '@opentiny/vue-common'
+import { initDrag } from './dnd'
+
+// header th selector
+const headerTh = 'th.tiny-grid-header__column:not(.col__gutter):not(.fixed__hidden)'
+
+const groupKey = 'dndGroup'
+const idKey = 'colid'
+const pidKey = 'pColid'
+
+let dndGroup = 0
+
+const setDndAttribute = (ths, colidMap, isColumnGroupLevel) => {
+  const pColidArr = []
+  const groupArr = []
+
+  ths.forEach((th) => {
+    const pColid = colidMap.get(th.dataset.colid).pColid || ''
+
+    th.setAttribute('draggable', true)
+    th.setAttribute('data-p-colid', pColid)
+
+    const index = pColidArr.indexOf(pColid)
+
+    if (index === -1) {
+      pColidArr.push(pColid)
+      groupArr.push([th])
+    } else {
+      groupArr[index].push(th)
+    }
+  })
+
+  let groupId
+
+  if (!isColumnGroupLevel) {
+    groupId = ++dndGroup
+  }
+
+  groupArr.forEach((group) => {
+    if (isColumnGroupLevel) {
+      groupId = ++dndGroup
+    }
+
+    group.forEach((th) => th.setAttribute('data-dnd-group', groupId))
+  })
+}
+
+const getColidMap = (treeArray) => {
+  const result = new Map()
+  const parentMap = new WeakMap()
+  const colidMap = new Map()
+
+  const traverse = (children, parent) => {
+    if (Array.isArray(children) && children.length > 0) {
+      children.forEach((child) => {
+        parentMap.set(child, parent)
+        colidMap.set(child.id, child)
+        traverse(child.children, child)
+      })
+    }
+  }
+
+  traverse(treeArray, null)
+
+  for (const [colid, column] of colidMap) {
+    const pCol = parentMap.get(column)
+    const pColid = pCol ? pCol.id : ''
+    result.set(colid, { pColid, pCol, column })
+  }
+
+  return result
+}
+
+const createDragHander = (state, $table) => {
+  // 开始拖拽处理
+  const dragStart = (dragTarget) => {
+    const dragColid = dragTarget.dataset.colid
+    // 记录被拖拽列位置信息
+    const dragParentColumn = state.colidMap.get(dragColid).pCol
+    const dragParentChildren = dragParentColumn ? dragParentColumn.children : state.collectColumn
+    const dragColumn = state.colidMap.get(dragColid).column
+    const dragIndex = dragParentChildren.indexOf(dragColumn)
+
+    $table.$emit('column-drag-start', { dragParentChildren, dragColumn, dragIndex })
+  }
+
+  // 放置结束处理
+  const drop = (_, dragTarget, dropTarget) => {
+    const dragColid = dragTarget.dataset.colid
+    const dropColid = dropTarget.dataset.colid
+    // 记录被拖拽列位置信息
+    const dragParentColumn = state.colidMap.get(dragColid).pCol
+    const dragParentChildren = dragParentColumn ? dragParentColumn.children : state.collectColumn
+    const dragColumn = state.colidMap.get(dragColid).column
+    const dragIndex = dragParentChildren.indexOf(dragColumn)
+    // 记录被放置列位置信息
+    const dropParentColumn = state.colidMap.get(dropColid).pCol
+    const dropParentChildren = dropParentColumn ? dropParentColumn.children : state.collectColumn
+    const dropColumn = state.colidMap.get(dropColid).column
+    const dropIndex = dropParentChildren.indexOf(dropColumn)
+    // 拖拽信息参数
+    const args = { dragParentChildren, dragColumn, dragIndex, dropParentChildren, dropColumn, dropIndex }
+    // 放置前处理
+    callInterceptor(state.dropConfig.columnBeforeDrop, {
+      args: [args],
+      done: () => {
+        // 移除被拖拽列，并插入到被放置的位置
+        dragParentChildren.splice(dragIndex, 1)
+        dropParentChildren.splice(dropIndex, 0, dragColumn)
+
+        const { lastScrollLeft, lastScrollTop, scrollXLoad, scrollYLoad } = $table
+
+        // 刷新表格的收集列
+        $table.loadColumn(state.collectColumn)
+        $table.$emit('column-drop', args)
+
+        setTimeout(() => {
+          if (lastScrollLeft || lastScrollTop) {
+            $table.scrollTo(lastScrollLeft, lastScrollTop)
+            scrollXLoad && $table.triggerScrollXEvent()
+            scrollYLoad && $table.triggerScrollYEvent({ target: { scrollTop: lastScrollTop } })
+          }
+        })
+      }
+    })
+  }
+
+  return { dragStart, drop }
+}
+
+const createTableColumnWatch = ($table, state, isColumnGroupLevel, stopHandlerMap) =>
+  debounce(100, () => {
+    const headers = ['table', 'left', 'right']
+
+    headers.forEach((key) => {
+      const headerVm = $table.$refs[`${key}Header`]
+
+      if (headerVm) {
+        const dndProxy = headerVm.$el
+
+        if (dndProxy) {
+          const dndThs = Array.from(dndProxy.querySelectorAll(headerTh))
+
+          // 表头th渲染时已添加data-colid属性，这里额外增加draggable、data-p-colid和data-dnd-group属性
+          setDndAttribute(dndThs, state.colidMap, isColumnGroupLevel)
+
+          if (stopHandlerMap.has(dndProxy)) {
+            stopHandlerMap.get(dndProxy).destroy()
+            stopHandlerMap.delete(dndProxy)
+          }
+
+          const { dragStart, drop } = createDragHander(state, $table)
+          const dropClass = state.dropConfig.columnDropClass || ''
+
+          stopHandlerMap.set(
+            dndProxy,
+            initDrag(dndProxy, dndThs, { dragStart, drop, dropClass, groupKey, idKey, pidKey })
+          )
+        }
+      }
+    })
+  })
+
+const createUseDrag =
+  ({ reactive, watch, getCurrentInstance, onBeforeUnmount }) =>
+  ({ dropConfig, collectColumn, tableColumn }) => {
+    const state = reactive({
+      dropConfig,
+      collectColumn,
+      tableColumn,
+      colidMap: null
+    })
+
+    // 在设置 scheme 标志位 v2 时，列拖拽使用新方案
+    if (!state.dropConfig || (state.dropConfig && state.dropConfig.scheme !== 'v2')) return
+
+    const $table = getCurrentInstance().proxy
+
+    // 列拖拽处理
+    if (state.dropConfig.column) {
+      // 是否只允许同层级拖拽
+      const isColumnGroupLevel = !state.dropConfig.columnGroup || state.dropConfig.columnGroup === 'level'
+      const stopHandlerMap = new Map()
+      const tableColumnWatch = createTableColumnWatch($table, state, isColumnGroupLevel, stopHandlerMap)
+
+      watch(collectColumn, () => {
+        state.colidMap = getColidMap(state.collectColumn)
+      })
+
+      watch(tableColumn, () => tableColumnWatch())
+
+      onBeforeUnmount(() => {
+        if (stopHandlerMap.size > 0) {
+          const dndProxyList = []
+
+          for (const [dndProxy, stopHander] of stopHandlerMap) {
+            dndProxyList.push(dndProxy)
+            stopHander.destroy()
+          }
+
+          dndProxyList.forEach((dndProxy) => stopHandlerMap.delete(dndProxy))
+        }
+      })
+    }
+  }
+
+export const useDrag = createUseDrag(hooks)
diff --git a/packages/vue/src/grid/src/composable/useRowGroup.ts b/packages/vue/src/grid/src/composable/useRowGroup.ts
new file mode 100644
index 0000000000..140db08dca
--- /dev/null
+++ b/packages/vue/src/grid/src/composable/useRowGroup.ts
@@ -0,0 +1,61 @@
+import { hooks } from '@opentiny/vue-common'
+import { find } from '@opentiny/vue-renderless/grid/static'
+
+const createUseRowGroup =
+  ({ reactive, watch, getCurrentInstance, onBeforeUnmount }) =>
+  ({ rowGroup, visibleColumn, tableFullColumn, tableColumn }) => {
+    const state = reactive({
+      rowGroup,
+      visibleColumn,
+      tableFullColumn,
+      tableColumn
+    })
+
+    if (!state.rowGroup) return
+
+    const $table = getCurrentInstance().proxy
+
+    watch([visibleColumn, tableColumn], () => {
+      // 取可见列中第一个rowGroup.field作为分组列
+      let targetColumn = find(state.visibleColumn, (col) => col.property === state.rowGroup.field)
+
+      // 如果rowGroup.field指定的列不存在或不可见，就取第一个field配置存在的列
+      if (!targetColumn) {
+        targetColumn = find(state.visibleColumn, (col) => !!col.property)
+      }
+
+      if (targetColumn) {
+        $table._rowGroupTargetColumn = targetColumn
+
+        const index = state.tableColumn.indexOf(targetColumn)
+        const length = state.tableColumn.length
+        let targetColumnColspan = state.rowGroup.colspan || 1
+
+        targetColumnColspan = Math.max(targetColumnColspan, 1)
+
+        if (targetColumnColspan > 1) {
+          targetColumnColspan = Math.min(targetColumnColspan, length - index)
+        }
+
+        for (let i = 0; i < length; i++) {
+          const vCol = state.tableColumn[i]
+
+          if (vCol === targetColumn) {
+            vCol._rowGroupColspan = targetColumnColspan
+          } else {
+            vCol._rowGroupColspan = i > index && i < index + targetColumnColspan ? 0 : 1
+          }
+        }
+      }
+    })
+
+    onBeforeUnmount(() => {
+      delete $table._rowGroupTargetColumn
+
+      state.tableFullColumn.forEach((column) => {
+        delete column._rowGroupColspan
+      })
+    })
+  }
+
+export const useRowGroup = createUseRowGroup(hooks)
diff --git a/packages/vue/src/grid/src/config.ts b/packages/vue/src/grid/src/config.ts
index f8c885dc80..d857d71c24 100644
--- a/packages/vue/src/grid/src/config.ts
+++ b/packages/vue/src/grid/src/config.ts
@@ -33,6 +33,7 @@ import {
   iconSortTriangleDescending,
   iconSortTriangle
 } from '@opentiny/vue-icon'
+import { $prefix } from '@opentiny/vue-common'
 
 const GlobalConfig = {
   validConfig: {
@@ -161,7 +162,9 @@ const GlobalConfig = {
   themes: {
     TINY: 'tiny',
     SAAS: 'saas'
-  }
+  },
+  columnLevelKey: 'ColumnLevelProvideKey',
+  defaultColumnName: $prefix + 'GridColumn'
 }
 
 // list视图类型、gantt视图类型和card视图类型的配置一致
diff --git a/packages/vue/src/grid/src/dragger/src/methods.ts b/packages/vue/src/grid/src/dragger/src/methods.ts
index 31a8edb88c..4055b6fecd 100644
--- a/packages/vue/src/grid/src/dragger/src/methods.ts
+++ b/packages/vue/src/grid/src/dragger/src/methods.ts
@@ -1,59 +1,95 @@
-import { createHandlerOnEnd, onEndEvent } from './rowDrop'
+import { createHandlerOnEnd, getSortColumns } from './rowDrop'
 export default {
   // 处理列拖拽
-  columnDrop() {
-    this.$nextTick(() => {
-      const { plugin, onBeforeMove, filter } = this.dropConfig
-      const mainHeaderTable = this.elemStore['main-header-table']
+  columnDrop(headerEl) {
+    const { plugin, onBeforeMove, filter } = this.dropConfig
+    const columnDropContainer = headerEl.querySelector('.tiny-grid__header .tiny-grid-header__row')
 
-      this.columnSortable = plugin.create(mainHeaderTable.querySelector('.tiny-grid-header__row'), {
-        handle: '.tiny-grid-header__column:not(.col__fixed)',
-        filter,
-        onEnd: (event) => {
-          onEndEvent({ event, _this: this })
-        },
-        onStart: (event) => {
-          this.$emit('column-drop-start', event, this)
-        },
-        onMove: (event) => {
-          const cancel = typeof onBeforeMove === 'function' ? onBeforeMove('column', null, event, this) : true
-          this.$emit('column-drop-move', event, this)
-          return cancel === undefined || cancel
-        }
-      })
-    })
-  },
-  // 处理行拖拽
-  rowDrop() {
-    this.$nextTick(() => {
-      // refresh：是否在拖拽后刷新数据，默认为true
-      const { plugin, onBeforeMove, filter, refresh = true, trigger } = this.dropConfig
-      const mainBodyWrapper = this.elemStore['main-body-wrapper']
+    const columnDropOptions = {
+      handle: '.tiny-grid-header__column:not(.col__fixed)',
+      filter,
+      onEnd: (event) => {
+        const { item, newIndex, oldIndex } = event
+        let { fullColumn, tableColumn } = this.getTableColumn()
+        const sortVisibleCols = getSortColumns(tableColumn)
+        let targetThElem = item
+        let wrapperElem = targetThElem.parentNode
+        let newColumn = sortVisibleCols[newIndex]
 
-      this.rowSortable = plugin.create(mainBodyWrapper.querySelector('tbody'), {
-        handle: trigger || '.tiny-grid-body__row',
-        filter,
-        onEnd: createHandlerOnEnd({ _vm: this, refresh }),
-        onStart: (event) => {
-          this.$emit('row-drop-start', event, this)
-        },
-        onMove: (event) => {
-          const insertRecords = this.getInsertRecords()
-          // 包含新增数据的表格不可再拖动行顺序
-          if (insertRecords.length) {
-            return false
+        if (newColumn.fixed) {
+          // 错误的移动
+          if (newIndex > oldIndex) {
+            for (let i = newIndex; i >= oldIndex; i--) {
+              wrapperElem.insertBefore(targetThElem, wrapperElem.children[i])
+            }
+          } else {
+            for (let i = newIndex; i <= oldIndex; i++) {
+              wrapperElem.insertBefore(targetThElem, wrapperElem.children[i])
+            }
+
+            wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
           }
 
-          const { dragged } = event
-          // 获取被拖拽的行，这里在拖拽过程中被频繁触发，待优化
-          const selfRow = this.getRowNode(dragged).item
-          const cancel = typeof onBeforeMove === 'function' ? onBeforeMove('row', selfRow, event, this) : true
-
-          this.$emit('row-drop-move', event, this)
-
-          return cancel === undefined || cancel
+          return Modal.message({
+            message: GlobalConfig.i18n('ui.grid.error.dargFixed'),
+            status: 'error'
+          })
         }
-      })
-    })
+        // 转换真实索引
+        let oldColumnIndex = this.getColumnIndex(sortVisibleCols[oldIndex])
+        let newColumnIndex = this.getColumnIndex(sortVisibleCols[newIndex])
+        // 移动到目标列
+        let currCol = fullColumn.splice(oldColumnIndex, 1)[0]
+
+        fullColumn.splice(newColumnIndex, 0, currCol)
+        this.loadColumn(fullColumn)
+        this.$emit('column-drop-end', event, this)
+
+        const toolbarVm = this.getVm('toolbar')
+
+        this.isDragHeaderSorting && toolbarVm && toolbarVm.updateSetting()
+      },
+      onStart: (event) => {
+        this.$emit('column-drop-start', event, this)
+      },
+      onMove: (event) => {
+        const cancel = typeof onBeforeMove === 'function' ? onBeforeMove('column', null, event, this) : true
+
+        this.$emit('column-drop-move', event, this)
+
+        return cancel === undefined || cancel
+      }
+    }
+
+    return plugin.create(columnDropContainer, columnDropOptions)
+  },
+  // 处理行拖拽
+  rowDrop(bodyEl) {
+    const { plugin, onBeforeMove, filter, refresh = true, rowHandle } = this.dropConfig
+    const rowDropContainer = bodyEl.querySelector('.tiny-grid__body tbody')
+
+    const rowDropOptions = {
+      handle: rowHandle === 'index' ? '.tiny-grid-body__row>td.col__index>.row__drop-handle' : '.tiny-grid-body__row',
+      filter,
+      onEnd: createHandlerOnEnd({ _vm: this, refresh }),
+      onStart: (event) => {
+        this.$emit('row-drop-start', event, this)
+      },
+      onMove: (event) => {
+        let insertRecords = this.getInsertRecords()
+        // 包含新增数据的表格不可再拖动行顺序
+        if (insertRecords.length) return false
+
+        let { dragged } = event
+        let selfRow = this.getRowNode(dragged).item
+        const cancel = typeof onBeforeMove === 'function' ? onBeforeMove('row', selfRow, event, this) : true
+
+        this.$emit('row-drop-move', event, this)
+
+        return cancel === undefined || cancel
+      }
+    }
+
+    return plugin.create(rowDropContainer, rowDropOptions)
   }
 }
diff --git a/packages/vue/src/grid/src/fetch-data/src/methods.ts b/packages/vue/src/grid/src/fetch-data/src/methods.ts
index 8b41ba69de..bf33d18795 100644
--- a/packages/vue/src/grid/src/fetch-data/src/methods.ts
+++ b/packages/vue/src/grid/src/fetch-data/src/methods.ts
@@ -10,9 +10,9 @@ export default {
     const { fetchData = {}, dataset = {} } = this as any
 
     if (fetchData.api || dataset.source || dataset.value || dataset.api) {
-      let { loading, fields, api } = fetchData || dataset.source || dataset.api || {}
-
-      return { api, dataset, fields, loading }
+      const { loading, fields, api, reloadConfig } = fetchData || dataset.source || dataset.api || {}
+      const isReloadFilter = reloadConfig && reloadConfig.filter
+      return { api, dataset, fields, loading, isReloadFilter }
     }
   },
   handleFetch(code, sortArg) {
@@ -45,6 +45,8 @@ export default {
       ...args
     }
     let search
+    const { isReloadFilter = false } = fetchOption
+
     this.tableLoading = loading
 
     if (pagerConfig) {
@@ -57,7 +59,12 @@ export default {
       }
 
       this.sortData = params.sort = {}
-      this.filterData = params.filters = []
+
+      if (!isReloadFilter) {
+        params.filters = []
+        this.filterData = params.filters
+      }
+
       this.pendingRecords = []
       this.clearAll()
     }
diff --git a/packages/vue/src/grid/src/grid/grid.ts b/packages/vue/src/grid/src/grid/grid.ts
index ae91c18f88..77e05caedf 100644
--- a/packages/vue/src/grid/src/grid/grid.ts
+++ b/packages/vue/src/grid/src/grid/grid.ts
@@ -56,6 +56,7 @@ function createRender(opt) {
     vSize,
     props,
     selectToolbar,
+    slots,
     $slots,
     tableOns,
     renderedToolbar,
@@ -83,7 +84,7 @@ function createRender(opt) {
       selectToolbar ? null : renderedToolbar,
       columnAnchor ? _vm.renderColumnAnchor(columnAnchorParams, _vm) : null,
       // 这里会渲染tiny-grid-column插槽内容，从而获取列配置
-      h(TinyGridTable, { props, on: tableOns, ref: 'tinyTable' }, $slots.default && $slots.default()),
+      h(TinyGridTable, { props, on: tableOns, ref: 'tinyTable' }, slots.default && slots.default()),
       _vm.renderPager({
         $slots,
         _vm,
@@ -407,6 +408,7 @@ export default defineComponent({
       selectToolbar,
       renderedToolbar,
       tableOns,
+      slots: this.slots,
       $slots,
       loading,
       pager,
diff --git a/packages/vue/src/grid/src/header/src/header.ts b/packages/vue/src/grid/src/header/src/header.ts
index 5066c8485e..62648da474 100644
--- a/packages/vue/src/grid/src/header/src/header.ts
+++ b/packages/vue/src/grid/src/header/src/header.ts
@@ -434,9 +434,9 @@ export default defineComponent({
     }
   },
   mounted() {
-    let { $el, $parent: $table, $refs } = this
-    let elemStore = $table.elemStore
-    let keyPrefix = 'main-header-'
+    const { $el, $parent: $table, $refs } = this
+    const { elemStore, dropConfig } = $table
+    const keyPrefix = 'main-header-'
 
     elemStore[`${keyPrefix}wrapper`] = $el
     elemStore[`${keyPrefix}table`] = $refs.table
@@ -444,6 +444,17 @@ export default defineComponent({
     elemStore[`${keyPrefix}list`] = $refs.thead
     elemStore[`${keyPrefix}x-space`] = $refs.xSpace
     elemStore[`${keyPrefix}repair`] = $refs.repair
+
+    if (dropConfig) {
+      const { plugin, column = true, scheme } = dropConfig
+
+      if (scheme !== 'v2') {
+        plugin && column && (this.columnSortable = $table.columnDrop(this.$el))
+      }
+    }
+  },
+  beforeUnmount() {
+    this.columnSortable && this.columnSortable.destroy()
   },
   created() {
     this.uploadColumn()
diff --git a/packages/vue/src/grid/src/keyboard/src/methods.ts b/packages/vue/src/grid/src/keyboard/src/methods.ts
index 111c04995b..c6cc9d86be 100644
--- a/packages/vue/src/grid/src/keyboard/src/methods.ts
+++ b/packages/vue/src/grid/src/keyboard/src/methods.ts
@@ -35,6 +35,7 @@ import {
   handleCellMousedownEvent
 } from './utils/triggerCellMousedownEvent'
 import { handleHeaderCellMousedownEvent } from './utils/triggerHeaderCellMousedownEvent'
+import { warn, Formatter } from '../../tools'
 
 const removeCellClass = (bodyRef, clazz) =>
   arrayEach(bodyRef.$el.querySelectorAll('.' + clazz), (elem) => removeClass(elem, clazz))
@@ -58,6 +59,74 @@ const getModify = ({ offsetTop, offsetLeft, cWidth, cHeight }) => {
   }
 }
 
+const writeClipboardText = ({ $table, columns, rows }) => {
+  const { keyboardConfig = {}, isAsyncColumn } = $table
+  const { clipboard = {} } = keyboardConfig
+  const { writeMethod, cellSplit = ',', rowSplit = ';' } = clipboard
+
+  const getCellValue = (column, row) => {
+    let cellValue = ''
+
+    if (isAsyncColumn) {
+      const format = column.format || {}
+
+      if (format.async === true && format.type === 'enum') {
+        cellValue = Formatter.enum.call(column, row[column.property])
+      } else if (format.async && typeof format.async.fetch === 'function') {
+        cellValue = row[$table.getAsyncColumnName(column.property)]
+      } else {
+        cellValue = row[column.property]
+      }
+    } else {
+      cellValue = row[column.property]
+    }
+
+    return cellValue || ''
+  }
+
+  if (!clipboard) return
+
+  let value
+
+  if (typeof writeMethod === 'function') {
+    value = writeMethod({ $table, columns, rows })
+  } else {
+    const rowValues = []
+
+    rows.forEach((row) => {
+      const cellValues = []
+
+      columns.forEach((column) => {
+        const cellValue = getCellValue(column, row)
+        cellValues.push(cellValue)
+      })
+
+      rowValues.push(cellValues.join(cellSplit))
+    })
+
+    value = rowValues.join(rowSplit)
+  }
+
+  const writeFallback = () => {
+    const input = document.createElement('input')
+
+    input.value = value
+    document.body.appendChild(input)
+    input.select()
+    document.execCommand('Copy')
+    document.body.removeChild(input)
+  }
+
+  if (isSecureContext && navigator.clipboard) {
+    navigator.clipboard.writeText(value).catch((reason) => {
+      warn('ui.grid.error.clipboardWriteError', reason)
+      writeFallback()
+    })
+  } else {
+    writeFallback()
+  }
+}
+
 export default {
   // Tab键移动处理
   moveTabSelected(args, isLeft, event, edit) {
@@ -252,7 +321,7 @@ export default {
       let bodyList = elemStore['main-body-list'].children
       let cellFirstElementChild = cell.parentNode.firstElementChild
       let cellLastElementChild = cell.parentNode.lastElementChild
-      let colIndex = [...cell.parentNode.children].indexOf(cell)
+      let colIndex = Array.from(cell.parentNode.children).indexOf(cell)
       let headStart = headerList[0].children[colIndex]
       args = { $el, _vm: this, bodyList, cell, cellFirstElementChild }
 
@@ -527,6 +596,8 @@ export default {
 
       columns = tableColumn.slice(columnIndex, columnIndex + firstRowsLength)
       rows = tableData.slice(rowIndex, rowIndex + rowNodes.length)
+
+      writeClipboardText({ $table: this, columns, rows })
     }
 
     arrayEach(rowNodes, (rowNode, rowIndex) => {
@@ -607,19 +678,24 @@ export default {
     this.handleChecked(rowNodes)
   },
   handleClearMouseChecked(event) {
-    const { $grid, $refs, autoClearMouseChecked } = this
+    const { $grid, $refs, autoClearMouseChecked, autoClearKeyboardCopy } = this
     const { tableWrapper, tooltip, validTip } = $refs
     const equalOrContain = (elm, target) => elm && (elm === target || elm.contains(target))
 
     if (
-      autoClearMouseChecked &&
       !equalOrContain($grid.$el, event.target) &&
       !equalOrContain(tableWrapper, event.target) &&
       !equalOrContain(tooltip && tooltip.state.popperElm, event.target) &&
       !equalOrContain(validTip && validTip.state.popperElm, event.target)
     ) {
-      this.clearChecked()
-      this.clearSelected()
+      if (autoClearMouseChecked) {
+        this.clearChecked()
+        this.clearSelected()
+      }
+
+      if (autoClearKeyboardCopy) {
+        this.clearCopyed()
+      }
     }
   }
 }
diff --git a/packages/vue/src/grid/src/menu/src/panel.ts b/packages/vue/src/grid/src/menu/src/panel.ts
index 27606ef692..84481cc41a 100644
--- a/packages/vue/src/grid/src/menu/src/panel.ts
+++ b/packages/vue/src/grid/src/menu/src/panel.ts
@@ -111,6 +111,7 @@ export default defineComponent({
   render() {
     let { ctxMenuStore, $parent: tableInstance } = this
     let { toKebab, getEventTargetNode } = tableInstance
+    const hasChild = Array.isArray(ctxMenuStore.list) && ctxMenuStore.list.flat().some((item) => item.visible !== false)
 
     return h(
       'div',
@@ -119,7 +120,7 @@ export default defineComponent({
           'tiny-grid__wrapper',
           'tiny-grid-menu__wrapper',
           {
-            show: ctxMenuStore.visible
+            show: ctxMenuStore.visible && hasChild
           }
         ],
         style: ctxMenuStore.style
diff --git a/packages/vue/src/grid/src/mobile-first/column-content.vue b/packages/vue/src/grid/src/mobile-first/column-content.vue
index 4b73a68a61..f761001aa8 100644
--- a/packages/vue/src/grid/src/mobile-first/column-content.vue
+++ b/packages/vue/src/grid/src/mobile-first/column-content.vue
@@ -118,9 +118,10 @@ export default defineComponent({
         cellIsVnode = isVnode(cellNode[0])
       }
 
+      // Tiny新增，修复多端表格卡片模式英文无法正常换行显示省略号问题
       const VnodeCls = cellIsVnode
         ? 'inline-block flex-grow [&_span]:leading-5 [&_div[data-tag=tiny-input]]:leading-5 ml-1'
-        : 'text-color-text-primary'
+        : 'text-color-text-primary break-all'
       const divCls = cellIsVnode ? 'flex' : 'line-clamp-2 sm:line-clamp-1'
 
       return h('div', { class: cls + divCls, on: ons() }, [
diff --git a/packages/vue/src/grid/src/mobile-first/column-link.vue b/packages/vue/src/grid/src/mobile-first/column-link.vue
index cab879c18c..ad56aa7265 100644
--- a/packages/vue/src/grid/src/mobile-first/column-link.vue
+++ b/packages/vue/src/grid/src/mobile-first/column-link.vue
@@ -31,55 +31,59 @@ export default defineComponent({
       }
 
       buttons.forEach((buttonConfig: any) => !isHidden(buttonConfig) && visibleButtons.push(buttonConfig))
-      vnode =
-        visibleButtons.length === 1
-          ? h(
-              'div',
-              {
-                'class': `w-5 h-5 sm:w-4 sm:w-4 ${
-                  isDisabled(visibleButtons[0]) ? 'fill-color-icon-disabled' : 'fill-color-icon-secondary'
-                } `
-              },
-              [
-                h(visibleButtons[0].icon, {
-                  on: {
-                    click: (event: any) => {
-                      if (!isDisabled(visibleButtons[0])) {
-                        handleItemClick(visibleButtons[0].name)
-                      }
-                      event.stopPropagation()
-                    }
-                  },
-                  'attrs': {
-                    'custom-class': 'w-5 h-5 sm:w-4 sm:w-4'
+
+      if (visibleButtons.length === 0) {
+        vnode = null
+      } else if (visibleButtons.length === 1) {
+        vnode = h(
+          'div',
+          {
+            'class': `w-5 h-5 sm:w-4 sm:w-4 ${
+              isDisabled(visibleButtons[0]) ? 'fill-color-icon-disabled' : 'fill-color-icon-secondary'
+            } `
+          },
+          [
+            h(visibleButtons[0].icon, {
+              on: {
+                click: (event: any) => {
+                  if (!isDisabled(visibleButtons[0])) {
+                    handleItemClick(visibleButtons[0].name)
                   }
-                })
-              ]
-            )
-          : h(
-              Dropdown,
-              {
-                on: { 'item-click': handleItemClick },
-                props: { trigger: 'hover', showSelfIcon: true, tiny_mode: 'mobile-first', tiny_mode_root: true }
+                  event.stopPropagation()
+                }
               },
-              [
-                h(IconEllipsis(), { class: 'mf-table-more outline-none text-base cursor-pointer' }),
+              'attrs': {
+                'custom-class': 'w-5 h-5 sm:w-4 sm:w-4'
+              }
+            })
+          ]
+        )
+      } else {
+        const scopedSlots = {
+          default: () => h(IconEllipsis(), { class: 'mf-table-more outline-none text-base cursor-pointer' }),
+          dropdown: () =>
+            h(
+              DropdownMenu,
+              { slot: 'dropdown' },
+              visibleButtons.map((buttonConfig) =>
                 h(
-                  DropdownMenu,
-                  { slot: 'dropdown' },
-                  visibleButtons.map((buttonConfig) =>
-                    h(
-                      DropdownItem,
-                      {
-                        class: { [disabledClass || '']: isDisabled(buttonConfig) },
-                        props: { itemData: buttonConfig.name, disabled: isDisabled(buttonConfig) }
-                      },
-                      buttonConfig.name
-                    )
-                  )
+                  DropdownItem,
+                  {
+                    class: { [disabledClass || '']: isDisabled(buttonConfig) },
+                    props: { itemData: buttonConfig.name, disabled: isDisabled(buttonConfig) }
+                  },
+                  buttonConfig.name
                 )
-              ]
+              )
             )
+        }
+
+        vnode = h(Dropdown, {
+          on: { 'item-click': handleItemClick },
+          props: { trigger: 'hover', showSelfIcon: true, tiny_mode: 'mobile-first', tiny_mode_root: true },
+          scopedSlots
+        })
+      }
     } else {
       vnode = slotLink({ row, h })
     }
diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts
index ce47cf1a4e..1ef773d729 100644
--- a/packages/vue/src/grid/src/table/src/methods.ts
+++ b/packages/vue/src/grid/src/table/src/methods.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  *
  */
-import { getColumnList } from '@opentiny/vue-renderless/grid/utils'
+import { getColumnList, assemColumn } from '@opentiny/vue-renderless/grid/utils'
 import { toDecimal } from '@opentiny/vue-renderless/common/string'
 import { addClass, removeClass, isDisplayNone } from '@opentiny/vue-renderless/common/deps/dom'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
@@ -114,7 +114,8 @@ import {
   setTreeScrollYCache,
   sliceFullData,
   sliceVisibleColumn,
-  setSliceColumnTree
+  setSliceColumnTree,
+  buildRowGroupFullData
 } from './strategy'
 
 let run = (names, $table) => names.forEach((name) => $table[name].apply($table))
@@ -208,14 +209,20 @@ const Methods = {
     return this.parentHeight
   },
   clearAll(silent) {
+    const { fetchOption = {} } = this.$grid
+    const { isReloadFilter } = fetchOption
+
     run(['clearScroll', 'clearSort', 'clearCurrentRow', 'clearCurrentColumn'], this)
     run(['clearSelection', 'clearRowExpand', 'clearTreeExpand'], this)
-    if (TINYGrid._filter) {
+
+    if (typeof isReloadFilter === 'undefined' ? TINYGrid._filter : !isReloadFilter) {
       this.clearFilter(silent)
     }
+
     if (this.keyboardConfig || this.mouseConfig) {
       run(['clearIndexChecked', 'clearHeaderChecked', 'clearChecked', 'clearSelected', 'clearCopyed'], this)
     }
+
     return this.clearActived()
   },
   refreshData(data) {
@@ -252,8 +259,8 @@ const Methods = {
     // 判断是否有虚拟滚动，有即剪切数据
     this.tableData = sliceFullData(this)
 
-    // updateScrollStatus：处理异步渲染列相关逻辑，buildGroupData：处理表格分组相关逻辑
-    run(['updateScrollStatus', 'buildGroupData'], this)
+    // updateScrollStatus：处理异步渲染列相关逻辑
+    this.updateScrollStatus()
 
     return this.$nextTick()
   },
@@ -538,17 +545,18 @@ const Methods = {
     return result
   },
   hasRowChange(row, field) {
-    let { tableSourceData, treeConfig, visibleColumn, backupMap } = this
-    let argsLength = arguments.length
-    let rowId = getRowid(this, row)
+    const { tableSourceData, treeConfig, visibleColumn, backupMap, editConfig = {} } = this
+    const { insertChanged = false } = editConfig
+    const argsLength = arguments.length
+    const rowId = getRowid(this, row)
     let originRow
     // 新增的数据不需要检测
     if (this.isTemporaryRow(row)) {
-      return false
+      return insertChanged
     }
     if (treeConfig) {
-      let children = treeConfig.children
-      let cacheRow = backupMap.get(row)
+      const children = treeConfig.children
+      const cacheRow = backupMap.get(row)
 
       row = { ...row, [children]: null }
 
@@ -680,31 +688,11 @@ const Methods = {
     this.afterFullData = tableData
 
     setTreeScrollYCache(this)
+    // 构建分组表场景全量数据
+    buildRowGroupFullData(tableData, this)
 
     return tableData
   },
-  // 组装表格分组映射表
-  buildGroupData() {
-    const { rowGroup, tableData } = this
-    Object.assign(this, { groupData: {}, groupFolds: [] })
-    if (!rowGroup) {
-      return
-    }
-    let { groups = {}, current = '' } = {}
-    tableData.forEach((row, rowIndex) => {
-      const rowid = getRowid(this, row)
-      const { field } = rowGroup
-      let prevRow = tableData[rowIndex - 1]
-
-      if (!prevRow || prevRow[field] !== row[field]) {
-        current = rowid
-        groups[rowid] = { fold: false, children: [row] }
-      } else {
-        groups[current].children.push(row)
-      }
-    })
-    this.groupData = groups
-  },
   getRowById(rowid) {
     let { fullDataRowIdData } = this
     let rowCache = fullDataRowIdData[rowid]
@@ -1463,18 +1451,21 @@ const Methods = {
     let { offsetSize, renderSize, startIndex, visibleIndex, visibleSize } = scrollXStore
     let { scrollLeft } = this.$refs.tableBody.$el
     let { preload = false, toVisibleIndex = 0, width = 0 } = {}
+    // 根据滚动位置计算边界可见列
     for (let i = 0; i < visibleColumn.length; i++) {
       width += visibleColumn[i].renderWidth
       if (scrollLeft < width) {
-        toVisibleIndex = i
+        toVisibleIndex = i // 边界可见列索引
         break
       }
     }
+    // 边界可见列和上次记录的相同，滚动还没超过此列，就关闭Tooltip退出
     if (visibleIndex === toVisibleIndex) {
       this.clostTooltip()
       return
     }
     let marginSize = Math.min(Math.floor((renderSize - visibleSize) / 2), visibleSize)
+    marginSize = Math.max(0, marginSize)
     if (visibleIndex > toVisibleIndex) {
       // 向左
       preload = startIndex >= toVisibleIndex - offsetSize
@@ -1782,7 +1773,7 @@ const Methods = {
   },
   clearScroll() {
     let { scrollXStore, scrollYStore, elemStore } = this
-    Object.assign(this, { lastScrollLeft: 0 })
+    Object.assign(this, { lastScrollLeft: 0, lastScrollTop: 0 })
     Object.assign(scrollXStore, { startIndex: 0, visibleIndex: 0 })
     Object.assign(scrollYStore, { startIndex: 0, visibleIndex: 0 })
     this.$nextTick(() => {
@@ -2002,6 +1993,32 @@ const Methods = {
   },
   getVm(name) {
     return this.$grid.getVm(name)
+  },
+  assembleColumns() {
+    // 如果没有初始化任何列实例就不进行列组装
+    if (!this.isTagUsageSence) return
+
+    assemColumn(this)
+  },
+  isValidCustomColumn(columnName) {
+    return columnName && this.columnNames.includes(columnName)
+  },
+  computeCollectKey() {
+    const columnIds = []
+
+    const traverse = (columns) => {
+      if (Array.isArray(columns) && columns.length > 0) {
+        columns.forEach((column) => {
+          columnIds.push(column.columnConfig.id)
+
+          traverse(column.childColumns)
+        })
+      }
+    }
+
+    traverse(this.childColumns)
+
+    return columnIds.join(',')
   }
 }
 funcs.forEach((name) => {
diff --git a/packages/vue/src/grid/src/table/src/strategy.ts b/packages/vue/src/grid/src/table/src/strategy.ts
index d8b12f0264..077a608dbd 100644
--- a/packages/vue/src/grid/src/table/src/strategy.ts
+++ b/packages/vue/src/grid/src/table/src/strategy.ts
@@ -1,11 +1,16 @@
+import { hooks } from '@opentiny/vue-common'
 import { getRowkey } from '@opentiny/vue-renderless/grid/utils'
+import { arrayEach, isEqual } from '@opentiny/vue-renderless/grid/static'
 import { warn } from '../../tools'
 
+const { toRaw } = hooks
+
 const TEMPORARY_CHILDREN = '_$children_'
 const TEMPORARY_SHOW = '_$show_'
 const ROWKEY_MAP = new WeakMap()
 const TOTALROWS_MAP = new WeakMap()
 const CHART_MAP = new WeakMap()
+const VIRTUAL_ROW_KEY = '_$virtual_'
 
 let rowUniqueId = 0
 
@@ -116,18 +121,21 @@ const sliceTreeData = (_vm) => {
 }
 
 const sliceFullData = (_vm) => {
-  let { afterFullData, scrollYLoad, scrollYStore, treeConfig } = _vm
+  let { afterFullData, scrollYLoad, scrollYStore, treeConfig, hasVirtualRow, groupFullData } = _vm
   let { renderSize, startIndex } = scrollYStore
   let result
+  let fullData
+  // 分组表场景使用groupFullData
+  fullData = hasVirtualRow ? groupFullData : afterFullData
 
   if (scrollYLoad) {
     if (treeConfig) {
       result = sliceTreeData(_vm)
     } else {
-      result = afterFullData.slice(startIndex, startIndex + renderSize)
+      result = fullData.slice(startIndex, startIndex + renderSize)
     }
   } else {
-    result = afterFullData.slice(0)
+    result = fullData.slice(0)
   }
 
   return result
@@ -145,7 +153,7 @@ const setTotalRows = (_vm) => {
 }
 
 const getTotalRows = (_vm) => {
-  const { afterFullData, scrollYLoad, scrollLoad, treeConfig } = _vm
+  const { afterFullData, scrollYLoad, scrollLoad, treeConfig, hasVirtualRow, groupFullData } = _vm
   let totalRows = afterFullData.length
 
   if (scrollYLoad && treeConfig) {
@@ -159,6 +167,9 @@ const getTotalRows = (_vm) => {
   // 滚动分页场景总行数由（afterFullData.length）调整为（scrollLoad.pageSize），解决最后一页数据不足时滚动条位置改变问题
   if (scrollLoad) {
     totalRows = scrollLoad.pageSize || 10
+  } // 分组表场景使用groupFullData.length
+  if (hasVirtualRow) {
+    totalRows = groupFullData.length
   }
 
   return totalRows
@@ -244,7 +255,12 @@ const clearOnTableUnmount = ($table) => {
   removeSliceColumnTree($table)
 }
 
-const setCacheChartMap = (_vm) => CHART_MAP.set(_vm, buildChart(_vm))
+const setCacheChartMap = (_vm) => {
+  // 重建树表虚滚数据之前，清除_subTree保证新数据能正常重建，滚动不会报错
+  if (_vm._subTree) _vm._subTree = null
+
+  CHART_MAP.set(_vm, buildChart(_vm))
+}
 
 const getCacheChartMap = (_vm) => CHART_MAP.get(_vm)
 
@@ -367,6 +383,111 @@ const sliceColumnTree = (_vm) => {
 
 const setSliceColumnTree = (_vm) => _vm.isGroup && (_vm._sliceColumnTree = sliceColumnTree(_vm))
 
+/** 判断是否是虚拟行 */
+const isVirtualRow = (row) => row && row[VIRTUAL_ROW_KEY]
+
+/** 普通表分组场景，按数据顺序对数据进行分组 */
+const orderingGroupBy = (arr, key, equals, active, rowKey) => {
+  const result = []
+  const virtualItems = []
+  // 虚拟行id计数
+  let virtualRowId = 0
+  const createVirtualItem = (vItem) => {
+    vItem = {
+      [VIRTUAL_ROW_KEY]: true,
+      [rowKey]: `row_g_${++virtualRowId}`,
+      value: null,
+      children: [],
+      fold: false,
+      hover: false
+    }
+    result.push(vItem)
+    virtualItems.push(vItem)
+    return vItem
+  }
+
+  let virtualItem = createVirtualItem()
+  let prevSibling, equalsParam
+
+  arrayEach(arr, (item, i) => {
+    if (i > 0) {
+      prevSibling = arr[i - 1]
+      equalsParam = { prevRow: prevSibling, row: item }
+    }
+    // 如果当前行和前一行分组字段不相同，就创建一个新的虚拟行
+    if (i > 0 && !equals(prevSibling[key], item[key], equalsParam)) {
+      virtualItem = createVirtualItem()
+    }
+
+    virtualItem.children.push(item)
+    result.push(item)
+  })
+
+  arrayEach(virtualItems, (vItem) => {
+    vItem.value = vItem.children[0][key]
+    // 设置虚拟行的展开状态
+    if (typeof active === 'function') {
+      const expand = active(vItem)
+      vItem.fold = typeof expand === 'boolean' ? !expand : false
+    }
+  })
+
+  const rawResult = result.map(toRaw)
+
+  arrayEach(virtualItems.slice().reverse(), (vItem) => {
+    if (!vItem.fold) return
+
+    // 如果合起，对分组数据进行移除
+    const index = rawResult.indexOf(toRaw(vItem.children[0]))
+
+    if (index > -1) {
+      result.splice(index, vItem.children.length)
+    }
+  })
+
+  return result
+}
+
+/** 普通表分组场景，在全量数据筛选排序之后，进行分组处理生成虚拟行 */
+const buildRowGroupFullData = (fullData, _vm) => {
+  const { treeConfig, rowGroup } = _vm
+  const { field, equals, activeMethod } = rowGroup || {}
+
+  // 是否具有虚拟行：非树表（普通表），分组表，存在数据
+  _vm.hasVirtualRow = !treeConfig && rowGroup && field && fullData.length > 0
+
+  if (_vm.hasVirtualRow) {
+    // 在配置满足条件时，进行分组构建
+    _vm.groupFullData = orderingGroupBy(fullData, field, equals || isEqual, activeMethod, getTableRowKey(_vm))
+  }
+}
+
+/** 普通表分组场景，分组行点击处理 */
+const handleRowGroupFold = (row, _vm) => {
+  const { hasVirtualRow, groupFullData, rowGroup = {} } = _vm
+  const { closeable = true } = rowGroup
+
+  if (!hasVirtualRow || !closeable || !isVirtualRow(row)) return
+
+  row.fold = !row.fold
+
+  const copy = groupFullData.slice(0).map(toRaw)
+  const index = copy.indexOf(toRaw(row.children[0]))
+
+  if (row.fold) {
+    if (index > -1) {
+      // 如果被合起且子列在 groupFullData 内就进行移除
+      copy.splice(index, row.children.length)
+    }
+  } else if (index === -1) {
+    // 如果被展开且子列不在 groupFullData 内就进行添加
+    copy.splice(copy.indexOf(toRaw(row)) + 1, 0, ...row.children)
+  }
+
+  _vm.groupFullData = copy
+  _vm.handleTableData().then(_vm.recalculate)
+}
+
 export {
   clearOnTableUnmount,
   getRowUniqueId,
@@ -379,5 +500,8 @@ export {
   setTableRowKey,
   sliceFullData,
   sliceVisibleColumn,
-  setSliceColumnTree
+  setSliceColumnTree,
+  buildRowGroupFullData,
+  handleRowGroupFold,
+  isVirtualRow
 }
diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts
index 02bcc1937d..7034b7de05 100644
--- a/packages/vue/src/grid/src/table/src/table.ts
+++ b/packages/vue/src/grid/src/table/src/table.ts
@@ -22,12 +22,12 @@
  * SOFTWARE.
  *
  */
-import { h, hooks, $prefix, resolveTheme, defineComponent } from '@opentiny/vue-common'
+import { h, hooks, $prefix, resolveTheme, defineComponent, useInstanceSlots, useRelation } from '@opentiny/vue-common'
 import Tooltip from '@opentiny/vue-tooltip'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { isEmptyObject, isObject, isNull } from '@opentiny/vue-renderless/common/type'
 import { uniqueId, template, toNumber, isBoolean } from '@opentiny/vue-renderless/grid/static/'
-import { getRowkey, GlobalEvent, hasChildrenList, getListeners } from '@opentiny/vue-renderless/grid/utils'
+import { getRowkey, GlobalEvent, hasChildrenList, getListeners, isScale } from '@opentiny/vue-renderless/grid/utils'
 import TINYGrid from '../../adapter'
 import GridHeader from '../../header'
 import GridFooter from '../../footer'
@@ -40,12 +40,15 @@ import GlobalConfig from '../../config'
 import { error } from '../../tools'
 import { clearOnTableUnmount } from './strategy'
 import MfTable from '../../mobile-first/index.vue'
+import { useDrag, useRowGroup } from '../../composable'
 
-const { themes, viewConfig } = GlobalConfig
+const { themes, viewConfig, columnLevelKey, defaultColumnName } = GlobalConfig
 const { TINY: T_TINY, SAAS: T_SAAS } = themes
 const { DEFAULT: V_DEFAULT, MF: V_MF, CARD: V_CARD, LIST: V_LIST } = viewConfig
 const { MF_SHOW_LIST: V_MF_LIST } = viewConfig
 
+const hiddenContainerClass = 'tiny-grid-hidden-column'
+
 // 校验插件是否被注册
 function verifyConfig(_vm) {
   if (!getRowkey(_vm)) {
@@ -102,19 +105,6 @@ function mergeTreeConfig(_vm) {
   }
 }
 
-function initDrop(_vm) {
-  const dropConfig = _vm.dropConfig
-
-  if (dropConfig) {
-    const { plugin, column = true, row = true } = dropConfig
-
-    if (plugin) {
-      column && _vm.columnDrop()
-      row && _vm.rowDrop()
-    }
-  }
-}
-
 const renderEmptyPartFn = (opt) => {
   const { _vm, tableData, $slots, renderEmpty } = opt
   return () => {
@@ -327,11 +317,11 @@ const renderFooterBorder = (_vm) => {
 }
 
 // 设置表格最外层元素类名
-function getTableAttrs(args) {
-  const { vSize, editConfig, showHeader, showFooter, overflowY, overflowX, showOverflow } = args
-  const { showHeaderOverflow, highlightCell, optimizeOpts, stripe, border, isGroup, mouseConfig } = args
-  const { loading, highlightHoverRow, highlightHoverColumn, validOpts } = args
-  const { stripeSaas, borderSaas, borderVertical, isThemeSaas } = args
+function getTableAttrs(tableVm) {
+  const { vSize, editConfig, showHeader, showFooter, overflowY, overflowX, showOverflow } = tableVm
+  const { showHeaderOverflow, highlightCell, optimizeOpts, stripe, border, isGroup, mouseConfig = {} } = tableVm
+  const { maxHeight, loading, highlightHoverRow, highlightHoverColumn, validOpts } = tableVm
+  const { stripeSaas, borderSaas, borderVertical, isThemeSaas, rowSpan, dropConfig = {} } = tableVm
 
   const map = {
     showHeader: 'show__head',
@@ -343,6 +333,12 @@ function getTableAttrs(args) {
     highlightHoverColumn: 'column__highlight'
   }
 
+  const style = {}
+
+  if (maxHeight) {
+    style.maxHeight = isScale(maxHeight) ? maxHeight : toNumber(maxHeight) + 'px'
+  }
+
   return {
     class: {
       'tiny-grid h-full sm:h-auto !bg-transparent sm:!bg-color-bg-1 after:border-none sm:after:border-solid': true,
@@ -368,16 +364,17 @@ function getTableAttrs(args) {
       'edit__no-border': editConfig && editConfig.showBorder === false,
       [map.loading]: loading,
       [map.highlightHoverRow]: highlightHoverRow,
-      [map.highlightHoverColumn]: highlightHoverColumn
-    }
+      [map.highlightHoverColumn]: highlightHoverColumn,
+      'is__row-span': rowSpan && rowSpan.length > 0,
+      'row__drop-handle--index': dropConfig.rowHandle === 'index'
+    },
+    style
   }
 }
 
 const gridData = {
   // 存储异步加载过的行\列数据
   asyncRenderMap: {},
-  // 列分组配置
-  collectColumn: [],
   // 存放列相关的信息
   columnStore: {
     // 自适应的列表集合
@@ -438,8 +435,6 @@ const gridData = {
   },
   // 表尾合计数据
   footerData: [],
-  groupData: {},
-  groupFolds: [],
   // 所有列已禁用
   headerCheckDisabled: false,
   // 是否全选
@@ -469,12 +464,8 @@ const gridData = {
   },
   // 多选属性，已选中的列
   selection: [],
-  // 渲染的列
-  tableColumn: [],
   // 渲染中的数据
   tableData: [],
-  // 完整所有列
-  tableFullColumn: [],
   // tooltip提示内容
   tooltipContent: '',
   // tooltip提示内容是否处理换行字符
@@ -496,8 +487,6 @@ const gridData = {
   validTipContent: '',
   // 在编辑模式下 单元格在失去焦点验证的状态
   validatedMap: {},
-  // 需要显示的列 （横向开启虚拟滚动的时候表示需要渲染的列，并不是真正被内部v-for循环的列）
-  visibleColumn: [],
   // 表尾边框线是否显示和位置
   showFooterBorder: false,
   footerBorderBottom: 0,
@@ -509,6 +498,8 @@ const getTableData = () => {
   const tableData = {
     // 条件处理后数据
     afterFullData: [],
+    // 分组表场景全量数据（包含虚拟行）
+    groupFullData: [],
     elemStore: {},
     // 表尾高度
     footerHeight: 0,
@@ -553,7 +544,13 @@ const getTableData = () => {
     // 列初始就绪
     isColumnInitReady: false,
     // 列就绪
-    isColumnReady: false
+    isColumnReady: false,
+    // 分组表场景是否具有虚拟行
+    hasVirtualRow: false,
+    // 是否是标签式用法场景
+    isTagUsageSence: false,
+    // 收集列信息（列数量和列顺序）
+    columnCollectKey: ''
   }
   return tableData
 }
@@ -766,7 +763,11 @@ export default defineComponent({
     // 操作列（type为index或radio或selection的列）是否可拖动列宽
     operationColumnResizable: { type: Boolean, default: () => GlobalConfig.operationColumnResizable },
     // 自动清空鼠标选中
-    autoClearMouseChecked: { type: Boolean, default: true }
+    autoClearMouseChecked: { type: Boolean, default: true },
+    // 自动清空键盘复制
+    autoClearKeyboardCopy: { type: Boolean, default: false },
+    // 自定义列组件名称（列表）
+    customColumnNames: { type: [String, Array], default: GlobalConfig.defaultColumnName }
   },
   provide() {
     return {
@@ -781,7 +782,7 @@ export default defineComponent({
     }
   },
   data() {
-    return extend(true, { id: uniqueId() }, gridData)
+    return extend(true, {}, gridData)
   },
   computed: {
     bodyCtxMenu() {
@@ -877,6 +878,24 @@ export default defineComponent({
     isShapeTable() {
       // 表格处于默认视图或mf视图大屏时显示为普通表格；其它视图都显示为多端形式
       return this.isViewDefault || (this.viewType === V_MF && this.$grid.currentBreakpoint !== 'default')
+    },
+    columnNames() {
+      const { customColumnNames } = this
+      const columnNames = [defaultColumnName]
+
+      const pushIfNot = (columnName) => {
+        if (typeof columnName === 'string' && !columnNames.includes(columnName)) {
+          columnNames.push(columnName)
+        }
+      }
+
+      if (Array.isArray(customColumnNames) && customColumnNames.length > 0) {
+        customColumnNames.forEach(pushIfNot)
+      } else if (typeof customColumnNames === 'string') {
+        pushIfNot(customColumnNames)
+      }
+
+      return columnNames
     }
   },
   watch: {
@@ -927,9 +946,6 @@ export default defineComponent({
     // 合并树表配置项
     mergeTreeConfig(this)
 
-    // 处理拖拽的逻辑
-    initDrop(this)
-
     bindEvent(this)
 
     // vue3下额外监控数组长度改变，解决push无响应等问题
@@ -973,13 +989,42 @@ export default defineComponent({
   },
   setup(props, context) {
     const { slots, attrs, listeners } = context
-    const table = hooks.getCurrentInstance().proxy
+    const id = hooks.ref(uniqueId())
+    // 列分组配置
+    const collectColumn = hooks.ref([])
+    // 完整所有列
+    const tableFullColumn = hooks.ref([])
+    // 显示的列
+    const visibleColumn = hooks.ref([])
+    // 渲染的列
+    const tableColumn = hooks.ref([])
 
     // TINY主题变量
     const tinyTheme = hooks.ref(resolveTheme(props, context))
+    const $table = hooks.getCurrentInstance().proxy
+
+    useInstanceSlots()
+
+    useRelation({
+      relationKey: `${columnLevelKey}-${id.value}`,
+      childrenKey: 'childColumns',
+      relationContainer: () => $table.$el.querySelector(`.${hiddenContainerClass}`),
+      onChange: () => {
+        const collectKey = $table.computeCollectKey()
+
+        if (collectKey !== $table.columnCollectKey) {
+          $table.columnCollectKey = collectKey
+          $table.assembleColumns()
+        }
+      }
+    })
+
+    useDrag({ dropConfig: hooks.toRef(props, 'dropConfig'), collectColumn, tableColumn })
+
+    useRowGroup({ rowGroup: hooks.toRef(props, 'rowGroup'), visibleColumn, tableFullColumn, tableColumn })
 
     hooks.onBeforeUnmount(() => {
-      const { elemStore, $refs } = table
+      const { elemStore, $refs } = $table
       const containerList = ['main', 'left', 'right']
       const tableWrapper = $refs.tableWrapper
 
@@ -988,15 +1033,11 @@ export default defineComponent({
       }
 
       if (TINYGrid._resize) {
-        table.unbindResize()
+        $table.unbindResize()
       }
 
-      table.closeFilter()
-      table.closeMenu()
-
-      // 清除 拖动相关的引用
-      table.columnSortable && table.columnSortable.destroy()
-      table.rowSortable && table.rowSortable.destroy()
+      $table.closeFilter()
+      $table.closeMenu()
 
       containerList.forEach((layout) => {
         const ySpaceElem = elemStore[`${layout}-body-ySpace`]
@@ -1006,22 +1047,34 @@ export default defineComponent({
         }
       })
 
-      unbindEvent(table)
-      clearOnTableUnmount(table)
+      unbindEvent($table)
+      clearOnTableUnmount($table)
     })
 
     hooks.onDeactivated(() => {
-      unbindEvent(table)
+      unbindEvent($table)
     })
 
+    useInstanceSlots()
+
     const tableListeners = getListeners(attrs, listeners)
 
-    return { slots, tableListeners, tinyTheme }
+    return { slots, tableListeners, tinyTheme, id, collectColumn, tableFullColumn, visibleColumn, tableColumn }
   },
   render() {
-    let { border, collectColumn, columnStore, editConfig, highlightCell, highlightHoverColumn } = this as any
+    let { border, collectColumn, columnStore, editConfig, highlightCell, highlightHoverColumn, instanceSlots } =
+      this as any
     let { highlightHoverRow, isGroup, loading, loadingComponent, mouseConfig = {}, optimizeOpts } = this as any
-    let { overflowX, overflowY, showFooter, showHeader, showHeaderOverflow, showOverflow, isThemeSaas } = this as any
+    let {
+      overflowX,
+      overflowY,
+      showFooter,
+      showHeader,
+      showHeaderOverflow,
+      showOverflow,
+      dropConfig = {},
+      isThemeSaas
+    } = this as any
     let {
       stripe,
       tableColumn,
@@ -1030,10 +1083,10 @@ export default defineComponent({
       vSize,
       visibleColumn,
       slots,
-      $slots,
       stripeSaas,
       borderSaas,
-      isShapeTable
+      isShapeTable,
+      rowSpan
     } = this as any
     let { borderVertical, cardConfig, listConfig, ganttConfig } = this
     let { leftList, rightList } = columnStore
@@ -1047,17 +1100,12 @@ export default defineComponent({
     const { renderHeader, renderEmptyPart, renderFooter } = renders
     const { renderResizeBar, renderPluginWrapper, renderSelectToolbar } = renders
 
-    args = { vSize, editConfig, showHeader, showFooter, overflowY, overflowX, showOverflow }
-    Object.assign(args, { showHeaderOverflow, highlightCell, optimizeOpts, stripe, border, isGroup, mouseConfig })
-    Object.assign(args, { loading, highlightHoverRow, highlightHoverColumn, validOpts })
-    Object.assign(args, { stripeSaas, borderSaas, borderVertical, isThemeSaas })
-
-    return h('div', getTableAttrs(args), [
+    return h('div', getTableAttrs(this), [
       // 隐藏列
       h(
         'div',
         { class: 'tiny-grid-hidden-column', ref: 'hideColumn' },
-        typeof $slots.default === 'function' ? $slots.default() : $slots.default
+        instanceSlots.default && instanceSlots.default()
       ),
       // 主头部
       renderHeader(),
diff --git a/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts b/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts
index da59de927d..cf9144691f 100644
--- a/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts
+++ b/packages/vue/src/grid/src/table/src/utils/computeScrollLoad.ts
@@ -59,11 +59,26 @@ export function computeScrollYLoad({ _vm, scrollLoad, scrollY, scrollYLoad, scro
 
 export function computeScrollXLoad({ _vm, scrollX, scrollXLoad, scrollXStore, tableBodyElem, visibleColumn }) {
   if (scrollXLoad) {
-    let firstColumn = visibleColumn[0]
-    // 获取x轴虚拟滚动每列宽度
-    let cWidth = firstColumn ? firstColumn.renderWidth : 40
-    // 获取每次需要渲染的列数
-    let visibleXSize = toNumber(scrollX.vSize || Math.ceil(tableBodyElem.clientWidth / cWidth))
+    /**
+     * 使用 “列渲染宽度累加方式” 优化默认 visibleSize 的计算，
+     * 旧的使用总宽度除以第一列宽度方式，会出现 visibleSize 很大出现渲染空白问题。
+     */
+    const clientWidth = tableBodyElem.clientWidth
+    let width = 0
+    let visibleXSize = 0
+
+    for (let i = 0; i < visibleColumn.length; i++) {
+      const column = visibleColumn[i]
+
+      width += column.renderWidth
+
+      if (width > clientWidth) {
+        visibleXSize = i + 1
+        break
+      }
+    }
+
+    visibleXSize = toNumber(scrollX.vSize || visibleXSize)
 
     scrollXStore.visibleSize = visibleXSize
     // 自动优化
diff --git a/packages/vue/src/grid/src/toolbar/src/methods.ts b/packages/vue/src/grid/src/toolbar/src/methods.ts
index 72ce223557..4e14676517 100644
--- a/packages/vue/src/grid/src/toolbar/src/methods.ts
+++ b/packages/vue/src/grid/src/toolbar/src/methods.ts
@@ -82,7 +82,8 @@ export default {
         res = h(hooks.toRaw(toolbar.component), {
           ref: 'toolbar',
           props: { loading: loading || tableLoading, ...toolbar },
-          class: _vm.viewCls('toolbar')
+          class: _vm.viewCls('toolbar'),
+          scopedSlots: toolbar.slots || {}
         })
       }
 
diff --git a/packages/vue/src/grid/src/tools/index.ts b/packages/vue/src/grid/src/tools/index.ts
index 90e6f93c65..d332269ade 100644
--- a/packages/vue/src/grid/src/tools/index.ts
+++ b/packages/vue/src/grid/src/tools/index.ts
@@ -27,6 +27,8 @@ import { getCellValue } from '@opentiny/vue-renderless/grid/utils'
 import Formatter from './formatter'
 import GlobalConfig from '../config'
 
+export { Formatter }
+
 export { warn, error } from './logger'
 
 function getRenderType({ editor, formatConfig, formatText }) {
diff --git a/packages/vue/src/grid/src/tools/logger.ts b/packages/vue/src/grid/src/tools/logger.ts
index 0beb9acf12..58a7478435 100644
--- a/packages/vue/src/grid/src/tools/logger.ts
+++ b/packages/vue/src/grid/src/tools/logger.ts
@@ -1,9 +1,13 @@
 import { log } from '@opentiny/vue-renderless/common'
 import GlobalConfig from '../config'
 
-const outLog = (type) => (message) => {
+const outLog = (type) => (message, detail) => {
   let msg = `[tiny-grid] ${GlobalConfig.i18n(message) || message}`
 
+  if (detail) {
+    msg += `: ${detail}`
+  }
+
   log(msg, type)
 
   return msg
diff --git a/packages/vue/src/grid/src/tooltip/src/methods.ts b/packages/vue/src/grid/src/tooltip/src/methods.ts
index f782399a93..ba37f16591 100644
--- a/packages/vue/src/grid/src/tooltip/src/methods.ts
+++ b/packages/vue/src/grid/src/tooltip/src/methods.ts
@@ -39,8 +39,8 @@ export default {
       ? event.currentTarget.querySelector('.tiny-grid-cell-text')
       : event.currentTarget.querySelector('.tiny-grid-cell')
 
-    // 当用户悬浮在排序或者筛选图标按钮时不应该显示tooltip
-    if (isHeader && event.target !== cell) {
+    // 当用户悬浮在排序或者筛选图标按钮时不应该显示tooltip，使用头部插槽且文本超长时也应该显示
+    if (isHeader && event.target !== cell && !cell?.contains(event.target)) {
       return
     }
     const tooltip = this.$refs.tooltip
diff --git a/packages/vue/src/guide/package.json b/packages/vue/src/guide/package.json
index fe522d2def..85443fb211 100644
--- a/packages/vue/src/guide/package.json
+++ b/packages/vue/src/guide/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-guide",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/hrapprover/package.json b/packages/vue/src/hrapprover/package.json
index f70c49a454..4a26ecf057 100644
--- a/packages/vue/src/hrapprover/package.json
+++ b/packages/vue/src/hrapprover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-hrapprover",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/image-viewer/package.json b/packages/vue/src/image-viewer/package.json
index 50cf9e6582..f9d830fb02 100644
--- a/packages/vue/src/image-viewer/package.json
+++ b/packages/vue/src/image-viewer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-image-viewer",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/image-viewer/src/mobile-first.vue b/packages/vue/src/image-viewer/src/mobile-first.vue
index 4d946fdff7..836e6df8e5 100644
--- a/packages/vue/src/image-viewer/src/mobile-first.vue
+++ b/packages/vue/src/image-viewer/src/mobile-first.vue
@@ -243,42 +243,38 @@
                 transform: 'translateX(' + state.imageTransformSize + 'px)'
               }"
             >
-              <template>
+              <div
+                data-tag="tiny-image-mobile-viewer-item"
+                class="relative shrink h-full"
+                ref="viewerItem"
+                v-for="(url, i) in urlList"
+                :key="i"
+                :style="Object.assign({ width: `${state.imageItemWidth}px` }, i === state.index ? state.imgStyle : '')"
+              >
                 <div
-                  data-tag="tiny-image-mobile-viewer-item"
-                  class="relative shrink h-full"
-                  ref="viewerItem"
-                  v-for="(url, i) in urlList"
-                  :key="i"
-                  :style="
-                    Object.assign({ width: `${state.imageItemWidth}px` }, i === state.index ? state.imgStyle : '')
-                  "
+                  class="absolute top-0 left-0 right-0 bottom-0 text-center transition-transform inline-block duration-300"
                 >
-                  <div
-                    class="absolute top-0 left-0 right-0 bottom-0 text-center transition-transform inline-block duration-300"
-                  >
-                    <img
-                      v-if="i === state.index"
-                      :key="i"
-                      :class="[
-                        'block w-full h-full object-contain',
-                        {
-                          'object-fill': state.fullScreen
-                        }
-                      ]"
-                      :ref="`img_${i}`"
-                      :src="state.currentImg"
-                      :style="state.imgStyle"
-                      @mousedown="handleMouseDown"
-                      @error="handleImgError"
-                      @load="handleImgLoad"
-                      @touchstart="touchstart"
-                      @touchmove="touchmove"
-                      @touchend="touchend"
-                    />
-                  </div>
+                  <img
+                    v-if="i === state.index"
+                    :key="i"
+                    :class="[
+                      'block w-full h-full object-contain',
+                      {
+                        'object-fill': state.fullScreen
+                      }
+                    ]"
+                    :ref="`img_${i}`"
+                    :src="state.currentImg"
+                    :style="state.imgStyle"
+                    @mousedown="handleMouseDown"
+                    @error="handleImgError"
+                    @load="handleImgLoad"
+                    @touchstart="touchstart"
+                    @touchmove="touchmove"
+                    @touchend="touchend"
+                  />
                 </div>
-              </template>
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/vue/src/image/package.json b/packages/vue/src/image/package.json
index 3f74bffb4f..c5dcdb68f3 100644
--- a/packages/vue/src/image/package.json
+++ b/packages/vue/src/image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-image",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/index-bar-anchor/package.json b/packages/vue/src/index-bar-anchor/package.json
index 7bd1ab4e4b..d573fa52b4 100644
--- a/packages/vue/src/index-bar-anchor/package.json
+++ b/packages/vue/src/index-bar-anchor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-index-bar-anchor",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/index-bar/package.json b/packages/vue/src/index-bar/package.json
index 9f35a91938..6a39c224c4 100644
--- a/packages/vue/src/index-bar/package.json
+++ b/packages/vue/src/index-bar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-index-bar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/input/package.json b/packages/vue/src/input/package.json
index 76eb876695..dae3534d6e 100644
--- a/packages/vue/src/input/package.json
+++ b/packages/vue/src/input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-input",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,6 +19,8 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-tooltip": "workspace:~",
+    "@opentiny/vue-button": "workspace:~",
+    "@opentiny/vue-dialog-box": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
diff --git a/packages/vue/src/input/src/index.ts b/packages/vue/src/input/src/index.ts
index 857bb88675..bb75a4e935 100644
--- a/packages/vue/src/input/src/index.ts
+++ b/packages/vue/src/input/src/index.ts
@@ -118,6 +118,10 @@ export const inputProps = {
     type: Boolean,
     default: true
   },
+  popupMore: {
+    type: Boolean,
+    default: false
+  },
   // mobile特有属性
   textareaTitle: {
     type: String,
diff --git a/packages/vue/src/input/src/mobile-first.vue b/packages/vue/src/input/src/mobile-first.vue
index 5431be6c89..63329d031e 100644
--- a/packages/vue/src/input/src/mobile-first.vue
+++ b/packages/vue/src/input/src/mobile-first.vue
@@ -36,7 +36,7 @@
         <slot name="prepend"></slot>
       </div>
       <span
-        class="relative text-sm"
+        class="relative text-sm block"
         :class="[state.inputSizeMf !== 'mini' ? 'sm:text-sm' : 'sm:text-xs']"
         data-tag="tiny-input-display-only"
       >
@@ -46,6 +46,7 @@
           :content="state.displayOnlyTooltip"
           :display="type === 'password'"
           placement="top"
+          :popper-class="state.tooltipConfig.popperClass || ''"
           :popper-options="{ bubbling: true }"
           @mouseenter.native="handleEnterDisplayOnlyContent"
         >
@@ -266,30 +267,69 @@
         <slot name="panel"></slot>
       </div>
     </template>
-    <span v-else data-tag="tiny-input-textarea">
+
+    <span
+      v-else
+      data-tag="tiny-input-textarea"
+      :class="[hoverExpand && 'relative block h-7 w-full', state.isDisplayOnly && hoverExpand && 'h-auto']"
+    >
       <tiny-tooltip
         v-if="state.isDisplayOnly"
         effect="light"
         :content="state.displayOnlyTooltip"
         placement="top"
+        :popper-class="state.tooltipConfig.popperClass || ''"
         :popper-options="{ bubbling: true }"
         @mouseenter.native="handleEnterDisplayOnlyContent($event, 'textarea')"
       >
-        <span
-          class="max-w-full text-ellipsis break-words line-clamp-5 text-sm pt-1.5 text-color-text-primary"
-          :class="[state.inputSizeMf !== 'mini' ? 'sm:text-sm' : 'sm:text-xs']"
-          >{{ state.displayOnlyText }}</span
-        >
+        <div class="flex">
+          <span
+            ref="textBox"
+            class="text-box max-w-full break-words line-clamp-5 text-sm text-color-text-primary before:content-[''] before:float-right before:h-full before:-mb-4"
+            :class="[
+              state.inputSizeMf !== 'mini' ? 'sm:text-sm' : 'sm:text-xs',
+              hoverExpand && 'relative left-0 max-w-full leading-normal line-clamp-1',
+              autosize
+                ? 'left-0 max-w-full absolute break-words  whitespace-pre-line leading-normal'
+                : 'left-0 max-w-full text-ellipsis overflow-hidden break-words whitespace-pre-wrap line-clamp-5'
+            ]"
+            @click="state.showDisplayOnlyBox = true"
+          >
+            <span
+              v-if="state.showMoreBtn"
+              class="float-right relative top-px clear-both text-color-brand text-sm leading-3 cursor-pointer"
+              >{{ t('ui.input.more') }}></span
+            >
+            {{ state.displayOnlyText }}
+          </span>
+        </div>
       </tiny-tooltip>
+      <tiny-dialog-box
+        :title="t('ui.input.detail')"
+        v-if="state.isDisplayOnly && popupMore"
+        width="1000px"
+        :visible="state.showDisplayOnlyBox"
+        :append-to-body="true"
+        :close-on-click-modal="false"
+        @update:visible="state.showDisplayOnlyBox = $event"
+      >
+        <div>{{ state.displayOnlyText }}</div>
+        <template #footer>
+          <tiny-button @click="state.showDisplayOnlyBox = false">{{ t('ui.input.close') }}</tiny-button>
+        </template>
+      </tiny-dialog-box>
       <textarea
         ref="textarea"
         v-bind="a($attrs, ['type', 'class', 'style', '^on[A-Z]'])"
         :tabindex="tabindex"
-        class="block w-full border-0 sm:border-solid sm:border-color-border sm:hover:border-color-border-hover sm:focus:border-color-brand-focus sm:disabled:border-color-border-separator outline-0 rounded placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-secondary sm:disabled:bg-color-bg-6 leading-normal"
+        class="block w-full border-0 sm:border-solid sm:border-color-border sm:hover:border-color-border-hover sm:focus:border-color-brand-focus sm:disabled:border-color-border-separator outline-0 rounded placeholder:text-color-text-placeholder placeholder:text-sm sm:disabled:placeholder:text-color-text-disabled text-sm text-color-text-primary bg-color-bg-1 disabled:cursor-not-allowed disabled:text-color-text-disabled sm:disabled:text-color-text-secondary sm:disabled:bg-color-bg-6"
         :class="[
-          readonly ? 'sm:border-0 px-0 py-0' : 'sm:border px-3 py-2',
+          readonly ? 'sm:border-0 px-0 py-0' : 'sm:border px-3 ',
           state.isDisplayOnly ? 'hidden' : '',
-          state.inputSizeMf !== 'mini' ? 'sm:placeholder:text-sm sm:text-sm' : 'sm:placeholder:text-xs sm:text-xs'
+          state.inputSizeMf !== 'mini' ? 'sm:placeholder:text-sm sm:text-sm' : 'sm:placeholder:text-xs sm:text-xs',
+          hoverExpand && 'min-w-40 absolute h-7 z-[2000] top-0 left-0',
+          hoverExpand && state.enteredTextarea ? 'py-2 leading-normal' : 'py-0 leading-[1.625rem]',
+          hoverExpand && !state.enteredTextarea && 'min-h-7 px-2 leading-7 overflow-hidden'
         ]"
         @compositionstart="handleCompositionStart"
         @compositionupdate="handleCompositionUpdate"
@@ -303,6 +343,8 @@
         @focus="handleFocus"
         @blur="handleBlur"
         @change="handleChange"
+        @mouseenter="handleEnterTextarea($event)"
+        @mouseleave="handleLeaveTextarea($event)"
         :aria-label="label"
       >
       </textarea>
@@ -323,6 +365,8 @@ import { props, setup, defineComponent } from '@opentiny/vue-common'
 import TinyTallStorage from './tall-storage.vue'
 import { IconError, IconEyeopen, IconEyeclose, IconClose } from '@opentiny/vue-icon'
 import TinyTooltip from '@opentiny/vue-tooltip'
+import TinyButton from '@opentiny/vue-button'
+import TinyDialogBox from '@opentiny/vue-dialog-box'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -346,7 +390,9 @@ export default defineComponent({
     IconEyeopen: IconEyeopen(),
     IconEyeclose: IconEyeclose(),
     TinyTallStorage,
-    TinyTooltip
+    TinyTooltip,
+    TinyButton,
+    TinyDialogBox
   },
 
   props: [
@@ -375,7 +421,10 @@ export default defineComponent({
     'customClass',
     'displayOnly',
     'displayOnlyContent',
-    'showEmptyValue'
+    'showEmptyValue',
+    'popupMore',
+    'frontClearIcon',
+    'hoverExpand'
   ],
   setup(props, context): any {
     return setup({ props, context, renderless, api })
diff --git a/packages/vue/src/input/src/pc.vue b/packages/vue/src/input/src/pc.vue
index eb10ce4879..865875b136 100644
--- a/packages/vue/src/input/src/pc.vue
+++ b/packages/vue/src/input/src/pc.vue
@@ -54,6 +54,7 @@
           :content="state.displayOnlyTooltip"
           :display="type === 'password'"
           placement="top"
+          :popper-class="state.tooltipConfig.popperClass || ''"
           @mouseenter.native="handleEnterDisplayOnlyContent"
         >
           <span class="tiny-input-display-only__content" v-if="type === 'password'">{{ state.hiddenPassword }}</span>
@@ -176,10 +177,30 @@
         effect="light"
         :content="state.displayOnlyTooltip"
         placement="top"
+        :popper-class="state.tooltipConfig.popperClass || ''"
         @mouseenter.native="handleEnterDisplayOnlyContent($event, 'textarea')"
       >
-        <span class="tiny-textarea-display-only__content">{{ state.displayOnlyText }}</span>
+        <div class="tiny-textarea-display-only__wrap">
+          <span ref="textBox" class="tiny-textarea-display-only__content text-box">
+            <span v-if="state.showMoreBtn" @click="state.showDisplayOnlyBox = true" class="more-btn"
+              >{{ t('ui.input.more') }}></span
+            >
+            {{ state.displayOnlyText }}
+          </span>
+        </div>
       </tiny-tooltip>
+      <tiny-dialog-box
+        :title="t('ui.input.detail')"
+        v-if="state.isDisplayOnly && popupMore"
+        :visible="state.showDisplayOnlyBox"
+        :append-to-body="true"
+        @update:visible="state.showDisplayOnlyBox = $event"
+      >
+        <div>{{ state.displayOnlyText }}</div>
+        <template #footer>
+          <tiny-button @click="state.showDisplayOnlyBox = false">{{ t('ui.input.close') }}</tiny-button>
+        </template>
+      </tiny-dialog-box>
       <textarea
         ref="textarea"
         v-bind="a($attrs, ['type', 'class', 'style', 'id'])"
@@ -227,6 +248,8 @@ import { props, setup, defineComponent } from '@opentiny/vue-common'
 import TinyTallStorage from './tall-storage.vue'
 import { IconClose, IconEyeopen, IconEyeclose } from '@opentiny/vue-icon'
 import Tooltip from '@opentiny/vue-tooltip'
+import TinyButton from '@opentiny/vue-button'
+import TinyDialogBox from '@opentiny/vue-dialog-box'
 import '@opentiny/vue-theme/input/index.less'
 import '@opentiny/vue-theme/textarea/index.less'
 
@@ -250,7 +273,9 @@ export default defineComponent({
     IconEyeopen: IconEyeopen(),
     IconEyeclose: IconEyeclose(),
     TinyTallStorage,
-    TinyTooltip: Tooltip
+    TinyTooltip: Tooltip,
+    TinyButton,
+    TinyDialogBox
   },
 
   props: [
@@ -281,7 +306,8 @@ export default defineComponent({
     'displayOnlyContent',
     'frontClearIcon',
     'showEmptyValue',
-    'hoverExpand'
+    'hoverExpand',
+    'popupMore'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })
diff --git a/packages/vue/src/ip-address/package.json b/packages/vue/src/ip-address/package.json
index 7339337852..9877567429 100644
--- a/packages/vue/src/ip-address/package.json
+++ b/packages/vue/src/ip-address/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-ip-address",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/label/package.json b/packages/vue/src/label/package.json
index 67b788f6d4..0d0b8d20ea 100644
--- a/packages/vue/src/label/package.json
+++ b/packages/vue/src/label/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-label",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/layout/package.json b/packages/vue/src/layout/package.json
index 308afb84f1..cc04accf29 100644
--- a/packages/vue/src/layout/package.json
+++ b/packages/vue/src/layout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-layout",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/link-menu/package.json b/packages/vue/src/link-menu/package.json
index 75e3b6f821..095c3e70ea 100644
--- a/packages/vue/src/link-menu/package.json
+++ b/packages/vue/src/link-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-link-menu",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/link/package.json b/packages/vue/src/link/package.json
index fa7426943a..813970453a 100644
--- a/packages/vue/src/link/package.json
+++ b/packages/vue/src/link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-link",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/list/package.json b/packages/vue/src/list/package.json
index 08c0d27546..55ddafa13a 100644
--- a/packages/vue/src/list/package.json
+++ b/packages/vue/src/list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-list",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/loading/package.json b/packages/vue/src/loading/package.json
index 3c2dfe57d5..821f982f47 100644
--- a/packages/vue/src/loading/package.json
+++ b/packages/vue/src/loading/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-loading",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/locales/package.json b/packages/vue/src/locales/package.json
index 4538aeff2c..001fdac0c0 100644
--- a/packages/vue/src/locales/package.json
+++ b/packages/vue/src/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-locales",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/logon-user/package.json b/packages/vue/src/logon-user/package.json
index 548b1fac22..a21c751711 100644
--- a/packages/vue/src/logon-user/package.json
+++ b/packages/vue/src/logon-user/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-logon-user",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/logout/package.json b/packages/vue/src/logout/package.json
index c5e169afe4..030a8a2718 100644
--- a/packages/vue/src/logout/package.json
+++ b/packages/vue/src/logout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-logout",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/mask/package.json b/packages/vue/src/mask/package.json
index 5dd549b7d8..d1cd36463e 100644
--- a/packages/vue/src/mask/package.json
+++ b/packages/vue/src/mask/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-mask",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/menu/package.json b/packages/vue/src/menu/package.json
index e0a1cb8c1a..e4a4999015 100644
--- a/packages/vue/src/menu/package.json
+++ b/packages/vue/src/menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-menu",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/message/package.json b/packages/vue/src/message/package.json
index 83a2607069..52b5d8d6ea 100644
--- a/packages/vue/src/message/package.json
+++ b/packages/vue/src/message/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-message",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/milestone/package.json b/packages/vue/src/milestone/package.json
index 60df54ad0d..9c8d16208f 100644
--- a/packages/vue/src/milestone/package.json
+++ b/packages/vue/src/milestone/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-milestone",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/mind-map/package.json b/packages/vue/src/mind-map/package.json
index 5a866f42ff..7f9d8bdfa6 100644
--- a/packages/vue/src/mind-map/package.json
+++ b/packages/vue/src/mind-map/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-mind-map",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/mini-picker/package.json b/packages/vue/src/mini-picker/package.json
index f46aafa83d..981f6b35dd 100644
--- a/packages/vue/src/mini-picker/package.json
+++ b/packages/vue/src/mini-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-mini-picker",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/modal/package.json b/packages/vue/src/modal/package.json
index 9545c00b92..372b64fb30 100644
--- a/packages/vue/src/modal/package.json
+++ b/packages/vue/src/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-modal",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/modal/src/index.ts b/packages/vue/src/modal/src/index.ts
index 611e810613..a1901add7e 100644
--- a/packages/vue/src/modal/src/index.ts
+++ b/packages/vue/src/modal/src/index.ts
@@ -32,7 +32,7 @@ export const $constants = {
     ERROR: 'tiny-modal-svg__error',
     LOADING: 'tiny-modal-svg__refresh roll'
   },
-  PC_SCROLL_LOCK_CLASS: 'tiny-dialog-box__scroll-lock',
+  PC_SCROLL_LOCK_CLASS: 'dialog-box__scroll-lock',
   MOBILE_FIRST_SCROLL_LOCK_CLASS: 'tiny-modal-lockscroll',
   Mode: 'pc',
   SCROLL_LOCK_CLASS(mode) {
diff --git a/packages/vue/src/modal/src/mobile-first.vue b/packages/vue/src/modal/src/mobile-first.vue
index e4c48e63cf..76488f0362 100644
--- a/packages/vue/src/modal/src/mobile-first.vue
+++ b/packages/vue/src/modal/src/mobile-first.vue
@@ -132,8 +132,8 @@ export default defineComponent({
     } = this
     let { slots: propSlots = {} } = $props
     let { zoomLocat, visible, contentVisible, modalTop, isMsg } = state
-    let defaultSlot = slots.default || propSlots.default
-    let footerSlot = slots.footer || propSlots.footer
+    let defaultSlot = slots?.default || propSlots.default
+    let footerSlot = slots?.footer || propSlots.footer
     let footerSlotParams = {
       $modal: this,
       beforeClose: this.beforeClose,
diff --git a/packages/vue/src/modal/src/pc.vue b/packages/vue/src/modal/src/pc.vue
index 0a5e7de0e1..47ef594683 100644
--- a/packages/vue/src/modal/src/pc.vue
+++ b/packages/vue/src/modal/src/pc.vue
@@ -170,7 +170,7 @@ export default defineComponent({
                       ? h(
                           'div',
                           {
-                            class: 'tiny-modal__status-wrapper'
+                            class: ['tiny-modal__status-wrapper']
                           },
                           [
                             typeof status === 'string'
@@ -272,59 +272,33 @@ export default defineComponent({
                   },
                   footerSlot
                     ? footerSlot.call(this, footerSlotParams, h)
-                    : state.theme === 'saas'
-                      ? [
-                          type === 'confirm'
-                            ? h(
-                                Button,
-                                {
-                                  on: {
-                                    click: this.cancelEvent
-                                  }
+                    : [
+                        type === 'confirm'
+                          ? h(
+                              Button,
+                              {
+                                on: {
+                                  click: this.cancelEvent
                                 },
-                                cancelContent || t('ui.button.cancel')
-                              )
-                            : null,
-                          h(
-                            Button,
-                            {
-                              props: {
-                                type: 'primary'
+                                props: { ...cancelButtonProps }
                               },
-                              on: {
-                                click: this.confirmEvent
-                              }
+                              cancelButtonText
+                            )
+                          : null,
+                        h(
+                          Button,
+                          {
+                            props: {
+                              type: 'primary',
+                              ...confirmButtonProps
                             },
-                            confirmContent || t('ui.button.confirm')
-                          )
-                        ]
-                      : [
-                          type === 'confirm'
-                            ? h(
-                                Button,
-                                {
-                                  on: {
-                                    click: this.cancelEvent
-                                  },
-                                  props: { ...cancelButtonProps }
-                                },
-                                cancelButtonText
-                              )
-                            : null,
-                          h(
-                            Button,
-                            {
-                              props: {
-                                type: 'primary',
-                                ...confirmButtonProps
-                              },
-                              on: {
-                                click: this.confirmEvent
-                              }
-                            },
-                            confirmButtonText
-                          )
-                        ]
+                            on: {
+                              click: this.confirmEvent
+                            }
+                          },
+                          confirmButtonText
+                        )
+                      ]
                 )
               : null,
             !isMsg && resize
diff --git a/packages/vue/src/month-range/package.json b/packages/vue/src/month-range/package.json
index dc0fd06d12..7ec3c3ab3b 100644
--- a/packages/vue/src/month-range/package.json
+++ b/packages/vue/src/month-range/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-month-range",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/month-table/package.json b/packages/vue/src/month-table/package.json
index 8a507664a8..c06bf2d8c6 100644
--- a/packages/vue/src/month-table/package.json
+++ b/packages/vue/src/month-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-month-table",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/multi-select-item/package.json b/packages/vue/src/multi-select-item/package.json
index 502187f7bd..088d890578 100644
--- a/packages/vue/src/multi-select-item/package.json
+++ b/packages/vue/src/multi-select-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-multi-select-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/multi-select/package.json b/packages/vue/src/multi-select/package.json
index d1eaf96afa..fad7a92bf4 100644
--- a/packages/vue/src/multi-select/package.json
+++ b/packages/vue/src/multi-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-multi-select",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/nav-bar/package.json b/packages/vue/src/nav-bar/package.json
index cb5f795173..2e01af6f11 100644
--- a/packages/vue/src/nav-bar/package.json
+++ b/packages/vue/src/nav-bar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-nav-bar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/nav-menu/package.json b/packages/vue/src/nav-menu/package.json
index 34be1741c6..1c21a1a75e 100644
--- a/packages/vue/src/nav-menu/package.json
+++ b/packages/vue/src/nav-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-nav-menu",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/notify/package.json b/packages/vue/src/notify/package.json
index 87d0ca54b6..c772ea059c 100644
--- a/packages/vue/src/notify/package.json
+++ b/packages/vue/src/notify/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-notify",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/numeric/package.json b/packages/vue/src/numeric/package.json
index 457da23e3f..ad44556c11 100644
--- a/packages/vue/src/numeric/package.json
+++ b/packages/vue/src/numeric/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-numeric",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/numeric/src/mobile-first.vue b/packages/vue/src/numeric/src/mobile-first.vue
index 4cf7e2feb6..72ba237bae 100644
--- a/packages/vue/src/numeric/src/mobile-first.vue
+++ b/packages/vue/src/numeric/src/mobile-first.vue
@@ -94,6 +94,7 @@
           @keydown.down.prevent="decrease"
           @blur="handleBlur"
           @focus="handleFocus"
+          @compositionend="handleInput"
           @input="handleInput"
           @change="handleInputChange"
         />
diff --git a/packages/vue/src/numeric/src/pc.vue b/packages/vue/src/numeric/src/pc.vue
index f14d8aa7a8..de7962b375 100644
--- a/packages/vue/src/numeric/src/pc.vue
+++ b/packages/vue/src/numeric/src/pc.vue
@@ -183,6 +183,7 @@
             @keydown.down.prevent="decrease"
             @blur="handleBlur"
             @focus="handleFocus"
+            @compositionend="handleInput"
             @input="handleInput"
             @change="handleInputChange"
           />
diff --git a/packages/vue/src/option-group/package.json b/packages/vue/src/option-group/package.json
index d2498308a1..f0211bf643 100644
--- a/packages/vue/src/option-group/package.json
+++ b/packages/vue/src/option-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-option-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/option-group/src/mobile-first.vue b/packages/vue/src/option-group/src/mobile-first.vue
index bd7b241524..de23ed5159 100644
--- a/packages/vue/src/option-group/src/mobile-first.vue
+++ b/packages/vue/src/option-group/src/mobile-first.vue
@@ -7,7 +7,7 @@
       {{ label }}
     </div>
     <div>
-      <div class="m-0 p-0">
+      <div class="m-0 p-0" ref="selectGroup">
         <slot></slot>
       </div>
     </div>
diff --git a/packages/vue/src/option/package.json b/packages/vue/src/option/package.json
index 006895987d..da014e4e50 100644
--- a/packages/vue/src/option/package.json
+++ b/packages/vue/src/option/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-option",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,7 +18,6 @@
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-checkbox": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
diff --git a/packages/vue/src/option/src/pc.vue b/packages/vue/src/option/src/pc.vue
index 6f7d4c93c1..340501cb08 100644
--- a/packages/vue/src/option/src/pc.vue
+++ b/packages/vue/src/option/src/pc.vue
@@ -19,13 +19,7 @@
     ]"
   >
     <span v-if="state.selectMultiple" class="tiny-option__checkbox-wrap tiny-select-dropdown__item-checkbox">
-      <!-- tiny 新增 tiny-checkbox -->
-      <!-- <component :is="`icon-${state.selectCls}`" class="tiny-svg-size" /> -->
-      <tiny-checkbox
-        :model-value="state.itemSelected"
-        :disabled="disabled || state.groupDisabled || state.limitReached"
-      >
-      </tiny-checkbox>
+      <component :is="`icon-${state.selectCls}`" class="tiny-svg-size" />
     </span>
     <component v-if="icon" :is="icon" class="tiny-option__icon"></component>
     <div class="tiny-option-wrapper" :class="state.selectMultiple ? 'calc-width' : 'full-width'">
@@ -44,17 +38,13 @@ import { $prefix, props, setup, defineComponent } from '@opentiny/vue-common'
 import '@opentiny/vue-theme/option/index.less'
 import { IconCheck, IconCheckedSur, IconFinish } from '@opentiny/vue-icon'
 
-// tiny 新增
-import Checkbox from '@opentiny/vue-checkbox'
-
 export default defineComponent({
   name: $prefix + 'Option',
   componentName: 'Option',
   components: {
     IconCheck: IconCheck(),
     IconCheckedSur: IconCheckedSur(),
-    IconFinish: IconFinish(),
-    TinyCheckbox: Checkbox
+    IconFinish: IconFinish()
   },
   props: [...props, 'value', 'label', 'created', 'disabled', 'events', 'visible', 'highlightClass', 'required', 'icon'],
   setup(props, context) {
diff --git a/packages/vue/src/pager-item/package.json b/packages/vue/src/pager-item/package.json
index 499db38296..8a0575e8b8 100644
--- a/packages/vue/src/pager-item/package.json
+++ b/packages/vue/src/pager-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-pager-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/pager/package.json b/packages/vue/src/pager/package.json
index b659a4a7b1..2c789e89be 100644
--- a/packages/vue/src/pager/package.json
+++ b/packages/vue/src/pager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-pager",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/panel/package.json b/packages/vue/src/panel/package.json
index b0e1a879de..95c26e53dd 100644
--- a/packages/vue/src/panel/package.json
+++ b/packages/vue/src/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-panel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/picker-column/package.json b/packages/vue/src/picker-column/package.json
index 375bdcd7c0..19debf17dd 100644
--- a/packages/vue/src/picker-column/package.json
+++ b/packages/vue/src/picker-column/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-picker-column",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/picker/package.json b/packages/vue/src/picker/package.json
index 3c1dfad39c..661ebff252 100644
--- a/packages/vue/src/picker/package.json
+++ b/packages/vue/src/picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-picker",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/picker/src/mobile-first.vue b/packages/vue/src/picker/src/mobile-first.vue
index 113882af2f..195b3d2337 100644
--- a/packages/vue/src/picker/src/mobile-first.vue
+++ b/packages/vue/src/picker/src/mobile-first.vue
@@ -2,7 +2,7 @@
   <div ref="reference" data-tag="tiny-date-container" :class="state.isDisplayOnly ? 'inline' : ''">
     <tiny-filter-box
       v-if="shape === 'filter'"
-      v-clickoutside="handleClose"
+      v-clickoutside.mousedown="handleClose"
       @click="handleFocus"
       :show-close="clearable"
       :placeholder="placeholder"
@@ -22,7 +22,7 @@
       :size="state.pickerSize"
       :name="name"
       v-bind="state.firstInputId"
-      v-clickoutside="handleClose"
+      v-clickoutside.mousedown="handleClose"
       :placeholder="placeholder"
       @focus="handleFocus"
       @keydown="handleKeydown"
@@ -87,7 +87,7 @@
       @mouseenter="handleMouseEnter"
       @mouseleave="state.showClose = false"
       @keydown="handleKeydown"
-      v-clickoutside="handleClose"
+      v-clickoutside.mousedown="handleClose"
       v-else
     >
       <tiny-tooltip
@@ -190,7 +190,6 @@
       :format-weeks="formatWeeks"
       ref="picker"
       :visible="state.pickerVisible"
-      class="tiny-tw"
       @pick="handlePick"
       @select-range="handleSelectRange"
       @select-change="handleSelectChange"
@@ -220,6 +219,7 @@
       v-if="state.isMobileScreen && state.isTimeMobileComponent"
       ref="datePickerMobile"
       v-model="state.timeMobileOption.value"
+      :default-value="state.timeMobileOption.defaultValue"
       :title="title"
       :clearable="clearable"
       :step="step"
diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue
index 8b958c9ed4..5d4b124ed6 100644
--- a/packages/vue/src/picker/src/pc.vue
+++ b/packages/vue/src/picker/src/pc.vue
@@ -2,7 +2,7 @@
   <div ref="reference" class="tiny-date-container">
     <tiny-filter-box
       v-if="shape === 'filter'"
-      v-clickoutside="handleClose"
+      v-clickoutside.mousedown="handleClose"
       @click="handleFocus"
       :show-close="clearable"
       :placeholder="placeholder"
@@ -23,7 +23,7 @@
       :size="state.pickerSize"
       :name="name"
       v-bind="state.firstInputId"
-      v-clickoutside="handleClose"
+      v-clickoutside.mousedown="handleClose"
       :placeholder="placeholder"
       @focus="handleFocus"
       @keydown="handleKeydown"
@@ -76,7 +76,7 @@
       @mouseenter="handleMouseEnter"
       @mouseleave="state.showClose = false"
       @keydown="handleKeydown"
-      v-clickoutside="handleClose"
+      v-clickoutside.mousedown="handleClose"
       v-else
     >
       <tiny-tooltip
diff --git a/packages/vue/src/pop-upload/package.json b/packages/vue/src/pop-upload/package.json
index 50d1e94027..c8e6bbc932 100644
--- a/packages/vue/src/pop-upload/package.json
+++ b/packages/vue/src/pop-upload/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-pop-upload",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/popconfirm/package.json b/packages/vue/src/popconfirm/package.json
index 582fe472ad..d3de960f1a 100644
--- a/packages/vue/src/popconfirm/package.json
+++ b/packages/vue/src/popconfirm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-popconfirm",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/popeditor/package.json b/packages/vue/src/popeditor/package.json
index 60ef353357..76a3ed8b42 100644
--- a/packages/vue/src/popeditor/package.json
+++ b/packages/vue/src/popeditor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-popeditor",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/popeditor/src/pc.vue b/packages/vue/src/popeditor/src/pc.vue
index 18ffb74772..205d6fd2cd 100644
--- a/packages/vue/src/popeditor/src/pc.vue
+++ b/packages/vue/src/popeditor/src/pc.vue
@@ -337,7 +337,7 @@ export default defineComponent({
     TinySelectedBox: SelectedBox
   },
   directives: directive({ Clickoutside }),
-  emits: ['update:modelValue', 'change', 'page-change', 'popup', 'size-change'],
+  emits: ['update:modelValue', 'change', 'page-change', 'popup', 'size-change', 'created'],
   props: [
     ...props,
     'dataset',
diff --git a/packages/vue/src/popover/package.json b/packages/vue/src/popover/package.json
index 4423d00b17..d51189301e 100644
--- a/packages/vue/src/popover/package.json
+++ b/packages/vue/src/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-popover",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/popup/package.json b/packages/vue/src/popup/package.json
index b7ab7c0a57..a7eb3c3dd4 100644
--- a/packages/vue/src/popup/package.json
+++ b/packages/vue/src/popup/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-popup",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/progress/package.json b/packages/vue/src/progress/package.json
index 87ab781b1b..b9cd25e186 100644
--- a/packages/vue/src/progress/package.json
+++ b/packages/vue/src/progress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-progress",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/pull-refresh/package.json b/packages/vue/src/pull-refresh/package.json
index d9505be331..ca464bdf41 100644
--- a/packages/vue/src/pull-refresh/package.json
+++ b/packages/vue/src/pull-refresh/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-pull-refresh",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/qr-code/package.json b/packages/vue/src/qr-code/package.json
index 0e99f9e924..4f5e864702 100644
--- a/packages/vue/src/qr-code/package.json
+++ b/packages/vue/src/qr-code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-qr-code",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/quarter-panel/package.json b/packages/vue/src/quarter-panel/package.json
index f50060787d..bb6d2f0d61 100644
--- a/packages/vue/src/quarter-panel/package.json
+++ b/packages/vue/src/quarter-panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-quarter-panel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/query-builder/package.json b/packages/vue/src/query-builder/package.json
index 0c603aa1ae..24ae2c946a 100644
--- a/packages/vue/src/query-builder/package.json
+++ b/packages/vue/src/query-builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-query-builder",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/radio-button/package.json b/packages/vue/src/radio-button/package.json
index 08f10a1a72..74d70ea4cc 100644
--- a/packages/vue/src/radio-button/package.json
+++ b/packages/vue/src/radio-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-radio-button",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/radio-group/package.json b/packages/vue/src/radio-group/package.json
index 6ecae6de13..adb8a8222d 100644
--- a/packages/vue/src/radio-group/package.json
+++ b/packages/vue/src/radio-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-radio-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/radio/package.json b/packages/vue/src/radio/package.json
index f4bd05eb10..c78d884505 100644
--- a/packages/vue/src/radio/package.json
+++ b/packages/vue/src/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-radio",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/rate/package.json b/packages/vue/src/rate/package.json
index f1b6077a13..227d4bcb5c 100644
--- a/packages/vue/src/rate/package.json
+++ b/packages/vue/src/rate/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-rate",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/record/package.json b/packages/vue/src/record/package.json
index e5dcf1a722..7a6fd618a9 100644
--- a/packages/vue/src/record/package.json
+++ b/packages/vue/src/record/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-record",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/recycle-scroller/package.json b/packages/vue/src/recycle-scroller/package.json
index 6cb769d983..69d5fae848 100644
--- a/packages/vue/src/recycle-scroller/package.json
+++ b/packages/vue/src/recycle-scroller/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-recycle-scroller",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/rich-text-editor/package.json b/packages/vue/src/rich-text-editor/package.json
index 6eb8f272bf..c37c339845 100644
--- a/packages/vue/src/rich-text-editor/package.json
+++ b/packages/vue/src/rich-text-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-rich-text-editor",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/rich-text/package.json b/packages/vue/src/rich-text/package.json
index f8b1cfe052..f32fe3d968 100644
--- a/packages/vue/src/rich-text/package.json
+++ b/packages/vue/src/rich-text/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-rich-text",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/river/package.json b/packages/vue/src/river/package.json
index 12f9edbc26..813ff9eceb 100644
--- a/packages/vue/src/river/package.json
+++ b/packages/vue/src/river/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-river",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/roles/package.json b/packages/vue/src/roles/package.json
index 789782932d..083ea76a65 100644
--- a/packages/vue/src/roles/package.json
+++ b/packages/vue/src/roles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-roles",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/row/package.json b/packages/vue/src/row/package.json
index 2db621a18c..c7cfcbc3bc 100644
--- a/packages/vue/src/row/package.json
+++ b/packages/vue/src/row/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-row",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/scroll-text/package.json b/packages/vue/src/scroll-text/package.json
index bfabc8b1c3..6dd542be01 100644
--- a/packages/vue/src/scroll-text/package.json
+++ b/packages/vue/src/scroll-text/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-scroll-text",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/scrollbar/package.json b/packages/vue/src/scrollbar/package.json
index 747deee0c5..20f91216b2 100644
--- a/packages/vue/src/scrollbar/package.json
+++ b/packages/vue/src/scrollbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-scrollbar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/search/package.json b/packages/vue/src/search/package.json
index 759b252fa5..bdef3defc7 100644
--- a/packages/vue/src/search/package.json
+++ b/packages/vue/src/search/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-search",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/select-dropdown/package.json b/packages/vue/src/select-dropdown/package.json
index 201444906f..dbb64fa42e 100644
--- a/packages/vue/src/select-dropdown/package.json
+++ b/packages/vue/src/select-dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-select-dropdown",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/select-dropdown/src/mobile-first.vue b/packages/vue/src/select-dropdown/src/mobile-first.vue
index 7af1f23b90..80fc5b5308 100644
--- a/packages/vue/src/select-dropdown/src/mobile-first.vue
+++ b/packages/vue/src/select-dropdown/src/mobile-first.vue
@@ -72,7 +72,7 @@
       >
         <div>
           <span @click="toggleSelectedBox(true)" class="mr-2">{{
-            t('ui.select.selectedNum').replace('{num}', state.selected.length)
+            t('ui.select.selectedNum', { num: state.selected.length })
           }}</span>
           <icon-chevron-up v-if="state.selected.length !== 0" custom-class="w-5 h-5 cursor-pointer"></icon-chevron-up>
         </div>
diff --git a/packages/vue/src/select-mobile/package.json b/packages/vue/src/select-mobile/package.json
index 0c1ff4a2d4..ce94dd7193 100644
--- a/packages/vue/src/select-mobile/package.json
+++ b/packages/vue/src/select-mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-select-mobile",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/select-view/package.json b/packages/vue/src/select-view/package.json
index 086f1a6d6a..3cf476b819 100644
--- a/packages/vue/src/select-view/package.json
+++ b/packages/vue/src/select-view/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-select-view",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/select/package.json b/packages/vue/src/select/package.json
index f39d279571..d05fa9846a 100644
--- a/packages/vue/src/select/package.json
+++ b/packages/vue/src/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-select",
-  "version": "3.16.2",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -28,7 +28,6 @@
     "@opentiny/vue-tree": "workspace:~",
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-filter-box": "workspace:~",
-    "@opentiny/vue-checkbox": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-recycle-scroller": "workspace:~",
     "@opentiny/vue-button": "workspace:~"
diff --git a/packages/vue/src/select/src/index.ts b/packages/vue/src/select/src/index.ts
index c7876d3f15..9af6c4c4dd 100644
--- a/packages/vue/src/select/src/index.ts
+++ b/packages/vue/src/select/src/index.ts
@@ -299,10 +299,20 @@ export default defineComponent({
       type: String,
       default: () => t('ui.select.add')
     },
+    initLabel: {
+      type: String,
+      default: ''
+    },
     blank: {
       type: Boolean,
       default: false
     },
+    tooltipConfig: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
     // 以下为 tiny 新增
     searchable: {
       type: Boolean,
diff --git a/packages/vue/src/select/src/mobile-first.vue b/packages/vue/src/select/src/mobile-first.vue
index cdf246cf29..837558412c 100644
--- a/packages/vue/src/select/src/mobile-first.vue
+++ b/packages/vue/src/select/src/mobile-first.vue
@@ -87,8 +87,9 @@
               disable-transitions
             >
               <tiny-tooltip
-                effect="light"
-                placement="top"
+                :effect="tooltipConfig.effect || 'light'"
+                :placement="tooltipConfig.placement || 'top'"
+                :popper-class="tooltipConfig.popperClass || ''"
                 @mouseenter.native="handleEnterTag($event, getValueKey(state.selectedVal[0]))"
               >
                 <span :class="gcls('tags-text')">
@@ -150,8 +151,9 @@
               disable-transitions
             >
               <tiny-tooltip
-                effect="light"
-                placement="top"
+                :effect="tooltipConfig.effect || 'light'"
+                :placement="tooltipConfig.placement || 'top'"
+                :popper-class="tooltipConfig.popperClass || ''"
                 @mouseenter.native="handleEnterTag($event, getValueKey(item))"
               >
                 <span v-if="!state.visible && state.overflow === index" :class="gcls('tags-text')">{{
@@ -178,7 +180,12 @@
         </span>
 
         <span v-else :class="[gcls('tags-text'), 'flex']">
-          <tiny-tooltip effect="light" placement="top" :disabled="!showTips || state.device === 'mb'">
+          <tiny-tooltip
+            :effect="tooltipConfig.effect || 'light'"
+            :placement="tooltipConfig.placement || 'top'"
+            :disabled="!showTips || state.device === 'mb'"
+            :popper-class="tooltipConfig.popperClass || ''"
+          >
             <span class="inline-block w-full whitespace-nowrap text-ellipsis overflow-hidden text-color-text-disabled">
               <span v-for="item in state.selected" :key="item.value">
                 <slot name="label" :item="item">{{ item.state ? item.state.currentLabel : item.currentLabel }}</slot
@@ -343,7 +350,7 @@
 
           <tiny-tree
             v-if="renderType === 'tree'"
-            class="[&_[data-tag=tiny-checkbox]_>span_>span]:p-1.5 sm:[&_[data-tag=tiny-checkbox]_>span_>span]:p-0"
+            class="[&_[data-tag=tiny-checkbox]_>span_>span]:p-1.5 sm:[&_[data-tag=tiny-checkbox]_>span_>span]:p-0 sm:max-h-56 overflow-auto"
             :filter-node-method="filterMethod"
             :props="{ label: textField, isLeaf: 'isLeaf', ...treeOp.props }"
             :expand-on-click-node="false"
@@ -351,7 +358,7 @@
             :node-key="valueField"
             :default-expand-all="state.isExpandAll"
             :check-strictly="treeOp.checkStrictly"
-            :default-checked-keys="multiple ? state.defaultCheckedKeys : []"
+            :default-checked-keys="multiple ? state.defaultCheckedKeys : treeOp.defaultCheckedKeys || []"
             ref="selectTree"
             :current-node-key="!multiple ? state.currentKey : ''"
             :show-checkbox="multiple"
@@ -695,7 +702,9 @@ export default defineComponent({
     'title',
     'closeByMask',
     'searchPlaceholder',
+    'initLabel',
     'blank',
+    'tooltipConfig',
     'allText'
   ],
   setup(props, context) {
diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue
index 6c780035d7..64347ca610 100644
--- a/packages/vue/src/select/src/pc.vue
+++ b/packages/vue/src/select/src/pc.vue
@@ -75,6 +75,7 @@
         >
           <span v-if="!state.selectDisabled">
             <span v-if="collapseTags && state.selected.length">
+              <!-- 显示第1个标签 + 数字 -->
               <tiny-tag
                 :closable="!state.selectDisabled"
                 :size="state.collapseTagSize"
@@ -85,8 +86,9 @@
                 disable-transitions
               >
                 <tiny-tooltip
-                  effect="light"
-                  placement="top"
+                  :effect="tooltipConfig.effect || 'light'"
+                  :placement="tooltipConfig.placement || 'top'"
+                  :popper-class="tooltipConfig.popperClass || ''"
                   @mouseenter.native="handleEnterTag($event, getValueKey(state.selected[0]))"
                 >
                   <span class="tiny-select__tags-text">
@@ -118,6 +120,7 @@
                 <span class="tiny-select__tags-text">+ {{ state.selected.length - 1 }}</span>
               </tiny-tag>
             </span>
+            <!-- 显示所有标签的循环 -->
             <span ref="tags-content" v-if="!collapseTags">
               <!-- 当 showAllTextTag 时， 用all-text属性做为tag。 xdesign规范 -->
               <tiny-tag
@@ -158,8 +161,9 @@
                   disable-transitions
                 >
                   <tiny-tooltip
-                    effect="light"
-                    placement="top"
+                    :effect="tooltipConfig.effect || 'light'"
+                    :placement="tooltipConfig.placement || 'top'"
+                    :popper-class="tooltipConfig.popperClass || ''"
                     @mouseenter.native="handleEnterTag($event, getValueKey(item))"
                   >
                     <span v-if="!state.visible && state.overflow === index" class="tiny-select__tags-text">
@@ -197,7 +201,12 @@
           </span>
 
           <span v-else class="tiny-select__tags-text is-disabled">
-            <tiny-tooltip effect="light" placement="top" :disabled="!showTips">
+            <tiny-tooltip
+              :effect="tooltipConfig.effect || 'light'"
+              :placement="tooltipConfig.placement || 'top'"
+              :popper-class="tooltipConfig.popperClass || ''"
+              :disabled="!showTips"
+            >
               <span>
                 <span v-for="item in state.selected" :key="item.value">
                   <slot name="label" :item="item">{{ item.state ? item.state.currentLabel : item.currentLabel }}</slot
@@ -390,7 +399,7 @@
             :node-key="valueField"
             :default-expand-all="state.isExpandAll"
             :check-strictly="treeOp.checkStrictly"
-            :default-checked-keys="multiple ? state.defaultCheckedKeys : []"
+            :default-checked-keys="multiple ? state.defaultCheckedKeys : treeOp.defaultCheckedKeys || []"
             ref="selectTree"
             :current-node-key="!multiple ? state.currentKey : ''"
             :show-checkbox="multiple"
@@ -484,16 +493,8 @@
               @mousedown.stop
               @mouseenter="state.hoverIndex = -9"
             >
-              <!-- <component :is="`icon-${state.selectCls}`" :class="['tiny-svg-size', state.selectCls]" />
-              <span>{{ t('ui.base.all') }}</span> -->
-              <!-- tiny 新增： 使用checkbox 代替 svg , 列表模式 -->
-              <tiny-checkbox
-                :model-value="state.selectCls === 'checked-sur'"
-                :indeterminate="state.selectCls === 'halfselect'"
-                :class="state.selectCls"
-              >
-                {{ allText || t('ui.base.all') }}
-              </tiny-checkbox>
+              <component :is="`icon-${state.selectCls}`" :class="['tiny-svg-size', state.selectCls]" />
+              <span>{{ allText || t('ui.base.all') }}</span>
             </li>
             <li
               v-if="
@@ -517,16 +518,8 @@
               @mousedown.stop
               @mouseenter="state.hoverIndex = -9"
             >
-              <!-- <component :is="`icon-${state.filteredSelectCls}`" :class="['tiny-svg-size', state.filteredSelectCls]" />
-              <span>{{ t('ui.base.all') }}</span> -->
-              <!-- tiny 新增： 使用checkbox 代替 svg，过滤模式 -->
-              <tiny-checkbox
-                :model-value="state.filteredSelectCls === 'checked-sur'"
-                :indeterminate="state.filteredSelectCls === 'halfselect'"
-                :class="state.selectCls"
-              >
-                {{ allText || t('ui.base.all') }}
-              </tiny-checkbox>
+              <component :is="`icon-${state.filteredSelectCls}`" :class="['tiny-svg-size', state.filteredSelectCls]" />
+              <span>{{ allText || t('ui.base.all') }}</span>
             </li>
             <tiny-option :value="state.query" created v-if="state.showNewOption"> </tiny-option>
             <slot>
@@ -609,10 +602,6 @@ import Tree from '@opentiny/vue-tree'
 import TinyTooltip from '@opentiny/vue-tooltip'
 import FilterBox from '@opentiny/vue-filter-box'
 import RecycleScroller from '@opentiny/vue-recycle-scroller'
-
-// tiny 新增
-import TinyCheckbox from '@opentiny/vue-checkbox'
-
 import '@opentiny/vue-theme/select/index.less'
 
 const getReference = (el, binding, vnode) => {
@@ -673,7 +662,6 @@ export default defineComponent({
     // tiny 新增，
     IconSearch: IconSearch(),
     IconDeltaDown: IconDeltaDown(), // 默认下拉图标
-    TinyCheckbox,
     IconEllipsis: IconEllipsis(),
     IconChevronUp: IconChevronUp()
   },
@@ -752,7 +740,9 @@ export default defineComponent({
     'topCreate',
     'topCreateText',
     'keepFocus',
+    'initLabel',
     'blank',
+    'tooltipConfig',
     // 以下为 tiny 新增
     'searchable',
     'showEmptyImage',
diff --git a/packages/vue/src/selected-box/package.json b/packages/vue/src/selected-box/package.json
index b0a8b089b4..05cde4d47c 100644
--- a/packages/vue/src/selected-box/package.json
+++ b/packages/vue/src/selected-box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-selected-box",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/signature/package.json b/packages/vue/src/signature/package.json
index 83d4c20c6c..b9b3327151 100644
--- a/packages/vue/src/signature/package.json
+++ b/packages/vue/src/signature/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-signature",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/skeleton-item/package.json b/packages/vue/src/skeleton-item/package.json
index 2256cf702f..f1bdfcf77c 100644
--- a/packages/vue/src/skeleton-item/package.json
+++ b/packages/vue/src/skeleton-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-skeleton-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/skeleton/package.json b/packages/vue/src/skeleton/package.json
index 7f1e551975..32f5d0d638 100644
--- a/packages/vue/src/skeleton/package.json
+++ b/packages/vue/src/skeleton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-skeleton",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/slider-button-group/package.json b/packages/vue/src/slider-button-group/package.json
index b4e24dcf93..8f1fa3bda8 100644
--- a/packages/vue/src/slider-button-group/package.json
+++ b/packages/vue/src/slider-button-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-slider-button-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/slider-button/package.json b/packages/vue/src/slider-button/package.json
index 376d2d7e04..b75eee9fe9 100644
--- a/packages/vue/src/slider-button/package.json
+++ b/packages/vue/src/slider-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-slider-button",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/slider/package.json b/packages/vue/src/slider/package.json
index cda1080635..1329cdfcf6 100644
--- a/packages/vue/src/slider/package.json
+++ b/packages/vue/src/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-slider",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/split/package.json b/packages/vue/src/split/package.json
index 98113248c8..7b383817ec 100644
--- a/packages/vue/src/split/package.json
+++ b/packages/vue/src/split/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-split",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/split/src/index.ts b/packages/vue/src/split/src/index.ts
index 50a5c8b2fa..572f1a87a8 100644
--- a/packages/vue/src/split/src/index.ts
+++ b/packages/vue/src/split/src/index.ts
@@ -75,6 +75,14 @@ export default defineComponent({
     scrollable: {
       type: Boolean,
       default: false
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    rightBottomValue: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/split/src/pc.vue b/packages/vue/src/split/src/pc.vue
index e5f351dba4..58f99d794f 100644
--- a/packages/vue/src/split/src/pc.vue
+++ b/packages/vue/src/split/src/pc.vue
@@ -181,7 +181,9 @@ export default defineComponent({
     'collapseLeftTop',
     'collapseRightBottom',
     'threeAreas',
-    'scrollable'
+    'scrollable',
+    'border',
+    'rightBottomValue'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })
diff --git a/packages/vue/src/standard-list-item/package.json b/packages/vue/src/standard-list-item/package.json
index 0a26fc57d0..4495ea9f60 100644
--- a/packages/vue/src/standard-list-item/package.json
+++ b/packages/vue/src/standard-list-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-standard-list-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/statistic/package.json b/packages/vue/src/statistic/package.json
index 828196140b..6b87fd15af 100644
--- a/packages/vue/src/statistic/package.json
+++ b/packages/vue/src/statistic/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-statistic",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/steps/package.json b/packages/vue/src/steps/package.json
index 90a73dfe76..3d2c300a86 100644
--- a/packages/vue/src/steps/package.json
+++ b/packages/vue/src/steps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-steps",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/svg-icon/package.json b/packages/vue/src/svg-icon/package.json
index c0b11a0f83..1a6f743b9b 100644
--- a/packages/vue/src/svg-icon/package.json
+++ b/packages/vue/src/svg-icon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-svg-icon",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/switch/package.json b/packages/vue/src/switch/package.json
index 03d47ea4d9..ae671b8bae 100644
--- a/packages/vue/src/switch/package.json
+++ b/packages/vue/src/switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-switch",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tab-item/package.json b/packages/vue/src/tab-item/package.json
index 0f14fdae99..1ca311f2d4 100644
--- a/packages/vue/src/tab-item/package.json
+++ b/packages/vue/src/tab-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tab-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tabbar-item/package.json b/packages/vue/src/tabbar-item/package.json
index 37f01407d9..9193e7db44 100644
--- a/packages/vue/src/tabbar-item/package.json
+++ b/packages/vue/src/tabbar-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tabbar-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tabbar/package.json b/packages/vue/src/tabbar/package.json
index 54d8603b48..f771226c42 100644
--- a/packages/vue/src/tabbar/package.json
+++ b/packages/vue/src/tabbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tabbar",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/table/package.json b/packages/vue/src/table/package.json
index 2c541e0fa6..8821ee3dac 100644
--- a/packages/vue/src/table/package.json
+++ b/packages/vue/src/table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-table",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tabs/package.json b/packages/vue/src/tabs/package.json
index 6e7442683e..5a99d344bd 100644
--- a/packages/vue/src/tabs/package.json
+++ b/packages/vue/src/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tabs",
-  "version": "3.16.1",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,6 +20,8 @@
     "@opentiny/vue-dropdown": "workspace:~",
     "@opentiny/vue-dropdown-menu": "workspace:~",
     "@opentiny/vue-dropdown-item": "workspace:~",
+    "@opentiny/vue-carousel": "workspace:~",
+    "@opentiny/vue-carousel-item": "workspace:~",
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
@@ -27,4 +29,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tabs/src/index.ts b/packages/vue/src/tabs/src/index.ts
index 8611a8c45b..6a659293c9 100644
--- a/packages/vue/src/tabs/src/index.ts
+++ b/packages/vue/src/tabs/src/index.ts
@@ -42,7 +42,7 @@ export const tabsProps = {
   showMoreTabs: Boolean,
   swipeable: {
     type: Boolean,
-    default: true
+    default: false
   },
   popperClass: String,
   popperAppendToBody: {
diff --git a/packages/vue/src/tabs/src/mobile-first.vue b/packages/vue/src/tabs/src/mobile-first.vue
index 9b367f21d4..a01924be55 100644
--- a/packages/vue/src/tabs/src/mobile-first.vue
+++ b/packages/vue/src/tabs/src/mobile-first.vue
@@ -1,8 +1,10 @@
 <script lang="tsx">
 import { renderless, api } from '@opentiny/vue-renderless/tabs-mf/vue'
 import { props, setup, defineComponent, h, isVue2, KeepAlive } from '@opentiny/vue-common'
+import Carousel from '@opentiny/vue-carousel'
 import TabBar from './mobile-first/tab-bar.vue'
 import TabPanel from './mobile-first/tab-panel.vue'
+import TabSwipe from './mobile-first/tab-swipe.vue'
 import type { ITabsApi } from '@opentiny/vue-renderless/types/tabs.type'
 
 export default defineComponent({
@@ -16,15 +18,16 @@ export default defineComponent({
     'beforeLeave',
     'separator',
     'optimized',
-    'beforeClose'
+    'beforeClose',
+    'swipeable'
   ],
   emits: ['update:activeName', 'update:modelValue', 'click', 'edit', 'close', 'add'],
-  components: { TabBar, TabPanel },
+  components: { TabBar },
   setup(props, context): any {
     return setup({ props, context, renderless, api }) as unknown as ITabsApi
   },
   render() {
-    const { state, slots, optimized } = this
+    const { state, slots, optimized, modelValue, beforeCarouselSwipe } = this
     const runFnuc = (fn) => (typeof fn === 'function' && fn()) || ''
 
     const hiddens = (
@@ -34,6 +37,7 @@ export default defineComponent({
     )
 
     let tabPanel = []
+    let tabWrapper
 
     if (optimized) {
       let defaultSlot, vnodes
@@ -51,40 +55,77 @@ export default defineComponent({
 
         vnodes.push(
           isVue2
-            ? h(TabPanel, { key: state.currentItem.name, scopedSlots: { default: () => runFnuc(defaultSlot) } })
-            : h(TabPanel, { key: state.currentItem.name }, () => runFnuc(defaultSlot))
+            ? h(TabPanel, {
+                props: { item },
+                key: state.currentItem.name,
+                scopedSlots: { default: () => runFnuc(defaultSlot) }
+              })
+            : h(TabPanel, { props: { item }, key: state.currentItem.name }, () => runFnuc(defaultSlot))
         )
       })
 
       tabPanel.push(isVue2 ? <KeepAlive>{vnodes}</KeepAlive> : h(KeepAlive, {}, () => vnodes))
     } else {
-      state.items.forEach((item) => {
+      state.items.forEach((item, i) => {
         if (item.lazy && item !== state.currentItem && !item.rendered) {
           return
         }
 
         const itemDefSlot = isVue2 ? item.vm.$scopedSlots.default : item.slotDefault
         const props = {
-          style: { display: item === state.currentItem ? 'block' : 'none' },
+          style: { display: item === state.currentItem || state.swipeable ? 'block' : 'none' },
           attrs: { 'data-tag': 'tiny-tab-panel' },
           class: 'w-full',
           props: { item },
           key: item.name
         }
 
-        tabPanel.push(
-          isVue2
-            ? h(TabPanel, { scopedSlots: { default: () => runFnuc(itemDefSlot) }, ...props })
-            : h(TabPanel, props, () => runFnuc(itemDefSlot))
-        )
+        const tabItem = isVue2
+          ? h(TabPanel, { scopedSlots: { default: () => runFnuc(itemDefSlot) }, ...props })
+          : h(TabPanel, props, () => runFnuc(itemDefSlot))
+
+        let tabSwipe
+
+        if (state.swipeable) {
+          tabSwipe = isVue2
+            ? h(TabSwipe, { ref: `tabSwipe${i}`, scopedSlots: { default: () => [tabItem] } })
+            : h(TabSwipe, { ref: `tabSwipe${i}` }, () => [tabItem])
+        }
+
+        tabPanel.push(state.swipeable ? tabSwipe : tabItem)
       })
+
+      if (state.swipeable) {
+        let initialIndex = 0
+
+        if (state.items.length > 0 && modelValue) {
+          initialIndex = state.items.map((item) => item.name).indexOf(modelValue)
+        }
+
+        tabWrapper = h(
+          Carousel,
+          {
+            ref: 'swipe',
+            props: {
+              loop: false,
+              swipeable: true,
+              lite: true,
+              initialIndex,
+              beforeSwipe: beforeCarouselSwipe,
+              height: `${state.maxTabSwipeHeight}px`
+            },
+            class: '!rounded-none [&_>[data-tag="tiny-carousel-block"]]:!rounded-none'
+          },
+          tabPanel
+        )
+      }
     }
 
     return (
       <div data-tag="tiny-tabs">
         {hiddens}
         <tab-bar ref="tabbar" />
-        {tabPanel}
+        {state.swipeable ? tabWrapper : tabPanel}
       </div>
     )
   }
diff --git a/packages/vue/src/tabs/src/mobile-first/tab-panel.vue b/packages/vue/src/tabs/src/mobile-first/tab-panel.vue
index 0dd6478602..26e95e2367 100644
--- a/packages/vue/src/tabs/src/mobile-first/tab-panel.vue
+++ b/packages/vue/src/tabs/src/mobile-first/tab-panel.vue
@@ -1,10 +1,13 @@
 <script lang="ts">
-import { h, defineComponent, $props } from '@opentiny/vue-common'
+import { h, defineComponent, $props, hooks } from '@opentiny/vue-common'
 
 export default defineComponent({
   props: {
     ...$props,
-    item: Object
+    item: { type: Object, required: true }
+  },
+  provide() {
+    return { TabStatus: hooks.toRef(this.item, 'selected') }
   },
   setup(props) {
     if (props.item) {
@@ -13,7 +16,6 @@ export default defineComponent({
     }
   },
   render() {
-    // eslint-disable-next-line vue/no-deprecated-dollar-scopedslots-api
     const slots = '$scopedSlots' in this ? this.$scopedSlots : this.$slots
 
     return h('div', { attrs: { 'data-tag': 'tiny-tab-panel' } }, typeof slots.default === 'function' && slots.default())
diff --git a/packages/vue/src/tabs/src/mobile-first/tab-swipe.vue b/packages/vue/src/tabs/src/mobile-first/tab-swipe.vue
new file mode 100644
index 0000000000..5369ee5963
--- /dev/null
+++ b/packages/vue/src/tabs/src/mobile-first/tab-swipe.vue
@@ -0,0 +1,68 @@
+<template>
+  <tiny-carousel-item data-tag="tiny-tab-swipe" class="w-full !h-fit">
+    <div
+      ref="touchContainer"
+      data-tiny-touch-simulate-container
+      class="w-full overflow-auto scrollbar-size-0"
+      @touchstart.passive="onTouchstart"
+      @touchmove.passive="onTouchmove"
+    >
+      <slot></slot>
+    </div>
+  </tiny-carousel-item>
+</template>
+
+<script lang="ts">
+import { $prefix, defineComponent } from '@opentiny/vue-common'
+import emulate from '@opentiny/vue-renderless/common/deps/touch-emulator'
+import CarouselItem from '@opentiny/vue-carousel-item'
+
+emulate()
+
+export default defineComponent({
+  name: $prefix + 'TabSwipe',
+  components: {
+    TinyCarouselItem: CarouselItem
+  },
+  props: {
+    stopThreshold: { type: Number, default: 10 }
+  },
+  data() {
+    return { last: -1 }
+  },
+  methods: {
+    onTouchstart(e: TouchEvent) {
+      const clientX = e.touches[0].clientX
+      this.last = clientX
+    },
+    onTouchmove(e: TouchEvent) {
+      const { $refs, stopThreshold, last } = this
+      const { touchContainer } = $refs
+      const clientX = e.touches[0].clientX
+      const change = clientX - last
+
+      this.last = clientX
+
+      if (touchContainer) {
+        if (touchContainer.scrollWidth > touchContainer.clientWidth) {
+          touchContainer.scrollLeft -= change
+        }
+
+        const shouldNext =
+          change < 0 &&
+          touchContainer.clientWidth + touchContainer.scrollLeft >= touchContainer.scrollWidth - stopThreshold
+        const shouldPrevious = change > 0 && touchContainer.scrollLeft <= stopThreshold
+
+        if (!shouldNext && !shouldPrevious) {
+          e.stopPropagation()
+        }
+      }
+    },
+    clearScroll() {
+      if (this.$refs.touchContainer) {
+        this.$refs.touchContainer.scrollLeft = 0
+      }
+    }
+  }
+})
+</script>
diff --git a/packages/vue/src/tag-group/package.json b/packages/vue/src/tag-group/package.json
index d3a914a05f..409d6c547b 100644
--- a/packages/vue/src/tag-group/package.json
+++ b/packages/vue/src/tag-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tag-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tag/package.json b/packages/vue/src/tag/package.json
index 7de85c1ee8..34f70abc99 100644
--- a/packages/vue/src/tag/package.json
+++ b/packages/vue/src/tag/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tag",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/text-popup/package.json b/packages/vue/src/text-popup/package.json
index dcf27ed053..3a253a75c6 100644
--- a/packages/vue/src/text-popup/package.json
+++ b/packages/vue/src/text-popup/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-text-popup",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-line/package.json b/packages/vue/src/time-line/package.json
index 3b7474a5a5..5f2c5f4ebf 100644
--- a/packages/vue/src/time-line/package.json
+++ b/packages/vue/src/time-line/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-line",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-line/src/index.ts b/packages/vue/src/time-line/src/index.ts
index e4a22b51fd..7861549d79 100644
--- a/packages/vue/src/time-line/src/index.ts
+++ b/packages/vue/src/time-line/src/index.ts
@@ -67,7 +67,10 @@ export const timelineProps = {
     type: Number,
     default: 1
   },
-  data: Array,
+  data: {
+    type: Array,
+    default: () => []
+  },
   space: {
     type: [String, Number],
     default: ''
diff --git a/packages/vue/src/time-line/src/pc.vue b/packages/vue/src/time-line/src/pc.vue
index 062eaa07cd..2be02659fb 100644
--- a/packages/vue/src/time-line/src/pc.vue
+++ b/packages/vue/src/time-line/src/pc.vue
@@ -21,6 +21,7 @@
         <tiny-timeline-item
           v-for="(node, index) in state.nodes"
           :key="index"
+          :node-index="index"
           :node="node"
           :space="space"
           :line-width="lineWidth"
@@ -46,7 +47,6 @@
         </tiny-timeline-item>
       </slot>
     </div>
-    <div class="tiny-steps__bottom-divider" v-if="textPosition === 'right' && showDivider"></div>
   </div>
 </template>
 
diff --git a/packages/vue/src/time-panel/package.json b/packages/vue/src/time-panel/package.json
index a0cd6f557d..84c99add60 100644
--- a/packages/vue/src/time-panel/package.json
+++ b/packages/vue/src/time-panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-panel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-picker-mobile/package.json b/packages/vue/src/time-picker-mobile/package.json
index b19f623dc0..6fe852d5cd 100644
--- a/packages/vue/src/time-picker-mobile/package.json
+++ b/packages/vue/src/time-picker-mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-picker-mobile",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-picker-mobile/src/mobile-first.vue b/packages/vue/src/time-picker-mobile/src/mobile-first.vue
index a36ec1f2bc..56839e2801 100644
--- a/packages/vue/src/time-picker-mobile/src/mobile-first.vue
+++ b/packages/vue/src/time-picker-mobile/src/mobile-first.vue
@@ -3,6 +3,7 @@
     <tiny-cascader-select
       ref="cascaderSelect"
       v-model="state.dateArr"
+      :default-value="defaultValue"
       :cycle-roll="cycleRoll"
       :options="state.options"
       :disabled="disabled"
@@ -43,6 +44,7 @@ export default defineComponent({
   props: {
     ...$props,
     modelValue: Array,
+    defaultValue: Array,
     visible: {
       type: Boolean,
       default: false
diff --git a/packages/vue/src/time-picker/package.json b/packages/vue/src/time-picker/package.json
index d583260a6d..54931286da 100644
--- a/packages/vue/src/time-picker/package.json
+++ b/packages/vue/src/time-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-picker",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-range/package.json b/packages/vue/src/time-range/package.json
index 152c325b8c..b3c3e1cc8c 100644
--- a/packages/vue/src/time-range/package.json
+++ b/packages/vue/src/time-range/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-range",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-select/package.json b/packages/vue/src/time-select/package.json
index d21758787e..999979fddc 100644
--- a/packages/vue/src/time-select/package.json
+++ b/packages/vue/src/time-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-select",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-spinner/package.json b/packages/vue/src/time-spinner/package.json
index 1d009755b9..f3d3633d9c 100644
--- a/packages/vue/src/time-spinner/package.json
+++ b/packages/vue/src/time-spinner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-spinner",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time/package.json b/packages/vue/src/time/package.json
index fec585d227..379dbe1d24 100644
--- a/packages/vue/src/time/package.json
+++ b/packages/vue/src/time/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/timeline-item/package.json b/packages/vue/src/timeline-item/package.json
index a66fd2b32c..6178b5091f 100644
--- a/packages/vue/src/timeline-item/package.json
+++ b/packages/vue/src/timeline-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-timeline-item",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/timeline-item/src/pc.vue b/packages/vue/src/timeline-item/src/pc.vue
index f649ee07e0..77691433c2 100644
--- a/packages/vue/src/timeline-item/src/pc.vue
+++ b/packages/vue/src/timeline-item/src/pc.vue
@@ -15,9 +15,9 @@
       <template v-if="rootProps.textPosition === 'right'">
         <div :class="state.iconClass" @click="handleClick(node)">
           <span
-            v-if="(node.index >= state.current || rootProps.onlyNumber) && !node[autoColorField] && !node.error"
+            v-if="(nodeIndex >= state.current || rootProps.onlyNumber) && !node[autoColorField] && !node.error"
             class="number"
-            >{{ rootProps.showNumber ? node.index + rootProps.start : '' }}
+            >{{ rootProps.showNumber ? nodeIndex + rootProps.start : '' }}
           </span>
           <template v-else>
             <icon-close
@@ -26,7 +26,7 @@
             ></icon-close>
             <icon-warn v-else-if="node[autoColorField] === 'warning'" class="tiny-svg-size fixicon icon-warning" />
             <icon-yes
-              v-else-if="node[autoColorField] === 'success' || (node.index < state.current && !node[autoColorField])"
+              v-else-if="node[autoColorField] === 'success' || (nodeIndex < state.current && !node[autoColorField])"
               class="tiny-svg-size fixicon icon-yes"
             />
             <component v-else :is="node[autoColorField]" class="fixicons"></component>
@@ -41,10 +41,11 @@
             :class="[
               'line',
               {
-                'line-done': node.index < state.current,
-                'line-end': node.index === state.nodesLength - 1
+                'line-done': nodeIndex < state.current,
+                'line-end': nodeIndex === state.nodesLength - 1
               }
             ]"
+            v-if="nodeIndex !== state.nodesLength - 1"
             :style="{ width: state.computedLineWidth }"
           ></div>
 
@@ -52,7 +53,7 @@
             <slot name="description" :slot-scope="node">
               {{ node.description }}
             </slot>
-            <div v-show="node.index === rootProps.active">
+            <div v-show="nodeIndex === rootProps.active">
               <slot name="active-node-desc" :slot-scope="node"></slot>
             </div>
           </div>
@@ -69,9 +70,9 @@
         <div class="tiny-steps__node">
           <div :class="state.iconClass" @click="handleClick(node)">
             <span
-              v-if="(node.index >= state.current || rootProps.onlyNumber) && !node[autoColorField] && !node.error"
+              v-if="(nodeIndex >= state.current || rootProps.onlyNumber) && !node[autoColorField] && !node.error"
               class="number"
-              >{{ rootProps.showNumber ? node.index + rootProps.start : '' }}
+              >{{ rootProps.showNumber ? nodeIndex + rootProps.start : '' }}
             </span>
             <template v-else>
               <icon-close
@@ -80,7 +81,7 @@
               ></icon-close>
               <icon-warn v-else-if="node[autoColorField] === 'warning'" class="tiny-svg-size fixicon icon-warning" />
               <icon-yes
-                v-else-if="node[autoColorField] === 'success' || (node.index < state.current && !node[autoColorField])"
+                v-else-if="node[autoColorField] === 'success' || (nodeIndex < state.current && !node[autoColorField])"
                 class="tiny-svg-size fixicon icon-yes"
               />
               <component v-else :is="node[autoColorField]" class="fixicons"></component>
@@ -92,8 +93,8 @@
             :class="[
               'line',
               {
-                'line-done': node.index < state.current,
-                'line-end': node.index === state.nodesLength - 1
+                'line-done': nodeIndex < state.current,
+                'line-end': nodeIndex === state.nodesLength - 1
               }
             ]"
           ></div>
@@ -102,7 +103,7 @@
           <slot name="bottom" :slot-scope="node">
             <div class="name" v-text="node[rootProps.nameField]" @click="handleClick(node)"></div>
             <div class="status" v-if="rootProps.showStatus">
-              {{ getStatus(node.index) }}
+              {{ getStatus(nodeIndex) }}
             </div>
           </slot>
         </div>
@@ -118,7 +119,7 @@
       <div class="tiny-timeline-item__pillar">
         <div v-if="shape === 'circle'" :class="state.iconClass" @click="handleClick(node)">
           <template
-            v-if="(state.isReverse ? node.index > state.current : node.index < state.current) || node[autoColorField]"
+            v-if="(state.isReverse ? nodeIndex > state.current : nodeIndex < state.current) || node[autoColorField]"
           >
             <icon-close
               v-if="node[autoColorField] === 'error' || node.error"
@@ -134,8 +135,8 @@
           <span v-else class="number">{{
             rootProps.showNumber
               ? state.isReverse
-                ? state.nodesLength - 1 - node.index + rootProps.start
-                : node.index + rootProps.start
+                ? state.nodesLength - 1 - nodeIndex + rootProps.start
+                : nodeIndex + rootProps.start
               : ''
           }}</span>
         </div>
@@ -164,7 +165,7 @@ import type { ITimelineItemApi } from '@opentiny/vue-renderless/types/timeline-i
 
 export default defineComponent({
   emits: ['click'],
-  props: [...props, 'node', 'space', 'lineWidth', 'shape', 'autoColorField'],
+  props: [...props, 'node', 'space', 'lineWidth', 'shape', 'autoColorField', 'nodeIndex'],
   components: {
     IconWarn: iconWarn(),
     IconClose: iconClose(),
diff --git a/packages/vue/src/toast/package.json b/packages/vue/src/toast/package.json
index 42b81f891e..cf90b61f5d 100644
--- a/packages/vue/src/toast/package.json
+++ b/packages/vue/src/toast/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-toast",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/toggle-menu/package.json b/packages/vue/src/toggle-menu/package.json
index c63ab20eec..520f5915b0 100644
--- a/packages/vue/src/toggle-menu/package.json
+++ b/packages/vue/src/toggle-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-toggle-menu",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tooltip/package.json b/packages/vue/src/tooltip/package.json
index 36baa4b05f..acf4ca0ad6 100644
--- a/packages/vue/src/tooltip/package.json
+++ b/packages/vue/src/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tooltip",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tooltip/src/mobile-first.vue b/packages/vue/src/tooltip/src/mobile-first.vue
index 0a5b5bfb01..6b30f7ad33 100644
--- a/packages/vue/src/tooltip/src/mobile-first.vue
+++ b/packages/vue/src/tooltip/src/mobile-first.vue
@@ -123,60 +123,73 @@ export default defineComponent({
     }
 
     if (!Object.hasOwnProperty.call(this, 'popperVM')) {
-      let popperVM = createComponent({
-        el: document.createElement('div'),
-        component: {
-          render: () => {
-            let content = getContent(this)
-            let propsData = { on: { 'after-leave': this.doDestroy } }
-            let mouseenter = () => this.setExpectedState(true)
-            let mouseleave = () => {
-              this.setExpectedState(false)
-              this.debounceClose()
+      const _cacheVm = { value: null }
+      this.d({
+        popperVM: {
+          get: () => {
+            if (!_cacheVm.value) {
+              _cacheVm.value = createComponent({
+                el: document.createElement('div'),
+                component: {
+                  render: () => {
+                    let content = getContent(this)
+                    let propsData = { on: { 'after-leave': this.doDestroy } }
+                    let mouseenter = () => this.setExpectedState(true)
+                    let mouseleave = () => {
+                      this.setExpectedState(false)
+                      this.debounceClose()
+                    }
+
+                    const xPlacement = this.state.xPlacement || ''
+                    return h('transition', propsData, [
+                      <div
+                        data-tag="tiny-tooltip"
+                        ref="popper"
+                        id={this.state.tooltipId}
+                        v-show={!this.disabled && this.state.showPopper && content}
+                        appendToBody={this.appendToBody}
+                        class={mergeClass([
+                          classes.tooltip,
+                          !this.effect && !this.type && classes['tooltip-sm'],
+                          this.effect && classes[`effect-${this.effect}`],
+                          this.type && classes[`is-${this.type}`],
+                          this.disabled || !this.state.showPopper ? 'hidden' : '',
+                          this.popperClass
+                        ])}
+                        role="tooltip"
+                        aria-hidden={this.disabled || !this.state.showPopper ? 'true' : 'false'}
+                        onMouseenter={() => mouseenter()}
+                        onMouseleave={() => mouseleave()}>
+                        {content}
+                        {this.visibleArrow ? (
+                          <div
+                            x-arrow
+                            class={mergeClass([
+                              classes.arrow,
+                              classes['placement-' + xPlacement.split('-')[0]],
+                              !this.effect && !this.type && classes['placement-' + xPlacement.split('-')[0] + '-sm'],
+                              this.effect === 'light'
+                                ? classes['placement-' + xPlacement.split('-')[0] + '-light']
+                                : '',
+                              this.effect === 'dark' ? classes['placement-' + xPlacement.split('-')[0] + '-dark'] : '',
+                              this.type ? classes[`arrow-${xPlacement.split('-')[0]}-${this.type}`] : ''
+                            ])}></div>
+                        ) : (
+                          ''
+                        )}
+                      </div>
+                    ])
+                  }
+                }
+              })
             }
 
-            const xPlacement = this.state.xPlacement || ''
-            return h('transition', propsData, [
-              <div
-                data-tag="tiny-tooltip"
-                ref="popper"
-                id={this.state.tooltipId}
-                v-show={!this.disabled && this.state.showPopper && content}
-                appendToBody={this.appendToBody}
-                class={mergeClass([
-                  classes.tooltip,
-                  !this.effect && !this.type && classes['tooltip-sm'],
-                  this.effect && classes[`effect-${this.effect}`],
-                  this.type && classes[`is-${this.type}`],
-                  this.disabled || !this.state.showPopper ? 'hidden' : '',
-                  this.popperClass
-                ])}
-                role="tooltip"
-                aria-hidden={this.disabled || !this.state.showPopper ? 'true' : 'false'}
-                onMouseenter={() => mouseenter()}
-                onMouseleave={() => mouseleave()}>
-                {content}
-                {this.visibleArrow ? (
-                  <div
-                    x-arrow
-                    class={mergeClass([
-                      classes.arrow,
-                      classes['placement-' + xPlacement.split('-')[0]],
-                      !this.effect && !this.type && classes['placement-' + xPlacement.split('-')[0] + '-sm'],
-                      this.effect === 'light' ? classes['placement-' + xPlacement.split('-')[0] + '-light'] : '',
-                      this.effect === 'dark' ? classes['placement-' + xPlacement.split('-')[0] + '-dark'] : '',
-                      this.type ? classes[`arrow-${xPlacement.split('-')[0]}-${this.type}`] : ''
-                    ])}></div>
-                ) : (
-                  ''
-                )}
-              </div>
-            ])
-          }
+            return _cacheVm.value
+          },
+
+          set: (val) => (_cacheVm.value = val)
         }
       })
-
-      this.d({ popperVM: { get: () => popperVM, set: (v) => (popperVM = v) } })
     }
 
     const stringifyBindClass = (bindClass, removeClassRE) => {
diff --git a/packages/vue/src/tooltip/src/pc.vue b/packages/vue/src/tooltip/src/pc.vue
index 3a0c4e5afc..233f1c2ca1 100644
--- a/packages/vue/src/tooltip/src/pc.vue
+++ b/packages/vue/src/tooltip/src/pc.vue
@@ -138,56 +138,68 @@ export default defineComponent({
       return attrContent
     }
     if (!Object.prototype.hasOwnProperty.call(this, 'popperVM')) {
-      let popperVM = createComponent({
-        el: document.createElement('div'),
-        propsData: null,
-        component: {
-          render: () => {
-            const content = getContent(this)
-            const propsData = {
-              attrs: { name: this.transition },
-              on: { 'after-leave': this.doDestroy }
-            }
-            const typeClass = 'is-' + (this.type || this.effect || 'dark')
-            const mouseenter = () => this.setExpectedState(true)
-            const mouseleave = () => {
-              this.setExpectedState(false)
-              this.debounceClose()
+      // tiny 新增： 如果在当前位置立即创建popperVm，会有加载问题，必须在访问 popperVM 时，再创建。
+      const _cacheVm = { value: null }
+      this.d({
+        popperVM: {
+          get: () => {
+            if (!_cacheVm.value) {
+              _cacheVm.value = createComponent({
+                el: document.createElement('div'),
+                propsData: null,
+                component: {
+                  render: () => {
+                    const content = getContent(this)
+                    const propsData = {
+                      attrs: { name: this.transition },
+                      on: { 'after-leave': this.doDestroy }
+                    }
+                    const typeClass = 'is-' + (this.type || this.effect || 'dark')
+                    const mouseenter = () => this.setExpectedState(true)
+                    const mouseleave = () => {
+                      this.setExpectedState(false)
+                      this.debounceClose()
+                    }
+
+                    // 直接 updatePopper 会造成scroll事件的绑定，即使tooltip不显示，也在滚动时带来性能影响
+                    this.$nextTick(() => {
+                      // 取 v-show的条件， v-show时，要更新一下位置
+                      if (!this.disabled && this.state.showPopper && content) {
+                        this.updatePopper()
+                      }
+                    })
+
+                    return h('transition', propsData, [
+                      <div
+                        ref="popper"
+                        id={this.state.tooltipId}
+                        v-show={!this.disabled && this.state.showPopper && content}
+                        class={[
+                          'tiny-tooltip',
+                          'tiny-tooltip__popper',
+                          typeClass,
+                          this.popperClass,
+                          { 'tiny-tooltip__show-tips': this.state.showContent }
+                        ]}
+                        style={`max-width:${this.state.tipsMaxWidth}px`}
+                        role="tooltip"
+                        aria-hidden={this.disabled || !this.state.showPopper ? 'true' : 'false'}
+                        onMouseenter={() => mouseenter()}
+                        onMouseleave={() => mouseleave()}>
+                        {content}
+                      </div>
+                    ])
+                  }
+                }
+              })
             }
 
-            // 直接 updatePopper 会造成scroll事件的绑定，即使tooltip不显示，也在滚动时带来性能影响
-            this.$nextTick(() => {
-              // 取 v-show的条件， v-show时，要更新一下位置
-              if (!this.disabled && this.state.showPopper && content) {
-                this.updatePopper()
-              }
-            })
+            return _cacheVm.value
+          },
 
-            return h('transition', propsData, [
-              <div
-                ref="popper"
-                id={this.state.tooltipId}
-                v-show={!this.disabled && this.state.showPopper && content}
-                class={[
-                  'tiny-tooltip',
-                  'tiny-tooltip__popper',
-                  typeClass,
-                  this.popperClass,
-                  { 'tiny-tooltip__show-tips': this.state.showContent }
-                ]}
-                style={`max-width:${this.state.tipsMaxWidth}px`}
-                role="tooltip"
-                aria-hidden={this.disabled || !this.state.showPopper ? 'true' : 'false'}
-                onMouseenter={() => mouseenter()}
-                onMouseleave={() => mouseleave()}>
-                {content}
-              </div>
-            ])
-          }
+          set: (val) => (_cacheVm.value = val)
         }
       })
-
-      this.d({ popperVM: { get: () => popperVM, set: (v) => (popperVM = v) } })
     }
     const stringifyClassObj = (classObj: Record<string, string>) =>
       Object.keys(classObj)
diff --git a/packages/vue/src/top-box/package.json b/packages/vue/src/top-box/package.json
index 5258d814fe..5a599b1bef 100644
--- a/packages/vue/src/top-box/package.json
+++ b/packages/vue/src/top-box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-top-box",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/transfer-panel/package.json b/packages/vue/src/transfer-panel/package.json
index a52693b638..ee5b03eddb 100644
--- a/packages/vue/src/transfer-panel/package.json
+++ b/packages/vue/src/transfer-panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-transfer-panel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/transfer/package.json b/packages/vue/src/transfer/package.json
index 0a27048768..4d68c015cc 100644
--- a/packages/vue/src/transfer/package.json
+++ b/packages/vue/src/transfer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-transfer",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tree-menu/package.json b/packages/vue/src/tree-menu/package.json
index ce1d35ad73..93577bedfe 100644
--- a/packages/vue/src/tree-menu/package.json
+++ b/packages/vue/src/tree-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tree-menu",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tree/package.json b/packages/vue/src/tree/package.json
index 49a363cf2e..acabbb957e 100644
--- a/packages/vue/src/tree/package.json
+++ b/packages/vue/src/tree/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-tree",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/tree/src/index.ts b/packages/vue/src/tree/src/index.ts
index 42f51385b4..720072c015 100644
--- a/packages/vue/src/tree/src/index.ts
+++ b/packages/vue/src/tree/src/index.ts
@@ -153,6 +153,11 @@ export default defineComponent({
       default: true
     },
     onlyCheckChildren: Boolean,
+    editConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    // tiny 新增
     showLine: Boolean
   },
   setup(props, context) {
diff --git a/packages/vue/src/tree/src/pc.vue b/packages/vue/src/tree/src/pc.vue
index cd3b3d8a60..5b13b32e73 100644
--- a/packages/vue/src/tree/src/pc.vue
+++ b/packages/vue/src/tree/src/pc.vue
@@ -221,7 +221,8 @@ export default defineComponent({
     'onlyCheckChildren',
     'deleteNodeMethod',
     'showCheckedMark',
-    'willChangeView'
+    'willChangeView',
+    'editConfig'
   ],
   components: {
     TreeNode,
diff --git a/packages/vue/src/tree/src/tree-node.vue b/packages/vue/src/tree/src/tree-node.vue
index de3f4ca321..5482865f03 100644
--- a/packages/vue/src/tree/src/tree-node.vue
+++ b/packages/vue/src/tree/src/tree-node.vue
@@ -155,7 +155,7 @@
             </span>
             <span :title="t('ui.tree.newNodeTitle')">
               <icon-plus-square
-                v-if="!node.data._isNewNode && !action.addDisabled.includes(node.data[nodeKey])"
+                v-if="!action.addDisabled.includes(node.data[nodeKey]) && node.data[state.props.label || 'label']"
                 @click.stop="addNode(node)"
               ></icon-plus-square>
             </span>
diff --git a/packages/vue/src/upload-dragger/package.json b/packages/vue/src/upload-dragger/package.json
index d6d4937fe6..fe847beb7a 100644
--- a/packages/vue/src/upload-dragger/package.json
+++ b/packages/vue/src/upload-dragger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-upload-dragger",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/upload-list/package.json b/packages/vue/src/upload-list/package.json
index c52d7006fd..6c64d02083 100644
--- a/packages/vue/src/upload-list/package.json
+++ b/packages/vue/src/upload-list/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-upload-list",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/upload/package.json b/packages/vue/src/upload/package.json
index 15b87e8f37..29d952d26c 100644
--- a/packages/vue/src/upload/package.json
+++ b/packages/vue/src/upload/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-upload",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/user-account/package.json b/packages/vue/src/user-account/package.json
index 49e2bc9c6b..834afc0025 100644
--- a/packages/vue/src/user-account/package.json
+++ b/packages/vue/src/user-account/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-user-account",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/user-contact/package.json b/packages/vue/src/user-contact/package.json
index 3915990fdd..a014f865b1 100644
--- a/packages/vue/src/user-contact/package.json
+++ b/packages/vue/src/user-contact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-user-contact",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/user-head-group/package.json b/packages/vue/src/user-head-group/package.json
index 6ffd858753..15dcf6811f 100644
--- a/packages/vue/src/user-head-group/package.json
+++ b/packages/vue/src/user-head-group/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-user-head-group",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/user-head/package.json b/packages/vue/src/user-head/package.json
index dfaf65c22c..8d7e100426 100644
--- a/packages/vue/src/user-head/package.json
+++ b/packages/vue/src/user-head/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-user-head",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/user-link/package.json b/packages/vue/src/user-link/package.json
index 09d7524142..0bd7447800 100644
--- a/packages/vue/src/user-link/package.json
+++ b/packages/vue/src/user-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-user-link",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/user/package.json b/packages/vue/src/user/package.json
index 514708c9a3..8166eb7313 100644
--- a/packages/vue/src/user/package.json
+++ b/packages/vue/src/user/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-user",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/watermark/package.json b/packages/vue/src/watermark/package.json
index 9f1ef424d3..8c7f9a23cc 100644
--- a/packages/vue/src/watermark/package.json
+++ b/packages/vue/src/watermark/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-watermark",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/wheel/package.json b/packages/vue/src/wheel/package.json
index 1c3ffb9dd0..236f2bec98 100644
--- a/packages/vue/src/wheel/package.json
+++ b/packages/vue/src/wheel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-wheel",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/wizard/package.json b/packages/vue/src/wizard/package.json
index a8b0f06756..babd689d17 100644
--- a/packages/vue/src/wizard/package.json
+++ b/packages/vue/src/wizard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-wizard",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/year-range/index.ts b/packages/vue/src/year-range/index.ts
index 91d5471974..5723a5cf69 100644
--- a/packages/vue/src/year-range/index.ts
+++ b/packages/vue/src/year-range/index.ts
@@ -1,4 +1,4 @@
-import YearRange from './src/pc.vue'
+import YearRange from './src/index'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/year-range/package.json b/packages/vue/src/year-range/package.json
index 19dcae761e..67a82eee53 100644
--- a/packages/vue/src/year-range/package.json
+++ b/packages/vue/src/year-range/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-year-range",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/year-range/src/index.ts b/packages/vue/src/year-range/src/index.ts
new file mode 100644
index 0000000000..3b45fa3a95
--- /dev/null
+++ b/packages/vue/src/year-range/src/index.ts
@@ -0,0 +1,13 @@
+import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import template from 'virtual-template?pc|mobile-first'
+
+export default {
+  name: $prefix + 'YearRange',
+  props: {
+    ...$props,
+    emitter: Object
+  },
+  setup(props, context) {
+    return $setup({ props, context, template })
+  }
+}
diff --git a/packages/vue/src/year-range/src/mobile-first.vue b/packages/vue/src/year-range/src/mobile-first.vue
new file mode 100644
index 0000000000..4d674b8739
--- /dev/null
+++ b/packages/vue/src/year-range/src/mobile-first.vue
@@ -0,0 +1,115 @@
+<template>
+  <transition @after-leave="$emit('dodestroy')">
+    <div
+      v-show="state.visible"
+      class="w-[552px] text-color-text-primary text-xs shadow-md bg-color-bg-1 rounded leading-4 my-0.5 mx-0"
+      :class="[
+        {
+          'w-[664px]': slots.sidebar || state.shortcuts
+        },
+        state.popperClass
+      ]"
+    >
+      <div class="after:content-[''] after:table after:clear-both">
+        <slot
+          name="sidebar"
+          class="absolute top-0 bottom-0 w-28 border-r border-r-color-bg-3 box-border pt-5 bg-color-bg-1 overflow-auto"
+        ></slot>
+        <div
+          class="absolute top-0 bottom-0 w-28 border-r border-r-color-bg-3 box-border pt-5 bg-color-bg-1 overflow-auto"
+          v-if="state.shortcuts"
+        >
+          <button
+            type="button"
+            class="block w-24 my-0 mx-auto rounded border-0 bg-transparent leading-8 text-xs text-color-text-primary pl-4 text-left outline-0 cursor-pointer truncate hover:bg-color-bg-2"
+            v-for="(shortcut, key) in state.shortcuts"
+            :key="key"
+            @click="handleShortcutClick(shortcut)"
+            :title="shortcut.text"
+          >
+            {{ shortcut.text }}
+          </button>
+        </div>
+        <div
+          class="after:content-[''] after:table after:clear-both min-w-[513px]"
+          :class="{ 'ml-28': slots.sidebar || state.shortcuts }"
+        >
+          <div class="m-0 float-left w-1/2 border-r border-r-color-bg-3 relative py-0 px-4">
+            <div class="relative text-center h-12 p-4">
+              <button
+                type="button"
+                @click="leftPrevYear"
+                class="float-left text-sm leading-4 fill-color-text-primary border-0 bg-left-bottom cursor-pointer outline-0 hover:fill-color-brand"
+              >
+                <icon-double-left></icon-double-left>
+              </button>
+              <div class="mx-12 text-xs font-medium">{{ state.leftLabel }}</div>
+            </div>
+            <year-table
+              ref="leftYearTable"
+              :selection-mode="state.selectionMode"
+              :date="state.leftDate"
+              :default-value="state.defaultValue"
+              :min-date="state.minDate"
+              :max-date="state.maxDate"
+              :range-state="state.rangeState"
+              :disabled-date="state.disabledDate"
+              :start-year="state.leftStartYear"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick"
+            >
+            </year-table>
+          </div>
+          <div class="m-0 float-right w-1/2 border-r border-r-color-bg-3 relative py-0 px-4">
+            <div class="relative text-center h-12 p-4">
+              <button
+                type="button"
+                @click="rightNextYear"
+                class="float-right text-sm leading-4 fill-color-text-primary border-0 bg-left-bottom cursor-pointer outline-0 hover:fill-color-brand"
+              >
+                <icon-double-right></icon-double-right>
+              </button>
+              <div class="mx-12 text-xs font-medium">{{ state.rightLabel }}</div>
+            </div>
+            <year-table
+              ref="rightRearTable"
+              :selection-mode="state.selectionMode"
+              :date="state.rightDate"
+              :default-value="state.defaultValue"
+              :min-date="state.minDate"
+              :max-date="state.maxDate"
+              :range-state="state.rangeState"
+              :disabled-date="state.disabledDate"
+              :start-year="state.rightStartYear"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick"
+            >
+            </year-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { renderless, api } from '@opentiny/vue-renderless/year-range/vue'
+import { setup, directive, props, defineComponent } from '@opentiny/vue-common'
+import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
+import YearTable from '@opentiny/vue-year-table'
+import { IconDoubleRight, IconDoubleLeft } from '@opentiny/vue-icon'
+
+export default defineComponent({
+  directives: directive({ Clickoutside }),
+  components: {
+    YearTable,
+    IconDoubleRight: IconDoubleRight(),
+    IconDoubleLeft: IconDoubleLeft()
+  },
+  props: [...props, 'emitter'],
+  emits: ['dodestroy', 'pick'],
+  setup(props, context) {
+    return setup({ props, context, renderless, api })
+  }
+})
+</script>
diff --git a/packages/vue/src/year-range/src/pc.vue b/packages/vue/src/year-range/src/pc.vue
index 6176356fda..2e08e16ad1 100644
--- a/packages/vue/src/year-range/src/pc.vue
+++ b/packages/vue/src/year-range/src/pc.vue
@@ -77,26 +77,22 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/year-range/vue'
-import { $prefix, setup, directive, $props, defineComponent } from '@opentiny/vue-common'
+import { setup, directive, props, defineComponent } from '@opentiny/vue-common'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
 import YearTable from '@opentiny/vue-year-table'
 import { IconDoubleRight, IconDoubleLeft } from '@opentiny/vue-icon'
 
 export default defineComponent({
-  name: $prefix + 'YearRange',
   directives: directive({ Clickoutside }),
   components: {
     YearTable,
     IconDoubleRight: IconDoubleRight(),
     IconDoubleLeft: IconDoubleLeft()
   },
-  props: {
-    ...$props,
-    emitter: Object
-  },
+  props: [...props, 'emitter'],
   emits: ['dodestroy', 'pick'],
   setup(props, context) {
-    return setup({ props, context, renderless, api, mono: true })
+    return setup({ props, context, renderless, api })
   }
 })
 </script>
diff --git a/packages/vue/src/year-table/index.ts b/packages/vue/src/year-table/index.ts
index 5b54a4fc4b..85a569cd39 100644
--- a/packages/vue/src/year-table/index.ts
+++ b/packages/vue/src/year-table/index.ts
@@ -9,8 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import YearTable from './src/pc.vue'
-import '@opentiny/vue-theme/year-table/index.less'
+import YearTable from './src/index'
 import { version } from './package.json'
 
 /* istanbul ignore next */
diff --git a/packages/vue/src/year-table/package.json b/packages/vue/src/year-table/package.json
index c00ba9ea69..2f4b58fb84 100644
--- a/packages/vue/src/year-table/package.json
+++ b/packages/vue/src/year-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-year-table",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/year-table/src/index.ts b/packages/vue/src/year-table/src/index.ts
new file mode 100644
index 0000000000..d0603d57c2
--- /dev/null
+++ b/packages/vue/src/year-table/src/index.ts
@@ -0,0 +1,29 @@
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
+import { isDate } from '@opentiny/vue-renderless/common/deps/date-util'
+import template from 'virtual-template?pc|mobile-first'
+
+export default defineComponent({
+  name: $prefix + 'YearTable',
+  props: {
+    ...$props,
+    disabledDate: {},
+    value: {},
+    defaultValue: {
+      validator(val) {
+        // null or valid Date Object
+        return val === null || (val instanceof Date && isDate(val))
+      }
+    },
+    date: [Date, Array],
+    selectionMode: String,
+    startYear: Number,
+    maxDate: {},
+    minDate: {},
+    rangeState: {
+      default: () => ({ endDate: null, selecting: false })
+    }
+  },
+  setup(props, context) {
+    return $setup({ props, context, template })
+  }
+})
diff --git a/packages/vue/src/year-table/src/mobile-first.vue b/packages/vue/src/year-table/src/mobile-first.vue
new file mode 100644
index 0000000000..4793ad72d4
--- /dev/null
+++ b/packages/vue/src/year-table/src/mobile-first.vue
@@ -0,0 +1,75 @@
+<template>
+  <table
+    class="text-xs -m-px border-collapse w-full table-fixed"
+    data-tag="tiny-year-table"
+    @mousemove="handleMouseMove"
+    @click="handleYearTableClick"
+  >
+    <tbody>
+      <tr v-for="(row, key) in state.rows" :key="key">
+        <td
+          v-for="(cell, key) in row"
+          class="text-center cursor-pointer py-4 px-0"
+          :data-class="getCellStyle(cell)"
+          :key="key"
+        >
+          <div
+            :class="
+              m(
+                cell.inRange ? 'bg-color-brand-hover-subtle hover:bg-color-brand-hover-subtle' : 'h-auto p-0',
+                { 'rounded-tl rounded-bl': cell.start },
+                { 'rounded-tr rounded-br mr-5': cell.end }
+              )
+            "
+          >
+            <a
+              :class="
+                m(
+                  'w-12 h-12 leading-[theme(spacing.12)] box-border block text-color-text-primary my-0 rounded hover:bg-color-brand-hover-subtle',
+                  { 'border border-solid border-color-border-focus leading-[46px]': state.today },
+                  { 'my-0 mx-auto': !cell.inRange },
+                  { 'text-color-text-inverse bg-color-brand': cell.start },
+                  { 'text-color-text-inverse bg-color-brand': cell.end },
+                  {
+                    'bg-color-bg-3 cursor-not-allowed text-color-text-disabled hover:text-color-text-disabled hover:bg-color-bg-3':
+                      state.disabled
+                  },
+                  {
+                    'text-color-text-inverse bg-color-brand hover:text-color-text-inverse hover:bg-color-brand':
+                      state.current && !state.disabled
+                  }
+                )
+              "
+              :aria-disabled="state.disabled ? true : undefined"
+              >{{ cell.text }}</a
+            >
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import { renderless, api } from '@opentiny/vue-renderless/year-table/vue'
+import { setup, props, defineComponent } from '@opentiny/vue-common'
+
+export default defineComponent({
+  emits: ['pick', 'changerange'],
+  props: [
+    ...props,
+    'disabledDate',
+    'value',
+    'defaultValue',
+    'date',
+    'selectionMode',
+    'startYear',
+    'maxDate',
+    'minDate',
+    'rangeState'
+  ],
+  setup(props, context) {
+    return setup({ props, context, renderless, api })
+  }
+})
+</script>
diff --git a/packages/vue/src/year-table/src/pc.vue b/packages/vue/src/year-table/src/pc.vue
index 7620978eeb..1fc16ffb7f 100644
--- a/packages/vue/src/year-table/src/pc.vue
+++ b/packages/vue/src/year-table/src/pc.vue
@@ -16,7 +16,7 @@
       <tr v-for="(row, key) in state.rows" :key="key">
         <td v-for="(cell, key) in row" class="available" :class="getCellStyle(cell)" :key="key">
           <div>
-            <a class="cell">{{ cell.text }}</a>
+            <a class="cell" :aria-disabled="state.disabled ? true : undefined">{{ cell.text }}</a>
           </div>
         </td>
       </tr>
@@ -26,32 +26,25 @@
 
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/year-table/vue'
-import { isDate } from '@opentiny/vue-renderless/common/deps/date-util'
-import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
+import { setup, props, defineComponent } from '@opentiny/vue-common'
+import '@opentiny/vue-theme/year-table/index.less'
 
 export default defineComponent({
-  name: $prefix + 'YearTable',
-  emits: ['pick'],
-  props: {
-    disabledDate: {},
-    value: {},
-    defaultValue: {
-      validator(val) {
-        // null or valid Date Object
-        return val === null || (val instanceof Date && isDate(val))
-      }
-    },
-    date: [Date, Array],
-    selectionMode: String,
-    startYear: Number,
-    maxDate: {},
-    minDate: {},
-    rangeState: {
-      default: () => ({ endDate: null, selecting: false })
-    }
-  },
+  emits: ['pick', 'changerange'],
+  props: [
+    ...props,
+    'disabledDate',
+    'value',
+    'defaultValue',
+    'date',
+    'selectionMode',
+    'startYear',
+    'maxDate',
+    'minDate',
+    'rangeState'
+  ],
   setup(props, context): any {
-    return setup({ props, context, renderless, api, mono: true })
+    return setup({ props, context, renderless, api })
   }
 })
 </script>