diff --git a/packages/components/action-sheet/README.md b/packages/components/action-sheet/README.md
index 5771fbc92f..1065d10395 100644
--- a/packages/components/action-sheet/README.md
+++ b/packages/components/action-sheet/README.md
@@ -6,14 +6,12 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.9.0 版本上线，请留意版本。
+
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.9.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-96%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-96%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-93%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/avatar/README.md b/packages/components/avatar/README.md
index 1f898e0934..fd33414a07 100644
--- a/packages/components/avatar/README.md
+++ b/packages/components/avatar/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-94%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/back-top/README.md b/packages/components/back-top/README.md
index bbb57b2162..ecff55ec63 100644
--- a/packages/components/back-top/README.md
+++ b/packages/components/back-top/README.md
@@ -5,7 +5,10 @@ spline: navigation
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-67%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-80%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/badge/README.md b/packages/components/badge/README.md
index abfa398e9e..ef5d81c0fa 100644
--- a/packages/components/badge/README.md
+++ b/packages/components/badge/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-84%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-75%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-84%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-67%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/button/README.en-US.md b/packages/components/button/README.en-US.md
index 6661a174a3..f87bd3992a 100644
--- a/packages/components/button/README.en-US.md
+++ b/packages/components/button/README.en-US.md
@@ -5,7 +5,6 @@ spline: base
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
 
 
 ## Usage
diff --git a/packages/components/button/README.md b/packages/components/button/README.md
index 81969c29c6..38a89e2e4e 100644
--- a/packages/components/button/README.md
+++ b/packages/components/button/README.md
@@ -5,7 +5,10 @@ spline: base
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-78%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-77%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
@@ -20,7 +23,7 @@ isComponent: true
 
 <a href="https://developers.weixin.qq.com/s/NSVqRNmh8l5a" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
 
-<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
+<blockquote style="background-color: #ecf2fe; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
 <p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
 </blockquote>
 
diff --git a/packages/components/calendar/README.md b/packages/components/calendar/README.md
index b088073746..2bda6c7062 100644
--- a/packages/components/calendar/README.md
+++ b/packages/components/calendar/README.md
@@ -5,14 +5,11 @@ spline: form
 isComponent: true
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.22.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.22.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-72%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-49%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-72%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-71%25-red" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/cascader/README.md b/packages/components/cascader/README.md
index 94ee321d89..fb369262dd 100644
--- a/packages/components/cascader/README.md
+++ b/packages/components/cascader/README.md
@@ -5,14 +5,11 @@ spline: form
 isComponent: true
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.23.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.23.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-73%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-69%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-73%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-57%25-red" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/cell/README.md b/packages/components/cell/README.md
index e120c5bab2..d56306c204 100644
--- a/packages/components/cell/README.md
+++ b/packages/components/cell/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-64%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/checkbox/README.md b/packages/components/checkbox/README.md
index 851fee31c2..0773a0ab8c 100644
--- a/packages/components/checkbox/README.md
+++ b/packages/components/checkbox/README.md
@@ -5,7 +5,10 @@ spline: form
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-82%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-71%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-82%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-77%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/col/README.md b/packages/components/col/README.md
index 754bda3a66..d898414af5 100644
--- a/packages/components/col/README.md
+++ b/packages/components/col/README.md
@@ -5,6 +5,11 @@ spline: base
 isComponent: true
 ---
 
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.1.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/collapse/README.md b/packages/components/collapse/README.md
index 84176a02b7..dbdc870db5 100644
--- a/packages/components/collapse/README.md
+++ b/packages/components/collapse/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.7.3 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.7.3 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-80%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-91%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/color-picker/README.md b/packages/components/color-picker/README.md
index 4dac3a0426..2a09dacaa4 100644
--- a/packages/components/color-picker/README.md
+++ b/packages/components/color-picker/README.md
@@ -6,6 +6,11 @@ isComponent: true
 ---
 
 
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.7.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/config-provider/README.md b/packages/components/config-provider/README.md
index c70d389f1a..ad0fe765ce 100644
--- a/packages/components/config-provider/README.md
+++ b/packages/components/config-provider/README.md
@@ -5,14 +5,11 @@ spline: explain
 isComponent: true
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 1.13.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.13.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView、Skyline</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-93%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/count-down/README.md b/packages/components/count-down/README.md
index 2c7d58b357..93175f505f 100644
--- a/packages/components/count-down/README.md
+++ b/packages/components/count-down/README.md
@@ -5,11 +5,13 @@ spline: data
 isComponent: true
 ---
 
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
 
 > CountDown 组件用于实时展示倒计时数值。
 如果需要与站点演示一致的数字字体效果，推荐您到 <a href="https://tdesign.tencent.com/design/fonts">数字字体章节</a>，将 TCloudNumber 字体下载并将包含的 TCloudNumberVF.ttf 做为 TCloudNumber 字体资源引入到具体项目中使用。
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-93%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/date-time-picker/README.md b/packages/components/date-time-picker/README.md
index d33967d46f..22389f9014 100644
--- a/packages/components/date-time-picker/README.md
+++ b/packages/components/date-time-picker/README.md
@@ -5,7 +5,10 @@ spline: form
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-82%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-86%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/dialog/README.md b/packages/components/dialog/README.md
index bd60daff50..fe19c0f0ac 100644
--- a/packages/components/dialog/README.md
+++ b/packages/components/dialog/README.md
@@ -5,7 +5,10 @@ spline: message
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-80%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-79%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/divider/README.md b/packages/components/divider/README.md
index 25f34fee45..0ca6b5e90e 100644
--- a/packages/components/divider/README.md
+++ b/packages/components/divider/README.md
@@ -5,7 +5,10 @@ spline: message
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-81%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-33%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-81%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/drawer/README.md b/packages/components/drawer/README.md
index ff2a10df9a..658de04bc4 100644
--- a/packages/components/drawer/README.md
+++ b/packages/components/drawer/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.7.2 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.7.2 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/dropdown-menu/README.md b/packages/components/dropdown-menu/README.md
index 0d15aaab78..d8cdf0418a 100644
--- a/packages/components/dropdown-menu/README.md
+++ b/packages/components/dropdown-menu/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.8.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.8.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-70%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-90%25-blue" /></span>
 ## 引入
 
 ### 引入组件
diff --git a/packages/components/empty/README.md b/packages/components/empty/README.md
index 130718a09d..d71faeaca4 100644
--- a/packages/components/empty/README.md
+++ b/packages/components/empty/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-84%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-50%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-84%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/fab/README.md b/packages/components/fab/README.md
index 7984409bb6..593bc211ab 100644
--- a/packages/components/fab/README.md
+++ b/packages/components/fab/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.7.2 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.7.2 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-68%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-36%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-68%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-56%25-red" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/footer/README.md b/packages/components/footer/README.md
index 3f814f0eb3..e9cb6e6fb0 100644
--- a/packages/components/footer/README.md
+++ b/packages/components/footer/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/form/README.md b/packages/components/form/README.md
index dca959b4e9..342ceaa7a5 100644
--- a/packages/components/form/README.md
+++ b/packages/components/form/README.md
@@ -6,14 +6,11 @@ isComponent: true
 toc: false
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 1.13.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.13.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-43%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-15%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-43%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-60%25-red" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/grid/README.md b/packages/components/grid/README.md
index 22bd20fa40..2048766bd0 100644
--- a/packages/components/grid/README.md
+++ b/packages/components/grid/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-95%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/guide/README.md b/packages/components/guide/README.md
index 1323d9cee3..a45ee62fb8 100644
--- a/packages/components/guide/README.md
+++ b/packages/components/guide/README.md
@@ -6,6 +6,11 @@ isComponent: true
 ---
 
 
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.5.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/icon/README.md b/packages/components/icon/README.md
index f39ca307d2..ee78a951b9 100644
--- a/packages/components/icon/README.md
+++ b/packages/components/icon/README.md
@@ -5,16 +5,11 @@ spline: base
 isComponent: true
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  打开 <a style="margin: 0 4px" href='/icons'> TDesign 图标独立站点 </a>  查看全部支持的图标。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">打开 <a style="margin: 0 4px" href='/icons'> TDesign 图标独立站点 </a>  查看全部支持的图标。</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-
-
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-93%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
@@ -25,18 +20,6 @@ isComponent: true
 }
 ```
 
-## 常见问题
-
-<details>
-  <summary>
-    控制台告警：Failed to load font
-    <span class="icon">👇</span>
-  </summary>
-  <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
-    告警属于开发者工具的 bug，可以忽略，具体可以看 <a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html" target="_blank">官网文档</a>
-  </p>
-</details>
-
 ## 代码演示
 
 <a href="https://developers.weixin.qq.com/s/7OxuPMmW8X5w" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
@@ -95,7 +78,11 @@ isComponent: true
 
 ## FAQ
 
-#### 如何使用多色图标？
+### 控制台告警：Failed to load font
+
+告警属于开发者工具的 bug，可以忽略，具体可以看 <a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html" target="_blank">官网文档</a>
+
+### 如何使用多色图标？
 
 请安装 `@mp-svg-icons/wechat`，已包含 TDesign 所有图标，支持 `任意的粗细调整` 和 `最多四种颜色填充` 功能，零依赖运行，支持无网络场景，具有更好的使用体验。
 
diff --git a/packages/components/image-viewer/README.md b/packages/components/image-viewer/README.md
index d6d9045d04..1c6f20711e 100644
--- a/packages/components/image-viewer/README.md
+++ b/packages/components/image-viewer/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.10.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.10.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-86%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/image/README.md b/packages/components/image/README.md
index aeb010ab0f..c90cb82f0b 100644
--- a/packages/components/image/README.md
+++ b/packages/components/image/README.md
@@ -6,7 +6,10 @@ isComponent: true
 ---
 
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-76%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/indexes/README.md b/packages/components/indexes/README.md
index ea75e091ac..fa04010325 100644
--- a/packages/components/indexes/README.md
+++ b/packages/components/indexes/README.md
@@ -6,15 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  IndexesAnchor 索引锚点组件于 0.32.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px">IndexesAnchor 索引锚点组件于 0.32.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-79%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-72%25-red" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/input/README.md b/packages/components/input/README.md
index d080fa9c00..7b2c5b5cf8 100644
--- a/packages/components/input/README.md
+++ b/packages/components/input/README.md
@@ -6,7 +6,10 @@ isComponent: true
 ---
 
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-84%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-67%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-84%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-79%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/link/README.md b/packages/components/link/README.md
index 6c294e755b..43ea9f45f3 100644
--- a/packages/components/link/README.md
+++ b/packages/components/link/README.md
@@ -5,14 +5,11 @@ spline: navigation
 isComponent: true
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.32.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.3.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-81%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-33%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-81%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-38%25-red" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/loading/README.md b/packages/components/loading/README.md
index 69f77c5b0d..f36f3c46f0 100644
--- a/packages/components/loading/README.md
+++ b/packages/components/loading/README.md
@@ -5,7 +5,10 @@ spline: message
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-60%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-80%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/message/README.md b/packages/components/message/README.md
index 7fa89a4ce5..62ad971500 100644
--- a/packages/components/message/README.md
+++ b/packages/components/message/README.md
@@ -5,7 +5,10 @@ spline: message
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-76%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-91%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/navbar/README.md b/packages/components/navbar/README.md
index 50a27a684e..d7aacb9bd8 100644
--- a/packages/components/navbar/README.md
+++ b/packages/components/navbar/README.md
@@ -5,7 +5,10 @@ spline: navigation
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-78%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-79%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/notice-bar/README.md b/packages/components/notice-bar/README.md
index 4b3fff3a58..a571a0fcf2 100644
--- a/packages/components/notice-bar/README.md
+++ b/packages/components/notice-bar/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.9.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.9.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-85%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/overlay/README.md b/packages/components/overlay/README.md
index f80a94b735..1b484b64bb 100644
--- a/packages/components/overlay/README.md
+++ b/packages/components/overlay/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.10.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.10.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/paragraph/README.md b/packages/components/paragraph/README.md
index 20ffaf44a4..938a95dc78 100644
--- a/packages/components/paragraph/README.md
+++ b/packages/components/paragraph/README.md
@@ -6,14 +6,11 @@ spline: base
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 1.15.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.15.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-91%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/picker/README.md b/packages/components/picker/README.md
index a6bda2cfa0..bce29e2fd7 100644
--- a/packages/components/picker/README.md
+++ b/packages/components/picker/README.md
@@ -5,7 +5,10 @@ spline: form
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-80%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-77%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-80%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/popover/README.md b/packages/components/popover/README.md
index aceef0dd33..aa42c4f126 100644
--- a/packages/components/popover/README.md
+++ b/packages/components/popover/README.md
@@ -6,6 +6,11 @@ isComponent: true
 ---
 
 
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.12.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/popup/README.md b/packages/components/popup/README.md
index f480903d02..ffb84110a3 100644
--- a/packages/components/popup/README.md
+++ b/packages/components/popup/README.md
@@ -6,7 +6,10 @@ isComponent: true
 ---
 
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-75%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-80%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/progress/README.md b/packages/components/progress/README.md
index 5984f39ade..be290ff272 100644
--- a/packages/components/progress/README.md
+++ b/packages/components/progress/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.7.3 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.7.3 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
 ## 引入
 
 ### 引入组件
diff --git a/packages/components/pull-down-refresh/README.md b/packages/components/pull-down-refresh/README.md
index 1addbb38ee..a25d921954 100644
--- a/packages/components/pull-down-refresh/README.md
+++ b/packages/components/pull-down-refresh/README.md
@@ -6,7 +6,10 @@ isComponent: true
 ---
 
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-72%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-91%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/qrcode/README.md b/packages/components/qrcode/README.md
index a44b4c233f..aea676fed9 100644
--- a/packages/components/qrcode/README.md
+++ b/packages/components/qrcode/README.md
@@ -5,7 +5,11 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-61%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-52%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-61%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-95%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.10.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
@@ -55,18 +59,18 @@ isComponent: true
 {{ size }}
 
 
-### FAQ
+## FAQ
 
-#### 关于二维码纠错等级
+### 关于二维码纠错等级
 纠错等级也叫纠错率，就是指二维码可以被遮挡后还能正常扫描，而这个能被遮挡的最大面积就是纠错率。
 
 通常情况下二维码分为 4 个纠错级别：`L级` 可纠正约 `7%` 错误、`M级` 可纠正约 `15%` 错误、`Q级` 可纠正约 `25%` 错误、`H级` 可纠正约 `30%` 错误。但并不是所有位置都可以缺损，像最明显的三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。当二维码的内容编码携带信息比较少的时候，也就是链接比较短的时候，设置不同的纠错等级，生成的图片不会发生变化。
 有关更多信息，可参阅[官方文档](https://www.qrcode.com/zh/about/error_correction)的相关资料
 
-#### 生成的二维码无法扫描？
+### 生成的二维码无法扫描？
 若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 `size` 配置二维码更大，或者通过短链接服务等方式将链接变短。
 
-#### `hidden` 元素中，二维码绘制失败？
+### `hidden` 元素中，二维码绘制失败？
 当 QRCode 外层使用 `hidden` 包裹，可以通过 `wx:if` 或者重新调用组件的 `init` 方法，确保组件正常渲染（在 t-popup/t-dialog 中同理）。如下：[可参考代码片段](https://developers.weixin.qq.com/s/OUlsk0mq8x6V)
 
 ```html
diff --git a/packages/components/radio/README.md b/packages/components/radio/README.md
index 45d9e77bc5..4120059437 100644
--- a/packages/components/radio/README.md
+++ b/packages/components/radio/README.md
@@ -6,7 +6,10 @@ isComponent: true
 ---
 
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-72%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/rate/README.md b/packages/components/rate/README.md
index 054804fe20..da98903d8d 100644
--- a/packages/components/rate/README.md
+++ b/packages/components/rate/README.md
@@ -5,7 +5,10 @@ spline: form
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-80%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-44%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-80%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-56%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/result/README.md b/packages/components/result/README.md
index 227163ec2a..5d96ef5ea8 100644
--- a/packages/components/result/README.md
+++ b/packages/components/result/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.16.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.16.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-80%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-80%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/search/README.md b/packages/components/search/README.md
index 3db5966fa3..7a2cea7724 100644
--- a/packages/components/search/README.md
+++ b/packages/components/search/README.md
@@ -6,7 +6,10 @@ isComponent: true
 ---
 
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-79%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-73%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-79%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-69%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/segmented/README.md b/packages/components/segmented/README.md
index 6c579cbd13..d219143811 100644
--- a/packages/components/segmented/README.md
+++ b/packages/components/segmented/README.md
@@ -6,14 +6,11 @@ isComponent: true
 ---
 
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 1.14.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.14.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
 </div>
 
-
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/side-bar/README.md b/packages/components/side-bar/README.md
index 14caf0f638..d8b4e7b085 100644
--- a/packages/components/side-bar/README.md
+++ b/packages/components/side-bar/README.md
@@ -5,14 +5,11 @@ spline: navigation
 isComponent: true
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.25.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.25.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-60%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/skeleton/README.md b/packages/components/skeleton/README.md
index 77277a8e65..72161e4d41 100644
--- a/packages/components/skeleton/README.md
+++ b/packages/components/skeleton/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-90%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/slider/README.md b/packages/components/slider/README.md
index 3501910b11..02e3138f2e 100644
--- a/packages/components/slider/README.md
+++ b/packages/components/slider/README.md
@@ -5,7 +5,10 @@ spline: form
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-64%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-60%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-64%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-55%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/stepper/README.md b/packages/components/stepper/README.md
index 39769c4ed6..debb80ef0c 100644
--- a/packages/components/stepper/README.md
+++ b/packages/components/stepper/README.md
@@ -5,7 +5,10 @@ spline: form
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-74%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/steps/README.md b/packages/components/steps/README.md
index d758d38c3b..10ced62c06 100644
--- a/packages/components/steps/README.md
+++ b/packages/components/steps/README.md
@@ -5,7 +5,10 @@ spline: navigation
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-82%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/sticky/README.md b/packages/components/sticky/README.md
index 0679ef4116..70ff26ab91 100644
--- a/packages/components/sticky/README.md
+++ b/packages/components/sticky/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-71%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/swipe-cell/README.md b/packages/components/swipe-cell/README.md
index b9361276b5..56273d9453 100644
--- a/packages/components/swipe-cell/README.md
+++ b/packages/components/swipe-cell/README.md
@@ -6,7 +6,10 @@ isComponent: true
 ---
 
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-77%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
@@ -44,6 +47,7 @@ isComponent: true
 {{ icon }}
 
 ## FAQ
+
 ### `SwipeCell` 组件在真机上无法滑动？
 移除全局配置项: "componentFramework": "glass-easel"，详情见： [issue 2524](https://github.com/Tencent/tdesign-miniprogram/issues/2524)。如需使用 `skyline render`，建议页面级粒度开启。
 
diff --git a/packages/components/swiper/README.md b/packages/components/swiper/README.md
index 53944d51ba..928024edef 100644
--- a/packages/components/swiper/README.md
+++ b/packages/components/swiper/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-77%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-60%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-77%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-71%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/switch/README.md b/packages/components/switch/README.md
index 0ad6f3dd09..e8e424cb42 100644
--- a/packages/components/switch/README.md
+++ b/packages/components/switch/README.md
@@ -5,7 +5,10 @@ spline: form
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/tab-bar/README.md b/packages/components/tab-bar/README.md
index 0e01f693c1..22695f0dec 100644
--- a/packages/components/tab-bar/README.md
+++ b/packages/components/tab-bar/README.md
@@ -5,7 +5,10 @@ spline: navigation
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-91%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/table/README.md b/packages/components/table/README.md
index 6c01dd0ba1..4d8a27266b 100644
--- a/packages/components/table/README.md
+++ b/packages/components/table/README.md
@@ -6,11 +6,9 @@ isComponent: true
 toc: false
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 1.14.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.14.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
 ## 引入
diff --git a/packages/components/tabs/README.md b/packages/components/tabs/README.md
index aaa00766d6..e9ffa40038 100644
--- a/packages/components/tabs/README.md
+++ b/packages/components/tabs/README.md
@@ -5,7 +5,10 @@ spline: navigation
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-79%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/tag/README.md b/packages/components/tag/README.md
index 20a7c44edd..d131b601f8 100644
--- a/packages/components/tag/README.md
+++ b/packages/components/tag/README.md
@@ -5,7 +5,10 @@ spline: data
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-82%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/textarea/README.md b/packages/components/textarea/README.md
index 476bfd8221..78eb9c35d3 100644
--- a/packages/components/textarea/README.md
+++ b/packages/components/textarea/README.md
@@ -6,7 +6,10 @@ isComponent: true
 ---
 
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/toast/README.md b/packages/components/toast/README.md
index e6bba3c64c..df633af778 100644
--- a/packages/components/toast/README.md
+++ b/packages/components/toast/README.md
@@ -5,7 +5,10 @@ spline: message
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-80%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-93%25-blue" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：Skyline、WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/transition/README.md b/packages/components/transition/README.md
index 9c640af5aa..27e1b41359 100644
--- a/packages/components/transition/README.md
+++ b/packages/components/transition/README.md
@@ -5,7 +5,6 @@ spline: message
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-50%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-89%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-50%25-red" /></span>
 ## 引入
 
 ### 引入组件
diff --git a/packages/components/tree-select/README.md b/packages/components/tree-select/README.md
index 6d6f768f42..1f1affa27c 100644
--- a/packages/components/tree-select/README.md
+++ b/packages/components/tree-select/README.md
@@ -5,14 +5,11 @@ spline: form
 isComponent: true
 ---
 
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.32.0 版本上线，请留意版本。
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 0.3.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
 </div>
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-47%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-38%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-47%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-60%25-red" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/upload/README.md b/packages/components/upload/README.md
index 89520148ef..9462bb62e6 100644
--- a/packages/components/upload/README.md
+++ b/packages/components/upload/README.md
@@ -5,7 +5,10 @@ spline: form
 isComponent: true
 ---
 
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-54%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-51%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-54%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-77%25-red" /></span>
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
diff --git a/packages/components/watermark/README.md b/packages/components/watermark/README.md
index 5cb07c75fc..f3f0732507 100644
--- a/packages/components/watermark/README.md
+++ b/packages/components/watermark/README.md
@@ -6,6 +6,11 @@ isComponent: true
 ---
 
 
+<div style="background: #ecf2fe; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <div style="border-left: 2px solid #c6c6c6; padding: 0 8px;margin-bottom: 16px">该组件于 1.11.0 版本上线，请留意版本</div>
+  <div style="border-left: 2px solid #0052d9; padding: 0 8px">渲染框架支持情况：WebView</div>
+</div>
+
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
@@ -54,7 +59,7 @@ isComponent: true
 
 {{ move-image }}
 
-### 不同布局的水印 
+### 不同布局的水印
 通过设置 layout 使用不同的布局。
 
 {{ layout }}
diff --git a/packages/pro-components/chat/chat-markdown/README.md b/packages/pro-components/chat/chat-markdown/README.md
index d0831202b4..af5271cf95 100644
--- a/packages/pro-components/chat/chat-markdown/README.md
+++ b/packages/pro-components/chat/chat-markdown/README.md
@@ -57,7 +57,7 @@ isComponent: true
 
 {{ tail }}
 
-### FAQ
+## FAQ
 
 MarkdownNode 数据结构由 marked 解析器生成，不同节点类型包含不同字段，常见结构如下：
 
diff --git a/packages/tdesign-miniprogram/site/plugins/plugin-tdoc/component.vue b/packages/tdesign-miniprogram/site/plugins/plugin-tdoc/component.vue
index 7db3c9d815..3db940a2a3 100644
--- a/packages/tdesign-miniprogram/site/plugins/plugin-tdoc/component.vue
+++ b/packages/tdesign-miniprogram/site/plugins/plugin-tdoc/component.vue
@@ -1,6 +1,33 @@
 <template>
   <td-doc-content ref="tdDocContent" platform="mobile" page-status="hidden">
-    <td-doc-header v-if="info.tdDocHeader" platform="mobile" slot="doc-header" ref="tdDocHeader"></td-doc-header>
+    <td-doc-header v-if="info.tdDocHeader" platform="mobile" slot="doc-header" ref="tdDocHeader">
+      <template v-if="info.coverage">
+        <td-doc-badge
+          style="margin-right: 10px"
+          slot="badge"
+          label="coverages: lines"
+          :message="info.coverage.lines"
+        />
+        <td-doc-badge
+          style="margin-right: 10px"
+          slot="badge"
+          label="coverages: functions"
+          :message="info.coverage.functions"
+        />
+        <td-doc-badge
+          style="margin-right: 10px"
+          slot="badge"
+          label="coverages: statements"
+          :message="info.coverage.statements"
+        />
+        <td-doc-badge
+          style="margin-right: 10px"
+          slot="badge"
+          label="coverages: branches"
+          :message="info.coverage.branches"
+        />
+      </template>
+    </td-doc-header>
     <template v-if="info.isComponent">
       <td-doc-tabs ref="tdDocTabs" :tab="tab"></td-doc-tabs>
       <div class="td-doc-main" v-show="tab === 'demo'">
diff --git a/packages/tdesign-miniprogram/site/plugins/plugin-tdoc/md-to-vue.ts b/packages/tdesign-miniprogram/site/plugins/plugin-tdoc/md-to-vue.ts
index 6947137505..07247acf0e 100644
--- a/packages/tdesign-miniprogram/site/plugins/plugin-tdoc/md-to-vue.ts
+++ b/packages/tdesign-miniprogram/site/plugins/plugin-tdoc/md-to-vue.ts
@@ -3,6 +3,8 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import matter from 'gray-matter';
 
+import testCoverage from '../../test-coverage';
+
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const componentPath = path.join(__dirname, './component.vue').replaceAll('\\', '/');
 
@@ -45,9 +47,10 @@ function customRender({ source, file, md }: any) {
   // split md
   const [demoMd = '', apiMd = ''] = content.split(pageData.apiFlag);
 
-  const mdSegment = {
+  const mdSegment: any = {
     ...pageData,
     componentName,
+    coverage: (pageData.isComponent && componentName && testCoverage[componentName]) || null,
     docMd: '<td-doc-empty></td-doc-empty>',
     demoMd: '<td-doc-empty></td-doc-empty>',
     apiMd: '<td-doc-empty></td-doc-empty>',
diff --git a/packages/tdesign-miniprogram/site/test-coverage.ts b/packages/tdesign-miniprogram/site/test-coverage.ts
new file mode 100644
index 0000000000..5ef301e7a7
--- /dev/null
+++ b/packages/tdesign-miniprogram/site/test-coverage.ts
@@ -0,0 +1,85 @@
+// 该文件由 test/scripts/coverage-badge.js 自动生成，请勿手动修改
+export default {
+  'action-sheet': { lines: '96%', functions: '89%', statements: '96%', branches: '93%' },
+  'avatar': { lines: '93%', functions: '83%', statements: '93%', branches: '94%' },
+  'avatar-group': { lines: '90%', functions: '86%', statements: '90%', branches: '91%' },
+  'back-top': { lines: '91%', functions: '67%', statements: '91%', branches: '80%' },
+  'badge': { lines: '84%', functions: '75%', statements: '84%', branches: '67%' },
+  'button': { lines: '95%', functions: '78%', statements: '95%', branches: '77%' },
+  'calendar': { lines: '72%', functions: '49%', statements: '72%', branches: '71%' },
+  'cascader': { lines: '73%', functions: '69%', statements: '73%', branches: '57%' },
+  'cell': { lines: '93%', functions: '64%', statements: '93%', branches: '100%' },
+  'cell-group': { lines: '86%', functions: '25%', statements: '86%', branches: '100%' },
+  'check-tag': { lines: '91%', functions: '71%', statements: '91%', branches: '100%' },
+  'checkbox': { lines: '82%', functions: '71%', statements: '82%', branches: '77%' },
+  'checkbox-group': { lines: '78%', functions: '82%', statements: '78%', branches: '86%' },
+  'collapse': { lines: '91%', functions: '80%', statements: '91%', branches: '91%' },
+  'collapse-panel': { lines: '97%', functions: '100%', statements: '97%', branches: '80%' },
+  'common': { lines: '41%', functions: '50%', statements: '41%', branches: '73%' },
+  'config-provider': { lines: '99%', functions: '100%', statements: '99%', branches: '93%' },
+  'count-down': { lines: '99%', functions: '100%', statements: '99%', branches: '93%' },
+  'date-time-picker': { lines: '83%', functions: '82%', statements: '83%', branches: '86%' },
+  'dialog': { lines: '94%', functions: '80%', statements: '94%', branches: '79%' },
+  'divider': { lines: '81%', functions: '33%', statements: '81%', branches: '100%' },
+  'drawer': { lines: '100%', functions: '100%', statements: '100%', branches: '100%' },
+  'dropdown-item': { lines: '89%', functions: '71%', statements: '89%', branches: '91%' },
+  'dropdown-menu': { lines: '91%', functions: '70%', statements: '91%', branches: '90%' },
+  'empty': { lines: '84%', functions: '50%', statements: '84%', branches: '100%' },
+  'fab': { lines: '68%', functions: '36%', statements: '68%', branches: '56%' },
+  'footer': { lines: '100%', functions: '100%', statements: '100%', branches: '100%' },
+  'form': { lines: '43%', functions: '15%', statements: '43%', branches: '60%' },
+  'grid': { lines: '99%', functions: '100%', statements: '99%', branches: '95%' },
+  'grid-item': { lines: '99%', functions: '100%', statements: '99%', branches: '92%' },
+  'icon': { lines: '90%', functions: '100%', statements: '90%', branches: '93%' },
+  'image': { lines: '89%', functions: '88%', statements: '89%', branches: '76%' },
+  'image-viewer': { lines: '87%', functions: '92%', statements: '87%', branches: '86%' },
+  'indexes': { lines: '86%', functions: '79%', statements: '86%', branches: '72%' },
+  'indexes-anchor': { lines: '100%', functions: '100%', statements: '100%', branches: '100%' },
+  'input': { lines: '84%', functions: '67%', statements: '84%', branches: '79%' },
+  'link': { lines: '81%', functions: '33%', statements: '81%', branches: '38%' },
+  'loading': { lines: '89%', functions: '60%', statements: '89%', branches: '80%' },
+  'locale': { lines: '25%', functions: '0%', statements: '25%', branches: '0%' },
+  'message': { lines: '92%', functions: '76%', statements: '92%', branches: '91%' },
+  'message-item': { lines: '75%', functions: '71%', statements: '75%', branches: '85%' },
+  'mixins': { lines: '85%', functions: '85%', statements: '85%', branches: '77%' },
+  'navbar': { lines: '86%', functions: '78%', statements: '86%', branches: '79%' },
+  'notice-bar': { lines: '92%', functions: '89%', statements: '92%', branches: '85%' },
+  'overlay': { lines: '94%', functions: '83%', statements: '94%', branches: '88%' },
+  'paragraph': { lines: '99%', functions: '95%', statements: '99%', branches: '91%' },
+  'picker': { lines: '80%', functions: '77%', statements: '80%', branches: '83%' },
+  'picker-item': { lines: '75%', functions: '76%', statements: '75%', branches: '73%' },
+  'popup': { lines: '94%', functions: '75%', statements: '94%', branches: '80%' },
+  'progress': { lines: '100%', functions: '100%', statements: '100%', branches: '100%' },
+  'pull-down-refresh': { lines: '92%', functions: '72%', statements: '92%', branches: '91%' },
+  'qrcode': { lines: '61%', functions: '52%', statements: '61%', branches: '95%' },
+  'radio': { lines: '93%', functions: '95%', statements: '93%', branches: '72%' },
+  'radio-group': { lines: '88%', functions: '89%', statements: '88%', branches: '68%' },
+  'rate': { lines: '80%', functions: '44%', statements: '80%', branches: '56%' },
+  'result': { lines: '95%', functions: '80%', statements: '95%', branches: '80%' },
+  'scroll-view': { lines: '100%', functions: '100%', statements: '100%', branches: '50%' },
+  'search': { lines: '79%', functions: '73%', statements: '79%', branches: '69%' },
+  'side-bar': { lines: '83%', functions: '60%', statements: '83%', branches: '100%' },
+  'side-bar-item': { lines: '84%', functions: '50%', statements: '84%', branches: '75%' },
+  'skeleton': { lines: '93%', functions: '90%', statements: '93%', branches: '90%' },
+  'slider': { lines: '64%', functions: '60%', statements: '64%', branches: '55%' },
+  'step-item': { lines: '96%', functions: '100%', statements: '96%', branches: '73%' },
+  'stepper': { lines: '94%', functions: '93%', statements: '94%', branches: '74%' },
+  'steps': { lines: '95%', functions: '82%', statements: '95%', branches: '83%' },
+  'sticky': { lines: '89%', functions: '86%', statements: '89%', branches: '71%' },
+  'swipe-cell': { lines: '89%', functions: '77%', statements: '89%', branches: '100%' },
+  'swiper': { lines: '77%', functions: '60%', statements: '77%', branches: '71%' },
+  'swiper-nav': { lines: '96%', functions: '67%', statements: '96%', branches: '75%' },
+  'switch': { lines: '100%', functions: '100%', statements: '100%', branches: '100%' },
+  'tab-bar': { lines: '91%', functions: '91%', statements: '91%', branches: '83%' },
+  'tab-bar-item': { lines: '98%', functions: '100%', statements: '98%', branches: '88%' },
+  'tab-panel': { lines: '97%', functions: '100%', statements: '97%', branches: '82%' },
+  'tabs': { lines: '93%', functions: '87%', statements: '93%', branches: '79%' },
+  'tag': { lines: '94%', functions: '82%', statements: '94%', branches: '100%' },
+  'text': { lines: '98%', functions: '90%', statements: '98%', branches: '88%' },
+  'textarea': { lines: '93%', functions: '92%', statements: '93%', branches: '88%' },
+  'title': { lines: '100%', functions: '100%', statements: '100%', branches: '100%' },
+  'toast': { lines: '99%', functions: '80%', statements: '99%', branches: '93%' },
+  'transition': { lines: '89%', functions: '50%', statements: '89%', branches: '50%' },
+  'tree-select': { lines: '47%', functions: '38%', statements: '47%', branches: '60%' },
+  'upload': { lines: '54%', functions: '51%', statements: '54%', branches: '77%' },
+};
diff --git a/packages/tdesign-miniprogram/test/scripts/coverage-badge.js b/packages/tdesign-miniprogram/test/scripts/coverage-badge.js
index fef876b21c..ccae74df3a 100644
--- a/packages/tdesign-miniprogram/test/scripts/coverage-badge.js
+++ b/packages/tdesign-miniprogram/test/scripts/coverage-badge.js
@@ -2,9 +2,11 @@ const path = require('path');
 const fs = require('fs');
 const os = require('os');
 
-const specify = process.argv[2];
 const data = require('../unit/coverage/coverage-summary.json');
 
+// 覆盖率数据模块输出路径（供站点 md-to-vue.ts 引用）
+const COVERAGE_MODULE_PATH = path.resolve(__dirname, '../../site/test-coverage.ts');
+
 // 父子组件映射表
 const RELATED_MAP = {
   avatar: 'avatar-group',
@@ -54,30 +56,6 @@ function calculateCoverage(item) {
   return ((item.covered / item.total) * 100).toFixed(0);
 }
 
-/**
- * 获取 README.md 文件路径
- * @param {string} component - 组件 key
- * @returns {string} README.md 文件路径
- */
-function getReadmePath(component) {
-  if (component.includes('/')) {
-    const [group, subComponent] = component.split('/');
-    return path.resolve(__dirname, `../../../pro-components/${group}/${subComponent}/README.md`);
-  }
-  return path.resolve(__dirname, `../../../components/${component}/README.md`);
-}
-
-/**
- * 生成覆盖率徽章 SVG
- * @param {string} type - 类型（lines/functions/statements/branches）
- * @param {number} percentage - 覆盖率百分比
- * @returns {string} SVG HTML 字符串
- */
-function generateBadge(type, percentage) {
-  const color = parseInt(percentage, 10) >= 80 ? 'blue' : 'red';
-  return `<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20${type}-${percentage}%25-${color}" /></span>`;
-}
-
 const ans = new Map();
 
 // 聚合覆盖率数据
@@ -105,10 +83,13 @@ Object.keys(data).forEach((fPath) => {
   ans.set(componentKey, target);
 });
 
-// 生成并写入徽章到 README.md
+// 计算每个组件的覆盖率（含父子组件合并），生成覆盖率数据 map
+const coverageMap = {};
+
 ans.forEach((items, component) => {
-  let svgs = '';
+  const result = {};
   let allZero = true;
+
   Object.entries(items).forEach(([type, item]) => {
     let val = calculateCoverage(item);
 
@@ -131,20 +112,28 @@ ans.forEach((items, component) => {
     if (message !== '0') {
       allZero = false;
     }
-    svgs += generateBadge(type, message);
+    result[type] = `${message}%`;
   });
 
-  if (!specify || component === specify) {
-    const readmePath = getReadmePath(component);
-
-    if (!fs.existsSync(readmePath)) return;
-
-    let readme = fs.readFileSync(readmePath, { encoding: 'utf-8' });
-    readme = readme.replace(/<span class="coverages-badge".+span>\n/g, '');
-    // 覆盖率全为 0 时不生成徽标内容
-    if (!allZero) {
-      readme = readme.replace('## 引入', `${svgs}\n## 引入`);
-    }
-    fs.writeFileSync(readmePath, readme);
+  // 覆盖率全为 0 时不生成数据
+  if (!allZero) {
+    coverageMap[component] = result;
   }
 });
+
+// 生成覆盖率数据模块
+const sortedKeys = Object.keys(coverageMap).sort();
+const entries = sortedKeys
+  .map((key) => {
+    const { lines, functions, statements, branches } = coverageMap[key];
+    return `  '${key}': { lines: '${lines}', functions: '${functions}', statements: '${statements}', branches: '${branches}' },`;
+  })
+  .join('\n');
+
+const moduleContent = `// 该文件由 test/scripts/coverage-badge.js 自动生成，请勿手动修改
+export default {
+${entries}
+};
+`;
+
+fs.writeFileSync(COVERAGE_MODULE_PATH, moduleContent);