From cdc817f3d5dd964d92d05bffa347ad6f0d29a1f3 Mon Sep 17 00:00:00 2001
From: Cyrus <liuxingran97@qq.com>
Date: Mon, 10 Apr 2023 15:07:10 +0800
Subject: [PATCH 001/202] fix(loading): resolve style error (#1873)

* fix(loading): resolve style error

* test: update unit test
---
 .../__test__/__snapshots__/index.test.js.snap        | 12 ++++++------
 .../__virtualHostSnapshot__/index.test.js.snap       | 12 ++++++------
 src/loading/__test__/index.test.js                   |  2 +-
 src/loading/loading.wxml                             |  4 ++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/image-viewer/__test__/__snapshots__/index.test.js.snap b/src/image-viewer/__test__/__snapshots__/index.test.js.snap
index 66610fc4f..d9a57a892 100644
--- a/src/image-viewer/__test__/__snapshots__/index.test.js.snap
+++ b/src/image-viewer/__test__/__snapshots__/index.test.js.snap
@@ -18,13 +18,13 @@ exports[`image-viewer :base 1`] = `
     >
       <wx-view
         class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx;  color: inherit"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
       >
         <wx-view
           ariaLabel="加载中"
           ariaRole="img"
           class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
         >
           <wx-view
             class="t-loading__dot"
@@ -83,13 +83,13 @@ exports[`image-viewer :base 2`] = `
     >
       <wx-view
         class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx;  color: inherit"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
       >
         <wx-view
           ariaLabel="加载中"
           ariaRole="img"
           class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
         >
           <wx-view
             class="t-loading__dot"
@@ -148,13 +148,13 @@ exports[`image-viewer :base 3`] = `
     >
       <wx-view
         class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx;  color: inherit"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
       >
         <wx-view
           ariaLabel="加载中"
           ariaRole="img"
           class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
         >
           <wx-view
             class="t-loading__dot"
diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
index cf5dd0611..c361b1971 100644
--- a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -8,13 +8,13 @@ exports[`image-viewer :base 1`] = `
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx;  color: inherit"
+    style="width: 44rpx; height: 44rpx; color: inherit;"
   >
     <wx-view
       ariaLabel="加载中"
       ariaRole="img"
       class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
         class="t-loading__dot"
@@ -46,13 +46,13 @@ exports[`image-viewer :base 2`] = `
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx;  color: inherit"
+    style="width: 44rpx; height: 44rpx; color: inherit;"
   >
     <wx-view
       ariaLabel="加载中"
       ariaRole="img"
       class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
         class="t-loading__dot"
@@ -84,13 +84,13 @@ exports[`image-viewer :base 3`] = `
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx;  color: inherit"
+    style="width: 44rpx; height: 44rpx; color: inherit;"
   >
     <wx-view
       ariaLabel="加载中"
       ariaRole="img"
       class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
         class="t-loading__dot"
diff --git a/src/loading/__test__/index.test.js b/src/loading/__test__/index.test.js
index dd4bb8a1b..86abe504e 100644
--- a/src/loading/__test__/index.test.js
+++ b/src/loading/__test__/index.test.js
@@ -57,7 +57,7 @@ describe('loading', () => {
       expect(comp.data.show).not.toBeTruthy();
 
       const $loading = comp.querySelector('.base >>> .t-loading');
-      expect($loading.dom.getAttribute('style').includes('display:none')).toBeTruthy();
+      expect($loading.dom.style.display).toBe('none');
     });
 
     it(`: theme`, () => {
diff --git a/src/loading/loading.wxml b/src/loading/loading.wxml
index a619f46bd..9d2166153 100644
--- a/src/loading/loading.wxml
+++ b/src/loading/loading.wxml
@@ -1,12 +1,12 @@
 <wxs src="../common/utils.wxs" module="_" />
 <view
-  style="{{_._style([style, customStyle, !text ? ('width: ' + _.addUnit(size) + '; height: ' + _.addUnit(size)) : ''])}} {{show ? '' : 'display:none'}} {{inheritColor ? 'color: inherit' : ''}}"
+  style="{{_._style([style, customStyle, !text ? ('width: ' + _.addUnit(size) + '; height: ' + _.addUnit(size)) : '', show ? '' : 'display: none', inheritColor ? 'color: inherit' : ''])}}"
   class="class {{prefix}}-class {{classPrefix}} {{classPrefix + '--' + layout}}"
 >
   <view
     wx:if="{{indicator}}"
     class="{{prefix}}-class-indicator {{classPrefix}}__spinner {{classPrefix}}__spinner--{{ theme }} {{reverse ? 'reverse' : ''}}"
-    style="width: {{ _.addUnit(size) }}; height: {{ _.addUnit(size) }}; {{inheritColor ? 'color: inherit' : ''}} {{indicator ? '' : 'display:none'}}; {{duration ? 'animation-duration: ' + duration / 1000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
+    style="width: {{ _.addUnit(size) }}; height: {{ _.addUnit(size) }}; {{inheritColor ? 'color: inherit;' : ''}} {{indicator ? '' : 'display: none;'}} {{duration ? 'animation-duration: ' + duration / 1000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
     aria-role="{{ariaRole  || 'img'}}"
     aria-label="{{ ariaLabel || text || '加载中'  }}"
   >

From c460d4a6efd7c6e0abeee402dc4534bb1a6d8917 Mon Sep 17 00:00:00 2001
From: favouredddd <40692560+favouredddd@users.noreply.github.com>
Date: Mon, 10 Apr 2023 15:15:13 +0800
Subject: [PATCH 002/202] =?UTF-8?q?feat:=20empty=E7=9A=84=E6=96=87?=
 =?UTF-8?q?=E6=A1=88=E6=B7=BB=E5=8A=A0=E6=8D=A2=E8=A1=8C=20(#1870)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/empty/empty.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/empty/empty.less b/src/empty/empty.less
index 8df2ecabf..b4d97fa51 100644
--- a/src/empty/empty.less
+++ b/src/empty/empty.less
@@ -28,6 +28,7 @@
     color: @empty-description-color; // 描述内容颜色
     font-size: @empty-description-font-size; // 描述内容字体大小
     line-height: @empty-description-line-height; // 描述内容行高
+    white-space: pre-wrap;
   }
 
   &__description + &__actions:not(:empty) {

From aafa11290aecf46f60a24a0f6443b528567f212d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=9C=E5=AD=9C?= <1183048003@qq.com>
Date: Mon, 10 Apr 2023 16:08:41 +0800
Subject: [PATCH 003/202] =?UTF-8?q?fix(button):=20=E4=BF=AE=E5=A4=8D[butto?=
 =?UTF-8?q?n]=20type=3D"submit"=E6=97=B6=EF=BC=8Cdisabled=E6=9C=AA?=
 =?UTF-8?q?=E7=94=9F=E6=95=88=20(#1878)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(button): 修复[button] type="submit"时，disabled未生效

修复[button] type="submit"时，disabled未生效

* fix(button): 修复[button] type="submit"时，disabled未生效

修复[button] type="submit"时，disabled未生效

* test: update snap

---------

Co-authored-by: zjianzzhang <zjianzzhang@tencent.com>
---
 src/button/button.wxml                                        | 2 +-
 .../__test__/__virtualHostSnapshot__/index.test.js.snap       | 2 +-
 .../__test__/__virtualHostSnapshot__/demo.test.js.snap        | 2 ++
 .../__test__/__virtualHostSnapshot__/index.test.js.snap       | 4 ----
 src/switch/__test__/__virtualHostSnapshot__/demo.test.js.snap | 4 ++--
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/button/button.wxml b/src/button/button.wxml
index eefa0f3fd..76fb5c23b 100644
--- a/src/button/button.wxml
+++ b/src/button/button.wxml
@@ -5,7 +5,7 @@
   style="{{_._style([style, customStyle])}}"
   data-custom="{{ customDataset }}"
   class="class {{className}}"
-  form-type="{{type}}"
+  form-type="{{disabled || loading ? '' : type}}"
   open-type="{{disabled || loading ? '' : openType}}"
   hover-stop-propagation="{{hoverStopPropagation}}"
   hover-start-time="{{hoverStartTime}}"
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
index f643b662c..5e9f6aaf6 100644
--- a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -748,7 +748,7 @@ exports[`calendar :base 1`] = `
             bind:getuserinfo="getuserinfo"
             bind:launchapp="launchapp"
             bind:opensetting="opensetting"
-            catch:tap=""
+            catch:tap="handleTap"
           >
             <wx-view
               class="t-button__content"
diff --git a/src/cascader/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/cascader/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 45fd41797..05bde4464 100644
--- a/src/cascader/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/cascader/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -166,8 +166,10 @@ exports[`Cascader Cascader base demo works fine 1`] = `
       ]
     }}"
     title="请选择地址"
+    value=""
     visible="{{false}}"
     bind:change="onChange"
+    bind:pick="onPick"
   />
 </base>
 `;
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index be5b2624b..b980c3e87 100644
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -412,10 +412,6 @@ exports[`date-time-picker :base 1`] = `
     
               </wx-view>
             </wx-view>
-            <wx-view
-              class="t-popup__close"
-              bind:tap="handleClose"
-            />
           </wx-view>
           <wx-view
             class="t-picker__mask t-picker__mask--top"
diff --git a/src/switch/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/switch/__test__/__virtualHostSnapshot__/demo.test.js.snap
index c0d1f83ce..fc066d891 100644
--- a/src/switch/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/switch/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -40,8 +40,8 @@ exports[`Switch Switch label demo works fine 1`] = `
     <t-switch
       label="{{
         Array [
-          "关",
           "开",
+          "关",
         ]
       }}"
       slot="note"
@@ -57,8 +57,8 @@ exports[`Switch Switch label demo works fine 1`] = `
       defaultValue="{{true}}"
       icon="{{
         Array [
-          "close",
           "check",
+          "close",
         ]
       }}"
       slot="note"

From 432ea8b27d9b4b0880a08c4407472d77da1bdcfb Mon Sep 17 00:00:00 2001
From: tomcat-hz <59186135+tomcat-hz@users.noreply.github.com>
Date: Mon, 10 Apr 2023 16:24:09 +0800
Subject: [PATCH 004/202] =?UTF-8?q?style(row):=20row=E5=9E=82=E7=9B=B4?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=E6=A0=B7=E5=BC=8F=20(#1866)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加row的flex布局，垂直居中
---
 src/row/row.less | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/row/row.less b/src/row/row.less
index c206b7cf7..0c31a451e 100644
--- a/src/row/row.less
+++ b/src/row/row.less
@@ -1,3 +1,8 @@
+.t-row {
+  display: flex;
+  align-items: center;
+}
+
 .t-row:after {
   clear: both;
   content: '';

From 9288e4cbf7dc0fd058c62bfae74a74a6b93374bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=99=E9=A3=8E?= <455947455@qq.com>
Date: Mon, 10 Apr 2023 16:39:01 +0800
Subject: [PATCH 005/202] =?UTF-8?q?fix(progress):=20=E5=AE=89=E5=8D=93?=
 =?UTF-8?q?=E6=9C=BA=E6=9C=97=E8=AF=BB=E5=BC=82=E5=B8=B8=20&=20=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E6=9C=97=E8=AF=BB=20(#1354)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 安卓机朗读异常

* fix: fix code

* fix: 安卓不发音

* fix: fix code

* fix: wip 优化中

* fix: 优化

* chore: update snap

* fix: fix code

* fix: fix code

* fix: 错误使用iOS变量

* fix(补充注释): 补充注释

* fix: 优化

* test: update snap

* fix: 补充注释

* fix: 优化部分注释, remove code

* fix: 优化注释

---------

Co-authored-by: leejimqiu <leejimqiu@gmail.com>
---
 .../index.test.js.snap                        |   50 +-
 .../index.test.js.snap                        | 1386 +++++++++--------
 .../index.test.js.snap                        |   80 +-
 .../index.test.js.snap                        |  260 ++--
 .../index.test.js.snap                        |   64 +-
 .../index.test.js.snap                        |  702 +++++----
 .../index.test.js.snap                        |   74 +-
 .../index.test.js.snap                        |   18 +-
 .../index.test.js.snap                        |   16 +-
 .../index.test.js.snap                        |  216 ++-
 .../index.test.js.snap                        |  103 +-
 .../index.test.js.snap                        |  332 ++--
 .../index.test.js.snap                        |  142 +-
 .../index.test.js.snap                        |  210 +--
 .../index.test.js.snap                        |  116 +-
 .../index.test.js.snap                        |   20 +-
 .../index.test.js.snap                        |  236 +--
 .../__test__/__snapshots__/demo.test.js.snap  |    1 +
 .../__virtualHostSnapshot__/demo.test.js.snap |    1 +
 src/progress/_example/transition/index.wxml   |    2 +-
 src/progress/progress.ts                      |   15 +
 src/progress/progress.wxml                    |   52 +-
 src/progress/progress.wxs                     |   23 +-
 .../index.test.js.snap                        |   78 +-
 .../index.test.js.snap                        |  216 +--
 .../index.test.js.snap                        |  104 +-
 .../index.test.js.snap                        |   30 +-
 .../index.test.js.snap                        |   88 +-
 28 files changed, 2535 insertions(+), 2100 deletions(-)

diff --git a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5cd6176dc..c292c83f6 100644
--- a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,35 +2,45 @@
 
 exports[`Avatar & Avatar Groups Avatar Props : style && customStyle 1`] = `
 <main>
-  <wx-view
-    class="t-avatar__wrapper class t-class"
-    style="color: red; font-size: 9px;"
+  <main
+    class="avatar"
   >
     <wx-view
-      ariaDescribedby="t_badge_0_description"
-      ariaLabelledby="t_badge_0_label"
-      ariaRole="option"
-      class="t-badge  class t-class"
-      style=""
+      class="t-avatar__wrapper class t-class"
+      style="color: red; font-size: 9px;"
     >
-      <wx-view
-        ariaHidden="true"
-        class="t-badge__content t-class-content"
-        id="t_badge_0_label"
+      <t-badge
+        tClass=""
+        tClassContent=""
+        tClassCount=""
       >
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="头像"
-          ariaRole="img"
-          class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
+          ariaDescribedby="t_badge_0_description"
+          ariaLabelledby="t_badge_0_label"
+          ariaRole="option"
+          class="t-badge  class t-class"
           style=""
         >
           <wx-view
-            class="t-avatar__text t-class-content"
-          />
+            ariaHidden="true"
+            class="t-badge__content t-class-content"
+            id="t_badge_0_label"
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel="头像"
+              ariaRole="img"
+              class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
+              style=""
+            >
+              <wx-view
+                class="t-avatar__text t-class-content"
+              />
+            </wx-view>
+          </wx-view>
         </wx-view>
-      </wx-view>
+      </t-badge>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5e9f6aaf6..750455c3f 100644
--- a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,721 +2,785 @@
 
 exports[`calendar :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
-  >
-    <wx-view
-      class="t-popup__content t-class-content"
+  <t-calendar>
+    <t-popup
+      class="class"
+      bind:visible-change="onVisibleChange"
     >
       <wx-view
-        class="t-calendar t-calendar--popup class t-class"
-        style=""
+        ariaModal="{{true}}"
+        ariaRole="dialog"
+        class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+        style="z-index:11500;"
+        bind:transitionend="onTransitionEnd"
       >
         <wx-view
-          class="t-calendar__title"
-          tabindex="0"
+          class="t-popup__content t-class-content"
         >
-          <wx-text>
-            请选择日期
-          </wx-text>
-        </wx-view>
-        <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="关闭"
-          ariaRole="button"
-          class="t-icon class t-class"
-          style="font-size: 24px;"
-          bind:tap="onTap"
-        >
-          <wx-label
-            class="t-icon-close t-icon-base"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          class="t-calendar__days"
-        >
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            日
-          </wx-view>
           <wx-view
-            class="t-calendar__days-item"
-          >
-            一
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            二
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            三
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            四
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            五
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            六
-          </wx-view>
-        </wx-view>
-        <wx-scroll-view
-          class="t-calendar__months"
-          enhanced="{{true}}"
-          scrollIntoView="year_2022_month_9"
-          scrollY="{{true}}"
-          showScrollbar="{{false}}"
-        >
-          <wx-view
-            class="t-calendar__month"
-            id="year_2022_month_9"
-          >
-            2022 年 10 月
-          </wx-view>
-          <wx-view
-            class="t-calendar__dates"
+            class="t-calendar t-calendar--popup class t-class"
+            style=""
           >
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
             <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月1日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 1,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+              class="t-calendar__title"
+              tabindex="0"
+            >
+              <wx-text>
+                请选择日期
+              </wx-text>
+            </wx-view>
+            <t-icon
+              class="t-calendar__close-btn"
+              bind:tap="handleClose"
+            >
+              <wx-view
+                ariaHidden="{{false}}"
+                ariaLabel="关闭"
+                ariaRole="button"
+                class="t-icon class t-class"
+                style="font-size: 24px;"
+                bind:tap="onTap"
+              >
+                <wx-label
+                  class="t-icon-close t-icon-base"
+                />
+              </wx-view>
+            </t-icon>
+            <wx-view
+              ariaHidden="{{true}}"
+              class="t-calendar__days"
+            >
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                日
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                一
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                二
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                三
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                四
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                五
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                六
+              </wx-view>
+            </wx-view>
+            <wx-scroll-view
+              class="t-calendar__months"
+              enhanced="{{true}}"
+              scrollIntoView="year_2022_month_9"
+              scrollY="{{true}}"
+              showScrollbar="{{false}}"
+            >
+              <wx-view
+                class="t-calendar__month"
+                id="year_2022_month_9"
+              >
+                2022 年 10 月
+              </wx-view>
+              <wx-view
+                class="t-calendar__dates"
+              >
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月1日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 1,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             1
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月2日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 2,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月2日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 2,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             2
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月3日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 3,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月3日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 3,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             3
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月4日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 4,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月4日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 4,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             4
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月5日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 5,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月5日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 5,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             5
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月6日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 6,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月6日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 6,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             6
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月7日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 7,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月7日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 7,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             7
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月8日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 8,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月8日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 8,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             8
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月9日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 9,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月9日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 9,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             9
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月10日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 10,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月10日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 10,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             10
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月11日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 11,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月11日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 11,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             11
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月12日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 12,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月12日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 12,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             12
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月13日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 13,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月13日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 13,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             13
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月14日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 14,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月14日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 14,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             14
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月15日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 15,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月15日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 15,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             15
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="已选中, 10月16日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--selected"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 16,
-                  "type": "selected",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="已选中, 10月16日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--selected"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 16,
+                      "type": "selected",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             16
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月17日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 17,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月17日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 17,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             17
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月18日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 18,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月18日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 18,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             18
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月19日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 19,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月19日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 19,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             19
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月20日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 20,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月20日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 20,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             20
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月21日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 21,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月21日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 21,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             21
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月22日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 22,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月22日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 22,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             22
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月23日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 23,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月23日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 23,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             23
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月24日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 24,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月24日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 24,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             24
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月25日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 25,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月25日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 25,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             25
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月26日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 26,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月26日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 26,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             26
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月27日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 27,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月27日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 27,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             27
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月28日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 28,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月28日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 28,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             28
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月29日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 29,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月29日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 29,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             29
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月30日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 30,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月30日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 30,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             30
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月31日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 31,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月31日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 31,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             31
             
+                </wx-view>
+              </wx-view>
+            </wx-scroll-view>
+            <wx-view
+              class="t-calendar__footer"
+            >
+              <t-button
+                class="t-calendar__confirm-btn"
+                data-extra=""
+                data-type=""
+                tClass=""
+                bind:contact="onTplButtonTap"
+                bind:error="onTplButtonTap"
+                bind:getphonenumber="onTplButtonTap"
+                bind:getuserinfo="onTplButtonTap"
+                bind:launchapp="onTplButtonTap"
+                bind:opensetting="onTplButtonTap"
+                bind:tap="onTplButtonTap"
+              >
+                <wx-button
+                  appParameter=""
+                  ariaLabel=""
+                  class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
+                  data-custom="{{null}}"
+                  formType=""
+                  hoverClass="t-button--hover"
+                  hoverStartTime="{{20}}"
+                  hoverStayTime="{{70}}"
+                  hoverStopPropagation="{{false}}"
+                  lang="en"
+                  openType=""
+                  sendMessageImg=""
+                  sendMessagePath=""
+                  sendMessageTitle=""
+                  sessionFrom=""
+                  showMessageCard="{{false}}"
+                  style=""
+                  bind:chooseavatar="chooseavatar"
+                  bind:contact="contact"
+                  bind:error="error"
+                  bind:getphonenumber="getphonenumber"
+                  bind:getuserinfo="getuserinfo"
+                  bind:launchapp="launchapp"
+                  bind:opensetting="opensetting"
+                  catch:tap="handleTap"
+                >
+                  <wx-view
+                    class="t-button__content"
+                  >
+                    
+                    确定
+                  </wx-view>
+                </wx-button>
+              </t-button>
             </wx-view>
           </wx-view>
         </wx-scroll-view>
@@ -759,20 +823,22 @@ exports[`calendar :base 1`] = `
           </wx-button>
         </wx-view>
       </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+      <t-overlay
+        class="test"
+        id="popup-overlay"
+        bind:tap="handleOverlayClick"
+      >
+        <wx-view
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
+          style="z-index:11000;"
+          bind:tap="handleClick"
+          catch:touchmove="noop"
+          bind:transitionend="onTransitionEnd"
+        />
+      </t-overlay>
+    </t-popup>
+  </t-calendar>
 </main>
 `;
diff --git a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
index 9bfb5aec0..049933a34 100644
--- a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,56 +2,66 @@
 
 exports[`cell :base 1`] = `
 <main>
-  <wx-view
-    ariaLabel=""
-    ariaRole=""
-    class="class t-class t-cell  t-cell--middle"
-    hoverClass=""
-    hoverStayTime="70"
-    style=""
-    bind:tap="onClick"
+  <main
+    id="cell"
   >
     <wx-view
-      class="t-cell__left t-class-left"
-    />
-    <wx-view
-      class="t-cell__title"
+      ariaLabel=""
+      ariaRole=""
+      class="class t-class t-cell  t-cell--middle"
+      hoverClass=""
+      hoverStayTime="70"
+      style=""
+      bind:tap="onClick"
     >
       <wx-view
-        class="t-cell__title-text  t-class-title"
+        class="t-cell__left t-class-left"
       />
       <wx-view
-        class="t-cell__description t-class-description"
+        class="t-cell__title"
+      >
+        <wx-view
+          class="t-cell__title-text  t-class-title"
+        />
+        <wx-view
+          class="t-cell__description t-class-description"
+        />
+      </wx-view>
+      <wx-view
+        class="t-cell__note t-class-note"
       />
-    </wx-view>
-    <wx-view
-      class="t-cell__note t-class-note"
-    />
-    <wx-view
-      class="t-cell__right t-class-right"
-    >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-cell__right t-class-right"
       >
-        <wx-label
-          class="t-icon- t-icon-base"
-        />
+        <t-icon
+          tClass="t-cell__right-icon t-class-right-icon"
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon- t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
 
 exports[`cell :with group 1`] = `
 <main>
-  <wx-view
-    class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
-    style=""
-  />
+  <main>
+    <wx-view
+      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
+      style=""
+    />
+  </main>
 </main>
 `;
diff --git a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
index bbad0465c..3c2af13a0 100644
--- a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,151 +1,183 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`collapse :defaultExpandAll 1`] = `
-<wx-view
-  class="class t-class t-collapse t-collapse--default"
-  style=""
+<t-collapse
+  id="expandAll"
 >
   <wx-view
-    class="class t-collapse-panel t-collapse-panel--bottom t-class"
+    class="class t-class t-collapse t-collapse--default"
     style=""
   >
-    <wx-view
-      ariaDisabled="{{false}}"
-      ariaExpanded="{{false}}"
-      ariaRole="button"
-      class="t-collapse-panel__title"
-      bind:tap="onClick"
-    >
+    <t-collapse-panel>
       <wx-view
-        ariaLabel=""
-        ariaRole=""
-        class="class t-class t-cell  t-cell--middle"
-        hoverClass=""
-        hoverStayTime="70"
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
         style=""
-        bind:tap="onClick"
       >
         <wx-view
-          class="t-cell__left t-class-left"
-        />
-        <wx-view
-          class="t-cell__title"
+          ariaDisabled="{{false}}"
+          ariaExpanded="{{false}}"
+          ariaRole="button"
+          class="t-collapse-panel__title"
+          bind:tap="onClick"
         >
-          <wx-view
-            class="t-cell__title-text  t-class-title"
+          <t-cell
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-class-header"
+            tClassHover="class-header-hover"
+            tClassNote="class-note "
+            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
+            tClassTitle="class-title "
           >
-             first 
-          </wx-view>
-          <wx-view
-            class="t-cell__description t-class-description"
-          />
+            <wx-view
+              ariaLabel=""
+              ariaRole=""
+              class="class t-class t-cell  t-cell--middle"
+              hoverClass=""
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="t-cell__left t-class-left"
+              />
+              <wx-view
+                class="t-cell__title"
+              >
+                <wx-view
+                  class="t-cell__title-text  t-class-title"
+                >
+                   first 
+                </wx-view>
+                <wx-view
+                  class="t-cell__description t-class-description"
+                />
+              </wx-view>
+              <wx-view
+                class="t-cell__note t-class-note"
+              />
+              <wx-view
+                class="t-cell__right t-class-right"
+              >
+                <t-icon
+                  tClass="t-cell__right-icon t-class-right-icon"
+                >
+                  <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
+                    class="t-icon class t-class"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-label
+                      class="t-icon-chevron-down t-icon-base"
+                    />
+                  </wx-view>
+                </t-icon>
+              </wx-view>
+            </wx-view>
+          </t-cell>
         </wx-view>
         <wx-view
-          class="t-cell__note t-class-note"
-        />
-        <wx-view
-          class="t-cell__right t-class-right"
+          animation=""
+          ariaHidden="{{true}}"
+          class="t-collapse-panel__wrapper"
         >
           <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
+            class="t-collapse-panel__content t-class-content"
           >
-            <wx-label
-              class="t-icon-chevron-down t-icon-base"
-            />
-          </wx-view>
-        </wx-view>
-      </wx-view>
-    </wx-view>
-    <wx-view
-      animation=""
-      ariaHidden="{{true}}"
-      class="t-collapse-panel__wrapper"
-    >
-      <wx-view
-        class="t-collapse-panel__content t-class-content"
-      >
-        
+            
       
       
-        内容1
+            内容1
+          </wx-view>
+        </wx-view>
       </wx-view>
-    </wx-view>
-  </wx-view>
-  <wx-view
-    class="class t-collapse-panel t-collapse-panel--bottom t-class"
-    style=""
-  >
-    <wx-view
-      ariaDisabled="{{false}}"
-      ariaExpanded="{{true}}"
-      ariaRole="button"
-      class="t-collapse-panel__title"
-      bind:tap="onClick"
-    >
+    </t-collapse-panel>
+    <t-collapse-panel>
       <wx-view
-        ariaLabel=""
-        ariaRole=""
-        class="class t-class t-cell  t-cell--middle"
-        hoverClass=""
-        hoverStayTime="70"
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
         style=""
-        bind:tap="onClick"
       >
         <wx-view
-          class="t-cell__left t-class-left"
-        />
-        <wx-view
-          class="t-cell__title"
+          ariaDisabled="{{false}}"
+          ariaExpanded="{{true}}"
+          ariaRole="button"
+          class="t-collapse-panel__title"
+          bind:tap="onClick"
         >
-          <wx-view
-            class="t-cell__title-text  t-class-title"
+          <t-cell
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
+            tClassHover="class-header-hover"
+            tClassNote="class-note "
+            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
+            tClassTitle="class-title "
           >
-             second 
-          </wx-view>
-          <wx-view
-            class="t-cell__description t-class-description"
-          />
+            <wx-view
+              ariaLabel=""
+              ariaRole=""
+              class="class t-class t-cell  t-cell--middle"
+              hoverClass=""
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="t-cell__left t-class-left"
+              />
+              <wx-view
+                class="t-cell__title"
+              >
+                <wx-view
+                  class="t-cell__title-text  t-class-title"
+                >
+                   second 
+                </wx-view>
+                <wx-view
+                  class="t-cell__description t-class-description"
+                />
+              </wx-view>
+              <wx-view
+                class="t-cell__note t-class-note"
+              />
+              <wx-view
+                class="t-cell__right t-class-right"
+              >
+                <t-icon
+                  tClass="t-cell__right-icon t-class-right-icon"
+                >
+                  <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
+                    class="t-icon class t-class"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-label
+                      class="t-icon-chevron-up t-icon-base"
+                    />
+                  </wx-view>
+                </t-icon>
+              </wx-view>
+            </wx-view>
+          </t-cell>
         </wx-view>
         <wx-view
-          class="t-cell__note t-class-note"
-        />
-        <wx-view
-          class="t-cell__right t-class-right"
+          animation=""
+          ariaHidden=""
+          class="t-collapse-panel__wrapper"
         >
           <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
+            class="t-collapse-panel__content t-class-content"
           >
-            <wx-label
-              class="t-icon-chevron-up t-icon-base"
-            />
-          </wx-view>
-        </wx-view>
-      </wx-view>
-    </wx-view>
-    <wx-view
-      animation=""
-      ariaHidden=""
-      class="t-collapse-panel__wrapper"
-    >
-      <wx-view
-        class="t-collapse-panel__content t-class-content"
-      >
-        
+            
       
       
-        内容2
+            内容2
+          </wx-view>
+        </wx-view>
       </wx-view>
-    </wx-view>
+    </t-collapse-panel>
   </wx-view>
-</wx-view>
+</t-collapse>
 `;
diff --git a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
index c4b88938b..311f3161a 100644
--- a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,48 +2,58 @@
 
 exports[`countdown :autoStart 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 01
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 01
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :base 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 01
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 01
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :base 2`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 00
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 00
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :millisecond 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
+  <t-count-down
+    id="cd"
   >
-    00 : 00 : 00
-  </wx-view>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 00
+    </wx-view>
+  </t-count-down>
 </main>
 `;
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index b980c3e87..ed00fef4e 100644
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,442 +2,470 @@
 
 exports[`date-time-picker :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
-  >
-    <wx-view
-      class="t-popup__content t-class-content"
+  <t-date-time-picker>
+    <t-picker
+      class="class t-class t-date-time-picker"
+      bind:cancel="onCancel"
+      bind:change="onConfirm"
+      bind:close="onClose"
+      bind:pick="onColumnChange"
+      bind:visible-change="onVisibleChange"
     >
-      <wx-view
-        class="t-picker t-class"
-        slot="content"
-        style=""
+      <t-popup
+        class="class"
+        bind:visible-change="onPopupChange"
       >
         <wx-view
-          class="t-picker__toolbar"
+          ariaModal="{{true}}"
+          ariaRole="dialog"
+          class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+          style="z-index:11500;"
+          bind:transitionend="onTransitionEnd"
         >
           <wx-view
-            class="t-picker__cancel t-class-cancel"
-            bind:tap="onCancel"
-          >
-            取消
-          </wx-view>
-          <wx-view
-            class="t-picker__title t-class-title"
-          >
-            选择日期
-          </wx-view>
-          <wx-view
-            class="t-picker__confirm t-class-confirm"
-            bind:tap="onConfirm"
-          >
-            确定
-          </wx-view>
-        </wx-view>
-        <wx-view
-          class="t-picker__main"
-        >
-          <wx-view
-            class="t-picker-item__group class t-class"
-            style=""
-            bind:touchcancel="onTouchEnd"
-            bind:touchend="onTouchEnd"
-            catch:touchmove="onTouchMove"
-            bind:touchstart="onTouchStart"
+            class="t-popup__content t-class-content"
           >
             <wx-view
-              class="t-picker-item__wrapper"
-              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
+              class="t-picker t-class"
+              slot="content"
+              style=""
             >
               <wx-view
-                class="t-picker-item__item"
-                data-index="{{0}}"
-              >
-                
+                class="t-picker__toolbar"
+              >
+                <wx-view
+                  class="t-picker__cancel t-class-cancel"
+                  bind:tap="onCancel"
+                >
+                  取消
+                </wx-view>
+                <wx-view
+                  class="t-picker__title t-class-title"
+                >
+                  选择日期
+                </wx-view>
+                <wx-view
+                  class="t-picker__confirm t-class-confirm"
+                  bind:tap="onConfirm"
+                >
+                  确定
+                </wx-view>
+              </wx-view>
+              <wx-view
+                class="t-picker__main"
+              >
+                <t-picker-item
+                  class="t-date-time-picker__item"
+                  index="index"
+                >
+                  <wx-view
+                    class="t-picker-item__group class t-class"
+                    style=""
+                    bind:touchcancel="onTouchEnd"
+                    bind:touchend="onTouchEnd"
+                    catch:touchmove="onTouchMove"
+                    bind:touchstart="onTouchStart"
+                  >
+                    <wx-view
+                      class="t-picker-item__wrapper"
+                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
+                    >
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{0}}"
+                      >
+                        
       2000年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{1}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{1}}"
+                      >
+                        
       2001年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{2}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{2}}"
+                      >
+                        
       2002年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{3}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{3}}"
+                      >
+                        
       2003年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{4}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{4}}"
+                      >
+                        
       2004年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{5}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{5}}"
+                      >
+                        
       2005年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{6}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{6}}"
+                      >
+                        
       2006年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{7}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{7}}"
+                      >
+                        
       2007年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{8}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{8}}"
+                      >
+                        
       2008年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{9}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{9}}"
+                      >
+                        
       2009年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{10}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{10}}"
+                      >
+                        
       2010年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{11}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{11}}"
+                      >
+                        
       2011年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{12}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{12}}"
+                      >
+                        
       2012年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{13}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{13}}"
+                      >
+                        
       2013年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{14}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{14}}"
+                      >
+                        
       2014年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{15}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{15}}"
+                      >
+                        
       2015年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{16}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{16}}"
+                      >
+                        
       2016年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{17}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{17}}"
+                      >
+                        
       2017年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{18}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{18}}"
+                      >
+                        
       2018年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{19}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{19}}"
+                      >
+                        
       2019年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{20}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{20}}"
+                      >
+                        
       2020年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item t-picker-item__item--active"
-                data-index="{{21}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item t-picker-item__item--active"
+                        data-index="{{21}}"
+                      >
+                        
       2021年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{22}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{22}}"
+                      >
+                        
       2022年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{23}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{23}}"
+                      >
+                        
       2023年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{24}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{24}}"
+                      >
+                        
       2024年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{25}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{25}}"
+                      >
+                        
       2025年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{26}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{26}}"
+                      >
+                        
       2026年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{27}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{27}}"
+                      >
+                        
       2027年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{28}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{28}}"
+                      >
+                        
       2028年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{29}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{29}}"
+                      >
+                        
       2029年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{30}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{30}}"
+                      >
+                        
       2030年
     
-              </wx-view>
-            </wx-view>
-          </wx-view>
-          <wx-view
-            class="t-picker-item__group class t-class"
-            style=""
-            bind:touchcancel="onTouchEnd"
-            bind:touchend="onTouchEnd"
-            catch:touchmove="onTouchMove"
-            bind:touchstart="onTouchStart"
-          >
-            <wx-view
-              class="t-picker-item__wrapper"
-              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
-            >
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{0}}"
-              >
-                
+                      </wx-view>
+                    </wx-view>
+                  </wx-view>
+                </t-picker-item>
+                <t-picker-item
+                  class="t-date-time-picker__item"
+                  index="index"
+                >
+                  <wx-view
+                    class="t-picker-item__group class t-class"
+                    style=""
+                    bind:touchcancel="onTouchEnd"
+                    bind:touchend="onTouchEnd"
+                    catch:touchmove="onTouchMove"
+                    bind:touchstart="onTouchStart"
+                  >
+                    <wx-view
+                      class="t-picker-item__wrapper"
+                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
+                    >
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{0}}"
+                      >
+                        
       1月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{1}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{1}}"
+                      >
+                        
       2月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{2}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{2}}"
+                      >
+                        
       3月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{3}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{3}}"
+                      >
+                        
       4月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{4}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{4}}"
+                      >
+                        
       5月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{5}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{5}}"
+                      >
+                        
       6月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{6}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{6}}"
+                      >
+                        
       7月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{7}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{7}}"
+                      >
+                        
       8月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item t-picker-item__item--active"
-                data-index="{{8}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item t-picker-item__item--active"
+                        data-index="{{8}}"
+                      >
+                        
       9月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{9}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{9}}"
+                      >
+                        
       10月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{10}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{10}}"
+                      >
+                        
       11月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{11}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{11}}"
+                      >
+                        
       12月
     
+                      </wx-view>
+                    </wx-view>
+                  </wx-view>
+                </t-picker-item>
+                <wx-view
+                  class="t-picker__mask t-picker__mask--top"
+                />
+                <wx-view
+                  class="t-picker__mask t-picker__mask--bottom"
+                />
+                <wx-view
+                  class="t-picker__indicator"
+                />
               </wx-view>
             </wx-view>
           </wx-view>
+        </wx-view>
+        <t-overlay
+          class="test"
+          id="popup-overlay"
+          bind:tap="handleOverlayClick"
+        >
           <wx-view
-            class="t-picker__mask t-picker__mask--top"
-          />
-          <wx-view
-            class="t-picker__mask t-picker__mask--bottom"
-          />
-          <wx-view
-            class="t-picker__indicator"
+            ariaLabel="关闭"
+            ariaRole="button"
+            class="t-overlay t-fade-enter t-fade-enter-active class"
+            style="z-index:11000;"
+            bind:tap="handleClick"
+            catch:touchmove="noop"
+            bind:transitionend="onTransitionEnd"
           />
-        </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+        </t-overlay>
+      </t-popup>
+    </t-picker>
+  </t-date-time-picker>
 </main>
 `;
diff --git a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
index 0ffdddadb..45a54cb24 100644
--- a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,41 +2,57 @@
 
 exports[`dialog :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
+  <t-dialog
+    id="dialog"
   >
-    <wx-view
-      class="t-popup__content t-class-content"
+    <t-popup
+      class="class"
+      tClass="t-dialog__wrapper"
+      bind:visible-change="overlayClick"
     >
       <wx-view
-        class="t-dialog t-class"
-        slot="content"
+        ariaModal="{{true}}"
+        ariaRole="dialog"
+        class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
+        style="z-index:11500;"
+        bind:transitionend="onTransitionEnd"
       >
         <wx-view
-          class="t-dialog__content t-class-content"
-        />
+          class="t-popup__content t-class-content"
+        >
+          <wx-view
+            class="t-dialog t-class"
+            slot="content"
+          >
+            <wx-view
+              class="t-dialog__content t-class-content"
+            />
+            <wx-view
+              class="t-dialog__footer t-dialog__footer--full"
+            />
+          </wx-view>
+          <wx-view
+            class="t-popup__close"
+            bind:tap="handleClose"
+          />
+        </wx-view>
+      </wx-view>
+      <t-overlay
+        class="test"
+        id="popup-overlay"
+        bind:tap="handleOverlayClick"
+      >
         <wx-view
-          class="t-dialog__footer t-dialog__footer--full"
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
+          style="z-index:11000;"
+          bind:tap="handleClick"
+          catch:touchmove="noop"
+          bind:transitionend="onTransitionEnd"
         />
-      </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+      </t-overlay>
+    </t-popup>
+  </t-dialog>
 </main>
 `;
diff --git a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
index 4fd1b24d2..473ce46af 100644
--- a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,17 +2,21 @@
 
 exports[`Divider :base 1`] = `
 <main>
-  <wx-view
-    class="class t-class "
+  <t-divider
+    class="divider"
   >
     <wx-view
-      class="t-divider t-divider--horizontal t-divider--center  "
-      style=""
+      class="class t-class "
     >
       <wx-view
-        class="t-class-content t-divider__content"
-      />
+        class="t-divider t-divider--horizontal t-divider--center  "
+        style=""
+      >
+        <wx-view
+          class="t-class-content t-divider__content"
+        />
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </t-divider>
 </main>
 `;
diff --git a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
index 663b4673d..a75d29e0d 100644
--- a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,15 +2,17 @@
 
 exports[`Footer :base 1`] = `
 <main>
-  <wx-view
-    class="t-footer class t-class"
-    style=""
-  >
+  <main>
     <wx-view
-      class="t-footer__text"
+      class="t-footer class t-class"
+      style=""
     >
-      
+      <wx-view
+        class="t-footer__text"
+      >
+        
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
index c361b1971..7b844a6a8 100644
--- a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`image-viewer :base 1`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
@@ -17,32 +18,60 @@ exports[`image-viewer :base 1`] = `
       style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx;  color: inherit"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
 
 exports[`image-viewer :base 2`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
@@ -55,32 +84,60 @@ exports[`image-viewer :base 2`] = `
       style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx;  color: inherit"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
 
 exports[`image-viewer :base 3`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
@@ -93,23 +150,50 @@ exports[`image-viewer :base 3`] = `
       style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx;  color: inherit"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
diff --git a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
index 73c7d73ee..445831548 100644
--- a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,63 +2,72 @@
 
 exports[`image :base 1`] = `
 <main>
-  <wx-view
-    ariaHidden="{{false}}"
-    class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
-    style=""
-  >
+  <t-image>
     <wx-view
-      class="t-class-load"
-      style="font-size: 44rpx"
+      ariaHidden="{{false}}"
+      class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
+      style=""
     >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel="加载失败"
-        ariaRole="img"
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-class-load"
+        style="font-size: 44rpx"
       >
-        <wx-label
-          class="t-icon-close t-icon-base"
-        />
+        <t-icon>
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel="加载失败"
+            ariaRole="img"
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-close t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{false}}"
-    mode="scaleToFill"
-    showMenuByLongpress="{{false}}"
-    src=""
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
+    <wx-image
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="class t-class t-image t-image--shape-square"
+      hidden="{{true}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="scaleToFill"
+      showMenuByLongpress="{{false}}"
+      src=""
+      style=""
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
 </main>
 `;
 
 exports[`image :success 1`] = `
 <main>
-  <wx-image
-    ariaHidden="{{false}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{false}}"
-    id="image"
-    lazyLoad="{{false}}"
-    mode="heightFix"
-    showMenuByLongpress="{{false}}"
-    src="https://www.tencent.com/img/index/menu_logo.png"
-    style="height: 0px; width: 0.00px;"
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
+  <t-image
+    id="root"
+    bind:load="handleLoad"
+  >
+    <wx-image
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      class="class t-class t-image t-image--shape-square"
+      hidden="{{false}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="heightFix"
+      showMenuByLongpress="{{false}}"
+      src="https://www.tencent.com/img/index/menu_logo.png"
+      style="height: 0px; width: 0.00px;"
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
 </main>
 `;
diff --git a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
index 595e9792e..2b1c4656a 100644
--- a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,198 +1,218 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`input props : clearable && label && suffix 1`] = `
-<wx-view
-  ariaDescribedby="{{true}}"
-  class="t-input t-input--border t-input--layout-horizontal class t-class"
-  style=""
+<t-input
+  class="base"
 >
   <wx-view
-    class="t-input__wrap--prefix"
+    ariaDescribedby="{{true}}"
+    class="t-input t-input--border t-input--layout-horizontal class t-class"
+    style=""
   >
     <wx-view
-      class="t-input__icon--prefix"
-    />
-    <wx-view
-      ariaHidden="{{true}}"
-      class="t-input__label"
+      class="t-input__wrap--prefix"
     >
-      <wx-text
-        class="t-class-label"
+      <wx-view
+        class="t-input__icon--prefix"
+      />
+      <wx-view
+        ariaHidden="{{true}}"
+        class="t-input__label"
       >
-        tdesign
-      </wx-text>
+        <wx-text
+          class="t-class-label"
+        >
+          tdesign
+        </wx-text>
+      </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-view
-    class="t-input__wrap"
-  >
     <wx-view
-      class="t-input__content t-input--default"
+      class="t-input__wrap"
     >
-      <wx-input
-        adjustPosition="{{true}}"
-        alwaysEmbed="{{false}}"
-        ariaLabel="tdesign"
-        ariaRole="textbox"
-        ariaRoledescription="tdesign"
-        autoFocus="{{false}}"
-        class="t-input__control t-input--left t-class-input"
-        confirmHold="{{false}}"
-        confirmType="done"
-        cursor="{{0}}"
-        cursorSpacing="{{0}}"
-        disabled="{{false}}"
-        focus="{{false}}"
-        holdKeyboard="{{false}}"
-        maxlength="{{-1}}"
-        password="{{false}}"
-        placeholder=""
-        placeholderClass="t-input__placeholder input-placeholder"
-        placeholderStyle=""
-        safePasswordCertPath=""
-        safePasswordCustomHash=""
-        safePasswordLength="{{0}}"
-        safePasswordNonce=""
-        safePasswordSalt=""
-        safePasswordTimeStamp="{{0}}"
-        selectionEnd="{{-1}}"
-        selectionStart="{{-1}}"
-        type="text"
-        value="input输入框"
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-        bind:keyboardheightchange="onKeyboardHeightChange"
-        bind:nicknamereview="onNickNameReview"
-      />
       <wx-view
-        class="t-input__wrap--clearable-icon"
-        bind:touchstart="clearInput"
+        class="t-input__content t-input--default"
       >
+        <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
+          ariaLabel="tdesign"
+          ariaRole="textbox"
+          ariaRoledescription="tdesign"
+          autoFocus="{{false}}"
+          class="t-input__control t-input--left t-class-input"
+          confirmHold="{{false}}"
+          confirmType="done"
+          cursor="{{0}}"
+          cursorSpacing="{{0}}"
+          disabled="{{false}}"
+          focus="{{false}}"
+          holdKeyboard="{{false}}"
+          maxlength="{{-1}}"
+          password="{{false}}"
+          placeholder=""
+          placeholderClass="t-input__placeholder input-placeholder"
+          placeholderStyle=""
+          safePasswordCertPath=""
+          safePasswordCustomHash=""
+          safePasswordLength="{{0}}"
+          safePasswordNonce=""
+          safePasswordSalt=""
+          safePasswordTimeStamp="{{0}}"
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
+          type="text"
+          value="input输入框"
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+          bind:keyboardheightchange="onKeyboardHeightChange"
+          bind:nicknamereview="onNickNameReview"
+        />
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="清除"
-          ariaRole="button"
-          class="t-icon class t-class"
-          style=""
-          bind:tap="onTap"
+          class="t-input__wrap--clearable-icon"
+          bind:touchstart="clearInput"
         >
-          <wx-label
-            class="t-icon-close-circle-filled t-icon-base"
-          />
+          <t-icon
+            class=""
+            tClass="t-class-clearable"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel="清除"
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-close-circle-filled t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
         </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-input__wrap--suffix t-class-suffix"
-        bind:tap="onSuffixClick"
-      >
-        <wx-text>
-          后置内容
-        </wx-text>
-      </wx-view>
-      <wx-view
-        class="t-input__wrap--suffix-icon"
-        bind:tap="onSuffixIconClick"
-      >
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel=""
-          ariaRole="button"
-          class="t-icon class t-class"
-          style=""
-          bind:tap="onTap"
+          class="t-input__wrap--suffix t-class-suffix"
+          bind:tap="onSuffixClick"
         >
-          <wx-label
-            class="t-icon-app t-icon-base"
-          />
+          <wx-text>
+            后置内容
+          </wx-text>
+        </wx-view>
+        <wx-view
+          class="t-input__wrap--suffix-icon"
+          bind:tap="onSuffixIconClick"
+        >
+          <t-icon
+            class=""
+            tClass="t-class-suffix-icon"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel=""
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-app t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
         </wx-view>
       </wx-view>
     </wx-view>
   </wx-view>
-</wx-view>
+</t-input>
 `;
 
 exports[`input slots : label 1`] = `
-<wx-view
-  ariaDescribedby="{{true}}"
-  class="t-input t-input--border t-input--layout-horizontal class t-class"
-  style=""
+<t-input
+  class="base"
 >
   <wx-view
-    class="t-input__wrap--prefix"
+    ariaDescribedby="{{true}}"
+    class="t-input t-input--border t-input--layout-horizontal class t-class"
+    style=""
   >
     <wx-view
-      class="t-input__icon--prefix"
-    />
-    <wx-view
-      ariaHidden="{{true}}"
-      class="t-input__label"
+      class="t-input__wrap--prefix"
     >
-      <wx-text
-        slot="label"
+      <wx-view
+        class="t-input__icon--prefix"
+      />
+      <wx-view
+        ariaHidden="{{true}}"
+        class="t-input__label"
       >
-        标签文字
         <wx-text
-          style="color: #e34d59"
+          slot="label"
         >
-          *
+          标签文字
+          <wx-text
+            style="color: #e34d59"
+          >
+            *
+          </wx-text>
         </wx-text>
-      </wx-text>
+      </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-view
-    class="t-input__wrap"
-  >
     <wx-view
-      class="t-input__content t-input--default"
+      class="t-input__wrap"
     >
-      <wx-input
-        adjustPosition="{{true}}"
-        alwaysEmbed="{{false}}"
-        ariaLabel=""
-        ariaRole="textbox"
-        ariaRoledescription=""
-        autoFocus="{{false}}"
-        class="t-input__control t-input--left t-class-input"
-        confirmHold="{{false}}"
-        confirmType="done"
-        cursor="{{0}}"
-        cursorSpacing="{{0}}"
-        disabled="{{false}}"
-        focus="{{false}}"
-        holdKeyboard="{{false}}"
-        maxlength="{{-1}}"
-        password="{{false}}"
-        placeholder=""
-        placeholderClass="t-input__placeholder input-placeholder"
-        placeholderStyle=""
-        safePasswordCertPath=""
-        safePasswordCustomHash=""
-        safePasswordLength="{{0}}"
-        safePasswordNonce=""
-        safePasswordSalt=""
-        safePasswordTimeStamp="{{0}}"
-        selectionEnd="{{-1}}"
-        selectionStart="{{-1}}"
-        type="text"
-        value=""
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-        bind:keyboardheightchange="onKeyboardHeightChange"
-        bind:nicknamereview="onNickNameReview"
-      />
       <wx-view
-        class="t-input__wrap--suffix t-class-suffix"
-        bind:tap="onSuffixClick"
-      />
-      <wx-view
-        class="t-input__wrap--suffix-icon"
-        bind:tap="onSuffixIconClick"
-      />
+        class="t-input__content t-input--default"
+      >
+        <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
+          ariaLabel=""
+          ariaRole="textbox"
+          ariaRoledescription=""
+          autoFocus="{{false}}"
+          class="t-input__control t-input--left t-class-input"
+          confirmHold="{{false}}"
+          confirmType="done"
+          cursor="{{0}}"
+          cursorSpacing="{{0}}"
+          disabled="{{false}}"
+          focus="{{false}}"
+          holdKeyboard="{{false}}"
+          maxlength="{{-1}}"
+          password="{{false}}"
+          placeholder=""
+          placeholderClass="t-input__placeholder input-placeholder"
+          placeholderStyle=""
+          safePasswordCertPath=""
+          safePasswordCustomHash=""
+          safePasswordLength="{{0}}"
+          safePasswordNonce=""
+          safePasswordSalt=""
+          safePasswordTimeStamp="{{0}}"
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
+          type="text"
+          value=""
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+          bind:keyboardheightchange="onKeyboardHeightChange"
+          bind:nicknamereview="onNickNameReview"
+        />
+        <wx-view
+          class="t-input__wrap--suffix t-class-suffix"
+          bind:tap="onSuffixClick"
+        />
+        <wx-view
+          class="t-input__wrap--suffix-icon"
+          bind:tap="onSuffixIconClick"
+        />
+      </wx-view>
     </wx-view>
   </wx-view>
-</wx-view>
+</t-input>
 `;
diff --git a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
index 8d7f31dc6..67aa8f6c8 100644
--- a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,82 +2,98 @@
 
 exports[`message props : style && customStyle 1`] = `
 <main>
-  <wx-view
-    animation="{{
-      Object {
-        "actions": Array [
-          Object {
-            "animates": Array [
-              Object {
-                "args": Array [
-                  66,
-                ],
-                "type": "translateY",
-              },
-            ],
-            "option": Object {
-              "transformOrigin": "50% 50% 0",
-              "transition": Object {
-                "delay": 0,
-                "duration": 500,
-                "timingFunction": "ease",
-              },
-            },
-          },
-        ],
-      }
-    }}"
-    ariaRole="alert"
-    class="t-message class t-class t-message--warning"
+  <t-message
     id="t-message"
-    style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
   >
     <wx-view
-      class="t-message__icon--left"
+      animation="{{
+        Object {
+          "actions": Array [
+            Object {
+              "animates": Array [
+                Object {
+                  "args": Array [
+                    66,
+                  ],
+                  "type": "translateY",
+                },
+              ],
+              "option": Object {
+                "transformOrigin": "50% 50% 0",
+                "transition": Object {
+                  "delay": 0,
+                  "duration": 500,
+                  "timingFunction": "ease",
+                },
+              },
+            },
+          ],
+        }
+      }}"
+      ariaRole="alert"
+      class="t-message class t-class t-message--warning"
+      id="t-message"
+      style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
     >
       <wx-view
-        ariaHidden="{{true}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-message__icon--left"
       >
-        <wx-label
-          class="t-icon-info-circle-filled t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-icon"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-info-circle-filled t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-message__text-wrap "
-      id="t-message__text-wrap"
-      style="text-align: left"
-    >
       <wx-view
-        animation="{{Array []}}"
-        class="t-message__text t-class-content"
-        id="t-message__text"
+        class="t-message__text-wrap "
+        id="t-message__text-wrap"
+        style="text-align: left"
       >
-        这是一条带关闭的消息通知
+        <wx-view
+          animation="{{Array []}}"
+          class="t-message__text t-class-content"
+          id="t-message__text"
+        >
+          这是一条带关闭的消息通知
+        </wx-view>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-message__icon--right"
-      bind:tap="handleClose"
-    >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel="关闭"
-        ariaRole="button"
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-message__icon--right"
+        bind:tap="handleClose"
       >
-        <wx-label
-          class="t-icon-close t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-close-btn"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel="关闭"
+            ariaRole="button"
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-close t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-message>
 </main>
 `;
diff --git a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
index c8109c4a7..18d9bf08e 100644
--- a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,165 +2,175 @@
 
 exports[`navbar :base 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
         >
-          test
-        </wx-text>
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :base 2`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :base 3`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :fixed 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
         >
-          test
-        </wx-text>
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :menu button 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed  class t-class"
-    style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width:40px;"
-  >
-    <wx-view
-      class="t-navbar__placeholder"
-    />
+  <t-navbar>
     <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed  class t-class"
+      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width:40px;"
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
diff --git a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
index e190e8a3e..7dd7671db 100644
--- a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,69 +2,79 @@
 
 exports[`notice-bar props : marquee 1`] = `
 <main>
-  <wx-view
-    class="t-notice-bar t-notice-bar--info class t-class"
-    style=""
+  <t-notice-bar
+    class="base"
   >
     <wx-view
-      class="t-notice-bar__prefix-icon"
-      bind:tap="clickPrefixIcon"
+      class="t-notice-bar t-notice-bar--info class t-class"
+      style=""
     >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-notice-bar__prefix-icon"
+        bind:tap="clickPrefixIcon"
       >
-        <wx-label
-          class="t-icon-info-circle-filled t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-prefix-icon"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-info-circle-filled t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-notice-bar__content-wrap"
-      bind:tap="clickContent"
-    >
       <wx-view
-        animation="{{
-          Object {
-            "actions": Array [
-              Object {
-                "animates": Array [
-                  Object {
-                    "args": Array [
-                      -350,
-                    ],
-                    "type": "translateX",
-                  },
-                ],
-                "option": Object {
-                  "transformOrigin": "50% 50% 0",
-                  "transition": Object {
-                    "delay": 0,
-                    "duration": 8287.5,
-                    "timingFunction": "linear",
-                  },
-                },
-              },
-            ],
-          }
-        }}"
-        class="t-notice-bar__content t-class-content "
+        class="t-notice-bar__content-wrap"
+        bind:tap="clickContent"
       >
-        提示文字描述提示文字描述提示文字描述提示文字描述文
         <wx-view
-          class="t-notice-bar__operation t-class-operation"
-          catch:tap="clickOperation"
-        />
+          animation="{{
+            Object {
+              "actions": Array [
+                Object {
+                  "animates": Array [
+                    Object {
+                      "args": Array [
+                        -350,
+                      ],
+                      "type": "translateX",
+                    },
+                  ],
+                  "option": Object {
+                    "transformOrigin": "50% 50% 0",
+                    "transition": Object {
+                      "delay": 0,
+                      "duration": 8287.5,
+                      "timingFunction": "linear",
+                    },
+                  },
+                },
+              ],
+            }
+          }}"
+          class="t-notice-bar__content t-class-content "
+        >
+          提示文字描述提示文字描述提示文字描述提示文字描述文
+          <wx-view
+            class="t-notice-bar__operation t-class-operation"
+            catch:tap="clickOperation"
+          />
+        </wx-view>
       </wx-view>
+      <wx-view
+        class="t-notice-bar__suffix-icon"
+        bind:tap="clickSuffixIcon"
+      />
     </wx-view>
-    <wx-view
-      class="t-notice-bar__suffix-icon"
-      bind:tap="clickSuffixIcon"
-    />
-  </wx-view>
+  </t-notice-bar>
 </main>
 `;
diff --git a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
index 3288499cb..7a06bb8be 100644
--- a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,14 +2,16 @@
 
 exports[`overlay :base 1`] = `
 <main>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+  <t-overlay>
+    <wx-view
+      ariaLabel="关闭"
+      ariaRole="button"
+      class="t-overlay t-fade-enter t-fade-enter-active class"
+      style="z-index:11000;"
+      bind:tap="handleClick"
+      catch:touchmove="noop"
+      bind:transitionend="onTransitionEnd"
+    />
+  </t-overlay>
 </main>
 `;
diff --git a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index 4fa9f7066..9801b437f 100644
--- a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,144 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`picker :base 1`] = `
-<wx-view
-  ariaModal="{{true}}"
-  ariaRole="dialog"
-  class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-  style="z-index:11500;"
-  bind:transitionend="onTransitionEnd"
+<t-picker
+  data-key="yearSeasons"
+  id="yearSeasons"
+  bind:cancel="onPickerCancel"
+  bind:change="onPickerChange"
+  bind:pick="onColumnChange"
 >
-  <wx-view
-    class="t-popup__content t-class-content"
+  <t-popup
+    class="class"
+    bind:visible-change="onPopupChange"
   >
     <wx-view
-      class="t-picker t-class"
-      slot="content"
-      style=""
+      ariaModal="{{true}}"
+      ariaRole="dialog"
+      class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+      style="z-index:11500;"
+      bind:transitionend="onTransitionEnd"
     >
       <wx-view
-        class="t-picker__toolbar"
+        class="t-popup__content t-class-content"
       >
         <wx-view
-          class="t-picker__cancel t-class-cancel"
-          bind:tap="onCancel"
-        >
-          取消
-        </wx-view>
-        <wx-view
-          class="t-picker__title t-class-title"
-        >
-          
-        </wx-view>
-        <wx-view
-          class="t-picker__confirm t-class-confirm"
-          bind:tap="onConfirm"
-        >
-          确认
-        </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-picker__main"
-      >
-        <wx-view
-          class="t-picker-item__group class t-class"
+          class="t-picker t-class"
+          slot="content"
           style=""
-          bind:touchcancel="onTouchEnd"
-          bind:touchend="onTouchEnd"
-          catch:touchmove="onTouchMove"
-          bind:touchstart="onTouchStart"
         >
           <wx-view
-            class="t-picker-item__wrapper"
-            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+            class="t-picker__toolbar"
           >
             <wx-view
-              class="t-picker-item__item t-picker-item__item--active"
-              data-index="{{0}}"
+              class="t-picker__cancel t-class-cancel"
+              bind:tap="onCancel"
             >
-              
-      2021年
-    
+              取消
             </wx-view>
             <wx-view
-              class="t-picker-item__item"
-              data-index="{{1}}"
+              class="t-picker__title t-class-title"
             >
               
-      2020年
-    
             </wx-view>
             <wx-view
-              class="t-picker-item__item"
-              data-index="{{2}}"
+              class="t-picker__confirm t-class-confirm"
+              bind:tap="onConfirm"
             >
-              
-      2019年
-    
+              确认
             </wx-view>
           </wx-view>
-        </wx-view>
-        <wx-view
-          class="t-picker-item__group class t-class"
-          style=""
-          bind:touchcancel="onTouchEnd"
-          bind:touchend="onTouchEnd"
-          catch:touchmove="onTouchMove"
-          bind:touchstart="onTouchStart"
-        >
           <wx-view
-            class="t-picker-item__wrapper"
-            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+            class="t-picker__main"
           >
-            <wx-view
-              class="t-picker-item__item t-picker-item__item--active"
-              data-index="{{0}}"
-            >
-              
+            <t-picker-item>
+              <wx-view
+                class="t-picker-item__group class t-class"
+                style=""
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="t-picker-item__wrapper"
+                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+                >
+                  <wx-view
+                    class="t-picker-item__item t-picker-item__item--active"
+                    data-index="{{0}}"
+                  >
+                    
+      2021年
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{1}}"
+                  >
+                    
+      2020年
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{2}}"
+                  >
+                    
+      2019年
+    
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </t-picker-item>
+            <t-picker-item>
+              <wx-view
+                class="t-picker-item__group class t-class"
+                style=""
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="t-picker-item__wrapper"
+                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+                >
+                  <wx-view
+                    class="t-picker-item__item t-picker-item__item--active"
+                    data-index="{{0}}"
+                  >
+                    
       春
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{1}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{1}}"
+                  >
+                    
       夏
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{2}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{2}}"
+                  >
+                    
       秋
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{3}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{3}}"
+                  >
+                    
       冬
     
-            </wx-view>
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </t-picker-item>
+            <wx-view
+              class="t-picker__mask t-picker__mask--top"
+            />
+            <wx-view
+              class="t-picker__mask t-picker__mask--bottom"
+            />
+            <wx-view
+              class="t-picker__indicator"
+            />
           </wx-view>
         </wx-view>
         <wx-view
-          class="t-picker__mask t-picker__mask--top"
-        />
-        <wx-view
-          class="t-picker__mask t-picker__mask--bottom"
-        />
-        <wx-view
-          class="t-picker__indicator"
+          class="t-popup__close"
+          bind:tap="handleClose"
         />
       </wx-view>
     </wx-view>
-    <wx-view
-      class="t-popup__close"
-      bind:tap="handleClose"
-    />
-  </wx-view>
-</wx-view>
+    <t-overlay
+      class="test"
+      id="popup-overlay"
+      bind:tap="handleOverlayClick"
+    >
+      <wx-view
+        ariaLabel="关闭"
+        ariaRole="button"
+        class="t-overlay t-fade-enter t-fade-enter-active class"
+        style="z-index:11000;"
+        bind:tap="handleClick"
+        catch:touchmove="noop"
+        bind:transitionend="onTransitionEnd"
+      />
+    </t-overlay>
+  </t-popup>
+</t-picker>
 `;
diff --git a/src/progress/__test__/__snapshots__/demo.test.js.snap b/src/progress/__test__/__snapshots__/demo.test.js.snap
index 644903c51..0ca5861a0 100644
--- a/src/progress/__test__/__snapshots__/demo.test.js.snap
+++ b/src/progress/__test__/__snapshots__/demo.test.js.snap
@@ -102,6 +102,7 @@ exports[`Progress Progress plump demo works fine 1`] = `
 exports[`Progress Progress transition demo works fine 1`] = `
 <transition>
   <t-progress
+    ariaLabel="88%"
     percentage="{{88}}"
   />
   <wx-view
diff --git a/src/progress/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/progress/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 644903c51..0ca5861a0 100644
--- a/src/progress/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/progress/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -102,6 +102,7 @@ exports[`Progress Progress plump demo works fine 1`] = `
 exports[`Progress Progress transition demo works fine 1`] = `
 <transition>
   <t-progress
+    ariaLabel="88%"
     percentage="{{88}}"
   />
   <wx-view
diff --git a/src/progress/_example/transition/index.wxml b/src/progress/_example/transition/index.wxml
index dab91389e..876f4fb9c 100644
--- a/src/progress/_example/transition/index.wxml
+++ b/src/progress/_example/transition/index.wxml
@@ -1,4 +1,4 @@
-<t-progress percentage="{{percentage}}" />
+<t-progress percentage="{{percentage}}" ariaLabel="{{ percentage + '%' }}" />
 
 <view class="button-group">
   <t-button bindtap="clickReduce" theme="primary" variant="plain" size="small">减少</t-button>
diff --git a/src/progress/progress.ts b/src/progress/progress.ts
index 52f1b8e19..b9342f33f 100644
--- a/src/progress/progress.ts
+++ b/src/progress/progress.ts
@@ -24,8 +24,23 @@ export default class Progress extends SuperComponent {
     heightBar: '',
     computedStatus: '',
     computedProgress: 0,
+    isIOS: false,
   };
 
+  attached() {
+    wx.getSystemInfo({
+      success: (res) => {
+        const isIOS = !!(res.system.toLowerCase().search('ios') + 1);
+        this.setData({
+          isIOS,
+        });
+      },
+      fail: (err) => {
+        console.error('progress 获取系统信息失败', err);
+      },
+    });
+  }
+
   observers = {
     percentage(percentage) {
       percentage = Math.max(0, Math.min(percentage, 100));
diff --git a/src/progress/progress.wxml b/src/progress/progress.wxml
index f531829a2..0ce673c3a 100644
--- a/src/progress/progress.wxml
+++ b/src/progress/progress.wxml
@@ -4,19 +4,16 @@
 
 <view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class">
   <view
-    aria-role="progressbar"
-    role="progressbar"
-    aria-valuenow="{{computedProgress}}"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="{{ ariaLabel || this.getAriaLabel(status) }}"
-    aria-labelledby="{{ ariaLabelledby }}"
-    aria-describedby="{{ ariaDescribedby }}"
-    aria-busy="{{ ariaBusy }}"
     wx:if="{{theme === this.PRO_THEME.LINE}}"
     class="{{classPrefix }}--thin {{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
   >
     <view
+      aria-role="progressbar"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow="{{computedProgress}}"
+      aria-label="{{ ariaLabel || (isIOS ? this.getIOSAriaLabel(status) : this.getAndroidAriaLabel(status))  }}"
+      aria-live="polite"
       class="{{classPrefix }}__bar"
       style="height: {{heightBar}}px;border-radius: {{heightBar}}px;background-color: {{bgColorBar}}"
     >
@@ -25,7 +22,8 @@
         style="background: {{colorBar}}; width: {{computedProgress + '%'}}"
       ></view>
     </view>
-    <view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label">
+    <!-- aria-hidden=true 禁用掉额外的聚焦 -->
+    <view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}">
       <template
         wx:if="{{_.includes(this.STATUS, status)}}"
         is="icon"
@@ -37,16 +35,13 @@
   </view>
 
   <view
-    wx:if="{{theme === this.PRO_THEME.PLUMP}}"
     aria-role="progressbar"
-    role="progressbar"
-    aria-valuenow="{{computedProgress}}"
     aria-valuemin="0"
     aria-valuemax="100"
-    aria-label="{{ ariaLabel || this.getAriaLabel(status) }}"
-    aria-labelledby="{{ ariaLabelledby }}"
-    aria-describedby="{{ ariaDescribedby }}"
-    aria-busy="{{ ariaBusy }}"
+    aria-valuenow="{{computedProgress}}"
+    aria-label="{{ ariaLabel || (isIOS ? this.getIOSAriaLabel(status) : this.getAndroidAriaLabel(status))  }}"
+    aria-live="polite"
+    wx:if="{{theme === this.PRO_THEME.PLUMP}}"
     class="{{classPrefix}}__bar {{classPrefix}}--plump {{computedProgress > 10 ? classPrefix + '--over-ten':  classPrefix + '--under-ten'}} {{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
     style="height: {{heightBar}}px;border-radius: {{heightBar}}px;background-color: {{bgColorBar}}"
   >
@@ -59,7 +54,11 @@
       </view>
       <slot name="label" />
     </view>
-    <view wx:if="{{label && computedProgress <= 10}}" class="{{ classPrefix }}__info {{prefix}}-class-label">
+    <view
+      wx:if="{{label && computedProgress <= 10}}"
+      class="{{ classPrefix }}__info {{prefix}}-class-label"
+      aria-hidden="{{ true }}"
+    >
       <text>{{ _.isString(label)? label: computedProgress + '%' }}</text>
     </view>
     <slot name="label" />
@@ -67,18 +66,15 @@
 
   <view
     wx:if="{{theme === this.PRO_THEME.CIRCLE}}"
-    aria-role="progressbar"
-    role="progressbar"
-    aria-valuenow="{{computedProgress}}"
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-label="{{ ariaLabel || this.getAriaLabel(status)  }}"
-    aria-labelledby="{{ ariaLabelledby }}"
-    aria-describedby="{{ ariaDescribedby }}"
-    aria-busy="{{ ariaBusy }}"
     class="{{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"
   >
     <view
+      aria-role="progressbar"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow="{{computedProgress}}"
+      aria-label="{{ ariaLabel || (isIOS ? this.getIOSAriaLabel(status) : this.getAndroidAriaLabel(status))  }}"
+      aria-live="polite"
       class="{{classPrefix}}__canvas--circle"
       style="background-image: conic-gradient( {{colorCircle || this.STATUS_COLOR[status] || '#0052d9'}} {{computedProgress}}%, {{bgColorBar || '#e7e7e7'}} 0%);"
     >
@@ -86,7 +82,7 @@
         class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"
         style="{{innerDiameter? 'width:'+ innerDiameter*2 + 'rpx;' + 'height:'+ innerDiameter*2 + 'rpx;': ''}}"
       >
-        <view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label">
+        <view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}">
           <template
             wx:if="{{_.includes(this.STATUS, status)}}"
             is="icon"
diff --git a/src/progress/progress.wxs b/src/progress/progress.wxs
index 04d10f4ec..37f05b2ba 100644
--- a/src/progress/progress.wxs
+++ b/src/progress/progress.wxs
@@ -23,7 +23,15 @@ var CIRCLE_STATUS_ICON = {
   warning: 'error',
 };
 
-var getAriaLabel = function (status) {
+/**
+ *
+ * 1. getIOSAriaLabel， getAndroidAriaLabel 两个函数的初衷是处理progress异常情况的文案识别。
+ * 2. iOS可以识别%，而安卓不会识别%，如 80， iOS可以识别成 80%， 而安卓只会80，因此android部分做了一个% 拼接，后续看是否有更好的方案去解决。
+ * 3. 安卓 talkback 版本为 8.1.0.278818032 ，只会读一次 80， 最新版本talkback 会读 80.0, 80。（目前也是一个痛点，啰嗦了）
+ *
+ */
+
+var getIOSAriaLabel = function (status) {
   if (status === 'error') {
     return '进度失败';
   }
@@ -33,6 +41,16 @@ var getAriaLabel = function (status) {
   return '';
 };
 
+var getAndroidAriaLabel = function (status) {
+  if (status === 'error') {
+    return '%' + '，进度失败';
+  }
+  if (status === 'warning') {
+    return '%' + '，进度异常';
+  }
+  return '%';
+};
+
 module.exports = {
   STATUS: STATUS,
   STATUS_TEXT: STATUS_TEXT,
@@ -40,5 +58,6 @@ module.exports = {
   STATUS_COLOR: STATUS_COLOR,
   LINE_STATUS_ICON: LINE_STATUS_ICON,
   CIRCLE_STATUS_ICON: CIRCLE_STATUS_ICON,
-  getAriaLabel: getAriaLabel,
+  getAndroidAriaLabel: getAndroidAriaLabel,
+  getIOSAriaLabel: getIOSAriaLabel,
 };
diff --git a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
index e48ef901d..f3abf4ef5 100644
--- a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,50 +2,58 @@
 
 exports[`search Props :base 1`] = `
 <main>
-  <wx-view
-    class="class t-search t-class"
-    style=""
+  <t-search
+    class="search"
   >
     <wx-view
-      class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
+      class="class t-search t-class"
+      style=""
     >
       <wx-view
-        ariaHidden="{{true}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style="font-size: 24px;"
-        bind:tap="onTap"
+        class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
       >
-        <wx-label
-          class="t-icon-search t-icon-base"
+        <t-icon
+          class="t-icon t-class-left"
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style="font-size: 24px;"
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-search t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+        <wx-input
+          class="t-input__keyword t-class-input"
+          confirmType="search"
+          disabled="{{false}}"
+          focus="{{false}}"
+          name="input"
+          placeholder=""
+          placeholderClass="t-search__placeholder t-search__placeholder--normal"
+          type="text"
+          value=""
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
         />
       </wx-view>
-      <wx-input
-        class="t-input__keyword t-class-input"
-        confirmType="search"
-        disabled="{{false}}"
-        focus="{{false}}"
-        name="input"
-        placeholder=""
-        placeholderClass="t-search__placeholder t-search__placeholder--normal"
-        type="text"
-        value=""
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-      />
-    </wx-view>
-    <wx-view
-      ariaRole="button"
-      class="t-search__search-action t-class-action"
-      bind:tap="onActionClick"
-    >
-      
+      <wx-view
+        ariaRole="button"
+        class="t-search__search-action t-class-action"
+        bind:tap="onActionClick"
+      >
+        
     提交
   
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </t-search>
 </main>
 `;
diff --git a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
index 90d44529c..9271cabc9 100644
--- a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,150 +2,162 @@
 
 exports[`skeleton Props :inner rowCol 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:24%;height:32rpx;margin-right:32rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:24%;height:32rpx;margin-right:32rpx"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:76%;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:76%;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:686rpx;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:686rpx;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:38rpx;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:38rpx;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:440rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:440rpx"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol2 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:343px;height:16px"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:343px;height:16px"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:14px;height:16px;margin-right:10px;margin-left:10px"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:small;height:small"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:14px;height:16px;margin-right:10px;margin-left:10px"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:small;height:small"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:220px"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:220px"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
diff --git a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
index cd20881f7..24d454a7f 100644
--- a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -12,18 +12,22 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__minus-icon"
     >
-      <wx-label
-        class="t-icon-remove t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-remove t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -46,18 +50,22 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__plus-icon"
     >
-      <wx-label
-        class="t-icon-add t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-add t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
 </wx-view>
 `;
@@ -74,18 +82,22 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__minus-icon"
     >
-      <wx-label
-        class="t-icon-remove t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-remove t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -108,18 +120,22 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__plus-icon"
     >
-      <wx-label
-        class="t-icon-add t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-add t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
 </wx-view>
 `;
diff --git a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
index 938cc604e..4f9ce97ac 100644
--- a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,26 +2,28 @@
 
 exports[`switch Props :base 1`] = `
 <main>
-  <wx-view
-    ariaChecked="{{false}}"
-    ariaDisabled="{{false}}"
-    ariaRole="switch"
-    class="class t-class t-switch"
-    style=""
-    bind:tap="handleSwitch"
-  >
+  <t-switch>
     <wx-view
-      class="t-switch__body t-switch__body--medium t-class-body"
+      ariaChecked="{{false}}"
+      ariaDisabled="{{false}}"
+      ariaRole="switch"
+      class="class t-class t-switch"
+      style=""
+      bind:tap="handleSwitch"
     >
       <wx-view
-        ariaHidden="{{true}}"
-        class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
+        class="t-switch__body t-switch__body--medium t-class-body"
       >
         <wx-view
-          class="t-switch__label t-switch__label--medium t-class-label"
-        />
+          ariaHidden="{{true}}"
+          class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
+        >
+          <wx-view
+            class="t-switch__label t-switch__label--medium t-class-label"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-switch>
 </main>
 `;
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5da505a7c..3e3ba44f9 100644
--- a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,51 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`textarea slots : label 1`] = `
-<wx-view
-  class="t-textarea  class t-class"
-  style=""
+<t-textarea
+  class="base"
 >
   <wx-view
-    class="t-textarea__label t-class-label"
+    class="t-textarea  class t-class"
+    style=""
   >
-    <wx-text
-      slot="label"
+    <wx-view
+      class="t-textarea__label t-class-label"
     >
-      标签文字
-    </wx-text>
-  </wx-view>
-  <wx-view
-    class="t-textarea__wrapper"
-  >
-    <wx-textarea
-      adjustPosition="{{true}}"
-      autoFocus="{{false}}"
-      autoHeight="{{false}}"
-      class="t-textarea__wrapper-inner  t-class-textarea"
-      confirmHold="{{false}}"
-      confirmType="return"
-      cursor="{{-1}}"
-      cursorSpacing="{{0}}"
-      disabled="{{false}}"
-      disableDefaultPadding="{{false}}"
-      fixed="{{false}}"
-      focus="{{false}}"
-      holdKeyboard="{{false}}"
-      maxlength="{{-1}}"
-      placeholder=""
-      placeholderClass="t-textarea__placeholder"
-      placeholderStyle=""
-      selectionEnd="{{-1}}"
-      selectionStart="{{-1}}"
-      showConfirmBar="{{true}}"
-      value=""
-      bind:blur="onBlur"
-      bind:confirm="onConfirm"
-      bind:focus="onFocus"
-      bind:input="onInput"
-      bind:keyboardheightchange="onKeyboardHeightChange"
-      bind:linechange="onLineChange"
-    />
+      <wx-text
+        slot="label"
+      >
+        标签文字
+      </wx-text>
+    </wx-view>
+    <wx-view
+      class="t-textarea__wrapper"
+    >
+      <wx-textarea
+        adjustPosition="{{true}}"
+        autoFocus="{{false}}"
+        autoHeight="{{false}}"
+        class="t-textarea__wrapper-inner  t-class-textarea"
+        confirmHold="{{false}}"
+        confirmType="return"
+        cursor="{{-1}}"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        disableDefaultPadding="{{false}}"
+        fixed="{{false}}"
+        focus="{{false}}"
+        holdKeyboard="{{false}}"
+        maxlength="{{-1}}"
+        placeholder=""
+        placeholderClass="t-textarea__placeholder"
+        placeholderStyle=""
+        selectionEnd="{{-1}}"
+        selectionStart="{{-1}}"
+        showConfirmBar="{{true}}"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:keyboardheightchange="onKeyboardHeightChange"
+        bind:linechange="onLineChange"
+      />
+    </wx-view>
   </wx-view>
-</wx-view>
+</t-textarea>
 `;

From 8da37b55bbc013c42f1ada42f953fc62b1774f0c Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Mon, 10 Apr 2023 17:44:23 +0800
Subject: [PATCH 006/202] feature/swiper aria v2 (#1598)

* feat(swiper): support aria

* feat(swiper): support custom ariaLabel

* feat(swiper): image name

* chore(swiper): update snap

---------

Co-authored-by: leejimqiu <leejimqiu@gmail.com>
---
 .../index.test.js.snap                        |   50 +-
 .../index.test.js.snap                        | 1386 ++++++++---------
 .../index.test.js.snap                        |   80 +-
 .../index.test.js.snap                        |  260 ++--
 .../index.test.js.snap                        |   64 +-
 .../index.test.js.snap                        |  702 ++++-----
 .../index.test.js.snap                        |   74 +-
 .../index.test.js.snap                        |   18 +-
 .../index.test.js.snap                        |   16 +-
 .../index.test.js.snap                        |  216 +--
 .../index.test.js.snap                        |  103 +-
 .../index.test.js.snap                        |  332 ++--
 .../index.test.js.snap                        |  142 +-
 .../index.test.js.snap                        |  210 ++-
 .../index.test.js.snap                        |  116 +-
 .../index.test.js.snap                        |   20 +-
 .../index.test.js.snap                        |  236 ++-
 .../index.test.js.snap                        |   78 +-
 .../index.test.js.snap                        |  216 ++-
 .../index.test.js.snap                        |  104 +-
 src/swiper-nav/swiper-nav.wxml                |    5 +-
 .../__test__/__snapshots__/demo.test.js.snap  |   63 +-
 .../__virtualHostSnapshot__/demo.test.js.snap |   63 +-
 src/swiper/_example/custom/index.js           |   21 +-
 src/swiper/_example/nav-btn/index.js          |   21 +-
 src/swiper/_example/vertical/index.js         |   22 +-
 src/swiper/swiper.wxml                        |    5 +-
 .../index.test.js.snap                        |   30 +-
 .../index.test.js.snap                        |   88 +-
 29 files changed, 2220 insertions(+), 2521 deletions(-)

diff --git a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
index c292c83f6..5cd6176dc 100644
--- a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,45 +2,35 @@
 
 exports[`Avatar & Avatar Groups Avatar Props : style && customStyle 1`] = `
 <main>
-  <main
-    class="avatar"
+  <wx-view
+    class="t-avatar__wrapper class t-class"
+    style="color: red; font-size: 9px;"
   >
     <wx-view
-      class="t-avatar__wrapper class t-class"
-      style="color: red; font-size: 9px;"
+      ariaDescribedby="t_badge_0_description"
+      ariaLabelledby="t_badge_0_label"
+      ariaRole="option"
+      class="t-badge  class t-class"
+      style=""
     >
-      <t-badge
-        tClass=""
-        tClassContent=""
-        tClassCount=""
+      <wx-view
+        ariaHidden="true"
+        class="t-badge__content t-class-content"
+        id="t_badge_0_label"
       >
         <wx-view
-          ariaDescribedby="t_badge_0_description"
-          ariaLabelledby="t_badge_0_label"
-          ariaRole="option"
-          class="t-badge  class t-class"
+          ariaHidden="{{false}}"
+          ariaLabel="头像"
+          ariaRole="img"
+          class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
           style=""
         >
           <wx-view
-            ariaHidden="true"
-            class="t-badge__content t-class-content"
-            id="t_badge_0_label"
-          >
-            <wx-view
-              ariaHidden="{{false}}"
-              ariaLabel="头像"
-              ariaRole="img"
-              class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
-              style=""
-            >
-              <wx-view
-                class="t-avatar__text t-class-content"
-              />
-            </wx-view>
-          </wx-view>
+            class="t-avatar__text t-class-content"
+          />
         </wx-view>
-      </t-badge>
+      </wx-view>
     </wx-view>
-  </main>
+  </wx-view>
 </main>
 `;
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 750455c3f..5e9f6aaf6 100644
--- a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,785 +2,721 @@
 
 exports[`calendar :base 1`] = `
 <main>
-  <t-calendar>
-    <t-popup
-      class="class"
-      bind:visible-change="onVisibleChange"
+  <wx-view
+    ariaModal="{{true}}"
+    ariaRole="dialog"
+    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+    style="z-index:11500;"
+    bind:transitionend="onTransitionEnd"
+  >
+    <wx-view
+      class="t-popup__content t-class-content"
     >
       <wx-view
-        ariaModal="{{true}}"
-        ariaRole="dialog"
-        class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-        style="z-index:11500;"
-        bind:transitionend="onTransitionEnd"
+        class="t-calendar t-calendar--popup class t-class"
+        style=""
       >
         <wx-view
-          class="t-popup__content t-class-content"
+          class="t-calendar__title"
+          tabindex="0"
+        >
+          <wx-text>
+            请选择日期
+          </wx-text>
+        </wx-view>
+        <wx-view
+          ariaHidden="{{false}}"
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-icon class t-class"
+          style="font-size: 24px;"
+          bind:tap="onTap"
+        >
+          <wx-label
+            class="t-icon-close t-icon-base"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          class="t-calendar__days"
         >
           <wx-view
-            class="t-calendar t-calendar--popup class t-class"
-            style=""
+            class="t-calendar__days-item"
+          >
+            日
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            一
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            二
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            三
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
           >
+            四
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            五
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            六
+          </wx-view>
+        </wx-view>
+        <wx-scroll-view
+          class="t-calendar__months"
+          enhanced="{{true}}"
+          scrollIntoView="year_2022_month_9"
+          scrollY="{{true}}"
+          showScrollbar="{{false}}"
+        >
+          <wx-view
+            class="t-calendar__month"
+            id="year_2022_month_9"
+          >
+            2022 年 10 月
+          </wx-view>
+          <wx-view
+            class="t-calendar__dates"
+          >
+            <wx-view />
+            <wx-view />
+            <wx-view />
+            <wx-view />
+            <wx-view />
+            <wx-view />
             <wx-view
-              class="t-calendar__title"
-              tabindex="0"
-            >
-              <wx-text>
-                请选择日期
-              </wx-text>
-            </wx-view>
-            <t-icon
-              class="t-calendar__close-btn"
-              bind:tap="handleClose"
-            >
-              <wx-view
-                ariaHidden="{{false}}"
-                ariaLabel="关闭"
-                ariaRole="button"
-                class="t-icon class t-class"
-                style="font-size: 24px;"
-                bind:tap="onTap"
-              >
-                <wx-label
-                  class="t-icon-close t-icon-base"
-                />
-              </wx-view>
-            </t-icon>
-            <wx-view
-              ariaHidden="{{true}}"
-              class="t-calendar__days"
-            >
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                日
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                一
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                二
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                三
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                四
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                五
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                六
-              </wx-view>
-            </wx-view>
-            <wx-scroll-view
-              class="t-calendar__months"
-              enhanced="{{true}}"
-              scrollIntoView="year_2022_month_9"
-              scrollY="{{true}}"
-              showScrollbar="{{false}}"
-            >
-              <wx-view
-                class="t-calendar__month"
-                id="year_2022_month_9"
-              >
-                2022 年 10 月
-              </wx-view>
-              <wx-view
-                class="t-calendar__dates"
-              >
-                <wx-view />
-                <wx-view />
-                <wx-view />
-                <wx-view />
-                <wx-view />
-                <wx-view />
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月1日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 1,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+              ariaDisabled="{{false}}"
+              ariaLabel="10月1日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 1,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             1
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月2日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 2,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月2日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 2,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             2
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月3日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 3,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月3日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 3,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             3
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月4日, 星期二"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 4,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月4日, 星期二"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 4,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             4
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月5日, 星期三"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 5,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月5日, 星期三"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 5,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             5
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月6日, 星期四"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 6,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月6日, 星期四"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 6,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             6
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月7日, 星期五"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 7,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月7日, 星期五"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 7,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             7
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月8日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 8,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月8日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 8,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             8
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月9日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 9,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月9日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 9,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             9
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月10日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 10,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月10日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 10,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             10
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月11日, 星期二"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 11,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月11日, 星期二"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 11,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             11
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月12日, 星期三"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 12,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月12日, 星期三"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 12,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             12
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月13日, 星期四"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 13,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月13日, 星期四"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 13,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             13
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月14日, 星期五"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 14,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月14日, 星期五"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 14,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             14
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月15日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 15,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月15日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 15,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             15
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="已选中, 10月16日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--selected"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 16,
-                      "type": "selected",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="已选中, 10月16日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--selected"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 16,
+                  "type": "selected",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             16
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月17日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 17,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月17日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 17,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             17
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月18日, 星期二"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 18,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月18日, 星期二"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 18,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             18
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月19日, 星期三"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 19,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月19日, 星期三"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 19,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             19
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月20日, 星期四"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 20,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月20日, 星期四"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 20,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             20
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月21日, 星期五"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 21,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月21日, 星期五"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 21,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             21
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月22日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 22,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月22日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 22,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             22
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月23日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 23,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月23日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 23,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             23
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月24日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 24,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月24日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 24,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             24
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月25日, 星期二"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 25,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月25日, 星期二"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 25,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             25
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月26日, 星期三"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 26,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月26日, 星期三"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 26,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             26
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月27日, 星期四"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 27,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月27日, 星期四"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 27,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             27
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月28日, 星期五"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 28,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月28日, 星期五"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 28,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             28
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月29日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 29,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月29日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 29,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             29
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月30日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 30,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月30日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 30,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             30
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月31日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 31,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月31日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 31,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             31
             
-                </wx-view>
-              </wx-view>
-            </wx-scroll-view>
-            <wx-view
-              class="t-calendar__footer"
-            >
-              <t-button
-                class="t-calendar__confirm-btn"
-                data-extra=""
-                data-type=""
-                tClass=""
-                bind:contact="onTplButtonTap"
-                bind:error="onTplButtonTap"
-                bind:getphonenumber="onTplButtonTap"
-                bind:getuserinfo="onTplButtonTap"
-                bind:launchapp="onTplButtonTap"
-                bind:opensetting="onTplButtonTap"
-                bind:tap="onTplButtonTap"
-              >
-                <wx-button
-                  appParameter=""
-                  ariaLabel=""
-                  class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
-                  data-custom="{{null}}"
-                  formType=""
-                  hoverClass="t-button--hover"
-                  hoverStartTime="{{20}}"
-                  hoverStayTime="{{70}}"
-                  hoverStopPropagation="{{false}}"
-                  lang="en"
-                  openType=""
-                  sendMessageImg=""
-                  sendMessagePath=""
-                  sendMessageTitle=""
-                  sessionFrom=""
-                  showMessageCard="{{false}}"
-                  style=""
-                  bind:chooseavatar="chooseavatar"
-                  bind:contact="contact"
-                  bind:error="error"
-                  bind:getphonenumber="getphonenumber"
-                  bind:getuserinfo="getuserinfo"
-                  bind:launchapp="launchapp"
-                  bind:opensetting="opensetting"
-                  catch:tap="handleTap"
-                >
-                  <wx-view
-                    class="t-button__content"
-                  >
-                    
-                    确定
-                  </wx-view>
-                </wx-button>
-              </t-button>
             </wx-view>
           </wx-view>
         </wx-scroll-view>
@@ -823,22 +759,20 @@ exports[`calendar :base 1`] = `
           </wx-button>
         </wx-view>
       </wx-view>
-      <t-overlay
-        class="test"
-        id="popup-overlay"
-        bind:tap="handleOverlayClick"
-      >
-        <wx-view
-          ariaLabel="关闭"
-          ariaRole="button"
-          class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="z-index:11000;"
-          bind:tap="handleClick"
-          catch:touchmove="noop"
-          bind:transitionend="onTransitionEnd"
-        />
-      </t-overlay>
-    </t-popup>
-  </t-calendar>
+      <wx-view
+        class="t-popup__close"
+        bind:tap="handleClose"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    ariaLabel="关闭"
+    ariaRole="button"
+    class="t-overlay t-fade-enter t-fade-enter-active class"
+    style="z-index:11000;"
+    bind:tap="handleClick"
+    catch:touchmove="noop"
+    bind:transitionend="onTransitionEnd"
+  />
 </main>
 `;
diff --git a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
index 049933a34..9bfb5aec0 100644
--- a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,66 +2,56 @@
 
 exports[`cell :base 1`] = `
 <main>
-  <main
-    id="cell"
+  <wx-view
+    ariaLabel=""
+    ariaRole=""
+    class="class t-class t-cell  t-cell--middle"
+    hoverClass=""
+    hoverStayTime="70"
+    style=""
+    bind:tap="onClick"
   >
     <wx-view
-      ariaLabel=""
-      ariaRole=""
-      class="class t-class t-cell  t-cell--middle"
-      hoverClass=""
-      hoverStayTime="70"
-      style=""
-      bind:tap="onClick"
+      class="t-cell__left t-class-left"
+    />
+    <wx-view
+      class="t-cell__title"
     >
       <wx-view
-        class="t-cell__left t-class-left"
+        class="t-cell__title-text  t-class-title"
       />
       <wx-view
-        class="t-cell__title"
-      >
-        <wx-view
-          class="t-cell__title-text  t-class-title"
-        />
-        <wx-view
-          class="t-cell__description t-class-description"
-        />
-      </wx-view>
-      <wx-view
-        class="t-cell__note t-class-note"
+        class="t-cell__description t-class-description"
       />
+    </wx-view>
+    <wx-view
+      class="t-cell__note t-class-note"
+    />
+    <wx-view
+      class="t-cell__right t-class-right"
+    >
       <wx-view
-        class="t-cell__right t-class-right"
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon
-          tClass="t-cell__right-icon t-class-right-icon"
-        >
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon- t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon- t-icon-base"
+        />
       </wx-view>
     </wx-view>
-  </main>
+  </wx-view>
 </main>
 `;
 
 exports[`cell :with group 1`] = `
 <main>
-  <main>
-    <wx-view
-      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
-      style=""
-    />
-  </main>
+  <wx-view
+    class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
+    style=""
+  />
 </main>
 `;
diff --git a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
index 3c2af13a0..bbad0465c 100644
--- a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,183 +1,151 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`collapse :defaultExpandAll 1`] = `
-<t-collapse
-  id="expandAll"
+<wx-view
+  class="class t-class t-collapse t-collapse--default"
+  style=""
 >
   <wx-view
-    class="class t-class t-collapse t-collapse--default"
+    class="class t-collapse-panel t-collapse-panel--bottom t-class"
     style=""
   >
-    <t-collapse-panel>
+    <wx-view
+      ariaDisabled="{{false}}"
+      ariaExpanded="{{false}}"
+      ariaRole="button"
+      class="t-collapse-panel__title"
+      bind:tap="onClick"
+    >
       <wx-view
-        class="class t-collapse-panel t-collapse-panel--bottom t-class"
+        ariaLabel=""
+        ariaRole=""
+        class="class t-class t-cell  t-cell--middle"
+        hoverClass=""
+        hoverStayTime="70"
         style=""
+        bind:tap="onClick"
       >
         <wx-view
-          ariaDisabled="{{false}}"
-          ariaExpanded="{{false}}"
-          ariaRole="button"
-          class="t-collapse-panel__title"
-          bind:tap="onClick"
+          class="t-cell__left t-class-left"
+        />
+        <wx-view
+          class="t-cell__title"
         >
-          <t-cell
-            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-class-header"
-            tClassHover="class-header-hover"
-            tClassNote="class-note "
-            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
-            tClassTitle="class-title "
+          <wx-view
+            class="t-cell__title-text  t-class-title"
           >
-            <wx-view
-              ariaLabel=""
-              ariaRole=""
-              class="class t-class t-cell  t-cell--middle"
-              hoverClass=""
-              hoverStayTime="70"
-              style=""
-              bind:tap="onClick"
-            >
-              <wx-view
-                class="t-cell__left t-class-left"
-              />
-              <wx-view
-                class="t-cell__title"
-              >
-                <wx-view
-                  class="t-cell__title-text  t-class-title"
-                >
-                   first 
-                </wx-view>
-                <wx-view
-                  class="t-cell__description t-class-description"
-                />
-              </wx-view>
-              <wx-view
-                class="t-cell__note t-class-note"
-              />
-              <wx-view
-                class="t-cell__right t-class-right"
-              >
-                <t-icon
-                  tClass="t-cell__right-icon t-class-right-icon"
-                >
-                  <wx-view
-                    ariaHidden="{{false}}"
-                    ariaLabel=""
-                    ariaRole=""
-                    class="t-icon class t-class"
-                    style=""
-                    bind:tap="onTap"
-                  >
-                    <wx-label
-                      class="t-icon-chevron-down t-icon-base"
-                    />
-                  </wx-view>
-                </t-icon>
-              </wx-view>
-            </wx-view>
-          </t-cell>
+             first 
+          </wx-view>
+          <wx-view
+            class="t-cell__description t-class-description"
+          />
         </wx-view>
         <wx-view
-          animation=""
-          ariaHidden="{{true}}"
-          class="t-collapse-panel__wrapper"
+          class="t-cell__note t-class-note"
+        />
+        <wx-view
+          class="t-cell__right t-class-right"
         >
           <wx-view
-            class="t-collapse-panel__content t-class-content"
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
           >
-            
-      
-      
-            内容1
+            <wx-label
+              class="t-icon-chevron-down t-icon-base"
+            />
           </wx-view>
         </wx-view>
       </wx-view>
-    </t-collapse-panel>
-    <t-collapse-panel>
+    </wx-view>
+    <wx-view
+      animation=""
+      ariaHidden="{{true}}"
+      class="t-collapse-panel__wrapper"
+    >
+      <wx-view
+        class="t-collapse-panel__content t-class-content"
+      >
+        
+      
+      
+        内容1
+      </wx-view>
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="class t-collapse-panel t-collapse-panel--bottom t-class"
+    style=""
+  >
+    <wx-view
+      ariaDisabled="{{false}}"
+      ariaExpanded="{{true}}"
+      ariaRole="button"
+      class="t-collapse-panel__title"
+      bind:tap="onClick"
+    >
       <wx-view
-        class="class t-collapse-panel t-collapse-panel--bottom t-class"
+        ariaLabel=""
+        ariaRole=""
+        class="class t-class t-cell  t-cell--middle"
+        hoverClass=""
+        hoverStayTime="70"
         style=""
+        bind:tap="onClick"
       >
         <wx-view
-          ariaDisabled="{{false}}"
-          ariaExpanded="{{true}}"
-          ariaRole="button"
-          class="t-collapse-panel__title"
-          bind:tap="onClick"
+          class="t-cell__left t-class-left"
+        />
+        <wx-view
+          class="t-cell__title"
         >
-          <t-cell
-            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
-            tClassHover="class-header-hover"
-            tClassNote="class-note "
-            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
-            tClassTitle="class-title "
+          <wx-view
+            class="t-cell__title-text  t-class-title"
           >
-            <wx-view
-              ariaLabel=""
-              ariaRole=""
-              class="class t-class t-cell  t-cell--middle"
-              hoverClass=""
-              hoverStayTime="70"
-              style=""
-              bind:tap="onClick"
-            >
-              <wx-view
-                class="t-cell__left t-class-left"
-              />
-              <wx-view
-                class="t-cell__title"
-              >
-                <wx-view
-                  class="t-cell__title-text  t-class-title"
-                >
-                   second 
-                </wx-view>
-                <wx-view
-                  class="t-cell__description t-class-description"
-                />
-              </wx-view>
-              <wx-view
-                class="t-cell__note t-class-note"
-              />
-              <wx-view
-                class="t-cell__right t-class-right"
-              >
-                <t-icon
-                  tClass="t-cell__right-icon t-class-right-icon"
-                >
-                  <wx-view
-                    ariaHidden="{{false}}"
-                    ariaLabel=""
-                    ariaRole=""
-                    class="t-icon class t-class"
-                    style=""
-                    bind:tap="onTap"
-                  >
-                    <wx-label
-                      class="t-icon-chevron-up t-icon-base"
-                    />
-                  </wx-view>
-                </t-icon>
-              </wx-view>
-            </wx-view>
-          </t-cell>
+             second 
+          </wx-view>
+          <wx-view
+            class="t-cell__description t-class-description"
+          />
         </wx-view>
         <wx-view
-          animation=""
-          ariaHidden=""
-          class="t-collapse-panel__wrapper"
+          class="t-cell__note t-class-note"
+        />
+        <wx-view
+          class="t-cell__right t-class-right"
         >
           <wx-view
-            class="t-collapse-panel__content t-class-content"
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
           >
-            
-      
-      
-            内容2
+            <wx-label
+              class="t-icon-chevron-up t-icon-base"
+            />
           </wx-view>
         </wx-view>
       </wx-view>
-    </t-collapse-panel>
+    </wx-view>
+    <wx-view
+      animation=""
+      ariaHidden=""
+      class="t-collapse-panel__wrapper"
+    >
+      <wx-view
+        class="t-collapse-panel__content t-class-content"
+      >
+        
+      
+      
+        内容2
+      </wx-view>
+    </wx-view>
   </wx-view>
-</t-collapse>
+</wx-view>
 `;
diff --git a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
index 311f3161a..c4b88938b 100644
--- a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,58 +2,48 @@
 
 exports[`countdown :autoStart 1`] = `
 <main>
-  <t-count-down>
-    <wx-view
-      ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium class t-class "
-      style=""
-    >
-      00 : 00 : 01
-    </wx-view>
-  </t-count-down>
+  <wx-view
+    ariaRole="option"
+    class="t-count-down t-count-down--default t-count-down--medium class t-class "
+    style=""
+  >
+    00 : 00 : 01
+  </wx-view>
 </main>
 `;
 
 exports[`countdown :base 1`] = `
 <main>
-  <t-count-down>
-    <wx-view
-      ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium class t-class "
-      style=""
-    >
-      00 : 00 : 01
-    </wx-view>
-  </t-count-down>
+  <wx-view
+    ariaRole="option"
+    class="t-count-down t-count-down--default t-count-down--medium class t-class "
+    style=""
+  >
+    00 : 00 : 01
+  </wx-view>
 </main>
 `;
 
 exports[`countdown :base 2`] = `
 <main>
-  <t-count-down>
-    <wx-view
-      ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium class t-class "
-      style=""
-    >
-      00 : 00 : 00
-    </wx-view>
-  </t-count-down>
+  <wx-view
+    ariaRole="option"
+    class="t-count-down t-count-down--default t-count-down--medium class t-class "
+    style=""
+  >
+    00 : 00 : 00
+  </wx-view>
 </main>
 `;
 
 exports[`countdown :millisecond 1`] = `
 <main>
-  <t-count-down
-    id="cd"
+  <wx-view
+    ariaRole="option"
+    class="t-count-down t-count-down--default t-count-down--medium class t-class "
+    style=""
   >
-    <wx-view
-      ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium class t-class "
-      style=""
-    >
-      00 : 00 : 00
-    </wx-view>
-  </t-count-down>
+    00 : 00 : 00
+  </wx-view>
 </main>
 `;
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index ed00fef4e..b980c3e87 100644
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,470 +2,442 @@
 
 exports[`date-time-picker :base 1`] = `
 <main>
-  <t-date-time-picker>
-    <t-picker
-      class="class t-class t-date-time-picker"
-      bind:cancel="onCancel"
-      bind:change="onConfirm"
-      bind:close="onClose"
-      bind:pick="onColumnChange"
-      bind:visible-change="onVisibleChange"
+  <wx-view
+    ariaModal="{{true}}"
+    ariaRole="dialog"
+    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+    style="z-index:11500;"
+    bind:transitionend="onTransitionEnd"
+  >
+    <wx-view
+      class="t-popup__content t-class-content"
     >
-      <t-popup
-        class="class"
-        bind:visible-change="onPopupChange"
+      <wx-view
+        class="t-picker t-class"
+        slot="content"
+        style=""
       >
         <wx-view
-          ariaModal="{{true}}"
-          ariaRole="dialog"
-          class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-          style="z-index:11500;"
-          bind:transitionend="onTransitionEnd"
+          class="t-picker__toolbar"
         >
           <wx-view
-            class="t-popup__content t-class-content"
+            class="t-picker__cancel t-class-cancel"
+            bind:tap="onCancel"
+          >
+            取消
+          </wx-view>
+          <wx-view
+            class="t-picker__title t-class-title"
+          >
+            选择日期
+          </wx-view>
+          <wx-view
+            class="t-picker__confirm t-class-confirm"
+            bind:tap="onConfirm"
+          >
+            确定
+          </wx-view>
+        </wx-view>
+        <wx-view
+          class="t-picker__main"
+        >
+          <wx-view
+            class="t-picker-item__group class t-class"
+            style=""
+            bind:touchcancel="onTouchEnd"
+            bind:touchend="onTouchEnd"
+            catch:touchmove="onTouchMove"
+            bind:touchstart="onTouchStart"
           >
             <wx-view
-              class="t-picker t-class"
-              slot="content"
-              style=""
+              class="t-picker-item__wrapper"
+              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
             >
               <wx-view
-                class="t-picker__toolbar"
-              >
-                <wx-view
-                  class="t-picker__cancel t-class-cancel"
-                  bind:tap="onCancel"
-                >
-                  取消
-                </wx-view>
-                <wx-view
-                  class="t-picker__title t-class-title"
-                >
-                  选择日期
-                </wx-view>
-                <wx-view
-                  class="t-picker__confirm t-class-confirm"
-                  bind:tap="onConfirm"
-                >
-                  确定
-                </wx-view>
-              </wx-view>
-              <wx-view
-                class="t-picker__main"
-              >
-                <t-picker-item
-                  class="t-date-time-picker__item"
-                  index="index"
-                >
-                  <wx-view
-                    class="t-picker-item__group class t-class"
-                    style=""
-                    bind:touchcancel="onTouchEnd"
-                    bind:touchend="onTouchEnd"
-                    catch:touchmove="onTouchMove"
-                    bind:touchstart="onTouchStart"
-                  >
-                    <wx-view
-                      class="t-picker-item__wrapper"
-                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
-                    >
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{0}}"
-                      >
-                        
+                class="t-picker-item__item"
+                data-index="{{0}}"
+              >
+                
       2000年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{1}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{1}}"
+              >
+                
       2001年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{2}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{2}}"
+              >
+                
       2002年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{3}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{3}}"
+              >
+                
       2003年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{4}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{4}}"
+              >
+                
       2004年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{5}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{5}}"
+              >
+                
       2005年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{6}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{6}}"
+              >
+                
       2006年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{7}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{7}}"
+              >
+                
       2007年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{8}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{8}}"
+              >
+                
       2008年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{9}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{9}}"
+              >
+                
       2009年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{10}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{10}}"
+              >
+                
       2010年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{11}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{11}}"
+              >
+                
       2011年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{12}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{12}}"
+              >
+                
       2012年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{13}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{13}}"
+              >
+                
       2013年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{14}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{14}}"
+              >
+                
       2014年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{15}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{15}}"
+              >
+                
       2015年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{16}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{16}}"
+              >
+                
       2016年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{17}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{17}}"
+              >
+                
       2017年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{18}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{18}}"
+              >
+                
       2018年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{19}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{19}}"
+              >
+                
       2019年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{20}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{20}}"
+              >
+                
       2020年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item t-picker-item__item--active"
-                        data-index="{{21}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item t-picker-item__item--active"
+                data-index="{{21}}"
+              >
+                
       2021年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{22}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{22}}"
+              >
+                
       2022年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{23}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{23}}"
+              >
+                
       2023年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{24}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{24}}"
+              >
+                
       2024年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{25}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{25}}"
+              >
+                
       2025年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{26}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{26}}"
+              >
+                
       2026年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{27}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{27}}"
+              >
+                
       2027年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{28}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{28}}"
+              >
+                
       2028年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{29}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{29}}"
+              >
+                
       2029年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{30}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{30}}"
+              >
+                
       2030年
     
-                      </wx-view>
-                    </wx-view>
-                  </wx-view>
-                </t-picker-item>
-                <t-picker-item
-                  class="t-date-time-picker__item"
-                  index="index"
-                >
-                  <wx-view
-                    class="t-picker-item__group class t-class"
-                    style=""
-                    bind:touchcancel="onTouchEnd"
-                    bind:touchend="onTouchEnd"
-                    catch:touchmove="onTouchMove"
-                    bind:touchstart="onTouchStart"
-                  >
-                    <wx-view
-                      class="t-picker-item__wrapper"
-                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
-                    >
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{0}}"
-                      >
-                        
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="t-picker-item__group class t-class"
+            style=""
+            bind:touchcancel="onTouchEnd"
+            bind:touchend="onTouchEnd"
+            catch:touchmove="onTouchMove"
+            bind:touchstart="onTouchStart"
+          >
+            <wx-view
+              class="t-picker-item__wrapper"
+              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
+            >
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{0}}"
+              >
+                
       1月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{1}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{1}}"
+              >
+                
       2月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{2}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{2}}"
+              >
+                
       3月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{3}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{3}}"
+              >
+                
       4月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{4}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{4}}"
+              >
+                
       5月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{5}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{5}}"
+              >
+                
       6月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{6}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{6}}"
+              >
+                
       7月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{7}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{7}}"
+              >
+                
       8月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item t-picker-item__item--active"
-                        data-index="{{8}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item t-picker-item__item--active"
+                data-index="{{8}}"
+              >
+                
       9月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{9}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{9}}"
+              >
+                
       10月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{10}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{10}}"
+              >
+                
       11月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{11}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{11}}"
+              >
+                
       12月
     
-                      </wx-view>
-                    </wx-view>
-                  </wx-view>
-                </t-picker-item>
-                <wx-view
-                  class="t-picker__mask t-picker__mask--top"
-                />
-                <wx-view
-                  class="t-picker__mask t-picker__mask--bottom"
-                />
-                <wx-view
-                  class="t-picker__indicator"
-                />
               </wx-view>
             </wx-view>
           </wx-view>
-        </wx-view>
-        <t-overlay
-          class="test"
-          id="popup-overlay"
-          bind:tap="handleOverlayClick"
-        >
           <wx-view
-            ariaLabel="关闭"
-            ariaRole="button"
-            class="t-overlay t-fade-enter t-fade-enter-active class"
-            style="z-index:11000;"
-            bind:tap="handleClick"
-            catch:touchmove="noop"
-            bind:transitionend="onTransitionEnd"
+            class="t-picker__mask t-picker__mask--top"
           />
-        </t-overlay>
-      </t-popup>
-    </t-picker>
-  </t-date-time-picker>
+          <wx-view
+            class="t-picker__mask t-picker__mask--bottom"
+          />
+          <wx-view
+            class="t-picker__indicator"
+          />
+        </wx-view>
+      </wx-view>
+      <wx-view
+        class="t-popup__close"
+        bind:tap="handleClose"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    ariaLabel="关闭"
+    ariaRole="button"
+    class="t-overlay t-fade-enter t-fade-enter-active class"
+    style="z-index:11000;"
+    bind:tap="handleClick"
+    catch:touchmove="noop"
+    bind:transitionend="onTransitionEnd"
+  />
 </main>
 `;
diff --git a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
index 45a54cb24..0ffdddadb 100644
--- a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,57 +2,41 @@
 
 exports[`dialog :base 1`] = `
 <main>
-  <t-dialog
-    id="dialog"
+  <wx-view
+    ariaModal="{{true}}"
+    ariaRole="dialog"
+    class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
+    style="z-index:11500;"
+    bind:transitionend="onTransitionEnd"
   >
-    <t-popup
-      class="class"
-      tClass="t-dialog__wrapper"
-      bind:visible-change="overlayClick"
+    <wx-view
+      class="t-popup__content t-class-content"
     >
       <wx-view
-        ariaModal="{{true}}"
-        ariaRole="dialog"
-        class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
-        style="z-index:11500;"
-        bind:transitionend="onTransitionEnd"
+        class="t-dialog t-class"
+        slot="content"
       >
         <wx-view
-          class="t-popup__content t-class-content"
-        >
-          <wx-view
-            class="t-dialog t-class"
-            slot="content"
-          >
-            <wx-view
-              class="t-dialog__content t-class-content"
-            />
-            <wx-view
-              class="t-dialog__footer t-dialog__footer--full"
-            />
-          </wx-view>
-          <wx-view
-            class="t-popup__close"
-            bind:tap="handleClose"
-          />
-        </wx-view>
-      </wx-view>
-      <t-overlay
-        class="test"
-        id="popup-overlay"
-        bind:tap="handleOverlayClick"
-      >
+          class="t-dialog__content t-class-content"
+        />
         <wx-view
-          ariaLabel="关闭"
-          ariaRole="button"
-          class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="z-index:11000;"
-          bind:tap="handleClick"
-          catch:touchmove="noop"
-          bind:transitionend="onTransitionEnd"
+          class="t-dialog__footer t-dialog__footer--full"
         />
-      </t-overlay>
-    </t-popup>
-  </t-dialog>
+      </wx-view>
+      <wx-view
+        class="t-popup__close"
+        bind:tap="handleClose"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    ariaLabel="关闭"
+    ariaRole="button"
+    class="t-overlay t-fade-enter t-fade-enter-active class"
+    style="z-index:11000;"
+    bind:tap="handleClick"
+    catch:touchmove="noop"
+    bind:transitionend="onTransitionEnd"
+  />
 </main>
 `;
diff --git a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
index 473ce46af..4fd1b24d2 100644
--- a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,21 +2,17 @@
 
 exports[`Divider :base 1`] = `
 <main>
-  <t-divider
-    class="divider"
+  <wx-view
+    class="class t-class "
   >
     <wx-view
-      class="class t-class "
+      class="t-divider t-divider--horizontal t-divider--center  "
+      style=""
     >
       <wx-view
-        class="t-divider t-divider--horizontal t-divider--center  "
-        style=""
-      >
-        <wx-view
-          class="t-class-content t-divider__content"
-        />
-      </wx-view>
+        class="t-class-content t-divider__content"
+      />
     </wx-view>
-  </t-divider>
+  </wx-view>
 </main>
 `;
diff --git a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
index a75d29e0d..663b4673d 100644
--- a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,17 +2,15 @@
 
 exports[`Footer :base 1`] = `
 <main>
-  <main>
+  <wx-view
+    class="t-footer class t-class"
+    style=""
+  >
     <wx-view
-      class="t-footer class t-class"
-      style=""
+      class="t-footer__text"
     >
-      <wx-view
-        class="t-footer__text"
-      >
-        
-      </wx-view>
+      
     </wx-view>
-  </main>
+  </wx-view>
 </main>
 `;
diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
index 7b844a6a8..c361b1971 100644
--- a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`image-viewer :base 1`] = `
-<t-image
-  class="t-image-viewer__image"
-  data-index="{{0}}"
-  tClass="t-image--external"
-  bind:load="onImageLoadSuccess"
+<wx-view
+  ariaHidden="{{false}}"
+  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+  style=""
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
@@ -18,60 +17,32 @@ exports[`image-viewer :base 1`] = `
       style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx;  color: inherit"
-      >
-        <wx-view
-          ariaLabel="加载中"
-          ariaRole="img"
-          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
-        >
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          ariaLabel=""
-          class="t-loading__text t-loading__text--horizontal t-class-text"
-        />
-      </wx-view>
-    </t-loading>
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+      />
+    </wx-view>
+    <wx-view
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="t-loading__text t-loading__text--horizontal t-class-text"
+    />
   </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{true}}"
-    mode="aspectFit"
-    showMenuByLongpress="{{false}}"
-    src="a.png"
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
-</t-image>
+</wx-view>
 `;
 
 exports[`image-viewer :base 2`] = `
-<t-image
-  class="t-image-viewer__image"
-  data-index="{{0}}"
-  tClass="t-image--external"
-  bind:load="onImageLoadSuccess"
+<wx-view
+  ariaHidden="{{false}}"
+  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+  style=""
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
@@ -84,60 +55,32 @@ exports[`image-viewer :base 2`] = `
       style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx;  color: inherit"
-      >
-        <wx-view
-          ariaLabel="加载中"
-          ariaRole="img"
-          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
-        >
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          ariaLabel=""
-          class="t-loading__text t-loading__text--horizontal t-class-text"
-        />
-      </wx-view>
-    </t-loading>
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+      />
+    </wx-view>
+    <wx-view
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="t-loading__text t-loading__text--horizontal t-class-text"
+    />
   </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{true}}"
-    mode="aspectFit"
-    showMenuByLongpress="{{false}}"
-    src="a.png"
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
-</t-image>
+</wx-view>
 `;
 
 exports[`image-viewer :base 3`] = `
-<t-image
-  class="t-image-viewer__image"
-  data-index="{{0}}"
-  tClass="t-image--external"
-  bind:load="onImageLoadSuccess"
+<wx-view
+  ariaHidden="{{false}}"
+  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+  style=""
 >
   <wx-view
     class="class t-class t-loading t-loading--horizontal"
@@ -150,50 +93,23 @@ exports[`image-viewer :base 3`] = `
       style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx;  color: inherit"
-      >
-        <wx-view
-          ariaLabel="加载中"
-          ariaRole="img"
-          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit ; animation-duration: 0.8s; animation-play-state: running;"
-        >
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          ariaLabel=""
-          class="t-loading__text t-loading__text--horizontal t-class-text"
-        />
-      </wx-view>
-    </t-loading>
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+      />
+    </wx-view>
+    <wx-view
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="t-loading__text t-loading__text--horizontal t-class-text"
+    />
   </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{true}}"
-    mode="aspectFit"
-    showMenuByLongpress="{{false}}"
-    src="a.png"
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
-</t-image>
+</wx-view>
 `;
diff --git a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
index 445831548..73c7d73ee 100644
--- a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,72 +2,63 @@
 
 exports[`image :base 1`] = `
 <main>
-  <t-image>
+  <wx-view
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
+    style=""
+  >
     <wx-view
-      ariaHidden="{{false}}"
-      class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
-      style=""
+      class="t-class-load"
+      style="font-size: 44rpx"
     >
       <wx-view
-        class="t-class-load"
-        style="font-size: 44rpx"
+        ariaHidden="{{false}}"
+        ariaLabel="加载失败"
+        ariaRole="img"
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon>
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel="加载失败"
-            ariaRole="img"
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-close t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon-close t-icon-base"
+        />
       </wx-view>
     </wx-view>
-    <wx-image
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="class t-class t-image t-image--shape-square"
-      hidden="{{true}}"
-      id="image"
-      lazyLoad="{{false}}"
-      mode="scaleToFill"
-      showMenuByLongpress="{{false}}"
-      src=""
-      style=""
-      webp="{{false}}"
-      bind:error="onLoadError"
-      bind:load="onLoaded"
-    />
-  </t-image>
+  </wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{false}}"
+    mode="scaleToFill"
+    showMenuByLongpress="{{false}}"
+    src=""
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
 </main>
 `;
 
 exports[`image :success 1`] = `
 <main>
-  <t-image
-    id="root"
-    bind:load="handleLoad"
-  >
-    <wx-image
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      class="class t-class t-image t-image--shape-square"
-      hidden="{{false}}"
-      id="image"
-      lazyLoad="{{false}}"
-      mode="heightFix"
-      showMenuByLongpress="{{false}}"
-      src="https://www.tencent.com/img/index/menu_logo.png"
-      style="height: 0px; width: 0.00px;"
-      webp="{{false}}"
-      bind:error="onLoadError"
-      bind:load="onLoaded"
-    />
-  </t-image>
+  <wx-image
+    ariaHidden="{{false}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{false}}"
+    id="image"
+    lazyLoad="{{false}}"
+    mode="heightFix"
+    showMenuByLongpress="{{false}}"
+    src="https://www.tencent.com/img/index/menu_logo.png"
+    style="height: 0px; width: 0.00px;"
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
 </main>
 `;
diff --git a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
index 2b1c4656a..595e9792e 100644
--- a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,218 +1,198 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`input props : clearable && label && suffix 1`] = `
-<t-input
-  class="base"
+<wx-view
+  ariaDescribedby="{{true}}"
+  class="t-input t-input--border t-input--layout-horizontal class t-class"
+  style=""
 >
   <wx-view
-    ariaDescribedby="{{true}}"
-    class="t-input t-input--border t-input--layout-horizontal class t-class"
-    style=""
+    class="t-input__wrap--prefix"
   >
     <wx-view
-      class="t-input__wrap--prefix"
+      class="t-input__icon--prefix"
+    />
+    <wx-view
+      ariaHidden="{{true}}"
+      class="t-input__label"
     >
-      <wx-view
-        class="t-input__icon--prefix"
-      />
-      <wx-view
-        ariaHidden="{{true}}"
-        class="t-input__label"
+      <wx-text
+        class="t-class-label"
       >
-        <wx-text
-          class="t-class-label"
-        >
-          tdesign
-        </wx-text>
-      </wx-view>
+        tdesign
+      </wx-text>
     </wx-view>
+  </wx-view>
+  <wx-view
+    class="t-input__wrap"
+  >
     <wx-view
-      class="t-input__wrap"
+      class="t-input__content t-input--default"
     >
+      <wx-input
+        adjustPosition="{{true}}"
+        alwaysEmbed="{{false}}"
+        ariaLabel="tdesign"
+        ariaRole="textbox"
+        ariaRoledescription="tdesign"
+        autoFocus="{{false}}"
+        class="t-input__control t-input--left t-class-input"
+        confirmHold="{{false}}"
+        confirmType="done"
+        cursor="{{0}}"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        focus="{{false}}"
+        holdKeyboard="{{false}}"
+        maxlength="{{-1}}"
+        password="{{false}}"
+        placeholder=""
+        placeholderClass="t-input__placeholder input-placeholder"
+        placeholderStyle=""
+        safePasswordCertPath=""
+        safePasswordCustomHash=""
+        safePasswordLength="{{0}}"
+        safePasswordNonce=""
+        safePasswordSalt=""
+        safePasswordTimeStamp="{{0}}"
+        selectionEnd="{{-1}}"
+        selectionStart="{{-1}}"
+        type="text"
+        value="input输入框"
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:keyboardheightchange="onKeyboardHeightChange"
+        bind:nicknamereview="onNickNameReview"
+      />
       <wx-view
-        class="t-input__content t-input--default"
+        class="t-input__wrap--clearable-icon"
+        bind:touchstart="clearInput"
       >
-        <wx-input
-          adjustPosition="{{true}}"
-          alwaysEmbed="{{false}}"
-          ariaLabel="tdesign"
-          ariaRole="textbox"
-          ariaRoledescription="tdesign"
-          autoFocus="{{false}}"
-          class="t-input__control t-input--left t-class-input"
-          confirmHold="{{false}}"
-          confirmType="done"
-          cursor="{{0}}"
-          cursorSpacing="{{0}}"
-          disabled="{{false}}"
-          focus="{{false}}"
-          holdKeyboard="{{false}}"
-          maxlength="{{-1}}"
-          password="{{false}}"
-          placeholder=""
-          placeholderClass="t-input__placeholder input-placeholder"
-          placeholderStyle=""
-          safePasswordCertPath=""
-          safePasswordCustomHash=""
-          safePasswordLength="{{0}}"
-          safePasswordNonce=""
-          safePasswordSalt=""
-          safePasswordTimeStamp="{{0}}"
-          selectionEnd="{{-1}}"
-          selectionStart="{{-1}}"
-          type="text"
-          value="input输入框"
-          bind:blur="onBlur"
-          bind:confirm="onConfirm"
-          bind:focus="onFocus"
-          bind:input="onInput"
-          bind:keyboardheightchange="onKeyboardHeightChange"
-          bind:nicknamereview="onNickNameReview"
-        />
-        <wx-view
-          class="t-input__wrap--clearable-icon"
-          bind:touchstart="clearInput"
-        >
-          <t-icon
-            class=""
-            tClass="t-class-clearable"
-            bind:click=""
-          >
-            <wx-view
-              ariaHidden="{{false}}"
-              ariaLabel="清除"
-              ariaRole="button"
-              class="t-icon class t-class"
-              style=""
-              bind:tap="onTap"
-            >
-              <wx-label
-                class="t-icon-close-circle-filled t-icon-base"
-              />
-            </wx-view>
-          </t-icon>
-        </wx-view>
         <wx-view
-          class="t-input__wrap--suffix t-class-suffix"
-          bind:tap="onSuffixClick"
+          ariaHidden="{{false}}"
+          ariaLabel="清除"
+          ariaRole="button"
+          class="t-icon class t-class"
+          style=""
+          bind:tap="onTap"
         >
-          <wx-text>
-            后置内容
-          </wx-text>
+          <wx-label
+            class="t-icon-close-circle-filled t-icon-base"
+          />
         </wx-view>
+      </wx-view>
+      <wx-view
+        class="t-input__wrap--suffix t-class-suffix"
+        bind:tap="onSuffixClick"
+      >
+        <wx-text>
+          后置内容
+        </wx-text>
+      </wx-view>
+      <wx-view
+        class="t-input__wrap--suffix-icon"
+        bind:tap="onSuffixIconClick"
+      >
         <wx-view
-          class="t-input__wrap--suffix-icon"
-          bind:tap="onSuffixIconClick"
+          ariaHidden="{{false}}"
+          ariaLabel=""
+          ariaRole="button"
+          class="t-icon class t-class"
+          style=""
+          bind:tap="onTap"
         >
-          <t-icon
-            class=""
-            tClass="t-class-suffix-icon"
-            bind:click=""
-          >
-            <wx-view
-              ariaHidden="{{false}}"
-              ariaLabel=""
-              ariaRole="button"
-              class="t-icon class t-class"
-              style=""
-              bind:tap="onTap"
-            >
-              <wx-label
-                class="t-icon-app t-icon-base"
-              />
-            </wx-view>
-          </t-icon>
+          <wx-label
+            class="t-icon-app t-icon-base"
+          />
         </wx-view>
       </wx-view>
     </wx-view>
   </wx-view>
-</t-input>
+</wx-view>
 `;
 
 exports[`input slots : label 1`] = `
-<t-input
-  class="base"
+<wx-view
+  ariaDescribedby="{{true}}"
+  class="t-input t-input--border t-input--layout-horizontal class t-class"
+  style=""
 >
   <wx-view
-    ariaDescribedby="{{true}}"
-    class="t-input t-input--border t-input--layout-horizontal class t-class"
-    style=""
+    class="t-input__wrap--prefix"
   >
     <wx-view
-      class="t-input__wrap--prefix"
+      class="t-input__icon--prefix"
+    />
+    <wx-view
+      ariaHidden="{{true}}"
+      class="t-input__label"
     >
-      <wx-view
-        class="t-input__icon--prefix"
-      />
-      <wx-view
-        ariaHidden="{{true}}"
-        class="t-input__label"
+      <wx-text
+        slot="label"
       >
+        标签文字
         <wx-text
-          slot="label"
+          style="color: #e34d59"
         >
-          标签文字
-          <wx-text
-            style="color: #e34d59"
-          >
-            *
-          </wx-text>
+          *
         </wx-text>
-      </wx-view>
+      </wx-text>
     </wx-view>
+  </wx-view>
+  <wx-view
+    class="t-input__wrap"
+  >
     <wx-view
-      class="t-input__wrap"
+      class="t-input__content t-input--default"
     >
+      <wx-input
+        adjustPosition="{{true}}"
+        alwaysEmbed="{{false}}"
+        ariaLabel=""
+        ariaRole="textbox"
+        ariaRoledescription=""
+        autoFocus="{{false}}"
+        class="t-input__control t-input--left t-class-input"
+        confirmHold="{{false}}"
+        confirmType="done"
+        cursor="{{0}}"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        focus="{{false}}"
+        holdKeyboard="{{false}}"
+        maxlength="{{-1}}"
+        password="{{false}}"
+        placeholder=""
+        placeholderClass="t-input__placeholder input-placeholder"
+        placeholderStyle=""
+        safePasswordCertPath=""
+        safePasswordCustomHash=""
+        safePasswordLength="{{0}}"
+        safePasswordNonce=""
+        safePasswordSalt=""
+        safePasswordTimeStamp="{{0}}"
+        selectionEnd="{{-1}}"
+        selectionStart="{{-1}}"
+        type="text"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:keyboardheightchange="onKeyboardHeightChange"
+        bind:nicknamereview="onNickNameReview"
+      />
       <wx-view
-        class="t-input__content t-input--default"
-      >
-        <wx-input
-          adjustPosition="{{true}}"
-          alwaysEmbed="{{false}}"
-          ariaLabel=""
-          ariaRole="textbox"
-          ariaRoledescription=""
-          autoFocus="{{false}}"
-          class="t-input__control t-input--left t-class-input"
-          confirmHold="{{false}}"
-          confirmType="done"
-          cursor="{{0}}"
-          cursorSpacing="{{0}}"
-          disabled="{{false}}"
-          focus="{{false}}"
-          holdKeyboard="{{false}}"
-          maxlength="{{-1}}"
-          password="{{false}}"
-          placeholder=""
-          placeholderClass="t-input__placeholder input-placeholder"
-          placeholderStyle=""
-          safePasswordCertPath=""
-          safePasswordCustomHash=""
-          safePasswordLength="{{0}}"
-          safePasswordNonce=""
-          safePasswordSalt=""
-          safePasswordTimeStamp="{{0}}"
-          selectionEnd="{{-1}}"
-          selectionStart="{{-1}}"
-          type="text"
-          value=""
-          bind:blur="onBlur"
-          bind:confirm="onConfirm"
-          bind:focus="onFocus"
-          bind:input="onInput"
-          bind:keyboardheightchange="onKeyboardHeightChange"
-          bind:nicknamereview="onNickNameReview"
-        />
-        <wx-view
-          class="t-input__wrap--suffix t-class-suffix"
-          bind:tap="onSuffixClick"
-        />
-        <wx-view
-          class="t-input__wrap--suffix-icon"
-          bind:tap="onSuffixIconClick"
-        />
-      </wx-view>
+        class="t-input__wrap--suffix t-class-suffix"
+        bind:tap="onSuffixClick"
+      />
+      <wx-view
+        class="t-input__wrap--suffix-icon"
+        bind:tap="onSuffixIconClick"
+      />
     </wx-view>
   </wx-view>
-</t-input>
+</wx-view>
 `;
diff --git a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
index 67aa8f6c8..8d7f31dc6 100644
--- a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,98 +2,82 @@
 
 exports[`message props : style && customStyle 1`] = `
 <main>
-  <t-message
+  <wx-view
+    animation="{{
+      Object {
+        "actions": Array [
+          Object {
+            "animates": Array [
+              Object {
+                "args": Array [
+                  66,
+                ],
+                "type": "translateY",
+              },
+            ],
+            "option": Object {
+              "transformOrigin": "50% 50% 0",
+              "transition": Object {
+                "delay": 0,
+                "duration": 500,
+                "timingFunction": "ease",
+              },
+            },
+          },
+        ],
+      }
+    }}"
+    ariaRole="alert"
+    class="t-message class t-class t-message--warning"
     id="t-message"
+    style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
   >
     <wx-view
-      animation="{{
-        Object {
-          "actions": Array [
-            Object {
-              "animates": Array [
-                Object {
-                  "args": Array [
-                    66,
-                  ],
-                  "type": "translateY",
-                },
-              ],
-              "option": Object {
-                "transformOrigin": "50% 50% 0",
-                "transition": Object {
-                  "delay": 0,
-                  "duration": 500,
-                  "timingFunction": "ease",
-                },
-              },
-            },
-          ],
-        }
-      }}"
-      ariaRole="alert"
-      class="t-message class t-class t-message--warning"
-      id="t-message"
-      style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
+      class="t-message__icon--left"
     >
       <wx-view
-        class="t-message__icon--left"
+        ariaHidden="{{true}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon
-          class=""
-          tClass="t-class-icon"
-          bind:click=""
-        >
-          <wx-view
-            ariaHidden="{{true}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-info-circle-filled t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon-info-circle-filled t-icon-base"
+        />
       </wx-view>
+    </wx-view>
+    <wx-view
+      class="t-message__text-wrap "
+      id="t-message__text-wrap"
+      style="text-align: left"
+    >
       <wx-view
-        class="t-message__text-wrap "
-        id="t-message__text-wrap"
-        style="text-align: left"
+        animation="{{Array []}}"
+        class="t-message__text t-class-content"
+        id="t-message__text"
       >
-        <wx-view
-          animation="{{Array []}}"
-          class="t-message__text t-class-content"
-          id="t-message__text"
-        >
-          这是一条带关闭的消息通知
-        </wx-view>
+        这是一条带关闭的消息通知
       </wx-view>
+    </wx-view>
+    <wx-view
+      class="t-message__icon--right"
+      bind:tap="handleClose"
+    >
       <wx-view
-        class="t-message__icon--right"
-        bind:tap="handleClose"
+        ariaHidden="{{false}}"
+        ariaLabel="关闭"
+        ariaRole="button"
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon
-          class=""
-          tClass="t-class-close-btn"
-          bind:click=""
-        >
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel="关闭"
-            ariaRole="button"
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-close t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon-close t-icon-base"
+        />
       </wx-view>
     </wx-view>
-  </t-message>
+  </wx-view>
 </main>
 `;
diff --git a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 18d9bf08e..c8109c4a7 100644
--- a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,175 +2,165 @@
 
 exports[`navbar :base 1`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+    style=""
+  >
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style=""
+      class="t-navbar__placeholder"
+    />
+    <wx-view
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
 
 exports[`navbar :base 2`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
+    style=""
+  >
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-      style=""
+      class="t-navbar__placeholder"
+    />
+    <wx-view
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
 
 exports[`navbar :base 3`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
+    style=""
+  >
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-      style=""
+      class="t-navbar__placeholder"
+    />
+    <wx-view
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
 
 exports[`navbar :fixed 1`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+    style=""
+  >
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style=""
+      class="t-navbar__placeholder"
+    />
+    <wx-view
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
 
 exports[`navbar :menu button 1`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed  class t-class"
+    style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width:40px;"
+  >
+    <wx-view
+      class="t-navbar__placeholder"
+    />
     <wx-view
-      class="t-navbar t-navbar--fixed  class t-class"
-      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width:40px;"
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
diff --git a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 7dd7671db..e190e8a3e 100644
--- a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,79 +2,69 @@
 
 exports[`notice-bar props : marquee 1`] = `
 <main>
-  <t-notice-bar
-    class="base"
+  <wx-view
+    class="t-notice-bar t-notice-bar--info class t-class"
+    style=""
   >
     <wx-view
-      class="t-notice-bar t-notice-bar--info class t-class"
-      style=""
+      class="t-notice-bar__prefix-icon"
+      bind:tap="clickPrefixIcon"
     >
       <wx-view
-        class="t-notice-bar__prefix-icon"
-        bind:tap="clickPrefixIcon"
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon
-          class=""
-          tClass="t-class-prefix-icon"
-          bind:click=""
-        >
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-info-circle-filled t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon-info-circle-filled t-icon-base"
+        />
       </wx-view>
+    </wx-view>
+    <wx-view
+      class="t-notice-bar__content-wrap"
+      bind:tap="clickContent"
+    >
       <wx-view
-        class="t-notice-bar__content-wrap"
-        bind:tap="clickContent"
-      >
-        <wx-view
-          animation="{{
-            Object {
-              "actions": Array [
-                Object {
-                  "animates": Array [
-                    Object {
-                      "args": Array [
-                        -350,
-                      ],
-                      "type": "translateX",
-                    },
-                  ],
-                  "option": Object {
-                    "transformOrigin": "50% 50% 0",
-                    "transition": Object {
-                      "delay": 0,
-                      "duration": 8287.5,
-                      "timingFunction": "linear",
-                    },
+        animation="{{
+          Object {
+            "actions": Array [
+              Object {
+                "animates": Array [
+                  Object {
+                    "args": Array [
+                      -350,
+                    ],
+                    "type": "translateX",
+                  },
+                ],
+                "option": Object {
+                  "transformOrigin": "50% 50% 0",
+                  "transition": Object {
+                    "delay": 0,
+                    "duration": 8287.5,
+                    "timingFunction": "linear",
                   },
                 },
-              ],
-            }
-          }}"
-          class="t-notice-bar__content t-class-content "
-        >
-          提示文字描述提示文字描述提示文字描述提示文字描述文
-          <wx-view
-            class="t-notice-bar__operation t-class-operation"
-            catch:tap="clickOperation"
-          />
-        </wx-view>
+              },
+            ],
+          }
+        }}"
+        class="t-notice-bar__content t-class-content "
+      >
+        提示文字描述提示文字描述提示文字描述提示文字描述文
+        <wx-view
+          class="t-notice-bar__operation t-class-operation"
+          catch:tap="clickOperation"
+        />
       </wx-view>
-      <wx-view
-        class="t-notice-bar__suffix-icon"
-        bind:tap="clickSuffixIcon"
-      />
     </wx-view>
-  </t-notice-bar>
+    <wx-view
+      class="t-notice-bar__suffix-icon"
+      bind:tap="clickSuffixIcon"
+    />
+  </wx-view>
 </main>
 `;
diff --git a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
index 7a06bb8be..3288499cb 100644
--- a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,16 +2,14 @@
 
 exports[`overlay :base 1`] = `
 <main>
-  <t-overlay>
-    <wx-view
-      ariaLabel="关闭"
-      ariaRole="button"
-      class="t-overlay t-fade-enter t-fade-enter-active class"
-      style="z-index:11000;"
-      bind:tap="handleClick"
-      catch:touchmove="noop"
-      bind:transitionend="onTransitionEnd"
-    />
-  </t-overlay>
+  <wx-view
+    ariaLabel="关闭"
+    ariaRole="button"
+    class="t-overlay t-fade-enter t-fade-enter-active class"
+    style="z-index:11000;"
+    bind:tap="handleClick"
+    catch:touchmove="noop"
+    bind:transitionend="onTransitionEnd"
+  />
 </main>
 `;
diff --git a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index 9801b437f..4fa9f7066 100644
--- a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,176 +1,144 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`picker :base 1`] = `
-<t-picker
-  data-key="yearSeasons"
-  id="yearSeasons"
-  bind:cancel="onPickerCancel"
-  bind:change="onPickerChange"
-  bind:pick="onColumnChange"
+<wx-view
+  ariaModal="{{true}}"
+  ariaRole="dialog"
+  class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+  style="z-index:11500;"
+  bind:transitionend="onTransitionEnd"
 >
-  <t-popup
-    class="class"
-    bind:visible-change="onPopupChange"
+  <wx-view
+    class="t-popup__content t-class-content"
   >
     <wx-view
-      ariaModal="{{true}}"
-      ariaRole="dialog"
-      class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-      style="z-index:11500;"
-      bind:transitionend="onTransitionEnd"
+      class="t-picker t-class"
+      slot="content"
+      style=""
     >
       <wx-view
-        class="t-popup__content t-class-content"
+        class="t-picker__toolbar"
       >
         <wx-view
-          class="t-picker t-class"
-          slot="content"
+          class="t-picker__cancel t-class-cancel"
+          bind:tap="onCancel"
+        >
+          取消
+        </wx-view>
+        <wx-view
+          class="t-picker__title t-class-title"
+        >
+          
+        </wx-view>
+        <wx-view
+          class="t-picker__confirm t-class-confirm"
+          bind:tap="onConfirm"
+        >
+          确认
+        </wx-view>
+      </wx-view>
+      <wx-view
+        class="t-picker__main"
+      >
+        <wx-view
+          class="t-picker-item__group class t-class"
           style=""
+          bind:touchcancel="onTouchEnd"
+          bind:touchend="onTouchEnd"
+          catch:touchmove="onTouchMove"
+          bind:touchstart="onTouchStart"
         >
           <wx-view
-            class="t-picker__toolbar"
+            class="t-picker-item__wrapper"
+            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
           >
             <wx-view
-              class="t-picker__cancel t-class-cancel"
-              bind:tap="onCancel"
+              class="t-picker-item__item t-picker-item__item--active"
+              data-index="{{0}}"
             >
-              取消
+              
+      2021年
+    
             </wx-view>
             <wx-view
-              class="t-picker__title t-class-title"
+              class="t-picker-item__item"
+              data-index="{{1}}"
             >
               
+      2020年
+    
             </wx-view>
             <wx-view
-              class="t-picker__confirm t-class-confirm"
-              bind:tap="onConfirm"
+              class="t-picker-item__item"
+              data-index="{{2}}"
             >
-              确认
+              
+      2019年
+    
             </wx-view>
           </wx-view>
+        </wx-view>
+        <wx-view
+          class="t-picker-item__group class t-class"
+          style=""
+          bind:touchcancel="onTouchEnd"
+          bind:touchend="onTouchEnd"
+          catch:touchmove="onTouchMove"
+          bind:touchstart="onTouchStart"
+        >
           <wx-view
-            class="t-picker__main"
+            class="t-picker-item__wrapper"
+            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
           >
-            <t-picker-item>
-              <wx-view
-                class="t-picker-item__group class t-class"
-                style=""
-                bind:touchcancel="onTouchEnd"
-                bind:touchend="onTouchEnd"
-                catch:touchmove="onTouchMove"
-                bind:touchstart="onTouchStart"
-              >
-                <wx-view
-                  class="t-picker-item__wrapper"
-                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
-                >
-                  <wx-view
-                    class="t-picker-item__item t-picker-item__item--active"
-                    data-index="{{0}}"
-                  >
-                    
-      2021年
-    
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{1}}"
-                  >
-                    
-      2020年
-    
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{2}}"
-                  >
-                    
-      2019年
-    
-                  </wx-view>
-                </wx-view>
-              </wx-view>
-            </t-picker-item>
-            <t-picker-item>
-              <wx-view
-                class="t-picker-item__group class t-class"
-                style=""
-                bind:touchcancel="onTouchEnd"
-                bind:touchend="onTouchEnd"
-                catch:touchmove="onTouchMove"
-                bind:touchstart="onTouchStart"
-              >
-                <wx-view
-                  class="t-picker-item__wrapper"
-                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
-                >
-                  <wx-view
-                    class="t-picker-item__item t-picker-item__item--active"
-                    data-index="{{0}}"
-                  >
-                    
+            <wx-view
+              class="t-picker-item__item t-picker-item__item--active"
+              data-index="{{0}}"
+            >
+              
       春
     
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{1}}"
-                  >
-                    
+            </wx-view>
+            <wx-view
+              class="t-picker-item__item"
+              data-index="{{1}}"
+            >
+              
       夏
     
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{2}}"
-                  >
-                    
+            </wx-view>
+            <wx-view
+              class="t-picker-item__item"
+              data-index="{{2}}"
+            >
+              
       秋
     
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{3}}"
-                  >
-                    
+            </wx-view>
+            <wx-view
+              class="t-picker-item__item"
+              data-index="{{3}}"
+            >
+              
       冬
     
-                  </wx-view>
-                </wx-view>
-              </wx-view>
-            </t-picker-item>
-            <wx-view
-              class="t-picker__mask t-picker__mask--top"
-            />
-            <wx-view
-              class="t-picker__mask t-picker__mask--bottom"
-            />
-            <wx-view
-              class="t-picker__indicator"
-            />
+            </wx-view>
           </wx-view>
         </wx-view>
         <wx-view
-          class="t-popup__close"
-          bind:tap="handleClose"
+          class="t-picker__mask t-picker__mask--top"
+        />
+        <wx-view
+          class="t-picker__mask t-picker__mask--bottom"
+        />
+        <wx-view
+          class="t-picker__indicator"
         />
       </wx-view>
     </wx-view>
-    <t-overlay
-      class="test"
-      id="popup-overlay"
-      bind:tap="handleOverlayClick"
-    >
-      <wx-view
-        ariaLabel="关闭"
-        ariaRole="button"
-        class="t-overlay t-fade-enter t-fade-enter-active class"
-        style="z-index:11000;"
-        bind:tap="handleClick"
-        catch:touchmove="noop"
-        bind:transitionend="onTransitionEnd"
-      />
-    </t-overlay>
-  </t-popup>
-</t-picker>
+    <wx-view
+      class="t-popup__close"
+      bind:tap="handleClose"
+    />
+  </wx-view>
+</wx-view>
 `;
diff --git a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
index f3abf4ef5..e48ef901d 100644
--- a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,58 +2,50 @@
 
 exports[`search Props :base 1`] = `
 <main>
-  <t-search
-    class="search"
+  <wx-view
+    class="class t-search t-class"
+    style=""
   >
     <wx-view
-      class="class t-search t-class"
-      style=""
+      class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
     >
       <wx-view
-        class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
+        ariaHidden="{{true}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style="font-size: 24px;"
+        bind:tap="onTap"
       >
-        <t-icon
-          class="t-icon t-class-left"
-        >
-          <wx-view
-            ariaHidden="{{true}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style="font-size: 24px;"
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-search t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
-        <wx-input
-          class="t-input__keyword t-class-input"
-          confirmType="search"
-          disabled="{{false}}"
-          focus="{{false}}"
-          name="input"
-          placeholder=""
-          placeholderClass="t-search__placeholder t-search__placeholder--normal"
-          type="text"
-          value=""
-          bind:blur="onBlur"
-          bind:confirm="onConfirm"
-          bind:focus="onFocus"
-          bind:input="onInput"
+        <wx-label
+          class="t-icon-search t-icon-base"
         />
       </wx-view>
-      <wx-view
-        ariaRole="button"
-        class="t-search__search-action t-class-action"
-        bind:tap="onActionClick"
-      >
-        
+      <wx-input
+        class="t-input__keyword t-class-input"
+        confirmType="search"
+        disabled="{{false}}"
+        focus="{{false}}"
+        name="input"
+        placeholder=""
+        placeholderClass="t-search__placeholder t-search__placeholder--normal"
+        type="text"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+      />
+    </wx-view>
+    <wx-view
+      ariaRole="button"
+      class="t-search__search-action t-class-action"
+      bind:tap="onActionClick"
+    >
+      
     提交
   
-      </wx-view>
     </wx-view>
-  </t-search>
+  </wx-view>
 </main>
 `;
diff --git a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
index 9271cabc9..90d44529c 100644
--- a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,162 +2,150 @@
 
 exports[`skeleton Props :inner rowCol 1`] = `
 <main>
-  <t-skeleton
-    class="skeleton"
+  <wx-view
+    class="t-skeleton class t-class "
+    style=""
   >
     <wx-view
-      class="t-skeleton class t-class "
-      style=""
+      class="t-skeleton__content"
     >
       <wx-view
-        class="t-skeleton__content"
+        class="t-skeleton__row t-class-row"
       >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:24%;height:32rpx;margin-right:32rpx"
-          />
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:76%;height:32rpx"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:24%;height:32rpx;margin-right:32rpx"
+        />
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:76%;height:32rpx"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
+        <wx-view
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
       </wx-view>
     </wx-view>
-  </t-skeleton>
+  </wx-view>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol 1`] = `
 <main>
-  <t-skeleton
-    class="skeleton"
+  <wx-view
+    class="t-skeleton class t-class "
+    style=""
   >
     <wx-view
-      class="t-skeleton class t-class "
-      style=""
+      class="t-skeleton__content"
     >
       <wx-view
-        class="t-skeleton__content"
+        class="t-skeleton__row t-class-row"
       >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:686rpx;height:32rpx"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:686rpx;height:32rpx"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
+        <wx-view
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
+        />
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
-          />
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:38rpx;height:32rpx"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:38rpx;height:32rpx"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:440rpx"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:440rpx"
+        />
       </wx-view>
     </wx-view>
-  </t-skeleton>
+  </wx-view>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol2 1`] = `
 <main>
-  <t-skeleton
-    class="skeleton"
+  <wx-view
+    class="t-skeleton class t-class "
+    style=""
   >
     <wx-view
-      class="t-skeleton class t-class "
-      style=""
+      class="t-skeleton__content"
     >
       <wx-view
-        class="t-skeleton__content"
+        class="t-skeleton__row t-class-row"
       >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:343px;height:16px"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:343px;height:16px"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
+        <wx-view
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:14px;height:16px;margin-right:10px;margin-left:10px"
+        />
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:14px;height:16px;margin-right:10px;margin-left:10px"
-          />
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:small;height:small"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:small;height:small"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:220px"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:220px"
+        />
       </wx-view>
     </wx-view>
-  </t-skeleton>
+  </wx-view>
 </main>
 `;
diff --git a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
index 24d454a7f..cd20881f7 100644
--- a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -12,22 +12,18 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <t-icon
-      class="t-stepper__minus-icon"
+    <wx-view
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      ariaRole=""
+      class="t-icon class t-class"
+      style=""
+      bind:tap="onTap"
     >
-      <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
-      >
-        <wx-label
-          class="t-icon-remove t-icon-base"
-        />
-      </wx-view>
-    </t-icon>
+      <wx-label
+        class="t-icon-remove t-icon-base"
+      />
+    </wx-view>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -50,22 +46,18 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <t-icon
-      class="t-stepper__plus-icon"
+    <wx-view
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      ariaRole=""
+      class="t-icon class t-class"
+      style=""
+      bind:tap="onTap"
     >
-      <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
-      >
-        <wx-label
-          class="t-icon-add t-icon-base"
-        />
-      </wx-view>
-    </t-icon>
+      <wx-label
+        class="t-icon-add t-icon-base"
+      />
+    </wx-view>
   </wx-view>
 </wx-view>
 `;
@@ -82,22 +74,18 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <t-icon
-      class="t-stepper__minus-icon"
+    <wx-view
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      ariaRole=""
+      class="t-icon class t-class"
+      style=""
+      bind:tap="onTap"
     >
-      <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
-      >
-        <wx-label
-          class="t-icon-remove t-icon-base"
-        />
-      </wx-view>
-    </t-icon>
+      <wx-label
+        class="t-icon-remove t-icon-base"
+      />
+    </wx-view>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -120,22 +108,18 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <t-icon
-      class="t-stepper__plus-icon"
+    <wx-view
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      ariaRole=""
+      class="t-icon class t-class"
+      style=""
+      bind:tap="onTap"
     >
-      <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
-      >
-        <wx-label
-          class="t-icon-add t-icon-base"
-        />
-      </wx-view>
-    </t-icon>
+      <wx-label
+        class="t-icon-add t-icon-base"
+      />
+    </wx-view>
   </wx-view>
 </wx-view>
 `;
diff --git a/src/swiper-nav/swiper-nav.wxml b/src/swiper-nav/swiper-nav.wxml
index 2067b056f..35ed33a4a 100644
--- a/src/swiper-nav/swiper-nav.wxml
+++ b/src/swiper-nav/swiper-nav.wxml
@@ -1,12 +1,13 @@
 <wxs src="../common/utils.wxs" module="_" />
 
+
 <view
   wx:if="{{showControls}}"
   class="class {{prefix}}-class {{classPrefix}}__btn"
   style="{{_._style([style, customStyle])}}"
 >
-  <view class="{{classPrefix}}__btn--prev" bind:tap="nav" data-dir="prev" />
-  <view class="{{classPrefix}}__btn--next" bind:tap="nav" data-dir="next" />
+  <view class="{{classPrefix}}__btn--prev" bind:tap="nav" data-dir="prev" aria-role="button" aria-label="上一张" />
+  <view class="{{classPrefix}}__btn--next" bind:tap="nav" data-dir="next" aria-role="button" aria-label="下一张" />
 </view>
 <view
   wx:if="{{total >= minShowNum}}"
diff --git a/src/swiper/__test__/__snapshots__/demo.test.js.snap b/src/swiper/__test__/__snapshots__/demo.test.js.snap
index 3ba97aeaa..44dbe96f3 100644
--- a/src/swiper/__test__/__snapshots__/demo.test.js.snap
+++ b/src/swiper/__test__/__snapshots__/demo.test.js.snap
@@ -110,11 +110,22 @@ exports[`Swiper Swiper custom demo works fine 1`] = `
     interval="{{5000}}"
     list="{{
       Array [
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        Object {
+          "ariaLabel": "图片1",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        },
+        Object {
+          "ariaLabel": "图片2",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+        },
+        Object {
+          "ariaLabel": "图片1",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        },
+        Object {
+          "ariaLabel": "图片2",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+        },
       ]
     }}"
     navigation="{{
@@ -161,11 +172,22 @@ exports[`Swiper Swiper nav-btn demo works fine 1`] = `
     interval="{{5000}}"
     list="{{
       Array [
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        Object {
+          "ariaLabel": "图片1",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        },
+        Object {
+          "ariaLabel": "图片2",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+        },
+        Object {
+          "ariaLabel": "图片1",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        },
+        Object {
+          "ariaLabel": "图片2",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+        },
       ]
     }}"
     loop="{{false}}"
@@ -192,11 +214,22 @@ exports[`Swiper Swiper vertical demo works fine 1`] = `
       interval="{{5000}}"
       list="{{
         Array [
-          "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-          "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-          "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-          "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-          "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+          Object {
+            "ariaLabel": "图片1",
+            "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+          },
+          Object {
+            "ariaLabel": "图片2",
+            "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+          },
+          Object {
+            "ariaLabel": "图片1",
+            "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+          },
+          Object {
+            "ariaLabel": "图片2",
+            "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+          },
         ]
       }}"
       navigation="{{
diff --git a/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 3ba97aeaa..44dbe96f3 100644
--- a/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -110,11 +110,22 @@ exports[`Swiper Swiper custom demo works fine 1`] = `
     interval="{{5000}}"
     list="{{
       Array [
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        Object {
+          "ariaLabel": "图片1",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        },
+        Object {
+          "ariaLabel": "图片2",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+        },
+        Object {
+          "ariaLabel": "图片1",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        },
+        Object {
+          "ariaLabel": "图片2",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+        },
       ]
     }}"
     navigation="{{
@@ -161,11 +172,22 @@ exports[`Swiper Swiper nav-btn demo works fine 1`] = `
     interval="{{5000}}"
     list="{{
       Array [
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-        "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        Object {
+          "ariaLabel": "图片1",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        },
+        Object {
+          "ariaLabel": "图片2",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+        },
+        Object {
+          "ariaLabel": "图片1",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+        },
+        Object {
+          "ariaLabel": "图片2",
+          "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+        },
       ]
     }}"
     loop="{{false}}"
@@ -192,11 +214,22 @@ exports[`Swiper Swiper vertical demo works fine 1`] = `
       interval="{{5000}}"
       list="{{
         Array [
-          "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-          "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-          "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
-          "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
-          "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+          Object {
+            "ariaLabel": "图片1",
+            "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+          },
+          Object {
+            "ariaLabel": "图片2",
+            "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+          },
+          Object {
+            "ariaLabel": "图片1",
+            "value": "https://tdesign.gtimg.com/miniprogram/images/swiper1.png",
+          },
+          Object {
+            "ariaLabel": "图片2",
+            "value": "https://tdesign.gtimg.com/miniprogram/images/swiper2.png",
+          },
         ]
       }}"
       navigation="{{
diff --git a/src/swiper/_example/custom/index.js b/src/swiper/_example/custom/index.js
index 7e16ce15b..fdd0ae096 100644
--- a/src/swiper/_example/custom/index.js
+++ b/src/swiper/_example/custom/index.js
@@ -1,10 +1,21 @@
 const imageCdn = 'https://tdesign.gtimg.com/miniprogram/images';
 const swiperList = [
-  `${imageCdn}/swiper1.png`,
-  `${imageCdn}/swiper2.png`,
-  `${imageCdn}/swiper1.png`,
-  `${imageCdn}/swiper2.png`,
-  `${imageCdn}/swiper1.png`,
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
 ];
 
 Component({
diff --git a/src/swiper/_example/nav-btn/index.js b/src/swiper/_example/nav-btn/index.js
index 5f55da416..b3a044416 100644
--- a/src/swiper/_example/nav-btn/index.js
+++ b/src/swiper/_example/nav-btn/index.js
@@ -1,10 +1,21 @@
 const imageCdn = 'https://tdesign.gtimg.com/miniprogram/images';
 const swiperList = [
-  `${imageCdn}/swiper1.png`,
-  `${imageCdn}/swiper2.png`,
-  `${imageCdn}/swiper1.png`,
-  `${imageCdn}/swiper2.png`,
-  `${imageCdn}/swiper1.png`,
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
 ];
 
 Component({
diff --git a/src/swiper/_example/vertical/index.js b/src/swiper/_example/vertical/index.js
index 16706b5e7..f4aef7022 100644
--- a/src/swiper/_example/vertical/index.js
+++ b/src/swiper/_example/vertical/index.js
@@ -1,12 +1,22 @@
 const imageCdn = 'https://tdesign.gtimg.com/miniprogram/images';
 const swiperList = [
-  `${imageCdn}/swiper1.png`,
-  `${imageCdn}/swiper2.png`,
-  `${imageCdn}/swiper1.png`,
-  `${imageCdn}/swiper2.png`,
-  `${imageCdn}/swiper1.png`,
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
+  {
+    value: `${imageCdn}/swiper1.png`,
+    ariaLabel: '图片1',
+  },
+  {
+    value: `${imageCdn}/swiper2.png`,
+    ariaLabel: '图片2',
+  },
 ];
-
 Component({
   data: {
     current: 1,
diff --git a/src/swiper/swiper.wxml b/src/swiper/swiper.wxml
index 22add26c8..baa7fdcc9 100644
--- a/src/swiper/swiper.wxml
+++ b/src/swiper/swiper.wxml
@@ -26,10 +26,13 @@
       class="{{_.cls(classPrefix + '__item', [['preview', this.isPrev(current, index, list)], ['next', this.isNext(current, index, list)]])}}"
       data-index="{{index}}"
       bind:tap="onTap"
+      aria-hidden="{{navCurrent !== index}}"
+      aria-role="image"
+      aria-label="{{_.isObject(item) ? item.ariaLabel : ''}}"
     >
       <template
         is="image"
-        data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: item, mode: 'aspectFill', ...imageProps }}"
+        data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: _.isObject(item) ? item.value : item, mode: 'aspectFill', ...imageProps }}"
       />
     </swiper-item>
   </swiper>
diff --git a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
index 4f9ce97ac..938cc604e 100644
--- a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,28 +2,26 @@
 
 exports[`switch Props :base 1`] = `
 <main>
-  <t-switch>
+  <wx-view
+    ariaChecked="{{false}}"
+    ariaDisabled="{{false}}"
+    ariaRole="switch"
+    class="class t-class t-switch"
+    style=""
+    bind:tap="handleSwitch"
+  >
     <wx-view
-      ariaChecked="{{false}}"
-      ariaDisabled="{{false}}"
-      ariaRole="switch"
-      class="class t-class t-switch"
-      style=""
-      bind:tap="handleSwitch"
+      class="t-switch__body t-switch__body--medium t-class-body"
     >
       <wx-view
-        class="t-switch__body t-switch__body--medium t-class-body"
+        ariaHidden="{{true}}"
+        class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
       >
         <wx-view
-          ariaHidden="{{true}}"
-          class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
-        >
-          <wx-view
-            class="t-switch__label t-switch__label--medium t-class-label"
-          />
-        </wx-view>
+          class="t-switch__label t-switch__label--medium t-class-label"
+        />
       </wx-view>
     </wx-view>
-  </t-switch>
+  </wx-view>
 </main>
 `;
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
index 3e3ba44f9..5da505a7c 100644
--- a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,55 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`textarea slots : label 1`] = `
-<t-textarea
-  class="base"
+<wx-view
+  class="t-textarea  class t-class"
+  style=""
 >
   <wx-view
-    class="t-textarea  class t-class"
-    style=""
+    class="t-textarea__label t-class-label"
   >
-    <wx-view
-      class="t-textarea__label t-class-label"
+    <wx-text
+      slot="label"
     >
-      <wx-text
-        slot="label"
-      >
-        标签文字
-      </wx-text>
-    </wx-view>
-    <wx-view
-      class="t-textarea__wrapper"
-    >
-      <wx-textarea
-        adjustPosition="{{true}}"
-        autoFocus="{{false}}"
-        autoHeight="{{false}}"
-        class="t-textarea__wrapper-inner  t-class-textarea"
-        confirmHold="{{false}}"
-        confirmType="return"
-        cursor="{{-1}}"
-        cursorSpacing="{{0}}"
-        disabled="{{false}}"
-        disableDefaultPadding="{{false}}"
-        fixed="{{false}}"
-        focus="{{false}}"
-        holdKeyboard="{{false}}"
-        maxlength="{{-1}}"
-        placeholder=""
-        placeholderClass="t-textarea__placeholder"
-        placeholderStyle=""
-        selectionEnd="{{-1}}"
-        selectionStart="{{-1}}"
-        showConfirmBar="{{true}}"
-        value=""
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-        bind:keyboardheightchange="onKeyboardHeightChange"
-        bind:linechange="onLineChange"
-      />
-    </wx-view>
+      标签文字
+    </wx-text>
+  </wx-view>
+  <wx-view
+    class="t-textarea__wrapper"
+  >
+    <wx-textarea
+      adjustPosition="{{true}}"
+      autoFocus="{{false}}"
+      autoHeight="{{false}}"
+      class="t-textarea__wrapper-inner  t-class-textarea"
+      confirmHold="{{false}}"
+      confirmType="return"
+      cursor="{{-1}}"
+      cursorSpacing="{{0}}"
+      disabled="{{false}}"
+      disableDefaultPadding="{{false}}"
+      fixed="{{false}}"
+      focus="{{false}}"
+      holdKeyboard="{{false}}"
+      maxlength="{{-1}}"
+      placeholder=""
+      placeholderClass="t-textarea__placeholder"
+      placeholderStyle=""
+      selectionEnd="{{-1}}"
+      selectionStart="{{-1}}"
+      showConfirmBar="{{true}}"
+      value=""
+      bind:blur="onBlur"
+      bind:confirm="onConfirm"
+      bind:focus="onFocus"
+      bind:input="onInput"
+      bind:keyboardheightchange="onKeyboardHeightChange"
+      bind:linechange="onLineChange"
+    />
   </wx-view>
-</t-textarea>
+</wx-view>
 `;

From dedcb82fff2c40a232a28b47e04b0576f641a31d Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 11 Apr 2023 16:26:15 +0800
Subject: [PATCH 007/202] docs: update custom theme

---
 site/docs/custom-theme.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/site/docs/custom-theme.md b/site/docs/custom-theme.md
index 8119423c7..750c103b1 100644
--- a/site/docs/custom-theme.md
+++ b/site/docs/custom-theme.md
@@ -19,6 +19,8 @@ spline: explain
 @error-color: var(--td-error-color, #e34d59); // 失败
 ```
 
+> ⚠️ 注意：1.0.0 版本之前主题色的变量是 --td-primary-color
+
 在 `app.css` 文件添加下行代码即可：
 
 ```css

From 765e18564dd2e3096601bb8fd34c5be79d6dc8c5 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 11 Apr 2023 16:32:40 +0800
Subject: [PATCH 008/202] fix(radio): resolve style (#1889)

---
 src/radio/radio.less | 10 ++++++++++
 src/radio/radio.wxml | 10 ++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/radio/radio.less b/src/radio/radio.less
index 996763377..8a1c663c1 100644
--- a/src/radio/radio.less
+++ b/src/radio/radio.less
@@ -9,8 +9,10 @@
 @radio-border-color: var(--td-radio-border-color, @component-stroke);
 @radio-label-color: var(--td-radio-label-color, @font-gray-1);
 @radio-label-disabled-color: var(--td-radio-label-disabled-color, @font-gray-4);
+@radio-label-checked-color: var(--td-radio-label-checked-color, @font-gray-1);
 @radio-content-color: var(--td-radio-content-color, @font-gray-2);
 @radio-content-disabled-color: var(--td-radio-content-disabled-color, @font-gray-4);
+@radio-content-checked-color: var(--td-radio-content-checked-color, @font-gray-2);
 @radio-icon-color: var(--td-radio-icon-color, @component-border);
 @radio-icon-disabled-color: var(--td-radio-icon-disabled-color, @brand-color-disabled);
 @radio-icon-disabled-bg-color: var(--td-radio-icon-disabled-bg-color, @bg-color-component-disabled);
@@ -176,6 +178,10 @@
       cursor: not-allowed;
       color: @radio-label-disabled-color;
     }
+
+    &--checked {
+      color: @radio-label-checked-color;
+    }
   }
 
   &__description {
@@ -189,6 +195,10 @@
       color: @radio-content-disabled-color;
     }
 
+    &--checked {
+      color: @radio-content-checked-color;
+    }
+
     &:empty {
       display: none;
     }
diff --git a/src/radio/radio.wxml b/src/radio/radio.wxml
index e4c96d115..ffd51bf57 100644
--- a/src/radio/radio.wxml
+++ b/src/radio/radio.wxml
@@ -39,7 +39,7 @@
 
   <view class="{{classPrefix}}__content" data-target="text" catch:tap="handleTap">
     <view
-      class="{{classPrefix}}__title {{disabled ? classPrefix + '__title--disabled' : ''}} {{prefix}}-class-label"
+      class="{{_.cls(classPrefix + '__title', [['disabled', disabled], ['checked', checked]])}} {{prefix}}-class-label"
       style="-webkit-line-clamp:{{maxLabelRow}}"
     >
       {{label}}
@@ -48,12 +48,10 @@
     </view>
 
     <view
-      class="{{classPrefix}}__description {{disabled ? classPrefix + '__description--disabled' : ''}} {{prefix}}-class-content "
+      class="{{_.cls(classPrefix + '__description', [['disabled', disabled], ['checked', checked]])}} {{prefix}}-class-content "
       style="-webkit-line-clamp:{{maxContentRow}}"
-    >
-      {{content}}
-      <slot name="content" />
-    </view>
+      >{{content}}<slot name="content"
+    /></view>
   </view>
 
   <view wx:if="{{!borderless}}" class="{{_.cls(classPrefix + '__border', [_placement])}} {{prefix}}-class-border" />

From ff19036783be7328db458a796d3e9d269e2c7154 Mon Sep 17 00:00:00 2001
From: favouredddd <40692560+favouredddd@users.noreply.github.com>
Date: Wed, 12 Apr 2023 10:42:26 +0800
Subject: [PATCH 009/202] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=88=86?=
 =?UTF-8?q?=E5=89=B2=E7=BA=BF=E7=BB=84=E4=BB=B6=E7=9A=84=E7=BA=BF=E6=9D=A1?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=8F=98=E9=87=8F=E6=8E=A7=E5=88=B6=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=20(#1890)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/divider/divider.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/divider/divider.less b/src/divider/divider.less
index ba0b17e22..47ce69451 100644
--- a/src/divider/divider.less
+++ b/src/divider/divider.less
@@ -4,12 +4,13 @@
 @divider-content-color: var(--td-divider-content-color, @font-gray-3);
 @divider-content-font-size: var(--td-divider-content-font-size, 24rpx);
 @divider-content-line-height: var(--td-divider-content-line-height, 40rpx);
+@divider-content-line-style: var(--td-divider-content-line-style, solid);
 
 .@{prefix}-divider {
   display: flex;
   color: @divider-color;
   border-color: @divider-color;
-  border-style: solid;
+  border-style: @divider-content-line-style;
   border-width: 0;
 
   &::before,

From 962fe6ee3b69ee927873ee831f098588f93775da Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 17 Apr 2023 20:57:19 +0800
Subject: [PATCH 010/202] fix(action-sheet): resolve ts error of show method
 (#1907)

---
 src/action-sheet/show.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/action-sheet/show.ts b/src/action-sheet/show.ts
index 8d026fec6..9b843531e 100644
--- a/src/action-sheet/show.ts
+++ b/src/action-sheet/show.ts
@@ -16,13 +16,15 @@ export enum ActionSheetTheme {
 }
 
 interface ActionSheetProps {
-  visible: boolean;
-  items: Array<string | ActionSheetItem>;
-  defaultVisible?: boolean;
+  align: 'center' | 'left';
   cancelText?: string;
   count?: number;
+  description: string;
+  items: Array<string | ActionSheetItem>;
   showCancel?: boolean;
   theme?: ActionSheetTheme;
+  visible: boolean;
+  defaultVisible?: boolean;
 }
 export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
   context?: Context;

From 2e8d6c35f9ed28efe67edda97bfad559e2d2a104 Mon Sep 17 00:00:00 2001
From: Guan9 <mllz79@163.com>
Date: Mon, 17 Apr 2023 20:57:37 +0800
Subject: [PATCH 011/202] =?UTF-8?q?fix(grid):=20=E4=BF=AE=E5=A4=8Dcolumn>?=
 =?UTF-8?q?=3D4=E4=B8=AA=E6=97=B6=EF=BC=8C--td-grid-item-image-width?=
 =?UTF-8?q?=E5=92=8C--td-grid-item-text-font-size=E6=98=AF=E6=97=A0?=
 =?UTF-8?q?=E6=95=88=E7=9A=84=20(#1903)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/grid-item/grid-item.less | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/grid-item/grid-item.less b/src/grid-item/grid-item.less
index 04c6f3a2a..89e09a640 100644
--- a/src/grid-item/grid-item.less
+++ b/src/grid-item/grid-item.less
@@ -7,8 +7,12 @@
 @grid-item-padding: var(--td-grid-item-padding, 32rpx);
 @grid-item-bg-color: var(--td-grid-item-bg-color, @bg-color-container);
 @grid-item-image-width: var(--td-grid-item-image-width, 96rpx);
+@grid-item-image-small-width: var(--td-grid-item-image-small-width, 64rpx);
+@grid-item-image-middle-width: var(--td-grid-item-image-middle-width, 80rpx);
 @grid-item-text-color: var(--td-grid-item-text-color, @font-gray-1);
 @grid-item-text-font-size: var(--td-grid-item-text-font-size, 28rpx);
+@grid-item-text-small-font-size: var(--td-grid-item-text-small-font-size, 24rpx);
+@grid-item-text-middle-font-size: var(--td-grid-item-text-middle-font-size, 24rpx);
 @grid-item-text-line-height: var(--td-grid-item-text-line-height, 44rpx);
 @grid-item-text-padding-top: var(--td-grid-item-text-padding-top, 16rpx);
 @grid-item-description-font-size: var(--td-grid-item-description-font-size, 24rpx);
@@ -76,13 +80,13 @@
       height: @grid-item-image-width;
 
       &.@{item}__image--small {
-        width: 64rpx;
-        height: 64rpx;
+        width: @grid-item-image-small-width;
+        height: @grid-item-image-small-width;
       }
 
       &.@{item}__image--middle {
-        width: 80rpx;
-        height: 80rpx;
+        width: @grid-item-image-middle-width;
+        height: @grid-item-image-middle-width;
       }
 
       .@{prefix}-grid__image {
@@ -116,9 +120,12 @@
     line-height: @grid-item-text-line-height;
     padding-top: @grid-item-text-padding-top;
 
-    &--small,
+    &--small {
+      font-size: @grid-item-text-small-font-size;
+    }
+
     &--middle {
-      font-size: 24rpx;
+      font-size: @grid-item-text-middle-font-size;
     }
 
     &--horizontal {

From d4cecc3cba549ace73ccb501c4a3575c9ff6d509 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Mon, 17 Apr 2023 20:58:01 +0800
Subject: [PATCH 012/202] chore: update _common (#1902)

---
 src/_common | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_common b/src/_common
index dee44efa3..ed54d4097 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit dee44efa37a3f73353cf64c7da3c106148f82f27
+Subproject commit ed54d409776d7b112b0f8ecbf36b9600abe26cb8

From 4ac3280743cdc3819c428c08a0c0215ea7fe4232 Mon Sep 17 00:00:00 2001
From: favouredddd <40692560+favouredddd@users.noreply.github.com>
Date: Mon, 17 Apr 2023 20:59:09 +0800
Subject: [PATCH 013/202] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81radio?=
 =?UTF-8?q?=E7=9A=84=E5=86=85=E5=AE=B9=E5=AD=97=E4=BD=93=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=8F=98=E9=87=8F=E3=80=82=20(#1895)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 支持radio的内容字体大小使用变量。

* style: 修改css变量名称
---
 src/radio/radio.less | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/radio/radio.less b/src/radio/radio.less
index 8a1c663c1..592e48069 100644
--- a/src/radio/radio.less
+++ b/src/radio/radio.less
@@ -18,6 +18,8 @@
 @radio-icon-disabled-bg-color: var(--td-radio-icon-disabled-bg-color, @bg-color-component-disabled);
 @radio-icon-checked-color: var(--td-radio-icon-checked-color, @brand-color);
 
+@radio-content-font-size: var(--td-radio-content-font-size, 28rpx);
+
 .limit-title-row {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -187,7 +189,7 @@
   &__description {
     .limit-title-row();
     color: @radio-content-color;
-    font-size: 28rpx;
+    font-size: @radio-content-font-size;
     line-height: @radio-content-line-height;
 
     &--disabled {

From b8bed5bc84c40eadcd96c4a166e4c0ac9a7cc21f Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 17 Apr 2023 23:50:31 +0800
Subject: [PATCH 014/202] Bitjian fix/radio icon size (#1909)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复--td-radio-icon-size对未选中的图标未生效

* fix: fix radio 未选择的图标未生效

* fix(radio): support css variables to change circle icon size

---------

Co-authored-by: bitjian <1183048003@qq.com>
---
 src/radio/radio.less | 25 ++++++++++++++++---------
 src/radio/radio.wxml |  2 +-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/radio/radio.less b/src/radio/radio.less
index 592e48069..a7753cc8e 100644
--- a/src/radio/radio.less
+++ b/src/radio/radio.less
@@ -71,17 +71,24 @@
     }
 
     &-circle {
-      width: 84rpx;
-      height: 84rpx;
-      border: 3px solid @radio-icon-color;
-      border-radius: 50%;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.5);
+      width: @radio-icon-size;
+      height: @radio-icon-size;
       box-sizing: border-box;
 
-      &--disabled {
+      &::after {
+        content: '';
+        width: calc(200% - 6rpx);
+        height: calc(200% - 6rpx);
+        border-radius: 50%;
+        border: 3px solid @radio-icon-color;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0.5);
+        box-sizing: border-box;
+      }
+
+      &--disabled::after {
         background: @radio-icon-disabled-bg-color;
       }
     }
diff --git a/src/radio/radio.wxml b/src/radio/radio.wxml
index ffd51bf57..bfb59904e 100644
--- a/src/radio/radio.wxml
+++ b/src/radio/radio.wxml
@@ -31,7 +31,7 @@
       <view
         wx:if="{{!checked && (icon == 'circle' || icon == 'dot')}}"
         class="{{_.cls(classPrefix + '__icon-circle', [['disabled', disabled]])}}"
-      ></view>
+      />
       <!-- line && unchecked 为空 需要展位元素 -->
       <view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
     </block>

From 12bbeae3f064a1b0c3a4b1330ebff23fcea8a46c Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 17 Apr 2023 23:58:55 +0800
Subject: [PATCH 015/202] chore: publish v1.1.2 (#1910)

* chore: publish v1.1.2

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 18 ++++++++++++++++++
 package.json |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ad2f393b..fa2010427 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,24 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.2 `2023-04-17` 
+### 🚀 Features
+- `Swiper`: 支持无障碍访问 @zhangpaopao0609 ([#1598](https://github.com/Tencent/tdesign-miniprogram/pull/1598))
+- `Divider`: 新增 CSS Variables 用于控制分割线样式 @favouredddd ([#1890](https://github.com/Tencent/tdesign-miniprogram/pull/1890))
+- `Grid`: 补充 CSS Variables 以修改不同列数下的图片尺寸和文字大小 @lolhezihehe ([#1903](https://github.com/Tencent/tdesign-miniprogram/pull/1903))
+- `Radio`: 新增 CSS Variables 用于控制内容字体大小 @favouredddd ([#1895](https://github.com/Tencent/tdesign-miniprogram/pull/1895))
+
+### 🐞 Bug Fixes
+- `loading`: 修复  `inheritColor = true` 时，因样式问题导致组件一直处于加载状态 @Cyrus97 ([#1873](https://github.com/Tencent/tdesign-miniprogram/pull/1873))
+- `Empty`: 支持描述内容超出自动换行 @favouredddd ([#1870](https://github.com/Tencent/tdesign-miniprogram/pull/1870))
+- `Row`: 增加默认样式实现垂直居中 @tomcat-hz ([#1866](https://github.com/Tencent/tdesign-miniprogram/pull/1866))
+- `Progress`: 优化无障碍访问体验 @yaogengzhu ([#1354](https://github.com/Tencent/tdesign-miniprogram/pull/1354))
+- `Radio`: 优化样式，新增 CSS Variables 控制文字激活态颜色 @LeeJim ([#1889](https://github.com/Tencent/tdesign-miniprogram/pull/1889))
+- `ActionSheet`: 解决 show 方法的 TS 报错 @LeeJim ([#1907](https://github.com/Tencent/tdesign-miniprogram/pull/1907))
+- `Radio`: 修复图标尺寸无法调整的问题 @bitjian ([#1909](https://github.com/Tencent/tdesign-miniprogram/pull/1909))
+- Button: 修复 type = submit 时，disabled 未生效的问题 @bitjian ([#1878](https://github.com/Tencent/tdesign-miniprogram/pull/1878))
+
+
 ## 🌈 1.1.1 `2023-04-03` 
 ### 🚀 Features
 - `Button`: 新增 hover-class 属性 @anlyyao ([#1847](https://github.com/Tencent/tdesign-miniprogram/pull/1847))
diff --git a/package.json b/package.json
index 829a2e3d6..73d0aa29e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 680725eef428ee49776009f65ee8cf7c8ab9ba72 Mon Sep 17 00:00:00 2001
From: byqbai <byq1213@qq.com>
Date: Tue, 18 Apr 2023 10:28:36 +0800
Subject: [PATCH 016/202] =?UTF-8?q?fix(rate):=20=E8=AF=84=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E6=97=A0=E9=9A=9C=E7=A2=8D?=
 =?UTF-8?q?=E6=BB=91=E5=8A=A8=20(#1574)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(rate): 评分组件支持滑动无障碍操作(#1050)

* fix(rate): 评分组件样式问题修复.(#1050)

* fix(rate): 评分组件单测问题.(#1050)

* fix(rate): 抽象样式, 冗余代码.(#1050)

* fix(rate): 删除冗余节点.(#1050)

* fix(rate): 优化读取.(#1050)

* fix(rate): 新增额外的读取.(#1050)

* fix(rate): 修复警告旁白导致的滑动卡顿.(#1050)

* fix(rate): sr-only注释(#1050)

* fix(rate): update test snapshots. (#1050)
---
 src/common/style/utilities/_index.less        | 15 +++++++++++++
 .../__test__/__snapshots__/demo.test.js.snap  |  9 ++++++++
 src/rate/_example/special/index.wxml          |  2 +-
 src/rate/rate.less                            |  1 +
 src/rate/rate.ts                              | 14 +++++++++++++
 src/rate/rate.wxml                            | 21 ++++++++++++++++---
 6 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/common/style/utilities/_index.less b/src/common/style/utilities/_index.less
index faa84d123..ca7ee5171 100644
--- a/src/common/style/utilities/_index.less
+++ b/src/common/style/utilities/_index.less
@@ -51,3 +51,18 @@
     transform: scaleX(0.5);
   }
 }
+
+// 屏幕中不显示, 但可被读屏
+.sr-only() {
+  &--sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+  }
+}
diff --git a/src/rate/__test__/__snapshots__/demo.test.js.snap b/src/rate/__test__/__snapshots__/demo.test.js.snap
index 7a5d71d60..20713c7bf 100644
--- a/src/rate/__test__/__snapshots__/demo.test.js.snap
+++ b/src/rate/__test__/__snapshots__/demo.test.js.snap
@@ -237,6 +237,15 @@ exports[`Rate Rate special demo works fine 1`] = `
     >
       <t-rate
         size="30"
+        texts="{{
+          Array [
+            "非常糟糕",
+            "有些糟糕",
+            "可以尝试",
+            "可以前往",
+            "推荐前往",
+          ]
+        }}"
         value="{{4}}"
         bind:change="onChange"
       />
diff --git a/src/rate/_example/special/index.wxml b/src/rate/_example/special/index.wxml
index c801a1689..5dc97f145 100644
--- a/src/rate/_example/special/index.wxml
+++ b/src/rate/_example/special/index.wxml
@@ -1,6 +1,6 @@
 <view class="demo-rate">
   <view class="rate-wrapper">
-    <t-rate value="{{value}}" size="30" bind:change="onChange" />
+    <t-rate value="{{value}}" size="30" bind:change="onChange" texts="{{texts}}" />
   </view>
   <view class="desc desc--{{value > 3 ? 'active' : ''}}">{{texts[value - 1]}}</view>
 </view>
diff --git a/src/rate/rate.less b/src/rate/rate.less
index 0198d6a21..6a2956f5f 100644
--- a/src/rate/rate.less
+++ b/src/rate/rate.less
@@ -61,6 +61,7 @@
       color: @rate-text-active-color;
       font-weight: @rate-text-active-font-weight;
     }
+    .sr-only();
   }
 
   &__tips {
diff --git a/src/rate/rate.ts b/src/rate/rate.ts
index 91a7559f3..c2826794e 100644
--- a/src/rate/rate.ts
+++ b/src/rate/rate.ts
@@ -27,6 +27,7 @@ export default class Rate extends SuperComponent {
     tipsLeft: 0,
     actionType: '',
     scaleIndex: -1,
+    isVisibleToScreenReader: false,
   };
 
   methods = {
@@ -76,6 +77,7 @@ export default class Rate extends SuperComponent {
     },
     onTouchMove(e: WechatMiniprogram.TouchEvent) {
       this.onTouch(e, 'move');
+      this.showAlertText()
     },
     onTouchEnd() {
       this.touchEnd = true;
@@ -95,5 +97,17 @@ export default class Rate extends SuperComponent {
       this._trigger('change', { value });
       setTimeout(() => this.setData({ tipsVisible: false, scaleIndex: -1 }), 300);
     },
+    // 旁白模式: 变更数值时显示告警文案
+    showAlertText() {
+      if (this.data.isVisibleToScreenReader === true) return;
+      this.setData({
+        isVisibleToScreenReader: true,
+      });
+      setTimeout(() => {
+        this.setData({
+          isVisibleToScreenReader: false,
+        });
+      }, 2e3);
+    },
   };
 }
diff --git a/src/rate/rate.wxml b/src/rate/rate.wxml
index 4d8cefa3d..5feb342b7 100644
--- a/src/rate/rate.wxml
+++ b/src/rate/rate.wxml
@@ -10,21 +10,36 @@
     catch:tap="{{ !disabled ? 'onTap' : '' }}"
     catch:touchend="{{ !disabled ? 'onTouchEnd' : ''}}"
     catch:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}"
+    aria-role="slider"
+    aria-valuemax="{{count}}"
+    aria-valuemin="{{0}}"
+    aria-valuenow="{{value}}"
+    aria-valuetext="{{utils.getText(texts,value,defaultTexts)}}"
   >
     <t-icon
       wx:for="{{ count }}"
       wx:key="*this"
       class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}}"
+      style="margin-right:{{ count - index > 1 ? gap : 0 }}px; {{utils.getColor(color)}}"
       t-class="{{prefix}}-class-icon"
       name="{{utils.getIconName(defaultValue, value, index, icon)}}"
       size="{{ size }}"
-      style="margin-right:{{ count - index > 1 ? gap : 0 }}px; {{utils.getColor(color)}}"
     />
   </view>
-  <text wx:if="{{showText}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text"
+  <text
+    wx:if="{{showText}}"
+    class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text"
+    aria-hidden="{{true}}"
     >{{utils.getText(texts,value,defaultTexts)}}</text
   >
-  <view wx:if="{{tipsVisible}}" class="{{classPrefix}}__tips" style="left: {{tipsLeft}}px">
+  <text
+    wx:if="{{isVisibleToScreenReader}}"
+    class="{{_.cls(classPrefix + '__text', [['active', value > 0], ['sr-only', isVisibleToScreenReader]])}} {{prefix}}-class-text"
+    aria-role="alert"
+    aria-live="assertive"
+    >{{value+'星'}} {{utils.getText(texts,value,defaultTexts)}}</text
+  >
+  <view wx:if="{{tipsVisible}}" class="{{classPrefix}}__tips" style="left: {{tipsLeft}}px" aria-hidden="{{true}}">
     <block wx:if="{{actionType == 'tap'}}">
       <view
         wx:if="{{allowHalf}}"

From 6fc6f06e21a02b1c86831d6bba21e0ae5c9756bb Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 18 Apr 2023 16:44:38 +0800
Subject: [PATCH 017/202] build: remove preview workflow tentatively

---
 .github/workflows/preview.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
index 96b37fab4..e5cb320fc 100644
--- a/.github/workflows/preview.yml
+++ b/.github/workflows/preview.yml
@@ -7,7 +7,8 @@ on:
 jobs:
   request-preview:
     runs-on: ubuntu-latest
-    if: github.event_name == 'issue_comment' && github.event.issue.pull_request && startsWith(github.event.comment.body, '预览')
+    if: false
+    #if: github.event_name == 'issue_comment' && github.event.issue.pull_request && startsWith(github.event.comment.body, '预览')
     steps:
       - run: |
           timestamp=$(date +%s)

From f1e78af82321e15d92037f8ee4a3c11c5150fd14 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 19 Apr 2023 18:09:36 +0800
Subject: [PATCH 018/202] fix(upload): resolve max (#1914)

---
 src/upload/upload.ts | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/upload/upload.ts b/src/upload/upload.ts
index dde4eb69f..8a34fa3cf 100644
--- a/src/upload/upload.ts
+++ b/src/upload/upload.ts
@@ -34,11 +34,8 @@ export default class Upload extends SuperComponent {
   ];
 
   observers = {
-    files(files: UploadFile) {
-      this.handleLimit(files, this.data.max);
-    },
-    max(max) {
-      this.handleLimit(this.data.customFiles, max);
+    'files, max'(files: UploadFile, max: number) {
+      this.handleLimit(files, max);
     },
     gridConfig() {
       this.updateGrid();
@@ -62,19 +59,13 @@ export default class Upload extends SuperComponent {
   }
 
   handleLimit(customFiles: UploadFile[], max: number) {
-    while (max !== 0 && customFiles.length - max > 0) {
-      customFiles.pop();
+    if (max === 0) {
+      max = 20;
     }
-    const proofs = [];
-    customFiles.forEach((item: UploadFile) => {
-      if (item.type !== 'video') {
-        proofs.push(item.url);
-      }
-    });
+
     this.setData({
-      customFiles,
-      proofs,
-      customLimit: max === 0 ? Number.MAX_SAFE_INTEGER : max - customFiles.length,
+      customFiles: customFiles.length > max ? customFiles.slice(0, max) : customFiles,
+      customLimit: max - customFiles.length,
     });
   }
 
@@ -188,6 +179,7 @@ export default class Upload extends SuperComponent {
 
     chooseMedia(mediaType) {
       const { config, sizeLimit, customLimit } = this.data;
+
       wx.chooseMedia({
         count: customLimit,
         mediaType,

From 769fef339f2bf2f05eaf578eef847d74470b305a Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Sun, 23 Apr 2023 11:32:17 +0800
Subject: [PATCH 019/202] fix(navbar): resolve capsule zindex (#1920)

---
 src/navbar/navbar.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/navbar/navbar.less b/src/navbar/navbar.less
index 30176d247..5dc005278 100644
--- a/src/navbar/navbar.less
+++ b/src/navbar/navbar.less
@@ -96,6 +96,7 @@
     &::before {
       content: '';
       position: absolute;
+      z-index: -1;
       top: 0;
       left: 0;
       width: 200%;

From 8f1c734ada57dd2151c9cebcdaad04deac247f62 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 25 Apr 2023 17:04:44 +0800
Subject: [PATCH 020/202] chore: update site

---
 site/app.vue                  |  12 +++
 site/data/projects.ts         | 145 ++++++++++++++++++----------------
 site/docs/overview.md         |  16 ++--
 site/plugin-tdoc/md-to-vue.ts |   1 -
 site/router.ts                |  12 +--
 5 files changed, 97 insertions(+), 89 deletions(-)

diff --git a/site/app.vue b/site/app.vue
index 3b7057bb2..c4a20c398 100644
--- a/site/app.vue
+++ b/site/app.vue
@@ -16,6 +16,18 @@ import { defineComponent } from 'vue';
 
 const { docs: routerList } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, ''));
 
+routerList.forEach(item => {
+  if (item.type === 'component') {
+    item.children = item.children.sort((a, b) => {
+      const nameA = a.name.toUpperCase();
+      const nameB = b.name.toUpperCase();
+      if (nameA < nameB) return -1;
+      if (nameA > nameB) return 1;
+      return 0;
+    });
+  }
+})
+
 export default defineComponent({
   data() {
     return {
diff --git a/site/data/projects.ts b/site/data/projects.ts
index 311c6fe22..3bc0b6970 100644
--- a/site/data/projects.ts
+++ b/site/data/projects.ts
@@ -1,70 +1,75 @@
-export default 
-  [
-    {
-      name: '未来运动场',
-      tags: ['趣味游戏'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/weilaiyundongchang.png'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/weilaiyundongchang-code.jpg',
-    },
-    {
-      name: '程序员做饭指南',
-      tags: ['效率工具', '开源项目'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/zuofanzhinan.png'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/zuofanzhinan-code.jpg',
-      url: 'https://github.com/LeeJim/HowToCookOnMiniprogram',
-    },
-    {
-      name: '李宁',
-      tags: ['电商'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/lining.jpg'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/lining-code.jpg',
-    },
-    {
-      name: '美宜家',
-      tags: ['电商'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/meiyijia.jpg'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/meiyijia-code.jpg',
-    },
-    {
-      name: '沃尔玛',
-      tags: ['电商'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/walmart.jpg'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/walmart-code.jpg',
-    },
-    {
-      name: '维达',
-      tags: ['电商'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/weida.jpg'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/weida-code.png',
-    },
-    {
-      name: '小云卡片',
-      tags: ['效率工具'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/xiaoyunkapian.png'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/xiaoyunkapian-code.jpg'
-    },
-    {
-      name: '小楼助教',
-      tags: ['效率工具'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/xiaolouzhujiao.png'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/xiaolouzhujiao-code.png'
-    },
-    {
-      name: 'frmall',
-      tags: ['电商', '开源项目'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/frmall.png'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/frmall-code.jpg',
-    },
-    {
-      name: 'Coding 鱼塘',
-      tags: ['效率工具'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/codingyutang.png'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/codingyutang-code.jpg',
-    },
-    {
-      name: '智写 AI',
-      tags: ['效率工具'],
-      preview: ['https://tdesign.gtimg.com/miniprogram/case/zhixieai.png'],
-      qrcode: 'https://tdesign.gtimg.com/miniprogram/case/zhixieai-code.png',
-    },
-  ]
+export default [
+  {
+    name: '未来运动场',
+    tags: ['趣味游戏'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/weilaiyundongchang.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/weilaiyundongchang-code.jpg',
+  },
+  {
+    name: '程序员做饭指南',
+    tags: ['效率工具', '开源项目'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/zuofanzhinan.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/zuofanzhinan-code.jpg',
+    url: 'https://github.com/LeeJim/HowToCookOnMiniprogram',
+  },
+  {
+    name: '李宁',
+    tags: ['电商'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/lining.jpg'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/lining-code.jpg',
+  },
+  {
+    name: '美宜家',
+    tags: ['电商'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/meiyijia.jpg'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/meiyijia-code.jpg',
+  },
+  {
+    name: '沃尔玛',
+    tags: ['电商'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/walmart.jpg'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/walmart-code.jpg',
+  },
+  {
+    name: '维达',
+    tags: ['电商'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/weida.jpg'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/weida-code.png',
+  },
+  {
+    name: '小云卡片',
+    tags: ['效率工具'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/xiaoyunkapian.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/xiaoyunkapian-code.jpg',
+  },
+  {
+    name: '小楼助教',
+    tags: ['效率工具'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/xiaolouzhujiao.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/xiaolouzhujiao-code.png',
+  },
+  {
+    name: 'frmall',
+    tags: ['电商', '开源项目'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/frmall.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/frmall-code.jpg',
+  },
+  {
+    name: 'Coding 鱼塘',
+    tags: ['效率工具'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/codingyutang.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/codingyutang-code.jpg',
+  },
+  {
+    name: '智写 AI',
+    tags: ['效率工具'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/zhixieai.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/zhixieai-code.png',
+  },
+  {
+    name: '好用二维码',
+    tags: ['效率工具'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/haoyongqrcode.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/haoyongqrcode-code.png',
+  },
+];
diff --git a/site/docs/overview.md b/site/docs/overview.md
index c09d00351..4bf8c07a4 100644
--- a/site/docs/overview.md
+++ b/site/docs/overview.md
@@ -285,14 +285,6 @@ spline: explain
     </a>
   </div>
 
-  <div class="image-wrapper">
-    <a class="item" href="/miniprogram/components/image">
-      <img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-image.png" />
-      <img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-image-dark.png" />
-      <p class="name">Image 图片</p>
-    </a>
-  </div>
-
   <div class="image-wrapper">
     <a class="item" href="/miniprogram/components/grid">
       <img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-grid.png" />
@@ -301,6 +293,14 @@ spline: explain
     </a>
   </div>
 
+  <div class="image-wrapper">
+    <a class="item" href="/miniprogram/components/image">
+      <img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-image.png" />
+      <img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-image-dark.png" />
+      <p class="name">Image 图片</p>
+    </a>
+  </div>
+
   <div class="image-wrapper">
     <a class="item" href="/miniprogram/components/image-viewer">
       <img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-imageviewer.png" />
diff --git a/site/plugin-tdoc/md-to-vue.ts b/site/plugin-tdoc/md-to-vue.ts
index 21f1a2673..d895b87bb 100644
--- a/site/plugin-tdoc/md-to-vue.ts
+++ b/site/plugin-tdoc/md-to-vue.ts
@@ -44,7 +44,6 @@ export default function mdToVue(options: any) {
 // 解析 markdown 内容
 function customRender({ source, file, md }: any) {
   const { content, data } = matter(source);
-  // console.log('data', data);
 
   // md top data
   const pageData = {
diff --git a/site/router.ts b/site/router.ts
index d47b5a640..98f02b9e6 100644
--- a/site/router.ts
+++ b/site/router.ts
@@ -9,16 +9,8 @@ const getDocsRoutes = (docs: any[], type: string): RouteRecordRaw[] => {
   docs.forEach((item) => {
     const docType = item.type || type;
     if (docType === type) {
-      let { children } = item;
-      if (item.type === 'component') {
-        children = item.children.sort((a: any, b: any) => {
-          const nameA = a.name.toUpperCase();
-          const nameB = b.name.toUpperCase();
-          if (nameA < nameB) return -1;
-          if (nameA > nameB) return 1;
-          return 0;
-        });
-      }
+      const { children } = item;
+
       if (children) {
         docsRoutes = docsRoutes.concat(getDocsRoutes(children, docType));
       } else {

From 9b150bc2ed6c4815d4c530981aecdf990b1f9391 Mon Sep 17 00:00:00 2001
From: Guan9 <mllz79@163.com>
Date: Tue, 25 Apr 2023 17:29:03 +0800
Subject: [PATCH 021/202] =?UTF-8?q?fix(button):=20=E4=BF=AE=E5=A4=8Dvarian?=
 =?UTF-8?q?t=3Doutline=E7=AD=89=E7=8A=B6=E6=80=81=E4=B8=8Bloading=E4=B8=8D?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=20(#1922)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(button): 修复variant=outline等状态下loading不展示

* fix(button): loading inheritColor 字段错误
---
 src/button/button.less | 4 ----
 src/button/button.wxml | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/button/button.less b/src/button/button.less
index c0b4ae423..1fd167413 100644
--- a/src/button/button.less
+++ b/src/button/button.less
@@ -566,10 +566,6 @@
       align-items: center;
       justify-content: center;
     }
-
-    &--indicator {
-      color: @font-white-1;
-    }
   }
 
   &.@{button}--hover::after {
diff --git a/src/button/button.wxml b/src/button/button.wxml
index 76fb5c23b..24f84fd08 100644
--- a/src/button/button.wxml
+++ b/src/button/button.wxml
@@ -38,7 +38,7 @@
     delay="{{loadingProps.delay || 0}}"
     duration="{{loadingProps.duration || 800}}"
     indicator="{{loadingProps.indicator || true}}"
-    inheritColor="{{loadingProps.indicator || false}}"
+    inheritColor="{{loadingProps.inheritColor || true}}"
     layout="{{loadingProps.layout || 'horizontal'}}"
     pause="{{loadingProps.pause || false}}"
     progress="{{loadingProps.progress || 0}}"

From 1737ab5f0f178a5f642bea8351eeb3ab957ce05a Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 25 Apr 2023 19:38:40 +0800
Subject: [PATCH 022/202] fix(navbar): resolve vertical align (#1926)

* fix(navbar): resolve vertical align

* test(navbar): update snapshot
---
 src/navbar/__test__/__snapshots__/index.test.js.snap | 2 +-
 src/navbar/navbar.ts                                 | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/navbar/__test__/__snapshots__/index.test.js.snap b/src/navbar/__test__/__snapshots__/index.test.js.snap
index 18d9bf08e..198a82e20 100644
--- a/src/navbar/__test__/__snapshots__/index.test.js.snap
+++ b/src/navbar/__test__/__snapshots__/index.test.js.snap
@@ -145,7 +145,7 @@ exports[`navbar :menu button 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed  class t-class"
-      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width:40px;"
+      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
     >
       <wx-view
         class="t-navbar__placeholder"
diff --git a/src/navbar/navbar.ts b/src/navbar/navbar.ts
index 9ea0c5947..1f1b59fff 100644
--- a/src/navbar/navbar.ts
+++ b/src/navbar/navbar.ts
@@ -80,7 +80,8 @@ export default class Navbar extends SuperComponent {
           boxStyleList.push(`--td-navbar-right:${res.windowWidth - rect.left}px`); // 导航栏右侧小程序胶囊按钮宽度
         }
         boxStyleList.push(`--td-navbar-capsule-height: ${rect.height}px`); // 胶囊高度
-        boxStyleList.push(`--td-navbar-capsule-width:${rect.width}px`); // 胶囊宽度
+        boxStyleList.push(`--td-navbar-capsule-width: ${rect.width}px`); // 胶囊宽度
+        boxStyleList.push(`--td-navbar-height: ${(rect.top - statusBarHeight) * 2 + rect.height}px`);
         this.setData({
           boxStyle: `${boxStyleList.join('; ')}`,
         });

From f78e01f14d7ea4f0125d25b56df75ea3780a289b Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 25 Apr 2023 19:53:06 +0800
Subject: [PATCH 023/202] fix(dropdown-menu): support multiple column radio
 (#1927)

---
 src/dropdown-item/dropdown-item.less | 7 +++++--
 src/dropdown-item/dropdown-item.wxml | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/dropdown-item/dropdown-item.less b/src/dropdown-item/dropdown-item.less
index 2312421b0..9cbf5a837 100644
--- a/src/dropdown-item/dropdown-item.less
+++ b/src/dropdown-item/dropdown-item.less
@@ -77,13 +77,16 @@
     width: 100%;
     overflow: scroll;
     box-sizing: border-box;
+
+    &-group {
+      display: grid;
+      grid-gap: 24rpx;
+    }
   }
 
   &__checkbox {
     &-group {
-      display: grid;
       padding: 32rpx;
-      grid-gap: 24rpx;
     }
   }
 
diff --git a/src/dropdown-item/dropdown-item.wxml b/src/dropdown-item/dropdown-item.wxml
index 1d0f52c8c..69f06ef0c 100644
--- a/src/dropdown-item/dropdown-item.wxml
+++ b/src/dropdown-item/dropdown-item.wxml
@@ -24,6 +24,7 @@
         wx:if="{{!multiple}}"
         class="{{classPrefix}}__radio {{prefix}}-class-column"
         t-class="{{classPrefix}}__radio-group"
+        style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
         value="{{value}}"
         placement="right"
         bind:change="handleRadioChange"

From 75c87bfaf2664ad27202509b7a1e7a3fa381599c Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 25 Apr 2023 20:42:35 +0800
Subject: [PATCH 024/202] fix(Link): resolve disabled problem (#1928)

---
 src/link/__test__/__snapshots__/demo.test.js.snap      |  5 +++++
 .../__test__/__virtualHostSnapshot__/demo.test.js.snap |  5 +++++
 src/link/_example/disabled/index.js                    |  8 +++++++-
 src/link/_example/disabled/index.wxml                  | 10 +++++++++-
 src/link/link.wxml                                     |  2 +-
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/link/__test__/__snapshots__/demo.test.js.snap b/src/link/__test__/__snapshots__/demo.test.js.snap
index c039856b5..acabbe185 100644
--- a/src/link/__test__/__snapshots__/demo.test.js.snap
+++ b/src/link/__test__/__snapshots__/demo.test.js.snap
@@ -29,6 +29,11 @@ exports[`Link Link disabled demo works fine 1`] = `
       content="跳转链接"
       disabled="{{true}}"
       hover="{{true}}"
+      navigatorProps="{{
+        Object {
+          "url": "/pages/home/home",
+        }
+      }}"
       size="small"
       suffixIcon="jump"
       theme="primary"
diff --git a/src/link/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/link/__test__/__virtualHostSnapshot__/demo.test.js.snap
index c039856b5..acabbe185 100644
--- a/src/link/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/link/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -29,6 +29,11 @@ exports[`Link Link disabled demo works fine 1`] = `
       content="跳转链接"
       disabled="{{true}}"
       hover="{{true}}"
+      navigatorProps="{{
+        Object {
+          "url": "/pages/home/home",
+        }
+      }}"
       size="small"
       suffixIcon="jump"
       theme="primary"
diff --git a/src/link/_example/disabled/index.js b/src/link/_example/disabled/index.js
index b79c5124b..815fd4eac 100644
--- a/src/link/_example/disabled/index.js
+++ b/src/link/_example/disabled/index.js
@@ -1 +1,7 @@
-Component({});
+Component({
+  data: {
+    navigatorProps: {
+      url: '/pages/home/home',
+    },
+  },
+});
diff --git a/src/link/_example/disabled/index.wxml b/src/link/_example/disabled/index.wxml
index eb49e1a7b..e4b1ebc5f 100644
--- a/src/link/_example/disabled/index.wxml
+++ b/src/link/_example/disabled/index.wxml
@@ -1,5 +1,13 @@
 <view class="link-example">
-  <t-link size="small" theme="primary" content="跳转链接" suffixIcon="jump" disabled hover />
+  <t-link
+    navigatorProps="{{navigatorProps}}"
+    size="small"
+    theme="primary"
+    content="跳转链接"
+    suffixIcon="jump"
+    disabled
+    hover
+  />
   <t-link size="small" content="跳转链接" suffixIcon="jump" disabled />
   <t-link size="small" theme="danger" content="跳转链接" suffixIcon="jump" disabled />
 </view>
diff --git a/src/link/link.wxml b/src/link/link.wxml
index 94acf7780..933aa87c9 100644
--- a/src/link/link.wxml
+++ b/src/link/link.wxml
@@ -5,7 +5,7 @@
   class="{{className}} class {{prefix}}-class"
   style="{{_._style([style, customStyle])}}"
   target="{{navigatorProps.target}}"
-  url="{{navigatorProps.url}}"
+  url="{{ !disabled && navigatorProps.url}}"
   open-type="{{navigatorProps.openType || 'navigate'}}"
   delta="{{navigatorProps.delta}}"
   app-id="{{navigatorProps.appId}}"

From 066fe0805df0647356704d2dac88b631aa628e0c Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 26 Apr 2023 11:22:57 +0800
Subject: [PATCH 025/202] fix(calendar): resolve error (#1930)

* fix(calendar): resolve error

* fix(calendar): make observer robust
---
 src/calendar/calendar.ts            | 27 +++++++++++----------------
 src/common/shared/calendar/index.ts |  3 +--
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/calendar/calendar.ts b/src/calendar/calendar.ts
index f2b0e12e1..a976f5afa 100644
--- a/src/calendar/calendar.ts
+++ b/src/calendar/calendar.ts
@@ -40,8 +40,10 @@ export default class Calendar extends SuperComponent {
   ];
 
   lifetimes = {
-    ready() {
+    created() {
       this.base = new TCalendar(this.properties);
+    },
+    ready() {
       this.initialValue();
       this.setData({
         days: this.base.getDays(),
@@ -59,32 +61,25 @@ export default class Calendar extends SuperComponent {
       }
     },
     'firstDayOfWeek,minDate,maxDate'(firstDayOfWeek, minDate, maxDate) {
-      if (this.base) {
-        this.base.firstDayOfWeek = firstDayOfWeek;
-        this.base.minDate = minDate;
-        this.base.maxDate = maxDate;
-        this.calcMonths();
-      }
+      firstDayOfWeek && (this.base.firstDayOfWeek = firstDayOfWeek);
+      minDate && (this.base.minDate = minDate);
+      maxDate && (this.base.maxDate = maxDate);
+      this.calcMonths();
     },
     value(v) {
-      if (this.base) {
-        this.base.value = v;
-      }
+      this.base.value = v;
     },
     visible(v) {
       if (v) {
         this.scrollIntoView();
-
-        if (this.base) {
-          this.base.value = this.data.value;
-          this.calcMonths();
-        }
+        this.base.value = this.data.value;
+        this.calcMonths();
       }
     },
     format(v) {
       this.base.format = v;
 
-      if (this.base && !this.data.usePopup) {
+      if (!this.data.usePopup) {
         this.calcMonths();
       }
     },
diff --git a/src/common/shared/calendar/index.ts b/src/common/shared/calendar/index.ts
index 83621d994..611e04d9b 100644
--- a/src/common/shared/calendar/index.ts
+++ b/src/common/shared/calendar/index.ts
@@ -1,5 +1,4 @@
 import { getDateRect, isSameDate, getMonthDateRect, isValidDate, getDate } from '../date';
-
 import type { TDate, TDateType, TCalendarType, TCalendarValue } from './type';
 
 export default class TCalendar {
@@ -10,7 +9,7 @@ export default class TCalendar {
   maxDate: Date;
   format: (day: TDate) => TDate;
 
-  constructor(options) {
+  constructor(options = {}) {
     Object.assign(this, options);
 
     if (!this.minDate) this.minDate = getDate();

From b15175d358a49b0c4941294d66b07d9cc7feaebd Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 26 Apr 2023 14:22:16 +0800
Subject: [PATCH 026/202] fix(tabs): resolve content overflow (#1931)

* fix(tabs): resolve content overflow

* test(tabs): update snapshot
---
 src/tab-panel/tab-panel.less                  |  1 +
 .../__test__/__snapshots__/demo.test.js.snap  |  9 +--
 src/tabs/_example/with-content/index.js       |  2 +-
 src/tabs/_example/with-content/index.wxml     |  8 ++-
 src/tabs/_example/with-content/index.wxss     |  4 ++
 src/tabs/tabs.less                            | 66 +++++++------------
 src/tabs/tabs.ts                              |  8 ++-
 src/tabs/tabs.wxml                            |  2 +-
 8 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/src/tab-panel/tab-panel.less b/src/tab-panel/tab-panel.less
index 3ee8ae332..184226383 100644
--- a/src/tab-panel/tab-panel.less
+++ b/src/tab-panel/tab-panel.less
@@ -5,4 +5,5 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
+  overflow: hidden;
 }
diff --git a/src/tabs/__test__/__snapshots__/demo.test.js.snap b/src/tabs/__test__/__snapshots__/demo.test.js.snap
index 61f352ec4..9aa182bc0 100644
--- a/src/tabs/__test__/__snapshots__/demo.test.js.snap
+++ b/src/tabs/__test__/__snapshots__/demo.test.js.snap
@@ -389,33 +389,34 @@ exports[`Tabs Tabs with-content demo works fine 1`] = `
   <t-tabs
     defaultValue="{{0}}"
     tClass="custom-tabs"
+    tClassContent="custom-panel"
     bind:change="onTabsChange"
     bind:click="onTabsClick"
   >
     <t-tab-panel
       label="选项一"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="0"
     >
       选项一内容
     </t-tab-panel>
     <t-tab-panel
       label="选项二"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="1"
     >
       选项二内容
     </t-tab-panel>
     <t-tab-panel
       label="选项三"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="2"
     >
       选项三内容
     </t-tab-panel>
     <t-tab-panel
       label="选项四"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="3"
     >
       选项四内容
diff --git a/src/tabs/_example/with-content/index.js b/src/tabs/_example/with-content/index.js
index cf8ce552b..1f019c33c 100644
--- a/src/tabs/_example/with-content/index.js
+++ b/src/tabs/_example/with-content/index.js
@@ -1,6 +1,6 @@
 Component({
   data: {
-    tabPanelstyle: 'display:flex;justify-content:center;align-items:center;min-height: 120px',
+    tabPanelstyle: 'display:flex;justify-content:center;align-items:center;',
   },
   methods: {
     onTabsChange(event) {
diff --git a/src/tabs/_example/with-content/index.wxml b/src/tabs/_example/with-content/index.wxml
index 0ecf7e8ec..3db7c5c2f 100644
--- a/src/tabs/_example/with-content/index.wxml
+++ b/src/tabs/_example/with-content/index.wxml
@@ -1,4 +1,10 @@
-<t-tabs defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick" t-class="custom-tabs">
+<t-tabs
+  defaultValue="{{0}}"
+  bind:change="onTabsChange"
+  bind:click="onTabsClick"
+  t-class="custom-tabs"
+  t-class-content="custom-panel"
+>
   <t-tab-panel label="选项一" value="0" style="{{tabPanelstyle}}">选项一内容</t-tab-panel>
   <t-tab-panel label="选项二" value="1" style="{{tabPanelstyle}}">选项二内容</t-tab-panel>
   <t-tab-panel label="选项三" value="2" style="{{tabPanelstyle}}">选项三内容</t-tab-panel>
diff --git a/src/tabs/_example/with-content/index.wxss b/src/tabs/_example/with-content/index.wxss
index bb78b99e4..d727c6ae5 100644
--- a/src/tabs/_example/with-content/index.wxss
+++ b/src/tabs/_example/with-content/index.wxss
@@ -1,3 +1,7 @@
 .custom-tabs {
   margin-bottom: 32rpx;
 }
+
+.custom-panel {
+  height: 120px;
+}
diff --git a/src/tabs/tabs.less b/src/tabs/tabs.less
index 020aa9e83..5d8ed5e92 100644
--- a/src/tabs/tabs.less
+++ b/src/tabs/tabs.less
@@ -32,6 +32,7 @@
   position: relative;
   font-size: @tab-font-size;
   background: @tab-nav-bg-color;
+  flex-wrap: wrap;
 
   &__wrapper {
     display: flex;
@@ -56,6 +57,7 @@
     box-sizing: border-box;
     white-space: nowrap;
     overflow: hidden;
+    height: @tab-item-height;
 
     &--active {
       font-weight: 600;
@@ -70,11 +72,6 @@
       flex: 1;
     }
 
-    &--top,
-    &--bottom {
-      height: @tab-item-height;
-    }
-
     &-inner {
       display: flex;
       align-items: center;
@@ -187,56 +184,37 @@
     z-index: 1;
     transition-duration: 0.3s;
     background-color: @tab-track-color;
-
-    &--top,
-    &--bottom {
-      left: 0;
-      bottom: 1rpx;
-      width: @tab-track-width;
-      height: @tab-track-thickness;
-      border-radius: @tab-track-radius;
-    }
+    left: 0;
+    bottom: 1rpx;
+    width: @tab-track-width;
+    height: @tab-track-thickness;
+    border-radius: @tab-track-radius;
   }
 
   &__scroll {
+    position: relative;
+    height: @tab-item-height;
+    .border(bottom, @tab-border-color);
+
     &::-webkit-scrollbar {
       display: none;
     }
-
-    &--top,
-    &--bottom {
-      height: @tab-item-height;
-      position: relative;
-    }
-
-    &--top {
-      .border(bottom, @tab-border-color);
-    }
   }
 
-  &__content-inner {
-    display: block;
-  }
+  &__content {
+    width: 100%;
 
-  &--top,
-  &--bottom {
-    flex-wrap: wrap;
+    &-inner {
+      display: block;
+    }
 
-    .@{prefix}-tabs__content {
+    &--animated .@{prefix}-tabs__content-inner {
+      position: relative;
       width: 100%;
-
-      &--animated .@{prefix}-tabs__content-inner {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        will-change: left;
-        transition-property: transform;
-      }
+      height: 100%;
+      display: flex;
+      will-change: left;
+      transition-property: transform;
     }
   }
-
-  &--bottom {
-    flex-direction: column-reverse;
-  }
 }
diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts
index d61b55615..a1e0a17d4 100644
--- a/src/tabs/tabs.ts
+++ b/src/tabs/tabs.ts
@@ -15,7 +15,13 @@ export interface TabsProps extends TdTabsProps {}
 export default class Tabs extends SuperComponent {
   behaviors = [touch];
 
-  externalClasses = [`${prefix}-class`, `${prefix}-class-item`, `${prefix}-class-active`, `${prefix}-class-track`];
+  externalClasses = [
+    `${prefix}-class`,
+    `${prefix}-class-item`,
+    `${prefix}-class-active`,
+    `${prefix}-class-track`,
+    `${prefix}-class-content`,
+  ];
 
   relations: RelationsOptions = {
     '../tab-panel/tab-panel': {
diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
index 33479e25f..06f91e94c 100644
--- a/src/tabs/tabs.wxml
+++ b/src/tabs/tabs.wxml
@@ -66,7 +66,7 @@
     bind:touchcancel="onTouchEnd"
   >
     <view
-      class="{{classPrefix}}__content-inner"
+      class="{{classPrefix}}__content-inner {{prefix}}-class-content"
       style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex, direction}) }}"
     >
       <slot />

From 2971200defc54a12fe3c7416754c42e63e0bfaf2 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 26 Apr 2023 15:08:23 +0800
Subject: [PATCH 027/202] chore: update issue template

---
 .github/ISSUE_TEMPLATE/bug-report.zh-CN.yml | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml b/.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml
index d1e1dc878..9a5d891c7 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.zh-CN.yml
@@ -25,7 +25,7 @@ body:
     id: reproduce
     attributes:
       label: 重现链接
-      description: 请提供尽可能精简的 CodePen、CodeSandbox 或 GitHub 仓库的链接。请不要填无关链接，否则你的 Issue 将被关闭。
+      description: 请提供尽可能精简的代码片段 或 GitHub 仓库的链接。请不要填无关链接，否则你的 Issue 将被关闭。
       placeholder: 请填写
 
   - type: textarea
@@ -47,12 +47,6 @@ body:
       label: 实际结果
       placeholder: 请填写
 
-  - type: input
-    id: frameworkVersion
-    attributes:
-      label: 框架版本
-      placeholder: miniprogram(3.2.0)
-
   - type: input
     id: systemVersion
     attributes:

From e05791523df0079f839ca041a9f6f749762413ab Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Wed, 26 Apr 2023 17:22:59 +0800
Subject: [PATCH 028/202] fix(Input): resolve vertical layout style error
 (#1934)

---
 src/input/input.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/input/input.less b/src/input/input.less
index df72772c1..287b4ea4e 100644
--- a/src/input/input.less
+++ b/src/input/input.less
@@ -42,6 +42,7 @@
 
   &--layout-vertical {
     flex-direction: column;
+    align-items: start;
   }
 
   &__wrap--prefix {
@@ -79,6 +80,7 @@
   }
 
   &__wrap {
+    width: 100%;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;

From 32617d74491be0782dcfacaf291d6d096d5d18cf Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 26 Apr 2023 17:23:16 +0800
Subject: [PATCH 029/202] feat(collapse): add header-left-icon property (#1933)

---
 src/collapse-panel/collapse-panel.wxml |  2 ++
 src/collapse-panel/props.ts            |  4 ++++
 src/collapse-panel/type.ts             | 15 +++++++--------
 src/collapse/README.en-US.md           |  3 ++-
 src/collapse/README.md                 |  3 ++-
 src/collapse/props.ts                  |  2 +-
 src/collapse/type.ts                   | 10 +---------
 7 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/collapse-panel/collapse-panel.wxml b/src/collapse-panel/collapse-panel.wxml
index 370e7a9a2..1a0182c7f 100644
--- a/src/collapse-panel/collapse-panel.wxml
+++ b/src/collapse-panel/collapse-panel.wxml
@@ -15,6 +15,7 @@
       title="{{header}}"
       note="{{headerRightContent}}"
       bordered
+      left-icon="{{headerLeftIcon}}"
       right-icon="{{ ultimateExpandIcon ? (expanded ? 'chevron-up' : 'chevron-down') : '' }}"
       t-class="{{_.cls(classPrefix + '__header', [placement, ['expanded', expanded]])}} {{prefix}}-class-header"
       t-class-title="class-title {{ultimateDisabled ? 'class-title--disabled' : ''}}"
@@ -22,6 +23,7 @@
       t-class-right-icon="class-right-icon {{classPrefix}}__arrow--{{placement}} {{ultimateDisabled ? 'class-right-icon--disabled' : ''}}"
       t-class-hover="class-header-hover"
     >
+      <slot name="header-left-icon" slot="left-icon" />
       <slot name="header" slot="title" />
       <slot name="header-right-content" slot="note" />
       <slot name="expand-icon" slot="right-icon" />
diff --git a/src/collapse-panel/props.ts b/src/collapse-panel/props.ts
index 2c0c89a9c..fc21848d6 100644
--- a/src/collapse-panel/props.ts
+++ b/src/collapse-panel/props.ts
@@ -28,6 +28,10 @@ const props: TdCollapsePanelProps = {
   header: {
     type: String,
   },
+  /** 面板头左侧图标 */
+  headerLeftIcon: {
+    type: String,
+  },
   /** 面板头的右侧区域，一般用于呈现面板操作 */
   headerRightContent: {
     type: String,
diff --git a/src/collapse-panel/type.ts b/src/collapse-panel/type.ts
index 20fbc09aa..905e3c98f 100644
--- a/src/collapse-panel/type.ts
+++ b/src/collapse-panel/type.ts
@@ -12,14 +12,6 @@ export interface TdCollapsePanelProps {
     type: StringConstructor;
     value?: string;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 禁止当前面板展开，优先级大于 Collapse 的同名属性
    */
@@ -48,6 +40,13 @@ export interface TdCollapsePanelProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 面板头左侧图标
+   */
+  headerLeftIcon?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 面板头的右侧区域，一般用于呈现面板操作
    */
diff --git a/src/collapse/README.en-US.md b/src/collapse/README.en-US.md
index 2e6fc2592..c6043dbc1 100644
--- a/src/collapse/README.en-US.md
+++ b/src/collapse/README.en-US.md
@@ -7,7 +7,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 default-expand-all | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
-expand-icon | Boolean / Slot | true | \- | N
+expand-icon | Boolean | true | \- | N
 expand-mutex | Boolean | false | \- | N
 theme | String | default | options：default/card | N
 value | Array | [] | Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N
@@ -28,6 +28,7 @@ disabled | Boolean | undefined | \- | N
 expand-icon | Boolean / Slot | undefined | \- | N
 external-classes | Array | - | `['t-class', 't-class-header', 't-class-content']` | N
 header | String / Slot | - | \- | N
+header-left-icon | String / Slot | - | \- | N
 header-right-content | String / Slot | - | \- | N
 placement | String | bottom | `0.34.0`。options：bottom/top | N
 value | String / Number | - | \- | N
diff --git a/src/collapse/README.md b/src/collapse/README.md
index 84e121251..31534fb3b 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -55,7 +55,7 @@ isComponent: true
 -- | -- | -- | -- | --
 default-expand-all | Boolean | false | 默认是否展开全部 | N
 disabled | Boolean | - | 是否禁用面板展开/收起操作 | N
-expand-icon | Boolean | true | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标 | N
+expand-icon | Boolean | true | 展开图标 | N
 expand-mutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N
 theme | String | default | 折叠面板风格。可选项：default/card | N
 value | Array | [] | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/collapse/type.ts) | N
@@ -76,6 +76,7 @@ disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Coll
 expand-icon | Boolean / Slot | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 | N
 external-classes | Array | - | 组件类名，用于组件外层元素、标题、内容。`['t-class', 't-class-header', 't-class-content']` | N
 header | String / Slot | - | 面板头内容 | N
+header-left-icon | String / Slot | - | 面板头左侧图标 | N
 header-right-content | String / Slot | - | 面板头的右侧区域，一般用于呈现面板操作 | N
 placement | String | bottom | `0.34.0`。选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
diff --git a/src/collapse/props.ts b/src/collapse/props.ts
index f34906e0f..20d136705 100644
--- a/src/collapse/props.ts
+++ b/src/collapse/props.ts
@@ -15,7 +15,7 @@ const props: TdCollapseProps = {
   disabled: {
     type: Boolean,
   },
-  /** 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标 */
+  /** 展开图标 */
   expandIcon: {
     type: Boolean,
     value: true,
diff --git a/src/collapse/type.ts b/src/collapse/type.ts
index 52ace3b57..3f689211e 100644
--- a/src/collapse/type.ts
+++ b/src/collapse/type.ts
@@ -5,14 +5,6 @@
  * */
 
 export interface TdCollapseProps {
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 默认是否展开全部
    * @default false
@@ -29,7 +21,7 @@ export interface TdCollapseProps {
     value?: boolean;
   };
   /**
-   * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标
+   * 展开图标
    * @default true
    */
   expandIcon?: {

From 5443109cd3294c2a586cefa8368faba1e30517ee Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 26 Apr 2023 23:30:51 +0800
Subject: [PATCH 030/202] feat(tabs): add middle slot (#1936)

---
 src/tab-panel/type.ts    | 8 --------
 src/tabs/README.en-US.md | 1 +
 src/tabs/README.md       | 1 +
 src/tabs/tabs.wxml       | 1 +
 src/tabs/type.ts         | 8 --------
 5 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/tab-panel/type.ts b/src/tab-panel/type.ts
index 140602fa7..40440d995 100644
--- a/src/tab-panel/type.ts
+++ b/src/tab-panel/type.ts
@@ -15,14 +15,6 @@ export interface TdTabPanelProps {
     type: ObjectConstructor;
     value?: object;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 选项卡内容隐藏时是否销毁
    * @default true
diff --git a/src/tabs/README.en-US.md b/src/tabs/README.en-US.md
index 32aa3a4c1..e57ca0e16 100644
--- a/src/tabs/README.en-US.md
+++ b/src/tabs/README.en-US.md
@@ -7,6 +7,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
 external-classes | Array | - | `['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
+middle | Slot | - | \- | N
 show-bottom-line | Boolean | true | \- | N
 space-evenly | Boolean | true | \- | N
 sticky | Boolean | false | \- | N
diff --git a/src/tabs/README.md b/src/tabs/README.md
index 6176aea6d..523bf1711 100644
--- a/src/tabs/README.md
+++ b/src/tabs/README.md
@@ -114,6 +114,7 @@ Page({
 -- | -- | -- | -- | --
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位秒）TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名。`['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
+middle | Slot | - | 中间内容，介于头部和内容之间 | N
 show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
 space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
 sticky | Boolean | false | 是否开启粘性布局 | N
diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
index 06f91e94c..5d96cf0c0 100644
--- a/src/tabs/tabs.wxml
+++ b/src/tabs/tabs.wxml
@@ -58,6 +58,7 @@
       </scroll-view>
     </view>
   </t-sticky>
+  <slot name="middle" />
   <view
     class="{{_.cls(classPrefix + '__content', [['animated', animation]])}}"
     bind:touchstart="onTouchStart"
diff --git a/src/tabs/type.ts b/src/tabs/type.ts
index 830c690de..5c93547a1 100644
--- a/src/tabs/type.ts
+++ b/src/tabs/type.ts
@@ -14,14 +14,6 @@ export interface TdTabsProps {
     type: ObjectConstructor;
     value?: TabAnimation;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名
    */

From 4f7c16bddc677dd04a7e8382e828cfd84cba42a3 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 26 Apr 2023 23:37:46 +0800
Subject: [PATCH 031/202] chore: publish v1.1.3 (#1937)

* chore: publish v1.1.3

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 16 ++++++++++++++++
 package.json |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa2010427..c20a50483 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,22 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.3 `2023-04-26` 
+### 🚀 Features
+- `Rate`: 支持无障碍访问 @byq1213 ([#1574](https://github.com/Tencent/tdesign-miniprogram/pull/1574))
+- `Tabs`: 新增外部样式类 `t-class-content` @LeeJim ([#1931](https://github.com/Tencent/tdesign-miniprogram/pull/1931))
+- `CollapsePanel`: 新增 headerLeftIcon 属性，支持面板头左侧使用图标 @LeeJim ([#1933](https://github.com/Tencent/tdesign-miniprogram/pull/1933))
+- `Tabs`: 新增 middle 插槽 @LeeJim ([#1936](https://github.com/Tencent/tdesign-miniprogram/pull/1936))
+### 🐞 Bug Fixes
+- `Upload`: 修复 max 属性相关的问题 @LeeJim ([#1914](https://github.com/Tencent/tdesign-miniprogram/pull/1914))
+- `NavBar`: 修复胶囊边框层级过高，遮挡内容点击事件的问题 @LeeJim ([#1920](https://github.com/Tencent/tdesign-miniprogram/pull/1920))
+- `Button`: 修复 variant=outline 状态下 loading 不展示的问题 @lolhezihehe ([#1922](https://github.com/Tencent/tdesign-miniprogram/pull/1922))
+- `NavBar`: 解决内容垂直居中的问题 @LeeJim ([#1926](https://github.com/Tencent/tdesign-miniprogram/pull/1926))
+- `DropdownMenu`: 修复单选情况下无法使用多列的问题 @LeeJim ([#1927](https://github.com/Tencent/tdesign-miniprogram/pull/1927))
+- `Link`: 修复 disabled 态下仍能跳转的问题 @anlyyao ([#1928](https://github.com/Tencent/tdesign-miniprogram/pull/1928))
+- `Calendar`: 修复 format 报错的问题 @LeeJim ([#1930](https://github.com/Tencent/tdesign-miniprogram/pull/1930))
+- `Input`: 修复垂直布局时样式错误 @anlyyao ([#1934](https://github.com/Tencent/tdesign-miniprogram/pull/1934))
+
 ## 🌈 1.1.2 `2023-04-17` 
 ### 🚀 Features
 - `Swiper`: 支持无障碍访问 @zhangpaopao0609 ([#1598](https://github.com/Tencent/tdesign-miniprogram/pull/1598))
diff --git a/package.json b/package.json
index 73d0aa29e..41a315f75 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From c4c5c5f6698b3861f9d8044123b32df630f9bb58 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Thu, 27 Apr 2023 11:14:27 +0800
Subject: [PATCH 032/202] fix(slider): enable dragstart and dragend event
 (#1940)

---
 src/slider/slider.ts   | 8 +++++++-
 src/slider/slider.wxml | 3 +++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/slider/slider.ts b/src/slider/slider.ts
index e025e4ea4..1d831ac0f 100644
--- a/src/slider/slider.ts
+++ b/src/slider/slider.ts
@@ -297,6 +297,10 @@ export default class Slider extends SuperComponent {
     });
   }
 
+  onTouchStart(e: WechatMiniprogram.TouchEvent) {
+    this.triggerEvent('dragstart', { e });
+  }
+
   onTouchMoveLeft(e: WechatMiniprogram.TouchEvent) {
     const { disabled } = this.properties;
     const { initialLeft, _value } = this.data;
@@ -355,5 +359,7 @@ export default class Slider extends SuperComponent {
     }
   }
 
-  onTouchEnd() {}
+  onTouchEnd(e: WechatMiniprogram.TouchEvent) {
+    this.triggerEvent('dragend', { e });
+  }
 }
diff --git a/src/slider/slider.wxml b/src/slider/slider.wxml
index cd7312704..f172647c2 100644
--- a/src/slider/slider.wxml
+++ b/src/slider/slider.wxml
@@ -34,6 +34,7 @@
         <view
           id="singleDot"
           class="{{classPrefix}}__dot {{prefix}}-class-cursor"
+          bind:touchstart="onTouchStart"
           bind:touchmove="onSingleLineTap"
           bind:touchend="onTouchEnd"
           bind:touchcancel="onTouchEnd"
@@ -96,6 +97,7 @@
       >
         <view
           id="leftDot"
+          bind:touchstart="onTouchStart"
           bind:touchmove="onTouchMoveLeft"
           bind:touchend="onTouchEnd"
           bind:touchcancel="onTouchEnd"
@@ -122,6 +124,7 @@
         </view>
         <view
           id="rightDot"
+          bind:touchstart="onTouchStart"
           bind:touchmove="onTouchMoveRight"
           bind:touchend="onTouchEnd"
           bind:touchcancel="onTouchEnd"

From 348ba4cd95cdaa947440bcb48a272fe016edd779 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Fri, 28 Apr 2023 10:44:50 +0800
Subject: [PATCH 033/202] fix(image-viewer): add using-custom-navation property
 (#1944)

---
 src/common/style/_variables.less   |  3 ++
 src/image-viewer/README.en-US.md   | 24 ++++++++++++++++
 src/image-viewer/README.md         | 21 +++++++-------
 src/image-viewer/image-viewer.less |  7 +++--
 src/image-viewer/image-viewer.ts   | 14 ++++++++++
 src/image-viewer/image-viewer.wxml |  2 +-
 src/image-viewer/props.ts          | 24 +++++++++-------
 src/image-viewer/type.ts           | 45 +++++++++++++++++-------------
 8 files changed, 96 insertions(+), 44 deletions(-)
 create mode 100644 src/image-viewer/README.en-US.md

diff --git a/src/common/style/_variables.less b/src/common/style/_variables.less
index 9d055179c..4a01bcb7e 100644
--- a/src/common/style/_variables.less
+++ b/src/common/style/_variables.less
@@ -183,3 +183,6 @@
 @text-color-anti: var(--td-text-color-anti, @font-white-1);
 @text-color-brand: var(--td-text-color-brand, @brand-color);
 @text-color-link: var(--td-text-color-link, @brand-color);
+
+// 定位
+@position-fixed-top: var(--td-position-fixed-top, 0);
diff --git a/src/image-viewer/README.en-US.md b/src/image-viewer/README.en-US.md
new file mode 100644
index 000000000..b00c9be0e
--- /dev/null
+++ b/src/image-viewer/README.en-US.md
@@ -0,0 +1,24 @@
+:: BASE_DOC ::
+
+## API
+### ImageViewer Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+background-color | String | 'rgba(0, 0, 0, 1)' | \- | N
+close-btn | String / Boolean / Object / Slot | false | \- | N
+delete-btn | String / Boolean / Object / Slot | false | \- | N
+images | Array | [] | Typescript：`Array<string>` | N
+initial-index | Number | 0 | Typescript：`Number` | N
+show-index | Boolean | false | \- | N
+using-custom-navbar | Boolean | false | \- | N
+visible | Boolean | false | \- | N
+default-visible | Boolean | undefined | uncontrolled property | N
+
+### ImageViewer Events
+
+name | params | description
+-- | -- | --
+change | `(index: Number)` | \-
+close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | \-
+delete | `(index: Number)` | \-
diff --git a/src/image-viewer/README.md b/src/image-viewer/README.md
index 44a10a92b..f283c2544 100644
--- a/src/image-viewer/README.md
+++ b/src/image-viewer/README.md
@@ -28,36 +28,37 @@ isComponent: true
 
 ### 类型
 
-基础图片预览
+#### 基础图片预览
 
 {{ base }}
 
-带操作图片预览
+#### 带操作图片预览
+
+顶部区域可以配置关闭按钮、页码信息、删除按钮。
 
 {{ delete }}
 
+> 当使用自定义导航栏的时候，顶部的操作按钮会被遮挡，此时需要开启 `using-custom-navbar` 来解决
 
 ## API
-
 ### ImageViewer Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-background-color | String / Number | rgba(0, 0, 0, 1) | 遮罩的背景颜色 | N
+background-color | String | 'rgba(0, 0, 0, 1)' | 遮罩的背景颜色 | N
+close-btn | String / Boolean / Object / Slot | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 | N
+delete-btn | String / Boolean / Object / Slot | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 | N
 images | Array | [] | 图片数组。TS 类型：`Array<string>` | N
-initial-index | Number | 0 | 默认展示第几项 | N
+initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N
 show-index | Boolean | false | 是否显示页码 | N
-delete-btn | Boolean / String / Object / Slot | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标。 | N
-close-btn | Boolean / String / Object / Slot | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标。 | N
+using-custom-navbar | Boolean | false | `v1.1.4` 是否使用了自定义导航栏 | N
 visible | Boolean | false | 隐藏/显示预览 | N
 default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 | N
 
-
 ### ImageViewer Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(index: Number)` | 翻页时回调
-close | `(trigger: 'overlay' \| 'button' , visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发
+close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发
 delete | `(index: Number)` | 点击删除操作按钮时触发
-
diff --git a/src/image-viewer/image-viewer.less b/src/image-viewer/image-viewer.less
index def5079bd..a2ca732a4 100644
--- a/src/image-viewer/image-viewer.less
+++ b/src/image-viewer/image-viewer.less
@@ -10,10 +10,11 @@
 @image-viewer-nav-index-font-size: var(--td-image-viewer-nav-index-font-size, @font-size-base);
 @image-viewer-close-margin-left: var(--td-image-viewer-close-margin-left, @spacer-1);
 @image-viewer-delete-margin-right: var(--td-image-viewer-delete-margin-right, @spacer-1);
+@image-viewer-top: var(--td-image-viewer-top, @position-fixed-top);
 
 .@{image-viewer} {
   position: fixed;
-  top: 0;
+  top: @image-viewer-top;
   left: 0;
   bottom: 0;
   right: 0;
@@ -23,7 +24,7 @@
   overflow: hidden;
 
   &__mask {
-    position: fixed;
+    position: absolute;
     z-index: 1000;
     left: 0;
     top: 0;
@@ -56,7 +57,7 @@
 
   &__nav {
     width: 100%;
-    position: fixed;
+    position: absolute;
     display: flex;
     align-items: center;
     justify-content: space-between;
diff --git a/src/image-viewer/image-viewer.ts b/src/image-viewer/image-viewer.ts
index 875f1a512..07d8a1db8 100644
--- a/src/image-viewer/image-viewer.ts
+++ b/src/image-viewer/image-viewer.ts
@@ -22,6 +22,7 @@ export default class ImageViewer extends SuperComponent {
     windowWidth: 0,
     swiperStyle: {},
     imagesStyle: {},
+    maskTop: 0,
   };
 
   options = {
@@ -37,6 +38,7 @@ export default class ImageViewer extends SuperComponent {
 
   ready() {
     this.saveScreenSize();
+    this.calcMaskTop();
   }
 
   observers = {
@@ -60,6 +62,18 @@ export default class ImageViewer extends SuperComponent {
   };
 
   methods = {
+    calcMaskTop() {
+      if (this.data.usingCustomNavbar) {
+        const rect = wx?.getMenuButtonBoundingClientRect() || null;
+        const { statusBarHeight } = wx.getSystemInfoSync();
+
+        if (rect && statusBarHeight) {
+          this.setData({
+            maskTop: rect.top - statusBarHeight + rect.bottom,
+          });
+        }
+      }
+    },
     saveScreenSize() {
       const { windowHeight, windowWidth } = wx.getSystemInfoSync();
       this.setData({
diff --git a/src/image-viewer/image-viewer.wxml b/src/image-viewer/image-viewer.wxml
index 4379fd5a4..298e75cf1 100644
--- a/src/image-viewer/image-viewer.wxml
+++ b/src/image-viewer/image-viewer.wxml
@@ -5,7 +5,7 @@
   wx:if="{{visible}}"
   id="{{classPrefix}}"
   class="{{classPrefix}} class {{prefix}}-class"
-  style="{{_._style([style, customStyle])}}"
+  style="{{_._style([style, customStyle, '--td-image-viewer-top: ' + maskTop + 'px'])}}"
 >
   <view
     class="{{classPrefix}}__mask"
diff --git a/src/image-viewer/props.ts b/src/image-viewer/props.ts
index e1c74a71e..9c722c67e 100644
--- a/src/image-viewer/props.ts
+++ b/src/image-viewer/props.ts
@@ -9,15 +9,24 @@ const props: TdImageViewerProps = {
   /** 遮罩的背景颜色 */
   backgroundColor: {
     type: String,
-    optionalTypes: [Number],
     value: 'rgba(0, 0, 0, 1)',
   },
+  /** 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标 */
+  closeBtn: {
+    type: null,
+    value: false,
+  },
+  /** 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标 */
+  deleteBtn: {
+    type: null,
+    value: false,
+  },
   /** 图片数组 */
   images: {
     type: Array,
     value: [],
   },
-  /** 默认展示第几项 */
+  /** 初始化页码 */
   initialIndex: {
     type: Number,
     value: 0,
@@ -27,14 +36,9 @@ const props: TdImageViewerProps = {
     type: Boolean,
     value: false,
   },
-  /** 是否显示删除操作 */
-  deleteBtn: {
-    type: null,
-    value: false,
-  },
-  /** 是否显示关闭操作 */
-  closeBtn: {
-    type: null,
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: {
+    type: Boolean,
     value: false,
   },
   /** 隐藏/显示预览 */
diff --git a/src/image-viewer/type.ts b/src/image-viewer/type.ts
index fe7b8e2f3..8f202fcd6 100644
--- a/src/image-viewer/type.ts
+++ b/src/image-viewer/type.ts
@@ -6,21 +6,28 @@
 
 export interface TdImageViewerProps {
   /**
-   * 自定义组件样式
-   * @default ''
+   * 遮罩的背景颜色
+   * @default 'rgba(0, 0, 0, 1)'
    */
-  style?: {
+  backgroundColor?: {
     type: StringConstructor;
     value?: string;
   };
   /**
-   * 遮罩的背景颜色
-   * @default rgba(0, 0, 0, .6)
+   * 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标
+   * @default false
    */
-  backgroundColor?: {
-    type: StringConstructor;
-    optionalTypes: Array<NumberConstructor>;
-    value?: string | number;
+  closeBtn?: {
+    type: null;
+    value?: string | boolean | object;
+  };
+  /**
+   * 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标
+   * @default false
+   */
+  deleteBtn?: {
+    type: null;
+    value?: string | boolean | object;
   };
   /**
    * 图片数组
@@ -31,12 +38,12 @@ export interface TdImageViewerProps {
     value?: Array<string>;
   };
   /**
-   * 默认展示第几项
+   * 初始化页码
    * @default 0
    */
   initialIndex?: {
     type: NumberConstructor;
-    value?: number;
+    value?: Number;
   };
   /**
    * 是否显示页码
@@ -46,15 +53,13 @@ export interface TdImageViewerProps {
     type: BooleanConstructor;
     value?: boolean;
   };
-  /** 是否显示删除操作 */
-  deleteBtn?: {
-    type: null;
-    value?: boolean | string | object;
-  };
-  /** 是否显示关闭操作 */
-  closeBtn?: {
-    type: null;
-    value?: boolean | string | object;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: {
+    type: BooleanConstructor;
+    value?: boolean;
   };
   /**
    * 隐藏/显示预览

From c977ec50f2765c3504fe4ca70aeeb1cddf58e79b Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Fri, 28 Apr 2023 16:50:12 +0800
Subject: [PATCH 034/202] feat(Swiper): update api docs (#1945)

* feat(Swiper): update api docs

* Update CHANGELOG.md
---
 CHANGELOG.md               |  1 +
 src/swiper-nav/type.ts     |  8 --------
 src/swiper/README.en-US.md |  2 +-
 src/swiper/README.md       |  2 +-
 src/swiper/type.ts         | 15 ++++++---------
 5 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c20a50483..af3d0bdf3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ docClass: timeline
 ## 🌈 1.1.2 `2023-04-17` 
 ### 🚀 Features
 - `Swiper`: 支持无障碍访问 @zhangpaopao0609 ([#1598](https://github.com/Tencent/tdesign-miniprogram/pull/1598))
+- `Swiper`: list 属性支持 SwiperList[] 类型 @zhangpaopao0609 ([#1598](https://github.com/Tencent/tdesign-miniprogram/pull/1598))
 - `Divider`: 新增 CSS Variables 用于控制分割线样式 @favouredddd ([#1890](https://github.com/Tencent/tdesign-miniprogram/pull/1890))
 - `Grid`: 补充 CSS Variables 以修改不同列数下的图片尺寸和文字大小 @lolhezihehe ([#1903](https://github.com/Tencent/tdesign-miniprogram/pull/1903))
 - `Radio`: 新增 CSS Variables 用于控制内容字体大小 @favouredddd ([#1895](https://github.com/Tencent/tdesign-miniprogram/pull/1895))
diff --git a/src/swiper-nav/type.ts b/src/swiper-nav/type.ts
index 82c762a97..6b5b3205a 100644
--- a/src/swiper-nav/type.ts
+++ b/src/swiper-nav/type.ts
@@ -13,14 +13,6 @@ export interface TdSwiperNavProps {
     type: NumberConstructor;
     value?: number;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
    * @default horizontal
diff --git a/src/swiper/README.en-US.md b/src/swiper/README.en-US.md
index d827dbbe3..f9aa265ee 100644
--- a/src/swiper/README.en-US.md
+++ b/src/swiper/README.en-US.md
@@ -14,7 +14,7 @@ easing-function | String | default | `0.32.0`。options：default/linear/easeInC
 height | String / Number | 192 | \- | N
 image-props | Object | - | `0.34.0` | N
 interval | Number | 5000 | \- | N
-list | Array | - | `0.32.0`。Typescript：`string[]` | N
+list | Array | - | `0.32.0`。Typescript：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
 loop | Boolean | true | \- | N
 navigation | Boolean / Object / Slot | true | Typescript：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
 next-margin | String / Number | 0 | `0.32.0` | N
diff --git a/src/swiper/README.md b/src/swiper/README.md
index 37bd573dc..f48101b0a 100644
--- a/src/swiper/README.md
+++ b/src/swiper/README.md
@@ -69,7 +69,7 @@ easing-function | String | default | `0.32.0`。指定 swiper 切换缓动动画
 height | String / Number | 192 | 轮播的高度；默认单位 `px` | N
 image-props | Object | - | `0.34.0`。透传至 Image 组件 | N
 interval | Number | 5000 | 轮播间隔时间 | N
-list | Array | - | `0.32.0`。图片列表。TS 类型：`string[]` | N
+list | Array | - | `0.32.0`。图片列表。TS 类型：`string[] \| SwiperList[]` `interface SwiperList { value: string, ariaLabel: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
 loop | Boolean | true | 是否循环播放 | N
 navigation | Boolean / Object / Slot | true | 导航器全部配置，true 的话使用默认配置。TS 类型：`SwiperNavProps \| boolean`，[SwiperNav API Documents](./swiper-nav?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
 next-margin | String / Number | 0 | `0.32.0`。后边距，可用于露出后一项的一小部分。默认单位 `px` | N
diff --git a/src/swiper/type.ts b/src/swiper/type.ts
index b2d4154a0..c985fdce7 100644
--- a/src/swiper/type.ts
+++ b/src/swiper/type.ts
@@ -23,14 +23,6 @@ export interface TdSwiperProps {
     type: NumberConstructor;
     value?: number;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
    * @default horizontal
@@ -91,7 +83,7 @@ export interface TdSwiperProps {
    */
   list?: {
     type: ArrayConstructor;
-    value?: string[];
+    value?: string[] | SwiperList[];
   };
   /**
    * 是否循环播放
@@ -142,3 +134,8 @@ export interface TdSwiperProps {
     value?: boolean;
   };
 }
+
+export interface SwiperList {
+  value: string;
+  ariaLabel: string;
+}

From 049edc7451bab647c6df54ab1a774538855808b5 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Sun, 30 Apr 2023 00:07:59 +0800
Subject: [PATCH 035/202] fix(picker): enable to using falsy value (#1948)

---
 src/picker/picker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/picker/picker.ts b/src/picker/picker.ts
index 1a7c08ff7..7d81de498 100644
--- a/src/picker/picker.ts
+++ b/src/picker/picker.ts
@@ -49,7 +49,7 @@ export default class Picker extends SuperComponent {
 
       this.$children.forEach((child, index) => {
         child.setData({
-          value: value?.[index] || '',
+          value: value?.[index] ?? '',
         });
         child.update();
       });

From 20f4899c1b78fa5cd5fa29fee8bea95138392866 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Sun, 30 Apr 2023 00:14:59 +0800
Subject: [PATCH 036/202] fix(toast): auto hide when page is hide (#1947)

---
 src/toast/toast.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/toast/toast.ts b/src/toast/toast.ts
index 89791acee..42a0dc671 100644
--- a/src/toast/toast.ts
+++ b/src/toast/toast.ts
@@ -30,9 +30,17 @@ export default class Toast extends SuperComponent {
 
   properties = props;
 
-  detached() {
-    this.destroyed();
-  }
+  lifetimes = {
+    detached() {
+      this.destroyed();
+    },
+  };
+
+  pageLifetimes = {
+    hide() {
+      this.hide();
+    },
+  };
 
   methods = {
     show(options: ToastOptionsType) {

From 7f05e3b7517709813969fc88cd6b2a7db1a7b8aa Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 1 May 2023 23:18:16 +0800
Subject: [PATCH 037/202] feat(swiper): add image-load event (#1949)

* feat(swiper): add image-load event

* fix: resolve fallback value

* test: update snapshot
---
 src/common/template/image.wxml                      | 1 +
 src/swiper/README.md                                | 1 +
 src/swiper/__test__/__snapshots__/demo.test.js.snap | 1 +
 src/swiper/_example/base/index.js                   | 3 +++
 src/swiper/_example/base/index.wxml                 | 1 +
 src/swiper/swiper.ts                                | 4 ++++
 src/swiper/swiper.wxml                              | 2 +-
 7 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/common/template/image.wxml b/src/common/template/image.wxml
index 7c78c4a8c..43fe5244f 100644
--- a/src/common/template/image.wxml
+++ b/src/common/template/image.wxml
@@ -15,6 +15,7 @@
     mode="{{mode || 'scaleToFill'}}"
     webp="{{webp || false}}"
     showMenuByLongpress="{{showMenuByLongpress || false}}"
+    data-custom="{{dataset || null}}"
     bind:error="{{binderror}}"
     bind:load="{{bindload}}"
   />
diff --git a/src/swiper/README.md b/src/swiper/README.md
index f48101b0a..5a941d155 100644
--- a/src/swiper/README.md
+++ b/src/swiper/README.md
@@ -83,6 +83,7 @@ snap-to-edge | Boolean | false | `0.32.0`。当 swiper-item 的个数大于等
 -- | -- | --
 change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
 click | `(index: number)` | `0.34.0`。点击轮播项时触发
+image-load | `(index: number)` | `1.1.4`。图片加载时触发
 
 ### SwiperNav Props
 
diff --git a/src/swiper/__test__/__snapshots__/demo.test.js.snap b/src/swiper/__test__/__snapshots__/demo.test.js.snap
index 44dbe96f3..fa7eeb923 100644
--- a/src/swiper/__test__/__snapshots__/demo.test.js.snap
+++ b/src/swiper/__test__/__snapshots__/demo.test.js.snap
@@ -23,6 +23,7 @@ exports[`Swiper Swiper base demo works fine 1`] = `
     }}"
     bind:change="onChange"
     bind:click="onTap"
+    bind:image-load="onImageLoad"
   />
 </base>
 `;
diff --git a/src/swiper/_example/base/index.js b/src/swiper/_example/base/index.js
index 2bbb7a9a0..a77d37ac3 100644
--- a/src/swiper/_example/base/index.js
+++ b/src/swiper/_example/base/index.js
@@ -27,5 +27,8 @@ Component({
 
       console.log(current, source);
     },
+    onImageLoad(e) {
+      console.log(e.detail.index);
+    },
   },
 });
diff --git a/src/swiper/_example/base/index.wxml b/src/swiper/_example/base/index.wxml
index 1034ca8bd..9688a0d4c 100644
--- a/src/swiper/_example/base/index.wxml
+++ b/src/swiper/_example/base/index.wxml
@@ -7,5 +7,6 @@
   list="{{swiperList}}"
   bind:click="onTap"
   bind:change="onChange"
+  bind:image-load="onImageLoad"
 >
 </t-swiper>
diff --git a/src/swiper/swiper.ts b/src/swiper/swiper.ts
index 2d536ea11..f9539b3db 100644
--- a/src/swiper/swiper.ts
+++ b/src/swiper/swiper.ts
@@ -102,5 +102,9 @@ export default class Swiper extends SuperComponent {
       });
       this.triggerEvent('change', { current: nextPos, source });
     },
+
+    onImageLoad(e) {
+      this.triggerEvent('image-load', { index: e.target.dataset.custom });
+    },
   };
 }
diff --git a/src/swiper/swiper.wxml b/src/swiper/swiper.wxml
index baa7fdcc9..e4fc9a141 100644
--- a/src/swiper/swiper.wxml
+++ b/src/swiper/swiper.wxml
@@ -32,7 +32,7 @@
     >
       <template
         is="image"
-        data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: _.isObject(item) ? item.value : item, mode: 'aspectFill', ...imageProps }}"
+        data="{{ class: classPrefix + '__image-host', tClass: this.getImageClass(prefix, current, index, list), style: 'height: ' + _.addUnit(height), src: _.isObject(item) ? item.value : item, mode: 'aspectFill', dataset: index, ...imageProps, bindload: 'onImageLoad' }}"
       />
     </swiper-item>
   </swiper>

From e1e7aa71d76b8f3dc7eeb910a1f0aa7b0252e015 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 1 May 2023 23:22:24 +0800
Subject: [PATCH 038/202] chore: publish v1.1.4 (#1950)

* chore: publish v1.1.4

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 13 +++++++++++++
 package.json |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index af3d0bdf3..a73783259 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,19 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.4 `2023-05-01` 
+### 🚀 Features
+- `ImageViewer`: 新增 usingCustomNavigation 属性，处理使用自定义导航栏时被遮挡的问题 @LeeJim ([#1944](https://github.com/Tencent/tdesign-miniprogram/pull/1944))
+- `Swiper`: 新增 image-load 事件 @LeeJim ([#1949](https://github.com/Tencent/tdesign-miniprogram/pull/1949))
+
+### 🐞 Bug Fixes
+- `Slider`: 修复 dragstart、dragend 事件没反应的问题 @LeeJim ([#1940](https://github.com/Tencent/tdesign-miniprogram/pull/1940))
+- `Picker`: 解决使用 falsy 值导致无法正确选择的问题 @LeeJim ([#1948](https://github.com/Tencent/tdesign-miniprogram/pull/1948))
+- `Toast`: 页面隐藏的时候自动关闭 @LeeJim ([#1947](https://github.com/Tencent/tdesign-miniprogram/pull/1947))
+
+### 🚧 Others
+- `Swiper`: 更新 swiper 组件 API 文档 @anlyyao ([#1945](https://github.com/Tencent/tdesign-miniprogram/pull/1945))
+
 ## 🌈 1.1.3 `2023-04-26` 
 ### 🚀 Features
 - `Rate`: 支持无障碍访问 @byq1213 ([#1574](https://github.com/Tencent/tdesign-miniprogram/pull/1574))
diff --git a/package.json b/package.json
index 41a315f75..483e8d8b8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From e3ba571229d2160c699ddeba247ff865433ea553 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Thu, 4 May 2023 15:03:23 +0800
Subject: [PATCH 039/202] docs(picker): enrich api detail (#1956)

---
 src/picker/README.en-US.md | 5 ++---
 src/picker/README.md       | 5 +++--
 src/picker/props.ts        | 2 +-
 src/picker/type.ts         | 9 +--------
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/picker/README.en-US.md b/src/picker/README.en-US.md
index 417a17570..6558677e6 100644
--- a/src/picker/README.en-US.md
+++ b/src/picker/README.en-US.md
@@ -8,9 +8,8 @@ name | type | default | description | required
 auto-close | Boolean | true | \- | N
 cancel-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps` | N
 confirm-btn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
-footer | Slot | - | `deprecated` | N
-header | Boolean / Slot | true | \- | N
-keys | Object | - | Typescript：`KeysType` | N
+header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 title | String | '' | \- | N
 value | Array | - | Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 default-value | Array | undefined | uncontrolled property。Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
diff --git a/src/picker/README.md b/src/picker/README.md
index 4b4c55666..850f8a4fb 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -20,6 +20,7 @@ isComponent: true
 ## 代码演示
 
 ### 组件类型
+
 #### 基础选择器
 
 单项和多选选择
@@ -47,8 +48,8 @@ auto-close | Boolean | true | 自动关闭；在确认、取消、点击遮罩
 cancel-btn | String / Boolean / Object | true | 取消按钮文字。TS 类型：`boolean \| string \| ButtonProps` | N
 confirm-btn | String / Boolean / Object | true | 确定按钮文字。TS 类型：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 footer | Slot | - | 已废弃。底部内容 | N
-header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 | N
-keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N
+header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 title | String | '' | 标题 | N
 value | Array | - | 选中值。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 default-value | Array | undefined | 选中值。非受控属性。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
diff --git a/src/picker/props.ts b/src/picker/props.ts
index 1a88d86f4..e7ebe97b1 100644
--- a/src/picker/props.ts
+++ b/src/picker/props.ts
@@ -21,7 +21,7 @@ const props: TdPickerProps = {
     type: null,
     value: true,
   },
-  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 */
+  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 */
   header: {
     type: Boolean,
     value: true,
diff --git a/src/picker/type.ts b/src/picker/type.ts
index 8a5ffbbb3..dcbbe8a67 100644
--- a/src/picker/type.ts
+++ b/src/picker/type.ts
@@ -33,7 +33,7 @@ export interface TdPickerProps {
     value?: boolean | string | ButtonProps;
   };
   /**
-   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容
    * @default true
    */
   header?: {
@@ -79,11 +79,4 @@ export interface TdPickerProps {
   };
 }
 
-export type PickerColumn = PickerColumnItem[];
-
-export interface PickerColumnItem {
-  label: string;
-  value: string;
-}
-
 export type PickerValue = string | number;

From 2a837254569b9fb0ca9a9c4453f7e73c1844d307 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Thu, 4 May 2023 16:50:13 +0800
Subject: [PATCH 040/202] fix(tabs): resolve track position (#1958)

---
 src/tabs/tabs.ts   | 26 +++++++++++++-------------
 src/tabs/tabs.wxml |  6 +++---
 src/tabs/tabs.wxs  |  6 +-----
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts
index a1e0a17d4..a012b66c9 100644
--- a/src/tabs/tabs.ts
+++ b/src/tabs/tabs.ts
@@ -63,8 +63,6 @@ export default class Tabs extends SuperComponent {
     tabs: [],
     currentIndex: -1,
     trackStyle: '',
-    isScrollX: true,
-    direction: 'X',
     offset: 0,
     tabID: '',
     placement: 'top',
@@ -95,6 +93,12 @@ export default class Tabs extends SuperComponent {
   }
 
   methods = {
+    onScroll(e) {
+      const { scrollLeft } = e.detail;
+      this.setData({
+        offset: scrollLeft,
+      });
+    },
     updateTabs(cb) {
       const { children } = this;
       const tabs = children.map((child: any) => child.data);
@@ -166,7 +170,7 @@ export default class Tabs extends SuperComponent {
       if (!this.properties.showBottomLine) return;
       const { children } = this;
       if (!children) return;
-      const { currentIndex, isScrollX, direction } = this.data;
+      const { currentIndex } = this.data;
       if (currentIndex <= -1) return;
 
       try {
@@ -179,10 +183,10 @@ export default class Tabs extends SuperComponent {
 
         res.forEach((item) => {
           if (count < currentIndex) {
-            distance += isScrollX ? item.width : item.height;
+            distance += item.width;
             count += 1;
           }
-          totalSize += isScrollX ? item.width : item.height;
+          totalSize += item.width;
         });
 
         if (this.containerWidth) {
@@ -193,18 +197,14 @@ export default class Tabs extends SuperComponent {
           });
         }
 
-        if (isScrollX && this.data.theme === 'line') {
+        if (this.data.theme === 'line') {
           const trackLineWidth = await this.getTrackSize();
           distance += (rect.width - trackLineWidth) / 2;
         }
-        let trackStyle = `-webkit-transform: translate${direction}(${distance}px);
-          transform: translate${direction}(${distance}px);
-        `;
-        if (!isScrollX) {
-          trackStyle += `height: ${rect.height}px;`;
-        }
         this.setData({
-          trackStyle,
+          trackStyle: `-webkit-transform: translateX(${distance}px);
+            transform: translateX(${distance}px);
+          `,
         });
       } catch (err) {
         this.triggerEvent('error', err);
diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
index 5d96cf0c0..c716f9ca7 100644
--- a/src/tabs/tabs.wxml
+++ b/src/tabs/tabs.wxml
@@ -18,10 +18,10 @@
         enhanced
         enable-flex
         scroll-left="{{offset}}"
-        scroll-x="{{isScrollX}}"
-        scroll-y="{{isScrollY}}"
+        scroll-x="{{true}}"
         scroll-with-animation
         show-scrollbar="{{false}}"
+        bind:scroll="onScroll"
       >
         <view class="{{_.cls(classPrefix + '__nav', [placement])}}" aria-role="tablist">
           <view
@@ -68,7 +68,7 @@
   >
     <view
       class="{{classPrefix}}__content-inner {{prefix}}-class-content"
-      style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex, direction}) }}"
+      style="{{ filters.animate({duration: animation.duration, currentIndex:currentIndex}) }}"
     >
       <slot />
     </view>
diff --git a/src/tabs/tabs.wxs b/src/tabs/tabs.wxs
index cb51149b4..b3f1e42ec 100644
--- a/src/tabs/tabs.wxs
+++ b/src/tabs/tabs.wxs
@@ -5,11 +5,7 @@ function animate(options) {
 
   if (options.duration) {
     result.push('transition-duration: ' + options.duration + 's');
-    result.push(
-      options.direction === 'Y'
-        ? ';transform: translate3d( 0,' + -100 * options.currentIndex + '%, 0)'
-        : ';transform: translate3d( ' + -100 * options.currentIndex + '%,0, 0)',
-    );
+    result.push('transform: translate3d( ' + -100 * options.currentIndex + '%,0, 0)');
   }
 
   return result.join(';');

From 6fe5ae904b719cda7efee543586ebd3cf120c391 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Thu, 4 May 2023 16:52:29 +0800
Subject: [PATCH 041/202] feat(pulldown-refresh): add some properties from
 scroll-view (#1959)

* feat(pulldown-refresh): add some properties from scroll-view

* refactor(pulldown-refresh): using px to calculate
---
 src/pull-down-refresh/README.en-US.md         |  8 ++-
 src/pull-down-refresh/README.md               |  8 ++-
 src/pull-down-refresh/__test__/index.test.js  | 21 +++-----
 src/pull-down-refresh/_example/base/index.js  |  6 +--
 .../_example/base/index.wxml                  |  2 +-
 src/pull-down-refresh/props.ts                | 31 +++++++++--
 src/pull-down-refresh/pull-down-refresh.ts    | 54 +++++++------------
 src/pull-down-refresh/pull-down-refresh.wxml  | 16 +++---
 src/pull-down-refresh/type.ts                 | 48 +++++++++++++----
 9 files changed, 119 insertions(+), 75 deletions(-)

diff --git a/src/pull-down-refresh/README.en-US.md b/src/pull-down-refresh/README.en-US.md
index e4cc94cba..cf51713ec 100644
--- a/src/pull-down-refresh/README.en-US.md
+++ b/src/pull-down-refresh/README.en-US.md
@@ -5,14 +5,19 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+enable-back-to-top | Boolean | true | `1.1.5` | N
+enable-passive | Boolean | false | `1.1.5` | N
 external-classes | Array | - | `['t-class', 't-class-loading','t-class-text', 't-class-indicator']` | N
 loading-bar-height | String / Number | 50 | \- | N
 loading-props | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/pull-down-refresh/type.ts) | N
 loading-texts | Array | [] | Typescript：`string[]` | N
+lower-threshold | String / Number | 50 | `1.1.5` | N
 max-bar-height | String / Number | 80 | \- | N
 refresh-timeout | Number | 3000 | \- | N
+scroll-into-view | String | - | `1.1.5` | N
+upper-threshold | String / Number | 50 | `1.1.5` | N
 value | Boolean | false | \- | N
-default-value | Boolean | false | uncontrolled property | N
+default-value | Boolean | undefined | uncontrolled property | N
 
 ### PullDownRefresh Events
 
@@ -20,5 +25,4 @@ name | params | description
 -- | -- | --
 change | `(value: boolean)` | \-
 refresh | \- | \-
-scrolltolower | \- | \-
 timeout | \- | \-
diff --git a/src/pull-down-refresh/README.md b/src/pull-down-refresh/README.md
index afb61c9e6..145f7f37f 100644
--- a/src/pull-down-refresh/README.md
+++ b/src/pull-down-refresh/README.md
@@ -33,14 +33,19 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+enable-back-to-top | Boolean | true | `1.1.5`。iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 | N
+enable-passive | Boolean | false | `1.1.5`。开启 passive 特性，能优化一定的滚动性能 | N
 external-classes | Array | - | 加载loading样式。`['t-class', 't-class-loading','t-class-text', 't-class-indicator']` | N
 loading-bar-height | String / Number | 50 | 加载中下拉高度，如果值为数字则单位是：'px' | N
 loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/pull-down-refresh/type.ts) | N
 loading-texts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
+lower-threshold | String / Number | 50 | `1.1.5`。距底部/右边多远时，触发 scrolltolower 事件 | N
 max-bar-height | String / Number | 80 | 最大下拉高度，如果值为数字则单位是：'px' | N
 refresh-timeout | Number | 3000 | 刷新超时时间 | N
+scroll-into-view | String | - | `1.1.5`。值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | N
+upper-threshold | String / Number | 50 | `1.1.5`。距顶部/左边多远时，触发 scrolltoupper 事件 | N
 value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 | N
-default-value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。非受控属性 | N
+default-value | Boolean | undefined | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。非受控属性 | N
 
 ### PullDownRefresh Events
 
@@ -48,5 +53,4 @@ default-value | Boolean | false | 组件状态，值为 `true` 表示下拉状
 -- | -- | --
 change | `(value: boolean)` | 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
 refresh | \- | 结束下拉时触发
-scrolltolower | \- | 滚动到页面底部时触发
 timeout | \- | 刷新超时触发
diff --git a/src/pull-down-refresh/__test__/index.test.js b/src/pull-down-refresh/__test__/index.test.js
index b7c4c90db..acee86c8c 100644
--- a/src/pull-down-refresh/__test__/index.test.js
+++ b/src/pull-down-refresh/__test__/index.test.js
@@ -5,7 +5,7 @@ describe('pull-down-refresh', () => {
   const pullDownRefresh = load(path.resolve(__dirname, `../pull-down-refresh`), 't-pull-down-refresh');
 
   describe('props', () => {
-    it(`: style && customStyle`, async () => {
+    it(`:style`, async () => {
       const id = simulate.load({
         template: `<t-pull-down-refresh class="pull-down-refresh" style="{{style}}" customStyle="{{customStyle}}"></t-pull-down-refresh>`,
         usingComponents: {
@@ -29,11 +29,11 @@ describe('pull-down-refresh', () => {
       }
     });
 
-    it(': maxBarHeight', async () => {
+    it(':maxBarHeight', async () => {
       const id = simulate.load({
         template: `<t-pull-down-refresh
           id="t-pull-down-refresh"
-          value="{{baseRefresh.value}}"
+          value="{{value}}"
           refresh-timeout="{{refreshTimeout}}"
           loading-bar-height="{{loadingBarHeight}}"
           max-bar-height="{{maxBarHeight}}"
@@ -47,9 +47,7 @@ describe('pull-down-refresh', () => {
           refreshTimeout: 40,
           loadingBarHeight: 20,
           maxBarHeight: 80,
-          baseRefresh: {
-            value: false,
-          },
+          value: false,
           loadingProps: {
             size: '50rpx',
           },
@@ -60,20 +58,19 @@ describe('pull-down-refresh', () => {
       await simulate.sleep(240); // 等待 close 执行完毕
       const $pullDownRefresh = comp.querySelector('#t-pull-down-refresh');
       const $tips = $pullDownRefresh.querySelector('.t-pull-down-refresh__tips');
-
       expect($tips.dom.getAttribute('style').includes(`${comp.data.loadingBarHeight}px`)).toBeTruthy();
       // expect(comp.toJSON()).toMatchSnapshot();
     });
   });
   describe('event', () => {
-    it(': change', async () => {
+    it(':change', async () => {
       const handleRefresh = jest.fn();
       const handleTimeout = jest.fn();
       const handleChange = jest.fn();
       const id = simulate.load({
         template: `<t-pull-down-refresh
           id="t-pull-down-refresh"
-          value="{{baseRefresh.value}}"
+          value="{{value}}"
           refresh-timeout="{{refreshTimeout}}"
           loading-bar-height="{{loadingBarHeight}}"
           max-bar-height="{{maxBarHeight}}"
@@ -88,11 +85,9 @@ describe('pull-down-refresh', () => {
         },
         data: {
           refreshTimeout: 40,
-          loadingBarHeight: 50,
+          loadingBarHeight: 25,
           maxBarHeight: 80,
-          baseRefresh: {
-            value: false,
-          },
+          value: false,
           loadingProps: {
             size: '50rpx',
           },
diff --git a/src/pull-down-refresh/_example/base/index.js b/src/pull-down-refresh/_example/base/index.js
index 2c71064d1..58191403a 100644
--- a/src/pull-down-refresh/_example/base/index.js
+++ b/src/pull-down-refresh/_example/base/index.js
@@ -1,8 +1,6 @@
 Component({
   data: {
-    baseRefresh: {
-      value: false,
-    },
+    enable: false,
     loadingProps: {
       size: '50rpx',
     },
@@ -14,7 +12,7 @@ Component({
   methods: {
     onPullDownRefresh() {
       setTimeout(() => {
-        this.setData({ 'baseRefresh.value': false });
+        this.setData({ enable: false });
       }, 1500);
     },
     onScroll(e) {
diff --git a/src/pull-down-refresh/_example/base/index.wxml b/src/pull-down-refresh/_example/base/index.wxml
index 26b61a251..14d6ba6d0 100644
--- a/src/pull-down-refresh/_example/base/index.wxml
+++ b/src/pull-down-refresh/_example/base/index.wxml
@@ -1,5 +1,5 @@
 <t-pull-down-refresh
-  value="{{baseRefresh.value}}"
+  value="{{enable}}"
   loadingProps="{{loadingProps}}"
   loadingTexts="{{['下拉刷新', '松手刷新', '正在刷新', '刷新完成']}}"
   bind:refresh="onPullDownRefresh"
diff --git a/src/pull-down-refresh/props.ts b/src/pull-down-refresh/props.ts
index 8ec7484e8..7b959fa2a 100644
--- a/src/pull-down-refresh/props.ts
+++ b/src/pull-down-refresh/props.ts
@@ -6,14 +6,23 @@
 
 import { TdPullDownRefreshProps } from './type';
 const props: TdPullDownRefreshProps = {
+  /** iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 */
+  enableBackToTop: {
+    type: Boolean,
+    value: true,
+  },
+  /** 开启 passive 特性，能优化一定的滚动性能 */
+  enablePassive: {
+    type: Boolean,
+    value: false,
+  },
   /** 加载loading样式 */
   externalClasses: {
     type: Array,
   },
   /** 加载中下拉高度，如果值为数字则单位是：'px' */
   loadingBarHeight: {
-    type: String,
-    optionalTypes: [Number],
+    type: null,
     value: 50,
   },
   /** 加载loading样式 */
@@ -25,10 +34,14 @@ const props: TdPullDownRefreshProps = {
     type: Array,
     value: [],
   },
+  /** 距底部/右边多远时，触发 scrolltolower 事件 */
+  lowerThreshold: {
+    type: null,
+    value: 50,
+  },
   /** 最大下拉高度，如果值为数字则单位是：'px' */
   maxBarHeight: {
-    type: String,
-    optionalTypes: [Number],
+    type: null,
     value: 80,
   },
   /** 刷新超时时间 */
@@ -36,6 +49,16 @@ const props: TdPullDownRefreshProps = {
     type: Number,
     value: 3000,
   },
+  /** 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 */
+  scrollIntoView: {
+    type: String,
+    value: '',
+  },
+  /** 距顶部/左边多远时，触发 scrolltoupper 事件 */
+  upperThreshold: {
+    type: null,
+    value: 50,
+  },
   /** 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 */
   value: {
     type: Boolean,
diff --git a/src/pull-down-refresh/pull-down-refresh.ts b/src/pull-down-refresh/pull-down-refresh.ts
index 3504a3c99..3216776b1 100644
--- a/src/pull-down-refresh/pull-down-refresh.ts
+++ b/src/pull-down-refresh/pull-down-refresh.ts
@@ -1,6 +1,7 @@
 import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
+import { unitConvert } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-pull-down-refresh`;
@@ -13,11 +14,9 @@ export default class PullDownRefresh extends SuperComponent {
 
   isPulling = false; // 是否下拉中
 
-  maxBarHeight: number = 0; // 最大下拉高度，单位 rpx
-
-  // 触发刷新的下拉高度，单位rpx
+  // 触发刷新的下拉高度，单位 px
   // 松开时下拉高度大于这个值即会触发刷新，触发刷新后松开，会恢复到这个高度并保持，直到刷新结束
-  loadingBarHeight = 200;
+  loadingBarHeight = 100;
 
   /** 开始刷新 - 刷新成功/失败 最大间隔时间setTimeout句柄 */
   maxRefreshAnimateTimeFlag = 0;
@@ -52,7 +51,7 @@ export default class PullDownRefresh extends SuperComponent {
   lifetimes = {
     attached() {
       const { screenWidth } = wx.getSystemInfoSync();
-      const { maxBarHeight, loadingBarHeight, loadingTexts } = this.properties;
+      const { loadingBarHeight, loadingTexts } = this.properties;
       this.setData({
         loadingTexts:
           Array.isArray(loadingTexts) && loadingTexts.length >= 4
@@ -61,15 +60,22 @@ export default class PullDownRefresh extends SuperComponent {
       });
       this.pixelRatio = 750 / screenWidth;
 
-      if (maxBarHeight) {
-        this.maxBarHeight = this.toRpx(maxBarHeight);
-      }
+      Object.defineProperty(this, 'maxBarHeight', {
+        get() {
+          return unitConvert(this.data.maxBarHeight);
+        },
+      });
+
+      Object.defineProperty(this, 'loadingBarHeight', {
+        get() {
+          return unitConvert(this.data.loadingBarHeight);
+        },
+      });
 
       if (loadingBarHeight) {
         this.setData({
-          computedLoadingBarHeight: this.toRpx(loadingBarHeight),
+          computedLoadingBarHeight: unitConvert(loadingBarHeight),
         });
-        this.loadingBarHeight = this.toRpx(loadingBarHeight);
       }
     },
 
@@ -87,15 +93,6 @@ export default class PullDownRefresh extends SuperComponent {
         this.close();
       }
     },
-    maxBarHeight(val) {
-      this.maxBarHeight = this.toRpx(val);
-    },
-    loadingBarHeight(val) {
-      this.setData({
-        computedLoadingBarHeight: this.toRpx(val),
-      });
-      this.loadingBarHeight = this.toRpx(val);
-    },
   };
 
   methods = {
@@ -135,15 +132,13 @@ export default class PullDownRefresh extends SuperComponent {
 
       const { pageY } = touches[0];
       const offset = pageY - this.startPoint.pageY;
-      const barHeight = this.toRpx(offset);
 
-      if (barHeight > 0) {
-        if (barHeight > this.maxBarHeight) {
+      if (offset > 0) {
+        if (offset > this.maxBarHeight) {
           // 限高
           this.setRefreshBarHeight(this.maxBarHeight);
-          // this.startPoint.pageY = pageY - this.toPx(this.maxBarHeight); // 限高的同时修正起点，避免触摸点上移时无效果
         } else {
-          this.setRefreshBarHeight(barHeight);
+          this.setRefreshBarHeight(offset);
         }
       }
     },
@@ -154,7 +149,7 @@ export default class PullDownRefresh extends SuperComponent {
       if (changedTouches.length !== 1) return;
       const { pageY } = changedTouches[0];
 
-      const barHeight = this.toRpx(pageY - this.startPoint.pageY);
+      const barHeight = pageY - this.startPoint.pageY;
       this.startPoint = null; // 清掉起点，之后将忽略touchMove、touchEnd事件
 
       this.setData({ loosing: true });
@@ -182,15 +177,6 @@ export default class PullDownRefresh extends SuperComponent {
       }
     },
 
-    toRpx(v: number | string): number {
-      if (typeof v === 'number') return v * this.pixelRatio;
-      return parseInt(v, 10);
-    },
-
-    toPx(v: number) {
-      return v / this.pixelRatio;
-    },
-
     setRefreshBarHeight(barHeight: number) {
       const data: Record<string, any> = { barHeight };
       if (barHeight >= this.loadingBarHeight) {
diff --git a/src/pull-down-refresh/pull-down-refresh.wxml b/src/pull-down-refresh/pull-down-refresh.wxml
index a40ada1e8..0c0e4aaa9 100644
--- a/src/pull-down-refresh/pull-down-refresh.wxml
+++ b/src/pull-down-refresh/pull-down-refresh.wxml
@@ -4,23 +4,27 @@
   style="{{_._style([style, customStyle])}}"
   class="{{classPrefix}} class {{prefix}}-class"
   scroll-top="{{scrollTop}}"
+  scroll-y
+  enable-back-to-top="{{enableBackToTop}}"
+  enable-passive="{{enablePassive}}"
+  lower-threshold="{{lowerThreshold}}"
+  upper-threshold="{{upperThreshold}}"
+  scroll-into-view="{{scrollIntoView}}"
+  enhanced
+  scroll-with-animation
+  bounces="{{false}}"
   bind:touchstart="onTouchStart"
   bind:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
   bind:scroll="onScroll"
   bindscrolltoupper="onScrollToTop"
   bindscrolltolower="onScrollToBottom"
-  scroll-y
-  enable-back-to-top
-  enhanced
-  scroll-with-animation
-  bounces="{{false}}"
 >
   <view
     class="{{classPrefix}}__track {{classPrefix + '__track--' + (loosing ? 'loosing' : '')}}"
     style="{{barHeight > 0 ? 'transform: translate3d(0, ' + barHeight + 'rpx, 0);' : ''}}"
   >
-    <view class="{{classPrefix}}__tips" style="height: {{computedLoadingBarHeight}}rpx" aria-live="polite">
+    <view class="{{classPrefix}}__tips" style="height: {{computedLoadingBarHeight}}px" aria-live="polite">
       <t-loading
         wx:if="{{refreshStatus === 2}}"
         delay="{{loadingProps.delay || 0}}"
diff --git a/src/pull-down-refresh/type.ts b/src/pull-down-refresh/type.ts
index 7919eee63..d3885e171 100644
--- a/src/pull-down-refresh/type.ts
+++ b/src/pull-down-refresh/type.ts
@@ -8,12 +8,20 @@ import { LoadingProps } from '../loading/index';
 
 export interface TdPullDownRefreshProps {
   /**
-   * 自定义组件样式
-   * @default ''
+   * iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启
+   * @default true
    */
-  style?: {
-    type: StringConstructor;
-    value?: string;
+  enableBackToTop?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 开启 passive 特性，能优化一定的滚动性能
+   * @default false
+   */
+  enablePassive?: {
+    type: BooleanConstructor;
+    value?: boolean;
   };
   /**
    * 加载loading样式
@@ -27,8 +35,7 @@ export interface TdPullDownRefreshProps {
    * @default 50
    */
   loadingBarHeight?: {
-    type: StringConstructor;
-    optionalTypes: Array<NumberConstructor>;
+    type: null;
     value?: string | number;
   };
   /**
@@ -46,13 +53,20 @@ export interface TdPullDownRefreshProps {
     type: ArrayConstructor;
     value?: string[];
   };
+  /**
+   * 距底部/右边多远时，触发 scrolltolower 事件
+   * @default 50
+   */
+  lowerThreshold?: {
+    type: null;
+    value?: string | number;
+  };
   /**
    * 最大下拉高度，如果值为数字则单位是：'px'
    * @default 80
    */
   maxBarHeight?: {
-    type: StringConstructor;
-    optionalTypes: Array<NumberConstructor>;
+    type: null;
     value?: string | number;
   };
   /**
@@ -63,6 +77,22 @@ export interface TdPullDownRefreshProps {
     type: NumberConstructor;
     value?: number;
   };
+  /**
+   * 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
+   * @default ''
+   */
+  scrollIntoView?: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 距顶部/左边多远时，触发 scrolltoupper 事件
+   * @default 50
+   */
+  upperThreshold?: {
+    type: null;
+    value?: string | number;
+  };
   /**
    * 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态
    * @default false

From 3577c0a67bb039e31f094953a0cc21608d2f6ad1 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Thu, 4 May 2023 17:48:49 +0800
Subject: [PATCH 042/202] feat(loading): support indicator slot

---
 src/loading/README.en-US.md          |  5 ++---
 src/loading/README.md                |  4 ++--
 src/loading/_example/base/index.json |  3 ++-
 src/loading/_example/base/index.wxml |  7 +++++++
 src/loading/loading.wxml             |  1 +
 src/loading/props.ts                 |  2 +-
 src/loading/type.ts                  | 12 ++----------
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/loading/README.en-US.md b/src/loading/README.en-US.md
index 1969d2e71..345bd0b85 100644
--- a/src/loading/README.en-US.md
+++ b/src/loading/README.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Loading Props
 
 name | type | default | description | required
@@ -9,7 +8,7 @@ name | type | default | description | required
 delay | Number | 0 | \- | N
 duration | Number | 800 | \- | N
 external-classes | Array | - | `['t-class', 't-class-text', 't-class-indicator']` | N
-indicator | Boolean | true | \- | N
+indicator | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 inherit-color | Boolean | false | \- | N
 layout | String | horizontal | options：horizontal/vertical | N
 loading | Boolean | true | \- | N
@@ -17,5 +16,5 @@ pause | Boolean | false | \- | N
 progress | Number | - | \- | N
 reverse | Boolean | - | \- | N
 size | String | '40rpx' | \- | N
-text | String / Slot | - | \- | N
+text | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 theme | String | circular | options：circular/spinner/dots | N
diff --git a/src/loading/README.md b/src/loading/README.md
index 9ca1917b9..e1a530f96 100644
--- a/src/loading/README.md
+++ b/src/loading/README.md
@@ -58,7 +58,7 @@ isComponent: true
 delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N
 external-classes | Array | - | 组件类名，分别用于设置加载组件外层元素，加载组件文本，加载组件指示符，加载指示符内侧同心圆等元素类名。`['t-class', 't-class-text', 't-class-indicator']` | N
-indicator | Boolean | true | 是否显示加载指示符 | N
+indicator | Boolean / Slot | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 inherit-color | Boolean | false | 是否继承父元素颜色 | N
 layout | String | horizontal | 对齐方式。可选项：horizontal/vertical | N
 loading | Boolean | true | 是否处于加载状态 | N
@@ -66,5 +66,5 @@ pause | Boolean | false | 是否暂停动画 | N
 progress | Number | - | 加载进度 | N
 reverse | Boolean | - | 加载动画是否反向 | N
 size | String | '40rpx' | 尺寸，示例：40rpx/20px | N
-text | String / Slot | - | 加载提示文案 | N
+text | String / Slot | - | 加载提示文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 theme | String | circular | 加载组件类型。可选项：circular/spinner/dots | N
diff --git a/src/loading/_example/base/index.json b/src/loading/_example/base/index.json
index dc12aafa5..3586e7eca 100644
--- a/src/loading/_example/base/index.json
+++ b/src/loading/_example/base/index.json
@@ -1,6 +1,7 @@
 {
   "components": true,
   "usingComponents": {
-    "t-loading": "tdesign-miniprogram/loading/loading"
+    "t-loading": "tdesign-miniprogram/loading/loading",
+    "t-image": "tdesign-miniprogram/image/image"
   }
 }
diff --git a/src/loading/_example/base/index.wxml b/src/loading/_example/base/index.wxml
index f50b0dbcc..b0162ac94 100644
--- a/src/loading/_example/base/index.wxml
+++ b/src/loading/_example/base/index.wxml
@@ -2,4 +2,11 @@
   <t-loading theme="circular" size="40rpx" class="wrapper" />
   <t-loading theme="spinner" size="40rpx" class="wrapper" />
   <t-loading theme="dots" size="80rpx" class="wrapper" />
+  <t-loading theme="custom" class="wrapper">
+    <t-image
+      slot="indicator"
+      style="width: 100%; height: 100%"
+      src="https://cdc.cdn-go.cn/tdc/latest/images/tdesign.svg"
+    />
+  </t-loading>
 </view>
diff --git a/src/loading/loading.wxml b/src/loading/loading.wxml
index 9d2166153..c50c3a587 100644
--- a/src/loading/loading.wxml
+++ b/src/loading/loading.wxml
@@ -26,6 +26,7 @@
         style="{{duration ? 'animation-duration: ' + duration/1000 + 's; animation-delay:' + duration * 2 / 3000 + 's;' : ''}} animation-play-state: {{pause ? 'paused' : 'running'}};"
       ></view>
     </block>
+    <slot name="indicator" />
   </view>
   <view
     class="{{_.cls(classPrefix + '__text', [layout])}} {{prefix}}-class-text"
diff --git a/src/loading/props.ts b/src/loading/props.ts
index 5f958c304..5b4522931 100644
--- a/src/loading/props.ts
+++ b/src/loading/props.ts
@@ -20,7 +20,7 @@ const props: TdLoadingProps = {
   externalClasses: {
     type: Array,
   },
-  /** 是否显示加载指示符 */
+  /** 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符 */
   indicator: {
     type: Boolean,
     value: true,
diff --git a/src/loading/type.ts b/src/loading/type.ts
index 6b5ba616e..c54c044c6 100644
--- a/src/loading/type.ts
+++ b/src/loading/type.ts
@@ -5,14 +5,6 @@
  * */
 
 export interface TdLoadingProps {
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
    * @default 0
@@ -37,7 +29,7 @@ export interface TdLoadingProps {
     value?: ['t-class', 't-class-text', 't-class-indicator'];
   };
   /**
-   * 是否显示加载指示符
+   * 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
    * @default true
    */
   indicator?: {
@@ -111,6 +103,6 @@ export interface TdLoadingProps {
    */
   theme?: {
     type: StringConstructor;
-    value?: 'circular' | 'spinner' | 'bar' | 'error' | 'dots';
+    value?: 'circular' | 'spinner' | 'dots';
   };
 }

From 482264c616d6caf77b4dcb151c51152337b3ea21 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Thu, 4 May 2023 17:49:23 +0800
Subject: [PATCH 043/202] test: update snapshot

---
 src/loading/__test__/__snapshots__/demo.test.js.snap | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/loading/__test__/__snapshots__/demo.test.js.snap b/src/loading/__test__/__snapshots__/demo.test.js.snap
index 2f176b80b..1354ec6e0 100644
--- a/src/loading/__test__/__snapshots__/demo.test.js.snap
+++ b/src/loading/__test__/__snapshots__/demo.test.js.snap
@@ -20,6 +20,16 @@ exports[`Loading Loading base demo works fine 1`] = `
       size="80rpx"
       theme="dots"
     />
+    <t-loading
+      class="wrapper"
+      theme="custom"
+    >
+      <t-image
+        slot="indicator"
+        src="https://cdc.cdn-go.cn/tdc/latest/images/tdesign.svg"
+        style="width: 100%; height: 100%"
+      />
+    </t-loading>
   </wx-view>
 </base>
 `;

From c7c153d2372f75328a514db7fe26a5a773c4cc4b Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Fri, 5 May 2023 10:41:04 +0800
Subject: [PATCH 044/202] fix(pulldown-refresh): resolve value (#1960)

---
 src/pull-down-refresh/_example/base/index.js |  6 +++
 src/pull-down-refresh/pull-down-refresh.ts   | 55 +++++++++++---------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/pull-down-refresh/_example/base/index.js b/src/pull-down-refresh/_example/base/index.js
index 58191403a..db65059d2 100644
--- a/src/pull-down-refresh/_example/base/index.js
+++ b/src/pull-down-refresh/_example/base/index.js
@@ -9,6 +9,12 @@ Component({
     backTopVisible: false,
   },
 
+  ready() {
+    setTimeout(() => {
+      this.setData({ enable: true });
+    }, 1000);
+  },
+
   methods: {
     onPullDownRefresh() {
       setTimeout(() => {
diff --git a/src/pull-down-refresh/pull-down-refresh.ts b/src/pull-down-refresh/pull-down-refresh.ts
index 3216776b1..e8ba9e44c 100644
--- a/src/pull-down-refresh/pull-down-refresh.ts
+++ b/src/pull-down-refresh/pull-down-refresh.ts
@@ -89,8 +89,14 @@ export default class PullDownRefresh extends SuperComponent {
     value(val) {
       if (!val) {
         clearTimeout(this.maxRefreshAnimateTimeFlag);
-        this.setData({ refreshStatus: 3 });
+        if (this.data.refreshStatus > 0) {
+          this.setData({
+            refreshStatus: 3,
+          });
+        }
         this.close();
+      } else {
+        this.doRefresh();
       }
     },
   };
@@ -134,12 +140,7 @@ export default class PullDownRefresh extends SuperComponent {
       const offset = pageY - this.startPoint.pageY;
 
       if (offset > 0) {
-        if (offset > this.maxBarHeight) {
-          // 限高
-          this.setRefreshBarHeight(this.maxBarHeight);
-        } else {
-          this.setRefreshBarHeight(offset);
-        }
+        this.setRefreshBarHeight(offset);
       }
     },
 
@@ -156,29 +157,35 @@ export default class PullDownRefresh extends SuperComponent {
 
       // 松开时高度超过阈值则触发刷新
       if (barHeight > this.loadingBarHeight) {
-        this.setData({
-          barHeight: this.loadingBarHeight,
-          refreshStatus: 2,
-        });
-
-        this.triggerEvent('change', { value: true });
-        this.triggerEvent('refresh');
-        this.maxRefreshAnimateTimeFlag = setTimeout(() => {
-          this.maxRefreshAnimateTimeFlag = null;
-
-          if (this.data.refreshStatus === 2) {
-            // 超时回调
-            this.triggerEvent('timeout');
-            this.close(); // 超时仍未被回调，则直接结束下拉
-          }
-        }, this.properties.refreshTimeout as any) as any as number;
+        this.doRefresh();
       } else {
         this.close();
       }
     },
 
-    setRefreshBarHeight(barHeight: number) {
+    doRefresh() {
+      this.setData({
+        barHeight: this.loadingBarHeight,
+        refreshStatus: 2,
+      });
+
+      this.triggerEvent('change', { value: true });
+      this.triggerEvent('refresh');
+      this.maxRefreshAnimateTimeFlag = setTimeout(() => {
+        this.maxRefreshAnimateTimeFlag = null;
+
+        if (this.data.refreshStatus === 2) {
+          // 超时回调
+          this.triggerEvent('timeout');
+          this.close(); // 超时仍未被回调，则直接结束下拉
+        }
+      }, this.properties.refreshTimeout as any) as any as number;
+    },
+
+    setRefreshBarHeight(value: number) {
+      const barHeight = Math.min(value, this.maxBarHeight);
       const data: Record<string, any> = { barHeight };
+
       if (barHeight >= this.loadingBarHeight) {
         data.refreshStatus = 1;
       } else {

From ab51f1bb3a5304c94eba3b65fabb5282286dba5f Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Fri, 5 May 2023 19:14:11 +0800
Subject: [PATCH 045/202] feat(datetime-picker): support steps property (#1961)

---
 src/date-time-picker/README.en-US.md          |  4 +--
 src/date-time-picker/README.md                | 16 ++++++---
 .../__test__/__snapshots__/demo.test.js.snap  | 33 +++++++++++++++++
 src/date-time-picker/__test__/demo.test.js    |  2 +-
 .../_example/date-time-picker.json            |  3 +-
 .../_example/date-time-picker.wxml            |  4 +++
 src/date-time-picker/_example/steps/index.js  | 35 +++++++++++++++++++
 .../_example/steps/index.json                 |  6 ++++
 .../_example/steps/index.wxml                 | 13 +++++++
 .../_example/steps/index.wxss                 |  3 ++
 src/date-time-picker/date-time-picker.ts      |  5 +--
 src/date-time-picker/props.ts                 | 10 ++++--
 src/date-time-picker/type.ts                  | 14 ++++++--
 13 files changed, 131 insertions(+), 17 deletions(-)
 create mode 100644 src/date-time-picker/_example/steps/index.js
 create mode 100644 src/date-time-picker/_example/steps/index.json
 create mode 100644 src/date-time-picker/_example/steps/index.wxml
 create mode 100644 src/date-time-picker/_example/steps/index.wxss

diff --git a/src/date-time-picker/README.en-US.md b/src/date-time-picker/README.en-US.md
index 7f31cb243..b0214c83e 100644
--- a/src/date-time-picker/README.en-US.md
+++ b/src/date-time-picker/README.en-US.md
@@ -9,12 +9,12 @@ cancel-btn | String | 取消 | \- | N
 confirm-btn | String | - | \- | N
 end | String / Number | - | \- | N
 external-classes | Array | - | `['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
-footer | Slot | true | `deprecated` | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
-header | Boolean / Slot | true | \- | N
+header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 mode | String / Array | 'date' | Typescript：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 show-week | Boolean | false | \- | N
 start | String / Number | - | \- | N
+steps | Object | - | \- | N
 title | String | - | title of picker | N
 value | String / Number | - | Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 default-value | String / Number | undefined | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md
index f20164232..5074b9042 100644
--- a/src/date-time-picker/README.md
+++ b/src/date-time-picker/README.md
@@ -18,7 +18,7 @@ isComponent: true
 
 ## 代码演示
 
-### 日期选择器
+### 组件类型
 
 #### 年月日选择器
 
@@ -38,6 +38,12 @@ isComponent: true
 
 {{ date-all }}
 
+### 组件用法
+
+#### 调整步数
+
+{{ steps }}
+
 ## API
 ### DateTimePicker Props
 
@@ -47,12 +53,12 @@ cancel-btn | String | 取消 | 取消按钮文字 | N
 confirm-btn | String | - | 确定按钮文字 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
 external-classes | Array | - | 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名。`['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
-footer | Slot | true | 已废弃。底部内容 | N
-format | String | 'YYYY-MM-DD HH:mm:ss' | 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) | N
-header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 | N
-mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒，示例：['null', 'second']或['date', 'minute']。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
+format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
+header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 show-week | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
 start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
+steps | Object | - | 时间间隔步数，示例：`{ minute: 5 }` | N
 title | String | - | 标题 | N
 value | String / Number | - | 选中值。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 default-value | String / Number | undefined | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap
index 1d734f351..80996ced0 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap
@@ -24,6 +24,39 @@ exports[`DateTimePicker DateTimePicker date-all demo works fine 1`] = `
 </date-all>
 `;
 
+exports[`DateTimePicker DateTimePicker steps demo works fine 1`] = `
+<steps>
+  <t-cell
+    arrow="{{true}}"
+    hover="{{true}}"
+    note=""
+    tClass="pannel-item"
+    title="选择时间"
+    bind:tap="showPicker"
+  />
+  <t-date-time-picker
+    format="HH:mm:ss"
+    mode="{{
+      Array [
+        "null",
+        "second",
+      ]
+    }}"
+    steps="{{
+      Object {
+        "minute": 5,
+      }
+    }}"
+    title="选择时间"
+    value="10:00:00"
+    visible="{{false}}"
+    bind:cancel="hidePicker"
+    bind:change="onConfirm"
+    bind:pick="onColumnChange"
+  />
+</steps>
+`;
+
 exports[`DateTimePicker DateTimePicker time demo works fine 1`] = `
 <time>
   <wx-view
diff --git a/src/date-time-picker/__test__/demo.test.js b/src/date-time-picker/__test__/demo.test.js
index 1f62e6071..2c78c963b 100644
--- a/src/date-time-picker/__test__/demo.test.js
+++ b/src/date-time-picker/__test__/demo.test.js
@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['date-all', 'time', 'year-month', 'year-month-date'];
+const mapper = ['date-all', 'steps', 'time', 'year-month', 'year-month-date'];
 
 describe('DateTimePicker', () => {
   mapper.forEach((demoName) => {
diff --git a/src/date-time-picker/_example/date-time-picker.json b/src/date-time-picker/_example/date-time-picker.json
index e9987b8dc..fc53dde04 100644
--- a/src/date-time-picker/_example/date-time-picker.json
+++ b/src/date-time-picker/_example/date-time-picker.json
@@ -4,6 +4,7 @@
     "year-month-date": "./year-month-date",
     "year-month": "./year-month",
     "time": "./time",
-    "date-all": "./date-all"
+    "date-all": "./date-all",
+    "steps": "./steps"
   }
 }
diff --git a/src/date-time-picker/_example/date-time-picker.wxml b/src/date-time-picker/_example/date-time-picker.wxml
index 9cce85cdc..c6f373817 100644
--- a/src/date-time-picker/_example/date-time-picker.wxml
+++ b/src/date-time-picker/_example/date-time-picker.wxml
@@ -11,5 +11,9 @@
   <t-demo desc="年月日时分秒选择器" />
   <date-all />
 
+  <t-demo title="01 组件用法" desc="调整步数">
+    <steps />
+  </t-demo>
+
   <!-- <t-demo desc="选择器" /> -->
 </view>
diff --git a/src/date-time-picker/_example/steps/index.js b/src/date-time-picker/_example/steps/index.js
new file mode 100644
index 000000000..e5fe8495d
--- /dev/null
+++ b/src/date-time-picker/_example/steps/index.js
@@ -0,0 +1,35 @@
+Component({
+  data: {
+    text: '',
+    value: '10:00:00',
+    visible: false,
+  },
+  methods: {
+    showPicker() {
+      this.setData({
+        visible: true,
+      });
+    },
+    hidePicker() {
+      this.setData({
+        visible: false,
+      });
+    },
+    onConfirm(e) {
+      const { value } = e.detail;
+
+      console.log('confim', value);
+
+      this.setData({
+        value,
+        text: value,
+      });
+
+      this.hidePicker();
+    },
+
+    onColumnChange(e) {
+      console.log('pick', e.detail.value);
+    },
+  },
+});
diff --git a/src/date-time-picker/_example/steps/index.json b/src/date-time-picker/_example/steps/index.json
new file mode 100644
index 000000000..4e08decef
--- /dev/null
+++ b/src/date-time-picker/_example/steps/index.json
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
+  }
+}
diff --git a/src/date-time-picker/_example/steps/index.wxml b/src/date-time-picker/_example/steps/index.wxml
new file mode 100644
index 000000000..d5b0daf7b
--- /dev/null
+++ b/src/date-time-picker/_example/steps/index.wxml
@@ -0,0 +1,13 @@
+<t-cell title="选择时间" hover note="{{text || ''}}" arrow bindtap="showPicker" t-class="pannel-item" />
+
+<t-date-time-picker
+  title="选择时间"
+  visible="{{visible}}"
+  value="{{value}}"
+  format="HH:mm:ss"
+  mode="{{['null', 'second']}}"
+  steps="{{ { minute: 5 } }}"
+  bindchange="onConfirm"
+  bindpick="onColumnChange"
+  bindcancel="hidePicker"
+/>
diff --git a/src/date-time-picker/_example/steps/index.wxss b/src/date-time-picker/_example/steps/index.wxss
new file mode 100644
index 000000000..453683895
--- /dev/null
+++ b/src/date-time-picker/_example/steps/index.wxss
@@ -0,0 +1,3 @@
+.pannel-item {
+  margin: 32rpx 0;
+}
diff --git a/src/date-time-picker/date-time-picker.ts b/src/date-time-picker/date-time-picker.ts
index 3a7d6eb29..48a344aad 100644
--- a/src/date-time-picker/date-time-picker.ts
+++ b/src/date-time-picker/date-time-picker.ts
@@ -166,13 +166,14 @@ export default class DateTimePicker extends SuperComponent {
     },
 
     getOptionByType(type) {
-      const { locale } = this.data;
+      const { locale, steps } = this.data;
       const options: ColumnItemValue[] = [];
 
       const minEdge = this.getOptionEdge('min', type);
       const maxEdge = this.getOptionEdge('max', type);
+      const step = steps?.[type] ?? 1;
 
-      for (let i = minEdge; i <= maxEdge; i += 1) {
+      for (let i = minEdge; i <= maxEdge; i += step) {
         const label = type === 'month' ? i + 1 : i;
         options.push({
           value: `${i}`,
diff --git a/src/date-time-picker/props.ts b/src/date-time-picker/props.ts
index f3a206560..bf0cbd3b9 100644
--- a/src/date-time-picker/props.ts
+++ b/src/date-time-picker/props.ts
@@ -24,12 +24,12 @@ const props: TdDateTimePickerProps = {
   externalClasses: {
     type: Array,
   },
-  /** 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) */
+  /** 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,
-    value: '',
+    value: 'YYYY-MM-DD HH:mm:ss',
   },
-  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容 */
+  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 */
   header: {
     type: Boolean,
     value: true,
@@ -48,6 +48,10 @@ const props: TdDateTimePickerProps = {
   start: {
     type: null,
   },
+  /** 时间间隔步数，示例：`{ minute: 5 }` */
+  steps: {
+    type: Object,
+  },
   /** 标题 */
   title: {
     type: String,
diff --git a/src/date-time-picker/type.ts b/src/date-time-picker/type.ts
index 0894de497..48b75d2b6 100644
--- a/src/date-time-picker/type.ts
+++ b/src/date-time-picker/type.ts
@@ -3,6 +3,7 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
+
 export interface TdDateTimePickerProps {
   /**
    * 取消按钮文字
@@ -35,15 +36,15 @@ export interface TdDateTimePickerProps {
     value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
   };
   /**
-   * 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format)
-   * @default ''
+   * 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format)
+   * @default 'YYYY-MM-DD HH:mm:ss'
    */
   format?: {
     type: StringConstructor;
     value?: string;
   };
   /**
-   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容
    * @default true
    */
   header?: {
@@ -73,6 +74,13 @@ export interface TdDateTimePickerProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 时间间隔步数，示例：`{ minute: 5 }`
+   */
+  steps?: {
+    type: ObjectConstructor;
+    value?: object;
+  };
   /**
    * 标题
    * @default ''

From 10fd22b9914615d6ebc09f52d3ed5c91be03f609 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Fri, 5 May 2023 23:31:56 +0800
Subject: [PATCH 046/202] feat(steps): add sequence property (#1962)

---
 src/step-item/props.ts       |  2 +-
 src/step-item/step-item.less |  3 ++-
 src/step-item/step-item.ts   |  7 ++++---
 src/step-item/step-item.wxml |  6 +++---
 src/step-item/type.ts        |  9 +--------
 src/steps/README.en-US.md    | 11 +++++------
 src/steps/README.md          | 11 +++++------
 src/steps/props.ts           |  5 +++++
 src/steps/steps.less         |  9 ++++++++-
 src/steps/steps.ts           |  3 +--
 src/steps/steps.wxml         |  2 +-
 src/steps/type.ts            |  8 ++++----
 12 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/step-item/props.ts b/src/step-item/props.ts
index debf4824c..8b03c8bf5 100644
--- a/src/step-item/props.ts
+++ b/src/step-item/props.ts
@@ -24,7 +24,7 @@ const props: TdStepItemProps = {
     type: String,
     value: 'default',
   },
-  /** 子步骤条，仅支持 layout  = 'vertical' 时 */
+  /** 已废弃。子步骤条，仅支持 layout  = 'vertical' 时 */
   subStepItems: {
     type: Array,
     value: [],
diff --git a/src/step-item/step-item.less b/src/step-item/step-item.less
index 3a1bb6780..2bf45dd86 100644
--- a/src/step-item/step-item.less
+++ b/src/step-item/step-item.less
@@ -200,7 +200,8 @@
       top: calc(@step-item-dot-size / 2);
     }
 
-    &--finish {
+    &--finish,
+    &--reverse&--process {
       background-color: @step-item-finish-line-color;
     }
 
diff --git a/src/step-item/step-item.ts b/src/step-item/step-item.ts
index 7483ff2e7..eac4815b9 100644
--- a/src/step-item/step-item.ts
+++ b/src/step-item/step-item.ts
@@ -26,7 +26,6 @@ export default class StepItem extends SuperComponent {
 
   properties = props;
 
-  // 组件的内部数据
   data = {
     classPrefix: name,
     prefix,
@@ -35,10 +34,11 @@ export default class StepItem extends SuperComponent {
     curStatus: '',
     layout: 'vertical',
     isLastChild: false,
+    sequence: 'positive',
   };
 
   methods = {
-    updateStatus(current, currentStatus, index, theme, layout, steps) {
+    updateStatus({ current, currentStatus, index, theme, layout, items, sequence }) {
       let curStatus = this.data.status;
 
       if (curStatus === 'default') {
@@ -55,7 +55,8 @@ export default class StepItem extends SuperComponent {
         isDot: theme === 'dot',
         layout,
         theme,
-        isLastChild: steps.length - 1 === index,
+        sequence,
+        isLastChild: index === (sequence === 'positive' ? items.length - 1 : 0),
       });
     },
 
diff --git a/src/step-item/step-item.wxml b/src/step-item/step-item.wxml
index 4472edce2..a42716b45 100644
--- a/src/step-item/step-item.wxml
+++ b/src/step-item/step-item.wxml
@@ -13,8 +13,8 @@
   <view class="{{_.cls(classPrefix + '__anchor', [layout])}}" aria-hidden="true">
     <view wx:if="{{isDot}}" class="{{_.cls(classPrefix + '__dot', [curStatus])}}" />
     <view wx:elif="{{icon}}" class="{{_.cls(classPrefix + '__icon', [curStatus])}}">
-      <slot name="icon" />
-      <t-icon name="{{icon}}" size="22" />
+      <slot wx:if="{{icon == 'slot'}}" name="icon" />
+      <t-icon wx:else name="{{icon}}" size="22" />
     </view>
     <view wx:else class="{{_.cls(classPrefix + '__circle', [curStatus])}}">
       <t-icon wx:if="{{curStatus == 'finish'}}" name="check" />
@@ -45,7 +45,7 @@
 
   <view
     wx:if="{{!isLastChild}}"
-    class="{{_.cls(classPrefix + '__line', [curStatus, layout, theme])}}"
+    class="{{_.cls(classPrefix + '__line', [curStatus, layout, theme, sequence])}}"
     aria-hidden="true"
   />
 </view>
diff --git a/src/step-item/type.ts b/src/step-item/type.ts
index a26ec7ef3..17f32d3d3 100644
--- a/src/step-item/type.ts
+++ b/src/step-item/type.ts
@@ -35,17 +35,10 @@ export interface TdStepItemProps {
     type: StringConstructor;
     value?: StepStatus;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 子步骤条，仅支持 layout  = 'vertical' 时
    * @default []
+   * @deprecated
    */
   subStepItems?: {
     type: ArrayConstructor;
diff --git a/src/steps/README.en-US.md b/src/steps/README.en-US.md
index 197f12388..6d396fe5d 100644
--- a/src/steps/README.en-US.md
+++ b/src/steps/README.en-US.md
@@ -12,7 +12,7 @@ external-classes | Array | - | `['t-class']` | N
 layout | String | horizontal | options：horizontal/vertical | N
 readonly | Boolean | false | \- | N
 separator | String | line | options：line/dashed/arrow | N
-style | String | - | \- | N
+sequence | String | positive | options：positive/reverse | N
 theme | String | default | options：default/dot | N
 
 ### Steps Events
@@ -25,10 +25,9 @@ change | `({current: string \| number, previous: string \| number})` | \-
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-content | String / Slot | '' | \- | N
+content | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 external-classes | Array | - | `['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | N
-icon | String / Slot | - | \- | N
+icon | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
-style | String | - | \- | N
-sub-step-items | Array | [] | Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
-title | String / Slot | '' | \- | N
+sub-step-items | Array | [] | `deprecated`。Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
+title | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
diff --git a/src/steps/README.md b/src/steps/README.md
index 9f852b84e..98808cb8f 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -66,7 +66,7 @@ external-classes | Array | - | 组件类名，用于设置组件外层元素元
 layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
 readonly | Boolean | false | 只读状态 | N
 separator | String | line | 步骤条分割符。可选项：line/dashed/arrow | N
-style | String | - | 自定义组件样式 | N
+sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
 theme | String | default | 步骤条风格。可选项：default/dot | N
 
 ### Steps Events
@@ -79,10 +79,9 @@ change | `({current: string \| number, previous: string \| number})` | 当前步
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-content | String / Slot | '' | 步骤描述 | N
+content | String / Slot | '' | 步骤描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | N
-icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 | N
+icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
-style | String | - | 自定义组件样式 | N
-sub-step-items | Array | [] | 废弃。子步骤条，仅支持 layout  = 'vertical' 时 | N
-title | String / Slot | '' | 标题 | N
+sub-step-items | Array | [] | 已废弃。子步骤条，仅支持 layout  = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
+title | String / Slot | '' | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
diff --git a/src/steps/props.ts b/src/steps/props.ts
index 249aa31c5..b24e39b48 100644
--- a/src/steps/props.ts
+++ b/src/steps/props.ts
@@ -39,6 +39,11 @@ const props: TdStepsProps = {
     type: String,
     value: 'line',
   },
+  /** 步骤条顺序 */
+  sequence: {
+    type: String,
+    value: 'positive',
+  },
   /** 步骤条风格 */
   theme: {
     type: String,
diff --git a/src/steps/steps.less b/src/steps/steps.less
index 1a7a996b5..9be619643 100644
--- a/src/steps/steps.less
+++ b/src/steps/steps.less
@@ -18,8 +18,15 @@
   display: flex;
   width: 100%;
 
-  // 垂直
   &--vertical {
     flex-direction: column;
   }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &--vertical&--reverse {
+    flex-direction: column-reverse;
+  }
 }
diff --git a/src/steps/steps.ts b/src/steps/steps.ts
index 29913ee72..063d604b5 100644
--- a/src/steps/steps.ts
+++ b/src/steps/steps.ts
@@ -50,11 +50,10 @@ export default class Steps extends SuperComponent {
 
   methods = {
     updateChildren() {
-      const { current, currentStatus, readonly, theme, layout } = this.data;
       const items = this.$children;
 
       items.forEach((item, index) => {
-        item.updateStatus(current, currentStatus, index, theme, layout, items, readonly);
+        item.updateStatus({ index, items, ...this.data });
       });
     },
     updateLastChid() {
diff --git a/src/steps/steps.wxml b/src/steps/steps.wxml
index b2c24b1d5..5c5c7ebd9 100644
--- a/src/steps/steps.wxml
+++ b/src/steps/steps.wxml
@@ -2,7 +2,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} class {{prefix}}-class"
+  class="{{_.cls(classPrefix, [layout, ['readonly', readonly], sequence])}} class {{prefix}}-class"
 >
   <slot />
 </view>
diff --git a/src/steps/type.ts b/src/steps/type.ts
index b3be1afa6..34ec9a175 100644
--- a/src/steps/type.ts
+++ b/src/steps/type.ts
@@ -59,12 +59,12 @@ export interface TdStepsProps {
     value?: 'line' | 'dashed' | 'arrow';
   };
   /**
-   * 自定义组件样式
-   * @default ''
+   * 步骤条顺序
+   * @default positive
    */
-  style?: {
+  sequence?: {
     type: StringConstructor;
-    value?: string;
+    value?: 'positive' | 'reverse';
   };
   /**
    * 步骤条风格

From 0cfca34546c9731f4e5818deb283db7e3e84731b Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Sat, 6 May 2023 15:25:06 +0800
Subject: [PATCH 047/202] feat(dropdown-menu): add css variable for border
 width (#1967)

---
 src/dropdown-menu/dropdown-menu.less | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/dropdown-menu/dropdown-menu.less b/src/dropdown-menu/dropdown-menu.less
index a1ff5ae6e..69ddbc231 100644
--- a/src/dropdown-menu/dropdown-menu.less
+++ b/src/dropdown-menu/dropdown-menu.less
@@ -6,6 +6,7 @@
 @dropdown-menu-disabled-color: var(--td-dropdown-menu-disabled-colorm, @font-gray-4);
 @dropdown-menu-font-size: var(--td-dropdown-menu-font-sizem, 28rpx);
 @dropdown-menu-icon-size: var(--td-dropdown-menu-icon-sizem, 48rpx);
+@dropdown-menu-border-width: var(--td-dropdown-menu-border-width, 1px);
 
 @dropdownMenu: ~'@{prefix}-dropdown-menu';
 
@@ -16,6 +17,10 @@
   background: @dropdown-menu-bg-color;
   .border(bottom);
 
+  &:after {
+    height: @dropdown-menu-border-width;
+  }
+
   &__item {
     display: flex;
     flex: 1;

From 2c2b6c597741e5e5b22b0096f2ac0b87a4a25d00 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Sat, 6 May 2023 16:48:30 +0800
Subject: [PATCH 048/202] feat(Stepper): allow input to be empty (#1971)

---
 src/stepper/stepper.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/stepper/stepper.ts b/src/stepper/stepper.ts
index 8d368a1a3..0cb809341 100644
--- a/src/stepper/stepper.ts
+++ b/src/stepper/stepper.ts
@@ -101,6 +101,10 @@ export default class Stepper extends SuperComponent {
   }
 
   inputHandle(e) {
+    // 允许输入空值
+    if (e.detail.value === '') {
+      return;
+    }
     const value = this.changeValue(e);
     this.triggerEvent('input', { value });
   }

From 0ffbd27c5948df9b96684fa5f9c9b70673fd4567 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 8 May 2023 10:33:36 +0800
Subject: [PATCH 049/202] fix(calendar): enable scroll into view when use-popup
 is false (#1969)

---
 src/calendar/calendar.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/calendar/calendar.ts b/src/calendar/calendar.ts
index a976f5afa..7e9d0552e 100644
--- a/src/calendar/calendar.ts
+++ b/src/calendar/calendar.ts
@@ -49,6 +49,10 @@ export default class Calendar extends SuperComponent {
         days: this.base.getDays(),
       });
       this.calcMonths();
+
+      if (!this.data.usePopup) {
+        this.scrollIntoView();
+      }
     },
   };
 

From 76d766902b67585a45a8411e78bf0e9acae9580b Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 8 May 2023 15:52:01 +0800
Subject: [PATCH 050/202] chore(image-viewer): update demo (#1968)

* chore(image-viewer): update demo

* chore(image-viewer): update demo

* fix(action-sheet): enable close when click cancel

* chore: recover demo
---
 src/action-sheet/action-sheet.ts              |  4 ++
 .../__test__/__snapshots__/demo.test.js.snap  |  8 +--
 src/image-viewer/_example/base/index.js       | 36 +++----------
 src/image-viewer/_example/base/index.wxml     |  2 +-
 src/image-viewer/_example/delete/index.js     | 53 ++++++++-----------
 src/image-viewer/_example/delete/index.json   |  2 +-
 src/image-viewer/_example/delete/index.wxml   |  6 ++-
 src/image-viewer/_example/image-viewer.wxml   |  2 +-
 src/image-viewer/image-viewer.json            |  3 +-
 9 files changed, 45 insertions(+), 71 deletions(-)

diff --git a/src/action-sheet/action-sheet.ts b/src/action-sheet/action-sheet.ts
index 43ebd5548..c150bb0fc 100644
--- a/src/action-sheet/action-sheet.ts
+++ b/src/action-sheet/action-sheet.ts
@@ -105,6 +105,10 @@ export default class ActionSheet extends SuperComponent {
 
     onCancel() {
       this.triggerEvent('cancel');
+      if (this.autoClose) {
+        this.setData({ visible: false });
+        this.autoClose = false;
+      }
     },
   };
 }
diff --git a/src/image-viewer/__test__/__snapshots__/demo.test.js.snap b/src/image-viewer/__test__/__snapshots__/demo.test.js.snap
index e737bf1af..11e040c9c 100644
--- a/src/image-viewer/__test__/__snapshots__/demo.test.js.snap
+++ b/src/image-viewer/__test__/__snapshots__/demo.test.js.snap
@@ -7,7 +7,7 @@ exports[`ImageViewer ImageViewer base demo works fine 1`] = `
     size="large"
     theme="primary"
     variant="outline"
-    bind:tap="clickHandle"
+    bind:tap="onClick"
   >
     基础图片预览
   </t-button>
@@ -34,12 +34,12 @@ exports[`ImageViewer ImageViewer delete demo works fine 1`] = `
     size="large"
     theme="primary"
     variant="outline"
-    bind:tap="clickHandle"
+    bind:tap="onClick"
   >
     带操作图片预览
   </t-button>
-  <t-toast
-    id="t-toast"
+  <t-action-sheet
+    id="t-action-sheet"
   />
   <t-image-viewer
     closeBtn="{{false}}"
diff --git a/src/image-viewer/_example/base/index.js b/src/image-viewer/_example/base/index.js
index e71b933a6..e301528dc 100644
--- a/src/image-viewer/_example/base/index.js
+++ b/src/image-viewer/_example/base/index.js
@@ -9,7 +9,7 @@ Component({
     images: [],
   },
   methods: {
-    clickHandle() {
+    onClick() {
       this.setData({
         images: [
           'https://tdesign.gtimg.com/miniprogram/images/swiper1.png',
@@ -20,20 +20,14 @@ Component({
       });
     },
     onChange(e) {
-      const {
-        detail: { index },
-      } = e;
-      Toast({
-        context: this,
-        selector: '#t-toast',
-        message: `翻到第${index + 1}个`,
-      });
+      const { index } = e.detail;
+
+      console.log('change', index);
     },
 
     onDelete(e) {
-      const {
-        detail: { index },
-      } = e;
+      const { index } = e.detail;
+
       Toast({
         context: this,
         selector: '#t-toast',
@@ -42,22 +36,8 @@ Component({
     },
 
     onClose(e) {
-      const {
-        detail: { trigger },
-      } = e;
-      if (trigger === 'overlay') {
-        Toast({
-          context: this,
-          selector: '#t-toast',
-          message: '点击overlay关闭',
-        });
-      } else if (trigger === 'button') {
-        Toast({
-          context: this,
-          selector: '#t-toast',
-          message: `点击button关闭`,
-        });
-      }
+      const { trigger } = e.detail;
+      console.log(trigger);
       this.setData({
         visible: false,
       });
diff --git a/src/image-viewer/_example/base/index.wxml b/src/image-viewer/_example/base/index.wxml
index 67c48617b..92ad3cfe8 100644
--- a/src/image-viewer/_example/base/index.wxml
+++ b/src/image-viewer/_example/base/index.wxml
@@ -1,4 +1,4 @@
-<t-button theme="primary" size="large" variant="outline" block bind:tap="clickHandle">基础图片预览</t-button>
+<t-button theme="primary" size="large" variant="outline" block bind:tap="onClick">基础图片预览</t-button>
 <t-toast id="t-toast" />
 <t-image-viewer
   deleteBtn="{{deleteBtn}}"
diff --git a/src/image-viewer/_example/delete/index.js b/src/image-viewer/_example/delete/index.js
index f44e30b80..082a68b02 100644
--- a/src/image-viewer/_example/delete/index.js
+++ b/src/image-viewer/_example/delete/index.js
@@ -1,4 +1,4 @@
-import Toast from 'tdesign-miniprogram/toast/index';
+import ActionSheet from 'tdesign-miniprogram/action-sheet/index';
 
 Component({
   data: {
@@ -9,7 +9,7 @@ Component({
     images: [],
   },
   methods: {
-    clickHandle() {
+    onClick() {
       this.setData({
         images: [
           'https://tdesign.gtimg.com/miniprogram/images/swiper1.png',
@@ -22,44 +22,33 @@ Component({
       });
     },
     onChange(e) {
-      const {
-        detail: { index },
-      } = e;
-      Toast({
-        context: this,
-        selector: '#t-toast',
-        message: `翻到第${index + 1}个`,
-      });
+      const { index } = e.detail;
+
+      console.log(index);
     },
 
     onDelete(e) {
-      const {
-        detail: { index },
-      } = e;
-      Toast({
+      const { index } = e.detail;
+
+      console.log(index);
+
+      ActionSheet.show({
         context: this,
-        selector: '#t-toast',
-        message: `删除第${index + 1}个`,
+        selector: '#t-action-sheet',
+        description: '要删除这张照片吗？',
+        items: [
+          {
+            label: '删除',
+            color: '#d54941',
+          },
+        ],
       });
     },
 
     onClose(e) {
-      const {
-        detail: { trigger },
-      } = e;
-      if (trigger === 'overlay') {
-        Toast({
-          context: this,
-          selector: '#t-toast',
-          message: '点击overlay关闭',
-        });
-      } else if (trigger === 'button') {
-        Toast({
-          context: this,
-          selector: '#t-toast',
-          message: `点击button关闭`,
-        });
-      }
+      const { trigger } = e.detail;
+
+      console.log(trigger);
       this.setData({
         visible: false,
       });
diff --git a/src/image-viewer/_example/delete/index.json b/src/image-viewer/_example/delete/index.json
index 88fcfec02..713984db4 100644
--- a/src/image-viewer/_example/delete/index.json
+++ b/src/image-viewer/_example/delete/index.json
@@ -2,7 +2,7 @@
   "component": true,
   "usingComponents": {
     "t-button": "tdesign-miniprogram/button/button",
-    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
     "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer"
   }
 }
diff --git a/src/image-viewer/_example/delete/index.wxml b/src/image-viewer/_example/delete/index.wxml
index 6f9e821a4..42275ad18 100644
--- a/src/image-viewer/_example/delete/index.wxml
+++ b/src/image-viewer/_example/delete/index.wxml
@@ -1,5 +1,7 @@
-<t-button theme="primary" size="large" variant="outline" block bind:tap="clickHandle">带操作图片预览</t-button>
-<t-toast id="t-toast" />
+<t-button theme="primary" size="large" variant="outline" block bind:tap="onClick">带操作图片预览</t-button>
+
+<t-action-sheet id="t-action-sheet" />
+
 <t-image-viewer
   deleteBtn="{{deleteBtn}}"
   closeBtn="{{closeBtn}}"
diff --git a/src/image-viewer/_example/image-viewer.wxml b/src/image-viewer/_example/image-viewer.wxml
index 9841e24c4..4a39f45cf 100644
--- a/src/image-viewer/_example/image-viewer.wxml
+++ b/src/image-viewer/_example/image-viewer.wxml
@@ -1,7 +1,7 @@
 <view class="demo">
   <view class="demo-title">ImageViewer 图片预览</view>
   <view class="demo-desc">用于图片内容的缩略展示与查看。</view>
-  <t-demo title="01 类型" desc="基础图片预览" padding>
+  <t-demo title="01 组件类型" desc="基础图片预览" padding>
     <base />
   </t-demo>
   <t-demo desc="带操作图片预览" padding>
diff --git a/src/image-viewer/image-viewer.json b/src/image-viewer/image-viewer.json
index 6fb787304..b19ce0604 100644
--- a/src/image-viewer/image-viewer.json
+++ b/src/image-viewer/image-viewer.json
@@ -2,7 +2,6 @@
   "component": true,
   "usingComponents": {
     "t-image": "../image/image",
-    "t-icon": "../icon/icon",
-    "t-swiper": "../swiper/swiper"
+    "t-icon": "../icon/icon"
   }
 }

From d512d01a1a6c3ae5c056efa8363759779e51681d Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 8 May 2023 16:50:26 +0800
Subject: [PATCH 051/202] chore: publish v1.1.5 (#1975)

* chore: publish v1.1.5

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 16 ++++++++++++++++
 package.json |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a73783259..cc8407989 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,22 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.5 `2023-05-08` 
+### 🚀 Features
+- `PulldownRefresh`: 支持透传更多属性至 scroll-view 组件 @LeeJim ([#1959](https://github.com/Tencent/tdesign-miniprogram/pull/1959))
+- `DateTimePicker`: 新增 steps 属性，用于调整时间间隔步数 @LeeJim ([#1961](https://github.com/Tencent/tdesign-miniprogram/pull/1961))
+- `Steps`: 新增 sequence 属性，支持逆序展示 @LeeJim ([#1962](https://github.com/Tencent/tdesign-miniprogram/pull/1962))
+- `DropdownMenu`: 新增 CSS Variable 用于调整边框宽度 @LeeJim ([#1967](https://github.com/Tencent/tdesign-miniprogram/pull/1967))
+### 🐞 Bug Fixes
+- `Tabs`: 修复 track 位置计算错误的问题 @LeeJim ([#1958](https://github.com/Tencent/tdesign-miniprogram/pull/1958))
+- `PulldownRefresh`: 解决 value = true 时无法触发加载状态的问题 @LeeJim ([#1960](https://github.com/Tencent/tdesign-miniprogram/pull/1960))
+- `Steps`: 修复 icon 插槽无法使用的问题 @LeeJim ([#1962](https://github.com/Tencent/tdesign-miniprogram/pull/1962))
+- `Stepper`: 修复无法输入空值的问题 @anlyyao ([#1971](https://github.com/Tencent/tdesign-miniprogram/pull/1971))
+- `Calendar`: 解决 usePopup = false 时，没有自动定位到当前值的问题 @LeeJim ([#1969](https://github.com/Tencent/tdesign-miniprogram/pull/1969))
+- `ActionSheet`: 修复使用命令行方式点击取消按钮无法关闭的问题 @LeeJim ([#1968](https://github.com/Tencent/tdesign-miniprogram/pull/1968))
+### 🚧 Others
+- `Picker`: 完善文档，增加 TS 定义的关联链接。 @LeeJim ([#1956](https://github.com/Tencent/tdesign-miniprogram/pull/1956))
+
 ## 🌈 1.1.4 `2023-05-01` 
 ### 🚀 Features
 - `ImageViewer`: 新增 usingCustomNavigation 属性，处理使用自定义导航栏时被遮挡的问题 @LeeJim ([#1944](https://github.com/Tencent/tdesign-miniprogram/pull/1944))
diff --git a/package.json b/package.json
index 483e8d8b8..f4ff76f7a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 6457944819e8d23e21f6bddbaf14a7ef7d009488 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 10 May 2023 18:15:25 +0800
Subject: [PATCH 052/202] docs(badge): update api

---
 src/badge/README.en-US.md |  6 +++---
 src/badge/README.md       |  6 +++---
 src/badge/props.ts        |  2 +-
 src/badge/type.ts         | 12 ++----------
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/badge/README.en-US.md b/src/badge/README.en-US.md
index f5928050e..f8cf6069b 100644
--- a/src/badge/README.en-US.md
+++ b/src/badge/README.en-US.md
@@ -7,11 +7,11 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 color | String | - | \- | N
 content | String | - | \- | N
-count | String / Number / Slot | 0 | \- | N
+count | String / Number / Slot | 0 | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 dot | Boolean | false | \- | N
 external-classes | Array | - | `['t-class', 't-class-content', 't-class-count']` | N
 max-count | Number | 99 | \- | N
 offset | Array | - | Typescript：`Array<string \| number>` | N
-shape | String | circle | options：circle/round/ribbon/bubble | N
+shape | String | circle | options：circle/square/bubble/ribbon | N
 show-zero | Boolean | false | \- | N
-size | String | medium | options：small/medium | N
+size | String | medium | options：medium/large | N
diff --git a/src/badge/README.md b/src/badge/README.md
index 7d1bf08f7..e6c6d9bac 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -37,11 +37,11 @@ isComponent: true
 -- | -- | -- | -- | --
 color | String | - | 颜色 | N
 content | String | - | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 | N
-count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染 | N
+count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 dot | Boolean | false | 是否为红点 | N
 external-classes | Array | - | 组件类名，分别用于设置外层元素、默认内容、右上角内容等元素类名。`['t-class', 't-class-content', 't-class-count']` | N
 max-count | Number | 99 | 封顶的数字值 | N
 offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
-shape | String | circle | 形状。可选项：circle/round/ribbon/bubble | N
+shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
-size | String | medium | 尺寸。可选项：small/medium | N
+size | String | medium | 尺寸。可选项：medium/large | N
diff --git a/src/badge/props.ts b/src/badge/props.ts
index 795a3b0a5..468adb069 100644
--- a/src/badge/props.ts
+++ b/src/badge/props.ts
@@ -3,8 +3,8 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
-import { TdBadgeProps } from './type';
 
+import { TdBadgeProps } from './type';
 const props: TdBadgeProps = {
   /** 颜色 */
   color: {
diff --git a/src/badge/type.ts b/src/badge/type.ts
index 86589243e..7f7dbeb3a 100644
--- a/src/badge/type.ts
+++ b/src/badge/type.ts
@@ -29,14 +29,6 @@ export interface TdBadgeProps {
     type: null;
     value?: string | number;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 是否为红点
    * @default false
@@ -73,7 +65,7 @@ export interface TdBadgeProps {
    */
   shape?: {
     type: StringConstructor;
-    value?: 'circle' | 'round' | 'ribbon' | 'bubble';
+    value?: 'circle' | 'square' | 'bubble' | 'ribbon';
   };
   /**
    * 当数值为 0 时，是否展示徽标
@@ -89,6 +81,6 @@ export interface TdBadgeProps {
    */
   size?: {
     type: StringConstructor;
-    value?: 'small' | 'medium';
+    value?: 'medium' | 'large';
   };
 }

From 3c15af003bff2f1ed7616dbad8937e5bf334acea Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Thu, 11 May 2023 13:42:26 +0800
Subject: [PATCH 053/202] fix(navbar): Fix invalid fixed attribute of Navbar
 component (#1982)

---
 src/navbar/navbar.wxml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/navbar/navbar.wxml b/src/navbar/navbar.wxml
index 588039a2a..29f597d21 100644
--- a/src/navbar/navbar.wxml
+++ b/src/navbar/navbar.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 <view
-  class="{{_.cls(classPrefix, ['fixed', fixed])}} {{visibleClass}} class {{prefix}}-class"
+  class="{{_.cls(classPrefix, [['fixed', fixed]])}} {{visibleClass}} class {{prefix}}-class"
   style="{{_._style([boxStyle, style, customStyle])}}"
 >
   <view wx:if="{{fixed}}" class="{{classPrefix}}__placeholder" />

From 2d13cc6c6340d74713bbce6d615141247976c3f2 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Thu, 11 May 2023 13:54:02 +0800
Subject: [PATCH 054/202] feat(Icon): update icon from 0.1.2 to 0.1.4 (#1979)

* feat(Icon): update iconform 0.1.2 to 0.1.4

* test: update snapshots

* chore: update _common
---
 src/_common                                   |    2 +-
 .../index.test.js.snap                        |   50 +-
 .../index.test.js.snap                        | 1428 +++++++++--------
 .../index.test.js.snap                        |   80 +-
 .../index.test.js.snap                        |  260 +--
 .../index.test.js.snap                        |   64 +-
 .../__virtualHostSnapshot__/demo.test.js.snap |   33 +
 .../index.test.js.snap                        |  706 ++++----
 .../index.test.js.snap                        |   74 +-
 .../index.test.js.snap                        |   18 +-
 .../index.test.js.snap                        |   16 +-
 .../__test__/__snapshots__/demo.test.js.snap  |  105 ++
 .../__virtualHostSnapshot__/demo.test.js.snap |  105 ++
 src/icon/_example/base/index.js               |  243 +--
 src/icon/_example/data.js                     |    7 +
 src/icon/icon.less                            |  502 +++---
 .../index.test.js.snap                        |  255 ++-
 .../index.test.js.snap                        |  103 +-
 .../index.test.js.snap                        |  332 ++--
 .../__virtualHostSnapshot__/demo.test.js.snap |   10 +
 .../index.test.js.snap                        |  142 +-
 .../index.test.js.snap                        |  210 +--
 .../index.test.js.snap                        |  116 +-
 .../index.test.js.snap                        |   20 +-
 .../index.test.js.snap                        |  236 +--
 .../__virtualHostSnapshot__/demo.test.js.snap |    9 +
 .../index.test.js.snap                        |   78 +-
 .../index.test.js.snap                        |  216 +--
 .../index.test.js.snap                        |  104 +-
 .../__virtualHostSnapshot__/demo.test.js.snap |    1 +
 .../index.test.js.snap                        |   30 +-
 .../__virtualHostSnapshot__/demo.test.js.snap |    9 +-
 .../index.test.js.snap                        |   88 +-
 33 files changed, 3042 insertions(+), 2610 deletions(-)

diff --git a/src/_common b/src/_common
index ed54d4097..550275e1f 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit ed54d409776d7b112b0f8ecbf36b9600abe26cb8
+Subproject commit 550275e1fec44dc1003d3dfde38b45e054860494
diff --git a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5cd6176dc..c292c83f6 100644
--- a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,35 +2,45 @@
 
 exports[`Avatar & Avatar Groups Avatar Props : style && customStyle 1`] = `
 <main>
-  <wx-view
-    class="t-avatar__wrapper class t-class"
-    style="color: red; font-size: 9px;"
+  <main
+    class="avatar"
   >
     <wx-view
-      ariaDescribedby="t_badge_0_description"
-      ariaLabelledby="t_badge_0_label"
-      ariaRole="option"
-      class="t-badge  class t-class"
-      style=""
+      class="t-avatar__wrapper class t-class"
+      style="color: red; font-size: 9px;"
     >
-      <wx-view
-        ariaHidden="true"
-        class="t-badge__content t-class-content"
-        id="t_badge_0_label"
+      <t-badge
+        tClass=""
+        tClassContent=""
+        tClassCount=""
       >
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="头像"
-          ariaRole="img"
-          class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
+          ariaDescribedby="t_badge_0_description"
+          ariaLabelledby="t_badge_0_label"
+          ariaRole="option"
+          class="t-badge  class t-class"
           style=""
         >
           <wx-view
-            class="t-avatar__text t-class-content"
-          />
+            ariaHidden="true"
+            class="t-badge__content t-class-content"
+            id="t_badge_0_label"
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel="头像"
+              ariaRole="img"
+              class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
+              style=""
+            >
+              <wx-view
+                class="t-avatar__text t-class-content"
+              />
+            </wx-view>
+          </wx-view>
         </wx-view>
-      </wx-view>
+      </t-badge>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5e9f6aaf6..7b7a84a67 100644
--- a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,777 +2,809 @@
 
 exports[`calendar :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
-  >
-    <wx-view
-      class="t-popup__content t-class-content"
+  <t-calendar>
+    <t-popup
+      class="class"
+      bind:visible-change="onVisibleChange"
     >
       <wx-view
-        class="t-calendar t-calendar--popup class t-class"
-        style=""
+        ariaModal="{{true}}"
+        ariaRole="dialog"
+        class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+        style="z-index:11500;"
+        bind:transitionend="onTransitionEnd"
       >
         <wx-view
-          class="t-calendar__title"
-          tabindex="0"
+          class="t-popup__content t-class-content"
         >
-          <wx-text>
-            请选择日期
-          </wx-text>
-        </wx-view>
-        <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="关闭"
-          ariaRole="button"
-          class="t-icon class t-class"
-          style="font-size: 24px;"
-          bind:tap="onTap"
-        >
-          <wx-label
-            class="t-icon-close t-icon-base"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          class="t-calendar__days"
-        >
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            日
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            一
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            二
-          </wx-view>
           <wx-view
-            class="t-calendar__days-item"
-          >
-            三
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            四
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            五
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            六
-          </wx-view>
-        </wx-view>
-        <wx-scroll-view
-          class="t-calendar__months"
-          enhanced="{{true}}"
-          scrollIntoView="year_2022_month_9"
-          scrollY="{{true}}"
-          showScrollbar="{{false}}"
-        >
-          <wx-view
-            class="t-calendar__month"
-            id="year_2022_month_9"
-          >
-            2022 年 10 月
-          </wx-view>
-          <wx-view
-            class="t-calendar__dates"
+            class="t-calendar t-calendar--popup class t-class"
+            style=""
           >
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
             <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月1日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 1,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+              class="t-calendar__title"
+              tabindex="0"
+            >
+              <wx-text>
+                请选择日期
+              </wx-text>
+            </wx-view>
+            <t-icon
+              class="t-calendar__close-btn"
+              bind:tap="handleClose"
+            >
+              <wx-view
+                ariaHidden="{{false}}"
+                ariaLabel="关闭"
+                ariaRole="button"
+                class="t-icon class t-class"
+                style="font-size: 24px;"
+                bind:tap="onTap"
+              >
+                <wx-label
+                  class="t-icon-close t-icon-base"
+                />
+              </wx-view>
+            </t-icon>
+            <wx-view
+              ariaHidden="{{true}}"
+              class="t-calendar__days"
+            >
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                日
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                一
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                二
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                三
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                四
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                五
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                六
+              </wx-view>
+            </wx-view>
+            <wx-scroll-view
+              class="t-calendar__months"
+              enhanced="{{true}}"
+              scrollIntoView="year_2022_month_9"
+              scrollY="{{true}}"
+              showScrollbar="{{false}}"
+            >
+              <wx-view
+                class="t-calendar__month"
+                id="year_2022_month_9"
+              >
+                2022 年 10 月
+              </wx-view>
+              <wx-view
+                class="t-calendar__dates"
+              >
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月1日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 1,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             1
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月2日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 2,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月2日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 2,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             2
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月3日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 3,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月3日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 3,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             3
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月4日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 4,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月4日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 4,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             4
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月5日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 5,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月5日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 5,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             5
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月6日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 6,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月6日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 6,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             6
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月7日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 7,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月7日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 7,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             7
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月8日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 8,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月8日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 8,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             8
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月9日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 9,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月9日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 9,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             9
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月10日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 10,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月10日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 10,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             10
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月11日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 11,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月11日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 11,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             11
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月12日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 12,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月12日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 12,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             12
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月13日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 13,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月13日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 13,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             13
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月14日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 14,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月14日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 14,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             14
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月15日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 15,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月15日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 15,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             15
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="已选中, 10月16日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--selected"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 16,
-                  "type": "selected",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="已选中, 10月16日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--selected"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 16,
+                      "type": "selected",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             16
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月17日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 17,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月17日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 17,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             17
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月18日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 18,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月18日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 18,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             18
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月19日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 19,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月19日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 19,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             19
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月20日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 20,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月20日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 20,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             20
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月21日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 21,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月21日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 21,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             21
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月22日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 22,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月22日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 22,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             22
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月23日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 23,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月23日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 23,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             23
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月24日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 24,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月24日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 24,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             24
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月25日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 25,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月25日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 25,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             25
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月26日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 26,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月26日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 26,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             26
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月27日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 27,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月27日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 27,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             27
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月28日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 28,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月28日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 28,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             28
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月29日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 29,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月29日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 29,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             29
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月30日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 30,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月30日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 30,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             30
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月31日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 31,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月31日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 31,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             31
             
+                </wx-view>
+              </wx-view>
+            </wx-scroll-view>
+            <wx-view
+              class="t-calendar__footer"
+            >
+              <t-button
+                class="t-calendar__confirm-btn"
+                data-extra=""
+                data-type=""
+                tClass=""
+                bind:contact="onTplButtonTap"
+                bind:error="onTplButtonTap"
+                bind:getphonenumber="onTplButtonTap"
+                bind:getuserinfo="onTplButtonTap"
+                bind:launchapp="onTplButtonTap"
+                bind:opensetting="onTplButtonTap"
+                bind:tap="onTplButtonTap"
+              >
+                <wx-button
+                  appParameter=""
+                  ariaLabel=""
+                  class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
+                  data-custom="{{null}}"
+                  formType=""
+                  hoverClass="t-button--hover"
+                  hoverStartTime="{{20}}"
+                  hoverStayTime="{{70}}"
+                  hoverStopPropagation="{{false}}"
+                  lang="en"
+                  openType=""
+                  sendMessageImg=""
+                  sendMessagePath=""
+                  sendMessageTitle=""
+                  sessionFrom=""
+                  showMessageCard="{{false}}"
+                  style=""
+                  bind:chooseavatar="chooseavatar"
+                  bind:contact="contact"
+                  bind:error="error"
+                  bind:getphonenumber="getphonenumber"
+                  bind:getuserinfo="getuserinfo"
+                  bind:launchapp="launchapp"
+                  bind:opensetting="opensetting"
+                  catch:tap="handleTap"
+                >
+                  <wx-view
+                    class="t-button__content"
+                  >
+                    
+                    确定
+                  </wx-view>
+                </wx-button>
+              </t-button>
             </wx-view>
           </wx-view>
-        </wx-scroll-view>
-        <wx-view
-          class="t-calendar__footer"
-        >
-          <wx-button
-            appParameter=""
-            ariaLabel=""
-            class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
-            data-custom="{{null}}"
-            formType=""
-            hoverClass="t-button--hover"
-            hoverStartTime="{{20}}"
-            hoverStayTime="{{70}}"
-            hoverStopPropagation="{{false}}"
-            lang="en"
-            openType=""
-            sendMessageImg=""
-            sendMessagePath=""
-            sendMessageTitle=""
-            sessionFrom=""
-            showMessageCard="{{false}}"
-            style=""
-            bind:chooseavatar="chooseavatar"
-            bind:contact="contact"
-            bind:error="error"
-            bind:getphonenumber="getphonenumber"
-            bind:getuserinfo="getuserinfo"
-            bind:launchapp="launchapp"
-            bind:opensetting="opensetting"
-            catch:tap="handleTap"
-          >
-            <wx-view
-              class="t-button__content"
-            >
-              
-              确定
-            </wx-view>
-          </wx-button>
+          <wx-view
+            class="t-popup__close"
+            bind:tap="handleClose"
+          />
         </wx-view>
       </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+      <t-overlay
+        class="test"
+        id="popup-overlay"
+        bind:tap="handleOverlayClick"
+      >
+        <wx-view
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
+          style="z-index:11000;"
+          bind:tap="handleClick"
+          catch:touchmove="noop"
+          bind:transitionend="onTransitionEnd"
+        />
+      </t-overlay>
+    </t-popup>
+  </t-calendar>
 </main>
 `;
diff --git a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
index 9bfb5aec0..049933a34 100644
--- a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,56 +2,66 @@
 
 exports[`cell :base 1`] = `
 <main>
-  <wx-view
-    ariaLabel=""
-    ariaRole=""
-    class="class t-class t-cell  t-cell--middle"
-    hoverClass=""
-    hoverStayTime="70"
-    style=""
-    bind:tap="onClick"
+  <main
+    id="cell"
   >
     <wx-view
-      class="t-cell__left t-class-left"
-    />
-    <wx-view
-      class="t-cell__title"
+      ariaLabel=""
+      ariaRole=""
+      class="class t-class t-cell  t-cell--middle"
+      hoverClass=""
+      hoverStayTime="70"
+      style=""
+      bind:tap="onClick"
     >
       <wx-view
-        class="t-cell__title-text  t-class-title"
+        class="t-cell__left t-class-left"
       />
       <wx-view
-        class="t-cell__description t-class-description"
+        class="t-cell__title"
+      >
+        <wx-view
+          class="t-cell__title-text  t-class-title"
+        />
+        <wx-view
+          class="t-cell__description t-class-description"
+        />
+      </wx-view>
+      <wx-view
+        class="t-cell__note t-class-note"
       />
-    </wx-view>
-    <wx-view
-      class="t-cell__note t-class-note"
-    />
-    <wx-view
-      class="t-cell__right t-class-right"
-    >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-cell__right t-class-right"
       >
-        <wx-label
-          class="t-icon- t-icon-base"
-        />
+        <t-icon
+          tClass="t-cell__right-icon t-class-right-icon"
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon- t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
 
 exports[`cell :with group 1`] = `
 <main>
-  <wx-view
-    class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
-    style=""
-  />
+  <main>
+    <wx-view
+      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
+      style=""
+    />
+  </main>
 </main>
 `;
diff --git a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
index bbad0465c..3c2af13a0 100644
--- a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,151 +1,183 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`collapse :defaultExpandAll 1`] = `
-<wx-view
-  class="class t-class t-collapse t-collapse--default"
-  style=""
+<t-collapse
+  id="expandAll"
 >
   <wx-view
-    class="class t-collapse-panel t-collapse-panel--bottom t-class"
+    class="class t-class t-collapse t-collapse--default"
     style=""
   >
-    <wx-view
-      ariaDisabled="{{false}}"
-      ariaExpanded="{{false}}"
-      ariaRole="button"
-      class="t-collapse-panel__title"
-      bind:tap="onClick"
-    >
+    <t-collapse-panel>
       <wx-view
-        ariaLabel=""
-        ariaRole=""
-        class="class t-class t-cell  t-cell--middle"
-        hoverClass=""
-        hoverStayTime="70"
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
         style=""
-        bind:tap="onClick"
       >
         <wx-view
-          class="t-cell__left t-class-left"
-        />
-        <wx-view
-          class="t-cell__title"
+          ariaDisabled="{{false}}"
+          ariaExpanded="{{false}}"
+          ariaRole="button"
+          class="t-collapse-panel__title"
+          bind:tap="onClick"
         >
-          <wx-view
-            class="t-cell__title-text  t-class-title"
+          <t-cell
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-class-header"
+            tClassHover="class-header-hover"
+            tClassNote="class-note "
+            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
+            tClassTitle="class-title "
           >
-             first 
-          </wx-view>
-          <wx-view
-            class="t-cell__description t-class-description"
-          />
+            <wx-view
+              ariaLabel=""
+              ariaRole=""
+              class="class t-class t-cell  t-cell--middle"
+              hoverClass=""
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="t-cell__left t-class-left"
+              />
+              <wx-view
+                class="t-cell__title"
+              >
+                <wx-view
+                  class="t-cell__title-text  t-class-title"
+                >
+                   first 
+                </wx-view>
+                <wx-view
+                  class="t-cell__description t-class-description"
+                />
+              </wx-view>
+              <wx-view
+                class="t-cell__note t-class-note"
+              />
+              <wx-view
+                class="t-cell__right t-class-right"
+              >
+                <t-icon
+                  tClass="t-cell__right-icon t-class-right-icon"
+                >
+                  <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
+                    class="t-icon class t-class"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-label
+                      class="t-icon-chevron-down t-icon-base"
+                    />
+                  </wx-view>
+                </t-icon>
+              </wx-view>
+            </wx-view>
+          </t-cell>
         </wx-view>
         <wx-view
-          class="t-cell__note t-class-note"
-        />
-        <wx-view
-          class="t-cell__right t-class-right"
+          animation=""
+          ariaHidden="{{true}}"
+          class="t-collapse-panel__wrapper"
         >
           <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
+            class="t-collapse-panel__content t-class-content"
           >
-            <wx-label
-              class="t-icon-chevron-down t-icon-base"
-            />
-          </wx-view>
-        </wx-view>
-      </wx-view>
-    </wx-view>
-    <wx-view
-      animation=""
-      ariaHidden="{{true}}"
-      class="t-collapse-panel__wrapper"
-    >
-      <wx-view
-        class="t-collapse-panel__content t-class-content"
-      >
-        
+            
       
       
-        内容1
+            内容1
+          </wx-view>
+        </wx-view>
       </wx-view>
-    </wx-view>
-  </wx-view>
-  <wx-view
-    class="class t-collapse-panel t-collapse-panel--bottom t-class"
-    style=""
-  >
-    <wx-view
-      ariaDisabled="{{false}}"
-      ariaExpanded="{{true}}"
-      ariaRole="button"
-      class="t-collapse-panel__title"
-      bind:tap="onClick"
-    >
+    </t-collapse-panel>
+    <t-collapse-panel>
       <wx-view
-        ariaLabel=""
-        ariaRole=""
-        class="class t-class t-cell  t-cell--middle"
-        hoverClass=""
-        hoverStayTime="70"
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
         style=""
-        bind:tap="onClick"
       >
         <wx-view
-          class="t-cell__left t-class-left"
-        />
-        <wx-view
-          class="t-cell__title"
+          ariaDisabled="{{false}}"
+          ariaExpanded="{{true}}"
+          ariaRole="button"
+          class="t-collapse-panel__title"
+          bind:tap="onClick"
         >
-          <wx-view
-            class="t-cell__title-text  t-class-title"
+          <t-cell
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
+            tClassHover="class-header-hover"
+            tClassNote="class-note "
+            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
+            tClassTitle="class-title "
           >
-             second 
-          </wx-view>
-          <wx-view
-            class="t-cell__description t-class-description"
-          />
+            <wx-view
+              ariaLabel=""
+              ariaRole=""
+              class="class t-class t-cell  t-cell--middle"
+              hoverClass=""
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="t-cell__left t-class-left"
+              />
+              <wx-view
+                class="t-cell__title"
+              >
+                <wx-view
+                  class="t-cell__title-text  t-class-title"
+                >
+                   second 
+                </wx-view>
+                <wx-view
+                  class="t-cell__description t-class-description"
+                />
+              </wx-view>
+              <wx-view
+                class="t-cell__note t-class-note"
+              />
+              <wx-view
+                class="t-cell__right t-class-right"
+              >
+                <t-icon
+                  tClass="t-cell__right-icon t-class-right-icon"
+                >
+                  <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
+                    class="t-icon class t-class"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-label
+                      class="t-icon-chevron-up t-icon-base"
+                    />
+                  </wx-view>
+                </t-icon>
+              </wx-view>
+            </wx-view>
+          </t-cell>
         </wx-view>
         <wx-view
-          class="t-cell__note t-class-note"
-        />
-        <wx-view
-          class="t-cell__right t-class-right"
+          animation=""
+          ariaHidden=""
+          class="t-collapse-panel__wrapper"
         >
           <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
+            class="t-collapse-panel__content t-class-content"
           >
-            <wx-label
-              class="t-icon-chevron-up t-icon-base"
-            />
-          </wx-view>
-        </wx-view>
-      </wx-view>
-    </wx-view>
-    <wx-view
-      animation=""
-      ariaHidden=""
-      class="t-collapse-panel__wrapper"
-    >
-      <wx-view
-        class="t-collapse-panel__content t-class-content"
-      >
-        
+            
       
       
-        内容2
+            内容2
+          </wx-view>
+        </wx-view>
       </wx-view>
-    </wx-view>
+    </t-collapse-panel>
   </wx-view>
-</wx-view>
+</t-collapse>
 `;
diff --git a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
index c4b88938b..311f3161a 100644
--- a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,48 +2,58 @@
 
 exports[`countdown :autoStart 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 01
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 01
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :base 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 01
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 01
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :base 2`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 00
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 00
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :millisecond 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
+  <t-count-down
+    id="cd"
   >
-    00 : 00 : 00
-  </wx-view>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 00
+    </wx-view>
+  </t-count-down>
 </main>
 `;
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 1d734f351..80996ced0 100644
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -24,6 +24,39 @@ exports[`DateTimePicker DateTimePicker date-all demo works fine 1`] = `
 </date-all>
 `;
 
+exports[`DateTimePicker DateTimePicker steps demo works fine 1`] = `
+<steps>
+  <t-cell
+    arrow="{{true}}"
+    hover="{{true}}"
+    note=""
+    tClass="pannel-item"
+    title="选择时间"
+    bind:tap="showPicker"
+  />
+  <t-date-time-picker
+    format="HH:mm:ss"
+    mode="{{
+      Array [
+        "null",
+        "second",
+      ]
+    }}"
+    steps="{{
+      Object {
+        "minute": 5,
+      }
+    }}"
+    title="选择时间"
+    value="10:00:00"
+    visible="{{false}}"
+    bind:cancel="hidePicker"
+    bind:change="onConfirm"
+    bind:pick="onColumnChange"
+  />
+</steps>
+`;
+
 exports[`DateTimePicker DateTimePicker time demo works fine 1`] = `
 <time>
   <wx-view
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index b980c3e87..ea53b8fb5 100644
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,442 +2,474 @@
 
 exports[`date-time-picker :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
-  >
-    <wx-view
-      class="t-popup__content t-class-content"
+  <t-date-time-picker>
+    <t-picker
+      class="class t-class t-date-time-picker"
+      bind:cancel="onCancel"
+      bind:change="onConfirm"
+      bind:close="onClose"
+      bind:pick="onColumnChange"
+      bind:visible-change="onVisibleChange"
     >
-      <wx-view
-        class="t-picker t-class"
-        slot="content"
-        style=""
+      <t-popup
+        class="class"
+        bind:visible-change="onPopupChange"
       >
         <wx-view
-          class="t-picker__toolbar"
+          ariaModal="{{true}}"
+          ariaRole="dialog"
+          class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+          style="z-index:11500;"
+          bind:transitionend="onTransitionEnd"
         >
           <wx-view
-            class="t-picker__cancel t-class-cancel"
-            bind:tap="onCancel"
-          >
-            取消
-          </wx-view>
-          <wx-view
-            class="t-picker__title t-class-title"
-          >
-            选择日期
-          </wx-view>
-          <wx-view
-            class="t-picker__confirm t-class-confirm"
-            bind:tap="onConfirm"
-          >
-            确定
-          </wx-view>
-        </wx-view>
-        <wx-view
-          class="t-picker__main"
-        >
-          <wx-view
-            class="t-picker-item__group class t-class"
-            style=""
-            bind:touchcancel="onTouchEnd"
-            bind:touchend="onTouchEnd"
-            catch:touchmove="onTouchMove"
-            bind:touchstart="onTouchStart"
+            class="t-popup__content t-class-content"
           >
             <wx-view
-              class="t-picker-item__wrapper"
-              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
+              class="t-picker t-class"
+              slot="content"
+              style=""
             >
               <wx-view
-                class="t-picker-item__item"
-                data-index="{{0}}"
-              >
-                
+                class="t-picker__toolbar"
+              >
+                <wx-view
+                  class="t-picker__cancel t-class-cancel"
+                  bind:tap="onCancel"
+                >
+                  取消
+                </wx-view>
+                <wx-view
+                  class="t-picker__title t-class-title"
+                >
+                  选择日期
+                </wx-view>
+                <wx-view
+                  class="t-picker__confirm t-class-confirm"
+                  bind:tap="onConfirm"
+                >
+                  确定
+                </wx-view>
+              </wx-view>
+              <wx-view
+                class="t-picker__main"
+              >
+                <t-picker-item
+                  class="t-date-time-picker__item"
+                  index="index"
+                >
+                  <wx-view
+                    class="t-picker-item__group class t-class"
+                    style=""
+                    bind:touchcancel="onTouchEnd"
+                    bind:touchend="onTouchEnd"
+                    catch:touchmove="onTouchMove"
+                    bind:touchstart="onTouchStart"
+                  >
+                    <wx-view
+                      class="t-picker-item__wrapper"
+                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
+                    >
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{0}}"
+                      >
+                        
       2000年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{1}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{1}}"
+                      >
+                        
       2001年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{2}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{2}}"
+                      >
+                        
       2002年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{3}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{3}}"
+                      >
+                        
       2003年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{4}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{4}}"
+                      >
+                        
       2004年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{5}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{5}}"
+                      >
+                        
       2005年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{6}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{6}}"
+                      >
+                        
       2006年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{7}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{7}}"
+                      >
+                        
       2007年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{8}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{8}}"
+                      >
+                        
       2008年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{9}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{9}}"
+                      >
+                        
       2009年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{10}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{10}}"
+                      >
+                        
       2010年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{11}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{11}}"
+                      >
+                        
       2011年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{12}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{12}}"
+                      >
+                        
       2012年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{13}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{13}}"
+                      >
+                        
       2013年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{14}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{14}}"
+                      >
+                        
       2014年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{15}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{15}}"
+                      >
+                        
       2015年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{16}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{16}}"
+                      >
+                        
       2016年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{17}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{17}}"
+                      >
+                        
       2017年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{18}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{18}}"
+                      >
+                        
       2018年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{19}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{19}}"
+                      >
+                        
       2019年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{20}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{20}}"
+                      >
+                        
       2020年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item t-picker-item__item--active"
-                data-index="{{21}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item t-picker-item__item--active"
+                        data-index="{{21}}"
+                      >
+                        
       2021年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{22}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{22}}"
+                      >
+                        
       2022年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{23}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{23}}"
+                      >
+                        
       2023年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{24}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{24}}"
+                      >
+                        
       2024年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{25}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{25}}"
+                      >
+                        
       2025年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{26}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{26}}"
+                      >
+                        
       2026年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{27}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{27}}"
+                      >
+                        
       2027年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{28}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{28}}"
+                      >
+                        
       2028年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{29}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{29}}"
+                      >
+                        
       2029年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{30}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{30}}"
+                      >
+                        
       2030年
     
-              </wx-view>
-            </wx-view>
-          </wx-view>
-          <wx-view
-            class="t-picker-item__group class t-class"
-            style=""
-            bind:touchcancel="onTouchEnd"
-            bind:touchend="onTouchEnd"
-            catch:touchmove="onTouchMove"
-            bind:touchstart="onTouchStart"
-          >
-            <wx-view
-              class="t-picker-item__wrapper"
-              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
-            >
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{0}}"
-              >
-                
+                      </wx-view>
+                    </wx-view>
+                  </wx-view>
+                </t-picker-item>
+                <t-picker-item
+                  class="t-date-time-picker__item"
+                  index="index"
+                >
+                  <wx-view
+                    class="t-picker-item__group class t-class"
+                    style=""
+                    bind:touchcancel="onTouchEnd"
+                    bind:touchend="onTouchEnd"
+                    catch:touchmove="onTouchMove"
+                    bind:touchstart="onTouchStart"
+                  >
+                    <wx-view
+                      class="t-picker-item__wrapper"
+                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
+                    >
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{0}}"
+                      >
+                        
       1月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{1}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{1}}"
+                      >
+                        
       2月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{2}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{2}}"
+                      >
+                        
       3月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{3}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{3}}"
+                      >
+                        
       4月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{4}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{4}}"
+                      >
+                        
       5月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{5}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{5}}"
+                      >
+                        
       6月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{6}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{6}}"
+                      >
+                        
       7月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{7}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{7}}"
+                      >
+                        
       8月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item t-picker-item__item--active"
-                data-index="{{8}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item t-picker-item__item--active"
+                        data-index="{{8}}"
+                      >
+                        
       9月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{9}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{9}}"
+                      >
+                        
       10月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{10}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{10}}"
+                      >
+                        
       11月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{11}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{11}}"
+                      >
+                        
       12月
     
+                      </wx-view>
+                    </wx-view>
+                  </wx-view>
+                </t-picker-item>
+                <wx-view
+                  class="t-picker__mask t-picker__mask--top"
+                />
+                <wx-view
+                  class="t-picker__mask t-picker__mask--bottom"
+                />
+                <wx-view
+                  class="t-picker__indicator"
+                />
               </wx-view>
             </wx-view>
+            <wx-view
+              class="t-popup__close"
+              bind:tap="handleClose"
+            />
           </wx-view>
+        </wx-view>
+        <t-overlay
+          class="test"
+          id="popup-overlay"
+          bind:tap="handleOverlayClick"
+        >
           <wx-view
-            class="t-picker__mask t-picker__mask--top"
-          />
-          <wx-view
-            class="t-picker__mask t-picker__mask--bottom"
-          />
-          <wx-view
-            class="t-picker__indicator"
+            ariaLabel="关闭"
+            ariaRole="button"
+            class="t-overlay t-fade-enter t-fade-enter-active class"
+            style="z-index:11000;"
+            bind:tap="handleClick"
+            catch:touchmove="noop"
+            bind:transitionend="onTransitionEnd"
           />
-        </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+        </t-overlay>
+      </t-popup>
+    </t-picker>
+  </t-date-time-picker>
 </main>
 `;
diff --git a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
index 0ffdddadb..45a54cb24 100644
--- a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,41 +2,57 @@
 
 exports[`dialog :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
+  <t-dialog
+    id="dialog"
   >
-    <wx-view
-      class="t-popup__content t-class-content"
+    <t-popup
+      class="class"
+      tClass="t-dialog__wrapper"
+      bind:visible-change="overlayClick"
     >
       <wx-view
-        class="t-dialog t-class"
-        slot="content"
+        ariaModal="{{true}}"
+        ariaRole="dialog"
+        class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
+        style="z-index:11500;"
+        bind:transitionend="onTransitionEnd"
       >
         <wx-view
-          class="t-dialog__content t-class-content"
-        />
+          class="t-popup__content t-class-content"
+        >
+          <wx-view
+            class="t-dialog t-class"
+            slot="content"
+          >
+            <wx-view
+              class="t-dialog__content t-class-content"
+            />
+            <wx-view
+              class="t-dialog__footer t-dialog__footer--full"
+            />
+          </wx-view>
+          <wx-view
+            class="t-popup__close"
+            bind:tap="handleClose"
+          />
+        </wx-view>
+      </wx-view>
+      <t-overlay
+        class="test"
+        id="popup-overlay"
+        bind:tap="handleOverlayClick"
+      >
         <wx-view
-          class="t-dialog__footer t-dialog__footer--full"
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
+          style="z-index:11000;"
+          bind:tap="handleClick"
+          catch:touchmove="noop"
+          bind:transitionend="onTransitionEnd"
         />
-      </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+      </t-overlay>
+    </t-popup>
+  </t-dialog>
 </main>
 `;
diff --git a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
index 4fd1b24d2..473ce46af 100644
--- a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,17 +2,21 @@
 
 exports[`Divider :base 1`] = `
 <main>
-  <wx-view
-    class="class t-class "
+  <t-divider
+    class="divider"
   >
     <wx-view
-      class="t-divider t-divider--horizontal t-divider--center  "
-      style=""
+      class="class t-class "
     >
       <wx-view
-        class="t-class-content t-divider__content"
-      />
+        class="t-divider t-divider--horizontal t-divider--center  "
+        style=""
+      >
+        <wx-view
+          class="t-class-content t-divider__content"
+        />
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </t-divider>
 </main>
 `;
diff --git a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
index 663b4673d..a75d29e0d 100644
--- a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,15 +2,17 @@
 
 exports[`Footer :base 1`] = `
 <main>
-  <wx-view
-    class="t-footer class t-class"
-    style=""
-  >
+  <main>
     <wx-view
-      class="t-footer__text"
+      class="t-footer class t-class"
+      style=""
     >
-      
+      <wx-view
+        class="t-footer__text"
+      >
+        
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
diff --git a/src/icon/__test__/__snapshots__/demo.test.js.snap b/src/icon/__test__/__snapshots__/demo.test.js.snap
index 8dade2ad2..1a2e68e40 100644
--- a/src/icon/__test__/__snapshots__/demo.test.js.snap
+++ b/src/icon/__test__/__snapshots__/demo.test.js.snap
@@ -80,6 +80,36 @@ exports[`Icon Icon base demo works fine 1`] = `
         arrow-down-rectangle
       </wx-view>
     </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down-triangle-filled"
+        name="arrow-down-triangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down-triangle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down-triangle"
+        name="arrow-down-triangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down-triangle
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
@@ -125,6 +155,36 @@ exports[`Icon Icon base demo works fine 1`] = `
         arrow-right
       </wx-view>
     </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-triangle-filled"
+        name="arrow-up-triangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-triangle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-triangle"
+        name="arrow-up-triangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-triangle
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
@@ -2285,6 +2345,21 @@ exports[`Icon Icon base demo works fine 1`] = `
         minus-circle
       </wx-view>
     </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-rectangle-filled"
+        name="minus-rectangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-rectangle-filled
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
@@ -3245,6 +3320,36 @@ exports[`Icon Icon base demo works fine 1`] = `
         tools
       </wx-view>
     </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="translate-1"
+        name="translate-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        translate-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="translate"
+        name="translate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        translate
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
diff --git a/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 8dade2ad2..1a2e68e40 100644
--- a/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -80,6 +80,36 @@ exports[`Icon Icon base demo works fine 1`] = `
         arrow-down-rectangle
       </wx-view>
     </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down-triangle-filled"
+        name="arrow-down-triangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down-triangle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down-triangle"
+        name="arrow-down-triangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down-triangle
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
@@ -125,6 +155,36 @@ exports[`Icon Icon base demo works fine 1`] = `
         arrow-right
       </wx-view>
     </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-triangle-filled"
+        name="arrow-up-triangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-triangle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-triangle"
+        name="arrow-up-triangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-triangle
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
@@ -2285,6 +2345,21 @@ exports[`Icon Icon base demo works fine 1`] = `
         minus-circle
       </wx-view>
     </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-rectangle-filled"
+        name="minus-rectangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-rectangle-filled
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
@@ -3245,6 +3320,36 @@ exports[`Icon Icon base demo works fine 1`] = `
         tools
       </wx-view>
     </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="translate-1"
+        name="translate-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        translate-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="translate"
+        name="translate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        translate
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
diff --git a/src/icon/_example/base/index.js b/src/icon/_example/base/index.js
index 5317cf387..acb8f971f 100644
--- a/src/icon/_example/base/index.js
+++ b/src/icon/_example/base/index.js
@@ -1,249 +1,12 @@
+import icons from '../data';
+
 Component({
   data: {
-    icons: [
-      'add-circle',
-      'add-rectangle',
-      'add',
-      'app',
-      'arrow-down-rectangle',
-      'arrow-down',
-      'arrow-left',
-      'arrow-right',
-      'arrow-up',
-      'attach',
-      'backtop-rectangle',
-      'backtop',
-      'backward',
-      'barcode',
-      'books',
-      'browse-off',
-      'browse',
-      'bulletpoint',
-      'calendar',
-      'call',
-      'caret-down-small',
-      'caret-down',
-      'caret-left-small',
-      'caret-left',
-      'caret-right-small',
-      'caret-right',
-      'caret-up-small',
-      'caret-up',
-      'cart',
-      'chart-bar',
-      'chart-bubble',
-      'chart-pie',
-      'chart',
-      'chat',
-      'check-circle-filled',
-      'check-circle',
-      'check-rectangle-filled',
-      'check-rectangle',
-      'check',
-      'chevron-down-circle',
-      'chevron-down-rectangle',
-      'chevron-down',
-      'chevron-left-circle',
-      'chevron-left-double',
-      'chevron-left-rectangle',
-      'chevron-left',
-      'chevron-right-circle',
-      'chevron-right-double',
-      'chevron-right-rectangle',
-      'chevron-right',
-      'chevron-up-circle',
-      'chevron-up-rectangle',
-      'chevron-up',
-      'circle',
-      'clear',
-      'close-circle-filled',
-      'close-circle',
-      'close-rectangle',
-      'close',
-      'cloud-download',
-      'cloud-upload',
-      'cloud',
-      'code',
-      'control-platform',
-      'creditcard',
-      'dashboard',
-      'delete',
-      'desktop',
-      'discount-filled',
-      'discount',
-      'download',
-      'edit-1',
-      'edit',
-      'ellipsis',
-      'enter',
-      'error-circle-filled',
-      'error-circle',
-      'error',
-      'file-add',
-      'file-copy',
-      'file-excel',
-      'file-icon',
-      'file-image',
-      'file-paste',
-      'file-pdf',
-      'file-powerpoint',
-      'file-unknown',
-      'file-word',
-      'file',
-      'filter-clear',
-      'filter',
-      'flag',
-      'folder-add',
-      'folder-open',
-      'folder',
-      'fork',
-      'format-horizontal-align-bottom',
-      'format-horizontal-align-center',
-      'format-horizontal-align-top',
-      'format-vertical-align-center',
-      'format-vertical-align-left',
-      'format-vertical-align-right',
-      'forward',
-      'fullscreen-exit',
-      'fullscreen',
-      'gender-female',
-      'gender-male',
-      'gift',
-      'heart-filled',
-      'heart',
-      'help-circle-filled',
-      'help-circle',
-      'help',
-      'history',
-      'home',
-      'hourglass',
-      'image-error',
-      'image',
-      'info-circle-filled',
-      'info-circle',
-      'internet',
-      'jump',
-      'laptop',
-      'layers',
-      'link-unlink',
-      'link',
-      'loading',
-      'location',
-      'lock-off',
-      'lock-on',
-      'login',
-      'logo-android',
-      'logo-apple-filled',
-      'logo-apple',
-      'logo-chrome-filled',
-      'logo-chrome',
-      'logo-codepen',
-      'logo-github-filled',
-      'logo-github',
-      'logo-ie-filled',
-      'logo-ie',
-      'logo-qq',
-      'logo-wechat',
-      'logo-wecom',
-      'logo-windows-filled',
-      'logo-windows',
-      'logout',
-      'mail',
-      'menu-fold',
-      'menu-unfold',
-      'minus-circle-filled',
-      'minus-circle',
-      'minus-rectangle',
-      'mirror',
-      'mobile-vibrate',
-      'mobile',
-      'money-circle',
-      'more',
-      'move',
-      'next',
-      'notification-filled',
-      'notification',
-      'order-adjustment-column',
-      'order-ascending',
-      'order-descending',
-      'page-first',
-      'page-last',
-      'pause-circle-filled',
-      'photo',
-      'pin-filled',
-      'pin',
-      'play-circle-filled',
-      'play-circle-stroke',
-      'play-circle',
-      'play',
-      'poweroff',
-      'precise-monitor',
-      'previous',
-      'print',
-      'qrcode',
-      'queue',
-      'rectangle',
-      'refresh',
-      'relativity',
-      'remove',
-      'rollback',
-      'rollfront',
-      'root-list',
-      'rotation',
-      'round',
-      'save',
-      'scan',
-      'search',
-      'secured',
-      'server',
-      'service',
-      'setting',
-      'share',
-      'shop',
-      'slash',
-      'sound',
-      'star-filled',
-      'star',
-      'stop-circle-1',
-      'stop-circle-filled',
-      'stop-circle',
-      'stop',
-      'swap-left',
-      'swap-right',
-      'swap',
-      'thumb-down',
-      'thumb-up',
-      'time-filled',
-      'time',
-      'tips',
-      'tools',
-      'unfold-less',
-      'unfold-more',
-      'upload',
-      'usb',
-      'user-add',
-      'user-avatar',
-      'user-circle',
-      'user-clear',
-      'user-talk',
-      'user',
-      'usergroup-add',
-      'usergroup-clear',
-      'usergroup',
-      'video',
-      'view-column',
-      'view-list',
-      'view-module',
-      'wallet',
-      'wifi',
-      'zoom-in',
-      'zoom-out',
-    ],
+    icons,
   },
 
   methods: {
     onIconTap(event) {
-      console.log();
       const { name, type } = event.currentTarget.dataset;
       if (type === 'prefix') {
         return;
diff --git a/src/icon/_example/data.js b/src/icon/_example/data.js
index c8de41a47..26b6cdff6 100644
--- a/src/icon/_example/data.js
+++ b/src/icon/_example/data.js
@@ -4,9 +4,13 @@ const icons = [
   'add',
   'app',
   'arrow-down-rectangle',
+  'arrow-down-triangle-filled',
+  'arrow-down-triangle',
   'arrow-down',
   'arrow-left',
   'arrow-right',
+  'arrow-up-triangle-filled',
+  'arrow-up-triangle',
   'arrow-up',
   'attach',
   'backtop-rectangle',
@@ -151,6 +155,7 @@ const icons = [
   'menu-unfold',
   'minus-circle-filled',
   'minus-circle',
+  'minus-rectangle-filled',
   'minus-rectangle',
   'mirror',
   'mobile-vibrate',
@@ -215,6 +220,8 @@ const icons = [
   'time',
   'tips',
   'tools',
+  'translate-1',
+  'translate',
   'unfold-less',
   'unfold-more',
   'upload',
diff --git a/src/icon/icon.less b/src/icon/icon.less
index 4193557e5..309131258 100644
--- a/src/icon/icon.less
+++ b/src/icon/icon.less
@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: @prefix;
-  src: url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.eot'),
-    url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.eot?#iefix') format('ded-opentype'),
-    url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.woff') format('woff'),
-    url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.ttf') format('truetype'),
-    url('https://tdesign.gtimg.com/icon/0.1.2/fonts/t.svg') format('svg'); /* iOS 4.1- */
+  src: url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.eot'),
+    url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.eot?#iefix') format('ded-opentype'),
+    url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.woff') format('woff'),
+    url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.ttf') format('truetype'),
+    url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.svg') format('svg'); /* iOS 4.1- */
   font-weight: normal;
   font-style: normal;
 }
@@ -61,930 +61,958 @@
   content: '\E005';
 }
 
-.@{prefix}-icon-arrow-down:before {
+.@{prefix}-icon-arrow-down-triangle-filled:before {
   content: '\E006';
 }
 
-.@{prefix}-icon-arrow-left:before {
+.@{prefix}-icon-arrow-down-triangle:before {
   content: '\E007';
 }
 
-.@{prefix}-icon-arrow-right:before {
+.@{prefix}-icon-arrow-down:before {
   content: '\E008';
 }
 
-.@{prefix}-icon-arrow-up:before {
+.@{prefix}-icon-arrow-left:before {
   content: '\E009';
 }
 
-.@{prefix}-icon-attach:before {
+.@{prefix}-icon-arrow-right:before {
   content: '\E00A';
 }
 
-.@{prefix}-icon-backtop-rectangle:before {
+.@{prefix}-icon-arrow-up-triangle-filled:before {
   content: '\E00B';
 }
 
-.@{prefix}-icon-backtop:before {
+.@{prefix}-icon-arrow-up-triangle:before {
   content: '\E00C';
 }
 
-.@{prefix}-icon-backward:before {
+.@{prefix}-icon-arrow-up:before {
   content: '\E00D';
 }
 
-.@{prefix}-icon-barcode:before {
+.@{prefix}-icon-attach:before {
   content: '\E00E';
 }
 
-.@{prefix}-icon-books:before {
+.@{prefix}-icon-backtop-rectangle:before {
   content: '\E00F';
 }
 
-.@{prefix}-icon-browse-off:before {
+.@{prefix}-icon-backtop:before {
   content: '\E010';
 }
 
-.@{prefix}-icon-browse:before {
+.@{prefix}-icon-backward:before {
   content: '\E011';
 }
 
-.@{prefix}-icon-bulletpoint:before {
+.@{prefix}-icon-barcode:before {
   content: '\E012';
 }
 
-.@{prefix}-icon-calendar:before {
+.@{prefix}-icon-books:before {
   content: '\E013';
 }
 
-.@{prefix}-icon-call:before {
+.@{prefix}-icon-browse-off:before {
   content: '\E014';
 }
 
-.@{prefix}-icon-caret-down-small:before {
+.@{prefix}-icon-browse:before {
   content: '\E015';
 }
 
-.@{prefix}-icon-caret-down:before {
+.@{prefix}-icon-bulletpoint:before {
   content: '\E016';
 }
 
-.@{prefix}-icon-caret-left-small:before {
+.@{prefix}-icon-calendar:before {
   content: '\E017';
 }
 
-.@{prefix}-icon-caret-left:before {
+.@{prefix}-icon-call:before {
   content: '\E018';
 }
 
-.@{prefix}-icon-caret-right-small:before {
+.@{prefix}-icon-caret-down-small:before {
   content: '\E019';
 }
 
-.@{prefix}-icon-caret-right:before {
+.@{prefix}-icon-caret-down:before {
   content: '\E01A';
 }
 
-.@{prefix}-icon-caret-up-small:before {
+.@{prefix}-icon-caret-left-small:before {
   content: '\E01B';
 }
 
-.@{prefix}-icon-caret-up:before {
+.@{prefix}-icon-caret-left:before {
   content: '\E01C';
 }
 
-.@{prefix}-icon-cart:before {
+.@{prefix}-icon-caret-right-small:before {
   content: '\E01D';
 }
 
-.@{prefix}-icon-chart-bar:before {
+.@{prefix}-icon-caret-right:before {
   content: '\E01E';
 }
 
-.@{prefix}-icon-chart-bubble:before {
+.@{prefix}-icon-caret-up-small:before {
   content: '\E01F';
 }
 
-.@{prefix}-icon-chart-pie:before {
+.@{prefix}-icon-caret-up:before {
   content: '\E020';
 }
 
-.@{prefix}-icon-chart:before {
+.@{prefix}-icon-cart:before {
   content: '\E021';
 }
 
-.@{prefix}-icon-chat:before {
+.@{prefix}-icon-chart-bar:before {
   content: '\E022';
 }
 
-.@{prefix}-icon-check-circle-filled:before {
+.@{prefix}-icon-chart-bubble:before {
   content: '\E023';
 }
 
-.@{prefix}-icon-check-circle:before {
+.@{prefix}-icon-chart-pie:before {
   content: '\E024';
 }
 
-.@{prefix}-icon-check-rectangle-filled:before {
+.@{prefix}-icon-chart:before {
   content: '\E025';
 }
 
-.@{prefix}-icon-check-rectangle:before {
+.@{prefix}-icon-chat:before {
   content: '\E026';
 }
 
-.@{prefix}-icon-check:before {
+.@{prefix}-icon-check-circle-filled:before {
   content: '\E027';
 }
 
-.@{prefix}-icon-chevron-down-circle:before {
+.@{prefix}-icon-check-circle:before {
   content: '\E028';
 }
 
-.@{prefix}-icon-chevron-down-rectangle:before {
+.@{prefix}-icon-check-rectangle-filled:before {
   content: '\E029';
 }
 
-.@{prefix}-icon-chevron-down:before {
+.@{prefix}-icon-check-rectangle:before {
   content: '\E02A';
 }
 
-.@{prefix}-icon-chevron-left-circle:before {
+.@{prefix}-icon-check:before {
   content: '\E02B';
 }
 
-.@{prefix}-icon-chevron-left-double:before {
+.@{prefix}-icon-chevron-down-circle:before {
   content: '\E02C';
 }
 
-.@{prefix}-icon-chevron-left-rectangle:before {
+.@{prefix}-icon-chevron-down-rectangle:before {
   content: '\E02D';
 }
 
-.@{prefix}-icon-chevron-left:before {
+.@{prefix}-icon-chevron-down:before {
   content: '\E02E';
 }
 
-.@{prefix}-icon-chevron-right-circle:before {
+.@{prefix}-icon-chevron-left-circle:before {
   content: '\E02F';
 }
 
-.@{prefix}-icon-chevron-right-double:before {
+.@{prefix}-icon-chevron-left-double:before {
   content: '\E030';
 }
 
-.@{prefix}-icon-chevron-right-rectangle:before {
+.@{prefix}-icon-chevron-left-rectangle:before {
   content: '\E031';
 }
 
-.@{prefix}-icon-chevron-right:before {
+.@{prefix}-icon-chevron-left:before {
   content: '\E032';
 }
 
-.@{prefix}-icon-chevron-up-circle:before {
+.@{prefix}-icon-chevron-right-circle:before {
   content: '\E033';
 }
 
-.@{prefix}-icon-chevron-up-rectangle:before {
+.@{prefix}-icon-chevron-right-double:before {
   content: '\E034';
 }
 
-.@{prefix}-icon-chevron-up:before {
+.@{prefix}-icon-chevron-right-rectangle:before {
   content: '\E035';
 }
 
-.@{prefix}-icon-circle:before {
+.@{prefix}-icon-chevron-right:before {
   content: '\E036';
 }
 
-.@{prefix}-icon-clear:before {
+.@{prefix}-icon-chevron-up-circle:before {
   content: '\E037';
 }
 
-.@{prefix}-icon-close-circle-filled:before {
+.@{prefix}-icon-chevron-up-rectangle:before {
   content: '\E038';
 }
 
-.@{prefix}-icon-close-circle:before {
+.@{prefix}-icon-chevron-up:before {
   content: '\E039';
 }
 
-.@{prefix}-icon-close-rectangle:before {
+.@{prefix}-icon-circle:before {
   content: '\E03A';
 }
 
-.@{prefix}-icon-close:before {
+.@{prefix}-icon-clear:before {
   content: '\E03B';
 }
 
-.@{prefix}-icon-cloud-download:before {
+.@{prefix}-icon-close-circle-filled:before {
   content: '\E03C';
 }
 
-.@{prefix}-icon-cloud-upload:before {
+.@{prefix}-icon-close-circle:before {
   content: '\E03D';
 }
 
-.@{prefix}-icon-cloud:before {
+.@{prefix}-icon-close-rectangle:before {
   content: '\E03E';
 }
 
-.@{prefix}-icon-code:before {
+.@{prefix}-icon-close:before {
   content: '\E03F';
 }
 
-.@{prefix}-icon-control-platform:before {
+.@{prefix}-icon-cloud-download:before {
   content: '\E040';
 }
 
-.@{prefix}-icon-creditcard:before {
+.@{prefix}-icon-cloud-upload:before {
   content: '\E041';
 }
 
-.@{prefix}-icon-dashboard:before {
+.@{prefix}-icon-cloud:before {
   content: '\E042';
 }
 
-.@{prefix}-icon-delete:before {
+.@{prefix}-icon-code:before {
   content: '\E043';
 }
 
-.@{prefix}-icon-desktop:before {
+.@{prefix}-icon-control-platform:before {
   content: '\E044';
 }
 
-.@{prefix}-icon-discount-filled:before {
+.@{prefix}-icon-creditcard:before {
   content: '\E045';
 }
 
-.@{prefix}-icon-discount:before {
+.@{prefix}-icon-dashboard:before {
   content: '\E046';
 }
 
-.@{prefix}-icon-download:before {
+.@{prefix}-icon-delete:before {
   content: '\E047';
 }
 
-.@{prefix}-icon-edit-1:before {
+.@{prefix}-icon-desktop:before {
   content: '\E048';
 }
 
-.@{prefix}-icon-edit:before {
+.@{prefix}-icon-discount-filled:before {
   content: '\E049';
 }
 
-.@{prefix}-icon-ellipsis:before {
+.@{prefix}-icon-discount:before {
   content: '\E04A';
 }
 
-.@{prefix}-icon-enter:before {
+.@{prefix}-icon-download:before {
   content: '\E04B';
 }
 
-.@{prefix}-icon-error-circle-filled:before {
+.@{prefix}-icon-edit-1:before {
   content: '\E04C';
 }
 
-.@{prefix}-icon-error-circle:before {
+.@{prefix}-icon-edit:before {
   content: '\E04D';
 }
 
-.@{prefix}-icon-error:before {
+.@{prefix}-icon-ellipsis:before {
   content: '\E04E';
 }
 
-.@{prefix}-icon-file-add:before {
+.@{prefix}-icon-enter:before {
   content: '\E04F';
 }
 
-.@{prefix}-icon-file-copy:before {
+.@{prefix}-icon-error-circle-filled:before {
   content: '\E050';
 }
 
-.@{prefix}-icon-file-excel:before {
+.@{prefix}-icon-error-circle:before {
   content: '\E051';
 }
 
-.@{prefix}-icon-file-icon:before {
+.@{prefix}-icon-error:before {
   content: '\E052';
 }
 
-.@{prefix}-icon-file-image:before {
+.@{prefix}-icon-file-add:before {
   content: '\E053';
 }
 
-.@{prefix}-icon-file-paste:before {
+.@{prefix}-icon-file-copy:before {
   content: '\E054';
 }
 
-.@{prefix}-icon-file-pdf:before {
+.@{prefix}-icon-file-excel:before {
   content: '\E055';
 }
 
-.@{prefix}-icon-file-powerpoint:before {
+.@{prefix}-icon-file-icon:before {
   content: '\E056';
 }
 
-.@{prefix}-icon-file-unknown:before {
+.@{prefix}-icon-file-image:before {
   content: '\E057';
 }
 
-.@{prefix}-icon-file-word:before {
+.@{prefix}-icon-file-paste:before {
   content: '\E058';
 }
 
-.@{prefix}-icon-file:before {
+.@{prefix}-icon-file-pdf:before {
   content: '\E059';
 }
 
-.@{prefix}-icon-filter-clear:before {
+.@{prefix}-icon-file-powerpoint:before {
   content: '\E05A';
 }
 
-.@{prefix}-icon-filter:before {
+.@{prefix}-icon-file-unknown:before {
   content: '\E05B';
 }
 
-.@{prefix}-icon-flag:before {
+.@{prefix}-icon-file-word:before {
   content: '\E05C';
 }
 
-.@{prefix}-icon-folder-add:before {
+.@{prefix}-icon-file:before {
   content: '\E05D';
 }
 
-.@{prefix}-icon-folder-open:before {
+.@{prefix}-icon-filter-clear:before {
   content: '\E05E';
 }
 
-.@{prefix}-icon-folder:before {
+.@{prefix}-icon-filter:before {
   content: '\E05F';
 }
 
-.@{prefix}-icon-fork:before {
+.@{prefix}-icon-flag:before {
   content: '\E060';
 }
 
-.@{prefix}-icon-format-horizontal-align-bottom:before {
+.@{prefix}-icon-folder-add:before {
   content: '\E061';
 }
 
-.@{prefix}-icon-format-horizontal-align-center:before {
+.@{prefix}-icon-folder-open:before {
   content: '\E062';
 }
 
-.@{prefix}-icon-format-horizontal-align-top:before {
+.@{prefix}-icon-folder:before {
   content: '\E063';
 }
 
-.@{prefix}-icon-format-vertical-align-center:before {
+.@{prefix}-icon-fork:before {
   content: '\E064';
 }
 
-.@{prefix}-icon-format-vertical-align-left:before {
+.@{prefix}-icon-format-horizontal-align-bottom:before {
   content: '\E065';
 }
 
-.@{prefix}-icon-format-vertical-align-right:before {
+.@{prefix}-icon-format-horizontal-align-center:before {
   content: '\E066';
 }
 
-.@{prefix}-icon-forward:before {
+.@{prefix}-icon-format-horizontal-align-top:before {
   content: '\E067';
 }
 
-.@{prefix}-icon-fullscreen-exit:before {
+.@{prefix}-icon-format-vertical-align-center:before {
   content: '\E068';
 }
 
-.@{prefix}-icon-fullscreen:before {
+.@{prefix}-icon-format-vertical-align-left:before {
   content: '\E069';
 }
 
-.@{prefix}-icon-gender-female:before {
+.@{prefix}-icon-format-vertical-align-right:before {
   content: '\E06A';
 }
 
-.@{prefix}-icon-gender-male:before {
+.@{prefix}-icon-forward:before {
   content: '\E06B';
 }
 
-.@{prefix}-icon-gift:before {
+.@{prefix}-icon-fullscreen-exit:before {
   content: '\E06C';
 }
 
-.@{prefix}-icon-heart-filled:before {
+.@{prefix}-icon-fullscreen:before {
   content: '\E06D';
 }
 
-.@{prefix}-icon-heart:before {
+.@{prefix}-icon-gender-female:before {
   content: '\E06E';
 }
 
-.@{prefix}-icon-help-circle-filled:before {
+.@{prefix}-icon-gender-male:before {
   content: '\E06F';
 }
 
-.@{prefix}-icon-help-circle:before {
+.@{prefix}-icon-gift:before {
   content: '\E070';
 }
 
-.@{prefix}-icon-help:before {
+.@{prefix}-icon-heart-filled:before {
   content: '\E071';
 }
 
-.@{prefix}-icon-history:before {
+.@{prefix}-icon-heart:before {
   content: '\E072';
 }
 
-.@{prefix}-icon-home:before {
+.@{prefix}-icon-help-circle-filled:before {
   content: '\E073';
 }
 
-.@{prefix}-icon-hourglass:before {
+.@{prefix}-icon-help-circle:before {
   content: '\E074';
 }
 
-.@{prefix}-icon-image-error:before {
+.@{prefix}-icon-help:before {
   content: '\E075';
 }
 
-.@{prefix}-icon-image:before {
+.@{prefix}-icon-history:before {
   content: '\E076';
 }
 
-.@{prefix}-icon-info-circle-filled:before {
+.@{prefix}-icon-home:before {
   content: '\E077';
 }
 
-.@{prefix}-icon-info-circle:before {
+.@{prefix}-icon-hourglass:before {
   content: '\E078';
 }
 
-.@{prefix}-icon-internet:before {
+.@{prefix}-icon-image-error:before {
   content: '\E079';
 }
 
-.@{prefix}-icon-jump:before {
+.@{prefix}-icon-image:before {
   content: '\E07A';
 }
 
-.@{prefix}-icon-laptop:before {
+.@{prefix}-icon-info-circle-filled:before {
   content: '\E07B';
 }
 
-.@{prefix}-icon-layers:before {
+.@{prefix}-icon-info-circle:before {
   content: '\E07C';
 }
 
-.@{prefix}-icon-link-unlink:before {
+.@{prefix}-icon-internet:before {
   content: '\E07D';
 }
 
-.@{prefix}-icon-link:before {
+.@{prefix}-icon-jump:before {
   content: '\E07E';
 }
 
-.@{prefix}-icon-loading:before {
+.@{prefix}-icon-laptop:before {
   content: '\E07F';
 }
 
-.@{prefix}-icon-location:before {
+.@{prefix}-icon-layers:before {
   content: '\E080';
 }
 
-.@{prefix}-icon-lock-off:before {
+.@{prefix}-icon-link-unlink:before {
   content: '\E081';
 }
 
-.@{prefix}-icon-lock-on:before {
+.@{prefix}-icon-link:before {
   content: '\E082';
 }
 
-.@{prefix}-icon-login:before {
+.@{prefix}-icon-loading:before {
   content: '\E083';
 }
 
-.@{prefix}-icon-logo-android:before {
+.@{prefix}-icon-location:before {
   content: '\E084';
 }
 
-.@{prefix}-icon-logo-apple-filled:before {
+.@{prefix}-icon-lock-off:before {
   content: '\E085';
 }
 
-.@{prefix}-icon-logo-apple:before {
+.@{prefix}-icon-lock-on:before {
   content: '\E086';
 }
 
-.@{prefix}-icon-logo-chrome-filled:before {
+.@{prefix}-icon-login:before {
   content: '\E087';
 }
 
-.@{prefix}-icon-logo-chrome:before {
+.@{prefix}-icon-logo-android:before {
   content: '\E088';
 }
 
-.@{prefix}-icon-logo-codepen:before {
+.@{prefix}-icon-logo-apple-filled:before {
   content: '\E089';
 }
 
-.@{prefix}-icon-logo-github-filled:before {
+.@{prefix}-icon-logo-apple:before {
   content: '\E08A';
 }
 
-.@{prefix}-icon-logo-github:before {
+.@{prefix}-icon-logo-chrome-filled:before {
   content: '\E08B';
 }
 
-.@{prefix}-icon-logo-ie-filled:before {
+.@{prefix}-icon-logo-chrome:before {
   content: '\E08C';
 }
 
-.@{prefix}-icon-logo-ie:before {
+.@{prefix}-icon-logo-codepen:before {
   content: '\E08D';
 }
 
-.@{prefix}-icon-logo-qq:before {
+.@{prefix}-icon-logo-github-filled:before {
   content: '\E08E';
 }
 
-.@{prefix}-icon-logo-wechat:before {
+.@{prefix}-icon-logo-github:before {
   content: '\E08F';
 }
 
-.@{prefix}-icon-logo-wecom:before {
+.@{prefix}-icon-logo-ie-filled:before {
   content: '\E090';
 }
 
-.@{prefix}-icon-logo-windows-filled:before {
+.@{prefix}-icon-logo-ie:before {
   content: '\E091';
 }
 
-.@{prefix}-icon-logo-windows:before {
+.@{prefix}-icon-logo-qq:before {
   content: '\E092';
 }
 
-.@{prefix}-icon-logout:before {
+.@{prefix}-icon-logo-wechat:before {
   content: '\E093';
 }
 
-.@{prefix}-icon-mail:before {
+.@{prefix}-icon-logo-wecom:before {
   content: '\E094';
 }
 
-.@{prefix}-icon-menu-fold:before {
+.@{prefix}-icon-logo-windows-filled:before {
   content: '\E095';
 }
 
-.@{prefix}-icon-menu-unfold:before {
+.@{prefix}-icon-logo-windows:before {
   content: '\E096';
 }
 
-.@{prefix}-icon-minus-circle-filled:before {
+.@{prefix}-icon-logout:before {
   content: '\E097';
 }
 
-.@{prefix}-icon-minus-circle:before {
+.@{prefix}-icon-mail:before {
   content: '\E098';
 }
 
-.@{prefix}-icon-minus-rectangle:before {
+.@{prefix}-icon-menu-fold:before {
   content: '\E099';
 }
 
-.@{prefix}-icon-mirror:before {
+.@{prefix}-icon-menu-unfold:before {
   content: '\E09A';
 }
 
-.@{prefix}-icon-mobile-vibrate:before {
+.@{prefix}-icon-minus-circle-filled:before {
   content: '\E09B';
 }
 
-.@{prefix}-icon-mobile:before {
+.@{prefix}-icon-minus-circle:before {
   content: '\E09C';
 }
 
-.@{prefix}-icon-money-circle:before {
+.@{prefix}-icon-minus-rectangle-filled:before {
   content: '\E09D';
 }
 
-.@{prefix}-icon-more:before {
+.@{prefix}-icon-minus-rectangle:before {
   content: '\E09E';
 }
 
-.@{prefix}-icon-move:before {
+.@{prefix}-icon-mirror:before {
   content: '\E09F';
 }
 
-.@{prefix}-icon-next:before {
+.@{prefix}-icon-mobile-vibrate:before {
   content: '\E0A0';
 }
 
-.@{prefix}-icon-notification-filled:before {
+.@{prefix}-icon-mobile:before {
   content: '\E0A1';
 }
 
-.@{prefix}-icon-notification:before {
+.@{prefix}-icon-money-circle:before {
   content: '\E0A2';
 }
 
-.@{prefix}-icon-order-adjustment-column:before {
+.@{prefix}-icon-more:before {
   content: '\E0A3';
 }
 
-.@{prefix}-icon-order-ascending:before {
+.@{prefix}-icon-move:before {
   content: '\E0A4';
 }
 
-.@{prefix}-icon-order-descending:before {
+.@{prefix}-icon-next:before {
   content: '\E0A5';
 }
 
-.@{prefix}-icon-page-first:before {
+.@{prefix}-icon-notification-filled:before {
   content: '\E0A6';
 }
 
-.@{prefix}-icon-page-last:before {
+.@{prefix}-icon-notification:before {
   content: '\E0A7';
 }
 
-.@{prefix}-icon-pause-circle-filled:before {
+.@{prefix}-icon-order-adjustment-column:before {
   content: '\E0A8';
 }
 
-.@{prefix}-icon-photo:before {
+.@{prefix}-icon-order-ascending:before {
   content: '\E0A9';
 }
 
-.@{prefix}-icon-pin-filled:before {
+.@{prefix}-icon-order-descending:before {
   content: '\E0AA';
 }
 
-.@{prefix}-icon-pin:before {
+.@{prefix}-icon-page-first:before {
   content: '\E0AB';
 }
 
-.@{prefix}-icon-play-circle-filled:before {
+.@{prefix}-icon-page-last:before {
   content: '\E0AC';
 }
 
-.@{prefix}-icon-play-circle-stroke:before {
+.@{prefix}-icon-pause-circle-filled:before {
   content: '\E0AD';
 }
 
-.@{prefix}-icon-play-circle:before {
+.@{prefix}-icon-photo:before {
   content: '\E0AE';
 }
 
-.@{prefix}-icon-play:before {
+.@{prefix}-icon-pin-filled:before {
   content: '\E0AF';
 }
 
-.@{prefix}-icon-poweroff:before {
+.@{prefix}-icon-pin:before {
   content: '\E0B0';
 }
 
-.@{prefix}-icon-precise-monitor:before {
+.@{prefix}-icon-play-circle-filled:before {
   content: '\E0B1';
 }
 
-.@{prefix}-icon-previous:before {
+.@{prefix}-icon-play-circle-stroke:before {
   content: '\E0B2';
 }
 
-.@{prefix}-icon-print:before {
+.@{prefix}-icon-play-circle:before {
   content: '\E0B3';
 }
 
-.@{prefix}-icon-qrcode:before {
+.@{prefix}-icon-play:before {
   content: '\E0B4';
 }
 
-.@{prefix}-icon-queue:before {
+.@{prefix}-icon-poweroff:before {
   content: '\E0B5';
 }
 
-.@{prefix}-icon-rectangle:before {
+.@{prefix}-icon-precise-monitor:before {
   content: '\E0B6';
 }
 
-.@{prefix}-icon-refresh:before {
+.@{prefix}-icon-previous:before {
   content: '\E0B7';
 }
 
-.@{prefix}-icon-relativity:before {
+.@{prefix}-icon-print:before {
   content: '\E0B8';
 }
 
-.@{prefix}-icon-remove:before {
+.@{prefix}-icon-qrcode:before {
   content: '\E0B9';
 }
 
-.@{prefix}-icon-rollback:before {
+.@{prefix}-icon-queue:before {
   content: '\E0BA';
 }
 
-.@{prefix}-icon-rollfront:before {
+.@{prefix}-icon-rectangle:before {
   content: '\E0BB';
 }
 
-.@{prefix}-icon-root-list:before {
+.@{prefix}-icon-refresh:before {
   content: '\E0BC';
 }
 
-.@{prefix}-icon-rotation:before {
+.@{prefix}-icon-relativity:before {
   content: '\E0BD';
 }
 
-.@{prefix}-icon-round:before {
+.@{prefix}-icon-remove:before {
   content: '\E0BE';
 }
 
-.@{prefix}-icon-save:before {
+.@{prefix}-icon-rollback:before {
   content: '\E0BF';
 }
 
-.@{prefix}-icon-scan:before {
+.@{prefix}-icon-rollfront:before {
   content: '\E0C0';
 }
 
-.@{prefix}-icon-search:before {
+.@{prefix}-icon-root-list:before {
   content: '\E0C1';
 }
 
-.@{prefix}-icon-secured:before {
+.@{prefix}-icon-rotation:before {
   content: '\E0C2';
 }
 
-.@{prefix}-icon-server:before {
+.@{prefix}-icon-round:before {
   content: '\E0C3';
 }
 
-.@{prefix}-icon-service:before {
+.@{prefix}-icon-save:before {
   content: '\E0C4';
 }
 
-.@{prefix}-icon-setting:before {
+.@{prefix}-icon-scan:before {
   content: '\E0C5';
 }
 
-.@{prefix}-icon-share:before {
+.@{prefix}-icon-search:before {
   content: '\E0C6';
 }
 
-.@{prefix}-icon-shop:before {
+.@{prefix}-icon-secured:before {
   content: '\E0C7';
 }
 
-.@{prefix}-icon-slash:before {
+.@{prefix}-icon-server:before {
   content: '\E0C8';
 }
 
-.@{prefix}-icon-sound:before {
+.@{prefix}-icon-service:before {
   content: '\E0C9';
 }
 
-.@{prefix}-icon-star-filled:before {
+.@{prefix}-icon-setting:before {
   content: '\E0CA';
 }
 
-.@{prefix}-icon-star:before {
+.@{prefix}-icon-share:before {
   content: '\E0CB';
 }
 
-.@{prefix}-icon-stop-circle-1:before {
+.@{prefix}-icon-shop:before {
   content: '\E0CC';
 }
 
-.@{prefix}-icon-stop-circle-filled:before {
+.@{prefix}-icon-slash:before {
   content: '\E0CD';
 }
 
-.@{prefix}-icon-stop-circle:before {
+.@{prefix}-icon-sound:before {
   content: '\E0CE';
 }
 
-.@{prefix}-icon-stop:before {
+.@{prefix}-icon-star-filled:before {
   content: '\E0CF';
 }
 
-.@{prefix}-icon-swap-left:before {
+.@{prefix}-icon-star:before {
   content: '\E0D0';
 }
 
-.@{prefix}-icon-swap-right:before {
+.@{prefix}-icon-stop-circle-1:before {
   content: '\E0D1';
 }
 
-.@{prefix}-icon-swap:before {
+.@{prefix}-icon-stop-circle-filled:before {
   content: '\E0D2';
 }
 
-.@{prefix}-icon-thumb-down:before {
+.@{prefix}-icon-stop-circle:before {
   content: '\E0D3';
 }
 
-.@{prefix}-icon-thumb-up:before {
+.@{prefix}-icon-stop:before {
   content: '\E0D4';
 }
 
-.@{prefix}-icon-time-filled:before {
+.@{prefix}-icon-swap-left:before {
   content: '\E0D5';
 }
 
-.@{prefix}-icon-time:before {
+.@{prefix}-icon-swap-right:before {
   content: '\E0D6';
 }
 
-.@{prefix}-icon-tips:before {
+.@{prefix}-icon-swap:before {
   content: '\E0D7';
 }
 
-.@{prefix}-icon-tools:before {
+.@{prefix}-icon-thumb-down:before {
   content: '\E0D8';
 }
 
-.@{prefix}-icon-unfold-less:before {
+.@{prefix}-icon-thumb-up:before {
   content: '\E0D9';
 }
 
-.@{prefix}-icon-unfold-more:before {
+.@{prefix}-icon-time-filled:before {
   content: '\E0DA';
 }
 
-.@{prefix}-icon-upload:before {
+.@{prefix}-icon-time:before {
   content: '\E0DB';
 }
 
-.@{prefix}-icon-usb:before {
+.@{prefix}-icon-tips:before {
   content: '\E0DC';
 }
 
-.@{prefix}-icon-user-add:before {
+.@{prefix}-icon-tools:before {
   content: '\E0DD';
 }
 
-.@{prefix}-icon-user-avatar:before {
+.@{prefix}-icon-translate-1:before {
   content: '\E0DE';
 }
 
-.@{prefix}-icon-user-circle:before {
+.@{prefix}-icon-translate:before {
   content: '\E0DF';
 }
 
-.@{prefix}-icon-user-clear:before {
+.@{prefix}-icon-unfold-less:before {
   content: '\E0E0';
 }
 
-.@{prefix}-icon-user-talk:before {
+.@{prefix}-icon-unfold-more:before {
   content: '\E0E1';
 }
 
-.@{prefix}-icon-user:before {
+.@{prefix}-icon-upload:before {
   content: '\E0E2';
 }
 
-.@{prefix}-icon-usergroup-add:before {
+.@{prefix}-icon-usb:before {
   content: '\E0E3';
 }
 
-.@{prefix}-icon-usergroup-clear:before {
+.@{prefix}-icon-user-add:before {
   content: '\E0E4';
 }
 
-.@{prefix}-icon-usergroup:before {
+.@{prefix}-icon-user-avatar:before {
   content: '\E0E5';
 }
 
-.@{prefix}-icon-video:before {
+.@{prefix}-icon-user-circle:before {
   content: '\E0E6';
 }
 
-.@{prefix}-icon-view-column:before {
+.@{prefix}-icon-user-clear:before {
   content: '\E0E7';
 }
 
-.@{prefix}-icon-view-list:before {
+.@{prefix}-icon-user-talk:before {
   content: '\E0E8';
 }
 
-.@{prefix}-icon-view-module:before {
+.@{prefix}-icon-user:before {
   content: '\E0E9';
 }
 
-.@{prefix}-icon-wallet:before {
+.@{prefix}-icon-usergroup-add:before {
   content: '\E0EA';
 }
 
-.@{prefix}-icon-wifi:before {
+.@{prefix}-icon-usergroup-clear:before {
   content: '\E0EB';
 }
 
-.@{prefix}-icon-zoom-in:before {
+.@{prefix}-icon-usergroup:before {
   content: '\E0EC';
 }
 
-.@{prefix}-icon-zoom-out:before {
+.@{prefix}-icon-video:before {
   content: '\E0ED';
 }
+
+.@{prefix}-icon-view-column:before {
+  content: '\E0EE';
+}
+
+.@{prefix}-icon-view-list:before {
+  content: '\E0EF';
+}
+
+.@{prefix}-icon-view-module:before {
+  content: '\E0F0';
+}
+
+.@{prefix}-icon-wallet:before {
+  content: '\E0F1';
+}
+
+.@{prefix}-icon-wifi:before {
+  content: '\E0F2';
+}
+
+.@{prefix}-icon-zoom-in:before {
+  content: '\E0F3';
+}
+
+.@{prefix}-icon-zoom-out:before {
+  content: '\E0F4';
+}
diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
index c361b1971..d9a57a892 100644
--- a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,115 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`image-viewer :base 1`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
-    class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx; color: inherit;"
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
   >
-    <wx-view
-      ariaLabel="加载中"
-      ariaRole="img"
-      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
 
 exports[`image-viewer :base 2`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
-    class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx; color: inherit;"
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
   >
-    <wx-view
-      ariaLabel="加载中"
-      ariaRole="img"
-      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
 
 exports[`image-viewer :base 3`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
-    class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx; color: inherit;"
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
   >
-    <wx-view
-      ariaLabel="加载中"
-      ariaRole="img"
-      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
diff --git a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
index 73c7d73ee..445831548 100644
--- a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,63 +2,72 @@
 
 exports[`image :base 1`] = `
 <main>
-  <wx-view
-    ariaHidden="{{false}}"
-    class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
-    style=""
-  >
+  <t-image>
     <wx-view
-      class="t-class-load"
-      style="font-size: 44rpx"
+      ariaHidden="{{false}}"
+      class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
+      style=""
     >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel="加载失败"
-        ariaRole="img"
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-class-load"
+        style="font-size: 44rpx"
       >
-        <wx-label
-          class="t-icon-close t-icon-base"
-        />
+        <t-icon>
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel="加载失败"
+            ariaRole="img"
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-close t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{false}}"
-    mode="scaleToFill"
-    showMenuByLongpress="{{false}}"
-    src=""
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
+    <wx-image
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="class t-class t-image t-image--shape-square"
+      hidden="{{true}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="scaleToFill"
+      showMenuByLongpress="{{false}}"
+      src=""
+      style=""
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
 </main>
 `;
 
 exports[`image :success 1`] = `
 <main>
-  <wx-image
-    ariaHidden="{{false}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{false}}"
-    id="image"
-    lazyLoad="{{false}}"
-    mode="heightFix"
-    showMenuByLongpress="{{false}}"
-    src="https://www.tencent.com/img/index/menu_logo.png"
-    style="height: 0px; width: 0.00px;"
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
+  <t-image
+    id="root"
+    bind:load="handleLoad"
+  >
+    <wx-image
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      class="class t-class t-image t-image--shape-square"
+      hidden="{{false}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="heightFix"
+      showMenuByLongpress="{{false}}"
+      src="https://www.tencent.com/img/index/menu_logo.png"
+      style="height: 0px; width: 0.00px;"
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
 </main>
 `;
diff --git a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
index 595e9792e..2b1c4656a 100644
--- a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,198 +1,218 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`input props : clearable && label && suffix 1`] = `
-<wx-view
-  ariaDescribedby="{{true}}"
-  class="t-input t-input--border t-input--layout-horizontal class t-class"
-  style=""
+<t-input
+  class="base"
 >
   <wx-view
-    class="t-input__wrap--prefix"
+    ariaDescribedby="{{true}}"
+    class="t-input t-input--border t-input--layout-horizontal class t-class"
+    style=""
   >
     <wx-view
-      class="t-input__icon--prefix"
-    />
-    <wx-view
-      ariaHidden="{{true}}"
-      class="t-input__label"
+      class="t-input__wrap--prefix"
     >
-      <wx-text
-        class="t-class-label"
+      <wx-view
+        class="t-input__icon--prefix"
+      />
+      <wx-view
+        ariaHidden="{{true}}"
+        class="t-input__label"
       >
-        tdesign
-      </wx-text>
+        <wx-text
+          class="t-class-label"
+        >
+          tdesign
+        </wx-text>
+      </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-view
-    class="t-input__wrap"
-  >
     <wx-view
-      class="t-input__content t-input--default"
+      class="t-input__wrap"
     >
-      <wx-input
-        adjustPosition="{{true}}"
-        alwaysEmbed="{{false}}"
-        ariaLabel="tdesign"
-        ariaRole="textbox"
-        ariaRoledescription="tdesign"
-        autoFocus="{{false}}"
-        class="t-input__control t-input--left t-class-input"
-        confirmHold="{{false}}"
-        confirmType="done"
-        cursor="{{0}}"
-        cursorSpacing="{{0}}"
-        disabled="{{false}}"
-        focus="{{false}}"
-        holdKeyboard="{{false}}"
-        maxlength="{{-1}}"
-        password="{{false}}"
-        placeholder=""
-        placeholderClass="t-input__placeholder input-placeholder"
-        placeholderStyle=""
-        safePasswordCertPath=""
-        safePasswordCustomHash=""
-        safePasswordLength="{{0}}"
-        safePasswordNonce=""
-        safePasswordSalt=""
-        safePasswordTimeStamp="{{0}}"
-        selectionEnd="{{-1}}"
-        selectionStart="{{-1}}"
-        type="text"
-        value="input输入框"
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-        bind:keyboardheightchange="onKeyboardHeightChange"
-        bind:nicknamereview="onNickNameReview"
-      />
       <wx-view
-        class="t-input__wrap--clearable-icon"
-        bind:touchstart="clearInput"
+        class="t-input__content t-input--default"
       >
+        <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
+          ariaLabel="tdesign"
+          ariaRole="textbox"
+          ariaRoledescription="tdesign"
+          autoFocus="{{false}}"
+          class="t-input__control t-input--left t-class-input"
+          confirmHold="{{false}}"
+          confirmType="done"
+          cursor="{{0}}"
+          cursorSpacing="{{0}}"
+          disabled="{{false}}"
+          focus="{{false}}"
+          holdKeyboard="{{false}}"
+          maxlength="{{-1}}"
+          password="{{false}}"
+          placeholder=""
+          placeholderClass="t-input__placeholder input-placeholder"
+          placeholderStyle=""
+          safePasswordCertPath=""
+          safePasswordCustomHash=""
+          safePasswordLength="{{0}}"
+          safePasswordNonce=""
+          safePasswordSalt=""
+          safePasswordTimeStamp="{{0}}"
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
+          type="text"
+          value="input输入框"
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+          bind:keyboardheightchange="onKeyboardHeightChange"
+          bind:nicknamereview="onNickNameReview"
+        />
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="清除"
-          ariaRole="button"
-          class="t-icon class t-class"
-          style=""
-          bind:tap="onTap"
+          class="t-input__wrap--clearable-icon"
+          bind:touchstart="clearInput"
         >
-          <wx-label
-            class="t-icon-close-circle-filled t-icon-base"
-          />
+          <t-icon
+            class=""
+            tClass="t-class-clearable"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel="清除"
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-close-circle-filled t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
         </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-input__wrap--suffix t-class-suffix"
-        bind:tap="onSuffixClick"
-      >
-        <wx-text>
-          后置内容
-        </wx-text>
-      </wx-view>
-      <wx-view
-        class="t-input__wrap--suffix-icon"
-        bind:tap="onSuffixIconClick"
-      >
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel=""
-          ariaRole="button"
-          class="t-icon class t-class"
-          style=""
-          bind:tap="onTap"
+          class="t-input__wrap--suffix t-class-suffix"
+          bind:tap="onSuffixClick"
         >
-          <wx-label
-            class="t-icon-app t-icon-base"
-          />
+          <wx-text>
+            后置内容
+          </wx-text>
+        </wx-view>
+        <wx-view
+          class="t-input__wrap--suffix-icon"
+          bind:tap="onSuffixIconClick"
+        >
+          <t-icon
+            class=""
+            tClass="t-class-suffix-icon"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel=""
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-app t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
         </wx-view>
       </wx-view>
     </wx-view>
   </wx-view>
-</wx-view>
+</t-input>
 `;
 
 exports[`input slots : label 1`] = `
-<wx-view
-  ariaDescribedby="{{true}}"
-  class="t-input t-input--border t-input--layout-horizontal class t-class"
-  style=""
+<t-input
+  class="base"
 >
   <wx-view
-    class="t-input__wrap--prefix"
+    ariaDescribedby="{{true}}"
+    class="t-input t-input--border t-input--layout-horizontal class t-class"
+    style=""
   >
     <wx-view
-      class="t-input__icon--prefix"
-    />
-    <wx-view
-      ariaHidden="{{true}}"
-      class="t-input__label"
+      class="t-input__wrap--prefix"
     >
-      <wx-text
-        slot="label"
+      <wx-view
+        class="t-input__icon--prefix"
+      />
+      <wx-view
+        ariaHidden="{{true}}"
+        class="t-input__label"
       >
-        标签文字
         <wx-text
-          style="color: #e34d59"
+          slot="label"
         >
-          *
+          标签文字
+          <wx-text
+            style="color: #e34d59"
+          >
+            *
+          </wx-text>
         </wx-text>
-      </wx-text>
+      </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-view
-    class="t-input__wrap"
-  >
     <wx-view
-      class="t-input__content t-input--default"
+      class="t-input__wrap"
     >
-      <wx-input
-        adjustPosition="{{true}}"
-        alwaysEmbed="{{false}}"
-        ariaLabel=""
-        ariaRole="textbox"
-        ariaRoledescription=""
-        autoFocus="{{false}}"
-        class="t-input__control t-input--left t-class-input"
-        confirmHold="{{false}}"
-        confirmType="done"
-        cursor="{{0}}"
-        cursorSpacing="{{0}}"
-        disabled="{{false}}"
-        focus="{{false}}"
-        holdKeyboard="{{false}}"
-        maxlength="{{-1}}"
-        password="{{false}}"
-        placeholder=""
-        placeholderClass="t-input__placeholder input-placeholder"
-        placeholderStyle=""
-        safePasswordCertPath=""
-        safePasswordCustomHash=""
-        safePasswordLength="{{0}}"
-        safePasswordNonce=""
-        safePasswordSalt=""
-        safePasswordTimeStamp="{{0}}"
-        selectionEnd="{{-1}}"
-        selectionStart="{{-1}}"
-        type="text"
-        value=""
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-        bind:keyboardheightchange="onKeyboardHeightChange"
-        bind:nicknamereview="onNickNameReview"
-      />
       <wx-view
-        class="t-input__wrap--suffix t-class-suffix"
-        bind:tap="onSuffixClick"
-      />
-      <wx-view
-        class="t-input__wrap--suffix-icon"
-        bind:tap="onSuffixIconClick"
-      />
+        class="t-input__content t-input--default"
+      >
+        <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
+          ariaLabel=""
+          ariaRole="textbox"
+          ariaRoledescription=""
+          autoFocus="{{false}}"
+          class="t-input__control t-input--left t-class-input"
+          confirmHold="{{false}}"
+          confirmType="done"
+          cursor="{{0}}"
+          cursorSpacing="{{0}}"
+          disabled="{{false}}"
+          focus="{{false}}"
+          holdKeyboard="{{false}}"
+          maxlength="{{-1}}"
+          password="{{false}}"
+          placeholder=""
+          placeholderClass="t-input__placeholder input-placeholder"
+          placeholderStyle=""
+          safePasswordCertPath=""
+          safePasswordCustomHash=""
+          safePasswordLength="{{0}}"
+          safePasswordNonce=""
+          safePasswordSalt=""
+          safePasswordTimeStamp="{{0}}"
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
+          type="text"
+          value=""
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+          bind:keyboardheightchange="onKeyboardHeightChange"
+          bind:nicknamereview="onNickNameReview"
+        />
+        <wx-view
+          class="t-input__wrap--suffix t-class-suffix"
+          bind:tap="onSuffixClick"
+        />
+        <wx-view
+          class="t-input__wrap--suffix-icon"
+          bind:tap="onSuffixIconClick"
+        />
+      </wx-view>
     </wx-view>
   </wx-view>
-</wx-view>
+</t-input>
 `;
diff --git a/src/loading/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/loading/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 2f176b80b..1354ec6e0 100644
--- a/src/loading/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/loading/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -20,6 +20,16 @@ exports[`Loading Loading base demo works fine 1`] = `
       size="80rpx"
       theme="dots"
     />
+    <t-loading
+      class="wrapper"
+      theme="custom"
+    >
+      <t-image
+        slot="indicator"
+        src="https://cdc.cdn-go.cn/tdc/latest/images/tdesign.svg"
+        style="width: 100%; height: 100%"
+      />
+    </t-loading>
   </wx-view>
 </base>
 `;
diff --git a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
index 8d7f31dc6..67aa8f6c8 100644
--- a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,82 +2,98 @@
 
 exports[`message props : style && customStyle 1`] = `
 <main>
-  <wx-view
-    animation="{{
-      Object {
-        "actions": Array [
-          Object {
-            "animates": Array [
-              Object {
-                "args": Array [
-                  66,
-                ],
-                "type": "translateY",
-              },
-            ],
-            "option": Object {
-              "transformOrigin": "50% 50% 0",
-              "transition": Object {
-                "delay": 0,
-                "duration": 500,
-                "timingFunction": "ease",
-              },
-            },
-          },
-        ],
-      }
-    }}"
-    ariaRole="alert"
-    class="t-message class t-class t-message--warning"
+  <t-message
     id="t-message"
-    style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
   >
     <wx-view
-      class="t-message__icon--left"
+      animation="{{
+        Object {
+          "actions": Array [
+            Object {
+              "animates": Array [
+                Object {
+                  "args": Array [
+                    66,
+                  ],
+                  "type": "translateY",
+                },
+              ],
+              "option": Object {
+                "transformOrigin": "50% 50% 0",
+                "transition": Object {
+                  "delay": 0,
+                  "duration": 500,
+                  "timingFunction": "ease",
+                },
+              },
+            },
+          ],
+        }
+      }}"
+      ariaRole="alert"
+      class="t-message class t-class t-message--warning"
+      id="t-message"
+      style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
     >
       <wx-view
-        ariaHidden="{{true}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-message__icon--left"
       >
-        <wx-label
-          class="t-icon-info-circle-filled t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-icon"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-info-circle-filled t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-message__text-wrap "
-      id="t-message__text-wrap"
-      style="text-align: left"
-    >
       <wx-view
-        animation="{{Array []}}"
-        class="t-message__text t-class-content"
-        id="t-message__text"
+        class="t-message__text-wrap "
+        id="t-message__text-wrap"
+        style="text-align: left"
       >
-        这是一条带关闭的消息通知
+        <wx-view
+          animation="{{Array []}}"
+          class="t-message__text t-class-content"
+          id="t-message__text"
+        >
+          这是一条带关闭的消息通知
+        </wx-view>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-message__icon--right"
-      bind:tap="handleClose"
-    >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel="关闭"
-        ariaRole="button"
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-message__icon--right"
+        bind:tap="handleClose"
       >
-        <wx-label
-          class="t-icon-close t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-close-btn"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel="关闭"
+            ariaRole="button"
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-close t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-message>
 </main>
 `;
diff --git a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
index c8109c4a7..198a82e20 100644
--- a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,165 +2,175 @@
 
 exports[`navbar :base 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
         >
-          test
-        </wx-text>
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :base 2`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :base 3`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :fixed 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
         >
-          test
-        </wx-text>
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :menu button 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed  class t-class"
-    style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width:40px;"
-  >
-    <wx-view
-      class="t-navbar__placeholder"
-    />
+  <t-navbar>
     <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed  class t-class"
+      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
diff --git a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
index e190e8a3e..7dd7671db 100644
--- a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,69 +2,79 @@
 
 exports[`notice-bar props : marquee 1`] = `
 <main>
-  <wx-view
-    class="t-notice-bar t-notice-bar--info class t-class"
-    style=""
+  <t-notice-bar
+    class="base"
   >
     <wx-view
-      class="t-notice-bar__prefix-icon"
-      bind:tap="clickPrefixIcon"
+      class="t-notice-bar t-notice-bar--info class t-class"
+      style=""
     >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-notice-bar__prefix-icon"
+        bind:tap="clickPrefixIcon"
       >
-        <wx-label
-          class="t-icon-info-circle-filled t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-prefix-icon"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-info-circle-filled t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-notice-bar__content-wrap"
-      bind:tap="clickContent"
-    >
       <wx-view
-        animation="{{
-          Object {
-            "actions": Array [
-              Object {
-                "animates": Array [
-                  Object {
-                    "args": Array [
-                      -350,
-                    ],
-                    "type": "translateX",
-                  },
-                ],
-                "option": Object {
-                  "transformOrigin": "50% 50% 0",
-                  "transition": Object {
-                    "delay": 0,
-                    "duration": 8287.5,
-                    "timingFunction": "linear",
-                  },
-                },
-              },
-            ],
-          }
-        }}"
-        class="t-notice-bar__content t-class-content "
+        class="t-notice-bar__content-wrap"
+        bind:tap="clickContent"
       >
-        提示文字描述提示文字描述提示文字描述提示文字描述文
         <wx-view
-          class="t-notice-bar__operation t-class-operation"
-          catch:tap="clickOperation"
-        />
+          animation="{{
+            Object {
+              "actions": Array [
+                Object {
+                  "animates": Array [
+                    Object {
+                      "args": Array [
+                        -350,
+                      ],
+                      "type": "translateX",
+                    },
+                  ],
+                  "option": Object {
+                    "transformOrigin": "50% 50% 0",
+                    "transition": Object {
+                      "delay": 0,
+                      "duration": 8287.5,
+                      "timingFunction": "linear",
+                    },
+                  },
+                },
+              ],
+            }
+          }}"
+          class="t-notice-bar__content t-class-content "
+        >
+          提示文字描述提示文字描述提示文字描述提示文字描述文
+          <wx-view
+            class="t-notice-bar__operation t-class-operation"
+            catch:tap="clickOperation"
+          />
+        </wx-view>
       </wx-view>
+      <wx-view
+        class="t-notice-bar__suffix-icon"
+        bind:tap="clickSuffixIcon"
+      />
     </wx-view>
-    <wx-view
-      class="t-notice-bar__suffix-icon"
-      bind:tap="clickSuffixIcon"
-    />
-  </wx-view>
+  </t-notice-bar>
 </main>
 `;
diff --git a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
index 3288499cb..7a06bb8be 100644
--- a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,14 +2,16 @@
 
 exports[`overlay :base 1`] = `
 <main>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+  <t-overlay>
+    <wx-view
+      ariaLabel="关闭"
+      ariaRole="button"
+      class="t-overlay t-fade-enter t-fade-enter-active class"
+      style="z-index:11000;"
+      bind:tap="handleClick"
+      catch:touchmove="noop"
+      bind:transitionend="onTransitionEnd"
+    />
+  </t-overlay>
 </main>
 `;
diff --git a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index 4fa9f7066..9801b437f 100644
--- a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,144 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`picker :base 1`] = `
-<wx-view
-  ariaModal="{{true}}"
-  ariaRole="dialog"
-  class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-  style="z-index:11500;"
-  bind:transitionend="onTransitionEnd"
+<t-picker
+  data-key="yearSeasons"
+  id="yearSeasons"
+  bind:cancel="onPickerCancel"
+  bind:change="onPickerChange"
+  bind:pick="onColumnChange"
 >
-  <wx-view
-    class="t-popup__content t-class-content"
+  <t-popup
+    class="class"
+    bind:visible-change="onPopupChange"
   >
     <wx-view
-      class="t-picker t-class"
-      slot="content"
-      style=""
+      ariaModal="{{true}}"
+      ariaRole="dialog"
+      class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+      style="z-index:11500;"
+      bind:transitionend="onTransitionEnd"
     >
       <wx-view
-        class="t-picker__toolbar"
+        class="t-popup__content t-class-content"
       >
         <wx-view
-          class="t-picker__cancel t-class-cancel"
-          bind:tap="onCancel"
-        >
-          取消
-        </wx-view>
-        <wx-view
-          class="t-picker__title t-class-title"
-        >
-          
-        </wx-view>
-        <wx-view
-          class="t-picker__confirm t-class-confirm"
-          bind:tap="onConfirm"
-        >
-          确认
-        </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-picker__main"
-      >
-        <wx-view
-          class="t-picker-item__group class t-class"
+          class="t-picker t-class"
+          slot="content"
           style=""
-          bind:touchcancel="onTouchEnd"
-          bind:touchend="onTouchEnd"
-          catch:touchmove="onTouchMove"
-          bind:touchstart="onTouchStart"
         >
           <wx-view
-            class="t-picker-item__wrapper"
-            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+            class="t-picker__toolbar"
           >
             <wx-view
-              class="t-picker-item__item t-picker-item__item--active"
-              data-index="{{0}}"
+              class="t-picker__cancel t-class-cancel"
+              bind:tap="onCancel"
             >
-              
-      2021年
-    
+              取消
             </wx-view>
             <wx-view
-              class="t-picker-item__item"
-              data-index="{{1}}"
+              class="t-picker__title t-class-title"
             >
               
-      2020年
-    
             </wx-view>
             <wx-view
-              class="t-picker-item__item"
-              data-index="{{2}}"
+              class="t-picker__confirm t-class-confirm"
+              bind:tap="onConfirm"
             >
-              
-      2019年
-    
+              确认
             </wx-view>
           </wx-view>
-        </wx-view>
-        <wx-view
-          class="t-picker-item__group class t-class"
-          style=""
-          bind:touchcancel="onTouchEnd"
-          bind:touchend="onTouchEnd"
-          catch:touchmove="onTouchMove"
-          bind:touchstart="onTouchStart"
-        >
           <wx-view
-            class="t-picker-item__wrapper"
-            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+            class="t-picker__main"
           >
-            <wx-view
-              class="t-picker-item__item t-picker-item__item--active"
-              data-index="{{0}}"
-            >
-              
+            <t-picker-item>
+              <wx-view
+                class="t-picker-item__group class t-class"
+                style=""
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="t-picker-item__wrapper"
+                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+                >
+                  <wx-view
+                    class="t-picker-item__item t-picker-item__item--active"
+                    data-index="{{0}}"
+                  >
+                    
+      2021年
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{1}}"
+                  >
+                    
+      2020年
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{2}}"
+                  >
+                    
+      2019年
+    
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </t-picker-item>
+            <t-picker-item>
+              <wx-view
+                class="t-picker-item__group class t-class"
+                style=""
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="t-picker-item__wrapper"
+                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+                >
+                  <wx-view
+                    class="t-picker-item__item t-picker-item__item--active"
+                    data-index="{{0}}"
+                  >
+                    
       春
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{1}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{1}}"
+                  >
+                    
       夏
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{2}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{2}}"
+                  >
+                    
       秋
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{3}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{3}}"
+                  >
+                    
       冬
     
-            </wx-view>
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </t-picker-item>
+            <wx-view
+              class="t-picker__mask t-picker__mask--top"
+            />
+            <wx-view
+              class="t-picker__mask t-picker__mask--bottom"
+            />
+            <wx-view
+              class="t-picker__indicator"
+            />
           </wx-view>
         </wx-view>
         <wx-view
-          class="t-picker__mask t-picker__mask--top"
-        />
-        <wx-view
-          class="t-picker__mask t-picker__mask--bottom"
-        />
-        <wx-view
-          class="t-picker__indicator"
+          class="t-popup__close"
+          bind:tap="handleClose"
         />
       </wx-view>
     </wx-view>
-    <wx-view
-      class="t-popup__close"
-      bind:tap="handleClose"
-    />
-  </wx-view>
-</wx-view>
+    <t-overlay
+      class="test"
+      id="popup-overlay"
+      bind:tap="handleOverlayClick"
+    >
+      <wx-view
+        ariaLabel="关闭"
+        ariaRole="button"
+        class="t-overlay t-fade-enter t-fade-enter-active class"
+        style="z-index:11000;"
+        bind:tap="handleClick"
+        catch:touchmove="noop"
+        bind:transitionend="onTransitionEnd"
+      />
+    </t-overlay>
+  </t-popup>
+</t-picker>
 `;
diff --git a/src/rate/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/rate/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 7a5d71d60..20713c7bf 100644
--- a/src/rate/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/rate/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -237,6 +237,15 @@ exports[`Rate Rate special demo works fine 1`] = `
     >
       <t-rate
         size="30"
+        texts="{{
+          Array [
+            "非常糟糕",
+            "有些糟糕",
+            "可以尝试",
+            "可以前往",
+            "推荐前往",
+          ]
+        }}"
         value="{{4}}"
         bind:change="onChange"
       />
diff --git a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
index e48ef901d..f3abf4ef5 100644
--- a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,50 +2,58 @@
 
 exports[`search Props :base 1`] = `
 <main>
-  <wx-view
-    class="class t-search t-class"
-    style=""
+  <t-search
+    class="search"
   >
     <wx-view
-      class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
+      class="class t-search t-class"
+      style=""
     >
       <wx-view
-        ariaHidden="{{true}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style="font-size: 24px;"
-        bind:tap="onTap"
+        class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
       >
-        <wx-label
-          class="t-icon-search t-icon-base"
+        <t-icon
+          class="t-icon t-class-left"
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style="font-size: 24px;"
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-search t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+        <wx-input
+          class="t-input__keyword t-class-input"
+          confirmType="search"
+          disabled="{{false}}"
+          focus="{{false}}"
+          name="input"
+          placeholder=""
+          placeholderClass="t-search__placeholder t-search__placeholder--normal"
+          type="text"
+          value=""
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
         />
       </wx-view>
-      <wx-input
-        class="t-input__keyword t-class-input"
-        confirmType="search"
-        disabled="{{false}}"
-        focus="{{false}}"
-        name="input"
-        placeholder=""
-        placeholderClass="t-search__placeholder t-search__placeholder--normal"
-        type="text"
-        value=""
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-      />
-    </wx-view>
-    <wx-view
-      ariaRole="button"
-      class="t-search__search-action t-class-action"
-      bind:tap="onActionClick"
-    >
-      
+      <wx-view
+        ariaRole="button"
+        class="t-search__search-action t-class-action"
+        bind:tap="onActionClick"
+      >
+        
     提交
   
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </t-search>
 </main>
 `;
diff --git a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
index 90d44529c..9271cabc9 100644
--- a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,150 +2,162 @@
 
 exports[`skeleton Props :inner rowCol 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:24%;height:32rpx;margin-right:32rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:24%;height:32rpx;margin-right:32rpx"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:76%;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:76%;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:686rpx;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:686rpx;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:38rpx;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:38rpx;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:440rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:440rpx"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol2 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:343px;height:16px"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:343px;height:16px"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:14px;height:16px;margin-right:10px;margin-left:10px"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:small;height:small"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:14px;height:16px;margin-right:10px;margin-left:10px"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:small;height:small"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:220px"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:220px"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
diff --git a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
index cd20881f7..24d454a7f 100644
--- a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -12,18 +12,22 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__minus-icon"
     >
-      <wx-label
-        class="t-icon-remove t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-remove t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -46,18 +50,22 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__plus-icon"
     >
-      <wx-label
-        class="t-icon-add t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-add t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
 </wx-view>
 `;
@@ -74,18 +82,22 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__minus-icon"
     >
-      <wx-label
-        class="t-icon-remove t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-remove t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -108,18 +120,22 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__plus-icon"
     >
-      <wx-label
-        class="t-icon-add t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-add t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
 </wx-view>
 `;
diff --git a/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 44dbe96f3..fa7eeb923 100644
--- a/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/swiper/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -23,6 +23,7 @@ exports[`Swiper Swiper base demo works fine 1`] = `
     }}"
     bind:change="onChange"
     bind:click="onTap"
+    bind:image-load="onImageLoad"
   />
 </base>
 `;
diff --git a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
index 938cc604e..4f9ce97ac 100644
--- a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,26 +2,28 @@
 
 exports[`switch Props :base 1`] = `
 <main>
-  <wx-view
-    ariaChecked="{{false}}"
-    ariaDisabled="{{false}}"
-    ariaRole="switch"
-    class="class t-class t-switch"
-    style=""
-    bind:tap="handleSwitch"
-  >
+  <t-switch>
     <wx-view
-      class="t-switch__body t-switch__body--medium t-class-body"
+      ariaChecked="{{false}}"
+      ariaDisabled="{{false}}"
+      ariaRole="switch"
+      class="class t-class t-switch"
+      style=""
+      bind:tap="handleSwitch"
     >
       <wx-view
-        ariaHidden="{{true}}"
-        class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
+        class="t-switch__body t-switch__body--medium t-class-body"
       >
         <wx-view
-          class="t-switch__label t-switch__label--medium t-class-label"
-        />
+          ariaHidden="{{true}}"
+          class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
+        >
+          <wx-view
+            class="t-switch__label t-switch__label--medium t-class-label"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-switch>
 </main>
 `;
diff --git a/src/tabs/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/tabs/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 61f352ec4..9aa182bc0 100644
--- a/src/tabs/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/tabs/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -389,33 +389,34 @@ exports[`Tabs Tabs with-content demo works fine 1`] = `
   <t-tabs
     defaultValue="{{0}}"
     tClass="custom-tabs"
+    tClassContent="custom-panel"
     bind:change="onTabsChange"
     bind:click="onTabsClick"
   >
     <t-tab-panel
       label="选项一"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="0"
     >
       选项一内容
     </t-tab-panel>
     <t-tab-panel
       label="选项二"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="1"
     >
       选项二内容
     </t-tab-panel>
     <t-tab-panel
       label="选项三"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="2"
     >
       选项三内容
     </t-tab-panel>
     <t-tab-panel
       label="选项四"
-      style="display:flex;justify-content:center;align-items:center;min-height: 120px"
+      style="display:flex;justify-content:center;align-items:center;"
       value="3"
     >
       选项四内容
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5da505a7c..3e3ba44f9 100644
--- a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,51 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`textarea slots : label 1`] = `
-<wx-view
-  class="t-textarea  class t-class"
-  style=""
+<t-textarea
+  class="base"
 >
   <wx-view
-    class="t-textarea__label t-class-label"
+    class="t-textarea  class t-class"
+    style=""
   >
-    <wx-text
-      slot="label"
+    <wx-view
+      class="t-textarea__label t-class-label"
     >
-      标签文字
-    </wx-text>
-  </wx-view>
-  <wx-view
-    class="t-textarea__wrapper"
-  >
-    <wx-textarea
-      adjustPosition="{{true}}"
-      autoFocus="{{false}}"
-      autoHeight="{{false}}"
-      class="t-textarea__wrapper-inner  t-class-textarea"
-      confirmHold="{{false}}"
-      confirmType="return"
-      cursor="{{-1}}"
-      cursorSpacing="{{0}}"
-      disabled="{{false}}"
-      disableDefaultPadding="{{false}}"
-      fixed="{{false}}"
-      focus="{{false}}"
-      holdKeyboard="{{false}}"
-      maxlength="{{-1}}"
-      placeholder=""
-      placeholderClass="t-textarea__placeholder"
-      placeholderStyle=""
-      selectionEnd="{{-1}}"
-      selectionStart="{{-1}}"
-      showConfirmBar="{{true}}"
-      value=""
-      bind:blur="onBlur"
-      bind:confirm="onConfirm"
-      bind:focus="onFocus"
-      bind:input="onInput"
-      bind:keyboardheightchange="onKeyboardHeightChange"
-      bind:linechange="onLineChange"
-    />
+      <wx-text
+        slot="label"
+      >
+        标签文字
+      </wx-text>
+    </wx-view>
+    <wx-view
+      class="t-textarea__wrapper"
+    >
+      <wx-textarea
+        adjustPosition="{{true}}"
+        autoFocus="{{false}}"
+        autoHeight="{{false}}"
+        class="t-textarea__wrapper-inner  t-class-textarea"
+        confirmHold="{{false}}"
+        confirmType="return"
+        cursor="{{-1}}"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        disableDefaultPadding="{{false}}"
+        fixed="{{false}}"
+        focus="{{false}}"
+        holdKeyboard="{{false}}"
+        maxlength="{{-1}}"
+        placeholder=""
+        placeholderClass="t-textarea__placeholder"
+        placeholderStyle=""
+        selectionEnd="{{-1}}"
+        selectionStart="{{-1}}"
+        showConfirmBar="{{true}}"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:keyboardheightchange="onKeyboardHeightChange"
+        bind:linechange="onLineChange"
+      />
+    </wx-view>
   </wx-view>
-</wx-view>
+</t-textarea>
 `;

From 3639313dc52acc1a53711922c2143bd38f509ec5 Mon Sep 17 00:00:00 2001
From: favouredddd <40692560+favouredddd@users.noreply.github.com>
Date: Thu, 11 May 2023 20:26:42 +0800
Subject: [PATCH 055/202] Feat/picker-zindex (#1985)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: picker添加层级控制

* refactor: 修改popupProps的处理逻辑

* refactor: fix template error

* fix: picker compile error
---
 src/picker/picker.ts   | 2 ++
 src/picker/picker.wxml | 9 ++++++++-
 src/picker/props.ts    | 5 +++++
 src/picker/type.ts     | 8 ++++++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/picker/picker.ts b/src/picker/picker.ts
index 7d81de498..bf5cb9b80 100644
--- a/src/picker/picker.ts
+++ b/src/picker/picker.ts
@@ -41,6 +41,8 @@ export default class Picker extends SuperComponent {
     classPrefix: name,
     labelAlias: 'label',
     valueAlias: 'value',
+    defaultPopUpProps: {},
+    defaultPopUpzIndex: 11500,
   };
 
   methods = {
diff --git a/src/picker/picker.wxml b/src/picker/picker.wxml
index 86e71d8c3..bb5cf441a 100644
--- a/src/picker/picker.wxml
+++ b/src/picker/picker.wxml
@@ -1,6 +1,13 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<t-popup class="class" visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
+<t-popup
+  class="class"
+  visible="{{visible}}"
+  placement="bottom"
+  bind:visible-change="onPopupChange"
+  z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}"
+  overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"
+>
   <view slot="content" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class">
     <view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
       <view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
diff --git a/src/picker/props.ts b/src/picker/props.ts
index e7ebe97b1..935ef848f 100644
--- a/src/picker/props.ts
+++ b/src/picker/props.ts
@@ -49,6 +49,11 @@ const props: TdPickerProps = {
     type: Boolean,
     value: false,
   },
+  /** popupProps透传 */
+  popupProps: {
+    type: Object,
+    value: {},
+  },
 };
 
 export default props;
diff --git a/src/picker/type.ts b/src/picker/type.ts
index dcbbe8a67..d6cf453bc 100644
--- a/src/picker/type.ts
+++ b/src/picker/type.ts
@@ -77,6 +77,14 @@ export interface TdPickerProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * popup组件样式
+   * @default {}
+   */
+  popupProps: {
+    type: object;
+    value?: {};
+  };
 }
 
 export type PickerValue = string | number;

From 8b3bc0fd63294a483bbfdc15347df861a9f75faf Mon Sep 17 00:00:00 2001
From: jarmywang <awangjianjun9@gmail.com>
Date: Thu, 11 May 2023 22:57:20 +0800
Subject: [PATCH 056/202] fix(DropdownMenu): auto scroll to current (#1788)
 (#1981)

* fix(DropdownMenu): auto scroll to current (#1788)

* fix(DropdownMenu): resolve auto scroll wrong height (#1788)

* fix(DropdownMenu): auto multi scroll to current (#1788)
---
 src/dropdown-item/dropdown-item.less |  4 ++
 src/dropdown-item/dropdown-item.ts   |  8 +++
 src/dropdown-item/dropdown-item.wxml | 84 ++++++++++++++--------------
 3 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/dropdown-item/dropdown-item.less b/src/dropdown-item/dropdown-item.less
index 9cbf5a837..f2c7a83e9 100644
--- a/src/dropdown-item/dropdown-item.less
+++ b/src/dropdown-item/dropdown-item.less
@@ -56,6 +56,10 @@
     }
   }
 
+  &__scroll {
+    max-height: @dropdown-body-max-height;
+  }
+
   &__footer {
     display: flex;
     background: @dropdown-menu-bg-color;
diff --git a/src/dropdown-item/dropdown-item.ts b/src/dropdown-item/dropdown-item.ts
index 8b7351050..85293fd3e 100644
--- a/src/dropdown-item/dropdown-item.ts
+++ b/src/dropdown-item/dropdown-item.ts
@@ -38,6 +38,7 @@ export default class DropdownMenuItem extends SuperComponent {
     labelAlias: 'label',
     valueAlias: 'value',
     computedLabel: '',
+    firstCheckedValue: '', // 用于多选再次打开自动定位到首个选项
   };
 
   relations: RelationsOptions = {
@@ -133,6 +134,11 @@ export default class DropdownMenuItem extends SuperComponent {
 
       if (!this.data.multiple) {
         this.closeDropdown();
+      } else {
+        const firstChecked = this.data.options.find((item) => value.includes(item.value));
+        if (firstChecked) {
+          this.data.firstCheckedValue = firstChecked.value;
+        }
       }
     },
 
@@ -150,6 +156,8 @@ export default class DropdownMenuItem extends SuperComponent {
     handleConfirm() {
       this._trigger('confirm', { value: this.data.value });
       this.closeDropdown();
+      // 在关闭popup后才自动滚动到首个选项
+      this.setData({ firstCheckedValue: this.data.firstCheckedValue });
     },
 
     onLeaved() {
diff --git a/src/dropdown-item/dropdown-item.wxml b/src/dropdown-item/dropdown-item.wxml
index 69f06ef0c..2ae30e771 100644
--- a/src/dropdown-item/dropdown-item.wxml
+++ b/src/dropdown-item/dropdown-item.wxml
@@ -20,48 +20,50 @@
   >
     <view class="{{classPrefix}}__body">
       <!-- 单选列表 -->
-      <t-radio-group
-        wx:if="{{!multiple}}"
-        class="{{classPrefix}}__radio {{prefix}}-class-column"
-        t-class="{{classPrefix}}__radio-group"
-        style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
-        value="{{value}}"
-        placement="right"
-        bind:change="handleRadioChange"
-      >
-        <t-radio
-          wx:for="{{options}}"
-          wx:key="index"
-          tabindex="0"
-          icon="line"
-          class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
-          t-class="radio"
-          t-class-label="{{prefix}}-class-column-item-label"
-          value="{{item[valueAlias]}}"
-          label="{{item[labelAlias]}}"
-          disabled="{{item.disabled}}"
-        ></t-radio>
-      </t-radio-group>
+      <scroll-view wx:if="{{!multiple}}" class="{{classPrefix}}__scroll" scroll-y scroll-into-view="id_{{value}}">
+        <t-radio-group
+          class="{{classPrefix}}__radio {{prefix}}-class-column"
+          t-class="{{classPrefix}}__radio-group"
+          style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
+          value="{{value}}"
+          placement="right"
+          bind:change="handleRadioChange"
+        >
+          <view wx:for="{{options}}" wx:key="index" id="id_{{item[valueAlias]}}">
+            <t-radio
+              tabindex="0"
+              icon="line"
+              class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
+              t-class="radio"
+              t-class-label="{{prefix}}-class-column-item-label"
+              value="{{item[valueAlias]}}"
+              label="{{item[labelAlias]}}"
+              disabled="{{item.disabled}}"
+            />
+          </view>
+        </t-radio-group>
+      </scroll-view>
       <!-- 多选列表 -->
-      <t-checkbox-group
-        wx:else
-        class="{{classPrefix}}__checkbox {{prefix}}-class-column"
-        t-class="{{classPrefix}}__checkbox-group"
-        style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
-        value="{{value}}"
-        bind:change="handleRadioChange"
-      >
-        <block wx:for="{{options}}" wx:key="index">
-          <t-checkbox
-            tabindex="0"
-            class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
-            theme="tag"
-            value="{{item[valueAlias]}}"
-            label="{{item[labelAlias]}}"
-            disabled="{{item.disabled}}"
-          ></t-checkbox>
-        </block>
-      </t-checkbox-group>
+      <scroll-view wx:else class="{{classPrefix}}__scroll" scroll-y scroll-into-view="id_{{firstCheckedValue}}">
+        <t-checkbox-group
+          class="{{classPrefix}}__checkbox {{prefix}}-class-column"
+          t-class="{{classPrefix}}__checkbox-group"
+          style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
+          value="{{value}}"
+          bind:change="handleRadioChange"
+        >
+          <view wx:for="{{options}}" wx:key="index" id="id_{{item[valueAlias]}}">
+            <t-checkbox
+              tabindex="0"
+              class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
+              theme="tag"
+              value="{{item[valueAlias]}}"
+              label="{{item[labelAlias]}}"
+              disabled="{{item.disabled}}"
+            ></t-checkbox>
+          </view>
+        </t-checkbox-group>
+      </scroll-view>
 
       <slot />
     </view>

From 87bd5e6bcd111095722d6a4046928bc6e5724773 Mon Sep 17 00:00:00 2001
From: favouredddd <40692560+favouredddd@users.noreply.github.com>
Date: Fri, 12 May 2023 10:38:08 +0800
Subject: [PATCH 057/202] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81date-picker=E7=9A=84=E8=92=99=E5=B1=82=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E9=80=8F=20(#1991)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/date-time-picker/date-time-picker.wxml | 3 +--
 src/date-time-picker/props.ts              | 6 ++++++
 src/date-time-picker/type.ts               | 9 +++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/date-time-picker/date-time-picker.wxml b/src/date-time-picker/date-time-picker.wxml
index c8a4ad573..45b617794 100644
--- a/src/date-time-picker/date-time-picker.wxml
+++ b/src/date-time-picker/date-time-picker.wxml
@@ -1,5 +1,4 @@
 <wxs src="../common/utils.wxs" module="_" />
-
 <t-picker
   style="{{_._style([style, customStyle])}}"
   class="class {{prefix}}-class {{classPrefix}}"
@@ -14,9 +13,9 @@
   title="{{title}}"
   confirmBtn="{{confirmBtn || locale.confirm}}"
   cancelBtn="{{cancelBtn || locale.cancel}}"
+  popupProps="{{ popupProps }}"
 >
   <slot slot="header" name="header" />
-
   <t-picker-item
     wx:for="{{columns}}"
     wx:key="index"
diff --git a/src/date-time-picker/props.ts b/src/date-time-picker/props.ts
index bf0cbd3b9..afbe8c19a 100644
--- a/src/date-time-picker/props.ts
+++ b/src/date-time-picker/props.ts
@@ -71,6 +71,12 @@ const props: TdDateTimePickerProps = {
     type: Boolean,
     value: false,
   },
+
+  /** popupProps */
+  popupProps: {
+    type: Object,
+    value: {},
+  },
 };
 
 export default props;
diff --git a/src/date-time-picker/type.ts b/src/date-time-picker/type.ts
index 48b75d2b6..c48a99f2a 100644
--- a/src/date-time-picker/type.ts
+++ b/src/date-time-picker/type.ts
@@ -111,6 +111,15 @@ export interface TdDateTimePickerProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+
+  /**
+   * 透传给picker内部的pop组件
+   * @default {}
+   */
+  popupProps: {
+    type: Object;
+    value: {};
+  };
 }
 
 export type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;

From 27016c4e21875b9e08e011fb7ce376bdcb8e6248 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Fri, 12 May 2023 13:22:16 +0800
Subject: [PATCH 058/202] feat(Slider): the step attribute supports decimals
 (#1990)

* feat(Slider): the step attribute supports decimals

* fix(slider): resolve emit same value

---------

Co-authored-by: leejimqiu <leejimqiu@gmail.com>
---
 .../__virtualHostSnapshot__/demo.test.js.snap    |  8 ++++----
 .../__test__/__snapshots__/demo.test.js.snap     |  2 ++
 .../__virtualHostSnapshot__/demo.test.js.snap    |  2 ++
 src/slider/__test__/index.test.js                |  3 ---
 src/slider/_example/base/index.js                |  8 +++++++-
 src/slider/_example/base/index.wxml              |  2 +-
 src/slider/slider.ts                             | 16 +++++++++-------
 src/slider/tool.ts                               |  3 ---
 8 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/demo.test.js.snap
index e737bf1af..11e040c9c 100644
--- a/src/image-viewer/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -7,7 +7,7 @@ exports[`ImageViewer ImageViewer base demo works fine 1`] = `
     size="large"
     theme="primary"
     variant="outline"
-    bind:tap="clickHandle"
+    bind:tap="onClick"
   >
     基础图片预览
   </t-button>
@@ -34,12 +34,12 @@ exports[`ImageViewer ImageViewer delete demo works fine 1`] = `
     size="large"
     theme="primary"
     variant="outline"
-    bind:tap="clickHandle"
+    bind:tap="onClick"
   >
     带操作图片预览
   </t-button>
-  <t-toast
-    id="t-toast"
+  <t-action-sheet
+    id="t-action-sheet"
   />
   <t-image-viewer
     closeBtn="{{false}}"
diff --git a/src/slider/__test__/__snapshots__/demo.test.js.snap b/src/slider/__test__/__snapshots__/demo.test.js.snap
index 449b41ed5..2f708f508 100644
--- a/src/slider/__test__/__snapshots__/demo.test.js.snap
+++ b/src/slider/__test__/__snapshots__/demo.test.js.snap
@@ -4,6 +4,8 @@ exports[`Slider Slider base demo works fine 1`] = `
 <base>
   <t-slider
     defaultValue="{{23}}"
+    step="{{0.1}}"
+    bind:change="handleChange"
   />
 </base>
 `;
diff --git a/src/slider/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/slider/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 449b41ed5..2f708f508 100644
--- a/src/slider/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/slider/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -4,6 +4,8 @@ exports[`Slider Slider base demo works fine 1`] = `
 <base>
   <t-slider
     defaultValue="{{23}}"
+    step="{{0.1}}"
+    bind:change="handleChange"
   />
 </base>
 `;
diff --git a/src/slider/__test__/index.test.js b/src/slider/__test__/index.test.js
index b322fd03d..a50e1c958 100644
--- a/src/slider/__test__/index.test.js
+++ b/src/slider/__test__/index.test.js
@@ -239,8 +239,5 @@ describe('slider', () => {
 
     comp.setData({ value: 101 });
     expect($slider.instance.data._value).toBe(100);
-
-    comp.setData({ value: 'undefined' });
-    expect($slider.instance.data._value).toBe(0);
   });
 });
diff --git a/src/slider/_example/base/index.js b/src/slider/_example/base/index.js
index b79c5124b..3c5898b61 100644
--- a/src/slider/_example/base/index.js
+++ b/src/slider/_example/base/index.js
@@ -1 +1,7 @@
-Component({});
+Component({
+  methods: {
+    handleChange(e) {
+      console.log(e.detail.value);
+    },
+  },
+});
diff --git a/src/slider/_example/base/index.wxml b/src/slider/_example/base/index.wxml
index 69739144c..b2530f9d4 100644
--- a/src/slider/_example/base/index.wxml
+++ b/src/slider/_example/base/index.wxml
@@ -1 +1 @@
-<t-slider default-value="{{23}}" />
+<t-slider default-value="{{23}}" step="{{0.1}}" bind:change="handleChange" />
diff --git a/src/slider/slider.ts b/src/slider/slider.ts
index 1d831ac0f..1a7285053 100644
--- a/src/slider/slider.ts
+++ b/src/slider/slider.ts
@@ -121,6 +121,8 @@ export default class Slider extends SuperComponent {
   };
 
   triggerValue(value?: SliderValue) {
+    if (this.preval === value) return;
+    this.preval = value;
     this._trigger('change', {
       value: trimValue(value, this.properties),
     });
@@ -212,11 +214,12 @@ export default class Slider extends SuperComponent {
 
   stepValue(value: number): number {
     const { step, min, max } = this.properties;
-
-    if (Number(step) < 1 || Number(step) > Number(max) - Number(min)) return value;
-
-    const closestStep = trimSingleValue(Math.round(value / Number(step)) * Number(step), Number(min), Number(max));
-
+    const decimal = String(step).indexOf('.') > -1 ? String(step).length - String(step).indexOf('.') - 1 : 0;
+    const closestStep = trimSingleValue(
+      Number((Math.round(value / Number(step)) * Number(step)).toFixed(decimal)),
+      Number(min),
+      Number(max),
+    );
     return closestStep as number;
   }
 
@@ -236,13 +239,12 @@ export default class Slider extends SuperComponent {
     const { pageX } = touch;
     const currentLeft = pageX - initialLeft;
     let value = 0;
-
     if (currentLeft <= 0) {
       value = Number(min);
     } else if (currentLeft >= maxRange) {
       value = Number(max);
     } else {
-      value = Math.round((currentLeft / maxRange) * (Number(max) - Number(min)) + Number(min));
+      value = (currentLeft / maxRange) * (Number(max) - Number(min)) + Number(min);
     }
     return this.stepValue(value);
   }
diff --git a/src/slider/tool.ts b/src/slider/tool.ts
index a75768f0c..d15e5c0ee 100644
--- a/src/slider/tool.ts
+++ b/src/slider/tool.ts
@@ -13,9 +13,6 @@
  * @return {number}
  */
 export const trimSingleValue = (value: any, min: number, max: number): number => {
-  if (typeof value !== 'number') {
-    return min;
-  }
   if (value < min) {
     return min;
   }

From 112934bb200f46e9b332f96e212ea642429e07ac Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Fri, 12 May 2023 13:24:39 +0800
Subject: [PATCH 059/202] chore: publish v1.1.5-beta

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f4ff76f7a..3eaffa54c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.5",
+  "version": "1.1.5-beta",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 68d51a0b70550d7f8db5e38703c2344378ad85e2 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 15 May 2023 11:10:18 +0800
Subject: [PATCH 060/202] fix(pulldown-refresh): resolve refresh event

---
 src/pull-down-refresh/_example/base/index.js | 1 +
 src/pull-down-refresh/pull-down-refresh.ts   | 5 ++---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pull-down-refresh/_example/base/index.js b/src/pull-down-refresh/_example/base/index.js
index db65059d2..bd5d0fc03 100644
--- a/src/pull-down-refresh/_example/base/index.js
+++ b/src/pull-down-refresh/_example/base/index.js
@@ -17,6 +17,7 @@ Component({
 
   methods: {
     onPullDownRefresh() {
+      this.setData({ enable: true });
       setTimeout(() => {
         this.setData({ enable: false });
       }, 1500);
diff --git a/src/pull-down-refresh/pull-down-refresh.ts b/src/pull-down-refresh/pull-down-refresh.ts
index e8ba9e44c..0f187b747 100644
--- a/src/pull-down-refresh/pull-down-refresh.ts
+++ b/src/pull-down-refresh/pull-down-refresh.ts
@@ -157,7 +157,8 @@ export default class PullDownRefresh extends SuperComponent {
 
       // 松开时高度超过阈值则触发刷新
       if (barHeight > this.loadingBarHeight) {
-        this.doRefresh();
+        this.triggerEvent('change', { value: true });
+        this.triggerEvent('refresh');
       } else {
         this.close();
       }
@@ -169,8 +170,6 @@ export default class PullDownRefresh extends SuperComponent {
         refreshStatus: 2,
       });
 
-      this.triggerEvent('change', { value: true });
-      this.triggerEvent('refresh');
       this.maxRefreshAnimateTimeFlag = setTimeout(() => {
         this.maxRefreshAnimateTimeFlag = null;
 

From a3a89c5a932bad48c1aaf62a1a3b3b7d97535ba4 Mon Sep 17 00:00:00 2001
From: jurrychen <534747442@qq.com>
Date: Mon, 15 May 2023 15:04:21 +0800
Subject: [PATCH 061/202] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dvariant?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E4=BF=AE=E6=94=B9=E6=97=A0=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/button/button.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/button/button.ts b/src/button/button.ts
index c678b0fc5..c7c5c9a7e 100644
--- a/src/button/button.ts
+++ b/src/button/button.ts
@@ -28,7 +28,7 @@ export default class Button extends SuperComponent {
   };
 
   observers = {
-    'theme, size, plain, block, shape, disabled, loading'() {
+    'theme, size, plain, block, shape, disabled, loading, variant'() {
       this.setClass();
     },
 

From eac3b782f60353d8958190248d64a19e3b8a3e5e Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Mon, 15 May 2023 16:57:09 +0800
Subject: [PATCH 062/202] feat(Grid): enrich demo (#1993)

---
 src/grid/README.md                             |  7 +++++++
 .../__test__/__snapshots__/demo.test.js.snap   | 18 ++++++++++++++++--
 .../__virtualHostSnapshot__/demo.test.js.snap  | 18 ++++++++++++++++--
 src/grid/_example/grid.ts                      |  6 +++++-
 src/grid/_example/icon-grid/index.js           |  8 +++++++-
 src/grid/_example/icon-grid/index.json         |  3 ++-
 src/grid/_example/icon-grid/index.wxml         | 12 ++++++++----
 src/grid/_example/icon-grid/index.wxss         | 14 +++++++++++++-
 8 files changed, 74 insertions(+), 12 deletions(-)

diff --git a/src/grid/README.md b/src/grid/README.md
index 355a0ebf1..d9323098e 100644
--- a/src/grid/README.md
+++ b/src/grid/README.md
@@ -82,3 +82,10 @@ jump-type | String | navigate-to | 链接跳转类型。可选项：redirect-to/
 layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
 text | String / Slot | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点 | N
 url | String | - | 点击后的跳转链接 | N
+
+### GridItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击子项后触发
+
diff --git a/src/grid/__test__/__snapshots__/demo.test.js.snap b/src/grid/__test__/__snapshots__/demo.test.js.snap
index 320807661..57096a980 100644
--- a/src/grid/__test__/__snapshots__/demo.test.js.snap
+++ b/src/grid/__test__/__snapshots__/demo.test.js.snap
@@ -266,20 +266,34 @@ exports[`Grid Grid icon-grid demo works fine 1`] = `
     class="block"
   >
     <t-grid-item
-      icon="share"
+      image="slot"
       text="分享"
-    />
+    >
+      <wx-view
+        class="grid-item__image"
+        slot="image"
+      >
+        <t-button
+          icon="share"
+          openType="share"
+          variant="text"
+        />
+      </wx-view>
+    </t-grid-item>
     <t-grid-item
       icon="star"
       text="收藏"
+      bind:click="onClick"
     />
     <t-grid-item
       icon="download"
       text="保存"
+      bind:click="onClick"
     />
     <t-grid-item
       icon="edit-1"
       text="编辑"
+      bind:click="onClick"
     />
   </t-grid>
 </icon-grid>
diff --git a/src/grid/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/grid/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 320807661..57096a980 100644
--- a/src/grid/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/grid/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -266,20 +266,34 @@ exports[`Grid Grid icon-grid demo works fine 1`] = `
     class="block"
   >
     <t-grid-item
-      icon="share"
+      image="slot"
       text="分享"
-    />
+    >
+      <wx-view
+        class="grid-item__image"
+        slot="image"
+      >
+        <t-button
+          icon="share"
+          openType="share"
+          variant="text"
+        />
+      </wx-view>
+    </t-grid-item>
     <t-grid-item
       icon="star"
       text="收藏"
+      bind:click="onClick"
     />
     <t-grid-item
       icon="download"
       text="保存"
+      bind:click="onClick"
     />
     <t-grid-item
       icon="edit-1"
       text="编辑"
+      bind:click="onClick"
     />
   </t-grid>
 </icon-grid>
diff --git a/src/grid/_example/grid.ts b/src/grid/_example/grid.ts
index 560d44d43..d8534479b 100644
--- a/src/grid/_example/grid.ts
+++ b/src/grid/_example/grid.ts
@@ -1 +1,5 @@
-Page({});
+Page({
+  onShareAppMessage() {
+    console.log('onShareAppMessage');
+  },
+});
diff --git a/src/grid/_example/icon-grid/index.js b/src/grid/_example/icon-grid/index.js
index b79c5124b..75292481c 100644
--- a/src/grid/_example/icon-grid/index.js
+++ b/src/grid/_example/icon-grid/index.js
@@ -1 +1,7 @@
-Component({});
+Component({
+  methods: {
+    onClick() {
+      console.log('click grid-item');
+    },
+  },
+});
diff --git a/src/grid/_example/icon-grid/index.json b/src/grid/_example/icon-grid/index.json
index 56ec2f980..b836f6768 100644
--- a/src/grid/_example/icon-grid/index.json
+++ b/src/grid/_example/icon-grid/index.json
@@ -2,6 +2,7 @@
   "component": true,
   "usingComponents": {
     "t-grid": "tdesign-miniprogram/grid/grid",
-    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item"
+    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item",
+    "t-button": "tdesign-miniprogram/button/button"
   }
 }
diff --git a/src/grid/_example/icon-grid/index.wxml b/src/grid/_example/icon-grid/index.wxml
index 9fa82e587..706efce35 100644
--- a/src/grid/_example/icon-grid/index.wxml
+++ b/src/grid/_example/icon-grid/index.wxml
@@ -1,6 +1,10 @@
 <t-grid class="block">
-  <t-grid-item text="分享" icon="share" />
-  <t-grid-item text="收藏" icon="star" />
-  <t-grid-item text="保存" icon="download" />
-  <t-grid-item text="编辑" icon="edit-1" />
+  <t-grid-item text="分享" image="slot">
+    <view slot="image" class="grid-item__image">
+      <t-button variant="text" icon="share" open-type="share"></t-button>
+    </view>
+  </t-grid-item>
+  <t-grid-item text="收藏" icon="star" bindclick="onClick" />
+  <t-grid-item text="保存" icon="download" bindclick="onClick" />
+  <t-grid-item text="编辑" icon="edit-1" bindclick="onClick" />
 </t-grid>
diff --git a/src/grid/_example/icon-grid/index.wxss b/src/grid/_example/icon-grid/index.wxss
index 1a8755361..38fb8733d 100644
--- a/src/grid/_example/icon-grid/index.wxss
+++ b/src/grid/_example/icon-grid/index.wxss
@@ -1,4 +1,16 @@
 .block {
   display: block;
   margin-bottom: 32rpx;
-}
\ No newline at end of file
+}
+
+.grid-item__image {
+  --td-button-medium-icon-font-size: 48rpx;
+
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #f3f3f3;
+  border-radius: 12rpx;
+}

From 9fb1d708341f299b7f03534928fa4de4130c49cd Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Mon, 15 May 2023 16:57:37 +0800
Subject: [PATCH 063/202] feat(Input): resolve label content wraps (#1994)

---
 src/input/input.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/input/input.less b/src/input/input.less
index 287b4ea4e..5e89acbce 100644
--- a/src/input/input.less
+++ b/src/input/input.less
@@ -61,6 +61,8 @@
     line-height: 48rpx;
     color: @input-label-text-color;
     margin-right: @spacer-2;
+    word-wrap: break-word;
+
     .@{prefix}-input--layout-vertical & {
       font-size: @font-size-base;
       padding-bottom: 8rpx;

From 657a6b8a967645b44473c99fa74ebdb934d46217 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Mon, 15 May 2023 16:58:05 +0800
Subject: [PATCH 064/202] docs(Steps): remove invalid attributes (#1995)

---
 src/steps/README.en-US.md | 1 -
 src/steps/README.md       | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/steps/README.en-US.md b/src/steps/README.en-US.md
index 6d396fe5d..9aca57016 100644
--- a/src/steps/README.en-US.md
+++ b/src/steps/README.en-US.md
@@ -11,7 +11,6 @@ current-status | String | process | options：default/process/finish/error | N
 external-classes | Array | - | `['t-class']` | N
 layout | String | horizontal | options：horizontal/vertical | N
 readonly | Boolean | false | \- | N
-separator | String | line | options：line/dashed/arrow | N
 sequence | String | positive | options：positive/reverse | N
 theme | String | default | options：default/dot | N
 
diff --git a/src/steps/README.md b/src/steps/README.md
index 98808cb8f..e3ae6ba60 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -65,7 +65,6 @@ current-status | String | process | 用于控制 current 指向的步骤条的
 external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class']` | N
 layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
 readonly | Boolean | false | 只读状态 | N
-separator | String | line | 步骤条分割符。可选项：line/dashed/arrow | N
 sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
 theme | String | default | 步骤条风格。可选项：default/dot | N
 

From e15895ec5bcbcecc93e4e70cc29ae489eabf9c74 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 15 May 2023 17:13:36 +0800
Subject: [PATCH 065/202] fix(pulldown-refresh): resolve refresh event (#1998)

* fix(pulldown-refresh): resolve refresh event

* fix(pulldown-refresh): resolve change event
---
 .../__test__/__snapshots__/demo.test.js.snap  |  2 +-
 src/pull-down-refresh/__test__/index.test.js  | 10 ++++-----
 src/pull-down-refresh/_example/base/index.js  |  8 +------
 .../_example/base/index.wxml                  |  2 +-
 .../_example/base/index.wxss                  |  1 +
 src/pull-down-refresh/pull-down-refresh.ts    | 22 +++++--------------
 src/pull-down-refresh/pull-down-refresh.wxml  |  2 +-
 7 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap
index 82fb2de61..19847702b 100644
--- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap
+++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap
@@ -17,7 +17,7 @@ exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = `
       ]
     }}"
     value="{{false}}"
-    bind:refresh="onPullDownRefresh"
+    bind:refresh="onRefresh"
     bind:scroll="onScroll"
   >
     <wx-view
diff --git a/src/pull-down-refresh/__test__/index.test.js b/src/pull-down-refresh/__test__/index.test.js
index acee86c8c..8bfcdc9de 100644
--- a/src/pull-down-refresh/__test__/index.test.js
+++ b/src/pull-down-refresh/__test__/index.test.js
@@ -79,7 +79,7 @@ describe('pull-down-refresh', () => {
           bind:refresh="handleRefresh"
           bind:timeout ="handleTimeout"
           bind:change="handleChange"
-        ></t-pull-down-refresh>`,
+        />`,
         usingComponents: {
           't-pull-down-refresh': pullDownRefresh,
         },
@@ -128,9 +128,9 @@ describe('pull-down-refresh', () => {
       };
       move1();
       await simulate.sleep(300);
-      expect(handleChange).toHaveBeenCalledTimes(2);
+      expect(handleChange).toHaveBeenCalledTimes(1);
       expect(handleRefresh).toHaveBeenCalledTimes(1);
-      expect(handleTimeout).toHaveBeenCalledTimes(1);
+      expect(handleTimeout).toHaveBeenCalledTimes(0);
 
       comp.setData({
         maxBarHeight: 10,
@@ -149,7 +149,7 @@ describe('pull-down-refresh', () => {
       };
       move2();
       await simulate.sleep(300);
-      expect(handleChange).toHaveBeenCalledTimes(4);
+      expect(handleChange).toHaveBeenCalledTimes(1);
 
       const move3 = () => {
         $scrollView.dispatchEvent('touchstart');
@@ -166,7 +166,7 @@ describe('pull-down-refresh', () => {
       };
       move4();
       await simulate.sleep(300);
-      expect(handleChange).toHaveBeenCalledTimes(5);
+      expect(handleChange).toHaveBeenCalledTimes(1);
 
       comp.detach();
     });
diff --git a/src/pull-down-refresh/_example/base/index.js b/src/pull-down-refresh/_example/base/index.js
index bd5d0fc03..0ce5eab67 100644
--- a/src/pull-down-refresh/_example/base/index.js
+++ b/src/pull-down-refresh/_example/base/index.js
@@ -9,14 +9,8 @@ Component({
     backTopVisible: false,
   },
 
-  ready() {
-    setTimeout(() => {
-      this.setData({ enable: true });
-    }, 1000);
-  },
-
   methods: {
-    onPullDownRefresh() {
+    onRefresh() {
       this.setData({ enable: true });
       setTimeout(() => {
         this.setData({ enable: false });
diff --git a/src/pull-down-refresh/_example/base/index.wxml b/src/pull-down-refresh/_example/base/index.wxml
index 14d6ba6d0..8f0f38f2e 100644
--- a/src/pull-down-refresh/_example/base/index.wxml
+++ b/src/pull-down-refresh/_example/base/index.wxml
@@ -2,7 +2,7 @@
   value="{{enable}}"
   loadingProps="{{loadingProps}}"
   loadingTexts="{{['下拉刷新', '松手刷新', '正在刷新', '刷新完成']}}"
-  bind:refresh="onPullDownRefresh"
+  bind:refresh="onRefresh"
   bind:scroll="onScroll"
 >
   <!-- 包裹页面全部内容 -->
diff --git a/src/pull-down-refresh/_example/base/index.wxss b/src/pull-down-refresh/_example/base/index.wxss
index 91aa2fff8..a01f6b765 100644
--- a/src/pull-down-refresh/_example/base/index.wxss
+++ b/src/pull-down-refresh/_example/base/index.wxss
@@ -1,5 +1,6 @@
 .demo {
   padding-bottom: 56rpx;
+  overflow: hidden;
 }
 
 .demo-title {
diff --git a/src/pull-down-refresh/pull-down-refresh.ts b/src/pull-down-refresh/pull-down-refresh.ts
index 0f187b747..220690362 100644
--- a/src/pull-down-refresh/pull-down-refresh.ts
+++ b/src/pull-down-refresh/pull-down-refresh.ts
@@ -94,7 +94,7 @@ export default class PullDownRefresh extends SuperComponent {
             refreshStatus: 3,
           });
         }
-        this.close();
+        this.setData({ barHeight: 0 });
       } else {
         this.doRefresh();
       }
@@ -152,15 +152,16 @@ export default class PullDownRefresh extends SuperComponent {
 
       const barHeight = pageY - this.startPoint.pageY;
       this.startPoint = null; // 清掉起点，之后将忽略touchMove、touchEnd事件
+      this.isPulling = false;
 
       this.setData({ loosing: true });
 
       // 松开时高度超过阈值则触发刷新
       if (barHeight > this.loadingBarHeight) {
-        this.triggerEvent('change', { value: true });
+        this._trigger('change', { value: true });
         this.triggerEvent('refresh');
       } else {
-        this.close();
+        this.setData({ barHeight: 0 });
       }
     },
 
@@ -168,6 +169,7 @@ export default class PullDownRefresh extends SuperComponent {
       this.setData({
         barHeight: this.loadingBarHeight,
         refreshStatus: 2,
+        loosing: true,
       });
 
       this.maxRefreshAnimateTimeFlag = setTimeout(() => {
@@ -176,7 +178,7 @@ export default class PullDownRefresh extends SuperComponent {
         if (this.data.refreshStatus === 2) {
           // 超时回调
           this.triggerEvent('timeout');
-          this.close(); // 超时仍未被回调，则直接结束下拉
+          this._trigger('change', { value: false });
         }
       }, this.properties.refreshTimeout as any) as any as number;
     },
@@ -195,18 +197,6 @@ export default class PullDownRefresh extends SuperComponent {
       });
     },
 
-    close() {
-      const animationDuration = 240;
-
-      this.setData({ barHeight: 0 });
-      this.triggerEvent('change', { value: false });
-      this.closingAnimateTimeFlag = setTimeout(() => {
-        this.closingAnimateTimeFlag = null;
-        this.setData({ refreshStatus: -1 });
-        this.isPulling = false; // 退出下拉状态
-      }, animationDuration) as any as number;
-    },
-
     setScrollTop(scrollTop: number) {
       this.setData({ scrollTop });
     },
diff --git a/src/pull-down-refresh/pull-down-refresh.wxml b/src/pull-down-refresh/pull-down-refresh.wxml
index 0c0e4aaa9..afa3a87c5 100644
--- a/src/pull-down-refresh/pull-down-refresh.wxml
+++ b/src/pull-down-refresh/pull-down-refresh.wxml
@@ -22,7 +22,7 @@
 >
   <view
     class="{{classPrefix}}__track {{classPrefix + '__track--' + (loosing ? 'loosing' : '')}}"
-    style="{{barHeight > 0 ? 'transform: translate3d(0, ' + barHeight + 'rpx, 0);' : ''}}"
+    style="{{barHeight > 0 ? 'transform: translate3d(0, ' + barHeight + 'px, 0);' : ''}}"
   >
     <view class="{{classPrefix}}__tips" style="height: {{computedLoadingBarHeight}}px" aria-live="polite">
       <t-loading

From 06cacd259c0ea4187324c46f0f0172d1f485b59f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=9C=E5=AD=9C?= <1183048003@qq.com>
Date: Mon, 15 May 2023 17:17:53 +0800
Subject: [PATCH 066/202] =?UTF-8?q?fix:=20fix=20[=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95]=20=E5=8D=95=E9=80=89=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E8=A1=8C=E9=AB=98=E4=B8=8D=E4=B8=80=E8=87=B4=20#1980=20(#1992)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.test.js.snap                        |   50 +-
 .../index.test.js.snap                        | 1428 ++++++++---------
 .../index.test.js.snap                        |   80 +-
 .../index.test.js.snap                        |  260 ++-
 .../index.test.js.snap                        |   64 +-
 .../index.test.js.snap                        |  706 ++++----
 .../index.test.js.snap                        |   74 +-
 .../index.test.js.snap                        |   18 +-
 src/dropdown-item/dropdown-item.less          |    7 +
 .../index.test.js.snap                        |   16 +-
 .../index.test.js.snap                        |  255 +--
 .../index.test.js.snap                        |  103 +-
 .../index.test.js.snap                        |  332 ++--
 .../index.test.js.snap                        |  142 +-
 .../index.test.js.snap                        |  210 ++-
 .../index.test.js.snap                        |  116 +-
 .../index.test.js.snap                        |   20 +-
 .../index.test.js.snap                        |  236 ++-
 .../index.test.js.snap                        |   78 +-
 .../index.test.js.snap                        |  216 ++-
 .../index.test.js.snap                        |  104 +-
 .../index.test.js.snap                        |   30 +-
 .../index.test.js.snap                        |   88 +-
 23 files changed, 2135 insertions(+), 2498 deletions(-)

diff --git a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
index c292c83f6..5cd6176dc 100644
--- a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,45 +2,35 @@
 
 exports[`Avatar & Avatar Groups Avatar Props : style && customStyle 1`] = `
 <main>
-  <main
-    class="avatar"
+  <wx-view
+    class="t-avatar__wrapper class t-class"
+    style="color: red; font-size: 9px;"
   >
     <wx-view
-      class="t-avatar__wrapper class t-class"
-      style="color: red; font-size: 9px;"
+      ariaDescribedby="t_badge_0_description"
+      ariaLabelledby="t_badge_0_label"
+      ariaRole="option"
+      class="t-badge  class t-class"
+      style=""
     >
-      <t-badge
-        tClass=""
-        tClassContent=""
-        tClassCount=""
+      <wx-view
+        ariaHidden="true"
+        class="t-badge__content t-class-content"
+        id="t_badge_0_label"
       >
         <wx-view
-          ariaDescribedby="t_badge_0_description"
-          ariaLabelledby="t_badge_0_label"
-          ariaRole="option"
-          class="t-badge  class t-class"
+          ariaHidden="{{false}}"
+          ariaLabel="头像"
+          ariaRole="img"
+          class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
           style=""
         >
           <wx-view
-            ariaHidden="true"
-            class="t-badge__content t-class-content"
-            id="t_badge_0_label"
-          >
-            <wx-view
-              ariaHidden="{{false}}"
-              ariaLabel="头像"
-              ariaRole="img"
-              class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
-              style=""
-            >
-              <wx-view
-                class="t-avatar__text t-class-content"
-              />
-            </wx-view>
-          </wx-view>
+            class="t-avatar__text t-class-content"
+          />
         </wx-view>
-      </t-badge>
+      </wx-view>
     </wx-view>
-  </main>
+  </wx-view>
 </main>
 `;
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 7b7a84a67..5e9f6aaf6 100644
--- a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,809 +2,777 @@
 
 exports[`calendar :base 1`] = `
 <main>
-  <t-calendar>
-    <t-popup
-      class="class"
-      bind:visible-change="onVisibleChange"
+  <wx-view
+    ariaModal="{{true}}"
+    ariaRole="dialog"
+    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+    style="z-index:11500;"
+    bind:transitionend="onTransitionEnd"
+  >
+    <wx-view
+      class="t-popup__content t-class-content"
     >
       <wx-view
-        ariaModal="{{true}}"
-        ariaRole="dialog"
-        class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-        style="z-index:11500;"
-        bind:transitionend="onTransitionEnd"
+        class="t-calendar t-calendar--popup class t-class"
+        style=""
       >
         <wx-view
-          class="t-popup__content t-class-content"
+          class="t-calendar__title"
+          tabindex="0"
+        >
+          <wx-text>
+            请选择日期
+          </wx-text>
+        </wx-view>
+        <wx-view
+          ariaHidden="{{false}}"
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-icon class t-class"
+          style="font-size: 24px;"
+          bind:tap="onTap"
+        >
+          <wx-label
+            class="t-icon-close t-icon-base"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          class="t-calendar__days"
         >
           <wx-view
-            class="t-calendar t-calendar--popup class t-class"
-            style=""
+            class="t-calendar__days-item"
+          >
+            日
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            一
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            二
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            三
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            四
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            五
+          </wx-view>
+          <wx-view
+            class="t-calendar__days-item"
+          >
+            六
+          </wx-view>
+        </wx-view>
+        <wx-scroll-view
+          class="t-calendar__months"
+          enhanced="{{true}}"
+          scrollIntoView="year_2022_month_9"
+          scrollY="{{true}}"
+          showScrollbar="{{false}}"
+        >
+          <wx-view
+            class="t-calendar__month"
+            id="year_2022_month_9"
+          >
+            2022 年 10 月
+          </wx-view>
+          <wx-view
+            class="t-calendar__dates"
           >
+            <wx-view />
+            <wx-view />
+            <wx-view />
+            <wx-view />
+            <wx-view />
+            <wx-view />
             <wx-view
-              class="t-calendar__title"
-              tabindex="0"
-            >
-              <wx-text>
-                请选择日期
-              </wx-text>
-            </wx-view>
-            <t-icon
-              class="t-calendar__close-btn"
-              bind:tap="handleClose"
-            >
-              <wx-view
-                ariaHidden="{{false}}"
-                ariaLabel="关闭"
-                ariaRole="button"
-                class="t-icon class t-class"
-                style="font-size: 24px;"
-                bind:tap="onTap"
-              >
-                <wx-label
-                  class="t-icon-close t-icon-base"
-                />
-              </wx-view>
-            </t-icon>
-            <wx-view
-              ariaHidden="{{true}}"
-              class="t-calendar__days"
-            >
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                日
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                一
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                二
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                三
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                四
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                五
-              </wx-view>
-              <wx-view
-                class="t-calendar__days-item"
-              >
-                六
-              </wx-view>
-            </wx-view>
-            <wx-scroll-view
-              class="t-calendar__months"
-              enhanced="{{true}}"
-              scrollIntoView="year_2022_month_9"
-              scrollY="{{true}}"
-              showScrollbar="{{false}}"
-            >
-              <wx-view
-                class="t-calendar__month"
-                id="year_2022_month_9"
-              >
-                2022 年 10 月
-              </wx-view>
-              <wx-view
-                class="t-calendar__dates"
-              >
-                <wx-view />
-                <wx-view />
-                <wx-view />
-                <wx-view />
-                <wx-view />
-                <wx-view />
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月1日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 1,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+              ariaDisabled="{{false}}"
+              ariaLabel="10月1日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 1,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             1
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月2日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 2,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月2日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 2,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             2
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月3日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 3,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月3日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 3,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             3
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月4日, 星期二"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 4,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月4日, 星期二"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 4,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             4
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月5日, 星期三"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 5,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月5日, 星期三"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 5,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             5
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月6日, 星期四"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 6,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月6日, 星期四"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 6,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             6
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月7日, 星期五"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 7,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月7日, 星期五"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 7,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             7
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月8日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 8,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月8日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 8,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             8
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月9日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 9,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月9日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 9,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             9
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月10日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 10,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月10日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 10,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             10
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月11日, 星期二"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 11,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月11日, 星期二"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 11,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             11
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月12日, 星期三"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 12,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月12日, 星期三"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 12,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             12
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月13日, 星期四"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 13,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月13日, 星期四"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 13,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             13
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月14日, 星期五"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 14,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月14日, 星期五"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 14,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             14
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月15日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 15,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月15日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 15,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             15
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="已选中, 10月16日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--selected"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 16,
-                      "type": "selected",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="已选中, 10月16日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--selected"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 16,
+                  "type": "selected",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             16
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月17日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 17,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月17日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 17,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             17
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月18日, 星期二"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 18,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月18日, 星期二"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 18,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             18
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月19日, 星期三"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 19,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月19日, 星期三"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 19,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             19
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月20日, 星期四"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 20,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月20日, 星期四"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 20,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             20
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月21日, 星期五"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 21,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月21日, 星期五"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 21,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             21
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月22日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 22,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月22日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 22,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             22
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月23日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 23,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月23日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 23,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             23
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月24日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 24,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月24日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 24,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             24
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月25日, 星期二"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 25,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月25日, 星期二"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 25,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             25
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月26日, 星期三"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 26,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月26日, 星期三"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 26,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             26
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月27日, 星期四"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 27,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月27日, 星期四"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 27,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             27
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月28日, 星期五"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 28,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月28日, 星期五"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 28,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             28
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月29日, 星期六"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 29,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月29日, 星期六"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 29,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             29
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月30日, 星期日"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 30,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月30日, 星期日"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 30,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             30
             
-                </wx-view>
-                <wx-view
-                  ariaDisabled="{{false}}"
-                  ariaLabel="10月31日, 星期一"
-                  ariaRole="button"
-                  class="t-calendar__dates-item  t-calendar__dates-item--"
-                  data-date="{{
-                    Object {
-                      "date": Object {},
-                      "day": 31,
-                      "type": "",
-                    }
-                  }}"
-                  data-month="{{9}}"
-                  data-year="{{2022}}"
-                  bind:tap="handleSelect"
-                >
-                  
+            </wx-view>
+            <wx-view
+              ariaDisabled="{{false}}"
+              ariaLabel="10月31日, 星期一"
+              ariaRole="button"
+              class="t-calendar__dates-item  t-calendar__dates-item--"
+              data-date="{{
+                Object {
+                  "date": Object {},
+                  "day": 31,
+                  "type": "",
+                }
+              }}"
+              data-month="{{9}}"
+              data-year="{{2022}}"
+              bind:tap="handleSelect"
+            >
+              
             31
             
-                </wx-view>
-              </wx-view>
-            </wx-scroll-view>
-            <wx-view
-              class="t-calendar__footer"
-            >
-              <t-button
-                class="t-calendar__confirm-btn"
-                data-extra=""
-                data-type=""
-                tClass=""
-                bind:contact="onTplButtonTap"
-                bind:error="onTplButtonTap"
-                bind:getphonenumber="onTplButtonTap"
-                bind:getuserinfo="onTplButtonTap"
-                bind:launchapp="onTplButtonTap"
-                bind:opensetting="onTplButtonTap"
-                bind:tap="onTplButtonTap"
-              >
-                <wx-button
-                  appParameter=""
-                  ariaLabel=""
-                  class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
-                  data-custom="{{null}}"
-                  formType=""
-                  hoverClass="t-button--hover"
-                  hoverStartTime="{{20}}"
-                  hoverStayTime="{{70}}"
-                  hoverStopPropagation="{{false}}"
-                  lang="en"
-                  openType=""
-                  sendMessageImg=""
-                  sendMessagePath=""
-                  sendMessageTitle=""
-                  sessionFrom=""
-                  showMessageCard="{{false}}"
-                  style=""
-                  bind:chooseavatar="chooseavatar"
-                  bind:contact="contact"
-                  bind:error="error"
-                  bind:getphonenumber="getphonenumber"
-                  bind:getuserinfo="getuserinfo"
-                  bind:launchapp="launchapp"
-                  bind:opensetting="opensetting"
-                  catch:tap="handleTap"
-                >
-                  <wx-view
-                    class="t-button__content"
-                  >
-                    
-                    确定
-                  </wx-view>
-                </wx-button>
-              </t-button>
             </wx-view>
           </wx-view>
-          <wx-view
-            class="t-popup__close"
-            bind:tap="handleClose"
-          />
+        </wx-scroll-view>
+        <wx-view
+          class="t-calendar__footer"
+        >
+          <wx-button
+            appParameter=""
+            ariaLabel=""
+            class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
+            data-custom="{{null}}"
+            formType=""
+            hoverClass="t-button--hover"
+            hoverStartTime="{{20}}"
+            hoverStayTime="{{70}}"
+            hoverStopPropagation="{{false}}"
+            lang="en"
+            openType=""
+            sendMessageImg=""
+            sendMessagePath=""
+            sendMessageTitle=""
+            sessionFrom=""
+            showMessageCard="{{false}}"
+            style=""
+            bind:chooseavatar="chooseavatar"
+            bind:contact="contact"
+            bind:error="error"
+            bind:getphonenumber="getphonenumber"
+            bind:getuserinfo="getuserinfo"
+            bind:launchapp="launchapp"
+            bind:opensetting="opensetting"
+            catch:tap="handleTap"
+          >
+            <wx-view
+              class="t-button__content"
+            >
+              
+              确定
+            </wx-view>
+          </wx-button>
         </wx-view>
       </wx-view>
-      <t-overlay
-        class="test"
-        id="popup-overlay"
-        bind:tap="handleOverlayClick"
-      >
-        <wx-view
-          ariaLabel="关闭"
-          ariaRole="button"
-          class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="z-index:11000;"
-          bind:tap="handleClick"
-          catch:touchmove="noop"
-          bind:transitionend="onTransitionEnd"
-        />
-      </t-overlay>
-    </t-popup>
-  </t-calendar>
+      <wx-view
+        class="t-popup__close"
+        bind:tap="handleClose"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    ariaLabel="关闭"
+    ariaRole="button"
+    class="t-overlay t-fade-enter t-fade-enter-active class"
+    style="z-index:11000;"
+    bind:tap="handleClick"
+    catch:touchmove="noop"
+    bind:transitionend="onTransitionEnd"
+  />
 </main>
 `;
diff --git a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
index 049933a34..9bfb5aec0 100644
--- a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,66 +2,56 @@
 
 exports[`cell :base 1`] = `
 <main>
-  <main
-    id="cell"
+  <wx-view
+    ariaLabel=""
+    ariaRole=""
+    class="class t-class t-cell  t-cell--middle"
+    hoverClass=""
+    hoverStayTime="70"
+    style=""
+    bind:tap="onClick"
   >
     <wx-view
-      ariaLabel=""
-      ariaRole=""
-      class="class t-class t-cell  t-cell--middle"
-      hoverClass=""
-      hoverStayTime="70"
-      style=""
-      bind:tap="onClick"
+      class="t-cell__left t-class-left"
+    />
+    <wx-view
+      class="t-cell__title"
     >
       <wx-view
-        class="t-cell__left t-class-left"
+        class="t-cell__title-text  t-class-title"
       />
       <wx-view
-        class="t-cell__title"
-      >
-        <wx-view
-          class="t-cell__title-text  t-class-title"
-        />
-        <wx-view
-          class="t-cell__description t-class-description"
-        />
-      </wx-view>
-      <wx-view
-        class="t-cell__note t-class-note"
+        class="t-cell__description t-class-description"
       />
+    </wx-view>
+    <wx-view
+      class="t-cell__note t-class-note"
+    />
+    <wx-view
+      class="t-cell__right t-class-right"
+    >
       <wx-view
-        class="t-cell__right t-class-right"
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon
-          tClass="t-cell__right-icon t-class-right-icon"
-        >
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon- t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon- t-icon-base"
+        />
       </wx-view>
     </wx-view>
-  </main>
+  </wx-view>
 </main>
 `;
 
 exports[`cell :with group 1`] = `
 <main>
-  <main>
-    <wx-view
-      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
-      style=""
-    />
-  </main>
+  <wx-view
+    class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
+    style=""
+  />
 </main>
 `;
diff --git a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
index 3c2af13a0..bbad0465c 100644
--- a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,183 +1,151 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`collapse :defaultExpandAll 1`] = `
-<t-collapse
-  id="expandAll"
+<wx-view
+  class="class t-class t-collapse t-collapse--default"
+  style=""
 >
   <wx-view
-    class="class t-class t-collapse t-collapse--default"
+    class="class t-collapse-panel t-collapse-panel--bottom t-class"
     style=""
   >
-    <t-collapse-panel>
+    <wx-view
+      ariaDisabled="{{false}}"
+      ariaExpanded="{{false}}"
+      ariaRole="button"
+      class="t-collapse-panel__title"
+      bind:tap="onClick"
+    >
       <wx-view
-        class="class t-collapse-panel t-collapse-panel--bottom t-class"
+        ariaLabel=""
+        ariaRole=""
+        class="class t-class t-cell  t-cell--middle"
+        hoverClass=""
+        hoverStayTime="70"
         style=""
+        bind:tap="onClick"
       >
         <wx-view
-          ariaDisabled="{{false}}"
-          ariaExpanded="{{false}}"
-          ariaRole="button"
-          class="t-collapse-panel__title"
-          bind:tap="onClick"
+          class="t-cell__left t-class-left"
+        />
+        <wx-view
+          class="t-cell__title"
         >
-          <t-cell
-            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-class-header"
-            tClassHover="class-header-hover"
-            tClassNote="class-note "
-            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
-            tClassTitle="class-title "
+          <wx-view
+            class="t-cell__title-text  t-class-title"
           >
-            <wx-view
-              ariaLabel=""
-              ariaRole=""
-              class="class t-class t-cell  t-cell--middle"
-              hoverClass=""
-              hoverStayTime="70"
-              style=""
-              bind:tap="onClick"
-            >
-              <wx-view
-                class="t-cell__left t-class-left"
-              />
-              <wx-view
-                class="t-cell__title"
-              >
-                <wx-view
-                  class="t-cell__title-text  t-class-title"
-                >
-                   first 
-                </wx-view>
-                <wx-view
-                  class="t-cell__description t-class-description"
-                />
-              </wx-view>
-              <wx-view
-                class="t-cell__note t-class-note"
-              />
-              <wx-view
-                class="t-cell__right t-class-right"
-              >
-                <t-icon
-                  tClass="t-cell__right-icon t-class-right-icon"
-                >
-                  <wx-view
-                    ariaHidden="{{false}}"
-                    ariaLabel=""
-                    ariaRole=""
-                    class="t-icon class t-class"
-                    style=""
-                    bind:tap="onTap"
-                  >
-                    <wx-label
-                      class="t-icon-chevron-down t-icon-base"
-                    />
-                  </wx-view>
-                </t-icon>
-              </wx-view>
-            </wx-view>
-          </t-cell>
+             first 
+          </wx-view>
+          <wx-view
+            class="t-cell__description t-class-description"
+          />
         </wx-view>
         <wx-view
-          animation=""
-          ariaHidden="{{true}}"
-          class="t-collapse-panel__wrapper"
+          class="t-cell__note t-class-note"
+        />
+        <wx-view
+          class="t-cell__right t-class-right"
         >
           <wx-view
-            class="t-collapse-panel__content t-class-content"
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
           >
-            
-      
-      
-            内容1
+            <wx-label
+              class="t-icon-chevron-down t-icon-base"
+            />
           </wx-view>
         </wx-view>
       </wx-view>
-    </t-collapse-panel>
-    <t-collapse-panel>
+    </wx-view>
+    <wx-view
+      animation=""
+      ariaHidden="{{true}}"
+      class="t-collapse-panel__wrapper"
+    >
+      <wx-view
+        class="t-collapse-panel__content t-class-content"
+      >
+        
+      
+      
+        内容1
+      </wx-view>
+    </wx-view>
+  </wx-view>
+  <wx-view
+    class="class t-collapse-panel t-collapse-panel--bottom t-class"
+    style=""
+  >
+    <wx-view
+      ariaDisabled="{{false}}"
+      ariaExpanded="{{true}}"
+      ariaRole="button"
+      class="t-collapse-panel__title"
+      bind:tap="onClick"
+    >
       <wx-view
-        class="class t-collapse-panel t-collapse-panel--bottom t-class"
+        ariaLabel=""
+        ariaRole=""
+        class="class t-class t-cell  t-cell--middle"
+        hoverClass=""
+        hoverStayTime="70"
         style=""
+        bind:tap="onClick"
       >
         <wx-view
-          ariaDisabled="{{false}}"
-          ariaExpanded="{{true}}"
-          ariaRole="button"
-          class="t-collapse-panel__title"
-          bind:tap="onClick"
+          class="t-cell__left t-class-left"
+        />
+        <wx-view
+          class="t-cell__title"
         >
-          <t-cell
-            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
-            tClassHover="class-header-hover"
-            tClassNote="class-note "
-            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
-            tClassTitle="class-title "
+          <wx-view
+            class="t-cell__title-text  t-class-title"
           >
-            <wx-view
-              ariaLabel=""
-              ariaRole=""
-              class="class t-class t-cell  t-cell--middle"
-              hoverClass=""
-              hoverStayTime="70"
-              style=""
-              bind:tap="onClick"
-            >
-              <wx-view
-                class="t-cell__left t-class-left"
-              />
-              <wx-view
-                class="t-cell__title"
-              >
-                <wx-view
-                  class="t-cell__title-text  t-class-title"
-                >
-                   second 
-                </wx-view>
-                <wx-view
-                  class="t-cell__description t-class-description"
-                />
-              </wx-view>
-              <wx-view
-                class="t-cell__note t-class-note"
-              />
-              <wx-view
-                class="t-cell__right t-class-right"
-              >
-                <t-icon
-                  tClass="t-cell__right-icon t-class-right-icon"
-                >
-                  <wx-view
-                    ariaHidden="{{false}}"
-                    ariaLabel=""
-                    ariaRole=""
-                    class="t-icon class t-class"
-                    style=""
-                    bind:tap="onTap"
-                  >
-                    <wx-label
-                      class="t-icon-chevron-up t-icon-base"
-                    />
-                  </wx-view>
-                </t-icon>
-              </wx-view>
-            </wx-view>
-          </t-cell>
+             second 
+          </wx-view>
+          <wx-view
+            class="t-cell__description t-class-description"
+          />
         </wx-view>
         <wx-view
-          animation=""
-          ariaHidden=""
-          class="t-collapse-panel__wrapper"
+          class="t-cell__note t-class-note"
+        />
+        <wx-view
+          class="t-cell__right t-class-right"
         >
           <wx-view
-            class="t-collapse-panel__content t-class-content"
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
           >
-            
-      
-      
-            内容2
+            <wx-label
+              class="t-icon-chevron-up t-icon-base"
+            />
           </wx-view>
         </wx-view>
       </wx-view>
-    </t-collapse-panel>
+    </wx-view>
+    <wx-view
+      animation=""
+      ariaHidden=""
+      class="t-collapse-panel__wrapper"
+    >
+      <wx-view
+        class="t-collapse-panel__content t-class-content"
+      >
+        
+      
+      
+        内容2
+      </wx-view>
+    </wx-view>
   </wx-view>
-</t-collapse>
+</wx-view>
 `;
diff --git a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
index 311f3161a..c4b88938b 100644
--- a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,58 +2,48 @@
 
 exports[`countdown :autoStart 1`] = `
 <main>
-  <t-count-down>
-    <wx-view
-      ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium class t-class "
-      style=""
-    >
-      00 : 00 : 01
-    </wx-view>
-  </t-count-down>
+  <wx-view
+    ariaRole="option"
+    class="t-count-down t-count-down--default t-count-down--medium class t-class "
+    style=""
+  >
+    00 : 00 : 01
+  </wx-view>
 </main>
 `;
 
 exports[`countdown :base 1`] = `
 <main>
-  <t-count-down>
-    <wx-view
-      ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium class t-class "
-      style=""
-    >
-      00 : 00 : 01
-    </wx-view>
-  </t-count-down>
+  <wx-view
+    ariaRole="option"
+    class="t-count-down t-count-down--default t-count-down--medium class t-class "
+    style=""
+  >
+    00 : 00 : 01
+  </wx-view>
 </main>
 `;
 
 exports[`countdown :base 2`] = `
 <main>
-  <t-count-down>
-    <wx-view
-      ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium class t-class "
-      style=""
-    >
-      00 : 00 : 00
-    </wx-view>
-  </t-count-down>
+  <wx-view
+    ariaRole="option"
+    class="t-count-down t-count-down--default t-count-down--medium class t-class "
+    style=""
+  >
+    00 : 00 : 00
+  </wx-view>
 </main>
 `;
 
 exports[`countdown :millisecond 1`] = `
 <main>
-  <t-count-down
-    id="cd"
+  <wx-view
+    ariaRole="option"
+    class="t-count-down t-count-down--default t-count-down--medium class t-class "
+    style=""
   >
-    <wx-view
-      ariaRole="option"
-      class="t-count-down t-count-down--default t-count-down--medium class t-class "
-      style=""
-    >
-      00 : 00 : 00
-    </wx-view>
-  </t-count-down>
+    00 : 00 : 00
+  </wx-view>
 </main>
 `;
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index ea53b8fb5..b980c3e87 100644
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,474 +2,442 @@
 
 exports[`date-time-picker :base 1`] = `
 <main>
-  <t-date-time-picker>
-    <t-picker
-      class="class t-class t-date-time-picker"
-      bind:cancel="onCancel"
-      bind:change="onConfirm"
-      bind:close="onClose"
-      bind:pick="onColumnChange"
-      bind:visible-change="onVisibleChange"
+  <wx-view
+    ariaModal="{{true}}"
+    ariaRole="dialog"
+    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+    style="z-index:11500;"
+    bind:transitionend="onTransitionEnd"
+  >
+    <wx-view
+      class="t-popup__content t-class-content"
     >
-      <t-popup
-        class="class"
-        bind:visible-change="onPopupChange"
+      <wx-view
+        class="t-picker t-class"
+        slot="content"
+        style=""
       >
         <wx-view
-          ariaModal="{{true}}"
-          ariaRole="dialog"
-          class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-          style="z-index:11500;"
-          bind:transitionend="onTransitionEnd"
+          class="t-picker__toolbar"
         >
           <wx-view
-            class="t-popup__content t-class-content"
+            class="t-picker__cancel t-class-cancel"
+            bind:tap="onCancel"
+          >
+            取消
+          </wx-view>
+          <wx-view
+            class="t-picker__title t-class-title"
+          >
+            选择日期
+          </wx-view>
+          <wx-view
+            class="t-picker__confirm t-class-confirm"
+            bind:tap="onConfirm"
+          >
+            确定
+          </wx-view>
+        </wx-view>
+        <wx-view
+          class="t-picker__main"
+        >
+          <wx-view
+            class="t-picker-item__group class t-class"
+            style=""
+            bind:touchcancel="onTouchEnd"
+            bind:touchend="onTouchEnd"
+            catch:touchmove="onTouchMove"
+            bind:touchstart="onTouchStart"
           >
             <wx-view
-              class="t-picker t-class"
-              slot="content"
-              style=""
+              class="t-picker-item__wrapper"
+              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
             >
               <wx-view
-                class="t-picker__toolbar"
-              >
-                <wx-view
-                  class="t-picker__cancel t-class-cancel"
-                  bind:tap="onCancel"
-                >
-                  取消
-                </wx-view>
-                <wx-view
-                  class="t-picker__title t-class-title"
-                >
-                  选择日期
-                </wx-view>
-                <wx-view
-                  class="t-picker__confirm t-class-confirm"
-                  bind:tap="onConfirm"
-                >
-                  确定
-                </wx-view>
-              </wx-view>
-              <wx-view
-                class="t-picker__main"
-              >
-                <t-picker-item
-                  class="t-date-time-picker__item"
-                  index="index"
-                >
-                  <wx-view
-                    class="t-picker-item__group class t-class"
-                    style=""
-                    bind:touchcancel="onTouchEnd"
-                    bind:touchend="onTouchEnd"
-                    catch:touchmove="onTouchMove"
-                    bind:touchstart="onTouchStart"
-                  >
-                    <wx-view
-                      class="t-picker-item__wrapper"
-                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
-                    >
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{0}}"
-                      >
-                        
+                class="t-picker-item__item"
+                data-index="{{0}}"
+              >
+                
       2000年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{1}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{1}}"
+              >
+                
       2001年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{2}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{2}}"
+              >
+                
       2002年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{3}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{3}}"
+              >
+                
       2003年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{4}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{4}}"
+              >
+                
       2004年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{5}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{5}}"
+              >
+                
       2005年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{6}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{6}}"
+              >
+                
       2006年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{7}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{7}}"
+              >
+                
       2007年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{8}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{8}}"
+              >
+                
       2008年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{9}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{9}}"
+              >
+                
       2009年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{10}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{10}}"
+              >
+                
       2010年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{11}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{11}}"
+              >
+                
       2011年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{12}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{12}}"
+              >
+                
       2012年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{13}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{13}}"
+              >
+                
       2013年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{14}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{14}}"
+              >
+                
       2014年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{15}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{15}}"
+              >
+                
       2015年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{16}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{16}}"
+              >
+                
       2016年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{17}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{17}}"
+              >
+                
       2017年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{18}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{18}}"
+              >
+                
       2018年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{19}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{19}}"
+              >
+                
       2019年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{20}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{20}}"
+              >
+                
       2020年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item t-picker-item__item--active"
-                        data-index="{{21}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item t-picker-item__item--active"
+                data-index="{{21}}"
+              >
+                
       2021年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{22}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{22}}"
+              >
+                
       2022年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{23}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{23}}"
+              >
+                
       2023年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{24}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{24}}"
+              >
+                
       2024年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{25}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{25}}"
+              >
+                
       2025年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{26}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{26}}"
+              >
+                
       2026年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{27}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{27}}"
+              >
+                
       2027年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{28}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{28}}"
+              >
+                
       2028年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{29}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{29}}"
+              >
+                
       2029年
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{30}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{30}}"
+              >
+                
       2030年
     
-                      </wx-view>
-                    </wx-view>
-                  </wx-view>
-                </t-picker-item>
-                <t-picker-item
-                  class="t-date-time-picker__item"
-                  index="index"
-                >
-                  <wx-view
-                    class="t-picker-item__group class t-class"
-                    style=""
-                    bind:touchcancel="onTouchEnd"
-                    bind:touchend="onTouchEnd"
-                    catch:touchmove="onTouchMove"
-                    bind:touchstart="onTouchStart"
-                  >
-                    <wx-view
-                      class="t-picker-item__wrapper"
-                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
-                    >
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{0}}"
-                      >
-                        
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="t-picker-item__group class t-class"
+            style=""
+            bind:touchcancel="onTouchEnd"
+            bind:touchend="onTouchEnd"
+            catch:touchmove="onTouchMove"
+            bind:touchstart="onTouchStart"
+          >
+            <wx-view
+              class="t-picker-item__wrapper"
+              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
+            >
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{0}}"
+              >
+                
       1月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{1}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{1}}"
+              >
+                
       2月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{2}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{2}}"
+              >
+                
       3月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{3}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{3}}"
+              >
+                
       4月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{4}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{4}}"
+              >
+                
       5月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{5}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{5}}"
+              >
+                
       6月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{6}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{6}}"
+              >
+                
       7月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{7}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{7}}"
+              >
+                
       8月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item t-picker-item__item--active"
-                        data-index="{{8}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item t-picker-item__item--active"
+                data-index="{{8}}"
+              >
+                
       9月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{9}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{9}}"
+              >
+                
       10月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{10}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{10}}"
+              >
+                
       11月
     
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{11}}"
-                      >
-                        
+              </wx-view>
+              <wx-view
+                class="t-picker-item__item"
+                data-index="{{11}}"
+              >
+                
       12月
     
-                      </wx-view>
-                    </wx-view>
-                  </wx-view>
-                </t-picker-item>
-                <wx-view
-                  class="t-picker__mask t-picker__mask--top"
-                />
-                <wx-view
-                  class="t-picker__mask t-picker__mask--bottom"
-                />
-                <wx-view
-                  class="t-picker__indicator"
-                />
               </wx-view>
             </wx-view>
-            <wx-view
-              class="t-popup__close"
-              bind:tap="handleClose"
-            />
           </wx-view>
-        </wx-view>
-        <t-overlay
-          class="test"
-          id="popup-overlay"
-          bind:tap="handleOverlayClick"
-        >
           <wx-view
-            ariaLabel="关闭"
-            ariaRole="button"
-            class="t-overlay t-fade-enter t-fade-enter-active class"
-            style="z-index:11000;"
-            bind:tap="handleClick"
-            catch:touchmove="noop"
-            bind:transitionend="onTransitionEnd"
+            class="t-picker__mask t-picker__mask--top"
           />
-        </t-overlay>
-      </t-popup>
-    </t-picker>
-  </t-date-time-picker>
+          <wx-view
+            class="t-picker__mask t-picker__mask--bottom"
+          />
+          <wx-view
+            class="t-picker__indicator"
+          />
+        </wx-view>
+      </wx-view>
+      <wx-view
+        class="t-popup__close"
+        bind:tap="handleClose"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    ariaLabel="关闭"
+    ariaRole="button"
+    class="t-overlay t-fade-enter t-fade-enter-active class"
+    style="z-index:11000;"
+    bind:tap="handleClick"
+    catch:touchmove="noop"
+    bind:transitionend="onTransitionEnd"
+  />
 </main>
 `;
diff --git a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
index 45a54cb24..0ffdddadb 100644
--- a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,57 +2,41 @@
 
 exports[`dialog :base 1`] = `
 <main>
-  <t-dialog
-    id="dialog"
+  <wx-view
+    ariaModal="{{true}}"
+    ariaRole="dialog"
+    class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
+    style="z-index:11500;"
+    bind:transitionend="onTransitionEnd"
   >
-    <t-popup
-      class="class"
-      tClass="t-dialog__wrapper"
-      bind:visible-change="overlayClick"
+    <wx-view
+      class="t-popup__content t-class-content"
     >
       <wx-view
-        ariaModal="{{true}}"
-        ariaRole="dialog"
-        class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
-        style="z-index:11500;"
-        bind:transitionend="onTransitionEnd"
+        class="t-dialog t-class"
+        slot="content"
       >
         <wx-view
-          class="t-popup__content t-class-content"
-        >
-          <wx-view
-            class="t-dialog t-class"
-            slot="content"
-          >
-            <wx-view
-              class="t-dialog__content t-class-content"
-            />
-            <wx-view
-              class="t-dialog__footer t-dialog__footer--full"
-            />
-          </wx-view>
-          <wx-view
-            class="t-popup__close"
-            bind:tap="handleClose"
-          />
-        </wx-view>
-      </wx-view>
-      <t-overlay
-        class="test"
-        id="popup-overlay"
-        bind:tap="handleOverlayClick"
-      >
+          class="t-dialog__content t-class-content"
+        />
         <wx-view
-          ariaLabel="关闭"
-          ariaRole="button"
-          class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="z-index:11000;"
-          bind:tap="handleClick"
-          catch:touchmove="noop"
-          bind:transitionend="onTransitionEnd"
+          class="t-dialog__footer t-dialog__footer--full"
         />
-      </t-overlay>
-    </t-popup>
-  </t-dialog>
+      </wx-view>
+      <wx-view
+        class="t-popup__close"
+        bind:tap="handleClose"
+      />
+    </wx-view>
+  </wx-view>
+  <wx-view
+    ariaLabel="关闭"
+    ariaRole="button"
+    class="t-overlay t-fade-enter t-fade-enter-active class"
+    style="z-index:11000;"
+    bind:tap="handleClick"
+    catch:touchmove="noop"
+    bind:transitionend="onTransitionEnd"
+  />
 </main>
 `;
diff --git a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
index 473ce46af..4fd1b24d2 100644
--- a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,21 +2,17 @@
 
 exports[`Divider :base 1`] = `
 <main>
-  <t-divider
-    class="divider"
+  <wx-view
+    class="class t-class "
   >
     <wx-view
-      class="class t-class "
+      class="t-divider t-divider--horizontal t-divider--center  "
+      style=""
     >
       <wx-view
-        class="t-divider t-divider--horizontal t-divider--center  "
-        style=""
-      >
-        <wx-view
-          class="t-class-content t-divider__content"
-        />
-      </wx-view>
+        class="t-class-content t-divider__content"
+      />
     </wx-view>
-  </t-divider>
+  </wx-view>
 </main>
 `;
diff --git a/src/dropdown-item/dropdown-item.less b/src/dropdown-item/dropdown-item.less
index f2c7a83e9..b867af6f6 100644
--- a/src/dropdown-item/dropdown-item.less
+++ b/src/dropdown-item/dropdown-item.less
@@ -88,6 +88,13 @@
     }
   }
 
+  &__radio {
+    &-group {
+      display: grid;
+      grid-gap: 0rpx;
+    }
+  }
+
   &__checkbox {
     &-group {
       padding: 32rpx;
diff --git a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
index a75d29e0d..663b4673d 100644
--- a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,17 +2,15 @@
 
 exports[`Footer :base 1`] = `
 <main>
-  <main>
+  <wx-view
+    class="t-footer class t-class"
+    style=""
+  >
     <wx-view
-      class="t-footer class t-class"
-      style=""
+      class="t-footer__text"
     >
-      <wx-view
-        class="t-footer__text"
-      >
-        
-      </wx-view>
+      
     </wx-view>
-  </main>
+  </wx-view>
 </main>
 `;
diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
index d9a57a892..c361b1971 100644
--- a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,196 +1,115 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`image-viewer :base 1`] = `
-<t-image
-  class="t-image-viewer__image"
-  data-index="{{0}}"
-  tClass="t-image--external"
-  bind:load="onImageLoadSuccess"
+<wx-view
+  ariaHidden="{{false}}"
+  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+  style=""
 >
   <wx-view
-    ariaHidden="{{false}}"
-    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-    style=""
+    class="class t-class t-loading t-loading--horizontal"
+    style="width: 44rpx; height: 44rpx; color: inherit;"
   >
-    <t-loading
-      tClass="t-class-load"
-      tClassText="t-image--loading-text"
+    <wx-view
+      ariaLabel="加载中"
+      ariaRole="img"
+      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx; color: inherit;"
-      >
-        <wx-view
-          ariaLabel="加载中"
-          ariaRole="img"
-          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
-        >
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          ariaLabel=""
-          class="t-loading__text t-loading__text--horizontal t-class-text"
-        />
-      </wx-view>
-    </t-loading>
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+      />
+    </wx-view>
+    <wx-view
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="t-loading__text t-loading__text--horizontal t-class-text"
+    />
   </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{true}}"
-    mode="aspectFit"
-    showMenuByLongpress="{{false}}"
-    src="a.png"
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
-</t-image>
+</wx-view>
 `;
 
 exports[`image-viewer :base 2`] = `
-<t-image
-  class="t-image-viewer__image"
-  data-index="{{0}}"
-  tClass="t-image--external"
-  bind:load="onImageLoadSuccess"
+<wx-view
+  ariaHidden="{{false}}"
+  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+  style=""
 >
   <wx-view
-    ariaHidden="{{false}}"
-    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-    style=""
+    class="class t-class t-loading t-loading--horizontal"
+    style="width: 44rpx; height: 44rpx; color: inherit;"
   >
-    <t-loading
-      tClass="t-class-load"
-      tClassText="t-image--loading-text"
+    <wx-view
+      ariaLabel="加载中"
+      ariaRole="img"
+      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx; color: inherit;"
-      >
-        <wx-view
-          ariaLabel="加载中"
-          ariaRole="img"
-          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
-        >
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          ariaLabel=""
-          class="t-loading__text t-loading__text--horizontal t-class-text"
-        />
-      </wx-view>
-    </t-loading>
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+      />
+    </wx-view>
+    <wx-view
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="t-loading__text t-loading__text--horizontal t-class-text"
+    />
   </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{true}}"
-    mode="aspectFit"
-    showMenuByLongpress="{{false}}"
-    src="a.png"
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
-</t-image>
+</wx-view>
 `;
 
 exports[`image-viewer :base 3`] = `
-<t-image
-  class="t-image-viewer__image"
-  data-index="{{0}}"
-  tClass="t-image--external"
-  bind:load="onImageLoadSuccess"
+<wx-view
+  ariaHidden="{{false}}"
+  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+  style=""
 >
   <wx-view
-    ariaHidden="{{false}}"
-    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-    style=""
+    class="class t-class t-loading t-loading--horizontal"
+    style="width: 44rpx; height: 44rpx; color: inherit;"
   >
-    <t-loading
-      tClass="t-class-load"
-      tClassText="t-image--loading-text"
+    <wx-view
+      ariaLabel="加载中"
+      ariaRole="img"
+      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
     >
       <wx-view
-        class="class t-class t-loading t-loading--horizontal"
-        style="width: 44rpx; height: 44rpx; color: inherit;"
-      >
-        <wx-view
-          ariaLabel="加载中"
-          ariaRole="img"
-          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
-        >
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-          />
-          <wx-view
-            class="t-loading__dot"
-            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          ariaLabel=""
-          class="t-loading__text t-loading__text--horizontal t-class-text"
-        />
-      </wx-view>
-    </t-loading>
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+      />
+      <wx-view
+        class="t-loading__dot"
+        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+      />
+    </wx-view>
+    <wx-view
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="t-loading__text t-loading__text--horizontal t-class-text"
+    />
   </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{true}}"
-    mode="aspectFit"
-    showMenuByLongpress="{{false}}"
-    src="a.png"
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
-</t-image>
+</wx-view>
 `;
diff --git a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
index 445831548..73c7d73ee 100644
--- a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,72 +2,63 @@
 
 exports[`image :base 1`] = `
 <main>
-  <t-image>
+  <wx-view
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
+    style=""
+  >
     <wx-view
-      ariaHidden="{{false}}"
-      class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
-      style=""
+      class="t-class-load"
+      style="font-size: 44rpx"
     >
       <wx-view
-        class="t-class-load"
-        style="font-size: 44rpx"
+        ariaHidden="{{false}}"
+        ariaLabel="加载失败"
+        ariaRole="img"
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon>
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel="加载失败"
-            ariaRole="img"
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-close t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon-close t-icon-base"
+        />
       </wx-view>
     </wx-view>
-    <wx-image
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="class t-class t-image t-image--shape-square"
-      hidden="{{true}}"
-      id="image"
-      lazyLoad="{{false}}"
-      mode="scaleToFill"
-      showMenuByLongpress="{{false}}"
-      src=""
-      style=""
-      webp="{{false}}"
-      bind:error="onLoadError"
-      bind:load="onLoaded"
-    />
-  </t-image>
+  </wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{false}}"
+    mode="scaleToFill"
+    showMenuByLongpress="{{false}}"
+    src=""
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
 </main>
 `;
 
 exports[`image :success 1`] = `
 <main>
-  <t-image
-    id="root"
-    bind:load="handleLoad"
-  >
-    <wx-image
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      class="class t-class t-image t-image--shape-square"
-      hidden="{{false}}"
-      id="image"
-      lazyLoad="{{false}}"
-      mode="heightFix"
-      showMenuByLongpress="{{false}}"
-      src="https://www.tencent.com/img/index/menu_logo.png"
-      style="height: 0px; width: 0.00px;"
-      webp="{{false}}"
-      bind:error="onLoadError"
-      bind:load="onLoaded"
-    />
-  </t-image>
+  <wx-image
+    ariaHidden="{{false}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{false}}"
+    id="image"
+    lazyLoad="{{false}}"
+    mode="heightFix"
+    showMenuByLongpress="{{false}}"
+    src="https://www.tencent.com/img/index/menu_logo.png"
+    style="height: 0px; width: 0.00px;"
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
 </main>
 `;
diff --git a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
index 2b1c4656a..595e9792e 100644
--- a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,218 +1,198 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`input props : clearable && label && suffix 1`] = `
-<t-input
-  class="base"
+<wx-view
+  ariaDescribedby="{{true}}"
+  class="t-input t-input--border t-input--layout-horizontal class t-class"
+  style=""
 >
   <wx-view
-    ariaDescribedby="{{true}}"
-    class="t-input t-input--border t-input--layout-horizontal class t-class"
-    style=""
+    class="t-input__wrap--prefix"
   >
     <wx-view
-      class="t-input__wrap--prefix"
+      class="t-input__icon--prefix"
+    />
+    <wx-view
+      ariaHidden="{{true}}"
+      class="t-input__label"
     >
-      <wx-view
-        class="t-input__icon--prefix"
-      />
-      <wx-view
-        ariaHidden="{{true}}"
-        class="t-input__label"
+      <wx-text
+        class="t-class-label"
       >
-        <wx-text
-          class="t-class-label"
-        >
-          tdesign
-        </wx-text>
-      </wx-view>
+        tdesign
+      </wx-text>
     </wx-view>
+  </wx-view>
+  <wx-view
+    class="t-input__wrap"
+  >
     <wx-view
-      class="t-input__wrap"
+      class="t-input__content t-input--default"
     >
+      <wx-input
+        adjustPosition="{{true}}"
+        alwaysEmbed="{{false}}"
+        ariaLabel="tdesign"
+        ariaRole="textbox"
+        ariaRoledescription="tdesign"
+        autoFocus="{{false}}"
+        class="t-input__control t-input--left t-class-input"
+        confirmHold="{{false}}"
+        confirmType="done"
+        cursor="{{0}}"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        focus="{{false}}"
+        holdKeyboard="{{false}}"
+        maxlength="{{-1}}"
+        password="{{false}}"
+        placeholder=""
+        placeholderClass="t-input__placeholder input-placeholder"
+        placeholderStyle=""
+        safePasswordCertPath=""
+        safePasswordCustomHash=""
+        safePasswordLength="{{0}}"
+        safePasswordNonce=""
+        safePasswordSalt=""
+        safePasswordTimeStamp="{{0}}"
+        selectionEnd="{{-1}}"
+        selectionStart="{{-1}}"
+        type="text"
+        value="input输入框"
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:keyboardheightchange="onKeyboardHeightChange"
+        bind:nicknamereview="onNickNameReview"
+      />
       <wx-view
-        class="t-input__content t-input--default"
+        class="t-input__wrap--clearable-icon"
+        bind:touchstart="clearInput"
       >
-        <wx-input
-          adjustPosition="{{true}}"
-          alwaysEmbed="{{false}}"
-          ariaLabel="tdesign"
-          ariaRole="textbox"
-          ariaRoledescription="tdesign"
-          autoFocus="{{false}}"
-          class="t-input__control t-input--left t-class-input"
-          confirmHold="{{false}}"
-          confirmType="done"
-          cursor="{{0}}"
-          cursorSpacing="{{0}}"
-          disabled="{{false}}"
-          focus="{{false}}"
-          holdKeyboard="{{false}}"
-          maxlength="{{-1}}"
-          password="{{false}}"
-          placeholder=""
-          placeholderClass="t-input__placeholder input-placeholder"
-          placeholderStyle=""
-          safePasswordCertPath=""
-          safePasswordCustomHash=""
-          safePasswordLength="{{0}}"
-          safePasswordNonce=""
-          safePasswordSalt=""
-          safePasswordTimeStamp="{{0}}"
-          selectionEnd="{{-1}}"
-          selectionStart="{{-1}}"
-          type="text"
-          value="input输入框"
-          bind:blur="onBlur"
-          bind:confirm="onConfirm"
-          bind:focus="onFocus"
-          bind:input="onInput"
-          bind:keyboardheightchange="onKeyboardHeightChange"
-          bind:nicknamereview="onNickNameReview"
-        />
-        <wx-view
-          class="t-input__wrap--clearable-icon"
-          bind:touchstart="clearInput"
-        >
-          <t-icon
-            class=""
-            tClass="t-class-clearable"
-            bind:click=""
-          >
-            <wx-view
-              ariaHidden="{{false}}"
-              ariaLabel="清除"
-              ariaRole="button"
-              class="t-icon class t-class"
-              style=""
-              bind:tap="onTap"
-            >
-              <wx-label
-                class="t-icon-close-circle-filled t-icon-base"
-              />
-            </wx-view>
-          </t-icon>
-        </wx-view>
         <wx-view
-          class="t-input__wrap--suffix t-class-suffix"
-          bind:tap="onSuffixClick"
+          ariaHidden="{{false}}"
+          ariaLabel="清除"
+          ariaRole="button"
+          class="t-icon class t-class"
+          style=""
+          bind:tap="onTap"
         >
-          <wx-text>
-            后置内容
-          </wx-text>
+          <wx-label
+            class="t-icon-close-circle-filled t-icon-base"
+          />
         </wx-view>
+      </wx-view>
+      <wx-view
+        class="t-input__wrap--suffix t-class-suffix"
+        bind:tap="onSuffixClick"
+      >
+        <wx-text>
+          后置内容
+        </wx-text>
+      </wx-view>
+      <wx-view
+        class="t-input__wrap--suffix-icon"
+        bind:tap="onSuffixIconClick"
+      >
         <wx-view
-          class="t-input__wrap--suffix-icon"
-          bind:tap="onSuffixIconClick"
+          ariaHidden="{{false}}"
+          ariaLabel=""
+          ariaRole="button"
+          class="t-icon class t-class"
+          style=""
+          bind:tap="onTap"
         >
-          <t-icon
-            class=""
-            tClass="t-class-suffix-icon"
-            bind:click=""
-          >
-            <wx-view
-              ariaHidden="{{false}}"
-              ariaLabel=""
-              ariaRole="button"
-              class="t-icon class t-class"
-              style=""
-              bind:tap="onTap"
-            >
-              <wx-label
-                class="t-icon-app t-icon-base"
-              />
-            </wx-view>
-          </t-icon>
+          <wx-label
+            class="t-icon-app t-icon-base"
+          />
         </wx-view>
       </wx-view>
     </wx-view>
   </wx-view>
-</t-input>
+</wx-view>
 `;
 
 exports[`input slots : label 1`] = `
-<t-input
-  class="base"
+<wx-view
+  ariaDescribedby="{{true}}"
+  class="t-input t-input--border t-input--layout-horizontal class t-class"
+  style=""
 >
   <wx-view
-    ariaDescribedby="{{true}}"
-    class="t-input t-input--border t-input--layout-horizontal class t-class"
-    style=""
+    class="t-input__wrap--prefix"
   >
     <wx-view
-      class="t-input__wrap--prefix"
+      class="t-input__icon--prefix"
+    />
+    <wx-view
+      ariaHidden="{{true}}"
+      class="t-input__label"
     >
-      <wx-view
-        class="t-input__icon--prefix"
-      />
-      <wx-view
-        ariaHidden="{{true}}"
-        class="t-input__label"
+      <wx-text
+        slot="label"
       >
+        标签文字
         <wx-text
-          slot="label"
+          style="color: #e34d59"
         >
-          标签文字
-          <wx-text
-            style="color: #e34d59"
-          >
-            *
-          </wx-text>
+          *
         </wx-text>
-      </wx-view>
+      </wx-text>
     </wx-view>
+  </wx-view>
+  <wx-view
+    class="t-input__wrap"
+  >
     <wx-view
-      class="t-input__wrap"
+      class="t-input__content t-input--default"
     >
+      <wx-input
+        adjustPosition="{{true}}"
+        alwaysEmbed="{{false}}"
+        ariaLabel=""
+        ariaRole="textbox"
+        ariaRoledescription=""
+        autoFocus="{{false}}"
+        class="t-input__control t-input--left t-class-input"
+        confirmHold="{{false}}"
+        confirmType="done"
+        cursor="{{0}}"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        focus="{{false}}"
+        holdKeyboard="{{false}}"
+        maxlength="{{-1}}"
+        password="{{false}}"
+        placeholder=""
+        placeholderClass="t-input__placeholder input-placeholder"
+        placeholderStyle=""
+        safePasswordCertPath=""
+        safePasswordCustomHash=""
+        safePasswordLength="{{0}}"
+        safePasswordNonce=""
+        safePasswordSalt=""
+        safePasswordTimeStamp="{{0}}"
+        selectionEnd="{{-1}}"
+        selectionStart="{{-1}}"
+        type="text"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:keyboardheightchange="onKeyboardHeightChange"
+        bind:nicknamereview="onNickNameReview"
+      />
       <wx-view
-        class="t-input__content t-input--default"
-      >
-        <wx-input
-          adjustPosition="{{true}}"
-          alwaysEmbed="{{false}}"
-          ariaLabel=""
-          ariaRole="textbox"
-          ariaRoledescription=""
-          autoFocus="{{false}}"
-          class="t-input__control t-input--left t-class-input"
-          confirmHold="{{false}}"
-          confirmType="done"
-          cursor="{{0}}"
-          cursorSpacing="{{0}}"
-          disabled="{{false}}"
-          focus="{{false}}"
-          holdKeyboard="{{false}}"
-          maxlength="{{-1}}"
-          password="{{false}}"
-          placeholder=""
-          placeholderClass="t-input__placeholder input-placeholder"
-          placeholderStyle=""
-          safePasswordCertPath=""
-          safePasswordCustomHash=""
-          safePasswordLength="{{0}}"
-          safePasswordNonce=""
-          safePasswordSalt=""
-          safePasswordTimeStamp="{{0}}"
-          selectionEnd="{{-1}}"
-          selectionStart="{{-1}}"
-          type="text"
-          value=""
-          bind:blur="onBlur"
-          bind:confirm="onConfirm"
-          bind:focus="onFocus"
-          bind:input="onInput"
-          bind:keyboardheightchange="onKeyboardHeightChange"
-          bind:nicknamereview="onNickNameReview"
-        />
-        <wx-view
-          class="t-input__wrap--suffix t-class-suffix"
-          bind:tap="onSuffixClick"
-        />
-        <wx-view
-          class="t-input__wrap--suffix-icon"
-          bind:tap="onSuffixIconClick"
-        />
-      </wx-view>
+        class="t-input__wrap--suffix t-class-suffix"
+        bind:tap="onSuffixClick"
+      />
+      <wx-view
+        class="t-input__wrap--suffix-icon"
+        bind:tap="onSuffixIconClick"
+      />
     </wx-view>
   </wx-view>
-</t-input>
+</wx-view>
 `;
diff --git a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
index 67aa8f6c8..8d7f31dc6 100644
--- a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,98 +2,82 @@
 
 exports[`message props : style && customStyle 1`] = `
 <main>
-  <t-message
+  <wx-view
+    animation="{{
+      Object {
+        "actions": Array [
+          Object {
+            "animates": Array [
+              Object {
+                "args": Array [
+                  66,
+                ],
+                "type": "translateY",
+              },
+            ],
+            "option": Object {
+              "transformOrigin": "50% 50% 0",
+              "transition": Object {
+                "delay": 0,
+                "duration": 500,
+                "timingFunction": "ease",
+              },
+            },
+          },
+        ],
+      }
+    }}"
+    ariaRole="alert"
+    class="t-message class t-class t-message--warning"
     id="t-message"
+    style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
   >
     <wx-view
-      animation="{{
-        Object {
-          "actions": Array [
-            Object {
-              "animates": Array [
-                Object {
-                  "args": Array [
-                    66,
-                  ],
-                  "type": "translateY",
-                },
-              ],
-              "option": Object {
-                "transformOrigin": "50% 50% 0",
-                "transition": Object {
-                  "delay": 0,
-                  "duration": 500,
-                  "timingFunction": "ease",
-                },
-              },
-            },
-          ],
-        }
-      }}"
-      ariaRole="alert"
-      class="t-message class t-class t-message--warning"
-      id="t-message"
-      style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
+      class="t-message__icon--left"
     >
       <wx-view
-        class="t-message__icon--left"
+        ariaHidden="{{true}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon
-          class=""
-          tClass="t-class-icon"
-          bind:click=""
-        >
-          <wx-view
-            ariaHidden="{{true}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-info-circle-filled t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon-info-circle-filled t-icon-base"
+        />
       </wx-view>
+    </wx-view>
+    <wx-view
+      class="t-message__text-wrap "
+      id="t-message__text-wrap"
+      style="text-align: left"
+    >
       <wx-view
-        class="t-message__text-wrap "
-        id="t-message__text-wrap"
-        style="text-align: left"
+        animation="{{Array []}}"
+        class="t-message__text t-class-content"
+        id="t-message__text"
       >
-        <wx-view
-          animation="{{Array []}}"
-          class="t-message__text t-class-content"
-          id="t-message__text"
-        >
-          这是一条带关闭的消息通知
-        </wx-view>
+        这是一条带关闭的消息通知
       </wx-view>
+    </wx-view>
+    <wx-view
+      class="t-message__icon--right"
+      bind:tap="handleClose"
+    >
       <wx-view
-        class="t-message__icon--right"
-        bind:tap="handleClose"
+        ariaHidden="{{false}}"
+        ariaLabel="关闭"
+        ariaRole="button"
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon
-          class=""
-          tClass="t-class-close-btn"
-          bind:click=""
-        >
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel="关闭"
-            ariaRole="button"
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-close t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon-close t-icon-base"
+        />
       </wx-view>
     </wx-view>
-  </t-message>
+  </wx-view>
 </main>
 `;
diff --git a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 198a82e20..282b0277a 100644
--- a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,175 +2,165 @@
 
 exports[`navbar :base 1`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+    style=""
+  >
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style=""
+      class="t-navbar__placeholder"
+    />
+    <wx-view
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
 
 exports[`navbar :base 2`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
+    style=""
+  >
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-      style=""
+      class="t-navbar__placeholder"
+    />
+    <wx-view
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
 
 exports[`navbar :base 3`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
+    style=""
+  >
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-      style=""
+      class="t-navbar__placeholder"
+    />
+    <wx-view
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
 
 exports[`navbar :fixed 1`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+    style=""
+  >
     <wx-view
-      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style=""
+      class="t-navbar__placeholder"
+    />
+    <wx-view
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
 
 exports[`navbar :menu button 1`] = `
 <main>
-  <t-navbar>
+  <wx-view
+    class="t-navbar t-navbar--fixed  class t-class"
+    style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
+  >
+    <wx-view
+      class="t-navbar__placeholder"
+    />
     <wx-view
-      class="t-navbar t-navbar--fixed  class t-class"
-      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
+      class="t-navbar__content"
     >
       <wx-view
-        class="t-navbar__placeholder"
-      />
-      <wx-view
-        class="t-navbar__content"
+        class="t-navbar__left t-class-left"
       >
         <wx-view
-          class="t-navbar__left t-class-left"
-        >
-          <wx-view
-            class="t-navbar__capsule t-class-capsule"
-          />
-        </wx-view>
-        <wx-view
-          class="t-navbar__center t-class-center"
+          class="t-navbar__capsule t-class-capsule"
+        />
+      </wx-view>
+      <wx-view
+        class="t-navbar__center t-class-center"
+      >
+        <wx-text
+          class="t-navbar__center-title t-class-title"
         >
-          <wx-text
-            class="t-navbar__center-title t-class-title"
-          >
-            test
-          </wx-text>
-        </wx-view>
+          test
+        </wx-text>
       </wx-view>
     </wx-view>
-  </t-navbar>
+  </wx-view>
 </main>
 `;
diff --git a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 7dd7671db..e190e8a3e 100644
--- a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,79 +2,69 @@
 
 exports[`notice-bar props : marquee 1`] = `
 <main>
-  <t-notice-bar
-    class="base"
+  <wx-view
+    class="t-notice-bar t-notice-bar--info class t-class"
+    style=""
   >
     <wx-view
-      class="t-notice-bar t-notice-bar--info class t-class"
-      style=""
+      class="t-notice-bar__prefix-icon"
+      bind:tap="clickPrefixIcon"
     >
       <wx-view
-        class="t-notice-bar__prefix-icon"
-        bind:tap="clickPrefixIcon"
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
       >
-        <t-icon
-          class=""
-          tClass="t-class-prefix-icon"
-          bind:click=""
-        >
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-info-circle-filled t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
+        <wx-label
+          class="t-icon-info-circle-filled t-icon-base"
+        />
       </wx-view>
+    </wx-view>
+    <wx-view
+      class="t-notice-bar__content-wrap"
+      bind:tap="clickContent"
+    >
       <wx-view
-        class="t-notice-bar__content-wrap"
-        bind:tap="clickContent"
-      >
-        <wx-view
-          animation="{{
-            Object {
-              "actions": Array [
-                Object {
-                  "animates": Array [
-                    Object {
-                      "args": Array [
-                        -350,
-                      ],
-                      "type": "translateX",
-                    },
-                  ],
-                  "option": Object {
-                    "transformOrigin": "50% 50% 0",
-                    "transition": Object {
-                      "delay": 0,
-                      "duration": 8287.5,
-                      "timingFunction": "linear",
-                    },
+        animation="{{
+          Object {
+            "actions": Array [
+              Object {
+                "animates": Array [
+                  Object {
+                    "args": Array [
+                      -350,
+                    ],
+                    "type": "translateX",
+                  },
+                ],
+                "option": Object {
+                  "transformOrigin": "50% 50% 0",
+                  "transition": Object {
+                    "delay": 0,
+                    "duration": 8287.5,
+                    "timingFunction": "linear",
                   },
                 },
-              ],
-            }
-          }}"
-          class="t-notice-bar__content t-class-content "
-        >
-          提示文字描述提示文字描述提示文字描述提示文字描述文
-          <wx-view
-            class="t-notice-bar__operation t-class-operation"
-            catch:tap="clickOperation"
-          />
-        </wx-view>
+              },
+            ],
+          }
+        }}"
+        class="t-notice-bar__content t-class-content "
+      >
+        提示文字描述提示文字描述提示文字描述提示文字描述文
+        <wx-view
+          class="t-notice-bar__operation t-class-operation"
+          catch:tap="clickOperation"
+        />
       </wx-view>
-      <wx-view
-        class="t-notice-bar__suffix-icon"
-        bind:tap="clickSuffixIcon"
-      />
     </wx-view>
-  </t-notice-bar>
+    <wx-view
+      class="t-notice-bar__suffix-icon"
+      bind:tap="clickSuffixIcon"
+    />
+  </wx-view>
 </main>
 `;
diff --git a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
index 7a06bb8be..3288499cb 100644
--- a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,16 +2,14 @@
 
 exports[`overlay :base 1`] = `
 <main>
-  <t-overlay>
-    <wx-view
-      ariaLabel="关闭"
-      ariaRole="button"
-      class="t-overlay t-fade-enter t-fade-enter-active class"
-      style="z-index:11000;"
-      bind:tap="handleClick"
-      catch:touchmove="noop"
-      bind:transitionend="onTransitionEnd"
-    />
-  </t-overlay>
+  <wx-view
+    ariaLabel="关闭"
+    ariaRole="button"
+    class="t-overlay t-fade-enter t-fade-enter-active class"
+    style="z-index:11000;"
+    bind:tap="handleClick"
+    catch:touchmove="noop"
+    bind:transitionend="onTransitionEnd"
+  />
 </main>
 `;
diff --git a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index 9801b437f..4fa9f7066 100644
--- a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,176 +1,144 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`picker :base 1`] = `
-<t-picker
-  data-key="yearSeasons"
-  id="yearSeasons"
-  bind:cancel="onPickerCancel"
-  bind:change="onPickerChange"
-  bind:pick="onColumnChange"
+<wx-view
+  ariaModal="{{true}}"
+  ariaRole="dialog"
+  class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+  style="z-index:11500;"
+  bind:transitionend="onTransitionEnd"
 >
-  <t-popup
-    class="class"
-    bind:visible-change="onPopupChange"
+  <wx-view
+    class="t-popup__content t-class-content"
   >
     <wx-view
-      ariaModal="{{true}}"
-      ariaRole="dialog"
-      class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-      style="z-index:11500;"
-      bind:transitionend="onTransitionEnd"
+      class="t-picker t-class"
+      slot="content"
+      style=""
     >
       <wx-view
-        class="t-popup__content t-class-content"
+        class="t-picker__toolbar"
       >
         <wx-view
-          class="t-picker t-class"
-          slot="content"
+          class="t-picker__cancel t-class-cancel"
+          bind:tap="onCancel"
+        >
+          取消
+        </wx-view>
+        <wx-view
+          class="t-picker__title t-class-title"
+        >
+          
+        </wx-view>
+        <wx-view
+          class="t-picker__confirm t-class-confirm"
+          bind:tap="onConfirm"
+        >
+          确认
+        </wx-view>
+      </wx-view>
+      <wx-view
+        class="t-picker__main"
+      >
+        <wx-view
+          class="t-picker-item__group class t-class"
           style=""
+          bind:touchcancel="onTouchEnd"
+          bind:touchend="onTouchEnd"
+          catch:touchmove="onTouchMove"
+          bind:touchstart="onTouchStart"
         >
           <wx-view
-            class="t-picker__toolbar"
+            class="t-picker-item__wrapper"
+            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
           >
             <wx-view
-              class="t-picker__cancel t-class-cancel"
-              bind:tap="onCancel"
+              class="t-picker-item__item t-picker-item__item--active"
+              data-index="{{0}}"
             >
-              取消
+              
+      2021年
+    
             </wx-view>
             <wx-view
-              class="t-picker__title t-class-title"
+              class="t-picker-item__item"
+              data-index="{{1}}"
             >
               
+      2020年
+    
             </wx-view>
             <wx-view
-              class="t-picker__confirm t-class-confirm"
-              bind:tap="onConfirm"
+              class="t-picker-item__item"
+              data-index="{{2}}"
             >
-              确认
+              
+      2019年
+    
             </wx-view>
           </wx-view>
+        </wx-view>
+        <wx-view
+          class="t-picker-item__group class t-class"
+          style=""
+          bind:touchcancel="onTouchEnd"
+          bind:touchend="onTouchEnd"
+          catch:touchmove="onTouchMove"
+          bind:touchstart="onTouchStart"
+        >
           <wx-view
-            class="t-picker__main"
+            class="t-picker-item__wrapper"
+            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
           >
-            <t-picker-item>
-              <wx-view
-                class="t-picker-item__group class t-class"
-                style=""
-                bind:touchcancel="onTouchEnd"
-                bind:touchend="onTouchEnd"
-                catch:touchmove="onTouchMove"
-                bind:touchstart="onTouchStart"
-              >
-                <wx-view
-                  class="t-picker-item__wrapper"
-                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
-                >
-                  <wx-view
-                    class="t-picker-item__item t-picker-item__item--active"
-                    data-index="{{0}}"
-                  >
-                    
-      2021年
-    
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{1}}"
-                  >
-                    
-      2020年
-    
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{2}}"
-                  >
-                    
-      2019年
-    
-                  </wx-view>
-                </wx-view>
-              </wx-view>
-            </t-picker-item>
-            <t-picker-item>
-              <wx-view
-                class="t-picker-item__group class t-class"
-                style=""
-                bind:touchcancel="onTouchEnd"
-                bind:touchend="onTouchEnd"
-                catch:touchmove="onTouchMove"
-                bind:touchstart="onTouchStart"
-              >
-                <wx-view
-                  class="t-picker-item__wrapper"
-                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
-                >
-                  <wx-view
-                    class="t-picker-item__item t-picker-item__item--active"
-                    data-index="{{0}}"
-                  >
-                    
+            <wx-view
+              class="t-picker-item__item t-picker-item__item--active"
+              data-index="{{0}}"
+            >
+              
       春
     
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{1}}"
-                  >
-                    
+            </wx-view>
+            <wx-view
+              class="t-picker-item__item"
+              data-index="{{1}}"
+            >
+              
       夏
     
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{2}}"
-                  >
-                    
+            </wx-view>
+            <wx-view
+              class="t-picker-item__item"
+              data-index="{{2}}"
+            >
+              
       秋
     
-                  </wx-view>
-                  <wx-view
-                    class="t-picker-item__item"
-                    data-index="{{3}}"
-                  >
-                    
+            </wx-view>
+            <wx-view
+              class="t-picker-item__item"
+              data-index="{{3}}"
+            >
+              
       冬
     
-                  </wx-view>
-                </wx-view>
-              </wx-view>
-            </t-picker-item>
-            <wx-view
-              class="t-picker__mask t-picker__mask--top"
-            />
-            <wx-view
-              class="t-picker__mask t-picker__mask--bottom"
-            />
-            <wx-view
-              class="t-picker__indicator"
-            />
+            </wx-view>
           </wx-view>
         </wx-view>
         <wx-view
-          class="t-popup__close"
-          bind:tap="handleClose"
+          class="t-picker__mask t-picker__mask--top"
+        />
+        <wx-view
+          class="t-picker__mask t-picker__mask--bottom"
+        />
+        <wx-view
+          class="t-picker__indicator"
         />
       </wx-view>
     </wx-view>
-    <t-overlay
-      class="test"
-      id="popup-overlay"
-      bind:tap="handleOverlayClick"
-    >
-      <wx-view
-        ariaLabel="关闭"
-        ariaRole="button"
-        class="t-overlay t-fade-enter t-fade-enter-active class"
-        style="z-index:11000;"
-        bind:tap="handleClick"
-        catch:touchmove="noop"
-        bind:transitionend="onTransitionEnd"
-      />
-    </t-overlay>
-  </t-popup>
-</t-picker>
+    <wx-view
+      class="t-popup__close"
+      bind:tap="handleClose"
+    />
+  </wx-view>
+</wx-view>
 `;
diff --git a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
index f3abf4ef5..e48ef901d 100644
--- a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,58 +2,50 @@
 
 exports[`search Props :base 1`] = `
 <main>
-  <t-search
-    class="search"
+  <wx-view
+    class="class t-search t-class"
+    style=""
   >
     <wx-view
-      class="class t-search t-class"
-      style=""
+      class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
     >
       <wx-view
-        class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
+        ariaHidden="{{true}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style="font-size: 24px;"
+        bind:tap="onTap"
       >
-        <t-icon
-          class="t-icon t-class-left"
-        >
-          <wx-view
-            ariaHidden="{{true}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style="font-size: 24px;"
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon-search t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
-        <wx-input
-          class="t-input__keyword t-class-input"
-          confirmType="search"
-          disabled="{{false}}"
-          focus="{{false}}"
-          name="input"
-          placeholder=""
-          placeholderClass="t-search__placeholder t-search__placeholder--normal"
-          type="text"
-          value=""
-          bind:blur="onBlur"
-          bind:confirm="onConfirm"
-          bind:focus="onFocus"
-          bind:input="onInput"
+        <wx-label
+          class="t-icon-search t-icon-base"
         />
       </wx-view>
-      <wx-view
-        ariaRole="button"
-        class="t-search__search-action t-class-action"
-        bind:tap="onActionClick"
-      >
-        
+      <wx-input
+        class="t-input__keyword t-class-input"
+        confirmType="search"
+        disabled="{{false}}"
+        focus="{{false}}"
+        name="input"
+        placeholder=""
+        placeholderClass="t-search__placeholder t-search__placeholder--normal"
+        type="text"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+      />
+    </wx-view>
+    <wx-view
+      ariaRole="button"
+      class="t-search__search-action t-class-action"
+      bind:tap="onActionClick"
+    >
+      
     提交
   
-      </wx-view>
     </wx-view>
-  </t-search>
+  </wx-view>
 </main>
 `;
diff --git a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
index 9271cabc9..90d44529c 100644
--- a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,162 +2,150 @@
 
 exports[`skeleton Props :inner rowCol 1`] = `
 <main>
-  <t-skeleton
-    class="skeleton"
+  <wx-view
+    class="t-skeleton class t-class "
+    style=""
   >
     <wx-view
-      class="t-skeleton class t-class "
-      style=""
+      class="t-skeleton__content"
     >
       <wx-view
-        class="t-skeleton__content"
+        class="t-skeleton__row t-class-row"
       >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:24%;height:32rpx;margin-right:32rpx"
-          />
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:76%;height:32rpx"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:24%;height:32rpx;margin-right:32rpx"
+        />
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:76%;height:32rpx"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
+        <wx-view
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
       </wx-view>
     </wx-view>
-  </t-skeleton>
+  </wx-view>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol 1`] = `
 <main>
-  <t-skeleton
-    class="skeleton"
+  <wx-view
+    class="t-skeleton class t-class "
+    style=""
   >
     <wx-view
-      class="t-skeleton class t-class "
-      style=""
+      class="t-skeleton__content"
     >
       <wx-view
-        class="t-skeleton__content"
+        class="t-skeleton__row t-class-row"
       >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:686rpx;height:32rpx"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:686rpx;height:32rpx"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
+        <wx-view
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
+        />
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
-          />
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:38rpx;height:32rpx"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:38rpx;height:32rpx"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:440rpx"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:440rpx"
+        />
       </wx-view>
     </wx-view>
-  </t-skeleton>
+  </wx-view>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol2 1`] = `
 <main>
-  <t-skeleton
-    class="skeleton"
+  <wx-view
+    class="t-skeleton class t-class "
+    style=""
   >
     <wx-view
-      class="t-skeleton class t-class "
-      style=""
+      class="t-skeleton__content"
     >
       <wx-view
-        class="t-skeleton__content"
+        class="t-skeleton__row t-class-row"
       >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:343px;height:16px"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:343px;height:16px"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style=""
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style=""
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
+        <wx-view
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:14px;height:16px;margin-right:10px;margin-left:10px"
+        />
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:14px;height:16px;margin-right:10px;margin-left:10px"
-          />
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:small;height:small"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:small;height:small"
+        />
+      </wx-view>
+      <wx-view
+        class="t-skeleton__row t-class-row"
+      >
         <wx-view
-          class="t-skeleton__row t-class-row"
-        >
-          <wx-view
-            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-            style="width:220px"
-          />
-        </wx-view>
+          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+          style="width:220px"
+        />
       </wx-view>
     </wx-view>
-  </t-skeleton>
+  </wx-view>
 </main>
 `;
diff --git a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
index 24d454a7f..cd20881f7 100644
--- a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -12,22 +12,18 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <t-icon
-      class="t-stepper__minus-icon"
+    <wx-view
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      ariaRole=""
+      class="t-icon class t-class"
+      style=""
+      bind:tap="onTap"
     >
-      <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
-      >
-        <wx-label
-          class="t-icon-remove t-icon-base"
-        />
-      </wx-view>
-    </t-icon>
+      <wx-label
+        class="t-icon-remove t-icon-base"
+      />
+    </wx-view>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -50,22 +46,18 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <t-icon
-      class="t-stepper__plus-icon"
+    <wx-view
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      ariaRole=""
+      class="t-icon class t-class"
+      style=""
+      bind:tap="onTap"
     >
-      <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
-      >
-        <wx-label
-          class="t-icon-add t-icon-base"
-        />
-      </wx-view>
-    </t-icon>
+      <wx-label
+        class="t-icon-add t-icon-base"
+      />
+    </wx-view>
   </wx-view>
 </wx-view>
 `;
@@ -82,22 +74,18 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <t-icon
-      class="t-stepper__minus-icon"
+    <wx-view
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      ariaRole=""
+      class="t-icon class t-class"
+      style=""
+      bind:tap="onTap"
     >
-      <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
-      >
-        <wx-label
-          class="t-icon-remove t-icon-base"
-        />
-      </wx-view>
-    </t-icon>
+      <wx-label
+        class="t-icon-remove t-icon-base"
+      />
+    </wx-view>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -120,22 +108,18 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <t-icon
-      class="t-stepper__plus-icon"
+    <wx-view
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      ariaRole=""
+      class="t-icon class t-class"
+      style=""
+      bind:tap="onTap"
     >
-      <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
-      >
-        <wx-label
-          class="t-icon-add t-icon-base"
-        />
-      </wx-view>
-    </t-icon>
+      <wx-label
+        class="t-icon-add t-icon-base"
+      />
+    </wx-view>
   </wx-view>
 </wx-view>
 `;
diff --git a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
index 4f9ce97ac..938cc604e 100644
--- a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,28 +2,26 @@
 
 exports[`switch Props :base 1`] = `
 <main>
-  <t-switch>
+  <wx-view
+    ariaChecked="{{false}}"
+    ariaDisabled="{{false}}"
+    ariaRole="switch"
+    class="class t-class t-switch"
+    style=""
+    bind:tap="handleSwitch"
+  >
     <wx-view
-      ariaChecked="{{false}}"
-      ariaDisabled="{{false}}"
-      ariaRole="switch"
-      class="class t-class t-switch"
-      style=""
-      bind:tap="handleSwitch"
+      class="t-switch__body t-switch__body--medium t-class-body"
     >
       <wx-view
-        class="t-switch__body t-switch__body--medium t-class-body"
+        ariaHidden="{{true}}"
+        class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
       >
         <wx-view
-          ariaHidden="{{true}}"
-          class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
-        >
-          <wx-view
-            class="t-switch__label t-switch__label--medium t-class-label"
-          />
-        </wx-view>
+          class="t-switch__label t-switch__label--medium t-class-label"
+        />
       </wx-view>
     </wx-view>
-  </t-switch>
+  </wx-view>
 </main>
 `;
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
index 3e3ba44f9..5da505a7c 100644
--- a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,55 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`textarea slots : label 1`] = `
-<t-textarea
-  class="base"
+<wx-view
+  class="t-textarea  class t-class"
+  style=""
 >
   <wx-view
-    class="t-textarea  class t-class"
-    style=""
+    class="t-textarea__label t-class-label"
   >
-    <wx-view
-      class="t-textarea__label t-class-label"
+    <wx-text
+      slot="label"
     >
-      <wx-text
-        slot="label"
-      >
-        标签文字
-      </wx-text>
-    </wx-view>
-    <wx-view
-      class="t-textarea__wrapper"
-    >
-      <wx-textarea
-        adjustPosition="{{true}}"
-        autoFocus="{{false}}"
-        autoHeight="{{false}}"
-        class="t-textarea__wrapper-inner  t-class-textarea"
-        confirmHold="{{false}}"
-        confirmType="return"
-        cursor="{{-1}}"
-        cursorSpacing="{{0}}"
-        disabled="{{false}}"
-        disableDefaultPadding="{{false}}"
-        fixed="{{false}}"
-        focus="{{false}}"
-        holdKeyboard="{{false}}"
-        maxlength="{{-1}}"
-        placeholder=""
-        placeholderClass="t-textarea__placeholder"
-        placeholderStyle=""
-        selectionEnd="{{-1}}"
-        selectionStart="{{-1}}"
-        showConfirmBar="{{true}}"
-        value=""
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-        bind:keyboardheightchange="onKeyboardHeightChange"
-        bind:linechange="onLineChange"
-      />
-    </wx-view>
+      标签文字
+    </wx-text>
+  </wx-view>
+  <wx-view
+    class="t-textarea__wrapper"
+  >
+    <wx-textarea
+      adjustPosition="{{true}}"
+      autoFocus="{{false}}"
+      autoHeight="{{false}}"
+      class="t-textarea__wrapper-inner  t-class-textarea"
+      confirmHold="{{false}}"
+      confirmType="return"
+      cursor="{{-1}}"
+      cursorSpacing="{{0}}"
+      disabled="{{false}}"
+      disableDefaultPadding="{{false}}"
+      fixed="{{false}}"
+      focus="{{false}}"
+      holdKeyboard="{{false}}"
+      maxlength="{{-1}}"
+      placeholder=""
+      placeholderClass="t-textarea__placeholder"
+      placeholderStyle=""
+      selectionEnd="{{-1}}"
+      selectionStart="{{-1}}"
+      showConfirmBar="{{true}}"
+      value=""
+      bind:blur="onBlur"
+      bind:confirm="onConfirm"
+      bind:focus="onFocus"
+      bind:input="onInput"
+      bind:keyboardheightchange="onKeyboardHeightChange"
+      bind:linechange="onLineChange"
+    />
   </wx-view>
-</t-textarea>
+</wx-view>
 `;

From c963d3afa95e533b253a3c0c0d812b05dba70d17 Mon Sep 17 00:00:00 2001
From: favouredddd <40692560+favouredddd@users.noreply.github.com>
Date: Mon, 15 May 2023 18:10:45 +0800
Subject: [PATCH 067/202] =?UTF-8?q?feat:=20action-sheet=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=B1=82=E7=BA=A7=20(#2002)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/action-sheet/action-sheet.ts   | 2 ++
 src/action-sheet/action-sheet.wxml | 8 +++++++-
 src/action-sheet/props.ts          | 5 +++++
 src/action-sheet/type.ts           | 4 ++++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/action-sheet/action-sheet.ts b/src/action-sheet/action-sheet.ts
index c150bb0fc..e5ea56f25 100644
--- a/src/action-sheet/action-sheet.ts
+++ b/src/action-sheet/action-sheet.ts
@@ -22,6 +22,8 @@ export default class ActionSheet extends SuperComponent {
     classPrefix: name,
     gridThemeItems: [],
     currentSwiperIndex: 0,
+    defaultPopUpProps: {},
+    defaultPopUpzIndex: 11500,
   };
 
   controlledProps = [
diff --git a/src/action-sheet/action-sheet.wxml b/src/action-sheet/action-sheet.wxml
index 9be95bc6a..174ee0145 100644
--- a/src/action-sheet/action-sheet.wxml
+++ b/src/action-sheet/action-sheet.wxml
@@ -4,7 +4,13 @@
 <import src="./template/grid.wxml" />
 
 <view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
-  <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
+  <t-popup
+    visible="{{visible}}"
+    placement="bottom"
+    bind:visible-change="onPopupVisibleChange"
+    z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}"
+    overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"
+  >
     <view
       class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
       tabindex="0"
diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts
index bf710b1f5..a2943547d 100644
--- a/src/action-sheet/props.ts
+++ b/src/action-sheet/props.ts
@@ -50,6 +50,11 @@ const props: TdActionSheetProps = {
     type: Boolean,
     value: false,
   },
+  /** popupProps透传 */
+  popupProps: {
+    type: Object,
+    value: {},
+  },
 };
 
 export default props;
diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts
index 42206ec2b..899e70a8e 100644
--- a/src/action-sheet/type.ts
+++ b/src/action-sheet/type.ts
@@ -76,6 +76,10 @@ export interface TdActionSheetProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  popupProps: {
+    type: ObjectConstructor;
+    value?: object;
+  };
 }
 
 export interface ActionSheetItem {

From 720478a7210e6cba9801cb4ec605a4a94403e709 Mon Sep 17 00:00:00 2001
From: pingwu <58472278+wuping97@users.noreply.github.com>
Date: Mon, 15 May 2023 18:30:15 +0800
Subject: [PATCH 068/202] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=20row=20=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=20col=20=E4=B8=8D=E6=8D=A2=E8=A1=8C=E9=97=AE=E9=A2=98=20(#1996?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复row样式问题

fix #1964, fix #1851

* fix: 修复多余 row 的样式导致 col 不换行问题

"fix #1964", "fix #1851"

---------

Co-authored-by: pingwu <pingwu@tencent.com>
---
 src/row/row.less | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/row/row.less b/src/row/row.less
index 0c31a451e..c206b7cf7 100644
--- a/src/row/row.less
+++ b/src/row/row.less
@@ -1,8 +1,3 @@
-.t-row {
-  display: flex;
-  align-items: center;
-}
-
 .t-row:after {
   clear: both;
   content: '';

From 5b32707e94f44c710d0954e8e43d7ea63976bcda Mon Sep 17 00:00:00 2001
From: yuchumian <26185330+yuchumian@users.noreply.github.com>
Date: Mon, 15 May 2023 18:36:14 +0800
Subject: [PATCH 069/202] fix(dialog): display of cancel and confirm button
 when calling a command. (#1986)

* fix(dialog): Display problem of cancel and confirm button when calling a command.

* revert(dialog): Revert changes to ` dialog.wxml`

* fix(dialog): Button issue when invoking commands.

---------

Co-authored-by: yuchumian <yuchumian@163.com>
---
 src/dialog/dialog.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/dialog/dialog.ts b/src/dialog/dialog.ts
index d33912b48..2856f0d42 100644
--- a/src/dialog/dialog.ts
+++ b/src/dialog/dialog.ts
@@ -65,6 +65,8 @@ export default class Dialog extends SuperComponent {
           rect[`_${key}`] = { ...base, content: btn };
         } else if (btn && typeof btn === 'object') {
           rect[`_${key}`] = { ...base, ...btn };
+        } else {
+          rect[`_${key}`] = null;
         }
       });
 

From 6438cf7cc7cd218468af57355eb4d8418f0d1f43 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 15 May 2023 19:05:59 +0800
Subject: [PATCH 070/202] fix(calendar): enable calendar type (#2003)

---
 src/calendar/calendar.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/calendar/calendar.ts b/src/calendar/calendar.ts
index 7e9d0552e..998ddc78d 100644
--- a/src/calendar/calendar.ts
+++ b/src/calendar/calendar.ts
@@ -57,6 +57,9 @@ export default class Calendar extends SuperComponent {
   };
 
   observers = {
+    type(v) {
+      this.base.type = v;
+    },
     confirmBtn(v) {
       if (typeof v === 'string') {
         this.setData({ innerConfirmBtn: v === 'slot' ? 'slot' : { content: v } });

From a0e578bb30c0c0de60dc2e77c44ff16501f33841 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 15 May 2023 19:19:23 +0800
Subject: [PATCH 071/202] chore: publish v1.1.6 (#2004)

* chore: publish v1.1.6

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 25 +++++++++++++++++++++++++
 package.json |  2 +-
 src/_common  |  2 +-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc8407989..68dba1369 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,31 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.6 `2023-05-15` 
+### 🚀 Features
+- `Icon`: 更新版本至 v0.1.4 @anlyyao ([#1979](https://github.com/Tencent/tdesign-miniprogram/pull/1979))
+- `DropdownMenu`: 选项过多时自动滚动到已选项 @jarmywang ([#1981](https://github.com/Tencent/tdesign-miniprogram/pull/1981))
+- `Slider`: 属性 `step` 支持传入小数 @anlyyao ([#1990](https://github.com/Tencent/tdesign-miniprogram/pull/1990))
+- `GridItem`: 新增 click 事件 @anlyyao ([#1993](https://github.com/Tencent/tdesign-miniprogram/pull/1993))
+- `Picker`: 新增 popupProps 属性，透传至 Popup @favouredddd ([#1985](https://github.com/Tencent/tdesign-miniprogram/pull/1985))
+- `DateTimePikcer`: 新增支持 popupProps 属性，透传至 Popup @favouredddd ([#1991](https://github.com/Tencent/tdesign-miniprogram/pull/1991))
+- `ActionSheet`: 新增 PopupProps 属性，透传至 Popup @favouredddd ([#2002](https://github.com/Tencent/tdesign-miniprogram/pull/2002))
+
+### 🐞 Bug Fixes
+- `NavBar`: 修复 fixed 定位 @betavs ([#1982](https://github.com/Tencent/tdesign-miniprogram/pull/1982))
+- `Slider`: 修复 change 事件重复触发相同值的问题 @anlyyao ([#1990](https://github.com/Tencent/tdesign-miniprogram/pull/1990))
+- `Input`: 修复 label 为英文时无法换行 @anlyyao ([#1994](https://github.com/Tencent/tdesign-miniprogram/pull/1994))
+- `PullDownRefresh`: 解决 refresh 事件触发时机错误的问题 @LeeJim ([#1998](https://github.com/Tencent/tdesign-miniprogram/pull/1998))
+- `PullDownRefresh`: 修复 value 不可控的问题 @LeeJim ([#1998](https://github.com/Tencent/tdesign-miniprogram/pull/1998))
+- `Button`: 修复 variant 无法动态响应的问题 @favouredddd ([#2000](https://github.com/Tencent/tdesign-miniprogram/pull/2000))
+- `DropdownMenu`: 单选选项行高不一致 @bitjian ([#1992](https://github.com/Tencent/tdesign-miniprogram/pull/1992))
+- `Layout`: 修复 col 组件不换行的问题，移除 flex 布局 @wuping97 ([#1996](https://github.com/Tencent/tdesign-miniprogram/pull/1996))
+- `Dialog`: 修复无法动态移除按钮的问题 @yuchumian ([#1986](https://github.com/Tencent/tdesign-miniprogram/pull/1986))
+- `Calendar`: 修复 type 属性失效的问题 @LeeJim ([#2003](https://github.com/Tencent/tdesign-miniprogram/pull/2003))
+
+### 🚧 Others
+- `Steps`: 移除文档中无效的 API @anlyyao ([#1995](https://github.com/Tencent/tdesign-miniprogram/pull/1995))
+
 ## 🌈 1.1.5 `2023-05-08` 
 ### 🚀 Features
 - `PulldownRefresh`: 支持透传更多属性至 scroll-view 组件 @LeeJim ([#1959](https://github.com/Tencent/tdesign-miniprogram/pull/1959))
diff --git a/package.json b/package.json
index 3eaffa54c..fe2b67ad9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.5-beta",
+  "version": "1.1.6",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",
diff --git a/src/_common b/src/_common
index 550275e1f..eafebccb6 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 550275e1fec44dc1003d3dfde38b45e054860494
+Subproject commit eafebccb6b2e9515e79bf80ce9db0263d9896d24

From 562673d149bb808c43aff3c5b00c93be25b13b1f Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 16 May 2023 20:10:53 +0800
Subject: [PATCH 072/202] chore(ActionSheet): prohibit exporting components at
 index (#2008)

---
 src/action-sheet/index.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/action-sheet/index.ts b/src/action-sheet/index.ts
index dc8fe55b1..f94de1850 100644
--- a/src/action-sheet/index.ts
+++ b/src/action-sheet/index.ts
@@ -1,5 +1,13 @@
-import ActionSheet from './action-sheet';
+import { show, close, ActionSheetItem, ActionSheetTheme, ActionSheetShowOption } from './show';
 
-export * from './show';
+export { ActionSheetItem, ActionSheetTheme, ActionSheetShowOption };
 
-export default ActionSheet;
+export default {
+  show(options: ActionSheetShowOption) {
+    return show(options);
+  },
+
+  close(options: ActionSheetShowOption) {
+    return close(options);
+  },
+};

From 5869e01a6c7c13339eebdc54837357e31602b682 Mon Sep 17 00:00:00 2001
From: favouredddd <40692560+favouredddd@users.noreply.github.com>
Date: Wed, 17 May 2023 10:52:35 +0800
Subject: [PATCH 073/202] =?UTF-8?q?feat:=20action-sheet=E6=94=AF=E6=8C=81c?=
 =?UTF-8?q?ancel=E7=9A=84=E9=A2=9C=E8=89=B2=E5=8F=98=E9=87=8F=20(#2007)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/action-sheet/action-sheet.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/action-sheet/action-sheet.less b/src/action-sheet/action-sheet.less
index 1ba042768..1ba6ea2c3 100644
--- a/src/action-sheet/action-sheet.less
+++ b/src/action-sheet/action-sheet.less
@@ -10,6 +10,7 @@
 @action-sheet-description-color: var(--td-action-sheet-description-color, @font-gray-3);
 @action-sheet-text-align: var(--td-action-sheet-text-align, center);
 @action-sheet-cancel-height: var(--td-action-sheet-cancel-height, 96rpx);
+@action-sheet-cancel-color:var (--td-action-sheet-cancel-color, @font-gray-1);
 
 .@{action-sheet} {
   &__content {
@@ -124,6 +125,7 @@
 
   &__cancel {
     .flex-center();
+    color: @action-sheet-cancel-color;
     height: @action-sheet-cancel-height;
   }
 

From bc1b1c59f363fad39029d19ed299b1c0b0bb6d89 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Wed, 17 May 2023 14:38:30 +0800
Subject: [PATCH 074/202] fix(sticky): resolve width (#2012)

---
 src/sticky/sticky.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sticky/sticky.less b/src/sticky/sticky.less
index 0ebbc231c..cd54d569e 100644
--- a/src/sticky/sticky.less
+++ b/src/sticky/sticky.less
@@ -4,6 +4,6 @@
   position: relative;
 
   &__content {
-    width: 100%;
+    width: fit-content;
   }
 }

From d0a2a6149e910bac6557a7cf3331730a8d7bc3c6 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Wed, 17 May 2023 15:03:39 +0800
Subject: [PATCH 075/202] fix(side-bar-item): fix prefix and suffix style
 anomalies (#2011)

---
 src/side-bar-item/side-bar-item.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/side-bar-item/side-bar-item.less b/src/side-bar-item/side-bar-item.less
index 347d3d707..6885047db 100644
--- a/src/side-bar-item/side-bar-item.less
+++ b/src/side-bar-item/side-bar-item.less
@@ -40,7 +40,7 @@
     z-index: 1;
     position: absolute;
     right: 0;
-    width: calc(@side-bar-border-radius * 2);
+    width: 100%;
     height: calc(@side-bar-border-radius * 2);
     background: #fff;
 

From 66f7ad0541fa8207d16e032eace7bd1f83887332 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Wed, 17 May 2023 15:05:32 +0800
Subject: [PATCH 076/202] fix(tabbar): resolve width when virtual-host not
 available (#2013)

---
 src/tab-bar-item/tab-bar-item.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/tab-bar-item/tab-bar-item.less b/src/tab-bar-item/tab-bar-item.less
index e2b1fe7c4..184c6dd6a 100644
--- a/src/tab-bar-item/tab-bar-item.less
+++ b/src/tab-bar-item/tab-bar-item.less
@@ -13,6 +13,10 @@
 @tab-bar-spread-shadow: var(--td-tab-bar-spread-shadow, @shadow-3);
 @tab-bar-spread-border-color: var(--td-tab-bar-spread-border-color, @border-color);
 
+:host {
+  flex: 1;
+}
+
 .@{item} {
   flex: 1;
   height: @tab-bar-height;

From 2ed0bfbbfe81d24041ef96223bed4d2f673811a6 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Wed, 17 May 2023 15:06:15 +0800
Subject: [PATCH 077/202] chore: publish v1.1.6-beta

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fe2b67ad9..ea8fcfea2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.6",
+  "version": "1.1.6-beta",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 1891f5c2e3c47064e50dd6b9b624142061da7967 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Thu, 18 May 2023 15:56:20 +0800
Subject: [PATCH 078/202] build: update npm publish

---
 .github/workflows/tag-push.yml | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/tag-push.yml b/.github/workflows/tag-push.yml
index 26fd779cc..9940e74c7 100644
--- a/.github/workflows/tag-push.yml
+++ b/.github/workflows/tag-push.yml
@@ -1,7 +1,6 @@
 name: TAG_PUSH
 
-on:
-  create
+on: create
 
 jobs:
   TAG_PUSH:
@@ -24,7 +23,7 @@ jobs:
           es6: true
           es7: true
           minify: true
-        env: 
+        env:
           MINI_APP_ID: ${{ secrets.TDESIGN_APP_ID }}
           MINI_APP_PRIVATE_KEY: ${{ secrets.TDESIGN_MINI_KEY }}
       - id: publish
@@ -32,8 +31,7 @@ jobs:
         uses: JS-DevTools/npm-publish@v1
         with:
           token: ${{ secrets.TDESIGN_NPM_TOKEN }}
-          tag: ${{ contains(github.ref_name, 'alpha') && 'alpha' || 'latest' }}
+          tag: ${{ contains(github.ref_name, 'beta') && 'beta' || 'latest' }}
       - if: steps.publish.outputs.type != 'none'
         run: |
           echo "Version changed: ${{ steps.publish.outputs.old-version }} => ${{ steps.publish.outputs.version }}"
-

From 3cf740b9fb7745c4ca465ae14f023270d75c9dfb Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Thu, 18 May 2023 15:57:33 +0800
Subject: [PATCH 079/202] fix(action-sheet): resolve invalid syntax

---
 src/action-sheet/action-sheet.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/action-sheet/action-sheet.less b/src/action-sheet/action-sheet.less
index 1ba6ea2c3..5897eb305 100644
--- a/src/action-sheet/action-sheet.less
+++ b/src/action-sheet/action-sheet.less
@@ -10,7 +10,7 @@
 @action-sheet-description-color: var(--td-action-sheet-description-color, @font-gray-3);
 @action-sheet-text-align: var(--td-action-sheet-text-align, center);
 @action-sheet-cancel-height: var(--td-action-sheet-cancel-height, 96rpx);
-@action-sheet-cancel-color:var (--td-action-sheet-cancel-color, @font-gray-1);
+@action-sheet-cancel-color: var(--td-action-sheet-cancel-color, @font-gray-1);
 
 .@{action-sheet} {
   &__content {

From 20dbd737883adc0592fc58a466db1a0332192b00 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 23 May 2023 18:38:44 +0800
Subject: [PATCH 080/202] fix(Icon): rename some icons (#2020)

* fix(Icon): rename some icons

* test: update snapshots
---
 .../index.test.js.snap                        |   50 +-
 .../index.test.js.snap                        | 1428 +++++++++--------
 .../index.test.js.snap                        |   80 +-
 .../index.test.js.snap                        |  260 +--
 .../index.test.js.snap                        |   64 +-
 .../index.test.js.snap                        |  706 ++++----
 .../index.test.js.snap                        |   74 +-
 .../index.test.js.snap                        |   18 +-
 .../index.test.js.snap                        |   16 +-
 .../__test__/__snapshots__/demo.test.js.snap  |   42 +-
 .../__virtualHostSnapshot__/demo.test.js.snap |   42 +-
 src/icon/_example/data.js                     |    8 +-
 src/icon/icon.less                            |   14 +-
 .../index.test.js.snap                        |  255 ++-
 .../index.test.js.snap                        |  103 +-
 .../index.test.js.snap                        |  332 ++--
 .../index.test.js.snap                        |  142 +-
 .../index.test.js.snap                        |  210 +--
 .../index.test.js.snap                        |  116 +-
 .../index.test.js.snap                        |   20 +-
 .../index.test.js.snap                        |  236 +--
 .../__virtualHostSnapshot__/demo.test.js.snap |    2 +-
 .../index.test.js.snap                        |   78 +-
 .../index.test.js.snap                        |  216 +--
 .../index.test.js.snap                        |  104 +-
 .../index.test.js.snap                        |   30 +-
 .../index.test.js.snap                        |   88 +-
 27 files changed, 2552 insertions(+), 2182 deletions(-)

diff --git a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5cd6176dc..c292c83f6 100644
--- a/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/avatar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,35 +2,45 @@
 
 exports[`Avatar & Avatar Groups Avatar Props : style && customStyle 1`] = `
 <main>
-  <wx-view
-    class="t-avatar__wrapper class t-class"
-    style="color: red; font-size: 9px;"
+  <main
+    class="avatar"
   >
     <wx-view
-      ariaDescribedby="t_badge_0_description"
-      ariaLabelledby="t_badge_0_label"
-      ariaRole="option"
-      class="t-badge  class t-class"
-      style=""
+      class="t-avatar__wrapper class t-class"
+      style="color: red; font-size: 9px;"
     >
-      <wx-view
-        ariaHidden="true"
-        class="t-badge__content t-class-content"
-        id="t_badge_0_label"
+      <t-badge
+        tClass=""
+        tClassContent=""
+        tClassCount=""
       >
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="头像"
-          ariaRole="img"
-          class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
+          ariaDescribedby="t_badge_0_description"
+          ariaLabelledby="t_badge_0_label"
+          ariaRole="option"
+          class="t-badge  class t-class"
           style=""
         >
           <wx-view
-            class="t-avatar__text t-class-content"
-          />
+            ariaHidden="true"
+            class="t-badge__content t-class-content"
+            id="t_badge_0_label"
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel="头像"
+              ariaRole="img"
+              class="t-avatar t-avatar--circle  t-avatar--medium t-class-image"
+              style=""
+            >
+              <wx-view
+                class="t-avatar__text t-class-content"
+              />
+            </wx-view>
+          </wx-view>
         </wx-view>
-      </wx-view>
+      </t-badge>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5e9f6aaf6..7b7a84a67 100644
--- a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,777 +2,809 @@
 
 exports[`calendar :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
-  >
-    <wx-view
-      class="t-popup__content t-class-content"
+  <t-calendar>
+    <t-popup
+      class="class"
+      bind:visible-change="onVisibleChange"
     >
       <wx-view
-        class="t-calendar t-calendar--popup class t-class"
-        style=""
+        ariaModal="{{true}}"
+        ariaRole="dialog"
+        class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+        style="z-index:11500;"
+        bind:transitionend="onTransitionEnd"
       >
         <wx-view
-          class="t-calendar__title"
-          tabindex="0"
+          class="t-popup__content t-class-content"
         >
-          <wx-text>
-            请选择日期
-          </wx-text>
-        </wx-view>
-        <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="关闭"
-          ariaRole="button"
-          class="t-icon class t-class"
-          style="font-size: 24px;"
-          bind:tap="onTap"
-        >
-          <wx-label
-            class="t-icon-close t-icon-base"
-          />
-        </wx-view>
-        <wx-view
-          ariaHidden="{{true}}"
-          class="t-calendar__days"
-        >
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            日
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            一
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            二
-          </wx-view>
           <wx-view
-            class="t-calendar__days-item"
-          >
-            三
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            四
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            五
-          </wx-view>
-          <wx-view
-            class="t-calendar__days-item"
-          >
-            六
-          </wx-view>
-        </wx-view>
-        <wx-scroll-view
-          class="t-calendar__months"
-          enhanced="{{true}}"
-          scrollIntoView="year_2022_month_9"
-          scrollY="{{true}}"
-          showScrollbar="{{false}}"
-        >
-          <wx-view
-            class="t-calendar__month"
-            id="year_2022_month_9"
-          >
-            2022 年 10 月
-          </wx-view>
-          <wx-view
-            class="t-calendar__dates"
+            class="t-calendar t-calendar--popup class t-class"
+            style=""
           >
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
-            <wx-view />
             <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月1日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 1,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+              class="t-calendar__title"
+              tabindex="0"
+            >
+              <wx-text>
+                请选择日期
+              </wx-text>
+            </wx-view>
+            <t-icon
+              class="t-calendar__close-btn"
+              bind:tap="handleClose"
+            >
+              <wx-view
+                ariaHidden="{{false}}"
+                ariaLabel="关闭"
+                ariaRole="button"
+                class="t-icon class t-class"
+                style="font-size: 24px;"
+                bind:tap="onTap"
+              >
+                <wx-label
+                  class="t-icon-close t-icon-base"
+                />
+              </wx-view>
+            </t-icon>
+            <wx-view
+              ariaHidden="{{true}}"
+              class="t-calendar__days"
+            >
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                日
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                一
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                二
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                三
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                四
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                五
+              </wx-view>
+              <wx-view
+                class="t-calendar__days-item"
+              >
+                六
+              </wx-view>
+            </wx-view>
+            <wx-scroll-view
+              class="t-calendar__months"
+              enhanced="{{true}}"
+              scrollIntoView="year_2022_month_9"
+              scrollY="{{true}}"
+              showScrollbar="{{false}}"
+            >
+              <wx-view
+                class="t-calendar__month"
+                id="year_2022_month_9"
+              >
+                2022 年 10 月
+              </wx-view>
+              <wx-view
+                class="t-calendar__dates"
+              >
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view />
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月1日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 1,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             1
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月2日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 2,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月2日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 2,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             2
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月3日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 3,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月3日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 3,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             3
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月4日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 4,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月4日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 4,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             4
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月5日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 5,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月5日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 5,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             5
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月6日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 6,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月6日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 6,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             6
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月7日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 7,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月7日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 7,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             7
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月8日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 8,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月8日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 8,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             8
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月9日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 9,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月9日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 9,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             9
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月10日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 10,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月10日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 10,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             10
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月11日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 11,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月11日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 11,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             11
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月12日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 12,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月12日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 12,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             12
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月13日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 13,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月13日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 13,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             13
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月14日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 14,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月14日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 14,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             14
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月15日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 15,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月15日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 15,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             15
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="已选中, 10月16日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--selected"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 16,
-                  "type": "selected",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="已选中, 10月16日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--selected"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 16,
+                      "type": "selected",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             16
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月17日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 17,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月17日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 17,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             17
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月18日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 18,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月18日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 18,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             18
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月19日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 19,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月19日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 19,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             19
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月20日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 20,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月20日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 20,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             20
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月21日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 21,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月21日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 21,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             21
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月22日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 22,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月22日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 22,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             22
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月23日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 23,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月23日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 23,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             23
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月24日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 24,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月24日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 24,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             24
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月25日, 星期二"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 25,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月25日, 星期二"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 25,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             25
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月26日, 星期三"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 26,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月26日, 星期三"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 26,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             26
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月27日, 星期四"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 27,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月27日, 星期四"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 27,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             27
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月28日, 星期五"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 28,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月28日, 星期五"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 28,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             28
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月29日, 星期六"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 29,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月29日, 星期六"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 29,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             29
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月30日, 星期日"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 30,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月30日, 星期日"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 30,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             30
             
-            </wx-view>
-            <wx-view
-              ariaDisabled="{{false}}"
-              ariaLabel="10月31日, 星期一"
-              ariaRole="button"
-              class="t-calendar__dates-item  t-calendar__dates-item--"
-              data-date="{{
-                Object {
-                  "date": Object {},
-                  "day": 31,
-                  "type": "",
-                }
-              }}"
-              data-month="{{9}}"
-              data-year="{{2022}}"
-              bind:tap="handleSelect"
-            >
-              
+                </wx-view>
+                <wx-view
+                  ariaDisabled="{{false}}"
+                  ariaLabel="10月31日, 星期一"
+                  ariaRole="button"
+                  class="t-calendar__dates-item  t-calendar__dates-item--"
+                  data-date="{{
+                    Object {
+                      "date": Object {},
+                      "day": 31,
+                      "type": "",
+                    }
+                  }}"
+                  data-month="{{9}}"
+                  data-year="{{2022}}"
+                  bind:tap="handleSelect"
+                >
+                  
             31
             
+                </wx-view>
+              </wx-view>
+            </wx-scroll-view>
+            <wx-view
+              class="t-calendar__footer"
+            >
+              <t-button
+                class="t-calendar__confirm-btn"
+                data-extra=""
+                data-type=""
+                tClass=""
+                bind:contact="onTplButtonTap"
+                bind:error="onTplButtonTap"
+                bind:getphonenumber="onTplButtonTap"
+                bind:getuserinfo="onTplButtonTap"
+                bind:launchapp="onTplButtonTap"
+                bind:opensetting="onTplButtonTap"
+                bind:tap="onTplButtonTap"
+              >
+                <wx-button
+                  appParameter=""
+                  ariaLabel=""
+                  class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
+                  data-custom="{{null}}"
+                  formType=""
+                  hoverClass="t-button--hover"
+                  hoverStartTime="{{20}}"
+                  hoverStayTime="{{70}}"
+                  hoverStopPropagation="{{false}}"
+                  lang="en"
+                  openType=""
+                  sendMessageImg=""
+                  sendMessagePath=""
+                  sendMessageTitle=""
+                  sessionFrom=""
+                  showMessageCard="{{false}}"
+                  style=""
+                  bind:chooseavatar="chooseavatar"
+                  bind:contact="contact"
+                  bind:error="error"
+                  bind:getphonenumber="getphonenumber"
+                  bind:getuserinfo="getuserinfo"
+                  bind:launchapp="launchapp"
+                  bind:opensetting="opensetting"
+                  catch:tap="handleTap"
+                >
+                  <wx-view
+                    class="t-button__content"
+                  >
+                    
+                    确定
+                  </wx-view>
+                </wx-button>
+              </t-button>
             </wx-view>
           </wx-view>
-        </wx-scroll-view>
-        <wx-view
-          class="t-calendar__footer"
-        >
-          <wx-button
-            appParameter=""
-            ariaLabel=""
-            class="class t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
-            data-custom="{{null}}"
-            formType=""
-            hoverClass="t-button--hover"
-            hoverStartTime="{{20}}"
-            hoverStayTime="{{70}}"
-            hoverStopPropagation="{{false}}"
-            lang="en"
-            openType=""
-            sendMessageImg=""
-            sendMessagePath=""
-            sendMessageTitle=""
-            sessionFrom=""
-            showMessageCard="{{false}}"
-            style=""
-            bind:chooseavatar="chooseavatar"
-            bind:contact="contact"
-            bind:error="error"
-            bind:getphonenumber="getphonenumber"
-            bind:getuserinfo="getuserinfo"
-            bind:launchapp="launchapp"
-            bind:opensetting="opensetting"
-            catch:tap="handleTap"
-          >
-            <wx-view
-              class="t-button__content"
-            >
-              
-              确定
-            </wx-view>
-          </wx-button>
+          <wx-view
+            class="t-popup__close"
+            bind:tap="handleClose"
+          />
         </wx-view>
       </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+      <t-overlay
+        class="test"
+        id="popup-overlay"
+        bind:tap="handleOverlayClick"
+      >
+        <wx-view
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
+          style="z-index:11000;"
+          bind:tap="handleClick"
+          catch:touchmove="noop"
+          bind:transitionend="onTransitionEnd"
+        />
+      </t-overlay>
+    </t-popup>
+  </t-calendar>
 </main>
 `;
diff --git a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
index 9bfb5aec0..049933a34 100644
--- a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,56 +2,66 @@
 
 exports[`cell :base 1`] = `
 <main>
-  <wx-view
-    ariaLabel=""
-    ariaRole=""
-    class="class t-class t-cell  t-cell--middle"
-    hoverClass=""
-    hoverStayTime="70"
-    style=""
-    bind:tap="onClick"
+  <main
+    id="cell"
   >
     <wx-view
-      class="t-cell__left t-class-left"
-    />
-    <wx-view
-      class="t-cell__title"
+      ariaLabel=""
+      ariaRole=""
+      class="class t-class t-cell  t-cell--middle"
+      hoverClass=""
+      hoverStayTime="70"
+      style=""
+      bind:tap="onClick"
     >
       <wx-view
-        class="t-cell__title-text  t-class-title"
+        class="t-cell__left t-class-left"
       />
       <wx-view
-        class="t-cell__description t-class-description"
+        class="t-cell__title"
+      >
+        <wx-view
+          class="t-cell__title-text  t-class-title"
+        />
+        <wx-view
+          class="t-cell__description t-class-description"
+        />
+      </wx-view>
+      <wx-view
+        class="t-cell__note t-class-note"
       />
-    </wx-view>
-    <wx-view
-      class="t-cell__note t-class-note"
-    />
-    <wx-view
-      class="t-cell__right t-class-right"
-    >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-cell__right t-class-right"
       >
-        <wx-label
-          class="t-icon- t-icon-base"
-        />
+        <t-icon
+          tClass="t-cell__right-icon t-class-right-icon"
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon- t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
 
 exports[`cell :with group 1`] = `
 <main>
-  <wx-view
-    class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
-    style=""
-  />
+  <main>
+    <wx-view
+      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
+      style=""
+    />
+  </main>
 </main>
 `;
diff --git a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
index bbad0465c..3c2af13a0 100644
--- a/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/collapse/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,151 +1,183 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`collapse :defaultExpandAll 1`] = `
-<wx-view
-  class="class t-class t-collapse t-collapse--default"
-  style=""
+<t-collapse
+  id="expandAll"
 >
   <wx-view
-    class="class t-collapse-panel t-collapse-panel--bottom t-class"
+    class="class t-class t-collapse t-collapse--default"
     style=""
   >
-    <wx-view
-      ariaDisabled="{{false}}"
-      ariaExpanded="{{false}}"
-      ariaRole="button"
-      class="t-collapse-panel__title"
-      bind:tap="onClick"
-    >
+    <t-collapse-panel>
       <wx-view
-        ariaLabel=""
-        ariaRole=""
-        class="class t-class t-cell  t-cell--middle"
-        hoverClass=""
-        hoverStayTime="70"
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
         style=""
-        bind:tap="onClick"
       >
         <wx-view
-          class="t-cell__left t-class-left"
-        />
-        <wx-view
-          class="t-cell__title"
+          ariaDisabled="{{false}}"
+          ariaExpanded="{{false}}"
+          ariaRole="button"
+          class="t-collapse-panel__title"
+          bind:tap="onClick"
         >
-          <wx-view
-            class="t-cell__title-text  t-class-title"
+          <t-cell
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-class-header"
+            tClassHover="class-header-hover"
+            tClassNote="class-note "
+            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
+            tClassTitle="class-title "
           >
-             first 
-          </wx-view>
-          <wx-view
-            class="t-cell__description t-class-description"
-          />
+            <wx-view
+              ariaLabel=""
+              ariaRole=""
+              class="class t-class t-cell  t-cell--middle"
+              hoverClass=""
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="t-cell__left t-class-left"
+              />
+              <wx-view
+                class="t-cell__title"
+              >
+                <wx-view
+                  class="t-cell__title-text  t-class-title"
+                >
+                   first 
+                </wx-view>
+                <wx-view
+                  class="t-cell__description t-class-description"
+                />
+              </wx-view>
+              <wx-view
+                class="t-cell__note t-class-note"
+              />
+              <wx-view
+                class="t-cell__right t-class-right"
+              >
+                <t-icon
+                  tClass="t-cell__right-icon t-class-right-icon"
+                >
+                  <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
+                    class="t-icon class t-class"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-label
+                      class="t-icon-chevron-down t-icon-base"
+                    />
+                  </wx-view>
+                </t-icon>
+              </wx-view>
+            </wx-view>
+          </t-cell>
         </wx-view>
         <wx-view
-          class="t-cell__note t-class-note"
-        />
-        <wx-view
-          class="t-cell__right t-class-right"
+          animation=""
+          ariaHidden="{{true}}"
+          class="t-collapse-panel__wrapper"
         >
           <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
+            class="t-collapse-panel__content t-class-content"
           >
-            <wx-label
-              class="t-icon-chevron-down t-icon-base"
-            />
-          </wx-view>
-        </wx-view>
-      </wx-view>
-    </wx-view>
-    <wx-view
-      animation=""
-      ariaHidden="{{true}}"
-      class="t-collapse-panel__wrapper"
-    >
-      <wx-view
-        class="t-collapse-panel__content t-class-content"
-      >
-        
+            
       
       
-        内容1
+            内容1
+          </wx-view>
+        </wx-view>
       </wx-view>
-    </wx-view>
-  </wx-view>
-  <wx-view
-    class="class t-collapse-panel t-collapse-panel--bottom t-class"
-    style=""
-  >
-    <wx-view
-      ariaDisabled="{{false}}"
-      ariaExpanded="{{true}}"
-      ariaRole="button"
-      class="t-collapse-panel__title"
-      bind:tap="onClick"
-    >
+    </t-collapse-panel>
+    <t-collapse-panel>
       <wx-view
-        ariaLabel=""
-        ariaRole=""
-        class="class t-class t-cell  t-cell--middle"
-        hoverClass=""
-        hoverStayTime="70"
+        class="class t-collapse-panel t-collapse-panel--bottom t-class"
         style=""
-        bind:tap="onClick"
       >
         <wx-view
-          class="t-cell__left t-class-left"
-        />
-        <wx-view
-          class="t-cell__title"
+          ariaDisabled="{{false}}"
+          ariaExpanded="{{true}}"
+          ariaRole="button"
+          class="t-collapse-panel__title"
+          bind:tap="onClick"
         >
-          <wx-view
-            class="t-cell__title-text  t-class-title"
+          <t-cell
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
+            tClassHover="class-header-hover"
+            tClassNote="class-note "
+            tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
+            tClassTitle="class-title "
           >
-             second 
-          </wx-view>
-          <wx-view
-            class="t-cell__description t-class-description"
-          />
+            <wx-view
+              ariaLabel=""
+              ariaRole=""
+              class="class t-class t-cell  t-cell--middle"
+              hoverClass=""
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="t-cell__left t-class-left"
+              />
+              <wx-view
+                class="t-cell__title"
+              >
+                <wx-view
+                  class="t-cell__title-text  t-class-title"
+                >
+                   second 
+                </wx-view>
+                <wx-view
+                  class="t-cell__description t-class-description"
+                />
+              </wx-view>
+              <wx-view
+                class="t-cell__note t-class-note"
+              />
+              <wx-view
+                class="t-cell__right t-class-right"
+              >
+                <t-icon
+                  tClass="t-cell__right-icon t-class-right-icon"
+                >
+                  <wx-view
+                    ariaHidden="{{false}}"
+                    ariaLabel=""
+                    ariaRole=""
+                    class="t-icon class t-class"
+                    style=""
+                    bind:tap="onTap"
+                  >
+                    <wx-label
+                      class="t-icon-chevron-up t-icon-base"
+                    />
+                  </wx-view>
+                </t-icon>
+              </wx-view>
+            </wx-view>
+          </t-cell>
         </wx-view>
         <wx-view
-          class="t-cell__note t-class-note"
-        />
-        <wx-view
-          class="t-cell__right t-class-right"
+          animation=""
+          ariaHidden=""
+          class="t-collapse-panel__wrapper"
         >
           <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
+            class="t-collapse-panel__content t-class-content"
           >
-            <wx-label
-              class="t-icon-chevron-up t-icon-base"
-            />
-          </wx-view>
-        </wx-view>
-      </wx-view>
-    </wx-view>
-    <wx-view
-      animation=""
-      ariaHidden=""
-      class="t-collapse-panel__wrapper"
-    >
-      <wx-view
-        class="t-collapse-panel__content t-class-content"
-      >
-        
+            
       
       
-        内容2
+            内容2
+          </wx-view>
+        </wx-view>
       </wx-view>
-    </wx-view>
+    </t-collapse-panel>
   </wx-view>
-</wx-view>
+</t-collapse>
 `;
diff --git a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
index c4b88938b..311f3161a 100644
--- a/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/count-down/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,48 +2,58 @@
 
 exports[`countdown :autoStart 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 01
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 01
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :base 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 01
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 01
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :base 2`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
-  >
-    00 : 00 : 00
-  </wx-view>
+  <t-count-down>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 00
+    </wx-view>
+  </t-count-down>
 </main>
 `;
 
 exports[`countdown :millisecond 1`] = `
 <main>
-  <wx-view
-    ariaRole="option"
-    class="t-count-down t-count-down--default t-count-down--medium class t-class "
-    style=""
+  <t-count-down
+    id="cd"
   >
-    00 : 00 : 00
-  </wx-view>
+    <wx-view
+      ariaRole="option"
+      class="t-count-down t-count-down--default t-count-down--medium class t-class "
+      style=""
+    >
+      00 : 00 : 00
+    </wx-view>
+  </t-count-down>
 </main>
 `;
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index b980c3e87..ea53b8fb5 100644
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,442 +2,474 @@
 
 exports[`date-time-picker :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
-  >
-    <wx-view
-      class="t-popup__content t-class-content"
+  <t-date-time-picker>
+    <t-picker
+      class="class t-class t-date-time-picker"
+      bind:cancel="onCancel"
+      bind:change="onConfirm"
+      bind:close="onClose"
+      bind:pick="onColumnChange"
+      bind:visible-change="onVisibleChange"
     >
-      <wx-view
-        class="t-picker t-class"
-        slot="content"
-        style=""
+      <t-popup
+        class="class"
+        bind:visible-change="onPopupChange"
       >
         <wx-view
-          class="t-picker__toolbar"
+          ariaModal="{{true}}"
+          ariaRole="dialog"
+          class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+          style="z-index:11500;"
+          bind:transitionend="onTransitionEnd"
         >
           <wx-view
-            class="t-picker__cancel t-class-cancel"
-            bind:tap="onCancel"
-          >
-            取消
-          </wx-view>
-          <wx-view
-            class="t-picker__title t-class-title"
-          >
-            选择日期
-          </wx-view>
-          <wx-view
-            class="t-picker__confirm t-class-confirm"
-            bind:tap="onConfirm"
-          >
-            确定
-          </wx-view>
-        </wx-view>
-        <wx-view
-          class="t-picker__main"
-        >
-          <wx-view
-            class="t-picker-item__group class t-class"
-            style=""
-            bind:touchcancel="onTouchEnd"
-            bind:touchend="onTouchEnd"
-            catch:touchmove="onTouchMove"
-            bind:touchstart="onTouchStart"
+            class="t-popup__content t-class-content"
           >
             <wx-view
-              class="t-picker-item__wrapper"
-              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
+              class="t-picker t-class"
+              slot="content"
+              style=""
             >
               <wx-view
-                class="t-picker-item__item"
-                data-index="{{0}}"
-              >
-                
+                class="t-picker__toolbar"
+              >
+                <wx-view
+                  class="t-picker__cancel t-class-cancel"
+                  bind:tap="onCancel"
+                >
+                  取消
+                </wx-view>
+                <wx-view
+                  class="t-picker__title t-class-title"
+                >
+                  选择日期
+                </wx-view>
+                <wx-view
+                  class="t-picker__confirm t-class-confirm"
+                  bind:tap="onConfirm"
+                >
+                  确定
+                </wx-view>
+              </wx-view>
+              <wx-view
+                class="t-picker__main"
+              >
+                <t-picker-item
+                  class="t-date-time-picker__item"
+                  index="index"
+                >
+                  <wx-view
+                    class="t-picker-item__group class t-class"
+                    style=""
+                    bind:touchcancel="onTouchEnd"
+                    bind:touchend="onTouchEnd"
+                    catch:touchmove="onTouchMove"
+                    bind:touchstart="onTouchStart"
+                  >
+                    <wx-view
+                      class="t-picker-item__wrapper"
+                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
+                    >
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{0}}"
+                      >
+                        
       2000年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{1}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{1}}"
+                      >
+                        
       2001年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{2}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{2}}"
+                      >
+                        
       2002年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{3}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{3}}"
+                      >
+                        
       2003年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{4}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{4}}"
+                      >
+                        
       2004年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{5}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{5}}"
+                      >
+                        
       2005年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{6}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{6}}"
+                      >
+                        
       2006年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{7}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{7}}"
+                      >
+                        
       2007年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{8}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{8}}"
+                      >
+                        
       2008年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{9}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{9}}"
+                      >
+                        
       2009年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{10}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{10}}"
+                      >
+                        
       2010年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{11}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{11}}"
+                      >
+                        
       2011年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{12}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{12}}"
+                      >
+                        
       2012年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{13}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{13}}"
+                      >
+                        
       2013年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{14}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{14}}"
+                      >
+                        
       2014年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{15}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{15}}"
+                      >
+                        
       2015年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{16}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{16}}"
+                      >
+                        
       2016年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{17}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{17}}"
+                      >
+                        
       2017年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{18}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{18}}"
+                      >
+                        
       2018年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{19}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{19}}"
+                      >
+                        
       2019年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{20}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{20}}"
+                      >
+                        
       2020年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item t-picker-item__item--active"
-                data-index="{{21}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item t-picker-item__item--active"
+                        data-index="{{21}}"
+                      >
+                        
       2021年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{22}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{22}}"
+                      >
+                        
       2022年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{23}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{23}}"
+                      >
+                        
       2023年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{24}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{24}}"
+                      >
+                        
       2024年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{25}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{25}}"
+                      >
+                        
       2025年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{26}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{26}}"
+                      >
+                        
       2026年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{27}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{27}}"
+                      >
+                        
       2027年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{28}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{28}}"
+                      >
+                        
       2028年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{29}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{29}}"
+                      >
+                        
       2029年
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{30}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{30}}"
+                      >
+                        
       2030年
     
-              </wx-view>
-            </wx-view>
-          </wx-view>
-          <wx-view
-            class="t-picker-item__group class t-class"
-            style=""
-            bind:touchcancel="onTouchEnd"
-            bind:touchend="onTouchEnd"
-            catch:touchmove="onTouchMove"
-            bind:touchstart="onTouchStart"
-          >
-            <wx-view
-              class="t-picker-item__wrapper"
-              style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
-            >
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{0}}"
-              >
-                
+                      </wx-view>
+                    </wx-view>
+                  </wx-view>
+                </t-picker-item>
+                <t-picker-item
+                  class="t-date-time-picker__item"
+                  index="index"
+                >
+                  <wx-view
+                    class="t-picker-item__group class t-class"
+                    style=""
+                    bind:touchcancel="onTouchEnd"
+                    bind:touchend="onTouchEnd"
+                    catch:touchmove="onTouchMove"
+                    bind:touchstart="onTouchStart"
+                  >
+                    <wx-view
+                      class="t-picker-item__wrapper"
+                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
+                    >
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{0}}"
+                      >
+                        
       1月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{1}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{1}}"
+                      >
+                        
       2月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{2}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{2}}"
+                      >
+                        
       3月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{3}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{3}}"
+                      >
+                        
       4月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{4}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{4}}"
+                      >
+                        
       5月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{5}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{5}}"
+                      >
+                        
       6月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{6}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{6}}"
+                      >
+                        
       7月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{7}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{7}}"
+                      >
+                        
       8月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item t-picker-item__item--active"
-                data-index="{{8}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item t-picker-item__item--active"
+                        data-index="{{8}}"
+                      >
+                        
       9月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{9}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{9}}"
+                      >
+                        
       10月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{10}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{10}}"
+                      >
+                        
       11月
     
-              </wx-view>
-              <wx-view
-                class="t-picker-item__item"
-                data-index="{{11}}"
-              >
-                
+                      </wx-view>
+                      <wx-view
+                        class="t-picker-item__item"
+                        data-index="{{11}}"
+                      >
+                        
       12月
     
+                      </wx-view>
+                    </wx-view>
+                  </wx-view>
+                </t-picker-item>
+                <wx-view
+                  class="t-picker__mask t-picker__mask--top"
+                />
+                <wx-view
+                  class="t-picker__mask t-picker__mask--bottom"
+                />
+                <wx-view
+                  class="t-picker__indicator"
+                />
               </wx-view>
             </wx-view>
+            <wx-view
+              class="t-popup__close"
+              bind:tap="handleClose"
+            />
           </wx-view>
+        </wx-view>
+        <t-overlay
+          class="test"
+          id="popup-overlay"
+          bind:tap="handleOverlayClick"
+        >
           <wx-view
-            class="t-picker__mask t-picker__mask--top"
-          />
-          <wx-view
-            class="t-picker__mask t-picker__mask--bottom"
-          />
-          <wx-view
-            class="t-picker__indicator"
+            ariaLabel="关闭"
+            ariaRole="button"
+            class="t-overlay t-fade-enter t-fade-enter-active class"
+            style="z-index:11000;"
+            bind:tap="handleClick"
+            catch:touchmove="noop"
+            bind:transitionend="onTransitionEnd"
           />
-        </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+        </t-overlay>
+      </t-popup>
+    </t-picker>
+  </t-date-time-picker>
 </main>
 `;
diff --git a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
index 0ffdddadb..45a54cb24 100644
--- a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,41 +2,57 @@
 
 exports[`dialog :base 1`] = `
 <main>
-  <wx-view
-    ariaModal="{{true}}"
-    ariaRole="dialog"
-    class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
-    style="z-index:11500;"
-    bind:transitionend="onTransitionEnd"
+  <t-dialog
+    id="dialog"
   >
-    <wx-view
-      class="t-popup__content t-class-content"
+    <t-popup
+      class="class"
+      tClass="t-dialog__wrapper"
+      bind:visible-change="overlayClick"
     >
       <wx-view
-        class="t-dialog t-class"
-        slot="content"
+        ariaModal="{{true}}"
+        ariaRole="dialog"
+        class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
+        style="z-index:11500;"
+        bind:transitionend="onTransitionEnd"
       >
         <wx-view
-          class="t-dialog__content t-class-content"
-        />
+          class="t-popup__content t-class-content"
+        >
+          <wx-view
+            class="t-dialog t-class"
+            slot="content"
+          >
+            <wx-view
+              class="t-dialog__content t-class-content"
+            />
+            <wx-view
+              class="t-dialog__footer t-dialog__footer--full"
+            />
+          </wx-view>
+          <wx-view
+            class="t-popup__close"
+            bind:tap="handleClose"
+          />
+        </wx-view>
+      </wx-view>
+      <t-overlay
+        class="test"
+        id="popup-overlay"
+        bind:tap="handleOverlayClick"
+      >
         <wx-view
-          class="t-dialog__footer t-dialog__footer--full"
+          ariaLabel="关闭"
+          ariaRole="button"
+          class="t-overlay t-fade-enter t-fade-enter-active class"
+          style="z-index:11000;"
+          bind:tap="handleClick"
+          catch:touchmove="noop"
+          bind:transitionend="onTransitionEnd"
         />
-      </wx-view>
-      <wx-view
-        class="t-popup__close"
-        bind:tap="handleClose"
-      />
-    </wx-view>
-  </wx-view>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+      </t-overlay>
+    </t-popup>
+  </t-dialog>
 </main>
 `;
diff --git a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
index 4fd1b24d2..473ce46af 100644
--- a/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/divider/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,17 +2,21 @@
 
 exports[`Divider :base 1`] = `
 <main>
-  <wx-view
-    class="class t-class "
+  <t-divider
+    class="divider"
   >
     <wx-view
-      class="t-divider t-divider--horizontal t-divider--center  "
-      style=""
+      class="class t-class "
     >
       <wx-view
-        class="t-class-content t-divider__content"
-      />
+        class="t-divider t-divider--horizontal t-divider--center  "
+        style=""
+      >
+        <wx-view
+          class="t-class-content t-divider__content"
+        />
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </t-divider>
 </main>
 `;
diff --git a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
index 663b4673d..a75d29e0d 100644
--- a/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/footer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,15 +2,17 @@
 
 exports[`Footer :base 1`] = `
 <main>
-  <wx-view
-    class="t-footer class t-class"
-    style=""
-  >
+  <main>
     <wx-view
-      class="t-footer__text"
+      class="t-footer class t-class"
+      style=""
     >
-      
+      <wx-view
+        class="t-footer__text"
+      >
+        
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </main>
 </main>
 `;
diff --git a/src/icon/__test__/__snapshots__/demo.test.js.snap b/src/icon/__test__/__snapshots__/demo.test.js.snap
index 1a2e68e40..427bfa0e6 100644
--- a/src/icon/__test__/__snapshots__/demo.test.js.snap
+++ b/src/icon/__test__/__snapshots__/demo.test.js.snap
@@ -84,105 +84,105 @@ exports[`Icon Icon base demo works fine 1`] = `
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-down-triangle-filled"
-        name="arrow-down-triangle-filled"
+        data-name="arrow-down"
+        name="arrow-down"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-down-triangle-filled
+        arrow-down
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-down-triangle"
-        name="arrow-down-triangle"
+        data-name="arrow-left"
+        name="arrow-left"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-down-triangle
+        arrow-left
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-down"
-        name="arrow-down"
+        data-name="arrow-right"
+        name="arrow-right"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-down
+        arrow-right
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-left"
-        name="arrow-left"
+        data-name="arrow-triangle-down-filled"
+        name="arrow-triangle-down-filled"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-left
+        arrow-triangle-down-filled
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-right"
-        name="arrow-right"
+        data-name="arrow-triangle-down"
+        name="arrow-triangle-down"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-right
+        arrow-triangle-down
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-up-triangle-filled"
-        name="arrow-up-triangle-filled"
+        data-name="arrow-triangle-up-filled"
+        name="arrow-triangle-up-filled"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-up-triangle-filled
+        arrow-triangle-up-filled
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-up-triangle"
-        name="arrow-up-triangle"
+        data-name="arrow-triangle-up"
+        name="arrow-triangle-up"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-up-triangle
+        arrow-triangle-up
       </wx-view>
     </wx-view>
     <wx-view
diff --git a/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 1a2e68e40..427bfa0e6 100644
--- a/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -84,105 +84,105 @@ exports[`Icon Icon base demo works fine 1`] = `
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-down-triangle-filled"
-        name="arrow-down-triangle-filled"
+        data-name="arrow-down"
+        name="arrow-down"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-down-triangle-filled
+        arrow-down
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-down-triangle"
-        name="arrow-down-triangle"
+        data-name="arrow-left"
+        name="arrow-left"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-down-triangle
+        arrow-left
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-down"
-        name="arrow-down"
+        data-name="arrow-right"
+        name="arrow-right"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-down
+        arrow-right
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-left"
-        name="arrow-left"
+        data-name="arrow-triangle-down-filled"
+        name="arrow-triangle-down-filled"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-left
+        arrow-triangle-down-filled
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-right"
-        name="arrow-right"
+        data-name="arrow-triangle-down"
+        name="arrow-triangle-down"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-right
+        arrow-triangle-down
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-up-triangle-filled"
-        name="arrow-up-triangle-filled"
+        data-name="arrow-triangle-up-filled"
+        name="arrow-triangle-up-filled"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-up-triangle-filled
+        arrow-triangle-up-filled
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-up-triangle"
-        name="arrow-up-triangle"
+        data-name="arrow-triangle-up"
+        name="arrow-triangle-up"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-up-triangle
+        arrow-triangle-up
       </wx-view>
     </wx-view>
     <wx-view
diff --git a/src/icon/_example/data.js b/src/icon/_example/data.js
index 26b6cdff6..0acd3f085 100644
--- a/src/icon/_example/data.js
+++ b/src/icon/_example/data.js
@@ -4,13 +4,13 @@ const icons = [
   'add',
   'app',
   'arrow-down-rectangle',
-  'arrow-down-triangle-filled',
-  'arrow-down-triangle',
   'arrow-down',
   'arrow-left',
   'arrow-right',
-  'arrow-up-triangle-filled',
-  'arrow-up-triangle',
+  'arrow-triangle-down-filled',
+  'arrow-triangle-down',
+  'arrow-triangle-up-filled',
+  'arrow-triangle-up',
   'arrow-up',
   'attach',
   'backtop-rectangle',
diff --git a/src/icon/icon.less b/src/icon/icon.less
index 309131258..69dbb8d10 100644
--- a/src/icon/icon.less
+++ b/src/icon/icon.less
@@ -61,31 +61,31 @@
   content: '\E005';
 }
 
-.@{prefix}-icon-arrow-down-triangle-filled:before {
+.@{prefix}-icon-arrow-down:before {
   content: '\E006';
 }
 
-.@{prefix}-icon-arrow-down-triangle:before {
+.@{prefix}-icon-arrow-left:before {
   content: '\E007';
 }
 
-.@{prefix}-icon-arrow-down:before {
+.@{prefix}-icon-arrow-right:before {
   content: '\E008';
 }
 
-.@{prefix}-icon-arrow-left:before {
+.@{prefix}-icon-arrow-triangle-down-filled:before {
   content: '\E009';
 }
 
-.@{prefix}-icon-arrow-right:before {
+.@{prefix}-icon-arrow-triangle-down:before {
   content: '\E00A';
 }
 
-.@{prefix}-icon-arrow-up-triangle-filled:before {
+.@{prefix}-icon-arrow-triangle-up-filled:before {
   content: '\E00B';
 }
 
-.@{prefix}-icon-arrow-up-triangle:before {
+.@{prefix}-icon-arrow-triangle-up:before {
   content: '\E00C';
 }
 
diff --git a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
index c361b1971..d9a57a892 100644
--- a/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image-viewer/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,115 +1,196 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`image-viewer :base 1`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
-    class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx; color: inherit;"
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
   >
-    <wx-view
-      ariaLabel="加载中"
-      ariaRole="img"
-      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
 
 exports[`image-viewer :base 2`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
-    class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx; color: inherit;"
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
   >
-    <wx-view
-      ariaLabel="加载中"
-      ariaRole="img"
-      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
 
 exports[`image-viewer :base 3`] = `
-<wx-view
-  ariaHidden="{{false}}"
-  class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
-  style=""
+<t-image
+  class="t-image-viewer__image"
+  data-index="{{0}}"
+  tClass="t-image--external"
+  bind:load="onImageLoadSuccess"
 >
   <wx-view
-    class="class t-class t-loading t-loading--horizontal"
-    style="width: 44rpx; height: 44rpx; color: inherit;"
+    ariaHidden="{{false}}"
+    class="class t-class t-image t-image__mask t-image--loading t-image--shape-square"
+    style=""
   >
-    <wx-view
-      ariaLabel="加载中"
-      ariaRole="img"
-      class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
-      style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+    <t-loading
+      tClass="t-class-load"
+      tClassText="t-image--loading-text"
     >
       <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
-      />
-      <wx-view
-        class="t-loading__dot"
-        style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
-      />
-    </wx-view>
-    <wx-view
-      ariaHidden="{{true}}"
-      ariaLabel=""
-      class="t-loading__text t-loading__text--horizontal t-class-text"
-    />
+        class="class t-class t-loading t-loading--horizontal"
+        style="width: 44rpx; height: 44rpx; color: inherit;"
+      >
+        <wx-view
+          ariaLabel="加载中"
+          ariaRole="img"
+          class="t-class-indicator t-loading__spinner t-loading__spinner--dots "
+          style="width: 44rpx; height: 44rpx; color: inherit;  animation-duration: 0.8s; animation-play-state: running;"
+        >
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.26666666666666666s; animation-play-state: running;"
+          />
+          <wx-view
+            class="t-loading__dot"
+            style="animation-duration: 0.8s; animation-delay:0.5333333333333333s; animation-play-state: running;"
+          />
+        </wx-view>
+        <wx-view
+          ariaHidden="{{true}}"
+          ariaLabel=""
+          class="t-loading__text t-loading__text--horizontal t-class-text"
+        />
+      </wx-view>
+    </t-loading>
   </wx-view>
-</wx-view>
+  <wx-image
+    ariaHidden="{{true}}"
+    ariaLabel=""
+    class="class t-class t-image t-image--shape-square"
+    hidden="{{true}}"
+    id="image"
+    lazyLoad="{{true}}"
+    mode="aspectFit"
+    showMenuByLongpress="{{false}}"
+    src="a.png"
+    style=""
+    webp="{{false}}"
+    bind:error="onLoadError"
+    bind:load="onLoaded"
+  />
+</t-image>
 `;
diff --git a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
index 73c7d73ee..445831548 100644
--- a/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/image/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,63 +2,72 @@
 
 exports[`image :base 1`] = `
 <main>
-  <wx-view
-    ariaHidden="{{false}}"
-    class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
-    style=""
-  >
+  <t-image>
     <wx-view
-      class="t-class-load"
-      style="font-size: 44rpx"
+      ariaHidden="{{false}}"
+      class="class t-class t-image t-image__mask t-image--failed t-image--shape-square"
+      style=""
     >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel="加载失败"
-        ariaRole="img"
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-class-load"
+        style="font-size: 44rpx"
       >
-        <wx-label
-          class="t-icon-close t-icon-base"
-        />
+        <t-icon>
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel="加载失败"
+            ariaRole="img"
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-close t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-image
-    ariaHidden="{{true}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{true}}"
-    id="image"
-    lazyLoad="{{false}}"
-    mode="scaleToFill"
-    showMenuByLongpress="{{false}}"
-    src=""
-    style=""
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
+    <wx-image
+      ariaHidden="{{true}}"
+      ariaLabel=""
+      class="class t-class t-image t-image--shape-square"
+      hidden="{{true}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="scaleToFill"
+      showMenuByLongpress="{{false}}"
+      src=""
+      style=""
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
 </main>
 `;
 
 exports[`image :success 1`] = `
 <main>
-  <wx-image
-    ariaHidden="{{false}}"
-    ariaLabel=""
-    class="class t-class t-image t-image--shape-square"
-    hidden="{{false}}"
-    id="image"
-    lazyLoad="{{false}}"
-    mode="heightFix"
-    showMenuByLongpress="{{false}}"
-    src="https://www.tencent.com/img/index/menu_logo.png"
-    style="height: 0px; width: 0.00px;"
-    webp="{{false}}"
-    bind:error="onLoadError"
-    bind:load="onLoaded"
-  />
+  <t-image
+    id="root"
+    bind:load="handleLoad"
+  >
+    <wx-image
+      ariaHidden="{{false}}"
+      ariaLabel=""
+      class="class t-class t-image t-image--shape-square"
+      hidden="{{false}}"
+      id="image"
+      lazyLoad="{{false}}"
+      mode="heightFix"
+      showMenuByLongpress="{{false}}"
+      src="https://www.tencent.com/img/index/menu_logo.png"
+      style="height: 0px; width: 0.00px;"
+      webp="{{false}}"
+      bind:error="onLoadError"
+      bind:load="onLoaded"
+    />
+  </t-image>
 </main>
 `;
diff --git a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
index 595e9792e..2b1c4656a 100644
--- a/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/input/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,198 +1,218 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`input props : clearable && label && suffix 1`] = `
-<wx-view
-  ariaDescribedby="{{true}}"
-  class="t-input t-input--border t-input--layout-horizontal class t-class"
-  style=""
+<t-input
+  class="base"
 >
   <wx-view
-    class="t-input__wrap--prefix"
+    ariaDescribedby="{{true}}"
+    class="t-input t-input--border t-input--layout-horizontal class t-class"
+    style=""
   >
     <wx-view
-      class="t-input__icon--prefix"
-    />
-    <wx-view
-      ariaHidden="{{true}}"
-      class="t-input__label"
+      class="t-input__wrap--prefix"
     >
-      <wx-text
-        class="t-class-label"
+      <wx-view
+        class="t-input__icon--prefix"
+      />
+      <wx-view
+        ariaHidden="{{true}}"
+        class="t-input__label"
       >
-        tdesign
-      </wx-text>
+        <wx-text
+          class="t-class-label"
+        >
+          tdesign
+        </wx-text>
+      </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-view
-    class="t-input__wrap"
-  >
     <wx-view
-      class="t-input__content t-input--default"
+      class="t-input__wrap"
     >
-      <wx-input
-        adjustPosition="{{true}}"
-        alwaysEmbed="{{false}}"
-        ariaLabel="tdesign"
-        ariaRole="textbox"
-        ariaRoledescription="tdesign"
-        autoFocus="{{false}}"
-        class="t-input__control t-input--left t-class-input"
-        confirmHold="{{false}}"
-        confirmType="done"
-        cursor="{{0}}"
-        cursorSpacing="{{0}}"
-        disabled="{{false}}"
-        focus="{{false}}"
-        holdKeyboard="{{false}}"
-        maxlength="{{-1}}"
-        password="{{false}}"
-        placeholder=""
-        placeholderClass="t-input__placeholder input-placeholder"
-        placeholderStyle=""
-        safePasswordCertPath=""
-        safePasswordCustomHash=""
-        safePasswordLength="{{0}}"
-        safePasswordNonce=""
-        safePasswordSalt=""
-        safePasswordTimeStamp="{{0}}"
-        selectionEnd="{{-1}}"
-        selectionStart="{{-1}}"
-        type="text"
-        value="input输入框"
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-        bind:keyboardheightchange="onKeyboardHeightChange"
-        bind:nicknamereview="onNickNameReview"
-      />
       <wx-view
-        class="t-input__wrap--clearable-icon"
-        bind:touchstart="clearInput"
+        class="t-input__content t-input--default"
       >
+        <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
+          ariaLabel="tdesign"
+          ariaRole="textbox"
+          ariaRoledescription="tdesign"
+          autoFocus="{{false}}"
+          class="t-input__control t-input--left t-class-input"
+          confirmHold="{{false}}"
+          confirmType="done"
+          cursor="{{0}}"
+          cursorSpacing="{{0}}"
+          disabled="{{false}}"
+          focus="{{false}}"
+          holdKeyboard="{{false}}"
+          maxlength="{{-1}}"
+          password="{{false}}"
+          placeholder=""
+          placeholderClass="t-input__placeholder input-placeholder"
+          placeholderStyle=""
+          safePasswordCertPath=""
+          safePasswordCustomHash=""
+          safePasswordLength="{{0}}"
+          safePasswordNonce=""
+          safePasswordSalt=""
+          safePasswordTimeStamp="{{0}}"
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
+          type="text"
+          value="input输入框"
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+          bind:keyboardheightchange="onKeyboardHeightChange"
+          bind:nicknamereview="onNickNameReview"
+        />
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel="清除"
-          ariaRole="button"
-          class="t-icon class t-class"
-          style=""
-          bind:tap="onTap"
+          class="t-input__wrap--clearable-icon"
+          bind:touchstart="clearInput"
         >
-          <wx-label
-            class="t-icon-close-circle-filled t-icon-base"
-          />
+          <t-icon
+            class=""
+            tClass="t-class-clearable"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel="清除"
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-close-circle-filled t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
         </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-input__wrap--suffix t-class-suffix"
-        bind:tap="onSuffixClick"
-      >
-        <wx-text>
-          后置内容
-        </wx-text>
-      </wx-view>
-      <wx-view
-        class="t-input__wrap--suffix-icon"
-        bind:tap="onSuffixIconClick"
-      >
         <wx-view
-          ariaHidden="{{false}}"
-          ariaLabel=""
-          ariaRole="button"
-          class="t-icon class t-class"
-          style=""
-          bind:tap="onTap"
+          class="t-input__wrap--suffix t-class-suffix"
+          bind:tap="onSuffixClick"
         >
-          <wx-label
-            class="t-icon-app t-icon-base"
-          />
+          <wx-text>
+            后置内容
+          </wx-text>
+        </wx-view>
+        <wx-view
+          class="t-input__wrap--suffix-icon"
+          bind:tap="onSuffixIconClick"
+        >
+          <t-icon
+            class=""
+            tClass="t-class-suffix-icon"
+            bind:click=""
+          >
+            <wx-view
+              ariaHidden="{{false}}"
+              ariaLabel=""
+              ariaRole="button"
+              class="t-icon class t-class"
+              style=""
+              bind:tap="onTap"
+            >
+              <wx-label
+                class="t-icon-app t-icon-base"
+              />
+            </wx-view>
+          </t-icon>
         </wx-view>
       </wx-view>
     </wx-view>
   </wx-view>
-</wx-view>
+</t-input>
 `;
 
 exports[`input slots : label 1`] = `
-<wx-view
-  ariaDescribedby="{{true}}"
-  class="t-input t-input--border t-input--layout-horizontal class t-class"
-  style=""
+<t-input
+  class="base"
 >
   <wx-view
-    class="t-input__wrap--prefix"
+    ariaDescribedby="{{true}}"
+    class="t-input t-input--border t-input--layout-horizontal class t-class"
+    style=""
   >
     <wx-view
-      class="t-input__icon--prefix"
-    />
-    <wx-view
-      ariaHidden="{{true}}"
-      class="t-input__label"
+      class="t-input__wrap--prefix"
     >
-      <wx-text
-        slot="label"
+      <wx-view
+        class="t-input__icon--prefix"
+      />
+      <wx-view
+        ariaHidden="{{true}}"
+        class="t-input__label"
       >
-        标签文字
         <wx-text
-          style="color: #e34d59"
+          slot="label"
         >
-          *
+          标签文字
+          <wx-text
+            style="color: #e34d59"
+          >
+            *
+          </wx-text>
         </wx-text>
-      </wx-text>
+      </wx-view>
     </wx-view>
-  </wx-view>
-  <wx-view
-    class="t-input__wrap"
-  >
     <wx-view
-      class="t-input__content t-input--default"
+      class="t-input__wrap"
     >
-      <wx-input
-        adjustPosition="{{true}}"
-        alwaysEmbed="{{false}}"
-        ariaLabel=""
-        ariaRole="textbox"
-        ariaRoledescription=""
-        autoFocus="{{false}}"
-        class="t-input__control t-input--left t-class-input"
-        confirmHold="{{false}}"
-        confirmType="done"
-        cursor="{{0}}"
-        cursorSpacing="{{0}}"
-        disabled="{{false}}"
-        focus="{{false}}"
-        holdKeyboard="{{false}}"
-        maxlength="{{-1}}"
-        password="{{false}}"
-        placeholder=""
-        placeholderClass="t-input__placeholder input-placeholder"
-        placeholderStyle=""
-        safePasswordCertPath=""
-        safePasswordCustomHash=""
-        safePasswordLength="{{0}}"
-        safePasswordNonce=""
-        safePasswordSalt=""
-        safePasswordTimeStamp="{{0}}"
-        selectionEnd="{{-1}}"
-        selectionStart="{{-1}}"
-        type="text"
-        value=""
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-        bind:keyboardheightchange="onKeyboardHeightChange"
-        bind:nicknamereview="onNickNameReview"
-      />
       <wx-view
-        class="t-input__wrap--suffix t-class-suffix"
-        bind:tap="onSuffixClick"
-      />
-      <wx-view
-        class="t-input__wrap--suffix-icon"
-        bind:tap="onSuffixIconClick"
-      />
+        class="t-input__content t-input--default"
+      >
+        <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
+          ariaLabel=""
+          ariaRole="textbox"
+          ariaRoledescription=""
+          autoFocus="{{false}}"
+          class="t-input__control t-input--left t-class-input"
+          confirmHold="{{false}}"
+          confirmType="done"
+          cursor="{{0}}"
+          cursorSpacing="{{0}}"
+          disabled="{{false}}"
+          focus="{{false}}"
+          holdKeyboard="{{false}}"
+          maxlength="{{-1}}"
+          password="{{false}}"
+          placeholder=""
+          placeholderClass="t-input__placeholder input-placeholder"
+          placeholderStyle=""
+          safePasswordCertPath=""
+          safePasswordCustomHash=""
+          safePasswordLength="{{0}}"
+          safePasswordNonce=""
+          safePasswordSalt=""
+          safePasswordTimeStamp="{{0}}"
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
+          type="text"
+          value=""
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
+          bind:keyboardheightchange="onKeyboardHeightChange"
+          bind:nicknamereview="onNickNameReview"
+        />
+        <wx-view
+          class="t-input__wrap--suffix t-class-suffix"
+          bind:tap="onSuffixClick"
+        />
+        <wx-view
+          class="t-input__wrap--suffix-icon"
+          bind:tap="onSuffixIconClick"
+        />
+      </wx-view>
     </wx-view>
   </wx-view>
-</wx-view>
+</t-input>
 `;
diff --git a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
index 8d7f31dc6..67aa8f6c8 100644
--- a/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/message/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,82 +2,98 @@
 
 exports[`message props : style && customStyle 1`] = `
 <main>
-  <wx-view
-    animation="{{
-      Object {
-        "actions": Array [
-          Object {
-            "animates": Array [
-              Object {
-                "args": Array [
-                  66,
-                ],
-                "type": "translateY",
-              },
-            ],
-            "option": Object {
-              "transformOrigin": "50% 50% 0",
-              "transition": Object {
-                "delay": 0,
-                "duration": 500,
-                "timingFunction": "ease",
-              },
-            },
-          },
-        ],
-      }
-    }}"
-    ariaRole="alert"
-    class="t-message class t-class t-message--warning"
+  <t-message
     id="t-message"
-    style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
   >
     <wx-view
-      class="t-message__icon--left"
+      animation="{{
+        Object {
+          "actions": Array [
+            Object {
+              "animates": Array [
+                Object {
+                  "args": Array [
+                    66,
+                  ],
+                  "type": "translateY",
+                },
+              ],
+              "option": Object {
+                "transformOrigin": "50% 50% 0",
+                "transition": Object {
+                  "delay": 0,
+                  "duration": 500,
+                  "timingFunction": "ease",
+                },
+              },
+            },
+          ],
+        }
+      }}"
+      ariaRole="alert"
+      class="t-message class t-class t-message--warning"
+      id="t-message"
+      style="z-index:15000;top:-92rpx;right:32rpx;left:32rpx; color: red; font-size: 9px;"
     >
       <wx-view
-        ariaHidden="{{true}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-message__icon--left"
       >
-        <wx-label
-          class="t-icon-info-circle-filled t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-icon"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-info-circle-filled t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-message__text-wrap "
-      id="t-message__text-wrap"
-      style="text-align: left"
-    >
       <wx-view
-        animation="{{Array []}}"
-        class="t-message__text t-class-content"
-        id="t-message__text"
+        class="t-message__text-wrap "
+        id="t-message__text-wrap"
+        style="text-align: left"
       >
-        这是一条带关闭的消息通知
+        <wx-view
+          animation="{{Array []}}"
+          class="t-message__text t-class-content"
+          id="t-message__text"
+        >
+          这是一条带关闭的消息通知
+        </wx-view>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-message__icon--right"
-      bind:tap="handleClose"
-    >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel="关闭"
-        ariaRole="button"
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-message__icon--right"
+        bind:tap="handleClose"
       >
-        <wx-label
-          class="t-icon-close t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-close-btn"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel="关闭"
+            ariaRole="button"
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-close t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-message>
 </main>
 `;
diff --git a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 282b0277a..198a82e20 100644
--- a/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/navbar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,165 +2,175 @@
 
 exports[`navbar :base 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
         >
-          test
-        </wx-text>
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :base 2`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :base 3`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :fixed 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-    style=""
-  >
+  <t-navbar>
     <wx-view
-      class="t-navbar__placeholder"
-    />
-    <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
+      style=""
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
         >
-          test
-        </wx-text>
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
+        >
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
 
 exports[`navbar :menu button 1`] = `
 <main>
-  <wx-view
-    class="t-navbar t-navbar--fixed  class t-class"
-    style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
-  >
-    <wx-view
-      class="t-navbar__placeholder"
-    />
+  <t-navbar>
     <wx-view
-      class="t-navbar__content"
+      class="t-navbar t-navbar--fixed  class t-class"
+      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
     >
       <wx-view
-        class="t-navbar__left t-class-left"
-      >
-        <wx-view
-          class="t-navbar__capsule t-class-capsule"
-        />
-      </wx-view>
+        class="t-navbar__placeholder"
+      />
       <wx-view
-        class="t-navbar__center t-class-center"
+        class="t-navbar__content"
       >
-        <wx-text
-          class="t-navbar__center-title t-class-title"
+        <wx-view
+          class="t-navbar__left t-class-left"
+        >
+          <wx-view
+            class="t-navbar__capsule t-class-capsule"
+          />
+        </wx-view>
+        <wx-view
+          class="t-navbar__center t-class-center"
         >
-          test
-        </wx-text>
+          <wx-text
+            class="t-navbar__center-title t-class-title"
+          >
+            test
+          </wx-text>
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-navbar>
 </main>
 `;
diff --git a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
index e190e8a3e..7dd7671db 100644
--- a/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/notice-bar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,69 +2,79 @@
 
 exports[`notice-bar props : marquee 1`] = `
 <main>
-  <wx-view
-    class="t-notice-bar t-notice-bar--info class t-class"
-    style=""
+  <t-notice-bar
+    class="base"
   >
     <wx-view
-      class="t-notice-bar__prefix-icon"
-      bind:tap="clickPrefixIcon"
+      class="t-notice-bar t-notice-bar--info class t-class"
+      style=""
     >
       <wx-view
-        ariaHidden="{{false}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style=""
-        bind:tap="onTap"
+        class="t-notice-bar__prefix-icon"
+        bind:tap="clickPrefixIcon"
       >
-        <wx-label
-          class="t-icon-info-circle-filled t-icon-base"
-        />
+        <t-icon
+          class=""
+          tClass="t-class-prefix-icon"
+          bind:click=""
+        >
+          <wx-view
+            ariaHidden="{{false}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-info-circle-filled t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
       </wx-view>
-    </wx-view>
-    <wx-view
-      class="t-notice-bar__content-wrap"
-      bind:tap="clickContent"
-    >
       <wx-view
-        animation="{{
-          Object {
-            "actions": Array [
-              Object {
-                "animates": Array [
-                  Object {
-                    "args": Array [
-                      -350,
-                    ],
-                    "type": "translateX",
-                  },
-                ],
-                "option": Object {
-                  "transformOrigin": "50% 50% 0",
-                  "transition": Object {
-                    "delay": 0,
-                    "duration": 8287.5,
-                    "timingFunction": "linear",
-                  },
-                },
-              },
-            ],
-          }
-        }}"
-        class="t-notice-bar__content t-class-content "
+        class="t-notice-bar__content-wrap"
+        bind:tap="clickContent"
       >
-        提示文字描述提示文字描述提示文字描述提示文字描述文
         <wx-view
-          class="t-notice-bar__operation t-class-operation"
-          catch:tap="clickOperation"
-        />
+          animation="{{
+            Object {
+              "actions": Array [
+                Object {
+                  "animates": Array [
+                    Object {
+                      "args": Array [
+                        -350,
+                      ],
+                      "type": "translateX",
+                    },
+                  ],
+                  "option": Object {
+                    "transformOrigin": "50% 50% 0",
+                    "transition": Object {
+                      "delay": 0,
+                      "duration": 8287.5,
+                      "timingFunction": "linear",
+                    },
+                  },
+                },
+              ],
+            }
+          }}"
+          class="t-notice-bar__content t-class-content "
+        >
+          提示文字描述提示文字描述提示文字描述提示文字描述文
+          <wx-view
+            class="t-notice-bar__operation t-class-operation"
+            catch:tap="clickOperation"
+          />
+        </wx-view>
       </wx-view>
+      <wx-view
+        class="t-notice-bar__suffix-icon"
+        bind:tap="clickSuffixIcon"
+      />
     </wx-view>
-    <wx-view
-      class="t-notice-bar__suffix-icon"
-      bind:tap="clickSuffixIcon"
-    />
-  </wx-view>
+  </t-notice-bar>
 </main>
 `;
diff --git a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
index 3288499cb..7a06bb8be 100644
--- a/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/overlay/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,14 +2,16 @@
 
 exports[`overlay :base 1`] = `
 <main>
-  <wx-view
-    ariaLabel="关闭"
-    ariaRole="button"
-    class="t-overlay t-fade-enter t-fade-enter-active class"
-    style="z-index:11000;"
-    bind:tap="handleClick"
-    catch:touchmove="noop"
-    bind:transitionend="onTransitionEnd"
-  />
+  <t-overlay>
+    <wx-view
+      ariaLabel="关闭"
+      ariaRole="button"
+      class="t-overlay t-fade-enter t-fade-enter-active class"
+      style="z-index:11000;"
+      bind:tap="handleClick"
+      catch:touchmove="noop"
+      bind:transitionend="onTransitionEnd"
+    />
+  </t-overlay>
 </main>
 `;
diff --git a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index 4fa9f7066..9801b437f 100644
--- a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,144 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`picker :base 1`] = `
-<wx-view
-  ariaModal="{{true}}"
-  ariaRole="dialog"
-  class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-  style="z-index:11500;"
-  bind:transitionend="onTransitionEnd"
+<t-picker
+  data-key="yearSeasons"
+  id="yearSeasons"
+  bind:cancel="onPickerCancel"
+  bind:change="onPickerChange"
+  bind:pick="onColumnChange"
 >
-  <wx-view
-    class="t-popup__content t-class-content"
+  <t-popup
+    class="class"
+    bind:visible-change="onPopupChange"
   >
     <wx-view
-      class="t-picker t-class"
-      slot="content"
-      style=""
+      ariaModal="{{true}}"
+      ariaRole="dialog"
+      class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
+      style="z-index:11500;"
+      bind:transitionend="onTransitionEnd"
     >
       <wx-view
-        class="t-picker__toolbar"
+        class="t-popup__content t-class-content"
       >
         <wx-view
-          class="t-picker__cancel t-class-cancel"
-          bind:tap="onCancel"
-        >
-          取消
-        </wx-view>
-        <wx-view
-          class="t-picker__title t-class-title"
-        >
-          
-        </wx-view>
-        <wx-view
-          class="t-picker__confirm t-class-confirm"
-          bind:tap="onConfirm"
-        >
-          确认
-        </wx-view>
-      </wx-view>
-      <wx-view
-        class="t-picker__main"
-      >
-        <wx-view
-          class="t-picker-item__group class t-class"
+          class="t-picker t-class"
+          slot="content"
           style=""
-          bind:touchcancel="onTouchEnd"
-          bind:touchend="onTouchEnd"
-          catch:touchmove="onTouchMove"
-          bind:touchstart="onTouchStart"
         >
           <wx-view
-            class="t-picker-item__wrapper"
-            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+            class="t-picker__toolbar"
           >
             <wx-view
-              class="t-picker-item__item t-picker-item__item--active"
-              data-index="{{0}}"
+              class="t-picker__cancel t-class-cancel"
+              bind:tap="onCancel"
             >
-              
-      2021年
-    
+              取消
             </wx-view>
             <wx-view
-              class="t-picker-item__item"
-              data-index="{{1}}"
+              class="t-picker__title t-class-title"
             >
               
-      2020年
-    
             </wx-view>
             <wx-view
-              class="t-picker-item__item"
-              data-index="{{2}}"
+              class="t-picker__confirm t-class-confirm"
+              bind:tap="onConfirm"
             >
-              
-      2019年
-    
+              确认
             </wx-view>
           </wx-view>
-        </wx-view>
-        <wx-view
-          class="t-picker-item__group class t-class"
-          style=""
-          bind:touchcancel="onTouchEnd"
-          bind:touchend="onTouchEnd"
-          catch:touchmove="onTouchMove"
-          bind:touchstart="onTouchStart"
-        >
           <wx-view
-            class="t-picker-item__wrapper"
-            style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+            class="t-picker__main"
           >
-            <wx-view
-              class="t-picker-item__item t-picker-item__item--active"
-              data-index="{{0}}"
-            >
-              
+            <t-picker-item>
+              <wx-view
+                class="t-picker-item__group class t-class"
+                style=""
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="t-picker-item__wrapper"
+                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+                >
+                  <wx-view
+                    class="t-picker-item__item t-picker-item__item--active"
+                    data-index="{{0}}"
+                  >
+                    
+      2021年
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{1}}"
+                  >
+                    
+      2020年
+    
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{2}}"
+                  >
+                    
+      2019年
+    
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </t-picker-item>
+            <t-picker-item>
+              <wx-view
+                class="t-picker-item__group class t-class"
+                style=""
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="t-picker-item__wrapper"
+                  style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0px, 0)"
+                >
+                  <wx-view
+                    class="t-picker-item__item t-picker-item__item--active"
+                    data-index="{{0}}"
+                  >
+                    
       春
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{1}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{1}}"
+                  >
+                    
       夏
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{2}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{2}}"
+                  >
+                    
       秋
     
-            </wx-view>
-            <wx-view
-              class="t-picker-item__item"
-              data-index="{{3}}"
-            >
-              
+                  </wx-view>
+                  <wx-view
+                    class="t-picker-item__item"
+                    data-index="{{3}}"
+                  >
+                    
       冬
     
-            </wx-view>
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </t-picker-item>
+            <wx-view
+              class="t-picker__mask t-picker__mask--top"
+            />
+            <wx-view
+              class="t-picker__mask t-picker__mask--bottom"
+            />
+            <wx-view
+              class="t-picker__indicator"
+            />
           </wx-view>
         </wx-view>
         <wx-view
-          class="t-picker__mask t-picker__mask--top"
-        />
-        <wx-view
-          class="t-picker__mask t-picker__mask--bottom"
-        />
-        <wx-view
-          class="t-picker__indicator"
+          class="t-popup__close"
+          bind:tap="handleClose"
         />
       </wx-view>
     </wx-view>
-    <wx-view
-      class="t-popup__close"
-      bind:tap="handleClose"
-    />
-  </wx-view>
-</wx-view>
+    <t-overlay
+      class="test"
+      id="popup-overlay"
+      bind:tap="handleOverlayClick"
+    >
+      <wx-view
+        ariaLabel="关闭"
+        ariaRole="button"
+        class="t-overlay t-fade-enter t-fade-enter-active class"
+        style="z-index:11000;"
+        bind:tap="handleClick"
+        catch:touchmove="noop"
+        bind:transitionend="onTransitionEnd"
+      />
+    </t-overlay>
+  </t-popup>
+</t-picker>
 `;
diff --git a/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 82fb2de61..19847702b 100644
--- a/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/pull-down-refresh/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -17,7 +17,7 @@ exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = `
       ]
     }}"
     value="{{false}}"
-    bind:refresh="onPullDownRefresh"
+    bind:refresh="onRefresh"
     bind:scroll="onScroll"
   >
     <wx-view
diff --git a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
index e48ef901d..f3abf4ef5 100644
--- a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,50 +2,58 @@
 
 exports[`search Props :base 1`] = `
 <main>
-  <wx-view
-    class="class t-search t-class"
-    style=""
+  <t-search
+    class="search"
   >
     <wx-view
-      class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
+      class="class t-search t-class"
+      style=""
     >
       <wx-view
-        ariaHidden="{{true}}"
-        ariaLabel=""
-        ariaRole=""
-        class="t-icon class t-class"
-        style="font-size: 24px;"
-        bind:tap="onTap"
+        class="t-search__input-box t-not-focused t-search__input-box-- t-search__input-box--square t-class-input-container"
       >
-        <wx-label
-          class="t-icon-search t-icon-base"
+        <t-icon
+          class="t-icon t-class-left"
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style="font-size: 24px;"
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-search t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+        <wx-input
+          class="t-input__keyword t-class-input"
+          confirmType="search"
+          disabled="{{false}}"
+          focus="{{false}}"
+          name="input"
+          placeholder=""
+          placeholderClass="t-search__placeholder t-search__placeholder--normal"
+          type="text"
+          value=""
+          bind:blur="onBlur"
+          bind:confirm="onConfirm"
+          bind:focus="onFocus"
+          bind:input="onInput"
         />
       </wx-view>
-      <wx-input
-        class="t-input__keyword t-class-input"
-        confirmType="search"
-        disabled="{{false}}"
-        focus="{{false}}"
-        name="input"
-        placeholder=""
-        placeholderClass="t-search__placeholder t-search__placeholder--normal"
-        type="text"
-        value=""
-        bind:blur="onBlur"
-        bind:confirm="onConfirm"
-        bind:focus="onFocus"
-        bind:input="onInput"
-      />
-    </wx-view>
-    <wx-view
-      ariaRole="button"
-      class="t-search__search-action t-class-action"
-      bind:tap="onActionClick"
-    >
-      
+      <wx-view
+        ariaRole="button"
+        class="t-search__search-action t-class-action"
+        bind:tap="onActionClick"
+      >
+        
     提交
   
+      </wx-view>
     </wx-view>
-  </wx-view>
+  </t-search>
 </main>
 `;
diff --git a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
index 90d44529c..9271cabc9 100644
--- a/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/skeleton/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,150 +2,162 @@
 
 exports[`skeleton Props :inner rowCol 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:24%;height:32rpx;margin-right:32rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:24%;height:32rpx;margin-right:32rpx"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:76%;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:76%;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:686rpx;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:686rpx;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:38rpx;height:32rpx"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:38rpx;height:32rpx;margin-right:20rpx;margin-left:20rpx"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:38rpx;height:32rpx"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:440rpx"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:440rpx"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
 
 exports[`skeleton Props :text rowCol2 1`] = `
 <main>
-  <wx-view
-    class="t-skeleton class t-class "
-    style=""
+  <t-skeleton
+    class="skeleton"
   >
     <wx-view
-      class="t-skeleton__content"
+      class="t-skeleton class t-class "
+      style=""
     >
       <wx-view
-        class="t-skeleton__row t-class-row"
+        class="t-skeleton__content"
       >
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:343px;height:16px"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:343px;height:16px"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style=""
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
-        <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:14px;height:16px;margin-right:10px;margin-left:10px"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:small;height:small"
-        />
-      </wx-view>
-      <wx-view
-        class="t-skeleton__row t-class-row"
-      >
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:14px;height:16px;margin-right:10px;margin-left:10px"
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:small;height:small"
+          />
+        </wx-view>
         <wx-view
-          class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
-          style="width:220px"
-        />
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style="width:220px"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-skeleton>
 </main>
 `;
diff --git a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
index cd20881f7..24d454a7f 100644
--- a/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/stepper/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -12,18 +12,22 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__minus-icon"
     >
-      <wx-label
-        class="t-icon-remove t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-remove t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -46,18 +50,22 @@ exports[`stepper event : input 1`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__plus-icon"
     >
-      <wx-label
-        class="t-icon-add t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-add t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
 </wx-view>
 `;
@@ -74,18 +82,22 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__minus t-stepper__minus--normal t-stepper__icon--medium  t-class-minus"
     catch:tap="minusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__minus-icon"
     >
-      <wx-label
-        class="t-icon-remove t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-remove t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
   <wx-view
     class="t-stepper__input--normal "
@@ -108,18 +120,22 @@ exports[`stepper event : input 2`] = `
     class="t-stepper__plus t-stepper__plus--normal t-stepper__icon--medium   t-class-plus"
     catch:tap="plusValue"
   >
-    <wx-view
-      ariaHidden="{{false}}"
-      ariaLabel=""
-      ariaRole=""
-      class="t-icon class t-class"
-      style=""
-      bind:tap="onTap"
+    <t-icon
+      class="t-stepper__plus-icon"
     >
-      <wx-label
-        class="t-icon-add t-icon-base"
-      />
-    </wx-view>
+      <wx-view
+        ariaHidden="{{false}}"
+        ariaLabel=""
+        ariaRole=""
+        class="t-icon class t-class"
+        style=""
+        bind:tap="onTap"
+      >
+        <wx-label
+          class="t-icon-add t-icon-base"
+        />
+      </wx-view>
+    </t-icon>
   </wx-view>
 </wx-view>
 `;
diff --git a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
index 938cc604e..4f9ce97ac 100644
--- a/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/switch/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -2,26 +2,28 @@
 
 exports[`switch Props :base 1`] = `
 <main>
-  <wx-view
-    ariaChecked="{{false}}"
-    ariaDisabled="{{false}}"
-    ariaRole="switch"
-    class="class t-class t-switch"
-    style=""
-    bind:tap="handleSwitch"
-  >
+  <t-switch>
     <wx-view
-      class="t-switch__body t-switch__body--medium t-class-body"
+      ariaChecked="{{false}}"
+      ariaDisabled="{{false}}"
+      ariaRole="switch"
+      class="class t-class t-switch"
+      style=""
+      bind:tap="handleSwitch"
     >
       <wx-view
-        ariaHidden="{{true}}"
-        class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
+        class="t-switch__body t-switch__body--medium t-class-body"
       >
         <wx-view
-          class="t-switch__label t-switch__label--medium t-class-label"
-        />
+          ariaHidden="{{true}}"
+          class="t-switch__dot t-switch__dot--plain t-switch__dot--medium t-class-dot"
+        >
+          <wx-view
+            class="t-switch__label t-switch__label--medium t-class-label"
+          />
+        </wx-view>
       </wx-view>
     </wx-view>
-  </wx-view>
+  </t-switch>
 </main>
 `;
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
index 5da505a7c..3e3ba44f9 100644
--- a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -1,51 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`textarea slots : label 1`] = `
-<wx-view
-  class="t-textarea  class t-class"
-  style=""
+<t-textarea
+  class="base"
 >
   <wx-view
-    class="t-textarea__label t-class-label"
+    class="t-textarea  class t-class"
+    style=""
   >
-    <wx-text
-      slot="label"
+    <wx-view
+      class="t-textarea__label t-class-label"
     >
-      标签文字
-    </wx-text>
-  </wx-view>
-  <wx-view
-    class="t-textarea__wrapper"
-  >
-    <wx-textarea
-      adjustPosition="{{true}}"
-      autoFocus="{{false}}"
-      autoHeight="{{false}}"
-      class="t-textarea__wrapper-inner  t-class-textarea"
-      confirmHold="{{false}}"
-      confirmType="return"
-      cursor="{{-1}}"
-      cursorSpacing="{{0}}"
-      disabled="{{false}}"
-      disableDefaultPadding="{{false}}"
-      fixed="{{false}}"
-      focus="{{false}}"
-      holdKeyboard="{{false}}"
-      maxlength="{{-1}}"
-      placeholder=""
-      placeholderClass="t-textarea__placeholder"
-      placeholderStyle=""
-      selectionEnd="{{-1}}"
-      selectionStart="{{-1}}"
-      showConfirmBar="{{true}}"
-      value=""
-      bind:blur="onBlur"
-      bind:confirm="onConfirm"
-      bind:focus="onFocus"
-      bind:input="onInput"
-      bind:keyboardheightchange="onKeyboardHeightChange"
-      bind:linechange="onLineChange"
-    />
+      <wx-text
+        slot="label"
+      >
+        标签文字
+      </wx-text>
+    </wx-view>
+    <wx-view
+      class="t-textarea__wrapper"
+    >
+      <wx-textarea
+        adjustPosition="{{true}}"
+        autoFocus="{{false}}"
+        autoHeight="{{false}}"
+        class="t-textarea__wrapper-inner  t-class-textarea"
+        confirmHold="{{false}}"
+        confirmType="return"
+        cursor="{{-1}}"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        disableDefaultPadding="{{false}}"
+        fixed="{{false}}"
+        focus="{{false}}"
+        holdKeyboard="{{false}}"
+        maxlength="{{-1}}"
+        placeholder=""
+        placeholderClass="t-textarea__placeholder"
+        placeholderStyle=""
+        selectionEnd="{{-1}}"
+        selectionStart="{{-1}}"
+        showConfirmBar="{{true}}"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:keyboardheightchange="onKeyboardHeightChange"
+        bind:linechange="onLineChange"
+      />
+    </wx-view>
   </wx-view>
-</wx-view>
+</t-textarea>
 `;

From cb9cb36bd7f7493057e76d7c24a222b87bddc204 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 23 May 2023 23:02:49 +0800
Subject: [PATCH 081/202] chore: publish v1.1.7 (#2031)

* chore: publish v1.1.7

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 10 ++++++++++
 package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 68dba1369..5442607d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,16 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.7 `2023-05-23` 
+### 🚀 Features
+- `ActionSheet`: 新增 CSS Variable 用于控制取消按钮颜色 @favouredddd ([#2007](https://github.com/Tencent/tdesign-miniprogram/pull/2007))
+### 🐞 Bug Fixes
+- `ActionSheet`: 解决 ActionSheet 引入报错 @anlyyao ([#2008](https://github.com/Tencent/tdesign-miniprogram/pull/2008))
+- `Sticky`: 处理在锁定的情况下，宽度计算错误的问题 @LeeJim ([#2012](https://github.com/Tencent/tdesign-miniprogram/pull/2012))
+- `SideBarItem`: 修复选中态样式问题 @betavs ([#2011](https://github.com/Tencent/tdesign-miniprogram/pull/2011))
+- `TabBar`: 修正 virtualHost 不可用时的宽度 @LeeJim ([#2013](https://github.com/Tencent/tdesign-miniprogram/pull/2013))
+- `Icon`: 更正图标命名 @anlyyao ([#2020](https://github.com/Tencent/tdesign-miniprogram/pull/2020))
+
 ## 🌈 1.1.6 `2023-05-15` 
 ### 🚀 Features
 - `Icon`: 更新版本至 v0.1.4 @anlyyao ([#1979](https://github.com/Tencent/tdesign-miniprogram/pull/1979))
diff --git a/package.json b/package.json
index ea8fcfea2..68e2b08f7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.6-beta",
+  "version": "1.1.7",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 8ca759010ec091d2d171cb3c8d87c2a43ca315db Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 30 May 2023 11:30:26 +0800
Subject: [PATCH 082/202] feat(Textarea): support max/min height (#2035)

* feat(Textarea): support max/min height

* test: update snapshots
---
 src/textarea/README.md                           |  2 +-
 .../__test__/__snapshots__/demo.test.js.snap     |  8 +++++++-
 .../__test__/__snapshots__/index.test.js.snap    |  1 +
 .../__virtualHostSnapshot__/demo.test.js.snap    |  8 +++++++-
 .../__virtualHostSnapshot__/index.test.js.snap   |  1 +
 src/textarea/_example/autosize/index.js          | 14 +++++++++++++-
 src/textarea/_example/autosize/index.wxml        |  8 +++++++-
 src/textarea/props.ts                            |  2 +-
 src/textarea/textarea.wxml                       |  4 +++-
 src/textarea/textarea.wxs                        | 16 ++++++++++++++++
 src/textarea/type.ts                             |  4 ++--
 11 files changed, 59 insertions(+), 9 deletions(-)
 create mode 100644 src/textarea/textarea.wxs

diff --git a/src/textarea/README.md b/src/textarea/README.md
index 74ad73603..8b3437f74 100644
--- a/src/textarea/README.md
+++ b/src/textarea/README.md
@@ -63,7 +63,7 @@ isComponent: true
 -- | -- | -- | -- | --
 adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
 autofocus | Boolean | false | 自动聚焦，拉起键盘 | N
-autosize | Boolean | false | 是否自动增高，值为 autosize 时，style.height 不生效 | N
+autosize | Boolean / Object | false | 是否自动增高，值为 true 时，style.height 不生效。支持传入对象，如 { maxHeight: 120, minHeight: 20 } | N
 confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起点 | N
 confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：send/search/next/go/done。TS 类型：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
 cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N
diff --git a/src/textarea/__test__/__snapshots__/demo.test.js.snap b/src/textarea/__test__/__snapshots__/demo.test.js.snap
index 66ca7a235..f85ac48ac 100644
--- a/src/textarea/__test__/__snapshots__/demo.test.js.snap
+++ b/src/textarea/__test__/__snapshots__/demo.test.js.snap
@@ -3,10 +3,16 @@
 exports[`Textarea Textarea autosize demo works fine 1`] = `
 <autosize>
   <t-textarea
-    autosize="{{true}}"
+    autosize="{{
+      Object {
+        "maxHeight": 120,
+        "minHeight": 20,
+      }
+    }}"
     disableDefaultPadding="{{true}}"
     label="标签文字"
     placeholder="请输入文字"
+    bind:line-change="onLineChange"
   />
 </autosize>
 `;
diff --git a/src/textarea/__test__/__snapshots__/index.test.js.snap b/src/textarea/__test__/__snapshots__/index.test.js.snap
index 3e3ba44f9..10f0d2a08 100644
--- a/src/textarea/__test__/__snapshots__/index.test.js.snap
+++ b/src/textarea/__test__/__snapshots__/index.test.js.snap
@@ -41,6 +41,7 @@ exports[`textarea slots : label 1`] = `
         selectionEnd="{{-1}}"
         selectionStart="{{-1}}"
         showConfirmBar="{{true}}"
+        style=""
         value=""
         bind:blur="onBlur"
         bind:confirm="onConfirm"
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 66ca7a235..f85ac48ac 100644
--- a/src/textarea/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/textarea/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -3,10 +3,16 @@
 exports[`Textarea Textarea autosize demo works fine 1`] = `
 <autosize>
   <t-textarea
-    autosize="{{true}}"
+    autosize="{{
+      Object {
+        "maxHeight": 120,
+        "minHeight": 20,
+      }
+    }}"
     disableDefaultPadding="{{true}}"
     label="标签文字"
     placeholder="请输入文字"
+    bind:line-change="onLineChange"
   />
 </autosize>
 `;
diff --git a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
index 3e3ba44f9..10f0d2a08 100644
--- a/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/textarea/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -41,6 +41,7 @@ exports[`textarea slots : label 1`] = `
         selectionEnd="{{-1}}"
         selectionStart="{{-1}}"
         showConfirmBar="{{true}}"
+        style=""
         value=""
         bind:blur="onBlur"
         bind:confirm="onConfirm"
diff --git a/src/textarea/_example/autosize/index.js b/src/textarea/_example/autosize/index.js
index b79c5124b..16c5e08f9 100644
--- a/src/textarea/_example/autosize/index.js
+++ b/src/textarea/_example/autosize/index.js
@@ -1 +1,13 @@
-Component({});
+Component({
+  data: {
+    autosize: {
+      maxHeight: 120,
+      minHeight: 20,
+    },
+  },
+  methods: {
+    onLineChange(e) {
+      console.log('lineCount: ', e.detail);
+    },
+  },
+});
diff --git a/src/textarea/_example/autosize/index.wxml b/src/textarea/_example/autosize/index.wxml
index f1130cba9..f37e627d7 100644
--- a/src/textarea/_example/autosize/index.wxml
+++ b/src/textarea/_example/autosize/index.wxml
@@ -1 +1,7 @@
-<t-textarea label="标签文字" placeholder="请输入文字" disableDefaultPadding="{{true}}" autosize />
+<t-textarea
+  label="标签文字"
+  placeholder="请输入文字"
+  disableDefaultPadding="{{true}}"
+  autosize="{{autosize}}"
+  bind:line-change="onLineChange"
+/>
diff --git a/src/textarea/props.ts b/src/textarea/props.ts
index 984b4c279..6cbb499b2 100644
--- a/src/textarea/props.ts
+++ b/src/textarea/props.ts
@@ -18,7 +18,7 @@ const props: TdTextareaProps = {
   },
   /** 是否自动增高，值为 autosize 时，style.height 不生效 */
   autosize: {
-    type: Boolean,
+    type: null,
     value: false,
   },
   /** 点击键盘右下角按钮时是否保持键盘不收起点 */
diff --git a/src/textarea/textarea.wxml b/src/textarea/textarea.wxml
index 1403b3c09..5d2515c93 100644
--- a/src/textarea/textarea.wxml
+++ b/src/textarea/textarea.wxml
@@ -1,4 +1,5 @@
 <wxs src="../common/utils.wxs" module="_" />
+<wxs src="./textarea.wxs" module="this" />
 
 <view
   style="{{_._style([style, customStyle])}}"
@@ -11,18 +12,19 @@
   <view class="{{classPrefix}}__wrapper">
     <textarea
       class="{{classPrefix}}__wrapper-inner {{disabled? prefix +  '-is-disabled' : ''}} {{prefix}}-class-textarea"
+      style="{{this.textareaStyle(autosize)}}"
       maxlength="{{maxlength}}"
       disabled="{{disabled}}"
       placeholder="{{placeholder}}"
       placeholder-class="{{classPrefix}}__placeholder"
       placeholder-style="{{placeholderStyle}}"
       value="{{value}}"
+      auto-height="{{!!autosize}}"
       auto-focus="{{autofocus}}"
       fixed="{{fixed}}"
       focus="{{focus}}"
       cursor="{{cursor}}"
       cursor-spacing="{{cursorSpacing}}"
-      auto-height="{{autosize}}"
       adjust-position="{{adjustPosition}}"
       confirm-type="{{confirmType}}"
       confirm-hold="{{confirmHold}}"
diff --git a/src/textarea/textarea.wxs b/src/textarea/textarea.wxs
new file mode 100644
index 000000000..d675197dc
--- /dev/null
+++ b/src/textarea/textarea.wxs
@@ -0,0 +1,16 @@
+/* eslint-disable */
+var utils = require('../common/utils.wxs');
+
+function textareaStyle(autosize) {
+  if (autosize && autosize.constructor === 'Object') {
+    return utils._style({
+      'min-height': utils.addUnit(autosize.minHeight),
+      'max-height': utils.addUnit(autosize.maxHeight),
+    });
+  }
+  return '';
+}
+
+module.exports = {
+  textareaStyle: textareaStyle,
+};
diff --git a/src/textarea/type.ts b/src/textarea/type.ts
index b5bf5f05f..0e14bba74 100644
--- a/src/textarea/type.ts
+++ b/src/textarea/type.ts
@@ -26,8 +26,8 @@ export interface TdTextareaProps {
    * @default false
    */
   autosize?: {
-    type: BooleanConstructor;
-    value?: boolean;
+    type: null;
+    value?: boolean | object;
   };
   /**
    * 点击键盘右下角按钮时是否保持键盘不收起点

From cf355d1e8b1d1fb61c52a16c750677500ce3ee01 Mon Sep 17 00:00:00 2001
From: zhangpaopao <zhangpaopao0609@gmail.com>
Date: Tue, 30 May 2023 16:35:21 +0800
Subject: [PATCH 083/202] fix: rename proposal to transform and display
 installation dependencies (#2046)

---
 babel.config.js | 2 +-
 package.json    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index dd4e3d695..b30cffacc 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,6 +3,6 @@ module.exports = {
   presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
   plugins: [
     ['@babel/plugin-proposal-decorators', { legacy: true }],
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-transform-class-properties', { loose: true }],
   ],
 };
diff --git a/package.json b/package.json
index 68e2b08f7..55491f0c1 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-decorators": "^7.18.9",
+    "@babel/plugin-transform-class-properties": "^7.22.3",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
     "@commitlint/cli": "^16.0.2",
@@ -125,4 +126,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
\ No newline at end of file
+}

From a8286767e8b5abbfce20ed1838e0a349b216556a Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 30 May 2023 17:17:40 +0800
Subject: [PATCH 084/202] fix(DropdownMenu): resolved the basic library cannot
 be used under version 2.19.2 (#2043)

* fix(DropdownMenu): resolved the basic library cannot be used under version 2.19.2

* test: update snapshots
---
 .../__test__/__snapshots__/index.test.js.snap |   1 -
 .../index.test.js.snap                        |   1 -
 .../__test__/__snapshots__/index.test.js.snap |   1 -
 .../index.test.js.snap                        |   1 -
 .../__test__/__snapshots__/index.test.js.snap |   1 -
 .../index.test.js.snap                        |   1 -
 src/dropdown-item/dropdown-item.wxml          |   4 +-
 .../__test__/__snapshots__/index.test.js.snap | 640 ++++++++++++++++++
 .../index.test.js.snap                        | 640 ++++++++++++++++++
 src/dropdown-menu/__test__/index.test.js      |  30 +-
 .../__test__/__snapshots__/index.test.js.snap |   1 -
 .../index.test.js.snap                        |   1 -
 src/popup/popup.wxml                          |   3 +-
 13 files changed, 1284 insertions(+), 41 deletions(-)
 create mode 100644 src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
 create mode 100644 src/dropdown-menu/__test__/__virtualHostSnapshot__/index.test.js.snap

diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index 7b7a84a67..f3c429447 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -790,7 +790,6 @@ exports[`calendar :base 1`] = `
         </wx-view>
       </wx-view>
       <t-overlay
-        class="test"
         id="popup-overlay"
         bind:tap="handleOverlayClick"
       >
diff --git a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
index 7b7a84a67..f3c429447 100644
--- a/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/calendar/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -790,7 +790,6 @@ exports[`calendar :base 1`] = `
         </wx-view>
       </wx-view>
       <t-overlay
-        class="test"
         id="popup-overlay"
         bind:tap="handleOverlayClick"
       >
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
index ea53b8fb5..134e5a7fe 100644
--- a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -454,7 +454,6 @@ exports[`date-time-picker :base 1`] = `
           </wx-view>
         </wx-view>
         <t-overlay
-          class="test"
           id="popup-overlay"
           bind:tap="handleOverlayClick"
         >
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index ea53b8fb5..134e5a7fe 100644
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -454,7 +454,6 @@ exports[`date-time-picker :base 1`] = `
           </wx-view>
         </wx-view>
         <t-overlay
-          class="test"
           id="popup-overlay"
           bind:tap="handleOverlayClick"
         >
diff --git a/src/dialog/__test__/__snapshots__/index.test.js.snap b/src/dialog/__test__/__snapshots__/index.test.js.snap
index 45a54cb24..ed8c9a385 100644
--- a/src/dialog/__test__/__snapshots__/index.test.js.snap
+++ b/src/dialog/__test__/__snapshots__/index.test.js.snap
@@ -38,7 +38,6 @@ exports[`dialog :base 1`] = `
         </wx-view>
       </wx-view>
       <t-overlay
-        class="test"
         id="popup-overlay"
         bind:tap="handleOverlayClick"
       >
diff --git a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
index 45a54cb24..ed8c9a385 100644
--- a/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/dialog/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -38,7 +38,6 @@ exports[`dialog :base 1`] = `
         </wx-view>
       </wx-view>
       <t-overlay
-        class="test"
         id="popup-overlay"
         bind:tap="handleOverlayClick"
       >
diff --git a/src/dropdown-item/dropdown-item.wxml b/src/dropdown-item/dropdown-item.wxml
index 2ae30e771..63a2187e2 100644
--- a/src/dropdown-item/dropdown-item.wxml
+++ b/src/dropdown-item/dropdown-item.wxml
@@ -11,11 +11,11 @@
     z-index="{{zIndex + 1}}"
     duration="{{duration}}"
     show-overlay="{{showOverlay}}"
-    style="position: absolute"
+    custom-style="position: absolute"
     overlay-props="{{ { style: 'position: absolute' } }}"
     bind:leaved="onLeaved"
     bind:visible-change="handleMaskClick"
-    class="{{classPrefix}}__popup-host"
+    t-class="{{classPrefix}}__popup-host"
     t-class-content="{{classPrefix}}__content {{prefix}}-class-content"
   >
     <view class="{{classPrefix}}__body">
diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..d15c7cbb1
--- /dev/null
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -0,0 +1,640 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dropdown-menu :base 1`] = `
+<main>
+  <t-dropdown-menu
+    id="base"
+  >
+    <wx-view
+      class="t-dropdown-menu class t-class"
+      id="t-bar"
+      style="font-size: 9px;"
+    >
+      <wx-view
+        ariaDisabled="{{false}}"
+        ariaExpanded="{{true}}"
+        ariaHaspopup="menu"
+        ariaRole="button"
+        class="t-dropdown-menu__item t-dropdown-menu__item--active t-class-item"
+        data-index="{{0}}"
+        bind:tap="handleToggle"
+      >
+        <wx-view
+          class="t-dropdown-menu__title t-class-label"
+        >
+          菜单
+        </wx-view>
+        <t-icon
+          tClass="t-dropdown-menu__icon t-dropdown-menu__icon--active t-class-icon"
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-caret-down-small t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+      <wx-view
+        ariaDisabled="{{false}}"
+        ariaExpanded="{{false}}"
+        ariaHaspopup="menu"
+        ariaRole="button"
+        class="t-dropdown-menu__item t-class-item"
+        data-index="{{1}}"
+        bind:tap="handleToggle"
+      >
+        <wx-view
+          class="t-dropdown-menu__title t-class-label"
+        >
+          单列多选
+        </wx-view>
+        <t-icon
+          tClass="t-dropdown-menu__icon t-dropdown-menu__icon-- t-class-icon"
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-caret-down-small t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+      <t-dropdown-item
+        id="first"
+        bind:change="handleSingleSelect"
+      >
+        <wx-view
+          class="t-dropdown-item class t-class"
+          style="z-index:11600;"
+        >
+          <t-popup
+            tClass="t-dropdown-item__popup-host"
+            tClassContent="t-dropdown-item__content t-class-content"
+            bind:leaved="onLeaved"
+            bind:visible-change="handleMaskClick"
+          >
+            <wx-view
+              ariaModal="{{true}}"
+              ariaRole="dialog"
+              class="t-popup t-popup--top t-fade-enter-active t-fade-enter-to class t-class"
+              style="z-index:11601; position: absolute;"
+              bind:transitionend="onTransitionEnd"
+            >
+              <wx-view
+                class="t-popup__content t-class-content"
+              >
+                <wx-view
+                  class="t-dropdown-item__body"
+                >
+                  <wx-scroll-view
+                    class="t-dropdown-item__scroll"
+                    scrollIntoView="id_option_3"
+                    scrollY="{{true}}"
+                  >
+                    <t-radio-group
+                      class="t-dropdown-item__radio t-class-column"
+                      tClass="t-dropdown-item__radio-group"
+                      bind:change="handleRadioChange"
+                    >
+                      <wx-view
+                        ariaRole="radiogroup"
+                        class="t-radio-group class t-class"
+                        style=""
+                      >
+                        <wx-view
+                          id="id_option_1"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项一"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项一
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_2"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项二"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项二
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_3"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{true}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项三"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-radio__icon--checked t-class-icon"
+                              >
+                                <t-icon
+                                  class="t-radio__icon-wrap"
+                                >
+                                  <wx-view
+                                    ariaHidden="{{false}}"
+                                    ariaLabel=""
+                                    ariaRole=""
+                                    class="t-icon class t-class"
+                                    style=""
+                                    bind:tap="onTap"
+                                  >
+                                    <wx-label
+                                      class="t-icon-check t-icon-base"
+                                    />
+                                  </wx-view>
+                                </t-icon>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-radio__title--checked t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项三
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-radio__description--checked t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_4"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项四"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项四
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_5"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项五"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项五
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_6"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项六"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项六
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_7"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项七"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项七
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_8"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项八"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项八
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_disabled"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{true}}"
+                              ariaLabel="禁用选项"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{true}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-radio__icon--disabled t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-radio__title--disabled t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      禁用选项
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-radio__description--disabled t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                      </wx-view>
+                    </t-radio-group>
+                  </wx-scroll-view>
+                </wx-view>
+                <wx-view
+                  class="t-popup__close"
+                  bind:tap="handleClose"
+                />
+              </wx-view>
+            </wx-view>
+            <t-overlay
+              id="popup-overlay"
+              bind:tap="handleOverlayClick"
+            >
+              <wx-view
+                ariaLabel="关闭"
+                ariaRole="button"
+                class="t-overlay t-fade-enter-active t-fade-enter-to class"
+                style="z-index:11000; position: absolute;"
+                bind:tap="handleClick"
+                catch:touchmove="noop"
+                bind:transitionend="onTransitionEnd"
+              />
+            </t-overlay>
+          </t-popup>
+        </wx-view>
+      </t-dropdown-item>
+      <t-dropdown-item
+        id="second"
+      />
+    </wx-view>
+  </t-dropdown-menu>
+</main>
+`;
diff --git a/src/dropdown-menu/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/dropdown-menu/__test__/__virtualHostSnapshot__/index.test.js.snap
new file mode 100644
index 000000000..7ec4c127e
--- /dev/null
+++ b/src/dropdown-menu/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -0,0 +1,640 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`dropdown-menu :base 1`] = `
+<main>
+  <t-dropdown-menu
+    id="base"
+  >
+    <wx-view
+      class="t-dropdown-menu class t-class"
+      id="t-bar"
+      style="color: red; font-size: 9px;"
+    >
+      <wx-view
+        ariaDisabled="{{false}}"
+        ariaExpanded="{{true}}"
+        ariaHaspopup="menu"
+        ariaRole="button"
+        class="t-dropdown-menu__item t-dropdown-menu__item--active t-class-item"
+        data-index="{{0}}"
+        bind:tap="handleToggle"
+      >
+        <wx-view
+          class="t-dropdown-menu__title t-class-label"
+        >
+          菜单
+        </wx-view>
+        <t-icon
+          tClass="t-dropdown-menu__icon t-dropdown-menu__icon--active t-class-icon"
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-caret-down-small t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+      <wx-view
+        ariaDisabled="{{false}}"
+        ariaExpanded="{{false}}"
+        ariaHaspopup="menu"
+        ariaRole="button"
+        class="t-dropdown-menu__item t-class-item"
+        data-index="{{1}}"
+        bind:tap="handleToggle"
+      >
+        <wx-view
+          class="t-dropdown-menu__title t-class-label"
+        >
+          单列多选
+        </wx-view>
+        <t-icon
+          tClass="t-dropdown-menu__icon t-dropdown-menu__icon-- t-class-icon"
+        >
+          <wx-view
+            ariaHidden="{{true}}"
+            ariaLabel=""
+            ariaRole=""
+            class="t-icon class t-class"
+            style=""
+            bind:tap="onTap"
+          >
+            <wx-label
+              class="t-icon-caret-down-small t-icon-base"
+            />
+          </wx-view>
+        </t-icon>
+      </wx-view>
+      <t-dropdown-item
+        id="first"
+        bind:change="handleSingleSelect"
+      >
+        <wx-view
+          class="t-dropdown-item class t-class"
+          style="z-index:11600;"
+        >
+          <t-popup
+            tClass="t-dropdown-item__popup-host"
+            tClassContent="t-dropdown-item__content t-class-content"
+            bind:leaved="onLeaved"
+            bind:visible-change="handleMaskClick"
+          >
+            <wx-view
+              ariaModal="{{true}}"
+              ariaRole="dialog"
+              class="t-popup t-popup--top t-fade-enter t-fade-enter-active class t-class"
+              style="z-index:11601; position: absolute;"
+              bind:transitionend="onTransitionEnd"
+            >
+              <wx-view
+                class="t-popup__content t-class-content"
+              >
+                <wx-view
+                  class="t-dropdown-item__body"
+                >
+                  <wx-scroll-view
+                    class="t-dropdown-item__scroll"
+                    scrollIntoView="id_option_3"
+                    scrollY="{{true}}"
+                  >
+                    <t-radio-group
+                      class="t-dropdown-item__radio t-class-column"
+                      tClass="t-dropdown-item__radio-group"
+                      bind:change="handleRadioChange"
+                    >
+                      <wx-view
+                        ariaRole="radiogroup"
+                        class="t-radio-group class t-class"
+                        style="grid-template-columns: repeat(1, 1fr);"
+                      >
+                        <wx-view
+                          id="id_option_1"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项一"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项一
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_2"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项二"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项二
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_3"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{true}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项三"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-radio__icon--checked t-class-icon"
+                              >
+                                <t-icon
+                                  class="t-radio__icon-wrap"
+                                >
+                                  <wx-view
+                                    ariaHidden="{{false}}"
+                                    ariaLabel=""
+                                    ariaRole=""
+                                    class="t-icon class t-class"
+                                    style=""
+                                    bind:tap="onTap"
+                                  >
+                                    <wx-label
+                                      class="t-icon-check t-icon-base"
+                                    />
+                                  </wx-view>
+                                </t-icon>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-radio__title--checked t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项三
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-radio__description--checked t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_4"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项四"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项四
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_5"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项五"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项五
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_6"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项六"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项六
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_7"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项七"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项七
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_option_8"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{false}}"
+                              ariaLabel="选项八"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{false}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      选项八
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                        <wx-view
+                          id="id_disabled"
+                        >
+                          <t-radio
+                            class="t-dropdown-item__radio-item t-class-column-item"
+                            tabindex="0"
+                            tClass="radio"
+                            tClassLabel="t-class-column-item-label"
+                          >
+                            <wx-view
+                              ariaChecked="{{false}}"
+                              ariaDisabled="{{true}}"
+                              ariaLabel="禁用选项"
+                              ariaRole="radio"
+                              class="t-radio t-radio--block class t-class"
+                              disabled="{{true}}"
+                              style=""
+                              tabindex=""
+                              bind:tap="handleTap"
+                            >
+                              <wx-view
+                                class="t-radio__icon t-radio__icon--disabled t-class-icon"
+                              >
+                                <wx-view
+                                  class="placeholder"
+                                />
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__content"
+                                data-target="text"
+                                catch:tap="handleTap"
+                              >
+                                <wx-view
+                                  class="t-radio__title t-radio__title--disabled t-class-label"
+                                  style="-webkit-line-clamp:3"
+                                >
+                                  
+      禁用选项
+      
+                                </wx-view>
+                                <wx-view
+                                  class="t-radio__description t-radio__description--disabled t-class-content "
+                                  style="-webkit-line-clamp:5"
+                                >
+                                  
+                                </wx-view>
+                              </wx-view>
+                              <wx-view
+                                class="t-radio__border t-class-border"
+                              />
+                            </wx-view>
+                          </t-radio>
+                        </wx-view>
+                      </wx-view>
+                    </t-radio-group>
+                  </wx-scroll-view>
+                </wx-view>
+                <wx-view
+                  class="t-popup__close"
+                  bind:tap="handleClose"
+                />
+              </wx-view>
+            </wx-view>
+            <t-overlay
+              id="popup-overlay"
+              bind:tap="handleOverlayClick"
+            >
+              <wx-view
+                ariaLabel="关闭"
+                ariaRole="button"
+                class="t-overlay t-fade-enter t-fade-enter-active class"
+                style="z-index:11000; position: absolute;"
+                bind:tap="handleClick"
+                catch:touchmove="noop"
+                bind:transitionend="onTransitionEnd"
+              />
+            </t-overlay>
+          </t-popup>
+        </wx-view>
+      </t-dropdown-item>
+      <t-dropdown-item
+        id="second"
+      />
+    </wx-view>
+  </t-dropdown-menu>
+</main>
+`;
diff --git a/src/dropdown-menu/__test__/index.test.js b/src/dropdown-menu/__test__/index.test.js
index 5e9faecfc..4cc90a92a 100644
--- a/src/dropdown-menu/__test__/index.test.js
+++ b/src/dropdown-menu/__test__/index.test.js
@@ -36,12 +36,7 @@ describe('dropdown-menu', () => {
     expect($first.instance.data.wrapperVisible).toBeTruthy();
 
     $item.dispatchEvent('tap');
-
-    if (!VIRTUAL_HOST) {
-      $first.querySelector('.t-dropdown-item__popup-host').dispatchEvent('leaved'); // 因为 Popup 不会自动触发
-      await simulate.sleep();
-      expect($first.instance.data.wrapperVisible).toBeFalsy();
-    }
+    expect(comp.toJSON()).toMatchSnapshot();
   });
 
   it('@select', async () => {
@@ -70,33 +65,10 @@ describe('dropdown-menu', () => {
     comp.attach(document.createElement('parent-wrapper'));
 
     const $base = comp.querySelector('#base');
-    const $first = comp.querySelector('#first');
     const $item = $base.querySelector('.t-dropdown-menu__item');
 
     $item.dispatchEvent('tap');
     await simulate.sleep(210);
-
-    if (!VIRTUAL_HOST) {
-      const $overlay = $first.querySelector('.t-dropdown-item__popup-host >>> #popup-overlay');
-      $overlay.dispatchEvent('tap');
-      await simulate.sleep();
-
-      expect($first.instance.data.show).toBeFalsy();
-
-      // test :closeOnClickOverlay
-      comp.setData({ closeOnClickOverlay: false });
-
-      // open
-      $item.dispatchEvent('tap');
-      await simulate.sleep(210);
-
-      expect($first.instance.data.show).toBeTruthy();
-
-      // overlay
-      $overlay.dispatchEvent('tap');
-      await simulate.sleep();
-      expect($first.instance.data.show).toBeTruthy();
-    }
   });
 
   it(':keys', async () => {
diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
index 9801b437f..99a15b9d9 100644
--- a/src/picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -157,7 +157,6 @@ exports[`picker :base 1`] = `
       </wx-view>
     </wx-view>
     <t-overlay
-      class="test"
       id="popup-overlay"
       bind:tap="handleOverlayClick"
     >
diff --git a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
index 9801b437f..99a15b9d9 100644
--- a/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/picker/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -157,7 +157,6 @@ exports[`picker :base 1`] = `
       </wx-view>
     </wx-view>
     <t-overlay
-      class="test"
       id="popup-overlay"
       bind:tap="handleOverlayClick"
     >
diff --git a/src/popup/popup.wxml b/src/popup/popup.wxml
index ae440c4b4..87cb78dc5 100644
--- a/src/popup/popup.wxml
+++ b/src/popup/popup.wxml
@@ -23,9 +23,8 @@
   id="popup-overlay"
   wx:if="{{showOverlay}}"
   visible="{{visible}}"
-  class="test"
   z-index="{{overlayProps.zIndex || 11000}}"
   prevent-scroll-through="{{preventScrollThrough || overlayProps.preventScrollThrough}}"
   bind:tap="handleOverlayClick"
-  style="{{overlayProps.style || ''}}"
+  custom-style="{{overlayProps.style || ''}}"
 />

From 588e4e35b9bb1c402d2290ddc38a7af387606047 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 30 May 2023 17:24:13 +0800
Subject: [PATCH 085/202] fix(Sticky): resolved width problem (#2047)

* fix(Sticky): resolved width problem

* fix(sticky): recover classname

---------

Co-authored-by: leejimqiu <leejimqiu@gmail.com>
---
 src/sticky/README.md              | 2 +-
 src/sticky/__test__/index.test.js | 4 ++--
 src/sticky/sticky.less            | 4 ----
 src/sticky/sticky.ts              | 4 ++--
 src/sticky/sticky.wxml            | 4 ++--
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/sticky/README.md b/src/sticky/README.md
index aff669555..02f86f394 100644
--- a/src/sticky/README.md
+++ b/src/sticky/README.md
@@ -44,7 +44,7 @@ isComponent: true
 -- | -- | -- | -- | --
 container | Function | - | 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。 | N
 disabled | Boolean | false | 是否禁用组件 | N
-external-classes | Array | - | 根结点外部样式。`['t-class']` | N
+external-classes | Array | - | 根结点外部样式。`['t-class', 't-class-content']` | N
 offset-top | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N
 z-index | Number | 99 | 吸顶时的 z-index | N
 
diff --git a/src/sticky/__test__/index.test.js b/src/sticky/__test__/index.test.js
index 18f1b5e88..e25dfebfb 100644
--- a/src/sticky/__test__/index.test.js
+++ b/src/sticky/__test__/index.test.js
@@ -35,7 +35,7 @@ describe('Sticky Props', () => {
 
     simulate.scroll($demo, 500, 4);
     await simulate.sleep(20);
-    expect($sticky.instance.data.contentStyle).toBe('position:fixed;top:0px;');
+    expect($sticky.instance.data.contentStyle).toBe('position:fixed;top:0px;left:0;right:0;');
   });
 
   it(':offset-top', async () => {
@@ -46,7 +46,7 @@ describe('Sticky Props', () => {
 
     simulate.scroll($demo, 500, 4);
     await simulate.sleep(20);
-    expect($sticky.instance.data.contentStyle).toBe('position:fixed;top:100px;');
+    expect($sticky.instance.data.contentStyle).toBe('position:fixed;top:100px;left:0;right:0;');
   });
 
   it(':disabled', async () => {
diff --git a/src/sticky/sticky.less b/src/sticky/sticky.less
index cd54d569e..9ca3fb313 100644
--- a/src/sticky/sticky.less
+++ b/src/sticky/sticky.less
@@ -2,8 +2,4 @@
 
 .@{prefix}-sticky {
   position: relative;
-
-  &__content {
-    width: fit-content;
-  }
 }
diff --git a/src/sticky/sticky.ts b/src/sticky/sticky.ts
index 0df6fe8fc..7166c6797 100644
--- a/src/sticky/sticky.ts
+++ b/src/sticky/sticky.ts
@@ -14,7 +14,7 @@ export interface StickyProps extends TdStickyProps {}
 
 @wxComponent()
 export default class Sticky extends SuperComponent {
-  externalClasses = [`${prefix}-class`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-content`];
 
   properties = props;
 
@@ -99,7 +99,7 @@ export default class Sticky extends SuperComponent {
 
         if (isFixed) {
           containerStyle += `height:${height}px;`;
-          contentStyle += `position:fixed;top:${offsetTop}px;`;
+          contentStyle += `position:fixed;top:${offsetTop}px;left:0;right:0;`;
         }
         if (transform) {
           const translate = `translate3d(0, ${transform}px, 0)`;
diff --git a/src/sticky/sticky.wxml b/src/sticky/sticky.wxml
index 8f0181cbb..8ca8159e2 100644
--- a/src/sticky/sticky.wxml
+++ b/src/sticky/sticky.wxml
@@ -2,9 +2,9 @@
 
 <view
   class="{{classPrefix}} class {{prefix}}-class"
-  style="{{_._style(['z-index:' + zIndex, containerStyle, style, customStyle])}}"
+  style="{{_._style(['z-index:' + zIndex, containerStyle, style, customStyle])}};"
 >
-  <view class="{{classPrefix}}__content" style="z-index:{{ zIndex }};{{ contentStyle }}">
+  <view class="{{classPrefix}}__content {{prefix}}-class-content" style="z-index:{{ zIndex }};{{ contentStyle }};">
     <slot />
   </view>
 </view>

From 24f7b1871b3c6dc1eee362ad16ff0a39dd7669af Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 30 May 2023 20:15:52 +0800
Subject: [PATCH 086/202] fix(navbar): polish bg support (#2049)

---
 src/navbar/navbar.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/navbar/navbar.less b/src/navbar/navbar.less
index 5dc005278..3db6dee37 100644
--- a/src/navbar/navbar.less
+++ b/src/navbar/navbar.less
@@ -68,7 +68,7 @@
     padding-right: @navbar-right;
     padding-top: @navbar-padding-top;
     color: @navbar-color;
-    background-color: @navbar-bg-color;
+    background: @navbar-bg-color;
     display: flex;
     align-items: center;
   }

From 43dbad6ebb51feac9427050e01a89ae739505040 Mon Sep 17 00:00:00 2001
From: ElanYoung <39727435+ElanYoung@users.noreply.github.com>
Date: Tue, 30 May 2023 20:48:36 +0800
Subject: [PATCH 087/202] fix(drawer): resolve word misspelling (#2039)

* fix(drawer): item-click parameter error

* fix(drawer): item-click parameter error

* fix(drawer): item-click parameter error
---
 src/drawer/__test__/index.test.js | 6 +++---
 src/drawer/drawer.ts              | 4 +---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/drawer/__test__/index.test.js b/src/drawer/__test__/index.test.js
index 8f45195c7..9d08b8fdf 100644
--- a/src/drawer/__test__/index.test.js
+++ b/src/drawer/__test__/index.test.js
@@ -106,8 +106,8 @@ describe('drawer', () => {
     const overlayClick = jest.fn();
     let clickItemValue;
     const itemClick = (e) => {
-      const { sibarItem } = e.detail;
-      clickItemValue = sibarItem;
+      const { item } = e.detail;
+      clickItemValue = item;
     };
 
     it(`: mutiple`, async () => {
@@ -151,7 +151,7 @@ describe('drawer', () => {
       const index = 1;
       items[index].dispatchEvent('tap');
       await simulate.sleep(10);
-      expect(clickItemValue.item).toEqual(comp.data.sidebar[index]);
+      expect(clickItemValue).toEqual(comp.data.sidebar[index]);
 
       if (!VIRTUAL_HOST) {
         // showOverlay为false
diff --git a/src/drawer/drawer.ts b/src/drawer/drawer.ts
index c7922d634..e9f16eb96 100644
--- a/src/drawer/drawer.ts
+++ b/src/drawer/drawer.ts
@@ -41,9 +41,7 @@ export default class Drawer extends SuperComponent {
     itemClick(detail) {
       const { index, item } = detail.currentTarget.dataset;
 
-      this.triggerEvent('item-click', {
-        sibarItem: { index: index, item: item },
-      });
+      this.triggerEvent('item-click', { index, item });
     },
   };
 }

From f5704868b0b7da66f1090d453373e3d664dc034e Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 30 May 2023 20:48:49 +0800
Subject: [PATCH 088/202] fix(image): enable dynamic dimension (#2050)

---
 src/image/image.ts | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/image/image.ts b/src/image/image.ts
index ce5f90ff8..5d11e2a55 100644
--- a/src/image/image.ts
+++ b/src/image/image.ts
@@ -28,18 +28,9 @@ export default class Image extends SuperComponent {
   lifetimes = {
     attached() {
       const { width, height } = this.data;
-      let innerStyle = '';
-      this.update();
 
-      if (width) {
-        innerStyle += `width: ${addUnit(width)};`;
-      }
-      if (height) {
-        innerStyle += `height: ${addUnit(height)};`;
-      }
-      this.setData({
-        innerStyle,
-      });
+      this.update();
+      this.calcSize(width, height);
     },
   };
 
@@ -48,6 +39,9 @@ export default class Image extends SuperComponent {
       if (this.preSrc === this.properties.src) return;
       this.update();
     },
+    'width, height'(width, height) {
+      this.calcSize(width, height);
+    },
   };
 
   methods = {
@@ -84,6 +78,20 @@ export default class Image extends SuperComponent {
       this.triggerEvent('error', e.detail);
     },
 
+    calcSize(width, height) {
+      let innerStyle = '';
+
+      if (width) {
+        innerStyle += `width: ${addUnit(width)};`;
+      }
+      if (height) {
+        innerStyle += `height: ${addUnit(height)};`;
+      }
+      this.setData({
+        innerStyle,
+      });
+    },
+
     update() {
       const { src } = this.properties;
       this.preSrc = src;

From 8529327d8d97178fd18b96790e9f5833d02e3397 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 30 May 2023 21:05:33 +0800
Subject: [PATCH 089/202] chore: publish v1.1.8 (#2051)

* chore: publish v1.1.8

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 14 ++++++++++++++
 package.json |  4 ++--
 src/_common  |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5442607d9..6b3d683b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,20 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.8 `2023-05-30` 
+### 🚀 Features
+- `Textarea`:  属性 autoSize 支持控制最大最小高度 @anlyyao ([#2035](https://github.com/Tencent/tdesign-miniprogram/pull/2035))
+- `Sticky`:  补充外部样式类 `t-class-content` @anlyyao ([#2047](https://github.com/Tencent/tdesign-miniprogram/pull/2047))
+### 🐞 Bug Fixes
+- `DropdownMenu`: 修复基础调试版本低于 2.19.2时无法使用的问题 @anlyyao ([#2043](https://github.com/Tencent/tdesign-miniprogram/pull/2043))
+- `Sticky`: 解决 fixed 定位时宽度错误 @anlyyao ([#2047](https://github.com/Tencent/tdesign-miniprogram/pull/2047))
+- `NavBar`: 修复背景色支持渐变色 @LeeJim ([#2049](https://github.com/Tencent/tdesign-miniprogram/pull/2049))
+- `Drawer`: 修复 item-click 参数返回错误的问题 @ElanYoung ([#2039](https://github.com/Tencent/tdesign-miniprogram/pull/2039))
+- `Image`: 修复 width 和 height 无动态响应的问题 @LeeJim ([#2050](https://github.com/Tencent/tdesign-miniprogram/pull/2050))
+- `Drawer`: 修复 item-click 参数返回错误的问题 @ElanYoung ([#2039](https://github.com/Tencent/tdesign-miniprogram/pull/2039))
+### 🚧 Others
+- 修复 babel 报错的问题 @zhangpaopao0609 ([#2046](https://github.com/Tencent/tdesign-miniprogram/pull/2046))
+
 ## 🌈 1.1.7 `2023-05-23` 
 ### 🚀 Features
 - `ActionSheet`: 新增 CSS Variable 用于控制取消按钮颜色 @favouredddd ([#2007](https://github.com/Tencent/tdesign-miniprogram/pull/2007))
diff --git a/package.json b/package.json
index 55491f0c1..9eccda978 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",
@@ -126,4 +126,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
+}
\ No newline at end of file
diff --git a/src/_common b/src/_common
index eafebccb6..a53b3999b 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit eafebccb6b2e9515e79bf80ce9db0263d9896d24
+Subproject commit a53b3999b000bc12d196be1f5caf3c1b56e4ddfa

From aac30fd34adfe5ad44888eec9ed42ff93db7c2af Mon Sep 17 00:00:00 2001
From: Guan9 <mllz79@163.com>
Date: Thu, 1 Jun 2023 19:47:54 +0800
Subject: [PATCH 090/202] =?UTF-8?q?fix(indexes):=20=E7=B4=A2=E5=BC=95?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=97=A0=E6=B3=95=E9=80=89=E4=B8=AD=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20(#2036)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(indexes): 异步数据未重新计算高度

* docs(indexes): 增加async文档说明

* fix(indexes): 通过indexList null判断是否异步数据

* fix(indexes): 修改indexList type类型
---
 src/indexes/indexes.ts | 3 ++-
 src/indexes/props.ts   | 2 +-
 src/indexes/type.ts    | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/indexes/indexes.ts b/src/indexes/indexes.ts
index d33f6f77a..39d609d0c 100644
--- a/src/indexes/indexes.ts
+++ b/src/indexes/indexes.ts
@@ -44,6 +44,7 @@ export default class Indexes extends SuperComponent {
   observers = {
     indexList(v) {
       this.setIndexList(v);
+      this.setHeight(this.data._height);
     },
     height(v) {
       this.setHeight(v);
@@ -55,7 +56,7 @@ export default class Indexes extends SuperComponent {
       if (this.data._height === 0) {
         this.setHeight();
       }
-      if (this.data._indexList?.length === 0) {
+      if (this.data.indexList === null) {
         this.setIndexList();
       }
     },
diff --git a/src/indexes/props.ts b/src/indexes/props.ts
index 97fe5772f..ffd3060d1 100644
--- a/src/indexes/props.ts
+++ b/src/indexes/props.ts
@@ -8,7 +8,7 @@ import { TdIndexesProps } from './type';
 const props: TdIndexesProps = {
   /** 索引字符列表。不传默认 `A-Z` */
   indexList: {
-    type: Array,
+    type: null,
   },
   /** 已废弃。索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。 */
   list: {
diff --git a/src/indexes/type.ts b/src/indexes/type.ts
index 7207e8132..b54f3a106 100644
--- a/src/indexes/type.ts
+++ b/src/indexes/type.ts
@@ -17,7 +17,7 @@ export interface TdIndexesProps {
    * 索引字符列表。不传默认 `A-Z`
    */
   indexList?: {
-    type: ArrayConstructor;
+    type: null;
     value?: string[] | number[];
   };
   /**

From 5c397a3a6b4e93071fd5084fa1e8d70cdd24b420 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Mon, 5 Jun 2023 22:47:05 +0800
Subject: [PATCH 091/202] feat(switch): prevent click when the switch component
 props loading is true (#2061)

---
 src/switch/switch.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/switch/switch.ts b/src/switch/switch.ts
index fd0834edf..cd799c072 100644
--- a/src/switch/switch.ts
+++ b/src/switch/switch.ts
@@ -48,9 +48,9 @@ export default class Switch extends SuperComponent {
 
   methods = {
     handleSwitch() {
-      const { disabled, value, customValue } = this.data;
+      const { loading, disabled, value, customValue } = this.data;
       const [activeValue, inactiveValue] = customValue;
-      if (disabled) return;
+      if (loading || disabled) return;
 
       this._trigger('change', {
         value: value === activeValue ? inactiveValue : activeValue,

From e2761386da91bfa98b4156ab8da7ca75de9999df Mon Sep 17 00:00:00 2001
From: Guan9 <mllz79@163.com>
Date: Mon, 5 Jun 2023 22:51:46 +0800
Subject: [PATCH 092/202] =?UTF-8?q?feat(checkbox):=20=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=9B=BE=E6=A0=87=E5=A2=9E=E5=8A=A0=E5=8D=8A=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E6=80=81=20(#2056)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/checkbox/README.md     | 2 +-
 src/checkbox/checkbox.wxml | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index b046eec70..dba5b0d90 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -73,7 +73,7 @@ content | String / Slot | - | 多选框内容 | N
 content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
 disabled | Boolean | undefined | 是否禁用组件 | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
-icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
 indeterminate | Boolean | false | 是否为半选 | N
 label | String / Slot | - | 主文案 | N
 max-content-row | Number | 5 | 内容最大行数限制 | N
diff --git a/src/checkbox/checkbox.wxml b/src/checkbox/checkbox.wxml
index 9feb113dd..4aaf52d37 100644
--- a/src/checkbox/checkbox.wxml
+++ b/src/checkbox/checkbox.wxml
@@ -14,7 +14,11 @@
     class="{{_.cls(classPrefix + '__icon', [placement, ['checked', checked], ['disabled', disabled]])}} {{prefix}}-class-icon"
   >
     <view wx:if="{{_.isArray(icon)}}" class="{{classPrefix}}__icon">
-      <image src="{{checked ? icon[0] : icon[1]}}" class="{{classPrefix}}__icon-image" webp />
+      <image
+        src="{{checked ? indeterminate && icon[2] ? icon[2] : icon[0] : icon[1]}}"
+        class="{{classPrefix}}__icon-image"
+        webp
+      />
     </view>
     <block wx:else>
       <t-icon

From d6f34fc297ff87ed4d247827e47303bc1f0319e0 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 6 Jun 2023 10:55:12 +0800
Subject: [PATCH 093/202] feat(Search): support cursor-spacing attr (#2065)

* feat(Search): support cursor-spacing attr

* test: update snapshots
---
 src/search/README.md                                      | 1 +
 src/search/__test__/__snapshots__/index.test.js.snap      | 1 +
 .../__test__/__virtualHostSnapshot__/index.test.js.snap   | 1 +
 src/search/props.ts                                       | 5 +++++
 src/search/search.wxml                                    | 1 +
 src/search/type.ts                                        | 8 ++++++++
 6 files changed, 17 insertions(+)

diff --git a/src/search/README.md b/src/search/README.md
index c1d1afa80..016b89c7e 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -49,6 +49,7 @@ action | String / Slot | '' | 自定义右侧操作按钮文字 | N
 center | Boolean | false | 是否居中 | N
 disabled | Boolean | false | 是否禁用 | N
 external-classes | Array | - | 组件外部样式类名，分别用于设置组件外层类名、输入框类名、输入框容器类名、右侧 cancel 文本类名、左侧图标类名、右侧图标类型。`['t-class', 't-class-input', 't-class-input-container', 't-class-action','t-class-left','t-class-clear']` | N
+cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N
 focus | Boolean | false | 是否聚焦 | N
 label | String | '' | 已废弃。左侧文本 | N
 left-icon | String / Slot | 'search' | 左侧图标 | N
diff --git a/src/search/__test__/__snapshots__/index.test.js.snap b/src/search/__test__/__snapshots__/index.test.js.snap
index f3abf4ef5..1c1ffb374 100644
--- a/src/search/__test__/__snapshots__/index.test.js.snap
+++ b/src/search/__test__/__snapshots__/index.test.js.snap
@@ -31,6 +31,7 @@ exports[`search Props :base 1`] = `
         <wx-input
           class="t-input__keyword t-class-input"
           confirmType="search"
+          cursorSpacing="{{0}}"
           disabled="{{false}}"
           focus="{{false}}"
           name="input"
diff --git a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
index f3abf4ef5..1c1ffb374 100644
--- a/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/search/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -31,6 +31,7 @@ exports[`search Props :base 1`] = `
         <wx-input
           class="t-input__keyword t-class-input"
           confirmType="search"
+          cursorSpacing="{{0}}"
           disabled="{{false}}"
           focus="{{false}}"
           name="input"
diff --git a/src/search/props.ts b/src/search/props.ts
index f5c082f8a..68fde16df 100644
--- a/src/search/props.ts
+++ b/src/search/props.ts
@@ -25,6 +25,11 @@ const props: TdSearchProps = {
   externalClasses: {
     type: Array,
   },
+  /** 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 */
+  cursorSpacing: {
+    type: Number,
+    value: 0,
+  },
   /** 是否聚焦 */
   focus: {
     type: Boolean,
diff --git a/src/search/search.wxml b/src/search/search.wxml
index 85f9dac8e..a9037975b 100644
--- a/src/search/search.wxml
+++ b/src/search/search.wxml
@@ -22,6 +22,7 @@
       focus="{{localValue.focus}}"
       value="{{value}}"
       confirm-type="search"
+      cursor-spacing="{{cursorSpacing}}"
       placeholder="{{placeholder}}"
       placeholder-class="{{classPrefix}}__placeholder {{classPrefix}}__placeholder--{{center ? 'center': 'normal'}}"
       bind:input="onInput"
diff --git a/src/search/type.ts b/src/search/type.ts
index 3955da39b..3ebb2ea8f 100644
--- a/src/search/type.ts
+++ b/src/search/type.ts
@@ -44,6 +44,14 @@ export interface TdSearchProps {
     type: ArrayConstructor;
     value?: ['t-class', 't-class-input', 't-class-input-container', 't-class-cancel', 't-class-left', 't-class-right'];
   };
+  /**
+   * 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
+   * @default 0
+   */
+  cursorSpacing?: {
+    type: NumberConstructor;
+    value?: number;
+  };
   /**
    * 是否聚焦
    * @default false

From 579471198fa7600a09077ddb4ae8601a49b4b133 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Thu, 8 Jun 2023 23:38:06 +0800
Subject: [PATCH 094/202] fix(Switch): resolved loading state style (#2074)

---
 src/switch/switch.wxml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/switch/switch.wxml b/src/switch/switch.wxml
index 9aa2cd73f..df9f312e9 100644
--- a/src/switch/switch.wxml
+++ b/src/switch/switch.wxml
@@ -9,7 +9,7 @@
   aria-role="switch"
 >
   <view
-    class="{{_.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled], size])}} {{prefix}}-class-body"
+    class="{{_.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size])}} {{prefix}}-class-body"
   >
     <view
       class="{{_.cls(classPrefix + '__dot', [['checked', checked], ['plain', label.length != 2 && icon.length != 2 && !loading], size])}} {{prefix}}-class-dot"

From 7dcf57479cd2a3084c8fec957f5328d432388c6b Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Fri, 9 Jun 2023 23:05:30 +0800
Subject: [PATCH 095/202] fix(Icon): resolved icon naming error (#2076)

---
 .../__test__/__snapshots__/demo.test.js.snap  | 30 -------------------
 .../__virtualHostSnapshot__/demo.test.js.snap | 30 -------------------
 src/icon/_example/data.js                     |  2 --
 src/icon/icon.less                            |  6 ++--
 4 files changed, 3 insertions(+), 65 deletions(-)

diff --git a/src/icon/__test__/__snapshots__/demo.test.js.snap b/src/icon/__test__/__snapshots__/demo.test.js.snap
index 0fcbb99d1..427bfa0e6 100644
--- a/src/icon/__test__/__snapshots__/demo.test.js.snap
+++ b/src/icon/__test__/__snapshots__/demo.test.js.snap
@@ -80,36 +80,6 @@ exports[`Icon Icon base demo works fine 1`] = `
         arrow-down-rectangle
       </wx-view>
     </wx-view>
-    <wx-view
-      class="demo__card"
-    >
-      <t-icon
-        data-name="arrow-down-triangle-filled"
-        name="arrow-down-triangle-filled"
-        size="48rpx"
-        bind:click="onIconTap"
-      />
-      <wx-view
-        class="demo__card-name"
-      >
-        arrow-down-triangle-filled
-      </wx-view>
-    </wx-view>
-    <wx-view
-      class="demo__card"
-    >
-      <t-icon
-        data-name="arrow-down-triangle"
-        name="arrow-down-triangle"
-        size="48rpx"
-        bind:click="onIconTap"
-      />
-      <wx-view
-        class="demo__card-name"
-      >
-        arrow-down-triangle
-      </wx-view>
-    </wx-view>
     <wx-view
       class="demo__card"
     >
diff --git a/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 0fcbb99d1..427bfa0e6 100644
--- a/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/icon/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -80,36 +80,6 @@ exports[`Icon Icon base demo works fine 1`] = `
         arrow-down-rectangle
       </wx-view>
     </wx-view>
-    <wx-view
-      class="demo__card"
-    >
-      <t-icon
-        data-name="arrow-down-triangle-filled"
-        name="arrow-down-triangle-filled"
-        size="48rpx"
-        bind:click="onIconTap"
-      />
-      <wx-view
-        class="demo__card-name"
-      >
-        arrow-down-triangle-filled
-      </wx-view>
-    </wx-view>
-    <wx-view
-      class="demo__card"
-    >
-      <t-icon
-        data-name="arrow-down-triangle"
-        name="arrow-down-triangle"
-        size="48rpx"
-        bind:click="onIconTap"
-      />
-      <wx-view
-        class="demo__card-name"
-      >
-        arrow-down-triangle
-      </wx-view>
-    </wx-view>
     <wx-view
       class="demo__card"
     >
diff --git a/src/icon/_example/data.js b/src/icon/_example/data.js
index bf46b399a..0acd3f085 100644
--- a/src/icon/_example/data.js
+++ b/src/icon/_example/data.js
@@ -4,8 +4,6 @@ const icons = [
   'add',
   'app',
   'arrow-down-rectangle',
-  'arrow-down-triangle-filled',
-  'arrow-down-triangle',
   'arrow-down',
   'arrow-left',
   'arrow-right',
diff --git a/src/icon/icon.less b/src/icon/icon.less
index 9600685a3..69dbb8d10 100644
--- a/src/icon/icon.less
+++ b/src/icon/icon.less
@@ -61,15 +61,15 @@
   content: '\E005';
 }
 
-.@{prefix}-icon-arrow-down-triangle-filled:before {
+.@{prefix}-icon-arrow-down:before {
   content: '\E006';
 }
 
-.@{prefix}-icon-arrow-down-triangle:before {
+.@{prefix}-icon-arrow-left:before {
   content: '\E007';
 }
 
-.@{prefix}-icon-arrow-down:before {
+.@{prefix}-icon-arrow-right:before {
   content: '\E008';
 }
 

From 20b4908c07f1df55c3d38a87ed9c2f176873d9a4 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 12 Jun 2023 13:04:07 +0800
Subject: [PATCH 096/202] fix(tree-select): enable keys property (#2085)

---
 src/tree-select/tree-select.ts   | 19 ++++++++-----------
 src/tree-select/tree-select.wxml | 20 ++++++++++----------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/tree-select/tree-select.ts b/src/tree-select/tree-select.ts
index a491cd241..87a2e0810 100644
--- a/src/tree-select/tree-select.ts
+++ b/src/tree-select/tree-select.ts
@@ -2,6 +2,8 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 
+import type { TreeOptionData } from '../common/common';
+
 const { prefix } = config;
 const name = `${prefix}-tree-select`;
 
@@ -16,8 +18,6 @@ export default class TreeSelect extends SuperComponent {
   data = {
     prefix,
     classPrefix: name,
-    labelAlias: 'label',
-    valueAlias: 'value',
   };
 
   properties = props;
@@ -33,25 +33,22 @@ export default class TreeSelect extends SuperComponent {
     value() {
       this.buildTreeOptions();
     },
-
-    keys(obj) {
-      this.setData({
-        labelAlias: obj.label || 'label',
-        valueAlias: obj.value || 'value',
-      });
-    },
   };
 
   methods = {
     buildTreeOptions() {
-      const { options, value, multiple } = this.data;
+      const { options, value, multiple, keys } = this.data;
       const treeOptions = [];
       let level = -1;
       let node = { children: options };
 
       while (node && node.children) {
         level += 1;
-        const list = node.children;
+        const list = node.children.map((item: TreeOptionData) => ({
+          label: item[keys?.label || 'label'],
+          value: item[keys?.value || 'value'],
+          children: item.children,
+        }));
         const thisValue = value?.[level];
 
         treeOptions.push([...list]);
diff --git a/src/tree-select/tree-select.wxml b/src/tree-select/tree-select.wxml
index 4ffc46596..5a0f3505a 100644
--- a/src/tree-select/tree-select.wxml
+++ b/src/tree-select/tree-select.wxml
@@ -20,21 +20,21 @@
       <t-side-bar-item
         wx:for="{{treeOptions[level]}}"
         wx:key="index"
-        label="{{item[labelAlias]}}"
-        value="{{item[valueAlias]}}"
+        label="{{item.label}}"
+        value="{{item.value}}"
         t-class="{{prefix}}-class-left-item"
       />
     </t-side-bar>
     <block wx:elif="{{level != leafLevel}}">
       <view
         wx:for="{{treeOptions[level]}}"
-        wx:key="index"
+        wx:key="value"
         bind:tap="handleTreeClick"
         data-level="{{level}}"
-        data-value="{{item[valueAlias]}}"
-        class="{{_.cls(classPrefix + '__item', [['active', item[valueAlias] === value[level]]])}} {{prefix}}-class-middle-item"
+        data-value="{{item.value}}"
+        class="{{_.cls(classPrefix + '__item', [['active', item.value === value[level]]])}} {{prefix}}-class-middle-item"
       >
-        {{item[labelAlias]}}
+        {{item.label}}
       </view>
     </block>
     <t-radio-group
@@ -50,10 +50,10 @@
         icon="line"
         class="{{classPrefix}}__radio-item {{prefix}}-class-right-item"
         t-class-label="{{prefix}}-class-right-item-label"
-        value="{{item[valueAlias]}}"
+        value="{{item.value}}"
         borderless
         placement="right"
-        >{{item[labelAlias]}}</t-radio
+        >{{item.label}}</t-radio
       >
     </t-radio-group>
     <t-checkbox-group
@@ -71,8 +71,8 @@
         class="{{prefix}}-class-right-item"
         t-class-label="{{prefix}}-class-right-item-label"
         borderless
-        value="{{item[valueAlias]}}"
-        >{{item[labelAlias]}}</t-checkbox
+        value="{{item.value}}"
+        >{{item.label}}</t-checkbox
       >
     </t-checkbox-group>
   </scroll-view>

From ab16f53de91ae02c07031de12aa9de8f5a993052 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Mon, 12 Jun 2023 14:12:28 +0800
Subject: [PATCH 097/202] fix(radio-group): fix abnormal display of radio group
 selection status (#2082)

* fix(radio-group): fix abnormal display of radio group selection status

* fix(radio-group): fix abnormal display of radio group selection status
---
 src/radio-group/radio-group.wxml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/radio-group/radio-group.wxml b/src/radio-group/radio-group.wxml
index d245948f0..78f255d76 100644
--- a/src/radio-group/radio-group.wxml
+++ b/src/radio-group/radio-group.wxml
@@ -9,7 +9,7 @@
       data-value="{{item.value}}"
       block="{{item.block || true}}"
       label="{{item.label || ''}}"
-      value="{{item.value || index}}"
+      value="{{item.value}}"
       checked="{{item.checked || false}}"
       content="{{item.content || ''}}"
       content-disabled="{{item.contentDisabled || false}}"

From 162b1c964c579bf06efa820917a99d427b00e882 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 12 Jun 2023 16:47:00 +0800
Subject: [PATCH 098/202] docs(slider): add faq part

---
 src/slider/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/slider/README.md b/src/slider/README.md
index 88aa79c8f..85f985c57 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -77,3 +77,7 @@ default-value | Number / Array | undefined | 滑块值。非受控属性。TS 
 change | `(value: SliderValue)` | 滑块值变化时触发
 dragend | \- | 结束拖动时触发
 dragstart | \- | 开始拖动时触发
+
+## FAQ
+
+当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `getInitialStyle` 方法，才能正常渲染。
\ No newline at end of file

From 601d65097d8602668b3fd24791dd7aa86154dd57 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 13 Jun 2023 21:34:10 +0800
Subject: [PATCH 099/202] fix(CellGroup): resolved borderen invalid (#2089)

---
 src/cell-group/cell-group.wxml                               | 2 +-
 src/cell/__test__/__snapshots__/index.test.js.snap           | 2 +-
 src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/cell-group/cell-group.wxml b/src/cell-group/cell-group.wxml
index 7f19c002a..404f3f313 100644
--- a/src/cell-group/cell-group.wxml
+++ b/src/cell-group/cell-group.wxml
@@ -3,7 +3,7 @@
 <view wx:if="{{ title }}" class="class {{ classPrefix }}__title {{prefix}}-class-title"> {{ title }} </view>
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_.cls(classPrefix, [[bordered, 'bordered'], theme])}} class {{prefix}}-class"
+  class="{{_.cls(classPrefix, [['bordered', bordered], theme])}} class {{prefix}}-class"
 >
   <slot />
 </view>
diff --git a/src/cell/__test__/__snapshots__/index.test.js.snap b/src/cell/__test__/__snapshots__/index.test.js.snap
index 049933a34..888cd84d5 100644
--- a/src/cell/__test__/__snapshots__/index.test.js.snap
+++ b/src/cell/__test__/__snapshots__/index.test.js.snap
@@ -59,7 +59,7 @@ exports[`cell :with group 1`] = `
 <main>
   <main>
     <wx-view
-      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
+      class="t-cell-group t-cell-group--default class t-class"
       style=""
     />
   </main>
diff --git a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
index 049933a34..888cd84d5 100644
--- a/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ b/src/cell/__test__/__virtualHostSnapshot__/index.test.js.snap
@@ -59,7 +59,7 @@ exports[`cell :with group 1`] = `
 <main>
   <main>
     <wx-view
-      class="t-cell-group t-cell-group--false t-cell-group--default class t-class"
+      class="t-cell-group t-cell-group--default class t-class"
       style=""
     />
   </main>

From 7b7acc4b2e7520a0d4f26014b3de679e1ccb85b4 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 13 Jun 2023 21:38:29 +0800
Subject: [PATCH 100/202] chore: publish v1.1.9 (#2091)

* chore: publish v1.1.9

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 14 ++++++++++++++
 package.json |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b3d683b3..2d55d8208 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,20 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.9 `2023-06-13` 
+### 🚀 Features
+- `CheckBox`: 自定义图标增加半选中态  @lolhezihehe ([#2056](https://github.com/Tencent/tdesign-miniprogram/pull/2056))
+- `Search`: 新增 `cursor-spacing` 属性 @anlyyao ([#2065](https://github.com/Tencent/tdesign-miniprogram/pull/2065))
+### 🐞 Bug Fixes
+- `indexes`: 索引导航无法选中问题 @lolhezihehe ([#2036](https://github.com/Tencent/tdesign-miniprogram/pull/2036))
+- `Switch`: 修复加载态时仍能点击的问题 @betavs ([#2061](https://github.com/Tencent/tdesign-miniprogram/pull/2061))
+- `Switch`: 修复 `loading` 态背景色错误 @anlyyao ([#2074](https://github.com/Tencent/tdesign-miniprogram/pull/2074))
+- `Icon`: 修复命名错误的问题 @anlyyao ([#2076](https://github.com/Tencent/tdesign-miniprogram/pull/2076))
+- `TreeSelect`: 修复使用 keys 之后无法正常使用的问题 @LeeJim ([#2085](https://github.com/Tencent/tdesign-miniprogram/pull/2085))
+- `RadioGroup`: 修复使用 options 时值为 falsy 时异常的问题 @betavs ([#2082](https://github.com/Tencent/tdesign-miniprogram/pull/2082))
+- `CellGroup`: 修复 `bordered` 属性无效的问题 @anlyyao ([#2089](https://github.com/Tencent/tdesign-miniprogram/pull/2089))
+
+
 ## 🌈 1.1.8 `2023-05-30` 
 ### 🚀 Features
 - `Textarea`:  属性 autoSize 支持控制最大最小高度 @anlyyao ([#2035](https://github.com/Tencent/tdesign-miniprogram/pull/2035))
diff --git a/package.json b/package.json
index 9eccda978..3cf6f78c6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From bf30f2a2136de474ea79c5b08cf040cf7bf8b93f Mon Sep 17 00:00:00 2001
From: betavs <392368711@qq.com>
Date: Fri, 16 Jun 2023 10:10:10 +0800
Subject: [PATCH 101/202] feat(notice-bar): add interval property when
 direction='vertical'

---
 src/notice-bar/README.en-US.md               | 1 +
 src/notice-bar/README.md                     | 1 +
 src/notice-bar/_example/scrolling/index.wxml | 1 +
 src/notice-bar/notice-bar.wxml               | 2 +-
 src/notice-bar/props.ts                      | 5 +++++
 src/notice-bar/type.ts                       | 7 +++++++
 6 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/notice-bar/README.en-US.md b/src/notice-bar/README.en-US.md
index 6d98c4ad3..b3efc1062 100644
--- a/src/notice-bar/README.en-US.md
+++ b/src/notice-bar/README.en-US.md
@@ -10,6 +10,7 @@ direction | String | horizontal | options：horizontal/vertical | N
 external-classes | Array | - | `['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon']` | N
 operation | String / Slot | - | \- | N
 marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
+interval | Number | 2000 | - | N
 prefix-icon | String / Boolean/ Object / Slot | - | \- | N
 suffix-icon | String / Boolean / Object / Slot | - | \- | N
 theme | String | info | options：info/success/warning/error | N
diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
index d236cec4d..e6d6726ad 100644
--- a/src/notice-bar/README.md
+++ b/src/notice-bar/README.md
@@ -75,6 +75,7 @@ direction | String | horizontal | 滚动方向。可选项：horizontal/vertical
 external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。`['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon']` | N
 operation | String / Slot | - | 右侧额外信息 | N
 marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
+interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】。 | N
 prefix-icon | String / Boolean / Object / Slot | - | 前缀图标。值为字符串表示图标名称，值为 `false` 表示不显示前缀图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。| N
 suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型，表示透传至 `icon`，不传表示不显示后缀图标。 | N
 theme | String | info | 内置主题。可选项：info/success/warning/error | N
diff --git a/src/notice-bar/_example/scrolling/index.wxml b/src/notice-bar/_example/scrolling/index.wxml
index 8a877ccad..b6379a159 100644
--- a/src/notice-bar/_example/scrolling/index.wxml
+++ b/src/notice-bar/_example/scrolling/index.wxml
@@ -14,6 +14,7 @@
 <t-notice-bar
   visible="{{true}}"
   direction="vertical"
+  interval="{{3000}}"
   content="{{content}}"
   prefixIcon="sound"
   bind:click="click"
diff --git a/src/notice-bar/notice-bar.wxml b/src/notice-bar/notice-bar.wxml
index 5986e43c6..1f4140b97 100644
--- a/src/notice-bar/notice-bar.wxml
+++ b/src/notice-bar/notice-bar.wxml
@@ -24,7 +24,7 @@
         autoplay="true"
         vertical="true"
         circular="true"
-        interval="2000"
+        interval="{{interval}}"
         display-multiple-items="1"
         class="{{classPrefix}}__content--vertical"
       >
diff --git a/src/notice-bar/props.ts b/src/notice-bar/props.ts
index 323068816..835ee6bc7 100644
--- a/src/notice-bar/props.ts
+++ b/src/notice-bar/props.ts
@@ -23,6 +23,11 @@ const props: TdNoticeBarProps = {
   operation: {
     type: String,
   },
+  /** 间隔时间 */
+  interval: {
+    type: Number,
+    value: 2000,
+  },
   /** 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放 */
   marquee: {
     type: null,
diff --git a/src/notice-bar/type.ts b/src/notice-bar/type.ts
index f71efec7a..5bf0a923c 100644
--- a/src/notice-bar/type.ts
+++ b/src/notice-bar/type.ts
@@ -42,6 +42,13 @@ export interface TdNoticeBarProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 间隔时间
+   */
+  interval: {
+    type: NumberConstructor;
+    value: number;
+  };
   /**
    * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
    * @default false

From 20e5461dfb81986ee9f518fa32843e8a8f792707 Mon Sep 17 00:00:00 2001
From: betavs <392368711@qq.com>
Date: Fri, 16 Jun 2023 11:11:16 +0800
Subject: [PATCH 102/202] test(notice-bar): add interval property when
 direction='vertical'

---
 src/notice-bar/__test__/__snapshots__/demo.test.js.snap          | 1 +
 .../__test__/__virtualHostSnapshot__/demo.test.js.snap           | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.js.snap b/src/notice-bar/__test__/__snapshots__/demo.test.js.snap
index 3f132d309..1f3414812 100644
--- a/src/notice-bar/__test__/__snapshots__/demo.test.js.snap
+++ b/src/notice-bar/__test__/__snapshots__/demo.test.js.snap
@@ -142,6 +142,7 @@ exports[`NoticeBar NoticeBar scrolling demo works fine 1`] = `
       ]
     }}"
     direction="vertical"
+    interval="{{3000}}"
     prefixIcon="sound"
     visible="{{true}}"
     bind:click="click"
diff --git a/src/notice-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/notice-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 3f132d309..1f3414812 100644
--- a/src/notice-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/notice-bar/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -142,6 +142,7 @@ exports[`NoticeBar NoticeBar scrolling demo works fine 1`] = `
       ]
     }}"
     direction="vertical"
+    interval="{{3000}}"
     prefixIcon="sound"
     visible="{{true}}"
     bind:click="click"

From 6ae343f4e27dc66c6f43075058f6dca6c045a577 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 20 Jun 2023 14:27:00 +0800
Subject: [PATCH 103/202] fix(Grid): resolved align='laft' valid (#2110)

---
 src/grid-item/grid-item.less | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/grid-item/grid-item.less b/src/grid-item/grid-item.less
index 89e09a640..4a98d5d82 100644
--- a/src/grid-item/grid-item.less
+++ b/src/grid-item/grid-item.less
@@ -53,6 +53,15 @@
       flex-direction: row;
       padding-left: @grid-item-padding;
     }
+
+    &--left {
+      justify-self: flex-start;
+      align-items: flex-start;
+
+      .@{prefix}-grid-item__words {
+        text-align: left;
+      }
+    }
   }
 
   &__words {
@@ -104,15 +113,6 @@
     }
   }
 
-  &--left {
-    justify-self: flex-start;
-    align-items: flex-start;
-
-    .@{prefix}-grid-item__words {
-      text-align: left;
-    }
-  }
-
   &__text {
     width: inherit;
     color: @grid-item-text-color;

From 97a9bfcd270018c6b8ebecb304b1e6223c291143 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 20 Jun 2023 14:47:36 +0800
Subject: [PATCH 104/202] fix(Fab): resolved hover-class invalid (#2093)

---
 src/common/template/button.wxml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/template/button.wxml b/src/common/template/button.wxml
index 173e8bb80..27d6bc493 100644
--- a/src/common/template/button.wxml
+++ b/src/common/template/button.wxml
@@ -14,6 +14,7 @@
     size="{{size || 'medium'}}"
     variant="{{variant || 'base'}}"
     open-type="{{openType || ''}}"
+    hover-class="{{hoverClass}}"
     hover-stop-propagation="{{hoverStopPropagation || false}}"
     hover-start-time="{{hoverStartTime || 20}}"
     hover-stay-time="{{hoverStayTime || 70}}"

From cfb629fbef0c57e7a1297b1a3b08006a5c4c7462 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Tue, 20 Jun 2023 15:29:03 +0800
Subject: [PATCH 105/202] fix(upload): fix abnormal image display (#2098)

---
 src/upload/__test__/index.test.js | 2 +-
 src/upload/upload.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/upload/__test__/index.test.js b/src/upload/__test__/index.test.js
index 5c5389bc4..b5f4f6677 100644
--- a/src/upload/__test__/index.test.js
+++ b/src/upload/__test__/index.test.js
@@ -157,7 +157,7 @@ describe('upload', () => {
 
       // gridConfig: width、 height
       expect($gridItemWrapper.dom.getAttribute('style')).toEqual(
-        `width:${comp.data.gridConfig.width}px;height:${comp.data.gridConfig.height}px`,
+        `align-self:flex-end;width:${comp.data.gridConfig.width}px;height:${comp.data.gridConfig.height}px`,
       );
 
       // gridConfig: column
diff --git a/src/upload/upload.ts b/src/upload/upload.ts
index 8a34fa3cf..d12b84418 100644
--- a/src/upload/upload.ts
+++ b/src/upload/upload.ts
@@ -128,7 +128,7 @@ export default class Upload extends SuperComponent {
     if (!isObject(gridConfig)) gridConfig = {};
     const { column = 4, width = 160, height = 160 } = gridConfig as any;
     this.setData({
-      gridItemStyle: `width:${width}rpx;height:${height}rpx`,
+      gridItemStyle: `align-self:flex-end;width:${width}rpx;height:${height}rpx`,
       column: column,
     });
   }

From 76773001779cf1126fe0a95199574179ce9455ad Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 20 Jun 2023 18:53:51 +0800
Subject: [PATCH 106/202] feat(tabs): add split property (#2113)

---
 src/tab-panel/props.ts   |  2 +-
 src/tab-panel/type.ts    |  2 +-
 src/tabs/README.en-US.md |  5 +++--
 src/tabs/README.md       |  7 ++++---
 src/tabs/props.ts        |  7 ++++++-
 src/tabs/tabs.less       |  5 ++++-
 src/tabs/tabs.wxml       |  2 +-
 src/tabs/type.ts         | 10 +++++++++-
 8 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/tab-panel/props.ts b/src/tab-panel/props.ts
index 8915a6357..bc991282a 100644
--- a/src/tab-panel/props.ts
+++ b/src/tab-panel/props.ts
@@ -11,7 +11,7 @@ const props: TdTabPanelProps = {
     type: Object,
     value: null,
   },
-  /** 选项卡内容隐藏时是否销毁 */
+  /** 【实现有误，暂不支持】选项卡内容隐藏时是否销毁 */
   destroyOnHide: {
     type: Boolean,
     value: true,
diff --git a/src/tab-panel/type.ts b/src/tab-panel/type.ts
index 40440d995..d35b546d1 100644
--- a/src/tab-panel/type.ts
+++ b/src/tab-panel/type.ts
@@ -16,7 +16,7 @@ export interface TdTabPanelProps {
     value?: object;
   };
   /**
-   * 选项卡内容隐藏时是否销毁
+   * 【实现有误，暂不支持】选项卡内容隐藏时是否销毁
    * @default true
    */
   destroyOnHide?: {
diff --git a/src/tabs/README.en-US.md b/src/tabs/README.en-US.md
index e57ca0e16..262f4f677 100644
--- a/src/tabs/README.en-US.md
+++ b/src/tabs/README.en-US.md
@@ -7,9 +7,10 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
 external-classes | Array | - | `['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
-middle | Slot | - | \- | N
+middle | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | \- | N
 space-evenly | Boolean | true | \- | N
+split | Boolean | true | `1.1.10` | N
 sticky | Boolean | false | \- | N
 sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
 swipeable | Boolean | true | \- | N
@@ -34,5 +35,5 @@ destroy-on-hide | Boolean | true | \- | N
 disabled | Boolean | false | \- | N
 icon | String / Object | - | `1.0.0-rc.1` | N
 label | String | - | \- | N
-panel | String / Slot | - | \- | N
+panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
diff --git a/src/tabs/README.md b/src/tabs/README.md
index 523bf1711..744854f7c 100644
--- a/src/tabs/README.md
+++ b/src/tabs/README.md
@@ -112,11 +112,12 @@ Page({
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位秒）TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
+animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名。`['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
-middle | Slot | - | 中间内容，介于头部和内容之间 | N
+middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
 space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
+split | Boolean | true | `1.1.10`。是否展示分割线 | N
 sticky | Boolean | false | 是否开启粘性布局 | N
 sticky-props | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
 swipeable | Boolean | true | 是否可以滑动切换 | N
@@ -141,5 +142,5 @@ destroy-on-hide | Boolean | true | 【实现有误，暂不支持】选项卡内
 disabled | Boolean | false | 是否禁用当前选项卡 | N
 icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
 label | String | - | 选项卡名称 | N
-panel | String / Slot | - | 用于自定义选项卡面板内容 | N
+panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
diff --git a/src/tabs/props.ts b/src/tabs/props.ts
index e754115d8..39832dd65 100644
--- a/src/tabs/props.ts
+++ b/src/tabs/props.ts
@@ -6,7 +6,7 @@
 
 import { TdTabsProps } from './type';
 const props: TdTabsProps = {
-  /** 动画效果设置。其中 duration 表示动画时长 */
+  /** 动画效果设置。其中 duration 表示动画时长。（单位：秒） */
   animation: {
     type: Object,
   },
@@ -24,6 +24,11 @@ const props: TdTabsProps = {
     type: Boolean,
     value: true,
   },
+  /** 是否展示分割线 */
+  split: {
+    type: Boolean,
+    value: true,
+  },
   /** 是否开启粘性布局 */
   sticky: {
     type: Boolean,
diff --git a/src/tabs/tabs.less b/src/tabs/tabs.less
index 5d8ed5e92..19209cf07 100644
--- a/src/tabs/tabs.less
+++ b/src/tabs/tabs.less
@@ -194,7 +194,10 @@
   &__scroll {
     position: relative;
     height: @tab-item-height;
-    .border(bottom, @tab-border-color);
+
+    &--split {
+      .border(bottom, @tab-border-color);
+    }
 
     &::-webkit-scrollbar {
       display: none;
diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
index c716f9ca7..1ca9e8a9e 100644
--- a/src/tabs/tabs.wxml
+++ b/src/tabs/tabs.wxml
@@ -14,7 +14,7 @@
   >
     <view class="{{_.cls(classPrefix + '__wrapper', [theme])}}">
       <scroll-view
-        class="{{_.cls(classPrefix + '__scroll', [placement])}}"
+        class="{{_.cls(classPrefix + '__scroll', [placement, ['split', split]])}}"
         enhanced
         enable-flex
         scroll-left="{{offset}}"
diff --git a/src/tabs/type.ts b/src/tabs/type.ts
index 5c93547a1..ddcaada96 100644
--- a/src/tabs/type.ts
+++ b/src/tabs/type.ts
@@ -8,7 +8,7 @@ import { StickyProps } from '../sticky/index';
 
 export interface TdTabsProps {
   /**
-   * 动画效果设置。其中 duration 表示动画时长
+   * 动画效果设置。其中 duration 表示动画时长。（单位：秒）
    */
   animation?: {
     type: ObjectConstructor;
@@ -37,6 +37,14 @@ export interface TdTabsProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 是否展示分割线
+   * @default true
+   */
+  split?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 是否开启粘性布局
    * @default false

From 3bcf5d78dc063d9f194ecd4c9039e35effe3503e Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Tue, 20 Jun 2023 19:01:40 +0800
Subject: [PATCH 107/202] fix(slider): fix abnormal calculation of slider mark
 (#2114)

---
 src/slider/slider.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/slider/slider.ts b/src/slider/slider.ts
index 1a7285053..32202521d 100644
--- a/src/slider/slider.ts
+++ b/src/slider/slider.ts
@@ -102,9 +102,9 @@ export default class Slider extends SuperComponent {
     },
     marks(val) {
       if (this.data.initialLeft != null) {
-        this.handleMask(val);
+        this.handleMark(val);
       } else {
-        this.bus.on('initial', () => this.handleMask(val));
+        this.bus.on('initial', () => this.handleMark(val));
       }
     },
   };
@@ -146,15 +146,15 @@ export default class Slider extends SuperComponent {
     setValueAndTrigger();
   }
 
-  handleMask(marks: any) {
+  handleMark(marks: any) {
     const calcPos = (arr: number[]) => {
-      const { theme } = this.properties;
+      const { max, theme } = this.properties;
       const { blockSize, maxRange } = this.data;
       const margin = (theme as any) === 'capsule' ? blockSize / 2 : 0;
 
       return arr.map((item) => ({
         val: item,
-        left: Math.round((item / 100) * maxRange) + margin,
+        left: Math.round((item / Number(max)) * maxRange) + margin,
       }));
     };
     if (marks?.length && Array.isArray(marks)) {

From d8324c3a208362a49576c2af93548fe9dee9cb55 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 20 Jun 2023 19:18:45 +0800
Subject: [PATCH 108/202] fix(Input): resolve value=0 is valid when type is
 number (#2108)

---
 src/input/input.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/input/input.ts b/src/input/input.ts
index 7ff04e146..76689a5de 100644
--- a/src/input/input.ts
+++ b/src/input/input.ts
@@ -31,6 +31,7 @@ export default class Input extends SuperComponent {
     prefix,
     classPrefix: name,
     classBasePrefix: prefix,
+    excludeType: ['number', 'digit'],
   };
 
   lifetimes = {
@@ -62,14 +63,15 @@ export default class Input extends SuperComponent {
 
   methods = {
     updateValue(value) {
-      const { maxcharacter, maxlength } = this.properties;
-      if (maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
+      const { maxcharacter, maxlength, type } = this.properties;
+      const { excludeType } = this.data;
+      if (!excludeType.includes(type) && maxcharacter && maxcharacter > 0 && !Number.isNaN(maxcharacter)) {
         const { length, characters } = getCharacterLength('maxcharacter', value, maxcharacter);
         this.setData({
           value: characters,
           count: length,
         });
-      } else if (maxlength > 0 && !Number.isNaN(maxlength)) {
+      } else if (!excludeType.includes(type) && maxlength > 0 && !Number.isNaN(maxlength)) {
         const { length, characters } = getCharacterLength('maxlength', value, maxlength);
         this.setData({
           value: characters,

From 6092abb7895f1f40a64331aa371147efdac34051 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 20 Jun 2023 19:37:10 +0800
Subject: [PATCH 109/202] fix(slider): enable async render (#2115)

---
 src/common/bus.ts    |  7 +++++
 src/slider/README.md | 12 ++++++++-
 src/slider/slider.ts | 61 ++++++++++++++++++++++++--------------------
 3 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/src/common/bus.ts b/src/common/bus.ts
index 46402dfec..216a4a647 100644
--- a/src/common/bus.ts
+++ b/src/common/bus.ts
@@ -1,11 +1,17 @@
 export default class Bus {
   listeners: Map<string, any>;
+  emited: Set<string>;
 
   constructor() {
     this.listeners = new Map();
+    this.emited = new Set();
   }
 
   on(evtName: string, listener) {
+    if (this.emited.has(evtName)) {
+      listener();
+      return;
+    }
     const target = this.listeners.get(evtName) || [];
 
     target.push(listener);
@@ -18,6 +24,7 @@ export default class Bus {
 
     if (listeners) {
       listeners.forEach((func) => func());
+      this.emited.add(evtName);
     }
   }
 }
diff --git a/src/slider/README.md b/src/slider/README.md
index 85f985c57..832b06415 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -80,4 +80,14 @@ dragstart | \- | 开始拖动时触发
 
 ## FAQ
 
-当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `getInitialStyle` 方法，才能正常渲染。
\ No newline at end of file
+当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `init` 方法，才能正常渲染。如下：
+
+```html
+<t-slider id="slider" />
+```
+
+```js
+const $slider = this.selectComponent('#slider');
+
+$slider.init();
+```
\ No newline at end of file
diff --git a/src/slider/slider.ts b/src/slider/slider.ts
index 32202521d..e78aa1c20 100644
--- a/src/slider/slider.ts
+++ b/src/slider/slider.ts
@@ -79,33 +79,11 @@ export default class Slider extends SuperComponent {
       this.handlePropsChange(newValue);
     },
     _value(newValue: SliderValue) {
-      const { min, max, range } = this.properties;
-      const { maxRange } = this.data;
-
-      if (range) {
-        const left = (maxRange * (newValue[0] - Number(min))) / (Number(max) - Number(min));
-        const right = (maxRange * (Number(max) - newValue[1])) / (Number(max) - Number(min));
-        // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
-        this.setLineStyle(left, right);
-      } else {
-        this.setSingleBarWidth(newValue as number);
-      }
-
-      this.setData({
-        isVisibleToScreenReader: true,
-      });
-      setTimeout(() => {
-        this.setData({
-          isVisibleToScreenReader: false,
-        });
-      }, 2e3);
+      this.bus.on('initial', () => this.renderLine(newValue));
+      this.toggleA11yTips();
     },
     marks(val) {
-      if (this.data.initialLeft != null) {
-        this.handleMark(val);
-      } else {
-        this.bus.on('initial', () => this.handleMark(val));
-      }
+      this.bus.on('initial', () => this.handleMark(val));
     },
   };
 
@@ -116,10 +94,35 @@ export default class Slider extends SuperComponent {
     attached() {
       const { value } = this.properties;
       if (!value) this.handlePropsChange(0);
-      this.getInitialStyle();
+      this.init();
     },
   };
 
+  toggleA11yTips() {
+    this.setData({
+      isVisibleToScreenReader: true,
+    });
+    setTimeout(() => {
+      this.setData({
+        isVisibleToScreenReader: false,
+      });
+    }, 2000);
+  }
+
+  renderLine(val) {
+    const { min, max, range } = this.properties;
+    const { maxRange } = this.data;
+
+    if (range) {
+      const left = (maxRange * (val[0] - Number(min))) / (Number(max) - Number(min));
+      const right = (maxRange * (Number(max) - val[1])) / (Number(max) - Number(min));
+      // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
+      this.setLineStyle(left, right);
+    } else {
+      this.setSingleBarWidth(val as number);
+    }
+  }
+
   triggerValue(value?: SliderValue) {
     if (this.preval === value) return;
     this.preval = value;
@@ -139,7 +142,7 @@ export default class Slider extends SuperComponent {
 
     // 基本样式未初始化，等待初始化后在改变数据。
     if (this.data.maxRange === 0) {
-      this.getInitialStyle().then(setValueAndTrigger);
+      this.init().then(setValueAndTrigger);
       return;
     }
 
@@ -189,7 +192,7 @@ export default class Slider extends SuperComponent {
     });
   }
 
-  async getInitialStyle() {
+  async init() {
     const line: boundingClientRect = await getRect(this, '#sliderLine');
     const { blockSize } = this.data;
     const { theme } = this.properties;
@@ -198,6 +201,8 @@ export default class Slider extends SuperComponent {
     let initialLeft = line.left;
     let initialRight = line.right;
 
+    if (initialLeft === 0 && initialRight === 0) return;
+
     if ((theme as any) === 'capsule') {
       maxRange = maxRange - Number(blockSize) - 6; // 6 是边框宽度
       initialLeft -= halfBlock;

From f7fa25850d3c5b1e76fe80c9825ec6d03703bed2 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 20 Jun 2023 20:03:11 +0800
Subject: [PATCH 110/202] fix: add type check before call pagescroll (#2116)

---
 src/mixins/page-scroll.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/page-scroll.ts b/src/mixins/page-scroll.ts
index 268a8fd5f..e7252e8dc 100644
--- a/src/mixins/page-scroll.ts
+++ b/src/mixins/page-scroll.ts
@@ -11,7 +11,7 @@ const onPageScroll = function (event?: IPageScrollOption) {
   if (!page) return;
   const { pageScroller } = page;
 
-  pageScroller.forEach((scroller: Scroller) => {
+  pageScroller?.forEach((scroller: Scroller) => {
     if (typeof scroller === 'function') {
       // @ts-ignore
       scroller(event);

From f27a96fa2b957b04297f63bcbb8d7c0a65eab79d Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 20 Jun 2023 20:22:54 +0800
Subject: [PATCH 111/202] build: remove issue assign logic

---
 .github/workflows/issue-assignees.temp.yml | 35 ----------------------
 1 file changed, 35 deletions(-)

diff --git a/.github/workflows/issue-assignees.temp.yml b/.github/workflows/issue-assignees.temp.yml
index 643436136..1700ee170 100644
--- a/.github/workflows/issue-assignees.temp.yml
+++ b/.github/workflows/issue-assignees.temp.yml
@@ -15,38 +15,3 @@ jobs:
           issuesOpened: |
             👋 @{{ author }}，感谢给 TDesign 提出了 issue。
             请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。
-
-      # https://docs.github.com/cn/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#issues
-      - uses: 94dreamer/issue-assignees@main
-        id: assignees
-        with:
-          project_name: ${{github.event.repository.name}}
-          issue_title: ${{github.event.issue.title}}
-
-      - run: echo ${{ steps.assignees.outputs.contributors }}
-      - name: Add assigness
-        if: steps.assignees.outputs.contributors != ''
-        uses: actions-cool/issues-helper@v3
-        with:
-          actions: 'add-assignees'
-          token: ${{ secrets.GITHUB_TOKEN }}
-          issue-number: ${{ github.event.issue.number }}
-          assignees: ${{ steps.assignees.outputs.contributors }}
-
-      - run: |
-          contributors=${{ steps.assignees.outputs.contributors }}
-          contributorstring=${contributors//,/ @}
-          echo "string=@$contributorstring" >> $GITHUB_OUTPUT
-        id: contributors
-
-      - name: 通知贡献者
-        if: steps.assignees.outputs.contributors != ''
-        uses: actions-cool/maintain-one-comment@v2.0.0
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          body: |
-            ♥️ 有劳 ${{ steps.contributors.outputs.string }} 尽快确认问题。
-            确认有效后将下一步计划和可能需要的时间回复给 @${{ github.event.issue.user.login }} 。
-            <!-- AUTO_ASSIGENEES_NOTIFY_HOOK -->
-          number: ${{ github.event.issue.number }}
-          body-include: "<!-- AUTO_ASSIGENEES_NOTIFY_HOOK -->"

From 79195214b34a34814eea6f1b8fd09f99d56e6050 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 20 Jun 2023 20:54:47 +0800
Subject: [PATCH 112/202] fix(action-sheet): do not trigger close event when
 disabled (#2117)

---
 src/action-sheet/action-sheet.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/action-sheet/action-sheet.ts b/src/action-sheet/action-sheet.ts
index e5ea56f25..7ac9c1552 100644
--- a/src/action-sheet/action-sheet.ts
+++ b/src/action-sheet/action-sheet.ts
@@ -98,10 +98,14 @@ export default class ActionSheet extends SuperComponent {
       const isSwiperMode = theme === ActionSheetTheme.Grid;
       const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
       const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
+
       if (item) {
         this.triggerEvent('selected', { selected: item, index: realIndex });
-        this.triggerEvent('close', { trigger: 'select' });
-        this._trigger('visible-change', { visible: false });
+
+        if (!item.disabled) {
+          this.triggerEvent('close', { trigger: 'select' });
+          this._trigger('visible-change', { visible: false });
+        }
       }
     },
 

From 0687641531d22518595fc6e5c212f21c99d456d8 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 20 Jun 2023 21:00:52 +0800
Subject: [PATCH 113/202] fix(stepper): trigger change when value changed
 (#2118)

---
 src/stepper/stepper.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/stepper/stepper.ts b/src/stepper/stepper.ts
index 0cb809341..64f8ebf77 100644
--- a/src/stepper/stepper.ts
+++ b/src/stepper/stepper.ts
@@ -24,6 +24,7 @@ export default class Stepper extends SuperComponent {
 
   observers = {
     value(v) {
+      this.preValue = Number(v);
       this.setData({
         currentValue: Number(v),
       });
@@ -65,6 +66,8 @@ export default class Stepper extends SuperComponent {
   }
 
   setValue(value) {
+    if (this.preValue === value) return;
+    this.preValue = value;
     this._trigger('change', { value });
   }
 

From c4b3e326f689d35802edcf6844d21c11b63544dc Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 20 Jun 2023 21:05:09 +0800
Subject: [PATCH 114/202] chore: publish v1.1.10 (#2119)

* chore: publish v1.1.10

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 15 +++++++++++++++
 package.json |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d55d8208..983a428d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,21 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.10 `2023-06-20` 
+### 🚀 Features
+- `Tabs`: 新增 split 属性 @LeeJim ([#2113](https://github.com/Tencent/tdesign-miniprogram/pull/2113))
+- `NoticeBar`: 新增 interval 属性 @betavs ([#2097](https://github.com/Tencent/tdesign-miniprogram/pull/2097))
+### 🐞 Bug Fixes
+- `Grid`: 修复 `align=left` 无效的问题 @anlyyao ([#2110](https://github.com/Tencent/tdesign-miniprogram/pull/2110))
+- `Fab`: 修复 `buttonProps` 中的 `hoverClass`属性透传至 `button` 无效 @anlyyao ([#2093](https://github.com/Tencent/tdesign-miniprogram/pull/2093))
+- `Upload`: 修复图片尺寸超出的问题 @betavs ([#2098](https://github.com/Tencent/tdesign-miniprogram/pull/2098))
+- `Slider`: 修复使用 max 之后刻度展示错误的问题 @betavs ([#2114](https://github.com/Tencent/tdesign-miniprogram/pull/2114))
+- `Input`: 修复 `type=number` 时，`value=0` 无效的问题 @anlyyao ([#2108](https://github.com/Tencent/tdesign-miniprogram/pull/2108))
+- `Slider`: 修复异步展示时导致刻度渲染错误的问题 @LeeJim ([#2115](https://github.com/Tencent/tdesign-miniprogram/pull/2115))
+- `ActionSheet`: 修复点击 disabled 的选项仍触发 close、visible-change 事件 @LeeJim ([#2117](https://github.com/Tencent/tdesign-miniprogram/pull/2117))
+- `Stepper`: 保证值发生变化才触发 change 事件 @LeeJim ([#2118](https://github.com/Tencent/tdesign-miniprogram/pull/2118))
+
+
 ## 🌈 1.1.9 `2023-06-13` 
 ### 🚀 Features
 - `CheckBox`: 自定义图标增加半选中态  @lolhezihehe ([#2056](https://github.com/Tencent/tdesign-miniprogram/pull/2056))
diff --git a/package.json b/package.json
index 3cf6f78c6..f21d54d0b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 410299a30287afe9a09c08b62038e77dbd1fcd67 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Wed, 21 Jun 2023 16:40:05 +0800
Subject: [PATCH 115/202] fix(tabs): fix style anomalies caused by too many
 tabs items (#2123)

---
 src/tabs/tabs.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tabs/tabs.less b/src/tabs/tabs.less
index 19209cf07..216aa8f45 100644
--- a/src/tabs/tabs.less
+++ b/src/tabs/tabs.less
@@ -69,7 +69,7 @@
     }
 
     &--evenly {
-      flex: 1;
+      flex: 1 0 auto;
     }
 
     &-inner {

From 52b1f8b13781453fef73479fe5734dcdc529c4eb Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Mon, 26 Jun 2023 11:22:06 +0800
Subject: [PATCH 116/202] fix(picker): fix default value is invalid (#2126)

---
 src/picker/picker.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/picker/picker.ts b/src/picker/picker.ts
index bf5cb9b80..07138b933 100644
--- a/src/picker/picker.ts
+++ b/src/picker/picker.ts
@@ -25,7 +25,7 @@ export default class Picker extends SuperComponent {
   };
 
   observers = {
-    value() {
+    visible() {
       this.updateChildren();
     },
     keys(obj) {
@@ -47,11 +47,11 @@ export default class Picker extends SuperComponent {
 
   methods = {
     updateChildren() {
-      const { value } = this.properties;
+      const { value, defaultValue } = this.properties;
 
       this.$children.forEach((child, index) => {
         child.setData({
-          value: value?.[index] ?? '',
+          value: value?.[index] ?? defaultValue?.[index] ?? '',
         });
         child.update();
       });

From b40609d3f0573067afc002e4058d3067f52aa4e7 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Mon, 26 Jun 2023 11:25:34 +0800
Subject: [PATCH 117/202] feat(checkbox-group): add borderless property (#2124)

* feat(checkbox-group): add borderless property

* test(checkbox-group): add borderless property
---
 src/checkbox-group/checkbox-group.wxml                       | 1 +
 src/checkbox-group/props.ts                                  | 5 +++++
 src/checkbox-group/type.ts                                   | 5 +++++
 src/checkbox/README.en-US.md                                 | 1 +
 src/checkbox/README.md                                       | 1 +
 src/checkbox/__test__/__snapshots__/demo.test.js.snap        | 1 +
 .../__test__/__virtualHostSnapshot__/demo.test.js.snap       | 1 +
 src/checkbox/_example/base/index.wxml                        | 2 +-
 8 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/checkbox-group/checkbox-group.wxml b/src/checkbox-group/checkbox-group.wxml
index cf9aae8a1..925cf8aec 100644
--- a/src/checkbox-group/checkbox-group.wxml
+++ b/src/checkbox-group/checkbox-group.wxml
@@ -19,6 +19,7 @@
       max-content-row="{{item.maxContentRow || 5}}"
       max-label-row="{{item.maxLabelRow || 3}}"
       name="{{item.name || ''}}"
+      borderless="{{borderless}}"
       readonly="{{item.readonly || false}}"
       bind:change="handleInnerChildChange"
       placement="{{item.placement || 'left'}}"
diff --git a/src/checkbox-group/props.ts b/src/checkbox-group/props.ts
index 75f43d6b3..dd821d46e 100644
--- a/src/checkbox-group/props.ts
+++ b/src/checkbox-group/props.ts
@@ -11,6 +11,11 @@ const props: TdCheckboxGroupProps = {
     type: String,
     value: '',
   },
+  /** 是否开启无边框模式 */
+  borderless: {
+    type: Boolean,
+    value: false,
+  },
   /** 是否禁用组件 */
   disabled: {
     type: Boolean,
diff --git a/src/checkbox-group/type.ts b/src/checkbox-group/type.ts
index ffb994f30..df36987bd 100644
--- a/src/checkbox-group/type.ts
+++ b/src/checkbox-group/type.ts
@@ -13,6 +13,11 @@ export interface TdCheckboxGroupProps {
     type: StringConstructor;
     value?: string;
   };
+  /** 是否开启无边框模式 */
+  borderless: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 是否禁用组件
    * @default false
diff --git a/src/checkbox/README.en-US.md b/src/checkbox/README.en-US.md
index 9f7940375..d706b2519 100644
--- a/src/checkbox/README.en-US.md
+++ b/src/checkbox/README.en-US.md
@@ -33,6 +33,7 @@ change | `(checked: boolean)` | \-
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+borderless | Boolean | false | \- | N
 disabled | Boolean | false | \- | N
 max | Number | undefined | \- | N
 name | String | - | \- | N
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index dba5b0d90..876e1f037 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -92,6 +92,7 @@ change | `(checked: boolean)` | 值变化时触发
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+borderless | Boolean | false | 是否开启无边框模式 | N
 disabled | Boolean | false | 是否禁用组件 | N
 max | Number | undefined | 支持最多选中的数量 | N
 name | String | - | 统一设置内部复选框 HTML 属性 | N
diff --git a/src/checkbox/__test__/__snapshots__/demo.test.js.snap b/src/checkbox/__test__/__snapshots__/demo.test.js.snap
index 249157d52..840766486 100644
--- a/src/checkbox/__test__/__snapshots__/demo.test.js.snap
+++ b/src/checkbox/__test__/__snapshots__/demo.test.js.snap
@@ -40,6 +40,7 @@ exports[`Checkbox Checkbox all demo works fine 1`] = `
 exports[`Checkbox Checkbox base demo works fine 1`] = `
 <base>
   <t-checkbox-group
+    borderless="{{true}}"
     options="{{
       Array [
         Object {
diff --git a/src/checkbox/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/checkbox/__test__/__virtualHostSnapshot__/demo.test.js.snap
index 249157d52..840766486 100644
--- a/src/checkbox/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ b/src/checkbox/__test__/__virtualHostSnapshot__/demo.test.js.snap
@@ -40,6 +40,7 @@ exports[`Checkbox Checkbox all demo works fine 1`] = `
 exports[`Checkbox Checkbox base demo works fine 1`] = `
 <base>
   <t-checkbox-group
+    borderless="{{true}}"
     options="{{
       Array [
         Object {
diff --git a/src/checkbox/_example/base/index.wxml b/src/checkbox/_example/base/index.wxml
index d84e80834..02571c99d 100644
--- a/src/checkbox/_example/base/index.wxml
+++ b/src/checkbox/_example/base/index.wxml
@@ -1 +1 @@
-<t-checkbox-group value="{{current}}" bind:change="handleGroupChange" options="{{options}}" />
+<t-checkbox-group value="{{current}}" borderless bind:change="handleGroupChange" options="{{options}}" />

From 4aab25793a9aeac789e3e2dd64b8a4b05e0dc577 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Wed, 28 Jun 2023 22:57:48 +0800
Subject: [PATCH 118/202] fix(Stepper): resolved precision problem (#2130)

---
 src/stepper/stepper.ts | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/stepper/stepper.ts b/src/stepper/stepper.ts
index 64f8ebf77..6d0ba4644 100644
--- a/src/stepper/stepper.ts
+++ b/src/stepper/stepper.ts
@@ -24,10 +24,7 @@ export default class Stepper extends SuperComponent {
 
   observers = {
     value(v) {
-      this.preValue = Number(v);
-      this.setData({
-        currentValue: Number(v),
-      });
+      this.observeValue(v);
     },
   };
 
@@ -59,16 +56,39 @@ export default class Stepper extends SuperComponent {
     return false;
   }
 
+  observeValue(v) {
+    this.preValue = Number(v);
+    this.setData({
+      currentValue: this.format(Number(v)),
+    });
+  }
+
+  getLen(num: number) {
+    const numStr = num.toString();
+    return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
+  }
+
+  /**
+   * 精确加法
+   */
+  add(a: number, b: number) {
+    const maxLen = Math.max(this.getLen(a), this.getLen(b));
+    const base = 10 ** maxLen;
+    return Math.round(a * base + b * base) / base;
+  }
+
   format(value) {
-    const { min, max } = this.properties as any;
+    const { min, max, step } = this.properties as any;
     // 超过边界取边界值
-    return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER);
+    return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(
+      this.getLen(step),
+    );
   }
 
   setValue(value) {
     if (this.preValue === value) return;
     this.preValue = value;
-    this._trigger('change', { value });
+    this._trigger('change', { value: Number(value) });
   }
 
   minusValue() {
@@ -77,7 +97,7 @@ export default class Stepper extends SuperComponent {
       return false;
     }
     const { currentValue, step } = this.data as any;
-    this.setValue(this.format(currentValue - step));
+    this.setValue(this.format(this.add(currentValue, -step)));
   }
 
   plusValue() {
@@ -86,7 +106,7 @@ export default class Stepper extends SuperComponent {
       return false;
     }
     const { currentValue, step } = this.data as any;
-    this.setValue(this.format(currentValue + step));
+    this.setValue(this.format(this.add(currentValue, step)));
   }
 
   changeValue(e) {

From 615d3f863c818b516eb6689cbaf69f7c6be13f6c Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Thu, 29 Jun 2023 11:19:12 +0800
Subject: [PATCH 119/202] fix(radio): fix vertical align (#2135)

---
 src/radio/radio.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/radio/radio.less b/src/radio/radio.less
index a7753cc8e..b16b1770e 100644
--- a/src/radio/radio.less
+++ b/src/radio/radio.less
@@ -47,6 +47,7 @@
 
   &__icon {
     position: relative;
+    margin-top: calc((@radio-label-line-height - @radio-icon-size) / 2);
     width: @radio-icon-size;
     height: @radio-icon-size;
     font-size: @radio-icon-size;

From 729ddc3ebd4098ef00103b61b04fbdaeee085964 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Thu, 29 Jun 2023 13:37:18 +0800
Subject: [PATCH 120/202] fix(checkbox): resolve align when icon size changed
 (#2136)

---
 src/checkbox/__test__/__snapshots__/demo.test.js.snap | 1 -
 src/checkbox/_example/base/index.wxml                 | 2 +-
 src/checkbox/checkbox.less                            | 1 +
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/checkbox/__test__/__snapshots__/demo.test.js.snap b/src/checkbox/__test__/__snapshots__/demo.test.js.snap
index 840766486..249157d52 100644
--- a/src/checkbox/__test__/__snapshots__/demo.test.js.snap
+++ b/src/checkbox/__test__/__snapshots__/demo.test.js.snap
@@ -40,7 +40,6 @@ exports[`Checkbox Checkbox all demo works fine 1`] = `
 exports[`Checkbox Checkbox base demo works fine 1`] = `
 <base>
   <t-checkbox-group
-    borderless="{{true}}"
     options="{{
       Array [
         Object {
diff --git a/src/checkbox/_example/base/index.wxml b/src/checkbox/_example/base/index.wxml
index 02571c99d..d84e80834 100644
--- a/src/checkbox/_example/base/index.wxml
+++ b/src/checkbox/_example/base/index.wxml
@@ -1 +1 @@
-<t-checkbox-group value="{{current}}" borderless bind:change="handleGroupChange" options="{{options}}" />
+<t-checkbox-group value="{{current}}" bind:change="handleGroupChange" options="{{options}}" />
diff --git a/src/checkbox/checkbox.less b/src/checkbox/checkbox.less
index 0535faf75..d50376d15 100644
--- a/src/checkbox/checkbox.less
+++ b/src/checkbox/checkbox.less
@@ -77,6 +77,7 @@
     height: @checkbox-icon-size;
     color: @checkbox-icon-color;
     font-size: @checkbox-icon-size;
+    margin-top: calc((@checkbox-title-line-height - @checkbox-icon-size) / 2);
 
     &:empty {
       display: none;

From 63142eecde9d278de2253866e9dfa69542a470a8 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Thu, 29 Jun 2023 16:23:45 +0800
Subject: [PATCH 121/202] docs(checkbox): update (#2137)

* docs(checkbox): update

* fix(checkbox): resolve priority of disabled property
---
 src/checkbox-group/checkbox-group.ts   |  8 +-----
 src/checkbox-group/checkbox-group.wxml |  2 +-
 src/checkbox-group/props.ts            |  8 +-----
 src/checkbox-group/type.ts             | 22 ++++++----------
 src/checkbox/README.en-US.md           | 17 ++++++------
 src/checkbox/README.md                 | 19 +++++++-------
 src/checkbox/checkbox.ts               |  6 +----
 src/checkbox/props.ts                  | 21 +++++++++------
 src/checkbox/type.ts                   | 36 +++++++++++++-------------
 9 files changed, 62 insertions(+), 77 deletions(-)

diff --git a/src/checkbox-group/checkbox-group.ts b/src/checkbox-group/checkbox-group.ts
index b25d60a45..a9008dbf3 100644
--- a/src/checkbox-group/checkbox-group.ts
+++ b/src/checkbox-group/checkbox-group.ts
@@ -20,13 +20,7 @@ export default class CheckBoxGroup extends SuperComponent {
     checkboxOptions: [],
   };
 
-  properties = {
-    ...props,
-    borderless: {
-      type: Boolean,
-      value: false,
-    },
-  };
+  properties = props;
 
   observers = {
     value() {
diff --git a/src/checkbox-group/checkbox-group.wxml b/src/checkbox-group/checkbox-group.wxml
index 925cf8aec..37aebea57 100644
--- a/src/checkbox-group/checkbox-group.wxml
+++ b/src/checkbox-group/checkbox-group.wxml
@@ -15,7 +15,7 @@
       content-disabled="{{item.contentDisabled || false}}"
       icon="{{item.icon || 'circle'}}"
       indeterminate="{{item.indeterminate || false}}"
-      disabled="{{item.disabled}}"
+      disabled="{{ item.disabled == null ? disabled : item.disabled }}"
       max-content-row="{{item.maxContentRow || 5}}"
       max-label-row="{{item.maxLabelRow || 3}}"
       name="{{item.name || ''}}"
diff --git a/src/checkbox-group/props.ts b/src/checkbox-group/props.ts
index dd821d46e..c56de1641 100644
--- a/src/checkbox-group/props.ts
+++ b/src/checkbox-group/props.ts
@@ -6,20 +6,14 @@
 
 import { TdCheckboxGroupProps } from './type';
 const props: TdCheckboxGroupProps = {
-  /** 自定义组件样式 */
-  style: {
-    type: String,
-    value: '',
-  },
   /** 是否开启无边框模式 */
   borderless: {
     type: Boolean,
     value: false,
   },
-  /** 是否禁用组件 */
+  /** 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低 */
   disabled: {
     type: Boolean,
-    value: false,
   },
   /** 支持最多选中的数量 */
   max: {
diff --git a/src/checkbox-group/type.ts b/src/checkbox-group/type.ts
index df36987bd..9ec5d110f 100644
--- a/src/checkbox-group/type.ts
+++ b/src/checkbox-group/type.ts
@@ -4,23 +4,17 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-export interface TdCheckboxGroupProps {
+export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
   /**
-   * 自定义组件样式
-   * @default ''
+   * 是否开启无边框模式
+   * @default false
    */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /** 是否开启无边框模式 */
-  borderless: {
+  borderless?: {
     type: BooleanConstructor;
     value?: boolean;
   };
   /**
-   * 是否禁用组件
-   * @default false
+   * 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低
    */
   disabled?: {
     type: BooleanConstructor;
@@ -55,7 +49,7 @@ export interface TdCheckboxGroupProps {
    */
   value?: {
     type: ArrayConstructor;
-    value?: CheckboxGroupValue;
+    value?: T;
   };
   /**
    * 选中值，非受控属性
@@ -63,7 +57,7 @@ export interface TdCheckboxGroupProps {
    */
   defaultValue?: {
     type: ArrayConstructor;
-    value?: CheckboxGroupValue;
+    value?: T;
   };
 }
 
@@ -76,4 +70,4 @@ export interface CheckboxOptionObj {
   checkAll?: true;
 }
 
-export type CheckboxGroupValue = Array<string | number>;
+export type CheckboxGroupValue = Array<string | number | boolean>;
diff --git a/src/checkbox/README.en-US.md b/src/checkbox/README.en-US.md
index d706b2519..e305fccc3 100644
--- a/src/checkbox/README.en-US.md
+++ b/src/checkbox/README.en-US.md
@@ -5,23 +5,24 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-placement | String | left | options：left/right | N
 block | Boolean | true | \- | N
+borderless | Boolean | false | \- | N
 check-all | Boolean | false | \- | N
 checked | Boolean | false | \- | N
 default-checked | Boolean | undefined | uncontrolled property | N
-content | String / Slot | - | \- | N
+content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 content-disabled | Boolean | - | \- | N
 disabled | Boolean | undefined | \- | N
 external-classes | Array | - | `['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
 icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
 indeterminate | Boolean | false | \- | N
-label | String / Slot | - | \- | N
+label | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 max-content-row | Number | 5 | \- | N
 max-label-row | Number | 3 | \- | N
 name | String | - | \- | N
+placement | String | left | options：left/right | N
 readonly | Boolean | false | \- | N
-value | String / Number | - | Typescript：`string \| number \| boolean` | N
+value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
 
 ### Checkbox Events
 
@@ -34,15 +35,15 @@ change | `(checked: boolean)` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 borderless | Boolean | false | \- | N
-disabled | Boolean | false | \- | N
+disabled | Boolean | - | \- | N
 max | Number | undefined | \- | N
 name | String | - | \- | N
 options | Array | [] | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
-value | Array | [] | Typescript：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
-default-value | Array | undefined | uncontrolled property。Typescript：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
+value | Array | [] | Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
+default-value | Array | undefined | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
 
 ### CheckboxGroup Events
 
 name | params | description
 -- | -- | --
-change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
+change | `(value: CheckboxGroupValue)` | \-
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index 876e1f037..c2c2e4085 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -64,23 +64,24 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-placement | String | left | 多选框和内容相对位置。可选项：left/right | N
 block | Boolean | true | 是否为块级元素 | N
+borderless | Boolean | false | 是否开启无边框模式 | N
 check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
 checked | Boolean | false | 是否选中 | N
 default-checked | Boolean | undefined | 是否选中。非受控属性 | N
-content | String / Slot | - | 多选框内容 | N
+content | String / Slot | - | 多选框内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
-disabled | Boolean | undefined | 是否禁用组件 | N
+disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
 icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
 indeterminate | Boolean | false | 是否为半选 | N
-label | String / Slot | - | 主文案 | N
+label | String / Slot | - | 主文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 max-content-row | Number | 5 | 内容最大行数限制 | N
 max-label-row | Number | 3 | 主文案最大行数限制 | N
 name | String | - | HTML 元素原生属性 | N
+placement | String | left | 多选框和内容相对位置。可选项：left/right | N
 readonly | Boolean | false | 只读状态 | N
-value | String / Number | - | 多选框的值。TS 类型：`string \| number` | N
+value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
 
 ### Checkbox Events
 
@@ -93,15 +94,15 @@ change | `(checked: boolean)` | 值变化时触发
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 borderless | Boolean | false | 是否开启无边框模式 | N
-disabled | Boolean | false | 是否禁用组件 | N
+disabled | Boolean | - | 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低 | N
 max | Number | undefined | 支持最多选中的数量 | N
 name | String | - | 统一设置内部复选框 HTML 属性 | N
 options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
-value | Array | [] | 选中值。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
-default-value | Array | undefined | 选中值。非受控属性。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
+value | Array | [] | 选中值。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
+default-value | Array | undefined | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N
 
 ### CheckboxGroup Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
+change | `(value: CheckboxGroupValue)` | 值变化时触发
diff --git a/src/checkbox/checkbox.ts b/src/checkbox/checkbox.ts
index 95c12d067..462dffba4 100644
--- a/src/checkbox/checkbox.ts
+++ b/src/checkbox/checkbox.ts
@@ -23,7 +23,7 @@ export default class CheckBox extends SuperComponent {
         const { value, disabled, borderless } = parent.data;
         const valueSet = new Set(value);
         const data: any = {
-          disabled: disabled || this.data.disabled,
+          disabled: this.data.disabled == null ? disabled : this.data.disabled,
         };
 
         if (borderless) {
@@ -53,10 +53,6 @@ export default class CheckBox extends SuperComponent {
       type: String,
       value: 'default',
     },
-    borderless: {
-      type: Boolean,
-      value: false,
-    },
   };
 
   data = {
diff --git a/src/checkbox/props.ts b/src/checkbox/props.ts
index 24fa54249..b5da82dfa 100644
--- a/src/checkbox/props.ts
+++ b/src/checkbox/props.ts
@@ -6,16 +6,16 @@
 
 import { TdCheckboxProps } from './type';
 const props: TdCheckboxProps = {
-  /** 多选框和内容相对位置 */
-  placement: {
-    type: String,
-    value: 'left',
-  },
   /** 是否为块级元素 */
   block: {
     type: Boolean,
     value: true,
   },
+  /** 是否开启无边框模式 */
+  borderless: {
+    type: Boolean,
+    value: false,
+  },
   /** 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 */
   checkAll: {
     type: Boolean,
@@ -39,16 +39,16 @@ const props: TdCheckboxProps = {
   contentDisabled: {
     type: Boolean,
   },
-  /** 是否禁用组件 */
+  /** 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled */
   disabled: {
-    type: Boolean,
+    type: null,
     value: undefined,
   },
   /** 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名 */
   externalClasses: {
     type: Array,
   },
-  /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */
+  /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */
   icon: {
     type: null,
     value: 'circle',
@@ -77,6 +77,11 @@ const props: TdCheckboxProps = {
     type: String,
     value: '',
   },
+  /** 多选框和内容相对位置 */
+  placement: {
+    type: String,
+    value: 'left',
+  },
   /** 只读状态 */
   readonly: {
     type: Boolean,
diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts
index 247c4f622..8e5b64710 100644
--- a/src/checkbox/type.ts
+++ b/src/checkbox/type.ts
@@ -5,14 +5,6 @@
  * */
 
 export interface TdCheckboxProps {
-  /**
-   * 多选框和内容相对位置
-   * @default left
-   */
-  placement?: {
-    type: StringConstructor;
-    value?: 'left' | 'right';
-  };
   /**
    * 是否为块级元素
    * @default true
@@ -21,6 +13,14 @@ export interface TdCheckboxProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 是否开启无边框模式
+   * @default false
+   */
+  borderless?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用
    * @default false
@@ -60,15 +60,7 @@ export interface TdCheckboxProps {
     value?: boolean;
   };
   /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
-  /**
-   * 是否禁用组件
+   * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled
    */
   disabled?: {
     type: BooleanConstructor;
@@ -82,7 +74,7 @@ export interface TdCheckboxProps {
     value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border'];
   };
   /**
-   * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
+   * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
    * @default 'circle'
    */
   icon?: {
@@ -128,6 +120,14 @@ export interface TdCheckboxProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 多选框和内容相对位置
+   * @default left
+   */
+  placement?: {
+    type: StringConstructor;
+    value?: 'left' | 'right';
+  };
   /**
    * 只读状态
    * @default false

From c0cefc41dd36dd86cb26664fcd156d5e254a8a38 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Thu, 29 Jun 2023 17:27:55 +0800
Subject: [PATCH 122/202] fix(search): catch tap event when trigger clear
 (#2139)

* fix(search): catch tap event when triiger clear

* test(search): update snapshot
---
 src/search/__test__/__snapshots__/index.test.js.snap | 2 +-
 src/search/search.wxml                               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/search/__test__/__snapshots__/index.test.js.snap b/src/search/__test__/__snapshots__/index.test.js.snap
index 1c1ffb374..be26b67ba 100644
--- a/src/search/__test__/__snapshots__/index.test.js.snap
+++ b/src/search/__test__/__snapshots__/index.test.js.snap
@@ -48,7 +48,7 @@ exports[`search Props :base 1`] = `
       <wx-view
         ariaRole="button"
         class="t-search__search-action t-class-action"
-        bind:tap="onActionClick"
+        catch:tap="onActionClick"
       >
         
     提交
diff --git a/src/search/search.wxml b/src/search/search.wxml
index a9037975b..14a6a2280 100644
--- a/src/search/search.wxml
+++ b/src/search/search.wxml
@@ -33,7 +33,7 @@
     <view
       wx:if="{{value !=='' && clearable}}"
       class="{{classPrefix}}__clear {{prefix}}-class-clear"
-      bind:tap="handleClear"
+      catch:tap="handleClear"
       aria-role="button"
       aria-label="清除"
     >
@@ -43,7 +43,7 @@
   <view
     wx:if="{{action}}"
     class="{{classPrefix}}__search-action {{prefix}}-class-action"
-    bindtap="onActionClick"
+    catch:tap="onActionClick"
     aria-role="button"
   >
     {{action}}

From 84949186312309c6d74813217d5946b34a1ce297 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Fri, 30 Jun 2023 11:53:23 +0800
Subject: [PATCH 123/202] docs: update used page

---
 site/data/projects.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/site/data/projects.ts b/site/data/projects.ts
index 3bc0b6970..bbc616ff6 100644
--- a/site/data/projects.ts
+++ b/site/data/projects.ts
@@ -72,4 +72,16 @@ export default [
     preview: ['https://tdesign.gtimg.com/miniprogram/case/haoyongqrcode.png'],
     qrcode: 'https://tdesign.gtimg.com/miniprogram/case/haoyongqrcode-code.png',
   },
+  {
+    name: '去野户外club',
+    tags: ['效率工具'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/intowild.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/intowild-code.jpeg',
+  },
+  {
+    name: '库壁啦',
+    tags: ['效率工具'],
+    preview: ['https://tdesign.gtimg.com/miniprogram/case/bikula.png'],
+    qrcode: 'https://tdesign.gtimg.com/miniprogram/case/bikula-code.jpeg',
+  },
 ];

From 1346534d51284e476d2ade733ac7a528a5ab30f2 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Fri, 30 Jun 2023 14:55:43 +0800
Subject: [PATCH 124/202] fix(divider): replace external class (#2140)

* fix(divider): replace external class

* test: update snapshot
---
 src/divider/__test__/__snapshots__/index.test.js.snap | 4 ++--
 src/divider/divider.wxml                              | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/divider/__test__/__snapshots__/index.test.js.snap b/src/divider/__test__/__snapshots__/index.test.js.snap
index 473ce46af..96eac5aec 100644
--- a/src/divider/__test__/__snapshots__/index.test.js.snap
+++ b/src/divider/__test__/__snapshots__/index.test.js.snap
@@ -6,10 +6,10 @@ exports[`Divider :base 1`] = `
     class="divider"
   >
     <wx-view
-      class="class t-class "
+      class=""
     >
       <wx-view
-        class="t-divider t-divider--horizontal t-divider--center  "
+        class="t-divider class t-class t-divider--horizontal t-divider--center  "
         style=""
       >
         <wx-view
diff --git a/src/divider/divider.wxml b/src/divider/divider.wxml
index 5f1fa8816..fb83e6b29 100644
--- a/src/divider/divider.wxml
+++ b/src/divider/divider.wxml
@@ -1,8 +1,8 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view class="class {{prefix}}-class {{layout==='vertical'? classPrefix + '--vertical-center' : ''}}">
+<view class="{{layout==='vertical'? classPrefix + '--vertical-center' : ''}}">
   <view
-    class="{{classPrefix}} {{classPrefix}}--{{layout}} {{classPrefix}}--{{align}} {{dashed? classPrefix + '--dashed' : ''}} "
+    class="{{classPrefix}} class {{prefix}}-class {{classPrefix}}--{{layout}} {{classPrefix}}--{{align}} {{dashed? classPrefix + '--dashed' : ''}} "
     style="{{_._style([dividerStyle, style, customStyle])}}"
   >
     <view class="{{prefix}}-class-content {{classPrefix}}__content">

From f2f9f1aae458a3e1d7eae013560877954bc7e1a9 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Sun, 2 Jul 2023 22:31:42 +0800
Subject: [PATCH 125/202] feat(radio): enable allow-uncheck (#2141)

* feat(radio): enable allow-uncheck

* feat(radio-group): add allowUncheck for RadioOption

* test(radio-group): add allowUncheck for RadioOption

* feat(radio-group): update change value
---
 src/radio-group/radio-group.ts   | 5 +++--
 src/radio-group/radio-group.wxml | 2 ++
 src/radio-group/type.ts          | 1 +
 src/radio/README.md              | 2 +-
 src/radio/__test__/index.test.js | 1 +
 src/radio/radio.ts               | 6 +++---
 6 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/radio-group/radio-group.ts b/src/radio-group/radio-group.ts
index 14904f2b3..5d8badb1b 100644
--- a/src/radio-group/radio-group.ts
+++ b/src/radio-group/radio-group.ts
@@ -65,9 +65,10 @@ export default class RadioGroup extends SuperComponent {
     },
 
     handleRadioChange(e) {
-      const { value, index } = e.target.dataset;
+      const { checked } = e.detail;
+      const { value, index, allowUncheck } = e.target.dataset;
 
-      this._trigger('change', { value, index });
+      this._trigger('change', checked === false && allowUncheck ? { value: null, index } : { value, index });
     },
 
     // 支持自定义options
diff --git a/src/radio-group/radio-group.wxml b/src/radio-group/radio-group.wxml
index 78f255d76..671705e56 100644
--- a/src/radio-group/radio-group.wxml
+++ b/src/radio-group/radio-group.wxml
@@ -7,11 +7,13 @@
       class="{{prefix}}-radio-option"
       data-index="{{index}}"
       data-value="{{item.value}}"
+      data-allow-uncheck="{{item.allowUncheck || false}}"
       block="{{item.block || true}}"
       label="{{item.label || ''}}"
       value="{{item.value}}"
       checked="{{item.checked || false}}"
       content="{{item.content || ''}}"
+      allow-uncheck="{{item.allowUncheck || false}}"
       content-disabled="{{item.contentDisabled || false}}"
       disabled="{{item.disabled || false}}"
       icon="{{item.icon || icon}}"
diff --git a/src/radio-group/type.ts b/src/radio-group/type.ts
index b50e679ad..ef77eeb4b 100644
--- a/src/radio-group/type.ts
+++ b/src/radio-group/type.ts
@@ -90,4 +90,5 @@ export interface RadioOptionObj {
   label?: string;
   value?: string | number;
   disabled?: boolean;
+  allowUncheck?: boolean;
 }
diff --git a/src/radio/README.md b/src/radio/README.md
index b2690f008..068dcbe4b 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -53,7 +53,7 @@ isComponent: true
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 placement | String | left | 复选框和内容相对位置。可选项：left/right | N
-allow-uncheck | Boolean | false | 【开发中】是否允许取消选中 | N
+allow-uncheck | Boolean | false | 是否允许取消选中 | N
 block | Boolean | true | 是否为块级元素 | N
 checked | Boolean | false | 是否选中 | N
 default-checked | Boolean | undefined | 是否选中。非受控属性 | N
diff --git a/src/radio/__test__/index.test.js b/src/radio/__test__/index.test.js
index e16dd9f68..4658f59fe 100644
--- a/src/radio/__test__/index.test.js
+++ b/src/radio/__test__/index.test.js
@@ -124,6 +124,7 @@ describe('radio', () => {
 
       const group = comp.querySelector('#optionsGroup');
       group.instance.handleRadioChange({
+        detail: { checked: false },
         target: {
           dataset: { value: 'b' },
         },
diff --git a/src/radio/radio.ts b/src/radio/radio.ts
index 030dd497f..08afaf4f3 100644
--- a/src/radio/radio.ts
+++ b/src/radio/radio.ts
@@ -79,12 +79,12 @@ export default class Radio extends SuperComponent {
       this.doChange();
     },
     doChange() {
-      const { value, checked } = this.data;
+      const { value, checked, allowUncheck } = this.data;
 
       if (this.$parent) {
-        this.$parent.updateValue(value);
+        this.$parent.updateValue(checked && allowUncheck ? null : value);
       } else {
-        this._trigger('change', { checked: !checked });
+        this._trigger('change', { checked: checked && allowUncheck ? false : !checked });
       }
     },
     initStatus() {

From 909dba801e45acbb366463b6c99a821b01bc58ac Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 3 Jul 2023 15:00:21 +0800
Subject: [PATCH 126/202] fix(toast): resolve repeated event triggering (#2146)

---
 src/toast/toast.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/toast/toast.ts b/src/toast/toast.ts
index 42a0dc671..ced90018b 100644
--- a/src/toast/toast.ts
+++ b/src/toast/toast.ts
@@ -80,6 +80,7 @@ export default class Toast extends SuperComponent {
     },
 
     hide() {
+      if (!this.data.visible) return; // 避免重复触发（页面关闭、定时关闭都会触发）
       this.setData({ visible: false });
       this.data?.close?.();
       this.triggerEvent('close');

From e003f2a02ab0d8c20cf6f930e63b406e3c84fd0a Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 3 Jul 2023 15:16:19 +0800
Subject: [PATCH 127/202] feat(dropdown-item): add close event (#2147)

---
 src/dropdown-item/dropdown-item.ts | 1 +
 src/dropdown-menu/README.en-US.md  | 1 +
 src/dropdown-menu/README.md        | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/dropdown-item/dropdown-item.ts b/src/dropdown-item/dropdown-item.ts
index 85293fd3e..ee2fe504e 100644
--- a/src/dropdown-item/dropdown-item.ts
+++ b/src/dropdown-item/dropdown-item.ts
@@ -105,6 +105,7 @@ export default class DropdownMenuItem extends SuperComponent {
       this.setData({
         show: false,
       });
+      this.triggerEvent('close');
     },
 
     getParentBottom(cb) {
diff --git a/src/dropdown-menu/README.en-US.md b/src/dropdown-menu/README.en-US.md
index eb73f94f0..0a2fe7d47 100644
--- a/src/dropdown-menu/README.en-US.md
+++ b/src/dropdown-menu/README.en-US.md
@@ -33,3 +33,4 @@ name | params | description
 change | `(value: DropdownValue)` | \-
 confirm | `(value: DropdownValue)` | \-
 reset | \- | \-
+close | \- | \-
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index 0d7b73148..92226d873 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -73,4 +73,5 @@ default-value | String / Number / Array | undefined | 选中值。非受控属
 -- | -- | --
 change | `(value: DropdownValue)` | 值改变时触发
 confirm | `(value: DropdownValue)` | 点击确认时触发
-reset | - | 点击重置时触发
\ No newline at end of file
+reset | \- | 点击重置时触发
+close | \- | 关闭时触发
\ No newline at end of file

From 231b70e32a897259c1f6d2a3d12af71987e7f52e Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 4 Jul 2023 11:11:39 +0800
Subject: [PATCH 128/202] fix: resolve console warnings (#2149)

---
 src/avatar/avatar.wxml                   | 12 ++++++------
 src/common/src/instantiationDecorator.ts |  2 +-
 src/message/message.wxml                 |  2 +-
 src/popup/popup.wxml                     |  6 +++---
 src/toast/toast.wxml                     |  8 ++++----
 src/upload/upload.wxml                   | 16 ++++++++--------
 6 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/avatar/avatar.wxml b/src/avatar/avatar.wxml
index a92bb54f4..77206da7a 100644
--- a/src/avatar/avatar.wxml
+++ b/src/avatar/avatar.wxml
@@ -31,13 +31,13 @@
         wx:if="{{image}}"
         t-class="{{prefix}}-image {{classPrefix}}__image"
         t-class-load="{{prefix}}-class-alt"
-        style="{{imageProps.style || ''}}"
+        style="{{imageProps && imageProps.style || ''}}"
         src="{{image}}"
-        mode="{{imageProps.mode || 'aspectFill'}}"
-        lazy="{{imageProps.lazy || false}}"
-        loading="{{imageProps.loading || 'default'}}"
-        shape="{{imageProps.shape || 'round'}}"
-        webp="{{imageProps.webp || false}}"
+        mode="{{imageProps && imageProps.mode || 'aspectFill'}}"
+        lazy="{{imageProps && imageProps.lazy || false}}"
+        loading="{{imageProps && imageProps.loading || 'default'}}"
+        shape="{{imageProps && imageProps.shape || 'round'}}"
+        webp="{{imageProps && imageProps.webp || false}}"
         error="{{alt || 'default'}}"
         bind:error="onLoadError"
       />
diff --git a/src/common/src/instantiationDecorator.ts b/src/common/src/instantiationDecorator.ts
index 1b9319ba0..af53918dd 100644
--- a/src/common/src/instantiationDecorator.ts
+++ b/src/common/src/instantiationDecorator.ts
@@ -28,7 +28,7 @@ const ComponentNativeProps = [
  * @param options {}
  */
 export const toComponent = function toComponent(options: Record<string, any>) {
-  const { relations, behaviors = [], properties, externalClasses = [] } = options;
+  const { relations, behaviors = [], externalClasses = [] } = options;
 
   if (options.properties) {
     Object.keys(options.properties).forEach((k) => {
diff --git a/src/message/message.wxml b/src/message/message.wxml
index 09726251c..e4e7fdf05 100644
--- a/src/message/message.wxml
+++ b/src/message/message.wxml
@@ -28,7 +28,7 @@
       </view>
     </view>
     <t-link
-      wx:if="{{_link.content}}"
+      wx:if="{{_link && _link.content}}"
       class="{{classPrefix}}__link {{prefix}}-class-link"
       style="{{_._style([_link.style, _link.customStyle])}}"
       disabled="{{_link.disabled || false}}"
diff --git a/src/popup/popup.wxml b/src/popup/popup.wxml
index 87cb78dc5..ecbd6f159 100644
--- a/src/popup/popup.wxml
+++ b/src/popup/popup.wxml
@@ -23,8 +23,8 @@
   id="popup-overlay"
   wx:if="{{showOverlay}}"
   visible="{{visible}}"
-  z-index="{{overlayProps.zIndex || 11000}}"
-  prevent-scroll-through="{{preventScrollThrough || overlayProps.preventScrollThrough}}"
+  z-index="{{overlayProps && overlayProps.zIndex || 11000}}"
+  prevent-scroll-through="{{preventScrollThrough || overlayProps && overlayProps.preventScrollThrough}}"
   bind:tap="handleOverlayClick"
-  custom-style="{{overlayProps.style || ''}}"
+  custom-style="{{overlayProps && overlayProps.style || ''}}"
 />
diff --git a/src/toast/toast.wxml b/src/toast/toast.wxml
index fcf06800a..1be34440c 100644
--- a/src/toast/toast.wxml
+++ b/src/toast/toast.wxml
@@ -28,9 +28,9 @@
   </view>
 </view>
 <t-overlay
-  style="{{ overlayProps.style || ''}}"
+  style="{{ overlayProps && overlayProps.style || ''}}"
   visible="{{realVisible && (showOverlay || preventScrollThrough)}}"
-  z-index="{{overlayProps.zIndex || 11000}}"
-  backgroundColor="{{preventScrollThrough ? 'transparent' : overlayProps.backgroundColor || ''}}"
-  preventScrollThrough="{{preventScrollThrough || overlayProps.preventScrollThrough}}"
+  z-index="{{overlayProps && overlayProps.zIndex || 11000}}"
+  backgroundColor="{{preventScrollThrough ? 'transparent' : overlayProps && overlayProps.backgroundColor || ''}}"
+  preventScrollThrough="{{preventScrollThrough || overlayProps && overlayProps.preventScrollThrough}}"
 />
diff --git a/src/upload/upload.wxml b/src/upload/upload.wxml
index 0a96c4b6e..f6c6529c9 100644
--- a/src/upload/upload.wxml
+++ b/src/upload/upload.wxml
@@ -24,15 +24,15 @@
           bind:tap="onProofTap"
           data-index="{{index}}"
           t-class="{{classPrefix}}__thumbnail"
-          style="{{imageProps.style || ''}}"
+          style="{{imageProps && imageProps.style || ''}}"
           src="{{file.url}}"
-          mode="{{imageProps.mode || 'aspectFill'}}"
-          error="{{imageProps.error || 'default'}}"
-          lazy="{{imageProps.lazy || false}}"
-          loading="{{imageProps.loading || 'default'}}"
-          shape="{{imageProps.shape || 'round'}}"
-          webp="{{imageProps.webp || false}}"
-          showMenuByLongpress="{{imageProps.showMenuByLongpress || false}}"
+          mode="{{imageProps && imageProps.mode || 'aspectFill'}}"
+          error="{{imageProps && imageProps.error || 'default'}}"
+          lazy="{{imageProps && imageProps.lazy || false}}"
+          loading="{{imageProps && imageProps.loading || 'default'}}"
+          shape="{{imageProps && imageProps.shape || 'round'}}"
+          webp="{{imageProps && imageProps.webp || false}}"
+          showMenuByLongpress="{{imageProps && imageProps.showMenuByLongpress || false}}"
         />
         <video
           data-file="{{file}}"

From 0a71e115e8bcc870b3d65bb9e80b1f2b2dde9dd6 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 4 Jul 2023 11:17:03 +0800
Subject: [PATCH 129/202] Update README.md (#2150)

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 0bf45d6c0..bf0b7e764 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,12 @@ npm run dev
 
 最低基础库版本`^2.6.5`
 
+## 团队成员
+
+<a href="https://github.com/tencent/tdesign-miniprogram/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=tencent/tdesign-miniprogram" />
+</a>
+
 ## 开源协议
 
 TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-miniprogram/LICENSE)。

From 3fc323ada1783ce0ca3e7c67b8fa2f8a48b32813 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 4 Jul 2023 16:36:34 +0800
Subject: [PATCH 130/202] fix(popup): update width when placement is bottom
 (#2152)

---
 src/popup/popup.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/popup.less b/src/popup/popup.less
index 817dc8c87..e20e33d5e 100644
--- a/src/popup/popup.less
+++ b/src/popup/popup.less
@@ -38,7 +38,7 @@
   &--bottom {
     bottom: 0;
     left: 0;
-    width: 100vw;
+    width: 100%;
     border-top-left-radius: @popup-border-radius;
     border-top-right-radius: @popup-border-radius;
     padding-bottom: constant(safe-area-inset-bottom);

From 1bdb0cd2278e4efb0c79bc679a32a3441c9f1230 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 4 Jul 2023 16:41:30 +0800
Subject: [PATCH 131/202] chore: publish v1.1.11 (#2153)

* chore: publish v1.1.11

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 23 +++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 983a428d4..8f01cd56b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,29 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.11 `2023-07-04` 
+### 🚀 Features
+- `CheckboxGroup`: 新增 borderless 属性 @betavs ([#2124](https://github.com/Tencent/tdesign-miniprogram/pull/2124))
+- `Radio`: 允许取消选中 @betavs ([#2141](https://github.com/Tencent/tdesign-miniprogram/pull/2141))
+- `DropdownItem`: 新增 close 事件 @LeeJim ([#2147](https://github.com/Tencent/tdesign-miniprogram/pull/2147))
+### 🐞 Bug Fixes
+- `Tabs`: 解决选项过多时样式错误的问题 @betavs ([#2123](https://github.com/Tencent/tdesign-miniprogram/pull/2123))
+- `Picker`: 修复默认值无效 @betavs ([#2126](https://github.com/Tencent/tdesign-miniprogram/pull/2126))
+- `Stepper`: 修复精度缺失问题 @anlyyao ([#2130](https://github.com/Tencent/tdesign-miniprogram/pull/2130))
+- `Radio`: 修复自定义图标大小之后的垂直对齐问题 @betavs ([#2135](https://github.com/Tencent/tdesign-miniprogram/pull/2135))
+- `Checkbox`: 修复自定义图标尺寸后的垂直对齐问题 @LeeJim ([#2136](https://github.com/Tencent/tdesign-miniprogram/pull/2136))
+- `CheckboxGroup`: 修复使用 options 时，disabled 不生效的问题 @LeeJim ([#2137](https://github.com/Tencent/tdesign-miniprogram/pull/2137))
+- `Checkbox`: 修复 disabled 优先级的问题 @LeeJim ([#2137](https://github.com/Tencent/tdesign-miniprogram/pull/2137))
+- `Search`: 截获点击 clear 触发的 tap 事件 @LeeJim ([#2139](https://github.com/Tencent/tdesign-miniprogram/pull/2139))
+- `Divider`: 修复外部样式类的位置 @LeeJim ([#2140](https://github.com/Tencent/tdesign-miniprogram/pull/2140))
+- `Toast`: 解决 close 事件重复触发 @LeeJim ([#2146](https://github.com/Tencent/tdesign-miniprogram/pull/2146))
+- `Popup`: 修复底部弹出时的宽度问题 @LeeJim ([#2152](https://github.com/Tencent/tdesign-miniprogram/pull/2152))
+
+### 🚧 Others
+
+- 解决控制台报警的问题 @LeeJim ([#2149](https://github.com/Tencent/tdesign-miniprogram/pull/2149))
+
+
 ## 🌈 1.1.10 `2023-06-20` 
 ### 🚀 Features
 - `Tabs`: 新增 split 属性 @LeeJim ([#2113](https://github.com/Tencent/tdesign-miniprogram/pull/2113))
diff --git a/package.json b/package.json
index f21d54d0b..bf6151f77 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 34250f52870118b05cbea3e7ec2ed38b9531c162 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Thu, 6 Jul 2023 17:31:20 +0800
Subject: [PATCH 132/202] test: remove snapshot for virtual-host (#2161)

* test: remove snapshot for virtual-host

* test: update config

* test: update config
---
 jest.virtualHost.config.js                    | 37 ----------------
 package.json                                  |  9 ++--
 script/test/setup.js                          | 25 ++++++++++-
 script/test/snapshotResolver.js               | 12 ------
 script/test/virtualHostSetup.js               | 43 -------------------
 src/message/__test__/index.test.js            |  5 ---
 .../__test__/__snapshots__/index.test.js.snap |  8 ++--
 7 files changed, 32 insertions(+), 107 deletions(-)
 delete mode 100644 jest.virtualHost.config.js
 delete mode 100644 script/test/snapshotResolver.js
 delete mode 100644 script/test/virtualHostSetup.js

diff --git a/jest.virtualHost.config.js b/jest.virtualHost.config.js
deleted file mode 100644
index 1f25661ea..000000000
--- a/jest.virtualHost.config.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * virtualHost 的开启和关闭对 dom 渲染会产生较大差异，且在单测中无法通过 selectComponent 获取子组件实例，
- * 故设置两个 jest 配置文件，区分 virtualHost 的两种状态。
- */
-
-module.exports = {
-  verbose: true,
-  testEnvironment: 'jsdom',
-  testURL: 'http://localhost/',
-  moduleFileExtensions: ['js', 'ts'],
-  moduleNameMapper: {
-    '^tdesign-miniprogram/(.*)': '<rootDir>/src/$1',
-  },
-  testMatch: ['<rootDir>/src/**/__test__/**/*.test.{js,ts}'],
-  collectCoverageFrom: ['<rootDir>/src/**/*.{js,ts}', '!**/__test__/**', '!**/_example/**'],
-  collectCoverage: true,
-  coverageProvider: 'v8',
-  coverageDirectory: '<rootDir>/test/unit-virtualHost/coverage',
-  reporters: [
-    'default',
-    [
-      './node_modules/jest-html-reporter',
-      {
-        pageTitle: 'TDesign-miniprogram Unit Test Report(virtualHost)',
-        outputPath: './test/unit-virtualHost/report/test-report.html',
-      },
-    ],
-  ],
-  setupFiles: ['<rootDir>/script/test/virtualHostSetup.js'],
-  coverageReporters: ['html', 'json-summary'],
-  globals: {
-    CONFIG_PREFIX: 't',
-  },
-  globalSetup: '<rootDir>/script/test/globalSetup.js',
-  snapshotSerializers: ['miniprogram-simulate/jest-snapshot-plugin'],
-  snapshotResolver: '<rootDir>/script/test/snapshotResolver.js',
-};
diff --git a/package.json b/package.json
index bf6151f77..cffb1af65 100644
--- a/package.json
+++ b/package.json
@@ -31,9 +31,8 @@
     "site:intranet": "cd site && vite build --mode intranet",
     "site:prerender": "node script/prerender.mjs",
     "cover": "jest --coverage",
-    "test": "jest && jest -c jest.virtualHost.config.js && jest -c jest.e2e.config.js",
-    "test:virtualHost": "jest -c jest.virtualHost.config.js",
-    "test:snap-update": "npm run test:virtualHost -- -u && npm run test:unit -- -u",
+    "test": "jest && jest -c jest.e2e.config.js",
+    "test:snap-update": "npm run test:unit -- -u",
     "test:demo": "node gen-demo-test.js",
     "test:unit": "jest",
     "test:e2e": "jest -c jest.e2e.config.js",
@@ -94,7 +93,7 @@
     "lodash": "^4.17.21",
     "miniprogram-api-typings": "^3.4.6",
     "miniprogram-automator": "^0.10.0",
-    "miniprogram-simulate": "^1.5.7",
+    "miniprogram-simulate": "^1.6.0",
     "npm-run-all": "^4.1.5",
     "playwright": "^1.19.1",
     "prettier": "^2.0.5",
@@ -126,4 +125,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
\ No newline at end of file
+}
diff --git a/script/test/setup.js b/script/test/setup.js
index af8a50d11..5b32222d7 100644
--- a/script/test/setup.js
+++ b/script/test/setup.js
@@ -1,5 +1,6 @@
 import Path from 'path';
 import simulate from 'miniprogram-simulate';
+import similateApi from 'miniprogram-simulate/src/api';
 import { canUseVirtualHost } from '../../src/common/version';
 
 global.getApp = () => null;
@@ -13,5 +14,27 @@ global.load = (path, demoName) => {
     },
   });
 };
-
+global.wx = {
+  ...similateApi,
+  getSystemInfoSync: () => {
+    return {
+      SDKVersion: '2.19.1',
+      batteryLevel: 100,
+      benchmarkLevel: 1,
+      brand: 'devtools',
+      fontSizeSetting: 16,
+      language: 'zh_CN',
+      model: 'iPhone 7 Plus',
+      pixelRatio: 3,
+      platform: 'devtools',
+      screenHeight: 736,
+      screenWidth: 414,
+      statusBarHeight: 20,
+      system: 'iOS 10.0.1',
+      version: '6.6.3',
+      windowHeight: 672,
+      windowWidth: 414,
+    };
+  },
+};
 global.VIRTUAL_HOST = canUseVirtualHost();
diff --git a/script/test/snapshotResolver.js b/script/test/snapshotResolver.js
deleted file mode 100644
index 47664f502..000000000
--- a/script/test/snapshotResolver.js
+++ /dev/null
@@ -1,12 +0,0 @@
-module.exports = {
-  // resolves from test to snapshot path
-  resolveSnapshotPath: (testPath, snapshotExtension) =>
-    testPath.replace('__test__', '__test__/__virtualHostSnapshot__') + snapshotExtension,
-
-  // resolves from snapshot to test path
-  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
-    snapshotFilePath.replace('__test__/__virtualHostSnapshot__', '__test__').slice(0, -snapshotExtension.length),
-
-  // Example test path, used for preflight consistency check of the implementation above
-  testPathForConsistencyCheck: 'some/__tests__/example.test.js',
-};
diff --git a/script/test/virtualHostSetup.js b/script/test/virtualHostSetup.js
deleted file mode 100644
index 7ddc3fc70..000000000
--- a/script/test/virtualHostSetup.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import Path from 'path';
-import simulate from 'miniprogram-simulate';
-import similateApi from 'miniprogram-simulate/src/api';
-import { canUseVirtualHost } from '../../src/common/version';
-
-global.getApp = () => null;
-global.Page = (options) => Component(options);
-global.load = (path, demoName) => {
-  return simulate.load(path, demoName, {
-    less: true,
-    rootPath: Path.resolve(__dirname, '../../src'),
-    compilerOptions: {
-      maxBuffer: 1024 * 1024 * 2,
-    },
-  });
-};
-
-global.wx = {
-  ...similateApi,
-  getSystemInfoSync: () => {
-    return {
-      // SDKVersion > 2.19.2, 开启 VirtualHost
-      SDKVersion: '2.20.0',
-      batteryLevel: 100,
-      benchmarkLevel: 1,
-      brand: 'devtools',
-      fontSizeSetting: 16,
-      language: 'zh_CN',
-      model: 'iPhone 7 Plus',
-      pixelRatio: 3,
-      platform: 'devtools',
-      screenHeight: 736,
-      screenWidth: 414,
-      statusBarHeight: 20,
-      system: 'iOS 10.0.1',
-      version: '6.6.3',
-      windowHeight: 672,
-      windowWidth: 414,
-    };
-  },
-};
-
-global.VIRTUAL_HOST = canUseVirtualHost();
diff --git a/src/message/__test__/index.test.js b/src/message/__test__/index.test.js
index f0192ab51..4299fa21e 100644
--- a/src/message/__test__/index.test.js
+++ b/src/message/__test__/index.test.js
@@ -1,13 +1,8 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
-import similateApi from 'miniprogram-simulate/src/api';
 import Message from '../index';
 import * as Util from '../../common/utils';
 
-global.wx = {
-  ...similateApi,
-};
-
 const mockGetRect = jest.spyOn(Util, 'getRect');
 mockGetRect.mockImplementation(() => {
   return new Promise((resolve) => resolve({ height: 46, width: 156 }));
diff --git a/src/navbar/__test__/__snapshots__/index.test.js.snap b/src/navbar/__test__/__snapshots__/index.test.js.snap
index 198a82e20..803ab3731 100644
--- a/src/navbar/__test__/__snapshots__/index.test.js.snap
+++ b/src/navbar/__test__/__snapshots__/index.test.js.snap
@@ -40,7 +40,7 @@ exports[`navbar :base 2`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-      style=""
+      style="--td-navbar-padding-top:20px; --td-navbar-right:94px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 94px;"
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -75,7 +75,7 @@ exports[`navbar :base 3`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-      style=""
+      style="--td-navbar-padding-top:20px; --td-navbar-right:94px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 94px;"
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -110,7 +110,7 @@ exports[`navbar :fixed 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style=""
+      style="--td-navbar-padding-top:20px; --td-navbar-right:94px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 94px;"
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -145,7 +145,7 @@ exports[`navbar :menu button 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed  class t-class"
-      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
+      style="--td-navbar-padding-top:20px; --td-navbar-right:428px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
     >
       <wx-view
         class="t-navbar__placeholder"

From 0adead3ea78afd530d3deffff0e5d244336fb37e Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Mon, 10 Jul 2023 14:24:26 +0800
Subject: [PATCH 133/202] fix(*): resolve console warn (#2164)

---
 src/common/template/button.wxml | 2 +-
 src/dialog/index.ts             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/template/button.wxml b/src/common/template/button.wxml
index 27d6bc493..faff528bd 100644
--- a/src/common/template/button.wxml
+++ b/src/common/template/button.wxml
@@ -14,7 +14,7 @@
     size="{{size || 'medium'}}"
     variant="{{variant || 'base'}}"
     open-type="{{openType || ''}}"
-    hover-class="{{hoverClass}}"
+    hover-class="{{hoverClass || ''}}"
     hover-stop-propagation="{{hoverStopPropagation || false}}"
     hover-start-time="{{hoverStartTime || 20}}"
     hover-stay-time="{{hoverStayTime || 70}}"
diff --git a/src/dialog/index.ts b/src/dialog/index.ts
index 5cfac79a5..f9c538f8b 100644
--- a/src/dialog/index.ts
+++ b/src/dialog/index.ts
@@ -37,7 +37,7 @@ interface DialogActionOptionsType {
 }
 
 const defaultOptions = {
-  actions: false,
+  actions: [],
   buttonLayout: props.buttonLayout.value,
   cancelBtn: props.cancelBtn.value,
   closeOnOverlayClick: props.closeOnOverlayClick.value,

From 246d5a753f804fdb23b5f08bb4a2fdf9a2513611 Mon Sep 17 00:00:00 2001
From: Antzy <mozbano@163.com>
Date: Mon, 10 Jul 2023 14:29:20 +0800
Subject: [PATCH 134/202] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Drate=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=80=89=E4=B8=AD=E6=B2=A1=E6=9C=89=E7=94=9F=E6=95=88?=
 =?UTF-8?q?=20(#2158)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复rate组件选中没有生效

修复rate组件选中没有生效

* fix: 导致父组件tap失效
---
 src/rate/rate.ts   | 7 ++++---
 src/rate/rate.wxml | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/rate/rate.ts b/src/rate/rate.ts
index c2826794e..0629fc82a 100644
--- a/src/rate/rate.ts
+++ b/src/rate/rate.ts
@@ -33,7 +33,7 @@ export default class Rate extends SuperComponent {
   methods = {
     onTouch(e: WechatMiniprogram.TouchEvent, eventType: 'tap' | 'move') {
       const { count, allowHalf, gap, value: currentValue, size } = this.properties;
-      const [touch] = e.touches;
+      const [touch] = e.changedTouches;
       const margin = unitConvert(gap);
       getRect(this, `.${name}__wrapper`).then((rect) => {
         const { width, left } = rect;
@@ -77,10 +77,11 @@ export default class Rate extends SuperComponent {
     },
     onTouchMove(e: WechatMiniprogram.TouchEvent) {
       this.onTouch(e, 'move');
-      this.showAlertText()
+      this.showAlertText();
     },
-    onTouchEnd() {
+    onTouchEnd(e) {
       this.touchEnd = true;
+      this.onTouch(e, 'tap');
       this.hideTips();
     },
     hideTips() {
diff --git a/src/rate/rate.wxml b/src/rate/rate.wxml
index 5feb342b7..591d5eefe 100644
--- a/src/rate/rate.wxml
+++ b/src/rate/rate.wxml
@@ -5,7 +5,7 @@
   <view
     class="{{classPrefix}}__wrapper {{prefix}}-class"
     style="font-size:{{ utils.regSize(size) }}"
-    catch:touchstart="onTouchStart"
+    catch:touchstart="{{ !disabled ? 'onTouchStart' : '' }}"
     catch:touchmove="{{ !disabled ? 'onTouchMove' : '' }}"
     catch:tap="{{ !disabled ? 'onTap' : '' }}"
     catch:touchend="{{ !disabled ? 'onTouchEnd' : ''}}"

From ff11c7d321a651bd7a9fdd242d9fa4d94e92728a Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 10 Jul 2023 15:12:12 +0800
Subject: [PATCH 135/202] fix(rate): uncatch event (#2168)

---
 src/rate/rate.ts   |  3 +--
 src/rate/rate.wxml | 10 +++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/rate/rate.ts b/src/rate/rate.ts
index 0629fc82a..778633e9f 100644
--- a/src/rate/rate.ts
+++ b/src/rate/rate.ts
@@ -79,9 +79,8 @@ export default class Rate extends SuperComponent {
       this.onTouch(e, 'move');
       this.showAlertText();
     },
-    onTouchEnd(e) {
+    onTouchEnd() {
       this.touchEnd = true;
-      this.onTouch(e, 'tap');
       this.hideTips();
     },
     hideTips() {
diff --git a/src/rate/rate.wxml b/src/rate/rate.wxml
index 591d5eefe..961afe23f 100644
--- a/src/rate/rate.wxml
+++ b/src/rate/rate.wxml
@@ -5,11 +5,11 @@
   <view
     class="{{classPrefix}}__wrapper {{prefix}}-class"
     style="font-size:{{ utils.regSize(size) }}"
-    catch:touchstart="{{ !disabled ? 'onTouchStart' : '' }}"
-    catch:touchmove="{{ !disabled ? 'onTouchMove' : '' }}"
-    catch:tap="{{ !disabled ? 'onTap' : '' }}"
-    catch:touchend="{{ !disabled ? 'onTouchEnd' : ''}}"
-    catch:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}"
+    bind:touchstart="{{ !disabled ? 'onTouchStart' : '' }}"
+    bind:touchmove="{{ !disabled ? 'onTouchMove' : '' }}"
+    bind:tap="{{ !disabled ? 'onTap' : '' }}"
+    bind:touchend="{{ !disabled ? 'onTouchEnd' : ''}}"
+    bind:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}"
     aria-role="slider"
     aria-valuemax="{{count}}"
     aria-valuemin="{{0}}"

From 20cd8d31d45a9eb387b28b273054dff23a3669b9 Mon Sep 17 00:00:00 2001
From: Guan9 <mllz79@163.com>
Date: Mon, 10 Jul 2023 15:20:35 +0800
Subject: [PATCH 136/202] =?UTF-8?q?feat(pull-down-refresh):=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0show-scrollbar=E5=8F=82=E6=95=B0=20(#2163)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pull-down-refresh/props.ts               | 5 +++++
 src/pull-down-refresh/pull-down-refresh.wxml | 1 +
 src/pull-down-refresh/type.ts                | 8 ++++++++
 3 files changed, 14 insertions(+)

diff --git a/src/pull-down-refresh/props.ts b/src/pull-down-refresh/props.ts
index 7b959fa2a..f345c9c97 100644
--- a/src/pull-down-refresh/props.ts
+++ b/src/pull-down-refresh/props.ts
@@ -54,6 +54,11 @@ const props: TdPullDownRefreshProps = {
     type: String,
     value: '',
   },
+  /** 滚动条显隐控制 (同时开启 enhanced 属性后生效) */
+  showScrollbar: {
+    type: Boolean,
+    value: true,
+  },
   /** 距顶部/左边多远时，触发 scrolltoupper 事件 */
   upperThreshold: {
     type: null,
diff --git a/src/pull-down-refresh/pull-down-refresh.wxml b/src/pull-down-refresh/pull-down-refresh.wxml
index afa3a87c5..1a80d69f6 100644
--- a/src/pull-down-refresh/pull-down-refresh.wxml
+++ b/src/pull-down-refresh/pull-down-refresh.wxml
@@ -10,6 +10,7 @@
   lower-threshold="{{lowerThreshold}}"
   upper-threshold="{{upperThreshold}}"
   scroll-into-view="{{scrollIntoView}}"
+  show-scrollbar="{{showScrollbar}}"
   enhanced
   scroll-with-animation
   bounces="{{false}}"
diff --git a/src/pull-down-refresh/type.ts b/src/pull-down-refresh/type.ts
index d3885e171..74a2dfc2f 100644
--- a/src/pull-down-refresh/type.ts
+++ b/src/pull-down-refresh/type.ts
@@ -85,6 +85,14 @@ export interface TdPullDownRefreshProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 滚动条显隐控制 (同时开启 enhanced 属性后生效)
+   * @default true
+   */
+  showScrollbar?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 距顶部/左边多远时，触发 scrolltoupper 事件
    * @default 50

From 9446f5fa2d9a84df584888178bd7a998b4f53b10 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Mon, 10 Jul 2023 15:30:14 +0800
Subject: [PATCH 137/202] docs(pulldown-refresh): add show-scrollbar property

---
 src/pull-down-refresh/README.en-US.md | 1 +
 src/pull-down-refresh/README.md       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/pull-down-refresh/README.en-US.md b/src/pull-down-refresh/README.en-US.md
index cf51713ec..fdabceef4 100644
--- a/src/pull-down-refresh/README.en-US.md
+++ b/src/pull-down-refresh/README.en-US.md
@@ -15,6 +15,7 @@ lower-threshold | String / Number | 50 | `1.1.5` | N
 max-bar-height | String / Number | 80 | \- | N
 refresh-timeout | Number | 3000 | \- | N
 scroll-into-view | String | - | `1.1.5` | N
+show-scrollbar | Boolean | true | \- | N
 upper-threshold | String / Number | 50 | `1.1.5` | N
 value | Boolean | false | \- | N
 default-value | Boolean | undefined | uncontrolled property | N
diff --git a/src/pull-down-refresh/README.md b/src/pull-down-refresh/README.md
index 145f7f37f..2b9bf075a 100644
--- a/src/pull-down-refresh/README.md
+++ b/src/pull-down-refresh/README.md
@@ -43,6 +43,7 @@ lower-threshold | String / Number | 50 | `1.1.5`。距底部/右边多远时，
 max-bar-height | String / Number | 80 | 最大下拉高度，如果值为数字则单位是：'px' | N
 refresh-timeout | Number | 3000 | 刷新超时时间 | N
 scroll-into-view | String | - | `1.1.5`。值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | N
+show-scrollbar | Boolean | true | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | N
 upper-threshold | String / Number | 50 | `1.1.5`。距顶部/左边多远时，触发 scrolltoupper 事件 | N
 value | Boolean | false | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态 | N
 default-value | Boolean | undefined | 组件状态，值为 `true` 表示下拉状态，值为 `false` 表示收起状态。非受控属性 | N

From 308245688f683c851503ce2d97607630140c9d16 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:42:34 +0800
Subject: [PATCH 138/202] fix(picker): observe value (#2169)

---
 src/picker/picker.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/picker/picker.ts b/src/picker/picker.ts
index 07138b933..fe961cedd 100644
--- a/src/picker/picker.ts
+++ b/src/picker/picker.ts
@@ -25,7 +25,7 @@ export default class Picker extends SuperComponent {
   };
 
   observers = {
-    visible() {
+    'value, visible'() {
       this.updateChildren();
     },
     keys(obj) {

From b623bf3c31d6c983d07b63c37bf69f0e785f5053 Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Mon, 10 Jul 2023 16:43:07 +0800
Subject: [PATCH 139/202] fix(tabs): enable scroll smoothly (#2170)

---
 src/tabs/tabs.ts   | 5 +++--
 src/tabs/tabs.wxml | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts
index a012b66c9..c31ad9c3d 100644
--- a/src/tabs/tabs.ts
+++ b/src/tabs/tabs.ts
@@ -64,6 +64,7 @@ export default class Tabs extends SuperComponent {
     currentIndex: -1,
     trackStyle: '',
     offset: 0,
+    scrollLeft: 0,
     tabID: '',
     placement: 'top',
   };
@@ -96,7 +97,7 @@ export default class Tabs extends SuperComponent {
     onScroll(e) {
       const { scrollLeft } = e.detail;
       this.setData({
-        offset: scrollLeft,
+        scrollLeft,
       });
     },
     updateTabs(cb) {
@@ -190,7 +191,7 @@ export default class Tabs extends SuperComponent {
         });
 
         if (this.containerWidth) {
-          const offset = this.calcScrollOffset(this.containerWidth, rect.left, rect.width, this.data.offset);
+          const offset = this.calcScrollOffset(this.containerWidth, rect.left, rect.width, this.data.scrollLeft);
           const maxOffset = totalSize - this.containerWidth;
           this.setData({
             offset: Math.min(Math.max(offset, 0), maxOffset),
diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
index 1ca9e8a9e..246865134 100644
--- a/src/tabs/tabs.wxml
+++ b/src/tabs/tabs.wxml
@@ -19,7 +19,9 @@
         enable-flex
         scroll-left="{{offset}}"
         scroll-x="{{true}}"
+        scroll-anchoring
         scroll-with-animation
+        enable-passive
         show-scrollbar="{{false}}"
         bind:scroll="onScroll"
       >

From 3767aebe4aa52602a108573ff97908a3d34149ba Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 11 Jul 2023 14:24:31 +0800
Subject: [PATCH 140/202] fix(tree-select): enable value with empty array
 (#2173)

---
 src/tree-select/tree-select.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tree-select/tree-select.ts b/src/tree-select/tree-select.ts
index 87a2e0810..784400736 100644
--- a/src/tree-select/tree-select.ts
+++ b/src/tree-select/tree-select.ts
@@ -66,7 +66,7 @@ export default class TreeSelect extends SuperComponent {
 
       if (multiple) {
         const finalValue = this.data.value || this.data.defaultValue;
-        if (!Array.isArray(finalValue[leafLevel])) {
+        if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) {
           throw TypeError('应传入数组类型的 value');
         }
       }

From 6ad792d5593e851f3839560053fbee1d2b8c08ca Mon Sep 17 00:00:00 2001
From: leejimchill <leejimqiu@gmail.com>
Date: Tue, 11 Jul 2023 15:18:42 +0800
Subject: [PATCH 141/202] chore: publish v1.1.12 (#2175)

* chore: publish v1.1.12

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 13 +++++++++++++
 package.json |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa9b0093e..fcbd39c53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,19 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.1.12 `2023-07-11` 
+### 🚀 Features
+- `PullDownRefresh`: 增加 show-scrollbar 属性 @lolhezihehe ([#2163](https://github.com/Tencent/tdesign-miniprogram/pull/2163))
+### 🐞 Bug Fixes
+- `Rate`: 修复无法点击的问题 @AntzyMo ([#2158](https://github.com/Tencent/tdesign-miniprogram/pull/2158))
+- `Rate`: 使事件冒泡至上层元素 @LeeJim ([#2168](https://github.com/Tencent/tdesign-miniprogram/pull/2168))
+- `DateTimePicker`: 修复无法选择的问题 @betavs ([#2169](https://github.com/Tencent/tdesign-miniprogram/pull/2169))
+- `Tabs`: 修复超出时滚动不流畅的问题 @LeeJim ([#2170](https://github.com/Tencent/tdesign-miniprogram/pull/2170))
+- `TreeSelect`: 修复多选时 value 使用空数组报错的问题 @LeeJim ([#2173](https://github.com/Tencent/tdesign-miniprogram/pull/2173))
+### 🚧 Others
+- 移除开启 virtual-host 场景的 snapshot 测试 @LeeJim ([#2161](https://github.com/Tencent/tdesign-miniprogram/pull/2161))
+- 修复控制台告警 @betavs ([#2164](https://github.com/Tencent/tdesign-miniprogram/pull/2164))
+
 ## 🌈 1.1.11 `2023-07-04` 
 ### 🚀 Features
 - `CheckboxGroup`: 新增 borderless 属性 @betavs ([#2124](https://github.com/Tencent/tdesign-miniprogram/pull/2124))
diff --git a/package.json b/package.json
index cffb1af65..76d3b025d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",
@@ -125,4 +125,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
+}
\ No newline at end of file

From be7cf156d24c5e0e29bf569c066eefeeca4ffcd5 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Thu, 13 Jul 2023 11:12:34 +0800
Subject: [PATCH 142/202] chore: add css variables content for api docs (#2182)

* fix: resolved some spelling mistake

* chore: add css variables content for api docs
---
 script/generate-changelog.js           |   2 +-
 script/generate-css-vars.js            |  69 +++++++++++++++++
 script/prerender.mjs                   |   8 +-
 script/test/transform.js               |   2 +-
 src/action-sheet/README.en-US.md       |  15 ++++
 src/action-sheet/README.md             |  15 ++++
 src/avatar/README.en-US.md             |  27 +++++++
 src/avatar/README.md                   |  27 +++++++
 src/back-top/README.en-US.md           |  12 +++
 src/back-top/README.md                 |  12 +++
 src/badge/README.en-US.md              |  19 +++++
 src/badge/README.md                    |  19 +++++
 src/button/README.en-US.md             | 102 +++++++++++++++++++++++++
 src/button/README.md                   | 102 +++++++++++++++++++++++++
 src/calendar/README.en-US.md           |  16 ++++
 src/calendar/README.md                 |  16 ++++
 src/calendar/__test__/index.test.js    |   4 +-
 src/cascader/README.en-US.md           |  16 ++++
 src/cascader/README.md                 |  16 ++++
 src/cell/README.en-US.md               |  36 +++++++++
 src/cell/README.md                     |  36 +++++++++
 src/cell/cell.less                     |   4 +-
 src/checkbox/README.en-US.md           |  23 ++++++
 src/checkbox/README.md                 |  23 ++++++
 src/collapse-panel/collapse-panel.less |   2 +-
 src/collapse/README.en-US.md           |  19 +++++
 src/collapse/README.md                 |  19 +++++
 src/count-down/README.en-US.md         |  11 +++
 src/count-down/README.md               |  11 +++
 src/date-time-picker/README.en-US.md   |   7 ++
 src/date-time-picker/README.md         |   7 ++
 src/dialog/README.en-US.md             |  15 ++++
 src/dialog/README.md                   |  15 ++++
 src/divider/README.en-US.md            |  11 +++
 src/divider/README.md                  |  11 +++
 src/drawer/README.en-US.md             |  20 +++++
 src/drawer/README.md                   |  20 +++++
 src/drawer/__test__/index.test.js      |   2 +-
 src/dropdown-menu/README.en-US.md      |  20 +++++
 src/dropdown-menu/README.md            |  21 ++++-
 src/empty/README.en-US.md              |  12 +++
 src/empty/README.md                    |  12 +++
 src/fab/README.en-US.md                |   7 ++
 src/fab/README.md                      |   7 ++
 src/footer/README.en-US.md             |  21 +++++
 src/footer/README.md                   |  21 +++++
 src/grid/README.en-US.md               |  26 +++++++
 src/grid/README.md                     |  26 +++++++
 src/icon/README.md                     |   2 +-
 src/image-viewer/README.en-US.md       |  13 ++++
 src/image-viewer/README.md             |  13 ++++
 src/image/README.en-US.md              |  10 +++
 src/image/README.md                    |  10 +++
 src/indexes/README.en-US.md            |  25 ++++++
 src/indexes/README.md                  |  25 ++++++
 src/input/README.en-US.md              |  26 +++++++
 src/input/README.md                    |  26 +++++++
 src/link/README.en-US.md               |  21 +++++
 src/link/README.md                     |  21 +++++
 src/loading/README.en-US.md            |   9 +++
 src/loading/README.md                  |   9 +++
 src/message/README.en-US.md            |  15 ++++
 src/message/README.md                  |  15 ++++
 src/message/message.ts                 |   8 +-
 src/navbar/README.en-US.md             |  16 ++++
 src/navbar/README.md                   |  16 ++++
 src/notice-bar/README.en-US.md         |  17 +++++
 src/notice-bar/README.md               |  17 +++++
 src/overlay/README.en-US.md            |   8 ++
 src/overlay/README.md                  |   8 ++
 src/picker/README.en-US.md             |  25 ++++++
 src/picker/README.md                   |  24 ++++++
 src/popup/README.en-US.md              |   8 ++
 src/popup/README.md                    |   8 ++
 src/progress/README.en-US.md           |   9 +++
 src/progress/README.md                 |   9 +++
 src/pull-down-refresh/README.en-US.md  |   7 ++
 src/pull-down-refresh/README.md        |   7 ++
 src/radio/README.en-US.md              |  24 ++++++
 src/radio/README.md                    |  24 ++++++
 src/rate/README.en-US.md               |  13 ++++
 src/rate/README.md                     |  13 ++++
 src/result/README.en-US.md             |  18 +++++
 src/result/README.md                   |  18 +++++
 src/search/README.en-US.md             |  17 +++++
 src/search/README.md                   |  17 +++++
 src/search/search.less                 |   2 +-
 src/side-bar/README.en-US.md           |  18 +++++
 src/side-bar/README.md                 |  18 +++++
 src/skeleton/README.en-US.md           |  16 ++++
 src/skeleton/README.md                 |  16 ++++
 src/slider/README.en-US.md             |  18 +++++
 src/slider/README.md                   |  18 +++++
 src/step-item/step-item.less           |   4 +-
 src/stepper/README.en-US.md            |  10 +++
 src/stepper/README.md                  |  10 +++
 src/steps/README.en-US.md              |  32 ++++++++
 src/steps/README.md                    |  32 ++++++++
 src/swipe-cell/swipe-cell.wxs          |   2 +-
 src/swiper/README.en-US.md             |  19 +++++
 src/swiper/README.md                   |  19 +++++
 src/switch/README.en-US.md             |  37 +++++++++
 src/switch/README.md                   |  37 +++++++++
 src/switch/switch.less                 |  12 +--
 src/tab-bar-item/tab-bar-item.less     |   1 -
 src/tab-bar/README.en-US.md            |  17 +++++
 src/tab-bar/README.md                  |  17 +++++
 src/tabs/README.en-US.md               |  24 ++++++
 src/tabs/README.md                     |  24 ++++++
 src/tabs/tabs.less                     |   2 +-
 src/tag/README.en-US.md                |  40 ++++++++++
 src/tag/README.md                      |  40 ++++++++++
 src/tag/__test__/index.test.js         |   4 +-
 src/textarea/README.en-US.md           |  14 ++++
 src/textarea/README.md                 |  14 ++++
 src/toast/README.en-US.md              |  12 +++
 src/toast/README.md                    |  12 +++
 src/tree-select/README.en-US.md        |  12 +++
 src/tree-select/README.md              |  12 +++
 src/upload/README.en-US.md             |  10 +++
 src/upload/README.md                   |  10 +++
 121 files changed, 2088 insertions(+), 32 deletions(-)
 create mode 100644 script/generate-css-vars.js
 create mode 100644 src/overlay/README.en-US.md
 create mode 100644 src/search/README.en-US.md

diff --git a/script/generate-changelog.js b/script/generate-changelog.js
index f8001717d..a802b677a 100644
--- a/script/generate-changelog.js
+++ b/script/generate-changelog.js
@@ -18,7 +18,7 @@ function updateVersion() {
     rl.on('line', (input) => {
       let newVersion = '';
       if (!input) {
-        newVersion = pkg.version.replace(/(\d+\.\d+\.)(\d+)/, (verion, $1, $2) => $1 + (Number($2) + 1));
+        newVersion = pkg.version.replace(/(\d+\.\d+\.)(\d+)/, (version, $1, $2) => $1 + (Number($2) + 1));
       } else if (!VERSION_REG.test(input)) {
         console.log('\x1B[31m%s\x1B[0m', '\n⚡ 不要搞事年轻人，请输入正确版本号格式!\n');
         rl.prompt();
diff --git a/script/generate-css-vars.js b/script/generate-css-vars.js
new file mode 100644
index 000000000..53a2213bf
--- /dev/null
+++ b/script/generate-css-vars.js
@@ -0,0 +1,69 @@
+const fs = require('fs');
+const path = require('path');
+
+const combine = {
+  avatar: ['avatar-group', 'avatar'],
+  cell: ['cell-group', 'cell'],
+  collapse: ['collapse', 'collapse-panel'],
+  'dropdown-menu': ['dropdown-menu', 'dropdown-item'],
+  tag: ['tag', 'check-tag'],
+  checkbox: ['checkbox-group', 'checkbox'],
+  indexes: ['indexes', 'indexes-anchor'],
+  picker: ['picker', 'picker-item'],
+  radio: ['radio-group', 'radio'],
+  'side-bar': ['side-bar', 'side-bar-item'],
+  steps: ['steps', 'step-item'],
+  swiper: ['swiper', 'swiper-nav'],
+  tabs: ['tabs', 'tab-panel'],
+  'tab-bar': ['tab-bar', 'tab-bar-item'],
+  grid: ['grid', 'grid-item'],
+};
+
+function resolveCwd(...args) {
+  args.unshift(process.cwd());
+  return path.join(...args);
+}
+
+const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
+
+// eslint-disable-next-line
+const matchReg = /(?<=var).*?(?=\;)/g;
+
+// 使用 v2 文件夹下 _var.less 文件
+const lessPath = [];
+if (combine[COMPONENT_NAME]) {
+  combine[COMPONENT_NAME].forEach((item) => {
+    lessPath.push(resolveCwd(`src/${item}/${item}.less`));
+  });
+} else {
+  lessPath.push(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.less`));
+}
+
+// 追加到文件
+const cssVariableHeadContent = `\n\n### CSS 变量\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
+const cssVariableHeadContentEn = `\n\n### CSS Variables\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
+
+fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableHeadContent);
+fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableHeadContentEn);
+
+// 读取 less 文件内容
+lessPath.forEach((item) => {
+  if (fs.existsSync(item)) {
+    fs.readFile(item, 'utf8', (err, file) => {
+      if (err) {
+        console.log('please execute npm run update:css first!', err);
+        return;
+      }
+      const list = file.match(matchReg)?.sort();
+      let cssVariableBodyContent = '';
+      list?.forEach((item) => {
+        cssVariableBodyContent += `${item.slice(1, item.indexOf(','))} | ${item.slice(
+          item.indexOf(',') + 2,
+          item.length - 1,
+        )} | - \n`;
+      });
+      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableBodyContent);
+      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableBodyContent);
+    });
+  }
+});
diff --git a/script/prerender.mjs b/script/prerender.mjs
index 61b62a718..70e7bc448 100644
--- a/script/prerender.mjs
+++ b/script/prerender.mjs
@@ -16,7 +16,7 @@ function initPageList() {
     });
   });
 
-  console.log(pageList)
+  console.log(pageList);
 
   return pageList;
 }
@@ -24,7 +24,7 @@ function initPageList() {
 async function initPreviewServer() {
   const previewServer = await preview({
     preview: { port: 9999, open: false },
-    build: { outDir: './_site' }
+    build: { outDir: './_site' },
   });
 
   previewServer.printUrls();
@@ -41,7 +41,7 @@ async function initPreviewServer() {
     fs.mkdirSync(spiderPath);
   } catch {}
 
-  for (let url of pageList) {
+  for (const url of pageList) {
     const [, pathName] = url.split(prefix);
     const filePath = `${spiderPath}${pathName || '/index'}.html`;
 
@@ -54,7 +54,7 @@ async function initPreviewServer() {
       fs.mkdirSync(path.dirname(filePath));
     } catch {}
 
-    console.log('\x1b[32m', `writting ${url}... \n`);
+    console.log('\x1b[32m', `writing ${url}... \n`);
     fs.writeFileSync(filePath, html);
   }
 
diff --git a/script/test/transform.js b/script/test/transform.js
index 26e54b50d..0ac53ea8f 100644
--- a/script/test/transform.js
+++ b/script/test/transform.js
@@ -1,4 +1,4 @@
-// 由于开启 vritualHost=true 之后，selectComponent 无法获取，暂时在单测关闭 virtualHost
+// 由于开启 virtualHost=true 之后，selectComponent 无法获取，暂时在单测关闭 virtualHost
 const path = require('path');
 const babelJest = require('babel-jest');
 
diff --git a/src/action-sheet/README.en-US.md b/src/action-sheet/README.en-US.md
index 0c840670b..33ae0640e 100644
--- a/src/action-sheet/README.en-US.md
+++ b/src/action-sheet/README.en-US.md
@@ -22,3 +22,18 @@ name | params | description
 cancel | \- | \-
 close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-color | @font-gray-1 | - 
+--td-action-sheet-cancel-height | 96rpx | - 
+--td-action-sheet-color | @font-gray-1 | - 
+--td-action-sheet-description-color | @font-gray-3 | - 
+--td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-list-item-height | 112rpx | - 
+--td-action-sheet-text-align | center | - 
diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index 1ba2bab61..732f6ac0c 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -105,3 +105,18 @@ external-classes | Array | - | 组件类名，用于设置组件外层元素类
 cancel | \- | 点击取消按钮时触发
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-color | @font-gray-1 | - 
+--td-action-sheet-cancel-height | 96rpx | - 
+--td-action-sheet-color | @font-gray-1 | - 
+--td-action-sheet-description-color | @font-gray-3 | - 
+--td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-list-item-height | 112rpx | - 
+--td-action-sheet-text-align | center | - 
diff --git a/src/avatar/README.en-US.md b/src/avatar/README.en-US.md
index 57e9af29e..b0d8df223 100644
--- a/src/avatar/README.en-US.md
+++ b/src/avatar/README.en-US.md
@@ -31,3 +31,30 @@ collapse-avatar | String / Slot | - | \- | N
 external-classes | Array | - | `['t-class', 't-class-image', 't-class-content']` | N
 max | Number | - | \- | N
 size | String | medium | size | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-avatar-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -6px | - 
+--td-avatar-group-margin-left-small | -4px | - 
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | #fff | - 
+--td-avatar-border-width-large | 8rpx | - 
+--td-avatar-border-width-medium | 6rpx | - 
+--td-avatar-border-width-small | 4rpx | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-icon-large-font-size | 64rpx | - 
+--td-avatar-icon-medium-font-size | 48rpx | - 
+--td-avatar-icon-small-font-size | 40rpx | - 
+--td-avatar-large-width | 128rpx | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 96rpx | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 80rpx | - 
+--td-avatar-text-large-font-size | 16px | - 
+--td-avatar-text-medium-font-size | @font-size-base | - 
+--td-avatar-text-small-font-size | @font-size-s | - 
diff --git a/src/avatar/README.md b/src/avatar/README.md
index d083ac64e..409f21de0 100644
--- a/src/avatar/README.md
+++ b/src/avatar/README.md
@@ -85,3 +85,30 @@ collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头
 external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-content']` | N
 max | Number | - | 能够同时显示的最多头像数量 | N
 size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-avatar-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -6px | - 
+--td-avatar-group-margin-left-small | -4px | - 
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | #fff | - 
+--td-avatar-border-width-large | 8rpx | - 
+--td-avatar-border-width-medium | 6rpx | - 
+--td-avatar-border-width-small | 4rpx | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-icon-large-font-size | 64rpx | - 
+--td-avatar-icon-medium-font-size | 48rpx | - 
+--td-avatar-icon-small-font-size | 40rpx | - 
+--td-avatar-large-width | 128rpx | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 96rpx | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 80rpx | - 
+--td-avatar-text-large-font-size | 16px | - 
+--td-avatar-text-medium-font-size | @font-size-base | - 
+--td-avatar-text-small-font-size | @font-size-s | - 
diff --git a/src/back-top/README.en-US.md b/src/back-top/README.en-US.md
index c75a4b526..8a4b150f2 100644
--- a/src/back-top/README.en-US.md
+++ b/src/back-top/README.en-US.md
@@ -17,3 +17,15 @@ theme | String | round | options：round/half-round/round-dark/half-round-dark |
 name | params | description
 -- | -- | --
 to-top | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-radius | @radius-circle | - 
+--td-back-top-round-color | @font-gray-1 | - 
+--td-back-top-round-dark-bg-color | @gray-color-14 | - 
+--td-back-top-round-dark-color | @font-white-1 | - 
diff --git a/src/back-top/README.md b/src/back-top/README.md
index 7e220e416..d8b9a1e2e 100644
--- a/src/back-top/README.md
+++ b/src/back-top/README.md
@@ -40,3 +40,15 @@ theme | String | round | 预设的样式类型。可选项：round/half-round/ro
 名称 | 参数 | 描述
 -- | -- | --
 to-top | \- | 点击触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-radius | @radius-circle | - 
+--td-back-top-round-color | @font-gray-1 | - 
+--td-back-top-round-dark-bg-color | @gray-color-14 | - 
+--td-back-top-round-dark-color | @font-white-1 | - 
diff --git a/src/badge/README.en-US.md b/src/badge/README.en-US.md
index f8cf6069b..0c39ca648 100644
--- a/src/badge/README.en-US.md
+++ b/src/badge/README.en-US.md
@@ -15,3 +15,22 @@ offset | Array | - | Typescript：`Array<string \| number>` | N
 shape | String | circle | options：circle/square/bubble/ribbon | N
 show-zero | Boolean | false | \- | N
 size | String | medium | options：medium/large | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-badge-basic-height | 32rpx | - 
+--td-badge-basic-padding | 8rpx | - 
+--td-badge-basic-width | 32rpx | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 4rpx | - 
+--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - 
+--td-badge-dot-size | 16rpx | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 40rpx | - 
+--td-badge-large-padding | 10rpx | - 
+--td-badge-text-color | @font-white-1 | - 
diff --git a/src/badge/README.md b/src/badge/README.md
index e6c6d9bac..c3a6e3dcd 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -45,3 +45,22 @@ offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['1
 shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-badge-basic-height | 32rpx | - 
+--td-badge-basic-padding | 8rpx | - 
+--td-badge-basic-width | 32rpx | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 4rpx | - 
+--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - 
+--td-badge-dot-size | 16rpx | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 40rpx | - 
+--td-badge-large-padding | 10rpx | - 
+--td-badge-text-color | @font-white-1 | - 
diff --git a/src/button/README.en-US.md b/src/button/README.en-US.md
index ee2b1d7e5..7eeb6d27c 100644
--- a/src/button/README.en-US.md
+++ b/src/button/README.en-US.md
@@ -44,3 +44,105 @@ bindchooseavatar | Eventhandle | - | \- | N
 name | params | description
 -- | -- | --
 tap | `(e: MouseEvent)` | trigger on click
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-button-border-radius | @radius-default | - 
+--td-button-border-width | 4rpx | - 
+--td-button-danger-active-bg-color | @error-color-7 | - 
+--td-button-danger-active-border-color | @error-color-7 | - 
+--td-button-danger-bg-color | @error-color | - 
+--td-button-danger-border-color | @error-color | - 
+--td-button-danger-color | @font-white-1 | - 
+--td-button-danger-dashed-border-color | @button-danger-dashed-color | - 
+--td-button-danger-dashed-color | @error-color | - 
+--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - 
+--td-button-danger-disabled-bg | @error-color-3 | - 
+--td-button-danger-disabled-border-color | @error-color-3 | - 
+--td-button-danger-disabled-color | @font-white-1 | - 
+--td-button-danger-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-danger-outline-active-border-color | @error-color-7 | - 
+--td-button-danger-outline-border-color | @button-danger-outline-color | - 
+--td-button-danger-outline-color | @error-color | - 
+--td-button-danger-outline-disabled-color | @error-color-3 | - 
+--td-button-danger-text-active-bg-color | @bg-color-container-active | - 
+--td-button-danger-text-color | @error-color | - 
+--td-button-danger-text-disabled-color | @button-danger-disabled-color | - 
+--td-button-default-active-bg-color | @bg-color-component-active | - 
+--td-button-default-active-border-color | @bg-color-component-active | - 
+--td-button-default-bg-color | @bg-color-component | - 
+--td-button-default-border-color | @bg-color-component | - 
+--td-button-default-color | @font-gray-1 | - 
+--td-button-default-disabled-bg | @bg-color-component-disabled | - 
+--td-button-default-disabled-border-color | @bg-color-component-disabled | - 
+--td-button-default-disabled-color | @font-gray-4 | - 
+--td-button-default-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-default-outline-active-border-color | @component-border | - 
+--td-button-default-outline-border-color | @component-border | - 
+--td-button-default-outline-color | @font-gray-1 | - 
+--td-button-default-outline-disabled-color | @component-border | - 
+--td-button-default-text-active-bg-color | @bg-color-container-active | - 
+--td-button-extra-small-font-size | @font-size-base | - 
+--td-button-extra-small-height | 56rpx | - 
+--td-button-extra-small-icon-font-size | 36rpx | - 
+--td-button-extra-small-padding-horizontal | 16rpx | - 
+--td-button-font-weight | 600 | - 
+--td-button-ghost-border-color | @button-ghost-color | - 
+--td-button-ghost-color | @bg-color-container | - 
+--td-button-ghost-danger-border-color | @error-color | - 
+--td-button-ghost-danger-color | @error-color | - 
+--td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | - 
+--td-button-ghost-primary-border-color | @brand-color | - 
+--td-button-ghost-primary-color | @brand-color | - 
+--td-button-icon-border-radius | 8rpx | - 
+--td-button-icon-spacer | @spacer | - 
+--td-button-large-font-size | @font-size-m | - 
+--td-button-large-height | 96rpx | - 
+--td-button-large-icon-font-size | 48rpx | - 
+--td-button-large-padding-horizontal | 40rpx | - 
+--td-button-light-active-bg-color | @brand-color-light-active | - 
+--td-button-light-active-border-color | @brand-color-light-active | - 
+--td-button-light-bg-color | @brand-color-light | - 
+--td-button-light-border-color | @brand-color-light | - 
+--td-button-light-color | @brand-color | - 
+--td-button-light-disabled-bg | @brand-color-light | - 
+--td-button-light-disabled-border-color | @brand-color-light | - 
+--td-button-light-disabled-color | @brand-color-disabled | - 
+--td-button-light-outline-active-bg-color | @brand-color-light-active | - 
+--td-button-light-outline-active-border-color | @brand-color-active | - 
+--td-button-light-outline-bg-color | @brand-color-light | - 
+--td-button-light-outline-border-color | @button-light-outline-color | - 
+--td-button-light-outline-color | @brand-color | - 
+--td-button-light-outline-disabled-color | @brand-color-disabled | - 
+--td-button-light-text-active-bg-color | @bg-color-container-active | - 
+--td-button-light-text-color | @brand-color | - 
+--td-button-medium-font-size | @font-size-m | - 
+--td-button-medium-height | 80rpx | - 
+--td-button-medium-icon-font-size | 40rpx | - 
+--td-button-medium-padding-horizontal | 32rpx | - 
+--td-button-primary-active-bg-color | @brand-color-active | - 
+--td-button-primary-active-border-color | @brand-color-active | - 
+--td-button-primary-bg-color | @brand-color | - 
+--td-button-primary-border-color | @brand-color | - 
+--td-button-primary-color | @font-white-1 | - 
+--td-button-primary-dashed-border-color | @button-primary-dashed-color | - 
+--td-button-primary-dashed-color | @brand-color | - 
+--td-button-primary-dashed-disabled-color | @brand-color-disabled | - 
+--td-button-primary-disabled-bg | @brand-color-disabled | - 
+--td-button-primary-disabled-border-color | @brand-color-disabled | - 
+--td-button-primary-disabled-color | @font-white-1 | - 
+--td-button-primary-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-primary-outline-active-border-color | @brand-color-active | - 
+--td-button-primary-outline-border-color | @button-primary-outline-color | - 
+--td-button-primary-outline-color | @brand-color | - 
+--td-button-primary-outline-disabled-color | @brand-color-disabled | - 
+--td-button-primary-text-active-bg-color | @bg-color-container-active | - 
+--td-button-primary-text-color | @brand-color | - 
+--td-button-primary-text-disabled-color | @brand-color-disabled | - 
+--td-button-small-font-size | @font-size-base | - 
+--td-button-small-height | 64rpx | - 
+--td-button-small-icon-font-size | 36rpx | - 
+--td-button-small-padding-horizontal | 24rpx | - 
diff --git a/src/button/README.md b/src/button/README.md
index 937e3409a..341910a57 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -105,3 +105,105 @@ bindchooseavatar | Eventhandle | - | 获取用户头像回调，open-type=choose
 名称 | 参数 | 描述
 -- | -- | --
 tap | `event` | 点击按钮，当按钮不为加载或禁用状态时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-button-border-radius | @radius-default | - 
+--td-button-border-width | 4rpx | - 
+--td-button-danger-active-bg-color | @error-color-7 | - 
+--td-button-danger-active-border-color | @error-color-7 | - 
+--td-button-danger-bg-color | @error-color | - 
+--td-button-danger-border-color | @error-color | - 
+--td-button-danger-color | @font-white-1 | - 
+--td-button-danger-dashed-border-color | @button-danger-dashed-color | - 
+--td-button-danger-dashed-color | @error-color | - 
+--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - 
+--td-button-danger-disabled-bg | @error-color-3 | - 
+--td-button-danger-disabled-border-color | @error-color-3 | - 
+--td-button-danger-disabled-color | @font-white-1 | - 
+--td-button-danger-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-danger-outline-active-border-color | @error-color-7 | - 
+--td-button-danger-outline-border-color | @button-danger-outline-color | - 
+--td-button-danger-outline-color | @error-color | - 
+--td-button-danger-outline-disabled-color | @error-color-3 | - 
+--td-button-danger-text-active-bg-color | @bg-color-container-active | - 
+--td-button-danger-text-color | @error-color | - 
+--td-button-danger-text-disabled-color | @button-danger-disabled-color | - 
+--td-button-default-active-bg-color | @bg-color-component-active | - 
+--td-button-default-active-border-color | @bg-color-component-active | - 
+--td-button-default-bg-color | @bg-color-component | - 
+--td-button-default-border-color | @bg-color-component | - 
+--td-button-default-color | @font-gray-1 | - 
+--td-button-default-disabled-bg | @bg-color-component-disabled | - 
+--td-button-default-disabled-border-color | @bg-color-component-disabled | - 
+--td-button-default-disabled-color | @font-gray-4 | - 
+--td-button-default-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-default-outline-active-border-color | @component-border | - 
+--td-button-default-outline-border-color | @component-border | - 
+--td-button-default-outline-color | @font-gray-1 | - 
+--td-button-default-outline-disabled-color | @component-border | - 
+--td-button-default-text-active-bg-color | @bg-color-container-active | - 
+--td-button-extra-small-font-size | @font-size-base | - 
+--td-button-extra-small-height | 56rpx | - 
+--td-button-extra-small-icon-font-size | 36rpx | - 
+--td-button-extra-small-padding-horizontal | 16rpx | - 
+--td-button-font-weight | 600 | - 
+--td-button-ghost-border-color | @button-ghost-color | - 
+--td-button-ghost-color | @bg-color-container | - 
+--td-button-ghost-danger-border-color | @error-color | - 
+--td-button-ghost-danger-color | @error-color | - 
+--td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | - 
+--td-button-ghost-primary-border-color | @brand-color | - 
+--td-button-ghost-primary-color | @brand-color | - 
+--td-button-icon-border-radius | 8rpx | - 
+--td-button-icon-spacer | @spacer | - 
+--td-button-large-font-size | @font-size-m | - 
+--td-button-large-height | 96rpx | - 
+--td-button-large-icon-font-size | 48rpx | - 
+--td-button-large-padding-horizontal | 40rpx | - 
+--td-button-light-active-bg-color | @brand-color-light-active | - 
+--td-button-light-active-border-color | @brand-color-light-active | - 
+--td-button-light-bg-color | @brand-color-light | - 
+--td-button-light-border-color | @brand-color-light | - 
+--td-button-light-color | @brand-color | - 
+--td-button-light-disabled-bg | @brand-color-light | - 
+--td-button-light-disabled-border-color | @brand-color-light | - 
+--td-button-light-disabled-color | @brand-color-disabled | - 
+--td-button-light-outline-active-bg-color | @brand-color-light-active | - 
+--td-button-light-outline-active-border-color | @brand-color-active | - 
+--td-button-light-outline-bg-color | @brand-color-light | - 
+--td-button-light-outline-border-color | @button-light-outline-color | - 
+--td-button-light-outline-color | @brand-color | - 
+--td-button-light-outline-disabled-color | @brand-color-disabled | - 
+--td-button-light-text-active-bg-color | @bg-color-container-active | - 
+--td-button-light-text-color | @brand-color | - 
+--td-button-medium-font-size | @font-size-m | - 
+--td-button-medium-height | 80rpx | - 
+--td-button-medium-icon-font-size | 40rpx | - 
+--td-button-medium-padding-horizontal | 32rpx | - 
+--td-button-primary-active-bg-color | @brand-color-active | - 
+--td-button-primary-active-border-color | @brand-color-active | - 
+--td-button-primary-bg-color | @brand-color | - 
+--td-button-primary-border-color | @brand-color | - 
+--td-button-primary-color | @font-white-1 | - 
+--td-button-primary-dashed-border-color | @button-primary-dashed-color | - 
+--td-button-primary-dashed-color | @brand-color | - 
+--td-button-primary-dashed-disabled-color | @brand-color-disabled | - 
+--td-button-primary-disabled-bg | @brand-color-disabled | - 
+--td-button-primary-disabled-border-color | @brand-color-disabled | - 
+--td-button-primary-disabled-color | @font-white-1 | - 
+--td-button-primary-outline-active-bg-color | @bg-color-container-active | - 
+--td-button-primary-outline-active-border-color | @brand-color-active | - 
+--td-button-primary-outline-border-color | @button-primary-outline-color | - 
+--td-button-primary-outline-color | @brand-color | - 
+--td-button-primary-outline-disabled-color | @brand-color-disabled | - 
+--td-button-primary-text-active-bg-color | @bg-color-container-active | - 
+--td-button-primary-text-color | @brand-color | - 
+--td-button-primary-text-disabled-color | @brand-color-disabled | - 
+--td-button-small-font-size | @font-size-base | - 
+--td-button-small-height | 64rpx | - 
+--td-button-small-icon-font-size | 36rpx | - 
+--td-button-small-padding-horizontal | 24rpx | - 
diff --git a/src/calendar/README.en-US.md b/src/calendar/README.en-US.md
index 243946c55..f245f7c9e 100644
--- a/src/calendar/README.en-US.md
+++ b/src/calendar/README.en-US.md
@@ -26,3 +26,19 @@ change | `(value: timestamp)` | `0.28.0`
 close | `(trigger: CalendarTrigger)` | `0.34.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
 confirm | `(value: timestamp)` | \-
 select | `(value: timestamp)` | `0.28.0`
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-calendar-active-color | @brand-color | - 
+--td-calendar-bg-color | @bg-color-container | - 
+--td-calendar-days-color | @font-gray-2 | - 
+--td-calendar-item-centre-color | @brand-color-light | - 
+--td-calendar-item-disabled-color | @font-gray-4 | - 
+--td-calendar-item-suffix-color | @font-gray-3 | - 
+--td-calendar-radius | 24rpx | - 
+--td-calendar-selected-color | @font-white-1 | - 
+--td-calendar-title-color | @font-gray-1 | - 
+--td-calendar-title-font-size | 18px | - 
diff --git a/src/calendar/README.md b/src/calendar/README.md
index bd1bf406b..ea6dff63b 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -78,3 +78,19 @@ change | `(value: timestamp)` | `0.28.0`。不显示 confirm-btn 时，完成选
 close | `(trigger: CalendarTrigger)` | `0.34.0`。关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/>
 confirm | `(value: timestamp)` | 点击确认按钮时触发
 select | `(value: timestamp)` | `0.28.0`。点击日期时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-calendar-active-color | @brand-color | - 
+--td-calendar-bg-color | @bg-color-container | - 
+--td-calendar-days-color | @font-gray-2 | - 
+--td-calendar-item-centre-color | @brand-color-light | - 
+--td-calendar-item-disabled-color | @font-gray-4 | - 
+--td-calendar-item-suffix-color | @font-gray-3 | - 
+--td-calendar-radius | 24rpx | - 
+--td-calendar-selected-color | @font-white-1 | - 
+--td-calendar-title-color | @font-gray-1 | - 
+--td-calendar-title-font-size | 18px | - 
diff --git a/src/calendar/__test__/index.test.js b/src/calendar/__test__/index.test.js
index 8b9310a5d..cafeeff9b 100644
--- a/src/calendar/__test__/index.test.js
+++ b/src/calendar/__test__/index.test.js
@@ -64,11 +64,11 @@ describe('calendar', () => {
     comp.attach(document.createElement('parent-wrapper'));
 
     const $calendar = comp.querySelector('#base');
-    const [$disbledItem, , $activeItem] = $calendar.querySelectorAll('.t-calendar__dates-item');
+    const [$disabledItem, , $activeItem] = $calendar.querySelectorAll('.t-calendar__dates-item');
 
     expect($calendar.instance.data.value).toBe(date.getTime());
 
-    $disbledItem.dispatchEvent('tap');
+    $disabledItem.dispatchEvent('tap');
     await simulate.sleep();
 
     expect($calendar.instance.data.value).toBe(date.getTime());
diff --git a/src/cascader/README.en-US.md b/src/cascader/README.en-US.md
index 45c9106bc..53d33dd7a 100644
--- a/src/cascader/README.en-US.md
+++ b/src/cascader/README.en-US.md
@@ -22,3 +22,19 @@ name | params | description
 change | `(value: string \| number, selectedOptions: string[])` | `1.0.1`
 close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
 pick | `(value: string \| number, index: number)` | `1.0.1`
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-cascader-active-color | @brand-color | - 
+--td-cascader-border-color | @border-color | - 
+--td-cascader-disabled-color | @font-gray-4 | - 
+--td-cascader-options-height | 640rpx | - 
+--td-cascader-options-title-color | @font-gray-3 | - 
+--td-cascader-step-arrow-color | @font-gray-3 | - 
+--td-cascader-step-dot-size | 16rpx | - 
+--td-cascader-step-height | 88rpx | - 
+--td-cascader-title-color | @font-gray-1 | - 
+--td-cascder-title-font-size | 36rpx | - 
diff --git a/src/cascader/README.md b/src/cascader/README.md
index a5f543aba..42a5441c7 100644
--- a/src/cascader/README.md
+++ b/src/cascader/README.md
@@ -68,3 +68,19 @@ visible | Boolean | false | 是否展示 | N
 change | `(value: string \| number, selectedOptions: string[])` | `1.0.1`。值发生变更时触发
 close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
 pick | `(value: string \| number, index: number)` | `1.0.1`。选择后触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-cascader-active-color | @brand-color | - 
+--td-cascader-border-color | @border-color | - 
+--td-cascader-disabled-color | @font-gray-4 | - 
+--td-cascader-options-height | 640rpx | - 
+--td-cascader-options-title-color | @font-gray-3 | - 
+--td-cascader-step-arrow-color | @font-gray-3 | - 
+--td-cascader-step-dot-size | 16rpx | - 
+--td-cascader-step-height | 88rpx | - 
+--td-cascader-title-color | @font-gray-1 | - 
+--td-cascder-title-font-size | 36rpx | - 
diff --git a/src/cell/README.en-US.md b/src/cell/README.en-US.md
index ed037d178..919d8ade6 100644
--- a/src/cell/README.en-US.md
+++ b/src/cell/README.en-US.md
@@ -25,3 +25,39 @@ url | String | - | \- | N
 name | params | description
 -- | -- | --
 click | - | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-cell-group-border-color | @border-color | - 
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - 
+--td-cell-group-title-color | @font-gray-3 | - 
+--td-cell-group-title-font-size | 28rpx | - 
+--td-cell-group-title-line-height | 90rpx | - 
+--td-cell-group-title-padding-left | 32rpx | - 
+--td-cell-bg-color | @bg-color-container | - 
+--td-cell-border-color | @component-stroke | - 
+--td-cell-border-left-space | @cell-horizontal-padding | - 
+--td-cell-border-right-space | 0 | - 
+--td-cell-description-color | @font-gray-2 | - 
+--td-cell-description-font-size | @font-size-base | - 
+--td-cell-description-line-height | 44rpx | - 
+--td-cell-height | auto | - 
+--td-cell-horizontal-padding | 32rpx | - 
+--td-cell-hover-color | @bg-color-secondarycontainer | - 
+--td-cell-image-height | 96rpx | - 
+--td-cell-image-width | 96rpx | - 
+--td-cell-left-icon-color | @brand-color | - 
+--td-cell-left-icon-font-size | 48rpx | - 
+--td-cell-line-height | 48rpx | - 
+--td-cell-note-color | @font-gray-3 | - 
+--td-cell-note-font-size | @font-size-m | - 
+--td-cell-required-color | @error-color-6 | - 
+--td-cell-required-font-size | @font-size-m | - 
+--td-cell-right-icon-color | @font-gray-3 | - 
+--td-cell-right-icon-font-size | 48rpx | - 
+--td-cell-title-color | @font-gray-1 | - 
+--td-cell-title-font-size | @font-size-m | - 
+--td-cell-vertical-padding | 32rpx | - 
diff --git a/src/cell/README.md b/src/cell/README.md
index fda3de052..cff38d94c 100644
--- a/src/cell/README.md
+++ b/src/cell/README.md
@@ -72,3 +72,39 @@ bordered | Boolean | - | 是否显示组边框 | N
 external-classes | Array | - | 组件类名。`['t-class']` | N
 theme | String | default | 单元格风格。可选项：default/card | N
 title | String | - | 单元格组标题 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-cell-group-border-color | @border-color | - 
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | - 
+--td-cell-group-title-color | @font-gray-3 | - 
+--td-cell-group-title-font-size | 28rpx | - 
+--td-cell-group-title-line-height | 90rpx | - 
+--td-cell-group-title-padding-left | 32rpx | - 
+--td-cell-bg-color | @bg-color-container | - 
+--td-cell-border-color | @component-stroke | - 
+--td-cell-border-left-space | @cell-horizontal-padding | - 
+--td-cell-border-right-space | 0 | - 
+--td-cell-description-color | @font-gray-2 | - 
+--td-cell-description-font-size | @font-size-base | - 
+--td-cell-description-line-height | 44rpx | - 
+--td-cell-height | auto | - 
+--td-cell-horizontal-padding | 32rpx | - 
+--td-cell-hover-color | @bg-color-secondarycontainer | - 
+--td-cell-image-height | 96rpx | - 
+--td-cell-image-width | 96rpx | - 
+--td-cell-left-icon-color | @brand-color | - 
+--td-cell-left-icon-font-size | 48rpx | - 
+--td-cell-line-height | 48rpx | - 
+--td-cell-note-color | @font-gray-3 | - 
+--td-cell-note-font-size | @font-size-m | - 
+--td-cell-required-color | @error-color-6 | - 
+--td-cell-required-font-size | @font-size-m | - 
+--td-cell-right-icon-color | @font-gray-3 | - 
+--td-cell-right-icon-font-size | 48rpx | - 
+--td-cell-title-color | @font-gray-1 | - 
+--td-cell-title-font-size | @font-size-m | - 
+--td-cell-vertical-padding | 32rpx | - 
diff --git a/src/cell/cell.less b/src/cell/cell.less
index f70497d6c..6ace42b13 100644
--- a/src/cell/cell.less
+++ b/src/cell/cell.less
@@ -7,8 +7,8 @@
 @cell-bg-color: var(--td-cell-bg-color, @bg-color-container);
 @cell-hover-color: var(--td-cell-hover-color, @bg-color-secondarycontainer);
 @cell-border-color: var(--td-cell-border-color, @component-stroke);
-@cell-border-left-space: var(--td-border-left-space, @cell-horizontal-padding);
-@cell-border-right-space: var(--td-border-right-space, 0);
+@cell-border-left-space: var(--td-cell-border-left-space, @cell-horizontal-padding);
+@cell-border-right-space: var(--td-cell-border-right-space, 0);
 @cell-description-color: var(--td-cell-description-color, @font-gray-2);
 @cell-description-font-size: var(--td-cell-description-font-size, @font-size-base);
 @cell-description-line-height: var(--td-cell-description-line-height, 44rpx);
diff --git a/src/checkbox/README.en-US.md b/src/checkbox/README.en-US.md
index e305fccc3..16241131c 100644
--- a/src/checkbox/README.en-US.md
+++ b/src/checkbox/README.en-US.md
@@ -47,3 +47,26 @@ default-value | Array | undefined | uncontrolled property。Typescript：`T` `ty
 name | params | description
 -- | -- | --
 change | `(value: CheckboxGroupValue)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-checkbox-bg-color | @bg-color-container | - 
+--td-checkbox-border-color | @component-stroke | - 
+--td-checkbox-description-color | @font-gray-2 | - 
+--td-checkbox-description-disabled-color | @font-gray-4 | - 
+--td-checkbox-description-line-height | 44rpx | - 
+--td-checkbox-font-size | 32rpx | - 
+--td-checkbox-icon-checked-color | @brand-color | - 
+--td-checkbox-icon-color | @gray-color-4 | - 
+--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-checkbox-icon-disabled-color | @brand-color-disabled | - 
+--td-checkbox-icon-size | 48rpx | - 
+--td-checkbox-tag-active-bg-color | @brand-color-light | - 
+--td-checkbox-tag-active-color | @brand-color | - 
+--td-checkbox-title-color | @font-gray-1 | - 
+--td-checkbox-title-disabled-color | @font-gray-4 | - 
+--td-checkbox-title-line-height | 48rpx | - 
+--td-checkbox-vertical-padding | 32rpx | - 
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index c2c2e4085..379b5a97a 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -106,3 +106,26 @@ default-value | Array | undefined | 选中值。非受控属性。TS 类型：`T
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: CheckboxGroupValue)` | 值变化时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-checkbox-bg-color | @bg-color-container | - 
+--td-checkbox-border-color | @component-stroke | - 
+--td-checkbox-description-color | @font-gray-2 | - 
+--td-checkbox-description-disabled-color | @font-gray-4 | - 
+--td-checkbox-description-line-height | 44rpx | - 
+--td-checkbox-font-size | 32rpx | - 
+--td-checkbox-icon-checked-color | @brand-color | - 
+--td-checkbox-icon-color | @gray-color-4 | - 
+--td-checkbox-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-checkbox-icon-disabled-color | @brand-color-disabled | - 
+--td-checkbox-icon-size | 48rpx | - 
+--td-checkbox-tag-active-bg-color | @brand-color-light | - 
+--td-checkbox-tag-active-color | @brand-color | - 
+--td-checkbox-title-color | @font-gray-1 | - 
+--td-checkbox-title-disabled-color | @font-gray-4 | - 
+--td-checkbox-title-line-height | 48rpx | - 
+--td-checkbox-vertical-padding | 32rpx | - 
diff --git a/src/collapse-panel/collapse-panel.less b/src/collapse-panel/collapse-panel.less
index ac27ec16a..c0369f5d6 100644
--- a/src/collapse-panel/collapse-panel.less
+++ b/src/collapse-panel/collapse-panel.less
@@ -2,7 +2,7 @@
 
 @collapse-header-text-color: var(--td-collapse-header-text-color, @font-gray-1);
 @collapse-content-text-color: var(--td-collapse-content-text-color, @font-gray-1);
-@collapse-header-text-diabled-color: var(--td-collapse-header-text-diabled-color, @font-gray-4);
+@collapse-header-text-disabled-color: var(--td-collapse-header-text-disabled-color, @font-gray-4);
 
 // font-size
 @collapse-title-font-size: var(--td-collapse-title-font-size, @font-size-m);
diff --git a/src/collapse/README.en-US.md b/src/collapse/README.en-US.md
index c6043dbc1..dc96873ba 100644
--- a/src/collapse/README.en-US.md
+++ b/src/collapse/README.en-US.md
@@ -32,3 +32,22 @@ header-left-icon | String / Slot | - | \- | N
 header-right-content | String / Slot | - | \- | N
 placement | String | bottom | `0.34.0`。options：bottom/top | N
 value | String / Number | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-collapse-border-color | @border-color | - 
+--td-collapse-content-font-size | @font-size-base | - 
+--td-collapse-content-line-height | 1.5 | - 
+--td-collapse-content-padding | 32rpx | - 
+--td-collapse-content-text-color | @font-gray-1 | - 
+--td-collapse-extra-font-size | @font-size-m | - 
+--td-collapse-header-height | 96rpx | - 
+--td-collapse-header-text-color | @font-gray-1 | - 
+--td-collapse-header-text-disabled-color | @font-gray-4 | - 
+--td-collapse-horizontal-padding | 32rpx | - 
+--td-collapse-icon-color | @font-gray-3 | - 
+--td-collapse-panel-bg-color | @bg-color-container | - 
+--td-collapse-title-font-size | @font-size-m | - 
diff --git a/src/collapse/README.md b/src/collapse/README.md
index 31534fb3b..849ec7fc4 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -80,3 +80,22 @@ header-left-icon | String / Slot | - | 面板头左侧图标 | N
 header-right-content | String / Slot | - | 面板头的右侧区域，一般用于呈现面板操作 | N
 placement | String | bottom | `0.34.0`。选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-collapse-border-color | @border-color | - 
+--td-collapse-content-font-size | @font-size-base | - 
+--td-collapse-content-line-height | 1.5 | - 
+--td-collapse-content-padding | 32rpx | - 
+--td-collapse-content-text-color | @font-gray-1 | - 
+--td-collapse-extra-font-size | @font-size-m | - 
+--td-collapse-header-height | 96rpx | - 
+--td-collapse-header-text-color | @font-gray-1 | - 
+--td-collapse-header-text-disabled-color | @font-gray-4 | - 
+--td-collapse-horizontal-padding | 32rpx | - 
+--td-collapse-icon-color | @font-gray-3 | - 
+--td-collapse-panel-bg-color | @bg-color-container | - 
+--td-collapse-title-font-size | @font-size-m | - 
diff --git a/src/count-down/README.en-US.md b/src/count-down/README.en-US.md
index 44bca3e0e..65b70355b 100644
--- a/src/count-down/README.en-US.md
+++ b/src/count-down/README.en-US.md
@@ -21,3 +21,14 @@ name | params | description
 -- | -- | --
 change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
 finish | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | - 
diff --git a/src/count-down/README.md b/src/count-down/README.md
index 12cd2247a..e5ab0e88f 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -47,3 +47,14 @@ external-classes | Array | - | 组件类名，分别用于设置 组件外层类
 -- | -- | --
 change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
 finish | \- | 倒计时结束时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-countdown-bg-color | @error-color-6 | - 
+--td-countdown-default-color | @font-gray-1 | - 
+--td-countdown-round-border-radius | @radius-circle | - 
+--td-countdown-round-color | @font-white-1 | - 
+--td-countdown-square-border-radius | @radius-small | - 
diff --git a/src/date-time-picker/README.en-US.md b/src/date-time-picker/README.en-US.md
index b0214c83e..8e8fb1ebf 100644
--- a/src/date-time-picker/README.en-US.md
+++ b/src/date-time-picker/README.en-US.md
@@ -29,3 +29,10 @@ change | `(value: DateValue)` | \-
 close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
 confirm | `(value: DateValue)` | `1.0.1`
 pick | `(value: DateValue)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-data-time-picker-year-width | 128rpx | - 
diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md
index 5074b9042..b67e38428 100644
--- a/src/date-time-picker/README.md
+++ b/src/date-time-picker/README.md
@@ -73,3 +73,10 @@ change | `(value: DateValue)` | 确认按钮点击时触发
 close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
 confirm | `(value: DateValue)` | `1.0.1`。确认按钮点击时触发
 pick | `(value: DateValue)` | 选中值发生变化时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-data-time-picker-year-width | 128rpx | - 
diff --git a/src/dialog/README.en-US.md b/src/dialog/README.en-US.md
index 2afa1bfe0..315c2b5a3 100644
--- a/src/dialog/README.en-US.md
+++ b/src/dialog/README.en-US.md
@@ -28,3 +28,18 @@ cancel | - | \-
 close | `(trigger: DialogEventSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`<br/>
 confirm | - | \-
 overlay-click | - | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-dialog-body-max-height | 912rpx | - 
+--td-dialog-close-color | @font-gray-3 | - 
+--td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-content-font-size | 32rpx | - 
+--td-dialog-content-line-height | 48rpx | - 
+--td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-font-size | 36rpx | - 
+--td-dialog-title-line-height | 52rpx | - 
+--td-dialog-width | 622rpx | - 
diff --git a/src/dialog/README.md b/src/dialog/README.md
index f0192d42b..3ee841ce1 100644
--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@@ -82,3 +82,18 @@ cancel | - | 如果“取消”按钮存在，则点击“取消”按钮时触
 close | `(trigger: DialogEventSource)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' \| 'overlay' \| 'close-btn'`<br/>
 confirm | - | 如果“确认”按钮存在，则点击“确认”按钮时触发
 overlay-click | - | 如果蒙层存在，点击蒙层时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-dialog-body-max-height | 912rpx | - 
+--td-dialog-close-color | @font-gray-3 | - 
+--td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-content-font-size | 32rpx | - 
+--td-dialog-content-line-height | 48rpx | - 
+--td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-font-size | 36rpx | - 
+--td-dialog-title-line-height | 52rpx | - 
+--td-dialog-width | 622rpx | - 
diff --git a/src/divider/README.en-US.md b/src/divider/README.en-US.md
index 51ac50ed5..9528a70aa 100644
--- a/src/divider/README.en-US.md
+++ b/src/divider/README.en-US.md
@@ -10,3 +10,14 @@ content | String / Slot | - | \- | N
 dashed | Boolean | false | \- | N
 external-classes | Array | - | `['t-class', 't-class-line', 't-class-content']` | N
 layout | String | horizontal | options：horizontal/vertical | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-divider-color | @bg-color-component | - 
+--td-divider-content-color | @font-gray-3 | - 
+--td-divider-content-font-size | 24rpx | - 
+--td-divider-content-line-height | 40rpx | - 
+--td-divider-content-line-style | solid | - 
diff --git a/src/divider/README.md b/src/divider/README.md
index a67dece1b..3588c31cd 100644
--- a/src/divider/README.md
+++ b/src/divider/README.md
@@ -38,3 +38,14 @@ content | String / Slot | - | 子元素 | N
 dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、分隔线类名 等。`['t-class', 't-class-line', 't-class-content']` | N
 layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-divider-color | @bg-color-component | - 
+--td-divider-content-color | @font-gray-3 | - 
+--td-divider-content-font-size | 24rpx | - 
+--td-divider-content-line-height | 40rpx | - 
+--td-divider-content-line-style | solid | - 
diff --git a/src/drawer/README.en-US.md b/src/drawer/README.en-US.md
index 555fff0ee..a610774c0 100644
--- a/src/drawer/README.en-US.md
+++ b/src/drawer/README.en-US.md
@@ -22,3 +22,23 @@ name | params | description
 close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/>
 item-click | `(index: number; item: DrawerItem)` | \-
 overlay-click | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-drawer-bg-color | @bg-color-container | - 
+--td-drawer-border-color | @border-color | - 
+--td-drawer-footer-padding-bottom | 40rpx | - 
+--td-drawer-hover-color | @bg-color-secondarycontainer | - 
+--td-drawer-item-height | 48rpx | - 
+--td-drawer-item-icon-size | 48rpx | - 
+--td-drawer-item-padding | 32rpx | - 
+--td-drawer-sidebar-height | 70vh | - 
+--td-drawer-title-color | --td-drawer-title-color | - 
+--td-drawer-title-color | @drawer-title-color | - 
+--td-drawer-title-color | @font-gray-1 | - 
+--td-drawer-title-font-size | 36rpx | - 
+--td-drawer-title-padding | 48rpx 32rpx 16rpx | - 
+--td-drawer-width | 560rpx | - 
diff --git a/src/drawer/README.md b/src/drawer/README.md
index 2c04c105b..c1ebee773 100644
--- a/src/drawer/README.md
+++ b/src/drawer/README.md
@@ -58,3 +58,23 @@ z-index | Number | 11500 | 抽屉层级，样式默认为 11500 | N
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/drawer/type.ts)。<br/>`type TriggerSource = 'overlay'`<br/>
 item-click | `(index: number; item: DrawerItem)` | 点击抽屉里的列表项
 overlay-click | \- | 如果蒙层存在，点击蒙层时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-drawer-bg-color | @bg-color-container | - 
+--td-drawer-border-color | @border-color | - 
+--td-drawer-footer-padding-bottom | 40rpx | - 
+--td-drawer-hover-color | @bg-color-secondarycontainer | - 
+--td-drawer-item-height | 48rpx | - 
+--td-drawer-item-icon-size | 48rpx | - 
+--td-drawer-item-padding | 32rpx | - 
+--td-drawer-sidebar-height | 70vh | - 
+--td-drawer-title-color | --td-drawer-title-color | - 
+--td-drawer-title-color | @drawer-title-color | - 
+--td-drawer-title-color | @font-gray-1 | - 
+--td-drawer-title-font-size | 36rpx | - 
+--td-drawer-title-padding | 48rpx 32rpx 16rpx | - 
+--td-drawer-width | 560rpx | - 
diff --git a/src/drawer/__test__/index.test.js b/src/drawer/__test__/index.test.js
index 9d08b8fdf..9884b6698 100644
--- a/src/drawer/__test__/index.test.js
+++ b/src/drawer/__test__/index.test.js
@@ -110,7 +110,7 @@ describe('drawer', () => {
       clickItemValue = item;
     };
 
-    it(`: mutiple`, async () => {
+    it(`: multiple`, async () => {
       const id = simulate.load({
         template: `
         <t-drawer
diff --git a/src/dropdown-menu/README.en-US.md b/src/dropdown-menu/README.en-US.md
index 0a2fe7d47..b654234f8 100644
--- a/src/dropdown-menu/README.en-US.md
+++ b/src/dropdown-menu/README.en-US.md
@@ -34,3 +34,23 @@ change | `(value: DropdownValue)` | \-
 confirm | `(value: DropdownValue)` | \-
 reset | \- | \-
 close | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-dropdown-menu-active-colorm | @brand-color | - 
+--td-dropdown-menu-bg-colorm | @bg-color-container | - 
+--td-dropdown-menu-border-width | 1px | - 
+--td-dropdown-menu-colorm | @font-gray-1 | - 
+--td-dropdown-menu-disabled-colorm | @font-gray-4 | - 
+--td-dropdown-menu-font-sizem | 28rpx | - 
+--td-dropdown-menu-icon-sizem | 48rpx | - 
+--td-dropdown-body-max-height | 560rpx | - 
+--td-dropdown-menu-bg-color | @bg-color-container | - 
+--td-tree-bg-color | @bg-color-container | - 
+--td-tree-item-active-color | @brand-color | - 
+--td-tree-item-font-size | 32rpx | - 
+--td-tree-item-height | 96rpx | - 
+--td-tree-root-bg-color | @bg-color-secondarycontainer | - 
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index 92226d873..dee2572fc 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -74,4 +74,23 @@ default-value | String / Number / Array | undefined | 选中值。非受控属
 change | `(value: DropdownValue)` | 值改变时触发
 confirm | `(value: DropdownValue)` | 点击确认时触发
 reset | \- | 点击重置时触发
-close | \- | 关闭时触发
\ No newline at end of file
+close | \- | 关闭时触发
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-dropdown-menu-active-colorm | @brand-color | - 
+--td-dropdown-menu-bg-colorm | @bg-color-container | - 
+--td-dropdown-menu-border-width | 1px | - 
+--td-dropdown-menu-colorm | @font-gray-1 | - 
+--td-dropdown-menu-disabled-colorm | @font-gray-4 | - 
+--td-dropdown-menu-font-sizem | 28rpx | - 
+--td-dropdown-menu-icon-sizem | 48rpx | - 
+--td-dropdown-body-max-height | 560rpx | - 
+--td-dropdown-menu-bg-color | @bg-color-container | - 
+--td-tree-bg-color | @bg-color-container | - 
+--td-tree-item-active-color | @brand-color | - 
+--td-tree-item-font-size | 32rpx | - 
+--td-tree-item-height | 96rpx | - 
+--td-tree-root-bg-color | @bg-color-secondarycontainer | - 
diff --git a/src/empty/README.en-US.md b/src/empty/README.en-US.md
index ef9355212..4444ca388 100644
--- a/src/empty/README.en-US.md
+++ b/src/empty/README.en-US.md
@@ -11,3 +11,15 @@ description | String / Slot | - | \- | N
 external-classes | Array | - | `['t-class', 't-class-description', 't-class-image', 't-class-actions']` | N
 icon | String | - | \- | N
 image | String / Slot | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-empty-action-margin-top | @spacer-4 | - 
+--td-empty-description-color | @font-gray-3 | - 
+--td-empty-description-font-size | @font-size-base | - 
+--td-empty-description-line-height | 44rpx | - 
+--td-empty-description-margin-top | @spacer-2 | - 
+--td-empty-icon-color | @font-gray-3 | - 
diff --git a/src/empty/README.md b/src/empty/README.md
index ba1c06f95..5ba40a262 100644
--- a/src/empty/README.md
+++ b/src/empty/README.md
@@ -44,3 +44,15 @@ description | String / Slot | - | 描述文字 | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-description', 't-class-image', 't-class-actions']` | N
 icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 image | String / Slot | - | 图片地址 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-empty-action-margin-top | @spacer-4 | - 
+--td-empty-description-color | @font-gray-3 | - 
+--td-empty-description-font-size | @font-size-base | - 
+--td-empty-description-line-height | 44rpx | - 
+--td-empty-description-margin-top | @spacer-2 | - 
+--td-empty-icon-color | @font-gray-3 | - 
diff --git a/src/fab/README.en-US.md b/src/fab/README.en-US.md
index d2b3aa716..0b92fb337 100644
--- a/src/fab/README.en-US.md
+++ b/src/fab/README.en-US.md
@@ -15,3 +15,10 @@ text | String | - | \- | N
 name | params | description
 -- | -- | --
 click | `(detail: {e: MouseEvent})` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-fab-shadow | @shadow-2 | - 
diff --git a/src/fab/README.md b/src/fab/README.md
index 57b1860fa..571bc2ac2 100644
--- a/src/fab/README.md
+++ b/src/fab/README.md
@@ -50,3 +50,10 @@ text | String | - | 文本内容 | N
 名称 | 参数 | 描述
 -- | -- | --
 click | `({e: Event})` | 悬浮按钮点击事件
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-fab-shadow | @shadow-2 | - 
diff --git a/src/footer/README.en-US.md b/src/footer/README.en-US.md
index 8063c226c..740bdf734 100644
--- a/src/footer/README.en-US.md
+++ b/src/footer/README.en-US.md
@@ -11,3 +11,24 @@ logo | Object | - | Typescript：`FooterLogo` `interface FooterLogo { icon: stri
 text-link-list | Array | [] | Typescript：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/footer/type.ts) | N
 links | Array | [] | Typescript：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/footer/type.ts) | N
 theme | String | 'text' | options：text/logo | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-footer-link-color | @brand-color | - 
+--td-footer-link-dividing-line-color | @font-gray-3 | - 
+--td-footer-link-dividing-line-padding | @spacer-1 | - 
+--td-footer-link-font-size | @font-size-s | - 
+--td-footer-link-line-height | 40rpx | - 
+--td-footer-logo-icon-height | 48rpx | - 
+--td-footer-logo-icon-margin-right | @spacer | - 
+--td-footer-logo-icon-width | 48rpx | - 
+--td-footer-logo-title-font-size | @font-size-m | - 
+--td-footer-logo-title-line-height | 48rpx | - 
+--td-footer-logo-title-url-width | 256rpx | - 
+--td-footer-text-color | @font-gray-3 | - 
+--td-footer-text-font-size | @font-size-s | - 
+--td-footer-text-line-height | 40rpx | - 
+--td-footer-text-margin-top | 8rpx | - 
diff --git a/src/footer/README.md b/src/footer/README.md
index d2e7c37db..777393125 100644
--- a/src/footer/README.md
+++ b/src/footer/README.md
@@ -46,3 +46,24 @@ logo | Object | - | 图标配置。`logo.icon` 表示图标链接地址，`logo.
 text-link-list | Array | [] | 已废弃。链接列表，type 为`text`生效。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/footer/type.ts) | N
 links| Array | [] | `1.0.0` 链接列表。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式。TS 类型：`Array<LinkObj>` `interface LinkObj { name: string; url?: string; openType?: 'navigate' \| 'redirect' \| 'relaunch' \| 'switchTab' \| 'navigateBack' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/footer/type.ts) | N
 theme | String | 'text' | 已废弃。页脚展示类型。可选项：text/logo | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-footer-link-color | @brand-color | - 
+--td-footer-link-dividing-line-color | @font-gray-3 | - 
+--td-footer-link-dividing-line-padding | @spacer-1 | - 
+--td-footer-link-font-size | @font-size-s | - 
+--td-footer-link-line-height | 40rpx | - 
+--td-footer-logo-icon-height | 48rpx | - 
+--td-footer-logo-icon-margin-right | @spacer | - 
+--td-footer-logo-icon-width | 48rpx | - 
+--td-footer-logo-title-font-size | @font-size-m | - 
+--td-footer-logo-title-line-height | 48rpx | - 
+--td-footer-logo-title-url-width | 256rpx | - 
+--td-footer-text-color | @font-gray-3 | - 
+--td-footer-text-font-size | @font-size-s | - 
+--td-footer-text-line-height | 40rpx | - 
+--td-footer-text-margin-top | 8rpx | - 
diff --git a/src/grid/README.en-US.md b/src/grid/README.en-US.md
index 9ea19668a..81a309fe5 100644
--- a/src/grid/README.en-US.md
+++ b/src/grid/README.en-US.md
@@ -27,3 +27,29 @@ jump-type | String | navigate-to | options：redirect-to/switch-tab/relaunch/nav
 layout | String | vertical | options：vertical/horizontal | N
 text | String / Slot | - | \- | N
 url | String | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-grid-bg-color | @bg-color-container | - 
+--td-grid-card-radius | @radius-large | - 
+--td-grid-item-bg-color | @bg-color-container | - 
+--td-grid-item-description-color | @font-gray-3 | - 
+--td-grid-item-description-font-size | 24rpx | - 
+--td-grid-item-description-line-height | 40rpx | - 
+--td-grid-item-description-padding-top | 8rpx | - 
+--td-grid-item-horizontal-text-description-top | 4rpx | - 
+--td-grid-item-horizontal-text-padding-left | 24rpx | - 
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | - 
+--td-grid-item-image-middle-width | 80rpx | - 
+--td-grid-item-image-small-width | 64rpx | - 
+--td-grid-item-image-width | 96rpx | - 
+--td-grid-item-padding | 32rpx | - 
+--td-grid-item-text-color | @font-gray-1 | - 
+--td-grid-item-text-font-size | 28rpx | - 
+--td-grid-item-text-line-height | 44rpx | - 
+--td-grid-item-text-middle-font-size | 24rpx | - 
+--td-grid-item-text-padding-top | 16rpx | - 
+--td-grid-item-text-small-font-size | 24rpx | - 
diff --git a/src/grid/README.md b/src/grid/README.md
index d9323098e..d59b2585d 100644
--- a/src/grid/README.md
+++ b/src/grid/README.md
@@ -89,3 +89,29 @@ url | String | - | 点击后的跳转链接 | N
 -- | -- | --
 click | \- | 点击子项后触发
 
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-grid-bg-color | @bg-color-container | - 
+--td-grid-card-radius | @radius-large | - 
+--td-grid-item-bg-color | @bg-color-container | - 
+--td-grid-item-description-color | @font-gray-3 | - 
+--td-grid-item-description-font-size | 24rpx | - 
+--td-grid-item-description-line-height | 40rpx | - 
+--td-grid-item-description-padding-top | 8rpx | - 
+--td-grid-item-horizontal-text-description-top | 4rpx | - 
+--td-grid-item-horizontal-text-padding-left | 24rpx | - 
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | - 
+--td-grid-item-image-middle-width | 80rpx | - 
+--td-grid-item-image-small-width | 64rpx | - 
+--td-grid-item-image-width | 96rpx | - 
+--td-grid-item-padding | 32rpx | - 
+--td-grid-item-text-color | @font-gray-1 | - 
+--td-grid-item-text-font-size | 28rpx | - 
+--td-grid-item-text-line-height | 44rpx | - 
+--td-grid-item-text-middle-font-size | 24rpx | - 
+--td-grid-item-text-padding-top | 16rpx | - 
+--td-grid-item-text-small-font-size | 24rpx | - 
diff --git a/src/icon/README.md b/src/icon/README.md
index 1a77bf719..99b8542b0 100644
--- a/src/icon/README.md
+++ b/src/icon/README.md
@@ -21,7 +21,7 @@ isComponent: true
 
 <details>
   <summary>
-    控制台告警：Faild to load font
+    控制台告警：Failed to load font
     <span class="icon">👇</span>
   </summary>
   <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
diff --git a/src/image-viewer/README.en-US.md b/src/image-viewer/README.en-US.md
index b00c9be0e..f625d861e 100644
--- a/src/image-viewer/README.en-US.md
+++ b/src/image-viewer/README.en-US.md
@@ -22,3 +22,16 @@ name | params | description
 change | `(index: Number)` | \-
 close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | \-
 delete | `(index: Number)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-image-viewer-close-margin-left | @spacer-1 | - 
+--td-image-viewer-delete-margin-right | @spacer-1 | - 
+--td-image-viewer-nav-bg-color | @font-gray-3 | - 
+--td-image-viewer-nav-color | @font-white-1 | - 
+--td-image-viewer-nav-height | 96rpx | - 
+--td-image-viewer-nav-index-font-size | @font-size-base | - 
+--td-image-viewer-top | @position-fixed-top | - 
diff --git a/src/image-viewer/README.md b/src/image-viewer/README.md
index f283c2544..7b63b5cb3 100644
--- a/src/image-viewer/README.md
+++ b/src/image-viewer/README.md
@@ -62,3 +62,16 @@ default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 |
 change | `(index: Number)` | 翻页时回调
 close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发
 delete | `(index: Number)` | 点击删除操作按钮时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-image-viewer-close-margin-left | @spacer-1 | - 
+--td-image-viewer-delete-margin-right | @spacer-1 | - 
+--td-image-viewer-nav-bg-color | @font-gray-3 | - 
+--td-image-viewer-nav-color | @font-white-1 | - 
+--td-image-viewer-nav-height | 96rpx | - 
+--td-image-viewer-nav-index-font-size | @font-size-base | - 
+--td-image-viewer-top | @position-fixed-top | - 
diff --git a/src/image/README.en-US.md b/src/image/README.en-US.md
index 599ccbac3..3ffd364c8 100644
--- a/src/image/README.en-US.md
+++ b/src/image/README.en-US.md
@@ -23,3 +23,13 @@ name | params | description
 -- | -- | --
 error | \- | \-
 load | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-image-color | @font-gray-3 | - 
+--td-image-loading-bg-color | @bg-color-secondarycontainer | - 
+--td-image-loading-color | @font-gray-3 | - 
+--td-image-round-radius | @radius-default | - 
diff --git a/src/image/README.md b/src/image/README.md
index 659dbb557..605a1e9ac 100644
--- a/src/image/README.md
+++ b/src/image/README.md
@@ -63,3 +63,13 @@ width | String / Number | - | 宽度，默认单位为`px` | N
 -- | -- | --
 error | \- | 图片加载失败时触发
 load | \- | 图片加载完成时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-image-color | @font-gray-3 | - 
+--td-image-loading-bg-color | @bg-color-secondarycontainer | - 
+--td-image-loading-color | @font-gray-3 | - 
+--td-image-round-radius | @radius-default | - 
diff --git a/src/indexes/README.en-US.md b/src/indexes/README.en-US.md
index 08ceb7943..dbb33e999 100644
--- a/src/indexes/README.en-US.md
+++ b/src/indexes/README.en-US.md
@@ -23,3 +23,28 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 external-classes | Array | - | `['t-class']` | N
 index | String / Number | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-indexes-sidebar-active-bg-color | @brand-color | - 
+--td-indexes-sidebar-active-color | @font-white-1 | - 
+--td-indexes-sidebar-color | @font-gray-1 | - 
+--td-indexes-sidebar-font-size | 24rpx | - 
+--td-indexes-sidebar-item-size | 40rpx | - 
+--td-indexes-sidebar-line-height | 40rpx | - 
+--td-indexes-sidebar-right | 16rpx | - 
+--td-indexes-sidebar-tips-bg-color | @brand-color-light | - 
+--td-indexes-sidebar-tips-color | @brand-color | - 
+--td-indexes-sidebar-tips-font-size | 40rpx | - 
+--td-indexes-sidebar-tips-right | 76rpx | - 
+--td-indexes-sidebar-tips-size | 96rpx | - 
+--td-indexes-anchor-active-bg-color | @bg-color-container | - 
+--td-indexes-anchor-active-color | @brand-color | - 
+--td-indexes-anchor-active-font-weight | 600 | - 
+--td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
+--td-indexes-anchor-color | @font-gray-1 | - 
+--td-indexes-anchor-font-size | 28rpx | - 
+--td-indexes-anchor-line-height | 44rpx | - 
diff --git a/src/indexes/README.md b/src/indexes/README.md
index 0bd7b418e..467121760 100644
--- a/src/indexes/README.md
+++ b/src/indexes/README.md
@@ -60,3 +60,28 @@ select | `(index: string \| number)` | 点击侧边栏时触发事件
 -- | -- | -- | -- | --
 external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class']` | N
 index | String / Number | - | 索引字符 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-indexes-sidebar-active-bg-color | @brand-color | - 
+--td-indexes-sidebar-active-color | @font-white-1 | - 
+--td-indexes-sidebar-color | @font-gray-1 | - 
+--td-indexes-sidebar-font-size | 24rpx | - 
+--td-indexes-sidebar-item-size | 40rpx | - 
+--td-indexes-sidebar-line-height | 40rpx | - 
+--td-indexes-sidebar-right | 16rpx | - 
+--td-indexes-sidebar-tips-bg-color | @brand-color-light | - 
+--td-indexes-sidebar-tips-color | @brand-color | - 
+--td-indexes-sidebar-tips-font-size | 40rpx | - 
+--td-indexes-sidebar-tips-right | 76rpx | - 
+--td-indexes-sidebar-tips-size | 96rpx | - 
+--td-indexes-anchor-active-bg-color | @bg-color-container | - 
+--td-indexes-anchor-active-color | @brand-color | - 
+--td-indexes-anchor-active-font-weight | 600 | - 
+--td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
+--td-indexes-anchor-color | @font-gray-1 | - 
+--td-indexes-anchor-font-size | 28rpx | - 
+--td-indexes-anchor-line-height | 44rpx | - 
diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md
index ba2161fb8..4c2f3645f 100644
--- a/src/input/README.en-US.md
+++ b/src/input/README.en-US.md
@@ -58,3 +58,29 @@ clear | \- | \-
 enter | `(value: InputValue)` | \-
 focus | `(value: InputValue)` | \-
 keyboardheightchange | `(height: number, duration: number)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-input-bg-color | @bg-color-container | - 
+--td-input-border-color | @component-stroke | - 
+--td-input-border-left-space | 32rpx | - 
+--td-input-border-radius | @radius-default | - 
+--td-input-border-right-space | 0 | - 
+--td-input-default-text-color | @font-gray-1 | - 
+--td-input-default-tips-color | @font-gray-3 | - 
+--td-input-disabled-text-color | @text-color-disabled | - 
+--td-input-error-text-color | @error-color | - 
+--td-input-error-tips-color | @error-color | - 
+--td-input-label-text-color | @font-gray-1 | - 
+--td-input-placeholder-text-color | @text-color-placeholder | - 
+--td-input-prefix-icon-color | @font-gray-1 | - 
+--td-input-success-text-color | @success-color | - 
+--td-input-success-tips-color | @success-color | - 
+--td-input-suffix-icon-color | @font-gray-3 | - 
+--td-input-suffix-text-color | @font-gray-1 | - 
+--td-input-vertical-padding | 32rpx | - 
+--td-input-warning-text-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | - 
diff --git a/src/input/README.md b/src/input/README.md
index c91ade1a6..7e89cca14 100644
--- a/src/input/README.md
+++ b/src/input/README.md
@@ -133,3 +133,29 @@ focus | `(value: InputValue)` | 获得焦点时触发
 keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
 nicknamereview | `(pass: boolean, timeout: boolean)`| 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效
 click `v0.32.0`| `(trigger: InputTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。<br/>`type InputTrigger = 'suffix' \| 'suffix-icon';`<br/>
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-input-bg-color | @bg-color-container | - 
+--td-input-border-color | @component-stroke | - 
+--td-input-border-left-space | 32rpx | - 
+--td-input-border-radius | @radius-default | - 
+--td-input-border-right-space | 0 | - 
+--td-input-default-text-color | @font-gray-1 | - 
+--td-input-default-tips-color | @font-gray-3 | - 
+--td-input-disabled-text-color | @text-color-disabled | - 
+--td-input-error-text-color | @error-color | - 
+--td-input-error-tips-color | @error-color | - 
+--td-input-label-text-color | @font-gray-1 | - 
+--td-input-placeholder-text-color | @text-color-placeholder | - 
+--td-input-prefix-icon-color | @font-gray-1 | - 
+--td-input-success-text-color | @success-color | - 
+--td-input-success-tips-color | @success-color | - 
+--td-input-suffix-icon-color | @font-gray-3 | - 
+--td-input-suffix-text-color | @font-gray-1 | - 
+--td-input-vertical-padding | 32rpx | - 
+--td-input-warning-text-color | @warning-color | - 
+--td-input-warning-tips-color | @warning-color | - 
diff --git a/src/link/README.en-US.md b/src/link/README.en-US.md
index 3b01055b4..7ab37a553 100644
--- a/src/link/README.en-US.md
+++ b/src/link/README.en-US.md
@@ -23,3 +23,24 @@ name | params | description
 complete | \- | \-
 fail | \- | \-
 success | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-link-danger-active-color | @error-color-active | - 
+--td-link-danger-color | @error-color | - 
+--td-link-danger-disabled-color | @error-color-disabled | - 
+--td-link-default-active-color | @brand-color-active | - 
+--td-link-default-color | @font-gray-1 | - 
+--td-link-default-disabled-color | @text-color-disabled | - 
+--td-link-primary-active-color | @brand-color-active | - 
+--td-link-primary-color | @brand-color | - 
+--td-link-primary-disabled-color | @brand-color-disabled | - 
+--td-link-success-active-color | @success-color-active | - 
+--td-link-success-color | @success-color | - 
+--td-link-success-disabled-color | @success-color-disabled | - 
+--td-link-warning-active-color | @warning-color-active | - 
+--td-link-warning-color | @warning-color | - 
+--td-link-warning-disabled-color | @warning-color-disabled | - 
diff --git a/src/link/README.md b/src/link/README.md
index 0a279a704..51843ca1f 100644
--- a/src/link/README.md
+++ b/src/link/README.md
@@ -81,3 +81,24 @@ external-classes | Array | - | 样式类名。`['t-class', 't-class-hover', 't-c
 complete | \- | 页面链接执行完成后触发（失败或成功均会触发）
 fail | \- | 页面链接跳转失败后触发
 success | \- | 页面链接跳转成功后触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-link-danger-active-color | @error-color-active | - 
+--td-link-danger-color | @error-color | - 
+--td-link-danger-disabled-color | @error-color-disabled | - 
+--td-link-default-active-color | @brand-color-active | - 
+--td-link-default-color | @font-gray-1 | - 
+--td-link-default-disabled-color | @text-color-disabled | - 
+--td-link-primary-active-color | @brand-color-active | - 
+--td-link-primary-color | @brand-color | - 
+--td-link-primary-disabled-color | @brand-color-disabled | - 
+--td-link-success-active-color | @success-color-active | - 
+--td-link-success-color | @success-color | - 
+--td-link-success-disabled-color | @success-color-disabled | - 
+--td-link-warning-active-color | @warning-color-active | - 
+--td-link-warning-color | @warning-color | - 
+--td-link-warning-disabled-color | @warning-color-disabled | - 
diff --git a/src/loading/README.en-US.md b/src/loading/README.en-US.md
index 345bd0b85..1af7609f7 100644
--- a/src/loading/README.en-US.md
+++ b/src/loading/README.en-US.md
@@ -18,3 +18,12 @@ reverse | Boolean | - | \- | N
 size | String | '40rpx' | \- | N
 text | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 theme | String | circular | options：circular/spinner/dots | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-loading-color | @brand-color | - 
+--td-loading-text-font-size | 24rpx | - 
+--td-loading-text-line-height | 40rpx | - 
diff --git a/src/loading/README.md b/src/loading/README.md
index e1a530f96..433f47602 100644
--- a/src/loading/README.md
+++ b/src/loading/README.md
@@ -68,3 +68,12 @@ reverse | Boolean | - | 加载动画是否反向 | N
 size | String | '40rpx' | 尺寸，示例：40rpx/20px | N
 text | String / Slot | - | 加载提示文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 theme | String | circular | 加载组件类型。可选项：circular/spinner/dots | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-loading-color | @brand-color | - 
+--td-loading-text-font-size | 24rpx | - 
+--td-loading-text-line-height | 40rpx | - 
diff --git a/src/message/README.en-US.md b/src/message/README.en-US.md
index dd3225a21..3638ab1f6 100644
--- a/src/message/README.en-US.md
+++ b/src/message/README.en-US.md
@@ -27,3 +27,18 @@ action-btn-click | - | \-
 close-btn-click | - | \-
 duration-end | \- | \-
 link-click | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-message-bg-color | @bg-color-container | - 
+--td-message-border-radius | @radius-default | - 
+--td-message-box-shadow | @shadow-4 | - 
+--td-message-close-icon-color | @font-gray-3 | - 
+--td-message-content-font-color | @font-gray-1 | - 
+--td-message-error-color | @error-color | - 
+--td-message-info-color | @brand-color | - 
+--td-message-success-color | @success-color | - 
+--td-message-warning-color | @warning-color | - 
diff --git a/src/message/README.md b/src/message/README.md
index 4660f7a56..1a556c35a 100644
--- a/src/message/README.md
+++ b/src/message/README.md
@@ -67,3 +67,18 @@ action-btn-click | - | 已废弃。当操作按钮存在时，用户点击操作
 close-btn-click | - | 当关闭按钮存在时，用户点击关闭按钮触发
 duration-end | \- | 计时结束后触发
 link-click | - | 当`link`链接存在时，点击链接文本时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-message-bg-color | @bg-color-container | - 
+--td-message-border-radius | @radius-default | - 
+--td-message-box-shadow | @shadow-4 | - 
+--td-message-close-icon-color | @font-gray-3 | - 
+--td-message-content-font-color | @font-gray-1 | - 
+--td-message-error-color | @error-color | - 
+--td-message-info-color | @brand-color | - 
+--td-message-success-color | @success-color | - 
+--td-message-warning-color | @warning-color | - 
diff --git a/src/message/message.ts b/src/message/message.ts
index 27b0cf4a7..c1e23b540 100644
--- a/src/message/message.ts
+++ b/src/message/message.ts
@@ -89,19 +89,19 @@ export default class Message extends SuperComponent {
   });
 
   ready() {
-    this.memoInitalData();
+    this.memoInitialData();
   }
 
   /** 记录组件设置的项目 */
-  memoInitalData() {
-    this.initalData = {
+  memoInitialData() {
+    this.initialData = {
       ...this.properties,
       ...this.data,
     };
   }
 
   resetData(cb: () => void) {
-    this.setData({ ...this.initalData }, cb);
+    this.setData({ ...this.initialData }, cb);
   }
 
   detached() {
diff --git a/src/navbar/README.en-US.md b/src/navbar/README.en-US.md
index dccf25e52..0441963c1 100644
--- a/src/navbar/README.en-US.md
+++ b/src/navbar/README.en-US.md
@@ -24,3 +24,19 @@ complete | \- | \-
 fail | \- | \-
 go-back | \- | \-
 success | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-navbar-bg-color | @bg-color-container | - 
+--td-navbar-capsule-border-color | #e3e6ea | - 
+--td-navbar-capsule-border-radius | 32rpx | - 
+--td-navbar-capsule-height | 64rpx | - 
+--td-navbar-capsule-width | 176rpx | - 
+--td-navbar-color | @font-gray-1 | - 
+--td-navbar-height | 96rpx | - 
+--td-navbar-left-arrow-size | 48rpx | - 
+--td-navbar-title-font-size | 36rpx | - 
+--td-navbar-title-font-weight | 600 | - 
diff --git a/src/navbar/README.md b/src/navbar/README.md
index 793fae08e..109b3c5ea 100644
--- a/src/navbar/README.md
+++ b/src/navbar/README.md
@@ -66,3 +66,19 @@ complete | \- | navigateBack 执行完成后触发（失败或成功均会触发
 fail | \- | navigateBack 执行失败后触发
 go-back | \- | 点击左侧箭头时触发
 success | \- | navigateBack 执行成功后触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-navbar-bg-color | @bg-color-container | - 
+--td-navbar-capsule-border-color | #e3e6ea | - 
+--td-navbar-capsule-border-radius | 32rpx | - 
+--td-navbar-capsule-height | 64rpx | - 
+--td-navbar-capsule-width | 176rpx | - 
+--td-navbar-color | @font-gray-1 | - 
+--td-navbar-height | 96rpx | - 
+--td-navbar-left-arrow-size | 48rpx | - 
+--td-navbar-title-font-size | 36rpx | - 
+--td-navbar-title-font-weight | 600 | - 
diff --git a/src/notice-bar/README.en-US.md b/src/notice-bar/README.en-US.md
index b3efc1062..ef2cd4e29 100644
--- a/src/notice-bar/README.en-US.md
+++ b/src/notice-bar/README.en-US.md
@@ -22,3 +22,20 @@ default-visible | Boolean | false | uncontrolled property | N
 name | params | description
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color-6 | - 
+--td-notice-bar-font-color | @font-gray-1 | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @font-gray-3 | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | - 
diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
index e6d6726ad..50acca65b 100644
--- a/src/notice-bar/README.md
+++ b/src/notice-bar/README.md
@@ -87,3 +87,20 @@ default-visible | Boolean | false | 显示/隐藏。非受控属性 | N
 名称 | 参数 | 描述
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color-6 | - 
+--td-notice-bar-font-color | @font-gray-1 | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @font-gray-3 | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | - 
diff --git a/src/overlay/README.en-US.md b/src/overlay/README.en-US.md
new file mode 100644
index 000000000..f8251c5c1
--- /dev/null
+++ b/src/overlay/README.en-US.md
@@ -0,0 +1,8 @@
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-overlay-bg-color | @font-gray-2 | - 
+--td-overlay-transition-duration | 300ms | - 
diff --git a/src/overlay/README.md b/src/overlay/README.md
index 8170e5c6a..bfc25d310 100644
--- a/src/overlay/README.md
+++ b/src/overlay/README.md
@@ -47,3 +47,11 @@ preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击
 名称 | 参数 | 描述
 -- | -- | --
 click | `({ visible: boolean })` | 点击遮罩时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-overlay-bg-color | @font-gray-2 | - 
+--td-overlay-transition-duration | 300ms | - 
diff --git a/src/picker/README.en-US.md b/src/picker/README.en-US.md
index 6558677e6..c9e05f428 100644
--- a/src/picker/README.en-US.md
+++ b/src/picker/README.en-US.md
@@ -31,3 +31,28 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 format | Function | - | Typescript：`(option: PickerItemOption) => string` | N
 options | Array | [] | Typescript：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-picker-group-height | 400rpx | - 
+--td-picker-bg-color | @bg-color-container | - 
+--td-picker-border-radius | 24rpx | - 
+--td-picker-button-font-size | 32rpx | - 
+--td-picker-cancel-color | @font-gray-2 | - 
+--td-picker-confirm-color | @brand-color | - 
+--td-picker-indicator-bg-color | @bg-color-secondarycontainer | - 
+--td-picker-indicator-border-radius | 12rpx | - 
+--td-picker-mask-color-bottom | hsla(0, 0%, 100%, 0.4) | - 
+--td-picker-mask-color-top | hsla(0, 0%, 100%, 0.92) | - 
+--td-picker-title-color | @font-gray-1 | - 
+--td-picker-title-font-size | 36rpx | - 
+--td-picker-title-font-weight | 600 | - 
+--td-picker-title-line-height | 52rpx | - 
+--td-picker-toolbar-height | 116rpx | - 
+--td-picker-item-active-color | @font-gray-1 | - 
+--td-picker-item-color | @font-gray-2 | - 
+--td-picker-item-height | 80rpx | - 
+
diff --git a/src/picker/README.md b/src/picker/README.md
index 850f8a4fb..08db314bc 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -71,3 +71,27 @@ pick | `(value: Array<PickerValue>, label: string, column: number, index: number
 -- | -- | -- | -- | --
 format | Function | - | 格式化标签。TS 类型：`(option: PickerItemOption) => string` | N
 options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-picker-group-height | 400rpx | - 
+--td-picker-bg-color | @bg-color-container | - 
+--td-picker-border-radius | 24rpx | - 
+--td-picker-button-font-size | 32rpx | - 
+--td-picker-cancel-color | @font-gray-2 | - 
+--td-picker-confirm-color | @brand-color | - 
+--td-picker-indicator-bg-color | @bg-color-secondarycontainer | - 
+--td-picker-indicator-border-radius | 12rpx | - 
+--td-picker-mask-color-bottom | hsla(0, 0%, 100%, 0.4) | - 
+--td-picker-mask-color-top | hsla(0, 0%, 100%, 0.92) | - 
+--td-picker-title-color | @font-gray-1 | - 
+--td-picker-title-font-size | 36rpx | - 
+--td-picker-title-font-weight | 600 | - 
+--td-picker-title-line-height | 52rpx | - 
+--td-picker-toolbar-height | 116rpx | - 
+--td-picker-item-active-color | @font-gray-1 | - 
+--td-picker-item-color | @font-gray-2 | - 
+--td-picker-item-height | 80rpx | - 
diff --git a/src/popup/README.en-US.md b/src/popup/README.en-US.md
index 3aa395d98..9bee33ac9 100644
--- a/src/popup/README.en-US.md
+++ b/src/popup/README.en-US.md
@@ -23,3 +23,11 @@ z-index | Number | 11500 | \- | N
 name | params | description
 -- | -- | --
 visible-change | `(visible: boolean, trigger: PopupSource) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | - 
+--td-popup-border-radius | @radius-default | - 
diff --git a/src/popup/README.md b/src/popup/README.md
index 620c7f789..8008f5bb8 100644
--- a/src/popup/README.md
+++ b/src/popup/README.md
@@ -55,3 +55,11 @@ z-index | Number | 11500 | 组件层级，Web 侧样式默认为 5500，移动
 名称 | 参数 | 描述
 -- | -- | --
 visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | - 
+--td-popup-border-radius | @radius-default | - 
diff --git a/src/progress/README.en-US.md b/src/progress/README.en-US.md
index c4b14b809..5b9a9b7d3 100644
--- a/src/progress/README.en-US.md
+++ b/src/progress/README.en-US.md
@@ -13,3 +13,12 @@ status | String | - | options：success/error/warning/active。Typescript：`Sta
 stroke-width | String / Number | - | \- | N
 theme | String | line | options：line/plump/circle。Typescript：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
 track-color | String | '' | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-progress-circle-inner-bg-color | @font-white-1 | - 
+--td-progress-inner-bg-color | @brand-color | - 
+--td-progress-track-bg-color | @bg-color-component | - 
diff --git a/src/progress/README.md b/src/progress/README.md
index a95554dca..d4fc00203 100644
--- a/src/progress/README.md
+++ b/src/progress/README.md
@@ -69,3 +69,12 @@ status | String | - | 进度条状态。可选项：success/error/warning/active
 stroke-width | String / Number | - | 进度条线宽，默认单位 `px`。| N
 theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
 track-color | String | '' | 进度条未完成部分颜色 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-progress-circle-inner-bg-color | @font-white-1 | - 
+--td-progress-inner-bg-color | @brand-color | - 
+--td-progress-track-bg-color | @bg-color-component | - 
diff --git a/src/pull-down-refresh/README.en-US.md b/src/pull-down-refresh/README.en-US.md
index fdabceef4..8fa3ab3b9 100644
--- a/src/pull-down-refresh/README.en-US.md
+++ b/src/pull-down-refresh/README.en-US.md
@@ -27,3 +27,10 @@ name | params | description
 change | `(value: boolean)` | \-
 refresh | \- | \-
 timeout | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-pull-down-refresh-color | @font-gray-3 | - 
diff --git a/src/pull-down-refresh/README.md b/src/pull-down-refresh/README.md
index 2b9bf075a..bfbae3085 100644
--- a/src/pull-down-refresh/README.md
+++ b/src/pull-down-refresh/README.md
@@ -55,3 +55,10 @@ default-value | Boolean | undefined | 组件状态，值为 `true` 表示下拉
 change | `(value: boolean)` | 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
 refresh | \- | 结束下拉时触发
 timeout | \- | 刷新超时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-pull-down-refresh-color | @font-gray-3 | - 
diff --git a/src/radio/README.en-US.md b/src/radio/README.en-US.md
index c3cb732bc..6f49f9e21 100644
--- a/src/radio/README.en-US.md
+++ b/src/radio/README.en-US.md
@@ -46,3 +46,27 @@ default-value | String / Number / Boolean | undefined | uncontrolled property。
 name | params | description
 -- | -- | --
 change | `(value: T)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-radio-bg-color | @bg-color-container | - 
+--td-radio-border-color | @component-stroke | - 
+--td-radio-content-checked-color | @font-gray-2 | - 
+--td-radio-content-color | @font-gray-2 | - 
+--td-radio-content-disabled-color | @font-gray-4 | - 
+--td-radio-content-font-size | 28rpx | - 
+--td-radio-content-line-height | 44rpx | - 
+--td-radio-font-size | 32rpx | - 
+--td-radio-icon-checked-color | @brand-color | - 
+--td-radio-icon-color | @component-border | - 
+--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-radio-icon-disabled-color | @brand-color-disabled | - 
+--td-radio-icon-size | 48rpx | - 
+--td-radio-label-checked-color | @font-gray-1 | - 
+--td-radio-label-color | @font-gray-1 | - 
+--td-radio-label-disabled-color | @font-gray-4 | - 
+--td-radio-label-line-height | 48rpx | - 
+--td-radio-vertical-padding | 32rpx | - 
diff --git a/src/radio/README.md b/src/radio/README.md
index 068dcbe4b..c53639761 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -93,3 +93,27 @@ default-value | String / Number / Boolean | undefined | 选中的值。非受控
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: RadioValue)` | 选中值发生变化时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-radio-bg-color | @bg-color-container | - 
+--td-radio-border-color | @component-stroke | - 
+--td-radio-content-checked-color | @font-gray-2 | - 
+--td-radio-content-color | @font-gray-2 | - 
+--td-radio-content-disabled-color | @font-gray-4 | - 
+--td-radio-content-font-size | 28rpx | - 
+--td-radio-content-line-height | 44rpx | - 
+--td-radio-font-size | 32rpx | - 
+--td-radio-icon-checked-color | @brand-color | - 
+--td-radio-icon-color | @component-border | - 
+--td-radio-icon-disabled-bg-color | @bg-color-component-disabled | - 
+--td-radio-icon-disabled-color | @brand-color-disabled | - 
+--td-radio-icon-size | 48rpx | - 
+--td-radio-label-checked-color | @font-gray-1 | - 
+--td-radio-label-color | @font-gray-1 | - 
+--td-radio-label-disabled-color | @font-gray-4 | - 
+--td-radio-label-line-height | 48rpx | - 
+--td-radio-vertical-padding | 32rpx | - 
diff --git a/src/rate/README.en-US.md b/src/rate/README.en-US.md
index 0753221e5..98e4d73a7 100644
--- a/src/rate/README.en-US.md
+++ b/src/rate/README.en-US.md
@@ -24,3 +24,16 @@ variant | String | outline | options：outline/filled | N
 name | params | description
 -- | -- | --
 change | `(value: number)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | - 
+--td-rate-selected-color | @warning-color | - 
+--td-rate-text-active-color | @font-gray-1 | - 
+--td-rate-text-active-font-weight | 600 | - 
+--td-rate-text-color | @font-gray-4 | - 
+--td-rate-text-font-size | @font-size-m | - 
+--td-rate-unselected-color | @bg-color-secondarycomponent | - 
diff --git a/src/rate/README.md b/src/rate/README.md
index de4e72dd7..aab386c38 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -83,3 +83,16 @@ variant | String | outline | 废弃。形状类型，有描边类型和填充类
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: number)` | 评分数改变时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | - 
+--td-rate-selected-color | @warning-color | - 
+--td-rate-text-active-color | @font-gray-1 | - 
+--td-rate-text-active-font-weight | 600 | - 
+--td-rate-text-color | @font-gray-4 | - 
+--td-rate-text-font-size | @font-size-m | - 
+--td-rate-unselected-color | @bg-color-secondarycomponent | - 
diff --git a/src/result/README.en-US.md b/src/result/README.en-US.md
index 813f4d196..aeac0d1b0 100644
--- a/src/result/README.en-US.md
+++ b/src/result/README.en-US.md
@@ -12,3 +12,21 @@ icon | String | - | \- | N
 image | String / Slot | - | \- | N
 theme | String | default | \- | N
 title | String / Slot | '' | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-result-description-color | @font-gray-2 | - 
+--td-result-description-font-size | @font-size-base | - 
+--td-result-description-line-height | 44rpx | - 
+--td-result-description-margin-top | @spacer | - 
+--td-result-icon-default-color | @brand-color | - 
+--td-result-icon-error-color | @error-color | - 
+--td-result-icon-success-color | @success-color | - 
+--td-result-icon-warning-color | @warning-color | - 
+--td-result-title-color | @font-gray-1 | - 
+--td-result-title-font-size | @font-size-l | - 
+--td-result-title-line-height | 56rpx | - 
+--td-result-title-margin-top | @spacer-1 | - 
diff --git a/src/result/README.md b/src/result/README.md
index e590f1b6c..ea8ab00c5 100644
--- a/src/result/README.md
+++ b/src/result/README.md
@@ -63,3 +63,21 @@ icon | String / Boolean / Object | true | 图标名称。值为字符串表示
 image | String / Slot | - | 图片地址 | N
 theme | String | default | 内置主题。可选项：default/success/warning/error | N
 title | String / Slot | '' | 标题 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-result-description-color | @font-gray-2 | - 
+--td-result-description-font-size | @font-size-base | - 
+--td-result-description-line-height | 44rpx | - 
+--td-result-description-margin-top | @spacer | - 
+--td-result-icon-default-color | @brand-color | - 
+--td-result-icon-error-color | @error-color | - 
+--td-result-icon-success-color | @success-color | - 
+--td-result-icon-warning-color | @warning-color | - 
+--td-result-title-color | @font-gray-1 | - 
+--td-result-title-font-size | @font-size-l | - 
+--td-result-title-line-height | 56rpx | - 
+--td-result-title-margin-top | @spacer-1 | - 
diff --git a/src/search/README.en-US.md b/src/search/README.en-US.md
new file mode 100644
index 000000000..4517dc836
--- /dev/null
+++ b/src/search/README.en-US.md
@@ -0,0 +1,17 @@
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-search-action-color | @brand-color | - 
+--td-search-bg-color | @bg-color-secondarycontainer | - 
+--td-search-clear-icon-color | @font-gray-3 | - 
+--td-search-font-size | @font-size-m | - 
+--td-search-height | 80rpx | - 
+--td-search-icon-color | @font-gray-3 | - 
+--td-search-label-color | @font-gray-1 | - 
+--td-search-padding | 16rpx 24rpx | - 
+--td-search-placeholder-color | @font-gray-3 | - 
+--td-search-square-radius | @radius-default | - 
+--td-search-text-color | @font-gray-1 | - 
diff --git a/src/search/README.md b/src/search/README.md
index 016b89c7e..e7ac73874 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -70,3 +70,20 @@ change | `({ value: string })` | 值发生变化时触发
 clear | `({ value: string })` | 点击清除时触发
 focus | `({ value: string })` | 聚焦时触发
 submit | `({ value: string })` | 提交时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-search-action-color | @brand-color | - 
+--td-search-bg-color | @bg-color-secondarycontainer | - 
+--td-search-clear-icon-color | @font-gray-3 | - 
+--td-search-font-size | @font-size-m | - 
+--td-search-height | 80rpx | - 
+--td-search-icon-color | @font-gray-3 | - 
+--td-search-label-color | @font-gray-1 | - 
+--td-search-padding | 16rpx 24rpx | - 
+--td-search-placeholder-color | @font-gray-3 | - 
+--td-search-square-radius | @radius-default | - 
+--td-search-text-color | @font-gray-1 | - 
diff --git a/src/search/search.less b/src/search/search.less
index a06f9be03..a1c246f63 100644
--- a/src/search/search.less
+++ b/src/search/search.less
@@ -2,7 +2,7 @@
 
 @search-bg-color: var(--td-search-bg-color, @bg-color-secondarycontainer);
 @search-text-color: var(--td-search-text-color, @font-gray-1);
-@search-label-color: var(--search-label-color, @font-gray-1);
+@search-label-color: var(--td-search-label-color, @font-gray-1);
 @search-font-size: var(--td-search-font-size, @font-size-m);
 @search-height: var(--td-search-height, 80rpx);
 @search-padding: var(--td-search-padding, 16rpx 24rpx);
diff --git a/src/side-bar/README.en-US.md b/src/side-bar/README.en-US.md
index 46109c926..ac085f204 100644
--- a/src/side-bar/README.en-US.md
+++ b/src/side-bar/README.en-US.md
@@ -24,3 +24,21 @@ disabled | Boolean | false | \- | N
 icon | String / Object | - | `1.0.0-rc.1` | N
 label | String | - | \- | N
 value | String / Number | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-height | 100% | - 
+--td-side-bar-width | 206rpx | - 
+--td-side-bar-active-color | @brand-color | - 
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-border-radius | 18rpx | - 
+--td-side-bar-color | @font-gray-1 | - 
+--td-side-bar-disabled-color | @font-gray-4 | - 
+--td-side-bar-font-size | 32rpx | - 
+--td-side-bar-icon-size | 40rpx | - 
+--td-side-bar-item-height | 112rpx | - 
+--td-side-bar-item-line-height | 48rpx | - 
diff --git a/src/side-bar/README.md b/src/side-bar/README.md
index ef1068121..fbcdd2640 100644
--- a/src/side-bar/README.md
+++ b/src/side-bar/README.md
@@ -67,3 +67,21 @@ disabled | Boolean | false | 是否禁用 | N
 icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
 label | String | - | 展示的标签 | N
 value | String / Number | - | 当前选项的值 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-height | 100% | - 
+--td-side-bar-width | 206rpx | - 
+--td-side-bar-active-color | @brand-color | - 
+--td-side-bar-bg-color | @bg-color-secondarycontainer | - 
+--td-side-bar-border-radius | 18rpx | - 
+--td-side-bar-color | @font-gray-1 | - 
+--td-side-bar-disabled-color | @font-gray-4 | - 
+--td-side-bar-font-size | 32rpx | - 
+--td-side-bar-icon-size | 40rpx | - 
+--td-side-bar-item-height | 112rpx | - 
+--td-side-bar-item-line-height | 48rpx | - 
diff --git a/src/skeleton/README.en-US.md b/src/skeleton/README.en-US.md
index 34a75922b..58d91038e 100644
--- a/src/skeleton/README.en-US.md
+++ b/src/skeleton/README.en-US.md
@@ -11,3 +11,19 @@ external-classes | Array | - | `['t-class', 't-class-avatar', 't-class-image', '
 loading | Boolean | true | \- | N
 row-col | Array | [1, 1, 1, { width: '70%' }] | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | options：avatar/image/text/paragraph | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-skeleton-animation-flashed | rgba(90%, 90%, 90%, 0.3) | - 
+--td-skeleton-animation-gradient | rgba(0, 0, 0, 4%) | - 
+--td-skeleton-bg-color | @bg-color-page | - 
+--td-skeleton-circle-border-radius | @radius-circle | - 
+--td-skeleton-circle-height | 96rpx | - 
+--td-skeleton-rect-border-radius | @radius-default | - 
+--td-skeleton-rect-height | 32rpx | - 
+--td-skeleton-row-spacing | @spacer-2 | - 
+--td-skeleton-text-border-radius | @radius-small | - 
+--td-skeleton-text-height | 32rpx | - 
diff --git a/src/skeleton/README.md b/src/skeleton/README.md
index e426de4ef..751c560bc 100644
--- a/src/skeleton/README.md
+++ b/src/skeleton/README.md
@@ -53,3 +53,19 @@ external-classes | Array | - | 组件类名，分别用于设置组件外层元
 loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
 row-col | Array | [1, 1, 1, { width: '70%' }] | 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-skeleton-animation-flashed | rgba(90%, 90%, 90%, 0.3) | - 
+--td-skeleton-animation-gradient | rgba(0, 0, 0, 4%) | - 
+--td-skeleton-bg-color | @bg-color-page | - 
+--td-skeleton-circle-border-radius | @radius-circle | - 
+--td-skeleton-circle-height | 96rpx | - 
+--td-skeleton-rect-border-radius | @radius-default | - 
+--td-skeleton-rect-height | 32rpx | - 
+--td-skeleton-row-spacing | @spacer-2 | - 
+--td-skeleton-text-border-radius | @radius-small | - 
+--td-skeleton-text-height | 32rpx | - 
diff --git a/src/slider/README.en-US.md b/src/slider/README.en-US.md
index 5723aeef9..15b8ae2f8 100644
--- a/src/slider/README.en-US.md
+++ b/src/slider/README.en-US.md
@@ -27,3 +27,21 @@ name | params | description
 change | `(value: SliderValue)` | \-
 dragend | \- | \-
 dragstart | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-slider-active-color | @brand-color | - 
+--td-slider-bar-height | 8rpx | - 
+--td-slider-capsule-bar-color | @bg-color-component | - 
+--td-slider-capsule-bar-heihgt | 48rpx | - 
+--td-slider-capsule-line-heihgt | 36rpx | - 
+--td-slider-default-color | @bg-color-component-disabled | - 
+--td-slider-default-color | @bg-color-secondarycomponent | - 
+--td-slider-disabled-color | @brand-color-disabled | - 
+--td-slider-disabled-text-color | @font-gray-4 | - 
+--td-slider-dot-bg-color | @bg-color-container | - 
+--td-slider-dot-color | @bg-color-secondarycontainer | - 
+--td-slider-dot-size | 40rpx | - 
diff --git a/src/slider/README.md b/src/slider/README.md
index 8fdf12a62..22b74830e 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -91,3 +91,21 @@ const $slider = this.selectComponent('#slider');
 
 $slider.init();
 ```
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-slider-active-color | @brand-color | - 
+--td-slider-bar-height | 8rpx | - 
+--td-slider-capsule-bar-color | @bg-color-component | - 
+--td-slider-capsule-bar-heihgt | 48rpx | - 
+--td-slider-capsule-line-heihgt | 36rpx | - 
+--td-slider-default-color | @bg-color-component-disabled | - 
+--td-slider-default-color | @bg-color-secondarycomponent | - 
+--td-slider-disabled-color | @brand-color-disabled | - 
+--td-slider-disabled-text-color | @font-gray-4 | - 
+--td-slider-dot-bg-color | @bg-color-container | - 
+--td-slider-dot-color | @bg-color-secondarycontainer | - 
+--td-slider-dot-size | 40rpx | - 
diff --git a/src/step-item/step-item.less b/src/step-item/step-item.less
index 2bf45dd86..8e9b1f87a 100644
--- a/src/step-item/step-item.less
+++ b/src/step-item/step-item.less
@@ -3,7 +3,7 @@
 @step-item-dot-size: var(--td-step-item-dot-size, 16rpx);
 @step-item-circle-size: var(--td-step-item-circle-size, 44rpx);
 @step-item-circle-font-size: var(--td-step-item-circle-font-size, 28rpx);
-@step-item-descrition-color: var(--td-step-item-descrition-color, @font-gray-3);
+@step-item-description-color: var(--td-step-item-description-color, @font-gray-3);
 
 @step-item-default-circle-bg: var(--td-step-item-default-circle-bg, @bg-color-secondarycontainer);
 @step-item-default-circle-color: var(--td-step-item-default-circle-color, @font-gray-3);
@@ -167,7 +167,7 @@
   }
 
   &__description {
-    color: @step-item-descrition-color;
+    color: @step-item-description-color;
     line-height: 40rpx;
     font-size: @font-size-s;
 
diff --git a/src/stepper/README.en-US.md b/src/stepper/README.en-US.md
index 1529485d1..0bb00a4ad 100644
--- a/src/stepper/README.en-US.md
+++ b/src/stepper/README.en-US.md
@@ -24,3 +24,13 @@ name | params | description
 blur | `({ type: string \| number })` | \-
 change | `({ value: string \| number })` | \-
 overlimit | `({type: 'minus' \| 'plus'})` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-stepper-border-color | @component-border | - 
+--td-stepper-border-radius | @radius-small | - 
+--td-stepper-input-color | @font-gray-1 | - 
+--td-stepper-input-disabled-color | @font-gray-4 | - 
diff --git a/src/stepper/README.md b/src/stepper/README.md
index 903d9c0b2..fca7f32d8 100644
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@@ -69,3 +69,13 @@ default-value | String / Number | undefined | 值。非受控属性 | N
 blur | `({ type: string \| number })` | 输入框失去焦点时触发
 change | `({ value: string \| number })` | 数值发生变更时触发
 overlimit | `({type: 'minus' \| 'plus'})` | 数值超出限制时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-stepper-border-color | @component-border | - 
+--td-stepper-border-radius | @radius-small | - 
+--td-stepper-input-color | @font-gray-1 | - 
+--td-stepper-input-disabled-color | @font-gray-4 | - 
diff --git a/src/steps/README.en-US.md b/src/steps/README.en-US.md
index 9aca57016..ab3f840af 100644
--- a/src/steps/README.en-US.md
+++ b/src/steps/README.en-US.md
@@ -30,3 +30,35 @@ icon | String / Slot | - | [see more ts definition](https://github.com/Tencent/t
 status | String | default | options：default/process/finish/error。Typescript：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
 sub-step-items | Array | [] | `deprecated`。Typescript：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
 title | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-step-item-circle-font-size | 28rpx | - 
+--td-step-item-circle-size | 44rpx | - 
+--td-step-item-default-circle-bg | @bg-color-secondarycontainer | - 
+--td-step-item-default-circle-color | @font-gray-3 | - 
+--td-step-item-default-dot-border-color | @component-border | - 
+--td-step-item-default-icon-color | @font-gray-3 | - 
+--td-step-item-default-title-color | @font-gray-3 | - 
+--td-step-item-description-color | @font-gray-3 | - 
+--td-step-item-dot-size | 16rpx | - 
+--td-step-item-error-circle-bg | @error-color-1 | - 
+--td-step-item-error-circle-color | @error-color | - 
+--td-step-item-error-dot-border-color | @error-color | - 
+--td-step-item-error-icon-color | @error-color | - 
+--td-step-item-error-title-color | @error-color | - 
+--td-step-item-finish-circle-bg | @brand-color-light | - 
+--td-step-item-finish-circle-color | @brand-color | - 
+--td-step-item-finish-dot-border-color | @brand-color | - 
+--td-step-item-finish-icon-color | @brand-color | - 
+--td-step-item-finish-line-color | @brand-color | - 
+--td-step-item-finish-title-color | @font-gray-1 | - 
+--td-step-item-line-color | @component-border | - 
+--td-step-item-process-circle-bg | @brand-color | - 
+--td-step-item-process-circle-color | @font-white-1 | - 
+--td-step-item-process-dot-border-color | @brand-color | - 
+--td-step-item-process-icon-color | @brand-color | - 
+--td-step-item-process-title-color | @brand-color | - 
diff --git a/src/steps/README.md b/src/steps/README.md
index e3ae6ba60..e3515dcd7 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -84,3 +84,35 @@ icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字
 status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
 sub-step-items | Array | [] | 已废弃。子步骤条，仅支持 layout  = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
 title | String / Slot | '' | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-step-item-circle-font-size | 28rpx | - 
+--td-step-item-circle-size | 44rpx | - 
+--td-step-item-default-circle-bg | @bg-color-secondarycontainer | - 
+--td-step-item-default-circle-color | @font-gray-3 | - 
+--td-step-item-default-dot-border-color | @component-border | - 
+--td-step-item-default-icon-color | @font-gray-3 | - 
+--td-step-item-default-title-color | @font-gray-3 | - 
+--td-step-item-description-color | @font-gray-3 | - 
+--td-step-item-dot-size | 16rpx | - 
+--td-step-item-error-circle-bg | @error-color-1 | - 
+--td-step-item-error-circle-color | @error-color | - 
+--td-step-item-error-dot-border-color | @error-color | - 
+--td-step-item-error-icon-color | @error-color | - 
+--td-step-item-error-title-color | @error-color | - 
+--td-step-item-finish-circle-bg | @brand-color-light | - 
+--td-step-item-finish-circle-color | @brand-color | - 
+--td-step-item-finish-dot-border-color | @brand-color | - 
+--td-step-item-finish-icon-color | @brand-color | - 
+--td-step-item-finish-line-color | @brand-color | - 
+--td-step-item-finish-title-color | @font-gray-1 | - 
+--td-step-item-line-color | @component-border | - 
+--td-step-item-process-circle-bg | @brand-color | - 
+--td-step-item-process-circle-color | @font-white-1 | - 
+--td-step-item-process-dot-border-color | @brand-color | - 
+--td-step-item-process-icon-color | @brand-color | - 
+--td-step-item-process-title-color | @brand-color | - 
diff --git a/src/swipe-cell/swipe-cell.wxs b/src/swipe-cell/swipe-cell.wxs
index dbb7fec94..21779d7b9 100644
--- a/src/swipe-cell/swipe-cell.wxs
+++ b/src/swipe-cell/swipe-cell.wxs
@@ -28,7 +28,7 @@ var initLeftWidth = function (newVal, oldVal, ownerInstance) {
 var initOpen = function (ownerInstance) {
   getState(ownerInstance);
   if (state.opened.constructor === 'Boolean') {
-    // opened为boolen类型，判断默认打开
+    // opened为boolean类型，判断默认打开
     if (state.opened && state.rightWidth > 0) {
       swipeMove(-state.rightWidth);
     } else if (state.opened && state.leftWidth > 0) {
diff --git a/src/swiper/README.en-US.md b/src/swiper/README.en-US.md
index f9aa265ee..f8bc339a2 100644
--- a/src/swiper/README.en-US.md
+++ b/src/swiper/README.en-US.md
@@ -40,3 +40,22 @@ pagination-position | String | bottom | `0.34.0`。options：top-left/top/top-ri
 show-controls | Boolean | false | `0.32.0` | N
 total | Number | 0 | `0.34.0` | N
 type | String | dots | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-swiper-item-padding | 0 | - 
+--td-swiper-radius | @radius-large | - 
+--td-swiper-nav-btn-bg-color | @font-gray-3 | - 
+--td-swiper-nav-btn-color | @font-white-1 | - 
+--td-swiper-nav-btn-size | 48rpx | - 
+--td-swiper-nav-dot-active-color | @font-white-1 | - 
+--td-swiper-nav-dot-color | @font-white-2 | - 
+--td-swiper-nav-dot-size | 12rpx | - 
+--td-swiper-nav-dots-bar-active-width | 40rpx | - 
+--td-swiper-nav-fraction-bg-color | @font-gray-3 | - 
+--td-swiper-nav-fraction-color | @font-white-1 | - 
+--td-swiper-nav-fraction-font-size | 24rpx | - 
+--td-swiper-nav-fraction-height | 48rpx | - 
diff --git a/src/swiper/README.md b/src/swiper/README.md
index 5a941d155..35383f442 100644
--- a/src/swiper/README.md
+++ b/src/swiper/README.md
@@ -96,3 +96,22 @@ pagination-position | String | bottom | `0.34.0`。页码信息展示位置。
 show-controls | Boolean | false | `0.32.0`。是否显示两侧的控制按钮 | N
 total | Number | 0 | `0.34.0`。总共的项数 | N
 type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-swiper-item-padding | 0 | - 
+--td-swiper-radius | @radius-large | - 
+--td-swiper-nav-btn-bg-color | @font-gray-3 | - 
+--td-swiper-nav-btn-color | @font-white-1 | - 
+--td-swiper-nav-btn-size | 48rpx | - 
+--td-swiper-nav-dot-active-color | @font-white-1 | - 
+--td-swiper-nav-dot-color | @font-white-2 | - 
+--td-swiper-nav-dot-size | 12rpx | - 
+--td-swiper-nav-dots-bar-active-width | 40rpx | - 
+--td-swiper-nav-fraction-bg-color | @font-gray-3 | - 
+--td-swiper-nav-fraction-color | @font-white-1 | - 
+--td-swiper-nav-fraction-font-size | 24rpx | - 
+--td-swiper-nav-fraction-height | 48rpx | - 
diff --git a/src/switch/README.en-US.md b/src/switch/README.en-US.md
index 5785a01cc..a1919436f 100644
--- a/src/switch/README.en-US.md
+++ b/src/switch/README.en-US.md
@@ -20,3 +20,40 @@ default-value | String / Number / Boolean | undefined | uncontrolled property。
 name | params | description
 -- | -- | --
 change | `(value: SwitchValue)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-switch-checked-color | @brand-color | - 
+--td-switch-checked-disabled-color | @brand-color-disabled | - 
+--td-switch-dot-border-color | @bg-color-secondarycontainer | - 
+--td-switch-dot-horizontal-margin | 6rpx | - 
+--td-switch-dot-large-size | 52rpx | - 
+--td-switch-dot-plain-horizontal-margin | 10rpx | - 
+--td-switch-dot-plain-large-size | 44rpx | - 
+--td-switch-dot-plain-size | 36rpx | - 
+--td-switch-dot-plain-small-size | 28rpx | - 
+--td-switch-dot-shadow | @shadow-1 | - 
+--td-switch-dot-size | 44rpx | - 
+--td-switch-dot-small-size | 36rpx | - 
+--td-switch-height | 56rpx | - 
+--td-switch-icon-large-size | 48rpx | - 
+--td-switch-icon-size | 40rpx | - 
+--td-switch-icon-small-size | 32rpx | - 
+--td-switch-label-checked-color | @switch-checked-color | - 
+--td-switch-label-color | @font-gray-4 | - 
+--td-switch-label-font-size | 28rpx | - 
+--td-switch-label-large-font-size | 32rpx | - 
+--td-switch-label-small-font-size | 24rpx | - 
+--td-switch-large-height | 64rpx | - 
+--td-switch-large-radius | calc(@switch-large-height / 2) | - 
+--td-switch-large-width | 104rpx | - 
+--td-switch-radius | calc(@switch-height / 2) | - 
+--td-switch-small-height | 48rpx | - 
+--td-switch-small-radius | calc(@switch-small-height / 2) | - 
+--td-switch-small-width | 78rpx | - 
+--td-switch-unchecked-color | @font-gray-4 | - 
+--td-switch-unchecked-disabled-color | @bg-color-component-disabled | - 
+--td-switch-width | 90rpx | - 
diff --git a/src/switch/README.md b/src/switch/README.md
index baa96b2e6..4390f252d 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -57,3 +57,40 @@ default-value | String / Number / Boolean | undefined | 开关值。非受控属
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: SwitchValue)` | 数据发生变化时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-switch-checked-color | @brand-color | - 
+--td-switch-checked-disabled-color | @brand-color-disabled | - 
+--td-switch-dot-border-color | @bg-color-secondarycontainer | - 
+--td-switch-dot-horizontal-margin | 6rpx | - 
+--td-switch-dot-large-size | 52rpx | - 
+--td-switch-dot-plain-horizontal-margin | 10rpx | - 
+--td-switch-dot-plain-large-size | 44rpx | - 
+--td-switch-dot-plain-size | 36rpx | - 
+--td-switch-dot-plain-small-size | 28rpx | - 
+--td-switch-dot-shadow | @shadow-1 | - 
+--td-switch-dot-size | 44rpx | - 
+--td-switch-dot-small-size | 36rpx | - 
+--td-switch-height | 56rpx | - 
+--td-switch-icon-large-size | 48rpx | - 
+--td-switch-icon-size | 40rpx | - 
+--td-switch-icon-small-size | 32rpx | - 
+--td-switch-label-checked-color | @switch-checked-color | - 
+--td-switch-label-color | @font-gray-4 | - 
+--td-switch-label-font-size | 28rpx | - 
+--td-switch-label-large-font-size | 32rpx | - 
+--td-switch-label-small-font-size | 24rpx | - 
+--td-switch-large-height | 64rpx | - 
+--td-switch-large-radius | calc(@switch-large-height / 2) | - 
+--td-switch-large-width | 104rpx | - 
+--td-switch-radius | calc(@switch-height / 2) | - 
+--td-switch-small-height | 48rpx | - 
+--td-switch-small-radius | calc(@switch-small-height / 2) | - 
+--td-switch-small-width | 78rpx | - 
+--td-switch-unchecked-color | @font-gray-4 | - 
+--td-switch-unchecked-disabled-color | @bg-color-component-disabled | - 
+--td-switch-width | 90rpx | - 
diff --git a/src/switch/switch.less b/src/switch/switch.less
index e1c9383cf..743f7674e 100644
--- a/src/switch/switch.less
+++ b/src/switch/switch.less
@@ -34,9 +34,9 @@
 @switch-dot-small-size: var(--td-switch-dot-small-size, 36rpx);
 @switch-dot-plain-small-size: var(--td-switch-dot-plain-small-size, 28rpx);
 
-@swtich-label-font-size: var(--td-swtich-label-font-size, 28rpx);
-@swtich-label-large-font-size: var(--td-swtich-label-font-size, 32rpx);
-@swtich-label-small-font-size: var(--td-swtich-label-font-size, 24rpx);
+@switch-label-font-size: var(--td-switch-label-font-size, 28rpx);
+@switch-label-large-font-size: var(--td-switch-label-large-font-size, 32rpx);
+@switch-label-small-font-size: var(--td-switch-label-small-font-size, 24rpx);
 
 @switch-label-color: var(--td-switch-label-color, @font-gray-4);
 @switch-label-checked-color: var(--td-switch-label-checked-color, @switch-checked-color);
@@ -61,7 +61,7 @@
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
-    font-size: @swtich-label-font-size;
+    font-size: @switch-label-font-size;
     color: @switch-label-color;
     overflow: hidden;
 
@@ -78,11 +78,11 @@
     }
 
     &--large {
-      font-size: @swtich-label-large-font-size;
+      font-size: @switch-label-large-font-size;
     }
 
     &--small {
-      font-size: @swtich-label-small-font-size;
+      font-size: @switch-label-small-font-size;
     }
 
     &:empty {
diff --git a/src/tab-bar-item/tab-bar-item.less b/src/tab-bar-item/tab-bar-item.less
index 184c6dd6a..9504ed5ca 100644
--- a/src/tab-bar-item/tab-bar-item.less
+++ b/src/tab-bar-item/tab-bar-item.less
@@ -8,7 +8,6 @@
 @tab-bar-border-color: var(--td-tab-bar-border-color, @border-color);
 @tab-bar-hover-bg-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, 0.05));
 @tab-bar-active-color: var(--td-tab-bar-active-color, @brand-color);
-@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container);
 @tab-bar-active-bg: var(--td-tab-bar-active-bg, @brand-color-light);
 @tab-bar-spread-shadow: var(--td-tab-bar-spread-shadow, @shadow-3);
 @tab-bar-spread-border-color: var(--td-tab-bar-spread-border-color, @border-color);
diff --git a/src/tab-bar/README.en-US.md b/src/tab-bar/README.en-US.md
index f97ee85d2..7e179c5e8 100644
--- a/src/tab-bar/README.en-US.md
+++ b/src/tab-bar/README.en-US.md
@@ -29,3 +29,20 @@ badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./b
 icon | String / Slot | - | \- | N
 sub-tab-bar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar-item/type.ts) | N
 value | String / Number | - | \- | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tab-bar-active-bg | @brand-color-light | - 
+--td-tab-bar-active-color | @brand-color | - 
+--td-tab-bar-bg-color | @bg-color-container | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-color | @font-gray-1 | - 
+--td-tab-bar-height | 80rpx | - 
+--td-tab-bar-hover-bg-color | rgba(0, 0, 0, 0.05) | - 
+--td-tab-bar-spread-border-color | @border-color | - 
+--td-tab-bar-spread-shadow | @shadow-3 | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-round-shadow | @shadow-3 | - 
diff --git a/src/tab-bar/README.md b/src/tab-bar/README.md
index 69aa9f325..86a9a7088 100644
--- a/src/tab-bar/README.md
+++ b/src/tab-bar/README.md
@@ -79,3 +79,20 @@ badge-props | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps
 icon | String / Object / Slot | - | 图标名称。传入对象时透传至 Icon 组件 | N
 sub-tab-bar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar-item/type.ts) | N
 value | String / Number | - | 标识符 | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tab-bar-active-bg | @brand-color-light | - 
+--td-tab-bar-active-color | @brand-color | - 
+--td-tab-bar-bg-color | @bg-color-container | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-color | @font-gray-1 | - 
+--td-tab-bar-height | 80rpx | - 
+--td-tab-bar-hover-bg-color | rgba(0, 0, 0, 0.05) | - 
+--td-tab-bar-spread-border-color | @border-color | - 
+--td-tab-bar-spread-shadow | @shadow-3 | - 
+--td-tab-bar-border-color | @border-color | - 
+--td-tab-bar-round-shadow | @shadow-3 | - 
diff --git a/src/tabs/README.en-US.md b/src/tabs/README.en-US.md
index 262f4f677..4251321fd 100644
--- a/src/tabs/README.en-US.md
+++ b/src/tabs/README.en-US.md
@@ -37,3 +37,27 @@ icon | String / Object | - | `1.0.0-rc.1` | N
 label | String | - | \- | N
 panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
+
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tab-border-color | @component-stroke | - 
+--td-tab-font-size | 28rpx | - 
+--td-tab-icon-size | 36rpx | - 
+--td-tab-item-active-color | @brand-color | - 
+--td-tab-item-color | @font-gray-1 | - 
+--td-tab-item-disabled-color | @font-gray-4 | - 
+--td-tab-item-height | 96rpx | - 
+--td-tab-item-tag-active-bg | @brand-color-light | - 
+--td-tab-item-tag-bg | @bg-color-secondarycontainer | - 
+--td-tab-item-tag-height | 64rpx | - 
+--td-tab-item-vertical-height | 108rpx | - 
+--td-tab-item-vertical-width | 208rpx | - 
+--td-tab-nav-bg-color | @bg-color-container | - 
+--td-tab-track-color | @brand-color | - 
+--td-tab-track-radius | 8rpx | - 
+--td-tab-track-thickness | 6rpx | - 
+--td-tab-track-width | 32rpx | - 
diff --git a/src/tabs/README.md b/src/tabs/README.md
index 744854f7c..350079365 100644
--- a/src/tabs/README.md
+++ b/src/tabs/README.md
@@ -144,3 +144,27 @@ icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon
 label | String | - | 选项卡名称 | N
 panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
+
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tab-border-color | @component-stroke | - 
+--td-tab-font-size | 28rpx | - 
+--td-tab-icon-size | 36rpx | - 
+--td-tab-item-active-color | @brand-color | - 
+--td-tab-item-color | @font-gray-1 | - 
+--td-tab-item-disabled-color | @font-gray-4 | - 
+--td-tab-item-height | 96rpx | - 
+--td-tab-item-tag-active-bg | @brand-color-light | - 
+--td-tab-item-tag-bg | @bg-color-secondarycontainer | - 
+--td-tab-item-tag-height | 64rpx | - 
+--td-tab-item-vertical-height | 108rpx | - 
+--td-tab-item-vertical-width | 208rpx | - 
+--td-tab-nav-bg-color | @bg-color-container | - 
+--td-tab-track-color | @brand-color | - 
+--td-tab-track-radius | 8rpx | - 
+--td-tab-track-thickness | 6rpx | - 
+--td-tab-track-width | 32rpx | - 
diff --git a/src/tabs/tabs.less b/src/tabs/tabs.less
index 216aa8f45..2b2a9aea4 100644
--- a/src/tabs/tabs.less
+++ b/src/tabs/tabs.less
@@ -3,7 +3,7 @@
 @tabs: ~'@{prefix}-tabs';
 @item: ~'@{tabs}__item';
 
-@tab-font-size: var(--tab-font-size, 28rpx);
+@tab-font-size: var(--td-tab-font-size, 28rpx);
 @tab-nav-bg-color: var(--td-tab-nav-bg-color, @bg-color-container);
 
 @tab-item-height: var(--td-tab-item-height, 96rpx);
diff --git a/src/tag/README.en-US.md b/src/tag/README.en-US.md
index 99fa3549d..986c1f165 100644
--- a/src/tag/README.en-US.md
+++ b/src/tag/README.en-US.md
@@ -43,3 +43,43 @@ name | params | description
 -- | -- | --
 change | `(checked: boolean)` | \-
 click | - | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tag-close-icon-color | @font-gray-3 | - 
+--td-tag-danger-color | @error-color | - 
+--td-tag-danger-light-color | @error-color-1 | - 
+--td-tag-default-color | @bg-color-component | - 
+--td-tag-default-font-color | @font-gray-1 | - 
+--td-tag-default-light-color | @bg-color-secondarycontainer | - 
+--td-tag-disabled-background-color | @bg-color-component-disabled | - 
+--td-tag-disabled-border-color | @component-border | - 
+--td-tag-disabled-color | @font-gray-4 | - 
+--td-tag-extra-large-font-size | @font-size-base | - 
+--td-tag-extra-large-height | 80rpx | - 
+--td-tag-extra-large-icon-size | 32rpx | - 
+--td-tag-extra-large-padding | 32rpx - 1px | - 
+--td-tag-large-font-size | @font-size-base | - 
+--td-tag-large-height | 56rpx | - 
+--td-tag-large-icon-size | 32rpx | - 
+--td-tag-large-padding | 16rpx - 1px | - 
+--td-tag-mark-border-radius | @tag-round-border-radius | - 
+--td-tag-medium-font-size | @font-size-s | - 
+--td-tag-medium-height | 48rpx | - 
+--td-tag-medium-icon-size | 28rpx | - 
+--td-tag-medium-padding | 16rpx - 1px | - 
+--td-tag-outline-bg-color | @bg-color-container | - 
+--td-tag-primary-color | @brand-color | - 
+--td-tag-primary-light-color | @brand-color-light | - 
+--td-tag-round-border-radius | 999px | - 
+--td-tag-small-font-size | @font-size | - 
+--td-tag-small-height | 40rpx | - 
+--td-tag-small-icon-size | 24rpx | - 
+--td-tag-small-padding | 12rpx - 1px | - 
+--td-tag-square-border-radius | 8rpx | - 
+--td-tag-success-color | @success-color | - 
+--td-tag-success-light-color | @success-color-1 | - 
+--td-tag-warning-color | @warning-color | - 
diff --git a/src/tag/README.md b/src/tag/README.md
index fe426df43..9c2a5a126 100644
--- a/src/tag/README.md
+++ b/src/tag/README.md
@@ -85,3 +85,43 @@ variant | String | dark | `0.26.0`。标签风格变体。可选项：dark/light
 -- | -- | --
 change | `(checked: boolean)` | 状态切换时触发
 click | - | 点击标签时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tag-close-icon-color | @font-gray-3 | - 
+--td-tag-danger-color | @error-color | - 
+--td-tag-danger-light-color | @error-color-1 | - 
+--td-tag-default-color | @bg-color-component | - 
+--td-tag-default-font-color | @font-gray-1 | - 
+--td-tag-default-light-color | @bg-color-secondarycontainer | - 
+--td-tag-disabled-background-color | @bg-color-component-disabled | - 
+--td-tag-disabled-border-color | @component-border | - 
+--td-tag-disabled-color | @font-gray-4 | - 
+--td-tag-extra-large-font-size | @font-size-base | - 
+--td-tag-extra-large-height | 80rpx | - 
+--td-tag-extra-large-icon-size | 32rpx | - 
+--td-tag-extra-large-padding | 32rpx - 1px | - 
+--td-tag-large-font-size | @font-size-base | - 
+--td-tag-large-height | 56rpx | - 
+--td-tag-large-icon-size | 32rpx | - 
+--td-tag-large-padding | 16rpx - 1px | - 
+--td-tag-mark-border-radius | @tag-round-border-radius | - 
+--td-tag-medium-font-size | @font-size-s | - 
+--td-tag-medium-height | 48rpx | - 
+--td-tag-medium-icon-size | 28rpx | - 
+--td-tag-medium-padding | 16rpx - 1px | - 
+--td-tag-outline-bg-color | @bg-color-container | - 
+--td-tag-primary-color | @brand-color | - 
+--td-tag-primary-light-color | @brand-color-light | - 
+--td-tag-round-border-radius | 999px | - 
+--td-tag-small-font-size | @font-size | - 
+--td-tag-small-height | 40rpx | - 
+--td-tag-small-icon-size | 24rpx | - 
+--td-tag-small-padding | 12rpx - 1px | - 
+--td-tag-square-border-radius | 8rpx | - 
+--td-tag-success-color | @success-color | - 
+--td-tag-success-light-color | @success-color-1 | - 
+--td-tag-warning-color | @warning-color | - 
diff --git a/src/tag/__test__/index.test.js b/src/tag/__test__/index.test.js
index 6aaea03be..680ff879b 100644
--- a/src/tag/__test__/index.test.js
+++ b/src/tag/__test__/index.test.js
@@ -224,7 +224,7 @@ describe('tag', () => {
     });
 
     describe('event', () => {
-      it(`: mutiple`, async () => {
+      it(`: multiple`, async () => {
         const handleClick = jest.fn();
         const handleClose = jest.fn();
         const id = simulate.load({
@@ -395,7 +395,7 @@ describe('tag', () => {
     });
 
     describe('event', () => {
-      it(`: mutiple`, async () => {
+      it(`: multiple`, async () => {
         const handleChange = jest.fn();
         const id = simulate.load({
           template: `
diff --git a/src/textarea/README.en-US.md b/src/textarea/README.en-US.md
index 2e6a5b7a2..0e5c74fa5 100644
--- a/src/textarea/README.en-US.md
+++ b/src/textarea/README.en-US.md
@@ -30,3 +30,17 @@ change | `(value: TextareaValue)` | \-
 enter | `(value: TextareaValue)` | \-
 focus | `(value: TextareaValue)` | \-
 line-change | `(value: TextareaValue)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-textarea-background-color | @bg-color-container | - 
+--td-textarea-border-color | rgba(220, 220, 220, 1) | - 
+--td-textarea-border-radius | @radius-default | - 
+--td-textarea-disabled-text-color | @font-gray-4 | - 
+--td-textarea-indicator-text-color | @font-gray-3 | - 
+--td-textarea-label-color | @font-gray-1 | - 
+--td-textarea-placeholder-color | @font-gray-3 | - 
+--td-textarea-text-color | @font-gray-1 | - 
diff --git a/src/textarea/README.md b/src/textarea/README.md
index 8b3437f74..7f42f30ec 100644
--- a/src/textarea/README.md
+++ b/src/textarea/README.md
@@ -97,3 +97,17 @@ enter | `(value: TextareaValue)` | 点击完成时触发
 focus | `(value: TextareaValue)` | 获得焦点时触发
 line-change | `(value: TextareaValue)` | 行高发生变化时触发
 keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-textarea-background-color | @bg-color-container | - 
+--td-textarea-border-color | rgba(220, 220, 220, 1) | - 
+--td-textarea-border-radius | @radius-default | - 
+--td-textarea-disabled-text-color | @font-gray-4 | - 
+--td-textarea-indicator-text-color | @font-gray-3 | - 
+--td-textarea-label-color | @font-gray-1 | - 
+--td-textarea-placeholder-color | @font-gray-3 | - 
+--td-textarea-text-color | @font-gray-1 | - 
diff --git a/src/toast/README.en-US.md b/src/toast/README.en-US.md
index a3f584859..ee205e0c7 100644
--- a/src/toast/README.en-US.md
+++ b/src/toast/README.en-US.md
@@ -22,3 +22,15 @@ name | params | description
 -- | -- | --
 close | \- | \-
 destory | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-toast-bg-color | @font-gray-2 | - 
+--td-toast-color | @font-white-1 | - 
+--td-toast-column-icon-size | 64rpx | - 
+--td-toast-max-width | 374rpx | - 
+--td-toast-radius | 8rpx | - 
+--td-toast-row-icon-size | 48rpx | - 
diff --git a/src/toast/README.md b/src/toast/README.md
index 4fc7cd78b..544c323e9 100644
--- a/src/toast/README.md
+++ b/src/toast/README.md
@@ -53,3 +53,15 @@ theme | String | - | 提示类型。可选项：loading/success/error | N
 -- | -- | --
 close | \- | 轻提示隐藏的时候触发
 destory | \- | 轻提示销毁的时候触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-toast-bg-color | @font-gray-2 | - 
+--td-toast-color | @font-white-1 | - 
+--td-toast-column-icon-size | 64rpx | - 
+--td-toast-max-width | 374rpx | - 
+--td-toast-radius | 8rpx | - 
+--td-toast-row-icon-size | 48rpx | - 
diff --git a/src/tree-select/README.en-US.md b/src/tree-select/README.en-US.md
index 2622720b7..c9d6982c1 100644
--- a/src/tree-select/README.en-US.md
+++ b/src/tree-select/README.en-US.md
@@ -17,3 +17,15 @@ default-value | String / Number / Array | undefined | uncontrolled property。Ty
 name | params | description
 -- | -- | --
 change | `(value: TreeSelectValue, level: TreeLevel) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel: 0 \| 1 \| 2`<br/>
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-tree-bg-color | @bg-color-container | - 
+--td-tree-colum-width | 206rpx | - 
+--td-tree-item-active-color | @brand-color | - 
+--td-tree-item-font-size | 32rpx | - 
+--td-tree-item-height | 112rpx | - 
+--td-tree-root-bg-color | @bg-color-secondarycontainer | - 
diff --git a/src/tree-select/README.md b/src/tree-select/README.md
index 0faf9ab67..eb753498d 100644
--- a/src/tree-select/README.md
+++ b/src/tree-select/README.md
@@ -57,3 +57,15 @@ default-value | String / Number / Array | undefined | 选中值。非受控属
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: TreeSelectValue, level: TreeLevel) ` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel: 0 \| 1 \| 2`<br/>
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-tree-bg-color | @bg-color-container | - 
+--td-tree-colum-width | 206rpx | - 
+--td-tree-item-active-color | @brand-color | - 
+--td-tree-item-font-size | 32rpx | - 
+--td-tree-item-height | 112rpx | - 
+--td-tree-root-bg-color | @bg-color-secondarycontainer | - 
diff --git a/src/upload/README.en-US.md b/src/upload/README.en-US.md
index 2fc525daa..945b6fc8e 100644
--- a/src/upload/README.en-US.md
+++ b/src/upload/README.en-US.md
@@ -30,3 +30,13 @@ fail | \- | \-
 remove | `(index: number; file: UploadFile)` | \-
 select-change | `(currentSelectedFiles: MediaContext[])` | \-
 success | `(files: MediaContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-upload-add-bg-color | @bg-color-secondarycontainer | - 
+--td-upload-add-color | @font-gray-3 | - 
+--td-upload-add-icon-font-size | 56rpx | - 
+--td-upload-radius | @radius-default | - 
diff --git a/src/upload/README.md b/src/upload/README.md
index aa2a495ce..7dc8613c3 100644
--- a/src/upload/README.md
+++ b/src/upload/README.md
@@ -77,3 +77,13 @@ remove | `(index: number; file: UploadFile)` | 移除文件时触发
 select-change | `(files: MediaContext[]; currentSelectedFiles: MediaContext[])` | 选择文件或图片之后，上传之前，触发该事件。<br />`files` 表示之前已经上传完成的文件列表。<br />`currentSelectedFiles` 表示本次上传选中的文件列表
 success | `(files: MediaContext)` | 上传成功后触发，包含所有上传的文件；`url` 表示选定视频的临时文件路径 (本地路径)。`duration` 表示选定视频的时间长度。`size`选定视频的数据量大小。更多描述参考 wx.chooseMedia 小程序官网描述。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts)。<br/>`type MediaContext = VideoContext[] \| ImageContext[]`<br/><br/>`interface VideoContext { name?: string; type?: string; url?: string; duration?: number; size?: number; width?: number; height?: number; thumb: string; progress: number }`<br/><br/>`interface ImageContext { name: string; type: string; url: string;  size: number; width: number; height: number; progress: number  }`<br/>
 click | `(file: VideoContext \| ImageContext)` | 点击已选文件时触发；常用于重新上传
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-upload-add-bg-color | @bg-color-secondarycontainer | - 
+--td-upload-add-color | @font-gray-3 | - 
+--td-upload-add-icon-font-size | 56rpx | - 
+--td-upload-radius | @radius-default | - 

From 09b70c5f7294c625e519fec8339b10af7966e1bb Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Thu, 13 Jul 2023 12:35:33 +0800
Subject: [PATCH 143/202] docs: add external-class content (#2186)

* docs(Button): add external-class contnet

* docs(Grid): add external-class contnet

* docs(Divider): add external-class content
---
 src/button/README.md  |  7 ++++++-
 src/divider/README.md |  6 +++++-
 src/grid/README.md    | 16 ++++++++++++++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/button/README.md b/src/button/README.md
index 341910a57..76c8160b7 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -69,7 +69,6 @@ block | Boolean | false | 是否为块级元素 | N
 content | String / Slot | - | 按钮内容 | N
 custom-dataset | Object | - | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`any` | N
 disabled | Boolean | false | 禁用状态 | N
-external-classes | Array | - | 组件类名。`['t-class', 't-class-icon', 't-class-loading']` | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 loading | Boolean | false | 是否显示为加载状态 | N
@@ -106,6 +105,12 @@ bindchooseavatar | Eventhandle | - | 获取用户头像回调，open-type=choose
 -- | -- | --
 tap | `event` | 点击按钮，当按钮不为加载或禁用状态时触发
 
+### Button 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-loading | 加载样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/divider/README.md b/src/divider/README.md
index 3588c31cd..925cdd480 100644
--- a/src/divider/README.md
+++ b/src/divider/README.md
@@ -36,9 +36,13 @@ isComponent: true
 align | String | center | 文本位置（仅在水平分割线有效）。可选项：left/right/center | N
 content | String / Slot | - | 子元素 | N
 dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、分隔线类名 等。`['t-class', 't-class-line', 't-class-content']` | N
 layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
 
+### Divider 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/grid/README.md b/src/grid/README.md
index d59b2585d..e217e6f15 100644
--- a/src/grid/README.md
+++ b/src/grid/README.md
@@ -63,18 +63,22 @@ isComponent: true
 align | String | center | 内容对齐方式。可选项：left/center | N
 border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N
 column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N
-external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class']` | N
 gutter | Number | - | 间隔大小 | N
 hover | Boolean | false | 是否开启点击反馈 | N
 theme | String | default | 宫格的风格。可选项：default/card | N
 
+### Grid 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+
+
 ### GridItem Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 badge-props | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N
 description | String / Slot | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 | N
-external-classes | Array | - | 组件类名，分别用于设置组件外层元素、图片、文本、描述等元素类名。`['t-class', 't-class-image', 't-class-text', 't-class-description']` | N
 icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
 image | String / Slot | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 | N
 image-props | Object | - | 透传至 Image 组件 | N
@@ -89,6 +93,14 @@ url | String | - | 点击后的跳转链接 | N
 -- | -- | --
 click | \- | 点击子项后触发
 
+### GridItem 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-image | 图片样式类
+t-class-text | 文本样式类
+t-class-description | 描述样式类
 
 
 ### CSS 变量

From 4e0d50107bfa176e930d0b4eee99aa43c3101444 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Fri, 14 Jul 2023 16:07:05 +0800
Subject: [PATCH 144/202] feat(action-sheet): support the show-overlay property
 (#2194)

---
 src/action-sheet/action-sheet.wxml | 1 +
 src/action-sheet/props.ts          | 5 +++++
 src/action-sheet/type.ts           | 9 +++++++++
 3 files changed, 15 insertions(+)

diff --git a/src/action-sheet/action-sheet.wxml b/src/action-sheet/action-sheet.wxml
index 174ee0145..70f5ed0c0 100644
--- a/src/action-sheet/action-sheet.wxml
+++ b/src/action-sheet/action-sheet.wxml
@@ -8,6 +8,7 @@
     visible="{{visible}}"
     placement="bottom"
     bind:visible-change="onPopupVisibleChange"
+    show-overlay="{{showOverlay}}"
     z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}"
     overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"
   >
diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts
index a2943547d..12a82b79f 100644
--- a/src/action-sheet/props.ts
+++ b/src/action-sheet/props.ts
@@ -50,6 +50,11 @@ const props: TdActionSheetProps = {
     type: Boolean,
     value: false,
   },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    value: true,
+  },
   /** popupProps透传 */
   popupProps: {
     type: Object,
diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts
index 899e70a8e..edf9e914e 100644
--- a/src/action-sheet/type.ts
+++ b/src/action-sheet/type.ts
@@ -76,6 +76,15 @@ export interface TdActionSheetProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /** popupProps透传 */
   popupProps: {
     type: ObjectConstructor;
     value?: object;

From fa149774927813d75e4f115175f2f68784b3ccb2 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Fri, 14 Jul 2023 16:08:06 +0800
Subject: [PATCH 145/202] fix(toast): fix type error in the close method of
 toast (#2191)

---
 src/toast/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/toast/index.ts b/src/toast/index.ts
index a2f870718..80c0c79d2 100644
--- a/src/toast/index.ts
+++ b/src/toast/index.ts
@@ -16,7 +16,7 @@ export type ToastOptionsType = {
   placement?: ToastPositionType;
   preventScrollThrough?: boolean;
   direction?: ToastDirectionType;
-  close?: <T = any>() => T;
+  close?: () => void;
 };
 
 function Toast(options: ToastOptionsType) {

From a61812bd2b40b8bc2417984423cecd0e65b9f9cd Mon Sep 17 00:00:00 2001
From: xiaosansiji <xiaosansiji@gmail.com>
Date: Mon, 17 Jul 2023 16:53:11 +0800
Subject: [PATCH 146/202] fix: action ci script security

---
 .github/workflows/auto-release.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/auto-release.yml b/.github/workflows/auto-release.yml
index 57b5d26b6..08f55b02b 100644
--- a/.github/workflows/auto-release.yml
+++ b/.github/workflows/auto-release.yml
@@ -55,10 +55,11 @@ jobs:
           ref: ${{ steps.comment.outputs.branch }}
       - run: echo '${{ github.event.comment.body }}'
       - name: Commit and push if needed
+        env:
+          BODY: ${{ github.event.comment.body }}
         run: |
           txt=$(cat CHANGELOG.md)
-          body='${{ github.event.comment.body }}'
-          echo "${txt%%##*}${body}${txt##*---}" > CHANGELOG.md
+          echo "${txt%%##*} $BODY ${txt##*---}" > CHANGELOG.md
           git add .
           git config --local user.email "github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"

From 271e822c4febfc9eac046dab96d36979086482e7 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Mon, 17 Jul 2023 22:20:17 +0800
Subject: [PATCH 147/202] fix: resolved some spelling mistake (#2197)

* fix: resolved some spelling mistake

* fix(StepItem): remove useless css
---
 CHANGELOG.md                                  |   2 +-
 CONTRIBUTING.md                               |   2 +-
 site/docs/custom-theme.md                     |   2 +-
 site/plugin-tdoc/transforms.ts                |   4 +-
 src/checkbox-group/checkbox-group.ts          |  10 +-
 src/common/bus.ts                             |   8 +-
 src/date-time-picker/README.en-US.md          |   2 +-
 src/date-time-picker/README.md                |   2 +-
 .../__test__/__snapshots__/demo.test.js.snap  |  12 +-
 .../__virtualHostSnapshot__/demo.test.js.snap | 174 -------
 .../index.test.js.snap                        | 474 ------------------
 .../_example/date-all/index.js                |   2 +-
 .../_example/date-all/index.wxml              |   2 +-
 .../_example/date-all/index.wxss              |   2 +-
 src/date-time-picker/_example/steps/index.js  |   2 +-
 .../_example/steps/index.wxml                 |   2 +-
 .../_example/steps/index.wxss                 |   2 +-
 src/date-time-picker/_example/time/index.js   |   2 +-
 src/date-time-picker/_example/time/index.wxml |   4 +-
 src/date-time-picker/_example/time/index.wxss |   2 +-
 .../_example/year-month-date/index.js         |   2 +-
 .../_example/year-month-date/index.wxml       |   2 +-
 .../_example/year-month-date/index.wxss       |   4 +-
 .../_example/year-month/index.js              |   2 +-
 .../_example/year-month/index.wxml            |  10 +-
 .../_example/year-month/index.wxss            |   2 +-
 src/picker/README.en-US.md                    |   2 +-
 src/picker/README.md                          |   2 +-
 src/picker/__test__/index.wxml                |  18 +-
 src/radio-group/radio-group.ts                |   4 +-
 src/side-bar/side-bar.ts                      |   8 +-
 src/step-item/step-item.less                  |  14 +-
 .../__test__/{indes.test.js => index.test.js} |   0
 33 files changed, 57 insertions(+), 725 deletions(-)
 delete mode 100644 src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
 delete mode 100644 src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
 rename src/tree-select/__test__/{indes.test.js => index.test.js} (100%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fcbd39c53..1c0b44063 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -425,7 +425,7 @@ docClass: timeline
 - `Tabs`: 废弃 placement 属性，左右布局请使用 SideBar 组件 @LeeJim ([#1492](https://github.com/Tencent/tdesign-miniprogram/pull/1492))
 
 ### 🚀 Features
-- `Cell`: 新增 CSS Varialbes 用于控制高度 @LeeJim ([#1482](https://github.com/Tencent/tdesign-miniprogram/pull/1482))
+- `Cell`: 新增 CSS Variables 用于控制高度 @LeeJim ([#1482](https://github.com/Tencent/tdesign-miniprogram/pull/1482))
 - `Indexes`: 新增支持 stickyOffset 属性，用于调整吸顶时的距离 @LeeJim ([#1485](https://github.com/Tencent/tdesign-miniprogram/pull/1485))
 - `Button`: 支持 0.5px 边框 @anlyyao ([#1474](https://github.com/Tencent/tdesign-miniprogram/pull/1474))
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index bd64d085a..c101117b9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -54,7 +54,7 @@ npm start
 此时会同时启动 `dist` 与 `example` 的构建服务，对应的开发路径与构建路径分别为：
 
 - `src` -> `miniprogram_dist`
-- `src/*/_exmaple` -> `example` -> `_example`
+- `src/*/_example` -> `example` -> `_example`
 
 使用微信开发者工具导入项目 `_example` 文件夹
 
diff --git a/site/docs/custom-theme.md b/site/docs/custom-theme.md
index 750c103b1..8a3ad9b4e 100644
--- a/site/docs/custom-theme.md
+++ b/site/docs/custom-theme.md
@@ -62,4 +62,4 @@ page {
 }
 ```
 
-> 目前仅有部分组件支持自定义主题，支持的组件在其文档有陈列对应的 CSS Varialbes，可以访问 [tab-bar-item.less](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/tab-bar-item/tab-bar-item.less)
\ No newline at end of file
+> 目前仅有部分组件支持自定义主题，支持的组件在其文档有陈列对应的 CSS Variables，可以访问 [tab-bar-item.less](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/tab-bar-item/tab-bar-item.less)
\ No newline at end of file
diff --git a/site/plugin-tdoc/transforms.ts b/site/plugin-tdoc/transforms.ts
index 965a7f604..06ca728e4 100644
--- a/site/plugin-tdoc/transforms.ts
+++ b/site/plugin-tdoc/transforms.ts
@@ -6,7 +6,7 @@ let demoCodesImports: Record<string, string> = {};
 
 export default {
   before({ source, file, md }: any) {
-    const resouceDir = path.dirname(file);
+    const resourceDir = path.dirname(file);
     const reg = file.match(/src\/(\S*)(?=\/\S*.md)/);
     const name = reg && reg[1];
     demoCodesImports = {};
@@ -23,7 +23,7 @@ export default {
 
     // 替换成对应 demo 文件
     source = source.replace(/{{\s+(.+)\s+}}/g, (_: string, demoDirName: string) => {
-      const demoPath = path.resolve(resouceDir, `./_example/${demoDirName}`);
+      const demoPath = path.resolve(resourceDir, `./_example/${demoDirName}`);
       if (!fs.existsSync(demoPath)) {
         console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 _example/${demoDirName} 示例!`);
         return '\n<h3>DEMO (🚧建设中）...</h3>';
diff --git a/src/checkbox-group/checkbox-group.ts b/src/checkbox-group/checkbox-group.ts
index a9008dbf3..9ed0487b1 100644
--- a/src/checkbox-group/checkbox-group.ts
+++ b/src/checkbox-group/checkbox-group.ts
@@ -47,7 +47,7 @@ export default class CheckBoxGroup extends SuperComponent {
   $checkAll = null; // 全选复选框
 
   methods = {
-    getChilds() {
+    getChildren() {
       let items = this.$children;
       if (!items.length) {
         items = this.selectAllComponents(`.${prefix}-checkbox-option`);
@@ -56,7 +56,7 @@ export default class CheckBoxGroup extends SuperComponent {
     },
 
     updateChildren() {
-      const items = this.getChilds();
+      const items = this.getChildren();
       const { value } = this.data;
 
       if (items.length > 0) {
@@ -76,14 +76,14 @@ export default class CheckBoxGroup extends SuperComponent {
     updateValue({ value, checked, checkAll, indeterminate }) {
       let { value: newValue } = this.data;
       const { max } = this.data;
-      const keySet = new Set(this.getChilds().map((item) => item.data.value));
+      const keySet = new Set(this.getChildren().map((item) => item.data.value));
 
       newValue = newValue.filter((value) => keySet.has(value));
 
       if (max && checked && newValue.length === max) return;
 
       if (checkAll) {
-        const items = this.getChilds();
+        const items = this.getChildren();
         newValue =
           !checked && indeterminate
             ? items
@@ -141,7 +141,7 @@ export default class CheckBoxGroup extends SuperComponent {
     },
 
     setCheckall() {
-      const items = this.getChilds();
+      const items = this.getChildren();
 
       if (!this.$checkAll) {
         this.$checkAll = items.find((item) => item.data.checkAll);
diff --git a/src/common/bus.ts b/src/common/bus.ts
index 216a4a647..76da2c660 100644
--- a/src/common/bus.ts
+++ b/src/common/bus.ts
@@ -1,14 +1,14 @@
 export default class Bus {
   listeners: Map<string, any>;
-  emited: Set<string>;
+  emitted: Set<string>;
 
   constructor() {
     this.listeners = new Map();
-    this.emited = new Set();
+    this.emitted = new Set();
   }
 
   on(evtName: string, listener) {
-    if (this.emited.has(evtName)) {
+    if (this.emitted.has(evtName)) {
       listener();
       return;
     }
@@ -24,7 +24,7 @@ export default class Bus {
 
     if (listeners) {
       listeners.forEach((func) => func());
-      this.emited.add(evtName);
+      this.emitted.add(evtName);
     }
   }
 }
diff --git a/src/date-time-picker/README.en-US.md b/src/date-time-picker/README.en-US.md
index 8e8fb1ebf..baff36170 100644
--- a/src/date-time-picker/README.en-US.md
+++ b/src/date-time-picker/README.en-US.md
@@ -26,7 +26,7 @@ name | params | description
 -- | -- | --
 cancel | \- | \-
 change | `(value: DateValue)` | \-
-close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
+close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
 confirm | `(value: DateValue)` | `1.0.1`
 pick | `(value: DateValue)` | \-
 
diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md
index b67e38428..06ed5ec35 100644
--- a/src/date-time-picker/README.md
+++ b/src/date-time-picker/README.md
@@ -70,7 +70,7 @@ visible | Boolean | false | 是否显示 | N
 -- | -- | --
 cancel | \- | 取消按钮点击时触发
 change | `(value: DateValue)` | 确认按钮点击时触发
-close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
+close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
 confirm | `(value: DateValue)` | `1.0.1`。确认按钮点击时触发
 pick | `(value: DateValue)` | 选中值发生变化时触发
 
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap
index 80996ced0..5a0f83228 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap
@@ -7,7 +7,7 @@ exports[`DateTimePicker DateTimePicker date-all demo works fine 1`] = `
     data-mode="datetime"
     hover="{{true}}"
     note=""
-    tClass="pannel-item"
+    tClass="panel-item"
     title="选择日期时间"
     bind:tap="showPicker"
   />
@@ -30,7 +30,7 @@ exports[`DateTimePicker DateTimePicker steps demo works fine 1`] = `
     arrow="{{true}}"
     hover="{{true}}"
     note=""
-    tClass="pannel-item"
+    tClass="panel-item"
     title="选择时间"
     bind:tap="showPicker"
   />
@@ -69,7 +69,7 @@ exports[`DateTimePicker DateTimePicker time demo works fine 1`] = `
     data-mode="second"
     hover="{{true}}"
     note=""
-    tClass="pannel-item"
+    tClass="panel-item"
     title="选择时间"
     bind:tap="showPicker"
   />
@@ -83,7 +83,7 @@ exports[`DateTimePicker DateTimePicker time demo works fine 1`] = `
     data-mode="minute"
     hover="{{true}}"
     note=""
-    tClass="pannel-item"
+    tClass="panel-item"
     title="选择时间"
     bind:tap="showPicker"
   />
@@ -127,7 +127,7 @@ exports[`DateTimePicker DateTimePicker year-month demo works fine 1`] = `
     data-mode="month"
     hover="{{true}}"
     note=""
-    tClass="pannel-item"
+    tClass="panel-item"
     title="选择日期"
     bind:tap="showPicker"
   />
@@ -154,7 +154,7 @@ exports[`DateTimePicker DateTimePicker year-month-date demo works fine 1`] = `
     data-mode="date"
     hover="{{true}}"
     note=""
-    tClass="pannel-item"
+    tClass="panel-item"
     title="选择日期"
     bind:tap="showPicker"
   />
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
deleted file mode 100644
index 80996ced0..000000000
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/demo.test.js.snap
+++ /dev/null
@@ -1,174 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DateTimePicker DateTimePicker date-all demo works fine 1`] = `
-<date-all>
-  <t-cell
-    arrow="{{true}}"
-    data-mode="datetime"
-    hover="{{true}}"
-    note=""
-    tClass="pannel-item"
-    title="选择日期时间"
-    bind:tap="showPicker"
-  />
-  <t-date-time-picker
-    format="YYYY-MM-DD HH:mm:ss"
-    mode="second"
-    title="选择日期和时间"
-    value="{{1640217600000}}"
-    visible="{{false}}"
-    bind:cancel="hidePicker"
-    bind:change="onConfirm"
-    bind:pick="onColumnChange"
-  />
-</date-all>
-`;
-
-exports[`DateTimePicker DateTimePicker steps demo works fine 1`] = `
-<steps>
-  <t-cell
-    arrow="{{true}}"
-    hover="{{true}}"
-    note=""
-    tClass="pannel-item"
-    title="选择时间"
-    bind:tap="showPicker"
-  />
-  <t-date-time-picker
-    format="HH:mm:ss"
-    mode="{{
-      Array [
-        "null",
-        "second",
-      ]
-    }}"
-    steps="{{
-      Object {
-        "minute": 5,
-      }
-    }}"
-    title="选择时间"
-    value="10:00:00"
-    visible="{{false}}"
-    bind:cancel="hidePicker"
-    bind:change="onConfirm"
-    bind:pick="onColumnChange"
-  />
-</steps>
-`;
-
-exports[`DateTimePicker DateTimePicker time demo works fine 1`] = `
-<time>
-  <wx-view
-    class="demo-desc"
-  >
-    时分秒选择器
-  </wx-view>
-  <t-cell
-    arrow="{{true}}"
-    data-mode="second"
-    hover="{{true}}"
-    note=""
-    tClass="pannel-item"
-    title="选择时间"
-    bind:tap="showPicker"
-  />
-  <wx-view
-    class="demo-desc"
-  >
-    时分选择器
-  </wx-view>
-  <t-cell
-    arrow="{{true}}"
-    data-mode="minute"
-    hover="{{true}}"
-    note=""
-    tClass="pannel-item"
-    title="选择时间"
-    bind:tap="showPicker"
-  />
-  <t-date-time-picker
-    format="HH:mm:ss"
-    mode="{{
-      Array [
-        "null",
-        "second",
-      ]
-    }}"
-    title="选择时间"
-    value="10:00:00"
-    visible=""
-    bind:cancel="hidePicker"
-    bind:change="onConfirm"
-    bind:pick="onColumnChange"
-  />
-  <t-date-time-picker
-    format="HH:mm"
-    mode="{{
-      Array [
-        "null",
-        "minute",
-      ]
-    }}"
-    title="选择时间"
-    value="23:59"
-    visible=""
-    bind:cancel="hidePicker"
-    bind:change="onConfirm"
-    bind:pick="onColumnChange"
-  />
-</time>
-`;
-
-exports[`DateTimePicker DateTimePicker year-month demo works fine 1`] = `
-<year-month>
-  <t-cell
-    arrow="{{true}}"
-    data-mode="month"
-    hover="{{true}}"
-    note=""
-    tClass="pannel-item"
-    title="选择日期"
-    bind:tap="showPicker"
-  />
-  <t-date-time-picker
-    end="2030-09-09 12:12:12"
-    format="YYYY-MM"
-    mode="month"
-    start="2000-01-01 00:00:00"
-    title="选择日期"
-    value="2021-09"
-    visible="{{false}}"
-    bind:cancel="hidePicker"
-    bind:change="onConfirm"
-    bind:pick="onColumnChange"
-  />
-</year-month>
-`;
-
-exports[`DateTimePicker DateTimePicker year-month-date demo works fine 1`] = `
-<year-month-date>
-  <t-cell
-    arrow="{{true}}"
-    class="test"
-    data-mode="date"
-    hover="{{true}}"
-    note=""
-    tClass="pannel-item"
-    title="选择日期"
-    bind:tap="showPicker"
-  />
-  <t-date-time-picker
-    defaultValue="{{1640217600000}}"
-    end="2030-09-09 12:12:12"
-    format="YYYY-MM-DD"
-    mode="date"
-    start="2000-01-01 00:00:00"
-    title="选择日期"
-    visible="{{false}}"
-    bind:cancel="hidePicker"
-    bind:change="onConfirm"
-    bind:pick="onColumnChange"
-  />
-</year-month-date>
-`;
diff --git a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap b/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
deleted file mode 100644
index 134e5a7fe..000000000
--- a/src/date-time-picker/__test__/__virtualHostSnapshot__/index.test.js.snap
+++ /dev/null
@@ -1,474 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`date-time-picker :base 1`] = `
-<main>
-  <t-date-time-picker>
-    <t-picker
-      class="class t-class t-date-time-picker"
-      bind:cancel="onCancel"
-      bind:change="onConfirm"
-      bind:close="onClose"
-      bind:pick="onColumnChange"
-      bind:visible-change="onVisibleChange"
-    >
-      <t-popup
-        class="class"
-        bind:visible-change="onPopupChange"
-      >
-        <wx-view
-          ariaModal="{{true}}"
-          ariaRole="dialog"
-          class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
-          style="z-index:11500;"
-          bind:transitionend="onTransitionEnd"
-        >
-          <wx-view
-            class="t-popup__content t-class-content"
-          >
-            <wx-view
-              class="t-picker t-class"
-              slot="content"
-              style=""
-            >
-              <wx-view
-                class="t-picker__toolbar"
-              >
-                <wx-view
-                  class="t-picker__cancel t-class-cancel"
-                  bind:tap="onCancel"
-                >
-                  取消
-                </wx-view>
-                <wx-view
-                  class="t-picker__title t-class-title"
-                >
-                  选择日期
-                </wx-view>
-                <wx-view
-                  class="t-picker__confirm t-class-confirm"
-                  bind:tap="onConfirm"
-                >
-                  确定
-                </wx-view>
-              </wx-view>
-              <wx-view
-                class="t-picker__main"
-              >
-                <t-picker-item
-                  class="t-date-time-picker__item"
-                  index="index"
-                >
-                  <wx-view
-                    class="t-picker-item__group class t-class"
-                    style=""
-                    bind:touchcancel="onTouchEnd"
-                    bind:touchend="onTouchEnd"
-                    catch:touchmove="onTouchMove"
-                    bind:touchstart="onTouchStart"
-                  >
-                    <wx-view
-                      class="t-picker-item__wrapper"
-                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -924px, 0)"
-                    >
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{0}}"
-                      >
-                        
-      2000年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{1}}"
-                      >
-                        
-      2001年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{2}}"
-                      >
-                        
-      2002年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{3}}"
-                      >
-                        
-      2003年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{4}}"
-                      >
-                        
-      2004年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{5}}"
-                      >
-                        
-      2005年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{6}}"
-                      >
-                        
-      2006年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{7}}"
-                      >
-                        
-      2007年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{8}}"
-                      >
-                        
-      2008年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{9}}"
-                      >
-                        
-      2009年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{10}}"
-                      >
-                        
-      2010年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{11}}"
-                      >
-                        
-      2011年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{12}}"
-                      >
-                        
-      2012年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{13}}"
-                      >
-                        
-      2013年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{14}}"
-                      >
-                        
-      2014年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{15}}"
-                      >
-                        
-      2015年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{16}}"
-                      >
-                        
-      2016年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{17}}"
-                      >
-                        
-      2017年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{18}}"
-                      >
-                        
-      2018年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{19}}"
-                      >
-                        
-      2019年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{20}}"
-                      >
-                        
-      2020年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item t-picker-item__item--active"
-                        data-index="{{21}}"
-                      >
-                        
-      2021年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{22}}"
-                      >
-                        
-      2022年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{23}}"
-                      >
-                        
-      2023年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{24}}"
-                      >
-                        
-      2024年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{25}}"
-                      >
-                        
-      2025年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{26}}"
-                      >
-                        
-      2026年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{27}}"
-                      >
-                        
-      2027年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{28}}"
-                      >
-                        
-      2028年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{29}}"
-                      >
-                        
-      2029年
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{30}}"
-                      >
-                        
-      2030年
-    
-                      </wx-view>
-                    </wx-view>
-                  </wx-view>
-                </t-picker-item>
-                <t-picker-item
-                  class="t-date-time-picker__item"
-                  index="index"
-                >
-                  <wx-view
-                    class="t-picker-item__group class t-class"
-                    style=""
-                    bind:touchcancel="onTouchEnd"
-                    bind:touchend="onTouchEnd"
-                    catch:touchmove="onTouchMove"
-                    bind:touchstart="onTouchStart"
-                  >
-                    <wx-view
-                      class="t-picker-item__wrapper"
-                      style="transition: transform 0ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, -352px, 0)"
-                    >
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{0}}"
-                      >
-                        
-      1月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{1}}"
-                      >
-                        
-      2月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{2}}"
-                      >
-                        
-      3月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{3}}"
-                      >
-                        
-      4月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{4}}"
-                      >
-                        
-      5月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{5}}"
-                      >
-                        
-      6月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{6}}"
-                      >
-                        
-      7月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{7}}"
-                      >
-                        
-      8月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item t-picker-item__item--active"
-                        data-index="{{8}}"
-                      >
-                        
-      9月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{9}}"
-                      >
-                        
-      10月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{10}}"
-                      >
-                        
-      11月
-    
-                      </wx-view>
-                      <wx-view
-                        class="t-picker-item__item"
-                        data-index="{{11}}"
-                      >
-                        
-      12月
-    
-                      </wx-view>
-                    </wx-view>
-                  </wx-view>
-                </t-picker-item>
-                <wx-view
-                  class="t-picker__mask t-picker__mask--top"
-                />
-                <wx-view
-                  class="t-picker__mask t-picker__mask--bottom"
-                />
-                <wx-view
-                  class="t-picker__indicator"
-                />
-              </wx-view>
-            </wx-view>
-            <wx-view
-              class="t-popup__close"
-              bind:tap="handleClose"
-            />
-          </wx-view>
-        </wx-view>
-        <t-overlay
-          id="popup-overlay"
-          bind:tap="handleOverlayClick"
-        >
-          <wx-view
-            ariaLabel="关闭"
-            ariaRole="button"
-            class="t-overlay t-fade-enter t-fade-enter-active class"
-            style="z-index:11000;"
-            bind:tap="handleClick"
-            catch:touchmove="noop"
-            bind:transitionend="onTransitionEnd"
-          />
-        </t-overlay>
-      </t-popup>
-    </t-picker>
-  </t-date-time-picker>
-</main>
-`;
diff --git a/src/date-time-picker/_example/date-all/index.js b/src/date-time-picker/_example/date-all/index.js
index 3b8b1d5b0..4f66e8264 100644
--- a/src/date-time-picker/_example/date-all/index.js
+++ b/src/date-time-picker/_example/date-all/index.js
@@ -22,7 +22,7 @@ Page({
     const { value } = e?.detail;
     const { mode } = this.data;
 
-    console.log('confim', value);
+    console.log('confirm', value);
 
     this.setData({
       [mode]: value,
diff --git a/src/date-time-picker/_example/date-all/index.wxml b/src/date-time-picker/_example/date-all/index.wxml
index 434fe1173..d00a533af 100644
--- a/src/date-time-picker/_example/date-all/index.wxml
+++ b/src/date-time-picker/_example/date-all/index.wxml
@@ -5,7 +5,7 @@
   arrow
   data-mode="datetime"
   bindtap="showPicker"
-  t-class="pannel-item"
+  t-class="panel-item"
 />
 
 <!-- 年月日时分 -->
diff --git a/src/date-time-picker/_example/date-all/index.wxss b/src/date-time-picker/_example/date-all/index.wxss
index b55ebb7e1..490c7f58a 100644
--- a/src/date-time-picker/_example/date-all/index.wxss
+++ b/src/date-time-picker/_example/date-all/index.wxss
@@ -1,3 +1,3 @@
-.pannel-item {
+.panel-item {
   margin-bottom: 32rpx;
 }
diff --git a/src/date-time-picker/_example/steps/index.js b/src/date-time-picker/_example/steps/index.js
index e5fe8495d..602b68780 100644
--- a/src/date-time-picker/_example/steps/index.js
+++ b/src/date-time-picker/_example/steps/index.js
@@ -18,7 +18,7 @@ Component({
     onConfirm(e) {
       const { value } = e.detail;
 
-      console.log('confim', value);
+      console.log('confirm', value);
 
       this.setData({
         value,
diff --git a/src/date-time-picker/_example/steps/index.wxml b/src/date-time-picker/_example/steps/index.wxml
index d5b0daf7b..6cb68616c 100644
--- a/src/date-time-picker/_example/steps/index.wxml
+++ b/src/date-time-picker/_example/steps/index.wxml
@@ -1,4 +1,4 @@
-<t-cell title="选择时间" hover note="{{text || ''}}" arrow bindtap="showPicker" t-class="pannel-item" />
+<t-cell title="选择时间" hover note="{{text || ''}}" arrow bindtap="showPicker" t-class="panel-item" />
 
 <t-date-time-picker
   title="选择时间"
diff --git a/src/date-time-picker/_example/steps/index.wxss b/src/date-time-picker/_example/steps/index.wxss
index 453683895..34f4fe483 100644
--- a/src/date-time-picker/_example/steps/index.wxss
+++ b/src/date-time-picker/_example/steps/index.wxss
@@ -1,3 +1,3 @@
-.pannel-item {
+.panel-item {
   margin: 32rpx 0;
 }
diff --git a/src/date-time-picker/_example/time/index.js b/src/date-time-picker/_example/time/index.js
index 890e6f5f6..d63e38acf 100644
--- a/src/date-time-picker/_example/time/index.js
+++ b/src/date-time-picker/_example/time/index.js
@@ -25,7 +25,7 @@ Component({
       const { value } = e.detail;
       const { mode } = this.data;
 
-      console.log('confim', value);
+      console.log('confirm', value);
 
       this.setData({
         [mode]: value,
diff --git a/src/date-time-picker/_example/time/index.wxml b/src/date-time-picker/_example/time/index.wxml
index 2e2fa801c..5ab4309e4 100644
--- a/src/date-time-picker/_example/time/index.wxml
+++ b/src/date-time-picker/_example/time/index.wxml
@@ -6,7 +6,7 @@
   arrow
   data-mode="second"
   bindtap="showPicker"
-  t-class="pannel-item"
+  t-class="panel-item"
 />
 
 <view class="demo-desc">时分选择器</view>
@@ -17,7 +17,7 @@
   arrow
   data-mode="minute"
   bindtap="showPicker"
-  t-class="pannel-item"
+  t-class="panel-item"
 />
 
 <!-- 时分 -->
diff --git a/src/date-time-picker/_example/time/index.wxss b/src/date-time-picker/_example/time/index.wxss
index 453683895..34f4fe483 100644
--- a/src/date-time-picker/_example/time/index.wxss
+++ b/src/date-time-picker/_example/time/index.wxss
@@ -1,3 +1,3 @@
-.pannel-item {
+.panel-item {
   margin: 32rpx 0;
 }
diff --git a/src/date-time-picker/_example/year-month-date/index.js b/src/date-time-picker/_example/year-month-date/index.js
index 2396ead26..79c00aa3c 100644
--- a/src/date-time-picker/_example/year-month-date/index.js
+++ b/src/date-time-picker/_example/year-month-date/index.js
@@ -26,7 +26,7 @@ Page({
     const { value } = e.detail;
     const { mode } = this.data;
 
-    console.log('confim', value);
+    console.log('confirm', value);
 
     this.setData({
       [mode]: value,
diff --git a/src/date-time-picker/_example/year-month-date/index.wxml b/src/date-time-picker/_example/year-month-date/index.wxml
index 38efbeb6c..0fc496579 100644
--- a/src/date-time-picker/_example/year-month-date/index.wxml
+++ b/src/date-time-picker/_example/year-month-date/index.wxml
@@ -6,7 +6,7 @@
   data-mode="date"
   bindtap="showPicker"
   class="test"
-  t-class="pannel-item"
+  t-class="panel-item"
 />
 
 <!-- 年月日 -->
diff --git a/src/date-time-picker/_example/year-month-date/index.wxss b/src/date-time-picker/_example/year-month-date/index.wxss
index 93662c17c..05412e1d3 100644
--- a/src/date-time-picker/_example/year-month-date/index.wxss
+++ b/src/date-time-picker/_example/year-month-date/index.wxss
@@ -1,7 +1,7 @@
-.pannel-item {
+.panel-item {
   margin-bottom: 32rpx;
 }
 
-.pannel-item::after {
+.panel-item::after {
   border: 0;
 }
diff --git a/src/date-time-picker/_example/year-month/index.js b/src/date-time-picker/_example/year-month/index.js
index 86097723a..88c409e8a 100644
--- a/src/date-time-picker/_example/year-month/index.js
+++ b/src/date-time-picker/_example/year-month/index.js
@@ -26,7 +26,7 @@ Page({
     const { value } = e.detail;
     const { mode } = this.data;
 
-    console.log('confim', value);
+    console.log('confirm', value);
 
     this.setData({
       [mode]: value,
diff --git a/src/date-time-picker/_example/year-month/index.wxml b/src/date-time-picker/_example/year-month/index.wxml
index ec99fee35..7438ab912 100644
--- a/src/date-time-picker/_example/year-month/index.wxml
+++ b/src/date-time-picker/_example/year-month/index.wxml
@@ -1,12 +1,4 @@
-<t-cell
-  title="选择日期"
-  hover
-  note="{{monthText}}"
-  arrow
-  data-mode="month"
-  bindtap="showPicker"
-  t-class="pannel-item"
-/>
+<t-cell title="选择日期" hover note="{{monthText}}" arrow data-mode="month" bindtap="showPicker" t-class="panel-item" />
 
 <!-- 年月 -->
 <t-date-time-picker
diff --git a/src/date-time-picker/_example/year-month/index.wxss b/src/date-time-picker/_example/year-month/index.wxss
index b55ebb7e1..490c7f58a 100644
--- a/src/date-time-picker/_example/year-month/index.wxss
+++ b/src/date-time-picker/_example/year-month/index.wxss
@@ -1,3 +1,3 @@
-.pannel-item {
+.panel-item {
   margin-bottom: 32rpx;
 }
diff --git a/src/picker/README.en-US.md b/src/picker/README.en-US.md
index c9e05f428..1cda21827 100644
--- a/src/picker/README.en-US.md
+++ b/src/picker/README.en-US.md
@@ -21,7 +21,7 @@ name | params | description
 -- | -- | --
 cancel | - | \-
 change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
-close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
+close | `(trigger: TriggerSource)` | `1.0.1`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
 confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | \-
 pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | \-
 
diff --git a/src/picker/README.md b/src/picker/README.md
index 08db314bc..96c74b109 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -61,7 +61,7 @@ visible | Boolean | false | 是否显示 | N
 -- | -- | --
 cancel | - | 点击取消按钮时触发
 change | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 选中变化时候触发，即确认变化时触发
-close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confrim-btn'`<br/>
+close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'cancel-btn' \| 'confirm-btn'`<br/>
 confirm | `(value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> )` | 点击确认按钮时触发
 pick | `(value: Array<PickerValue>, label: string, column: number, index: number)` | 任何一列选中都会触发，不同的列参数不同。`column` 表示第几列变化，`index` 表示变化那一列的选中项下标
 
diff --git a/src/picker/__test__/index.wxml b/src/picker/__test__/index.wxml
index 4d3a7d28b..23b48560c 100644
--- a/src/picker/__test__/index.wxml
+++ b/src/picker/__test__/index.wxml
@@ -1,19 +1,19 @@
 <block>
-  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}">
-    <view class="pannel-label">城市</view>
-    <view class="pannel-text {{cityValue.length ? '' : 'empty'}}">{{cityCurrentValue || '选择城市'}}</view>
+  <view class="panel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}">
+    <view class="panel-label">城市</view>
+    <view class="panel-text {{cityValue.length ? '' : 'empty'}}">{{cityCurrentValue || '选择城市'}}</view>
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
   </view>
-  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}">
-    <view class="pannel-label">年份和季节</view>
-    <view class="pannel-text {{yearSeasonsValue.length ? '' : 'empty'}}">
+  <view class="panel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}">
+    <view class="panel-label">年份和季节</view>
+    <view class="panel-text {{yearSeasonsValue.length ? '' : 'empty'}}">
       {{yearSeasonsCurrentValue || '选择年份和季节' }}</view
     >
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
   </view>
-  <view class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}">
-    <view class="pannel-label">日期</view>
-    <view class="pannel-text {{dateValue.length ? '' : 'empty'}}"> {{dateCurrentValue || '选择日期' }}</view>
+  <view class="panel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}">
+    <view class="panel-label">日期</view>
+    <view class="panel-text {{dateValue.length ? '' : 'empty'}}"> {{dateCurrentValue || '选择日期' }}</view>
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
   </view>
 </block>
diff --git a/src/radio-group/radio-group.ts b/src/radio-group/radio-group.ts
index 5d8badb1b..13ae3c773 100644
--- a/src/radio-group/radio-group.ts
+++ b/src/radio-group/radio-group.ts
@@ -39,7 +39,7 @@ export default class RadioGroup extends SuperComponent {
 
   observers = {
     value(v) {
-      this.getChilds().forEach((item) => {
+      this.getChildren().forEach((item) => {
         item.setData({
           checked: v === item.data.value,
         });
@@ -51,7 +51,7 @@ export default class RadioGroup extends SuperComponent {
   };
 
   methods = {
-    getChilds() {
+    getChildren() {
       let items = this.$children;
 
       if (!items?.length) {
diff --git a/src/side-bar/side-bar.ts b/src/side-bar/side-bar.ts
index e2d76efb3..a371d9a45 100644
--- a/src/side-bar/side-bar.ts
+++ b/src/side-bar/side-bar.ts
@@ -10,17 +10,17 @@ const relationsPath = '../side-bar-item/side-bar-item';
 export default class SideBar extends SuperComponent {
   externalClasses = [`${prefix}-class`];
 
-  childs = [];
+  children = [];
 
   relations: RelationsOptions = {
     [relationsPath]: {
       type: 'child',
       linked(child) {
-        this.childs.push(child);
+        this.children.push(child);
       },
       unlinked(child) {
-        const index = this.childs.findIndex((item) => item === child);
-        this.childs.splice(index, 1);
+        const index = this.children.findIndex((item) => item === child);
+        this.children.splice(index, 1);
       },
     },
   };
diff --git a/src/step-item/step-item.less b/src/step-item/step-item.less
index 8e9b1f87a..38d5b2a74 100644
--- a/src/step-item/step-item.less
+++ b/src/step-item/step-item.less
@@ -60,6 +60,7 @@
 
     &__dot--@{value} {
       border-color: @@dotBorderColorVar;
+      background-color: @@dotBorderColorVar;
     }
   });
 }
@@ -105,11 +106,6 @@
     vertical-align: top;
     font-size: @font-size-base;
     position: relative;
-
-    &--finsh,
-    &--process {
-      color: @brand-color;
-    }
   }
 
   &__dot {
@@ -119,14 +115,6 @@
     border-width: 1px;
     border-style: solid;
     box-sizing: border-box;
-
-    &--finish {
-      background-color: @step-item-process-dot-border-color;
-    }
-
-    &--error {
-      background-color: @step-item-error-dot-border-color;
-    }
   }
 
   &__content {
diff --git a/src/tree-select/__test__/indes.test.js b/src/tree-select/__test__/index.test.js
similarity index 100%
rename from src/tree-select/__test__/indes.test.js
rename to src/tree-select/__test__/index.test.js

From 9181dbc60d4a78bb5d8d63f31ba7308caaf3478a Mon Sep 17 00:00:00 2001
From: Hwaphon <969489625@qq.com>
Date: Mon, 17 Jul 2023 22:20:44 +0800
Subject: [PATCH 148/202] Fix/20230715 wrong label (#2195)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(slider, message): 修复message nowrap classPrefix 失效 & slider 组件标签大括号异常

message nowrap 属性中的 classPrefix 被当做字符串处理，导致无法正常使用。slider 组件中多出来了一对闭合大括号，导致无法正常匹配

* fix(message 组件): marquee 还原

变量还原

* fix(message): 多余中括号移除

多余中括号移除

---------

Co-authored-by: gao.ghf <gao.ghf@alibaba-inc.com>
---
 src/message/message.wxml | 6 +-----
 src/slider/slider.wxml   | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/message/message.wxml b/src/message/message.wxml
index e4e7fdf05..8c669c1d1 100644
--- a/src/message/message.wxml
+++ b/src/message/message.wxml
@@ -1,8 +1,6 @@
 <wxs src="./message.wxs" module="this"></wxs>
 <wxs src="../common/utils.wxs" module="_" />
-
 <import src="../common/template/icon.wxml" />
-
 <block wx:if="{{visible}}">
   <view
     class="{{classPrefix}} class {{prefix}}-class {{classPrefix}}--{{theme}}"
@@ -15,9 +13,8 @@
       <slot name="icon" />
       <template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ariaHidden: true, ..._icon }}" />
     </view>
-
     <view
-      class="{{classPrefix}}__text-wrap {{marquee ? '{{classPrefix}}__text-nowrap' : ''}}"
+      class="{{classPrefix}}__text-wrap {{marquee ? classPrefix + '__text-nowrap' : ''}}"
       style="text-align: {{align}}"
       id="{{classPrefix}}__text-wrap"
     >
@@ -43,7 +40,6 @@
       bind:complete="handleLinkClick"
     />
     <slot name="link" />
-
     <view class="{{classPrefix}}__icon--right" bind:tap="handleClose">
       <slot name="close-btn" />
       <template
diff --git a/src/slider/slider.wxml b/src/slider/slider.wxml
index f172647c2..00b5a964f 100644
--- a/src/slider/slider.wxml
+++ b/src/slider/slider.wxml
@@ -22,7 +22,7 @@
           style="left:{{item.left}}px; transform: translateX(-50%);"
           aria-hidden="{{true}}"
         >
-          <view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}}}">
+          <view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}">
             {{scaleTextArray[index]}}
           </view>
         </view>

From 3368cd469a1f235085b6ef88d476d7c0996bc0de Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Mon, 17 Jul 2023 22:21:15 +0800
Subject: [PATCH 149/202] docs(action-sheet): enable show-overlay (#2196)

---
 src/action-sheet/README.en-US.md | 1 +
 src/action-sheet/README.md       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/action-sheet/README.en-US.md b/src/action-sheet/README.en-US.md
index 33ae0640e..5af0d7877 100644
--- a/src/action-sheet/README.en-US.md
+++ b/src/action-sheet/README.en-US.md
@@ -11,6 +11,7 @@ count | Number | 8 | \- | N
 description | String | - | `0.29.0` | N
 items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
 show-cancel | Boolean | true | \- | N
+show-overlay | Boolean | true | \- | N
 theme | String | list | options：list/grid | N
 visible | Boolean | false | required | Y
 default-visible | Boolean | undefined | required。uncontrolled property | Y
diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index 732f6ac0c..b98d36613 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -93,6 +93,7 @@ count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有
 description | String | - | `0.29.0`。动作面板描述文字 | N
 items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
 show-cancel | Boolean | true | 是否显示取消按钮 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏 | Y
 default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y

From a31d475c8cd462c797d823357e32a1b223187af6 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Tue, 18 Jul 2023 22:21:23 +0800
Subject: [PATCH 150/202] fix(picker): column index is always zero (#2188)

---
 src/picker-item/picker-item.ts | 5 +++--
 src/picker/picker.ts           | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/picker-item/picker-item.ts b/src/picker-item/picker-item.ts
index 8be851149..b95f5c39c 100644
--- a/src/picker-item/picker-item.ts
+++ b/src/picker-item/picker-item.ts
@@ -51,6 +51,7 @@ export default class PickerItem extends SuperComponent {
     duration: 0, // 滚动动画延迟
     value: '',
     curIndex: 0,
+    columnIndex: 0,
     labelAlias: 'label',
     valueAlias: 'value',
   };
@@ -76,7 +77,7 @@ export default class PickerItem extends SuperComponent {
     },
 
     onTouchEnd() {
-      const { offset, labelAlias, valueAlias } = this.data;
+      const { offset, labelAlias, valueAlias, columnIndex } = this.data;
       const { options } = this.properties;
 
       if (offset === this.StartOffset) {
@@ -99,7 +100,7 @@ export default class PickerItem extends SuperComponent {
         this._selectedLabel = options[index]?.[labelAlias];
         this.$parent?.triggerColumnChange({
           index,
-          column: this.columnIndex || 0,
+          column: columnIndex,
         });
       });
     },
diff --git a/src/picker/picker.ts b/src/picker/picker.ts
index fe961cedd..483fc761c 100644
--- a/src/picker/picker.ts
+++ b/src/picker/picker.ts
@@ -52,6 +52,7 @@ export default class Picker extends SuperComponent {
       this.$children.forEach((child, index) => {
         child.setData({
           value: value?.[index] ?? defaultValue?.[index] ?? '',
+          columnIndex: index,
         });
         child.update();
       });

From af6900872f5846489bff86cc4853f6d04d6dc282 Mon Sep 17 00:00:00 2001
From: ccccpj <ccccpj@outlook.com>
Date: Tue, 18 Jul 2023 22:24:37 +0800
Subject: [PATCH 151/202] docs: add external-class content (#2200)

---
 src/action-sheet/README.md      |  7 ++++++-
 src/avatar/README.md            | 17 +++++++++++++++--
 src/back-top/README.md          |  7 ++++++-
 src/badge/README.md             |  7 ++++++-
 src/cell/README.md              | 21 +++++++++++++++++++--
 src/checkbox/README.md          | 10 +++++++++-
 src/collapse/README.md          |  7 ++++++-
 src/count-down/README.md        |  7 ++++++-
 src/date-time-picker/README.md  |  8 +++++++-
 src/dialog/README.md            |  9 ++++++++-
 src/dropdown-menu/README.md     | 20 ++++++++++++++++++--
 src/empty/README.md             |  7 ++++++-
 src/image/README.md             |  6 +++++-
 src/indexes-anchor/README.md    |  6 +++++-
 src/indexes/README.md           |  7 ++++++-
 src/input/README.md             | 12 +++++++++++-
 src/link/README.md              |  9 ++++++++-
 src/loading/README.md           |  7 ++++++-
 src/message/README.md           |  9 ++++++++-
 src/navbar/README.md            | 12 +++++++++++-
 src/notice-bar/README.md        |  9 ++++++++-
 src/popup/README.md             |  6 +++++-
 src/progress/README.md          |  7 ++++++-
 src/pull-down-refresh/README.md |  8 +++++++-
 src/radio/README.md             | 10 +++++++++-
 src/rate/README.md              |  7 ++++++-
 src/result/README.md            |  8 +++++++-
 src/search/README.md            | 10 +++++++++-
 src/skeleton/README.md          |  7 ++++++-
 src/slider/README.md            | 10 +++++++++-
 src/stepper/README.md           |  8 +++++++-
 src/steps/README.md             | 15 +++++++++++++--
 src/sticky/README.md            |  7 ++++++-
 src/tab-bar/README.md           |  6 +++++-
 src/tabs/README.md              | 10 +++++++++-
 src/tag/README.md               | 11 +++++++++--
 src/textarea/README.md          |  9 ++++++++-
 src/toast/README.md             |  4 ++++
 38 files changed, 305 insertions(+), 42 deletions(-)

diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index b98d36613..b552212e0 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -97,7 +97,6 @@ show-overlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏 | Y
 default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y
-external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-content', 't-class-cancel']` | N
 
 ### ActionSheet Events
 
@@ -107,6 +106,12 @@ cancel | \- | 点击取消按钮时触发
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
 
+### ActionSheet 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-cancel | 取消样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/avatar/README.md b/src/avatar/README.md
index 409f21de0..61953b18b 100644
--- a/src/avatar/README.md
+++ b/src/avatar/README.md
@@ -62,7 +62,6 @@ isComponent: true
 alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
 badge-props | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
 bordered | Boolean | false | 已废弃。是否显示外边框 | N
-external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
 hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
 icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 image | String | - | 图片地址 | N
@@ -76,16 +75,30 @@ size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等 |
 -- | -- | --
 error | \- | 图片加载失败时触发
 
+### Avatar 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-image | 图片样式类
+t-class-icon | 图标样式类
+t-class-alt | 替代文本样式类
+t-class-content | 内容样式类
+
 ### AvatarGroup Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 cascading | String | 'left-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
 collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N
-external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-content']` | N
 max | Number | - | 能够同时显示的最多头像数量 | N
 size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
 
+### AvatarGroup 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-image | 图片样式类
+t-class-content | 内容样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/back-top/README.md b/src/back-top/README.md
index d8b9a1e2e..3e6c441fa 100644
--- a/src/back-top/README.md
+++ b/src/back-top/README.md
@@ -29,7 +29,6 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-external-classes | Array | - | 组件类名，分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N
 fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
 icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` | N
 text | String | '' | 文案 | N
@@ -41,6 +40,12 @@ theme | String | round | 预设的样式类型。可选项：round/half-round/ro
 -- | -- | --
 to-top | \- | 点击触发
 
+### BackTop 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-text | 文本样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/badge/README.md b/src/badge/README.md
index c3a6e3dcd..b5d773e6d 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -39,13 +39,18 @@ color | String | - | 颜色 | N
 content | String | - | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 | N
 count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 dot | Boolean | false | 是否为红点 | N
-external-classes | Array | - | 组件类名，分别用于设置外层元素、默认内容、右上角内容等元素类名。`['t-class', 't-class-content', 't-class-count']` | N
 max-count | Number | 99 | 封顶的数字值 | N
 offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
 shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
 
+### Badge 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-count | 计数样式类
+t-class-content | 内容样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/cell/README.md b/src/cell/README.md
index cff38d94c..0edfe484b 100644
--- a/src/cell/README.md
+++ b/src/cell/README.md
@@ -47,7 +47,6 @@ align | String | middle | 内容的对齐方式，默认居中对齐。可选项
 arrow | Boolean | false | 是否显示右侧箭头 | N
 bordered | Boolean | true | 是否显示下边框 | N
 description | String / Slot | - | 下方内容描述 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、标题类名、下方描述内容类名、右侧说明文字类名、激活态类名、图片类名、左侧内容、左侧图标类名、右侧内容、右侧图标类名 等。`['t-class', 't-class-title', 't-class-description', 't-class-note', 't-class-hover', 't-class-image', 't-class-left', 't-class-left-icon', 't-class-right', 't-class-right-icon']` | N
 hover | Boolean | - | 是否开启点击反馈 | N
 image | String / Slot | - | 主图 | N
 jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N
@@ -64,15 +63,33 @@ url | String | - | 点击后跳转链接地址。如果值为空，则表示不
 -- | -- | --
 click | - | 右侧内容
 
+### Cell 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-title | 标题样式类
+t-class-description | 下方描述内容样式类
+t-class-note | 右侧说明文字样式类
+t-class-hover | 悬停样式类
+t-class-image | 图片样式类
+t-class-left | 左侧内容样式类
+t-class-left-icon | 左侧图标样式类
+t-class-right | 右侧内容样式类
+t-class-right-icon | 右侧图标样式类
+
 ### CellGroup Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 bordered | Boolean | - | 是否显示组边框 | N
-external-classes | Array | - | 组件类名。`['t-class']` | N
 theme | String | default | 单元格风格。可选项：default/card | N
 title | String | - | 单元格组标题 | N
 
+### CellGroup 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-title | 标题样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index 379b5a97a..d0191cb3e 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -72,7 +72,6 @@ default-checked | Boolean | undefined | 是否选中。非受控属性 | N
 content | String / Slot | - | 多选框内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
 disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
 icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
 indeterminate | Boolean | false | 是否为半选 | N
 label | String / Slot | - | 主文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
@@ -89,6 +88,15 @@ value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \|
 -- | -- | --
 change | `(checked: boolean)` | 值变化时触发
 
+### Checkbox 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-label | 标签样式类
+t-class-icon | 图标样式类
+t-class-content | 内容样式类
+t-class-border | 边框样式类
+
 ### CheckboxGroup Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
diff --git a/src/collapse/README.md b/src/collapse/README.md
index 849ec7fc4..d3e1c61f2 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -74,13 +74,18 @@ change | `(value: CollapseValue)` | 切换面板时触发，返回变化的值
 content | String / Slot | - | 折叠面板内容 | N
 disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N
 expand-icon | Boolean / Slot | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 | N
-external-classes | Array | - | 组件类名，用于组件外层元素、标题、内容。`['t-class', 't-class-header', 't-class-content']` | N
 header | String / Slot | - | 面板头内容 | N
 header-left-icon | String / Slot | - | 面板头左侧图标 | N
 header-right-content | String / Slot | - | 面板头的右侧区域，一般用于呈现面板操作 | N
 placement | String | bottom | `0.34.0`。选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
 
+### CollapsePanel 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-header | 头部样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/count-down/README.md b/src/count-down/README.md
index e5ab0e88f..b2b6a9bc8 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -39,7 +39,6 @@ size | String `v0.5.1` | 'medium' | 倒计时尺寸。可选项：small/medium/l
 split-with-unit `v0.5.1` | Boolean | false | 使用时间单位分割 | N
 theme | String `v0.5.1` | 'default' | 倒计时风格。可选项：default/round/square | N
 time | Number | - | 必需。倒计时时长，单位毫秒 | Y
-external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、计时器类型、分隔线类名 等。`['t-class', 't-class-count', 't-class-split']` | N
 
 ### CountDown Events
 
@@ -48,6 +47,12 @@ external-classes | Array | - | 组件类名，分别用于设置 组件外层类
 change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
 finish | \- | 倒计时结束时触发
 
+### CountDown 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-count | 计数样式类
+t-class-split | 分隔线样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md
index 06ed5ec35..e40d22f98 100644
--- a/src/date-time-picker/README.md
+++ b/src/date-time-picker/README.md
@@ -52,7 +52,6 @@ isComponent: true
 cancel-btn | String | 取消 | 取消按钮文字 | N
 confirm-btn | String | - | 确定按钮文字 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
-external-classes | Array | - | 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名。`['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']` | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
 header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
@@ -74,6 +73,13 @@ close | `(trigger: TriggerSource)` | `1.0.1`。关闭时触发。[详细类型
 confirm | `(value: DateValue)` | `1.0.1`。确认按钮点击时触发
 pick | `(value: DateValue)` | 选中值发生变化时触发
 
+### DateTimePicker 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-confirm | 确认样式类
+t-class-cancel | 取消样式类
+t-class-title | 标题样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/dialog/README.md b/src/dialog/README.md
index 3ee841ce1..c1b69b8b9 100644
--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@@ -66,7 +66,6 @@ close-btn | Boolean / Object | false | `0.31.0`。是否展示关闭按钮，值
 close-on-overlay-click | Boolean | undefined | 点击蒙层时是否触发关闭事件 | N
 confirm-btn | String / Object / Slot | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 | N
 content | String / Slot | - | 内容 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、组件内容部分、确认按钮、取消按钮 等元素类名。`['t-class', 't-class-content', 't-class-confirm', 't-class-cancel']` | N
 overlay-props | Object | {} | 透传至 Overlay 组件 | N
 prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
@@ -83,6 +82,14 @@ close | `(trigger: DialogEventSource)` | 关闭事件，点击 取消按钮 或
 confirm | - | 如果“确认”按钮存在，则点击“确认”按钮时触发
 overlay-click | - | 如果蒙层存在，点击蒙层时触发
 
+### Dialog 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-confirm | 确认样式类
+t-class-cancel | 取消样式类
+t-class-action | 操作样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index dee2572fc..bda36b9c5 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -48,16 +48,22 @@ isComponent: true
 -- | -- | -- | -- | --
 close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
 duration | String / Number | 200 | 动画时长 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、菜单标签、菜单图标类名 等。`['t-class', 't-class-item', 't-class-label', 't-class-icon']` | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
 z-index | Number | 11600 | 菜单栏 z-index 层级 | N
 
+### DropdownMenu 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-item | 选项样式类
+t-class-label | 标签样式类
+t-class-icon | 图标样式类
+
 ### DropdownItem Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 disabled | Boolean | false | 是否禁用 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、菜单列、菜单列选项、菜单列选项标签、树形菜单、树形菜单列等类名。`['t-class','t-class-content', 't-class-column', 't-class-column-item', 't-class-column-item-label',  't-class-footer']` | N
 keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N
 label | String | - | 标题 | N
 multiple | Boolean | false | 是否多选 | N
@@ -76,6 +82,16 @@ confirm | `(value: DropdownValue)` | 点击确认时触发
 reset | \- | 点击重置时触发
 close | \- | 关闭时触发
 
+### DropdownItem 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-column | 菜单列样式类
+t-class-column-item | 菜单列选项样式类
+t-class-column-item-label | 菜单列选项标签样式类
+t-class-footer | 底部样式类
+
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
diff --git a/src/empty/README.md b/src/empty/README.md
index 5ba40a262..128be9946 100644
--- a/src/empty/README.md
+++ b/src/empty/README.md
@@ -41,10 +41,15 @@ isComponent: true
 -- | -- | -- | -- | --
 action | Slot | - | 操作按钮 | N
 description | String / Slot | - | 描述文字 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-description', 't-class-image', 't-class-actions']` | N
 icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
 image | String / Slot | - | 图片地址 | N
 
+### Empty 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/image/README.md b/src/image/README.md
index 605a1e9ac..a52a8fc36 100644
--- a/src/image/README.md
+++ b/src/image/README.md
@@ -46,7 +46,6 @@ isComponent: true
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 error | String / Slot | 'default' | 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” | N
-external-classes | Array | - | 组件类名，分别用于设置加载组件外层元素，中间内容等元素类名。`['t-class', 't-class-load']` | N
 height | String / Number | - | 高度，默认单位为`px` | N
 lazy | Boolean | false | 是否开启图片懒加载 | N
 loading | String / Slot | 'default' | 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” | N
@@ -64,6 +63,11 @@ width | String / Number | - | 宽度，默认单位为`px` | N
 error | \- | 图片加载失败时触发
 load | \- | 图片加载完成时触发
 
+### Image 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-load | 加载样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/indexes-anchor/README.md b/src/indexes-anchor/README.md
index dd0003e59..43a5deb6c 100644
--- a/src/indexes-anchor/README.md
+++ b/src/indexes-anchor/README.md
@@ -5,5 +5,9 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class']` | N
 index | String / Number | - | 索引字符 | N
+
+### IndexesAnchor 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
\ No newline at end of file
diff --git a/src/indexes/README.md b/src/indexes/README.md
index 467121760..f119975d8 100644
--- a/src/indexes/README.md
+++ b/src/indexes/README.md
@@ -58,9 +58,14 @@ select | `(index: string \| number)` | 点击侧边栏时触发事件
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class']` | N
 index | String / Number | - | 索引字符 | N
 
+### IndexesAnchor 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-sidebar | 侧边栏样式类
+t-class-sidebar-item | 侧边栏选项样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/input/README.md b/src/input/README.md
index 7e89cca14..fb35eb8ef 100644
--- a/src/input/README.md
+++ b/src/input/README.md
@@ -84,7 +84,6 @@ borderless | Boolean | false | 是否开启无边框模式 | N
 clearable | Boolean / Object | false | 是否可清空，默认不启动。值为 `true` 表示使用默认清除空按钮，值为 `Object` 表示透传至 `icon` | N
 disabled | Boolean | false | 是否禁用输入框 | N
 error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N
-external-classes | Array | - | 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名。`['t-class','t-class-prefix-icon', 't-class-label', 't-class-input',  't-class-clearable', 't-class-suffix', 't-class-suffix-icon', 't-class-tips']` | N
 format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
 label | String / Slot | - | 左侧文本。 | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
@@ -134,6 +133,17 @@ keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生
 nicknamereview | `(pass: boolean, timeout: boolean)`| 用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效
 click `v0.32.0`| `(trigger: InputTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。<br/>`type InputTrigger = 'suffix' \| 'suffix-icon';`<br/>
 
+### CellGroup 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-prefix-icon | 前置图标样式类
+t-class-label | 标题样式类
+t-class-input | 标题样式类
+t-class-clearable | 标题样式类
+t-class-suffix | 后置样式类
+t-class-suffix-icon` | 后置图标样式类
+t-class-tips | 提示样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/link/README.md b/src/link/README.md
index 51843ca1f..7766ec737 100644
--- a/src/link/README.md
+++ b/src/link/README.md
@@ -73,7 +73,6 @@ hover | Boolean | - | 是否开启点击反馈 | N
 suffix-icon | String / Object / Slot | - | 前置图标 | N
 theme | String | default | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
 underline | Boolean | - | 是否显示链接下划线 | N
-external-classes | Array | - | 样式类名。`['t-class', 't-class-hover', 't-class-prefix-icon', 't-class-content', 't-class-suffix-icon']` | N
 ### Link Events
 
 名称 | 参数 | 描述
@@ -82,6 +81,14 @@ complete | \- | 页面链接执行完成后触发（失败或成功均会触发
 fail | \- | 页面链接跳转失败后触发
 success | \- | 页面链接跳转成功后触发
 
+### Link 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-hover | 悬停样式类
+t-class-prefix-icon | 前置图标样式类
+t-class-content | 内容样式类
+t-class-suffix-icon` | 后置图标样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/loading/README.md b/src/loading/README.md
index 433f47602..037b52166 100644
--- a/src/loading/README.md
+++ b/src/loading/README.md
@@ -57,7 +57,6 @@ isComponent: true
 -- | -- | -- | -- | --
 delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N
-external-classes | Array | - | 组件类名，分别用于设置加载组件外层元素，加载组件文本，加载组件指示符，加载指示符内侧同心圆等元素类名。`['t-class', 't-class-text', 't-class-indicator']` | N
 indicator | Boolean / Slot | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 inherit-color | Boolean | false | 是否继承父元素颜色 | N
 layout | String | horizontal | 对齐方式。可选项：horizontal/vertical | N
@@ -69,6 +68,12 @@ size | String | '40rpx' | 尺寸，示例：40rpx/20px | N
 text | String / Slot | - | 加载提示文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 theme | String | circular | 加载组件类型。可选项：circular/spinner/dots | N
 
+### Loading 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-text | 文本样式类
+t-class-indicator | 指示符样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/message/README.md b/src/message/README.md
index 1a556c35a..0115df4e9 100644
--- a/src/message/README.md
+++ b/src/message/README.md
@@ -50,7 +50,6 @@ align | String | left | 文本对齐方式。可选项：left/center。TS 类型
 close-btn | String / Boolean / Object / Slot | false | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'user'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件。| N
 content | String / Slot | - | 用于自定义消息弹出内容 | N
 duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
-external-classes | Array | - | 样式类名，分别用于设置 组件外层、消息内容、左侧图标、操作按钮、关闭按钮等元素类名。`['t-class', 't-class-content', 't-class-icon', 't-class-link', 't-class-close-btn']` | N
 icon | String / Boolean / Object / Slot | true | 消息提醒前面的图标，可以自定义。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string ，如：'info'，则显示组件内置图标。值类型为 object ，则会透传至 icon 组件。| N
 marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/message/type.ts) | N
 offset | Array | - | 相对于 placement 的偏移量，默认单位 rpx。示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array<string \| number>` | N
@@ -68,6 +67,14 @@ close-btn-click | - | 当关闭按钮存在时，用户点击关闭按钮触发
 duration-end | \- | 计时结束后触发
 link-click | - | 当`link`链接存在时，点击链接文本时触发
 
+### Message 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-icon | 图标样式类
+t-class-link | 链接样式类
+t-class-close-btn | 关闭按钮样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/navbar/README.md b/src/navbar/README.md
index 109b3c5ea..d73bc0c43 100644
--- a/src/navbar/README.md
+++ b/src/navbar/README.md
@@ -50,7 +50,6 @@ isComponent: true
 animation | Boolean | true | 是否添加动画效果 | N
 capsule | Slot | - | 左侧胶囊区域 | N
 delta | Number | 1 | 后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack | N
-external-classes | Array | - | 组件类名，分别用于设置组件外层元素、标题、左侧图标、首页图标、胶囊等元素类名。`['t-class', 't-class-title', 't-class-left', 't-class-center', 't-class-capsule']` | N
 fixed | Boolean | true | 是否固定在顶部 | N
 left | Slot | - | `0.26.0`。左侧内容区域 | N
 left-arrow | Boolean | false | `0.26.0`。是否展示左侧箭头 | N
@@ -67,6 +66,17 @@ fail | \- | navigateBack 执行失败后触发
 go-back | \- | 点击左侧箭头时触发
 success | \- | navigateBack 执行成功后触发
 
+### Navbar 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-title | 标题样式类
+t-class-left | 左侧内容样式类
+t-class-center | 中间内容样式类
+t-class-left-icon | 左侧图标样式类
+t-class-home-icon` | 首页图标样式类
+t-class-capsule | 左侧胶囊区域样式类
+t-class-nav-btn | 导航按钮样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md
index 50acca65b..cde782339 100644
--- a/src/notice-bar/README.md
+++ b/src/notice-bar/README.md
@@ -72,7 +72,6 @@ isComponent: true
 -- | -- | -- | -- | --
 content | String / Array / Slot | - | 文本内容 | N
 direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。`['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon']` | N
 operation | String / Slot | - | 右侧额外信息 | N
 marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
 interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】。 | N
@@ -88,6 +87,14 @@ default-visible | Boolean | false | 显示/隐藏。非受控属性 | N
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
 
+### NoticeBar 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-prefix-icon | 前置图标样式类
+t-class-operation | 右侧额外信息样式类
+t-class-suffix-icon` | 后置图标样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/popup/README.md b/src/popup/README.md
index 8008f5bb8..cf76005a7 100644
--- a/src/popup/README.md
+++ b/src/popup/README.md
@@ -41,7 +41,6 @@ close-btn | Boolean / Slot | - | 关闭按钮，值类型为 Boolean 时表示
 close-on-overlay-click | Boolean | true | 点击遮罩层是否关闭 | N
 content | String / Slot | - | 浮层里面的内容 | N
 duration | Number | 240 | 动画过渡时间 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、遮罩层、浮层内容 等元素类名。`['t-class', 't-class-overlay', 't-class-content']` | N
 overlay-props | Object | {} | 遮罩层的属性，透传至 overlay | N
 placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
 prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
@@ -56,6 +55,11 @@ z-index | Number | 11500 | 组件层级，Web 侧样式默认为 5500，移动
 -- | -- | --
 visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
 
+### Popup 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/progress/README.md b/src/progress/README.md
index d4fc00203..e428d6aef 100644
--- a/src/progress/README.md
+++ b/src/progress/README.md
@@ -62,7 +62,6 @@ isComponent: true
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 color | String / Object / Array | '' | 进度条颜色。示例：'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或  `{ from: '#000', to: '#000' }` 等。TS 类型：`string \| Array<string> \| Record<string, string>` | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层、进度文字等元素类名。。`['t-class', 't-class-bar', 't-class-label']` | N
 label | String / Boolean / Slot | true | 进度百分比，可自定义 | N
 percentage | Number | 0 | 进度条百分比 | N
 status | String | - | 进度条状态。可选项：success/error/warning/active。TS 类型：`StatusEnum` `type StatusEnum = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
@@ -70,6 +69,12 @@ stroke-width | String / Number | - | 进度条线宽，默认单位 `px`。| N
 theme | String | line | 进度条风格。值为 line，标签（label）显示在进度条右侧；值为 plump，标签（label）显示在进度条里面；值为 circle，标签（label）显示在进度条正中间。可选项：line/plump/circle。TS 类型：`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/progress/type.ts) | N
 track-color | String | '' | 进度条未完成部分颜色 | N
 
+### Progress 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-bar | 进度文字样式类
+t-class-label | 标签样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/pull-down-refresh/README.md b/src/pull-down-refresh/README.md
index bfbae3085..448734389 100644
--- a/src/pull-down-refresh/README.md
+++ b/src/pull-down-refresh/README.md
@@ -35,7 +35,6 @@ isComponent: true
 -- | -- | -- | -- | --
 enable-back-to-top | Boolean | true | `1.1.5`。iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 | N
 enable-passive | Boolean | false | `1.1.5`。开启 passive 特性，能优化一定的滚动性能 | N
-external-classes | Array | - | 加载loading样式。`['t-class', 't-class-loading','t-class-text', 't-class-indicator']` | N
 loading-bar-height | String / Number | 50 | 加载中下拉高度，如果值为数字则单位是：'px' | N
 loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/pull-down-refresh/type.ts) | N
 loading-texts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
@@ -56,6 +55,13 @@ change | `(value: boolean)` | 下拉或收起时触发，用户手势往下滑
 refresh | \- | 结束下拉时触发
 timeout | \- | 刷新超时触发
 
+### PullDownRefresh 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-loading | 加载样式类
+t-class-text | 文本样式类
+t-class-indicator | 指示样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/radio/README.md b/src/radio/README.md
index c53639761..3a09efa80 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -60,7 +60,6 @@ default-checked | Boolean | undefined | 是否选中。非受控属性 | N
 content | String / Slot | - | 单选内容 | N
 content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
 disabled | Boolean | undefined | 是否为禁用态 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层、单选图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
 icon | String / Array / Slot | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
 label | String / Slot | - | 主文案 | N
 max-content-row | Number | 5 | 内容最大行数限制 | N
@@ -74,6 +73,15 @@ value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`Ra
 -- | -- | --
 change | `(checked: boolean)` | 值变化时触发
 
+### Radio 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-label | 标签样式类
+t-class-icon | 图标样式类
+t-class-content | 内容样式类
+t-class-border` | 边框样式类
+
 ### RadioGroup Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
diff --git a/src/rate/README.md b/src/rate/README.md
index aab386c38..6dc55a693 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -68,7 +68,6 @@ allow-half | Boolean | false | 是否允许半选 | N
 color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
 count | Number | 5 | 评分的数量 | N
 disabled | Boolean | - | 是否禁用评分 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、评分图标类名、辅助文字类名。`['t-class', 't-class-icon', 't-class-text']` | N
 gap | Number | 8 | 评分图标的间距 | N
 icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N
 show-text | Boolean | false | 是否显示对应的辅助文字 | N
@@ -84,6 +83,12 @@ variant | String | outline | 废弃。形状类型，有描边类型和填充类
 -- | -- | --
 change | `(value: number)` | 评分数改变时触发
 
+### Rate 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-icon` | 图标样式类
+t-class-text | 文本样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/result/README.md b/src/result/README.md
index ea8ab00c5..7cdfb8333 100644
--- a/src/result/README.md
+++ b/src/result/README.md
@@ -58,12 +58,18 @@ isComponent: true
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 description | String / Slot | - | 描述文字 | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-image', 't-class-title', 't-class-description']` | N
 icon | String / Boolean / Object | true | 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标。 | N
 image | String / Slot | - | 图片地址 | N
 theme | String | default | 内置主题。可选项：default/success/warning/error | N
 title | String / Slot | '' | 标题 | N
 
+### Result 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-image | 图片样式类
+t-class-title | 标题样式类
+t-class-description | 描述样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/search/README.md b/src/search/README.md
index e7ac73874..eb7847a0e 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -48,7 +48,6 @@ isComponent: true
 action | String / Slot | '' | 自定义右侧操作按钮文字 | N
 center | Boolean | false | 是否居中 | N
 disabled | Boolean | false | 是否禁用 | N
-external-classes | Array | - | 组件外部样式类名，分别用于设置组件外层类名、输入框类名、输入框容器类名、右侧 cancel 文本类名、左侧图标类名、右侧图标类型。`['t-class', 't-class-input', 't-class-input-container', 't-class-action','t-class-left','t-class-clear']` | N
 cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N
 focus | Boolean | false | 是否聚焦 | N
 label | String | '' | 已废弃。左侧文本 | N
@@ -71,6 +70,15 @@ clear | `({ value: string })` | 点击清除时触发
 focus | `({ value: string })` | 聚焦时触发
 submit | `({ value: string })` | 提交时触发
 
+### Search 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-input-container | 输入框容器样式类
+t-class-input | 输入框样式类
+t-class-action | 操作按钮样式类
+t-class-left | 左侧图标样式类
+t-class-clear | 右侧图标样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/skeleton/README.md b/src/skeleton/README.md
index 751c560bc..c59a61b1e 100644
--- a/src/skeleton/README.md
+++ b/src/skeleton/README.md
@@ -49,11 +49,16 @@ isComponent: true
 -- | -- | -- | -- | --
 animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
 delay | Number | 0 | 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
-external-classes | Array | - | 组件类名，分别用于设置组件外层元素、头像、图片、文本等元素类名。`['t-class', 't-class-avatar', 't-class-image', 't-class-text']` | N
 loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
 row-col | Array | [1, 1, 1, { width: '70%' }] | 用于设置行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; size?: string;height?: string; marginRight?: string; marginLeft?: string; margin?: string; type?: 'rect' \| 'circle' \| 'text';}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N
 
+### Skeleton 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-col | 行样式类
+t-class-row | 列样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/slider/README.md b/src/slider/README.md
index 22b74830e..e704d0f3c 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -58,7 +58,6 @@ isComponent: true
 colors | Array | [] | 废弃。颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
 disabled | Boolean | false | 是否禁用组件 | N
 disabled-color | Array | [] | 废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、滑道底部、滑道激活态、滑道禁用态、游标 等元素类名。`['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']` | N
 label | String / Boolean | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N
 marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`。TS 类型：`Record<number, string> \| Array<number>` | N
 max | Number | 100 | 滑块范围最大值 | N
@@ -78,6 +77,15 @@ change | `(value: SliderValue)` | 滑块值变化时触发
 dragend | \- | 结束拖动时触发
 dragstart | \- | 开始拖动时触发
 
+### Slider 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-bar | 滑道底部样式类
+t-class-bar-active | 滑道激活态样式类
+t-class-bar-disabled | 滑道禁用态样式类
+t-class-cursor | 游标样式类
+
 ## FAQ
 
 当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `init` 方法，才能正常渲染。如下：
diff --git a/src/stepper/README.md b/src/stepper/README.md
index fca7f32d8..5ce158551 100644
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@@ -52,7 +52,6 @@ isComponent: true
 -- | -- | -- | -- | --
 disable-input | Boolean | false | 禁用输入框 | N
 disabled | Boolean | false | 禁用全部操作 | N
-external-classes | Array | - | 组件类名，分别用于表示组件外层元素、输入框、右侧递增号、左侧递减号等元素类名。`['t-class', 't-class-input', 't-class-add', 't-class-minus']` | N
 input-width | Number | - | 输入框宽度，默认单位 `px` | N
 max | Number | 100 | 最大值 | N
 min | Number | 0 | 最小值 | N
@@ -70,6 +69,13 @@ blur | `({ type: string \| number })` | 输入框失去焦点时触发
 change | `({ value: string \| number })` | 数值发生变更时触发
 overlimit | `({type: 'minus' \| 'plus'})` | 数值超出限制时触发
 
+### Stepper 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-input | 输入框样式类
+t-class-minus | 左侧递减号样式类
+t-class-plus | 右侧递增号样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/steps/README.md b/src/steps/README.md
index e3515dcd7..49062eed4 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -62,7 +62,6 @@ isComponent: true
 current | String / Number | - | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成 | N
 default-current | String / Number | undefined | 当前步骤，即整个步骤条进度。默认根据步骤下标判断步骤的完成状态，当前步骤为进行中，当前步骤之前的步骤为已完成，当前步骤之后的步骤为未开始。如果每个步骤没有设置 value，current 值为步骤长度则表示所有步骤已完成。如果每个步骤设置了自定义 value，则 current = 'FINISH' 表示所有状态完成。非受控属性 | N
 current-status | String | process | 用于控制 current 指向的步骤条的状态。可选项：default/process/finish/error | N
-external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class']` | N
 layout | String | horizontal | 步骤条方向，有两种：横向和纵向。可选项：horizontal/vertical | N
 readonly | Boolean | false | 只读状态 | N
 sequence | String | positive | 步骤条顺序。可选项：positive/reverse | N
@@ -74,17 +73,29 @@ theme | String | default | 步骤条风格。可选项：default/dot | N
 -- | -- | --
 change | `({current: string \| number, previous: string \| number})` | 当前步骤发生变化时触发
 
+### Steps 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+
 ### StepItem Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 content | String / Slot | '' | 步骤描述。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
-external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra']` | N
 icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 status | String | default | 当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' \| 'process' \| 'finish' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
 sub-step-items | Array | [] | 已废弃。子步骤条，仅支持 layout  = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/step-item/type.ts) | N
 title | String / Slot | '' | 标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 
+### StepItem 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-title | 标题样式类
+t-class-description | 描述样式类
+t-class-extra | 额外样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/sticky/README.md b/src/sticky/README.md
index 02f86f394..07cc913a5 100644
--- a/src/sticky/README.md
+++ b/src/sticky/README.md
@@ -44,7 +44,6 @@ isComponent: true
 -- | -- | -- | -- | --
 container | Function | - | 函数返回容器对应的 NodesRef 节点，将对应节点指定为组件的外部容器，滚动时组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。 | N
 disabled | Boolean | false | 是否禁用组件 | N
-external-classes | Array | - | 根结点外部样式。`['t-class', 't-class-content']` | N
 offset-top | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N
 z-index | Number | 99 | 吸顶时的 z-index | N
 
@@ -53,3 +52,9 @@ z-index | Number | 99 | 吸顶时的 z-index | N
 名称 | 参数 | 描述
 -- | -- | --
 scroll | `(detail: { scrollTop: number, isFixed: boolean })` | 滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶
+
+### Sticky 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
diff --git a/src/tab-bar/README.md b/src/tab-bar/README.md
index 86a9a7088..552b9afa0 100644
--- a/src/tab-bar/README.md
+++ b/src/tab-bar/README.md
@@ -56,7 +56,6 @@ isComponent: true
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 bordered | Boolean | true | 是否显示外边框 | N
-external-classes | Array | - | 组件类名，用于设置外层元素类名。`['t-class']` | N
 fixed | Boolean | true | 是否固定在底部 | N
 safe-area-inset-bottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N
 shape | String | normal | 标签栏的形状。可选项：normal/round | N
@@ -71,6 +70,11 @@ default-value | String / Number / Array | undefined | 当前选中标签的索
 -- | -- | --
 change | `(value: string \| number)` | 选中标签切换时触发
 
+### TabBar 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+
 ### TabBarItem Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
diff --git a/src/tabs/README.md b/src/tabs/README.md
index 350079365..0f980f1b9 100644
--- a/src/tabs/README.md
+++ b/src/tabs/README.md
@@ -113,7 +113,6 @@ Page({
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
-external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名。`['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
 middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
 space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
@@ -133,6 +132,15 @@ change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时
 click | `(value: TabValue, label: string)` | 点击选项卡时触发
 scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
 
+### Tabs 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-item | 选项样式类
+t-class-active | 激活态样式类
+t-class-track | 滚动条样式类
+t-class-content | 内容样式类
+
 ### TabPanel Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
diff --git a/src/tag/README.md b/src/tag/README.md
index 9c2a5a126..96562c793 100644
--- a/src/tag/README.md
+++ b/src/tag/README.md
@@ -49,7 +49,6 @@ isComponent: true
 -- | -- | -- | -- | --
 closable | Boolean | false | 标签是否可关闭 | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
-external-classes | Array | - | 组件类名，用于设置 组件外层元素元素类名。`['t-class']` | N
 icon | String / Object / Slot | - | 标签中的图标，可自定义图标呈现 | N
 max-width | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N
 shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
@@ -64,6 +63,11 @@ variant | String | dark | 标签风格变体。可选项：dark/light/outline/li
 click | - | 点击时触发
 close | - | 如果关闭按钮存在，点击关闭按钮时触发
 
+### Tag 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+
 ### CheckTag Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -73,7 +77,6 @@ default-checked | Boolean | undefined | 标签选中的状态，默认风格（t
 closable | Boolean | false | 已废弃。标签是否可关闭 | N
 content | String / Number / Array / Slot | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[]` | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
-external-classes | Array | - | 组件类名，用于设置 组件外层元素元素类名。`['t-class']` | N
 icon | String / Object / Slot | - | 标签图标 | N
 shape | String | square | 已废弃。标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
@@ -86,6 +89,10 @@ variant | String | dark | `0.26.0`。标签风格变体。可选项：dark/light
 change | `(checked: boolean)` | 状态切换时触发
 click | - | 点击标签时触发
 
+### CheckTag 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/textarea/README.md b/src/textarea/README.md
index 7f42f30ec..ca4efa8ed 100644
--- a/src/textarea/README.md
+++ b/src/textarea/README.md
@@ -68,7 +68,6 @@ confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键
 confirm-type | String | done | 设置键盘右下角按钮的文字，仅在 type='text'时生效。可选项：send/search/next/go/done。TS 类型：`'return' \| 'send' \| 'search' \| 'next' \| 'go' \| 'done'` | N
 cursor-spacing | Number | 0 | 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 | N
 disabled | Boolean | false | 是否禁用文本框 | N
-external-classes | Array | - | 组件类名，分别用于表示组件外层元素、输入框、占位符、标签名等元素类名。`['t-class', 't-class-textarea', 't-class-label, 't-class-indicator]` | N
 focus | Boolean | false | 自动聚焦 | N
 label | String / Slot | - | 左侧文本 | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N
@@ -98,6 +97,14 @@ focus | `(value: TextareaValue)` | 获得焦点时触发
 line-change | `(value: TextareaValue)` | 行高发生变化时触发
 keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
 
+### Textarea 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-textarea | 占位符样式类
+t-class-label | 左侧文本样式类
+t-class-indicator | 计数器样式类
+
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
diff --git a/src/toast/README.md b/src/toast/README.md
index 544c323e9..c5d49eb72 100644
--- a/src/toast/README.md
+++ b/src/toast/README.md
@@ -54,6 +54,10 @@ theme | String | - | 提示类型。可选项：loading/success/error | N
 close | \- | 轻提示隐藏的时候触发
 destory | \- | 轻提示销毁的时候触发
 
+### Toast 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。

From a1781bbc8477b385e5ef22090145f5799bccfc15 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 18 Jul 2023 22:31:35 +0800
Subject: [PATCH 152/202] chore: publish v1.1.13 (#2205)

* chore: publish v1.1.13

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 14 ++++++++++++++
 package.json |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c0b44063..37d36cf2e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,20 @@ toc: false
 docClass: timeline
 ---
 
+ ## 🌈 1.1.13 `2023-07-18` 
+### 🚀 Features
+- `ActionSheet`: 新增 show-overlay 属性 @betavs ([#2194](https://github.com/Tencent/tdesign-miniprogram/pull/2194))
+### 🐞 Bug Fixes
+- `Toast`: 修复close方法类型声明错误 @betavs ([#2191](https://github.com/Tencent/tdesign-miniprogram/pull/2191))
+- `Message`: 修复 `__text-nowrap` 类名前缀错误的问题 @hwaphon ([#2195](https://github.com/Tencent/tdesign-miniprogram/pull/2195))
+- `Slider`: 移除错误的 wxml @hwaphon ([#2195](https://github.com/Tencent/tdesign-miniprogram/pull/2195))
+- `DateTimePicker`: 修复动态传入 mode 时无法正确渲染的问题 @betavs ([#2188](https://github.com/Tencent/tdesign-miniprogram/pull/2188))
+
+### 🚧 Others
+- `docs`: 在 API 模块展示所有的 CSS Variables @anlyyao ([#2182](https://github.com/Tencent/tdesign-miniprogram/pull/2182))
+- `docs`: 将外部样式类的内容独立展示 @ccccpj ([#2200](https://github.com/Tencent/tdesign-miniprogram/pull/2200))
+- 修复一些示例/文档中的拼写错误 @anlyyao ([#2197](https://github.com/Tencent/tdesign-miniprogram/pull/2197)) 
+
 ## 🌈 1.1.12 `2023-07-11` 
 ### 🚀 Features
 - `PullDownRefresh`: 增加 show-scrollbar 属性 @lolhezihehe ([#2163](https://github.com/Tencent/tdesign-miniprogram/pull/2163))
diff --git a/package.json b/package.json
index 76d3b025d..e9d6b45d0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 431dadab79d26d5b2b63b67d8696d672b5387e67 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Fri, 21 Jul 2023 14:19:44 +0800
Subject: [PATCH 153/202] fix(popup): resolve auto focus (#2209)

* fix(popup): resolve auto focus

* test: update snapshot
---
 src/calendar/__test__/__snapshots__/index.test.js.snap         | 2 --
 src/date-time-picker/__test__/__snapshots__/index.test.js.snap | 2 --
 src/dialog/__test__/__snapshots__/index.test.js.snap           | 2 --
 src/dropdown-menu/__test__/__snapshots__/index.test.js.snap    | 2 --
 src/picker/__test__/__snapshots__/index.test.js.snap           | 2 --
 src/popup/popup.wxml                                           | 3 +--
 6 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index f3c429447..c5915d7e9 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -8,8 +8,6 @@ exports[`calendar :base 1`] = `
       bind:visible-change="onVisibleChange"
     >
       <wx-view
-        ariaModal="{{true}}"
-        ariaRole="dialog"
         class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
         style="z-index:11500;"
         bind:transitionend="onTransitionEnd"
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
index 134e5a7fe..f4e389bf4 100644
--- a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -16,8 +16,6 @@ exports[`date-time-picker :base 1`] = `
         bind:visible-change="onPopupChange"
       >
         <wx-view
-          ariaModal="{{true}}"
-          ariaRole="dialog"
           class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
           style="z-index:11500;"
           bind:transitionend="onTransitionEnd"
diff --git a/src/dialog/__test__/__snapshots__/index.test.js.snap b/src/dialog/__test__/__snapshots__/index.test.js.snap
index ed8c9a385..d2c4f0a22 100644
--- a/src/dialog/__test__/__snapshots__/index.test.js.snap
+++ b/src/dialog/__test__/__snapshots__/index.test.js.snap
@@ -11,8 +11,6 @@ exports[`dialog :base 1`] = `
       bind:visible-change="overlayClick"
     >
       <wx-view
-        ariaModal="{{true}}"
-        ariaRole="dialog"
         class="t-popup t-popup--center t-dialog-enter t-dialog-enter-active class t-class"
         style="z-index:11500;"
         bind:transitionend="onTransitionEnd"
diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index d15c7cbb1..9cb51c631 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -87,8 +87,6 @@ exports[`dropdown-menu :base 1`] = `
             bind:visible-change="handleMaskClick"
           >
             <wx-view
-              ariaModal="{{true}}"
-              ariaRole="dialog"
               class="t-popup t-popup--top t-fade-enter-active t-fade-enter-to class t-class"
               style="z-index:11601; position: absolute;"
               bind:transitionend="onTransitionEnd"
diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
index 99a15b9d9..5701a24a3 100644
--- a/src/picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -13,8 +13,6 @@ exports[`picker :base 1`] = `
     bind:visible-change="onPopupChange"
   >
     <wx-view
-      ariaModal="{{true}}"
-      ariaRole="dialog"
       class="t-popup t-popup--bottom t-fade-enter t-fade-enter-active class t-class"
       style="z-index:11500;"
       bind:transitionend="onTransitionEnd"
diff --git a/src/popup/popup.wxml b/src/popup/popup.wxml
index ecbd6f159..35671a964 100644
--- a/src/popup/popup.wxml
+++ b/src/popup/popup.wxml
@@ -6,9 +6,8 @@
   style="{{_._style([utils.getPopupStyles(zIndex), style, customStyle])}}"
   class="{{_.cls(classPrefix, [placement])}} {{transitionClass}} class {{prefix}}-class"
   bind:transitionend="onTransitionEnd"
-  aria-role="dialog"
-  aria-modal="{{ true }}"
 >
+  <!-- 暂时移除：aria-role="dialog" aria-modal="{{ true }}"，关联：https://github.com/Tencent/tdesign-miniprogram/issues/2142 -->
   <view class="{{classPrefix}}__content {{prefix}}-class-content">
     <slot name="content" />
     <slot />

From e9c8f16f3362a026bc6e3636213b3e8599922533 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Fri, 21 Jul 2023 15:42:53 +0800
Subject: [PATCH 154/202] feat(action-sheet): support suffix icon for list type
 (#2210)

---
 src/action-sheet/_example/align/index.js | 4 ++++
 src/action-sheet/action-sheet.less       | 4 ++++
 src/action-sheet/template/list.wxml      | 6 ++++++
 src/action-sheet/type.ts                 | 2 ++
 4 files changed, 16 insertions(+)

diff --git a/src/action-sheet/_example/align/index.js b/src/action-sheet/_example/align/index.js
index 1262b48fb..1cc6c7e11 100644
--- a/src/action-sheet/_example/align/index.js
+++ b/src/action-sheet/_example/align/index.js
@@ -13,18 +13,22 @@ Component({
           {
             label: '选项一',
             icon: 'app',
+            suffixIcon: 'chevron-right',
           },
           {
             label: '选项二',
             icon: 'app',
+            suffixIcon: 'chevron-right',
           },
           {
             label: '选项三',
             icon: 'app',
+            suffixIcon: 'chevron-right',
           },
           {
             label: '选项四',
             icon: 'app',
+            suffixIcon: 'chevron-right',
           },
         ],
       });
diff --git a/src/action-sheet/action-sheet.less b/src/action-sheet/action-sheet.less
index 5897eb305..ab59e79fb 100644
--- a/src/action-sheet/action-sheet.less
+++ b/src/action-sheet/action-sheet.less
@@ -100,6 +100,10 @@
 
       &-icon {
         margin-right: 16rpx;
+
+        &--suffix {
+          margin-left: auto;
+        }
       }
     }
   }
diff --git a/src/action-sheet/template/list.wxml b/src/action-sheet/template/list.wxml
index 37e5dcf34..04f2e349b 100644
--- a/src/action-sheet/template/list.wxml
+++ b/src/action-sheet/template/list.wxml
@@ -10,5 +10,11 @@
   >
     <t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
     <view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
+    <t-icon
+      wx:if="{{item.suffixIcon}}"
+      name="{{item.suffixIcon}}"
+      class="{{classPrefix}}__list-item-icon {{classPrefix}}__list-item-icon--suffix"
+      size="48rpx"
+    ></t-icon>
   </view>
 </template>
diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts
index edf9e914e..b056c85a9 100644
--- a/src/action-sheet/type.ts
+++ b/src/action-sheet/type.ts
@@ -95,4 +95,6 @@ export interface ActionSheetItem {
   label: string;
   color?: string;
   disabled?: boolean;
+  icon?: string;
+  suffixIcon?: string;
 }

From 22a36455ae7858811b00a796aa6f7e761e253a13 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Fri, 21 Jul 2023 15:48:42 +0800
Subject: [PATCH 155/202] fix: resolve slider render (#2211)

---
 src/common/bus.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/bus.ts b/src/common/bus.ts
index 76da2c660..9b35e400d 100644
--- a/src/common/bus.ts
+++ b/src/common/bus.ts
@@ -24,7 +24,7 @@ export default class Bus {
 
     if (listeners) {
       listeners.forEach((func) => func());
-      this.emitted.add(evtName);
     }
+    this.emitted.add(evtName);
   }
 }

From d66e67cfb1bdb8a1552e1dff2cb465319e55ca1b Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Fri, 21 Jul 2023 15:49:07 +0800
Subject: [PATCH 156/202] feat(TreeSelect): support label super long ellipsis
 (#2208)

---
 src/tree-select/tree-select.less | 2 ++
 src/tree-select/tree-select.wxml | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/tree-select/tree-select.less b/src/tree-select/tree-select.less
index 35e5daca6..77f59237c 100644
--- a/src/tree-select/tree-select.less
+++ b/src/tree-select/tree-select.less
@@ -31,6 +31,8 @@
   }
 
   &__item {
+    .ellipsisLn(1);
+
     height: @tree-item-height;
     line-height: @tree-item-height;
     font-size: @tree-item-font-size;
diff --git a/src/tree-select/tree-select.wxml b/src/tree-select/tree-select.wxml
index 5a0f3505a..31725cc9b 100644
--- a/src/tree-select/tree-select.wxml
+++ b/src/tree-select/tree-select.wxml
@@ -51,6 +51,7 @@
         class="{{classPrefix}}__radio-item {{prefix}}-class-right-item"
         t-class-label="{{prefix}}-class-right-item-label"
         value="{{item.value}}"
+        maxLabelRow="{{1}}"
         borderless
         placement="right"
         >{{item.label}}</t-radio
@@ -68,6 +69,7 @@
         wx:key="value"
         placement="right"
         icon="line"
+        maxLabelRow="{{1}}"
         class="{{prefix}}-class-right-item"
         t-class-label="{{prefix}}-class-right-item-label"
         borderless

From a3d2376058d10f24c3d3977f042ebc0b6b1da350 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Fri, 21 Jul 2023 16:47:07 +0800
Subject: [PATCH 157/202] chore: publish v1.1.13-beta

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e9d6b45d0..130842723 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.13",
+  "version": "1.1.13-beta",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 1ac5ba5c9f41e2e30bab8bd7839345214a2d68b7 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 25 Jul 2023 11:33:22 +0800
Subject: [PATCH 158/202] fix: enable remove scroller when component detached
 (#2215)

* fix: enable remove scroller when component detached

* fix: update variable name
---
 src/indexes/indexes.ts    |  6 +-----
 src/mixins/page-scroll.ts | 11 ++++++++---
 src/sticky/sticky.ts      |  6 +-----
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/indexes/indexes.ts b/src/indexes/indexes.ts
index 39d609d0c..2da44129c 100644
--- a/src/indexes/indexes.ts
+++ b/src/indexes/indexes.ts
@@ -29,11 +29,7 @@ export default class Indexes extends SuperComponent {
     },
   };
 
-  behaviors = [
-    pageScrollMixin(function (event) {
-      this.onScroll(event);
-    }),
-  ];
+  behaviors = [pageScrollMixin()];
 
   timer = null;
 
diff --git a/src/mixins/page-scroll.ts b/src/mixins/page-scroll.ts
index e7252e8dc..38ccd2c83 100644
--- a/src/mixins/page-scroll.ts
+++ b/src/mixins/page-scroll.ts
@@ -19,12 +19,16 @@ const onPageScroll = function (event?: IPageScrollOption) {
   });
 };
 
-export default (scroller: Scroller) => {
+export default (funcName = 'onScroll') => {
   return Behavior({
     attached() {
       const page = getCurrentPage<{ pageScroller: Scroller[] }>();
       if (!page) return;
-      const bindScroller = scroller.bind(this);
+      const bindScroller = this[funcName]?.bind(this);
+
+      if (bindScroller) {
+        this._pageScroller = bindScroller;
+      }
 
       if (Array.isArray(page.pageScroller)) {
         page.pageScroller.push(bindScroller);
@@ -39,7 +43,8 @@ export default (scroller: Scroller) => {
     detached() {
       const page = getCurrentPage<{ pageScroller: Scroller[] }>();
       if (!page) return;
-      page.pageScroller = page.pageScroller?.filter((item) => item !== scroller) || [];
+
+      page.pageScroller = page.pageScroller?.filter((item) => item !== this._pageScroller) || [];
     },
   });
 };
diff --git a/src/sticky/sticky.ts b/src/sticky/sticky.ts
index 7166c6797..bb7c74524 100644
--- a/src/sticky/sticky.ts
+++ b/src/sticky/sticky.ts
@@ -18,11 +18,7 @@ export default class Sticky extends SuperComponent {
 
   properties = props;
 
-  behaviors = [
-    pageScrollMixin(function (event) {
-      this.onScroll(event);
-    }),
-  ];
+  behaviors = [pageScrollMixin()];
 
   observers = {
     'offsetTop, disabled, container'() {

From e941403615e2885a284b4f0f522f6abfb3c0c79b Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 25 Jul 2023 14:32:37 +0800
Subject: [PATCH 159/202] fix: resolve grammar problem (#2217)

* fix: resolve grammar problem

* fix: recover unexpected changed
---
 src/common/utils.wxs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/utils.wxs b/src/common/utils.wxs
index be97e3d59..3090b300d 100644
--- a/src/common/utils.wxs
+++ b/src/common/utils.wxs
@@ -42,7 +42,7 @@ function includes(arr, value) {
 function cls(base, arr) {
   var res = [base];
   var i = 0;
-  for (size = arr.length; i < size; i++) {
+  for (var size = arr.length; i < size; i++) {
     var item = arr[i];
 
     if (item && item.constructor === 'Array') {
@@ -105,7 +105,7 @@ function _style(styles) {
         return item != null && item !== '';
       })
       .map(function (item) {
-        return isArray(item) ? style(item) : endsWith(item, ';');
+        return isArray(item) ? _style(item) : endsWith(item, ';');
       })
       .join(' ');
   }

From bba642fd184a75d7eabc2c74782c0f1701f0819a Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Tue, 25 Jul 2023 16:48:51 +0800
Subject: [PATCH 160/202] feat(overlay): enable duration (#2179)

* feat(overlay): enable duration

* test: snap-update

* test: update snapshot

---------

Co-authored-by: lijun <leejimqiu@gmail.com>
---
 src/calendar/__test__/__snapshots__/index.test.js.snap         | 2 +-
 src/date-time-picker/__test__/__snapshots__/index.test.js.snap | 2 +-
 src/dialog/__test__/__snapshots__/index.test.js.snap           | 2 +-
 src/dropdown-menu/__test__/__snapshots__/index.test.js.snap    | 2 +-
 src/overlay/README.md                                          | 2 +-
 src/overlay/__test__/__snapshots__/demo.test.js.snap           | 1 +
 src/overlay/__test__/__snapshots__/index.test.js.snap          | 2 +-
 src/overlay/_example/base/index.wxml                           | 2 +-
 src/overlay/overlay.wxml                                       | 2 +-
 src/picker/__test__/__snapshots__/index.test.js.snap           | 2 +-
 10 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index c5915d7e9..62d1bde0e 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -795,7 +795,7 @@ exports[`calendar :base 1`] = `
           ariaLabel="关闭"
           ariaRole="button"
           class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="z-index:11000;"
+          style="--td-overlay-transition-duration:300ms; z-index:11000;"
           bind:tap="handleClick"
           catch:touchmove="noop"
           bind:transitionend="onTransitionEnd"
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
index f4e389bf4..85ae4c782 100644
--- a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -459,7 +459,7 @@ exports[`date-time-picker :base 1`] = `
             ariaLabel="关闭"
             ariaRole="button"
             class="t-overlay t-fade-enter t-fade-enter-active class"
-            style="z-index:11000;"
+            style="--td-overlay-transition-duration:300ms; z-index:11000;"
             bind:tap="handleClick"
             catch:touchmove="noop"
             bind:transitionend="onTransitionEnd"
diff --git a/src/dialog/__test__/__snapshots__/index.test.js.snap b/src/dialog/__test__/__snapshots__/index.test.js.snap
index d2c4f0a22..44d4bad1b 100644
--- a/src/dialog/__test__/__snapshots__/index.test.js.snap
+++ b/src/dialog/__test__/__snapshots__/index.test.js.snap
@@ -43,7 +43,7 @@ exports[`dialog :base 1`] = `
           ariaLabel="关闭"
           ariaRole="button"
           class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="z-index:11000;"
+          style="--td-overlay-transition-duration:300ms; z-index:11000;"
           bind:tap="handleClick"
           catch:touchmove="noop"
           bind:transitionend="onTransitionEnd"
diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index 9cb51c631..e7106cb1b 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -620,7 +620,7 @@ exports[`dropdown-menu :base 1`] = `
                 ariaLabel="关闭"
                 ariaRole="button"
                 class="t-overlay t-fade-enter-active t-fade-enter-to class"
-                style="z-index:11000; position: absolute;"
+                style="--td-overlay-transition-duration:300ms; z-index:11000; position: absolute;"
                 bind:tap="handleClick"
                 catch:touchmove="noop"
                 bind:transitionend="onTransitionEnd"
diff --git a/src/overlay/README.md b/src/overlay/README.md
index bfc25d310..958df5ded 100644
--- a/src/overlay/README.md
+++ b/src/overlay/README.md
@@ -38,7 +38,7 @@ isComponent: true
 -- | -- | -- | -- | --
 visible | Boolean | false | 是否展示 | N
 zIndex | Number | 11000 | 遮罩层及 | N
-duration | Number | 300 | (暂不支持)背景色过渡时间，单位毫秒 | N
+duration | Number | 300 | 背景色过渡时间，单位毫秒 | N
 backgroundColor | String | - | 遮罩层的背景色 | N
 preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
 
diff --git a/src/overlay/__test__/__snapshots__/demo.test.js.snap b/src/overlay/__test__/__snapshots__/demo.test.js.snap
index d8af8fe83..e522d69b7 100644
--- a/src/overlay/__test__/__snapshots__/demo.test.js.snap
+++ b/src/overlay/__test__/__snapshots__/demo.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Overlay Overlay base demo works fine 1`] = `
 <base>
   <t-overlay
+    duration="{{500}}"
     visible="{{false}}"
     bind:click="handleOverlayClick"
   />
diff --git a/src/overlay/__test__/__snapshots__/index.test.js.snap b/src/overlay/__test__/__snapshots__/index.test.js.snap
index 7a06bb8be..773e5e671 100644
--- a/src/overlay/__test__/__snapshots__/index.test.js.snap
+++ b/src/overlay/__test__/__snapshots__/index.test.js.snap
@@ -7,7 +7,7 @@ exports[`overlay :base 1`] = `
       ariaLabel="关闭"
       ariaRole="button"
       class="t-overlay t-fade-enter t-fade-enter-active class"
-      style="z-index:11000;"
+      style="--td-overlay-transition-duration:300ms; z-index:11000;"
       bind:tap="handleClick"
       catch:touchmove="noop"
       bind:transitionend="onTransitionEnd"
diff --git a/src/overlay/_example/base/index.wxml b/src/overlay/_example/base/index.wxml
index 745f89467..b28795dcc 100644
--- a/src/overlay/_example/base/index.wxml
+++ b/src/overlay/_example/base/index.wxml
@@ -1,3 +1,3 @@
-<t-overlay visible="{{visible}}" bind:click="handleOverlayClick" />
+<t-overlay visible="{{visible}}" duration="{{500}}" bind:click="handleOverlayClick" />
 
 <t-button block size="large" theme="primary" variant="outline" bind:tap="handleClick">基础用法</t-button>
diff --git a/src/overlay/overlay.wxml b/src/overlay/overlay.wxml
index 55750dd46..26a2232c3 100644
--- a/src/overlay/overlay.wxml
+++ b/src/overlay/overlay.wxml
@@ -3,7 +3,7 @@
 <view
   wx:if="{{realVisible && preventScrollThrough}}"
   class="{{prefix}}-overlay {{transitionClass}} class"
-  style="{{_._style(['z-index:' + _zIndex, computedStyle, style, customStyle])}}"
+  style="{{_._style(['--td-overlay-transition-duration:' + duration + 'ms', 'z-index:' + _zIndex, computedStyle, style, customStyle])}}"
   bind:tap="handleClick"
   catchtouchmove="noop"
   bind:transitionend="onTransitionEnd"
diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
index 5701a24a3..3db69f84a 100644
--- a/src/picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -162,7 +162,7 @@ exports[`picker :base 1`] = `
         ariaLabel="关闭"
         ariaRole="button"
         class="t-overlay t-fade-enter t-fade-enter-active class"
-        style="z-index:11000;"
+        style="--td-overlay-transition-duration:300ms; z-index:11000;"
         bind:tap="handleClick"
         catch:touchmove="noop"
         bind:transitionend="onTransitionEnd"

From 4299e2974d1d6caab19ae968226893666eb52c34 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 25 Jul 2023 16:54:38 +0800
Subject: [PATCH 161/202] chore: publish v1.1.14 (#2219)

* chore: publish v1.1.14

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 12 ++++++++++++
 package.json |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28bc5b6bd..8a297ca78 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,18 @@ toc: false
 docClass: timeline
 ---
 
+  ## 🌈 1.1.14 `2023-07-25` 
+### 🚀 Features
+- `ActionSheet`: 新增 suffixIcon，仅在 `theme = list` 时展示 @LeeJim ([#2210](https://github.com/Tencent/tdesign-miniprogram/pull/2210))
+- `TreeSelect`:  `label` 内容支持文本超长省略 @anlyyao ([#2208](https://github.com/Tencent/tdesign-miniprogram/pull/2208))
+- `Overlay`: 支持 duration 属性，用于调整背景色过渡时间 @betavs ([#2179](https://github.com/Tencent/tdesign-miniprogram/pull/2179))
+### 🐞 Bug Fixes
+- `Popup`: 解决自动聚焦的问题 @LeeJim ([#2209](https://github.com/Tencent/tdesign-miniprogram/pull/2209))
+- `Slider`: 修复无法滑动的问题 @LeeJim ([#2211](https://github.com/Tencent/tdesign-miniprogram/pull/2211))
+- `Sticky`: 当组件销毁时，正常移除滚动函数 @LeeJim ([#2215](https://github.com/Tencent/tdesign-miniprogram/pull/2215))
+### 🚧 Others
+- 修复 utils.wxs 的语法错误 @LeeJim ([#2217](https://github.com/Tencent/tdesign-miniprogram/pull/2217)) 
+
  ## 🌈 1.1.13 `2023-07-18` 
 ### 🚀 Features
 - `ActionSheet`: 新增 show-overlay 属性 @betavs ([#2194](https://github.com/Tencent/tdesign-miniprogram/pull/2194))
diff --git a/package.json b/package.json
index 130842723..2014dab6c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.13-beta",
+  "version": "1.1.14",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From 715c3321523273e112f5335589cf321d89a65fa2 Mon Sep 17 00:00:00 2001
From: qianxu <qianxuuuu@qq.com>
Date: Sun, 30 Jul 2023 23:18:39 +0800
Subject: [PATCH 162/202] =?UTF-8?q?docs(link):=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E4=B8=AD=E5=8F=A5=E5=8F=B7=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=E9=93=BE=E6=8E=A5=E8=B7=B3=E8=BD=AC=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=20(#2227)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/link/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/link/README.md b/src/link/README.md
index 7766ec737..866b5f54f 100644
--- a/src/link/README.md
+++ b/src/link/README.md
@@ -64,7 +64,7 @@ isComponent: true
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 content | String / Slot | - | 链接内容 | N
-navigator-props | Object | - | 与 navigator 原生组件属性保持一致，具体使用参考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html。 | N
+navigator-props | Object | - | 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格 | N
 prefix-icon | String / Object / Slot | - | 前置图标 | N
 size | String | medium | 尺寸。可选项：small/medium/large。TS 类型：`SizeEnum` | N
 status | String | normal | 已废弃。组件状态。可选项：normal/active/disabled | N

From 24e9d32a3afa5334931dcd703333c1357529505a Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Mon, 31 Jul 2023 19:39:24 +0800
Subject: [PATCH 163/202] fix: update script for testing demo (#2235)

* fix: update script for testing demo

* fix: resolve eslint errors
---
 .eslintrc.js                                  |  7 ++
 package.json                                  |  2 +-
 gen-demo-test.js => script/gen-demo-test.js   |  8 +-
 src/action-sheet/__test__/demo.test.js        |  2 +-
 src/action-sheet/__test__/index.test.js       |  2 +-
 src/avatar/__test__/demo.test.js              |  2 +-
 src/avatar/__test__/index.test.js             |  2 +-
 src/back-top/__test__/demo.test.js            |  2 +-
 src/back-top/__test__/index.test.js           |  2 +-
 src/badge/__test__/demo.test.js               |  2 +-
 src/badge/__test__/index.test.js              |  2 +-
 src/button/__test__/demo.test.js              |  2 +-
 src/button/__test__/index.test.js             |  2 +-
 src/calendar/__test__/demo.test.js            |  2 +-
 src/calendar/__test__/index.test.js           |  2 +-
 src/cascader/__test__/demo.test.js            |  2 +-
 src/cascader/__test__/index.test.js           |  2 +-
 src/cell/__test__/demo.test.js                |  2 +-
 src/cell/__test__/index.test.js               |  2 +-
 src/checkbox/__test__/demo.test.js            |  2 +-
 src/checkbox/__test__/index.test.js           |  2 +-
 .../__test__/__snapshots__/demo.test.js.snap  | 77 +++++++++++++++++++
 src/col/__test__/demo.test.js                 | 19 +++++
 src/collapse/__test__/demo.test.js            |  2 +-
 src/collapse/__test__/index.test.js           |  2 +-
 src/count-down/__test__/demo.test.js          |  2 +-
 src/count-down/__test__/index.test.js         |  2 +-
 src/date-time-picker/__test__/demo.test.js    |  2 +-
 src/date-time-picker/__test__/index.test.js   |  2 +-
 src/date-time-picker/date-time-picker.ts      |  2 +-
 src/dialog/__test__/demo.test.js              |  2 +-
 src/dialog/__test__/index.test.js             |  2 +-
 src/divider/__test__/demo.test.js             |  2 +-
 src/divider/__test__/index.test.js            |  2 +-
 src/drawer/__test__/demo.test.js              |  2 +-
 src/drawer/__test__/index.test.js             |  2 +-
 src/dropdown-menu/__test__/demo.test.js       |  2 +-
 src/dropdown-menu/__test__/index.test.js      |  2 +-
 src/empty/__test__/demo.test.js               |  2 +-
 src/empty/__test__/index.test.js              |  2 +-
 src/fab/__test__/demo.test.js                 |  2 +-
 src/fab/__test__/index.test.js                |  2 +-
 src/footer/__test__/demo.test.js              |  2 +-
 src/footer/__test__/index.test.js             |  2 +-
 src/grid/__test__/demo.test.js                |  2 +-
 src/grid/__test__/index.test.js               |  2 +-
 src/icon/__test__/demo.test.js                |  2 +-
 src/icon/__test__/index.test.js               |  2 +-
 src/image-viewer/__test__/demo.test.js        |  2 +-
 src/image-viewer/__test__/index.test.js       |  2 +-
 src/image/__test__/demo.test.js               |  2 +-
 src/image/__test__/index.test.js              |  2 +-
 src/indexes/__test__/demo.test.js             |  2 +-
 src/indexes/__test__/index.test.js            |  2 +-
 src/input/__test__/demo.test.js               |  2 +-
 src/input/__test__/index.test.js              |  2 +-
 src/link/__test__/demo.test.js                |  2 +-
 src/link/__test__/index.test.js               |  2 +-
 src/loading/__test__/demo.test.js             |  2 +-
 src/loading/__test__/index.test.js            |  2 +-
 src/message/__test__/demo.test.js             |  2 +-
 src/message/__test__/index.test.js            |  2 +-
 src/navbar/__test__/demo.test.js              |  2 +-
 src/navbar/__test__/index.test.js             |  2 +-
 src/notice-bar/__test__/demo.test.js          |  2 +-
 src/notice-bar/__test__/index.test.js         |  2 +-
 src/overlay/__test__/demo.test.js             |  2 +-
 src/overlay/__test__/index.test.js            |  2 +-
 src/picker/__test__/demo.test.js              |  2 +-
 src/picker/__test__/index.test.js             |  2 +-
 src/popup/__test__/demo.test.js               |  2 +-
 src/progress/__test__/demo.test.js            |  2 +-
 src/progress/__test__/index.test.js           |  2 +-
 src/pull-down-refresh/__test__/demo.test.js   |  2 +-
 src/pull-down-refresh/__test__/index.test.js  |  2 +-
 src/radio/__test__/demo.test.js               |  2 +-
 src/rate/__test__/demo.test.js                |  2 +-
 src/rate/__test__/index.test.js               |  2 +-
 src/result/__test__/demo.test.js              |  2 +-
 src/result/__test__/index.test.js             |  2 +-
 src/search/__test__/demo.test.js              |  2 +-
 src/search/__test__/index.test.js             |  2 +-
 src/side-bar/__test__/demo.test.js            |  2 +-
 src/side-bar/__test__/index.test.js           |  2 +-
 src/skeleton/__test__/demo.test.js            |  2 +-
 src/skeleton/__test__/index.test.js           |  2 +-
 src/slider/__test__/demo.test.js              |  2 +-
 src/slider/__test__/index.test.js             |  2 +-
 src/stepper/__test__/demo.test.js             |  2 +-
 src/stepper/__test__/index.test.js            |  2 +-
 src/steps/__test__/demo.test.js               |  2 +-
 src/steps/__test__/index.test.js              |  2 +-
 src/sticky/__test__/demo.test.js              |  2 +-
 src/sticky/__test__/index.test.js             |  2 +-
 src/swipe-cell/__test__/demo.test.js          |  2 +-
 src/swipe-cell/__test__/index.test.js         |  2 +-
 src/swiper/__test__/demo.test.js              |  2 +-
 src/swiper/__test__/index.test.js             |  2 +-
 src/switch/__test__/demo.test.js              |  2 +-
 src/switch/__test__/index.test.js             |  2 +-
 src/tab-bar/__test__/demo.test.js             |  2 +-
 src/tab-bar/__test__/index.test.js            |  2 +-
 src/tabs/__test__/demo.test.js                |  2 +-
 src/tabs/__test__/index.test.js               |  2 +-
 src/tag/__test__/demo.test.js                 |  2 +-
 src/tag/__test__/index.test.js                |  3 +-
 src/textarea/__test__/demo.test.js            |  2 +-
 src/textarea/__test__/index.test.js           |  2 +-
 src/toast/__test__/demo.test.js               |  2 +-
 src/toast/__test__/index.test.js              |  2 +-
 src/toast/toast.ts                            |  2 +-
 src/transition/__test__/demo.test.js          |  2 +-
 src/tree-select/__test__/demo.test.js         |  2 +-
 src/tree-select/__test__/index.test.js        |  2 +-
 src/upload/__test__/demo.test.js              |  2 +-
 src/upload/__test__/index.test.js             |  2 +-
 116 files changed, 219 insertions(+), 117 deletions(-)
 rename gen-demo-test.js => script/gen-demo-test.js (94%)
 create mode 100644 src/col/__test__/__snapshots__/demo.test.js.snap
 create mode 100644 src/col/__test__/demo.test.js

diff --git a/.eslintrc.js b/.eslintrc.js
index c9ea7f852..f81e8adb9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -38,6 +38,13 @@ module.exports = {
   plugins: ['@typescript-eslint', 'prettier', 'import'],
   // add your custom rules here
   rules: {
+    'import/order': ['error', {
+      groups: [
+        'builtin', // Built-in types are first
+        'external', // Then the index file
+        'internal',
+      ]
+    }],
     // 非开发模式禁用debugger
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     // 允许调用首字母大写的函数时没有 new 操作符
diff --git a/package.json b/package.json
index 2014dab6c..6e3bdc623 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "cover": "jest --coverage",
     "test": "jest && jest -c jest.e2e.config.js",
     "test:snap-update": "npm run test:unit -- -u",
-    "test:demo": "node gen-demo-test.js",
+    "test:demo": "node script/gen-demo-test.js",
     "test:unit": "jest",
     "test:e2e": "jest -c jest.e2e.config.js",
     "badge": "node script/coverage-badge.js",
diff --git a/gen-demo-test.js b/script/gen-demo-test.js
similarity index 94%
rename from gen-demo-test.js
rename to script/gen-demo-test.js
index 3ecfa9a49..044364837 100644
--- a/gen-demo-test.js
+++ b/script/gen-demo-test.js
@@ -12,9 +12,9 @@ const upperFirst = require('lodash/upperFirst');
 // };
 
 const CONFIG = {
-  sourcePath: path.resolve(__dirname, 'src'),
-  targetPath: path.resolve(__dirname, 'src'),
-  defaultTemplate: ['import simulate from \'miniprogram-simulate\';', 'import path from \'path\';'].join('\n'),
+  sourcePath: path.resolve(__dirname, '../src'),
+  targetPath: path.resolve(__dirname, '../src'),
+  defaultTemplate: ["import path from 'path';", "import simulate from 'miniprogram-simulate';"].join('\n'),
 };
 
 /*
@@ -115,7 +115,7 @@ function main() {
             outputOneComponentTestFile(componentFolder, demoFiles);
           }
         });
-      }
+      };
       files.forEach(generation);
     }
   });
diff --git a/src/action-sheet/__test__/demo.test.js b/src/action-sheet/__test__/demo.test.js
index 21b832fb1..d5fc03963 100644
--- a/src/action-sheet/__test__/demo.test.js
+++ b/src/action-sheet/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['align', 'grid', 'list', 'status'];
 
diff --git a/src/action-sheet/__test__/index.test.js b/src/action-sheet/__test__/index.test.js
index fc9748c0a..a1d9ed747 100644
--- a/src/action-sheet/__test__/index.test.js
+++ b/src/action-sheet/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 import * as Util from '../../common/utils';
 import { show, close } from '../show';
 
diff --git a/src/avatar/__test__/demo.test.js b/src/avatar/__test__/demo.test.js
index 61d0931f4..7da9947b4 100644
--- a/src/avatar/__test__/demo.test.js
+++ b/src/avatar/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['action', 'badge-avatar', 'character-avatar', 'exhibition', 'icon-avatar', 'image-avatar', 'size'];
 
diff --git a/src/avatar/__test__/index.test.js b/src/avatar/__test__/index.test.js
index 17ab8af9d..0f50ed8a7 100644
--- a/src/avatar/__test__/index.test.js
+++ b/src/avatar/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('Avatar & Avatar Groups', () => {
   const id = load(path.resolve(__dirname, './index'));
diff --git a/src/back-top/__test__/demo.test.js b/src/back-top/__test__/demo.test.js
index 162d97d77..7ebbd1ad6 100644
--- a/src/back-top/__test__/demo.test.js
+++ b/src/back-top/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'half-round'];
 
diff --git a/src/back-top/__test__/index.test.js b/src/back-top/__test__/index.test.js
index c0cbac0c6..c73d7a727 100644
--- a/src/back-top/__test__/index.test.js
+++ b/src/back-top/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('back-top', () => {
   // 加载 back-top 组件
diff --git a/src/badge/__test__/demo.test.js b/src/badge/__test__/demo.test.js
index fa837aed6..3da71a7bf 100644
--- a/src/badge/__test__/demo.test.js
+++ b/src/badge/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'size', 'theme'];
 
diff --git a/src/badge/__test__/index.test.js b/src/badge/__test__/index.test.js
index 4698322db..57a145a67 100644
--- a/src/badge/__test__/index.test.js
+++ b/src/badge/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 import { hex2Rgb } from '../../../test/utils/colors';
 
 const shapes = ['circle', 'square', 'round', 'ribbon'];
diff --git a/src/button/__test__/demo.test.js b/src/button/__test__/demo.test.js
index 175c92c1a..b2273586a 100644
--- a/src/button/__test__/demo.test.js
+++ b/src/button/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'block-btn', 'disabled', 'ghost-btn', 'group-btn', 'icon-btn', 'shape', 'size', 'theme'];
 
diff --git a/src/button/__test__/index.test.js b/src/button/__test__/index.test.js
index 44dbd15b8..57c4ec9ba 100644
--- a/src/button/__test__/index.test.js
+++ b/src/button/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('button', () => {
   const button = load(path.resolve(__dirname, '../button'));
diff --git a/src/calendar/__test__/demo.test.js b/src/calendar/__test__/demo.test.js
index 2150d554f..c0527ed4c 100644
--- a/src/calendar/__test__/demo.test.js
+++ b/src/calendar/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'custom-button', 'custom-range', 'custom-text', 'multiple', 'range', 'without-popup'];
 
diff --git a/src/calendar/__test__/index.test.js b/src/calendar/__test__/index.test.js
index cafeeff9b..0a4529914 100644
--- a/src/calendar/__test__/index.test.js
+++ b/src/calendar/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('calendar', () => {
   const calendar = load(path.resolve(__dirname, `../calendar`), 't-calendar');
diff --git a/src/cascader/__test__/demo.test.js b/src/cascader/__test__/demo.test.js
index f272d618a..7e644f11f 100644
--- a/src/cascader/__test__/demo.test.js
+++ b/src/cascader/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'keys', 'theme-tab', 'with-title', 'with-value'];
 
diff --git a/src/cascader/__test__/index.test.js b/src/cascader/__test__/index.test.js
index 525550005..773db4817 100644
--- a/src/cascader/__test__/index.test.js
+++ b/src/cascader/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('cascader', () => {
   const cascader = load(path.resolve(__dirname, `../cascader`));
diff --git a/src/cell/__test__/demo.test.js b/src/cell/__test__/demo.test.js
index 802e3af5c..e97fadf90 100644
--- a/src/cell/__test__/demo.test.js
+++ b/src/cell/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'multiple', 'theme'];
 
diff --git a/src/cell/__test__/index.test.js b/src/cell/__test__/index.test.js
index 977db369b..c45013689 100644
--- a/src/cell/__test__/index.test.js
+++ b/src/cell/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('cell', () => {
   const cell = load(path.resolve(__dirname, `../cell`));
diff --git a/src/checkbox/__test__/demo.test.js b/src/checkbox/__test__/demo.test.js
index c770faf53..f52f1bf24 100644
--- a/src/checkbox/__test__/demo.test.js
+++ b/src/checkbox/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['all', 'base', 'card', 'horizontal', 'right', 'special', 'status', 'type'];
 
diff --git a/src/checkbox/__test__/index.test.js b/src/checkbox/__test__/index.test.js
index 4f859b023..0a0950ce6 100644
--- a/src/checkbox/__test__/index.test.js
+++ b/src/checkbox/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('Checkbox', () => {
   const id = load(path.resolve(__dirname, './index'));
diff --git a/src/col/__test__/__snapshots__/demo.test.js.snap b/src/col/__test__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..d00a114a6
--- /dev/null
+++ b/src/col/__test__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Col Col base demo works fine 1`] = `
+<base>
+  <t-row>
+    <t-col
+      span="8"
+      tClass="dark"
+    >
+      col-8
+    </t-col>
+    <t-col
+      span="8"
+      tClass="light"
+    >
+      col-8
+    </t-col>
+    <t-col
+      span="8"
+      tClass="dark"
+    >
+      col-8
+    </t-col>
+  </t-row>
+  <t-row>
+    <t-col
+      span="4"
+      tClass="dark"
+    >
+      col-4
+    </t-col>
+    <t-col
+      offset="4"
+      span="16"
+      tClass="light"
+    >
+      col-16 col-offset-4
+    </t-col>
+  </t-row>
+  <t-row>
+    <t-col
+      offset="12"
+      span="12"
+      tClass="dark"
+    >
+      col-12 col-offset-12
+    </t-col>
+  </t-row>
+</base>
+`;
+
+exports[`Col Col offset demo works fine 1`] = `
+<offset>
+  <t-row
+    gutter="16"
+  >
+    <t-col
+      span="8"
+      tClass="dark"
+    >
+      col-8
+    </t-col>
+    <t-col
+      span="8"
+      tClass="light"
+    >
+      col-8
+    </t-col>
+    <t-col
+      span="8"
+      tClass="dark"
+    >
+      col-8
+    </t-col>
+  </t-row>
+</offset>
+`;
diff --git a/src/col/__test__/demo.test.js b/src/col/__test__/demo.test.js
new file mode 100644
index 000000000..186d22511
--- /dev/null
+++ b/src/col/__test__/demo.test.js
@@ -0,0 +1,19 @@
+/**
+ * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
+ */
+
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+const mapper = ['base', 'offset'];
+
+describe('Col', () => {
+  mapper.forEach((demoName) => {
+    it(`Col ${demoName} demo works fine`, () => {
+      const id = load(path.resolve(__dirname, `../../col/_example/${demoName}/index`), demoName);
+      const container = simulate.render(id);
+      container.attach(document.createElement('parent-wrapper'));
+      expect(container.toJSON()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/collapse/__test__/demo.test.js b/src/collapse/__test__/demo.test.js
index 7a2e4f7fc..fdfc45d33 100644
--- a/src/collapse/__test__/demo.test.js
+++ b/src/collapse/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['accordion', 'action', 'base', 'placement', 'theme'];
 
diff --git a/src/collapse/__test__/index.test.js b/src/collapse/__test__/index.test.js
index 4effcc18e..c0d87dc1c 100644
--- a/src/collapse/__test__/index.test.js
+++ b/src/collapse/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('collapse', () => {
   const id = load(path.resolve(__dirname, `./index`));
diff --git a/src/count-down/__test__/demo.test.js b/src/count-down/__test__/demo.test.js
index 1a3ced6f1..cc06b42af 100644
--- a/src/count-down/__test__/demo.test.js
+++ b/src/count-down/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'size'];
 
diff --git a/src/count-down/__test__/index.test.js b/src/count-down/__test__/index.test.js
index 372ba9a74..d721e5d55 100644
--- a/src/count-down/__test__/index.test.js
+++ b/src/count-down/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('countdown', () => {
   const countdown = load(path.resolve(__dirname, `../count-down`), 't-count-down');
diff --git a/src/date-time-picker/__test__/demo.test.js b/src/date-time-picker/__test__/demo.test.js
index 2c78c963b..ac5270706 100644
--- a/src/date-time-picker/__test__/demo.test.js
+++ b/src/date-time-picker/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['date-all', 'steps', 'time', 'year-month', 'year-month-date'];
 
diff --git a/src/date-time-picker/__test__/index.test.js b/src/date-time-picker/__test__/index.test.js
index 250493f07..e111d7cea 100644
--- a/src/date-time-picker/__test__/index.test.js
+++ b/src/date-time-picker/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('date-time-picker', () => {
   const id = load(path.resolve(__dirname, `./index`));
diff --git a/src/date-time-picker/date-time-picker.ts b/src/date-time-picker/date-time-picker.ts
index 48a344aad..2c66caeb8 100644
--- a/src/date-time-picker/date-time-picker.ts
+++ b/src/date-time-picker/date-time-picker.ts
@@ -1,5 +1,5 @@
-import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import config from '../common/config';
 import { SuperComponent, wxComponent } from '../common/src/index';
 import defaultLocale from './locale/zh';
diff --git a/src/dialog/__test__/demo.test.js b/src/dialog/__test__/demo.test.js
index 3eb1b62cb..c59422f3d 100644
--- a/src/dialog/__test__/demo.test.js
+++ b/src/dialog/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'button', 'command', 'confirm', 'status', 'with-image', 'with-input'];
 
diff --git a/src/dialog/__test__/index.test.js b/src/dialog/__test__/index.test.js
index 2a1488d16..588304c37 100644
--- a/src/dialog/__test__/index.test.js
+++ b/src/dialog/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 import Dialog from '../index';
 import * as Util from '../../common/utils';
 
diff --git a/src/divider/__test__/demo.test.js b/src/divider/__test__/demo.test.js
index ab5f17781..d982e3271 100644
--- a/src/divider/__test__/demo.test.js
+++ b/src/divider/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'theme'];
 
diff --git a/src/divider/__test__/index.test.js b/src/divider/__test__/index.test.js
index ca18daa15..cc22bd51f 100644
--- a/src/divider/__test__/index.test.js
+++ b/src/divider/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 // 文本位置
 const textAlign = ['left', 'center', 'right'];
diff --git a/src/drawer/__test__/demo.test.js b/src/drawer/__test__/demo.test.js
index ff1a9ecc0..9506a6337 100644
--- a/src/drawer/__test__/demo.test.js
+++ b/src/drawer/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'footer', 'icon-drawer', 'title'];
 
diff --git a/src/drawer/__test__/index.test.js b/src/drawer/__test__/index.test.js
index 9884b6698..3718db24a 100644
--- a/src/drawer/__test__/index.test.js
+++ b/src/drawer/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('drawer', () => {
   const drawer = load(path.resolve(__dirname, `../drawer`), 't-drawer');
diff --git a/src/dropdown-menu/__test__/demo.test.js b/src/dropdown-menu/__test__/demo.test.js
index 4d6f9b2fc..cccea7b7b 100644
--- a/src/dropdown-menu/__test__/demo.test.js
+++ b/src/dropdown-menu/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['multi', 'single', 'tree'];
 
diff --git a/src/dropdown-menu/__test__/index.test.js b/src/dropdown-menu/__test__/index.test.js
index 4cc90a92a..b2424fd33 100644
--- a/src/dropdown-menu/__test__/index.test.js
+++ b/src/dropdown-menu/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('dropdown-menu', () => {
   const id = load(path.resolve(__dirname, `./index`));
diff --git a/src/empty/__test__/demo.test.js b/src/empty/__test__/demo.test.js
index 839ead0a9..cc8d3f928 100644
--- a/src/empty/__test__/demo.test.js
+++ b/src/empty/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'buttonEmpty', 'imageEmpty'];
 
diff --git a/src/empty/__test__/index.test.js b/src/empty/__test__/index.test.js
index b6d105cff..e1ffe7990 100644
--- a/src/empty/__test__/index.test.js
+++ b/src/empty/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('empty', () => {
   const empty = load(path.resolve(__dirname, `../empty`));
diff --git a/src/fab/__test__/demo.test.js b/src/fab/__test__/demo.test.js
index 997860d21..22966d52a 100644
--- a/src/fab/__test__/demo.test.js
+++ b/src/fab/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['advance', 'base'];
 
diff --git a/src/fab/__test__/index.test.js b/src/fab/__test__/index.test.js
index 6643ace77..da59dd39d 100644
--- a/src/fab/__test__/index.test.js
+++ b/src/fab/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('fab', () => {
   const fab = load(path.resolve(__dirname, `../fab`), 't-fab');
diff --git a/src/footer/__test__/demo.test.js b/src/footer/__test__/demo.test.js
index 5e82c89f0..a1dc8c924 100644
--- a/src/footer/__test__/demo.test.js
+++ b/src/footer/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'link', 'logo'];
 
diff --git a/src/footer/__test__/index.test.js b/src/footer/__test__/index.test.js
index b67af548e..9608902a0 100644
--- a/src/footer/__test__/index.test.js
+++ b/src/footer/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('Footer', () => {
   const footer = load(path.resolve(__dirname, `../footer`));
diff --git a/src/grid/__test__/demo.test.js b/src/grid/__test__/demo.test.js
index a7231f74d..bc392cab4 100644
--- a/src/grid/__test__/demo.test.js
+++ b/src/grid/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['badge', 'base', 'border', 'card', 'description', 'icon-grid', 'multiple', 'scroll'];
 
diff --git a/src/grid/__test__/index.test.js b/src/grid/__test__/index.test.js
index 6c55f8eac..2a7267dc7 100644
--- a/src/grid/__test__/index.test.js
+++ b/src/grid/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('grid', () => {
   const id = load(path.resolve(__dirname, './index'));
diff --git a/src/icon/__test__/demo.test.js b/src/icon/__test__/demo.test.js
index e0545f9a7..242fb075e 100644
--- a/src/icon/__test__/demo.test.js
+++ b/src/icon/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'custom', 'iconImage'];
 
diff --git a/src/icon/__test__/index.test.js b/src/icon/__test__/index.test.js
index 09e875f64..027f5564c 100644
--- a/src/icon/__test__/index.test.js
+++ b/src/icon/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('icon', () => {
   const icon = load(path.resolve(__dirname, `../icon`));
diff --git a/src/image-viewer/__test__/demo.test.js b/src/image-viewer/__test__/demo.test.js
index 5354976d1..8524e5aa4 100644
--- a/src/image-viewer/__test__/demo.test.js
+++ b/src/image-viewer/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'delete'];
 
diff --git a/src/image-viewer/__test__/index.test.js b/src/image-viewer/__test__/index.test.js
index fb7324808..305a7be48 100644
--- a/src/image-viewer/__test__/index.test.js
+++ b/src/image-viewer/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('image-viewer', () => {
   const imageViewer = load(path.resolve(__dirname, `../image-viewer`), 't-image-viewer');
diff --git a/src/image/__test__/demo.test.js b/src/image/__test__/demo.test.js
index 73406d121..46960aa72 100644
--- a/src/image/__test__/demo.test.js
+++ b/src/image/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'size', 'status'];
 
diff --git a/src/image/__test__/index.test.js b/src/image/__test__/index.test.js
index 7e45512c0..1613c676c 100644
--- a/src/image/__test__/index.test.js
+++ b/src/image/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('image', () => {
   const image = load(path.resolve(__dirname, `../image`), 't-image');
diff --git a/src/indexes/__test__/demo.test.js b/src/indexes/__test__/demo.test.js
index 8591208bf..802454a4f 100644
--- a/src/indexes/__test__/demo.test.js
+++ b/src/indexes/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'custom'];
 
diff --git a/src/indexes/__test__/index.test.js b/src/indexes/__test__/index.test.js
index a0a9911ab..7d85786db 100644
--- a/src/indexes/__test__/index.test.js
+++ b/src/indexes/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 import * as Util from '../../common/utils';
 
 beforeAll(() => {
diff --git a/src/input/__test__/demo.test.js b/src/input/__test__/demo.test.js
index 3fcfc84aa..603f344e8 100644
--- a/src/input/__test__/demo.test.js
+++ b/src/input/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = [
   'align',
diff --git a/src/input/__test__/index.test.js b/src/input/__test__/index.test.js
index 8477a6091..7732bb5ae 100644
--- a/src/input/__test__/index.test.js
+++ b/src/input/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('input', () => {
   const input = load(path.resolve(__dirname, `../input`), 't-input');
diff --git a/src/link/__test__/demo.test.js b/src/link/__test__/demo.test.js
index a4d25a655..2d80e3270 100644
--- a/src/link/__test__/demo.test.js
+++ b/src/link/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['content', 'disabled', 'prefix', 'size', 'suffix', 'theme', 'underline'];
 
diff --git a/src/link/__test__/index.test.js b/src/link/__test__/index.test.js
index 8426ad09d..79ac4c812 100644
--- a/src/link/__test__/index.test.js
+++ b/src/link/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('link', () => {
   const link = load(path.resolve(__dirname, `../link`));
diff --git a/src/loading/__test__/demo.test.js b/src/loading/__test__/demo.test.js
index 60a8118fc..9f1ed6186 100644
--- a/src/loading/__test__/demo.test.js
+++ b/src/loading/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'duration', 'horizontal', 'size', 'status', 'text', 'vertical'];
 
diff --git a/src/loading/__test__/index.test.js b/src/loading/__test__/index.test.js
index 86abe504e..1db4cf684 100644
--- a/src/loading/__test__/index.test.js
+++ b/src/loading/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('loading', () => {
   const loading = load(path.resolve(__dirname, `../loading`));
diff --git a/src/message/__test__/demo.test.js b/src/message/__test__/demo.test.js
index 5a23eb72a..c7c92f49d 100644
--- a/src/message/__test__/demo.test.js
+++ b/src/message/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'theme'];
 
diff --git a/src/message/__test__/index.test.js b/src/message/__test__/index.test.js
index 4299fa21e..4d1e00962 100644
--- a/src/message/__test__/index.test.js
+++ b/src/message/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 import Message from '../index';
 import * as Util from '../../common/utils';
 
diff --git a/src/navbar/__test__/demo.test.js b/src/navbar/__test__/demo.test.js
index 1c8d79e99..49925ccf9 100644
--- a/src/navbar/__test__/demo.test.js
+++ b/src/navbar/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['back-home', 'base', 'custom-color', 'img', 'left-title', 'search'];
 
diff --git a/src/navbar/__test__/index.test.js b/src/navbar/__test__/index.test.js
index 2353afe5c..44525efb6 100644
--- a/src/navbar/__test__/index.test.js
+++ b/src/navbar/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('navbar', () => {
   const navbar = load(path.resolve(__dirname, `../navbar`), 't-navbar');
diff --git a/src/notice-bar/__test__/demo.test.js b/src/notice-bar/__test__/demo.test.js
index 59a80c233..d9cd5144b 100644
--- a/src/notice-bar/__test__/demo.test.js
+++ b/src/notice-bar/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'custom', 'customization', 'event', 'iconDemo', 'scrolling', 'suffixIcon', 'theme'];
 
diff --git a/src/notice-bar/__test__/index.test.js b/src/notice-bar/__test__/index.test.js
index f9e8a1935..aed263ce7 100644
--- a/src/notice-bar/__test__/index.test.js
+++ b/src/notice-bar/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 import similateApi from 'miniprogram-simulate/src/api';
 import * as Util from '../../common/utils';
 
diff --git a/src/overlay/__test__/demo.test.js b/src/overlay/__test__/demo.test.js
index 7c6f64eea..c39029ea4 100644
--- a/src/overlay/__test__/demo.test.js
+++ b/src/overlay/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base'];
 
diff --git a/src/overlay/__test__/index.test.js b/src/overlay/__test__/index.test.js
index 4e2975ff2..ab0b0db37 100644
--- a/src/overlay/__test__/index.test.js
+++ b/src/overlay/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('overlay', () => {
   const overlay = load(path.resolve(__dirname, `../overlay`), 't-overlay');
diff --git a/src/picker/__test__/demo.test.js b/src/picker/__test__/demo.test.js
index 3052f6fc2..4327cc11f 100644
--- a/src/picker/__test__/demo.test.js
+++ b/src/picker/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['area', 'base', 'with-title'];
 
diff --git a/src/picker/__test__/index.test.js b/src/picker/__test__/index.test.js
index fb20511fa..87f18a757 100644
--- a/src/picker/__test__/index.test.js
+++ b/src/picker/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('picker', () => {
   const id = load(path.resolve(__dirname, `./index`));
diff --git a/src/popup/__test__/demo.test.js b/src/popup/__test__/demo.test.js
index b1a326b68..8717fa7d5 100644
--- a/src/popup/__test__/demo.test.js
+++ b/src/popup/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'custom-close', 'with-title'];
 
diff --git a/src/progress/__test__/demo.test.js b/src/progress/__test__/demo.test.js
index 04b23567f..57fa32b9b 100644
--- a/src/progress/__test__/demo.test.js
+++ b/src/progress/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'circle', 'custom', 'line', 'plump', 'transition'];
 
diff --git a/src/progress/__test__/index.test.js b/src/progress/__test__/index.test.js
index 350135a6e..059ed89c6 100644
--- a/src/progress/__test__/index.test.js
+++ b/src/progress/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('progress', () => {
   const progress = load(path.resolve(__dirname, `../progress`));
diff --git a/src/pull-down-refresh/__test__/demo.test.js b/src/pull-down-refresh/__test__/demo.test.js
index d8b85771e..f531cc803 100644
--- a/src/pull-down-refresh/__test__/demo.test.js
+++ b/src/pull-down-refresh/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base'];
 
diff --git a/src/pull-down-refresh/__test__/index.test.js b/src/pull-down-refresh/__test__/index.test.js
index 8bfcdc9de..d5431db17 100644
--- a/src/pull-down-refresh/__test__/index.test.js
+++ b/src/pull-down-refresh/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('pull-down-refresh', () => {
   const pullDownRefresh = load(path.resolve(__dirname, `../pull-down-refresh`), 't-pull-down-refresh');
diff --git a/src/radio/__test__/demo.test.js b/src/radio/__test__/demo.test.js
index 920bae2e2..07044bb7c 100644
--- a/src/radio/__test__/demo.test.js
+++ b/src/radio/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['align', 'base', 'card', 'horizontal', 'special', 'status', 'theme'];
 
diff --git a/src/rate/__test__/demo.test.js b/src/rate/__test__/demo.test.js
index afb0871d0..aa8d154ef 100644
--- a/src/rate/__test__/demo.test.js
+++ b/src/rate/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['action', 'base', 'color', 'count', 'custom', 'show-text', 'size', 'special', 'un-filled'];
 
diff --git a/src/rate/__test__/index.test.js b/src/rate/__test__/index.test.js
index d9ca5c5a3..2d5aa88e7 100644
--- a/src/rate/__test__/index.test.js
+++ b/src/rate/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('Rate', () => {
   const tagName = 'rate';
diff --git a/src/result/__test__/demo.test.js b/src/result/__test__/demo.test.js
index 8b3ed696d..e8a74d16b 100644
--- a/src/result/__test__/demo.test.js
+++ b/src/result/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['custom', 'description', 'theme'];
 
diff --git a/src/result/__test__/index.test.js b/src/result/__test__/index.test.js
index 4e1f5c89d..5c8f44b97 100644
--- a/src/result/__test__/index.test.js
+++ b/src/result/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('result', () => {
   const result = load(path.resolve(__dirname, `../result`));
diff --git a/src/search/__test__/demo.test.js b/src/search/__test__/demo.test.js
index ed6e9f10c..b59123a67 100644
--- a/src/search/__test__/demo.test.js
+++ b/src/search/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['action', 'base', 'other', 'shape'];
 
diff --git a/src/search/__test__/index.test.js b/src/search/__test__/index.test.js
index 76f109c48..5d60cb293 100644
--- a/src/search/__test__/index.test.js
+++ b/src/search/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('search', () => {
   const search = load(path.resolve(__dirname, `../search`), 't-search');
diff --git a/src/side-bar/__test__/demo.test.js b/src/side-bar/__test__/demo.test.js
index 714ffdec3..d7882c551 100644
--- a/src/side-bar/__test__/demo.test.js
+++ b/src/side-bar/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'custom', 'switch', 'with-icon'];
 
diff --git a/src/side-bar/__test__/index.test.js b/src/side-bar/__test__/index.test.js
index 932a7c099..737f2e8ad 100644
--- a/src/side-bar/__test__/index.test.js
+++ b/src/side-bar/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('side-bar', () => {
   const sideBarExample = load(path.resolve(__dirname, `./base/index`), 'side-bar-example');
diff --git a/src/skeleton/__test__/demo.test.js b/src/skeleton/__test__/demo.test.js
index 43a3e2331..89d15ef55 100644
--- a/src/skeleton/__test__/demo.test.js
+++ b/src/skeleton/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['animation', 'cell-group', 'grid', 'image-group', 'theme'];
 
diff --git a/src/skeleton/__test__/index.test.js b/src/skeleton/__test__/index.test.js
index 7b9149cbc..add013c0f 100644
--- a/src/skeleton/__test__/index.test.js
+++ b/src/skeleton/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const textRowCol = [
   { width: '686rpx', height: '32rpx' },
diff --git a/src/slider/__test__/demo.test.js b/src/slider/__test__/demo.test.js
index ed583589c..765e9e341 100644
--- a/src/slider/__test__/demo.test.js
+++ b/src/slider/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'capsule', 'disabled', 'label', 'max', 'range', 'step'];
 
diff --git a/src/slider/__test__/index.test.js b/src/slider/__test__/index.test.js
index a50e1c958..45b54f686 100644
--- a/src/slider/__test__/index.test.js
+++ b/src/slider/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('slider', () => {
   const slider = load(path.resolve(__dirname, `../slider`), 't-slider');
diff --git a/src/stepper/__test__/demo.test.js b/src/stepper/__test__/demo.test.js
index 388530ee6..2a1754711 100644
--- a/src/stepper/__test__/demo.test.js
+++ b/src/stepper/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'min-max', 'size', 'status', 'theme'];
 
diff --git a/src/stepper/__test__/index.test.js b/src/stepper/__test__/index.test.js
index 1d150a8c2..d63086134 100644
--- a/src/stepper/__test__/index.test.js
+++ b/src/stepper/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('stepper', () => {
   const stepper = load(path.resolve(__dirname, `../stepper`), 't-stepper');
diff --git a/src/steps/__test__/demo.test.js b/src/steps/__test__/demo.test.js
index a24e5a9f7..4a03d6116 100644
--- a/src/steps/__test__/demo.test.js
+++ b/src/steps/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['horizontal', 'special', 'status', 'vertical'];
 
diff --git a/src/steps/__test__/index.test.js b/src/steps/__test__/index.test.js
index e60b43f5a..2c31b9836 100644
--- a/src/steps/__test__/index.test.js
+++ b/src/steps/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('Steps', () => {
   let comp;
diff --git a/src/sticky/__test__/demo.test.js b/src/sticky/__test__/demo.test.js
index e5e317c76..aa9cbcf45 100644
--- a/src/sticky/__test__/demo.test.js
+++ b/src/sticky/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'container', 'offset'];
 
diff --git a/src/sticky/__test__/index.test.js b/src/sticky/__test__/index.test.js
index e25dfebfb..0fedf560e 100644
--- a/src/sticky/__test__/index.test.js
+++ b/src/sticky/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 beforeAll(() => {
   global.getCurrentPages = jest.fn(() => {
diff --git a/src/swipe-cell/__test__/demo.test.js b/src/swipe-cell/__test__/demo.test.js
index ceff5a156..65ebd2f17 100644
--- a/src/swipe-cell/__test__/demo.test.js
+++ b/src/swipe-cell/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['double', 'icon', 'left', 'right'];
 
diff --git a/src/swipe-cell/__test__/index.test.js b/src/swipe-cell/__test__/index.test.js
index d13c2b2c8..c18919084 100644
--- a/src/swipe-cell/__test__/index.test.js
+++ b/src/swipe-cell/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('SwipeCell', () => {
   const swipeCell = load(path.resolve(__dirname, '../swipe-cell'));
diff --git a/src/swiper/__test__/demo.test.js b/src/swiper/__test__/demo.test.js
index 18650e1d7..257982f1e 100644
--- a/src/swiper/__test__/demo.test.js
+++ b/src/swiper/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'cards', 'custom', 'fraction', 'nav-btn', 'vertical'];
 
diff --git a/src/swiper/__test__/index.test.js b/src/swiper/__test__/index.test.js
index 6f61cabf8..95f41eada 100644
--- a/src/swiper/__test__/index.test.js
+++ b/src/swiper/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('swiper', () => {
   const swiperComplex = load(path.resolve(__dirname, `./base/index`), 't-swiper-complex');
diff --git a/src/switch/__test__/demo.test.js b/src/switch/__test__/demo.test.js
index 023cdc8c2..9da85c111 100644
--- a/src/switch/__test__/demo.test.js
+++ b/src/switch/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'color', 'label', 'size', 'status'];
 
diff --git a/src/switch/__test__/index.test.js b/src/switch/__test__/index.test.js
index 955d36be0..0c88eeb83 100644
--- a/src/switch/__test__/index.test.js
+++ b/src/switch/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 // TODO size 未实现 loading 未实现
 
diff --git a/src/tab-bar/__test__/demo.test.js b/src/tab-bar/__test__/demo.test.js
index cbc48f64a..abcb124e6 100644
--- a/src/tab-bar/__test__/demo.test.js
+++ b/src/tab-bar/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['badge', 'base', 'custom', 'icon-only', 'round', 'sub', 'text-only'];
 
diff --git a/src/tab-bar/__test__/index.test.js b/src/tab-bar/__test__/index.test.js
index f6403dca3..d7b12a234 100644
--- a/src/tab-bar/__test__/index.test.js
+++ b/src/tab-bar/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('tab-bar', () => {
   const id = load(path.resolve(__dirname, `./index`), 't-tab-bar');
diff --git a/src/tabs/__test__/demo.test.js b/src/tabs/__test__/demo.test.js
index 38517e0e8..05cbbb8fe 100644
--- a/src/tabs/__test__/demo.test.js
+++ b/src/tabs/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'scroll', 'size', 'status', 'theme', 'with-badge', 'with-content', 'with-icon'];
 
diff --git a/src/tabs/__test__/index.test.js b/src/tabs/__test__/index.test.js
index 41a22d524..f1fb45347 100644
--- a/src/tabs/__test__/index.test.js
+++ b/src/tabs/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 beforeAll(() => {
   global.getCurrentPages = jest.fn(() => {
diff --git a/src/tag/__test__/demo.test.js b/src/tag/__test__/demo.test.js
index eb29d4957..cd37ed229 100644
--- a/src/tag/__test__/demo.test.js
+++ b/src/tag/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['checkable', 'closable', 'size', 'theme', 'type'];
 
diff --git a/src/tag/__test__/index.test.js b/src/tag/__test__/index.test.js
index 680ff879b..306b5bcd6 100644
--- a/src/tag/__test__/index.test.js
+++ b/src/tag/__test__/index.test.js
@@ -1,6 +1,5 @@
-import simulate from 'miniprogram-simulate';
-
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('tag', () => {
   const Tag = load(path.resolve(__dirname, `../tag`));
diff --git a/src/textarea/__test__/demo.test.js b/src/textarea/__test__/demo.test.js
index 85186ff74..1cbd48ff5 100644
--- a/src/textarea/__test__/demo.test.js
+++ b/src/textarea/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['autosize', 'base', 'card', 'custom', 'disabled', 'label', 'maxcharacter', 'maxlength'];
 
diff --git a/src/textarea/__test__/index.test.js b/src/textarea/__test__/index.test.js
index 15330e5e2..4ba58f6b0 100644
--- a/src/textarea/__test__/index.test.js
+++ b/src/textarea/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('textarea', () => {
   const textarea = load(path.resolve(__dirname, `../textarea`), 't-textarea');
diff --git a/src/toast/__test__/demo.test.js b/src/toast/__test__/demo.test.js
index 4bffa9c07..dd3716de9 100644
--- a/src/toast/__test__/demo.test.js
+++ b/src/toast/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'close', 'cover', 'display', 'theme'];
 
diff --git a/src/toast/__test__/index.test.js b/src/toast/__test__/index.test.js
index 7c886028e..d6d08aed5 100644
--- a/src/toast/__test__/index.test.js
+++ b/src/toast/__test__/index.test.js
@@ -1,6 +1,6 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
 
+import simulate from 'miniprogram-simulate';
 import { showToast, hideToast } from '../index';
 import * as Util from '../../common/utils';
 
diff --git a/src/toast/toast.ts b/src/toast/toast.ts
index ced90018b..500774eb2 100644
--- a/src/toast/toast.ts
+++ b/src/toast/toast.ts
@@ -1,9 +1,9 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
-import { ToastOptionsType } from './index';
 import transition from '../mixins/transition';
 import { calcIcon } from '../common/utils';
+import { ToastOptionsType } from './index';
 
 const { prefix } = config;
 const name = `${prefix}-toast`;
diff --git a/src/transition/__test__/demo.test.js b/src/transition/__test__/demo.test.js
index b92b3b72d..8cf684e9c 100644
--- a/src/transition/__test__/demo.test.js
+++ b/src/transition/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['appear', 'base', 'custom', 'destroy'];
 
diff --git a/src/tree-select/__test__/demo.test.js b/src/tree-select/__test__/demo.test.js
index e0e887592..3ba7fd7d2 100644
--- a/src/tree-select/__test__/demo.test.js
+++ b/src/tree-select/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['base', 'multiple', 'normal'];
 
diff --git a/src/tree-select/__test__/index.test.js b/src/tree-select/__test__/index.test.js
index 66c1f24bc..d921f3415 100644
--- a/src/tree-select/__test__/index.test.js
+++ b/src/tree-select/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 describe('tree-select', () => {
   const treeSelect = load(path.resolve(__dirname, `../tree-select`));
diff --git a/src/upload/__test__/demo.test.js b/src/upload/__test__/demo.test.js
index c7b6e8c7f..6aa600646 100644
--- a/src/upload/__test__/demo.test.js
+++ b/src/upload/__test__/demo.test.js
@@ -2,8 +2,8 @@
  * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖
  */
 
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 
 const mapper = ['messageFile', 'multiple', 'single', 'status'];
 
diff --git a/src/upload/__test__/index.test.js b/src/upload/__test__/index.test.js
index b5f4f6677..f779f4c26 100644
--- a/src/upload/__test__/index.test.js
+++ b/src/upload/__test__/index.test.js
@@ -1,5 +1,5 @@
-import simulate from 'miniprogram-simulate';
 import path from 'path';
+import simulate from 'miniprogram-simulate';
 import similateApi from 'miniprogram-simulate/src/api';
 
 const mock = (options, res) => {

From f6ab6fb8790de1267eb52aa34eafcc1ed0f4ee8c Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Mon, 31 Jul 2023 21:33:29 +0800
Subject: [PATCH 164/202] fix(action-sheet): enable item color for grid type
 (#2231)

---
 src/action-sheet/template/grid.wxml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/action-sheet/template/grid.wxml b/src/action-sheet/template/grid.wxml
index bdc595ebb..071a32bdd 100644
--- a/src/action-sheet/template/grid.wxml
+++ b/src/action-sheet/template/grid.wxml
@@ -8,9 +8,10 @@
         wx:key="index"
         bind:tap="onSelect"
         data-index="{{index}}"
-        icon="{{item.icon}}"
+        icon="{{ { name: item.icon, color: item.color } }}"
         text="{{item.label}}"
         image="{{item.image}}"
+        style="--td-grid-item-text-color: {{item.color}}"
       >
       </t-grid-item>
     </t-grid>
@@ -27,9 +28,10 @@
               wx:key="index"
               data-index="{{index}}"
               bind:tap="onSelect"
-              icon="{{item.icon}}"
+              icon="{{ { name: item.icon, color: item.color } }}"
               text="{{item.label}}"
               image="{{item.image}}"
+              style="--td-grid-item-text-color: {{item.color}}"
             >
             </t-grid-item>
           </t-grid>

From 62c2d269519df9c66bfeb9c174260a70b48b3ccc Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Mon, 31 Jul 2023 21:54:50 +0800
Subject: [PATCH 165/202] chore: remove getphonenumber on demo (#2225)

* chore: remove getphonenumber on demo

* test: update snapshot
---
 src/dialog/_example/button/index.js              | 4 ++--
 src/fab/__test__/__snapshots__/demo.test.js.snap | 6 +++---
 src/fab/_example/advance/index.js                | 4 ++--
 src/fab/_example/advance/index.wxml              | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/dialog/_example/button/index.js b/src/dialog/_example/button/index.js
index 1fd64135a..4fad6c530 100644
--- a/src/dialog/_example/button/index.js
+++ b/src/dialog/_example/button/index.js
@@ -9,8 +9,8 @@ Component({
         content: '告知当前状态、信息和解决方法等内容。',
         cancelBtn: '取消',
         confirmBtn: {
-          openType: 'getPhoneNumber',
-          content: '获取手机',
+          openType: 'share',
+          content: '分享给朋友',
           bindgetphonenumber({ detail }) {
             console.log(detail);
             if (detail.errMsg.includes('fail')) {
diff --git a/src/fab/__test__/__snapshots__/demo.test.js.snap b/src/fab/__test__/__snapshots__/demo.test.js.snap
index 71a8ffadf..c4b571c5b 100644
--- a/src/fab/__test__/__snapshots__/demo.test.js.snap
+++ b/src/fab/__test__/__snapshots__/demo.test.js.snap
@@ -5,12 +5,12 @@ exports[`Fab Fab advance demo works fine 1`] = `
   <t-fab
     buttonProps="{{
       Object {
-        "icon": "call",
-        "openType": "getPhoneNumber",
+        "icon": "share",
+        "openType": "share",
       }
     }}"
     icon="add"
-    text="获取手机号"
+    text="分享给朋友"
     bind:click="handleClick"
   />
 </advance>
diff --git a/src/fab/_example/advance/index.js b/src/fab/_example/advance/index.js
index eff4945b9..8dde88ee4 100644
--- a/src/fab/_example/advance/index.js
+++ b/src/fab/_example/advance/index.js
@@ -1,8 +1,8 @@
 Component({
   data: {
     fabButton: {
-      icon: 'call',
-      openType: 'getPhoneNumber',
+      icon: 'share',
+      openType: 'share',
     },
   },
   methods: {
diff --git a/src/fab/_example/advance/index.wxml b/src/fab/_example/advance/index.wxml
index f5294476d..6961b4778 100644
--- a/src/fab/_example/advance/index.wxml
+++ b/src/fab/_example/advance/index.wxml
@@ -1 +1 @@
-<t-fab icon="add" button-props="{{fabButton}}" bind:click="handleClick" text="获取手机号" />
+<t-fab icon="add" button-props="{{fabButton}}" bind:click="handleClick" text="分享给朋友" />

From 4be1e883a922646ba9d7b14a3e11b9be3feae5af Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 1 Aug 2023 21:52:09 +0800
Subject: [PATCH 166/202] fix(swipe-cell): enable dynaimc props (#2239)

---
 src/swipe-cell/swipe-cell.ts | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/swipe-cell/swipe-cell.ts b/src/swipe-cell/swipe-cell.ts
index 696fbc207..4a89b930c 100644
--- a/src/swipe-cell/swipe-cell.ts
+++ b/src/swipe-cell/swipe-cell.ts
@@ -26,13 +26,25 @@ export default class SwiperCell extends SuperComponent {
     classPrefix: name,
   };
 
-  attached() {
-    ARRAY.push(this as WechatMiniprogram.Component.TrivialInstance);
-  }
+  observers = {
+    'left, right'() {
+      this.setSwipeWidth();
+    },
+  };
 
-  ready() {
-    this.setSwipeWidth();
-  }
+  lifetimes = {
+    attached() {
+      ARRAY.push(this as WechatMiniprogram.Component.TrivialInstance);
+    },
+
+    ready() {
+      this.setSwipeWidth();
+    },
+
+    detached() {
+      ARRAY = ARRAY.filter((item) => item !== this);
+    },
+  };
 
   setSwipeWidth() {
     Promise.all([getRect(this, `${ContainerClass}__left`), getRect(this, `${ContainerClass}__right`)]).then(
@@ -45,10 +57,6 @@ export default class SwiperCell extends SuperComponent {
     );
   }
 
-  detached() {
-    ARRAY = ARRAY.filter((item) => item !== this);
-  }
-
   open() {
     this.setData({ opened: true });
   }

From e7d0defb5bcc2682a289a1dc6ee2a4ea0d7d9fb4 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 1 Aug 2023 22:04:57 +0800
Subject: [PATCH 167/202] feat(dropdown-menu): support custom icon for arrow
 (#2240)

---
 src/dropdown-menu/README.en-US.md                |  1 +
 src/dropdown-menu/README.md                      |  1 +
 .../__test__/__snapshots__/index.test.js.snap    |  4 ++++
 src/dropdown-menu/dropdown-menu.ts               | 10 ++++++++++
 src/dropdown-menu/dropdown-menu.wxml             |  8 ++++----
 src/dropdown-menu/props.ts                       |  5 +++++
 src/dropdown-menu/type.ts                        | 16 ++++++++--------
 7 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/dropdown-menu/README.en-US.md b/src/dropdown-menu/README.en-US.md
index b654234f8..f4d68e59a 100644
--- a/src/dropdown-menu/README.en-US.md
+++ b/src/dropdown-menu/README.en-US.md
@@ -5,6 +5,7 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+arrow-icon | String / Object | 'caret-down-small' | \- | N
 close-on-click-overlay | Boolean | true | \- | N
 duration | String / Number | 200 | \- | N
 external-classes | Array | - | `['t-class', 't-class-item', 't-class-label', 't-class-icon']` | N
diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md
index bda36b9c5..65b79e3f9 100644
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@@ -46,6 +46,7 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+arrow-icon | String / Object | 'caret-down-small' | 自定义箭头图标 | N
 close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
 duration | String / Number | 200 | 动画时长 | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index e7106cb1b..0f7f8af87 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -25,7 +25,9 @@ exports[`dropdown-menu :base 1`] = `
           菜单
         </wx-view>
         <t-icon
+          class=""
           tClass="t-dropdown-menu__icon t-dropdown-menu__icon--active t-class-icon"
+          bind:click=""
         >
           <wx-view
             ariaHidden="{{true}}"
@@ -56,7 +58,9 @@ exports[`dropdown-menu :base 1`] = `
           单列多选
         </wx-view>
         <t-icon
+          class=""
           tClass="t-dropdown-menu__icon t-dropdown-menu__icon-- t-class-icon"
+          bind:click=""
         >
           <wx-view
             ariaHidden="{{true}}"
diff --git a/src/dropdown-menu/dropdown-menu.ts b/src/dropdown-menu/dropdown-menu.ts
index 4091b7092..43bfbd1da 100644
--- a/src/dropdown-menu/dropdown-menu.ts
+++ b/src/dropdown-menu/dropdown-menu.ts
@@ -2,6 +2,7 @@ import { RelationsOptions, SuperComponent, wxComponent } from '../common/src/ind
 import config from '../common/config';
 import props from './props';
 import type { TdDropdownMenuProps } from './type';
+import { calcIcon } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-dropdown-menu`;
@@ -22,6 +23,7 @@ export default class DropdownMenu extends SuperComponent {
     menus: null,
     activeIdx: -1,
     bottom: 0,
+    _arrowIcon: { name: props.arrowIcon.value },
   };
 
   relations: RelationsOptions = {
@@ -36,6 +38,14 @@ export default class DropdownMenu extends SuperComponent {
     },
   };
 
+  observers = {
+    arrowIcon(v) {
+      this.setData({
+        _arrowIcon: calcIcon(v),
+      });
+    },
+  };
+
   methods = {
     toggle(index: number) {
       const { activeIdx, duration } = this.data;
diff --git a/src/dropdown-menu/dropdown-menu.wxml b/src/dropdown-menu/dropdown-menu.wxml
index eac2ed672..54be4eefd 100644
--- a/src/dropdown-menu/dropdown-menu.wxml
+++ b/src/dropdown-menu/dropdown-menu.wxml
@@ -1,3 +1,4 @@
+<import src="../common/template/icon.wxml" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view style="{{_._style([style, customStyle])}}" class="{{ classPrefix }} class {{prefix}}-class" id="t-bar">
@@ -13,10 +14,9 @@
     aria-haspopup="menu"
   >
     <view class="{{classPrefix}}__title {{prefix}}-class-label">{{item.label}}</view>
-    <t-icon
-      name="caret-down-small"
-      t-class="{{classPrefix}}__icon {{classPrefix}}__icon--{{activeIdx == index ? 'active' : ''}} {{prefix}}-class-icon"
-      aria-hidden="{{true}}"
+    <template
+      is="icon"
+      data="{{..._arrowIcon, ariaHidden: true, tClass: classPrefix + '__icon ' + classPrefix + '__icon--' + (activeIdx == index ? 'active ' : ' ') + prefix + '-class-icon'}}"
     />
   </view>
   <slot />
diff --git a/src/dropdown-menu/props.ts b/src/dropdown-menu/props.ts
index e17202ea6..0f8740f3d 100644
--- a/src/dropdown-menu/props.ts
+++ b/src/dropdown-menu/props.ts
@@ -6,6 +6,11 @@
 
 import { TdDropdownMenuProps } from './type';
 const props: TdDropdownMenuProps = {
+  /** 自定义箭头图标 */
+  arrowIcon: {
+    type: null,
+    value: 'caret-down-small',
+  },
   /** 是否在点击遮罩层后关闭菜单 */
   closeOnClickOverlay: {
     type: Boolean,
diff --git a/src/dropdown-menu/type.ts b/src/dropdown-menu/type.ts
index 6711e14f9..256a64c49 100644
--- a/src/dropdown-menu/type.ts
+++ b/src/dropdown-menu/type.ts
@@ -5,6 +5,14 @@
  * */
 
 export interface TdDropdownMenuProps {
+  /**
+   * 自定义箭头图标
+   * @default 'caret-down-small'
+   */
+  arrowIcon?: {
+    type: null;
+    value?: string | object;
+  };
   /**
    * 是否在点击遮罩层后关闭菜单
    * @default true
@@ -13,14 +21,6 @@ export interface TdDropdownMenuProps {
     type: BooleanConstructor;
     value?: boolean;
   };
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 动画时长
    * @default 200

From c5ccbf28bb7165f105714669b5dc7bbd57b4a471 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 1 Aug 2023 22:12:52 +0800
Subject: [PATCH 168/202] chore: publish v1.1.15 (#2241)

* chore: publish v1.1.15

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 12 ++++++++++++
 package.json |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a297ca78..1606c3b39 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,18 @@ toc: false
 docClass: timeline
 ---
 
+   ## 🌈 1.1.15 `2023-08-01` 
+### 🚀 Features
+- `DropdownMenu`: 支持自定义箭头图标 @LeeJim ([#2240](https://github.com/Tencent/tdesign-miniprogram/pull/2240))
+
+### 🐞 Bug Fixes
+- `ActionSheet`: 修复宫格模式下无法调整选项颜色的问题 @LeeJim ([#2231](https://github.com/Tencent/tdesign-miniprogram/pull/2231))
+- `SwipeCell`: 修复 left、right 没有动态响应的问题 @LeeJim ([#2239](https://github.com/Tencent/tdesign-miniprogram/pull/2239))
+
+### 🚧 Others
+- `link`: 补充使用说明，修复文档中句号导致的链接跳转错误 @qianxuu ([#2227](https://github.com/Tencent/tdesign-miniprogram/pull/2227))
+ 
+
   ## 🌈 1.1.14 `2023-07-25` 
 ### 🚀 Features
 - `ActionSheet`: 新增 suffixIcon，仅在 `theme = list` 时展示 @LeeJim ([#2210](https://github.com/Tencent/tdesign-miniprogram/pull/2210))
diff --git a/package.json b/package.json
index 6e3bdc623..3558a89e4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From e232fe02ec8c72a5d9eaf3783f5ba372babbedc3 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Fri, 4 Aug 2023 16:19:06 +0800
Subject: [PATCH 169/202] fix(Swiper): resolved loading style (#2246)

---
 .../__test__/__snapshots__/demo.test.js.snap       | 14 ++------------
 src/swiper/_example/vertical/index.wxml            |  6 ++----
 src/swiper/_example/vertical/index.wxss            | 10 +---------
 src/swiper/swiper.less                             |  1 -
 4 files changed, 5 insertions(+), 26 deletions(-)

diff --git a/src/swiper/__test__/__snapshots__/demo.test.js.snap b/src/swiper/__test__/__snapshots__/demo.test.js.snap
index fa7eeb923..5e2add506 100644
--- a/src/swiper/__test__/__snapshots__/demo.test.js.snap
+++ b/src/swiper/__test__/__snapshots__/demo.test.js.snap
@@ -279,7 +279,7 @@ exports[`Swiper Swiper vertical demo works fine 1`] = `
         class="option"
       >
         <t-slider
-          label=""
+          label="{{true}}"
           max="{{5000}}"
           min="{{1000}}"
           step="{{500}}"
@@ -288,11 +288,6 @@ exports[`Swiper Swiper vertical demo works fine 1`] = `
           value="{{5000}}"
           bind:change="onIntervalChange"
         />
-        <wx-view
-          class="option-desc"
-        >
-          5000
-        </wx-view>
       </wx-view>
     </wx-view>
     <wx-view
@@ -307,7 +302,7 @@ exports[`Swiper Swiper vertical demo works fine 1`] = `
         class="option"
       >
         <t-slider
-          label=""
+          label="{{true}}"
           max="{{2000}}"
           min="{{200}}"
           step="{{100}}"
@@ -316,11 +311,6 @@ exports[`Swiper Swiper vertical demo works fine 1`] = `
           value="{{500}}"
           bind:change="onDurationChange"
         />
-        <wx-view
-          class="option-desc"
-        >
-          500
-        </wx-view>
       </wx-view>
     </wx-view>
   </wx-view>
diff --git a/src/swiper/_example/vertical/index.wxml b/src/swiper/_example/vertical/index.wxml
index 48171a6fc..6f010cfd9 100644
--- a/src/swiper/_example/vertical/index.wxml
+++ b/src/swiper/_example/vertical/index.wxml
@@ -29,11 +29,10 @@
         value="{{interval}}"
         min="{{1000}}"
         max="{{5000}}"
-        label=""
+        label="{{true}}"
         step="{{500}}"
         bindchange="onIntervalChange"
       ></t-slider>
-      <view class="option-desc">{{interval}}</view>
     </view>
   </view>
   <view class="cell">
@@ -45,11 +44,10 @@
         value="{{duration}}"
         min="{{200}}"
         max="{{2000}}"
-        label=""
+        label="{{true}}"
         step="{{100}}"
         bindchange="onDurationChange"
       ></t-slider>
-      <view class="option-desc">{{duration}}</view>
     </view>
   </view>
 </view>
diff --git a/src/swiper/_example/vertical/index.wxss b/src/swiper/_example/vertical/index.wxss
index 9685e784a..cf9b7c2ed 100644
--- a/src/swiper/_example/vertical/index.wxss
+++ b/src/swiper/_example/vertical/index.wxss
@@ -33,20 +33,12 @@
   margin-right: 20rpx;
 }
 
-.cell .option {
-  display: flex;
-  flex-direction: row;
-  justify-content: start;
-  align-items: center;
-}
-
 .cell .option-desc {
   width: 68rpx;
-  padding-left: 32rpx;
 }
 
 .cell .swiper-slider {
-  flex: 1;
+  margin: 32rpx 0;
 }
 
 .swiper-box-vertical .item {
diff --git a/src/swiper/swiper.less b/src/swiper/swiper.less
index afbeb9f3e..9b28f0c28 100644
--- a/src/swiper/swiper.less
+++ b/src/swiper/swiper.less
@@ -24,7 +24,6 @@
     transition: all 0.3s ease;
 
     &-host {
-      display: block;
       width: 100%;
     }
   }

From 16486913cc3407491f036fcc8b0551e92bc77c6e Mon Sep 17 00:00:00 2001
From: betavs <392368711@qq.com>
Date: Mon, 7 Aug 2023 16:11:55 +0800
Subject: [PATCH 170/202] feat(search): support property for input (#2229)

* feat(search): support maxcharacter and maxlength property

* feat(search): example that support maxcharacter and maxlength property

* test(search): support maxcharacter and maxlength property

* feat(search): support property for input

* test(search): support property for input

* perf(search): support property for input

* perf(search): support property for input
---
 src/search/README.md                          | 12 +++
 .../__test__/__snapshots__/index.test.js.snap | 11 ++-
 src/search/_example/maxlength/index.js        |  1 +
 src/search/_example/maxlength/index.json      |  5 +
 src/search/_example/maxlength/index.wxml      |  6 ++
 src/search/_example/maxlength/index.wxss      |  4 +
 src/search/_example/search.json               |  1 +
 src/search/_example/search.wxml               |  3 +
 src/search/props.ts                           | 58 ++++++++++++
 src/search/search.ts                          | 21 ++---
 src/search/search.wxml                        | 17 +++-
 src/search/type.ts                            | 94 +++++++++++++++++++
 12 files changed, 217 insertions(+), 16 deletions(-)
 create mode 100644 src/search/_example/maxlength/index.js
 create mode 100644 src/search/_example/maxlength/index.json
 create mode 100644 src/search/_example/maxlength/index.wxml
 create mode 100644 src/search/_example/maxlength/index.wxss

diff --git a/src/search/README.md b/src/search/README.md
index eb7847a0e..2bdb4fa9a 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -51,6 +51,18 @@ disabled | Boolean | false | 是否禁用 | N
 cursor-spacing | Number | 0 | 搜索框聚焦时底部与键盘的距离 | N
 focus | Boolean | false | 是否聚焦 | N
 label | String | '' | 已废弃。左侧文本 | N
+maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+maxlength | Number | -1 | 用户最多可以输入的文本长度，一个中文等于一个计数长度。默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
+confirm-type | String | search | 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项：send/search/next/go/done | N
+always-embed | Boolean | false | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
+confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
+cursor | Number | - | 必需。指定 focus 时的光标位置 | Y
+selection-start | Number | -1 | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | N
+selection-end | Number | -1 | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | N
+adjust-position | Boolean | true | 键盘弹起时，是否自动上推页面 | N
+hold-keyboard | Boolean | false | focus时，点击页面的时候不收起键盘 | N
+placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y
+placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
 left-icon | String / Slot | 'search' | 左侧图标 | N
 placeholder | String | '' | 占位符 | N
 right-icon | String / Slot | 'close-circle-filled' | 已废弃。右侧图标 | N
diff --git a/src/search/__test__/__snapshots__/index.test.js.snap b/src/search/__test__/__snapshots__/index.test.js.snap
index be26b67ba..01d0fd3cc 100644
--- a/src/search/__test__/__snapshots__/index.test.js.snap
+++ b/src/search/__test__/__snapshots__/index.test.js.snap
@@ -29,14 +29,23 @@ exports[`search Props :base 1`] = `
           </wx-view>
         </t-icon>
         <wx-input
+          adjustPosition="{{true}}"
+          alwaysEmbed="{{false}}"
           class="t-input__keyword t-class-input"
+          confirmHold="{{false}}"
           confirmType="search"
+          cursor="{{0}}"
           cursorSpacing="{{0}}"
           disabled="{{false}}"
           focus="{{false}}"
+          holdKeyboard="{{false}}"
+          maxlength="{{-1}}"
           name="input"
           placeholder=""
-          placeholderClass="t-search__placeholder t-search__placeholder--normal"
+          placeholderClass=" t-search__placeholder t-search__placeholder--normal"
+          placeholderStyle=""
+          selectionEnd="{{-1}}"
+          selectionStart="{{-1}}"
           type="text"
           value=""
           bind:blur="onBlur"
diff --git a/src/search/_example/maxlength/index.js b/src/search/_example/maxlength/index.js
new file mode 100644
index 000000000..b79c5124b
--- /dev/null
+++ b/src/search/_example/maxlength/index.js
@@ -0,0 +1 @@
+Component({});
diff --git a/src/search/_example/maxlength/index.json b/src/search/_example/maxlength/index.json
new file mode 100644
index 000000000..3d604b8e9
--- /dev/null
+++ b/src/search/_example/maxlength/index.json
@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "t-search": "tdesign-miniprogram/search/search"
+  }
+}
diff --git a/src/search/_example/maxlength/index.wxml b/src/search/_example/maxlength/index.wxml
new file mode 100644
index 000000000..e3025fb43
--- /dev/null
+++ b/src/search/_example/maxlength/index.wxml
@@ -0,0 +1,6 @@
+<view class="example-search">
+  <t-search placeholder="最大输入10个字符" maxlength="{{10}}" />
+</view>
+<view class="example-search">
+  <t-search placeholder="最大输入10个字符，汉字算两个" maxcharacter="{{10}}" />
+</view>
diff --git a/src/search/_example/maxlength/index.wxss b/src/search/_example/maxlength/index.wxss
new file mode 100644
index 000000000..a5f17d78a
--- /dev/null
+++ b/src/search/_example/maxlength/index.wxss
@@ -0,0 +1,4 @@
+.example-search {
+  background-color: #fff;
+  padding: 16rpx 32rpx;
+}
diff --git a/src/search/_example/search.json b/src/search/_example/search.json
index 989a6056f..3d6aa7859 100644
--- a/src/search/_example/search.json
+++ b/src/search/_example/search.json
@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Search",
   "usingComponents": {
     "base": "./base",
+    "maxlength": "./maxlength",
     "action": "./action",
     "shape": "./shape",
     "other": "./other"
diff --git a/src/search/_example/search.wxml b/src/search/_example/search.wxml
index e1edc7ed4..9edb8768e 100644
--- a/src/search/_example/search.wxml
+++ b/src/search/_example/search.wxml
@@ -4,6 +4,9 @@
   <t-demo title="01 组件类型" desc="基础搜索框">
     <base />
   </t-demo>
+  <t-demo desc="字数限制">
+    <maxlength />
+  </t-demo>
   <t-demo desc="获取焦点后显示取消按钮">
     <action />
   </t-demo>
diff --git a/src/search/props.ts b/src/search/props.ts
index 68fde16df..436ba7e7c 100644
--- a/src/search/props.ts
+++ b/src/search/props.ts
@@ -40,6 +40,64 @@ const props: TdSearchProps = {
     type: String,
     value: '',
   },
+  /** 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 */
+  maxcharacter: {
+    type: Number,
+  },
+  /** 用户最多可以输入的文本长度，一个中文等于一个计数长度，默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */
+  maxlength: {
+    type: Number,
+    value: -1,
+  },
+  /** 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) */
+  confirmType: {
+    type: String,
+    value: 'search',
+  },
+  /** 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) */
+  alwaysEmbed: {
+    type: Boolean,
+    value: false,
+  },
+  /** 点击键盘右下角按钮时是否保持键盘不收起 */
+  confirmHold: {
+    type: Boolean,
+    value: false,
+  },
+  /** 指定focus时的光标位置 */
+  cursor: {
+    type: Number,
+  },
+  /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用 */
+  selectionStart: {
+    type: Number,
+    value: -1,
+  },
+  /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用 */
+  selectionEnd: {
+    type: Number,
+    value: -1,
+  },
+  /** 键盘弹起时，是否自动上推页面 */
+  adjustPosition: {
+    type: Boolean,
+    value: true,
+  },
+  /** focus时，点击页面的时候不收起键盘 */
+  holdKeyboard: {
+    type: Boolean,
+    value: false,
+  },
+  /** 指定 placeholder 的样式 */
+  placeholderStyle: {
+    type: String,
+    value: '',
+  },
+  /** 指定 placeholder 的样式类 */
+  placeholderClass: {
+    type: String,
+    value: '',
+  },
   /** 左侧图标 */
   leftIcon: {
     type: String,
diff --git a/src/search/search.ts b/src/search/search.ts
index 9e6a820d2..87bebfb11 100644
--- a/src/search/search.ts
+++ b/src/search/search.ts
@@ -1,6 +1,7 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
+import { getCharacterLength } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-search`;
@@ -22,22 +23,22 @@ export default class Search extends SuperComponent {
 
   properties = props;
 
-  observers = {
-    focus(this: Search, nextValue: boolean) {
-      this.setData({ 'localValue.focus': nextValue });
-    },
-  };
+  observers = {};
 
   data = {
     classPrefix: name,
     prefix,
-    localValue: {
-      focus: false,
-    },
   };
 
   onInput(e) {
-    const { value } = e.detail;
+    let { value } = e.detail;
+    const { maxcharacter } = this.properties;
+
+    if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
+      const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
+
+      value = characters;
+    }
 
     this.setData({ value });
     this.triggerEvent('change', { value });
@@ -46,14 +47,12 @@ export default class Search extends SuperComponent {
   onFocus(e) {
     const { value } = e.detail;
 
-    this.setData({ 'localValue.focus': true });
     this.triggerEvent('focus', { value });
   }
 
   onBlur(e) {
     const { value } = e.detail;
 
-    this.setData({ 'localValue.focus': false });
     this.triggerEvent('blur', { value });
   }
 
diff --git a/src/search/search.wxml b/src/search/search.wxml
index 14a6a2280..667d0d771 100644
--- a/src/search/search.wxml
+++ b/src/search/search.wxml
@@ -2,7 +2,7 @@
 
 <view style="{{_._style([style, customStyle])}}" class="class {{classPrefix}} {{prefix}}-class">
   <view
-    class="{{classPrefix}}__input-box {{prefix}}-{{localValue.focus ? 'is-focused' : 'not-focused'}} {{classPrefix}}__input-box--{{center ? 'center' : ''}} {{classPrefix}}__input-box--{{shape}} {{prefix}}-class-input-container"
+    class="{{classPrefix}}__input-box {{prefix}}-{{focus ? 'is-focused' : 'not-focused'}} {{classPrefix}}__input-box--{{center ? 'center' : ''}} {{classPrefix}}__input-box--{{shape}} {{prefix}}-class-input-container"
   >
     <!-- <view wx:if="{{label}}" class="{{classPrefix}}__label {{prefix}}-class-label">{{label}}</view>
     <slot name="label" /> -->
@@ -17,14 +17,23 @@
     <input
       type="{{type}}"
       name="input"
+      maxlength="{{maxlength}}"
       disabled="{{disabled}}"
       class="{{prefix}}-input__keyword {{prefix}}-class-input"
-      focus="{{localValue.focus}}"
+      focus="{{focus}}"
       value="{{value}}"
-      confirm-type="search"
+      confirm-type="{{confirmType}}"
+      confirm-hold="{{confirmHold}}"
+      cursor="{{cursor}}"
+      adjust-position="{{adjustPosition}}"
+      always-embed="{{alwaysEmbed}}"
+      selection-start="{{selectionStart}}"
+      selection-end="{{selectionEnd}}"
+      hold-keyboard="{{holdKeyboard}}"
       cursor-spacing="{{cursorSpacing}}"
       placeholder="{{placeholder}}"
-      placeholder-class="{{classPrefix}}__placeholder {{classPrefix}}__placeholder--{{center ? 'center': 'normal'}}"
+      placeholder-style="{{placeholderStyle}}"
+      placeholder-class="{{placeholderClass}} {{classPrefix}}__placeholder {{classPrefix}}__placeholder--{{center ? 'center': 'normal'}}"
       bind:input="onInput"
       bind:focus="onFocus"
       bind:blur="onBlur"
diff --git a/src/search/type.ts b/src/search/type.ts
index 3ebb2ea8f..0ce847c52 100644
--- a/src/search/type.ts
+++ b/src/search/type.ts
@@ -68,6 +68,100 @@ export interface TdSearchProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用
+   */
+  maxcharacter?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 用户最多可以输入的文本长度，一个中文等于一个计数长度，默认为 -1，不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用
+   * @default -1
+   */
+  maxlength?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 设置键盘右下角按钮的文字，仅在type='text'时生效。<br />具体释义：<br />`send` 右下角按钮为“发送”；<br />`search` 右下角按钮为“搜索”；<br />`next` 右下角按钮为“下一个”；<br />`go` 右下角按钮为“前往”；<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)
+   * @default search
+   */
+  confirmType?: {
+    type: StringConstructor;
+    value?: 'send' | 'search' | 'next' | 'go' | 'done';
+  };
+  /**
+   * 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
+   * @default false
+   */
+  alwaysEmbed?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   * @default false
+   */
+  confirmHold?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 指定focus时的光标位置
+   */
+  cursor: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 光标起始位置，自动聚集时有效，需与selection-end搭配使用
+   * @default -1
+   */
+  selectionStart?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 光标结束位置，自动聚集时有效，需与selection-start搭配使用
+   * @default -1
+   */
+  selectionEnd?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 键盘弹起时，是否自动上推页面
+   * @default true
+   */
+  adjustPosition?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * focus时，点击页面的时候不收起键盘
+   * @default false
+   */
+  holdKeyboard?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 指定 placeholder 的样式
+   * @default ''
+   */
+  placeholderStyle: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 指定 placeholder 的样式类
+   * @default ''
+   */
+  placeholderClass?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 左侧图标
    * @default 'search'

From 90fc22cc3defb61ee1761e578c2ca12ae1670eff Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Mon, 7 Aug 2023 18:49:14 +0800
Subject: [PATCH 171/202] docs(swiper): add external class (#2256)

---
 src/swiper/README.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/swiper/README.md b/src/swiper/README.md
index 35383f442..731ceaecb 100644
--- a/src/swiper/README.md
+++ b/src/swiper/README.md
@@ -85,6 +85,16 @@ change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发
 click | `(index: number)` | `0.34.0`。点击轮播项时触发
 image-load | `(index: number)` | `1.1.4`。图片加载时触发
 
+### Swiper 外部样式类
+
+类名 | 说明
+-- | --
+t-class | 根节点样式类
+t-class-nav | 导航样式类
+t-class-image | 当前图片样式类
+t-class-prev-image | 上一图片样式类
+t-class-next-image | 下一图片样式类
+
 ### SwiperNav Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -97,6 +107,11 @@ show-controls | Boolean | false | `0.32.0`。是否显示两侧的控制按钮 |
 total | Number | 0 | `0.34.0`。总共的项数 | N
 type | String | dots | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper-nav/type.ts) | N
 
+### SwiperNav 外部样式类
+
+类名 | 说明
+-- | --
+t-class | 根节点样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。

From 0f155c1f9bbfd24f142bdd5666a5b5f027857b49 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 8 Aug 2023 10:08:06 +0800
Subject: [PATCH 172/202] fix(TabBar): resolved demo code error (#2257)

---
 src/tab-bar/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tab-bar/README.md b/src/tab-bar/README.md
index 552b9afa0..8d9c3dde4 100644
--- a/src/tab-bar/README.md
+++ b/src/tab-bar/README.md
@@ -30,7 +30,7 @@ isComponent: true
 
 #### 纯图标标签栏
 
-{{ text-only }}
+{{ icon-only }}
 
 #### 双层级纯文本标签栏
 

From 4ac23dbdaebd338797313bf67fc2101b602082dd Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Tue, 8 Aug 2023 10:31:02 +0800
Subject: [PATCH 173/202] feat(Icon): update icon form 0.1.4 to 0.2.0 (#2254)

---
 .../__test__/__snapshots__/demo.test.js.snap  | 15821 +++++++++++++++-
 src/icon/_example/data.js                     |   967 +-
 src/icon/icon.less                            |  4334 ++++-
 3 files changed, 20151 insertions(+), 971 deletions(-)

diff --git a/src/icon/__test__/__snapshots__/demo.test.js.snap b/src/icon/__test__/__snapshots__/demo.test.js.snap
index 427bfa0e6..3c108b947 100644
--- a/src/icon/__test__/__snapshots__/demo.test.js.snap
+++ b/src/icon/__test__/__snapshots__/demo.test.js.snap
@@ -5,6 +5,36 @@ exports[`Icon Icon base demo works fine 1`] = `
   <wx-view
     class="demo__list"
   >
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="activity"
+        name="activity"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        activity
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="add-and-subtract"
+        name="add-and-subtract"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        add-and-subtract
+      </wx-view>
+    </wx-view>
     <wx-view
       class="demo__card"
     >
@@ -54,3585 +84,17940 @@ exports[`Icon Icon base demo works fine 1`] = `
       class="demo__card"
     >
       <t-icon
-        data-name="app"
-        name="app"
+        data-name="address-book"
+        name="address-book"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        app
+        address-book
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-down-rectangle"
-        name="arrow-down-rectangle"
+        data-name="adjustment"
+        name="adjustment"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-down-rectangle
+        adjustment
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-down"
-        name="arrow-down"
+        data-name="airplay-wave"
+        name="airplay-wave"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-down
+        airplay-wave
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-left"
-        name="arrow-left"
+        data-name="alarm-add"
+        name="alarm-add"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-left
+        alarm-add
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-right"
-        name="arrow-right"
+        data-name="alarm-off"
+        name="alarm-off"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-right
+        alarm-off
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-triangle-down-filled"
-        name="arrow-triangle-down-filled"
+        data-name="alarm"
+        name="alarm"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-triangle-down-filled
+        alarm
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-triangle-down"
-        name="arrow-triangle-down"
+        data-name="align-top"
+        name="align-top"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-triangle-down
+        align-top
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-triangle-up-filled"
-        name="arrow-triangle-up-filled"
+        data-name="align-vertical"
+        name="align-vertical"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-triangle-up-filled
+        align-vertical
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-triangle-up"
-        name="arrow-triangle-up"
+        data-name="alpha"
+        name="alpha"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-triangle-up
+        alpha
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="arrow-up"
-        name="arrow-up"
+        data-name="analytics"
+        name="analytics"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        arrow-up
+        analytics
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="attach"
-        name="attach"
+        data-name="anchor"
+        name="anchor"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        attach
+        anchor
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="backtop-rectangle"
-        name="backtop-rectangle"
+        data-name="angry"
+        name="angry"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        backtop-rectangle
+        angry
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="backtop"
-        name="backtop"
+        data-name="animation-1"
+        name="animation-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        backtop
+        animation-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="backward"
-        name="backward"
+        data-name="animation"
+        name="animation"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        backward
+        animation
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="barcode"
-        name="barcode"
+        data-name="anticlockwise"
+        name="anticlockwise"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        barcode
+        anticlockwise
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="books"
-        name="books"
+        data-name="api"
+        name="api"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        books
+        api
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="browse-off"
-        name="browse-off"
+        data-name="app"
+        name="app"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        app
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="apple"
+        name="apple"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        apple
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="application"
+        name="application"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        application
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="architecture-hui-style"
+        name="architecture-hui-style"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        architecture-hui-style
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="archway-1"
+        name="archway-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        archway-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="archway"
+        name="archway"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        archway
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down-circle"
+        name="arrow-down-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down-rectangle"
+        name="arrow-down-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-down"
+        name="arrow-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-circle"
+        name="arrow-left-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-down-circle"
+        name="arrow-left-down-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-down-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-down"
+        name="arrow-left-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-right-1"
+        name="arrow-left-right-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-right-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-right-2"
+        name="arrow-left-right-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-right-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-right-3"
+        name="arrow-left-right-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-right-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-right-circle"
+        name="arrow-left-right-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-right-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-up-circle"
+        name="arrow-left-up-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-up-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left-up"
+        name="arrow-left-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-left"
+        name="arrow-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-right-circle"
+        name="arrow-right-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-right-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-right-down-circle"
+        name="arrow-right-down-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-right-down-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-right-down"
+        name="arrow-right-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-right-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-right-up-circle"
+        name="arrow-right-up-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-right-up-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-right-up"
+        name="arrow-right-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-right-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-right"
+        name="arrow-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-triangle-down-filled"
+        name="arrow-triangle-down-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-triangle-down-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-triangle-down"
+        name="arrow-triangle-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-triangle-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-triangle-up-filled"
+        name="arrow-triangle-up-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-triangle-up-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-triangle-up"
+        name="arrow-triangle-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-triangle-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-circle"
+        name="arrow-up-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-down-1"
+        name="arrow-up-down-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-down-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-down-2"
+        name="arrow-up-down-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-down-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-down-3"
+        name="arrow-up-down-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-down-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up-down-circle"
+        name="arrow-up-down-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up-down-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="arrow-up"
+        name="arrow-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        arrow-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="artboard"
+        name="artboard"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        artboard
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="article"
+        name="article"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        article
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="assignment-checked"
+        name="assignment-checked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        assignment-checked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="assignment-code"
+        name="assignment-code"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        assignment-code
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="assignment-error"
+        name="assignment-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        assignment-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="assignment-user"
+        name="assignment-user"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        assignment-user
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="assignment"
+        name="assignment"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        assignment
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="attach"
+        name="attach"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        attach
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="attic-1"
+        name="attic-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        attic-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="attic"
+        name="attic"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        attic
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="audio"
+        name="audio"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        audio
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="awkward"
+        name="awkward"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        awkward
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="backtop-rectangle"
+        name="backtop-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        backtop-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="backtop"
+        name="backtop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        backtop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="backup"
+        name="backup"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        backup
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="backward"
+        name="backward"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        backward
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bad-laugh"
+        name="bad-laugh"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bad-laugh
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bamboo-shoot"
+        name="bamboo-shoot"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bamboo-shoot
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="banana"
+        name="banana"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        banana
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="barbecue"
+        name="barbecue"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        barbecue
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="barcode-1"
+        name="barcode-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        barcode-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="barcode"
+        name="barcode"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        barcode
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="base-station"
+        name="base-station"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        base-station
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="battery-add"
+        name="battery-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        battery-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="battery-charging"
+        name="battery-charging"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        battery-charging
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="battery-low"
+        name="battery-low"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        battery-low
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="battery"
+        name="battery"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        battery
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bean"
+        name="bean"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bean
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="beer"
+        name="beer"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        beer
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="beta"
+        name="beta"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        beta
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bifurcate"
+        name="bifurcate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bifurcate
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bill"
+        name="bill"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bill
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="blockchain"
+        name="blockchain"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        blockchain
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bluetooth"
+        name="bluetooth"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bluetooth
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bone"
+        name="bone"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bone
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="book-open"
+        name="book-open"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        book-open
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="book"
+        name="book"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        book
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bookmark-add"
+        name="bookmark-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bookmark-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bookmark-checked"
+        name="bookmark-checked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bookmark-checked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bookmark-double"
+        name="bookmark-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bookmark-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bookmark-minus"
+        name="bookmark-minus"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bookmark-minus
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bookmark"
+        name="bookmark"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bookmark
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="braces"
+        name="braces"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        braces
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="brackets"
+        name="brackets"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        brackets
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bread"
+        name="bread"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bread
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bridge-1"
+        name="bridge-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bridge-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bridge-2"
+        name="bridge-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bridge-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bridge-3"
+        name="bridge-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bridge-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bridge-4"
+        name="bridge-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bridge-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bridge-5"
+        name="bridge-5"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bridge-5
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bridge-6"
+        name="bridge-6"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bridge-6
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bridge"
+        name="bridge"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bridge
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="brightness-1"
+        name="brightness-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        brightness-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="brightness"
+        name="brightness"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        brightness
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="broccoli"
+        name="broccoli"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        broccoli
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="browse-gallery"
+        name="browse-gallery"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        browse-gallery
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="browse-off"
+        name="browse-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        browse-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="browse"
+        name="browse"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        browse
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="brush"
+        name="brush"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        brush
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bug-report"
+        name="bug-report"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bug-report
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bug"
+        name="bug"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bug
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="building-1"
+        name="building-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        building-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="building-2"
+        name="building-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        building-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="building-3"
+        name="building-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        building-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="building-4"
+        name="building-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        building-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="building-5"
+        name="building-5"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        building-5
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="building"
+        name="building"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        building
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="bulletpoint"
+        name="bulletpoint"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        bulletpoint
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="button"
+        name="button"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        button
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cabbage"
+        name="cabbage"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cabbage
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cake"
+        name="cake"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cake
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calculation-1"
+        name="calculation-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calculation-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calculation"
+        name="calculation"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calculation
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calculator-1"
+        name="calculator-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calculator-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calculator"
+        name="calculator"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calculator
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calendar-1"
+        name="calendar-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calendar-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calendar-2"
+        name="calendar-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calendar-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calendar-edit"
+        name="calendar-edit"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calendar-edit
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calendar-event"
+        name="calendar-event"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calendar-event
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calendar"
+        name="calendar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calendar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="call-1"
+        name="call-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        call-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="call-cancel"
+        name="call-cancel"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        call-cancel
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="call-forwarded"
+        name="call-forwarded"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        call-forwarded
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="call-incoming"
+        name="call-incoming"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        call-incoming
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="call-off"
+        name="call-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        call-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="call"
+        name="call"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        call
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calm-1"
+        name="calm-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calm-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="calm"
+        name="calm"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        calm
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="camera-1"
+        name="camera-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        camera-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="camera-2"
+        name="camera-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        camera-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="camera-off"
+        name="camera-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        camera-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="camera"
+        name="camera"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        camera
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="candy"
+        name="candy"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        candy
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="card"
+        name="card"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        card
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cardmembership"
+        name="cardmembership"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cardmembership
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-down-small"
+        name="caret-down-small"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-down-small
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-down"
+        name="caret-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-left-small"
+        name="caret-left-small"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-left-small
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-left"
+        name="caret-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-right-small"
+        name="caret-right-small"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-right-small
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-right"
+        name="caret-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-up-small"
+        name="caret-up-small"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-up-small
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="caret-up"
+        name="caret-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        caret-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cart-add"
+        name="cart-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cart-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cart"
+        name="cart"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cart
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cast"
+        name="cast"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cast
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="castle-1"
+        name="castle-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        castle-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="castle-2"
+        name="castle-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        castle-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="castle-3"
+        name="castle-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        castle-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="castle-4"
+        name="castle-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        castle-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="castle-5"
+        name="castle-5"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        castle-5
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="castle-6"
+        name="castle-6"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        castle-6
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="castle-7"
+        name="castle-7"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        castle-7
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="castle"
+        name="castle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        castle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cat"
+        name="cat"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cat
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="catalog"
+        name="catalog"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        catalog
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cd"
+        name="cd"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cd
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="celsius"
+        name="celsius"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        celsius
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="center-focus-strong"
+        name="center-focus-strong"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        center-focus-strong
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="centimeter"
+        name="centimeter"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        centimeter
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="certificate-1"
+        name="certificate-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        certificate-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="certificate"
+        name="certificate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        certificate
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-3d"
+        name="chart-3d"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-3d
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-add"
+        name="chart-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-analytics"
+        name="chart-analytics"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-analytics
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-area-multi"
+        name="chart-area-multi"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-area-multi
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-area"
+        name="chart-area"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-area
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-bar"
+        name="chart-bar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-bar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-bubble"
+        name="chart-bubble"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-bubble
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-colum"
+        name="chart-colum"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-colum
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-combo"
+        name="chart-combo"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-combo
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-line-data-1"
+        name="chart-line-data-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-line-data-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-line-data"
+        name="chart-line-data"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-line-data
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-line-multi"
+        name="chart-line-multi"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-line-multi
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-line"
+        name="chart-line"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-line
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-maximum"
+        name="chart-maximum"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-maximum
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-median"
+        name="chart-median"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-median
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-minimum"
+        name="chart-minimum"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-minimum
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-pie"
+        name="chart-pie"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-pie
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-radar"
+        name="chart-radar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-radar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-radial"
+        name="chart-radial"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-radial
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-ring-1"
+        name="chart-ring-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-ring-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-ring"
+        name="chart-ring"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-ring
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-scatter"
+        name="chart-scatter"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-scatter
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart-stacked"
+        name="chart-stacked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart-stacked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chart"
+        name="chart"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chart
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-add"
+        name="chat-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-bubble-1"
+        name="chat-bubble-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-bubble-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-bubble-add"
+        name="chat-bubble-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-bubble-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-bubble-error"
+        name="chat-bubble-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-bubble-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-bubble-help"
+        name="chat-bubble-help"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-bubble-help
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-bubble-history"
+        name="chat-bubble-history"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-bubble-history
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-bubble-locked"
+        name="chat-bubble-locked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-bubble-locked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-bubble-smile"
+        name="chat-bubble-smile"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-bubble-smile
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-bubble"
+        name="chat-bubble"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-bubble
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-checked"
+        name="chat-checked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-checked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-clear"
+        name="chat-clear"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-clear
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-double"
+        name="chat-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-error"
+        name="chat-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-heart"
+        name="chat-heart"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-heart
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-message"
+        name="chat-message"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-message
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-off"
+        name="chat-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-poll"
+        name="chat-poll"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-poll
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat-setting"
+        name="chat-setting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat-setting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chat"
+        name="chat"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chat
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-circle-filled"
+        name="check-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-circle"
+        name="check-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-double"
+        name="check-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-rectangle-filled"
+        name="check-rectangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-rectangle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check-rectangle"
+        name="check-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="check"
+        name="check"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        check
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cheese"
+        name="cheese"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cheese
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cherry"
+        name="cherry"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cherry
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down-circle"
+        name="chevron-down-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down-double-s"
+        name="chevron-down-double-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down-double-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down-double"
+        name="chevron-down-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down-rectangle"
+        name="chevron-down-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down-s"
+        name="chevron-down-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-down"
+        name="chevron-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left-circle"
+        name="chevron-left-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left-double-s"
+        name="chevron-left-double-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left-double-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left-double"
+        name="chevron-left-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left-rectangle"
+        name="chevron-left-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left-s"
+        name="chevron-left-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-left"
+        name="chevron-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right-circle"
+        name="chevron-right-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right-double-s"
+        name="chevron-right-double-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right-double-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right-double"
+        name="chevron-right-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right-rectangle"
+        name="chevron-right-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right-s"
+        name="chevron-right-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-right"
+        name="chevron-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up-circle"
+        name="chevron-up-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up-double-s"
+        name="chevron-up-double-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up-double-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up-double"
+        name="chevron-up-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up-rectangle"
+        name="chevron-up-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up-s"
+        name="chevron-up-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chevron-up"
+        name="chevron-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chevron-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chicken"
+        name="chicken"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chicken
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chili"
+        name="chili"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chili
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chimney-1"
+        name="chimney-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chimney-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chimney-2"
+        name="chimney-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chimney-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chimney"
+        name="chimney"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chimney
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="chinese-cabbage"
+        name="chinese-cabbage"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        chinese-cabbage
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="church"
+        name="church"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        church
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="circle"
+        name="circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-1"
+        name="city-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-10"
+        name="city-10"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-10
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-11"
+        name="city-11"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-11
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-12"
+        name="city-12"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-12
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-13"
+        name="city-13"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-13
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-14"
+        name="city-14"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-14
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-15"
+        name="city-15"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-15
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-2"
+        name="city-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-3"
+        name="city-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-4"
+        name="city-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-5"
+        name="city-5"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-5
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-6"
+        name="city-6"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-6
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-7"
+        name="city-7"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-7
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-8"
+        name="city-8"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-8
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-9"
+        name="city-9"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-9
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-ancient-1"
+        name="city-ancient-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-ancient-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-ancient-2"
+        name="city-ancient-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-ancient-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city-ancient"
+        name="city-ancient"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city-ancient
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="city"
+        name="city"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        city
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="clear-formatting-1"
+        name="clear-formatting-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        clear-formatting-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="clear-formatting"
+        name="clear-formatting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        clear-formatting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="clear"
+        name="clear"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        clear
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close-circle-filled"
+        name="close-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close-circle"
+        name="close-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close-octagon"
+        name="close-octagon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close-octagon
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close-rectangle"
+        name="close-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="close"
+        name="close"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        close
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloud-download"
+        name="cloud-download"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloud-download
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloud-upload"
+        name="cloud-upload"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloud-upload
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloud"
+        name="cloud"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloud
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloudy-day"
+        name="cloudy-day"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloudy-day
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloudy-night-rain"
+        name="cloudy-night-rain"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloudy-night-rain
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloudy-night"
+        name="cloudy-night"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloudy-night
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloudy-rain"
+        name="cloudy-rain"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloudy-rain
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cloudy-sunny"
+        name="cloudy-sunny"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cloudy-sunny
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="code-1"
+        name="code-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        code-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="code-off"
+        name="code-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        code-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="code"
+        name="code"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        code
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cola"
+        name="cola"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cola
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="collage"
+        name="collage"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        collage
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="collection"
+        name="collection"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        collection
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="color-invert"
+        name="color-invert"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        color-invert
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="combination"
+        name="combination"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        combination
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="command"
+        name="command"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        command
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="compass-1"
+        name="compass-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        compass-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="compass"
+        name="compass"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        compass
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-breadcrumb"
+        name="component-breadcrumb"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-breadcrumb
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-checkbox"
+        name="component-checkbox"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-checkbox
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-divider-horizontal"
+        name="component-divider-horizontal"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-divider-horizontal
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-divider-vertical"
+        name="component-divider-vertical"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-divider-vertical
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-dropdown"
+        name="component-dropdown"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-dropdown
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-grid"
+        name="component-grid"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-grid
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-input"
+        name="component-input"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-input
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-layout"
+        name="component-layout"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-layout
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-radio"
+        name="component-radio"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-radio
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-space"
+        name="component-space"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-space
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-steps"
+        name="component-steps"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-steps
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="component-switch"
+        name="component-switch"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        component-switch
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="constraint"
+        name="constraint"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        constraint
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="contrast-1"
+        name="contrast-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        contrast-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="contrast"
+        name="contrast"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        contrast
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="control-platform"
+        name="control-platform"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        control-platform
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cooperate"
+        name="cooperate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cooperate
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="coordinate-system"
+        name="coordinate-system"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        coordinate-system
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="copy"
+        name="copy"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        copy
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="copyright"
+        name="copyright"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        copyright
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="corn"
+        name="corn"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        corn
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="coupon"
+        name="coupon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        coupon
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="course"
+        name="course"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        course
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cpu"
+        name="cpu"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cpu
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="crack"
+        name="crack"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        crack
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="creditcard-add"
+        name="creditcard-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        creditcard-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="creditcard-off"
+        name="creditcard-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        creditcard-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="creditcard"
+        name="creditcard"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        creditcard
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="crooked-smile"
+        name="crooked-smile"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        crooked-smile
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cry-and-laugh"
+        name="cry-and-laugh"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cry-and-laugh
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cry-loudly"
+        name="cry-loudly"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cry-loudly
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="css3"
+        name="css3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        css3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cucumber"
+        name="cucumber"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cucumber
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="currency-exchange"
+        name="currency-exchange"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        currency-exchange
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cursor"
+        name="cursor"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cursor
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="curtain"
+        name="curtain"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        curtain
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="curve"
+        name="curve"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        curve
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cut-1"
+        name="cut-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cut-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="cut"
+        name="cut"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        cut
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dam-1"
+        name="dam-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dam-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dam-2"
+        name="dam-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dam-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dam-3"
+        name="dam-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dam-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dam-4"
+        name="dam-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dam-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dam-5"
+        name="dam-5"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dam-5
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dam-6"
+        name="dam-6"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dam-6
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dam-7"
+        name="dam-7"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dam-7
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dam"
+        name="dam"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dam
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dart-board"
+        name="dart-board"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dart-board
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dashboard-1"
+        name="dashboard-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dashboard-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dashboard"
+        name="dashboard"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dashboard
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="data-base"
+        name="data-base"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        data-base
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="data-checked"
+        name="data-checked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        data-checked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="data-display"
+        name="data-display"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        data-display
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="data-error"
+        name="data-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        data-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="data-search"
+        name="data-search"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        data-search
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="data"
+        name="data"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        data
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="delete-1"
+        name="delete-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        delete-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="delete-time"
+        name="delete-time"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        delete-time
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="delete"
+        name="delete"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        delete
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="delta"
+        name="delta"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        delta
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="depressed"
+        name="depressed"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        depressed
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="desktop-1"
+        name="desktop-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        desktop-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="desktop"
+        name="desktop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        desktop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="despise"
+        name="despise"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        despise
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="device"
+        name="device"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        device
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="discount-filled"
+        name="discount-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        discount-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="discount"
+        name="discount"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        discount
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dissatisfaction"
+        name="dissatisfaction"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dissatisfaction
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="divide"
+        name="divide"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        divide
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dividers-1"
+        name="dividers-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dividers-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dividers"
+        name="dividers"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dividers
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="doge"
+        name="doge"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        doge
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="double-storey"
+        name="double-storey"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        double-storey
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="download-1"
+        name="download-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        download-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="download"
+        name="download"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        download
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="downscale"
+        name="downscale"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        downscale
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="drag-drop"
+        name="drag-drop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        drag-drop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="drag-move"
+        name="drag-move"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        drag-move
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="drink"
+        name="drink"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        drink
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="drumstick"
+        name="drumstick"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        drumstick
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dv"
+        name="dv"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dv
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="dvd"
+        name="dvd"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        dvd
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="earphone"
+        name="earphone"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        earphone
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="earth"
+        name="earth"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        earth
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="edit-1"
+        name="edit-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        edit-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="edit-2"
+        name="edit-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        edit-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="edit-off"
+        name="edit-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        edit-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="edit"
+        name="edit"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        edit
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="education"
+        name="education"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        education
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="eggplant"
+        name="eggplant"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        eggplant
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="ellipsis"
+        name="ellipsis"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        ellipsis
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="emo-emotional"
+        name="emo-emotional"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        emo-emotional
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="enter"
+        name="enter"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        enter
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="equal"
+        name="equal"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        equal
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="error-circle-filled"
+        name="error-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        error-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="error-circle"
+        name="error-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        error-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="error-triangle"
+        name="error-triangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        error-triangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="error"
+        name="error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="excited-1"
+        name="excited-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        excited-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="excited"
+        name="excited"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        excited
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="expand-horizontal"
+        name="expand-horizontal"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        expand-horizontal
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="expand-vertical"
+        name="expand-vertical"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        expand-vertical
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="explore-off"
+        name="explore-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        explore-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="explore"
+        name="explore"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        explore
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="exposure"
+        name="exposure"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        exposure
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="extension-off"
+        name="extension-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        extension-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="extension"
+        name="extension"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        extension
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="face-retouching"
+        name="face-retouching"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        face-retouching
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fact-check"
+        name="fact-check"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fact-check
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fahrenheit-scale"
+        name="fahrenheit-scale"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fahrenheit-scale
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="feel-at-ease"
+        name="feel-at-ease"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        feel-at-ease
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="ferocious"
+        name="ferocious"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        ferocious
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="ferris-wheel"
+        name="ferris-wheel"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        ferris-wheel
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-1"
+        name="file-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-add-1"
+        name="file-add-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-add-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-add"
+        name="file-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-attachment"
+        name="file-attachment"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-attachment
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-blocked"
+        name="file-blocked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-blocked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-code-1"
+        name="file-code-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-code-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-code"
+        name="file-code"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-code
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-copy"
+        name="file-copy"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-copy
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-download"
+        name="file-download"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-download
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-excel"
+        name="file-excel"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-excel
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-export"
+        name="file-export"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-export
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-icon"
+        name="file-icon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-icon
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-image"
+        name="file-image"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-image
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-import"
+        name="file-import"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-import
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-locked"
+        name="file-locked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-locked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-minus"
+        name="file-minus"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-minus
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-music"
+        name="file-music"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-music
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-onenote"
+        name="file-onenote"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-onenote
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-outlook"
+        name="file-outlook"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-outlook
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-paste"
+        name="file-paste"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-paste
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-pdf"
+        name="file-pdf"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-pdf
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-powerpoint"
+        name="file-powerpoint"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-powerpoint
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-restore"
+        name="file-restore"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-restore
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-safety"
+        name="file-safety"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-safety
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-search"
+        name="file-search"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-search
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-setting"
+        name="file-setting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-setting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-teams"
+        name="file-teams"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-teams
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-unknown"
+        name="file-unknown"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-unknown
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-unlocked"
+        name="file-unlocked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-unlocked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-word"
+        name="file-word"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-word
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file-zip"
+        name="file-zip"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file-zip
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="file"
+        name="file"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        file
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fill-color-1"
+        name="fill-color-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fill-color-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fill-color"
+        name="fill-color"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fill-color
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="film-1"
+        name="film-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        film-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="film"
+        name="film"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        film
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="filter-1"
+        name="filter-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        filter-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="filter-2"
+        name="filter-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        filter-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="filter-3"
+        name="filter-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        filter-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="filter-clear"
+        name="filter-clear"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        filter-clear
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="filter-off"
+        name="filter-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        filter-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="filter"
+        name="filter"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        filter
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fingerprint-1"
+        name="fingerprint-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fingerprint-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fingerprint-2"
+        name="fingerprint-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fingerprint-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fingerprint-3"
+        name="fingerprint-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fingerprint-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fingerprint"
+        name="fingerprint"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fingerprint
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fish"
+        name="fish"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fish
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flag-1"
+        name="flag-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flag-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flag-2"
+        name="flag-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flag-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flag-3"
+        name="flag-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flag-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flag-4"
+        name="flag-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flag-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flag"
+        name="flag"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flag
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flashlight"
+        name="flashlight"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flashlight
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flight-landing"
+        name="flight-landing"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flight-landing
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flight-takeoff"
+        name="flight-takeoff"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flight-takeoff
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flip-smiling-face"
+        name="flip-smiling-face"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flip-smiling-face
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flip-to-back"
+        name="flip-to-back"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flip-to-back
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="flip-to-front"
+        name="flip-to-front"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        flip-to-front
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="focus"
+        name="focus"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        focus
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fog-night"
+        name="fog-night"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fog-night
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fog-sunny"
+        name="fog-sunny"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fog-sunny
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fog"
+        name="fog"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fog
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-1"
+        name="folder-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-add-1"
+        name="folder-add-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-add-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-add"
+        name="folder-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-blocked"
+        name="folder-blocked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-blocked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-details"
+        name="folder-details"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-details
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-export"
+        name="folder-export"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-export
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-import"
+        name="folder-import"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-import
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-locked"
+        name="folder-locked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-locked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-minus"
+        name="folder-minus"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-minus
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-move"
+        name="folder-move"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-move
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-off"
+        name="folder-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-open-1"
+        name="folder-open-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-open-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-open"
+        name="folder-open"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-open
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-search"
+        name="folder-search"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-search
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-setting"
+        name="folder-setting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-setting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-shared"
+        name="folder-shared"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-shared
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-unlocked"
+        name="folder-unlocked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-unlocked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder-zip"
+        name="folder-zip"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder-zip
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="folder"
+        name="folder"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        folder
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="forest"
+        name="forest"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        forest
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fork"
+        name="fork"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fork
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="form"
+        name="form"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        form
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-horizontal-align-bottom"
+        name="format-horizontal-align-bottom"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-horizontal-align-bottom
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-horizontal-align-center"
+        name="format-horizontal-align-center"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-horizontal-align-center
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-horizontal-align-top"
+        name="format-horizontal-align-top"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-horizontal-align-top
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-vertical-align-center"
+        name="format-vertical-align-center"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-vertical-align-center
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-vertical-align-left"
+        name="format-vertical-align-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-vertical-align-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="format-vertical-align-right"
+        name="format-vertical-align-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        format-vertical-align-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="forward"
+        name="forward"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        forward
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="frame-1"
+        name="frame-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        frame-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="frame"
+        name="frame"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        frame
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fries"
+        name="fries"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fries
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fullscreen-1"
+        name="fullscreen-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fullscreen-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fullscreen-2"
+        name="fullscreen-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fullscreen-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fullscreen-exit-1"
+        name="fullscreen-exit-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fullscreen-exit-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fullscreen-exit"
+        name="fullscreen-exit"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fullscreen-exit
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="fullscreen"
+        name="fullscreen"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        fullscreen
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="function-curve"
+        name="function-curve"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        function-curve
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="functions-1"
+        name="functions-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        functions-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="functions"
+        name="functions"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        functions
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gamepad-1"
+        name="gamepad-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gamepad-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gamepad"
+        name="gamepad"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gamepad
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gamma"
+        name="gamma"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gamma
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="garlic"
+        name="garlic"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        garlic
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gender-female"
+        name="gender-female"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gender-female
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gender-male"
+        name="gender-male"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gender-male
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-applause"
+        name="gesture-applause"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-applause
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-click"
+        name="gesture-click"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-click
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-down"
+        name="gesture-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-expansion"
+        name="gesture-expansion"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-expansion
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-left-slip"
+        name="gesture-left-slip"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-left-slip
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-left"
+        name="gesture-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-pray-1"
+        name="gesture-pray-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-pray-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-pray"
+        name="gesture-pray"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-pray
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-press"
+        name="gesture-press"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-press
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-ranslation-1"
+        name="gesture-ranslation-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-ranslation-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-ranslation"
+        name="gesture-ranslation"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-ranslation
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-right-slip"
+        name="gesture-right-slip"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-right-slip
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-right"
+        name="gesture-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-slide-up"
+        name="gesture-slide-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-slide-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-up-1"
+        name="gesture-up-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-up-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-up-2"
+        name="gesture-up-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-up-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-up-and-down"
+        name="gesture-up-and-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-up-and-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-up"
+        name="gesture-up"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-up
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gesture-wipe-down"
+        name="gesture-wipe-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gesture-wipe-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gift"
+        name="gift"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gift
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="giggle"
+        name="giggle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        giggle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="git-branch"
+        name="git-branch"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        git-branch
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="git-commit"
+        name="git-commit"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        git-commit
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="git-merge"
+        name="git-merge"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        git-merge
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="git-pull-request"
+        name="git-pull-request"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        git-pull-request
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="git-repository-commits"
+        name="git-repository-commits"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        git-repository-commits
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="git-repository-private"
+        name="git-repository-private"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        git-repository-private
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="git-repository"
+        name="git-repository"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        git-repository
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="gps"
+        name="gps"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        gps
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="grape"
+        name="grape"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        grape
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="greater-than-or-equal"
+        name="greater-than-or-equal"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        greater-than-or-equal
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="greater-than"
+        name="greater-than"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        greater-than
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="green-onion"
+        name="green-onion"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        green-onion
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="grid-add"
+        name="grid-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        grid-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="grid-view"
+        name="grid-view"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        grid-view
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="guitar"
+        name="guitar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        guitar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hamburger"
+        name="hamburger"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hamburger
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="happy"
+        name="happy"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        happy
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hard-disk-storage"
+        name="hard-disk-storage"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hard-disk-storage
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hard-drive"
+        name="hard-drive"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hard-drive
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hashtag"
+        name="hashtag"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hashtag
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hd"
+        name="hd"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hd
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="heart-filled"
+        name="heart-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        heart-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="heart"
+        name="heart"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        heart
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="help-circle-filled"
+        name="help-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        help-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="help-circle"
+        name="help-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        help-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="help-rectangle"
+        name="help-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        help-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="help"
+        name="help"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        help
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="highlight-1"
+        name="highlight-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        highlight-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="highlight"
+        name="highlight"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        highlight
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="history-setting"
+        name="history-setting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        history-setting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="history"
+        name="history"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        history
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="home"
+        name="home"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        home
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hospital-1"
+        name="hospital-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hospital-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hospital"
+        name="hospital"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hospital
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hotspot-wave"
+        name="hotspot-wave"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hotspot-wave
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="hourglass"
+        name="hourglass"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        hourglass
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="houses-1"
+        name="houses-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        houses-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="houses-2"
+        name="houses-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        houses-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="houses"
+        name="houses"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        houses
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="html5"
+        name="html5"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        html5
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="https"
+        name="https"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        https
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="ice-cream"
+        name="ice-cream"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        ice-cream
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="icon"
+        name="icon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        icon
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image-1"
+        name="image-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image-add"
+        name="image-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image-edit"
+        name="image-edit"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image-edit
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image-error"
+        name="image-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image-off"
+        name="image-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image-search"
+        name="image-search"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image-search
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="image"
+        name="image"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        image
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="indent-left"
+        name="indent-left"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        indent-left
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="indent-right"
+        name="indent-right"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        indent-right
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="indicator"
+        name="indicator"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        indicator
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="info-circle-filled"
+        name="info-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        info-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="info-circle"
+        name="info-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        info-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="ink"
+        name="ink"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        ink
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="install-desktop"
+        name="install-desktop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        install-desktop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="install-mobile"
+        name="install-mobile"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        install-mobile
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="install"
+        name="install"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        install
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="institution-checked"
+        name="institution-checked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        institution-checked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="institution"
+        name="institution"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        institution
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="internet"
+        name="internet"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        internet
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="ipod"
+        name="ipod"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        ipod
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="joyful"
+        name="joyful"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        joyful
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="jump-off"
+        name="jump-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        jump-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="jump"
+        name="jump"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        jump
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="keyboard"
+        name="keyboard"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        keyboard
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="laptop"
+        name="laptop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        laptop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="layers"
+        name="layers"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        layers
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="layout"
+        name="layout"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        layout
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="leaderboard"
+        name="leaderboard"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        leaderboard
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lemon-slice"
+        name="lemon-slice"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lemon-slice
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lemon"
+        name="lemon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lemon
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="less-than-or-equal"
+        name="less-than-or-equal"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        less-than-or-equal
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="less-than"
+        name="less-than"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        less-than
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-a"
+        name="letters-a"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-a
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-b"
+        name="letters-b"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-b
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-c"
+        name="letters-c"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-c
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-d"
+        name="letters-d"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-d
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-e"
+        name="letters-e"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-e
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-f"
+        name="letters-f"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-f
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-g"
+        name="letters-g"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-g
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-h"
+        name="letters-h"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-h
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-i"
+        name="letters-i"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-i
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-j"
+        name="letters-j"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-j
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-k"
+        name="letters-k"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-k
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-l"
+        name="letters-l"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-l
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-m"
+        name="letters-m"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-m
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-n"
+        name="letters-n"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-n
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-o"
+        name="letters-o"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-o
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-p"
+        name="letters-p"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-p
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-q"
+        name="letters-q"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-q
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-r"
+        name="letters-r"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-r
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-s"
+        name="letters-s"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-s
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-t"
+        name="letters-t"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-t
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-u"
+        name="letters-u"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-u
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-v"
+        name="letters-v"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-v
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-w"
+        name="letters-w"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-w
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-x"
+        name="letters-x"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-x
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-y"
+        name="letters-y"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-y
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="letters-z"
+        name="letters-z"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        letters-z
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lightbulb-circle"
+        name="lightbulb-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lightbulb-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lightbulb"
+        name="lightbulb"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lightbulb
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lighthouse-1"
+        name="lighthouse-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lighthouse-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lighthouse-2"
+        name="lighthouse-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lighthouse-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lighthouse"
+        name="lighthouse"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lighthouse
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lighting-circle"
+        name="lighting-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lighting-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="line-height"
+        name="line-height"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        line-height
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="link-1"
+        name="link-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        link-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="link-unlink"
+        name="link-unlink"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        link-unlink
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="link"
+        name="link"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        link
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="liquor"
+        name="liquor"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        liquor
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="list"
+        name="list"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        list
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="load"
+        name="load"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        load
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="loading"
+        name="loading"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        loading
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="location-1"
+        name="location-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        location-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="location-enlargement"
+        name="location-enlargement"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        location-enlargement
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="location-error"
+        name="location-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        location-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="location-parking-place"
+        name="location-parking-place"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        location-parking-place
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="location-reduction"
+        name="location-reduction"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        location-reduction
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="location-setting"
+        name="location-setting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        location-setting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="location"
+        name="location"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        location
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lock-off"
+        name="lock-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lock-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lock-on"
+        name="lock-on"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lock-on
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="lock-time"
+        name="lock-time"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        lock-time
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="login"
+        name="login"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        login
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-adobe-illustrate"
+        name="logo-adobe-illustrate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-adobe-illustrate
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-adobe-photoshop-1"
+        name="logo-adobe-photoshop-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-adobe-photoshop-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-adobe-photoshop"
+        name="logo-adobe-photoshop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-adobe-photoshop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-android"
+        name="logo-android"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-android
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-apple-filled"
+        name="logo-apple-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-apple-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-apple"
+        name="logo-apple"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-apple
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-behance"
+        name="logo-behance"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-behance
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-chrome-filled"
+        name="logo-chrome-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-chrome-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-chrome"
+        name="logo-chrome"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-chrome
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-cinema4d"
+        name="logo-cinema4d"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-cinema4d
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-codepen"
+        name="logo-codepen"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-codepen
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-codesandbox"
+        name="logo-codesandbox"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-codesandbox
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-dribbble"
+        name="logo-dribbble"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-dribbble
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-facebook"
+        name="logo-facebook"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-facebook
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-figma"
+        name="logo-figma"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-figma
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-framer"
+        name="logo-framer"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-framer
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-github-filled"
+        name="logo-github-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-github-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-github"
+        name="logo-github"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-github
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-gitlab"
+        name="logo-gitlab"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-gitlab
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-ie-filled"
+        name="logo-ie-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-ie-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-ie"
+        name="logo-ie"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-ie
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-instagram"
+        name="logo-instagram"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-instagram
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-qq"
+        name="logo-qq"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-qq
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-twitter"
+        name="logo-twitter"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-twitter
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-wechat-stroke"
+        name="logo-wechat-stroke"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-wechat-stroke
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-wechat"
+        name="logo-wechat"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-wechat
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-wecom"
+        name="logo-wecom"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-wecom
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-windows-filled"
+        name="logo-windows-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-windows-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-windows"
+        name="logo-windows"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-windows
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logo-youtube"
+        name="logo-youtube"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logo-youtube
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="logout"
+        name="logout"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        logout
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="look-around"
+        name="look-around"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        look-around
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="loudspeaker"
+        name="loudspeaker"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        loudspeaker
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mail"
+        name="mail"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mail
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-3d"
+        name="map-3d"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-3d
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-add"
+        name="map-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-aiming"
+        name="map-aiming"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-aiming
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-blocked"
+        name="map-blocked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-blocked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-bubble"
+        name="map-bubble"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-bubble
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-cancel"
+        name="map-cancel"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-cancel
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-chat"
+        name="map-chat"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-chat
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-checked"
+        name="map-checked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-checked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-collection"
+        name="map-collection"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-collection
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-connection"
+        name="map-connection"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-connection
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-distance"
+        name="map-distance"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-distance
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-double"
+        name="map-double"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-double
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-edit"
+        name="map-edit"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-edit
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-grid"
+        name="map-grid"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-grid
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-information-1"
+        name="map-information-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-information-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-information-2"
+        name="map-information-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-information-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-information"
+        name="map-information"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-information
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-location"
+        name="map-location"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-location
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-locked"
+        name="map-locked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-locked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-marked"
+        name="map-marked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-marked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-navigation"
+        name="map-navigation"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-navigation
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-outline"
+        name="map-outline"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-outline
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-route-planning"
+        name="map-route-planning"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-route-planning
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-ruler"
+        name="map-ruler"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-ruler
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-safety"
+        name="map-safety"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-safety
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-search-1"
+        name="map-search-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-search-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-search"
+        name="map-search"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-search
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-setting"
+        name="map-setting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-setting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map-unlocked"
+        name="map-unlocked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map-unlocked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="map"
+        name="map"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        map
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mark-as-unread"
+        name="mark-as-unread"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mark-as-unread
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="markup"
+        name="markup"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        markup
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mathematics"
+        name="mathematics"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mathematics
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="measurement-1"
+        name="measurement-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        measurement-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="measurement-2"
+        name="measurement-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        measurement-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="measurement"
+        name="measurement"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        measurement
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="meat-pepper"
+        name="meat-pepper"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        meat-pepper
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="media-library"
+        name="media-library"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        media-library
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="member"
+        name="member"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        member
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="menu-application"
+        name="menu-application"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        menu-application
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="menu-fold"
+        name="menu-fold"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        menu-fold
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="menu-unfold"
+        name="menu-unfold"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        menu-unfold
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="menu"
+        name="menu"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        menu
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="merge-cells"
+        name="merge-cells"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        merge-cells
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="microphone-1"
+        name="microphone-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        microphone-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="microphone-2"
+        name="microphone-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        microphone-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="microphone"
+        name="microphone"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        microphone
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="milk"
+        name="milk"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        milk
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-circle-filled"
+        name="minus-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-circle"
+        name="minus-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-rectangle-filled"
+        name="minus-rectangle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-rectangle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus-rectangle"
+        name="minus-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="minus"
+        name="minus"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        minus
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mirror"
+        name="mirror"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mirror
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mobile-blocked"
+        name="mobile-blocked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mobile-blocked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mobile-list"
+        name="mobile-list"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mobile-list
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mobile-navigation"
+        name="mobile-navigation"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mobile-navigation
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mobile-shortcut"
+        name="mobile-shortcut"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mobile-shortcut
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mobile-vibrate"
+        name="mobile-vibrate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mobile-vibrate
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mobile"
+        name="mobile"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mobile
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mode-dark"
+        name="mode-dark"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mode-dark
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mode-light"
+        name="mode-light"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mode-light
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="module"
+        name="module"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        module
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="money"
+        name="money"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        money
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="monument"
+        name="monument"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        monument
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="moon-fall"
+        name="moon-fall"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        moon-fall
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="moon-rising"
+        name="moon-rising"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        moon-rising
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="moon"
+        name="moon"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        moon
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="more"
+        name="more"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        more
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mosque-1"
+        name="mosque-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mosque-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mosque"
+        name="mosque"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mosque
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mouse"
+        name="mouse"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mouse
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="move-1"
+        name="move-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        move-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="move"
+        name="move"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        move
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="movie-clapper"
+        name="movie-clapper"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        movie-clapper
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="multiply"
+        name="multiply"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        multiply
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="museum-1"
+        name="museum-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        museum-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="museum-2"
+        name="museum-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        museum-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="museum"
+        name="museum"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        museum
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mushroom-1"
+        name="mushroom-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mushroom-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="mushroom"
+        name="mushroom"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        mushroom
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="music-1"
+        name="music-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        music-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="music-2"
+        name="music-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        music-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="music-rectangle-add"
+        name="music-rectangle-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        music-rectangle-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="music"
+        name="music"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        music
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="navigation-arrow"
+        name="navigation-arrow"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        navigation-arrow
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="next"
+        name="next"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        next
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="no-expression"
+        name="no-expression"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        no-expression
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="noodle"
+        name="noodle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        noodle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="notification-add"
+        name="notification-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        notification-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="notification-circle"
+        name="notification-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        notification-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="notification-error"
+        name="notification-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        notification-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="notification-filled"
+        name="notification-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        notification-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="notification"
+        name="notification"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        notification
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-0-1"
+        name="numbers-0-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-0-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-0"
+        name="numbers-0"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-0
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-1-1"
+        name="numbers-1-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-1-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-1"
+        name="numbers-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-2-1"
+        name="numbers-2-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-2-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-2"
+        name="numbers-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-3-1"
+        name="numbers-3-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-3-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-3"
+        name="numbers-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-4-1"
+        name="numbers-4-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-4-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-4"
+        name="numbers-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-5-1"
+        name="numbers-5-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-5-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-5"
+        name="numbers-5"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-5
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-6-1"
+        name="numbers-6-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-6-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-6"
+        name="numbers-6"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-6
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-7-1"
+        name="numbers-7-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-7-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-7"
+        name="numbers-7"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-7
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-8-1"
+        name="numbers-8-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-8-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-8"
+        name="numbers-8"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-8
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-9-1"
+        name="numbers-9-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-9-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="numbers-9"
+        name="numbers-9"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        numbers-9
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="nut"
+        name="nut"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        nut
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="object-storage"
+        name="object-storage"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        object-storage
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="open-mouth"
+        name="open-mouth"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        open-mouth
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="opera"
+        name="opera"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        opera
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="order-adjustment-column"
+        name="order-adjustment-column"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        order-adjustment-column
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="order-ascending"
+        name="order-ascending"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        order-ascending
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="order-descending"
+        name="order-descending"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        order-descending
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="outbox"
+        name="outbox"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        outbox
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="page-first"
+        name="page-first"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        page-first
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="page-head"
+        name="page-head"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        page-head
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="page-last"
+        name="page-last"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        page-last
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="palace-1"
+        name="palace-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        palace-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="palace-2"
+        name="palace-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        palace-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="palace-3"
+        name="palace-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        palace-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="palace-4"
+        name="palace-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        palace-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="palace"
+        name="palace"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        palace
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="palette-1"
+        name="palette-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        palette-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="palette"
+        name="palette"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        palette
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="panorama-horizontal"
+        name="panorama-horizontal"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        panorama-horizontal
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="panorama-vertical"
+        name="panorama-vertical"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        panorama-vertical
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pantone"
+        name="pantone"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pantone
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="parabola"
+        name="parabola"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        parabola
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="parentheses"
+        name="parentheses"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        parentheses
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="paste"
+        name="paste"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        paste
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="patio"
+        name="patio"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        patio
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pause-circle-filled"
+        name="pause-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pause-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pause-circle-stroke"
+        name="pause-circle-stroke"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pause-circle-stroke
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pause-circle"
+        name="pause-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pause-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pause"
+        name="pause"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pause
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pea"
+        name="pea"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pea
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="peach"
+        name="peach"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        peach
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pear"
+        name="pear"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pear
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pearl-of-the-orient"
+        name="pearl-of-the-orient"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pearl-of-the-orient
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pen-ball"
+        name="pen-ball"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pen-ball
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pen-brush"
+        name="pen-brush"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pen-brush
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pen-mark"
+        name="pen-mark"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pen-mark
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pen-quill"
+        name="pen-quill"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pen-quill
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pen"
+        name="pen"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pen
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pending"
+        name="pending"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pending
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="percent"
+        name="percent"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        percent
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="personal-information"
+        name="personal-information"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        personal-information
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="phone-locked"
+        name="phone-locked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        phone-locked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="phone-search"
+        name="phone-search"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        phone-search
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pi"
+        name="pi"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pi
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="piano"
+        name="piano"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        piano
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pin-filled"
+        name="pin-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pin-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pin"
+        name="pin"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pin
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-circle-filled"
+        name="play-circle-filled"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-circle-filled
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-circle-stroke-add"
+        name="play-circle-stroke-add"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-circle-stroke-add
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-circle-stroke"
+        name="play-circle-stroke"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-circle-stroke
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-circle"
+        name="play-circle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-circle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-demo"
+        name="play-demo"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-demo
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play-rectangle"
+        name="play-rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play-rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="play"
+        name="play"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        play
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="plus"
+        name="plus"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        plus
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="popsicle"
+        name="popsicle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        popsicle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="portrait"
+        name="portrait"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        portrait
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pout"
+        name="pout"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pout
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="poweroff"
+        name="poweroff"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        poweroff
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="precise-monitor"
+        name="precise-monitor"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        precise-monitor
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="previous"
+        name="previous"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        previous
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="print"
+        name="print"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        print
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pumpkin"
+        name="pumpkin"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pumpkin
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pyramid-maya"
+        name="pyramid-maya"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pyramid-maya
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="pyramid"
+        name="pyramid"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        pyramid
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="qrcode"
+        name="qrcode"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        qrcode
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="quadratic"
+        name="quadratic"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        quadratic
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="questionnaire"
+        name="questionnaire"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        questionnaire
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="queue"
+        name="queue"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        queue
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="radar"
+        name="radar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        radar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="radio-1"
+        name="radio-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        radio-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="radio-2"
+        name="radio-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        radio-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="radish"
+        name="radish"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        radish
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rain-heavy"
+        name="rain-heavy"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rain-heavy
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rain-light"
+        name="rain-light"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rain-light
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rain-medium"
+        name="rain-medium"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rain-medium
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rainbow"
+        name="rainbow"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rainbow
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rectangle"
+        name="rectangle"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rectangle
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="refresh"
+        name="refresh"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        refresh
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="relation"
+        name="relation"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        relation
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="relativity"
+        name="relativity"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        relativity
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="remote-wave"
+        name="remote-wave"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        remote-wave
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="remove"
+        name="remove"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        remove
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="replay"
+        name="replay"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        replay
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rice-ball"
+        name="rice-ball"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rice-ball
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rice"
+        name="rice"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rice
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="roast"
+        name="roast"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        roast
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rocket"
+        name="rocket"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rocket
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rollback"
+        name="rollback"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rollback
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rollfront"
+        name="rollfront"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rollfront
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="root-list"
+        name="root-list"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        root-list
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rotate-locked"
+        name="rotate-locked"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rotate-locked
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rotate"
+        name="rotate"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rotate
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rotation"
+        name="rotation"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rotation
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="round"
+        name="round"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        round
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="router-wave"
+        name="router-wave"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        router-wave
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="rss"
+        name="rss"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        rss
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="ruler"
+        name="ruler"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        ruler
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sailing-hotel"
+        name="sailing-hotel"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sailing-hotel
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sandwich"
+        name="sandwich"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sandwich
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="saturation"
+        name="saturation"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        saturation
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sausage"
+        name="sausage"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sausage
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="save"
+        name="save"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        save
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="saving-pot"
+        name="saving-pot"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        saving-pot
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="scan"
+        name="scan"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        scan
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="screen-4k"
+        name="screen-4k"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        screen-4k
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="screencast"
+        name="screencast"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        screencast
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="screenshot"
+        name="screenshot"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        screenshot
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="scroll-bar"
+        name="scroll-bar"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        scroll-bar
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sd-card-1"
+        name="sd-card-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sd-card-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sd-card"
+        name="sd-card"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sd-card
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="search-error"
+        name="search-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        search-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="search"
+        name="search"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        search
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="secured"
+        name="secured"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        secured
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="send-cancel"
+        name="send-cancel"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        send-cancel
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="send"
+        name="send"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        send
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sensors-1"
+        name="sensors-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sensors-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sensors-2"
+        name="sensors-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sensors-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sensors-off"
+        name="sensors-off"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sensors-off
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sensors"
+        name="sensors"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sensors
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="serenity"
+        name="serenity"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        serenity
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="server"
+        name="server"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        server
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="service"
+        name="service"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        service
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="setting-1"
+        name="setting-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        setting-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="setting"
+        name="setting"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        setting
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="share-1"
+        name="share-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        share-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="share"
+        name="share"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        share
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sharpness"
+        name="sharpness"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sharpness
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shield-error"
+        name="shield-error"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shield-error
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shimen"
+        name="shimen"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shimen
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shop-1"
+        name="shop-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shop-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shop-2"
+        name="shop-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shop-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shop-3"
+        name="shop-3"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shop-3
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shop-4"
+        name="shop-4"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shop-4
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shop-5"
+        name="shop-5"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shop-5
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shop"
+        name="shop"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shop
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shrimp"
+        name="shrimp"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shrimp
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shrink-horizontal"
+        name="shrink-horizontal"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shrink-horizontal
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shrink-vertical"
+        name="shrink-vertical"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shrink-vertical
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shutter"
+        name="shutter"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shutter
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="shutup"
+        name="shutup"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        shutup
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sim-card-1"
+        name="sim-card-1"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sim-card-1
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sim-card-2"
+        name="sim-card-2"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sim-card-2
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sim-card"
+        name="sim-card"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sim-card
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sinister-smile"
+        name="sinister-smile"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sinister-smile
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sip"
+        name="sip"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sip
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="slash"
+        name="slash"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        slash
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sleep"
+        name="sleep"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sleep
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="slice"
+        name="slice"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        slice
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="slideshow"
+        name="slideshow"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        slideshow
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="smile"
+        name="smile"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        smile
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sneer"
+        name="sneer"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sneer
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="snowflake"
+        name="snowflake"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        snowflake
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sonic"
+        name="sonic"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sonic
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sound-down"
+        name="sound-down"
+        size="48rpx"
+        bind:click="onIconTap"
+      />
+      <wx-view
+        class="demo__card-name"
+      >
+        sound-down
+      </wx-view>
+    </wx-view>
+    <wx-view
+      class="demo__card"
+    >
+      <t-icon
+        data-name="sound-high"
+        name="sound-high"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        browse-off
+        sound-high
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="browse"
-        name="browse"
+        data-name="sound-low"
+        name="sound-low"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        browse
+        sound-low
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="bulletpoint"
-        name="bulletpoint"
+        data-name="sound-mute-1"
+        name="sound-mute-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        bulletpoint
+        sound-mute-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="calendar"
-        name="calendar"
+        data-name="sound-mute"
+        name="sound-mute"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        calendar
+        sound-mute
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="call"
-        name="call"
+        data-name="sound-up"
+        name="sound-up"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        call
+        sound-up
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="caret-down-small"
-        name="caret-down-small"
+        data-name="sound"
+        name="sound"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        caret-down-small
+        sound
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="caret-down"
-        name="caret-down"
+        data-name="space"
+        name="space"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        caret-down
+        space
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="caret-left-small"
-        name="caret-left-small"
+        data-name="speechless-1"
+        name="speechless-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        caret-left-small
+        speechless-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="caret-left"
-        name="caret-left"
+        data-name="star-filled"
+        name="star-filled"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        caret-left
+        star-filled
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="caret-right-small"
-        name="caret-right-small"
+        data-name="star"
+        name="star"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        caret-right-small
+        star
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="caret-right"
-        name="caret-right"
+        data-name="statue-of-jesus"
+        name="statue-of-jesus"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        caret-right
+        statue-of-jesus
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="caret-up-small"
-        name="caret-up-small"
+        data-name="sticky-note"
+        name="sticky-note"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        caret-up-small
+        sticky-note
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="caret-up"
-        name="caret-up"
+        data-name="stop-circle-filled"
+        name="stop-circle-filled"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        caret-up
+        stop-circle-filled
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="cart"
-        name="cart"
+        data-name="stop-circle-stroke"
+        name="stop-circle-stroke"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        cart
+        stop-circle-stroke
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chart-bar"
-        name="chart-bar"
+        data-name="stop-circle"
+        name="stop-circle"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chart-bar
+        stop-circle
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chart-bubble"
-        name="chart-bubble"
+        data-name="stop"
+        name="stop"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chart-bubble
+        stop
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chart-pie"
-        name="chart-pie"
+        data-name="store"
+        name="store"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chart-pie
+        store
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chart"
-        name="chart"
+        data-name="street-road-1"
+        name="street-road-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chart
+        street-road-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chat"
-        name="chat"
+        data-name="street-road"
+        name="street-road"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chat
+        street-road
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="check-circle-filled"
-        name="check-circle-filled"
+        data-name="subtitle"
+        name="subtitle"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        check-circle-filled
+        subtitle
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="check-circle"
-        name="check-circle"
+        data-name="subway-line"
+        name="subway-line"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        check-circle
+        subway-line
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="check-rectangle-filled"
-        name="check-rectangle-filled"
+        data-name="sum"
+        name="sum"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        check-rectangle-filled
+        sum
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="check-rectangle"
-        name="check-rectangle"
+        data-name="sun-fall"
+        name="sun-fall"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        check-rectangle
+        sun-fall
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="check"
-        name="check"
+        data-name="sun-rising"
+        name="sun-rising"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        check
+        sun-rising
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-down-circle"
-        name="chevron-down-circle"
+        data-name="sunny"
+        name="sunny"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-down-circle
+        sunny
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-down-rectangle"
-        name="chevron-down-rectangle"
+        data-name="support"
+        name="support"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-down-rectangle
+        support
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-down"
-        name="chevron-down"
+        data-name="surprised-1"
+        name="surprised-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-down
+        surprised-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-left-circle"
-        name="chevron-left-circle"
+        data-name="surprised"
+        name="surprised"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-left-circle
+        surprised
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-left-double"
-        name="chevron-left-double"
+        data-name="swap-left"
+        name="swap-left"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-left-double
+        swap-left
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-left-rectangle"
-        name="chevron-left-rectangle"
+        data-name="swap-right"
+        name="swap-right"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-left-rectangle
+        swap-right
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-left"
-        name="chevron-left"
+        data-name="swap"
+        name="swap"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-left
+        swap
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-right-circle"
-        name="chevron-right-circle"
+        data-name="swear-1"
+        name="swear-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-right-circle
+        swear-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-right-double"
-        name="chevron-right-double"
+        data-name="swear-2"
+        name="swear-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-right-double
+        swear-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-right-rectangle"
-        name="chevron-right-rectangle"
+        data-name="system-2"
+        name="system-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-right-rectangle
+        system-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-right"
-        name="chevron-right"
+        data-name="system-3"
+        name="system-3"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-right
+        system-3
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-up-circle"
-        name="chevron-up-circle"
+        data-name="system-application"
+        name="system-application"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-up-circle
+        system-application
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-up-rectangle"
-        name="chevron-up-rectangle"
+        data-name="system-blocked"
+        name="system-blocked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-up-rectangle
+        system-blocked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="chevron-up"
-        name="chevron-up"
+        data-name="system-code"
+        name="system-code"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        chevron-up
+        system-code
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="circle"
-        name="circle"
+        data-name="system-components"
+        name="system-components"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        circle
+        system-components
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="clear"
-        name="clear"
+        data-name="system-coordinate"
+        name="system-coordinate"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        clear
+        system-coordinate
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="close-circle-filled"
-        name="close-circle-filled"
+        data-name="system-device"
+        name="system-device"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        close-circle-filled
+        system-device
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="close-circle"
-        name="close-circle"
+        data-name="system-interface"
+        name="system-interface"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        close-circle
+        system-interface
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="close-rectangle"
-        name="close-rectangle"
+        data-name="system-location"
+        name="system-location"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        close-rectangle
+        system-location
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="close"
-        name="close"
+        data-name="system-locked"
+        name="system-locked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        close
+        system-locked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="cloud-download"
-        name="cloud-download"
+        data-name="system-log"
+        name="system-log"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        cloud-download
+        system-log
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="cloud-upload"
-        name="cloud-upload"
+        data-name="system-marked"
+        name="system-marked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        cloud-upload
+        system-marked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="cloud"
-        name="cloud"
+        data-name="system-messages"
+        name="system-messages"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        cloud
+        system-messages
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="code"
-        name="code"
+        data-name="system-regulation"
+        name="system-regulation"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        code
+        system-regulation
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="control-platform"
-        name="control-platform"
+        data-name="system-search"
+        name="system-search"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        control-platform
+        system-search
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="creditcard"
-        name="creditcard"
+        data-name="system-setting"
+        name="system-setting"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        creditcard
+        system-setting
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="dashboard"
-        name="dashboard"
+        data-name="system-storage"
+        name="system-storage"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        dashboard
+        system-storage
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="delete"
-        name="delete"
+        data-name="system-sum"
+        name="system-sum"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        delete
+        system-sum
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="desktop"
-        name="desktop"
+        data-name="system-unlocked"
+        name="system-unlocked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        desktop
+        system-unlocked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="discount-filled"
-        name="discount-filled"
+        data-name="tab"
+        name="tab"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        discount-filled
+        tab
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="discount"
-        name="discount"
+        data-name="table-1"
+        name="table-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        discount
+        table-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="download"
-        name="download"
+        data-name="table-2"
+        name="table-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        download
+        table-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="edit-1"
-        name="edit-1"
+        data-name="table-add"
+        name="table-add"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        edit-1
+        table-add
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="edit"
-        name="edit"
+        data-name="table-split"
+        name="table-split"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        edit
+        table-split
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="ellipsis"
-        name="ellipsis"
+        data-name="table"
+        name="table"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        ellipsis
+        table
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="enter"
-        name="enter"
+        data-name="tag"
+        name="tag"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        enter
+        tag
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="error-circle-filled"
-        name="error-circle-filled"
+        data-name="tangerinr"
+        name="tangerinr"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        error-circle-filled
+        tangerinr
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="error-circle"
-        name="error-circle"
+        data-name="tape"
+        name="tape"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        error-circle
+        tape
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="error"
-        name="error"
+        data-name="task-1"
+        name="task-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        error
+        task-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-add"
-        name="file-add"
+        data-name="task-add-1"
+        name="task-add-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-add
+        task-add-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-copy"
-        name="file-copy"
+        data-name="task-add"
+        name="task-add"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-copy
+        task-add
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-excel"
-        name="file-excel"
+        data-name="task-checked"
+        name="task-checked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-excel
+        task-checked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-icon"
-        name="file-icon"
+        data-name="task-error"
+        name="task-error"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-icon
+        task-error
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-image"
-        name="file-image"
+        data-name="task-location"
+        name="task-location"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-image
+        task-location
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-paste"
-        name="file-paste"
+        data-name="task-marked"
+        name="task-marked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-paste
+        task-marked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-pdf"
-        name="file-pdf"
+        data-name="task-setting"
+        name="task-setting"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-pdf
+        task-setting
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-powerpoint"
-        name="file-powerpoint"
+        data-name="task-visible"
+        name="task-visible"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-powerpoint
+        task-visible
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-unknown"
-        name="file-unknown"
+        data-name="task"
+        name="task"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-unknown
+        task
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file-word"
-        name="file-word"
+        data-name="tea"
+        name="tea"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file-word
+        tea
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="file"
-        name="file"
+        data-name="teahouse"
+        name="teahouse"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        file
+        teahouse
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="filter-clear"
-        name="filter-clear"
+        data-name="template"
+        name="template"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        filter-clear
+        template
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="filter"
-        name="filter"
+        data-name="temple"
+        name="temple"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        filter
+        temple
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
-      <t-icon
-        data-name="flag"
-        name="flag"
+      <t-icon
+        data-name="terminal-rectangle-1"
+        name="terminal-rectangle-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        flag
+        terminal-rectangle-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="folder-add"
-        name="folder-add"
+        data-name="terminal-rectangle"
+        name="terminal-rectangle"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        folder-add
+        terminal-rectangle
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="folder-open"
-        name="folder-open"
+        data-name="terminal-window"
+        name="terminal-window"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        folder-open
+        terminal-window
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="folder"
-        name="folder"
+        data-name="terminal"
+        name="terminal"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        folder
+        terminal
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="fork"
-        name="fork"
+        data-name="textbox"
+        name="textbox"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        fork
+        textbox
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="format-horizontal-align-bottom"
-        name="format-horizontal-align-bottom"
+        data-name="textformat-bold"
+        name="textformat-bold"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        format-horizontal-align-bottom
+        textformat-bold
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="format-horizontal-align-center"
-        name="format-horizontal-align-center"
+        data-name="textformat-color"
+        name="textformat-color"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        format-horizontal-align-center
+        textformat-color
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="format-horizontal-align-top"
-        name="format-horizontal-align-top"
+        data-name="textformat-italic"
+        name="textformat-italic"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        format-horizontal-align-top
+        textformat-italic
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="format-vertical-align-center"
-        name="format-vertical-align-center"
+        data-name="textformat-strikethrough"
+        name="textformat-strikethrough"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        format-vertical-align-center
+        textformat-strikethrough
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="format-vertical-align-left"
-        name="format-vertical-align-left"
+        data-name="textformat-underline"
+        name="textformat-underline"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        format-vertical-align-left
+        textformat-underline
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="format-vertical-align-right"
-        name="format-vertical-align-right"
+        data-name="textformat-wrap"
+        name="textformat-wrap"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        format-vertical-align-right
+        textformat-wrap
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="forward"
-        name="forward"
+        data-name="theaters"
+        name="theaters"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        forward
+        theaters
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="fullscreen-exit"
-        name="fullscreen-exit"
+        data-name="thumb-down-1"
+        name="thumb-down-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        fullscreen-exit
+        thumb-down-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="fullscreen"
-        name="fullscreen"
+        data-name="thumb-down-2"
+        name="thumb-down-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        fullscreen
+        thumb-down-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="gender-female"
-        name="gender-female"
+        data-name="thumb-down"
+        name="thumb-down"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        gender-female
+        thumb-down
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="gender-male"
-        name="gender-male"
+        data-name="thumb-up-1"
+        name="thumb-up-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        gender-male
+        thumb-up-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="gift"
-        name="gift"
+        data-name="thumb-up-2"
+        name="thumb-up-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        gift
+        thumb-up-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="heart-filled"
-        name="heart-filled"
+        data-name="thumb-up"
+        name="thumb-up"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        heart-filled
+        thumb-up
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="heart"
-        name="heart"
+        data-name="thunder"
+        name="thunder"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        heart
+        thunder
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="help-circle-filled"
-        name="help-circle-filled"
+        data-name="thunderstorm-night"
+        name="thunderstorm-night"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        help-circle-filled
+        thunderstorm-night
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="help-circle"
-        name="help-circle"
+        data-name="thunderstorm-sunny"
+        name="thunderstorm-sunny"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        help-circle
+        thunderstorm-sunny
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="help"
-        name="help"
+        data-name="thunderstorm"
+        name="thunderstorm"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        help
+        thunderstorm
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="history"
-        name="history"
+        data-name="ticket"
+        name="ticket"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        history
+        ticket
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="home"
-        name="home"
+        data-name="time-filled"
+        name="time-filled"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        home
+        time-filled
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="hourglass"
-        name="hourglass"
+        data-name="time"
+        name="time"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        hourglass
+        time
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="image-error"
-        name="image-error"
+        data-name="tips-double"
+        name="tips-double"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        image-error
+        tips-double
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="image"
-        name="image"
+        data-name="tips"
+        name="tips"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        image
+        tips
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="info-circle-filled"
-        name="info-circle-filled"
+        data-name="tomato"
+        name="tomato"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        info-circle-filled
+        tomato
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="info-circle"
-        name="info-circle"
+        data-name="tools-circle"
+        name="tools-circle"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        info-circle
+        tools-circle
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="internet"
-        name="internet"
+        data-name="tools"
+        name="tools"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        internet
+        tools
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="jump"
-        name="jump"
+        data-name="tornado"
+        name="tornado"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        jump
+        tornado
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="laptop"
-        name="laptop"
+        data-name="tower-1"
+        name="tower-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        laptop
+        tower-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="layers"
-        name="layers"
+        data-name="tower-2"
+        name="tower-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        layers
+        tower-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="link-unlink"
-        name="link-unlink"
+        data-name="tower-3"
+        name="tower-3"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        link-unlink
+        tower-3
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="link"
-        name="link"
+        data-name="tower-clock"
+        name="tower-clock"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        link
+        tower-clock
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="loading"
-        name="loading"
+        data-name="tower"
+        name="tower"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        loading
+        tower
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="location"
-        name="location"
+        data-name="town"
+        name="town"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        location
+        town
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="lock-off"
-        name="lock-off"
+        data-name="traffic-events"
+        name="traffic-events"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        lock-off
+        traffic-events
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="lock-on"
-        name="lock-on"
+        data-name="traffic"
+        name="traffic"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        lock-on
+        traffic
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="login"
-        name="login"
+        data-name="transform-1"
+        name="transform-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        login
+        transform-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-android"
-        name="logo-android"
+        data-name="transform-2"
+        name="transform-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-android
+        transform-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-apple-filled"
-        name="logo-apple-filled"
+        data-name="transform-3"
+        name="transform-3"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-apple-filled
+        transform-3
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-apple"
-        name="logo-apple"
+        data-name="transform"
+        name="transform"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-apple
+        transform
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-chrome-filled"
-        name="logo-chrome-filled"
+        data-name="translate-1"
+        name="translate-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-chrome-filled
+        translate-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-chrome"
-        name="logo-chrome"
+        data-name="translate"
+        name="translate"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-chrome
+        translate
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-codepen"
-        name="logo-codepen"
+        data-name="tree-list"
+        name="tree-list"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-codepen
+        tree-list
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-github-filled"
-        name="logo-github-filled"
+        data-name="tree-round-dot-vertical"
+        name="tree-round-dot-vertical"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-github-filled
+        tree-round-dot-vertical
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-github"
-        name="logo-github"
+        data-name="tree-round-dot"
+        name="tree-round-dot"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-github
+        tree-round-dot
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-ie-filled"
-        name="logo-ie-filled"
+        data-name="tree-square-dot-vertical"
+        name="tree-square-dot-vertical"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-ie-filled
+        tree-square-dot-vertical
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-ie"
-        name="logo-ie"
+        data-name="tree-square-dot"
+        name="tree-square-dot"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-ie
+        tree-square-dot
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-qq"
-        name="logo-qq"
+        data-name="trending-down"
+        name="trending-down"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-qq
+        trending-down
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-wechat"
-        name="logo-wechat"
+        data-name="trending-up"
+        name="trending-up"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-wechat
+        trending-up
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-wecom"
-        name="logo-wecom"
+        data-name="tv-1"
+        name="tv-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-wecom
+        tv-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-windows-filled"
-        name="logo-windows-filled"
+        data-name="tv-2"
+        name="tv-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-windows-filled
+        tv-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logo-windows"
-        name="logo-windows"
+        data-name="tv"
+        name="tv"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logo-windows
+        tv
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="logout"
-        name="logout"
+        data-name="typography"
+        name="typography"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        logout
+        typography
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="mail"
-        name="mail"
+        data-name="uncomfortable-1"
+        name="uncomfortable-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        mail
+        uncomfortable-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="menu-fold"
-        name="menu-fold"
+        data-name="uncomfortable-2"
+        name="uncomfortable-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        menu-fold
+        uncomfortable-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="menu-unfold"
-        name="menu-unfold"
+        data-name="uncomfortable"
+        name="uncomfortable"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        menu-unfold
+        uncomfortable
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="minus-circle-filled"
-        name="minus-circle-filled"
+        data-name="undertake-delivery"
+        name="undertake-delivery"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        minus-circle-filled
+        undertake-delivery
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="minus-circle"
-        name="minus-circle"
+        data-name="undertake-environment-protection"
+        name="undertake-environment-protection"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        minus-circle
+        undertake-environment-protection
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="minus-rectangle-filled"
-        name="minus-rectangle-filled"
+        data-name="undertake-hold-up"
+        name="undertake-hold-up"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        minus-rectangle-filled
+        undertake-hold-up
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="minus-rectangle"
-        name="minus-rectangle"
+        data-name="undertake-transaction"
+        name="undertake-transaction"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        minus-rectangle
+        undertake-transaction
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="mirror"
-        name="mirror"
+        data-name="undertake"
+        name="undertake"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        mirror
+        undertake
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="mobile-vibrate"
-        name="mobile-vibrate"
+        data-name="unfold-less"
+        name="unfold-less"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        mobile-vibrate
+        unfold-less
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="mobile"
-        name="mobile"
+        data-name="unfold-more"
+        name="unfold-more"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        mobile
+        unfold-more
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="money-circle"
-        name="money-circle"
+        data-name="unhappy-1"
+        name="unhappy-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        money-circle
+        unhappy-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="more"
-        name="more"
+        data-name="unhappy"
+        name="unhappy"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        more
+        unhappy
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="move"
-        name="move"
+        data-name="uninstall"
+        name="uninstall"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        move
+        uninstall
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="next"
-        name="next"
+        data-name="upload-1"
+        name="upload-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        next
+        upload-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="notification-filled"
-        name="notification-filled"
+        data-name="upload"
+        name="upload"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        notification-filled
+        upload
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="notification"
-        name="notification"
+        data-name="upscale"
+        name="upscale"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        notification
+        upscale
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="order-adjustment-column"
-        name="order-adjustment-column"
+        data-name="usb"
+        name="usb"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        order-adjustment-column
+        usb
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="order-ascending"
-        name="order-ascending"
+        data-name="user-1"
+        name="user-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        order-ascending
+        user-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="order-descending"
-        name="order-descending"
+        data-name="user-add"
+        name="user-add"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        order-descending
+        user-add
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="page-first"
-        name="page-first"
+        data-name="user-arrow-down"
+        name="user-arrow-down"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        page-first
+        user-arrow-down
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="page-last"
-        name="page-last"
+        data-name="user-arrow-left"
+        name="user-arrow-left"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        page-last
+        user-arrow-left
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="pause-circle-filled"
-        name="pause-circle-filled"
+        data-name="user-arrow-right"
+        name="user-arrow-right"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        pause-circle-filled
+        user-arrow-right
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="photo"
-        name="photo"
+        data-name="user-arrow-up"
+        name="user-arrow-up"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        photo
+        user-arrow-up
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="pin-filled"
-        name="pin-filled"
+        data-name="user-avatar"
+        name="user-avatar"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        pin-filled
+        user-avatar
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="pin"
-        name="pin"
+        data-name="user-blocked"
+        name="user-blocked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        pin
+        user-blocked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="play-circle-filled"
-        name="play-circle-filled"
+        data-name="user-business"
+        name="user-business"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        play-circle-filled
+        user-business
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="play-circle-stroke"
-        name="play-circle-stroke"
+        data-name="user-checked-1"
+        name="user-checked-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        play-circle-stroke
+        user-checked-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="play-circle"
-        name="play-circle"
+        data-name="user-checked"
+        name="user-checked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        play-circle
+        user-checked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="play"
-        name="play"
+        data-name="user-circle"
+        name="user-circle"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        play
+        user-circle
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="poweroff"
-        name="poweroff"
+        data-name="user-clear"
+        name="user-clear"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        poweroff
+        user-clear
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="precise-monitor"
-        name="precise-monitor"
+        data-name="user-error-1"
+        name="user-error-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        precise-monitor
+        user-error-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="previous"
-        name="previous"
+        data-name="user-invisible"
+        name="user-invisible"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        previous
+        user-invisible
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="print"
-        name="print"
+        data-name="user-list"
+        name="user-list"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        print
+        user-list
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="qrcode"
-        name="qrcode"
+        data-name="user-locked"
+        name="user-locked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        qrcode
+        user-locked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="queue"
-        name="queue"
+        data-name="user-marked"
+        name="user-marked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        queue
+        user-marked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="rectangle"
-        name="rectangle"
+        data-name="user-password"
+        name="user-password"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        rectangle
+        user-password
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="refresh"
-        name="refresh"
+        data-name="user-safety"
+        name="user-safety"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        refresh
+        user-safety
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="relativity"
-        name="relativity"
+        data-name="user-search"
+        name="user-search"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        relativity
+        user-search
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="remove"
-        name="remove"
+        data-name="user-setting"
+        name="user-setting"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        remove
+        user-setting
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="rollback"
-        name="rollback"
+        data-name="user-talk-1"
+        name="user-talk-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        rollback
+        user-talk-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="rollfront"
-        name="rollfront"
+        data-name="user-talk-off-1"
+        name="user-talk-off-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        rollfront
+        user-talk-off-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="root-list"
-        name="root-list"
+        data-name="user-talk"
+        name="user-talk"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        root-list
+        user-talk
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="rotation"
-        name="rotation"
+        data-name="user-time"
+        name="user-time"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        rotation
+        user-time
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="round"
-        name="round"
+        data-name="user-transmit"
+        name="user-transmit"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        round
+        user-transmit
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="save"
-        name="save"
+        data-name="user-unknown"
+        name="user-unknown"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        save
+        user-unknown
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="scan"
-        name="scan"
+        data-name="user-unlocked"
+        name="user-unlocked"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        scan
+        user-unlocked
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="search"
-        name="search"
+        data-name="user-vip"
+        name="user-vip"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        search
+        user-vip
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="secured"
-        name="secured"
+        data-name="user-visible"
+        name="user-visible"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        secured
+        user-visible
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="server"
-        name="server"
+        data-name="user"
+        name="user"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        server
+        user
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="service"
-        name="service"
+        data-name="usergroup-add"
+        name="usergroup-add"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        service
+        usergroup-add
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="setting"
-        name="setting"
+        data-name="usergroup-clear"
+        name="usergroup-clear"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        setting
+        usergroup-clear
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="share"
-        name="share"
+        data-name="usergroup"
+        name="usergroup"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        share
+        usergroup
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="shop"
-        name="shop"
+        data-name="vehicle"
+        name="vehicle"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        shop
+        vehicle
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="slash"
-        name="slash"
+        data-name="verified"
+        name="verified"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        slash
+        verified
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="sound"
-        name="sound"
+        data-name="verify"
+        name="verify"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        sound
+        verify
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="star-filled"
-        name="star-filled"
+        data-name="video-camera-1"
+        name="video-camera-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        star-filled
+        video-camera-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="star"
-        name="star"
+        data-name="video-camera-2"
+        name="video-camera-2"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        star
+        video-camera-2
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="stop-circle-1"
-        name="stop-circle-1"
+        data-name="video-camera-dollar"
+        name="video-camera-dollar"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        stop-circle-1
+        video-camera-dollar
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="stop-circle-filled"
-        name="stop-circle-filled"
+        data-name="video-camera-minus"
+        name="video-camera-minus"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        stop-circle-filled
+        video-camera-minus
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="stop-circle"
-        name="stop-circle"
+        data-name="video-camera-music"
+        name="video-camera-music"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        stop-circle
+        video-camera-music
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="stop"
-        name="stop"
+        data-name="video-camera-off"
+        name="video-camera-off"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        stop
+        video-camera-off
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="swap-left"
-        name="swap-left"
+        data-name="video-camera"
+        name="video-camera"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        swap-left
+        video-camera
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="swap-right"
-        name="swap-right"
+        data-name="video-library"
+        name="video-library"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        swap-right
+        video-library
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="swap"
-        name="swap"
+        data-name="video"
+        name="video"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        swap
+        video
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="thumb-down"
-        name="thumb-down"
+        data-name="view-agenda"
+        name="view-agenda"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        thumb-down
+        view-agenda
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="thumb-up"
-        name="thumb-up"
+        data-name="view-column"
+        name="view-column"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        thumb-up
+        view-column
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="time-filled"
-        name="time-filled"
+        data-name="view-in-ar"
+        name="view-in-ar"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        time-filled
+        view-in-ar
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="time"
-        name="time"
+        data-name="view-list"
+        name="view-list"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        time
+        view-list
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="tips"
-        name="tips"
+        data-name="view-module"
+        name="view-module"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        tips
+        view-module
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="tools"
-        name="tools"
+        data-name="visual-recognition"
+        name="visual-recognition"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        tools
+        visual-recognition
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="translate-1"
-        name="translate-1"
+        data-name="wallet"
+        name="wallet"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        translate-1
+        wallet
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="translate"
-        name="translate"
+        data-name="watch"
+        name="watch"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        translate
+        watch
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="unfold-less"
-        name="unfold-less"
+        data-name="watermelon"
+        name="watermelon"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        unfold-less
+        watermelon
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="unfold-more"
-        name="unfold-more"
+        data-name="wave-left"
+        name="wave-left"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        unfold-more
+        wave-left
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="upload"
-        name="upload"
+        data-name="wave-right"
+        name="wave-right"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        upload
+        wave-right
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="usb"
-        name="usb"
+        data-name="wealth-1"
+        name="wealth-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        usb
+        wealth-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="user-add"
-        name="user-add"
+        data-name="wealth"
+        name="wealth"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        user-add
+        wealth
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="user-avatar"
-        name="user-avatar"
+        data-name="widget"
+        name="widget"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        user-avatar
+        widget
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="user-circle"
-        name="user-circle"
+        data-name="wifi-1"
+        name="wifi-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        user-circle
+        wifi-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="user-clear"
-        name="user-clear"
+        data-name="wifi-off-1"
+        name="wifi-off-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        user-clear
+        wifi-off-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="user-talk"
-        name="user-talk"
+        data-name="wifi-off"
+        name="wifi-off"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        user-talk
+        wifi-off
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="user"
-        name="user"
+        data-name="wifi"
+        name="wifi"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        user
+        wifi
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="usergroup-add"
-        name="usergroup-add"
+        data-name="window-1"
+        name="window-1"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        usergroup-add
+        window-1
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="usergroup-clear"
-        name="usergroup-clear"
+        data-name="window"
+        name="window"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        usergroup-clear
+        window
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="usergroup"
-        name="usergroup"
+        data-name="windy-rain"
+        name="windy-rain"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        usergroup
+        windy-rain
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="video"
-        name="video"
+        data-name="windy"
+        name="windy"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        video
+        windy
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="view-column"
-        name="view-column"
+        data-name="wink"
+        name="wink"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        view-column
+        wink
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="view-list"
-        name="view-list"
+        data-name="work-history"
+        name="work-history"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        view-list
+        work-history
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="view-module"
-        name="view-module"
+        data-name="work-off"
+        name="work-off"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        view-module
+        work-off
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="wallet"
-        name="wallet"
+        data-name="work"
+        name="work"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        wallet
+        work
       </wx-view>
     </wx-view>
     <wx-view
       class="demo__card"
     >
       <t-icon
-        data-name="wifi"
-        name="wifi"
+        data-name="wry-smile"
+        name="wry-smile"
         size="48rpx"
         bind:click="onIconTap"
       />
       <wx-view
         class="demo__card-name"
       >
-        wifi
+        wry-smile
       </wx-view>
     </wx-view>
     <wx-view
diff --git a/src/icon/_example/data.js b/src/icon/_example/data.js
index 0acd3f085..5c682a85a 100644
--- a/src/icon/_example/data.js
+++ b/src/icon/_example/data.js
@@ -1,28 +1,155 @@
 const icons = [
+  'activity',
+  'add-and-subtract',
   'add-circle',
   'add-rectangle',
   'add',
+  'address-book',
+  'adjustment',
+  'airplay-wave',
+  'alarm-add',
+  'alarm-off',
+  'alarm',
+  'align-top',
+  'align-vertical',
+  'alpha',
+  'analytics',
+  'anchor',
+  'angry',
+  'animation-1',
+  'animation',
+  'anticlockwise',
+  'api',
   'app',
+  'apple',
+  'application',
+  'architecture-hui-style',
+  'archway-1',
+  'archway',
+  'arrow-down-circle',
   'arrow-down-rectangle',
   'arrow-down',
+  'arrow-left-circle',
+  'arrow-left-down-circle',
+  'arrow-left-down',
+  'arrow-left-right-1',
+  'arrow-left-right-2',
+  'arrow-left-right-3',
+  'arrow-left-right-circle',
+  'arrow-left-up-circle',
+  'arrow-left-up',
   'arrow-left',
+  'arrow-right-circle',
+  'arrow-right-down-circle',
+  'arrow-right-down',
+  'arrow-right-up-circle',
+  'arrow-right-up',
   'arrow-right',
   'arrow-triangle-down-filled',
   'arrow-triangle-down',
   'arrow-triangle-up-filled',
   'arrow-triangle-up',
+  'arrow-up-circle',
+  'arrow-up-down-1',
+  'arrow-up-down-2',
+  'arrow-up-down-3',
+  'arrow-up-down-circle',
   'arrow-up',
+  'artboard',
+  'article',
+  'assignment-checked',
+  'assignment-code',
+  'assignment-error',
+  'assignment-user',
+  'assignment',
   'attach',
+  'attic-1',
+  'attic',
+  'audio',
+  'awkward',
   'backtop-rectangle',
   'backtop',
+  'backup',
   'backward',
+  'bad-laugh',
+  'bamboo-shoot',
+  'banana',
+  'barbecue',
+  'barcode-1',
   'barcode',
-  'books',
+  'base-station',
+  'battery-add',
+  'battery-charging',
+  'battery-low',
+  'battery',
+  'bean',
+  'beer',
+  'beta',
+  'bifurcate',
+  'bill',
+  'blockchain',
+  'bluetooth',
+  'bone',
+  'book-open',
+  'book',
+  'bookmark-add',
+  'bookmark-checked',
+  'bookmark-double',
+  'bookmark-minus',
+  'bookmark',
+  'braces',
+  'brackets',
+  'bread',
+  'bridge-1',
+  'bridge-2',
+  'bridge-3',
+  'bridge-4',
+  'bridge-5',
+  'bridge-6',
+  'bridge',
+  'brightness-1',
+  'brightness',
+  'broccoli',
+  'browse-gallery',
   'browse-off',
   'browse',
+  'brush',
+  'bug-report',
+  'bug',
+  'building-1',
+  'building-2',
+  'building-3',
+  'building-4',
+  'building-5',
+  'building',
   'bulletpoint',
+  'button',
+  'cabbage',
+  'cake',
+  'calculation-1',
+  'calculation',
+  'calculator-1',
+  'calculator',
+  'calendar-1',
+  'calendar-2',
+  'calendar-edit',
+  'calendar-event',
   'calendar',
+  'call-1',
+  'call-cancel',
+  'call-forwarded',
+  'call-incoming',
+  'call-off',
   'call',
+  'calm-1',
+  'calm',
+  'camera-1',
+  'camera-2',
+  'camera-off',
+  'camera',
+  'candy',
+  'card',
+  'cardmembership',
   'caret-down-small',
   'caret-down',
   'caret-left-small',
@@ -31,74 +158,351 @@ const icons = [
   'caret-right',
   'caret-up-small',
   'caret-up',
+  'cart-add',
   'cart',
+  'cast',
+  'castle-1',
+  'castle-2',
+  'castle-3',
+  'castle-4',
+  'castle-5',
+  'castle-6',
+  'castle-7',
+  'castle',
+  'cat',
+  'catalog',
+  'cd',
+  'celsius',
+  'center-focus-strong',
+  'centimeter',
+  'certificate-1',
+  'certificate',
+  'chart-3d',
+  'chart-add',
+  'chart-analytics',
+  'chart-area-multi',
+  'chart-area',
   'chart-bar',
   'chart-bubble',
+  'chart-colum',
+  'chart-combo',
+  'chart-line-data-1',
+  'chart-line-data',
+  'chart-line-multi',
+  'chart-line',
+  'chart-maximum',
+  'chart-median',
+  'chart-minimum',
   'chart-pie',
+  'chart-radar',
+  'chart-radial',
+  'chart-ring-1',
+  'chart-ring',
+  'chart-scatter',
+  'chart-stacked',
   'chart',
+  'chat-add',
+  'chat-bubble-1',
+  'chat-bubble-add',
+  'chat-bubble-error',
+  'chat-bubble-help',
+  'chat-bubble-history',
+  'chat-bubble-locked',
+  'chat-bubble-smile',
+  'chat-bubble',
+  'chat-checked',
+  'chat-clear',
+  'chat-double',
+  'chat-error',
+  'chat-heart',
+  'chat-message',
+  'chat-off',
+  'chat-poll',
+  'chat-setting',
   'chat',
   'check-circle-filled',
   'check-circle',
+  'check-double',
   'check-rectangle-filled',
   'check-rectangle',
   'check',
+  'cheese',
+  'cherry',
   'chevron-down-circle',
+  'chevron-down-double-s',
+  'chevron-down-double',
   'chevron-down-rectangle',
+  'chevron-down-s',
   'chevron-down',
   'chevron-left-circle',
+  'chevron-left-double-s',
   'chevron-left-double',
   'chevron-left-rectangle',
+  'chevron-left-s',
   'chevron-left',
   'chevron-right-circle',
+  'chevron-right-double-s',
   'chevron-right-double',
   'chevron-right-rectangle',
+  'chevron-right-s',
   'chevron-right',
   'chevron-up-circle',
+  'chevron-up-double-s',
+  'chevron-up-double',
   'chevron-up-rectangle',
+  'chevron-up-s',
   'chevron-up',
+  'chicken',
+  'chili',
+  'chimney-1',
+  'chimney-2',
+  'chimney',
+  'chinese-cabbage',
+  'church',
   'circle',
+  'city-1',
+  'city-10',
+  'city-11',
+  'city-12',
+  'city-13',
+  'city-14',
+  'city-15',
+  'city-2',
+  'city-3',
+  'city-4',
+  'city-5',
+  'city-6',
+  'city-7',
+  'city-8',
+  'city-9',
+  'city-ancient-1',
+  'city-ancient-2',
+  'city-ancient',
+  'city',
+  'clear-formatting-1',
+  'clear-formatting',
   'clear',
   'close-circle-filled',
   'close-circle',
+  'close-octagon',
   'close-rectangle',
   'close',
   'cloud-download',
   'cloud-upload',
   'cloud',
+  'cloudy-day',
+  'cloudy-night-rain',
+  'cloudy-night',
+  'cloudy-rain',
+  'cloudy-sunny',
+  'code-1',
+  'code-off',
   'code',
+  'cola',
+  'collage',
+  'collection',
+  'color-invert',
+  'combination',
+  'command',
+  'compass-1',
+  'compass',
+  'component-breadcrumb',
+  'component-checkbox',
+  'component-divider-horizontal',
+  'component-divider-vertical',
+  'component-dropdown',
+  'component-grid',
+  'component-input',
+  'component-layout',
+  'component-radio',
+  'component-space',
+  'component-steps',
+  'component-switch',
+  'constraint',
+  'contrast-1',
+  'contrast',
   'control-platform',
+  'cooperate',
+  'coordinate-system',
+  'copy',
+  'copyright',
+  'corn',
+  'coupon',
+  'course',
+  'cpu',
+  'crack',
+  'creditcard-add',
+  'creditcard-off',
   'creditcard',
+  'crooked-smile',
+  'cry-and-laugh',
+  'cry-loudly',
+  'css3',
+  'cucumber',
+  'currency-exchange',
+  'cursor',
+  'curtain',
+  'curve',
+  'cut-1',
+  'cut',
+  'dam-1',
+  'dam-2',
+  'dam-3',
+  'dam-4',
+  'dam-5',
+  'dam-6',
+  'dam-7',
+  'dam',
+  'dart-board',
+  'dashboard-1',
   'dashboard',
+  'data-base',
+  'data-checked',
+  'data-display',
+  'data-error',
+  'data-search',
+  'data',
+  'delete-1',
+  'delete-time',
   'delete',
+  'delta',
+  'depressed',
+  'desktop-1',
   'desktop',
+  'despise',
+  'device',
   'discount-filled',
   'discount',
+  'dissatisfaction',
+  'divide',
+  'dividers-1',
+  'dividers',
+  'doge',
+  'double-storey',
+  'download-1',
   'download',
+  'downscale',
+  'drag-drop',
+  'drag-move',
+  'drink',
+  'drumstick',
+  'dv',
+  'dvd',
+  'earphone',
+  'earth',
   'edit-1',
+  'edit-2',
+  'edit-off',
   'edit',
+  'education',
+  'eggplant',
   'ellipsis',
+  'emo-emotional',
   'enter',
+  'equal',
   'error-circle-filled',
   'error-circle',
+  'error-triangle',
   'error',
+  'excited-1',
+  'excited',
+  'expand-horizontal',
+  'expand-vertical',
+  'explore-off',
+  'explore',
+  'exposure',
+  'extension-off',
+  'extension',
+  'face-retouching',
+  'fact-check',
+  'fahrenheit-scale',
+  'feel-at-ease',
+  'ferocious',
+  'ferris-wheel',
+  'file-1',
+  'file-add-1',
   'file-add',
+  'file-attachment',
+  'file-blocked',
+  'file-code-1',
+  'file-code',
   'file-copy',
+  'file-download',
   'file-excel',
+  'file-export',
   'file-icon',
   'file-image',
+  'file-import',
+  'file-locked',
+  'file-minus',
+  'file-music',
+  'file-onenote',
+  'file-outlook',
   'file-paste',
   'file-pdf',
   'file-powerpoint',
+  'file-restore',
+  'file-safety',
+  'file-search',
+  'file-setting',
+  'file-teams',
   'file-unknown',
+  'file-unlocked',
   'file-word',
+  'file-zip',
   'file',
+  'fill-color-1',
+  'fill-color',
+  'film-1',
+  'film',
+  'filter-1',
+  'filter-2',
+  'filter-3',
   'filter-clear',
+  'filter-off',
   'filter',
+  'fingerprint-1',
+  'fingerprint-2',
+  'fingerprint-3',
+  'fingerprint',
+  'fish',
+  'flag-1',
+  'flag-2',
+  'flag-3',
+  'flag-4',
   'flag',
+  'flashlight',
+  'flight-landing',
+  'flight-takeoff',
+  'flip-smiling-face',
+  'flip-to-back',
+  'flip-to-front',
+  'focus',
+  'fog-night',
+  'fog-sunny',
+  'fog',
+  'folder-1',
+  'folder-add-1',
   'folder-add',
+  'folder-blocked',
+  'folder-details',
+  'folder-export',
+  'folder-import',
+  'folder-locked',
+  'folder-minus',
+  'folder-move',
+  'folder-off',
+  'folder-open-1',
   'folder-open',
+  'folder-search',
+  'folder-setting',
+  'folder-shared',
+  'folder-unlocked',
+  'folder-zip',
   'folder',
+  'forest',
   'fork',
+  'form',
   'format-horizontal-align-bottom',
   'format-horizontal-align-center',
   'format-horizontal-align-top',
@@ -106,141 +510,696 @@ const icons = [
   'format-vertical-align-left',
   'format-vertical-align-right',
   'forward',
+  'frame-1',
+  'frame',
+  'fries',
+  'fullscreen-1',
+  'fullscreen-2',
+  'fullscreen-exit-1',
   'fullscreen-exit',
   'fullscreen',
+  'function-curve',
+  'functions-1',
+  'functions',
+  'gamepad-1',
+  'gamepad',
+  'gamma',
+  'garlic',
   'gender-female',
   'gender-male',
+  'gesture-applause',
+  'gesture-click',
+  'gesture-down',
+  'gesture-expansion',
+  'gesture-left-slip',
+  'gesture-left',
+  'gesture-pray-1',
+  'gesture-pray',
+  'gesture-press',
+  'gesture-ranslation-1',
+  'gesture-ranslation',
+  'gesture-right-slip',
+  'gesture-right',
+  'gesture-slide-up',
+  'gesture-up-1',
+  'gesture-up-2',
+  'gesture-up-and-down',
+  'gesture-up',
+  'gesture-wipe-down',
   'gift',
+  'giggle',
+  'git-branch',
+  'git-commit',
+  'git-merge',
+  'git-pull-request',
+  'git-repository-commits',
+  'git-repository-private',
+  'git-repository',
+  'gps',
+  'grape',
+  'greater-than-or-equal',
+  'greater-than',
+  'green-onion',
+  'grid-add',
+  'grid-view',
+  'guitar',
+  'hamburger',
+  'happy',
+  'hard-disk-storage',
+  'hard-drive',
+  'hashtag',
+  'hd',
   'heart-filled',
   'heart',
   'help-circle-filled',
   'help-circle',
+  'help-rectangle',
   'help',
+  'highlight-1',
+  'highlight',
+  'history-setting',
   'history',
   'home',
+  'hospital-1',
+  'hospital',
+  'hotspot-wave',
   'hourglass',
+  'houses-1',
+  'houses-2',
+  'houses',
+  'html5',
+  'https',
+  'ice-cream',
+  'icon',
+  'image-1',
+  'image-add',
+  'image-edit',
   'image-error',
+  'image-off',
+  'image-search',
   'image',
+  'indent-left',
+  'indent-right',
+  'indicator',
   'info-circle-filled',
   'info-circle',
+  'ink',
+  'install-desktop',
+  'install-mobile',
+  'install',
+  'institution-checked',
+  'institution',
   'internet',
+  'ipod',
+  'joyful',
+  'jump-off',
   'jump',
+  'keyboard',
   'laptop',
   'layers',
+  'layout',
+  'leaderboard',
+  'lemon-slice',
+  'lemon',
+  'less-than-or-equal',
+  'less-than',
+  'letters-a',
+  'letters-b',
+  'letters-c',
+  'letters-d',
+  'letters-e',
+  'letters-f',
+  'letters-g',
+  'letters-h',
+  'letters-i',
+  'letters-j',
+  'letters-k',
+  'letters-l',
+  'letters-m',
+  'letters-n',
+  'letters-o',
+  'letters-p',
+  'letters-q',
+  'letters-r',
+  'letters-s',
+  'letters-t',
+  'letters-u',
+  'letters-v',
+  'letters-w',
+  'letters-x',
+  'letters-y',
+  'letters-z',
+  'lightbulb-circle',
+  'lightbulb',
+  'lighthouse-1',
+  'lighthouse-2',
+  'lighthouse',
+  'lighting-circle',
+  'line-height',
+  'link-1',
   'link-unlink',
   'link',
+  'liquor',
+  'list',
+  'load',
   'loading',
+  'location-1',
+  'location-enlargement',
+  'location-error',
+  'location-parking-place',
+  'location-reduction',
+  'location-setting',
   'location',
   'lock-off',
   'lock-on',
+  'lock-time',
   'login',
+  'logo-adobe-illustrate',
+  'logo-adobe-photoshop-1',
+  'logo-adobe-photoshop',
   'logo-android',
   'logo-apple-filled',
   'logo-apple',
+  'logo-behance',
   'logo-chrome-filled',
   'logo-chrome',
+  'logo-cinema4d',
   'logo-codepen',
+  'logo-codesandbox',
+  'logo-dribbble',
+  'logo-facebook',
+  'logo-figma',
+  'logo-framer',
   'logo-github-filled',
   'logo-github',
+  'logo-gitlab',
   'logo-ie-filled',
   'logo-ie',
+  'logo-instagram',
   'logo-qq',
+  'logo-twitter',
+  'logo-wechat-stroke',
   'logo-wechat',
   'logo-wecom',
   'logo-windows-filled',
   'logo-windows',
+  'logo-youtube',
   'logout',
+  'look-around',
+  'loudspeaker',
   'mail',
+  'map-3d',
+  'map-add',
+  'map-aiming',
+  'map-blocked',
+  'map-bubble',
+  'map-cancel',
+  'map-chat',
+  'map-checked',
+  'map-collection',
+  'map-connection',
+  'map-distance',
+  'map-double',
+  'map-edit',
+  'map-grid',
+  'map-information-1',
+  'map-information-2',
+  'map-information',
+  'map-location',
+  'map-locked',
+  'map-marked',
+  'map-navigation',
+  'map-outline',
+  'map-route-planning',
+  'map-ruler',
+  'map-safety',
+  'map-search-1',
+  'map-search',
+  'map-setting',
+  'map-unlocked',
+  'map',
+  'mark-as-unread',
+  'markup',
+  'mathematics',
+  'measurement-1',
+  'measurement-2',
+  'measurement',
+  'meat-pepper',
+  'media-library',
+  'member',
+  'menu-application',
   'menu-fold',
   'menu-unfold',
+  'menu',
+  'merge-cells',
+  'microphone-1',
+  'microphone-2',
+  'microphone',
+  'milk',
   'minus-circle-filled',
   'minus-circle',
   'minus-rectangle-filled',
   'minus-rectangle',
+  'minus',
   'mirror',
+  'mobile-blocked',
+  'mobile-list',
+  'mobile-navigation',
+  'mobile-shortcut',
   'mobile-vibrate',
   'mobile',
-  'money-circle',
+  'mode-dark',
+  'mode-light',
+  'module',
+  'money',
+  'monument',
+  'moon-fall',
+  'moon-rising',
+  'moon',
   'more',
+  'mosque-1',
+  'mosque',
+  'mouse',
+  'move-1',
   'move',
+  'movie-clapper',
+  'multiply',
+  'museum-1',
+  'museum-2',
+  'museum',
+  'mushroom-1',
+  'mushroom',
+  'music-1',
+  'music-2',
+  'music-rectangle-add',
+  'music',
+  'navigation-arrow',
   'next',
+  'no-expression',
+  'noodle',
+  'notification-add',
+  'notification-circle',
+  'notification-error',
   'notification-filled',
   'notification',
+  'numbers-0-1',
+  'numbers-0',
+  'numbers-1-1',
+  'numbers-1',
+  'numbers-2-1',
+  'numbers-2',
+  'numbers-3-1',
+  'numbers-3',
+  'numbers-4-1',
+  'numbers-4',
+  'numbers-5-1',
+  'numbers-5',
+  'numbers-6-1',
+  'numbers-6',
+  'numbers-7-1',
+  'numbers-7',
+  'numbers-8-1',
+  'numbers-8',
+  'numbers-9-1',
+  'numbers-9',
+  'nut',
+  'object-storage',
+  'open-mouth',
+  'opera',
   'order-adjustment-column',
   'order-ascending',
   'order-descending',
+  'outbox',
   'page-first',
+  'page-head',
   'page-last',
+  'palace-1',
+  'palace-2',
+  'palace-3',
+  'palace-4',
+  'palace',
+  'palette-1',
+  'palette',
+  'panorama-horizontal',
+  'panorama-vertical',
+  'pantone',
+  'parabola',
+  'parentheses',
+  'paste',
+  'patio',
   'pause-circle-filled',
-  'photo',
+  'pause-circle-stroke',
+  'pause-circle',
+  'pause',
+  'pea',
+  'peach',
+  'pear',
+  'pearl-of-the-orient',
+  'pen-ball',
+  'pen-brush',
+  'pen-mark',
+  'pen-quill',
+  'pen',
+  'pending',
+  'percent',
+  'personal-information',
+  'phone-locked',
+  'phone-search',
+  'pi',
+  'piano',
   'pin-filled',
   'pin',
   'play-circle-filled',
+  'play-circle-stroke-add',
   'play-circle-stroke',
   'play-circle',
+  'play-demo',
+  'play-rectangle',
   'play',
+  'plus',
+  'popsicle',
+  'portrait',
+  'pout',
   'poweroff',
   'precise-monitor',
   'previous',
   'print',
+  'pumpkin',
+  'pyramid-maya',
+  'pyramid',
   'qrcode',
+  'quadratic',
+  'questionnaire',
   'queue',
+  'radar',
+  'radio-1',
+  'radio-2',
+  'radish',
+  'rain-heavy',
+  'rain-light',
+  'rain-medium',
+  'rainbow',
   'rectangle',
   'refresh',
+  'relation',
   'relativity',
+  'remote-wave',
   'remove',
+  'replay',
+  'rice-ball',
+  'rice',
+  'roast',
+  'rocket',
   'rollback',
   'rollfront',
   'root-list',
+  'rotate-locked',
+  'rotate',
   'rotation',
   'round',
+  'router-wave',
+  'rss',
+  'ruler',
+  'sailing-hotel',
+  'sandwich',
+  'saturation',
+  'sausage',
   'save',
+  'saving-pot',
   'scan',
+  'screen-4k',
+  'screencast',
+  'screenshot',
+  'scroll-bar',
+  'sd-card-1',
+  'sd-card',
+  'search-error',
   'search',
   'secured',
+  'send-cancel',
+  'send',
+  'sensors-1',
+  'sensors-2',
+  'sensors-off',
+  'sensors',
+  'serenity',
   'server',
   'service',
+  'setting-1',
   'setting',
+  'share-1',
   'share',
+  'sharpness',
+  'shield-error',
+  'shimen',
+  'shop-1',
+  'shop-2',
+  'shop-3',
+  'shop-4',
+  'shop-5',
   'shop',
+  'shrimp',
+  'shrink-horizontal',
+  'shrink-vertical',
+  'shutter',
+  'shutup',
+  'sim-card-1',
+  'sim-card-2',
+  'sim-card',
+  'sinister-smile',
+  'sip',
   'slash',
+  'sleep',
+  'slice',
+  'slideshow',
+  'smile',
+  'sneer',
+  'snowflake',
+  'sonic',
+  'sound-down',
+  'sound-high',
+  'sound-low',
+  'sound-mute-1',
+  'sound-mute',
+  'sound-up',
   'sound',
+  'space',
+  'speechless-1',
   'star-filled',
   'star',
-  'stop-circle-1',
+  'statue-of-jesus',
+  'sticky-note',
   'stop-circle-filled',
+  'stop-circle-stroke',
   'stop-circle',
   'stop',
+  'store',
+  'street-road-1',
+  'street-road',
+  'subtitle',
+  'subway-line',
+  'sum',
+  'sun-fall',
+  'sun-rising',
+  'sunny',
+  'support',
+  'surprised-1',
+  'surprised',
   'swap-left',
   'swap-right',
   'swap',
+  'swear-1',
+  'swear-2',
+  'system-2',
+  'system-3',
+  'system-application',
+  'system-blocked',
+  'system-code',
+  'system-components',
+  'system-coordinate',
+  'system-device',
+  'system-interface',
+  'system-location',
+  'system-locked',
+  'system-log',
+  'system-marked',
+  'system-messages',
+  'system-regulation',
+  'system-search',
+  'system-setting',
+  'system-storage',
+  'system-sum',
+  'system-unlocked',
+  'tab',
+  'table-1',
+  'table-2',
+  'table-add',
+  'table-split',
+  'table',
+  'tag',
+  'tangerinr',
+  'tape',
+  'task-1',
+  'task-add-1',
+  'task-add',
+  'task-checked',
+  'task-error',
+  'task-location',
+  'task-marked',
+  'task-setting',
+  'task-visible',
+  'task',
+  'tea',
+  'teahouse',
+  'template',
+  'temple',
+  'terminal-rectangle-1',
+  'terminal-rectangle',
+  'terminal-window',
+  'terminal',
+  'textbox',
+  'textformat-bold',
+  'textformat-color',
+  'textformat-italic',
+  'textformat-strikethrough',
+  'textformat-underline',
+  'textformat-wrap',
+  'theaters',
+  'thumb-down-1',
+  'thumb-down-2',
   'thumb-down',
+  'thumb-up-1',
+  'thumb-up-2',
   'thumb-up',
+  'thunder',
+  'thunderstorm-night',
+  'thunderstorm-sunny',
+  'thunderstorm',
+  'ticket',
   'time-filled',
   'time',
+  'tips-double',
   'tips',
+  'tomato',
+  'tools-circle',
   'tools',
+  'tornado',
+  'tower-1',
+  'tower-2',
+  'tower-3',
+  'tower-clock',
+  'tower',
+  'town',
+  'traffic-events',
+  'traffic',
+  'transform-1',
+  'transform-2',
+  'transform-3',
+  'transform',
   'translate-1',
   'translate',
+  'tree-list',
+  'tree-round-dot-vertical',
+  'tree-round-dot',
+  'tree-square-dot-vertical',
+  'tree-square-dot',
+  'trending-down',
+  'trending-up',
+  'tv-1',
+  'tv-2',
+  'tv',
+  'typography',
+  'uncomfortable-1',
+  'uncomfortable-2',
+  'uncomfortable',
+  'undertake-delivery',
+  'undertake-environment-protection',
+  'undertake-hold-up',
+  'undertake-transaction',
+  'undertake',
   'unfold-less',
   'unfold-more',
+  'unhappy-1',
+  'unhappy',
+  'uninstall',
+  'upload-1',
   'upload',
+  'upscale',
   'usb',
+  'user-1',
   'user-add',
+  'user-arrow-down',
+  'user-arrow-left',
+  'user-arrow-right',
+  'user-arrow-up',
   'user-avatar',
+  'user-blocked',
+  'user-business',
+  'user-checked-1',
+  'user-checked',
   'user-circle',
   'user-clear',
+  'user-error-1',
+  'user-invisible',
+  'user-list',
+  'user-locked',
+  'user-marked',
+  'user-password',
+  'user-safety',
+  'user-search',
+  'user-setting',
+  'user-talk-1',
+  'user-talk-off-1',
   'user-talk',
+  'user-time',
+  'user-transmit',
+  'user-unknown',
+  'user-unlocked',
+  'user-vip',
+  'user-visible',
   'user',
   'usergroup-add',
   'usergroup-clear',
   'usergroup',
+  'vehicle',
+  'verified',
+  'verify',
+  'video-camera-1',
+  'video-camera-2',
+  'video-camera-dollar',
+  'video-camera-minus',
+  'video-camera-music',
+  'video-camera-off',
+  'video-camera',
+  'video-library',
   'video',
+  'view-agenda',
   'view-column',
+  'view-in-ar',
   'view-list',
   'view-module',
+  'visual-recognition',
   'wallet',
+  'watch',
+  'watermelon',
+  'wave-left',
+  'wave-right',
+  'wealth-1',
+  'wealth',
+  'widget',
+  'wifi-1',
+  'wifi-off-1',
+  'wifi-off',
   'wifi',
+  'window-1',
+  'window',
+  'windy-rain',
+  'windy',
+  'wink',
+  'work-history',
+  'work-off',
+  'work',
+  'wry-smile',
   'zoom-in',
   'zoom-out',
 ];
diff --git a/src/icon/icon.less b/src/icon/icon.less
index 69dbb8d10..6dbcbec3f 100644
--- a/src/icon/icon.less
+++ b/src/icon/icon.less
@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: @prefix;
-  src: url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.eot'),
-    url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.eot?#iefix') format('ded-opentype'),
-    url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.woff') format('woff'),
-    url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.ttf') format('truetype'),
-    url('https://tdesign.gtimg.com/icon/0.1.4/fonts/t.svg') format('svg'); /* iOS 4.1- */
+  src: url('https://tdesign.gtimg.com/icon/0.2.0/fonts/t.eot'),
+    url('https://tdesign.gtimg.com/icon/0.2.0/fonts/t.eot?#iefix') format('ded-opentype'),
+    url('https://tdesign.gtimg.com/icon/0.2.0/fonts/t.woff') format('woff'),
+    url('https://tdesign.gtimg.com/icon/0.2.0/fonts/t.ttf') format('truetype'),
+    url('https://tdesign.gtimg.com/icon/0.2.0/fonts/t.svg') format('svg'); /* iOS 4.1- */
   font-weight: normal;
   font-style: normal;
 }
@@ -41,978 +41,4814 @@
   font-family: @prefix !important; /* prevent issues with browser extensions that change fonts */
 }
 
-.@{prefix}-icon-add-circle:before {
+.@{prefix}-icon-activity:before {
   content: '\E001';
 }
 
-.@{prefix}-icon-add-rectangle:before {
+.@{prefix}-icon-add-and-subtract:before {
   content: '\E002';
 }
 
-.@{prefix}-icon-add:before {
+.@{prefix}-icon-add-circle:before {
   content: '\E003';
 }
 
-.@{prefix}-icon-app:before {
+.@{prefix}-icon-add-rectangle:before {
   content: '\E004';
 }
 
-.@{prefix}-icon-arrow-down-rectangle:before {
+.@{prefix}-icon-add:before {
   content: '\E005';
 }
 
-.@{prefix}-icon-arrow-down:before {
+.@{prefix}-icon-address-book:before {
   content: '\E006';
 }
 
-.@{prefix}-icon-arrow-left:before {
+.@{prefix}-icon-adjustment:before {
   content: '\E007';
 }
 
-.@{prefix}-icon-arrow-right:before {
+.@{prefix}-icon-airplay-wave:before {
   content: '\E008';
 }
 
-.@{prefix}-icon-arrow-triangle-down-filled:before {
+.@{prefix}-icon-alarm-add:before {
   content: '\E009';
 }
 
-.@{prefix}-icon-arrow-triangle-down:before {
+.@{prefix}-icon-alarm-off:before {
   content: '\E00A';
 }
 
-.@{prefix}-icon-arrow-triangle-up-filled:before {
+.@{prefix}-icon-alarm:before {
   content: '\E00B';
 }
 
-.@{prefix}-icon-arrow-triangle-up:before {
+.@{prefix}-icon-align-top:before {
   content: '\E00C';
 }
 
-.@{prefix}-icon-arrow-up:before {
+.@{prefix}-icon-align-vertical:before {
   content: '\E00D';
 }
 
-.@{prefix}-icon-attach:before {
+.@{prefix}-icon-alpha:before {
   content: '\E00E';
 }
 
-.@{prefix}-icon-backtop-rectangle:before {
+.@{prefix}-icon-analytics:before {
   content: '\E00F';
 }
 
-.@{prefix}-icon-backtop:before {
+.@{prefix}-icon-anchor:before {
   content: '\E010';
 }
 
-.@{prefix}-icon-backward:before {
+.@{prefix}-icon-angry:before {
   content: '\E011';
 }
 
-.@{prefix}-icon-barcode:before {
+.@{prefix}-icon-animation-1:before {
   content: '\E012';
 }
 
-.@{prefix}-icon-books:before {
+.@{prefix}-icon-animation:before {
   content: '\E013';
 }
 
-.@{prefix}-icon-browse-off:before {
+.@{prefix}-icon-anticlockwise:before {
   content: '\E014';
 }
 
-.@{prefix}-icon-browse:before {
+.@{prefix}-icon-api:before {
   content: '\E015';
 }
 
-.@{prefix}-icon-bulletpoint:before {
+.@{prefix}-icon-app:before {
   content: '\E016';
 }
 
-.@{prefix}-icon-calendar:before {
+.@{prefix}-icon-apple:before {
   content: '\E017';
 }
 
-.@{prefix}-icon-call:before {
+.@{prefix}-icon-application:before {
   content: '\E018';
 }
 
-.@{prefix}-icon-caret-down-small:before {
+.@{prefix}-icon-architecture-hui-style:before {
   content: '\E019';
 }
 
-.@{prefix}-icon-caret-down:before {
+.@{prefix}-icon-archway-1:before {
   content: '\E01A';
 }
 
-.@{prefix}-icon-caret-left-small:before {
+.@{prefix}-icon-archway:before {
   content: '\E01B';
 }
 
-.@{prefix}-icon-caret-left:before {
+.@{prefix}-icon-arrow-down-circle:before {
   content: '\E01C';
 }
 
-.@{prefix}-icon-caret-right-small:before {
+.@{prefix}-icon-arrow-down-rectangle:before {
   content: '\E01D';
 }
 
-.@{prefix}-icon-caret-right:before {
+.@{prefix}-icon-arrow-down:before {
   content: '\E01E';
 }
 
-.@{prefix}-icon-caret-up-small:before {
+.@{prefix}-icon-arrow-left-circle:before {
   content: '\E01F';
 }
 
-.@{prefix}-icon-caret-up:before {
+.@{prefix}-icon-arrow-left-down-circle:before {
   content: '\E020';
 }
 
-.@{prefix}-icon-cart:before {
+.@{prefix}-icon-arrow-left-down:before {
   content: '\E021';
 }
 
-.@{prefix}-icon-chart-bar:before {
+.@{prefix}-icon-arrow-left-right-1:before {
   content: '\E022';
 }
 
-.@{prefix}-icon-chart-bubble:before {
+.@{prefix}-icon-arrow-left-right-2:before {
   content: '\E023';
 }
 
-.@{prefix}-icon-chart-pie:before {
+.@{prefix}-icon-arrow-left-right-3:before {
   content: '\E024';
 }
 
-.@{prefix}-icon-chart:before {
+.@{prefix}-icon-arrow-left-right-circle:before {
   content: '\E025';
 }
 
-.@{prefix}-icon-chat:before {
+.@{prefix}-icon-arrow-left-up-circle:before {
   content: '\E026';
 }
 
-.@{prefix}-icon-check-circle-filled:before {
+.@{prefix}-icon-arrow-left-up:before {
   content: '\E027';
 }
 
-.@{prefix}-icon-check-circle:before {
+.@{prefix}-icon-arrow-left:before {
   content: '\E028';
 }
 
-.@{prefix}-icon-check-rectangle-filled:before {
+.@{prefix}-icon-arrow-right-circle:before {
   content: '\E029';
 }
 
-.@{prefix}-icon-check-rectangle:before {
+.@{prefix}-icon-arrow-right-down-circle:before {
   content: '\E02A';
 }
 
-.@{prefix}-icon-check:before {
+.@{prefix}-icon-arrow-right-down:before {
   content: '\E02B';
 }
 
-.@{prefix}-icon-chevron-down-circle:before {
+.@{prefix}-icon-arrow-right-up-circle:before {
   content: '\E02C';
 }
 
-.@{prefix}-icon-chevron-down-rectangle:before {
+.@{prefix}-icon-arrow-right-up:before {
   content: '\E02D';
 }
 
-.@{prefix}-icon-chevron-down:before {
+.@{prefix}-icon-arrow-right:before {
   content: '\E02E';
 }
 
-.@{prefix}-icon-chevron-left-circle:before {
+.@{prefix}-icon-arrow-triangle-down-filled:before {
   content: '\E02F';
 }
 
-.@{prefix}-icon-chevron-left-double:before {
+.@{prefix}-icon-arrow-triangle-down:before {
   content: '\E030';
 }
 
-.@{prefix}-icon-chevron-left-rectangle:before {
+.@{prefix}-icon-arrow-triangle-up-filled:before {
   content: '\E031';
 }
 
-.@{prefix}-icon-chevron-left:before {
+.@{prefix}-icon-arrow-triangle-up:before {
   content: '\E032';
 }
 
-.@{prefix}-icon-chevron-right-circle:before {
+.@{prefix}-icon-arrow-up-circle:before {
   content: '\E033';
 }
 
-.@{prefix}-icon-chevron-right-double:before {
+.@{prefix}-icon-arrow-up-down-1:before {
   content: '\E034';
 }
 
-.@{prefix}-icon-chevron-right-rectangle:before {
+.@{prefix}-icon-arrow-up-down-2:before {
   content: '\E035';
 }
 
-.@{prefix}-icon-chevron-right:before {
+.@{prefix}-icon-arrow-up-down-3:before {
   content: '\E036';
 }
 
-.@{prefix}-icon-chevron-up-circle:before {
+.@{prefix}-icon-arrow-up-down-circle:before {
   content: '\E037';
 }
 
-.@{prefix}-icon-chevron-up-rectangle:before {
+.@{prefix}-icon-arrow-up:before {
   content: '\E038';
 }
 
-.@{prefix}-icon-chevron-up:before {
+.@{prefix}-icon-artboard:before {
   content: '\E039';
 }
 
-.@{prefix}-icon-circle:before {
+.@{prefix}-icon-article:before {
   content: '\E03A';
 }
 
-.@{prefix}-icon-clear:before {
+.@{prefix}-icon-assignment-checked:before {
   content: '\E03B';
 }
 
-.@{prefix}-icon-close-circle-filled:before {
+.@{prefix}-icon-assignment-code:before {
   content: '\E03C';
 }
 
-.@{prefix}-icon-close-circle:before {
+.@{prefix}-icon-assignment-error:before {
   content: '\E03D';
 }
 
-.@{prefix}-icon-close-rectangle:before {
+.@{prefix}-icon-assignment-user:before {
   content: '\E03E';
 }
 
-.@{prefix}-icon-close:before {
+.@{prefix}-icon-assignment:before {
   content: '\E03F';
 }
 
-.@{prefix}-icon-cloud-download:before {
+.@{prefix}-icon-attach:before {
   content: '\E040';
 }
 
-.@{prefix}-icon-cloud-upload:before {
+.@{prefix}-icon-attic-1:before {
   content: '\E041';
 }
 
-.@{prefix}-icon-cloud:before {
+.@{prefix}-icon-attic:before {
   content: '\E042';
 }
 
-.@{prefix}-icon-code:before {
+.@{prefix}-icon-audio:before {
   content: '\E043';
 }
 
-.@{prefix}-icon-control-platform:before {
+.@{prefix}-icon-awkward:before {
   content: '\E044';
 }
 
-.@{prefix}-icon-creditcard:before {
+.@{prefix}-icon-backtop-rectangle:before {
   content: '\E045';
 }
 
-.@{prefix}-icon-dashboard:before {
+.@{prefix}-icon-backtop:before {
   content: '\E046';
 }
 
-.@{prefix}-icon-delete:before {
+.@{prefix}-icon-backup:before {
   content: '\E047';
 }
 
-.@{prefix}-icon-desktop:before {
+.@{prefix}-icon-backward:before {
   content: '\E048';
 }
 
-.@{prefix}-icon-discount-filled:before {
+.@{prefix}-icon-bad-laugh:before {
   content: '\E049';
 }
 
-.@{prefix}-icon-discount:before {
+.@{prefix}-icon-bamboo-shoot:before {
   content: '\E04A';
 }
 
-.@{prefix}-icon-download:before {
+.@{prefix}-icon-banana:before {
   content: '\E04B';
 }
 
-.@{prefix}-icon-edit-1:before {
+.@{prefix}-icon-barbecue:before {
   content: '\E04C';
 }
 
-.@{prefix}-icon-edit:before {
+.@{prefix}-icon-barcode-1:before {
   content: '\E04D';
 }
 
-.@{prefix}-icon-ellipsis:before {
+.@{prefix}-icon-barcode:before {
   content: '\E04E';
 }
 
-.@{prefix}-icon-enter:before {
+.@{prefix}-icon-base-station:before {
   content: '\E04F';
 }
 
-.@{prefix}-icon-error-circle-filled:before {
+.@{prefix}-icon-battery-add:before {
   content: '\E050';
 }
 
-.@{prefix}-icon-error-circle:before {
+.@{prefix}-icon-battery-charging:before {
   content: '\E051';
 }
 
-.@{prefix}-icon-error:before {
+.@{prefix}-icon-battery-low:before {
   content: '\E052';
 }
 
-.@{prefix}-icon-file-add:before {
+.@{prefix}-icon-battery:before {
   content: '\E053';
 }
 
-.@{prefix}-icon-file-copy:before {
+.@{prefix}-icon-bean:before {
   content: '\E054';
 }
 
-.@{prefix}-icon-file-excel:before {
+.@{prefix}-icon-beer:before {
   content: '\E055';
 }
 
-.@{prefix}-icon-file-icon:before {
+.@{prefix}-icon-beta:before {
   content: '\E056';
 }
 
-.@{prefix}-icon-file-image:before {
+.@{prefix}-icon-bifurcate:before {
   content: '\E057';
 }
 
-.@{prefix}-icon-file-paste:before {
+.@{prefix}-icon-bill:before {
   content: '\E058';
 }
 
-.@{prefix}-icon-file-pdf:before {
+.@{prefix}-icon-blockchain:before {
   content: '\E059';
 }
 
-.@{prefix}-icon-file-powerpoint:before {
+.@{prefix}-icon-bluetooth:before {
   content: '\E05A';
 }
 
-.@{prefix}-icon-file-unknown:before {
+.@{prefix}-icon-bone:before {
   content: '\E05B';
 }
 
-.@{prefix}-icon-file-word:before {
+.@{prefix}-icon-book-open:before {
   content: '\E05C';
 }
 
-.@{prefix}-icon-file:before {
+.@{prefix}-icon-book:before {
   content: '\E05D';
 }
 
-.@{prefix}-icon-filter-clear:before {
+.@{prefix}-icon-bookmark-add:before {
   content: '\E05E';
 }
 
-.@{prefix}-icon-filter:before {
+.@{prefix}-icon-bookmark-checked:before {
   content: '\E05F';
 }
 
-.@{prefix}-icon-flag:before {
+.@{prefix}-icon-bookmark-double:before {
   content: '\E060';
 }
 
-.@{prefix}-icon-folder-add:before {
+.@{prefix}-icon-bookmark-minus:before {
   content: '\E061';
 }
 
-.@{prefix}-icon-folder-open:before {
+.@{prefix}-icon-bookmark:before {
   content: '\E062';
 }
 
-.@{prefix}-icon-folder:before {
+.@{prefix}-icon-braces:before {
   content: '\E063';
 }
 
-.@{prefix}-icon-fork:before {
+.@{prefix}-icon-brackets:before {
   content: '\E064';
 }
 
-.@{prefix}-icon-format-horizontal-align-bottom:before {
+.@{prefix}-icon-bread:before {
   content: '\E065';
 }
 
-.@{prefix}-icon-format-horizontal-align-center:before {
+.@{prefix}-icon-bridge-1:before {
   content: '\E066';
 }
 
-.@{prefix}-icon-format-horizontal-align-top:before {
+.@{prefix}-icon-bridge-2:before {
   content: '\E067';
 }
 
-.@{prefix}-icon-format-vertical-align-center:before {
+.@{prefix}-icon-bridge-3:before {
   content: '\E068';
 }
 
-.@{prefix}-icon-format-vertical-align-left:before {
+.@{prefix}-icon-bridge-4:before {
   content: '\E069';
 }
 
-.@{prefix}-icon-format-vertical-align-right:before {
+.@{prefix}-icon-bridge-5:before {
   content: '\E06A';
 }
 
-.@{prefix}-icon-forward:before {
+.@{prefix}-icon-bridge-6:before {
   content: '\E06B';
 }
 
-.@{prefix}-icon-fullscreen-exit:before {
+.@{prefix}-icon-bridge:before {
   content: '\E06C';
 }
 
-.@{prefix}-icon-fullscreen:before {
+.@{prefix}-icon-brightness-1:before {
   content: '\E06D';
 }
 
-.@{prefix}-icon-gender-female:before {
+.@{prefix}-icon-brightness:before {
   content: '\E06E';
 }
 
-.@{prefix}-icon-gender-male:before {
+.@{prefix}-icon-broccoli:before {
   content: '\E06F';
 }
 
-.@{prefix}-icon-gift:before {
+.@{prefix}-icon-browse-gallery:before {
   content: '\E070';
 }
 
-.@{prefix}-icon-heart-filled:before {
+.@{prefix}-icon-browse-off:before {
   content: '\E071';
 }
 
-.@{prefix}-icon-heart:before {
+.@{prefix}-icon-browse:before {
   content: '\E072';
 }
 
-.@{prefix}-icon-help-circle-filled:before {
+.@{prefix}-icon-brush:before {
   content: '\E073';
 }
 
-.@{prefix}-icon-help-circle:before {
+.@{prefix}-icon-bug-report:before {
   content: '\E074';
 }
 
-.@{prefix}-icon-help:before {
+.@{prefix}-icon-bug:before {
   content: '\E075';
 }
 
-.@{prefix}-icon-history:before {
+.@{prefix}-icon-building-1:before {
   content: '\E076';
 }
 
-.@{prefix}-icon-home:before {
+.@{prefix}-icon-building-2:before {
   content: '\E077';
 }
 
-.@{prefix}-icon-hourglass:before {
+.@{prefix}-icon-building-3:before {
   content: '\E078';
 }
 
-.@{prefix}-icon-image-error:before {
+.@{prefix}-icon-building-4:before {
   content: '\E079';
 }
 
-.@{prefix}-icon-image:before {
+.@{prefix}-icon-building-5:before {
   content: '\E07A';
 }
 
-.@{prefix}-icon-info-circle-filled:before {
+.@{prefix}-icon-building:before {
   content: '\E07B';
 }
 
-.@{prefix}-icon-info-circle:before {
+.@{prefix}-icon-bulletpoint:before {
   content: '\E07C';
 }
 
-.@{prefix}-icon-internet:before {
+.@{prefix}-icon-button:before {
   content: '\E07D';
 }
 
-.@{prefix}-icon-jump:before {
+.@{prefix}-icon-cabbage:before {
   content: '\E07E';
 }
 
-.@{prefix}-icon-laptop:before {
+.@{prefix}-icon-cake:before {
   content: '\E07F';
 }
 
-.@{prefix}-icon-layers:before {
+.@{prefix}-icon-calculation-1:before {
   content: '\E080';
 }
 
-.@{prefix}-icon-link-unlink:before {
+.@{prefix}-icon-calculation:before {
   content: '\E081';
 }
 
-.@{prefix}-icon-link:before {
+.@{prefix}-icon-calculator-1:before {
   content: '\E082';
 }
 
-.@{prefix}-icon-loading:before {
+.@{prefix}-icon-calculator:before {
   content: '\E083';
 }
 
-.@{prefix}-icon-location:before {
+.@{prefix}-icon-calendar-1:before {
   content: '\E084';
 }
 
-.@{prefix}-icon-lock-off:before {
+.@{prefix}-icon-calendar-2:before {
   content: '\E085';
 }
 
-.@{prefix}-icon-lock-on:before {
+.@{prefix}-icon-calendar-edit:before {
   content: '\E086';
 }
 
-.@{prefix}-icon-login:before {
+.@{prefix}-icon-calendar-event:before {
   content: '\E087';
 }
 
-.@{prefix}-icon-logo-android:before {
+.@{prefix}-icon-calendar:before {
   content: '\E088';
 }
 
-.@{prefix}-icon-logo-apple-filled:before {
+.@{prefix}-icon-call-1:before {
   content: '\E089';
 }
 
-.@{prefix}-icon-logo-apple:before {
+.@{prefix}-icon-call-cancel:before {
   content: '\E08A';
 }
 
-.@{prefix}-icon-logo-chrome-filled:before {
+.@{prefix}-icon-call-forwarded:before {
   content: '\E08B';
 }
 
-.@{prefix}-icon-logo-chrome:before {
+.@{prefix}-icon-call-incoming:before {
   content: '\E08C';
 }
 
-.@{prefix}-icon-logo-codepen:before {
+.@{prefix}-icon-call-off:before {
   content: '\E08D';
 }
 
-.@{prefix}-icon-logo-github-filled:before {
+.@{prefix}-icon-call:before {
   content: '\E08E';
 }
 
-.@{prefix}-icon-logo-github:before {
+.@{prefix}-icon-calm-1:before {
   content: '\E08F';
 }
 
-.@{prefix}-icon-logo-ie-filled:before {
+.@{prefix}-icon-calm:before {
   content: '\E090';
 }
 
-.@{prefix}-icon-logo-ie:before {
+.@{prefix}-icon-camera-1:before {
   content: '\E091';
 }
 
-.@{prefix}-icon-logo-qq:before {
+.@{prefix}-icon-camera-2:before {
   content: '\E092';
 }
 
-.@{prefix}-icon-logo-wechat:before {
+.@{prefix}-icon-camera-off:before {
   content: '\E093';
 }
 
-.@{prefix}-icon-logo-wecom:before {
+.@{prefix}-icon-camera:before {
   content: '\E094';
 }
 
-.@{prefix}-icon-logo-windows-filled:before {
+.@{prefix}-icon-candy:before {
   content: '\E095';
 }
 
-.@{prefix}-icon-logo-windows:before {
+.@{prefix}-icon-card:before {
   content: '\E096';
 }
 
-.@{prefix}-icon-logout:before {
+.@{prefix}-icon-cardmembership:before {
   content: '\E097';
 }
 
-.@{prefix}-icon-mail:before {
+.@{prefix}-icon-caret-down-small:before {
   content: '\E098';
 }
 
-.@{prefix}-icon-menu-fold:before {
+.@{prefix}-icon-caret-down:before {
   content: '\E099';
 }
 
-.@{prefix}-icon-menu-unfold:before {
+.@{prefix}-icon-caret-left-small:before {
   content: '\E09A';
 }
 
-.@{prefix}-icon-minus-circle-filled:before {
+.@{prefix}-icon-caret-left:before {
   content: '\E09B';
 }
 
-.@{prefix}-icon-minus-circle:before {
+.@{prefix}-icon-caret-right-small:before {
   content: '\E09C';
 }
 
-.@{prefix}-icon-minus-rectangle-filled:before {
+.@{prefix}-icon-caret-right:before {
   content: '\E09D';
 }
 
-.@{prefix}-icon-minus-rectangle:before {
+.@{prefix}-icon-caret-up-small:before {
   content: '\E09E';
 }
 
-.@{prefix}-icon-mirror:before {
+.@{prefix}-icon-caret-up:before {
   content: '\E09F';
 }
 
-.@{prefix}-icon-mobile-vibrate:before {
+.@{prefix}-icon-cart-add:before {
   content: '\E0A0';
 }
 
-.@{prefix}-icon-mobile:before {
+.@{prefix}-icon-cart:before {
   content: '\E0A1';
 }
 
-.@{prefix}-icon-money-circle:before {
+.@{prefix}-icon-cast:before {
   content: '\E0A2';
 }
 
-.@{prefix}-icon-more:before {
+.@{prefix}-icon-castle-1:before {
   content: '\E0A3';
 }
 
-.@{prefix}-icon-move:before {
+.@{prefix}-icon-castle-2:before {
   content: '\E0A4';
 }
 
-.@{prefix}-icon-next:before {
+.@{prefix}-icon-castle-3:before {
   content: '\E0A5';
 }
 
-.@{prefix}-icon-notification-filled:before {
+.@{prefix}-icon-castle-4:before {
   content: '\E0A6';
 }
 
-.@{prefix}-icon-notification:before {
+.@{prefix}-icon-castle-5:before {
   content: '\E0A7';
 }
 
-.@{prefix}-icon-order-adjustment-column:before {
+.@{prefix}-icon-castle-6:before {
   content: '\E0A8';
 }
 
-.@{prefix}-icon-order-ascending:before {
+.@{prefix}-icon-castle-7:before {
   content: '\E0A9';
 }
 
-.@{prefix}-icon-order-descending:before {
+.@{prefix}-icon-castle:before {
   content: '\E0AA';
 }
 
-.@{prefix}-icon-page-first:before {
+.@{prefix}-icon-cat:before {
   content: '\E0AB';
 }
 
-.@{prefix}-icon-page-last:before {
+.@{prefix}-icon-catalog:before {
   content: '\E0AC';
 }
 
-.@{prefix}-icon-pause-circle-filled:before {
+.@{prefix}-icon-cd:before {
   content: '\E0AD';
 }
 
-.@{prefix}-icon-photo:before {
+.@{prefix}-icon-celsius:before {
   content: '\E0AE';
 }
 
-.@{prefix}-icon-pin-filled:before {
+.@{prefix}-icon-center-focus-strong:before {
   content: '\E0AF';
 }
 
-.@{prefix}-icon-pin:before {
+.@{prefix}-icon-centimeter:before {
   content: '\E0B0';
 }
 
-.@{prefix}-icon-play-circle-filled:before {
+.@{prefix}-icon-certificate-1:before {
   content: '\E0B1';
 }
 
-.@{prefix}-icon-play-circle-stroke:before {
+.@{prefix}-icon-certificate:before {
   content: '\E0B2';
 }
 
-.@{prefix}-icon-play-circle:before {
+.@{prefix}-icon-chart-3d:before {
   content: '\E0B3';
 }
 
-.@{prefix}-icon-play:before {
+.@{prefix}-icon-chart-add:before {
   content: '\E0B4';
 }
 
-.@{prefix}-icon-poweroff:before {
+.@{prefix}-icon-chart-analytics:before {
   content: '\E0B5';
 }
 
-.@{prefix}-icon-precise-monitor:before {
+.@{prefix}-icon-chart-area-multi:before {
   content: '\E0B6';
 }
 
-.@{prefix}-icon-previous:before {
+.@{prefix}-icon-chart-area:before {
   content: '\E0B7';
 }
 
-.@{prefix}-icon-print:before {
+.@{prefix}-icon-chart-bar:before {
   content: '\E0B8';
 }
 
-.@{prefix}-icon-qrcode:before {
+.@{prefix}-icon-chart-bubble:before {
   content: '\E0B9';
 }
 
-.@{prefix}-icon-queue:before {
+.@{prefix}-icon-chart-colum:before {
   content: '\E0BA';
 }
 
-.@{prefix}-icon-rectangle:before {
+.@{prefix}-icon-chart-combo:before {
   content: '\E0BB';
 }
 
-.@{prefix}-icon-refresh:before {
+.@{prefix}-icon-chart-line-data-1:before {
   content: '\E0BC';
 }
 
-.@{prefix}-icon-relativity:before {
+.@{prefix}-icon-chart-line-data:before {
   content: '\E0BD';
 }
 
-.@{prefix}-icon-remove:before {
+.@{prefix}-icon-chart-line-multi:before {
   content: '\E0BE';
 }
 
-.@{prefix}-icon-rollback:before {
+.@{prefix}-icon-chart-line:before {
   content: '\E0BF';
 }
 
-.@{prefix}-icon-rollfront:before {
+.@{prefix}-icon-chart-maximum:before {
   content: '\E0C0';
 }
 
-.@{prefix}-icon-root-list:before {
+.@{prefix}-icon-chart-median:before {
   content: '\E0C1';
 }
 
-.@{prefix}-icon-rotation:before {
+.@{prefix}-icon-chart-minimum:before {
   content: '\E0C2';
 }
 
-.@{prefix}-icon-round:before {
+.@{prefix}-icon-chart-pie:before {
   content: '\E0C3';
 }
 
-.@{prefix}-icon-save:before {
+.@{prefix}-icon-chart-radar:before {
   content: '\E0C4';
 }
 
-.@{prefix}-icon-scan:before {
+.@{prefix}-icon-chart-radial:before {
   content: '\E0C5';
 }
 
-.@{prefix}-icon-search:before {
+.@{prefix}-icon-chart-ring-1:before {
   content: '\E0C6';
 }
 
-.@{prefix}-icon-secured:before {
+.@{prefix}-icon-chart-ring:before {
   content: '\E0C7';
 }
 
-.@{prefix}-icon-server:before {
+.@{prefix}-icon-chart-scatter:before {
   content: '\E0C8';
 }
 
-.@{prefix}-icon-service:before {
+.@{prefix}-icon-chart-stacked:before {
   content: '\E0C9';
 }
 
-.@{prefix}-icon-setting:before {
+.@{prefix}-icon-chart:before {
   content: '\E0CA';
 }
 
-.@{prefix}-icon-share:before {
+.@{prefix}-icon-chat-add:before {
   content: '\E0CB';
 }
 
-.@{prefix}-icon-shop:before {
+.@{prefix}-icon-chat-bubble-1:before {
   content: '\E0CC';
 }
 
-.@{prefix}-icon-slash:before {
+.@{prefix}-icon-chat-bubble-add:before {
   content: '\E0CD';
 }
 
-.@{prefix}-icon-sound:before {
+.@{prefix}-icon-chat-bubble-error:before {
   content: '\E0CE';
 }
 
-.@{prefix}-icon-star-filled:before {
+.@{prefix}-icon-chat-bubble-help:before {
   content: '\E0CF';
 }
 
-.@{prefix}-icon-star:before {
+.@{prefix}-icon-chat-bubble-history:before {
   content: '\E0D0';
 }
 
-.@{prefix}-icon-stop-circle-1:before {
+.@{prefix}-icon-chat-bubble-locked:before {
   content: '\E0D1';
 }
 
-.@{prefix}-icon-stop-circle-filled:before {
+.@{prefix}-icon-chat-bubble-smile:before {
   content: '\E0D2';
 }
 
-.@{prefix}-icon-stop-circle:before {
+.@{prefix}-icon-chat-bubble:before {
   content: '\E0D3';
 }
 
-.@{prefix}-icon-stop:before {
+.@{prefix}-icon-chat-checked:before {
   content: '\E0D4';
 }
 
-.@{prefix}-icon-swap-left:before {
+.@{prefix}-icon-chat-clear:before {
   content: '\E0D5';
 }
 
-.@{prefix}-icon-swap-right:before {
+.@{prefix}-icon-chat-double:before {
   content: '\E0D6';
 }
 
-.@{prefix}-icon-swap:before {
+.@{prefix}-icon-chat-error:before {
   content: '\E0D7';
 }
 
-.@{prefix}-icon-thumb-down:before {
+.@{prefix}-icon-chat-heart:before {
   content: '\E0D8';
 }
 
-.@{prefix}-icon-thumb-up:before {
+.@{prefix}-icon-chat-message:before {
   content: '\E0D9';
 }
 
-.@{prefix}-icon-time-filled:before {
+.@{prefix}-icon-chat-off:before {
   content: '\E0DA';
 }
 
-.@{prefix}-icon-time:before {
+.@{prefix}-icon-chat-poll:before {
   content: '\E0DB';
 }
 
-.@{prefix}-icon-tips:before {
+.@{prefix}-icon-chat-setting:before {
   content: '\E0DC';
 }
 
-.@{prefix}-icon-tools:before {
+.@{prefix}-icon-chat:before {
   content: '\E0DD';
 }
 
-.@{prefix}-icon-translate-1:before {
+.@{prefix}-icon-check-circle-filled:before {
   content: '\E0DE';
 }
 
+.@{prefix}-icon-check-circle:before {
+  content: '\E0DF';
+}
+
+.@{prefix}-icon-check-double:before {
+  content: '\E0E0';
+}
+
+.@{prefix}-icon-check-rectangle-filled:before {
+  content: '\E0E1';
+}
+
+.@{prefix}-icon-check-rectangle:before {
+  content: '\E0E2';
+}
+
+.@{prefix}-icon-check:before {
+  content: '\E0E3';
+}
+
+.@{prefix}-icon-cheese:before {
+  content: '\E0E4';
+}
+
+.@{prefix}-icon-cherry:before {
+  content: '\E0E5';
+}
+
+.@{prefix}-icon-chevron-down-circle:before {
+  content: '\E0E6';
+}
+
+.@{prefix}-icon-chevron-down-double-s:before {
+  content: '\E0E7';
+}
+
+.@{prefix}-icon-chevron-down-double:before {
+  content: '\E0E8';
+}
+
+.@{prefix}-icon-chevron-down-rectangle:before {
+  content: '\E0E9';
+}
+
+.@{prefix}-icon-chevron-down-s:before {
+  content: '\E0EA';
+}
+
+.@{prefix}-icon-chevron-down:before {
+  content: '\E0EB';
+}
+
+.@{prefix}-icon-chevron-left-circle:before {
+  content: '\E0EC';
+}
+
+.@{prefix}-icon-chevron-left-double-s:before {
+  content: '\E0ED';
+}
+
+.@{prefix}-icon-chevron-left-double:before {
+  content: '\E0EE';
+}
+
+.@{prefix}-icon-chevron-left-rectangle:before {
+  content: '\E0EF';
+}
+
+.@{prefix}-icon-chevron-left-s:before {
+  content: '\E0F0';
+}
+
+.@{prefix}-icon-chevron-left:before {
+  content: '\E0F1';
+}
+
+.@{prefix}-icon-chevron-right-circle:before {
+  content: '\E0F2';
+}
+
+.@{prefix}-icon-chevron-right-double-s:before {
+  content: '\E0F3';
+}
+
+.@{prefix}-icon-chevron-right-double:before {
+  content: '\E0F4';
+}
+
+.@{prefix}-icon-chevron-right-rectangle:before {
+  content: '\E0F5';
+}
+
+.@{prefix}-icon-chevron-right-s:before {
+  content: '\E0F6';
+}
+
+.@{prefix}-icon-chevron-right:before {
+  content: '\E0F7';
+}
+
+.@{prefix}-icon-chevron-up-circle:before {
+  content: '\E0F8';
+}
+
+.@{prefix}-icon-chevron-up-double-s:before {
+  content: '\E0F9';
+}
+
+.@{prefix}-icon-chevron-up-double:before {
+  content: '\E0FA';
+}
+
+.@{prefix}-icon-chevron-up-rectangle:before {
+  content: '\E0FB';
+}
+
+.@{prefix}-icon-chevron-up-s:before {
+  content: '\E0FC';
+}
+
+.@{prefix}-icon-chevron-up:before {
+  content: '\E0FD';
+}
+
+.@{prefix}-icon-chicken:before {
+  content: '\E0FE';
+}
+
+.@{prefix}-icon-chili:before {
+  content: '\E0FF';
+}
+
+.@{prefix}-icon-chimney-1:before {
+  content: '\E100';
+}
+
+.@{prefix}-icon-chimney-2:before {
+  content: '\E101';
+}
+
+.@{prefix}-icon-chimney:before {
+  content: '\E102';
+}
+
+.@{prefix}-icon-chinese-cabbage:before {
+  content: '\E103';
+}
+
+.@{prefix}-icon-church:before {
+  content: '\E104';
+}
+
+.@{prefix}-icon-circle:before {
+  content: '\E105';
+}
+
+.@{prefix}-icon-city-1:before {
+  content: '\E106';
+}
+
+.@{prefix}-icon-city-10:before {
+  content: '\E107';
+}
+
+.@{prefix}-icon-city-11:before {
+  content: '\E108';
+}
+
+.@{prefix}-icon-city-12:before {
+  content: '\E109';
+}
+
+.@{prefix}-icon-city-13:before {
+  content: '\E10A';
+}
+
+.@{prefix}-icon-city-14:before {
+  content: '\E10B';
+}
+
+.@{prefix}-icon-city-15:before {
+  content: '\E10C';
+}
+
+.@{prefix}-icon-city-2:before {
+  content: '\E10D';
+}
+
+.@{prefix}-icon-city-3:before {
+  content: '\E10E';
+}
+
+.@{prefix}-icon-city-4:before {
+  content: '\E10F';
+}
+
+.@{prefix}-icon-city-5:before {
+  content: '\E110';
+}
+
+.@{prefix}-icon-city-6:before {
+  content: '\E111';
+}
+
+.@{prefix}-icon-city-7:before {
+  content: '\E112';
+}
+
+.@{prefix}-icon-city-8:before {
+  content: '\E113';
+}
+
+.@{prefix}-icon-city-9:before {
+  content: '\E114';
+}
+
+.@{prefix}-icon-city-ancient-1:before {
+  content: '\E115';
+}
+
+.@{prefix}-icon-city-ancient-2:before {
+  content: '\E116';
+}
+
+.@{prefix}-icon-city-ancient:before {
+  content: '\E117';
+}
+
+.@{prefix}-icon-city:before {
+  content: '\E118';
+}
+
+.@{prefix}-icon-clear-formatting-1:before {
+  content: '\E119';
+}
+
+.@{prefix}-icon-clear-formatting:before {
+  content: '\E11A';
+}
+
+.@{prefix}-icon-clear:before {
+  content: '\E11B';
+}
+
+.@{prefix}-icon-close-circle-filled:before {
+  content: '\E11C';
+}
+
+.@{prefix}-icon-close-circle:before {
+  content: '\E11D';
+}
+
+.@{prefix}-icon-close-octagon:before {
+  content: '\E11E';
+}
+
+.@{prefix}-icon-close-rectangle:before {
+  content: '\E11F';
+}
+
+.@{prefix}-icon-close:before {
+  content: '\E120';
+}
+
+.@{prefix}-icon-cloud-download:before {
+  content: '\E121';
+}
+
+.@{prefix}-icon-cloud-upload:before {
+  content: '\E122';
+}
+
+.@{prefix}-icon-cloud:before {
+  content: '\E123';
+}
+
+.@{prefix}-icon-cloudy-day:before {
+  content: '\E124';
+}
+
+.@{prefix}-icon-cloudy-night-rain:before {
+  content: '\E125';
+}
+
+.@{prefix}-icon-cloudy-night:before {
+  content: '\E126';
+}
+
+.@{prefix}-icon-cloudy-rain:before {
+  content: '\E127';
+}
+
+.@{prefix}-icon-cloudy-sunny:before {
+  content: '\E128';
+}
+
+.@{prefix}-icon-code-1:before {
+  content: '\E129';
+}
+
+.@{prefix}-icon-code-off:before {
+  content: '\E12A';
+}
+
+.@{prefix}-icon-code:before {
+  content: '\E12B';
+}
+
+.@{prefix}-icon-cola:before {
+  content: '\E12C';
+}
+
+.@{prefix}-icon-collage:before {
+  content: '\E12D';
+}
+
+.@{prefix}-icon-collection:before {
+  content: '\E12E';
+}
+
+.@{prefix}-icon-color-invert:before {
+  content: '\E12F';
+}
+
+.@{prefix}-icon-combination:before {
+  content: '\E130';
+}
+
+.@{prefix}-icon-command:before {
+  content: '\E131';
+}
+
+.@{prefix}-icon-compass-1:before {
+  content: '\E132';
+}
+
+.@{prefix}-icon-compass:before {
+  content: '\E133';
+}
+
+.@{prefix}-icon-component-breadcrumb:before {
+  content: '\E134';
+}
+
+.@{prefix}-icon-component-checkbox:before {
+  content: '\E135';
+}
+
+.@{prefix}-icon-component-divider-horizontal:before {
+  content: '\E136';
+}
+
+.@{prefix}-icon-component-divider-vertical:before {
+  content: '\E137';
+}
+
+.@{prefix}-icon-component-dropdown:before {
+  content: '\E138';
+}
+
+.@{prefix}-icon-component-grid:before {
+  content: '\E139';
+}
+
+.@{prefix}-icon-component-input:before {
+  content: '\E13A';
+}
+
+.@{prefix}-icon-component-layout:before {
+  content: '\E13B';
+}
+
+.@{prefix}-icon-component-radio:before {
+  content: '\E13C';
+}
+
+.@{prefix}-icon-component-space:before {
+  content: '\E13D';
+}
+
+.@{prefix}-icon-component-steps:before {
+  content: '\E13E';
+}
+
+.@{prefix}-icon-component-switch:before {
+  content: '\E13F';
+}
+
+.@{prefix}-icon-constraint:before {
+  content: '\E140';
+}
+
+.@{prefix}-icon-contrast-1:before {
+  content: '\E141';
+}
+
+.@{prefix}-icon-contrast:before {
+  content: '\E142';
+}
+
+.@{prefix}-icon-control-platform:before {
+  content: '\E143';
+}
+
+.@{prefix}-icon-cooperate:before {
+  content: '\E144';
+}
+
+.@{prefix}-icon-coordinate-system:before {
+  content: '\E145';
+}
+
+.@{prefix}-icon-copy:before {
+  content: '\E146';
+}
+
+.@{prefix}-icon-copyright:before {
+  content: '\E147';
+}
+
+.@{prefix}-icon-corn:before {
+  content: '\E148';
+}
+
+.@{prefix}-icon-coupon:before {
+  content: '\E149';
+}
+
+.@{prefix}-icon-course:before {
+  content: '\E14A';
+}
+
+.@{prefix}-icon-cpu:before {
+  content: '\E14B';
+}
+
+.@{prefix}-icon-crack:before {
+  content: '\E14C';
+}
+
+.@{prefix}-icon-creditcard-add:before {
+  content: '\E14D';
+}
+
+.@{prefix}-icon-creditcard-off:before {
+  content: '\E14E';
+}
+
+.@{prefix}-icon-creditcard:before {
+  content: '\E14F';
+}
+
+.@{prefix}-icon-crooked-smile:before {
+  content: '\E150';
+}
+
+.@{prefix}-icon-cry-and-laugh:before {
+  content: '\E151';
+}
+
+.@{prefix}-icon-cry-loudly:before {
+  content: '\E152';
+}
+
+.@{prefix}-icon-css3:before {
+  content: '\E153';
+}
+
+.@{prefix}-icon-cucumber:before {
+  content: '\E154';
+}
+
+.@{prefix}-icon-currency-exchange:before {
+  content: '\E155';
+}
+
+.@{prefix}-icon-cursor:before {
+  content: '\E156';
+}
+
+.@{prefix}-icon-curtain:before {
+  content: '\E157';
+}
+
+.@{prefix}-icon-curve:before {
+  content: '\E158';
+}
+
+.@{prefix}-icon-cut-1:before {
+  content: '\E159';
+}
+
+.@{prefix}-icon-cut:before {
+  content: '\E15A';
+}
+
+.@{prefix}-icon-dam-1:before {
+  content: '\E15B';
+}
+
+.@{prefix}-icon-dam-2:before {
+  content: '\E15C';
+}
+
+.@{prefix}-icon-dam-3:before {
+  content: '\E15D';
+}
+
+.@{prefix}-icon-dam-4:before {
+  content: '\E15E';
+}
+
+.@{prefix}-icon-dam-5:before {
+  content: '\E15F';
+}
+
+.@{prefix}-icon-dam-6:before {
+  content: '\E160';
+}
+
+.@{prefix}-icon-dam-7:before {
+  content: '\E161';
+}
+
+.@{prefix}-icon-dam:before {
+  content: '\E162';
+}
+
+.@{prefix}-icon-dart-board:before {
+  content: '\E163';
+}
+
+.@{prefix}-icon-dashboard-1:before {
+  content: '\E164';
+}
+
+.@{prefix}-icon-dashboard:before {
+  content: '\E165';
+}
+
+.@{prefix}-icon-data-base:before {
+  content: '\E166';
+}
+
+.@{prefix}-icon-data-checked:before {
+  content: '\E167';
+}
+
+.@{prefix}-icon-data-display:before {
+  content: '\E168';
+}
+
+.@{prefix}-icon-data-error:before {
+  content: '\E169';
+}
+
+.@{prefix}-icon-data-search:before {
+  content: '\E16A';
+}
+
+.@{prefix}-icon-data:before {
+  content: '\E16B';
+}
+
+.@{prefix}-icon-delete-1:before {
+  content: '\E16C';
+}
+
+.@{prefix}-icon-delete-time:before {
+  content: '\E16D';
+}
+
+.@{prefix}-icon-delete:before {
+  content: '\E16E';
+}
+
+.@{prefix}-icon-delta:before {
+  content: '\E16F';
+}
+
+.@{prefix}-icon-depressed:before {
+  content: '\E170';
+}
+
+.@{prefix}-icon-desktop-1:before {
+  content: '\E171';
+}
+
+.@{prefix}-icon-desktop:before {
+  content: '\E172';
+}
+
+.@{prefix}-icon-despise:before {
+  content: '\E173';
+}
+
+.@{prefix}-icon-device:before {
+  content: '\E174';
+}
+
+.@{prefix}-icon-discount-filled:before {
+  content: '\E175';
+}
+
+.@{prefix}-icon-discount:before {
+  content: '\E176';
+}
+
+.@{prefix}-icon-dissatisfaction:before {
+  content: '\E177';
+}
+
+.@{prefix}-icon-divide:before {
+  content: '\E178';
+}
+
+.@{prefix}-icon-dividers-1:before {
+  content: '\E179';
+}
+
+.@{prefix}-icon-dividers:before {
+  content: '\E17A';
+}
+
+.@{prefix}-icon-doge:before {
+  content: '\E17B';
+}
+
+.@{prefix}-icon-double-storey:before {
+  content: '\E17C';
+}
+
+.@{prefix}-icon-download-1:before {
+  content: '\E17D';
+}
+
+.@{prefix}-icon-download:before {
+  content: '\E17E';
+}
+
+.@{prefix}-icon-downscale:before {
+  content: '\E17F';
+}
+
+.@{prefix}-icon-drag-drop:before {
+  content: '\E180';
+}
+
+.@{prefix}-icon-drag-move:before {
+  content: '\E181';
+}
+
+.@{prefix}-icon-drink:before {
+  content: '\E182';
+}
+
+.@{prefix}-icon-drumstick:before {
+  content: '\E183';
+}
+
+.@{prefix}-icon-dv:before {
+  content: '\E184';
+}
+
+.@{prefix}-icon-dvd:before {
+  content: '\E185';
+}
+
+.@{prefix}-icon-earphone:before {
+  content: '\E186';
+}
+
+.@{prefix}-icon-earth:before {
+  content: '\E187';
+}
+
+.@{prefix}-icon-edit-1:before {
+  content: '\E188';
+}
+
+.@{prefix}-icon-edit-2:before {
+  content: '\E189';
+}
+
+.@{prefix}-icon-edit-off:before {
+  content: '\E18A';
+}
+
+.@{prefix}-icon-edit:before {
+  content: '\E18B';
+}
+
+.@{prefix}-icon-education:before {
+  content: '\E18C';
+}
+
+.@{prefix}-icon-eggplant:before {
+  content: '\E18D';
+}
+
+.@{prefix}-icon-ellipsis:before {
+  content: '\E18E';
+}
+
+.@{prefix}-icon-emo-emotional:before {
+  content: '\E18F';
+}
+
+.@{prefix}-icon-enter:before {
+  content: '\E190';
+}
+
+.@{prefix}-icon-equal:before {
+  content: '\E191';
+}
+
+.@{prefix}-icon-error-circle-filled:before {
+  content: '\E192';
+}
+
+.@{prefix}-icon-error-circle:before {
+  content: '\E193';
+}
+
+.@{prefix}-icon-error-triangle:before {
+  content: '\E194';
+}
+
+.@{prefix}-icon-error:before {
+  content: '\E195';
+}
+
+.@{prefix}-icon-excited-1:before {
+  content: '\E196';
+}
+
+.@{prefix}-icon-excited:before {
+  content: '\E197';
+}
+
+.@{prefix}-icon-expand-horizontal:before {
+  content: '\E198';
+}
+
+.@{prefix}-icon-expand-vertical:before {
+  content: '\E199';
+}
+
+.@{prefix}-icon-explore-off:before {
+  content: '\E19A';
+}
+
+.@{prefix}-icon-explore:before {
+  content: '\E19B';
+}
+
+.@{prefix}-icon-exposure:before {
+  content: '\E19C';
+}
+
+.@{prefix}-icon-extension-off:before {
+  content: '\E19D';
+}
+
+.@{prefix}-icon-extension:before {
+  content: '\E19E';
+}
+
+.@{prefix}-icon-face-retouching:before {
+  content: '\E19F';
+}
+
+.@{prefix}-icon-fact-check:before {
+  content: '\E1A0';
+}
+
+.@{prefix}-icon-fahrenheit-scale:before {
+  content: '\E1A1';
+}
+
+.@{prefix}-icon-feel-at-ease:before {
+  content: '\E1A2';
+}
+
+.@{prefix}-icon-ferocious:before {
+  content: '\E1A3';
+}
+
+.@{prefix}-icon-ferris-wheel:before {
+  content: '\E1A4';
+}
+
+.@{prefix}-icon-file-1:before {
+  content: '\E1A5';
+}
+
+.@{prefix}-icon-file-add-1:before {
+  content: '\E1A6';
+}
+
+.@{prefix}-icon-file-add:before {
+  content: '\E1A7';
+}
+
+.@{prefix}-icon-file-attachment:before {
+  content: '\E1A8';
+}
+
+.@{prefix}-icon-file-blocked:before {
+  content: '\E1A9';
+}
+
+.@{prefix}-icon-file-code-1:before {
+  content: '\E1AA';
+}
+
+.@{prefix}-icon-file-code:before {
+  content: '\E1AB';
+}
+
+.@{prefix}-icon-file-copy:before {
+  content: '\E1AC';
+}
+
+.@{prefix}-icon-file-download:before {
+  content: '\E1AD';
+}
+
+.@{prefix}-icon-file-excel:before {
+  content: '\E1AE';
+}
+
+.@{prefix}-icon-file-export:before {
+  content: '\E1AF';
+}
+
+.@{prefix}-icon-file-icon:before {
+  content: '\E1B0';
+}
+
+.@{prefix}-icon-file-image:before {
+  content: '\E1B1';
+}
+
+.@{prefix}-icon-file-import:before {
+  content: '\E1B2';
+}
+
+.@{prefix}-icon-file-locked:before {
+  content: '\E1B3';
+}
+
+.@{prefix}-icon-file-minus:before {
+  content: '\E1B4';
+}
+
+.@{prefix}-icon-file-music:before {
+  content: '\E1B5';
+}
+
+.@{prefix}-icon-file-onenote:before {
+  content: '\E1B6';
+}
+
+.@{prefix}-icon-file-outlook:before {
+  content: '\E1B7';
+}
+
+.@{prefix}-icon-file-paste:before {
+  content: '\E1B8';
+}
+
+.@{prefix}-icon-file-pdf:before {
+  content: '\E1B9';
+}
+
+.@{prefix}-icon-file-powerpoint:before {
+  content: '\E1BA';
+}
+
+.@{prefix}-icon-file-restore:before {
+  content: '\E1BB';
+}
+
+.@{prefix}-icon-file-safety:before {
+  content: '\E1BC';
+}
+
+.@{prefix}-icon-file-search:before {
+  content: '\E1BD';
+}
+
+.@{prefix}-icon-file-setting:before {
+  content: '\E1BE';
+}
+
+.@{prefix}-icon-file-teams:before {
+  content: '\E1BF';
+}
+
+.@{prefix}-icon-file-unknown:before {
+  content: '\E1C0';
+}
+
+.@{prefix}-icon-file-unlocked:before {
+  content: '\E1C1';
+}
+
+.@{prefix}-icon-file-word:before {
+  content: '\E1C2';
+}
+
+.@{prefix}-icon-file-zip:before {
+  content: '\E1C3';
+}
+
+.@{prefix}-icon-file:before {
+  content: '\E1C4';
+}
+
+.@{prefix}-icon-fill-color-1:before {
+  content: '\E1C5';
+}
+
+.@{prefix}-icon-fill-color:before {
+  content: '\E1C6';
+}
+
+.@{prefix}-icon-film-1:before {
+  content: '\E1C7';
+}
+
+.@{prefix}-icon-film:before {
+  content: '\E1C8';
+}
+
+.@{prefix}-icon-filter-1:before {
+  content: '\E1C9';
+}
+
+.@{prefix}-icon-filter-2:before {
+  content: '\E1CA';
+}
+
+.@{prefix}-icon-filter-3:before {
+  content: '\E1CB';
+}
+
+.@{prefix}-icon-filter-clear:before {
+  content: '\E1CC';
+}
+
+.@{prefix}-icon-filter-off:before {
+  content: '\E1CD';
+}
+
+.@{prefix}-icon-filter:before {
+  content: '\E1CE';
+}
+
+.@{prefix}-icon-fingerprint-1:before {
+  content: '\E1CF';
+}
+
+.@{prefix}-icon-fingerprint-2:before {
+  content: '\E1D0';
+}
+
+.@{prefix}-icon-fingerprint-3:before {
+  content: '\E1D1';
+}
+
+.@{prefix}-icon-fingerprint:before {
+  content: '\E1D2';
+}
+
+.@{prefix}-icon-fish:before {
+  content: '\E1D3';
+}
+
+.@{prefix}-icon-flag-1:before {
+  content: '\E1D4';
+}
+
+.@{prefix}-icon-flag-2:before {
+  content: '\E1D5';
+}
+
+.@{prefix}-icon-flag-3:before {
+  content: '\E1D6';
+}
+
+.@{prefix}-icon-flag-4:before {
+  content: '\E1D7';
+}
+
+.@{prefix}-icon-flag:before {
+  content: '\E1D8';
+}
+
+.@{prefix}-icon-flashlight:before {
+  content: '\E1D9';
+}
+
+.@{prefix}-icon-flight-landing:before {
+  content: '\E1DA';
+}
+
+.@{prefix}-icon-flight-takeoff:before {
+  content: '\E1DB';
+}
+
+.@{prefix}-icon-flip-smiling-face:before {
+  content: '\E1DC';
+}
+
+.@{prefix}-icon-flip-to-back:before {
+  content: '\E1DD';
+}
+
+.@{prefix}-icon-flip-to-front:before {
+  content: '\E1DE';
+}
+
+.@{prefix}-icon-focus:before {
+  content: '\E1DF';
+}
+
+.@{prefix}-icon-fog-night:before {
+  content: '\E1E0';
+}
+
+.@{prefix}-icon-fog-sunny:before {
+  content: '\E1E1';
+}
+
+.@{prefix}-icon-fog:before {
+  content: '\E1E2';
+}
+
+.@{prefix}-icon-folder-1:before {
+  content: '\E1E3';
+}
+
+.@{prefix}-icon-folder-add-1:before {
+  content: '\E1E4';
+}
+
+.@{prefix}-icon-folder-add:before {
+  content: '\E1E5';
+}
+
+.@{prefix}-icon-folder-blocked:before {
+  content: '\E1E6';
+}
+
+.@{prefix}-icon-folder-details:before {
+  content: '\E1E7';
+}
+
+.@{prefix}-icon-folder-export:before {
+  content: '\E1E8';
+}
+
+.@{prefix}-icon-folder-import:before {
+  content: '\E1E9';
+}
+
+.@{prefix}-icon-folder-locked:before {
+  content: '\E1EA';
+}
+
+.@{prefix}-icon-folder-minus:before {
+  content: '\E1EB';
+}
+
+.@{prefix}-icon-folder-move:before {
+  content: '\E1EC';
+}
+
+.@{prefix}-icon-folder-off:before {
+  content: '\E1ED';
+}
+
+.@{prefix}-icon-folder-open-1:before {
+  content: '\E1EE';
+}
+
+.@{prefix}-icon-folder-open:before {
+  content: '\E1EF';
+}
+
+.@{prefix}-icon-folder-search:before {
+  content: '\E1F0';
+}
+
+.@{prefix}-icon-folder-setting:before {
+  content: '\E1F1';
+}
+
+.@{prefix}-icon-folder-shared:before {
+  content: '\E1F2';
+}
+
+.@{prefix}-icon-folder-unlocked:before {
+  content: '\E1F3';
+}
+
+.@{prefix}-icon-folder-zip:before {
+  content: '\E1F4';
+}
+
+.@{prefix}-icon-folder:before {
+  content: '\E1F5';
+}
+
+.@{prefix}-icon-forest:before {
+  content: '\E1F6';
+}
+
+.@{prefix}-icon-fork:before {
+  content: '\E1F7';
+}
+
+.@{prefix}-icon-form:before {
+  content: '\E1F8';
+}
+
+.@{prefix}-icon-format-horizontal-align-bottom:before {
+  content: '\E1F9';
+}
+
+.@{prefix}-icon-format-horizontal-align-center:before {
+  content: '\E1FA';
+}
+
+.@{prefix}-icon-format-horizontal-align-top:before {
+  content: '\E1FB';
+}
+
+.@{prefix}-icon-format-vertical-align-center:before {
+  content: '\E1FC';
+}
+
+.@{prefix}-icon-format-vertical-align-left:before {
+  content: '\E1FD';
+}
+
+.@{prefix}-icon-format-vertical-align-right:before {
+  content: '\E1FE';
+}
+
+.@{prefix}-icon-forward:before {
+  content: '\E1FF';
+}
+
+.@{prefix}-icon-frame-1:before {
+  content: '\E200';
+}
+
+.@{prefix}-icon-frame:before {
+  content: '\E201';
+}
+
+.@{prefix}-icon-fries:before {
+  content: '\E202';
+}
+
+.@{prefix}-icon-fullscreen-1:before {
+  content: '\E203';
+}
+
+.@{prefix}-icon-fullscreen-2:before {
+  content: '\E204';
+}
+
+.@{prefix}-icon-fullscreen-exit-1:before {
+  content: '\E205';
+}
+
+.@{prefix}-icon-fullscreen-exit:before {
+  content: '\E206';
+}
+
+.@{prefix}-icon-fullscreen:before {
+  content: '\E207';
+}
+
+.@{prefix}-icon-function-curve:before {
+  content: '\E208';
+}
+
+.@{prefix}-icon-functions-1:before {
+  content: '\E209';
+}
+
+.@{prefix}-icon-functions:before {
+  content: '\E20A';
+}
+
+.@{prefix}-icon-gamepad-1:before {
+  content: '\E20B';
+}
+
+.@{prefix}-icon-gamepad:before {
+  content: '\E20C';
+}
+
+.@{prefix}-icon-gamma:before {
+  content: '\E20D';
+}
+
+.@{prefix}-icon-garlic:before {
+  content: '\E20E';
+}
+
+.@{prefix}-icon-gender-female:before {
+  content: '\E20F';
+}
+
+.@{prefix}-icon-gender-male:before {
+  content: '\E210';
+}
+
+.@{prefix}-icon-gesture-applause:before {
+  content: '\E211';
+}
+
+.@{prefix}-icon-gesture-click:before {
+  content: '\E212';
+}
+
+.@{prefix}-icon-gesture-down:before {
+  content: '\E213';
+}
+
+.@{prefix}-icon-gesture-expansion:before {
+  content: '\E214';
+}
+
+.@{prefix}-icon-gesture-left-slip:before {
+  content: '\E215';
+}
+
+.@{prefix}-icon-gesture-left:before {
+  content: '\E216';
+}
+
+.@{prefix}-icon-gesture-pray-1:before {
+  content: '\E217';
+}
+
+.@{prefix}-icon-gesture-pray:before {
+  content: '\E218';
+}
+
+.@{prefix}-icon-gesture-press:before {
+  content: '\E219';
+}
+
+.@{prefix}-icon-gesture-ranslation-1:before {
+  content: '\E21A';
+}
+
+.@{prefix}-icon-gesture-ranslation:before {
+  content: '\E21B';
+}
+
+.@{prefix}-icon-gesture-right-slip:before {
+  content: '\E21C';
+}
+
+.@{prefix}-icon-gesture-right:before {
+  content: '\E21D';
+}
+
+.@{prefix}-icon-gesture-slide-up:before {
+  content: '\E21E';
+}
+
+.@{prefix}-icon-gesture-up-1:before {
+  content: '\E21F';
+}
+
+.@{prefix}-icon-gesture-up-2:before {
+  content: '\E220';
+}
+
+.@{prefix}-icon-gesture-up-and-down:before {
+  content: '\E221';
+}
+
+.@{prefix}-icon-gesture-up:before {
+  content: '\E222';
+}
+
+.@{prefix}-icon-gesture-wipe-down:before {
+  content: '\E223';
+}
+
+.@{prefix}-icon-gift:before {
+  content: '\E224';
+}
+
+.@{prefix}-icon-giggle:before {
+  content: '\E225';
+}
+
+.@{prefix}-icon-git-branch:before {
+  content: '\E226';
+}
+
+.@{prefix}-icon-git-commit:before {
+  content: '\E227';
+}
+
+.@{prefix}-icon-git-merge:before {
+  content: '\E228';
+}
+
+.@{prefix}-icon-git-pull-request:before {
+  content: '\E229';
+}
+
+.@{prefix}-icon-git-repository-commits:before {
+  content: '\E22A';
+}
+
+.@{prefix}-icon-git-repository-private:before {
+  content: '\E22B';
+}
+
+.@{prefix}-icon-git-repository:before {
+  content: '\E22C';
+}
+
+.@{prefix}-icon-gps:before {
+  content: '\E22D';
+}
+
+.@{prefix}-icon-grape:before {
+  content: '\E22E';
+}
+
+.@{prefix}-icon-greater-than-or-equal:before {
+  content: '\E22F';
+}
+
+.@{prefix}-icon-greater-than:before {
+  content: '\E230';
+}
+
+.@{prefix}-icon-green-onion:before {
+  content: '\E231';
+}
+
+.@{prefix}-icon-grid-add:before {
+  content: '\E232';
+}
+
+.@{prefix}-icon-grid-view:before {
+  content: '\E233';
+}
+
+.@{prefix}-icon-guitar:before {
+  content: '\E234';
+}
+
+.@{prefix}-icon-hamburger:before {
+  content: '\E235';
+}
+
+.@{prefix}-icon-happy:before {
+  content: '\E236';
+}
+
+.@{prefix}-icon-hard-disk-storage:before {
+  content: '\E237';
+}
+
+.@{prefix}-icon-hard-drive:before {
+  content: '\E238';
+}
+
+.@{prefix}-icon-hashtag:before {
+  content: '\E239';
+}
+
+.@{prefix}-icon-hd:before {
+  content: '\E23A';
+}
+
+.@{prefix}-icon-heart-filled:before {
+  content: '\E23B';
+}
+
+.@{prefix}-icon-heart:before {
+  content: '\E23C';
+}
+
+.@{prefix}-icon-help-circle-filled:before {
+  content: '\E23D';
+}
+
+.@{prefix}-icon-help-circle:before {
+  content: '\E23E';
+}
+
+.@{prefix}-icon-help-rectangle:before {
+  content: '\E23F';
+}
+
+.@{prefix}-icon-help:before {
+  content: '\E240';
+}
+
+.@{prefix}-icon-highlight-1:before {
+  content: '\E241';
+}
+
+.@{prefix}-icon-highlight:before {
+  content: '\E242';
+}
+
+.@{prefix}-icon-history-setting:before {
+  content: '\E243';
+}
+
+.@{prefix}-icon-history:before {
+  content: '\E244';
+}
+
+.@{prefix}-icon-home:before {
+  content: '\E245';
+}
+
+.@{prefix}-icon-hospital-1:before {
+  content: '\E246';
+}
+
+.@{prefix}-icon-hospital:before {
+  content: '\E247';
+}
+
+.@{prefix}-icon-hotspot-wave:before {
+  content: '\E248';
+}
+
+.@{prefix}-icon-hourglass:before {
+  content: '\E249';
+}
+
+.@{prefix}-icon-houses-1:before {
+  content: '\E24A';
+}
+
+.@{prefix}-icon-houses-2:before {
+  content: '\E24B';
+}
+
+.@{prefix}-icon-houses:before {
+  content: '\E24C';
+}
+
+.@{prefix}-icon-html5:before {
+  content: '\E24D';
+}
+
+.@{prefix}-icon-https:before {
+  content: '\E24E';
+}
+
+.@{prefix}-icon-ice-cream:before {
+  content: '\E24F';
+}
+
+.@{prefix}-icon-icon:before {
+  content: '\E250';
+}
+
+.@{prefix}-icon-image-1:before {
+  content: '\E251';
+}
+
+.@{prefix}-icon-image-add:before {
+  content: '\E252';
+}
+
+.@{prefix}-icon-image-edit:before {
+  content: '\E253';
+}
+
+.@{prefix}-icon-image-error:before {
+  content: '\E254';
+}
+
+.@{prefix}-icon-image-off:before {
+  content: '\E255';
+}
+
+.@{prefix}-icon-image-search:before {
+  content: '\E256';
+}
+
+.@{prefix}-icon-image:before {
+  content: '\E257';
+}
+
+.@{prefix}-icon-indent-left:before {
+  content: '\E258';
+}
+
+.@{prefix}-icon-indent-right:before {
+  content: '\E259';
+}
+
+.@{prefix}-icon-indicator:before {
+  content: '\E25A';
+}
+
+.@{prefix}-icon-info-circle-filled:before {
+  content: '\E25B';
+}
+
+.@{prefix}-icon-info-circle:before {
+  content: '\E25C';
+}
+
+.@{prefix}-icon-ink:before {
+  content: '\E25D';
+}
+
+.@{prefix}-icon-install-desktop:before {
+  content: '\E25E';
+}
+
+.@{prefix}-icon-install-mobile:before {
+  content: '\E25F';
+}
+
+.@{prefix}-icon-install:before {
+  content: '\E260';
+}
+
+.@{prefix}-icon-institution-checked:before {
+  content: '\E261';
+}
+
+.@{prefix}-icon-institution:before {
+  content: '\E262';
+}
+
+.@{prefix}-icon-internet:before {
+  content: '\E263';
+}
+
+.@{prefix}-icon-ipod:before {
+  content: '\E264';
+}
+
+.@{prefix}-icon-joyful:before {
+  content: '\E265';
+}
+
+.@{prefix}-icon-jump-off:before {
+  content: '\E266';
+}
+
+.@{prefix}-icon-jump:before {
+  content: '\E267';
+}
+
+.@{prefix}-icon-keyboard:before {
+  content: '\E268';
+}
+
+.@{prefix}-icon-laptop:before {
+  content: '\E269';
+}
+
+.@{prefix}-icon-layers:before {
+  content: '\E26A';
+}
+
+.@{prefix}-icon-layout:before {
+  content: '\E26B';
+}
+
+.@{prefix}-icon-leaderboard:before {
+  content: '\E26C';
+}
+
+.@{prefix}-icon-lemon-slice:before {
+  content: '\E26D';
+}
+
+.@{prefix}-icon-lemon:before {
+  content: '\E26E';
+}
+
+.@{prefix}-icon-less-than-or-equal:before {
+  content: '\E26F';
+}
+
+.@{prefix}-icon-less-than:before {
+  content: '\E270';
+}
+
+.@{prefix}-icon-letters-a:before {
+  content: '\E271';
+}
+
+.@{prefix}-icon-letters-b:before {
+  content: '\E272';
+}
+
+.@{prefix}-icon-letters-c:before {
+  content: '\E273';
+}
+
+.@{prefix}-icon-letters-d:before {
+  content: '\E274';
+}
+
+.@{prefix}-icon-letters-e:before {
+  content: '\E275';
+}
+
+.@{prefix}-icon-letters-f:before {
+  content: '\E276';
+}
+
+.@{prefix}-icon-letters-g:before {
+  content: '\E277';
+}
+
+.@{prefix}-icon-letters-h:before {
+  content: '\E278';
+}
+
+.@{prefix}-icon-letters-i:before {
+  content: '\E279';
+}
+
+.@{prefix}-icon-letters-j:before {
+  content: '\E27A';
+}
+
+.@{prefix}-icon-letters-k:before {
+  content: '\E27B';
+}
+
+.@{prefix}-icon-letters-l:before {
+  content: '\E27C';
+}
+
+.@{prefix}-icon-letters-m:before {
+  content: '\E27D';
+}
+
+.@{prefix}-icon-letters-n:before {
+  content: '\E27E';
+}
+
+.@{prefix}-icon-letters-o:before {
+  content: '\E27F';
+}
+
+.@{prefix}-icon-letters-p:before {
+  content: '\E280';
+}
+
+.@{prefix}-icon-letters-q:before {
+  content: '\E281';
+}
+
+.@{prefix}-icon-letters-r:before {
+  content: '\E282';
+}
+
+.@{prefix}-icon-letters-s:before {
+  content: '\E283';
+}
+
+.@{prefix}-icon-letters-t:before {
+  content: '\E284';
+}
+
+.@{prefix}-icon-letters-u:before {
+  content: '\E285';
+}
+
+.@{prefix}-icon-letters-v:before {
+  content: '\E286';
+}
+
+.@{prefix}-icon-letters-w:before {
+  content: '\E287';
+}
+
+.@{prefix}-icon-letters-x:before {
+  content: '\E288';
+}
+
+.@{prefix}-icon-letters-y:before {
+  content: '\E289';
+}
+
+.@{prefix}-icon-letters-z:before {
+  content: '\E28A';
+}
+
+.@{prefix}-icon-lightbulb-circle:before {
+  content: '\E28B';
+}
+
+.@{prefix}-icon-lightbulb:before {
+  content: '\E28C';
+}
+
+.@{prefix}-icon-lighthouse-1:before {
+  content: '\E28D';
+}
+
+.@{prefix}-icon-lighthouse-2:before {
+  content: '\E28E';
+}
+
+.@{prefix}-icon-lighthouse:before {
+  content: '\E28F';
+}
+
+.@{prefix}-icon-lighting-circle:before {
+  content: '\E290';
+}
+
+.@{prefix}-icon-line-height:before {
+  content: '\E291';
+}
+
+.@{prefix}-icon-link-1:before {
+  content: '\E292';
+}
+
+.@{prefix}-icon-link-unlink:before {
+  content: '\E293';
+}
+
+.@{prefix}-icon-link:before {
+  content: '\E294';
+}
+
+.@{prefix}-icon-liquor:before {
+  content: '\E295';
+}
+
+.@{prefix}-icon-list:before {
+  content: '\E296';
+}
+
+.@{prefix}-icon-load:before {
+  content: '\E297';
+}
+
+.@{prefix}-icon-loading:before {
+  content: '\E298';
+}
+
+.@{prefix}-icon-location-1:before {
+  content: '\E299';
+}
+
+.@{prefix}-icon-location-enlargement:before {
+  content: '\E29A';
+}
+
+.@{prefix}-icon-location-error:before {
+  content: '\E29B';
+}
+
+.@{prefix}-icon-location-parking-place:before {
+  content: '\E29C';
+}
+
+.@{prefix}-icon-location-reduction:before {
+  content: '\E29D';
+}
+
+.@{prefix}-icon-location-setting:before {
+  content: '\E29E';
+}
+
+.@{prefix}-icon-location:before {
+  content: '\E29F';
+}
+
+.@{prefix}-icon-lock-off:before {
+  content: '\E2A0';
+}
+
+.@{prefix}-icon-lock-on:before {
+  content: '\E2A1';
+}
+
+.@{prefix}-icon-lock-time:before {
+  content: '\E2A2';
+}
+
+.@{prefix}-icon-login:before {
+  content: '\E2A3';
+}
+
+.@{prefix}-icon-logo-adobe-illustrate:before {
+  content: '\E2A4';
+}
+
+.@{prefix}-icon-logo-adobe-photoshop-1:before {
+  content: '\E2A5';
+}
+
+.@{prefix}-icon-logo-adobe-photoshop:before {
+  content: '\E2A6';
+}
+
+.@{prefix}-icon-logo-android:before {
+  content: '\E2A7';
+}
+
+.@{prefix}-icon-logo-apple-filled:before {
+  content: '\E2A8';
+}
+
+.@{prefix}-icon-logo-apple:before {
+  content: '\E2A9';
+}
+
+.@{prefix}-icon-logo-behance:before {
+  content: '\E2AA';
+}
+
+.@{prefix}-icon-logo-chrome-filled:before {
+  content: '\E2AB';
+}
+
+.@{prefix}-icon-logo-chrome:before {
+  content: '\E2AC';
+}
+
+.@{prefix}-icon-logo-cinema4d:before {
+  content: '\E2AD';
+}
+
+.@{prefix}-icon-logo-codepen:before {
+  content: '\E2AE';
+}
+
+.@{prefix}-icon-logo-codesandbox:before {
+  content: '\E2AF';
+}
+
+.@{prefix}-icon-logo-dribbble:before {
+  content: '\E2B0';
+}
+
+.@{prefix}-icon-logo-facebook:before {
+  content: '\E2B1';
+}
+
+.@{prefix}-icon-logo-figma:before {
+  content: '\E2B2';
+}
+
+.@{prefix}-icon-logo-framer:before {
+  content: '\E2B3';
+}
+
+.@{prefix}-icon-logo-github-filled:before {
+  content: '\E2B4';
+}
+
+.@{prefix}-icon-logo-github:before {
+  content: '\E2B5';
+}
+
+.@{prefix}-icon-logo-gitlab:before {
+  content: '\E2B6';
+}
+
+.@{prefix}-icon-logo-ie-filled:before {
+  content: '\E2B7';
+}
+
+.@{prefix}-icon-logo-ie:before {
+  content: '\E2B8';
+}
+
+.@{prefix}-icon-logo-instagram:before {
+  content: '\E2B9';
+}
+
+.@{prefix}-icon-logo-qq:before {
+  content: '\E2BA';
+}
+
+.@{prefix}-icon-logo-twitter:before {
+  content: '\E2BB';
+}
+
+.@{prefix}-icon-logo-wechat-stroke:before {
+  content: '\E2BC';
+}
+
+.@{prefix}-icon-logo-wechat:before {
+  content: '\E2BD';
+}
+
+.@{prefix}-icon-logo-wecom:before {
+  content: '\E2BE';
+}
+
+.@{prefix}-icon-logo-windows-filled:before {
+  content: '\E2BF';
+}
+
+.@{prefix}-icon-logo-windows:before {
+  content: '\E2C0';
+}
+
+.@{prefix}-icon-logo-youtube:before {
+  content: '\E2C1';
+}
+
+.@{prefix}-icon-logout:before {
+  content: '\E2C2';
+}
+
+.@{prefix}-icon-look-around:before {
+  content: '\E2C3';
+}
+
+.@{prefix}-icon-loudspeaker:before {
+  content: '\E2C4';
+}
+
+.@{prefix}-icon-mail:before {
+  content: '\E2C5';
+}
+
+.@{prefix}-icon-map-3d:before {
+  content: '\E2C6';
+}
+
+.@{prefix}-icon-map-add:before {
+  content: '\E2C7';
+}
+
+.@{prefix}-icon-map-aiming:before {
+  content: '\E2C8';
+}
+
+.@{prefix}-icon-map-blocked:before {
+  content: '\E2C9';
+}
+
+.@{prefix}-icon-map-bubble:before {
+  content: '\E2CA';
+}
+
+.@{prefix}-icon-map-cancel:before {
+  content: '\E2CB';
+}
+
+.@{prefix}-icon-map-chat:before {
+  content: '\E2CC';
+}
+
+.@{prefix}-icon-map-checked:before {
+  content: '\E2CD';
+}
+
+.@{prefix}-icon-map-collection:before {
+  content: '\E2CE';
+}
+
+.@{prefix}-icon-map-connection:before {
+  content: '\E2CF';
+}
+
+.@{prefix}-icon-map-distance:before {
+  content: '\E2D0';
+}
+
+.@{prefix}-icon-map-double:before {
+  content: '\E2D1';
+}
+
+.@{prefix}-icon-map-edit:before {
+  content: '\E2D2';
+}
+
+.@{prefix}-icon-map-grid:before {
+  content: '\E2D3';
+}
+
+.@{prefix}-icon-map-information-1:before {
+  content: '\E2D4';
+}
+
+.@{prefix}-icon-map-information-2:before {
+  content: '\E2D5';
+}
+
+.@{prefix}-icon-map-information:before {
+  content: '\E2D6';
+}
+
+.@{prefix}-icon-map-location:before {
+  content: '\E2D7';
+}
+
+.@{prefix}-icon-map-locked:before {
+  content: '\E2D8';
+}
+
+.@{prefix}-icon-map-marked:before {
+  content: '\E2D9';
+}
+
+.@{prefix}-icon-map-navigation:before {
+  content: '\E2DA';
+}
+
+.@{prefix}-icon-map-outline:before {
+  content: '\E2DB';
+}
+
+.@{prefix}-icon-map-route-planning:before {
+  content: '\E2DC';
+}
+
+.@{prefix}-icon-map-ruler:before {
+  content: '\E2DD';
+}
+
+.@{prefix}-icon-map-safety:before {
+  content: '\E2DE';
+}
+
+.@{prefix}-icon-map-search-1:before {
+  content: '\E2DF';
+}
+
+.@{prefix}-icon-map-search:before {
+  content: '\E2E0';
+}
+
+.@{prefix}-icon-map-setting:before {
+  content: '\E2E1';
+}
+
+.@{prefix}-icon-map-unlocked:before {
+  content: '\E2E2';
+}
+
+.@{prefix}-icon-map:before {
+  content: '\E2E3';
+}
+
+.@{prefix}-icon-mark-as-unread:before {
+  content: '\E2E4';
+}
+
+.@{prefix}-icon-markup:before {
+  content: '\E2E5';
+}
+
+.@{prefix}-icon-mathematics:before {
+  content: '\E2E6';
+}
+
+.@{prefix}-icon-measurement-1:before {
+  content: '\E2E7';
+}
+
+.@{prefix}-icon-measurement-2:before {
+  content: '\E2E8';
+}
+
+.@{prefix}-icon-measurement:before {
+  content: '\E2E9';
+}
+
+.@{prefix}-icon-meat-pepper:before {
+  content: '\E2EA';
+}
+
+.@{prefix}-icon-media-library:before {
+  content: '\E2EB';
+}
+
+.@{prefix}-icon-member:before {
+  content: '\E2EC';
+}
+
+.@{prefix}-icon-menu-application:before {
+  content: '\E2ED';
+}
+
+.@{prefix}-icon-menu-fold:before {
+  content: '\E2EE';
+}
+
+.@{prefix}-icon-menu-unfold:before {
+  content: '\E2EF';
+}
+
+.@{prefix}-icon-menu:before {
+  content: '\E2F0';
+}
+
+.@{prefix}-icon-merge-cells:before {
+  content: '\E2F1';
+}
+
+.@{prefix}-icon-microphone-1:before {
+  content: '\E2F2';
+}
+
+.@{prefix}-icon-microphone-2:before {
+  content: '\E2F3';
+}
+
+.@{prefix}-icon-microphone:before {
+  content: '\E2F4';
+}
+
+.@{prefix}-icon-milk:before {
+  content: '\E2F5';
+}
+
+.@{prefix}-icon-minus-circle-filled:before {
+  content: '\E2F6';
+}
+
+.@{prefix}-icon-minus-circle:before {
+  content: '\E2F7';
+}
+
+.@{prefix}-icon-minus-rectangle-filled:before {
+  content: '\E2F8';
+}
+
+.@{prefix}-icon-minus-rectangle:before {
+  content: '\E2F9';
+}
+
+.@{prefix}-icon-minus:before {
+  content: '\E2FA';
+}
+
+.@{prefix}-icon-mirror:before {
+  content: '\E2FB';
+}
+
+.@{prefix}-icon-mobile-blocked:before {
+  content: '\E2FC';
+}
+
+.@{prefix}-icon-mobile-list:before {
+  content: '\E2FD';
+}
+
+.@{prefix}-icon-mobile-navigation:before {
+  content: '\E2FE';
+}
+
+.@{prefix}-icon-mobile-shortcut:before {
+  content: '\E2FF';
+}
+
+.@{prefix}-icon-mobile-vibrate:before {
+  content: '\E300';
+}
+
+.@{prefix}-icon-mobile:before {
+  content: '\E301';
+}
+
+.@{prefix}-icon-mode-dark:before {
+  content: '\E302';
+}
+
+.@{prefix}-icon-mode-light:before {
+  content: '\E303';
+}
+
+.@{prefix}-icon-module:before {
+  content: '\E304';
+}
+
+.@{prefix}-icon-money:before {
+  content: '\E305';
+}
+
+.@{prefix}-icon-monument:before {
+  content: '\E306';
+}
+
+.@{prefix}-icon-moon-fall:before {
+  content: '\E307';
+}
+
+.@{prefix}-icon-moon-rising:before {
+  content: '\E308';
+}
+
+.@{prefix}-icon-moon:before {
+  content: '\E309';
+}
+
+.@{prefix}-icon-more:before {
+  content: '\E30A';
+}
+
+.@{prefix}-icon-mosque-1:before {
+  content: '\E30B';
+}
+
+.@{prefix}-icon-mosque:before {
+  content: '\E30C';
+}
+
+.@{prefix}-icon-mouse:before {
+  content: '\E30D';
+}
+
+.@{prefix}-icon-move-1:before {
+  content: '\E30E';
+}
+
+.@{prefix}-icon-move:before {
+  content: '\E30F';
+}
+
+.@{prefix}-icon-movie-clapper:before {
+  content: '\E310';
+}
+
+.@{prefix}-icon-multiply:before {
+  content: '\E311';
+}
+
+.@{prefix}-icon-museum-1:before {
+  content: '\E312';
+}
+
+.@{prefix}-icon-museum-2:before {
+  content: '\E313';
+}
+
+.@{prefix}-icon-museum:before {
+  content: '\E314';
+}
+
+.@{prefix}-icon-mushroom-1:before {
+  content: '\E315';
+}
+
+.@{prefix}-icon-mushroom:before {
+  content: '\E316';
+}
+
+.@{prefix}-icon-music-1:before {
+  content: '\E317';
+}
+
+.@{prefix}-icon-music-2:before {
+  content: '\E318';
+}
+
+.@{prefix}-icon-music-rectangle-add:before {
+  content: '\E319';
+}
+
+.@{prefix}-icon-music:before {
+  content: '\E31A';
+}
+
+.@{prefix}-icon-navigation-arrow:before {
+  content: '\E31B';
+}
+
+.@{prefix}-icon-next:before {
+  content: '\E31C';
+}
+
+.@{prefix}-icon-no-expression:before {
+  content: '\E31D';
+}
+
+.@{prefix}-icon-noodle:before {
+  content: '\E31E';
+}
+
+.@{prefix}-icon-notification-add:before {
+  content: '\E31F';
+}
+
+.@{prefix}-icon-notification-circle:before {
+  content: '\E320';
+}
+
+.@{prefix}-icon-notification-error:before {
+  content: '\E321';
+}
+
+.@{prefix}-icon-notification-filled:before {
+  content: '\E322';
+}
+
+.@{prefix}-icon-notification:before {
+  content: '\E323';
+}
+
+.@{prefix}-icon-numbers-0-1:before {
+  content: '\E324';
+}
+
+.@{prefix}-icon-numbers-0:before {
+  content: '\E325';
+}
+
+.@{prefix}-icon-numbers-1-1:before {
+  content: '\E326';
+}
+
+.@{prefix}-icon-numbers-1:before {
+  content: '\E327';
+}
+
+.@{prefix}-icon-numbers-2-1:before {
+  content: '\E328';
+}
+
+.@{prefix}-icon-numbers-2:before {
+  content: '\E329';
+}
+
+.@{prefix}-icon-numbers-3-1:before {
+  content: '\E32A';
+}
+
+.@{prefix}-icon-numbers-3:before {
+  content: '\E32B';
+}
+
+.@{prefix}-icon-numbers-4-1:before {
+  content: '\E32C';
+}
+
+.@{prefix}-icon-numbers-4:before {
+  content: '\E32D';
+}
+
+.@{prefix}-icon-numbers-5-1:before {
+  content: '\E32E';
+}
+
+.@{prefix}-icon-numbers-5:before {
+  content: '\E32F';
+}
+
+.@{prefix}-icon-numbers-6-1:before {
+  content: '\E330';
+}
+
+.@{prefix}-icon-numbers-6:before {
+  content: '\E331';
+}
+
+.@{prefix}-icon-numbers-7-1:before {
+  content: '\E332';
+}
+
+.@{prefix}-icon-numbers-7:before {
+  content: '\E333';
+}
+
+.@{prefix}-icon-numbers-8-1:before {
+  content: '\E334';
+}
+
+.@{prefix}-icon-numbers-8:before {
+  content: '\E335';
+}
+
+.@{prefix}-icon-numbers-9-1:before {
+  content: '\E336';
+}
+
+.@{prefix}-icon-numbers-9:before {
+  content: '\E337';
+}
+
+.@{prefix}-icon-nut:before {
+  content: '\E338';
+}
+
+.@{prefix}-icon-object-storage:before {
+  content: '\E339';
+}
+
+.@{prefix}-icon-open-mouth:before {
+  content: '\E33A';
+}
+
+.@{prefix}-icon-opera:before {
+  content: '\E33B';
+}
+
+.@{prefix}-icon-order-adjustment-column:before {
+  content: '\E33C';
+}
+
+.@{prefix}-icon-order-ascending:before {
+  content: '\E33D';
+}
+
+.@{prefix}-icon-order-descending:before {
+  content: '\E33E';
+}
+
+.@{prefix}-icon-outbox:before {
+  content: '\E33F';
+}
+
+.@{prefix}-icon-page-first:before {
+  content: '\E340';
+}
+
+.@{prefix}-icon-page-head:before {
+  content: '\E341';
+}
+
+.@{prefix}-icon-page-last:before {
+  content: '\E342';
+}
+
+.@{prefix}-icon-palace-1:before {
+  content: '\E343';
+}
+
+.@{prefix}-icon-palace-2:before {
+  content: '\E344';
+}
+
+.@{prefix}-icon-palace-3:before {
+  content: '\E345';
+}
+
+.@{prefix}-icon-palace-4:before {
+  content: '\E346';
+}
+
+.@{prefix}-icon-palace:before {
+  content: '\E347';
+}
+
+.@{prefix}-icon-palette-1:before {
+  content: '\E348';
+}
+
+.@{prefix}-icon-palette:before {
+  content: '\E349';
+}
+
+.@{prefix}-icon-panorama-horizontal:before {
+  content: '\E34A';
+}
+
+.@{prefix}-icon-panorama-vertical:before {
+  content: '\E34B';
+}
+
+.@{prefix}-icon-pantone:before {
+  content: '\E34C';
+}
+
+.@{prefix}-icon-parabola:before {
+  content: '\E34D';
+}
+
+.@{prefix}-icon-parentheses:before {
+  content: '\E34E';
+}
+
+.@{prefix}-icon-paste:before {
+  content: '\E34F';
+}
+
+.@{prefix}-icon-patio:before {
+  content: '\E350';
+}
+
+.@{prefix}-icon-pause-circle-filled:before {
+  content: '\E351';
+}
+
+.@{prefix}-icon-pause-circle-stroke:before {
+  content: '\E352';
+}
+
+.@{prefix}-icon-pause-circle:before {
+  content: '\E353';
+}
+
+.@{prefix}-icon-pause:before {
+  content: '\E354';
+}
+
+.@{prefix}-icon-pea:before {
+  content: '\E355';
+}
+
+.@{prefix}-icon-peach:before {
+  content: '\E356';
+}
+
+.@{prefix}-icon-pear:before {
+  content: '\E357';
+}
+
+.@{prefix}-icon-pearl-of-the-orient:before {
+  content: '\E358';
+}
+
+.@{prefix}-icon-pen-ball:before {
+  content: '\E359';
+}
+
+.@{prefix}-icon-pen-brush:before {
+  content: '\E35A';
+}
+
+.@{prefix}-icon-pen-mark:before {
+  content: '\E35B';
+}
+
+.@{prefix}-icon-pen-quill:before {
+  content: '\E35C';
+}
+
+.@{prefix}-icon-pen:before {
+  content: '\E35D';
+}
+
+.@{prefix}-icon-pending:before {
+  content: '\E35E';
+}
+
+.@{prefix}-icon-percent:before {
+  content: '\E35F';
+}
+
+.@{prefix}-icon-personal-information:before {
+  content: '\E360';
+}
+
+.@{prefix}-icon-phone-locked:before {
+  content: '\E361';
+}
+
+.@{prefix}-icon-phone-search:before {
+  content: '\E362';
+}
+
+.@{prefix}-icon-pi:before {
+  content: '\E363';
+}
+
+.@{prefix}-icon-piano:before {
+  content: '\E364';
+}
+
+.@{prefix}-icon-pin-filled:before {
+  content: '\E365';
+}
+
+.@{prefix}-icon-pin:before {
+  content: '\E366';
+}
+
+.@{prefix}-icon-play-circle-filled:before {
+  content: '\E367';
+}
+
+.@{prefix}-icon-play-circle-stroke-add:before {
+  content: '\E368';
+}
+
+.@{prefix}-icon-play-circle-stroke:before {
+  content: '\E369';
+}
+
+.@{prefix}-icon-play-circle:before {
+  content: '\E36A';
+}
+
+.@{prefix}-icon-play-demo:before {
+  content: '\E36B';
+}
+
+.@{prefix}-icon-play-rectangle:before {
+  content: '\E36C';
+}
+
+.@{prefix}-icon-play:before {
+  content: '\E36D';
+}
+
+.@{prefix}-icon-plus:before {
+  content: '\E36E';
+}
+
+.@{prefix}-icon-popsicle:before {
+  content: '\E36F';
+}
+
+.@{prefix}-icon-portrait:before {
+  content: '\E370';
+}
+
+.@{prefix}-icon-pout:before {
+  content: '\E371';
+}
+
+.@{prefix}-icon-poweroff:before {
+  content: '\E372';
+}
+
+.@{prefix}-icon-precise-monitor:before {
+  content: '\E373';
+}
+
+.@{prefix}-icon-previous:before {
+  content: '\E374';
+}
+
+.@{prefix}-icon-print:before {
+  content: '\E375';
+}
+
+.@{prefix}-icon-pumpkin:before {
+  content: '\E376';
+}
+
+.@{prefix}-icon-pyramid-maya:before {
+  content: '\E377';
+}
+
+.@{prefix}-icon-pyramid:before {
+  content: '\E378';
+}
+
+.@{prefix}-icon-qrcode:before {
+  content: '\E379';
+}
+
+.@{prefix}-icon-quadratic:before {
+  content: '\E37A';
+}
+
+.@{prefix}-icon-questionnaire:before {
+  content: '\E37B';
+}
+
+.@{prefix}-icon-queue:before {
+  content: '\E37C';
+}
+
+.@{prefix}-icon-radar:before {
+  content: '\E37D';
+}
+
+.@{prefix}-icon-radio-1:before {
+  content: '\E37E';
+}
+
+.@{prefix}-icon-radio-2:before {
+  content: '\E37F';
+}
+
+.@{prefix}-icon-radish:before {
+  content: '\E380';
+}
+
+.@{prefix}-icon-rain-heavy:before {
+  content: '\E381';
+}
+
+.@{prefix}-icon-rain-light:before {
+  content: '\E382';
+}
+
+.@{prefix}-icon-rain-medium:before {
+  content: '\E383';
+}
+
+.@{prefix}-icon-rainbow:before {
+  content: '\E384';
+}
+
+.@{prefix}-icon-rectangle:before {
+  content: '\E385';
+}
+
+.@{prefix}-icon-refresh:before {
+  content: '\E386';
+}
+
+.@{prefix}-icon-relation:before {
+  content: '\E387';
+}
+
+.@{prefix}-icon-relativity:before {
+  content: '\E388';
+}
+
+.@{prefix}-icon-remote-wave:before {
+  content: '\E389';
+}
+
+.@{prefix}-icon-remove:before {
+  content: '\E38A';
+}
+
+.@{prefix}-icon-replay:before {
+  content: '\E38B';
+}
+
+.@{prefix}-icon-rice-ball:before {
+  content: '\E38C';
+}
+
+.@{prefix}-icon-rice:before {
+  content: '\E38D';
+}
+
+.@{prefix}-icon-roast:before {
+  content: '\E38E';
+}
+
+.@{prefix}-icon-rocket:before {
+  content: '\E38F';
+}
+
+.@{prefix}-icon-rollback:before {
+  content: '\E390';
+}
+
+.@{prefix}-icon-rollfront:before {
+  content: '\E391';
+}
+
+.@{prefix}-icon-root-list:before {
+  content: '\E392';
+}
+
+.@{prefix}-icon-rotate-locked:before {
+  content: '\E393';
+}
+
+.@{prefix}-icon-rotate:before {
+  content: '\E394';
+}
+
+.@{prefix}-icon-rotation:before {
+  content: '\E395';
+}
+
+.@{prefix}-icon-round:before {
+  content: '\E396';
+}
+
+.@{prefix}-icon-router-wave:before {
+  content: '\E397';
+}
+
+.@{prefix}-icon-rss:before {
+  content: '\E398';
+}
+
+.@{prefix}-icon-ruler:before {
+  content: '\E399';
+}
+
+.@{prefix}-icon-sailing-hotel:before {
+  content: '\E39A';
+}
+
+.@{prefix}-icon-sandwich:before {
+  content: '\E39B';
+}
+
+.@{prefix}-icon-saturation:before {
+  content: '\E39C';
+}
+
+.@{prefix}-icon-sausage:before {
+  content: '\E39D';
+}
+
+.@{prefix}-icon-save:before {
+  content: '\E39E';
+}
+
+.@{prefix}-icon-saving-pot:before {
+  content: '\E39F';
+}
+
+.@{prefix}-icon-scan:before {
+  content: '\E3A0';
+}
+
+.@{prefix}-icon-screen-4k:before {
+  content: '\E3A1';
+}
+
+.@{prefix}-icon-screencast:before {
+  content: '\E3A2';
+}
+
+.@{prefix}-icon-screenshot:before {
+  content: '\E3A3';
+}
+
+.@{prefix}-icon-scroll-bar:before {
+  content: '\E3A4';
+}
+
+.@{prefix}-icon-sd-card-1:before {
+  content: '\E3A5';
+}
+
+.@{prefix}-icon-sd-card:before {
+  content: '\E3A6';
+}
+
+.@{prefix}-icon-search-error:before {
+  content: '\E3A7';
+}
+
+.@{prefix}-icon-search:before {
+  content: '\E3A8';
+}
+
+.@{prefix}-icon-secured:before {
+  content: '\E3A9';
+}
+
+.@{prefix}-icon-send-cancel:before {
+  content: '\E3AA';
+}
+
+.@{prefix}-icon-send:before {
+  content: '\E3AB';
+}
+
+.@{prefix}-icon-sensors-1:before {
+  content: '\E3AC';
+}
+
+.@{prefix}-icon-sensors-2:before {
+  content: '\E3AD';
+}
+
+.@{prefix}-icon-sensors-off:before {
+  content: '\E3AE';
+}
+
+.@{prefix}-icon-sensors:before {
+  content: '\E3AF';
+}
+
+.@{prefix}-icon-serenity:before {
+  content: '\E3B0';
+}
+
+.@{prefix}-icon-server:before {
+  content: '\E3B1';
+}
+
+.@{prefix}-icon-service:before {
+  content: '\E3B2';
+}
+
+.@{prefix}-icon-setting-1:before {
+  content: '\E3B3';
+}
+
+.@{prefix}-icon-setting:before {
+  content: '\E3B4';
+}
+
+.@{prefix}-icon-share-1:before {
+  content: '\E3B5';
+}
+
+.@{prefix}-icon-share:before {
+  content: '\E3B6';
+}
+
+.@{prefix}-icon-sharpness:before {
+  content: '\E3B7';
+}
+
+.@{prefix}-icon-shield-error:before {
+  content: '\E3B8';
+}
+
+.@{prefix}-icon-shimen:before {
+  content: '\E3B9';
+}
+
+.@{prefix}-icon-shop-1:before {
+  content: '\E3BA';
+}
+
+.@{prefix}-icon-shop-2:before {
+  content: '\E3BB';
+}
+
+.@{prefix}-icon-shop-3:before {
+  content: '\E3BC';
+}
+
+.@{prefix}-icon-shop-4:before {
+  content: '\E3BD';
+}
+
+.@{prefix}-icon-shop-5:before {
+  content: '\E3BE';
+}
+
+.@{prefix}-icon-shop:before {
+  content: '\E3BF';
+}
+
+.@{prefix}-icon-shrimp:before {
+  content: '\E3C0';
+}
+
+.@{prefix}-icon-shrink-horizontal:before {
+  content: '\E3C1';
+}
+
+.@{prefix}-icon-shrink-vertical:before {
+  content: '\E3C2';
+}
+
+.@{prefix}-icon-shutter:before {
+  content: '\E3C3';
+}
+
+.@{prefix}-icon-shutup:before {
+  content: '\E3C4';
+}
+
+.@{prefix}-icon-sim-card-1:before {
+  content: '\E3C5';
+}
+
+.@{prefix}-icon-sim-card-2:before {
+  content: '\E3C6';
+}
+
+.@{prefix}-icon-sim-card:before {
+  content: '\E3C7';
+}
+
+.@{prefix}-icon-sinister-smile:before {
+  content: '\E3C8';
+}
+
+.@{prefix}-icon-sip:before {
+  content: '\E3C9';
+}
+
+.@{prefix}-icon-slash:before {
+  content: '\E3CA';
+}
+
+.@{prefix}-icon-sleep:before {
+  content: '\E3CB';
+}
+
+.@{prefix}-icon-slice:before {
+  content: '\E3CC';
+}
+
+.@{prefix}-icon-slideshow:before {
+  content: '\E3CD';
+}
+
+.@{prefix}-icon-smile:before {
+  content: '\E3CE';
+}
+
+.@{prefix}-icon-sneer:before {
+  content: '\E3CF';
+}
+
+.@{prefix}-icon-snowflake:before {
+  content: '\E3D0';
+}
+
+.@{prefix}-icon-sonic:before {
+  content: '\E3D1';
+}
+
+.@{prefix}-icon-sound-down:before {
+  content: '\E3D2';
+}
+
+.@{prefix}-icon-sound-high:before {
+  content: '\E3D3';
+}
+
+.@{prefix}-icon-sound-low:before {
+  content: '\E3D4';
+}
+
+.@{prefix}-icon-sound-mute-1:before {
+  content: '\E3D5';
+}
+
+.@{prefix}-icon-sound-mute:before {
+  content: '\E3D6';
+}
+
+.@{prefix}-icon-sound-up:before {
+  content: '\E3D7';
+}
+
+.@{prefix}-icon-sound:before {
+  content: '\E3D8';
+}
+
+.@{prefix}-icon-space:before {
+  content: '\E3D9';
+}
+
+.@{prefix}-icon-speechless-1:before {
+  content: '\E3DA';
+}
+
+.@{prefix}-icon-star-filled:before {
+  content: '\E3DB';
+}
+
+.@{prefix}-icon-star:before {
+  content: '\E3DC';
+}
+
+.@{prefix}-icon-statue-of-jesus:before {
+  content: '\E3DD';
+}
+
+.@{prefix}-icon-sticky-note:before {
+  content: '\E3DE';
+}
+
+.@{prefix}-icon-stop-circle-filled:before {
+  content: '\E3DF';
+}
+
+.@{prefix}-icon-stop-circle-stroke:before {
+  content: '\E3E0';
+}
+
+.@{prefix}-icon-stop-circle:before {
+  content: '\E3E1';
+}
+
+.@{prefix}-icon-stop:before {
+  content: '\E3E2';
+}
+
+.@{prefix}-icon-store:before {
+  content: '\E3E3';
+}
+
+.@{prefix}-icon-street-road-1:before {
+  content: '\E3E4';
+}
+
+.@{prefix}-icon-street-road:before {
+  content: '\E3E5';
+}
+
+.@{prefix}-icon-subtitle:before {
+  content: '\E3E6';
+}
+
+.@{prefix}-icon-subway-line:before {
+  content: '\E3E7';
+}
+
+.@{prefix}-icon-sum:before {
+  content: '\E3E8';
+}
+
+.@{prefix}-icon-sun-fall:before {
+  content: '\E3E9';
+}
+
+.@{prefix}-icon-sun-rising:before {
+  content: '\E3EA';
+}
+
+.@{prefix}-icon-sunny:before {
+  content: '\E3EB';
+}
+
+.@{prefix}-icon-support:before {
+  content: '\E3EC';
+}
+
+.@{prefix}-icon-surprised-1:before {
+  content: '\E3ED';
+}
+
+.@{prefix}-icon-surprised:before {
+  content: '\E3EE';
+}
+
+.@{prefix}-icon-swap-left:before {
+  content: '\E3EF';
+}
+
+.@{prefix}-icon-swap-right:before {
+  content: '\E3F0';
+}
+
+.@{prefix}-icon-swap:before {
+  content: '\E3F1';
+}
+
+.@{prefix}-icon-swear-1:before {
+  content: '\E3F2';
+}
+
+.@{prefix}-icon-swear-2:before {
+  content: '\E3F3';
+}
+
+.@{prefix}-icon-system-2:before {
+  content: '\E3F4';
+}
+
+.@{prefix}-icon-system-3:before {
+  content: '\E3F5';
+}
+
+.@{prefix}-icon-system-application:before {
+  content: '\E3F6';
+}
+
+.@{prefix}-icon-system-blocked:before {
+  content: '\E3F7';
+}
+
+.@{prefix}-icon-system-code:before {
+  content: '\E3F8';
+}
+
+.@{prefix}-icon-system-components:before {
+  content: '\E3F9';
+}
+
+.@{prefix}-icon-system-coordinate:before {
+  content: '\E3FA';
+}
+
+.@{prefix}-icon-system-device:before {
+  content: '\E3FB';
+}
+
+.@{prefix}-icon-system-interface:before {
+  content: '\E3FC';
+}
+
+.@{prefix}-icon-system-location:before {
+  content: '\E3FD';
+}
+
+.@{prefix}-icon-system-locked:before {
+  content: '\E3FE';
+}
+
+.@{prefix}-icon-system-log:before {
+  content: '\E3FF';
+}
+
+.@{prefix}-icon-system-marked:before {
+  content: '\E400';
+}
+
+.@{prefix}-icon-system-messages:before {
+  content: '\E401';
+}
+
+.@{prefix}-icon-system-regulation:before {
+  content: '\E402';
+}
+
+.@{prefix}-icon-system-search:before {
+  content: '\E403';
+}
+
+.@{prefix}-icon-system-setting:before {
+  content: '\E404';
+}
+
+.@{prefix}-icon-system-storage:before {
+  content: '\E405';
+}
+
+.@{prefix}-icon-system-sum:before {
+  content: '\E406';
+}
+
+.@{prefix}-icon-system-unlocked:before {
+  content: '\E407';
+}
+
+.@{prefix}-icon-tab:before {
+  content: '\E408';
+}
+
+.@{prefix}-icon-table-1:before {
+  content: '\E409';
+}
+
+.@{prefix}-icon-table-2:before {
+  content: '\E40A';
+}
+
+.@{prefix}-icon-table-add:before {
+  content: '\E40B';
+}
+
+.@{prefix}-icon-table-split:before {
+  content: '\E40C';
+}
+
+.@{prefix}-icon-table:before {
+  content: '\E40D';
+}
+
+.@{prefix}-icon-tag:before {
+  content: '\E40E';
+}
+
+.@{prefix}-icon-tangerinr:before {
+  content: '\E40F';
+}
+
+.@{prefix}-icon-tape:before {
+  content: '\E410';
+}
+
+.@{prefix}-icon-task-1:before {
+  content: '\E411';
+}
+
+.@{prefix}-icon-task-add-1:before {
+  content: '\E412';
+}
+
+.@{prefix}-icon-task-add:before {
+  content: '\E413';
+}
+
+.@{prefix}-icon-task-checked:before {
+  content: '\E414';
+}
+
+.@{prefix}-icon-task-error:before {
+  content: '\E415';
+}
+
+.@{prefix}-icon-task-location:before {
+  content: '\E416';
+}
+
+.@{prefix}-icon-task-marked:before {
+  content: '\E417';
+}
+
+.@{prefix}-icon-task-setting:before {
+  content: '\E418';
+}
+
+.@{prefix}-icon-task-visible:before {
+  content: '\E419';
+}
+
+.@{prefix}-icon-task:before {
+  content: '\E41A';
+}
+
+.@{prefix}-icon-tea:before {
+  content: '\E41B';
+}
+
+.@{prefix}-icon-teahouse:before {
+  content: '\E41C';
+}
+
+.@{prefix}-icon-template:before {
+  content: '\E41D';
+}
+
+.@{prefix}-icon-temple:before {
+  content: '\E41E';
+}
+
+.@{prefix}-icon-terminal-rectangle-1:before {
+  content: '\E41F';
+}
+
+.@{prefix}-icon-terminal-rectangle:before {
+  content: '\E420';
+}
+
+.@{prefix}-icon-terminal-window:before {
+  content: '\E421';
+}
+
+.@{prefix}-icon-terminal:before {
+  content: '\E422';
+}
+
+.@{prefix}-icon-textbox:before {
+  content: '\E423';
+}
+
+.@{prefix}-icon-textformat-bold:before {
+  content: '\E424';
+}
+
+.@{prefix}-icon-textformat-color:before {
+  content: '\E425';
+}
+
+.@{prefix}-icon-textformat-italic:before {
+  content: '\E426';
+}
+
+.@{prefix}-icon-textformat-strikethrough:before {
+  content: '\E427';
+}
+
+.@{prefix}-icon-textformat-underline:before {
+  content: '\E428';
+}
+
+.@{prefix}-icon-textformat-wrap:before {
+  content: '\E429';
+}
+
+.@{prefix}-icon-theaters:before {
+  content: '\E42A';
+}
+
+.@{prefix}-icon-thumb-down-1:before {
+  content: '\E42B';
+}
+
+.@{prefix}-icon-thumb-down-2:before {
+  content: '\E42C';
+}
+
+.@{prefix}-icon-thumb-down:before {
+  content: '\E42D';
+}
+
+.@{prefix}-icon-thumb-up-1:before {
+  content: '\E42E';
+}
+
+.@{prefix}-icon-thumb-up-2:before {
+  content: '\E42F';
+}
+
+.@{prefix}-icon-thumb-up:before {
+  content: '\E430';
+}
+
+.@{prefix}-icon-thunder:before {
+  content: '\E431';
+}
+
+.@{prefix}-icon-thunderstorm-night:before {
+  content: '\E432';
+}
+
+.@{prefix}-icon-thunderstorm-sunny:before {
+  content: '\E433';
+}
+
+.@{prefix}-icon-thunderstorm:before {
+  content: '\E434';
+}
+
+.@{prefix}-icon-ticket:before {
+  content: '\E435';
+}
+
+.@{prefix}-icon-time-filled:before {
+  content: '\E436';
+}
+
+.@{prefix}-icon-time:before {
+  content: '\E437';
+}
+
+.@{prefix}-icon-tips-double:before {
+  content: '\E438';
+}
+
+.@{prefix}-icon-tips:before {
+  content: '\E439';
+}
+
+.@{prefix}-icon-tomato:before {
+  content: '\E43A';
+}
+
+.@{prefix}-icon-tools-circle:before {
+  content: '\E43B';
+}
+
+.@{prefix}-icon-tools:before {
+  content: '\E43C';
+}
+
+.@{prefix}-icon-tornado:before {
+  content: '\E43D';
+}
+
+.@{prefix}-icon-tower-1:before {
+  content: '\E43E';
+}
+
+.@{prefix}-icon-tower-2:before {
+  content: '\E43F';
+}
+
+.@{prefix}-icon-tower-3:before {
+  content: '\E440';
+}
+
+.@{prefix}-icon-tower-clock:before {
+  content: '\E441';
+}
+
+.@{prefix}-icon-tower:before {
+  content: '\E442';
+}
+
+.@{prefix}-icon-town:before {
+  content: '\E443';
+}
+
+.@{prefix}-icon-traffic-events:before {
+  content: '\E444';
+}
+
+.@{prefix}-icon-traffic:before {
+  content: '\E445';
+}
+
+.@{prefix}-icon-transform-1:before {
+  content: '\E446';
+}
+
+.@{prefix}-icon-transform-2:before {
+  content: '\E447';
+}
+
+.@{prefix}-icon-transform-3:before {
+  content: '\E448';
+}
+
+.@{prefix}-icon-transform:before {
+  content: '\E449';
+}
+
+.@{prefix}-icon-translate-1:before {
+  content: '\E44A';
+}
+
 .@{prefix}-icon-translate:before {
-  content: '\E0DF';
+  content: '\E44B';
+}
+
+.@{prefix}-icon-tree-list:before {
+  content: '\E44C';
+}
+
+.@{prefix}-icon-tree-round-dot-vertical:before {
+  content: '\E44D';
+}
+
+.@{prefix}-icon-tree-round-dot:before {
+  content: '\E44E';
+}
+
+.@{prefix}-icon-tree-square-dot-vertical:before {
+  content: '\E44F';
+}
+
+.@{prefix}-icon-tree-square-dot:before {
+  content: '\E450';
+}
+
+.@{prefix}-icon-trending-down:before {
+  content: '\E451';
+}
+
+.@{prefix}-icon-trending-up:before {
+  content: '\E452';
+}
+
+.@{prefix}-icon-tv-1:before {
+  content: '\E453';
+}
+
+.@{prefix}-icon-tv-2:before {
+  content: '\E454';
+}
+
+.@{prefix}-icon-tv:before {
+  content: '\E455';
+}
+
+.@{prefix}-icon-typography:before {
+  content: '\E456';
+}
+
+.@{prefix}-icon-uncomfortable-1:before {
+  content: '\E457';
+}
+
+.@{prefix}-icon-uncomfortable-2:before {
+  content: '\E458';
+}
+
+.@{prefix}-icon-uncomfortable:before {
+  content: '\E459';
+}
+
+.@{prefix}-icon-undertake-delivery:before {
+  content: '\E45A';
+}
+
+.@{prefix}-icon-undertake-environment-protection:before {
+  content: '\E45B';
+}
+
+.@{prefix}-icon-undertake-hold-up:before {
+  content: '\E45C';
+}
+
+.@{prefix}-icon-undertake-transaction:before {
+  content: '\E45D';
+}
+
+.@{prefix}-icon-undertake:before {
+  content: '\E45E';
 }
 
 .@{prefix}-icon-unfold-less:before {
-  content: '\E0E0';
+  content: '\E45F';
 }
 
 .@{prefix}-icon-unfold-more:before {
-  content: '\E0E1';
+  content: '\E460';
+}
+
+.@{prefix}-icon-unhappy-1:before {
+  content: '\E461';
+}
+
+.@{prefix}-icon-unhappy:before {
+  content: '\E462';
+}
+
+.@{prefix}-icon-uninstall:before {
+  content: '\E463';
+}
+
+.@{prefix}-icon-upload-1:before {
+  content: '\E464';
 }
 
 .@{prefix}-icon-upload:before {
-  content: '\E0E2';
+  content: '\E465';
+}
+
+.@{prefix}-icon-upscale:before {
+  content: '\E466';
 }
 
 .@{prefix}-icon-usb:before {
-  content: '\E0E3';
+  content: '\E467';
+}
+
+.@{prefix}-icon-user-1:before {
+  content: '\E468';
 }
 
 .@{prefix}-icon-user-add:before {
-  content: '\E0E4';
+  content: '\E469';
+}
+
+.@{prefix}-icon-user-arrow-down:before {
+  content: '\E46A';
+}
+
+.@{prefix}-icon-user-arrow-left:before {
+  content: '\E46B';
+}
+
+.@{prefix}-icon-user-arrow-right:before {
+  content: '\E46C';
+}
+
+.@{prefix}-icon-user-arrow-up:before {
+  content: '\E46D';
 }
 
 .@{prefix}-icon-user-avatar:before {
-  content: '\E0E5';
+  content: '\E46E';
+}
+
+.@{prefix}-icon-user-blocked:before {
+  content: '\E46F';
+}
+
+.@{prefix}-icon-user-business:before {
+  content: '\E470';
+}
+
+.@{prefix}-icon-user-checked-1:before {
+  content: '\E471';
+}
+
+.@{prefix}-icon-user-checked:before {
+  content: '\E472';
 }
 
 .@{prefix}-icon-user-circle:before {
-  content: '\E0E6';
+  content: '\E473';
 }
 
 .@{prefix}-icon-user-clear:before {
-  content: '\E0E7';
+  content: '\E474';
+}
+
+.@{prefix}-icon-user-error-1:before {
+  content: '\E475';
+}
+
+.@{prefix}-icon-user-invisible:before {
+  content: '\E476';
+}
+
+.@{prefix}-icon-user-list:before {
+  content: '\E477';
+}
+
+.@{prefix}-icon-user-locked:before {
+  content: '\E478';
+}
+
+.@{prefix}-icon-user-marked:before {
+  content: '\E479';
+}
+
+.@{prefix}-icon-user-password:before {
+  content: '\E47A';
+}
+
+.@{prefix}-icon-user-safety:before {
+  content: '\E47B';
+}
+
+.@{prefix}-icon-user-search:before {
+  content: '\E47C';
+}
+
+.@{prefix}-icon-user-setting:before {
+  content: '\E47D';
+}
+
+.@{prefix}-icon-user-talk-1:before {
+  content: '\E47E';
+}
+
+.@{prefix}-icon-user-talk-off-1:before {
+  content: '\E47F';
 }
 
 .@{prefix}-icon-user-talk:before {
-  content: '\E0E8';
+  content: '\E480';
+}
+
+.@{prefix}-icon-user-time:before {
+  content: '\E481';
+}
+
+.@{prefix}-icon-user-transmit:before {
+  content: '\E482';
+}
+
+.@{prefix}-icon-user-unknown:before {
+  content: '\E483';
+}
+
+.@{prefix}-icon-user-unlocked:before {
+  content: '\E484';
+}
+
+.@{prefix}-icon-user-vip:before {
+  content: '\E485';
+}
+
+.@{prefix}-icon-user-visible:before {
+  content: '\E486';
 }
 
 .@{prefix}-icon-user:before {
-  content: '\E0E9';
+  content: '\E487';
 }
 
 .@{prefix}-icon-usergroup-add:before {
-  content: '\E0EA';
+  content: '\E488';
 }
 
 .@{prefix}-icon-usergroup-clear:before {
-  content: '\E0EB';
+  content: '\E489';
 }
 
 .@{prefix}-icon-usergroup:before {
-  content: '\E0EC';
+  content: '\E48A';
+}
+
+.@{prefix}-icon-vehicle:before {
+  content: '\E48B';
+}
+
+.@{prefix}-icon-verified:before {
+  content: '\E48C';
+}
+
+.@{prefix}-icon-verify:before {
+  content: '\E48D';
+}
+
+.@{prefix}-icon-video-camera-1:before {
+  content: '\E48E';
+}
+
+.@{prefix}-icon-video-camera-2:before {
+  content: '\E48F';
+}
+
+.@{prefix}-icon-video-camera-dollar:before {
+  content: '\E490';
+}
+
+.@{prefix}-icon-video-camera-minus:before {
+  content: '\E491';
+}
+
+.@{prefix}-icon-video-camera-music:before {
+  content: '\E492';
+}
+
+.@{prefix}-icon-video-camera-off:before {
+  content: '\E493';
+}
+
+.@{prefix}-icon-video-camera:before {
+  content: '\E494';
+}
+
+.@{prefix}-icon-video-library:before {
+  content: '\E495';
 }
 
 .@{prefix}-icon-video:before {
-  content: '\E0ED';
+  content: '\E496';
+}
+
+.@{prefix}-icon-view-agenda:before {
+  content: '\E497';
 }
 
 .@{prefix}-icon-view-column:before {
-  content: '\E0EE';
+  content: '\E498';
+}
+
+.@{prefix}-icon-view-in-ar:before {
+  content: '\E499';
 }
 
 .@{prefix}-icon-view-list:before {
-  content: '\E0EF';
+  content: '\E49A';
 }
 
 .@{prefix}-icon-view-module:before {
-  content: '\E0F0';
+  content: '\E49B';
+}
+
+.@{prefix}-icon-visual-recognition:before {
+  content: '\E49C';
 }
 
 .@{prefix}-icon-wallet:before {
-  content: '\E0F1';
+  content: '\E49D';
+}
+
+.@{prefix}-icon-watch:before {
+  content: '\E49E';
+}
+
+.@{prefix}-icon-watermelon:before {
+  content: '\E49F';
+}
+
+.@{prefix}-icon-wave-left:before {
+  content: '\E4A0';
+}
+
+.@{prefix}-icon-wave-right:before {
+  content: '\E4A1';
+}
+
+.@{prefix}-icon-wealth-1:before {
+  content: '\E4A2';
+}
+
+.@{prefix}-icon-wealth:before {
+  content: '\E4A3';
+}
+
+.@{prefix}-icon-widget:before {
+  content: '\E4A4';
+}
+
+.@{prefix}-icon-wifi-1:before {
+  content: '\E4A5';
+}
+
+.@{prefix}-icon-wifi-off-1:before {
+  content: '\E4A6';
+}
+
+.@{prefix}-icon-wifi-off:before {
+  content: '\E4A7';
 }
 
 .@{prefix}-icon-wifi:before {
-  content: '\E0F2';
+  content: '\E4A8';
+}
+
+.@{prefix}-icon-window-1:before {
+  content: '\E4A9';
+}
+
+.@{prefix}-icon-window:before {
+  content: '\E4AA';
+}
+
+.@{prefix}-icon-windy-rain:before {
+  content: '\E4AB';
+}
+
+.@{prefix}-icon-windy:before {
+  content: '\E4AC';
+}
+
+.@{prefix}-icon-wink:before {
+  content: '\E4AD';
+}
+
+.@{prefix}-icon-work-history:before {
+  content: '\E4AE';
+}
+
+.@{prefix}-icon-work-off:before {
+  content: '\E4AF';
+}
+
+.@{prefix}-icon-work:before {
+  content: '\E4B0';
+}
+
+.@{prefix}-icon-wry-smile:before {
+  content: '\E4B1';
 }
 
 .@{prefix}-icon-zoom-in:before {
-  content: '\E0F3';
+  content: '\E4B2';
 }
 
 .@{prefix}-icon-zoom-out:before {
-  content: '\E0F4';
+  content: '\E4B3';
 }

From d595a18a9b8dbfed4ede9e62ff9b58ee36dea846 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Wed, 9 Aug 2023 15:45:25 +0800
Subject: [PATCH 174/202] fix(Input): resolved t-class-label invalid (#2259)

* fix(Input): resolved t-class-label invalid

* feat(Input): enrich css variables
---
 src/input/README.en-US.md                           |  2 ++
 src/input/README.md                                 |  2 ++
 src/input/__test__/__snapshots__/index.test.js.snap | 10 +++-------
 src/input/input.less                                |  6 ++++--
 src/input/input.wxml                                |  4 ++--
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md
index 4c2f3645f..eb3fe493f 100644
--- a/src/input/README.en-US.md
+++ b/src/input/README.en-US.md
@@ -74,6 +74,8 @@ Name | Default Value | Description
 --td-input-disabled-text-color | @text-color-disabled | - 
 --td-input-error-text-color | @error-color | - 
 --td-input-error-tips-color | @error-color | - 
+--td-input-label-max-width | 5em | - 
+--td-input-label-min-width | 2em | - 
 --td-input-label-text-color | @font-gray-1 | - 
 --td-input-placeholder-text-color | @text-color-placeholder | - 
 --td-input-prefix-icon-color | @font-gray-1 | - 
diff --git a/src/input/README.md b/src/input/README.md
index fb35eb8ef..82c9c9bdf 100644
--- a/src/input/README.md
+++ b/src/input/README.md
@@ -159,6 +159,8 @@ t-class-tips | 提示样式类
 --td-input-disabled-text-color | @text-color-disabled | - 
 --td-input-error-text-color | @error-color | - 
 --td-input-error-tips-color | @error-color | - 
+--td-input-label-max-width | 5em | - 
+--td-input-label-min-width | 2em | - 
 --td-input-label-text-color | @font-gray-1 | - 
 --td-input-placeholder-text-color | @text-color-placeholder | - 
 --td-input-prefix-icon-color | @font-gray-1 | - 
diff --git a/src/input/__test__/__snapshots__/index.test.js.snap b/src/input/__test__/__snapshots__/index.test.js.snap
index 2b1c4656a..d6a8883c1 100644
--- a/src/input/__test__/__snapshots__/index.test.js.snap
+++ b/src/input/__test__/__snapshots__/index.test.js.snap
@@ -17,13 +17,9 @@ exports[`input props : clearable && label && suffix 1`] = `
       />
       <wx-view
         ariaHidden="{{true}}"
-        class="t-input__label"
+        class="t-input__label t-class-label"
       >
-        <wx-text
-          class="t-class-label"
-        >
-          tdesign
-        </wx-text>
+        tdesign
       </wx-view>
     </wx-view>
     <wx-view
@@ -146,7 +142,7 @@ exports[`input slots : label 1`] = `
       />
       <wx-view
         ariaHidden="{{true}}"
-        class="t-input__label"
+        class="t-input__label t-class-label"
       >
         <wx-text
           slot="label"
diff --git a/src/input/input.less b/src/input/input.less
index 5e89acbce..3fd4d6a55 100644
--- a/src/input/input.less
+++ b/src/input/input.less
@@ -20,6 +20,8 @@
 @input-prefix-icon-color: var(--td-input-prefix-icon-color, @font-gray-1); // // 输入框前缀图标颜色
 @input-suffix-icon-color: var(--td-input-suffix-icon-color, @font-gray-3); // 输入框后缀图标颜色
 @input-label-text-color: var(--td-input-label-text-color, @font-gray-1); // 左侧文本颜色
+@input-label-min-width: var(--td-input-label-min-width, 2em);
+@input-label-max-width: var(--td-input-label-max-width, 5em);
 @input-suffix-text-color: var(--td-input-suffix-text-color, @font-gray-1); // 后置图标前的后置内容文本颜色
 @input-disabled-text-color: var(--td-input-disabled-text-color, @text-color-disabled); // 输入框禁用态文本颜色
 @input-border-radius: var(--td-input-border-radius, @radius-default); // 边框圆角大小
@@ -55,8 +57,8 @@
   }
 
   &__label:not(:empty) {
-    min-width: 2em;
-    max-width: 5em;
+    min-width: @input-label-min-width;
+    max-width: @input-label-max-width;
     font-size: @font-size-m;
     line-height: 48rpx;
     color: @input-label-text-color;
diff --git a/src/input/input.wxml b/src/input/input.wxml
index 3a50ba4b1..2313a21a2 100644
--- a/src/input/input.wxml
+++ b/src/input/input.wxml
@@ -17,9 +17,9 @@
         data="{{tClass: prefix + '-class-prefix-icon', ariaHidden: true, ..._prefixIcon}}"
       />
     </view>
-    <view class="{{classPrefix}}__label" aria-hidden>
+    <view class="{{classPrefix}}__label {{prefix}}-class-label" aria-hidden>
       <slot name="label" />
-      <text wx:if="{{label}}" class="{{prefix}}-class-label">{{label}}</text>
+      <block wx:if="{{label}}">{{label}}</block>
     </view>
   </view>
 

From a7ab4d31c8d03500f2680ab14b5f4737cb347593 Mon Sep 17 00:00:00 2001
From: betavs <392368711@qq.com>
Date: Thu, 10 Aug 2023 11:31:38 +0800
Subject: [PATCH 175/202] fix(grid-item): invalid less variables (#2253)

* fix(grid-item): invalid less variables

* fix(grid-item): initialize default values
---
 src/grid-item/grid-item.less | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/grid-item/grid-item.less b/src/grid-item/grid-item.less
index 4a98d5d82..cdf6d338f 100644
--- a/src/grid-item/grid-item.less
+++ b/src/grid-item/grid-item.less
@@ -18,10 +18,10 @@
 @grid-item-description-font-size: var(--td-grid-item-description-font-size, 24rpx);
 @grid-item-description-line-height: var(--td-grid-item-description-line-height, 40rpx);
 @grid-item-description-color: var(--td-grid-item-description-color, @font-gray-3);
-@grid-item-description-padding-top: var(--td-grid-item-description-padding-top, 8rpx);
+@grid-item-description-padding-top: var(--td-grid-item-description-padding-top, 0);
 @grid-item-hover-bg-color: var(--td-grid-item-hover-bg-color, @bg-color-secondarycontainer);
-@grid-item-horizontal-text-padding-left: var(--td-grid-item-horizontal-text-padding-left, 24rpx);
-@grid-item-horizontal-text-description-top: var(--td-grid-item-horizontal-text-description-top, 4rpx);
+@grid-item-horizontal-text-padding-left: var(--td-grid-item-horizontal-text-padding-left, 0);
+@grid-item-horizontal-text-description-top: var(--td-grid-item-horizontal-text-description-top, 0);
 
 .@{item} {
   box-sizing: border-box;
@@ -48,6 +48,7 @@
     overflow: hidden;
     position: relative;
     padding: @grid-item-padding 0 24rpx;
+    background-color: @grid-item-bg-color;
 
     &--horizontal {
       flex-direction: row;
@@ -135,12 +136,15 @@
   }
 
   &__description {
+    padding-top: @grid-item-description-padding-top;
     width: inherit;
     color: @grid-item-description-color;
     font-size: @grid-item-description-font-size;
     line-height: @grid-item-description-line-height;
 
     &--horizontal {
+      margin-top: @grid-item-horizontal-text-description-top;
+      padding-left: @grid-item-horizontal-text-padding-left;
       text-align-last: left;
     }
   }

From e65dd44a3b217c629d4a565da13072f30e53a70e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?w=C5=AB=20y=C4=81ng?= <uyarnchen@gmail.com>
Date: Thu, 10 Aug 2023 17:02:28 +0800
Subject: [PATCH 176/202] chore: upgrade icon-view component (#2269)

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3558a89e4..b46d49b2f 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "prismjs": "^1.24.1",
     "standard-changelog": "^2.0.27",
     "stylelint": "^13.13.1",
-    "tdesign-icons-view": "^0.1.0",
+    "tdesign-icons-view": "^0.2.1",
     "tdesign-publish-cli": "^0.0.12",
     "tdesign-site-components": "^0.12.2",
     "typescript": "~4.7.2",
@@ -125,4 +125,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
\ No newline at end of file
+}

From 427a56b8812bb6bf592312b989147a315dbe12cd Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Mon, 14 Aug 2023 14:07:19 +0800
Subject: [PATCH 177/202] fix(radio): avoid unnecessary render (#2271)

* fix(radio): avoid unnecessaryrender

* test: update snapshot
---
 .../__test__/__snapshots__/index.test.js.snap | 54 +++++++++----------
 src/radio/radio.ts                            | 10 ++--
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index 0f7f8af87..8beabe9ba 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -130,14 +130,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{false}}"
                               ariaLabel="选项一"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{false}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
                                   class="placeholder"
@@ -164,7 +164,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
@@ -183,14 +183,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{false}}"
                               ariaLabel="选项二"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{false}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
                                   class="placeholder"
@@ -217,7 +217,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
@@ -236,14 +236,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{false}}"
                               ariaLabel="选项三"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{false}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-radio__icon--checked t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-class-icon"
                               >
                                 <t-icon
                                   class="t-radio__icon-wrap"
@@ -283,7 +283,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
@@ -302,14 +302,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{false}}"
                               ariaLabel="选项四"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{false}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
                                   class="placeholder"
@@ -336,7 +336,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
@@ -355,14 +355,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{false}}"
                               ariaLabel="选项五"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{false}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
                                   class="placeholder"
@@ -389,7 +389,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
@@ -408,14 +408,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{false}}"
                               ariaLabel="选项六"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{false}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
                                   class="placeholder"
@@ -442,7 +442,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
@@ -461,14 +461,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{false}}"
                               ariaLabel="选项七"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{false}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
                                   class="placeholder"
@@ -495,7 +495,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
@@ -514,14 +514,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{false}}"
                               ariaLabel="选项八"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{false}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-class-icon"
                               >
                                 <wx-view
                                   class="placeholder"
@@ -548,7 +548,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
@@ -567,14 +567,14 @@ exports[`dropdown-menu :base 1`] = `
                               ariaDisabled="{{true}}"
                               ariaLabel="禁用选项"
                               ariaRole="radio"
-                              class="t-radio t-radio--block class t-class"
+                              class="t-radio t-radio--left t-radio--block class t-class"
                               disabled="{{true}}"
                               style=""
                               tabindex=""
                               bind:tap="handleTap"
                             >
                               <wx-view
-                                class="t-radio__icon t-radio__icon--disabled t-class-icon"
+                                class="t-radio__icon t-radio__icon--left t-radio__icon--disabled t-class-icon"
                               >
                                 <wx-view
                                   class="placeholder"
@@ -601,7 +601,7 @@ exports[`dropdown-menu :base 1`] = `
                                 </wx-view>
                               </wx-view>
                               <wx-view
-                                class="t-radio__border t-class-border"
+                                class="t-radio__border t-radio__border--left t-class-border"
                               />
                             </wx-view>
                           </t-radio>
diff --git a/src/radio/radio.ts b/src/radio/radio.ts
index 08afaf4f3..799e23ee4 100644
--- a/src/radio/radio.ts
+++ b/src/radio/radio.ts
@@ -34,12 +34,7 @@ export default class Radio extends SuperComponent {
 
   lifetimes = {
     attached() {
-      this.initStatus();
-    },
-    ready() {
-      this.setData({
-        _placement: this.data.placement ?? this.$parent?.data?.placement ?? 'left',
-      });
+      this.init();
     },
   };
 
@@ -87,7 +82,7 @@ export default class Radio extends SuperComponent {
         this._trigger('change', { checked: checked && allowUncheck ? false : !checked });
       }
     },
-    initStatus() {
+    init() {
       const { icon } = this.data;
       const isIdArr = Array.isArray(this.$parent?.icon || icon);
 
@@ -95,6 +90,7 @@ export default class Radio extends SuperComponent {
         customIcon: isIdArr,
         slotIcon: icon === 'slot',
         iconVal: isIdArr ? this.$parent?.icon || icon : [],
+        _placement: this.data.placement ?? this.$parent?.data?.placement ?? 'left',
       });
     },
 

From 9bf915c6282c9ef75e57cadd2f07031afe831e95 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 15 Aug 2023 09:18:42 +0800
Subject: [PATCH 178/202] fix(swipe-cell): prevent default scroll (#2281)

---
 src/swipe-cell/swipe-cell.wxs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/swipe-cell/swipe-cell.wxs b/src/swipe-cell/swipe-cell.wxs
index 21779d7b9..16f01a2a3 100644
--- a/src/swipe-cell/swipe-cell.wxs
+++ b/src/swipe-cell/swipe-cell.wxs
@@ -133,6 +133,7 @@ var onDrag = function (event, ownerInstance) {
   }
   state.dragging = true;
   swipeMove(state.startOffset + state.deltaX);
+  return false
 };
 
 var open = function (position) {

From 3ac0b6bf1eb6bf1df7d5c9477b65d41a82f3c74e Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 15 Aug 2023 09:19:15 +0800
Subject: [PATCH 179/202] fix(collapse): enable expand all (#2280)

* fix(collapse): enable expand all

* test: update snapshot
---
 src/collapse-panel/collapse-panel.ts          | 26 +++++++++----------
 .../__test__/__snapshots__/index.test.js.snap |  8 +++---
 src/collapse/collapse.ts                      |  3 ---
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/collapse-panel/collapse-panel.ts b/src/collapse-panel/collapse-panel.ts
index 8dd950fac..a093d364b 100644
--- a/src/collapse-panel/collapse-panel.ts
+++ b/src/collapse-panel/collapse-panel.ts
@@ -20,15 +20,14 @@ export default class CollapsePanel extends SuperComponent {
     '../collapse/collapse': {
       type: 'ancestor',
       linked(target: WechatMiniprogram.Component.TrivialInstance) {
-        this.parent = target;
-        const { value, defaultExpandAll, expandMutex, expandIcon, disabled } = target.properties;
-        const activeValues = defaultExpandAll && !expandMutex ? [this.properties.value] : value;
+        const { value, expandIcon, disabled } = target.properties;
 
         this.setData({
           ultimateExpandIcon: expandIcon || this.properties.expandIcon,
           ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
         });
-        this.updateExpanded(activeValues);
+
+        this.updateExpanded(value);
       },
     },
   };
@@ -45,19 +44,14 @@ export default class CollapsePanel extends SuperComponent {
   };
 
   methods = {
-    set(data: Record<string, object | any>) {
-      this.setData(data);
-
-      return new Promise((resolve) => wx.nextTick(resolve));
-    },
-
-    updateExpanded(activeValues) {
-      if (!this.parent) {
+    updateExpanded(activeValues = []) {
+      if (!this.$parent || this.data.ultimateDisabled) {
         return;
       }
 
       const { value } = this.properties;
-      const expanded = activeValues.includes(value);
+      const { defaultExpandAll } = this.$parent.data;
+      const expanded = defaultExpandAll ? !this.data.expanded : activeValues.includes(value);
 
       if (expanded === this.properties.expanded) return;
 
@@ -90,7 +84,11 @@ export default class CollapsePanel extends SuperComponent {
 
       if (ultimateDisabled) return;
 
-      this.parent.switch(value);
+      if (this.$parent.data.defaultExpandAll) {
+        this.updateExpanded();
+      } else {
+        this.$parent.switch(value);
+      }
     },
   };
 }
diff --git a/src/collapse/__test__/__snapshots__/index.test.js.snap b/src/collapse/__test__/__snapshots__/index.test.js.snap
index 3c2af13a0..b111a347c 100644
--- a/src/collapse/__test__/__snapshots__/index.test.js.snap
+++ b/src/collapse/__test__/__snapshots__/index.test.js.snap
@@ -15,13 +15,13 @@ exports[`collapse :defaultExpandAll 1`] = `
       >
         <wx-view
           ariaDisabled="{{false}}"
-          ariaExpanded="{{false}}"
+          ariaExpanded="{{true}}"
           ariaRole="button"
           class="t-collapse-panel__title"
           bind:tap="onClick"
         >
           <t-cell
-            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-class-header"
+            tClass="t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded t-class-header"
             tClassHover="class-header-hover"
             tClassNote="class-note "
             tClassRightIcon="class-right-icon t-collapse-panel__arrow--bottom "
@@ -69,7 +69,7 @@ exports[`collapse :defaultExpandAll 1`] = `
                     bind:tap="onTap"
                   >
                     <wx-label
-                      class="t-icon-chevron-down t-icon-base"
+                      class="t-icon-chevron-up t-icon-base"
                     />
                   </wx-view>
                 </t-icon>
@@ -79,7 +79,7 @@ exports[`collapse :defaultExpandAll 1`] = `
         </wx-view>
         <wx-view
           animation=""
-          ariaHidden="{{true}}"
+          ariaHidden=""
           class="t-collapse-panel__wrapper"
         >
           <wx-view
diff --git a/src/collapse/collapse.ts b/src/collapse/collapse.ts
index c9aa92835..d63e8093d 100644
--- a/src/collapse/collapse.ts
+++ b/src/collapse/collapse.ts
@@ -19,9 +19,6 @@ export default class Collapse extends SuperComponent {
   relations: RelationsOptions = {
     '../collapse-panel/collapse-panel': {
       type: 'descendant',
-      linked() {
-        this.updateExpanded();
-      },
     },
   };
 

From acfbb30b627ce6332b90c31e2a9fe94fc95a3f9e Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 15 Aug 2023 09:30:52 +0800
Subject: [PATCH 180/202] docs(radio): update api

---
 src/radio/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/radio/README.md b/src/radio/README.md
index 3a09efa80..000532f25 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -80,7 +80,7 @@ t-class | 根节点样式类
 t-class-label | 标签样式类
 t-class-icon | 图标样式类
 t-class-content | 内容样式类
-t-class-border` | 边框样式类
+t-class-border | 边框样式类
 
 ### RadioGroup Props
 

From 39079b297d9a43a5fc6b79988039831b4b70d8d5 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 15 Aug 2023 16:45:56 +0800
Subject: [PATCH 181/202] fix(swipe-cell): enable hidden on the beginning
 (#2283)

---
 src/common/wechat.ts                  |  9 ++++++++
 src/swipe-cell/_example/swipe-cell.ts | 32 +--------------------------
 src/swipe-cell/swipe-cell.ts          |  7 ++++++
 3 files changed, 17 insertions(+), 31 deletions(-)
 create mode 100644 src/common/wechat.ts

diff --git a/src/common/wechat.ts b/src/common/wechat.ts
new file mode 100644
index 000000000..f9e39bbe0
--- /dev/null
+++ b/src/common/wechat.ts
@@ -0,0 +1,9 @@
+export const getObserver = (context, selector: string) => {
+  return new Promise((resolve, reject) => {
+    wx.createIntersectionObserver(context)
+      .relativeToViewport()
+      .observe(selector, (res) => {
+        resolve(res);
+      });
+  });
+};
diff --git a/src/swipe-cell/_example/swipe-cell.ts b/src/swipe-cell/_example/swipe-cell.ts
index 8002c41bd..560d44d43 100644
--- a/src/swipe-cell/_example/swipe-cell.ts
+++ b/src/swipe-cell/_example/swipe-cell.ts
@@ -1,31 +1 @@
-Page({
-  data: {
-    right: [
-      {
-        text: '编辑',
-        className: 't-swipe-cell-demo-btn edit-btn',
-      },
-      {
-        text: '删除',
-        className: 't-swipe-cell-demo-btn delete-btn',
-      },
-    ],
-  },
-
-  onActionClick({ detail }) {
-    wx.showToast({ title: `你点击了${detail.text}`, icon: 'none' });
-  },
-
-  onDelete() {
-    wx.showToast({ title: '你点击了删除', icon: 'none' });
-  },
-  onEdit() {
-    wx.showToast({ title: '你点击了编辑', icon: 'none' });
-  },
-  onFavor() {
-    wx.showToast({ title: '你点击了收藏', icon: 'none' });
-  },
-  onChoice() {
-    wx.showToast({ title: '你点击了选择', icon: 'none' });
-  },
-});
+Page({});
diff --git a/src/swipe-cell/swipe-cell.ts b/src/swipe-cell/swipe-cell.ts
index 4a89b930c..2ad68297c 100644
--- a/src/swipe-cell/swipe-cell.ts
+++ b/src/swipe-cell/swipe-cell.ts
@@ -2,6 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import { getRect } from '../common/utils';
+import { getObserver } from '../common/wechat';
 
 let ARRAY: WechatMiniprogram.Component.TrivialInstance[] = [];
 
@@ -49,6 +50,12 @@ export default class SwiperCell extends SuperComponent {
   setSwipeWidth() {
     Promise.all([getRect(this, `${ContainerClass}__left`), getRect(this, `${ContainerClass}__right`)]).then(
       ([leftRect, rightRect]) => {
+        if (leftRect.width === 0 && rightRect.width === 0 && !this._hasObserved) {
+          this._hasObserved = true;
+          getObserver(this, `.${name}`).then(() => {
+            this.setSwipeWidth();
+          });
+        }
         this.setData({
           leftWidth: leftRect.width,
           rightWidth: rightRect.width,

From 7ed31704ec8f6eeaabd8d51092ff5574f16c3b4a Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 15 Aug 2023 17:33:57 +0800
Subject: [PATCH 182/202] fix(checkbox): enable icon using slot (#2285)

---
 src/checkbox/checkbox.wxml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/checkbox/checkbox.wxml b/src/checkbox/checkbox.wxml
index 4aaf52d37..08b9582d9 100644
--- a/src/checkbox/checkbox.wxml
+++ b/src/checkbox/checkbox.wxml
@@ -13,7 +13,8 @@
     wx:if="{{theme == 'default'}}"
     class="{{_.cls(classPrefix + '__icon', [placement, ['checked', checked], ['disabled', disabled]])}} {{prefix}}-class-icon"
   >
-    <view wx:if="{{_.isArray(icon)}}" class="{{classPrefix}}__icon">
+    <slot name="icon" wx:if="{{icon === 'slot'}}" />
+    <view wx:elif="{{_.isArray(icon)}}" class="{{classPrefix}}__icon">
       <image
         src="{{checked ? indeterminate && icon[2] ? icon[2] : icon[0] : icon[1]}}"
         class="{{classPrefix}}__icon-image"

From 277d8c7e8005b0624d378d08c385b28e06ddeecd Mon Sep 17 00:00:00 2001
From: ElanYoung <39727435+ElanYoung@users.noreply.github.com>
Date: Wed, 16 Aug 2023 09:18:34 +0800
Subject: [PATCH 183/202] feat(loading): add css variable for text color
 (#2273)

* feat(loading): add css variable for text color

BREAKING CHANGE: q

* fix(loading): update text color

* docs(loading): update css variables
---
 src/loading/README.en-US.md | 1 +
 src/loading/README.md       | 1 +
 src/loading/loading.less    | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/src/loading/README.en-US.md b/src/loading/README.en-US.md
index 1af7609f7..c2414ba34 100644
--- a/src/loading/README.en-US.md
+++ b/src/loading/README.en-US.md
@@ -25,5 +25,6 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description 
 -- | -- | --
 --td-loading-color | @brand-color | - 
+--td-loading-text-color | inherit | - 
 --td-loading-text-font-size | 24rpx | - 
 --td-loading-text-line-height | 40rpx | - 
diff --git a/src/loading/README.md b/src/loading/README.md
index 037b52166..18ee4c87a 100644
--- a/src/loading/README.md
+++ b/src/loading/README.md
@@ -80,5 +80,6 @@ t-class-indicator | 指示符样式类
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-loading-color | @brand-color | - 
+--td-loading-text-color | inherit | - 
 --td-loading-text-font-size | 24rpx | - 
 --td-loading-text-line-height | 40rpx | - 
diff --git a/src/loading/loading.less b/src/loading/loading.less
index eeb5429c7..3ca6f0809 100644
--- a/src/loading/loading.less
+++ b/src/loading/loading.less
@@ -3,6 +3,7 @@
 @loading: ~'@{prefix}-loading';
 
 @loading-color: var(--td-loading-color, @brand-color);
+@loading-text-color: var(--td-loading-text-color, inherit);
 @loading-text-font-size: var(--td-loading-text-font-size, 24rpx);
 @loading-text-line-height: var(--td-loading-text-line-height, 40rpx);
 
@@ -89,6 +90,7 @@
   }
 
   &__text {
+    color: @loading-text-color;
     font-size: @loading-text-font-size;
     line-height: @loading-text-line-height;
 

From e2a4c8f09a4666df5f7c63da3bed0308258fbc11 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Wed, 16 Aug 2023 16:45:07 +0800
Subject: [PATCH 184/202] fix(popup): resolve scroll over throught (#2290)

* fix(popup): resolve scroll over throught

* test: update snapshot

* fix(popup): prevent scroll throught
---
 .../__test__/__snapshots__/index.test.js.snap        |  3 +++
 .../__test__/__snapshots__/index.test.js.snap        |  3 +++
 src/dialog/__test__/__snapshots__/index.test.js.snap |  3 +++
 .../__test__/__snapshots__/index.test.js.snap        |  3 +++
 src/picker/__test__/__snapshots__/index.test.js.snap |  3 +++
 src/popup/popup.ts                                   |  2 --
 src/popup/popup.wxml                                 | 12 ++++++++----
 src/popup/popup.wxs                                  |  7 +++++++
 8 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index 62d1bde0e..f56032e0c 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -13,7 +13,10 @@ exports[`calendar :base 1`] = `
         bind:transitionend="onTransitionEnd"
       >
         <wx-view
+          $gdc="{{[Function]}}"
+          $wxs:bind:touchmove="{{[Function]}}"
           class="t-popup__content t-class-content"
+          data-prevention="{{true}}"
         >
           <wx-view
             class="t-calendar t-calendar--popup class t-class"
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
index 85ae4c782..3cdd66378 100644
--- a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -21,7 +21,10 @@ exports[`date-time-picker :base 1`] = `
           bind:transitionend="onTransitionEnd"
         >
           <wx-view
+            $gdc="{{[Function]}}"
+            $wxs:bind:touchmove="{{[Function]}}"
             class="t-popup__content t-class-content"
+            data-prevention="{{true}}"
           >
             <wx-view
               class="t-picker t-class"
diff --git a/src/dialog/__test__/__snapshots__/index.test.js.snap b/src/dialog/__test__/__snapshots__/index.test.js.snap
index 44d4bad1b..af0024362 100644
--- a/src/dialog/__test__/__snapshots__/index.test.js.snap
+++ b/src/dialog/__test__/__snapshots__/index.test.js.snap
@@ -16,7 +16,10 @@ exports[`dialog :base 1`] = `
         bind:transitionend="onTransitionEnd"
       >
         <wx-view
+          $gdc="{{[Function]}}"
+          $wxs:bind:touchmove="{{[Function]}}"
           class="t-popup__content t-class-content"
+          data-prevention="{{true}}"
         >
           <wx-view
             class="t-dialog t-class"
diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index 8beabe9ba..6c64e74ad 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -96,7 +96,10 @@ exports[`dropdown-menu :base 1`] = `
               bind:transitionend="onTransitionEnd"
             >
               <wx-view
+                $gdc="{{[Function]}}"
+                $wxs:bind:touchmove="{{[Function]}}"
                 class="t-popup__content t-class-content"
+                data-prevention="{{true}}"
               >
                 <wx-view
                   class="t-dropdown-item__body"
diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
index 3db69f84a..efa7530be 100644
--- a/src/picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -18,7 +18,10 @@ exports[`picker :base 1`] = `
       bind:transitionend="onTransitionEnd"
     >
       <wx-view
+        $gdc="{{[Function]}}"
+        $wxs:bind:touchmove="{{[Function]}}"
         class="t-popup__content t-class-content"
+        data-prevention="{{true}}"
       >
         <wx-view
           class="t-picker t-class"
diff --git a/src/popup/popup.ts b/src/popup/popup.ts
index 2984cb132..c0b1534f0 100644
--- a/src/popup/popup.ts
+++ b/src/popup/popup.ts
@@ -29,8 +29,6 @@ export default class Popup extends SuperComponent {
   };
 
   methods = {
-    onStopPropagation() {},
-
     handleOverlayClick() {
       const { closeOnOverlayClick } = this.properties;
       if (closeOnOverlayClick) {
diff --git a/src/popup/popup.wxml b/src/popup/popup.wxml
index 35671a964..72a80d0fd 100644
--- a/src/popup/popup.wxml
+++ b/src/popup/popup.wxml
@@ -1,14 +1,18 @@
-<wxs src="./popup.wxs" module="utils" />
+<wxs src="./popup.wxs" module="popup" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
   wx:if="{{realVisible}}"
-  style="{{_._style([utils.getPopupStyles(zIndex), style, customStyle])}}"
+  style="{{_._style([popup.getPopupStyles(zIndex), style, customStyle])}}"
   class="{{_.cls(classPrefix, [placement])}} {{transitionClass}} class {{prefix}}-class"
   bind:transitionend="onTransitionEnd"
 >
   <!-- 暂时移除：aria-role="dialog" aria-modal="{{ true }}"，关联：https://github.com/Tencent/tdesign-miniprogram/issues/2142 -->
-  <view class="{{classPrefix}}__content {{prefix}}-class-content">
+  <view
+    data-prevention="{{preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)}}"
+    bind:touchmove="{{popup.onContentTouchMove}}"
+    class="{{classPrefix}}__content {{prefix}}-class-content"
+  >
     <slot name="content" />
     <slot />
     <view class="{{classPrefix}}__close" bind:tap="handleClose">
@@ -23,7 +27,7 @@
   wx:if="{{showOverlay}}"
   visible="{{visible}}"
   z-index="{{overlayProps && overlayProps.zIndex || 11000}}"
-  prevent-scroll-through="{{preventScrollThrough || overlayProps && overlayProps.preventScrollThrough}}"
+  prevent-scroll-through="{{preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)}}"
   bind:tap="handleOverlayClick"
   custom-style="{{overlayProps && overlayProps.style || ''}}"
 />
diff --git a/src/popup/popup.wxs b/src/popup/popup.wxs
index a2da0d0ae..20be1302b 100644
--- a/src/popup/popup.wxs
+++ b/src/popup/popup.wxs
@@ -3,6 +3,13 @@ function getPopupStyles(zIndex) {
   return zIndexStyle;
 }
 
+function onContentTouchMove (e) {
+  if (e.target.dataset.prevention) {
+    return false;
+  };
+}
+
 module.exports = {
   getPopupStyles: getPopupStyles,
+  onContentTouchMove: onContentTouchMove
 };

From 84aed3441a3ea131170de6ff0ffe2c0e10c62e8b Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Wed, 16 Aug 2023 16:54:37 +0800
Subject: [PATCH 185/202] chore: publish v1.2.0 (#2293)

* chore: publish v1.2.0

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 24 ++++++++++++++++++++++++
 package.json |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb7e27611..a1e718e7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,30 @@ toc: false
 docClass: timeline
 ---
 
+ ## 🌈 1.2.0 `2023-08-16` 
+### 🚀 Features
+- `Search`: 支持透传更多 Input 的属性 @betavs ([#2229](https://github.com/Tencent/tdesign-miniprogram/pull/2229))
+- `Icon`: 图标更新，新增 `960` 个图标 @anlyyao ([#2254](https://github.com/Tencent/tdesign-miniprogram/pull/2254))
+- `Input`: 新增  `--td-input-label-max-width` 和 `--td-input-label-min-width` 两个样式变量 @anlyyao ([#2259](https://github.com/Tencent/tdesign-miniprogram/pull/2259))
+- `Loading`: 新增 CSS Variable 用于调整加载提示文案颜色 @ElanYoung ([#2273](https://github.com/Tencent/tdesign-miniprogram/pull/2273))
+
+### 🐞 Bug Fixes
+- `Swiper`: 修复图片加载中/加载错误占位符未居中的问题 @anlyyao ([#2246](https://github.com/Tencent/tdesign-miniprogram/pull/2246))
+- `TabBar`: 修复示例代码展示错误 @anlyyao ([#2257](https://github.com/Tencent/tdesign-miniprogram/pull/2257))
+- `Input`: 修复 `t-class-label` 外部样式类无法修改 `label` 宽度 @anlyyao ([#2259](https://github.com/Tencent/tdesign-miniprogram/pull/2259))
+- `GridItem`: 修复无效的css变量 @betavs ([#2253](https://github.com/Tencent/tdesign-miniprogram/pull/2253))
+- `Radio`: 修复调整 placement 之后的渲染抖动的问题 @LeeJim ([#2271](https://github.com/Tencent/tdesign-miniprogram/pull/2271))
+- `SwipeCell`: 阻止默认的垂直滚动，优化交互体验 @LeeJim ([#2281](https://github.com/Tencent/tdesign-miniprogram/pull/2281))
+- `Collapse`: 修复默认展开全部时，无法正常收起的问题 @LeeJim ([#2280](https://github.com/Tencent/tdesign-miniprogram/pull/2280))
+- `SwipeCell`: 使用 hidden 隐藏后显示仍能够正常使用 @LeeJim ([#2283](https://github.com/Tencent/tdesign-miniprogram/pull/2283))
+- `Checkbox`: 修复 icon 无法使用插槽的问题 @LeeJim ([#2285](https://github.com/Tencent/tdesign-miniprogram/pull/2285))
+- `Popup`: 修复滚动穿透的问题 @LeeJim ([#2290](https://github.com/Tencent/tdesign-miniprogram/pull/2290))
+
+### 🚧 Others
+- `Swiper`: 修复示例错误 @anlyyao ([#2246](https://github.com/Tencent/tdesign-miniprogram/pull/2246))
+- `Swiper`: 补充外部样式类信息 @LeeJim ([#2256](https://github.com/Tencent/tdesign-miniprogram/pull/2256))
+- `Icon`: 更新图标展示UI组件至 0.2.0 版本 @uyarn ([#2269](https://github.com/Tencent/tdesign-miniprogram/pull/2269)) 
+
 ## 🌈 1.1.15 `2023-08-01` 
 ### 🚀 Features
 - `DropdownMenu`: 支持自定义箭头图标 @LeeJim ([#2240](https://github.com/Tencent/tdesign-miniprogram/pull/2240))
diff --git a/package.json b/package.json
index b46d49b2f..914c26425 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.1.15",
+  "version": "1.2.0",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",
@@ -125,4 +125,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
+}
\ No newline at end of file

From 295dfd32a7181d6d69ad1026194354e4f449c57e Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Thu, 17 Aug 2023 11:17:56 +0800
Subject: [PATCH 186/202] feat(radio): enable readonly (#2292)

---
 src/radio-group/radio-group.wxml | 1 +
 src/radio-group/type.ts          | 1 +
 src/radio/README.en-US.md        | 1 +
 src/radio/README.md              | 1 +
 src/radio/props.ts               | 5 +++++
 src/radio/radio.ts               | 2 +-
 src/radio/type.ts                | 8 ++++++++
 7 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/radio-group/radio-group.wxml b/src/radio-group/radio-group.wxml
index 671705e56..4020f53c4 100644
--- a/src/radio-group/radio-group.wxml
+++ b/src/radio-group/radio-group.wxml
@@ -15,6 +15,7 @@
       content="{{item.content || ''}}"
       allow-uncheck="{{item.allowUncheck || false}}"
       content-disabled="{{item.contentDisabled || false}}"
+      readonly="{{item.readonly || false}}"
       disabled="{{item.disabled || false}}"
       icon="{{item.icon || icon}}"
       placement="{{item.placement || placement}}"
diff --git a/src/radio-group/type.ts b/src/radio-group/type.ts
index ef77eeb4b..dc666c07e 100644
--- a/src/radio-group/type.ts
+++ b/src/radio-group/type.ts
@@ -89,6 +89,7 @@ export type RadioOption = string | number | RadioOptionObj;
 export interface RadioOptionObj {
   label?: string;
   value?: string | number;
+  readonly?: boolean;
   disabled?: boolean;
   allowUncheck?: boolean;
 }
diff --git a/src/radio/README.en-US.md b/src/radio/README.en-US.md
index 6f49f9e21..97fa9df19 100644
--- a/src/radio/README.en-US.md
+++ b/src/radio/README.en-US.md
@@ -33,6 +33,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 placement | String | left | options：left/right | N
 borderless | Boolean | false | \- | N
+readonly | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
 icon | String / Array | 'circle' | Typescript：`'circle' | 'line' | Array<string>` | N
 keys | Object | - | Typescript：`KeysType` | N
diff --git a/src/radio/README.md b/src/radio/README.md
index 000532f25..03dbca0db 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -59,6 +59,7 @@ checked | Boolean | false | 是否选中 | N
 default-checked | Boolean | undefined | 是否选中。非受控属性 | N
 content | String / Slot | - | 单选内容 | N
 content-disabled | Boolean | false | 是否禁用组件内容（content）触发选中 | N
+readonly | Boolean | false | 只读状态 | N
 disabled | Boolean | undefined | 是否为禁用态 | N
 icon | String / Array / Slot | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽。TS 类型：`'circle' \| 'line' \| 'dot' \| Array<string>` | N
 label | String / Slot | - | 主文案 | N
diff --git a/src/radio/props.ts b/src/radio/props.ts
index a51aa2848..cfe79076d 100644
--- a/src/radio/props.ts
+++ b/src/radio/props.ts
@@ -40,6 +40,11 @@ const props: TdRadioProps = {
     type: Boolean,
     value: false,
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    value: false,
+  },
   /** 是否为禁用态 */
   disabled: {
     type: Boolean,
diff --git a/src/radio/radio.ts b/src/radio/radio.ts
index 799e23ee4..b97d33693 100644
--- a/src/radio/radio.ts
+++ b/src/radio/radio.ts
@@ -65,7 +65,7 @@ export default class Radio extends SuperComponent {
 
   methods = {
     handleTap(e) {
-      if (this.data.disabled) return;
+      if (this.data.disabled || this.data.readonly) return;
 
       const { target } = e.currentTarget.dataset;
 
diff --git a/src/radio/type.ts b/src/radio/type.ts
index d4af04476..2ae247bb7 100644
--- a/src/radio/type.ts
+++ b/src/radio/type.ts
@@ -68,6 +68,14 @@ export interface TdRadioProps<T = RadioValue> {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 只读状态
+   * @default false
+   */
+  readonly?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 是否为禁用态
    */

From a87218b219d67238ad1f409cc82556ed4e4774c3 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Fri, 18 Aug 2023 15:53:55 +0800
Subject: [PATCH 187/202] fix(CellGroup): resolved updateLastChid is triggered
 multiple times (#2302)

---
 src/cell-group/cell-group.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/cell-group/cell-group.ts b/src/cell-group/cell-group.ts
index 57f6a574b..90498984f 100644
--- a/src/cell-group/cell-group.ts
+++ b/src/cell-group/cell-group.ts
@@ -12,9 +12,6 @@ export default class CellGroup extends SuperComponent {
   relations: RelationsOptions = {
     '../cell/cell': {
       type: 'child',
-      linked() {
-        this.updateLastChid();
-      },
     },
   };
 
@@ -35,6 +32,12 @@ export default class CellGroup extends SuperComponent {
     classPrefix: name,
   };
 
+  lifetimes = {
+    ready() {
+      this.updateLastChid();
+    },
+  };
+
   methods = {
     updateLastChid() {
       const items = this.$children;

From cdce071c9639c68a56c0ba5c3d2037c22116185c Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Sat, 19 Aug 2023 09:29:03 +0800
Subject: [PATCH 188/202] fix(Popup): resolved visibleChange event parameter
 error (#2303)

---
 src/popup/popup.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/popup/popup.ts b/src/popup/popup.ts
index c0b1534f0..bacae1033 100644
--- a/src/popup/popup.ts
+++ b/src/popup/popup.ts
@@ -32,12 +32,12 @@ export default class Popup extends SuperComponent {
     handleOverlayClick() {
       const { closeOnOverlayClick } = this.properties;
       if (closeOnOverlayClick) {
-        this.triggerEvent('visible-change', { visible: false });
+        this.triggerEvent('visible-change', { visible: false, trigger: 'overlay' });
       }
     },
 
     handleClose() {
-      this.triggerEvent('visible-change', { visible: false });
+      this.triggerEvent('visible-change', { visible: false, trigger: 'close-btn' });
     },
   };
 }

From 03d38c83e599a7875420c0866e12ddf2067fcc3e Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Mon, 21 Aug 2023 23:15:54 +0800
Subject: [PATCH 189/202] fix(rate): when value = 0, default-value != 0,
 allow-half = true, the effect is abnormal (#2307)

---
 src/rate/rate.wxs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/rate/rate.wxs b/src/rate/rate.wxs
index d799da422..8387b108b 100644
--- a/src/rate/rate.wxs
+++ b/src/rate/rate.wxs
@@ -8,7 +8,7 @@ module.exports = {
   },
 
   getIconName: function (defaultValue, value, index, icon) {
-    var curVal = value ? value : defaultValue;
+    var curVal = value >= 0 ? value : defaultValue;
     var name = ['star-filled', 'star-filled'];
 
     if (icon) {
@@ -19,7 +19,7 @@ module.exports = {
   },
 
   getIconClass: function (classPrefix, defaultValue, value, index, allowHalf, disabled, scaleIndex) {
-    var curVal = value ? value : defaultValue;
+    var curVal = value >= 0 ? value : defaultValue;
     var className = [];
     if (curVal >= index + 1) {
       className.push(classPrefix + '--selected');

From dea36064b2e79ca5942cba638a77dc2155efa6ee Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 22 Aug 2023 16:00:27 +0800
Subject: [PATCH 190/202] chore: update swiper demo

---
 src/swiper/_example/swiper.wxml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/swiper/_example/swiper.wxml b/src/swiper/_example/swiper.wxml
index df274944f..22b3d843a 100644
--- a/src/swiper/_example/swiper.wxml
+++ b/src/swiper/_example/swiper.wxml
@@ -19,7 +19,7 @@
       <nav-btn />
     </t-demo>
 
-    <t-demo desc="切换按钮（controls）">
+    <t-demo desc="卡片式（cards）">
       <cards />
     </t-demo>
 

From 29154a4e9dbd474c41d766e82af82e9b00b81ad6 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 22 Aug 2023 16:32:36 +0800
Subject: [PATCH 191/202] fix(radio): resolve event propagation (#2309)

* fix(radio): resolve event propagation

* test: update snapshot
---
 src/checkbox/checkbox.ts                      |  2 +-
 src/checkbox/checkbox.wxml                    |  4 +--
 .../__test__/__snapshots__/index.test.js.snap | 36 +++++++++----------
 src/radio/radio.wxml                          |  4 +--
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/checkbox/checkbox.ts b/src/checkbox/checkbox.ts
index 462dffba4..b1b69d3c5 100644
--- a/src/checkbox/checkbox.ts
+++ b/src/checkbox/checkbox.ts
@@ -68,7 +68,7 @@ export default class CheckBox extends SuperComponent {
   ];
 
   methods = {
-    onChange(e: WechatMiniprogram.TouchEvent) {
+    handleTap(e: WechatMiniprogram.TouchEvent) {
       const { disabled, readonly } = this.data;
 
       if (disabled || readonly) return;
diff --git a/src/checkbox/checkbox.wxml b/src/checkbox/checkbox.wxml
index 08b9582d9..d78ae8016 100644
--- a/src/checkbox/checkbox.wxml
+++ b/src/checkbox/checkbox.wxml
@@ -6,7 +6,7 @@
   aria-role="checkbox"
   aria-checked="{{checked ? (indeterminate ? 'mixed' : true) : false}}"
   aria-disabled="{{disabled ? true : false}}"
-  bind:tap="onChange"
+  mut-bind:tap="handleTap"
   tabindex="{{tabindex}}"
 >
   <view
@@ -39,7 +39,7 @@
       <view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
     </block>
   </view>
-  <view class="{{classPrefix}}__content" data-target="text" catch:tap="onChange">
+  <view class="{{classPrefix}}__content" data-target="text" mut-bind:tap="handleTap">
     <view
       class="{{_.cls(classPrefix + '__title', [['disabled', disabled], ['checked', checked]])}} {{prefix}}-class-label"
       style="-webkit-line-clamp:{{maxLabelRow}}"
diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index 6c64e74ad..ec94925df 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -137,7 +137,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{false}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
@@ -149,7 +149,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-class-label"
@@ -190,7 +190,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{false}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
@@ -202,7 +202,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-class-label"
@@ -243,7 +243,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{false}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-radio__icon--checked t-class-icon"
@@ -268,7 +268,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-radio__title--checked t-class-label"
@@ -309,7 +309,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{false}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
@@ -321,7 +321,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-class-label"
@@ -362,7 +362,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{false}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
@@ -374,7 +374,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-class-label"
@@ -415,7 +415,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{false}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
@@ -427,7 +427,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-class-label"
@@ -468,7 +468,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{false}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
@@ -480,7 +480,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-class-label"
@@ -521,7 +521,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{false}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-class-icon"
@@ -533,7 +533,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-class-label"
@@ -574,7 +574,7 @@ exports[`dropdown-menu :base 1`] = `
                               disabled="{{true}}"
                               style=""
                               tabindex=""
-                              bind:tap="handleTap"
+                              mut-bind:tap="handleTap"
                             >
                               <wx-view
                                 class="t-radio__icon t-radio__icon--left t-radio__icon--disabled t-class-icon"
@@ -586,7 +586,7 @@ exports[`dropdown-menu :base 1`] = `
                               <wx-view
                                 class="t-radio__content"
                                 data-target="text"
-                                catch:tap="handleTap"
+                                mut-bind:tap="handleTap"
                               >
                                 <wx-view
                                   class="t-radio__title t-radio__title--disabled t-class-label"
diff --git a/src/radio/radio.wxml b/src/radio/radio.wxml
index bfb59904e..04406b0d2 100644
--- a/src/radio/radio.wxml
+++ b/src/radio/radio.wxml
@@ -9,7 +9,7 @@
   aria-label="{{label + content}}"
   aria-disabled="{{disabled}}"
   tabindex="{{tabindex}}"
-  bind:tap="handleTap"
+  mut-bind:tap="handleTap"
 >
   <view
     class="{{_.cls(classPrefix + '__icon', [_placement, ['checked', checked], ['disabled', disabled]])}} {{prefix}}-class-icon"
@@ -37,7 +37,7 @@
     </block>
   </view>
 
-  <view class="{{classPrefix}}__content" data-target="text" catch:tap="handleTap">
+  <view class="{{classPrefix}}__content" data-target="text" mut-bind:tap="handleTap">
     <view
       class="{{_.cls(classPrefix + '__title', [['disabled', disabled], ['checked', checked]])}} {{prefix}}-class-label"
       style="-webkit-line-clamp:{{maxLabelRow}}"

From 9088f56710f6bacd158cbf2e0f04ad65db64f223 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 22 Aug 2023 22:53:18 +0800
Subject: [PATCH 192/202] chore: publish v1.2.1 (#2310)

* chore: publish v1.2.1

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 11 +++++++++++
 package.json |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a1e718e7f..5719b1cca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,17 @@ toc: false
 docClass: timeline
 ---
 
+  ## 🌈 1.2.1 `2023-08-22` 
+### 🚀 Features
+- `Radio`: 新增 `readonly` 属性 @betavs ([#2292](https://github.com/Tencent/tdesign-miniprogram/pull/2292))
+### 🐞 Bug Fixes
+- `CellGroup`: 修复 `updateLastChid` 事件被多次触发的问题 @anlyyao ([#2302](https://github.com/Tencent/tdesign-miniprogram/pull/2302))
+- `Popup`: 修复 `visibleChange` 事件参数错误的问题 @anlyyao ([#2303](https://github.com/Tencent/tdesign-miniprogram/pull/2303))
+- `Rate`: 修复value = 0 且半选时图标错误的问题 @betavs ([#2307](https://github.com/Tencent/tdesign-miniprogram/pull/2307))
+- `Radio`: 修复 tap 事件无法冒泡的问题 @LeeJim ([#2309](https://github.com/Tencent/tdesign-miniprogram/pull/2309))
+- `Checkbox`: 修复 tap 事件无法冒泡的问题 @LeeJim ([#2309](https://github.com/Tencent/tdesign-miniprogram/pull/2309))
+ 
+
  ## 🌈 1.2.0 `2023-08-16` 
 ### 🚀 Features
 - `Search`: 支持透传更多 Input 的属性 @betavs ([#2229](https://github.com/Tencent/tdesign-miniprogram/pull/2229))
diff --git a/package.json b/package.json
index 914c26425..c8fc7ce38 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",

From a154eef53c87666838527a945f1805acf695809a Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Wed, 23 Aug 2023 15:53:53 +0800
Subject: [PATCH 193/202] fix(stepper): enable input decimal number (#2314)

* fix(stepper): enable input decimal number

* test: update snapshot
---
 .../__test__/__snapshots__/index.test.js.snap | 12 +--
 src/stepper/__test__/index.test.js            |  3 +-
 src/stepper/stepper.ts                        | 85 +++++++++----------
 src/stepper/stepper.wxml                      |  6 +-
 4 files changed, 50 insertions(+), 56 deletions(-)

diff --git a/src/stepper/__test__/__snapshots__/index.test.js.snap b/src/stepper/__test__/__snapshots__/index.test.js.snap
index 24d454a7f..a272b7b63 100644
--- a/src/stepper/__test__/__snapshots__/index.test.js.snap
+++ b/src/stepper/__test__/__snapshots__/index.test.js.snap
@@ -38,9 +38,9 @@ exports[`stepper event : input 1`] = `
       style=""
       type="number"
       value="{{4}}"
-      catch:blur="blurHandle"
-      catch:focus="focusHandle"
-      catch:input="inputHandle"
+      catch:blur="handleBlur"
+      catch:focus="handleFocus"
+      catch:input="handleInput"
     />
   </wx-view>
   <wx-view
@@ -108,9 +108,9 @@ exports[`stepper event : input 2`] = `
       style=""
       type="number"
       value="{{4}}"
-      catch:blur="blurHandle"
-      catch:focus="focusHandle"
-      catch:input="inputHandle"
+      catch:blur="handleBlur"
+      catch:focus="handleFocus"
+      catch:input="handleInput"
     />
   </wx-view>
   <wx-view
diff --git a/src/stepper/__test__/index.test.js b/src/stepper/__test__/index.test.js
index d63086134..931b9c971 100644
--- a/src/stepper/__test__/index.test.js
+++ b/src/stepper/__test__/index.test.js
@@ -126,7 +126,7 @@ describe('stepper', () => {
   });
 
   describe('event', () => {
-    it(': chang', async () => {
+    it(':change', async () => {
       let inputValue;
       const handleChange = jest.fn((e) => {
         inputValue = e.detail;
@@ -272,6 +272,7 @@ describe('stepper', () => {
 
       const $input = comp.querySelector('.base >>> .t-stepper__input');
       $input.dispatchEvent('input', { detail: { value: 88 } });
+      $input.dispatchEvent('blur', { detail: { value: 88 } });
       await simulate.sleep(0);
       expect($stepper.toJSON()).toMatchSnapshot();
       expect(handleChange).toHaveBeenCalledTimes(1);
diff --git a/src/stepper/stepper.ts b/src/stepper/stepper.ts
index 6d0ba4644..07243c2e2 100644
--- a/src/stepper/stepper.ts
+++ b/src/stepper/stepper.ts
@@ -24,7 +24,10 @@ export default class Stepper extends SuperComponent {
 
   observers = {
     value(v) {
-      this.observeValue(v);
+      this.preValue = Number(v);
+      this.setData({
+        currentValue: this.format(Number(v)),
+      });
     },
   };
 
@@ -34,12 +37,14 @@ export default class Stepper extends SuperComponent {
     prefix,
   };
 
-  attached() {
-    const { value, min } = this.properties;
-    this.setData({
-      currentValue: value ? Number(value) : min,
-    });
-  }
+  lifetimes = {
+    attached() {
+      const { value, min } = this.properties;
+      this.setData({
+        currentValue: value ? Number(value) : min,
+      });
+    },
+  };
 
   isDisabled(type) {
     const { min, max, disabled } = this.properties;
@@ -56,21 +61,11 @@ export default class Stepper extends SuperComponent {
     return false;
   }
 
-  observeValue(v) {
-    this.preValue = Number(v);
-    this.setData({
-      currentValue: this.format(Number(v)),
-    });
-  }
-
   getLen(num: number) {
     const numStr = num.toString();
     return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
   }
 
-  /**
-   * 精确加法
-   */
   add(a: number, b: number) {
     const maxLen = Math.max(this.getLen(a), this.getLen(b));
     const base = 10 ** maxLen;
@@ -79,13 +74,13 @@ export default class Stepper extends SuperComponent {
 
   format(value) {
     const { min, max, step } = this.properties as any;
+    const len = Math.max(this.getLen(step), this.getLen(value));
     // 超过边界取边界值
-    return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(
-      this.getLen(step),
-    );
+    return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER).toFixed(len);
   }
 
   setValue(value) {
+    value = this.format(value);
     if (this.preValue === value) return;
     this.preValue = value;
     this._trigger('change', { value: Number(value) });
@@ -97,7 +92,7 @@ export default class Stepper extends SuperComponent {
       return false;
     }
     const { currentValue, step } = this.data as any;
-    this.setValue(this.format(this.add(currentValue, -step)));
+    this.setValue(this.add(currentValue, -step));
   }
 
   plusValue() {
@@ -106,34 +101,32 @@ export default class Stepper extends SuperComponent {
       return false;
     }
     const { currentValue, step } = this.data as any;
-    this.setValue(this.format(this.add(currentValue, step)));
+    this.setValue(this.add(currentValue, step));
   }
 
-  changeValue(e) {
-    const value =
-      String(e.detail.value)
-        .split('.')[0]
-        .replace(/[^-0-9]/g, '') || 0;
-    this.setValue(this.format(Number(value)));
-    return value;
-  }
+  methods = {
+    handleFocus(e) {
+      const { value } = e.detail;
 
-  focusHandle(e) {
-    const value = this.changeValue(e);
-    this.triggerEvent('focus', { value });
-  }
+      this.triggerEvent('focus', { value });
+    },
 
-  inputHandle(e) {
-    // 允许输入空值
-    if (e.detail.value === '') {
-      return;
-    }
-    const value = this.changeValue(e);
-    this.triggerEvent('input', { value });
-  }
+    handleInput(e) {
+      const { value } = e.detail;
+      // 允许输入空值
+      if (value === '') {
+        return;
+      }
 
-  blurHandle(e) {
-    const value = this.changeValue(e);
-    this.triggerEvent('blur', { value });
-  }
+      this.triggerEvent('input', { value });
+    },
+
+    handleBlur(e) {
+      const { value: rawValue } = e.detail;
+      const value = this.format(rawValue);
+
+      this.setValue(value);
+      this.triggerEvent('blur', { value });
+    },
+  };
 }
diff --git a/src/stepper/stepper.wxml b/src/stepper/stepper.wxml
index 2e5dbfb6d..225e238ba 100644
--- a/src/stepper/stepper.wxml
+++ b/src/stepper/stepper.wxml
@@ -20,9 +20,9 @@
       disabled="{{ disabled || disableInput }}"
       type="number"
       value="{{ currentValue }}"
-      catchinput="inputHandle"
-      catchfocus="focusHandle"
-      catchblur="blurHandle"
+      catchinput="handleInput"
+      catchfocus="handleFocus"
+      catchblur="handleBlur"
     />
   </view>
   <view

From 3a4d38312c3b10a36fbb24b0137d3eb27bc22118 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Wed, 23 Aug 2023 16:12:01 +0800
Subject: [PATCH 194/202] fix(tree-select): resolve async options (#2315)

* fix(tree-select): resolve async options

* fix(tree-select): resolve error when data or options is async
---
 src/tree-select/tree-select.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/tree-select/tree-select.ts b/src/tree-select/tree-select.ts
index 784400736..13507fb0e 100644
--- a/src/tree-select/tree-select.ts
+++ b/src/tree-select/tree-select.ts
@@ -30,7 +30,7 @@ export default class TreeSelect extends SuperComponent {
   ];
 
   observers = {
-    value() {
+    'value, options, keys, multiple'() {
       this.buildTreeOptions();
     },
   };
@@ -42,6 +42,8 @@ export default class TreeSelect extends SuperComponent {
       let level = -1;
       let node = { children: options };
 
+      if (options.length === 0 || (Array.isArray(value) && value.length === 0)) return;
+
       while (node && node.children) {
         level += 1;
         const list = node.children.map((item: TreeOptionData) => ({

From c16b5672fe2da5d3ebae5badfa031cd9e75d2541 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Fri, 25 Aug 2023 16:10:44 +0800
Subject: [PATCH 195/202] fix(action-sheet): remove unused component (#2318)

---
 src/action-sheet/action-sheet.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/action-sheet/action-sheet.json b/src/action-sheet/action-sheet.json
index c1eb33ecb..55e98e848 100644
--- a/src/action-sheet/action-sheet.json
+++ b/src/action-sheet/action-sheet.json
@@ -4,7 +4,6 @@
     "t-icon": "../icon/icon",
     "t-popup": "../popup/popup",
     "t-grid": "../grid/grid",
-    "t-grid-item": "../grid-item/grid-item",
-    "t-swiper-nav": "../swiper-nav/swiper-nav"
+    "t-grid-item": "../grid-item/grid-item"
   }
 }

From 9fa21a8da0308cdc7749d62109441400cc7a4179 Mon Sep 17 00:00:00 2001
From: twinkleli <310227663@qq.com>
Date: Tue, 29 Aug 2023 11:51:05 +0800
Subject: [PATCH 196/202] =?UTF-8?q?feat(rate):=20rate=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=BA=93=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E5=89=8D=E7=BC=80iconPrefix,=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=89=E6=96=B9=E5=9B=BE=E6=A0=87=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

rate组件库支持自定义图标前缀iconPrefix,适配第三方图标库

fix #2327
---
 package.json                               |  2 +-
 src/rate/README.en-US.md                   | 63 +++++++++++---------
 src/rate/README.md                         | 67 ++++++++++++----------
 src/rate/_example/custom-prefix/index.js   | 13 +++++
 src/rate/_example/custom-prefix/index.json |  6 ++
 src/rate/_example/custom-prefix/index.wxml |  4 ++
 src/rate/_example/custom-prefix/index.wxss | 22 +++++++
 src/rate/_example/iconfont.wxss            | 31 ++++++++++
 src/rate/_example/rate.json                |  1 +
 src/rate/_example/rate.less                |  1 +
 src/rate/_example/rate.wxml                |  3 +
 src/rate/props.ts                          |  5 ++
 src/rate/rate.wxml                         |  1 +
 src/rate/type.ts                           |  8 +++
 14 files changed, 168 insertions(+), 59 deletions(-)
 create mode 100644 src/rate/_example/custom-prefix/index.js
 create mode 100644 src/rate/_example/custom-prefix/index.json
 create mode 100644 src/rate/_example/custom-prefix/index.wxml
 create mode 100644 src/rate/_example/custom-prefix/index.wxss
 create mode 100644 src/rate/_example/iconfont.wxss

diff --git a/package.json b/package.json
index c8fc7ce38..5a4819d33 100644
--- a/package.json
+++ b/package.json
@@ -125,4 +125,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
\ No newline at end of file
+}
diff --git a/src/rate/README.en-US.md b/src/rate/README.en-US.md
index 98e4d73a7..996e14a41 100644
--- a/src/rate/README.en-US.md
+++ b/src/rate/README.en-US.md
@@ -1,39 +1,48 @@
+<!--
+ * @Author: twinkleli 310227663@qq.com
+ * @Date: 2023-08-29 09:53:44
+ * @LastEditors: twinkleli 310227663@qq.com
+ * @LastEditTime: 2023-08-29 11:02:04
+ * @FilePath: /tdesign-miniprogram/src/rate/README.en-US.md
+ * @Description: 
+-->
 :: BASE_DOC ::
 
 ## API
 ### Rate Props
 
-name | type | default | description | required
--- | -- | -- | -- | --
-allow-half | Boolean | false | \- | N
-color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N
-count | Number | 5 | \- | N
-disabled | Boolean | - | \- | N
-external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
-gap | String / Number | 8 | \- | N
-icon | String / Array | - | Typescript：`string \| string[]` | N
-show-text | Boolean | false | \- | N
-size | String | 24px | \- | N
-texts | Array | [] | Typescript：`Array<string>` | N
-value | Number | 0 | \- | N
-default-value | Number | undefined | uncontrolled property | N
-variant | String | outline | options：outline/filled | N
+| name             | type            | default   | description                                     | required |
+| ---------------- | --------------- | --------- | ----------------------------------------------- | -------- |
+| allow-half       | Boolean         | false     | \-                                              | N        |
+| color            | String / Array  | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N        |
+| count            | Number          | 5         | \-                                              | N        |
+| disabled         | Boolean         | -         | \-                                              | N        |
+| external-classes | Array           | -         | `['t-class', 't-class-icon', 't-class-text']`   | N        |
+| gap              | String / Number | 8         | \-                                              | N        |
+| icon             | String / Array  | -         | Typescript：`string \| string[]`                | N        |
+| show-text        | Boolean         | false     | \-                                              | N        |
+| size             | String          | 24px      | \-                                              | N        |
+| texts            | Array           | []        | Typescript：`Array<string>`                     | N        |
+| value            | Number          | 0         | \-                                              | N        |
+| default-value    | Number          | undefined | uncontrolled property                           | N        |
+| iconPrefix       | String          | undefined | icon prefix                                     | N        |
+| variant          | String          | outline   | options：outline/filled                         | N        |
 
 ### Rate Events
 
-name | params | description
--- | -- | --
-change | `(value: number)` | \-
+| name   | params            | description |
+| ------ | ----------------- | ----------- |
+| change | `(value: number)` | \-          |
 
 
 ### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-rate-icon-scale | 1.33 | - 
---td-rate-selected-color | @warning-color | - 
---td-rate-text-active-color | @font-gray-1 | - 
---td-rate-text-active-font-weight | 600 | - 
---td-rate-text-color | @font-gray-4 | - 
---td-rate-text-font-size | @font-size-m | - 
---td-rate-unselected-color | @bg-color-secondarycomponent | - 
+| Name                              | Default Value                | Description |
+| --------------------------------- | ---------------------------- | ----------- |
+| --td-rate-icon-scale              | 1.33                         | -           |
+| --td-rate-selected-color          | @warning-color               | -           |
+| --td-rate-text-active-color       | @font-gray-1                 | -           |
+| --td-rate-text-active-font-weight | 600                          | -           |
+| --td-rate-text-color              | @font-gray-4                 | -           |
+| --td-rate-text-font-size          | @font-size-m                 | -           |
+| --td-rate-unselected-color        | @bg-color-secondarycomponent | -           |
diff --git a/src/rate/README.md b/src/rate/README.md
index 6dc55a693..5bc3c50ef 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -58,46 +58,51 @@ isComponent: true
 
 {{ special }}
 
+自定义图片前缀
+
+{{iconPrefix}}
+
 
 ## API
 ### Rate Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --
-allow-half | Boolean | false | 是否允许半选 | N
-color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
-count | Number | 5 | 评分的数量 | N
-disabled | Boolean | - | 是否禁用评分 | N
-gap | Number | 8 | 评分图标的间距 | N
-icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N
-show-text | Boolean | false | 是否显示对应的辅助文字 | N
-size | String | 24px | 评分图标的大小 | N
-texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
-value | Number | 0 | 选择评分的值 | N
-default-value | Number | undefined | 选择评分的值。非受控属性 | N
-variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
+| 名称          | 类型           | 默认值    | 说明                                                                                                                                                                                                                                                              | 必传 |
+| ------------- | -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| allow-half    | Boolean        | false     | 是否允许半选                                                                                                                                                                                                                                                      | N    |
+| color         | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N    |
+| count         | Number         | 5         | 评分的数量                                                                                                                                                                                                                                                        | N    |
+| disabled      | Boolean        | -         | 是否禁用评分                                                                                                                                                                                                                                                      | N    |
+| gap           | Number         | 8         | 评分图标的间距                                                                                                                                                                                                                                                    | N    |
+| icon          | String / Array | -         | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]`                                                                                                                                                                                   | N    |
+| show-text     | Boolean        | false     | 是否显示对应的辅助文字                                                                                                                                                                                                                                            | N    |
+| size          | String         | 24px      | 评分图标的大小                                                                                                                                                                                                                                                    | N    |
+| texts         | Array          | []        | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>`                                                                                                   | N    |
+| value         | Number         | 0         | 选择评分的值                                                                                                                                                                                                                                                      | N    |
+| default-value | Number         | undefined | 选择评分的值。非受控属性                                                                                                                                                                                                                                          | N    |
+| iconPrefix    | String         | undefined | 定义图标前缀                                                                                                                                                                                                                                                      | N    |
+| variant       | String         | outline   | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled                                                                                                                                                                                                  | N    |
 
 ### Rate Events
 
-名称 | 参数 | 描述
--- | -- | --
-change | `(value: number)` | 评分数改变时触发
+| 名称   | 参数              | 描述             |
+| ------ | ----------------- | ---------------- |
+| change | `(value: number)` | 评分数改变时触发 |
 
 ### Rate 外部样式类
-类名 | 说明
--- | -- 
-t-class | 根节点样式类
-t-class-icon` | 图标样式类
-t-class-text | 文本样式类
+| 类名          | 说明         |
+| ------------- | ------------ |
+| t-class       | 根节点样式类 |
+| t-class-icon` | 图标样式类   |
+| t-class-text  | 文本样式类   |
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-rate-icon-scale | 1.33 | - 
---td-rate-selected-color | @warning-color | - 
---td-rate-text-active-color | @font-gray-1 | - 
---td-rate-text-active-font-weight | 600 | - 
---td-rate-text-color | @font-gray-4 | - 
---td-rate-text-font-size | @font-size-m | - 
---td-rate-unselected-color | @bg-color-secondarycomponent | - 
+| 名称                              | 默认值                       | 描述 |
+| --------------------------------- | ---------------------------- | ---- |
+| --td-rate-icon-scale              | 1.33                         | -    |
+| --td-rate-selected-color          | @warning-color               | -    |
+| --td-rate-text-active-color       | @font-gray-1                 | -    |
+| --td-rate-text-active-font-weight | 600                          | -    |
+| --td-rate-text-color              | @font-gray-4                 | -    |
+| --td-rate-text-font-size          | @font-size-m                 | -    |
+| --td-rate-unselected-color        | @bg-color-secondarycomponent | -    |
diff --git a/src/rate/_example/custom-prefix/index.js b/src/rate/_example/custom-prefix/index.js
new file mode 100644
index 000000000..5a116c088
--- /dev/null
+++ b/src/rate/_example/custom-prefix/index.js
@@ -0,0 +1,13 @@
+Component({
+  data: {
+    value: 3,
+  },
+  methods: {
+    onChange(e) {
+      const { value } = e.detail;
+      this.setData({
+        value,
+      });
+    },
+  },
+});
diff --git a/src/rate/_example/custom-prefix/index.json b/src/rate/_example/custom-prefix/index.json
new file mode 100644
index 000000000..724692fed
--- /dev/null
+++ b/src/rate/_example/custom-prefix/index.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}
diff --git a/src/rate/_example/custom-prefix/index.wxml b/src/rate/_example/custom-prefix/index.wxml
new file mode 100644
index 000000000..8b3598c41
--- /dev/null
+++ b/src/rate/_example/custom-prefix/index.wxml
@@ -0,0 +1,4 @@
+<view class="demo-rate">
+  <view class="demo-rate__title">自定义icon前缀</view>
+  <t-rate value="{{value}}" iconPrefix="icon" icon="a-1h" bind:change="onChange" />
+</view>
diff --git a/src/rate/_example/custom-prefix/index.wxss b/src/rate/_example/custom-prefix/index.wxss
new file mode 100644
index 000000000..285bffba7
--- /dev/null
+++ b/src/rate/_example/custom-prefix/index.wxss
@@ -0,0 +1,22 @@
+.demo-rate {
+  background-color: #fff;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+  border-bottom: solid 1rpx #f0f0f0;
+  border-top: solid 1rpx #f0f0f0;
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  width: 200rpx;
+}
+
+.demo-rate__transparent {
+  background-color: transparent;
+  padding-left: 32rpx;
+  border: 0;
+}
diff --git a/src/rate/_example/iconfont.wxss b/src/rate/_example/iconfont.wxss
new file mode 100644
index 000000000..85f8b2080
--- /dev/null
+++ b/src/rate/_example/iconfont.wxss
@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'icon'; /* Project id 3144196 */
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPUAAsAAAAACGAAAAOFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDGgqEPIQBATYCJAMUCwwABCAFhDcHQhtVBxHVmy/JfhzGjunMd9u7ZdNoJGL95+B5ckPfvzsIgZjoVHHRKe1qNlEdfUoAPFpzlgKhvLdV7dpf4MyYhRbmw1+ObxM9+wDSmJP2okWn0XkEe1sWSOAJJR4mYA3TSx7kD48ggEsZ9VFNm7ftSsjYQVPHk4DBlwpUtTJ21IhBONyBmagVHAR76U6DbMQCtUo9BzZk75cfVIgDCkvjn9NxeLOhPPTb+R31wtqF6PckEgQ4WwEWoIGih7mk93SgK7pIF6FxhwKGPDTZIOB3rK312yWKZ//hgaDQGBAbvzoIgIYwY8BvFxEI+O0JFPgdCDT4HVVfpN0CwAWWfQ68w1yWUQUvFRUUEJMZ0zBmzKILZ26suXbqHGrh2ZNXV18/fV68hafWnInRi06vPskQ3VV6eKqH9vB2nPDWbNu2C1xZtH31VhgiPfbE7kmo2ba78+R9oy6cueOtuXVuHwt3+kNEdfVYNWfEmhMii067q3cK6kYqetu26F2w6GjUtlO79uXprVE7b7r38YsHl62wxmwPBrvdDvyl7A2Os2v65berseOS461n/fL6PbPim4dlpFSGJIdmpmSGMm3NvmaVrZtVNPePPcwtGCU9i0KcX3dKyKGCTUFnY9aHrCNjTeN5PzcGxQd6498Eh4WH5zXPjbbvdIxJHLz4dnx4QLNlC4Y/nd98/MZvwLSjqfOTGoRGhEX8dfOa50XbtyfEJHVbM+JAnW7F8SnLQr7+lxVUpFRN6PF4ZnpY62/ZybnNs8Ki0qIimiWf7HroYciPBM85E3+uGqdmAKjPamomzPiEAAJN2zkJA0Lr/nY8A8DHwLJq4DAszzgoYIrfbuy7UNRYGTKaoc7Ih2BddD9goQJcXKDWj0Tw8RhT5OIkCKahZFAEEAuNIYUyXAYsPHJgYyiHSyHV+z0iGYhGTCCQwxQAwWEXFCEcgsbhAmW4G7CI4QFsHF7AxXn+ZQ85QYZDxpFxgekHag6eQj1npVcULztmKY8ST8xFwTh0dVvPXdBjXrOmvEXPTEA5ODhvvQ+tDRBz0DhzLZnjvmlo6Cn1HNzqkHFkXIDpB6g5eEos3Fx+RfGyYx5QZ74nQl3hclgPdNS0E9TF4Ce7XrS+vEUPMwFkq4MDzlf70AbpAMThaRpnrpEbknFPg8RoqaG+1uTekpz14a+2RIkWI5bYbAdV7S6ydTKm+/ggVysAAAA=')
+      format('woff2'),
+    url('//at.alicdn.com/t/font_3144196_s14ifjx2cyi.woff?t=1642299317916') format('woff'),
+    url('//at.alicdn.com/t/font_3144196_s14ifjx2cyi.ttf?t=1642299317916') format('truetype');
+}
+
+.icon {
+  font-family: 'icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a-0:before {
+  content: '\e64d';
+}
+
+.icon-a-1h:before {
+  content: '\e64e';
+}
+
+.icon-a-2h:before {
+  content: '\e64f';
+}
+
+.icon-a-3h:before {
+  content: '\e650';
+}
diff --git a/src/rate/_example/rate.json b/src/rate/_example/rate.json
index edab627c0..947f43cb8 100644
--- a/src/rate/_example/rate.json
+++ b/src/rate/_example/rate.json
@@ -3,6 +3,7 @@
   "usingComponents": {
     "base": "./base",
     "custom": "./custom",
+    "custom-prefix": "./custom-prefix",
     "special": "./special",
     "un-filled": "./un-filled",
     "count": "./count",
diff --git a/src/rate/_example/rate.less b/src/rate/_example/rate.less
index e69de29bb..9b05a505d 100644
--- a/src/rate/_example/rate.less
+++ b/src/rate/_example/rate.less
@@ -0,0 +1 @@
+@import './iconfont.wxss';
diff --git a/src/rate/_example/rate.wxml b/src/rate/_example/rate.wxml
index add269288..7e92074fd 100644
--- a/src/rate/_example/rate.wxml
+++ b/src/rate/_example/rate.wxml
@@ -8,6 +8,9 @@
     <view class="demo-desc">自定义评分</view>
     <custom />
 
+    <view class="demo-desc">自定义icon前缀评分(适配自有图标库)</view>
+    <custom-prefix />
+
     <view class="demo-desc">自定义评分数量</view>
     <count />
 
diff --git a/src/rate/props.ts b/src/rate/props.ts
index 5d0c4f0e3..3d4697c88 100644
--- a/src/rate/props.ts
+++ b/src/rate/props.ts
@@ -34,6 +34,11 @@ const props: TdRateProps = {
     type: null,
     value: 8,
   },
+  /** 自定义图标前缀 */
+  iconPrefix: {
+    type: String,
+    value: undefined,
+  },
   /** 自定义评分图标，[选中图标，未选中图标] */
   icon: {
     type: null,
diff --git a/src/rate/rate.wxml b/src/rate/rate.wxml
index 961afe23f..3502ffdf8 100644
--- a/src/rate/rate.wxml
+++ b/src/rate/rate.wxml
@@ -24,6 +24,7 @@
       t-class="{{prefix}}-class-icon"
       name="{{utils.getIconName(defaultValue, value, index, icon)}}"
       size="{{ size }}"
+      prefix="{{iconPrefix}}"
     />
   </view>
   <text
diff --git a/src/rate/type.ts b/src/rate/type.ts
index d139f18da..82caefca2 100644
--- a/src/rate/type.ts
+++ b/src/rate/type.ts
@@ -59,6 +59,14 @@ export interface TdRateProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 自定义图标前缀
+   */
+  iconPrefix?: {
+    type: StringConstructor;
+    value?: string;
+    reuqired?: boolean;
+  };
   /**
    * 自定义评分图标，[选中图标，未选中图标]
    */

From 2ea2840860ab8173eebf0ea7c8a3a2721a03957b Mon Sep 17 00:00:00 2001
From: twinkleli <310227663@qq.com>
Date: Tue, 29 Aug 2023 15:41:45 +0800
Subject: [PATCH 197/202] feat: fix

fix
---
 src/rate/README.en-US.md | 58 +++++++++++-------------------------
 src/rate/README.md       | 64 ++++++++++++++++++++--------------------
 2 files changed, 50 insertions(+), 72 deletions(-)

diff --git a/src/rate/README.en-US.md b/src/rate/README.en-US.md
index 996e14a41..a8f33a89b 100644
--- a/src/rate/README.en-US.md
+++ b/src/rate/README.en-US.md
@@ -1,48 +1,26 @@
-<!--
- * @Author: twinkleli 310227663@qq.com
- * @Date: 2023-08-29 09:53:44
- * @LastEditors: twinkleli 310227663@qq.com
- * @LastEditTime: 2023-08-29 11:02:04
- * @FilePath: /tdesign-miniprogram/src/rate/README.en-US.md
- * @Description: 
--->
 :: BASE_DOC ::
 
 ## API
 ### Rate Props
 
-| name             | type            | default   | description                                     | required |
-| ---------------- | --------------- | --------- | ----------------------------------------------- | -------- |
-| allow-half       | Boolean         | false     | \-                                              | N        |
-| color            | String / Array  | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N        |
-| count            | Number          | 5         | \-                                              | N        |
-| disabled         | Boolean         | -         | \-                                              | N        |
-| external-classes | Array           | -         | `['t-class', 't-class-icon', 't-class-text']`   | N        |
-| gap              | String / Number | 8         | \-                                              | N        |
-| icon             | String / Array  | -         | Typescript：`string \| string[]`                | N        |
-| show-text        | Boolean         | false     | \-                                              | N        |
-| size             | String          | 24px      | \-                                              | N        |
-| texts            | Array           | []        | Typescript：`Array<string>`                     | N        |
-| value            | Number          | 0         | \-                                              | N        |
-| default-value    | Number          | undefined | uncontrolled property                           | N        |
-| iconPrefix       | String          | undefined | icon prefix                                     | N        |
-| variant          | String          | outline   | options：outline/filled                         | N        |
+name | type | default | description | required
+-- | -- | -- | -- | --
+allow-half | Boolean | false | \- | N
+count | Number | 5 | \- | N
+custom-style `v0.25.0` | String | - | \- | N
+disabled | Boolean | false | \- | N
+external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
+gap | Number | 8 | \- | N
+show-text | Boolean | false | \- | N
+size | String | 20 | \- | N
+texts | Array | [] | Typescript：`Array<string>` | N
+value | Number | 0 | \- | N
+default-value | Number | undefined | uncontrolled property | N
+iconPrefix | String  | undefined | icon prefix | N        
+variant | String | outline | options：outline/filled | N
 
 ### Rate Events
 
-| name   | params            | description |
-| ------ | ----------------- | ----------- |
-| change | `(value: number)` | \-          |
-
-
-### CSS Variables
-The component provides the following CSS variables, which can be used to customize styles.
-| Name                              | Default Value                | Description |
-| --------------------------------- | ---------------------------- | ----------- |
-| --td-rate-icon-scale              | 1.33                         | -           |
-| --td-rate-selected-color          | @warning-color               | -           |
-| --td-rate-text-active-color       | @font-gray-1                 | -           |
-| --td-rate-text-active-font-weight | 600                          | -           |
-| --td-rate-text-color              | @font-gray-4                 | -           |
-| --td-rate-text-font-size          | @font-size-m                 | -           |
-| --td-rate-unselected-color        | @bg-color-secondarycomponent | -           |
+name | params | description
+-- | -- | --
+change | `(value: number)` | \-
diff --git a/src/rate/README.md b/src/rate/README.md
index 5bc3c50ef..685cc4178 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -66,43 +66,43 @@ isComponent: true
 ## API
 ### Rate Props
 
-| 名称          | 类型           | 默认值    | 说明                                                                                                                                                                                                                                                              | 必传 |
-| ------------- | -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
-| allow-half    | Boolean        | false     | 是否允许半选                                                                                                                                                                                                                                                      | N    |
-| color         | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N    |
-| count         | Number         | 5         | 评分的数量                                                                                                                                                                                                                                                        | N    |
-| disabled      | Boolean        | -         | 是否禁用评分                                                                                                                                                                                                                                                      | N    |
-| gap           | Number         | 8         | 评分图标的间距                                                                                                                                                                                                                                                    | N    |
-| icon          | String / Array | -         | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]`                                                                                                                                                                                   | N    |
-| show-text     | Boolean        | false     | 是否显示对应的辅助文字                                                                                                                                                                                                                                            | N    |
-| size          | String         | 24px      | 评分图标的大小                                                                                                                                                                                                                                                    | N    |
-| texts         | Array          | []        | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>`                                                                                                   | N    |
-| value         | Number         | 0         | 选择评分的值                                                                                                                                                                                                                                                      | N    |
-| default-value | Number         | undefined | 选择评分的值。非受控属性                                                                                                                                                                                                                                          | N    |
-| iconPrefix    | String         | undefined | 定义图标前缀                                                                                                                                                                                                                                                      | N    |
-| variant       | String         | outline   | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled                                                                                                                                                                                                  | N    |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+allow-half | Boolean | false | 是否允许半选 | N
+color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
+count | Number | 5 | 评分的数量 | N
+disabled | Boolean | - | 是否禁用评分 | N
+gap | Number | 8 | 评分图标的间距 | N
+icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N
+show-text | Boolean | false | 是否显示对应的辅助文字 | N
+size | String | 24px | 评分图标的大小 | N
+texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
+value | Number | 0 | 选择评分的值 | N
+default-value | Number | undefined | 选择评分的值。非受控属性 | N
+iconPrefix | String | undefined | 定义图标前缀 
+variant | String | outline | 废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
 
 ### Rate Events
 
-| 名称   | 参数              | 描述             |
-| ------ | ----------------- | ---------------- |
-| change | `(value: number)` | 评分数改变时触发 |
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: number)` | 评分数改变时触发
 
 ### Rate 外部样式类
-| 类名          | 说明         |
-| ------------- | ------------ |
-| t-class       | 根节点样式类 |
-| t-class-icon` | 图标样式类   |
-| t-class-text  | 文本样式类   |
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-icon` | 图标样式类
+t-class-text | 文本样式类
 
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
-| 名称                              | 默认值                       | 描述 |
-| --------------------------------- | ---------------------------- | ---- |
-| --td-rate-icon-scale              | 1.33                         | -    |
-| --td-rate-selected-color          | @warning-color               | -    |
-| --td-rate-text-active-color       | @font-gray-1                 | -    |
-| --td-rate-text-active-font-weight | 600                          | -    |
-| --td-rate-text-color              | @font-gray-4                 | -    |
-| --td-rate-text-font-size          | @font-size-m                 | -    |
-| --td-rate-unselected-color        | @bg-color-secondarycomponent | -    |
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | - 
+--td-rate-selected-color | @warning-color | - 
+--td-rate-text-active-color | @font-gray-1 | - 
+--td-rate-text-active-font-weight | 600 | - 
+--td-rate-text-color | @font-gray-4 | - 
+--td-rate-text-font-size | @font-size-m | - 
+--td-rate-unselected-color | @bg-color-secondarycomponent | - 

From 56b551781749fbdefc3ad761031180367cdbfbb3 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Tue, 29 Aug 2023 19:13:55 +0800
Subject: [PATCH 198/202] fix(side-bar): example abnormal (#2325)

* fix(side-bar): example abnormal

* test: snap-update

* test(dropdown-menu): snap-update

* test: update snapshot

---------

Co-authored-by: leejimqiu <leejimqiu@gmail.com>
---
 src/side-bar/__test__/__snapshots__/demo.test.js.snap | 5 +++++
 src/side-bar/_example/switch/index.js                 | 2 +-
 src/side-bar/_example/switch/index.wxml               | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/side-bar/__test__/__snapshots__/demo.test.js.snap b/src/side-bar/__test__/__snapshots__/demo.test.js.snap
index c7bd01d42..bc7f8635c 100644
--- a/src/side-bar/__test__/__snapshots__/demo.test.js.snap
+++ b/src/side-bar/__test__/__snapshots__/demo.test.js.snap
@@ -1084,6 +1084,7 @@ exports[`SideBar SideBar switch demo works fine 1`] = `
     >
       <wx-scroll-view
         class="section"
+        scrollTop="{{0}}"
         scrollWithAnimation="{{true}}"
         scrollY="{{true}}"
         showScrollbar="{{false}}"
@@ -1230,6 +1231,7 @@ exports[`SideBar SideBar switch demo works fine 1`] = `
       </wx-scroll-view>
       <wx-scroll-view
         class="section"
+        scrollTop="{{0}}"
         scrollWithAnimation="{{true}}"
         scrollY="{{true}}"
         showScrollbar="{{false}}"
@@ -1354,6 +1356,7 @@ exports[`SideBar SideBar switch demo works fine 1`] = `
       </wx-scroll-view>
       <wx-scroll-view
         class="section"
+        scrollTop="{{0}}"
         scrollWithAnimation="{{true}}"
         scrollY="{{true}}"
         showScrollbar="{{false}}"
@@ -1434,6 +1437,7 @@ exports[`SideBar SideBar switch demo works fine 1`] = `
       </wx-scroll-view>
       <wx-scroll-view
         class="section"
+        scrollTop="{{0}}"
         scrollWithAnimation="{{true}}"
         scrollY="{{true}}"
         showScrollbar="{{false}}"
@@ -1536,6 +1540,7 @@ exports[`SideBar SideBar switch demo works fine 1`] = `
       </wx-scroll-view>
       <wx-scroll-view
         class="section"
+        scrollTop="{{0}}"
         scrollWithAnimation="{{true}}"
         scrollY="{{true}}"
         showScrollbar="{{false}}"
diff --git a/src/side-bar/_example/switch/index.js b/src/side-bar/_example/switch/index.js
index 7445a6c8c..280ae9463 100644
--- a/src/side-bar/_example/switch/index.js
+++ b/src/side-bar/_example/switch/index.js
@@ -47,6 +47,6 @@ Page({
   onSideBarChange(e) {
     const { value } = e.detail;
 
-    this.setData({ sideBarIndex: value });
+    this.setData({ sideBarIndex: value, scrollTop: 0 });
   },
 });
diff --git a/src/side-bar/_example/switch/index.wxml b/src/side-bar/_example/switch/index.wxml
index 94a35c74e..38fd84c9e 100644
--- a/src/side-bar/_example/switch/index.wxml
+++ b/src/side-bar/_example/switch/index.wxml
@@ -15,6 +15,7 @@
       wx:key="index"
       class="section"
       scroll-y
+      scroll-top="{{scrollTop}}"
       scroll-with-animation
       show-scrollbar="{{false}}"
     >

From 71084c9c606369f75930a1acdb01e3d899d41fd2 Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 29 Aug 2023 20:42:15 +0800
Subject: [PATCH 199/202] Helly w feature/button agreeprivacyauthorization
 (#2330)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(button): add props buttonId & add event  bindagreeprivacyauthorization

* fix: 命名规范，修改button为tId

* update button readme

* test: update snapshot

---------

Co-authored-by: HellyW <w@hellyw.com>
Co-authored-by: HellyW <wuhaohao1993@outlook.com>
---
 src/button/README.en-US.md                             | 4 +++-
 src/button/README.md                                   | 4 +++-
 src/button/__test__/index.test.js                      | 6 ++++++
 src/button/button.ts                                   | 3 +++
 src/button/button.wxml                                 | 2 ++
 src/button/props.ts                                    | 6 +++++-
 src/button/type.ts                                     | 8 +++++++-
 src/calendar/__test__/__snapshots__/index.test.js.snap | 2 ++
 src/common/template/button.wxml                        | 1 +
 9 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/button/README.en-US.md b/src/button/README.en-US.md
index 7eeb6d27c..cb9b6d80b 100644
--- a/src/button/README.en-US.md
+++ b/src/button/README.en-US.md
@@ -5,6 +5,7 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+t-id | String | - | button tag id | N
 block | Boolean | false | make button to be a block-level element | N
 content | String / Slot | - | button's children elements | N
 custom-dataset | Object | - | Typescript：`any` | N
@@ -20,7 +21,7 @@ suffix | Slot | - | \- | N
 theme | String | default | button theme。options：default/primary/danger | N
 type | String | - | type of button element, same as formType of Miniprogram。options：submit/reset | N
 variant | String | base | button variant。options：base/outline/text | N
-open-type | String | - | options：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N
+open-type | String | - | options：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
 hover-stop-propagation | Boolean | false | \- | N
 hover-start-time | Number | 20 | \- | N
 hover-stay-time | Number | 70 | \- | N
@@ -38,6 +39,7 @@ binderror | Eventhandle | - | \- | N
 bindopensetting | Eventhandle | - | \- | N
 bindlaunchapp | Eventhandle | - | \- | N
 bindchooseavatar | Eventhandle | - | \- | N
+bindagreeprivacyauthorization | Eventhandle | - | \-| N
 
 ### Button Events
 
diff --git a/src/button/README.md b/src/button/README.md
index 76c8160b7..2a0170b5e 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -65,6 +65,7 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+t-id | String | - | 按钮标签id | N
 block | Boolean | false | 是否为块级元素 | N
 content | String / Slot | - | 按钮内容 | N
 custom-dataset | Object | - | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`any` | N
@@ -79,7 +80,7 @@ suffix | Slot | - | 右侧内容，可用于定义右侧图标 | N
 theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
 type | String | - | 同小程序的 formType。可选项：submit/reset | N
 variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | N
-open-type | String | - | 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*小程序插件中不能使用*）；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N
+open-type | String | - | 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*小程序插件中不能使用*）；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息；<br />`agreePrivacyAuthorization`用户同意隐私协议按钮。用户点击一次此按钮后，所有隐私接口可以正常调用。可通过`bindagreeprivacyauthorization`监听用户同意隐私协议事件。隐私合规开发指南详情可见《<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">小程序隐私协议开发指南</a>》。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N
 hover-class | String | '' | 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果 | N
 hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
 hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N
@@ -98,6 +99,7 @@ binderror | Eventhandle | - | 当使用开放能力时，发生错误的回调
 bindopensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting时有效 | N
 bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp时有效 | N
 bindchooseavatar | Eventhandle | - | 获取用户头像回调，open-type=chooseAvatar时有效 | N
+bindagreeprivacyauthorization | Eventhandle | - | 用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 | N
 
 ### Button Events
 
diff --git a/src/button/__test__/index.test.js b/src/button/__test__/index.test.js
index 57c4ec9ba..6b2bdb5c1 100644
--- a/src/button/__test__/index.test.js
+++ b/src/button/__test__/index.test.js
@@ -57,6 +57,7 @@ describe('button', () => {
     const handler = jest.fn();
     const id = simulate.load({
       template: `<t-button
+        tId="test"
         class="btn"
         openType="{{openType}}"
         bind:getuserinfo="handler"
@@ -66,6 +67,7 @@ describe('button', () => {
         bind:opensetting="handler"
         bind:launchapp="handler"
         bind:chooseavatar="handler"
+        bind:agreeprivacyauthorization="handler"
       ></t-button>`,
       data: {
         openType: 'getUserInfo',
@@ -109,5 +111,9 @@ describe('button', () => {
     $btn.dispatchEvent('chooseavatar');
     await simulate.sleep(10);
     expect(handler).toHaveBeenCalledTimes(14);
+
+    $btn.dispatchEvent('agreeprivacyauthorization');
+    await simulate.sleep(10);
+    expect(handler).toHaveBeenCalledTimes(16);
   });
 });
diff --git a/src/button/button.ts b/src/button/button.ts
index c7c5c9a7e..a1bbf7a27 100644
--- a/src/button/button.ts
+++ b/src/button/button.ts
@@ -91,6 +91,9 @@ export default class Button extends SuperComponent {
     chooseavatar(e) {
       this.triggerEvent('chooseavatar', e.detail);
     },
+    agreeprivacyauthorization(e) {
+      this.triggerEvent('agreeprivacyauthorization', e.detail);
+    },
     handleTap(e) {
       if (this.data.disabled || this.data.loading) return;
 
diff --git a/src/button/button.wxml b/src/button/button.wxml
index 24f84fd08..c66cd50af 100644
--- a/src/button/button.wxml
+++ b/src/button/button.wxml
@@ -2,6 +2,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <button
+  id="{{tId}}"
   style="{{_._style([style, customStyle])}}"
   data-custom="{{ customDataset }}"
   class="class {{className}}"
@@ -26,6 +27,7 @@
   bind:opensetting="opensetting"
   bind:launchapp="launchapp"
   bind:chooseavatar="chooseavatar"
+  bind:agreeprivacyauthorization="agreeprivacyauthorization"
   aria-label="{{ariaLabel}}"
 >
   <template
diff --git a/src/button/props.ts b/src/button/props.ts
index 75a95e7e3..758f51cea 100644
--- a/src/button/props.ts
+++ b/src/button/props.ts
@@ -5,7 +5,11 @@
  * */
 
 import { TdButtonProps } from './type';
-const props: TdButtonProps = {
+const props: TdButtonProps = { 
+   /**按钮id */
+  tId: {
+    type: String,
+  },
   /** 是否为块级元素 */
   block: {
     type: Boolean,
diff --git a/src/button/type.ts b/src/button/type.ts
index 7d4ed76ba..3227c32e1 100644
--- a/src/button/type.ts
+++ b/src/button/type.ts
@@ -8,6 +8,11 @@ import { LoadingProps } from '../loading/index';
 import { SizeEnum } from '../common/common';
 
 export interface TdButtonProps {
+    /**按钮id */
+    tId?: {
+      type: StringConstructor;
+      value?: string;
+    };
   /**
    * 是否为块级元素
    * @default false
@@ -127,7 +132,8 @@ export interface TdButtonProps {
       | 'launchApp'
       | 'openSetting'
       | 'feedback'
-      | 'chooseAvatar';
+      | 'chooseAvatar'
+      | 'agreePrivacyAuthorization';
   };
   /**
    * 指定按钮按下去的样式类，按钮不为加载或禁用状态时有效。当 `hover-class="none"` 时，没有点击态效果
diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index f56032e0c..684b613a6 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -757,6 +757,7 @@ exports[`calendar :base 1`] = `
                   hoverStartTime="{{20}}"
                   hoverStayTime="{{70}}"
                   hoverStopPropagation="{{false}}"
+                  id=""
                   lang="en"
                   openType=""
                   sendMessageImg=""
@@ -765,6 +766,7 @@ exports[`calendar :base 1`] = `
                   sessionFrom=""
                   showMessageCard="{{false}}"
                   style=""
+                  bind:agreeprivacyauthorization="agreeprivacyauthorization"
                   bind:chooseavatar="chooseavatar"
                   bind:contact="contact"
                   bind:error="error"
diff --git a/src/common/template/button.wxml b/src/common/template/button.wxml
index faff528bd..75bafa682 100644
--- a/src/common/template/button.wxml
+++ b/src/common/template/button.wxml
@@ -1,5 +1,6 @@
 <template name="button">
   <t-button
+    t-id="{{tId}}"
     block="{{block || false}}"
     class="{{class || ''}}"
     t-class="{{externalClass}}"

From 1403a42f4ca90c6a1e6f6dd9a7001d5617883928 Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 29 Aug 2023 20:45:45 +0800
Subject: [PATCH 200/202] docs: recover en api

---
 src/rate/README.en-US.md | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/rate/README.en-US.md b/src/rate/README.en-US.md
index a8f33a89b..2dadb4121 100644
--- a/src/rate/README.en-US.md
+++ b/src/rate/README.en-US.md
@@ -6,13 +6,14 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 allow-half | Boolean | false | \- | N
+color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N
 count | Number | 5 | \- | N
-custom-style `v0.25.0` | String | - | \- | N
-disabled | Boolean | false | \- | N
+disabled | Boolean | - | \- | N
 external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
-gap | Number | 8 | \- | N
+gap | String / Number | 8 | \- | N
+icon | String / Array | - | Typescript：`string \| string[]` | N
 show-text | Boolean | false | \- | N
-size | String | 20 | \- | N
+size | String | 24px | \- | N
 texts | Array | [] | Typescript：`Array<string>` | N
 value | Number | 0 | \- | N
 default-value | Number | undefined | uncontrolled property | N
@@ -24,3 +25,16 @@ variant | String | outline | options：outline/filled | N
 name | params | description
 -- | -- | --
 change | `(value: number)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | - 
+--td-rate-selected-color | @warning-color | - 
+--td-rate-text-active-color | @font-gray-1 | - 
+--td-rate-text-active-font-weight | 600 | - 
+--td-rate-text-color | @font-gray-4 | - 
+--td-rate-text-font-size | @font-size-m | - 
+--td-rate-unselected-color | @bg-color-secondarycomponent | - 
\ No newline at end of file

From 60e493a046de6e284a9ffea0cb204459107ad62e Mon Sep 17 00:00:00 2001
From: leejimqiu <leejimqiu@gmail.com>
Date: Tue, 29 Aug 2023 20:58:38 +0800
Subject: [PATCH 201/202] chore: update demo

---
 src/rate/_example/custom-prefix/index.wxml | 2 +-
 src/rate/_example/rate.wxml                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/rate/_example/custom-prefix/index.wxml b/src/rate/_example/custom-prefix/index.wxml
index 8b3598c41..d4d9e865f 100644
--- a/src/rate/_example/custom-prefix/index.wxml
+++ b/src/rate/_example/custom-prefix/index.wxml
@@ -1,4 +1,4 @@
 <view class="demo-rate">
-  <view class="demo-rate__title">自定义icon前缀</view>
+  <view class="demo-rate__title">第三方图标</view>
   <t-rate value="{{value}}" iconPrefix="icon" icon="a-1h" bind:change="onChange" />
 </view>
diff --git a/src/rate/_example/rate.wxml b/src/rate/_example/rate.wxml
index 7e92074fd..93f2069ed 100644
--- a/src/rate/_example/rate.wxml
+++ b/src/rate/_example/rate.wxml
@@ -8,7 +8,7 @@
     <view class="demo-desc">自定义评分</view>
     <custom />
 
-    <view class="demo-desc">自定义icon前缀评分(适配自有图标库)</view>
+    <view class="demo-desc">第三方图标评分</view>
     <custom-prefix />
 
     <view class="demo-desc">自定义评分数量</view>

From 804be6fa81a61f7d7b9f4c1e1f71221a1dfc092d Mon Sep 17 00:00:00 2001
From: lijun <leejimqiu@gmail.com>
Date: Tue, 29 Aug 2023 22:52:41 +0800
Subject: [PATCH 202/202] chore: publish v1.2.2 (#2333)

* chore: publish v1.2.2

* chore: changelog's changes

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 CHANGELOG.md | 16 ++++++++++++++++
 package.json |  4 ++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5719b1cca..335047f50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,22 @@ toc: false
 docClass: timeline
 ---
 
+   ## 🌈 1.2.2 `2023-08-29` 
+### 🚀 Features
+- `Rate`: 支持第三方图标 @lixingdecai ([#2328](https://github.com/Tencent/tdesign-miniprogram/pull/2328))
+- `Button`: 新增 `t-id` 属性，相等于 `id` @HellyW ([#2320](https://github.com/Tencent/tdesign-miniprogram/pull/2320))
+- `Button`: 属性 `open-type` 新增支持 `agreePrivacyAuthorization` @HellyW ([#2320](https://github.com/Tencent/tdesign-miniprogram/pull/2320))
+
+### 🐞 Bug Fixes
+- `Stepper`: 修复无法输出小数的问题 @LeeJim ([#2314](https://github.com/Tencent/tdesign-miniprogram/pull/2314))
+- `Stepper`: 修复输入小数后增减的精度问题 @LeeJim ([#2314](https://github.com/Tencent/tdesign-miniprogram/pull/2314))
+- `TreeSelect`: 解决异步 options 导致无法渲染的问题 @LeeJim ([#2315](https://github.com/Tencent/tdesign-miniprogram/pull/2315))
+- `TreeSelect`: 解决异步数据导致的报错问题 @LeeJim ([#2315](https://github.com/Tencent/tdesign-miniprogram/pull/2315))
+- `ActionSheet`: 移除未使用的组件 @betavs ([#2318](https://github.com/Tencent/tdesign-miniprogram/pull/2318))
+- `SideBar`: 修复示例滚动问题 @betavs ([#2325](https://github.com/Tencent/tdesign-miniprogram/pull/2325))
+
+ 
+
   ## 🌈 1.2.1 `2023-08-22` 
 ### 🚀 Features
 - `Radio`: 新增 `readonly` 属性 @betavs ([#2292](https://github.com/Tencent/tdesign-miniprogram/pull/2292))
diff --git a/package.json b/package.json
index 5a4819d33..98ead3636 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "tdesign-miniprogram",
   "title": "tdesign-ßminiprogram",
   "main": "miniprogram_dist/index.js",
@@ -125,4 +125,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
+}
\ No newline at end of file