From 250f67ceac31903c78064566e708e7e2be7dbda0 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Tue, 18 Mar 2025 18:16:54 +0800
Subject: [PATCH] docs: optimize features of popconfirm/popeditor/rate and so
 on

---
 .../pc/app/popconfirm/webdoc/popconfirm.js    | 93 +++++++++++++++++++
 .../pc/app/popeditor/webdoc/popeditor.js      | 54 +++++++++++
 .../sites/demos/pc/app/radio/webdoc/radio.js  | 54 +++++++++++
 .../sites/demos/pc/app/rate/webdoc/rate.js    | 54 +++++++++++
 .../pc/app/scroll-text/webdoc/scroll-text.js  | 54 +++++++++++
 .../demos/pc/app/search/webdoc/search.js      | 54 +++++++++++
 .../demos/pc/app/select/webdoc/select.js      | 54 +++++++++++
 .../demos/pc/app/skeleton/webdoc/skeleton.js  | 54 +++++++++++
 .../demos/pc/app/slider/webdoc/slider.js      | 54 +++++++++++
 .../sites/demos/pc/app/split/webdoc/split.js  | 54 +++++++++++
 .../pc/app/statistic/webdoc/statistic.js      | 54 +++++++++++
 .../sites/demos/pc/app/steps/webdoc/steps.js  | 55 +++++++++++
 .../demos/pc/app/sticky/webdoc/sticky.js      | 55 +++++++++++
 .../demos/pc/app/switch/webdoc/switch.js      | 54 +++++++++++
 .../sites/demos/pc/app/tabs/webdoc/tabs.js    | 56 ++++++++++-
 .../pc/app/tag-group/webdoc/tag-group.js      | 55 +++++++++++
 examples/sites/demos/pc/app/tag/webdoc/tag.js | 56 +++++++++++
 .../pc/app/text-popup/webdoc/text-popup.js    | 54 +++++++++++
 .../pc/app/time-line/webdoc/time-line.js      | 54 +++++++++++
 .../pc/app/time-picker/webdoc/time-picker.js  | 54 +++++++++++
 .../pc/app/time-select/webdoc/time-select.js  | 54 +++++++++++
 .../demos/pc/app/tooltip/webdoc/tooltip.js    | 54 +++++++++++
 .../demos/pc/app/transfer/webdoc/transfer.js  | 54 +++++++++++
 .../pc/app/tree-menu/webdoc/tree-menu.js      | 54 +++++++++++
 .../app/user-contact/webdoc/user-contact.js   | 54 +++++++++++
 .../pc/app/user-head/webdoc/user-head.js      | 54 +++++++++++
 .../webdoc/virtual-scroll-box.js              | 28 ++++++
 .../app/virtual-tree/webdoc/virtual-tree.js   | 28 ++++++
 .../pc/app/watermark/webdoc/watermark.js      | 28 ++++++
 .../demos/pc/app/wizard/webdoc/wizard.js      | 56 ++++++++++-
 30 files changed, 1588 insertions(+), 2 deletions(-)

diff --git a/examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js b/examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js
index ea0cbe042e..acb2efe91a 100644
--- a/examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js
+++ b/examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js
@@ -116,5 +116,98 @@ export default {
       },
       codeFiles: ['event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 title 设置标题内容，message 设置正文内容，通过 reference 插槽自定义触发显示的元素。',
+      cloud: {
+        value: true
+      },
+      apis: ['title', 'message', 'reference'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'trigger',
+      name: '触发方式',
+      support: {
+        value: true
+      },
+      description: '通过 trigger 设置触发显示气泡确认框的方式。',
+      cloud: {
+        value: true
+      },
+      apis: ['trigger'],
+      demos: ['trigger']
+    },
+    {
+      id: 'type',
+      name: '图标类型',
+      support: {
+        value: true
+      },
+      description: '通过 type 设置提示的图标类型，或者传入自定义图标。',
+      cloud: {
+        value: true
+      },
+      apis: ['type'],
+      demos: ['type']
+    },
+    {
+      id: 'placement',
+      name: '显示位置',
+      support: {
+        value: true
+      },
+      description: '通过 placement 设置提示框显示位置。',
+      cloud: {
+        value: true
+      },
+      apis: ['placement'],
+      demos: ['placement']
+    },
+    {
+      id: 'custom',
+      name: '自定义配置',
+      support: {
+        value: true
+      },
+      description: '支持自定义类名、宽度、取消按钮显示等配置。',
+      cloud: {
+        value: true
+      },
+      apis: ['custom-class', 'width', 'cancel-button'],
+      demos: ['custom-class', 'width', 'cancel-button']
+    },
+    {
+      id: 'slots',
+      name: '插槽',
+      support: {
+        value: true
+      },
+      description: '通过 footer 插槽自定义底部内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['footer'],
+      demos: ['slot-footer']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 show、hide、confirm 等事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['show', 'hide', 'confirm'],
+      demos: ['event']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
index 4a3b506f7d..8a7cccba02 100644
--- a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
+++ b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
@@ -503,5 +503,59 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 绑定变量，变量值对应 label 属性的值。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用单选框。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['dynamic-disable']
+    },
+    {
+      id: 'vertical',
+      name: '垂直布局',
+      support: {
+        value: true
+      },
+      description: '可在 radio-group 组件上设置 vertical 属性，使单选框垂直布局。',
+      cloud: {
+        value: true
+      },
+      apis: ['vertical'],
+      demos: ['vertical']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '可对按钮形式的 radio 设置 size 属性，以改变其尺寸，可选值有：medium、small、mini。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['radio-size']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/radio/webdoc/radio.js b/examples/sites/demos/pc/app/radio/webdoc/radio.js
index a4de154f13..e1ba64cf4c 100644
--- a/examples/sites/demos/pc/app/radio/webdoc/radio.js
+++ b/examples/sites/demos/pc/app/radio/webdoc/radio.js
@@ -151,5 +151,59 @@ export default {
       },
       codeFiles: ['display-only.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 绑定变量，变量值对应 label 属性的值。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model', 'label'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'group',
+      name: '单选框组',
+      support: {
+        value: true
+      },
+      description: 'radio-group 可以将 radio 或者 radio-button 组合起来，通过 v-model 绑定选中的值。',
+      cloud: {
+        value: true
+      },
+      apis: ['radio-group', 'v-model'],
+      demos: ['radio-group']
+    },
+    {
+      id: 'options',
+      name: '单选组',
+      support: {
+        value: true
+      },
+      description: '通过 options 配置式渲染单选组，type 属性可以配置为 button，配置后单选组将以按钮的形式展示。',
+      cloud: {
+        value: true
+      },
+      apis: ['options', 'type'],
+      demos: ['group-options']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用单选框。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['dynamic-disable']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/rate/webdoc/rate.js b/examples/sites/demos/pc/app/rate/webdoc/rate.js
index f9844899bd..e84e5ca67d 100644
--- a/examples/sites/demos/pc/app/rate/webdoc/rate.js
+++ b/examples/sites/demos/pc/app/rate/webdoc/rate.js
@@ -215,5 +215,59 @@ export default {
       },
       codeFiles: ['rate-events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 绑定变量，变量值对应评分值。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用评分组件。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置评分组件的尺寸大小。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'max',
+      name: '最大值',
+      support: {
+        value: true
+      },
+      description: '通过 max 设置评分组件的最大值。',
+      cloud: {
+        value: true
+      },
+      apis: ['max'],
+      demos: ['max']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/scroll-text/webdoc/scroll-text.js b/examples/sites/demos/pc/app/scroll-text/webdoc/scroll-text.js
index e145fefd38..32fbb53e52 100644
--- a/examples/sites/demos/pc/app/scroll-text/webdoc/scroll-text.js
+++ b/examples/sites/demos/pc/app/scroll-text/webdoc/scroll-text.js
@@ -77,5 +77,59 @@ export default {
       },
       codeFiles: ['slots.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '可通过 text 自定义文本内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['text'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'direction',
+      name: '滚动方向',
+      support: {
+        value: true
+      },
+      description: '可通过 direction 设置文字滚动方向。',
+      cloud: {
+        value: true
+      },
+      apis: ['direction'],
+      demos: ['scroll-direction']
+    },
+    {
+      id: 'hover-stop',
+      name: '悬停停止',
+      support: {
+        value: true
+      },
+      description: '可通过 hover-stop 设鼠标悬停时文本是否停止滚动。',
+      cloud: {
+        value: true
+      },
+      apis: ['hover-stop'],
+      demos: ['hover-stop']
+    },
+    {
+      id: 'time',
+      name: '滚动时间',
+      support: {
+        value: true
+      },
+      description: '可通过 time 设置滚动时间间隔。',
+      cloud: {
+        value: true
+      },
+      apis: ['time'],
+      demos: ['scroll-time']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/search/webdoc/search.js b/examples/sites/demos/pc/app/search/webdoc/search.js
index c5821f5f11..b0362fdc7a 100644
--- a/examples/sites/demos/pc/app/search/webdoc/search.js
+++ b/examples/sites/demos/pc/app/search/webdoc/search.js
@@ -119,5 +119,59 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 设置双向绑定搜索值，placeholder 设置默认占位符文本。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model', 'placeholder'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'clearable',
+      name: '可清除',
+      support: {
+        value: true
+      },
+      description: '通过 clearable 设置显示清空图标按钮。',
+      cloud: {
+        value: true
+      },
+      apis: ['clearable'],
+      demos: ['clearable']
+    },
+    {
+      id: 'mini',
+      name: '迷你模式',
+      support: {
+        value: true
+      },
+      description: '通过 mini 设置为 mini 模式。',
+      cloud: {
+        value: true
+      },
+      apis: ['mini'],
+      demos: ['mini-mode']
+    },
+    {
+      id: 'search-types',
+      name: '搜索类型',
+      support: {
+        value: true
+      },
+      description: '通过 search-types 设置可选的搜索类型，type-value 设置搜索类型的默认值。',
+      cloud: {
+        value: true
+      },
+      apis: ['search-types', 'type-value'],
+      demos: ['search-types']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/select/webdoc/select.js b/examples/sites/demos/pc/app/select/webdoc/select.js
index 7c1bccc135..707165a933 100644
--- a/examples/sites/demos/pc/app/select/webdoc/select.js
+++ b/examples/sites/demos/pc/app/select/webdoc/select.js
@@ -662,5 +662,59 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 绑定变量，placeholder 设置占位符文本。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model', 'placeholder'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'options',
+      name: '选项配置',
+      support: {
+        value: true
+      },
+      description: '通过 options 属性配置选项数据，支持禁用、分组等配置。',
+      cloud: {
+        value: true
+      },
+      apis: ['options'],
+      demos: ['options']
+    },
+    {
+      id: 'multiple',
+      name: '多选',
+      support: {
+        value: true
+      },
+      description: '通过 multiple 属性启用多选模式，可设置最大选择数量。',
+      cloud: {
+        value: true
+      },
+      apis: ['multiple', 'max-collapse-tags'],
+      demos: ['multiple']
+    },
+    {
+      id: 'filterable',
+      name: '可搜索',
+      support: {
+        value: true
+      },
+      description: '通过 filterable 属性启用搜索功能，可自定义搜索方法。',
+      cloud: {
+        value: true
+      },
+      apis: ['filterable', 'filter-method'],
+      demos: ['filterable']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js
index 5447c179f4..3be7b463fd 100644
--- a/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js
+++ b/examples/sites/demos/pc/app/skeleton/webdoc/skeleton.js
@@ -120,5 +120,59 @@ export default {
       },
       codeFiles: ['fine-grained-mode.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '基础的骨架效果。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['base']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 属性可以控制骨架屏的尺寸。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'avatar',
+      name: '头像模式',
+      support: {
+        value: true
+      },
+      description: '通过 avatar 属性控制骨架段落左侧出现头像占位。',
+      cloud: {
+        value: true
+      },
+      apis: ['avatar'],
+      demos: ['complex-demo']
+    },
+    {
+      id: 'rows',
+      name: '段落行数',
+      support: {
+        value: true
+      },
+      description: '段落默认渲染 4 行，通过 rows 属性控制段落行数。',
+      cloud: {
+        value: true
+      },
+      apis: ['rows'],
+      demos: ['custom-rows']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/slider/webdoc/slider.js b/examples/sites/demos/pc/app/slider/webdoc/slider.js
index b8cc49b11f..654a875ec5 100644
--- a/examples/sites/demos/pc/app/slider/webdoc/slider.js
+++ b/examples/sites/demos/pc/app/slider/webdoc/slider.js
@@ -167,5 +167,59 @@ export default {
       },
       codeFiles: ['slider-event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '基础的滑块效果。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'vertical',
+      name: '竖向模式',
+      support: {
+        value: true
+      },
+      description: '通过设置 vertical 属性来展示滑块竖向模式。',
+      cloud: {
+        value: true
+      },
+      apis: ['vertical'],
+      demos: ['vertical-mode']
+    },
+    {
+      id: 'marks',
+      name: '标记',
+      support: {
+        value: true
+      },
+      description: '使用 marks 属性，给滑杆的值添加标记。',
+      cloud: {
+        value: true
+      },
+      apis: ['marks'],
+      demos: ['marks']
+    },
+    {
+      id: 'range',
+      name: '范围选择',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 为数组设定初始范围选择。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['range-select']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/split/webdoc/split.js b/examples/sites/demos/pc/app/split/webdoc/split.js
index 26c92a8bb4..e9569c4d05 100644
--- a/examples/sites/demos/pc/app/split/webdoc/split.js
+++ b/examples/sites/demos/pc/app/split/webdoc/split.js
@@ -203,5 +203,59 @@ export default {
       },
       codeFiles: ['three-areas.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '支持左右或上下分割面板，可设置最小高度和宽度。',
+      cloud: {
+        value: false
+      },
+      apis: ['left-top-min', 'right-bottom-min'],
+      demos: ['basic-usage', 'split-threshold']
+    },
+    {
+      id: 'mode',
+      name: '分割方式',
+      support: {
+        value: true
+      },
+      description: '支持横向和纵向两种分割方式，默认为横向。',
+      cloud: {
+        value: false
+      },
+      apis: ['mode'],
+      demos: ['split-mode']
+    },
+    {
+      id: 'event',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持移动开始、移动中、移动结束等事件。',
+      cloud: {
+        value: false
+      },
+      apis: ['movestart', 'moving', 'moveend'],
+      demos: ['movestart-event', 'moving-event', 'moveend-event']
+    },
+    {
+      id: 'custom',
+      name: '自定义',
+      support: {
+        value: true
+      },
+      description: '支持自定义左右面板、拖拽区域和折叠按钮。',
+      cloud: {
+        value: false
+      },
+      apis: ['slots'],
+      demos: ['left-right-slot', 'trigger-slot', 'trigger-simple']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/statistic/webdoc/statistic.js b/examples/sites/demos/pc/app/statistic/webdoc/statistic.js
index 81bbaff51a..d62cfbb3c1 100644
--- a/examples/sites/demos/pc/app/statistic/webdoc/statistic.js
+++ b/examples/sites/demos/pc/app/statistic/webdoc/statistic.js
@@ -52,5 +52,59 @@ export default {
       },
       codeFiles: ['statistic-style.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 value 设置数字内容，precision 设置数字精度值。',
+      cloud: {
+        value: true
+      },
+      apis: ['value', 'precision'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'prefix-suffix',
+      name: '前后缀',
+      support: {
+        value: true
+      },
+      description: 'prefix 设置前缀，suffix 设置后缀。',
+      cloud: {
+        value: true
+      },
+      apis: ['prefix', 'suffix'],
+      demos: ['prefix-suffix-slot']
+    },
+    {
+      id: 'title',
+      name: '标题',
+      support: {
+        value: true
+      },
+      description: '通过 title 设置标题。',
+      cloud: {
+        value: true
+      },
+      apis: ['title'],
+      demos: ['statistic-slot']
+    },
+    {
+      id: 'style',
+      name: '样式',
+      support: {
+        value: true
+      },
+      description: '通过 value-style 设置数字样式。',
+      cloud: {
+        value: true
+      },
+      apis: ['value-style'],
+      demos: ['statistic-style']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/steps/webdoc/steps.js b/examples/sites/demos/pc/app/steps/webdoc/steps.js
index dcabb2fcda..0a4a67d02e 100644
--- a/examples/sites/demos/pc/app/steps/webdoc/steps.js
+++ b/examples/sites/demos/pc/app/steps/webdoc/steps.js
@@ -159,5 +159,60 @@ export default {
       },
       codeFiles: ['click.vue']
     }
+  ],
+  features: [
+    {
+      id: 'line',
+      name: '单链型',
+      support: {
+        value: true
+      },
+      description: '通过添加 line 用作横向单链型步骤条，visible-num 控制信息可见的节点数。',
+      cloud: {
+        value: true
+      },
+      apis: ['line', 'visible-num'],
+      demos: ['line-horizontal']
+    },
+    {
+      id: 'vertical',
+      name: '垂直布局',
+      support: {
+        value: true
+      },
+      description: '使用 line 与 vertical 设置为条形步骤条。',
+      cloud: {
+        value: true
+      },
+      apis: ['vertical'],
+      demos: ['line-vertical']
+    },
+    {
+      id: 'dot',
+      name: '点状型',
+      support: {
+        value: true
+      },
+      description: '使用 dot 与 vertical 设置为垂直点状形。',
+      cloud: {
+        value: true
+      },
+      apis: ['dot'],
+      demos: ['line-dot']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description:
+        '步骤条两种模式支持 size 设置尺寸：line 单链型模式支持 mini、small、medium、large 4 种尺寸，advanced 高级向导模式支持 medium、large 2 种尺寸。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/sticky/webdoc/sticky.js b/examples/sites/demos/pc/app/sticky/webdoc/sticky.js
index 3a44711f3c..50cfdf407e 100644
--- a/examples/sites/demos/pc/app/sticky/webdoc/sticky.js
+++ b/examples/sites/demos/pc/app/sticky/webdoc/sticky.js
@@ -76,5 +76,60 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description:
+        '将需要粘性布局的标签或者组件放入 sticky 组件的默认插槽中，则组件滚出屏幕范围时，始终会固定在屏幕顶部。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'offset',
+      name: '偏移距离',
+      support: {
+        value: true
+      },
+      description: '通过设置 offset 属性来改变吸顶或吸底距离，默认值为 0。',
+      cloud: {
+        value: true
+      },
+      apis: ['offset'],
+      demos: ['offset']
+    },
+    {
+      id: 'position',
+      name: '固定位置',
+      support: {
+        value: true
+      },
+      description: '通过设置 position 属性来改变固定位置，可选值有 top 和 bottom，默认值为 top。',
+      cloud: {
+        value: true
+      },
+      apis: ['position'],
+      demos: ['position']
+    },
+    {
+      id: 'target',
+      name: '目标容器',
+      support: {
+        value: true
+      },
+      description: '通过 target 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内。',
+      cloud: {
+        value: true
+      },
+      apis: ['target'],
+      demos: ['target']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/switch/webdoc/switch.js b/examples/sites/demos/pc/app/switch/webdoc/switch.js
index 288c72c1da..e712a7f9a7 100644
--- a/examples/sites/demos/pc/app/switch/webdoc/switch.js
+++ b/examples/sites/demos/pc/app/switch/webdoc/switch.js
@@ -118,5 +118,59 @@ export default {
       },
       codeFiles: ['event-change.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 绑定开关值。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'mini',
+      name: '迷你尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 mini 设置小尺寸开关。',
+      cloud: {
+        value: true
+      },
+      apis: ['mini'],
+      demos: ['mini-mode']
+    },
+    {
+      id: 'loading',
+      name: '加载中状态',
+      support: {
+        value: true
+      },
+      description: '通过 loading 设置开关显示加载状态。',
+      cloud: {
+        value: true
+      },
+      apis: ['loading'],
+      demos: ['loading']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置开关禁用状态。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['dynamic-disable']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
index f0c4a094b3..a9bbd23432 100644
--- a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
+++ b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
@@ -223,7 +223,7 @@ export default {
         'en-US': 'Combining with Grid'
       },
       desc: {
-        'zh-CN': 'Grid 组件需要设置 <code>:auto-resize=“true”</code> ，自适应父元素 <code>TabItem</code> 相应变化。',
+        'zh-CN': 'Grid 组件需要设置 <code>:auto-resize="true"</code> ，自适应父元素 <code>TabItem</code> 相应变化。',
         'en-US':
           'The Grid component needs to set <code>:auto-resize="true"</code> to adapt to the corresponding changes of the parent element <code>TabItem</code> .'
       },
@@ -283,5 +283,59 @@ export default {
       },
       codeFiles: ['overflow-title.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 设置选中的页签项，对应 TabItem 页签项中 name 属性的值。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'style',
+      name: '风格类型',
+      support: {
+        value: true
+      },
+      description: '通过 tab-style 设置风格类型，可选值有 card、bordercard。',
+      cloud: {
+        value: true
+      },
+      apis: ['tab-style'],
+      demos: ['tab-style-card', 'tab-style-bordercard']
+    },
+    {
+      id: 'position',
+      name: '显示位置',
+      support: {
+        value: true
+      },
+      description: '通过 position 设置显示位置，可选值有 top、right、bottom、left。',
+      cloud: {
+        value: true
+      },
+      apis: ['position'],
+      demos: ['position']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 改变尺寸。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/tag-group/webdoc/tag-group.js b/examples/sites/demos/pc/app/tag-group/webdoc/tag-group.js
index 6170291b0a..cf99085ae5 100644
--- a/examples/sites/demos/pc/app/tag-group/webdoc/tag-group.js
+++ b/examples/sites/demos/pc/app/tag-group/webdoc/tag-group.js
@@ -78,5 +78,60 @@ export default {
       },
       codeFiles: ['tag-group-event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description:
+        '通过 data 属性设置标签组的数组数据。每一项标签数据，可以通过标签数据的 name 属性设置对应标签名；通过标签数据的 type 属性可以为标签设置相应的类型。',
+      cloud: {
+        value: true
+      },
+      apis: ['data'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'effect',
+      name: '主题',
+      support: {
+        value: true
+      },
+      description: '通过 effect 设置标签组标签主题，可选值 dark、light、plain，默认值为 light。',
+      cloud: {
+        value: true
+      },
+      apis: ['effect'],
+      demos: ['tag-group-effect']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置标签组标签大小，可选值 medium、small、mini，默认值为 medium。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['tag-group-size']
+    },
+    {
+      id: 'more',
+      name: '显示更多',
+      support: {
+        value: true
+      },
+      description: '标签组会自动识别子项的长度，当子项超出一行显示时，未尾自动显示更多的图标，鼠标悬浮会提示剩余子项。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['more']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js
index 69190b3858..a22e2d4401 100644
--- a/examples/sites/demos/pc/app/tag/webdoc/tag.js
+++ b/examples/sites/demos/pc/app/tag/webdoc/tag.js
@@ -127,5 +127,61 @@ export default {
       },
       codeFiles: ['tag-event-click.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过默认插槽，可以将文字和图标显示为一个标签。通过 value 属性，也可以设置标签值。',
+      cloud: {
+        value: true
+      },
+      apis: ['value'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'effect',
+      name: '主题',
+      support: {
+        value: true
+      },
+      description:
+        '通过 effect 设置主题，可选值：dark、light、plain；type 设置类型，可选值：success、info、warning、danger。',
+      cloud: {
+        value: true
+      },
+      apis: ['effect', 'type'],
+      demos: ['effect']
+    },
+    {
+      id: 'color',
+      name: '自定义颜色',
+      support: {
+        value: true
+      },
+      description:
+        '通过 color 设置颜色，可使用预设值，也可自定义颜色值。当自定义颜色值为字符串时，则设置背景色；当自定义颜色值为数组则第一个值为背景色，第二个为文本色。',
+      cloud: {
+        value: true
+      },
+      apis: ['color'],
+      demos: ['color-border']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置尺寸大小，可选值：medium、small。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/text-popup/webdoc/text-popup.js b/examples/sites/demos/pc/app/text-popup/webdoc/text-popup.js
index e9fe6de91d..8bfcece038 100644
--- a/examples/sites/demos/pc/app/text-popup/webdoc/text-popup.js
+++ b/examples/sites/demos/pc/app/text-popup/webdoc/text-popup.js
@@ -90,5 +90,59 @@ export default {
       },
       codeFiles: ['width.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 value 或 v-model 设置绑定值，通过 placeholder 设置提示占位文本。',
+      cloud: {
+        value: false
+      },
+      apis: ['value', 'v-model', 'placeholder'],
+      demos: ['basic-usage', 'value', 'placeholder']
+    },
+    {
+      id: 'readonly',
+      name: '只读',
+      support: {
+        value: true
+      },
+      description: '通过 readonly 设置是否只读。',
+      cloud: {
+        value: false
+      },
+      apis: ['readonly'],
+      demos: ['readonly']
+    },
+    {
+      id: 'separator',
+      name: '分隔符',
+      support: {
+        value: true
+      },
+      description: '通过 separator 设置分隔符，在文本框中输入回车就是分隔符的位置。',
+      cloud: {
+        value: false
+      },
+      apis: ['separator'],
+      demos: ['separtor']
+    },
+    {
+      id: 'width',
+      name: '宽度',
+      support: {
+        value: true
+      },
+      description: '通过 width 设置宽度。',
+      cloud: {
+        value: false
+      },
+      apis: ['width'],
+      demos: ['width']
+    }
   ]
 }
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 bf8f435cbf..362e260a90 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
@@ -187,5 +187,59 @@ export default {
       },
       codeFiles: ['slot-description.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 data 属性设置时间线的节点数据，active 属性设置当前节点，click 监听单节点的点击事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['data', 'active', 'click'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'vertical',
+      name: '竖向时间线',
+      support: {
+        value: true
+      },
+      description: '通过 vertical 属性设置为竖直方向时间线，reverse 设置是否逆序展示数据。',
+      cloud: {
+        value: true
+      },
+      apis: ['vertical', 'reverse'],
+      demos: ['vertical-timeline']
+    },
+    {
+      id: 'status',
+      name: '节点状态',
+      support: {
+        value: true
+      },
+      description: '通过指定时间线节点的 autoColor 或 type 属性指定其状态，disabled 属性可设置是否禁用。',
+      cloud: {
+        value: true
+      },
+      apis: ['autoColor', 'type', 'disabled'],
+      demos: ['status']
+    },
+    {
+      id: 'custom',
+      name: '自定义',
+      support: {
+        value: true
+      },
+      description: '通过插槽自定义时间线内容，包括顶部、底部、左侧、右侧和描述信息。',
+      cloud: {
+        value: true
+      },
+      apis: ['slots'],
+      demos: ['custom-horizontal-timeline', 'custom-vertical-timeline', 'slot-description']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js b/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
index 4c143ff942..464492e769 100644
--- a/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
+++ b/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
@@ -201,5 +201,59 @@ export default {
       },
       codeFiles: ['event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '默认通过滚动的方式选择时间，arrow-control 属性可以设置通过箭头的方式选择时间。',
+      cloud: {
+        value: true
+      },
+      apis: ['arrow-control'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'range',
+      name: '时间范围',
+      support: {
+        value: true
+      },
+      description: '通过 is-range 设置是否为范围选择，range-separator 设置范围选择分隔符。',
+      cloud: {
+        value: true
+      },
+      apis: ['is-range', 'range-separator'],
+      demos: ['is-range']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 禁用时间输入框，picker-options 的 selectableRange 属性可实现部分禁用。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled', 'picker-options'],
+      demos: ['disabled']
+    },
+    {
+      id: 'format',
+      name: '时间格式化',
+      support: {
+        value: true
+      },
+      description: '通过 format 设置时间格式化显示，支持 12/24 小时制、分钟、秒等格式。',
+      cloud: {
+        value: true
+      },
+      apis: ['format'],
+      demos: ['format']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/time-select/webdoc/time-select.js b/examples/sites/demos/pc/app/time-select/webdoc/time-select.js
index ad6b3d0567..2f3b52da9a 100644
--- a/examples/sites/demos/pc/app/time-select/webdoc/time-select.js
+++ b/examples/sites/demos/pc/app/time-select/webdoc/time-select.js
@@ -129,5 +129,59 @@ export default {
       },
       codeFiles: ['focus.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 设置双向绑定搜索值，placeholder 设置默认占位符文本。',
+      cloud: {
+        value: false
+      },
+      apis: ['v-model', 'placeholder'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'range',
+      name: '时间范围',
+      support: {
+        value: true
+      },
+      description: '通过 picker-options 设置固定时间范围，包括起始时间、结束时间、步长等。',
+      cloud: {
+        value: false
+      },
+      apis: ['picker-options'],
+      demos: ['picker-options']
+    },
+    {
+      id: 'clearable',
+      name: '可清除',
+      support: {
+        value: true
+      },
+      description: '通过 clearable 显示清空图标，clear-icon 自定义清空图标。',
+      cloud: {
+        value: false
+      },
+      apis: ['clearable', 'clear-icon'],
+      demos: ['clear-icon']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 属性可调整输入框尺寸，提供 medium、small、mini 三个固定属性值。',
+      cloud: {
+        value: false
+      },
+      apis: ['size'],
+      demos: ['size-medium']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/tooltip/webdoc/tooltip.js b/examples/sites/demos/pc/app/tooltip/webdoc/tooltip.js
index 2247aebe5d..befaedfe95 100644
--- a/examples/sites/demos/pc/app/tooltip/webdoc/tooltip.js
+++ b/examples/sites/demos/pc/app/tooltip/webdoc/tooltip.js
@@ -178,5 +178,59 @@ export default {
       },
       codeFiles: ['content-max-height.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 content 属性设置提示内容，placement 设置显示位置。',
+      cloud: {
+        value: true
+      },
+      apis: ['content', 'placement'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'theme',
+      name: '主题',
+      support: {
+        value: true
+      },
+      description: '通过 effect 设置明暗效果，type 设置主题类型。',
+      cloud: {
+        value: true
+      },
+      apis: ['effect', 'type'],
+      demos: ['theme']
+    },
+    {
+      id: 'control',
+      name: '控制显示',
+      support: {
+        value: true
+      },
+      description: '通过 visible 控制显示状态，manual 设置手动控制模式。',
+      cloud: {
+        value: true
+      },
+      apis: ['visible', 'manual'],
+      demos: ['control']
+    },
+    {
+      id: 'content',
+      name: '自定义内容',
+      support: {
+        value: true
+      },
+      description: '通过 renderContent 函数或 content 插槽自定义提示内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['renderContent', 'slots'],
+      demos: ['content']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/transfer/webdoc/transfer.js b/examples/sites/demos/pc/app/transfer/webdoc/transfer.js
index a900475ba1..b02433dd70 100644
--- a/examples/sites/demos/pc/app/transfer/webdoc/transfer.js
+++ b/examples/sites/demos/pc/app/transfer/webdoc/transfer.js
@@ -271,5 +271,59 @@ export default {
       },
       codeFiles: ['transfer-events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 data 属性提供数据源，value 属性指定右侧列表值。',
+      cloud: {
+        value: true
+      },
+      apis: ['data', 'value'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'custom',
+      name: '自定义',
+      support: {
+        value: true
+      },
+      description: '支持自定义标题、按钮文本、列表底部等内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['titles', 'button-texts', 'left-footer', 'right-footer'],
+      demos: ['custom-titles', 'custom-btns', 'custom-footer']
+    },
+    {
+      id: 'filter',
+      name: '过滤搜索',
+      support: {
+        value: true
+      },
+      description: '通过 filterable 开启搜索功能，可自定义搜索方法。',
+      cloud: {
+        value: true
+      },
+      apis: ['filterable', 'filter-method'],
+      demos: ['custom-filter']
+    },
+    {
+      id: 'sort',
+      name: '排序策略',
+      support: {
+        value: true
+      },
+      description: '通过 target-order 设置右侧列表元素的排序策略。',
+      cloud: {
+        value: true
+      },
+      apis: ['target-order'],
+      demos: ['target-order']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
index 557e868b35..9bed1241d4 100644
--- a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
+++ b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
@@ -375,5 +375,59 @@ export default {
       },
       codeFiles: ['width-adapt.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 data 属性设置静态数据，支持服务端数据加载。',
+      cloud: {
+        value: false
+      },
+      apis: ['data', 'get-menu-data-sync'],
+      demos: ['basic-usage', 'data-resource']
+    },
+    {
+      id: 'node',
+      name: '节点操作',
+      support: {
+        value: true
+      },
+      description: '支持设置当前节点、展开/收起节点、节点高亮等操作。',
+      cloud: {
+        value: false
+      },
+      apis: ['setCurrentKey', 'default-expanded-keys', 'default-expanded-keys-highlight'],
+      demos: ['current-node', 'default-expanded-keys', 'default-expanded-keys-highlight']
+    },
+    {
+      id: 'filter',
+      name: '节点过滤',
+      support: {
+        value: true
+      },
+      description: '通过 show-filter 显示搜索框，支持自定义过滤方法。',
+      cloud: {
+        value: false
+      },
+      apis: ['show-filter', 'filter-node-method'],
+      demos: ['show-filter', 'filter-node-method']
+    },
+    {
+      id: 'custom',
+      name: '自定义',
+      support: {
+        value: true
+      },
+      description: '支持自定义图标、文字样式、节点内容等。',
+      cloud: {
+        value: false
+      },
+      apis: ['customIcon', 'ellipsis', 'slots'],
+      demos: ['custom-icon', 'text-ellipsis', 'tree-menu-slot']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/user-contact/webdoc/user-contact.js b/examples/sites/demos/pc/app/user-contact/webdoc/user-contact.js
index f776745a46..0516e5d403 100644
--- a/examples/sites/demos/pc/app/user-contact/webdoc/user-contact.js
+++ b/examples/sites/demos/pc/app/user-contact/webdoc/user-contact.js
@@ -70,5 +70,59 @@ export default {
       },
       codeFiles: ['contact-espace.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '支持设置用户头像、名称、职位等基本信息。',
+      cloud: {
+        value: false
+      },
+      apis: ['modelValue', 'name', 'position'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'avatar',
+      name: '头像设置',
+      support: {
+        value: true
+      },
+      description: '支持设置头像大小、形状、颜色等样式。',
+      cloud: {
+        value: false
+      },
+      apis: ['size', 'shape', 'color'],
+      demos: ['avatar']
+    },
+    {
+      id: 'status',
+      name: '状态',
+      support: {
+        value: true
+      },
+      description: '支持设置在线、离线、忙碌等状态。',
+      cloud: {
+        value: false
+      },
+      apis: ['status'],
+      demos: ['status']
+    },
+    {
+      id: 'custom',
+      name: '自定义',
+      support: {
+        value: true
+      },
+      description: '支持自定义头像、名称、职位等内容。',
+      cloud: {
+        value: false
+      },
+      apis: ['slots'],
+      demos: ['custom']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/user-head/webdoc/user-head.js b/examples/sites/demos/pc/app/user-head/webdoc/user-head.js
index c0ca3dd31c..e87d4d1b53 100644
--- a/examples/sites/demos/pc/app/user-head/webdoc/user-head.js
+++ b/examples/sites/demos/pc/app/user-head/webdoc/user-head.js
@@ -163,5 +163,59 @@ export default {
       },
       codeFiles: ['render-user-head-in-grid.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '支持设置头像值，包括图片、文字、图标等。',
+      cloud: {
+        value: false
+      },
+      apis: ['modelValue'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'style',
+      name: '样式设置',
+      support: {
+        value: true
+      },
+      description: '支持设置大小、形状、颜色、背景色等样式。',
+      cloud: {
+        value: false
+      },
+      apis: ['size', 'shape', 'color', 'backgroundColor'],
+      demos: ['style']
+    },
+    {
+      id: 'message',
+      name: '消息提示',
+      support: {
+        value: true
+      },
+      description: '支持显示消息数量和通知。',
+      cloud: {
+        value: false
+      },
+      apis: ['messageTotal', 'messageType'],
+      demos: ['message']
+    },
+    {
+      id: 'custom',
+      name: '自定义',
+      support: {
+        value: true
+      },
+      description: '支持自定义头像内容。',
+      cloud: {
+        value: false
+      },
+      apis: ['slots'],
+      demos: ['custom']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/virtual-scroll-box/webdoc/virtual-scroll-box.js b/examples/sites/demos/pc/app/virtual-scroll-box/webdoc/virtual-scroll-box.js
index c868af9625..83628bc780 100644
--- a/examples/sites/demos/pc/app/virtual-scroll-box/webdoc/virtual-scroll-box.js
+++ b/examples/sites/demos/pc/app/virtual-scroll-box/webdoc/virtual-scroll-box.js
@@ -41,5 +41,33 @@ export default {
       },
       codeFiles: ['tree.vue']
     }
+  ],
+  features: [
+    {
+      id: 'table',
+      name: '表格场景',
+      support: {
+        value: true
+      },
+      description: '支持行和列虚拟滚动，可变行高和列宽，固定行列，单元格合并等。',
+      cloud: {
+        value: false
+      },
+      apis: ['row-height', 'column-width', 'fixed', 'merge-cells'],
+      demos: ['table']
+    },
+    {
+      id: 'tree',
+      name: '树场景',
+      support: {
+        value: true
+      },
+      description: '支持嵌套树组件实现虚拟滚动。',
+      cloud: {
+        value: false
+      },
+      apis: ['tree-data', 'tree-props'],
+      demos: ['tree']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/virtual-tree/webdoc/virtual-tree.js b/examples/sites/demos/pc/app/virtual-tree/webdoc/virtual-tree.js
index 60ffba219d..c5946917d0 100644
--- a/examples/sites/demos/pc/app/virtual-tree/webdoc/virtual-tree.js
+++ b/examples/sites/demos/pc/app/virtual-tree/webdoc/virtual-tree.js
@@ -37,5 +37,33 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '支持树虚拟滚动，可设置滚动容器高度、行高、宽度等。',
+      cloud: {
+        value: false
+      },
+      apis: ['height', 'row-height', 'width', 'scrollbar-size'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'tree',
+      name: '树配置',
+      support: {
+        value: true
+      },
+      description: '通过 tree-op 配置树组件属性，支持展开状态保持、滚动位置保持等。',
+      cloud: {
+        value: false
+      },
+      apis: ['tree-op', 'keepExpandStatus', 'keepScrollTop'],
+      demos: ['basic-usage']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/watermark/webdoc/watermark.js b/examples/sites/demos/pc/app/watermark/webdoc/watermark.js
index 7f92c10ece..6f54fc035b 100644
--- a/examples/sites/demos/pc/app/watermark/webdoc/watermark.js
+++ b/examples/sites/demos/pc/app/watermark/webdoc/watermark.js
@@ -33,5 +33,33 @@ export default {
       },
       codeFiles: ['image.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 content 设置水印文字，font 设置水印样式。',
+      cloud: {
+        value: false
+      },
+      apis: ['content', 'font'],
+      demos: ['basic']
+    },
+    {
+      id: 'image',
+      name: '图片水印',
+      support: {
+        value: true
+      },
+      description: '通过 image 属性设置水印图片。',
+      cloud: {
+        value: false
+      },
+      apis: ['image'],
+      demos: ['image']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/wizard/webdoc/wizard.js b/examples/sites/demos/pc/app/wizard/webdoc/wizard.js
index 0930586715..f8aa3e462f 100644
--- a/examples/sites/demos/pc/app/wizard/webdoc/wizard.js
+++ b/examples/sites/demos/pc/app/wizard/webdoc/wizard.js
@@ -93,11 +93,65 @@ export default {
       },
       desc: {
         'zh-CN':
-          '页向导模式下：通过 <code>btn-prev</code> 监听“上一步”按钮点击事件；<br /> \n        <code>btn-next</code> 监听“下一步”按钮点击事件；<br />\n        <code>btn-save</code> 监听“保存”按钮点击事件；<br />\n        <code>btn-submit</code> 监听“提交”按钮点击事件，流程需要走到最后一步才会显示此按钮。<br />',
+          '页向导模式下：通过 <code>btn-prev</code> 监听"上一步"按钮点击事件；<br /> \n        <code>btn-next</code> 监听"下一步"按钮点击事件；<br />\n        <code>btn-save</code> 监听"保存"按钮点击事件；<br />\n        <code>btn-submit</code> 监听"提交"按钮点击事件，流程需要走到最后一步才会显示此按钮。<br />',
         'en-US':
           'In page wizard mode: listen for the "Previous" button click event through<code>btn-prev</code><br/>\n        <code>btn-next</code>Listen for the "Next" button click event<br/>\n        <code>btn-save</code>Listen for the "save" button click event<br/>\n        <code>btn-submit</code>Listen for the "submit" button click event, and the process needs to go to the last step to display this button<br/>.'
       },
       codeFiles: ['btn-events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 data 设置流程节点信息，支持节点名称和状态设置。',
+      cloud: {
+        value: false
+      },
+      apis: ['data', 'node-click'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'mode',
+      name: '向导模式',
+      support: {
+        value: true
+      },
+      description: '支持页向导、垂直、时间线等多种展示模式。',
+      cloud: {
+        value: false
+      },
+      apis: ['page-guide', 'vertical', 'time-line-flow'],
+      demos: ['page-guide', 'vertical', 'time-line-flow']
+    },
+    {
+      id: 'slot',
+      name: '插槽',
+      support: {
+        value: true
+      },
+      description: '支持自定义节点名称、步骤按钮和内容等。',
+      cloud: {
+        value: false
+      },
+      apis: ['slots'],
+      demos: ['slot-base', 'slot-step-button']
+    },
+    {
+      id: 'event',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持上一步、下一步、保存、提交等按钮事件。',
+      cloud: {
+        value: false
+      },
+      apis: ['btn-prev', 'btn-next', 'btn-save', 'btn-submit'],
+      demos: ['btn-events']
+    }
   ]
 }