diff --git a/src/action-sheet/__test__/__snapshots__/demo.test.js.snap b/src/action-sheet/__test__/__snapshots__/demo.test.js.snap
index c0548eabf..61fd32fea 100644
--- a/src/action-sheet/__test__/__snapshots__/demo.test.js.snap
+++ b/src/action-sheet/__test__/__snapshots__/demo.test.js.snap
@@ -4,6 +4,7 @@ exports[`ActionSheet ActionSheet align demo works fine 1`] = `
 <align>
   <t-action-sheet
     id="t-action-sheet"
+    usingCustomNavbar="{{true}}"
     bind:selected="handleSelected"
   />
   <t-button
@@ -22,6 +23,7 @@ exports[`ActionSheet ActionSheet grid demo works fine 1`] = `
 <grid>
   <t-action-sheet
     id="t-action-sheet"
+    usingCustomNavbar="{{true}}"
     bind:selected="handleSelected"
   />
   <t-button
@@ -49,6 +51,7 @@ exports[`ActionSheet ActionSheet list demo works fine 1`] = `
 <list>
   <t-action-sheet
     id="t-action-sheet"
+    usingCustomNavbar="{{true}}"
     bind:selected="handleSelected"
   />
   <t-button
@@ -85,6 +88,7 @@ exports[`ActionSheet ActionSheet status demo works fine 1`] = `
 <status>
   <t-action-sheet
     id="t-action-sheet"
+    usingCustomNavbar="{{true}}"
     bind:selected="handleSelected"
   />
   <t-button
diff --git a/src/button/__test__/__snapshots__/demo.test.js.snap b/src/button/__test__/__snapshots__/demo.test.js.snap
index 09d357f55..3455cc577 100644
--- a/src/button/__test__/__snapshots__/demo.test.js.snap
+++ b/src/button/__test__/__snapshots__/demo.test.js.snap
@@ -146,6 +146,7 @@ exports[`Button Button group-btn demo works fine 1`] = `
     <t-button
       block="{{true}}"
       size="large"
+      tClass="group-btn"
       theme="light"
     >
       填充按钮
@@ -153,6 +154,7 @@ exports[`Button Button group-btn demo works fine 1`] = `
     <t-button
       block="{{true}}"
       size="large"
+      tClass="group-btn"
       theme="primary"
     >
       填充按钮
diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index 030408ab7..f4d92c862 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -780,7 +780,6 @@ exports[`calendar :base 1`] = `
                   <wx-view
                     class="t-button__content"
                   >
-                    
                     确定
                   </wx-view>
                 </wx-button>
@@ -801,7 +800,7 @@ exports[`calendar :base 1`] = `
           ariaLabel="关闭"
           ariaRole="button"
           class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="--td-overlay-transition-duration:300ms; z-index:11000;"
+          style="--td-overlay-transition-duration:300ms; z-index:11000; top:0px;"
           bind:tap="handleClick"
           catch:touchmove="noop"
           bind:transitionend="onTransitionEnd"
diff --git a/src/cell/__test__/__snapshots__/demo.test.js.snap b/src/cell/__test__/__snapshots__/demo.test.js.snap
index 1d56669fd..083edd6ee 100644
--- a/src/cell/__test__/__snapshots__/demo.test.js.snap
+++ b/src/cell/__test__/__snapshots__/demo.test.js.snap
@@ -133,6 +133,7 @@ exports[`Cell Cell multiple demo works fine 1`] = `
 exports[`Cell Cell theme demo works fine 1`] = `
 <theme>
   <t-cell-group
+    bordered="{{true}}"
     theme="card"
   >
     <t-cell
diff --git a/src/checkbox/__test__/__snapshots__/demo.test.js.snap b/src/checkbox/__test__/__snapshots__/demo.test.js.snap
index 249157d52..fd057221d 100644
--- a/src/checkbox/__test__/__snapshots__/demo.test.js.snap
+++ b/src/checkbox/__test__/__snapshots__/demo.test.js.snap
@@ -313,8 +313,8 @@ exports[`Checkbox Checkbox type demo works fine 1`] = `
   <t-checkbox
     icon="{{
       Array [
-        "https://tdesign.gtimg.com/miniprogram/checkbox-checked.png",
-        "https://tdesign.gtimg.com/miniprogram/checkbox.png",
+        "https://tdesign.gtimg.com/mobile/demos/checkbox-checked.png",
+        "https://tdesign.gtimg.com/mobile/demos/checkbox.png",
       ]
     }}"
     label="图片图标"
diff --git a/src/col/__test__/__snapshots__/demo.test.js.snap b/src/col/__test__/__snapshots__/demo.test.js.snap
index d00a114a6..cb57dc4df 100644
--- a/src/col/__test__/__snapshots__/demo.test.js.snap
+++ b/src/col/__test__/__snapshots__/demo.test.js.snap
@@ -56,21 +56,30 @@ exports[`Col Col offset demo works fine 1`] = `
   >
     <t-col
       span="8"
-      tClass="dark"
     >
-      col-8
+      <wx-view
+        class="dark"
+      >
+        col-8
+      </wx-view>
     </t-col>
     <t-col
       span="8"
-      tClass="light"
     >
-      col-8
+      <wx-view
+        class="dark"
+      >
+        col-8
+      </wx-view>
     </t-col>
     <t-col
       span="8"
-      tClass="dark"
     >
-      col-8
+      <wx-view
+        class="dark"
+      >
+        col-8
+      </wx-view>
     </t-col>
   </t-row>
 </offset>
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 3cdd66378..0246c0db4 100644
--- a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -74,6 +74,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{0}}"
+                        style="height: 44px"
                       >
                         
       2000年
@@ -82,6 +83,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{1}}"
+                        style="height: 44px"
                       >
                         
       2001年
@@ -90,6 +92,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{2}}"
+                        style="height: 44px"
                       >
                         
       2002年
@@ -98,6 +101,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{3}}"
+                        style="height: 44px"
                       >
                         
       2003年
@@ -106,6 +110,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{4}}"
+                        style="height: 44px"
                       >
                         
       2004年
@@ -114,6 +119,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{5}}"
+                        style="height: 44px"
                       >
                         
       2005年
@@ -122,6 +128,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{6}}"
+                        style="height: 44px"
                       >
                         
       2006年
@@ -130,6 +137,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{7}}"
+                        style="height: 44px"
                       >
                         
       2007年
@@ -138,6 +146,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{8}}"
+                        style="height: 44px"
                       >
                         
       2008年
@@ -146,6 +155,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{9}}"
+                        style="height: 44px"
                       >
                         
       2009年
@@ -154,6 +164,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{10}}"
+                        style="height: 44px"
                       >
                         
       2010年
@@ -162,6 +173,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{11}}"
+                        style="height: 44px"
                       >
                         
       2011年
@@ -170,6 +182,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{12}}"
+                        style="height: 44px"
                       >
                         
       2012年
@@ -178,6 +191,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{13}}"
+                        style="height: 44px"
                       >
                         
       2013年
@@ -186,6 +200,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{14}}"
+                        style="height: 44px"
                       >
                         
       2014年
@@ -194,6 +209,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{15}}"
+                        style="height: 44px"
                       >
                         
       2015年
@@ -202,6 +218,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{16}}"
+                        style="height: 44px"
                       >
                         
       2016年
@@ -210,6 +227,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{17}}"
+                        style="height: 44px"
                       >
                         
       2017年
@@ -218,6 +236,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{18}}"
+                        style="height: 44px"
                       >
                         
       2018年
@@ -226,6 +245,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{19}}"
+                        style="height: 44px"
                       >
                         
       2019年
@@ -234,6 +254,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{20}}"
+                        style="height: 44px"
                       >
                         
       2020年
@@ -242,6 +263,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item t-picker-item__item--active"
                         data-index="{{21}}"
+                        style="height: 44px"
                       >
                         
       2021年
@@ -250,6 +272,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{22}}"
+                        style="height: 44px"
                       >
                         
       2022年
@@ -258,6 +281,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{23}}"
+                        style="height: 44px"
                       >
                         
       2023年
@@ -266,6 +290,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{24}}"
+                        style="height: 44px"
                       >
                         
       2024年
@@ -274,6 +299,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{25}}"
+                        style="height: 44px"
                       >
                         
       2025年
@@ -282,6 +308,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{26}}"
+                        style="height: 44px"
                       >
                         
       2026年
@@ -290,6 +317,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{27}}"
+                        style="height: 44px"
                       >
                         
       2027年
@@ -298,6 +326,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{28}}"
+                        style="height: 44px"
                       >
                         
       2028年
@@ -306,6 +335,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{29}}"
+                        style="height: 44px"
                       >
                         
       2029年
@@ -314,6 +344,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{30}}"
+                        style="height: 44px"
                       >
                         
       2030年
@@ -341,6 +372,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{0}}"
+                        style="height: 44px"
                       >
                         
       1月
@@ -349,6 +381,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{1}}"
+                        style="height: 44px"
                       >
                         
       2月
@@ -357,6 +390,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{2}}"
+                        style="height: 44px"
                       >
                         
       3月
@@ -365,6 +399,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{3}}"
+                        style="height: 44px"
                       >
                         
       4月
@@ -373,6 +408,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{4}}"
+                        style="height: 44px"
                       >
                         
       5月
@@ -381,6 +417,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{5}}"
+                        style="height: 44px"
                       >
                         
       6月
@@ -389,6 +426,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{6}}"
+                        style="height: 44px"
                       >
                         
       7月
@@ -397,6 +435,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{7}}"
+                        style="height: 44px"
                       >
                         
       8月
@@ -405,6 +444,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item t-picker-item__item--active"
                         data-index="{{8}}"
+                        style="height: 44px"
                       >
                         
       9月
@@ -413,6 +453,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{9}}"
+                        style="height: 44px"
                       >
                         
       10月
@@ -421,6 +462,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{10}}"
+                        style="height: 44px"
                       >
                         
       11月
@@ -429,6 +471,7 @@ exports[`date-time-picker :base 1`] = `
                       <wx-view
                         class="t-picker-item__item"
                         data-index="{{11}}"
+                        style="height: 44px"
                       >
                         
       12月
@@ -462,7 +505,7 @@ exports[`date-time-picker :base 1`] = `
             ariaLabel="关闭"
             ariaRole="button"
             class="t-overlay t-fade-enter t-fade-enter-active class"
-            style="--td-overlay-transition-duration:300ms; z-index:11000;"
+            style="--td-overlay-transition-duration:300ms; z-index:11000; top:0px;"
             bind:tap="handleClick"
             catch:touchmove="noop"
             bind:transitionend="onTransitionEnd"
diff --git a/src/dialog/__test__/__snapshots__/demo.test.js.snap b/src/dialog/__test__/__snapshots__/demo.test.js.snap
index e9de0793f..b86ffb3bc 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.js.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.js.snap
@@ -79,6 +79,7 @@ exports[`Dialog Dialog base demo works fine 1`] = `
       class="long-content"
       scrollY="{{true}}"
       slot="content"
+      type="list"
     >
       <wx-view
         class="content-container"
diff --git a/src/dialog/__test__/__snapshots__/index.test.js.snap b/src/dialog/__test__/__snapshots__/index.test.js.snap
index af0024362..8442285d2 100644
--- a/src/dialog/__test__/__snapshots__/index.test.js.snap
+++ b/src/dialog/__test__/__snapshots__/index.test.js.snap
@@ -46,7 +46,7 @@ exports[`dialog :base 1`] = `
           ariaLabel="关闭"
           ariaRole="button"
           class="t-overlay t-fade-enter t-fade-enter-active class"
-          style="--td-overlay-transition-duration:300ms; z-index:11000;"
+          style="--td-overlay-transition-duration:300ms; z-index:11000; top:0px;"
           bind:tap="handleClick"
           catch:touchmove="noop"
           bind:transitionend="onTransitionEnd"
diff --git a/src/divider/__test__/__snapshots__/demo.test.js.snap b/src/divider/__test__/__snapshots__/demo.test.js.snap
index 166c065ae..0b7c11503 100644
--- a/src/divider/__test__/__snapshots__/demo.test.js.snap
+++ b/src/divider/__test__/__snapshots__/demo.test.js.snap
@@ -56,20 +56,24 @@ exports[`Divider Divider theme demo works fine 1`] = `
 <theme>
   <t-divider
     dashed="{{true}}"
+    tClass=""
   />
   <t-divider
     align="left"
     content="文字信息"
     dashed="{{true}}"
+    tClass=""
   />
   <t-divider
     content="文字信息"
     dashed="{{true}}"
+    tClass=""
   />
   <t-divider
     align="right"
     content="文字信息"
     dashed="{{true}}"
+    tClass=""
   />
 </theme>
 `;
diff --git a/src/drawer/__test__/__snapshots__/demo.test.js.snap b/src/drawer/__test__/__snapshots__/demo.test.js.snap
index b37b24324..4864d5e6b 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.js.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.js.snap
@@ -14,6 +14,7 @@ exports[`Drawer Drawer base demo works fine 1`] = `
   <t-drawer
     items="{{Array []}}"
     placement="left"
+    usingCustomNavbar="{{true}}"
     visible=""
     bind:item-click="itemClick"
     bind:overlay-click="overlayClick"
@@ -36,6 +37,7 @@ exports[`Drawer Drawer footer demo works fine 1`] = `
     items="{{Array []}}"
     placement="left"
     title="标题"
+    usingCustomNavbar="{{true}}"
     visible="{{false}}"
     bind:item-click="itemClick"
     bind:overlay-click="overlayClick"
@@ -70,6 +72,7 @@ exports[`Drawer Drawer icon-drawer demo works fine 1`] = `
   <t-drawer
     items="{{Array []}}"
     placement="left"
+    usingCustomNavbar="{{true}}"
     visible=""
     bind:item-click="itemClick"
     bind:overlay-click="overlayClick"
@@ -92,6 +95,7 @@ exports[`Drawer Drawer title demo works fine 1`] = `
     items="{{Array []}}"
     placement="left"
     title="标题"
+    usingCustomNavbar="{{true}}"
     visible=""
     bind:item-click="itemClick"
     bind:overlay-click="overlayClick"
diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
index 538e5c1f2..401339643 100644
--- a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
+++ b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -635,7 +635,7 @@ exports[`dropdown-menu :base 1`] = `
                 ariaLabel="关闭"
                 ariaRole="button"
                 class="t-overlay t-fade-enter-active t-fade-enter-to class"
-                style="--td-overlay-transition-duration:300ms; z-index:11000; position: absolute;"
+                style="--td-overlay-transition-duration:300ms; z-index:11000; top:0px; position: absolute;"
                 bind:tap="handleClick"
                 catch:touchmove="noop"
                 bind:transitionend="onTransitionEnd"
diff --git a/src/image-viewer/__test__/__snapshots__/demo.test.js.snap b/src/image-viewer/__test__/__snapshots__/demo.test.js.snap
index 11e040c9c..280234db0 100644
--- a/src/image-viewer/__test__/__snapshots__/demo.test.js.snap
+++ b/src/image-viewer/__test__/__snapshots__/demo.test.js.snap
@@ -19,6 +19,7 @@ exports[`ImageViewer ImageViewer base demo works fine 1`] = `
     deleteBtn="{{false}}"
     images="{{Array []}}"
     showIndex="{{false}}"
+    usingCustomNavbar="{{true}}"
     visible="{{false}}"
     bind:change="onChange"
     bind:close="onClose"
@@ -46,6 +47,7 @@ exports[`ImageViewer ImageViewer delete demo works fine 1`] = `
     deleteBtn="{{false}}"
     images="{{Array []}}"
     showIndex="{{false}}"
+    usingCustomNavbar="{{true}}"
     visible="{{false}}"
     bind:change="onChange"
     bind:close="onClose"
diff --git a/src/image/__test__/__snapshots__/demo.test.js.snap b/src/image/__test__/__snapshots__/demo.test.js.snap
index 9e0fca7cd..b759ad931 100644
--- a/src/image/__test__/__snapshots__/demo.test.js.snap
+++ b/src/image/__test__/__snapshots__/demo.test.js.snap
@@ -158,7 +158,7 @@ exports[`Image Image status demo works fine 1`] = `
           loading="{{true}}"
           size="40rpx"
           slot="loading"
-          theme="circular"
+          theme="spinner"
         />
       </t-image>
     </wx-view>
diff --git a/src/loading/__test__/__snapshots__/demo.test.js.snap b/src/loading/__test__/__snapshots__/demo.test.js.snap
index 1354ec6e0..dffe7bffe 100644
--- a/src/loading/__test__/__snapshots__/demo.test.js.snap
+++ b/src/loading/__test__/__snapshots__/demo.test.js.snap
@@ -26,7 +26,7 @@ exports[`Loading Loading base demo works fine 1`] = `
     >
       <t-image
         slot="indicator"
-        src="https://cdc.cdn-go.cn/tdc/latest/images/tdesign.svg"
+        src="https://tdesign.gtimg.com/mobile/demos/logo2.png"
         style="width: 100%; height: 100%"
       />
     </t-loading>
diff --git a/src/navbar/__test__/__snapshots__/demo.test.js.snap b/src/navbar/__test__/__snapshots__/demo.test.js.snap
index 9fcf04d37..d7ac7393b 100644
--- a/src/navbar/__test__/__snapshots__/demo.test.js.snap
+++ b/src/navbar/__test__/__snapshots__/demo.test.js.snap
@@ -3,6 +3,8 @@
 exports[`Navbar Navbar back-home demo works fine 1`] = `
 <back-home>
   <t-navbar
+    tClassContent="t-navbar-content"
+    tClassPlaceholder="t-navbar-placeholder"
     title="标题文字"
   >
     <wx-view
@@ -12,7 +14,7 @@ exports[`Navbar Navbar back-home demo works fine 1`] = `
       <t-icon
         ariaLabel="返回"
         ariaRole="button"
-        class="custom-capsule__icon"
+        class="custom-capsule__icon back"
         name="chevron-left"
         size="20"
         bind:tap="onBack"
@@ -20,7 +22,7 @@ exports[`Navbar Navbar back-home demo works fine 1`] = `
       <t-icon
         ariaLabel="首页"
         ariaRole="button"
-        class="custom-capsule__icon"
+        class="custom-capsule__icon home"
         name="home"
         size="20"
         bind:tap="onGoHome"
@@ -36,6 +38,8 @@ exports[`Navbar Navbar base demo works fine 1`] = `
     class="block"
   >
     <t-navbar
+      tClassContent="t-navbar-content"
+      tClassPlaceholder="t-navbar-placeholder"
       tClassTitle="nav-title"
       title="标题文字"
     />
@@ -46,6 +50,8 @@ exports[`Navbar Navbar base demo works fine 1`] = `
     <t-navbar
       class="block"
       leftArrow="{{true}}"
+      tClassContent="t-navbar-content"
+      tClassPlaceholder="t-navbar-placeholder"
       title="标题文字"
       bind:go-back="handleBack"
     />
@@ -58,6 +64,8 @@ exports[`Navbar Navbar custom-color demo works fine 1`] = `
   <t-navbar
     class="custom-navbar"
     leftArrow="{{true}}"
+    tClassContent="t-navbar-content"
+    tClassPlaceholder="t-navbar-placeholder"
     title="标题文字"
   />
 </custom-color>
@@ -65,7 +73,10 @@ exports[`Navbar Navbar custom-color demo works fine 1`] = `
 
 exports[`Navbar Navbar img demo works fine 1`] = `
 <img>
-  <t-navbar>
+  <t-navbar
+    tClassContent="t-navbar-content"
+    tClassPlaceholder="t-navbar-placeholder"
+  >
     <wx-view
       slot="left"
     >
@@ -86,11 +97,15 @@ exports[`Navbar Navbar left-title demo works fine 1`] = `
   >
     <t-navbar
       leftArrow="{{true}}"
+      tClassContent="t-navbar-content"
+      tClassPlaceholder="t-navbar-placeholder"
       title="标题居中"
     />
   </wx-view>
   <t-navbar
     leftArrow="{{true}}"
+    tClassContent="t-navbar-content"
+    tClassPlaceholder="t-navbar-placeholder"
   >
     <wx-view
       class="custom-title"
@@ -106,6 +121,8 @@ exports[`Navbar Navbar left-title demo works fine 1`] = `
   </wx-view>
   <t-navbar
     leftArrow="{{true}}"
+    tClassContent="t-navbar-content"
+    tClassPlaceholder="t-navbar-placeholder"
   >
     <wx-text
       class="left-text"
@@ -126,6 +143,8 @@ exports[`Navbar Navbar search demo works fine 1`] = `
 <search>
   <t-navbar
     leftIcon="slot"
+    tClassContent="t-navbar-content"
+    tClassPlaceholder="t-navbar-placeholder"
   >
     <wx-view
       class="search-box"
diff --git a/src/navbar/__test__/__snapshots__/index.test.js.snap b/src/navbar/__test__/__snapshots__/index.test.js.snap
index 2df0a3975..880493c37 100644
--- a/src/navbar/__test__/__snapshots__/index.test.js.snap
+++ b/src/navbar/__test__/__snapshots__/index.test.js.snap
@@ -8,10 +8,10 @@ exports[`navbar :base 1`] = `
       style=""
     >
       <wx-view
-        class="t-navbar__placeholder"
+        class="t-navbar__placeholder t-class-placeholder"
       />
       <wx-view
-        class="t-navbar__content"
+        class="t-navbar__content t-class-content"
       >
         <wx-view
           class="t-navbar__left t-class-left"
@@ -43,10 +43,10 @@ exports[`navbar :base 2`] = `
       style="--td-navbar-padding-top: 36rpx; --td-navbar-right: 170rpx; --td-navbar-capsule-height: 58rpx; --td-navbar-capsule-width: 158rpx; --td-navbar-height: 170rpx;"
     >
       <wx-view
-        class="t-navbar__placeholder"
+        class="t-navbar__placeholder t-class-placeholder"
       />
       <wx-view
-        class="t-navbar__content"
+        class="t-navbar__content t-class-content"
       >
         <wx-view
           class="t-navbar__left t-class-left"
@@ -78,10 +78,10 @@ exports[`navbar :base 3`] = `
       style="--td-navbar-padding-top: 36rpx; --td-navbar-right: 170rpx; --td-navbar-capsule-height: 58rpx; --td-navbar-capsule-width: 158rpx; --td-navbar-height: 170rpx;"
     >
       <wx-view
-        class="t-navbar__placeholder"
+        class="t-navbar__placeholder t-class-placeholder"
       />
       <wx-view
-        class="t-navbar__content"
+        class="t-navbar__content t-class-content"
       >
         <wx-view
           class="t-navbar__left t-class-left"
@@ -113,10 +113,10 @@ exports[`navbar :fixed 1`] = `
       style="--td-navbar-padding-top: 36rpx; --td-navbar-right: 170rpx; --td-navbar-capsule-height: 58rpx; --td-navbar-capsule-width: 158rpx; --td-navbar-height: 170rpx;"
     >
       <wx-view
-        class="t-navbar__placeholder"
+        class="t-navbar__placeholder t-class-placeholder"
       />
       <wx-view
-        class="t-navbar__content"
+        class="t-navbar__content t-class-content"
       >
         <wx-view
           class="t-navbar__left t-class-left"
@@ -148,10 +148,10 @@ exports[`navbar :menu button 1`] = `
       style="--td-navbar-padding-top: 36rpx; --td-navbar-right: 775rpx; --td-navbar-capsule-height: 18rpx; --td-navbar-capsule-width: 72rpx; --td-navbar-height: -18rpx;"
     >
       <wx-view
-        class="t-navbar__placeholder"
+        class="t-navbar__placeholder t-class-placeholder"
       />
       <wx-view
-        class="t-navbar__content"
+        class="t-navbar__content t-class-content"
       >
         <wx-view
           class="t-navbar__left t-class-left"
diff --git a/src/overlay/__test__/__snapshots__/index.test.js.snap b/src/overlay/__test__/__snapshots__/index.test.js.snap
index 773e5e671..19d2ee657 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="--td-overlay-transition-duration:300ms; z-index:11000;"
+      style="--td-overlay-transition-duration:300ms; z-index:11000; top:0px;"
       bind:tap="handleClick"
       catch:touchmove="noop"
       bind:transitionend="onTransitionEnd"
diff --git a/src/picker/__test__/__snapshots__/demo.test.js.snap b/src/picker/__test__/__snapshots__/demo.test.js.snap
index 302bda052..6b55344f6 100644
--- a/src/picker/__test__/__snapshots__/demo.test.js.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.js.snap
@@ -13,6 +13,7 @@ exports[`Picker Picker area demo works fine 1`] = `
     cancelBtn="取消"
     confirmBtn="确认"
     title="选择地区"
+    usingCustomNavbar="{{true}}"
     value="{{Array []}}"
     visible=""
     bind:cancel="onPickerCancel"
@@ -140,6 +141,7 @@ exports[`Picker Picker base demo works fine 1`] = `
     confirmBtn="确认"
     data-key="city"
     title="选择城市"
+    usingCustomNavbar="{{true}}"
     value="{{Array []}}"
     visible=""
     bind:cancel="onPickerCancel"
@@ -178,6 +180,7 @@ exports[`Picker Picker base demo works fine 1`] = `
     confirmBtn="确认"
     data-key="date"
     title="选择时间"
+    usingCustomNavbar="{{true}}"
     value="{{Array []}}"
     visible=""
     bind:cancel="onPickerCancel"
@@ -250,6 +253,7 @@ exports[`Picker Picker with-title demo works fine 1`] = `
     confirmBtn="确认"
     data-key="city"
     title=""
+    usingCustomNavbar="{{true}}"
     value="{{Array []}}"
     visible=""
     bind:cancel="onPickerCancel"
@@ -288,6 +292,7 @@ exports[`Picker Picker with-title demo works fine 1`] = `
     confirmBtn="确认"
     data-key="city2"
     title=""
+    usingCustomNavbar="{{true}}"
     value="{{Array []}}"
     visible=""
     bind:cancel="onPickerCancel"
diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
index efa7530be..780a43179 100644
--- a/src/picker/__test__/__snapshots__/index.test.js.snap
+++ b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -68,6 +68,7 @@ exports[`picker :base 1`] = `
                   <wx-view
                     class="t-picker-item__item t-picker-item__item--active"
                     data-index="{{0}}"
+                    style="height: 44px"
                   >
                     
       2021年
@@ -76,6 +77,7 @@ exports[`picker :base 1`] = `
                   <wx-view
                     class="t-picker-item__item"
                     data-index="{{1}}"
+                    style="height: 44px"
                   >
                     
       2020年
@@ -84,6 +86,7 @@ exports[`picker :base 1`] = `
                   <wx-view
                     class="t-picker-item__item"
                     data-index="{{2}}"
+                    style="height: 44px"
                   >
                     
       2019年
@@ -108,6 +111,7 @@ exports[`picker :base 1`] = `
                   <wx-view
                     class="t-picker-item__item t-picker-item__item--active"
                     data-index="{{0}}"
+                    style="height: 44px"
                   >
                     
       春
@@ -116,6 +120,7 @@ exports[`picker :base 1`] = `
                   <wx-view
                     class="t-picker-item__item"
                     data-index="{{1}}"
+                    style="height: 44px"
                   >
                     
       夏
@@ -124,6 +129,7 @@ exports[`picker :base 1`] = `
                   <wx-view
                     class="t-picker-item__item"
                     data-index="{{2}}"
+                    style="height: 44px"
                   >
                     
       秋
@@ -132,6 +138,7 @@ exports[`picker :base 1`] = `
                   <wx-view
                     class="t-picker-item__item"
                     data-index="{{3}}"
+                    style="height: 44px"
                   >
                     
       冬
@@ -165,7 +172,7 @@ exports[`picker :base 1`] = `
         ariaLabel="关闭"
         ariaRole="button"
         class="t-overlay t-fade-enter t-fade-enter-active class"
-        style="--td-overlay-transition-duration:300ms; z-index:11000;"
+        style="--td-overlay-transition-duration:300ms; z-index:11000; top:0px;"
         bind:tap="handleClick"
         catch:touchmove="noop"
         bind:transitionend="onTransitionEnd"
diff --git a/src/popup/__test__/__snapshots__/demo.test.js.snap b/src/popup/__test__/__snapshots__/demo.test.js.snap
index 78b71e956..8ff40d931 100644
--- a/src/popup/__test__/__snapshots__/demo.test.js.snap
+++ b/src/popup/__test__/__snapshots__/demo.test.js.snap
@@ -27,7 +27,9 @@ exports[`Popup Popup base demo works fine 1`] = `
     variant="outline"
     bind:tap="handlePopup"
   >
-    顶部弹出
+    
+  顶部弹出
+
   </t-button>
   <t-button
     block="{{true}}"
@@ -43,7 +45,9 @@ exports[`Popup Popup base demo works fine 1`] = `
     variant="outline"
     bind:tap="handlePopup"
   >
-    左侧弹出
+    
+  左侧弹出
+
   </t-button>
   <t-button
     block="{{true}}"
@@ -59,7 +63,9 @@ exports[`Popup Popup base demo works fine 1`] = `
     variant="outline"
     bind:tap="handlePopup"
   >
-    中间弹出
+    
+  中间弹出
+
   </t-button>
   <t-button
     block="{{true}}"
@@ -75,7 +81,9 @@ exports[`Popup Popup base demo works fine 1`] = `
     variant="outline"
     bind:tap="handlePopup"
   >
-    底部弹出
+    
+  底部弹出
+
   </t-button>
   <t-button
     block="{{true}}"
@@ -91,7 +99,9 @@ exports[`Popup Popup base demo works fine 1`] = `
     variant="outline"
     bind:tap="handlePopup"
   >
-    右侧弹出
+    
+  右侧弹出
+
   </t-button>
 </base>
 `;
@@ -122,7 +132,9 @@ exports[`Popup Popup custom-close demo works fine 1`] = `
     variant="outline"
     bind:tap="handlePopup"
   >
-    居中弹出层-带自定义关闭按钮
+    
+  居中弹出层-带自定义关闭按钮
+
   </t-button>
 </custom-close>
 `;
diff --git a/src/slider/__test__/__snapshots__/demo.test.js.snap b/src/slider/__test__/__snapshots__/demo.test.js.snap
index 65f0eff75..9cc546ef9 100644
--- a/src/slider/__test__/__snapshots__/demo.test.js.snap
+++ b/src/slider/__test__/__snapshots__/demo.test.js.snap
@@ -255,10 +255,10 @@ exports[`Slider Slider vertical demo works fine 1`] = `
     class="wrapper"
   >
     <t-slider
-      label="\${value}"
+      label="\${singlevalue}"
       value="{{35}}"
       vertical="{{true}}"
-      bind:change="handleChange"
+      bind:change="handleSingleChange"
     />
   </wx-view>
   <wx-view
@@ -300,11 +300,11 @@ exports[`Slider Slider vertical demo works fine 1`] = `
     class="wrapper"
   >
     <t-slider
-      label="\${value}"
+      label="\${capsuleValue}"
       theme="capsule"
       value="{{35}}"
       vertical="{{true}}"
-      bind:change="handleChange"
+      bind:change="handleCapsuleChange"
     />
   </wx-view>
   <wx-view
diff --git a/src/tab-bar/__test__/__snapshots__/demo.test.js.snap b/src/tab-bar/__test__/__snapshots__/demo.test.js.snap
index aa85dfdac..6b44dd781 100644
--- a/src/tab-bar/__test__/__snapshots__/demo.test.js.snap
+++ b/src/tab-bar/__test__/__snapshots__/demo.test.js.snap
@@ -5,6 +5,7 @@ exports[`TabBar TabBar badge demo works fine 1`] = `
   <t-tab-bar
     defaultValue="label1"
     split="{{false}}"
+    tClass="t-tab-bar"
   >
     <t-tab-bar-item
       ariaLabel="首页，有16条消息"
@@ -62,6 +63,7 @@ exports[`TabBar TabBar base demo works fine 1`] = `
 <base>
   <t-tab-bar
     split="{{false}}"
+    tClass="t-tab-bar"
     theme="tag"
     value="label_1"
     bind:change="onChange"
@@ -108,6 +110,7 @@ exports[`TabBar TabBar custom demo works fine 1`] = `
     class="wrapper"
   >
     <t-tab-bar
+      tClass="t-tab-bar"
       value="label_1"
       bind:change="onChange"
     >
@@ -140,6 +143,7 @@ exports[`TabBar TabBar icon-only demo works fine 1`] = `
 <icon-only>
   <t-tab-bar
     split="{{false}}"
+    tClass="t-tab-bar"
     theme="tag"
     value="label_1"
     bind:change="onChange"
@@ -173,6 +177,7 @@ exports[`TabBar TabBar round demo works fine 1`] = `
   <t-tab-bar
     shape="round"
     split="{{false}}"
+    tClass="t-tab-bar"
     theme="tag"
     value="label_1"
     bind:change="onChange"
@@ -181,38 +186,22 @@ exports[`TabBar TabBar round demo works fine 1`] = `
       ariaLabel="首页"
       icon="home"
       value="label_1"
-    >
-      
-    
-  
-    </t-tab-bar-item>
+    />
     <t-tab-bar-item
       ariaLabel="软件"
       icon="app"
       value="label_2"
-    >
-      
-    
-  
-    </t-tab-bar-item>
+    />
     <t-tab-bar-item
       ariaLabel="聊天"
       icon="chat"
       value="label_3"
-    >
-      
-    
-  
-    </t-tab-bar-item>
+    />
     <t-tab-bar-item
       ariaLabel="我的"
       icon="user"
       value="label_4"
-    >
-      
-    
-  
-    </t-tab-bar-item>
+    />
   </t-tab-bar>
 </round>
 `;
@@ -222,6 +211,7 @@ exports[`TabBar TabBar sub demo works fine 1`] = `
   <t-tab-bar
     defaultValue="label_3"
     split="{{false}}"
+    tClass="t-tab-bar"
     theme="tag"
   >
     <t-tab-bar-item
@@ -271,6 +261,7 @@ exports[`TabBar TabBar text-only demo works fine 1`] = `
 <text-only>
   <t-tab-bar
     split="{{false}}"
+    tClass="t-tab-bar"
     theme="tag"
     value="home"
     bind:change="onChange"
diff --git a/src/textarea/__test__/__snapshots__/demo.test.js.snap b/src/textarea/__test__/__snapshots__/demo.test.js.snap
index f85ac48ac..f88f314d6 100644
--- a/src/textarea/__test__/__snapshots__/demo.test.js.snap
+++ b/src/textarea/__test__/__snapshots__/demo.test.js.snap
@@ -12,6 +12,7 @@ exports[`Textarea Textarea autosize demo works fine 1`] = `
     disableDefaultPadding="{{true}}"
     label="标签文字"
     placeholder="请输入文字"
+    tClassLabel=""
     bind:line-change="onLineChange"
   />
 </autosize>
@@ -40,6 +41,8 @@ exports[`Textarea Textarea card demo works fine 1`] = `
       placeholder="请输入文字"
       style="border-radius: 18rpx;"
       tClass="external-class"
+      tClassIndicator=""
+      tClassLabel=""
     />
   </wx-view>
 </card>
@@ -63,6 +66,7 @@ exports[`Textarea Textarea custom demo works fine 1`] = `
       placeholder="请输入文字"
       style="height: 248rpx"
       tClass="external-class"
+      tClassIndicator=""
     />
   </wx-view>
 </custom>
@@ -76,6 +80,7 @@ exports[`Textarea Textarea disabled demo works fine 1`] = `
     label="标签文字"
     placeholder="请输入文字"
     tClass="external-class"
+    tClassLabel=""
     value="不可编辑文字"
   />
 </disabled>
@@ -88,6 +93,7 @@ exports[`Textarea Textarea label demo works fine 1`] = `
     label="标签文字"
     placeholder="请输入文字"
     tClass="external-class"
+    tClassLabel=""
   />
 </wx-label>
 `;
@@ -101,6 +107,8 @@ exports[`Textarea Textarea maxcharacter demo works fine 1`] = `
     maxcharacter="200"
     placeholder="设置最大字符个数，一个汉字表示两个字符"
     tClass="external-class"
+    tClassIndicator=""
+    tClassLabel=""
   />
 </maxcharacter>
 `;
@@ -114,6 +122,8 @@ exports[`Textarea Textarea maxlength demo works fine 1`] = `
     maxlength="200"
     placeholder="设置最大字符个数"
     tClass="external-class"
+    tClassIndicator=""
+    tClassLabel=""
   />
 </maxlength>
 `;
diff --git a/src/toast/__test__/__snapshots__/demo.test.js.snap b/src/toast/__test__/__snapshots__/demo.test.js.snap
index fd6a188bd..79f72c6ac 100644
--- a/src/toast/__test__/__snapshots__/demo.test.js.snap
+++ b/src/toast/__test__/__snapshots__/demo.test.js.snap
@@ -2,83 +2,90 @@
 
 exports[`Toast Toast base demo works fine 1`] = `
 <base>
-  <t-toast
-    id="t-toast"
-  />
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="showText"
-  >
-    纯文本
-  </t-button>
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="showMultiText"
-  >
-    多行文字
-  </t-button>
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="showHorizontalText"
-  >
-    带横向图标
-  </t-button>
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="showVerticalText"
-  >
-    带竖向图标
-  </t-button>
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="showLoading"
-  >
-    加载状态
-  </t-button>
-</base>
-`;
-
-exports[`Toast Toast close demo works fine 1`] = `
-<close>
   <t-toast
     id="t-toast"
   />
   <wx-view
-    class="toast-example"
+    class="box"
   >
     <t-button
-      class="margin-16"
+      block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="showText"
+    >
+      纯文本
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="showMultiText"
+    >
+      多行文字
+    </t-button>
+    <t-button
+      block="{{true}}"
       size="large"
       theme="primary"
       variant="outline"
-      bind:tap="handleShow"
+      bind:tap="showHorizontalText"
     >
-      显示提示
+      带横向图标
     </t-button>
     <t-button
+      block="{{true}}"
       size="large"
       theme="primary"
       variant="outline"
-      bind:tap="handleHide"
+      bind:tap="showVerticalText"
     >
-      关闭提示
+      带竖向图标
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="showLoading"
+    >
+      加载状态
     </t-button>
   </wx-view>
+</base>
+`;
+
+exports[`Toast Toast close demo works fine 1`] = `
+<close>
+  <t-toast
+    id="t-toast"
+  />
+  <wx-view
+    class="box"
+  >
+    <wx-view
+      class="toast-example"
+    >
+      <t-button
+        size="large"
+        theme="primary"
+        variant="outline"
+        bind:tap="handleShow"
+      >
+        显示提示
+      </t-button>
+      <t-button
+        size="large"
+        theme="primary"
+        variant="outline"
+        bind:tap="handleHide"
+      >
+        关闭提示
+      </t-button>
+    </wx-view>
+  </wx-view>
 </close>
 `;
 
@@ -87,15 +94,19 @@ exports[`Toast Toast cover demo works fine 1`] = `
   <t-toast
     id="t-toast"
   />
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="handleToast"
+  <wx-view
+    class="box"
   >
-    禁止滑动和点击
-  </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="handleToast"
+    >
+      禁止滑动和点击
+    </t-button>
+  </wx-view>
 </cover>
 `;
 
@@ -142,32 +153,36 @@ exports[`Toast Toast theme demo works fine 1`] = `
   <t-toast
     id="t-toast"
   />
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="showSuccessToast"
-  >
-    成功提示
-  </t-button>
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="showWarningToast"
-  >
-    警告提示
-  </t-button>
-  <t-button
-    block="{{true}}"
-    size="large"
-    theme="primary"
-    variant="outline"
-    bind:tap="showErrorToast"
+  <wx-view
+    class="box"
   >
-    错误提示
-  </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="showSuccessToast"
+    >
+      成功提示
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="showWarningToast"
+    >
+      警告提示
+    </t-button>
+    <t-button
+      block="{{true}}"
+      size="large"
+      theme="primary"
+      variant="outline"
+      bind:tap="showErrorToast"
+    >
+      错误提示
+    </t-button>
+  </wx-view>
 </theme>
 `;