diff --git a/examples/sites/demos/pc/app/guide/webdoc/guide.js b/examples/sites/demos/pc/app/guide/webdoc/guide.js
index c18cf997a7..fee6116849 100644
--- a/examples/sites/demos/pc/app/guide/webdoc/guide.js
+++ b/examples/sites/demos/pc/app/guide/webdoc/guide.js
@@ -117,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']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/icon/webdoc/icon.js b/examples/sites/demos/pc/app/icon/webdoc/icon.js
index 4e1b455774..f6d52758b8 100644
--- a/examples/sites/demos/pc/app/icon/webdoc/icon.js
+++ b/examples/sites/demos/pc/app/icon/webdoc/icon.js
@@ -62,5 +62,85 @@ export default {
       },
       codeFiles: ['list.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 name 设置图标名称，size 设置图标大小。',
+      cloud: {
+        value: true
+      },
+      apis: ['name', 'size'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'color',
+      name: '颜色配置',
+      support: {
+        value: true
+      },
+      description: '通过 color 设置图标颜色。',
+      cloud: {
+        value: true
+      },
+      apis: ['color'],
+      demos: ['custom-color']
+    },
+    {
+      id: 'animation',
+      name: '动画效果',
+      support: {
+        value: true
+      },
+      description: '通过 animation 设置图标动画效果，可选值：spin、pulse、bounce。',
+      cloud: {
+        value: true
+      },
+      apis: ['animation'],
+      demos: ['animation']
+    },
+    {
+      id: 'rotation',
+      name: '旋转',
+      support: {
+        value: true
+      },
+      description: '通过 rotation 设置图标旋转角度。',
+      cloud: {
+        value: true
+      },
+      apis: ['rotation'],
+      demos: ['rotation']
+    },
+    {
+      id: 'flip',
+      name: '翻转',
+      support: {
+        value: true
+      },
+      description: '通过 flip 设置图标翻转方向，可选值：horizontal、vertical。',
+      cloud: {
+        value: true
+      },
+      apis: ['flip'],
+      demos: ['flip']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 click 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['click'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/image/webdoc/image.js b/examples/sites/demos/pc/app/image/webdoc/image.js
index 95bf878c66..6f2698aa9f 100644
--- a/examples/sites/demos/pc/app/image/webdoc/image.js
+++ b/examples/sites/demos/pc/app/image/webdoc/image.js
@@ -160,5 +160,98 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 src 设置图片路径，通过 fit 属性确定图片如何适应到容器框。',
+      cloud: {
+        value: false
+      },
+      apis: ['src', 'fit'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'placeholder',
+      name: '占位内容',
+      support: {
+        value: true
+      },
+      description: '通过 slot = placeholder 自定义占位内容。',
+      cloud: {
+        value: false
+      },
+      apis: ['placeholder-slot'],
+      demos: ['custom-placeholder']
+    },
+    {
+      id: 'lazy',
+      name: '懒加载',
+      support: {
+        value: true
+      },
+      description: '通过 lazy 开启懒加载功能，当图片滚动到可视范围内才会加载。',
+      cloud: {
+        value: false
+      },
+      apis: ['lazy', 'scroll-container'],
+      demos: ['lazy']
+    },
+    {
+      id: 'preview',
+      name: '预览功能',
+      support: {
+        value: true
+      },
+      description: '通过 preview-src-list 属性，传入一组图片 url 的数组，点击图片后进入预览大图模式。',
+      cloud: {
+        value: false
+      },
+      apis: ['preview-src-list', 'z-index', 'show-index'],
+      demos: ['preview']
+    },
+    {
+      id: 'style',
+      name: '样式保持',
+      support: {
+        value: true
+      },
+      description: '通过 keep-style 属性可以让图片切换时样式保持一致。',
+      cloud: {
+        value: false
+      },
+      apis: ['keep-style'],
+      demos: ['keep-style']
+    },
+    {
+      id: 'events',
+      name: '事件处理',
+      support: {
+        value: true
+      },
+      description: '支持 change-index、load、error 等事件。',
+      cloud: {
+        value: false
+      },
+      apis: ['change-index', 'load', 'error'],
+      demos: ['index-change', 'events']
+    },
+    {
+      id: 'slots',
+      name: '插槽',
+      support: {
+        value: true
+      },
+      description: '支持 placeholder、error、count 等插槽。',
+      cloud: {
+        value: false
+      },
+      apis: ['placeholder-slot', 'error-slot', 'count-slot'],
+      demos: ['slot', 'count-slot']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.js b/examples/sites/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.js
index ffa2081923..bae9bf27f3 100644
--- a/examples/sites/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.js
+++ b/examples/sites/demos/pc/app/infinite-scroll/webdoc/infinite-scroll.js
@@ -31,5 +31,33 @@ export default {
       },
       codeFiles: ['disabled.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '在列表上添加指令 v-infinite-scroll 并指定加载方法，实现滚动加载。',
+      cloud: {
+        value: false
+      },
+      apis: ['v-infinite-scroll'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'disabled',
+      name: '禁用加载',
+      support: {
+        value: true
+      },
+      description: '通过 infinite-scroll-disabled 属性控制是否禁用加载。',
+      cloud: {
+        value: false
+      },
+      apis: ['infinite-scroll-disabled'],
+      demos: ['disabled']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/input/webdoc/input.js b/examples/sites/demos/pc/app/input/webdoc/input.js
index 2d80e0c2a9..4f36ddd9ad 100644
--- a/examples/sites/demos/pc/app/input/webdoc/input.js
+++ b/examples/sites/demos/pc/app/input/webdoc/input.js
@@ -319,5 +319,124 @@ export default {
       },
       codeFiles: ['event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 绑定输入值，placeholder 设置占位文本。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model', 'placeholder'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置输入框大小，可选值：medium、small、mini。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置输入框禁用状态。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'readonly',
+      name: '只读状态',
+      support: {
+        value: true
+      },
+      description: '通过 readonly 设置输入框只读状态。',
+      cloud: {
+        value: true
+      },
+      apis: ['readonly'],
+      demos: ['readonly']
+    },
+    {
+      id: 'clearable',
+      name: '可清空',
+      support: {
+        value: true
+      },
+      description: '通过 clearable 设置是否可清空。',
+      cloud: {
+        value: true
+      },
+      apis: ['clearable'],
+      demos: ['clearable']
+    },
+    {
+      id: 'password',
+      name: '密码框',
+      support: {
+        value: true
+      },
+      description: '通过 type="password" 设置密码输入框，show-password 显示切换密码图标。',
+      cloud: {
+        value: true
+      },
+      apis: ['type', 'show-password'],
+      demos: ['password']
+    },
+    {
+      id: 'icon',
+      name: '带图标',
+      support: {
+        value: true
+      },
+      description: '通过 prefix-icon 或 suffix-icon 设置输入框前后图标。',
+      cloud: {
+        value: true
+      },
+      apis: ['prefix-icon', 'suffix-icon'],
+      demos: ['icon']
+    },
+    {
+      id: 'textarea',
+      name: '文本域',
+      support: {
+        value: true
+      },
+      description: '通过 type="textarea" 设置文本域，rows 设置行数，autosize 自适应内容高度。',
+      cloud: {
+        value: true
+      },
+      apis: ['type', 'rows', 'autosize'],
+      demos: ['textarea']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 focus、blur、change、input、clear 等事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['focus', 'blur', 'change', 'input', 'clear'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js b/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js
index 91b588dd4b..357134b387 100644
--- a/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js
+++ b/examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js
@@ -83,5 +83,85 @@ export default {
       },
       codeFiles: ['event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基础用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 设置绑定值，type 设置类型，可选值为 IPv4、IPv6。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model', 'type'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'delimiter',
+      name: '分隔符',
+      support: {
+        value: true
+      },
+      description: '通过 delimiter 设置分隔符(图标类)，或通过默认插槽设置分隔符。',
+      cloud: {
+        value: true
+      },
+      apis: ['delimiter'],
+      demos: ['delimiter']
+    },
+    {
+      id: 'readonly',
+      name: '只读状态',
+      support: {
+        value: true
+      },
+      description: '通过 readonly 设置文本的只读状态。',
+      cloud: {
+        value: true
+      },
+      apis: ['readonly'],
+      demos: ['readonly']
+    },
+    {
+      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: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 focus、blur、change、input、select 等事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['focus', 'blur', 'change', 'input', 'select'],
+      demos: ['event']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/layout/webdoc/layout.js b/examples/sites/demos/pc/app/layout/webdoc/layout.js
index 5b49af9f8f..c29757aabe 100644
--- a/examples/sites/demos/pc/app/layout/webdoc/layout.js
+++ b/examples/sites/demos/pc/app/layout/webdoc/layout.js
@@ -101,5 +101,98 @@ export default {
       },
       codeFiles: ['tag.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 Layout 组件嵌套使用 Row、Col 组件，实现 12/24 栅格布局。',
+      cloud: {
+        value: false
+      },
+      apis: ['cols', 'span'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'responsive',
+      name: '响应式布局',
+      support: {
+        value: true
+      },
+      description: '在 Col 组件预设了五个响应尺寸：xs、sm、md、lg 和 xl。',
+      cloud: {
+        value: false
+      },
+      apis: ['xs', 'sm', 'md', 'lg', 'xl'],
+      demos: ['responsive-layout']
+    },
+    {
+      id: 'order',
+      name: '排序',
+      support: {
+        value: true
+      },
+      description: '通过 Row 组件的 flex 布局和 order 属性给 Col 组件排序。',
+      cloud: {
+        value: false
+      },
+      apis: ['flex', 'order', 'no'],
+      demos: ['order']
+    },
+    {
+      id: 'alignment',
+      name: '对齐方式',
+      support: {
+        value: true
+      },
+      description: '通过 justify 和 align 属性指定主轴和副轴的对齐方式。',
+      cloud: {
+        value: false
+      },
+      apis: ['justify', 'align'],
+      demos: ['alignment']
+    },
+    {
+      id: 'offset',
+      name: '偏移',
+      support: {
+        value: true
+      },
+      description: '通过 Col 组件的 offset 属性指定当前列偏移的栏数。',
+      cloud: {
+        value: false
+      },
+      apis: ['offset'],
+      demos: ['offset']
+    },
+    {
+      id: 'gutter',
+      name: '栅格间隔',
+      support: {
+        value: true
+      },
+      description: '通过 Row 组件的 gutter 属性实现栅格间隔。',
+      cloud: {
+        value: false
+      },
+      apis: ['gutter', 'noSpace'],
+      demos: ['gutter']
+    },
+    {
+      id: 'tag',
+      name: '自定义元素标签',
+      support: {
+        value: true
+      },
+      description: '通过 Layout、Row、Col 组件的 tag 属性实现自定义元素标签。',
+      cloud: {
+        value: false
+      },
+      apis: ['tag'],
+      demos: ['tag']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/link/webdoc/link.js b/examples/sites/demos/pc/app/link/webdoc/link.js
index 9fbb4da918..3a5a18ce5f 100644
--- a/examples/sites/demos/pc/app/link/webdoc/link.js
+++ b/examples/sites/demos/pc/app/link/webdoc/link.js
@@ -97,5 +97,85 @@ export default {
       'en-US': '<p></p>'
     },
     codeFiles: ['size.vue']
-  }
+  },
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 value 或者默认插槽设置链接显示内容，绑定 click 事件监听点击。',
+      cloud: {
+        value: true
+      },
+      apis: ['value', 'click'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'style',
+      name: '主题样式',
+      support: {
+        value: true
+      },
+      description: '通过 type 设置链接的主题类型。',
+      cloud: {
+        value: true
+      },
+      apis: ['type'],
+      demos: ['link-style']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用链接。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['dynamic-disable']
+    },
+    {
+      id: 'underline',
+      name: '下划线',
+      support: {
+        value: true
+      },
+      description: '通过 underline 设置鼠标悬浮是否显示下划线。',
+      cloud: {
+        value: true
+      },
+      apis: ['underline'],
+      demos: ['focus-no-underline']
+    },
+    {
+      id: 'icon',
+      name: '图标',
+      support: {
+        value: true
+      },
+      description: '通过属性 icon、默认插槽、icon 插槽都可以自定义图标。',
+      cloud: {
+        value: true
+      },
+      apis: ['icon'],
+      demos: ['custom-icon']
+    },
+    {
+      id: 'href',
+      name: '链接地址',
+      support: {
+        value: true
+      },
+      description: '通过 href 设置跳转连接，可配合原生属性 target 一起使用。',
+      cloud: {
+        value: true
+      },
+      apis: ['href', 'target'],
+      demos: ['config-href']
+    }
+  ]
 }
diff --git a/examples/sites/demos/pc/app/milestone/webdoc/milestone.js b/examples/sites/demos/pc/app/milestone/webdoc/milestone.js
index e233426de3..abe31b3bf1 100644
--- a/examples/sites/demos/pc/app/milestone/webdoc/milestone.js
+++ b/examples/sites/demos/pc/app/milestone/webdoc/milestone.js
@@ -137,5 +137,120 @@ export default {
       },
       codeFiles: ['milestone-events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 data 设置每个节点的标题、日期和状态，通过 milestones-status 设置每种状态对应的颜色值。',
+      cloud: {
+        value: false
+      },
+      apis: ['data', 'milestones-status'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'flag',
+      name: '旗子数据',
+      support: {
+        value: true
+      },
+      description: '通过 flag-before 设置旗子的数据来源，是来自前面还是后面的节点。',
+      cloud: {
+        value: false
+      },
+      apis: ['flag-before'],
+      demos: ['flag-before']
+    },
+    {
+      id: 'style',
+      name: '样式配置',
+      support: {
+        value: true
+      },
+      description: '通过 line-style 设置线条颜色，space 设置节点间距。',
+      cloud: {
+        value: false
+      },
+      apis: ['line-style', 'space'],
+      demos: ['line-style']
+    },
+    {
+      id: 'number',
+      name: '序号配置',
+      support: {
+        value: true
+      },
+      description: '通过 show-number 设置是否显示序号，start 设置序号的起始值。',
+      cloud: {
+        value: false
+      },
+      apis: ['show-number', 'start'],
+      demos: ['show-number']
+    },
+    {
+      id: 'solid',
+      name: '实心显示',
+      support: {
+        value: true
+      },
+      description: '通过 solid 设置已完成状态的节点是否实心显示。',
+      cloud: {
+        value: false
+      },
+      apis: ['solid'],
+      demos: ['solid-style']
+    },
+    {
+      id: 'field-mapping',
+      name: '数据字段映射',
+      support: {
+        value: true
+      },
+      description: '支持自定义 data 属性的键名和键值，包括完成状态、旗子信息等字段的映射。',
+      cloud: {
+        value: false
+      },
+      apis: [
+        'completed-field',
+        'flag-field',
+        'flag-content-field',
+        'flag-name-field',
+        'flag-status-field',
+        'name-field',
+        'status-field',
+        'time-field'
+      ],
+      demos: ['data-field-mapping']
+    },
+    {
+      id: 'slots',
+      name: '插槽定制',
+      support: {
+        value: true
+      },
+      description: '支持通过 icon、bottom、top、flag 等插槽自定义节点的图标、上下方内容和旗帜内容。',
+      cloud: {
+        value: false
+      },
+      apis: ['icon', 'bottom', 'top', 'flag'],
+      demos: ['custom-icon-slot', 'custom-bottom-top', 'custom-flag']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 click 监听单击节点事件，flag-click 监听单击旗子事件。',
+      cloud: {
+        value: false
+      },
+      apis: ['click', 'flag-click'],
+      demos: ['milestone-events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js b/examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js
index 3a14be710d..c1be361273 100644
--- a/examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js
+++ b/examples/sites/demos/pc/app/mind-map/webdoc/mind-map.js
@@ -68,5 +68,57 @@ export default {
           '<code>expandNode</code> Expand the node to trigger an event;<br/>'
       }
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description:
+        '支持通过 Tab 键增加子节点，Enter 键增加同级节点，Delete 键删除节点，Ctrl+C/V 复制粘贴节点，鼠标滚轮+Shift 左右滚动，鼠标滚轮上下滚动，鼠标点击拖动移动节点。',
+      cloud: {
+        value: false
+      },
+      apis: ['keyboard', 'mouse'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'data',
+      name: '数据处理',
+      support: {
+        value: true
+      },
+      description: '通过对实例的获取实现对数据的导出、导入、清空等功能。',
+      cloud: {
+        value: false
+      },
+      apis: ['export', 'import', 'clear'],
+      demos: ['export-data']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description:
+        '支持 create、operation、selectNode、selectNewNode、selectNodes、unselectNode、unselectNodes、expandNode 等事件。',
+      cloud: {
+        value: false
+      },
+      apis: [
+        'create',
+        'operation',
+        'selectNode',
+        'selectNewNode',
+        'selectNodes',
+        'unselectNode',
+        'unselectNodes',
+        'expandNode'
+      ],
+      demos: ['event']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/modal/webdoc/modal.js b/examples/sites/demos/pc/app/modal/webdoc/modal.js
index 34648fcca9..c0e32d961c 100644
--- a/examples/sites/demos/pc/app/modal/webdoc/modal.js
+++ b/examples/sites/demos/pc/app/modal/webdoc/modal.js
@@ -341,5 +341,111 @@ export default {
       },
       codeFiles: ['message-event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 控制弹窗显示，title 设置标题，content 设置内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model', 'title', 'content'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置弹窗大小，可选值：large、medium、small、mini。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['size']
+    },
+    {
+      id: 'custom',
+      name: '自定义内容',
+      support: {
+        value: true
+      },
+      description: '通过 default 插槽自定义弹窗内容。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-default'],
+      demos: ['custom-content']
+    },
+    {
+      id: 'header',
+      name: '自定义头部',
+      support: {
+        value: true
+      },
+      description: '通过 header 插槽自定义弹窗头部。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-header'],
+      demos: ['custom-header']
+    },
+    {
+      id: 'footer',
+      name: '自定义底部',
+      support: {
+        value: true
+      },
+      description: '通过 footer 插槽自定义弹窗底部。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-footer'],
+      demos: ['custom-footer']
+    },
+    {
+      id: 'close',
+      name: '关闭按钮',
+      support: {
+        value: true
+      },
+      description: '通过 show-close 设置是否显示关闭按钮，close-on-click-modal 设置点击遮罩层是否关闭。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-close', 'close-on-click-modal'],
+      demos: ['close']
+    },
+    {
+      id: 'fullscreen',
+      name: '全屏',
+      support: {
+        value: true
+      },
+      description: '通过 fullscreen 设置是否全屏显示。',
+      cloud: {
+        value: true
+      },
+      apis: ['fullscreen'],
+      demos: ['fullscreen']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 open、close、confirm、cancel 等事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['open', 'close', 'confirm', 'cancel'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/notify/webdoc/notify.js b/examples/sites/demos/pc/app/notify/webdoc/notify.js
index c5e448a0e3..065cf39ec1 100644
--- a/examples/sites/demos/pc/app/notify/webdoc/notify.js
+++ b/examples/sites/demos/pc/app/notify/webdoc/notify.js
@@ -187,5 +187,163 @@ export default {
       },
       codeFiles: ['notify-events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 Notify 函数弹出通知框，支持通过 title 设置标题，message 设置内容，支持 jsx 和 h 函数的写法。',
+      cloud: {
+        value: false
+      },
+      apis: ['Notify', 'title', 'message'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'type',
+      name: '消息类型',
+      support: {
+        value: true
+      },
+      description: '通过 type 设置不同的类型，可选值：success、warning、info、error。',
+      cloud: {
+        value: false
+      },
+      apis: ['type'],
+      demos: ['type']
+    },
+    {
+      id: 'duration',
+      name: '自动关闭延时',
+      support: {
+        value: true
+      },
+      description: '通过 duration 设置自动关闭的延迟时间，success/info 默认 5 秒，warning/error 默认 10 秒。',
+      cloud: {
+        value: false
+      },
+      apis: ['duration'],
+      demos: ['duration']
+    },
+    {
+      id: 'position',
+      name: '显示位置',
+      support: {
+        value: true
+      },
+      description: '通过 position 设置通知框显示位置，默认值：bottom-right。',
+      cloud: {
+        value: false
+      },
+      apis: ['position'],
+      demos: ['position']
+    },
+    {
+      id: 'show-close',
+      name: '关闭按钮',
+      support: {
+        value: true
+      },
+      description: '通过 showClose 设置是否显示关闭按钮，默认值：true。',
+      cloud: {
+        value: false
+      },
+      apis: ['showClose'],
+      demos: ['showClose']
+    },
+    {
+      id: 'show-icon',
+      name: '类型图标',
+      support: {
+        value: true
+      },
+      description: '通过 showIcon 设置是否显示类型图标，默认值：true。',
+      cloud: {
+        value: false
+      },
+      apis: ['showIcon'],
+      demos: ['showIcon']
+    },
+    {
+      id: 'close-icon',
+      name: '关闭图标',
+      support: {
+        value: true
+      },
+      description: '通过 closeIcon 设置通知框关闭图标，默认值：IconClose。',
+      cloud: {
+        value: false
+      },
+      apis: ['closeIcon'],
+      demos: ['closeIcon']
+    },
+    {
+      id: 'status-icon',
+      name: '类型图标',
+      support: {
+        value: true
+      },
+      description: '通过 statusIcon 设置通知框类型图标，默认值：IconInfoSolid。',
+      cloud: {
+        value: false
+      },
+      apis: ['statusIcon'],
+      demos: ['statusIcon']
+    },
+    {
+      id: 'debounce',
+      name: '防抖',
+      support: {
+        value: true
+      },
+      description: '通过 debounceDelay 设置防抖时间。',
+      cloud: {
+        value: false
+      },
+      apis: ['debounceDelay'],
+      demos: ['debounceDelay']
+    },
+    {
+      id: 'offset',
+      name: '垂直偏移',
+      support: {
+        value: true
+      },
+      description: '通过 verticalOffset 设置垂直方向偏离距离。',
+      cloud: {
+        value: false
+      },
+      apis: ['verticalOffset'],
+      demos: ['verticalOffset']
+    },
+    {
+      id: 'manual-close',
+      name: '手动关闭',
+      support: {
+        value: true
+      },
+      description: '支持通过 instance.close() 关闭指定通知，Notify.close 关闭指定通知，Notify.closeAll 关闭所有通知。',
+      cloud: {
+        value: false
+      },
+      apis: ['close', 'closeAll'],
+      demos: ['manual-close']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 beforeClose 设置关闭前事件，onClose 设置点击关闭按钮时触发事件。',
+      cloud: {
+        value: false
+      },
+      apis: ['beforeClose', 'onClose'],
+      demos: ['notify-events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
index 9627debea0..cd35e39205 100644
--- a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
+++ b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js
@@ -229,5 +229,176 @@ export default {
       },
       codeFiles: ['filter-mode-change.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 v-model 属性设置绑定输入值。',
+      cloud: {
+        value: true
+      },
+      apis: ['v-model'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'max-min',
+      name: '最值与数值循环',
+      support: {
+        value: true
+      },
+      description: '通过 max 设置最大值，min 设置最小值，circulate 设置是否从最小值开始循环。',
+      cloud: {
+        value: true
+      },
+      apis: ['max', 'min', 'circulate'],
+      demos: ['max-min']
+    },
+    {
+      id: 'step',
+      name: '步长',
+      support: {
+        value: true
+      },
+      description: '通过 step 设置加减数值，mode 设置模式，step-strictly 设置是否只能输入 step 的倍数。',
+      cloud: {
+        value: true
+      },
+      apis: ['step', 'mode', 'step-strictly'],
+      demos: ['about-step']
+    },
+    {
+      id: 'precision',
+      name: '数值精度及格式',
+      support: {
+        value: true
+      },
+      description: '通过 precision 设置精度值，format 设置数字显示格式。',
+      cloud: {
+        value: true
+      },
+      apis: ['precision', 'format'],
+      demos: ['precision']
+    },
+    {
+      id: 'disabled',
+      name: '禁用',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用计数器。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['dynamic-disabled']
+    },
+    {
+      id: 'empty',
+      name: '可清空',
+      support: {
+        value: true
+      },
+      description: '通过 allow-empty 设置是否可清空，empty-value 设置清空后的绑定值。',
+      cloud: {
+        value: true
+      },
+      apis: ['allow-empty', 'empty-value'],
+      demos: ['allow-empty', 'empty-value']
+    },
+    {
+      id: 'size',
+      name: '尺寸',
+      support: {
+        value: true
+      },
+      description: '通过 size 设置尺寸，可选值：medium、small、mini。',
+      cloud: {
+        value: true
+      },
+      apis: ['size'],
+      demos: ['numeric-size']
+    },
+    {
+      id: 'controls',
+      name: '加减按钮',
+      support: {
+        value: true
+      },
+      description: '通过 controls 设置是否显示加减按钮，controls-position 设置按钮位置，show-left 设置左对齐。',
+      cloud: {
+        value: true
+      },
+      apis: ['controls', 'controls-position', 'show-left'],
+      demos: ['controls']
+    },
+    {
+      id: 'mouse-wheel',
+      name: '鼠标滚轮',
+      support: {
+        value: true
+      },
+      description: '通过 mouse-wheel 设置是否支持鼠标滚轮改变值。',
+      cloud: {
+        value: true
+      },
+      apis: ['mouse-wheel'],
+      demos: ['mouse-wheel']
+    },
+    {
+      id: 'unit',
+      name: '单位',
+      support: {
+        value: true
+      },
+      description: '通过 unit 设置计数器的单位，设置单位后加减按钮将不可用。',
+      cloud: {
+        value: true
+      },
+      apis: ['unit'],
+      demos: ['unit']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 change、focus、blur 等事件，change-compat 控制 change 事件的触发时机。',
+      cloud: {
+        value: true
+      },
+      apis: ['change', 'focus', 'blur', 'change-compat'],
+      demos: ['change-event', 'focus-event', 'blur-event']
+    },
+    {
+      id: 'string-mode',
+      name: '高精度',
+      support: {
+        value: true
+      },
+      description: '通过 string-mode 设置高精度模式，用于处理超出 JS Number 精度范围的数值。',
+      cloud: {
+        value: true
+      },
+      apis: ['string-mode'],
+      demos: ['string-mode']
+    },
+    {
+      id: 'filter',
+      name: '过滤器模式',
+      support: {
+        value: true
+      },
+      description: '通过 shape="filter" 设置过滤器模式，支持 title、tip、clearable、blank 等属性配置。',
+      cloud: {
+        value: true
+      },
+      apis: ['shape', 'title', 'tip', 'clearable', 'blank'],
+      demos: ['filter-mode', 'filter-mode-change']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/pager/webdoc/pager.js b/examples/sites/demos/pc/app/pager/webdoc/pager.js
index d642d4548e..b0f04a5222 100644
--- a/examples/sites/demos/pc/app/pager/webdoc/pager.js
+++ b/examples/sites/demos/pc/app/pager/webdoc/pager.js
@@ -242,5 +242,113 @@ export default {
       },
       codeFiles: ['pager-event.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 total 设置总条数，current-page 设置当前页码。',
+      cloud: {
+        value: true
+      },
+      apis: ['total', 'current-page'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'page-size',
+      name: '每页显示数量',
+      support: {
+        value: true
+      },
+      description: '通过 page-size 设置每页显示条目数，page-sizes 设置可选择的 page-size 列表。',
+      cloud: {
+        value: true
+      },
+      apis: ['page-size', 'page-sizes'],
+      demos: ['page-size']
+    },
+    {
+      id: 'layout',
+      name: '自定义布局',
+      support: {
+        value: true
+      },
+      description:
+        '通过 layout 设置分页想要显示的子组件和顺序，支持 total、sizes、prev、pager、next、slot、jumper、current 等组件。',
+      cloud: {
+        value: true
+      },
+      apis: ['layout'],
+      demos: ['custom-layout']
+    },
+    {
+      id: 'mode',
+      name: '分页模式',
+      support: {
+        value: true
+      },
+      description: '通过 mode 设置分页组件渲染模式，不同模式是组件内置的 layout 设置。',
+      cloud: {
+        value: true
+      },
+      apis: ['mode'],
+      demos: ['pager-mode']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置分页禁用，通过 size 设置分页尺寸。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled', 'size'],
+      demos: ['disabled-and-size']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description:
+        '支持 current-change、size-change、prev-click、next-click 等事件，change-compat 控制 change 事件的触发时机。',
+      cloud: {
+        value: true
+      },
+      apis: ['current-change', 'size-change', 'prev-click', 'next-click', 'change-compat'],
+      demos: ['pager-event']
+    },
+    {
+      id: 'before-change',
+      name: '分页变更前置处理',
+      support: {
+        value: true
+      },
+      description: '通过 is-before-page-change 开启前置处理特性，翻页或者改变页大小时会触发 before-page-change 事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['is-before-page-change', 'before-page-change'],
+      demos: ['before-page-change']
+    },
+    {
+      id: 'custom',
+      name: '自定义配置',
+      support: {
+        value: true
+      },
+      description: '支持自定义总条数显示、页码按钮数量、上下页按钮文本、单页隐藏等功能。',
+      cloud: {
+        value: true
+      },
+      apis: ['custom-total', 'pager-count', 'prev-text', 'next-text', 'hide-on-single-page'],
+      demos: ['custom-total', 'pager-count', 'custom-next-prev-text', 'hide-on-single-page']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js b/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
index 0b752acdec..f4f87ab975 100644
--- a/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
+++ b/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
@@ -154,5 +154,115 @@ export default {
       },
       codeFiles: ['upload-events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description:
+        '通过 action 设置上传的服务接口，upload-name 设置上传的文件字段名，data 自定义上传时附带的额外参数。',
+      cloud: {
+        value: false
+      },
+      apis: ['action', 'upload-name', 'data'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'headers',
+      name: '请求配置',
+      support: {
+        value: true
+      },
+      description: '通过 with-credentials 开启支持发送 cookie 凭证信息，headers 自定义上传请求头信息。',
+      cloud: {
+        value: false
+      },
+      apis: ['with-credentials', 'headers'],
+      demos: ['custom-request-headers']
+    },
+    {
+      id: 'size',
+      name: '尺寸和禁用',
+      support: {
+        value: true
+      },
+      description: '通过 medium、small、mini 设置组件尺寸，disabled 设置是否禁用。',
+      cloud: {
+        value: false
+      },
+      apis: ['medium', 'small', 'mini', 'disabled'],
+      demos: ['size']
+    },
+    {
+      id: 'custom-upload',
+      name: '自定义上传',
+      support: {
+        value: true
+      },
+      description: '通过 http-request 配置覆盖默认的上传行为，自定义上传的实现。',
+      cloud: {
+        value: false
+      },
+      apis: ['http-request'],
+      demos: ['http-request']
+    },
+    {
+      id: 'text',
+      name: '文本配置',
+      support: {
+        value: true
+      },
+      description:
+        '通过 dialog-title、cancel-button-text、submit-button-text、upload-button-text 设置弹框标题和按钮文本。',
+      cloud: {
+        value: false
+      },
+      apis: ['dialog-title', 'cancel-button-text', 'submit-button-text', 'upload-button-text'],
+      demos: ['fill-button-text']
+    },
+    {
+      id: 'limit',
+      name: '上传限制',
+      support: {
+        value: true
+      },
+      description: '通过 limit 设置最大上传的文件数量，multiple 设置是否可同时选择多个文件。',
+      cloud: {
+        value: false
+      },
+      apis: ['limit', 'multiple'],
+      demos: ['file-limit']
+    },
+    {
+      id: 'file-type',
+      name: '文件类型限制',
+      support: {
+        value: true
+      },
+      description:
+        '通过 max-upload-file-size 设置上传文件的大小，accept 设置可上传的文件类型，upload-file-type 指定校验的文件类型。',
+      cloud: {
+        value: false
+      },
+      apis: ['max-upload-file-size', 'accept', 'upload-file-type'],
+      demos: ['file-type']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description:
+        '支持 remove、error、exceed、progress、success 等事件，before-remove、before-upload 用于阻止删除和上传。',
+      cloud: {
+        value: false
+      },
+      apis: ['remove', 'error', 'exceed', 'progress', 'success', 'before-remove', 'before-upload'],
+      demos: ['upload-events', 'prevent-delete-file', 'before-upload']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/popover/webdoc/popover.js b/examples/sites/demos/pc/app/popover/webdoc/popover.js
index 9b572517b1..eaad4718e9 100644
--- a/examples/sites/demos/pc/app/popover/webdoc/popover.js
+++ b/examples/sites/demos/pc/app/popover/webdoc/popover.js
@@ -199,5 +199,125 @@ export default {
       },
       codeFiles: ['events.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description:
+        '通过 reference 插槽指定触发源，通过 content 属性指定提示内容，通过 title 属性指定标题，通过 width 属性指定弹出面板宽度。',
+      cloud: {
+        value: true
+      },
+      apis: ['reference', 'content', 'title', 'width'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'trigger',
+      name: '触发方式',
+      support: {
+        value: true
+      },
+      description: '通过 trigger 设置弹出框的触发方式，支持 click、hover、manual、focus，默认值为 click。',
+      cloud: {
+        value: true
+      },
+      apis: ['trigger', 'v-model'],
+      demos: ['trigger']
+    },
+    {
+      id: 'content',
+      name: '弹出层内容',
+      support: {
+        value: true
+      },
+      description: '通过 content 属性设置字符串内容，通过 default 插槽支持自定义复杂的内容结构。',
+      cloud: {
+        value: true
+      },
+      apis: ['content', 'default'],
+      demos: ['content']
+    },
+    {
+      id: 'disabled',
+      name: '禁用状态',
+      support: {
+        value: true
+      },
+      description: '通过 disabled 设置是否禁用弹出框。',
+      cloud: {
+        value: true
+      },
+      apis: ['disabled'],
+      demos: ['disabled']
+    },
+    {
+      id: 'position',
+      name: '位置配置',
+      support: {
+        value: true
+      },
+      description: '通过 placement 设置弹出框位置，通过 arrow-offset 设置箭头偏移量，通过 offset 设置弹框偏移量。',
+      cloud: {
+        value: true
+      },
+      apis: ['placement', 'arrow-offset', 'offset'],
+      demos: ['offset', 'custom-popper']
+    },
+    {
+      id: 'delay',
+      name: '延迟控制',
+      support: {
+        value: true
+      },
+      description: '通过 open-delay 设置弹出框打开延迟时长，通过 close-delay 设置关闭延迟时长。',
+      cloud: {
+        value: true
+      },
+      apis: ['open-delay', 'close-delay'],
+      demos: ['delay']
+    },
+    {
+      id: 'transition',
+      name: '动画效果',
+      support: {
+        value: true
+      },
+      description: '通过 transition 设置弹框的显示隐藏淡入淡出动画。',
+      cloud: {
+        value: true
+      },
+      apis: ['transition'],
+      demos: ['transition']
+    },
+    {
+      id: 'popper',
+      name: '高级配置',
+      support: {
+        value: true
+      },
+      description: '通过 popper-options 配置弹出框高级选项，通过 ignore-boundaries 忽略边界判断。',
+      cloud: {
+        value: true
+      },
+      apis: ['popper-options', 'ignore-boundaries'],
+      demos: ['popper-options', 'ignore-boundaries']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 hide、show、after-leave、after-enter 等事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['hide', 'show', 'after-leave', 'after-enter'],
+      demos: ['events']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/progress/webdoc/progress.js b/examples/sites/demos/pc/app/progress/webdoc/progress.js
index b8bc34b047..48aae135b3 100644
--- a/examples/sites/demos/pc/app/progress/webdoc/progress.js
+++ b/examples/sites/demos/pc/app/progress/webdoc/progress.js
@@ -95,5 +95,85 @@ export default {
       },
       codeFiles: ['progress-type-circle.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 percentage 设置进度值，stroke-width 设置进度条的宽度。',
+      cloud: {
+        value: true
+      },
+      apis: ['percentage', 'stroke-width'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'color',
+      name: '颜色配置',
+      support: {
+        value: true
+      },
+      description: '通过 color 设置进度条颜色，会覆盖 status 状态颜色。',
+      cloud: {
+        value: true
+      },
+      apis: ['color'],
+      demos: ['custom-color']
+    },
+    {
+      id: 'text',
+      name: '文字配置',
+      support: {
+        value: true
+      },
+      description: '通过 show-text 设置文字显隐，text-inside 设置文字内置显示，format 自定义进度条文字。',
+      cloud: {
+        value: true
+      },
+      apis: ['show-text', 'text-inside', 'format'],
+      demos: ['format-text']
+    },
+    {
+      id: 'status',
+      name: '状态',
+      support: {
+        value: true
+      },
+      description: '通过 status 设置当前状态，可选值：success、exception、warning。',
+      cloud: {
+        value: true
+      },
+      apis: ['status'],
+      demos: ['progress-status']
+    },
+    {
+      id: 'icon',
+      name: '图标状态',
+      support: {
+        value: true
+      },
+      description: '通过插槽自定义状态图标。',
+      cloud: {
+        value: true
+      },
+      apis: ['slot-icon-status'],
+      demos: ['slot-icon-status']
+    },
+    {
+      id: 'type',
+      name: '类型',
+      support: {
+        value: true
+      },
+      description: '通过 type 设置进度条类型，支持 line、circle、dashboard，width 设置环形进度条画布宽度。',
+      cloud: {
+        value: true
+      },
+      apis: ['type', 'width'],
+      demos: ['progress-type-circle']
+    }
   ]
 }
diff --git a/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js b/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
index 06fb7c2e5f..b1c23fa002 100644
--- a/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
+++ b/examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js
@@ -55,5 +55,85 @@ export default {
       },
       codeFiles: ['level.vue']
     }
+  ],
+  features: [
+    {
+      id: 'basic',
+      name: '基本用法',
+      support: {
+        value: true
+      },
+      description: '通过 value 设置二维码内容，size 设置二维码大小。',
+      cloud: {
+        value: true
+      },
+      apis: ['value', 'size'],
+      demos: ['basic-usage']
+    },
+    {
+      id: 'logo',
+      name: 'Logo',
+      support: {
+        value: true
+      },
+      description: '通过 logo 设置二维码中心图片，logo-size 设置 logo 大小。',
+      cloud: {
+        value: true
+      },
+      apis: ['logo', 'logo-size'],
+      demos: ['logo']
+    },
+    {
+      id: 'color',
+      name: '颜色配置',
+      support: {
+        value: true
+      },
+      description: '通过 foreground 设置前景色，background 设置背景色。',
+      cloud: {
+        value: true
+      },
+      apis: ['foreground', 'background'],
+      demos: ['custom-color']
+    },
+    {
+      id: 'level',
+      name: '纠错级别',
+      support: {
+        value: true
+      },
+      description: '通过 level 设置纠错级别，可选值：L、M、Q、H。',
+      cloud: {
+        value: true
+      },
+      apis: ['level'],
+      demos: ['error-level']
+    },
+    {
+      id: 'download',
+      name: '下载',
+      support: {
+        value: true
+      },
+      description: '通过 download 设置是否可下载，filename 设置下载文件名。',
+      cloud: {
+        value: true
+      },
+      apis: ['download', 'filename'],
+      demos: ['download']
+    },
+    {
+      id: 'events',
+      name: '事件',
+      support: {
+        value: true
+      },
+      description: '支持 click、error 等事件。',
+      cloud: {
+        value: true
+      },
+      apis: ['click', 'error'],
+      demos: ['events']
+    }
   ]
 }