diff --git a/examples/docs/newsrc/pc.vue b/examples/docs/newsrc/pc.vue
index 1f410f450..b539502ef 100644
--- a/examples/docs/newsrc/pc.vue
+++ b/examples/docs/newsrc/pc.vue
@@ -194,6 +194,8 @@ export default {
       currMd: hooks.computed(() => mds[`${modeState.pathName}.cn.md`]),
       demoLoading: false
     })
+    // hui chart 新增图表类型，新增图表的 api 和原有图表的api 区分开。 
+    const huiNewChart = ['chart-process']
     const fn = {
       // 菜单搜索：忽略大小写
       searchMenu: (value, data) => {
@@ -234,7 +236,12 @@ export default {
       const demosConfig = await getDemosConfig(demosModule)
       state.demos = demosConfig.demos
       state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0]
-      state.currApi = (await getApisConfig(componentName, 'pc')).apis
+
+      if (huiNewChart.includes(modeState.pathName)) {
+        state.currApi = (await getApisConfig('hui', 'pc')).apis
+      } else {
+        state.currApi = (await getApisConfig(componentName, 'pc')).apis
+      }
       await _switchDemo()
     }
     async function _switchDemo() {
diff --git a/examples/sites/demos/apis/cascader.js b/examples/sites/demos/apis/cascader.js
index c6c123ff7..b5e6e8f62 100644
--- a/examples/sites/demos/apis/cascader.js
+++ b/examples/sites/demos/apis/cascader.js
@@ -376,6 +376,16 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'filterable'
+        },
+        {
+          name: 'no-data',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '通过 <code>no-data</code> 插槽设置没有数据时显示的内容',
+            'en-US': 'Set what is displayed when there is no data via the <code>no-data</code> slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-nodata'
         }
       ]
     },
diff --git a/examples/sites/demos/apis/config-provider.js b/examples/sites/demos/apis/config-provider.js
index baa95059b..51cea1588 100644
--- a/examples/sites/demos/apis/config-provider.js
+++ b/examples/sites/demos/apis/config-provider.js
@@ -21,7 +21,7 @@ export default {
           type: "'ltr' | 'rtl'",
           defaultValue: 'ltr',
           desc: {
-            'zh-CN': '文字排版方向',
+            'zh-CN': '文字样式方向',
             'en-US': 'Text layout direction'
           },
           mode: ['pc'],
diff --git a/examples/sites/demos/apis/credit-card-form.js b/examples/sites/demos/apis/credit-card-form.js
deleted file mode 100644
index 49738cd1d..000000000
--- a/examples/sites/demos/apis/credit-card-form.js
+++ /dev/null
@@ -1,98 +0,0 @@
-export default {
-  mode: ['pc'],
-  apis: [
-    {
-      name: 'credit-card-form',
-      type: 'component',
-      props: [
-        {
-          name: 'background-image',
-          type: 'string , object',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '设置卡片的背景图片;',
-            'en-US': 'Set the background image of the card.'
-          },
-          mode: ['pc'],
-          pcDemo: 'background-image'
-        },
-        {
-          name: 'form-data',
-          type: 'object',
-          defaultValue:
-            "// 该属性的默认值为 \n{cardCvv: '', cardName: '', cardYear: '', cardMonth: '', cardNumber: ''}",
-          desc: {
-            'zh-CN': '设置信用卡显示数据',
-            'en-US': 'Setting Credit Card Display Data'
-          },
-          mode: ['pc'],
-          pcDemo: 'basic-usage'
-        }
-      ],
-      events: [
-        {
-          name: 'input-card-cvv',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '输入 cvv 时触发的事件',
-            'en-US': 'CVV input event triggered'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'input-card-month',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '选择月时触发的事件',
-            'en-US': 'Event triggered when a month is selected'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'input-card-name',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '输入卡持有者时触发的事件',
-            'en-US': 'Event triggered when a card holder is entered'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'input-card-number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '输入卡号时触发的事件',
-            'en-US': 'Event triggered when a card number is entered'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'input-card-year',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '选择年时触发的事件',
-            'en-US': 'Event triggered when the year is selected'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        },
-        {
-          name: 'submit',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '提交时触发的事件',
-            'en-US': 'Event triggered upon submission'
-          },
-          mode: ['pc'],
-          pcDemo: 'credit-card-form-events'
-        }
-      ],
-      methods: [],
-      slots: []
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/detail-page.js b/examples/sites/demos/apis/detail-page.js
deleted file mode 100644
index 61ea42630..000000000
--- a/examples/sites/demos/apis/detail-page.js
+++ /dev/null
@@ -1,126 +0,0 @@
-export default {
-  mode: ['pc'],
-  apis: [
-    {
-      name: 'detail-page',
-      type: 'component',
-      props: [
-        {
-          name: 'cancel-button',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗取消按钮的文本，默认为 '取消'",
-            'en-US': "Text of the cancel button in the personalized pop-up window, The default value is'Cancel'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'dialog-title',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗标题，默认为 '个性化标题'",
-            'en-US': "Personalize pop-up title, default is'Personalized title'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'label-title',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '文本字段'",
-            'en-US': "Personalized pop-up window header text title bar field, The default value is 'Title'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'modelValue / v-model',
-          typeAnchorName: 'IDetailPageItem',
-          type: 'IDetailPageItem[]',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '设置表头详情栏的数据',
-            'en-US': 'Set the data in the table header details column'
-          },
-          mode: ['pc'],
-          pcDemo: ''
-        },
-        {
-          name: 'save-button',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗确定按钮的文本，默认为 '确定'",
-            'en-US': "Text of the confirmation button in the personalized pop-up window, The default value is'Confirm'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'text-split',
-          type: 'string',
-          defaultValue: "'---'",
-          desc: {
-            'zh-CN': '详情栏标题分隔符',
-            'en-US': 'Details column title separator'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'tips',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "提示不能全部隐藏的提示语，默认为 '不能全部隐藏'",
-            'en-US': "Prompt message that cannot be completely hidden, The default value is 'Cannot hide all' "
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'title',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "详情栏标, 默认为 '数据'",
-            'en-US': "Details field, default value is' Data '"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        },
-        {
-          name: 'value-title',
-          type: 'string',
-          defaultValue: '',
-          desc: {
-            'zh-CN': "个性化弹窗表头文本操作栏字段，默认为 '勾选隐藏'",
-            'en-US':
-              "Personalized pop-up window header text operation column field, The default value is'Click to hide'"
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-show-text'
-        }
-      ],
-      events: [],
-      methods: [],
-      slots: []
-    }
-  ],
-  types: [
-    {
-      name: 'IDetailPageItem',
-      type: 'interface',
-      code: `interface IDetailPageItem {
-  label: string
-  value: string
-  hidden?: boolean
-}`
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/hui.js b/examples/sites/demos/apis/hui.js
new file mode 100644
index 000000000..51672ae79
--- /dev/null
+++ b/examples/sites/demos/apis/hui.js
@@ -0,0 +1,49 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'chart',
+      type: 'component',
+      props: [
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: '--',
+          desc: {
+            'zh-CN': '图表参数',
+            'en-US': 'Whether to disable container detection during resize'
+          },
+          mode: ['pc'],
+          pcDemo: 'chart/question#question-base'
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: []
+    }
+  ],
+  types: [
+    {
+      name: 'options',
+      type: 'interface',
+      code: `
+interface options {
+  theme: string // 主题
+  color: array | string // 颜色
+  padding: array // 图表内边距值
+  tipHtml: function // 悬浮提示框内容配置
+  event: object // 图表事件
+  data: array // 图表数据
+  name: string // 图表名称(必填)
+  unit: string // 进度图右侧文本单位
+  barWidth: number // 进度图柱形宽度
+  minWidth: string // 进度图单项数据的最小宽度
+  calibrationValue: number // 进度图标定值
+  label: object // 堆叠进度图图表图元文本样式
+  state: object // 根据状态设置颜色
+  title: object // 进度图图表标题样式
+  text: object // 进度图图表右侧文本样式
+}`
+    }
+  ]
+}
diff --git a/examples/sites/demos/apis/image.js b/examples/sites/demos/apis/image.js
index eb8b943fe..c0881c565 100644
--- a/examples/sites/demos/apis/image.js
+++ b/examples/sites/demos/apis/image.js
@@ -19,7 +19,7 @@ export default {
         },
         {
           name: 'image-size',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置预览的图片的大小',
@@ -54,7 +54,7 @@ export default {
         },
         {
           name: 'preview-visible',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '开启移动端预览大图的功能',
@@ -65,7 +65,7 @@ export default {
         },
         {
           name: 'round',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '通过 round 设置是否展示圆形',
@@ -90,7 +90,7 @@ export default {
         },
         {
           name: 'show-hover',
-          type: 'String',
+          type: 'string',
           defaultValue: '',
           desc: {
             'zh-CN': '设置预览的图片的悬浮效果',
@@ -101,14 +101,15 @@ export default {
         },
         {
           name: 'show-index',
-          type: 'String',
+          type: 'boolean',
           defaultValue: '',
           desc: {
             'zh-CN': '开启图片序列号展示',
             'en-US': 'Enable the display of image serial numbers.'
           },
-          mode: ['mobile-first'],
-          mfDemo: 'preview-src-list'
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'preview-src-list',
+          pcDemo: 'preview'
         },
         {
           name: 'src',
@@ -133,6 +134,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: '',
           mfDemo: ''
+        },
+        {
+          name: 'keep-style',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '保持图片样式属性',
+            'en-US': 'Preserve Picture Style Properties'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'keep-style',
+          mfDemo: ''
         }
       ],
       events: [
@@ -197,6 +210,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'slot',
           mfDemo: ''
+        },
+        {
+          name: 'count',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置图片计数插槽',
+            'en-US': 'Set Picture Count Slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'count-slot',
+          mfDemo: ''
         }
       ]
     }
diff --git a/examples/sites/demos/apis/mind-map.js b/examples/sites/demos/apis/mind-map.js
index 48edd6603..0f973574e 100644
--- a/examples/sites/demos/apis/mind-map.js
+++ b/examples/sites/demos/apis/mind-map.js
@@ -7,24 +7,26 @@ export default {
       props: [
         {
           name: 'modelValue',
-          type: 'NodeObj',
+          type: 'Object',
           defaultValue: '{}',
           desc: {
             'zh-CN': '默认节点数据',
             'en-US': 'Default node data'
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          pcDemo: 'export-data'
         },
         {
           name: 'options',
-          type: 'Options',
+          typeAnchorName: 'IMindMaoOptions',
+          type: 'IMindMaoOptions',
           defaultValue: '{contextMenu: false,toolBar: false,nodeMenu: false}',
           desc: {
             'zh-CN': '配置项',
             'en-US': 'options'
           },
-          mode: ['pc']
+          mode: ['pc'],
+          pcDemo: 'export-data'
         }
       ],
       events: [
@@ -57,7 +59,8 @@ export default {
         },
         {
           name: 'expandNode',
-          type: 'onExpandNode',
+          typeAnchorName: 'IMindExpandNode',
+          type: 'IMindnExpandNode',
           desc: {
             'zh-CN': '展开节点时会触发该事件',
             'en-US': 'This event will be triggered when expanding a node'
@@ -66,7 +69,8 @@ export default {
         },
         {
           name: 'operation',
-          type: 'onOperation',
+          typeAnchorName: 'IMindMapOperation',
+          type: 'IMindMapOperation',
           desc: {
             'zh-CN': '节点重新计算时, 例如将节点A拖拽到节点B, 使得节点A是节点B的子节点',
             'en-US':
@@ -76,7 +80,8 @@ export default {
         },
         {
           name: 'selectNewNode',
-          type: 'onSelectNewNode',
+          typeAnchorName: 'IMindMapSelectNewNode',
+          type: 'IMindMapSelectNewNode',
           desc: {
             'zh-CN': '创建新节点时',
             'en-US': 'when create new node'
@@ -85,7 +90,8 @@ export default {
         },
         {
           name: 'selectNode',
-          type: 'onSelectNode',
+          typeAnchorName: 'IMindMapSelectNode',
+          type: 'IMindMapSelectNode',
           desc: {
             'zh-CN': '选择任意一个节点时, 会触发该事件',
             'en-US': 'When selecting any node, this event will be triggered'
@@ -94,7 +100,8 @@ export default {
         },
         {
           name: 'selectNodes',
-          type: 'onSelectNodes',
+          typeAnchorName: 'IMindMapSelectNodes',
+          type: 'IMindMapSelectNodes',
           desc: {
             'zh-CN': '选择多个节点的时候会触发该事件',
             'en-US': 'When selecting multiple nodes, this event will be triggered'
@@ -103,7 +110,8 @@ export default {
         },
         {
           name: 'unselectNode',
-          type: 'onUnselectNode',
+          typeAnchorName: 'IMindMapUnselectNode',
+          type: 'IMindMapUnselectNode',
           desc: {
             'zh-CN': '取消选择的时候会触发该事件',
             'en-US': 'When deselecting, this event will be triggered'
@@ -112,7 +120,8 @@ export default {
         },
         {
           name: 'unselectNodes',
-          type: 'onUnselectNode',
+          typeAnchorName: 'IMindMapUnselectNodes',
+          type: 'IMindMapUnselectNodes',
           desc: {
             'zh-CN': '取消选择多个节点时会触发该事件',
             'en-US': 'This event will be triggered when multiple nodes are unselected'
@@ -126,10 +135,10 @@ export default {
   ],
   types: [
     {
-      name: 'Options',
+      name: 'IMindMaoOptions',
       type: 'interface',
       code: `
-interface Options {
+interface options {
   direction?: number
   locale?: string
   draggable?: boolean
@@ -152,53 +161,39 @@ interface Options {
 `
     },
     {
-      name: 'onOperation',
+      name: 'IMindMapOperation',
       type: 'type',
-      code: `
-type onOperation = ({render, info}: {render:MindElixirInstance, info: Operation}) => void
-`
+      code: `type onOperation = ({render, info}: {render:MindElixirInstance, info: Operation}) => void`
     },
     {
-      name: 'onSelectNode',
+      name: 'IMindMapSelectNode',
       type: 'type',
-      code: `
-type onSelectNode = ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}, e?: MouseEvent) => void
-`
+      code: `type onSelectNode = ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}, e?: MouseEvent) => void`
     },
     {
-      name: 'onSelectNewNode',
+      name: 'IMindMapSelectNewNode',
       type: 'type',
-      code: `
-type selectNewNode: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}) => void
-`
+      code: `type selectNewNode: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}) => void`
     },
     {
-      name: 'onSelectNodes',
+      name: 'IMindMapSelectNodes',
       type: 'type',
-      code: `
-type selectNodes: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj[]}) => void
-`
+      code: `type selectNodes: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj[]}) => void`
     },
     {
-      name: 'onUnselectNode',
+      name: 'IMindMapUnselectNode',
       type: 'type',
-      code: `
-type unselectNodes: ({render}: {render: MindElixirInstance}) => void
-`
+      code: `type unselectNodes: ({render}: {render: MindElixirInstance}) => void`
     },
     {
-      name: 'onUnselectNodes',
+      name: 'IMindMapUnselectNodes',
       type: 'type',
-      code: `
-type unselectNodes: ({render}: {render: MindElixirInstance}) => void
-`
+      code: `type unselectNodes: ({render}: {render: MindElixirInstance}) => void`
     },
     {
-      name: 'onExpandNode',
+      name: 'IMindExpandNode',
       type: 'type',
-      code: `
-type expandNode: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}) => void
-`
+      code: `type expandNode: ({render,nodeObj}: {render:MindElixirInstance,nodeObj:NodeObj}) => void`
     },
     {
       name: 'NodeObj',
diff --git a/examples/sites/demos/apis/numeric.js b/examples/sites/demos/apis/numeric.js
index 50d844549..06f7a134d 100644
--- a/examples/sites/demos/apis/numeric.js
+++ b/examples/sites/demos/apis/numeric.js
@@ -17,6 +17,18 @@ export default {
           pcDemo: 'allow-empty',
           mfDemo: ''
         },
+        {
+          name: 'empty-value',
+          type: 'any',
+          defaultValue: 'undefined',
+          desc: {
+            'zh-CN': '设置计数器在可清空下，清空后组件的绑定值',
+            'en-US': 'Sets the bound value of the cleared component when the counter can be cleared.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'empty-value',
+          mfDemo: 'empty-value'
+        },
         {
           name: 'blank',
           type: 'string',
diff --git a/examples/sites/demos/apis/popeditor.js b/examples/sites/demos/apis/popeditor.js
index b8b931343..0f5a9a72a 100644
--- a/examples/sites/demos/apis/popeditor.js
+++ b/examples/sites/demos/apis/popeditor.js
@@ -229,7 +229,7 @@ export default {
             'en-US': ''
           },
           mode: ['pc'],
-          pcDemo: 'selected-box-op'
+          pcDemo: 'selected-box'
         },
         {
           name: 'show-clear-btn',
diff --git a/examples/sites/demos/apis/roles.js b/examples/sites/demos/apis/roles.js
index a80859471..ef3b96f18 100644
--- a/examples/sites/demos/apis/roles.js
+++ b/examples/sites/demos/apis/roles.js
@@ -16,6 +16,19 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'fetch-role'
+        },
+        {
+          name: 'popper-append-to-body',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN':
+              '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
+            'en-US':
+              'Indicates whether to insert the pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
+          },
+          mode: ['pc'],
+          pcDemo: 'base'
         }
       ],
       events: [
diff --git a/examples/sites/demos/apis/select.js b/examples/sites/demos/apis/select.js
index 74eb99912..40ae04a1e 100644
--- a/examples/sites/demos/apis/select.js
+++ b/examples/sites/demos/apis/select.js
@@ -81,6 +81,15 @@ export default {
           pcDemo: 'clearable',
           mfDemo: 'clearable'
         },
+        {
+          name: 'click-expend',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '点击可展开或收起显示不全的选项。仅用于多选',
+            'en-US': 'Click to expand or collapse options. Only applicable to multiple selections'
+          }
+        },
         {
           name: 'collapse-tags',
           type: 'boolean',
@@ -240,6 +249,18 @@ export default {
           pcDemo: 'remote-method',
           mfDemo: 'remote-method'
         },
+        {
+          name: 'max-visible-rows',
+          type: 'number',
+          defaultValue: '1',
+          desc: {
+            'zh-CN': '多行默认最大显示行数，超出后选项自动隐藏',
+            'en-US':
+              'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
+          },
+          mode: ['pc'],
+          pcDemo: 'collapse-tags'
+        },
         {
           name: 'modelValue / v-model',
           type: 'string | number | Array<string|number>',
diff --git a/examples/sites/demos/apis/skeleton.js b/examples/sites/demos/apis/skeleton.js
index 0d0ee9410..95fdd91a2 100644
--- a/examples/sites/demos/apis/skeleton.js
+++ b/examples/sites/demos/apis/skeleton.js
@@ -6,7 +6,7 @@ export default {
       type: 'component',
       props: [
         {
-          name: 'active',
+          name: 'animated',
           type: 'boolean',
           defaultValue: 'true',
           desc: {
@@ -46,9 +46,8 @@ export default {
           type: 'number',
           defaultValue: '3',
           desc: {
-            'zh-CN': '默认排版，可配置段落显示行数',
-            'en-US':
-              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+            'zh-CN': '默认样式，可配置段落显示行数',
+            'en-US': 'Default style. The number of lines displayed in a paragraph can be configured'
           },
           mode: ['pc'],
           pcDemo: 'custom-rows'
@@ -58,9 +57,10 @@ export default {
           type: 'number[] | string[]',
           defaultValue: '[]',
           desc: {
-            'zh-CN': '自定义段落每一行的宽度',
+            'zh-CN':
+              '自定义段落每一行的宽度，数组中的每一项可以为 number 或 string ，当为 number 时，组件会自动增加 px 单位',
             'en-US':
-              'Customized interface. A Promise object is returned. This parameter is mandatory when the framework service is not used.'
+              'Width of each line in a custom paragraph. Each item in the array can be a number or a string. If the value is a number, the component automatically increases the value by px'
           },
           mode: ['pc'],
           pcDemo: 'custom-paragraph-width'
@@ -74,7 +74,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '加载完成后显示的内容',
-            'en-US': 'Option default slot'
+            'en-US': 'Content displayed after the loading is complete'
           },
           mode: ['pc'],
           pcDemo: 'custom-layout'
@@ -84,7 +84,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '自定义骨架屏结构',
-            'en-US': 'Option default slot'
+            'en-US': 'Custom Skeleton Screen Structure'
           },
           mode: ['pc'],
           pcDemo: 'custom-layout'
@@ -99,7 +99,7 @@ export default {
           name: 'size',
           typeAnchorName: 'ISize',
           type: 'ISize',
-          defaultValue: 'medium',
+          defaultValue: "'medium'",
           desc: {
             'zh-CN': '针对 image 和 circle 形态，内置三种大小',
             'en-US':
@@ -112,7 +112,7 @@ export default {
           name: 'variant',
           typeAnchorName: 'IVariant',
           type: 'IVariant',
-          defaultValue: 'square',
+          defaultValue: "'square'",
           desc: {
             'zh-CN': '骨架屏形态',
             'en-US':
diff --git a/examples/sites/demos/apis/slide-bar.js b/examples/sites/demos/apis/slide-bar.js
deleted file mode 100644
index 4a32f78eb..000000000
--- a/examples/sites/demos/apis/slide-bar.js
+++ /dev/null
@@ -1,104 +0,0 @@
-export default {
-  mode: ['pc'],
-  apis: [
-    {
-      name: 'slide-bar',
-      type: 'component',
-      props: [
-        {
-          name: 'init-blocks',
-          type: 'number',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '初始时需要显示的块数',
-            'en-US': 'Number of blocks to be displayed initially'
-          },
-          mode: ['pc'],
-          pcDemo: 'wheel-blocks'
-        },
-        {
-          name: 'sub-tag',
-          type: 'string',
-          defaultValue: "该属性的默认值为 'li'",
-          desc: {
-            'zh-CN': '设置组件的子级 Dom 标签',
-            'en-US': 'Setting the Dom Label of a Component'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-tag'
-        },
-        {
-          name: 'tag',
-          type: 'string',
-          defaultValue: "该属性的默认值为 'ul'",
-          desc: {
-            'zh-CN': '设置组件的 Dom 标签',
-            'en-US': 'Setting the Dom Label of a Component'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-tag'
-        },
-        {
-          name: 'value',
-          type: 'Array',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '调用服务时候获取数据的来源',
-            'en-US': 'Data source obtained during service invoking'
-          },
-          mode: ['pc'],
-          pcDemo: 'wheel-blocks'
-        },
-        {
-          name: 'wheel-blocks',
-          type: 'number',
-          defaultValue: '该属性的默认值为 1',
-          desc: {
-            'zh-CN': '鼠标滚轮上下滚动的时候，滚动的块数长度',
-            'en-US': 'Number of scrolling blocks when the mouse wheel is scrolled up or down'
-          },
-          mode: ['pc'],
-          pcDemo: 'wheel-blocks'
-        }
-      ],
-      events: [
-        {
-          name: 'before-click',
-          type: 'Function(value)',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '滑动点击前触发的事件;event: 原生事件',
-            'en-US': 'Event triggered before a user swipes the screen. event: Native event'
-          },
-          mode: ['pc'],
-          pcDemo: 'slide-bar-events'
-        },
-        {
-          name: 'click',
-          type: 'Function(data, index)',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '滑动块点击事件;data: 点击的滑块数据，index: 点击的滑块索引值',
-            'en-US':
-              'Sliding block click event; data: data of the clicked slider, index: index value of the clicked slider'
-          },
-          mode: ['pc'],
-          pcDemo: 'slide-bar-events'
-        }
-      ],
-      methods: [],
-      slots: [
-        {
-          name: 'default',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '默认的作用域插槽',
-            'en-US': 'Default scope slot'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-content'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/apis/tag.js b/examples/sites/demos/apis/tag.js
index 539236425..de273d4f0 100644
--- a/examples/sites/demos/apis/tag.js
+++ b/examples/sites/demos/apis/tag.js
@@ -30,16 +30,19 @@ export default {
         },
         {
           name: 'color',
-          type: 'string',
+          type: 'IColor | string[]',
+          typeAnchorName: 'IColor',
           defaultValue: '',
           desc: {
-            'zh-CN': '背景色：rgb,rgba,hex 三种格式',
-            'en-US': 'Background color: The value can be in rgb, rgba, or hex format'
+            'zh-CN':
+              '控制标签文本色和背景色，可使用 IColor 类型中的预设值，也可自定义值，若自定义值为字符串则只能设置标签的背景色；若为数组则第一个值设置背景色，第二个设置文本色；【注：3.15.0新增支持数组类型】',
+            'en-US':
+              'Control the text color and background color of the label. You can use the preset value in the IColor type or customize the value. If the customized value is a character string, you can only set the background color of the label. If it is an array, the first value sets the background color and the second sets the text color. [Note: The array type is supported in 3.15.0]'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
           pcDemo: 'color3',
           mobileDemo: 'different-color',
-          mfDemo: ''
+          mfDemo: 'color3'
         },
         {
           name: 'custom-class',
@@ -164,8 +167,8 @@ export default {
             'zh-CN': '彩色标签，该属性的可选值为 pink、purple、cyan',
             'en-US': 'Color label. The value can be pink, purple, or cyan.'
           },
-          mode: ['mobile-first'],
-          mfDemo: 'colorful-tag'
+          mode: ['mobile'],
+          mfDemo: 'different-color'
         },
         {
           name: 'type',
@@ -238,6 +241,13 @@ export default {
     }
   ],
   types: [
+    {
+      name: 'IColor',
+      type: 'type',
+      code: `
+type IColor = 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'brown' | 'grey' | string // 除了预设值，也可以是其他任意自定义颜色值
+`
+    },
     {
       name: 'IEffect',
       type: 'type',
@@ -256,7 +266,7 @@ type ISize = 'medium' | 'small' | 'mini' | ''
       name: 'IType',
       type: 'type',
       code: `
-type IType = 'success' | 'info' | 'mini' | 'warning' | 'danger'
+type IType = 'success' | 'info' | 'warning' | 'danger'
 `
     }
   ]
diff --git a/examples/sites/demos/apis/time-line.js b/examples/sites/demos/apis/time-line.js
index 05e81b6b4..4ca503c75 100644
--- a/examples/sites/demos/apis/time-line.js
+++ b/examples/sites/demos/apis/time-line.js
@@ -24,7 +24,7 @@ export default {
             'zh-CN': '显示组件二级标题内容，默认值为 autoColor',
             'en-US': 'Displays the level-2 title of the component. The default value is autoColor.'
           },
-          mode: ['mobile-first'],
+          mode: ['pc', 'mobile-first'],
           mfDemo: ''
         },
         {
@@ -351,6 +351,7 @@ export default {
       code: `
 interface ITimelineItem {
   name: string // 节点名称
+  activeColor: 'success' | 'warning' | 'error' | Component
   time?: string // 节点时间
   error?: boolean // 是否异常状态
   disabled?: boolean // 是否禁用
diff --git a/examples/sites/demos/mobile-first/app/numeric/empty-value-composition-api.vue b/examples/sites/demos/mobile-first/app/numeric/empty-value-composition-api.vue
new file mode 100644
index 000000000..5305dfb4c
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/numeric/empty-value-composition-api.vue
@@ -0,0 +1,15 @@
+<template>
+  <tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+
+const step = ref(2)
+const stepNum = ref(1)
+
+function onChange(val, oldVal) {
+  Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/numeric/empty-value.vue b/examples/sites/demos/mobile-first/app/numeric/empty-value.vue
new file mode 100644
index 000000000..d724c3717
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/numeric/empty-value.vue
@@ -0,0 +1,24 @@
+<template>
+  <tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
+</template>
+
+<script>
+import { Numeric, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric: Numeric
+  },
+  data() {
+    return {
+      step: 2,
+      stepNum: 1
+    }
+  },
+  methods: {
+    onChange(val, oldVal) {
+      Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/mobile-first/app/numeric/webdoc/numeric.js b/examples/sites/demos/mobile-first/app/numeric/webdoc/numeric.js
index 3ff26d98c..29726216a 100644
--- a/examples/sites/demos/mobile-first/app/numeric/webdoc/numeric.js
+++ b/examples/sites/demos/mobile-first/app/numeric/webdoc/numeric.js
@@ -78,6 +78,20 @@ export default {
       },
       codeFiles: ['allow-empty.vue']
     },
+    {
+      demoId: 'empty-value',
+      name: {
+        'zh-CN': '设定清空输入后的绑定值',
+        'en-US': 'Sets the binding value after the input is cleared'
+      },
+      desc: {
+        'zh-CN':
+          '可通过 <code>empty-value</code> 属性设置计数器在可清空下，清空后组件的绑定值。默认为 <code>undefined</code>。示例中将清空后组件绑定值改为<code>null</code>',
+        'en-US':
+          'You can use the <code>empty-value</code> attribute to set the binding value of the cleared component when the counter can be cleared. The default value is <code>undefined</code>. In the example, the component binding value is changed to <code>null</code>.'
+      },
+      codeFiles: ['empty-value.vue']
+    },
     {
       demoId: 'about-step',
       name: {
diff --git a/examples/sites/demos/mobile/app/alert/basic-usage.spec.ts b/examples/sites/demos/mobile/app/alert/basic-usage.spec.ts
new file mode 100644
index 000000000..ac7d4d550
--- /dev/null
+++ b/examples/sites/demos/mobile/app/alert/basic-usage.spec.ts
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#base')
+
+  const alerts = page.locator('.demo-alert-base .tiny-mobile-alert')
+
+  // 背景色与图标色验证
+  await expect(alerts.first()).toHaveCSS('background-color', 'rgb(222, 236, 255)')
+  await expect(alerts.first().locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(20, 118, 255)')
+  await expect(alerts.nth(1)).toHaveCSS('background-color', 'rgb(252, 227, 225)')
+  await expect(alerts.nth(1).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(242, 48, 48)')
+  await expect(alerts.nth(2)).toHaveCSS('background-color', 'rgb(230, 242, 213)')
+  await expect(alerts.nth(2).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(92, 179, 0)')
+  await expect(alerts.nth(3)).toHaveCSS('background-color', 'rgb(255, 235, 209)')
+  await expect(alerts.nth(3).locator('.tiny-mobile-alert__icon').first()).toHaveCSS('fill', 'rgb(255, 136, 0)')
+
+  // 警告可见
+  const alertSuccess = page.locator('.tiny-mobile-alert--success')
+  await expect(alertSuccess).toBeVisible()
+
+  // 状态图标存在
+  const icon = alertSuccess.locator('.tiny-mobile-alert__icon').first()
+  await expect(icon).toBeVisible()
+
+  // 提示内容存在
+  const content = alertSuccess.locator('.tiny-mobile-alert__content')
+  await expect(content).toBeVisible()
+
+  // 点击关闭按钮，警告消失
+  const close = alertSuccess.locator('.tiny-mobile-alert__close')
+  await expect(close).toBeVisible()
+  await close.click()
+  await expect(alertSuccess).toBeHidden()
+})
diff --git a/examples/sites/demos/mobile/app/alert/center.spec.ts b/examples/sites/demos/mobile/app/alert/center.spec.ts
new file mode 100644
index 000000000..720a6a6c5
--- /dev/null
+++ b/examples/sites/demos/mobile/app/alert/center.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('指定挂载节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#target')
+
+  const target = page.locator('.alert-wrap')
+  const alert = target.locator('> .tiny-mobile-alert')
+
+  await expect(alert).toBeVisible()
+})
diff --git a/examples/sites/demos/mobile/app/alert/custom-close.spec.ts b/examples/sites/demos/mobile/app/alert/custom-close.spec.ts
new file mode 100644
index 000000000..5d9f12b12
--- /dev/null
+++ b/examples/sites/demos/mobile/app/alert/custom-close.spec.ts
@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('自定义关闭', async (page) => {
+  test('隐藏关闭图标', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('alert#custom-close')
+
+    const alerts = page.locator('.tiny-mobile-alert')
+    const closeIcon = alerts.first().locator('.tiny-mobile-alert__close')
+
+    await expect(closeIcon).not.toBeVisible()
+  })
+
+  test('自动关闭', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('alert#custom-close')
+
+    const alerts = page.locator('.tiny-mobile-alert')
+    await page.locator('#custom-close span').first().click()
+    await expect(alerts.filter({ hasText: '2秒后将自动关闭' })).toBeVisible()
+    await page.waitForTimeout(2000)
+    await expect(alerts.filter({ hasText: '2秒后将自动关闭' })).not.toBeVisible()
+  })
+
+  test('自定义关闭按钮文本', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('alert#custom-close')
+
+    const alert = page.locator('.tiny-mobile-alert').nth(2)
+    const closeIcon = alert.locator('.tiny-mobile-alert__close')
+
+    await expect(closeIcon).not.toBeVisible()
+    await expect(alert.locator('span').filter({ hasText: '自定义关闭' })).toBeVisible()
+  })
+
+  test('关闭close事件', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('alert#custom-close')
+
+    const alert = page.locator('.tiny-mobile-alert').nth(3)
+    const toast = page.locator('.tiny-mobile-toast').filter({ hasText: 'close事件!' })
+    await alert.locator('.tiny-mobile-alert__close').click()
+    await expect(toast).toBeVisible()
+  })
+})
diff --git a/examples/sites/demos/mobile/app/alert/custom-close.vue b/examples/sites/demos/mobile/app/alert/custom-close.vue
index f8fe84042..70fb23243 100644
--- a/examples/sites/demos/mobile/app/alert/custom-close.vue
+++ b/examples/sites/demos/mobile/app/alert/custom-close.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { Alert, Switch } from '@opentiny/vue'
+import { Alert, Switch, Toast } from '@opentiny/vue'
 
 export default {
   components: {
@@ -29,12 +29,15 @@ export default {
   data() {
     return {
       autoHide: false,
-      closeText: '自定义关闭',
+      closeText: '自定义关闭'
     }
   },
   methods: {
     close() {
-      console.log('已关闭！')
+      Toast.service({
+        text: 'close事件!',
+        time: 100000
+      })
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/alert/icon.spec.ts b/examples/sites/demos/mobile/app/alert/icon.spec.ts
new file mode 100644
index 000000000..f148fac8f
--- /dev/null
+++ b/examples/sites/demos/mobile/app/alert/icon.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull)
+  await page.goto('alert#icon')
+
+  const alert = page.locator('.tiny-mobile-alert')
+
+  await expect(alert.locator('.tiny-mobile-alert__icon').first()).toBeVisible()
+  await expect(alert.locator('.tiny-mobile-alert__content')).toContainText('自定义图标')
+})
diff --git a/examples/sites/demos/mobile/app/alert/size.spec.ts b/examples/sites/demos/mobile/app/alert/size.spec.ts
new file mode 100644
index 000000000..b24196f76
--- /dev/null
+++ b/examples/sites/demos/mobile/app/alert/size.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('不同尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#size')
+
+  const alerts = page.locator('#size .tiny-mobile-alert')
+  const normalAlert = alerts.first()
+  const { height: normalAlertHeight } = await normalAlert.boundingBox()
+  const largeAlert = alerts.nth(1)
+
+  await expect(normalAlert).toHaveClass(/tiny-mobile-alert--normal/)
+  await expect(normalAlert.locator('.tiny-mobile-alert__content')).toHaveCSS('font-size', '12px')
+  await expect(Math.round(normalAlertHeight)).toBe(36)
+  await expect(largeAlert).toHaveClass(/tiny-mobile-alert--large/)
+  await expect(largeAlert.locator('.tiny-mobile-alert__content')).toHaveCSS('font-size', '16px')
+})
diff --git a/examples/sites/demos/mobile/app/alert/size.vue b/examples/sites/demos/mobile/app/alert/size.vue
index fecb8b242..b35d0de09 100644
--- a/examples/sites/demos/mobile/app/alert/size.vue
+++ b/examples/sites/demos/mobile/app/alert/size.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="alert-wrap">
-    <tiny-alert>默认大小</tiny-alert>
-    <tiny-alert size="normal">size 为 normal</tiny-alert>
+    <tiny-alert size="normal">size 为 normal (默认)</tiny-alert>
     <tiny-alert size="large">size 为 large</tiny-alert>
   </div>
 </template>
diff --git a/examples/sites/demos/mobile/app/alert/slot-default.spec.ts b/examples/sites/demos/mobile/app/alert/slot-default.spec.ts
new file mode 100644
index 000000000..48eb37a88
--- /dev/null
+++ b/examples/sites/demos/mobile/app/alert/slot-default.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义提示内容', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#slot-default')
+
+  const alert = page.locator('.tiny-mobile-alert')
+
+  await expect(alert).toBeVisible()
+  await expect(page.getByText('配置详细信息请点击')).toBeVisible()
+  await expect(page.getByRole('link', { name: '默认配置说明' })).toBeVisible()
+})
diff --git a/examples/sites/demos/mobile/app/alert/target.spec.ts b/examples/sites/demos/mobile/app/alert/target.spec.ts
new file mode 100644
index 000000000..4ef3e577a
--- /dev/null
+++ b/examples/sites/demos/mobile/app/alert/target.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('文字居中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('alert#target')
+
+  const alert = page.locator('#target .tiny-mobile-alert')
+})
diff --git a/examples/sites/demos/mobile/app/alert/webdoc/alert.js b/examples/sites/demos/mobile/app/alert/webdoc/alert.js
index 6b4a50c78..3de5858f5 100644
--- a/examples/sites/demos/mobile/app/alert/webdoc/alert.js
+++ b/examples/sites/demos/mobile/app/alert/webdoc/alert.js
@@ -79,12 +79,12 @@ export default {
     {
       demoId: 'slot-default',
       name: {
-        'zh-CN': '自定义提示内容',
-        'en-US': 'slot-default'
+        'zh-CN': '内容插槽',
+        'en-US': 'Content slot'
       },
       desc: {
-        'zh-CN': '<p>自定义提示内容</p>',
-        'en-US': '<p>button click</p>'
+        'zh-CN': '<p>通过默认插槽自定义提示内容。</p>',
+        'en-US': '<p>Customize prompt messages through default slot.</p>'
       },
       codeFiles: ['slot-default.vue']
     }
diff --git a/examples/sites/demos/mobile/app/input/basic-usage.spec.ts b/examples/sites/demos/mobile/app/input/basic-usage.spec.ts
new file mode 100644
index 000000000..0a37563e9
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/basic-usage.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#base')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  const textarea = page.locator('.demo-input .tiny-mobile-textarea')
+
+  await expect(input).toBeVisible()
+  await expect(textarea).toBeVisible()
+
+  await input.click()
+  await expect(input).toHaveClass(/is-focus/)
+  await textarea.click()
+  await expect(textarea).toHaveClass(/is-focus/)
+
+  await expect(input).toHaveAttribute('placeholder', '请输入内容')
+  await expect(textarea).toHaveAttribute('placeholder', '用作文本框')
+
+  await input.locator('input').fill('123')
+  await expect(input.locator('input')).toHaveValue('123')
+  await textarea.locator('textarea').fill('abc')
+  await expect(textarea.locator('textarea')).toHaveValue('abc')
+})
diff --git a/examples/sites/demos/mobile/app/input/clearable.spec.ts b/examples/sites/demos/mobile/app/input/clearable.spec.ts
new file mode 100644
index 000000000..55f81c863
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/clearable.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('可一键清空', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#clearable')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+
+  await input.click()
+  await expect(input.locator('input')).toHaveValue('可一键清空')
+  await input.locator('.tiny-mobile-input__clear').click()
+  await expect(input.locator('input')).toHaveValue('')
+})
diff --git a/examples/sites/demos/mobile/app/input/counter.spec.ts b/examples/sites/demos/mobile/app/input/counter.spec.ts
new file mode 100644
index 000000000..833fa34f3
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/counter.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('输入长度限制与计数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#counter')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  const textarea = page.locator('.demo-input .tiny-mobile-textarea')
+
+  await input.locator('input').fill('12345')
+  await expect(input.locator('.tiny-mobile-input__count-inner')).toContainText('5')
+  await input.locator('input').fill('1234567890123')
+  await expect(input.locator('input')).toHaveValue('1234567890')
+
+  await textarea.locator('textarea').fill('1234567890')
+  await expect(textarea.locator('.tiny-mobile-textarea__count')).toContainText('10/20')
+  await textarea.locator('textarea').fill('12345678901234567890123')
+  await expect(textarea.locator('textarea')).toHaveValue('12345678901234567890')
+})
diff --git a/examples/sites/demos/mobile/app/input/counter.vue b/examples/sites/demos/mobile/app/input/counter.vue
index e31622b14..afba24a41 100644
--- a/examples/sites/demos/mobile/app/input/counter.vue
+++ b/examples/sites/demos/mobile/app/input/counter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo-input">
-    <tiny-input v-model="input1" counter :maxlength="20"></tiny-input>
+    <tiny-input v-model="input1" counter :maxlength="10"></tiny-input>
 
     <tiny-input v-model="input2" type="textarea" show-word-limit :maxlength="20"></tiny-input>
   </div>
diff --git a/examples/sites/demos/mobile/app/input/disabled.spec.ts b/examples/sites/demos/mobile/app/input/disabled.spec.ts
new file mode 100644
index 000000000..6d0f0fe07
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/disabled.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#disabled')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  const textarea = page.locator('.demo-input .tiny-mobile-textarea')
+
+  await expect(input).toHaveClass(/is-disabled/)
+  await input.click()
+  await expect(input).not.toHaveClass(/is-focus/)
+
+  await expect(textarea).toHaveClass(/is-disabled/)
+  await textarea.click()
+  await expect(textarea).not.toHaveClass(/is-focus/)
+})
diff --git a/examples/sites/demos/mobile/app/input/events.spec.ts b/examples/sites/demos/mobile/app/input/events.spec.ts
new file mode 100644
index 000000000..cd3b74789
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/events.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#events')
+
+  const inputs = page.locator('.demo-input-events .tiny-mobile-input input')
+
+  await inputs.first().fill('123')
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'input' })).toBeVisible()
+
+  await inputs.nth(1).fill('change')
+  await inputs.first().click()
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'change' })).toBeVisible()
+
+  await inputs.nth(2).click()
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'focus' })).toBeVisible()
+  await inputs.nth(3).click()
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'blur' })).toBeVisible()
+
+  await page.locator('.demo-input-events .tiny-mobile-input').nth(3).locator('.tiny-mobile-input__clear').click()
+  await expect(page.locator('.tiny-mobile-modal').filter({ hasText: 'clear' })).toBeVisible()
+  await expect(inputs.nth(3)).toHaveValue('')
+})
diff --git a/examples/sites/demos/mobile/app/input/methods.spec.ts b/examples/sites/demos/mobile/app/input/methods.spec.ts
new file mode 100644
index 000000000..0a67e21ae
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/methods.spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('实例方法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#methods')
+
+  const inputs = page.locator('.demo-input-methods .tiny-mobile-input')
+
+  await page.getByRole('button', { name: 'focus' }).click()
+  await expect(inputs.first()).toHaveClass(/is-focus/)
+  await page.getByRole('button', { name: 'blur' }).click()
+  await expect(inputs.first()).not.toHaveClass(/is-focus/)
+
+  await inputs.nth(1).locator('input').fill('123')
+  await page.getByRole('button', { name: 'select' }).click()
+
+  // 判断input内容是否选中
+  const selectedText = await page.evaluate(() => {
+    const selection = window.getSelection()
+    return selection.toString()
+  })
+  await expect(selectedText).toBe('123')
+})
diff --git a/examples/sites/demos/mobile/app/input/native-attributes.spec.ts b/examples/sites/demos/mobile/app/input/native-attributes.spec.ts
new file mode 100644
index 000000000..a274ec895
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/native-attributes.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框原生属性', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#native-attributes')
+
+  const inputs = page.locator('.demo-input .tiny-mobile-input input')
+
+  await expect(inputs.first()).toHaveAttribute('autofocus')
+  await expect(inputs.nth(1)).toHaveAttribute('readonly')
+  await expect(inputs.nth(2)).toHaveAttribute('autocomplete', 'on')
+  await expect(inputs.nth(3)).toHaveAttribute('step', '2')
+  await expect(inputs.nth(4)).toHaveAttribute('name', 'username')
+})
diff --git a/examples/sites/demos/mobile/app/input/native-attributes.vue b/examples/sites/demos/mobile/app/input/native-attributes.vue
index 4f1f0da96..002b12a78 100644
--- a/examples/sites/demos/mobile/app/input/native-attributes.vue
+++ b/examples/sites/demos/mobile/app/input/native-attributes.vue
@@ -18,10 +18,6 @@
       <span>step=2</span>
       <tiny-input type="number" v-model="inputStep" :step="2" placeholder="step 为 2"></tiny-input>
     </div>
-    <div class="demo-input-item">
-      <span>min=2; max=11</span>
-      <tiny-input type="number" v-model="inputMaxMin" :min="2" :max="11"></tiny-input>
-    </div>
     <div class="demo-input-item">
       <span>name</span>
       <tiny-input v-model="username" name="username"></tiny-input>
@@ -41,7 +37,6 @@ export default {
       autofocusVal: '',
       input: 'readonly',
       inputStep: 2,
-      inputMaxMin: 1,
       inputAutocomplete: '',
       username: ''
     }
diff --git a/examples/sites/demos/mobile/app/input/prefix-suffix-icon.spec.ts b/examples/sites/demos/mobile/app/input/prefix-suffix-icon.spec.ts
new file mode 100644
index 000000000..3588d9de3
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/prefix-suffix-icon.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('输入框前置与后置图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#prefix-suffix-icon')
+
+  const input1 = page.locator('.demo-input-icons .tiny-mobile-input').first()
+  const input2 = page.locator('.demo-input-icons .tiny-mobile-input').nth(1)
+
+  await expect(input1.locator('.tiny-mobile-input__prefix svg')).toBeVisible()
+  await expect(input2.locator('.tiny-mobile-input__suffix svg')).toBeVisible()
+})
diff --git a/examples/sites/demos/mobile/app/input/show-password.spec.ts b/examples/sites/demos/mobile/app/input/show-password.spec.ts
new file mode 100644
index 000000000..e2c19ff32
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/show-password.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('密码框铭文显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#show-password')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  await expect(input.locator('input')).toHaveAttribute('type', 'password')
+  await input.locator('input').fill('123abc')
+  await input.locator('.tiny-mobile-input__icon').click()
+  await expect(input.locator('input')).toHaveAttribute('type', 'text')
+  await expect(input.locator('input')).toHaveValue('123abc')
+  await input.locator('.tiny-mobile-input__icon').click()
+  await expect(input.locator('input')).toHaveAttribute('type', 'password')
+  await expect(input.locator('input')).toHaveValue('123abc')
+})
diff --git a/examples/sites/demos/mobile/app/input/slots.spec.ts b/examples/sites/demos/mobile/app/input/slots.spec.ts
new file mode 100644
index 000000000..63417adb2
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/slots.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test'
+
+test('插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#slots')
+
+  const inputs = page.locator('.demo-input .tiny-mobile-input')
+  const prependSlot = inputs.first().locator('.tiny-mobile-input-group__prepend')
+  const appendSlot = inputs.nth(1).locator('.tiny-mobile-input-group__append')
+  const prefixSlot = inputs.nth(2).locator('.tiny-mobile-input__prefix')
+  const suffixSlot = inputs.nth(3).locator('.tiny-mobile-input__suffix')
+  const titleSlot = inputs.nth(4).locator('.tiny-mobile-input__title')
+  const tipsSlot = inputs.nth(4).locator('.tiny-mobile-input__tips')
+
+  await expect(prependSlot).toBeVisible()
+  await expect(prependSlot).toContainText('Http://')
+
+  await expect(appendSlot).toBeVisible()
+  await expect(appendSlot).toContainText('.com')
+
+  await expect(prefixSlot).toBeVisible()
+  await expect(prefixSlot.locator('.tiny-svg')).toBeVisible()
+
+  await expect(suffixSlot).toBeVisible()
+  await expect(suffixSlot.locator('.tiny-svg')).toBeVisible()
+
+  await expect(titleSlot).toBeVisible()
+  await expect(titleSlot).toContainText('自定义标题')
+
+  await expect(tipsSlot).toBeVisible()
+  await expect(tipsSlot).toContainText('自定义提示')
+})
diff --git a/examples/sites/demos/mobile/app/input/slots.vue b/examples/sites/demos/mobile/app/input/slots.vue
index b8df1de82..7593adbd5 100644
--- a/examples/sites/demos/mobile/app/input/slots.vue
+++ b/examples/sites/demos/mobile/app/input/slots.vue
@@ -8,23 +8,23 @@
     </tiny-input>
     <tiny-input placeholder="prefix" v-model="input">
       <template #prefix>
-        <tiny-icon-search/>
+        <tiny-icon-search />
       </template>
     </tiny-input>
     <tiny-input placeholder="suffix" v-model="input">
       <template #suffix>
-        <tiny-icon-calendar/>
+        <tiny-icon-calendar />
       </template>
     </tiny-input>
     <br />
-    
+
     <tiny-input placeholder="suffix" v-model="input">
       <template #title>
-        <span>标题插槽内容</span>
+        <span>自定义标题</span>
       </template>
 
       <template #tips>
-        <span class="tips">提示插槽内容</span>
+        <span class="tips">自定义提示</span>
       </template>
     </tiny-input>
   </div>
@@ -38,7 +38,7 @@ export default {
   components: {
     TinyInput: Input,
     TinyIconSearch: IconSearch(),
-    TinyIconCalendar: IconCalendar(),
+    TinyIconCalendar: IconCalendar()
   },
   data() {
     return {
@@ -55,7 +55,7 @@ export default {
   background: #f5f5f5;
 }
 
-.demo-input [class^=tiny-mobile] {
+.demo-input [class^='tiny-mobile'] {
   margin-bottom: 8px;
 }
 
diff --git a/examples/sites/demos/mobile/app/input/textarea-rows-cols.spec.ts b/examples/sites/demos/mobile/app/input/textarea-rows-cols.spec.ts
new file mode 100644
index 000000000..457c05c7b
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/textarea-rows-cols.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('文本框行数与列数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#textarea-rows-cols')
+
+  const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
+
+  await expect(textarea).toHaveAttribute('rows', '3')
+  await expect(textarea).toHaveAttribute('cols', '30')
+})
diff --git a/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue b/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
index efd8eec5a..694d93cea 100644
--- a/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
+++ b/examples/sites/demos/mobile/app/input/textarea-rows-cols.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo-input">
-    <p>rows=3 cols=80</p>
-    <tiny-input type="textarea" v-model="value" :rows="rows" :cols="cols" ></tiny-input>
+    <p>rows=3 cols=30</p>
+    <tiny-input type="textarea" v-model="value" :rows="rows" :cols="cols"></tiny-input>
   </div>
 </template>
 
@@ -16,7 +16,7 @@ export default {
     return {
       value: '杭州西湖是我国著名的旅游胜地，其位于浙江省杭州市西部。西湖是中国最美丽的湖泊之一。',
       rows: 3,
-      cols: 30,
+      cols: 30
     }
   }
 }
diff --git a/examples/sites/demos/mobile/app/input/textarea-scalable.spec.ts b/examples/sites/demos/mobile/app/input/textarea-scalable.spec.ts
new file mode 100644
index 000000000..58673dfb2
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/textarea-scalable.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('文本域可缩放', () => {
+  test('可拖拽特性', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('input#textarea-scalable')
+
+    const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
+
+    await expect(textarea.first()).toHaveCSS('resize', 'none')
+    await expect(textarea.nth(1)).toHaveCSS('resize', 'vertical')
+    await expect(textarea.nth(2)).toHaveCSS('resize', 'both')
+    await expect(textarea.nth(3)).toHaveCSS('resize', 'horizontal')
+  })
+
+  test('可拖动改变大小', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('input#textarea-scalable')
+
+    const textarea = page.locator('.demo-input .tiny-mobile-textarea textarea')
+
+    await expect(textarea.nth(5)).toHaveClass(/is-autosize/)
+    await expect(textarea.nth(6)).toHaveClass(/is-autosize/)
+  })
+})
diff --git a/examples/sites/demos/mobile/app/input/textarea-scalable.vue b/examples/sites/demos/mobile/app/input/textarea-scalable.vue
index f35171e52..61e1a9c50 100644
--- a/examples/sites/demos/mobile/app/input/textarea-scalable.vue
+++ b/examples/sites/demos/mobile/app/input/textarea-scalable.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="demo-input">
-    <p>resize</p>
-    <tiny-input type="textarea" v-model="input" resize="vertical" placeholder="resize = vertical (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"  width="300px"></tiny-input>
-    <tiny-input type="textarea" v-model="input" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
+    <p>resize 可拖动调整大小</p>
+    <tiny-input type="textarea" v-model="value1" resize="none" placeholder="resize = none (default)"></tiny-input>
+    <tiny-input type="textarea" v-model="value2" resize="vertical" placeholder="resize = vertical"></tiny-input>
+    <tiny-input type="textarea" v-model="value3" resize="both" placeholder="resize = both" width="300px"></tiny-input>
+    <tiny-input type="textarea" v-model="value4" resize="horizontal" placeholder="resize = horizontal"></tiny-input>
 
-    <p>autosize</p>
-    <tiny-input type="textarea" v-model="textarea" placeholder="autosize" autosize></tiny-input>
-    <tiny-input type="textarea" v-model="textarea" placeholder="autosize = { minRows: 2, maxRows: 3 }" :autosize="{ minRows: 2, maxRows: 3 }"></tiny-input>
+    <p>autosize 自适应大小</p>
+    <tiny-input type="textarea" v-model="value5" placeholder="autosize = true" autosize></tiny-input>
+    <tiny-input
+      type="textarea"
+      v-model="value6"
+      placeholder="autosize = { minRows: 2, maxRows: 3 }"
+      :autosize="{ minRows: 2, maxRows: 3 }"
+    ></tiny-input>
   </div>
 </template>
 
@@ -21,8 +26,12 @@ export default {
   },
   data() {
     return {
-      input: '',
-      textarea: ''
+      value1: '',
+      value2: '',
+      value3: '',
+      value4: '',
+      value5: '',
+      value6: ''
     }
   }
 }
@@ -33,6 +42,8 @@ export default {
   height: 100%;
   padding: 20px 16px;
   background: #f5f5f5;
+  overflow-y: scroll;
+  box-sizing: border-box;
 }
 
 .demo-input .tiny-mobile-textarea {
diff --git a/examples/sites/demos/mobile/app/input/type-select.spec.ts b/examples/sites/demos/mobile/app/input/type-select.spec.ts
new file mode 100644
index 000000000..621402a9c
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/type-select.spec.ts
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.goto('input#type-select')
+
+  const input = page.locator('.demo-input .tiny-mobile-input')
+  const selectIcon = input.locator('.tiny-mobile-input__select-icon')
+  const menu = page.locator('.tiny-mobile-action-sheet__menu').nth(1)
+  const menuItem = page.getByText('选项2')
+
+  await expect(input.locator('.tiny-mobile-input__select')).toBeVisible()
+  await expect(selectIcon).toBeVisible()
+
+  await selectIcon.click()
+  await expect(menu).toBeVisible()
+  await menuItem.click()
+  await expect(menu).not.toBeVisible()
+  await expect(input.locator('input')).toHaveValue('选项2')
+})
diff --git a/examples/sites/demos/mobile/app/input/type.spec.ts b/examples/sites/demos/mobile/app/input/type.spec.ts
new file mode 100644
index 000000000..9dfdeb659
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/type.spec.ts
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('Input输入框类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#type')
+
+  const inputs = page.locator('.demo-input .tiny-mobile-input input')
+
+  await expect(inputs.first()).toHaveAttribute('type', 'text')
+  await expect(inputs.nth(1)).toHaveAttribute('type', 'password')
+  await expect(inputs.nth(2)).toHaveAttribute('type', 'email')
+  await expect(inputs.nth(3)).toHaveAttribute('type', 'number')
+  await expect(inputs.nth(4)).toHaveAttribute('type', 'tel')
+  await expect(inputs.nth(5)).toHaveAttribute('type', 'url')
+  await expect(inputs.nth(6)).toHaveAttribute('type', 'date')
+  await expect(inputs.nth(7)).toHaveAttribute('type', 'month')
+  await expect(inputs.nth(8)).toHaveAttribute('type', 'week')
+  await expect(inputs.nth(9)).toHaveAttribute('type', 'datetime-local')
+  await expect(inputs.nth(10)).toHaveAttribute('type', 'time')
+})
diff --git a/examples/sites/demos/mobile/app/input/validate-event.spec.ts b/examples/sites/demos/mobile/app/input/validate-event.spec.ts
new file mode 100644
index 000000000..fe66dcf6b
--- /dev/null
+++ b/examples/sites/demos/mobile/app/input/validate-event.spec.ts
@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('表单校验', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#validate-event')
+
+  const input = page.locator('.demo-input .tiny-mobile-input input')
+  const label = page.locator('.demo-input .tiny-mobile-form-item__label')
+  const errorTip = page.locator('.demo-input .tiny-mobile-input-form__error')
+
+  await expect(errorTip).not.toBeVisible()
+  await input.click()
+  await label.click()
+  await expect(errorTip).toBeVisible()
+  await expect(errorTip).toContainText('请输入活动名称')
+
+  await input.fill('123')
+  await expect(errorTip).not.toBeVisible()
+
+  await input.fill('123456789')
+  await expect(errorTip).toContainText('长度在 3 到 5 个字符')
+})
diff --git a/examples/sites/demos/mobile/app/input/webdoc/input.js b/examples/sites/demos/mobile/app/input/webdoc/input.js
index cfbc6a6f4..db62ccbd6 100644
--- a/examples/sites/demos/mobile/app/input/webdoc/input.js
+++ b/examples/sites/demos/mobile/app/input/webdoc/input.js
@@ -73,8 +73,8 @@ export default {
     {
       demoId: 'show-password',
       name: {
-        'zh-CN': '密码框',
-        'en-US': 'Password Input'
+        'zh-CN': '密码框明文展示',
+        'en-US': 'Password Input Plaintext'
       },
       desc: {
         'zh-CN':
@@ -113,13 +113,13 @@ export default {
     {
       demoId: 'prefix-suffix-icon',
       name: {
-        'zh-CN': '图标',
-        'en-US': 'Icon'
+        'zh-CN': '前置与后置图标',
+        'en-US': 'Prefix and Suffix Icon'
       },
       desc: {
-        'zh-CN': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性设置输入框头部、尾部图标</p>',
+        'zh-CN': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性分别设置输入框头部、尾部图标</p>',
         'en-US':
-          '<p>You can set the header icon or the end icon of the text box through the <code>prefix-icon, suffix-icon</code> attribute </p>'
+          '<p>You can set the header icon or the end icon of the text box through the <code>prefix-icon, suffix-icon</code> attribute respectively.</p>'
       },
       codeFiles: ['prefix-suffix-icon.vue']
     },
@@ -135,44 +135,6 @@ export default {
       },
       codeFiles: ['native-attributes.vue']
     },
-    {
-      demoId: 'methods',
-      name: {
-        'zh-CN': '实例方法',
-        'en-US': 'Methods'
-      },
-      desc: {
-        'zh-CN': '<p>可使用组件的实例方法：<code>focus | blur | select</code></p>',
-        'en-US': '<p>Those instance methods available: <code>focus | blur | select</code></p>'
-      },
-      codeFiles: ['methods.vue']
-    },
-    {
-      demoId: 'events',
-      name: {
-        'zh-CN': '事件',
-        'en-US': 'Events'
-      },
-      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        '
-      },
-      codeFiles: ['events.vue']
-    },
-    {
-      demoId: 'slots',
-      name: {
-        'zh-CN': '插槽',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN': '<p>Input 组件提供了丰富的插槽。</p>',
-        'en-US': '<p>Input component provides a rich set of slots.</p>'
-      },
-      codeFiles: ['slots.vue']
-    },
     {
       demoId: 'type-select',
       name: {
@@ -199,6 +161,44 @@ export default {
           '<p>You can set the <code>validate-event</code> attribute to trigger form validation upon input. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost</p>'
       },
       codeFiles: ['validate-event.vue']
+    },
+    {
+      demoId: 'methods',
+      name: {
+        'zh-CN': '实例方法',
+        'en-US': 'Methods'
+      },
+      desc: {
+        'zh-CN': '<p>可使用组件的实例方法：<code>focus | blur | select</code></p>',
+        'en-US': '<p>Those instance methods available: <code>focus | blur | select</code></p>'
+      },
+      codeFiles: ['methods.vue']
+    },
+    {
+      demoId: 'slots',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>Input 组件提供了丰富的插槽。</p>',
+        'en-US': '<p>Input component provides a rich set of slots.</p>'
+      },
+      codeFiles: ['slots.vue']
+    },
+    {
+      demoId: 'events',
+      name: {
+        'zh-CN': '事件',
+        'en-US': 'Events'
+      },
+      desc: {
+        'zh-CN':
+          '<p>输入框的事件，包括 <code>input</code>(输入值时触发), <code>blur</code>(失去焦点时触发), <code>focus</code>(获取焦点时触发), <code>change</code>(值改变时触发), <code>clear</code>(清除按钮时触发)。</p>',
+        'en-US':
+          '<p>Event of the text box, including: <code>input</code> (triggered when a value is entered) <code>blur</code> (triggered when the focus is lost)<code>focus</code> (triggered when the focus is obtained) <code>change</code> (triggered when the value changes) <code>clear</code> (triggered when the button is cleared).</p>'
+      },
+      codeFiles: ['events.vue']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
index b31c92ebb..8cf337de3 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
@@ -8,6 +8,7 @@
     @week-change="weekChange"
     @year-change="yearChange"
     @month-change="monthChange"
+    @mode-change="modeChange"
   >
   </tiny-calendar-view>
 </template>
@@ -37,4 +38,8 @@ const yearChange = (newVal, oldVal) => {
 const monthChange = (newVal, oldVal) => {
   Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
 }
+
+const modeChange = (val) => {
+  Modal.message({ message: `模式切换事件: ${val}`, status: 'info' })
+}
 </script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts
index d90023105..6496b8764 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts
@@ -9,6 +9,8 @@ test('事件', async ({ page }) => {
   const month6 = page.getByText('六月')
   const leftSvg = page.locator('.header-left > .tiny-svg')
   const rightSvg = page.locator('.header-right > .tiny-svg')
+  const mode = page.locator('label').nth(2)
+  const modalVal = page.getByText('模式切换事件: timeline')
   await timeBtn.click()
   await page.waitForTimeout(100)
   await leftYear.click()
@@ -22,4 +24,7 @@ test('事件', async ({ page }) => {
   await rightSvg.click()
   await page.waitForTimeout(100)
   await expect(timeInput).toHaveText('2022 年 06 月')
+  await mode.click()
+  await page.waitForTimeout(100)
+  await expect(modalVal).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event.vue b/examples/sites/demos/pc/app/calendar-view/calendar-event.vue
index c8a72f54d..fab264e98 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-event.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-event.vue
@@ -8,12 +8,13 @@
     @week-change="weekChange"
     @year-change="yearChange"
     @month-change="monthChange"
+    @mode-change="modeChange"
   >
   </tiny-calendar-view>
 </template>
 
 <script>
-import { CalendarView } from '@opentiny/vue'
+import { CalendarView, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -39,6 +40,9 @@ export default {
     },
     monthChange(newVal, oldVal) {
       Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
+    },
+    modeChange(val) {
+      Modal.message({ message: `模式切换事件: ${val}`, status: 'info' })
     }
   }
 }
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 a32547976..fc4c70368 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
@@ -1,6 +1,7 @@
 <template>
   <tiny-calendar-view
     ref="calendar"
+    v-model="selectedDates"
     :multi-select="true"
     :year="2023"
     :month="5"
@@ -24,6 +25,7 @@ const workingDays = ref([])
 const offDays = ref([])
 const holidays = ref([])
 const selectedDate = ref([])
+const selectedDates = ref([])
 
 const map = {
   workingDays,
@@ -37,6 +39,7 @@ const setDays = (type) => {
     return
   }
   map[type].value.push(...selectedDate.value)
+  selectedDates.value = []
   selectedDate.value = []
 }
 
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 ac82d2a22..6ce20f095 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
@@ -1,6 +1,7 @@
 <template>
   <tiny-calendar-view
     ref="calendar"
+    v-model="selectedDates"
     :multi-select="true"
     :year="2023"
     :month="5"
@@ -26,6 +27,7 @@ export default {
   },
   data() {
     return {
+      selectedDates: [],
       workingDays: [],
       offDays: [],
       holidays: [],
@@ -39,6 +41,7 @@ export default {
         return
       }
       this[type].push(...this.selectedDate)
+      this.selectedDates = []
       this.selectedDate = []
     },
     setDayBgColor(date) {
diff --git a/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js b/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
index a0ab9010c..76a25913a 100644
--- a/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
+++ b/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
@@ -32,11 +32,11 @@ export default {
       demoId: 'calendar-disabled-day',
       name: {
         'zh-CN': '日期禁用',
-        'en-US': ''
+        'en-US': 'Date Disabled'
       },
       desc: {
         'zh-CN': '<p>通过 <code>disabled</code> 回调函数来禁用某些日期。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US': '<p>Disable certain days via the <code>disabled</code> callback function.</p>\n'
       },
       codeFiles: ['calendar-disabled-day.vue']
     },
@@ -44,11 +44,12 @@ export default {
       demoId: 'calendar-schedule-slot',
       name: {
         'zh-CN': '日程模式插槽',
-        'en-US': ''
+        'en-US': 'Schedule Mode Slot'
       },
       desc: {
         'zh-CN': '<p>日程模式下内容区提供 weekday1-weekday7 这 7 个插槽，方便用户自定义日程展示。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>In schedule mode, the content area provides seven slots from weekday1 to weekday7 for users to customize schedule display.</p>\n'
       },
       codeFiles: ['calendar-schedule-slot.vue']
     },
@@ -56,11 +57,12 @@ export default {
       demoId: 'calendar-timeline-slot',
       name: {
         'zh-CN': '时间线插槽',
-        'en-US': ''
+        'en-US': 'Timeline Slots'
       },
       desc: {
         'zh-CN': '<p>时间下模式下提供 timeline1-timeline7 这 7 个插槽，方便用户自定义日程展示。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>In time mode, seven slots from timeline1 to timeline7 are provided for users to customize the schedule display.</p>\n'
       },
       codeFiles: ['calendar-timeline-slot.vue']
     },
@@ -68,11 +70,12 @@ export default {
       demoId: 'calendar-timeline-range',
       name: {
         'zh-CN': '时间线范围配置',
-        'en-US': ''
+        'en-US': 'Timeline Range Configuration'
       },
       desc: {
         'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>Use the dayTimes attribute to set the time range displayed in timeline mode. The default value is [8,18], and the value range is [0,23].</p>\n'
       },
       codeFiles: ['calendar-timeline-range.vue']
     },
@@ -80,11 +83,11 @@ export default {
       demoId: 'multi-select',
       name: {
         'zh-CN': '日期多选',
-        'en-US': ''
+        'en-US': 'Multiple date selection'
       },
       desc: {
         'zh-CN': '<p>设置 mult-select = true 属性后，可开启日期多选。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US': '<p>Set mult-select = true to enable multiple date selection.</p>\n'
       },
       codeFiles: ['multi-select.vue']
     },
@@ -92,12 +95,13 @@ export default {
       demoId: 'calendar-day-mark',
       name: {
         'zh-CN': '日期标记',
-        'en-US': ''
+        'en-US': 'Date Marker'
       },
       desc: {
         'zh-CN':
           '<p>通过showMark回调函数来标记某些日期，markColor属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor可选颜色同 theme</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>Use the showMark callback function to mark some dates. The markColor attribute is used to set the mark color. This function takes effect only in timeline mode and agenda mode. markColor Optional Color Same as theme</p>\n'
       },
       codeFiles: ['calendar-day-mark.vue']
     },
@@ -109,7 +113,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p>通过作用域插槽 header 自定义需要显示的头部区域。</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US': '<p>Customize the header area to be displayed through the scope slot header.</p>\n'
       },
       codeFiles: ['custom-header.vue']
     },
@@ -134,7 +138,8 @@ export default {
       desc: {
         'zh-CN':
           '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',
-        'en-US': '<p></p>\n'
+        'en-US':
+          '<p>Customize the background color of the date cell. </p>\n<p>Currently, only preset colors are supported. The options are blue, green, red, yellow, purple, cyan, and grey.</p>'
       },
       codeFiles: ['custom-day-bg-color.vue']
     },
@@ -142,11 +147,12 @@ export default {
       demoId: 'set-working-day',
       name: {
         'zh-CN': '设置工作日或节假日',
-        'en-US': ''
+        'en-US': 'Setting Workdays or Holidays'
       },
       desc: {
-        'zh-CN': '<p>可以结合日期多选，自定义背景色，工具栏插槽等功能实现设置工作日或节假日的功能</p>\n',
-        'en-US': '<p></p>\n'
+        'zh-CN': '<p>可以结合日期多选，自定义背景色，工具栏插槽等功能实现设置工作日或节假日的功能。</p>\n',
+        'en-US':
+          '<p>You can set workdays or holidays by using the functions such as selecting multiple dates, customizing background colors, and toolbar slots.</p>\n'
       },
       codeFiles: ['set-working-day.vue']
     },
@@ -154,12 +160,29 @@ export default {
       demoId: 'calendar-event',
       name: {
         'zh-CN': '事件',
-        'en-US': ''
+        'en-US': 'Event'
       },
       desc: {
         'zh-CN':
-          '<p>日历抛出的事件有以下这些：</p>\n<p>new-schedule:新增日程按钮点击事件</p>\n<p>selected-date-change:选中日期改变事件</p>\n<p>prev-week-click：上一周按钮点击事件</p>\n<p>next-week-click：下一周按钮点击事件</p>\n<p>week-change：周改变事件</p>\n<p>year-change：年改变事件</p>\n<p>month-change：月改变事件</p>\n',
-        'en-US': '<p></p>\n'
+          '<p>日历抛出的事件有以下这些：</p>\n' +
+          '<p>new-schedule：新增日程按钮点击事件</p>\n' +
+          '<p>selected-date-change：选中日期改变事件</p>\n' +
+          '<p>prev-week-click：上一周按钮点击事件</p>\n' +
+          '<p>next-week-click：下一周按钮点击事件</p>\n' +
+          '<p>week-change：周改变事件</p>\n' +
+          '<p>year-change：年改变事件</p>\n' +
+          '<p>month-change：月改变事件</p>\n' +
+          '<p>mode-change：模式切换事件</p>',
+        'en-US':
+          '<p>Calendar throws the following events:</p>\n' +
+          '<p>new-schedule: Add a schedule button click event</p>\n' +
+          '<p>selected-date-change: selected date change event</p>\n' +
+          '<p>prev-week-click: button click event of the last week</p>\n' +
+          '<p>next-week-click: button click event in the next week</p>\n' +
+          '<p>week-change: week change event</p>\n' +
+          '<p>year-change: year change event</p>\n' +
+          '<p>month-change: month change event</p>\n' +
+          '<p>mode-change: mode switching event</p>'
       },
       codeFiles: ['calendar-event.vue']
     }
diff --git a/examples/sites/demos/pc/app/cascader/slot-composition-api.vue b/examples/sites/demos/pc/app/cascader/slot-composition-api.vue
new file mode 100644
index 000000000..905dc6a88
--- /dev/null
+++ b/examples/sites/demos/pc/app/cascader/slot-composition-api.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div class="my20">自定义节点,为节点添加提示</div>
+    <tiny-cascader v-model="value1" :options="options">
+      <template #default="{ node }">
+        <span :title="node.label"> {{ node.label }} <tiny-icon-share /></span>
+      </template>
+    </tiny-cascader>
+    <div class="my20">自定义空数据插槽</div>
+    <tiny-cascader v-model="value2" :options="[]">
+      <template #no-data>
+        <div>no-data</div>
+      </template>
+    </tiny-cascader>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Cascader as TinyCascader } from '@opentiny/vue'
+import { iconShare } from '@opentiny/vue-icon'
+
+const tinyIconShare = iconShare()
+const value1 = ref('')
+const value2 = ref('')
+const options = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装',
+        children: [
+          {
+            value: 'xiangmudengji',
+            label: '项目登记'
+          },
+          {
+            value: 'huanjingzhunbei',
+            label: '环境准备'
+          },
+          {
+            value: 'anzhuangcli',
+            label: '安装 CLI'
+          },
+          {
+            value: 'chuangjianxiangmu',
+            label: '创建项目'
+          }
+        ]
+      },
+      {
+        value: 'kaifa',
+        label: '开发',
+        children: [
+          {
+            value: 'yinruzujian',
+            label: '引入组件'
+          },
+          {
+            value: 'monishuju',
+            label: '模拟数据'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'basic',
+        label: '框架风格',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout 布局'
+          },
+          {
+            value: 'color',
+            label: 'Color 色彩'
+          },
+          {
+            value: 'font',
+            label: 'Font 字体'
+          },
+          {
+            value: 'icon',
+            label: 'Icon 图标'
+          }
+        ]
+      },
+      {
+        value: 'form',
+        label: '表单组件',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio 单选框'
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          },
+          {
+            value: 'input',
+            label: 'Input 输入框'
+          },
+          {
+            value: 'number',
+            label: 'Numeric 计数器'
+          },
+          {
+            value: 'select',
+            label: 'Select 选择器'
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          },
+          {
+            value: 'switch',
+            label: 'Switch 开关'
+          },
+          {
+            value: 'slider',
+            label: 'Slider 滑块'
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          },
+          {
+            value: 'form',
+            label: 'Form 表单'
+          }
+        ]
+      },
+      {
+        value: 'data',
+        label: '数据组件',
+        children: [
+          {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          },
+          {
+            value: 'pager',
+            label: 'Pager 分页'
+          }
+        ]
+      },
+      {
+        value: 'notice',
+        label: '提示组件',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert 警告'
+          },
+          {
+            value: 'loading',
+            label: 'Loading 加载'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: '导航组件',
+        children: [
+          {
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          },
+          {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }
+        ]
+      },
+      {
+        value: 'others',
+        label: '其他组件',
+        children: [
+          {
+            value: 'rate',
+            label: 'Rate 评分'
+          },
+          {
+            value: 'tag',
+            label: 'Tag 标签'
+          },
+          {
+            value: 'usercontact',
+            label: 'UserContact 联系人'
+          },
+          {
+            value: 'slidebar',
+            label: 'SlideBar 滚动块'
+          }
+        ]
+      }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.my20 {
+  margin: 20px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/cascader/slot.spec.ts b/examples/sites/demos/pc/app/cascader/slot.spec.ts
new file mode 100644
index 000000000..2494c68be
--- /dev/null
+++ b/examples/sites/demos/pc/app/cascader/slot.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('cascader#slot')
+
+  // 自定义节点
+  await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
+  await expect(page.getByText('指南', { exact: true })).toHaveAttribute('title', '指南')
+  await page.waitForTimeout(100)
+
+  // 无数据
+  await page.getByRole('textbox', { name: '请选择' }).nth(1).click()
+  const cascader = page.locator('.tiny-cascader-menu__no-data')
+  await expect(cascader).toHaveText('no-data')
+})
diff --git a/examples/sites/demos/pc/app/cascader/slot.vue b/examples/sites/demos/pc/app/cascader/slot.vue
new file mode 100644
index 000000000..1fc4b1d62
--- /dev/null
+++ b/examples/sites/demos/pc/app/cascader/slot.vue
@@ -0,0 +1,234 @@
+<template>
+  <div>
+    <div class="my20">自定义节点,为节点添加提示</div>
+    <tiny-cascader v-model="value1" :options="options">
+      <template #default="{ node }">
+        <span :title="node.label"> {{ node.label }} <tiny-icon-share /></span>
+      </template>
+    </tiny-cascader>
+    <div class="my20">自定义空数据插槽</div>
+    <tiny-cascader v-model="value2" :options="[]">
+      <template #no-data>
+        <div>no-data</div>
+      </template>
+    </tiny-cascader>
+  </div>
+</template>
+
+<script>
+import { Cascader } from '@opentiny/vue'
+import { iconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCascader: Cascader,
+    TinyIconShare: iconShare()
+  },
+  data() {
+    return {
+      value1: '',
+      value2: '',
+      options: [
+        {
+          value: 'zhinan',
+          label: '指南',
+          children: [
+            {
+              value: 'anzhuang',
+              label: '安装',
+              children: [
+                {
+                  value: 'xiangmudengji',
+                  label: '项目登记'
+                },
+                {
+                  value: 'huanjingzhunbei',
+                  label: '环境准备'
+                },
+                {
+                  value: 'anzhuangcli',
+                  label: '安装 CLI'
+                },
+                {
+                  value: 'chuangjianxiangmu',
+                  label: '创建项目'
+                }
+              ]
+            },
+            {
+              value: 'kaifa',
+              label: '开发',
+              children: [
+                {
+                  value: 'yinruzujian',
+                  label: '引入组件'
+                },
+                {
+                  value: 'monishuju',
+                  label: '模拟数据'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          value: 'zujian',
+          label: '组件',
+          children: [
+            {
+              value: 'basic',
+              label: '框架风格',
+              children: [
+                {
+                  value: 'layout',
+                  label: 'Layout 布局'
+                },
+                {
+                  value: 'color',
+                  label: 'Color 色彩'
+                },
+                {
+                  value: 'font',
+                  label: 'Font 字体'
+                },
+                {
+                  value: 'icon',
+                  label: 'Icon 图标'
+                }
+              ]
+            },
+            {
+              value: 'form',
+              label: '表单组件',
+              children: [
+                {
+                  value: 'radio',
+                  label: 'Radio 单选框'
+                },
+                {
+                  value: 'checkbox',
+                  label: 'Checkbox 多选框'
+                },
+                {
+                  value: 'input',
+                  label: 'Input 输入框'
+                },
+                {
+                  value: 'number',
+                  label: 'Numeric 计数器'
+                },
+                {
+                  value: 'select',
+                  label: 'Select 选择器'
+                },
+                {
+                  value: 'cascader',
+                  label: 'Cascader 级联选择器'
+                },
+                {
+                  value: 'switch',
+                  label: 'Switch 开关'
+                },
+                {
+                  value: 'slider',
+                  label: 'Slider 滑块'
+                },
+                {
+                  value: 'time-picker',
+                  label: 'TimePicker 时间选择器'
+                },
+                {
+                  value: 'date-picker',
+                  label: 'DatePicker 日期选择器'
+                },
+                {
+                  value: 'form',
+                  label: 'Form 表单'
+                }
+              ]
+            },
+            {
+              value: 'data',
+              label: '数据组件',
+              children: [
+                {
+                  value: 'tree',
+                  label: 'Tree 树形控件'
+                },
+                {
+                  value: 'pager',
+                  label: 'Pager 分页'
+                }
+              ]
+            },
+            {
+              value: 'notice',
+              label: '提示组件',
+              children: [
+                {
+                  value: 'alert',
+                  label: 'Alert 警告'
+                },
+                {
+                  value: 'loading',
+                  label: 'Loading 加载'
+                }
+              ]
+            },
+            {
+              value: 'navigation',
+              label: '导航组件',
+              children: [
+                {
+                  value: 'menu',
+                  label: 'NavMenu 导航菜单'
+                },
+                {
+                  value: 'tabs',
+                  label: 'Tabs 标签页'
+                },
+                {
+                  value: 'breadcrumb',
+                  label: 'Breadcrumb 面包屑'
+                },
+                {
+                  value: 'steps',
+                  label: 'Steps 步骤条'
+                }
+              ]
+            },
+            {
+              value: 'others',
+              label: '其他组件',
+              children: [
+                {
+                  value: 'rate',
+                  label: 'Rate 评分'
+                },
+                {
+                  value: 'tag',
+                  label: 'Tag 标签'
+                },
+                {
+                  value: 'usercontact',
+                  label: 'UserContact 联系人'
+                },
+                {
+                  value: 'slidebar',
+                  label: 'SlideBar 滚动块'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.my20 {
+  margin: 20px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/cascader/webdoc/cascader.js b/examples/sites/demos/pc/app/cascader/webdoc/cascader.js
index 7a52d2c6b..ba436ae8f 100644
--- a/examples/sites/demos/pc/app/cascader/webdoc/cascader.js
+++ b/examples/sites/demos/pc/app/cascader/webdoc/cascader.js
@@ -268,6 +268,24 @@ export default {
           '<p>\n            Cascader cascade selector events include: <code>change</code>, <code>expand-change</code>, <code>blur</code>, <code>focus</code>, < code>visible-change</code>. \n            Use <code>props.emitPath</code> to set the return type of the node.\n          </p>'
       },
       codeFiles: ['events.vue']
+    },
+    {
+      demoId: 'slot',
+      name: {
+        'zh-CN': '插槽',
+        'en-US': 'Empty Data Slot'
+      },
+      desc: {
+        'zh-CN': `
+          通过 <code>default</code> 插槽，自定义级联节点。<br>
+          通过 <code>no-data</code> 插槽设置没有数据时显示的内容。
+        `,
+        'en-US': `
+          Use the <code>default</code> slot to customize the cascaded node.<br>
+          The <code>no-data</code> slot sets what is displayed when there is no data.
+        `
+      },
+      codeFiles: ['slot.vue']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/chart/amap/amap.spec.ts b/examples/sites/demos/pc/app/chart/amap/amap.spec.ts
new file mode 100644
index 000000000..3e956a1bc
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/amap/amap.spec.ts
@@ -0,0 +1,6 @@
+import { test } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-autonavi-map')
+  const chart = page.locator('#amap-base .amap-layers')
+})
diff --git a/examples/sites/demos/pc/app/chart/amap/amap.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/amap/amap.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..4fa57b3da
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/amap/amap.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts
new file mode 100644
index 000000000..90cea301d
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-bar#bar-base')
+  const chart = page.locator('#bar-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-bar#bar-demo2')
+  const chart = page.locator('#bar-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-bar#bar-demo3')
+  const chart = page.locator('#bar-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-bar#bar-demo4')
+  const chart = page.locator('#bar-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-bar#bar-demo5')
+  const chart = page.locator('#bar-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-bar#bar-demo6')
+  const chart = page.locator('#bar-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-bar#bar-demo7')
+  const chart = page.locator('#bar-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..2efab67c8
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..561c6052d
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..38a8fa9d1
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..423d105da
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..bd0a58ab5
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..c16d026eb
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo7-chromium-win32.png
new file mode 100644
index 000000000..7f0ef1898
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts b/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts
new file mode 100644
index 000000000..7dedc901d
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts
@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-baidu-map#bmap-base')
+  const chart = page.locator('#bmap-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..71ff4ead5
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts
new file mode 100644
index 000000000..79f843a1e
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-boxplot#boxplot-base')
+  const chart = page.locator('#boxplot-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+// test('multiple', async ({ page }) => {
+//   await page.goto('chart-boxplot#boxplot-multiple')
+//   const chart = page.locator('#boxplot-multiple .hui-chart')
+//   await expect(chart).toHaveScreenshot('multiple.png')
+// })
+
+test('vertical', async ({ page }) => {
+  await page.goto('chart-boxplot#boxplot-vertical')
+  const chart = page.locator('#boxplot-vertical .hui-chart')
+  await expect(chart).toHaveScreenshot('vertical.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..ce7ecd14b
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/multiple-chromium-win32.png b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/multiple-chromium-win32.png
new file mode 100644
index 000000000..bcc93fa71
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/multiple-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/vertical-chromium-win32.png b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/vertical-chromium-win32.png
new file mode 100644
index 000000000..e05a9ddfd
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/vertical-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts
new file mode 100644
index 000000000..88059adbf
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-candle#candle-base')
+  const chart = page.locator('#candle-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-candle#candle-demo2')
+  const chart = page.locator('#candle-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-candle#candle-demo3')
+  const chart = page.locator('#candle-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-candle#candle-demo4')
+  const chart = page.locator('#candle-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-candle#candle-demo5')
+  const chart = page.locator('#candle-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-candle#candle-demo6')
+  const chart = page.locator('#candle-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-candle#candle-demo7')
+  const chart = page.locator('#candle-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..a2abedbe0
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..53ea501c8
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..315137fce
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..6fdc04ef8
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..bb0405f8f
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..4ecaf20fa
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo7-chromium-win32.png
new file mode 100644
index 000000000..51ecb1fc6
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts
new file mode 100644
index 000000000..07c0f388d
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-funnel#funnel-base')
+  const chart = page.locator('#funnel-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-funnel#funnel-demo2')
+  const chart = page.locator('#funnel-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-funnel#funnel-demo3')
+  const chart = page.locator('#funnel-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-funnel#funnel-demo4')
+  const chart = page.locator('#funnel-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-funnel#funnel-demo5')
+  const chart = page.locator('#funnel-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-funnel#funnel-demo6')
+  const chart = page.locator('#funnel-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-funnel#funnel-demo7')
+  const chart = page.locator('#funnel-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..4c8b56929
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..aa4da1965
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..b4a8b6125
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..ed7c9b822
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..319755871
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..292f0592f
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo7-chromium-win32.png
new file mode 100644
index 000000000..5bbe9d37c
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts
new file mode 100644
index 000000000..51c445397
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts
@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-gauge#gauge-base')
+  const chart = page.locator('#gauge-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-gauge#gauge-demo2')
+  const chart = page.locator('#gauge-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-gauge#gauge-demo3')
+  const chart = page.locator('#gauge-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-gauge#gauge-demo4')
+  const chart = page.locator('#gauge-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-gauge#gauge-demo5')
+  const chart = page.locator('#gauge-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-gauge#gauge-demo6')
+  const chart = page.locator('#gauge-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..52eda2ffd
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..40482662c
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..e56d29c7c
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..43255055d
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..ef07a5d1a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..818251572
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/graph/graph.spec.ts b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts
new file mode 100644
index 000000000..0640ed015
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-graph#graph-base')
+  const chart = page.locator('#graph-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+// test('demo2', async ({ page }) => {
+//   await page.goto('chart-graph#graph-demo2')
+//   const chart = page.locator('#graph-demo2 .hui-chart')
+//   await expect(chart).toHaveScreenshot('demo2.png')
+// })
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-graph#graph-demo3')
+  const chart = page.locator('#graph-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..89e06142e
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..d0f3e6261
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..f9c813c82
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts
new file mode 100644
index 000000000..766e41868
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-heatmap#heatmap-base')
+  const chart = page.locator('#heatmap-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-heatmap#heatmap-demo2')
+  const chart = page.locator('#heatmap-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-heatmap#heatmap-demo3')
+  const chart = page.locator('#heatmap-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-heatmap#heatmap-demo4')
+  const chart = page.locator('#heatmap-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-heatmap#heatmap-demo5')
+  const chart = page.locator('#heatmap-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..63220dac5
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..57c59472a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..96b934d92
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..3dbe5bc6f
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..66619ad2f
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts
new file mode 100644
index 000000000..38cb368da
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts
@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-base')
+  const chart = page.locator('#histogram-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo2')
+  const chart = page.locator('#histogram-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo3')
+  const chart = page.locator('#histogram-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo4')
+  const chart = page.locator('#histogram-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo5')
+  const chart = page.locator('#histogram-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo6')
+  const chart = page.locator('#histogram-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo7')
+  const chart = page.locator('#histogram-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
+
+test('demo8', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo8')
+  const chart = page.locator('#histogram-demo8 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo8.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..099504df7
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..d2d25629f
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..8a03980bb
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..ad41b599f
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..d43513227
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..49c1948b6
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo7-chromium-win32.png
new file mode 100644
index 000000000..ab5b84c2b
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo8-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo8-chromium-win32.png
new file mode 100644
index 000000000..7d4f4d01b
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo8-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts b/examples/sites/demos/pc/app/chart/line/line.spec.ts
new file mode 100644
index 000000000..f6cf72f05
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/line/line.spec.ts
@@ -0,0 +1,55 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-line#line-base')
+  const chart = page.locator('#line-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-line#line-demo2')
+  const chart = page.locator('#line-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-line#line-demo3')
+  const chart = page.locator('#line-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-line#line-demo4')
+  const chart = page.locator('#line-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-line#line-demo5')
+  const chart = page.locator('#line-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-line#line-demo6')
+  const chart = page.locator('#line-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-line#line-demo7')
+  const chart = page.locator('#line-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
+
+test('demo8', async ({ page }) => {
+  await page.goto('chart-line#line-demo8')
+  const chart = page.locator('#line-demo8 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo8.png')
+})
+
+test('demo9', async ({ page }) => {
+  await page.goto('chart-line#line-demo9')
+  const chart = page.locator('#line-demo9 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo9.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..9e284a0ad
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..39f0eb96a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..c72da9c18
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..6ddd9e6de
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..d2f51b852
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..600a92b42
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo7-chromium-win32.png
new file mode 100644
index 000000000..1e56f48df
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo8-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo8-chromium-win32.png
new file mode 100644
index 000000000..2567177ae
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo8-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo9-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo9-chromium-win32.png
new file mode 100644
index 000000000..2358aff33
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo9-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/liquidfill/liquidfill.spec.ts b/examples/sites/demos/pc/app/chart/liquidfill/liquidfill.spec.ts
new file mode 100644
index 000000000..7fa7e3902
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/liquidfill/liquidfill.spec.ts
@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-liquidfill#liquidfill-demo5')
+  const chart = page.locator('#liquidfill-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/liquidfill/liquidfill.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/liquidfill/liquidfill.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..e0d3b3e91
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/liquidfill/liquidfill.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/map/base-composition-api.vue b/examples/sites/demos/pc/app/chart/map/base-composition-api.vue
index ee52922ca..6944c8d16 100644
--- a/examples/sites/demos/pc/app/chart/map/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/chart/map/base-composition-api.vue
@@ -12,6 +12,7 @@
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
 import { ChartMap as TinyChartMap } from '@opentiny/vue'
+import chinaData from './china.js'
 
 const chartData = ref({
   columns: ['位置', 'GDP'],
@@ -30,11 +31,15 @@ const chartSettings = ref({
   }
 })
 
+const proxy = getCurrentInstance().appContext.config.globalProperties
+
 if (window._map_china) {
   chartSettings.value.mapOrigin = window._map_china
-} else {
-  getCurrentInstance().appContext.config.globalProperties.$service.network.get('services/mapChina').then(({ data }) => {
+} else if (proxy.$service?.network) {
+  proxy.$service.network.get('services/mapChina').then(({ data }) => {
     chartSettings.value.mapOrigin = data
   })
+} else if (chinaData) {
+  chartSettings.value.mapOrigin = chinaData
 }
 </script>
diff --git a/examples/sites/demos/pc/app/chart/map/base.vue b/examples/sites/demos/pc/app/chart/map/base.vue
index 094de628c..bb0420f1b 100644
--- a/examples/sites/demos/pc/app/chart/map/base.vue
+++ b/examples/sites/demos/pc/app/chart/map/base.vue
@@ -11,6 +11,7 @@
 
 <script lang="jsx">
 import { ChartMap } from '@opentiny/vue'
+import chinaData from './china.js'
 
 export default {
   components: {
@@ -43,8 +44,8 @@ export default {
       this.$service.network.get('services/mapChina').then(({ data }) => {
         this.chartSettings.mapOrigin = data
       })
-    } else {
-      // 没有this.$service.network则空操作，防止js报错
+    } else if (chinaData) {
+      this.chartSettings.mapOrigin = chinaData
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/chart/map/map.spec.ts b/examples/sites/demos/pc/app/chart/map/map.spec.ts
new file mode 100644
index 000000000..1dd1d50e3
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/map/map.spec.ts
@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-map#map-base')
+  const chart = page.locator('#map-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/map/map.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/map/map.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..114932113
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/map/map.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts
new file mode 100644
index 000000000..d85eba5cf
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-pie#pie-base')
+  const chart = page.locator('#pie-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo2')
+  const chart = page.locator('#pie-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo3')
+  const chart = page.locator('#pie-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo4')
+  const chart = page.locator('#pie-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo5')
+  const chart = page.locator('#pie-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo6')
+  const chart = page.locator('#pie-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo7')
+  const chart = page.locator('#pie-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..6764364ba
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..70d7619e8
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..b4347a7cc
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..bfd7ba8fa
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..90d916824
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..70d7619e8
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo7-chromium-win32.png
new file mode 100644
index 000000000..addceb4c5
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/process/base-composition-api.vue b/examples/sites/demos/pc/app/chart/process/base-composition-api.vue
new file mode 100644
index 000000000..cb47d4072
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/base-composition-api.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  // 图表名称
+  name: 'ProcessBarChart',
+  // 主题,默认值'light'
+  theme: 'light',
+  // Padding控制图表距离容器的上、右、下、左padding值
+  padding: [32, 32, 0, 32],
+  // 颜色组，循环使用
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+  // 数据
+  data: [
+    { name: 'UniEPMgr', value: 80 },
+    { name: 'SMLoglic', value: 65 },
+    { name: 'SSO', value: 45 },
+    { name: 'APIMgr', value: 20 },
+    { name: 'Logtransfer', value: 12 }
+  ]
+})
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/base.vue b/examples/sites/demos/pc/app/chart/process/base.vue
new file mode 100644
index 000000000..e5531cd4c
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/base.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        // 图表名称
+        name: 'ProcessBarChart',
+        // 主题,默认值'light'
+        theme: 'light',
+        // Padding控制图表距离容器的上、右、下、左padding值
+        padding: [32, 32, 0, 32],
+        // 颜色组，循环使用
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+        // 数据
+        data: [
+          { name: 'UniEPMgr', value: 80 },
+          { name: 'SMLoglic', value: 65 },
+          { name: 'SSO', value: 45 },
+          { name: 'APIMgr', value: 20 },
+          { name: 'Logtransfer', value: 12 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo2-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo2-composition-api.vue
new file mode 100644
index 000000000..f5fe332e7
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo2-composition-api.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  // 图表名称
+  name: 'ProcessBarChart',
+  // 主题,默认值'light'
+  theme: 'light',
+  // Padding控制图表距离容器的上、右、下、左padding值
+  padding: [32, 32, 0, 32],
+  // 颜色组，循环使用
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+  barWidth: 25,
+  unit: '',
+  calibrationValue: 200,
+  // 数据
+  data: [
+    { name: 'UniEPMgr', value: 80 },
+    { name: 'SMLoglic', value: 65 },
+    { name: 'SSO', value: 45 },
+    { name: 'APIMgr', value: 20 },
+    { name: 'Logtransfer', value: 12 }
+  ]
+})
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo2.vue b/examples/sites/demos/pc/app/chart/process/demo2.vue
new file mode 100644
index 000000000..6a04e8f88
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo2.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        // 图表名称
+        name: 'ProcessBarChart',
+        // 主题,默认值'light'
+        theme: 'light',
+        // Padding控制图表距离容器的上、右、下、左padding值
+        padding: [32, 32, 0, 32],
+        // 颜色组，循环使用
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+        barWidth: 25,
+        unit: '',
+        calibrationValue: 200,
+        // 数据
+        data: [
+          { name: 'UniEPMgr', value: 80 },
+          { name: 'SMLoglic', value: 65 },
+          { name: 'SSO', value: 45 },
+          { name: 'APIMgr', value: 20 },
+          { name: 'Logtransfer', value: 12 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo3-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo3-composition-api.vue
new file mode 100644
index 000000000..0e39ec401
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo3-composition-api.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  // 图表名称
+  name: 'StackProcessBarChart',
+  // 主题,默认值'light'
+  theme: 'light',
+  // Padding控制图表距离容器的上、右、下、左padding值
+  padding: [32, 32, 0, 32],
+  // 颜色组，循环使用
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+  barWidth: 25,
+  calibrationValue: 250,
+  // 数据
+  data: [
+    {
+      name: 'China',
+      children: [
+        { type: 'Game', value: 30 },
+        { type: 'Move', value: 20 },
+        { type: 'Animation', value: 45 },
+        { type: 'Fiction', value: 60 }
+      ]
+    },
+    {
+      name: 'Mexico',
+      children: [
+        { type: 'Game', value: 12 },
+        { type: 'Move', value: 14 },
+        { type: 'Animation', value: 33 },
+        { type: 'Fiction', value: 44 }
+      ]
+    },
+    {
+      name: 'Canada',
+      children: [
+        { type: 'Game', value: 35 },
+        { type: 'Move', value: 45 },
+        { type: 'Animation', value: 19 },
+        { type: 'Fiction', value: 33 }
+      ]
+    },
+    {
+      name: 'Sweden',
+      children: [
+        { type: 'Game', value: 34 },
+        { type: 'Move', value: 10 },
+        { type: 'Animation', value: 8 },
+        { type: 'Fiction', value: 66 }
+      ]
+    },
+    {
+      name: 'Russia',
+      children: [
+        { type: 'Game', value: 77 },
+        { type: 'Move', value: 44 },
+        { type: 'Animation', value: 55 },
+        { type: 'Fiction', value: 66 }
+      ]
+    }
+  ]
+})
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo3.vue b/examples/sites/demos/pc/app/chart/process/demo3.vue
new file mode 100644
index 000000000..ed9d6c1ac
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo3.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        // 图表名称
+        name: 'StackProcessBarChart',
+        // 主题,默认值'light'
+        theme: 'light',
+        // Padding控制图表距离容器的上、右、下、左padding值
+        padding: [32, 32, 0, 32],
+        // 颜色组，循环使用
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+        barWidth: 25,
+        calibrationValue: 250,
+        // 数据
+        data: [
+          {
+            name: 'China',
+            children: [
+              { type: 'Game', value: 30 },
+              { type: 'Move', value: 20 },
+              { type: 'Animation', value: 45 },
+              { type: 'Fiction', value: 60 }
+            ]
+          },
+          {
+            name: 'Mexico',
+            children: [
+              { type: 'Game', value: 12 },
+              { type: 'Move', value: 14 },
+              { type: 'Animation', value: 33 },
+              { type: 'Fiction', value: 44 }
+            ]
+          },
+          {
+            name: 'Canada',
+            children: [
+              { type: 'Game', value: 35 },
+              { type: 'Move', value: 45 },
+              { type: 'Animation', value: 19 },
+              { type: 'Fiction', value: 33 }
+            ]
+          },
+          {
+            name: 'Sweden',
+            children: [
+              { type: 'Game', value: 34 },
+              { type: 'Move', value: 10 },
+              { type: 'Animation', value: 8 },
+              { type: 'Fiction', value: 66 }
+            ]
+          },
+          {
+            name: 'Russia',
+            children: [
+              { type: 'Game', value: 77 },
+              { type: 'Move', value: 44 },
+              { type: 'Animation', value: 55 },
+              { type: 'Fiction', value: 66 }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo4-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo4-composition-api.vue
new file mode 100644
index 000000000..58af2e6c5
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo4-composition-api.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  name: 'ProcessBarChart',
+  theme: 'hwCloud-light',
+  padding: [32, 32, 0, 32],
+  state: {
+    error: 75,
+    warning: 60,
+    subwarning: 50,
+    success: 20
+  },
+  data: [
+    { name: 'UniEPMgr', value: 80 },
+    { name: 'SMLoglic', value: 65 },
+    { name: 'SSO', value: 55 },
+    { name: 'APIMgr', value: 35 },
+    { name: 'Logtransfer', value: 12 }
+  ]
+})
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo4.vue b/examples/sites/demos/pc/app/chart/process/demo4.vue
new file mode 100644
index 000000000..43bfa1bac
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo4.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        name: 'ProcessBarChart',
+        theme: 'hwCloud-light',
+        padding: [32, 32, 0, 32],
+        state: {
+          error: 75,
+          warning: 60,
+          subwarning: 50,
+          success: 20
+        },
+        data: [
+          { name: 'UniEPMgr', value: 80 },
+          { name: 'SMLoglic', value: 65 },
+          { name: 'SSO', value: 55 },
+          { name: 'APIMgr', value: 35 },
+          { name: 'Logtransfer', value: 12 }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo5-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo5-composition-api.vue
new file mode 100644
index 000000000..aa8b135c5
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo5-composition-api.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  name: 'ProcessBarChart',
+  theme: 'hwCloud-light',
+  padding: [32, 32, 0, 32],
+  state: {
+    error: 75,
+    warning: 60,
+    subwarning: 40
+  },
+  data: [
+    { name: 'UniEPMgr', value: 80 },
+    { name: 'SMLoglic', value: 65 },
+    { name: 'SSO', value: 55 },
+    { name: 'APIMgr', value: 35 },
+    { name: null, value: null }
+  ]
+})
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo5.vue b/examples/sites/demos/pc/app/chart/process/demo5.vue
new file mode 100644
index 000000000..76a9db01e
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo5.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        name: 'ProcessBarChart',
+        theme: 'hwCloud-light',
+        padding: [32, 32, 0, 32],
+        state: {
+          error: 75,
+          warning: 60,
+          subwarning: 40
+        },
+        data: [
+          { name: 'UniEPMgr', value: 80 },
+          { name: 'SMLoglic', value: 65 },
+          { name: 'SSO', value: 55 },
+          { name: 'APIMgr', value: 35 },
+          { name: null, value: null }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo6-composition-api.vue b/examples/sites/demos/pc/app/chart/process/demo6-composition-api.vue
new file mode 100644
index 000000000..846e1e878
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo6-composition-api.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  name: 'ProcessBarChart',
+  theme: 'light',
+  type: 'double-sides',
+  padding: [48, '6%', 20, '6%'],
+  color: ['#00aaee', '#41ba41'],
+  legend: {
+    show: true,
+    right: '3%',
+    left: 'auto',
+    top: '3%'
+  },
+  data: [
+    {
+      name: 'China',
+      children: [
+        { name: 'Game', value: 30 },
+        { name: 'Move', value: 20 },
+        { name: 'Animation', value: 45 },
+        { name: 'Fiction', value: 60 }
+      ]
+    },
+    {
+      name: 'Mexico',
+      children: [
+        { name: 'School', value: 12 },
+        { name: 'Hospital', value: 14 },
+        { name: 'Cinema', value: 33 },
+        { name: 'Library', value: 44 }
+      ]
+    }
+  ]
+})
+</script>
diff --git a/examples/sites/demos/pc/app/chart/process/demo6.vue b/examples/sites/demos/pc/app/chart/process/demo6.vue
new file mode 100644
index 000000000..b092b6a6c
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/process/demo6.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        name: 'ProcessBarChart',
+        theme: 'light',
+        type: 'double-sides',
+        padding: [48, '6%', 20, '6%'],
+        color: ['#00aaee', '#41ba41'],
+        legend: {
+          show: true,
+          right: '3%',
+          left: 'auto',
+          top: '3%'
+        },
+        data: [
+          {
+            name: 'China',
+            children: [
+              { name: 'Game', value: 30 },
+              { name: 'Move', value: 20 },
+              { name: 'Animation', value: 45 },
+              { name: 'Fiction', value: 60 }
+            ]
+          },
+          {
+            name: 'Mexico',
+            children: [
+              { name: 'School', value: 12 },
+              { name: 'Hospital', value: 14 },
+              { name: 'Cinema', value: 33 },
+              { name: 'Library', value: 44 }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts
new file mode 100644
index 000000000..30ed63e55
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-radar#radar-base')
+  const chart = page.locator('#radar-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-radar#radar-demo2')
+  const chart = page.locator('#radar-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-radar#radar-demo3')
+  const chart = page.locator('#radar-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..04808e52d
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..94cda2b42
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..ce2b90f5a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts
new file mode 100644
index 000000000..96d222a4d
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-ring#ring-base')
+  const chart = page.locator('#ring-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo2')
+  const chart = page.locator('#ring-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo3')
+  const chart = page.locator('#ring-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo4')
+  const chart = page.locator('#ring-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo5')
+  const chart = page.locator('#ring-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-ring#ring-demo6')
+  const chart = page.locator('#ring-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('ring-title', async ({ page }) => {
+  await page.goto('chart-ring#ring-ring-title')
+  const chart = page.locator('#ring-ring-title .hui-chart')
+  await expect(chart).toHaveScreenshot('ring-title.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..7758fb652
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..d87f3328a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..8fb1e7c1a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..68552aea0
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..d87f3328a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..ef406f578
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/ring-title-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/ring-title-chromium-win32.png
new file mode 100644
index 000000000..db1f28854
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/ring-title-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts
new file mode 100644
index 000000000..3fde1b92e
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-sankey#sankey-base')
+  const chart = page.locator('#sankey-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-sankey#sankey-demo2')
+  const chart = page.locator('#sankey-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..24bd58d26
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..b3f53494b
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts
new file mode 100644
index 000000000..18bbdaac5
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts
@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-base')
+  const chart = page.locator('#scatter-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo2')
+  const chart = page.locator('#scatter-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo3')
+  const chart = page.locator('#scatter-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo4')
+  const chart = page.locator('#scatter-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo5')
+  const chart = page.locator('#scatter-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo6')
+  const chart = page.locator('#scatter-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo7')
+  const chart = page.locator('#scatter-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
+
+test('demo8', async ({ page }) => {
+  await page.goto('chart-scatter#scatter-demo8')
+  const chart = page.locator('#scatter-demo8 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo8.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..4a3255629
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..6cdad022a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..5a2a23ec0
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..885f544e8
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..604fa9660
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo6-chromium-win32.png
new file mode 100644
index 000000000..8fdbd05e6
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo7-chromium-win32.png
new file mode 100644
index 000000000..35f9db217
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo8-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo8-chromium-win32.png
new file mode 100644
index 000000000..37880bc43
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo8-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts
new file mode 100644
index 000000000..66e9b8dcf
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-sunburst#sunburst-base')
+  const chart = page.locator('#sunburst-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-sunburst#sunburst-demo2')
+  const chart = page.locator('#sunburst-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-sunburst#sunburst-demo3')
+  const chart = page.locator('#sunburst-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..80ca2b72f
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..3e9599b41
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..7c88af7ff
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts
new file mode 100644
index 000000000..9190224c1
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-tree#tree-base')
+  const chart = page.locator('#tree-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-tree#tree-demo2')
+  const chart = page.locator('#tree-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-tree#tree-demo3')
+  const chart = page.locator('#tree-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-tree#tree-demo4')
+  const chart = page.locator('#tree-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-tree#tree-demo5')
+  const chart = page.locator('#tree-demo5 .hui-chart').first()
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..8f36cadd1
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..3fcc3d05d
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..f64683f78
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..86a7677e0
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..583acc1ce
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts
new file mode 100644
index 000000000..dcecc03f6
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-base')
+  const chart = page.locator('#waterfall-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-demo2')
+  const chart = page.locator('#waterfall-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-demo3')
+  const chart = page.locator('#waterfall-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-demo4')
+  const chart = page.locator('#waterfall-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-waterfall#waterfall-demo5')
+  const chart = page.locator('#waterfall-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..b80b9c34b
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..b66e4fb7d
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..af7769f43
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..9e9dd4e4b
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo5-chromium-win32.png
new file mode 100644
index 000000000..afe5d62f6
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-process.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-process.cn.md
new file mode 100644
index 000000000..98871a548
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-process.cn.md
@@ -0,0 +1,7 @@
+---
+title: Chart 图表
+---
+
+# Chart 图表
+
+<div>基于 eCharts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-process.en.md b/examples/sites/demos/pc/app/chart/webdoc/chart-process.en.md
new file mode 100644
index 000000000..49b1f3f4e
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-process.en.md
@@ -0,0 +1,7 @@
+---
+title: Chart
+---
+
+# Chart
+
+<div>Encapsulated based on eCharts, a pure Javascript chart library.</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-process.js b/examples/sites/demos/pc/app/chart/webdoc/chart-process.js
new file mode 100644
index 000000000..5aa1237ef
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-process.js
@@ -0,0 +1,55 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'process-base',
+      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+      'desc': {
+        'zh-CN':
+          '<p>可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE 9/10/11，Chrome，Firefox，Safari 等）底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。</p>\n',
+        'en-US':
+          '<p> can run smoothly on PCs and mobile devices and is compatible with most browsers. (Internet Explorer 9/10/11, Chrome, Firefox, Safari, etc.) The bottom layer relies on the lightweight Canvas class library ZRender to provide intuitive, vivid, interactive, and highly personalized data visualization charts. </p>\n'
+      },
+      'codeFiles': ['process/base.vue']
+    },
+    {
+      'demoId': 'process-demo2',
+      'name': { 'zh-CN': '自定义', 'en-US': 'customizing' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo2.vue']
+    },
+    {
+      'demoId': 'process-demo3',
+      'name': { 'zh-CN': '堆叠', 'en-US': 'Stacking' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo3.vue']
+    },
+    {
+      'demoId': 'process-demo4',
+      'name': { 'zh-CN': '不同状态', 'en-US': 'Different states' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo4.vue']
+    },
+    {
+      'demoId': 'process-demo5',
+      'name': { 'zh-CN': '数据缺省', 'en-US': 'data default' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo5.vue']
+    },
+    {
+      'demoId': 'process-demo6',
+      'name': { 'zh-CN': '双向', 'en-US': 'Two-way' },
+      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'codeFiles': ['process/demo6.vue']
+    }
+  ],
+  apis: [{ 'name': 'chart-process', 'type': 'component', 'props': [], 'events': [], 'slots': [] }],
+  types: [
+    {
+      name: 'options',
+      type: 'interface',
+      code: ``
+    }
+  ]
+}
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.cn.md b/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.cn.md
new file mode 100644
index 000000000..98871a548
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.cn.md
@@ -0,0 +1,7 @@
+---
+title: Chart 图表
+---
+
+# Chart 图表
+
+<div>基于 eCharts 封装，一个纯 Javascript 的图表库。</div>
diff --git a/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.en.md b/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.en.md
new file mode 100644
index 000000000..49b1f3f4e
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/webdoc/chart-process.json.en.md
@@ -0,0 +1,7 @@
+---
+title: Chart
+---
+
+# Chart
+
+<div>Encapsulated based on eCharts, a pure Javascript chart library.</div>
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts
new file mode 100644
index 000000000..8b4669305
--- /dev/null
+++ b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-wordcloud#wordcloud-base')
+  const chart = page.locator('#wordcloud-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-wordcloud#wordcloud-demo2')
+  const chart = page.locator('#wordcloud-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-wordcloud#wordcloud-demo3')
+  const chart = page.locator('#wordcloud-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-wordcloud#wordcloud-demo4')
+  const chart = page.locator('#wordcloud-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/base-chromium-win32.png
new file mode 100644
index 000000000..79286875a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo2-chromium-win32.png
new file mode 100644
index 000000000..981d60044
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo3-chromium-win32.png
new file mode 100644
index 000000000..36110711a
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo4-chromium-win32.png
new file mode 100644
index 000000000..3cbed0bb4
Binary files /dev/null and b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/company/custom-service.spec.ts b/examples/sites/demos/pc/app/company/custom-service.spec.ts
index b353bcc67..9f402f442 100644
--- a/examples/sites/demos/pc/app/company/custom-service.spec.ts
+++ b/examples/sites/demos/pc/app/company/custom-service.spec.ts
@@ -9,6 +9,7 @@ test('自定义服务', async ({ page }) => {
   const count = 2
   const companys = ['一', '二']
   const modal = page.locator('.tiny-modal')
+  await page.waitForTimeout(200)
 
   // 展开
   await page.locator('.tiny-select .tiny-input__suffix .tiny-svg').click()
@@ -24,6 +25,6 @@ test('自定义服务', async ({ page }) => {
   await input.hover()
 
   // 清空
-  await page.locator('.tiny-select .tiny-input__suffix .tiny-svg').click()
+  await page.locator('.tiny-select .tiny-input__suffix .tiny-svg.icon-close').click()
   await expect(input).toHaveValue('')
 })
diff --git a/examples/sites/demos/pc/app/country/custom-service.spec.js b/examples/sites/demos/pc/app/country/custom-service.spec.js
index bd8854f87..7ec8ba3c2 100644
--- a/examples/sites/demos/pc/app/country/custom-service.spec.js
+++ b/examples/sites/demos/pc/app/country/custom-service.spec.js
@@ -6,7 +6,7 @@ test('自定义服务', async ({ page }) => {
 
   const select = page.locator('.tiny-select')
   const item = page.getByText('France')
-  const clear = page.locator('.tiny-select .tiny-svg')
+  const clear = page.locator('.tiny-select .tiny-svg.icon-close')
   // 点击选中
   await select.click()
   await item.click()
diff --git a/examples/sites/demos/pc/app/credit-card-form/background-image-composition-api.vue b/examples/sites/demos/pc/app/credit-card-form/background-image-composition-api.vue
deleted file mode 100644
index 689f98909..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/background-image-composition-api.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <tiny-credit-card-form :form-data="formData" :background-image="backgroundImage"></tiny-credit-card-form>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { CreditCardForm as TinyCreditCardForm } from '@opentiny/vue'
-
-const backgroundImage = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
-const formData = ref({
-  cardName: '',
-  cardNumber: '',
-  cardMonth: '',
-  cardYear: '',
-  cardCvv: ''
-})
-</script>
diff --git a/examples/sites/demos/pc/app/credit-card-form/background-image.vue b/examples/sites/demos/pc/app/credit-card-form/background-image.vue
deleted file mode 100644
index cda8cc4ab..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/background-image.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <tiny-credit-card-form :form-data="formData" :background-image="backgroundImage"></tiny-credit-card-form>
-</template>
-
-<script lang="jsx">
-import { CreditCardForm } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCreditCardForm: CreditCardForm
-  },
-  data() {
-    return {
-      backgroundImage: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
-      formData: {
-        cardName: '',
-        cardNumber: '',
-        cardMonth: '',
-        cardYear: '',
-        cardCvv: ''
-      }
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/credit-card-form/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/credit-card-form/basic-usage-composition-api.vue
deleted file mode 100644
index d16256624..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/basic-usage-composition-api.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <tiny-credit-card-form :form-data="formData"></tiny-credit-card-form>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { CreditCardForm as TinyCreditCardForm } from '@opentiny/vue'
-
-const formData = ref({
-  cardName: '',
-  cardNumber: '',
-  cardMonth: '',
-  cardYear: '',
-  cardCvv: ''
-})
-</script>
diff --git a/examples/sites/demos/pc/app/credit-card-form/basic-usage.vue b/examples/sites/demos/pc/app/credit-card-form/basic-usage.vue
deleted file mode 100644
index c89cb1d71..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/basic-usage.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <tiny-credit-card-form :form-data="formData"></tiny-credit-card-form>
-</template>
-
-<script lang="jsx">
-import { CreditCardForm } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCreditCardForm: CreditCardForm
-  },
-  data() {
-    return {
-      formData: {
-        cardName: '',
-        cardNumber: '',
-        cardMonth: '',
-        cardYear: '',
-        cardCvv: ''
-      }
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/credit-card-form/credit-card-form-events-composition-api.vue b/examples/sites/demos/pc/app/credit-card-form/credit-card-form-events-composition-api.vue
deleted file mode 100644
index 1ec6f0ee6..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/credit-card-form-events-composition-api.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <tiny-credit-card-form
-    :form-data="formData"
-    @submit="submit"
-    @input-card-cvv="inputCardCvv"
-    @input-card-month="inputCardMonth"
-    @input-card-name="inputCardName"
-    @input-card-number="inputCardNumber"
-    @input-card-year="inputCardYear"
-  ></tiny-credit-card-form>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { CreditCardForm as TinyCreditCardForm, Modal } from '@opentiny/vue'
-
-const formData = ref({
-  cardName: '',
-  cardNumber: '',
-  cardMonth: '',
-  cardYear: '',
-  cardCvv: ''
-})
-
-function inputCardCvv(val) {
-  Modal.message({ message: 'CCV 输入的值:' + val, status: 'info' })
-}
-
-function inputCardYear(val) {
-  Modal.message({ message: '选择的年份:' + val, status: 'info' })
-}
-
-function inputCardMonth(val) {
-  Modal.message({ message: '选择的月份:' + val, status: 'info' })
-}
-
-function inputCardName(val) {
-  Modal.message({ message: '输入的持卡者:' + val, status: 'info' })
-}
-
-function inputCardNumber(val) {
-  Modal.message({ message: '输入的卡号:' + val, status: 'info' })
-}
-
-function submit(val) {
-  Modal.message({
-    message: `已提交的信息为：${JSON.stringify(val)}`,
-    status: 'info'
-  })
-}
-</script>
diff --git a/examples/sites/demos/pc/app/credit-card-form/credit-card-form-events.vue b/examples/sites/demos/pc/app/credit-card-form/credit-card-form-events.vue
deleted file mode 100644
index ff9e08211..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/credit-card-form-events.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <tiny-credit-card-form
-    :form-data="formData"
-    @submit="submit"
-    @input-card-cvv="inputCardCvv"
-    @input-card-month="inputCardMonth"
-    @input-card-name="inputCardName"
-    @input-card-number="inputCardNumber"
-    @input-card-year="inputCardYear"
-  ></tiny-credit-card-form>
-</template>
-
-<script lang="jsx">
-import { CreditCardForm, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCreditCardForm: CreditCardForm
-  },
-  data() {
-    return {
-      formData: {
-        cardName: '',
-        cardNumber: '',
-        cardMonth: '',
-        cardYear: '',
-        cardCvv: ''
-      }
-    }
-  },
-  methods: {
-    inputCardCvv(val) {
-      Modal.message({ message: 'CCV 输入的值:' + val, status: 'info' })
-    },
-    inputCardYear(val) {
-      Modal.message({ message: '选择的年份:' + val, status: 'info' })
-    },
-    inputCardMonth(val) {
-      Modal.message({ message: '选择的月份:' + val, status: 'info' })
-    },
-    inputCardName(val) {
-      Modal.message({ message: '输入的持卡者:' + val, status: 'info' })
-    },
-    inputCardNumber(val) {
-      Modal.message({ message: '输入的卡号:' + val, status: 'info' })
-    },
-    submit(val) {
-      Modal.message({
-        message: `已提交的信息为：${JSON.stringify(val)}`,
-        status: 'info'
-      })
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.cn.md b/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.cn.md
deleted file mode 100644
index fbe7d7b4c..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: CreditCardForm 信用卡表单
----
-
-# CreditCardForm 信用卡表单
-
-<div>通过表单输入实时改变信用卡卡片的相关信息。</div>
diff --git a/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.en.md b/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.en.md
deleted file mode 100644
index b22cc2c5d..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: CreditCardForm
----
-
-# CreditCardForm
-
-<div>Change information about credit cards in real time through form input.</div>
diff --git a/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.js b/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.js
deleted file mode 100644
index 718419389..000000000
--- a/examples/sites/demos/pc/app/credit-card-form/webdoc/credit-card-form.js
+++ /dev/null
@@ -1,46 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  metaData: {
-    deprecated: '3.12.0',
-    removed: '3.15.0'
-  },
-  demos: [
-    {
-      demoId: 'basic-usage',
-      name: {
-        'zh-CN': '基本用法',
-        'en-US': 'Basic Usage'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['basic-usage.vue']
-    },
-    {
-      demoId: 'background-image',
-      name: {
-        'zh-CN': '背景图片',
-        'en-US': 'Background Image'
-      },
-      desc: {
-        'zh-CN': '<p>通过 <code>background-image</code> 设置信用卡背景图片。</p>\n',
-        'en-US': '<p>Use <code>background-image</code> to set the credit card background image. </p>\n'
-      },
-      codeFiles: ['background-image.vue']
-    },
-    {
-      demoId: 'credit-card-form-events',
-      name: {
-        'zh-CN': '事件',
-        'en-US': 'Event'
-      },
-      desc: {
-        'zh-CN': '详细用法参考如下示例',
-        'en-US': 'For details, see the following example.'
-      },
-      codeFiles: ['credit-card-form-events.vue']
-    }
-  ]
-}
diff --git a/examples/sites/demos/pc/app/detail-page/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/detail-page/basic-usage-composition-api.vue
deleted file mode 100644
index 707c98cea..000000000
--- a/examples/sites/demos/pc/app/detail-page/basic-usage-composition-api.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <tiny-detail-page v-model="value"></tiny-detail-page>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { DetailPage as TinyDetailPage } from '@opentiny/vue'
-
-const value = ref([
-  {
-    label: '标题1',
-    value: '测试文本1'
-  },
-  {
-    label: '标题2',
-    value: '测试文本2',
-    hidden: true
-  },
-  {
-    label: '标题3',
-    value: '测试文本3'
-  },
-  {
-    label: '标题4',
-    value: '测试文本4'
-  },
-  {
-    label: '标题5',
-    value: '测试文本5'
-  }
-])
-</script>
diff --git a/examples/sites/demos/pc/app/detail-page/basic-usage.spec.ts b/examples/sites/demos/pc/app/detail-page/basic-usage.spec.ts
deleted file mode 100644
index cef5fb1c7..000000000
--- a/examples/sites/demos/pc/app/detail-page/basic-usage.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('基本用法', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('detail-page#basic-usage')
-  await expect(
-    page.getByText('数据标题1---测试文本1标题2---测试文本2标题3---测试文本3标题4---测试文本4标题5---测试文本5')
-  ).toBeVisible()
-  await expect(
-    page
-      .locator('div')
-      .filter({ hasText: /^数据$/ })
-      .getByRole('img')
-  ).toBeVisible()
-  await page
-    .locator('div')
-    .filter({ hasText: /^数据$/ })
-    .getByRole('img')
-    .click()
-  await expect(
-    page.locator('div').filter({ hasText: '文本字段勾选隐藏标题1标题2标题3标题4标题5确定取消' }).nth(2)
-  ).toBeVisible()
-  await expect(page.locator('div').filter({ hasText: /^个性化标题$/ })).toBeVisible()
-  await expect(page.getByRole('button', { name: '确定' })).toBeVisible()
-  await page.getByRole('button', { name: '确定' }).click()
-  await expect(
-    page.locator('div').filter({ hasText: '文本字段勾选隐藏标题1标题2标题3标题4标题5确定取消' }).nth(2)
-  ).not.toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/detail-page/basic-usage.vue b/examples/sites/demos/pc/app/detail-page/basic-usage.vue
deleted file mode 100644
index b6b6d3f3f..000000000
--- a/examples/sites/demos/pc/app/detail-page/basic-usage.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <tiny-detail-page v-model="value"></tiny-detail-page>
-</template>
-
-<script>
-import { DetailPage } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyDetailPage: DetailPage
-  },
-  data() {
-    return {
-      value: [
-        {
-          label: '标题1',
-          value: '测试文本1'
-        },
-        {
-          label: '标题2',
-          value: '测试文本2',
-          hidden: true
-        },
-        {
-          label: '标题3',
-          value: '测试文本3'
-        },
-        {
-          label: '标题4',
-          value: '测试文本4'
-        },
-        {
-          label: '标题5',
-          value: '测试文本5'
-        }
-      ]
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/detail-page/custom-show-text-composition-api.vue b/examples/sites/demos/pc/app/detail-page/custom-show-text-composition-api.vue
deleted file mode 100644
index d2b1237e2..000000000
--- a/examples/sites/demos/pc/app/detail-page/custom-show-text-composition-api.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <tiny-detail-page
-    v-model="value"
-    title="表头详情"
-    text-split="-"
-    dialog-title="表头设置"
-    label-title="表头名称"
-    value-title="是否隐藏"
-    tips="不能全部隐藏"
-    save-button="修改数据"
-    cancel-button="取消修改"
-  ></tiny-detail-page>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { DetailPage as TinyDetailPage } from '@opentiny/vue'
-
-const value = ref([
-  {
-    label: '标题1',
-    value: '描述1'
-  },
-  {
-    label: '标题2',
-    value: '描述2'
-  },
-  {
-    label: '标题3',
-    value: '描述3'
-  },
-  {
-    label: '标题4',
-    value: '描述4'
-  },
-  {
-    label: '标题5',
-    value: '描述5'
-  }
-])
-</script>
diff --git a/examples/sites/demos/pc/app/detail-page/custom-show-text.spec.ts b/examples/sites/demos/pc/app/detail-page/custom-show-text.spec.ts
deleted file mode 100644
index d6f7ec178..000000000
--- a/examples/sites/demos/pc/app/detail-page/custom-show-text.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义展示文本', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('detail-page#custom-show-text')
-  await expect(page.getByText('表头详情标题1-描述1标题2-描述2标题3-描述3标题4')).toBeVisible()
-  await page
-    .locator('div')
-    .filter({ hasText: /^表头详情$/ })
-    .getByRole('img')
-    .click()
-  await expect(page.getByText('表头设置', { exact: true })).toBeVisible()
-  await expect(page.getByText('表头名称')).toBeVisible()
-  await expect(page.getByText('是否隐藏')).toBeVisible()
-  await expect(page.getByRole('button', { name: '取消修改' })).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/detail-page/custom-show-text.vue b/examples/sites/demos/pc/app/detail-page/custom-show-text.vue
deleted file mode 100644
index 1fa0b24c9..000000000
--- a/examples/sites/demos/pc/app/detail-page/custom-show-text.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <tiny-detail-page
-    v-model="value"
-    title="表头详情"
-    text-split="-"
-    dialog-title="表头设置"
-    label-title="表头名称"
-    value-title="是否隐藏"
-    tips="不能全部隐藏"
-    save-button="修改数据"
-    cancel-button="取消修改"
-  ></tiny-detail-page>
-</template>
-
-<script>
-import { DetailPage } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyDetailPage: DetailPage
-  },
-  data() {
-    return {
-      value: [
-        {
-          label: '标题1',
-          value: '描述1'
-        },
-        {
-          label: '标题2',
-          value: '描述2'
-        },
-        {
-          label: '标题3',
-          value: '描述3'
-        },
-        {
-          label: '标题4',
-          value: '描述4'
-        },
-        {
-          label: '标题5',
-          value: '描述5'
-        }
-      ]
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.cn.md b/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.cn.md
deleted file mode 100644
index a2713cb03..000000000
--- a/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: DetailPage 表头详情栏
----
-
-# DetailPage 表头详情栏
-
-<div>DetailPage 带表头的详情栏组件。</div>
diff --git a/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.en.md b/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.en.md
deleted file mode 100644
index af57d27c7..000000000
--- a/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: DetailPage header details column
----
-
-# DetailPage header details column
-
-<div>DetailPage detail bar component with a table header.</div>
diff --git a/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.js b/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.js
deleted file mode 100644
index 83f948f91..000000000
--- a/examples/sites/demos/pc/app/detail-page/webdoc/detail-page.js
+++ /dev/null
@@ -1,38 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  metaData: {
-    deprecated: '3.12.0',
-    removed: '3.15.0'
-  },
-  demos: [
-    {
-      demoId: 'basic-usage',
-      name: {
-        'zh-CN': '基本用法',
-        'en-US': 'Basic Usage'
-      },
-      desc: {
-        'zh-CN':
-          '<p>\n          <div>通过 <code> modelValue / v-model</code> 设置要显示的数据。</div>\n          <div>在每个数据对象中可设置 <code>hidden: true</code> 来指定默认隐藏的数据。</div>\n          <div>用户点击组件右上角的图标可以弹出个性化弹窗，弹窗里能选择是否隐藏指定数据。</div>\n        </p>',
-        'en-US':
-          '<p>\n          <div> Sets the data to be displayed with <code> modelValue/v-model</code>. </div>\n          <div> can set <code>hidden: true</code> in each data object to specify the default hidden data. </div>\n          <div> The user clicks the icon in the upper right corner of the component to pop up a personalized popup window, which can choose whether to hide the specified data. </div>\n        </p>'
-      },
-      codeFiles: ['basic-usage.vue']
-    },
-    {
-      demoId: 'custom-show-text',
-      name: {
-        'zh-CN': '自定义展示文本',
-        'en-US': 'Custom Text'
-      },
-      desc: {
-        'zh-CN':
-          '<p>通过 <code>title</code>、<code>text-split</code>、<code>dialog-title</code>、<code>label-title</code>、<code>value-title</code>、<code>tips</code>、<code>save-button</code>、<code>cancel-button</code> 这些属性可指定表头详情栏组件不同位置的展示文本。</p>\n',
-        'en-US':
-          '<p> via <code>title</code>, <code>text-split</code>, <code>dialog-title</code>, <code>label-title</code>, <code>value-title The </code>, <code>tips</code>, <code>save-button</code>, and <code>cancel-button</code> attributes specify the display text in different positions of the header details bar component. </p>\n'
-      },
-      codeFiles: ['custom-show-text.vue']
-    }
-  ]
-}
diff --git a/examples/sites/demos/pc/app/dropdown/options.spec.ts b/examples/sites/demos/pc/app/dropdown/options.spec.ts
index 2190b3d90..85ade3c87 100644
--- a/examples/sites/demos/pc/app/dropdown/options.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/options.spec.ts
@@ -10,6 +10,7 @@ test('配置式：使用 menu-options', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
+  await expect(dropDown).toContainText('下拉菜单') // 增加这一行，可以保证hover()是成功的。
   await page.waitForTimeout(200)
   await dropDown.hover()
   await expect(dropDownMenu.first()).toBeVisible()
@@ -71,6 +72,7 @@ test('配置式：使用 options', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
+  await expect(dropDown).toContainText('下拉菜单')
   await page.waitForTimeout(300)
   await dropDown.hover()
   await expect(dropDownMenu.first()).toBeVisible()
@@ -91,6 +93,7 @@ test('配置式：使用 options 和 text-field ', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
+  await expect(dropDown).toContainText('下拉菜单')
   await page.waitForTimeout(300)
   await dropDown.hover()
   await expect(dropDownMenu.first()).toBeVisible()
diff --git a/examples/sites/demos/pc/app/dropdown/trigger.spec.ts b/examples/sites/demos/pc/app/dropdown/trigger.spec.ts
index 0336a6714..93233f73a 100644
--- a/examples/sites/demos/pc/app/dropdown/trigger.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/trigger.spec.ts
@@ -11,11 +11,11 @@ test('触发方式', async ({ page }) => {
   const clickTrigger = dropDown.nth(1)
 
   // hover
-  await page.waitForTimeout(1200)
+  await page.waitForTimeout(2000)
   await hoverTrigger.hover()
   await expect(dropDownMenu.first()).toBeVisible()
   // click
-  await page.waitForTimeout(1200)
+  await page.waitForTimeout(2000)
   await clickTrigger.hover()
   await expect(dropDownMenu.nth(1)).not.toBeVisible()
   await clickTrigger.click()
diff --git a/examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue b/examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue
index 693242fde..6ba11bde2 100644
--- a/examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="uploadRef" :http-request="httpRequest">
+  <tiny-file-upload ref="uploadRef" :http-request="httpRequest" :file-list="fileList">
     <template #trigger>
       <tiny-button type="primary">点击上传</tiny-button>
     </template>
@@ -7,14 +7,16 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { FileUpload as TinyFileUpload, Button as TinyButton, Modal } from '@opentiny/vue'
 
-const httpRequest = ref(() => {
+const fileList = reactive([])
+const httpRequest = ref((files) => {
   return new Promise((resolve) => {
     // 此处为用户自定义的上传服务请求
     setTimeout(() => {
       Modal.message('上传成功')
+      fileList.push(files.file)
     }, 500)
   })
 })
diff --git a/examples/sites/demos/pc/app/file-upload/http-request.vue b/examples/sites/demos/pc/app/file-upload/http-request.vue
index ec209a9dc..ac8414bc4 100644
--- a/examples/sites/demos/pc/app/file-upload/http-request.vue
+++ b/examples/sites/demos/pc/app/file-upload/http-request.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="upload" :http-request="httpRequest">
+  <tiny-file-upload ref="upload" :http-request="httpRequest" :file-list="fileList">
     <template #trigger>
       <tiny-button type="primary">点击上传</tiny-button>
     </template>
@@ -16,11 +16,13 @@ export default {
   },
   data() {
     return {
-      httpRequest: () => {
+      fileList: [],
+      httpRequest: (files) => {
         return new Promise((resolve) => {
           // 此处为用户自定义的上传服务请求
           setTimeout(() => {
             Modal.message('上传成功')
+            this.fileList.push(files.file)
           }, 500)
         })
       }
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts b/examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts
index 09e5ee2ce..4bb2209f6 100644
--- a/examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts
+++ b/examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts
@@ -7,9 +7,10 @@ test('简化版筛选面板-时间日期菜单', async ({ page }) => {
   await page.locator('.tiny-input__suffix-inner').nth(0).click()
   await page.getByRole('textbox', { name: '选择日期' }).fill('2021-12-03')
   await page.getByRole('button', { name: '确定' }).nth(1).click()
+  await page.waitForTimeout(200)
   await page.locator('.tiny-input__suffix-inner').nth(1).click()
   await page.getByRole('textbox', { name: '选择日期' }).fill('2023-11-19')
   await page.getByRole('button', { name: '确定' }).nth(1).click()
-  await page.getByRole('button', { name: '确定' }).click()
+  await page.getByRole('button', { name: '确定' }).first().click()
   await expect(page.getByRole('cell', { name: 'Elisa Menez' }).getByText('Elisa Menez')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue
new file mode 100644
index 000000000..b324248df
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue
@@ -0,0 +1,212 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    resizable
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    height="300"
+  >
+    <tiny-grid-column title="操作" header-align="center">
+      <tiny-grid-column title="分组1" header-align="center" fixed="left">
+        <tiny-grid-column type="index" width="40"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
+      </tiny-grid-column>
+      <tiny-grid-column title="分组2" header-align="center">
+        <tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
+      </tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column :title="renderHeaderDescription" header-align="center">
+      <tiny-grid-column field="name" title="名称" show-tip sortable width="600"></tiny-grid-column>
+      <tiny-grid-column
+        field="area"
+        :title="renderHeaderArea"
+        :editor="{ component: 'select', options }"
+        sortable
+        width="600"
+      ></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
+        width="600"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        show-overflow="title"
+        width="600"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="右冻结分组" header-align="center" fixed="right">
+      <tiny-grid-column
+        field="address"
+        :title="renderHeaderAddress"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        width="150"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        show-overflow="title"
+        width="150"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script lang="jsx" setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import {
+  iconAdministrator,
+  iconVersiontree,
+  iconMarkOn,
+  iconUser,
+  iconAssociation,
+  iconHelpful
+} from '@opentiny/vue-icon'
+
+const TinyIconVersiontree = iconVersiontree()
+const TinyIconAdministrator = iconAdministrator()
+const TinyIconMarkOn = iconMarkOn()
+const TinyIconUser = iconUser()
+const TinyIconAssociation = iconAssociation()
+const TinyIconHelpful = iconHelpful()
+
+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项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGBYX公司',
+    area: '华北区',
+    address: '梅州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '7',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '8',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '9',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '10',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '11',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+const options = ref([
+  { label: '华北区', value: '华北区' },
+  { label: '华东区', value: '华东区' },
+  { label: '华南区', value: '华南区' }
+])
+
+function renderHeaderDescription(h) {
+  return (
+    <span>
+      {' '}
+      <TinyIconAdministrator />
+      Description
+    </span>
+  )
+}
+function renderHeaderRelation(h) {
+  return (
+    <span>
+      <TinyIconVersiontree />
+    </span>
+  )
+}
+
+function renderHeaderArea(h) {
+  return (
+    <span>
+      <TinyIconMarkOn />
+      Description
+    </span>
+  )
+}
+
+function renderHeaderAddress(h) {
+  return (
+    <span>
+      <TinyIconUser />
+      Description
+    </span>
+  )
+}
+
+function rendererCellOperate(h) {
+  return (
+    <div style="text-align: center; font-size: 16px;">
+      <TinyIconHelpful />
+      &nbsp;&nbsp;
+      <TinyIconAssociation />
+    </div>
+  )
+}
+</script>
diff --git a/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue
new file mode 100644
index 000000000..a98a6a6b1
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/fixed/group-header-fixed.vue
@@ -0,0 +1,232 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    resizable
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    height="300"
+  >
+    <tiny-grid-column title="操作" header-align="center">
+      <tiny-grid-column title="分组1" header-align="center" fixed="left">
+        <tiny-grid-column type="index" width="40"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
+      </tiny-grid-column>
+      <tiny-grid-column title="分组2" header-align="center">
+        <tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
+      </tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column :title="renderHeaderDescription" header-align="center">
+      <tiny-grid-column field="name" title="名称" show-tip sortable width="600"></tiny-grid-column>
+      <tiny-grid-column
+        field="area"
+        :title="renderHeaderArea"
+        :editor="{ component: 'select', options }"
+        sortable
+        width="600"
+      ></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
+        width="600"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        show-overflow="title"
+        width="600"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="右冻结分组" header-align="center" fixed="right">
+      <tiny-grid-column
+        field="address"
+        :title="renderHeaderAddress"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        width="150"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        show-overflow="title"
+        width="150"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn } from '@opentiny/vue'
+import {
+  IconAdministrator,
+  IconVersiontree,
+  IconMarkOn,
+  IconUser,
+  IconAssociation,
+  IconHelpful
+} from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      IconVersiontree: IconVersiontree(),
+      IconAdministrator: IconAdministrator(),
+      IconMarkOn: IconMarkOn(),
+      IconUser: IconUser(),
+      IconAssociation: IconAssociation(),
+      IconHelpful: IconHelpful(),
+      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项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGBYX公司',
+          area: '华北区',
+          address: '梅州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技YX公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '6',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '7',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '8',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '9',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '10',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '11',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ],
+      options: [
+        { label: '华北区', value: '华北区' },
+        { label: '华东区', value: '华东区' },
+        { label: '华南区', value: '华南区' }
+      ]
+    }
+  },
+  methods: {
+    renderHeaderDescription(h) {
+      const IconAdministrator = this.IconAdministrator
+
+      return (
+        <span>
+          {' '}
+          <IconAdministrator />
+          Description
+        </span>
+      )
+    },
+    renderHeaderRelation(h) {
+      const IconVersiontree = this.IconVersiontree
+
+      return (
+        <span>
+          <IconVersiontree />
+        </span>
+      )
+    },
+
+    renderHeaderArea(h) {
+      const IconMarkOn = this.IconMarkOn
+
+      return (
+        <span>
+          <IconMarkOn />
+          Description
+        </span>
+      )
+    },
+
+    renderHeaderAddress(h) {
+      const IconUser = this.IconUser
+
+      return (
+        <span>
+          <IconUser />
+          Description
+        </span>
+      )
+    },
+
+    rendererCellOperate(h) {
+      const IconAssociation = this.IconAssociation
+      const IconHelpful = this.IconHelpful
+
+      return (
+        <div style="text-align: center; font-size: 16px;">
+          <IconHelpful />
+          &nbsp;&nbsp;
+          <IconAssociation />
+        </div>
+      )
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
new file mode 100644
index 000000000..68f6ffa05
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
@@ -0,0 +1,190 @@
+<template>
+  <tiny-grid
+    column-min-width="100"
+    auto-resize
+    :column-anchor="columnAnchor"
+    :optimization="{ scrollX: { gt: 20 } }"
+    :fetch-data="fetchData"
+    :pager="pagerConfig"
+  >
+    <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
+    <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
+    <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
+    <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
+    <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
+    <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
+    <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
+    <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
+    <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
+    <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
+    <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
+    <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
+    <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
+    <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+    <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
+    <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
+    <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
+    <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
+    <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
+    <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
+    <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
+    <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
+    <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
+    <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
+    <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
+    <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
+    <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
+    <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
+    <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
+    <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
+    <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
+    <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
+    <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
+    <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
+    <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
+    <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
+    <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
+    <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
+    <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
+    <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { IconMarkOn } from '@opentiny/vue-icon'
+
+function getData({ page }) {
+  let curPage = page.currentPage
+  let pageSize = page.pageSize
+  let offset = (curPage - 1) * pageSize
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      let result = tableData.value.slice(0)
+      let total = tableData.value.length
+
+      result = result.slice(offset, offset + pageSize)
+
+      resolve({ result, page: { total } })
+    }, 300)
+  })
+}
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 800,
+    name0: '1-name-0',
+    name1: '1-name-1',
+    name2: '1-name-2'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 300,
+    name0: '2-name-0',
+    name1: '2-name-1',
+    name2: '2-name-2'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1300,
+    name0: '3-name-0',
+    name1: '3-name-1',
+    name2: '3-name-2'
+  },
+  {
+    id: '4',
+    name: 'JKL科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1200,
+    name0: '4-name-0',
+    name1: '4-name-1',
+    name2: '4-name-2'
+  },
+  {
+    id: '5',
+    name: 'TGB科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1400,
+    name0: '5-name-0',
+    name1: '5-name-1',
+    name2: '5-name-2'
+  },
+  {
+    id: '6',
+    name: 'XDR有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 900,
+    name0: '6-name-0',
+    name1: '6-name-1',
+    name2: '6-name-2'
+  }
+])
+
+const columnAnchor = ref([
+  'name',
+  ['introduction', '简单介绍'],
+  [
+    'employees',
+    [
+      '雇员数量-自定义渲染',
+      ({ h, anchor: { active, field, label }, action }) =>
+        h(
+          'div',
+          {
+            class: { 'tiny-grid__column-anchor-item': true, 'tiny-grid__column-anchor-item--active': active },
+            on: { click: (e) => action(field, e) }
+          },
+          [active ? h(IconMarkOn(), { class: 'tiny-grid__column-anchor-item-icon' }) : null, h('span', label)]
+        )
+    ]
+  ],
+  {
+    field: 'address', // 列锚点字段
+    label: null, // 列锚点名称
+    render: null, // 列锚点自定义渲染方法
+    active: true, // 是否默认激活
+    delay: 30 // 定位延时
+  }
+])
+
+const pagerConfig = ref({
+  component: Pager,
+  attrs: {
+    currentPage: 1,
+    pageSize: 3,
+    pageSizes: [3, 5, 10],
+    total: 0,
+    layout: 'total, prev, pager, next, jumper, sizes'
+  }
+})
+const fetchData = { api: getData }
+</script>
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
new file mode 100644
index 000000000..50b453efc
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
@@ -0,0 +1,199 @@
+<template>
+  <tiny-grid
+    column-min-width="100"
+    auto-resize
+    :column-anchor="columnAnchor"
+    :optimization="{ scrollX: { gt: 20 } }"
+    :fetch-data="fetchData"
+    :pager="pagerConfig"
+  >
+    <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
+    <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
+    <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
+    <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
+    <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
+    <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
+    <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
+    <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
+    <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
+    <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
+    <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
+    <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
+    <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
+    <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+    <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
+    <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
+    <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
+    <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
+    <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
+    <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
+    <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
+    <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
+    <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
+    <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
+    <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
+    <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
+    <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
+    <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
+    <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
+    <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
+    <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
+    <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
+    <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
+    <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
+    <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
+    <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
+    <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
+    <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
+    <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
+    <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn, Pager } from '@opentiny/vue'
+import { IconMarkOn } from '@opentiny/vue-icon'
+
+const tableData = [
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 800,
+    name0: '1-name-0',
+    name1: '1-name-1',
+    name2: '1-name-2'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 300,
+    name0: '2-name-0',
+    name1: '2-name-1',
+    name2: '2-name-2'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1300,
+    name0: '3-name-0',
+    name1: '3-name-1',
+    name2: '3-name-2'
+  },
+  {
+    id: '4',
+    name: 'JKL科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1200,
+    name0: '4-name-0',
+    name1: '4-name-1',
+    name2: '4-name-2'
+  },
+  {
+    id: '5',
+    name: 'TGB科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1400,
+    name0: '5-name-0',
+    name1: '5-name-1',
+    name2: '5-name-2'
+  },
+  {
+    id: '6',
+    name: 'XDR有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 900,
+    name0: '6-name-0',
+    name1: '6-name-1',
+    name2: '6-name-2'
+  }
+]
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      columnAnchor: [
+        'name',
+        ['introduction', '简单介绍'],
+        [
+          'employees',
+          [
+            '雇员数量-自定义渲染',
+            ({ h, anchor: { active, field, label }, action }) =>
+              h(
+                'div',
+                {
+                  class: { 'tiny-grid__column-anchor-item': true, 'tiny-grid__column-anchor-item--active': active },
+                  on: { click: (e) => action(field, e) }
+                },
+                [active ? h(IconMarkOn(), { class: 'tiny-grid__column-anchor-item-icon' }) : null, h('span', label)]
+              )
+          ]
+        ],
+        {
+          field: 'address', // 列锚点字段
+          label: null, // 列锚点名称
+          render: null, // 列锚点自定义渲染方法
+          active: true, // 是否默认激活
+          delay: 30 // 定位延时
+        }
+      ],
+      pagerConfig: {
+        component: Pager,
+        attrs: {
+          currentPage: 1,
+          pageSize: 3,
+          pageSizes: [3, 5, 10],
+          total: 0,
+          layout: 'total, prev, pager, next, jumper, sizes'
+        }
+      },
+      fetchData: { api: this.getData }
+    }
+  },
+  methods: {
+    getData({ page }) {
+      let curPage = page.currentPage
+      let pageSize = page.pageSize
+      let offset = (curPage - 1) * pageSize
+
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          let result = tableData.slice(0)
+          let total = tableData.length
+
+          result = result.slice(offset, offset + pageSize)
+
+          resolve({ result, page: { total } })
+        }, 300)
+      })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
new file mode 100644
index 000000000..684f4ac62
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-composition-api.vue
@@ -0,0 +1,124 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    column-min-width="100"
+    auto-resize
+    :column-anchor="columnAnchor"
+    :optimization="{ scrollX: { gt: 20 } }"
+  >
+    <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
+    <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
+    <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
+    <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
+    <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
+    <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
+    <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
+    <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
+    <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
+    <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
+    <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
+    <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
+    <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
+    <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+    <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
+    <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
+    <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
+    <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
+    <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
+    <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
+    <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
+    <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
+    <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
+    <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
+    <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
+    <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
+    <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
+    <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
+    <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
+    <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
+    <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
+    <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
+    <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
+    <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
+    <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
+    <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
+    <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
+    <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
+    <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
+    <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import { IconMarkOn } from '@opentiny/vue-icon'
+
+const columnAnchor = ref([
+  'name',
+  'address',
+  ['introduction', '简单介绍'],
+  [
+    'employees',
+    [
+      '雇员数量-自定义渲染',
+      ({ h, anchor: { active, field, label }, action }) =>
+        h(
+          'div',
+          {
+            class: { 'tiny-grid__column-anchor-item': true, 'tiny-grid__column-anchor-item--active': active },
+            on: { click: (e) => action(field, e) }
+          },
+          [active ? h(IconMarkOn(), { class: 'tiny-grid__column-anchor-item-icon' }) : null, h('span', label)]
+        )
+    ]
+  ]
+])
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 800,
+    name0: '1-name-0',
+    name1: '1-name-1',
+    name2: '1-name-2'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 300,
+    name0: '2-name-0',
+    name1: '2-name-1',
+    name2: '2-name-2'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+    employees: 1300,
+    name0: '3-name-0',
+    name1: '3-name-1',
+    name2: '3-name-2'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/grid/large-data/scroll-to.spec.js b/examples/sites/demos/pc/app/grid/large-data/scroll-to.spec.js
index 8b1dd8b67..709d6d54b 100644
--- a/examples/sites/demos/pc/app/grid/large-data/scroll-to.spec.js
+++ b/examples/sites/demos/pc/app/grid/large-data/scroll-to.spec.js
@@ -6,5 +6,5 @@ test('滚动到指定位置', async ({ page }) => {
   await page.waitForTimeout(3000)
   await page.getByRole('button', { name: '滚动到500列' }).click()
   await page.waitForTimeout(200)
-  await expect(page.getByText('col508')).toBeVisible()
+  await expect(page.getByText('col499')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate-composition-api.vue
new file mode 100644
index 000000000..21d8bf45b
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate-composition-api.vue
@@ -0,0 +1,50 @@
+<template>
+  <tiny-grid :data="tableData">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column
+      field="rate"
+      title="内置列渲染rate1"
+      format-text="rate"
+      :format-config="{ fraction: 4, max: 10 }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="rate"
+      title="内置列渲染rate2"
+      format-text="rate"
+      :format-config="{ fraction: 4, total: 10 }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="rate1"
+      title="自定义渲染rate"
+      format-text="rate"
+      :format-config="{ rateMethod }"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+
+const tableData = ref([
+  { id: '1', rate: 2, rate1: 0 },
+  { id: '2', rate: 0.65555, rate1: 0.65555 },
+  { id: '3', rate: 0.3445, rate1: 0.3445 },
+  { id: '4', rate: 0.0005, rate1: 0.0005 },
+  { id: '5', rate: 0.6005, rate1: 0.6005 },
+  { id: '6', rate: 0.06005, rate1: 0.06005 }
+])
+
+const rateMethod = (value) => {
+  let str = (parseFloat(value) * 1000000).toString(10)
+  str = '000000'.slice(0, 6 - str.length) + str
+
+  let int = str.slice(0, 2)
+  int = int.replace(/^0+/, '')
+  int = int === '' ? '0' : int
+
+  const dec = str.slice(2)
+
+  return `${int}.${dec}%`
+}
+</script>
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.spec.js b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.spec.js
new file mode 100644
index 000000000..12e0f34e8
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.spec.js
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('比率渲染器', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-renderer#renderer-inner-renderer-rate')
+  const redCell = page.getByRole('cell', { name: '200.0000%' }).first().locator('.tiny-grid__rate-chart')
+  await expect(redCell).toHaveCSS('background-color', 'rgb(222, 80, 78)')
+  const yellowCell = page.getByRole('cell', { name: '34.4500%' }).nth(1).locator('.tiny-grid__rate-chart')
+  await expect(yellowCell).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+  const blueCell = page.getByRole('cell', { name: '60.0500%' }).nth(1).locator('.tiny-grid__rate-chart')
+  await expect(blueCell).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+})
diff --git a/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.vue b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.vue
new file mode 100644
index 000000000..19ae8c221
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/renderer/inner-renderer-rate.vue
@@ -0,0 +1,60 @@
+<template>
+  <tiny-grid :data="tableData">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column
+      field="rate"
+      title="内置列渲染rate1"
+      format-text="rate"
+      :format-config="{ fraction: 4, max: 10 }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="rate"
+      title="内置列渲染rate2"
+      format-text="rate"
+      :format-config="{ fraction: 4, total: 10 }"
+    ></tiny-grid-column>
+    <tiny-grid-column
+      field="rate1"
+      title="自定义渲染rate"
+      format-text="rate"
+      :format-config="{ rateMethod }"
+    ></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      tableData: [
+        { id: '1', rate: 2, rate1: 0 },
+        { id: '2', rate: 0.65555, rate1: 0.65555 },
+        { id: '3', rate: 0.3445, rate1: 0.3445 },
+        { id: '4', rate: 0.0005, rate1: 0.0005 },
+        { id: '5', rate: 0.6005, rate1: 0.6005 },
+        { id: '6', rate: 0.06005, rate1: 0.06005 }
+      ]
+    }
+  },
+  methods: {
+    rateMethod(value) {
+      let str = (parseFloat(value) * 1000000).toString(10)
+      str = '000000'.slice(0, 6 - str.length) + str
+
+      let int = str.slice(0, 2)
+      int = int.replace(/^0+/, '')
+      int = int === '' ? '0' : int
+
+      const dec = str.slice(2)
+
+      return `${int}.${dec}%`
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/grid/size/grid-size.spec.js b/examples/sites/demos/pc/app/grid/size/grid-size.spec.js
index a557dd7c1..45b145611 100644
--- a/examples/sites/demos/pc/app/grid/size/grid-size.spec.js
+++ b/examples/sites/demos/pc/app/grid/size/grid-size.spec.js
@@ -5,11 +5,11 @@ test('尺寸', async ({ page }) => {
   await page.goto('grid-size#size-grid-size')
   const mediumTd = page.locator('.size__medium .tiny-grid-body__column').first()
   const { height: heightMedium } = await mediumTd.boundingBox()
-  await page.getByText('small').click()
+  await page.getByText('small', { exact: true }).click()
   await page.waitForTimeout(500)
   const smallTd = page.locator('.size__small .tiny-grid-body__column').first()
   const { height: heightSamll } = await smallTd.boundingBox()
-  await page.getByText('mini').click()
+  await page.getByText('mini', { exact: true }).click()
   await page.waitForTimeout(500)
   const miniTd = page.locator('.size__mini .tiny-grid-body__column').first()
   const { height: heightMini } = await miniTd.boundingBox()
diff --git a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
index 98ae9b182..5f76b3c24 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
@@ -7,8 +7,8 @@
     </div>
     <br />
     <tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }">
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     </tiny-grid>
diff --git a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
index 974e23089..31b244233 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
@@ -7,8 +7,8 @@
     </div>
     <br />
     <tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }">
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     </tiny-grid>
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
index 0991de8a9..55c860580 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
@@ -7,8 +7,8 @@
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
       :select-config="{ labelField: 'index' }"
     >
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
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 d875feaed..050b9a476 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
@@ -3,11 +3,23 @@ import { test, expect } from '@playwright/test'
 test('展开行序号列配置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-tree-table#tree-table-tree-grid-index')
-  await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).getByRole('img').first().click()
-  await page.getByRole('row', { name: '2 WWWW科技YX公司 华南区 500' }).getByRole('img').first().click()
-  await page.getByRole('row', { name: '3 TGBYX公司 华南区 360' }).getByRole('img').first().click()
+  await page
+    .getByRole('row', { name: '1 GFD科技YX公司 华东区 800' })
+    .locator('.tiny-grid-tree__node-btn')
+    .first()
+    .click()
+  await page
+    .getByRole('row', { name: '2 WWWW科技YX公司 华南区 500' })
+    .locator('.tiny-grid-tree__node-btn')
+    .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.getByRole('row', { name: '4 康康物业YX公司 华南区 400' }).getByRole('img').first().click()
+  await page
+    .getByRole('row', { name: '4 康康物业YX公司 华南区 400' })
+    .locator('.tiny-grid-tree__node-btn')
+    .first()
+    .click()
 
   await expect(page.getByText('4.1')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
index 64e7272ad..7696f6962 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
@@ -7,8 +7,8 @@
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
       :select-config="{ labelField: 'index' }"
     >
-      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
-      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
index de557a4fc..39d91f029 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
@@ -19,8 +19,9 @@
         </tiny-grid-toolbar>
       </template>
       <tiny-grid-column type="selection" width="100"></tiny-grid-column>
-      <tiny-grid-column type="index" width="80"></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
         field="employees"
@@ -92,7 +93,9 @@ function copy(nodes1, nodes2) {
 
   return res
 }
+
 const increaseId = ref(30)
+
 const tableData = ref([
   {
     id: '1',
@@ -209,8 +212,8 @@ function insertEvent() {
     id: String(increaseId.value++),
     children: [
       {
-        name: '新数据-child',
-        id: String(increaseId.value++)
+        id: String(increaseId.value++),
+        name: '新数据-child'
       }
     ]
   }
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
index 1634f5b12..71c289920 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
@@ -19,8 +19,8 @@
         </tiny-grid-toolbar>
       </template>
       <tiny-grid-column type="selection" width="100"></tiny-grid-column>
-      <tiny-grid-column type="index" width="80"></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
         field="employees"
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-fixed.js b/examples/sites/demos/pc/app/grid/webdoc/grid-fixed.js
index e3001dda2..444add62d 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-fixed.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-fixed.js
@@ -34,6 +34,17 @@ export default {
           '<p>Sets column freezing through the <code>fixed</code> property. The options are as follows: <code>left right</code>The default value is <code>left</code></p>\n'
       },
       'codeFiles': ['fixed/multi-column-fixed.vue']
+    },
+    {
+      'demoId': 'group-header-fixed',
+      'name': { 'zh-CN': '分组表头冻结', 'en-US': 'Group header fixed' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>fixed</code> 属性设置列冻结。当分组表头的某一项设置了冻结列，该分组表头其他项都会自动变成冻结列。</p>\n',
+        'en-US':
+          '<p><p>Set column freezing via the <code>fixed</code> attribute. When a frozen column is set for an item in the group header, other items in the group header will automatically become frozen columns. </p>\n'
+      },
+      'codeFiles': ['fixed/group-header-fixed.vue']
     }
   ],
   apis: [{ 'name': 'grid-fixed', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-large-data.js b/examples/sites/demos/pc/app/grid/webdoc/grid-large-data.js
index b168db5ae..baa08f981 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-large-data.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-large-data.js
@@ -68,6 +68,30 @@ export default {
           '<div class="tip custom-block"><p class="custom-block-title"> Method Description </p>\n<p> <code>scrollTo(scrollLeft, scrollTop)</code>: Scroll to the corresponding position \n<code>scrollToRow(row)</code>: Scroll to the corresponding row \n<code>scrollToColumn(column)</code>: Scroll to the corresponding column </p>\n</div>\n'
       },
       'codeFiles': ['large-data/scroll-to.vue']
+    },
+    {
+      'demoId': 'large-data-column-anchor',
+      'name': { 'zh-CN': '表格列锚点', 'en-US': 'table column anchor' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>column-anchor</code> 设置表格列锚点，点击可快速滚动至对应列，表格初始化时，默认滚动到锚点第一项。</p>',
+        'en-US':
+          '<p>Set the table column anchor point through <code>column-anchor</code>. Click to quickly scroll to the corresponding column. When the table is initialized, it will scroll to the first item of the anchor point by default. </p>'
+      },
+      'codeFiles': ['large-data/column-anchor.vue']
+    },
+    {
+      'demoId': 'column-anchor-clear-active',
+      'name': {
+        'zh-CN': '再次加载数据时清除活跃列锚点',
+        'en-US': 'Clear active column anchors when loading data again'
+      },
+      'desc': {
+        'zh-CN': '<p>当使用 <code>fetch-data</code> 加载数据时，再次加载数据时会清除活跃列锚点。</p>',
+        'en-US':
+          '<p>When loading data using <code>fetch-data</code>, active column anchors are cleared when the data is loaded again.</p>'
+      },
+      'codeFiles': ['large-data/column-anchor-clear-active.vue']
     }
   ],
   apis: [{ 'name': 'grid-large-data', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-renderer.js b/examples/sites/demos/pc/app/grid/webdoc/grid-renderer.js
index 05a0ed1de..15547c799 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-renderer.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-renderer.js
@@ -55,6 +55,17 @@ export default {
       },
       'codeFiles': ['renderer/inner-renderer-date.vue']
     },
+    {
+      'demoId': 'renderer-inner-renderer-rate',
+      'name': { 'zh-CN': '比率渲染器', 'en-US': 'Custom Renderer' },
+      'desc': {
+        'zh-CN': `<p>通过 <code>formatConfig.max</code> 配置，按照 <code>value / max</code> 计算样式百分比（进度条宽度占单元格宽度的百分比），按照 <code>value</code> 计算显示百分比（进度条上显示的比率），参考示例字段内置列渲染 <code>rate1</code>。
+          如果未配置 <code>formatConfig.max</code>，就按照 <code>value / total</code> 计算样式百分比和显示百分比，<code>formatConfig.total</code> 默认值是 <code>1</code>，参考示例字段内置列渲染 <code>rate2</code>。</p>`,
+        'en-US':
+          '<p>The custom renderer can customize the rendering of cells or a <code>vue component</code>. Configure <code>renderer</code> in the <code>grid-column</code> column to support method and object configuration. For details, see the following example. </p>\n'
+      },
+      'codeFiles': ['renderer/inner-renderer-rate.vue']
+    },
     {
       'demoId': 'render-async-colunm-render',
       'name': { 'zh-CN': '列异步数据渲染', 'en-US': 'Column Asynchronous Data Rendering' },
diff --git a/examples/sites/demos/pc/app/image/count-slot-composition-api.vue b/examples/sites/demos/pc/app/image/count-slot-composition-api.vue
new file mode 100644
index 000000000..18a2edd7f
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/count-slot-composition-api.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="demo-image__count-solt">
+    <tiny-image :src="url" :preview-src-list="srcList">
+      <template #count="{ index }">
+        <span class="demo-image__count">第{{ index + 1 }}张/共{{ srcList.length }}张 </span>
+      </template>
+    </tiny-image>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Image as TinyImage } from '@opentiny/vue'
+
+const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+])
+</script>
+
+<style scoped>
+.demo-image__count-solt {
+  width: 200px;
+  height: 200px;
+}
+.demo-image__count {
+  font-size: 14px;
+  color: #fff;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/image/count-slot.spec.ts b/examples/sites/demos/pc/app/image/count-slot.spec.ts
new file mode 100644
index 000000000..9b4e3f4cb
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/count-slot.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('测试数目插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('image#count-solt')
+
+  const preview = page.locator('.pc-demo-container')
+  const imgs = preview.locator('.tiny-image > .tiny-image__inner')
+  await expect(imgs).toHaveCount(5)
+
+  await expect(imgs.nth(0)).toHaveCSS('object-fit', 'fill')
+  await expect(imgs.nth(1)).toHaveCSS('object-fit', 'contain')
+  await expect(imgs.nth(2)).toHaveCSS('object-fit', 'cover')
+  await expect(imgs.nth(3)).toHaveCSS('object-fit', 'none')
+  await expect(imgs.nth(4)).toHaveCSS('object-fit', 'scale-down')
+})
diff --git a/examples/sites/demos/pc/app/image/count-slot.vue b/examples/sites/demos/pc/app/image/count-slot.vue
new file mode 100644
index 000000000..061cf0b51
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/count-slot.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="demo-image__count-solt">
+    <tiny-image :src="url" :preview-src-list="srcList">
+      <template #count="{ index }">
+        <span class="demo-image__count">第{{ index + 1 }}张/共{{ srcList.length }}张 </span>
+      </template>
+    </tiny-image>
+  </div>
+</template>
+
+<script>
+import { Image } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyImage: Image
+  },
+  data() {
+    return {
+      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+      srcList: [
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-image__count-solt {
+  width: 200px;
+  height: 200px;
+}
+.demo-image__count {
+  font-size: 14px;
+  color: #fff;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/image/index-change-composition-api.vue b/examples/sites/demos/pc/app/image/index-change-composition-api.vue
new file mode 100644
index 000000000..6781ce2bf
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/index-change-composition-api.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="demo-image__index-change">
+    <tiny-image :src="url" :preview-src-list="srcList" @change-index="changeIndex"> </tiny-image>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Image as TinyImage, Modal } from '@opentiny/vue'
+
+const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+])
+
+function changeIndex(index) {
+  console.log('sssss')
+  Modal.message({ message: `图片切换事件触发，当前 index： ${index}`, status: 'info' })
+}
+</script>
+
+<style scoped>
+.demo-image__index-change {
+  width: 200px;
+  height: 200px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/image/index-change.spec.ts b/examples/sites/demos/pc/app/image/index-change.spec.ts
new file mode 100644
index 000000000..c9ce9252f
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/index-change.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('测试坐标切换', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('image#index-chenge')
+
+  const preview = page.locator('.pc-demo-container')
+  const imgs = preview.locator('.tiny-image > .tiny-image__inner')
+  await expect(imgs).toHaveCount(5)
+
+  await expect(imgs.nth(0)).toHaveCSS('object-fit', 'fill')
+  await expect(imgs.nth(1)).toHaveCSS('object-fit', 'contain')
+  await expect(imgs.nth(2)).toHaveCSS('object-fit', 'cover')
+  await expect(imgs.nth(3)).toHaveCSS('object-fit', 'none')
+  await expect(imgs.nth(4)).toHaveCSS('object-fit', 'scale-down')
+})
diff --git a/examples/sites/demos/pc/app/image/index-change.vue b/examples/sites/demos/pc/app/image/index-change.vue
new file mode 100644
index 000000000..f40676f70
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/index-change.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="demo-image__index-change">
+    <tiny-image :src="url" :preview-src-list="srcList" @change-index="changeIndex"> </tiny-image>
+  </div>
+</template>
+
+<script>
+import { Image, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyImage: Image
+  },
+  data() {
+    return {
+      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+      srcList: [
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+      ]
+    }
+  },
+  methods: {
+    changeIndex(index) {
+      Modal.message({ message: `图片切换事件触发，当前 index： ${index}`, status: 'info' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-image__index-change {
+  width: 200px;
+  height: 200px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/image/keep-style-composition-api.vue b/examples/sites/demos/pc/app/image/keep-style-composition-api.vue
new file mode 100644
index 000000000..3bf533a89
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/keep-style-composition-api.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="demo-image__keep-style">
+    <tiny-image :src="url" :preview-src-list="srcList" keep-style></tiny-image>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Image as TinyImage } from '@opentiny/vue'
+
+const url = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`)
+const srcList = ref([
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+  `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+])
+</script>
+
+<style scoped>
+.demo-image__keep-style {
+  width: 200px;
+  height: 200px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/image/keep-style.spec.ts b/examples/sites/demos/pc/app/image/keep-style.spec.ts
new file mode 100644
index 000000000..26a1f5a62
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/keep-style.spec.ts
@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test'
+
+test('测试样式属性保持', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  await page.goto('image#keep-style')
+  const preview = page.locator('.pc-demo-container')
+  await preview.locator('.tiny-image__inner').click()
+  await page.waitForTimeout(50)
+
+  // viewerImage 是插入到body末尾的。
+  const viewerImage = page.locator('.tiny-image-viewer')
+  const mask = viewerImage.locator('.tiny-image-viewer__mask')
+  const toolbar = viewerImage.locator('.tiny-image-viewer__actions-inner')
+  const canvas = viewerImage.locator('.tiny-image-viewer__img')
+
+  // 验证出现
+  await expect(viewerImage).toHaveCount(1)
+  await expect(canvas).toHaveCount(1)
+  await expect(mask).toHaveCSS('position', 'absolute')
+  await expect(mask).toHaveCSS('opacity', '0.5')
+  await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+
+  // 点击缩小
+  await toolbar.locator('svg').first().click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveCSS('transform', 'matrix(0.8, 0, 0, 0.8, 0, 0)')
+
+  //   点击放大
+  await toolbar.locator('svg').nth(1).click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+
+  // 点击向左旋转
+  await toolbar.locator('svg').nth(3).click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
+
+  const prev = viewerImage.locator('.tiny-image-viewer__prev')
+  const next = viewerImage.locator('.tiny-image-viewer__next')
+
+  // // 点击切换
+  await next.click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveAttribute('src', /house\.jpg/)
+
+  await prev.click()
+  await page.waitForTimeout(20)
+  await prev.click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveAttribute('src', /bridge\.jpg/)
+
+  // 点击关闭
+  await viewerImage.locator('.tiny-image-viewer__close').click()
+  await expect(viewerImage).toHaveCount(0)
+})
diff --git a/examples/sites/demos/pc/app/image/keep-style.vue b/examples/sites/demos/pc/app/image/keep-style.vue
new file mode 100644
index 000000000..a87a1dcca
--- /dev/null
+++ b/examples/sites/demos/pc/app/image/keep-style.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="demo-image__keep-style">
+    <tiny-image :src="url" :preview-src-list="srcList" keep-style></tiny-image>
+  </div>
+</template>
+
+<script>
+import { Image } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyImage: Image
+  },
+  data() {
+    return {
+      url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+      srcList: [
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/house.jpg`,
+        `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/bridge.jpg`
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-image__keep-style {
+  width: 200px;
+  height: 200px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/image/preview-composition-api.vue b/examples/sites/demos/pc/app/image/preview-composition-api.vue
index d707d1281..97e0df15e 100644
--- a/examples/sites/demos/pc/app/image/preview-composition-api.vue
+++ b/examples/sites/demos/pc/app/image/preview-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo-image__preview">
-    <tiny-image :src="url" :preview-src-list="srcList" :z-index="3000"></tiny-image>
+    <tiny-image :src="url" :preview-src-list="srcList" :z-index="3000" show-index></tiny-image>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/image/preview.vue b/examples/sites/demos/pc/app/image/preview.vue
index a3ab32151..ab3f7bb9d 100644
--- a/examples/sites/demos/pc/app/image/preview.vue
+++ b/examples/sites/demos/pc/app/image/preview.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="demo-image__preview">
-    <tiny-image :src="url" :preview-src-list="srcList" :z-index="3000"></tiny-image>
+    <tiny-image :src="url" :preview-src-list="srcList" :z-index="3000" show-index></tiny-image>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/image/webdoc/image.js b/examples/sites/demos/pc/app/image/webdoc/image.js
index 46046c340..a096ba48e 100644
--- a/examples/sites/demos/pc/app/image/webdoc/image.js
+++ b/examples/sites/demos/pc/app/image/webdoc/image.js
@@ -10,9 +10,23 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          通过 <code>src</code> 设置图片路径。<br>\n          通过 <code>fit</code> 属性确定图片如何适应到容器框，同原生 css 的 object-fit 属性。<br>\n          <div class="tip custom-block">\n            <p class="custom-block-title">object-fit 说明</p>\n            <p>fill：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比<br>\n               contain：被替换的内容大小可以填充元素的内容框<br>\n               cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框<br>\n               none：被替换的内容尺寸不会被改变<br>\n               scale-down：内容的尺寸就像是指定了none 或 contain，取决于哪一个将导致更小的对象尺寸。\n            </p>\n          </div>\n        ',
+          '通过 <code>src</code> 设置图片路径。<br>' +
+          ' 通过 <code>fit</code> 属性确定图片如何适应到容器框，同原生 css 的 object-fit 属性。<br>' +
+          '<p class="custom-block-title">object-fit 说明</p>' +
+          '<p>fill：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比<br>' +
+          'contain：被替换的内容大小可以填充元素的内容框<br>' +
+          'cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框<br>' +
+          'none：被替换的内容尺寸不会被改变<br>' +
+          'scale-down：内容的尺寸就像是指定了none 或 contain，取决于哪一个将导致更小的对象尺寸。',
         'en-US':
-          '\n          Set the image path using <code>src</code>. <br>\n          The <code>fit</code> attribute determines how the image will fit into the container frame, the same as the object-fit attribute of native css. <br>\n          <div class="tip custom-block">\n          <p class="custom-block-title">object-fit Description </p>\n          <p>fill: The content being replaced will be scaled to maintain its aspect ratio as it fills the element\'s content box <br>\n          contain: The size of the content to fill the element\'s content box <br>\n          cover: The size of the content being replaced maintains its aspect ratio while filling the element\'s entire content box <br>\n          none: The size of the content to be replaced will not be changed <br>\n          scale-down: The size of the content is specified as either none or contain, depending on which will result in a smaller object size.\n          </p>\n          </div>\n        '
+          'Use <code>src</code> to set the image path.<br>' +
+          'The <code>fit</code> attribute determines how the image fits into the container box, which is the same as the object-fit attribute of the native CSS.<br>' +
+          '<p class="custom-block-title">object-fit description</p>' +
+          "<p>fill:The replaced content is scaled to maintain its aspect ratio when filling the element's content box.<br>" +
+          'contain:The size of the replaced content fills the content box of the element.<br>' +
+          'cover:The size of the replaced content maintains its aspect ratio and fills the entire content box of the element.<br>' +
+          'none:The size of the replaced content is not changed.<br>' +
+          'scale-down:The size of the content is like specifying none or contain, depending on which would result in a smaller object size.'
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -36,9 +50,13 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n        通过 <code>lazy</code> 开启懒加载功能，当图片滚动到可视范围内才会加载。<br>\n        通过 <code>scroll-container</code> 来设置滚动容器，若未定义，则为最近一个 <code>overflow</code> 值为 <code>auto</code> 或 <code>scroll</code> 的父元素。</p>\n\n          <div class="tip custom-block">\n            <p>lazy 懒加载的图片必须是远程的图片，不支持静态图片懒加载。</p>\n          </div>\n        ',
+          '通过 <code>lazy</code> 开启懒加载功能，当图片滚动到可视范围内才会加载。<br>' +
+          '通过 <code>scroll-container</code> 来设置滚动容器，若未定义，则为最近一个 <code>overflow</code> 值为 <code>auto</code> 或 <code>scroll</code> 的父元素。' +
+          '<p>lazy 懒加载的图片必须是远程的图片，不支持静态图片懒加载。</p>',
         'en-US':
-          '\n          Enable lazy loading with <code>lazy</code>, and the image will only load when it is in visual range. <br>\n          Set the scroll container by <code>scroll-container</code>. If not defined, Is the parent element of the last <code>overflow</code> value <code>auto</code> or <code>scroll</code>. </p>\n\n          <div class="tip custom-block">\n          <p>lazy Lazy loading images must be remote images. Lazy loading of static images is not supported. </p>\n          </div>\n        '
+          'Enable lazy loading with <code>lazy</code>, and the image will only load when it is in visual range. <br>' +
+          'Set the scroll container by <code>scroll-container</code>.If not defined, Is the parent element of the last <code>overflow</code> value <code>auto</code> or <code>scroll</code>.<br>' +
+          '<p>lazy Lazy loading images must be remote images. Lazy loading of static images is not supported. </p>'
       },
       codeFiles: ['lazy.vue']
     },
@@ -50,12 +68,54 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          通过 <code>preview-src-list</code> 属性 ，传入一组图片url的数组，点击图片后，会进入预览大图的模式。<br>\n          通过 <code>z-index</code> 设置预览图片的元素的z-index。\n        ',
+          '通过 <code>preview-src-list</code> 属性 ，传入一组图片 url 的数组，点击图片后，会进入预览大图的模式。<br>' +
+          '通过 <code>z-index</code> 设置预览图片的元素的 z-index。<br>' +
+          '通过添加 <code>show-index</code> 开启图片序号展示。<br>',
         'en-US':
-          '\n          Pass in an array of image urls via the <code>preview-src-list</code> property, and click on the image to enter the mode of previewing a large image. <br>\n          Set the z-index of the element of the preview image by <code>z-index</code>.\n        '
+          'Pass an array of image URLs through the <code>preview-src-list</code> attribute. After you click an image, the system enters the large image preview mode.<br>' +
+          'Use <code>z-index</code> to set the z-index of the element of the preview image.<br>' +
+          'Add <code>show-index</code> to enable the image sequence number display.<br>'
       },
       codeFiles: ['preview.vue']
     },
+    {
+      demoId: 'keep-style',
+      name: {
+        'zh-CN': '保持图片样式属性',
+        'en-US': 'Preserve Picture Style Properties'
+      },
+      desc: {
+        'zh-CN': '通过 <code>keep-style</code> 属性可以让图片切换时样式保持一致，图片的缩放、旋转、边距等状态不重置。',
+        'en-US':
+          'The <code>keep-style</code> attribute can be used to keep the style of an image consistent when the image is switched. The zoom, rotation, and margin status of the image is not reset.'
+      },
+      codeFiles: ['keep-style.vue']
+    },
+    {
+      demoId: 'index-change',
+      name: {
+        'zh-CN': '图片切换事件',
+        'en-US': 'Image switchover event'
+      },
+      desc: {
+        'zh-CN': '图片切换时触发 <code>change-index</code> 事件，参数返回当前图片的 index。',
+        'en-US':
+          'The <code>change-index</code> event is triggered when the image is switched. The index of the current image is returned.'
+      },
+      codeFiles: ['index-change.vue']
+    },
+    {
+      demoId: 'count-slot',
+      name: {
+        'zh-CN': '图片计数插槽',
+        'en-US': 'Picture Count Slot'
+      },
+      desc: {
+        'zh-CN': '通过 <code>count</code> 设置图片计数插槽。',
+        'en-US': 'Set the image count slot via <code>count</code>.'
+      },
+      codeFiles: ['count-slot.vue']
+    },
     {
       demoId: 'preview-in-dialog',
       name: {
@@ -76,9 +136,11 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          通过 <code> placeholder</code> 插槽，定义图片在加载中时的占位内容。通常由于图片加载快，会看不到这个插槽的出现,只有大图片时，会看到加载中的插槽。 <br>\n          通过 <code> error </code> 插槽，定义图片在加载失败后的占位内容。 \n        ',
+          '通过 <code> placeholder</code> 插槽，定义图片在加载中时的占位内容。通常由于图片加载快，会看不到这个插槽的出现,只有大图片时，会看到加载中的插槽。 <br>' +
+          ' 通过 <code> error </code> 插槽，定义图片在加载失败后的占位内容。',
         'en-US':
-          '\n          The <code> placeholder</code> slot defines the placeholder content for images when loaded. Usually, because the image loads quickly, you will not see the appearance of this slot, only a large image, you will see the loading slot. <br>\n          Using the <code> error </code> slot, define the placeholder content of the image after loading failure.\n        '
+          'The <code> placeholder</code> slot defines the placeholder content for images when loaded. Usually, because the image loads quickly, you will not see the appearance of this slot, only a large image, you will see the loading slot. <br>' +
+          'Using the <code> error </code> slot, define the placeholder content of the image after loading failure.'
       },
       codeFiles: ['slot.vue']
     },
@@ -89,10 +151,10 @@ export default {
         'en-US': 'Events'
       },
       desc: {
-        'zh-CN':
-          '\n          <code>load</code> 事件: 图片加载成功触发 。<br>\n          <code>error</code> 事件: 图片加载失败触发 。<br>\n        ',
+        'zh-CN': '<code>load</code> 事件: 图片加载成功触发 。<br><code>error</code> 事件: 图片加载失败触发 。',
         'en-US':
-          '\n          <code>load</code> event: The image is successfully loaded. <br>\n          <code>error</code> event: The image failed to be loaded. <br>\n        '
+          '<code>load</code> event: The image is successfully loaded. <br>' +
+          '<code>error</code> event: The image failed to be loaded. '
       },
       codeFiles: ['events.vue']
     }
diff --git a/examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue
index 71936512a..2edebb199 100644
--- a/examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/mind-map/basic-usage-composition-api.vue
@@ -1,14 +1,14 @@
 <template>
-  <tiny-mind-map class="mindmap" />
+  <tiny-mind-map class="demo-mind-map-basic" />
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import { MindMap as TinyMindMap } from '@opentiny/vue'
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-basic {
   width: 100%;
-  height: 300px;
+  height: 400px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/mind-map/basic-usage.vue b/examples/sites/demos/pc/app/mind-map/basic-usage.vue
index 3489ae8f5..5c780bbbd 100644
--- a/examples/sites/demos/pc/app/mind-map/basic-usage.vue
+++ b/examples/sites/demos/pc/app/mind-map/basic-usage.vue
@@ -1,8 +1,8 @@
 <template>
-  <tiny-mind-map class="mindmap" />
+  <tiny-mind-map class="demo-mind-map-basic" />
 </template>
 
-<script lang="ts">
+<script>
 import { MindMap } from '@opentiny/vue'
 
 export default {
@@ -13,8 +13,8 @@ export default {
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-basic {
   width: 100%;
-  height: 300px;
+  height: 400px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/mind-map/event-composition-api.vue b/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
index 60ab54ad4..12a5832e5 100644
--- a/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
+++ b/examples/sites/demos/pc/app/mind-map/event-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <tiny-mind-map
     ref="mindmap"
-    class="mindmap"
+    class="demo-mind-map-event"
     @create="onCreate"
     @operation="onOperation"
     @select-node="onSelectNode"
@@ -15,10 +15,10 @@
 </template>
 
 <script setup>
-import { Notify, MindMap as TinyMindMap } from '@opentiny/vue'
+import { Modal, MindMap as TinyMindMap } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const exmpleData = ref({
+const exampleData = ref({
   'nodeData': {
     'id': 'c9ee6647385c42de',
     'topic': '前端修仙指南',
@@ -60,66 +60,34 @@ const exmpleData = ref({
   }
 })
 const onCreate = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件create',
-    duration: 1000
-  })
+  Modal.message({ message: 'create 事件触发了', status: 'info' })
 }
 const onOperation = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件operation',
-    duration: 1000
-  })
+  Modal.message({ message: 'operation 事件触发了', status: 'info' })
 }
 const onSelectNode = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件selectNode',
-    duration: 1000
-  })
+  Modal.message({ message: 'selectNode 事件触发了', status: 'info' })
 }
 const onSelectNewNode = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件selectNewNode',
-    duration: 1000
-  })
+  Modal.message({ message: 'selectNewNode 事件触发了', status: 'info' })
 }
 const onSelectNodes = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件selectNodes',
-    duration: 1000
-  })
+  Modal.message({ message: 'selectNodes 事件触发了', status: 'info' })
 }
 const onUnselectNode = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件unselectNode',
-    duration: 1000
-  })
+  Modal.message({ message: 'unselectNode 事件触发了', status: 'info' })
 }
 const onUnselectNodes = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件unselectNodes',
-    duration: 1000
-  })
+  Modal.message({ message: 'unselectNodes 事件触发了', status: 'info' })
 }
 const onExpandNode = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件expandNode',
-    duration: 1000
-  })
+  Modal.message({ message: 'expandNode 事件触发了', status: 'info' })
 }
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-event {
   width: 100%;
-  height: 300px;
+  height: 400px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/mind-map/event.spec.ts b/examples/sites/demos/pc/app/mind-map/event.spec.ts
index ab583bba2..cf5962656 100644
--- a/examples/sites/demos/pc/app/mind-map/event.spec.ts
+++ b/examples/sites/demos/pc/app/mind-map/event.spec.ts
@@ -1,14 +1,15 @@
 import { test, expect } from '@playwright/test'
 
 test('测试创建事件', async ({ page }) => {
-  await page.goto('mind-map#event')
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#event')
   await page.getByText('触发事件create').isVisible()
 })
 
 test('测试operation事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
-  await page.locator('me-tpc').click()
+  await page.locator('me-tpc').filter({ hasText: '前端修仙指南' }).click()
   await page.locator('.map-canvas').press('Tab')
   await page.getByText('触发事件operation').first().isVisible()
   // 新创建node时会触发selectNewNode事件
@@ -17,16 +18,17 @@ test('测试operation事件', async ({ page }) => {
   await page.getByText('触发事件selectNewNode').first().isVisible()
 })
 test('测试select-node, select-nodes, select-new-node事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: '算法 第四版' }).click()
   await page.locator('.map-canvas').press('Tab')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: '大话数据结构' }).click()
   await page.locator('.map-canvas').press('Tab')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: 'Javascript权威指南' }).click()
   await page
     .locator('me-tpc')
-    .nth(1)
     .filter({ hasText: 'new node' })
+    .nth(1)
     .click({
       modifiers: ['Control']
     })
@@ -34,10 +36,11 @@ test('测试select-node, select-nodes, select-new-node事件', async ({ page })
   await page.getByAltText('触发事件selectNodes').isVisible()
 })
 test('测试 unselect-node,unselect-nodes', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: '算法 第四版' }).click()
   await page.locator('.map-canvas').press('Tab')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: '大话数据结构' }).click()
   await page.locator('.map-canvas').press('Tab')
 
   await page.locator('me-tpc').nth(2).click()
diff --git a/examples/sites/demos/pc/app/mind-map/event.vue b/examples/sites/demos/pc/app/mind-map/event.vue
index 47b895b1a..657ee1811 100644
--- a/examples/sites/demos/pc/app/mind-map/event.vue
+++ b/examples/sites/demos/pc/app/mind-map/event.vue
@@ -1,21 +1,23 @@
 <template>
-  <tiny-mind-map
-    ref="mindmap"
-    class="mindmap"
-    @create="onCreate"
-    @operation="onOperation"
-    @select-node="onSelectNode"
-    @select-new-node="onSelectNewNode"
-    @select-nodes="onSelectNodes"
-    @unselect-node="onUnselectNode"
-    @unselect-nodes="onUnselectNodes"
-    @expand-node="onExpandNode"
-    v-model="exampleData"
-  />
+  <div>
+    <tiny-mind-map
+      ref="mindmap"
+      class="demo-mind-map-event"
+      @create="onCreate"
+      @operation="onOperation"
+      @select-node="onSelectNode"
+      @select-new-node="onSelectNewNode"
+      @select-nodes="onSelectNodes"
+      @unselect-node="onUnselectNode"
+      @unselect-nodes="onUnselectNodes"
+      @expand-node="onExpandNode"
+      v-model="exampleData"
+    />
+  </div>
 </template>
 
-<script lang="jsx">
-import { MindMap, Notify } from '@opentiny/vue'
+<script>
+import { MindMap, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -69,68 +71,36 @@ export default {
   },
   methods: {
     onCreate() {
-      Notify({
-        type: 'info',
-        message: '触发事件create',
-        duration: 1000
-      })
+      Modal.message({ message: 'create 事件触发了', status: 'info' })
     },
     onOperation() {
-      Notify({
-        type: 'info',
-        message: '触发事件operation',
-        duration: 1000
-      })
+      Modal.message({ message: 'operation 事件触发了', status: 'info' })
     },
     onSelectNode() {
-      Notify({
-        type: 'info',
-        message: '触发事件selectNode',
-        duration: 1000
-      })
+      Modal.message({ message: 'selectNode 事件触发了', status: 'info' })
     },
     onSelectNewNode() {
-      Notify({
-        type: 'info',
-        message: '触发事件selectNewNode',
-        duration: 1000
-      })
+      Modal.message({ message: 'selectNewNode 事件触发了', status: 'info' })
     },
     onSelectNodes() {
-      Notify({
-        type: 'info',
-        message: '触发事件selectNodes',
-        duration: 1000
-      })
+      Modal.message({ message: 'selectNodes 事件触发了', status: 'info' })
     },
     onUnselectNode() {
-      Notify({
-        type: 'info',
-        message: '触发事件unselectNode',
-        duration: 1000
-      })
+      Modal.message({ message: 'unselectNode 事件触发了', status: 'info' })
     },
     onUnselectNodes() {
-      Notify({
-        type: 'info',
-        message: '触发事件unselectNodes',
-        duration: 1000
-      })
+      Modal.message({ message: 'unselectNodes 事件触发了', status: 'info' })
     },
     onExpandNode() {
-      Notify({
-        type: 'info',
-        message: '触发事件expandNode',
-        duration: 1000
-      })
+      Modal.message({ message: 'expandNode 事件触发了', status: 'info' })
     }
   }
 }
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-event {
   width: 100%;
-  height: 300px;
+  height: 400px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue b/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
index 892460a7f..efa102e4b 100644
--- a/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/mind-map/export-data-composition-api.vue
@@ -1,12 +1,12 @@
 <template>
-  <tiny-mind-map class="mindmap" ref="mindmap" @create="onCreate" v-model="exampleData" />
   <tiny-button @click="exportData">导出数据</tiny-button>
   <tiny-button @click="importData" :loading="loading">导入示例数据</tiny-button>
   <tiny-button @click="clearData" :loading="loading">清空数据</tiny-button>
+  <tiny-mind-map class="demo-mind-map-export-date" ref="mindmap" @create="onCreate" v-model="exampleData" />
 </template>
 
 <script setup>
-import { MindMap as TinyMindMap, Button as TinyButton, Notify } from '@opentiny/vue'
+import { MindMap as TinyMindMap, Button as TinyButton, Modal } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const render = ref(null)
@@ -57,11 +57,8 @@ const onCreate = (instance) => {
 }
 const exportData = () => {
   if (render.value) {
-    Notify({
-      type: 'info',
-      message: '数据已经输出于控制台, 请打开控制台查看'
-    })
-    // eslint-disable-next-line no-console
+    Modal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
+
     console.log(render.value.getData())
   }
 }
@@ -101,8 +98,9 @@ const clearData = () => {
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-export-date {
   width: 100%;
-  height: 300px;
+  height: 400px;
+  margin-top: 10px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/mind-map/export-data.vue b/examples/sites/demos/pc/app/mind-map/export-data.vue
index 2435df87d..993e8b478 100644
--- a/examples/sites/demos/pc/app/mind-map/export-data.vue
+++ b/examples/sites/demos/pc/app/mind-map/export-data.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-mind-map class="mindmap" ref="mindmap" @create="onCreate" v-model="exampleData" />
-  <tiny-button @click="exportData">导出数据</tiny-button>
-  <tiny-button @click="importData" :loading="loading">导入示例数据</tiny-button>
-  <tiny-button @click="clearData" :loading="loading">清空数据</tiny-button>
+  <div>
+    <tiny-button @click="exportData">导出数据</tiny-button>
+    <tiny-button @click="importData" :loading="loading">导入示例数据</tiny-button>
+    <tiny-button @click="clearData" :loading="loading">清空数据</tiny-button>
+    <tiny-mind-map class="demo-mind-map-date" ref="mindmap" @create="onCreate" v-model="exampleData" />
+  </div>
 </template>
 
-<script lang="jsx">
-import { MindMap, Button, Notify } from '@opentiny/vue'
+<script>
+import { MindMap, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -66,11 +68,8 @@ export default {
     },
     exportData() {
       if (this.render) {
-        Notify({
-          type: 'info',
-          message: '数据已经输出于控制台, 请打开控制台查看'
-        })
-        // eslint-disable-next-line no-console
+        Modal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
+
         console.log(this.render.getData())
       }
     },
@@ -112,8 +111,9 @@ export default {
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-date {
   width: 100%;
-  height: 300px;
+  height: 400px;
+  margin-top: 10px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js b/examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js
index 1b6276002..961e19120 100644
--- a/examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js
+++ b/examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js
@@ -1,5 +1,5 @@
 export default {
-  column: '2',
+  column: '1',
   owner: '',
   demos: [
     {
@@ -10,32 +10,60 @@ export default {
       },
       codeFiles: ['basic-usage.vue'],
       desc: {
-        'zh-CN': '本示例介绍了脑图的基本使用方法',
-        'en-US': 'This example introduces the basic usage of mind map'
+        'zh-CN':
+          '通过<code>Tab</code> 键增加子节点；<br/>' +
+          '通过<code>Enter</code> 键增加同级节点；<br/>' +
+          '通过<code>Delete</code> 键删除选中的单个或区域节点；<br/>' +
+          '通过<code>Ctrl + C/V</code> 实现节点的复制粘贴；<br/>' +
+          '通过鼠标滚轮＋ <code>Shift</code> 进行左右滚动；<br/>' +
+          '通过鼠标滚轮进行上下滚动；也可以使用鼠标点击拖动移动节点。',
+        'en-US':
+          'Press <code>Tab</code> to add a subnode. <br/>' +
+          'Press <code>Enter</code> to add a node of the same level. <br/>' +
+          'Press <code>Delete</code> to delete the selected node or area node. <br/>' +
+          'Copy and paste the node through <code>Ctrl + C/V</code>; <br/>' +
+          'Scroll left and right with the mouse wheel + <code>Shift</code>; <br/>' +
+          'Scroll up and down with the mouse wheel; You can also move nodes by clicking and dragging with the mouse.'
       }
     },
     {
       demoId: 'export-data',
       name: {
-        'zh-CN': '导出数据',
-        'en-US': 'Export data'
+        'zh-CN': '数据处理',
+        'en-US': 'Data Processing'
       },
       codeFiles: ['export-data.vue'],
       desc: {
-        'zh-CN': '本demo讲解了如何导入导出脑图',
-        'en-US': 'This demo introduces how to import/exprot mind map data'
+        'zh-CN': '通过对实例的获取实现对数据的导出、导入、清空等功能。',
+        'en-US': 'Export, import, and clear data by obtaining instances.'
       }
     },
     {
       demoId: 'event',
       name: {
-        'zh-CN': '事件触发',
+        'zh-CN': '事件',
         'en-US': 'Event'
       },
       codeFiles: ['event.vue'],
       desc: {
-        'zh-CN': '本demo讲解了该组件的所有可触发事件',
-        'en-US': 'This demo explains all the triggering events of the build'
+        'zh-CN':
+          '<code>create</code> 创建实例触发事件；<br/>' +
+          '<code>operation</code> 节点重新计算触发事件；<br/>' +
+          '<code>selectNode</code> 选中节点触发事件；<br/>' +
+          '<code>selectNewNode</code> 新增节点触发事件；<br/>' +
+          '<code>selectNodes</code> 选中多个节点触发事件；<br/>' +
+          '<code>unselectNode</code> 取消选择节点触发事件；<br/>' +
+          '<code>unselectNodes</code> 取消多个选择节点触发事件；<br/>' +
+          '<code>expandNode</code> 展开节点触发事件；<br/>',
+        'en-US':
+          '<code>create</code> Create an instance to trigger an event;<br/>' +
+          '<code>operation</code> The node recalculates the trigger event;<br/>' +
+          '<code>selectNode</code> Select a node to trigger an event;<br/>' +
+          '<code>selectNewNode</code> Add a node to trigger an event;<br/>' +
+          '<code>selectNodes</code> Select multiple nodes to trigger events;<br/>' +
+          '<code>unselectNode</code> Deselect a node to trigger an event;<br/>' +
+          '<code>unselectNodes</code> Cancel triggering events for multiple selected nodes;<br/>' +
+          '<code>expandNode</code> Expand the node to trigger an event;<br/>'
       }
     }
   ]
diff --git a/examples/sites/demos/pc/app/numeric/empty-value-composition-api.vue b/examples/sites/demos/pc/app/numeric/empty-value-composition-api.vue
new file mode 100644
index 000000000..5305dfb4c
--- /dev/null
+++ b/examples/sites/demos/pc/app/numeric/empty-value-composition-api.vue
@@ -0,0 +1,15 @@
+<template>
+  <tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+
+const step = ref(2)
+const stepNum = ref(1)
+
+function onChange(val, oldVal) {
+  Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+}
+</script>
diff --git a/examples/sites/demos/pc/app/numeric/empty-value.spec.ts b/examples/sites/demos/pc/app/numeric/empty-value.spec.ts
new file mode 100644
index 000000000..4efc7f169
--- /dev/null
+++ b/examples/sites/demos/pc/app/numeric/empty-value.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('设定清空输入后的绑定值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('numeric#empty-value')
+
+  const numeric = page.locator('.tiny-numeric').first()
+  const numericInput = numeric.locator('.tiny-numeric__input-inner')
+  const message = page.getByText('null 1')
+
+  await numericInput.fill('')
+  await numericInput.blur()
+
+  await expect(message).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/numeric/empty-value.vue b/examples/sites/demos/pc/app/numeric/empty-value.vue
new file mode 100644
index 000000000..d724c3717
--- /dev/null
+++ b/examples/sites/demos/pc/app/numeric/empty-value.vue
@@ -0,0 +1,24 @@
+<template>
+  <tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
+</template>
+
+<script>
+import { Numeric, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric: Numeric
+  },
+  data() {
+    return {
+      step: 2,
+      stepNum: 1
+    }
+  },
+  methods: {
+    onChange(val, oldVal) {
+      Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/numeric/mouse-wheel.spec.ts b/examples/sites/demos/pc/app/numeric/mouse-wheel.spec.ts
index 06b322576..e8f94554e 100644
--- a/examples/sites/demos/pc/app/numeric/mouse-wheel.spec.ts
+++ b/examples/sites/demos/pc/app/numeric/mouse-wheel.spec.ts
@@ -7,7 +7,7 @@ test('鼠标滚轮事件', async ({ page }) => {
   const numeric = page.getByRole('spinbutton')
   const initVal = Number(await numeric.inputValue())
   await numeric.click()
-  await page.mouse.wheel(0, -500)
+  await page.mouse.wheel(0, -1000)
   const currentVal = Number(await numeric.inputValue())
-  expect(currentVal).toBeLessThan(initVal)
+  expect(currentVal).toBeGreaterThanOrEqual(initVal)
 })
diff --git a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
index 7ecaaf406..e57bf5a8d 100644
--- a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
+++ b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
@@ -22,9 +22,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>max</code>属性设置计数器允许的最大值，<code>min</code>属性设置计数器允许的最小值，<code>circulate</code>属性设置当计数器的数值为最大值，继续计数，是否从最小值开始计数。</p>\n',
+          '可通过<code>max</code>属性设置计数器允许的最大值，<code>min</code>属性设置计数器允许的最小值，<code>circulate</code>属性设置当计数器的数值为最大值，继续计数，是否从最小值开始计数。',
         'en-US':
-          '<p>By setting the maximum value allowed by the<code>max</code>attribute counter, setting the minimum value allowed by the<code>min</code>attribute counter, and setting the<code>cycle</code>attribute, when the counter value reaches the maximum value, continue counting, whether to start counting from the minimum value.</p>\n'
+          'By setting the maximum value allowed by the<code>max</code>attribute counter, setting the minimum value allowed by the<code>min</code>attribute counter, and setting the<code>cycle</code>attribute, when the counter value reaches the maximum value, continue counting, whether to start counting from the minimum value.'
       },
       codeFiles: ['max-min.vue']
     },
@@ -35,9 +35,8 @@ export default {
         'en-US': 'Step'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>step</code>属性设置计数器的加减数值。</p>\n',
-        'en-US':
-          '<p>Set the addition and subtraction values of the counter through the<code>step</code>attribute.</p>\n'
+        'zh-CN': '可通过<code>step</code>属性设置计数器的加减数值。',
+        'en-US': 'Set the addition and subtraction values of the counter through the<code>step</code>attribute.'
       },
       codeFiles: ['about-step.vue']
     },
@@ -48,10 +47,9 @@ export default {
         'en-US': 'Numerical precision and format'
       },
       desc: {
-        'zh-CN':
-          '<p>可通过<code>precision</code>属性设置计数器的精度值，<code>format</code>属性设置数字显示格式。</p>\n',
+        'zh-CN': '可通过<code>precision</code>属性设置计数器的精度值，<code>format</code>属性设置数字显示格式。',
         'en-US':
-          '<p>Set the precision value of the counter through the<code>precision</code>attribute,<code>format</code> property sets the numeric display format.</p>\n'
+          'Set the precision value of the counter through the<code>precision</code>attribute,<code>format</code> property sets the numeric display format.'
       },
       codeFiles: ['precision.vue']
     },
@@ -62,7 +60,7 @@ export default {
         'en-US': 'Disabled'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>disabled</code>属性设置是否禁用计数器。</p>',
+        'zh-CN': '可通过<code>disabled</code>属性设置是否禁用计数器。',
         'en-US': 'Disable the counter by setting <code>disabled</code>.'
       },
       codeFiles: ['dynamic-disabled.vue']
@@ -77,10 +75,24 @@ export default {
         'zh-CN':
           '可通过<code>allow-empty</code>属性设置计数器内容的可清空特性，默认为 <code>false</code>，表示不可清空。',
         'en-US':
-          '<p>You can use the <code>allow-empty</code> property to set the clearability of counter contents. The default value is <code>false</code>, indicating that the data cannot be cleared. </p>\n'
+          'You can use the <code>allow-empty</code> property to set the clearability of counter contents. The default value is <code>false</code>, indicating that the data cannot be cleared. '
       },
       codeFiles: ['allow-empty.vue']
     },
+    {
+      demoId: 'empty-value',
+      name: {
+        'zh-CN': '设定清空输入后的绑定值',
+        'en-US': 'Sets the binding value after the input is cleared'
+      },
+      desc: {
+        'zh-CN':
+          '可通过 <code>empty-value</code> 属性设置计数器在可清空下，清空后组件的绑定值。默认为 <code>undefined</code>。示例中将清空后组件绑定值改为<code>null</code>',
+        'en-US':
+          'You can use the <code>empty-value</code> attribute to set the binding value of the cleared component when the counter can be cleared. The default value is <code>undefined</code>. In the example, the component binding value is changed to <code>null</code>.'
+      },
+      codeFiles: ['empty-value.vue']
+    },
     {
       demoId: 'numeric-size',
       name: {
@@ -89,9 +101,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>size</code> 属性设置计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。</p>\n',
+          '可通过<code>size</code> 属性设置计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。',
         'en-US':
-          '<p>You can set the counter size through the<code>size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. </p>\n'
+          'You can set the counter size through the<code>size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. '
       },
       codeFiles: ['numeric-size.vue']
     },
@@ -103,9 +115,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>controls</code> 属性设置计数器是否显示加减按钮，<code>controls-position</code> 属性设置加减按钮显示的位置。加减按钮默认分列两侧显示，<code>show-left</code> 属性设置左对齐。</p>\n',
+          '可通过<code>controls</code> 属性设置计数器是否显示加减按钮，<code>controls-position</code> 属性设置加减按钮显示的位置。加减按钮默认分列两侧显示，<code>show-left</code> 属性设置左对齐。',
         'en-US':
-          '<p>By setting whether the<code>controls</code>attribute counter displays add/subtract buttons, set the position where the<code>controls position</code>attribute add/subtract buttons are displayed. The addition and subtraction buttons are displayed on both sides of the column by default,<code>show-left</code> property set to left</p>\n'
+          'By setting whether the<code>controls</code>attribute counter displays add/subtract buttons, set the position where the<code>controls position</code>attribute add/subtract buttons are displayed. The addition and subtraction buttons are displayed on both sides of the column by default,<code>show-left</code> property set to left'
       },
       codeFiles: ['controls.vue']
     },
@@ -116,9 +128,9 @@ export default {
         'en-US': 'Mouse wheel scrolling change value'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>mouse-wheel</code>属性设置控制鼠标滚动滑轮的数值。</p>\n',
+        'zh-CN': '可通过<code>mouse-wheel</code>属性设置控制鼠标滚动滑轮的数值。',
         'en-US':
-          '<p>You can use the <code>mouse-wheel</code> attribute to control whether the scroll wheel can change the value. </p>\n'
+          'You can use the <code>mouse-wheel</code> attribute to control whether the scroll wheel can change the value. '
       },
       codeFiles: ['mouse-wheel.vue']
     },
@@ -129,9 +141,9 @@ export default {
         'en-US': 'Unit'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>unit</code>属性设置计数器的单位，设置单位后，加减按钮将不可用。</p>\n',
+        'zh-CN': '可通过<code>unit</code>属性设置计数器的单位，设置单位后，加减按钮将不可用。',
         'en-US':
-          '<p>Set the unit of the counter by using the <code>unit</code>property. After setting the unit, the increase and decrease buttons will be disabled.</p>\n'
+          'Set the unit of the counter by using the <code>unit</code>property. After setting the unit, the increase and decrease buttons will be disabled.'
       },
       codeFiles: ['unit.vue']
     },
@@ -143,7 +155,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p> 可通过<code>@change</code>设置监听数值改变事件。当<code>change-compat</code>为false时，仅当加减按钮及直接输入数值时会触发<code>change</code>事件。 </p>\n',
+          '可通过<code>@change</code>设置监听数值改变事件。当<code>change-compat</code>为false时，仅当加减按钮及直接输入数值时会触发<code>change</code>事件。',
         'en-US':
           'The <code>@change</code> event is triggered when the value of the text box is changed. When the<code>change compat</code>is false, the <code>change</code> event will be triggered when only the add and subtract buttons and directly entering numerical values are used.</p>\n'
       },
@@ -156,8 +168,8 @@ export default {
         'en-US': 'Focus Event'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>@focus</code>设置监听输入框获得焦点事件。</p>\n',
-        'en-US': 'The <code>@focus</code> event is triggered when the text box is focused. </p>\n'
+        'zh-CN': '可通过<code>@focus</code>设置监听输入框获得焦点事件。',
+        'en-US': 'The <code>@focus</code> event is triggered when the text box is focused. '
       },
       codeFiles: ['focus-event.vue']
     },
@@ -168,8 +180,8 @@ export default {
         'en-US': 'Out of Focus Event'
       },
       desc: {
-        'zh-CN': '<p>可通过<code>@blur</code>设置监听输入框失去焦点事件。</p>\n',
-        'en-US': '<p>The<code>@blur</code>event is triggered when the text box loses focus. </p>\n'
+        'zh-CN': '可通过<code>@blur</code>设置监听输入框失去焦点事件。',
+        'en-US': 'The<code>@blur</code>event is triggered when the text box loses focus. '
       },
       codeFiles: ['blur-event.vue']
     },
@@ -180,9 +192,8 @@ export default {
         'en-US': 'Out of Focus Event'
       },
       desc: {
-        'zh-CN':
-          '<p>可通过 <code>string-mode</code> 设置高精度模式，当 JS 默认的 Number 不满足数字的长度与精度需求时。</p>\n',
-        'en-US': '<p>The<code>@blur</code>event is triggered when the text box loses focus. </p>\n'
+        'zh-CN': '可通过 <code>string-mode</code> 设置高精度模式，当 JS 默认的 Number 不满足数字的长度与精度需求时。',
+        'en-US': 'The<code>@blur</code>event is triggered when the text box loses focus. '
       },
       codeFiles: ['string-mode.vue']
     },
@@ -194,7 +205,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过<code> shape="filter" </code>属性设置切换过滤器模式，过滤器模式下可传入<code>title</code>显示标题，<code>tip</code>显示提示信息，<code>clearable</code>是否显示清除按钮，默认值为<code>true</code>。<code>blank</code>属性将过滤器背景设置为透明。</p>\n',
+          '通过<code> shape="filter" </code>属性设置切换过滤器模式，过滤器模式下可传入<code>title</code>显示标题，<code>tip</code>显示提示信息，<code>clearable</code>是否显示清除按钮，默认值为<code>true</code>。<code>blank</code>属性将过滤器背景设置为透明。',
         'en-US':
           'Set the <code>shape="filter"</code> attribute to switch the filter mode. In the filter mode, you can transfer the <code>title</code> to display the title and <code>tip</code> to display the prompt. <code>clearable</code>Indicates whether to display the Clear button. The default value is <code>true</code>.<code>blank</code> property sets the filter background to transparent.'
       },
@@ -208,7 +219,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过<code>filter</code>属性展示筛选框，<code>filter-change</code>事件筛选框选择触发，过滤器模式下点击关闭图标，触发<code>clear</code>事件。</p>\n',
+          '通过<code>filter</code>属性展示筛选框，<code>filter-change</code>事件筛选框选择触发，过滤器模式下点击关闭图标，触发<code>clear</code>事件。',
         'en-US':
           'The <code>filter</code> attribute is used to display the filter box. Select Trigger in the <code>filter-change</code> event filter box. In filter mode, click the close icon to trigger the <code>clear</code> event.'
       },
diff --git a/examples/sites/demos/pc/app/popconfirm/trigger.spec.ts b/examples/sites/demos/pc/app/popconfirm/trigger.spec.ts
index 2d1928c89..2885109bb 100644
--- a/examples/sites/demos/pc/app/popconfirm/trigger.spec.ts
+++ b/examples/sites/demos/pc/app/popconfirm/trigger.spec.ts
@@ -4,15 +4,17 @@ test('触发方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popconfirm#trigger')
 
-  const demo = page.locator('#trigger')
-  const popConfirm = demo.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  const hoverBtn = page.getByRole('button', { name: '鼠标悬停显示' })
+  const clickBtn = page.getByRole('button', { name: '点击显示' })
   const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
+  const hoverValueBtn = page.getByRole('button', { name: '确定' })
 
-  await popConfirm.first().hover()
+  await hoverBtn.hover()
+  await page.waitForTimeout(100)
   await expect(popConfirmPopover.first()).toBeVisible()
+  await hoverValueBtn.click()
+  await page.waitForTimeout(100)
 
-  await popConfirm.nth(1).hover()
-  await expect(popConfirmPopover.nth(1)).not.toBeVisible()
-  await popConfirm.nth(1).click()
+  await clickBtn.click()
   await expect(popConfirmPopover.nth(1)).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/popconfirm/type.spec.ts b/examples/sites/demos/pc/app/popconfirm/type.spec.ts
index e1b10437a..038ab1831 100644
--- a/examples/sites/demos/pc/app/popconfirm/type.spec.ts
+++ b/examples/sites/demos/pc/app/popconfirm/type.spec.ts
@@ -1,4 +1,5 @@
-import { test, expect, Locator } from '@playwright/test'
+import type { Locator } from '@playwright/test'
+import { test, expect } from '@playwright/test'
 
 test('图标类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
@@ -9,16 +10,16 @@ test('图标类型', async ({ page }) => {
   const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
   const getIcon = (parent: Locator) => parent.locator('svg.tiny-svg path').first()
 
-  await popConfirm.first().click()
+  await popConfirm.first().hover()
   await expect(popConfirmPopover.first()).toBeVisible()
   await expect(getIcon(popConfirmPopover.first())).toBeVisible()
-  await popConfirm.nth(1).click()
+  await popConfirm.nth(1).hover()
   await expect(popConfirmPopover.nth(1)).toBeVisible()
   await expect(getIcon(popConfirmPopover.nth(1))).toBeVisible()
-  await popConfirm.nth(2).click()
+  await popConfirm.nth(2).hover()
   await expect(popConfirmPopover.nth(2)).toBeVisible()
   await expect(getIcon(popConfirmPopover.nth(2))).toBeVisible()
-  await popConfirm.nth(3).click()
+  await popConfirm.nth(3).hover()
   await expect(popConfirmPopover.nth(3)).toBeVisible()
   await expect(getIcon(popConfirmPopover.nth(3))).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue b/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
index ac0b9a3e3..868983776 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
@@ -14,6 +14,7 @@
 <script setup>
 import { ref } from 'vue'
 import { Popeditor as TinyPopeditor, Select, Numeric } from '@opentiny/vue'
+import { hooks } from '@opentiny/vue-common'
 
 const value = ref(5)
 const gridOp = ref({
@@ -54,7 +55,7 @@ const conditions = ref([
   {
     label: '城市',
     field: 'city',
-    component: Select,
+    component: hooks.markRaw(Select),
     attrs: {
       options: [
         { label: '福州', value: 'fz' },
@@ -63,7 +64,7 @@ const conditions = ref([
     },
     span: 6
   },
-  { label: '员工', field: 'employees', component: Numeric }
+  { label: '员工', field: 'employees', component: hooks.markRaw(Numeric) }
 ])
 
 function remoteSearch({ page }) {
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout.vue b/examples/sites/demos/pc/app/popeditor/condition-layout.vue
index b6202c6c6..87e589444 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout.vue
@@ -13,6 +13,7 @@
 
 <script>
 import { Popeditor, Select, Numeric } from '@opentiny/vue'
+import { hooks } from '@opentiny/vue-common'
 
 export default {
   components: {
@@ -59,7 +60,7 @@ export default {
         {
           label: '城市',
           field: 'city',
-          component: Select,
+          component: hooks.markRaw(Select),
           attrs: {
             options: [
               { label: '福州', value: 'fz' },
@@ -68,7 +69,7 @@ export default {
           },
           span: 6
         },
-        { label: '员工', field: 'employees', component: Numeric }
+        { label: '员工', field: 'employees', component: hooks.markRaw(Numeric) }
       ]
     }
   },
diff --git a/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue b/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
index 19d4f01e0..5430759ef 100644
--- a/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot-footer-composition-api.vue
@@ -101,7 +101,7 @@ const gridOp = ref({
 })
 
 function handleClick(next) {
-  // doSomething() // do something you want
-  next() // next
+  // do something you want
+  next()
 }
 </script>
diff --git a/examples/sites/demos/pc/app/popeditor/slot-footer.vue b/examples/sites/demos/pc/app/popeditor/slot-footer.vue
index da577ee5c..5a773a2f8 100644
--- a/examples/sites/demos/pc/app/popeditor/slot-footer.vue
+++ b/examples/sites/demos/pc/app/popeditor/slot-footer.vue
@@ -109,8 +109,8 @@ export default {
   },
   methods: {
     handleClick(next) {
-      // doSomething() // do something you want
-      next() // next
+      // do something you want
+      next()
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
index b0c5942d6..835294585 100644
--- a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
+++ b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
@@ -193,7 +193,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '\n          <p>通过 <code>before-close</code> 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 <code>false</code> 值，则拦截弹窗关闭；否则不拦截。</p>\n          <p>可以通过该拦截方法传入的参数获取关闭的操作类型 <code>confirm</code> 弹窗有以下关闭类型：</p>\n          <ul>\n            <li>confirm：点击确认时关闭</li>\n            <li>cancel：点击取消时关闭</li>\n            <li>close：点击关闭按钮时关闭</li>\n          </ul>\n        ',
+          '<p>通过 <code>before-close</code> 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 <code>false</code> 值，则拦截弹窗关闭；否则不拦截。</p>\n          <p>可以通过该拦截方法传入的参数获取关闭的操作类型 <code>confirm</code> 弹窗有以下关闭类型：</p>\n          <ul>\n            <li>confirm：点击确认时关闭</li>\n            <li>cancel：点击取消时关闭</li>\n            <li>close：点击关闭按钮时关闭</li>\n          </ul>\n        ',
         'en-US':
           '<p>The <code>tabindex</code> attribute is used to determine whether the focus can be obtained by pressing Tab and the focus sequence. This parameter is valid only when the <code>readonly</code> attribute is set to false. </p>'
       },
@@ -206,8 +206,8 @@ export default {
         'en-US': 'Reset'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>readonly</code> 属性设置为是否禁用。</p>',
-        'en-US': '<p>Use the <code>before-reset</code> attribute to set the hook function before reset. </p>'
+        'zh-CN': '<p>通过 <code>readonly</code> 属性设置为是否只读。</p>',
+        'en-US': '<p>Set the <code>readonly</code> attribute to read-only.</p>'
       },
       codeFiles: ['readonly.vue']
     },
@@ -215,12 +215,13 @@ export default {
       demoId: 'tabindex',
       name: {
         'zh-CN': '输入框的 tabindex',
-        'en-US': 'Component Query Condition Slot'
+        'en-US': 'tabindex in the text box'
       },
       desc: {
         'zh-CN':
           '<p>通过 <code>tabindex</code> 属性设置通过 Tab 键获焦及获焦顺序（<code>readonly</code> 属性设置为 false 时有效）。</p>',
-        'en-US': '<p>Customize the pop-up panel query structure by slot <code>search</code>. </p>'
+        'en-US':
+          '<p>Set the focus obtaining and focus obtaining sequence by pressing Tab through the <code>tabindex</code> attribute. This parameter is valid only when the <code>readonly</code> attribute is set to false.</p>'
       },
       codeFiles: ['tabindex.vue']
     },
@@ -232,7 +233,7 @@ export default {
       },
       desc: {
         'zh-CN': '<p>通过 <code>before-reset</code> 属性设置重置前的钩子函数。</p>',
-        'en-US': '<p> is set to read-only through the <code>disabled</code> attribute. </p>'
+        'en-US': '<p>Use the <code>before-reset</code> attribute to set the hook function before reset. </p>'
       },
       codeFiles: ['before-reset.vue']
     },
@@ -240,12 +241,11 @@ export default {
       demoId: 'slot',
       name: {
         'zh-CN': '组件查询条件插槽',
-        'en-US': 'The filter criteria in the pop-up window can be cleared.'
+        'en-US': 'Component Query Condition Slot'
       },
       desc: {
         'zh-CN': '<p>通过插槽 <code>search</code> 自定义弹出面板查询结构。</p>',
-        'en-US':
-          'The <p><code>clearable</code> Popeditor component supports the configuration of the Clear button in the search form. </p>'
+        'en-US': 'Customize the pop-up panel query structure through slot <code>search</code>.'
       },
       codeFiles: ['slot.vue']
     },
@@ -268,9 +268,8 @@ export default {
         'en-US': 'Submit Field Mapping'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>disabled</code> 属性设置为是否只读。</p>',
-        'en-US':
-          '<p>The <code>value-field</code> attribute is used to set the fields submitted by the component to the background. </p>'
+        'zh-CN': '<p>通过 <code>disabled</code> 属性设置为是否禁用。</p>',
+        'en-US': '<p>Use the <code>disabled</code> attribute to set whether to disable the function.</p>'
       },
       codeFiles: ['disabled.vue']
     },
diff --git a/examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue
index 267cc7221..7787caa0f 100644
--- a/examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/radio/dynamic-disable-composition-api.vue
@@ -4,9 +4,7 @@
     <tiny-radio disabled v-model="radio" label="不选中禁用">不选中禁用</tiny-radio>
     <div class="mt-20">
       <tiny-radio-group disabled v-model="radio1">
-        <tiny-radio :label="3">备选项1</tiny-radio>
-        <tiny-radio :label="6">备选项2</tiny-radio>
-        <tiny-radio :label="9">备选项3</tiny-radio>
+        <tiny-radio v-for="item in dataArr" :key="item.value" :label="item.lable">{{ item.value }}</tiny-radio>
       </tiny-radio-group>
     </div>
 
@@ -25,8 +23,13 @@ import { ref } from 'vue'
 import { Radio as TinyRadio, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
 
 const radio = ref('禁用')
-const radio1 = ref('3')
+const radio1 = ref('6')
 const radio2 = ref('1')
+const dataArr = ref([
+  { lable: '3', value: '备选项1' },
+  { lable: '6', value: '备选项2' },
+  { lable: '9', value: '备选项3' }
+])
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/radio/dynamic-disable.vue b/examples/sites/demos/pc/app/radio/dynamic-disable.vue
index eb175b770..15cb53bb3 100644
--- a/examples/sites/demos/pc/app/radio/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/radio/dynamic-disable.vue
@@ -4,9 +4,7 @@
     <tiny-radio disabled v-model="radio" label="不选中禁用">不选中禁用</tiny-radio>
     <div class="mt-20">
       <tiny-radio-group disabled v-model="radio1">
-        <tiny-radio :label="3">备选项1</tiny-radio>
-        <tiny-radio :label="6">备选项2</tiny-radio>
-        <tiny-radio :label="9">备选项3</tiny-radio>
+        <tiny-radio v-for="item in dataArr" :key="item.value" :label="item.lable">{{ item.value }}</tiny-radio>
       </tiny-radio-group>
     </div>
 
@@ -32,8 +30,13 @@ export default {
   data() {
     return {
       radio: '禁用',
-      radio1: '3',
-      radio2: '1'
+      radio1: '6',
+      radio2: '1',
+      dataArr: [
+        { lable: '3', value: '备选项1' },
+        { lable: '6', value: '备选项2' },
+        { lable: '9', value: '备选项3' }
+      ]
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/roles/base-composition-api.vue b/examples/sites/demos/pc/app/roles/base-composition-api.vue
index 833591bd5..12d3f915b 100644
--- a/examples/sites/demos/pc/app/roles/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/roles/base-composition-api.vue
@@ -1,8 +1,8 @@
 <template>
-  <tiny-roles @change="change"></tiny-roles>
+  <tiny-roles @change="change" :popper-append-to-body="false"></tiny-roles>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Roles as TinyRoles, Modal } from '@opentiny/vue'
 
 function change(userId) {
diff --git a/examples/sites/demos/pc/app/roles/base.vue b/examples/sites/demos/pc/app/roles/base.vue
index 3b4777392..e7f8e12ce 100644
--- a/examples/sites/demos/pc/app/roles/base.vue
+++ b/examples/sites/demos/pc/app/roles/base.vue
@@ -1,8 +1,8 @@
 <template>
-  <tiny-roles @change="change"></tiny-roles>
+  <tiny-roles @change="change" :popper-append-to-body="false"></tiny-roles>
 </template>
 
-<script lang="jsx">
+<script>
 import { Roles, Modal } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue b/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
index 6ead53f9f..154ffd928 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
@@ -16,6 +16,11 @@
     <br />
     <br />
     <br />
+    <div>场景3： click-expand 折叠</div>
+    <br />
+    <tiny-select v-model="value3" :max-visible-rows="2" multiple click-expand>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
   </div>
 </template>
 
@@ -33,6 +38,7 @@ const options = ref([
 
 const value1 = ref(['选项1', '选项2'])
 const value2 = ref(['选项1', '选项2', '选项3', '选项4'])
+const value3 = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])
 </script>
 
 <style lang="less" scoped>
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 fa38e2ad2..f1ba77c19 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags.spec.ts
+++ b/examples/sites/demos/pc/app/select/collapse-tags.spec.ts
@@ -1,32 +1,53 @@
 import { test, expect } from '@playwright/test'
 
-test('collapse-tags', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('select#collapse-tags')
-  const wrap = page.locator('#collapse-tags')
-  const select = wrap.locator('.tiny-select').nth(0)
-  const dropdown = page.locator('body > .tiny-select-dropdown')
-  const tag = select.locator('.tiny-tag')
-  const option = dropdown.locator('.tiny-option')
+test.describe('展开折叠标签', () => {
+  test('collapse-tags', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select#collapse-tags')
+    const wrap = page.locator('#collapse-tags')
+    const select = wrap.locator('.tiny-select').nth(0)
+    const dropdown = page.locator('body > .tiny-select-dropdown')
+    const tag = select.locator('.tiny-tag')
+    const option = dropdown.locator('.tiny-option')
 
-  // 验证默认值的折叠标签显示
-  await expect(tag).toHaveCount(2)
-  await expect(tag.filter({ hasText: '黄金糕' })).toBeVisible()
-  await expect(tag.filter({ hasText: '+ 1' })).toBeVisible()
+    // 验证默认值的折叠标签显示
+    await expect(tag).toHaveCount(2)
+    await expect(tag.filter({ hasText: '黄金糕' })).toBeVisible()
+    await expect(tag.filter({ hasText: '+ 1' })).toBeVisible()
 
-  // 点击下拉后选中效果
-  await tag.first().click()
-  await expect(option.filter({ hasText: '黄金糕' })).toHaveClass(/selected/)
-  await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/selected/)
+    // 点击下拉后选中效果
+    await tag.first().click()
+    await expect(option.filter({ hasText: '黄金糕' })).toHaveClass(/selected/)
+    await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/selected/)
 
-  // 取消选中一个
-  await option.filter({ hasText: '黄金糕' }).locator('span').nth(2).click()
-  await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
-  await expect(tag).toHaveCount(1)
+    // 取消选中一个
+    await option.filter({ hasText: '黄金糕' }).locator('span').nth(2).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 expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
-  await expect(tag).toHaveCount(2)
+    // 再选中2个
+    await option.filter({ hasText: '蚵仔煎' }).locator('span').nth(2).click()
+    await option.filter({ hasText: '北京烤鸭' }).locator('span').nth(2).click()
+    await expect(tag.filter({ hasText: '+ 2' })).toBeVisible()
+    await expect(tag).toHaveCount(2)
+  })
+
+  test('click-expand 点击展开折叠', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('select#collapse-tags')
+
+    const select = page.locator('#collapse-tags .tiny-select').nth(2)
+    const expandTag = select.locator('.tiny-select__tags-collapse')
+    const collapseSpan = select.locator('.tiny-select__collapse-text')
+    const tags = select.locator('.tiny-tag')
+
+    await expect(select).toHaveClass(/is-click-expand/)
+    await expect(expandTag).toBeVisible()
+    await expect(collapseSpan).not.toBeVisible()
+    await expect(tags.last()).toHaveClass(/not-visible/)
+    await expandTag.click()
+    await expect(expandTag).not.toBeVisible()
+    await expect(collapseSpan).toBeVisible()
+    await expect(tags.last()).not.toHaveClass(/not-visible/)
+  })
 })
diff --git a/examples/sites/demos/pc/app/select/collapse-tags.vue b/examples/sites/demos/pc/app/select/collapse-tags.vue
index 63c294eda..e8ad86cec 100644
--- a/examples/sites/demos/pc/app/select/collapse-tags.vue
+++ b/examples/sites/demos/pc/app/select/collapse-tags.vue
@@ -16,6 +16,11 @@
     <br />
     <br />
     <br />
+    <div>场景3： click-expand 折叠</div>
+    <br />
+    <tiny-select v-model="value3" :max-visible-rows="2" multiple click-expand>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
   </div>
 </template>
 
@@ -34,10 +39,12 @@ export default {
         { value: '选项2', label: '双皮奶' },
         { value: '选项3', label: '蚵仔煎' },
         { value: '选项4', label: '龙须面超长超长超长超长超长超长超长超长超长' },
-        { value: '选项5', label: '北京烤鸭' }
+        { value: '选项5', label: '北京烤鸭' },
+        { value: '选项6', label: '肠粉' }
       ],
       value1: ['选项1', '选项2'],
-      value2: ['选项1', '选项2', '选项3', '选项4']
+      value2: ['选项1', '选项2', '选项3', '选项4'],
+      value3: ['选项1', '选项2', '选项3', '选项4', '选项5']
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/select/copy-multi.spec.ts b/examples/sites/demos/pc/app/select/copy-multi.spec.ts
index 24a341de2..444470ae3 100644
--- a/examples/sites/demos/pc/app/select/copy-multi.spec.ts
+++ b/examples/sites/demos/pc/app/select/copy-multi.spec.ts
@@ -8,6 +8,7 @@ test('多选复制单个标签', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(0)
   const tag = select.locator('.tiny-tag').nth(0)
 
+  await expect(tag).toContainText('黄金糕')
   await page.waitForTimeout(200)
   const tagBox = await tag.locator('span').boundingBox()
   const x = tagBox.x + tagBox.width
diff --git a/examples/sites/demos/pc/app/select/copy-single.spec.ts b/examples/sites/demos/pc/app/select/copy-single.spec.ts
index 39ffa28c4..8b45e33ad 100644
--- a/examples/sites/demos/pc/app/select/copy-single.spec.ts
+++ b/examples/sites/demos/pc/app/select/copy-single.spec.ts
@@ -33,6 +33,7 @@ test('单选可搜索配置 allow-copy 可复制', async ({ page }) => {
   const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom .tiny-input__inner')
 
+  await expect(input).toHaveValue('黄金糕')
   await page.waitForTimeout(200)
   const inputBox = await input.boundingBox()
 
diff --git a/examples/sites/demos/pc/app/select/events-composition-api.vue b/examples/sites/demos/pc/app/select/events-composition-api.vue
index 55d82ada8..a5ecdaef4 100644
--- a/examples/sites/demos/pc/app/select/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/events-composition-api.vue
@@ -48,7 +48,6 @@ const value2 = ref([])
 const change = () => {
   Modal.message({
     message: '触发 change 事件',
-    duration: 500,
     status: 'info'
   })
 }
diff --git a/examples/sites/demos/pc/app/select/events.vue b/examples/sites/demos/pc/app/select/events.vue
index e2d05b24e..1b48df21a 100644
--- a/examples/sites/demos/pc/app/select/events.vue
+++ b/examples/sites/demos/pc/app/select/events.vue
@@ -59,7 +59,6 @@ export default {
     change() {
       Modal.message({
         message: '触发 change 事件',
-        duration: 500,
         status: 'info'
       })
     },
diff --git a/examples/sites/demos/pc/app/select/size.spec.ts b/examples/sites/demos/pc/app/select/size.spec.ts
index 2a98831ad..1e49b72b0 100644
--- a/examples/sites/demos/pc/app/select/size.spec.ts
+++ b/examples/sites/demos/pc/app/select/size.spec.ts
@@ -35,10 +35,11 @@ test('small 尺寸', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(2)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
+  const { height } = await input.locator('.tiny-input__inner').boundingBox()
 
   await expect(input).toHaveClass(/tiny-input-small/)
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '32px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--small tiny-tag--light/)
+  expect(height).toBeCloseTo(32, 1)
 })
 
 test('mini 尺寸', async ({ page }) => {
@@ -49,8 +50,9 @@ test('mini 尺寸', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(3)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
+  const { height } = await input.locator('.tiny-input__inner').boundingBox()
 
   await expect(input).toHaveClass(/tiny-input-mini/)
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '24px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--mini tiny-tag--light/)
+  expect(height).toBeCloseTo(24, 1)
 })
diff --git a/examples/sites/demos/pc/app/skeleton/animation-composition-api.vue b/examples/sites/demos/pc/app/skeleton/animation-composition-api.vue
new file mode 100644
index 000000000..6d5b60712
--- /dev/null
+++ b/examples/sites/demos/pc/app/skeleton/animation-composition-api.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-button @click="handler">{{ animated ? '关闭' : '开启' }}</tiny-button>
+    <br /><br />
+    <tiny-skeleton :animated="animated">
+      <template #placeholder>
+        <tiny-skeleton-item></tiny-skeleton-item>
+        <br />
+        <br />
+        <tiny-skeleton-item variant="image"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+  </div>
+</template>
+
+<script setup>
+import { Skeleton as TinySkeleton, Button as TinyButton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const animated = ref(true)
+
+const handler = () => {
+  animated.value = !animated.value
+}
+</script>
diff --git a/examples/sites/demos/pc/app/skeleton/animation.spec.ts b/examples/sites/demos/pc/app/skeleton/animation.spec.ts
new file mode 100644
index 000000000..f6b7787ca
--- /dev/null
+++ b/examples/sites/demos/pc/app/skeleton/animation.spec.ts
@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('动画效果', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('skeleton#animation')
+
+  const square = page.locator('.tiny-skeleton-item--square')
+  const image = page.locator('.tiny-skeleton-item--image')
+
+  // 测试动画效果
+  await expect(square).toHaveClass(/tiny-skeleton-item--active/)
+  await expect(image).toHaveClass(/tiny-skeleton-item--active/)
+
+  const button = page.locator('.tiny-button')
+  await button.click()
+  await page.waitForTimeout(500)
+  await expect(square).toHaveClass(/tiny-skeleton-item/)
+  await expect(image).toHaveClass(/tiny-skeleton-item/)
+})
diff --git a/examples/sites/demos/pc/app/skeleton/animation.vue b/examples/sites/demos/pc/app/skeleton/animation.vue
new file mode 100644
index 000000000..e1527ed94
--- /dev/null
+++ b/examples/sites/demos/pc/app/skeleton/animation.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-button @click="handler">{{ animated ? '关闭' : '开启' }}</tiny-button>
+    <br /><br />
+    <tiny-skeleton :animated="animated">
+      <template #placeholder>
+        <tiny-skeleton-item></tiny-skeleton-item>
+        <br />
+        <br />
+        <tiny-skeleton-item variant="image"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+  </div>
+</template>
+
+<script>
+import { Skeleton, SkeletonItem, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySkeleton: Skeleton,
+    TinySkeletonItem: SkeletonItem,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      animated: true
+    }
+  },
+  methods: {
+    handler() {
+      this.animated = !this.animated
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue b/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue
index 141c01be8..58f1aab47 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-layout-composition-api.vue
@@ -1,10 +1,16 @@
 <template>
   <div>
+    <div class="m-20">style 类型</div>
     <tiny-skeleton>
       <template #placeholder>
-        <tiny-skeleton-item variant="image" style="width: 200px"></tiny-skeleton-item>
-        <br /><br />
-        <tiny-skeleton-item variant="circle" size="small"></tiny-skeleton-item>
+        <tiny-skeleton-item style="width: 200px; height: 100px"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+
+    <div class="m-20">class 类型</div>
+    <tiny-skeleton>
+      <template #placeholder>
+        <tiny-skeleton-item class="tiny-skeleton-class"></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
@@ -13,3 +19,13 @@
 <script setup>
 import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-skeleton-class {
+  width: 200px;
+  height: 100px;
+}
+.m-20 {
+  margin: 20px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-layout.spec.ts b/examples/sites/demos/pc/app/skeleton/custom-layout.spec.ts
index 54fa44a2a..b23de3532 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-layout.spec.ts
+++ b/examples/sites/demos/pc/app/skeleton/custom-layout.spec.ts
@@ -1,14 +1,11 @@
 import { expect, test } from '@playwright/test'
 
-test('自定义排版', async ({ page }) => {
+test('样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#custom-layout')
 
-  const image = page.locator('.tiny-skeleton-item--image')
-  const circle = page.locator('.tiny-skeleton-item--circle')
+  const image = page.locator('.tiny-skeleton-item')
 
-  await expect(image).toHaveCount(1)
-  await expect(circle).toHaveCount(1)
-  await expect(circle).toHaveClass(/tiny-skeleton-item--small/)
-  await expect(image).toHaveCSS('width', '200px')
+  await expect(image.nth(0)).toHaveCSS('width', '200px')
+  await expect(image.nth(1)).toHaveCSS('height', '100px')
 })
diff --git a/examples/sites/demos/pc/app/skeleton/custom-layout.vue b/examples/sites/demos/pc/app/skeleton/custom-layout.vue
index 501d04925..9322baa9d 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-layout.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-layout.vue
@@ -1,10 +1,16 @@
 <template>
   <div>
+    <div class="m-20">style 类型</div>
     <tiny-skeleton>
       <template #placeholder>
-        <tiny-skeleton-item variant="image" style="width: 200px"></tiny-skeleton-item>
-        <br /><br />
-        <tiny-skeleton-item variant="circle" size="small"></tiny-skeleton-item>
+        <tiny-skeleton-item style="width: 200px; height: 100px"></tiny-skeleton-item>
+      </template>
+    </tiny-skeleton>
+
+    <div class="m-20">class 类型</div>
+    <tiny-skeleton>
+      <template #placeholder>
+        <tiny-skeleton-item class="tiny-skeleton-class"></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
@@ -20,3 +26,13 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-skeleton-class {
+  width: 200px;
+  height: 100px;
+}
+.m-20 {
+  margin: 20px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue
index c320afed0..e4c32bc67 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-skeleton :rows="5" :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
+    <tiny-skeleton :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.spec.ts b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.spec.ts
index 4521c942f..eea43315e 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.spec.ts
+++ b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.spec.ts
@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-test('自定义段落宽度', async ({ page }) => {
+test('段落宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#custom-paragraph-width')
 
diff --git a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue
index 9751c0095..bf4f8677e 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue
+++ b/examples/sites/demos/pc/app/skeleton/custom-paragraph-width.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-skeleton :rows="5" :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
+    <tiny-skeleton :rows-width="['200px', '100px', '50px']"></tiny-skeleton>
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/skeleton/custom-rows.spec.ts b/examples/sites/demos/pc/app/skeleton/custom-rows.spec.ts
index 233202ff8..c71b9dfa5 100644
--- a/examples/sites/demos/pc/app/skeleton/custom-rows.spec.ts
+++ b/examples/sites/demos/pc/app/skeleton/custom-rows.spec.ts
@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-test('自定义段落行数', async ({ page }) => {
+test('段落行数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#custom-rows')
 
diff --git a/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue b/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue
index b3714751b..0cb7f4324 100644
--- a/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/fine-grained-mode-composition-api.vue
@@ -1,34 +1,17 @@
 <template>
   <div>
-    <p>大小</p>
-    <tiny-radio v-model="size" label="small">Small</tiny-radio>
-    <tiny-radio v-model="size" label="medium">Middle</tiny-radio>
-    <tiny-radio v-model="size" label="large">Large</tiny-radio>
-    <br /><br />
-    <p>动画</p>
-    <tiny-switch v-model="active"></tiny-switch>
-    <br /><br />
-    <tiny-skeleton :active="active">
+    <tiny-skeleton>
       <template #placeholder>
-        <tiny-skeleton-item></tiny-skeleton-item>
+        <tiny-skeleton-item variant="square"></tiny-skeleton-item>
         <br />
-        <tiny-skeleton-item variant="image" :size="size"></tiny-skeleton-item>
+        <tiny-skeleton-item variant="image"></tiny-skeleton-item>
         <br /><br />
-        <tiny-skeleton-item variant="circle" :size="size"></tiny-skeleton-item>
+        <tiny-skeleton-item variant="circle"></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
 </template>
 
 <script setup>
-import {
-  Skeleton as TinySkeleton,
-  Radio as TinyRadio,
-  SkeletonItem as TinySkeletonItem,
-  Switch as TinySwitch
-} from '@opentiny/vue'
-import { ref } from 'vue'
-
-const size = ref('medium')
-const active = ref(true)
+import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/fine-grained-mode.spec.ts b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.spec.ts
index e9a9d5118..6ee1aa4bc 100644
--- a/examples/sites/demos/pc/app/skeleton/fine-grained-mode.spec.ts
+++ b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.spec.ts
@@ -1,50 +1,14 @@
 import { expect, test } from '@playwright/test'
 
-test('细粒度模式', async ({ page }) => {
+test('形态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('skeleton#fine-grained-mode')
 
-  const first = page.locator('.tiny-skeleton')
-  const radio1 = page.locator('.tiny-radio').nth(0)
-  const radio2 = page.locator('.tiny-radio').nth(1)
-  const radio3 = page.locator('.tiny-radio').nth(2)
-  const activeSwitch = page.locator('.pc-demo > div > .tiny-switch')
   const image = page.locator('.tiny-skeleton-item--image')
   const circle = page.locator('.tiny-skeleton-item--circle')
   const square = page.locator('.tiny-skeleton-item--square')
 
-  await expect(first).toHaveCount(1)
-
-  // 测试动画效果
-  await expect(circle).toHaveClass(/tiny-skeleton-item--active/)
-  await expect(square).toHaveClass(/tiny-skeleton-item--active/)
-  await expect(image).toHaveClass(/tiny-skeleton-item--active/)
-
-  await activeSwitch.click()
-  await page.waitForTimeout(500)
-  await expect(image).not.toHaveClass(/tiny-skeleton-item--active/)
-  await expect(circle).not.toHaveClass(/tiny-skeleton-item--active/)
-  await expect(square).not.toHaveClass(/tiny-skeleton-item--active/)
-
-  // 测试大小
-  await radio2.click()
-  await page.waitForTimeout(500)
-  await expect(radio2).toHaveClass(/is-checked/)
-  await expect(circle).toHaveClass(/tiny-skeleton-item--medium/)
-  await expect(image).toHaveClass(/tiny-skeleton-item--medium/)
-  await expect(square).not.toHaveClass(/tiny-skeleton-item--medium/)
-
-  await radio1.click()
-  await page.waitForTimeout(500)
-  await expect(radio1).toHaveClass(/is-checked/)
-  await expect(circle).toHaveClass(/tiny-skeleton-item--small/)
-  await expect(image).toHaveClass(/tiny-skeleton-item--small/)
-  await expect(square).not.toHaveClass(/tiny-skeleton-item--small/)
-
-  await radio3.click()
-  await page.waitForTimeout(500)
-  await expect(radio3).toHaveClass(/is-checked/)
-  await expect(circle).toHaveClass(/tiny-skeleton-item--large/)
-  await expect(image).toHaveClass(/tiny-skeleton-item--large/)
-  await expect(square).not.toHaveClass(/tiny-skeleton-item--large/)
+  await expect(image).toBeVisible()
+  await expect(circle).toBeVisible()
+  await expect(square).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue
index a86f40469..6ce3c0d63 100644
--- a/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue
+++ b/examples/sites/demos/pc/app/skeleton/fine-grained-mode.vue
@@ -1,41 +1,24 @@
 <template>
   <div>
-    <p>大小</p>
-    <tiny-radio v-model="size" label="small">Small</tiny-radio>
-    <tiny-radio v-model="size" label="medium">Middle</tiny-radio>
-    <tiny-radio v-model="size" label="large">Large</tiny-radio>
-    <br /><br />
-
-    <p>动画</p>
-    <tiny-switch v-model="active"></tiny-switch>
-    <br /><br />
-    <tiny-skeleton :active="active">
+    <tiny-skeleton>
       <template #placeholder>
-        <tiny-skeleton-item></tiny-skeleton-item>
+        <tiny-skeleton-item variant="square"></tiny-skeleton-item>
         <br />
-        <tiny-skeleton-item variant="image" :size="size"></tiny-skeleton-item>
+        <tiny-skeleton-item variant="image"></tiny-skeleton-item>
         <br /><br />
-        <tiny-skeleton-item variant="circle" :size="size"></tiny-skeleton-item>
+        <tiny-skeleton-item variant="circle"></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
 </template>
 
 <script>
-import { Skeleton, Radio, SkeletonItem, Switch } from '@opentiny/vue'
+import { Skeleton, SkeletonItem } from '@opentiny/vue'
 
 export default {
   components: {
     TinySkeleton: Skeleton,
-    TinyRadio: Radio,
-    TinySkeletonItem: SkeletonItem,
-    TinySwitch: Switch
-  },
-  data() {
-    return {
-      size: 'medium',
-      active: true
-    }
+    TinySkeletonItem: SkeletonItem
   }
 }
 </script>
diff --git a/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue b/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue
index 8f1da7060..9332a6905 100644
--- a/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue
+++ b/examples/sites/demos/pc/app/skeleton/loading-completed-composition-api.vue
@@ -1,30 +1,20 @@
 <template>
   <div>
-    <tiny-button @click="handler">显示/隐藏</tiny-button>
+    <tiny-button @click="handler">{{ loading ? '显示' : '隐藏' }}</tiny-button>
     <br /><br />
     <tiny-skeleton :loading="loading">
       <template #default>
-        <tiny-user-head type="icon" round></tiny-user-head>
         <p class="paragraph">内容比较短的一段文字</p>
-        <tiny-button>一个按钮</tiny-button>
       </template>
       <template #placeholder>
-        <tiny-skeleton-item variant="circle" style="width: 72px; height: 72px"></tiny-skeleton-item>
-        <br /><br />
-        <tiny-skeleton-item style="width: 180px"></tiny-skeleton-item>
-        <tiny-skeleton-item style="width: 92px; height: 28px"></tiny-skeleton-item>
+        <tiny-skeleton-item></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
 </template>
 
 <script setup>
-import {
-  Skeleton as TinySkeleton,
-  Button as TinyButton,
-  SkeletonItem as TinySkeletonItem,
-  UserHead as TinyUserHead
-} from '@opentiny/vue'
+import { Skeleton as TinySkeleton, Button as TinyButton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const loading = ref(true)
diff --git a/examples/sites/demos/pc/app/skeleton/loading-completed.spec.ts b/examples/sites/demos/pc/app/skeleton/loading-completed.spec.ts
index d3a11f116..a7eb4c8bb 100644
--- a/examples/sites/demos/pc/app/skeleton/loading-completed.spec.ts
+++ b/examples/sites/demos/pc/app/skeleton/loading-completed.spec.ts
@@ -5,22 +5,11 @@ test('加载完成', async ({ page }) => {
   await page.goto('skeleton#loading-completed')
 
   const square = page.locator('.tiny-skeleton-item--square')
-  const circle = page.locator('.tiny-skeleton-item--circle')
-  const button = page.getByRole('button', { name: '显示/隐藏' })
-
-  await expect(circle).toHaveCount(1)
-  await expect(square).toHaveCount(2)
-  await expect(circle).toHaveCSS('width', '72px')
-  await expect(circle).toHaveCSS('height', '72px')
+  const button = page.locator('.tiny-button')
 
   await button.click()
   await page.waitForTimeout(500)
   await expect(square).toBeHidden()
-  await expect(circle).toBeHidden()
   const p = page.locator('.paragraph')
   await expect(p).toHaveText(/内容比较短的一段文字/)
-  const btn = page.getByRole('button', { name: '一个按钮' })
-  await expect(btn).toBeVisible()
-  const head = page.locator('.tiny-user-head')
-  await expect(head).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/skeleton/loading-completed.vue b/examples/sites/demos/pc/app/skeleton/loading-completed.vue
index 8b299ce29..a7466a643 100644
--- a/examples/sites/demos/pc/app/skeleton/loading-completed.vue
+++ b/examples/sites/demos/pc/app/skeleton/loading-completed.vue
@@ -1,32 +1,26 @@
 <template>
   <div>
-    <tiny-button @click="handler">显示/隐藏</tiny-button>
+    <tiny-button @click="handler">{{ loading ? '显示' : '隐藏' }}</tiny-button>
     <br /><br />
     <tiny-skeleton :loading="loading">
       <template #default>
-        <tiny-user-head type="icon" round></tiny-user-head>
         <p class="paragraph">内容比较短的一段文字</p>
-        <tiny-button>一个按钮</tiny-button>
       </template>
       <template #placeholder>
-        <tiny-skeleton-item variant="circle" style="width: 72px; height: 72px"></tiny-skeleton-item>
-        <br /><br />
-        <tiny-skeleton-item style="width: 180px"></tiny-skeleton-item>
-        <tiny-skeleton-item style="width: 92px; height: 28px"></tiny-skeleton-item>
+        <tiny-skeleton-item></tiny-skeleton-item>
       </template>
     </tiny-skeleton>
   </div>
 </template>
 
 <script>
-import { Skeleton, Button, SkeletonItem, UserHead } from '@opentiny/vue'
+import { Skeleton, Button, SkeletonItem } from '@opentiny/vue'
 
 export default {
   components: {
     TinySkeleton: Skeleton,
     TinyButton: Button,
-    TinySkeletonItem: SkeletonItem,
-    TinyUserHead: UserHead
+    TinySkeletonItem: SkeletonItem
   },
   data() {
     return {
diff --git a/examples/sites/demos/pc/app/skeleton/size-composition-api.vue b/examples/sites/demos/pc/app/skeleton/size-composition-api.vue
new file mode 100644
index 000000000..64238e920
--- /dev/null
+++ b/examples/sites/demos/pc/app/skeleton/size-composition-api.vue
@@ -0,0 +1,16 @@
+<template>
+  <tiny-skeleton>
+    <template #placeholder>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="small"></tiny-skeleton-item>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="medium"></tiny-skeleton-item>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="large"></tiny-skeleton-item>
+    </template>
+  </tiny-skeleton>
+</template>
+
+<script setup>
+import { Skeleton as TinySkeleton, SkeletonItem as TinySkeletonItem } from '@opentiny/vue'
+</script>
diff --git a/examples/sites/demos/pc/app/skeleton/size.spec.ts b/examples/sites/demos/pc/app/skeleton/size.spec.ts
new file mode 100644
index 000000000..fdf72a0d5
--- /dev/null
+++ b/examples/sites/demos/pc/app/skeleton/size.spec.ts
@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test'
+
+test('尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('skeleton#size')
+
+  const small = page.locator('.tiny-skeleton-item--small')
+  const medium = page.locator('.tiny-skeleton-item--medium')
+  const large = page.locator('.tiny-skeleton-item--large')
+
+  await expect(small).toBeVisible()
+  await expect(medium).toBeVisible()
+  await expect(large).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/skeleton/size.vue b/examples/sites/demos/pc/app/skeleton/size.vue
new file mode 100644
index 000000000..114ecdb90
--- /dev/null
+++ b/examples/sites/demos/pc/app/skeleton/size.vue
@@ -0,0 +1,23 @@
+<template>
+  <tiny-skeleton>
+    <template #placeholder>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="small"></tiny-skeleton-item>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="medium"></tiny-skeleton-item>
+      <br /><br />
+      <tiny-skeleton-item variant="image" size="large"></tiny-skeleton-item>
+    </template>
+  </tiny-skeleton>
+</template>
+
+<script>
+import { Skeleton, SkeletonItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySkeleton: Skeleton,
+    TinySkeletonItem: SkeletonItem
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js
index 9d27fee9e..5bce80f9c 100644
--- a/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js
+++ b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js
@@ -15,22 +15,34 @@ export default {
       codeFiles: ['base.vue']
     },
     {
-      demoId: 'complex-demo',
+      demoId: 'size',
       name: {
-        'zh-CN': '复杂的组合',
-        'en-US': 'Complex Demo'
+        'zh-CN': '尺寸',
+        'en-US': 'size'
       },
       desc: {
-        'zh-CN': '<p>更复杂的组合，通过 <code>avatar</code> 属性控制骨架段落左侧出现头像占位。</p>\n',
+        'zh-CN': '<p>通过 <code>size</code>  属性可以控制骨架屏的尺寸。</p>\n',
+        'en-US': '<p>The <code>size</code> property allows you to control the size of the skeleton screen.</p>\n'
+      },
+      codeFiles: ['size.vue']
+    },
+    {
+      demoId: 'complex-demo',
+      name: {
+        'zh-CN': '头像模式',
+        'en-US': 'Portrait Mode'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>avatar</code> 属性控制骨架段落左侧出现头像占位。</p>\n',
         'en-US':
-          '<p>More complex combinations, use the <code>avatar</code> attribute to control the appearance of the avatar placeholder on the left side of the skeleton paragraph.</p>\n'
+          '<p> Use the <code>avatar</code> attribute to control the display of the avatar on the left of the skeleton paragraph.</p>\n'
       },
       codeFiles: ['complex-demo.vue']
     },
     {
       demoId: 'custom-rows',
       name: {
-        'zh-CN': '自定义段落行数',
+        'zh-CN': '段落行数',
         'en-US': 'Custom rows'
       },
       desc: {
@@ -41,15 +53,27 @@ export default {
       },
       codeFiles: ['custom-rows.vue']
     },
+    {
+      demoId: 'custom-paragraph-width',
+      name: {
+        'zh-CN': '段落宽度',
+        'en-US': 'Custom paragraph width'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>rows-width</code> 属性可以段落宽度。</p>\n',
+        'en-US':
+          '<p>The <code>rows-width</code> attribute can customize the paragraph width. Each item in the array can be <code>number</code> or <code>string</code>. When it is <code>number< /code>, the component will automatically increase the <code>px</code> unit</p>\n'
+      },
+      codeFiles: ['custom-paragraph-width.vue']
+    },
     {
       demoId: 'custom-layout',
       name: {
-        'zh-CN': '自定义排版',
+        'zh-CN': '样式',
         'en-US': 'Custom layout'
       },
       desc: {
-        'zh-CN':
-          '<p>当默认排版不满足需求时，可自定义排版结构，通过 <code>class</code> 和 <code>style</code> 可自定义宽高等样式。</p>\n',
+        'zh-CN': '<p>通过 <code>class</code> 和 <code>style</code> 可自定义样式结构。</p>\n',
         'en-US':
           '<p>When the default layout does not meet the needs, the layout structure can be customized, and styles such as width and height can be customized through <code>class</code> and <code>style</code>.</p>\n'
       },
@@ -70,30 +94,27 @@ export default {
       codeFiles: ['loading-completed.vue']
     },
     {
-      demoId: 'custom-paragraph-width',
+      demoId: 'animation',
       name: {
-        'zh-CN': '自定义段落宽度',
-        'en-US': 'Custom paragraph width'
+        'zh-CN': '动画效果',
+        'en-US': 'Animation Effect'
       },
       desc: {
-        'zh-CN':
-          '<p><code>rows-width</code> 属性可以自定义段落宽度，数组中的每一项可以为 <code>number</code> 或 <code>string</code>，当为 <code>number</code> 时，组件会自动增加 <code>px</code> 单位。</p>\n',
-        'en-US':
-          '<p>The <code>rows-width</code> attribute can customize the paragraph width. Each item in the array can be <code>number</code> or <code>string</code>. When it is <code>number< /code>, the component will automatically increase the <code>px</code> unit</p>\n'
+        'zh-CN': '<p>通过 <code>animated</code> 属性设置是否开启动画。</p>\n',
+        'en-US': '<p>Use the <code>animated</code> attribute to set whether to enable animation.</p>\n'
       },
-      codeFiles: ['custom-paragraph-width.vue']
+      codeFiles: ['animation.vue']
     },
     {
       demoId: 'fine-grained-mode',
       name: {
-        'zh-CN': '细粒度模式',
-        'en-US': 'Fine-grained mode'
+        'zh-CN': '形态',
+        'en-US': 'formative'
       },
       desc: {
-        'zh-CN':
-          '<p>细粒度模式，<code>variant</code> 属性可以控制 <code>skeleton-item</code> 的形态，可选值：image / circle / square。<code>size</code> 属性可以控制 <code>skeleton-item</code> 的大小，可选值：medium / small / large。</p>\n',
+        'zh-CN': '<p>通过 <code>variant</code> 属性可以控制 <code>skeleton-item</code> 的形态。</p>\n',
         'en-US':
-          '<p>Fine-grained mode, the <code>variant</code> attribute can control the shape of <code>skeleton-item</code>, optional values: image / circle / square. The <code>size</code> attribute can control the size of <code>skeleton-item</code>. Optional values: medium / small / large.</p>\n'
+          '<p>The <code>variant</code> attribute can be used to control the shape of the <code>skeleton-item</code>.</p>\n'
       },
       codeFiles: ['fine-grained-mode.vue']
     }
diff --git a/examples/sites/demos/pc/app/slide-bar/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/slide-bar/basic-usage-composition-api.vue
deleted file mode 100644
index 289d47f58..000000000
--- a/examples/sites/demos/pc/app/slide-bar/basic-usage-composition-api.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="list" :init-blocks="initBlocks"></tiny-slide-bar>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const list = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-</script>
diff --git a/examples/sites/demos/pc/app/slide-bar/basic-usage.spec.ts b/examples/sites/demos/pc/app/slide-bar/basic-usage.spec.ts
deleted file mode 100644
index 1c08d9bb7..000000000
--- a/examples/sites/demos/pc/app/slide-bar/basic-usage.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('基础用法', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slide-bar#basic-usage')
-  const preview = page.locator('#basic-usage')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-  await slideBarList.locator('li').first().click()
-  await page.mouse.wheel(0, 100)
-  await expect(slideBarList.locator('li').first()).toHaveCSS('border-color', 'rgba(153, 153, 153, 0.7)')
-})
diff --git a/examples/sites/demos/pc/app/slide-bar/basic-usage.vue b/examples/sites/demos/pc/app/slide-bar/basic-usage.vue
deleted file mode 100644
index d10f8f4cb..000000000
--- a/examples/sites/demos/pc/app/slide-bar/basic-usage.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="list" :init-blocks="initBlocks"></tiny-slide-bar>
-</template>
-
-<script lang="jsx">
-import { SlideBar } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      list: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/slide-bar/custom-content-composition-api.vue b/examples/sites/demos/pc/app/slide-bar/custom-content-composition-api.vue
deleted file mode 100644
index 12fde471a..000000000
--- a/examples/sites/demos/pc/app/slide-bar/custom-content-composition-api.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="list" :wheel-blocks="2" :init-blocks="initBlocks">
-    <template #default="data">
-      <span>标题：{{ data.slotData.title }}</span>
-      <div>语言：{{ data.slotData.lang }}</div>
-    </template>
-  </tiny-slide-bar>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const list = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-</script>
diff --git a/examples/sites/demos/pc/app/slide-bar/custom-content.spec.ts b/examples/sites/demos/pc/app/slide-bar/custom-content.spec.ts
deleted file mode 100644
index cf66d9198..000000000
--- a/examples/sites/demos/pc/app/slide-bar/custom-content.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义滚动块内容', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slide-bar#custom-content')
-  const slideBarContainer = page.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-  await expect(slideBarList.first().locator('li span').first()).toContainText('标题')
-  await expect(slideBarList.first().locator('li div').first()).toContainText('语言')
-})
diff --git a/examples/sites/demos/pc/app/slide-bar/custom-content.vue b/examples/sites/demos/pc/app/slide-bar/custom-content.vue
deleted file mode 100644
index c8f855023..000000000
--- a/examples/sites/demos/pc/app/slide-bar/custom-content.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="list" :wheel-blocks="2" :init-blocks="initBlocks">
-    <template #default="data">
-      <span>标题：{{ data.slotData.title }}</span>
-      <div>语言：{{ data.slotData.lang }}</div>
-    </template>
-  </tiny-slide-bar>
-</template>
-
-<script lang="jsx">
-import { SlideBar } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      list: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/slide-bar/custom-tag-composition-api.vue b/examples/sites/demos/pc/app/slide-bar/custom-tag-composition-api.vue
deleted file mode 100644
index 400bdb7af..000000000
--- a/examples/sites/demos/pc/app/slide-bar/custom-tag-composition-api.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div class="demo-slide-bar-tag">
-    <tiny-slide-bar v-model="list" :init-blocks="initBlocks" tag="div" sub-tag="div"></tiny-slide-bar>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const list = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-</script>
-
-<style>
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div li div {
-  margin: 15px 0;
-  font-size: 12px;
-  color: #4e5e67;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div li div:nth-child(2) {
-  border-bottom: 1px solid #ebebeb;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar div div div svg {
-  float: right;
-  margin: -6px 0 0 0;
-  background: #fff;
-  fill: #ebebeb;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div {
-  width: 23%;
-  padding: 20px;
-  float: left;
-  margin-left: 2%;
-  position: relative;
-  border: 5px solid #fff;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div:first-child {
-  margin-left: 0;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div:hover {
-  border-color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div > .icon-chevron-down {
-  position: absolute;
-  top: 98.8%;
-  left: 50%;
-  margin-left: -10px;
-  font-size: 2em;
-  width: 22px;
-  display: none !important;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div > .icon-chevron-down:before {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-right: 5px solid rgba(153, 153, 153, 0.7);
-  border-bottom: 5px solid rgba(153, 153, 153, 0.7);
-  transform: rotate(45deg);
-  background: #fff;
-  top: -5px;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select {
-  border-color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select div .tiny-icon {
-  color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select div:nth-child(2) {
-  border-bottom: 1px solid rgba(153, 153, 153, 0.7);
-}
-</style>
diff --git a/examples/sites/demos/pc/app/slide-bar/custom-tag.spec.ts b/examples/sites/demos/pc/app/slide-bar/custom-tag.spec.ts
deleted file mode 100644
index 21ffd914b..000000000
--- a/examples/sites/demos/pc/app/slide-bar/custom-tag.spec.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('自定义 DOM 标签', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slide-bar#custom-tag')
-  const slideBarContainer = page.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-  // 自定义的标签为 div
-  await expect(slideBarList.locator('li').first().locator('div')).toHaveCount(3)
-})
diff --git a/examples/sites/demos/pc/app/slide-bar/custom-tag.vue b/examples/sites/demos/pc/app/slide-bar/custom-tag.vue
deleted file mode 100644
index c118d3e8c..000000000
--- a/examples/sites/demos/pc/app/slide-bar/custom-tag.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <div class="demo-slide-bar-tag">
-    <tiny-slide-bar v-model="list" :init-blocks="initBlocks" tag="div" sub-tag="div"></tiny-slide-bar>
-  </div>
-</template>
-
-<script lang="jsx">
-import { SlideBar } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      list: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  }
-}
-</script>
-
-<style>
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div li div {
-  margin: 15px 0;
-  font-size: 12px;
-  color: #4e5e67;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div li div:nth-child(2) {
-  border-bottom: 1px solid #ebebeb;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar div div div svg {
-  float: right;
-  margin: -6px 0 0 0;
-  background: #fff;
-  fill: #ebebeb;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div {
-  width: 23%;
-  padding: 20px;
-  float: left;
-  margin-left: 2%;
-  position: relative;
-  border: 5px solid #fff;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div:first-child {
-  margin-left: 0;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div:hover {
-  border-color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div > .icon-chevron-down {
-  position: absolute;
-  top: 98.8%;
-  left: 50%;
-  margin-left: -10px;
-  font-size: 2em;
-  width: 22px;
-  display: none !important;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div > .icon-chevron-down:before {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-right: 5px solid rgba(153, 153, 153, 0.7);
-  border-bottom: 5px solid rgba(153, 153, 153, 0.7);
-  transform: rotate(45deg);
-  background: #fff;
-  top: -5px;
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select {
-  border-color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select div .tiny-icon {
-  color: rgba(153, 153, 153, 0.7);
-}
-
-.demo-slide-bar-tag .tiny-slide-bar .tiny-slide-bar__list > div.tiny-slide-bar__select div:nth-child(2) {
-  border-bottom: 1px solid rgba(153, 153, 153, 0.7);
-}
-</style>
diff --git a/examples/sites/demos/pc/app/slide-bar/slide-bar-events-composition-api.vue b/examples/sites/demos/pc/app/slide-bar/slide-bar-events-composition-api.vue
deleted file mode 100644
index 4ad904c9a..000000000
--- a/examples/sites/demos/pc/app/slide-bar/slide-bar-events-composition-api.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <tiny-slide-bar
-    v-model="list"
-    :init-blocks="initBlocks"
-    @click="handleClick"
-    @before-click="beforeClick"
-  ></tiny-slide-bar>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar, Modal } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const list = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-
-function handleClick(data, index) {
-  Modal.message({
-    message: `click 事件，回调参数：${data.title}, ${index}`,
-    status: 'info'
-  })
-}
-
-function beforeClick() {
-  Modal.message({ message: 'before-click 事件', status: 'info' })
-}
-</script>
diff --git a/examples/sites/demos/pc/app/slide-bar/slide-bar-events.spec.ts b/examples/sites/demos/pc/app/slide-bar/slide-bar-events.spec.ts
deleted file mode 100644
index a02e1780d..000000000
--- a/examples/sites/demos/pc/app/slide-bar/slide-bar-events.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('slide-bar#slide-bar-events')
-  const slideBarContainer = page.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-  await slideBarList.locator('li').first().click()
-  await expect(page.locator('.tiny-modal').filter({ hasText: 'before-click 事件' })).toBeVisible()
-  await expect(page.locator('.tiny-modal').filter({ hasText: 'click 事件，回调参数：' })).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/slide-bar/slide-bar-events.vue b/examples/sites/demos/pc/app/slide-bar/slide-bar-events.vue
deleted file mode 100644
index 3793aaa04..000000000
--- a/examples/sites/demos/pc/app/slide-bar/slide-bar-events.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <tiny-slide-bar
-    v-model="list"
-    :init-blocks="initBlocks"
-    @click="handleClick"
-    @before-click="beforeClick"
-  ></tiny-slide-bar>
-</template>
-
-<script lang="jsx">
-import { SlideBar, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      list: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  },
-  methods: {
-    handleClick(data, index) {
-      Modal.message({
-        message: `click 事件，回调参数：${data.title}, ${index}`,
-        status: 'info'
-      })
-    },
-    beforeClick() {
-      Modal.message({ message: 'before-click 事件', status: 'info' })
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.cn.md b/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.cn.md
deleted file mode 100644
index 4909b54ee..000000000
--- a/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.cn.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: SlideBar 滚动块
----
-
-# SlideBar 滚动块
-
-<div>SlideBar 滚动块，可以用作文字块的滑动。</div>
diff --git a/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.en.md b/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.en.md
deleted file mode 100644
index 3192a2339..000000000
--- a/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.en.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: SlideBar Scrolling Block
----
-
-# SlideBar Scrolling Block
-
-<div>SlideBar scroll block, which can be used as a sliding block of text.</div>
diff --git a/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.js b/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.js
deleted file mode 100644
index 174c8db71..000000000
--- a/examples/sites/demos/pc/app/slide-bar/webdoc/slide-bar.js
+++ /dev/null
@@ -1,72 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  metaData: {
-    deprecated: '3.12.0',
-    removed: '3.15.0'
-  },
-  demos: [
-    {
-      demoId: 'basic-usage',
-      name: {
-        'zh-CN': '基本用法',
-        'en-US': 'Basic Usage'
-      },
-      desc: {
-        'zh-CN': '通过<code>:init-blocks="4"</code>设置可显示的块数。',
-        'en-US': 'Set the number of blocks that can be displayed through<code>: init blocks="4"</code>.'
-      },
-      codeFiles: ['basic-usage.vue']
-    },
-    {
-      demoId: 'wheel-blocks',
-      name: {
-        'zh-CN': '每次滚动块数',
-        'en-US': 'Number of blocks scrolled each time'
-      },
-      desc: {
-        'zh-CN':
-          '<p>通过 <code>wheel-blocks</code> 设置每次滚动块数。\n通过 <code>value</code> 调用服务时候获取数据的来源。</p>\n',
-        'en-US':
-          '<p>You can use <code>wheel-blocks</code> to set the number of blocks to be scrolled each time. \nThe data source can be obtained when the service is invoked through <code>value</code>. </p>\n'
-      },
-      codeFiles: ['wheel-blocks.vue']
-    },
-    {
-      demoId: 'custom-content',
-      name: {
-        'zh-CN': '自定义滚动块内容',
-        'en-US': 'Custom Scroll Block Content'
-      },
-      desc: {
-        'zh-CN': '<p>通过插槽自定义滚动块内容。</p>\n',
-        'en-US': '<p>Customize the scroll block content by slot. </p>\n'
-      },
-      codeFiles: ['custom-content.vue']
-    },
-    {
-      demoId: 'custom-tag',
-      name: {
-        'zh-CN': '自定义 DOM 标签',
-        'en-US': 'Customized DOM Label'
-      },
-      desc: {
-        'zh-CN': '<p>通过 <code>tag sub-tag</code> 自定义 DOM 标签。</p>\n',
-        'en-US': '<p>You can use <code>tag sub-tag</code> to customize DOM tags. </p>\n'
-      },
-      codeFiles: ['custom-tag.vue']
-    },
-    {
-      demoId: 'slide-bar-events',
-      name: {
-        'zh-CN': '滚动块事件',
-        'en-US': 'Scroll Block Event'
-      },
-      desc: {
-        'zh-CN': '通过<code>@before-click</code>触发滑动点击前事件。',
-        'en-US': 'Trigger the pre click event by<code>@ before click</code>.'
-      },
-      codeFiles: ['slide-bar-events.vue']
-    }
-  ]
-}
diff --git a/examples/sites/demos/pc/app/slide-bar/wheel-blocks-composition-api.vue b/examples/sites/demos/pc/app/slide-bar/wheel-blocks-composition-api.vue
deleted file mode 100644
index f74b9db6c..000000000
--- a/examples/sites/demos/pc/app/slide-bar/wheel-blocks-composition-api.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="value" :init-blocks="initBlocks" :wheel-blocks="2"></tiny-slide-bar>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { SlideBar as TinySlideBar } from '@opentiny/vue'
-
-const initBlocks = ref(4)
-const value = ref([
-  { title: 'a', lang: 'en_US' },
-  { title: 'b', lang: 'zh-CN' },
-  { title: 'c', lang: 'en_US' },
-  { title: 'd', lang: 'en_US' },
-  { title: 'e', lang: 'en_US' },
-  { title: 'f', lang: 'en_US' },
-  { title: 'g', lang: 'en_US' },
-  { title: 'h', lang: 'en_US' },
-  { title: 'i', lang: 'en_US' }
-])
-</script>
diff --git a/examples/sites/demos/pc/app/slide-bar/wheel-blocks.spec.ts b/examples/sites/demos/pc/app/slide-bar/wheel-blocks.spec.ts
deleted file mode 100644
index 600382d7f..000000000
--- a/examples/sites/demos/pc/app/slide-bar/wheel-blocks.spec.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('每次滚动块数', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('slide-bar#wheel-blocks')
-  const slideBarContainer = page.locator('.tiny-slide-bar__content')
-  const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
-
-  await slideBarList.first().click()
-  // 单个滚动块的宽度固定为196px，所以应为 196px * 2
-  await page.mouse.wheel(0, 50)
-  await page.pause()
-})
diff --git a/examples/sites/demos/pc/app/slide-bar/wheel-blocks.vue b/examples/sites/demos/pc/app/slide-bar/wheel-blocks.vue
deleted file mode 100644
index aa3860c93..000000000
--- a/examples/sites/demos/pc/app/slide-bar/wheel-blocks.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <tiny-slide-bar v-model="value" :init-blocks="initBlocks" :wheel-blocks="2"></tiny-slide-bar>
-</template>
-
-<script lang="jsx">
-import { SlideBar } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySlideBar: SlideBar
-  },
-  data() {
-    return {
-      initBlocks: 4,
-      value: [
-        { title: 'a', lang: 'en_US' },
-        { title: 'b', lang: 'zh-CN' },
-        { title: 'c', lang: 'en_US' },
-        { title: 'd', lang: 'en_US' },
-        { title: 'e', lang: 'en_US' },
-        { title: 'f', lang: 'en_US' },
-        { title: 'g', lang: 'en_US' },
-        { title: 'h', lang: 'en_US' },
-        { title: 'i', lang: 'en_US' }
-      ]
-    }
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/tag/color3-composition-api.vue b/examples/sites/demos/pc/app/tag/color3-composition-api.vue
index d9550d2a2..6c9592317 100644
--- a/examples/sites/demos/pc/app/tag/color3-composition-api.vue
+++ b/examples/sites/demos/pc/app/tag/color3-composition-api.vue
@@ -1,13 +1,31 @@
 <template>
   <div class="tiny-tag-demo">
-    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <div class="mb5">hit：</div>
+    <tiny-tag hit>标签一</tiny-tag>
     <tiny-tag type="success" hit>标签二</tiny-tag>
     <tiny-tag type="info" hit>标签三</tiny-tag>
     <tiny-tag type="warning" hit>标签四</tiny-tag>
     <tiny-tag type="danger" hit>标签五</tiny-tag>
+    <div class="mb5">color 预设值：</div>
+    <tiny-tag color="red">red标签</tiny-tag>
+    <tiny-tag color="orange">orange标签</tiny-tag>
+    <tiny-tag color="green">green标签</tiny-tag>
+    <tiny-tag color="blue">blue标签</tiny-tag>
+    <tiny-tag color="purple">purple标签</tiny-tag>
+    <tiny-tag color="brown">brown标签</tiny-tag>
+    <tiny-tag color="grey">grey标签</tiny-tag>
+    <div class="mb5">自定义 color 值：</div>
+    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <tiny-tag :color="['linear-gradient(to right, #e8cda4, #f8eddb)', '#8f3c00']" hit>自定义背景色和文本色</tiny-tag>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { Tag as TinyTag } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-tag {
+  border-radius: 0px 8px 0px 8px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tag/color3.spec.ts b/examples/sites/demos/pc/app/tag/color3.spec.ts
index 2ffd06b4e..39e238b3a 100644
--- a/examples/sites/demos/pc/app/tag/color3.spec.ts
+++ b/examples/sites/demos/pc/app/tag/color3.spec.ts
@@ -5,16 +5,12 @@ test('边框和自定义背景色', async ({ page }) => {
   await page.goto('tag#color3')
 
   const tags = page.locator('.all-demos-container').locator('.tiny-tag')
-  const first = tags.nth(0)
+  const first = tags.getByText('标签一')
+  const red = tags.getByText('red标签')
+  const custom = tags.getByText('自定义背景色', { exact: true })
 
-  await expect(tags).toHaveClass([
-    /tiny-tag/,
-    /tiny-tag--success/,
-    /tiny-tag--info/,
-    /tiny-tag--warning/,
-    /tiny-tag--danger/
-  ])
-  await expect(tags).toHaveClass([/is-hit/, /is-hit/, /is-hit/, /is-hit/, /is-hit/])
-  await expect(first).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')
-  await expect(first).toHaveCSS('border-color', 'rgb(87, 93, 108)')
+  await expect(first).toHaveClass(/is-hit/)
+  await expect(red).toHaveClass(/tiny-tag--red/)
+  await expect(custom).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')
+  await expect(custom).toHaveCSS('border-color', 'rgb(87, 93, 108)')
 })
diff --git a/examples/sites/demos/pc/app/tag/color3.vue b/examples/sites/demos/pc/app/tag/color3.vue
index e60dde4cc..372f48b5c 100644
--- a/examples/sites/demos/pc/app/tag/color3.vue
+++ b/examples/sites/demos/pc/app/tag/color3.vue
@@ -1,10 +1,22 @@
 <template>
   <div class="tiny-tag-demo">
-    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <div class="mb5">hit：</div>
+    <tiny-tag hit>标签一</tiny-tag>
     <tiny-tag type="success" hit>标签二</tiny-tag>
     <tiny-tag type="info" hit>标签三</tiny-tag>
     <tiny-tag type="warning" hit>标签四</tiny-tag>
     <tiny-tag type="danger" hit>标签五</tiny-tag>
+    <div class="mb5">color 预设值：</div>
+    <tiny-tag color="red">red标签</tiny-tag>
+    <tiny-tag color="orange">orange标签</tiny-tag>
+    <tiny-tag color="green">green标签</tiny-tag>
+    <tiny-tag color="blue">blue标签</tiny-tag>
+    <tiny-tag color="purple">purple标签</tiny-tag>
+    <tiny-tag color="brown">brown标签</tiny-tag>
+    <tiny-tag color="grey">grey标签</tiny-tag>
+    <div class="mb5">自定义 color 值：</div>
+    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <tiny-tag :color="['linear-gradient(to right, #e8cda4, #f8eddb)', '#8f3c00']" hit>自定义背景色和文本色</tiny-tag>
   </div>
 </template>
 
@@ -17,3 +29,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-tag {
+  border-radius: 0px 8px 0px 8px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js
index c78e0ef22..d79068990 100644
--- a/examples/sites/demos/pc/app/tag/webdoc/tag.js
+++ b/examples/sites/demos/pc/app/tag/webdoc/tag.js
@@ -29,12 +29,12 @@ export default {
     {
       demoId: 'color3',
       name: {
-        'zh-CN': '背景色与边框',
-        'en-US': 'Background color and border'
+        'zh-CN': '颜色与边框',
+        'en-US': 'Color and border'
       },
       desc: {
-        'zh-CN': '通过 <code>color</code> 设置背景色， <code>hit</code> 设置边框。',
-        'en-US': 'Set the size through <code>size</code> , with optional values: <code>(medium/small/mini)</code> .'
+        'zh-CN': `通过 <code>hit</code> 设置边框；<code>color</code> 设置颜色，可使用预设值，也可自定义颜色值；当自定义颜色值为字符串则只能设置背景色；若为数组则第一个值为背景色，第二个为文本色。`,
+        'en-US': `Use <code>hit</code> to set the border. <code>color</code> Set the color. You can use the preset value or customize the color value. If the value of Custom Color is a character string, only the background color can be set. If it is an array, the first value is the background color and the second is the text color.`
       },
       codeFiles: ['color3.vue']
     },
diff --git a/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
index 8a1b1500c..fcdee7f56 100644
--- a/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-field-composition-api.vue
@@ -5,6 +5,7 @@
     @click="click"
     name-field="content"
     time-field="timestamp"
+    auto-color-field="icon"
     vertical
   ></tiny-time-line>
 </template>
@@ -12,6 +13,7 @@
 <script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { iconLoading } from '@opentiny/vue-icon'
 
 const active = ref(1)
 const data = ref([
@@ -21,7 +23,8 @@ const data = ref([
   },
   {
     content: '通过审核',
-    timestamp: '2018-04-13'
+    timestamp: '2018-04-13',
+    icon: iconLoading()
   },
   {
     content: '创建成功',
diff --git a/examples/sites/demos/pc/app/time-line/custom-field.spec.ts b/examples/sites/demos/pc/app/time-line/custom-field.spec.ts
index d0244d3b3..c464b6bd6 100644
--- a/examples/sites/demos/pc/app/time-line/custom-field.spec.ts
+++ b/examples/sites/demos/pc/app/time-line/custom-field.spec.ts
@@ -12,5 +12,6 @@ test('自定义字段', async ({ page }) => {
   await expect(nodes.first().locator('.date-time .time')).toHaveText('00:00')
   await expect(nodes.first().locator('.name')).toHaveText('提交审批')
   await expect(nodes.nth(1).locator('.date-time .date')).toHaveText('2018-04-13')
+  await expect(nodes.nth(1).locator('.icon-custom')).toBeVisible()
   await expect(nodes.nth(2).locator('.name')).toHaveText('创建成功')
 })
diff --git a/examples/sites/demos/pc/app/time-line/custom-field.vue b/examples/sites/demos/pc/app/time-line/custom-field.vue
index 02021ca4c..07e43ba67 100644
--- a/examples/sites/demos/pc/app/time-line/custom-field.vue
+++ b/examples/sites/demos/pc/app/time-line/custom-field.vue
@@ -5,12 +5,14 @@
     @click="click"
     name-field="content"
     time-field="timestamp"
+    auto-color-field="icon"
     vertical
   ></tiny-time-line>
 </template>
 
 <script>
 import { TimeLine } from '@opentiny/vue'
+import { iconLoading } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -26,7 +28,8 @@ export default {
         },
         {
           content: '通过审核',
-          timestamp: '2018-04-13'
+          timestamp: '2018-04-13',
+          icon: iconLoading()
         },
         {
           content: '创建成功',
diff --git a/examples/sites/demos/pc/app/time-line/custom-icon-composition-api.vue b/examples/sites/demos/pc/app/time-line/custom-icon-composition-api.vue
new file mode 100644
index 000000000..3d0767f6f
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line/custom-icon-composition-api.vue
@@ -0,0 +1,21 @@
+<template>
+  <tiny-time-line :data="data" :active="active" @click="onClick"></tiny-time-line>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { iconCheckOut, iconCalendar, iconLoading, iconEnd } from '@opentiny/vue-icon'
+
+const active = ref(1)
+const data = reactive([
+  { name: '立项', time: '2022-11-12 10:00', autoColor: iconCheckOut() },
+  { name: '开发', time: '2022-11-15 20:00', autoColor: iconCalendar() },
+  { name: '交付', time: '2022-12-10 20:00', autoColor: iconLoading() },
+  { name: '结项', time: '2022-12-15 00:00', autoColor: iconEnd() }
+])
+
+const onClick = (index) => {
+  active.value = index
+}
+</script>
diff --git a/examples/sites/demos/pc/app/time-line/custom-icon.spec.ts b/examples/sites/demos/pc/app/time-line/custom-icon.spec.ts
new file mode 100644
index 000000000..350e6827e
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line/custom-icon.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('time-line#custom-icon')
+
+  const timeline = page.locator('#custom-icon .tiny-timeline')
+  const timelineItems = await timeline.locator('.tiny-timeline-item').all()
+
+  for (const node of timelineItems) {
+    await expect(node.locator('.icon-custom .fixicons')).toBeVisible()
+  }
+})
diff --git a/examples/sites/demos/pc/app/time-line/custom-icon.vue b/examples/sites/demos/pc/app/time-line/custom-icon.vue
new file mode 100644
index 000000000..d9e5685f8
--- /dev/null
+++ b/examples/sites/demos/pc/app/time-line/custom-icon.vue
@@ -0,0 +1,34 @@
+<template>
+  <tiny-time-line :data="data" :active="active" @click="click"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLine, Modal } from '@opentiny/vue'
+import { iconCheckOut, iconCalendar, iconLoading, iconEnd } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLine
+  },
+  data() {
+    return {
+      active: 2,
+      data: [
+        { name: '立项', time: '2022-11-12 10:00', autoColor: iconCheckOut() },
+        { name: '开发', time: '2022-11-15 20:00', autoColor: iconCalendar() },
+        { name: '交付', time: '2022-12-10 20:00', autoColor: iconLoading() },
+        { name: '结项', time: '2022-12-15 00:00', autoColor: iconEnd() }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
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 7e13bafa5..db2ac042d 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
@@ -1,11 +1,16 @@
 <template>
   <div class="demo-timeline">
+    <p>
+      (1)
+      <code>autoColor</code>
+      可选状态值：<code>success</code>：成功；<code>warning</code>：警告；<code>error</code>：失败。
+    </p>
     <tiny-time-line :data="data1"></tiny-time-line>
     <br />
 
     <p>
-      竖式时间线可以通过 <code>type</code> 属性指定节点类型，可选值有 <code>primary</code>|<code>success</code>
-      |<code>warning</code>|<code>danger</code>|<code>info</code>
+      (2) 当<code>shape</code> = 'dot' 时，可以通过 <code>type</code> 属性指定节点类型，可选值有
+      <code>primary</code>|<code>success</code> |<code>warning</code>|<code>danger</code>|<code>info</code>
     </p>
     <tiny-time-line :data="data2" vertical shape="dot"></tiny-time-line>
   </div>
@@ -15,7 +20,13 @@
 import { reactive } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
 
-const data1 = reactive([{ name: '默认状态' }, { name: '异常状态', error: true }, { name: '禁用状态', disabled: true }])
+const data1 = reactive([
+  { name: '默认状态' },
+  { name: '成功状态', autoColor: 'success' },
+  { name: '警告状态', autoColor: 'warning' },
+  { name: '异常状态', error: true }, // 也可以使用 autoColor: 'error'
+  { name: '禁用状态', disabled: true }
+])
 const data2 = reactive([
   { name: '基本 / primary', time: '2019-11-10 00:00:00', type: 'primary' },
   { name: '成功 / success', time: '2019-11-11 00:01:30', type: 'success' },
@@ -24,3 +35,13 @@ const data2 = reactive([
   { name: '信息 / info', time: '2019-11-14 20:45:50', type: 'info' }
 ])
 </script>
+
+<style scoped>
+code {
+  color: #476582;
+  padding: 4px 8px;
+  margin: 0 4px;
+  border-radius: 3px;
+  background-color: rgba(27, 31, 35, 0.05);
+}
+</style>
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 bad26603e..501e504bd 100644
--- a/examples/sites/demos/pc/app/time-line/status.spec.ts
+++ b/examples/sites/demos/pc/app/time-line/status.spec.ts
@@ -1,14 +1,56 @@
 import { test, expect } from '@playwright/test'
 
-test('节点状态', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#status')
+test.describe('节点状态', () => {
+  test('autoColor属性设置节点状态', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('time-line#status')
 
-  const timeline = page.locator('#status .tiny-steps-timeline')
-  const timelineItems = timeline.locator('.tiny-timeline-item')
-  await expect(timelineItems.first()).toHaveClass(/timeline-item--primary/)
-  await expect(timelineItems.nth(1)).toHaveClass(/timeline-item--success/)
-  await expect(timelineItems.nth(2)).toHaveClass(/timeline-item--warning/)
-  await expect(timelineItems.nth(3)).toHaveClass(/timeline-item--danger/)
-  await expect(timelineItems.nth(4)).toHaveClass(/timeline-item--info/)
+    const timeline = page.locator('#status .tiny-timeline').first()
+    const timelineItems = timeline.locator('.tiny-timeline-item')
+
+    // 默认状态
+    await expect(timelineItems.first()).toHaveClass(/process-wait/)
+    await expect(timelineItems.first().locator('.icon')).toHaveCSS('border-color', 'rgb(87, 93, 108)')
+    await expect(timelineItems.first().locator('.icon .number')).toHaveCSS('color', 'rgb(87, 93, 108)')
+
+    // 成功状态
+    await expect(timelineItems.nth(1)).toBeVisible()
+    await expect(timelineItems.nth(1).locator('.icon')).toHaveCSS('border-color', 'rgb(94, 124, 224)')
+    await expect(timelineItems.nth(1).locator('.icon .icon-yes')).toHaveCSS('fill', 'rgb(94, 124, 224)')
+
+    // 警告状态
+    await expect(timelineItems.nth(2).locator('.icon.icon-warning')).toBeVisible()
+    await expect(timelineItems.nth(2).locator('.icon')).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+    await expect(timelineItems.nth(2).locator('.icon .icon-warning')).toHaveCSS('fill', 'rgb(255, 255, 255)')
+
+    // 异常状态
+    await expect(timelineItems.nth(3).locator('.icon')).toBeVisible()
+    await expect(timelineItems.nth(3).locator('.icon')).toHaveCSS('border-color', 'rgb(246, 111, 106)')
+    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)')
+  })
+
+  test('type属性设置节点状态', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('time-line#status')
+
+    const timeline = page.locator('#status .tiny-timeline').nth(1)
+    const timelineItems = timeline.locator('.tiny-timeline-item')
+
+    await expect(timelineItems.first()).toHaveClass(/timeline-item--primary/)
+    await expect(timelineItems.first().locator('.dot')).toHaveCSS('background-color', 'rgb(223, 225, 230)')
+    await expect(timelineItems.nth(1)).toHaveClass(/timeline-item--success/)
+    await expect(timelineItems.nth(1).locator('.dot')).toHaveCSS('background-color', 'rgb(80, 212, 171)')
+
+    await expect(timelineItems.nth(2)).toHaveClass(/timeline-item--warning/)
+    await expect(timelineItems.nth(2).locator('.dot')).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+    await expect(timelineItems.nth(3)).toHaveClass(/timeline-item--danger/)
+    await expect(timelineItems.nth(3).locator('.dot')).toHaveCSS('background-color', 'rgb(246, 111, 106)')
+    await expect(timelineItems.nth(4)).toHaveClass(/timeline-item--info/)
+    await expect(timelineItems.nth(4).locator('.dot')).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+  })
 })
diff --git a/examples/sites/demos/pc/app/time-line/status.vue b/examples/sites/demos/pc/app/time-line/status.vue
index dad062d9c..c5f7b69e8 100644
--- a/examples/sites/demos/pc/app/time-line/status.vue
+++ b/examples/sites/demos/pc/app/time-line/status.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="demo-timeline">
+    <p>
+      (1)
+      <code>autoColor</code>
+      可选状态值：<code>success</code>：成功；<code>warning</code>：警告；<code>error</code>：失败。
+    </p>
     <tiny-time-line :data="data1"></tiny-time-line>
     <br />
 
     <p>
-      竖式时间线可以通过 <code>type</code> 属性指定节点类型，可选值有 <code>primary</code>|<code>success</code>
-      |<code>warning</code>|<code>danger</code>|<code>info</code>
+      (2) 当<code>shape</code> = 'dot' 时，可以通过 <code>type</code> 属性指定节点类型，可选值有
+      <code>primary</code>|<code>success</code> |<code>warning</code>|<code>danger</code>|<code>info</code>
     </p>
     <tiny-time-line :data="data2" vertical shape="dot"></tiny-time-line>
   </div>
@@ -20,7 +25,13 @@ export default {
   },
   data() {
     return {
-      data1: [{ name: '默认状态' }, { name: '异常状态', error: true }, { name: '禁用状态', disabled: true }],
+      data1: [
+        { name: '默认状态' },
+        { name: '成功状态', autoColor: 'success' },
+        { name: '警告状态', autoColor: 'warning' },
+        { name: '异常状态', error: true }, // 也可以使用 autoColor: 'error'
+        { name: '禁用状态', disabled: true }
+      ],
       data2: [
         { name: '基本 / primary', time: '2019-11-10 00:00:00', type: 'primary' },
         { name: '成功 / success', time: '2019-11-11 00:01:30', type: 'success' },
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 3567cb43a..22aa34242 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
@@ -43,6 +43,20 @@ export default {
       },
       codeFiles: ['vertical-timeline.vue']
     },
+    {
+      demoId: 'status',
+      name: {
+        'zh-CN': '节点状态',
+        'en-US': 'Status of Node'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过指定时间线节点的 <code>autoColor</code> 或 <code>type</code> 属性指定其状态；同时 <code>disabled</code> 属性可设置是否禁用。</p>',
+        'en-US':
+          '<p>Specify the state of timeline nodes by setting the <code>autoColor</code> or <code>type</code> attribute, and use the <code>disabled</code> attribute to enable or disable them.</p>'
+      },
+      codeFiles: ['status.vue']
+    },
     {
       demoId: 'text-position',
       name: {
@@ -68,19 +82,6 @@ export default {
       },
       codeFiles: ['shape.vue']
     },
-    {
-      demoId: 'status',
-      name: {
-        'zh-CN': '节点状态',
-        'en-US': 'Status of Node'
-      },
-      desc: {
-        'zh-CN': '<p>横向时间线可以使用 <code>error</code>|<code>disabled</code> 指定单节点的状态。</p>',
-        'en-US':
-          '<p>Use the <code>error</code> or <code>disabled</code> attribute to set the appearance of a horizontal timeline node. </p>'
-      },
-      codeFiles: ['status.vue']
-    },
     {
       demoId: 'set-node-width',
       name: {
@@ -93,6 +94,44 @@ export default {
       },
       codeFiles: ['set-node-width.vue']
     },
+    {
+      demoId: 'custom-icon',
+      name: {
+        'zh-CN': '自定义图标',
+        'en-US': 'Custom Icon'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>auto-color</code> 属性可自定义节点图标。</p>',
+        'en-US': '<p>Customize icon by using the <code>auto-color</code> attribute.</p>'
+      },
+      codeFiles: ['custom-icon.vue']
+    },
+    {
+      demoId: 'custom-field',
+      name: {
+        'zh-CN': '自定义字段',
+        'en-US': 'Custom Field'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>name-field</code> 属性设置节点信息中名称对应的字段名；<code>time-field</code> 属性设置节点时间信息对应的字段名；<code>auto-color-field</code> 属性设置节点图标对应的字段名。</p>',
+        'en-US':
+          '<p>The <code>name-field</code> attribute is used to set the field name corresponding to the node name in the node information, the <code>time-field</code> attribute is used to set the field name corresponding to the node time information and the <code>auto-color-field</code> attribute is used to set the field name corresponding to the icon. </p>'
+      },
+      codeFiles: ['custom-field.vue']
+    },
+    {
+      demoId: 'set-start-value',
+      name: {
+        'zh-CN': '序号起始值',
+        'en-US': 'Start value of the sequence number'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>start</code> 属性设置时间线序号起始值。</p>\n',
+        'en-US': '<p>Set the start sequence number through the <code>start</code> attribute. </p>\n'
+      },
+      codeFiles: ['set-start-value.vue']
+    },
     {
       demoId: 'show-divider',
       name: {
@@ -107,18 +146,6 @@ export default {
       },
       codeFiles: ['show-divider.vue']
     },
-    {
-      demoId: 'slot-description',
-      name: {
-        'zh-CN': '节点描述插槽',
-        'en-US': 'Node Description'
-      },
-      desc: {
-        'zh-CN': '<p>通过 <code>description</code> 插槽添加单个节点的描述信息。</p>',
-        'en-US': '<p>Add description information for a single node through the <code>description</code> slot.</p>'
-      },
-      codeFiles: ['slot-description.vue']
-    },
     {
       demoId: 'custom-horizontal-timeline',
       name: {
@@ -148,30 +175,16 @@ export default {
       codeFiles: ['custom-vertical-timeline.vue']
     },
     {
-      demoId: 'custom-field',
+      demoId: 'slot-description',
       name: {
-        'zh-CN': '自定义字段',
-        'en-US': 'Custom Field'
+        'zh-CN': '节点描述插槽',
+        'en-US': 'Node Description'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 <code>name-field</code> 属性设置节点信息中名称对应的字段名，<code>time-field</code> 属性设置节点时间信息对应的字段名。</p>\n',
-        'en-US':
-          '<p>The <code>name-field</code> attribute is used to set the field name corresponding to the node name in the node information, and the <code>time-field</code> attribute is used to set the field name corresponding to the node time information. </p>\n'
+        'zh-CN': '<p>通过 <code>description</code> 插槽添加单个节点的描述信息。</p>',
+        'en-US': '<p>Add description information for a single node through the <code>description</code> slot.</p>'
       },
-      codeFiles: ['custom-field.vue']
-    },
-    {
-      demoId: 'set-start-value',
-      name: {
-        'zh-CN': '序号起始值',
-        'en-US': 'Start value of the sequence number'
-      },
-      desc: {
-        'zh-CN': '<p>通过 <code>start</code> 属性设置时间线序号起始值。</p>\n',
-        'en-US': '<p>Set the start sequence number through the <code>start</code> attribute. </p>\n'
-      },
-      codeFiles: ['set-start-value.vue']
+      codeFiles: ['slot-description.vue']
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/time-picker/default-value.spec.ts b/examples/sites/demos/pc/app/time-picker/default-value.spec.ts
index c9e637500..888141cb2 100644
--- a/examples/sites/demos/pc/app/time-picker/default-value.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/default-value.spec.ts
@@ -13,14 +13,16 @@ test('选择器打开时默认时间设置', async ({ page }) => {
   await expect(hour).toHaveClass(/active/)
   await expect(minute).toHaveClass(/active/)
   await expect(second).toHaveClass(/active/)
+  await page.getByText('通过 default-value').click()
 
   // 日期范围选择
-  const startHour = page.locator('div:nth-child(2) > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(19)').first()
+  const startHour = page.getByRole('listitem').filter({ hasText: '18' }).first()
   const startMinute = page.getByRole('listitem').filter({ hasText: '40' }).first()
-  const startSecond = page.locator('div:nth-child(2) > .tiny-time-spinner > div:nth-child(3) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li').first()
-  const endHour = page.locator('div:nth-child(2) > div:nth-child(2) > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(19)').first()
+  const startSecond = page.getByRole('listitem').filter({ hasText: '00' }).nth(2)
+
+  const endHour = page.getByRole('listitem').filter({ hasText: '18' }).nth(3)
   const endMinute = page.getByRole('listitem').filter({ hasText: '50' }).nth(2)
-  const endSecond = page.locator('div:nth-child(2) > div:nth-child(2) > .tiny-time-spinner > div:nth-child(3) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li').first()
+  const endSecond = page.getByRole('listitem').filter({ hasText: '00' }).nth(5)
 
   await page.getByRole('textbox').nth(2).click()
   await expect(startHour).toHaveClass(/active/)
diff --git a/examples/sites/demos/pc/app/time-picker/disabled.spec.ts b/examples/sites/demos/pc/app/time-picker/disabled.spec.ts
index fe07c61d7..c25f7ef81 100644
--- a/examples/sites/demos/pc/app/time-picker/disabled.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/disabled.spec.ts
@@ -13,13 +13,8 @@ test('测试禁用状态', async ({ page }) => {
   const timePicker = page.getByRole('textbox', { name: '18:40:00' }).nth(1)
   await page.getByRole('textbox', { name: '18:40:00' }).nth(1).click()
   await page.waitForTimeout(100)
-  await page
-    .locator(
-      'div:nth-child(8) > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(18)'
-    )
-    .first()
-    .click()
-  await page.waitForTimeout(100)
+  await page.getByRole('listitem').filter({ hasText: '17' }).first().click()
+  // 点击17点，点击确定，关闭选择框后，查看input 时间是否仍是18：40：00
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(timePicker).toBeVisible()
diff --git a/examples/sites/demos/pc/app/time-picker/editable.spec.ts b/examples/sites/demos/pc/app/time-picker/editable.spec.ts
index 5495ee5f7..aaf8e8a94 100644
--- a/examples/sites/demos/pc/app/time-picker/editable.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/editable.spec.ts
@@ -5,10 +5,13 @@ test('文本框不可输入', async ({ page }) => {
   await page.goto('time-picker#editable')
 
   const timePicker = page.locator('.tiny-date-editor input')
-  const closeIcon = page.locator('svg.baseClearicon')
+  await timePicker.hover()
+  await page.waitForTimeout(100)
+  const closeIcon = page.locator('#editable path').first()
 
   await expect(timePicker).toHaveValue('18:40:00')
   await timePicker.hover()
+  await page.waitForTimeout(100)
   await closeIcon.click()
   await expect(timePicker).toHaveValue('')
   await timePicker.click()
diff --git a/examples/sites/demos/pc/app/time-picker/format.spec.ts b/examples/sites/demos/pc/app/time-picker/format.spec.ts
index 657b5004f..ffa81ffa6 100644
--- a/examples/sites/demos/pc/app/time-picker/format.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/format.spec.ts
@@ -11,35 +11,33 @@ test('时间格式化', async ({ page }) => {
   await expect(page.getByRole('textbox', { name: '07:40:00 pm' })).toBeVisible()
 
   await page.getByRole('textbox', { name: '19:40:00 pm' }).click()
+  await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()
 
   await page.getByRole('textbox', { name: '8:40:0 PM' }).click()
+  await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '09 PM' }).locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('textbox', { name: '9:40:0 PM' })).toBeVisible()
 
   await page.getByRole('textbox', { name: '21:40:0 PM' }).click()
+  await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '10 PM' }).locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('textbox', { name: '22:40:0 PM' })).toBeVisible()
 
   // value-format: 选中值的格式
   await page.getByRole('textbox', { name: '18:30:00' }).click()
+  await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '19' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('textbox', { name: '19:30:00' })).toBeVisible()
 
   // picker-options.format: 下拉框中显示的格式
-  const timePickerHour = page
-    .locator(
-      'div:nth-child(13) > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(19)'
-    )
-    .first()
-  const timePickerMinute = page.locator(
-    'div:nth-child(13) > .tiny-time-panel__content > .tiny-time-spinner > div:nth-child(2) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(41)'
-  )
+  const timePickerHour = page.getByRole('listitem').filter({ hasText: '18' }).first()
+  const timePickerMinute = page.getByRole('listitem').filter({ hasText: '40' }).first()
   const timePickerSecond = page.locator('.of-hidden > div:nth-child(12) .tiny-scrollbar').nth(2)
   await page.getByRole('textbox', { name: '18:40:00' }).click()
   await page.waitForTimeout(200)
diff --git a/examples/sites/demos/pc/app/time-picker/is-range.spec.ts b/examples/sites/demos/pc/app/time-picker/is-range.spec.ts
index daa5dcd6e..fc037dc68 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/is-range.spec.ts
@@ -8,7 +8,7 @@ test('范围选择', async ({ page }) => {
   const endTime = page.getByRole('textbox').nth(2)
   await page.getByRole('textbox').nth(1).click()
   await page.getByText('42').first().click()
-  await page.locator('div:nth-child(2) > div:nth-child(2) > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(21) > span').first().click()
+  await page.getByRole('listitem').filter({ hasText: '20' }).nth(3).click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(startTime).toHaveValue('18:42:00')
   await expect(endTime).toHaveValue('20:50:00')
diff --git a/examples/sites/demos/pc/app/time-picker/picker-options.spec.ts b/examples/sites/demos/pc/app/time-picker/picker-options.spec.ts
index 29d11ff32..31fc33c4d 100644
--- a/examples/sites/demos/pc/app/time-picker/picker-options.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/picker-options.spec.ts
@@ -1,20 +1,22 @@
 import { test, expect } from '@playwright/test'
 
-test('选择时间范围', async ({ page }) => {
+test('固定时间范围', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-picker#is-range')
+  await page.goto('time-picker#picker-options')
 
-  const startTime = page.getByRole('textbox').nth(1)
-  const endTime = page.getByRole('textbox').nth(2)
-  await page.getByRole('textbox').nth(1).click()
-  await page.getByText('42').first().click()
-  await page
-    .locator(
-      'div:nth-child(2) > div:nth-child(2) > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(21) > span'
-    )
-    .first()
-    .click()
+  const selectTime = page.getByRole('textbox', { name: '18:40:00' })
+  // 点击17点，点击确定，关闭选择框后，查看input 时间是否仍是18：40：00
+  await selectTime.click()
+  await page.waitForTimeout(100)
+  await page.getByRole('listitem').filter({ hasText: '17' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
-  await expect(startTime).toHaveValue('18:42:00')
-  await expect(endTime).toHaveValue('20:50:00')
+  await page.waitForTimeout(100)
+  await expect(selectTime).toBeVisible()
+  // 点击21点，点击确定，关闭选择框后，查看input 时间是否仍是18：40：00
+  await selectTime.click()
+  await page.waitForTimeout(100)
+  await page.getByRole('listitem').filter({ hasText: '21' }).first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await page.waitForTimeout(100)
+  await expect(selectTime).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue
index 2a80c8323..891bc9d59 100644
--- a/examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu lazy :load="loadNode"></tiny-tree-menu>
+  <tiny-tree-menu :data="[]" lazy :load="loadNode"></tiny-tree-menu>
 </template>
 
 <script setup>
diff --git a/examples/sites/demos/pc/app/tree-menu/lazy-load.vue b/examples/sites/demos/pc/app/tree-menu/lazy-load.vue
index 6cf219d2e..20e712d71 100644
--- a/examples/sites/demos/pc/app/tree-menu/lazy-load.vue
+++ b/examples/sites/demos/pc/app/tree-menu/lazy-load.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu lazy :load="loadNode"></tiny-tree-menu>
+  <tiny-tree-menu :data="[]" lazy :load="loadNode"></tiny-tree-menu>
 </template>
 
 <script>
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index ffda8959e..394fbb105 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -241,7 +241,8 @@ export const cmpMenus = [
       { 'nameCn': '拓扑图', 'name': 'Topology Diagram', 'key': 'chart-graph' },
       { 'nameCn': '百度地图', 'name': 'Baidu Map', 'key': 'chart-baidu-map' },
       { 'nameCn': '高德地图', 'name': 'Gaud Map', 'key': 'chart-autonavi-map' },
-      { 'nameCn': '箱形图', 'name': 'Box diagram', 'key': 'chart-boxplot' }
+      { 'nameCn': '箱形图', 'name': 'Box diagram', 'key': 'chart-boxplot' },
+      { 'nameCn': '进度图', 'name': 'Process Chart', 'key': 'chart-process' }
     ]
   },
   {
@@ -281,37 +282,10 @@ export const cmpMenus = [
       { 'nameCn': '公告牌', 'name': 'BulletinBoard', 'key': 'bulletin-board' },
       { 'nameCn': '日历', 'name': 'Calendar', 'key': 'calendar' },
       { 'nameCn': '日历视图', 'name': 'CalendarView', 'key': 'calendar-view' },
-      {
-        'nameCn': '信用卡表单',
-        'name': 'CreditCardForm',
-        'key': 'credit-card-form',
-        'mark': {
-          'type': 'danger',
-          'text': 'Del'
-        }
-      },
       { 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' },
-      {
-        'nameCn': '表头详情栏',
-        'name': 'DetailPage',
-        'key': 'detail-page',
-        'mark': {
-          'type': 'danger',
-          'text': 'Del'
-        }
-      },
       { 'nameCn': '图片预览', 'name': 'Image', 'key': 'image' },
       { 'nameCn': '评分', 'name': 'Rate', 'key': 'rate' },
       { 'nameCn': '文字滚动', 'name': 'ScrollText', 'key': 'scroll-text' },
-      {
-        'nameCn': '滚动块',
-        'name': 'SlideBar',
-        'key': 'slide-bar',
-        'mark': {
-          'type': 'danger',
-          'text': 'Del'
-        }
-      },
       { 'nameCn': '标签', 'name': 'Tag', 'key': 'tag' },
       { 'nameCn': '标签组', 'name': 'TagGroup', 'key': 'tag-group' },
       { 'nameCn': '输入框', 'name': 'TextPopup', 'key': 'text-popup' },
diff --git a/examples/sites/demos/pc/overviewimage/credit-card-form.svg b/examples/sites/demos/pc/overviewimage/credit-card-form.svg
deleted file mode 100644
index 3de10e7c5..000000000
--- a/examples/sites/demos/pc/overviewimage/credit-card-form.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>CreditCardForm 信用卡表单</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.4921021%" y1="86.8386573%" x2="123.541555%" y2="-43.8247114%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="50.5523497%" x2="128.792906%" y2="48.5932155%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.3380666%" x2="128.792906%" y2="46.5920661%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <path d="M2.48008033,33 L45.50385,33 C46.869769,33 47.9839304,31.7858995 47.9839304,30.2883307 L47.9839304,12.8790924 L0,12.8790924 L0,30.2883307 C0,31.7858995 1.11416135,33 2.48008033,33 Z M45.5145631,0 L2.49079343,0 C1.11416135,0 0.0107130966,1.21410051 0.0107130966,2.71166934 L0.0107130966,8.14035656 L48,8.14035656 L48,2.7063209 C47.9946435,1.21410051 46.8804821,0 45.5145631,0 Z" id="path-12"></path>
-        <filter x="-8.3%" y="-6.1%" width="116.7%" height="124.2%" filterUnits="objectBoundingBox" id="filter-13">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1478.000000, -2255.000000)">
-            <g id="编组-14备份-13" transform="translate(1380.000000, 2225.000000)">
-                <g id="CreditCardForm-信用卡表单" transform="translate(98.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-15" transform="translate(28.500000, 33.000000)" opacity="0.204287574">
-                        <path d="M4,0 L12.2725011,0 L12.2725011,0 L53,0 C55.209139,-8.25425059e-15 57,1.790861 57,4 L57,55 C57,57.209139 55.209139,59 53,59 L4,59 C1.790861,59 3.75067146e-15,57.209139 0,55 L0,4 C-1.15871992e-15,1.790861 1.790861,-3.82769592e-17 4,0 Z" id="矩形" fill="url(#linearGradient-9)"></path>
-                        <rect id="矩形备份-6" fill="url(#linearGradient-10)" x="8.5" y="25" width="49" height="6" rx="3"></rect>
-                        <rect id="矩形备份-20" fill="url(#linearGradient-10)" x="8.5" y="39" width="49" height="6" rx="3"></rect>
-                        <rect id="矩形备份-21" fill="url(#linearGradient-11)" x="8.5" y="11" width="31.4821429" height="6" rx="3"></rect>
-                    </g>
-                    <g id="编组-24" transform="translate(49.000000, 47.000000)">
-                        <path d="M2.4809109,33 L45.5190891,33 C46.8854655,33 48,31.0087719 48,28.5526316 L48,4 C48,1.790861 46.209139,-4.05812251e-16 44,0 L4,0 C1.790861,4.05812251e-16 -2.705415e-16,1.790861 0,4 L0,28.5526316 L0,28.5526316 C0,31.008772 1.11453448,33 2.4809109,33 Z" id="路径" fill="#C8D4F8"></path>
-                        <g id="信用卡">
-                            <g id="形状">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
-                                <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-12"></use>
-                            </g>
-                            <path d="M28.1663877,22.0896272 C28.1663877,21.715235 28.4449281,21.4103728 28.7877469,21.4103728 L43.0575829,21.4103728 C43.4004017,21.4103728 43.6735856,21.715235 43.6735856,22.0896272 L43.6735856,26.1544571 C43.6735856,26.5288493 43.3950452,26.8337115 43.0575829,26.8337115 L28.7931035,26.8337115 C28.4502846,26.8337115 28.1717442,26.5288493 28.1717442,26.1544571 L28.1717442,22.0896272 L28.1663877,22.0896272 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/detail-page.svg b/examples/sites/demos/pc/overviewimage/detail-page.svg
deleted file mode 100644
index a5da74984..000000000
--- a/examples/sites/demos/pc/overviewimage/detail-page.svg
+++ /dev/null
@@ -1,90 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>DetailPage 表头详情栏</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="44.0988019%" y1="69.9170941%" x2="128.792906%" y2="-0.727028245%" id="linearGradient-9">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.4618639%" y1="86.8386573%" x2="123.945296%" y2="-43.8247114%" id="linearGradient-10">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="53.4876835%" x2="128.792906%" y2="41.1171871%" id="linearGradient-11">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="44.0988019%" y1="51.4735463%" x2="128.792906%" y2="46.2470115%" id="linearGradient-12">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-        <path d="M2,0 L66,0 C67.1045695,-2.02906125e-16 68,0.8954305 68,2 L68,16 C68,17.1045695 67.1045695,18 66,18 L2,18 C0.8954305,18 9.09629973e-13,17.1045695 9.09494702e-13,16 L9.09494702e-13,2 C9.09359431e-13,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="path-13"></path>
-        <filter x="-5.9%" y="-11.1%" width="111.8%" height="144.4%" filterUnits="objectBoundingBox" id="filter-14">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-694.000000, -2530.000000)">
-            <g id="编组-14备份-15" transform="translate(596.000000, 2500.000000)">
-                <g id="DetailPage-表头详情栏" transform="translate(98.000000, 30.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="编组-3" transform="translate(33.000000, 38.000000)">
-                        <rect id="矩形备份-23" fill="url(#linearGradient-9)" opacity="0.204287574" x="0" y="2" width="68" height="50" rx="4"></rect>
-                        <rect id="矩形备份-6" fill="url(#linearGradient-10)" opacity="0.303770519" x="31.09375" y="9" width="33.90625" height="35" rx="4"></rect>
-                        <path d="M40,25 L49,25 C50.1045695,25 51,25.8954305 51,27 C51,28.1045695 50.1045695,29 49,29 L40,29 C38.8954305,29 38,28.1045695 38,27 C38,25.8954305 38.8954305,25 40,25 Z" id="形状结合备份" fill="url(#linearGradient-11)" opacity="0.604724702"></path>
-                        <path d="M40,33 L56,33 C57.1045695,33 58,33.8954305 58,35 C58,36.1045695 57.1045695,37 56,37 L40,37 C38.8954305,37 38,36.1045695 38,35 C38,33.8954305 38.8954305,33 40,33 Z" id="形状结合备份-24" fill="url(#linearGradient-12)" opacity="0.604724702"></path>
-                        <g id="形状结合备份">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                            <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-13"></use>
-                        </g>
-                        <path d="M61.9514373,8.10859412 C61.9004816,7.82946044 61.627756,7.54532672 61.344878,7.48244438 L61.1333662,7.43468367 C60.6364074,7.28629733 60.195507,6.96190294 59.9151803,6.48413954 C59.6348361,6.00384141 59.5685374,5.45814356 59.6908768,4.95779321 L59.7571579,4.76162879 C59.8412453,4.49004724 59.7316448,4.11539212 59.5099629,3.92927985 C59.5099629,3.92927985 59.3111548,3.76332395 58.7504839,3.44396432 C58.1897953,3.12712207 57.9476854,3.03911805 57.9476854,3.03911805 C57.6749775,2.94106188 57.2927218,3.03410065 57.0939313,3.24281723 L56.9460788,3.39872098 C56.5689082,3.75077179 56.0617443,3.96450576 55.5011085,3.96450576 C54.9404727,3.96450576 54.4282238,3.74828914 54.0510004,3.39370359 L53.9082329,3.24279987 C53.7119937,3.03410065 53.3272043,2.9410966 53.0544788,3.03911805 C53.0544788,3.03911805 52.8098352,3.12712207 52.2491466,3.44394696 C51.6884581,3.76582397 51.4922365,3.93177987 51.4922365,3.93177987 C51.270537,4.1153574 51.1609365,4.4875125 51.2450415,4.76161143 L51.3062552,4.96025851 C51.4260257,5.46064357 51.3622959,6.00384141 51.0819517,6.48408746 C50.8016074,6.96433351 50.3557451,7.29133208 49.8562878,7.43720105 L49.6524123,7.48244438 C49.372068,7.54532672 49.0968088,7.82696042 49.0458531,8.10859412 C49.0458531,8.10859412 49,8.36003666 49,8.99875593 C49,9.63747519 49.0458531,9.88891773 49.0458531,9.88891773 C49.0968088,10.1705514 49.3695167,10.4521851 49.6524123,10.5150675 L49.8512204,10.5603108 C50.3507129,10.7061971 50.7992496,11.0330915 51.0795939,11.5158723 C51.3599382,11.9961878 51.4262369,12.5418683 51.3038975,13.042236 L51.2453055,13.2358657 C51.161218,13.5074473 51.2708185,13.8821024 51.4924828,14.0682146 C51.4924828,14.0682146 51.6912909,14.2341705 52.2519619,14.5535302 C52.8126328,14.8728898 53.0547427,14.9583764 53.0547427,14.9583764 C53.3274507,15.0564153 53.7097063,14.9633938 53.9084969,14.7546773 L54.0486602,14.6062909 C54.4283469,14.2517227 54.9380798,14.0354887 55.5013196,14.0354887 C56.0645595,14.0354887 56.5767557,14.2542401 56.9539791,14.6087909 L57.0941424,14.7571773 C57.2903817,14.9658765 57.675171,15.0589674 57.9478966,14.9608591 C57.9478966,14.9608591 58.1925402,14.8728551 58.7532287,14.5560302 C59.3139173,14.2366532 59.5101389,14.0707147 59.5101389,14.0707147 C59.7318384,13.8871371 59.8414389,13.512482 59.7573162,13.2383657 L59.6961025,13.0371839 C59.576332,12.5393162 59.6400618,11.9961357 59.9204061,11.518355 C60.2007504,11.0380395 60.6492695,10.7086624 61.1487796,10.5627935 L61.3475877,10.5175501 C61.627932,10.4546678 61.9031912,10.1730341 61.9541469,9.89140039 C61.9541469,9.89140039 62,9.63995785 62,9.00123858 C61.9973255,8.35996722 61.9514549,8.10850732 61.9514549,8.10850732 L61.9514373,8.10859412 Z M55.5012669,11.5561156 C54.0715515,11.5561156 52.9094416,10.4119939 52.9094416,8.99875593 C52.9094416,7.58805268 54.0689826,6.44389624 55.5012669,6.44389624 C56.9309822,6.44389624 58.0930921,7.58801796 58.0930921,9.00125594 C58.090488,10.4119592 56.930947,11.5561156 55.5012669,11.5561156 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/overviewimage/slide-bar.svg b/examples/sites/demos/pc/overviewimage/slide-bar.svg
deleted file mode 100644
index 2fe74c342..000000000
--- a/examples/sites/demos/pc/overviewimage/slide-bar.svg
+++ /dev/null
@@ -1,96 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="125px" height="125px" viewBox="0 0 125 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>SlideBar 滚动块</title>
-    <defs>
-        <linearGradient x1="50%" y1="45.9685271%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#ECF3FB" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.3956523%" y1="35.9331967%" x2="50%" y2="64.0668033%" id="linearGradient-2">
-            <stop stop-color="#E3EFFD" stop-opacity="0.00575352382" offset="0%"></stop>
-            <stop stop-color="#E5F0FD" offset="34.0601199%"></stop>
-            <stop stop-color="#F0F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.3333333%" y1="34.495573%" x2="96.9740837%" y2="65.4421891%" id="linearGradient-3">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#F7FBFF" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="90.9912104%" y1="29.4309598%" x2="33.3333333%" y2="67.7472684%" id="linearGradient-4">
-            <stop stop-color="#D5E6F9" offset="0%"></stop>
-            <stop stop-color="#E7F0F9" stop-opacity="0" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-5">
-            <stop stop-color="#CEE6FE" offset="0%"></stop>
-            <stop stop-color="#8AB5F2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-5.8027489%" y1="27.0499439%" x2="103.630422%" y2="71.1332543%" id="linearGradient-6">
-            <stop stop-color="#BFD6F9" offset="0%"></stop>
-            <stop stop-color="#F3F6FE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="89.8473889%" y1="61.7348066%" x2="0%" y2="61.7348066%" id="linearGradient-7">
-            <stop stop-color="#CAD9F3" offset="0%"></stop>
-            <stop stop-color="#D5E3F7" offset="100%"></stop>
-        </linearGradient>
-        <filter x="-18.5%" y="-60.0%" width="136.9%" height="220.0%" filterUnits="objectBoundingBox" id="filter-8">
-            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <path d="M80.9909047,39 L45.0023935,39 C43.347056,39 42,40.5069389 42,42.3587494 L42,82.6412506 C42,84.5005583 43.347056,86 45.0023935,86 L80.9976065,86 C82.652944,86 84,84.5005583 84,82.6412506 L84,42.3587494 C83.9932982,40.5069389 82.652944,39 80.9909047,39 Z" id="path-9"></path>
-        <filter x="-9.5%" y="-4.3%" width="119.0%" height="117.0%" filterUnits="objectBoundingBox" id="filter-10">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <rect id="path-11" x="48" y="61" width="30" height="4" rx="2"></rect>
-        <filter x="-13.3%" y="-50.0%" width="126.7%" height="300.0%" filterUnits="objectBoundingBox" id="filter-12">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <rect id="path-13" x="48" y="73" width="30" height="4" rx="2"></rect>
-        <filter x="-13.3%" y="-50.0%" width="126.7%" height="300.0%" filterUnits="objectBoundingBox" id="filter-14">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.368627451   0 0 0 0 0.48627451   0 0 0 0 0.878431373  0 0 0 0.349865467 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="47.5828693%" y1="86.8386573%" x2="82.2735745%" y2="-43.8247114%" id="linearGradient-15">
-            <stop stop-color="#5073E5" offset="0%"></stop>
-            <stop stop-color="#5E7CE0" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面一" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="-TinyUI-Vue-组件总览" transform="translate(-1870.000000, -2533.000000)">
-            <g id="编组-25备份-17" transform="translate(1771.000000, 2500.000000)">
-                <g id="SlideBar-滚动块" transform="translate(99.000000, 33.000000)">
-                    <g id="编组">
-                        <g transform="translate(9.000000, 1.000000)" id="多边形">
-                            <polygon fill="url(#linearGradient-1)" opacity="0.54620216" points="53.2605623 0 106.521125 30.75 53.2605623 62 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-2)" points="53.2605623 61.5 106.521125 86.75 53.2605623 118 0 86.75"></polygon>
-                            <polygon fill="url(#linearGradient-3)" opacity="0.600606283" points="53.2605623 62 53.2605623 123 7.39138783e-15 92.25 0 30.75"></polygon>
-                            <polygon fill="url(#linearGradient-4)" opacity="0.791265578" points="53.2605623 62 106.521125 30.75 106.521125 92.25 53.2605623 123"></polygon>
-                            <polygon fill="url(#linearGradient-5)" points="53.2605623 118.007802 53.2605623 123 7.39138783e-15 92.25 0 86.9161706"></polygon>
-                            <polygon fill="url(#linearGradient-6)" transform="translate(79.630281, 104.958085) scale(-1, 1) translate(-79.630281, -104.958085) " points="106.260562 118.007802 106.260562 123 53 92.25 53 86.9161706"></polygon>
-                        </g>
-                        <ellipse id="椭圆形" fill="url(#linearGradient-7)" filter="url(#filter-8)" cx="62.5" cy="90" rx="32.5" ry="10"></ellipse>
-                    </g>
-                    <g id="路径备份-2">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
-                        <use fill="#5073E5" fill-rule="evenodd" xlink:href="#path-9"></use>
-                    </g>
-                    <g id="矩形备份-6">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                        <use fill-opacity="0.6" fill="#D6DEF9" fill-rule="evenodd" xlink:href="#path-11"></use>
-                    </g>
-                    <g id="矩形备份-20">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                        <use fill-opacity="0.6" fill="#D6DEF9" fill-rule="evenodd" xlink:href="#path-13"></use>
-                    </g>
-                    <rect id="矩形备份-21" fill="#FFFFFF" fill-rule="nonzero" x="48" y="49" width="19.2747813" height="4" rx="2"></rect>
-                    <path d="M36.853678,50 L23.1437689,50 C22.5131642,50 22,50.8015632 22,51.7865688 L22,73.2134312 C22,74.2024246 22.5131642,75 23.1437689,75 L36.8562311,75 C37.4868358,75 38,74.2024246 38,73.2134312 L38,51.7865688 C37.9974469,50.8015632 37.4868358,50 36.853678,50 Z" id="路径备份-3" fill="url(#linearGradient-15)" opacity="0.604724702"></path>
-                    <path d="M102.853678,50 L89.1437689,50 C88.5131642,50 88,50.8015632 88,51.7865688 L88,73.2134312 C88,74.2024246 88.5131642,75 89.1437689,75 L102.856231,75 C103.486836,75 104,74.2024246 104,73.2134312 L104,51.7865688 C103.997447,50.8015632 103.486836,50 102.853678,50 Z" id="路径备份-4" fill="url(#linearGradient-15)" opacity="0.604724702"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/sites/demos/saas/menus.js b/examples/sites/demos/saas/menus.js
index 24d426abe..6a9ba46fc 100644
--- a/examples/sites/demos/saas/menus.js
+++ b/examples/sites/demos/saas/menus.js
@@ -8,8 +8,6 @@ const noSaasComponents = [
   'ColorPicker',
   'ColorSelectPanel',
   'ConfigProvider',
-  'CreditCard',
-  'CreditCardForm',
   'DatePickerMobileFirst',
   'Divider',
   'IndexBar',
diff --git a/examples/sites/index.html b/examples/sites/index.html
index a8beae081..4f33460d3 100644
--- a/examples/sites/index.html
+++ b/examples/sites/index.html
@@ -18,7 +18,7 @@
     <app-root></app-root>
     <div id="app" class="wp100 hp100 pt60 of-hidden"></div>
     <!-- prettier-ignore -->
-    <script id="tinyui-design-common" src="https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/tinyui-design-common.min.js"></script>
+    <script id="tinyui-design-common" src="https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tinyui-design-common/1.0.5.20240330164329/tinyui-design-common.min.js"></script>
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>
diff --git a/examples/sites/src/tools/useApiMode.js b/examples/sites/src/tools/useApiMode.js
index aeae16235..bed22f044 100644
--- a/examples/sites/src/tools/useApiMode.js
+++ b/examples/sites/src/tools/useApiMode.js
@@ -4,7 +4,7 @@ import { $local } from './storage'
 const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
 const apiModeState = reactive({
-  apiMode: $local[_modeKey] || 'Composition',
+  apiMode: $local[_modeKey] || 'Composition', // 示例风格:  Options: 组合式; Composition: 选项式
   demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
 })
 
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index ad5ffb8e5..e29c28f55 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -207,6 +207,7 @@ export default defineComponent({
 
     const { apiModeState } = useApiMode()
     const { templateModeState, staticPath, optionsList } = useTemplateMode()
+    const huiNewChart = ['chart-process']
 
     // 页面加载/点击api中的链接，根据hash滚动。
     const scrollByHash = (hash) => {
@@ -274,7 +275,7 @@ export default defineComponent({
       const promiseArr = [
         fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.${lang}.md`),
         fetchDemosFile(`${staticPath.value}/${getWebdocPath(state.cmpId)}/webdoc/${state.cmpId}.js`),
-        fetchDemosFile(`@demos/apis/${getWebdocPath(state.cmpId)}.js`)
+        fetchDemosFile(`@demos/apis/${huiNewChart.includes(state.cmpId) ? 'hui' : getWebdocPath(state.cmpId)}.js`)
       ]
       if (faqMdConfig[state.cmpId]) {
         promiseArr.push(
diff --git a/internals/automate/src/add-dependencies.ts b/internals/automate/src/add-dependencies.ts
index dc8a4960b..0018f9ba8 100644
--- a/internals/automate/src/add-dependencies.ts
+++ b/internals/automate/src/add-dependencies.ts
@@ -15,11 +15,19 @@ const root = path.join(__dirname, '../../../packages/vue/src')
 async function writeJson(jsonPath, dependencies) {
   const jsonStr: any = await safeReadFile(jsonPath)
   const json = parseString(jsonStr)
-  const newDep = difference(dependencies, Object.keys(json.dependencies))
+  const oldDeps = json.dependencies
+  const toDelDeps = difference(
+    Object.keys(oldDeps).filter((name) => name.startsWith('@opentiny/')),
+    dependencies
+  )
+  const newDep = difference(dependencies, Object.keys(oldDeps))
   newDep.forEach((dep) => {
     json.dependencies[dep] = 'workspace:~'
   })
-  writeFile(jsonPath, JSON.stringify(json, null, 2) + '\n')
+  toDelDeps.forEach((dep) => {
+    delete json.dependencies[dep]
+  })
+  writeFile(jsonPath, JSON.stringify(json, null, 2))
 }
 
 // 解析文件内容中的opentiny依赖
@@ -28,14 +36,15 @@ function parseDepencies(content) {
   return content.match(reg)?.map((importStr) => {
     const depReg = /('|")(\@opentiny\/.+)('|")/
     const dep = importStr.match(depReg)[2]
+
     const needDep = dep.split('/').slice(0, 2).join('/')
     return needDep
   })
 }
 
-async function addComponentDepencies(component) {
+async function addComponentDepencies(component, dir) {
   let dependencies = []
-  const componentPath = path.join(root, component)
+  const componentPath = path.join(dir, component)
   // 如果没有package.json 则跳过
   const jsonPath = path.join(componentPath, 'package.json')
   const packageJson = await safeReadFile(jsonPath)
@@ -46,7 +55,7 @@ async function addComponentDepencies(component) {
   const allFiles = await fg(['**/*.ts', '**/*.vue'], {
     dot: true,
     cwd: componentPath,
-    ignore: ['node_modules', '__test__']
+    ignore: ['**/node_modules', '__test__']
   })
   for (let i = 0; i < allFiles.length; i++) {
     const file = allFiles[i]
@@ -61,5 +70,9 @@ async function addComponentDepencies(component) {
 }
 
 scanDir(root, 'dir').then((dirs) => {
-  dirs.forEach(addComponentDepencies)
+  dirs.forEach((dir) => addComponentDepencies(dir, root))
+})
+
+scanDir(path.join(root, 'chart'), 'dir').then((dirs) => {
+  dirs.forEach((dir) => addComponentDepencies(dir, path.join(root, 'chart')))
 })
diff --git a/internals/automate/src/aui-diff.ts b/internals/automate/src/aui-diff.ts
index f636a3f22..c2bdf4815 100644
--- a/internals/automate/src/aui-diff.ts
+++ b/internals/automate/src/aui-diff.ts
@@ -19,7 +19,6 @@ const ignoreList = [
   'locale',
   'grid',
   'chart',
-  'chart-beta',
   'grid-column',
   'grid-manager',
   'grid-toolbar',
diff --git a/internals/cli/src/commands/build/build-chart-theme.ts b/internals/cli/src/commands/build/build-chart-theme.ts
index 14b1c3e10..2f5028b03 100644
--- a/internals/cli/src/commands/build/build-chart-theme.ts
+++ b/internals/cli/src/commands/build/build-chart-theme.ts
@@ -24,7 +24,7 @@ const changeTheme = () => {
   // 你想要替换的文件
   const filePath = path.join(
     __dirname,
-    '../../../../../packages/vue/src/chart-beta/chart-core/base/feature/token/constants.ts'
+    '../../../../../packages/vue/src/chart/chart-core/base/feature/token/constants.ts'
   )
 
   // 读取文件内容
@@ -40,6 +40,6 @@ const changeTheme = () => {
   fs.writeFileSync(filePath, content, 'utf-8')
 }
 
-export const chartBetaTheme = () => {
+export const chartTheme = () => {
   changeTheme()
 }
diff --git a/internals/cli/src/commands/build/build-entry-app.ts b/internals/cli/src/commands/build/build-entry-app.ts
index 0e94e13b0..29245f9cb 100644
--- a/internals/cli/src/commands/build/build-entry-app.ts
+++ b/internals/cli/src/commands/build/build-entry-app.ts
@@ -61,12 +61,7 @@ const buildFullRuntime = () => {
   })
 
   components.forEach((item) => {
-    if (
-      item.inEntry !== false &&
-      !item.path.includes('river') &&
-      !item.path.includes('chart-beta') &&
-      !excludeComponents.includes(item.name)
-    ) {
+    if (item.inEntry !== false && !item.path.includes('river') && !excludeComponents.includes(item.name)) {
       const component = capitalizeKebabCase(item.name)
 
       componentsTemplate.push(`  ${component}`)
diff --git a/internals/cli/src/commands/build/build-ui.ts b/internals/cli/src/commands/build/build-ui.ts
index 2df8f0ef3..5b33beb8d 100644
--- a/internals/cli/src/commands/build/build-ui.ts
+++ b/internals/cli/src/commands/build/build-ui.ts
@@ -134,8 +134,8 @@ export interface BaseConfig {
 export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, isRuntime, design }: BaseConfig) => {
   // 处理tsconfig中配置，主要是处理paths映射，确保dts可以找到正确的包
   const compilerOptions = require(pathFromWorkspaceRoot(`tsconfig.vue${vueVersion}.json`)).compilerOptions
-  const versionTarget = isValidVersion(buildTarget) ? buildTarget : `${ns(vueVersion)}.${buildTarget}`
-  const themeAndRenderlessVersion = isValidVersion(buildTarget) ? buildTarget : `3.${buildTarget}`
+  let versionTarget = isValidVersion(buildTarget) ? buildTarget : `${ns(vueVersion)}.${buildTarget}`
+  let themeAndRenderlessVersion = isValidVersion(buildTarget) ? buildTarget : `3.${buildTarget}`
   const isThemeOrRenderless = (key) => key.includes('@opentiny/vue-theme') || key.includes('@opentiny/vue-renderless')
 
   return defineConfig({
@@ -160,7 +160,7 @@ export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, isRunt
             }
           },
           include: [...dtsInclude, 'packages/vue/*.d.ts'],
-          exclude: ['**/__tests__'],
+          exclude: ['**/__tests__', '**/__test__'],
           beforeWriteFile: (filePath, content) => {
             return {
               // "vue/src/alert/index.d.ts" ==> "alert/index.d.ts"
@@ -177,6 +177,13 @@ export const getBaseConfig = ({ vueVersion, dtsInclude, dts, buildTarget, isRunt
         generatePackageJsonPlugin({
           beforeWriteFile: (filePath, content) => {
             const dependencies = {}
+            const packageVersion = content.version
+
+            // 如果没有指定版本号，则按源码版本发布
+            if (!buildTarget) {
+              themeAndRenderlessVersion = packageVersion
+              versionTarget = `${vueVersion}${packageVersion.slice(1)}`
+            }
 
             Object.entries(content.dependencies).forEach(([key, value]) => {
               // dependencies里的@opentiny,统一使用：~x.x.0
@@ -359,7 +366,7 @@ async function batchBuildAll({ vueVersion, tasks, formats, message, emptyOutDir,
 
 export interface BuildUiOption {
   vueVersions: string[] // vue的版本
-  buildTarget: string // 目标版本，必填, 不需要major位，因为需要同时打出vue2和vue3的包
+  buildTarget?: string // 目标版本，非必填（1、不写major位，可以同时打出vue2和vue3包的版本。2、写完整版本号，可以打出指定版本号的包。3、不写版本号，按照源码里面的版本号构建）
   formats: string[] // 打包的格式
   clean: boolean // 是否清空build产物
   dts: boolean // 是否生成TS类型声明文件
@@ -408,7 +415,7 @@ export async function buildUi(
   names: string[] = [],
   {
     vueVersions = ['2', '3'],
-    buildTarget = '8.0',
+    buildTarget,
     formats = ['es'],
     clean = false,
     dts = true,
diff --git a/internals/cli/src/commands/build/rollup/inline-chunks.ts b/internals/cli/src/commands/build/rollup/inline-chunks.ts
index 3334217d5..5e455ad57 100644
--- a/internals/cli/src/commands/build/rollup/inline-chunks.ts
+++ b/internals/cli/src/commands/build/rollup/inline-chunks.ts
@@ -6,8 +6,8 @@ import chalk from 'chalk'
 import commonjs from '@rollup/plugin-commonjs'
 import { external } from '../../../shared/config'
 
-const bundlesToMerge = new Set<string>()
-const commonChunk = new Set<string>()
+let bundlesToMerge
+let commonChunk
 let buildFormat
 let isDelete
 
@@ -17,6 +17,8 @@ export default function ({ deleteInlinedFiles = true }): Plugin {
     generateBundle: async ({ format, dir }: NormalizedOutputOptions, bundle: OutputBundle) => {
       buildFormat = format
       isDelete = deleteInlinedFiles
+      bundlesToMerge = new Set<string>()
+      commonChunk = new Set<string>()
       const jsAssets = Object.keys(bundle).filter((i) => /\.[mc]?js$/.test(i))
       for (const jsName of jsAssets) {
         const jsChunk = bundle[jsName]
@@ -56,7 +58,7 @@ export default function ({ deleteInlinedFiles = true }): Plugin {
         // eslint-disable-next-line no-console
         console.log(`\n${chalk.green('开始内联公共依赖')}`)
         let i = 0
-        if (bundlesToMerge.size > 0) {
+        if (bundlesToMerge?.size > 0) {
           bundlesToMerge.forEach(async (filePath) => {
             if (commonChunk.has(filePath)) {
               ++i
@@ -78,7 +80,7 @@ export default function ({ deleteInlinedFiles = true }): Plugin {
           resolve()
         }
       }).then(async () => {
-        if (isDelete) {
+        if (isDelete && commonChunk?.size > 0) {
           commonChunk.forEach((filePath) => {
             fs.unlinkSync(filePath)
             // eslint-disable-next-line no-console
diff --git a/internals/cli/src/commands/create/create-mapping.ts b/internals/cli/src/commands/create/create-mapping.ts
index 4146a9476..682ce332c 100644
--- a/internals/cli/src/commands/create/create-mapping.ts
+++ b/internals/cli/src/commands/create/create-mapping.ts
@@ -75,10 +75,7 @@ const makeModules = () => {
         const modulePath = subPath.slice(subPath.lastIndexOf(`vue${path.sep}src`)).replaceAll(path.sep, '/')
         const matchArr = modulePath.match(/.+\/(.+?)\/(index\.ts|src\/pc\.|src\/mobile\.|src\/mobile-first\.)/)
         if (matchArr?.[1]) {
-          // TINY-TODO 此处先兼容一下Hui-chart图表组件beta版本，后续融合后这部分代码可移除
-          const compName =
-            getTemplateName(matchArr[1], entryObj) +
-            (modulePath.includes('chart-beta') && matchArr?.[1] !== 'chart-beta' ? 'Beta' : '')
+          const compName = getTemplateName(matchArr[1], entryObj)
           templates[compName] = {
             path: modulePath,
             type: entryObj.isMainEntry ? 'component' : 'template',
diff --git a/internals/cli/src/index.ts b/internals/cli/src/index.ts
index 94d1de4f6..8bdd5a732 100644
--- a/internals/cli/src/index.ts
+++ b/internals/cli/src/index.ts
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { Command, Option } from 'commander'
 import { createIconSaas } from './commands/create/index.js'
-import { buildUi, buildEntry, buildRuntime, buildReact, buildEntryReact, chartBetaTheme } from './commands/build'
+import { buildUi, buildEntry, buildRuntime, buildReact, buildEntryReact, chartTheme } from './commands/build'
 import { releaseAurora } from './commands/release/releaseAurora'
 
 const program = new Command()
@@ -14,7 +14,7 @@ program.command('build:entry-react').description('生成 react 组件库入口')
 
 program.command('build:entry').description('生成组件库入口').action(buildEntry)
 
-program.command('build:chartTheme').description('切换chart-beta主题').action(chartBetaTheme)
+program.command('build:chartTheme').description('切换chart主题').action(chartTheme)
 
 program
   .command('build:ui')
diff --git a/internals/playwright-config/src/index.js b/internals/playwright-config/src/index.js
index 8769ca796..f88d89571 100644
--- a/internals/playwright-config/src/index.js
+++ b/internals/playwright-config/src/index.js
@@ -14,10 +14,10 @@ const Config = ({ testDir, baseURL, storageState, devServerCommon }) =>
   defineConfig({
     testDir,
     /* 每个 test 用例最长时间。 */
-    timeout: 20 * 1000,
+    timeout: 30 * 1000,
     expect: {
       // 每个 expect() 用例最长时间。
-      timeout: 10 * 1000
+      timeout: 15 * 1000
     },
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
diff --git a/package.json b/package.json
index 71032fc65..718d1bba1 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "pnpm": ">=6.35"
   },
   "scripts": {
-    "preinstall": "node -v && pnpm -v && npx only-allow pnpm",
+    "preinstall": "npx only-allow pnpm",
     "postinstall": "pnpm build:internals",
     "prepare": "husky install",
     "bootstrap": "pnpm --filter=\"!./packages/dist/**\" install",
@@ -80,6 +80,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:all": "pnpm pub2 && pnpm pub3 && pnpm pub:theme && pnpm pub:themeMobile && pnpm pub:themeSaas && pnpm pub:renderless",
+    "pub:site": "pnpm -C examples/sites pub",
     "// ---------- unit单元测试 ----------": "",
     "test:unit2": "pnpm -C examples/vue2 test:unit",
     "test:unit2.7": "pnpm -C examples/vue2.7 test:unit",
@@ -99,7 +100,7 @@
     "format": "prettier --write --cache packages/**/{*.vue,*.js,*.ts,*.jsx,*.tsx,*.less} examples/**/{*.vue,*.js,*.ts,*.jsx,*.tsx} internals/**/{*.js,*.ts}",
     "lint": "eslint \"packages/**/{*.vue,*.js,*.ts}\" --quiet --fix",
     "lint:doc": "eslint \"examples/**/{*.vue,*.js,*.ts}\" --quiet --fix",
-    "clean:build": "rimraf packages/dist2 packages/dist3 packages/renderless/dist packages/dist2.7",
+    "clean:build": "rimraf packages/dist2 packages/dist3 packages/dist2.7 packages/renderless/dist packages/theme/dist packages/theme-saas/dist packages/theme-mobile/dist",
     "clean:dependencies": "rm -rf node_modules /**/node_modules",
     "// ---------- 构建【mf】版本 ----------": "",
     "preci:deployMfPatch": "pnpm clean:build && lerna version prepatch --conventional-prerelease --include-merged-tags --preid mf --no-push --yes",
@@ -147,7 +148,7 @@
     "cropperjs": "1.5.12",
     "crypto-js": "4.2.0",
     "echarts": "5.4.1",
-    "echarts-liquidfill": "3.0.0",
+    "echarts-liquidfill": "3.1.0",
     "echarts-wordcloud": "2.0.0",
     "fastdom": "1.0.11",
     "shepherd.js": "11.0.1",
@@ -257,4 +258,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/design/aurora/package.json b/packages/design/aurora/package.json
index 177e882fb..a08237721 100644
--- a/packages/design/aurora/package.json
+++ b/packages/design/aurora/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-aurora",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "main": "index.ts",
   "sideEffects": false,
   "type": "module",
@@ -8,4 +8,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/design/aurora/src/select/index.ts b/packages/design/aurora/src/select/index.ts
index 99f0bea43..876ddc753 100644
--- a/packages/design/aurora/src/select/index.ts
+++ b/packages/design/aurora/src/select/index.ts
@@ -16,7 +16,8 @@ export default {
     spacingHeight: 2,
     initialInputHeight: 30,
     // 显示清除等图标时，不隐藏下拉箭头时
-    autoHideDownIcon: false
+    autoHideDownIcon: false,
+    delayBlur: true
   },
   props: {
     tagType: 'info'
diff --git a/packages/design/saas/package.json b/packages/design/saas/package.json
index 547fd3681..3f97e6b64 100644
--- a/packages/design/saas/package.json
+++ b/packages/design/saas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-saas",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "main": "index.ts",
   "sideEffects": false,
   "type": "module",
@@ -8,4 +8,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/design/saas/src/select/index.ts b/packages/design/saas/src/select/index.ts
index 322369106..c056de676 100644
--- a/packages/design/saas/src/select/index.ts
+++ b/packages/design/saas/src/select/index.ts
@@ -16,7 +16,8 @@ export default {
     spacingHeight: 4,
     initialInputHeight: 30,
     // 显示清除等图标时，不隐藏下拉箭头时
-    autoHideDownIcon: false
+    autoHideDownIcon: false,
+    delayBlur: true
   },
   props: {
     tagType: 'info'
diff --git a/packages/design/smb/package.json b/packages/design/smb/package.json
index 95338ea1a..03261a6ba 100644
--- a/packages/design/smb/package.json
+++ b/packages/design/smb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-design-smb",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "sideEffects": false,
   "type": "module",
   "main": "index.ts",
@@ -8,4 +8,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/modules.json b/packages/modules.json
index c3d431804..a4835b033 100644
--- a/packages/modules.json
+++ b/packages/modules.json
@@ -132,11 +132,6 @@
     "type": "component",
     "exclude": false
   },
-  "AutonaviMapBeta": {
-    "path": "vue/src/chart-beta/autonavi-map/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "Avatar": {
     "path": "vue/src/avatar/index.ts",
     "type": "component",
@@ -175,11 +170,6 @@
     "type": "component",
     "exclude": false
   },
-  "BaiduMapBeta": {
-    "path": "vue/src/chart-beta/baidu-map/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "Breadcrumb": {
     "path": "vue/src/breadcrumb/index.ts",
     "type": "component",
@@ -514,133 +504,68 @@
     "type": "component",
     "exclude": false
   },
-  "ChartBarBeta": {
-    "path": "vue/src/chart-beta/chart-bar/index.ts",
-    "type": "component",
-    "exclude": false
-  },
-  "ChartBeta": {
-    "path": "vue/src/chart-beta/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartBoxplot": {
     "path": "vue/src/chart/chart-boxplot/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartBoxplotBeta": {
-    "path": "vue/src/chart-beta/chart-boxplot/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartCandle": {
     "path": "vue/src/chart/chart-candle/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartCandleBeta": {
-    "path": "vue/src/chart-beta/chart-candle/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartCore": {
     "path": "vue/src/chart/chart-core/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartCoreBeta": {
-    "path": "vue/src/chart-beta/chart-core/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartFunnel": {
     "path": "vue/src/chart/chart-funnel/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartFunnelBeta": {
-    "path": "vue/src/chart-beta/chart-funnel/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartGauge": {
     "path": "vue/src/chart/chart-gauge/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartGaugeBeta": {
-    "path": "vue/src/chart-beta/chart-gauge/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartGraph": {
     "path": "vue/src/chart/chart-graph/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartGraphBeta": {
-    "path": "vue/src/chart-beta/chart-graph/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartHeatmap": {
     "path": "vue/src/chart/chart-heatmap/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartHeatmapBeta": {
-    "path": "vue/src/chart-beta/chart-heatmap/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartHistogram": {
     "path": "vue/src/chart/chart-histogram/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartHistogramBeta": {
-    "path": "vue/src/chart-beta/chart-histogram/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartLine": {
     "path": "vue/src/chart/chart-line/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartLineBeta": {
-    "path": "vue/src/chart-beta/chart-line/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartLiquidfill": {
     "path": "vue/src/chart/chart-liquidfill/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartLiquidfillBeta": {
-    "path": "vue/src/chart-beta/chart-liquidfill/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartMap": {
     "path": "vue/src/chart/chart-map/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartMapBeta": {
-    "path": "vue/src/chart-beta/chart-map/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartPie": {
     "path": "vue/src/chart/chart-pie/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartPieBeta": {
-    "path": "vue/src/chart-beta/chart-pie/index.ts",
+  "ChartProcess": {
+    "path": "vue/src/chart/chart-process/index.ts",
     "type": "component",
     "exclude": false
   },
@@ -649,81 +574,41 @@
     "type": "component",
     "exclude": false
   },
-  "ChartRadarBeta": {
-    "path": "vue/src/chart-beta/chart-radar/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartRing": {
     "path": "vue/src/chart/chart-ring/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartRingBeta": {
-    "path": "vue/src/chart-beta/chart-ring/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartSankey": {
     "path": "vue/src/chart/chart-sankey/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartSankeyBeta": {
-    "path": "vue/src/chart-beta/chart-sankey/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartScatter": {
     "path": "vue/src/chart/chart-scatter/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartScatterBeta": {
-    "path": "vue/src/chart-beta/chart-scatter/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartSunburst": {
     "path": "vue/src/chart/chart-sunburst/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartSunburstBeta": {
-    "path": "vue/src/chart-beta/chart-sunburst/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartTree": {
     "path": "vue/src/chart/chart-tree/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartTreeBeta": {
-    "path": "vue/src/chart-beta/chart-tree/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartWaterfall": {
     "path": "vue/src/chart/chart-waterfall/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartWaterfallBeta": {
-    "path": "vue/src/chart-beta/chart-waterfall/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "ChartWordcloud": {
     "path": "vue/src/chart/chart-wordcloud/index.ts",
     "type": "component",
     "exclude": false
   },
-  "ChartWordcloudBeta": {
-    "path": "vue/src/chart-beta/chart-wordcloud/index.ts",
-    "type": "component",
-    "exclude": false
-  },
   "Checkbox": {
     "path": "vue/src/checkbox/index.ts",
     "type": "component",
@@ -949,32 +834,6 @@
     "type": "template",
     "exclude": false
   },
-  "CreditCard": {
-    "path": "vue/src/credit-card/index.ts",
-    "type": "component",
-    "exclude": false,
-    "mode": [
-      "pc"
-    ]
-  },
-  "CreditCardForm": {
-    "path": "vue/src/credit-card-form/index.ts",
-    "type": "component",
-    "exclude": false,
-    "mode": [
-      "pc"
-    ]
-  },
-  "CreditCardFormPc": {
-    "path": "vue/src/credit-card-form/src/pc.vue",
-    "type": "template",
-    "exclude": false
-  },
-  "CreditCardPc": {
-    "path": "vue/src/credit-card/src/pc.vue",
-    "type": "template",
-    "exclude": false
-  },
   "Crop": {
     "path": "vue/src/crop/index.ts",
     "type": "component",
@@ -1083,11 +942,6 @@
     "type": "template",
     "exclude": false
   },
-  "QuarterPanel": {
-    "path": "vue/src/quarter-panel/src/pc.vue",
-    "type": "template",
-    "exclude": false
-  },
   "Dept": {
     "path": "vue/src/dept/index.ts",
     "type": "component",
@@ -1116,19 +970,6 @@
     "type": "module",
     "exclude": false
   },
-  "DetailPage": {
-    "path": "vue/src/detail-page/index.ts",
-    "type": "component",
-    "exclude": false,
-    "mode": [
-      "pc"
-    ]
-  },
-  "DetailPagePc": {
-    "path": "vue/src/detail-page/src/pc.vue",
-    "type": "template",
-    "exclude": false
-  },
   "DialogBox": {
     "path": "vue/src/dialog-box/index.ts",
     "type": "component",
@@ -2249,6 +2090,14 @@
       "pc"
     ]
   },
+  "QuarterPanel": {
+    "path": "vue/src/quarter-panel/index.ts",
+    "type": "component",
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
+  },
   "QueryBuilder": {
     "path": "vue/src/query-builder/index.ts",
     "type": "component",
@@ -2583,32 +2432,6 @@
     "type": "template",
     "exclude": false
   },
-  "Statistic": {
-    "path": "vue/src/statistic/index.ts",
-    "type": "component",
-    "exclude": false,
-    "mode": [
-      "pc"
-    ]
-  },
-  "StatisticPc": {
-    "path": "vue/src/statistic/src/pc.vue",
-    "type": "template",
-    "exclude": false
-  },
-  "SlideBar": {
-    "path": "vue/src/slide-bar/index.ts",
-    "type": "component",
-    "exclude": false,
-    "mode": [
-      "pc"
-    ]
-  },
-  "SlideBarPc": {
-    "path": "vue/src/slide-bar/src/pc.vue",
-    "type": "template",
-    "exclude": false
-  },
   "Slider": {
     "path": "vue/src/slider/index.ts",
     "type": "component",
@@ -2681,6 +2504,19 @@
       "mobile-first"
     ]
   },
+  "Statistic": {
+    "path": "vue/src/statistic/index.ts",
+    "type": "component",
+    "exclude": false,
+    "mode": [
+      "pc"
+    ]
+  },
+  "StatisticPc": {
+    "path": "vue/src/statistic/src/pc.vue",
+    "type": "template",
+    "exclude": false
+  },
   "Steps": {
     "path": "vue/src/steps/index.ts",
     "type": "component",
diff --git a/packages/renderless/package.json b/packages/renderless/package.json
index 1b35bb583..94c5922c9 100644
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-renderless",
   "private": true,
-  "version": "3.14.0",
+  "version": "3.15.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/calendar-view/index.ts b/packages/renderless/src/calendar-view/index.ts
index 7f93fe7c5..6137dc3c7 100644
--- a/packages/renderless/src/calendar-view/index.ts
+++ b/packages/renderless/src/calendar-view/index.ts
@@ -163,7 +163,7 @@ const getCalendarItem = function (item, props, isFunction, type, isNext, isLast)
 export const handleEvents =
   ({ props, state }) =>
   () => {
-    let result = []
+    let result = [] as any[]
     const dayMillisecond = 24 * 60 * 60 * 1000
     const lastYear = lastMonth(state.activeYear, state.activeMonth).year
     const lastMon = lastMonth(state.activeYear, state.activeMonth).month
@@ -172,30 +172,39 @@ export const handleEvents =
 
     if (props.events && props.events.length) {
       props.events.forEach((prop) => {
-        // 这里不能直接改props.events里的数据需要进行一次拷贝，不然会导致死循环
+        // tiny新增，这里不能直接改props.events里的数据需要进行一次拷贝，不然会导致死循环
         const item = { ...prop }
         const {
-          year,
-          month,
+          year: startYear,
+          month: startMonth,
           day: startDay,
           hours: startHours,
           minutes: startMinutes,
           seconds: startSeconds
         } = parseDate(item.start)
-        const { day: endDay, hours: endHours, minutes: endMinutes, seconds: endSeconds } = parseDate(item.end)
+        const {
+          year: endYear,
+          month: endMonth,
+          day: endDay,
+          hours: endHours,
+          minutes: endMinutes,
+          seconds: endSeconds
+        } = parseDate(item.end)
 
         if (
-          [lastYear, +state.activeYear, nextYear].includes(year) &&
-          [lastMon, +state.activeMonth, nextMon].includes(month)
+          ([lastYear, +state.activeYear, nextYear].includes(startYear) &&
+            [lastMon, +state.activeMonth, nextMon].includes(startMonth)) ||
+          ([lastYear, +state.activeYear, nextYear].includes(endYear) &&
+            [lastMon, +state.activeMonth, nextMon].includes(endMonth))
         ) {
           item.start = getTime(item.start)
           item.end = getTime(item.end)
           item.startTime = makeUpZero(startHours) + ':' + makeUpZero(startMinutes) + ':' + makeUpZero(startSeconds)
           item.endTime = makeUpZero(endHours) + ':' + makeUpZero(endMinutes) + ':' + makeUpZero(endSeconds)
-          item.startDay = year + '-' + month + '-' + startDay
-          item.endDay = year + '-' + month + '-' + endDay
-          const startTimestamp = getTime(year + '-' + month + '-' + startDay)
-          const endTimestamp = getTime(year + '-' + month + '-' + endDay)
+          item.startDay = startYear + '-' + startMonth + '-' + startDay
+          item.endDay = endYear + '-' + endMonth + '-' + endDay
+          const startTimestamp = getTime(startYear + '-' + startMonth + '-' + startDay)
+          const endTimestamp = getTime(endYear + '-' + endMonth + '-' + endDay)
           const days = Math.abs(endTimestamp - startTimestamp) / dayMillisecond
           item.dayNumber = days >= 1 ? days + 1 : 1
 
@@ -214,23 +223,24 @@ export const handleEvents =
   }
 
 function splitEvent(props, event) {
-  const result = []
+  const result = [] as any[]
   const startDay = new Date(event.startDay)
-  const day = startDay.getDate()
+  const dayMillisecond = 24 * 60 * 60 * 1000
 
   if (event.dayNumber > 1) {
     for (let i = 0; i < event.dayNumber; i++) {
       let copyObj = JSON.parse(JSON.stringify(event))
+      let dayStartTimeStamp = new Date(startDay.getTime() + i * dayMillisecond)
 
       if (i === 0) {
         copyObj.realStart = copyObj.start
-        copyObj.realEnd = new Date(startDay.setDate(day + i)).setHours(props.dayTimes[1])
+        copyObj.realEnd = new Date(dayStartTimeStamp).setHours(props.dayTimes[1])
       } else if (i === event.dayNumber - 1) {
-        copyObj.realStart = new Date(startDay.setDate(day + i)).setHours(props.dayTimes[0])
+        copyObj.realStart = new Date(dayStartTimeStamp).setHours(props.dayTimes[0])
         copyObj.realEnd = copyObj.end
       } else {
-        copyObj.realStart = new Date(startDay.setDate(day + i)).setHours(props.dayTimes[0])
-        copyObj.realEnd = new Date(startDay.setDate(day + i)).setHours(props.dayTimes[1])
+        copyObj.realStart = new Date(dayStartTimeStamp).setHours(props.dayTimes[0])
+        copyObj.realEnd = new Date(dayStartTimeStamp).setHours(props.dayTimes[1])
       }
       result.push(copyObj)
     }
diff --git a/packages/renderless/src/calendar-view/vue.ts b/packages/renderless/src/calendar-view/vue.ts
index 40f2d570a..5697a0ea6 100644
--- a/packages/renderless/src/calendar-view/vue.ts
+++ b/packages/renderless/src/calendar-view/vue.ts
@@ -153,9 +153,12 @@ const initWatch = ({ watch, props, state, emit, api, nextTick }) => {
   )
 
   watch(
-    () => props.mode,
-    () => {
-      state.mode = props.mode
+    () => state.mode,
+    (val) => {
+      emit('mode-change', val)
+      if (val === 'timeline') {
+        api.getCurWeekEvent()
+      }
     }
   )
 
diff --git a/packages/renderless/src/cascader-select/index.ts b/packages/renderless/src/cascader-select/index.ts
index bbfb9d647..15d31146f 100644
--- a/packages/renderless/src/cascader-select/index.ts
+++ b/packages/renderless/src/cascader-select/index.ts
@@ -41,6 +41,13 @@ export const confirm =
     api.close()
   }
 
+export const clear =
+  ({ api, emit }) =>
+  (value) => {
+    emit('update:modelValue', value)
+    api.close()
+  }
+
 export const columnStyle = ({ props, computed }) =>
   computed(() => {
     return {
diff --git a/packages/renderless/src/cascader-select/vue.ts b/packages/renderless/src/cascader-select/vue.ts
index be9702cb2..635443f9f 100644
--- a/packages/renderless/src/cascader-select/vue.ts
+++ b/packages/renderless/src/cascader-select/vue.ts
@@ -1,11 +1,11 @@
-import { watchActionSheetVisible, close, confirm, columnStyle } from './index'
+import { watchActionSheetVisible, close, confirm, columnStyle, clear } from './index'
 import { usePicker } from './usePicker'
 
 export const api = [
   'state',
   'close',
   'confirm',
-
+  'clear',
   'columnsType',
   'columnsList',
   'columnFieldNames',
@@ -38,6 +38,7 @@ export const renderless = (props, { reactive, computed, watch, ref, toRefs }, {
 
   Object.assign(api, {
     close: close(state),
+    clear: clear({ api, emit }),
     confirm: confirm({ api, emit, props, state, defaultValues, selectedOptions, isDisabled, vm }),
     watchActionSheetVisible: watchActionSheetVisible({ emit, api, props }),
 
diff --git a/packages/renderless/src/cascader/index.ts b/packages/renderless/src/cascader/index.ts
index 5b1ef1064..1ba0ce0e4 100644
--- a/packages/renderless/src/cascader/index.ts
+++ b/packages/renderless/src/cascader/index.ts
@@ -326,8 +326,8 @@ export const handleExpandChange =
       dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [
         state.multiple ? state.presentText : state.inputValue
       ])
-
-      updatePopper(state.panel.$parent.$el)
+      // 同步时需注意，popper初始化时会保存dom的引用，因此无需传参，否则vue2下会有bug
+      updatePopper()
     })
 
     emit('expand-change', value)
diff --git a/packages/renderless/src/common/deps/vue-popper.ts b/packages/renderless/src/common/deps/vue-popper.ts
index 24d0d590b..f78183f29 100644
--- a/packages/renderless/src/common/deps/vue-popper.ts
+++ b/packages/renderless/src/common/deps/vue-popper.ts
@@ -49,6 +49,28 @@ const getReference = ({ state, props, vm, slots }: Pick<IPopperInputParams, 'sta
   return reference
 }
 
+const getReferMaxZIndex = (reference) => {
+  if (!reference || !reference.nodeType) return
+
+  let getZIndex = (dom) => parseInt(window.getComputedStyle(dom).zIndex, 10) || 0
+  let max = getZIndex(reference)
+  let z
+
+  do {
+    reference = reference.parentNode
+
+    if (reference) {
+      z = getZIndex(reference)
+    } else {
+      break
+    }
+
+    max = z > max ? z : max
+  } while (reference !== document.body)
+
+  return max + 1 + ''
+}
+
 export default (options: IPopperInputParams) => {
   const {
     parent,
@@ -97,6 +119,10 @@ export default (options: IPopperInputParams) => {
     }
   }
 
+  const nextZIndex = (reference) => {
+    return props.zIndex === 'relative' ? getReferMaxZIndex(reference) : PopupManager.nextZIndex()
+  }
+
   const createPopper = (dom) => {
     if (isServer) {
       return
@@ -145,7 +171,7 @@ export default (options: IPopperInputParams) => {
       state.popperJS.onUpdate(options.onUpdate)
     }
 
-    state.popperJS._popper.style.zIndex = PopupManager.nextZIndex().toString()
+    state.popperJS._popper.style.zIndex = nextZIndex(state.popperJS._reference)
     followHide(state.popperJS)
     on(state.popperElm, 'click', stop)
   }
@@ -164,7 +190,7 @@ export default (options: IPopperInputParams) => {
 
       // 每次递增 z-index
       if (popperJS._popper && popperElmOrTrue !== true) {
-        popperJS._popper.style.zIndex = PopupManager.nextZIndex().toString()
+        popperJS._popper.style.zIndex = nextZIndex(popperJS._reference)
         followHide(state.popperJS)
       }
     } else {
diff --git a/packages/renderless/src/credit-card-form/index.ts b/packages/renderless/src/credit-card-form/index.ts
deleted file mode 100644
index 7ddd73d10..000000000
--- a/packages/renderless/src/credit-card-form/index.ts
+++ /dev/null
@@ -1,160 +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.
- *
- */
-
-export const generateMonthValue = (month) => (month < 10 ? `0${month}` : month)
-
-export const changeName =
-  ({ emit, state }) =>
-  (event) => {
-    state.formData.cardName = event.target.value
-    emit('input-card-name', state.formData.cardName)
-  }
-
-export const changeNumber =
-  ({ emit, state }) =>
-  (event) => {
-    state.formData.cardNumber = event.target.value
-    state.mainCardNumber = event.target.value
-    let value = state.formData.cardNumber.replace(/\D/g, '')
-
-    if (/^3[47]\d{0,13}$/.test(value)) {
-      // american express, 15 digits
-      state.formData.cardNumber = value.replace(/^(\d{4})(?=\d)/, '$1 ').replace(/^(\d{4}) (\d{6})(?=\d)/, '$1 $2 ')
-
-      state.cardNumberMaxLength = 17
-    } else if (/^3(?:0[0-5]|[68]\d)\d{0,11}$/.test(value)) {
-      // diner's club, 14 digits
-      state.formData.cardNumber = value.replace(/^(\d{4})(?=\d)/, '$1 ').replace(/^(\d{4}) (\d{6})(?=\d)/, '$1 $2 ')
-
-      state.cardNumberMaxLength = 16
-    } else if (/^\d{0,16}$/.test(value)) {
-      // regular cc number, 16 digits
-      state.formData.cardNumber = value
-        .replace(/^(\d{4})(?=\d)/, '$1 ')
-        .replace(/^(\d{4}) (\d{4})(?=\d)/, '$1 $2 ')
-        .replace(/^(\d{4}) (\d{4}) (\d{4})(?=\d)/, '$1 $2 $3 ')
-
-      state.cardNumberMaxLength = 19
-    }
-
-    emit('input-card-number', state.formData.cardNumber)
-  }
-
-export const changeMonth =
-  ({ emit, state }) =>
-  () => {
-    emit('input-card-month', state.cardMonth)
-  }
-
-export const changeYear =
-  ({ emit, state }) =>
-  () => {
-    emit('input-card-year', state.cardYear)
-  }
-
-export const changeCvv =
-  ({ emit, state }) =>
-  (event) => {
-    state.formData.cardCvv = event.target.value
-    emit('input-card-cvv', state.formData.cardCvv)
-  }
-
-export const invaildCard = (props) => () => {
-  let number = props.formData.cardNumber
-  let sum = 0
-  let isOdd = true
-
-  if (!number) {
-    return true
-  }
-
-  for (let i = number.length - 1; i >= 0; i--) {
-    let code = number.charAt(i)
-
-    if (isOdd) {
-      sum += code
-    } else {
-      code = code * 2
-
-      if (code > 9) {
-        code = code.toString().split('').join('+')
-      }
-
-      sum += code
-    }
-
-    isOdd = !isOdd
-  }
-
-  if (sum % 10 !== 0) {
-    return true
-  }
-
-  return false
-}
-
-export const handleSubmit =
-  ({ api, emit, props, state }) =>
-  () => {
-    const invaildCard = api.invaildCard()
-
-    emit('submit', {
-      invaildCard,
-      ...props.formData,
-      cardNumber: state.mainCardNumber.replace(/ /g, '')
-    })
-  }
-
-export const blurCardNumber =
-  ({ api, state }) =>
-  () => {
-    if (state.isCardNumberMasked) {
-      api.maskCardNumber()
-    }
-  }
-
-export const maskCardNumber =
-  ({ props, state }) =>
-  () => {
-    state.mainCardNumber = props.formData.cardNumber
-    let arr = props.formData.cardNumber.split('')
-
-    arr.forEach((element, index) => {
-      if (index > 4 && index < 14 && element.trim() !== '') {
-        arr[index] = '*'
-      }
-    })
-
-    props.formData.cardNumber = arr.join('')
-  }
-
-export const unMaskCardNumber =
-  ({ props, state }) =>
-  () => {
-    props.formData.cardNumber = state.mainCardNumber
-  }
-
-export const focusCardNumber = (api) => () => {
-  api.unMaskCardNumber()
-}
-
-export const toggleMask =
-  ({ api, state }) =>
-  () => {
-    state.isCardNumberMasked = !state.isCardNumberMasked
-
-    if (state.isCardNumberMasked) {
-      api.maskCardNumber()
-    } else {
-      api.unMaskCardNumber()
-    }
-  }
diff --git a/packages/renderless/src/credit-card-form/vue.ts b/packages/renderless/src/credit-card-form/vue.ts
deleted file mode 100644
index 1a6870746..000000000
--- a/packages/renderless/src/credit-card-form/vue.ts
+++ /dev/null
@@ -1,141 +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 {
-  generateMonthValue,
-  changeName,
-  changeNumber,
-  changeMonth,
-  changeYear,
-  changeCvv,
-  invaildCard,
-  blurCardNumber,
-  maskCardNumber,
-  unMaskCardNumber,
-  focusCardNumber,
-  toggleMask,
-  handleSubmit
-} from './index'
-
-export const api = [
-  'state',
-  'generateMonthValue',
-  'changeName',
-  'changeNumber',
-  'changeMonth',
-  'changeYear',
-  'changeCvv',
-  'invaildCard',
-  'blurCardNumber',
-  'maskCardNumber',
-  'unMaskCardNumber',
-  'focusCardNumber',
-  'toggleMask',
-  'handleSubmit'
-]
-
-const initState = ({ reactive, props, computed }) => {
-  const state = reactive({
-    fields: {
-      cardCvv: 'v-card-cvv',
-      cardName: 'v-card-name',
-      cardYear: 'v-card-year',
-      cardMonth: 'v-card-month',
-      cardNumber: 'v-card-number'
-    },
-    minCardYear: new Date().getFullYear(),
-    isCardNumberMasked: true,
-    mainCardNumber: props.formData.cardNumber,
-    cardNumberMaxLength: 19,
-    cardMonth: props.formData.cardMonth,
-    cardYear: props.formData.cardYear,
-    formData: props.formData,
-    minCardMonth: computed(() => (props.formData.cardYear === state.minCardYear ? new Date().getMonth() + 1 : 1))
-  })
-
-  return state
-}
-
-const initApi = ({ api, state, emit, props }) => {
-  Object.assign(api, {
-    state,
-    generateMonthValue,
-    changeCvv: changeCvv({ emit, state }),
-    changeYear: changeYear({ emit, state }),
-    changeName: changeName({ emit, state }),
-    invaildCard: invaildCard(props),
-    changeMonth: changeMonth({ emit, state }),
-    changeNumber: changeNumber({ emit, state }),
-    maskCardNumber: maskCardNumber({ props, state }),
-    unMaskCardNumber: unMaskCardNumber({ props, state }),
-    toggleMask: toggleMask({ api, state }),
-    handleSubmit: handleSubmit({ api, emit, props, state }),
-    blurCardNumber: blurCardNumber({ api, state }),
-    focusCardNumber: focusCardNumber(api)
-  })
-}
-
-const initWatch = ({ watch, state, props, emit }) => {
-  watch(
-    () => state.cardYear,
-    (value) => {
-      state.formData.cardYear = value
-      emit('update:formData', state.formData)
-    }
-  )
-
-  watch(
-    () => state.formData.cardNumber,
-    () => emit('update:formData', state.formData)
-  )
-
-  watch(
-    () => state.formData.cardName,
-    () => emit('update:formData', state.formData)
-  )
-
-  watch(
-    () => state.formData.cardCvv,
-    () => emit('update:formData', state.formData)
-  )
-
-  watch(
-    () => state.cardMonth,
-    (value) => {
-      state.formData.cardMonth = value
-      emit('update:formData', state.formData)
-    }
-  )
-
-  watch(
-    () => props.formData.cardYear,
-    () => {
-      if (props.formData.cardMonth < state.minCardMonth) {
-        state.cardMonth = ''
-      }
-    },
-    { immediate: true }
-  )
-}
-
-export const renderless = (props, { computed, onMounted, reactive, watch }, { emit }) => {
-  const api = {}
-  const state = initState({ reactive, props, computed })
-
-  initApi({ api, state, emit, props })
-
-  onMounted(api.maskCardNumber)
-
-  initWatch({ watch, state, props, emit })
-
-  return api
-}
diff --git a/packages/renderless/src/credit-card/index.ts b/packages/renderless/src/credit-card/index.ts
deleted file mode 100644
index b58d2c9b8..000000000
--- a/packages/renderless/src/credit-card/index.ts
+++ /dev/null
@@ -1,128 +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.
- *
- */
-
-export const cardType = (number) => {
-  if (number.startsWith('4')) {
-    return 'visa'
-  }
-
-  if (/^(34|37)/.test(number)) {
-    return 'amex'
-  }
-
-  if (/^5[1-5]/.test(number)) {
-    return 'mastercard'
-  }
-
-  if (number.startsWith('6011')) {
-    return 'discover'
-  }
-
-  if (number.startsWith('62')) {
-    return 'unionpay'
-  }
-
-  if (number.startsWith('9792')) {
-    return 'troy'
-  }
-
-  if (/^3(?:0([0-5]|9)|[689]\\d?)\\d{0,11}/.test(number)) {
-    return 'dinersclub'
-  }
-
-  if (/^35(2[89]|[3-8])/.test(number)) {
-    return 'jcb'
-  }
-
-  return ''
-}
-
-export const changeFocus =
-  ({ refs, state }) =>
-  () => {
-    let target = refs[state.currentFocus]
-
-    if (target) {
-      const transform = `translateX(${target.offsetLeft}px) translateY(${target.offsetTop}px)`
-
-      state.focusElementStyle = {
-        transform,
-        width: `${target.offsetWidth}px`,
-        height: `${target.offsetHeight}px`
-      }
-    } else {
-      state.focusElementStyle = null
-    }
-  }
-
-export const getIsNumberMasked = (props) => (index, n) =>
-  index > 4 && index < 14 && props.labels.cardNumber.length > index && n.trim() !== '' && props.isCardNumberMasked
-
-export const changePlaceholder =
-  ({ api, nextTick, state }) =>
-  () => {
-    if (state.cardType === 'amex') {
-      state.currentPlaceholder = state.amexCardPlaceholder
-    } else if (state.cardType === 'dinersclub') {
-      state.currentPlaceholder = state.dinersCardPlaceholder
-    } else {
-      state.currentPlaceholder = state.defaultCardPlaceholder
-    }
-
-    nextTick(() => {
-      api.changeFocus()
-    })
-  }
-
-export const focus =
-  ({ props, state }) =>
-  (event) => {
-    const element = event.target
-
-    state.isFocused = true
-
-    if (element.id === props.fields.cardYear || element.id === props.fields.cardMonth) {
-      state.currentFocus = 'cardDate'
-    } else {
-      state.currentFocus = element.id
-    }
-
-    state.isCardFlipped = element.id === props.fields.cardCvv
-  }
-
-export const blur =
-  ({ props, state }) =>
-  (event) => {
-    const element = event.target
-
-    state.isCardFlipped = !element.id === props.fields.cardCvv
-
-    setTimeout(() => {
-      if (!state.isFocused) {
-        state.currentFocus = null
-      }
-    }, 300)
-
-    state.isFocused = false
-  }
-
-export const toggleEvent = ({ api, fieldsEls, type }) => {
-  if (fieldsEls) {
-    for (let i = 0; i < fieldsEls.length; i++) {
-      const element = fieldsEls[i]
-      const eventType = `${type}EventListener`
-
-      element[eventType]('focus', api.focus)
-      element[eventType]('blur', api.blur)
-    }
-  }
-}
diff --git a/packages/renderless/src/credit-card/vue.ts b/packages/renderless/src/credit-card/vue.ts
deleted file mode 100644
index 7dc7351a0..000000000
--- a/packages/renderless/src/credit-card/vue.ts
+++ /dev/null
@@ -1,88 +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 { cardType, changeFocus, getIsNumberMasked, changePlaceholder, focus, blur, toggleEvent } from './index'
-
-export const api = ['state', 'changeFocus', 'getIsNumberMasked', 'changePlaceholder']
-
-const initState = ({ reactive, props, computed }) => {
-  const state = reactive({
-    isFocused: false,
-    currentFocus: null,
-    isCardFlipped: false,
-    focusElementStyle: null,
-    currentPlaceholder: '',
-    amexCardPlaceholder: '#### ###### #####',
-    dinersCardPlaceholder: '#### ###### ####',
-    defaultCardPlaceholder: '#### #### #### ####',
-    cardType: computed(() => cardType(props.labels.cardNumber))
-  })
-
-  return state
-}
-
-const initApi = ({ api, state, props, refs, nextTick }) => {
-  Object.assign(api, {
-    state,
-    blur: blur({ props, state }),
-    focus: focus({ props, state }),
-    changeFocus: changeFocus({ refs, state }),
-    getIsNumberMasked: getIsNumberMasked(props),
-    changePlaceholder: changePlaceholder({ api, nextTick, state })
-  })
-}
-
-const initWatch = ({ watch, state, api }) => {
-  watch(
-    () => state.currentFocus,
-    () => {
-      if (state.currentFocus) {
-        api.changeFocus()
-      } else {
-        state.focusElementStyle = null
-      }
-    },
-    { immediate: true }
-  )
-
-  watch(() => state.cardType, api.changePlaceholder, { immediate: true })
-}
-
-export const renderless = (
-  props,
-  { computed, onMounted, reactive, watch, onBeforeUnmount },
-  { refs, nextTick, parent }
-) => {
-  const api = {}
-  const state = initState({ reactive, props, computed })
-
-  initApi({ api, state, props, refs, nextTick })
-
-  initWatch({ watch, state, api })
-
-  let fieldsEls
-
-  onMounted(() => {
-    api.changePlaceholder()
-
-    fieldsEls = parent.$parent.$el.querySelectorAll('[data-credit-card-field]')
-
-    toggleEvent({ api, fieldsEls, type: 'add' })
-  })
-
-  onBeforeUnmount(() => {
-    toggleEvent({ api, fieldsEls, type: 'remove' })
-    fieldsEls = null
-  })
-
-  return api
-}
diff --git a/packages/renderless/src/dept/index.ts b/packages/renderless/src/dept/index.ts
index 911564314..4fc7456c0 100644
--- a/packages/renderless/src/dept/index.ts
+++ b/packages/renderless/src/dept/index.ts
@@ -145,6 +145,8 @@ export const selectChange =
     api.resetDeptState(deptState.slice(level + 1, 9))
     api.setSelectData()
 
+    state.selectChanged = true
+
     const current = formatJudgCofim(deptState)
     const { hrapprover } = state
 
@@ -214,7 +216,16 @@ export const confirm =
     }
   }
 
-export const closeDialog = (emit) => () => emit('close')
+export const closeDialog =
+  ({ emit, state, deptState }) =>
+  (type) => {
+    if (state.selectChanged) {
+      state.labels = state.lastLabels
+      deptState.forEach((item, i) => Object.assign(item, state.lastDeptState[i]))
+    }
+
+    emit('close', type)
+  }
 
 export const cancel =
   ({ emit, state, deptState }) =>
diff --git a/packages/renderless/src/dept/vue.ts b/packages/renderless/src/dept/vue.ts
index 6a79b11ae..6916858b7 100644
--- a/packages/renderless/src/dept/vue.ts
+++ b/packages/renderless/src/dept/vue.ts
@@ -51,6 +51,7 @@ const initState = ({ reactive, computed, parent, props, inject, lastDeptState })
     display: '',
     open: false,
     loading: false,
+    selectChanged: false,
     searchValue: '',
     searchOptions: [],
     current: '',
@@ -67,7 +68,7 @@ const initApi = ({ api, state, deptState, emit, $service, props }) => {
   Object.assign(api, {
     state,
     deptState,
-    closeDialog: closeDialog(emit),
+    closeDialog: closeDialog({ emit, state, deptState }),
     resetDeptState: resetDeptState(deptState),
     fetchDept: $service.fetchDept,
     fetchDeptList: $service.fetchDeptList,
@@ -105,6 +106,14 @@ export const renderless = (
   initApi({ api, state, deptState, emit, $service, props })
 
   watch(() => props.modelValue, api.getDisplay, { immediate: true })
+  watch(
+    () => state.open,
+    (val) => {
+      if (!val) {
+        state.selectChanged = false
+      }
+    }
+  )
 
   onBeforeUnmount(() => {
     state.open = false
diff --git a/packages/renderless/src/detail-page/index.ts b/packages/renderless/src/detail-page/index.ts
deleted file mode 100644
index c887479d4..000000000
--- a/packages/renderless/src/detail-page/index.ts
+++ /dev/null
@@ -1,112 +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.
- *
- */
-
-export const computedCancel =
-  ({ constants, props, t }) =>
-  () =>
-    props.cancelButton || t(constants.CANCEL_BUTTTON_TEXT)
-
-export const computedconfirm =
-  ({ constants, props, t }) =>
-  () =>
-    props.saveButton || t(constants.SAVE_BUTTON_TEXT)
-
-export const computedSetLocalTips =
-  ({ constants, props, t }) =>
-  () =>
-    props.tips || t(constants.LOCAL_TIPS)
-
-export const computedSetValueTitle =
-  ({ constants, props, t }) =>
-  () =>
-    props.valueTitle || t(constants.VALUE_TITLE)
-
-export const computedSetLocalTitle =
-  ({ constants, props, t }) =>
-  () =>
-    props.title || t(constants.LOCAL_TITLE)
-
-export const computedSetLabelTitle =
-  ({ constants, props, t }) =>
-  () =>
-    props.labelTitle || t(constants.LABEL_TITLE)
-
-export const computedSetDialogTitle =
-  ({ constants, props, t }) =>
-  () =>
-    props.dialogTitle || t(constants.DIALOG_TITLE)
-
-export const showDialog = (state) => () => {
-  state.isShowDialog = true
-
-  state.cloneValue = state.value.map((item) => {
-    if (item.hidden != undefined) {
-      return { ...item }
-    } else {
-      return { ...item, hidden: false }
-    }
-  })
-}
-
-export const closeDialog = (state) => () => {
-  state.isShowDialog = false
-}
-
-export const checkAllHander = (state) => () =>
-  (state.cloneValue = state.cloneValue.map((item) => ({
-    ...item,
-    hidden: state.checkAll
-  })))
-
-export const checkValueHiddenItem = (state) => (index) => {
-  let hiddenItemCount = 0
-  if (typeof index === 'number') {
-    state.cloneValue[index].hidden = !state.cloneValue[index].hidden
-  }
-  state.cloneValue.forEach((item) => {
-    if (item.hidden) {
-      ++hiddenItemCount
-    }
-  })
-
-  if (hiddenItemCount > 0 && hiddenItemCount < state.cloneValue.length) {
-    state.checkAll = false
-    return true
-  } else if (hiddenItemCount === 0) {
-    state.checkAll = false
-    return false
-  } else if (hiddenItemCount === state.cloneValue.length) {
-    state.checkAll = true
-    return false
-  }
-}
-
-export const saveHandler =
-  ({ emit, state, alert }) =>
-  () => {
-    if (state.checkAll) {
-      alert({ message: state.tips, title: '', status: 'warning' })
-      emit('saveWarning')
-      return
-    }
-
-    state.value = state.cloneValue
-    state.isShowDialog = false
-  }
-
-export const watchValue = (state) => (value) => {
-  state.value = value
-}
-
-export const watchTextSplit = (state) => (value) => {
-  state.textSplit = value
-}
diff --git a/packages/renderless/src/detail-page/vue.ts b/packages/renderless/src/detail-page/vue.ts
deleted file mode 100644
index 22b77dd26..000000000
--- a/packages/renderless/src/detail-page/vue.ts
+++ /dev/null
@@ -1,94 +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 {
-  watchTextSplit,
-  watchValue,
-  showDialog,
-  saveHandler,
-  checkAllHander,
-  checkValueHiddenItem,
-  closeDialog,
-  computedCancel,
-  computedconfirm,
-  computedSetLocalTips,
-  computedSetValueTitle,
-  computedSetLocalTitle,
-  computedSetLabelTitle,
-  computedSetDialogTitle
-} from './index'
-
-export const api = [
-  'state',
-  'valueChange',
-  'showDialog',
-  'closeDialog',
-  'checkAllHander',
-  'saveHandler',
-  'checkValueHiddenItem'
-]
-
-const initState = ({ reactive, computed, api, props }) => {
-  const state = reactive({
-    value: props.modelValue,
-    cloneValue: props.modelValue,
-    textSplit: props.textSplit,
-    isShowDialog: false,
-    checkAll: false,
-    indeterminate: computed(() => api.checkValueHiddenItem()),
-    tips: computed(() => api.computedSetLocalTips()),
-    saveButton: computed(() => api.computedconfirm()),
-    cancelButton: computed(() => api.computedCancel()),
-    title: computed(() => api.computedSetLocalTitle()),
-    labelTitle: computed(() => api.computedSetLabelTitle()),
-    valueTitle: computed(() => api.computedSetValueTitle()),
-    dialogTitle: computed(() => api.computedSetDialogTitle())
-  })
-
-  return state
-}
-
-const initApi = ({ api, state, emit, alert, constants, props, t }) => {
-  Object.assign(api, {
-    state,
-    watchValue: watchValue(state),
-    showDialog: showDialog(state),
-    closeDialog: closeDialog(state),
-    watchTextSplit: watchTextSplit(state),
-    checkAllHander: checkAllHander(state),
-    saveHandler: saveHandler({ emit, state, alert }),
-    checkValueHiddenItem: checkValueHiddenItem(state),
-    computedCancel: computedCancel({ constants, props, t }),
-    computedconfirm: computedconfirm({ constants, props, t }),
-    computedSetLocalTips: computedSetLocalTips({ constants, props, t }),
-    computedSetValueTitle: computedSetValueTitle({ constants, props, t }),
-    computedSetLocalTitle: computedSetLocalTitle({ constants, props, t }),
-    computedSetLabelTitle: computedSetLabelTitle({ constants, props, t }),
-    computedSetDialogTitle: computedSetDialogTitle({ api, constants, props, t })
-  })
-}
-
-const initWatch = ({ watch, props, api }) => {
-  watch(() => props.modelValue, api.watchValue, { immediate: true })
-  watch(() => props.textSplit, api.watchTextSplit, { immediate: true })
-}
-
-export const renderless = (props, { computed, reactive, watch }, { t, emit, constants }, { alert }) => {
-  const api = {}
-  const state = initState({ reactive, computed, api, props })
-
-  initApi({ api, state, emit, alert, constants, props, t })
-
-  initWatch({ watch, props, api })
-
-  return api
-}
diff --git a/packages/renderless/src/dialog-box/index.ts b/packages/renderless/src/dialog-box/index.ts
index 0ac48da30..963d55131 100644
--- a/packages/renderless/src/dialog-box/index.ts
+++ b/packages/renderless/src/dialog-box/index.ts
@@ -213,7 +213,7 @@ export const handleClose =
       return
     }
 
-    api.hide()
+    api.hide(type)
   }
 
 export const hide =
@@ -224,7 +224,7 @@ export const hide =
 
       emit('update:visible', false)
       emit('change', false)
-      emit('close')
+      emit('close', cancel)
 
       state.closed = true
       api.hideScrollbar()
@@ -235,14 +235,14 @@ export const handleConfirm =
   ({ api, emit }: Pick<IDialogBoxRenderlessParams, 'api' | 'emit'>) =>
   (): void => {
     emit('confirm')
-    api.handleClose()
+    api.handleClose('confirm')
   }
 
 export const handleCancel =
   ({ api, emit }: Pick<IDialogBoxRenderlessParams, 'api' | 'emit'>) =>
   (): void => {
     emit('cancel')
-    api.handleClose()
+    api.handleClose('cancel')
   }
 
 export const updatePopper =
@@ -293,13 +293,20 @@ const closeAllPopover = (parent: IDialogBoxRenderlessParams['parent']) => {
 }
 
 export const handleDrag =
-  ({ parent, props, state, emit }: Pick<IDialogBoxRenderlessParams, 'parent' | 'props' | 'state' | 'emit'>) =>
+  ({
+    parent,
+    props,
+    state,
+    emit,
+    vm
+  }: Pick<IDialogBoxRenderlessParams, 'parent' | 'props' | 'state' | 'emit' | 'vm'>) =>
   (event: MouseEvent): void => {
     if (!props.draggable) {
       return
     }
 
-    let modalBoxElem = parent.$el.querySelector('.tiny-dialog-box') as HTMLDivElement
+    // tiny 修改： 根据ref访问元素
+    let modalBoxElem = vm.$refs.dialog as HTMLDivElement
     event.preventDefault()
 
     let demMousemove = document.onmousemove
diff --git a/packages/renderless/src/dialog-box/vue.ts b/packages/renderless/src/dialog-box/vue.ts
index 5fbe8051d..4280ef801 100644
--- a/packages/renderless/src/dialog-box/vue.ts
+++ b/packages/renderless/src/dialog-box/vue.ts
@@ -148,7 +148,7 @@ const initApi = ({
     afterLeave: afterLeave(emit),
     hideScrollbar: hideScrollbar(lockScrollClass),
     showScrollbar: showScrollbar(lockScrollClass),
-    handleDrag: handleDrag({ parent, props, state, emit })
+    handleDrag: handleDrag({ parent, props, state, emit, vm })
   })
 }
 
diff --git a/packages/renderless/src/dropdown-item/mf.ts b/packages/renderless/src/dropdown-item/mf.ts
index 68ef66d41..979d743ec 100644
--- a/packages/renderless/src/dropdown-item/mf.ts
+++ b/packages/renderless/src/dropdown-item/mf.ts
@@ -59,7 +59,7 @@ export const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
     }
 
   const mouseEnter =
-    ({ vm, dataStore }) =>
+    ({ vm, dataStore, props }) =>
     (e) => {
       const dom = e.target
       const text = dom.textContent
@@ -73,7 +73,7 @@ export const renderless = (props, { reactive, inject }, { dispatch, vm }) => {
         tooltip.state.popperElm && (tooltip.state.popperElm.style.display = 'none')
         tooltip.doDestroy()
 
-        dataStore.itemLabel = text
+        dataStore.itemLabel = props.tooltipContent || text
         if (vm.$refs.level.scrollWidth > vm.$refs.level.offsetWidth) {
           dataStore.showContent = true
         }
diff --git a/packages/renderless/src/file-upload/index.ts b/packages/renderless/src/file-upload/index.ts
index 2b242f3e7..199403323 100644
--- a/packages/renderless/src/file-upload/index.ts
+++ b/packages/renderless/src/file-upload/index.ts
@@ -139,7 +139,7 @@ export const watchFileList =
       fileList.map((file) => {
         file.uid = file.uid || Date.now() + state.tempIndex++
         file.status = file.status || constants.FILE_STATUS.SUCESS
-        file.type = api.getFileSourceType({ file })
+        // 此处不建议同步AUI的getFileSourceType去更改用户数据的type类型，原生的type不能变更；
 
         return file
       })
diff --git a/packages/renderless/src/grid/utils/dom.ts b/packages/renderless/src/grid/utils/dom.ts
index 33221e5cf..920536b62 100644
--- a/packages/renderless/src/grid/utils/dom.ts
+++ b/packages/renderless/src/grid/utils/dom.ts
@@ -86,19 +86,44 @@ function getFixedLeft($table, from, column, body, offset) {
   return scrollLeft
 }
 
+// 计算水平滚动位置（考虑存在冻结表的情况）
+function computeScrollLeft($table, td) {
+  const { tableBody } = $table.$refs
+  const { visibleColumn } = $table
+  const { scrollLeft: bodyLeft, clientWidth: bodyWidth } = tableBody.$el
+  // Tiny表格冻结列采用sticky，需遍历计算整体宽度
+  let leftWidth = 0
+  let rightWidth = 0
+  visibleColumn.forEach((column) => {
+    if (column.fixed === 'left') {
+      leftWidth += column.renderWidth
+    } else if (column.fixed === 'right') {
+      rightWidth += column.renderWidth
+    }
+  })
+  const tdLeft = td._accumulateRenderWidth || td.offsetLeft + (td.offsetParent ? td.offsetParent.offsetLeft : 0)
+  const tdWidth = td._renderWidth || td.clientWidth
+
+  let scrollLeft
+
+  // 列元素在主表体可视区左侧（包括被左冻结表部分遮挡的情况）
+  if (tdLeft < bodyLeft + leftWidth) {
+    scrollLeft = tdLeft - leftWidth
+  } else if (tdLeft + tdWidth > bodyLeft + bodyWidth - rightWidth) {
+    // 列元素在主表体可视区右侧（包括被右冻结表部分遮挡的情况）
+    scrollLeft = tdLeft + tdWidth - bodyWidth + rightWidth
+  } else {
+    // 列元素在主表体可视区内
+    scrollLeft = bodyLeft
+  }
+
+  return scrollLeft
+}
+
 function setBodyLeft(body, td, $table, column, move) {
   const { isLeftArrow, isRightArrow, from } = move || {}
-  const bodyWidth = body.clientWidth
-  const bodySrcollLeft = body.scrollLeft
-  const tdOffsetLeft = td.offsetLeft + (td.offsetParent ? td.offsetParent.offsetLeft : 0)
-  const tdWidth = td.clientWidth
 
-  if (tdOffsetLeft < bodySrcollLeft || tdOffsetLeft > bodySrcollLeft + bodyWidth) {
-    // 如果跨列滚动
-    from !== column && (body.scrollLeft = tdOffsetLeft)
-  } else if (tdOffsetLeft + tdWidth >= bodyWidth + bodySrcollLeft) {
-    body.scrollLeft = bodySrcollLeft + tdWidth
-  }
+  body.scrollLeft = computeScrollLeft($table, td)
 
   if (from) {
     const direction = isLeftArrow ? 'left' : isRightArrow ? 'right' : null
@@ -145,7 +170,10 @@ export const colToVisible = ($table, column, move) => {
         scrollLeft += visibleColumn[index].renderWidth
       }
 
-      gridbodyEl.scrollLeft = scrollLeft
+      gridbodyEl.scrollLeft = computeScrollLeft($table, {
+        _accumulateRenderWidth: scrollLeft,
+        _renderWidth: column.renderWidth
+      })
     }
   })
 }
diff --git a/packages/renderless/src/image-viewer/vue.ts b/packages/renderless/src/image-viewer/vue.ts
index 60c9e2206..00558b202 100644
--- a/packages/renderless/src/image-viewer/vue.ts
+++ b/packages/renderless/src/image-viewer/vue.ts
@@ -180,7 +180,10 @@ const initWatch = ({ watch, state, api, props, nextTick, vm }) => {
   watch(
     () => state.index,
     (value) => {
-      api.reset()
+      if (!props.keepStyle) {
+        api.reset()
+      }
+
       props.onSwitch(value)
     },
     { immediate: true }
diff --git a/packages/renderless/src/image/index.ts b/packages/renderless/src/image/index.ts
index 9bcaf2c42..9bc12cba7 100644
--- a/packages/renderless/src/image/index.ts
+++ b/packages/renderless/src/image/index.ts
@@ -83,6 +83,12 @@ export const handleError =
     emit('error', event)
   }
 
+export const handleSwitch =
+  ({ emit }: Pick<IImageRenderlessParams, 'emit'>) =>
+  (index) => {
+    emit('change-index', index)
+  }
+
 export const handleLazyLoad =
   ({ state, api, vm, nextTick }: Pick<IImageRenderlessParams, 'api' | 'state' | 'nextTick' | 'vm'>) =>
   () => {
diff --git a/packages/renderless/src/image/vue.ts b/packages/renderless/src/image/vue.ts
index 780f4cbfb..311a6fe39 100644
--- a/packages/renderless/src/image/vue.ts
+++ b/packages/renderless/src/image/vue.ts
@@ -25,7 +25,8 @@ import {
   closeViewer,
   mounted,
   deleteHander,
-  filterImageUrl
+  filterImageUrl,
+  handleSwitch
 } from './index'
 import type { ISharedRenderlessParamHooks } from 'types/shared.type'
 import type {
@@ -46,7 +47,8 @@ export const api = [
   'closeViewer',
   'handleLoad',
   'handleError',
-  'deleteHander'
+  'deleteHander',
+  'handleSwitch'
 ]
 
 const initState = ({
@@ -101,7 +103,8 @@ const initApi = ({
     computedGetImageStyle: computedGetImageStyle({ api, props }),
     addLazyLoadListener: addLazyLoadListener({ api, props, state, vm }),
     deleteHander: deleteHander(emit),
-    filterImageUrl: filterImageUrl(props)
+    filterImageUrl: filterImageUrl(props),
+    handleSwitch: handleSwitch({ emit })
   })
 }
 
diff --git a/packages/renderless/src/input/index.ts b/packages/renderless/src/input/index.ts
index f22bfc8e5..36761376d 100644
--- a/packages/renderless/src/input/index.ts
+++ b/packages/renderless/src/input/index.ts
@@ -101,8 +101,12 @@ export const calcTextareaHeight =
     api,
     hiddenTextarea,
     props,
-    state
-  }: Pick<IInputRenderlessParams, 'api' | 'props' | 'state'> & { hiddenTextarea: HTMLTextAreaElement | null }) =>
+    state,
+    mode,
+    constants
+  }: Pick<IInputRenderlessParams, 'api' | 'props' | 'state' | 'mode' | 'constants'> & {
+    hiddenTextarea: HTMLTextAreaElement | null
+  }) =>
   (
     targetElement: HTMLTextAreaElement,
     minRows = 1,
@@ -134,6 +138,10 @@ export const calcTextareaHeight =
       height?: string
     } = {}
 
+    if (mode === 'mobile') {
+      height = Math.max(hiddenTextarea.scrollHeight, constants.TEXTAREA_HEIGHT_MOBILE)
+    }
+
     if (boxSizing === STYLE.ContentBox) {
       height = height - paddingSize
     }
diff --git a/packages/renderless/src/input/vue.ts b/packages/renderless/src/input/vue.ts
index 88b67a65e..2debff215 100644
--- a/packages/renderless/src/input/vue.ts
+++ b/packages/renderless/src/input/vue.ts
@@ -117,8 +117,8 @@ const initState = ({
     checkedLabel: '',
     enteredTextarea: false,
     sheetvalue: props.modelValue,
-    inputSize: computed(() => props.size || state.formItemSize),
-    inputSizeMf: computed(() => props.size || (parent.tinyForm || {}).size),
+    inputSize: computed(() => props.size || state.formItemSize || (parent.tinyForm || {}).size),
+    inputSizeMf: computed(() => props.size || state.formItemSize || (parent.tinyForm || {}).size),
     showClear: computed(
       () =>
         props.clearable &&
@@ -224,8 +224,13 @@ const mergeApi = ({
   nextTick,
   parent,
   state,
-  vm
-}: Pick<IInputRenderlessParams, 'api' | 'emit' | 'props' | 'state' | 'nextTick' | 'parent' | 'vm'> & {
+  vm,
+  mode,
+  constants
+}: Pick<
+  IInputRenderlessParams,
+  'api' | 'emit' | 'props' | 'state' | 'nextTick' | 'parent' | 'vm' | 'mode' | 'constants'
+> & {
   storages: ReturnType<typeof useStorageBox>
   componentName: string
   eventName: IInputEventNameConstants
@@ -258,7 +263,9 @@ const mergeApi = ({
       api,
       hiddenTextarea: null,
       props,
-      state
+      state,
+      mode,
+      constants
     }),
     setNativeInputValue: setNativeInputValue({ api, state }),
     handleCompositionEnd: handleCompositionEnd({ api, state }),
@@ -374,7 +381,7 @@ export const renderless = (
 
   parent.tinyForm = parent.tinyForm || inject('form', null)
 
-  mergeApi({ api, storages, componentName, emit, eventName, props, state, nextTick, parent, vm })
+  mergeApi({ api, storages, componentName, emit, eventName, props, state, nextTick, parent, vm, mode, constants })
 
   initWatch({ watch, state, api, props, nextTick, emit, componentName, eventName })
 
diff --git a/packages/renderless/src/numeric/index.ts b/packages/renderless/src/numeric/index.ts
index aecc9aea0..e840e6c60 100644
--- a/packages/renderless/src/numeric/index.ts
+++ b/packages/renderless/src/numeric/index.ts
@@ -46,15 +46,12 @@ export const getDecimal =
     getMiniDecimal(value, props.plugin)
 
 export const watchValue =
-  ({ api, props, state, nextTick }: Pick<INumericRenderlessParams, 'api' | 'state' | 'nextTick' | 'props'>) =>
+  ({ api, props, state }: Pick<INumericRenderlessParams, 'api' | 'state' | 'props'>) =>
   (value: number): void => {
     if (value === state.currentValue) {
       return
     }
     api.setCurrentValue(value, props.changeCompat)
-    nextTick(() => {
-      api.dispatchDisplayedValue()
-    })
   }
 
 export const toPrecision =
@@ -221,10 +218,10 @@ export const focus = (vm: INumericRenderlessParams['vm']) => (): void => {
 const getEmitValue = (
   args: INumericGetEmitValueParams
 ): { newVal: number | string | undefined; emitValue: number | string | undefined } => {
-  let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal } = args
+  let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal, emptyValue } = args
   let { max, min, api, props, format, plugin, stringMode } = args
   if (!newVal && newVal !== 0) {
-    emitValue = allowEmpty ? undefined : defaultVal
+    emitValue = allowEmpty ? emptyValue : defaultVal
   } else if (bigNew.isNaN()) {
     emitValue = oldVal
   } else {
@@ -264,7 +261,7 @@ export const setCurrentValue =
     state
   }: Pick<INumericRenderlessParams, 'api' | 'constants' | 'dispatch' | 'emit' | 'props' | 'state'>) =>
   (newVal: number, emitChangeFlag: boolean = true): void => {
-    const { max, min, allowEmpty, validateEvent, stringMode, plugin } = props
+    const { max, min, allowEmpty, validateEvent, stringMode, plugin, emptyValue } = props
     const { format } = state
     const oldVal = state.currentValue
     const bigNew = api.getDecimal(newVal)
@@ -277,7 +274,7 @@ export const setCurrentValue =
       return
     }
 
-    let args = { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal }
+    let args = { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal, emptyValue }
 
     Object.assign(args, { max, min, api, props, format, plugin, stringMode })
 
@@ -480,20 +477,6 @@ export const getUnitPrecision = ({
   return { ...defaultFmt, fraction, rounding, ...serFmt, ...format }
 }
 
-export const dispatchDisplayedValue =
-  ({ state, api, dispatch }: Pick<INumericRenderlessParams, 'state' | 'api' | 'dispatch'>) =>
-  (): void => {
-    if (state.isDisplayOnly) {
-      dispatch('FormItem', 'displayed-value-changed', { type: 'numeric', val: api.getDisplayedValue() })
-    }
-  }
-
-export const getDisplayedValue =
-  ({ state, props }: Pick<INumericRenderlessParams, 'state' | 'props'>) =>
-  (): string => {
-    return state.displayValue || state.displayValue === 0 ? state.displayValue + ' ' + (props.unit || '') : '-'
-  }
-
 export const getDisplayOnlyText =
   ({ parent, state, props }: Pick<INumericRenderlessParams, 'parent' | 'state' | 'props'>) =>
   (): string | number => {
diff --git a/packages/renderless/src/numeric/vue.ts b/packages/renderless/src/numeric/vue.ts
index 800ca0d1c..4f57826ed 100644
--- a/packages/renderless/src/numeric/vue.ts
+++ b/packages/renderless/src/numeric/vue.ts
@@ -43,8 +43,6 @@ import {
   getDecimal,
   unmounted,
   initService,
-  dispatchDisplayedValue,
-  getDisplayedValue,
   getDisplayOnlyText,
   filterValue,
   handleClear,
@@ -144,10 +142,8 @@ const initApi = ({
     handleInputChange: handleInputChange({ api, state, props }),
     mouseEvent: mouseEvent({ api, props, state }),
     handleBlur: handleBlur({ constants, dispatch, emit, props, state, api }),
-    watchValue: watchValue({ api, props, state, nextTick }),
+    watchValue: watchValue({ api, props, state }),
     setCurrentValue: setCurrentValue({ api, constants, dispatch, emit, props, state }),
-    dispatchDisplayedValue: dispatchDisplayedValue({ api, state, dispatch }),
-    getDisplayedValue: getDisplayedValue({ state, props }),
     getDisplayOnlyText: getDisplayOnlyText({ parent, props, state }),
     filterValue: filterValue({ state }),
     handleClear: handleClear({ state, emit }),
@@ -158,7 +154,6 @@ const initApi = ({
 }
 
 const initWatch = ({
-  state,
   watch,
   props,
   api
@@ -174,8 +169,6 @@ const initWatch = ({
   )
 
   watch(() => props.modelValue, api.watchValue, { immediate: true })
-
-  watch(() => state.isDisplayOnly, api.dispatchDisplayedValue)
 }
 
 export const renderless = (
@@ -190,12 +183,9 @@ export const renderless = (
   parent.tinyForm = parent.tinyForm || inject('form', null)
 
   initApi({ api, props, state, parent, vm, emit, dispatch, constants, nextTick })
-  initWatch({ state, watch, props, api })
+  initWatch({ watch, props, api })
 
-  onMounted(() => {
-    api.dispatchDisplayedValue()
-    api.mounted()
-  })
+  onMounted(api.mounted)
   onUpdated(api.updated)
   onUnmounted(api.unmounted)
 
diff --git a/packages/renderless/src/option-group/index.ts b/packages/renderless/src/option-group/index.ts
index ec3ec1afb..e5f8c56a4 100644
--- a/packages/renderless/src/option-group/index.ts
+++ b/packages/renderless/src/option-group/index.ts
@@ -13,3 +13,19 @@ export const queryChange =
       }
     }
   }
+
+export const observeCallback =
+  ({ state, api }) =>
+  (mutationsList) => {
+    for (let mutation of mutationsList) {
+      if (mutation.type === 'childList') {
+        if (state.timer) {
+          clearTimeout(state.timer)
+        }
+
+        state.timer = setTimeout(() => {
+          api.queryChange()
+        }, 100)
+      }
+    }
+  }
diff --git a/packages/renderless/src/option-group/vue.ts b/packages/renderless/src/option-group/vue.ts
index 574eb167b..7fb4060e6 100644
--- a/packages/renderless/src/option-group/vue.ts
+++ b/packages/renderless/src/option-group/vue.ts
@@ -1,19 +1,23 @@
-import { queryChange } from './index'
+import { queryChange, observeCallback } from './index'
 
 export const api = ['state', 'queryChange']
 
-export const renderless = (props, { onMounted, reactive, watch, inject }, { broadcast, vm }) => {
+export const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject }, { broadcast, vm }) => {
   const select = inject('select')
   const constants = select._constants
 
   const state = reactive({
-    visible: true
+    visible: true,
+    timer: null
   })
 
-  const api = {
+  const api = {}
+
+  Object.assign(api, {
     state,
-    queryChange: queryChange({ select, state, vm })
-  }
+    queryChange: queryChange({ select, state, vm }),
+    observeCallback: observeCallback({ state, api })
+  })
 
   watch(
     () => props.disabled,
@@ -24,6 +28,16 @@ export const renderless = (props, { onMounted, reactive, watch, inject }, { broa
   )
 
   onMounted(() => {
+    if (select.filterable) {
+      const config = { attributes: false, childList: true, subtree: false }
+      api.observer = new MutationObserver(api.observeCallback)
+
+      // tiny新增，解决多端模式下报错问题
+      if (vm.$refs.selectGroup) {
+        api.observer.observe(vm.$refs.selectGroup, config)
+      }
+    }
+
     if (props.disabled) {
       broadcast(constants.COMPONENT_NAME.Option, constants.EVENT_NAME.handleGroupDisabled, props.disabled)
     }
@@ -31,5 +45,9 @@ export const renderless = (props, { onMounted, reactive, watch, inject }, { broa
     select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api.queryChange)
   })
 
+  onBeforeUnmount(() => {
+    api.observer && api.observer.disconnect()
+  })
+
   return api
 }
diff --git a/packages/renderless/src/picker/index.ts b/packages/renderless/src/picker/index.ts
index 5d834dfd5..f63da9c64 100644
--- a/packages/renderless/src/picker/index.ts
+++ b/packages/renderless/src/picker/index.ts
@@ -52,12 +52,14 @@ export const getPanel =
   }
 
 export const watchMobileVisible =
-  ({ api, props, state }) =>
+  ({ api, props, state, nextTick }) =>
   ([dateMobileVisible, timeMobileVisible]) => {
     if (dateMobileVisible || timeMobileVisible) {
       state.valueOnOpen = Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue
     } else {
-      api.emitChange(props.modelValue)
+      nextTick(() => {
+        api.emitChange(props.modelValue)
+      })
     }
   }
 
@@ -72,8 +74,9 @@ export const watchPickerVisible =
       state.valueOnOpen = Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue
     } else {
       api.hidePicker()
-      // tiny 新增： 解决vue3下，modelValue的值仍是旧值，误认为值不变，不触发change事件了。
-      nextTick(() => api.emitChange(props.modelValue))
+      nextTick(() => {
+        api.emitChange(props.modelValue)
+      })
       state.userInput = null
 
       if (props.validateEvent) {
@@ -197,7 +200,9 @@ export const parsedValue =
             return isDate(item) ? formatDate(item, state.valueFormat, t) : item
           })
         } else {
-          date = formatDate(date, state.valueFormat, t)
+          if (state.valueFormat !== DATEPICKER.TimesTamp) {
+            date = formatDate(date, state.valueFormat, t)
+          }
         }
       }
       const result = api.parseAsFormatAndType(date, state.valueFormat, state.type, props.rangeSeparator)
diff --git a/packages/renderless/src/picker/vue.ts b/packages/renderless/src/picker/vue.ts
index ef274e9d2..bc51df338 100644
--- a/packages/renderless/src/picker/vue.ts
+++ b/packages/renderless/src/picker/vue.ts
@@ -213,7 +213,7 @@ const initApi = ({ api, props, hooks, state, vnode, others, utils, parent }) =>
     displayValue: displayValue({ api, props, state }),
     handlePick: handlePick({ api, state }),
     watchPickerVisible: watchPickerVisible({ api, vm, dispatch, emit, props, state, nextTick }),
-    watchMobileVisible: watchMobileVisible({ api, props, state }),
+    watchMobileVisible: watchMobileVisible({ api, props, state, nextTick }),
     formatToString: formatToString({ api, state }),
     watchIsRange: watchIsRange({ api, state, TimePanel, TimeRangePanel }),
     mountPicker: mountPicker({ api, vm, props, state, updatePopper }),
@@ -222,7 +222,7 @@ const initApi = ({ api, props, hooks, state, vnode, others, utils, parent }) =>
     computedTriggerClass: computedTriggerClass({ props, state }),
     computedHaveTrigger: computedHaveTrigger({ props }),
     setInputPaddingLeft: setInputPaddingLeft({ props, state, vm, nextTick }),
-    formatInputValue: formatInputValue({ props, state, api })
+    formatInputValue: formatInputValue({ props, state })
   })
 
   initApi2({ api, props, state, t, parent })
diff --git a/packages/renderless/src/popconfirm/index.ts b/packages/renderless/src/popconfirm/index.ts
index f663230c7..170116cc1 100644
--- a/packages/renderless/src/popconfirm/index.ts
+++ b/packages/renderless/src/popconfirm/index.ts
@@ -39,3 +39,11 @@ export const handleEmit =
       emit(type, state)
     }
   }
+
+export const handleDocumentClick =
+  ({ vm, api }: Pick<IPopconfirmRenderlessParams, 'api' | 'vm'>) =>
+  (event) => {
+    if (vm.$refs.popover.handleDocumentClick(event)) {
+      api.hide()
+    }
+  }
diff --git a/packages/renderless/src/popconfirm/vue.ts b/packages/renderless/src/popconfirm/vue.ts
index 6e8e1ade3..af890fcb0 100644
--- a/packages/renderless/src/popconfirm/vue.ts
+++ b/packages/renderless/src/popconfirm/vue.ts
@@ -4,13 +4,14 @@ import type {
   IPopconfirmRenderlessParamUtils,
   ISharedRenderlessParamHooks
 } from '@/types'
-import { show, hide, confirm, handleEmit } from './index'
+import { on, off } from '../common/deps/dom'
+import { show, hide, confirm, handleEmit, handleDocumentClick } from './index'
 
 export const api = ['state', 'show', 'hide', 'confirm', 'handleEmit']
 
 export const renderless = (
   props: IPopconfirmProps,
-  { computed, reactive }: ISharedRenderlessParamHooks,
+  { computed, reactive, onMounted, onBeforeUnmount }: ISharedRenderlessParamHooks,
   { emit, constants, designConfig, vm }: IPopconfirmRenderlessParamUtils
 ): IPopconfirmApi => {
   const api = {} as IPopconfirmApi
@@ -28,7 +29,15 @@ export const renderless = (
     show: show({ state, emit, props }),
     hide: hide({ state, emit }),
     confirm: confirm({ state, api }),
-    handleEmit: handleEmit({ state, emit, vm })
+    handleEmit: handleEmit({ state, emit, vm }),
+    handleDocumentClick: handleDocumentClick({ api, vm })
+  })
+
+  onMounted(() => {
+    props.closeOnClickOutside && on(document, 'click', api.handleDocumentClick)
+  })
+  onBeforeUnmount(() => {
+    props.closeOnClickOutside && off(document, 'click', api.handleDocumentClick)
   })
 
   return api
diff --git a/packages/renderless/src/popover/index.ts b/packages/renderless/src/popover/index.ts
index 5b0584dc1..a242e940a 100644
--- a/packages/renderless/src/popover/index.ts
+++ b/packages/renderless/src/popover/index.ts
@@ -196,7 +196,10 @@ export const handleDocumentClick =
       !popperElm ||
       popperElm.contains(target)
     ) {
-      return
+      return false
+    } else {
+      state.showPopper = false
+      return true
     }
 
     state.showPopper = false
diff --git a/packages/renderless/src/popover/vue.ts b/packages/renderless/src/popover/vue.ts
index 31a04ae49..560d9d2a3 100644
--- a/packages/renderless/src/popover/vue.ts
+++ b/packages/renderless/src/popover/vue.ts
@@ -43,7 +43,8 @@ export const api = [
   'doShow',
   'doClose',
   'doDestroy',
-  'handleItemClick'
+  'handleItemClick',
+  'handleDocumentClick'
 ]
 
 const initState = ({
diff --git a/packages/renderless/src/select/index.ts b/packages/renderless/src/select/index.ts
index c5b90c4b2..0d42475ff 100644
--- a/packages/renderless/src/select/index.ts
+++ b/packages/renderless/src/select/index.ts
@@ -244,7 +244,9 @@ export const emitChange =
       if (constants.TYPE.Tree === flag) {
         const recurNode = (node) => {
           val === node[props.valueField] && items.push(node)
-          val !== node[props.valueField] && Array.isArray(node.children) && node.children.forEach(recurNode)
+          val !== node[props.valueField] &&
+            Array.isArray(node[state.childrenName]) &&
+            node[state.childrenName].forEach(recurNode)
         }
 
         arr.forEach(recurNode)
@@ -572,7 +574,7 @@ export const blur =
   }
 
 export const handleBlur =
-  ({ constants, dispatch, emit, state }) =>
+  ({ constants, dispatch, emit, state, designConfig }) =>
   (event) => {
     clearTimeout(state.timer)
     state.timer = setTimeout(() => {
@@ -581,9 +583,14 @@ export const handleBlur =
       } else {
         emit('blur', event)
       }
+      if (designConfig?.state?.delayBlur) {
+        dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event.target.value)
+      }
     }, 200)
     // tiny 新增： 表单校验不能异步，否则弹窗中嵌套表单会出现弹窗关闭后再出现校验提示的bug
-    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event.target.value)
+    if (!designConfig?.state?.delayBlur) {
+      dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event.target.value)
+    }
 
     state.softFocus = false
   }
@@ -593,7 +600,10 @@ export const handleClearClick = (api) => (event) => {
 }
 
 export const doDestroy = (vm) => () => {
-  vm.$refs.popper && vm.$refs.popper.doDestroy()
+  // 解决在特殊场景（表格使用select编辑器），选中下拉数据的一瞬间select组件被销毁时控制台报错的问题
+  if (vm?.$refs?.popper) {
+    vm.$refs.popper.doDestroy()
+  }
 }
 
 export const handleClose = (state) => () => {
@@ -686,19 +696,21 @@ export const resetInputHeight =
 
       let input = vm.$refs.reference.type === 'text' && vm.$refs.reference.$el.querySelector('input')
       const tags = vm.$refs.tags
+      const limitText = vm.$refs.reference.$el.querySelector('span.tiny-select__limit-txt')
 
       if (!input) {
         return
       }
 
-      if (!state.isDisplayOnly && props.hoverExpand && !props.disabled) {
+      if (!state.isDisplayOnly && (props.hoverExpand || props.clickExpand) && !props.disabled) {
         api.calcCollapseTags()
       }
 
-      const sizeInMap = state.initialInputHeight || (state.isSaaSTheme ? 28 : 30)
+      const sizeInMap =
+        designConfig?.state.initialInputHeight || state.initialInputHeight || (state.isSaaSTheme ? 28 : 30)
       const noSelected = state.selected.length === 0
-      // tiny 新增的spacing (design中配置：aui为4，smb为0，tiny 默认为2)
-      const spacingHeight = designConfig ? designConfig.state?.spacingHeight : 2
+      // tiny 新增的spacing (design中配置：aui为4，smb为0，tiny 默认为0)
+      const spacingHeight = designConfig ? designConfig.state?.spacingHeight : constants.SPACING_HEIGHT
 
       if (!state.isDisplayOnly) {
         if (!noSelected && tags) {
@@ -716,6 +728,14 @@ export const resetInputHeight =
         input.style.height = 'auto'
       }
 
+      // tags给字数限制
+      if (limitText && props.multipleLimit) {
+        const { width, marginLeft, marginRight } = getComputedStyle(limitText)
+        vm.$refs.tags.style.paddingRight = `${Math.ceil(
+          parseFloat(width) + parseFloat(marginLeft) + parseFloat(marginRight)
+        )}px`
+      }
+
       if (state.visible && state.emptyText !== false) {
         state.selectEmitter.emit(constants.EVENT_NAME.updatePopper, true)
       }
@@ -1532,7 +1552,9 @@ export const queryVisibleOptions =
     if (props.optimization) {
       return optmzApis.queryVisibleOptions(vm, isMobileFirstMode)
     } else {
-      return Array.from(vm.$refs.scrollbar?.$el.querySelectorAll('[data-index]:not([style*="display: none"])') || [])
+      return vm.$refs.scrollbar
+        ? Array.from(vm.$refs.scrollbar.$el.querySelectorAll('[data-index]:not([style*="display: none"])'))
+        : []
     }
   }
 
@@ -1616,15 +1638,15 @@ export const radioChange =
     api.directEmitChange(row)
   }
 
-export const getTreeData = (props) => (data) => {
+export const getTreeData = (props, state) => (data) => {
   const nodes = []
   const getChild = (data, pId) => {
     data.forEach((node) => {
       node.pId = pId
       nodes.push(node)
 
-      if (node.children && node.children.length > 0) {
-        getChild(node.children, node[props.valueField])
+      if (node[state.childrenName] && node[state.childrenName].length > 0) {
+        getChild(node[state.childrenName], node[props.valueField])
       }
     })
   }
@@ -1842,16 +1864,16 @@ export const handleEnterTag =
   }
 
 export const calcCollapseTags =
-  ({ state, vm }) =>
+  ({ state, vm, props }) =>
   () => {
-    if (state.inputHovering) {
+    if (state.inputHovering && !props.clickExpand) {
       return (state.isHidden = true)
     }
 
     const tags = vm.$refs.tags
     const collapseTag = tags && tags.querySelector('[data-tag="tags-collapse"]')
 
-    if (!tags || !collapseTag) {
+    if (!collapseTag || !tags) {
       return
     }
 
@@ -1863,21 +1885,45 @@ export const calcCollapseTags =
 
     const tagList = Array.from(tags.querySelectorAll('[data-tag="tiny-tag"]'))
 
-    let { total, dom, idx } = { total: collapseTagWidth, dom: null, idx: 0 }
-    tagList.forEach((tag, index) => {
-      if (tag !== collapseTag) {
-        const { width: tagContentWidth, marginRight } = tag && window.getComputedStyle(tag)
-        total += parseFloat(tagContentWidth) + parseFloat(marginRight)
-      }
-      if (tag !== collapseTag && total > tagsWidth && !dom) {
-        dom = tag
-        idx = index
-      }
-    })
+    let [dom, idx, currentRowWidth, currentTagIndex] = [null, 0, 0, 0]
 
-    let isOneLine = total - collapseTagWidth <= tagsWidth // 单行不展示计数
+    for (let rowNum = 0; rowNum < props.maxVisibleRows; rowNum++) {
+      currentRowWidth = 0
+      let currentTagWidth = 0
+      for (currentTagIndex; currentTagIndex < tagList.length; currentTagIndex++) {
+        const tag = tagList[currentTagIndex]
+        if (tag !== collapseTag) {
+          const { width: tagContentWidth, marginRight, marginLeft } = tag && window.getComputedStyle(tag)
+          currentTagWidth = parseFloat(tagContentWidth) + parseFloat(marginRight) + parseFloat(marginLeft)
+          currentRowWidth += currentTagWidth
+        }
 
-    if (isOneLine) {
+        // 找到第一个超出隐藏的tag
+        if (tag !== collapseTag && currentRowWidth > tagsWidth) {
+          if (!dom && rowNum === props.maxVisibleRows - 1) {
+            // 判断当前行能否显示折叠tag
+            if (currentRowWidth - currentTagWidth + collapseTagWidth < tagsWidth) {
+              dom = tag
+              idx = currentTagIndex
+            } else {
+              dom = tagList[currentTagIndex - 1]
+              idx = currentTagIndex - 1
+            }
+          }
+
+          break
+        }
+      }
+
+      if (currentTagIndex === tagList.length - 1) {
+        break
+      }
+    }
+
+    // 未超出最大显示行数
+    if (idx === 0) {
+      state.exceedMaxVisibleRow = false
+      state.showCollapseTag = false
       return (state.isHidden = true)
     }
 
@@ -1887,8 +1933,9 @@ export const calcCollapseTags =
     } else {
       state.isHidden = true
     }
-
     state.collapseTagsLength = tagList.length - idx
+    state.exceedMaxVisibleRow = true
+    state.toHideIndex = idx
   }
 
 export const watchInputHover =
@@ -2104,14 +2151,33 @@ export const getLabelSlotValue =
   }
 
 export const computedTagsStyle =
-  ({ props, parent, state }) =>
+  ({ props, parent, state, vm }) =>
   () => {
     const isReadonly = props.disabled || (parent.form || {}).disabled || props.displayOnly
-
-    return {
+    let tagsStyle = {
       'max-width': isReadonly ? '' : state.inputWidth - state.inputPaddingRight + 'px',
       width: '100%'
     }
+
+    // 当前全部所选项显示
+    if ((props.clickExpand && !state.exceedMaxVisibleRow) || state.visible) {
+      Object.assign(tagsStyle, { height: 'auto' })
+    }
+
+    if (props.clickExpand && state.exceedMaxVisibleRow && !state.showCollapseTag) {
+      const tags = vm.$refs.tags
+      const { paddingTop: tagsPaddingTop, paddingBottom: tagsPaddingBottom } = window.getComputedStyle(tags)
+      const tagsPaddingVertical = parseFloat(tagsPaddingTop) + parseFloat(tagsPaddingBottom)
+      const tag = tags?.querySelector('[data-tag="tiny-tag"]')
+      if (tag) {
+        const { height: tagHeight, marginTop, marginBottom } = window.getComputedStyle(tag)
+        const rowHeight =
+          (parseFloat(tagHeight) + parseFloat(marginTop) + parseFloat(marginBottom)) * props.maxVisibleRows
+        Object.assign(tagsStyle, { 'height': `${rowHeight + tagsPaddingVertical}px` })
+      }
+    }
+
+    return tagsStyle
   }
 
 export const computedReadonly =
@@ -2164,6 +2230,14 @@ export const computedSelectDisabled =
   () =>
     props.disabled || (parent.form || {}).disabled || props.displayOnly || (parent.form || {}).displayOnly
 
+export const computedIsExpand =
+  ({ props, state }) =>
+  () => {
+    const hoverExpanded = (state.selectHover || state.visible) && props.hoverExpand && !props.disabled
+    const clickExpanded = props.clickExpand && state.exceedMaxVisibleRow && state.showCollapseTag
+    return hoverExpanded || clickExpanded
+  }
+
 export const computedIsExpandAll = (props) => () => {
   const { defaultExpandAll, lazy } = props.treeOp
   return !lazy && defaultExpandAll !== false
@@ -2174,10 +2248,10 @@ export const loadTreeData =
   ({ data = [], init = false }) => {
     const getTreeDatas = (datas, newDatas = []) => {
       datas.forEach(({ data, childNodes }) => {
-        let temData = { ...data, children: [] }
+        let temData = { ...data, [state.childrenName]: [] }
 
         if (childNodes && childNodes.length) {
-          getTreeDatas(childNodes, temData.children)
+          getTreeDatas(childNodes, temData[state.childrenName])
         }
 
         newDatas.push(temData)
@@ -2270,3 +2344,20 @@ export const clearNoMatchValue =
       emit('update:modelValue', newModelValue)
     }
   }
+
+// 解决无界时，event.target 会变为 wujie_iframe的元素的bug
+export const handleDebouncedQueryChange = ({ state, api }) =>
+  debounce(state.debounce, (value) => {
+    api.handleQueryChange(value)
+  })
+
+export const onClickCollapseTag =
+  ({ state, props, nextTick, api }) =>
+  (event: MouseEvent) => {
+    event.stopPropagation()
+    if (props.clickExpand && !props.disabled && !state.isDisplayOnly) {
+      state.showCollapseTag = !state.showCollapseTag
+
+      nextTick(api.resetInputHeight)
+    }
+  }
diff --git a/packages/renderless/src/select/vue.ts b/packages/renderless/src/select/vue.ts
index 28237caa4..51a5ed8cc 100644
--- a/packages/renderless/src/select/vue.ts
+++ b/packages/renderless/src/select/vue.ts
@@ -103,7 +103,10 @@ import {
   computedGetIcon,
   computedGetTagType,
   clearSearchText,
-  clearNoMatchValue
+  clearNoMatchValue,
+  handleDebouncedQueryChange,
+  onClickCollapseTag,
+  computedIsExpand
 } from './index'
 import debounce from '../common/deps/debounce'
 import { isNumber } from '../common/type'
@@ -166,7 +169,8 @@ export const api = [
   'getLabelSlotValue',
   'loadTreeData',
   'updateModelValue',
-  'clearSearchText'
+  'clearSearchText',
+  'onClickCollapseTag'
 ]
 
 const initState = ({ reactive, computed, props, api, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
@@ -201,7 +205,7 @@ const initState = ({ reactive, computed, props, api, emitter, parent, constants,
     collapseTags: computed(() => api.computeCollapseTags()),
     multipleLimit: computed(() => api.computeMultipleLimit()),
     disabledTooltipContent: computed(() => api.computedDisabledTooltipContent()),
-    isExpand: computed(() => (state.selectHover || state.visible) && props.hoverExpand && !props.disabled),
+    isExpand: computed(() => api.computedIsExpand()),
     collapseTagsLength: 0,
     initValue: [],
     key: 0,
@@ -286,10 +290,14 @@ const initStateAdd = ({ computed, props, api, parent }) => {
     gridCheckedData: computed(() => api.getcheckedData()),
     isExpandAll: computed(() => api.computedIsExpandAll()),
     searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
+    childrenName: computed(() => (props.treeOp.props && props.treeOp.props.children) || 'children'),
     tooltipContent: {},
     isHidden: false,
     defaultCheckedKeys: [],
-    optionIndexArr: []
+    optionIndexArr: [],
+    showCollapseTag: false,
+    exceedMaxVisibleRow: false, // 是否超出默认最大显示行数
+    toHideIndex: Infinity // 第一个超出被隐藏的索引
   }
 }
 
@@ -312,7 +320,7 @@ const initApi = ({
     state,
     maskState,
     doDestroy: doDestroy(vm),
-    getTreeData: getTreeData(props),
+    getTreeData: getTreeData(props, state),
     blur: blur({ vm, state }),
     focus: focus({ vm, state }),
     getValueKey: getValueKey(props),
@@ -343,7 +351,7 @@ const initApi = ({
     setOptionHighlight: setOptionHighlight(state),
     nodeExpand: nodeExpand({ state, constants, nextTick }),
     nodeCollapse: nodeCollapse({ state, constants, nextTick }),
-    handleBlur: handleBlur({ constants, dispatch, emit, state }),
+    handleBlur: handleBlur({ constants, dispatch, emit, state, designConfig }),
     toggleLastOptionHitState: toggleLastOptionHitState({ state }),
     emptyText: emptyText({ I18N: constants.I18N, props, state, t, isMobileFirstMode }),
     emptyFlag: emptyFlag({ props, state }),
@@ -364,7 +372,7 @@ const initApi = ({
     watchInputHover: watchInputHover({ vm }),
     initQuery: initQuery({ props, state, constants, vm }),
     updateModelValue: updateModelValue({ props, emit, state }),
-    computedTagsStyle: computedTagsStyle({ props, parent, state }),
+    computedTagsStyle: computedTagsStyle({ props, parent, state, vm }),
     computedReadonly: computedReadonly({ props, state }),
     computedShowClose: computedShowClose({ props, state }),
     computedCollapseTagSize: computedCollapseTagSize(state),
@@ -374,6 +382,7 @@ const initApi = ({
     computedDisabledTooltipContent: computedDisabledTooltipContent(state),
 
     computedSelectDisabled: computedSelectDisabled({ props, parent }),
+    computedIsExpand: computedIsExpand({ props, state }),
     computedIsExpandAll: computedIsExpandAll(props),
     watchInitValue: watchInitValue({ props, emit }),
     watchShowClose: watchShowClose({ nextTick, state, parent }),
@@ -425,9 +434,12 @@ const addApi = ({
     handleOptionSelect: handleOptionSelect({ api, nextTick, props, vm, state }),
     getPluginOption: getPluginOption({ api, props, state }),
     toggleCheckAll: toggleCheckAll({ api, emit, state, props }),
-    debouncedQueryChange: debounce(state.debounce, (event) => {
-      api.handleQueryChange(props.shape ? event : event.target.value, false, true)
-    }),
+    handleDebouncedQueryChange: handleDebouncedQueryChange({ state, api }),
+    debouncedQueryChange: (event) => {
+      // 解决无界下的异常
+      const value = props.shape ? event : event.target.value
+      api.handleDebouncedQueryChange(value)
+    },
     debouncedOnInputChange: debounce(state.debounce, () => {
       api.onInputChange()
     }),
@@ -439,10 +451,11 @@ const addApi = ({
     watchOptimizeOpts: watchOptimizeOpts({ props, state }),
     handleDropdownClick: handleDropdownClick({ props, vm, state, emit }),
     handleEnterTag: handleEnterTag({ state }),
-    calcCollapseTags: calcCollapseTags({ state, vm }),
+    calcCollapseTags: calcCollapseTags({ state, vm, props }),
     initValue: initValue({ state }),
     getLabelSlotValue: getLabelSlotValue({ props, state }),
-    loadTreeData: loadTreeData({ state, vm, props, api })
+    loadTreeData: loadTreeData({ state, vm, props, api }),
+    onClickCollapseTag: onClickCollapseTag({ state, props, nextTick, api })
   })
 }
 
diff --git a/packages/renderless/src/skeleton-item/vue.ts b/packages/renderless/src/skeleton-item/vue.ts
index 9c2bbe72d..a3271c0f5 100644
--- a/packages/renderless/src/skeleton-item/vue.ts
+++ b/packages/renderless/src/skeleton-item/vue.ts
@@ -4,7 +4,7 @@ export const api = ['state']
 
 export const renderless = (props: ISkeletonItemProps, { reactive, inject }: ISharedRenderlessParamHooks) => {
   const state: ISkeletonItemState = reactive({
-    isActive: inject('active', false)
+    isActive: inject('animated', false)
   })
 
   const api: ISkeletonItemApi = {
diff --git a/packages/renderless/src/skeleton/vue.ts b/packages/renderless/src/skeleton/vue.ts
index 75c964f55..529cd2be2 100644
--- a/packages/renderless/src/skeleton/vue.ts
+++ b/packages/renderless/src/skeleton/vue.ts
@@ -4,8 +4,8 @@ import { toPxStyle } from './index'
 export const api = ['toPxStyle']
 
 export const renderless = (props: ISkeletonProps, { toRefs, provide }: ISharedRenderlessParamHooks): ISkeletonApi => {
-  const { active } = toRefs(props)
-  provide('active', active)
+  const { animated } = toRefs(props)
+  provide('animated', animated)
 
   const api = {
     toPxStyle
diff --git a/packages/renderless/src/slide-bar/index.ts b/packages/renderless/src/slide-bar/index.ts
deleted file mode 100644
index 6a65f3bfb..000000000
--- a/packages/renderless/src/slide-bar/index.ts
+++ /dev/null
@@ -1,99 +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 { emitEvent } from '../common/event'
-
-export const leftClick =
-  ({ api, props, vm, state }) =>
-  () => {
-    if (state.leftLength >= 0) {
-      return
-    }
-
-    state.leftLength = state.leftLength + (state.blockWidth + state.blockMargin) * props.wheelBlocks
-    vm.$refs.insider.style.left = state.leftLength + 'px'
-
-    api.changeState()
-  }
-
-export const rightClick =
-  ({ api, props, vm, state }) =>
-  () => {
-    if (state.blockWrapper < Math.abs(state.leftLength) + state.wrapperWidth) {
-      return
-    }
-
-    state.leftLength = state.leftLength - (state.blockWidth + state.blockMargin) * props.wheelBlocks
-    vm.$refs.insider.style.left = state.leftLength + 'px'
-
-    api.changeState()
-  }
-
-export const blockClick =
-  ({ emit, state }) =>
-  ({ item, index }) => {
-    if (!emitEvent(emit, 'before-click')) {
-      return
-    }
-
-    state.currentIndex = index
-
-    emit('click', item, index)
-  }
-
-export const changeState =
-  ({ state }) =>
-  () => {
-    const contentWidth = state.blockWrapper
-
-    state.showLeft = !(parseInt(state.leftLength, 10) >= 0)
-    state.showRight = contentWidth <= Math.abs(state.leftLength) + state.wrapperWidth
-  }
-
-export const mouseEvent =
-  ({ api, state }) =>
-  (e) => {
-    if (e.wheelDelta >= 0) {
-      if (state.leftLength < 0) {
-        api.leftClick()
-      }
-    } else {
-      if (state.blockWrapper > Math.abs(state.leftLength) + state.wrapperWidth) {
-        api.rightClick()
-      }
-    }
-  }
-
-export const changeSize =
-  ({ props, state, vm }) =>
-  () => {
-    state.wrapperWidth = vm.$refs.wrapper.offsetWidth
-    state.blockWidth = parseInt(((1 - (props.initBlocks - 1) * 0.02) / props.initBlocks) * state.wrapperWidth, 10)
-    state.blockMargin = parseInt(state.wrapperWidth * 0.02, 10)
-    state.blockWrapper = props.modelValue.length * state.blockWidth + (props.modelValue.length - 1) * state.blockMargin
-  }
-
-export const swipeleft =
-  ({ api, state }) =>
-  () => {
-    if (state.blockWrapper > Math.abs(state.leftLength) + state.wrapperWidth) {
-      api.rightClick()
-    }
-  }
-
-export const swiperight =
-  ({ api, state }) =>
-  () => {
-    if (state.leftLength < 0) {
-      api.leftClick()
-    }
-  }
diff --git a/packages/renderless/src/slide-bar/vue.ts b/packages/renderless/src/slide-bar/vue.ts
deleted file mode 100644
index 0daa074d2..000000000
--- a/packages/renderless/src/slide-bar/vue.ts
+++ /dev/null
@@ -1,44 +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 { leftClick, rightClick, blockClick, changeState, changeSize, mouseEvent } from './index'
-
-export const api = ['state', 'mouseEvent', 'rightClick', 'leftClick', 'blockClick']
-
-export const renderless = (props, { onMounted, reactive }, { vm, parent, emit }) => {
-  const api = {}
-  const state = reactive({
-    leftLength: 0,
-    blockWidth: 0,
-    blockMargin: 0,
-    showLeft: false,
-    showRight: false,
-    blockWrapper: 0,
-    wrapperWidth: 0,
-    currentIndex: -1,
-    offsetWidth: 0
-  })
-
-  Object.assign(api, {
-    state,
-    blockClick: blockClick({ emit, state }),
-    changeState: changeState({ props, state }),
-    changeSize: changeSize({ props, vm, state }),
-    leftClick: leftClick({ api, props, vm, state }),
-    mouseEvent: mouseEvent({ api, props, vm, state }),
-    rightClick: rightClick({ api, parent, props, vm, state })
-  })
-
-  onMounted(api.changeSize)
-
-  return api
-}
diff --git a/packages/renderless/src/tabs/index.ts b/packages/renderless/src/tabs/index.ts
index f8fc7d2e9..caa9d221c 100644
--- a/packages/renderless/src/tabs/index.ts
+++ b/packages/renderless/src/tabs/index.ts
@@ -23,10 +23,24 @@ export const calcPaneInstances =
 
     /* istanbul ignore if */
     if (tabItemVNodes) {
+      // 差异性需要特别处理：用来确定tab-item的顺序，防止vue3的currentPanes中vm顺序报错
+      const orderPanes = []
+      tabItemVNodes().forEach((vnode) => {
+        if (Array.isArray(vnode.children)) {
+          vnode.children.forEach((child) => {
+            orderPanes.push(child.props?.name)
+          })
+        } else {
+          orderPanes.push(vnode.props?.name)
+        }
+      })
       const currentPanes = [] as ITabsPaneVm[]
 
       childrenHandler(({ vm, isLevel1 }) => {
-        isLevel1 && vm.$options.componentName === constants.TAB_ITEM && currentPanes.push(vm)
+        if (isLevel1 && vm.$options.componentName === constants.TAB_ITEM) {
+          const index = orderPanes.findIndex((name) => name === vm.name)
+          index > -1 ? (currentPanes[index] = vm) : currentPanes.push(vm)
+        }
       })
 
       const currentPaneStates = currentPanes.map((pane) => pane.state)
diff --git a/packages/renderless/src/tall-storage/index.ts b/packages/renderless/src/tall-storage/index.ts
index fd6480e69..22e05a70b 100644
--- a/packages/renderless/src/tall-storage/index.ts
+++ b/packages/renderless/src/tall-storage/index.ts
@@ -118,7 +118,8 @@ const setLocalStorageage = (name, value, memorySpace = 5) => {
       oldArray = sortDeduplication(oldArray, memorySpace)
       newValue = JSON.stringify(oldArray)
     } else if (oldValue === null || oldValue === value) {
-      newValue = value
+      // tiny 新增：防止第一次时，存入字符串
+      newValue = JSON.stringify([value])
     } else {
       newValue = JSON.stringify([value, oldValue])
     }
diff --git a/packages/renderless/src/time-picker-mobile/index.ts b/packages/renderless/src/time-picker-mobile/index.ts
index 33eeb36a2..34158d87c 100644
--- a/packages/renderless/src/time-picker-mobile/index.ts
+++ b/packages/renderless/src/time-picker-mobile/index.ts
@@ -11,7 +11,7 @@ export const watchModelValue =
     if (!showSeconds && modelValue.length === 3) {
       state.seconds = modelValue[2]
     }
-    state.dateArr = modelValue ? modelValue.slice(0, num) : []
+    state.dateArr = modelValue && state.dateArr.toString() !== 'NaN,NaN,NaN' ? modelValue.slice(0, num) : []
   }
 
 export const watchVisible =
@@ -39,6 +39,18 @@ export const confirm =
     emit('confirm', state.value)
   }
 
+export const clear =
+  ({ state, emit, api, vm, dispatch }) =>
+  ($event) => {
+    state.dateArr = []
+
+    vm.$refs.cascaderSelect.clear(state.dateArr)
+    emit('update:modelValue', state.dateArr)
+    emit('clear', state.dateArr)
+    dispatch('Picker', 'handle-clear', $event)
+    api.updateVisible(false)
+  }
+
 export const getTimePeriod =
   ({ state, props }) =>
   (unit, length) => {
diff --git a/packages/renderless/src/time-picker-mobile/vue.ts b/packages/renderless/src/time-picker-mobile/vue.ts
index e8df41501..c7deae2b1 100644
--- a/packages/renderless/src/time-picker-mobile/vue.ts
+++ b/packages/renderless/src/time-picker-mobile/vue.ts
@@ -5,12 +5,13 @@ import {
   confirm,
   updateVisible,
   getTimePeriod,
-  computedOptions
+  computedOptions,
+  clear
 } from './index'
 
-export const api = ['state', 'confirm', 'updateVisible']
+export const api = ['state', 'confirm', 'updateVisible', 'clear']
 
-export const renderless = (props, { reactive, watch, computed }, { emit }) => {
+export const renderless = (props, { reactive, watch, computed }, { emit, vm, dispatch }) => {
   const api = {}
   const state = reactive({
     visible: false,
@@ -27,6 +28,7 @@ export const renderless = (props, { reactive, watch, computed }, { emit }) => {
     watchModelValue: watchModelValue({ props, state }),
     watchVisible: watchVisible({ api, state }),
     confirm: confirm({ emit, state }),
+    clear: clear({ state, emit, api, vm, dispatch }),
     updateVisible: updateVisible({ emit, state }),
     getTimePeriod: getTimePeriod({ state, props }),
     computedOptions: computedOptions({ state, api, props }),
diff --git a/packages/renderless/src/time-spinner/index.ts b/packages/renderless/src/time-spinner/index.ts
index bd64744c6..091624e1f 100644
--- a/packages/renderless/src/time-spinner/index.ts
+++ b/packages/renderless/src/time-spinner/index.ts
@@ -116,10 +116,66 @@ export const handleScroll =
     const limitVal = { hours: 23, minutes: 59, seconds: 59 }
     Object.keys(limitVal).forEach((key) => (limitVal[key] = Math.floor(limitVal[key] / step) * step))
 
-    value = Math.min(value * step, limitVal[type])
+    value = api.selectDateScroll(type, Math.min(value * step, limitVal[type]))
 
     api.modifyDateField(type, value)
   }
+export const selectDateScroll =
+  ({ state, props }) =>
+  (type, value) => {
+    if (Object.keys(props.endDate).length !== 0) {
+      // 选择时间范围开始时间滚动逻辑
+      const endHours = props.endDate.getHours()
+      const endMinutes = props.endDate.getMinutes()
+      const endSeconds = props.endDate.getSeconds()
+      if (type === 'hours') {
+        value = value > endHours ? state.hours : value
+      } else if (type === 'minutes') {
+        value = state.hours === endHours && value > endMinutes ? state.minutes : value
+      } else {
+        value = state.hours === endHours && state.minutes === endMinutes && value > endSeconds ? state.seconds : value
+      }
+    } else if (Object.keys(props.startDate).length !== 0) {
+      // 选择时间范围结束时间滚动逻辑
+      const startHours = props.startDate.getHours()
+      const startMinutes = props.startDate.getMinutes()
+      const startSeconds = props.startDate.getSeconds()
+      if (type === 'hours') {
+        value = value < startHours ? state.hours : value
+      } else if (type === 'minutes') {
+        value = state.hours === startHours && value < startMinutes ? state.minutes : value
+      } else {
+        value =
+          state.hours === startHours && state.minutes === startMinutes && value < startSeconds ? state.seconds : value
+      }
+    } else if (state.selectableRange.length > 0) {
+      // 固定时间范围滚动逻辑
+      const [startRange, endRange] = state.selectableRange[0]
+      const startRangeHours = startRange.getHours()
+      const endRangeHours = endRange.getHours()
+      const startRangeMinutes = startRange.getMinutes()
+      const endRangeMinutes = endRange.getMinutes()
+      const startRangeSeconds = startRange.getSeconds()
+      const endRangeSeconds = endRange.getSeconds()
+      if (type === 'hours') {
+        value = value < startRangeHours || value > endRangeHours ? state.hours : value
+      } else if (type === 'minutes') {
+        if (state.hours === startRangeHours) {
+          value = value < startRangeMinutes ? startRangeMinutes : value
+        } else if (state.hours === endRangeHours) {
+          value = value > endRangeMinutes ? endRangeMinutes : value
+        }
+      } else {
+        if (state.hours === startRangeHours && state.minutes === startRangeMinutes) {
+          value = value < startRangeSeconds ? startRangeSeconds : value
+        } else if (state.hours === endRangeHours && state.minutes === endRangeMinutes) {
+          value = value > endRangeSeconds ? endRangeSeconds : value
+        }
+        value = startRangeSeconds === 0 && value < 1 ? 0 : value
+      }
+    }
+    return value
+  }
 
 export const adjustSpinners =
   ({ api, state }) =>
diff --git a/packages/renderless/src/time-spinner/vue.ts b/packages/renderless/src/time-spinner/vue.ts
index 9aa696334..603a85ecf 100644
--- a/packages/renderless/src/time-spinner/vue.ts
+++ b/packages/renderless/src/time-spinner/vue.ts
@@ -27,7 +27,8 @@ import {
   decrease,
   modifyDateField,
   handleClick,
-  emitSelectRange
+  emitSelectRange,
+  selectDateScroll
 } from './index'
 import { getRangeHours, getRangeMinutes } from '../common/deps/date-util'
 
@@ -104,7 +105,8 @@ export const renderless = (props, { computed, onMounted, reactive, watch, nextTi
     handleClick: handleClick(api),
     scrollDown: scrollDown({ api, state }),
     handleScroll: handleScroll({ api, vm, state }),
-    adjustCurrentSpinner: adjustCurrentSpinner({ api, state })
+    adjustCurrentSpinner: adjustCurrentSpinner({ api, state }),
+    selectDateScroll: selectDateScroll({ state, props })
   })
 
   watch(
diff --git a/packages/renderless/src/timeline-item/index.ts b/packages/renderless/src/timeline-item/index.ts
index 7cb4b43a1..5696f05f2 100644
--- a/packages/renderless/src/timeline-item/index.ts
+++ b/packages/renderless/src/timeline-item/index.ts
@@ -90,7 +90,9 @@ export const computedItemCls =
       itemClass.push('normal')
     }
 
-    itemClass.push(api.getStatusCls(props.node))
+    if (!props.node.type) {
+      itemClass.push(api.getStatusCls(props.node))
+    }
 
     if (state.computedLineWidth) {
       itemClass.push('no-flex')
@@ -99,6 +101,21 @@ export const computedItemCls =
     return itemClass
   }
 
+export const computedIconClass =
+  ({ props, api }: Pick<ITimelineItemRenderlessParams, 'props' | 'api'>) =>
+  (): Array<string | Object> => {
+    let iconClass = ['icon', { 'step-icon': api.rootProps.textPosition === 'right' }]
+    const defaultIcons = ['success', 'warning', 'error']
+
+    if (defaultIcons.includes(props.node[props.autoColorField])) {
+      iconClass.push(`icon-${props.node[props.autoColorField]}`)
+    } else if (props.node[props.autoColorField]) {
+      iconClass.push('icon-custom')
+    }
+
+    return iconClass
+  }
+
 export const computedItemStyle =
   ({ props, state, api }: Pick<ITimelineItemRenderlessParams, 'props' | 'state' | 'api'>) =>
   (): { width?: string | number; height?: string | number; flex?: string } | null => {
diff --git a/packages/renderless/src/timeline-item/vue.ts b/packages/renderless/src/timeline-item/vue.ts
index 0fc439375..c511f553d 100644
--- a/packages/renderless/src/timeline-item/vue.ts
+++ b/packages/renderless/src/timeline-item/vue.ts
@@ -19,7 +19,8 @@ import {
   computedCurrent,
   computedIsReverse,
   computedWidth,
-  computedItemStyle
+  computedItemStyle,
+  computedIconClass
 } from './index'
 import type {
   ITimelineItemApi,
@@ -35,7 +36,7 @@ export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDat
 export const renderless = (
   props: ITimelineItemProps,
   { computed, reactive, inject }: ISharedRenderlessParamHooks,
-  { t, emit, constants, designConfig }: ITimelineItemRenderlessParamUtils
+  { t, emit, constants }: ITimelineItemRenderlessParamUtils
 ): ITimelineItemApi => {
   const api = {} as ITimelineItemApi
 
@@ -49,7 +50,8 @@ export const renderless = (
     computedSpace: computed(() => api.computedWidth(props.space || api.rootProps.space)),
     computedItemCls: computed(() => api.computedItemCls()),
     computedItemStyle: computed(() => api.computedItemStyle()),
-    computedLineWidth: computed(() => api.computedWidth(props.lineWidth || api.rootProps.lineWidth))
+    computedLineWidth: computed(() => api.computedWidth(props.lineWidth || api.rootProps.lineWidth)),
+    iconClass: computed(() => api.computedIconClass())
   })
 
   Object.assign(api, {
@@ -63,7 +65,8 @@ export const renderless = (
     computedWidth: computedWidth(),
     getStatus: getStatus({ state, t }),
     handleClick: handleClick({ emit, state }),
-    getStatusCls: getStatusCls({ constants, state })
+    getStatusCls: getStatusCls({ constants, state }),
+    computedIconClass: computedIconClass({ props, api })
   })
 
   return api
diff --git a/packages/renderless/src/tree-node/index.ts b/packages/renderless/src/tree-node/index.ts
index 355e602f9..aa4c93c90 100644
--- a/packages/renderless/src/tree-node/index.ts
+++ b/packages/renderless/src/tree-node/index.ts
@@ -85,7 +85,8 @@ export const handleSelectChange =
 
 export const handleClick =
   ({ api, vm, props, state }) =>
-  (e, trigger) => {
+  (e) => {
+    // tiny 新增： 去掉trigger参数，不影响点击的逻辑
     const store = state.tree.state.store
 
     state.tree.clearCurrentStore(props.node)
@@ -100,7 +101,7 @@ export const handleClick =
 
     state.tree.currentNode = vm
 
-    if (state.tree.checkOnClickNode && !props.node.disabled && trigger !== 'checkbox') {
+    if (state.tree.checkOnClickNode && !props.node.disabled) {
       e.target.checked = !props.node.checked
       // 当点击节点文字时，需要通知checkbox
       api.handleCheckChange(null, e)
diff --git a/packages/renderless/src/tree/index.ts b/packages/renderless/src/tree/index.ts
index af0d5dde0..a54478cb4 100644
--- a/packages/renderless/src/tree/index.ts
+++ b/packages/renderless/src/tree/index.ts
@@ -502,13 +502,17 @@ export const setCheckedNodes =
   }
 
 export const setCheckedKeys =
-  ({ props, state }) =>
+  ({ props, state, api }) =>
   (keys, leafOnly) => {
     if (!props.nodeKey) {
       throw new Error('[Tree] nodeKey is required in setCheckedKeys')
     }
 
-    state.store.setCheckedKeys(keys, leafOnly)
+    if (props.showRadio) {
+      api.setCurrentRadio(keys)
+    } else {
+      state.store.setCheckedKeys(keys, leafOnly)
+    }
   }
 
 export const setChecked = (state) => (data, checked, deep) => {
@@ -672,7 +676,7 @@ const init = ({ state, nodeKey, checkedKey }) => {
 
 export const setCurrentRadio =
   ({ props, state }) =>
-  () => {
+  (paramCheckedKey?: any) => {
     if (!props.showRadio) {
       return
     }
@@ -682,7 +686,7 @@ export const setCurrentRadio =
     }
 
     const nodeKey = props.nodeKey
-    const defaultCheckedKeys = props.defaultCheckedKeys || []
+    const defaultCheckedKeys = props.defaultCheckedKeys || paramCheckedKey || []
     const checkedKey = defaultCheckedKeys.length ? defaultCheckedKeys[0] : null
 
     if (!checkedKey) {
diff --git a/packages/renderless/src/tree/vue.ts b/packages/renderless/src/tree/vue.ts
index 2c2e67187..756a3f0b1 100644
--- a/packages/renderless/src/tree/vue.ts
+++ b/packages/renderless/src/tree/vue.ts
@@ -179,7 +179,7 @@ const initState = ({ reactive, emitter, props, computed, api }) => {
   return state
 }
 
-const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit }) => ({
+const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit, api }) => ({
   state,
   dispatch,
   broadcast,
@@ -199,7 +199,7 @@ const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit })
   getCheckedKeys: getCheckedKeys(state),
   getCurrentNode: getCurrentNode(state),
   setCheckedNodes: setCheckedNodes({ props, state }),
-  setCheckedKeys: setCheckedKeys({ props, state }),
+  setCheckedKeys: setCheckedKeys({ props, state, api }),
   setChecked: setChecked(state),
   getHalfCheckedNodes: getHalfCheckedNodes(state),
   getHalfCheckedKeys: getHalfCheckedKeys(state),
@@ -271,7 +271,7 @@ export const renderless = (
 
   provide('parentEmitter', state.emitter)
 
-  Object.assign(api, initApi({ state, dispatch, broadcast, props, vm, constants, t, emit }), {
+  Object.assign(api, initApi({ state, dispatch, broadcast, props, vm, constants, t, emit, api }), {
     closeMenu: closeMenu(state),
     mounted: mounted({ api, vm }),
     created: created({ api, props, state }),
diff --git a/packages/renderless/types/numeric.type.ts b/packages/renderless/types/numeric.type.ts
index 614b94353..b568b3c60 100644
--- a/packages/renderless/types/numeric.type.ts
+++ b/packages/renderless/types/numeric.type.ts
@@ -23,8 +23,6 @@ import type {
   handleBlur,
   watchValue,
   setCurrentValue,
-  dispatchDisplayedValue,
-  getDisplayedValue,
   initService,
   getDisplayOnlyText,
   filterValue,
@@ -80,8 +78,6 @@ export interface INumericApi {
   handleBlur: ReturnType<typeof handleBlur>
   watchValue: ReturnType<typeof watchValue>
   setCurrentValue: ReturnType<typeof setCurrentValue>
-  dispatchDisplayedValue: ReturnType<typeof dispatchDisplayedValue>
-  getDisplayedValue: ReturnType<typeof getDisplayedValue>
   getDisplayOnlyText: ReturnType<typeof getDisplayOnlyText>
   filterValue: ReturnType<typeof filterValue>
   handleClear: ReturnType<typeof handleClear>
diff --git a/packages/renderless/types/timeline-item.type.ts b/packages/renderless/types/timeline-item.type.ts
index 9b9516ae2..7f921a160 100644
--- a/packages/renderless/types/timeline-item.type.ts
+++ b/packages/renderless/types/timeline-item.type.ts
@@ -21,7 +21,8 @@ import type {
   computedWidth,
   getStatus,
   handleClick,
-  getStatusCls
+  getStatusCls,
+  computedIconClass
 } from '../src/timeline-item'
 import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
 import type { ITimelineCustomCls, ITimelineProps } from './time-line.type'
@@ -42,6 +43,7 @@ export interface ITimelineItemState {
   computedItemCls: ITimelineCustomCls
   computedItemStyle: { [key: string]: string | number } | null
   computedLineWidth: string
+  iconClass: ITimelineCustomCls
 }
 
 export interface ITimelineItemApi {
@@ -56,6 +58,7 @@ export interface ITimelineItemApi {
   getStatus: ReturnType<typeof getStatus>
   handleClick: ReturnType<typeof handleClick>
   getStatusCls: ReturnType<typeof getStatusCls>
+  computedIconClass: ReturnType<typeof computedIconClass>
 }
 
 export type ITimelineItemRenderlessParams = ISharedRenderlessFunctionParams<ITimelineItemConstants> & {
diff --git a/packages/theme-mobile/package.json b/packages/theme-mobile/package.json
index a79205bd2..bcf3265ad 100644
--- a/packages/theme-mobile/package.json
+++ b/packages/theme-mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme-mobile",
-  "version": "3.14.0",
+  "version": "3.15.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",
@@ -81,4 +81,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/theme-mobile/src/alert/index.less b/packages/theme-mobile/src/alert/index.less
index 2f8af4131..9e1766380 100644
--- a/packages/theme-mobile/src/alert/index.less
+++ b/packages/theme-mobile/src/alert/index.less
@@ -19,7 +19,7 @@
 
 .@{alert-prefix-cls} {
   display: flex;
-  align-items: top;
+  align-items: flex-start;
   clear: both;
   position: relative;
   width: 100%;
@@ -105,12 +105,20 @@
     font-size: var(--ti-mobile-alert-icon-size);
 
     &.@{alert-prefix-cls}__close {
+      position: absolute;
+      top: var(--ti-mobile-alert-padding-top);
+      right: var(--ti-mobile-alert-padding-right);
+      margin-top: 0;
       fill: var(--ti-mobile-alert-close-icon-color);
     }
   }
 
   &.is-center {
-    text-align: center;
+    justify-content: center;
+
+    .@{alert-prefix-cls}__content {
+      flex: 0 0 auto;
+    }
   }
 
   .is-custom {
diff --git a/packages/theme-mobile/src/input/index.less b/packages/theme-mobile/src/input/index.less
index 217303784..8787186e1 100644
--- a/packages/theme-mobile/src/input/index.less
+++ b/packages/theme-mobile/src/input/index.less
@@ -23,28 +23,39 @@
 .@{textarea-prefix-cls} {
   position: relative;
   display: inline-block;
-  width: 100%;
-  line-height: var(--ti-mobile-input-line-height);
 
   &__inner {
+    height: var(--ti-mobile-textarea-height);
     padding: var(--ti-mobile-textarea-padding-vertical) var(--ti-mobile-textarea-padding-horizontal);
     font-size: var(--ti-mobile-textarea-inner-font-size, 16px);
     font-family: var(--ti-mobile-input-font-family);
     color: var(--ti-mobile-textarea-inner-text-color);
-    border: var(--ti-mobile-input-border-width) solid var(--ti-mobile-input-border-color);
-    border-radius: var(--ti-mobile-input-radius);
     display: block;
-    resize: vertical;
+    resize: none;
     box-sizing: border-box;
-    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-    .placeholder(
-      @color: var(--ti-mobile-textarea-inner-placeholder-color)
-    );
+    border: none;
+    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    line-height: var(--ti-mobile-input-line-height);
+
+    &.is-autosize {
+      overflow: hidden;
+    }
 
     &:hover,
     &:focus {
       outline: 0;
     }
+
+    .placeholder(
+      @color: var(--ti-mobile-textarea-inner-placeholder-color)
+    );
+  }
+
+  &__wrapper {
+    display: inline-block;
+    overflow: hidden;
+    border: var(--ti-mobile-input-border-width) solid var(--ti-mobile-input-border-color);
+    border-radius: var(--ti-mobile-input-radius);
   }
 
   &__count {
@@ -75,7 +86,6 @@
   }
 
   &.is-exceed {
-    border-color: var();
     &__count {
       color: var(--ti-mobile-input-exceed-text-color);
     }
diff --git a/packages/theme-mobile/src/input/vars.less b/packages/theme-mobile/src/input/vars.less
index 19bd3bc0f..31ccad95f 100644
--- a/packages/theme-mobile/src/input/vars.less
+++ b/packages/theme-mobile/src/input/vars.less
@@ -74,12 +74,14 @@
   // 提示信息上边距
   --ti-mobile-input-tips-margin-top: var(--ti-mobile-space-2x, 8px);
 
+  // 文本域默认高度
+  --ti-mobile-textarea-height: 108px;
   // 文本域垂直内边距
   --ti-mobile-textarea-padding-vertical: var(--ti-mobile-space-2x, 8px);
   // 文本域水平内边距
   --ti-mobile-textarea-padding-horizontal: var(--ti-mobile-space-4x, 16px);
   // 文本域字号
-  --ti-mobile-textarea-inner-font-size: var(--ti-mobile-font-size-m, 14px);
+  --ti-mobile-textarea-inner-font-size: var(--ti-mobile-font-size-l, 16px);
   // 文本域字体色
   --ti-mobile-textarea-inner-text-color: var(--ti-mobile-color-text-primary, #191919);
   // 文本域占位符字体色
diff --git a/packages/theme-saas/package.json b/packages/theme-saas/package.json
index 3f2f472f3..c58996031 100644
--- a/packages/theme-saas/package.json
+++ b/packages/theme-saas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme-saas",
-  "version": "3.14.0",
+  "version": "3.15.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/cascader-menu/index.less b/packages/theme-saas/src/cascader-menu/index.less
index 252fa4abd..1abad7fe1 100644
--- a/packages/theme-saas/src/cascader-menu/index.less
+++ b/packages/theme-saas/src/cascader-menu/index.less
@@ -47,4 +47,11 @@
     @apply text-center;
     @apply text-color-text-placeholder;
   }
+
+  &__no-data {
+    @apply text-center;
+    @apply text-color-text-placeholder;
+    @apply text-sm;
+    @apply pt-20;
+  }
 }
diff --git a/packages/theme-saas/src/detail-page/index.less b/packages/theme-saas/src/detail-page/index.less
deleted file mode 100644
index 802588759..000000000
--- a/packages/theme-saas/src/detail-page/index.less
+++ /dev/null
@@ -1,157 +0,0 @@
-@import '../custom.less';
-
-@detail-page-prefix-cls: ~'@{css-prefix}detail-page';
-@detail-dialog-prefix-cls: ~'@{css-prefix}detail-dialog';
-@grid-modal-prefix-cls: ~'@{css-prefix}grid-modal';
-
-.@{detail-page-prefix-cls} {
-  @apply w-full;
-  height: 700px;
-  @apply text-xs;
-  @apply flex;
-  @apply flex-col;
-  @apply bg-color-bg-1;
-
-  & &__header {
-    @apply w-full;
-    @apply text-color-text-primary;
-    @apply flex;
-    @apply border-b border-b-color-bg-3;
-    @apply justify-between;
-    @apply items-center;
-    @apply py-2 px-0;
-
-    span {
-      @apply text-sm;
-      @apply font-bold;
-    }
-  }
-
-  & &__header-icon {
-    @apply leading-none;
-    @apply cursor-pointer;
-
-    .setIconStyle {
-      @apply text-base;
-      @apply fill-color-text-primary;
-
-      &:hover {
-        @apply fill-color-icon-hover;
-      }
-
-      &:active {
-        @apply fill-color-icon-active;
-      }
-    }
-  }
-
-  & &__content {
-    @apply w-full;
-    @apply flex;
-    @apply flex-col;
-  }
-
-  & &__content-item {
-    @apply w-full;
-    @apply flex;
-    @apply py-2 px-0;
-    @apply text-color-text-primary;
-
-    .@{detail-page-prefix-cls}__content-item-span {
-      @apply text-color-text-secondary;
-      @apply ~'mr-0.5';
-    }
-  }
-}
-
-.@{detail-dialog-prefix-cls}__wrapper {
-  .@{grid-modal-prefix-cls}__header {
-    @apply pt-6 pr-6 pb-0 pl-6;
-    border-bottom: none;
-
-    .@{grid-modal-prefix-cls}__title {
-      @apply text-sm;
-      @apply text-color-text-primary;
-    }
-
-    .@{grid-modal-prefix-cls}__close-btn {
-      @apply top-6;
-      @apply text-base;
-      @apply ~'p-0.5';
-      @apply text-color-text-primary;
-
-      &:hover {
-        @apply text-color-brand;
-      }
-    }
-  }
-}
-
-.@{detail-dialog-prefix-cls} {
-  @apply w-full;
-  @apply flex;
-  @apply flex-col;
-
-  & &__header {
-    @apply w-full;
-    @apply h-8;
-    @apply border-b border-b-color-bg-3;
-    @apply flex;
-    @apply items-center;
-    @apply bg-color-bg-4;
-    @apply pl-2;
-    @apply gap-2;
-
-    & > span {
-      @apply ~'w-1/2';
-      @apply text-xs;
-      @apply font-bold;
-      @apply border-r border-r-color-bg-3;
-    }
-  }
-
-  & &__header-check {
-    width: 130px;
-
-    span {
-      @apply font-bold;
-    }
-  }
-
-  & &__content {
-    @apply w-full;
-    max-height: 400px;
-    @apply flex;
-    @apply flex-col;
-    @apply overflow-y-auto;
-  }
-
-  & &__content-item {
-    @apply w-full;
-    @apply h-10;
-    @apply flex;
-    @apply items-center;
-    @apply pl-2;
-    @apply border-b border-b-color-bg-3;
-    @apply gap-2;
-
-    &:hover {
-      @apply bg-color-brand-hover-subtle;
-    }
-
-    > span {
-      @apply ~'w-1/2';
-    }
-  }
-
-  & &__footer {
-    @apply mt-6;
-    @apply flex;
-    @apply items-center;
-    @apply justify-end;
-  }
-
-  .active {
-    @apply bg-color-brand-hover-subtler;
-  }
-}
diff --git a/packages/theme-saas/src/grid/header.less b/packages/theme-saas/src/grid/header.less
index ee63d6e8f..08e3136fb 100644
--- a/packages/theme-saas/src/grid/header.less
+++ b/packages/theme-saas/src/grid/header.less
@@ -60,6 +60,7 @@
     .@{grid-prefix-cls}-edit-icon {
       @apply static;
       @apply translate-y-0;
+      @apply shrink-0;
     }
     &.is__editable {
       .@{grid-prefix-cls}-required-icon {
diff --git a/packages/theme-saas/src/grid/table.less b/packages/theme-saas/src/grid/table.less
index 6da26b28d..56cf187a5 100644
--- a/packages/theme-saas/src/grid/table.less
+++ b/packages/theme-saas/src/grid/table.less
@@ -380,7 +380,7 @@
         @apply top-0;
         @apply w-0;
         @apply h-full;
-        @apply ~'z-[1]';
+        @apply ~'z-[2]';
         @apply border-l;
         @apply border-l-color-border-separator;
       }
@@ -391,7 +391,7 @@
         @apply top-0;
         @apply w-full;
         @apply h-0;
-        @apply ~'z-[1]';
+        @apply ~'z-[2]';
         @apply border-t;
         @apply border-t-color-border-separator;
       }
diff --git a/packages/theme-saas/src/index.less b/packages/theme-saas/src/index.less
index fe2cc9222..7cf6f25d0 100644
--- a/packages/theme-saas/src/index.less
+++ b/packages/theme-saas/src/index.less
@@ -120,6 +120,7 @@
 @import './popover/index.less';
 @import './progress/index.less';
 @import './qr-code/index.less';
+@import './quarter-panel/index.less';
 @import './query-builder/index.less';
 @import './query-builder-pro/index.less';
 @import './radio/index.less';
@@ -145,6 +146,7 @@
 @import './slide-img/index.less';
 @import './slider/index.less';
 @import './split/index.less';
+@import './statistic/index.less';
 @import './steps/index.less';
 @import './svg/index.less';
 @import './switch/index.less';
diff --git a/packages/theme-saas/src/credit-card-form/index.less b/packages/theme-saas/src/quarter-panel/index.less
similarity index 100%
rename from packages/theme-saas/src/credit-card-form/index.less
rename to packages/theme-saas/src/quarter-panel/index.less
diff --git a/packages/theme-saas/src/rich-text-editor/index.less b/packages/theme-saas/src/rich-text-editor/index.less
index 21c6f04d8..b95c16f6c 100644
--- a/packages/theme-saas/src/rich-text-editor/index.less
+++ b/packages/theme-saas/src/rich-text-editor/index.less
@@ -652,12 +652,12 @@
       display: inline-block;
       width: 10px;
       height: 10px;
-      background: var(--ti-base-color-brand-7);
+      background: #526ecc;
       position: absolute;
     }
 
     &__resize {
-      border: 2px solid var(--ti-base-color-brand-7);
+      border: 2px solid #526ecc;
       left: 0;
       position: absolute;
       top: 0;
diff --git a/packages/theme-saas/src/slide-bar/index.less b/packages/theme-saas/src/slide-bar/index.less
deleted file mode 100644
index 56171a8ae..000000000
--- a/packages/theme-saas/src/slide-bar/index.less
+++ /dev/null
@@ -1,130 +0,0 @@
-@import '../custom.less';
-
-@slide-bar-prefix-cls: ~'@{css-prefix}slide-bar';
-@svg-prefix-cls: ~'@{css-prefix}svg';
-
-.@{slide-bar-prefix-cls} {
-  @apply py-0 px-8;
-  @apply relative;
-
-  > .@{svg-prefix-cls} {
-    @apply absolute;
-    @apply ~'top-1/2';
-    @apply ~'-translate-y-2/4';
-    font-size: 2em;
-    @apply cursor-pointer;
-    @apply fill-color-bg-2;
-
-    &:hover {
-      @apply fill-color-icon-secondary;
-    }
-
-    &.@{css-prefix}disabled,
-    &.@{css-prefix}disabled:hover {
-      @apply bg-transparent;
-      @apply fill-color-icon-inverse;
-      @apply cursor-default;
-    }
-  }
-
-  > .icon-chevron-left {
-    @apply left-0;
-  }
-
-  > .icon-chevron-right {
-    @apply right-0;
-  }
-
-  li li div {
-    margin: 15px 0;
-    @apply text-xs;
-    @apply text-color-text-primary;
-
-    &:nth-child(2) {
-      @apply border-b border-b-color-border;
-    }
-
-    svg {
-      float: right;
-      @apply ~'-mt-1.5' mr-0 mb-0 ml-0;
-      @apply bg-color-bg-1;
-      @apply fill-color-border;
-    }
-  }
-
-  & &__content {
-    @apply w-full;
-    min-height: 170px;
-    @apply relative;
-    @apply overflow-hidden;
-  }
-
-  & &__list {
-    @apply absolute;
-    min-height: 170px;
-    @apply flex;
-
-    > li {
-      width: 23%;
-      @apply p-5;
-      @apply float-left;
-      margin-left: 2%;
-      @apply relative;
-      border: 5px solid theme('colors.color.bg.1');
-      @apply box-border;
-      @apply flex;
-      @apply items-center;
-
-      &:first-child {
-        @apply ml-0;
-      }
-
-      &:hover {
-        @apply border-color-bg-5;
-      }
-
-      > .icon-chevron-down {
-        @apply absolute;
-        top: 98.8%;
-        @apply ~'left-1/2';
-        @apply ~'-ml-2.5';
-        font-size: 2em;
-        width: 22px;
-        @apply !hidden;
-
-        &:before {
-          @apply content-[''];
-          @apply absolute;
-          @apply w-5;
-          @apply h-5;
-          border-right: 5px solid theme('colors.color.bg.5');
-          border-bottom: 5px solid theme('colors.color.bg.5');
-          @apply rotate-45;
-          @apply bg-color-bg-1;
-          top: -5px;
-        }
-      }
-
-      > ul {
-        @apply w-full;
-        @apply list-none;
-      }
-    }
-
-    > li.@{slide-bar-prefix-cls}__select {
-      @apply border-color-bg-5;
-
-      > .icon-chevron-down {
-        @apply !block;
-      }
-
-      li .@{css-prefix-iconfont} {
-        @apply text-color-bg-5;
-      }
-
-      li:nth-child(2) {
-        @apply border-b border-b-color-bg-5;
-      }
-    }
-  }
-}
diff --git a/packages/theme-saas/src/credit-card/index.less b/packages/theme-saas/src/statistic/index.less
similarity index 100%
rename from packages/theme-saas/src/credit-card/index.less
rename to packages/theme-saas/src/statistic/index.less
diff --git a/packages/theme-saas/src/svgs/automatic-assessment.svg b/packages/theme-saas/src/svgs/automatic-assessment.svg
new file mode 100644
index 000000000..9d6122b55
--- /dev/null
+++ b/packages/theme-saas/src/svgs/automatic-assessment.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1892)">
+		<g opacity="0.000000"/>
+		<path id="矢量 168" d="M12.295 2C12.4283 2 12.5535 2.03467 12.662 2.0957C12.834 2.15161 12.9912 2.24902 13.119 2.38159L18.6428 8.10986C18.6785 8.14697 18.7112 8.18579 18.7407 8.22632C18.8996 8.36328 19.0002 8.56665 19.0002 8.79321L19.0002 9.79517C18.4401 9.60352 17.8426 9.5 17.2222 9.5C16.4529 9.5 15.8242 10.1367 15.7802 10.9395C12.5892 10.9395 10 13.7681 10 17.1467C10 19.1238 10.8858 20.8816 12.2601 22L5.19763 22C3.43042 22 2.00024 20.5586 2.00024 18.7834L2.00024 5.21655C2.00024 3.44141 3.43042 2 5.19763 2L12.295 2ZM16.4943 8.04297L13.0443 4.46411L13.045 7.14893C13.045 7.61792 13.4961 8.04321 14.0082 8.04321L16.4943 8.04297ZM11.0549 8.50439L8.3277 11.5044C8.2511 11.574 8.11725 11.6755 8.02722 11.708C7.93719 11.7405 7.84052 11.7542 7.73706 11.7493C7.63361 11.7441 7.53864 11.7214 7.45209 11.6807C7.36554 11.6399 7.28741 11.5811 7.21777 11.5044L6.13635 10.3149L5.05493 11.5044C4.77246 11.8152 4.30627 11.8374 3.99548 11.5549C3.68469 11.2725 3.66254 10.8062 3.94507 10.4956L5.58142 8.69556C5.65106 8.6189 5.72919 8.56006 5.81573 8.51929C5.90228 8.47852 5.99725 8.45581 6.10071 8.45093C6.20416 8.4458 6.30084 8.45947 6.39087 8.49194C6.4809 8.52441 6.56427 8.57544 6.64087 8.64502L7.77271 9.88501L9.94507 7.49561C10.2275 7.18481 10.6937 7.1626 11.0045 7.44507C11.3153 7.72754 11.3375 8.19385 11.0549 8.50439ZM21.8911 16.1738C21.8186 16.2463 21.71 16.2825 21.565 16.2825L18.0868 16.2825C18.0248 16.2825 17.9641 16.2761 17.9048 16.2634C17.8515 16.2522 17.7993 16.2356 17.7482 16.2141C17.6978 16.1926 17.6501 16.167 17.6053 16.1372C17.5577 16.1057 17.5132 16.0691 17.4719 16.0278C17.4307 15.9866 17.3942 15.9421 17.3625 15.8945C17.3327 15.8496 17.3071 15.802 17.2858 15.7515C17.2642 15.7004 17.2477 15.6482 17.2363 15.595C17.2236 15.5356 17.2173 15.4751 17.2173 15.4131L17.2173 11.9348C17.2173 11.7898 17.2535 11.6812 17.3259 11.6086C17.3984 11.5361 17.5071 11.5 17.652 11.5C17.9752 11.5 18.2908 11.5342 18.5988 11.6028C18.8525 11.6592 19.1011 11.739 19.3445 11.8418C19.5901 11.9458 19.8226 12.0698 20.0416 12.2141C20.2865 12.3752 20.5147 12.5618 20.7264 12.7734C20.938 12.9851 21.1245 13.2134 21.2857 13.4583C21.43 13.6772 21.554 13.9097 21.658 14.1553C21.7609 14.3987 21.8406 14.6472 21.897 14.9009C21.9655 15.209 21.9998 15.5244 21.9998 15.8477C21.9998 15.9927 21.9636 16.1013 21.8911 16.1738ZM16.3478 13.2632L16.3477 16.2827C16.3477 16.4009 16.3704 16.5137 16.4159 16.6211C16.4359 16.6682 16.4595 16.7129 16.487 16.7554C16.52 16.8062 16.5585 16.8538 16.6024 16.8975C16.6828 16.978 16.775 17.04 16.8789 17.084C16.924 17.1033 16.97 17.1182 17.017 17.1294C17.0819 17.1445 17.1487 17.1523 17.2173 17.1523L20.2368 17.1526C20.3818 17.1526 20.4904 17.1887 20.5629 17.2612C20.6354 17.3337 20.6689 17.4902 20.6689 17.6353C20.6387 17.9077 20.5841 18.1729 20.5049 18.4307C20.4285 18.6797 20.329 18.9216 20.2067 19.1567C20.0912 19.3789 19.9587 19.5879 19.8093 19.7842C19.6456 19.9993 19.4617 20.1987 19.2574 20.3828C19.0482 20.5713 18.8253 20.7368 18.5884 20.8794C18.3806 21.0046 18.1622 21.1121 17.9332 21.2017C17.4257 21.4006 16.8972 21.5 16.3477 21.5C16.0245 21.5 15.7089 21.4658 15.4009 21.3972C15.1472 21.3408 14.8986 21.261 14.6553 21.1582C14.4096 21.0542 14.1772 20.9302 13.9583 20.7859C13.7133 20.6248 13.485 20.4382 13.2734 20.2266C13.0618 20.0149 12.8753 19.7866 12.7141 19.5417C12.5699 19.3228 12.4457 19.0903 12.3418 18.8447C12.2389 18.6013 12.1592 18.353 12.1028 18.0994C12.0343 17.7913 11.9999 17.4753 11.9999 17.1523C11.9999 16.8457 12.0309 16.5454 12.0928 16.252C12.1419 16.0193 12.2104 15.791 12.2983 15.5667C12.3881 15.3376 12.4955 15.1191 12.6206 14.9114C12.7632 14.6746 12.9287 14.4517 13.1172 14.2424C13.3013 14.0381 13.5009 13.8542 13.7158 13.6907C13.9121 13.5413 14.1214 13.4087 14.3435 13.2932C14.5786 13.1709 14.8207 13.0713 15.0698 12.9949C15.3275 12.9158 15.5926 12.8611 15.8653 12.8311C16.1534 12.7991 16.316 12.9751 16.3478 13.2632Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/average-shipping-period.svg b/packages/theme-saas/src/svgs/average-shipping-period.svg
new file mode 100644
index 000000000..baf9ab698
--- /dev/null
+++ b/packages/theme-saas/src/svgs/average-shipping-period.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1904)">
+		<g opacity="0.000000"/>
+		<path id="矢量 180" d="M16.5487 2.89819C16.499 2.53223 16.1853 2.25 15.8055 2.25C15.3914 2.25 15.0555 2.58569 15.0555 3L15.0549 4.25L8.94397 4.25L8.94446 3L8.93762 2.89819C8.88794 2.53223 8.57422 2.25 8.19446 2.25C7.78027 2.25 7.44446 2.58569 7.44446 3L7.44397 4.25L5.5 4.25C3.81787 4.34253 2.25 5.71655 2.25 7.3999L2.25 18.6001L2.25513 18.7791C2.34961 20.439 3.74939 21.75 5.45459 21.75L18.5454 21.75L18.7269 21.7451C20.4091 21.6526 21.75 20.2834 21.75 18.6001L21.7449 7.22095C21.6504 5.56104 20.2052 4.25 18.5 4.25L16.5551 4.25L16.5555 3L16.5487 2.89819ZM18.5454 5.75L18.6931 5.7561C19.5684 5.82861 20.25 6.54053 20.25 7.40015L20.25 8.4502L3.75 8.4502L3.75 7.40015L3.75623 7.2583C3.83044 6.4165 4.5592 5.75 5.45459 5.75L18.5454 5.75ZM8.5 12.5833C8.5 12.3992 8.35071 12.25 8.16663 12.25L6.83337 12.25C6.64929 12.25 6.5 12.3992 6.5 12.5833L6.5 13.9167C6.5 14.1008 6.64929 14.25 6.83337 14.25L8.16663 14.25C8.35071 14.25 8.5 14.1008 8.5 13.9167L8.5 12.5833ZM13 12.5833C13 12.3992 12.8507 12.25 12.6666 12.25L11.3334 12.25C11.1493 12.25 11 12.3992 11 12.5833L11 13.9167C11 14.1008 11.1493 14.25 11.3334 14.25L12.6666 14.25C12.8507 14.25 13 14.1008 13 13.9167L13 12.5833ZM17.5 12.5833C17.5 12.3992 17.3507 12.25 17.1666 12.25L15.8334 12.25C15.6493 12.25 15.5 12.3992 15.5 12.5833L15.5 13.9167C15.5 14.1008 15.6493 14.25 15.8334 14.25L17.1666 14.25C17.3507 14.25 17.5 14.1008 17.5 13.9167L17.5 12.5833ZM8.5 16.5833C8.5 16.3992 8.35071 16.25 8.16663 16.25L6.83337 16.25C6.64929 16.25 6.5 16.3992 6.5 16.5833L6.5 17.9167C6.5 18.1008 6.64929 18.25 6.83337 18.25L8.16663 18.25C8.35071 18.25 8.5 18.1008 8.5 17.9167L8.5 16.5833ZM13 16.5833C13 16.3992 12.8507 16.25 12.6666 16.25L11.3334 16.25C11.1493 16.25 11 16.3992 11 16.5833L11 17.9167C11 18.1008 11.1493 18.25 11.3334 18.25L12.6666 18.25C12.8507 18.25 13 18.1008 13 17.9167L13 16.5833ZM17.5 16.5833C17.5 16.3992 17.3507 16.25 17.1666 16.25L15.8334 16.25C15.6493 16.25 15.5 16.3992 15.5 16.5833L15.5 17.9167C15.5 18.1008 15.6493 18.25 15.8334 18.25L17.1666 18.25C17.3507 18.25 17.5 18.1008 17.5 17.9167L17.5 16.5833Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/customs-clearance-form.svg b/packages/theme-saas/src/svgs/customs-clearance-form.svg
new file mode 100644
index 000000000..21477532f
--- /dev/null
+++ b/packages/theme-saas/src/svgs/customs-clearance-form.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1880)">
+		<path id="矢量 29" d="M16 2L6 2C4.34314 2 3 3.34326 3 5L3 19C3 20.6567 4.34314 22 6 22L11.8925 22C9.85962 20.7751 8.5 18.5464 8.5 16C8.5 12.134 11.634 9 15.5 9C16.775 9 17.9703 9.34082 19 9.93652L19 5C19 3.34326 17.6569 2 16 2ZM6 5.25L13.5 5.25C13.92 5.25 14.25 5.58008 14.25 6C14.25 6.41992 13.92 6.75 13.5 6.75L6 6.75C5.57996 6.75 5.25 6.41992 5.25 6C5.25 5.58008 5.57996 5.25 6 5.25ZM6 8.75L8 8.75C8.42004 8.75 8.75 9.08008 8.75 9.5C8.75 9.91992 8.42004 10.25 8 10.25L6 10.25C5.57996 10.25 5.25 9.91992 5.25 9.5C5.25 9.08008 5.57996 8.75 6 8.75ZM10 16C10 12.9624 12.4624 10.5 15.5 10.5C18.5376 10.5 21 12.9624 21 16C21 19.0376 18.5376 21.5 15.5 21.5C12.4624 21.5 10 19.0376 10 16ZM13.4664 13.5C13.4664 12.3955 14.3618 11.5 15.4664 11.5C16.571 11.5 17.4664 12.3955 17.4664 13.5C17.4664 14.3291 16.9618 15.0405 16.2429 15.3438L16.2429 16L16.9999 16C17.4199 16 17.7499 16.3301 17.7499 16.75C17.7499 17.1699 17.4199 17.5 16.9999 17.5L16.2429 17.5L16.2429 18.6665C16.2974 18.6538 16.3514 18.6399 16.4049 18.6243C16.6683 18.5481 16.9218 18.4373 17.1652 18.2915C17.4148 18.1423 17.6375 17.9668 17.8333 17.7651C18.0273 17.5654 18.1949 17.3398 18.3361 17.0886C18.5417 16.7224 18.9911 16.5962 19.3572 16.802C19.7234 17.0078 19.8495 17.457 19.6438 17.8232C19.5491 17.9917 19.4449 18.1536 19.3313 18.3086C19.2012 18.4858 19.0587 18.6538 18.9037 18.813C18.7505 18.9705 18.5881 19.116 18.4164 19.2495C18.2633 19.3689 18.1028 19.4785 17.9349 19.5791C17.7423 19.6943 17.5435 19.7949 17.3385 19.8809C17.1582 19.9565 16.9733 20.021 16.7834 20.0742C16.6199 20.1201 16.4547 20.157 16.2881 20.1848C16.0304 20.228 15.7692 20.2495 15.5044 20.25C15.2454 20.2488 14.964 20.2271 14.7119 20.1848C14.5453 20.157 14.3801 20.1201 14.2166 20.0742C14.028 20.0215 13.8441 19.9575 13.6649 19.8823C13.46 19.7964 13.2576 19.6943 13.0649 19.5791C12.8972 19.4785 12.7367 19.3689 12.5836 19.2498C12.4119 19.116 12.2495 18.9705 12.0962 18.813C11.9413 18.6541 11.7988 18.4858 11.6687 18.3086C11.5551 18.1538 11.4508 17.9917 11.3561 17.8232C11.1504 17.457 11.2766 17.0078 11.6427 16.802C12.0089 16.5962 12.4583 16.7224 12.6639 17.0886C12.8051 17.3398 12.9727 17.5654 13.1667 17.7651C13.3624 17.9668 13.5852 18.1423 13.8348 18.2915C14.0782 18.4373 14.3317 18.5481 14.5951 18.6243C14.6428 18.6379 14.6946 18.6519 14.7429 18.6631L14.7429 17.5L13.9999 17.5C13.5798 17.5 13.2499 17.1699 13.2499 16.75C13.2499 16.3301 13.5798 16 13.9999 16L14.7429 16L14.7429 15.3652C13.996 15.0752 13.4664 14.3494 13.4664 13.5ZM14.9664 13.5C14.9664 13.2239 15.1903 13 15.4664 13C15.7426 13 15.9664 13.2239 15.9664 13.5C15.9664 13.7761 15.7426 14 15.4664 14C15.1903 14 14.9664 13.7761 14.9664 13.5Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/customs-declaration.svg b/packages/theme-saas/src/svgs/customs-declaration.svg
new file mode 100644
index 000000000..ea05e0272
--- /dev/null
+++ b/packages/theme-saas/src/svgs/customs-declaration.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1885)">
+		<path id="矢量 187" d="M9.75 1.00171L14.25 1.00171C15.7688 1.00171 17 2.23291 17 3.75171L17 5.00171L19 5.00171C20.1046 5.00171 21 5.89722 21 7.00171L21 9.5L3.00024 9.5L3.00024 11L21 11L20.9999 20.5007C20.9999 21.6052 20.1046 22.5007 19.0001 22.5007L5.00012 22.5017C3.89551 22.5017 3 21.6062 3 20.5017L3 7.00171C3 5.89722 3.89545 5.00171 5 5.00171L7 5.00171L7 3.75171C7 2.23291 8.2312 1.00171 9.75 1.00171ZM12 2.5C11.5858 2.5 11.25 2.83569 11.25 3.25C11.25 3.66431 11.5858 4 12 4C12.4142 4 12.75 3.66431 12.75 3.25C12.75 2.83569 12.4142 2.5 12 2.5ZM15.2803 19.7808L17.7803 17.2808C17.8535 17.2075 17.9084 17.1267 17.9451 17.0383C17.9817 16.95 18 16.854 18 16.7502C18 16.6467 17.9816 16.5508 17.9449 16.4624C17.9084 16.374 17.8535 16.2932 17.7803 16.22L15.2803 13.72C14.9833 13.4231 14.5166 13.4231 14.2196 13.72C13.9226 14.0171 13.9226 14.4836 14.2196 14.7808L15.4393 16.0002L12.25 16.0002L12.25 17.5002L15.4393 17.5002L14.2196 18.72C13.9226 19.0171 13.9226 19.4836 14.2196 19.7808C14.5166 20.0776 14.9833 20.0776 15.2803 19.7808ZM6.25 17.5002L6.25 16.0002L7.75 16.0002L7.75 17.5002L6.25 17.5002ZM10.75 16.0002L9.25 16.0002L9.25 17.5002L10.75 17.5002L10.75 16.0002Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/disallowance.svg b/packages/theme-saas/src/svgs/disallowance.svg
new file mode 100644
index 000000000..a73efd376
--- /dev/null
+++ b/packages/theme-saas/src/svgs/disallowance.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1877)">
+		<path id="合并" d="M16 2L6 2C4.34314 2 3 3.34326 3 5L3 19C3 20.6567 4.34314 22 6 22L11.8924 22C9.85956 20.7751 8.5 18.5464 8.5 16C8.5 12.134 11.634 9 15.5 9C16.775 9 17.9704 9.34082 19 9.93652L19 5C19 3.34326 17.6569 2 16 2ZM6 5.25L13.5 5.25C13.92 5.25 14.25 5.58008 14.25 6C14.25 6.41992 13.92 6.75 13.5 6.75L6 6.75C5.58002 6.75 5.25 6.41992 5.25 6C5.25 5.58008 5.58002 5.25 6 5.25ZM6 8.75L8 8.75C8.41998 8.75 8.75 9.08008 8.75 9.5C8.75 9.91992 8.41998 10.25 8 10.25L6 10.25C5.58002 10.25 5.25 9.91992 5.25 9.5C5.25 9.08008 5.58002 8.75 6 8.75ZM10 16C10 12.9624 12.4625 10.5 15.5 10.5C18.5375 10.5 21 12.9624 21 16C21 19.0376 18.5375 21.5 15.5 21.5C12.4625 21.5 10 19.0376 10 16ZM18 15.25C18.42 15.25 18.75 15.5801 18.75 16C18.75 16.4199 18.42 16.75 18 16.75L13 16.75C12.58 16.75 12.25 16.4199 12.25 16C12.25 15.5801 12.58 15.25 13 15.25L18 15.25Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/draw-flowchart.svg b/packages/theme-saas/src/svgs/draw-flowchart.svg
new file mode 100644
index 000000000..85ad6f5e0
--- /dev/null
+++ b/packages/theme-saas/src/svgs/draw-flowchart.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip451_2372)">
+		<g opacity="0.000000"/>
+		<path id="矢量 251" d="M4.2 2.23C2.57 2.23 1.26 3.55 1.26 5.17C1.26 6.79 2.57 8.11 4.2 8.11C5.6 8.11 6.77 7.13 7.06 5.82L16.28 5.82C16.47 5.82 16.66 5.84 16.84 5.88C16.98 5.91 17.11 5.96 17.24 6.01C17.54 6.14 17.8 6.32 18.03 6.54C18.26 6.77 18.44 7.04 18.56 7.33C18.62 7.46 18.66 7.6 18.7 7.74C18.74 7.92 18.76 8.11 18.76 8.3C18.76 8.49 18.74 8.68 18.7 8.86C18.66 9 18.62 9.13 18.56 9.26C18.44 9.56 18.26 9.82 18.03 10.05C17.91 10.17 17.77 10.28 17.63 10.38C17.51 10.46 17.38 10.52 17.24 10.58C17.11 10.64 16.98 10.68 16.84 10.71C16.66 10.76 16.47 10.78 16.28 10.78L13.54 10.78C13.14 9.62 12.05 8.8 10.76 8.8C9.47 8.8 8.38 9.62 7.98 10.78L5.24 10.78C4.94 10.78 4.66 10.81 4.38 10.87C4.14 10.92 3.91 10.99 3.69 11.09C3.46 11.19 3.25 11.3 3.05 11.43C2.82 11.58 2.62 11.75 2.42 11.94C2.23 12.13 2.06 12.34 1.91 12.57C1.78 12.77 1.67 12.98 1.57 13.21C1.48 13.43 1.4 13.66 1.35 13.9C1.29 14.18 1.26 14.46 1.26 14.76C1.26 15.3 1.36 15.81 1.57 16.3C1.77 16.78 2.06 17.2 2.42 17.57C2.62 17.76 2.82 17.93 3.05 18.08C3.25 18.21 3.46 18.33 3.69 18.42C3.91 18.52 4.14 18.59 4.38 18.64C4.66 18.7 4.94 18.73 5.24 18.73L12.84 18.73L12.28 20.79C12.25 20.92 12.25 21.05 12.28 21.18C12.35 21.42 12.46 21.59 12.61 21.68C12.77 21.76 12.96 21.77 13.21 21.71L15.89 20.98C15.97 20.96 16.05 20.93 16.12 20.89C16.19 20.85 16.26 20.8 16.31 20.74L22.05 15.47C22.27 15.25 22.45 14.98 22.57 14.7C22.62 14.57 22.66 14.44 22.69 14.31C22.72 14.16 22.73 14.01 22.73 13.86C22.73 13.7 22.72 13.55 22.69 13.41C22.66 13.27 22.62 13.14 22.57 13.01C22.51 12.88 22.45 12.76 22.38 12.64C22.29 12.51 22.19 12.38 22.07 12.27C21.96 12.15 21.83 12.05 21.7 11.96C21.58 11.89 21.46 11.82 21.33 11.77C21.2 11.72 21.07 11.68 20.93 11.65C20.78 11.62 20.63 11.61 20.48 11.61C20.19 11.61 19.91 11.66 19.64 11.77C19.45 11.85 19.27 11.95 19.12 12.07C19.04 12.12 18.97 12.19 18.9 12.26L13.72 17.23L5.24 17.23C5.05 17.23 4.86 17.21 4.68 17.17C4.54 17.14 4.4 17.1 4.27 17.04C3.98 16.91 3.71 16.74 3.48 16.51C3.26 16.28 3.08 16.02 2.95 15.72C2.9 15.59 2.85 15.45 2.82 15.32C2.78 15.13 2.76 14.95 2.76 14.76C2.76 14.56 2.78 14.38 2.82 14.19C2.85 14.06 2.9 13.92 2.95 13.79C3.08 13.49 3.26 13.23 3.48 13C3.61 12.88 3.74 12.77 3.89 12.68C4.01 12.6 4.14 12.53 4.27 12.47C4.4 12.42 4.54 12.37 4.68 12.34C4.86 12.3 5.05 12.28 5.24 12.28L7.87 12.28C8.12 13.64 9.32 14.67 10.76 14.67C12.2 14.67 13.39 13.64 13.65 12.28L16.28 12.28C16.57 12.28 16.86 12.25 17.14 12.18C17.37 12.13 17.6 12.06 17.83 11.96C18.05 11.87 18.27 11.75 18.47 11.62C18.69 11.47 18.9 11.3 19.09 11.11C19.46 10.74 19.74 10.32 19.95 9.85C20.04 9.62 20.11 9.39 20.17 9.16C20.23 8.88 20.26 8.59 20.26 8.3C20.26 8 20.23 7.72 20.17 7.44C20.11 7.2 20.04 6.97 19.95 6.75C19.74 6.27 19.46 5.85 19.09 5.48C18.9 5.29 18.69 5.12 18.47 4.97C18.27 4.84 18.05 4.73 17.83 4.63C17.6 4.54 17.37 4.46 17.14 4.41C16.86 4.35 16.57 4.32 16.28 4.32L7.01 4.32C6.64 3.11 5.52 2.23 4.2 2.23ZM4.2 3.73C3.4 3.73 2.76 4.38 2.76 5.17C2.76 5.97 3.4 6.61 4.2 6.61C4.99 6.61 5.63 5.97 5.63 5.17C5.63 4.38 4.99 3.73 4.2 3.73ZM20.73 14.65L19.68 13.59L19.94 13.34C20.03 13.25 20.13 13.18 20.24 13.15C20.31 13.12 20.39 13.11 20.48 13.11C20.69 13.11 20.87 13.18 21.01 13.33C21.09 13.4 21.14 13.48 21.18 13.57C21.21 13.66 21.23 13.75 21.23 13.86C21.23 13.96 21.21 14.06 21.18 14.14C21.14 14.23 21.09 14.31 21.02 14.38L20.73 14.65ZM14.08 19.92L14.43 18.63L18.59 14.63L19.62 15.66L15.39 19.56L14.08 19.92Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/engine-workflow.svg b/packages/theme-saas/src/svgs/engine-workflow.svg
new file mode 100644
index 000000000..c6479b963
--- /dev/null
+++ b/packages/theme-saas/src/svgs/engine-workflow.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1889)">
+		<path id="矢量 165" d="M21 2L13 2C12.4477 2 12 2.44775 12 3L12 3.75L5.08057 3.75C4.8797 3.75 4.68341 3.771 4.4917 3.81287C4.32776 3.84875 4.16718 3.8999 4.00989 3.96643C3.85278 4.03284 3.70428 4.11243 3.56433 4.20496C3.41125 4.30615 3.26843 4.42297 3.13605 4.55542C3.0036 4.68787 2.88678 4.83057 2.78558 4.98364C2.69299 5.12354 2.61346 5.27222 2.547 5.42932C2.48053 5.58655 2.42932 5.74707 2.39349 5.91101C2.35156 6.10278 2.33057 6.29907 2.33057 6.5L2.33057 10.55C2.33057 10.7509 2.3515 10.9471 2.39343 11.1388C2.42926 11.3027 2.48047 11.4635 2.547 11.6207C2.61346 11.7778 2.69299 11.9264 2.78552 12.0663C2.88678 12.2194 3.0036 12.3622 3.13605 12.4946C3.26849 12.6271 3.41125 12.7439 3.56433 12.8451C3.70129 12.9357 3.8465 13.0138 4 13.0795L4 14.251C4 14.671 4.33002 15.001 4.75 15.001C5.16998 15.001 5.5 14.671 5.5 14.251L5.5 12.5704L6.14197 13.4594C6.15613 13.4735 6.24847 13.5782 6.26367 13.5912C6.34766 13.6519 6.48334 13.7302 6.57642 13.7523C6.66956 13.7744 6.76721 13.7771 6.86945 13.7606C6.97168 13.7441 7.06348 13.7108 7.1449 13.6606C7.22632 13.6104 7.29736 13.5433 7.35803 13.4594L8 12.5704L8 14.251C8 14.671 8.33002 15.001 8.75 15.001C9.16998 15.001 9.5 14.671 9.5 14.251L9.5 10.251C9.5 10.1475 9.48169 10.0515 9.44507 9.96313C9.40845 9.87463 9.35358 9.79395 9.28033 9.7207C9.20709 9.64746 9.12628 9.59253 9.0379 9.55591C8.94952 9.51929 8.85358 9.50098 8.75 9.50098C8.68982 9.50098 8.63123 9.50781 8.57434 9.52161C8.5174 9.53528 8.46216 9.55579 8.40857 9.58325C8.35498 9.6106 8.30591 9.64343 8.26154 9.68152C8.2171 9.7196 8.17725 9.76306 8.14197 9.81189L6.75 11.7393L5.35803 9.81189C5.29736 9.72791 5.22638 9.66089 5.1449 9.6106C5.06348 9.56042 4.97168 9.5271 4.86945 9.51062C4.76721 9.49402 4.66956 9.49683 4.57642 9.51892C4.48334 9.54102 4.39484 9.5824 4.31085 9.64294C4.26208 9.67822 4.21863 9.71802 4.18048 9.76245C4.1424 9.80688 4.10962 9.85596 4.08221 9.90955C4.05481 9.96313 4.03424 10.0184 4.02057 10.0753C4.00684 10.1322 4 10.1908 4 10.251L4 11.1794C3.97327 11.1337 3.94946 11.0859 3.92847 11.0364C3.90149 10.9725 3.88007 10.9072 3.8642 10.8407C3.8418 10.7466 3.83057 10.6495 3.83057 10.55L3.83057 6.5C3.83057 6.40051 3.8418 6.30359 3.8642 6.20947C3.88 6.14282 3.90143 6.07764 3.92847 6.01367C3.95697 5.94629 3.99078 5.88245 4.02991 5.8219C4.07758 5.74817 4.13318 5.67957 4.19666 5.61609C4.26019 5.55261 4.3288 5.49707 4.40247 5.44934C4.46295 5.41028 4.52692 5.37646 4.59424 5.3479C4.65814 5.32092 4.72345 5.29944 4.78998 5.28357C4.88416 5.26123 4.98108 5.25 5.08057 5.25L12 5.25L12 6C12 6.55225 12.4477 7 13 7L21 7C21.5523 7 22 6.55225 22 6L22 3C22 2.44775 21.5523 2 21 2ZM10.5 10.251L10.5 14.251C10.5 14.671 10.83 15.001 11.25 15.001C11.67 15.001 12 14.671 12 14.251L12 13.5558L13.2202 14.7754C13.5172 15.0723 13.9839 15.0721 14.2808 14.775C14.5778 14.478 14.5776 14.0114 14.2806 13.7145L13.614 13.0482C13.7431 12.964 13.8947 12.8414 14.0016 12.723C14.0597 12.6587 14.113 12.5909 14.1614 12.5199C14.2451 12.397 14.3143 12.2642 14.3688 12.1213C14.4031 12.0315 14.4307 11.9402 14.4515 11.8473C14.4838 11.7036 14.5 11.5557 14.5 11.4047C14.5 11.2535 14.4838 11.106 14.4515 10.962C14.4307 10.8691 14.4031 10.7778 14.3688 10.688C14.3143 10.5453 14.2451 10.4124 14.1614 10.2894C14.113 10.2184 14.0598 10.1506 14.0016 10.0863C13.8947 9.9679 13.7766 9.86658 13.6474 9.78235C13.5787 9.73755 13.5069 9.69763 13.4319 9.66248C13.3113 9.60596 13.1875 9.56433 13.0605 9.53748C12.9457 9.51318 12.8283 9.50098 12.7083 9.50098L11.25 9.50098C11.1464 9.50098 11.0505 9.51929 10.9621 9.55591C10.8737 9.59253 10.7929 9.64746 10.7197 9.7207C10.6464 9.79395 10.5916 9.87463 10.5549 9.96313C10.5183 10.0515 10.5 10.1475 10.5 10.251ZM15.5 10.251L15.5 14.251C15.5 14.671 15.83 15.001 16.25 15.001C16.67 15.001 17 14.671 17 14.251L17 13.3083L18 13.3083C18.0673 13.3083 18.1339 13.3053 18.1998 13.2991L19.0845 13.3C19.1839 13.3 19.2807 13.3113 19.3748 13.3336C19.4409 13.3495 19.5073 13.3711 19.5708 13.3979C19.6381 13.4264 19.702 13.4602 19.7625 13.4994C19.8362 13.5471 19.9048 13.6027 19.9684 13.6661C20.0317 13.7295 20.0872 13.798 20.1348 13.8715C20.1738 13.9319 20.2081 13.9963 20.2366 14.0637C20.2636 14.1277 20.285 14.1929 20.3008 14.2595C20.3232 14.3538 20.3345 14.4506 20.3345 14.55L20.3345 17.5C20.3345 17.5996 20.3232 17.6964 20.3008 17.7906C20.285 17.8572 20.2635 17.9225 20.2366 17.9863C20.2081 18.0537 20.1743 18.1177 20.1351 18.1781C20.0875 18.2517 20.0318 18.3204 19.9684 18.3839C19.905 18.4473 19.8366 18.5027 19.7631 18.5503C19.7028 18.5892 19.6379 18.6238 19.5708 18.6521C19.5074 18.679 19.4426 18.7003 19.3766 18.7161C19.2824 18.7385 19.184 18.75 19.0845 18.75L12 18.75L12 18C12 17.4478 11.5523 17 11 17L3 17C2.44769 17 2 17.4478 2 18L2 21C2 21.5522 2.44769 22 3 22L11 22C11.5523 22 12 21.5522 12 21L12 20.25L19.0845 20.25C19.2853 20.25 19.4816 20.2291 19.6732 20.1871C19.8372 20.1514 19.9979 20.1001 20.1551 20.0337C20.3123 19.9672 20.4608 19.8877 20.6007 19.7952C20.7537 19.694 20.8966 19.577 21.029 19.4446C21.1614 19.3123 21.2782 19.1694 21.3795 19.0165C21.472 18.8766 21.5516 18.7279 21.618 18.5707C21.6846 18.4135 21.7358 18.2528 21.7716 18.0889C21.8135 17.8972 21.8345 17.7009 21.8345 17.5L21.8345 14.55C21.8345 14.3491 21.8135 14.1528 21.7716 13.9612C21.7357 13.7972 21.6846 13.6366 21.618 13.4794C21.5516 13.3224 21.4722 13.174 21.3798 13.0342C21.2787 12.8816 21.1611 12.7377 21.029 12.6055C20.8966 12.4731 20.7539 12.3563 20.6009 12.2551C20.4609 12.1626 20.3123 12.0829 20.1552 12.0165C20.0786 11.9841 20.0012 11.9553 19.923 11.9302C19.9377 11.8816 19.9503 11.8325 19.9608 11.783C19.9869 11.6597 20 11.5336 20 11.4047C20 11.2759 19.9869 11.1498 19.9608 11.0265C19.9331 10.8956 19.8907 10.7678 19.8336 10.6432C19.7947 10.5583 19.7501 10.4773 19.6998 10.4C19.614 10.2684 19.5116 10.1476 19.3926 10.0377C19.3192 9.97009 19.2417 9.90845 19.16 9.85303C19.0361 9.76892 18.9025 9.69885 18.7593 9.64294C18.6605 9.60449 18.56 9.57373 18.4578 9.5509C18.3089 9.51758 18.1563 9.50098 18 9.50098L16.25 9.50098C16.1464 9.50098 16.0505 9.51929 15.9621 9.55591C15.8737 9.59253 15.7929 9.64746 15.7197 9.7207C15.6464 9.79395 15.5916 9.87463 15.5549 9.96313C15.5183 10.0515 15.5 10.1475 15.5 10.251ZM12 11.8083L12.7083 11.8083C12.7596 11.7991 12.8441 11.7667 12.8882 11.7179C12.929 11.6484 13 11.498 13 11.4047C13 11.3113 12.9796 11.2299 12.9389 11.1604C12.8948 11.1116 12.7964 11.0135 12.7452 11.0043L12 11.001L12 11.8083ZM17 11.8083L18 11.8083C18.1002 11.8083 18.1893 11.7876 18.2675 11.7461C18.306 11.7256 18.342 11.7 18.3752 11.6693C18.4329 11.6161 18.4706 11.5573 18.4883 11.4929C18.4883 11.4625 18.4961 11.3448 18.4883 11.3165C18.4707 11.2522 18.4329 11.1934 18.3752 11.14C18.342 11.1094 18.3062 11.0839 18.2676 11.0634C18.1895 11.0219 18.1002 11.001 18 11.001L17 11.001L17 11.8083Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/finish-o.svg b/packages/theme-saas/src/svgs/finish-o.svg
new file mode 100644
index 000000000..112eb7333
--- /dev/null
+++ b/packages/theme-saas/src/svgs/finish-o.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1879)">
+		<path id="矢量 30" d="M16 2L6 2C4.34314 2 3 3.34326 3 5L3 19C3 20.6567 4.34314 22 6 22L11.8925 22C9.85962 20.7751 8.5 18.5464 8.5 16C8.5 12.134 11.634 9 15.5 9C16.775 9 17.9703 9.34082 19 9.93652L19 5C19 3.34326 17.6569 2 16 2ZM6 5.25L13.5 5.25C13.92 5.25 14.25 5.58008 14.25 6C14.25 6.41992 13.92 6.75 13.5 6.75L6 6.75C5.57996 6.75 5.25 6.41992 5.25 6C5.25 5.58008 5.57996 5.25 6 5.25ZM6 8.75L8 8.75C8.42004 8.75 8.75 9.08008 8.75 9.5C8.75 9.91992 8.42004 10.25 8 10.25L6 10.25C5.57996 10.25 5.25 9.91992 5.25 9.5C5.25 9.08008 5.57996 8.75 6 8.75ZM10 16C10 12.9624 12.4624 10.5 15.5 10.5C18.5376 10.5 21 12.9624 21 16C21 19.0376 18.5376 21.5 15.5 21.5C12.4624 21.5 10 19.0376 10 16ZM18.5281 15.0325L15.5028 18.0325C15.3268 18.207 15.1508 18.2944 14.9747 18.2944C14.7987 18.2944 14.6226 18.207 14.4465 18.0325L12.4719 16.0742C12.1737 15.7786 12.1718 15.312 12.4674 15.0137C12.7632 14.7153 13.2299 14.7134 13.5281 15.0093L14.9747 16.4436L17.4719 13.9673C17.7701 13.6716 18.2368 13.6736 18.5326 13.9717C18.8282 14.27 18.8263 14.7368 18.5281 15.0325Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/item-planning-properties.svg b/packages/theme-saas/src/svgs/item-planning-properties.svg
new file mode 100644
index 000000000..9eb14f0dc
--- /dev/null
+++ b/packages/theme-saas/src/svgs/item-planning-properties.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1886)">
+		<path id="矢量 162" d="M20 2L4 2C2.89545 2 2 2.89539 2 4L2 7C2 8.10461 2.89545 9 4 9C2.89545 9 2 9.89539 2 11L2 13C2 14.1046 2.89545 15 4 15C2.89545 15 2 15.8954 2 17L2 20C2 21.1046 2.89545 22 4 22L12.101 22C10.8044 20.7295 10 18.9587 10 17C10 13.134 13.134 10 17 10C18.9587 10 20.7295 10.8044 22 12.1011L22 11C22 9.89539 21.1046 9 20 9C21.1046 9 22 8.10461 22 7L22 4C22 2.89539 21.1046 2 20 2ZM4.75 4.75L7.25 4.75C7.66418 4.75 8 5.08582 8 5.5C8 5.91418 7.66418 6.25 7.25 6.25L4.75 6.25C4.33582 6.25 4 5.91418 4 5.5C4 5.08582 4.33582 4.75 4.75 4.75ZM7.25 11.25L4.75 11.25C4.33582 11.25 4 11.5858 4 12C4 12.4142 4.33582 12.75 4.75 12.75L7.25 12.75C7.66418 12.75 8 12.4142 8 12C8 11.5858 7.66418 11.25 7.25 11.25ZM11.5 17C11.5 13.9624 13.9625 11.5 17 11.5C20.0376 11.5 22.5 13.9624 22.5 17C22.5 20.0376 20.0376 22.5 17 22.5C13.9625 22.5 11.5 20.0376 11.5 17ZM17 13.5C16.4477 13.5 16 13.9478 16 14.5C16 15.0522 16.4477 15.5 17 15.5C17.5523 15.5 18 15.0522 18 14.5C18 13.9478 17.5523 13.5 17 13.5ZM17 16.5C16.5858 16.5 16.25 16.8358 16.25 17.25L16.25 19.75C16.25 20.1642 16.5858 20.5 17 20.5C17.4142 20.5 17.75 20.1642 17.75 19.75L17.75 17.25C17.75 16.8358 17.4142 16.5 17 16.5ZM4.75 17.75L7.25 17.75C7.66418 17.75 8 18.0858 8 18.5C8 18.9142 7.66418 19.25 7.25 19.25L4.75 19.25C4.33582 19.25 4 18.9142 4 18.5C4 18.0858 4.33582 17.75 4.75 17.75Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/location-number.svg b/packages/theme-saas/src/svgs/location-number.svg
new file mode 100644
index 000000000..274a57888
--- /dev/null
+++ b/packages/theme-saas/src/svgs/location-number.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1907)">
+		<path id="矢量 183" d="M13.5529 16.4424C16.851 13.2213 18.5 10.2988 18.5 7.6748C18.5 3.91919 15.5898 0.874756 12 0.874756C8.41016 0.874756 5.5 3.91919 5.5 7.6748C5.5 10.2988 7.14905 13.2213 10.4471 16.4424C7.88611 16.6705 6 17.4492 6 18.3748C6 19.4794 8.68628 20.3748 12 20.3748C15.3137 20.3748 18 19.4794 18 18.3748C18 17.4492 16.1139 16.6705 13.5529 16.4424ZM12.1396 7.41016C12.506 7.41016 12.839 7.48083 13.1387 7.62231C13.1984 7.65051 13.257 7.68152 13.314 7.71533C13.4745 7.81042 13.6187 7.92188 13.7465 8.04968C13.8921 8.19531 14.0165 8.36218 14.1196 8.55029C14.1609 8.62549 14.1978 8.70251 14.2302 8.78137C14.3502 9.07275 14.4102 9.38879 14.4102 9.72949C14.4102 10.079 14.347 10.4016 14.2207 10.6971C14.183 10.7855 14.1394 10.8716 14.0903 10.9551C13.9927 11.1212 13.8782 11.2708 13.7468 11.4034C13.5912 11.5607 13.412 11.6945 13.209 11.8047C13.1179 11.8544 13.0245 11.8981 12.9287 11.9355C12.6323 12.0518 12.3131 12.1099 11.9712 12.1099C11.5573 12.1099 11.1809 12.0299 10.8424 11.8701C10.799 11.8496 10.7561 11.8278 10.7139 11.8047C10.5302 11.7035 10.3662 11.5823 10.2219 11.4409C10.076 11.298 9.95032 11.1344 9.84473 10.9502C9.66907 10.6068 9.52979 10.1237 9.52979 9.69043C9.52979 9.42908 9.56506 9.1781 9.6355 8.93726C9.66199 8.84668 9.69348 8.75757 9.72998 8.66992C9.8634 8.34924 10.0864 7.93591 10.3989 7.42969L12.1006 4.6709L13.2896 4.6709L11.8101 7.04883L11.5 7.50049C11.6725 7.44031 11.8857 7.41016 12.1396 7.41016ZM11.959 11.1406C12.2279 11.1406 12.4601 11.0807 12.6555 10.9607C12.7462 10.905 12.829 10.8364 12.9038 10.7549C12.9579 10.6964 13.0059 10.6339 13.0476 10.5676C13.1893 10.3427 13.2603 10.0731 13.2603 9.75879C13.2603 9.41162 13.1791 9.12061 13.0166 8.88574C12.9825 8.83655 12.9449 8.78992 12.9038 8.74561C12.829 8.66406 12.7462 8.59546 12.6555 8.53979C12.4601 8.4198 12.2279 8.35986 11.959 8.35986C11.6996 8.35986 11.474 8.41675 11.2822 8.53064C11.184 8.58899 11.0946 8.66223 11.0142 8.75049C10.9652 8.80444 10.9214 8.86157 10.8827 8.922C10.7344 9.15332 10.6602 9.43225 10.6602 9.75879C10.6602 10.0947 10.738 10.3781 10.8939 10.6086C10.9299 10.6619 10.97 10.7123 11.0142 10.7598C11.0887 10.8395 11.1709 10.9066 11.2606 10.9613C11.457 11.0808 11.6898 11.1406 11.959 11.1406ZM1.25 18.3756C1.25 16.6337 3.37195 15.1108 6.53589 14.2841C6.82043 14.7012 7.12866 15.1207 7.46033 15.5432C4.64856 16.1008 2.75 17.1603 2.75 18.3756C2.75 20.1705 6.89136 21.6256 12 21.6256C17.1086 21.6256 21.25 20.1705 21.25 18.3756C21.25 17.1603 19.3514 16.1008 16.5397 15.5432C16.8713 15.1207 17.1796 14.7012 17.4641 14.2841C20.6281 15.1108 22.75 16.6337 22.75 18.3756C22.75 20.9989 17.937 23.1256 12 23.1256C6.06299 23.1256 1.25 20.9989 1.25 18.3756Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/main-freight-settled.svg b/packages/theme-saas/src/svgs/main-freight-settled.svg
new file mode 100644
index 000000000..0fc3d6225
--- /dev/null
+++ b/packages/theme-saas/src/svgs/main-freight-settled.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1901)">
+		<path id="矢量 177" d="M15 1.74951L5 1.74951C3.34314 1.74951 2 3.09277 2 4.74951L2 20.0793C2 20.835 2.80603 21.3176 3.47217 20.9609L6.65503 19.2556C7.05493 19.0415 7.54883 19.1233 7.8584 19.4548L9.26892 20.9663C9.66431 21.3899 10.3357 21.3899 10.7311 20.9663L10.832 20.8582C9.99414 19.7043 9.5 18.2847 9.5 16.7495C9.5 16.6064 9.50427 16.4646 9.5127 16.3237C9.3512 16.187 9.25 15.9819 9.25 15.7495L9.25 12.9043L7 12.9043C6.57996 12.9043 6.25 12.5742 6.25 12.1543C6.25 11.7344 6.57996 11.4043 7 11.4043L9.25 11.4043L9.25 9.54712L7 9.54712C6.57996 9.54712 6.25 9.21704 6.25 8.79712C6.25 8.3772 6.57996 8.04712 7 8.04712L8.51062 8.04712L6.39746 5.19604C6.14734 4.85864 6.21594 4.39697 6.55347 4.14697C6.89087 3.89697 7.35242 3.96558 7.60254 4.30298L10 7.5376L12.3975 4.30298C12.6476 3.96558 13.1091 3.89697 13.4465 4.14697C13.7841 4.39697 13.8527 4.85864 13.6025 5.19604L11.4894 8.04712L13 8.04712C13.42 8.04712 13.75 8.3772 13.75 8.79712C13.75 9.21704 13.42 9.54712 13 9.54712L10.75 9.54712L10.75 11.4043L11.98 11.4043C13.1995 10.3721 14.7771 9.74951 16.5 9.74951C17.0149 9.74951 17.5167 9.80518 18 9.91064L18 4.74951C18 3.09277 16.6569 1.74951 15 1.74951ZM11 16.7498C11 13.7124 13.4624 11.2498 16.5 11.2498C19.5376 11.2498 22 13.7124 22 16.7498C22 19.7874 19.5376 22.2498 16.5 22.2498C13.4624 22.2498 11 19.7874 11 16.7498ZM16.5028 19.0325L19.5281 16.0325C19.8263 15.7366 19.8282 15.27 19.5326 14.9717C19.2368 14.6736 18.7701 14.6716 18.4719 14.9673L15.9747 17.4436L14.5281 16.0093C14.2299 15.7134 13.7632 15.7153 13.4674 16.0137C13.1718 16.3118 13.1737 16.7786 13.4719 17.0742L15.4465 19.0325C15.5197 19.105 15.6002 19.1592 15.6882 19.1956C15.7762 19.2317 15.8718 19.2498 15.9747 19.2498C16.0776 19.2498 16.1731 19.2317 16.2611 19.1956C16.3491 19.1592 16.4297 19.105 16.5028 19.0325Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/main-freight-to-be-settled.svg b/packages/theme-saas/src/svgs/main-freight-to-be-settled.svg
new file mode 100644
index 000000000..ca7a57ab1
--- /dev/null
+++ b/packages/theme-saas/src/svgs/main-freight-to-be-settled.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="23.999878" viewBox="0 0 24 23.9999" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1900)">
+		<path id="矢量 176" d="M15 1.74988L5 1.74988C3.34314 1.74988 2 3.09302 2 4.74988L2 20.0797C2 20.8353 2.80603 21.318 3.47217 20.9613L6.65503 19.256C7.05493 19.0419 7.54883 19.1237 7.8584 19.4552L9.26892 20.9667C9.66431 21.3903 10.3357 21.3903 10.7311 20.9667L10.832 20.8585C9.99414 19.7045 9.5 18.2848 9.5 16.7499C9.5 16.2897 9.54443 15.84 9.62915 15.4045C9.40112 15.2772 9.25 15.0342 9.25 14.7499L9.25 12.9047L7 12.9047C6.57996 12.9047 6.25 12.5747 6.25 12.1547C6.25 11.7346 6.57996 11.4047 7 11.4047L9.25 11.4047L9.25 9.54749L7 9.54749C6.57996 9.54749 6.25 9.21753 6.25 8.79749C6.25 8.37744 6.57996 8.04749 7 8.04749L8.51062 8.04749L6.39746 5.19641C6.14734 4.85901 6.21594 4.39746 6.55347 4.14734C6.89087 3.89722 7.35242 3.96582 7.60254 4.30334L10 7.53796L12.3975 4.30334C12.6476 3.96582 13.1091 3.89722 13.4465 4.14734C13.7841 4.39746 13.8527 4.85901 13.6025 5.19641L11.4894 8.04749L13 8.04749C13.42 8.04749 13.75 8.37744 13.75 8.79749C13.75 9.21753 13.42 9.54749 13 9.54749L10.75 9.54749L10.75 11.4047L11.9799 11.4047C13.1993 10.3723 14.777 9.74976 16.5 9.74976C17.0149 9.74976 17.5167 9.8053 18 9.91089L18 4.74988C18 3.09302 16.6569 1.74988 15 1.74988ZM11 16.7499C11 13.7123 13.4624 11.2499 16.5 11.2499C19.5376 11.2499 22 13.7123 22 16.7499C22 19.7875 19.5376 22.2499 16.5 22.2499C13.4624 22.2499 11 19.7875 11 16.7499ZM16.75 14.7501L16.75 16.684L18.4893 18.1818C18.8076 18.4557 18.8423 18.9213 18.5682 19.2394C18.2942 19.5577 17.8289 19.5924 17.5105 19.3185L15.5106 17.5963C15.4279 17.525 15.3638 17.4398 15.3182 17.3405C15.2955 17.2909 15.2784 17.2401 15.2671 17.1881C15.2557 17.1361 15.25 17.0824 15.25 17.028L15.25 14.7501C15.25 14.3301 15.58 14.0001 16 14.0001C16.4199 14.0001 16.75 14.3301 16.75 14.7501Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/maintain-inspection-records.svg b/packages/theme-saas/src/svgs/maintain-inspection-records.svg
new file mode 100644
index 000000000..619337851
--- /dev/null
+++ b/packages/theme-saas/src/svgs/maintain-inspection-records.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1905)">
+		<path id="矢量 181" d="M14.9216 2L4.92163 2C3.26477 2 1.92163 3.34326 1.92163 5L1.92163 19C1.92163 20.6567 3.26477 22 4.92163 22L9.86145 22C9.19873 21.0618 8.77942 19.335 9.49988 18C10.4102 16.313 11.5863 15.9238 11.5863 15.9238L11.5634 15.802C11.2261 13.894 11.7416 12.384 13.027 10.9233L13.136 10.803C14.4779 9.3584 16.2067 8.66748 17.9216 8.9502L17.9216 5C17.9216 3.34326 16.5785 2 14.9216 2ZM4.92163 5.25L12.4216 5.25C12.8417 5.25 13.1716 5.58008 13.1716 6C13.1716 6.41992 12.8417 6.75 12.4216 6.75L4.92163 6.75C4.50159 6.75 4.17163 6.41992 4.17163 6C4.17163 5.58008 4.50159 5.25 4.92163 5.25ZM4.92163 8.75L6.92163 8.75C7.34167 8.75 7.67163 9.08008 7.67163 9.5C7.67163 9.91992 7.34167 10.25 6.92163 10.25L4.92163 10.25C4.50159 10.25 4.17163 9.91992 4.17163 9.5C4.17163 9.08008 4.50159 8.75 4.92163 8.75ZM20.7599 18.0425C20.4318 18.3706 20.0636 18.6411 19.6554 18.8535C19.4727 18.9487 19.2852 19.0305 19.093 19.0991C18.8696 19.1787 18.6398 19.2407 18.4036 19.2844C17.9705 19.365 17.5348 19.3818 17.0963 19.3347C16.7687 19.2998 16.4503 19.2302 16.1414 19.1262L14.0424 21.2246C13.8507 21.4163 13.6301 21.5625 13.3806 21.6638C13.2657 21.7104 13.1487 21.7458 13.0293 21.7703C12.8983 21.7969 12.7646 21.8103 12.6282 21.8103C12.3674 21.8103 12.1167 21.7615 11.8759 21.6638C11.7611 21.6172 11.6525 21.5613 11.55 21.4956C11.4296 21.4185 11.3175 21.3281 11.214 21.2244C11.1105 21.1208 11.0201 21.009 10.943 20.8884C10.8773 20.7861 10.8213 20.6775 10.7747 20.5625C10.7281 20.4478 10.6926 20.3306 10.6683 20.2112C10.6416 20.0803 10.6282 19.9465 10.6282 19.8103C10.6282 19.5496 10.677 19.2988 10.7747 19.0579C10.8759 18.8083 11.0223 18.5876 11.214 18.396L13.3125 16.2976C13.2845 16.2146 13.259 16.1306 13.236 16.0464C13.1735 15.8167 13.1294 15.582 13.1038 15.3425C13.0798 15.1191 13.0724 14.8965 13.0815 14.6746C13.0903 14.4609 13.1145 14.2476 13.1539 14.0352C13.1978 13.7991 13.2595 13.5691 13.3394 13.3457C13.4078 13.1536 13.4897 12.9661 13.5848 12.7832C13.6718 12.6165 13.7683 12.4563 13.8744 12.3027C14.0281 12.0808 14.2019 11.8726 14.396 11.6785C14.5974 11.4771 14.8137 11.2976 15.0449 11.1399C15.2115 11.0264 15.3857 10.9241 15.5677 10.8333C15.7622 10.7361 15.9615 10.6538 16.1659 10.5867C16.4032 10.5083 16.6472 10.45 16.8978 10.4119C17.1284 10.377 17.3589 10.3596 17.5892 10.3601C17.8192 10.3608 18.0491 10.3792 18.2788 10.415C18.5291 10.4543 18.7726 10.5137 19.0094 10.593C19.2135 10.6614 19.4131 10.7446 19.6073 10.8428C19.7561 10.918 19.8489 11.0115 19.8856 11.1235C19.9225 11.2356 19.9033 11.366 19.8281 11.5146C19.816 11.5386 19.7509 11.6213 19.7354 11.6428L17.9315 13.4463C17.8583 13.5195 17.8035 13.6003 17.7668 13.6887C17.7302 13.7771 17.7118 13.873 17.7118 13.9766C17.7118 14.0801 17.7301 14.1763 17.7667 14.2646C17.8033 14.353 17.8583 14.4338 17.9315 14.5071C18.078 14.6533 18.2548 14.7266 18.4618 14.7266C18.5654 14.7266 18.6614 14.7083 18.7498 14.6716C18.8381 14.635 18.9189 14.5801 18.9922 14.5071L20.796 12.7036C21.0317 12.4678 21.2675 12.4678 21.5032 12.7036C21.5409 12.7412 21.5718 12.7839 21.5958 12.8315C21.694 13.0259 21.7772 13.2251 21.8456 13.4292C21.9248 13.666 21.9841 13.9097 22.0234 14.1602C22.0594 14.3899 22.0778 14.6199 22.0782 14.8496C22.0789 15.0801 22.0615 15.3105 22.0265 15.5408C21.9556 16.0071 21.8151 16.4504 21.6052 16.8708C21.5143 17.0527 21.4121 17.2271 21.2986 17.3936C21.1409 17.6248 20.9613 17.8411 20.7599 18.0425Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/msg.svg b/packages/theme-saas/src/svgs/msg.svg
new file mode 100644
index 000000000..3ef497d23
--- /dev/null
+++ b/packages/theme-saas/src/svgs/msg.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1908)">
+		<g opacity="0.000000"/>
+		<path id="矢量 184" d="M14.1617 2.0957C14.0532 2.03479 13.928 2 13.7947 2L6.69739 2C4.93018 2 3.5 3.44141 3.5 5.21667L3.5 18.7833C3.5 20.5586 4.93018 22 6.69739 22L17.3026 22C19.0698 22 20.5 20.5586 20.5 18.7833L20.5 8.79333C20.5 8.56653 20.3994 8.36328 20.2405 8.22632C20.2109 8.18591 20.1782 8.14697 20.1426 8.10986L14.6188 2.38159C14.491 2.24902 14.3337 2.15161 14.1617 2.0957ZM14.5439 4.46399L17.994 8.04297L15.5079 8.04333C14.9958 8.04333 14.5447 7.61792 14.5447 7.14893L14.5439 4.46399ZM7.99841 15.3424L7.99841 16.7516C7.99841 17.1716 8.32837 17.5016 8.74841 17.5016C9.16846 17.5016 9.49841 17.1716 9.49841 16.7516L9.49841 12.7516C9.49841 12.6481 9.4801 12.5521 9.44348 12.4637C9.40686 12.3754 9.35193 12.2946 9.27881 12.2213C9.20557 12.1481 9.12476 12.0931 9.03638 12.0565C8.948 12.0199 8.85205 12.0016 8.74841 12.0016C8.68408 12.0016 8.62183 12.0094 8.5614 12.0249C8.5011 12.0404 8.44275 12.0637 8.38647 12.0947C8.3302 12.1259 8.2793 12.1627 8.23401 12.2053C8.1886 12.248 8.14868 12.2966 8.11438 12.351L6.99841 14.1169L5.88245 12.351C5.82715 12.2634 5.76038 12.1921 5.68225 12.137C5.604 12.0818 5.5144 12.0428 5.41345 12.02C5.31238 11.9972 5.21472 11.994 5.12048 12.0103C5.02625 12.0265 4.9353 12.0624 4.84778 12.1177C4.79346 12.152 4.74487 12.1919 4.70215 12.2372C4.65942 12.2825 4.62256 12.3334 4.59155 12.3896C4.56042 12.446 4.53723 12.5044 4.52173 12.5647C4.50623 12.625 4.49841 12.6873 4.49841 12.7516L4.49841 16.7516C4.49841 17.1716 4.82837 17.5016 5.24841 17.5016C5.66846 17.5016 5.99841 17.1716 5.99841 16.7516L5.99841 15.3424L6.36438 15.9215C6.38171 15.9431 6.44849 16.0315 6.46814 16.0511C6.48975 16.0684 6.57422 16.14 6.59778 16.1549C6.6853 16.2102 6.77625 16.246 6.87048 16.2622C6.96472 16.2784 7.06238 16.2753 7.16345 16.2524C7.2644 16.2296 7.354 16.1907 7.43225 16.1356C7.51038 16.0804 7.57715 16.009 7.63245 15.9215L7.99841 15.3424ZM13.0027 13.7289C12.9688 13.6986 12.8893 13.6313 12.8354 13.6055C12.6913 13.5363 12.5233 13.5016 12.3313 13.5016C12.2084 13.5016 12.0924 13.5168 11.9835 13.5474C11.8901 13.5736 11.8109 13.6082 11.7461 13.6511C11.7552 13.6671 11.7007 13.7468 11.7289 13.7689C11.8696 13.8794 12.1095 13.9613 12.4484 14.0148C13.4396 14.1714 14.0715 14.5135 14.3442 15.0413C14.4729 15.2902 14.5216 15.5804 14.4904 15.9119C14.4744 16.0822 14.4344 16.2422 14.3707 16.3921C14.3268 16.4955 14.2715 16.5941 14.2048 16.688C14.0684 16.8613 13.8486 17.0709 13.6415 17.1885C13.274 17.3972 12.839 17.5016 12.3363 17.5016C11.8776 17.5016 11.4604 17.4132 11.0851 17.2363C10.8505 17.1163 10.575 16.9288 10.4132 16.75C10.2983 16.6229 10.2053 16.4852 10.1343 16.337C10.0875 16.2393 10.05 16.1365 10.0223 16.0295C9.91711 15.6229 10.1538 15.2208 10.5604 15.1156C10.967 15.0103 11.3693 15.2471 11.4745 15.6537C11.4941 15.7295 11.5663 15.7992 11.6909 15.8629C11.8716 15.9553 12.0867 16.0016 12.3363 16.0016C12.5748 16.0016 12.7629 15.9625 12.9006 15.8843C12.9086 15.8732 12.995 15.792 12.9969 15.7714C12.9941 15.6746 12.7335 15.5784 12.2144 15.4965C11.6189 15.4023 11.1486 15.2201 10.8033 14.9495C10.6189 14.8048 10.4733 14.6381 10.3667 14.4493C10.3192 14.3569 10.2522 14.2069 10.2246 14.1088C10.1868 13.974 10.1678 13.8335 10.1678 13.6881C10.1678 13.5845 10.1788 13.4834 10.2008 13.3848C10.2368 13.2233 10.3021 13.0684 10.3969 12.92C10.5254 12.7188 10.699 12.5455 10.9176 12.4006C11.1135 12.2709 11.334 12.1716 11.5787 12.103C11.8201 12.0354 12.0709 12.0016 12.3313 12.0016C12.7051 12.0016 13.051 12.0681 13.369 12.2013C13.4077 12.2175 13.4471 12.2354 13.4851 12.2535C13.8158 12.4124 14.0688 12.6232 14.2441 12.8857C14.2765 12.9342 14.3064 12.9849 14.3335 13.0369C14.5272 13.4094 14.3867 13.8545 14.0142 14.0482C13.6415 14.2421 13.1964 14.1016 13.0027 13.7289ZM19.2788 14.2216C19.2072 14.15 19.1283 14.0959 19.0422 14.0593C19.1077 14.0309 19.1705 13.9924 19.2286 13.944C19.5511 13.6748 19.593 13.21 19.324 12.8876C19.156 12.6863 18.9669 12.5176 18.7568 12.3813C18.681 12.3323 18.6025 12.2874 18.5214 12.2467C18.3411 12.1565 18.1554 12.0911 17.9645 12.0507C17.8099 12.0179 17.6517 12.0016 17.4902 12.0016C17.3324 12.0016 17.1779 12.0172 17.0265 12.0486C16.8411 12.0869 16.6604 12.1488 16.4846 12.2341C16.4061 12.2723 16.3301 12.3145 16.2565 12.3605C16.049 12.4905 15.8611 12.6519 15.693 12.8448C15.6331 12.9138 15.5768 12.9854 15.5242 13.0594C15.3832 13.2585 15.2689 13.4767 15.1815 13.7139C15.1406 13.8251 15.1066 13.9379 15.0793 14.0522C15.0254 14.2789 14.9984 14.5121 14.9984 14.7516C14.9984 14.9912 15.0254 15.2244 15.0793 15.451C15.1066 15.5654 15.1406 15.6782 15.1815 15.7894C15.2689 16.0266 15.3832 16.2446 15.5242 16.4437C15.5767 16.5178 15.6331 16.5895 15.693 16.6584C15.8611 16.8514 16.049 17.0128 16.2565 17.1428C16.3301 17.1888 16.4061 17.231 16.4846 17.2692C16.6604 17.3545 16.8411 17.4164 17.0265 17.4547C17.1779 17.486 17.3324 17.5016 17.4902 17.5016C17.6517 17.5016 17.8099 17.4852 17.9646 17.4525C18.1556 17.4121 18.3413 17.3467 18.5217 17.2563C18.603 17.2157 18.6815 17.1708 18.7573 17.1216C18.9674 16.9852 19.1565 16.8165 19.3243 16.6152C19.3525 16.5814 19.3773 16.5459 19.3988 16.5084C19.4204 16.4709 19.4386 16.4315 19.4536 16.3903C19.4685 16.349 19.4797 16.3071 19.4872 16.2645C19.4946 16.2219 19.4984 16.1787 19.4984 16.1348L19.4984 14.752C19.4984 14.6483 19.4801 14.5524 19.4435 14.464C19.4069 14.3756 19.3519 14.2948 19.2788 14.2216ZM18.1722 13.8486C18.0774 13.735 17.97 13.6482 17.85 13.588C17.7751 13.5505 17.6984 13.5253 17.6194 13.5122C17.5769 13.5051 17.5338 13.5016 17.4902 13.5016C17.4471 13.5016 17.4047 13.505 17.3628 13.512C17.2866 13.5244 17.2123 13.5482 17.1399 13.5835C17.0232 13.6401 16.918 13.7223 16.8242 13.83C16.7263 13.9438 16.6444 14.082 16.5891 14.2324C16.5479 14.3705 16.4984 14.6012 16.4984 14.7516C16.4984 14.9021 16.519 15.0464 16.5603 15.1844C16.6156 15.3348 16.7211 15.5533 16.819 15.6672C16.9127 15.775 17.0232 15.8632 17.1399 15.9198C17.2123 15.955 17.2866 15.9788 17.3628 15.9913C17.4047 15.9982 17.4473 16.0016 17.4902 16.0016C17.5338 16.0016 17.5769 15.998 17.6194 15.9911C17.6984 15.978 17.7753 15.9526 17.8501 15.9152C17.9019 15.8892 17.9513 15.8583 17.9984 15.8224L17.9984 15.502L17.6486 15.502C17.2286 15.502 16.8986 15.1719 16.8986 14.752C16.8986 14.3319 17.2286 14.002 17.6486 14.002L18.3446 14.002C18.2816 13.9611 18.2234 13.9099 18.1722 13.8486Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/ofd.svg b/packages/theme-saas/src/svgs/ofd.svg
new file mode 100644
index 000000000..43467e4e0
--- /dev/null
+++ b/packages/theme-saas/src/svgs/ofd.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1909)">
+		<path id="矢量 185" d="M2 19.2727L2 4.72729C2 3.22107 3.22107 2 4.72729 2L19.2727 2C20.7789 2 22 3.22107 22 4.72729L22 19.2727C22 20.7789 20.7789 22 19.2727 22L4.72729 22C3.22107 22 2 20.7789 2 19.2727ZM13.4655 5.20081L12.0759 10.2008C11.9635 10.6055 11.5571 10.8351 11.1525 10.7227C10.7478 10.6101 10.5182 10.2039 10.6306 9.79919L12.0203 4.79919C12.1327 4.39453 12.5389 4.16492 12.9436 4.27734C13.3483 4.38989 13.5779 4.79614 13.4655 5.20081ZM10.1097 5.54712L8.08057 7.50366L10.1097 9.46008C10.4121 9.75159 10.4205 10.2183 10.129 10.5206C9.83752 10.8229 9.37097 10.8314 9.0686 10.5399L6.47937 8.04358C6.33569 7.89453 6.24634 7.69702 6.25012 7.48999C6.25391 7.28284 6.33032 7.10742 6.47937 6.96375L9.0686 4.46729C9.37097 4.17578 9.83752 4.18433 10.129 4.48669C10.4205 4.78906 10.4121 5.25562 10.1097 5.54712ZM14.9314 4.46729C14.629 4.17578 14.1625 4.18433 13.871 4.48669C13.5795 4.78906 13.5879 5.25562 13.8903 5.54712L15.9194 7.50366L13.8903 9.46008C13.5879 9.75159 13.5795 10.2183 13.871 10.5206C14.1625 10.8229 14.629 10.8314 14.9314 10.5399L17.5206 8.04358C17.6643 7.89453 17.7537 7.69702 17.7499 7.48999C17.7461 7.28284 17.6697 7.10742 17.5206 6.96375L14.9314 4.46729ZM3.88477 16.25C3.88477 14.4551 5.11597 13 6.63477 13C8.15356 13 9.38477 14.4551 9.38477 16.25C9.38477 18.0449 8.15356 19.5 6.63477 19.5C5.11597 19.5 3.88477 18.0449 3.88477 16.25ZM17.6113 13.067C17.4025 13.0223 17.1888 13 16.9705 13L15.8652 13C15.7617 13 15.6658 13.0183 15.5773 13.0549C15.4889 13.0916 15.4081 13.1465 15.335 13.2196C15.2617 13.2928 15.2068 13.3737 15.1702 13.462C15.1335 13.5504 15.1152 13.6464 15.1152 13.75L15.1152 18.75C15.1152 18.8535 15.1335 18.9495 15.1702 19.0378C15.2068 19.1263 15.2617 19.2072 15.335 19.2803C15.4081 19.3535 15.4889 19.4084 15.5773 19.4451C15.6658 19.4817 15.7617 19.5 15.8652 19.5L16.9705 19.5C17.1888 19.5 17.4025 19.4777 17.6113 19.4329C17.8138 19.3895 18.012 19.3251 18.2056 19.2396C18.3567 19.1729 18.5007 19.0953 18.6377 19.0068C18.8427 18.8744 19.032 18.7177 19.2054 18.5366C19.333 18.4033 19.4479 18.2614 19.5498 18.1108C19.677 17.9227 19.7849 17.72 19.8722 17.5048C19.9404 17.3364 19.9943 17.1648 20.0337 16.9901C20.0879 16.7499 20.1152 16.5023 20.1152 16.25C20.1152 15.9978 20.0881 15.7517 20.0341 15.5116C19.9946 15.3364 19.9406 15.1639 19.8722 14.9952C19.7849 14.7798 19.6775 14.5779 19.55 14.3895C19.448 14.2388 19.3331 14.0968 19.2054 13.9634C19.032 13.7823 18.8428 13.6256 18.6378 13.4932C18.5012 13.405 18.3561 13.3269 18.2056 13.2604C18.012 13.1749 17.8138 13.1105 17.6113 13.067ZM13.7654 14.5151L11.7524 14.5151L11.7524 15.6152L13.5814 15.6152C14.0015 15.6152 14.3314 15.9452 14.3314 16.3652C14.3314 16.7853 14.0015 17.1152 13.5814 17.1152L11.7524 17.1152L11.7524 18.9651C11.7524 19.3851 11.4225 19.7151 11.0024 19.7151C10.5825 19.7151 10.2524 19.3851 10.2524 18.9651L10.2524 13.7651C10.2524 13.6615 10.2708 13.5656 10.3074 13.4772C10.344 13.3888 10.3989 13.308 10.4722 13.2347C10.5454 13.1615 10.6262 13.1066 10.7146 13.0701C10.803 13.0334 10.8989 13.0151 11.0024 13.0151L13.7654 13.0151C14.1853 13.0151 14.5154 13.3451 14.5154 13.7651C14.5154 14.1851 14.1853 14.5151 13.7654 14.5151ZM5.38477 16.25C5.38477 15.2834 5.94446 14.5 6.63477 14.5C7.32507 14.5 7.88477 15.2834 7.88477 16.25C7.88477 17.2164 7.32507 18 6.63477 18C5.94446 18 5.38477 17.2164 5.38477 16.25ZM16.6152 14.5L16.9705 14.5C17.0834 14.5 17.1938 14.5117 17.3016 14.5352C17.4032 14.5573 17.5027 14.5897 17.5997 14.6326C17.6606 14.6594 17.7194 14.6898 17.776 14.7238C17.9016 14.799 18.0171 14.8914 18.1222 15.001C18.1831 15.0646 18.2386 15.132 18.2888 15.2031C18.3654 15.3121 18.4305 15.4318 18.4819 15.5585C18.5138 15.6371 18.5399 15.7172 18.5603 15.7986C18.5969 15.9445 18.6152 16.095 18.6152 16.25C18.6152 16.405 18.5969 16.5554 18.5603 16.7013C18.5399 16.7827 18.5138 16.8629 18.4819 16.9415C18.4305 17.0681 18.3667 17.1859 18.2902 17.2949C18.2397 17.3668 18.1836 17.4348 18.1222 17.4989C18.0171 17.6086 17.9017 17.701 17.7761 17.7762C17.7195 17.8102 17.6606 17.8406 17.5997 17.8674C17.5027 17.9103 17.4033 17.9427 17.3016 17.9648C17.1938 17.9883 17.0834 18 16.9705 18L16.6152 18L16.6152 14.5Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/pending-review.svg b/packages/theme-saas/src/svgs/pending-review.svg
new file mode 100644
index 000000000..72ad0fa8f
--- /dev/null
+++ b/packages/theme-saas/src/svgs/pending-review.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1899)">
+		<path id="矢量 175" d="M8.11877 10.0568L7.69653 12.135L4.4834 12.135C4.39087 12.135 4.29968 12.1428 4.20996 12.1584C4.1134 12.1753 4.01794 12.2013 3.92444 12.2362C3.85681 12.2616 3.79138 12.291 3.72827 12.3248C3.62976 12.3774 3.53662 12.4403 3.4491 12.5134C3.3208 12.6205 3.21216 12.7407 3.12305 12.874C3.0105 13.0424 2.92908 13.2316 2.87891 13.4415L2.03699 16.9681C2.01379 17.0651 2.0022 17.1636 2.0022 17.2634C2.0022 17.3528 2.01123 17.4402 2.02917 17.5258C2.04358 17.594 2.06372 17.6611 2.0896 17.7269C2.14709 17.8732 2.22876 18.0035 2.33484 18.1177C2.4447 18.236 2.57202 18.3281 2.71716 18.3942C2.79565 18.4299 2.87598 18.4565 2.95825 18.4742C3.03821 18.4913 3.12024 18.4999 3.20386 18.4999L9.84619 18.4999C9.62158 17.8138 9.50012 17.0811 9.50012 16.3198C9.50012 13.5582 11.0994 11.17 13.4222 10.031C13.611 9.89844 13.7891 9.75183 13.9563 9.59131C14.2372 9.32178 14.4779 9.02234 14.6787 8.69287C14.8022 8.48999 14.9082 8.28003 14.9963 8.06274C15.0542 7.91992 15.1045 7.77417 15.1471 7.62512C15.1941 7.46069 15.2311 7.29468 15.2582 7.12708C15.295 6.89929 15.3134 6.66858 15.3134 6.43481C15.3134 6.12305 15.2811 5.81787 15.2169 5.52002C15.1565 5.24048 15.0679 4.96716 14.951 4.69983C14.8558 4.48242 14.7448 4.27515 14.6178 4.07825C14.4344 3.79407 14.218 3.53137 13.9684 3.28992C13.5475 2.88306 13.0646 2.56812 12.5195 2.34521C11.9564 2.11499 11.3673 1.99988 10.7521 1.99988C10.3978 1.99988 10.0521 2.03809 9.71521 2.11438C9.46704 2.17065 9.22351 2.24756 8.98462 2.34521C8.68958 2.46594 8.4126 2.61365 8.15393 2.78821C7.93481 2.93616 7.72876 3.10339 7.53577 3.28992C7.28613 3.53137 7.06958 3.79419 6.88635 4.07825C6.75928 4.27515 6.64819 4.48242 6.5531 4.69983C6.43616 4.96729 6.34753 5.24072 6.28723 5.52026C6.2229 5.81824 6.1908 6.12305 6.1908 6.43481C6.1908 6.66968 6.20935 6.90186 6.24658 7.13062C6.27405 7.30029 6.31189 7.46826 6.35986 7.63464C6.46899 8.01306 6.62756 8.37134 6.83557 8.70935C6.91052 8.83118 6.99097 8.94885 7.0769 9.06238C7.22461 9.25757 7.38855 9.44055 7.56873 9.61121C7.69067 9.72668 7.81812 9.83484 7.95117 9.93567C8.0061 9.97729 8.06201 10.0176 8.11877 10.0568ZM11.0001 16.3199C11.0001 13.2823 13.4625 10.8199 16.5001 10.8199C19.5376 10.8199 22.0001 13.2823 22.0001 16.3199C22.0001 19.3575 19.5376 21.8199 16.5001 21.8199C13.4625 21.8199 11.0001 19.3575 11.0001 16.3199ZM16.75 14.3199L16.75 16.2538L18.4894 17.7516C18.8076 18.0256 18.8424 18.491 18.5684 18.8092C18.2943 19.1276 17.8289 19.1622 17.5106 18.8882L15.5106 17.1661C15.428 17.0948 15.3638 17.0096 15.3184 16.9104C15.2955 16.8607 15.2784 16.8099 15.2671 16.7579C15.2557 16.7058 15.25 16.6523 15.25 16.5978L15.25 14.3199C15.25 13.8999 15.5801 13.5699 16 13.5699C16.42 13.5699 16.75 13.8999 16.75 14.3199ZM10.8846 20.4999C11.3129 21.0741 11.827 21.5806 12.4081 21.9999L3.75208 21.9999C3.33203 21.9999 3.00208 21.6699 3.00208 21.2499C3.00208 20.8298 3.33203 20.4999 3.75208 20.4999L10.8846 20.4999Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/process-plan-requirements.svg b/packages/theme-saas/src/svgs/process-plan-requirements.svg
new file mode 100644
index 000000000..a4ebad6ca
--- /dev/null
+++ b/packages/theme-saas/src/svgs/process-plan-requirements.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1890)">
+		<path id="矢量 166" d="M15.5 2L8.5 2C7.94769 2 7.5 2.44775 7.5 3L7.5 4C7.5 4.55225 7.94769 5 8.5 5L15.5 5C16.0523 5 16.5 4.55225 16.5 4L16.5 3C16.5 2.44775 16.0523 2 15.5 2ZM6 3.5C5.95886 3.65979 6 3.82739 6 4L6 4.5C6 5.60461 6.89545 6.5 8 6.5L16 6.5C17.1046 6.5 18 5.60461 18 4.5L18 4C18 3.82739 17.9781 3.65979 17.937 3.5C19.5939 3.5 21 4.84314 21 6.5L21 19C21 20.6567 19.6569 22 18 22L6 22C4.34314 22 3 20.6567 3 19L3 6.5C3 4.84314 4.34314 3.5 6 3.5ZM9.74768 14.2823C9.51642 13.5664 9.47162 12.8932 9.61328 12.2626C9.76184 11.6013 10.1154 10.9869 10.6741 10.4196C11.2628 9.82166 11.8975 9.453 12.5783 9.3136C13.2141 9.18579 13.9006 9.25525 14.6166 9.52661C14.7505 9.57739 14.7924 9.67029 14.7421 9.80542L13.4536 11.1411C13.1584 11.441 13.0126 11.739 13.0163 12.035C13.0198 12.3167 13.1584 12.5964 13.4323 12.8745C13.6884 13.1346 13.9498 13.2706 14.2168 13.2825C14.4964 13.2949 14.7819 13.1711 15.0734 12.9113L16.3746 11.5935C16.4754 11.4911 16.5765 11.4908 16.678 11.5925C16.9484 12.3289 17.0672 13.1018 16.9343 13.7545C16.7932 14.4354 16.43 15.082 15.8492 15.6719C15.2784 16.2517 14.6608 16.6147 13.9962 16.7607C13.3733 16.8977 12.7091 16.8442 12.0038 16.6001C11.9518 16.582 11.9002 16.5627 11.8491 16.5425L9.61707 18.8096C9.47113 18.9578 9.30988 19.0686 9.13336 19.1421C8.96021 19.2141 8.7724 19.25 8.56982 19.25C8.36731 19.25 8.17944 19.2141 8.00629 19.1421C7.82977 19.0686 7.66858 18.9578 7.52258 18.8096C7.17419 18.4556 7 18.1018 7 17.7478C7 17.394 7.17419 17.04 7.52258 16.6863L9.78406 14.3893C9.77142 14.3538 9.75928 14.3181 9.74768 14.2823Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/purchase-planned-order.svg b/packages/theme-saas/src/svgs/purchase-planned-order.svg
new file mode 100644
index 000000000..932606fa7
--- /dev/null
+++ b/packages/theme-saas/src/svgs/purchase-planned-order.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1891)">
+		<path id="矢量 167" d="M15.5 2L8.5 2C7.94769 2 7.5 2.44775 7.5 3L7.5 4C7.5 4.55225 7.94769 5 8.5 5L15.5 5C16.0523 5 16.5 4.55225 16.5 4L16.5 3C16.5 2.44775 16.0523 2 15.5 2ZM6 3.5C5.95886 3.65991 6 3.82739 6 4L6 4.5C6 5.60449 6.89545 6.5 8 6.5L16 6.5C17.1046 6.5 18 5.60449 18 4.5L18 4C18 3.82739 17.9781 3.65991 17.937 3.5C19.5939 3.5 21 4.84326 21 6.5L21 19C21 20.6567 19.6569 22 18 22L6 22C4.34314 22 3 20.6567 3 19L3 6.5C3 4.84326 4.34314 3.5 6 3.5ZM6.74994 8.25L7.90497 8.25C7.98743 8.25 8.06854 8.25732 8.14832 8.27197C8.22998 8.28711 8.31061 8.30981 8.38947 8.34033C8.45349 8.36499 8.51501 8.39429 8.57391 8.42773C8.65253 8.47241 8.72681 8.52539 8.79639 8.58618C8.91187 8.68677 9.00702 8.7998 9.08167 8.9248C9.16687 9.06738 9.22546 9.22632 9.25745 9.40088L9.37653 10L17.0589 10C17.4052 10 17.655 10.3315 17.5597 10.6643L16.738 13.5332C16.6064 14.1016 16.1345 14.5 15.593 14.5L10.2711 14.5L10.4265 15.2815C10.4471 15.3943 10.4894 15.4895 10.5531 15.5669C10.6093 15.616 10.7332 15.7148 10.798 15.7332C10.8373 15.7444 10.8782 15.75 10.9206 15.75L15.7499 15.75C16.1699 15.75 16.4999 16.0801 16.4999 16.5C16.4999 16.9199 16.1699 17.25 15.7499 17.25L10.9206 17.25C10.8021 17.25 10.6856 17.2395 10.571 17.2185C10.4525 17.1968 10.3359 17.1638 10.2215 17.1199C10.1345 17.0862 10.0507 17.0469 9.97003 17.002C9.84991 16.9351 9.73663 16.855 9.63068 16.7627C9.55853 16.6997 9.49139 16.6326 9.42932 16.5608C9.341 16.459 9.26282 16.3481 9.19482 16.2288C9.11456 16.0876 9.05188 15.9412 9.00684 15.7896C8.98578 15.7188 8.96863 15.647 8.95526 15.574L7.79767 9.75L6.74994 9.75C6.32996 9.75 5.99994 9.41992 5.99994 9C5.99994 8.58008 6.32996 8.25 6.74994 8.25ZM10.4999 18.75C10.4999 18.3357 10.8358 18 11.2499 18C11.6642 18 11.9999 18.3357 11.9999 18.75C11.9999 19.1643 11.6642 19.5 11.2499 19.5C10.8358 19.5 10.4999 19.1643 10.4999 18.75ZM14.9999 18C14.5858 18 14.2499 18.3357 14.2499 18.75C14.2499 19.1643 14.5858 19.5 14.9999 19.5C15.4142 19.5 15.7499 19.1643 15.7499 18.75C15.7499 18.3357 15.4142 18 14.9999 18Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/requirements-planning.svg b/packages/theme-saas/src/svgs/requirements-planning.svg
new file mode 100644
index 000000000..792b5142f
--- /dev/null
+++ b/packages/theme-saas/src/svgs/requirements-planning.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1887)">
+		<path id="矢量 163" d="M22 15.4144C22 16.4191 21.4491 17.3406 20.5699 17.8064L13.2366 21.6923C12.462 22.1027 11.538 22.1027 10.7634 21.6923L3.43005 17.8064C2.5509 17.3406 2 16.4191 2 15.4144L2 4.69971C2 3.20874 3.19385 2 4.66663 2L19.3334 2C20.8062 2 22 3.20874 22 4.69971L22 15.4144ZM18.12 5.25012L11.12 5.25012C10.7 5.25012 10.37 5.58008 10.37 6.00012C10.37 6.42004 10.7 6.75012 11.12 6.75012L18.12 6.75012C18.54 6.75012 18.87 6.42004 18.87 6.00012C18.87 5.58008 18.54 5.25012 18.12 5.25012ZM8.12073 5.50012L6.11926 5.50012C5.56738 5.50012 5.12 5.94775 5.12 6.50012L5.12 8.50012C5.12 9.05237 5.56738 9.50012 6.11926 9.50012L8.12073 9.50012C8.67261 9.50012 9.12 9.05237 9.12 8.50012L9.12 6.50012C9.12 5.94775 8.67261 5.50012 8.12073 5.50012ZM18.12 7.95007L11.12 7.95007C10.7 7.95007 10.37 8.28003 10.37 8.70007C10.37 9.12012 10.7 9.45007 11.12 9.45007L18.12 9.45007C18.54 9.45007 18.87 9.12012 18.87 8.70007C18.87 8.28003 18.54 7.95007 18.12 7.95007ZM6.11926 11.5001L8.12073 11.5001C8.67261 11.5001 9.12 11.9478 9.12 12.5001L9.12 14.5001C9.12 15.0524 8.67261 15.5001 8.12073 15.5001L6.11926 15.5001C5.56738 15.5001 5.12 15.0524 5.12 14.5001L5.12 12.5001C5.12 11.9478 5.56738 11.5001 6.11926 11.5001ZM11.12 11.55L18.12 11.55C18.54 11.55 18.87 11.88 18.87 12.3C18.87 12.7201 18.54 13.05 18.12 13.05L11.12 13.05C10.7 13.05 10.37 12.7201 10.37 12.3C10.37 11.88 10.7 11.55 11.12 11.55ZM18.12 14.2501L11.12 14.2501C10.7 14.2501 10.37 14.5801 10.37 15.0001C10.37 15.42 10.7 15.7501 11.12 15.7501L18.12 15.7501C18.54 15.7501 18.87 15.42 18.87 15.0001C18.87 14.5801 18.54 14.2501 18.12 14.2501Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/shipped.svg b/packages/theme-saas/src/svgs/shipped.svg
new file mode 100644
index 000000000..c8d66cddd
--- /dev/null
+++ b/packages/theme-saas/src/svgs/shipped.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1897)">
+		<path id="矢量 173" d="M14.0737 17.1017L10.9272 17.1066C10.5708 15.2626 8.948 13.87 7 13.87C5.04773 13.87 3.42212 15.2686 3.07043 17.1185L2.10022 17.12C1.49268 17.1199 1.00012 16.6416 1 16.0515L1 4.19934C1 3.60974 1.49182 3.13171 2.099 3.13098L11.7812 3.12L11.9109 3.1272C12.4581 3.18884 12.8828 3.6405 12.8828 4.18835L12.8828 12.8083C12.8834 13.2502 13.2529 13.608 13.708 13.6074C14.1639 13.6069 14.5332 13.2478 14.5332 12.8051L14.5332 6.80261L14.5421 6.698C14.5939 6.39355 14.8667 6.16162 15.1948 6.16235L18.1469 6.16846C18.5341 6.20874 18.8882 6.4071 19.1178 6.71802L22.6392 10.8054L22.733 10.9453C22.9072 11.2323 23 11.5602 23 11.8953L23 15.2517L22.9937 15.405C22.9365 16.088 22.5015 16.6671 21.8925 16.9447C21.4749 15.1816 19.8906 13.87 18 13.87C16.0536 13.87 14.432 15.2601 14.0737 17.1017ZM10.5205 7.03992L6.89014 10.5399C6.74487 10.6799 6.57141 10.75 6.36963 10.75C6.16785 10.75 5.99426 10.6799 5.84912 10.5399L3.47949 8.25549C3.17712 7.96399 3.16858 7.49731 3.46008 7.19495C3.75159 6.89258 4.21814 6.88403 4.52051 7.17554L6.36963 8.95825L9.47949 5.96008C9.78186 5.66858 10.2484 5.67712 10.5399 5.97949C10.8314 6.28186 10.8229 6.74841 10.5205 7.03992ZM4 17.87C4 16.2131 5.34314 14.87 7 14.87C8.65686 14.87 10 16.2131 10 17.87C10 19.5269 8.65686 20.87 7 20.87C5.34314 20.87 4 19.5269 4 17.87ZM15 17.87C15 16.2131 16.3431 14.87 18 14.87C19.6569 14.87 21 16.2131 21 17.87C21 19.5269 19.6569 20.87 18 20.87C16.3431 20.87 15 19.5269 15 17.87Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/substitute-material.svg b/packages/theme-saas/src/svgs/substitute-material.svg
new file mode 100644
index 000000000..f0a2b3807
--- /dev/null
+++ b/packages/theme-saas/src/svgs/substitute-material.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1906)">
+		<path id="矢量 182" d="M16.4 2L7.59998 2C6.71631 2 6 2.89539 6 4L18 4C18 2.89539 17.2837 2 16.4 2ZM20 7.31812C20 6.31396 19.2466 5.5 18.3164 5.5L5.68457 5.5C4.75439 5.5 4 6.31396 4 7.31812L4 8L10 8C9.75037 9.04712 10.5 10.5 12 10.5C13.5 10.5 14.2457 9.03076 14 8L20 8L20 7.31812ZM20.049 9.5C21.1266 9.5 22 10.3654 22 11.4329L22 19.1007C22 20.7019 20.6897 22 19.0732 22L4.92676 22C3.3103 22 2 20.7019 2 19.1007L2 11.4329C2 10.3654 2.87378 9.5 3.95142 9.5L8.97681 9.5C8.97681 11.1012 10.4885 12 11.9885 12C13.4885 12 14.9768 11.1012 14.9768 9.5L20.049 9.5ZM15.8312 13.9514C15.524 14.2378 15.5077 14.7042 15.7941 15.0115L16.2754 15.5278L6 15.5278C5.95374 15.5278 5.9082 15.532 5.8634 15.5403C5.8186 15.5486 5.77454 15.561 5.73132 15.5776C5.68799 15.5942 5.64697 15.6144 5.60815 15.6382C5.56934 15.662 5.53271 15.6893 5.49829 15.7203C5.42126 15.7896 5.36218 15.8674 5.32104 15.9537C5.27979 16.04 5.25647 16.135 5.25098 16.2384C5.24561 16.3418 5.25891 16.4386 5.29077 16.5288C5.32263 16.619 5.37329 16.7025 5.4425 16.7795L7.4425 19.0017C7.72351 19.314 8.18958 19.3384 8.50171 19.0575C8.81396 18.7765 8.83838 18.3104 8.5575 17.9983L7.68408 17.0278L18 17.0278C18.1035 17.0278 18.1995 17.0095 18.288 16.9729C18.3763 16.9363 18.4572 16.8813 18.5303 16.8081C18.6035 16.7349 18.6584 16.6541 18.6951 16.5657C18.7317 16.4773 18.75 16.3813 18.75 16.2778C18.75 16.2303 18.7456 16.1837 18.7369 16.1379C18.7283 16.0922 18.7152 16.0471 18.6979 16.0029C18.6804 15.9589 18.6593 15.917 18.6344 15.8776C18.6095 15.8381 18.5809 15.801 18.5486 15.7664L16.8912 13.9885C16.6049 13.6814 16.1384 13.665 15.8312 13.9514Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/surcharge-settled.svg b/packages/theme-saas/src/svgs/surcharge-settled.svg
new file mode 100644
index 000000000..a8677df5f
--- /dev/null
+++ b/packages/theme-saas/src/svgs/surcharge-settled.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1903)">
+		<path id="矢量 179" d="M14.4037 2L5.47437 2C4.30945 2 3.55188 3.22583 4.07275 4.26758C4.60364 5.32935 5.68884 6 6.87585 6L13.0022 6C14.1892 6 15.2743 5.32935 15.8052 4.26758C16.326 3.22583 15.5685 2 14.4037 2ZM9.00989 7.5L10.8677 7.5C12.8027 7.5 14.5741 8.29028 15.8511 9.58398C15.0734 9.70532 14.338 9.95483 13.6674 10.3101C13.6313 10.1746 13.5562 10.0471 13.4425 9.94409C13.1312 9.66211 12.6652 9.6853 12.3832 9.99658L9.93896 12.6946L7.49487 9.99658C7.21289 9.6853 6.7467 9.66211 6.43542 9.94409C6.12427 10.2261 6.1012 10.6921 6.38318 11.0034L8.24756 13.0618L6.93896 13.0618C6.51904 13.0618 6.18896 13.3916 6.18896 13.8118C6.18896 14.2317 6.51904 14.5618 6.93896 14.5618L9.18896 14.5618L9.18896 15.8083L6.93896 15.8083C6.51904 15.8083 6.18896 16.1384 6.18896 16.5583C6.18896 16.9785 6.51904 17.3083 6.93896 17.3083L9.18896 17.3083L9.18896 19.5C9.18896 19.9199 9.51904 20.25 9.93896 20.25C10.3135 20.25 10.6163 19.9878 10.6776 19.6333C11.027 20.3298 11.489 20.9602 12.04 21.5L5.55078 21.5C3.11658 21.5 1.2467 19.344 1.59094 16.9343L2.0802 13.51C2.57288 10.0615 5.52625 7.5 9.00989 7.5ZM11.439 16.5C11.439 13.4624 13.9014 11 16.939 11C19.9766 11 22.439 13.4624 22.439 16.5C22.439 19.5376 19.9766 22 16.939 22C13.9014 22 11.439 19.5376 11.439 16.5ZM16.9418 18.7825L19.967 15.7825C20.2653 15.4868 20.2673 15.02 19.9716 14.7219C19.6758 14.4236 19.2091 14.4216 18.9109 14.7175L16.4137 17.1938L14.967 15.7593C14.6688 15.4636 14.2021 15.4656 13.9064 15.7637C13.6107 16.062 13.6127 16.5286 13.9109 16.8245L15.8856 18.7825C15.9587 18.855 16.0392 18.9094 16.1272 18.9456C16.2152 18.9819 16.3108 19 16.4137 19C16.5166 19 16.6121 18.9819 16.7001 18.9456C16.7881 18.9094 16.8687 18.855 16.9418 18.7825Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/surcharge-to-be-settled.svg b/packages/theme-saas/src/svgs/surcharge-to-be-settled.svg
new file mode 100644
index 000000000..7e757d2cb
--- /dev/null
+++ b/packages/theme-saas/src/svgs/surcharge-to-be-settled.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1902)">
+		<path id="矢量 178" d="M14.4037 2L5.47437 2C4.30945 2 3.55188 3.22583 4.07275 4.26758C4.60364 5.32935 5.68884 6 6.87585 6L13.0022 6C14.1892 6 15.2743 5.32935 15.8052 4.26758C16.326 3.22583 15.5685 2 14.4037 2ZM9.00989 7.5L10.8677 7.5C12.8027 7.5 14.5741 8.29028 15.8511 9.58398C15.0734 9.70532 14.338 9.95483 13.6674 10.3101C13.6313 10.1746 13.5562 10.0471 13.4425 9.94409C13.1312 9.66211 12.6652 9.6853 12.3832 9.99658L9.93896 12.6946L7.49487 9.99658C7.21289 9.6853 6.7467 9.66211 6.43542 9.94409C6.12427 10.2261 6.1012 10.6921 6.38318 11.0034L8.24756 13.0618L6.93896 13.0618C6.51904 13.0618 6.18896 13.3916 6.18896 13.8118C6.18896 14.2317 6.51904 14.5618 6.93896 14.5618L9.18896 14.5618L9.18896 15.8083L6.93896 15.8083C6.51904 15.8083 6.18896 16.1384 6.18896 16.5583C6.18896 16.9785 6.51904 17.3083 6.93896 17.3083L9.18896 17.3083L9.18896 19.5C9.18896 19.9199 9.51904 20.25 9.93896 20.25C10.3135 20.25 10.6163 19.9878 10.6776 19.6333C11.027 20.3298 11.489 20.9602 12.04 21.5L5.55078 21.5C3.11658 21.5 1.2467 19.344 1.59094 16.9343L2.0802 13.51C2.57288 10.0615 5.52625 7.5 9.00989 7.5ZM11.439 16.5C11.439 13.4624 13.9014 11 16.939 11C19.9766 11 22.439 13.4624 22.439 16.5C22.439 19.5376 19.9766 22 16.939 22C13.9014 22 11.439 19.5376 11.439 16.5ZM17.1899 14.5L17.1899 16.4338L18.9293 17.9316C19.2476 18.2056 19.2822 18.6711 19.0082 18.9893C18.7341 19.3076 18.2688 19.3423 17.9506 19.0684L15.9506 17.3462C15.8678 17.2749 15.8037 17.1897 15.7582 17.0903C15.7355 17.0408 15.7184 16.99 15.707 16.938C15.6957 16.886 15.6899 16.8323 15.6899 16.7778L15.6899 14.5C15.6899 14.0801 16.0199 13.75 16.4399 13.75C16.86 13.75 17.1899 14.0801 17.1899 14.5Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/to-be-uploaded.svg b/packages/theme-saas/src/svgs/to-be-uploaded.svg
new file mode 100644
index 000000000..40508999b
--- /dev/null
+++ b/packages/theme-saas/src/svgs/to-be-uploaded.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1898)">
+		<path id="矢量 174" d="M0.5 13.1666C0.5 16.1122 2.92297 18.5 5.91174 18.5L10.4596 18.5C10.1627 17.7236 10 16.8809 10 16C10 12.134 13.134 9 17 9C19.8993 9 22.387 10.7627 23.4497 13.2748C23.4829 13.0211 23.5 12.7626 23.5 12.5C23.5 9.18628 20.7742 6.5 17.4117 6.5L17.2323 6.50256L17.0687 6.50952C16.2357 4.17419 13.978 2.5 11.3235 2.5C8.17664 2.5 5.58752 4.85291 5.26843 7.87061C2.58289 8.18408 0.5 10.4357 0.5 13.1666ZM11.5 16C11.5 12.9624 13.9624 10.5 17 10.5C20.0376 10.5 22.5 12.9624 22.5 16C22.5 19.0376 20.0376 21.5 17 21.5C13.9624 21.5 11.5 19.0376 11.5 16ZM17.25 14L17.25 15.9338L18.9893 17.4316C19.3076 17.7057 19.3423 18.171 19.0682 18.4893C18.7942 18.8076 18.3289 18.8423 18.0105 18.5682L16.0106 16.8462C15.9279 16.7749 15.8638 16.6897 15.8182 16.5905C15.7955 16.5408 15.7784 16.49 15.7671 16.438C15.7557 16.3859 15.75 16.3324 15.75 16.2778L15.75 14C15.75 13.58 16.08 13.25 16.5 13.25C16.9199 13.25 17.25 13.58 17.25 14Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/total-nolume.svg b/packages/theme-saas/src/svgs/total-nolume.svg
new file mode 100644
index 000000000..932119f2a
--- /dev/null
+++ b/packages/theme-saas/src/svgs/total-nolume.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1894)">
+		<path id="矢量 170" d="M11.8698 22.1802C11.6748 22.25 11.4199 22.2668 11.2325 22.1785L3.17993 18.3784C3.04871 18.3164 2.94421 18.2241 2.86652 18.1016C2.78882 17.979 2.75 17.8452 2.75 17.7002L2.75 6.30005C2.75 6.24487 2.75604 6.19019 2.76813 6.13599C2.78027 6.08203 2.7981 6.03003 2.82172 5.97998C2.86591 5.88647 2.9234 5.80737 2.99426 5.74316C3.05353 5.68921 3.12207 5.64575 3.19995 5.61255L11.4572 1.8186C11.5057 1.79639 11.5554 1.77954 11.6063 1.76807C11.6572 1.75659 11.7094 1.75049 11.7628 1.75C11.8694 1.74902 11.9717 1.76978 12.0696 1.81226L20.7994 5.6123C20.9362 5.67188 21.0455 5.76416 21.1273 5.88892C21.2091 6.01367 21.25 6.15088 21.25 6.30005L21.25 17.7C21.25 17.8503 21.2085 17.9885 21.1255 18.114C21.0424 18.2393 20.9317 18.3315 20.7932 18.3904L11.8698 22.1802ZM5.27655 6.30908L11.6695 9.32593L18.6209 6.30005L11.7786 3.32153L5.27655 6.30908ZM9.00537 5.61743L12.1377 4.19238C12.52 4.01855 12.957 4.18237 13.1309 4.56445C13.3049 4.94678 13.1411 5.38379 12.7588 5.55786L9.62646 6.98267C9.2442 7.15674 8.80713 6.99292 8.63324 6.6106C8.45935 6.22827 8.62305 5.79126 9.00537 5.61743ZM14.3721 5.61768L11.2419 7.04272C10.8596 7.2168 10.696 7.65381 10.8701 8.03613C11.0441 8.41846 11.4811 8.58203 11.8634 8.40796L14.9937 6.98291C15.3759 6.80884 15.5395 6.37183 15.3655 5.9895C15.1915 5.60742 14.7544 5.44385 14.3721 5.61768ZM12.3026 10.6863L12.3026 20.3667L19.75 17.2036L19.75 7.44434L12.3026 10.6863ZM18.1184 10.3374L18.1184 16.0374C18.1184 16.4575 17.7884 16.7874 17.3684 16.7874C16.9484 16.7874 16.6184 16.4575 16.6184 16.0374L16.6184 10.3374C16.6184 9.91748 16.9484 9.5874 17.3684 9.5874C17.7884 9.5874 18.1184 9.91748 18.1184 10.3374ZM15.4342 17.4622L15.4342 11.7622C15.4342 11.3423 15.1042 11.0122 14.6842 11.0122C14.2642 11.0122 13.9342 11.3423 13.9342 11.7622L13.9342 17.4622C13.9342 17.8823 14.2642 18.2122 14.6842 18.2122C15.1042 18.2122 15.4342 17.8823 15.4342 17.4622Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/total-number.svg b/packages/theme-saas/src/svgs/total-number.svg
new file mode 100644
index 000000000..87d9447c1
--- /dev/null
+++ b/packages/theme-saas/src/svgs/total-number.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1895)">
+		<path id="矢量 171" d="M22 4.59106L16.3472 2.49854C15.694 2.25684 15 2.73999 15 3.43652L15 20.5635C15 21.26 15.694 21.7432 16.3472 21.5012L22 19.4089L22 4.59106ZM9.73901 3.30493L13.5 4.23071L13.5 19.7693L9.73901 20.6951C9.10876 20.8501 8.5 20.373 8.5 19.7239L8.5 4.27588C8.5 3.62695 9.10876 3.1499 9.73901 3.30493ZM7 5.0769L3.21057 4.26074C2.58777 4.12646 2 4.60132 2 5.23828L2 18.7617C2 19.3987 2.58777 19.8733 3.21057 19.7393L7 18.9231L7 5.0769Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/total-weight.svg b/packages/theme-saas/src/svgs/total-weight.svg
new file mode 100644
index 000000000..941cf9839
--- /dev/null
+++ b/packages/theme-saas/src/svgs/total-weight.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1893)">
+		<path id="矢量 169" d="M8.00031 2L16.0003 2C16.5526 2 17.0003 2.44775 17.0003 3L17.0003 5C17.0003 5.55225 16.5526 6 16.0003 6L14.0003 6L14.0003 7.5L17.4774 7.5C18.3771 7.5 19.1661 8.10083 19.4053 8.96826L22.3019 19.4683C22.6532 20.7417 21.6951 22 20.3739 22L3.62677 22C2.3056 22 1.34741 20.7417 1.69879 19.4683L4.59534 8.96826C4.83459 8.10083 5.6236 7.5 6.52332 7.5L10.0003 7.5L10.0003 6L8.00031 6C7.44806 6 7.00031 5.55225 7.00031 5L7.00031 3C7.00031 2.44775 7.44806 2 8.00031 2ZM5.40942 15.9016C5.30328 16.3794 5.25018 16.8689 5.25018 17.3701C5.25018 17.79 5.5802 18.1201 6.00018 18.1201C6.42023 18.1201 6.75018 17.79 6.75018 17.3701C6.75018 16.9702 6.79346 16.5801 6.88007 16.2C6.94775 15.9028 7.04193 15.6118 7.16248 15.3267C7.28595 15.0349 7.43304 14.7585 7.60376 14.4976C7.80042 14.197 8.0285 13.9172 8.2879 13.6577C8.5473 13.3982 8.82727 13.1702 9.12775 12.9736C9.38855 12.803 9.66516 12.6555 9.95691 12.5322C10.2419 12.4116 10.533 12.3176 10.8301 12.25C11.2103 12.1633 11.6003 12.1201 12.0002 12.1201C12.4001 12.1201 12.7901 12.1633 13.1703 12.25C13.4673 12.3176 13.7584 12.4116 14.0435 12.5322C14.3354 12.6558 14.6118 12.803 14.8727 12.9736C15.1731 13.1702 15.4531 13.3982 15.7125 13.6577C15.9719 13.9172 16.2 14.197 16.3966 14.4976C16.5674 14.7585 16.7145 15.0349 16.838 15.3267C16.9585 15.6116 17.0526 15.9026 17.1202 16.1995C17.2068 16.5796 17.2502 16.9702 17.2502 17.3701C17.2502 17.79 17.5802 18.1201 18.0002 18.1201C18.4202 18.1201 18.7502 17.79 18.7502 17.3701C18.7502 16.8689 18.6971 16.3796 18.5911 15.9023C18.5035 15.5081 18.3795 15.1206 18.2195 14.7424C18.058 14.3608 17.8653 13.9998 17.6411 13.6594C17.3911 13.2798 17.1013 12.925 16.7732 12.5969C16.445 12.2688 16.0911 11.9797 15.7115 11.7297C15.3712 11.5054 15.0095 11.312 14.6279 11.1506C14.2495 10.9907 13.8631 10.8669 13.4686 10.7793C12.991 10.6731 12.5015 10.6201 12.0002 10.6201C11.499 10.6201 11.0096 10.6731 10.532 10.7791C10.1375 10.8667 9.75092 10.9907 9.37256 11.1506C8.99091 11.312 8.62988 11.5049 8.28955 11.7292C7.90985 11.9795 7.55548 12.2688 7.22723 12.5969C6.89886 12.9253 6.60956 13.2795 6.35938 13.6594C6.13531 13.9998 5.94232 14.3608 5.78094 14.7424C5.62091 15.1208 5.49707 15.5073 5.40942 15.9016ZM12.0002 16.3701C12.0352 16.3701 12.0699 16.3713 12.1041 16.3743L13.4402 14.8718C13.7194 14.5581 14.1852 14.5308 14.4991 14.8098C14.8129 15.0889 14.8403 15.5547 14.5612 15.8687L13.2253 17.3706C13.2416 17.4512 13.2502 17.5347 13.2502 17.6201C13.2502 18.3103 12.6906 18.8701 12.0002 18.8701C11.3099 18.8701 10.7502 18.3103 10.7502 17.6201C10.7502 16.9297 11.3099 16.3701 12.0002 16.3701Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/under-review.svg b/packages/theme-saas/src/svgs/under-review.svg
new file mode 100644
index 000000000..f6f3ac6fd
--- /dev/null
+++ b/packages/theme-saas/src/svgs/under-review.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1878)">
+		<path id="矢量 34" d="M16 2L6 2C4.34314 2 3 3.34326 3 5L3 19C3 20.6567 4.34314 22 6 22L11.8925 22C9.85962 20.7751 8.5 18.5464 8.5 16C8.5 12.134 11.634 9 15.5 9C16.775 9 17.9703 9.34082 19 9.93652L19 5C19 3.34326 17.6569 2 16 2ZM6 5.25L13.5 5.25C13.92 5.25 14.25 5.58008 14.25 6C14.25 6.41992 13.92 6.75 13.5 6.75L6 6.75C5.57996 6.75 5.25 6.41992 5.25 6C5.25 5.58008 5.57996 5.25 6 5.25ZM6 8.75L8 8.75C8.42004 8.75 8.75 9.08008 8.75 9.5C8.75 9.91992 8.42004 10.25 8 10.25L6 10.25C5.57996 10.25 5.25 9.91992 5.25 9.5C5.25 9.08008 5.57996 8.75 6 8.75ZM10 16C10 12.9624 12.4624 10.5 15.5 10.5C18.5376 10.5 21 12.9624 21 16C21 19.0376 18.5376 21.5 15.5 21.5C12.4624 21.5 10 19.0376 10 16ZM13.6915 14.6604C13.7572 14.5723 13.8297 14.4883 13.9091 14.4089C14.0215 14.2966 14.1429 14.1978 14.2733 14.1128C14.3839 14.041 14.5009 13.9788 14.6244 13.9265C14.7437 13.876 14.8654 13.8364 14.9896 13.8076C15.1553 13.7693 15.3254 13.75 15.5 13.75C15.6746 13.75 15.8447 13.7693 16.0104 13.8076C16.1345 13.8364 16.2563 13.876 16.3756 13.9265C16.499 13.9788 16.6161 14.041 16.7267 14.1128C16.8571 14.1978 16.9785 14.2966 17.0909 14.4089C17.2035 14.5215 17.3021 14.6428 17.3871 14.7734C17.4591 14.8838 17.5212 15.001 17.5735 15.1245C17.6239 15.2437 17.6636 15.3652 17.6924 15.4895C17.7308 15.6553 17.75 15.8254 17.75 16C17.75 16.1746 17.7308 16.3447 17.6924 16.5105C17.6636 16.6348 17.6239 16.7563 17.5735 16.8755C17.5212 16.999 17.4591 17.1162 17.3871 17.2266C17.3021 17.3569 17.2035 17.4785 17.0909 17.5911C16.9785 17.7034 16.8571 17.8022 16.7267 17.8872C16.6161 17.959 16.499 18.0212 16.3756 18.0735C16.2563 18.124 16.1346 18.1636 16.0104 18.1924C15.845 18.2307 15.6743 18.25 15.5 18.25C15.2677 18.25 15.0457 18.2173 14.8337 18.1516C14.6364 18.0906 14.4479 18.001 14.2681 17.8833C13.9169 17.6528 13.46 17.7478 13.2296 18.0989C12.9993 18.4502 13.0942 18.9072 13.4454 19.1375C13.6055 19.2424 13.7716 19.3342 13.9437 19.4128C14.0945 19.4817 14.2501 19.5405 14.4102 19.5889C14.5557 19.6331 14.7029 19.6682 14.8516 19.6943C15.0645 19.7314 15.2806 19.75 15.5 19.75C15.7759 19.75 16.0455 19.7209 16.3087 19.6631C16.5303 19.6143 16.7473 19.5449 16.96 19.4551C17.1732 19.3647 17.3749 19.2568 17.5648 19.1313C17.7741 18.9932 17.9705 18.8328 18.1516 18.6516C18.333 18.4702 18.493 18.2747 18.6315 18.0649C18.757 17.8748 18.8648 17.6731 18.955 17.46C19.0449 17.2473 19.1143 17.0303 19.1631 16.8086C19.221 16.5454 19.25 16.2759 19.25 16C19.25 15.7241 19.221 15.4546 19.1631 15.1914C19.1143 14.9697 19.0449 14.7527 18.955 14.54C18.8648 14.3269 18.757 14.1252 18.6315 13.9351C18.493 13.7253 18.3331 13.5298 18.1516 13.3484C17.9702 13.167 17.7746 13.0071 17.5648 12.8684C17.3748 12.7429 17.1732 12.6353 16.96 12.5449C16.7473 12.4551 16.5303 12.3857 16.3087 12.3369C16.0455 12.2791 15.7759 12.25 15.5 12.25C15.224 12.25 14.9545 12.2791 14.6913 12.3369C14.4697 12.3857 14.2526 12.4551 14.0402 12.5449C13.8268 12.6353 13.6252 12.7429 13.4352 12.8684C13.2255 13.0068 13.0298 13.167 12.8484 13.3484C12.6669 13.5298 12.507 13.7253 12.3685 13.9351C12.243 14.1252 12.1353 14.3269 12.045 14.54C11.9551 14.7527 11.8857 14.9697 11.8369 15.1914C11.779 15.4546 11.75 15.7241 11.75 16C11.75 16.1577 11.7953 16.3013 11.886 16.4307C12.0295 16.6353 12.1884 16.7529 12.3624 16.7834C12.5365 16.814 12.726 16.7576 12.9307 16.614L13.8436 15.9736C14.1875 15.7327 14.2682 15.2729 14.0271 14.9292C13.939 14.8035 13.8217 14.7129 13.6915 14.6604Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/unsubmitted.svg b/packages/theme-saas/src/svgs/unsubmitted.svg
new file mode 100644
index 000000000..275a21b33
--- /dev/null
+++ b/packages/theme-saas/src/svgs/unsubmitted.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="23.999878" viewBox="0 0 24 23.9999" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1876)">
+		<path id="矢量 160" d="M16 1.99988L6 1.99988C4.34314 1.99988 3 3.34302 3 4.99988L3 18.9999C3 20.6566 4.34314 21.9999 6 21.9999L11.8924 21.9999C9.85956 20.7748 8.5 18.5463 8.5 15.9998C8.5 12.1339 11.634 8.99988 15.5 8.99988C16.775 8.99988 17.9704 9.3407 19 9.9364L19 4.99988C19 3.34302 17.6569 1.99988 16 1.99988ZM6 5.24988L13.5 5.24988C13.92 5.24988 14.25 5.57983 14.25 5.99988C14.25 6.41992 13.92 6.74988 13.5 6.74988L6 6.74988C5.58002 6.74988 5.25 6.41992 5.25 5.99988C5.25 5.57983 5.58002 5.24988 6 5.24988ZM6 8.74988L8 8.74988C8.41998 8.74988 8.75 9.07983 8.75 9.49988C8.75 9.91992 8.41998 10.2499 8 10.2499L6 10.2499C5.58002 10.2499 5.25 9.91992 5.25 9.49988C5.25 9.07983 5.58002 8.74988 6 8.74988ZM10 15.9998C10 12.9623 12.4625 10.4999 15.5 10.4999C18.5375 10.4999 21 12.9623 21 15.9998C21 19.0375 18.5375 21.4999 15.5 21.4999C12.4625 21.4999 10 19.0375 10 15.9998ZM15.75 13.9999L15.75 15.9337L17.4893 17.4315C17.8076 17.7054 17.8423 18.1708 17.5683 18.4891C17.2943 18.8075 16.8289 18.8422 16.5106 18.5682L14.5106 16.8461C14.4279 16.7748 14.3638 16.6893 14.3182 16.5902C14.2728 16.4911 14.25 16.3871 14.25 16.2777L14.25 13.9999C14.25 13.5798 14.58 13.2499 15 13.2499C15.42 13.2499 15.75 13.5798 15.75 13.9999Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/view-flowchart.svg b/packages/theme-saas/src/svgs/view-flowchart.svg
new file mode 100644
index 000000000..bec4aa1e0
--- /dev/null
+++ b/packages/theme-saas/src/svgs/view-flowchart.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip451_2373)">
+		<g opacity="0.000000"/>
+		<path id="矢量 252" d="M4.21 2.67C2.58 2.67 1.26 3.99 1.26 5.61C1.26 7.23 2.58 8.55 4.21 8.55C5.62 8.55 6.8 7.57 7.09 6.26L16.36 6.26C16.55 6.26 16.74 6.28 16.92 6.32C17.06 6.35 17.19 6.4 17.33 6.45C17.62 6.58 17.89 6.76 18.12 6.98C18.35 7.21 18.53 7.48 18.65 7.77C18.71 7.9 18.75 8.04 18.78 8.18C18.83 8.36 18.85 8.55 18.85 8.74C18.85 8.93 18.83 9.12 18.78 9.3C18.75 9.44 18.71 9.57 18.65 9.7C18.6 9.83 18.53 9.96 18.45 10.08C18.36 10.23 18.24 10.36 18.12 10.49C17.99 10.61 17.86 10.72 17.71 10.82C17.59 10.9 17.46 10.96 17.33 11.02C17.19 11.08 17.06 11.12 16.92 11.15C16.74 11.2 16.55 11.22 16.36 11.22L13.6 11.22C13.2 10.06 12.1 9.24 10.81 9.24C9.51 9.24 8.41 10.06 8.01 11.22L5.26 11.22C4.96 11.22 4.68 11.25 4.39 11.31C4.16 11.36 3.93 11.43 3.7 11.53C3.47 11.63 3.26 11.74 3.06 11.87C2.83 12.02 2.62 12.19 2.43 12.38C2.24 12.57 2.07 12.78 1.92 13.01C1.78 13.21 1.67 13.42 1.57 13.65C1.48 13.87 1.4 14.1 1.35 14.34C1.29 14.61 1.26 14.91 1.26 15.2C1.26 15.74 1.36 16.25 1.57 16.74C1.78 17.22 2.06 17.64 2.43 18.01C2.62 18.2 2.82 18.36 3.04 18.51C3.25 18.65 3.47 18.76 3.7 18.86C3.93 18.96 4.16 19.03 4.39 19.08C4.67 19.14 4.96 19.17 5.26 19.17L13.82 19.17C14.22 19.74 14.77 20.19 15.29 20.53C15.48 20.66 15.68 20.77 15.89 20.87C16.53 21.17 17.24 21.32 18.02 21.32C18.8 21.32 19.51 21.17 20.15 20.87C20.35 20.77 20.55 20.66 20.74 20.53C21.51 20.02 22.15 19.27 22.65 18.28C22.7 18.17 22.73 18.06 22.73 17.94C22.73 17.82 22.7 17.71 22.65 17.61C22.15 16.61 21.51 15.86 20.74 15.35C20.55 15.22 20.35 15.11 20.15 15.01C19.51 14.72 18.8 14.57 18.02 14.57C17.24 14.57 16.53 14.72 15.89 15.01C15.68 15.11 15.48 15.22 15.29 15.35C14.52 15.86 13.88 16.61 13.39 17.61L5.26 17.67C5.06 17.67 4.88 17.65 4.69 17.61C4.56 17.58 4.42 17.54 4.29 17.48C3.99 17.35 3.73 17.18 3.5 16.95C3.27 16.72 3.09 16.46 2.96 16.16C2.91 16.03 2.86 15.89 2.83 15.76C2.79 15.57 2.77 15.39 2.77 15.2C2.77 15 2.79 14.82 2.83 14.63C2.86 14.5 2.91 14.36 2.96 14.23C3.09 13.93 3.27 13.67 3.5 13.44C3.62 13.32 3.75 13.21 3.9 13.12C4.02 13.04 4.15 12.97 4.29 12.91C4.42 12.86 4.56 12.81 4.69 12.78C4.88 12.74 5.06 12.72 5.26 12.72L7.9 12.72C8.16 14.08 9.36 15.11 10.81 15.11C12.25 15.11 13.45 14.08 13.71 12.72L16.36 12.72C16.65 12.72 16.94 12.69 17.22 12.62C17.45 12.57 17.69 12.5 17.91 12.4C18.14 12.31 18.35 12.19 18.56 12.06C18.78 11.91 18.99 11.74 19.18 11.55C19.55 11.18 19.84 10.76 20.04 10.29C20.14 10.06 20.21 9.83 20.26 9.6C20.32 9.32 20.35 9.03 20.35 8.74C20.35 8.45 20.32 8.16 20.26 7.89C20.21 7.65 20.14 7.41 20.04 7.19C19.84 6.71 19.55 6.29 19.18 5.92C18.99 5.73 18.78 5.56 18.56 5.41C18.35 5.28 18.14 5.17 17.91 5.07C17.69 4.98 17.45 4.9 17.22 4.85C16.94 4.79 16.65 4.76 16.36 4.76L7.04 4.76C6.67 3.55 5.54 2.67 4.21 2.67ZM4.21 4.17C3.41 4.17 2.77 4.82 2.77 5.61C2.77 6.41 3.41 7.05 4.21 7.05C5.01 7.05 5.66 6.41 5.66 5.61C5.66 4.82 5.01 4.17 4.21 4.17ZM19.91 16.6C20.37 16.9 20.78 17.35 21.12 17.94C20.78 18.53 20.37 18.98 19.91 19.29C19.83 19.34 19.76 19.38 19.68 19.42C19.2 19.69 18.64 19.82 18.02 19.82C17.39 19.82 16.84 19.69 16.35 19.42C16.28 19.38 16.2 19.34 16.13 19.29C15.66 18.98 15.26 18.53 14.92 17.94C15.26 17.35 15.66 16.9 16.13 16.6C16.2 16.55 16.28 16.5 16.35 16.46C16.84 16.2 17.39 16.07 18.02 16.07C18.64 16.07 19.2 16.2 19.68 16.46C19.76 16.5 19.83 16.55 19.91 16.6ZM16.7 17.94C16.7 17.22 17.29 16.63 18.02 16.63C18.75 16.63 19.34 17.22 19.34 17.94C19.34 18.67 18.75 19.25 18.02 19.25C17.29 19.25 16.7 18.67 16.7 17.94Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/wait-for-delivery-o.svg b/packages/theme-saas/src/svgs/wait-for-delivery-o.svg
new file mode 100644
index 000000000..0fa3946ff
--- /dev/null
+++ b/packages/theme-saas/src/svgs/wait-for-delivery-o.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1873)">
+		<path id="矢量 158" d="M14.0737 17.1017L10.9272 17.1066C10.5709 15.2626 8.94806 13.87 7 13.87C5.04773 13.87 3.42212 15.2686 3.0705 17.1185L2.10022 17.12C1.49261 17.1199 1.00006 16.6416 1 16.0515L1 4.19934C1 3.60974 1.49182 3.13171 2.09894 3.13098L11.7813 3.12L11.9109 3.1272C12.4581 3.18884 12.8828 3.6405 12.8828 4.18835L12.8828 12.8083C12.8834 13.2502 13.2529 13.608 13.708 13.6074C14.1639 13.6069 14.5332 13.2478 14.5332 12.8051L14.5332 6.80261L14.5421 6.698C14.5939 6.39355 14.8666 6.16162 15.1948 6.16235L18.1469 6.16846C18.534 6.20874 18.8882 6.4071 19.1179 6.71802L22.6391 10.8054L22.733 10.9453C22.9073 11.2323 23 11.5602 23 11.8953L23 15.2517L22.9936 15.405C22.9365 16.088 22.5015 16.6671 21.8925 16.9447C21.4749 15.1816 19.8906 13.87 18 13.87C16.0536 13.87 14.4319 15.2601 14.0737 17.1017ZM6.75 6L6.75 8.32483L9.37689 9.85156C9.73999 10.0626 9.8595 10.5138 9.64844 10.8768C9.43738 11.24 8.98627 11.3595 8.62311 11.1484L5.62311 9.40479C5.50763 9.33765 5.41656 9.24622 5.34991 9.13037C5.28333 9.01465 5.25 8.88989 5.25 8.75635L5.25 6C5.25 5.57996 5.58002 5.25 6 5.25C6.41998 5.25 6.75 5.57996 6.75 6ZM7 14.87C5.34314 14.87 4 16.2131 4 17.87C4 19.5269 5.34314 20.87 7 20.87C8.65686 20.87 10 19.5269 10 17.87C10 16.2131 8.65686 14.87 7 14.87ZM15 17.87C15 16.2131 16.3431 14.87 18 14.87C19.6569 14.87 21 16.2131 21 17.87C21 19.5269 19.6569 20.87 18 20.87C16.3431 20.87 15 19.5269 15 17.87Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/wait-for-delivery.svg b/packages/theme-saas/src/svgs/wait-for-delivery.svg
new file mode 100644
index 000000000..15e6b0b72
--- /dev/null
+++ b/packages/theme-saas/src/svgs/wait-for-delivery.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1896)">
+		<path id="矢量 172" d="M5 2L19 2C20.6569 2 22 3.34314 22 5L22 6L2 6L2 5C2 3.34314 3.34314 2 5 2ZM9 7.5L2 7.5L2 19C2 20.6569 3.34314 22 5 22L19 22C20.6569 22 22 20.6569 22 19L22 7.5L15 7.5L15 13.9777C15 14.3938 14.5215 14.6278 14.193 14.3723L12.6139 13.1442C12.2528 12.8633 11.7472 12.8633 11.3861 13.1442L9.80701 14.3723C9.47852 14.6278 9 14.3938 9 13.9777L9 7.5Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/waiting-for-receipt.svg b/packages/theme-saas/src/svgs/waiting-for-receipt.svg
new file mode 100644
index 000000000..6e868bba9
--- /dev/null
+++ b/packages/theme-saas/src/svgs/waiting-for-receipt.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1874)">
+		<path id="矢量 26" d="M6.38 2L16.38 2C18.0369 2 19.38 3.34314 19.38 5L19.38 6.00012C18.6 5.99475 17.8182 6.28967 17.2231 6.88464L10.3171 13.7897C10.184 13.9229 10.0795 14.0817 10.0099 14.2567L8.4812 18.1039C8.03345 19.2308 9.15039 20.3468 10.2772 19.8986L14.1229 18.368C14.2976 18.2986 14.4563 18.1942 14.5892 18.0612L19.38 13.2711L19.38 19C19.38 20.6569 18.0369 22 16.38 22L6.38 22C4.72314 22 3.38 20.6569 3.38 19L3.38 5C3.38 3.34314 4.72314 2 6.38 2ZM14.3798 6.25305L6.37976 6.25305C5.95984 6.25305 5.62976 5.92297 5.62976 5.50305C5.62976 5.08313 5.95984 4.75305 6.37976 4.75305L14.3798 4.75305C14.7998 4.75305 15.1298 5.08313 15.1298 5.50305C15.1298 5.92297 14.7998 6.25305 14.3798 6.25305ZM19.5114 11.2474L20.1074 10.6515C20.1963 10.5626 20.2742 10.4664 20.3408 10.3632C20.3998 10.2717 20.4502 10.1748 20.4917 10.0721C20.533 9.97058 20.5642 9.86682 20.5856 9.76111C20.6085 9.64795 20.62 9.53186 20.62 9.41406C20.62 9.29639 20.6086 9.18103 20.5858 9.06799C20.5645 8.96228 20.533 8.85754 20.4917 8.75598C20.4501 8.65332 20.3998 8.55627 20.3408 8.46497C20.2742 8.36169 20.1963 8.2655 20.1074 8.17664C20.0186 8.08777 19.9227 8.01013 19.8196 7.94348C19.7283 7.88464 19.6306 7.83374 19.5281 7.79224C19.4264 7.7511 19.3228 7.71973 19.217 7.69836C19.1036 7.67542 18.9879 7.66406 18.87 7.66406C18.752 7.66406 18.6362 7.67542 18.5228 7.69836C18.4172 7.71973 18.3134 7.75098 18.2118 7.79224C18.1093 7.83386 18.0123 7.88416 17.9209 7.94312C17.8176 8.00989 17.7214 8.08765 17.6324 8.17664L17.0366 8.77246L19.5114 11.2474ZM11.2687 9.75C11.6887 9.75 12.0187 9.42004 12.0187 9C12.0187 8.57996 11.6887 8.25 11.2687 8.25L6.38 8.25C5.96008 8.25 5.63 8.57996 5.63 9C5.63 9.42004 5.96008 9.75 6.38 9.75L11.2687 9.75ZM18.6276 12.1313L16.4381 9.94177L16.1527 9.65637L11.8895 13.9196L9.81793 18.0652C9.68909 18.323 9.96271 18.5966 10.2205 18.4675L14.3645 16.3944L18.6276 12.1313ZM8.37976 13.25C8.79968 13.25 9.12976 12.92 9.12976 12.5C9.12976 12.08 8.79968 11.75 8.37976 11.75L6.37976 11.75C5.95972 11.75 5.62976 12.08 5.62976 12.5C5.62976 12.92 5.95972 13.25 6.37976 13.25L8.37976 13.25Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/waiting-for-submission.svg b/packages/theme-saas/src/svgs/waiting-for-submission.svg
new file mode 100644
index 000000000..2c2400a09
--- /dev/null
+++ b/packages/theme-saas/src/svgs/waiting-for-submission.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1875)">
+		<path id="矢量 159" d="M9.57581 1.55652L2.07581 5.46448C1.90466 5.55359 1.75 5.66553 1.61481 5.79541L10.5 10.2554L19.3852 5.79541C19.25 5.66553 19.0953 5.55359 18.9242 5.46448L11.4242 1.55652C10.845 1.25476 10.155 1.25476 9.57581 1.55652ZM9.75 22.6738L9.75 11.5573L1.00128 7.16577L1 16.9119C1 17.6573 1.41467 18.3411 2.07581 18.6855L9.57581 22.5934C9.63287 22.6232 9.69098 22.65 9.75 22.6738ZM19.9987 7.16577L11.25 11.5573L11.25 22.6738C11.309 22.65 11.3671 22.6232 11.4242 22.5934L14.4602 21.0115C13.2559 19.9142 12.5 18.333 12.5 16.5752C12.5 13.2615 15.1863 10.5752 18.5 10.5752C19.0179 10.5752 19.5206 10.6409 20 10.7643L19.9987 7.16577ZM4.28943 11.7861L7.72363 13.5032C7.89301 13.5879 8 13.761 8 13.9504L8 15.3177C8 15.4664 7.84357 15.5631 7.71057 15.4967L4.27637 13.7795C4.10699 13.6949 4 13.5217 4 13.3324L4 11.965C4 11.8163 4.15643 11.7196 4.28943 11.7861ZM14 16.575C14 14.0896 16.0147 12.075 18.5 12.075C20.9853 12.075 23 14.0896 23 16.575C23 19.0602 20.9853 21.075 18.5 21.075C16.0147 21.075 14 19.0602 14 16.575ZM18.75 16.4441L18.75 14.825C18.75 14.4049 18.42 14.075 18 14.075C17.58 14.075 17.25 14.4049 17.25 14.825L17.25 16.818C17.25 17.0674 17.3495 17.267 17.5487 17.417L19.5487 18.924C19.8842 19.1766 20.3463 19.1117 20.599 18.7762C20.8517 18.4408 20.7867 17.9786 20.4513 17.7258L18.75 16.4441Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/waiting-to-pick.svg b/packages/theme-saas/src/svgs/waiting-to-pick.svg
new file mode 100644
index 000000000..a2b0cbe14
--- /dev/null
+++ b/packages/theme-saas/src/svgs/waiting-to-pick.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1872)">
+		<path id="矢量 157" d="M3.74188 2.32922C3.36627 1.91394 2.74481 1.88269 2.32941 2.2583C1.91412 2.63391 1.88287 3.25537 2.25848 3.67078L4.00018 5.59656L4.00018 15.5C4.00018 16.0601 4.44025 16.5 5.00018 16.5L20.5 16.4999C21.34 16.4999 22 15.84 22 14.9999C22 14.1599 21.34 13.4999 20.5 13.4999L17.5186 13.4999C18.3367 13.4999 19 12.8367 19 12.0184L19 4.98145C19 4.16321 18.3367 3.49988 17.5186 3.49988L9.48151 3.49988C8.66339 3.49988 8.00006 4.16321 8.00006 4.98145L8.00006 12.0184C8.00006 12.8367 8.66339 13.4999 9.48151 13.4999L6.00018 13.4999L6.00018 5.21143C6.00018 5.08752 5.97797 4.96777 5.93341 4.85205C5.88885 4.73645 5.82501 4.63257 5.74188 4.54065L3.74188 2.32922ZM13.7501 8.24988L13.7501 5.99988C13.7501 5.57996 13.4201 5.24988 13.0001 5.24988C12.58 5.24988 12.2501 5.57996 12.2501 5.99988L12.2501 8.99988C12.2501 9.20703 12.3233 9.38379 12.4698 9.53027C12.6161 9.67664 12.7929 9.74988 13.0001 9.74988L16.0001 9.74988C16.4201 9.74988 16.7501 9.41992 16.7501 8.99988C16.7501 8.57996 16.4201 8.24988 16.0001 8.24988L13.7501 8.24988ZM7.50006 17.4999C6.11932 17.4999 5.00006 18.6193 5.00006 19.9999C5.00006 21.3806 6.11932 22.4999 7.50006 22.4999C8.88068 22.4999 10.0001 21.3806 10.0001 19.9999C10.0001 18.6193 8.88068 17.4999 7.50006 17.4999ZM17.5001 17.4999C16.1193 17.4999 15.0001 18.6193 15.0001 19.9999C15.0001 21.3806 16.1193 22.4999 17.5001 22.4999C18.8806 22.4999 20 21.3806 20 19.9999C20 18.6193 18.8806 17.4999 17.5001 17.4999Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/write-production-plan.svg b/packages/theme-saas/src/svgs/write-production-plan.svg
new file mode 100644
index 000000000..08d45a12c
--- /dev/null
+++ b/packages/theme-saas/src/svgs/write-production-plan.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1888)">
+		<path id="矢量 164" d="M15.5 2L8.5 2C7.94769 2 7.5 2.44775 7.5 3L7.5 4C7.5 4.55225 7.94769 5 8.5 5L15.5 5C16.0523 5 16.5 4.55225 16.5 4L16.5 3C16.5 2.44775 16.0523 2 15.5 2ZM6 3.5C5.95886 3.65979 6 3.82739 6 4L6 4.5C6 5.60461 6.89545 6.5 8 6.5L16 6.5C17.1046 6.5 18 5.60461 18 4.5L18 4C18 3.82739 17.9781 3.65979 17.937 3.5C19.5939 3.5 21 4.84314 21 6.5L21 19C21 20.6569 19.6569 22 18 22L6 22C4.34314 22 3 20.6569 3 19L3 6.5C3 4.84314 4.34314 3.5 6 3.5ZM11.0707 8.75L12.9292 8.75C13.2523 8.75 13.5353 8.96924 13.6201 9.28528L13.8717 10.223L14.4965 10.5895L15.4206 10.3425C15.7332 10.2589 16.0623 10.3981 16.2236 10.682L17.1544 12.3198C17.3153 12.6029 17.2697 12.96 17.0431 13.1923L16.3687 13.8835L16.3687 14.6165L17.0431 15.3077C17.2697 15.54 17.3153 15.8971 17.1544 16.1802L16.2237 17.8179C16.0623 18.1019 15.7332 18.241 15.4206 18.1575L14.497 17.9105L13.8717 18.2772L13.6202 19.2147C13.5353 19.5308 13.2523 19.75 12.9292 19.75L11.0707 19.75C10.7477 19.75 10.4647 19.5308 10.3798 19.215L10.1279 18.277L9.50305 17.9105L8.57947 18.1575C8.26685 18.241 7.93774 18.1019 7.77637 17.8179L6.84558 16.1801C6.68475 15.8971 6.73029 15.54 6.95679 15.3077L7.6311 14.6162L7.6311 13.8833L6.95697 13.1923C6.73035 12.96 6.68475 12.6029 6.84564 12.3198L7.77637 10.6821C7.93774 10.3981 8.26685 10.259 8.57947 10.3425L9.50305 10.5895L10.1279 10.223L10.3798 9.28503C10.4647 8.96924 10.7477 8.75 11.0707 8.75ZM12 17.2916C13.6615 17.2916 15.0111 15.9283 15.0111 14.25C15.0111 12.5717 13.6615 11.2084 12 11.2084C10.3385 11.2084 8.98889 12.5717 8.98889 14.25C8.98889 15.9283 10.3385 17.2916 12 17.2916ZM12 15.7916C12.8338 15.7916 13.5111 15.1007 13.5111 14.25C13.5111 13.3993 12.8338 12.7084 12 12.7084C11.1662 12.7084 10.4889 13.3993 10.4889 14.25C10.4889 15.1007 11.1662 15.7916 12 15.7916Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/svgs/xml.svg b/packages/theme-saas/src/svgs/xml.svg
new file mode 100644
index 000000000..be3565327
--- /dev/null
+++ b/packages/theme-saas/src/svgs/xml.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1910)">
+		<g opacity="0.000000"/>
+		<path id="矢量 186" d="M14.1617 2.0957C14.0532 2.03479 13.928 2 13.7947 2L6.69739 2C4.93018 2 3.5 3.44141 3.5 5.21667L3.5 18.7834C3.5 20.5586 4.93018 22 6.69739 22L17.3026 22C19.0698 22 20.5 20.5586 20.5 18.7834L20.5 8.79333C20.5 8.56653 20.3994 8.36328 20.2405 8.22632C20.2109 8.18591 20.1782 8.14697 20.1426 8.10986L14.6188 2.38159C14.491 2.24902 14.3337 2.15161 14.1617 2.0957ZM14.5439 4.46399L17.994 8.04297L15.5079 8.04333C14.9958 8.04333 14.5447 7.61792 14.5447 7.14893L14.5439 4.46399ZM7.60461 12.2683L6.72815 13.4744L5.85168 12.2684C5.60474 11.9287 5.1438 11.8558 4.80408 12.1028C4.46436 12.3496 4.39148 12.8107 4.63831 13.1504L5.80103 14.75L4.63831 16.3499C4.39148 16.6895 4.46436 17.1504 4.80408 17.3975C5.1438 17.6443 5.60486 17.5713 5.85168 17.2317L6.72827 16.0256L7.60461 17.2314C7.85156 17.5713 8.3125 17.6443 8.65234 17.3972C8.99207 17.1504 9.06494 16.6895 8.81799 16.3496L7.6554 14.75L8.81799 13.1503C9.06494 12.8104 8.99207 12.3495 8.65234 12.1025C8.3125 11.8557 7.85156 11.9286 7.60461 12.2683ZM13.3937 15.0875L13.3937 16.7891C13.3937 17.209 13.7236 17.5391 14.1437 17.5391C14.5637 17.5391 14.8937 17.209 14.8937 16.7891L14.8937 12.7083C14.8937 12.6047 14.8754 12.5088 14.8387 12.4204C14.8021 12.332 14.7472 12.2512 14.674 12.178C14.6008 12.1047 14.52 12.0498 14.4316 12.0132C14.3431 11.9766 14.2472 11.9583 14.1437 11.9583C14.0825 11.9583 14.0231 11.9653 13.9653 11.9795C13.9076 11.9935 13.8517 12.0148 13.7974 12.0431C13.743 12.0713 13.6936 12.105 13.6489 12.1442C13.6042 12.1833 13.5643 12.228 13.5293 12.2782L12.166 14.2256L10.8029 12.2782C10.7434 12.1934 10.6735 12.1252 10.5928 12.0739C10.5121 12.0225 10.4208 11.9877 10.3187 11.9697C10.2168 11.9518 10.1191 11.9531 10.0258 11.9738C9.93237 11.9944 9.84314 12.0344 9.7583 12.0939C9.70813 12.1289 9.66357 12.1688 9.62439 12.2135C9.58521 12.2582 9.55139 12.3076 9.52319 12.3619C9.495 12.4163 9.47375 12.4722 9.45959 12.5299C9.44556 12.5876 9.43848 12.6471 9.43848 12.7083L9.43848 16.7891C9.43848 17.209 9.76843 17.5391 10.1885 17.5391C10.6084 17.5391 10.9385 17.209 10.9385 16.7891L10.9385 15.0875L11.5516 15.9635C11.5657 15.9802 11.6202 16.0483 11.6357 16.0637C11.6525 16.0776 11.718 16.1353 11.736 16.1479C11.8208 16.2073 11.9099 16.2473 12.0033 16.2681C12.0967 16.2888 12.1945 16.29 12.2964 16.272C12.3983 16.2542 12.4897 16.2195 12.5704 16.168C12.6511 16.1165 12.7211 16.0483 12.7805 15.9635L13.3937 15.0875ZM16.8727 16.0391L16.8727 12.7083C16.8727 12.2883 16.5426 11.9583 16.1227 11.9583C15.7026 11.9583 15.3727 12.2883 15.3727 12.7083L15.3727 16.7891C15.3727 16.8926 15.391 16.9885 15.4276 17.0769C15.4641 17.1653 15.519 17.2461 15.5923 17.3193C15.6655 17.3926 15.7463 17.4475 15.8347 17.4841C15.9231 17.5208 16.019 17.5391 16.1227 17.5391L18.7583 17.5391C19.1783 17.5391 19.5083 17.209 19.5083 16.7891C19.5083 16.3691 19.1783 16.0391 18.7583 16.0391L16.8727 16.0391Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme-saas/src/table/index.less b/packages/theme-saas/src/table/index.less
index 964c3fe68..2093ec2fe 100644
--- a/packages/theme-saas/src/table/index.less
+++ b/packages/theme-saas/src/table/index.less
@@ -17,8 +17,6 @@
       }
 
       tbody {
-        @apply border-b border-b-color-border;
-
         tr {
           @apply text-color-text-primary;
           @apply bg-color-bg-2;
@@ -39,16 +37,17 @@
         }
 
         .noData {
-          width: 582px;
-          height: 360px;
-          @apply text-center;
-          @apply text-color-text-placeholder;
-          @apply ~'pt-2.5';
-          @apply flex;
-          @apply -mb-px;
-          @apply border-b border-b-color-border;
-          @apply justify-center;
-          @apply items-center;
+          &:hover {
+            background: transparent;
+          }
+
+          td {
+            height: 160px;
+            @apply text-center;
+            vertical-align: middle;
+            @apply text-color-text-placeholder;
+            background-color: transparent;
+          }
         }
       }
 
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 3f5cf0725..b066ac082 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-theme",
-  "version": "3.14.0",
+  "version": "3.15.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/base/basic-var.less b/packages/theme/src/base/basic-var.less
index ba09b9df9..65561e22f 100644
--- a/packages/theme/src/base/basic-var.less
+++ b/packages/theme/src/base/basic-var.less
@@ -306,7 +306,7 @@
   * 适用于组件中的margin、padding
   **/
 
-  /* 基础间距*/
+  /* 基础间距 */
   --ti-common-space-base: 4px;
   --ti-common-space-2x: calc(var(--ti-common-space-base) * 2); // 间距-2
   --ti-common-space-3x: calc(var(--ti-common-space-base) * 3); // 间距-3
diff --git a/packages/theme/src/cascader-menu/index.less b/packages/theme/src/cascader-menu/index.less
index a14800c46..715a59e62 100644
--- a/packages/theme/src/cascader-menu/index.less
+++ b/packages/theme/src/cascader-menu/index.less
@@ -62,4 +62,13 @@
     text-align: center;
     color: var(--ti-cascader-menu-empty-text-color);
   }
+
+  &__no-data {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: var(--ti-cascader-menu-empty-text-color);
+  }
 }
diff --git a/packages/theme/src/credit-card-form/index.less b/packages/theme/src/credit-card-form/index.less
deleted file mode 100644
index 0d482ddc4..000000000
--- a/packages/theme/src/credit-card-form/index.less
+++ /dev/null
@@ -1,715 +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.
-*
-*/
-
-.credit-card-form {
-  max-width: 570px;
-  margin: auto;
-  width: 100%;
-  font-family: arial;
-
-  @media screen and (max-width: 576px) {
-    margin: 0 auto;
-  }
-
-  &__inner {
-    background: #fff;
-    box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
-    border-radius: 10px;
-    padding: 35px;
-    padding-top: 180px;
-
-    @media screen and (max-width: 480px) {
-      padding: 25px;
-      padding-top: 165px;
-    }
-
-    @media screen and (max-width: 360px) {
-      padding: 15px;
-      padding-top: 165px;
-    }
-  }
-
-  &__row {
-    display: flex;
-    align-items: flex-start;
-
-    @media screen and (max-width: 480px) {
-      flex-wrap: wrap;
-    }
-  }
-
-  &__col {
-    flex: auto;
-    margin-right: 35px;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    @media screen and (max-width: 480px) {
-      margin-right: 0;
-      flex: unset;
-      width: 100%;
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &.-cvv {
-      max-width: 150px;
-
-      @media screen and (max-width: 480px) {
-        max-width: initial;
-      }
-    }
-  }
-
-  &__group {
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: wrap;
-
-    .credit-card-input__input {
-      flex: 1;
-      margin-right: 15px;
-      outline: none;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    select::-ms-expand {
-      display: none;
-    }
-  }
-
-  &__button {
-    width: 100%;
-    height: 55px;
-    background: #2364d2;
-    border: none;
-    border-radius: 5px;
-    font-size: 22px;
-    font-weight: 500;
-    box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
-    color: #fff;
-    margin-top: 20px;
-    cursor: pointer;
-
-    @media screen and (max-width: 480px) {
-      margin-top: 10px;
-    }
-  }
-}
-
-.credit-card-item {
-  max-width: 430px;
-  height: 270px;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  z-index: 2;
-  width: 100%;
-
-  @media screen and (max-width: 480px) {
-    max-width: 310px;
-    height: 220px;
-    width: 90%;
-  }
-
-  @media screen and (max-width: 360px) {
-    height: 180px;
-  }
-
-  &.-active {
-    .card-item__side {
-      &.-front {
-        transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg);
-      }
-
-      &.-back {
-        transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg);
-      }
-    }
-  }
-
-  &__focus {
-    position: absolute;
-    z-index: 3;
-    border-radius: 5px;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
-    opacity: 0;
-    pointer-events: none;
-    overflow: hidden;
-    border: 2px solid rgba(255, 255, 255, 0.65);
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      background: rgb(8, 20, 47);
-      height: 100%;
-      border-radius: 5px;
-      filter: blur(25px);
-      opacity: 0.5;
-    }
-
-    &.-active {
-      opacity: 1;
-    }
-  }
-
-  &__side {
-    border-radius: 15px;
-    overflow: hidden;
-    box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);
-    transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);
-    transform-style: preserve-3d;
-    transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
-    backface-visibility: hidden;
-    height: 100%;
-
-    &.-back {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg);
-      z-index: 2;
-      padding: 0;
-      height: 100%;
-
-      .card-item__cover {
-        transform: rotateY(-180deg);
-      }
-    }
-  }
-
-  &__bg {
-    max-width: 100%;
-    display: block;
-    max-height: 100%;
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
-
-  &__cover {
-    height: 100%;
-    position: absolute;
-    height: 100%;
-    background-color: #1c1d27;
-    background-image: linear-gradient(147deg, #354fce 0%, #0c296b 74%);
-    left: 0;
-    top: 0;
-    width: 100%;
-    border-radius: 15px;
-    overflow: hidden;
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(6, 2, 29, 0.45);
-    }
-  }
-
-  &__top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    margin-bottom: 40px;
-    padding: 0 10px;
-
-    @media screen and (max-width: 480px) {
-      margin-bottom: 25px;
-    }
-
-    @media screen and (max-width: 360px) {
-      margin-bottom: 15px;
-    }
-  }
-
-  &__chip {
-    width: 60px;
-
-    @media screen and (max-width: 480px) {
-      width: 50px;
-    }
-
-    @media screen and (max-width: 360px) {
-      width: 40px;
-    }
-  }
-
-  &__type {
-    height: 45px;
-    position: relative;
-    display: flex;
-    justify-content: flex-end;
-    max-width: 100px;
-    margin-left: auto;
-    width: 100%;
-
-    @media screen and (max-width: 480px) {
-      height: 40px;
-      max-width: 90px;
-    }
-
-    @media screen and (max-width: 360px) {
-      height: 30px;
-    }
-  }
-
-  &__typeImg {
-    max-width: 100%;
-    object-fit: contain;
-    max-height: 100%;
-    object-position: top right;
-  }
-
-  &__info {
-    color: #fff;
-    width: 100%;
-    max-width: calc(100% - 85px);
-    padding: 10px 15px;
-    font-weight: 500;
-    display: block;
-
-    cursor: pointer;
-
-    @media screen and (max-width: 480px) {
-      padding: 10px;
-    }
-  }
-
-  &__holder {
-    opacity: 0.7;
-    font-size: 13px;
-    margin-bottom: 6px;
-
-    @media screen and (max-width: 480px) {
-      font-size: var(--ti-common-font-size-base);
-      margin-bottom: 5px;
-    }
-  }
-
-  &__wrapper {
-    padding: 25px 15px;
-    position: relative;
-    z-index: 4;
-    height: 100%;
-    text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8);
-    user-select: none;
-
-    @media screen and (max-width: 480px) {
-      padding: 20px 10px;
-    }
-  }
-
-  &__name {
-    font-size: var(--ti-common-font-size-3);
-    line-height: 1;
-    white-space: nowrap;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-
-    @media screen and (max-width: 480px) {
-      font-size: var(--ti-common-font-size-2);
-    }
-  }
-
-  &__nameItem {
-    display: inline-block;
-    min-width: 8px;
-    position: relative;
-  }
-
-  &__number {
-    font-weight: 500;
-    line-height: 1;
-    color: #fff;
-    font-size: 27px;
-    margin-bottom: 25px;
-    display: inline-block;
-    padding: 10px 15px;
-    cursor: pointer;
-
-    @media screen and (max-width: 480px) {
-      font-size: 21px;
-      margin-bottom: 15px;
-      padding: 10px 10px;
-    }
-
-    @media screen and (max-width: 360px) {
-      font-size: 19px;
-      margin-bottom: 10px;
-      padding: 10px 10px;
-    }
-  }
-
-  &__numberItem {
-    width: 16px;
-    display: inline-block;
-
-    &.-active {
-      width: 30px;
-    }
-
-    @media screen and (max-width: 480px) {
-      width: 13px;
-
-      &.-active {
-        width: 16px;
-      }
-    }
-
-    @media screen and (max-width: 360px) {
-      width: 12px;
-
-      &.-active {
-        width: 8px;
-      }
-    }
-  }
-
-  &__content {
-    color: #fff;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  &__date {
-    flex-wrap: wrap;
-    font-size: var(--ti-common-font-size-3);
-    margin-left: auto;
-    padding: 10px;
-    display: inline-flex;
-    width: 80px;
-    white-space: nowrap;
-    flex-shrink: 0;
-    cursor: pointer;
-
-    @media screen and (max-width: 480px) {
-      font-size: var(--ti-common-font-size-2);
-    }
-  }
-
-  &__dateItem {
-    position: relative;
-
-    span {
-      width: 22px;
-      display: inline-block;
-    }
-  }
-
-  &__dateTitle {
-    opacity: 0.7;
-    font-size: 13px;
-    padding-bottom: 6px;
-    width: 100%;
-
-    @media screen and (max-width: 480px) {
-      font-size: var(--ti-common-font-size-base);
-      padding-bottom: 5px;
-    }
-  }
-
-  &__band {
-    background: rgba(0, 0, 19, 0.8);
-    width: 100%;
-    height: 50px;
-    margin-top: 30px;
-    position: relative;
-    z-index: 2;
-
-    @media screen and (max-width: 480px) {
-      margin-top: 20px;
-    }
-
-    @media screen and (max-width: 360px) {
-      height: 40px;
-      margin-top: 10px;
-    }
-  }
-
-  &__cvv {
-    text-align: right;
-    position: relative;
-    z-index: 2;
-    padding: 15px;
-
-    .card-item__type {
-      opacity: 0.7;
-    }
-
-    @media screen and (max-width: 360px) {
-      padding: 10px 15px;
-    }
-  }
-
-  &__cvvTitle {
-    padding-right: 10px;
-    font-size: 15px;
-    font-weight: 500;
-    color: #fff;
-    margin-bottom: 5px;
-  }
-
-  &__cvvBand {
-    height: 45px;
-    background: #fff;
-    margin-bottom: 30px;
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-right: 10px;
-    color: #1a3b5d;
-    font-size: var(--ti-common-font-size-3);
-    border-radius: 4px;
-    box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35);
-
-    @media screen and (max-width: 480px) {
-      height: 40px;
-      margin-bottom: 20px;
-    }
-
-    @media screen and (max-width: 360px) {
-      margin-bottom: 15px;
-    }
-  }
-}
-
-.credit-card-list {
-  margin-bottom: -130px;
-
-  @media screen and (max-width: 480px) {
-    margin-bottom: -120px;
-  }
-}
-
-.credit-card-input {
-  margin-bottom: 20px;
-  position: relative;
-
-  &__label {
-    font-size: var(--ti-common-font-size-1);
-    margin-bottom: 5px;
-    font-weight: 500;
-    color: #1a3b5d;
-    width: 100%;
-    display: block;
-    user-select: none;
-  }
-
-  &__input {
-    width: 100%;
-    height: 50px;
-    border-radius: 5px;
-    box-shadow: none;
-    border: 1px solid #ced6e0;
-    transition: all 0.3s ease-in-out;
-    font-size: var(--ti-common-font-size-3);
-    padding: 5px 15px;
-    background: none;
-    color: #1a3b5d;
-    outline: none;
-
-    &:hover,
-    &:focus {
-      border-color: #3d9cff;
-    }
-
-    &:focus {
-      box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35);
-    }
-
-    &.-select {
-      -webkit-appearance: none;
-      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC');
-      background-size: 12px;
-      background-position: 90% center;
-      background-repeat: no-repeat;
-      padding-right: 30px;
-      flex: 1;
-      cursor: pointer;
-    }
-  }
-
-  &__eye {
-    display: inline-flex;
-    position: absolute;
-    width: 1em;
-    height: 1em;
-    font-size: var(--ti-common-font-size-5);
-    border-radius: 50%;
-    top: 42px;
-    right: 10px;
-    opacity: 0.75;
-    color: #8c9cae;
-    cursor: pointer;
-    padding: 0;
-    background: none;
-    display: inline-flex;
-    border: 2px solid currentColor;
-    box-shadow: none;
-    transition: all 0.3s ease-in-out;
-    outline: none;
-
-    &:before {
-      content: '';
-      position: absolute;
-      background: white;
-      width: 0.35em;
-      height: 0.35em;
-      top: 6px;
-      left: 6px;
-      z-index: 2;
-      border-radius: 50%;
-      transform: scale(0.1);
-      opacity: 0;
-      transition: all 0.3s ease-in-out;
-      transition-delay: 0.1s;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: 3px;
-      left: 3px;
-      background: currentColor;
-      width: 0.6em;
-      height: 0.6em;
-      border-radius: 50%;
-      transform: scale(0.1);
-      opacity: 0;
-      transition: all 0.3s ease-in-out;
-    }
-
-    &:hover:not(:disabled),
-    &.-active:not(:disabled) {
-      color: #2364d2;
-      opacity: 1;
-    }
-
-    &.-active {
-      &::before,
-      &::after {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-  }
-}
-
-.slide-fade-up-enter-active {
-  transition: all 0.25s ease-in-out;
-  transition-delay: 0.1s;
-  position: relative;
-}
-
-.slide-fade-up-leave-active {
-  transition: all 0.25s ease-in-out;
-  position: absolute;
-}
-
-.slide-fade-up-enter {
-  opacity: 0;
-  transform: translateY(15px);
-  pointer-events: none;
-}
-
-.slide-fade-up-leave-to {
-  opacity: 0;
-  transform: translateY(-15px);
-  pointer-events: none;
-}
-
-.slide-fade-right-enter-active {
-  transition: all 0.25s ease-in-out;
-  transition-delay: 0.1s;
-  position: relative;
-}
-
-.slide-fade-right-leave-active {
-  transition: all 0.25s ease-in-out;
-  position: absolute;
-}
-
-.slide-fade-right-enter {
-  opacity: 0;
-  transform: translateX(10px) rotate(45deg);
-  pointer-events: none;
-}
-
-.slide-fade-right-leave-to {
-  opacity: 0;
-  transform: translateX(-10px) rotate(45deg);
-  pointer-events: none;
-}
-
-.github-btn {
-  position: absolute;
-  right: 40px;
-  bottom: 50px;
-  text-decoration: none;
-  padding: 15px 25px;
-  border-radius: 4px;
-  box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65);
-  background: #24292e;
-  color: #fff;
-  font-weight: bold;
-  letter-spacing: 1px;
-  font-size: var(--ti-common-font-size-2);
-  text-align: center;
-  transition: all 0.3s ease-in-out;
-
-  @media screen and (min-width: 500px) {
-    &:hover {
-      transform: scale(1.1);
-      box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
-    }
-  }
-
-  @media screen and (max-width: 700px) {
-    position: relative;
-    bottom: auto;
-    right: auto;
-    margin-top: 20px;
-
-    &:active {
-      transform: scale(1.1);
-      box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
-    }
-  }
-}
diff --git a/packages/theme/src/credit-card-form/vars.less b/packages/theme/src/credit-card-form/vars.less
deleted file mode 100644
index 7925ec793..000000000
--- a/packages/theme/src/credit-card-form/vars.less
+++ /dev/null
@@ -1,11 +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.
-*
-*/
diff --git a/packages/theme/src/credit-card/index.less b/packages/theme/src/credit-card/index.less
deleted file mode 100644
index 9e08f0874..000000000
--- a/packages/theme/src/credit-card/index.less
+++ /dev/null
@@ -1,402 +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.
-*
-*/
-
-.credit-card-item {
-  max-width: 430px;
-  height: 270px;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-  z-index: 2;
-  width: 100%;
-
-  @media screen and (max-width: 480px) {
-    max-width: 310px;
-    height: 220px;
-    width: 90%;
-  }
-
-  @media screen and (max-width: 360px) {
-    height: 180px;
-  }
-
-  &.-active {
-    .credit-card-item__side {
-      &.-front {
-        transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg);
-      }
-
-      &.-back {
-        transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg);
-      }
-    }
-  }
-
-  &__focus {
-    position: absolute;
-    z-index: 3;
-    border-radius: 5px;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
-    opacity: 0;
-    pointer-events: none;
-    overflow: hidden;
-    border: 2px solid rgba(255, 255, 255, 0.65);
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      background: rgb(8, 20, 47);
-      height: 100%;
-      border-radius: 5px;
-      filter: blur(25px);
-      opacity: 0.5;
-    }
-
-    &.-active {
-      opacity: 1;
-    }
-  }
-
-  &__side {
-    border-radius: 15px;
-    overflow: hidden;
-    box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);
-    transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);
-    transform-style: preserve-3d;
-    transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
-    backface-visibility: hidden;
-    height: 100%;
-
-    &.-back {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg);
-      z-index: 2;
-      padding: 0;
-      height: 100%;
-
-      .credit-card-item__cover {
-        transform: rotateY(-180deg);
-      }
-    }
-  }
-
-  &__bg {
-    max-width: 100%;
-    display: block;
-    max-height: 100%;
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
-
-  &__cover {
-    height: 100%;
-    position: absolute;
-    height: 100%;
-    background-color: #1c1d27;
-    background-image: linear-gradient(147deg, #354fce 0%, #0c296b 74%);
-    left: 0;
-    top: 0;
-    width: 100%;
-    border-radius: 15px;
-    overflow: hidden;
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(6, 2, 29, 0.45);
-    }
-  }
-
-  &__top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    margin-bottom: 40px;
-    padding: 0 10px;
-
-    @media screen and (max-width: 480px) {
-      margin-bottom: 25px;
-    }
-
-    @media screen and (max-width: 360px) {
-      margin-bottom: 15px;
-    }
-  }
-
-  &__chip {
-    width: 60px;
-
-    @media screen and (max-width: 480px) {
-      width: 50px;
-    }
-
-    @media screen and (max-width: 360px) {
-      width: 40px;
-    }
-  }
-
-  &__type {
-    height: 45px;
-    position: relative;
-    display: flex;
-    justify-content: flex-end;
-    max-width: 100px;
-    margin-left: auto;
-    width: 100%;
-
-    @media screen and (max-width: 480px) {
-      height: 40px;
-      max-width: 90px;
-    }
-
-    @media screen and (max-width: 360px) {
-      height: 30px;
-    }
-  }
-
-  &__typeImg {
-    max-width: 100%;
-    object-fit: contain;
-    max-height: 100%;
-    object-position: top right;
-  }
-
-  &__info {
-    color: #fff;
-    width: 100%;
-    max-width: calc(100% - 85px);
-    padding: 10px 15px;
-    font-weight: 500;
-    display: block;
-
-    cursor: pointer;
-
-    @media screen and (max-width: 480px) {
-      padding: 10px;
-    }
-  }
-
-  &__holder {
-    opacity: 0.7;
-    font-size: 13px;
-    margin-bottom: 6px;
-
-    @media screen and (max-width: 480px) {
-      font-size: var(--ti-common-font-size-base);
-      margin-bottom: 5px;
-    }
-  }
-
-  &__wrapper {
-    padding: 25px 15px;
-    position: relative;
-    z-index: 4;
-    height: 100%;
-    text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8);
-    user-select: none;
-
-    @media screen and (max-width: 480px) {
-      padding: 20px 10px;
-    }
-  }
-
-  &__name {
-    font-size: var(--ti-common-font-size-3);
-    line-height: 1;
-    white-space: nowrap;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-
-    @media screen and (max-width: 480px) {
-      font-size: var(--ti-common-font-size-2);
-    }
-  }
-
-  &__nameItem {
-    display: inline-block;
-    min-width: 8px;
-    position: relative;
-  }
-
-  &__number {
-    font-weight: 500;
-    line-height: 1;
-    color: #fff;
-    font-size: 27px;
-    margin-bottom: 25px;
-    display: inline-block;
-    padding: 10px 15px;
-    cursor: pointer;
-
-    @media screen and (max-width: 480px) {
-      font-size: 21px;
-      margin-bottom: 15px;
-      padding: 10px 10px;
-    }
-
-    @media screen and (max-width: 360px) {
-      font-size: 19px;
-      margin-bottom: 10px;
-      padding: 10px 10px;
-    }
-  }
-
-  &__numberItem {
-    width: 16px;
-    display: inline-block;
-
-    &.-active {
-      width: 30px;
-    }
-
-    @media screen and (max-width: 480px) {
-      width: 13px;
-
-      &.-active {
-        width: 16px;
-      }
-    }
-
-    @media screen and (max-width: 360px) {
-      width: 12px;
-
-      &.-active {
-        width: 8px;
-      }
-    }
-  }
-
-  &__content {
-    color: #fff;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  &__date {
-    flex-wrap: wrap;
-    font-size: var(--ti-common-font-size-3);
-    margin-left: auto;
-    padding: 10px;
-    display: inline-flex;
-    width: 80px;
-    white-space: nowrap;
-    flex-shrink: 0;
-    cursor: pointer;
-
-    @media screen and (max-width: 480px) {
-      font-size: var(--ti-common-font-size-2);
-    }
-  }
-
-  &__dateItem {
-    position: relative;
-
-    span {
-      width: 22px;
-      display: inline-block;
-    }
-  }
-
-  &__dateTitle {
-    opacity: 0.7;
-    font-size: 13px;
-    padding-bottom: 6px;
-    width: 100%;
-
-    @media screen and (max-width: 480px) {
-      font-size: var(--ti-common-font-size-base);
-      padding-bottom: 5px;
-    }
-  }
-
-  &__band {
-    background: rgba(0, 0, 19, 0.8);
-    width: 100%;
-    height: 50px;
-    margin-top: 30px;
-    position: relative;
-    z-index: 2;
-
-    @media screen and (max-width: 480px) {
-      margin-top: 20px;
-    }
-
-    @media screen and (max-width: 360px) {
-      height: 40px;
-      margin-top: 10px;
-    }
-  }
-
-  &__cvv {
-    text-align: right;
-    position: relative;
-    z-index: 2;
-    padding: 15px;
-
-    .credit-card-item__type {
-      opacity: 0.7;
-    }
-
-    @media screen and (max-width: 360px) {
-      padding: 10px 15px;
-    }
-  }
-
-  &__cvvTitle {
-    padding-right: 10px;
-    font-size: 15px;
-    font-weight: 500;
-    color: #fff;
-    margin-bottom: 5px;
-  }
-
-  &__cvvBand {
-    height: 45px;
-    background: #fff;
-    margin-bottom: 30px;
-    text-align: right;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-right: 10px;
-    color: #1a3b5d;
-    font-size: var(--ti-common-font-size-3);
-    border-radius: 4px;
-    box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35);
-
-    @media screen and (max-width: 480px) {
-      height: 40px;
-      margin-bottom: 20px;
-    }
-
-    @media screen and (max-width: 360px) {
-      margin-bottom: 15px;
-    }
-  }
-}
diff --git a/packages/theme/src/credit-card/vars.less b/packages/theme/src/credit-card/vars.less
deleted file mode 100644
index 7925ec793..000000000
--- a/packages/theme/src/credit-card/vars.less
+++ /dev/null
@@ -1,11 +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.
-*
-*/
diff --git a/packages/theme/src/detail-page/index.less b/packages/theme/src/detail-page/index.less
deleted file mode 100644
index c52a53347..000000000
--- a/packages/theme/src/detail-page/index.less
+++ /dev/null
@@ -1,142 +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 '../custom.less';
-@import './vars.less';
-
-@detail-page-prefix-cls: ~'@{css-prefix}detail-page';
-@detail-dialog-prefix-cls: ~'@{css-prefix}detail-dialog';
-@grid-modal__box-prefix-cls: ~'@{css-prefix}grid-modal__box';
-
-.@{grid-modal__box-prefix-cls} {
-  .component-css-vars-detail-page();
-}
-.@{detail-page-prefix-cls} {
-  width: 100%;
-  height: 700px;
-  font-size: var(--ti-detail-page-font-size);
-  display: flex;
-  flex-direction: column;
-
-  & &__header {
-    width: 100%;
-    height: 40px;
-    color: var(--ti-detail-page-text-color);
-    display: flex;
-    border-bottom: 1px solid var(--ti-detail-page-header-border-color);
-    justify-content: space-between;
-    align-items: center;
-
-    span {
-      font-size: var(--ti-detail-page-header-font-size);
-      font-weight: bold;
-    }
-  }
-
-  & &__header-icon {
-    line-height: 1;
-    cursor: pointer;
-
-    .setIconStyle {
-      font-size: var(--ti-detail-page-header-seticon-font-size);
-      fill: var(--ti-detail-page-header-seticon-text-color);
-
-      &:hover {
-        fill: var(--ti-detail-page-header-seticon-hover-text-color);
-      }
-    }
-  }
-
-  & &__content {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  & &__content-item {
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    display: flex;
-
-    .@{detail-page-prefix-cls}__content-item-span {
-      color: var(--ti-detail-page-content-item-text-color);
-      margin-right: 2px;
-    }
-  }
-}
-
-.@{detail-dialog-prefix-cls} {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-
-  & &__header {
-    width: 100%;
-    height: 40px;
-    border-bottom: 1px solid var(--ti-detail-page-header-border-color);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--ti-detail-dialog-header-bg-color);
-    padding-left: 8px;
-
-    & > span {
-      width: 50%;
-      font-weight: bold;
-      border-right: 1px solid var(--ti-detail-page-header-border-color);
-    }
-  }
-
-  & &__header-check {
-    width: 130px;
-
-    span {
-      font-weight: bold;
-    }
-  }
-
-  & &__content {
-    width: 100%;
-    min-height: 225px;
-    max-height: 400px;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    border-bottom: 1px solid var(--ti-detail-page-header-border-color);
-  }
-
-  & &__content-item {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-left: 8px;
-
-    &:hover {
-      background: var(--ti-detail-dialog-content-item-hover-bg-color);
-    }
-  }
-
-  & &__footer {
-    margin-top: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .active {
-    background: var(--ti-detail-dialog-active-bg-color);
-  }
-}
diff --git a/packages/theme/src/detail-page/vars.less b/packages/theme/src/detail-page/vars.less
deleted file mode 100644
index 2bfd9c0c3..000000000
--- a/packages/theme/src/detail-page/vars.less
+++ /dev/null
@@ -1,25 +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.
-*
-*/
-
-.component-css-vars-detail-page() {
-  --ti-detail-page-text-color: var(--ti-common-color-info-normal, #252b3a);
-  --ti-detail-page-font-size: var(--ti-common-font-size-base, 12px);
-  --ti-detail-page-header-font-size: var(--ti-common-font-size-1, 14px);
-  --ti-detail-page-header-border-color: var(--ti-common-color-border, #adb0b8);
-  --ti-detail-page-header-seticon-text-color: var(--ti-base-color-brand-6, #5e7ce0);
-  --ti-detail-page-header-seticon-hover-text-color: var(--ti-base-color-brand-5, #7693f5);
-  --ti-detail-page-header-seticon-font-size: var(--ti-common-font-size-2, 16px);
-  --ti-detail-page-content-item-text-color: var(--ti-common-color-placeholder, #adb0b8);
-  --ti-detail-dialog-header-bg-color: #f1f1f1;
-  --ti-detail-dialog-content-item-hover-bg-color: var(--ti-common-color-hover-background, #f2f5fc);
-  --ti-detail-dialog-active-bg-color: #e9f4fd;
-}
diff --git a/packages/theme/src/dropdown-item/smb-theme.js b/packages/theme/src/dropdown-item/smb-theme.js
index f317104cc..6893fe3af 100644
--- a/packages/theme/src/dropdown-item/smb-theme.js
+++ b/packages/theme/src/dropdown-item/smb-theme.js
@@ -15,7 +15,7 @@ export const tinyDropdownItemSmbTheme = {
   'ti-dropdown-item-active-text-color': '#1476FF',
   'ti-dropdown-item-content-text-hover': '#1476FF',
   'ti-dropdown-item-before-bg-color': 'transparent',
-  'ti-dropdown-item-divided-border-color': 'transparent',
+  'ti-dropdown-item-divided-border-color': 'var(--ti-common-color-line-dividing)',
   'ti-dropdown-item-content-bg-hover': 'transparent',
   'ti-dropdown-item-before-height': '0',
   'ti-dropdown-item-bg-color-selected': 'var(--ti-common-color-bg-white-normal)',
diff --git a/packages/theme/src/form/index.less b/packages/theme/src/form/index.less
index 95ab13dbd..32a3be672 100644
--- a/packages/theme/src/form/index.less
+++ b/packages/theme/src/form/index.less
@@ -92,17 +92,17 @@
       display: inline-block;
       text-align: left;
       padding: 0 0 8px;
-      height: var(--ti-form-item-label-top-label-height);
-      line-height: var(--ti-form-item-label-top-label-line-height);
+      height: var(--ti-form-label-top-label-height);
+      line-height: var(--ti-form-label-top-label-line-height);
     }
 
     .@{form-item-prefix-cls} {
-      margin-bottom: var(--ti-form-item-label-top-margin-bottom);
+      margin-bottom: var(--ti-form-label-top-margin-bottom);
     }
   }
 
   &--label-top & {
-    margin-bottom: var(--ti-form-item-label-top-margin-bottom);
+    margin-bottom: var(--ti-form-label-top-margin-bottom);
   }
 
   &--inline&--label-top {
diff --git a/packages/theme/src/form/smb-theme.js b/packages/theme/src/form/smb-theme.js
index 31ebf1222..165a2eb4f 100644
--- a/packages/theme/src/form/smb-theme.js
+++ b/packages/theme/src/form/smb-theme.js
@@ -1,7 +1,7 @@
 export const tinyFormSmbTheme = {
-  'ti-form-item-label-top-margin-bottom': '24px',
+  'ti-form-label-top-margin-bottom': 'var(--ti-common-space-4x)',
   // smb要求行高为1.5
-  'ti-form-item-label-top-label-line-height': '1.5',
+  'ti-form-label-top-label-line-height': '1.5',
   // border-box需要加上内边距
-  'ti-form-item-label-top-label-height': 'calc(1.5em + 8px)'
+  'ti-form-label-top-label-height': 'calc(1.5em + 8px)'
 }
diff --git a/packages/theme/src/form/vars.less b/packages/theme/src/form/vars.less
index 06c652ab1..57d08490d 100644
--- a/packages/theme/src/form/vars.less
+++ b/packages/theme/src/form/vars.less
@@ -19,9 +19,9 @@
   --ti-form-item-margin-right: calc(var(--ti-common-space-2x, 8px) + 2px);
 
   // 表单项垂直排列时的下边距(hide)
-  --ti-form-item-label-top-margin-bottom: 16px;
+  --ti-form-label-top-margin-bottom: var(--ti-common-space-4x, 16px);
   // 表单项垂直排列时的表单项标签行高(hide)
-  --ti-form-item-label-top-label-line-height: var(--ti-common-size-height-normal, 28px);
+  --ti-form-label-top-label-line-height: var(--ti-common-size-height-normal, 28px);
   // 表单项垂直排列时的表单项标签高度(hide)
-  --ti-form-item-label-top-label-height: var(--ti-common-size-height-normal, 28px);
+  --ti-form-label-top-label-height: var(--ti-common-size-height-normal, 28px);
 }
diff --git a/packages/theme/src/grid/header.less b/packages/theme/src/grid/header.less
index 0f7b376b8..57b69f123 100644
--- a/packages/theme/src/grid/header.less
+++ b/packages/theme/src/grid/header.less
@@ -63,6 +63,12 @@
     }
   }
 
+  &.col__ellipsis {
+    .@{grid-prefix-cls}-edit-icon {
+      flex-shrink: 0;
+    }
+  }
+
   .@{grid-prefix-cls}-required-icon {
     color: var(--ti-grid-error-color);
     line-height: 14px;
diff --git a/packages/theme/src/image-viewer/index.less b/packages/theme/src/image-viewer/index.less
index ec63de376..a4c3f7fb6 100644
--- a/packages/theme/src/image-viewer/index.less
+++ b/packages/theme/src/image-viewer/index.less
@@ -97,6 +97,14 @@
     }
   }
 
+  &__actions-count {
+    font-size: 20px;
+    color: #fff;
+    position: relative;
+    top: -2px;
+    margin-left: 10px;
+  }
+ 
   &__next,
   &__prev {
     top: 50%;
diff --git a/packages/theme/src/index.less b/packages/theme/src/index.less
index e521467eb..42f3bad02 100644
--- a/packages/theme/src/index.less
+++ b/packages/theme/src/index.less
@@ -118,6 +118,7 @@
 @import './popover/index.less';
 @import './progress/index.less';
 @import './qr-code/index.less';
+@import './quarter-panel/index.less';
 @import './query-builder/index.less';
 @import './radio/index.less';
 @import './radio-button/index.less';
@@ -141,6 +142,7 @@
 @import './slide-img/index.less';
 @import './slider/index.less';
 @import './split/index.less';
+@import './statistic/index.less';
 @import './steps/index.less';
 @import './svg/index.less';
 @import './switch/index.less';
diff --git a/packages/theme/src/input/index.less b/packages/theme/src/input/index.less
index 52d62a737..3c4a24d39 100644
--- a/packages/theme/src/input/index.less
+++ b/packages/theme/src/input/index.less
@@ -261,6 +261,16 @@
     padding-right: var(--ti-input-prefix-padding-right);
   }
 
+  &-word-limit &__inner {
+    padding-right: 56px;
+    padding-left: 8px;
+  }
+
+  &-word-limit.@{input-prefix-cls}-suffix &__inner {
+    padding-right: 72px;
+    padding-left: 8px;
+  }
+
   &-medium {
     .input-size(var(--ti-input-medium-height));
   }
@@ -317,7 +327,6 @@
         flex: 1;
         margin-right: 16px;
       }
-
     }
   }
 }
@@ -385,7 +394,7 @@
     border-bottom-left-radius: 0;
   }
 
-  &-append > div:has(>.@{input-prefix-cls}__suffix) {
+  &-append > div:has(> .@{input-prefix-cls}__suffix) {
     display: inline-block;
     position: relative;
     .@{input-prefix-cls}__suffix {
diff --git a/packages/theme/src/mixins/tag.less b/packages/theme/src/mixins/tag.less
index bf093d261..7e20c7744 100644
--- a/packages/theme/src/mixins/tag.less
+++ b/packages/theme/src/mixins/tag.less
@@ -17,6 +17,11 @@
   border-color: @border-color;
   background-color: @background-color;
 
+  // smb新增 图标色默认同步文本色
+  &:not(.@{css-prefix}__close) {
+    fill: @color;
+  }
+
   &.is-hit {
     border-color: @color;
   }
diff --git a/packages/theme/src/option/index.less b/packages/theme/src/option/index.less
index 5bd4313e6..839bb8c64 100644
--- a/packages/theme/src/option/index.less
+++ b/packages/theme/src/option/index.less
@@ -135,7 +135,6 @@
 
   .@{checkbox-prefix-cls} {
     vertical-align: middle;
-    margin-right: 8px;
     margin-bottom: 2px;
   }
 
diff --git a/packages/theme/src/option/smb-theme.js b/packages/theme/src/option/smb-theme.js
index ef9202d64..b2dc6648e 100644
--- a/packages/theme/src/option/smb-theme.js
+++ b/packages/theme/src/option/smb-theme.js
@@ -8,7 +8,7 @@ export const tinyOptionSmbTheme = {
   'ti-option-icon-color-selected': 'var(--ti-common-color-icon-graybg-active)',
   'ti-option-checkbox-border-color-hover': '#191919',
   'ti-option-disabled-text-color': 'var(--ti-common-color-text-disabled)',
-  'ti-option-hover-bg-color': 'var(--ti-common-color-bg-white-emphasize)',
+  '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-highlight-selected-text-color': 'var(--ti-common-color-text-highlight)',
diff --git a/packages/theme/src/search/index.less b/packages/theme/src/search/index.less
index 1426498b0..e27022f19 100644
--- a/packages/theme/src/search/index.less
+++ b/packages/theme/src/search/index.less
@@ -75,8 +75,8 @@
       text-decoration: none;
       display: block;
       width: var(--ti-search-input-btn-width);
-      height: var(--ti-search-input-height);
-      line-height: var(--ti-search-input-height);
+      height: calc(var(--ti-search-input-height) - 2px);
+      line-height: calc(var(--ti-search-input-height) - 2px);
     }
 
     svg {
@@ -191,7 +191,7 @@
 
   &.mini.collapse &__input-btn {
     a {
-      width: var(--ti-search-mini-width);
+      width: calc(var(--ti-search-mini-width) - 2px);
 
       svg {
         fill: var(--ti-search-icon-color);
diff --git a/packages/theme/src/select-dropdown/index.less b/packages/theme/src/select-dropdown/index.less
index 8b91bef28..87878dab9 100644
--- a/packages/theme/src/select-dropdown/index.less
+++ b/packages/theme/src/select-dropdown/index.less
@@ -43,7 +43,7 @@
   }
 
   &.@{popper-prefix-cls} {
-    margin-top: 2px;
+    margin: var(--ti-select-dropdown-margin-top) 0;
   }
 
   & .@{scrollbar-prefix-cls}.is-empty {
@@ -74,6 +74,7 @@
       box-sizing: border-box;
       border-width: var(--ti-select-dropdown-search-border-width);
       background-color: var(--ti-select-dropdown-search-bg-color);
+      height: var(--ti-select-dropdown-search-height);
       padding-right: var(--ti-select-dropdown-search-input-padding-right);
       padding-left: var(--ti-select-dropdown-search-input-padding-left);
       border-radius: var(--ti-select-dropdown-search-border-radius);
@@ -98,6 +99,8 @@
 
     .@{input-prefix-cls}__prefix {
       display: var(--ti-select-dropdown-search-prefix-display);
+      left: 0;
+      font-size: 0;
 
       .tiny-svg {
         font-size: var(--ti-select-dropdown-icon-size);
@@ -208,7 +211,7 @@
   & &__item {
     white-space: nowrap;
     box-sizing: border-box;
-    padding: 0 8px;
+    padding: 0 var(--ti-select-dropdown-item-padding-horizontal);
 
     &.is-disabled {
       svg path:first-of-type {
@@ -218,7 +221,7 @@
   }
 
   .@{select-prefix-cls}__top-create {
-    margin: 0 8px 4px 8px;
+    margin: 0 8px 4px;
     border-bottom: var(--ti-select-dropdown-top-create-border-weight-bottom)
       var(--ti-select-dropdown-top-create-border-style-bottom) var(--ti-select-dropdown-top-create-border-color-bottom);
 
diff --git a/packages/theme/src/select-dropdown/smb-theme.js b/packages/theme/src/select-dropdown/smb-theme.js
index 45cac37b5..0d1af1bf6 100644
--- a/packages/theme/src/select-dropdown/smb-theme.js
+++ b/packages/theme/src/select-dropdown/smb-theme.js
@@ -11,7 +11,7 @@ export const tinySelectDropdownSmbTheme = {
   'ti-select-dropdown-max-height': 'calc(32px * 7 + 8px)',
   'ti-select-dropdown-search-margin-left': 'var(--ti-common-space-4x)',
   'ti-select-dropdown-search-margin-right': 'var(--ti-common-space-4x)',
-  'ti-select-dropdown-search-margin-top': 'calc(var(--ti-common-space-base) * -1)',
+  'ti-select-dropdown-search-margin-top': '0',
   'ti-select-dropdown-search-margin-bottom': 'var(--ti-common-space-2x)',
   'ti-select-dropdown-search-width': 'calc(100% - var(--ti-common-space-4x)*2)',
   'ti-select-dropdown-search-bg-color': 'var(--ti-common-color-bg-white-normal)',
@@ -19,10 +19,11 @@ export const tinySelectDropdownSmbTheme = {
   'ti-select-dropdown-search-suffix-display': 'none',
   'ti-select-dropdown-search-prefix-display': 'block',
   'ti-select-dropdown-search-input-padding-right': 'var(--ti-common-space-3x)',
-  'ti-select-dropdown-search-input-padding-left': '28px',
+  'ti-select-dropdown-search-input-padding-left': 'var(--ti-common-space-5x)',
   'ti-select-dropdown-search-empty-padding-top': 'var(--ti-common-space-3x)',
   'ti-select-dropdown-search-empty-padding-bottom': 'var(--ti-common-space-2x)',
   'ti-select-dropdown-wrap-padding-bottom': 'var(--ti-common-space-0)',
   'ti-select-dropdown-icon-size': 'var(--ti-common-font-size-2)',
-  'ti-select-dropdown-icon-color': 'var(--ti-common-color-icon-normal)'
+  'ti-select-dropdown-icon-color': 'var(--ti-common-color-icon-normal)',
+  'ti-select-dropdown-item-padding-horizontal': 'var(--ti-common-space-4x)'
 }
diff --git a/packages/theme/src/select-dropdown/vars.less b/packages/theme/src/select-dropdown/vars.less
index 039c9586c..536f2a7c6 100644
--- a/packages/theme/src/select-dropdown/vars.less
+++ b/packages/theme/src/select-dropdown/vars.less
@@ -23,6 +23,8 @@
   --ti-select-dropdown-bg-color: var(--ti-common-color-light, #fff);
   // 选择下拉框的阴影
   --ti-select-dropdown-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
+  // 下拉选项水平内边距
+  --ti-select-dropdown-item-padding-horizontal: var(--ti-common-space-2x, 8px);
   // 选择下拉框的顶部外边距
   --ti-select-dropdown-margin-top: var(--ti-common-dropdown-gap, 2px);
   // 下拉面板的最大高度
@@ -87,6 +89,8 @@
   --ti-select-dropdown-search-suffix-display: 'block';
   // 下拉面板搜索框头部图标显示状态
   --ti-select-dropdown-search-prefix-display: none;
+  // 下拉面板搜索框高度
+  --ti-select-dropdown-search-height: 28px;
   // 下拉面板搜索框右侧内边距
   --ti-select-dropdown-search-input-padding-right: 54px;
   // 下拉面板搜索框左侧外边距
@@ -115,6 +119,6 @@
   --ti-select-dropdown-top-create-border-color-bottom: var(--ti-common-color-line-dividing);
   // 下拉面板加载区域的垂直内边距
   --ti-select-dropdown-loading-padding-vertical: var(--ti-common-space-6, 6px);
-  //下拉面板加载区域的水平内边距
+  // 下拉面板加载区域的水平内边距
   --ti-select-dropdown-loading-padding-horizontal: var(--ti-common-space-10, 10px);
 }
diff --git a/packages/theme/src/select/aurora-theme.js b/packages/theme/src/select/aurora-theme.js
index bf58de78e..df0f8e0d6 100644
--- a/packages/theme/src/select/aurora-theme.js
+++ b/packages/theme/src/select/aurora-theme.js
@@ -7,7 +7,7 @@ export const tinySelectAuroraTheme = {
   'ti-select-tags-margin-left': 'var(--ti-common-space-0)',
   'ti-select-tags-wrap-padding-left': '8px',
   'ti-select-input-icon-close-margin-right': 'var(--ti-common-space-2x)',
-  'ti-select-tags-height': 'var(--ti-common-size-6x)',
+  'ti-select-tags-height': '28px',
   'ti-select-input-icon-top': '50%',
   'ti-select-suffix-display': 'none'
 }
diff --git a/packages/theme/src/select/index.less b/packages/theme/src/select/index.less
index b2b13ceaa..9a5089ad3 100644
--- a/packages/theme/src/select/index.less
+++ b/packages/theme/src/select/index.less
@@ -50,6 +50,10 @@
         display: flex;
         width: 100%;
 
+        & > span {
+          display: flex;
+        }
+
         & > span:not(:only-child):first-child {
           max-width: 70%;
         }
@@ -115,6 +119,14 @@
 
     & > span {
       display: contents;
+
+      > span {
+        font-size: 0;
+      }
+    }
+
+    .not-visible {
+      visibility: hidden;
     }
 
     /* 搜索框 */
@@ -126,7 +138,7 @@
       margin-left: 8px;
       color: var(--ti-select-input-text-color);
       font-size: var(--ti-select-input-font-size);
-      height: 28px;
+      height: var(--ti-select-input-height);
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
@@ -180,6 +192,10 @@
         display: inline-flex;
 
         > span {
+          color: red;
+          font-size: var(--ti-tag-font-size);
+          margin: var(--ti-select-tags-margin-top) var(--ti-select-tags-margin-right)
+            var(--ti-select-tags-margin-bottom) var(--ti-select-tags-margin-left);
           display: inline-block;
           width: 100%;
           white-space: nowrap;
@@ -188,9 +204,24 @@
         }
       }
     }
+
+    // 收起按钮
+    .@{select-prefix-cls}__collapse-text {
+      display: inline-flex;
+      align-items: center;
+      margin-left: var(--ti-select-tags-margin-left);
+      font-size: var(--ti-select-collapse-button-font-size);
+      color: var(--ti-select-collapse-button-text-icon-color);
+
+      .tiny-svg {
+        margin-left: var(--ti-select-collapse-button-icon-margin-left);
+        fill: var(--ti-select-collapse-button-text-icon-color);
+      }
+    }
   }
 
-  &.is-hover-expand {
+  &.is-hover-expand,
+  &.is-click-expand {
     vertical-align: top;
 
     .@{select-prefix-cls}__tags-group {
@@ -213,34 +244,43 @@
       &-collapse {
         visibility: visible;
         position: static;
+      }
 
-        &.is-hidden {
-          visibility: hidden;
-          position: absolute;
-        }
+      .is-hidden {
+        visibility: hidden;
+        position: absolute;
       }
 
       > span > span {
         width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .hidden {
+        visibility: hidden;
       }
     }
 
-    &.is-hover .@{select-prefix-cls}__tags {
-      height: auto;
-      max-height: 96px;
-      overflow-y: auto;
+    &.is-hover,
+    &.collapse-tag-clicked {
+      .@{select-prefix-cls}__tags {
+        height: auto;
+        max-height: var(--ti-select-tags-max-height);
+        overflow-y: auto;
 
-      &-collapse {
-        visibility: hidden;
-        position: absolute;
+        &-collapse {
+          visibility: hidden;
+          position: absolute;
 
-        &.is-hidden {
-          margin: 0;
+          &.is-hidden {
+            margin: 0;
+          }
         }
-      }
 
-      &.not-selected {
-        overflow-y: hidden;
+        &.not-selected {
+          overflow-y: hidden;
+        }
       }
     }
 
@@ -268,6 +308,16 @@
     }
   }
 
+  &.is-click-expand .@{select-prefix-cls}__tags-collapse {
+    visibility: visible;
+    position: static;
+
+    &.is-hidden {
+      visibility: hidden;
+      position: absolute;
+    }
+  }
+
   &.is-disabled {
     cursor: not-allowed;
 
@@ -317,12 +367,27 @@
       }
     }
 
+    .@{select-prefix-cls}__limit-txt, .@{select-prefix-cls}__proportion-txt {
+      font-size: var(--ti-select-suffix-font-size);
+      line-height: 1;
+      margin: 0 var(--ti-select-suffix-icon-margin-right);
+    }
+
     .@{select-prefix-cls}__copy {
       cursor: pointer;
+      margin-right: var(--ti-select-suffix-icon-margin-right);
     }
 
     .@{input-prefix-cls}__suffix {
       top: var(--ti-select-input-icon-top);
+
+      &-inner {
+        font-size: 0;
+      }
+    }
+
+    & .@{input-prefix-cls}__suffix-inner {
+      overflow: hidden;
     }
 
     &-medium .@{input-prefix-cls}__suffix {
diff --git a/packages/theme/src/select/smb-theme.js b/packages/theme/src/select/smb-theme.js
index a7c4e4a57..9f68d2d20 100644
--- a/packages/theme/src/select/smb-theme.js
+++ b/packages/theme/src/select/smb-theme.js
@@ -2,9 +2,17 @@ export const tinySelectSmbTheme = {
   'ti-select-input-caret-font-size': 'var(--ti-common-font-size-2)',
   'ti-select-input-caret-hover-icon-color': 'var(--ti-common-color-icon-graybg-hover)',
   'ti-select-input-caret-icon-color': 'var(--ti-common-color-icon-normal)',
-  'ti-select-tags-wrap-padding-left': 'calc(var(--ti-common-space-6) / 2)',
-  'ti-select-tags-wrap-padding-top': 'calc(var(--ti-common-space-6) / 2)',
-  'ti-select-tags-wrap-padding-bottom': 'calc(var(--ti-common-space-6) / 2)',
-  'ti-select-input-icon-top-small': 'var(--ti-common-space-3x)',
-  'ti-select-input-icon-top': 'var(--ti-common-space-4x)'
+  'ti-select-tags-height': 'var(--ti-common-space-8x)',
+  'ti-select-tags-wrap-padding-left': 'var(--ti-common-space-2)',
+  'ti-select-tags-wrap-padding-top': 'var(--ti-common-space-2)',
+  'ti-select-tags-wrap-padding-bottom': 'var(--ti-common-space-2)',
+  'ti-select-input-icon-top-small': 'var(--ti-common-space-4x)',
+  'ti-select-input-icon-top': 'var(--ti-common-space-4x)',
+  'ti-select-tags-margin-left': 'var(--ti-common-space-2)',
+  'ti-select-tags-margin-right': 'var(--ti-common-space-2)',
+  'ti-select-tags-margin-top': 'var(--ti-common-space-2)',
+  'ti-select-tags-margin-bottom': 'var(--ti-common-space-2)',
+  'ti-select-tags-max-height': 'none',
+  'ti-select-collapse-button-text-icon-color': 'var(--ti-common-color-text-link)',
+  'ti-select-input-icon-top-mini': 'var(--ti-common-space-4x)'
 }
diff --git a/packages/theme/src/select/vars.less b/packages/theme/src/select/vars.less
index b581f6185..3290ca481 100644
--- a/packages/theme/src/select/vars.less
+++ b/packages/theme/src/select/vars.less
@@ -37,6 +37,8 @@
   --ti-select-input-disabled-caret-text-color: var(--ti-common-color-text-disabled, #adb0b8);
   // 输入框禁用且悬浮时的边框色
   --ti-select-input-disabled-hover-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
+  // 选择器输入框高度（hide）
+  --ti-select-input-height: var(--ti-common-size-6x, 24px);
   // 迷你型选择器输入框高度（hide）
   --ti-select-input-mini-height: var(--ti-common-size-6x, 24px);
   // 小型选择器输入框高度（hide）
@@ -44,11 +46,11 @@
   // 中型选择器输入框高度（hide）
   --ti-select-input-medium-height: var(--ti-common-size-42);
   // 选择器多选标签容器的左侧内边距
-  --ti-select-tags-wrap-padding-left: var(--ti-common-space-1, 1px);
+  --ti-select-tags-wrap-padding-left: calc(var(--ti-common-space-1, 1px) * 2);
   // 选择器多选标签容器的顶部内边距
-  --ti-select-tags-wrap-padding-top: var(--ti-common-space-1, 1px);
+  --ti-select-tags-wrap-padding-top: calc(var(--ti-common-space-1, 1px) * 2);
   // 选择器多选标签容器的底部内边距
-  --ti-select-tags-wrap-padding-bottom: var(--ti-common-space-1, 1px);
+  --ti-select-tags-wrap-padding-bottom: calc(var(--ti-common-space-1, 1px) * 2);
   // 选择器多选标签容器的右侧内边距
   --ti-select-tags-wrap-padding-right: var(--ti-common-space-0, 0px);
   // 选择器多选标签顶部外边距
@@ -60,7 +62,19 @@
   // 选择器多选标签左侧外边距
   --ti-select-tags-margin-left: var(--ti-common-space-1, 1px);
   // 选择器多选标签单行的高度
-  --ti-select-tags-height: 26px;
+  --ti-select-tags-height: calc(var(--ti-common-size-base) * 7);
+  // 选择器多选标签最大高度
+  --ti-select-tags-max-height: var(--ti-common-size-24x, 96px);
   // 选择器后缀图标显示状态
   --ti-select-suffix-display: 'inline-block';
+  // 选择器右侧图标间距
+  --ti-select-suffix-icon-margin-right: var(--ti-common-space-base, 4px);
+  // 选择器suffix字号
+  --ti-select-suffix-font-size: var(--ti-common-font-size-base, 12px);
+  // 收起按钮文本与图标色(hide)
+  --ti-select-collapse-button-text-icon-color: var(--ti-common-color-primary-normal, #5e7ce0);
+  // 收起按钮图标左边距(hide)
+  --ti-select-collapse-button-icon-margin-left: var(--ti-common-space-2, 2px);
+  // 收起按钮字号(hide)
+  --ti-select-collapse-button-font-size: var(--ti-common-font-size-base, 12px);
 }
diff --git a/packages/theme/src/slide-bar/index.less b/packages/theme/src/slide-bar/index.less
deleted file mode 100644
index 8cc8def91..000000000
--- a/packages/theme/src/slide-bar/index.less
+++ /dev/null
@@ -1,146 +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 '../custom.less';
-@import './vars.less';
-
-@slide-bar-prefix-cls: ~'@{css-prefix}slide-bar';
-@svg-prefix-cls: ~'@{css-prefix}svg';
-
-.@{slide-bar-prefix-cls} {
-  .component-css-vars-slide-bar();
-
-  padding: 0 32px;
-  position: relative;
-
-  > .@{svg-prefix-cls} {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 2em;
-    cursor: pointer;
-    fill: var(--ti-slider-progress-box-arrow-normal-text-color);
-
-    &:hover {
-      fill: var(--ti-slider-progress-box-arrow-hover-text-color);
-    }
-
-    &.@{css-prefix}disabled,
-    &.@{css-prefix}disabled:hover {
-      background: transparent;
-      fill: #fff;
-      cursor: default;
-    }
-  }
-
-  > .icon-chevron-left {
-    left: 0;
-  }
-
-  > .icon-chevron-right {
-    right: 0;
-  }
-
-  li li div {
-    margin: 15px 0;
-    font-size: var(--ti-common-font-size-base);
-    color: #4e5e67;
-
-    &:nth-child(2) {
-      border-bottom: 1px solid var(--ti-slider-progress-box-middleline-border-color);
-    }
-
-    svg {
-      float: right;
-      margin: -6px 0 0 0;
-      background: #fff;
-      fill: var(--ti-slider-progress-box-middleline-icon-color);
-    }
-  }
-
-  & &__content {
-    width: 100%;
-    min-height: 170px;
-    position: relative;
-    overflow: hidden;
-  }
-
-  & &__list {
-    position: absolute;
-    min-height: 170px;
-    display: flex;
-
-    > li {
-      width: 23%;
-      padding: 20px;
-      float: left;
-      margin-left: 2%;
-      position: relative;
-
-      border: 5px solid var(--ti-slider-progress-box-border-color);
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:hover {
-        border-color: var(--ti-slider-progress-box-hover-border-color);
-      }
-
-      > .icon-chevron-down {
-        position: absolute;
-        top: 98.8%;
-        left: 50%;
-        margin-left: -10px;
-        font-size: 2em;
-        width: 22px;
-        display: none !important;
-
-        &:before {
-          content: '';
-          position: absolute;
-          width: 20px;
-          height: 20px;
-          border-right: 5px solid var(--ti-slider-progress-box-hover-border-color);
-          border-bottom: 5px solid var(--ti-slider-progress-box-hover-border-color);
-          transform: rotate(45deg);
-          background: #fff;
-          top: -5px;
-        }
-      }
-
-      > ul {
-        width: 100%;
-        list-style: none;
-      }
-    }
-
-    > li.@{slide-bar-prefix-cls}__select {
-      border-color: var(--ti-slider-progress-box-hover-border-color);
-
-      > .icon-chevron-down {
-        display: block !important;
-      }
-
-      li .@{css-prefix-iconfont} {
-        color: var(--ti-slider-progress-box-hover-border-color);
-      }
-
-      li:nth-child(2) {
-        border-bottom: 1px solid var(--ti-slider-progress-box-hover-border-color);
-      }
-    }
-  }
-}
diff --git a/packages/theme/src/slide-bar/vars.less b/packages/theme/src/slide-bar/vars.less
deleted file mode 100644
index d22be3e40..000000000
--- a/packages/theme/src/slide-bar/vars.less
+++ /dev/null
@@ -1,26 +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.
-*
-*/
-// 组件待废弃，不整改里面的变量了
-.component-css-vars-slide-bar() {
-  // 滚动块边框色
-  --ti-slider-progress-box-border-color: var(--ti-common-color-light, #fff);
-  // 滚动块悬浮时的边框色
-  --ti-slider-progress-box-hover-border-color: rgba(153, 153, 153, 0.7);
-  // 滚动块左右按钮色
-  --ti-slider-progress-box-arrow-normal-text-color: #f2f2f2;
-  // 滚动块左右按钮悬浮时的文本色
-  --ti-slider-progress-box-arrow-hover-text-color: #808080;
-  // 滚动块中间线条的颜色
-  --ti-slider-progress-box-middleline-border-color: #ebebeb;
-  // 滚动块中间线条的末端图标色
-  --ti-slider-progress-box-middleline-icon-color: #ebebeb;
-}
diff --git a/packages/theme/src/steps/aurora-theme.js b/packages/theme/src/steps/aurora-theme.js
index 8c90cc74d..e76b039cd 100644
--- a/packages/theme/src/steps/aurora-theme.js
+++ b/packages/theme/src/steps/aurora-theme.js
@@ -2,16 +2,15 @@ export const tinyStepsAuroraTheme = {
   'ti-steps-text-color': '#191919',
   'ti-steps-text-color-hover': '#191919',
   'ti-steps-description-text-color': '#777777',
-  'ti-steps-font-size-base': 'var(--ti-common-font-size-1)',
-  'ti-steps-circle-width-height': 'var(--ti-common-space-6x)',
+  'ti-steps-font-size-base': 'var(--ti-common-font-size-base)',
   'ti-steps-border-color-hover': '#aeaeae',
   'ti-steps-advanced-li-text-color': 'var(--ti-common-color-text-white)',
-  'ti-steps-line-margin-horizontal': 'var(--ti-common-space-2x)',
+  'ti-steps-line-margin-horizontal': '0px', // px不能省略
   'ti-steps-line-bg-color': '#dbdbdb',
   'ti-steps-line-height': 'var(--ti-common-space-base)',
-  'ti-steps-unselected-icon-color': '#aeaeae',
-  'ti-steps-unselected-border-color': '#aeaeae',
-  'ti-steps-icon-bg-color': '#f3f3f3',
+  'ti-steps-unselected-icon-color': 'var(--ti-common-color-text-white)',
+  'ti-steps-unselected-border-color': '#d9d9d9',
+  'ti-steps-icon-bg-color': 'var(--ti-common-color-line-normal)',
   'ti-steps-icon-hover-text-color': '#aeaeae',
   'ti-steps-bg-color-hover': '#f3f3f3',
   'ti-steps-advanced-error-bg-color': '#fee7e8',
@@ -20,7 +19,6 @@ export const tinyStepsAuroraTheme = {
   'ti-steps-error-border-color': '#e02128',
   'ti-steps-error-text-color': '#e02128',
   'ti-steps-advanced-disabled-bg-color': '#f3f3f3',
-  'ti-steps-done-icon-bg-color': '#eef3fe',
   'ti-steps-done-active-border-color': 'var(--ti-common-color-line-active)',
   'ti-steps-done-active-border-color-hover': 'var(--ti-common-color-line-hover)',
   'ti-steps-doing-icon-bg-color': '#eef3fe',
@@ -31,10 +29,14 @@ export const tinyStepsAuroraTheme = {
   'ti-steps-disabled-select-icon-color': 'var(--ti-common-color-text-white)',
   'ti-steps-active-font-weight': 'var(--ti-common-font-weight-7)',
   'ti-steps-unselected-hover-icon-color': 'var(--ti-common-color-text-white)',
+  'ti-steps-unselected-hover-name-text-color': 'var(--ti-common-text-color-normal)',
   'ti-steps-unselected-hover-border-color': 'var(--ti-common-color-line-normal)',
   'ti-steps-advanced-li-hover-bg-color': 'var(--ti-common-bg-color-header-1)',
   'ti-steps-advanced-done-bg-color': '#eef3fe',
   'ti-steps-advanced-doing-bg-color': '#eef3fe',
   'ti-steps-advanced-done-bg-color-hover': '#d0d8fd',
-  'ti-steps-advanced-doing-bg-color-hover': '#2e8bde'
+  '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)'
 }
diff --git a/packages/theme/src/steps/index.less b/packages/theme/src/steps/index.less
index 70aaead78..c2a6a4ac0 100644
--- a/packages/theme/src/steps/index.less
+++ b/packages/theme/src/steps/index.less
@@ -20,7 +20,8 @@
 @steps-line-prefix-cls: ~'@{css-prefix}steps-line';
 @steps-standard-prefix-cls: ~'@{css-prefix}steps-standard';
 
-.@{steps-prefix-cls}, .@{timeline-prefix-cls} {
+.@{steps-prefix-cls},
+.@{timeline-prefix-cls} {
   .component-css-vars-steps();
 }
 
@@ -140,6 +141,7 @@
 
     &.active {
       background-color: var(--ti-steps-advanced-active-bg-color);
+
       &:hover {
         background-color: var(--ti-steps-done-active-bg-color-hover);
       }
@@ -1071,34 +1073,75 @@
 }
 
 .@{timeline-prefix-cls} {
+  position: relative;
+
   .line {
     background: var(--ti-steps-line-bg-color);
   }
 
   .icon {
-    width: var(--ti-steps-icon-size);
-    height: var(--ti-steps-icon-size);
-    line-height: var(--ti-steps-icon-size);
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: var(--ti-steps-number-font-size);
-    text-align: center;
     left: calc(50% - var(--ti-steps-icon-size) / 2);
     top: 0;
-    border: 1px solid var(--ti-steps-unselected-border-color);
+    width: var(--ti-steps-icon-size);
+    height: var(--ti-steps-icon-size);
+    border: var(--ti-steps-icon-border-width) solid var(--ti-steps-unselected-border-color);
     border-radius: 50%;
     box-sizing: border-box;
-    background: var(--ti-steps-icon-bg-color);
+    overflow: hidden;
     color: var(--ti-steps-unselected-icon-color);
     cursor: pointer;
+    background-color: var(--ti-steps-icon-bg-color);
     z-index: 15;
 
-    .@{css-prefix}svg,
-    span {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      line-height: 1;
+    &[class*=~'icon-'] {
+      background-color: var(--ti-steps-custom-icon-bg-color);
+    }
+
+    &.icon-success {
+      border-color: var(--ti-steps-done-active-border-color);
+
+      .fixicon {
+        fill: var(--ti-steps-done-icon-color);
+      }
+    }
+
+    &.icon-warning {
+      background-color: var(--ti-steps-warning-icon-bg-color);
+      border-color: var(--ti-steps-warning-icon-bg-color);
+
+      .fixicon {
+        fill: var(--ti-steps-warning-icon-color);
+      }
+    }
+
+    &.icon-error {
+      border-color: var(--ti-steps-error-border-color);
+
+      .fixicon {
+        fill: var(--ti-steps-error-icon-color);
+      }
+    }
+
+    .fixicon,
+    .fixicons {
+      width: var(--ti-steps-custom-icon-width-height);
+      height: var(--ti-steps-custom-icon-width-height);
+      background-color: transparent;
+    }
+
+    &.fixicons {
+      padding: 0;
+      left: 0;
+      border: none;
+    }
+
+    .number {
+      display: inline-block;
     }
   }
 
@@ -1119,12 +1162,12 @@
     }
 
     .icon {
-      background: var(--ti-steps-done-icon-bg-color);
       color: var(--ti-steps-done-icon-color);
       fill: var(--ti-steps-done-icon-color);
       border-color: var(--ti-steps-done-active-border-color);
+      background-color: var(--ti-steps-done-icon-bg-color);
 
-      .@{css-prefix}svg {
+      .icon-yes {
         fill: var(--ti-steps-done-icon-color);
         font-size: var(--ti-steps-done-icon-size);
         border-radius: 50%;
@@ -1137,17 +1180,21 @@
     }
 
     .line,
-    &.@{timeline-item-prefix-cls}.timeline .tiny-timeline-item__pillar .line {
+    &.@{timeline-item-prefix-cls}.timeline .@{timeline-item-prefix-cls}__pillar .line {
       background-color: var(--ti-steps-line-active-bg-color);
     }
   }
 
   .process-current {
     .icon {
-      border: none;
-      background: var(--ti-steps-advanced-active-bg-color);
       color: var(--ti-steps-advanced-li-text-color);
       font-size: var(--ti-steps-font-size-base);
+      border-color: var(--ti-steps-advanced-active-border-color);
+      background: var(--ti-steps-advanced-active-bg-color);
+
+      .fixicons {
+        fill: var(--ti-steps-advanced-li-text-color);
+      }
     }
 
     &.@{timeline-item-prefix-cls} .dot-container .dot {
@@ -1162,6 +1209,7 @@
       flex-shrink: 0;
       color: var(--ti-steps-error-icon-color);
       border-color: var(--ti-steps-error-border-color);
+      background-color: var(--ti-steps-error-bg-color);
 
       .icon-wrap {
         font-size: 0;
@@ -1189,16 +1237,20 @@
     cursor: not-allowed;
 
     .icon {
-      color: var(--ti-steps-disabled-icon-color);
-      border-color: var(--ti-steps-disabled-border-color);
       background-color: var(--ti-steps-disabled-icon-bg-color);
+      border-color: var(--ti-steps-disabled-border-color);
+
+      .number {
+        color: var(--ti-steps-disabled-icon-color);
+      }
     }
 
     &.@{timeline-item-prefix-cls} .dot-container .dot {
       background-color: var(--ti-steps-disabled-icon-bg-color);
     }
 
-    &.normal .node-description, .@{timeline-item-prefix-cls}__content {
+    &.normal .node-description,
+    .@{timeline-item-prefix-cls}__content {
       .name,
       & div.name:hover {
         color: var(--ti-steps-disabled-text-color);
@@ -1208,7 +1260,6 @@
 
   .process-done,
   .process-current,
-  .process-wait,
   .process-error {
     .node-description {
       .name:hover {
@@ -1272,6 +1323,7 @@
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;
+            margin-right: var(--ti-steps-name-margin-right);
             overflow: hidden;
             text-overflow: ellipsis;
             word-break: break-all;
@@ -1358,18 +1410,6 @@
         font-weight: var(--ti-steps-active-font-weight);
       }
     }
-
-    .process-wait {
-      .@{steps-prefix-cls}__node .icon:hover,
-      &:hover .icon {
-        border-color: var(--ti-steps-unselected-hover-border-color);
-        color: var(--ti-steps-unselected-hover-icon-color);
-      }
-
-      &:hover .name {
-        color: var(--ti-steps-unselected-hover-icon-color);
-      }
-    }
   }
 
   .show-divider {
@@ -1420,12 +1460,13 @@
     &.@{timeline-prefix-cls}__shape-dot {
       padding-top: 4px;
 
-      .@{timeline-item-prefix-cls}__pillar .line {
-        margin-block: var(--ti-steps-timeline-line-margin-vertical);
-        background-color: var(--ti-steps-timeline-vertical-line-bg-color);
-      }
-
       .timeline {
+        .@{timeline-item-prefix-cls}__pillar .line {
+          width: var(--ti-steps-line-height);
+          margin-block: var(--ti-steps-timeline-line-margin-vertical);
+          background-color: var(--ti-steps-timeline-vertical-line-bg-color);
+        }
+
         .@{timeline-item-prefix-cls}__content {
           margin-left: var(--ti-steps-timeline-shape-dot-content-margin-left);
         }
@@ -1493,6 +1534,7 @@
         flex-direction: column;
         align-items: center;
         align-self: stretch;
+        width: var(--ti-steps-timeline-dot-width);
 
         .line {
           width: var(--ti-steps-line-height);
@@ -1502,6 +1544,10 @@
             vertical-align: baseline;
           }
         }
+
+        .icon {
+          left: 0;
+        }
       }
 
       .date-time {
@@ -1524,6 +1570,11 @@
 
       .dot-container {
         padding: var(--ti-steps-timeline-dot-margin-bottom);
+        position: relative;
+
+        .fixicons {
+          transform: translateY(-50%);
+        }
       }
 
       .dot {
diff --git a/packages/theme/src/steps/smb-theme.js b/packages/theme/src/steps/smb-theme.js
index e31203d7d..28993ecdb 100644
--- a/packages/theme/src/steps/smb-theme.js
+++ b/packages/theme/src/steps/smb-theme.js
@@ -1,13 +1,14 @@
 export const tinyStepsSmbTheme = {
   'ti-steps-circle-width-height': 'var(--ti-common-size-height-normal)',
   'ti-steps-icon-size': 'var(--ti-common-size-height-normal)',
+  'ti-steps-icon-padding': 'var(--ti-common-space-base)',
   'ti-steps-text-margin-left': 'var(--ti-common-space-2x)',
   'ti-steps-font-size-hover': 'var(--ti-common-font-weight-bold)',
   'ti-steps-text-color-hover': 'var(--ti-common-color-text-primary)',
   'ti-steps-icon-hover-text-color': 'var(--ti-common-color-text-primary)',
   'ti-steps-content-margin-top': 'var(--ti-common-space-2x)',
   'ti-steps-advanced-li-text-color': 'var(--ti-common-color-text-white)',
-  'ti-steps-unselected-border-color': 'var(--ti-common-color-text-primary)',
+  'ti-steps-unselected-border-color': 'var(--ti-common-color-line-disabled)',
   'ti-steps-done-text-color': 'var(--ti-common-color-text-primary)',
   'ti-steps-done-icon-color': 'var(--ti-common-color-text-primary)',
   'ti-steps-done-icon-size': 'var(--ti-common-font-size-4)',
@@ -34,5 +35,6 @@ export const tinyStepsSmbTheme = {
   'ti-steps-timeline-item-secondary-text-font-size': 'var(--ti-common-font-size-0)',
   'ti-steps-timeline-vertical-line-margin-left': 'var(--ti-common-space-4x)',
   'ti-steps-timeline-item-padding-bottom': 'var(--ti-common-space-6x)',
-  'ti-steps-timeline-vertical-line-bg-color': 'rgba(0, 0, 0, 8%)'
+  'ti-steps-timeline-vertical-line-bg-color': 'rgba(0, 0, 0, 8%)',
+  'ti-steps-custom-icon-width-height': 'var(--ti-common-space-5x)'
 }
diff --git a/packages/theme/src/steps/vars.less b/packages/theme/src/steps/vars.less
index c3501dca9..6d6697447 100644
--- a/packages/theme/src/steps/vars.less
+++ b/packages/theme/src/steps/vars.less
@@ -61,6 +61,12 @@
   --ti-steps-description-min-width: calc(var(--ti-common-space-10, 10px) * 10);
   // 垂直单链型描述上边距
   --ti-steps-vertical-description-margin-top: var(--ti-common-space-2x);
+  // 图标边框宽度
+  --ti-steps-icon-border-width: var(--ti-common-space-1, 1px);
+  // 自定义图标背景色
+  --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-advanced-active-bg-color: var(--ti-common-color-bg-emphasize, #5e7ce0);
@@ -98,6 +104,8 @@
   --ti-steps-unselected-icon-color: var(--ti-common-color-icon-normal, #575d6c);
   // 未完成节点序号悬浮图标色
   --ti-steps-unselected-hover-icon-color: var(--ti-common-color-icon-hover, #5e7ce0);
+  // 未完成节点序号悬浮名称字体色
+  --ti-steps-unselected-hover-name-text-color: var(--ti-common-color-icon-hover, #5e7ce0);
   // 未完成节点边框色
   --ti-steps-unselected-border-color: var(--ti-steps-unselected-icon-color);
   // 未完成节点悬浮边框色
@@ -114,6 +122,11 @@
   // 处理中节点序号背景色
   --ti-steps-doing-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
 
+  // 警告节点图标色
+  --ti-steps-warning-icon-color: var(--ti-common-color-bg-white-normal, #fff);
+  // 警告节点背景色(hide)
+  --ti-steps-warning-icon-bg-color: var(--ti-common-color-warn, #fa9841);
+
   // 错误节点的背景色
   --ti-steps-error-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
   // 错误节点悬浮背景色
@@ -128,7 +141,7 @@
   --ti-steps-error-text-color: var(--ti-common-color-error-text, #de504e);
 
   // 禁用节点的背景色
-  --ti-steps-disabled-icon-bg-color: var(--ti-common-color-bg-white-normal, #fff);
+  --ti-steps-disabled-icon-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
   // 禁用节点序号文本色
   --ti-steps-disabled-icon-color: var(--ti-common-color-text-disabled, #adb0b8);
   // 禁用节点边框色
diff --git a/packages/theme/src/svgs/automatic-assessment.svg b/packages/theme/src/svgs/automatic-assessment.svg
new file mode 100644
index 000000000..9d6122b55
--- /dev/null
+++ b/packages/theme/src/svgs/automatic-assessment.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1892)">
+		<g opacity="0.000000"/>
+		<path id="矢量 168" d="M12.295 2C12.4283 2 12.5535 2.03467 12.662 2.0957C12.834 2.15161 12.9912 2.24902 13.119 2.38159L18.6428 8.10986C18.6785 8.14697 18.7112 8.18579 18.7407 8.22632C18.8996 8.36328 19.0002 8.56665 19.0002 8.79321L19.0002 9.79517C18.4401 9.60352 17.8426 9.5 17.2222 9.5C16.4529 9.5 15.8242 10.1367 15.7802 10.9395C12.5892 10.9395 10 13.7681 10 17.1467C10 19.1238 10.8858 20.8816 12.2601 22L5.19763 22C3.43042 22 2.00024 20.5586 2.00024 18.7834L2.00024 5.21655C2.00024 3.44141 3.43042 2 5.19763 2L12.295 2ZM16.4943 8.04297L13.0443 4.46411L13.045 7.14893C13.045 7.61792 13.4961 8.04321 14.0082 8.04321L16.4943 8.04297ZM11.0549 8.50439L8.3277 11.5044C8.2511 11.574 8.11725 11.6755 8.02722 11.708C7.93719 11.7405 7.84052 11.7542 7.73706 11.7493C7.63361 11.7441 7.53864 11.7214 7.45209 11.6807C7.36554 11.6399 7.28741 11.5811 7.21777 11.5044L6.13635 10.3149L5.05493 11.5044C4.77246 11.8152 4.30627 11.8374 3.99548 11.5549C3.68469 11.2725 3.66254 10.8062 3.94507 10.4956L5.58142 8.69556C5.65106 8.6189 5.72919 8.56006 5.81573 8.51929C5.90228 8.47852 5.99725 8.45581 6.10071 8.45093C6.20416 8.4458 6.30084 8.45947 6.39087 8.49194C6.4809 8.52441 6.56427 8.57544 6.64087 8.64502L7.77271 9.88501L9.94507 7.49561C10.2275 7.18481 10.6937 7.1626 11.0045 7.44507C11.3153 7.72754 11.3375 8.19385 11.0549 8.50439ZM21.8911 16.1738C21.8186 16.2463 21.71 16.2825 21.565 16.2825L18.0868 16.2825C18.0248 16.2825 17.9641 16.2761 17.9048 16.2634C17.8515 16.2522 17.7993 16.2356 17.7482 16.2141C17.6978 16.1926 17.6501 16.167 17.6053 16.1372C17.5577 16.1057 17.5132 16.0691 17.4719 16.0278C17.4307 15.9866 17.3942 15.9421 17.3625 15.8945C17.3327 15.8496 17.3071 15.802 17.2858 15.7515C17.2642 15.7004 17.2477 15.6482 17.2363 15.595C17.2236 15.5356 17.2173 15.4751 17.2173 15.4131L17.2173 11.9348C17.2173 11.7898 17.2535 11.6812 17.3259 11.6086C17.3984 11.5361 17.5071 11.5 17.652 11.5C17.9752 11.5 18.2908 11.5342 18.5988 11.6028C18.8525 11.6592 19.1011 11.739 19.3445 11.8418C19.5901 11.9458 19.8226 12.0698 20.0416 12.2141C20.2865 12.3752 20.5147 12.5618 20.7264 12.7734C20.938 12.9851 21.1245 13.2134 21.2857 13.4583C21.43 13.6772 21.554 13.9097 21.658 14.1553C21.7609 14.3987 21.8406 14.6472 21.897 14.9009C21.9655 15.209 21.9998 15.5244 21.9998 15.8477C21.9998 15.9927 21.9636 16.1013 21.8911 16.1738ZM16.3478 13.2632L16.3477 16.2827C16.3477 16.4009 16.3704 16.5137 16.4159 16.6211C16.4359 16.6682 16.4595 16.7129 16.487 16.7554C16.52 16.8062 16.5585 16.8538 16.6024 16.8975C16.6828 16.978 16.775 17.04 16.8789 17.084C16.924 17.1033 16.97 17.1182 17.017 17.1294C17.0819 17.1445 17.1487 17.1523 17.2173 17.1523L20.2368 17.1526C20.3818 17.1526 20.4904 17.1887 20.5629 17.2612C20.6354 17.3337 20.6689 17.4902 20.6689 17.6353C20.6387 17.9077 20.5841 18.1729 20.5049 18.4307C20.4285 18.6797 20.329 18.9216 20.2067 19.1567C20.0912 19.3789 19.9587 19.5879 19.8093 19.7842C19.6456 19.9993 19.4617 20.1987 19.2574 20.3828C19.0482 20.5713 18.8253 20.7368 18.5884 20.8794C18.3806 21.0046 18.1622 21.1121 17.9332 21.2017C17.4257 21.4006 16.8972 21.5 16.3477 21.5C16.0245 21.5 15.7089 21.4658 15.4009 21.3972C15.1472 21.3408 14.8986 21.261 14.6553 21.1582C14.4096 21.0542 14.1772 20.9302 13.9583 20.7859C13.7133 20.6248 13.485 20.4382 13.2734 20.2266C13.0618 20.0149 12.8753 19.7866 12.7141 19.5417C12.5699 19.3228 12.4457 19.0903 12.3418 18.8447C12.2389 18.6013 12.1592 18.353 12.1028 18.0994C12.0343 17.7913 11.9999 17.4753 11.9999 17.1523C11.9999 16.8457 12.0309 16.5454 12.0928 16.252C12.1419 16.0193 12.2104 15.791 12.2983 15.5667C12.3881 15.3376 12.4955 15.1191 12.6206 14.9114C12.7632 14.6746 12.9287 14.4517 13.1172 14.2424C13.3013 14.0381 13.5009 13.8542 13.7158 13.6907C13.9121 13.5413 14.1214 13.4087 14.3435 13.2932C14.5786 13.1709 14.8207 13.0713 15.0698 12.9949C15.3275 12.9158 15.5926 12.8611 15.8653 12.8311C16.1534 12.7991 16.316 12.9751 16.3478 13.2632Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/average-shipping-period.svg b/packages/theme/src/svgs/average-shipping-period.svg
new file mode 100644
index 000000000..baf9ab698
--- /dev/null
+++ b/packages/theme/src/svgs/average-shipping-period.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1904)">
+		<g opacity="0.000000"/>
+		<path id="矢量 180" d="M16.5487 2.89819C16.499 2.53223 16.1853 2.25 15.8055 2.25C15.3914 2.25 15.0555 2.58569 15.0555 3L15.0549 4.25L8.94397 4.25L8.94446 3L8.93762 2.89819C8.88794 2.53223 8.57422 2.25 8.19446 2.25C7.78027 2.25 7.44446 2.58569 7.44446 3L7.44397 4.25L5.5 4.25C3.81787 4.34253 2.25 5.71655 2.25 7.3999L2.25 18.6001L2.25513 18.7791C2.34961 20.439 3.74939 21.75 5.45459 21.75L18.5454 21.75L18.7269 21.7451C20.4091 21.6526 21.75 20.2834 21.75 18.6001L21.7449 7.22095C21.6504 5.56104 20.2052 4.25 18.5 4.25L16.5551 4.25L16.5555 3L16.5487 2.89819ZM18.5454 5.75L18.6931 5.7561C19.5684 5.82861 20.25 6.54053 20.25 7.40015L20.25 8.4502L3.75 8.4502L3.75 7.40015L3.75623 7.2583C3.83044 6.4165 4.5592 5.75 5.45459 5.75L18.5454 5.75ZM8.5 12.5833C8.5 12.3992 8.35071 12.25 8.16663 12.25L6.83337 12.25C6.64929 12.25 6.5 12.3992 6.5 12.5833L6.5 13.9167C6.5 14.1008 6.64929 14.25 6.83337 14.25L8.16663 14.25C8.35071 14.25 8.5 14.1008 8.5 13.9167L8.5 12.5833ZM13 12.5833C13 12.3992 12.8507 12.25 12.6666 12.25L11.3334 12.25C11.1493 12.25 11 12.3992 11 12.5833L11 13.9167C11 14.1008 11.1493 14.25 11.3334 14.25L12.6666 14.25C12.8507 14.25 13 14.1008 13 13.9167L13 12.5833ZM17.5 12.5833C17.5 12.3992 17.3507 12.25 17.1666 12.25L15.8334 12.25C15.6493 12.25 15.5 12.3992 15.5 12.5833L15.5 13.9167C15.5 14.1008 15.6493 14.25 15.8334 14.25L17.1666 14.25C17.3507 14.25 17.5 14.1008 17.5 13.9167L17.5 12.5833ZM8.5 16.5833C8.5 16.3992 8.35071 16.25 8.16663 16.25L6.83337 16.25C6.64929 16.25 6.5 16.3992 6.5 16.5833L6.5 17.9167C6.5 18.1008 6.64929 18.25 6.83337 18.25L8.16663 18.25C8.35071 18.25 8.5 18.1008 8.5 17.9167L8.5 16.5833ZM13 16.5833C13 16.3992 12.8507 16.25 12.6666 16.25L11.3334 16.25C11.1493 16.25 11 16.3992 11 16.5833L11 17.9167C11 18.1008 11.1493 18.25 11.3334 18.25L12.6666 18.25C12.8507 18.25 13 18.1008 13 17.9167L13 16.5833ZM17.5 16.5833C17.5 16.3992 17.3507 16.25 17.1666 16.25L15.8334 16.25C15.6493 16.25 15.5 16.3992 15.5 16.5833L15.5 17.9167C15.5 18.1008 15.6493 18.25 15.8334 18.25L17.1666 18.25C17.3507 18.25 17.5 18.1008 17.5 17.9167L17.5 16.5833Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/customs-clearance-form.svg b/packages/theme/src/svgs/customs-clearance-form.svg
new file mode 100644
index 000000000..21477532f
--- /dev/null
+++ b/packages/theme/src/svgs/customs-clearance-form.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1880)">
+		<path id="矢量 29" d="M16 2L6 2C4.34314 2 3 3.34326 3 5L3 19C3 20.6567 4.34314 22 6 22L11.8925 22C9.85962 20.7751 8.5 18.5464 8.5 16C8.5 12.134 11.634 9 15.5 9C16.775 9 17.9703 9.34082 19 9.93652L19 5C19 3.34326 17.6569 2 16 2ZM6 5.25L13.5 5.25C13.92 5.25 14.25 5.58008 14.25 6C14.25 6.41992 13.92 6.75 13.5 6.75L6 6.75C5.57996 6.75 5.25 6.41992 5.25 6C5.25 5.58008 5.57996 5.25 6 5.25ZM6 8.75L8 8.75C8.42004 8.75 8.75 9.08008 8.75 9.5C8.75 9.91992 8.42004 10.25 8 10.25L6 10.25C5.57996 10.25 5.25 9.91992 5.25 9.5C5.25 9.08008 5.57996 8.75 6 8.75ZM10 16C10 12.9624 12.4624 10.5 15.5 10.5C18.5376 10.5 21 12.9624 21 16C21 19.0376 18.5376 21.5 15.5 21.5C12.4624 21.5 10 19.0376 10 16ZM13.4664 13.5C13.4664 12.3955 14.3618 11.5 15.4664 11.5C16.571 11.5 17.4664 12.3955 17.4664 13.5C17.4664 14.3291 16.9618 15.0405 16.2429 15.3438L16.2429 16L16.9999 16C17.4199 16 17.7499 16.3301 17.7499 16.75C17.7499 17.1699 17.4199 17.5 16.9999 17.5L16.2429 17.5L16.2429 18.6665C16.2974 18.6538 16.3514 18.6399 16.4049 18.6243C16.6683 18.5481 16.9218 18.4373 17.1652 18.2915C17.4148 18.1423 17.6375 17.9668 17.8333 17.7651C18.0273 17.5654 18.1949 17.3398 18.3361 17.0886C18.5417 16.7224 18.9911 16.5962 19.3572 16.802C19.7234 17.0078 19.8495 17.457 19.6438 17.8232C19.5491 17.9917 19.4449 18.1536 19.3313 18.3086C19.2012 18.4858 19.0587 18.6538 18.9037 18.813C18.7505 18.9705 18.5881 19.116 18.4164 19.2495C18.2633 19.3689 18.1028 19.4785 17.9349 19.5791C17.7423 19.6943 17.5435 19.7949 17.3385 19.8809C17.1582 19.9565 16.9733 20.021 16.7834 20.0742C16.6199 20.1201 16.4547 20.157 16.2881 20.1848C16.0304 20.228 15.7692 20.2495 15.5044 20.25C15.2454 20.2488 14.964 20.2271 14.7119 20.1848C14.5453 20.157 14.3801 20.1201 14.2166 20.0742C14.028 20.0215 13.8441 19.9575 13.6649 19.8823C13.46 19.7964 13.2576 19.6943 13.0649 19.5791C12.8972 19.4785 12.7367 19.3689 12.5836 19.2498C12.4119 19.116 12.2495 18.9705 12.0962 18.813C11.9413 18.6541 11.7988 18.4858 11.6687 18.3086C11.5551 18.1538 11.4508 17.9917 11.3561 17.8232C11.1504 17.457 11.2766 17.0078 11.6427 16.802C12.0089 16.5962 12.4583 16.7224 12.6639 17.0886C12.8051 17.3398 12.9727 17.5654 13.1667 17.7651C13.3624 17.9668 13.5852 18.1423 13.8348 18.2915C14.0782 18.4373 14.3317 18.5481 14.5951 18.6243C14.6428 18.6379 14.6946 18.6519 14.7429 18.6631L14.7429 17.5L13.9999 17.5C13.5798 17.5 13.2499 17.1699 13.2499 16.75C13.2499 16.3301 13.5798 16 13.9999 16L14.7429 16L14.7429 15.3652C13.996 15.0752 13.4664 14.3494 13.4664 13.5ZM14.9664 13.5C14.9664 13.2239 15.1903 13 15.4664 13C15.7426 13 15.9664 13.2239 15.9664 13.5C15.9664 13.7761 15.7426 14 15.4664 14C15.1903 14 14.9664 13.7761 14.9664 13.5Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/customs-declaration.svg b/packages/theme/src/svgs/customs-declaration.svg
new file mode 100644
index 000000000..ea05e0272
--- /dev/null
+++ b/packages/theme/src/svgs/customs-declaration.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1885)">
+		<path id="矢量 187" d="M9.75 1.00171L14.25 1.00171C15.7688 1.00171 17 2.23291 17 3.75171L17 5.00171L19 5.00171C20.1046 5.00171 21 5.89722 21 7.00171L21 9.5L3.00024 9.5L3.00024 11L21 11L20.9999 20.5007C20.9999 21.6052 20.1046 22.5007 19.0001 22.5007L5.00012 22.5017C3.89551 22.5017 3 21.6062 3 20.5017L3 7.00171C3 5.89722 3.89545 5.00171 5 5.00171L7 5.00171L7 3.75171C7 2.23291 8.2312 1.00171 9.75 1.00171ZM12 2.5C11.5858 2.5 11.25 2.83569 11.25 3.25C11.25 3.66431 11.5858 4 12 4C12.4142 4 12.75 3.66431 12.75 3.25C12.75 2.83569 12.4142 2.5 12 2.5ZM15.2803 19.7808L17.7803 17.2808C17.8535 17.2075 17.9084 17.1267 17.9451 17.0383C17.9817 16.95 18 16.854 18 16.7502C18 16.6467 17.9816 16.5508 17.9449 16.4624C17.9084 16.374 17.8535 16.2932 17.7803 16.22L15.2803 13.72C14.9833 13.4231 14.5166 13.4231 14.2196 13.72C13.9226 14.0171 13.9226 14.4836 14.2196 14.7808L15.4393 16.0002L12.25 16.0002L12.25 17.5002L15.4393 17.5002L14.2196 18.72C13.9226 19.0171 13.9226 19.4836 14.2196 19.7808C14.5166 20.0776 14.9833 20.0776 15.2803 19.7808ZM6.25 17.5002L6.25 16.0002L7.75 16.0002L7.75 17.5002L6.25 17.5002ZM10.75 16.0002L9.25 16.0002L9.25 17.5002L10.75 17.5002L10.75 16.0002Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/disallowance.svg b/packages/theme/src/svgs/disallowance.svg
new file mode 100644
index 000000000..a73efd376
--- /dev/null
+++ b/packages/theme/src/svgs/disallowance.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1877)">
+		<path id="合并" d="M16 2L6 2C4.34314 2 3 3.34326 3 5L3 19C3 20.6567 4.34314 22 6 22L11.8924 22C9.85956 20.7751 8.5 18.5464 8.5 16C8.5 12.134 11.634 9 15.5 9C16.775 9 17.9704 9.34082 19 9.93652L19 5C19 3.34326 17.6569 2 16 2ZM6 5.25L13.5 5.25C13.92 5.25 14.25 5.58008 14.25 6C14.25 6.41992 13.92 6.75 13.5 6.75L6 6.75C5.58002 6.75 5.25 6.41992 5.25 6C5.25 5.58008 5.58002 5.25 6 5.25ZM6 8.75L8 8.75C8.41998 8.75 8.75 9.08008 8.75 9.5C8.75 9.91992 8.41998 10.25 8 10.25L6 10.25C5.58002 10.25 5.25 9.91992 5.25 9.5C5.25 9.08008 5.58002 8.75 6 8.75ZM10 16C10 12.9624 12.4625 10.5 15.5 10.5C18.5375 10.5 21 12.9624 21 16C21 19.0376 18.5375 21.5 15.5 21.5C12.4625 21.5 10 19.0376 10 16ZM18 15.25C18.42 15.25 18.75 15.5801 18.75 16C18.75 16.4199 18.42 16.75 18 16.75L13 16.75C12.58 16.75 12.25 16.4199 12.25 16C12.25 15.5801 12.58 15.25 13 15.25L18 15.25Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/draw-flowchart.svg b/packages/theme/src/svgs/draw-flowchart.svg
new file mode 100644
index 000000000..85ad6f5e0
--- /dev/null
+++ b/packages/theme/src/svgs/draw-flowchart.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip451_2372)">
+		<g opacity="0.000000"/>
+		<path id="矢量 251" d="M4.2 2.23C2.57 2.23 1.26 3.55 1.26 5.17C1.26 6.79 2.57 8.11 4.2 8.11C5.6 8.11 6.77 7.13 7.06 5.82L16.28 5.82C16.47 5.82 16.66 5.84 16.84 5.88C16.98 5.91 17.11 5.96 17.24 6.01C17.54 6.14 17.8 6.32 18.03 6.54C18.26 6.77 18.44 7.04 18.56 7.33C18.62 7.46 18.66 7.6 18.7 7.74C18.74 7.92 18.76 8.11 18.76 8.3C18.76 8.49 18.74 8.68 18.7 8.86C18.66 9 18.62 9.13 18.56 9.26C18.44 9.56 18.26 9.82 18.03 10.05C17.91 10.17 17.77 10.28 17.63 10.38C17.51 10.46 17.38 10.52 17.24 10.58C17.11 10.64 16.98 10.68 16.84 10.71C16.66 10.76 16.47 10.78 16.28 10.78L13.54 10.78C13.14 9.62 12.05 8.8 10.76 8.8C9.47 8.8 8.38 9.62 7.98 10.78L5.24 10.78C4.94 10.78 4.66 10.81 4.38 10.87C4.14 10.92 3.91 10.99 3.69 11.09C3.46 11.19 3.25 11.3 3.05 11.43C2.82 11.58 2.62 11.75 2.42 11.94C2.23 12.13 2.06 12.34 1.91 12.57C1.78 12.77 1.67 12.98 1.57 13.21C1.48 13.43 1.4 13.66 1.35 13.9C1.29 14.18 1.26 14.46 1.26 14.76C1.26 15.3 1.36 15.81 1.57 16.3C1.77 16.78 2.06 17.2 2.42 17.57C2.62 17.76 2.82 17.93 3.05 18.08C3.25 18.21 3.46 18.33 3.69 18.42C3.91 18.52 4.14 18.59 4.38 18.64C4.66 18.7 4.94 18.73 5.24 18.73L12.84 18.73L12.28 20.79C12.25 20.92 12.25 21.05 12.28 21.18C12.35 21.42 12.46 21.59 12.61 21.68C12.77 21.76 12.96 21.77 13.21 21.71L15.89 20.98C15.97 20.96 16.05 20.93 16.12 20.89C16.19 20.85 16.26 20.8 16.31 20.74L22.05 15.47C22.27 15.25 22.45 14.98 22.57 14.7C22.62 14.57 22.66 14.44 22.69 14.31C22.72 14.16 22.73 14.01 22.73 13.86C22.73 13.7 22.72 13.55 22.69 13.41C22.66 13.27 22.62 13.14 22.57 13.01C22.51 12.88 22.45 12.76 22.38 12.64C22.29 12.51 22.19 12.38 22.07 12.27C21.96 12.15 21.83 12.05 21.7 11.96C21.58 11.89 21.46 11.82 21.33 11.77C21.2 11.72 21.07 11.68 20.93 11.65C20.78 11.62 20.63 11.61 20.48 11.61C20.19 11.61 19.91 11.66 19.64 11.77C19.45 11.85 19.27 11.95 19.12 12.07C19.04 12.12 18.97 12.19 18.9 12.26L13.72 17.23L5.24 17.23C5.05 17.23 4.86 17.21 4.68 17.17C4.54 17.14 4.4 17.1 4.27 17.04C3.98 16.91 3.71 16.74 3.48 16.51C3.26 16.28 3.08 16.02 2.95 15.72C2.9 15.59 2.85 15.45 2.82 15.32C2.78 15.13 2.76 14.95 2.76 14.76C2.76 14.56 2.78 14.38 2.82 14.19C2.85 14.06 2.9 13.92 2.95 13.79C3.08 13.49 3.26 13.23 3.48 13C3.61 12.88 3.74 12.77 3.89 12.68C4.01 12.6 4.14 12.53 4.27 12.47C4.4 12.42 4.54 12.37 4.68 12.34C4.86 12.3 5.05 12.28 5.24 12.28L7.87 12.28C8.12 13.64 9.32 14.67 10.76 14.67C12.2 14.67 13.39 13.64 13.65 12.28L16.28 12.28C16.57 12.28 16.86 12.25 17.14 12.18C17.37 12.13 17.6 12.06 17.83 11.96C18.05 11.87 18.27 11.75 18.47 11.62C18.69 11.47 18.9 11.3 19.09 11.11C19.46 10.74 19.74 10.32 19.95 9.85C20.04 9.62 20.11 9.39 20.17 9.16C20.23 8.88 20.26 8.59 20.26 8.3C20.26 8 20.23 7.72 20.17 7.44C20.11 7.2 20.04 6.97 19.95 6.75C19.74 6.27 19.46 5.85 19.09 5.48C18.9 5.29 18.69 5.12 18.47 4.97C18.27 4.84 18.05 4.73 17.83 4.63C17.6 4.54 17.37 4.46 17.14 4.41C16.86 4.35 16.57 4.32 16.28 4.32L7.01 4.32C6.64 3.11 5.52 2.23 4.2 2.23ZM4.2 3.73C3.4 3.73 2.76 4.38 2.76 5.17C2.76 5.97 3.4 6.61 4.2 6.61C4.99 6.61 5.63 5.97 5.63 5.17C5.63 4.38 4.99 3.73 4.2 3.73ZM20.73 14.65L19.68 13.59L19.94 13.34C20.03 13.25 20.13 13.18 20.24 13.15C20.31 13.12 20.39 13.11 20.48 13.11C20.69 13.11 20.87 13.18 21.01 13.33C21.09 13.4 21.14 13.48 21.18 13.57C21.21 13.66 21.23 13.75 21.23 13.86C21.23 13.96 21.21 14.06 21.18 14.14C21.14 14.23 21.09 14.31 21.02 14.38L20.73 14.65ZM14.08 19.92L14.43 18.63L18.59 14.63L19.62 15.66L15.39 19.56L14.08 19.92Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/engine-workflow.svg b/packages/theme/src/svgs/engine-workflow.svg
new file mode 100644
index 000000000..c6479b963
--- /dev/null
+++ b/packages/theme/src/svgs/engine-workflow.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1889)">
+		<path id="矢量 165" d="M21 2L13 2C12.4477 2 12 2.44775 12 3L12 3.75L5.08057 3.75C4.8797 3.75 4.68341 3.771 4.4917 3.81287C4.32776 3.84875 4.16718 3.8999 4.00989 3.96643C3.85278 4.03284 3.70428 4.11243 3.56433 4.20496C3.41125 4.30615 3.26843 4.42297 3.13605 4.55542C3.0036 4.68787 2.88678 4.83057 2.78558 4.98364C2.69299 5.12354 2.61346 5.27222 2.547 5.42932C2.48053 5.58655 2.42932 5.74707 2.39349 5.91101C2.35156 6.10278 2.33057 6.29907 2.33057 6.5L2.33057 10.55C2.33057 10.7509 2.3515 10.9471 2.39343 11.1388C2.42926 11.3027 2.48047 11.4635 2.547 11.6207C2.61346 11.7778 2.69299 11.9264 2.78552 12.0663C2.88678 12.2194 3.0036 12.3622 3.13605 12.4946C3.26849 12.6271 3.41125 12.7439 3.56433 12.8451C3.70129 12.9357 3.8465 13.0138 4 13.0795L4 14.251C4 14.671 4.33002 15.001 4.75 15.001C5.16998 15.001 5.5 14.671 5.5 14.251L5.5 12.5704L6.14197 13.4594C6.15613 13.4735 6.24847 13.5782 6.26367 13.5912C6.34766 13.6519 6.48334 13.7302 6.57642 13.7523C6.66956 13.7744 6.76721 13.7771 6.86945 13.7606C6.97168 13.7441 7.06348 13.7108 7.1449 13.6606C7.22632 13.6104 7.29736 13.5433 7.35803 13.4594L8 12.5704L8 14.251C8 14.671 8.33002 15.001 8.75 15.001C9.16998 15.001 9.5 14.671 9.5 14.251L9.5 10.251C9.5 10.1475 9.48169 10.0515 9.44507 9.96313C9.40845 9.87463 9.35358 9.79395 9.28033 9.7207C9.20709 9.64746 9.12628 9.59253 9.0379 9.55591C8.94952 9.51929 8.85358 9.50098 8.75 9.50098C8.68982 9.50098 8.63123 9.50781 8.57434 9.52161C8.5174 9.53528 8.46216 9.55579 8.40857 9.58325C8.35498 9.6106 8.30591 9.64343 8.26154 9.68152C8.2171 9.7196 8.17725 9.76306 8.14197 9.81189L6.75 11.7393L5.35803 9.81189C5.29736 9.72791 5.22638 9.66089 5.1449 9.6106C5.06348 9.56042 4.97168 9.5271 4.86945 9.51062C4.76721 9.49402 4.66956 9.49683 4.57642 9.51892C4.48334 9.54102 4.39484 9.5824 4.31085 9.64294C4.26208 9.67822 4.21863 9.71802 4.18048 9.76245C4.1424 9.80688 4.10962 9.85596 4.08221 9.90955C4.05481 9.96313 4.03424 10.0184 4.02057 10.0753C4.00684 10.1322 4 10.1908 4 10.251L4 11.1794C3.97327 11.1337 3.94946 11.0859 3.92847 11.0364C3.90149 10.9725 3.88007 10.9072 3.8642 10.8407C3.8418 10.7466 3.83057 10.6495 3.83057 10.55L3.83057 6.5C3.83057 6.40051 3.8418 6.30359 3.8642 6.20947C3.88 6.14282 3.90143 6.07764 3.92847 6.01367C3.95697 5.94629 3.99078 5.88245 4.02991 5.8219C4.07758 5.74817 4.13318 5.67957 4.19666 5.61609C4.26019 5.55261 4.3288 5.49707 4.40247 5.44934C4.46295 5.41028 4.52692 5.37646 4.59424 5.3479C4.65814 5.32092 4.72345 5.29944 4.78998 5.28357C4.88416 5.26123 4.98108 5.25 5.08057 5.25L12 5.25L12 6C12 6.55225 12.4477 7 13 7L21 7C21.5523 7 22 6.55225 22 6L22 3C22 2.44775 21.5523 2 21 2ZM10.5 10.251L10.5 14.251C10.5 14.671 10.83 15.001 11.25 15.001C11.67 15.001 12 14.671 12 14.251L12 13.5558L13.2202 14.7754C13.5172 15.0723 13.9839 15.0721 14.2808 14.775C14.5778 14.478 14.5776 14.0114 14.2806 13.7145L13.614 13.0482C13.7431 12.964 13.8947 12.8414 14.0016 12.723C14.0597 12.6587 14.113 12.5909 14.1614 12.5199C14.2451 12.397 14.3143 12.2642 14.3688 12.1213C14.4031 12.0315 14.4307 11.9402 14.4515 11.8473C14.4838 11.7036 14.5 11.5557 14.5 11.4047C14.5 11.2535 14.4838 11.106 14.4515 10.962C14.4307 10.8691 14.4031 10.7778 14.3688 10.688C14.3143 10.5453 14.2451 10.4124 14.1614 10.2894C14.113 10.2184 14.0598 10.1506 14.0016 10.0863C13.8947 9.9679 13.7766 9.86658 13.6474 9.78235C13.5787 9.73755 13.5069 9.69763 13.4319 9.66248C13.3113 9.60596 13.1875 9.56433 13.0605 9.53748C12.9457 9.51318 12.8283 9.50098 12.7083 9.50098L11.25 9.50098C11.1464 9.50098 11.0505 9.51929 10.9621 9.55591C10.8737 9.59253 10.7929 9.64746 10.7197 9.7207C10.6464 9.79395 10.5916 9.87463 10.5549 9.96313C10.5183 10.0515 10.5 10.1475 10.5 10.251ZM15.5 10.251L15.5 14.251C15.5 14.671 15.83 15.001 16.25 15.001C16.67 15.001 17 14.671 17 14.251L17 13.3083L18 13.3083C18.0673 13.3083 18.1339 13.3053 18.1998 13.2991L19.0845 13.3C19.1839 13.3 19.2807 13.3113 19.3748 13.3336C19.4409 13.3495 19.5073 13.3711 19.5708 13.3979C19.6381 13.4264 19.702 13.4602 19.7625 13.4994C19.8362 13.5471 19.9048 13.6027 19.9684 13.6661C20.0317 13.7295 20.0872 13.798 20.1348 13.8715C20.1738 13.9319 20.2081 13.9963 20.2366 14.0637C20.2636 14.1277 20.285 14.1929 20.3008 14.2595C20.3232 14.3538 20.3345 14.4506 20.3345 14.55L20.3345 17.5C20.3345 17.5996 20.3232 17.6964 20.3008 17.7906C20.285 17.8572 20.2635 17.9225 20.2366 17.9863C20.2081 18.0537 20.1743 18.1177 20.1351 18.1781C20.0875 18.2517 20.0318 18.3204 19.9684 18.3839C19.905 18.4473 19.8366 18.5027 19.7631 18.5503C19.7028 18.5892 19.6379 18.6238 19.5708 18.6521C19.5074 18.679 19.4426 18.7003 19.3766 18.7161C19.2824 18.7385 19.184 18.75 19.0845 18.75L12 18.75L12 18C12 17.4478 11.5523 17 11 17L3 17C2.44769 17 2 17.4478 2 18L2 21C2 21.5522 2.44769 22 3 22L11 22C11.5523 22 12 21.5522 12 21L12 20.25L19.0845 20.25C19.2853 20.25 19.4816 20.2291 19.6732 20.1871C19.8372 20.1514 19.9979 20.1001 20.1551 20.0337C20.3123 19.9672 20.4608 19.8877 20.6007 19.7952C20.7537 19.694 20.8966 19.577 21.029 19.4446C21.1614 19.3123 21.2782 19.1694 21.3795 19.0165C21.472 18.8766 21.5516 18.7279 21.618 18.5707C21.6846 18.4135 21.7358 18.2528 21.7716 18.0889C21.8135 17.8972 21.8345 17.7009 21.8345 17.5L21.8345 14.55C21.8345 14.3491 21.8135 14.1528 21.7716 13.9612C21.7357 13.7972 21.6846 13.6366 21.618 13.4794C21.5516 13.3224 21.4722 13.174 21.3798 13.0342C21.2787 12.8816 21.1611 12.7377 21.029 12.6055C20.8966 12.4731 20.7539 12.3563 20.6009 12.2551C20.4609 12.1626 20.3123 12.0829 20.1552 12.0165C20.0786 11.9841 20.0012 11.9553 19.923 11.9302C19.9377 11.8816 19.9503 11.8325 19.9608 11.783C19.9869 11.6597 20 11.5336 20 11.4047C20 11.2759 19.9869 11.1498 19.9608 11.0265C19.9331 10.8956 19.8907 10.7678 19.8336 10.6432C19.7947 10.5583 19.7501 10.4773 19.6998 10.4C19.614 10.2684 19.5116 10.1476 19.3926 10.0377C19.3192 9.97009 19.2417 9.90845 19.16 9.85303C19.0361 9.76892 18.9025 9.69885 18.7593 9.64294C18.6605 9.60449 18.56 9.57373 18.4578 9.5509C18.3089 9.51758 18.1563 9.50098 18 9.50098L16.25 9.50098C16.1464 9.50098 16.0505 9.51929 15.9621 9.55591C15.8737 9.59253 15.7929 9.64746 15.7197 9.7207C15.6464 9.79395 15.5916 9.87463 15.5549 9.96313C15.5183 10.0515 15.5 10.1475 15.5 10.251ZM12 11.8083L12.7083 11.8083C12.7596 11.7991 12.8441 11.7667 12.8882 11.7179C12.929 11.6484 13 11.498 13 11.4047C13 11.3113 12.9796 11.2299 12.9389 11.1604C12.8948 11.1116 12.7964 11.0135 12.7452 11.0043L12 11.001L12 11.8083ZM17 11.8083L18 11.8083C18.1002 11.8083 18.1893 11.7876 18.2675 11.7461C18.306 11.7256 18.342 11.7 18.3752 11.6693C18.4329 11.6161 18.4706 11.5573 18.4883 11.4929C18.4883 11.4625 18.4961 11.3448 18.4883 11.3165C18.4707 11.2522 18.4329 11.1934 18.3752 11.14C18.342 11.1094 18.3062 11.0839 18.2676 11.0634C18.1895 11.0219 18.1002 11.001 18 11.001L17 11.001L17 11.8083Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/finish-o.svg b/packages/theme/src/svgs/finish-o.svg
new file mode 100644
index 000000000..112eb7333
--- /dev/null
+++ b/packages/theme/src/svgs/finish-o.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1879)">
+		<path id="矢量 30" d="M16 2L6 2C4.34314 2 3 3.34326 3 5L3 19C3 20.6567 4.34314 22 6 22L11.8925 22C9.85962 20.7751 8.5 18.5464 8.5 16C8.5 12.134 11.634 9 15.5 9C16.775 9 17.9703 9.34082 19 9.93652L19 5C19 3.34326 17.6569 2 16 2ZM6 5.25L13.5 5.25C13.92 5.25 14.25 5.58008 14.25 6C14.25 6.41992 13.92 6.75 13.5 6.75L6 6.75C5.57996 6.75 5.25 6.41992 5.25 6C5.25 5.58008 5.57996 5.25 6 5.25ZM6 8.75L8 8.75C8.42004 8.75 8.75 9.08008 8.75 9.5C8.75 9.91992 8.42004 10.25 8 10.25L6 10.25C5.57996 10.25 5.25 9.91992 5.25 9.5C5.25 9.08008 5.57996 8.75 6 8.75ZM10 16C10 12.9624 12.4624 10.5 15.5 10.5C18.5376 10.5 21 12.9624 21 16C21 19.0376 18.5376 21.5 15.5 21.5C12.4624 21.5 10 19.0376 10 16ZM18.5281 15.0325L15.5028 18.0325C15.3268 18.207 15.1508 18.2944 14.9747 18.2944C14.7987 18.2944 14.6226 18.207 14.4465 18.0325L12.4719 16.0742C12.1737 15.7786 12.1718 15.312 12.4674 15.0137C12.7632 14.7153 13.2299 14.7134 13.5281 15.0093L14.9747 16.4436L17.4719 13.9673C17.7701 13.6716 18.2368 13.6736 18.5326 13.9717C18.8282 14.27 18.8263 14.7368 18.5281 15.0325Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/item-planning-properties.svg b/packages/theme/src/svgs/item-planning-properties.svg
new file mode 100644
index 000000000..9eb14f0dc
--- /dev/null
+++ b/packages/theme/src/svgs/item-planning-properties.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1886)">
+		<path id="矢量 162" d="M20 2L4 2C2.89545 2 2 2.89539 2 4L2 7C2 8.10461 2.89545 9 4 9C2.89545 9 2 9.89539 2 11L2 13C2 14.1046 2.89545 15 4 15C2.89545 15 2 15.8954 2 17L2 20C2 21.1046 2.89545 22 4 22L12.101 22C10.8044 20.7295 10 18.9587 10 17C10 13.134 13.134 10 17 10C18.9587 10 20.7295 10.8044 22 12.1011L22 11C22 9.89539 21.1046 9 20 9C21.1046 9 22 8.10461 22 7L22 4C22 2.89539 21.1046 2 20 2ZM4.75 4.75L7.25 4.75C7.66418 4.75 8 5.08582 8 5.5C8 5.91418 7.66418 6.25 7.25 6.25L4.75 6.25C4.33582 6.25 4 5.91418 4 5.5C4 5.08582 4.33582 4.75 4.75 4.75ZM7.25 11.25L4.75 11.25C4.33582 11.25 4 11.5858 4 12C4 12.4142 4.33582 12.75 4.75 12.75L7.25 12.75C7.66418 12.75 8 12.4142 8 12C8 11.5858 7.66418 11.25 7.25 11.25ZM11.5 17C11.5 13.9624 13.9625 11.5 17 11.5C20.0376 11.5 22.5 13.9624 22.5 17C22.5 20.0376 20.0376 22.5 17 22.5C13.9625 22.5 11.5 20.0376 11.5 17ZM17 13.5C16.4477 13.5 16 13.9478 16 14.5C16 15.0522 16.4477 15.5 17 15.5C17.5523 15.5 18 15.0522 18 14.5C18 13.9478 17.5523 13.5 17 13.5ZM17 16.5C16.5858 16.5 16.25 16.8358 16.25 17.25L16.25 19.75C16.25 20.1642 16.5858 20.5 17 20.5C17.4142 20.5 17.75 20.1642 17.75 19.75L17.75 17.25C17.75 16.8358 17.4142 16.5 17 16.5ZM4.75 17.75L7.25 17.75C7.66418 17.75 8 18.0858 8 18.5C8 18.9142 7.66418 19.25 7.25 19.25L4.75 19.25C4.33582 19.25 4 18.9142 4 18.5C4 18.0858 4.33582 17.75 4.75 17.75Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/location-number.svg b/packages/theme/src/svgs/location-number.svg
new file mode 100644
index 000000000..274a57888
--- /dev/null
+++ b/packages/theme/src/svgs/location-number.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1907)">
+		<path id="矢量 183" d="M13.5529 16.4424C16.851 13.2213 18.5 10.2988 18.5 7.6748C18.5 3.91919 15.5898 0.874756 12 0.874756C8.41016 0.874756 5.5 3.91919 5.5 7.6748C5.5 10.2988 7.14905 13.2213 10.4471 16.4424C7.88611 16.6705 6 17.4492 6 18.3748C6 19.4794 8.68628 20.3748 12 20.3748C15.3137 20.3748 18 19.4794 18 18.3748C18 17.4492 16.1139 16.6705 13.5529 16.4424ZM12.1396 7.41016C12.506 7.41016 12.839 7.48083 13.1387 7.62231C13.1984 7.65051 13.257 7.68152 13.314 7.71533C13.4745 7.81042 13.6187 7.92188 13.7465 8.04968C13.8921 8.19531 14.0165 8.36218 14.1196 8.55029C14.1609 8.62549 14.1978 8.70251 14.2302 8.78137C14.3502 9.07275 14.4102 9.38879 14.4102 9.72949C14.4102 10.079 14.347 10.4016 14.2207 10.6971C14.183 10.7855 14.1394 10.8716 14.0903 10.9551C13.9927 11.1212 13.8782 11.2708 13.7468 11.4034C13.5912 11.5607 13.412 11.6945 13.209 11.8047C13.1179 11.8544 13.0245 11.8981 12.9287 11.9355C12.6323 12.0518 12.3131 12.1099 11.9712 12.1099C11.5573 12.1099 11.1809 12.0299 10.8424 11.8701C10.799 11.8496 10.7561 11.8278 10.7139 11.8047C10.5302 11.7035 10.3662 11.5823 10.2219 11.4409C10.076 11.298 9.95032 11.1344 9.84473 10.9502C9.66907 10.6068 9.52979 10.1237 9.52979 9.69043C9.52979 9.42908 9.56506 9.1781 9.6355 8.93726C9.66199 8.84668 9.69348 8.75757 9.72998 8.66992C9.8634 8.34924 10.0864 7.93591 10.3989 7.42969L12.1006 4.6709L13.2896 4.6709L11.8101 7.04883L11.5 7.50049C11.6725 7.44031 11.8857 7.41016 12.1396 7.41016ZM11.959 11.1406C12.2279 11.1406 12.4601 11.0807 12.6555 10.9607C12.7462 10.905 12.829 10.8364 12.9038 10.7549C12.9579 10.6964 13.0059 10.6339 13.0476 10.5676C13.1893 10.3427 13.2603 10.0731 13.2603 9.75879C13.2603 9.41162 13.1791 9.12061 13.0166 8.88574C12.9825 8.83655 12.9449 8.78992 12.9038 8.74561C12.829 8.66406 12.7462 8.59546 12.6555 8.53979C12.4601 8.4198 12.2279 8.35986 11.959 8.35986C11.6996 8.35986 11.474 8.41675 11.2822 8.53064C11.184 8.58899 11.0946 8.66223 11.0142 8.75049C10.9652 8.80444 10.9214 8.86157 10.8827 8.922C10.7344 9.15332 10.6602 9.43225 10.6602 9.75879C10.6602 10.0947 10.738 10.3781 10.8939 10.6086C10.9299 10.6619 10.97 10.7123 11.0142 10.7598C11.0887 10.8395 11.1709 10.9066 11.2606 10.9613C11.457 11.0808 11.6898 11.1406 11.959 11.1406ZM1.25 18.3756C1.25 16.6337 3.37195 15.1108 6.53589 14.2841C6.82043 14.7012 7.12866 15.1207 7.46033 15.5432C4.64856 16.1008 2.75 17.1603 2.75 18.3756C2.75 20.1705 6.89136 21.6256 12 21.6256C17.1086 21.6256 21.25 20.1705 21.25 18.3756C21.25 17.1603 19.3514 16.1008 16.5397 15.5432C16.8713 15.1207 17.1796 14.7012 17.4641 14.2841C20.6281 15.1108 22.75 16.6337 22.75 18.3756C22.75 20.9989 17.937 23.1256 12 23.1256C6.06299 23.1256 1.25 20.9989 1.25 18.3756Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/main-freight-settled.svg b/packages/theme/src/svgs/main-freight-settled.svg
new file mode 100644
index 000000000..0fc3d6225
--- /dev/null
+++ b/packages/theme/src/svgs/main-freight-settled.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1901)">
+		<path id="矢量 177" d="M15 1.74951L5 1.74951C3.34314 1.74951 2 3.09277 2 4.74951L2 20.0793C2 20.835 2.80603 21.3176 3.47217 20.9609L6.65503 19.2556C7.05493 19.0415 7.54883 19.1233 7.8584 19.4548L9.26892 20.9663C9.66431 21.3899 10.3357 21.3899 10.7311 20.9663L10.832 20.8582C9.99414 19.7043 9.5 18.2847 9.5 16.7495C9.5 16.6064 9.50427 16.4646 9.5127 16.3237C9.3512 16.187 9.25 15.9819 9.25 15.7495L9.25 12.9043L7 12.9043C6.57996 12.9043 6.25 12.5742 6.25 12.1543C6.25 11.7344 6.57996 11.4043 7 11.4043L9.25 11.4043L9.25 9.54712L7 9.54712C6.57996 9.54712 6.25 9.21704 6.25 8.79712C6.25 8.3772 6.57996 8.04712 7 8.04712L8.51062 8.04712L6.39746 5.19604C6.14734 4.85864 6.21594 4.39697 6.55347 4.14697C6.89087 3.89697 7.35242 3.96558 7.60254 4.30298L10 7.5376L12.3975 4.30298C12.6476 3.96558 13.1091 3.89697 13.4465 4.14697C13.7841 4.39697 13.8527 4.85864 13.6025 5.19604L11.4894 8.04712L13 8.04712C13.42 8.04712 13.75 8.3772 13.75 8.79712C13.75 9.21704 13.42 9.54712 13 9.54712L10.75 9.54712L10.75 11.4043L11.98 11.4043C13.1995 10.3721 14.7771 9.74951 16.5 9.74951C17.0149 9.74951 17.5167 9.80518 18 9.91064L18 4.74951C18 3.09277 16.6569 1.74951 15 1.74951ZM11 16.7498C11 13.7124 13.4624 11.2498 16.5 11.2498C19.5376 11.2498 22 13.7124 22 16.7498C22 19.7874 19.5376 22.2498 16.5 22.2498C13.4624 22.2498 11 19.7874 11 16.7498ZM16.5028 19.0325L19.5281 16.0325C19.8263 15.7366 19.8282 15.27 19.5326 14.9717C19.2368 14.6736 18.7701 14.6716 18.4719 14.9673L15.9747 17.4436L14.5281 16.0093C14.2299 15.7134 13.7632 15.7153 13.4674 16.0137C13.1718 16.3118 13.1737 16.7786 13.4719 17.0742L15.4465 19.0325C15.5197 19.105 15.6002 19.1592 15.6882 19.1956C15.7762 19.2317 15.8718 19.2498 15.9747 19.2498C16.0776 19.2498 16.1731 19.2317 16.2611 19.1956C16.3491 19.1592 16.4297 19.105 16.5028 19.0325Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/main-freight-to-be-settled.svg b/packages/theme/src/svgs/main-freight-to-be-settled.svg
new file mode 100644
index 000000000..ca7a57ab1
--- /dev/null
+++ b/packages/theme/src/svgs/main-freight-to-be-settled.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="23.999878" viewBox="0 0 24 23.9999" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1900)">
+		<path id="矢量 176" d="M15 1.74988L5 1.74988C3.34314 1.74988 2 3.09302 2 4.74988L2 20.0797C2 20.8353 2.80603 21.318 3.47217 20.9613L6.65503 19.256C7.05493 19.0419 7.54883 19.1237 7.8584 19.4552L9.26892 20.9667C9.66431 21.3903 10.3357 21.3903 10.7311 20.9667L10.832 20.8585C9.99414 19.7045 9.5 18.2848 9.5 16.7499C9.5 16.2897 9.54443 15.84 9.62915 15.4045C9.40112 15.2772 9.25 15.0342 9.25 14.7499L9.25 12.9047L7 12.9047C6.57996 12.9047 6.25 12.5747 6.25 12.1547C6.25 11.7346 6.57996 11.4047 7 11.4047L9.25 11.4047L9.25 9.54749L7 9.54749C6.57996 9.54749 6.25 9.21753 6.25 8.79749C6.25 8.37744 6.57996 8.04749 7 8.04749L8.51062 8.04749L6.39746 5.19641C6.14734 4.85901 6.21594 4.39746 6.55347 4.14734C6.89087 3.89722 7.35242 3.96582 7.60254 4.30334L10 7.53796L12.3975 4.30334C12.6476 3.96582 13.1091 3.89722 13.4465 4.14734C13.7841 4.39746 13.8527 4.85901 13.6025 5.19641L11.4894 8.04749L13 8.04749C13.42 8.04749 13.75 8.37744 13.75 8.79749C13.75 9.21753 13.42 9.54749 13 9.54749L10.75 9.54749L10.75 11.4047L11.9799 11.4047C13.1993 10.3723 14.777 9.74976 16.5 9.74976C17.0149 9.74976 17.5167 9.8053 18 9.91089L18 4.74988C18 3.09302 16.6569 1.74988 15 1.74988ZM11 16.7499C11 13.7123 13.4624 11.2499 16.5 11.2499C19.5376 11.2499 22 13.7123 22 16.7499C22 19.7875 19.5376 22.2499 16.5 22.2499C13.4624 22.2499 11 19.7875 11 16.7499ZM16.75 14.7501L16.75 16.684L18.4893 18.1818C18.8076 18.4557 18.8423 18.9213 18.5682 19.2394C18.2942 19.5577 17.8289 19.5924 17.5105 19.3185L15.5106 17.5963C15.4279 17.525 15.3638 17.4398 15.3182 17.3405C15.2955 17.2909 15.2784 17.2401 15.2671 17.1881C15.2557 17.1361 15.25 17.0824 15.25 17.028L15.25 14.7501C15.25 14.3301 15.58 14.0001 16 14.0001C16.4199 14.0001 16.75 14.3301 16.75 14.7501Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/maintain-inspection-records.svg b/packages/theme/src/svgs/maintain-inspection-records.svg
new file mode 100644
index 000000000..619337851
--- /dev/null
+++ b/packages/theme/src/svgs/maintain-inspection-records.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1905)">
+		<path id="矢量 181" d="M14.9216 2L4.92163 2C3.26477 2 1.92163 3.34326 1.92163 5L1.92163 19C1.92163 20.6567 3.26477 22 4.92163 22L9.86145 22C9.19873 21.0618 8.77942 19.335 9.49988 18C10.4102 16.313 11.5863 15.9238 11.5863 15.9238L11.5634 15.802C11.2261 13.894 11.7416 12.384 13.027 10.9233L13.136 10.803C14.4779 9.3584 16.2067 8.66748 17.9216 8.9502L17.9216 5C17.9216 3.34326 16.5785 2 14.9216 2ZM4.92163 5.25L12.4216 5.25C12.8417 5.25 13.1716 5.58008 13.1716 6C13.1716 6.41992 12.8417 6.75 12.4216 6.75L4.92163 6.75C4.50159 6.75 4.17163 6.41992 4.17163 6C4.17163 5.58008 4.50159 5.25 4.92163 5.25ZM4.92163 8.75L6.92163 8.75C7.34167 8.75 7.67163 9.08008 7.67163 9.5C7.67163 9.91992 7.34167 10.25 6.92163 10.25L4.92163 10.25C4.50159 10.25 4.17163 9.91992 4.17163 9.5C4.17163 9.08008 4.50159 8.75 4.92163 8.75ZM20.7599 18.0425C20.4318 18.3706 20.0636 18.6411 19.6554 18.8535C19.4727 18.9487 19.2852 19.0305 19.093 19.0991C18.8696 19.1787 18.6398 19.2407 18.4036 19.2844C17.9705 19.365 17.5348 19.3818 17.0963 19.3347C16.7687 19.2998 16.4503 19.2302 16.1414 19.1262L14.0424 21.2246C13.8507 21.4163 13.6301 21.5625 13.3806 21.6638C13.2657 21.7104 13.1487 21.7458 13.0293 21.7703C12.8983 21.7969 12.7646 21.8103 12.6282 21.8103C12.3674 21.8103 12.1167 21.7615 11.8759 21.6638C11.7611 21.6172 11.6525 21.5613 11.55 21.4956C11.4296 21.4185 11.3175 21.3281 11.214 21.2244C11.1105 21.1208 11.0201 21.009 10.943 20.8884C10.8773 20.7861 10.8213 20.6775 10.7747 20.5625C10.7281 20.4478 10.6926 20.3306 10.6683 20.2112C10.6416 20.0803 10.6282 19.9465 10.6282 19.8103C10.6282 19.5496 10.677 19.2988 10.7747 19.0579C10.8759 18.8083 11.0223 18.5876 11.214 18.396L13.3125 16.2976C13.2845 16.2146 13.259 16.1306 13.236 16.0464C13.1735 15.8167 13.1294 15.582 13.1038 15.3425C13.0798 15.1191 13.0724 14.8965 13.0815 14.6746C13.0903 14.4609 13.1145 14.2476 13.1539 14.0352C13.1978 13.7991 13.2595 13.5691 13.3394 13.3457C13.4078 13.1536 13.4897 12.9661 13.5848 12.7832C13.6718 12.6165 13.7683 12.4563 13.8744 12.3027C14.0281 12.0808 14.2019 11.8726 14.396 11.6785C14.5974 11.4771 14.8137 11.2976 15.0449 11.1399C15.2115 11.0264 15.3857 10.9241 15.5677 10.8333C15.7622 10.7361 15.9615 10.6538 16.1659 10.5867C16.4032 10.5083 16.6472 10.45 16.8978 10.4119C17.1284 10.377 17.3589 10.3596 17.5892 10.3601C17.8192 10.3608 18.0491 10.3792 18.2788 10.415C18.5291 10.4543 18.7726 10.5137 19.0094 10.593C19.2135 10.6614 19.4131 10.7446 19.6073 10.8428C19.7561 10.918 19.8489 11.0115 19.8856 11.1235C19.9225 11.2356 19.9033 11.366 19.8281 11.5146C19.816 11.5386 19.7509 11.6213 19.7354 11.6428L17.9315 13.4463C17.8583 13.5195 17.8035 13.6003 17.7668 13.6887C17.7302 13.7771 17.7118 13.873 17.7118 13.9766C17.7118 14.0801 17.7301 14.1763 17.7667 14.2646C17.8033 14.353 17.8583 14.4338 17.9315 14.5071C18.078 14.6533 18.2548 14.7266 18.4618 14.7266C18.5654 14.7266 18.6614 14.7083 18.7498 14.6716C18.8381 14.635 18.9189 14.5801 18.9922 14.5071L20.796 12.7036C21.0317 12.4678 21.2675 12.4678 21.5032 12.7036C21.5409 12.7412 21.5718 12.7839 21.5958 12.8315C21.694 13.0259 21.7772 13.2251 21.8456 13.4292C21.9248 13.666 21.9841 13.9097 22.0234 14.1602C22.0594 14.3899 22.0778 14.6199 22.0782 14.8496C22.0789 15.0801 22.0615 15.3105 22.0265 15.5408C21.9556 16.0071 21.8151 16.4504 21.6052 16.8708C21.5143 17.0527 21.4121 17.2271 21.2986 17.3936C21.1409 17.6248 20.9613 17.8411 20.7599 18.0425Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/msg.svg b/packages/theme/src/svgs/msg.svg
new file mode 100644
index 000000000..3ef497d23
--- /dev/null
+++ b/packages/theme/src/svgs/msg.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1908)">
+		<g opacity="0.000000"/>
+		<path id="矢量 184" d="M14.1617 2.0957C14.0532 2.03479 13.928 2 13.7947 2L6.69739 2C4.93018 2 3.5 3.44141 3.5 5.21667L3.5 18.7833C3.5 20.5586 4.93018 22 6.69739 22L17.3026 22C19.0698 22 20.5 20.5586 20.5 18.7833L20.5 8.79333C20.5 8.56653 20.3994 8.36328 20.2405 8.22632C20.2109 8.18591 20.1782 8.14697 20.1426 8.10986L14.6188 2.38159C14.491 2.24902 14.3337 2.15161 14.1617 2.0957ZM14.5439 4.46399L17.994 8.04297L15.5079 8.04333C14.9958 8.04333 14.5447 7.61792 14.5447 7.14893L14.5439 4.46399ZM7.99841 15.3424L7.99841 16.7516C7.99841 17.1716 8.32837 17.5016 8.74841 17.5016C9.16846 17.5016 9.49841 17.1716 9.49841 16.7516L9.49841 12.7516C9.49841 12.6481 9.4801 12.5521 9.44348 12.4637C9.40686 12.3754 9.35193 12.2946 9.27881 12.2213C9.20557 12.1481 9.12476 12.0931 9.03638 12.0565C8.948 12.0199 8.85205 12.0016 8.74841 12.0016C8.68408 12.0016 8.62183 12.0094 8.5614 12.0249C8.5011 12.0404 8.44275 12.0637 8.38647 12.0947C8.3302 12.1259 8.2793 12.1627 8.23401 12.2053C8.1886 12.248 8.14868 12.2966 8.11438 12.351L6.99841 14.1169L5.88245 12.351C5.82715 12.2634 5.76038 12.1921 5.68225 12.137C5.604 12.0818 5.5144 12.0428 5.41345 12.02C5.31238 11.9972 5.21472 11.994 5.12048 12.0103C5.02625 12.0265 4.9353 12.0624 4.84778 12.1177C4.79346 12.152 4.74487 12.1919 4.70215 12.2372C4.65942 12.2825 4.62256 12.3334 4.59155 12.3896C4.56042 12.446 4.53723 12.5044 4.52173 12.5647C4.50623 12.625 4.49841 12.6873 4.49841 12.7516L4.49841 16.7516C4.49841 17.1716 4.82837 17.5016 5.24841 17.5016C5.66846 17.5016 5.99841 17.1716 5.99841 16.7516L5.99841 15.3424L6.36438 15.9215C6.38171 15.9431 6.44849 16.0315 6.46814 16.0511C6.48975 16.0684 6.57422 16.14 6.59778 16.1549C6.6853 16.2102 6.77625 16.246 6.87048 16.2622C6.96472 16.2784 7.06238 16.2753 7.16345 16.2524C7.2644 16.2296 7.354 16.1907 7.43225 16.1356C7.51038 16.0804 7.57715 16.009 7.63245 15.9215L7.99841 15.3424ZM13.0027 13.7289C12.9688 13.6986 12.8893 13.6313 12.8354 13.6055C12.6913 13.5363 12.5233 13.5016 12.3313 13.5016C12.2084 13.5016 12.0924 13.5168 11.9835 13.5474C11.8901 13.5736 11.8109 13.6082 11.7461 13.6511C11.7552 13.6671 11.7007 13.7468 11.7289 13.7689C11.8696 13.8794 12.1095 13.9613 12.4484 14.0148C13.4396 14.1714 14.0715 14.5135 14.3442 15.0413C14.4729 15.2902 14.5216 15.5804 14.4904 15.9119C14.4744 16.0822 14.4344 16.2422 14.3707 16.3921C14.3268 16.4955 14.2715 16.5941 14.2048 16.688C14.0684 16.8613 13.8486 17.0709 13.6415 17.1885C13.274 17.3972 12.839 17.5016 12.3363 17.5016C11.8776 17.5016 11.4604 17.4132 11.0851 17.2363C10.8505 17.1163 10.575 16.9288 10.4132 16.75C10.2983 16.6229 10.2053 16.4852 10.1343 16.337C10.0875 16.2393 10.05 16.1365 10.0223 16.0295C9.91711 15.6229 10.1538 15.2208 10.5604 15.1156C10.967 15.0103 11.3693 15.2471 11.4745 15.6537C11.4941 15.7295 11.5663 15.7992 11.6909 15.8629C11.8716 15.9553 12.0867 16.0016 12.3363 16.0016C12.5748 16.0016 12.7629 15.9625 12.9006 15.8843C12.9086 15.8732 12.995 15.792 12.9969 15.7714C12.9941 15.6746 12.7335 15.5784 12.2144 15.4965C11.6189 15.4023 11.1486 15.2201 10.8033 14.9495C10.6189 14.8048 10.4733 14.6381 10.3667 14.4493C10.3192 14.3569 10.2522 14.2069 10.2246 14.1088C10.1868 13.974 10.1678 13.8335 10.1678 13.6881C10.1678 13.5845 10.1788 13.4834 10.2008 13.3848C10.2368 13.2233 10.3021 13.0684 10.3969 12.92C10.5254 12.7188 10.699 12.5455 10.9176 12.4006C11.1135 12.2709 11.334 12.1716 11.5787 12.103C11.8201 12.0354 12.0709 12.0016 12.3313 12.0016C12.7051 12.0016 13.051 12.0681 13.369 12.2013C13.4077 12.2175 13.4471 12.2354 13.4851 12.2535C13.8158 12.4124 14.0688 12.6232 14.2441 12.8857C14.2765 12.9342 14.3064 12.9849 14.3335 13.0369C14.5272 13.4094 14.3867 13.8545 14.0142 14.0482C13.6415 14.2421 13.1964 14.1016 13.0027 13.7289ZM19.2788 14.2216C19.2072 14.15 19.1283 14.0959 19.0422 14.0593C19.1077 14.0309 19.1705 13.9924 19.2286 13.944C19.5511 13.6748 19.593 13.21 19.324 12.8876C19.156 12.6863 18.9669 12.5176 18.7568 12.3813C18.681 12.3323 18.6025 12.2874 18.5214 12.2467C18.3411 12.1565 18.1554 12.0911 17.9645 12.0507C17.8099 12.0179 17.6517 12.0016 17.4902 12.0016C17.3324 12.0016 17.1779 12.0172 17.0265 12.0486C16.8411 12.0869 16.6604 12.1488 16.4846 12.2341C16.4061 12.2723 16.3301 12.3145 16.2565 12.3605C16.049 12.4905 15.8611 12.6519 15.693 12.8448C15.6331 12.9138 15.5768 12.9854 15.5242 13.0594C15.3832 13.2585 15.2689 13.4767 15.1815 13.7139C15.1406 13.8251 15.1066 13.9379 15.0793 14.0522C15.0254 14.2789 14.9984 14.5121 14.9984 14.7516C14.9984 14.9912 15.0254 15.2244 15.0793 15.451C15.1066 15.5654 15.1406 15.6782 15.1815 15.7894C15.2689 16.0266 15.3832 16.2446 15.5242 16.4437C15.5767 16.5178 15.6331 16.5895 15.693 16.6584C15.8611 16.8514 16.049 17.0128 16.2565 17.1428C16.3301 17.1888 16.4061 17.231 16.4846 17.2692C16.6604 17.3545 16.8411 17.4164 17.0265 17.4547C17.1779 17.486 17.3324 17.5016 17.4902 17.5016C17.6517 17.5016 17.8099 17.4852 17.9646 17.4525C18.1556 17.4121 18.3413 17.3467 18.5217 17.2563C18.603 17.2157 18.6815 17.1708 18.7573 17.1216C18.9674 16.9852 19.1565 16.8165 19.3243 16.6152C19.3525 16.5814 19.3773 16.5459 19.3988 16.5084C19.4204 16.4709 19.4386 16.4315 19.4536 16.3903C19.4685 16.349 19.4797 16.3071 19.4872 16.2645C19.4946 16.2219 19.4984 16.1787 19.4984 16.1348L19.4984 14.752C19.4984 14.6483 19.4801 14.5524 19.4435 14.464C19.4069 14.3756 19.3519 14.2948 19.2788 14.2216ZM18.1722 13.8486C18.0774 13.735 17.97 13.6482 17.85 13.588C17.7751 13.5505 17.6984 13.5253 17.6194 13.5122C17.5769 13.5051 17.5338 13.5016 17.4902 13.5016C17.4471 13.5016 17.4047 13.505 17.3628 13.512C17.2866 13.5244 17.2123 13.5482 17.1399 13.5835C17.0232 13.6401 16.918 13.7223 16.8242 13.83C16.7263 13.9438 16.6444 14.082 16.5891 14.2324C16.5479 14.3705 16.4984 14.6012 16.4984 14.7516C16.4984 14.9021 16.519 15.0464 16.5603 15.1844C16.6156 15.3348 16.7211 15.5533 16.819 15.6672C16.9127 15.775 17.0232 15.8632 17.1399 15.9198C17.2123 15.955 17.2866 15.9788 17.3628 15.9913C17.4047 15.9982 17.4473 16.0016 17.4902 16.0016C17.5338 16.0016 17.5769 15.998 17.6194 15.9911C17.6984 15.978 17.7753 15.9526 17.8501 15.9152C17.9019 15.8892 17.9513 15.8583 17.9984 15.8224L17.9984 15.502L17.6486 15.502C17.2286 15.502 16.8986 15.1719 16.8986 14.752C16.8986 14.3319 17.2286 14.002 17.6486 14.002L18.3446 14.002C18.2816 13.9611 18.2234 13.9099 18.1722 13.8486Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/ofd.svg b/packages/theme/src/svgs/ofd.svg
new file mode 100644
index 000000000..43467e4e0
--- /dev/null
+++ b/packages/theme/src/svgs/ofd.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1909)">
+		<path id="矢量 185" d="M2 19.2727L2 4.72729C2 3.22107 3.22107 2 4.72729 2L19.2727 2C20.7789 2 22 3.22107 22 4.72729L22 19.2727C22 20.7789 20.7789 22 19.2727 22L4.72729 22C3.22107 22 2 20.7789 2 19.2727ZM13.4655 5.20081L12.0759 10.2008C11.9635 10.6055 11.5571 10.8351 11.1525 10.7227C10.7478 10.6101 10.5182 10.2039 10.6306 9.79919L12.0203 4.79919C12.1327 4.39453 12.5389 4.16492 12.9436 4.27734C13.3483 4.38989 13.5779 4.79614 13.4655 5.20081ZM10.1097 5.54712L8.08057 7.50366L10.1097 9.46008C10.4121 9.75159 10.4205 10.2183 10.129 10.5206C9.83752 10.8229 9.37097 10.8314 9.0686 10.5399L6.47937 8.04358C6.33569 7.89453 6.24634 7.69702 6.25012 7.48999C6.25391 7.28284 6.33032 7.10742 6.47937 6.96375L9.0686 4.46729C9.37097 4.17578 9.83752 4.18433 10.129 4.48669C10.4205 4.78906 10.4121 5.25562 10.1097 5.54712ZM14.9314 4.46729C14.629 4.17578 14.1625 4.18433 13.871 4.48669C13.5795 4.78906 13.5879 5.25562 13.8903 5.54712L15.9194 7.50366L13.8903 9.46008C13.5879 9.75159 13.5795 10.2183 13.871 10.5206C14.1625 10.8229 14.629 10.8314 14.9314 10.5399L17.5206 8.04358C17.6643 7.89453 17.7537 7.69702 17.7499 7.48999C17.7461 7.28284 17.6697 7.10742 17.5206 6.96375L14.9314 4.46729ZM3.88477 16.25C3.88477 14.4551 5.11597 13 6.63477 13C8.15356 13 9.38477 14.4551 9.38477 16.25C9.38477 18.0449 8.15356 19.5 6.63477 19.5C5.11597 19.5 3.88477 18.0449 3.88477 16.25ZM17.6113 13.067C17.4025 13.0223 17.1888 13 16.9705 13L15.8652 13C15.7617 13 15.6658 13.0183 15.5773 13.0549C15.4889 13.0916 15.4081 13.1465 15.335 13.2196C15.2617 13.2928 15.2068 13.3737 15.1702 13.462C15.1335 13.5504 15.1152 13.6464 15.1152 13.75L15.1152 18.75C15.1152 18.8535 15.1335 18.9495 15.1702 19.0378C15.2068 19.1263 15.2617 19.2072 15.335 19.2803C15.4081 19.3535 15.4889 19.4084 15.5773 19.4451C15.6658 19.4817 15.7617 19.5 15.8652 19.5L16.9705 19.5C17.1888 19.5 17.4025 19.4777 17.6113 19.4329C17.8138 19.3895 18.012 19.3251 18.2056 19.2396C18.3567 19.1729 18.5007 19.0953 18.6377 19.0068C18.8427 18.8744 19.032 18.7177 19.2054 18.5366C19.333 18.4033 19.4479 18.2614 19.5498 18.1108C19.677 17.9227 19.7849 17.72 19.8722 17.5048C19.9404 17.3364 19.9943 17.1648 20.0337 16.9901C20.0879 16.7499 20.1152 16.5023 20.1152 16.25C20.1152 15.9978 20.0881 15.7517 20.0341 15.5116C19.9946 15.3364 19.9406 15.1639 19.8722 14.9952C19.7849 14.7798 19.6775 14.5779 19.55 14.3895C19.448 14.2388 19.3331 14.0968 19.2054 13.9634C19.032 13.7823 18.8428 13.6256 18.6378 13.4932C18.5012 13.405 18.3561 13.3269 18.2056 13.2604C18.012 13.1749 17.8138 13.1105 17.6113 13.067ZM13.7654 14.5151L11.7524 14.5151L11.7524 15.6152L13.5814 15.6152C14.0015 15.6152 14.3314 15.9452 14.3314 16.3652C14.3314 16.7853 14.0015 17.1152 13.5814 17.1152L11.7524 17.1152L11.7524 18.9651C11.7524 19.3851 11.4225 19.7151 11.0024 19.7151C10.5825 19.7151 10.2524 19.3851 10.2524 18.9651L10.2524 13.7651C10.2524 13.6615 10.2708 13.5656 10.3074 13.4772C10.344 13.3888 10.3989 13.308 10.4722 13.2347C10.5454 13.1615 10.6262 13.1066 10.7146 13.0701C10.803 13.0334 10.8989 13.0151 11.0024 13.0151L13.7654 13.0151C14.1853 13.0151 14.5154 13.3451 14.5154 13.7651C14.5154 14.1851 14.1853 14.5151 13.7654 14.5151ZM5.38477 16.25C5.38477 15.2834 5.94446 14.5 6.63477 14.5C7.32507 14.5 7.88477 15.2834 7.88477 16.25C7.88477 17.2164 7.32507 18 6.63477 18C5.94446 18 5.38477 17.2164 5.38477 16.25ZM16.6152 14.5L16.9705 14.5C17.0834 14.5 17.1938 14.5117 17.3016 14.5352C17.4032 14.5573 17.5027 14.5897 17.5997 14.6326C17.6606 14.6594 17.7194 14.6898 17.776 14.7238C17.9016 14.799 18.0171 14.8914 18.1222 15.001C18.1831 15.0646 18.2386 15.132 18.2888 15.2031C18.3654 15.3121 18.4305 15.4318 18.4819 15.5585C18.5138 15.6371 18.5399 15.7172 18.5603 15.7986C18.5969 15.9445 18.6152 16.095 18.6152 16.25C18.6152 16.405 18.5969 16.5554 18.5603 16.7013C18.5399 16.7827 18.5138 16.8629 18.4819 16.9415C18.4305 17.0681 18.3667 17.1859 18.2902 17.2949C18.2397 17.3668 18.1836 17.4348 18.1222 17.4989C18.0171 17.6086 17.9017 17.701 17.7761 17.7762C17.7195 17.8102 17.6606 17.8406 17.5997 17.8674C17.5027 17.9103 17.4033 17.9427 17.3016 17.9648C17.1938 17.9883 17.0834 18 16.9705 18L16.6152 18L16.6152 14.5Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/pending-review.svg b/packages/theme/src/svgs/pending-review.svg
new file mode 100644
index 000000000..72ad0fa8f
--- /dev/null
+++ b/packages/theme/src/svgs/pending-review.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1899)">
+		<path id="矢量 175" d="M8.11877 10.0568L7.69653 12.135L4.4834 12.135C4.39087 12.135 4.29968 12.1428 4.20996 12.1584C4.1134 12.1753 4.01794 12.2013 3.92444 12.2362C3.85681 12.2616 3.79138 12.291 3.72827 12.3248C3.62976 12.3774 3.53662 12.4403 3.4491 12.5134C3.3208 12.6205 3.21216 12.7407 3.12305 12.874C3.0105 13.0424 2.92908 13.2316 2.87891 13.4415L2.03699 16.9681C2.01379 17.0651 2.0022 17.1636 2.0022 17.2634C2.0022 17.3528 2.01123 17.4402 2.02917 17.5258C2.04358 17.594 2.06372 17.6611 2.0896 17.7269C2.14709 17.8732 2.22876 18.0035 2.33484 18.1177C2.4447 18.236 2.57202 18.3281 2.71716 18.3942C2.79565 18.4299 2.87598 18.4565 2.95825 18.4742C3.03821 18.4913 3.12024 18.4999 3.20386 18.4999L9.84619 18.4999C9.62158 17.8138 9.50012 17.0811 9.50012 16.3198C9.50012 13.5582 11.0994 11.17 13.4222 10.031C13.611 9.89844 13.7891 9.75183 13.9563 9.59131C14.2372 9.32178 14.4779 9.02234 14.6787 8.69287C14.8022 8.48999 14.9082 8.28003 14.9963 8.06274C15.0542 7.91992 15.1045 7.77417 15.1471 7.62512C15.1941 7.46069 15.2311 7.29468 15.2582 7.12708C15.295 6.89929 15.3134 6.66858 15.3134 6.43481C15.3134 6.12305 15.2811 5.81787 15.2169 5.52002C15.1565 5.24048 15.0679 4.96716 14.951 4.69983C14.8558 4.48242 14.7448 4.27515 14.6178 4.07825C14.4344 3.79407 14.218 3.53137 13.9684 3.28992C13.5475 2.88306 13.0646 2.56812 12.5195 2.34521C11.9564 2.11499 11.3673 1.99988 10.7521 1.99988C10.3978 1.99988 10.0521 2.03809 9.71521 2.11438C9.46704 2.17065 9.22351 2.24756 8.98462 2.34521C8.68958 2.46594 8.4126 2.61365 8.15393 2.78821C7.93481 2.93616 7.72876 3.10339 7.53577 3.28992C7.28613 3.53137 7.06958 3.79419 6.88635 4.07825C6.75928 4.27515 6.64819 4.48242 6.5531 4.69983C6.43616 4.96729 6.34753 5.24072 6.28723 5.52026C6.2229 5.81824 6.1908 6.12305 6.1908 6.43481C6.1908 6.66968 6.20935 6.90186 6.24658 7.13062C6.27405 7.30029 6.31189 7.46826 6.35986 7.63464C6.46899 8.01306 6.62756 8.37134 6.83557 8.70935C6.91052 8.83118 6.99097 8.94885 7.0769 9.06238C7.22461 9.25757 7.38855 9.44055 7.56873 9.61121C7.69067 9.72668 7.81812 9.83484 7.95117 9.93567C8.0061 9.97729 8.06201 10.0176 8.11877 10.0568ZM11.0001 16.3199C11.0001 13.2823 13.4625 10.8199 16.5001 10.8199C19.5376 10.8199 22.0001 13.2823 22.0001 16.3199C22.0001 19.3575 19.5376 21.8199 16.5001 21.8199C13.4625 21.8199 11.0001 19.3575 11.0001 16.3199ZM16.75 14.3199L16.75 16.2538L18.4894 17.7516C18.8076 18.0256 18.8424 18.491 18.5684 18.8092C18.2943 19.1276 17.8289 19.1622 17.5106 18.8882L15.5106 17.1661C15.428 17.0948 15.3638 17.0096 15.3184 16.9104C15.2955 16.8607 15.2784 16.8099 15.2671 16.7579C15.2557 16.7058 15.25 16.6523 15.25 16.5978L15.25 14.3199C15.25 13.8999 15.5801 13.5699 16 13.5699C16.42 13.5699 16.75 13.8999 16.75 14.3199ZM10.8846 20.4999C11.3129 21.0741 11.827 21.5806 12.4081 21.9999L3.75208 21.9999C3.33203 21.9999 3.00208 21.6699 3.00208 21.2499C3.00208 20.8298 3.33203 20.4999 3.75208 20.4999L10.8846 20.4999Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/process-plan-requirements.svg b/packages/theme/src/svgs/process-plan-requirements.svg
new file mode 100644
index 000000000..a4ebad6ca
--- /dev/null
+++ b/packages/theme/src/svgs/process-plan-requirements.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1890)">
+		<path id="矢量 166" d="M15.5 2L8.5 2C7.94769 2 7.5 2.44775 7.5 3L7.5 4C7.5 4.55225 7.94769 5 8.5 5L15.5 5C16.0523 5 16.5 4.55225 16.5 4L16.5 3C16.5 2.44775 16.0523 2 15.5 2ZM6 3.5C5.95886 3.65979 6 3.82739 6 4L6 4.5C6 5.60461 6.89545 6.5 8 6.5L16 6.5C17.1046 6.5 18 5.60461 18 4.5L18 4C18 3.82739 17.9781 3.65979 17.937 3.5C19.5939 3.5 21 4.84314 21 6.5L21 19C21 20.6567 19.6569 22 18 22L6 22C4.34314 22 3 20.6567 3 19L3 6.5C3 4.84314 4.34314 3.5 6 3.5ZM9.74768 14.2823C9.51642 13.5664 9.47162 12.8932 9.61328 12.2626C9.76184 11.6013 10.1154 10.9869 10.6741 10.4196C11.2628 9.82166 11.8975 9.453 12.5783 9.3136C13.2141 9.18579 13.9006 9.25525 14.6166 9.52661C14.7505 9.57739 14.7924 9.67029 14.7421 9.80542L13.4536 11.1411C13.1584 11.441 13.0126 11.739 13.0163 12.035C13.0198 12.3167 13.1584 12.5964 13.4323 12.8745C13.6884 13.1346 13.9498 13.2706 14.2168 13.2825C14.4964 13.2949 14.7819 13.1711 15.0734 12.9113L16.3746 11.5935C16.4754 11.4911 16.5765 11.4908 16.678 11.5925C16.9484 12.3289 17.0672 13.1018 16.9343 13.7545C16.7932 14.4354 16.43 15.082 15.8492 15.6719C15.2784 16.2517 14.6608 16.6147 13.9962 16.7607C13.3733 16.8977 12.7091 16.8442 12.0038 16.6001C11.9518 16.582 11.9002 16.5627 11.8491 16.5425L9.61707 18.8096C9.47113 18.9578 9.30988 19.0686 9.13336 19.1421C8.96021 19.2141 8.7724 19.25 8.56982 19.25C8.36731 19.25 8.17944 19.2141 8.00629 19.1421C7.82977 19.0686 7.66858 18.9578 7.52258 18.8096C7.17419 18.4556 7 18.1018 7 17.7478C7 17.394 7.17419 17.04 7.52258 16.6863L9.78406 14.3893C9.77142 14.3538 9.75928 14.3181 9.74768 14.2823Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/purchase-planned-order.svg b/packages/theme/src/svgs/purchase-planned-order.svg
new file mode 100644
index 000000000..932606fa7
--- /dev/null
+++ b/packages/theme/src/svgs/purchase-planned-order.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1891)">
+		<path id="矢量 167" d="M15.5 2L8.5 2C7.94769 2 7.5 2.44775 7.5 3L7.5 4C7.5 4.55225 7.94769 5 8.5 5L15.5 5C16.0523 5 16.5 4.55225 16.5 4L16.5 3C16.5 2.44775 16.0523 2 15.5 2ZM6 3.5C5.95886 3.65991 6 3.82739 6 4L6 4.5C6 5.60449 6.89545 6.5 8 6.5L16 6.5C17.1046 6.5 18 5.60449 18 4.5L18 4C18 3.82739 17.9781 3.65991 17.937 3.5C19.5939 3.5 21 4.84326 21 6.5L21 19C21 20.6567 19.6569 22 18 22L6 22C4.34314 22 3 20.6567 3 19L3 6.5C3 4.84326 4.34314 3.5 6 3.5ZM6.74994 8.25L7.90497 8.25C7.98743 8.25 8.06854 8.25732 8.14832 8.27197C8.22998 8.28711 8.31061 8.30981 8.38947 8.34033C8.45349 8.36499 8.51501 8.39429 8.57391 8.42773C8.65253 8.47241 8.72681 8.52539 8.79639 8.58618C8.91187 8.68677 9.00702 8.7998 9.08167 8.9248C9.16687 9.06738 9.22546 9.22632 9.25745 9.40088L9.37653 10L17.0589 10C17.4052 10 17.655 10.3315 17.5597 10.6643L16.738 13.5332C16.6064 14.1016 16.1345 14.5 15.593 14.5L10.2711 14.5L10.4265 15.2815C10.4471 15.3943 10.4894 15.4895 10.5531 15.5669C10.6093 15.616 10.7332 15.7148 10.798 15.7332C10.8373 15.7444 10.8782 15.75 10.9206 15.75L15.7499 15.75C16.1699 15.75 16.4999 16.0801 16.4999 16.5C16.4999 16.9199 16.1699 17.25 15.7499 17.25L10.9206 17.25C10.8021 17.25 10.6856 17.2395 10.571 17.2185C10.4525 17.1968 10.3359 17.1638 10.2215 17.1199C10.1345 17.0862 10.0507 17.0469 9.97003 17.002C9.84991 16.9351 9.73663 16.855 9.63068 16.7627C9.55853 16.6997 9.49139 16.6326 9.42932 16.5608C9.341 16.459 9.26282 16.3481 9.19482 16.2288C9.11456 16.0876 9.05188 15.9412 9.00684 15.7896C8.98578 15.7188 8.96863 15.647 8.95526 15.574L7.79767 9.75L6.74994 9.75C6.32996 9.75 5.99994 9.41992 5.99994 9C5.99994 8.58008 6.32996 8.25 6.74994 8.25ZM10.4999 18.75C10.4999 18.3357 10.8358 18 11.2499 18C11.6642 18 11.9999 18.3357 11.9999 18.75C11.9999 19.1643 11.6642 19.5 11.2499 19.5C10.8358 19.5 10.4999 19.1643 10.4999 18.75ZM14.9999 18C14.5858 18 14.2499 18.3357 14.2499 18.75C14.2499 19.1643 14.5858 19.5 14.9999 19.5C15.4142 19.5 15.7499 19.1643 15.7499 18.75C15.7499 18.3357 15.4142 18 14.9999 18Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/requirements-planning.svg b/packages/theme/src/svgs/requirements-planning.svg
new file mode 100644
index 000000000..792b5142f
--- /dev/null
+++ b/packages/theme/src/svgs/requirements-planning.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1887)">
+		<path id="矢量 163" d="M22 15.4144C22 16.4191 21.4491 17.3406 20.5699 17.8064L13.2366 21.6923C12.462 22.1027 11.538 22.1027 10.7634 21.6923L3.43005 17.8064C2.5509 17.3406 2 16.4191 2 15.4144L2 4.69971C2 3.20874 3.19385 2 4.66663 2L19.3334 2C20.8062 2 22 3.20874 22 4.69971L22 15.4144ZM18.12 5.25012L11.12 5.25012C10.7 5.25012 10.37 5.58008 10.37 6.00012C10.37 6.42004 10.7 6.75012 11.12 6.75012L18.12 6.75012C18.54 6.75012 18.87 6.42004 18.87 6.00012C18.87 5.58008 18.54 5.25012 18.12 5.25012ZM8.12073 5.50012L6.11926 5.50012C5.56738 5.50012 5.12 5.94775 5.12 6.50012L5.12 8.50012C5.12 9.05237 5.56738 9.50012 6.11926 9.50012L8.12073 9.50012C8.67261 9.50012 9.12 9.05237 9.12 8.50012L9.12 6.50012C9.12 5.94775 8.67261 5.50012 8.12073 5.50012ZM18.12 7.95007L11.12 7.95007C10.7 7.95007 10.37 8.28003 10.37 8.70007C10.37 9.12012 10.7 9.45007 11.12 9.45007L18.12 9.45007C18.54 9.45007 18.87 9.12012 18.87 8.70007C18.87 8.28003 18.54 7.95007 18.12 7.95007ZM6.11926 11.5001L8.12073 11.5001C8.67261 11.5001 9.12 11.9478 9.12 12.5001L9.12 14.5001C9.12 15.0524 8.67261 15.5001 8.12073 15.5001L6.11926 15.5001C5.56738 15.5001 5.12 15.0524 5.12 14.5001L5.12 12.5001C5.12 11.9478 5.56738 11.5001 6.11926 11.5001ZM11.12 11.55L18.12 11.55C18.54 11.55 18.87 11.88 18.87 12.3C18.87 12.7201 18.54 13.05 18.12 13.05L11.12 13.05C10.7 13.05 10.37 12.7201 10.37 12.3C10.37 11.88 10.7 11.55 11.12 11.55ZM18.12 14.2501L11.12 14.2501C10.7 14.2501 10.37 14.5801 10.37 15.0001C10.37 15.42 10.7 15.7501 11.12 15.7501L18.12 15.7501C18.54 15.7501 18.87 15.42 18.87 15.0001C18.87 14.5801 18.54 14.2501 18.12 14.2501Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/shipped.svg b/packages/theme/src/svgs/shipped.svg
new file mode 100644
index 000000000..c8d66cddd
--- /dev/null
+++ b/packages/theme/src/svgs/shipped.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1897)">
+		<path id="矢量 173" d="M14.0737 17.1017L10.9272 17.1066C10.5708 15.2626 8.948 13.87 7 13.87C5.04773 13.87 3.42212 15.2686 3.07043 17.1185L2.10022 17.12C1.49268 17.1199 1.00012 16.6416 1 16.0515L1 4.19934C1 3.60974 1.49182 3.13171 2.099 3.13098L11.7812 3.12L11.9109 3.1272C12.4581 3.18884 12.8828 3.6405 12.8828 4.18835L12.8828 12.8083C12.8834 13.2502 13.2529 13.608 13.708 13.6074C14.1639 13.6069 14.5332 13.2478 14.5332 12.8051L14.5332 6.80261L14.5421 6.698C14.5939 6.39355 14.8667 6.16162 15.1948 6.16235L18.1469 6.16846C18.5341 6.20874 18.8882 6.4071 19.1178 6.71802L22.6392 10.8054L22.733 10.9453C22.9072 11.2323 23 11.5602 23 11.8953L23 15.2517L22.9937 15.405C22.9365 16.088 22.5015 16.6671 21.8925 16.9447C21.4749 15.1816 19.8906 13.87 18 13.87C16.0536 13.87 14.432 15.2601 14.0737 17.1017ZM10.5205 7.03992L6.89014 10.5399C6.74487 10.6799 6.57141 10.75 6.36963 10.75C6.16785 10.75 5.99426 10.6799 5.84912 10.5399L3.47949 8.25549C3.17712 7.96399 3.16858 7.49731 3.46008 7.19495C3.75159 6.89258 4.21814 6.88403 4.52051 7.17554L6.36963 8.95825L9.47949 5.96008C9.78186 5.66858 10.2484 5.67712 10.5399 5.97949C10.8314 6.28186 10.8229 6.74841 10.5205 7.03992ZM4 17.87C4 16.2131 5.34314 14.87 7 14.87C8.65686 14.87 10 16.2131 10 17.87C10 19.5269 8.65686 20.87 7 20.87C5.34314 20.87 4 19.5269 4 17.87ZM15 17.87C15 16.2131 16.3431 14.87 18 14.87C19.6569 14.87 21 16.2131 21 17.87C21 19.5269 19.6569 20.87 18 20.87C16.3431 20.87 15 19.5269 15 17.87Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/substitute-material.svg b/packages/theme/src/svgs/substitute-material.svg
new file mode 100644
index 000000000..f0a2b3807
--- /dev/null
+++ b/packages/theme/src/svgs/substitute-material.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1906)">
+		<path id="矢量 182" d="M16.4 2L7.59998 2C6.71631 2 6 2.89539 6 4L18 4C18 2.89539 17.2837 2 16.4 2ZM20 7.31812C20 6.31396 19.2466 5.5 18.3164 5.5L5.68457 5.5C4.75439 5.5 4 6.31396 4 7.31812L4 8L10 8C9.75037 9.04712 10.5 10.5 12 10.5C13.5 10.5 14.2457 9.03076 14 8L20 8L20 7.31812ZM20.049 9.5C21.1266 9.5 22 10.3654 22 11.4329L22 19.1007C22 20.7019 20.6897 22 19.0732 22L4.92676 22C3.3103 22 2 20.7019 2 19.1007L2 11.4329C2 10.3654 2.87378 9.5 3.95142 9.5L8.97681 9.5C8.97681 11.1012 10.4885 12 11.9885 12C13.4885 12 14.9768 11.1012 14.9768 9.5L20.049 9.5ZM15.8312 13.9514C15.524 14.2378 15.5077 14.7042 15.7941 15.0115L16.2754 15.5278L6 15.5278C5.95374 15.5278 5.9082 15.532 5.8634 15.5403C5.8186 15.5486 5.77454 15.561 5.73132 15.5776C5.68799 15.5942 5.64697 15.6144 5.60815 15.6382C5.56934 15.662 5.53271 15.6893 5.49829 15.7203C5.42126 15.7896 5.36218 15.8674 5.32104 15.9537C5.27979 16.04 5.25647 16.135 5.25098 16.2384C5.24561 16.3418 5.25891 16.4386 5.29077 16.5288C5.32263 16.619 5.37329 16.7025 5.4425 16.7795L7.4425 19.0017C7.72351 19.314 8.18958 19.3384 8.50171 19.0575C8.81396 18.7765 8.83838 18.3104 8.5575 17.9983L7.68408 17.0278L18 17.0278C18.1035 17.0278 18.1995 17.0095 18.288 16.9729C18.3763 16.9363 18.4572 16.8813 18.5303 16.8081C18.6035 16.7349 18.6584 16.6541 18.6951 16.5657C18.7317 16.4773 18.75 16.3813 18.75 16.2778C18.75 16.2303 18.7456 16.1837 18.7369 16.1379C18.7283 16.0922 18.7152 16.0471 18.6979 16.0029C18.6804 15.9589 18.6593 15.917 18.6344 15.8776C18.6095 15.8381 18.5809 15.801 18.5486 15.7664L16.8912 13.9885C16.6049 13.6814 16.1384 13.665 15.8312 13.9514Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/surcharge-settled.svg b/packages/theme/src/svgs/surcharge-settled.svg
new file mode 100644
index 000000000..a8677df5f
--- /dev/null
+++ b/packages/theme/src/svgs/surcharge-settled.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1903)">
+		<path id="矢量 179" d="M14.4037 2L5.47437 2C4.30945 2 3.55188 3.22583 4.07275 4.26758C4.60364 5.32935 5.68884 6 6.87585 6L13.0022 6C14.1892 6 15.2743 5.32935 15.8052 4.26758C16.326 3.22583 15.5685 2 14.4037 2ZM9.00989 7.5L10.8677 7.5C12.8027 7.5 14.5741 8.29028 15.8511 9.58398C15.0734 9.70532 14.338 9.95483 13.6674 10.3101C13.6313 10.1746 13.5562 10.0471 13.4425 9.94409C13.1312 9.66211 12.6652 9.6853 12.3832 9.99658L9.93896 12.6946L7.49487 9.99658C7.21289 9.6853 6.7467 9.66211 6.43542 9.94409C6.12427 10.2261 6.1012 10.6921 6.38318 11.0034L8.24756 13.0618L6.93896 13.0618C6.51904 13.0618 6.18896 13.3916 6.18896 13.8118C6.18896 14.2317 6.51904 14.5618 6.93896 14.5618L9.18896 14.5618L9.18896 15.8083L6.93896 15.8083C6.51904 15.8083 6.18896 16.1384 6.18896 16.5583C6.18896 16.9785 6.51904 17.3083 6.93896 17.3083L9.18896 17.3083L9.18896 19.5C9.18896 19.9199 9.51904 20.25 9.93896 20.25C10.3135 20.25 10.6163 19.9878 10.6776 19.6333C11.027 20.3298 11.489 20.9602 12.04 21.5L5.55078 21.5C3.11658 21.5 1.2467 19.344 1.59094 16.9343L2.0802 13.51C2.57288 10.0615 5.52625 7.5 9.00989 7.5ZM11.439 16.5C11.439 13.4624 13.9014 11 16.939 11C19.9766 11 22.439 13.4624 22.439 16.5C22.439 19.5376 19.9766 22 16.939 22C13.9014 22 11.439 19.5376 11.439 16.5ZM16.9418 18.7825L19.967 15.7825C20.2653 15.4868 20.2673 15.02 19.9716 14.7219C19.6758 14.4236 19.2091 14.4216 18.9109 14.7175L16.4137 17.1938L14.967 15.7593C14.6688 15.4636 14.2021 15.4656 13.9064 15.7637C13.6107 16.062 13.6127 16.5286 13.9109 16.8245L15.8856 18.7825C15.9587 18.855 16.0392 18.9094 16.1272 18.9456C16.2152 18.9819 16.3108 19 16.4137 19C16.5166 19 16.6121 18.9819 16.7001 18.9456C16.7881 18.9094 16.8687 18.855 16.9418 18.7825Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/surcharge-to-be-settled.svg b/packages/theme/src/svgs/surcharge-to-be-settled.svg
new file mode 100644
index 000000000..7e757d2cb
--- /dev/null
+++ b/packages/theme/src/svgs/surcharge-to-be-settled.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1902)">
+		<path id="矢量 178" d="M14.4037 2L5.47437 2C4.30945 2 3.55188 3.22583 4.07275 4.26758C4.60364 5.32935 5.68884 6 6.87585 6L13.0022 6C14.1892 6 15.2743 5.32935 15.8052 4.26758C16.326 3.22583 15.5685 2 14.4037 2ZM9.00989 7.5L10.8677 7.5C12.8027 7.5 14.5741 8.29028 15.8511 9.58398C15.0734 9.70532 14.338 9.95483 13.6674 10.3101C13.6313 10.1746 13.5562 10.0471 13.4425 9.94409C13.1312 9.66211 12.6652 9.6853 12.3832 9.99658L9.93896 12.6946L7.49487 9.99658C7.21289 9.6853 6.7467 9.66211 6.43542 9.94409C6.12427 10.2261 6.1012 10.6921 6.38318 11.0034L8.24756 13.0618L6.93896 13.0618C6.51904 13.0618 6.18896 13.3916 6.18896 13.8118C6.18896 14.2317 6.51904 14.5618 6.93896 14.5618L9.18896 14.5618L9.18896 15.8083L6.93896 15.8083C6.51904 15.8083 6.18896 16.1384 6.18896 16.5583C6.18896 16.9785 6.51904 17.3083 6.93896 17.3083L9.18896 17.3083L9.18896 19.5C9.18896 19.9199 9.51904 20.25 9.93896 20.25C10.3135 20.25 10.6163 19.9878 10.6776 19.6333C11.027 20.3298 11.489 20.9602 12.04 21.5L5.55078 21.5C3.11658 21.5 1.2467 19.344 1.59094 16.9343L2.0802 13.51C2.57288 10.0615 5.52625 7.5 9.00989 7.5ZM11.439 16.5C11.439 13.4624 13.9014 11 16.939 11C19.9766 11 22.439 13.4624 22.439 16.5C22.439 19.5376 19.9766 22 16.939 22C13.9014 22 11.439 19.5376 11.439 16.5ZM17.1899 14.5L17.1899 16.4338L18.9293 17.9316C19.2476 18.2056 19.2822 18.6711 19.0082 18.9893C18.7341 19.3076 18.2688 19.3423 17.9506 19.0684L15.9506 17.3462C15.8678 17.2749 15.8037 17.1897 15.7582 17.0903C15.7355 17.0408 15.7184 16.99 15.707 16.938C15.6957 16.886 15.6899 16.8323 15.6899 16.7778L15.6899 14.5C15.6899 14.0801 16.0199 13.75 16.4399 13.75C16.86 13.75 17.1899 14.0801 17.1899 14.5Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/to-be-uploaded.svg b/packages/theme/src/svgs/to-be-uploaded.svg
new file mode 100644
index 000000000..40508999b
--- /dev/null
+++ b/packages/theme/src/svgs/to-be-uploaded.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1898)">
+		<path id="矢量 174" d="M0.5 13.1666C0.5 16.1122 2.92297 18.5 5.91174 18.5L10.4596 18.5C10.1627 17.7236 10 16.8809 10 16C10 12.134 13.134 9 17 9C19.8993 9 22.387 10.7627 23.4497 13.2748C23.4829 13.0211 23.5 12.7626 23.5 12.5C23.5 9.18628 20.7742 6.5 17.4117 6.5L17.2323 6.50256L17.0687 6.50952C16.2357 4.17419 13.978 2.5 11.3235 2.5C8.17664 2.5 5.58752 4.85291 5.26843 7.87061C2.58289 8.18408 0.5 10.4357 0.5 13.1666ZM11.5 16C11.5 12.9624 13.9624 10.5 17 10.5C20.0376 10.5 22.5 12.9624 22.5 16C22.5 19.0376 20.0376 21.5 17 21.5C13.9624 21.5 11.5 19.0376 11.5 16ZM17.25 14L17.25 15.9338L18.9893 17.4316C19.3076 17.7057 19.3423 18.171 19.0682 18.4893C18.7942 18.8076 18.3289 18.8423 18.0105 18.5682L16.0106 16.8462C15.9279 16.7749 15.8638 16.6897 15.8182 16.5905C15.7955 16.5408 15.7784 16.49 15.7671 16.438C15.7557 16.3859 15.75 16.3324 15.75 16.2778L15.75 14C15.75 13.58 16.08 13.25 16.5 13.25C16.9199 13.25 17.25 13.58 17.25 14Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/total-nolume.svg b/packages/theme/src/svgs/total-nolume.svg
new file mode 100644
index 000000000..932119f2a
--- /dev/null
+++ b/packages/theme/src/svgs/total-nolume.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1894)">
+		<path id="矢量 170" d="M11.8698 22.1802C11.6748 22.25 11.4199 22.2668 11.2325 22.1785L3.17993 18.3784C3.04871 18.3164 2.94421 18.2241 2.86652 18.1016C2.78882 17.979 2.75 17.8452 2.75 17.7002L2.75 6.30005C2.75 6.24487 2.75604 6.19019 2.76813 6.13599C2.78027 6.08203 2.7981 6.03003 2.82172 5.97998C2.86591 5.88647 2.9234 5.80737 2.99426 5.74316C3.05353 5.68921 3.12207 5.64575 3.19995 5.61255L11.4572 1.8186C11.5057 1.79639 11.5554 1.77954 11.6063 1.76807C11.6572 1.75659 11.7094 1.75049 11.7628 1.75C11.8694 1.74902 11.9717 1.76978 12.0696 1.81226L20.7994 5.6123C20.9362 5.67188 21.0455 5.76416 21.1273 5.88892C21.2091 6.01367 21.25 6.15088 21.25 6.30005L21.25 17.7C21.25 17.8503 21.2085 17.9885 21.1255 18.114C21.0424 18.2393 20.9317 18.3315 20.7932 18.3904L11.8698 22.1802ZM5.27655 6.30908L11.6695 9.32593L18.6209 6.30005L11.7786 3.32153L5.27655 6.30908ZM9.00537 5.61743L12.1377 4.19238C12.52 4.01855 12.957 4.18237 13.1309 4.56445C13.3049 4.94678 13.1411 5.38379 12.7588 5.55786L9.62646 6.98267C9.2442 7.15674 8.80713 6.99292 8.63324 6.6106C8.45935 6.22827 8.62305 5.79126 9.00537 5.61743ZM14.3721 5.61768L11.2419 7.04272C10.8596 7.2168 10.696 7.65381 10.8701 8.03613C11.0441 8.41846 11.4811 8.58203 11.8634 8.40796L14.9937 6.98291C15.3759 6.80884 15.5395 6.37183 15.3655 5.9895C15.1915 5.60742 14.7544 5.44385 14.3721 5.61768ZM12.3026 10.6863L12.3026 20.3667L19.75 17.2036L19.75 7.44434L12.3026 10.6863ZM18.1184 10.3374L18.1184 16.0374C18.1184 16.4575 17.7884 16.7874 17.3684 16.7874C16.9484 16.7874 16.6184 16.4575 16.6184 16.0374L16.6184 10.3374C16.6184 9.91748 16.9484 9.5874 17.3684 9.5874C17.7884 9.5874 18.1184 9.91748 18.1184 10.3374ZM15.4342 17.4622L15.4342 11.7622C15.4342 11.3423 15.1042 11.0122 14.6842 11.0122C14.2642 11.0122 13.9342 11.3423 13.9342 11.7622L13.9342 17.4622C13.9342 17.8823 14.2642 18.2122 14.6842 18.2122C15.1042 18.2122 15.4342 17.8823 15.4342 17.4622Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/total-number.svg b/packages/theme/src/svgs/total-number.svg
new file mode 100644
index 000000000..87d9447c1
--- /dev/null
+++ b/packages/theme/src/svgs/total-number.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1895)">
+		<path id="矢量 171" d="M22 4.59106L16.3472 2.49854C15.694 2.25684 15 2.73999 15 3.43652L15 20.5635C15 21.26 15.694 21.7432 16.3472 21.5012L22 19.4089L22 4.59106ZM9.73901 3.30493L13.5 4.23071L13.5 19.7693L9.73901 20.6951C9.10876 20.8501 8.5 20.373 8.5 19.7239L8.5 4.27588C8.5 3.62695 9.10876 3.1499 9.73901 3.30493ZM7 5.0769L3.21057 4.26074C2.58777 4.12646 2 4.60132 2 5.23828L2 18.7617C2 19.3987 2.58777 19.8733 3.21057 19.7393L7 18.9231L7 5.0769Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/total-weight.svg b/packages/theme/src/svgs/total-weight.svg
new file mode 100644
index 000000000..941cf9839
--- /dev/null
+++ b/packages/theme/src/svgs/total-weight.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1893)">
+		<path id="矢量 169" d="M8.00031 2L16.0003 2C16.5526 2 17.0003 2.44775 17.0003 3L17.0003 5C17.0003 5.55225 16.5526 6 16.0003 6L14.0003 6L14.0003 7.5L17.4774 7.5C18.3771 7.5 19.1661 8.10083 19.4053 8.96826L22.3019 19.4683C22.6532 20.7417 21.6951 22 20.3739 22L3.62677 22C2.3056 22 1.34741 20.7417 1.69879 19.4683L4.59534 8.96826C4.83459 8.10083 5.6236 7.5 6.52332 7.5L10.0003 7.5L10.0003 6L8.00031 6C7.44806 6 7.00031 5.55225 7.00031 5L7.00031 3C7.00031 2.44775 7.44806 2 8.00031 2ZM5.40942 15.9016C5.30328 16.3794 5.25018 16.8689 5.25018 17.3701C5.25018 17.79 5.5802 18.1201 6.00018 18.1201C6.42023 18.1201 6.75018 17.79 6.75018 17.3701C6.75018 16.9702 6.79346 16.5801 6.88007 16.2C6.94775 15.9028 7.04193 15.6118 7.16248 15.3267C7.28595 15.0349 7.43304 14.7585 7.60376 14.4976C7.80042 14.197 8.0285 13.9172 8.2879 13.6577C8.5473 13.3982 8.82727 13.1702 9.12775 12.9736C9.38855 12.803 9.66516 12.6555 9.95691 12.5322C10.2419 12.4116 10.533 12.3176 10.8301 12.25C11.2103 12.1633 11.6003 12.1201 12.0002 12.1201C12.4001 12.1201 12.7901 12.1633 13.1703 12.25C13.4673 12.3176 13.7584 12.4116 14.0435 12.5322C14.3354 12.6558 14.6118 12.803 14.8727 12.9736C15.1731 13.1702 15.4531 13.3982 15.7125 13.6577C15.9719 13.9172 16.2 14.197 16.3966 14.4976C16.5674 14.7585 16.7145 15.0349 16.838 15.3267C16.9585 15.6116 17.0526 15.9026 17.1202 16.1995C17.2068 16.5796 17.2502 16.9702 17.2502 17.3701C17.2502 17.79 17.5802 18.1201 18.0002 18.1201C18.4202 18.1201 18.7502 17.79 18.7502 17.3701C18.7502 16.8689 18.6971 16.3796 18.5911 15.9023C18.5035 15.5081 18.3795 15.1206 18.2195 14.7424C18.058 14.3608 17.8653 13.9998 17.6411 13.6594C17.3911 13.2798 17.1013 12.925 16.7732 12.5969C16.445 12.2688 16.0911 11.9797 15.7115 11.7297C15.3712 11.5054 15.0095 11.312 14.6279 11.1506C14.2495 10.9907 13.8631 10.8669 13.4686 10.7793C12.991 10.6731 12.5015 10.6201 12.0002 10.6201C11.499 10.6201 11.0096 10.6731 10.532 10.7791C10.1375 10.8667 9.75092 10.9907 9.37256 11.1506C8.99091 11.312 8.62988 11.5049 8.28955 11.7292C7.90985 11.9795 7.55548 12.2688 7.22723 12.5969C6.89886 12.9253 6.60956 13.2795 6.35938 13.6594C6.13531 13.9998 5.94232 14.3608 5.78094 14.7424C5.62091 15.1208 5.49707 15.5073 5.40942 15.9016ZM12.0002 16.3701C12.0352 16.3701 12.0699 16.3713 12.1041 16.3743L13.4402 14.8718C13.7194 14.5581 14.1852 14.5308 14.4991 14.8098C14.8129 15.0889 14.8403 15.5547 14.5612 15.8687L13.2253 17.3706C13.2416 17.4512 13.2502 17.5347 13.2502 17.6201C13.2502 18.3103 12.6906 18.8701 12.0002 18.8701C11.3099 18.8701 10.7502 18.3103 10.7502 17.6201C10.7502 16.9297 11.3099 16.3701 12.0002 16.3701Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/under-review.svg b/packages/theme/src/svgs/under-review.svg
new file mode 100644
index 000000000..f6f3ac6fd
--- /dev/null
+++ b/packages/theme/src/svgs/under-review.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1878)">
+		<path id="矢量 34" d="M16 2L6 2C4.34314 2 3 3.34326 3 5L3 19C3 20.6567 4.34314 22 6 22L11.8925 22C9.85962 20.7751 8.5 18.5464 8.5 16C8.5 12.134 11.634 9 15.5 9C16.775 9 17.9703 9.34082 19 9.93652L19 5C19 3.34326 17.6569 2 16 2ZM6 5.25L13.5 5.25C13.92 5.25 14.25 5.58008 14.25 6C14.25 6.41992 13.92 6.75 13.5 6.75L6 6.75C5.57996 6.75 5.25 6.41992 5.25 6C5.25 5.58008 5.57996 5.25 6 5.25ZM6 8.75L8 8.75C8.42004 8.75 8.75 9.08008 8.75 9.5C8.75 9.91992 8.42004 10.25 8 10.25L6 10.25C5.57996 10.25 5.25 9.91992 5.25 9.5C5.25 9.08008 5.57996 8.75 6 8.75ZM10 16C10 12.9624 12.4624 10.5 15.5 10.5C18.5376 10.5 21 12.9624 21 16C21 19.0376 18.5376 21.5 15.5 21.5C12.4624 21.5 10 19.0376 10 16ZM13.6915 14.6604C13.7572 14.5723 13.8297 14.4883 13.9091 14.4089C14.0215 14.2966 14.1429 14.1978 14.2733 14.1128C14.3839 14.041 14.5009 13.9788 14.6244 13.9265C14.7437 13.876 14.8654 13.8364 14.9896 13.8076C15.1553 13.7693 15.3254 13.75 15.5 13.75C15.6746 13.75 15.8447 13.7693 16.0104 13.8076C16.1345 13.8364 16.2563 13.876 16.3756 13.9265C16.499 13.9788 16.6161 14.041 16.7267 14.1128C16.8571 14.1978 16.9785 14.2966 17.0909 14.4089C17.2035 14.5215 17.3021 14.6428 17.3871 14.7734C17.4591 14.8838 17.5212 15.001 17.5735 15.1245C17.6239 15.2437 17.6636 15.3652 17.6924 15.4895C17.7308 15.6553 17.75 15.8254 17.75 16C17.75 16.1746 17.7308 16.3447 17.6924 16.5105C17.6636 16.6348 17.6239 16.7563 17.5735 16.8755C17.5212 16.999 17.4591 17.1162 17.3871 17.2266C17.3021 17.3569 17.2035 17.4785 17.0909 17.5911C16.9785 17.7034 16.8571 17.8022 16.7267 17.8872C16.6161 17.959 16.499 18.0212 16.3756 18.0735C16.2563 18.124 16.1346 18.1636 16.0104 18.1924C15.845 18.2307 15.6743 18.25 15.5 18.25C15.2677 18.25 15.0457 18.2173 14.8337 18.1516C14.6364 18.0906 14.4479 18.001 14.2681 17.8833C13.9169 17.6528 13.46 17.7478 13.2296 18.0989C12.9993 18.4502 13.0942 18.9072 13.4454 19.1375C13.6055 19.2424 13.7716 19.3342 13.9437 19.4128C14.0945 19.4817 14.2501 19.5405 14.4102 19.5889C14.5557 19.6331 14.7029 19.6682 14.8516 19.6943C15.0645 19.7314 15.2806 19.75 15.5 19.75C15.7759 19.75 16.0455 19.7209 16.3087 19.6631C16.5303 19.6143 16.7473 19.5449 16.96 19.4551C17.1732 19.3647 17.3749 19.2568 17.5648 19.1313C17.7741 18.9932 17.9705 18.8328 18.1516 18.6516C18.333 18.4702 18.493 18.2747 18.6315 18.0649C18.757 17.8748 18.8648 17.6731 18.955 17.46C19.0449 17.2473 19.1143 17.0303 19.1631 16.8086C19.221 16.5454 19.25 16.2759 19.25 16C19.25 15.7241 19.221 15.4546 19.1631 15.1914C19.1143 14.9697 19.0449 14.7527 18.955 14.54C18.8648 14.3269 18.757 14.1252 18.6315 13.9351C18.493 13.7253 18.3331 13.5298 18.1516 13.3484C17.9702 13.167 17.7746 13.0071 17.5648 12.8684C17.3748 12.7429 17.1732 12.6353 16.96 12.5449C16.7473 12.4551 16.5303 12.3857 16.3087 12.3369C16.0455 12.2791 15.7759 12.25 15.5 12.25C15.224 12.25 14.9545 12.2791 14.6913 12.3369C14.4697 12.3857 14.2526 12.4551 14.0402 12.5449C13.8268 12.6353 13.6252 12.7429 13.4352 12.8684C13.2255 13.0068 13.0298 13.167 12.8484 13.3484C12.6669 13.5298 12.507 13.7253 12.3685 13.9351C12.243 14.1252 12.1353 14.3269 12.045 14.54C11.9551 14.7527 11.8857 14.9697 11.8369 15.1914C11.779 15.4546 11.75 15.7241 11.75 16C11.75 16.1577 11.7953 16.3013 11.886 16.4307C12.0295 16.6353 12.1884 16.7529 12.3624 16.7834C12.5365 16.814 12.726 16.7576 12.9307 16.614L13.8436 15.9736C14.1875 15.7327 14.2682 15.2729 14.0271 14.9292C13.939 14.8035 13.8217 14.7129 13.6915 14.6604Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/unsubmitted.svg b/packages/theme/src/svgs/unsubmitted.svg
new file mode 100644
index 000000000..275a21b33
--- /dev/null
+++ b/packages/theme/src/svgs/unsubmitted.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="23.999878" viewBox="0 0 24 23.9999" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1876)">
+		<path id="矢量 160" d="M16 1.99988L6 1.99988C4.34314 1.99988 3 3.34302 3 4.99988L3 18.9999C3 20.6566 4.34314 21.9999 6 21.9999L11.8924 21.9999C9.85956 20.7748 8.5 18.5463 8.5 15.9998C8.5 12.1339 11.634 8.99988 15.5 8.99988C16.775 8.99988 17.9704 9.3407 19 9.9364L19 4.99988C19 3.34302 17.6569 1.99988 16 1.99988ZM6 5.24988L13.5 5.24988C13.92 5.24988 14.25 5.57983 14.25 5.99988C14.25 6.41992 13.92 6.74988 13.5 6.74988L6 6.74988C5.58002 6.74988 5.25 6.41992 5.25 5.99988C5.25 5.57983 5.58002 5.24988 6 5.24988ZM6 8.74988L8 8.74988C8.41998 8.74988 8.75 9.07983 8.75 9.49988C8.75 9.91992 8.41998 10.2499 8 10.2499L6 10.2499C5.58002 10.2499 5.25 9.91992 5.25 9.49988C5.25 9.07983 5.58002 8.74988 6 8.74988ZM10 15.9998C10 12.9623 12.4625 10.4999 15.5 10.4999C18.5375 10.4999 21 12.9623 21 15.9998C21 19.0375 18.5375 21.4999 15.5 21.4999C12.4625 21.4999 10 19.0375 10 15.9998ZM15.75 13.9999L15.75 15.9337L17.4893 17.4315C17.8076 17.7054 17.8423 18.1708 17.5683 18.4891C17.2943 18.8075 16.8289 18.8422 16.5106 18.5682L14.5106 16.8461C14.4279 16.7748 14.3638 16.6893 14.3182 16.5902C14.2728 16.4911 14.25 16.3871 14.25 16.2777L14.25 13.9999C14.25 13.5798 14.58 13.2499 15 13.2499C15.42 13.2499 15.75 13.5798 15.75 13.9999Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/view-flowchart.svg b/packages/theme/src/svgs/view-flowchart.svg
new file mode 100644
index 000000000..bec4aa1e0
--- /dev/null
+++ b/packages/theme/src/svgs/view-flowchart.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip451_2373)">
+		<g opacity="0.000000"/>
+		<path id="矢量 252" d="M4.21 2.67C2.58 2.67 1.26 3.99 1.26 5.61C1.26 7.23 2.58 8.55 4.21 8.55C5.62 8.55 6.8 7.57 7.09 6.26L16.36 6.26C16.55 6.26 16.74 6.28 16.92 6.32C17.06 6.35 17.19 6.4 17.33 6.45C17.62 6.58 17.89 6.76 18.12 6.98C18.35 7.21 18.53 7.48 18.65 7.77C18.71 7.9 18.75 8.04 18.78 8.18C18.83 8.36 18.85 8.55 18.85 8.74C18.85 8.93 18.83 9.12 18.78 9.3C18.75 9.44 18.71 9.57 18.65 9.7C18.6 9.83 18.53 9.96 18.45 10.08C18.36 10.23 18.24 10.36 18.12 10.49C17.99 10.61 17.86 10.72 17.71 10.82C17.59 10.9 17.46 10.96 17.33 11.02C17.19 11.08 17.06 11.12 16.92 11.15C16.74 11.2 16.55 11.22 16.36 11.22L13.6 11.22C13.2 10.06 12.1 9.24 10.81 9.24C9.51 9.24 8.41 10.06 8.01 11.22L5.26 11.22C4.96 11.22 4.68 11.25 4.39 11.31C4.16 11.36 3.93 11.43 3.7 11.53C3.47 11.63 3.26 11.74 3.06 11.87C2.83 12.02 2.62 12.19 2.43 12.38C2.24 12.57 2.07 12.78 1.92 13.01C1.78 13.21 1.67 13.42 1.57 13.65C1.48 13.87 1.4 14.1 1.35 14.34C1.29 14.61 1.26 14.91 1.26 15.2C1.26 15.74 1.36 16.25 1.57 16.74C1.78 17.22 2.06 17.64 2.43 18.01C2.62 18.2 2.82 18.36 3.04 18.51C3.25 18.65 3.47 18.76 3.7 18.86C3.93 18.96 4.16 19.03 4.39 19.08C4.67 19.14 4.96 19.17 5.26 19.17L13.82 19.17C14.22 19.74 14.77 20.19 15.29 20.53C15.48 20.66 15.68 20.77 15.89 20.87C16.53 21.17 17.24 21.32 18.02 21.32C18.8 21.32 19.51 21.17 20.15 20.87C20.35 20.77 20.55 20.66 20.74 20.53C21.51 20.02 22.15 19.27 22.65 18.28C22.7 18.17 22.73 18.06 22.73 17.94C22.73 17.82 22.7 17.71 22.65 17.61C22.15 16.61 21.51 15.86 20.74 15.35C20.55 15.22 20.35 15.11 20.15 15.01C19.51 14.72 18.8 14.57 18.02 14.57C17.24 14.57 16.53 14.72 15.89 15.01C15.68 15.11 15.48 15.22 15.29 15.35C14.52 15.86 13.88 16.61 13.39 17.61L5.26 17.67C5.06 17.67 4.88 17.65 4.69 17.61C4.56 17.58 4.42 17.54 4.29 17.48C3.99 17.35 3.73 17.18 3.5 16.95C3.27 16.72 3.09 16.46 2.96 16.16C2.91 16.03 2.86 15.89 2.83 15.76C2.79 15.57 2.77 15.39 2.77 15.2C2.77 15 2.79 14.82 2.83 14.63C2.86 14.5 2.91 14.36 2.96 14.23C3.09 13.93 3.27 13.67 3.5 13.44C3.62 13.32 3.75 13.21 3.9 13.12C4.02 13.04 4.15 12.97 4.29 12.91C4.42 12.86 4.56 12.81 4.69 12.78C4.88 12.74 5.06 12.72 5.26 12.72L7.9 12.72C8.16 14.08 9.36 15.11 10.81 15.11C12.25 15.11 13.45 14.08 13.71 12.72L16.36 12.72C16.65 12.72 16.94 12.69 17.22 12.62C17.45 12.57 17.69 12.5 17.91 12.4C18.14 12.31 18.35 12.19 18.56 12.06C18.78 11.91 18.99 11.74 19.18 11.55C19.55 11.18 19.84 10.76 20.04 10.29C20.14 10.06 20.21 9.83 20.26 9.6C20.32 9.32 20.35 9.03 20.35 8.74C20.35 8.45 20.32 8.16 20.26 7.89C20.21 7.65 20.14 7.41 20.04 7.19C19.84 6.71 19.55 6.29 19.18 5.92C18.99 5.73 18.78 5.56 18.56 5.41C18.35 5.28 18.14 5.17 17.91 5.07C17.69 4.98 17.45 4.9 17.22 4.85C16.94 4.79 16.65 4.76 16.36 4.76L7.04 4.76C6.67 3.55 5.54 2.67 4.21 2.67ZM4.21 4.17C3.41 4.17 2.77 4.82 2.77 5.61C2.77 6.41 3.41 7.05 4.21 7.05C5.01 7.05 5.66 6.41 5.66 5.61C5.66 4.82 5.01 4.17 4.21 4.17ZM19.91 16.6C20.37 16.9 20.78 17.35 21.12 17.94C20.78 18.53 20.37 18.98 19.91 19.29C19.83 19.34 19.76 19.38 19.68 19.42C19.2 19.69 18.64 19.82 18.02 19.82C17.39 19.82 16.84 19.69 16.35 19.42C16.28 19.38 16.2 19.34 16.13 19.29C15.66 18.98 15.26 18.53 14.92 17.94C15.26 17.35 15.66 16.9 16.13 16.6C16.2 16.55 16.28 16.5 16.35 16.46C16.84 16.2 17.39 16.07 18.02 16.07C18.64 16.07 19.2 16.2 19.68 16.46C19.76 16.5 19.83 16.55 19.91 16.6ZM16.7 17.94C16.7 17.22 17.29 16.63 18.02 16.63C18.75 16.63 19.34 17.22 19.34 17.94C19.34 18.67 18.75 19.25 18.02 19.25C17.29 19.25 16.7 18.67 16.7 17.94Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/wait-for-delivery-o.svg b/packages/theme/src/svgs/wait-for-delivery-o.svg
new file mode 100644
index 000000000..0fa3946ff
--- /dev/null
+++ b/packages/theme/src/svgs/wait-for-delivery-o.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1873)">
+		<path id="矢量 158" d="M14.0737 17.1017L10.9272 17.1066C10.5709 15.2626 8.94806 13.87 7 13.87C5.04773 13.87 3.42212 15.2686 3.0705 17.1185L2.10022 17.12C1.49261 17.1199 1.00006 16.6416 1 16.0515L1 4.19934C1 3.60974 1.49182 3.13171 2.09894 3.13098L11.7813 3.12L11.9109 3.1272C12.4581 3.18884 12.8828 3.6405 12.8828 4.18835L12.8828 12.8083C12.8834 13.2502 13.2529 13.608 13.708 13.6074C14.1639 13.6069 14.5332 13.2478 14.5332 12.8051L14.5332 6.80261L14.5421 6.698C14.5939 6.39355 14.8666 6.16162 15.1948 6.16235L18.1469 6.16846C18.534 6.20874 18.8882 6.4071 19.1179 6.71802L22.6391 10.8054L22.733 10.9453C22.9073 11.2323 23 11.5602 23 11.8953L23 15.2517L22.9936 15.405C22.9365 16.088 22.5015 16.6671 21.8925 16.9447C21.4749 15.1816 19.8906 13.87 18 13.87C16.0536 13.87 14.4319 15.2601 14.0737 17.1017ZM6.75 6L6.75 8.32483L9.37689 9.85156C9.73999 10.0626 9.8595 10.5138 9.64844 10.8768C9.43738 11.24 8.98627 11.3595 8.62311 11.1484L5.62311 9.40479C5.50763 9.33765 5.41656 9.24622 5.34991 9.13037C5.28333 9.01465 5.25 8.88989 5.25 8.75635L5.25 6C5.25 5.57996 5.58002 5.25 6 5.25C6.41998 5.25 6.75 5.57996 6.75 6ZM7 14.87C5.34314 14.87 4 16.2131 4 17.87C4 19.5269 5.34314 20.87 7 20.87C8.65686 20.87 10 19.5269 10 17.87C10 16.2131 8.65686 14.87 7 14.87ZM15 17.87C15 16.2131 16.3431 14.87 18 14.87C19.6569 14.87 21 16.2131 21 17.87C21 19.5269 19.6569 20.87 18 20.87C16.3431 20.87 15 19.5269 15 17.87Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/wait-for-delivery.svg b/packages/theme/src/svgs/wait-for-delivery.svg
new file mode 100644
index 000000000..15e6b0b72
--- /dev/null
+++ b/packages/theme/src/svgs/wait-for-delivery.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1896)">
+		<path id="矢量 172" d="M5 2L19 2C20.6569 2 22 3.34314 22 5L22 6L2 6L2 5C2 3.34314 3.34314 2 5 2ZM9 7.5L2 7.5L2 19C2 20.6569 3.34314 22 5 22L19 22C20.6569 22 22 20.6569 22 19L22 7.5L15 7.5L15 13.9777C15 14.3938 14.5215 14.6278 14.193 14.3723L12.6139 13.1442C12.2528 12.8633 11.7472 12.8633 11.3861 13.1442L9.80701 14.3723C9.47852 14.6278 9 14.3938 9 13.9777L9 7.5Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/waiting-for-receipt.svg b/packages/theme/src/svgs/waiting-for-receipt.svg
new file mode 100644
index 000000000..6e868bba9
--- /dev/null
+++ b/packages/theme/src/svgs/waiting-for-receipt.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1874)">
+		<path id="矢量 26" d="M6.38 2L16.38 2C18.0369 2 19.38 3.34314 19.38 5L19.38 6.00012C18.6 5.99475 17.8182 6.28967 17.2231 6.88464L10.3171 13.7897C10.184 13.9229 10.0795 14.0817 10.0099 14.2567L8.4812 18.1039C8.03345 19.2308 9.15039 20.3468 10.2772 19.8986L14.1229 18.368C14.2976 18.2986 14.4563 18.1942 14.5892 18.0612L19.38 13.2711L19.38 19C19.38 20.6569 18.0369 22 16.38 22L6.38 22C4.72314 22 3.38 20.6569 3.38 19L3.38 5C3.38 3.34314 4.72314 2 6.38 2ZM14.3798 6.25305L6.37976 6.25305C5.95984 6.25305 5.62976 5.92297 5.62976 5.50305C5.62976 5.08313 5.95984 4.75305 6.37976 4.75305L14.3798 4.75305C14.7998 4.75305 15.1298 5.08313 15.1298 5.50305C15.1298 5.92297 14.7998 6.25305 14.3798 6.25305ZM19.5114 11.2474L20.1074 10.6515C20.1963 10.5626 20.2742 10.4664 20.3408 10.3632C20.3998 10.2717 20.4502 10.1748 20.4917 10.0721C20.533 9.97058 20.5642 9.86682 20.5856 9.76111C20.6085 9.64795 20.62 9.53186 20.62 9.41406C20.62 9.29639 20.6086 9.18103 20.5858 9.06799C20.5645 8.96228 20.533 8.85754 20.4917 8.75598C20.4501 8.65332 20.3998 8.55627 20.3408 8.46497C20.2742 8.36169 20.1963 8.2655 20.1074 8.17664C20.0186 8.08777 19.9227 8.01013 19.8196 7.94348C19.7283 7.88464 19.6306 7.83374 19.5281 7.79224C19.4264 7.7511 19.3228 7.71973 19.217 7.69836C19.1036 7.67542 18.9879 7.66406 18.87 7.66406C18.752 7.66406 18.6362 7.67542 18.5228 7.69836C18.4172 7.71973 18.3134 7.75098 18.2118 7.79224C18.1093 7.83386 18.0123 7.88416 17.9209 7.94312C17.8176 8.00989 17.7214 8.08765 17.6324 8.17664L17.0366 8.77246L19.5114 11.2474ZM11.2687 9.75C11.6887 9.75 12.0187 9.42004 12.0187 9C12.0187 8.57996 11.6887 8.25 11.2687 8.25L6.38 8.25C5.96008 8.25 5.63 8.57996 5.63 9C5.63 9.42004 5.96008 9.75 6.38 9.75L11.2687 9.75ZM18.6276 12.1313L16.4381 9.94177L16.1527 9.65637L11.8895 13.9196L9.81793 18.0652C9.68909 18.323 9.96271 18.5966 10.2205 18.4675L14.3645 16.3944L18.6276 12.1313ZM8.37976 13.25C8.79968 13.25 9.12976 12.92 9.12976 12.5C9.12976 12.08 8.79968 11.75 8.37976 11.75L6.37976 11.75C5.95972 11.75 5.62976 12.08 5.62976 12.5C5.62976 12.92 5.95972 13.25 6.37976 13.25L8.37976 13.25Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/waiting-for-submission.svg b/packages/theme/src/svgs/waiting-for-submission.svg
new file mode 100644
index 000000000..2c2400a09
--- /dev/null
+++ b/packages/theme/src/svgs/waiting-for-submission.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1875)">
+		<path id="矢量 159" d="M9.57581 1.55652L2.07581 5.46448C1.90466 5.55359 1.75 5.66553 1.61481 5.79541L10.5 10.2554L19.3852 5.79541C19.25 5.66553 19.0953 5.55359 18.9242 5.46448L11.4242 1.55652C10.845 1.25476 10.155 1.25476 9.57581 1.55652ZM9.75 22.6738L9.75 11.5573L1.00128 7.16577L1 16.9119C1 17.6573 1.41467 18.3411 2.07581 18.6855L9.57581 22.5934C9.63287 22.6232 9.69098 22.65 9.75 22.6738ZM19.9987 7.16577L11.25 11.5573L11.25 22.6738C11.309 22.65 11.3671 22.6232 11.4242 22.5934L14.4602 21.0115C13.2559 19.9142 12.5 18.333 12.5 16.5752C12.5 13.2615 15.1863 10.5752 18.5 10.5752C19.0179 10.5752 19.5206 10.6409 20 10.7643L19.9987 7.16577ZM4.28943 11.7861L7.72363 13.5032C7.89301 13.5879 8 13.761 8 13.9504L8 15.3177C8 15.4664 7.84357 15.5631 7.71057 15.4967L4.27637 13.7795C4.10699 13.6949 4 13.5217 4 13.3324L4 11.965C4 11.8163 4.15643 11.7196 4.28943 11.7861ZM14 16.575C14 14.0896 16.0147 12.075 18.5 12.075C20.9853 12.075 23 14.0896 23 16.575C23 19.0602 20.9853 21.075 18.5 21.075C16.0147 21.075 14 19.0602 14 16.575ZM18.75 16.4441L18.75 14.825C18.75 14.4049 18.42 14.075 18 14.075C17.58 14.075 17.25 14.4049 17.25 14.825L17.25 16.818C17.25 17.0674 17.3495 17.267 17.5487 17.417L19.5487 18.924C19.8842 19.1766 20.3463 19.1117 20.599 18.7762C20.8517 18.4408 20.7867 17.9786 20.4513 17.7258L18.75 16.4441Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/waiting-to-pick.svg b/packages/theme/src/svgs/waiting-to-pick.svg
new file mode 100644
index 000000000..a2b0cbe14
--- /dev/null
+++ b/packages/theme/src/svgs/waiting-to-pick.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1872)">
+		<path id="矢量 157" d="M3.74188 2.32922C3.36627 1.91394 2.74481 1.88269 2.32941 2.2583C1.91412 2.63391 1.88287 3.25537 2.25848 3.67078L4.00018 5.59656L4.00018 15.5C4.00018 16.0601 4.44025 16.5 5.00018 16.5L20.5 16.4999C21.34 16.4999 22 15.84 22 14.9999C22 14.1599 21.34 13.4999 20.5 13.4999L17.5186 13.4999C18.3367 13.4999 19 12.8367 19 12.0184L19 4.98145C19 4.16321 18.3367 3.49988 17.5186 3.49988L9.48151 3.49988C8.66339 3.49988 8.00006 4.16321 8.00006 4.98145L8.00006 12.0184C8.00006 12.8367 8.66339 13.4999 9.48151 13.4999L6.00018 13.4999L6.00018 5.21143C6.00018 5.08752 5.97797 4.96777 5.93341 4.85205C5.88885 4.73645 5.82501 4.63257 5.74188 4.54065L3.74188 2.32922ZM13.7501 8.24988L13.7501 5.99988C13.7501 5.57996 13.4201 5.24988 13.0001 5.24988C12.58 5.24988 12.2501 5.57996 12.2501 5.99988L12.2501 8.99988C12.2501 9.20703 12.3233 9.38379 12.4698 9.53027C12.6161 9.67664 12.7929 9.74988 13.0001 9.74988L16.0001 9.74988C16.4201 9.74988 16.7501 9.41992 16.7501 8.99988C16.7501 8.57996 16.4201 8.24988 16.0001 8.24988L13.7501 8.24988ZM7.50006 17.4999C6.11932 17.4999 5.00006 18.6193 5.00006 19.9999C5.00006 21.3806 6.11932 22.4999 7.50006 22.4999C8.88068 22.4999 10.0001 21.3806 10.0001 19.9999C10.0001 18.6193 8.88068 17.4999 7.50006 17.4999ZM17.5001 17.4999C16.1193 17.4999 15.0001 18.6193 15.0001 19.9999C15.0001 21.3806 16.1193 22.4999 17.5001 22.4999C18.8806 22.4999 20 21.3806 20 19.9999C20 18.6193 18.8806 17.4999 17.5001 17.4999Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/write-production-plan.svg b/packages/theme/src/svgs/write-production-plan.svg
new file mode 100644
index 000000000..08d45a12c
--- /dev/null
+++ b/packages/theme/src/svgs/write-production-plan.svg
@@ -0,0 +1,5 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1888)">
+		<path id="矢量 164" d="M15.5 2L8.5 2C7.94769 2 7.5 2.44775 7.5 3L7.5 4C7.5 4.55225 7.94769 5 8.5 5L15.5 5C16.0523 5 16.5 4.55225 16.5 4L16.5 3C16.5 2.44775 16.0523 2 15.5 2ZM6 3.5C5.95886 3.65979 6 3.82739 6 4L6 4.5C6 5.60461 6.89545 6.5 8 6.5L16 6.5C17.1046 6.5 18 5.60461 18 4.5L18 4C18 3.82739 17.9781 3.65979 17.937 3.5C19.5939 3.5 21 4.84314 21 6.5L21 19C21 20.6569 19.6569 22 18 22L6 22C4.34314 22 3 20.6569 3 19L3 6.5C3 4.84314 4.34314 3.5 6 3.5ZM11.0707 8.75L12.9292 8.75C13.2523 8.75 13.5353 8.96924 13.6201 9.28528L13.8717 10.223L14.4965 10.5895L15.4206 10.3425C15.7332 10.2589 16.0623 10.3981 16.2236 10.682L17.1544 12.3198C17.3153 12.6029 17.2697 12.96 17.0431 13.1923L16.3687 13.8835L16.3687 14.6165L17.0431 15.3077C17.2697 15.54 17.3153 15.8971 17.1544 16.1802L16.2237 17.8179C16.0623 18.1019 15.7332 18.241 15.4206 18.1575L14.497 17.9105L13.8717 18.2772L13.6202 19.2147C13.5353 19.5308 13.2523 19.75 12.9292 19.75L11.0707 19.75C10.7477 19.75 10.4647 19.5308 10.3798 19.215L10.1279 18.277L9.50305 17.9105L8.57947 18.1575C8.26685 18.241 7.93774 18.1019 7.77637 17.8179L6.84558 16.1801C6.68475 15.8971 6.73029 15.54 6.95679 15.3077L7.6311 14.6162L7.6311 13.8833L6.95697 13.1923C6.73035 12.96 6.68475 12.6029 6.84564 12.3198L7.77637 10.6821C7.93774 10.3981 8.26685 10.259 8.57947 10.3425L9.50305 10.5895L10.1279 10.223L10.3798 9.28503C10.4647 8.96924 10.7477 8.75 11.0707 8.75ZM12 17.2916C13.6615 17.2916 15.0111 15.9283 15.0111 14.25C15.0111 12.5717 13.6615 11.2084 12 11.2084C10.3385 11.2084 8.98889 12.5717 8.98889 14.25C8.98889 15.9283 10.3385 17.2916 12 17.2916ZM12 15.7916C12.8338 15.7916 13.5111 15.1007 13.5111 14.25C13.5111 13.3993 12.8338 12.7084 12 12.7084C11.1662 12.7084 10.4889 13.3993 10.4889 14.25C10.4889 15.1007 11.1662 15.7916 12 15.7916Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/svgs/xml.svg b/packages/theme/src/svgs/xml.svg
new file mode 100644
index 000000000..be3565327
--- /dev/null
+++ b/packages/theme/src/svgs/xml.svg
@@ -0,0 +1,6 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<g clip-path="url(#clip131_1910)">
+		<g opacity="0.000000"/>
+		<path id="矢量 186" d="M14.1617 2.0957C14.0532 2.03479 13.928 2 13.7947 2L6.69739 2C4.93018 2 3.5 3.44141 3.5 5.21667L3.5 18.7834C3.5 20.5586 4.93018 22 6.69739 22L17.3026 22C19.0698 22 20.5 20.5586 20.5 18.7834L20.5 8.79333C20.5 8.56653 20.3994 8.36328 20.2405 8.22632C20.2109 8.18591 20.1782 8.14697 20.1426 8.10986L14.6188 2.38159C14.491 2.24902 14.3337 2.15161 14.1617 2.0957ZM14.5439 4.46399L17.994 8.04297L15.5079 8.04333C14.9958 8.04333 14.5447 7.61792 14.5447 7.14893L14.5439 4.46399ZM7.60461 12.2683L6.72815 13.4744L5.85168 12.2684C5.60474 11.9287 5.1438 11.8558 4.80408 12.1028C4.46436 12.3496 4.39148 12.8107 4.63831 13.1504L5.80103 14.75L4.63831 16.3499C4.39148 16.6895 4.46436 17.1504 4.80408 17.3975C5.1438 17.6443 5.60486 17.5713 5.85168 17.2317L6.72827 16.0256L7.60461 17.2314C7.85156 17.5713 8.3125 17.6443 8.65234 17.3972C8.99207 17.1504 9.06494 16.6895 8.81799 16.3496L7.6554 14.75L8.81799 13.1503C9.06494 12.8104 8.99207 12.3495 8.65234 12.1025C8.3125 11.8557 7.85156 11.9286 7.60461 12.2683ZM13.3937 15.0875L13.3937 16.7891C13.3937 17.209 13.7236 17.5391 14.1437 17.5391C14.5637 17.5391 14.8937 17.209 14.8937 16.7891L14.8937 12.7083C14.8937 12.6047 14.8754 12.5088 14.8387 12.4204C14.8021 12.332 14.7472 12.2512 14.674 12.178C14.6008 12.1047 14.52 12.0498 14.4316 12.0132C14.3431 11.9766 14.2472 11.9583 14.1437 11.9583C14.0825 11.9583 14.0231 11.9653 13.9653 11.9795C13.9076 11.9935 13.8517 12.0148 13.7974 12.0431C13.743 12.0713 13.6936 12.105 13.6489 12.1442C13.6042 12.1833 13.5643 12.228 13.5293 12.2782L12.166 14.2256L10.8029 12.2782C10.7434 12.1934 10.6735 12.1252 10.5928 12.0739C10.5121 12.0225 10.4208 11.9877 10.3187 11.9697C10.2168 11.9518 10.1191 11.9531 10.0258 11.9738C9.93237 11.9944 9.84314 12.0344 9.7583 12.0939C9.70813 12.1289 9.66357 12.1688 9.62439 12.2135C9.58521 12.2582 9.55139 12.3076 9.52319 12.3619C9.495 12.4163 9.47375 12.4722 9.45959 12.5299C9.44556 12.5876 9.43848 12.6471 9.43848 12.7083L9.43848 16.7891C9.43848 17.209 9.76843 17.5391 10.1885 17.5391C10.6084 17.5391 10.9385 17.209 10.9385 16.7891L10.9385 15.0875L11.5516 15.9635C11.5657 15.9802 11.6202 16.0483 11.6357 16.0637C11.6525 16.0776 11.718 16.1353 11.736 16.1479C11.8208 16.2073 11.9099 16.2473 12.0033 16.2681C12.0967 16.2888 12.1945 16.29 12.2964 16.272C12.3983 16.2542 12.4897 16.2195 12.5704 16.168C12.6511 16.1165 12.7211 16.0483 12.7805 15.9635L13.3937 15.0875ZM16.8727 16.0391L16.8727 12.7083C16.8727 12.2883 16.5426 11.9583 16.1227 11.9583C15.7026 11.9583 15.3727 12.2883 15.3727 12.7083L15.3727 16.7891C15.3727 16.8926 15.391 16.9885 15.4276 17.0769C15.4641 17.1653 15.519 17.2461 15.5923 17.3193C15.6655 17.3926 15.7463 17.4475 15.8347 17.4841C15.9231 17.5208 16.019 17.5391 16.1227 17.5391L18.7583 17.5391C19.1783 17.5391 19.5083 17.209 19.5083 16.7891C19.5083 16.3691 19.1783 16.0391 18.7583 16.0391L16.8727 16.0391Z" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</g>
+</svg>
diff --git a/packages/theme/src/tag/index.less b/packages/theme/src/tag/index.less
index 3d5177a24..a75e18d73 100644
--- a/packages/theme/src/tag/index.less
+++ b/packages/theme/src/tag/index.less
@@ -158,6 +158,62 @@
     );
   }
 
+  &--red {
+    .tag-variant(
+      var(--ti-tag-red-text-color),
+      var(--ti-tag-red-text-color),
+      var(--ti-tag-red-bg-color),
+    );
+  }
+
+  &--orange {
+    .tag-variant(
+      var(--ti-tag-orange-text-color),
+      var(--ti-tag-orange-text-color),
+      var(--ti-tag-orange-bg-color),
+    );
+  }
+
+  &--green {
+    .tag-variant(
+      var(--ti-tag-green-text-color),
+      var(--ti-tag-green-text-color),
+      var(--ti-tag-green-bg-color),
+    );
+  }
+
+  &--blue {
+    .tag-variant(
+      var(--ti-tag-blue-text-color),
+      var(--ti-tag-blue-text-color),
+      var(--ti-tag-blue-bg-color),
+    );
+  }
+
+  &--purple {
+    .tag-variant(
+      var(--ti-tag-purple-text-color),
+      var(--ti-tag-purple-text-color),
+      var(--ti-tag-purple-bg-color),
+    );
+  }
+
+  &--brown {
+    .tag-variant(
+      var(--ti-tag-brown-text-color),
+      var(--ti-tag-brown-text-color),
+      var(--ti-tag-brown-bg-color),
+    );
+  }
+
+  &--grey {
+    .tag-variant(
+      var(--ti-tag-grey-text-color),
+      var(--ti-tag-grey-text-color),
+      var(--ti-tag-grey-bg-color),
+    );
+  }
+
   &--medium {
     height: var(--ti-tag-medium-height);
     line-height: var(--ti-tag-medium-height); // smb修正
diff --git a/packages/theme/src/tag/smb-theme.js b/packages/theme/src/tag/smb-theme.js
index 117d9731b..a3d125944 100644
--- a/packages/theme/src/tag/smb-theme.js
+++ b/packages/theme/src/tag/smb-theme.js
@@ -7,7 +7,8 @@ export const tinyTagSMBTheme = {
   'ti-tag-medium-padding-horizontal': 'var(--ti-common-space-3x)',
   'ti-tag-small-padding-horizontal': 'var(--ti-common-space-base)',
   'ti-tag-small-border-radius': 'var(--ti-common-border-radius-1)',
-  'ti-tag-primary-background-color': 'var(--ti-base-color-bg-6)',
+  'ti-tag-primary-background-color': 'var(--ti-common-color-bg-light-normal)',
+  'ti-tag-info-background-color': 'var(--ti-common-color-bg-light-normal)',
   'ti-tag-border-weight': '0',
   'ti-tag-border-radius': 'var(--ti-common-border-radius-2)',
   'ti-tag-close-font-size': 'var(--ti-common-font-size-2)',
diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less
index 53cd88d50..de601516c 100644
--- a/packages/theme/src/tag/vars.less
+++ b/packages/theme/src/tag/vars.less
@@ -127,4 +127,33 @@
   --ti-tag-plain-danger-text-color: var(--ti-common-color-error, #f66f6a);
   // plain主题危险类标签边框色
   --ti-tag-plain-danger-border-color: var(--ti-common-color-error-border-secondary, #ffbcba);
+
+  // red标签文本色
+  --ti-tag-red-text-color: var(--ti-common-color-error-text);
+  // red标签背景色
+  --ti-tag-red-bg-color: #fce3e0;
+  // orange标签文本色
+  --ti-tag-orange-text-color: #d96900;
+  // orange标签背景色
+  --ti-tag-orange-bg-color: var(--ti-common-color-warn-bg);
+  // green标签文本色
+  --ti-tag-green-text-color: #029931;
+  // green标签背景色
+  --ti-tag-green-bg-color: #d5f2dc;
+  // blue标签文本色
+  --ti-tag-blue-text-color: var(--ti-common-color-text-link);
+  // blue标签背景色
+  --ti-tag-blue-bg-color: var(--ti-common-color-prompt-bg);
+  // purple标签文本色
+  --ti-tag-purple-text-color: #832fd6;
+  // purple标签背景色
+  --ti-tag-purple-bg-color: #f4e0fc;
+  // brown标签文本色
+  --ti-tag-brown-text-color: #a64d00;
+  // brown标签背景色
+  --ti-tag-brown-bg-color: var(--ti-common-color-warn-bg);
+  // grey标签文本色
+  --ti-tag-grey-text-color: var(--ti-common-color-text-gray);
+  // grey标签背景色
+  --ti-tag-grey-bg-color: #e6e6e6;
 }
diff --git a/packages/vue-common/package.json b/packages/vue-common/package.json
index f2ded4d8e..f70d523ec 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.14.0",
+  "version": "3.15.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": [
@@ -38,4 +38,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue-icon-saas/index.ts b/packages/vue-icon-saas/index.ts
index 757e3c36e..1a19eb573 100644
--- a/packages/vue-icon-saas/index.ts
+++ b/packages/vue-icon-saas/index.ts
@@ -465,6 +465,43 @@ import IconStartO from './src/start-o'
 import IconTeams from './src/teams'
 import IconTurnOn from './src/turn-on'
 import IconWarningO from './src/warning-o'
+import IconAutomaticAssessment from './src/automatic-assessment'
+import IconAverageShippingPeriod from './src/average-shipping-period'
+import IconCustomsClearanceForm from './src/customs-clearance-form'
+import IconCustomsDeclaration from './src/customs-declaration'
+import IconDisallowance from './src/disallowance'
+import IconDrawFlowchart from './src/draw-flowchart'
+import IconEngineWorkflow from './src/engine-workflow'
+import IconFinishO from './src/finish-o'
+import IconLocationNumber from './src/location-number'
+import IconMainFreightSettled from './src/main-freight-settled'
+import IconMainFreightToBeSettled from './src/main-freight-to-be-settled'
+import IconMaintainInspectionRecords from './src/maintain-inspection-records'
+import IconItemPlanningProperties from './src/item-planning-properties'
+import IconMsg from './src/msg'
+import IconOfd from './src/ofd'
+import IconPendingReview from './src/pending-review'
+import IconProcessPlanRequirements from './src/process-plan-requirements'
+import IconPurchasePlannedOrder from './src/purchase-planned-order'
+import IconRequirementsPlanning from './src/requirements-planning'
+import IconShipped from './src/shipped'
+import IconSubstituteMaterial from './src/substitute-material'
+import IconSurchargeSettled from './src/surcharge-settled'
+import IconSurchargeToBeSettled from './src/surcharge-to-be-settled'
+import IconToBeUploaded from './src/to-be-uploaded'
+import IconTotalNolume from './src/total-nolume'
+import IconTotalNumber from './src/total-number'
+import IconTotalWeight from './src/total-weight'
+import IconUnderReview from './src/under-review'
+import IconUnsubmitted from './src/unsubmitted'
+import IconViewFlowchart from './src/view-flowchart'
+import IconWaitForDeliveryO from './src/wait-for-delivery-o'
+import IconWaitForDelivery from './src/wait-for-delivery'
+import IconWaitingForReceipt from './src/waiting-for-receipt'
+import IconWaitingForSubmission from './src/waiting-for-submission'
+import IconWaitingToPick from './src/waiting-to-pick'
+import IconWriteProductioPlan from './src/write-production-plan'
+import IconXml from './src/xml'
 
 export {
   IconActivation,
@@ -483,6 +520,80 @@ export {
   IconTurnOn as iconTurnOn,
   IconWarningO,
   IconWarningO as iconWarningO,
+  IconAutomaticAssessment,
+  IconAutomaticAssessment as iconAutomaticAssessment,
+  IconAverageShippingPeriod,
+  IconAverageShippingPeriod as iconAverageShippingPeriod,
+  IconCustomsClearanceForm,
+  IconCustomsClearanceForm as iconCustomsClearanceForm,
+  IconCustomsDeclaration,
+  IconCustomsDeclaration as iconCustomsDeclaration,
+  IconDisallowance,
+  IconDisallowance as iconDisallowance,
+  IconDrawFlowchart,
+  IconDrawFlowchart as iconDrawFlowchart,
+  IconEngineWorkflow,
+  IconEngineWorkflow as iconEngineWorkflow,
+  IconFinishO,
+  IconFinishO as iconFinishO,
+  IconLocationNumber,
+  IconLocationNumber as iconLocationNumber,
+  IconMainFreightSettled,
+  IconMainFreightSettled as iconMainFreightSettled,
+  IconMainFreightToBeSettled,
+  IconMainFreightToBeSettled as iconMainFreightToBeSettled,
+  IconMaintainInspectionRecords,
+  IconMaintainInspectionRecords as iconMaintainInspectionRecords,
+  IconItemPlanningProperties,
+  IconItemPlanningProperties as iconItemPlanningProperties,
+  IconMsg,
+  IconMsg as iconMsg,
+  IconOfd,
+  IconOfd as iconOfd,
+  IconPendingReview,
+  IconPendingReview as iconPendingReview,
+  IconProcessPlanRequirements,
+  IconProcessPlanRequirements as iconProcessPlanRequirements,
+  IconPurchasePlannedOrder,
+  IconPurchasePlannedOrder as iconPurchasePlannedOrder,
+  IconRequirementsPlanning,
+  IconRequirementsPlanning as iconRequirementsPlanning,
+  IconShipped,
+  IconShipped as iconShipped,
+  IconSubstituteMaterial,
+  IconSubstituteMaterial as iconSubstituteMaterial,
+  IconSurchargeSettled,
+  IconSurchargeSettled as iconSurchargeSettled,
+  IconSurchargeToBeSettled,
+  IconSurchargeToBeSettled as iconSurchargeToBeSettled,
+  IconToBeUploaded,
+  IconToBeUploaded as iconToBeUploaded,
+  IconTotalNolume,
+  IconTotalNolume as iconTotalNolume,
+  IconTotalNumber,
+  IconTotalNumber as iconTotalNumber,
+  IconTotalWeight,
+  IconTotalWeight as iconTotalWeight,
+  IconUnderReview,
+  IconUnderReview as iconUnderReview,
+  IconUnsubmitted,
+  IconUnsubmitted as iconUnsubmitted,
+  IconViewFlowchart,
+  IconViewFlowchart as iconViewFlowchart,
+  IconWaitForDeliveryO,
+  IconWaitForDeliveryO as iconWaitForDeliveryO,
+  IconWaitForDelivery,
+  IconWaitForDelivery as iconWaitForDelivery,
+  IconWaitingForReceipt,
+  IconWaitingForReceipt as iconWaitingForReceipt,
+  IconWaitingForSubmission,
+  IconWaitingForSubmission as iconWaitingForSubmission,
+  IconWaitingToPick,
+  IconWaitingToPick as iconWaitingToPick,
+  IconWriteProductioPlan,
+  IconWriteProductioPlan as iconWriteProductioPlan,
+  IconXml,
+  IconXml as iconXml,
   IconSubScript,
   IconSubScript as iconSubScript,
   IconSortTriangle,
@@ -1380,6 +1491,43 @@ export default {
   IconTeams,
   IconTurnOn,
   IconWarningO,
+  IconAutomaticAssessment,
+  IconAverageShippingPeriod,
+  IconCustomsClearanceForm,
+  IconCustomsDeclaration,
+  IconDisallowance,
+  IconDrawFlowchart,
+  IconEngineWorkflow,
+  IconFinishO,
+  IconLocationNumber,
+  IconMainFreightSettled,
+  IconMainFreightToBeSettled,
+  IconMaintainInspectionRecords,
+  IconItemPlanningProperties,
+  IconMsg,
+  IconOfd,
+  IconPendingReview,
+  IconProcessPlanRequirements,
+  IconPurchasePlannedOrder,
+  IconRequirementsPlanning,
+  IconShipped,
+  IconSubstituteMaterial,
+  IconSurchargeSettled,
+  IconSurchargeToBeSettled,
+  IconToBeUploaded,
+  IconTotalNolume,
+  IconTotalNumber,
+  IconTotalWeight,
+  IconUnderReview,
+  IconUnsubmitted,
+  IconViewFlowchart,
+  IconWaitForDeliveryO,
+  IconWaitForDelivery,
+  IconWaitingForReceipt,
+  IconWaitingForSubmission,
+  IconWaitingToPick,
+  IconWriteProductioPlan,
+  IconXml,
   IconScan,
   IconSubScript,
   IconSortTriangle,
diff --git a/packages/vue-icon-saas/package.json b/packages/vue-icon-saas/package.json
index 72b14e502..b2feb6ad5 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.14.0",
+  "version": "3.15.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",
@@ -39,4 +39,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue-icon/index.ts b/packages/vue-icon/index.ts
index 757e3c36e..1a19eb573 100644
--- a/packages/vue-icon/index.ts
+++ b/packages/vue-icon/index.ts
@@ -465,6 +465,43 @@ import IconStartO from './src/start-o'
 import IconTeams from './src/teams'
 import IconTurnOn from './src/turn-on'
 import IconWarningO from './src/warning-o'
+import IconAutomaticAssessment from './src/automatic-assessment'
+import IconAverageShippingPeriod from './src/average-shipping-period'
+import IconCustomsClearanceForm from './src/customs-clearance-form'
+import IconCustomsDeclaration from './src/customs-declaration'
+import IconDisallowance from './src/disallowance'
+import IconDrawFlowchart from './src/draw-flowchart'
+import IconEngineWorkflow from './src/engine-workflow'
+import IconFinishO from './src/finish-o'
+import IconLocationNumber from './src/location-number'
+import IconMainFreightSettled from './src/main-freight-settled'
+import IconMainFreightToBeSettled from './src/main-freight-to-be-settled'
+import IconMaintainInspectionRecords from './src/maintain-inspection-records'
+import IconItemPlanningProperties from './src/item-planning-properties'
+import IconMsg from './src/msg'
+import IconOfd from './src/ofd'
+import IconPendingReview from './src/pending-review'
+import IconProcessPlanRequirements from './src/process-plan-requirements'
+import IconPurchasePlannedOrder from './src/purchase-planned-order'
+import IconRequirementsPlanning from './src/requirements-planning'
+import IconShipped from './src/shipped'
+import IconSubstituteMaterial from './src/substitute-material'
+import IconSurchargeSettled from './src/surcharge-settled'
+import IconSurchargeToBeSettled from './src/surcharge-to-be-settled'
+import IconToBeUploaded from './src/to-be-uploaded'
+import IconTotalNolume from './src/total-nolume'
+import IconTotalNumber from './src/total-number'
+import IconTotalWeight from './src/total-weight'
+import IconUnderReview from './src/under-review'
+import IconUnsubmitted from './src/unsubmitted'
+import IconViewFlowchart from './src/view-flowchart'
+import IconWaitForDeliveryO from './src/wait-for-delivery-o'
+import IconWaitForDelivery from './src/wait-for-delivery'
+import IconWaitingForReceipt from './src/waiting-for-receipt'
+import IconWaitingForSubmission from './src/waiting-for-submission'
+import IconWaitingToPick from './src/waiting-to-pick'
+import IconWriteProductioPlan from './src/write-production-plan'
+import IconXml from './src/xml'
 
 export {
   IconActivation,
@@ -483,6 +520,80 @@ export {
   IconTurnOn as iconTurnOn,
   IconWarningO,
   IconWarningO as iconWarningO,
+  IconAutomaticAssessment,
+  IconAutomaticAssessment as iconAutomaticAssessment,
+  IconAverageShippingPeriod,
+  IconAverageShippingPeriod as iconAverageShippingPeriod,
+  IconCustomsClearanceForm,
+  IconCustomsClearanceForm as iconCustomsClearanceForm,
+  IconCustomsDeclaration,
+  IconCustomsDeclaration as iconCustomsDeclaration,
+  IconDisallowance,
+  IconDisallowance as iconDisallowance,
+  IconDrawFlowchart,
+  IconDrawFlowchart as iconDrawFlowchart,
+  IconEngineWorkflow,
+  IconEngineWorkflow as iconEngineWorkflow,
+  IconFinishO,
+  IconFinishO as iconFinishO,
+  IconLocationNumber,
+  IconLocationNumber as iconLocationNumber,
+  IconMainFreightSettled,
+  IconMainFreightSettled as iconMainFreightSettled,
+  IconMainFreightToBeSettled,
+  IconMainFreightToBeSettled as iconMainFreightToBeSettled,
+  IconMaintainInspectionRecords,
+  IconMaintainInspectionRecords as iconMaintainInspectionRecords,
+  IconItemPlanningProperties,
+  IconItemPlanningProperties as iconItemPlanningProperties,
+  IconMsg,
+  IconMsg as iconMsg,
+  IconOfd,
+  IconOfd as iconOfd,
+  IconPendingReview,
+  IconPendingReview as iconPendingReview,
+  IconProcessPlanRequirements,
+  IconProcessPlanRequirements as iconProcessPlanRequirements,
+  IconPurchasePlannedOrder,
+  IconPurchasePlannedOrder as iconPurchasePlannedOrder,
+  IconRequirementsPlanning,
+  IconRequirementsPlanning as iconRequirementsPlanning,
+  IconShipped,
+  IconShipped as iconShipped,
+  IconSubstituteMaterial,
+  IconSubstituteMaterial as iconSubstituteMaterial,
+  IconSurchargeSettled,
+  IconSurchargeSettled as iconSurchargeSettled,
+  IconSurchargeToBeSettled,
+  IconSurchargeToBeSettled as iconSurchargeToBeSettled,
+  IconToBeUploaded,
+  IconToBeUploaded as iconToBeUploaded,
+  IconTotalNolume,
+  IconTotalNolume as iconTotalNolume,
+  IconTotalNumber,
+  IconTotalNumber as iconTotalNumber,
+  IconTotalWeight,
+  IconTotalWeight as iconTotalWeight,
+  IconUnderReview,
+  IconUnderReview as iconUnderReview,
+  IconUnsubmitted,
+  IconUnsubmitted as iconUnsubmitted,
+  IconViewFlowchart,
+  IconViewFlowchart as iconViewFlowchart,
+  IconWaitForDeliveryO,
+  IconWaitForDeliveryO as iconWaitForDeliveryO,
+  IconWaitForDelivery,
+  IconWaitForDelivery as iconWaitForDelivery,
+  IconWaitingForReceipt,
+  IconWaitingForReceipt as iconWaitingForReceipt,
+  IconWaitingForSubmission,
+  IconWaitingForSubmission as iconWaitingForSubmission,
+  IconWaitingToPick,
+  IconWaitingToPick as iconWaitingToPick,
+  IconWriteProductioPlan,
+  IconWriteProductioPlan as iconWriteProductioPlan,
+  IconXml,
+  IconXml as iconXml,
   IconSubScript,
   IconSubScript as iconSubScript,
   IconSortTriangle,
@@ -1380,6 +1491,43 @@ export default {
   IconTeams,
   IconTurnOn,
   IconWarningO,
+  IconAutomaticAssessment,
+  IconAverageShippingPeriod,
+  IconCustomsClearanceForm,
+  IconCustomsDeclaration,
+  IconDisallowance,
+  IconDrawFlowchart,
+  IconEngineWorkflow,
+  IconFinishO,
+  IconLocationNumber,
+  IconMainFreightSettled,
+  IconMainFreightToBeSettled,
+  IconMaintainInspectionRecords,
+  IconItemPlanningProperties,
+  IconMsg,
+  IconOfd,
+  IconPendingReview,
+  IconProcessPlanRequirements,
+  IconPurchasePlannedOrder,
+  IconRequirementsPlanning,
+  IconShipped,
+  IconSubstituteMaterial,
+  IconSurchargeSettled,
+  IconSurchargeToBeSettled,
+  IconToBeUploaded,
+  IconTotalNolume,
+  IconTotalNumber,
+  IconTotalWeight,
+  IconUnderReview,
+  IconUnsubmitted,
+  IconViewFlowchart,
+  IconWaitForDeliveryO,
+  IconWaitForDelivery,
+  IconWaitingForReceipt,
+  IconWaitingForSubmission,
+  IconWaitingToPick,
+  IconWriteProductioPlan,
+  IconXml,
   IconScan,
   IconSubScript,
   IconSortTriangle,
diff --git a/packages/vue-icon/package.json b/packages/vue-icon/package.json
index 71a381628..5f348fd94 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.14.0",
+  "version": "3.15.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",
@@ -39,4 +39,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/credit-card/index.ts b/packages/vue-icon/src/automatic-assessment/index.ts
similarity index 50%
rename from packages/vue/src/credit-card/index.ts
rename to packages/vue-icon/src/automatic-assessment/index.ts
index 3fe800359..5c51f7e13 100644
--- a/packages/vue/src/credit-card/index.ts
+++ b/packages/vue-icon/src/automatic-assessment/index.ts
@@ -9,22 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import CreditCard from './src/index'
-import '@opentiny/vue-theme/credit-card/index.less'
-import { version } from './package.json'
+import { svg } from '@opentiny/vue-common'
+import AutomaticAssessment from '@opentiny/vue-theme/svgs/automatic-assessment.svg'
 
-/* istanbul ignore next */
-CreditCard.install = function (Vue) {
-  Vue.component(CreditCard.name, CreditCard)
-}
-
-CreditCard.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    CreditCard.install(window.Vue)
-  }
-}
-
-export default CreditCard
+export default () => svg({ name: 'IconAutomaticAssessment', component: AutomaticAssessment })()
diff --git a/packages/vue-icon/src/average-shipping-period/index.ts b/packages/vue-icon/src/average-shipping-period/index.ts
new file mode 100644
index 000000000..f257a3110
--- /dev/null
+++ b/packages/vue-icon/src/average-shipping-period/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import AverageShippingPeriod from '@opentiny/vue-theme/svgs/average-shipping-period.svg'
+
+export default () => svg({ name: 'IconAverageShippingPeriod', component: AverageShippingPeriod })()
diff --git a/packages/vue-icon/src/customs-clearance-form/index.ts b/packages/vue-icon/src/customs-clearance-form/index.ts
new file mode 100644
index 000000000..a5e622de3
--- /dev/null
+++ b/packages/vue-icon/src/customs-clearance-form/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import CustomsClearanceForm from '@opentiny/vue-theme/svgs/customs-clearance-form.svg'
+
+export default () => svg({ name: 'IconCustomsClearanceForm', component: CustomsClearanceForm })()
diff --git a/packages/vue-icon/src/customs-declaration/index.ts b/packages/vue-icon/src/customs-declaration/index.ts
new file mode 100644
index 000000000..9414b8b20
--- /dev/null
+++ b/packages/vue-icon/src/customs-declaration/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import CustomsDeclaration from '@opentiny/vue-theme/svgs/customs-declaration.svg'
+
+export default () => svg({ name: 'IconCustomsDeclaration', component: CustomsDeclaration })()
diff --git a/packages/vue-icon/src/disallowance/index.ts b/packages/vue-icon/src/disallowance/index.ts
new file mode 100644
index 000000000..88a90c02e
--- /dev/null
+++ b/packages/vue-icon/src/disallowance/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import Disallowance from '@opentiny/vue-theme/svgs/disallowance.svg'
+
+export default () => svg({ name: 'IconDisallowance', component: Disallowance })()
diff --git a/packages/vue-icon/src/draw-flowchart/index.ts b/packages/vue-icon/src/draw-flowchart/index.ts
new file mode 100644
index 000000000..81152b7a6
--- /dev/null
+++ b/packages/vue-icon/src/draw-flowchart/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import DrawFlowchart from '@opentiny/vue-theme/svgs/draw-flowchart.svg'
+
+export default () => svg({ name: 'IconDrawFlowchart', component: DrawFlowchart })()
diff --git a/packages/vue-icon/src/engine-workflow/index.ts b/packages/vue-icon/src/engine-workflow/index.ts
new file mode 100644
index 000000000..5aeaf335c
--- /dev/null
+++ b/packages/vue-icon/src/engine-workflow/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import EngineWorkflow from '@opentiny/vue-theme/svgs/engine-workflow.svg'
+
+export default () => svg({ name: 'IconEngineWorkflow', component: EngineWorkflow })()
diff --git a/packages/vue-icon/src/finish-o/index.ts b/packages/vue-icon/src/finish-o/index.ts
new file mode 100644
index 000000000..e436b9ab5
--- /dev/null
+++ b/packages/vue-icon/src/finish-o/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import FinishO from '@opentiny/vue-theme/svgs/finish-o.svg'
+
+export default () => svg({ name: 'IconFinishO', component: FinishO })()
diff --git a/packages/vue-icon/src/item-planning-properties/index.ts b/packages/vue-icon/src/item-planning-properties/index.ts
new file mode 100644
index 000000000..e24a693f8
--- /dev/null
+++ b/packages/vue-icon/src/item-planning-properties/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import ItemPlanningProperties from '@opentiny/vue-theme/svgs/item-planning-properties.svg'
+
+export default () => svg({ name: 'IconItemPlanningProperties', component: ItemPlanningProperties })()
diff --git a/packages/vue-icon/src/location-number/index.ts b/packages/vue-icon/src/location-number/index.ts
new file mode 100644
index 000000000..9eaa97ddf
--- /dev/null
+++ b/packages/vue-icon/src/location-number/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import LocationNumber from '@opentiny/vue-theme/svgs/location-number.svg'
+
+export default () => svg({ name: 'IconLocationNumber', component: LocationNumber })()
diff --git a/packages/vue-icon/src/main-freight-settled/index.ts b/packages/vue-icon/src/main-freight-settled/index.ts
new file mode 100644
index 000000000..d9617ea3c
--- /dev/null
+++ b/packages/vue-icon/src/main-freight-settled/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import MainFreightSettled from '@opentiny/vue-theme/svgs/main-freight-settled.svg'
+
+export default () => svg({ name: 'IconMainFreightSettled', component: MainFreightSettled })()
diff --git a/packages/vue-icon/src/main-freight-to-be-settled/index.ts b/packages/vue-icon/src/main-freight-to-be-settled/index.ts
new file mode 100644
index 000000000..6196df2bd
--- /dev/null
+++ b/packages/vue-icon/src/main-freight-to-be-settled/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import MainFreightToBeSettled from '@opentiny/vue-theme/svgs/main-freight-to-be-settled.svg'
+
+export default () => svg({ name: 'IconMainFreightToBeSettled', component: MainFreightToBeSettled })()
diff --git a/packages/vue-icon/src/maintain-inspection-records/index.ts b/packages/vue-icon/src/maintain-inspection-records/index.ts
new file mode 100644
index 000000000..29f1ba99f
--- /dev/null
+++ b/packages/vue-icon/src/maintain-inspection-records/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import MaintainInspectionRecords from '@opentiny/vue-theme/svgs/maintain-inspection-records.svg'
+
+export default () => svg({ name: 'IconMaintainInspectionRecords', component: MaintainInspectionRecords })()
diff --git a/packages/theme/src/credit-card-form/index.js b/packages/vue-icon/src/msg/index.ts
similarity index 74%
rename from packages/theme/src/credit-card-form/index.js
rename to packages/vue-icon/src/msg/index.ts
index eaecdc42e..4f548064b 100644
--- a/packages/theme/src/credit-card-form/index.js
+++ b/packages/vue-icon/src/msg/index.ts
@@ -9,7 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
+import { svg } from '@opentiny/vue-common'
+import Msg from '@opentiny/vue-theme/svgs/msg.svg'
 
-export default {
-  // credit-card-form
-}
+export default () => svg({ name: 'IconMsg', component: Msg })()
diff --git a/packages/theme/src/credit-card/index.js b/packages/vue-icon/src/ofd/index.ts
similarity index 74%
rename from packages/theme/src/credit-card/index.js
rename to packages/vue-icon/src/ofd/index.ts
index e9a97a069..d6bf40a48 100644
--- a/packages/theme/src/credit-card/index.js
+++ b/packages/vue-icon/src/ofd/index.ts
@@ -9,7 +9,7 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
+import { svg } from '@opentiny/vue-common'
+import Ofd from '@opentiny/vue-theme/svgs/ofd.svg'
 
-export default {
-  // credit-card
-}
+export default () => svg({ name: 'IconOfd', component: Ofd })()
diff --git a/packages/vue-icon/src/pending-review/index.ts b/packages/vue-icon/src/pending-review/index.ts
new file mode 100644
index 000000000..8c621b6b5
--- /dev/null
+++ b/packages/vue-icon/src/pending-review/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import PendingReview from '@opentiny/vue-theme/svgs/pending-review.svg'
+
+export default () => svg({ name: 'IconPendingReview', component: PendingReview })()
diff --git a/packages/vue-icon/src/process-plan-requirements/index.ts b/packages/vue-icon/src/process-plan-requirements/index.ts
new file mode 100644
index 000000000..49dd4082d
--- /dev/null
+++ b/packages/vue-icon/src/process-plan-requirements/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import ProcessPlanRequirements from '@opentiny/vue-theme/svgs/process-plan-requirements.svg'
+
+export default () => svg({ name: 'IconProcessPlanRequirements', component: ProcessPlanRequirements })()
diff --git a/packages/vue-icon/src/purchase-planned-order/index.ts b/packages/vue-icon/src/purchase-planned-order/index.ts
new file mode 100644
index 000000000..b8f07386b
--- /dev/null
+++ b/packages/vue-icon/src/purchase-planned-order/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import PurchasePlannedOrder from '@opentiny/vue-theme/svgs/purchase-planned-order.svg'
+
+export default () => svg({ name: 'IconPurchasePlannedOrder', component: PurchasePlannedOrder })()
diff --git a/packages/vue-icon/src/requirements-planning/index.ts b/packages/vue-icon/src/requirements-planning/index.ts
new file mode 100644
index 000000000..f51a6bdba
--- /dev/null
+++ b/packages/vue-icon/src/requirements-planning/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import RequirementsPlanning from '@opentiny/vue-theme/svgs/requirements-planning.svg'
+
+export default () => svg({ name: 'IconRequirementsPlanning', component: RequirementsPlanning })()
diff --git a/packages/vue-icon/src/shipped/index.ts b/packages/vue-icon/src/shipped/index.ts
new file mode 100644
index 000000000..dffa35a90
--- /dev/null
+++ b/packages/vue-icon/src/shipped/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import Shipped from '@opentiny/vue-theme/svgs/shipped.svg'
+
+export default () => svg({ name: 'IconShipped', component: Shipped })()
diff --git a/packages/vue-icon/src/substitute-material/index.ts b/packages/vue-icon/src/substitute-material/index.ts
new file mode 100644
index 000000000..3fe0bac03
--- /dev/null
+++ b/packages/vue-icon/src/substitute-material/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import SubstituteMaterial from '@opentiny/vue-theme/svgs/substitute-material.svg'
+
+export default () => svg({ name: 'IconSubstituteMaterial', component: SubstituteMaterial })()
diff --git a/packages/vue-icon/src/surcharge-settled/index.ts b/packages/vue-icon/src/surcharge-settled/index.ts
new file mode 100644
index 000000000..bc8b08193
--- /dev/null
+++ b/packages/vue-icon/src/surcharge-settled/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import SurchargeSettled from '@opentiny/vue-theme/svgs/surcharge-settled.svg'
+
+export default () => svg({ name: 'IconSurchargeSettled', component: SurchargeSettled })()
diff --git a/packages/vue-icon/src/surcharge-to-be-settled/index.ts b/packages/vue-icon/src/surcharge-to-be-settled/index.ts
new file mode 100644
index 000000000..49a595888
--- /dev/null
+++ b/packages/vue-icon/src/surcharge-to-be-settled/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import SurchargeToBeSettled from '@opentiny/vue-theme/svgs/surcharge-to-be-settled.svg'
+
+export default () => svg({ name: 'IconSurchargeToBeSettled', component: SurchargeToBeSettled })()
diff --git a/packages/vue-icon/src/to-be-uploaded/index.ts b/packages/vue-icon/src/to-be-uploaded/index.ts
new file mode 100644
index 000000000..f4a882bde
--- /dev/null
+++ b/packages/vue-icon/src/to-be-uploaded/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import ToBeUploaded from '@opentiny/vue-theme/svgs/to-be-uploaded.svg'
+
+export default () => svg({ name: 'IconToBeUploaded', component: ToBeUploaded })()
diff --git a/packages/vue-icon/src/total-nolume/index.ts b/packages/vue-icon/src/total-nolume/index.ts
new file mode 100644
index 000000000..e29005cdf
--- /dev/null
+++ b/packages/vue-icon/src/total-nolume/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import TotalNolume from '@opentiny/vue-theme/svgs/total-nolume.svg'
+
+export default () => svg({ name: 'IconTotalNolume', component: TotalNolume })()
diff --git a/packages/vue-icon/src/total-number/index.ts b/packages/vue-icon/src/total-number/index.ts
new file mode 100644
index 000000000..ed345cc6f
--- /dev/null
+++ b/packages/vue-icon/src/total-number/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import TotalNumber from '@opentiny/vue-theme/svgs/total-number.svg'
+
+export default () => svg({ name: 'IconTotalNumber', component: TotalNumber })()
diff --git a/packages/vue-icon/src/total-weight/index.ts b/packages/vue-icon/src/total-weight/index.ts
new file mode 100644
index 000000000..722656549
--- /dev/null
+++ b/packages/vue-icon/src/total-weight/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import TotalWeight from '@opentiny/vue-theme/svgs/total-weight.svg'
+
+export default () => svg({ name: 'IconTotalWeight', component: TotalWeight })()
diff --git a/packages/vue-icon/src/under-review/index.ts b/packages/vue-icon/src/under-review/index.ts
new file mode 100644
index 000000000..623d231a9
--- /dev/null
+++ b/packages/vue-icon/src/under-review/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import UnderReview from '@opentiny/vue-theme/svgs/under-review.svg'
+
+export default () => svg({ name: 'IconUnderReview', component: UnderReview })()
diff --git a/packages/vue-icon/src/unsubmitted/index.ts b/packages/vue-icon/src/unsubmitted/index.ts
new file mode 100644
index 000000000..2f3aea2f1
--- /dev/null
+++ b/packages/vue-icon/src/unsubmitted/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import Unsubmitted from '@opentiny/vue-theme/svgs/unsubmitted.svg'
+
+export default () => svg({ name: 'IconUnsubmitted', component: Unsubmitted })()
diff --git a/packages/vue-icon/src/view-flowchart/index.ts b/packages/vue-icon/src/view-flowchart/index.ts
new file mode 100644
index 000000000..f090a65d6
--- /dev/null
+++ b/packages/vue-icon/src/view-flowchart/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import ViewFlowchart from '@opentiny/vue-theme/svgs/view-flowchart.svg'
+
+export default () => svg({ name: 'IconViewFlowchart', component: ViewFlowchart })()
diff --git a/packages/vue-icon/src/wait-for-delivery-o/index.ts b/packages/vue-icon/src/wait-for-delivery-o/index.ts
new file mode 100644
index 000000000..02fcd9751
--- /dev/null
+++ b/packages/vue-icon/src/wait-for-delivery-o/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import WaitForDeliveryO from '@opentiny/vue-theme/svgs/wait-for-delivery-o.svg'
+
+export default () => svg({ name: 'IconWaitForDeliveryO', component: WaitForDeliveryO })()
diff --git a/packages/vue-icon/src/wait-for-delivery/index.ts b/packages/vue-icon/src/wait-for-delivery/index.ts
new file mode 100644
index 000000000..37da89b90
--- /dev/null
+++ b/packages/vue-icon/src/wait-for-delivery/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import WaitForDelivery from '@opentiny/vue-theme/svgs/wait-for-delivery.svg'
+
+export default () => svg({ name: 'IconWaitForDelivery', component: WaitForDelivery })()
diff --git a/packages/vue-icon/src/waiting-for-receipt/index.ts b/packages/vue-icon/src/waiting-for-receipt/index.ts
new file mode 100644
index 000000000..7380d61fb
--- /dev/null
+++ b/packages/vue-icon/src/waiting-for-receipt/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import WaitingForReceipt from '@opentiny/vue-theme/svgs/waiting-for-receipt.svg'
+
+export default () => svg({ name: 'IconWaitingForReceipt', component: WaitingForReceipt })()
diff --git a/packages/vue-icon/src/waiting-for-submission/index.ts b/packages/vue-icon/src/waiting-for-submission/index.ts
new file mode 100644
index 000000000..f05ccc302
--- /dev/null
+++ b/packages/vue-icon/src/waiting-for-submission/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import WaitingForSubmission from '@opentiny/vue-theme/svgs/waiting-for-submission.svg'
+
+export default () => svg({ name: 'IconWaitingForSubmission', component: WaitingForSubmission })()
diff --git a/packages/vue-icon/src/waiting-to-pick/index.ts b/packages/vue-icon/src/waiting-to-pick/index.ts
new file mode 100644
index 000000000..6fa3bff77
--- /dev/null
+++ b/packages/vue-icon/src/waiting-to-pick/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import WaitingToPick from '@opentiny/vue-theme/svgs/waiting-to-pick.svg'
+
+export default () => svg({ name: 'IconWaitingToPick', component: WaitingToPick })()
diff --git a/packages/vue-icon/src/write-production-plan/index.ts b/packages/vue-icon/src/write-production-plan/index.ts
new file mode 100644
index 000000000..48b2b703f
--- /dev/null
+++ b/packages/vue-icon/src/write-production-plan/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import WriteProductionPlan from '@opentiny/vue-theme/svgs/write-production-plan.svg'
+
+export default () => svg({ name: 'IconWriteProductionPlan', component: WriteProductionPlan })()
diff --git a/packages/vue-icon/src/xml/index.ts b/packages/vue-icon/src/xml/index.ts
new file mode 100644
index 000000000..d7bf16d42
--- /dev/null
+++ b/packages/vue-icon/src/xml/index.ts
@@ -0,0 +1,15 @@
+/**
+ * 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 { svg } from '@opentiny/vue-common'
+import Xml from '@opentiny/vue-theme/svgs/xml.svg'
+
+export default () => svg({ name: 'IconXml', component: Xml })()
diff --git a/packages/vue-locale/package.json b/packages/vue-locale/package.json
index 5d76a1f48..dfc62c9ac 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.14.0",
+  "version": "3.15.0",
   "description": "",
   "main": "src/index.ts",
   "license": "MIT",
@@ -16,4 +16,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue-locale/src/lang/en.ts b/packages/vue-locale/src/lang/en.ts
index aab7b9dde..8f9fda2c9 100644
--- a/packages/vue-locale/src/lang/en.ts
+++ b/packages/vue-locale/src/lang/en.ts
@@ -113,9 +113,6 @@ export default {
       history: 'History',
       empty: 'Empty'
     },
-    creditCardForm: {
-      submit: 'Submit'
-    },
     crop: {
       cropImage: 'crop image',
       croppedImage: 'Post-Crop Image'
@@ -232,15 +229,6 @@ export default {
       search: 'Quick Search',
       selected: 'Selected'
     },
-    detailpage: {
-      saveButtonText: 'Confirm',
-      cancelButtonText: 'Cancel',
-      localTips: 'Cannot hide all',
-      localTitle: 'Data',
-      valueTitle: 'Click to hide',
-      labelTitle: 'Title',
-      dialogTitle: 'Personalized title'
-    },
     dialogBox: {
       confirm: 'confirm',
       cancel: 'cancel'
@@ -543,7 +531,8 @@ export default {
       selected: 'Selected',
       selectedNum: '{num} selected',
       noSearchData: 'No search results. Please try again',
-      add: 'Add'
+      add: 'Add',
+      collapse: 'Collapse'
     },
     search: {
       placeholder: 'search'
diff --git a/packages/vue-locale/src/lang/zh-CN.ts b/packages/vue-locale/src/lang/zh-CN.ts
index e1b0b1b2d..6a5774d8a 100644
--- a/packages/vue-locale/src/lang/zh-CN.ts
+++ b/packages/vue-locale/src/lang/zh-CN.ts
@@ -116,9 +116,6 @@ export default {
       history: '历史记录',
       empty: '暂无'
     },
-    creditCardForm: {
-      submit: '提交'
-    },
     crop: {
       cropImage: '图片裁剪',
       croppedImage: '裁剪后图像'
@@ -235,15 +232,6 @@ export default {
       search: '辅助查询',
       selected: '已选'
     },
-    detailpage: {
-      saveButtonText: '确定',
-      cancelButtonText: '取消',
-      localTips: '不能全部隐藏',
-      localTitle: '数据',
-      valueTitle: '勾选隐藏',
-      labelTitle: '文本字段',
-      dialogTitle: '个性化标题'
-    },
     dialogBox: {
       confirm: '确定',
       cancel: '取消'
@@ -542,7 +530,8 @@ export default {
       selected: '已选',
       selectedNum: '已选 {num} 个',
       noSearchData: '无相关搜索结果，请重新输入',
-      add: '新增'
+      add: '新增',
+      collapse: '收起'
     },
     search: {
       placeholder: '搜索'
diff --git a/packages/vue-saas-common/package.json b/packages/vue-saas-common/package.json
index db2fbe85f..09edfdc07 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.14.0",
+  "version": "3.15.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": [
@@ -35,4 +35,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 7b5c65efd..a38f11b5e 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue",
   "private": true,
-  "version": "3.14.0",
+  "version": "3.15.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": [
@@ -37,11 +37,9 @@
     "@opentiny/vue-async-flowchart": "workspace:~",
     "@opentiny/vue-autocomplete": "workspace:~",
     "@opentiny/vue-autonavi-map": "workspace:~",
-    "@opentiny/vue-autonavi-map-beta": "workspace:~",
     "@opentiny/vue-avatar": "workspace:~",
     "@opentiny/vue-badge": "workspace:~",
     "@opentiny/vue-baidu-map": "workspace:~",
-    "@opentiny/vue-baidu-map-beta": "workspace:~",
     "@opentiny/vue-breadcrumb": "workspace:~",
     "@opentiny/vue-breadcrumb-item": "workspace:~",
     "@opentiny/vue-bulletin-board": "workspace:~",
@@ -65,48 +63,27 @@
     "@opentiny/vue-cell": "workspace:~",
     "@opentiny/vue-chart": "workspace:~",
     "@opentiny/vue-chart-bar": "workspace:~",
-    "@opentiny/vue-chart-bar-beta": "workspace:~",
-    "@opentiny/vue-chart-beta": "workspace:~",
     "@opentiny/vue-chart-boxplot": "workspace:~",
-    "@opentiny/vue-chart-boxplot-beta": "workspace:~",
     "@opentiny/vue-chart-candle": "workspace:~",
-    "@opentiny/vue-chart-candle-beta": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~",
-    "@opentiny/vue-chart-core-beta": "workspace:~",
     "@opentiny/vue-chart-funnel": "workspace:~",
-    "@opentiny/vue-chart-funnel-beta": "workspace:~",
     "@opentiny/vue-chart-gauge": "workspace:~",
-    "@opentiny/vue-chart-gauge-beta": "workspace:~",
     "@opentiny/vue-chart-graph": "workspace:~",
-    "@opentiny/vue-chart-graph-beta": "workspace:~",
     "@opentiny/vue-chart-heatmap": "workspace:~",
-    "@opentiny/vue-chart-heatmap-beta": "workspace:~",
     "@opentiny/vue-chart-histogram": "workspace:~",
-    "@opentiny/vue-chart-histogram-beta": "workspace:~",
     "@opentiny/vue-chart-line": "workspace:~",
-    "@opentiny/vue-chart-line-beta": "workspace:~",
     "@opentiny/vue-chart-liquidfill": "workspace:~",
-    "@opentiny/vue-chart-liquidfill-beta": "workspace:~",
     "@opentiny/vue-chart-map": "workspace:~",
-    "@opentiny/vue-chart-map-beta": "workspace:~",
     "@opentiny/vue-chart-pie": "workspace:~",
-    "@opentiny/vue-chart-pie-beta": "workspace:~",
+    "@opentiny/vue-chart-process": "workspace:~",
     "@opentiny/vue-chart-radar": "workspace:~",
-    "@opentiny/vue-chart-radar-beta": "workspace:~",
     "@opentiny/vue-chart-ring": "workspace:~",
-    "@opentiny/vue-chart-ring-beta": "workspace:~",
     "@opentiny/vue-chart-sankey": "workspace:~",
-    "@opentiny/vue-chart-sankey-beta": "workspace:~",
     "@opentiny/vue-chart-scatter": "workspace:~",
-    "@opentiny/vue-chart-scatter-beta": "workspace:~",
     "@opentiny/vue-chart-sunburst": "workspace:~",
-    "@opentiny/vue-chart-sunburst-beta": "workspace:~",
     "@opentiny/vue-chart-tree": "workspace:~",
-    "@opentiny/vue-chart-tree-beta": "workspace:~",
     "@opentiny/vue-chart-waterfall": "workspace:~",
-    "@opentiny/vue-chart-waterfall-beta": "workspace:~",
     "@opentiny/vue-chart-wordcloud": "workspace:~",
-    "@opentiny/vue-chart-wordcloud-beta": "workspace:~",
     "@opentiny/vue-checkbox": "workspace:~",
     "@opentiny/vue-checkbox-button": "workspace:~",
     "@opentiny/vue-checkbox-group": "workspace:~",
@@ -122,8 +99,6 @@
     "@opentiny/vue-config-provider": "workspace:~",
     "@opentiny/vue-container": "workspace:~",
     "@opentiny/vue-country": "workspace:~",
-    "@opentiny/vue-credit-card": "workspace:~",
-    "@opentiny/vue-credit-card-form": "workspace:~",
     "@opentiny/vue-crop": "workspace:~",
     "@opentiny/vue-currency": "workspace:~",
     "@opentiny/vue-date-panel": "workspace:~",
@@ -132,7 +107,6 @@
     "@opentiny/vue-date-range": "workspace:~",
     "@opentiny/vue-date-table": "workspace:~",
     "@opentiny/vue-dept": "workspace:~",
-    "@opentiny/vue-detail-page": "workspace:~",
     "@opentiny/vue-dialog-box": "workspace:~",
     "@opentiny/vue-dialog-select": "workspace:~",
     "@opentiny/vue-divider": "workspace:~",
@@ -210,6 +184,7 @@
     "@opentiny/vue-progress": "workspace:~",
     "@opentiny/vue-pull-refresh": "workspace:~",
     "@opentiny/vue-qr-code": "workspace:~",
+    "@opentiny/vue-quarter-panel": "workspace:~",
     "@opentiny/vue-query-builder": "workspace:~",
     "@opentiny/vue-radio": "workspace:~",
     "@opentiny/vue-radio-button": "workspace:~",
@@ -232,12 +207,12 @@
     "@opentiny/vue-signature": "workspace:~",
     "@opentiny/vue-skeleton": "workspace:~",
     "@opentiny/vue-skeleton-item": "workspace:~",
-    "@opentiny/vue-slide-bar": "workspace:~",
     "@opentiny/vue-slider": "workspace:~",
     "@opentiny/vue-slider-button": "workspace:~",
     "@opentiny/vue-slider-button-group": "workspace:~",
     "@opentiny/vue-split": "workspace:~",
     "@opentiny/vue-standard-list-item": "workspace:~",
+    "@opentiny/vue-statistic": "workspace:~",
     "@opentiny/vue-steps": "workspace:~",
     "@opentiny/vue-svg-icon": "workspace:~",
     "@opentiny/vue-switch": "workspace:~",
diff --git a/packages/vue/src/action-menu/package.json b/packages/vue/src/action-menu/package.json
index 6cea6e866..b4b076483 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,7 +21,7 @@
     "@opentiny/vue-dropdown-menu": "workspace:~",
     "@opentiny/vue-dropdown-item": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~"
+    "@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 3a0901b63..8297f958b 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/alert/package.json b/packages/vue/src/alert/package.json
index 0998b8ec7..26308e519 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/amount/package.json b/packages/vue/src/amount/package.json
index 39e6abad4..8608daa89 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -31,4 +31,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/amount/src/mobile-first.vue b/packages/vue/src/amount/src/mobile-first.vue
index 3553fec19..42bf33ae6 100644
--- a/packages/vue/src/amount/src/mobile-first.vue
+++ b/packages/vue/src/amount/src/mobile-first.vue
@@ -245,13 +245,13 @@ import DatePicker from '@opentiny/vue-date-picker'
 import DatePickerMobile from '@opentiny/vue-date-picker-mobile-first'
 import TinyActionSheet from '@opentiny/vue-action-sheet'
 import { IconCoin } from '@opentiny/vue-icon'
-import { setup, props } from '@opentiny/vue-common'
+import { setup, props, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/amount/vue'
 import FilterBox from '@opentiny/vue-filter-box'
 import Radio from '@opentiny/vue-radio'
 import RadioGroup from '@opentiny/vue-radio-group'
 
-export default {
+export default defineComponent({
   inheritAttrs: false,
   components: {
     TinyPopover: Popover,
@@ -307,5 +307,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/amount/src/pc.vue b/packages/vue/src/amount/src/pc.vue
index 8b31d3315..5a9e1f497 100644
--- a/packages/vue/src/amount/src/pc.vue
+++ b/packages/vue/src/amount/src/pc.vue
@@ -130,14 +130,14 @@ import Currency from '@opentiny/vue-currency'
 import Button from '@opentiny/vue-button'
 import DatePicker from '@opentiny/vue-date-picker'
 import { IconCoin } from '@opentiny/vue-icon'
-import { setup, props } from '@opentiny/vue-common'
+import { setup, props, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/amount/vue'
 import FilterBox from '@opentiny/vue-filter-box'
 import Radio from '@opentiny/vue-radio'
 import RadioGroup from '@opentiny/vue-radio-group'
 import '@opentiny/vue-theme/amount/index.less'
 
-export default {
+export default defineComponent({
   inheritAttrs: false,
   components: {
     TinyPopover: Popover,
@@ -191,5 +191,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/anchor/package.json b/packages/vue/src/anchor/package.json
index 0b8654b56..4d79ead47 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "sideEffects": false,
@@ -19,4 +19,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/area/package.json b/packages/vue/src/area/package.json
index ae702709f..d45170da5 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/async-flowchart/package.json b/packages/vue/src/async-flowchart/package.json
index 9f9c55c08..3458688df 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-loading": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/autocomplete/package.json b/packages/vue/src/autocomplete/package.json
index 0ffb6aaad..c825d136e 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/avatar/package.json b/packages/vue/src/avatar/package.json
index a62ebcf60..93df5b3c0 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/badge/package.json b/packages/vue/src/badge/package.json
index 1a899a3bd..ca794ec20 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/breadcrumb-item/package.json b/packages/vue/src/breadcrumb-item/package.json
index dda9b7266..aa4b97c4f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/breadcrumb/package.json b/packages/vue/src/breadcrumb/package.json
index f20ddef36..88e316140 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-breadcrumb-item": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/bulletin-board/package.json b/packages/vue/src/bulletin-board/package.json
index 7419b22c9..d7a434218 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/button-group/package.json b/packages/vue/src/button-group/package.json
index efa21732a..78b85f0c8 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/button/package.json b/packages/vue/src/button/package.json
index abc6a26ab..e73b8087a 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/calendar-bar/package.json b/packages/vue/src/calendar-bar/package.json
index 2f741523c..dc622a15d 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -11,7 +11,6 @@
     "@opentiny/vue-cascader-select": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~"
   },
   "license": "MIT",
@@ -23,4 +22,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/calendar-bar/src/mobile-first.vue b/packages/vue/src/calendar-bar/src/mobile-first.vue
index 96ff7bae4..fc8ddba09 100644
--- a/packages/vue/src/calendar-bar/src/mobile-first.vue
+++ b/packages/vue/src/calendar-bar/src/mobile-first.vue
@@ -43,7 +43,7 @@
         class="h-max flex relative right-full will-change-transform"
         @touchstart="touchstart"
         @touchend="touchend"
-        @touchmove.prevent="touchmove"
+        @touchmove="touchmove"
         :style="{
           'width': ' 300%',
           'transform': `translateX(${state.delta}px)`,
diff --git a/packages/vue/src/calendar-view/package.json b/packages/vue/src/calendar-view/package.json
index 90ec22a9f..31cfa54b2 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.10.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/calendar-view/src/mobile-first.vue b/packages/vue/src/calendar-view/src/mobile-first.vue
index 9524a9202..b1456aec7 100644
--- a/packages/vue/src/calendar-view/src/mobile-first.vue
+++ b/packages/vue/src/calendar-view/src/mobile-first.vue
@@ -346,7 +346,8 @@ export default defineComponent({
     'week-change',
     'year-change',
     'month-change',
-    'date-click'
+    'date-click',
+    'mode-change'
   ],
   components: {
     TinyButton: Button,
diff --git a/packages/vue/src/calendar-view/src/pc.vue b/packages/vue/src/calendar-view/src/pc.vue
index 40812b0a7..f48c9507c 100644
--- a/packages/vue/src/calendar-view/src/pc.vue
+++ b/packages/vue/src/calendar-view/src/pc.vue
@@ -261,7 +261,8 @@ export default defineComponent({
     'week-change',
     'year-change',
     'month-change',
-    'date-click'
+    'date-click',
+    'mode-change'
   ],
   components: {
     TinyButton: Button,
diff --git a/packages/vue/src/calendar/package.json b/packages/vue/src/calendar/package.json
index dd72a0902..a602395f2 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-button": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/card-group/package.json b/packages/vue/src/card-group/package.json
index 19f165748..77abc8802 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -16,4 +16,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/card-template/package.json b/packages/vue/src/card-template/package.json
index 835724435..580eb8d73 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/card/package.json b/packages/vue/src/card/package.json
index 7f212605f..d247dc093 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/carousel-item/package.json b/packages/vue/src/carousel-item/package.json
index 1155f98b1..8ec75433f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/carousel/package.json b/packages/vue/src/carousel/package.json
index 443da06f4..e1d8dbbb7 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/cascader-menu/package.json b/packages/vue/src/cascader-menu/package.json
index b4472b129..7c15c2471 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/cascader-menu/src/pc.vue b/packages/vue/src/cascader-menu/src/pc.vue
index d31568801..1c44cce0f 100644
--- a/packages/vue/src/cascader-menu/src/pc.vue
+++ b/packages/vue/src/cascader-menu/src/pc.vue
@@ -51,14 +51,30 @@ const CascaderMenu = defineComponent({
     },
     index: Number
   },
-  inject: ['panel'],
+  inject: {
+    panel: {
+      value: 'panel',
+      default: null
+    },
+    cascaderRoot: {
+      value: 'cascaderRoot',
+      default: null
+    }
+  },
   setup(props, context) {
     return setup({ props, context, renderless, api, mono: true }) as unknown as ICascaderMenuApi &
       Pick<ICascaderMenuRenderlessParams, 'panel'>
   },
   render() {
-    const renderEmptyText = () => <div class="tiny-cascader-menu__empty-text">{t('ui.cascader.noData')}</div>
-
+    const parentVm = this.cascaderRoot || this.panel || this
+    const noDataSlot = parentVm.slots['no-data'] && parentVm.slots['no-data']()
+    const renderEmptyText = () => {
+      return noDataSlot ? (
+        <div class="tiny-cascader-menu__no-data">{noDataSlot}</div>
+      ) : (
+        <div class="tiny-cascader-menu__empty-text">{t('ui.cascader.noData')}</div>
+      )
+    }
     const renderNodeList = renderNodeListFunc(this)
 
     const { state } = this
diff --git a/packages/vue/src/cascader-mobile/package.json b/packages/vue/src/cascader-mobile/package.json
index c11f218cb..ea008eca5 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "//postversion": "pnpm build"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/cascader-node/package.json b/packages/vue/src/cascader-node/package.json
index e1918147f..73fb3a700 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/cascader-panel/package.json b/packages/vue/src/cascader-panel/package.json
index fc4efa93d..7ac9f7747 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/cascader-select/package.json b/packages/vue/src/cascader-select/package.json
index 226bfb655..a2e30de53 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -11,7 +11,6 @@
     "@opentiny/vue-action-sheet": "workspace:~",
     "@opentiny/vue-button": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~"
   },
   "license": "MIT",
@@ -23,4 +22,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/cascader-select/src/mobile-first.vue b/packages/vue/src/cascader-select/src/mobile-first.vue
index 0f61c6d92..59e9cfa56 100644
--- a/packages/vue/src/cascader-select/src/mobile-first.vue
+++ b/packages/vue/src/cascader-select/src/mobile-first.vue
@@ -6,6 +6,9 @@
       :visible="state.actionSheetVisible"
       @update:visible="state.actionSheetVisible = $event"
     >
+      <template #header-left>
+        <slot name="header-left"></slot>
+      </template>
       <div
         data-tag="tiny-mobile-cascader-select-body"
         class="w-full h-max rounded-t-lg bg-color-bg-1 select-none overflow-hidden"
@@ -69,6 +72,7 @@
     </tiny-action-sheet>
   </div>
 </template>
+
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/cascader-select/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
@@ -106,7 +110,7 @@ export default defineComponent({
     'type'
   ],
   setup(props, context) {
-    return setup({ props, context, renderless, api, mono: true, classes })
+    return setup({ props, context, renderless, api, classes })
   }
 })
 </script>
diff --git a/packages/vue/src/cascader-view/package.json b/packages/vue/src/cascader-view/package.json
index 4889bf172..4dd1e51cc 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/cascader/package.json b/packages/vue/src/cascader/package.json
index a073a5c08..1ff55d7c6 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -29,4 +29,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/cell/package.json b/packages/vue/src/cell/package.json
index edbbf88c7..d8a68f49b 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/autonavi-map/index.ts b/packages/vue/src/chart-beta/autonavi-map/index.ts
deleted file mode 100644
index 1dee2c31d..000000000
--- a/packages/vue/src/chart-beta/autonavi-map/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import AutonaviMap from './src/autonavi-map.vue'
-
-AutonaviMap.install = function (Vue: any) {
-  Vue.component(AutonaviMap.name, AutonaviMap)
-}
-
-export { AutonaviMap }
-
-export default AutonaviMap
diff --git a/packages/vue/src/chart-beta/autonavi-map/package.json b/packages/vue/src/chart-beta/autonavi-map/package.json
deleted file mode 100644
index 404a81bb3..000000000
--- a/packages/vue/src/chart-beta/autonavi-map/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "@opentiny/vue-autonavi-map-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-chart-core": "workspace:~"
-  },
-  "license": "MIT"
-}
diff --git a/packages/vue/src/chart-beta/autonavi-map/src/AMapCoordSys.ts b/packages/vue/src/chart-beta/autonavi-map/src/AMapCoordSys.ts
deleted file mode 100644
index c5bc13d3e..000000000
--- a/packages/vue/src/chart-beta/autonavi-map/src/AMapCoordSys.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as echarts from 'echarts'
-
-export default class AMapCoordSys {
-  constructor(amap, api) {
-    this._amap = amap
-    this.dimensions = ['lng', 'lat']
-    this._mapOffset = [0, 0]
-    this._api = api
-  }
-
-  static create(ecModel, api) {
-    let tinySys
-    let root = api.getDom()
-
-    ecModel.eachComponent('amap', (tinyModel) => {
-      let viewportRoot = api.getZr().painter.getViewportRoot()
-
-      if (typeof window.AMap === 'undefined') {
-        throw new TypeError('AMap api is not loaded')
-      }
-
-      if (tinySys) {
-        throw new Error('Only one amap component can exist')
-      }
-
-      if (!tinyModel.__amap) {
-        let amapRoot = root.querySelector('.ec-extension-amap')
-
-        if (amapRoot) {
-          viewportRoot.style.left = '0px'
-          viewportRoot.style.top = '0px'
-          root.removeChild(amapRoot)
-        }
-        amapRoot = document.createElement('div')
-        amapRoot.style.cssText = 'width:100%;height:100%'
-
-        amapRoot.classList.add('ec-extension-amap')
-        root.appendChild(amapRoot)
-
-        let options = tinyModel.get() || {}
-
-        options = tinyModel.__options = echarts.util.clone(options)
-
-        let amap = (tinyModel.__amap = new window.AMap.Map(amapRoot, options))
-
-        let layer = (tinyModel.__layer = new window.AMap.CustomLayer(viewportRoot))
-
-        layer.setMap(amap)
-      }
-
-      let tinyApm = tinyModel.getAMap()
-      let tinyOut = tinyModel.getLayer()
-      tinyOut.hide()
-
-      let tinyZoom = tinyApm.getZoom()
-      let tinyCenter = tinyApm.getCenter()
-
-      tinySys = new AMapCoordSys(tinyApm, api)
-      tinySys.setMapOffset(tinyModel.__mapOffset || [0, 0])
-      tinySys.setZoom(tinyZoom)
-      tinySys.setCenter([tinyCenter.lng, tinyCenter.lat])
-      tinyModel.coordinateSystem = tinySys
-      tinyOut.show()
-    })
-
-    ecModel.eachSeries((seriesModel) => {
-      if (seriesModel.get('coordinateSystem') === 'amap') {
-        seriesModel.coordinateSystem = tinySys
-      }
-    })
-  }
-
-  setZoom(zoom) {
-    this._zoom = zoom
-  }
-
-  setCenter(center) {
-    this._center = this._amap.lnglatToPixel(center)
-  }
-
-  setMapOffset(mapOffset) {
-    this._mapOffset = mapOffset
-  }
-
-  getAMap() {
-    return this._amap
-  }
-
-  dataToPoint(data) {
-    let point = new window.AMap.LngLat(data[0], data[1])
-    let px = this._amap.lngLatToContainer(point)
-    let mapOffset = this._mapOffset
-
-    return [px.x - mapOffset[0], px.y - mapOffset[1]]
-  }
-
-  pointToData(pt) {
-    let mapOffset = this._mapOffset
-
-    pt = this._amap.containerToLngLat({
-      x: pt[0] + mapOffset[0],
-      y: pt[1] + mapOffset[1]
-    })
-
-    return [pt.lng, pt.lat]
-  }
-
-  getViewRect(): any {
-    let api = this._api
-
-    return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight())
-  }
-
-  getRoamTransform() {
-    return echarts.matrix.create()
-  }
-}
diff --git a/packages/vue/src/chart-beta/autonavi-map/src/AMapModel.ts b/packages/vue/src/chart-beta/autonavi-map/src/AMapModel.ts
deleted file mode 100644
index 2c14e26b9..000000000
--- a/packages/vue/src/chart-beta/autonavi-map/src/AMapModel.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as echarts from 'echarts'
-
-const equal = (x, y) => x && y && x[0] === y[0] && x[1] === y[1]
-
-export default echarts.extendComponentModel({
-  type: 'amap',
-
-  getAMap() {
-    return this.__amap
-  },
-
-  getLayer() {
-    return this.__layer
-  },
-
-  getMapOptions() {
-    return this.__options
-  },
-
-  setCenterAndZoom(center, zoom) {
-    this.option.center = center
-    this.option.zoom = zoom
-  },
-
-  centerOrZoomChanged(center, zoom) {
-    let option = this.option
-    return !(equal(center, option.center) && zoom === option.zoom)
-  },
-
-  defaultOption: {
-    center: [116.397475, 39.908695],
-    zoom: 4
-  }
-}) as any
diff --git a/packages/vue/src/chart-beta/autonavi-map/src/AMapView.ts b/packages/vue/src/chart-beta/autonavi-map/src/AMapView.ts
deleted file mode 100644
index 40d481bae..000000000
--- a/packages/vue/src/chart-beta/autonavi-map/src/AMapView.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as echarts from 'echarts'
-
-const setLaterFunc = (ctx) => {
-  ctx.later = () => {
-    ctx.lock = false
-    if (ctx.args) {
-      ctx.wrapperFn.apply(ctx.context, ctx.args)
-      ctx.args = false
-    }
-  }
-}
-
-const setWrapperFunc = (ctx) => {
-  ctx.wrapperFn = function () {
-    if (ctx.lock) {
-      // eslint-disable-next-line prefer-rest-params
-      ctx.args = arguments
-    } else {
-      // eslint-disable-next-line prefer-rest-params
-      ctx.fn.apply(ctx.context, arguments)
-      setTimeout(ctx.later, ctx.time)
-      ctx.lock = true
-    }
-  }
-}
-
-const throttle = (fn, time, context) => {
-  let ctx = {
-    fn,
-    time,
-    context,
-    lock: undefined,
-    args: undefined,
-    wrapperFn: undefined,
-    later: undefined
-  }
-
-  setLaterFunc(ctx)
-  setWrapperFunc(ctx)
-
-  return ctx.wrapperFn
-}
-
-const backupListener = ({ _vm, throttledResizeHandler, zoomEndHandler }) => {
-  _vm._oldZoomEndHandler = zoomEndHandler
-  _vm._oldResizeHandler = throttledResizeHandler
-}
-
-const addListener = ({ aMapModel, amap, throttledResizeHandler, zoomEndHandler }) => {
-  amap.on('zoomend', zoomEndHandler)
-  amap.on('moveend', zoomEndHandler)
-  amap.on('complete', zoomEndHandler)
-  aMapModel.get('resizeEnable') && amap.on('resize', throttledResizeHandler)
-}
-
-const removeListener = ({ _vm, aMapModel, amap }) => {
-  amap.off('zoomend', _vm._oldZoomEndHandler)
-  amap.off('moveend', _vm._oldZoomEndHandler)
-  amap.off('complete', _vm._oldZoomEndHandler)
-  aMapModel.get('resizeEnable') && amap.off('resize', _vm._oldResizeHandler)
-}
-
-const getResizeHandler = ({ _vm, api, moveHandler }) =>
-  function (e) {
-    echarts.getInstanceByDom(api.getDom()).resize()
-    moveHandler.call(_vm, e)
-  }
-
-// prettier-ignore
-const getZoomEndHandler =
-  ({ api, rendering }) =>
-    () => {
-      if (rendering) {
-        return
-      }
-
-      api.dispatchAction({
-        type: 'amapRoam'
-      })
-    }
-
-const getMoveHandler = ({ aMapModel, api, coordSys, rendering, viewportRoot }) =>
-  function () {
-    if (rendering) {
-      return
-    }
-
-    let offsetEl = viewportRoot.parentNode.parentNode.parentNode
-    let mapOffset = [-parseInt(offsetEl.style.left, 10) || 0, -parseInt(offsetEl.style.top, 10) || 0]
-
-    aMapModel.__mapOffset = mapOffset
-    coordSys.setMapOffset(mapOffset)
-    viewportRoot.style.left = mapOffset[0] + 'px'
-    viewportRoot.style.top = mapOffset[1] + 'px'
-
-    api.dispatchAction({
-      type: 'amapRoam'
-    })
-  }
-
-export default echarts.extendComponentView({
-  type: 'amap',
-
-  render(aMapModel, ecModel, api) {
-    let rendering = true
-    let amap = aMapModel.getAMap()
-    let viewportRoot = api.getZr().painter.getViewportRoot()
-    let coordSys = aMapModel.coordinateSystem
-
-    let moveHandler = getMoveHandler({ aMapModel, api, coordSys, rendering, viewportRoot })
-    let zoomEndHandler = getZoomEndHandler({ api, rendering })
-    let resizeHandler = getResizeHandler({ _vm: this, api, moveHandler })
-    let throttledResizeHandler = throttle(resizeHandler, 300, amap)
-
-    removeListener({ _vm: this, aMapModel, amap })
-    addListener({ aMapModel, amap, throttledResizeHandler, zoomEndHandler })
-    backupListener({ _vm: this, throttledResizeHandler, zoomEndHandler })
-
-    rendering = false
-  }
-})
diff --git a/packages/vue/src/chart-beta/autonavi-map/src/amap.ts b/packages/vue/src/chart-beta/autonavi-map/src/amap.ts
deleted file mode 100644
index 6f883e84b..000000000
--- a/packages/vue/src/chart-beta/autonavi-map/src/amap.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as echarts from 'echarts'
-import AMapCoordSys from './AMapCoordSys'
-import './AMapModel.js'
-import './AMapView.js'
-
-echarts.registerCoordinateSystem('amap', AMapCoordSys)
-
-echarts.registerAction(
-  {
-    type: 'amapRoam',
-    event: 'amapRoam',
-    update: 'updateLayout'
-  },
-  (payload, ecModel) => {
-    ecModel.eachComponent('amap', (aMapModel) => {
-      let amap = aMapModel.getAMap()
-      let center = amap.getCenter()
-      aMapModel.setCenterAndZoom([center.lng, center.lat], amap.getZoom())
-    })
-  }
-)
diff --git a/packages/vue/src/chart-beta/baidu-map/index.ts b/packages/vue/src/chart-beta/baidu-map/index.ts
deleted file mode 100644
index cba974a4d..000000000
--- a/packages/vue/src/chart-beta/baidu-map/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import BaiduMap from './src/baidu-map.vue'
-
-BaiduMap.install = function (Vue: any) {
-  Vue.component(BaiduMap.name, BaiduMap)
-}
-
-export { BaiduMap }
-
-export default BaiduMap
diff --git a/packages/vue/src/chart-beta/baidu-map/package.json b/packages/vue/src/chart-beta/baidu-map/package.json
deleted file mode 100644
index c8a2f628e..000000000
--- a/packages/vue/src/chart-beta/baidu-map/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "@opentiny/vue-baidu-map-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-chart-core": "workspace:~"
-  },
-  "license": "MIT"
-}
diff --git a/packages/vue/src/chart-beta/chart-bar/index.ts b/packages/vue/src/chart-beta/chart-bar/index.ts
deleted file mode 100644
index 1387819e0..000000000
--- a/packages/vue/src/chart-beta/chart-bar/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChartBar from './src/chart-bar.vue'
-
-ChartBar.install = function (Vue: any) {
-  Vue.component(ChartBar.name, ChartBar)
-}
-
-export { ChartBar }
-
-export default ChartBar
diff --git a/packages/vue/src/chart-beta/chart-boxplot/index.ts b/packages/vue/src/chart-beta/chart-boxplot/index.ts
deleted file mode 100644
index c0a2694e2..000000000
--- a/packages/vue/src/chart-beta/chart-boxplot/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChartBoxplot from './src/chart-boxplot.vue'
-
-ChartBoxplot.install = function (Vue: any) {
-  Vue.component(ChartBoxplot.name, ChartBoxplot)
-}
-
-export { ChartBoxplot }
-
-export default ChartBoxplot
diff --git a/packages/vue/src/chart-beta/chart-boxplot/package.json b/packages/vue/src/chart-beta/chart-boxplot/package.json
deleted file mode 100644
index fcc13e219..000000000
--- a/packages/vue/src/chart-beta/chart-boxplot/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-boxplot-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-candle/index.ts b/packages/vue/src/chart-beta/chart-candle/index.ts
deleted file mode 100644
index 40af4f74c..000000000
--- a/packages/vue/src/chart-beta/chart-candle/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChartCandle from './src/chart-candle.vue'
-
-ChartCandle.install = function (Vue: any) {
-  Vue.component(ChartCandle.name, ChartCandle)
-}
-
-export { ChartCandle }
-
-export default ChartCandle
diff --git a/packages/vue/src/chart-beta/chart-candle/package.json b/packages/vue/src/chart-beta/chart-candle/package.json
deleted file mode 100644
index 662d96185..000000000
--- a/packages/vue/src/chart-beta/chart-candle/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-candle-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/index.ts b/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/index.ts
deleted file mode 100644
index 1a78e0a09..000000000
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import font from './font';
-import lineType from './lineType';
-import space from './space';
-import border from './border';
-import size from './size';
-import borderRadius from './borderRadius';
-
-const globalToken = {
-  ...font,
-  ...lineType,
-  ...space,
-  ...border,
-  ...size,
-  ...borderRadius,
-};
-
-export default globalToken;
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/index.ts b/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/index.ts
deleted file mode 100644
index 063ba6c14..000000000
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import color from '../color';
-import getGlobalToken from './getGlobalToken';
-import getAliasToken from './getAliasToken';
-import getModelToken from './getModelToken';
-import getChartsToken from './chartsToken';
-
-/**
- * 获取相应的主题的token
- * @param {string} themeName  主题名称
- */
-function getToken(themeName) {
-  const globalToken = getGlobalToken(themeName);
-  const aliasToken = getAliasToken(themeName, globalToken);
-  const modelToken = getModelToken(aliasToken);
-  const chartsToken = getChartsToken(aliasToken);
-  return {
-    ...color[themeName].colorSet,
-    ...modelToken,
-    ...chartsToken,
-  };
-}
-
-export default getToken;
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/mergeToken.ts b/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/mergeToken.ts
deleted file mode 100644
index 6929c0ec4..000000000
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/mergeToken.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { aliasTokenMap } from './getAliasToken';
-import getGlobalToken from './getGlobalToken';
-import getModelToken from './getModelToken';
-import getChartsToken from './chartsToken';
-import { TOKENCHARTNAMES } from '../constants';
-import color from '../color';
-import merge from '../../../util/merge';
-import cloneDeep from '../../../util/cloneDeep';
-
-function getBasicToken(name, config) {
-  return {
-    ...getGlobalToken(name),
-    ...config,
-  };
-}
-
-function getMapToken(name, config) {
-  return {
-    ...aliasTokenMap[name](config),
-    ...config,
-  };
-}
-
-function getConfigModelToken(config) {
-  return {
-    ...getModelToken(config),
-    ...config,
-  };
-}
-
-function mergeSpecialToken(name, chartsConfig, config) {
-  TOKENCHARTNAMES.forEach(item => {
-    if (config[item]) merge(chartsConfig, config[item]);
-  });
-  // 针对colorState特殊处理
-  const { colorState } = config;
-  if (colorState) {
-    const newColorState = merge(cloneDeep(color[name].colorSet.colorState), colorState);
-    return { ...chartsConfig, colorState: newColorState };
-  }
-  return { ...chartsConfig };
-}
-
-/**
- *
- * @param {string} name  传入的主题名称
- * @param {object} config   传入的主题配置
- */
-
-export default function mergeToken(name, config) {
-  const basicConfig = getBasicToken(name, config);
-  const mapConfig = getMapToken(name, basicConfig);
-  const modelConfig = getConfigModelToken(mapConfig);
-  const chartsConfig = getChartsToken(mapConfig);
-  const specialConfig = mergeSpecialToken(name, chartsConfig, config);
-  return {
-    colorGroup: basicConfig.colorGroup,
-    ...modelConfig,
-    ...specialConfig,
-  };
-}
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/bpit/index.ts b/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/bpit/index.ts
deleted file mode 100644
index e8675651f..000000000
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/bpit/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { THEMES } from '../../constants';
-import getToken from '../../factory';
-
-const bpitLight = getToken(THEMES.BPIT_LIGHT);
-
-const bpitDark = getToken(THEMES.BPIT_DARK);
-
-export { bpitLight, bpitDark };
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/cloud/index.ts b/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/cloud/index.ts
deleted file mode 100644
index b4d36ce4a..000000000
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/cloud/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { THEMES } from '../../constants';
-import getToken from '../../factory';
-
-const cloudLight = getToken(THEMES.CLOUD_LIGHT);
-
-const cloudDark = getToken(THEMES.CLOUD_DARK);
-
-export { cloudLight, cloudDark };
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/hdesign/index.ts b/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/hdesign/index.ts
deleted file mode 100644
index d6f909659..000000000
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/hdesign/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { THEMES } from '../../constants';
-import getToken from '../../factory';
-
-const hdesignLight = getToken(THEMES.HDESIGN_LIGHT);
-
-const hdesignDark = getToken(THEMES.HDESIGN_DARK);
-
-export { hdesignLight, hdesignDark };
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/ict/index.ts b/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/ict/index.ts
deleted file mode 100644
index 5b789971f..000000000
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/ict/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { THEMES } from '../../constants';
-import getToken from '../../factory';
-
-const ictLight = getToken(THEMES.LIGHT);
-
-const ictDark = getToken(THEMES.DARK);
-
-export { ictLight, ictDark };
diff --git a/packages/vue/src/chart-beta/chart-core/index.ts b/packages/vue/src/chart-beta/chart-core/index.ts
deleted file mode 100644
index 5638e1d1a..000000000
--- a/packages/vue/src/chart-beta/chart-core/index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import Core from './src/chart-core'
-import { getFormatted, cloneDeep, getStackMap, get, set, merge, getMapJSON, htmlHandler } from './common/util'
-import { isNull, isObject } from './common/type'
-import { deepCopy } from './utils/deep-clone'
-import { getRows, getYAxis, getTooltip } from './utils/options'
-import { itemPoint, itemLabel, itemContent, HEAT_MAP_COLOR } from './common/constants'
-import { isDefined } from './utils/type'
-
-Core.install = function (Vue: any) {
-  Vue.component(Core.name, Core)
-}
-
-export default Core
-export {
-  getFormatted,
-  cloneDeep,
-  getStackMap,
-  get,
-  set,
-  merge,
-  getMapJSON,
-  getRows,
-  getYAxis,
-  getTooltip,
-  isNull,
-  isObject,
-  deepCopy,
-  itemPoint,
-  itemLabel,
-  itemContent,
-  isDefined,
-  htmlHandler,
-  HEAT_MAP_COLOR
-}
diff --git a/packages/vue/src/chart-beta/chart-core/package.json b/packages/vue/src/chart-beta/chart-core/package.json
deleted file mode 100644
index 9c1cbc4f7..000000000
--- a/packages/vue/src/chart-beta/chart-core/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-core-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {},
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-funnel/index.ts b/packages/vue/src/chart-beta/chart-funnel/index.ts
deleted file mode 100644
index ba2b882a5..000000000
--- a/packages/vue/src/chart-beta/chart-funnel/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartFunnel from './src/chart-funnel.vue'
-
-ChartFunnel.install = function (Vue: any) {
-  Vue.component(ChartFunnel.name, ChartFunnel)
-}
-
-export { ChartFunnel }
-export default ChartFunnel
diff --git a/packages/vue/src/chart-beta/chart-funnel/package.json b/packages/vue/src/chart-beta/chart-funnel/package.json
deleted file mode 100644
index e28edb3c8..000000000
--- a/packages/vue/src/chart-beta/chart-funnel/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-funnel-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-gauge/index.ts b/packages/vue/src/chart-beta/chart-gauge/index.ts
deleted file mode 100644
index b7b8334a7..000000000
--- a/packages/vue/src/chart-beta/chart-gauge/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartGauge from './src/chart-gauge.vue'
-
-ChartGauge.install = function (Vue: any) {
-  Vue.component(ChartGauge.name, ChartGauge)
-}
-
-export { ChartGauge }
-export default ChartGauge
diff --git a/packages/vue/src/chart-beta/chart-gauge/package.json b/packages/vue/src/chart-beta/chart-gauge/package.json
deleted file mode 100644
index d6fdfaab7..000000000
--- a/packages/vue/src/chart-beta/chart-gauge/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-gauge-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-graph/index.ts b/packages/vue/src/chart-beta/chart-graph/index.ts
deleted file mode 100644
index b2bfc611e..000000000
--- a/packages/vue/src/chart-beta/chart-graph/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChartGraph from './src/chart-graph.vue'
-
-ChartGraph.install = function (Vue: any) {
-  Vue.component(ChartGraph.name, ChartGraph)
-}
-
-export { ChartGraph }
-
-export default ChartGraph
diff --git a/packages/vue/src/chart-beta/chart-graph/package.json b/packages/vue/src/chart-beta/chart-graph/package.json
deleted file mode 100644
index 7619cd14f..000000000
--- a/packages/vue/src/chart-beta/chart-graph/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-graph-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-heatmap/index.ts b/packages/vue/src/chart-beta/chart-heatmap/index.ts
deleted file mode 100644
index e8799697e..000000000
--- a/packages/vue/src/chart-beta/chart-heatmap/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChartHeatmap from './src/chart-heatmap.vue'
-
-ChartHeatmap.install = function (Vue: any) {
-  Vue.component(ChartHeatmap.name, ChartHeatmap)
-}
-
-export { ChartHeatmap }
-
-export default ChartHeatmap
diff --git a/packages/vue/src/chart-beta/chart-heatmap/package.json b/packages/vue/src/chart-beta/chart-heatmap/package.json
deleted file mode 100644
index 029168748..000000000
--- a/packages/vue/src/chart-beta/chart-heatmap/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-heatmap-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-histogram/index.ts b/packages/vue/src/chart-beta/chart-histogram/index.ts
deleted file mode 100644
index 5c9660dd0..000000000
--- a/packages/vue/src/chart-beta/chart-histogram/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartHistogram from './src/chart-histogram.vue'
-
-ChartHistogram.install = function (Vue: any) {
-  Vue.component(ChartHistogram.name, ChartHistogram)
-}
-
-export { ChartHistogram }
-export default ChartHistogram
diff --git a/packages/vue/src/chart-beta/chart-histogram/package.json b/packages/vue/src/chart-beta/chart-histogram/package.json
deleted file mode 100644
index 151f0d8b0..000000000
--- a/packages/vue/src/chart-beta/chart-histogram/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-histogram-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-line/index.ts b/packages/vue/src/chart-beta/chart-line/index.ts
deleted file mode 100644
index b419bbef6..000000000
--- a/packages/vue/src/chart-beta/chart-line/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartLine from './src/chart-line.vue'
-
-ChartLine.install = function (Vue: any) {
-  Vue.component(ChartLine.name, ChartLine)
-}
-
-export { ChartLine }
-export default ChartLine
diff --git a/packages/vue/src/chart-beta/chart-line/package.json b/packages/vue/src/chart-beta/chart-line/package.json
deleted file mode 100644
index 716e1cc7c..000000000
--- a/packages/vue/src/chart-beta/chart-line/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-line-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-liquidfill/index.ts b/packages/vue/src/chart-beta/chart-liquidfill/index.ts
deleted file mode 100644
index e2be81402..000000000
--- a/packages/vue/src/chart-beta/chart-liquidfill/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartLiquidfill from './src/chart-liquidfill.vue'
-
-ChartLiquidfill.install = function (Vue: any) {
-  Vue.component(ChartLiquidfill.name, ChartLiquidfill)
-}
-
-export { ChartLiquidfill }
-export default ChartLiquidfill
diff --git a/packages/vue/src/chart-beta/chart-liquidfill/package.json b/packages/vue/src/chart-beta/chart-liquidfill/package.json
deleted file mode 100644
index 8edcbeab2..000000000
--- a/packages/vue/src/chart-beta/chart-liquidfill/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-liquidfill-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-map/index.ts b/packages/vue/src/chart-beta/chart-map/index.ts
deleted file mode 100644
index 33e7cf63a..000000000
--- a/packages/vue/src/chart-beta/chart-map/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartMap from './src/chart-map.vue'
-
-ChartMap.install = function (Vue: any) {
-  Vue.component(ChartMap.name, ChartMap)
-}
-
-export { ChartMap }
-export default ChartMap
diff --git a/packages/vue/src/chart-beta/chart-map/package.json b/packages/vue/src/chart-beta/chart-map/package.json
deleted file mode 100644
index 369578aed..000000000
--- a/packages/vue/src/chart-beta/chart-map/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-map-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-pie/index.ts b/packages/vue/src/chart-beta/chart-pie/index.ts
deleted file mode 100644
index 70df8254a..000000000
--- a/packages/vue/src/chart-beta/chart-pie/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartPie from './src/chart-pie.vue'
-
-ChartPie.install = function (Vue: any) {
-  Vue.component(ChartPie.name, ChartPie)
-}
-
-export { ChartPie }
-export default ChartPie
diff --git a/packages/vue/src/chart-beta/chart-pie/package.json b/packages/vue/src/chart-beta/chart-pie/package.json
deleted file mode 100644
index 864bca147..000000000
--- a/packages/vue/src/chart-beta/chart-pie/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-pie-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-radar/index.ts b/packages/vue/src/chart-beta/chart-radar/index.ts
deleted file mode 100644
index dc296bd1a..000000000
--- a/packages/vue/src/chart-beta/chart-radar/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartRadar from './src/chart-radar.vue'
-
-ChartRadar.install = function (Vue: any) {
-  Vue.component(ChartRadar.name, ChartRadar)
-}
-
-export { ChartRadar }
-export default ChartRadar
diff --git a/packages/vue/src/chart-beta/chart-radar/package.json b/packages/vue/src/chart-beta/chart-radar/package.json
deleted file mode 100644
index 98f5a9529..000000000
--- a/packages/vue/src/chart-beta/chart-radar/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-radar-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-ring/index.ts b/packages/vue/src/chart-beta/chart-ring/index.ts
deleted file mode 100644
index 643b0008f..000000000
--- a/packages/vue/src/chart-beta/chart-ring/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartRing from './src/chart-ring.vue'
-
-ChartRing.install = function (Vue: any) {
-  Vue.component(ChartRing.name, ChartRing)
-}
-
-export { ChartRing }
-export default ChartRing
diff --git a/packages/vue/src/chart-beta/chart-ring/package.json b/packages/vue/src/chart-beta/chart-ring/package.json
deleted file mode 100644
index 23e739d93..000000000
--- a/packages/vue/src/chart-beta/chart-ring/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-ring-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-sankey/index.ts b/packages/vue/src/chart-beta/chart-sankey/index.ts
deleted file mode 100644
index 23c6b9e5b..000000000
--- a/packages/vue/src/chart-beta/chart-sankey/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartSankey from './src/chart-sankey.vue'
-
-ChartSankey.install = function (Vue: any) {
-  Vue.component(ChartSankey.name, ChartSankey)
-}
-
-export { ChartSankey }
-export default ChartSankey
diff --git a/packages/vue/src/chart-beta/chart-sankey/package.json b/packages/vue/src/chart-beta/chart-sankey/package.json
deleted file mode 100644
index 043709982..000000000
--- a/packages/vue/src/chart-beta/chart-sankey/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-sankey-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-scatter/index.ts b/packages/vue/src/chart-beta/chart-scatter/index.ts
deleted file mode 100644
index c0dbe09df..000000000
--- a/packages/vue/src/chart-beta/chart-scatter/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartScatter from './src/chart-scatter.vue'
-
-ChartScatter.install = function (Vue: any) {
-  Vue.component(ChartScatter.name, ChartScatter)
-}
-
-export { ChartScatter }
-export default ChartScatter
diff --git a/packages/vue/src/chart-beta/chart-scatter/package.json b/packages/vue/src/chart-beta/chart-scatter/package.json
deleted file mode 100644
index eeb66bc97..000000000
--- a/packages/vue/src/chart-beta/chart-scatter/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-scatter-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-sunburst/index.ts b/packages/vue/src/chart-beta/chart-sunburst/index.ts
deleted file mode 100644
index 1354e3764..000000000
--- a/packages/vue/src/chart-beta/chart-sunburst/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChartSunburst from './src/chart-sunburst.vue'
-
-ChartSunburst.install = function (Vue: any) {
-  Vue.component(ChartSunburst.name, ChartSunburst)
-}
-
-export { ChartSunburst }
-
-export default ChartSunburst
diff --git a/packages/vue/src/chart-beta/chart-sunburst/package.json b/packages/vue/src/chart-beta/chart-sunburst/package.json
deleted file mode 100644
index 3a753a160..000000000
--- a/packages/vue/src/chart-beta/chart-sunburst/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-sunburst-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-tree/index.ts b/packages/vue/src/chart-beta/chart-tree/index.ts
deleted file mode 100644
index a6c6f74a3..000000000
--- a/packages/vue/src/chart-beta/chart-tree/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import ChartTree from './src/chart-tree.vue'
-
-ChartTree.install = function (Vue: any) {
-  Vue.component(ChartTree.name, ChartTree)
-}
-
-export { ChartTree }
-
-export default ChartTree
diff --git a/packages/vue/src/chart-beta/chart-tree/package.json b/packages/vue/src/chart-beta/chart-tree/package.json
deleted file mode 100644
index bd7c4e137..000000000
--- a/packages/vue/src/chart-beta/chart-tree/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-tree-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-waterfall/index.ts b/packages/vue/src/chart-beta/chart-waterfall/index.ts
deleted file mode 100644
index 2d6b8d50a..000000000
--- a/packages/vue/src/chart-beta/chart-waterfall/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartWaterfall from './src/chart-waterfall.vue'
-
-ChartWaterfall.install = function (Vue: any) {
-  Vue.component(ChartWaterfall.name, ChartWaterfall)
-}
-
-export { ChartWaterfall }
-export default ChartWaterfall
diff --git a/packages/vue/src/chart-beta/chart-waterfall/package.json b/packages/vue/src/chart-beta/chart-waterfall/package.json
deleted file mode 100644
index 2dccbad77..000000000
--- a/packages/vue/src/chart-beta/chart-waterfall/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-waterfall-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-wordcloud/index.ts b/packages/vue/src/chart-beta/chart-wordcloud/index.ts
deleted file mode 100644
index e34990337..000000000
--- a/packages/vue/src/chart-beta/chart-wordcloud/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ChartWordcloud from './src/chart-wordcloud.vue'
-
-ChartWordcloud.install = function (Vue: any) {
-  Vue.component(ChartWordcloud.name, ChartWordcloud)
-}
-
-export { ChartWordcloud }
-export default ChartWordcloud
diff --git a/packages/vue/src/chart-beta/chart-wordcloud/package.json b/packages/vue/src/chart-beta/chart-wordcloud/package.json
deleted file mode 100644
index 1b3f88fc5..000000000
--- a/packages/vue/src/chart-beta/chart-wordcloud/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-wordcloud-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {},
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
-  },
-  "license": "MIT"
-}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/index.ts b/packages/vue/src/chart-beta/index.ts
deleted file mode 100644
index f3adbc3a8..000000000
--- a/packages/vue/src/chart-beta/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Chart from './src/index'
-import { version } from './package.json'
-
-Chart.install = function (Vue) {
-  Vue.component(Chart.name, Chart)
-}
-
-Chart.version = version
-
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Chart.install(window.Vue)
-  }
-}
-
-export default Chart
diff --git a/packages/vue/src/chart-beta/package.json b/packages/vue/src/chart-beta/package.json
deleted file mode 100644
index 0f3800f37..000000000
--- a/packages/vue/src/chart-beta/package.json
+++ /dev/null
@@ -1,54 +0,0 @@
-{
-  "name": "@opentiny/vue-chart-beta",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "files": [
-    "index.js",
-    "lib",
-    "index.d.ts",
-    "src"
-  ],
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "echarts": "5.4.1",
-    "@opentiny/vue-chart-bar-beta": "workspace:~",
-    "@opentiny/vue-chart-core-beta": "workspace:~",
-    "@opentiny/vue-chart-histogram-beta": "workspace:~",
-    "@opentiny/vue-chart-line-beta": "workspace:~",
-    "@opentiny/vue-chart-pie-beta": "workspace:~",
-    "@opentiny/vue-chart-radar-beta": "workspace:~",
-    "@opentiny/vue-chart-ring-beta": "workspace:~",
-    "@opentiny/vue-chart-waterfall-beta": "workspace:~",
-    "@opentiny/vue-chart-funnel-beta": "workspace:~",
-    "@opentiny/vue-chart-gauge-beta": "workspace:~",
-    "@opentiny/vue-chart-scatter-beta": "workspace:~",
-    "@opentiny/vue-chart-tree-beta": "workspace:~",
-    "@opentiny/vue-chart-sankey-beta": "workspace:~",
-    "@opentiny/vue-chart-candle-beta": "workspace:~",
-    "@opentiny/vue-chart-heatmap-beta": "workspace:~",
-    "@opentiny/vue-chart-liquidfill-beta": "workspace:~",
-    "@opentiny/vue-chart-wordcloud-beta": "workspace:~",
-    "@opentiny/vue-chart-map-beta": "workspace:~",
-    "@opentiny/vue-chart-boxplot-beta": "workspace:~",
-    "@opentiny/vue-autonavi-map-beta": "workspace:~",
-    "@opentiny/vue-baidu-map-beta": "workspace:~",
-    "@opentiny/vue-chart-graph-beta": "workspace:~",
-    "@opentiny/vue-chart-sunburst-beta": "workspace:~",
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~"
-  },
-  "license": "MIT"
-}
diff --git a/packages/vue/src/chart-beta/src/index.ts b/packages/vue/src/chart-beta/src/index.ts
deleted file mode 100644
index 973a33160..000000000
--- a/packages/vue/src/chart-beta/src/index.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ChartRing } from '@opentiny/vue-chart-ring-beta'
-import { ChartPie } from '@opentiny/vue-chart-pie-beta'
-import { ChartBar } from '@opentiny/vue-chart-bar-beta'
-import { ChartHistogram } from '@opentiny/vue-chart-histogram-beta'
-import { ChartRadar } from '@opentiny/vue-chart-radar-beta'
-import { ChartLine } from '@opentiny/vue-chart-line-beta'
-
-import { AutonaviMap } from '@opentiny/vue-autonavi-map-beta'
-import { BaiduMap } from '@opentiny/vue-baidu-map-beta'
-import { ChartBoxplot } from '@opentiny/vue-chart-boxplot-beta'
-import { ChartCandle } from '@opentiny/vue-chart-candle-beta'
-import { ChartFunnel } from '@opentiny/vue-chart-funnel-beta'
-import { ChartGauge } from '@opentiny/vue-chart-gauge-beta'
-import { ChartGraph } from '@opentiny/vue-chart-graph-beta'
-import { ChartHeatmap } from '@opentiny/vue-chart-heatmap-beta'
-
-import { ChartLiquidfill } from '@opentiny/vue-chart-liquidfill-beta'
-import { ChartMap } from '@opentiny/vue-chart-map-beta'
-
-import { ChartSankey } from '@opentiny/vue-chart-sankey-beta'
-import { ChartScatter } from '@opentiny/vue-chart-scatter-beta'
-import { ChartSunburst } from '@opentiny/vue-chart-sunburst-beta'
-import { ChartTree } from '@opentiny/vue-chart-tree-beta'
-import { ChartWaterfall } from '@opentiny/vue-chart-waterfall-beta'
-import { ChartWordcloud } from '@opentiny/vue-chart-wordcloud-beta'
-
-import Core from '@opentiny/vue-chart-core-beta'
-
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-export default defineComponent({
-  name: $prefix + 'Chart',
-  props: {
-    ...Core.props
-  },
-  data() {
-    this.chartLib = {
-      bar: ChartBar,
-      histogram: ChartHistogram,
-      line: ChartLine,
-      pie: ChartPie,
-      ring: ChartRing,
-      radar: ChartRadar,
-      autonaviMap: AutonaviMap,
-      baiduMap: BaiduMap,
-      boxplot: ChartBoxplot,
-      candle: ChartCandle,
-      funnel: ChartFunnel,
-      gauge: ChartGauge,
-      graph: ChartGraph,
-      heatmap: ChartHeatmap,
-      liquidfill: ChartLiquidfill,
-      map: ChartMap,
-      sankey: ChartSankey,
-      scatter: ChartScatter,
-      sunburst: ChartSunburst,
-      tree: ChartTree,
-      waterfall: ChartWaterfall,
-      wordcloud: ChartWordcloud
-    }
-    return {}
-  },
-  methods: {
-    ready(val) {
-      this.$emit('ready', val)
-    },
-    readyOnce(val) {
-      this.$emit('readyOnce', val)
-    },
-    handleColor(val) {
-      this.$emit('handle-color', val)
-    },
-    ...Core.methods
-  },
-  render(h) {
-    return h(
-      'div',
-      {
-        style: {
-          width: this.width,
-          height: this.height,
-          position: 'relative'
-        }
-      },
-      [
-        h(this.chartLib[this.settings.type], {
-          props: {
-            ...this.$props
-          },
-          on: {
-            ready: this.ready,
-            readyOnce: this.readyOnce,
-            handleColor: this.handleColor
-          }
-        }),
-
-        // eslint-disable-next-line vue/require-slots-as-functions
-        this.$slots.default
-      ]
-    )
-  }
-})
diff --git a/packages/vue/src/chart/autonavi-map/index.ts b/packages/vue/src/chart/autonavi-map/index.ts
index 0e6ad231f..1dee2c31d 100644
--- a/packages/vue/src/chart/autonavi-map/index.ts
+++ b/packages/vue/src/chart/autonavi-map/index.ts
@@ -1,18 +1,9 @@
-import AMap from './src/index.js'
-import { version } from './package.json'
+import AutonaviMap from './src/autonavi-map.vue'
 
-/* istanbul ignore next */
-AMap.install = function (Vue) {
-  Vue.component(AMap.name, AMap)
+AutonaviMap.install = function (Vue: any) {
+  Vue.component(AutonaviMap.name, AutonaviMap)
 }
 
-AMap.version = version
+export { AutonaviMap }
 
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    AMap.install(window.Vue)
-  }
-}
-
-export default AMap
+export default AutonaviMap
diff --git a/packages/vue/src/chart/autonavi-map/package.json b/packages/vue/src/chart/autonavi-map/package.json
index 2fa5b5c9b..9095febf1 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,9 +15,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart/autonavi-map/src/AMapCoordSys.ts b/packages/vue/src/chart/autonavi-map/src/AMapCoordSys.ts
index 3519afe59..c5bc13d3e 100644
--- a/packages/vue/src/chart/autonavi-map/src/AMapCoordSys.ts
+++ b/packages/vue/src/chart/autonavi-map/src/AMapCoordSys.ts
@@ -115,5 +115,3 @@ export default class AMapCoordSys {
     return echarts.matrix.create()
   }
 }
-
-AMapCoordSys.dimensions = AMapCoordSys.prototype.dimensions
diff --git a/packages/vue/src/chart/autonavi-map/src/AMapView.ts b/packages/vue/src/chart/autonavi-map/src/AMapView.ts
index 17f052820..40d481bae 100644
--- a/packages/vue/src/chart/autonavi-map/src/AMapView.ts
+++ b/packages/vue/src/chart/autonavi-map/src/AMapView.ts
@@ -13,8 +13,10 @@ const setLaterFunc = (ctx) => {
 const setWrapperFunc = (ctx) => {
   ctx.wrapperFn = function () {
     if (ctx.lock) {
+      // eslint-disable-next-line prefer-rest-params
       ctx.args = arguments
     } else {
+      // eslint-disable-next-line prefer-rest-params
       ctx.fn.apply(ctx.context, arguments)
       setTimeout(ctx.later, ctx.time)
       ctx.lock = true
diff --git a/packages/vue/src/chart-beta/autonavi-map/src/autonavi-map.vue b/packages/vue/src/chart/autonavi-map/src/autonavi-map.vue
similarity index 96%
rename from packages/vue/src/chart-beta/autonavi-map/src/autonavi-map.vue
rename to packages/vue/src/chart/autonavi-map/src/autonavi-map.vue
index fc8854920..3fda881d0 100644
--- a/packages/vue/src/chart-beta/autonavi-map/src/autonavi-map.vue
+++ b/packages/vue/src/chart/autonavi-map/src/autonavi-map.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 
 import './amap'
 
diff --git a/packages/vue/src/chart/autonavi-map/src/index.ts b/packages/vue/src/chart/autonavi-map/src/index.ts
deleted file mode 100644
index 5c68e15ac..000000000
--- a/packages/vue/src/chart/autonavi-map/src/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import './amap'
-import { amap } from '@opentiny/vue-renderless/autonavi-map/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartAutonaviMap',
-    data() {
-      this.chartHandler = amap
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart/baidu-map/index.ts b/packages/vue/src/chart/baidu-map/index.ts
index 9fe215c42..cba974a4d 100644
--- a/packages/vue/src/chart/baidu-map/index.ts
+++ b/packages/vue/src/chart/baidu-map/index.ts
@@ -1,18 +1,9 @@
-import BMap from './src/index.js'
-import { version } from './package.json'
+import BaiduMap from './src/baidu-map.vue'
 
-/* istanbul ignore next */
-BMap.install = function (Vue) {
-  Vue.component(BMap.name, BMap)
+BaiduMap.install = function (Vue: any) {
+  Vue.component(BaiduMap.name, BaiduMap)
 }
 
-BMap.version = version
+export { BaiduMap }
 
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    BMap.install(window.Vue)
-  }
-}
-
-export default BMap
+export default BaiduMap
diff --git a/packages/vue/src/chart/baidu-map/package.json b/packages/vue/src/chart/baidu-map/package.json
index dcab7f607..034c8ef7c 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,9 +15,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/baidu-map/src/baidu-map.vue b/packages/vue/src/chart/baidu-map/src/baidu-map.vue
similarity index 96%
rename from packages/vue/src/chart-beta/baidu-map/src/baidu-map.vue
rename to packages/vue/src/chart/baidu-map/src/baidu-map.vue
index 7f8d66920..e9d7e410f 100644
--- a/packages/vue/src/chart-beta/baidu-map/src/baidu-map.vue
+++ b/packages/vue/src/chart/baidu-map/src/baidu-map.vue
@@ -11,7 +11,7 @@
 
 <script>
 import 'echarts/extension/bmap/bmap'
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 
 export default {
   name: 'ChartBaiduMap',
diff --git a/packages/vue/src/chart/baidu-map/src/index.ts b/packages/vue/src/chart/baidu-map/src/index.ts
deleted file mode 100644
index 161b88f94..000000000
--- a/packages/vue/src/chart/baidu-map/src/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import 'echarts/extension/bmap/bmap'
-import { bmap } from '@opentiny/vue-renderless/baidu-map/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartBaiduMap',
-    data() {
-      this.chartHandler = bmap
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart/chart-bar/index.ts b/packages/vue/src/chart/chart-bar/index.ts
index 6f712c81b..1387819e0 100644
--- a/packages/vue/src/chart/chart-bar/index.ts
+++ b/packages/vue/src/chart/chart-bar/index.ts
@@ -1,21 +1,9 @@
-import Bar from './src/index.js'
-import { histogram, bar } from '@opentiny/vue-renderless/chart-bar/index'
-import { version } from './package.json'
+import ChartBar from './src/chart-bar.vue'
 
-/* istanbul ignore next */
-Bar.install = function (Vue) {
-  Vue.component(Bar.name, Bar)
+ChartBar.install = function (Vue: any) {
+  Vue.component(ChartBar.name, ChartBar)
 }
 
-Bar.version = version
+export { ChartBar }
 
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Bar.install(window.Vue)
-  }
-}
-
-export { histogram, bar }
-
-export default Bar
+export default ChartBar
diff --git a/packages/vue/src/chart/chart-bar/package.json b/packages/vue/src/chart/chart-bar/package.json
index ec3dce9d6..4ff919569 100644
--- a/packages/vue/src/chart/chart-bar/package.json
+++ b/packages/vue/src/chart/chart-bar/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-bar",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-bar/src/chart-bar.vue b/packages/vue/src/chart/chart-bar/src/chart-bar.vue
similarity index 93%
rename from packages/vue/src/chart-beta/chart-bar/src/chart-bar.vue
rename to packages/vue/src/chart/chart-bar/src/chart-bar.vue
index 10e97d7e4..3456700d0 100644
--- a/packages/vue/src/chart-beta/chart-bar/src/chart-bar.vue
+++ b/packages/vue/src/chart/chart-bar/src/chart-bar.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { histogram } from './histogram'
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 
 export default {
   name: 'ChartBar',
diff --git a/packages/vue/src/chart-beta/chart-histogram/src/histogram.ts b/packages/vue/src/chart/chart-bar/src/histogram.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-histogram/src/histogram.ts
rename to packages/vue/src/chart/chart-bar/src/histogram.ts
index ac4bdd487..46da3dfb9 100644
--- a/packages/vue/src/chart-beta/chart-histogram/src/histogram.ts
+++ b/packages/vue/src/chart/chart-bar/src/histogram.ts
@@ -1,13 +1,4 @@
-import {
-  getFormatted,
-  cloneDeep,
-  getStackMap,
-  get,
-  set,
-  isNull,
-  getRows,
-  getTooltip
-} from '@opentiny/vue-chart-core-beta'
+import { getFormatted, cloneDeep, getStackMap, get, set, isNull, getRows, getTooltip } from '@opentiny/vue-chart-core'
 
 const VALUE_AXIS_OPACITY = 0.5
 
diff --git a/packages/vue/src/chart/chart-bar/src/index.ts b/packages/vue/src/chart/chart-bar/src/index.ts
deleted file mode 100644
index 2721fd74b..000000000
--- a/packages/vue/src/chart/chart-bar/src/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as echarts from 'echarts/core'
-import { GridComponent } from 'echarts/components'
-import { BarChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { bar } from '@opentiny/vue-renderless/chart-bar/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([GridComponent, BarChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartBar',
-    data() {
-      this.chartHandler = bar
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart/chart-boxplot/index.ts b/packages/vue/src/chart/chart-boxplot/index.ts
index 5b7eb8fe3..c0a2694e2 100644
--- a/packages/vue/src/chart/chart-boxplot/index.ts
+++ b/packages/vue/src/chart/chart-boxplot/index.ts
@@ -1,18 +1,9 @@
-import Boxplot from './src/index.js'
-import { version } from './package.json'
+import ChartBoxplot from './src/chart-boxplot.vue'
 
-/* istanbul ignore next */
-Boxplot.install = function (Vue) {
-  Vue.component(Boxplot.name, Boxplot)
+ChartBoxplot.install = function (Vue: any) {
+  Vue.component(ChartBoxplot.name, ChartBoxplot)
 }
 
-Boxplot.version = version
+export { ChartBoxplot }
 
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Boxplot.install(window.Vue)
-  }
-}
-
-export default Boxplot
+export default ChartBoxplot
diff --git a/packages/vue/src/chart/chart-boxplot/package.json b/packages/vue/src/chart/chart-boxplot/package.json
index bd2be0195..1f7b34fcb 100644
--- a/packages/vue/src/chart/chart-boxplot/package.json
+++ b/packages/vue/src/chart/chart-boxplot/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-boxplot",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-boxplot/src/boxplot.ts b/packages/vue/src/chart/chart-boxplot/src/boxplot.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-boxplot/src/boxplot.ts
rename to packages/vue/src/chart/chart-boxplot/src/boxplot.ts
index 417ac412c..5a61a20bb 100644
--- a/packages/vue/src/chart-beta/chart-boxplot/src/boxplot.ts
+++ b/packages/vue/src/chart/chart-boxplot/src/boxplot.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemPoint, itemLabel, itemContent, htmlHandler } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, itemPoint, itemLabel, itemContent, htmlHandler } from '@opentiny/vue-chart-core'
 
 const getXAxis = (args) => {
   const { columns, xAxisName, axisVisible, xAxisType } = args
diff --git a/packages/vue/src/chart-beta/chart-boxplot/src/chart-boxplot.vue b/packages/vue/src/chart/chart-boxplot/src/chart-boxplot.vue
similarity index 94%
rename from packages/vue/src/chart-beta/chart-boxplot/src/chart-boxplot.vue
rename to packages/vue/src/chart/chart-boxplot/src/chart-boxplot.vue
index 87e1a5913..23668f659 100644
--- a/packages/vue/src/chart-beta/chart-boxplot/src/chart-boxplot.vue
+++ b/packages/vue/src/chart/chart-boxplot/src/chart-boxplot.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { prepareBoxplotData } from 'echarts/extension/dataTool'
 import { boxplot } from './boxplot'
 
diff --git a/packages/vue/src/chart/chart-boxplot/src/index.ts b/packages/vue/src/chart/chart-boxplot/src/index.ts
deleted file mode 100644
index dd083601f..000000000
--- a/packages/vue/src/chart/chart-boxplot/src/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as echarts from 'echarts/core'
-import { DatasetComponent, GridComponent, DataZoomComponent, TransformComponent } from 'echarts/components'
-import { BoxplotChart, ScatterChart } from 'echarts/charts'
-import { UniversalTransition } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
-import { prepareBoxplotData } from 'echarts/extension/dataTool'
-import { boxplot } from '@opentiny/vue-renderless/chart-boxplot'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([
-  DatasetComponent,
-  GridComponent,
-  DataZoomComponent,
-  TransformComponent,
-  BoxplotChart,
-  ScatterChart,
-  CanvasRenderer,
-  UniversalTransition
-])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartBoxplot',
-    data() {
-      this.prepareBoxplotData = prepareBoxplotData
-      this.chartHandler = boxplot
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-boxplot/src/types.ts b/packages/vue/src/chart/chart-boxplot/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-boxplot/src/types.ts
rename to packages/vue/src/chart/chart-boxplot/src/types.ts
diff --git a/packages/vue/src/chart/chart-candle/index.ts b/packages/vue/src/chart/chart-candle/index.ts
index 80e10fa5b..40af4f74c 100644
--- a/packages/vue/src/chart/chart-candle/index.ts
+++ b/packages/vue/src/chart/chart-candle/index.ts
@@ -1,18 +1,9 @@
-import Candle from './src/index.js'
-import { version } from './package.json'
+import ChartCandle from './src/chart-candle.vue'
 
-/* istanbul ignore next */
-Candle.install = function (Vue) {
-  Vue.component(Candle.name, Candle)
+ChartCandle.install = function (Vue: any) {
+  Vue.component(ChartCandle.name, ChartCandle)
 }
 
-Candle.version = version
+export { ChartCandle }
 
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Candle.install(window.Vue)
-  }
-}
-
-export default Candle
+export default ChartCandle
diff --git a/packages/vue/src/chart/chart-candle/package.json b/packages/vue/src/chart/chart-candle/package.json
index 0a50d646b..5ed836e0e 100644
--- a/packages/vue/src/chart/chart-candle/package.json
+++ b/packages/vue/src/chart/chart-candle/package.json
@@ -1,23 +1,19 @@
 {
   "name": "@opentiny/vue-chart-candle",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-chart-core": "workspace:~"
+    "@opentiny/vue-chart-core": "workspace:~",
+    "@opentiny/vue-locale": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-candle/src/candle.ts b/packages/vue/src/chart/chart-candle/src/candle.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-candle/src/candle.ts
rename to packages/vue/src/chart/chart-candle/src/candle.ts
index 2574a8170..e690c98f7 100644
--- a/packages/vue/src/chart-beta/chart-candle/src/candle.ts
+++ b/packages/vue/src/chart/chart-candle/src/candle.ts
@@ -16,7 +16,7 @@
  * dataType	数据展示格式	string	可选值: KMB, normal, percent
  */
 
-import { getFormatted, itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const isNull = (x) => x === null || x === undefined
 let defaultKName = ''
diff --git a/packages/vue/src/chart-beta/chart-candle/src/chart-candle.vue b/packages/vue/src/chart/chart-candle/src/chart-candle.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-candle/src/chart-candle.vue
rename to packages/vue/src/chart/chart-candle/src/chart-candle.vue
index ce51cc9ee..bce52aeed 100644
--- a/packages/vue/src/chart-beta/chart-candle/src/chart-candle.vue
+++ b/packages/vue/src/chart/chart-candle/src/chart-candle.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { t } from '@opentiny/vue-locale'
 import { candle } from './candle'
 
diff --git a/packages/vue/src/chart/chart-candle/src/index.ts b/packages/vue/src/chart/chart-candle/src/index.ts
deleted file mode 100644
index 83e77835a..000000000
--- a/packages/vue/src/chart/chart-candle/src/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as echarts from 'echarts/core'
-import {
-  GraphicComponent,
-  GridComponent,
-  DataZoomComponent,
-  MarkLineComponent,
-  MarkPointComponent
-} from 'echarts/components'
-import { BarChart, CandlestickChart, LineChart } from 'echarts/charts'
-import { UniversalTransition } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
-import { candle } from '@opentiny/vue-renderless/chart-candle/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([
-  GraphicComponent,
-  GridComponent,
-  DataZoomComponent,
-  BarChart,
-  MarkLineComponent,
-  MarkPointComponent,
-  CandlestickChart,
-  LineChart,
-  CanvasRenderer,
-  UniversalTransition
-])
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartCandle',
-    data() {
-      this.chartHandler = candle
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-candle/src/types.ts b/packages/vue/src/chart/chart-candle/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-candle/src/types.ts
rename to packages/vue/src/chart/chart-candle/src/types.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/chart.ts b/packages/vue/src/chart/chart-core/base/chart.ts
similarity index 96%
rename from packages/vue/src/chart-beta/chart-core/base/chart.ts
rename to packages/vue/src/chart/chart-core/base/chart.ts
index 6735e1e8d..bc80fd383 100644
--- a/packages/vue/src/chart-beta/chart-core/base/chart.ts
+++ b/packages/vue/src/chart/chart-core/base/chart.ts
@@ -1,3 +1,5 @@
+/* eslint-disable new-cap */
+/* eslint-disable no-unused-expressions */
 import core from './core'
 import Register from './register'
 import Theme from './feature/token'
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/AutonaviMapChart/index.ts b/packages/vue/src/chart/chart-core/base/components/AutonaviMapChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/AutonaviMapChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/AutonaviMapChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BaiduMapChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BaiduMapChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BaiduMapChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/BaiduMapChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BarChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BarChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/BarChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BarChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/handleOptipn.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BarChart/handleOptipn.ts
rename to packages/vue/src/chart/chart-core/base/components/BarChart/handleOptipn.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BarChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BarChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/BarChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BarChart/handleVisualMap.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/handleVisualMap.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BarChart/handleVisualMap.ts
rename to packages/vue/src/chart/chart-core/base/components/BarChart/handleVisualMap.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BarChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BarChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BarChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/BarChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BaseChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BaseChart/index.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-core/base/components/BaseChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/BaseChart/index.ts
index e6d22a31c..bd3c9abac 100644
--- a/packages/vue/src/chart-beta/chart-core/base/components/BaseChart/index.ts
+++ b/packages/vue/src/chart/chart-core/base/components/BaseChart/index.ts
@@ -92,7 +92,7 @@ export default class BaseChart {
   // 传入自定义DOM
   showCustomDom(callback) {
     if (this.dom.getElementsByClassName('huicharts-custom-dom').length > 0) return
-    if (getComputedStyle(this.dom).position == ('static' || '')) {
+    if (getComputedStyle(this.dom).position === ('static' || '')) {
       this.dom.style.position = 'relative'
     }
     let customContainer = document.createElement('div')
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BoxplotChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BoxplotChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/BoxplotChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BoxplotChart/handleOption.ts b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BoxplotChart/handleOption.ts
rename to packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BoxplotChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BoxplotChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/BoxplotChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BoxplotChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BoxplotChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BoxplotChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/BoxplotChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/BubbleChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleData.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleData.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleData.ts
rename to packages/vue/src/chart/chart-core/base/components/BubbleChart/handleData.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleOptipn.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleOptipn.ts
rename to packages/vue/src/chart/chart-core/base/components/BubbleChart/handleOptipn.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/BubbleChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleTrendLine.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleTrendLine.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleTrendLine.ts
rename to packages/vue/src/chart/chart-core/base/components/BubbleChart/handleTrendLine.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleVisualMap.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/handleVisualMap.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/handleVisualMap.ts
rename to packages/vue/src/chart/chart-core/base/components/BubbleChart/handleVisualMap.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/index.ts b/packages/vue/src/chart/chart-core/base/components/BubbleChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/BubbleChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/BubbleChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/BaseOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/BaseOption.ts
rename to packages/vue/src/chart/chart-core/base/components/CandlestickChart/BaseOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/CandlestickChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/hanleOption.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/hanleOption.ts
rename to packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/hanleSeries.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/hanleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/CandlestickChart/hanleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/index.ts b/packages/vue/src/chart/chart-core/base/components/CandlestickChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/CandlestickChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/CandlestickChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/FunnelChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/FunnelChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/handleLegend.ts b/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleLegend.ts
similarity index 96%
rename from packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/handleLegend.ts
rename to packages/vue/src/chart/chart-core/base/components/FunnelChart/handleLegend.ts
index 9105f5d27..098ea471b 100644
--- a/packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/handleLegend.ts
+++ b/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleLegend.ts
@@ -16,7 +16,7 @@ export function setLegend(baseOption) {
 function sortData(sort, data) {
   let legendName = []
   // 升序
-  if (sort == 'ascending') {
+  if (sort === 'ascending') {
     const sortedData = [...data].sort((a, b) => {
       return a.value - b.value
     })
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleSeries.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/FunnelChart/handleSeries.ts
index 0b4a6dc37..1757e4cea 100644
--- a/packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/handleSeries.ts
+++ b/packages/vue/src/chart/chart-core/base/components/FunnelChart/handleSeries.ts
@@ -36,7 +36,7 @@ export function setSeries(iChartOption) {
   let series = []
   const selfSeries = iChartOption.series
   // 处理series里多个数据的优先级配置方法
-  if (selfSeries !== undefined && selfSeries.length != 0) {
+  if (selfSeries !== undefined && selfSeries.length !== 0) {
     selfSeries.forEach((seriesItem) => {
       const seriesUnit = seriesItem
       // 处理size的优先级
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/index.ts b/packages/vue/src/chart/chart-core/base/components/FunnelChart/index.ts
similarity index 95%
rename from packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/FunnelChart/index.ts
index 2eb528531..a250933a5 100644
--- a/packages/vue/src/chart-beta/chart-core/base/components/FunnelChart/index.ts
+++ b/packages/vue/src/chart/chart-core/base/components/FunnelChart/index.ts
@@ -23,6 +23,7 @@ export default class FunnelChart {
     // 组装series
     this.baseOption.series = setSeries(iChartOption)
     // 组装legend.data
+    // eslint-disable-next-line no-unused-expressions
     this.baseOption.legend.data ? this.baseOption.legend.data : setLegend(this.baseOption)
     // 配置图表事件
     if (iChartOption.event) {
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/BaseOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/BaseOption.ts
rename to packages/vue/src/chart/chart-core/base/components/GaugeChart/BaseOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/GaugeChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/handleOptipn.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/handleOptipn.ts
rename to packages/vue/src/chart/chart-core/base/components/GaugeChart/handleOptipn.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/GaugeChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/index.ts b/packages/vue/src/chart/chart-core/base/components/GaugeChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/GaugeChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/GaugeChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/GraphChart/index.ts b/packages/vue/src/chart/chart-core/base/components/GraphChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/GraphChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/GraphChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/BaseOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/BaseOption.ts
rename to packages/vue/src/chart/chart-core/base/components/HeatMapChart/BaseOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/HeatMapChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/handleData.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleData.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/handleData.ts
rename to packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleData.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleOptipn.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/handleOptipn.ts
rename to packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleOptipn.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/handleVisualMap.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleVisualMap.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/handleVisualMap.ts
rename to packages/vue/src/chart/chart-core/base/components/HeatMapChart/handleVisualMap.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/index.ts b/packages/vue/src/chart/chart-core/base/components/HeatMapChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/HeatMapChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/HeatMapChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/AreaChart/bottomArea.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/bottomArea.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/AreaChart/bottomArea.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/bottomArea.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/AreaChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/AreaChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/AreaChart/index.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/AreaChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/AreaChart/topArea.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/topArea.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/AreaChart/topArea.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/AreaChart/topArea.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/handleOptipn.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/handleOptipn.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/handleOptipn.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/handlePredict.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/handlePredict.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/handlePredict.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/handlePredict.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/handleVisualMap.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/handleVisualMap.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/handleVisualMap.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/handleVisualMap.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LineChart/index.ts b/packages/vue/src/chart/chart-core/base/components/LineChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LineChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/LineChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LiquidfillChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LiquidfillChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/LiquidfillChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LiquidfillChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LiquidfillChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/LiquidfillChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/LiquidfillChart/index.ts b/packages/vue/src/chart/chart-core/base/components/LiquidfillChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/LiquidfillChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/LiquidfillChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/PieChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/PieChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/PieChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/PieChart/handleLabel.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/handleLabel.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/PieChart/handleLabel.ts
rename to packages/vue/src/chart/chart-core/base/components/PieChart/handleLabel.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/PieChart/handleMulti.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/handleMulti.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/PieChart/handleMulti.ts
rename to packages/vue/src/chart/chart-core/base/components/PieChart/handleMulti.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/PieChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/PieChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/PieChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/PieChart/index.ts b/packages/vue/src/chart/chart-core/base/components/PieChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/PieChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/PieChart/index.ts
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/BaseOption.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/BaseOption.js
new file mode 100644
index 000000000..58ce7fd42
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/BaseOption.js
@@ -0,0 +1,283 @@
+// 进度图的图表类型名称
+const CHARTTYPENAME = {
+  ProcessBarChart: 'ProcessBarChart',
+  StackProcessBarChart: 'StackProcessBarChart'
+}
+// 标识是否为双向进度图
+const PROCESSBARTYPE = 'double-sides'
+// 基础进度图的默认单位
+const BASICUNIT = '%'
+
+const BASICBARWIDTH = {
+  ProcessBarChart: 8,
+  StackProcessBarChart: 20
+}
+// 进度图用来做标题和背景的基础series
+const BASICSERIES = [
+  {
+    // 用来做前面的文本显示
+    name: 'seriesName',
+    type: 'bar',
+    barWidth: 8,
+    barGap: '-100%',
+    // 这条series不响应鼠标事件
+    silent: true,
+    label: {
+      show: true,
+      color: undefined,
+      position: [0, -20],
+      fontSize: 14,
+      formatter: undefined
+    },
+    data: undefined
+  },
+  {
+    // 底色 +右侧label文本显示
+    name: 'background',
+    type: 'bar',
+    barWidth: 8,
+    barGap: '-100%',
+    itemStyle: {
+      color: undefined,
+      borderRadius: 4
+    },
+    emphasis: {
+      disabled: true
+    },
+    label: {
+      show: true,
+      color: undefined,
+      offset: [0, -24],
+      position: 'insideTopRight',
+      fontSize: 14,
+      formatter: undefined
+    },
+    data: undefined
+  }
+]
+// 用于显示基础进度图的实际数据的series
+const BASICDATASERIES = {
+  name: undefined,
+  type: 'bar',
+  zlevel: 2,
+  barWidth: 8,
+  cursor: 'pointer',
+  itemStyle: {
+    borderRadius: 4,
+    color: undefined
+  },
+  data: undefined,
+  label: {
+    show: false,
+    color: undefined,
+    formatter: undefined
+  }
+}
+// 双向进度图的基础series
+const DOUBLEBASICOPTION = {
+  grid: [
+    // 左边的坐标系
+    {
+      left: '4%',
+      width: '46%',
+      top: 0,
+      bottom: 0,
+      containLabel: false
+    },
+    // 右边的坐标系
+    {
+      right: '4%',
+      width: '46%',
+      top: 0,
+      bottom: 0,
+      containLabel: false
+    }
+  ],
+  xAxis: [
+    // 左侧的x轴
+    {
+      show: true,
+      type: 'value',
+      gridIndex: 0,
+      inverse: true,
+      axisLabel: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          type: [8, 4]
+        }
+      },
+      max: 'dataMax'
+    },
+    // 右侧的x轴
+    {
+      show: true,
+      type: 'value',
+      gridIndex: 1,
+      splitLine: {
+        lineStyle: {
+          type: [8, 4]
+        }
+      },
+      axisLabel: {
+        show: false
+      },
+      max: 'dataMax'
+    }
+  ],
+  yAxis: [
+    {
+      // 左侧的y轴
+      type: 'category',
+      gridIndex: 0,
+      show: true,
+      inverse: true,
+      axisLabel: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: undefined
+        }
+      },
+      position: 'right',
+      data: undefined
+    },
+    {
+      // 右侧的y轴
+      type: 'category',
+      gridIndex: 1,
+      inverse: true,
+      show: false,
+      data: undefined
+    }
+  ],
+  series: [
+    {
+      // 实际数据 + 左侧数值
+      name: '',
+      xAxisIndex: 0,
+      yAxisIndex: 0,
+      type: 'bar',
+      zlevel: 2,
+      barWidth: 8,
+      itemStyle: {
+        borderRadius: [4, 0, 0, 4],
+        color: undefined
+      },
+      data: undefined,
+      emphasis: {
+        disabled: true
+      },
+      label: {
+        show: false
+      }
+    },
+    {
+      // 左侧底色
+      name: 'backgroundLeft',
+      type: 'bar',
+      xAxisIndex: 0,
+      yAxisIndex: 0,
+      barWidth: 8,
+      barGap: '-100%',
+      itemStyle: {
+        color: undefined,
+        borderRadius: [4, 0, 0, 4]
+      },
+      emphasis: {
+        disabled: true
+      },
+      label: {
+        show: true,
+        offset: [0, 0],
+        position: 'insideBottomLeft',
+        formatter: undefined,
+        rich: {
+          nameLeft: {
+            fontSize: 14,
+            color: undefined,
+            lineHeight: 14,
+            padding: [0, 0, 20, 0]
+          },
+          valueLeft: {
+            fontSize: 14,
+            color: undefined,
+            lineHeight: 14,
+            fontWeight: 'bold'
+          }
+        }
+      },
+      data: undefined
+    },
+    {
+      // 实际数据 + 右侧数值
+      name: '',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      type: 'bar',
+      zlevel: 2,
+      barWidth: 8,
+      itemStyle: {
+        borderRadius: [0, 4, 4, 0],
+        color: undefined
+      },
+      emphasis: {
+        disabled: true
+      },
+      label: {
+        show: false
+      },
+      data: undefined
+    },
+    {
+      // 右侧底色
+      name: 'backgroundRight',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      type: 'bar',
+      barWidth: 8,
+      barGap: '-100%',
+      itemStyle: {
+        color: undefined,
+        borderRadius: [0, 4, 4, 0]
+      },
+      emphasis: {
+        disabled: true
+      },
+      label: {
+        show: true,
+        offset: [0, 0],
+        position: 'insideBottomRight',
+        formatter: undefined,
+        rich: {
+          nameRight: {
+            fontSize: 14,
+            color: '',
+            lineHeight: 14,
+            padding: [0, 0, 20, 0],
+            align: 'right'
+          },
+          valueRight: {
+            fontSize: 14,
+            color: '',
+            lineHeight: 14,
+            align: 'right',
+            fontWeight: 'bold'
+          }
+        }
+      },
+      data: undefined
+    }
+  ]
+}
+
+export { PROCESSBARTYPE, CHARTTYPENAME, BASICUNIT, BASICSERIES, DOUBLEBASICOPTION, BASICDATASERIES, BASICBARWIDTH }
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/chartToken.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/chartToken.js
new file mode 100644
index 000000000..23b3aad2f
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/chartToken.js
@@ -0,0 +1,5 @@
+import Theme from '../../feature/token'
+
+const chartToken = Theme.getTokenByName('ProcessChart')
+
+export default chartToken
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleData.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleData.js
new file mode 100644
index 000000000..e4cef26c9
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleData.js
@@ -0,0 +1,144 @@
+import { CHARTTYPENAME } from './BaseOption'
+import max from '../../util/sort/max'
+
+// 处理有minWidth极限值的情况下给echarts渲染的数据
+function handleLimitVal(data, iChartOpt, demarcatedValue) {
+  const dataItem = { ...data, _initValue: undefined }
+  const { minWidth } = iChartOpt
+  // 数据的最小宽度是一个百分比，用于控制数据之间差距过大导致部分数据显示不明显，导致无法交互的情况
+  if (minWidth) {
+    const limitValue = demarcatedValue * (parseInt(minWidth) / 100)
+    if (data.value && data.value < limitValue) {
+      dataItem.value = limitValue
+      dataItem._initValue = data.value
+    }
+  }
+  return dataItem
+}
+
+function handleDoubleSideData(dataSet, data, iChartOpt, demarcatedValue) {
+  data.forEach((item) => {
+    dataSet.seriesName.push(item.name)
+    const childBarName = []
+    const childBarData = []
+    if (item.children && item.children.length !== 0) {
+      item.children.forEach((el) => {
+        childBarName.push(el.name)
+        const innerDataItem = handleLimitVal(el, iChartOpt, demarcatedValue)
+        childBarData.push(innerDataItem)
+      })
+      dataSet.barName.push(childBarName)
+      dataSet.barData.push(childBarData)
+    }
+  })
+}
+
+function handleBasicProcessData(iChartOpt, dataSet, data, doubleSide, dataMax) {
+  // 内部显示进度的最大值
+  const demarcatedValue = dataMax || 100
+  dataSet.maxValue = demarcatedValue
+  if (doubleSide) {
+    handleDoubleSideData(dataSet, data, iChartOpt, demarcatedValue)
+    return
+  }
+  data.forEach((dataItem) => {
+    dataSet.barName.push(dataItem.name)
+    const innerDataItem = handleLimitVal(dataItem, iChartOpt, demarcatedValue)
+    dataSet.barData.push(innerDataItem)
+  })
+}
+
+function getSerirsDataMax(dataSet, data, dataMax) {
+  let sumValueMax
+  const sumValue = []
+  data.forEach((el) => {
+    let _sumValue = 0
+    el.children.forEach((child) => {
+      if (child.value) {
+        _sumValue += child.value
+      }
+    })
+    sumValue.push(_sumValue)
+  })
+  sumValueMax = max(sumValue)
+  if (dataMax && dataMax > sumValueMax) {
+    sumValueMax = dataMax
+  }
+  dataSet.maxValue = sumValueMax
+  dataSet.sumValue = sumValue
+}
+
+function setMaxValueAgain(dataSet, dataMax) {
+  const sum = []
+  const len = dataSet.seriesName.length
+  for (let i = 0; i < len; i++) {
+    let sumValue = 0
+    dataSet.barData.forEach((item) => {
+      if (item[i].value) {
+        sumValue += item[i].value
+      }
+    })
+    sum.push(sumValue)
+  }
+  let maxValue = max(sum)
+  if (dataMax && dataMax > maxValue) {
+    maxValue = dataMax
+  }
+  dataSet.maxValue = maxValue
+}
+
+function handleStackProcessData(iChartOpt, dataSet, data, dataMax) {
+  // 获取系列名称
+  data.forEach((element) => {
+    dataSet.seriesName.push(element.name)
+  })
+  // 单独系列名称
+  data[0].children.forEach((el) => {
+    dataSet.barName.push(el.type)
+  })
+  // 单一系列各项数据用来获取数据的标定值
+  getSerirsDataMax(dataSet, data, dataMax)
+  // 对各系列数据进行组装分类
+  dataSet.barName.forEach((type) => {
+    // 每个系列单独的数据
+    const seriesData = []
+    data.forEach((child) => {
+      const childItem = child.children.find((el) => el.type === type)
+      const innerChidItem = handleLimitVal(childItem, iChartOpt, dataSet.maxValue)
+      seriesData.push(innerChidItem)
+    })
+
+    dataSet.barData.push(seriesData)
+  })
+  // 在有minwidth的情景下重新去计算所有系列求和的最大值
+  if (iChartOpt.minWidth) {
+    setMaxValueAgain(dataSet, dataMax)
+  }
+}
+
+function handleData(iChartOpt, doubleSide) {
+  const { data, name } = iChartOpt
+  if (!data) return null
+  if (data && data.length > 0) {
+    // 数据集合
+    const dataSet = {
+      // 图表子项数据
+      barData: [],
+      // 图表的标题数据
+      barName: [],
+      // 图表的最大值
+      maxValue: undefined,
+      // 图表的系列名称
+      seriesName: []
+    }
+    // 当前图表单个系列数据的最大值，用来做数据占比
+    const dataMax = iChartOpt.calibrationValue || iChartOpt.max
+    if (name === CHARTTYPENAME.ProcessBarChart) {
+      handleBasicProcessData(iChartOpt, dataSet, data, doubleSide, dataMax)
+    } else {
+      handleStackProcessData(iChartOpt, dataSet, data, dataMax)
+    }
+    return dataSet
+  }
+}
+export default handleData
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleOption.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleOption.js
new file mode 100644
index 000000000..c45ece556
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleOption.js
@@ -0,0 +1,220 @@
+import { BASICUNIT, CHARTTYPENAME, DOUBLEBASICOPTION } from './BaseOption'
+import merge from '../../util/merge'
+import defendXSS from '../../util/defendXSS'
+import { isString, isArray } from '../../util/type'
+import { handleBarColor } from './handleSeries'
+import cloneDeep from '../../util/cloneDeep'
+import chartToken from './chartToken'
+
+function handleGridWidth(baseOpt, padding, chartInstance) {
+  const right = padding[1]
+  const left = padding[3]
+  const containerWidth = chartInstance.getWidth()
+  const isStrR = isString(right)
+  const isStrL = isString(left)
+  const isPtR = isStrR && right.includes('%')
+  const isPtL = isStrL && left.includes('%')
+  baseOpt.grid[0].left = left
+  baseOpt.grid[1].right = right
+  // 左右都是百分比
+  if (isPtR && isPtL) {
+    const width = (100 - parseInt(left) - parseInt(right)) / 2
+    baseOpt.grid[0].width = `${width}%`
+    baseOpt.grid[1].width = `${width}%`
+    return
+  }
+  const leftPadding = isPtL ? (containerWidth * parseInt(left)) / 100 : parseInt(left)
+  const rightPadding = isPtR ? (containerWidth * parseInt(right)) / 100 : parseInt(right)
+  const horizontalPadding = leftPadding + rightPadding
+  const gridWidth = (containerWidth - horizontalPadding) / 2
+  baseOpt.grid[0].width = gridWidth
+  baseOpt.grid[1].width = gridWidth
+}
+
+function handleDoubleGrid(baseOpt, iChartOpt, chartInstance) {
+  const { padding } = iChartOpt
+  baseOpt.grid[0].top = padding[0]
+  baseOpt.grid[0].bottom = padding[2]
+  baseOpt.grid[1].top = padding[0]
+  baseOpt.grid[1].bottom = padding[2]
+  handleGridWidth(baseOpt, padding, chartInstance)
+}
+
+function handleMergeOption(target, source) {
+  target.forEach((item, index) => {
+    merge(item, isArray(source) ? source[index] : source)
+  })
+}
+
+function handleGrid(baseOpt, iChartOpt, doubleSide, chartInstance) {
+  if (doubleSide) {
+    baseOpt.grid = cloneDeep(DOUBLEBASICOPTION.grid)
+    handleDoubleGrid(baseOpt, iChartOpt, chartInstance)
+  } else {
+    baseOpt.grid[0].containLabel = false
+  }
+  if (iChartOpt.grid) {
+    handleMergeOption(baseOpt.grid, iChartOpt.grid)
+  }
+}
+
+function handleYaxis(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (doubleSide) {
+    baseOpt.yAxis = cloneDeep(DOUBLEBASICOPTION.yAxis)
+    baseOpt.yAxis[0].show = true
+    baseOpt.yAxis[0].axisLine.lineStyle.color = chartToken.axisLineColor
+    baseOpt.yAxis[0].data = dataSet.barName[0]
+    baseOpt.yAxis[1].data = dataSet.barName[1]
+  } else {
+    baseOpt.yAxis[0].inverse = true
+    baseOpt.yAxis[0].show = false
+    baseOpt.yAxis[0].data = iChartOpt.name === CHARTTYPENAME.ProcessBarChart ? dataSet.barName : dataSet.seriesName
+    baseOpt.yAxis[0].type = 'category'
+  }
+  if (iChartOpt.yAxis) {
+    handleMergeOption(baseOpt.yAxis, iChartOpt.yAxis)
+  }
+}
+
+function handleXaxis(baseOpt, doubleSide, iChartOpt) {
+  if (doubleSide) {
+    baseOpt.xAxis = cloneDeep(DOUBLEBASICOPTION.xAxis)
+  } else {
+    baseOpt.xAxis[0].show = false
+    baseOpt.xAxis[0].type = 'value'
+    // 保证图表能横向撑满容器
+    baseOpt.xAxis[0].max = 'dataMax'
+  }
+  if (iChartOpt.xAxis) {
+    handleMergeOption(baseOpt.xAxis, iChartOpt.xAxis)
+  }
+}
+
+function handleDataZoom(baseOpt, initIchartOption) {
+  if (initIchartOption.dataZoom) {
+    handleMergeOption(baseOpt.dataZoom, initIchartOption.dataZoom)
+  }
+}
+
+function handleLegend(baseOpt, dataSet, doubleSide, initIchartOption) {
+  if (doubleSide) {
+    baseOpt.legend.data = dataSet.seriesName.map((item) => {
+      return {
+        name: item
+      }
+    })
+  } else {
+    baseOpt.legend.show = false
+  }
+  if (initIchartOption.legend) {
+    merge(baseOpt.legend, initIchartOption.legend)
+  }
+}
+
+function handleTipValue(params, dataSet, doubleSide) {
+  let value
+  if (doubleSide) {
+    value =
+      dataSet.barData[Math.floor(params.seriesIndex / 2)][params.dataIndex]._initValue ||
+      dataSet.barData[Math.floor(params.seriesIndex / 2)][params.dataIndex].value
+  } else {
+    value = dataSet.barData[params.dataIndex]._initValue || dataSet.barData[params.dataIndex].value
+  }
+  return value
+}
+
+function handleTipFormatter(baseOpt, iChartOpt, dataSet, doubleSide) {
+  const { unit, tipHtml } = iChartOpt
+  if (tipHtml) {
+    baseOpt.tooltip.formatter = tipHtml
+    return
+  }
+  const innerUnit = unit || unit === '' ? unit : BASICUNIT
+  const isItemTooltip = baseOpt.tooltip.trigger === 'item'
+  const ichartTooltipFormatter = iChartOpt?.tooltip?.formatter
+
+  baseOpt.tooltip.formatter = (echartsParams) => {
+    const params = isItemTooltip ? echartsParams : echartsParams[0]
+    const name = params.name
+    const seriesName = params.seriesName
+    const value = handleTipValue(params, dataSet, doubleSide)
+    const color =
+      seriesName === 'background' || seriesName === 'backgroundLeft' || seriesName === 'backgroundRight'
+        ? handleBarColor(params, iChartOpt, dataSet, doubleSide, true)
+        : params.color
+    const validData = value === null || value === undefined
+    if (ichartTooltipFormatter) {
+      const customParams = { ...params, value, color, data: value, unit: innerUnit }
+      return ichartTooltipFormatter(customParams)
+    }
+    if (name === 'null') return
+    const htmlString = `
+                          <div>
+                              <span style="display:inline-block;width:10px;height:10px;
+                              border-radius:5px;background-color:${defendXSS(color)};">
+                              </span>
+                              <span style="margin-left:5px;">
+                                  <span style="display:inline-block;margin-right:8px;min-width:80px;">${defendXSS(
+                                    name
+                                  )}</span> 
+                                  <span style="font-weight:bold">${validData ? '--' : defendXSS(value)}${defendXSS(
+                                    innerUnit
+                                  )}</span>
+                              </span>
+                          </div>
+                      `
+    return htmlString
+  }
+}
+
+function handleStackTipFormatter(baseOpt, iChartOpt) {
+  baseOpt.tooltip.trigger = 'axis'
+  const { tipHtml } = iChartOpt
+  if (tipHtml) {
+    baseOpt.tooltip.formatter = tipHtml
+    return
+  }
+  baseOpt.tooltip.formatter = (params) => {
+    const name = params[0].name
+    if (name === 'null') return
+    let htmlString = `<div style="margin-bottom:4px;">${defendXSS(name)}</div>`
+    params.forEach((param, index) => {
+      if (index > 1) {
+        const value = param.data._initValue || param.data.value
+        htmlString += `<div>
+      <span style="display:inline-block;width:10px;height:10px;
+      border-radius:5px;background-color:${defendXSS(param.color)};">
+      </span>
+      <span style="margin-left:5px;">
+          <span style="display:inline-block;margin-right:8px;min-width:80px;">${defendXSS(param.seriesName)}</span>
+          <span style="font-weight:bold">${defendXSS(value) || (defendXSS(value) === 0 ? defendXSS(value) : '--')}${
+            defendXSS(iChartOpt.unit) || ''
+          }</span>
+      </span>
+  </div>
+`
+      }
+    })
+    return htmlString
+  }
+}
+
+function handleTooltip(baseOpt, iChartOpt, dataSet, doubleSide) {
+  baseOpt.tooltip.axisPointer.type = 'none'
+  baseOpt.tooltip.trigger = 'item'
+  if (iChartOpt.tooltip) {
+    merge(baseOpt.tooltip, iChartOpt.tooltip)
+    // 当不显示tip的时候鼠标移动上去没有小手效果
+    if (iChartOpt.tooltip.show === false) {
+      baseOpt.series.forEach((item) => {
+        item.cursor = 'auto'
+      })
+    }
+  }
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleTipFormatter(baseOpt, iChartOpt, dataSet, doubleSide)
+  } else {
+    handleStackTipFormatter(baseOpt, iChartOpt)
+  }
+}
+export { handleGrid, handleYaxis, handleXaxis, handleDataZoom, handleLegend, handleTooltip }
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleSeries.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleSeries.js
new file mode 100644
index 000000000..3b07e1c42
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/handleSeries.js
@@ -0,0 +1,362 @@
+import { CHARTTYPENAME, DOUBLEBASICOPTION, BASICSERIES, BASICDATASERIES, BASICUNIT, BASICBARWIDTH } from './BaseOption'
+import cloneDeep from '../../util/cloneDeep'
+import { getColor } from '../../util/color'
+import merge from '../../util/merge'
+import { getTextWidth } from '../../util/dom'
+import chartToken from './chartToken'
+import Theme from '../../feature/token'
+
+function setStateBarColor(data, stateColorGroup, successColor, stateList) {
+  const min = stateList[0]
+  const max = stateList[stateList.length - 1]
+  // 最大值和最小值相等代表就一个值
+  if (min.value === max.value) {
+    const resState = min.state
+    return data < min.value ? successColor : stateColorGroup[resState]
+  } else {
+    if (data < min.value) {
+      return successColor
+    }
+    if (data > max.value) {
+      const resState = max.state
+      return stateColorGroup[resState]
+    }
+    const len = stateList.length
+    let color
+    for (let i = 0; i < len; i++) {
+      if (stateList[i].value >= data) {
+        const index = i > 0 ? i - 1 : 0
+        const resState = stateList[index].state
+        color = stateColorGroup[resState]
+        break
+      }
+    }
+    return color
+  }
+}
+
+function handleBarColor(params, iChartOpt, dataSet, doubleSide, isTip = false) {
+  const { state, color } = iChartOpt
+  // 是否传了阈值设置
+  if (state) {
+    const { colorState } = Theme.config
+    const stateColorGroup = {
+      error: colorState.colorError,
+      warning: colorState.colorAlert,
+      subwarning: colorState.colorWarning,
+      success: colorState.colorSuccess
+    }
+    const successColor = stateColorGroup.success
+    // 值与状态对应数组
+    const stateList = []
+    for (const k in state) {
+      if (Object.hasOwnProperty.call(state, k)) {
+        const stateItem = {
+          state: k,
+          value: state[k]
+        }
+        stateList.push(stateItem)
+      }
+    }
+    stateList.sort((a, b) => a.value - b.value)
+    return setStateBarColor(
+      isTip ? dataSet.barData[params.dataIndex].value : params.data.value,
+      stateColorGroup,
+      successColor,
+      stateList
+    )
+  } else {
+    return getColor(color, doubleSide ? Math.floor(params.seriesIndex / 2) : params.dataIndex)
+  }
+}
+
+function handleBasicProcessSeries(baseOpt, iChartOpt, dataSet, doubleSide) {
+  baseOpt.series = doubleSide ? cloneDeep(DOUBLEBASICOPTION.series) : cloneDeep(BASICSERIES)
+  if (doubleSide) {
+    // 数据
+    baseOpt.series[0].data = dataSet.barData[0]
+    baseOpt.series[2].data = dataSet.barData[1]
+    baseOpt.series[0].name = dataSet.seriesName[0]
+    baseOpt.series[2].name = dataSet.seriesName[1]
+    baseOpt.series[0].itemStyle.color = getColor(iChartOpt.color, 0)
+    baseOpt.series[2].itemStyle.color = getColor(iChartOpt.color, 1)
+    // 背景
+    baseOpt.series[1].data = new Array(dataSet.barData[0].length).fill(dataSet.maxValue)
+    baseOpt.series[3].data = new Array(dataSet.barData[1].length).fill(dataSet.maxValue)
+  } else {
+    baseOpt.series[0].data = new Array(dataSet.barData.length).fill(0)
+    baseOpt.series[1].data = new Array(dataSet.barData.length).fill(dataSet.maxValue)
+    const dataSreies = cloneDeep(BASICDATASERIES)
+    dataSreies.name = 'data'
+    dataSreies.data = dataSet.barData
+    dataSreies.itemStyle.color = (params) => {
+      return handleBarColor(params, iChartOpt, dataSet, doubleSide)
+    }
+    baseOpt.series.push(dataSreies)
+  }
+}
+
+function setBarBordRadius(barData, seriesName) {
+  // 每行的总数据
+  const total = []
+  for (let rowIndex = 0; rowIndex < seriesName.length; rowIndex++) {
+    const rowData = []
+    barData.forEach((item, columnIndex) => {
+      if (item[rowIndex].value) {
+        const dataInfo = {
+          columnIndex,
+          rowIndex,
+          value: item[rowIndex].value
+        }
+        rowData.push(dataInfo)
+      }
+    })
+    total.push(rowData)
+  }
+  total.forEach((to) => {
+    const tolen = to.length
+    if (tolen !== 0) {
+      // 每行只有一个有效数据
+      if (tolen === 1) {
+        barData[to[0].columnIndex][to[0].rowIndex] = {
+          ...barData[to[0].columnIndex][to[0].rowIndex],
+          value: barData[to[0].columnIndex][to[0].rowIndex].value,
+          itemStyle: {
+            borderRadius: [4, 4, 4, 4]
+          }
+        }
+      } else {
+        barData[to[0].columnIndex][to[0].rowIndex] = {
+          ...barData[to[0].columnIndex][to[0].rowIndex],
+          value: barData[to[0].columnIndex][to[0].rowIndex].value,
+          itemStyle: {
+            borderRadius: [4, 0, 0, 4]
+          }
+        }
+        barData[to[to.length - 1].columnIndex][to[to.length - 1].rowIndex] = {
+          ...barData[to[to.length - 1].columnIndex][to[to.length - 1].rowIndex],
+          value: barData[to[to.length - 1].columnIndex][to[to.length - 1].rowIndex].value,
+          itemStyle: {
+            borderRadius: [0, 4, 4, 0]
+          }
+        }
+      }
+    }
+  })
+}
+
+function handleStackProcessSeries(baseOpt, iChartOpt, dataSet) {
+  // 处理堆叠情况下图表的两端圆角情况,在数据项中加入圆角的配置
+  setBarBordRadius(dataSet.barData, dataSet.seriesName)
+  baseOpt.series = cloneDeep(BASICSERIES)
+  baseOpt.series[0].data = new Array(dataSet.seriesName.length).fill(0)
+  baseOpt.series[1].data = new Array(dataSet.seriesName.length).fill(dataSet.maxValue)
+  dataSet.barData.forEach((item, index) => {
+    const unitSeries = cloneDeep(BASICDATASERIES)
+    unitSeries.data = item
+    unitSeries.itemStyle.borderRadius = undefined
+    unitSeries.name = dataSet.barName[index]
+    unitSeries.stack = 'total'
+    baseOpt.series.push(unitSeries)
+  })
+}
+
+function handleBasicProcessTheme(baseOpt, doubleSide) {
+  const { itemBgEmpty, axisLabelColor } = chartToken
+  if (doubleSide) {
+    baseOpt.series.forEach((ser, serIndex) => {
+      if (serIndex % 2 !== 0) {
+        ser.itemStyle.color = itemBgEmpty
+        // 右侧label颜色
+        ser.label.color = axisLabelColor
+      }
+    })
+  } else {
+    baseOpt.series[0].label.color = axisLabelColor
+    baseOpt.series[1].label.color = axisLabelColor
+    baseOpt.series[1].itemStyle.color = itemBgEmpty
+  }
+}
+
+function handleStackProcessTheme(baseOpt, iChartOpt) {
+  const { itemBgEmpty, axisLabelColor, labeColor } = chartToken
+  // 背景柱条颜色
+  baseOpt.series[1].itemStyle.color = itemBgEmpty
+  // 右侧label颜色
+  baseOpt.series[1].label.color = axisLabelColor
+  // 左侧label颜色
+  baseOpt.series[0].label.color = axisLabelColor
+  // 柱条和文本的颜色
+  baseOpt.series.forEach((serie, index) => {
+    if (index > 1) {
+      serie.itemStyle.color = (params) => {
+        return getColor(iChartOpt.color, params.seriesIndex - 2)
+      }
+      serie.label.show = true
+      serie.label.color = labeColor
+    }
+  })
+}
+
+function handleDoubleLabel(params, iChartOpt, dataSet, position, index = 0) {
+  const { name, dataIndex } = params
+  const innerVal = dataSet.barData[index][dataIndex]._initValue || dataSet.barData[index][dataIndex].value
+  if (innerVal === null || innerVal === undefined) return ''
+  const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT
+  const val = `${innerVal}${innerUnit}`
+  return `{name${position}|${name}}\n{value${position}|${val}}`
+}
+
+function getMaxValLength(dataSet, iChartOpt, index) {
+  let maxLength = 0
+  const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT
+  dataSet.barData[index].forEach((item) => {
+    const val = `${item._initValue || item.value}${innerUnit}`
+    const len = getTextWidth(val, 14)
+    if (len >= maxLength) maxLength = len
+  })
+  return maxLength
+}
+
+function setTitle(baseOpt, iChartOpt) {
+  if (iChartOpt.title) merge(baseOpt.series[0].label, iChartOpt.title)
+}
+
+function setText(baseOpt, iChartOpt, dataSet) {
+  if (iChartOpt.text) {
+    merge(baseOpt.series[1].label, iChartOpt.text)
+    const { formatter } = iChartOpt.text
+    // 右侧为背景的lable为了让用户自定义的formatter获取的params获得中间数据的value去做了内部覆盖处理
+    if (formatter) {
+      baseOpt.series[1].label.formatter = (params) => {
+        const { dataIndex } = params
+        const value = dataSet.barData[dataIndex]._initValue || dataSet.barData[dataIndex].value
+        const inerParams = {
+          ...params,
+          value,
+          data: value
+        }
+        return formatter(inerParams)
+      }
+    }
+  }
+}
+
+function setBarLabel(baseOpt, iChartOpt, dataSet) {
+  // 左侧label
+  baseOpt.series[0].label.formatter = (params) => {
+    return params.name === 'null' || params.name === 'undefined' ? '' : params.name
+  }
+  // 右侧label
+  baseOpt.series[1].label.formatter = (params) => {
+    const innerVal = dataSet.barData[params.dataIndex]._initValue || dataSet.barData[params.dataIndex].value
+    if (innerVal === null || innerVal === undefined) return ''
+    const innerUnit = iChartOpt.unit || iChartOpt.unit === '' ? iChartOpt.unit : BASICUNIT
+    return `${innerVal}${innerUnit}`
+  }
+}
+
+function handleBasicProcessLabel(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (doubleSide) {
+    const { labeColor, disabledColor } = chartToken
+    // 左侧label
+    baseOpt.series[1].label.formatter = function (params) {
+      return handleDoubleLabel(params, iChartOpt, dataSet, 'Left')
+    }
+    baseOpt.series[3].label.formatter = function (params) {
+      return handleDoubleLabel(params, iChartOpt, dataSet, 'Right', 1)
+    }
+    const valWidthL = getMaxValLength(dataSet, iChartOpt, 0)
+    const valWidthR = getMaxValLength(dataSet, iChartOpt, 1)
+    baseOpt.series[1].label.rich.nameLeft.color = disabledColor
+    baseOpt.series[1].label.rich.valueLeft.color = labeColor
+    baseOpt.series[1].label.offset = [-valWidthL - 10, 9]
+    baseOpt.series[3].label.rich.nameRight.color = disabledColor
+    baseOpt.series[3].label.rich.valueRight.color = labeColor
+    baseOpt.series[3].label.offset = [valWidthR + 10, 9]
+  } else {
+    setBarLabel(baseOpt, iChartOpt, dataSet)
+    // 标题文本显示省略
+    setTitle(baseOpt, iChartOpt)
+    // 右侧数据文本显示省略
+    setText(baseOpt, iChartOpt, dataSet)
+  }
+}
+
+function handleStackProcessLabel(baseOpt, iChartOpt, dataSet) {
+  // 处理左侧的文本显示
+  baseOpt.series[0].label.formatter = (params) => {
+    return params.name === 'null' || params.name === 'undefined' ? '' : params.name
+  }
+  if (iChartOpt.title) {
+    merge(baseOpt.series[0].label, iChartOpt.title)
+  }
+  // 处理右侧的文本显示
+  baseOpt.series[1].label.formatter = (params) => {
+    // 系列名称为null不显示文本(数据缺省功能)
+    const name = dataSet.seriesName[params.dataIndex]
+    if (name === null || name === undefined) return ''
+    // 兼容之前暴露的自定义右侧文本显示的功能，计划后期去除
+    if (iChartOpt.text && iChartOpt.text.labelText) return iChartOpt.text.labelText[params.dataIndex]
+    if (iChartOpt.unit) return `${dataSet.sumValue[params.dataIndex]}${iChartOpt.unit}`
+    return `${dataSet.sumValue[params.dataIndex]}`
+  }
+  // 右侧数据文本样式
+  if (iChartOpt.text) {
+    merge(baseOpt.series[1].label, iChartOpt.text)
+  }
+  // 处理数据的文本显示,只有值为有效值的时候才显示label
+  baseOpt.series.forEach((serie, index) => {
+    if (index > 1)
+      serie.label.formatter = (params) => {
+        const value = params.data._initValue || params.data.value
+        return value || ''
+      }
+  })
+  // 中间的图元的文本样式
+  if (iChartOpt.label) {
+    baseOpt.series.forEach((serie, serieIndex) => {
+      if (serieIndex > 1) merge(serie.label, iChartOpt.label)
+    })
+  }
+}
+
+function handleLabel(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleBasicProcessLabel(baseOpt, iChartOpt, dataSet, doubleSide)
+  } else {
+    handleStackProcessLabel(baseOpt, iChartOpt, dataSet)
+  }
+}
+
+function handleTheme(baseOpt, iChartOpt, doubleSide) {
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleBasicProcessTheme(baseOpt, doubleSide)
+  } else {
+    handleStackProcessTheme(baseOpt, iChartOpt)
+  }
+}
+
+function handleBarWidth(baseOpt, iChartOpt) {
+  const { name } = iChartOpt
+  const barWidth = iChartOpt.barWidth || BASICBARWIDTH[name]
+  baseOpt.series.forEach((serie) => {
+    serie.barWidth = barWidth
+  })
+}
+
+function handleSeries(baseOpt, iChartOpt, dataSet, doubleSide) {
+  if (iChartOpt.name === CHARTTYPENAME.ProcessBarChart) {
+    handleBasicProcessSeries(baseOpt, iChartOpt, dataSet, doubleSide)
+  } else {
+    handleStackProcessSeries(baseOpt, iChartOpt, dataSet)
+  }
+  //   处理默认的图表主题
+  handleTheme(baseOpt, iChartOpt, doubleSide)
+
+  handleLabel(baseOpt, iChartOpt, dataSet, doubleSide)
+
+  handleBarWidth(baseOpt, iChartOpt)
+}
+export { handleBarColor }
+export default handleSeries
diff --git a/packages/vue/src/chart/chart-core/base/components/ProcessChart/index.js b/packages/vue/src/chart/chart-core/base/components/ProcessChart/index.js
new file mode 100644
index 000000000..70f862aa8
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/components/ProcessChart/index.js
@@ -0,0 +1,62 @@
+import init from '../../option/init'
+import RectCoordSys from '../../option/RectSys'
+import { PROCESSBARTYPE } from './BaseOption'
+import handleData from './handleData'
+import { event } from '../../util/event'
+import { handleGrid, handleYaxis, handleXaxis, handleDataZoom, handleLegend, handleTooltip } from './handleOption'
+import handleSeries from './handleSeries'
+import cloneDeep from '../../util/cloneDeep'
+
+class ProcessChart {
+  constructor(iChartOption, chartInstance) {
+    // 保存初始的iChartOption
+    this.initIchartOption = cloneDeep(iChartOption)
+    this.baseOption = {}
+    this.iChartOption = {}
+    this.chartInstance = chartInstance
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption)
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption()
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption
+    if (!iChartOption.name) {
+      throw new Error('ProcessChart must have a name')
+    }
+    // 加载默认的直角坐标系
+    RectCoordSys(this.baseOption, iChartOption, iChartOption.name)
+    // 是否是基础双向进度图
+    const doubleSide = iChartOption.type && iChartOption.type === PROCESSBARTYPE
+    const dataSet = handleData(iChartOption, doubleSide)
+    if (!dataSet) return
+
+    handleGrid(this.baseOption, iChartOption, doubleSide, this.chartInstance)
+
+    handleYaxis(this.baseOption, iChartOption, dataSet, doubleSide)
+
+    handleXaxis(this.baseOption, doubleSide, iChartOption)
+    // datazoom和legend会在init配置默认值做特殊处理手动用初始值做混合
+    handleDataZoom(this.baseOption, this.initIchartOption)
+
+    handleLegend(this.baseOption, dataSet, doubleSide, this.initIchartOption)
+
+    handleSeries(this.baseOption, iChartOption, dataSet, doubleSide)
+
+    handleTooltip(this.baseOption, iChartOption, dataSet, doubleSide)
+
+    //  加载事件
+    event(this.chartInstance, iChartOption.event)
+  }
+
+  getOption() {
+    return this.baseOption
+  }
+
+  setOption(option) {
+    this.baseOption = option
+  }
+}
+
+export default ProcessChart
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/RadarChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/RadarChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/RadarChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/RadarChart/getRadar.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/getRadar.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/RadarChart/getRadar.ts
rename to packages/vue/src/chart/chart-core/base/components/RadarChart/getRadar.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/RadarChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/handleOptipn.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/RadarChart/handleOptipn.ts
rename to packages/vue/src/chart/chart-core/base/components/RadarChart/handleOptipn.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/RadarChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/RadarChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/RadarChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/RadarChart/index.ts b/packages/vue/src/chart/chart-core/base/components/RadarChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/RadarChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/RadarChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/RegionChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/RegionChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/RegionChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/RegionChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/RegionChart/handleOption.ts b/packages/vue/src/chart/chart-core/base/components/RegionChart/handleOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/RegionChart/handleOption.ts
rename to packages/vue/src/chart/chart-core/base/components/RegionChart/handleOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/RegionChart/index.ts b/packages/vue/src/chart/chart-core/base/components/RegionChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/RegionChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/RegionChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/BaseOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/BaseOption.ts
rename to packages/vue/src/chart/chart-core/base/components/SankeyChart/BaseOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/SankeyChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/handleColor.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleColor.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/handleColor.ts
rename to packages/vue/src/chart/chart-core/base/components/SankeyChart/handleColor.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/handleData.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleData.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/handleData.ts
rename to packages/vue/src/chart/chart-core/base/components/SankeyChart/handleData.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/handleOption.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/handleOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/handleOption.ts
rename to packages/vue/src/chart/chart-core/base/components/SankeyChart/handleOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/index.ts b/packages/vue/src/chart/chart-core/base/components/SankeyChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SankeyChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/SankeyChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SunburstChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/SunburstChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SunburstChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/SunburstChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SunburstChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/SunburstChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SunburstChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/SunburstChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/SunburstChart/index.ts b/packages/vue/src/chart/chart-core/base/components/SunburstChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/SunburstChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/SunburstChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/TreeChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/BaseOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/TreeChart/BaseOption.ts
rename to packages/vue/src/chart/chart-core/base/components/TreeChart/BaseOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/TreeChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/TreeChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/TreeChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/TreeChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/handleOptipn.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/TreeChart/handleOptipn.ts
rename to packages/vue/src/chart/chart-core/base/components/TreeChart/handleOptipn.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/TreeChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/TreeChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/TreeChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/TreeChart/index.ts b/packages/vue/src/chart/chart-core/base/components/TreeChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/TreeChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/TreeChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/BaseOption.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/BaseOption.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/BaseOption.ts
rename to packages/vue/src/chart/chart-core/base/components/WordCloudChart/BaseOption.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/chartToken.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/chartToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/chartToken.ts
rename to packages/vue/src/chart/chart-core/base/components/WordCloudChart/chartToken.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/handleOptipn.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleOptipn.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/handleOptipn.ts
rename to packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleOptipn.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/handleSeries.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleSeries.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/handleSeries.ts
rename to packages/vue/src/chart/chart-core/base/components/WordCloudChart/handleSeries.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/index.ts b/packages/vue/src/chart/chart-core/base/components/WordCloudChart/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/components/WordCloudChart/index.ts
rename to packages/vue/src/chart/chart-core/base/components/WordCloudChart/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/core.ts b/packages/vue/src/chart/chart-core/base/core.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/core.ts
rename to packages/vue/src/chart/chart-core/base/core.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/axistip/index.ts b/packages/vue/src/chart/chart-core/base/feature/axistip/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/axistip/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/axistip/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/drag/index.less b/packages/vue/src/chart/chart-core/base/feature/drag/index.less
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/drag/index.less
rename to packages/vue/src/chart/chart-core/base/feature/drag/index.less
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/drag/index.ts b/packages/vue/src/chart/chart-core/base/feature/drag/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/drag/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/drag/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/fluctuation/index.ts b/packages/vue/src/chart/chart-core/base/feature/fluctuation/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/fluctuation/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/fluctuation/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/mediaScreen/index.ts b/packages/vue/src/chart/chart-core/base/feature/mediaScreen/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/mediaScreen/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/mediaScreen/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/mini/index.ts b/packages/vue/src/chart/chart-core/base/feature/mini/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/mini/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/mini/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/readScreen/index.ts b/packages/vue/src/chart/chart-core/base/feature/readScreen/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/readScreen/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/readScreen/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/bpit/dark.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/dark.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/bpit/dark.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/bpit/dark.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/bpit/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/bpit/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/bpit/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/bpit/light.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/bpit/light.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/bpit/light.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/bpit/light.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/cloud/board.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/board.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/cloud/board.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/cloud/board.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/cloud/dark.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/dark.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/cloud/dark.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/cloud/dark.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/cloud/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/cloud/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/cloud/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/cloud/light.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/cloud/light.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/cloud/light.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/cloud/light.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/hdesign/board.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/board.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/hdesign/board.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/board.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/hdesign/dark.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/dark.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/hdesign/dark.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/dark.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/hdesign/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/hdesign/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/hdesign/light.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/light.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/hdesign/light.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/hdesign/light.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/ict/board.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/board.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/ict/board.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/ict/board.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/ict/dark.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/dark.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/ict/dark.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/ict/dark.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/ict/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/ict/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/ict/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/ict/light.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/ict/light.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/ict/light.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/ict/light.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/color/util.ts b/packages/vue/src/chart/chart-core/base/feature/token/color/util.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/color/util.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/color/util.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/constants.ts b/packages/vue/src/chart/chart-core/base/feature/token/constants.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/constants.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/constants.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/AreaChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AreaChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/AreaChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AreaChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/AssembleBubbleChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AssembleBubbleChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/AssembleBubbleChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/AssembleBubbleChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/BarChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BarChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/BarChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BarChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/BoxplotChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BoxplotChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/BoxplotChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BoxplotChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/BubbleChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BubbleChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/BubbleChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/BubbleChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/CandlestickChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CandlestickChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/CandlestickChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CandlestickChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/CircleProcessChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CircleProcessChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/CircleProcessChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/CircleProcessChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/FunnelChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/FunnelChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/FunnelChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/FunnelChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/GaugeChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/GaugeChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/GaugeChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/GaugeChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/HeatMapChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HeatMapChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/HeatMapChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HeatMapChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/HillChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HillChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/HillChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/HillChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/JadeJueChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/JadeJueChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/JadeJueChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/JadeJueChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/LineChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LineChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/LineChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LineChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/LiquidfillChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LiquidfillChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/LiquidfillChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/LiquidfillChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/PieChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PieChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/PieChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PieChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/PolarBarChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PolarBarChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/PolarBarChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/PolarBarChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/ProcessChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ProcessChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/ProcessChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ProcessChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/RadarChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RadarChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/RadarChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RadarChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/RegionChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RegionChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/RegionChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/RegionChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/SankeyChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SankeyChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/SankeyChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SankeyChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/ScatterChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ScatterChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/ScatterChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/ScatterChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/SunburstChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SunburstChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/SunburstChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/SunburstChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/TreeChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/TreeChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/TreeChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/TreeChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/WaveChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WaveChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/WaveChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WaveChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/WordCloudChart.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WordCloudChart.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/WordCloudChart.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/WordCloudChart.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/chartsToken/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/chartsToken/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/getAliasToken.ts
similarity index 55%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getAliasToken.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/getAliasToken.ts
index 9f9741408..d80f89d0d 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getAliasToken.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/getAliasToken.ts
@@ -1,20 +1,21 @@
-import { THEMES } from '../constants';
-import { getIctAliasToken } from '../theme/ict/getAliasToken';
-import { getCloudAliasToken } from '../theme/cloud/getAliasToken';
+import { THEMES } from '../constants'
+import { getIctAliasToken } from '../theme/ict/getAliasToken'
+import { getCloudAliasToken } from '../theme/cloud/getAliasToken'
+
 // import { getBpitAliasToken } from '../theme/bpit/getAliasToken';
-import { getHdesignAliasToken } from '../theme/hdesign/getAliasToken';
+import { getHdesignAliasToken } from '../theme/hdesign/getAliasToken'
 
 // aliasToken的回调映射,bit先和hdesign拉齐原先那套暂不删除
 const aliasTokenMap = {
   [THEMES.LIGHT]: getIctAliasToken,
-  [THEMES.DARK]: globalToken => getIctAliasToken(globalToken, false),
+  [THEMES.DARK]: (globalToken) => getIctAliasToken(globalToken, false),
   [THEMES.BPIT_LIGHT]: getHdesignAliasToken,
-  [THEMES.BPIT_DARK]: globalToken => getHdesignAliasToken(globalToken, false),
+  [THEMES.BPIT_DARK]: (globalToken) => getHdesignAliasToken(globalToken, false),
   [THEMES.CLOUD_LIGHT]: getCloudAliasToken,
-  [THEMES.CLOUD_DARK]: globalToken => getCloudAliasToken(globalToken, false),
+  [THEMES.CLOUD_DARK]: (globalToken) => getCloudAliasToken(globalToken, false),
   [THEMES.HDESIGN_LIGHT]: getHdesignAliasToken,
-  [THEMES.HDESIGN_DARK]: globalToken => getHdesignAliasToken(globalToken, false),
-};
+  [THEMES.HDESIGN_DARK]: (globalToken) => getHdesignAliasToken(globalToken, false)
+}
 
 /**
  *  根据globalToken获取aliasToken
@@ -23,9 +24,9 @@ const aliasTokenMap = {
  */
 function getAliasToken(themeName, globalToken) {
   return {
-    ...aliasTokenMap[themeName](globalToken),
-  };
+    ...aliasTokenMap[themeName](globalToken)
+  }
 }
 
-export default getAliasToken;
-export { aliasTokenMap };
+export default getAliasToken
+export { aliasTokenMap }
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getGlobalToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/getGlobalToken.ts
similarity index 61%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getGlobalToken.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/getGlobalToken.ts
index 88ce9c73b..0b5362a4f 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getGlobalToken.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/getGlobalToken.ts
@@ -1,5 +1,5 @@
-import color from '../color';
-import globalToken from './globalToken';
+import color from '../color'
+import globalToken from './globalToken'
 
 /**
  * 获取相应的主题的globalToken
@@ -8,6 +8,6 @@ import globalToken from './globalToken';
 export default function getGlobalToken(themeName) {
   return {
     ...globalToken,
-    ...color[themeName].grayScale,
-  };
+    ...color[themeName].grayScale
+  }
 }
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getModelToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/getModelToken.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getModelToken.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/getModelToken.ts
index dbe00ecc9..e85d319c6 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/getModelToken.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/getModelToken.ts
@@ -1,4 +1,4 @@
-/** 以下token的命名参考echarts文档的名称*/
+/** 以下token的命名参考echarts文档的名称 */
 /**
  *  根据mapToken获取modelToken
  * @param {object} aliasToken
@@ -48,8 +48,8 @@ function getModelToken(aliasToken) {
     borderWidthNone,
     containerBoderRadius,
     paddingNone,
-    paddingLG,
-  } = aliasToken;
+    paddingLG
+  } = aliasToken
 
   return {
     /** -----标题------ */
@@ -296,8 +296,8 @@ function getModelToken(aliasToken) {
     // 手柄hover时中心填充色(todo待处理)
     dataZoomEmphasisHandleColor: colorTextPrimary,
     // 手柄hover时外框色
-    dataZoomEmphasisHandleBorderColor: colorBgPrimary,
-  };
+    dataZoomEmphasisHandleBorderColor: colorBgPrimary
+  }
 }
 
-export default getModelToken;
+export default getModelToken
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/border.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/border.ts
similarity index 77%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/border.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/border.ts
index 634c1f0b5..492887732 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/border.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/border.ts
@@ -5,7 +5,7 @@ const border = {
   borderBase: 1,
   border2x: 2,
   border4x: 4,
-  border8x: 8,
-};
+  border8x: 8
+}
 
-export default border;
+export default border
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/borderRadius.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/borderRadius.ts
similarity index 95%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/borderRadius.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/borderRadius.ts
index a64d0f389..7f8654d2e 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/borderRadius.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/borderRadius.ts
@@ -52,8 +52,8 @@ const borderRadius = {
   borderRadiusMd: 6,
   borderRadiusLg: 8,
   borderRadiusXl: 12,
-  borderRadiusFull: 9999,
-};
+  borderRadiusFull: 9999
+}
 
-export default borderRadius;
+export default borderRadius
 // export { getRadius };
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/font.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/font.ts
similarity index 96%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/font.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/font.ts
index 82cd9a909..0e4664235 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/font.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/font.ts
@@ -46,8 +46,8 @@ const font = {
   fontSize5xl: 30,
   fontSize6xl: 32,
   fontSize7xl: 36,
-  fontSize8xl: 40,
-};
+  fontSize8xl: 40
+}
 
-export default font;
+export default font
 // export { getFont };
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/index.ts
new file mode 100644
index 000000000..1d7de8453
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/index.ts
@@ -0,0 +1,17 @@
+import font from './font'
+import lineType from './lineType'
+import space from './space'
+import border from './border'
+import size from './size'
+import borderRadius from './borderRadius'
+
+const globalToken = {
+  ...font,
+  ...lineType,
+  ...space,
+  ...border,
+  ...size,
+  ...borderRadius
+}
+
+export default globalToken
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/lineType.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/lineType.ts
similarity index 63%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/lineType.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/lineType.ts
index 128a39812..5a66c93d5 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/lineType.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/lineType.ts
@@ -2,7 +2,7 @@
 const lineType = {
   lineTypeSolid: 'solid',
   lineTypeDashed: 'dashed',
-  lineTypeDashedLG: [4, 4],
-};
+  lineTypeDashedLG: [4, 4]
+}
 
-export default lineType;
+export default lineType
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/size.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/size.ts
similarity index 72%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/size.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/size.ts
index 2367ced25..acbea11f8 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/size.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/size.ts
@@ -5,7 +5,7 @@ const size = {
   size3x: 12,
   size4x: 16,
   size5x: 20,
-  size6x: 24,
-};
+  size6x: 24
+}
 
-export default size;
+export default size
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/space.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/space.ts
similarity index 81%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/space.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/space.ts
index 96237d1f0..482649534 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/factory/globalToken/space.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/globalToken/space.ts
@@ -9,7 +9,7 @@ const space = {
   space5x: 20,
   space6x: 24,
   space7x: 28,
-  space8x: 32,
-};
+  space8x: 32
+}
 
-export default space;
+export default space
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/index.ts
new file mode 100644
index 000000000..be8d1c7a7
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/index.ts
@@ -0,0 +1,23 @@
+import color from '../color'
+import getGlobalToken from './getGlobalToken'
+import getAliasToken from './getAliasToken'
+import getModelToken from './getModelToken'
+import getChartsToken from './chartsToken'
+
+/**
+ * 获取相应的主题的token
+ * @param {string} themeName  主题名称
+ */
+function getToken(themeName) {
+  const globalToken = getGlobalToken(themeName)
+  const aliasToken = getAliasToken(themeName, globalToken)
+  const modelToken = getModelToken(aliasToken)
+  const chartsToken = getChartsToken(aliasToken)
+  return {
+    ...color[themeName].colorSet,
+    ...modelToken,
+    ...chartsToken
+  }
+}
+
+export default getToken
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/factory/mergeToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/factory/mergeToken.ts
new file mode 100644
index 000000000..7e40a70a2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/factory/mergeToken.ts
@@ -0,0 +1,61 @@
+import { aliasTokenMap } from './getAliasToken'
+import getGlobalToken from './getGlobalToken'
+import getModelToken from './getModelToken'
+import getChartsToken from './chartsToken'
+import { TOKENCHARTNAMES } from '../constants'
+import color from '../color'
+import merge from '../../../util/merge'
+import cloneDeep from '../../../util/cloneDeep'
+
+function getBasicToken(name, config) {
+  return {
+    ...getGlobalToken(name),
+    ...config
+  }
+}
+
+function getMapToken(name, config) {
+  return {
+    ...aliasTokenMap[name](config),
+    ...config
+  }
+}
+
+function getConfigModelToken(config) {
+  return {
+    ...getModelToken(config),
+    ...config
+  }
+}
+
+function mergeSpecialToken(name, chartsConfig, config) {
+  TOKENCHARTNAMES.forEach((item) => {
+    if (config[item]) merge(chartsConfig, config[item])
+  })
+  // 针对colorState特殊处理
+  const { colorState } = config
+  if (colorState) {
+    const newColorState = merge(cloneDeep(color[name].colorSet.colorState), colorState)
+    return { ...chartsConfig, colorState: newColorState }
+  }
+  return { ...chartsConfig }
+}
+
+/**
+ *
+ * @param {string} name  传入的主题名称
+ * @param {object} config   传入的主题配置
+ */
+
+export default function mergeToken(name, config) {
+  const basicConfig = getBasicToken(name, config)
+  const mapConfig = getMapToken(name, basicConfig)
+  const modelConfig = getConfigModelToken(mapConfig)
+  const chartsConfig = getChartsToken(mapConfig)
+  const specialConfig = mergeSpecialToken(name, chartsConfig, config)
+  return {
+    colorGroup: basicConfig.colorGroup,
+    ...modelConfig,
+    ...specialConfig
+  }
+}
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/index.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/readme.md b/packages/vue/src/chart/chart-core/base/feature/token/readme.md
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/readme.md
rename to packages/vue/src/chart/chart-core/base/feature/token/readme.md
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/bpit/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/getAliasToken.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/theme/bpit/getAliasToken.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/getAliasToken.ts
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/index.ts
new file mode 100644
index 000000000..6b9c795dd
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/bpit/index.ts
@@ -0,0 +1,8 @@
+import { THEMES } from '../../constants'
+import getToken from '../../factory'
+
+const bpitLight = getToken(THEMES.BPIT_LIGHT)
+
+const bpitDark = getToken(THEMES.BPIT_DARK)
+
+export { bpitLight, bpitDark }
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/cloud/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/getAliasToken.ts
similarity index 96%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/theme/cloud/getAliasToken.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/getAliasToken.ts
index 383bef0b9..be6e10f63 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/cloud/getAliasToken.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/getAliasToken.ts
@@ -1,4 +1,4 @@
-import { codeToRGB } from '../../../../util/color';
+import { codeToRGB } from '../../../../util/color'
 
 function getAliasToken(globalToken, light = true) {
   const {
@@ -31,8 +31,8 @@ function getAliasToken(globalToken, light = true) {
     space8x,
     space4x,
     size6x,
-    size5x,
-  } = globalToken;
+    size5x
+  } = globalToken
 
   return {
     //  初级底色 图表背景
@@ -171,9 +171,9 @@ function getAliasToken(globalToken, light = true) {
     paddingNone: spaceNone,
     paddingSM: spaceBase,
     padding: space2x,
-    paddingLG: space4x,
-  };
+    paddingLG: space4x
+  }
 }
 
-export default getAliasToken;
-export { getAliasToken as getCloudAliasToken };
+export default getAliasToken
+export { getAliasToken as getCloudAliasToken }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/index.ts
new file mode 100644
index 000000000..b3a3ea3d0
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/cloud/index.ts
@@ -0,0 +1,8 @@
+import { THEMES } from '../../constants'
+import getToken from '../../factory'
+
+const cloudLight = getToken(THEMES.CLOUD_LIGHT)
+
+const cloudDark = getToken(THEMES.CLOUD_DARK)
+
+export { cloudLight, cloudDark }
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts
similarity index 96%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts
index 20a077e75..04b91c30d 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/getAliasToken.ts
@@ -1,4 +1,4 @@
-import { codeToRGB } from '../../../../util/color';
+import { codeToRGB } from '../../../../util/color'
 
 function getAliasToken(globalToken, light = true) {
   const {
@@ -34,8 +34,8 @@ function getAliasToken(globalToken, light = true) {
     space4x,
     size6x,
     size5x,
-    borderRadiusLg,
-  } = globalToken;
+    borderRadiusLg
+  } = globalToken
 
   return {
     //  初级底色  图表背景
@@ -175,9 +175,9 @@ function getAliasToken(globalToken, light = true) {
     paddingNone: spaceNone,
     paddingSM: spaceBase,
     padding: space2x,
-    paddingLG: space4x,
-  };
+    paddingLG: space4x
+  }
 }
 
-export default getAliasToken;
-export { getAliasToken as getHdesignAliasToken };
+export default getAliasToken
+export { getAliasToken as getHdesignAliasToken }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/index.ts
new file mode 100644
index 000000000..cc549ede4
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/hdesign/index.ts
@@ -0,0 +1,8 @@
+import { THEMES } from '../../constants'
+import getToken from '../../factory'
+
+const hdesignLight = getToken(THEMES.HDESIGN_LIGHT)
+
+const hdesignDark = getToken(THEMES.HDESIGN_DARK)
+
+export { hdesignLight, hdesignDark }
diff --git a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/ict/getAliasToken.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/getAliasToken.ts
similarity index 96%
rename from packages/vue/src/chart-beta/chart-core/base/feature/token/theme/ict/getAliasToken.ts
rename to packages/vue/src/chart/chart-core/base/feature/token/theme/ict/getAliasToken.ts
index 8acd38e19..25aa73deb 100644
--- a/packages/vue/src/chart-beta/chart-core/base/feature/token/theme/ict/getAliasToken.ts
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/getAliasToken.ts
@@ -1,4 +1,4 @@
-import { codeToRGB } from '../../../../util/color';
+import { codeToRGB } from '../../../../util/color'
 
 function getAliasToken(globalToken, light = true) {
   const {
@@ -31,8 +31,8 @@ function getAliasToken(globalToken, light = true) {
     space8x,
     space4x,
     size6x,
-    size5x,
-  } = globalToken;
+    size5x
+  } = globalToken
 
   return {
     //  初级底色 图表背景
@@ -171,9 +171,9 @@ function getAliasToken(globalToken, light = true) {
     paddingNone: spaceNone,
     paddingSM: spaceBase,
     padding: space2x,
-    paddingLG: space4x,
-  };
+    paddingLG: space4x
+  }
 }
 
-export default getAliasToken;
-export { getAliasToken as getIctAliasToken };
+export default getAliasToken
+export { getAliasToken as getIctAliasToken }
diff --git a/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/index.ts b/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/index.ts
new file mode 100644
index 000000000..7ebd8d7c2
--- /dev/null
+++ b/packages/vue/src/chart/chart-core/base/feature/token/theme/ict/index.ts
@@ -0,0 +1,8 @@
+import { THEMES } from '../../constants'
+import getToken from '../../factory'
+
+const ictLight = getToken(THEMES.LIGHT)
+
+const ictDark = getToken(THEMES.DARK)
+
+export { ictLight, ictDark }
diff --git a/packages/vue/src/chart-beta/chart-core/base/index.less b/packages/vue/src/chart/chart-core/base/index.less
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/index.less
rename to packages/vue/src/chart/chart-core/base/index.less
diff --git a/packages/vue/src/chart-beta/chart-core/base/index.ts b/packages/vue/src/chart/chart-core/base/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/index.ts
rename to packages/vue/src/chart/chart-core/base/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/PolarSys/index.ts b/packages/vue/src/chart/chart-core/base/option/PolarSys/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/PolarSys/index.ts
rename to packages/vue/src/chart/chart-core/base/option/PolarSys/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/RectSys/index.ts b/packages/vue/src/chart/chart-core/base/option/RectSys/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/RectSys/index.ts
rename to packages/vue/src/chart/chart-core/base/option/RectSys/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/base/index.ts b/packages/vue/src/chart/chart-core/base/option/base/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/base/index.ts
rename to packages/vue/src/chart/chart-core/base/option/base/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/angleAxis/base.ts b/packages/vue/src/chart/chart-core/base/option/config/angleAxis/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/angleAxis/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/angleAxis/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/angleAxis/index.ts b/packages/vue/src/chart/chart-core/base/option/config/angleAxis/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/angleAxis/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/angleAxis/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/datazoom/base.ts b/packages/vue/src/chart/chart-core/base/option/config/datazoom/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/datazoom/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/datazoom/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/datazoom/index.ts b/packages/vue/src/chart/chart-core/base/option/config/datazoom/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/datazoom/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/datazoom/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/grid/base.ts b/packages/vue/src/chart/chart-core/base/option/config/grid/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/grid/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/grid/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/grid/index.ts b/packages/vue/src/chart/chart-core/base/option/config/grid/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/grid/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/grid/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/base.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/icon.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/icon.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/icon.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/icon.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/index.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/itemStyle.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/itemStyle.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/itemStyle.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/itemStyle.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/ldata.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/ldata.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/ldata.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/ldata.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/pageIcon.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/pageIcon.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/pageIcon.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/pageIcon.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/position.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/position.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/position.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/position.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/size.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/size.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/size.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/size.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/legend/textStyle.ts b/packages/vue/src/chart/chart-core/base/option/config/legend/textStyle.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/legend/textStyle.ts
rename to packages/vue/src/chart/chart-core/base/option/config/legend/textStyle.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/mark/index.ts b/packages/vue/src/chart/chart-core/base/option/config/mark/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/mark/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/mark/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/polar/base.ts b/packages/vue/src/chart/chart-core/base/option/config/polar/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/polar/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/polar/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/polar/index.ts b/packages/vue/src/chart/chart-core/base/option/config/polar/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/polar/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/polar/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/polarTitle/base.ts b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/polarTitle/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/polarTitle/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/polarTitle/index.ts b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/polarTitle/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/polarTitle/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/polarTitle/subtextStyle.ts b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/subtextStyle.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/polarTitle/subtextStyle.ts
rename to packages/vue/src/chart/chart-core/base/option/config/polarTitle/subtextStyle.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/polarTitle/textStyle.ts b/packages/vue/src/chart/chart-core/base/option/config/polarTitle/textStyle.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/polarTitle/textStyle.ts
rename to packages/vue/src/chart/chart-core/base/option/config/polarTitle/textStyle.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/radiusAxis/base.ts b/packages/vue/src/chart/chart-core/base/option/config/radiusAxis/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/radiusAxis/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/radiusAxis/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/radiusAxis/index.ts b/packages/vue/src/chart/chart-core/base/option/config/radiusAxis/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/radiusAxis/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/radiusAxis/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/rectTitle/base.ts b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/rectTitle/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/rectTitle/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/rectTitle/index.ts b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/rectTitle/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/rectTitle/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/rectTitle/titlePadding.ts b/packages/vue/src/chart/chart-core/base/option/config/rectTitle/titlePadding.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/rectTitle/titlePadding.ts
rename to packages/vue/src/chart/chart-core/base/option/config/rectTitle/titlePadding.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/tooltip/axisPointer.ts b/packages/vue/src/chart/chart-core/base/option/config/tooltip/axisPointer.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/tooltip/axisPointer.ts
rename to packages/vue/src/chart/chart-core/base/option/config/tooltip/axisPointer.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/tooltip/base.ts b/packages/vue/src/chart/chart-core/base/option/config/tooltip/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/tooltip/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/tooltip/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/tooltip/index.ts b/packages/vue/src/chart/chart-core/base/option/config/tooltip/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/tooltip/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/tooltip/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/axisLabel.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLabel.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/axisLabel.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLabel.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/axisLine.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLine.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/axisLine.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/axisLine.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/axisMargin.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/axisMargin.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/axisMargin.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/axisMargin.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/base.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/boundaryGap.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/boundaryGap.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/boundaryGap.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/boundaryGap.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/index.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/name.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/name.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/name.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/name.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/xdata.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/xdata.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/xdata.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/xdata.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/xkey.ts b/packages/vue/src/chart/chart-core/base/option/config/xAxis/xkey.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/xAxis/xkey.ts
rename to packages/vue/src/chart/chart-core/base/option/config/xAxis/xkey.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/yAxis/base.ts b/packages/vue/src/chart/chart-core/base/option/config/yAxis/base.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/yAxis/base.ts
rename to packages/vue/src/chart/chart-core/base/option/config/yAxis/base.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/yAxis/index.ts b/packages/vue/src/chart/chart-core/base/option/config/yAxis/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/yAxis/index.ts
rename to packages/vue/src/chart/chart-core/base/option/config/yAxis/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/config/yAxis/ydata.ts b/packages/vue/src/chart/chart-core/base/option/config/yAxis/ydata.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/config/yAxis/ydata.ts
rename to packages/vue/src/chart/chart-core/base/option/config/yAxis/ydata.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/option/init/index.ts b/packages/vue/src/chart/chart-core/base/option/init/index.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/option/init/index.ts
rename to packages/vue/src/chart/chart-core/base/option/init/index.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/register.ts b/packages/vue/src/chart/chart-core/base/register.ts
similarity index 95%
rename from packages/vue/src/chart-beta/chart-core/base/register.ts
rename to packages/vue/src/chart/chart-core/base/register.ts
index 6d43f8e14..3c053fec0 100644
--- a/packages/vue/src/chart-beta/chart-core/base/register.ts
+++ b/packages/vue/src/chart/chart-core/base/register.ts
@@ -15,6 +15,7 @@ import BoxplotChart from './components/BoxplotChart'
 import RegionChart from './components/RegionChart'
 import CandlestickChart from './components/CandlestickChart'
 import GraphChart from './components/GraphChart'
+import ProcessChart from './components/ProcessChart'
 
 function Register() {
   this.registeredComp = {}
@@ -108,6 +109,10 @@ const components = [
   {
     name: 'GraphChart',
     component: GraphChart
+  },
+  {
+    name: 'ProcessChart',
+    component: ProcessChart
   }
 ]
 
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/centerDom.ts b/packages/vue/src/chart/chart-core/base/util/centerDom.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/centerDom.ts
rename to packages/vue/src/chart/chart-core/base/util/centerDom.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/cloneDeep.ts b/packages/vue/src/chart/chart-core/base/util/cloneDeep.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/cloneDeep.ts
rename to packages/vue/src/chart/chart-core/base/util/cloneDeep.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/color.ts b/packages/vue/src/chart/chart-core/base/util/color.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/color.ts
rename to packages/vue/src/chart/chart-core/base/util/color.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/convert.ts b/packages/vue/src/chart/chart-core/base/util/convert.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/convert.ts
rename to packages/vue/src/chart/chart-core/base/util/convert.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/defendXSS.ts b/packages/vue/src/chart/chart-core/base/util/defendXSS.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/defendXSS.ts
rename to packages/vue/src/chart/chart-core/base/util/defendXSS.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/dom.ts b/packages/vue/src/chart/chart-core/base/util/dom.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/dom.ts
rename to packages/vue/src/chart/chart-core/base/util/dom.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/equal.ts b/packages/vue/src/chart/chart-core/base/util/equal.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/equal.ts
rename to packages/vue/src/chart/chart-core/base/util/equal.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/event.ts b/packages/vue/src/chart/chart-core/base/util/event.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/event.ts
rename to packages/vue/src/chart/chart-core/base/util/event.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/hashMap.ts b/packages/vue/src/chart/chart-core/base/util/hashMap.ts
similarity index 88%
rename from packages/vue/src/chart-beta/chart-core/base/util/hashMap.ts
rename to packages/vue/src/chart/chart-core/base/util/hashMap.ts
index edf4ba6bd..cf2d11fbd 100644
--- a/packages/vue/src/chart-beta/chart-core/base/util/hashMap.ts
+++ b/packages/vue/src/chart/chart-core/base/util/hashMap.ts
@@ -55,7 +55,7 @@ class MapPolyfill {
   }
 
   has(key) {
-    return this.data.hasOwnProperty(key)
+    return Object.prototype.hasOwnProperty.call(this.data, key)
   }
 
   get(key) {
@@ -74,7 +74,7 @@ class MapPolyfill {
   forEach(callback) {
     const data = this.data
     for (const key in data) {
-      if (data.hasOwnProperty(key)) {
+      if (Object.prototype.hasOwnProperty.call(data, key)) {
         callback(data[key], key)
       }
     }
@@ -90,7 +90,7 @@ function keys(obj) {
   }
   let keyList = []
   for (let key in obj) {
-    if (obj.hasOwnProperty(key)) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
       keyList.push(key)
     }
   }
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/init/insert.ts b/packages/vue/src/chart/chart-core/base/util/init/insert.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/init/insert.ts
rename to packages/vue/src/chart/chart-core/base/util/init/insert.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/math.ts b/packages/vue/src/chart/chart-core/base/util/math.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/math.ts
rename to packages/vue/src/chart/chart-core/base/util/math.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/merge.ts b/packages/vue/src/chart/chart-core/base/util/merge.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/merge.ts
rename to packages/vue/src/chart/chart-core/base/util/merge.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/proxy.ts b/packages/vue/src/chart/chart-core/base/util/proxy.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/proxy.ts
rename to packages/vue/src/chart/chart-core/base/util/proxy.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/sort/max.ts b/packages/vue/src/chart/chart-core/base/util/sort/max.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/sort/max.ts
rename to packages/vue/src/chart/chart-core/base/util/sort/max.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/sort/min.ts b/packages/vue/src/chart/chart-core/base/util/sort/min.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/sort/min.ts
rename to packages/vue/src/chart/chart-core/base/util/sort/min.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/throttle.ts b/packages/vue/src/chart/chart-core/base/util/throttle.ts
similarity index 95%
rename from packages/vue/src/chart-beta/chart-core/base/util/throttle.ts
rename to packages/vue/src/chart/chart-core/base/util/throttle.ts
index 9d55c9693..91b5229aa 100644
--- a/packages/vue/src/chart-beta/chart-core/base/util/throttle.ts
+++ b/packages/vue/src/chart/chart-core/base/util/throttle.ts
@@ -14,6 +14,7 @@ function throttle(delay, callback, options) {
     cancelled = !upcomingOnly
   }
   function wrapper(...arguments_) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this
     const elapsed = Date.now() - lastExec
     if (cancelled) {
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/tips.ts b/packages/vue/src/chart/chart-core/base/util/tips.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/tips.ts
rename to packages/vue/src/chart/chart-core/base/util/tips.ts
diff --git a/packages/vue/src/chart-beta/chart-core/base/util/type.ts b/packages/vue/src/chart/chart-core/base/util/type.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/base/util/type.ts
rename to packages/vue/src/chart/chart-core/base/util/type.ts
diff --git a/packages/vue/src/chart-beta/chart-core/common/constants.ts b/packages/vue/src/chart/chart-core/common/constants.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/common/constants.ts
rename to packages/vue/src/chart/chart-core/common/constants.ts
diff --git a/packages/vue/src/chart-beta/chart-core/common/defendXSS.ts b/packages/vue/src/chart/chart-core/common/defendXSS.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/common/defendXSS.ts
rename to packages/vue/src/chart/chart-core/common/defendXSS.ts
diff --git a/packages/vue/src/chart-beta/chart-core/common/extend.ts b/packages/vue/src/chart/chart-core/common/extend.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/common/extend.ts
rename to packages/vue/src/chart/chart-core/common/extend.ts
diff --git a/packages/vue/src/chart-beta/chart-core/common/numerify.ts b/packages/vue/src/chart/chart-core/common/numerify.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-core/common/numerify.ts
rename to packages/vue/src/chart/chart-core/common/numerify.ts
index 1d5331f5f..ade227b7f 100644
--- a/packages/vue/src/chart-beta/chart-core/common/numerify.ts
+++ b/packages/vue/src/chart/chart-core/common/numerify.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-void */
 /**
  * Copyright (c) 2022 - present TinyVue Authors.
  * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
@@ -239,6 +240,7 @@ let numerifyPercent = {
 
 extend(options, DEFAULT_OPTIONS)
 
+// eslint-disable-next-line import/no-mutable-exports
 let numerify
 
 function format(value, formatType, roundingFunc) {
diff --git a/packages/vue/src/chart-beta/chart-core/common/object.ts b/packages/vue/src/chart/chart-core/common/object.ts
similarity index 89%
rename from packages/vue/src/chart-beta/chart-core/common/object.ts
rename to packages/vue/src/chart/chart-core/common/object.ts
index c58f55d0b..d1f4a49b7 100644
--- a/packages/vue/src/chart-beta/chart-core/common/object.ts
+++ b/packages/vue/src/chart/chart-core/common/object.ts
@@ -1,15 +1,14 @@
-
 /**
-* 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.
-*
-*/
+ * 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 { hasOwn, typeOf, isObject, isPlainObject, isNull } from './type'
 
@@ -32,6 +31,7 @@ export const each = (obj, handle) => {
   }
 }
 
+// eslint-disable-next-line import/no-mutable-exports
 let extend
 
 /**
@@ -110,7 +110,11 @@ export const setObj = (data, names, value, isMerge) => {
 
     item = names[len]
 
-    isMerge ? (isPlainObject(tmpl[item]) ? extend(true, tmpl[item], value) : (tmpl[item] = value)) : (tmpl[item] = value)
+    isMerge
+      ? isPlainObject(tmpl[item])
+        ? extend(true, tmpl[item], value)
+        : (tmpl[item] = value)
+      : (tmpl[item] = value)
   } else {
     isMerge ? (isPlainObject(obj[item]) ? extend(true, obj[item], value) : (obj[item] = value)) : (obj[item] = value)
   }
@@ -158,7 +162,9 @@ export const copyField = (data, fields, isMerge, isExclude) => {
   }
 
   if (isPlainObject(data)) {
-    return Array.isArray(fields) ? innerCopyFields(data, fields, isMerge, isExclude) : extend(isMerge !== false, {}, data)
+    return Array.isArray(fields)
+      ? innerCopyFields(data, fields, isMerge, isExclude)
+      : extend(isMerge !== false, {}, data)
   }
 
   return data
@@ -184,6 +190,7 @@ export const copyArray = (arr) => (Array.isArray(arr) ? arr.map((item) => copyFi
 
 const deepCopy = (target, name, deep, copy, src) => {
   let copyIsArray
+  // eslint-disable-next-line no-cond-assign
   if (deep && copy && (isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))) {
     if (copyIsArray) {
       copyIsArray = false
@@ -202,6 +209,7 @@ const deepCopy = (target, name, deep, copy, src) => {
 }
 
 extend = function () {
+  // eslint-disable-next-line prefer-rest-params
   const args = arguments
   const length = args.length
   let target = args[0] || {}
@@ -219,6 +227,7 @@ extend = function () {
   }
 
   if (i === length) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     target = this
     i--
   }
@@ -243,6 +252,7 @@ extend = function () {
   return target
 }
 
+// eslint-disable-next-line import/no-mutable-exports
 let isEachEqual
 
 /**
@@ -359,6 +369,7 @@ export const toJsonStr = (obj) => {
  */
 export const merge = function (target) {
   for (let i = 1, len = arguments.length; i < len; i++) {
+    // eslint-disable-next-line prefer-rest-params
     const source = arguments[i] || {}
 
     for (const prop in source) {
diff --git a/packages/vue/src/chart-beta/chart-core/common/type.ts b/packages/vue/src/chart/chart-core/common/type.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/common/type.ts
rename to packages/vue/src/chart/chart-core/common/type.ts
diff --git a/packages/vue/src/chart-beta/chart-core/common/util.ts b/packages/vue/src/chart/chart-core/common/util.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/common/util.ts
rename to packages/vue/src/chart/chart-core/common/util.ts
diff --git a/packages/vue/src/chart/chart-core/index.ts b/packages/vue/src/chart/chart-core/index.ts
index a297ec038..5638e1d1a 100644
--- a/packages/vue/src/chart/chart-core/index.ts
+++ b/packages/vue/src/chart/chart-core/index.ts
@@ -1,12 +1,34 @@
-import Core from './src/index.vue'
-import '@opentiny/vue-theme/chart-core/index.less'
-import { version } from './package.json'
+import Core from './src/chart-core'
+import { getFormatted, cloneDeep, getStackMap, get, set, merge, getMapJSON, htmlHandler } from './common/util'
+import { isNull, isObject } from './common/type'
+import { deepCopy } from './utils/deep-clone'
+import { getRows, getYAxis, getTooltip } from './utils/options'
+import { itemPoint, itemLabel, itemContent, HEAT_MAP_COLOR } from './common/constants'
+import { isDefined } from './utils/type'
 
-/* istanbul ignore next */
-Core.install = function (Vue) {
+Core.install = function (Vue: any) {
   Vue.component(Core.name, Core)
 }
 
-Core.version = version
-
 export default Core
+export {
+  getFormatted,
+  cloneDeep,
+  getStackMap,
+  get,
+  set,
+  merge,
+  getMapJSON,
+  getRows,
+  getYAxis,
+  getTooltip,
+  isNull,
+  isObject,
+  deepCopy,
+  itemPoint,
+  itemLabel,
+  itemContent,
+  isDefined,
+  htmlHandler,
+  HEAT_MAP_COLOR
+}
diff --git a/packages/vue/src/chart/chart-core/package.json b/packages/vue/src/chart/chart-core/package.json
index 2cb4ea3c5..9fe6c174e 100644
--- a/packages/vue/src/chart/chart-core/package.json
+++ b/packages/vue/src/chart/chart-core/package.json
@@ -1,24 +1,18 @@
 {
   "name": "@opentiny/vue-chart-core",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-renderless": "workspace:~",
-    "echarts": "5.4.1",
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~"
+    "echarts": "5.4.1"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-core/src/chart-core.ts b/packages/vue/src/chart/chart-core/src/chart-core.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/src/chart-core.ts
rename to packages/vue/src/chart/chart-core/src/chart-core.ts
diff --git a/packages/vue/src/chart/chart-core/src/index.vue b/packages/vue/src/chart/chart-core/src/index.vue
deleted file mode 100644
index a6aacff5e..000000000
--- a/packages/vue/src/chart/chart-core/src/index.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <div :class="[camelToKebab($options.name || $options._componentTag)]" :style="state.canvasStyle">
-    <div ref="canvas" :class="{ 'tiny-chart-mask-status': dataEmpty || loading }" :style="state.canvasStyle"></div>
-    <div class="tiny-chart-data-empty" :style="{ display: dataEmpty ? '' : 'none' }">
-      {{ t('ui.chart.emptyText') }}
-    </div>
-    <div class="tiny-chart-component-loading" :style="{ display: loading ? '' : 'none' }">
-      <div class="loader">
-        <div class="loading-spinner">
-          <svg class="circular" viewBox="25 25 50 50">
-            <circle class="path" cx="50" cy="50" r="20" fill="none" />
-          </svg>
-        </div>
-      </div>
-    </div>
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="tsx">
-import { renderless, api } from '@opentiny/vue-renderless/chart-core/vue'
-import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
-import * as echartsLib from 'echarts'
-import * as echarts from 'echarts/core'
-import { TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
-import { appProperties } from '@opentiny/vue-common'
-
-echarts.use([TooltipComponent, LegendComponent, TitleComponent])
-
-export default defineComponent({
-  name: $prefix + 'ChartCore',
-  props: {
-    afterConfig: { type: Function },
-    afterSetOption: { type: Function },
-    afterSetOptionOnce: { type: Function },
-    animation: Object,
-    axisPointer: [Object, Array],
-    backgroundColor: [Object, String],
-    beforeConfig: { type: Function },
-    brush: [Object, Array],
-    cancelResizeCheck: Boolean,
-    changeDelay: { type: Number, default: 0 },
-    colors: { type: Array },
-    data: {
-      type: [Object, Array],
-      default() {
-        return {}
-      }
-    },
-    dataEmpty: Boolean,
-    dataZoom: { type: [Object, Array] },
-    events: { type: Object },
-    extend: Object,
-    geo: [Object, Array],
-    graphic: [Object, Array],
-    grid: { type: [Object, Array] },
-    height: { type: String, default: '400px' },
-    initOptions: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    judgeWidth: { type: Boolean, default: false },
-    legend: [Object, Array],
-    legendPosition: { type: String },
-    legendVisible: { type: Boolean, default: true },
-    loading: Boolean,
-    markArea: { type: Object },
-    markLine: { type: Object },
-    markPoint: { type: Object },
-    notSetUnchange: Array,
-    radar: Object,
-    resizeDelay: { type: Number, default: 200 },
-    resizeable: { type: Boolean, default: true },
-    series: [Object, Array],
-    setOptionOpts: { type: [Boolean, Object], default: true },
-    settings: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    textStyle: [Object, Array],
-    theme: {
-      type: Object,
-      default: () => {
-        const ctx = appProperties()
-
-        return ctx.tiny_chart_theme ? ctx.tiny_chart_theme.value : null
-      }
-    },
-    themeName: [Object, String],
-    timeline: [Object, Array],
-    title: [Object, Array],
-    toolbox: { type: [Object, Array] },
-    tooltip: Object,
-    tooltipFormatter: { type: Function },
-    tooltipVisible: { type: Boolean, default: true },
-    visualMap: { type: [Object, Array] },
-    width: { type: String, default: 'auto' },
-    widthChangeDelay: { type: Number, default: 300 },
-    xAxis: [Object, Array],
-    yAxis: [Object, Array],
-    colorMode: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['ready', 'ready-once', 'handle-color'],
-  setup(props, context) {
-    return setup({
-      props,
-      context,
-      renderless,
-      api,
-      mono: true,
-      extendOptions: { echartsLib }
-    })
-  }
-})
-</script>
diff --git a/packages/vue/src/chart-beta/chart-core/utils/deep-clone.ts b/packages/vue/src/chart/chart-core/utils/deep-clone.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/utils/deep-clone.ts
rename to packages/vue/src/chart/chart-core/utils/deep-clone.ts
diff --git a/packages/vue/src/chart-beta/chart-core/utils/options.ts b/packages/vue/src/chart/chart-core/utils/options.ts
similarity index 83%
rename from packages/vue/src/chart-beta/chart-core/utils/options.ts
rename to packages/vue/src/chart/chart-core/utils/options.ts
index 21e703da8..46286c86e 100644
--- a/packages/vue/src/chart-beta/chart-core/utils/options.ts
+++ b/packages/vue/src/chart/chart-core/utils/options.ts
@@ -1,29 +1,25 @@
 import { getFormatted } from '../common/util'
-import { itemPoint, itemLabel, itemContent, SAAS_DEFAULT_COLORS } from '../common/constants'
+import { itemPoint, itemLabel, itemContent } from '../common/constants'
+
 export const getRows = (args) => {
   const { columns, metrics, labelMap, rows, dimension = columns[0] } = args
 
   let rowData = []
 
-  const data = labelMap ? metrics.map((item) => (!(labelMap[item]) ? item : labelMap[item])) : metrics
-
+  const data = labelMap ? metrics.map((item) => (!labelMap[item] ? item : labelMap[item])) : metrics
 
   dimension.forEach((item) => {
     data.unshift(item)
   })
 
-
-  rows.forEach(item => {
-
-    let obj = {};
-    for (var i = 0; i < data.length; i++) {
-      obj[data[i]] = item[data[i]];
+  rows.forEach((item) => {
+    let obj = {}
+    for (let i = 0; i < data.length; i++) {
+      obj[data[i]] = item[data[i]]
     }
     rowData.push(obj)
-
   })
 
-
   return rowData
 }
 
@@ -35,7 +31,7 @@ export const getYAxis = (args) => {
   }
   for (let k = 0; k < 2; k++) {
     yAxis[k] = {
-      ...yAxisBase,
+      ...yAxisBase
     }
     if (yAxisType[k]) {
       yAxis[k] = {
@@ -44,7 +40,7 @@ export const getYAxis = (args) => {
           formatter(val) {
             return getFormatted(val, yAxisType[k], digit)
           }
-        },
+        }
       }
     } else {
       yAxis[k] = { ...yAxisBase }
@@ -55,14 +51,13 @@ export const getYAxis = (args) => {
   }
 
   metrics.forEach((item) => {
-    if (axisSite.right && axisSite.right.indexOf(item) !== -1) {
+    if (axisSite.right && axisSite.right.includes(item)) {
       yAxis[1].dataName = [...axisSite.right]
     } else {
       yAxis[0].dataName = item
     }
   })
 
-
   return yAxis
 }
 
@@ -75,7 +70,6 @@ export const getTooltip = (args) => {
     : rightItemsArr
 
   let formatter = function (items) {
-
     let template = []
     const { name, axisValueLabel } = items[0]
     const title = name || axisValueLabel
@@ -98,4 +92,4 @@ export const getTooltip = (args) => {
   }
 
   return { trigger: 'axis', formatter }
-}
\ No newline at end of file
+}
diff --git a/packages/vue/src/chart-beta/chart-core/utils/throttle.ts b/packages/vue/src/chart/chart-core/utils/throttle.ts
similarity index 95%
rename from packages/vue/src/chart-beta/chart-core/utils/throttle.ts
rename to packages/vue/src/chart/chart-core/utils/throttle.ts
index fc46dd591..bd4bc6457 100644
--- a/packages/vue/src/chart-beta/chart-core/utils/throttle.ts
+++ b/packages/vue/src/chart/chart-core/utils/throttle.ts
@@ -14,6 +14,7 @@ export function throttle(delay, callback, options) {
     cancelled = !upcomingOnly
   }
   function wrapper(...arguments_) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     let self = this
     let elapsed = Date.now() - lastExec
     if (cancelled) {
@@ -50,4 +51,4 @@ export function throttle(delay, callback, options) {
 export function debounce(delay, callback, options) {
   const { atBegin = false } = options || {}
   return throttle(delay, callback, { debounceMode: atBegin !== false })
-}
\ No newline at end of file
+}
diff --git a/packages/vue/src/chart-beta/chart-core/utils/type.ts b/packages/vue/src/chart/chart-core/utils/type.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-core/utils/type.ts
rename to packages/vue/src/chart/chart-core/utils/type.ts
diff --git a/packages/vue/src/chart/chart-funnel/index.ts b/packages/vue/src/chart/chart-funnel/index.ts
index b8b2c5cad..ba2b882a5 100644
--- a/packages/vue/src/chart/chart-funnel/index.ts
+++ b/packages/vue/src/chart/chart-funnel/index.ts
@@ -1,21 +1,8 @@
-import Funnel from './src/index.js'
-import { funnel } from '@opentiny/vue-renderless/chart-funnel/index'
-import { version } from './package.json'
+import ChartFunnel from './src/chart-funnel.vue'
 
-/* istanbul ignore next */
-Funnel.install = function (Vue) {
-  Vue.component(Funnel.name, Funnel)
+ChartFunnel.install = function (Vue: any) {
+  Vue.component(ChartFunnel.name, ChartFunnel)
 }
 
-Funnel.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Funnel.install(window.Vue)
-  }
-}
-
-export { funnel }
-
-export default Funnel
+export { ChartFunnel }
+export default ChartFunnel
diff --git a/packages/vue/src/chart/chart-funnel/package.json b/packages/vue/src/chart/chart-funnel/package.json
index ee7542add..47eaeeb06 100644
--- a/packages/vue/src/chart/chart-funnel/package.json
+++ b/packages/vue/src/chart/chart-funnel/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-funnel",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-funnel/src/chart-funnel.vue b/packages/vue/src/chart/chart-funnel/src/chart-funnel.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-funnel/src/chart-funnel.vue
rename to packages/vue/src/chart/chart-funnel/src/chart-funnel.vue
index 08cb79401..be4feffed 100644
--- a/packages/vue/src/chart-beta/chart-funnel/src/chart-funnel.vue
+++ b/packages/vue/src/chart/chart-funnel/src/chart-funnel.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { getIChartOption } from './funnel'
 
 export default {
diff --git a/packages/vue/src/chart-beta/chart-funnel/src/funnel.ts b/packages/vue/src/chart/chart-funnel/src/funnel.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-funnel/src/funnel.ts
rename to packages/vue/src/chart/chart-funnel/src/funnel.ts
index 49b9e3f6d..b8361777e 100644
--- a/packages/vue/src/chart-beta/chart-funnel/src/funnel.ts
+++ b/packages/vue/src/chart/chart-funnel/src/funnel.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getMetrics = (args) => {
   const { dimension, columns, settings } = args
diff --git a/packages/vue/src/chart/chart-funnel/src/index.ts b/packages/vue/src/chart/chart-funnel/src/index.ts
deleted file mode 100644
index 3f32f99ad..000000000
--- a/packages/vue/src/chart/chart-funnel/src/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as echarts from 'echarts/core'
-import { ToolboxComponent } from 'echarts/components'
-import { FunnelChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { funnel } from '@opentiny/vue-renderless/chart-funnel/index'
-import Core from '@opentiny/vue-chart-core'
-import { $props, $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([ToolboxComponent, FunnelChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartFunnel',
-    data() {
-      this.chartHandler = funnel
-      return {}
-    },
-    props: {
-      ...$props,
-      ...Core.props,
-      colorMode: {
-        type: String,
-        default: 'blue'
-      }
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-funnel/src/types.ts b/packages/vue/src/chart/chart-funnel/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-funnel/src/types.ts
rename to packages/vue/src/chart/chart-funnel/src/types.ts
diff --git a/packages/vue/src/chart/chart-gauge/index.ts b/packages/vue/src/chart/chart-gauge/index.ts
index 6983698d4..b7b8334a7 100644
--- a/packages/vue/src/chart/chart-gauge/index.ts
+++ b/packages/vue/src/chart/chart-gauge/index.ts
@@ -1,18 +1,8 @@
-import Gauge from './src/index.vue'
-import { version } from './package.json'
+import ChartGauge from './src/chart-gauge.vue'
 
-/* istanbul ignore next */
-Gauge.install = function (Vue) {
-  Vue.component(Gauge.name, Gauge)
+ChartGauge.install = function (Vue: any) {
+  Vue.component(ChartGauge.name, ChartGauge)
 }
 
-Gauge.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Gauge.install(window.Vue)
-  }
-}
-
-export default Gauge
+export { ChartGauge }
+export default ChartGauge
diff --git a/packages/vue/src/chart/chart-gauge/package.json b/packages/vue/src/chart/chart-gauge/package.json
index 0bf51d09f..062b62600 100644
--- a/packages/vue/src/chart/chart-gauge/package.json
+++ b/packages/vue/src/chart/chart-gauge/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-gauge",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-gauge/src/chart-gauge.vue b/packages/vue/src/chart/chart-gauge/src/chart-gauge.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-gauge/src/chart-gauge.vue
rename to packages/vue/src/chart/chart-gauge/src/chart-gauge.vue
index 1d94a7407..364555a26 100644
--- a/packages/vue/src/chart-beta/chart-gauge/src/chart-gauge.vue
+++ b/packages/vue/src/chart/chart-gauge/src/chart-gauge.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { getIChartOption } from './gauge'
 
 export default {
diff --git a/packages/vue/src/chart-beta/chart-gauge/src/gauge.ts b/packages/vue/src/chart/chart-gauge/src/gauge.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-gauge/src/gauge.ts
rename to packages/vue/src/chart/chart-gauge/src/gauge.ts
index 2d35467d5..1362e75ff 100644
--- a/packages/vue/src/chart-beta/chart-gauge/src/gauge.ts
+++ b/packages/vue/src/chart/chart-gauge/src/gauge.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemLabel, isNull, isObject } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, itemLabel, isNull, isObject } from '@opentiny/vue-chart-core'
 
 const getTooltip = (args) => {
   const { tooltipFormatter, dataType, digit } = args
diff --git a/packages/vue/src/chart/chart-gauge/src/index.vue b/packages/vue/src/chart/chart-gauge/src/index.vue
deleted file mode 100644
index caff5b228..000000000
--- a/packages/vue/src/chart/chart-gauge/src/index.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="tsx">
-import * as echarts from 'echarts/core'
-import { GaugeChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { gauge } from '@opentiny/vue-renderless/chart-gauge/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([GaugeChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartGauge',
-    data() {
-      this.chartHandler = gauge
-      return {}
-    }
-  }
-})
-</script>
diff --git a/packages/vue/src/chart-beta/chart-gauge/src/types.ts b/packages/vue/src/chart/chart-gauge/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-gauge/src/types.ts
rename to packages/vue/src/chart/chart-gauge/src/types.ts
diff --git a/packages/vue/src/chart/chart-graph/index.ts b/packages/vue/src/chart/chart-graph/index.ts
index ca0408f4c..b2bfc611e 100644
--- a/packages/vue/src/chart/chart-graph/index.ts
+++ b/packages/vue/src/chart/chart-graph/index.ts
@@ -1,18 +1,9 @@
-import Graph from './src/index.js'
-import { version } from './package.json'
+import ChartGraph from './src/chart-graph.vue'
 
-/* istanbul ignore next */
-Graph.install = function (Vue) {
-  Vue.component(Graph.name, Graph)
+ChartGraph.install = function (Vue: any) {
+  Vue.component(ChartGraph.name, ChartGraph)
 }
 
-Graph.version = version
+export { ChartGraph }
 
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Graph.install(window.Vue)
-  }
-}
-
-export default Graph
+export default ChartGraph
diff --git a/packages/vue/src/chart/chart-graph/package.json b/packages/vue/src/chart/chart-graph/package.json
index 482458b5a..6a5f26845 100644
--- a/packages/vue/src/chart/chart-graph/package.json
+++ b/packages/vue/src/chart/chart-graph/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-graph",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-graph/src/chart-graph.vue b/packages/vue/src/chart/chart-graph/src/chart-graph.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-graph/src/chart-graph.vue
rename to packages/vue/src/chart/chart-graph/src/chart-graph.vue
index ecf66e38f..77d6755d8 100644
--- a/packages/vue/src/chart-beta/chart-graph/src/chart-graph.vue
+++ b/packages/vue/src/chart/chart-graph/src/chart-graph.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { graph } from './graph'
 
 export default {
diff --git a/packages/vue/src/chart-beta/chart-graph/src/graph.ts b/packages/vue/src/chart/chart-graph/src/graph.ts
similarity index 97%
rename from packages/vue/src/chart-beta/chart-graph/src/graph.ts
rename to packages/vue/src/chart/chart-graph/src/graph.ts
index 1b6ab97a5..cafefd082 100644
--- a/packages/vue/src/chart-beta/chart-graph/src/graph.ts
+++ b/packages/vue/src/chart/chart-graph/src/graph.ts
@@ -1,4 +1,4 @@
-import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta'
+import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getTooltip = () => ({
   trigger: 'item',
diff --git a/packages/vue/src/chart/chart-graph/src/index.ts b/packages/vue/src/chart/chart-graph/src/index.ts
deleted file mode 100644
index b67dededb..000000000
--- a/packages/vue/src/chart/chart-graph/src/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as echarts from 'echarts/core'
-import { GridComponent } from 'echarts/components'
-import { GraphChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { graph } from '@opentiny/vue-renderless/chart-graph/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([GridComponent, GraphChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartGraph',
-    data() {
-      this.chartHandler = graph
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-graph/src/types.ts b/packages/vue/src/chart/chart-graph/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-graph/src/types.ts
rename to packages/vue/src/chart/chart-graph/src/types.ts
diff --git a/packages/vue/src/chart/chart-heatmap/index.ts b/packages/vue/src/chart/chart-heatmap/index.ts
index 20397e742..e8799697e 100644
--- a/packages/vue/src/chart/chart-heatmap/index.ts
+++ b/packages/vue/src/chart/chart-heatmap/index.ts
@@ -1,18 +1,9 @@
-import Heatmap from './src/index.js'
-import { version } from './package.json'
+import ChartHeatmap from './src/chart-heatmap.vue'
 
-/* istanbul ignore next */
-Heatmap.install = function (Vue) {
-  Vue.component(Heatmap.name, Heatmap)
+ChartHeatmap.install = function (Vue: any) {
+  Vue.component(ChartHeatmap.name, ChartHeatmap)
 }
 
-Heatmap.version = version
+export { ChartHeatmap }
 
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Heatmap.install(window.Vue)
-  }
-}
-
-export default Heatmap
+export default ChartHeatmap
diff --git a/packages/vue/src/chart/chart-heatmap/package.json b/packages/vue/src/chart/chart-heatmap/package.json
index 54f96c44c..85e220dc0 100644
--- a/packages/vue/src/chart/chart-heatmap/package.json
+++ b/packages/vue/src/chart/chart-heatmap/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-heatmap",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-heatmap/src/chart-heatmap.vue b/packages/vue/src/chart/chart-heatmap/src/chart-heatmap.vue
similarity index 97%
rename from packages/vue/src/chart-beta/chart-heatmap/src/chart-heatmap.vue
rename to packages/vue/src/chart/chart-heatmap/src/chart-heatmap.vue
index 05f889b76..8750e11b1 100644
--- a/packages/vue/src/chart-beta/chart-heatmap/src/chart-heatmap.vue
+++ b/packages/vue/src/chart/chart-heatmap/src/chart-heatmap.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { heatmap } from './heatmap'
 
 export default {
diff --git a/packages/vue/src/chart-beta/chart-heatmap/src/heatmap.ts b/packages/vue/src/chart/chart-heatmap/src/heatmap.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-heatmap/src/heatmap.ts
rename to packages/vue/src/chart/chart-heatmap/src/heatmap.ts
index ac69a85ff..1e8586b4c 100644
--- a/packages/vue/src/chart-beta/chart-heatmap/src/heatmap.ts
+++ b/packages/vue/src/chart/chart-heatmap/src/heatmap.ts
@@ -1,11 +1,4 @@
-import {
-  getFormatted,
-  getMapJSON,
-  itemPoint,
-  itemLabel,
-  itemContent,
-  HEAT_MAP_COLOR
-} from '@opentiny/vue-chart-core-beta'
+import { getFormatted, getMapJSON, itemPoint, itemLabel, itemContent, HEAT_MAP_COLOR } from '@opentiny/vue-chart-core'
 import * as echartsLib from 'echarts'
 
 const getAxisList = (rows, label) => {
diff --git a/packages/vue/src/chart/chart-heatmap/src/index.ts b/packages/vue/src/chart/chart-heatmap/src/index.ts
deleted file mode 100644
index fd79236ef..000000000
--- a/packages/vue/src/chart/chart-heatmap/src/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as echarts from 'echarts/core'
-import { HeatmapChart, MapChart } from 'echarts/charts'
-import { GridComponent, VisualMapComponent } from 'echarts/components'
-import 'echarts/extension/bmap/bmap'
-import { heatmap } from '@opentiny/vue-renderless/chart-heatmap/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([HeatmapChart, MapChart, GridComponent, VisualMapComponent])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartHeatmap',
-    data() {
-      this.chartHandler = heatmap
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-heatmap/src/type.ts b/packages/vue/src/chart/chart-heatmap/src/type.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-heatmap/src/type.ts
rename to packages/vue/src/chart/chart-heatmap/src/type.ts
diff --git a/packages/vue/src/chart/chart-histogram/index.ts b/packages/vue/src/chart/chart-histogram/index.ts
index b3e71dfd6..5c9660dd0 100644
--- a/packages/vue/src/chart/chart-histogram/index.ts
+++ b/packages/vue/src/chart/chart-histogram/index.ts
@@ -1,18 +1,8 @@
-import Histogram from './src/index.js'
-import { version } from './package.json'
+import ChartHistogram from './src/chart-histogram.vue'
 
-/* istanbul ignore next */
-Histogram.install = function (Vue) {
-  Vue.component(Histogram.name, Histogram)
+ChartHistogram.install = function (Vue: any) {
+  Vue.component(ChartHistogram.name, ChartHistogram)
 }
 
-Histogram.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Histogram.install(window.Vue)
-  }
-}
-
-export default Histogram
+export { ChartHistogram }
+export default ChartHistogram
diff --git a/packages/vue/src/chart/chart-histogram/package.json b/packages/vue/src/chart/chart-histogram/package.json
index f3f33fb1c..44fee01e1 100644
--- a/packages/vue/src/chart/chart-histogram/package.json
+++ b/packages/vue/src/chart/chart-histogram/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-histogram",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-histogram/src/chart-histogram.vue b/packages/vue/src/chart/chart-histogram/src/chart-histogram.vue
similarity index 93%
rename from packages/vue/src/chart-beta/chart-histogram/src/chart-histogram.vue
rename to packages/vue/src/chart/chart-histogram/src/chart-histogram.vue
index 55c28652b..f157470fd 100644
--- a/packages/vue/src/chart-beta/chart-histogram/src/chart-histogram.vue
+++ b/packages/vue/src/chart/chart-histogram/src/chart-histogram.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { histogram } from './histogram'
 
 export default {
diff --git a/packages/vue/src/chart-beta/chart-bar/src/histogram.ts b/packages/vue/src/chart/chart-histogram/src/histogram.ts
similarity index 93%
rename from packages/vue/src/chart-beta/chart-bar/src/histogram.ts
rename to packages/vue/src/chart/chart-histogram/src/histogram.ts
index 59628e716..46da3dfb9 100644
--- a/packages/vue/src/chart-beta/chart-bar/src/histogram.ts
+++ b/packages/vue/src/chart/chart-histogram/src/histogram.ts
@@ -1,13 +1,4 @@
-import {
-  getFormatted,
-  cloneDeep,
-  getStackMap,
-  get,
-  set,
-  isNull,
-  getRows,
-  getTooltip
-} from '@opentiny/vue-chart-core-beta'
+import { getFormatted, cloneDeep, getStackMap, get, set, isNull, getRows, getTooltip } from '@opentiny/vue-chart-core'
 
 const VALUE_AXIS_OPACITY = 0.5
 
@@ -102,6 +93,9 @@ const getValueData = (seriesTemp, dims) => {
 
 const getBarSeries = (args) => {
   const { axisSite, barGap, dimAxisType, dims, innerRows, isHistogram, itemStyle } = args
+  if (!itemStyle.barWidth) {
+    itemStyle.barWidth = 'auto'
+  }
   const { label, labelMap, metrics, opacity, showLine = [], stack } = args
   let { secondAxis, secondDimAxisIndex, series = [], seriesTemp = {}, stackMap, stackNum = 0 } = {}
   secondAxis = (isHistogram ? axisSite?.right : axisSite?.top) || []
@@ -241,7 +235,17 @@ export const histogram = (columns, rows, settings, extra, isHistogram = true) =>
     }
     Object.assign(itemStyle, itemStyleBase)
   }
-  let data = getRows({ columns, metrics, labelMap, rows: innerRows, dimension })
+  const tempRows = innerRows.map((row) => {
+    let temp = { ...row }
+    for (const [key, value] of Object.entries(labelMap)) {
+      if (Object.prototype.hasOwnProperty.call(row, key)) {
+        temp[value] = temp[key]
+      }
+    }
+    return temp
+  })
+  let data = getRows({ columns, metrics, labelMap, rows: tempRows, dimension })
+
   if (dimAxisType === 'value') {
     data = getDataValue(data, dimension, metrics, innerRows, dims)
   }
diff --git a/packages/vue/src/chart/chart-histogram/src/index.ts b/packages/vue/src/chart/chart-histogram/src/index.ts
deleted file mode 100644
index 972a9b486..000000000
--- a/packages/vue/src/chart/chart-histogram/src/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as echarts from 'echarts/core'
-import { GridComponent } from 'echarts/components'
-import { BarChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { histogram } from '@opentiny/vue-renderless/chart-bar/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([GridComponent, BarChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartHistogram',
-    data() {
-      this.chartHandler = histogram
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart/chart-line/index.ts b/packages/vue/src/chart/chart-line/index.ts
index bb7873d47..b419bbef6 100644
--- a/packages/vue/src/chart/chart-line/index.ts
+++ b/packages/vue/src/chart/chart-line/index.ts
@@ -1,21 +1,8 @@
-import Line from './src/index.js'
-import { line } from '@opentiny/vue-renderless/chart-line/index'
-import { version } from './package.json'
+import ChartLine from './src/chart-line.vue'
 
-/* istanbul ignore next */
-Line.install = function (Vue) {
-  Vue.component(Line.name, Line)
+ChartLine.install = function (Vue: any) {
+  Vue.component(ChartLine.name, ChartLine)
 }
 
-Line.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Line.install(window.Vue)
-  }
-}
-
-export { line }
-
-export default Line
+export { ChartLine }
+export default ChartLine
diff --git a/packages/vue/src/chart/chart-line/package.json b/packages/vue/src/chart/chart-line/package.json
index 6b118e152..e2829e169 100644
--- a/packages/vue/src/chart/chart-line/package.json
+++ b/packages/vue/src/chart/chart-line/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-line",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-line/src/chart-line.vue b/packages/vue/src/chart/chart-line/src/chart-line.vue
similarity index 93%
rename from packages/vue/src/chart-beta/chart-line/src/chart-line.vue
rename to packages/vue/src/chart/chart-line/src/chart-line.vue
index 736884c4f..0f071cac9 100644
--- a/packages/vue/src/chart-beta/chart-line/src/chart-line.vue
+++ b/packages/vue/src/chart/chart-line/src/chart-line.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { line } from './line'
 
 export default {
diff --git a/packages/vue/src/chart/chart-line/src/index.ts b/packages/vue/src/chart/chart-line/src/index.ts
deleted file mode 100644
index 92b434b25..000000000
--- a/packages/vue/src/chart/chart-line/src/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as echarts from 'echarts/core'
-import { ToolboxComponent, GridComponent } from 'echarts/components'
-import { LineChart } from 'echarts/charts'
-import { UniversalTransition } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
-import { line } from '@opentiny/vue-renderless/chart-line/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([ToolboxComponent, GridComponent, LineChart, UniversalTransition, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartLine',
-    data() {
-      this.chartHandler = line
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-line/src/line.ts b/packages/vue/src/chart/chart-line/src/line.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-line/src/line.ts
rename to packages/vue/src/chart/chart-line/src/line.ts
index 1bf56acdd..bc7dfee1d 100644
--- a/packages/vue/src/chart-beta/chart-line/src/line.ts
+++ b/packages/vue/src/chart/chart-line/src/line.ts
@@ -1,4 +1,4 @@
-import { getRows, getYAxis, getTooltip, isNull } from '@opentiny/vue-chart-core-beta'
+import { getRows, getYAxis, getTooltip, isNull } from '@opentiny/vue-chart-core'
 
 const getStackMap = (stack) => {
   const result = {}
diff --git a/packages/vue/src/chart-beta/chart-line/src/types.ts b/packages/vue/src/chart/chart-line/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-line/src/types.ts
rename to packages/vue/src/chart/chart-line/src/types.ts
diff --git a/packages/vue/src/chart/chart-liquidfill/index.ts b/packages/vue/src/chart/chart-liquidfill/index.ts
index f4c9ea0e6..e2be81402 100644
--- a/packages/vue/src/chart/chart-liquidfill/index.ts
+++ b/packages/vue/src/chart/chart-liquidfill/index.ts
@@ -1,18 +1,8 @@
-import Liquidfill from './src/index.js'
-import { version } from './package.json'
+import ChartLiquidfill from './src/chart-liquidfill.vue'
 
-/* istanbul ignore next */
-Liquidfill.install = function (Vue) {
-  Vue.component(Liquidfill.name, Liquidfill)
+ChartLiquidfill.install = function (Vue: any) {
+  Vue.component(ChartLiquidfill.name, ChartLiquidfill)
 }
 
-Liquidfill.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Liquidfill.install(window.Vue)
-  }
-}
-
-export default Liquidfill
+export { ChartLiquidfill }
+export default ChartLiquidfill
diff --git a/packages/vue/src/chart/chart-liquidfill/package.json b/packages/vue/src/chart/chart-liquidfill/package.json
index a22f1ab83..a6ffc09c0 100644
--- a/packages/vue/src/chart/chart-liquidfill/package.json
+++ b/packages/vue/src/chart/chart-liquidfill/package.json
@@ -1,24 +1,19 @@
 {
   "name": "@opentiny/vue-chart-liquidfill",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~",
-    "echarts-liquidfill": "3.0.0"
+    "echarts-liquidfill": "3.1.0"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-liquidfill/src/chart-liquidfill.vue b/packages/vue/src/chart/chart-liquidfill/src/chart-liquidfill.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-liquidfill/src/chart-liquidfill.vue
rename to packages/vue/src/chart/chart-liquidfill/src/chart-liquidfill.vue
index 1828a8923..363510e95 100644
--- a/packages/vue/src/chart-beta/chart-liquidfill/src/chart-liquidfill.vue
+++ b/packages/vue/src/chart/chart-liquidfill/src/chart-liquidfill.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { getIChartOption } from './liquidfill'
 import 'echarts-liquidfill'
 
diff --git a/packages/vue/src/chart/chart-liquidfill/src/index.ts b/packages/vue/src/chart/chart-liquidfill/src/index.ts
deleted file mode 100644
index 1d3619a51..000000000
--- a/packages/vue/src/chart/chart-liquidfill/src/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import 'echarts-liquidfill'
-import { liquidfill } from '@opentiny/vue-renderless/chart-liquidfill/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartLiquidfill',
-    data() {
-      this.chartHandler = liquidfill
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-liquidfill/src/liquidfill.ts b/packages/vue/src/chart/chart-liquidfill/src/liquidfill.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-liquidfill/src/liquidfill.ts
rename to packages/vue/src/chart/chart-liquidfill/src/liquidfill.ts
index 3d1e20afe..07f03854a 100644
--- a/packages/vue/src/chart-beta/chart-liquidfill/src/liquidfill.ts
+++ b/packages/vue/src/chart/chart-liquidfill/src/liquidfill.ts
@@ -1,4 +1,4 @@
-import { getFormatted, isObject, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, isObject, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const isArr = Array.isArray
 
diff --git a/packages/vue/src/chart-beta/chart-liquidfill/src/types.ts b/packages/vue/src/chart/chart-liquidfill/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-liquidfill/src/types.ts
rename to packages/vue/src/chart/chart-liquidfill/src/types.ts
diff --git a/packages/vue/src/chart/chart-map/index.ts b/packages/vue/src/chart/chart-map/index.ts
index 1a48e6a86..33e7cf63a 100644
--- a/packages/vue/src/chart/chart-map/index.ts
+++ b/packages/vue/src/chart/chart-map/index.ts
@@ -1,18 +1,8 @@
-import ChartMap from './src/index.js'
-import { version } from './package.json'
+import ChartMap from './src/chart-map.vue'
 
-/* istanbul ignore next */
-ChartMap.install = function (Vue) {
+ChartMap.install = function (Vue: any) {
   Vue.component(ChartMap.name, ChartMap)
 }
 
-ChartMap.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    ChartMap.install(window.Vue)
-  }
-}
-
+export { ChartMap }
 export default ChartMap
diff --git a/packages/vue/src/chart/chart-map/package.json b/packages/vue/src/chart/chart-map/package.json
index 34bc5900f..de9ae63d2 100644
--- a/packages/vue/src/chart/chart-map/package.json
+++ b/packages/vue/src/chart/chart-map/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-map",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-map/src/chart-map.vue b/packages/vue/src/chart/chart-map/src/chart-map.vue
similarity index 94%
rename from packages/vue/src/chart-beta/chart-map/src/chart-map.vue
rename to packages/vue/src/chart/chart-map/src/chart-map.vue
index 5a167635b..4c9110f0d 100644
--- a/packages/vue/src/chart-beta/chart-map/src/chart-map.vue
+++ b/packages/vue/src/chart/chart-map/src/chart-map.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 
 import { map } from './map'
 import * as echarts from 'echarts'
diff --git a/packages/vue/src/chart/chart-map/src/index.ts b/packages/vue/src/chart/chart-map/src/index.ts
deleted file mode 100644
index 24c341ed2..000000000
--- a/packages/vue/src/chart/chart-map/src/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as echarts from 'echarts/core'
-import { MapChart } from 'echarts/charts'
-import { map } from '@opentiny/vue-renderless/chart-map/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([MapChart])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartMap',
-    data() {
-      this.chartHandler = map
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-map/src/map.ts b/packages/vue/src/chart/chart-map/src/map.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-map/src/map.ts
rename to packages/vue/src/chart/chart-map/src/map.ts
index 9505b3021..bf78a57fb 100644
--- a/packages/vue/src/chart-beta/chart-map/src/map.ts
+++ b/packages/vue/src/chart/chart-map/src/map.ts
@@ -1,4 +1,4 @@
-import { getFormatted, getMapJSON, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, getMapJSON, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core'
 
 const getLegendMap = (args, legendItemStyle) => {
   const { metrics, legendName, labelMap } = args
diff --git a/packages/vue/src/chart-beta/chart-map/src/types.ts b/packages/vue/src/chart/chart-map/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-map/src/types.ts
rename to packages/vue/src/chart/chart-map/src/types.ts
diff --git a/packages/vue/src/chart/chart-pie/index.ts b/packages/vue/src/chart/chart-pie/index.ts
index 08d8e4842..70df8254a 100644
--- a/packages/vue/src/chart/chart-pie/index.ts
+++ b/packages/vue/src/chart/chart-pie/index.ts
@@ -1,21 +1,8 @@
-import Pie from './src/index.js'
-import { ring, pie } from '@opentiny/vue-renderless/chart-pie/index'
-import { version } from './package.json'
+import ChartPie from './src/chart-pie.vue'
 
-/* istanbul ignore next */
-Pie.install = function (Vue) {
-  Vue.component(Pie.name, Pie)
+ChartPie.install = function (Vue: any) {
+  Vue.component(ChartPie.name, ChartPie)
 }
 
-Pie.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Pie.install(window.Vue)
-  }
-}
-
-export { ring, pie }
-
-export default Pie
+export { ChartPie }
+export default ChartPie
diff --git a/packages/vue/src/chart/chart-pie/package.json b/packages/vue/src/chart/chart-pie/package.json
index 73014648a..dbb63efed 100644
--- a/packages/vue/src/chart/chart-pie/package.json
+++ b/packages/vue/src/chart/chart-pie/package.json
@@ -1,23 +1,19 @@
 {
   "name": "@opentiny/vue-chart-pie",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-chart-core": "workspace:~"
+    "@opentiny/vue-chart-core": "workspace:~",
+    "@opentiny/vue-locale": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-pie/src/chart-pie.vue b/packages/vue/src/chart/chart-pie/src/chart-pie.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-pie/src/chart-pie.vue
rename to packages/vue/src/chart/chart-pie/src/chart-pie.vue
index 0c9325748..c63154713 100644
--- a/packages/vue/src/chart-beta/chart-pie/src/chart-pie.vue
+++ b/packages/vue/src/chart/chart-pie/src/chart-pie.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { t } from '@opentiny/vue-locale'
 import { pie } from './pie'
 
diff --git a/packages/vue/src/chart/chart-pie/src/index.ts b/packages/vue/src/chart/chart-pie/src/index.ts
deleted file mode 100644
index 3baae5356..000000000
--- a/packages/vue/src/chart/chart-pie/src/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as echarts from 'echarts/core'
-import { PieChart } from 'echarts/charts'
-import { LabelLayout } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
-import { pie } from '@opentiny/vue-renderless/chart-pie/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([PieChart, LabelLayout, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartPie',
-    data() {
-      this.chartHandler = pie
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-pie/src/pie.ts b/packages/vue/src/chart/chart-pie/src/pie.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-pie/src/pie.ts
rename to packages/vue/src/chart/chart-pie/src/pie.ts
index 5c444eefe..2507b3c9e 100644
--- a/packages/vue/src/chart-beta/chart-pie/src/pie.ts
+++ b/packages/vue/src/chart/chart-pie/src/pie.ts
@@ -24,7 +24,7 @@
  * tooltipVisible boolean 是否显示提示框,true
  */
 
-import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-chart-core-beta'
+import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-chart-core'
 
 const PIE_RADIUS = 100
 const RING_RADIUS = [90, 100]
diff --git a/packages/vue/src/chart-beta/chart-pie/src/types.ts b/packages/vue/src/chart/chart-pie/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-pie/src/types.ts
rename to packages/vue/src/chart/chart-pie/src/types.ts
diff --git a/packages/vue/src/chart/chart-process/index.ts b/packages/vue/src/chart/chart-process/index.ts
new file mode 100644
index 000000000..cef143c7b
--- /dev/null
+++ b/packages/vue/src/chart/chart-process/index.ts
@@ -0,0 +1,9 @@
+import ChartProcess from './src/chart-process.vue'
+import type { VueConstructor } from 'vue'
+
+ChartProcess.install = function (Vue: VueConstructor<Vue>) {
+  Vue.component(ChartProcess.name as string, ChartProcess)
+}
+
+export { ChartProcess }
+export default ChartProcess
diff --git a/packages/vue/src/chart-beta/chart-bar/package.json b/packages/vue/src/chart/chart-process/package.json
similarity index 71%
rename from packages/vue/src/chart-beta/chart-bar/package.json
rename to packages/vue/src/chart/chart-process/package.json
index fe4e4bf01..1710b263f 100644
--- a/packages/vue/src/chart-beta/chart-bar/package.json
+++ b/packages/vue/src/chart/chart-process/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@opentiny/vue-chart-bar-beta",
-  "version": "3.7.0",
+  "name": "@opentiny/vue-chart-process",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -12,7 +12,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-chart-core-beta": "workspace:~"
+    "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
 }
\ No newline at end of file
diff --git a/packages/vue/src/chart/chart-process/src/chart-process.vue b/packages/vue/src/chart/chart-process/src/chart-process.vue
new file mode 100644
index 000000000..f1359c3bd
--- /dev/null
+++ b/packages/vue/src/chart/chart-process/src/chart-process.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="hui-chart chart-box" ref="chartRef" :style="{ width, height }"></div>
+</template>
+
+<script>
+import Core from '@opentiny/vue-chart-core'
+
+export default {
+  name: 'ChartProcess',
+  mixins: [Core],
+
+  data() {
+    return {
+      iChartName: 'ProcessChart'
+    }
+  },
+  methods: {
+    updateChart() {
+      this.option = { ...this.options }
+    }
+  }
+}
+</script>
diff --git a/packages/vue/src/chart/chart-radar/index.ts b/packages/vue/src/chart/chart-radar/index.ts
index daf0caf4b..dc296bd1a 100644
--- a/packages/vue/src/chart/chart-radar/index.ts
+++ b/packages/vue/src/chart/chart-radar/index.ts
@@ -1,21 +1,8 @@
-import Radar from './src/index.js'
-import { radar } from '@opentiny/vue-renderless/chart-radar/index'
-import { version } from './package.json'
+import ChartRadar from './src/chart-radar.vue'
 
-/* istanbul ignore next */
-Radar.install = function (Vue) {
-  Vue.component(Radar.name, Radar)
+ChartRadar.install = function (Vue: any) {
+  Vue.component(ChartRadar.name, ChartRadar)
 }
 
-Radar.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Radar.install(window.Vue)
-  }
-}
-
-export { radar }
-
-export default Radar
+export { ChartRadar }
+export default ChartRadar
diff --git a/packages/vue/src/chart/chart-radar/package.json b/packages/vue/src/chart/chart-radar/package.json
index 7c3990a0f..79539c6fc 100644
--- a/packages/vue/src/chart/chart-radar/package.json
+++ b/packages/vue/src/chart/chart-radar/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-radar",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-radar/src/chart-radar.vue b/packages/vue/src/chart/chart-radar/src/chart-radar.vue
similarity index 94%
rename from packages/vue/src/chart-beta/chart-radar/src/chart-radar.vue
rename to packages/vue/src/chart/chart-radar/src/chart-radar.vue
index 5f3d090fe..479cd1493 100644
--- a/packages/vue/src/chart-beta/chart-radar/src/chart-radar.vue
+++ b/packages/vue/src/chart/chart-radar/src/chart-radar.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { radar } from './radar'
 
 export default {
diff --git a/packages/vue/src/chart/chart-radar/src/index.ts b/packages/vue/src/chart/chart-radar/src/index.ts
deleted file mode 100644
index 46ab2d55e..000000000
--- a/packages/vue/src/chart/chart-radar/src/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as echarts from 'echarts/core'
-import { RadarChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { radar } from '@opentiny/vue-renderless/chart-radar/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([RadarChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartRadar',
-    data() {
-      this.chartHandler = radar
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-radar/src/radar.ts b/packages/vue/src/chart/chart-radar/src/radar.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-radar/src/radar.ts
rename to packages/vue/src/chart/chart-radar/src/radar.ts
index 58441bc3b..c146c1a89 100644
--- a/packages/vue/src/chart-beta/chart-radar/src/radar.ts
+++ b/packages/vue/src/chart/chart-radar/src/radar.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core'
 
 const getRadarLegend = (rows, dimension, legendName, legendVisible) => {
   let legendData = rows.map((row) => row[dimension]).filter((i) => i)
diff --git a/packages/vue/src/chart/chart-ring/index.ts b/packages/vue/src/chart/chart-ring/index.ts
index a0e022c26..643b0008f 100644
--- a/packages/vue/src/chart/chart-ring/index.ts
+++ b/packages/vue/src/chart/chart-ring/index.ts
@@ -1,18 +1,8 @@
-import Ring from './src/index.js'
-import { version } from './package.json'
+import ChartRing from './src/chart-ring.vue'
 
-/* istanbul ignore next */
-Ring.install = function (Vue) {
-  Vue.component(Ring.name, Ring)
+ChartRing.install = function (Vue: any) {
+  Vue.component(ChartRing.name, ChartRing)
 }
 
-Ring.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Ring.install(window.Vue)
-  }
-}
-
-export default Ring
+export { ChartRing }
+export default ChartRing
diff --git a/packages/vue/src/chart/chart-ring/package.json b/packages/vue/src/chart/chart-ring/package.json
index 43bbc81dc..95d57c928 100644
--- a/packages/vue/src/chart/chart-ring/package.json
+++ b/packages/vue/src/chart/chart-ring/package.json
@@ -1,23 +1,19 @@
 {
   "name": "@opentiny/vue-chart-ring",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-chart-core": "workspace:~"
+    "@opentiny/vue-chart-core": "workspace:~",
+    "@opentiny/vue-locale": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-ring/src/chart-ring.vue b/packages/vue/src/chart/chart-ring/src/chart-ring.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-ring/src/chart-ring.vue
rename to packages/vue/src/chart/chart-ring/src/chart-ring.vue
index c7bbd5f7e..bdc442ed1 100644
--- a/packages/vue/src/chart-beta/chart-ring/src/chart-ring.vue
+++ b/packages/vue/src/chart/chart-ring/src/chart-ring.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { t } from '@opentiny/vue-locale'
 import { pie } from './ring'
 
diff --git a/packages/vue/src/chart/chart-ring/src/index.ts b/packages/vue/src/chart/chart-ring/src/index.ts
deleted file mode 100644
index d4bfde6e6..000000000
--- a/packages/vue/src/chart/chart-ring/src/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as echarts from 'echarts/core'
-import { PieChart } from 'echarts/charts'
-import { LabelLayout } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
-import { ring } from '@opentiny/vue-renderless/chart-pie/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([PieChart, LabelLayout, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartRing',
-    data() {
-      this.chartHandler = ring
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-ring/src/ring.ts b/packages/vue/src/chart/chart-ring/src/ring.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-ring/src/ring.ts
rename to packages/vue/src/chart/chart-ring/src/ring.ts
index 5c444eefe..2507b3c9e 100644
--- a/packages/vue/src/chart-beta/chart-ring/src/ring.ts
+++ b/packages/vue/src/chart/chart-ring/src/ring.ts
@@ -24,7 +24,7 @@
  * tooltipVisible boolean 是否显示提示框,true
  */
 
-import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-chart-core-beta'
+import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-chart-core'
 
 const PIE_RADIUS = 100
 const RING_RADIUS = [90, 100]
diff --git a/packages/vue/src/chart-beta/chart-ring/src/types.ts b/packages/vue/src/chart/chart-ring/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-ring/src/types.ts
rename to packages/vue/src/chart/chart-ring/src/types.ts
diff --git a/packages/vue/src/chart/chart-sankey/index.ts b/packages/vue/src/chart/chart-sankey/index.ts
index 47502f679..23c6b9e5b 100644
--- a/packages/vue/src/chart/chart-sankey/index.ts
+++ b/packages/vue/src/chart/chart-sankey/index.ts
@@ -1,18 +1,8 @@
-import Sankey from './src/index.js'
-import { version } from './package.json'
+import ChartSankey from './src/chart-sankey.vue'
 
-/* istanbul ignore next */
-Sankey.install = function (Vue) {
-  Vue.component(Sankey.name, Sankey)
+ChartSankey.install = function (Vue: any) {
+  Vue.component(ChartSankey.name, ChartSankey)
 }
 
-Sankey.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Sankey.install(window.Vue)
-  }
-}
-
-export default Sankey
+export { ChartSankey }
+export default ChartSankey
diff --git a/packages/vue/src/chart/chart-sankey/package.json b/packages/vue/src/chart/chart-sankey/package.json
index b667f872e..bdbfa964a 100644
--- a/packages/vue/src/chart/chart-sankey/package.json
+++ b/packages/vue/src/chart/chart-sankey/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-sankey",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-sankey/src/chart-sankey.vue b/packages/vue/src/chart/chart-sankey/src/chart-sankey.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-sankey/src/chart-sankey.vue
rename to packages/vue/src/chart/chart-sankey/src/chart-sankey.vue
index 17d22c542..b67dfe4f4 100644
--- a/packages/vue/src/chart-beta/chart-sankey/src/chart-sankey.vue
+++ b/packages/vue/src/chart/chart-sankey/src/chart-sankey.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { sankey } from './sankey'
 
 export default {
diff --git a/packages/vue/src/chart/chart-sankey/src/index.ts b/packages/vue/src/chart/chart-sankey/src/index.ts
deleted file mode 100644
index 52fdd26af..000000000
--- a/packages/vue/src/chart/chart-sankey/src/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as echarts from 'echarts/core'
-import { SankeyChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { sankey } from '@opentiny/vue-renderless/chart-sankey/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([SankeyChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartSankey',
-    data() {
-      this.chartHandler = sankey
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-sankey/src/sankey.ts b/packages/vue/src/chart/chart-sankey/src/sankey.ts
similarity index 98%
rename from packages/vue/src/chart-beta/chart-sankey/src/sankey.ts
rename to packages/vue/src/chart/chart-sankey/src/sankey.ts
index 50cc5689f..bf15d5f96 100644
--- a/packages/vue/src/chart-beta/chart-sankey/src/sankey.ts
+++ b/packages/vue/src/chart/chart-sankey/src/sankey.ts
@@ -1,4 +1,4 @@
-import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core'
 
 const getTooltip = (args) => {
   const { digit, itemDataType, linksDataType } = args
diff --git a/packages/vue/src/chart-beta/chart-sankey/src/types.ts b/packages/vue/src/chart/chart-sankey/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-sankey/src/types.ts
rename to packages/vue/src/chart/chart-sankey/src/types.ts
diff --git a/packages/vue/src/chart/chart-scatter/index.ts b/packages/vue/src/chart/chart-scatter/index.ts
index 0c3a8ed6f..c0dbe09df 100644
--- a/packages/vue/src/chart/chart-scatter/index.ts
+++ b/packages/vue/src/chart/chart-scatter/index.ts
@@ -1,18 +1,8 @@
-import Scatter from './src/index.js'
-import { version } from './package.json'
+import ChartScatter from './src/chart-scatter.vue'
 
-/* istanbul ignore next */
-Scatter.install = function (Vue) {
-  Vue.component(Scatter.name, Scatter)
+ChartScatter.install = function (Vue: any) {
+  Vue.component(ChartScatter.name, ChartScatter)
 }
 
-Scatter.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Scatter.install(window.Vue)
-  }
-}
-
-export default Scatter
+export { ChartScatter }
+export default ChartScatter
diff --git a/packages/vue/src/chart/chart-scatter/package.json b/packages/vue/src/chart/chart-scatter/package.json
index ab183e18c..74b5dd4b3 100644
--- a/packages/vue/src/chart/chart-scatter/package.json
+++ b/packages/vue/src/chart/chart-scatter/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-scatter",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-scatter/src/chart-scatter.vue b/packages/vue/src/chart/chart-scatter/src/chart-scatter.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-scatter/src/chart-scatter.vue
rename to packages/vue/src/chart/chart-scatter/src/chart-scatter.vue
index a35be76e4..2e201f612 100644
--- a/packages/vue/src/chart-beta/chart-scatter/src/chart-scatter.vue
+++ b/packages/vue/src/chart/chart-scatter/src/chart-scatter.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { scatter } from './scatter'
 
 export default {
diff --git a/packages/vue/src/chart/chart-scatter/src/index.ts b/packages/vue/src/chart/chart-scatter/src/index.ts
deleted file mode 100644
index 8e7187cde..000000000
--- a/packages/vue/src/chart/chart-scatter/src/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as echarts from 'echarts/core'
-import { GridComponent } from 'echarts/components'
-import { ScatterChart } from 'echarts/charts'
-import { UniversalTransition } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
-import { scatter } from '@opentiny/vue-renderless/chart-scatter/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([GridComponent, ScatterChart, UniversalTransition, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartScatter',
-    data() {
-      this.chartHandler = scatter
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-scatter/src/scatter.ts b/packages/vue/src/chart/chart-scatter/src/scatter.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-scatter/src/scatter.ts
rename to packages/vue/src/chart/chart-scatter/src/scatter.ts
index 77f0b1878..569fc0a6c 100644
--- a/packages/vue/src/chart-beta/chart-scatter/src/scatter.ts
+++ b/packages/vue/src/chart/chart-scatter/src/scatter.ts
@@ -23,7 +23,7 @@
  * itemStyle 图形样式。series-scatter. itemStyle
  */
 
-import { getFormatted, itemLabel, itemPoint, itemContent, isDefined } from '@opentiny/vue-chart-core-beta'
+import { getFormatted, itemLabel, itemPoint, itemContent, isDefined } from '@opentiny/vue-chart-core'
 
 const getLegend = (args) => {
   const { legendVisible, legendName } = args
diff --git a/packages/vue/src/chart-beta/chart-scatter/src/types.ts b/packages/vue/src/chart/chart-scatter/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-scatter/src/types.ts
rename to packages/vue/src/chart/chart-scatter/src/types.ts
diff --git a/packages/vue/src/chart/chart-sunburst/index.ts b/packages/vue/src/chart/chart-sunburst/index.ts
index 1531adb23..1354e3764 100644
--- a/packages/vue/src/chart/chart-sunburst/index.ts
+++ b/packages/vue/src/chart/chart-sunburst/index.ts
@@ -1,18 +1,9 @@
-import Sunburst from './src/index.js'
-import { version } from './package.json'
+import ChartSunburst from './src/chart-sunburst.vue'
 
-/* istanbul ignore next */
-Sunburst.install = function (Vue) {
-  Vue.component(Sunburst.name, Sunburst)
+ChartSunburst.install = function (Vue: any) {
+  Vue.component(ChartSunburst.name, ChartSunburst)
 }
 
-Sunburst.version = version
+export { ChartSunburst }
 
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Sunburst.install(window.Vue)
-  }
-}
-
-export default Sunburst
+export default ChartSunburst
diff --git a/packages/vue/src/chart/chart-sunburst/package.json b/packages/vue/src/chart/chart-sunburst/package.json
index e6a3128b5..404a1943c 100644
--- a/packages/vue/src/chart/chart-sunburst/package.json
+++ b/packages/vue/src/chart/chart-sunburst/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-sunburst",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-sunburst/src/chart-sunburst.vue b/packages/vue/src/chart/chart-sunburst/src/chart-sunburst.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-sunburst/src/chart-sunburst.vue
rename to packages/vue/src/chart/chart-sunburst/src/chart-sunburst.vue
index 334c1c3de..820311da9 100644
--- a/packages/vue/src/chart-beta/chart-sunburst/src/chart-sunburst.vue
+++ b/packages/vue/src/chart/chart-sunburst/src/chart-sunburst.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { sunburst } from './sunburst'
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 
 export default {
   name: 'ChartSunburst',
diff --git a/packages/vue/src/chart/chart-sunburst/src/index.ts b/packages/vue/src/chart/chart-sunburst/src/index.ts
deleted file mode 100644
index 3754aaa43..000000000
--- a/packages/vue/src/chart/chart-sunburst/src/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as echarts from 'echarts/core'
-import { SunburstChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { sunburst } from '@opentiny/vue-renderless/chart-sunburst/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([SunburstChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartSunburst',
-    data() {
-      this.chartHandler = sunburst
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-sunburst/src/sunburst.ts b/packages/vue/src/chart/chart-sunburst/src/sunburst.ts
similarity index 97%
rename from packages/vue/src/chart-beta/chart-sunburst/src/sunburst.ts
rename to packages/vue/src/chart/chart-sunburst/src/sunburst.ts
index 39cef4f33..6b74a7b7f 100644
--- a/packages/vue/src/chart-beta/chart-sunburst/src/sunburst.ts
+++ b/packages/vue/src/chart/chart-sunburst/src/sunburst.ts
@@ -1,4 +1,4 @@
-import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta'
+import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getTooltip = () => ({
   trigger: 'item',
diff --git a/packages/vue/src/chart-beta/chart-sunburst/src/types.ts b/packages/vue/src/chart/chart-sunburst/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-sunburst/src/types.ts
rename to packages/vue/src/chart/chart-sunburst/src/types.ts
diff --git a/packages/vue/src/chart/chart-tree/index.ts b/packages/vue/src/chart/chart-tree/index.ts
index df655e80c..a6c6f74a3 100644
--- a/packages/vue/src/chart/chart-tree/index.ts
+++ b/packages/vue/src/chart/chart-tree/index.ts
@@ -1,18 +1,9 @@
-import ChartTree from './src/index.js'
-import { version } from './package.json'
+import ChartTree from './src/chart-tree.vue'
 
-/* istanbul ignore next */
-ChartTree.install = function (Vue) {
+ChartTree.install = function (Vue: any) {
   Vue.component(ChartTree.name, ChartTree)
 }
 
-ChartTree.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    ChartTree.install(window.Vue)
-  }
-}
+export { ChartTree }
 
 export default ChartTree
diff --git a/packages/vue/src/chart/chart-tree/package.json b/packages/vue/src/chart/chart-tree/package.json
index 34cfb6266..c22d1918b 100644
--- a/packages/vue/src/chart/chart-tree/package.json
+++ b/packages/vue/src/chart/chart-tree/package.json
@@ -1,23 +1,18 @@
 {
   "name": "@opentiny/vue-chart-tree",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-tree/src/chart-tree.vue b/packages/vue/src/chart/chart-tree/src/chart-tree.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-tree/src/chart-tree.vue
rename to packages/vue/src/chart/chart-tree/src/chart-tree.vue
index 06bf3fad6..e0e4e9b74 100644
--- a/packages/vue/src/chart-beta/chart-tree/src/chart-tree.vue
+++ b/packages/vue/src/chart/chart-tree/src/chart-tree.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { tree } from './tree'
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 
 export default {
   name: 'ChartTree',
diff --git a/packages/vue/src/chart/chart-tree/src/index.ts b/packages/vue/src/chart/chart-tree/src/index.ts
deleted file mode 100644
index ce6aa4193..000000000
--- a/packages/vue/src/chart/chart-tree/src/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as echarts from 'echarts/core'
-import { TreeChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { tree } from '@opentiny/vue-renderless/chart-tree/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([TreeChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartTree',
-    data() {
-      this.chartHandler = tree
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-tree/src/tree.ts b/packages/vue/src/chart/chart-tree/src/tree.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-tree/src/tree.ts
rename to packages/vue/src/chart/chart-tree/src/tree.ts
index e1baccd96..3bcc45c0f 100644
--- a/packages/vue/src/chart-beta/chart-tree/src/tree.ts
+++ b/packages/vue/src/chart/chart-tree/src/tree.ts
@@ -1,4 +1,4 @@
-import { isObject, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta'
+import { isObject, itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getTreeLegend = (args) => {
   const { dimension, rows } = args
diff --git a/packages/vue/src/chart-beta/chart-tree/src/types.ts b/packages/vue/src/chart/chart-tree/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-tree/src/types.ts
rename to packages/vue/src/chart/chart-tree/src/types.ts
diff --git a/packages/vue/src/chart/chart-waterfall/index.ts b/packages/vue/src/chart/chart-waterfall/index.ts
index 4add35a87..2d6b8d50a 100644
--- a/packages/vue/src/chart/chart-waterfall/index.ts
+++ b/packages/vue/src/chart/chart-waterfall/index.ts
@@ -1,21 +1,8 @@
-import Waterfall from './src/index.js'
-import { waterfall } from '@opentiny/vue-renderless/chart-waterfall/index'
-import { version } from './package.json'
+import ChartWaterfall from './src/chart-waterfall.vue'
 
-/* istanbul ignore next */
-Waterfall.install = function (Vue) {
-  Vue.component(Waterfall.name, Waterfall)
+ChartWaterfall.install = function (Vue: any) {
+  Vue.component(ChartWaterfall.name, ChartWaterfall)
 }
 
-Waterfall.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Waterfall.install(window.Vue)
-  }
-}
-
-export { waterfall }
-
-export default Waterfall
+export { ChartWaterfall }
+export default ChartWaterfall
diff --git a/packages/vue/src/chart/chart-waterfall/package.json b/packages/vue/src/chart/chart-waterfall/package.json
index c695f50af..c41cc1b13 100644
--- a/packages/vue/src/chart/chart-waterfall/package.json
+++ b/packages/vue/src/chart/chart-waterfall/package.json
@@ -1,23 +1,19 @@
 {
   "name": "@opentiny/vue-chart-waterfall",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-chart-core": "workspace:~"
+    "@opentiny/vue-chart-core": "workspace:~",
+    "@opentiny/vue-locale": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-waterfall/src/chart-waterfall.vue b/packages/vue/src/chart/chart-waterfall/src/chart-waterfall.vue
similarity index 93%
rename from packages/vue/src/chart-beta/chart-waterfall/src/chart-waterfall.vue
rename to packages/vue/src/chart/chart-waterfall/src/chart-waterfall.vue
index aaf43fa87..d2f5bed44 100644
--- a/packages/vue/src/chart-beta/chart-waterfall/src/chart-waterfall.vue
+++ b/packages/vue/src/chart/chart-waterfall/src/chart-waterfall.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { waterfall } from './waterfall'
 import { t } from '@opentiny/vue-locale'
 
diff --git a/packages/vue/src/chart/chart-waterfall/src/index.ts b/packages/vue/src/chart/chart-waterfall/src/index.ts
deleted file mode 100644
index a670bc75d..000000000
--- a/packages/vue/src/chart/chart-waterfall/src/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as echarts from 'echarts/core'
-import { GridComponent } from 'echarts/components'
-import { BarChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { waterfall } from '@opentiny/vue-renderless/chart-waterfall/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-echarts.use([GridComponent, BarChart, CanvasRenderer])
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartWaterfall',
-    data() {
-      this.chartHandler = waterfall
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-waterfall/src/types.ts b/packages/vue/src/chart/chart-waterfall/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-waterfall/src/types.ts
rename to packages/vue/src/chart/chart-waterfall/src/types.ts
diff --git a/packages/vue/src/chart-beta/chart-waterfall/src/waterfall.ts b/packages/vue/src/chart/chart-waterfall/src/waterfall.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-waterfall/src/waterfall.ts
rename to packages/vue/src/chart/chart-waterfall/src/waterfall.ts
index 271506113..78044b564 100644
--- a/packages/vue/src/chart-beta/chart-waterfall/src/waterfall.ts
+++ b/packages/vue/src/chart/chart-waterfall/src/waterfall.ts
@@ -11,7 +11,7 @@
  * labelMap  坐标轴名称映射, 设置别名
  */
 
-import { itemLabel, itemContent, getFormatted } from '@opentiny/vue-chart-core-beta'
+import { itemLabel, itemContent, getFormatted } from '@opentiny/vue-chart-core'
 
 const getWaterfallTooltip = (dataType, digit) => {
   const formatter = (items) => {
diff --git a/packages/vue/src/chart/chart-wordcloud/index.ts b/packages/vue/src/chart/chart-wordcloud/index.ts
index 5d8345544..e34990337 100644
--- a/packages/vue/src/chart/chart-wordcloud/index.ts
+++ b/packages/vue/src/chart/chart-wordcloud/index.ts
@@ -1,18 +1,8 @@
-import Wordcloud from './src/index.js'
-import { version } from './package.json'
+import ChartWordcloud from './src/chart-wordcloud.vue'
 
-/* istanbul ignore next */
-Wordcloud.install = function (Vue) {
-  Vue.component(Wordcloud.name, Wordcloud)
+ChartWordcloud.install = function (Vue: any) {
+  Vue.component(ChartWordcloud.name, ChartWordcloud)
 }
 
-Wordcloud.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    Wordcloud.install(window.Vue)
-  }
-}
-
-export default Wordcloud
+export { ChartWordcloud }
+export default ChartWordcloud
diff --git a/packages/vue/src/chart/chart-wordcloud/package.json b/packages/vue/src/chart/chart-wordcloud/package.json
index 0567a9d39..cd238068f 100644
--- a/packages/vue/src/chart/chart-wordcloud/package.json
+++ b/packages/vue/src/chart/chart-wordcloud/package.json
@@ -1,24 +1,19 @@
 {
   "name": "@opentiny/vue-chart-wordcloud",
-  "version": "3.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
   "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-chart-core": "workspace:~",
     "echarts-wordcloud": "2.0.0"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart-beta/chart-wordcloud/src/chart-wordcloud.vue b/packages/vue/src/chart/chart-wordcloud/src/chart-wordcloud.vue
similarity index 92%
rename from packages/vue/src/chart-beta/chart-wordcloud/src/chart-wordcloud.vue
rename to packages/vue/src/chart/chart-wordcloud/src/chart-wordcloud.vue
index 9ba9decb9..099251419 100644
--- a/packages/vue/src/chart-beta/chart-wordcloud/src/chart-wordcloud.vue
+++ b/packages/vue/src/chart/chart-wordcloud/src/chart-wordcloud.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Core from '@opentiny/vue-chart-core-beta'
+import Core from '@opentiny/vue-chart-core'
 import { wordcloud } from './wordcloud'
 import 'echarts-wordcloud'
 
diff --git a/packages/vue/src/chart/chart-wordcloud/src/index.ts b/packages/vue/src/chart/chart-wordcloud/src/index.ts
deleted file mode 100644
index 276800d68..000000000
--- a/packages/vue/src/chart/chart-wordcloud/src/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import 'echarts-wordcloud'
-import { wordcloud } from '@opentiny/vue-renderless/chart-wordcloud/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
-
-export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'ChartWordcloud',
-    data() {
-      this.chartHandler = wordcloud
-      return {}
-    }
-  }
-})
diff --git a/packages/vue/src/chart-beta/chart-wordcloud/src/types.ts b/packages/vue/src/chart/chart-wordcloud/src/types.ts
similarity index 100%
rename from packages/vue/src/chart-beta/chart-wordcloud/src/types.ts
rename to packages/vue/src/chart/chart-wordcloud/src/types.ts
diff --git a/packages/vue/src/chart-beta/chart-wordcloud/src/wordcloud.ts b/packages/vue/src/chart/chart-wordcloud/src/wordcloud.ts
similarity index 99%
rename from packages/vue/src/chart-beta/chart-wordcloud/src/wordcloud.ts
rename to packages/vue/src/chart/chart-wordcloud/src/wordcloud.ts
index 509e06ec0..7d23ffe85 100644
--- a/packages/vue/src/chart-beta/chart-wordcloud/src/wordcloud.ts
+++ b/packages/vue/src/chart/chart-wordcloud/src/wordcloud.ts
@@ -7,7 +7,7 @@
  * color	词云图字体颜色	Array[String], String, Function	默认为 "rgb(Math.round(Math.random * 160), Math.round(Math.random * 160), Math.round(Math.random * 160))"
  */
 
-import { itemLabel, itemContent } from '@opentiny/vue-chart-core-beta'
+import { itemLabel, itemContent } from '@opentiny/vue-chart-core'
 
 const getTooltip = (args) => {
   const { tooltipFormatter } = args
diff --git a/packages/vue/src/chart/index.ts b/packages/vue/src/chart/index.ts
index d7c07058e..f3adbc3a8 100644
--- a/packages/vue/src/chart/index.ts
+++ b/packages/vue/src/chart/index.ts
@@ -1,14 +1,12 @@
-import Chart from './src/index.js'
+import Chart from './src/index'
 import { version } from './package.json'
 
-/* istanbul ignore next */
 Chart.install = function (Vue) {
   Vue.component(Chart.name, Chart)
 }
 
 Chart.version = version
 
-/* istanbul ignore next */
 if (process.env.BUILD_TARGET === 'runtime') {
   if (typeof window !== 'undefined' && window.Vue) {
     Chart.install(window.Vue)
diff --git a/packages/vue/src/chart/package.json b/packages/vue/src/chart/package.json
index f6f3a2b25..b393b8cbf 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,18 +21,31 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "echarts": "5.4.1",
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-chart-core": "workspace:~",
     "@opentiny/vue-chart-bar": "workspace:~",
+    "@opentiny/vue-chart-core": "workspace:~",
+    "@opentiny/vue-chart-histogram": "workspace:~",
     "@opentiny/vue-chart-line": "workspace:~",
     "@opentiny/vue-chart-pie": "workspace:~",
-    "@opentiny/vue-chart-funnel": "workspace:~",
     "@opentiny/vue-chart-radar": "workspace:~",
+    "@opentiny/vue-chart-ring": "workspace:~",
     "@opentiny/vue-chart-waterfall": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-chart-funnel": "workspace:~",
+    "@opentiny/vue-chart-gauge": "workspace:~",
+    "@opentiny/vue-chart-scatter": "workspace:~",
+    "@opentiny/vue-chart-tree": "workspace:~",
+    "@opentiny/vue-chart-sankey": "workspace:~",
+    "@opentiny/vue-chart-candle": "workspace:~",
+    "@opentiny/vue-chart-heatmap": "workspace:~",
+    "@opentiny/vue-chart-liquidfill": "workspace:~",
+    "@opentiny/vue-chart-wordcloud": "workspace:~",
+    "@opentiny/vue-chart-map": "workspace:~",
+    "@opentiny/vue-chart-boxplot": "workspace:~",
+    "@opentiny/vue-autonavi-map": "workspace:~",
+    "@opentiny/vue-baidu-map": "workspace:~",
+    "@opentiny/vue-chart-graph": "workspace:~",
+    "@opentiny/vue-chart-sunburst": "workspace:~",
+    "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-locale": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/chart/src/index.ts b/packages/vue/src/chart/src/index.ts
index 59f1a1acc..5f76134ca 100644
--- a/packages/vue/src/chart/src/index.ts
+++ b/packages/vue/src/chart/src/index.ts
@@ -1,47 +1,102 @@
-import * as echarts from 'echarts/core'
-import { ToolboxComponent, GridComponent } from 'echarts/components'
-import { BarChart, FunnelChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
-import { bar, histogram } from '@opentiny/vue-renderless/chart-bar/index'
-import { line } from '@opentiny/vue-renderless/chart-line/index'
-import { pie, ring } from '@opentiny/vue-renderless/chart-pie/index'
-import { funnel } from '@opentiny/vue-renderless/chart-funnel/index'
-import { radar } from '@opentiny/vue-renderless/chart-radar/index'
-import { waterfall } from '@opentiny/vue-renderless/chart-waterfall/index'
-import Core from '@opentiny/vue-chart-core'
-import { $prefix, defineComponent } from '@opentiny/vue-common'
+import { ChartRing } from '@opentiny/vue-chart-ring'
+import { ChartPie } from '@opentiny/vue-chart-pie'
+import { ChartBar } from '@opentiny/vue-chart-bar'
+import { ChartHistogram } from '@opentiny/vue-chart-histogram'
+import { ChartRadar } from '@opentiny/vue-chart-radar'
+import { ChartLine } from '@opentiny/vue-chart-line'
 
-echarts.use([
-  ToolboxComponent,
-  GridComponent,
-  BarChart,
-  FunnelChart,
-  LineChart,
-  PieChart,
-  RadarChart,
-  LabelLayout,
-  UniversalTransition,
-  CanvasRenderer
-])
+import { AutonaviMap } from '@opentiny/vue-autonavi-map'
+import { BaiduMap } from '@opentiny/vue-baidu-map'
+import { ChartBoxplot } from '@opentiny/vue-chart-boxplot'
+import { ChartCandle } from '@opentiny/vue-chart-candle'
+import { ChartFunnel } from '@opentiny/vue-chart-funnel'
+import { ChartGauge } from '@opentiny/vue-chart-gauge'
+import { ChartGraph } from '@opentiny/vue-chart-graph'
+import { ChartHeatmap } from '@opentiny/vue-chart-heatmap'
+
+import { ChartLiquidfill } from '@opentiny/vue-chart-liquidfill'
+import { ChartMap } from '@opentiny/vue-chart-map'
+
+import { ChartSankey } from '@opentiny/vue-chart-sankey'
+import { ChartScatter } from '@opentiny/vue-chart-scatter'
+import { ChartSunburst } from '@opentiny/vue-chart-sunburst'
+import { ChartTree } from '@opentiny/vue-chart-tree'
+import { ChartWaterfall } from '@opentiny/vue-chart-waterfall'
+import { ChartWordcloud } from '@opentiny/vue-chart-wordcloud'
+
+import Core from '@opentiny/vue-chart-core'
+
+import { $prefix, defineComponent, h } from '@opentiny/vue-common'
 
 export default defineComponent({
-  ...Core,
-  ...{
-    name: $prefix + 'Chart',
-    data() {
-      this.chartLib = {
-        bar,
-        funnel,
-        histogram,
-        line,
-        pie,
-        radar,
-        ring,
-        waterfall
-      }
-      this.chartHandler = this.chartLib[this.settings.type]
-      return {}
+  name: $prefix + 'Chart',
+  props: {
+    ...Core.props
+  },
+  data() {
+    this.chartLib = {
+      bar: ChartBar,
+      histogram: ChartHistogram,
+      line: ChartLine,
+      pie: ChartPie,
+      ring: ChartRing,
+      radar: ChartRadar,
+      autonaviMap: AutonaviMap,
+      baiduMap: BaiduMap,
+      boxplot: ChartBoxplot,
+      candle: ChartCandle,
+      funnel: ChartFunnel,
+      gauge: ChartGauge,
+      graph: ChartGraph,
+      heatmap: ChartHeatmap,
+      liquidfill: ChartLiquidfill,
+      map: ChartMap,
+      sankey: ChartSankey,
+      scatter: ChartScatter,
+      sunburst: ChartSunburst,
+      tree: ChartTree,
+      waterfall: ChartWaterfall,
+      wordcloud: ChartWordcloud
     }
+    return {}
+  },
+  methods: {
+    ready(val) {
+      this.$emit('ready', val)
+    },
+    readyOnce(val) {
+      this.$emit('readyOnce', val)
+    },
+    handleColor(val) {
+      this.$emit('handle-color', val)
+    },
+    ...Core.methods
+  },
+  render() {
+    return h(
+      'div',
+      {
+        style: {
+          width: this.width,
+          height: this.height,
+          position: 'relative'
+        }
+      },
+      [
+        h(this.chartLib[this.settings.type], {
+          props: {
+            ...this.$props
+          },
+          on: {
+            ready: this.ready,
+            readyOnce: this.readyOnce,
+            handleColor: this.handleColor
+          }
+        }),
+
+        // eslint-disable-next-line vue/require-slots-as-functions
+        this.$slots.default
+      ]
+    )
   }
 })
diff --git a/packages/vue/src/checkbox-button/package.json b/packages/vue/src/checkbox-button/package.json
index 77f00a0b8..76da74075 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/checkbox-group/package.json b/packages/vue/src/checkbox-group/package.json
index 243925652..6d211318d 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/checkbox/package.json b/packages/vue/src/checkbox/package.json
index f0c199f35..f859bc88c 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/col/package.json b/packages/vue/src/col/package.json
index 3e2b6466b..df6293a04 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/collapse-item/package.json b/packages/vue/src/collapse-item/package.json
index 5ab3fc6ae..5c44a3a7f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-collapse-transition": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/collapse-transition/package.json b/packages/vue/src/collapse-transition/package.json
index d6bf0b103..a229c9d71 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,8 +17,7 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/collapse/package.json b/packages/vue/src/collapse/package.json
index 74a74f261..c01684a90 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/color-picker/package.json b/packages/vue/src/color-picker/package.json
index 3c43cf4db..c598d2cb2 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": "5.8.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -8,10 +8,6 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-input": "workspace:~",
-    "@opentiny/vue-option": "workspace:~",
-    "@opentiny/vue-button": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-color-select-panel": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
@@ -22,4 +18,4 @@
     "vitest": "^0.31.0"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/color-select-panel/package.json b/packages/vue/src/color-select-panel/package.json
index c3b74a97a..7501e8c24 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": "5.10.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -11,11 +11,10 @@
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-button": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
     "@opentiny/vue-collapse": "workspace:~",
     "@opentiny/vue-collapse-item": "workspace:~",
     "@opentiny/vue-button-group": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/column-list-group/package.json b/packages/vue/src/column-list-group/package.json
index 228b938e6..ced086fe5 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,4 +15,4 @@
     "@opentiny/vue-renderless": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/column-list-item/package.json b/packages/vue/src/column-list-item/package.json
index a838017e6..bcb8b227e 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-radio": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/company/package.json b/packages/vue/src/company/package.json
index cabac38ed..801bcc96e 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/config-provider/package.json b/packages/vue/src/config-provider/package.json
index 09c6214d8..af80ffb44 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.7.14",
+  "version": "3.15.0",
   "main": "lib/index.js",
   "module": "index.ts",
   "sideEffects": false,
@@ -15,9 +15,8 @@
   },
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-config-provider": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/container/package.json b/packages/vue/src/container/package.json
index ee6b819d7..a96faecc6 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/country/package.json b/packages/vue/src/country/package.json
index 008465084..aef022f73 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/credit-card-form/index.ts b/packages/vue/src/credit-card-form/index.ts
deleted file mode 100644
index 939ebbcaf..000000000
--- a/packages/vue/src/credit-card-form/index.ts
+++ /dev/null
@@ -1,30 +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 CreditCardForm from './src/index'
-import '@opentiny/vue-theme/credit-card-form/index.less'
-import { version } from './package.json'
-
-/* istanbul ignore next */
-CreditCardForm.install = function (Vue) {
-  Vue.component(CreditCardForm.name, CreditCardForm)
-}
-
-CreditCardForm.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    CreditCardForm.install(window.Vue)
-  }
-}
-
-export default CreditCardForm
diff --git a/packages/vue/src/credit-card-form/package.json b/packages/vue/src/credit-card-form/package.json
deleted file mode 100644
index bc519e708..000000000
--- a/packages/vue/src/credit-card-form/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "@opentiny/vue-credit-card-form",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-credit-card": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
-  },
-  "license": "MIT"
-}
diff --git a/packages/vue/src/credit-card-form/src/index.ts b/packages/vue/src/credit-card-form/src/index.ts
deleted file mode 100644
index 53a7f3afe..000000000
--- a/packages/vue/src/credit-card-form/src/index.ts
+++ /dev/null
@@ -1,29 +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 { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
-import template from 'virtual-template?pc'
-
-// 该组件定于2023年8月30日版本日落
-export default defineComponent({
-  name: $prefix + 'CreditCardForm',
-  props: {
-    ...$props,
-    backgroundImage: [String, Object],
-    formData: {
-      type: Object,
-      default: () => ({ cardYear: '', cardNumber: '', cardName: '', cardMonth: '', cardCvv: '' })
-    }
-  },
-  setup(props, context) {
-    return $setup({ props, context, template })
-  }
-})
diff --git a/packages/vue/src/credit-card-form/src/pc.vue b/packages/vue/src/credit-card-form/src/pc.vue
deleted file mode 100644
index ae8bc59ea..000000000
--- a/packages/vue/src/credit-card-form/src/pc.vue
+++ /dev/null
@@ -1,139 +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.
- *
- -->
-<template>
-  <div class="credit-card-form">
-    <div class="credit-card-list">
-      <tiny-credit-card
-        :fields="state.fields"
-        :labels="formData"
-        :isCardNumberMasked="state.isCardNumberMasked"
-        :backgroundImage="backgroundImage"
-      />
-    </div>
-    <div class="credit-card-form__inner">
-      <div class="credit-card-input">
-        <label for="cardNumber" class="credit-card-input__label">Card Number</label>
-        <input
-          type="tel"
-          :id="state.fields.cardNumber"
-          @input="changeNumber"
-          @focus="focusCardNumber"
-          @blur="blurCardNumber"
-          class="credit-card-input__input"
-          :value="state.formData.cardNumber"
-          :maxlength="state.cardNumberMaxLength"
-          data-credit-card-field
-          autocomplete="off"
-        />
-        <button
-          type="button"
-          class="credit-card-input__eye"
-          :class="{ '-active': !state.isCardNumberMasked }"
-          title="Show/Hide card number"
-          tabindex="-1"
-          :disabled="formData.cardNumber === ''"
-          @click="toggleMask"
-        ></button>
-      </div>
-      <div class="credit-card-input">
-        <label for="cardName" class="credit-card-input__label">Card Holder</label>
-        <input
-          type="text"
-          :id="state.fields.cardName"
-          v-letter-only
-          @input="changeName"
-          class="credit-card-input__input"
-          :value="state.formData.cardName"
-          data-credit-card-field
-          autocomplete="off"
-        />
-      </div>
-      <div class="credit-card-form__row">
-        <div class="credit-card-form__col">
-          <div class="credit-card-form__group">
-            <label for="cardMonth" class="credit-card-input__label">Expiration Date</label>
-            <select
-              class="credit-card-input__input -select"
-              :id="state.fields.cardMonth"
-              v-model="state.cardMonth"
-              @change="changeMonth"
-              data-credit-card-field
-            >
-              <option value disabled selected>Month</option>
-              <option
-                v-bind:value="n < 10 ? '0' + n : n"
-                v-for="n in 12"
-                v-bind:disabled="n < state.minCardMonth"
-                v-bind:key="n"
-              >
-                {{ generateMonthValue(n) }}
-              </option>
-            </select>
-            <select
-              class="credit-card-input__input -select"
-              :id="state.fields.cardYear"
-              v-model="state.cardYear"
-              @change="changeYear"
-              data-credit-card-field
-            >
-              <option value disabled selected>Year</option>
-              <option v-bind:value="$index + state.minCardYear" v-for="(n, $index) in 12" v-bind:key="n">
-                {{ $index + state.minCardYear }}
-              </option>
-            </select>
-          </div>
-        </div>
-        <div class="credit-card-form__col -cvv">
-          <div class="credit-card-input">
-            <label for="cardCvv" class="credit-card-input__label">CVV</label>
-            <input
-              type="tel"
-              class="credit-card-input__input"
-              v-number-only
-              :id="state.fields.cardCvv"
-              maxlength="4"
-              :value="state.formData.cardCvv"
-              @input="changeCvv"
-              data-credit-card-field
-              autocomplete="off"
-            />
-          </div>
-        </div>
-      </div>
-      <button type="button" class="credit-card-form__button" @click="handleSubmit">
-        {{ t('ui.creditCardForm.submit') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { renderless, api } from '@opentiny/vue-renderless/credit-card-form/vue'
-import { props, setup, directive, defineComponent } from '@opentiny/vue-common'
-import LetterOnly from '@opentiny/vue-renderless/common/deps/letter-only'
-import NumberOnly from '@opentiny/vue-renderless/common/deps/number-only'
-import CreditCard from '@opentiny/vue-credit-card'
-
-export default defineComponent({
-  components: {
-    TinyCreditCard: CreditCard
-  },
-  directives: directive({
-    LetterOnly,
-    NumberOnly
-  }),
-  props: [...props, 'formData', 'backgroundImage'],
-  setup(props, context) {
-    return setup({ props, context, renderless, api })
-  }
-})
-</script>
diff --git a/packages/vue/src/credit-card/package.json b/packages/vue/src/credit-card/package.json
deleted file mode 100644
index 5b3105a10..000000000
--- a/packages/vue/src/credit-card/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "@opentiny/vue-credit-card",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
-  },
-  "license": "MIT"
-}
diff --git a/packages/vue/src/credit-card/src/index.ts b/packages/vue/src/credit-card/src/index.ts
deleted file mode 100644
index 9e55f6c9e..000000000
--- a/packages/vue/src/credit-card/src/index.ts
+++ /dev/null
@@ -1,33 +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 { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
-import template from 'virtual-template?pc'
-
-export default defineComponent({
-  name: $prefix + 'CreditCard',
-  props: {
-    ...$props,
-    backgroundImage: [String, Object],
-    isCardNumberMasked: Boolean,
-    fields: {
-      type: Object,
-      default: () => ({})
-    },
-    labels: {
-      type: Object,
-      default: () => ({ cardCvv: '', cardMonth: '', cardName: '', cardNumber: '', cardYear: '' })
-    }
-  },
-  setup(props, context) {
-    return $setup({ props, context, template })
-  }
-})
diff --git a/packages/vue/src/credit-card/src/pc.vue b/packages/vue/src/credit-card/src/pc.vue
deleted file mode 100644
index 4a0739cb2..000000000
--- a/packages/vue/src/credit-card/src/pc.vue
+++ /dev/null
@@ -1,149 +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.
- *
- -->
-<template>
-  <div class="credit-card-item" :class="{ '-active': state.isCardFlipped }">
-    <div class="credit-card-item__side -front">
-      <div
-        class="credit-card-item__focus"
-        :class="{ '-active': state.focusElementStyle }"
-        :style="state.focusElementStyle"
-        ref="focusElement"
-      ></div>
-      <div class="credit-card-item__cover">
-        <img class="credit-card-item__bg" :src="backgroundImage || images.background" />
-      </div>
-      <div class="credit-card-item__wrapper">
-        <div class="credit-card-item__top">
-          <img :src="images.chip" class="credit-card-item__chip" />
-          <div class="credit-card-item__type">
-            <transition name="slide-fade-up">
-              <img
-                v-if="state.cardType"
-                class="credit-card-item__typeImg"
-                :src="images[state.cardType]"
-                :key="state.cardType"
-                alt
-              />
-            </transition>
-          </div>
-        </div>
-        <label :for="fields.cardNumber" class="credit-card-item__number" :ref="fields.cardNumber">
-          <span v-for="(n, $index) in state.currentPlaceholder" :key="$index">
-            <transition name="slide-fade-up">
-              <div v-if="getIsNumberMasked($index, n)" class="credit-card-item__numberItem">*</div>
-              <div
-                v-else-if="labels.cardNumber.length > $index"
-                class="credit-card-item__numberItem"
-                :class="{ '-active': n.trim() === '' }"
-                :key="state.currentPlaceholder"
-              >
-                {{ labels.cardNumber[$index] }}
-              </div>
-              <div
-                v-else
-                class="credit-card-item__numberItem"
-                :class="{ '-active': n.trim() === '' }"
-                :key="state.currentPlaceholder + 1"
-              >
-                {{ n }}
-              </div>
-            </transition>
-          </span>
-        </label>
-        <div class="credit-card-item__content">
-          <label :for="fields.cardName" class="credit-card-item__info" :ref="fields.cardName">
-            <div class="credit-card-item__holder">Card Holder</div>
-            <transition name="slide-fade-up">
-              <div class="credit-card-item__name" v-if="labels.cardName.length" key="1">
-                <transition-group name="slide-fade-right">
-                  <span
-                    class="credit-card-item__nameItem"
-                    v-for="(n, $index) in labels.cardName.replace(/\s\s+/g, ' ')"
-                    :key="$index + 1"
-                    >{{ n }}</span
-                  >
-                </transition-group>
-              </div>
-              <div class="credit-card-item__name" v-else key="2">Full Name</div>
-            </transition>
-          </label>
-          <div class="credit-card-item__date" ref="cardDate">
-            <label class="credit-card-item__dateTitle" :for="fields.cardMonth">Expires</label>
-            <label class="credit-card-item__dateItem" :for="fields.cardMonth">
-              <transition name="slide-fade-up">
-                <span v-if="labels.cardMonth" :key="labels.cardMonth" v-text="labels.cardMonth"></span>
-                <span v-else key="2" v-text="'MM'"></span>
-              </transition>
-            </label>
-            <span>/</span>
-            <label class="credit-card-item__dateItem" for="cardYear">
-              <transition name="slide-fade-up">
-                <span v-if="labels.cardYear" :key="labels.cardYear" v-text="String(labels.cardYear).slice(2, 4)"></span>
-                <span v-else key="2" v-text="'YY'"></span>
-              </transition>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="credit-card-item__side -back">
-      <div class="credit-card-item__cover">
-        <img :src="backgroundImage || images.background" class="credit-card-item__bg" />
-      </div>
-      <div class="credit-card-item__band"></div>
-      <div class="credit-card-item__cvv">
-        <div class="credit-card-item__cvvTitle">CVV</div>
-        <div class="credit-card-item__cvvBand">
-          <span v-for="(n, $index) in labels.cardCvv" :key="$index">*</span>
-        </div>
-        <div class="credit-card-item__type">
-          <img :src="images[state.cardType]" v-if="state.cardType" class="credit-card-item__typeImg" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { renderless, api } from '@opentiny/vue-renderless/credit-card/vue'
-import { props, setup, defineComponent } from '@opentiny/vue-common'
-import jcb from '@opentiny/vue-theme/images/credit-jcb.png'
-import amex from '@opentiny/vue-theme/images/credit-amex.png'
-import chip from '@opentiny/vue-theme/images/credit-chip.png'
-import troy from '@opentiny/vue-theme/images/credit-troy.png'
-import visa from '@opentiny/vue-theme/images/credit-visa.png'
-import discover from '@opentiny/vue-theme/images/credit-discover.png'
-import unionpay from '@opentiny/vue-theme/images/credit-unionpay.png'
-import mastercard from '@opentiny/vue-theme/images/credit-mastercard.png'
-import dinersclub from '@opentiny/vue-theme/images/credit-dinersclub.png'
-import background from '@opentiny/vue-theme/images/credit-background.jpeg'
-
-export default defineComponent({
-  props: [...props, 'labels', 'fields', 'isCardNumberMasked', 'backgroundImage'],
-  setup(props, context) {
-    return Object.assign(setup({ props, context, renderless, api }), {
-      images: {
-        jcb,
-        amex,
-        chip,
-        troy,
-        visa,
-        discover,
-        unionpay,
-        background,
-        dinersclub,
-        mastercard
-      }
-    })
-  }
-})
-</script>
diff --git a/packages/vue/src/crop/package.json b/packages/vue/src/crop/package.json
index 0890ae94e..9b9e16155 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/currency/package.json b/packages/vue/src/currency/package.json
index 93d0f9258..87bb5c7a4 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.7.0",
+  "version": "3.15.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/currency/src/mobile-first.vue b/packages/vue/src/currency/src/mobile-first.vue
index 66544068b..21252b694 100644
--- a/packages/vue/src/currency/src/mobile-first.vue
+++ b/packages/vue/src/currency/src/mobile-first.vue
@@ -19,10 +19,10 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/currency/vue'
-import { props, setup } from '@opentiny/vue-common'
+import { props, setup, defineComponent } from '@opentiny/vue-common'
 import SelectMobile from '@opentiny/vue-select-mobile'
 
-export default {
+export default defineComponent({
   inheritAttrs: false,
   components: {
     TinySelectMobile: SelectMobile
@@ -44,5 +44,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/date-panel/package.json b/packages/vue/src/date-panel/package.json
index 977e076db..ca9699990 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -29,4 +29,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/date-panel/src/index.ts b/packages/vue/src/date-panel/src/index.ts
index bbc85c7f1..478dfd572 100644
--- a/packages/vue/src/date-panel/src/index.ts
+++ b/packages/vue/src/date-panel/src/index.ts
@@ -1,7 +1,7 @@
-import { $prefix, $props, $setup } from '@opentiny/vue-common'
+import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'DatePanel',
   componentName: 'DatePanel',
   props: {
@@ -22,4 +22,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/date-picker-mobile-first/package.json b/packages/vue/src/date-picker-mobile-first/package.json
index 9a3af62ba..aa67a0d75 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/date-picker/package.json b/packages/vue/src/date-picker/package.json
index 65a7f3aa1..3df790dc8 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/date-range/package.json b/packages/vue/src/date-range/package.json
index 789474ad3..60822ca32 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,11 +19,10 @@
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
     "@opentiny/vue-button": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-time": "workspace:~",
     "@opentiny/vue-date-table": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/date-range/src/index.ts b/packages/vue/src/date-range/src/index.ts
index d2be9e9a2..050ab1690 100644
--- a/packages/vue/src/date-range/src/index.ts
+++ b/packages/vue/src/date-range/src/index.ts
@@ -1,4 +1,4 @@
-import { $prefix, $props, $setup } from '@opentiny/vue-common'
+import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
 const $constants = {
@@ -6,7 +6,7 @@ const $constants = {
   endDate: new Date('2099-12-31')
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'DateRange',
   componentName: 'DateRange',
   props: {
@@ -35,4 +35,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/date-range/src/mobile-first.vue b/packages/vue/src/date-range/src/mobile-first.vue
index e8482fc4e..8b300faca 100644
--- a/packages/vue/src/date-range/src/mobile-first.vue
+++ b/packages/vue/src/date-range/src/mobile-first.vue
@@ -3,12 +3,7 @@
     <div
       v-show="state.visible"
       data-tag="tiny-picker-panel tiny-date-range-picker tiny-popper"
-      :class="
-        m(
-          gcls(['picker-panel', 'date-range-picker']),
-          state.popperClass
-        )
-      "
+      :class="m(gcls(['picker-panel', 'date-range-picker']), state.popperClass)"
       ref="refDateRange"
     >
       <div data-tag="tiny-picker-panel__body-wrapper" class="relative">
@@ -249,7 +244,13 @@
         </div>
       </div>
       <div data-tag="tiny-picker-panel__footer" v-if="state.showTime" :class="gcls('footer')">
-        <tiny-button size="mini" type="text" data-tag="tiny-picker-panel__link-btn" @click="handleClear" custom-class="text-left pl-0">
+        <tiny-button
+          size="mini"
+          type="text"
+          data-tag="tiny-picker-panel__link-btn"
+          @click="handleClear"
+          custom-class="text-left pl-0"
+        >
           {{ t('ui.datepicker.clear') }}
         </tiny-button>
         <tiny-button
@@ -269,7 +270,7 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/date-range/vue'
-import { props, setup, directive } from '@opentiny/vue-common'
+import { props, setup, directive, defineComponent } from '@opentiny/vue-common'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
 import TimePicker from '@opentiny/vue-time'
 import DateTable from '@opentiny/vue-date-table'
@@ -278,7 +279,7 @@ import Button from '@opentiny/vue-button'
 import { IconDoubleRight, IconDoubleLeft, IconChevronLeft, IconChevronRight } from '@opentiny/vue-icon'
 import { classes } from './token'
 
-export default {
+export default defineComponent({
   directives: directive({ Clickoutside }),
   components: {
     TimePicker,
@@ -295,5 +296,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api, classes })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/date-table/package.json b/packages/vue/src/date-table/package.json
index 4aeec4994..d17e39162 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/date-table/src/index.ts b/packages/vue/src/date-table/src/index.ts
index 2efa7d540..b46eac45b 100644
--- a/packages/vue/src/date-table/src/index.ts
+++ b/packages/vue/src/date-table/src/index.ts
@@ -1,8 +1,8 @@
-import { $prefix, $props, $setup } from '@opentiny/vue-common'
+import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 import { isDate } from '@opentiny/vue-renderless/common/deps/date-util'
 
-export default {
+export default defineComponent({
   name: $prefix + 'DateTable',
   componentName: 'DateTable',
   props: {
@@ -38,4 +38,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/date-table/src/mobile-first.vue b/packages/vue/src/date-table/src/mobile-first.vue
index 3f3bd7dcc..ea1bca631 100644
--- a/packages/vue/src/date-table/src/mobile-first.vue
+++ b/packages/vue/src/date-table/src/mobile-first.vue
@@ -12,24 +12,24 @@
         <th v-if="showWeekNumber">
           <div :class="gcls('th')">{{ t('ui.datepicker.week') }}</div>
         </th>
-        <th v-for="(week, key) in state.weeks" :key="key">
+        <th v-for="(week, weekIdx) in state.weeks" :key="weekIdx">
           <div :class="gcls('th')">{{ t('ui.datepicker.weeks.' + week) }}</div>
         </th>
       </tr>
       <tr
         data-tag="tiny-date-table__row"
-        v-for="(row, key) in state.rows"
-        :key="key"
+        v-for="(row, trIdx) in state.rows"
+        :key="trIdx"
         :class="{ current: isWeekActive(row[1]) }"
       >
-        <td v-for="(cell, key) in row" :key="key" :data-tag="getCellClasses(cell)" :class="gcls('td')">
+        <td v-for="(cell, tdIdx) in row" :key="tdIdx" :data-tag="getCellClasses(cell)" :class="gcls('td')">
           <div
             :class="
               m(
                 gcls('cell'),
                 gcls(getCssToken(cell, 'cell-')),
-                { 'rounded-l': key === 0 },
-                { 'rounded-r': key === 6 }
+                { 'rounded-l': tdIdx === 0 },
+                { 'rounded-r': tdIdx === 6 }
               )
             "
           >
@@ -43,10 +43,10 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/date-table/vue'
-import { props, setup } from '@opentiny/vue-common'
+import { props, setup, defineComponent } from '@opentiny/vue-common'
 import { classes } from './token'
 
-export default {
+export default defineComponent({
   props: [
     ...props,
     'cellClassName',
@@ -65,5 +65,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api, classes })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/dept/package.json b/packages/vue/src/dept/package.json
index 6a757dfa4..460ba8b8d 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,10 +22,9 @@
     "@opentiny/vue-option": "workspace:~",
     "@opentiny/vue-row": "workspace:~",
     "@opentiny/vue-col": "workspace:~",
-    "@opentiny/vue-modal": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-dialog-box": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/dept/src/pc.vue b/packages/vue/src/dept/src/pc.vue
index d45df471a..e890e23c7 100644
--- a/packages/vue/src/dept/src/pc.vue
+++ b/packages/vue/src/dept/src/pc.vue
@@ -38,6 +38,7 @@
             remote
             :remote-method="searchMethod"
             @change="searchChange"
+            @clear="searchMethod('')"
           >
             <li
               class="tiny-option tiny-select-dropdown__item"
@@ -134,7 +135,7 @@ export default defineComponent({
     TinyCol: Col,
     IconPopup: IconPopup()
   },
-  emits: ['open', 'selected', 'cancel', 'change', 'update:modelValue', 'confirm'],
+  emits: ['open', 'selected', 'cancel', 'change', 'update:modelValue', 'confirm', 'close'],
   props: [
     ...props,
     'size',
diff --git a/packages/vue/src/detail-page/index.ts b/packages/vue/src/detail-page/index.ts
deleted file mode 100644
index c2f425c42..000000000
--- a/packages/vue/src/detail-page/index.ts
+++ /dev/null
@@ -1,35 +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 DetailPage from './src/index'
-import '@opentiny/vue-theme/detail-page/index.less'
-import { version } from './package.json'
-
-DetailPage.model = {
-  prop: 'modelValue',
-  event: 'update:modelValue'
-}
-
-/* istanbul ignore next */
-DetailPage.install = function (Vue) {
-  Vue.component(DetailPage.name, DetailPage)
-}
-
-DetailPage.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    DetailPage.install(window.Vue)
-  }
-}
-
-export default DetailPage
diff --git a/packages/vue/src/detail-page/package.json b/packages/vue/src/detail-page/package.json
deleted file mode 100644
index f98c47049..000000000
--- a/packages/vue/src/detail-page/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "@opentiny/vue-detail-page",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-checkbox": "workspace:~",
-    "@opentiny/vue-button": "workspace:~",
-    "@opentiny/vue-modal": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
-  },
-  "license": "MIT"
-}
diff --git a/packages/vue/src/detail-page/src/index.ts b/packages/vue/src/detail-page/src/index.ts
deleted file mode 100644
index ee38eac2a..000000000
--- a/packages/vue/src/detail-page/src/index.ts
+++ /dev/null
@@ -1,70 +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 { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
-import template from 'virtual-template?pc'
-
-const $constants = {
-  LOCAL_TIPS: 'ui.detailpage.localTips',
-  LOCAL_TITLE: 'ui.detailpage.localTitle',
-  VALUE_TITLE: 'ui.detailpage.valueTitle',
-  LABEL_TITLE: 'ui.detailpage.labelTitle',
-  DIALOG_TITLE: 'ui.detailpage.dialogTitle',
-  SAVE_BUTTON_TEXT: 'ui.detailpage.saveButtonText',
-  CANCEL_BUTTTON_TEXT: 'ui.detailpage.cancelButtonText'
-}
-
-export default defineComponent({
-  name: $prefix + 'DetailPage',
-  props: {
-    ...$props,
-    _constants: {
-      type: Object,
-      default: () => $constants
-    },
-    modelValue: Array,
-    title: {
-      type: String,
-      default: ''
-    },
-    textSplit: {
-      type: String,
-      default: '---'
-    },
-    dialogTitle: {
-      type: String,
-      default: ''
-    },
-    labelTitle: {
-      type: String,
-      default: ''
-    },
-    tips: {
-      type: String,
-      default: ''
-    },
-    valueTitle: {
-      type: String,
-      default: ''
-    },
-    saveButton: {
-      type: String,
-      default: ''
-    },
-    cancelButton: {
-      type: String,
-      default: ''
-    }
-  },
-  setup(props, context) {
-    return $setup({ props, context, template })
-  }
-})
diff --git a/packages/vue/src/detail-page/src/pc.vue b/packages/vue/src/detail-page/src/pc.vue
deleted file mode 100644
index c577fc7d2..000000000
--- a/packages/vue/src/detail-page/src/pc.vue
+++ /dev/null
@@ -1,107 +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.
- *
- -->
-<template>
-  <div class="tiny-detail-page">
-    <div class="tiny-detail-page__header">
-      <span>{{ state.title }}</span>
-      <div class="tiny-detail-page__header-icon" @click="showDialog">
-        <IconSetting class="setIconStyle" />
-      </div>
-    </div>
-    <ul class="tiny-detail-page__content">
-      <li
-        class="tiny-detail-page__content-item"
-        v-for="(item, index) in state.value"
-        :key="index"
-        v-show="!item.hidden"
-      >
-        <span class="tiny-detail-page__content-item-span">{{ item.label }}{{ state.textSplit }}</span
-        >{{ item.value }}
-      </li>
-    </ul>
-    <tiny-modal
-      v-model="state.isShowDialog"
-      class="tiny-detail-dialog__wrapper"
-      :lock-scroll="false"
-      :title="state.dialogTitle"
-    >
-      <div class="tiny-detail-dialog">
-        <div class="tiny-detail-dialog__header">
-          <span>{{ state.labelTitle }}</span>
-          <div class="tiny-detail-dialog__header-check">
-            <tiny-checkbox v-model="state.checkAll" @change="checkAllHander" :indeterminate="state.indeterminate">{{
-              state.valueTitle
-            }}</tiny-checkbox>
-          </div>
-        </div>
-        <ul class="tiny-detail-dialog__content">
-          <li
-            v-for="(item, index) in state.cloneValue"
-            :key="index"
-            :class="['tiny-detail-dialog__content-item', { active: item.hidden }]"
-          >
-            <span>{{ item.label }}</span>
-            <tiny-checkbox
-              v-model="item.hidden"
-              @click.prevent="checkValueHiddenItem(index)"
-              style="margin-right: 113px"
-            ></tiny-checkbox>
-          </li>
-        </ul>
-        <div class="tiny-detail-dialog__footer">
-          <tiny-button type="primary" @click="saveHandler">{{ state.saveButton }}</tiny-button>
-          <tiny-button @click="closeDialog">{{ state.cancelButton }}</tiny-button>
-        </div>
-      </div>
-    </tiny-modal>
-  </div>
-</template>
-
-<script lang="ts">
-import Button from '@opentiny/vue-button'
-import { iconSetting } from '@opentiny/vue-icon'
-import Checkbox from '@opentiny/vue-checkbox'
-import Modal from '@opentiny/vue-modal'
-import { renderless, api } from '@opentiny/vue-renderless/detail-page/vue'
-import { props, setup, defineComponent } from '@opentiny/vue-common'
-
-export default defineComponent({
-  components: {
-    IconSetting: iconSetting(),
-    TinyButton: Button,
-    TinyModal: Modal,
-    TinyCheckbox: Checkbox
-  },
-  props: [
-    ...props,
-    'modelValue',
-    'valueTitle',
-    'title',
-    'textSplit',
-    'dialogTitle',
-    'labelTitle',
-    'tips',
-    'saveButton',
-    'cancelButton'
-  ],
-  emits: ['saveWarning'],
-  setup(props, context) {
-    return setup({
-      props,
-      context,
-      renderless,
-      api,
-      extendOptions: { alert: Modal.alert }
-    })
-  }
-})
-</script>
diff --git a/packages/vue/src/dialog-box/package.json b/packages/vue/src/dialog-box/package.json
index 638aa2bf6..3e7c8d247 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/dialog-select/package.json b/packages/vue/src/dialog-select/package.json
index a08ae6e39..31de53fc8 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/dialog-select/src/index.ts b/packages/vue/src/dialog-select/src/index.ts
index 001d6527a..b74fd57cc 100644
--- a/packages/vue/src/dialog-select/src/index.ts
+++ b/packages/vue/src/dialog-select/src/index.ts
@@ -1,11 +1,11 @@
-import { $props, $setup, $prefix } from '@opentiny/vue-common'
+import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common'
 import PCTemplate from './pc.vue'
 
 const template = () => {
   return PCTemplate
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'DialogSelect',
   props: {
     ...$props,
@@ -78,4 +78,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/divider/package.json b/packages/vue/src/divider/package.json
index 469bb870a..5c55736a1 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -16,4 +16,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/drawer/package.json b/packages/vue/src/drawer/package.json
index 70fb0ec08..dfc0a09cb 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,4 +19,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/drawer/src/index.ts b/packages/vue/src/drawer/src/index.ts
index d48569898..4295c9368 100644
--- a/packages/vue/src/drawer/src/index.ts
+++ b/packages/vue/src/drawer/src/index.ts
@@ -1,4 +1,4 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
 const $constants = {
@@ -67,10 +67,10 @@ export const drawerProps = {
   tipsProps: Object
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'Drawer',
   props: drawerProps,
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/drawer/src/mobile-first.vue b/packages/vue/src/drawer/src/mobile-first.vue
index 263ae1f85..b68ecd84d 100644
--- a/packages/vue/src/drawer/src/mobile-first.vue
+++ b/packages/vue/src/drawer/src/mobile-first.vue
@@ -79,11 +79,11 @@
 
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/drawer/vue'
-import { setup, props } from '@opentiny/vue-common'
+import { setup, props, defineComponent } from '@opentiny/vue-common'
 import { IconClose } from '@opentiny/vue-icon'
 import Button from '@opentiny/vue-button'
 
-export default {
+export default defineComponent({
   components: {
     TinyButton: Button,
     IconClose: IconClose()
@@ -107,5 +107,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/drawer/src/pc.vue b/packages/vue/src/drawer/src/pc.vue
index 0dcd503e0..3cc3d0f33 100644
--- a/packages/vue/src/drawer/src/pc.vue
+++ b/packages/vue/src/drawer/src/pc.vue
@@ -98,13 +98,13 @@
 
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/drawer/vue'
-import { setup, props } from '@opentiny/vue-common'
+import { setup, props, defineComponent } from '@opentiny/vue-common'
 import '@opentiny/vue-theme/drawer/index.less'
 import { iconClose, iconHelpCircle } from '@opentiny/vue-icon'
 import Button from '@opentiny/vue-button'
 import Tooltip from '@opentiny/vue-tooltip'
 
-export default {
+export default defineComponent({
   components: {
     TinyButton: Button,
     TinyTooltip: Tooltip,
@@ -133,5 +133,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/drop-roles/package.json b/packages/vue/src/drop-roles/package.json
index def515021..aca6591c4 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/drop-times/package.json b/packages/vue/src/drop-times/package.json
index 57e2b1569..c6a4ed732 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/dropdown-item/package.json b/packages/vue/src/dropdown-item/package.json
index d9106b08e..6720abaa3 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -25,4 +25,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/dropdown-item/src/index.ts b/packages/vue/src/dropdown-item/src/index.ts
index cf66123f6..5fc593a64 100644
--- a/packages/vue/src/dropdown-item/src/index.ts
+++ b/packages/vue/src/dropdown-item/src/index.ts
@@ -64,6 +64,10 @@ export const dropdownItemProps = {
     type: Number,
     default: () => -1
   },
+  tooltipContent: {
+    type: String,
+    default: ''
+  },
   // 以下为 tiny 新增
   appendToBody: {
     type: Boolean,
diff --git a/packages/vue/src/dropdown-item/src/mobile-first.vue b/packages/vue/src/dropdown-item/src/mobile-first.vue
index adc8b924e..af8fb74ff 100644
--- a/packages/vue/src/dropdown-item/src/mobile-first.vue
+++ b/packages/vue/src/dropdown-item/src/mobile-first.vue
@@ -41,7 +41,7 @@ import { renderless, api } from '@opentiny/vue-renderless/dropdown-item/mf'
 
 export default defineComponent({
   emits: ['update:modelValue', 'change', 'closed', 'open', 'opened', 'close', 'confirm', 'reset'],
-  props: [...props, 'disabled', 'icon', 'itemData', 'selected', 'label', 'level', 'currentIndex'],
+  props: [...props, 'disabled', 'icon', 'itemData', 'selected', 'label', 'level', 'currentIndex', 'tooltipContent'],
   setup(props, context): any {
     return setup({ props, context, renderless, api })
   }
diff --git a/packages/vue/src/dropdown-menu/package.json b/packages/vue/src/dropdown-menu/package.json
index 1574c1ebf..64205bcaa 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/dropdown/package.json b/packages/vue/src/dropdown/package.json
index b5f60d5a5..6dbde8223 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-dropdown-menu": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/dynamic-scroller-item/package.json b/packages/vue/src/dynamic-scroller-item/package.json
index c420545ee..db479bccb 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,4 +15,4 @@
     "@opentiny/vue-renderless": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/dynamic-scroller/package.json b/packages/vue/src/dynamic-scroller/package.json
index 3176e16d9..1033cca18 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -16,4 +16,4 @@
     "@opentiny/vue-recycle-scroller": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/espace/package.json b/packages/vue/src/espace/package.json
index d9cb52fd9..efaad7e95 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/exception/package.json b/packages/vue/src/exception/package.json
index d635c3aa3..71b310bcc 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/exception/src/index.ts b/packages/vue/src/exception/src/index.ts
index 9c534ef91..83e3e4803 100644
--- a/packages/vue/src/exception/src/index.ts
+++ b/packages/vue/src/exception/src/index.ts
@@ -1,7 +1,7 @@
-import { $setup, $prefix, $props } from '@opentiny/vue-common'
+import { $setup, $prefix, $props, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?mobile|mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'Exception',
 
   props: {
@@ -26,4 +26,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/fall-menu/package.json b/packages/vue/src/fall-menu/package.json
index 9eacd2cf7..bc22d729b 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/file-upload/package.json b/packages/vue/src/file-upload/package.json
index 6329aad32..011711b4c 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -34,4 +34,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/filter-bar/package.json b/packages/vue/src/filter-bar/package.json
index 489f8cf37..67a2dff9e 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/filter-box/package.json b/packages/vue/src/filter-box/package.json
index 55b864bc3..46ce89009 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,4 +18,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/filter-panel/package.json b/packages/vue/src/filter-panel/package.json
index a23539c4f..79f8a5ca7 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,4 +18,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/filter/package.json b/packages/vue/src/filter/package.json
index 8d31d618a..e09d58f20 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/float-button/package.json b/packages/vue/src/float-button/package.json
index 89d3bd5c0..e6424d48f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/floatbar/package.json b/packages/vue/src/floatbar/package.json
index 054c4bf25..f9d71e4ea 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/floating-button/package.json b/packages/vue/src/floating-button/package.json
index f6e019855..df3fce784 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "module": "index.ts",
   "sideEffects": false,
@@ -20,4 +20,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/floating-button/src/index.ts b/packages/vue/src/floating-button/src/index.ts
index 229452346..0d3165026 100644
--- a/packages/vue/src/floating-button/src/index.ts
+++ b/packages/vue/src/floating-button/src/index.ts
@@ -1,4 +1,4 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?mobile-first'
 
 export const floatingButtonProps = {
@@ -45,10 +45,10 @@ export const floatingButtonProps = {
   }
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'FloatingButton',
   props: floatingButtonProps,
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/flowchart/package.json b/packages/vue/src/flowchart/package.json
index e0946188f..2c670bd8c 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -11,8 +11,7 @@
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-popover": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-theme-mobile": "workspace:~"
+    "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT",
   "devDependencies": {
@@ -23,4 +22,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/form-item/package.json b/packages/vue/src/form-item/package.json
index 649f8dc68..71bbce4b8 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/form-item/src/mobile-first.vue b/packages/vue/src/form-item/src/mobile-first.vue
index 5653baaf6..41453705f 100644
--- a/packages/vue/src/form-item/src/mobile-first.vue
+++ b/packages/vue/src/form-item/src/mobile-first.vue
@@ -8,7 +8,7 @@
         state.formInline ? 'align-sub' : '',
         state.labelPosition === 'top' ? 'block mb-4' : '',
         state.validateState === 'error'
-          ? '[&_input]:border-color-error [&_textarea]:border-color-error [&_input:focus]:border-color-error [&_input:hover]:border-color-error [&_textarea:focus]:border-color-error [&_textarea:hover]:border-color-error'
+          ? '[&_.tiny-range-editor]:border-color-error [&_[data-tag~=tiny-range-editor]]:border-color-error [&_[data-tag=tiny-numeric-main]]:border-color-error [&_input]:border-color-error [&_textarea]:border-color-error [&_input:focus]:border-color-error [&_input:hover]:border-color-error [&_textarea:focus]:border-color-error [&_textarea:hover]:border-color-error'
           : '',
         state.labelPosition === 'top' && !state.hideRequiredAsterisk ? 'pl-0' : '',
         !slots.label && !label ? 'border-none' : '',
@@ -27,11 +27,12 @@
         :class="
           m(
             'py-3 sm:py-1.5 sm:min-h-[theme(spacing.7)] relative align-bottom float-left text-sm pr-3 sm:pr-4 box-border leading-5',
-            'overflow-hidden text-ellipsis text-left sm:text-right',
+            'overflow-hidden text-ellipsis',
             state.labelPosition === 'top'
               ? 'float-none inline-block text-left sm:text-left leading-none px-0 pt-0 pb-1.5 h-auto min-h-0 sm:py-0 sm:pb-0.5 sm:min-h-[theme(spacing.0)]'
               : 'min-h-[theme(spacing.9)]',
-            state.labelPosition === 'left' ? 'text-left' : '',
+            state.labelPosition === 'right' ? 'text-right sm:text-right' : '',
+            state.labelPosition === 'left' ? 'text-left sm:text-left' : '',
             state.formInline && state.labelPosition === 'top' ? 'block' : '',
             state.isDisplayOnly ? 'leading-none h-auto align-[inherit] pr-4' : '',
             tipContent ? 'pr-5 sm:pr-7' : '',
diff --git a/packages/vue/src/form/package.json b/packages/vue/src/form/package.json
index 80cee1d32..18bd57099 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/fullscreen/package.json b/packages/vue/src/fullscreen/package.json
index d081a1109..a845fcbcf 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/grid-column/package.json b/packages/vue/src/grid-column/package.json
index 3b6c16218..d11244189 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,4 +18,4 @@
     "@opentiny/vue-grid": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/grid-manager/package.json b/packages/vue/src/grid-manager/package.json
index 54f90c59d..7a82a5a6f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,4 +18,4 @@
     "@opentiny/vue-grid": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/grid-toolbar/package.json b/packages/vue/src/grid-toolbar/package.json
index ae8fa444f..127517015 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -44,4 +44,4 @@
     "@opentiny/vue-popover": "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 893c0fc44..2c10333e0 100644
--- a/packages/vue/src/grid-toolbar/src/custom-saas.vue
+++ b/packages/vue/src/grid-toolbar/src/custom-saas.vue
@@ -286,7 +286,7 @@ import CustomSwitch from './custom-switch.vue'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { isNull } from '@opentiny/vue-renderless/grid/static'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
-import { $props, isVue2, directive, useDefer, h } from '@opentiny/vue-common'
+import { $props, isVue2, directive, useDefer, h, defineComponent } from '@opentiny/vue-common'
 import { GridConfig } from '@opentiny/vue-grid'
 import { mergeArray } from './multiple-history'
 import '@opentiny/vue-theme/grid-toolbar/index.less'
@@ -306,7 +306,7 @@ const TitleRender = {
   }
 }
 
-export default {
+export default defineComponent({
   components: {
     TinyModal: Modal,
     TinyButton: Button,
@@ -1031,5 +1031,5 @@ export default {
       this.columns.forEach((col) => (col.numberSortVisible = false))
     }
   }
-}
+})
 </script>
diff --git a/packages/vue/src/grid-toolbar/src/custom-switch.vue b/packages/vue/src/grid-toolbar/src/custom-switch.vue
index 1f5288e85..9fdba2905 100644
--- a/packages/vue/src/grid-toolbar/src/custom-switch.vue
+++ b/packages/vue/src/grid-toolbar/src/custom-switch.vue
@@ -235,9 +235,7 @@ import { t } from '@opentiny/vue-locale'
 import { GridTools } from '@opentiny/vue-grid'
 import { find } from '@opentiny/vue-renderless/grid/static'
 import { createCustom, getStorage, setStorage, mergeArray } from './multiple-history'
-import { $props } from '@opentiny/vue-common'
-
-import { defineComponent } from '@opentiny/vue-common'
+import { $props, defineComponent } from '@opentiny/vue-common'
 
 export default defineComponent({
   name: 'TinyGridCustomSwitch',
@@ -258,6 +256,7 @@ export default defineComponent({
       default: null
     }
   },
+  emits: ['init-storage'],
   props: {
     ...$props,
     customMode: String,
diff --git a/packages/vue/src/grid/package.json b/packages/vue/src/grid/package.json
index 8471591a2..117258b49 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -26,11 +26,9 @@
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-button": "workspace:~",
-    "@opentiny/vue-popover": "workspace:~",
     "@opentiny/vue-tag": "workspace:~",
     "@opentiny/vue-loading": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx
index d9ea39644..a9f954f70 100644
--- a/packages/vue/src/grid/src/body/src/body.tsx
+++ b/packages/vue/src/grid/src/body/src/body.tsx
@@ -36,7 +36,7 @@ import {
 import { getCellLabel } from '../../tools'
 import GlobalConfig from '../../config'
 import { iconChevronRight, iconChevronDown } from '@opentiny/vue-icon'
-import { h, hooks, $prefix } from '@opentiny/vue-common'
+import { h, hooks, $prefix, defineComponent } from '@opentiny/vue-common'
 import { getTreeChildrenKey, getTreeShowKey } from '../../table/src/strategy'
 import { generateFixedClassName } from '../../table/src/utils/handleFixedColumn'
 
@@ -520,12 +520,9 @@ function renderRow(args) {
   let { $rowIndex, $seq, $table, _vm, editStore } = args
   let { groupFolds, h, row, rowActived } = args
   let { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows } = args
-  let { selection, seq, tableColumn, trOn, treeConfig } = args
-  let { scrollYLoad } = $table
-  let treeShowKey = getTreeShowKey({ scrollYLoad, treeConfig })
-  let { hideMethod } = treeConfig || {}
+  let { selection, seq, tableColumn, trOn, treeConfig, isNotRenderRow } = args
 
-  if ((treeShowKey && !row[treeShowKey]) || (hideMethod && hideMethod(row, rowLevel))) {
+  if (isNotRenderRow) {
     return
   }
 
@@ -645,6 +642,7 @@ function renderRowTree(args, renderRows) {
     h,
     _vm,
     $table,
+    // $seq 树表特有序号：1 --> 1.1
     $seq: $seq ? `${$seq}.${seq}` : `${seq}`,
     rowLevel: rowLevel + 1,
     tableData: rowChildren,
@@ -665,6 +663,8 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, se
   // 子级索引是否按数字递增显示：true(子级索引按数字递增显示，父级1，子级2)；false(子级索引在父级索引基础上增加，父级1，子级1.1)
   let isOrdered = treeConfig ? Boolean(treeConfig.ordered) : false
   seqCount = seqCount || { value: 0 }
+  let treeShowKey = getTreeShowKey({ scrollYLoad, treeConfig })
+  let { hideMethod } = treeConfig || {}
 
   // 循环表格数据，生成表格主体内容VNode，此处也是性能优化的整改点
   tableData.forEach((row, $rowIndex) => {
@@ -672,8 +672,13 @@ 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))
+
+    // 树表虚拟滚动，如果当前行被剪切不需要渲染，则无需自增序号
+    if (!isNotRenderRow) {
+      seqCount.value = seqCount.value + 1
+    }
 
-    seqCount.value = seqCount.value + 1
     let seq = isOrdered ? seqCount.value : rowIndex + 1
     if (scrollYLoad) {
       seq += startIndex
@@ -687,7 +692,8 @@ function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, se
     renderRowGroupData({ groupData, groupFolds, row, rowGroup, rowid, rows, tableColumn })
     let args = { $rowIndex, $seq, $table, _vm, editStore, groupFolds, h, row, rowActived }
     Object.assign(args, { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows, selection, seq })
-    Object.assign(args, { tableColumn, trOn, treeConfig })
+
+    Object.assign(args, { tableColumn, trOn, treeConfig, isNotRenderRow })
 
     // 输出表格行列的vnode节点列表
     renderRow(args)
@@ -813,7 +819,7 @@ function renderYSpace({ scrollLoad }) {
   ])
 }
 
-export default {
+export default defineComponent({
   name: `${$prefix}GridBody`,
   props: {
     collectColumn: Array,
@@ -848,6 +854,10 @@ export default {
     $el.onscroll = this.scrollEvent
     $el._onscroll = this.scrollEvent
   },
+  updated() {
+    const { $parent: $table, fixedType } = this
+    !fixedType && $table.updateTableBodyHeight()
+  },
   setup(props, { slots }) {
     hooks.onBeforeUnmount(() => {
       const table = hooks.getCurrentInstance().proxy
@@ -925,4 +935,4 @@ export default {
       emitEvent($table, 'scroll', [{ type: 'body', scrollTop, scrollLeft, isX, isY, $table }, event])
     }
   }
-}
+})
diff --git a/packages/vue/src/grid/src/button/src/button.ts b/packages/vue/src/grid/src/button/src/button.ts
index ec0ca073b..d42809c74 100644
--- a/packages/vue/src/grid/src/button/src/button.ts
+++ b/packages/vue/src/grid/src/button/src/button.ts
@@ -26,7 +26,7 @@ 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 } from '@opentiny/vue-common'
+import { h, $prefix, defineComponent } from '@opentiny/vue-common'
 
 function renderNoSlotDropdowns({ $slots, _vm, buttonBase, loading, tableListeners }) {
   let loadingVNode = []
@@ -113,7 +113,7 @@ function getButtonBase({ disabled, isText, loading, name, type, vSize }) {
   }
 }
 
-export default {
+export default defineComponent({
   name: `${$prefix}GridButton`,
   inheritAttrs: false,
   props: {
@@ -192,4 +192,4 @@ export default {
 
     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 5d6e77cc6..9c275a70b 100644
--- a/packages/vue/src/grid/src/cell/src/cell.ts
+++ b/packages/vue/src/grid/src/cell/src/cell.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  *
  */
-import { get } from '@opentiny/vue-renderless/grid/static/'
+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'
@@ -264,7 +264,7 @@ export const Cell = {
     let { slots, own, title } = column
 
     if (slots && slots.header) {
-      return slots.header(params, h)
+      return [h('div', { class: 'tiny-grid-cell-text' }, [slots.header(params, h)])]
     }
 
     if (typeof title === 'function') {
@@ -379,11 +379,12 @@ export const Cell = {
     return Cell.renderTreeIcon(h, params).concat(Cell.renderIndexCell(h, params))
   },
   renderIndexCell(h, params) {
-    let { $seq, level, seq } = params
-    let { startIndex, treeConfig = {} } = params.$table
-    let { indexMethod, slots } = params.column
-    let isOrdered = !!treeConfig.ordered
-    let indexValue = level && !isOrdered ? `${$seq}.${seq}` : startIndex + seq
+    const { $seq, level, seq } = params
+    // startIndex：序号列的起始值
+    const { startIndex, treeConfig = {} } = params.$table
+    const { indexMethod, slots } = params.column
+    const isOrdered = !!treeConfig.ordered
+    const indexValue = level && !isOrdered ? `${$seq}.${seq}` : startIndex + seq
 
     if (slots && slots.default) {
       return slots.default(params, h)
@@ -893,17 +894,22 @@ export const Cell = {
 
     const renderBase = (buttonConfig, flag, classes, attrs) => {
       const mergeParams = { buttonConfig, ...params }
-      const on = isDisabled(buttonConfig) ? {} : { click: (e) => buttonConfig.click(e, mergeParams) }
+      const on = {
+        click: (e) => {
+          if (!isDisabled(buttonConfig) && isFunction(buttonConfig.click)) {
+            buttonConfig.click(e, mergeParams)
+          }
+        }
+      }
 
       classes = classes.join('\u{20}')
 
       const clazz = isDisabled(buttonConfig)
         ? [classes, 'tiny-grid__oper-col-button--disabled', disabledClass]
         : classes
-      const childNodes =
-        typeof buttonConfig.icon === 'function'
-          ? [runRender(buttonConfig.icon, h, mergeParams)]
-          : [h(buttonConfig.icon)]
+      const childNodes = isFunction(buttonConfig.icon)
+        ? [runRender(buttonConfig.icon, h, mergeParams)]
+        : [h(buttonConfig.icon)]
 
       return flag ? h('span', { class: clazz, attrs, on }, childNodes) : null
     }
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 753e55127..8b41ba69d 100644
--- a/packages/vue/src/grid/src/fetch-data/src/methods.ts
+++ b/packages/vue/src/grid/src/fetch-data/src/methods.ts
@@ -18,6 +18,12 @@ export default {
   handleFetch(code, sortArg) {
     let { pager, sortData, filterData, pagerConfig, fetchOption, fetchData, dataset } = this as any
 
+    if (this.isInitialLoading) {
+      this.isInitialLoading = false
+    } else {
+      this.columnAnchor && this.clearActiveAnchor()
+    }
+
     if (code !== 'prefetch') {
       this.clearRadioRow()
       this.resetScrollTop()
@@ -71,6 +77,14 @@ export default {
       throw error
     })
   },
+  clearActiveAnchor() {
+    const { columnAnchor, columnAnchorParams = {} } = this
+    const { anchors = [] } = columnAnchorParams
+
+    if (!columnAnchor || anchors.length <= 0) return
+
+    anchors.forEach((anchor) => (anchor.active = false))
+  },
   loadFetchData(rest) {
     if (!rest) {
       this.tableData = []
diff --git a/packages/vue/src/grid/src/filter/src/methods.ts b/packages/vue/src/grid/src/filter/src/methods.ts
index 7230881b5..755af6059 100644
--- a/packages/vue/src/grid/src/filter/src/methods.ts
+++ b/packages/vue/src/grid/src/filter/src/methods.ts
@@ -100,6 +100,7 @@ const columnfilters = (visibleColumn) => {
         filters[property] = { type, value }
       }
 
+      // 修改了filter状态，不能放在服务端筛选分支内，否则本地筛选会缺失此状态
       filter.hasFilter =
         value.length || input || dateList?.some(Boolean) || input === 0 || empty !== null || type === 'custom'
     }
@@ -261,11 +262,15 @@ export default {
     // 服务端请求参数
     const filters = columnfilters(visibleColumn)
 
-    if (this.$grid.pagerConfig) {
-      this.$grid.pagerConfig.currentPage = 1
+    if (remoteFilter) {
+      // 2、修改currentPage为1 (在服务端筛选时把当前页设置为1，本地筛选不需要)
+      if (this.$grid.pagerConfig) {
+        this.$grid.pagerConfig.currentPage = 1
+      }
+      // 3、抛出filter-change事件（在服务端筛选时grid才会注册filter-change事件处理）
+      emitEvent(this, 'filter-change', [{ filters, $table: this }])
     }
 
-    emitEvent(this, 'filter-change', [{ filters, $table: this }])
     this.updateFooter()
 
     // 表头过滤动作应保持水平滚动条位置不变
diff --git a/packages/vue/src/grid/src/filter/src/panel.tsx b/packages/vue/src/grid/src/filter/src/panel.tsx
index ece9412f2..80ff20cdd 100644
--- a/packages/vue/src/grid/src/filter/src/panel.tsx
+++ b/packages/vue/src/grid/src/filter/src/panel.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable vue/no-mutating-props */
+/* eslint-disable vue/no-use-computed-property-like-method */
 /**
  * MIT License
  *
@@ -29,7 +31,7 @@ import PopperJS from '@opentiny/vue-renderless/common/deps/popper'
 import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { t } from '@opentiny/vue-locale'
-import { hooks, h, $prefix } from '@opentiny/vue-common'
+import { hooks, h, $prefix, defineComponent } from '@opentiny/vue-common'
 import { iconCheck, iconCheckedSur, iconHalfselect, iconSearch } from '@opentiny/vue-icon'
 import debounce from '@opentiny/vue-renderless/common/deps/debounce'
 
@@ -172,7 +174,7 @@ const renderEnumableOptions = ({ iconRender, _vm, filterStore, selectAll, search
   }
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'GridFilter',
   props: {
     filterStore: Object,
@@ -724,4 +726,4 @@ export default {
       instance.popperJS && instance.popperJS.destroy() && (instance.popperJS = null)
     })
   }
-}
+})
diff --git a/packages/vue/src/grid/src/footer/src/footer.ts b/packages/vue/src/grid/src/footer/src/footer.ts
index f168f5ed4..159abfd86 100644
--- a/packages/vue/src/grid/src/footer/src/footer.ts
+++ b/packages/vue/src/grid/src/footer/src/footer.ts
@@ -26,7 +26,7 @@
 import { isFunction } from '@opentiny/vue-renderless/grid/static/'
 import { getClass, emitEvent, formatText, updateCellTitle } from '@opentiny/vue-renderless/grid/utils'
 import { isNull } from '@opentiny/vue-renderless/common/type'
-import { h, $prefix } from '@opentiny/vue-common'
+import { h, $prefix, defineComponent } from '@opentiny/vue-common'
 
 const classMap = {
   fixedHidden: 'fixed__column',
@@ -124,8 +124,19 @@ const renderfoots = (opt) => {
         .map((column, $columnIndex) => {
           const arg1 = { $columnIndex, $rowIndex, $table, allAlign, allColumnOverflow, allFooterAlign }
           const arg2 = { column, footerData, footerSpanMethod, overflowX, tableListeners }
-          const { attrs, columnIndex, fixedHiddenColumn, footAlign, footerClassName, hasEllipsis, params, tfOns } =
-            buildParamFunc(Object.assign(arg1, arg2))
+          const {
+            attrs,
+            columnIndex,
+            fixedHiddenColumn,
+            footAlign,
+            footerClassName,
+            hasEllipsis,
+            params,
+            tfOns,
+            isShowEllipsis,
+            isShowTitle,
+            showTooltip
+          } = buildParamFunc(Object.assign(arg1, arg2))
           const { leftList, rightList } = columnStore
           return h(
             'td',
@@ -156,7 +167,15 @@ const renderfoots = (opt) => {
               h(
                 'div',
                 {
-                  class: ['tiny-grid-cell', { [classMap.cellSummary]: $table.summaryConfig }]
+                  class: [
+                    'tiny-grid-cell',
+                    {
+                      [classMap.cellSummary]: $table.summaryConfig,
+                      'tiny-grid-cell__title': isShowTitle,
+                      'tiny-grid-cell__tooltip': showTooltip || column.showTip,
+                      'tiny-grid-cell__ellipsis': isShowEllipsis
+                    }
+                  ]
                 },
                 // 如果不是表格形态，就只保留表格结构（到tiny-grid-cell），不渲染具体的内容
                 $table.isShapeTable ? formatText(list[$table.tableColumn.indexOf(column)], 1) : null
@@ -172,7 +191,7 @@ function renderTfoot(opt) {
   return h('tfoot', { ref: 'tfoot' }, opt.footerData.map(renderfoots(opt)))
 }
 
-export default {
+export default defineComponent({
   name: `${$prefix}GridFooter`,
   props: {
     fixedColumn: Array,
@@ -312,7 +331,19 @@ export default {
       // 处理行或者列的合并
       doFooterSpan({ attrs, footerData, footerSpanMethod, params })
 
-      return { attrs, columnIndex, fixedHiddenColumn, footAlign, footerClassName, hasEllipsis, params, tfOns }
+      return {
+        attrs,
+        columnIndex,
+        fixedHiddenColumn,
+        footAlign,
+        footerClassName,
+        hasEllipsis,
+        isShowEllipsis,
+        isShowTitle,
+        showTooltip,
+        params,
+        tfOns
+      }
     }
   }
-}
+})
diff --git a/packages/vue/src/grid/src/grid/grid.ts b/packages/vue/src/grid/src/grid/grid.ts
index f28bdb2a5..fc1d3ef10 100644
--- a/packages/vue/src/grid/src/grid/grid.ts
+++ b/packages/vue/src/grid/src/grid/grid.ts
@@ -151,7 +151,8 @@ export default defineComponent({
       columnAnchorParams: {},
       columnAnchorKey: '',
       tasks: {},
-      fullScreenClass: ''
+      fullScreenClass: '',
+      isInitialLoading: true // 是否首次加载数据
     }
   },
   computed: {
diff --git a/packages/vue/src/grid/src/header/src/header.ts b/packages/vue/src/grid/src/header/src/header.ts
index 4235ca19e..0bf68bec2 100644
--- a/packages/vue/src/grid/src/header/src/header.ts
+++ b/packages/vue/src/grid/src/header/src/header.ts
@@ -27,7 +27,7 @@ import { isObject, isNull } from '@opentiny/vue-renderless/common/type'
 import { removeClass, addClass } from '@opentiny/vue-renderless/common/deps/dom'
 import { isBoolean, isFunction } from '@opentiny/vue-renderless/grid/static/'
 import { updateCellTitle, getOffsetPos, emitEvent, getClass } from '@opentiny/vue-renderless/grid/utils'
-import { h, $prefix } from '@opentiny/vue-common'
+import { h, $prefix, defineComponent } from '@opentiny/vue-common'
 import { random } from '@opentiny/vue-renderless/common/string'
 
 function addListenerMousedown({ $table, mouseConfig, params, thOns }) {
@@ -163,8 +163,9 @@ function getThPropsArg(args) {
         [classMap.isEditable]: column.editor,
         [classMap.isFilter]: isObject(column.filter),
         [classMap.filterActive]: column.filter && column.filter.hasFilter,
-        'fixed-left-last__column': column.fixed === 'left' && leftList[leftList.length - 1] === column,
-        'fixed-right-first__column': column.fixed === 'right' && rightList[0] === column
+        'fixed-left-last__column':
+          column.fixed === 'left' && (leftList[leftList.length - 1] === column || column.isFixedLeftLast),
+        'fixed-right-first__column': column.fixed === 'right' && (rightList[0] === column || column.isFixedRightFirst)
       },
       getClass(headerClassName, params),
       getClass(headerCellClassName, params)
@@ -408,7 +409,7 @@ const documentOnmouseup = function ({
   emitEvent($table, 'resizable-change', [params])
 }
 
-export default {
+export default defineComponent({
   name: `${$prefix}GridHeader`,
   props: {
     collectColumn: Array,
@@ -516,4 +517,4 @@ export default {
       handleMousemoveEvent(event)
     }
   }
-}
+})
diff --git a/packages/vue/src/grid/src/menu/src/children.ts b/packages/vue/src/grid/src/menu/src/children.ts
index b22bb8034..8c376723a 100644
--- a/packages/vue/src/grid/src/menu/src/children.ts
+++ b/packages/vue/src/grid/src/menu/src/children.ts
@@ -23,9 +23,9 @@
  *
  */
 import { getFuncText, getDomNode } from '@opentiny/vue-renderless/grid/utils'
-import { h, $prefix } from '@opentiny/vue-common'
+import { h, $prefix, defineComponent } from '@opentiny/vue-common'
 
-export default {
+export default defineComponent({
   name: $prefix + 'GridContextMenuChild',
   props: {
     item: Object,
@@ -108,4 +108,4 @@ export default {
       }
     }
   }
-}
+})
diff --git a/packages/vue/src/grid/src/menu/src/panel.ts b/packages/vue/src/grid/src/menu/src/panel.ts
index 80c052492..27606ef69 100644
--- a/packages/vue/src/grid/src/menu/src/panel.ts
+++ b/packages/vue/src/grid/src/menu/src/panel.ts
@@ -23,7 +23,7 @@
  *
  */
 import { getFuncText } from '@opentiny/vue-renderless/grid/utils'
-import { h, $prefix } from '@opentiny/vue-common'
+import { h, $prefix, defineComponent } from '@opentiny/vue-common'
 import Children from './children'
 
 const onMenuItem = ({ tableInstance, item, getEventTargetNode, toKebab }) => ({
@@ -103,7 +103,7 @@ function getMenuItemCreator({ ctxMenuStore, getEventTargetNode, tableInstance, t
     )
 }
 
-export default {
+export default defineComponent({
   name: `${$prefix}GridContextMenu`,
   props: {
     ctxMenuStore: Object
@@ -134,4 +134,4 @@ export default {
       )
     )
   }
-}
+})
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 9d36a1742..4b73a68a6 100644
--- a/packages/vue/src/grid/src/mobile-first/column-content.vue
+++ b/packages/vue/src/grid/src/mobile-first/column-content.vue
@@ -14,7 +14,8 @@ export default defineComponent({
     const { cardConfig = {} } = config
     const props = {
       attrs: { 'data-tag': 'tiny-table-column-content' },
-      class: 'my-0.5 truncate space-y-2 sm:space-y-1 [&_[data-tag=tiny-input]]:leading-7'
+      class:
+        'my-0.5 truncate space-y-2 sm:space-y-1 [&_[data-tag=tiny-input]]:leading-7 [&_[data-tag=tiny-input-textarea]>span]:pt-0'
     }
     const ons = () => ({ mouseenter: this.handleMouseenter, mouseleave: this.handleMouseleave })
 
diff --git a/packages/vue/src/grid/src/pager/src/methods.ts b/packages/vue/src/grid/src/pager/src/methods.ts
index 763472d69..fd48d47fa 100644
--- a/packages/vue/src/grid/src/pager/src/methods.ts
+++ b/packages/vue/src/grid/src/pager/src/methods.ts
@@ -37,7 +37,7 @@ export default {
   renderPager({ $slots, _vm, loading, pager, pagerConfig, tableLoading, vSize }) {
     let res = null
 
-    const { isThemeSaas, isModeMobileFirst, isViewGantt, currentBreakpoint } = _vm
+    const { isThemeSaas, isModeMobileFirst, isViewGantt, currentBreakpoint, fetchData } = _vm
     const style = { display: 'none' }
 
     // 使用saas主题和多端模式时，内置Pager使用多端模板。在非gantt视图或gantt视图大屏下显示多端Pager
@@ -57,7 +57,7 @@ export default {
     if ($slots.pager) {
       res = $slots.pager()
     } else if (pager) {
-      pager.component = pager.component || (_vm.fetchData ? Pager : null)
+      pager.component = pager.component || (fetchData && fetchData.api ? Pager : null)
       res = h(hooks.toRaw(pager.component), {
         props: {
           size: vSize,
diff --git a/packages/vue/src/grid/src/table/src/methods.ts b/packages/vue/src/grid/src/table/src/methods.ts
index 9ca22e736..183e7efe2 100644
--- a/packages/vue/src/grid/src/table/src/methods.ts
+++ b/packages/vue/src/grid/src/table/src/methods.ts
@@ -26,6 +26,7 @@ import { getColumnList } 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'
+import { fastdom } from '@opentiny/vue-renderless/common/deps/fastdom'
 import {
   isNumber,
   filterTree,
@@ -979,7 +980,7 @@ const Methods = {
   autoCellWidth(headerEl, bodyEl, footerEl) {
     // 列宽最少限制 40px
     let minCellWidth = 40
-    let { fit, columnStore } = this
+    let { fit, columnStore, columnChart, isGroup } = this
     let tableHeight = bodyEl.offsetHeight
     let overflowY = bodyEl.scrollHeight > bodyEl.clientHeight
     let bodyW = bodyEl.clientWidth
@@ -992,7 +993,7 @@ const Methods = {
     let parentHeight = this.parentHeight
 
     // 经过calcTableWidth计算出了所有列的宽度，下一步设置所有冻结列sticky布局的left和right值
-    calcFixedStickyPosition({ headerEl, bodyEl, columnStore, scrollbarWidth })
+    calcFixedStickyPosition({ headerEl, bodyEl, columnStore, scrollbarWidth, columnChart, isGroup })
 
     Object.assign(this, { overflowY, parentHeight, scrollbarWidth, tableHeight, tableWidth })
     if (headerEl) {
@@ -1364,18 +1365,28 @@ const Methods = {
   setRowExpansion(rows, expanded) {
     let { expandeds } = this
     let { accordion } = this.expandConfig || {}
+
     // 是否是切换模式
     let isToggle = arguments.length === 1
+
+    // 手风琴模式是否关闭了所有展开行
+    let isAccordionCloseAll = false
+
     if (!rows) {
       return this.$nextTick().then(this.recalculate)
     }
     if (!isArray(rows)) {
       rows = [rows]
     }
-    // 只能同时展开一个
+    // 手风琴模式只能同时展开一个
     if (accordion) {
-      expandeds.length = 0
       rows = rows.slice(rows.length - 1, rows.length)
+
+      // 如果是手风琴模式，则需要判断是当前切换时关闭还是展开，解决手风琴模式无法关闭当前行的问题
+      if (rows.length && isToggle) {
+        isAccordionCloseAll = expandeds.includes(rows[0])
+      }
+      expandeds.length = 0
     }
 
     rows.forEach((row) => {
@@ -1387,7 +1398,7 @@ const Methods = {
         return
       }
       // 切换模式下此行未展开，或者非切换模式下展开已合起的行，就展开此行
-      if ((isToggle && !~index) || (!isToggle && expanded && !~index)) {
+      if ((isToggle && !isAccordionCloseAll && !~index) || (!isToggle && expanded && !~index)) {
         expandeds.push(row)
       }
     })
@@ -1707,21 +1718,17 @@ const Methods = {
     }
   },
   scrollTo(scrollLeft, scrollTop) {
-    let { $refs } = this
-    let { tableBody, tableFooter, rightBody } = $refs
-    let bodyElem = tableBody.$el
-    let footerElem = tableFooter ? tableFooter.$el : null
-    let rightBodyElem = rightBody ? rightBody.$el : null
+    const { elemStore } = this
+    const tableBodyElem = elemStore['main-body-wrapper']
+    const tableHeaderElem = elemStore['main-header-wrapper']
+    const tableFooterElem = elemStore['main-footer-wrapper']
     if (isNumber(scrollLeft)) {
-      if (footerElem) {
-        footerElem.scrollLeft = scrollLeft
-      } else {
-        bodyElem.scrollLeft = scrollLeft
-      }
+      tableBodyElem && (tableBodyElem.scrollLeft = scrollLeft)
+      tableFooterElem && (tableFooterElem.scrollLeft = scrollLeft)
+      tableHeaderElem && (tableHeaderElem.scrollLeft = scrollLeft)
     }
     if (isNumber(scrollTop)) {
-      rightBodyElem && (rightBodyElem.scrollTop = scrollTop)
-      bodyElem.scrollTop = scrollTop
+      tableBodyElem && (tableBodyElem.scrollTop = scrollTop)
     }
     return this.$nextTick()
   },
@@ -1752,7 +1759,9 @@ const Methods = {
   scrollToColumn(column, isDelay, move) {
     let hasColCache = this.fullColumnMap.has(column)
     column && hasColCache && colToVisible(this, column, move)
-    return isDelay && this.scrollYLoad
+
+    // 虚滚场景 DOM 元素会延时渲染，DOM 元素不存在时校验会显示异常
+    return isDelay && (this.scrollXLoad || this.scrollYLoad)
       ? new Promise((resolve) => setTimeout(() => resolve(this.$nextTick()), 50))
       : this.$nextTick()
   },
@@ -1760,16 +1769,16 @@ const Methods = {
     this.lastScrollTop = 0
   },
   clearScroll() {
-    let { $refs, scrollXStore, scrollYStore } = this
+    let { scrollXStore, scrollYStore, elemStore } = this
     Object.assign(this, { lastScrollLeft: 0 })
     Object.assign(scrollXStore, { startIndex: 0, visibleIndex: 0 })
     Object.assign(scrollYStore, { startIndex: 0, visibleIndex: 0 })
     this.$nextTick(() => {
-      let { tableBody, tableHeader, tableFooter } = $refs
-      let { tableBodyElem, tableHeaderElem, tableFooterElem } = {}
-      tableBodyElem = tableBody ? tableBody.$el : null
-      tableHeaderElem = tableHeader ? tableHeader.$el : null
-      tableFooterElem = tableFooter ? tableFooter.$el : null
+      // 从缓存中拿 DOM 元素
+      const tableBodyElem = elemStore['main-body-wrapper']
+      const tableHeaderElem = elemStore['main-header-wrapper']
+      const tableFooterElem = elemStore['main-footer-wrapper']
+
       if (this.afterMounted) {
         tableBodyElem && Object.assign(tableBodyElem, { scrollLeft: 0, scrollTop: 0 })
         tableFooterElem && Object.assign(tableFooterElem, { scrollLeft: 0 })
@@ -1950,10 +1959,12 @@ const Methods = {
   // 更新表体高度
   updateTableBodyHeight() {
     if (!this.tasks.updateTableBodyHeight) {
-      this.tasks.updateTableBodyHeight = debounce(10, () => {
-        const tableBody = this.$refs.tableBody
-        this.tableBodyHeight = tableBody ? tableBody.$el.clientHeight : 0
-      })
+      this.tasks.updateTableBodyHeight = () => {
+        fastdom.measure(() => {
+          const tableBodyElem = this.elemStore['main-body-wrapper']
+          this.tableBodyHeight = tableBodyElem ? tableBodyElem.clientHeight : 0
+        })
+      }
     }
 
     this.tasks.updateTableBodyHeight()
diff --git a/packages/vue/src/grid/src/table/src/strategy.ts b/packages/vue/src/grid/src/table/src/strategy.ts
index 0bc1e184b..0e5bd6e51 100644
--- a/packages/vue/src/grid/src/table/src/strategy.ts
+++ b/packages/vue/src/grid/src/table/src/strategy.ts
@@ -1,4 +1,5 @@
 import { getRowkey } from '@opentiny/vue-renderless/grid/utils'
+import { warn } from '../../tools'
 
 const TEMPORARY_CHILDREN = '_$children_'
 const TEMPORARY_SHOW = '_$show_'
@@ -249,6 +250,7 @@ const sliceColumnTree = (_vm) => {
   const { collectColumn } = _vm
   const columnChart = []
   const stack = []
+  const fixedMap = new WeakMap()
   let maxLevel = 1
 
   const buildColumnChart = (columns, columnChart, stack) => {
@@ -259,12 +261,33 @@ const sliceColumnTree = (_vm) => {
       column.rowSpan = 1
       column.colSpan = 1
 
+      if (stack.length === 0) {
+        fixedMap.set(column, column.fixed || '')
+      }
+
       if (Array.isArray(column.children) && column.children.length) {
         stack.push(column)
         buildColumnChart(column.children, columnChart, stack)
         stack.pop()
       } else {
-        columnChart.push([...stack, column])
+        const chartItem = [...stack, column]
+
+        columnChart.push(chartItem)
+
+        if (chartItem.length > 1) {
+          chartItem.slice(1).forEach(({ fixed }) => {
+            const rootColumn = chartItem[0]
+            const cachedFixed = fixedMap.get(rootColumn)
+
+            if (fixed) {
+              if (cachedFixed && cachedFixed !== fixed) {
+                warn('ui.grid.error.groupColumnFixedError')
+              } else if (!cachedFixed) {
+                fixedMap.set(rootColumn, fixed)
+              }
+            }
+          })
+        }
       }
     }
   }
@@ -294,9 +317,21 @@ const sliceColumnTree = (_vm) => {
     }
   }
 
+  // 如果多表头子树上存在一个冻结列，那么所有列都应该是此种冻结
+  const tryRepairFixedType = (chart) => {
+    chart.forEach((item) => {
+      const rootColumn = item[0]
+      item.forEach((col) => {
+        col.fixed = fixedMap.get(rootColumn)
+      })
+    })
+  }
+
   buildColumnChart(collectColumn, columnChart, stack)
   setColumnRowSpan(columnChart)
+  tryRepairFixedType(columnChart)
 
+  _vm.columnChart = columnChart
   return () => {
     const { tableColumn } = _vm
     const levelColumns = []
diff --git a/packages/vue/src/grid/src/table/src/table.ts b/packages/vue/src/grid/src/table/src/table.ts
index 75e20301b..ebe512c97 100644
--- a/packages/vue/src/grid/src/table/src/table.ts
+++ b/packages/vue/src/grid/src/table/src/table.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  *
  */
-import { h, hooks, $prefix, resolveTheme } from '@opentiny/vue-common'
+import { h, hooks, $prefix, resolveTheme, defineComponent } 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'
@@ -556,7 +556,25 @@ const getTableData = () => {
   return tableData
 }
 
-export default {
+const bindEvent = (ctx) => {
+  GlobalEvent.on(ctx, 'mousedown', ctx.handleGlobalMousedownEvent)
+  GlobalEvent.on(ctx, 'blur', ctx.handleGlobalBlurEvent)
+  GlobalEvent.on(ctx, 'mousewheel', ctx.handleGlobalMousewheelEvent)
+  GlobalEvent.on(ctx, 'keydown', ctx.handleGlobalKeydownEvent)
+  GlobalEvent.on(ctx, 'resize', ctx.handleGlobalResizeEvent)
+  GlobalEvent.on(ctx, 'contextmenu', ctx.handleGlobalContextmenuEvent)
+}
+
+const unbindEvent = (table) => {
+  GlobalEvent.off(table, 'mousedown')
+  GlobalEvent.off(table, 'blur')
+  GlobalEvent.off(table, 'mousewheel')
+  GlobalEvent.off(table, 'keydown')
+  GlobalEvent.off(table, 'resize')
+  GlobalEvent.off(table, 'contextmenu')
+}
+
+export default defineComponent({
   name: `${$prefix}GridTable`,
   props: {
     // 所有的列对齐方式
@@ -892,12 +910,7 @@ export default {
     // 处理拖拽的逻辑
     initDrop(this)
 
-    GlobalEvent.on(this, 'mousedown', this.handleGlobalMousedownEvent)
-    GlobalEvent.on(this, 'blur', this.handleGlobalBlurEvent)
-    GlobalEvent.on(this, 'mousewheel', this.handleGlobalMousewheelEvent)
-    GlobalEvent.on(this, 'keydown', this.handleGlobalKeydownEvent)
-    GlobalEvent.on(this, 'resize', this.handleGlobalResizeEvent)
-    GlobalEvent.on(this, 'contextmenu', this.handleGlobalContextmenuEvent)
+    bindEvent(this)
 
     // vue3下额外监控数组长度改变，解决push无响应等问题
     this.watchDataForVue3()
@@ -906,6 +919,12 @@ export default {
     this.$grid.connect({ name: 'table', vm: this })
   },
   mounted() {
+    // 复杂场景下，当表格刚开始挂载就被用户使用v-if销毁，会导致$refs全部被清空
+    if (this.$refs.tableWrapper) {
+      // 在body上挂载弹出框类的表格内部组件：右键菜单、筛选框、提示
+      document.body.appendChild(this.$refs.tableWrapper)
+    }
+
     this.$nextTick().then(() => {
       this.afterMounted = true
 
@@ -913,12 +932,6 @@ export default {
         // 使用ResizeObserver监听表格父元素尺寸，然后动态计算表格各种尺寸
         this.bindResize()
       }
-
-      // 复杂场景下，当表格刚开始挂载就被用户使用v-if销毁，会导致$refs全部被清空
-      if (this.$refs.tableWrapper) {
-        // 在body上挂载弹出框类的表格内部组件：右键菜单、筛选框、提示
-        document.body.appendChild(this.$refs.tableWrapper)
-      }
     })
 
     setTimeout(() => {
@@ -928,13 +941,15 @@ export default {
     })
   },
   activated() {
-    let { lastScrollLeft, lastScrollTop } = this
+    let { lastScrollLeft, lastScrollTop, scrollXLoad, scrollYLoad } = this
 
     if (lastScrollLeft || lastScrollTop) {
-      this.clearScroll()
-        .then(this.recalculate)
-        .then(() => this.scrollTo(lastScrollLeft, lastScrollTop))
+      this.scrollTo(lastScrollLeft, lastScrollTop)
+      scrollXLoad && this.triggerScrollXEvent()
+      scrollYLoad && this.triggerScrollYEvent({ target: { scrollTop: lastScrollTop } })
     }
+
+    bindEvent(this)
   },
   setup(props, context) {
     const { slots, attrs, listeners } = context
@@ -971,15 +986,14 @@ export default {
         }
       })
 
-      GlobalEvent.off(table, 'mousedown')
-      GlobalEvent.off(table, 'blur')
-      GlobalEvent.off(table, 'mousewheel')
-      GlobalEvent.off(table, 'keydown')
-      GlobalEvent.off(table, 'resize')
-      GlobalEvent.off(table, 'contextmenu')
+      unbindEvent(table)
       clearOnTableUnmount(table)
     })
 
+    hooks.onDeactivated(() => {
+      unbindEvent(table)
+    })
+
     const tableListeners = getListeners(attrs, listeners)
 
     return { slots, tableListeners, tinyTheme }
@@ -1055,4 +1069,4 @@ export default {
       return (this as any).$grid.viewCls(module)
     }
   }
-}
+})
diff --git a/packages/vue/src/grid/src/table/src/utils/autoCellWidth.ts b/packages/vue/src/grid/src/table/src/utils/autoCellWidth.ts
index 19bed0cf7..b76318639 100644
--- a/packages/vue/src/grid/src/table/src/utils/autoCellWidth.ts
+++ b/packages/vue/src/grid/src/table/src/utils/autoCellWidth.ts
@@ -145,9 +145,61 @@ const setLeftOrRightPosition = ({ columnList, direction, headerEl, bodyEl, scrol
   }, 0)
 }
 
-export const calcFixedStickyPosition = ({ headerEl, bodyEl, columnStore, scrollbarWidth }) => {
+// 设置分组父表头冻结列sticky布局的left和right值
+const setGroupHeaderPosition = ({ columnChart, direction }) => {
+  // 这里需要浅拷贝一份，避免改变原始数据的顺序
+  const colChart = columnChart.slice()
+
+  // 如果是右测冻结则需要反转数组后再进行循环
+  if (direction === 'right') {
+    colChart.reverse()
+  }
+
+  colChart.forEach((columns) => {
+    const len = columns.length
+    if (len === 1) {
+      return
+    }
+
+    const leafColumn = columns[len - 1]
+    const leafDirectionPos = leafColumn?.style?.[direction] ?? null
+
+    if (leafDirectionPos !== null) {
+      columns.forEach((column) => {
+        column.style = column.style || {}
+        const pos = column.style[direction] ?? null
+        if (pos === null) {
+          column.style[direction] = leafDirectionPos
+        }
+      })
+    }
+  })
+}
+
+// 设置分组父表头冻结列是否左侧最后一项，或者是否右侧第一项
+const setGroupHeaderLastOrFirst = ({ columnChart, leftList, rightList }) => {
+  columnChart.forEach((columns) => {
+    const len = columns.length
+    const leafColumn = columns[len - 1]
+
+    const isFixedLeftLast = leftList[leftList.length - 1] === leafColumn
+    const isFixedRightFirst = rightList[0] === leafColumn
+
+    columns.forEach((column) => {
+      column.isFixedLeftLast = column.isFixedLeftLast || isFixedLeftLast
+      column.isFixedRightFirst = column.isFixedRightFirst || isFixedRightFirst
+    })
+  })
+}
+
+export const calcFixedStickyPosition = ({ headerEl, bodyEl, columnStore, scrollbarWidth, columnChart, isGroup }) => {
   // 获取左侧和右侧冻结列
   const { leftList, rightList } = columnStore
   setLeftOrRightPosition({ columnList: leftList, direction: 'left', headerEl, bodyEl, scrollbarWidth })
   setLeftOrRightPosition({ columnList: rightList, direction: 'right', headerEl, bodyEl, scrollbarWidth })
+  if (isGroup) {
+    setGroupHeaderPosition({ columnChart, direction: 'left' })
+    setGroupHeaderPosition({ columnChart, direction: 'right' })
+    setGroupHeaderLastOrFirst({ columnChart, leftList, rightList })
+  }
 }
diff --git a/packages/vue/src/grid/src/tools/formatter.ts b/packages/vue/src/grid/src/tools/formatter.ts
index 4a5dc2c42..5bef0f484 100644
--- a/packages/vue/src/grid/src/tools/formatter.ts
+++ b/packages/vue/src/grid/src/tools/formatter.ts
@@ -180,6 +180,13 @@ export default {
     return (h) =>
       h('div', { class: 'data-ellipsis' }, [h('span', { domProps: { title: value } }, truncate(value, format.len))])
   },
+  /**
+   * rate 渲染器的计算规则：
+   * 如果配置了 max，就按照 value / max 计算样式百分比，按照 value / 1 计算显示百分比；
+   * 如果未配置 max，就按照 value / total 计算样式百分比和显示百分比；
+   * @param {Number} value
+   * @returns Function
+   */
   rate(value) {
     const format = {
       fraction: 2,
@@ -190,17 +197,34 @@ export default {
     const { rateMethod } = format
     let rate
 
-    if (typeof rateMethod === 'function') {
-      rate = rateMethod.call(this, value, format)
-    } else {
-      rate = toRate(value, format.total, format.fraction)
+    let formatTotal = format.total
+
+    const getLengthRate = (value, config) => {
+      let lengthRate
+
+      if (config.max && typeof config.max === 'number' && typeof value === 'number') {
+        // 如果配置了 max 那么 formatTotal 就必须是 1
+        formatTotal = 1
+        lengthRate = toRate(value / config.max, formatTotal, format.fraction)
+      }
+
+      return lengthRate
     }
 
+    let lengthRate = getLengthRate(value, format)
+
+    if (typeof rateMethod === 'function') {
+      rate = rateMethod.call(this, value, Object.assign({ formatTotal }, format))
+    } else {
+      rate = toRate(value, formatTotal, format.fraction)
+    }
+    lengthRate = lengthRate || rate
+
     let section = format.section
     let css = ''
 
     if (section) {
-      let rateValue = parseInt(rate, 10)
+      let rateValue = parseInt(lengthRate, 10)
 
       if (!isNumber(rateValue)) {
         return rate
@@ -228,7 +252,7 @@ export default {
       h('div', { class: 'tiny-grid__data-rate' }, [
         h('div', {
           class: `tiny-grid__rate-chart${css}`,
-          style: { width: rate }
+          style: { width: lengthRate }
         }),
         h('span', { class: 'tiny-grid__rate-text' }, rate)
       ])
@@ -241,7 +265,7 @@ export default {
       noFork: false
     }
     const format = Object.assign(defaultFormat, this.own.formatConfig)
-    const cellValue = !isNull(format.trueValue) ? value == format.trueValue : toBoolValue(value)
+    const cellValue = !isNull(format.trueValue) ? value === format.trueValue : toBoolValue(value)
 
     if (!format.htmlView) {
       return cellValue
diff --git a/packages/vue/src/grid/src/validator/src/methods.ts b/packages/vue/src/grid/src/validator/src/methods.ts
index 6bf458be2..48153d3f0 100644
--- a/packages/vue/src/grid/src/validator/src/methods.ts
+++ b/packages/vue/src/grid/src/validator/src/methods.ts
@@ -79,14 +79,17 @@ const onRejected = (opt, _this) => {
       const posAndFinish = funcPosAndFinish(params, finish)
 
       const locatRow = getLocatRow(params)
+
       // 是否触发校验时自动定位到当前校验的单元格
       const isAutoPosFalse = _this.validOpts.autoPos === false
 
       isAutoPosFalse && finish()
+
       // 自动滚动到校验不通过的树表单元格
       !isAutoPosFalse && treeConfig && _this.scrollToTreeRow(locatRow).then(posAndFinish)
-      // 自动滚动到校验不通过的表格单元格
-      !isAutoPosFalse && !treeConfig && _this.scrollToRow(locatRow, true).then(posAndFinish)
+
+      // 自动滚动到校验不通过的表格单元格。调用方式优化：this.scrollToRow(locatRow, true) 第二个 true 参数会导致后续 colToVisible 不会被调用
+      !isAutoPosFalse && !treeConfig && _this.scrollToRow(locatRow, params.column, true).then(posAndFinish)
     })
   }
 }
diff --git a/packages/vue/src/guide/package.json b/packages/vue/src/guide/package.json
index 4a92cff09..11b799ebe 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,4 +18,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/guide/src/index.ts b/packages/vue/src/guide/src/index.ts
index cc5119779..c550cfe2e 100644
--- a/packages/vue/src/guide/src/index.ts
+++ b/packages/vue/src/guide/src/index.ts
@@ -1,8 +1,8 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import browser from '@opentiny/vue-renderless/common/browser'
 import template from 'virtual-template?pc'
 
-export default {
+export default defineComponent({
   name: $prefix + 'Guide',
   props: {
     ...$props,
@@ -55,4 +55,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/hrapprover/package.json b/packages/vue/src/hrapprover/package.json
index 61b0afe19..d5552e84a 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -25,4 +25,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/image-viewer/package.json b/packages/vue/src/image-viewer/package.json
index 9d4dbba8f..c056b40fb 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -26,4 +26,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/image-viewer/src/index.ts b/packages/vue/src/image-viewer/src/index.ts
index 8264d358d..a86cd3ac8 100644
--- a/packages/vue/src/image-viewer/src/index.ts
+++ b/packages/vue/src/image-viewer/src/index.ts
@@ -111,6 +111,10 @@ export default defineComponent({
     bgColor: {
       type: String,
       default: 'bg-color-icon-primary'
+    },
+    keepStyle: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/image-viewer/src/mobile-first.vue b/packages/vue/src/image-viewer/src/mobile-first.vue
index 29a0c8412..4d946fdff 100644
--- a/packages/vue/src/image-viewer/src/mobile-first.vue
+++ b/packages/vue/src/image-viewer/src/mobile-first.vue
@@ -408,7 +408,8 @@ export default defineComponent({
     'isMenuView',
     'modalView',
     'modalHeight',
-    'bgColor'
+    'bgColor',
+    'keepStyle'
   ],
   components: {
     TinyActionSheet: ActionSheet,
diff --git a/packages/vue/src/image-viewer/src/pc.vue b/packages/vue/src/image-viewer/src/pc.vue
index 912679868..c5fcdf712 100644
--- a/packages/vue/src/image-viewer/src/pc.vue
+++ b/packages/vue/src/image-viewer/src/pc.vue
@@ -11,7 +11,12 @@
  -->
 <template>
   <transition name="viewer-fade">
-    <div class="tiny-image-viewer tiny-image-viewer__wrapper" :style="{ 'z-index': state.zIndex }" @mousewheel.prevent>
+    <div
+      v-if="true"
+      class="tiny-image-viewer tiny-image-viewer__wrapper"
+      :style="{ 'z-index': state.zIndex }"
+      @mousewheel.prevent
+    >
       <div class="tiny-image-viewer__mask"></div>
       <!-- CLOSE -->
       <span class="tiny-image-viewer__btn tiny-image-viewer__close" @click="hide">
@@ -44,6 +49,11 @@
           <i class="tiny-image-viewer__actions-divider"></i>
           <icon-repeat class="tiny-svg-size" @click="handleActions('anticlocelise')" />
           <icon-refres class="tiny-svg-size" @click="handleActions('clocelise')" />
+          <slot name="count" :index="state.index">
+            <span v-if="showIndex" class="tiny-image-viewer__actions-count"
+              >{{ state.index + 1 }}/{{ urlList.length }}</span
+            >
+          </slot>
         </div>
       </div>
       <!-- CANVAS -->
@@ -84,7 +94,7 @@ import '@opentiny/vue-theme/image-viewer/index.less'
 
 export default defineComponent({
   emits: ['close', 'update:preview-visible', 'delete', 'change', 'newImageList'],
-  props: [...props, 'urlList', 'zIndex', 'onSwitch', 'onClose'],
+  props: [...props, 'urlList', 'zIndex', 'onSwitch', 'onClose', 'keepStyle', 'showIndex'],
   components: {
     IconClose: iconClose(),
     IconChevronLeft: iconChevronLeft(),
diff --git a/packages/vue/src/image/package.json b/packages/vue/src/image/package.json
index bf1c66292..9f69870bf 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/image/src/index.ts b/packages/vue/src/image/src/index.ts
index 3c71b4eff..7256ec0c3 100644
--- a/packages/vue/src/image/src/index.ts
+++ b/packages/vue/src/image/src/index.ts
@@ -62,6 +62,10 @@ export const imageProps = {
   imageSize: {
     type: Number,
     default: 100
+  },
+  keepStyle: {
+    type: Boolean,
+    default: false
   }
 }
 export default defineComponent({
diff --git a/packages/vue/src/image/src/mobile-first.vue b/packages/vue/src/image/src/mobile-first.vue
index f3796f34b..b4d62eb7f 100644
--- a/packages/vue/src/image/src/mobile-first.vue
+++ b/packages/vue/src/image/src/mobile-first.vue
@@ -41,11 +41,17 @@
       <image-viewer
         :z-index="zIndex"
         v-if="state.getPreview && state.showViewer"
+        :on-switch="handleSwitch"
         :on-close="closeViewer"
         :url-list="previewSrcList"
         :show-index="showIndex"
+        :keep-style="keepStyle"
         @delete="deleteHander"
-      />
+      >
+        <template #count="slotScoped">
+          <slot name="count" :index="slotScoped.index"></slot>
+        </template>
+      </image-viewer>
     </teleport>
   </div>
 </template>
@@ -61,7 +67,7 @@ export default defineComponent({
     ImageViewer,
     Teleport
   },
-  emits: ['load', 'error', 'delete'],
+  emits: ['load', 'error', 'delete', 'change-index'],
   props: [
     ...props,
     'src',
@@ -74,7 +80,8 @@ export default defineComponent({
     'showHover',
     'previewVisible',
     'round',
-    'imageSize'
+    'imageSize',
+    'keepStyle'
   ],
   setup(props, context): any {
     return setup({
diff --git a/packages/vue/src/image/src/pc.vue b/packages/vue/src/image/src/pc.vue
index 97b08e243..16b11cfb8 100644
--- a/packages/vue/src/image/src/pc.vue
+++ b/packages/vue/src/image/src/pc.vue
@@ -34,9 +34,16 @@
         ref="imageViewer"
         :z-index="zIndex"
         v-if="state.getPreview && state.showViewer"
+        :on-switch="handleSwitch"
         :on-close="closeViewer"
         :url-list="previewSrcList"
-      />
+        :keep-style="keepStyle"
+        :show-index="showIndex"
+      >
+        <template #count="slotScoped">
+          <slot name="count" :index="slotScoped.index"></slot>
+        </template>
+      </image-viewer>
     </teleport>
   </div>
 </template>
@@ -52,8 +59,8 @@ export default defineComponent({
     ImageViewer,
     Teleport
   },
-  emits: ['load', 'error', 'delete'],
-  props: [...props, 'src', 'fit', 'lazy', 'scrollContainer', 'previewSrcList', 'zIndex'],
+  emits: ['load', 'error', 'delete', 'change-index'],
+  props: [...props, 'src', 'fit', 'lazy', 'scrollContainer', 'previewSrcList', 'zIndex', 'keepStyle', 'showIndex'],
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as IImageApi
   }
diff --git a/packages/vue/src/index-bar-anchor/package.json b/packages/vue/src/index-bar-anchor/package.json
index 5403781f7..6dd347287 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,10 +15,9 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/index-bar/package.json b/packages/vue/src/index-bar/package.json
index 2b2f15252..410f332b7 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,10 +15,9 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/input/package.json b/packages/vue/src/input/package.json
index d7a568e1c..d58da32c1 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -24,4 +24,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/input/src/index.ts b/packages/vue/src/input/src/index.ts
index 9562d7c3e..857bb8867 100644
--- a/packages/vue/src/input/src/index.ts
+++ b/packages/vue/src/input/src/index.ts
@@ -33,7 +33,8 @@ export const $constants = {
   COMPONENT_NAME: {
     FormItem: 'FormItem'
   },
-  MASKSYMBOL: '******'
+  MASKSYMBOL: '******',
+  TEXTAREA_HEIGHT_MOBILE: 108
 }
 
 export const inputProps = {
diff --git a/packages/vue/src/input/src/mobile.vue b/packages/vue/src/input/src/mobile.vue
index b4d832197..9fa6d5c05 100644
--- a/packages/vue/src/input/src/mobile.vue
+++ b/packages/vue/src/input/src/mobile.vue
@@ -126,28 +126,35 @@
         </div>
       </template>
     </div>
-
-    <textarea
-      v-else
-      ref="textarea"
-      :name="name"
-      v-bind="a($attrs, ['type', 'class', 'style', '^on[A-Z]'])"
-      :class="['tiny-mobile-textarea__inner', { 'is-focus': state.focused }]"
-      :tabindex="tabindex"
-      @compositionstart="handleCompositionStart"
-      @compositionupdate="handleCompositionUpdate"
-      @compositionend="handleCompositionEnd"
-      @input="handleInput"
-      :disabled="state.inputDisabled"
-      :readonly="readonly"
-      :autocomplete="autocomplete"
-      :style="{ ...state.textareaStyle, width: $attrs.cols ? 'auto' : '100%' }"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @change="handleChange"
-      :aria-label="label"
-    >
-    </textarea>
+    <div v-else class="tiny-mobile-textarea__wrapper">
+      <textarea
+        ref="textarea"
+        :name="name"
+        v-bind="a($attrs, ['type', 'class', 'style', '^on[A-Z]'])"
+        :class="['tiny-mobile-textarea__inner', { 'is-focus': state.focused, 'is-autosize': autosize }]"
+        :tabindex="tabindex"
+        :disabled="state.inputDisabled"
+        :readonly="readonly"
+        :autocomplete="autocomplete"
+        :style="{
+          ...state.textareaStyle,
+          width: $attrs.cols ? 'auto' : '100%',
+          height: $attrs.cols || autosize ? 'auto' : ''
+        }"
+        :aria-label="label"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @change="handleChange"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
+        @input="handleInput"
+        @keyup="$emit('keyup', $event)"
+        @keydown="$emit('keydown', $event)"
+        @paste="$emit('paste', $event)"
+      >
+      </textarea>
+    </div>
 
     <!-- 字数限制 -->
     <span v-if="state.isWordLimitVisible && type === 'textarea'" class="tiny-mobile-textarea__count">{{
diff --git a/packages/vue/src/input/src/tall-storage.vue b/packages/vue/src/input/src/tall-storage.vue
index 8494a32df..611cdf544 100644
--- a/packages/vue/src/input/src/tall-storage.vue
+++ b/packages/vue/src/input/src/tall-storage.vue
@@ -28,11 +28,11 @@
 </template>
 
 <script lang="ts">
-import { $prefix, setup } from '@opentiny/vue-common'
+import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/tall-storage/vue'
 import '@opentiny/vue-theme/tall-storage/index.less'
 
-export default {
+export default defineComponent({
   name: $prefix + 'TallStorage',
   inheritAttrs: false,
   props: {
@@ -42,5 +42,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/ip-address/package.json b/packages/vue/src/ip-address/package.json
index d2447562d..c5c7b05e6 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/label/package.json b/packages/vue/src/label/package.json
index 8ff99e2ca..52e813f89 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/layout/package.json b/packages/vue/src/layout/package.json
index d91406ebf..18a24aa5b 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/link-menu/package.json b/packages/vue/src/link-menu/package.json
index 6b2a50961..8704d2f62 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -25,4 +25,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/link/package.json b/packages/vue/src/link/package.json
index 4eabfa43c..629e0a36e 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/list/package.json b/packages/vue/src/list/package.json
index 2a60f09b8..11e9d5055 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/loading/package.json b/packages/vue/src/loading/package.json
index 9e2334fcc..a96d51c5f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -16,11 +16,9 @@
   },
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/locales/package.json b/packages/vue/src/locales/package.json
index f2344f32a..ede7b0638 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/logon-user/package.json b/packages/vue/src/logon-user/package.json
index 8ebd59f1c..6dc9185f4 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,4 +19,4 @@
     "@opentiny/vue-renderless": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/logout/package.json b/packages/vue/src/logout/package.json
index ba1bc834b..39a502082 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -16,9 +16,8 @@
   },
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/mask/package.json b/packages/vue/src/mask/package.json
index 841d7454b..7abc232a5 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/menu/package.json b/packages/vue/src/menu/package.json
index ca8e06ffe..50e0ebe13 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-exception": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/message/package.json b/packages/vue/src/message/package.json
index 4fe89d44a..4dd6a5cb1 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -9,9 +9,7 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-modal": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-theme-mobile": "workspace:~"
+    "@opentiny/vue-renderless": "workspace:~"
   },
   "license": "MIT",
   "devDependencies": {
@@ -22,4 +20,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/milestone/package.json b/packages/vue/src/milestone/package.json
index 7a4cebd99..d3818a637 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/mind-map/package.json b/packages/vue/src/mind-map/package.json
index 4e446c072..032550990 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": "5.12.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -8,12 +8,9 @@
   "type": "module",
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
-  },
-  "license": "MIT",
-  "devDependencies": {
+    "@opentiny/vue-theme": "workspace:~",
     "mind-elixir": "^3.3.2"
-  }
-}
+  },
+  "license": "MIT"
+}
\ No newline at end of file
diff --git a/packages/vue/src/mini-picker/package.json b/packages/vue/src/mini-picker/package.json
index 77aab97fa..8e99ec9d8 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/modal/package.json b/packages/vue/src/modal/package.json
index 1b95276fd..913881958 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,11 +20,10 @@
     "@opentiny/vue-button": "workspace:~",
     "@opentiny/vue-checkbox": "workspace:~",
     "@opentiny/vue-checkbox-group": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-popconfirm": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/month-range/package.json b/packages/vue/src/month-range/package.json
index 341afc69a..315c1f9de 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,10 +17,9 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-month-table": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/month-table/package.json b/packages/vue/src/month-table/package.json
index b231347fa..4b1a7c9a1 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,8 +17,7 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/multi-select-item/package.json b/packages/vue/src/multi-select-item/package.json
index a80f270f8..769487c73 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,10 +17,9 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-button": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/multi-select/package.json b/packages/vue/src/multi-select/package.json
index c723642b8..edcd1dffd 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -27,4 +27,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/nav-bar/package.json b/packages/vue/src/nav-bar/package.json
index e774c24e2..07f2a4b0b 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,10 +15,9 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/nav-menu/package.json b/packages/vue/src/nav-menu/package.json
index 7d528c73b..3a1270dc9 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,10 +17,9 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/notify/package.json b/packages/vue/src/notify/package.json
index b9d2a95d1..a8f0a7cad 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/numeric/package.json b/packages/vue/src/numeric/package.json
index a050113f6..91784f9d8 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -26,4 +26,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/numeric/src/index.ts b/packages/vue/src/numeric/src/index.ts
index 14b5d76b2..1b07b3a84 100644
--- a/packages/vue/src/numeric/src/index.ts
+++ b/packages/vue/src/numeric/src/index.ts
@@ -46,6 +46,9 @@ export const numericProps = {
     type: Boolean,
     default: false
   },
+  emptyValue: {
+    default: undefined
+  },
   circulate: Boolean,
   controls: {
     type: Boolean,
diff --git a/packages/vue/src/numeric/src/mobile-first.vue b/packages/vue/src/numeric/src/mobile-first.vue
index dcd1bc52a..fc2b466f8 100644
--- a/packages/vue/src/numeric/src/mobile-first.vue
+++ b/packages/vue/src/numeric/src/mobile-first.vue
@@ -155,6 +155,7 @@ export default defineComponent({
     'mouseWheel',
     'validateEvent',
     'allowEmpty',
+    'emptyValue',
     'format',
     'unit',
     'stringMode',
diff --git a/packages/vue/src/numeric/src/pc.vue b/packages/vue/src/numeric/src/pc.vue
index 004d2d742..f14d8aa7a 100644
--- a/packages/vue/src/numeric/src/pc.vue
+++ b/packages/vue/src/numeric/src/pc.vue
@@ -238,6 +238,7 @@ export default defineComponent({
     'mouseWheel',
     'validateEvent',
     'allowEmpty',
+    'emptyValue',
     'format',
     'unit',
     'stringMode',
diff --git a/packages/vue/src/option-group/package.json b/packages/vue/src/option-group/package.json
index 14e04af94..9a393e896 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/option-group/src/index.ts b/packages/vue/src/option-group/src/index.ts
index 991063d18..80845684c 100644
--- a/packages/vue/src/option-group/src/index.ts
+++ b/packages/vue/src/option-group/src/index.ts
@@ -1,7 +1,7 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'OptionGroup',
   componentName: 'OptionGroup',
   props: {
@@ -15,4 +15,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/option-group/src/mobile-first.vue b/packages/vue/src/option-group/src/mobile-first.vue
index 78d1d49ff..bd7b24152 100644
--- a/packages/vue/src/option-group/src/mobile-first.vue
+++ b/packages/vue/src/option-group/src/mobile-first.vue
@@ -16,12 +16,12 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/option-group/vue'
-import { setup, props } from '@opentiny/vue-common'
+import { setup, props, defineComponent } from '@opentiny/vue-common'
 
-export default {
+export default defineComponent({
   props: [...props, 'label', 'disabled'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/option-group/src/pc.vue b/packages/vue/src/option-group/src/pc.vue
index 1fb412dc7..67bf979d8 100644
--- a/packages/vue/src/option-group/src/pc.vue
+++ b/packages/vue/src/option-group/src/pc.vue
@@ -5,7 +5,7 @@
       {{ label }}
     </li>
     <li>
-      <ul class="tiny-option-group__list tiny-select-group">
+      <ul class="tiny-option-group__list tiny-select-group" ref="selectGroup">
         <slot></slot>
       </ul>
     </li>
diff --git a/packages/vue/src/option/package.json b/packages/vue/src/option/package.json
index 571d172f8..0e5e155b2 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/option/src/index.ts b/packages/vue/src/option/src/index.ts
index a81715f8d..51fabb48a 100644
--- a/packages/vue/src/option/src/index.ts
+++ b/packages/vue/src/option/src/index.ts
@@ -1,4 +1,4 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
 export const optionsProps = {
@@ -29,11 +29,11 @@ export const optionsProps = {
   icon: Object
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'Option',
   componentName: 'Option',
   props: optionsProps,
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/option/src/mobile-first.vue b/packages/vue/src/option/src/mobile-first.vue
index 2e15cebc3..ec5a9f8d5 100644
--- a/packages/vue/src/option/src/mobile-first.vue
+++ b/packages/vue/src/option/src/mobile-first.vue
@@ -51,10 +51,10 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/option/vue'
-import { props, setup } from '@opentiny/vue-common'
+import { props, setup, defineComponent } from '@opentiny/vue-common'
 import { iconCheck, iconCheckedSur, iconFinish } from '@opentiny/vue-icon'
 
-export default {
+export default defineComponent({
   components: {
     IconCheck: iconCheck(),
     IconCheckedSur: iconCheckedSur(),
@@ -64,5 +64,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/pager-item/package.json b/packages/vue/src/pager-item/package.json
index 112ccf35b..c9ffdf760 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,8 +17,7 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/pager-item/src/index.ts b/packages/vue/src/pager-item/src/index.ts
index 20f557cb6..cfd3cdb1f 100644
--- a/packages/vue/src/pager-item/src/index.ts
+++ b/packages/vue/src/pager-item/src/index.ts
@@ -1,8 +1,8 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import { IconPopup, IconDoubleLeft, IconDoubleRight } from '@opentiny/vue-icon'
 import template from 'virtual-template?pc|mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'PagerItem',
   props: {
     ...$props,
@@ -30,4 +30,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/pager/package.json b/packages/vue/src/pager/package.json
index 454615cc4..0a62b5974 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,11 +18,10 @@
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-popover": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-pager-item": "workspace:~",
     "@opentiny/vue-loading": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/panel/package.json b/packages/vue/src/panel/package.json
index 0c65c71c2..7e6f37b6c 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-renderless": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/picker-column/package.json b/packages/vue/src/picker-column/package.json
index 45fc3b1ae..e6099dd12 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/picker/package.json b/packages/vue/src/picker/package.json
index 33639355e..9b3d6d043 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,7 +18,6 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-date-panel": "workspace:~",
     "@opentiny/vue-date-range": "workspace:~",
     "@opentiny/vue-month-range": "workspace:~",
@@ -35,4 +34,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/picker/src/index.ts b/packages/vue/src/picker/src/index.ts
index d7e7230af..01b6466b3 100644
--- a/packages/vue/src/picker/src/index.ts
+++ b/packages/vue/src/picker/src/index.ts
@@ -1,8 +1,8 @@
-import { $prefix, $props, $setup } from '@opentiny/vue-common'
+import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 import { pickerProps } from './type'
 
-export default {
+export default defineComponent({
   name: $prefix + 'Picker',
   componentName: 'Picker',
   props: {
@@ -12,4 +12,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/picker/src/mobile-first.vue b/packages/vue/src/picker/src/mobile-first.vue
index 6f4c99144..c653567b7 100644
--- a/packages/vue/src/picker/src/mobile-first.vue
+++ b/packages/vue/src/picker/src/mobile-first.vue
@@ -236,7 +236,7 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/picker/vue'
-import { setup, directive } from '@opentiny/vue-common'
+import { setup, directive, defineComponent } from '@opentiny/vue-common'
 import Input from '@opentiny/vue-input'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
 import DatePanel from '@opentiny/vue-date-panel'
@@ -254,7 +254,7 @@ import TimePickerMobile from '@opentiny/vue-time-picker-mobile'
 import { classes } from './token'
 import { pickerProps } from './type'
 
-export default {
+export default defineComponent({
   components: {
     TinyInput: Input,
     TinyFilterBox: FilterBox,
@@ -286,5 +286,5 @@ export default {
       }
     })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/pop-upload/package.json b/packages/vue/src/pop-upload/package.json
index de7d288fe..a9f71e20c 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -25,4 +25,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/popconfirm/package.json b/packages/vue/src/popconfirm/package.json
index eaf120d45..4cecdea0f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -10,11 +10,9 @@
     "@opentiny/vue-button": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-modal": "workspace:~",
     "@opentiny/vue-popover": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-theme-mobile": "workspace:~"
+    "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT",
   "devDependencies": {
@@ -25,4 +23,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/popconfirm/src/index.ts b/packages/vue/src/popconfirm/src/index.ts
index 9a48c7791..a2feff35d 100644
--- a/packages/vue/src/popconfirm/src/index.ts
+++ b/packages/vue/src/popconfirm/src/index.ts
@@ -45,6 +45,10 @@ export const popConfirmProps = {
     type: Boolean,
     default: true
   },
+  closeOnClickOutside: {
+    type: Boolean,
+    default: true
+  },
   title: String,
   placement: {
     type: String,
@@ -53,7 +57,11 @@ export const popConfirmProps = {
   width: [String, Number],
   type: [String, Object],
   reference: {},
-  events: Object
+  events: Object,
+  popperAppendToBody: {
+    type: Boolean,
+    default: true
+  }
 }
 
 export default defineComponent({
diff --git a/packages/vue/src/popconfirm/src/mobile-first.vue b/packages/vue/src/popconfirm/src/mobile-first.vue
index 8ac7b0c15..97a6ce20b 100644
--- a/packages/vue/src/popconfirm/src/mobile-first.vue
+++ b/packages/vue/src/popconfirm/src/mobile-first.vue
@@ -9,6 +9,7 @@
       :width="width"
       :title="title"
       :popper-class="m('min-w-[theme(spacing.44)] max-w-[theme(spacing.96)]', customClass)"
+      :append-to-body="popperAppendToBody"
       :reference="reference"
       @show="handleEmit('show')"
       @hide="handleEmit('hide')"
@@ -122,6 +123,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    closeOnClickOutside: {
+      type: Boolean,
+      default: true
+    },
     title: String,
     placement: {
       type: String,
@@ -133,7 +138,11 @@ export default defineComponent({
     },
     type: [String, Object],
     reference: {},
-    events: Object
+    events: Object,
+    popperAppendToBody: {
+      type: Boolean,
+      default: true
+    }
   },
   emits: ['hide', 'show', 'confirm', 'handleEmit'],
   setup(props, context) {
diff --git a/packages/vue/src/popconfirm/src/pc.vue b/packages/vue/src/popconfirm/src/pc.vue
index f9a3f1d30..d089a2e65 100644
--- a/packages/vue/src/popconfirm/src/pc.vue
+++ b/packages/vue/src/popconfirm/src/pc.vue
@@ -10,6 +10,7 @@
         :title="title"
         :popper-class="m('tiny-popconfirm-popover', customClass)"
         :popper-options="popperOptions"
+        :append-to-body="popperAppendToBody"
         :reference="reference"
         @show="handleEmit('show')"
         @hide="handleEmit('hide')"
@@ -85,6 +86,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    closeOnClickOutside: {
+      type: Boolean,
+      default: true
+    },
     title: String,
     placement: {
       type: String,
@@ -96,7 +101,11 @@ export default defineComponent({
     },
     type: [String, Object],
     reference: {},
-    events: Object
+    events: Object,
+    popperAppendToBody: {
+      type: Boolean,
+      default: true
+    }
   },
   emits: ['hide', 'show', 'confirm'],
   setup(props, context): any {
diff --git a/packages/vue/src/popeditor/package.json b/packages/vue/src/popeditor/package.json
index e69720a62..43ac224e5 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -27,4 +27,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/popover/package.json b/packages/vue/src/popover/package.json
index 181ac4f4c..33bec0a61 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/popup/package.json b/packages/vue/src/popup/package.json
index f4d198b09..9c5dadd64 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/progress/package.json b/packages/vue/src/progress/package.json
index a6040c836..293ae8b4d 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/pull-refresh/package.json b/packages/vue/src/pull-refresh/package.json
index 18fbc5cb1..5e516b160 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/qr-code/package.json b/packages/vue/src/qr-code/package.json
index bed92c7c6..0e1f9c8e6 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/quarter-panel/package.json b/packages/vue/src/quarter-panel/package.json
index 8327c0d73..bc63512af 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,7 +17,9 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-renderless": "workspace:~"
+    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-year-table": "workspace:~",
+    "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/query-builder/package.json b/packages/vue/src/query-builder/package.json
index c177bb4ae..716821135 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,10 +18,8 @@
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-date-picker": "workspace:~",
-    "@opentiny/vue-currency": "workspace:~",
     "@opentiny/vue-button": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
-    "@opentiny/vue-popover": "workspace:~",
     "@opentiny/vue-select": "workspace:~",
     "@opentiny/vue-option": "workspace:~",
     "@opentiny/vue-option-group": "workspace:~",
@@ -33,4 +31,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/query-builder/src/pc.vue b/packages/vue/src/query-builder/src/pc.vue
index 69cffee70..abfe1cf42 100644
--- a/packages/vue/src/query-builder/src/pc.vue
+++ b/packages/vue/src/query-builder/src/pc.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { $prefix, setup } from '@opentiny/vue-common'
+import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/query-builder/vue'
 import QueryBuilder from './components/QueryBuilder.vue'
 import { defaultValidator } from './utils'
@@ -20,7 +20,7 @@ import '@opentiny/vue-theme/query-builder/index.less'
 
 import { getFormatQueryString } from './preFormat'
 
-export default {
+export default defineComponent({
   inheritAttrs: false,
   name: $prefix + 'QueryBuilder',
   components: {
@@ -77,5 +77,5 @@ export default {
       return len
     }
   }
-}
+})
 </script>
diff --git a/packages/vue/src/radio-button/package.json b/packages/vue/src/radio-button/package.json
index 5e49434d3..a955ad1dd 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-tooltip": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/radio-group/package.json b/packages/vue/src/radio-group/package.json
index 419ecff17..ba37d7473 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/radio/package.json b/packages/vue/src/radio/package.json
index bf47f603f..545738820 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/rate/package.json b/packages/vue/src/rate/package.json
index b718f68c5..f225dd327 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-locale": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/record/package.json b/packages/vue/src/record/package.json
index 389fb110e..294e3fb73 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.8.11",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,4 +17,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/record/src/index.ts b/packages/vue/src/record/src/index.ts
index dd7022c8a..df1d7a209 100644
--- a/packages/vue/src/record/src/index.ts
+++ b/packages/vue/src/record/src/index.ts
@@ -1,4 +1,4 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?mobile-first'
 
 const $constants = {
@@ -16,7 +16,7 @@ const $constants = {
   }
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'Record',
   props: {
     ...$props,
@@ -37,4 +37,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/recycle-scroller/package.json b/packages/vue/src/recycle-scroller/package.json
index 32575362a..acbb1851f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -16,4 +16,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/recycle-scroller/src/index.ts b/packages/vue/src/recycle-scroller/src/index.ts
index 8281b0392..3f9014795 100644
--- a/packages/vue/src/recycle-scroller/src/index.ts
+++ b/packages/vue/src/recycle-scroller/src/index.ts
@@ -1,7 +1,7 @@
-import { $props, $setup, $prefix } from '@opentiny/vue-common'
+import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc'
 
-export default {
+export default defineComponent({
   name: $prefix + 'RecycleScroller',
   props: {
     ...$props,
@@ -33,4 +33,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/rich-text-editor/package.json b/packages/vue/src/rich-text-editor/package.json
index efda02611..ea918e041 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": "1.0.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,7 +15,6 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   },
   "devDependencies": {
@@ -46,4 +45,4 @@
     "highlight.js": "^11.8.0",
     "lowlight": "^2.9.0"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/rich-text/package.json b/packages/vue/src/rich-text/package.json
index 6bce44639..7f1f5c948 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.14.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,8 +17,10 @@
   "dependencies": {
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
-    "quill": "^1.3.7"
+    "quill": "^1.3.7",
+    "@opentiny/vue-theme": "workspace:~",
+    "@opentiny/vue-renderless": "workspace:~",
+    "@opentiny/vue-modal": "workspace:~"
   },
   "license": "MIT"
 }
\ No newline at end of file
diff --git a/packages/vue/src/river/package.json b/packages/vue/src/river/package.json
index fe9de0e9f..69f56afaf 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -9,8 +9,6 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-theme-mobile": "workspace:~",
     "echarts": "5.4.1"
   },
   "license": "MIT",
@@ -22,4 +20,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/river/src/pc.vue b/packages/vue/src/river/src/pc.vue
index 9b5e04136..ad5774524 100644
--- a/packages/vue/src/river/src/pc.vue
+++ b/packages/vue/src/river/src/pc.vue
@@ -4,11 +4,9 @@
 
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/river/vue'
-import { props, setup } from '@opentiny/vue-common'
+import { props, setup, defineComponent } from '@opentiny/vue-common'
 import * as echarts from 'echarts'
 
-import { defineComponent } from '@opentiny/vue-common'
-
 export default defineComponent({
   emits: ['paths', 'click-node', 'click-link', 'click-icon', 'click-lege'],
   props: [...props, 'data', 'config'],
diff --git a/packages/vue/src/roles/package.json b/packages/vue/src/roles/package.json
index 76a9e880d..ffcc54c81 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/roles/src/index.ts b/packages/vue/src/roles/src/index.ts
index 7adc3ddc0..d54677ac9 100644
--- a/packages/vue/src/roles/src/index.ts
+++ b/packages/vue/src/roles/src/index.ts
@@ -16,6 +16,10 @@ export default defineComponent({
       type: Object,
       default: () => $constants
     },
+    popperAppendToBody: {
+      type: Boolean,
+      default: true
+    },
     fetchRole: Function,
     getEnvInfoSync: Function,
     getChangeRoleUrl: Function,
diff --git a/packages/vue/src/roles/src/pc.vue b/packages/vue/src/roles/src/pc.vue
index 9c501d399..faa0481d6 100644
--- a/packages/vue/src/roles/src/pc.vue
+++ b/packages/vue/src/roles/src/pc.vue
@@ -2,6 +2,7 @@
   <div class="tiny-roles">
     <tiny-popover
       popper-class="tiny-roles__selector"
+      :append-to-body="popperAppendToBody"
       :disabled="state.roleList.length === 1"
       v-model="state.showPopover"
       placement="bottom-start"
@@ -44,7 +45,15 @@ import Popover from '@opentiny/vue-popover'
 import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
 
 export default defineComponent({
-  props: [...props, 'fetchRole', 'getEnvInfoSync', 'getChangeRoleUrl', 'getCustomized', 'pushCustomized'],
+  props: [
+    ...props,
+    'fetchRole',
+    'getEnvInfoSync',
+    'getChangeRoleUrl',
+    'getCustomized',
+    'pushCustomized',
+    'popperAppendToBody'
+  ],
   components: {
     TinyPopover: Popover,
     IconChevronDown: IconChevronDown(),
diff --git a/packages/vue/src/row/package.json b/packages/vue/src/row/package.json
index 53a7ef6cb..fadc7bc5f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/scroll-text/package.json b/packages/vue/src/scroll-text/package.json
index 40ba69fe7..ccc7697c1 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/scrollbar/package.json b/packages/vue/src/scrollbar/package.json
index 4da0e864d..c9be16b5d 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/scrollbar/src/bar.vue b/packages/vue/src/scrollbar/src/bar.vue
index d1ef2eb59..53aa24119 100644
--- a/packages/vue/src/scrollbar/src/bar.vue
+++ b/packages/vue/src/scrollbar/src/bar.vue
@@ -12,11 +12,11 @@
 
 <script lang="tsx">
 import { renderless, api } from '@opentiny/vue-renderless/scrollbar/vue-bar'
-import { setup, $prefix, h } from '@opentiny/vue-common'
+import { setup, $prefix, h, defineComponent } from '@opentiny/vue-common'
 
 // 此处引入 h 是为了防止打包后 h 被重命名导致组件报错的问题
 
-export default {
+export default defineComponent({
   name: $prefix + 'Bar',
   props: {
     vertical: Boolean,
@@ -51,5 +51,5 @@ export default {
       </div>
     )
   }
-}
+})
 </script>
diff --git a/packages/vue/src/search/package.json b/packages/vue/src/search/package.json
index cb7d04042..1281c2d98 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -25,4 +25,4 @@
     "@opentiny/vue-button": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/select-dropdown/package.json b/packages/vue/src/select-dropdown/package.json
index 459474ba3..26d8e613a 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/select-dropdown/src/mobile-first.vue b/packages/vue/src/select-dropdown/src/mobile-first.vue
index 3d1f306af..7af1f23b9 100644
--- a/packages/vue/src/select-dropdown/src/mobile-first.vue
+++ b/packages/vue/src/select-dropdown/src/mobile-first.vue
@@ -119,12 +119,12 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/select-dropdown/vue'
-import { props, setup } from '@opentiny/vue-common'
+import { props, setup, defineComponent } from '@opentiny/vue-common'
 import TinySearch from '@opentiny/vue-search'
 import TinyButton from '@opentiny/vue-button'
 import { iconClose, iconChevronUp, iconError } from '@opentiny/vue-icon'
 
-export default {
+export default defineComponent({
   components: {
     TinySearch,
     TinyButton,
@@ -153,5 +153,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/select-mobile/package.json b/packages/vue/src/select-mobile/package.json
index f8a41c397..2771fe5db 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -12,8 +12,6 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-theme-mobile": "workspace:~",
     "@opentiny/vue-exception": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
     "@opentiny/vue-cell": "workspace:~"
@@ -27,4 +25,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/select-view/package.json b/packages/vue/src/select-view/package.json
index 2c417e644..d17e03ab5 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/select/package.json b/packages/vue/src/select/package.json
index ba23ca23b..609e3719f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,21 +19,19 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-tag": "workspace:~",
-    "@opentiny/vue-loading": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
     "@opentiny/vue-option": "workspace:~",
     "@opentiny/vue-scrollbar": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-select-dropdown": "workspace:~",
-    "@opentiny/vue-search": "workspace:~",
     "@opentiny/vue-grid": "workspace:~",
     "@opentiny/vue-tree": "workspace:~",
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-filter-box": "workspace:~",
     "@opentiny/vue-checkbox": "workspace:~",
-    "@opentiny/vue-popover": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
-    "@opentiny/vue-recycle-scroller": "workspace:~"
+    "@opentiny/vue-recycle-scroller": "workspace:~",
+    "@opentiny/vue-button": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/select/src/index.ts b/packages/vue/src/select/src/index.ts
index e63dc7f9b..466c79a11 100644
--- a/packages/vue/src/select/src/index.ts
+++ b/packages/vue/src/select/src/index.ts
@@ -56,7 +56,19 @@ const $constants = {
     AURORA_HEIGHT: 180,
     ITEM_HEIGHT: 34,
     SAFE_MARGIN: 4
-  }
+  },
+  SAAS_SIZE: {
+    mini: 24,
+    small: 28,
+    medium: 32
+  },
+  AURORA_SIZE: {
+    mini: 24,
+    small: 36,
+    medium: 42
+  },
+  SPACING_HEIGHT: 0,
+  MAX_VISIBLE_ROWS: 1 // 多选默认最大显示行数，超出后自动隐藏
 }
 
 export default defineComponent({
@@ -316,6 +328,14 @@ export default defineComponent({
     showProportion: {
       type: Boolean,
       default: false
+    },
+    clickExpand: {
+      type: Boolean,
+      default: false
+    },
+    maxVisibleRows: {
+      type: Number,
+      default: $constants.MAX_VISIBLE_ROWS
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/select/src/mobile-first.vue b/packages/vue/src/select/src/mobile-first.vue
index fb92b14cb..cc7116e01 100644
--- a/packages/vue/src/select/src/mobile-first.vue
+++ b/packages/vue/src/select/src/mobile-first.vue
@@ -387,18 +387,20 @@
                   </tiny-option>
                 </template>
                 <template #default="{ item }">
-                  <tiny-option
-                    :class="['absolute w-full']"
-                    :key="`${item[valueField]}`"
-                    :label="item[textField]"
-                    :value="item[valueField]"
-                    :disabled="item.disabled"
-                    :required="item.required"
-                    :highlight-class="item._highlightClass"
-                    :events="item.events"
-                    @mousedown.stop
-                  >
-                  </tiny-option>
+                  <slot :item="item">
+                    <tiny-option
+                      :class="['absolute w-full']"
+                      :key="`${item[valueField]}`"
+                      :label="item[textField]"
+                      :value="item[valueField]"
+                      :disabled="item.disabled"
+                      :required="item.required"
+                      :highlight-class="item._highlightClass"
+                      :events="item.events"
+                      @mousedown.stop
+                    >
+                    </tiny-option>
+                  </slot>
                 </template>
               </tiny-recycle-scroller>
             </div>
@@ -539,7 +541,7 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/select/vue'
-import { props, setup, directive } from '@opentiny/vue-common'
+import { props, setup, directive, defineComponent } from '@opentiny/vue-common'
 import TinyTag from '@opentiny/vue-tag'
 import TinyInput from '@opentiny/vue-input'
 import TinyOption from '@opentiny/vue-option'
@@ -574,7 +576,7 @@ const getReference = (el, binding, vnode) => {
   }
 }
 
-export default {
+export default defineComponent({
   inheritAttrs: false,
   emits: [
     'update:modelValue',
@@ -697,5 +699,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api, classes })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue
index 154cce849..6ad1935c3 100644
--- a/packages/vue/src/select/src/pc.vue
+++ b/packages/vue/src/select/src/pc.vue
@@ -20,9 +20,11 @@
       state.collapseTags ? 'tiny-select__collapse-tags' : '',
       filterable ? 'tiny-select__filterable' : '',
       multiple ? 'tiny-select__multiple' : '',
-      state.inputHovering || state.visible ? 'is-hover' : '',
+      (state.inputHovering || state.visible) && !clickExpand ? 'is-hover' : '',
       state.isDisplayOnly ? 'is-display-only' : '',
       hoverExpand ? 'is-hover-expand' : '',
+      clickExpand ? 'is-click-expand' : '',
+      state.showCollapseTag ? 'collapse-tag-clicked' : '',
       state.selectDisabled ? 'is-disabled' : '',
       $parent.$attrs.class,
       inputBoxType === 'underline' ? 'tiny-select__underline' : ''
@@ -69,7 +71,7 @@
         </tiny-filter-box>
         <div
           ref="tags"
-          :class="['tiny-select__tags', { 'is-showicon': slots.prefix }, { 'not-selected': !state.selected.length }]"
+          :class="['tiny-select__tags', { 'is-showicon': slots.prefix, 'not-selected': !state.selected.length }]"
           v-if="multiple && !state.isDisplayOnly && !shape"
           :style="state.tagsStyle"
         >
@@ -120,20 +122,22 @@
             </span>
             <span ref="tags-content" v-if="!collapseTags">
               <tiny-tag
-                v-if="hoverExpand"
+                v-if="hoverExpand || clickExpand"
                 :class="['tiny-select__tags-collapse', { 'is-hidden': state.isHidden }]"
-                type="info"
+                :type="state.getTagType"
                 key="tags-collapse"
                 data-tag="tags-collapse"
                 :closable="false"
                 :size="state.collapseTagSize"
+                @click="onClickCollapseTag($event)"
               >
-                + {{ state.collapseTagsLength }}
+                <template v-if="hoverExpand"> + {{ state.collapseTagsLength }} </template>
+                <icon-ellipsis v-else></icon-ellipsis>
               </tiny-tag>
-              <!-- tiny 新增: item没有selectDisabled。 改为item.disabled即可 -->
               <tiny-tag
                 v-for="(item, index) in state.selected"
                 :key="getValueKey(item)"
+                :class="{ 'not-visible': state.toHideIndex <= index && !state.isExpand }"
                 :closable="!item.disabled && !item.required"
                 :size="state.collapseTagSize"
                 :hit="item.state ? item.state.hitState : item.hitState"
@@ -166,6 +170,16 @@
                   </template>
                 </tiny-tooltip>
               </tiny-tag>
+
+              <!-- 收起按钮 -->
+              <span
+                v-if="clickExpand && state.showCollapseTag"
+                class="tiny-select__collapse-text"
+                @click="onClickCollapseTag($event)"
+              >
+                {{ t('ui.select.collapse') }}
+                <icon-chevron-up></icon-chevron-up>
+              </span>
             </span>
           </span>
 
@@ -217,8 +231,7 @@
             :style="{
               'flex-grow': '1',
               width: state.inputLength / (state.inputWidth - 32) + '%',
-              'max-width': state.inputWidth - 42 + 'px',
-              height: 'auto'
+              'max-width': state.inputWidth - 42 + 'px'
             }"
           />
         </div>
@@ -263,12 +276,19 @@
           </template>
           <template #suffix>
             <slot name="suffix"></slot>
+            <span v-if="multiple && multipleLimit" class="tiny-select__limit-txt"
+              >{{ state.selected.length }}/{{ multipleLimit }}</span
+            >
+            <span
+              v-else-if="showProportion && state.selected.length > 0 && state.options.length > 1"
+              class="tiny-select__proportion-txt"
+            >
+              {{ state.selected.length + '/' + state.options.length }}
+            </span>
             <span v-if="state.showCopy" class="tiny-select__copy" @click.stop="handleCopyClick">
               <icon-copy class="tiny-svg-size tiny-select__caret"></icon-copy>
             </span>
-            <span v-if="showProportion && state.selected.length > 0 && state.options.length > 1">
-              {{ state.selected.length + '/' + state.options.length }}
-            </span>
+
             <icon-close
               v-if="state.showClose"
               class="tiny-svg-size tiny-select__caret icon-close"
@@ -402,18 +422,20 @@
                   <tiny-option :value="state.query" created v-if="state.showNewOption"> </tiny-option>
                 </template>
                 <template #default="{ item }">
-                  <tiny-option
-                    :key="`${item[valueField]}`"
-                    :label="item[textField]"
-                    :value="item[valueField]"
-                    :disabled="item.disabled"
-                    :required="item.required"
-                    :highlight-class="item._highlightClass"
-                    :events="item.events"
-                    :icon="item.icon"
-                    @mousedown.stop
-                  >
-                  </tiny-option>
+                  <slot :item="item">
+                    <tiny-option
+                      :key="`${item[valueField]}`"
+                      :label="item[textField]"
+                      :value="item[valueField]"
+                      :disabled="item.disabled"
+                      :required="item.required"
+                      :highlight-class="item._highlightClass"
+                      :events="item.events"
+                      :icon="item.icon"
+                      @mousedown.stop
+                    >
+                    </tiny-option>
+                  </slot>
                 </template>
               </tiny-recycle-scroller>
             </div>
@@ -552,6 +574,7 @@ import TinyInput from '@opentiny/vue-input'
 import TinyOption from '@opentiny/vue-option'
 import TinyScrollbar from '@opentiny/vue-scrollbar'
 import TinySelectDropdown from '@opentiny/vue-select-dropdown'
+import TinyButton from '@opentiny/vue-button'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
 import {
   IconClose,
@@ -561,7 +584,9 @@ import {
   IconCopy,
   IconPlus,
   IconDeltaDown,
-  IconSearch
+  IconSearch,
+  IconEllipsis,
+  IconChevronUp
 } from '@opentiny/vue-icon'
 import Grid from '@opentiny/vue-grid'
 import Tree from '@opentiny/vue-tree'
@@ -618,6 +643,7 @@ export default defineComponent({
     TinyOption,
     TinyGrid: Grid,
     TinyTree: Tree,
+    TinyButton,
     IconClose: IconClose(),
     TinyScrollbar,
     IconCopy: IconCopy(),
@@ -632,7 +658,9 @@ export default defineComponent({
     // tiny 新增，
     IconSearch: IconSearch(),
     IconDeltaDown: IconDeltaDown(), // 默认下拉图标
-    TinyCheckbox
+    TinyCheckbox,
+    IconEllipsis: IconEllipsis(),
+    IconChevronUp: IconChevronUp()
   },
   props: [
     ...props,
@@ -716,7 +744,9 @@ export default defineComponent({
     'inputBoxType',
     'tagType',
     'clearNoMatchValue',
-    'showProportion'
+    'showProportion',
+    'clickExpand',
+    'maxVisibleRows'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })
diff --git a/packages/vue/src/selected-box/package.json b/packages/vue/src/selected-box/package.json
index fbd13c14a..39ff36b61 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/selected-box/src/index.ts b/packages/vue/src/selected-box/src/index.ts
index e21cbf8ae..fa4ba5c2b 100644
--- a/packages/vue/src/selected-box/src/index.ts
+++ b/packages/vue/src/selected-box/src/index.ts
@@ -1,7 +1,7 @@
-import { $props, $setup, $prefix } from '@opentiny/vue-common'
+import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'SelectedBox',
   props: {
     ...$props,
@@ -13,4 +13,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/signature/package.json b/packages/vue/src/signature/package.json
index 8567143d4..23b3dd5cd 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.12.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/signature/src/index.ts b/packages/vue/src/signature/src/index.ts
index 59bf44ba3..5f1d49017 100644
--- a/packages/vue/src/signature/src/index.ts
+++ b/packages/vue/src/signature/src/index.ts
@@ -1,8 +1,8 @@
-import { $props, $setup, $prefix } from '@opentiny/vue-common'
+import { $props, $setup, $prefix, defineComponent } from '@opentiny/vue-common'
 import { t } from '@opentiny/vue-locale'
 import template from 'virtual-template?mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'Signature',
   props: {
     ...$props,
@@ -40,4 +40,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/skeleton-item/package.json b/packages/vue/src/skeleton-item/package.json
index 9737167dd..3c9b24f34 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.13.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,4 +17,4 @@
     "vitest": "^0.31.0"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/skeleton/package.json b/packages/vue/src/skeleton/package.json
index 621e72ea3..e94eb972d 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.13.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,4 +17,4 @@
     "@opentiny-internal/vue-test-utils": "workspace:*",
     "vitest": "0.31.0"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/skeleton/src/index.ts b/packages/vue/src/skeleton/src/index.ts
index 6f8dfa06b..04c4ccfc6 100644
--- a/packages/vue/src/skeleton/src/index.ts
+++ b/packages/vue/src/skeleton/src/index.ts
@@ -27,7 +27,7 @@ export const skeletonProps = {
     type: Array as PropType<(string | number)[]>,
     default: () => []
   },
-  active: {
+  animated: {
     type: Boolean,
     default: true
   }
diff --git a/packages/vue/src/skeleton/src/pc.vue b/packages/vue/src/skeleton/src/pc.vue
index 600301a2d..9c0e9c35d 100644
--- a/packages/vue/src/skeleton/src/pc.vue
+++ b/packages/vue/src/skeleton/src/pc.vue
@@ -30,7 +30,7 @@ import SkeletonItem from '@opentiny/vue-skeleton-item'
 
 export default defineComponent({
   emits: ['update:modelValue'],
-  props: [...props, 'modelValue', 'loading', 'rows', 'avatar', 'rowsWidth', 'active'],
+  props: [...props, 'modelValue', 'loading', 'rows', 'avatar', 'rowsWidth', 'animated'],
   components: {
     TinySkeletonItem: SkeletonItem
   },
diff --git a/packages/vue/src/slide-bar/__tests__/slide-bar.test.tsx b/packages/vue/src/slide-bar/__tests__/slide-bar.test.tsx
deleted file mode 100644
index a82468f92..000000000
--- a/packages/vue/src/slide-bar/__tests__/slide-bar.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import SlideBar from '@opentiny/vue-slide-bar'
-import { describe, expect, test, vi } from 'vitest'
-import { mountPcMode } from '@opentiny-internal/vue-test-utils'
-
-describe('PC Mode', () => {
-  const mount = mountPcMode
-
-  const slideBarMockData = [
-    { title: 'a', lang: 'en_US' },
-    { title: 'b', lang: 'zh-CN' },
-    { title: 'c', lang: 'en_US' },
-    { title: 'd', lang: 'en_US' },
-    { title: 'e', lang: 'en_US' },
-    { title: 'f', lang: 'en_US' },
-    { title: 'g', lang: 'en_US' },
-    { title: 'h', lang: 'en_US' },
-    { title: 'i', lang: 'en_US' }
-  ]
-
-  const _mount = (props: any = {}) => {
-    return mount(() => <SlideBar modelValue={slideBarMockData} {...props}></SlideBar>)
-  }
-
-  /**
-   * attrs
-   */
-  test('value', async () => {
-    const wrapper = _mount()
-    const slideBar = wrapper.findComponent({ name: 'TinySlideBar' })
-    expect(slideBar.vm.modelValue.length).toBe(9)
-  })
-
-  test.todo('init-blocks 初始时需要显示的块数')
-
-  test.todo('wheel-blocks 鼠标滚轮上下滚动的时候，滚动的块数长度。默认为 1')
-
-  test.todo('tag 设置组件的 Dom 标签。默认值为 ul')
-
-  test.todo('sub-tag 设置组件的子级 Dom 标签。默认为 li')
-
-  /**
-   * slots
-   */
-  test('default slot', async () => {
-    const wrapper = mount(() => (
-      <SlideBar modelValue={slideBarMockData}>
-        {{
-          default: ({ slotData }) => (
-            <div>
-              <span>标题：{slotData.title}</span>
-              <div>语言：{slotData.lang}</div>
-            </div>
-          )
-        }}
-      </SlideBar>
-    ))
-    const items = wrapper.findAll('.tiny-slide-bar__list > li')
-    expect(items.length).toBe(9)
-  })
-
-  /**
-   * events
-   */
-  test('before-click', async () => {
-    const beforeClickHandler = vi.fn()
-    const wrapper = _mount({
-      onBeforeClick: beforeClickHandler
-    })
-    const item = wrapper.find('.tiny-slide-bar__list > li')
-    await item.trigger('click')
-    expect(beforeClickHandler).toBeCalled()
-  })
-
-  test.todo('click 滑动块点击事件;data: 点击的滑块数据，index: 点击的滑块索引值')
-})
diff --git a/packages/vue/src/slide-bar/index.ts b/packages/vue/src/slide-bar/index.ts
deleted file mode 100644
index b94fa04e7..000000000
--- a/packages/vue/src/slide-bar/index.ts
+++ /dev/null
@@ -1,35 +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 SlideBar from './src/index'
-import '@opentiny/vue-theme/slide-bar/index.less'
-import { version } from './package.json'
-
-SlideBar.model = {
-  prop: 'modelValue',
-  event: 'update:modelValue'
-}
-
-/* istanbul ignore next */
-SlideBar.install = function (Vue) {
-  Vue.component(SlideBar.name, SlideBar)
-}
-
-SlideBar.version = version
-
-/* istanbul ignore next */
-if (process.env.BUILD_TARGET === 'runtime') {
-  if (typeof window !== 'undefined' && window.Vue) {
-    SlideBar.install(window.Vue)
-  }
-}
-
-export default SlideBar
diff --git a/packages/vue/src/slide-bar/package.json b/packages/vue/src/slide-bar/package.json
deleted file mode 100644
index 47fcc306d..000000000
--- a/packages/vue/src/slide-bar/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "@opentiny/vue-slide-bar",
-  "version": "3.7.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "index.ts",
-  "sideEffects": false,
-  "type": "module",
-  "devDependencies": {
-    "@opentiny-internal/vue-test-utils": "workspace:*",
-    "vitest": "^0.31.0"
-  },
-  "scripts": {
-    "build": "pnpm -w build:ui $npm_package_name",
-    "//postversion": "pnpm build"
-  },
-  "dependencies": {
-    "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-theme": "workspace:~"
-  },
-  "license": "MIT"
-}
diff --git a/packages/vue/src/slide-bar/src/index.ts b/packages/vue/src/slide-bar/src/index.ts
deleted file mode 100644
index 74946d1b3..000000000
--- a/packages/vue/src/slide-bar/src/index.ts
+++ /dev/null
@@ -1,37 +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 { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
-import template from 'virtual-template?pc'
-
-export default defineComponent({
-  name: $prefix + 'SlideBar',
-  props: {
-    ...$props,
-    initBlocks: Number,
-    wheelBlocks: {
-      type: Number,
-      default: 1
-    },
-    modelValue: Array,
-    tag: {
-      type: String,
-      default: 'ul'
-    },
-    subTag: {
-      type: String,
-      default: 'li'
-    }
-  },
-  setup(props, context) {
-    return $setup({ props, context, template })
-  }
-})
diff --git a/packages/vue/src/slide-bar/src/pc.vue b/packages/vue/src/slide-bar/src/pc.vue
deleted file mode 100644
index 624bdb67f..000000000
--- a/packages/vue/src/slide-bar/src/pc.vue
+++ /dev/null
@@ -1,79 +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.
- *
- -->
-<template>
-  <div class="tiny-slide-bar" @mousewheel.prevent="mouseEvent" ref="wrapper">
-    <icon-chevron-left
-      :class="[state.showLeft ? '' : 'tiny-disabled']"
-      class="tiny-svg-size icon-chevron-left"
-      @click="leftClick"
-    />
-    <div class="tiny-slide-bar__content">
-      <transition>
-        <component
-          :is="tag"
-          class="tiny-slide-bar__list tiny-repeat rightAni-enter-active"
-          :style="{ width: state.blockWrapper + 'px' }"
-          ref="insider"
-        >
-          <component
-            :is="subTag"
-            v-for="(item, key) in modelValue"
-            :key="key"
-            :class="[state.currentIndex === key ? 'tiny-slide-bar__select' : '']"
-            class="block"
-            :style="{
-              width: state.blockWidth + 'px',
-              'margin-left': key === 0 ? 0 : state.blockMargin + 'px'
-            }"
-            @click="blockClick({ item, index: key })"
-          >
-            <ul>
-              <li>
-                <slot :slotData="item">
-                  <div>{{ item.title }}</div>
-                  <div>
-                    <icon-radio class="tiny-svg-size"></icon-radio>
-                  </div>
-                  <div>{{ item.lang }}</div>
-                </slot>
-              </li>
-            </ul>
-          </component>
-        </component>
-      </transition>
-    </div>
-    <icon-chevron-right
-      :class="[state.showRight ? 'tiny-disabled' : '']"
-      class="tiny-svg-size icon-chevron-right"
-      @click="rightClick"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { renderless, api } from '@opentiny/vue-renderless/slide-bar/vue'
-import { props, setup, defineComponent } from '@opentiny/vue-common'
-import { iconChevronLeft, iconChevronRight, iconRadio } from '@opentiny/vue-icon'
-
-export default defineComponent({
-  components: {
-    IconChevronLeft: iconChevronLeft(),
-    IconChevronRight: iconChevronRight(),
-    IconRadio: iconRadio()
-  },
-  props: [...props, 'initBlocks', 'wheelBlocks', 'modelValue', 'tag', 'subTag'],
-  emits: ['before-click', 'click'],
-  setup(props, context) {
-    return setup({ props, context, renderless, api })
-  }
-})
-</script>
diff --git a/packages/vue/src/slider-button-group/package.json b/packages/vue/src/slider-button-group/package.json
index b3f9fa91b..d369b7edf 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/slider-button/package.json b/packages/vue/src/slider-button/package.json
index ffcc779a8..431263c07 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,4 +19,4 @@
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/slider/package.json b/packages/vue/src/slider/package.json
index c0140eada..f34be2f0e 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/split/package.json b/packages/vue/src/split/package.json
index 9f088c62b..35b874e31 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/standard-list-item/package.json b/packages/vue/src/standard-list-item/package.json
index 53dcf7f60..31ddb21be 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-tag-group": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/statistic/package.json b/packages/vue/src/statistic/package.json
index bb1be9233..548701286 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,10 +17,7 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-layout": "workspace:~",
-    "@opentiny/vue-row": "workspace:~",
-    "@opentiny/vue-col": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/steps/package.json b/packages/vue/src/steps/package.json
index a11172255..eaa6095bd 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/svg-icon/package.json b/packages/vue/src/svg-icon/package.json
index ff8e0936b..bd0d7b120 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -15,9 +15,8 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/switch/package.json b/packages/vue/src/switch/package.json
index 98acd3493..8dcdaf0e6 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tab-item/package.json b/packages/vue/src/tab-item/package.json
index 0a1377735..ec9e0606c 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,4 +19,4 @@
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tabbar-item/package.json b/packages/vue/src/tabbar-item/package.json
index 88ee2a403..680112c74 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-badge": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tabbar-item/src/index.ts b/packages/vue/src/tabbar-item/src/index.ts
index 6239faba1..1a105df1c 100644
--- a/packages/vue/src/tabbar-item/src/index.ts
+++ b/packages/vue/src/tabbar-item/src/index.ts
@@ -1,7 +1,7 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?mobile|mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'TabbarItem',
   componentName: 'TabbarItem',
   props: {
@@ -23,4 +23,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/tabbar/package.json b/packages/vue/src/tabbar/package.json
index bbd885e2e..84d40b1e9 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tabbar/src/index.ts b/packages/vue/src/tabbar/src/index.ts
index 21017716f..cdbccf0df 100644
--- a/packages/vue/src/tabbar/src/index.ts
+++ b/packages/vue/src/tabbar/src/index.ts
@@ -1,7 +1,7 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?mobile|mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'Tabbar',
   componentName: 'Tabbar',
   props: {
@@ -36,4 +36,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/table/package.json b/packages/vue/src/table/package.json
index 435f7274a..2e85ce132 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tabs/package.json b/packages/vue/src/tabs/package.json
index 2ad47fe81..3933769aa 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,9 +23,8 @@
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-locale": "workspace:~",
-    "@opentiny/vue-popover": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@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 423d239cf..b8de98950 100644
--- a/packages/vue/src/tabs/src/index.ts
+++ b/packages/vue/src/tabs/src/index.ts
@@ -70,7 +70,6 @@ export const tabsProps = {
 
 export default defineComponent({
   name: $prefix + 'Tabs',
-  emits: ['tab-nav-update'],
   props: tabsProps,
   setup(props, context) {
     return $setup({ props, context, template })
diff --git a/packages/vue/src/tabs/src/pc.vue b/packages/vue/src/tabs/src/pc.vue
index 5b95591eb..333e88882 100644
--- a/packages/vue/src/tabs/src/pc.vue
+++ b/packages/vue/src/tabs/src/pc.vue
@@ -18,7 +18,17 @@ import '@opentiny/vue-theme/tabs/index.less'
 import type { ITabsApi } from '@opentiny/vue-renderless/types/tabs.type'
 
 export default defineComponent({
-  emits: ['add', 'click', 'close', 'edit', 'update:modelValue', 'tab-drag-start', 'tab-drag-over', 'tab-drag-end'],
+  emits: [
+    'add',
+    'click',
+    'close',
+    'edit',
+    'update:modelValue',
+    'tab-nav-update',
+    'tab-drag-start',
+    'tab-drag-over',
+    'tab-drag-end'
+  ],
   props: [
     ...props,
     'tabStyle',
diff --git a/packages/vue/src/tabs/src/tab-nav/mb.vue b/packages/vue/src/tabs/src/tab-nav/mb.vue
index 72bbdfe5e..9ba935789 100644
--- a/packages/vue/src/tabs/src/tab-nav/mb.vue
+++ b/packages/vue/src/tabs/src/tab-nav/mb.vue
@@ -10,7 +10,7 @@
  *
  -->
 <script lang="tsx">
-import { $prefix, setup, h } from '@opentiny/vue-common'
+import { $prefix, setup, h, defineComponent } from '@opentiny/vue-common'
 
 // 此处引入 h 是为了防止打包后 h 被重命名导致组件报错的问题
 import { renderless, api } from '@opentiny/vue-renderless/tab-nav/vue'
@@ -18,7 +18,7 @@ import { iconClose, iconChevronDown } from '@opentiny/vue-icon'
 import type { ITabNavApi } from '@opentiny/vue-renderless/types/tab-nav.type'
 import { tabNavMobileProps } from './index'
 
-export default {
+export default defineComponent({
   name: $prefix + 'TabNav',
   components: {
     IconClose: iconClose(),
@@ -184,5 +184,5 @@ export default {
       </div>
     )
   }
-}
+})
 </script>
diff --git a/packages/vue/src/tabs/src/tab-nav/pc.vue b/packages/vue/src/tabs/src/tab-nav/pc.vue
index e70075b8d..95bea9c3c 100644
--- a/packages/vue/src/tabs/src/tab-nav/pc.vue
+++ b/packages/vue/src/tabs/src/tab-nav/pc.vue
@@ -10,7 +10,7 @@
  *
  -->
 <script lang="tsx">
-import { $prefix, setup, h } from '@opentiny/vue-common'
+import { $prefix, setup, h, defineComponent } from '@opentiny/vue-common'
 import { t } from '@opentiny/vue-locale'
 import { renderless, api } from '@opentiny/vue-renderless/tab-nav/vue'
 import Dropdown from '@opentiny/vue-dropdown'
@@ -72,7 +72,7 @@ const getOrderedPanes = (state, panes) => {
   return panes
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'TabNav',
   components: {
     TabBar,
@@ -341,5 +341,5 @@ export default {
       </div>
     )
   }
-}
+})
 </script>
diff --git a/packages/vue/src/tabs/src/tab-nav/tab-bar.vue b/packages/vue/src/tabs/src/tab-nav/tab-bar.vue
index 8ab9824cc..e9188061b 100644
--- a/packages/vue/src/tabs/src/tab-nav/tab-bar.vue
+++ b/packages/vue/src/tabs/src/tab-nav/tab-bar.vue
@@ -17,16 +17,16 @@
 </template>
 
 <script lang="tsx">
-import { $prefix, setup } from '@opentiny/vue-common'
+import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/tab-bar/vue'
 import type { ITabBarPcApi } from '@opentiny/vue-renderless/types/tab-bar.type'
 import { tabBarProps } from './index'
 
-export default {
+export default defineComponent({
   name: $prefix + 'TabBar',
   props: tabBarProps,
   setup(props, context) {
     return setup({ props, context, renderless, api, mono: true }) as unknown as ITabBarPcApi
   }
-}
+})
 </script>
diff --git a/packages/vue/src/tag-group/package.json b/packages/vue/src/tag-group/package.json
index c1173cd09..e9676778b 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tag/package.json b/packages/vue/src/tag/package.json
index 8d459a63e..dec1edb7c 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tag/src/index.ts b/packages/vue/src/tag/src/index.ts
index 89169679c..f23b926dd 100644
--- a/packages/vue/src/tag/src/index.ts
+++ b/packages/vue/src/tag/src/index.ts
@@ -19,7 +19,10 @@ export const tagProps = {
   type: String,
   theme: String,
   size: String,
-  color: String,
+  color: {
+    type: [String, Array],
+    default: ''
+  },
   closable: Boolean,
   operable: Boolean,
   disabled: Boolean,
diff --git a/packages/vue/src/tag/src/pc.vue b/packages/vue/src/tag/src/pc.vue
index 05151bdaa..ed8484628 100644
--- a/packages/vue/src/tag/src/pc.vue
+++ b/packages/vue/src/tag/src/pc.vue
@@ -27,6 +27,8 @@ export default defineComponent({
   render() {
     const { type, size, hit, effect, slots, closable, color, handleClose, handleClick, disabled, state, value } = this
 
+    let styles = {}
+
     const classes = [
       'tiny-tag',
       type ? `tiny-tag--${type}` : '',
@@ -36,9 +38,19 @@ export default defineComponent({
       disabled ? 'is-disabled' : ''
     ]
 
+    if (color) {
+      if (Array.isArray(color)) {
+        styles = { background: color[0], color: color[1] }
+      } else if (['red', 'orange', 'green', 'blue', 'purple', 'brown', 'grey', 'gold'].includes(color)) {
+        classes.push(`tiny-tag--${color}`)
+      } else {
+        styles = { background: color }
+      }
+    }
+
     const tagElement =
       value || (slots.default && slots.default()) ? (
-        <span data-tag="tiny-tag" class={classes} style={{ backgroundColor: color }} onClick={handleClick}>
+        <span data-tag="tiny-tag" class={classes} style={styles} onClick={handleClick}>
           {value ? <span>{value}</span> : slots.default && slots.default()}
           {closable && <icon-close class="tiny-svg-size tiny-tag__close " onClick={handleClose}></icon-close>}
         </span>
diff --git a/packages/vue/src/text-popup/package.json b/packages/vue/src/text-popup/package.json
index 8d5d0a92c..9fe731362 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/time-line/package.json b/packages/vue/src/time-line/package.json
index b1488b9f5..5e8a08f19 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/time-line/src/pc.vue b/packages/vue/src/time-line/src/pc.vue
index 7d0a1ac89..062eaa07c 100644
--- a/packages/vue/src/time-line/src/pc.vue
+++ b/packages/vue/src/time-line/src/pc.vue
@@ -25,6 +25,7 @@
           :space="space"
           :line-width="lineWidth"
           :shape="shape"
+          :autoColorField="autoColorField"
           @click="handleClick({ index, node })"
         >
           <template #active-node-desc="slotScoped">
@@ -76,7 +77,8 @@ export default defineComponent({
     'showDivider',
     'onlyNumber',
     'lineWidth',
-    'shape'
+    'shape',
+    'autoColorField'
   ],
   components: {
     TinyTimelineItem: TimelineItem
diff --git a/packages/vue/src/time-panel/package.json b/packages/vue/src/time-panel/package.json
index f294a4466..bf4ae9db0 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,8 +18,7 @@
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-scrollbar": "workspace:~",
-    "@opentiny/vue-numeric": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/time-picker-mobile/package.json b/packages/vue/src/time-picker-mobile/package.json
index 34ac83bd8..edcfc1a34 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "build": "pnpm -w build:ui $npm_package_name",
     "//postversion": "pnpm build"
   }
-}
+}
\ No newline at end of file
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 6c77e0612..a36ec1f2b 100644
--- a/packages/vue/src/time-picker-mobile/src/mobile-first.vue
+++ b/packages/vue/src/time-picker-mobile/src/mobile-first.vue
@@ -1,6 +1,7 @@
 <template>
   <div data-tag="tiny-time-picker-mobile" v-show="visible">
     <tiny-cascader-select
+      ref="cascaderSelect"
       v-model="state.dateArr"
       :cycle-roll="cycleRoll"
       :options="state.options"
@@ -19,6 +20,11 @@
           :
         </div>
       </template>
+      <template #header-left>
+        <span v-if="clearable" class="cursor-pointer text-color-brand" @click="clear">
+          {{ t('ui.datepicker.clear') }}
+        </span>
+      </template>
     </tiny-cascader-select>
   </div>
 </template>
@@ -33,7 +39,7 @@ export default defineComponent({
   components: {
     TinyCascaderSelect: CascaderSelect
   },
-  emits: ['update:modelValue', 'confirm', 'update:visible'],
+  emits: ['update:modelValue', 'confirm', 'update:visible', 'clear'],
   props: {
     ...$props,
     modelValue: Array,
@@ -59,6 +65,10 @@ export default defineComponent({
     showSeconds: {
       type: Boolean,
       default: true
+    },
+    clearable: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/time-picker/package.json b/packages/vue/src/time-picker/package.json
index 9f424ef82..790845cd2 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/time-range/package.json b/packages/vue/src/time-range/package.json
index 96f38b409..1910ad799 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,9 +17,8 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-time-spinner": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/time-range/src/pc.vue b/packages/vue/src/time-range/src/pc.vue
index 5b9545ee2..c4a9a958c 100644
--- a/packages/vue/src/time-range/src/pc.vue
+++ b/packages/vue/src/time-range/src/pc.vue
@@ -30,6 +30,7 @@
               :show-seconds="state.showSeconds"
               :am-pm-mode="state.amPmMode"
               @change="handleMinChange"
+              :end-date="state.maxDate"
               :arrow-control="state.arrowControl"
               @select-range="setMinSelectionRange"
               :date="state.minDate"
@@ -53,6 +54,7 @@
               :show-seconds="state.showSeconds"
               :am-pm-mode="state.amPmMode"
               @change="handleMaxChange"
+              :start-date="state.minDate"
               :arrow-control="state.arrowControl"
               @select-range="setMaxSelectionRange"
               :date="state.maxDate"
diff --git a/packages/vue/src/time-select/package.json b/packages/vue/src/time-select/package.json
index 234b6d308..0339f7fa3 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/time-spinner/package.json b/packages/vue/src/time-spinner/package.json
index 1b693ec9b..abbe6fb0f 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/time-spinner/src/index.ts b/packages/vue/src/time-spinner/src/index.ts
index 6108c85e6..5a448d25b 100644
--- a/packages/vue/src/time-spinner/src/index.ts
+++ b/packages/vue/src/time-spinner/src/index.ts
@@ -40,6 +40,14 @@ export default defineComponent({
           value || value === 0 ? Math.floor(value) === value && value > 0 && value <= range : true
         )
       }
+    },
+    startDate: {
+      type: Object,
+      default: () => ({})
+    },
+    endDate: {
+      type: Object,
+      default: () => ({})
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/time-spinner/src/pc.vue b/packages/vue/src/time-spinner/src/pc.vue
index a4fd192bd..f5f31ae26 100644
--- a/packages/vue/src/time-spinner/src/pc.vue
+++ b/packages/vue/src/time-spinner/src/pc.vue
@@ -168,7 +168,7 @@ export default defineComponent({
   directives: directive({
     repeatClick: { bind }
   }),
-  props: [...props, 'date', 'defaultValue', 'showSeconds', 'arrowControl', 'amPmMode', 'step'],
+  props: [...props, 'date', 'defaultValue', 'showSeconds', 'arrowControl', 'amPmMode', 'step', 'startDate', 'endDate'],
 
   setup(props, context) {
     return setup({ props, context, renderless, api })
diff --git a/packages/vue/src/time/package.json b/packages/vue/src/time/package.json
index 7dccab3b7..83684b1f9 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,10 +17,9 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-time-spinner": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-button": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/timeline-item/package.json b/packages/vue/src/timeline-item/package.json
index fc39913cc..84f64aba4 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.9.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/timeline-item/src/index.ts b/packages/vue/src/timeline-item/src/index.ts
index 11d819fd7..f6e19fd9a 100644
--- a/packages/vue/src/timeline-item/src/index.ts
+++ b/packages/vue/src/timeline-item/src/index.ts
@@ -39,6 +39,10 @@ export const timelineItemProps = {
   lineWidth: {
     type: [String, Number],
     default: ''
+  },
+  autoColorField: {
+    type: String,
+    default: 'autoColor'
   }
 }
 
diff --git a/packages/vue/src/timeline-item/src/pc.vue b/packages/vue/src/timeline-item/src/pc.vue
index 8552b1b0a..f649ee07e 100644
--- a/packages/vue/src/timeline-item/src/pc.vue
+++ b/packages/vue/src/timeline-item/src/pc.vue
@@ -13,16 +13,24 @@
   <div class="tiny-timeline-item" :class="state.computedItemCls" :style="state.computedItemStyle">
     <template v-if="!rootProps.vertical">
       <template v-if="rootProps.textPosition === 'right'">
-        <div class="icon step-icon" @click="handleClick(node)">
+        <div :class="state.iconClass" @click="handleClick(node)">
           <span
-            v-if="(node.index < state.current || node.error) && !rootProps.onlyNumber"
-            :custom-title="node.index + rootProps.start"
-            class="icon-wrap"
-          >
-            <icon-close v-if="node.error" class="tiny-svg-size fixicon" />
-            <icon-yes v-else class="tiny-svg-size fixicon" />
+            v-if="(node.index >= state.current || rootProps.onlyNumber) && !node[autoColorField] && !node.error"
+            class="number"
+            >{{ rootProps.showNumber ? node.index + rootProps.start : '' }}
           </span>
-          <span v-else>{{ rootProps.showNumber ? node.index + rootProps.start : '' }}</span>
+          <template v-else>
+            <icon-close
+              v-if="node[autoColorField] === 'error' || node.error"
+              class="tiny-svg-size fixicon icon-error"
+            ></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])"
+              class="tiny-svg-size fixicon icon-yes"
+            />
+            <component v-else :is="node[autoColorField]" class="fixicons"></component>
+          </template>
         </div>
 
         <div class="node-description">
@@ -59,16 +67,24 @@
           </div>
         </slot>
         <div class="tiny-steps__node">
-          <div class="icon" @click="handleClick(node)">
+          <div :class="state.iconClass" @click="handleClick(node)">
             <span
-              v-if="(node.index < state.current || node.error) && !rootProps.onlyNumber"
-              :custom-title="node.index + rootProps.start"
-              class="icon-wrap"
-            >
-              <icon-close v-if="node.error" class="tiny-svg-size fixicon" />
-              <icon-yes v-else class="tiny-svg-size fixicon" />
+              v-if="(node.index >= state.current || rootProps.onlyNumber) && !node[autoColorField] && !node.error"
+              class="number"
+              >{{ rootProps.showNumber ? node.index + rootProps.start : '' }}
             </span>
-            <span v-else>{{ rootProps.showNumber ? node.index + rootProps.start : '' }}</span>
+            <template v-else>
+              <icon-close
+                v-if="node[autoColorField] === 'error' || node.error"
+                class="tiny-svg-size fixicon icon-error"
+              ></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])"
+                class="tiny-svg-size fixicon icon-yes"
+              />
+              <component v-else :is="node[autoColorField]" class="fixicons"></component>
+            </template>
           </div>
 
           <!-- 引导线 -->
@@ -100,12 +116,22 @@
         </div>
       </slot>
       <div class="tiny-timeline-item__pillar">
-        <div v-if="shape === 'circle'" class="icon" @click="handleClick(node)">
-          <icon-yes
-            v-if="state.isReverse ? node.index > state.current : node.index < state.current"
-            class="tiny-svg-size"
-          />
-          <span v-else>{{
+        <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]"
+          >
+            <icon-close
+              v-if="node[autoColorField] === 'error' || node.error"
+              class="tiny-svg-size fixicon icon-error"
+            ></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[autoColorField]"
+              class="tiny-svg-size fixicon icon-yes"
+            />
+            <component v-else :is="node[autoColorField]" class="fixicons"></component>
+          </template>
+          <span v-else class="number">{{
             rootProps.showNumber
               ? state.isReverse
                 ? state.nodesLength - 1 - node.index + rootProps.start
@@ -114,7 +140,8 @@
           }}</span>
         </div>
         <div v-else class="dot-container" @click="handleClick(node)">
-          <span class="dot"></span>
+          <component v-if="node[autoColorField]" :is="node[autoColorField]" class="fixicons"></component>
+          <span v-else class="dot"></span>
         </div>
         <div class="line"></div>
       </div>
@@ -131,16 +158,17 @@
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/timeline-item/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
-import { iconYes, iconClose } from '@opentiny/vue-icon'
+import { iconWarn, iconClose, iconYes } from '@opentiny/vue-icon'
 import '@opentiny/vue-theme/steps/index.less'
 import type { ITimelineItemApi } from '@opentiny/vue-renderless/types/timeline-item.type'
 
 export default defineComponent({
   emits: ['click'],
-  props: [...props, 'node', 'space', 'lineWidth', 'shape'],
+  props: [...props, 'node', 'space', 'lineWidth', 'shape', 'autoColorField'],
   components: {
-    IconYes: iconYes(),
-    IconClose: iconClose()
+    IconWarn: iconWarn(),
+    IconClose: iconClose(),
+    IconYes: iconYes()
   },
   setup(props, context) {
     return setup({
diff --git a/packages/vue/src/toast/package.json b/packages/vue/src/toast/package.json
index d3853ea8d..309012ca8 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -18,8 +18,7 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/toggle-menu/package.json b/packages/vue/src/toggle-menu/package.json
index 27e89d842..0f6af6acb 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tooltip/package.json b/packages/vue/src/tooltip/package.json
index eb25021d6..d63c2ef72 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tooltip/src/mobile-first.vue b/packages/vue/src/tooltip/src/mobile-first.vue
index 387191398..0a5b5bfb0 100644
--- a/packages/vue/src/tooltip/src/mobile-first.vue
+++ b/packages/vue/src/tooltip/src/mobile-first.vue
@@ -9,8 +9,7 @@ import {
   mergeClass,
   defineComponent,
   $props,
-  isEmptyVnode,
-  hooks
+  isEmptyVnode
 } from '@opentiny/vue-common'
 import { classes } from './token'
 
@@ -248,11 +247,7 @@ export default defineComponent({
       return element
     }
 
-    let firstElement = getFirstElement()
-
-    if (firstElement && hooks.Fragment && firstElement.type === hooks.Fragment) {
-      firstElement = firstElement.children[0]
-    }
+    const firstElement = getFirstElement()
 
     if (!firstElement) return null
     const data = firstElement.data || firstElement.props || (firstElement.props = {})
diff --git a/packages/vue/src/tooltip/src/pc.vue b/packages/vue/src/tooltip/src/pc.vue
index b5b2427a3..3a0c4e5af 100644
--- a/packages/vue/src/tooltip/src/pc.vue
+++ b/packages/vue/src/tooltip/src/pc.vue
@@ -238,11 +238,7 @@ export default defineComponent({
       return element
     }
 
-    let firstElement = getFirstElement()
-
-    if (firstElement && hooks.Fragment && firstElement.type === hooks.Fragment) {
-      firstElement = firstElement.children[0]
-    }
+    const firstElement = getFirstElement()
 
     if (!firstElement) return null
 
diff --git a/packages/vue/src/top-box/package.json b/packages/vue/src/top-box/package.json
index c7a680e49..6df43a0f3 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/transfer-panel/package.json b/packages/vue/src/transfer-panel/package.json
index 03eb11e24..c22a0f08d 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,11 +17,10 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-checkbox": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
     "@opentiny/vue-pager": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/transfer/package.json b/packages/vue/src/transfer/package.json
index 02cf63679..1dfc07fe5 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,9 +19,8 @@
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-button": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
-    "@opentiny/vue-checkbox": "workspace:~",
     "@opentiny/vue-transfer-panel": "workspace:~",
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tree-menu/package.json b/packages/vue/src/tree-menu/package.json
index 368550c43..955cfdfb7 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,9 +19,8 @@
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-input": "workspace:~",
     "@opentiny/vue-tree": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-theme": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tree/package.json b/packages/vue/src/tree/package.json
index 15f31bde0..bcae0d5a2 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -28,4 +28,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/tree/src/tree-node.vue b/packages/vue/src/tree/src/tree-node.vue
index 6dd07c501..de3f4ca32 100644
--- a/packages/vue/src/tree/src/tree-node.vue
+++ b/packages/vue/src/tree/src/tree-node.vue
@@ -93,6 +93,7 @@
             </span>
           </template>
 
+          <!-- tiny: 去掉 @click.stop的绑定 -->
           <tiny-checkbox
             v-if="showCheckbox"
             :model-value="node.checked"
@@ -101,7 +102,6 @@
             :disabled="!!node.disabled"
             :validate-event="false"
             @change="handleCheckChange"
-            @click.stop="handleClick($event, 'checkbox')"
           >
           </tiny-checkbox>
           <tiny-radio
@@ -233,7 +233,7 @@
 </template>
 
 <script lang="ts">
-import { setup, directive, h, isVue2 } from '@opentiny/vue-common'
+import { setup, directive, h, isVue2, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/tree-node/vue'
 import CollapseTransition from '@opentiny/vue-collapse-transition'
 import {
@@ -250,7 +250,7 @@ import Radio from '@opentiny/vue-radio'
 import Input from '@opentiny/vue-input'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
 
-export default {
+export default defineComponent({
   name: 'TreeNode',
   componentName: 'TreeNode',
   directives: directive({ Clickoutside }),
@@ -366,5 +366,5 @@ export default {
   setup(props, context) {
     return setup({ props, context, renderless, api, mono: true, extendOptions: { isVue2 } })
   }
-}
+})
 </script>
diff --git a/packages/vue/src/upload-dragger/package.json b/packages/vue/src/upload-dragger/package.json
index 49b5e8619..c9674edc0 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -19,4 +19,4 @@
     "@opentiny/vue-common": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/upload-dragger/src/index.ts b/packages/vue/src/upload-dragger/src/index.ts
index 5324e4816..c2c0ced42 100644
--- a/packages/vue/src/upload-dragger/src/index.ts
+++ b/packages/vue/src/upload-dragger/src/index.ts
@@ -1,4 +1,4 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
 export const UploadDraggerProps = {
@@ -7,10 +7,10 @@ export const UploadDraggerProps = {
   customClass: [String, Object, Array]
 }
 
-export default {
+export default defineComponent({
   name: $prefix + 'UploadDragger',
   props: UploadDraggerProps,
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/upload-list/package.json b/packages/vue/src/upload-list/package.json
index c42c22f22..fbd66ede0 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,15 +17,13 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-progress": "workspace:~",
     "@opentiny/vue-tooltip": "workspace:~",
     "@opentiny/vue-button": "workspace:~",
-    "@opentiny/vue-image-viewer": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-modal": "workspace:~",
     "@opentiny/vue-action-sheet": "workspace:~",
     "@opentiny/vue-record": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/upload-list/src/mobile-first.vue b/packages/vue/src/upload-list/src/mobile-first.vue
index 4a9fdfd77..95363dc17 100644
--- a/packages/vue/src/upload-list/src/mobile-first.vue
+++ b/packages/vue/src/upload-list/src/mobile-first.vue
@@ -66,7 +66,7 @@
             >
               <div class="flex h-4" data-tag="tiny-upload-list-name">
                 <div
-                  class="flex-1 sm:mr-6 text-sm sm:text-xs leading-3 sm:leading-3 text-color-text-primary overflow-hidden text-ellipsis whitespace-nowrap"
+                  class="flex-1 sm:mr-6 text-sm sm:text-xs leading-4 sm:leading-4 text-color-text-primary overflow-hidden text-ellipsis whitespace-nowrap"
                 >
                   <span :title="file.name">{{
                     file.name
diff --git a/packages/vue/src/upload/package.json b/packages/vue/src/upload/package.json
index 4a92833be..c8dd714e0 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -21,4 +21,4 @@
     "@opentiny/vue-modal": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/user-account/package.json b/packages/vue/src/user-account/package.json
index 2a81e9488..9248220d9 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/user-contact/package.json b/packages/vue/src/user-contact/package.json
index c69364a3e..0af54451e 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -25,4 +25,4 @@
     "@opentiny/vue-espace": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/user-contact/src/pc.vue b/packages/vue/src/user-contact/src/pc.vue
index 184aabeac..67cc14682 100644
--- a/packages/vue/src/user-contact/src/pc.vue
+++ b/packages/vue/src/user-contact/src/pc.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div class="tiny-user-contact">
     <Popover
@@ -55,13 +56,12 @@
 
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/user-contact/vue'
-import { props, setup } from '@opentiny/vue-common'
+import { props, setup, defineComponent } from '@opentiny/vue-common'
 import UserHead from '@opentiny/vue-user-head'
 import CardTemplate from '@opentiny/vue-card-template'
 import Espace from '@opentiny/vue-espace'
 import Popover from '@opentiny/vue-popover'
 import { IconChevronUp, IconChevronDown } from '@opentiny/vue-icon'
-import { defineComponent } from '@opentiny/vue-common'
 
 export default defineComponent({
   props: [
diff --git a/packages/vue/src/user-head-group/package.json b/packages/vue/src/user-head-group/package.json
index 7007ac115..761daff61 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -13,8 +13,7 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-user-head": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/user-head-group/src/index.ts b/packages/vue/src/user-head-group/src/index.ts
index 584b91824..77c798bd5 100644
--- a/packages/vue/src/user-head-group/src/index.ts
+++ b/packages/vue/src/user-head-group/src/index.ts
@@ -1,7 +1,7 @@
-import { $props, $prefix, $setup } from '@opentiny/vue-common'
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?mobile-first'
 
-export default {
+export default defineComponent({
   name: $prefix + 'UserHeadGroup',
   componentName: 'TinyUserHeadGroup',
   props: {
@@ -28,4 +28,4 @@ export default {
   setup(props, context) {
     return $setup({ props, context, template })
   }
-}
+})
diff --git a/packages/vue/src/user-head/package.json b/packages/vue/src/user-head/package.json
index 270aeb5c8..a57e55352 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -22,4 +22,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/user-link/package.json b/packages/vue/src/user-link/package.json
index 2b6ce1dfe..1a8434524 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/user-link/src/index.ts b/packages/vue/src/user-link/src/index.ts
index a724e877b..502ab113d 100644
--- a/packages/vue/src/user-link/src/index.ts
+++ b/packages/vue/src/user-link/src/index.ts
@@ -46,6 +46,10 @@ export default defineComponent({
     batch: {
       type: [Boolean, Number],
       default: 0
+    },
+    popperAppendToBody: {
+      type: Boolean,
+      default: true
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/user-link/src/pc.vue b/packages/vue/src/user-link/src/pc.vue
index 7ef113fe6..03f0172c6 100644
--- a/packages/vue/src/user-link/src/pc.vue
+++ b/packages/vue/src/user-link/src/pc.vue
@@ -20,6 +20,7 @@
         :visible-arrow="false"
         placement="bottom-start"
         popper-class="tiny-user-card"
+        :append-to-body="popperAppendToBody"
       >
         <template #reference>
           <a @click="showCard($event, user)"
@@ -122,7 +123,8 @@ export default defineComponent({
     'cache',
     'cacheKey',
     'cacheFields',
-    'batch'
+    'batch',
+    'popperAppendToBody'
   ],
   components: {
     TinyPopover,
diff --git a/packages/vue/src/user/package.json b/packages/vue/src/user/package.json
index 3f91db205..aa3540a57 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/watermark/package.json b/packages/vue/src/watermark/package.json
index a930b8ebd..88fc5d8f2 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/wheel/package.json b/packages/vue/src/wheel/package.json
index c00c2880e..6e1d50041 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -17,11 +17,10 @@
   "dependencies": {
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-renderless": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@better-scroll/core": "2.5.0",
     "@better-scroll/wheel": "2.5.0",
     "@opentiny/vue-theme-mobile": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/wizard/package.json b/packages/vue/src/wizard/package.json
index 27dc08b56..8110b0f27 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -23,4 +23,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/year-range/package.json b/packages/vue/src/year-range/package.json
index 1beb4416f..2946f1d1a 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -13,9 +13,8 @@
   "dependencies": {
     "@opentiny/vue-renderless": "workspace:~",
     "@opentiny/vue-common": "workspace:~",
-    "@opentiny/vue-locale": "workspace:~",
     "@opentiny/vue-year-table": "workspace:~",
     "@opentiny/vue-icon": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/year-range/src/pc.vue b/packages/vue/src/year-range/src/pc.vue
index 37a5d64dc..6176356fd 100644
--- a/packages/vue/src/year-range/src/pc.vue
+++ b/packages/vue/src/year-range/src/pc.vue
@@ -16,8 +16,8 @@
           <button
             type="button"
             class="tiny-picker-panel__shortcut"
-            v-for="(shortcut, key) in state.shortcuts"
-            :key="key"
+            v-for="(shortcut, idx) in state.shortcuts"
+            :key="idx"
             @click="handleShortcutClick(shortcut)"
             :title="shortcut.text"
           >
@@ -77,11 +77,10 @@
 
 <script>
 import { renderless, api } from '@opentiny/vue-renderless/year-range/vue'
-import { $prefix, setup, directive, $props } from '@opentiny/vue-common'
+import { $prefix, 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'
-import { defineComponent } from '@opentiny/vue-common'
 
 export default defineComponent({
   name: $prefix + 'YearRange',
diff --git a/packages/vue/src/year-table/package.json b/packages/vue/src/year-table/package.json
index 7592d7bf3..ba1d36303 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.7.0",
+  "version": "3.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
@@ -20,4 +20,4 @@
     "@opentiny/vue-theme": "workspace:~"
   },
   "license": "MIT"
-}
+}
\ No newline at end of file
diff --git a/packages/vue/src/year-table/src/pc.vue b/packages/vue/src/year-table/src/pc.vue
index f27d929ff..7620978ee 100644
--- a/packages/vue/src/year-table/src/pc.vue
+++ b/packages/vue/src/year-table/src/pc.vue
@@ -27,9 +27,7 @@
 <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 } from '@opentiny/vue-common'
-
-import { defineComponent } from '@opentiny/vue-common'
+import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
 
 export default defineComponent({
   name: $prefix + 'YearTable',