diff --git a/examples/sites/demos/pc/app/carousel/webdoc/carousel.js b/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
index 16d3e30438..15ce1fea17 100644
--- a/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
+++ b/examples/sites/demos/pc/app/carousel/webdoc/carousel.js
@@ -216,5 +216,72 @@ export default {
       },
       codeFiles: ['dialog-show.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '通过 data 设置轮播图数据。',
+      cloud: {
+        value: true
+      },
+      apis: ['data'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'auto-play',
+      name: '自动播放',
+      support: {
+        value: true
+      },
+      description: '通过 auto-play 设置是否自动播放，interval 设置自动播放的时间间隔。',
+      cloud: {
+        value: true
+      },
+      apis: ['auto-play', 'interval'],
+      demos: ['auto-play']
+    },
+    {
+      id: 'indicator',
+      name: '指示器',
+      support: {
+        value: true
+      },
+      description: '通过 indicator 设置指示器的位置，可选值为 inside、outside、none。',
+      cloud: {
+        value: true
+      },
+      apis: ['indicator'],
+      demos: ['indicator']
+    },
+    {
+      id: 'arrow',
+      name: '切换箭头',
+      support: {
+        value: true
+      },
+      description: '通过 arrow 设置切换箭头的显示时机，可选值为 hover、always、never。',
+      cloud: {
+        value: true
+      },
+      apis: ['arrow'],
+      demos: ['arrow']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '当轮播图切换时会触发 change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['change'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/cascader-panel/webdoc/cascader-panel.js b/examples/sites/demos/pc/app/cascader-panel/webdoc/cascader-panel.js
index 2b6479916a..de32553799 100644
--- a/examples/sites/demos/pc/app/cascader-panel/webdoc/cascader-panel.js
+++ b/examples/sites/demos/pc/app/cascader-panel/webdoc/cascader-panel.js
@@ -72,5 +72,85 @@ export default {
       },
       codeFiles: ['change.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '通过 data 设置级联面板的数据。',
+      cloud: {
+        value: true
+      },
+      apis: ['data'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用级联面板。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'change-on-select',
+      name: '选择即改变',
+      support: {
+        value: true
+      },
+      description: '通过 change-on-select 设置选择即改变。',
+      cloud: {
+        value: true
+      },
+      apis: ['change-on-select'],
+      demos: ['show-all-levels']
+    },
+    {
+      id: 'multiple',
+      name: '多选功能',
+      support: {
+        value: true
+      },
+      description: '通过 multiple 设置是否为多选。',
+      cloud: {
+        value: true
+      },
+      apis: ['multiple'],
+      demos: ['multiple']
+    },
+    {
+      id: 'custom-option',
+      name: '自定义选项',
+      support: {
+        value: true
+      },
+      description: '通过 scoped slot 可以自定义备选项。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-default'],
+      demos: ['custom-option']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '当选中节点变化时会触发 change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['change'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/cascader/webdoc/cascader.js b/examples/sites/demos/pc/app/cascader/webdoc/cascader.js
index bb72fd1af9..10399ad303 100644
--- a/examples/sites/demos/pc/app/cascader/webdoc/cascader.js
+++ b/examples/sites/demos/pc/app/cascader/webdoc/cascader.js
@@ -289,5 +289,124 @@ export default {
       },
       codeFiles: ['slot.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '通过 data 设置级联选择器的数据。',
+      cloud: {
+        value: true
+      },
+      apis: ['data'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用级联选择器。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'clearable',
+      name: '可清空',
+      support: {
+        value: true
+      },
+      description: '通过 clearable 设置输入框是否可清空。',
+      cloud: {
+        value: true
+      },
+      apis: ['clearable'],
+      demos: ['clearable']
+    },
+    {
+      id: 'size',
+      name: '尺寸设置',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置级联选择器的尺寸，可选值为 medium、small、mini。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'change-on-select',
+      name: '选择即改变',
+      support: {
+        value: true
+      },
+      description: '通过 change-on-select 设置选择即改变。',
+      cloud: {
+        value: true
+      },
+      apis: ['change-on-select'],
+      demos: ['show-all-levels']
+    },
+    {
+      id: 'multiple',
+      name: '多选功能',
+      support: {
+        value: true
+      },
+      description: '通过 multiple 设置是否为多选。',
+      cloud: {
+        value: true
+      },
+      apis: ['multiple'],
+      demos: ['multiple']
+    },
+    {
+      id: 'filterable',
+      name: '可搜索',
+      support: {
+        value: true
+      },
+      description: '通过 filterable 设置是否可搜索。',
+      cloud: {
+        value: true
+      },
+      apis: ['filterable'],
+      demos: ['filterable']
+    },
+    {
+      id: 'custom-option',
+      name: '自定义选项',
+      support: {
+        value: true
+      },
+      description: '通过 scoped slot 可以自定义备选项。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-default'],
+      demos: ['custom-option']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '当选中节点变化时会触发 change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['change'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js b/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js
index d6a0390bc8..429a4b08fe 100644
--- a/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js
+++ b/examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js
@@ -229,5 +229,215 @@ export default {
       },
       codeFiles: ['checkbox-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: 'indeterminate',
+      name: '不确定状态',
+      support: {
+        value: true
+      },
+      description: '通过 indeterminate 设置是否为不确定状态。',
+      cloud: {
+        value: true
+      },
+      apis: ['indeterminate'],
+      demos: ['indeterminate']
+    },
+    {
+      id: 'checkbox-group',
+      name: '多选框组',
+      support: {
+        value: true
+      },
+      description: '通过 checkbox-group 组件包裹多个 checkbox 组件。',
+      cloud: {
+        value: true
+      },
+      apis: ['checkbox-group'],
+      demos: ['checkbox-group']
+    },
+    {
+      id: 'group-data',
+      name: '配置式多选框组',
+      support: {
+        value: true
+      },
+      description: '通过 data 设置多选框组数据。',
+      cloud: {
+        value: true
+      },
+      apis: ['data'],
+      demos: ['checkbox-group-data']
+    },
+    {
+      id: 'min-max',
+      name: '可选数量限制',
+      support: {
+        value: true
+      },
+      description: '通过 min 和 max 设置可选数量的限制。',
+      cloud: {
+        value: true
+      },
+      apis: ['min', 'max'],
+      demos: ['min-max']
+    },
+    {
+      id: 'checked',
+      name: '是否默认勾选',
+      support: {
+        value: true
+      },
+      description: '通过 checked 设置是否默认选中。',
+      cloud: {
+        value: true
+      },
+      apis: ['checked'],
+      demos: ['checked']
+    },
+    {
+      id: 'vertical-checkbox',
+      name: '垂直布局',
+      support: {
+        value: true
+      },
+      description: '通过 vertical 设置是否为垂直布局。',
+      cloud: {
+        value: true
+      },
+      apis: ['vertical'],
+      demos: ['vertical-checkbox']
+    },
+    {
+      id: 'text',
+      name: '状态对应的值',
+      support: {
+        value: true
+      },
+      description: '通过 true-label 和 false-label 设置选中值和未选中值。',
+      cloud: {
+        value: true
+      },
+      apis: ['true-label', 'false-label'],
+      demos: ['text']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置尺寸，可选项有 medium、small、mini，不设置则为默认样式。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'shape',
+      name: '过滤器模式',
+      support: {
+        value: true
+      },
+      description: '通过 shape 设置过滤器模式。',
+      cloud: {
+        value: true
+      },
+      apis: ['shape'],
+      demos: ['shape']
+    },
+    {
+      id: 'custom-color',
+      name: '自定义颜色',
+      support: {
+        value: true
+      },
+      description: '通过 fill 自定义选中时背景和边框颜色，通过 text-color 自定义选中时的文本颜色。',
+      cloud: {
+        value: true
+      },
+      apis: ['fill', 'text-color'],
+      demos: ['custom-color']
+    },
+    {
+      id: 'checkbox-slot',
+      name: '默认插槽',
+      support: {
+        value: true
+      },
+      description: '通过 default slot 自定义文本内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot'],
+      demos: ['checkbox-slot']
+    },
+    {
+      id: 'checkbox-button-multiple',
+      name: '多行按钮',
+      support: {
+        value: true
+      },
+      description: '多行按钮组，超出最大宽度后，换行显示。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['checkbox-button-multiple']
+    },
+    {
+      id: 'dynamic-create-checkbox',
+      name: '动态生成复选框组',
+      support: {
+        value: true
+      },
+      description: '复选框组所需数据可通过请求服务从后台取得，然后动态生成。',
+      cloud: {
+        value: true
+      },
+      apis: [],
+      demos: ['dynamic-create-checkbox']
+    },
+    {
+      id: 'checkbox-events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '勾选值改变后将触发 change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['change'],
+      demos: ['checkbox-events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/collapse/webdoc/collapse.js b/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
index 689c05ed1c..cce9d760f4 100644
--- a/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
+++ b/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
@@ -111,5 +111,72 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 设置当前激活的面板。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'accordion',
+      name: '手风琴效果',
+      support: {
+        value: true
+      },
+      description: '通过 accordion 设置是否以手风琴模式显示。',
+      cloud: {
+        value: true
+      },
+      apis: ['accordion'],
+      demos: ['accordion']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用折叠面板。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'custom-title',
+      name: '自定义标题',
+      support: {
+        value: true
+      },
+      description: '通过 title 插槽可以自定义标题。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-title'],
+      demos: ['custom-title']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '当前激活面板改变时会触发 change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['change'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js b/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js
index 976a2d7a04..61458c44c9 100644
--- a/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js
+++ b/examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js
@@ -122,5 +122,98 @@ export default {
       },
       codeFiles: ['format.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 设置尺寸，可选值为 medium、small、mini。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'show-alpha',
+      name: '透明度选择',
+      support: {
+        value: true
+      },
+      description: '通过 show-alpha 设置是否支持透明度选择。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-alpha'],
+      demos: ['show-alpha']
+    },
+    {
+      id: 'color-format',
+      name: '颜色格式',
+      support: {
+        value: true
+      },
+      description: '通过 color-format 设置颜色格式，可选值为 hex、rgb、hsl。',
+      cloud: {
+        value: true
+      },
+      apis: ['color-format'],
+      demos: ['color-format']
+    },
+    {
+      id: 'predefine',
+      name: '预定义颜色',
+      support: {
+        value: true
+      },
+      description: '通过 predefine 设置预定义颜色。',
+      cloud: {
+        value: true
+      },
+      apis: ['predefine'],
+      demos: ['predefine']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '当颜色值改变时会触发 change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['change'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js b/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js
index b62085cf16..28322253c5 100644
--- a/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js
+++ b/examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js
@@ -96,5 +96,72 @@ export default {
       },
       codeFiles: ['format.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本功能',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 设置颜色值。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'show-alpha',
+      name: '透明度选择',
+      support: {
+        value: true
+      },
+      description: '通过 show-alpha 设置是否支持透明度选择。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-alpha'],
+      demos: ['show-alpha']
+    },
+    {
+      id: 'color-format',
+      name: '颜色格式',
+      support: {
+        value: true
+      },
+      description: '通过 color-format 设置颜色格式，可选值为 hex、rgb、hsl。',
+      cloud: {
+        value: true
+      },
+      apis: ['color-format'],
+      demos: ['color-format']
+    },
+    {
+      id: 'predefine',
+      name: '预定义颜色',
+      support: {
+        value: true
+      },
+      description: '通过 predefine 设置预定义颜色。',
+      cloud: {
+        value: true
+      },
+      apis: ['predefine'],
+      demos: ['predefine']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '当颜色值改变时会触发 change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['change'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
index eff4183b5c..b463ed71e0 100644
--- a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
+++ b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js
@@ -44,5 +44,33 @@ export default {
       },
       codeFiles: ['tag.vue']
     }
+  ],
+  features: [
+    {
+      id: 'text-direction',
+      name: '文本方向',
+      support: {
+        value: true
+      },
+      description: '支持设置全局文本方向，包括从左到右和从右到左。',
+      cloud: {
+        value: true
+      },
+      apis: ['text-direction'],
+      demos: ['text-direct']
+    },
+    {
+      id: 'component-config',
+      name: '组件配置',
+      support: {
+        value: true
+      },
+      description: '支持配置全局组件属性，如标签、按钮等组件的默认属性。',
+      cloud: {
+        value: true
+      },
+      apis: ['component-config'],
+      demos: ['tag']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/container/webdoc/container.js b/examples/sites/demos/pc/app/container/webdoc/container.js
index 3fb1684bf1..88a8683235 100644
--- a/examples/sites/demos/pc/app/container/webdoc/container.js
+++ b/examples/sites/demos/pc/app/container/webdoc/container.js
@@ -32,5 +32,33 @@ export default {
       },
       codeFiles: ['custom-with-height.vue']
     }
+  ],
+  features: [
+    {
+      id: 'layout',
+      name: '布局容器',
+      support: {
+        value: true
+      },
+      description: '提供基础的页面布局结构，包括头部、侧边栏、主体区域和底部。',
+      cloud: {
+        value: true
+      },
+      apis: ['layout'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'height',
+      name: '高度设置',
+      support: {
+        value: true
+      },
+      description: '支持自定义容器高度，可以设置固定高度或百分比高度。',
+      cloud: {
+        value: true
+      },
+      apis: ['height'],
+      demos: ['custom-with-height']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/crop/webdoc/crop.js b/examples/sites/demos/pc/app/crop/webdoc/crop.js
index 6489bfacb5..9641c6e21a 100644
--- a/examples/sites/demos/pc/app/crop/webdoc/crop.js
+++ b/examples/sites/demos/pc/app/crop/webdoc/crop.js
@@ -303,5 +303,72 @@ export default {
       },
       codeFiles: ['event-about-crop.vue']
     }
+  ],
+  features: [
+    {
+      id: 'image-crop',
+      name: '图片裁剪',
+      support: {
+        value: true
+      },
+      description: '支持图片上传、预览、裁剪等基本功能。',
+      cloud: {
+        value: true
+      },
+      apis: ['image-crop'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'aspect-ratio',
+      name: '裁剪比例',
+      support: {
+        value: true
+      },
+      description: '支持设置裁剪框的宽高比，如 1:1、16:9 等。',
+      cloud: {
+        value: true
+      },
+      apis: ['aspect-ratio'],
+      demos: ['aspect-ratio']
+    },
+    {
+      id: 'auto-crop',
+      name: '自动裁剪',
+      support: {
+        value: true
+      },
+      description: '支持设置自动裁剪区域的比例，优化裁剪体验。',
+      cloud: {
+        value: true
+      },
+      apis: ['auto-crop-area'],
+      demos: ['auto-crop-area']
+    },
+    {
+      id: 'drag-mode',
+      name: '拖拽模式',
+      support: {
+        value: true
+      },
+      description: '支持设置拖拽模式，包括裁剪框拖拽和图片拖拽。',
+      cloud: {
+        value: true
+      },
+      apis: ['drag-mode'],
+      demos: ['drag-mode']
+    },
+    {
+      id: 'zoom',
+      name: '缩放功能',
+      support: {
+        value: true
+      },
+      description: '支持滚轮缩放和缩放比例设置。',
+      cloud: {
+        value: true
+      },
+      apis: ['zoom-on-wheel', 'wheel-zoom-ratio'],
+      demos: ['zoom-on-wheel']
+    }
   ]
 }