@opentinyvue/vue-docs 3.22.0 → 3.22.2

package/demos/pc/app/grid/webdoc/grid-tree-table.js

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'tree-table-set-tree-expansion',
+      demoId: 'tree-table-set-tree-expansion',
       'name': { 'zh-CN': '树节点展开操作', 'en-US': 'Manually expand a specified tree node' },
       'desc': {
         'zh-CN': `
@@ -14,10 +14,10 @@ export default {
         'en-US':
           'You can set <p> <code>setTreeExpansion(rows, checked)</code> to expand the specified tree node. The second parameter specifies whether to expand the row. </p>\n'
       },
-      'codeFiles': ['tree-table/set-tree-expansion.vue']
+      codeFiles: ['tree-table/set-tree-expansion.vue']
     },
     {
-      'demoId': 'tree-table-tree-grid-base',
+      demoId: 'tree-table-tree-grid-base',
       'name': {
         'zh-CN': '自定树节点图标',
         'en-US': 'Data structure with children, Custom Tree Table Expand and Collapse Icon'
@@ -28,10 +28,10 @@ export default {
         'en-US':
           "<p>Configure tree-config=&quot;{children:'children'}&quot; on the grid tab to display data in a tree. In addition, you need to configure the tree-node attribute</p>\n on the field that displays the tree node"
       },
-      'codeFiles': ['tree-table/tree-grid-base.vue']
+      codeFiles: ['tree-table/tree-grid-base.vue']
     },
     {
-      'demoId': 'tree-table-tree-grid-data',
+      demoId: 'tree-table-tree-grid-data',
       'name': { 'zh-CN': '扁平化数据结构', 'en-US': 'Flat Data Structure' },
       'desc': {
         'zh-CN':
@@ -39,20 +39,20 @@ export default {
         'en-US':
           '<p>Note: For a flattened data structure, you need to invoke the aggregateTableData method to convert data into data with sublevels to display the tree table structure.</p>\n'
       },
-      'codeFiles': ['tree-table/tree-grid-data.vue']
+      codeFiles: ['tree-table/tree-grid-data.vue']
     },
     {
-      'demoId': 'tree-table-tree-grid-expand-active-method',
+      demoId: 'tree-table-tree-grid-expand-active-method',
       'name': { 'zh-CN': '自定义树表隐藏行', 'en-US': '' },
       'desc': {
         'zh-CN':
           '<p>表格属性 <code>treeConfig.hideMethod</code> 配置一个方法控制行是否渲染，参数为 <code>row</code> 和 <code>rowLevel</code>，返回 <code>true</code> 则此行隐藏不渲染。</p>\n',
         'en-US': ''
       },
-      'codeFiles': ['tree-table/tree-grid-expand-active-method.vue']
+      codeFiles: ['tree-table/tree-grid-expand-active-method.vue']
     },
     {
-      'demoId': 'tree-table-tree-grid-operation-column',
+      demoId: 'tree-table-tree-grid-operation-column',
       'name': { 'zh-CN': '操作列', 'en-US': 'Operation Column' },
       'desc': {
         'zh-CN':
@@ -60,10 +60,10 @@ export default {
         'en-US':
           'In the <p> column, you can set type=&quot;radio&quot; to enable single selection and type=&quot;selection&quot; to enable multiple selection</p>\n'
       },
-      'codeFiles': ['tree-table/tree-grid-operation-column.vue']
+      codeFiles: ['tree-table/tree-grid-operation-column.vue']
     },
     {
-      'demoId': 'tree-table-tree-grid-index-checkfield',
+      demoId: 'tree-table-tree-grid-index-checkfield',
       'name': { 'zh-CN': '选中关联字段', 'en-US': 'Operation Column' },
       'desc': {
         'zh-CN':
@@ -71,11 +71,11 @@ export default {
         'en-US':
           'In the <p> column, you can set type=&quot;radio&quot; to enable single selection and type=&quot;selection&quot; to enable multiple selection</p>\n'
       },
-      'codeFiles': ['tree-table/tree-grid-index-checkfield.vue']
+      codeFiles: ['tree-table/tree-grid-index-checkfield.vue']
     },
 
     {
-      'demoId': 'tree-table-tree-grid-fixed-column',
+      demoId: 'tree-table-tree-grid-fixed-column',
       'name': { 'zh-CN': '冻结列', 'en-US': 'Frozen Column' },
       'desc': {
         'zh-CN':
@@ -83,10 +83,10 @@ export default {
         'en-US':
           '<p>On the column label, you can set the fixed=&quot;left&quot; attribute to fix the column on the left, and set the fixed=&quot;right&quot; attribute to fix the column on the right</p>\n'
       },
-      'codeFiles': ['tree-table/tree-grid-fixed-column.vue']
+      codeFiles: ['tree-table/tree-grid-fixed-column.vue']
     },
     {
-      'demoId': 'tree-table-has-tree-expand',
+      demoId: 'tree-table-has-tree-expand',
       'name': { 'zh-CN': '检查树节点是否已展开', 'en-US': 'Check whether the tree node is expanded.' },
       'desc': {
         'zh-CN':
@@ -94,10 +94,19 @@ export default {
         'en-US':
           '<p>You can use the <code>hasTreeExpand(row)</code> method to check whether a tree node is expanded. The row parameter indicates the row data object. </p>\n'
       },
-      'codeFiles': ['tree-table/has-tree-expand.vue']
+      codeFiles: ['tree-table/has-tree-expand.vue']
     },
     {
-      'demoId': 'tree-table-tree-grid-index',
+      demoId: 'tree-table-tree-grid-expand',
+      'name': { 'zh-CN': '获取展开的行数据', 'en-US': 'Get the expanded row data' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>getTreeExpandeds</code> 方法可以获取展开的行数据</p>',
+        'en-US': '<p>You can use the <code>getTreeExpandeds</code> method to get the expanded row data</p>'
+      },
+      codeFiles: ['tree-table/tree-table-tree-grid-expand.vue']
+    },
+    {
+      demoId: 'tree-table-tree-grid-index',
       'name': { 'zh-CN': '树表展开序号列配置', 'en-US': 'Expand Row No. Column Configuration' },
       'desc': {
         'zh-CN':
@@ -105,10 +114,10 @@ export default {
         'en-US':
           '<p>In the <code>treeConfig</code> attribute, set <code>ordered</code> to <code>false</code> to expand rows. The sequence number column is sorted by parent-child structure. By default, the <code>ordered</code> attribute is <code>true</code>. After the row is expanded, the sequence number column is sorted by sequence number. </p>\n'
       },
-      'codeFiles': ['tree-table/tree-grid-index.vue']
+      codeFiles: ['tree-table/tree-grid-index.vue']
     },
     {
-      'demoId': 'tree-table-tree-grid-insert-delete-update',
+      demoId: 'tree-table-tree-grid-insert-delete-update',
       'name': { 'zh-CN': '增删改', 'en-US': 'Add, Delete, and Modify' },
       'desc': {
         'zh-CN':
@@ -116,10 +125,10 @@ export default {
         'en-US':
           '<p>Set slot=&quot;toolbar&quot; on the grid-toolbar tab, and configure related operation buttons. Note: To add data, you need to configure the edit-config text box on the grid tab. In addition, the component instance invokes methods through ref to perform related operations. findTree and filterTree are search and filter methods in the tool class. Due to the special structure of tree data, the <code>getInsertRecords</code> and <code>getRecordset</code> methods of the grid cannot obtain new data. Such data needs to be processed by users. </p>\n'
       },
-      'codeFiles': ['tree-table/tree-grid-insert-delete-update.vue']
+      codeFiles: ['tree-table/tree-grid-insert-delete-update.vue']
     },
     {
-      'demoId': 'tree-table-tree-grid-keyboard-operation',
+      demoId: 'tree-table-tree-grid-keyboard-operation',
       'name': { 'zh-CN': '键盘操作', 'en-US': 'Keyboard operation' },
       'desc': {
         'zh-CN': `
@@ -137,7 +146,7 @@ export default {
         'en-US':
           '<p>Move the highlighted row, set stripe to false, highlight-hover-row to false, and highlight-current-row to false. Configure the keyboard-config={isArrow: true} attribute to enable the arrow keys function.\n | Arrow Up | Move to the previous line of the highlighted line\n | Arrow Down | Move to the next line of the highlighted line\n | Enter | Expand the node. Enter the child node\n | Backspace | Close the node and return to the parent node</p>\n'
       },
-      'codeFiles': ['tree-table/tree-grid-keyboard-operation.vue']
+      codeFiles: ['tree-table/tree-grid-keyboard-operation.vue']
     }
   ],
   apis: [{ 'name': 'grid-tree-table', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

package/demos/pc/app/grid/webdoc/grid-validation.js

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'validation-editing-validation',
+      demoId: 'validation-editing-validation',
       'name': { 'zh-CN': '编辑时校验', 'en-US': 'Verify during editing' },
       'desc': {
         'zh-CN':
@@ -11,10 +11,10 @@ export default {
         'en-US':
           'The <p>grid tag configures the edit-config object, and configures the edit-rules object to set the validation object and validation rule. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['validation/editing-validation.vue']
+      codeFiles: ['validation/editing-validation.vue']
     },
     {
-      'demoId': 'validation-editing-isvalidalways-validation',
+      demoId: 'validation-editing-isvalidalways-validation',
       'name': { 'zh-CN': '常显编辑器校验', 'en-US': 'Verify hidden columns during editing' },
       'desc': {
         'zh-CN':
@@ -22,10 +22,10 @@ export default {
         'en-US':
           '<p>When the edit-config object is configured for the grid tag, type is set to visible, and isValidAlways is configured for the column, that is, the column is always editable, verification during editing is supported. Configure the edit-rules object to set the verification object and verification rule. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['validation/editing-isvalidalways-validation.vue']
+      codeFiles: ['validation/editing-isvalidalways-validation.vue']
     },
     {
-      'demoId': 'validation-row-data-valid',
+      demoId: 'validation-row-data-valid',
       'name': { 'zh-CN': '数据关联校验', 'en-US': 'Data Association Verification' },
       'desc': {
         'zh-CN':
@@ -33,10 +33,10 @@ export default {
         'en-US':
           '<p> During customized validation, the <code>validator</code> method <code>rule</code> parameter can obtain the current row and column information. The verification logic of data association can be implemented based on service requirements.</p>\n'
       },
-      'codeFiles': ['validation/row-data-valid.vue']
+      codeFiles: ['validation/row-data-valid.vue']
     },
     {
-      'demoId': 'validation-custcomp',
+      demoId: 'validation-custcomp',
       'name': {
         'zh-CN': '自定义组件校验',
         'en-US': 'Verify the customized component with the slot editor'
@@ -47,10 +47,10 @@ export default {
         'en-US':
           '<p>When using a custom component, the component needs to implement the <code>v-model</code> function. If you want to verify the slot in real time, you need to manually trigger the verification method of the component.</p>\n'
       },
-      'codeFiles': ['validation/custcomp.vue']
+      codeFiles: ['validation/custcomp.vue']
     },
     {
-      'demoId': 'validation-select-validation',
+      demoId: 'validation-select-validation',
       'name': { 'zh-CN': '选中时校验', 'en-US': 'Verify when selected' },
       'desc': {
         'zh-CN':
@@ -58,10 +58,10 @@ export default {
         'en-US':
           'The <p>grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['validation/select-validation.vue']
+      codeFiles: ['validation/select-validation.vue']
     },
     {
-      'demoId': 'validation-before-submit-validation',
+      demoId: 'validation-before-submit-validation',
       'name': { 'zh-CN': '提交前校验', 'en-US': 'Verify Before Submission' },
       'desc': {
         'zh-CN':
@@ -69,10 +69,10 @@ export default {
         'en-US':
           'The <p>grid tag configures the edit-config object, configures the edit-rules object to set the validation object and validation rule, and invokes the this.$refs.basicGrid.validate() method to trigger table validation through the button click event. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['validation/before-submit-validation.vue']
+      codeFiles: ['validation/before-submit-validation.vue']
     },
     {
-      'demoId': 'validation-bubbling',
+      demoId: 'validation-bubbling',
       'name': {
         'zh-CN': '校验提示跟随单元格移动',
         'en-US': 'When the verification is triggered, the current verification cell is automatically located.'
@@ -83,10 +83,10 @@ export default {
         'en-US':
           '<p>The grid editor introduces the tiny.0 component, configures the edit-config object in the tag, and configures the edit-rules object to set the verification object and verification rule. Invoke the this.$refs.basicGrid.validate() method through the button click event to trigger table validation. For details, see the following example. </p>\n'
       },
-      'codeFiles': ['validation/bubbling.vue']
+      codeFiles: ['validation/bubbling.vue']
     },
     {
-      'demoId': 'validation-validation-scroll-to-col',
+      demoId: 'validation-validation-scroll-to-col',
       'name': { 'zh-CN': '触发校验时自动定位到当前校验的单元格', 'en-US': 'Error prompt configuration item' },
       'desc': {
         'zh-CN':
@@ -94,36 +94,36 @@ export default {
         'en-US':
           '<p>The default error message is displayed on <code>body</code>. You can set <code>appendTobody</code> in <code>tooltip-config</code> to <code>false</code> to solve the problem that the tip position is incorrect during page scrolling. Set the <code>placement</code> property to adjust the default display direction. For details about the <code>tooltip-config</code> configuration, see the tooltip component</p>\n'
       },
-      'codeFiles': ['validation/validation-scroll-to-col.vue']
+      codeFiles: ['validation/validation-scroll-to-col.vue']
     },
     {
-      'demoId': 'validation-tipconfig',
+      demoId: 'validation-tipconfig',
       'name': { 'zh-CN': '错误提示配置项', 'en-US': '' },
       'desc': {
         'zh-CN':
           '<p>表格默认错误提示挂载在 <code>body</code> 上，可以通过设置 <code>tooltip-config</code> 的 <code>appendTobody</code> 设置为 <code>false</code> 来解决页面滚动时 tip 位置错误的问题。设置 <code>placement</code> 属性调整默认显示方向。<code>tooltip-config</code> 的配置可参考 tooltip 组件。</p>\n',
         'en-US': ''
       },
-      'codeFiles': ['validation/tipconfig.vue']
+      codeFiles: ['validation/tipconfig.vue']
     },
     {
-      'demoId': 'validation-asterisk-method',
+      demoId: 'validation-asterisk-method',
       'name': { 'zh-CN': '隐藏必填星号', 'en-US': '' },
       'desc': {
         'zh-CN':
           '<p>通过表格属性 <code>editRules</code> 可以配置表格的编辑规则，如果指定某一字段的 <code>required</code> 为 <code>true</code>，就会在表头显示必填星号。如果想要隐藏掉必填星号，可以通过表格属性 <code>validConfig</code> 配置一个方法 <code>asteriskMethod</code> 来控制，返回 <code>false</code> 则隐藏。参考示例：</p>\n',
         'en-US': ''
       },
-      'codeFiles': ['validation/asterisk-method.vue']
+      codeFiles: ['validation/asterisk-method.vue']
     },
     {
-      'demoId': 'valid-config',
+      demoId: 'valid-config',
       'name': { 'zh-CN': '行内校验', 'en-US': '' },
       'desc': {
         'zh-CN': `<p>配置 <code>validConfig.message</code> 为 <code>'inline'</code> 开启行内校验。</p>\n`,
         'en-US': ''
       },
-      'codeFiles': ['validation/valid-config.vue']
+      codeFiles: ['validation/valid-config.vue']
     }
   ],
   apis: [{ 'name': 'grid-validation', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]

package/demos/pc/app/grid/webdoc/grid.js

@@ -1,6 +1,8 @@
 export default {
   column: '1',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'base-basic-usage',
@@ -26,5 +28,163 @@ export default {
       },
       codeFiles: ['base/basic-usage-conf.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '支持标签式和配置式两种方式配置表格列，支持自定义表头和对齐方式。',
+      cloud: {
+        value: true
+      },
+      apis: ['tiny-grid-column', 'columns', 'header-align', 'align'],
+      demos: ['base-basic-usage', 'base-basic-usage-conf', 'header-custom-grid-header', 'align-grid-align']
+    },
+    {
+      id: 'edit',
+      name: '编辑功能',
+      support: {
+        value: true
+      },
+      description: '支持单元格编辑和行编辑两种模式，可自定义编辑规则、校验规则和编辑器组件。',
+      cloud: {
+        value: true
+      },
+      apis: ['edit-config', 'edit-rules', 'editor', 'activeMethod'],
+      demos: ['edit-editing', 'edit-custom-editing', 'edit-editor-is-valid-always', 'editor-custom-editor-select']
+    },
+    {
+      id: 'filter',
+      name: '过滤功能',
+      support: {
+        value: true
+      },
+      description: '支持默认过滤、动态过滤、服务端过滤、简化版过滤等多种过滤方式，可自定义过滤规则。',
+      cloud: {
+        value: true
+      },
+      apis: ['filter', 'remote-filter', 'inputFilter', 'enumable'],
+      demos: ['filter-default-filter', 'filter-server-filter', 'filter-simple-filter', 'filter-advanced-filter']
+    },
+    {
+      id: 'sort',
+      name: '排序功能',
+      support: {
+        value: true
+      },
+      description: '支持默认排序、多字段组合排序、自定义排序和服务端排序，可配置排序方法和触发方式。',
+      cloud: {
+        value: true
+      },
+      apis: ['sortable', 'sort-method', 'remote-sort', 'sort-by'],
+      demos: ['sort-default-sort', 'sort-server-sort', 'sort-combinations-sort', 'sort-custom-sort']
+    },
+    {
+      id: 'expand',
+      name: '展开功能',
+      support: {
+        value: true
+      },
+      description: '支持行展开、嵌套表格、展开行配置等功能，可自定义展开内容和展开规则。',
+      cloud: {
+        value: true
+      },
+      apis: ['expand-config', 'expand-method', 'showIcon'],
+      demos: ['expand-has-row-expand', 'expand-nested-grid', 'expand-expand-config']
+    },
+    {
+      id: 'custom',
+      name: '个性化设置',
+      support: {
+        value: true
+      },
+      description: '支持列宽调整、列显示隐藏、列排序、列冻结等个性化设置，可保存到本地或服务端。',
+      cloud: {
+        value: true
+      },
+      apis: ['setting', 'resizable', 'sortable', 'fixed'],
+      demos: ['custom-column-width', 'custom-column-visible-hidden', 'custom-column-sort', 'custom-column-fixed']
+    },
+    {
+      id: 'footer',
+      name: '表尾功能',
+      support: {
+        value: true
+      },
+      description: '支持表尾统计、配置式统计、表尾合并等功能，可自定义统计规则和显示方式。',
+      cloud: {
+        value: true
+      },
+      apis: ['footer-method', 'show-footer', 'summary-config'],
+      demos: ['footer-footer-summation-empty', 'footer-configuration-summary', 'footer-footer-row-or-column-span']
+    },
+    {
+      id: 'loading',
+      name: '加载状态',
+      support: {
+        value: true
+      },
+      description: '支持自定义表格加载状态，可配置加载提示和加载组件。',
+      cloud: {
+        value: true
+      },
+      apis: ['loading', 'loadingComponent'],
+      demos: ['loading-grid-custom-loading', 'loading-grid-loading-tip']
+    },
+    {
+      id: 'span',
+      name: '合并功能',
+      support: {
+        value: true
+      },
+      description: '支持行合并和列合并，可自定义合并规则和合并方法。',
+      cloud: {
+        value: true
+      },
+      apis: ['span-method', 'row-span'],
+      demos: ['span-row-span', 'span-column-span']
+    },
+    {
+      id: 'fixed',
+      name: '固定功能',
+      support: {
+        value: true
+      },
+      description: '支持列固定、分组表头固定等功能，可配置固定位置和固定方式。',
+      cloud: {
+        value: true
+      },
+      apis: ['fixed', 'drop-config'],
+      demos: ['fixed-left-fixed', 'fixed-right-fixed', 'fixed-multi-column-fixed', 'group-header-fixed']
+    },
+    {
+      id: 'drag',
+      name: '拖拽功能',
+      support: {
+        value: true
+      },
+      description: '支持行拖拽、列拖拽、多级表头拖拽等功能，可自定义拖拽规则和触发方式。',
+      cloud: {
+        value: true
+      },
+      apis: ['drop-config', 'trigger', 'filter'],
+      demos: ['drag-row-drag', 'drag-column-drag', 'multi-header-drag']
+    },
+    {
+      id: 'empty',
+      name: '空数据',
+      support: {
+        value: true
+      },
+      description: '支持自定义空数据提示、默认提示和固定居中显示等功能。',
+      cloud: {
+        value: true
+      },
+      apis: ['render-empty', 'is-center-empty'],
+      demos: ['empty-empty-data-tip', 'empty-empty-data-iscenter']
+    }
   ]
 }

package/demos/pc/app/guide/webdoc/guide.js

@@ -1,6 +1,8 @@
 export default {
   column: '2',
   owner: '',
+  show: true,
+  cloud: true,
   demos: [
     {
       demoId: 'basic-usage',
@@ -115,5 +117,113 @@ export default {
       },
       codeFiles: ['callback.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基础用法',
+      support: {
+        value: true
+      },
+      description: '通过 dom-data 设置每一个步骤要显示的内容，show-step 设置为 true 即可开启指引。',
+      cloud: {
+        value: true
+      },
+      apis: ['dom-data', 'show-step'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'arrow-position',
+      name: '箭头位置',
+      support: {
+        value: true
+      },
+      description:
+        '通过 pop-position 属性设置箭头位置，若存在多个步骤，可以在 dom-data 里面添加 popPosition 属性并赋值。',
+      cloud: {
+        value: true
+      },
+      apis: ['pop-position'],
+      demos: ['arrow-position']
+    },
+    {
+      id: 'content',
+      name: '内容展示',
+      support: {
+        value: true
+      },
+      description: '支持纯段落用户引导、图文结合用户引导等多种内容展示方式。',
+      cloud: {
+        value: true
+      },
+      apis: ['only-content', 'text'],
+      demos: ['only-content', 'image-text']
+    },
+    {
+      id: 'highlight',
+      name: '高亮配置',
+      support: {
+        value: true
+      },
+      description: '通过 hightBox 属性添加需要高亮的元素，支持多处高亮。',
+      cloud: {
+        value: true
+      },
+      apis: ['hightBox'],
+      demos: ['highlight-box']
+    },
+    {
+      id: 'offset',
+      name: '偏移配置',
+      support: {
+        value: true
+      },
+      description: '通过 main-axis、cross-axis、alignment-axis 设置纵轴、横轴和对齐轴的偏移量。',
+      cloud: {
+        value: true
+      },
+      apis: ['main-axis', 'cross-axis', 'alignment-axis'],
+      demos: ['offset']
+    },
+    {
+      id: 'size',
+      name: '尺寸配置',
+      support: {
+        value: true
+      },
+      description: '通过 width 和 height 来自定义宽高。',
+      cloud: {
+        value: true
+      },
+      apis: ['width', 'height'],
+      demos: ['size']
+    },
+    {
+      id: 'modal',
+      name: '模态层配置',
+      support: {
+        value: true
+      },
+      description:
+        '通过 modal-overlay-opening-padding 和 modal-overlay-opening-radius 配置模态叠加层开口的填充量和边界半径。',
+      cloud: {
+        value: true
+      },
+      apis: ['modal-overlay-opening-padding', 'modal-overlay-opening-radius'],
+      demos: ['modal-overlay-opening']
+    },
+    {
+      id: 'events',
+      name: '事件回调',
+      support: {
+        value: true
+      },
+      description: '支持在 dom-data 中配置各种事件回调。',
+      cloud: {
+        value: true
+      },
+      apis: ['events'],
+      demos: ['callback']
+    }
   ]
 }

package/demos/pc/app/icon/list-composition-api.vue

@@ -17,7 +17,7 @@
             @click="click(name)"
           >
             <component :is="Svgs[name] && Svgs[name]()" class="svgs-icon"></component>
-            <span class="svgs-text">{{ name }}</span>
+            <span class="svgs-text" :title="name">{{ name }}</span>
           </div>
         </template>
       </div>
@@ -105,12 +105,7 @@ function click(name) {
 }
 
 .svgs-item:hover {
-  background-color: #f6f8fa;
-  color: #191919;
-}
-
-.svgs-item:hover .svgs-icon {
-  fill: #191919;
+  background-color: var(--tv-color-bg-hover);
 }
 
 .svgs-text {
@@ -118,6 +113,8 @@ function click(name) {
   display: block;
   font-size: 12px;
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .svgs-box:has(> .svg-visible) .group-name {

package/demos/pc/app/icon/list.vue

@@ -17,7 +17,7 @@
             @click="click(name)"
           >
             <component :is="Svgs[name] && Svgs[name]()" class="svgs-icon"></component>
-            <span class="svgs-text">{{ name }}</span>
+            <span class="svgs-text" :title="name">{{ name }}</span>
           </div>
         </template>
       </div>
@@ -116,12 +116,7 @@ export default {
 }
 
 .svgs-item:hover {
-  background-color: #f6f8fa;
-  color: #191919;
-}
-
-.svgs-item:hover .svgs-icon {
-  fill: #191919;
+  background-color: var(--tv-color-bg-hover);
 }
 
 .svgs-text {
@@ -129,6 +124,8 @@ export default {
   display: block;
   font-size: 12px;
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .svgs-box:has(> .svg-visible) .group-name {