diff --git a/examples/sites/demos/apis/drawer.js b/examples/sites/demos/apis/drawer.js
index 76ce5a8ca..72c673e55 100644
--- a/examples/sites/demos/apis/drawer.js
+++ b/examples/sites/demos/apis/drawer.js
@@ -172,7 +172,7 @@ export default {
         {
           name: 'height',
           type: 'string',
-          defaultValue: "'500px'",
+          defaultValue: "'100vh'",
           desc: {
             'zh-CN': '设置抽屉的高度',
             'en-US': 'Set the height of the drawer'
diff --git a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
index d89b08a9d..21521c415 100644
--- a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：只显示图标</p>
+    <p>场景1：显示图标</p>
     <tiny-action-menu
       class="custom-icon"
       :options="options"
diff --git a/examples/sites/demos/pc/app/action-menu/icon.vue b/examples/sites/demos/pc/app/action-menu/icon.vue
index 12425818f..5a45236ec 100644
--- a/examples/sites/demos/pc/app/action-menu/icon.vue
+++ b/examples/sites/demos/pc/app/action-menu/icon.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>场景1：只显示图标</p>
+    <p>场景1：显示图标</p>
     <tiny-action-menu
       class="custom-icon"
       :options="options"
diff --git a/examples/sites/demos/pc/app/amount/size-composition-api.vue b/examples/sites/demos/pc/app/amount/size-composition-api.vue
index c14d9538c..7341e553d 100644
--- a/examples/sites/demos/pc/app/amount/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/amount/size-composition-api.vue
@@ -1,5 +1,11 @@
 <template>
   <tiny-amount size="medium" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="small" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="mini" v-model="value" :date="date"></tiny-amount>
 </template>
 
 <script setup lang="jsx">
diff --git a/examples/sites/demos/pc/app/amount/size.vue b/examples/sites/demos/pc/app/amount/size.vue
index 20aa9c483..607cd65a8 100644
--- a/examples/sites/demos/pc/app/amount/size.vue
+++ b/examples/sites/demos/pc/app/amount/size.vue
@@ -1,5 +1,11 @@
 <template>
   <tiny-amount size="medium" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="small" v-model="value" :date="date"></tiny-amount>
+  <br />
+  <tiny-amount size="mini" v-model="value" :date="date"></tiny-amount>
 </template>
 
 <script lang="jsx">
diff --git a/examples/sites/demos/pc/app/area/custom-service-composition-api.vue b/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
index d4bb2674f..742bd3ac7 100644
--- a/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/area/custom-service-composition-api.vue
@@ -23,7 +23,7 @@ function getJCR() {
       id: '3623',
       id_and_type: '3623JCR',
       parent_and_type: null,
-      name: 'A公司 Marketing与销售服务部',
+      name: 'A公司销售服务部',
       date_from: '2005/06/21 00:00:00',
       name_en: 'Consumer BG Marketing and Sales Service Dept',
       parent_type: null,
@@ -36,7 +36,7 @@ function getJCR() {
       id: '650561',
       id_and_type: '650561JCR',
       parent_and_type: null,
-      name: 'A公司 Marketing与销售服务部（东莞）',
+      name: 'A公司销售服务部（东莞）',
       date_from: '2012/09/27 00:00:00',
       name_en: 'Consumer BG Marketing and Sales Service Dept (Dongguan)',
       parent_type: null,
diff --git a/examples/sites/demos/pc/app/area/custom-service.spec.ts b/examples/sites/demos/pc/app/area/custom-service.spec.ts
index bd3821496..165353a0b 100644
--- a/examples/sites/demos/pc/app/area/custom-service.spec.ts
+++ b/examples/sites/demos/pc/app/area/custom-service.spec.ts
@@ -34,7 +34,7 @@ test('测试自定义服务', async ({ page }) => {
   await getSelectItem(areaRep).first().click()
   await areaInput.nth(3).click()
   await getSelectItem(areaOffice).first().click()
-  await expect(areaInput.first()).toHaveValue('A公司 Marketing与销售服务部')
+  await expect(areaInput.first()).toHaveValue('A公司销售服务部')
   await expect(areaInput.nth(1)).toHaveValue('火星终端子公司')
   await expect(areaInput.nth(2)).toHaveValue('北京代表处')
   await expect(areaInput.nth(3)).toHaveValue('牙买加办事处')
diff --git a/examples/sites/demos/pc/app/area/custom-service.vue b/examples/sites/demos/pc/app/area/custom-service.vue
index 0086c56cc..396ffa0a2 100644
--- a/examples/sites/demos/pc/app/area/custom-service.vue
+++ b/examples/sites/demos/pc/app/area/custom-service.vue
@@ -30,7 +30,7 @@ export default {
           id: '3623',
           id_and_type: '3623JCR',
           parent_and_type: null,
-          name: 'A公司 Marketing与销售服务部',
+          name: 'A公司销售服务部',
           date_from: '2005/06/21 00:00:00',
           name_en: 'Consumer BG Marketing and Sales Service Dept',
           parent_type: null,
@@ -43,7 +43,7 @@ export default {
           id: '650561',
           id_and_type: '650561JCR',
           parent_and_type: null,
-          name: 'A公司 Marketing与销售服务部（东莞）',
+          name: 'A公司销售服务部（东莞）',
           date_from: '2012/09/27 00:00:00',
           name_en: 'Consumer BG Marketing and Sales Service Dept (Dongguan)',
           parent_type: null,
diff --git a/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
index f718b0c7c..3e1e57e3c 100644
--- a/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-company-class">
     <tiny-company
       v-model="value"
       placeholder="请选择"
@@ -32,6 +32,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-company-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/company/basic-usage.vue b/examples/sites/demos/pc/app/company/basic-usage.vue
index a659d5f1c..1e7957017 100644
--- a/examples/sites/demos/pc/app/company/basic-usage.vue
+++ b/examples/sites/demos/pc/app/company/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-company-class">
     <tiny-company
       v-model="value"
       placeholder="请选择"
@@ -39,6 +39,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-company-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/company/custom-service-composition-api.vue b/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
index 3ccc160de..786609b3b 100644
--- a/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/custom-service-composition-api.vue
@@ -1,15 +1,17 @@
 <template>
-  <tiny-company
-    v-model="value"
-    placeholder="请输入"
-    :fetch-company="getCompanyData"
-    :fields="fields"
-    :max="2"
-    @change="change"
-    @clear="clear"
-    is-drop-inherit-width
-    clearable
-  ></tiny-company>
+  <div class="demo-company-class">
+    <tiny-company
+      v-model="value"
+      placeholder="请输入"
+      :fetch-company="getCompanyData"
+      :fields="fields"
+      :max="2"
+      @change="change"
+      @clear="clear"
+      is-drop-inherit-width
+      clearable
+    ></tiny-company>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -53,3 +55,9 @@ function change(value) {
   TinyModal.message({ message: `change:${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/company/custom-service.vue b/examples/sites/demos/pc/app/company/custom-service.vue
index d8fff6e21..f1ba8eafb 100644
--- a/examples/sites/demos/pc/app/company/custom-service.vue
+++ b/examples/sites/demos/pc/app/company/custom-service.vue
@@ -1,15 +1,17 @@
 <template>
-  <tiny-company
-    v-model="value"
-    placeholder="请输入"
-    :fetch-company="getCompanyData"
-    :fields="fields"
-    :max="2"
-    @change="change"
-    @clear="clear"
-    is-drop-inherit-width
-    clearable
-  ></tiny-company>
+  <div class="demo-company-class">
+    <tiny-company
+      v-model="value"
+      placeholder="请输入"
+      :fetch-company="getCompanyData"
+      :fields="fields"
+      :max="2"
+      @change="change"
+      @clear="clear"
+      is-drop-inherit-width
+      clearable
+    ></tiny-company>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -60,3 +62,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue b/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
index 80beadaf8..4040ab7f6 100644
--- a/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
+++ b/examples/sites/demos/pc/app/company/custom-show-num-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  <div class="demo-company-class">
+    <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyCompany } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/company/custom-show-num.vue b/examples/sites/demos/pc/app/company/custom-show-num.vue
index d52056a7f..6c7d991fc 100644
--- a/examples/sites/demos/pc/app/company/custom-show-num.vue
+++ b/examples/sites/demos/pc/app/company/custom-show-num.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  <div class="demo-company-class">
+    <tiny-company v-model="value" clearable :max="2" :disabled="false"></tiny-company>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-company-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
index 12723c81f..1dbcf389c 100644
--- a/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-country-class">
     <tiny-country v-model="value" @change="change"></tiny-country>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -17,6 +17,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-country-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/country/basic-usage.vue b/examples/sites/demos/pc/app/country/basic-usage.vue
index f1dfc8cd6..ed52524e4 100644
--- a/examples/sites/demos/pc/app/country/basic-usage.vue
+++ b/examples/sites/demos/pc/app/country/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-country-class">
     <tiny-country v-model="value" @change="change"></tiny-country>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-country-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/country/custom-service-composition-api.vue b/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
index 209c5e1f8..9fd8980af 100644
--- a/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/custom-service-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  <div class="demo-country-class">
+    <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +41,9 @@ function getCountryData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/custom-service.vue b/examples/sites/demos/pc/app/country/custom-service.vue
index df26f051a..cd95f9604 100644
--- a/examples/sites/demos/pc/app/country/custom-service.vue
+++ b/examples/sites/demos/pc/app/country/custom-service.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  <div class="demo-country-class">
+    <tiny-country v-model="value" clearable placeholder="请选择" :fetch-country="getCountryData"></tiny-country>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/fields-composition-api.vue b/examples/sites/demos/pc/app/country/fields-composition-api.vue
index 5c375816d..0e44950bf 100644
--- a/examples/sites/demos/pc/app/country/fields-composition-api.vue
+++ b/examples/sites/demos/pc/app/country/fields-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  <div class="demo-country-class">
+    <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +41,9 @@ function getCountryData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/country/fields.vue b/examples/sites/demos/pc/app/country/fields.vue
index 1ba408c9b..1014ab58a 100644
--- a/examples/sites/demos/pc/app/country/fields.vue
+++ b/examples/sites/demos/pc/app/country/fields.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  <div class="demo-country-class">
+    <tiny-country v-model="value" :fetch-country="getCountryData" :fields="fields" :disabled="false"></tiny-country>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-country-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
index 6dda7eac2..3ef96825e 100644
--- a/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -17,6 +17,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/currency/basic-usage.vue b/examples/sites/demos/pc/app/currency/basic-usage.vue
index d5e58c80a..7fe06ea21 100644
--- a/examples/sites/demos/pc/app/currency/basic-usage.vue
+++ b/examples/sites/demos/pc/app/currency/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue b/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
index c26b9ac6c..7abc90ad7 100644
--- a/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/custom-service-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -65,3 +67,9 @@ function getCurrencyData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/custom-service.vue b/examples/sites/demos/pc/app/currency/custom-service.vue
index 69728f519..fc57ed465 100644
--- a/examples/sites/demos/pc/app/currency/custom-service.vue
+++ b/examples/sites/demos/pc/app/currency/custom-service.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" :fetch-currency="getCurrencyData" clearable></tiny-currency>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -74,3 +76,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue b/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
index 9a3627723..93367fad1 100644
--- a/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/disable-currency-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <br />
     <tiny-currency v-model="value" placeholder="请选择" @change="change" :disabled="disabled"></tiny-currency>
@@ -21,3 +21,9 @@ function Switchover() {
   disabled.value = !disabled.value
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/disable-currency.vue b/examples/sites/demos/pc/app/currency/disable-currency.vue
index 16ed0c54a..aefa0d5b2 100644
--- a/examples/sites/demos/pc/app/currency/disable-currency.vue
+++ b/examples/sites/demos/pc/app/currency/disable-currency.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <br />
     <tiny-currency v-model="value" placeholder="请选择" @change="change" :disabled="disabled"></tiny-currency>
@@ -30,3 +30,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/fields-composition-api.vue b/examples/sites/demos/pc/app/currency/fields-composition-api.vue
index 5aa622e78..72d3e13b7 100644
--- a/examples/sites/demos/pc/app/currency/fields-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/fields-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -32,3 +34,9 @@ function getCurrencyData() {
   })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/fields.vue b/examples/sites/demos/pc/app/currency/fields.vue
index e3cfd6013..7c73a9f28 100644
--- a/examples/sites/demos/pc/app/currency/fields.vue
+++ b/examples/sites/demos/pc/app/currency/fields.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" :fetch-currency="getCurrencyData" :fields="fields"></tiny-currency>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -41,3 +43,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/filter-composition-api.vue b/examples/sites/demos/pc/app/currency/filter-composition-api.vue
index 46b9e1c31..e827de75f 100644
--- a/examples/sites/demos/pc/app/currency/filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/filter-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency
       v-model="value"
       :drop-style="{ width: '200px', 'min-width': '200px' }"
@@ -22,3 +22,14 @@ const change = (value) => {
   TinyModal.message({ message: `当前值为 ${value}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/filter.vue b/examples/sites/demos/pc/app/currency/filter.vue
index b999aefe6..1e0863e33 100644
--- a/examples/sites/demos/pc/app/currency/filter.vue
+++ b/examples/sites/demos/pc/app/currency/filter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency
       v-model="value"
       :drop-style="{ width: '200px', 'min-width': '200px' }"
@@ -31,3 +31,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 16px 0;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/set-default-composition-api.vue b/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
index 2b59e4f01..b5f4b7d66 100644
--- a/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyCurrency } from '@opentiny/vue'
 
 const value = ref('CNY')
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue b/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
index 9669cbfeb..97f5382ec 100644
--- a/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-custom-service-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-currency
-    v-model="value"
-    placeholder="请选择"
-    set-default
-    :fetch-default-currency="fetchDefaultCurrency"
-    :set-default-currency="setDefaultCurrency"
-    @change="change"
-  ></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency
+      v-model="value"
+      placeholder="请选择"
+      set-default
+      :fetch-default-currency="fetchDefaultCurrency"
+      :set-default-currency="setDefaultCurrency"
+      @change="change"
+    ></tiny-currency>
+  </div>
 </template>
 
 <script setup>
@@ -41,3 +43,9 @@ const instance = getCurrentInstance()
 const { $service } = instance.appContext.config.globalProperties
 console.log($service?.base.getEnvInfo())
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/set-default-custom-service.vue b/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
index d32b65a93..28974cae4 100644
--- a/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
+++ b/examples/sites/demos/pc/app/currency/set-default-custom-service.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-currency
-    v-model="value"
-    placeholder="请选择"
-    set-default
-    :fetch-default-currency="fetchDefaultCurrency"
-    :set-default-currency="setDefaultCurrency"
-    @change="change"
-  ></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency
+      v-model="value"
+      placeholder="请选择"
+      set-default
+      :fetch-default-currency="fetchDefaultCurrency"
+      :set-default-currency="setDefaultCurrency"
+      @change="change"
+    ></tiny-currency>
+  </div>
 </template>
 
 <script>
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/set-default.vue b/examples/sites/demos/pc/app/currency/set-default.vue
index 12acde8c2..e7d1ed351 100644
--- a/examples/sites/demos/pc/app/currency/set-default.vue
+++ b/examples/sites/demos/pc/app/currency/set-default.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/currency/size-composition-api.vue b/examples/sites/demos/pc/app/currency/size-composition-api.vue
index 92b18ed02..1784fd4f7 100644
--- a/examples/sites/demos/pc/app/currency/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/currency/size-composition-api.vue
@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" size="medium" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="small" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="mini" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -17,6 +23,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/currency/size.vue b/examples/sites/demos/pc/app/currency/size.vue
index 625ea9e81..d385d3d2e 100644
--- a/examples/sites/demos/pc/app/currency/size.vue
+++ b/examples/sites/demos/pc/app/currency/size.vue
@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" size="medium" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="small" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="mini" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -26,6 +32,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue b/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
index 4ce732f5a..c73caa050 100644
--- a/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/auto-select-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/auto-select.vue b/examples/sites/demos/pc/app/dept/auto-select.vue
index 820323b1a..4f5d921d4 100644
--- a/examples/sites/demos/pc/app/dept/auto-select.vue
+++ b/examples/sites/demos/pc/app/dept/auto-select.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
index d5817da78..cf1f85b9a 100644
--- a/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/basic-usage-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/basic-usage.vue b/examples/sites/demos/pc/app/dept/basic-usage.vue
index c335056b6..ff898e59f 100644
--- a/examples/sites/demos/pc/app/dept/basic-usage.vue
+++ b/examples/sites/demos/pc/app/dept/basic-usage.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue b/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
index 57d549619..03aafa542 100644
--- a/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/before-confirm-composition-api.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
   </div>
 </template>
 
@@ -23,8 +21,8 @@ function beforeConfirm() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/before-confirm.vue b/examples/sites/demos/pc/app/dept/before-confirm.vue
index f6973ca25..53f97bf99 100644
--- a/examples/sites/demos/pc/app/dept/before-confirm.vue
+++ b/examples/sites/demos/pc/app/dept/before-confirm.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
   </div>
 </template>
 
@@ -32,8 +30,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue b/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
index c7dba8ca2..706bca1d4 100644
--- a/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/custom-service-composition-api.vue
@@ -1,10 +1,12 @@
 <template>
-  <tiny-dept
-    v-model="value"
-    :fetch-dept-by-value="getfetchDeptByValue"
-    :fetch-dept="getfetchDept"
-    :fetch-dept-list="getDeptList"
-  ></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept
+      v-model="value"
+      :fetch-dept-by-value="getfetchDeptByValue"
+      :fetch-dept="getfetchDept"
+      :fetch-dept-list="getDeptList"
+    ></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -274,3 +276,9 @@ function getDeptList(upperCode) {
   })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/custom-service.vue b/examples/sites/demos/pc/app/dept/custom-service.vue
index a5a349e1f..b83076c76 100644
--- a/examples/sites/demos/pc/app/dept/custom-service.vue
+++ b/examples/sites/demos/pc/app/dept/custom-service.vue
@@ -1,10 +1,12 @@
 <template>
-  <tiny-dept
-    v-model="value"
-    :fetch-dept-by-value="getfetchDeptByValue"
-    :fetch-dept="getfetchDept"
-    :fetch-dept-list="getDeptList"
-  ></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept
+      v-model="value"
+      :fetch-dept-by-value="getfetchDeptByValue"
+      :fetch-dept="getfetchDept"
+      :fetch-dept-list="getDeptList"
+    ></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -281,3 +283,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
index 6bcfd8341..5489c5d20 100644
--- a/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-cancel-composition-api.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
   </div>
 </template>
 
@@ -19,8 +17,8 @@ function cancel() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/dept-cancel.vue b/examples/sites/demos/pc/app/dept/dept-cancel.vue
index d6f1039d6..6d69f75e9 100644
--- a/examples/sites/demos/pc/app/dept/dept-cancel.vue
+++ b/examples/sites/demos/pc/app/dept/dept-cancel.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
   </div>
 </template>
 
@@ -28,8 +26,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
index c0eb90330..ae749a8b3 100644
--- a/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-close-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @close="close"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @close="close"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ function close() {
   TinyModal.message('关闭弹出框')
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-close.vue b/examples/sites/demos/pc/app/dept/dept-close.vue
index 64d37754c..9a4e66940 100644
--- a/examples/sites/demos/pc/app/dept/dept-close.vue
+++ b/examples/sites/demos/pc/app/dept/dept-close.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @close="close"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @close="close"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -21,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
index b5bbaa9f9..5d942c00a 100644
--- a/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-confirm-composition-api.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
   </div>
 </template>
 
@@ -19,8 +17,8 @@ function confirm() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/dept-confirm.vue b/examples/sites/demos/pc/app/dept/dept-confirm.vue
index 9513402b7..03c577286 100644
--- a/examples/sites/demos/pc/app/dept/dept-confirm.vue
+++ b/examples/sites/demos/pc/app/dept/dept-confirm.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
   </div>
 </template>
 
@@ -28,8 +26,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
index d3a041aac..ec58bcde0 100644
--- a/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-events-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -16,3 +18,9 @@ function change(value) {
   TinyModal.message({ message: '改变的部门值: ' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-events.vue b/examples/sites/demos/pc/app/dept/dept-events.vue
index 46ef04512..798659587 100644
--- a/examples/sites/demos/pc/app/dept/dept-events.vue
+++ b/examples/sites/demos/pc/app/dept/dept-events.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue b/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
index 656bbf7fb..e5d5916ff 100644
--- a/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dept-selected-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ function selected(value) {
   TinyModal.message({ message: '下拉选项值改变为: ' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dept-selected.vue b/examples/sites/demos/pc/app/dept/dept-selected.vue
index 824465fa0..164aa3552 100644
--- a/examples/sites/demos/pc/app/dept/dept-selected.vue
+++ b/examples/sites/demos/pc/app/dept/dept-selected.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -21,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
index f7902dd25..1349d0fdd 100644
--- a/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/dynamic-disable-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" disabled></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" disabled></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/dynamic-disable.vue b/examples/sites/demos/pc/app/dept/dynamic-disable.vue
index 906037a8b..2174e2412 100644
--- a/examples/sites/demos/pc/app/dept/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/dept/dynamic-disable.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" disabled></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" disabled></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/size-composition-api.vue b/examples/sites/demos/pc/app/dept/size-composition-api.vue
index 1b10012fe..0aa18e125 100644
--- a/examples/sites/demos/pc/app/dept/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/size-composition-api.vue
@@ -1,5 +1,13 @@
 <template>
-  <tiny-dept v-model="value" size="medium"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" size="medium"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="small"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="mini"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +16,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/size.vue b/examples/sites/demos/pc/app/dept/size.vue
index a5657fdaa..d35d20670 100644
--- a/examples/sites/demos/pc/app/dept/size.vue
+++ b/examples/sites/demos/pc/app/dept/size.vue
@@ -1,5 +1,13 @@
 <template>
-  <tiny-dept v-model="value" size="medium"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" size="medium"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="small"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="mini"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue b/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
index 166b3195a..26785bbb6 100644
--- a/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/slot-hrapprover-composition-api.vue
@@ -1,9 +1,11 @@
 <template>
-  <tiny-dept :value="value" size="medium">
-    <template #hrapprover="data">
-      <div>{{ data.slotScope.hrapprover }}</div>
-    </template>
-  </tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept :value="value">
+      <template #hrapprover="data">
+        <div>{{ data.slotScope.hrapprover }}</div>
+      </template>
+    </tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/slot-hrapprover.vue b/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
index ee6a8eb64..d5619933f 100644
--- a/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
+++ b/examples/sites/demos/pc/app/dept/slot-hrapprover.vue
@@ -1,9 +1,11 @@
 <template>
-  <tiny-dept :value="value" size="medium">
-    <template #hrapprover="data">
-      <div>{{ data.slotScope.hrapprover }}</div>
-    </template>
-  </tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept :value="value">
+      <template #hrapprover="data">
+        <div>{{ data.slotScope.hrapprover }}</div>
+      </template>
+    </tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -20,3 +22,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/title-composition-api.vue b/examples/sites/demos/pc/app/dept/title-composition-api.vue
index a7be07a6b..ba18252ec 100644
--- a/examples/sites/demos/pc/app/dept/title-composition-api.vue
+++ b/examples/sites/demos/pc/app/dept/title-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" title="部门"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" title="部门"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dept/title.vue b/examples/sites/demos/pc/app/dept/title.vue
index a226e91d2..cb5c43002 100644
--- a/examples/sites/demos/pc/app/dept/title.vue
+++ b/examples/sites/demos/pc/app/dept/title.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" title="部门"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" title="部门"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
index 415ba13aa..25c888a01 100644
--- a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -35,9 +36,3 @@ const drag = ({ width, height }) => {
   TinyModal.message({ message: `抽屉的宽为${width},高为${height}`, status: 'info' })
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/drawer/dragable.vue b/examples/sites/demos/pc/app/drawer/dragable.vue
index 76b5c4807..5b1a3a55d 100644
--- a/examples/sites/demos/pc/app/drawer/dragable.vue
+++ b/examples/sites/demos/pc/app/drawer/dragable.vue
@@ -10,8 +10,9 @@
       :visible="visible"
       @update:visible="visible = $event"
       @drag="drag"
+      height="600px"
     >
-      <div class="content">
+      <div>
         <p v-if="placement === 'right'">横向拖拽左边框可改变抽屉主体宽度。</p>
         <p v-else>竖向拖拽上边框可改变抽屉主体高度。</p>
       </div>
@@ -44,9 +45,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.content {
-  height: 300px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
index a3bed2d36..17b9b5fc1 100644
--- a/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/placement-composition-api.vue
@@ -10,6 +10,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>
diff --git a/examples/sites/demos/pc/app/drawer/placement.vue b/examples/sites/demos/pc/app/drawer/placement.vue
index 8792828a2..fc472ab62 100644
--- a/examples/sites/demos/pc/app/drawer/placement.vue
+++ b/examples/sites/demos/pc/app/drawer/placement.vue
@@ -9,6 +9,7 @@
       title="标题"
       :placement="placement"
       v-model:visible="visible"
+      height="600px"
     >
       <div>left或者right内容区域</div>
     </tiny-drawer>
diff --git a/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
index a2549db25..ff86ad3b4 100644
--- a/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -26,6 +26,9 @@ function change(role) {
 </script>
 
 <style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/drop-roles/basic-usage.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
index ca10a038f..57180551e 100644
--- a/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
+++ b/examples/sites/demos/pc/app/drop-roles/basic-usage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -34,6 +34,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
index 9ef43f2cc..ad499918f 100644
--- a/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/change-role-event-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -21,3 +23,9 @@ function change(role) {
   })
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/change-role-event.vue b/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
index 444df1a4f..864ee69ac 100644
--- a/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
+++ b/examples/sites/demos/pc/app/drop-roles/change-role-event.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -29,3 +31,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
index d75ef4750..752755697 100644
--- a/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/custom-service-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-drop-roles
-    v-model="value"
-    placeholder="选择角色"
-    :fields="fields"
-    :fetch-role="getRoleList"
-    :fetch-current-role="getCurrentRole"
-    @change="change"
-  ></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles
+      v-model="value"
+      placeholder="选择角色"
+      :fields="fields"
+      :fetch-role="getRoleList"
+      :fetch-current-role="getCurrentRole"
+      @change="change"
+    ></tiny-drop-roles>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -41,3 +43,9 @@ function change(role) {
   )
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/custom-service.vue b/examples/sites/demos/pc/app/drop-roles/custom-service.vue
index 659a7401d..f99405dfb 100644
--- a/examples/sites/demos/pc/app/drop-roles/custom-service.vue
+++ b/examples/sites/demos/pc/app/drop-roles/custom-service.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-drop-roles
-    v-model="value"
-    placeholder="选择角色"
-    :fields="fields"
-    :fetch-role="getRoleList"
-    :fetch-current-role="getCurrentRole"
-    @change="change"
-  ></tiny-drop-roles>
+  <div class="demo-drop-roles-class">
+    <tiny-drop-roles
+      v-model="value"
+      placeholder="选择角色"
+      :fields="fields"
+      :fetch-role="getRoleList"
+      :fetch-current-role="getCurrentRole"
+      @change="change"
+    ></tiny-drop-roles>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-drop-roles-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
index da3366d2a..4d2de13d4 100644
--- a/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/drop-roles/size-composition-api.vue
@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -26,9 +33,7 @@ function change(role) {
 </script>
 
 <style scoped>
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
+.demo-drop-roles-class {
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/drop-roles/size.vue b/examples/sites/demos/pc/app/drop-roles/size.vue
index e508fcc74..2cf758fa5 100644
--- a/examples/sites/demos/pc/app/drop-roles/size.vue
+++ b/examples/sites/demos/pc/app/drop-roles/size.vue
@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="demo-drop-roles-class">
     <tiny-drop-roles size="medium" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="small" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
+    <tiny-drop-roles size="mini" v-model="value" @change="change"></tiny-drop-roles>
+    <br /><br />
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -34,9 +41,7 @@ export default {
 </script>
 
 <style scoped>
-p {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 16px 0;
+.demo-drop-roles-class {
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
index a6152faac..9d32c944d 100644
--- a/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="demo-form">
     <tiny-form label-width="100px">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -16,7 +16,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { reactive } from 'vue'
 import {
   TinyForm,
   TinyFormItem,
diff --git a/examples/sites/demos/pc/app/form/basic-usage.spec.ts b/examples/sites/demos/pc/app/form/basic-usage.spec.ts
index bbd3f5495..d20442301 100644
--- a/examples/sites/demos/pc/app/form/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/form/basic-usage.spec.ts
@@ -30,10 +30,6 @@ test('测试基本表单', async ({ page }) => {
   await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 
-  // 其他输入
-  await demo.getByPlaceholder('click').first().hover()
-  await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()
-
   // 提交按钮
   const dialog = page.locator('.tiny-modal.active')
   await demo.getByRole('button', { name: '提交' }).click()
diff --git a/examples/sites/demos/pc/app/form/basic-usage.vue b/examples/sites/demos/pc/app/form/basic-usage.vue
index 81412ce77..bd125ef99 100644
--- a/examples/sites/demos/pc/app/form/basic-usage.vue
+++ b/examples/sites/demos/pc/app/form/basic-usage.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="demo-form">
     <tiny-form label-width="100px">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -16,7 +16,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
index 5c20174f1..c60a28d88 100644
--- a/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
@@ -9,7 +9,7 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
+        <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/custom-validation-rule.vue b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
index db3a8906c..eedeb0a91 100644
--- a/examples/sites/demos/pc/app/form/custom-validation-rule.vue
+++ b/examples/sites/demos/pc/app/form/custom-validation-rule.vue
@@ -9,7 +9,7 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
-        <tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
+        <tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/display-only-composition-api.vue b/examples/sites/demos/pc/app/form/display-only-composition-api.vue
index 164569826..45ef7be58 100644
--- a/examples/sites/demos/pc/app/form/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/display-only-composition-api.vue
@@ -2,13 +2,22 @@
   <div class="demo-form">
     <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
-      <tiny-form-item label="超长文字">
-        <tiny-input v-model="formData.input"></tiny-input>
+      <tiny-form-item label="开关">
+        <tiny-switch></tiny-switch>
       </tiny-form-item>
       <tiny-form-item label="radio">
         <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
         <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="复选框">
+        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
+      </tiny-form-item>
+      <tiny-form-item label="复选框组">
+        <tiny-checkbox-group v-model="formData.checkedArr">
+          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+        </tiny-checkbox-group>
+      </tiny-form-item>
       <tiny-form-item label="select">
         <tiny-select v-model="formData.select">
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
         </tiny-select>
       </tiny-form-item>
-      <tiny-form-item label="文本域">
-        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
-      </tiny-form-item>
       <tiny-form-item label="我的密码">
         <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字">
         <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="复选框">
-        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
-      </tiny-form-item>
-      <tiny-form-item label="复选框组">
-        <tiny-checkbox-group v-model="formData.checkedArr">
-          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
-          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
-        </tiny-checkbox-group>
-      </tiny-form-item>
-      <tiny-form-item label="开关">
-        <tiny-switch></tiny-switch>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
       <tiny-form-item label="datePicker">
         <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
       </tiny-form-item>
+      <tiny-form-item label="超长文字">
+        <tiny-input v-model="formData.input"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本域">
+        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
+      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
@@ -146,7 +146,7 @@ const pickerOptions = ref({
 })
 const formData = ref({
   input:
-    '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+    'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
   radioValue: '1',
   select: '选项1',
   select1: ['选项1', '选项2'],
@@ -164,7 +164,7 @@ const formData = ref({
   monthrange: ['2022-01', '2023-01'],
   quantity: 1,
   textareaValue:
-    '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
+    'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
   checked: true,
   checkedArr: ['复选框1'],
   rate1: 2,
@@ -202,7 +202,6 @@ function createFilter(queryString) {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 16px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/display-only.spec.ts b/examples/sites/demos/pc/app/form/display-only.spec.ts
index 3ed16b484..6f84fcf72 100644
--- a/examples/sites/demos/pc/app/form/display-only.spec.ts
+++ b/examples/sites/demos/pc/app/form/display-only.spec.ts
@@ -9,13 +9,13 @@ test('表单仅展示', async ({ page }) => {
   const getItem = (index: number) => demo.locator('.tiny-form-item__content').nth(index)
 
   await switchBtn.click()
-  await expect(demo.locator('.tiny-form-item').first().locator('input')).toBeVisible()
+  await expect(getItem(10).locator('input')).toBeVisible()
 
   await switchBtn.click()
   await expect(demo.locator('.tiny-form-item').first().locator('input')).not.toBeVisible()
   await expect(getItem(1).locator('.tiny-radio__inner')).not.toBeVisible()
   await expect(getItem(1)).toHaveText('男')
-  await expect(getItem(2).locator('input')).not.toBeVisible()
-  await expect(getItem(2).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
-  await expect(getItem(3).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
+  await expect(getItem(4).locator('input')).not.toBeVisible()
+  await expect(getItem(4).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
+  await expect(getItem(5).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
 })
diff --git a/examples/sites/demos/pc/app/form/display-only.vue b/examples/sites/demos/pc/app/form/display-only.vue
index c97f87824..c4a83f922 100644
--- a/examples/sites/demos/pc/app/form/display-only.vue
+++ b/examples/sites/demos/pc/app/form/display-only.vue
@@ -2,13 +2,22 @@
   <div class="demo-form">
     <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
-      <tiny-form-item label="超长文字">
-        <tiny-input v-model="formData.input"></tiny-input>
+      <tiny-form-item label="开关">
+        <tiny-switch></tiny-switch>
       </tiny-form-item>
       <tiny-form-item label="radio">
         <tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
         <tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="复选框">
+        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
+      </tiny-form-item>
+      <tiny-form-item label="复选框组">
+        <tiny-checkbox-group v-model="formData.checkedArr">
+          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
+          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
+        </tiny-checkbox-group>
+      </tiny-form-item>
       <tiny-form-item label="select">
         <tiny-select v-model="formData.select">
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
@@ -19,27 +28,12 @@
           <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
         </tiny-select>
       </tiny-form-item>
-      <tiny-form-item label="文本域">
-        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
-      </tiny-form-item>
       <tiny-form-item label="我的密码">
         <tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字">
         <tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="复选框">
-        <tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
-      </tiny-form-item>
-      <tiny-form-item label="复选框组">
-        <tiny-checkbox-group v-model="formData.checkedArr">
-          <tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
-          <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
-        </tiny-checkbox-group>
-      </tiny-form-item>
-      <tiny-form-item label="开关">
-        <tiny-switch></tiny-switch>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -50,6 +44,12 @@
       <tiny-form-item label="datePicker">
         <tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
       </tiny-form-item>
+      <tiny-form-item label="超长文字">
+        <tiny-input v-model="formData.input"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="文本域">
+        <tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
+      </tiny-form-item>
     </tiny-form>
   </div>
 </template>
@@ -162,7 +162,7 @@ export default {
       },
       formData: {
         input:
-          '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
+          'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
         radioValue: '1',
         select: '选项1',
         select1: ['选项1', '选项2'],
@@ -180,7 +180,7 @@ export default {
         monthrange: ['2022-01', '2023-01'],
         quantity: 1,
         textareaValue:
-          '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
+          'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
         checked: true,
         checkedArr: ['复选框1'],
         rate1: 2,
@@ -219,7 +219,6 @@ export default {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 16px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue b/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
index 514a4b2bd..318e3bcb9 100644
--- a/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
@@ -2,21 +2,12 @@
   <div class="demo-form">
     <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
-      <tiny-form-item label="Input">
-        <tiny-input v-model="createData.user"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="Select">
-        <tiny-select v-model="createData.select" placeholder="请选择">
-          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-          </tiny-option>
-        </tiny-select>
-      </tiny-form-item>
-      <tiny-form-item label="Numeric">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="Switch">
         <tiny-switch v-model="createData.sw"></tiny-switch>
       </tiny-form-item>
+      <tiny-form-item label="Link">
+        <tiny-link>默认链接</tiny-link>
+      </tiny-form-item>
       <tiny-form-item label="Radio">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
           <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
         </tiny-checkbox-group>
       </tiny-form-item>
+      <tiny-form-item label="IpAddress">
+        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="ButtonGroup">
+        <tiny-button-group :data="groupData"></tiny-button-group>
+      </tiny-form-item>
+      <tiny-form-item label="Input">
+        <tiny-input v-model="createData.user"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="Select">
+        <tiny-select v-model="createData.select" placeholder="">
+          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+          </tiny-option>
+        </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="Datepicker">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -38,7 +47,6 @@
         <tiny-time-picker
           v-model="createData.timePicker"
           :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
-          placeholder="任意时间点"
         ></tiny-time-picker>
       </tiny-form-item>
       <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
       </tiny-form-item>
       <tiny-form-item label="Tooltip">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="Textarea">
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
       </tiny-form-item>
       <tiny-form-item label="Autocomplete">
-        <tiny-autocomplete
-          v-model="createData.autocomplete"
-          placeholder="请输入内容"
-          :fetch-suggestions="querySearch"
-        ></tiny-autocomplete>
-      </tiny-form-item>
-      <tiny-form-item label="ButtonGroup">
-        <tiny-button-group :data="groupData"></tiny-button-group>
+        <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
       </tiny-form-item>
       <tiny-form-item label="Cascader">
-        <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item label="IpAddress">
-        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
-      </tiny-form-item>
-      <tiny-form-item label="Link">
-        <tiny-link>默认链接</tiny-link>
+        <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
       </tiny-form-item>
       <tiny-form-item label="PopEditor">
         <tiny-popeditor
           v-model="createData.popEditor"
-          placeholder="请选择"
           :grid-op="gridOp"
           text-field="name"
           value-field="id"
@@ -100,7 +94,6 @@ import {
   TinyDropTimes,
   TinyTooltip,
   TinyInput,
-  TinyButton,
   TinyAutocomplete,
   TinyButtonGroup,
   TinyCascader,
@@ -172,7 +165,7 @@ const gridOp = ref({
     {
       field: 'id',
       title: 'ID',
-      width: 40
+      width: 60
     },
     {
       field: 'name',
@@ -268,7 +261,7 @@ function createFilter(queryString) {
 
 .title {
   margin-bottom: 30px;
-  margin-left: 100px;
+  margin-left: 80px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-disabled.spec.js b/examples/sites/demos/pc/app/form/form-disabled.spec.js
index eb056d83c..55491ce7d 100644
--- a/examples/sites/demos/pc/app/form/form-disabled.spec.js
+++ b/examples/sites/demos/pc/app/form/form-disabled.spec.js
@@ -18,22 +18,22 @@ test('测试表单禁用', async ({ page }) => {
   })
 
   await switchBtn.click()
-  await expect(formItem.first().locator('input')).toBeDisabled()
-  await expect(formItem.nth(1).locator('input')).toBeDisabled()
-  await expect(formItem.nth(2).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
-  await expect(formItem.nth(3).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
-  await expect(formItem.nth(4).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(5).locator('input').nth(1)).toBeDisabled()
-  await expect(formItem.nth(6).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(7).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(8).locator('input').first()).toBeDisabled()
-  await expect(formItem.nth(9).locator('input')).toBeDisabled()
-  await expect(formItem.nth(10).locator('input')).toBeDisabled()
-  await expect(formItem.nth(11).locator('textarea')).toBeDisabled()
+  await expect(formItem.nth(0).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
+  await expect(formItem.nth(2).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(3).locator('input').nth(1)).toBeDisabled()
+  await expect(formItem.nth(3).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(6).locator('button').first()).toHaveClass(/disabled/)
+  await expect(formItem.nth(7).locator('input')).toBeDisabled()
+  await expect(formItem.nth(8).locator('input')).toBeDisabled()
+  await expect(formItem.nth(9).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
+  await expect(formItem.nth(10).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(11).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(12).locator('input')).toBeDisabled()
-  await expect(formItem.nth(13).locator('button').first()).toHaveClass(/disabled/)
-  await expect(formItem.nth(14).locator('input')).toBeDisabled()
-  await expect(formItem.nth(15).locator('input').first()).toBeDisabled()
+  await expect(formItem.nth(13).locator('input')).toBeDisabled()
+  await expect(formItem.nth(14).locator('textarea')).toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).toBeDisabled()
+  await expect(formItem.nth(16).locator('input').first()).toBeDisabled()
   await expect(formItem.nth(17).locator('input').first()).toBeDisabled()
   // 尝试拖到滑块,应是无法拖动状态
   const { x, y, height } = await slider.boundingBox()
@@ -45,22 +45,22 @@ test('测试表单禁用', async ({ page }) => {
   expect(newX).toEqual(x)
 
   await switchBtn.click()
-  await expect(formItem.first().locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(1).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(2).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
-  await expect(formItem.nth(3).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
-  await expect(formItem.nth(4).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(5).locator('input').nth(1)).not.toBeDisabled()
-  await expect(formItem.nth(6).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(7).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(8).locator('input').first()).not.toBeDisabled()
-  await expect(formItem.nth(9).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(10).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(11).locator('textarea')).not.toBeDisabled()
+  await expect(formItem.nth(0).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
+  await expect(formItem.nth(2).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(3).locator('input').nth(1)).not.toBeDisabled()
+  await expect(formItem.nth(3).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(6).locator('button').first()).not.toHaveClass(/disabled/)
+  await expect(formItem.nth(7).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(8).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(9).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
+  await expect(formItem.nth(10).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(11).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(12).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(13).locator('button').first()).not.toHaveClass(/disabled/)
-  await expect(formItem.nth(14).locator('input')).not.toBeDisabled()
-  await expect(formItem.nth(15).locator('input').first()).not.toBeDisabled()
+  await expect(formItem.nth(13).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(14).locator('textarea')).not.toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(15).locator('input')).not.toBeDisabled()
+  await expect(formItem.nth(16).locator('input').first()).not.toBeDisabled()
   await expect(formItem.nth(17).locator('input').first()).not.toBeDisabled()
   // 尝试拖到滑块,应是可以拖动状态
   const sliderBox = await slider.boundingBox()
diff --git a/examples/sites/demos/pc/app/form/form-disabled.vue b/examples/sites/demos/pc/app/form/form-disabled.vue
index 9fe11f583..7b54483f5 100644
--- a/examples/sites/demos/pc/app/form/form-disabled.vue
+++ b/examples/sites/demos/pc/app/form/form-disabled.vue
@@ -2,21 +2,12 @@
   <div class="demo-form">
     <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
-      <tiny-form-item label="Input">
-        <tiny-input v-model="createData.user"></tiny-input>
-      </tiny-form-item>
-      <tiny-form-item label="Select">
-        <tiny-select v-model="createData.select" placeholder="请选择">
-          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-          </tiny-option>
-        </tiny-select>
-      </tiny-form-item>
-      <tiny-form-item label="Numeric">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="Switch">
         <tiny-switch v-model="createData.sw"></tiny-switch>
       </tiny-form-item>
+      <tiny-form-item label="Link">
+        <tiny-link>默认链接</tiny-link>
+      </tiny-form-item>
       <tiny-form-item label="Radio">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
@@ -31,6 +22,24 @@
           <tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
         </tiny-checkbox-group>
       </tiny-form-item>
+      <tiny-form-item label="IpAddress">
+        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
+      </tiny-form-item>
+      <tiny-form-item label="ButtonGroup">
+        <tiny-button-group :data="groupData"></tiny-button-group>
+      </tiny-form-item>
+      <tiny-form-item label="Input">
+        <tiny-input v-model="createData.user"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="Select">
+        <tiny-select v-model="createData.select" placeholder="">
+          <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+          </tiny-option>
+        </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="Numeric">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="Datepicker">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -38,7 +47,6 @@
         <tiny-time-picker
           v-model="createData.timePicker"
           :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }"
-          placeholder="任意时间点"
         ></tiny-time-picker>
       </tiny-form-item>
       <tiny-form-item label="Droptime">
@@ -46,35 +54,21 @@
       </tiny-form-item>
       <tiny-form-item label="Tooltip">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="Textarea">
         <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"> </tiny-input>
       </tiny-form-item>
       <tiny-form-item label="Autocomplete">
-        <tiny-autocomplete
-          v-model="createData.autocomplete"
-          placeholder="请输入内容"
-          :fetch-suggestions="querySearch"
-        ></tiny-autocomplete>
-      </tiny-form-item>
-      <tiny-form-item label="ButtonGroup">
-        <tiny-button-group :data="groupData"></tiny-button-group>
+        <tiny-autocomplete v-model="createData.autocomplete" :fetch-suggestions="querySearch"></tiny-autocomplete>
       </tiny-form-item>
       <tiny-form-item label="Cascader">
-        <tiny-cascader :options="options" :props="{ emitPath: false }"></tiny-cascader>
-      </tiny-form-item>
-      <tiny-form-item label="IpAddress">
-        <tiny-ip-address v-model="createData.ipAddress"></tiny-ip-address>
-      </tiny-form-item>
-      <tiny-form-item label="Link">
-        <tiny-link>默认链接</tiny-link>
+        <tiny-cascader :options="options" :props="{ emitPath: false }" placeholder=" "></tiny-cascader>
       </tiny-form-item>
       <tiny-form-item label="PopEditor">
         <tiny-popeditor
           v-model="createData.popEditor"
-          placeholder="请选择"
           :grid-op="gridOp"
           text-field="name"
           value-field="id"
@@ -99,7 +93,6 @@ import {
   TinyDropTimes,
   TinyTooltip,
   TinyInput,
-  TinyButton,
   TinyAutocomplete,
   TinyButtonGroup,
   TinyCascader,
@@ -125,7 +118,6 @@ export default {
     TinyDropTimes,
     TinyTooltip,
     TinyInput,
-    TinyButton,
     TinyAutocomplete,
     TinyButtonGroup,
     TinyCascader,
@@ -198,7 +190,7 @@ export default {
           {
             field: 'id',
             title: 'ID',
-            width: 40
+            width: 60
           },
           {
             field: 'name',
@@ -296,7 +288,7 @@ export default {
 }
 .title {
   margin-bottom: 30px;
-  margin-left: 100px;
+  margin-left: 80px;
   font-size: 14px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
index 7120e385c..9b6741231 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field-composition-api.vue
@@ -12,8 +12,8 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validate-field.vue b/examples/sites/demos/pc/app/form/form-validate-field.vue
index 375129fa4..8a4cc78d4 100644
--- a/examples/sites/demos/pc/app/form/form-validate-field.vue
+++ b/examples/sites/demos/pc/app/form/form-validate-field.vue
@@ -12,8 +12,8 @@
       </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
-        <tiny-button type="primary" @click="clearValidate"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetField"> 重置日期 </tiny-button>
+        <tiny-button @click="clearValidate"> 移除校验 </tiny-button>
+        <tiny-button @click="resetField"> 重置日期 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
index 5b8751233..3a4ce463e 100644
--- a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue
@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,18 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/form-validation.spec.ts b/examples/sites/demos/pc/app/form/form-validation.spec.ts
index 6b8a47db0..7ef637033 100644
--- a/examples/sites/demos/pc/app/form/form-validation.spec.ts
+++ b/examples/sites/demos/pc/app/form/form-validation.spec.ts
@@ -27,7 +27,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   const requiredTip = page.getByRole('tooltip', { name: '必填' })
 
   // 对长度有要求的检验
-  const firstInput = formItem.first().locator('input')
+  const firstInput = formItem.nth(2).locator('input')
   await firstInput.click()
   await firstInput.blur()
   await expect(requiredTip.first()).toBeVisible()
@@ -48,7 +48,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()
 
   // url输入框
-  const urlInput = formItem.nth(2).locator('input')
+  const urlInput = formItem.nth(4).locator('input')
   const validUrl = 'https://test.com'
   urlInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).toBeVisible()
@@ -56,7 +56,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).not.toBeVisible()
 
   // email输入框
-  const emailInput = formItem.nth(4).locator('input')
+  const emailInput = formItem.nth(5).locator('input')
   const validEmail = '111@test.com'
   emailInput.fill('1111')
   await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).toBeVisible()
diff --git a/examples/sites/demos/pc/app/form/form-validation.vue b/examples/sites/demos/pc/app/form/form-validation.vue
index 9c608045f..fb52830ff 100644
--- a/examples/sites/demos/pc/app/form/form-validation.vue
+++ b/examples/sites/demos/pc/app/form/form-validation.vue
@@ -4,6 +4,12 @@
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
+      <tiny-form-item label="等级" prop="radio">
+        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="IP字段" prop="ip">
+        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
+      </tiny-form-item>
       <tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
         <tiny-input v-model="createData.users"></tiny-input>
       </tiny-form-item>
@@ -13,24 +19,19 @@
       <tiny-form-item label="URL" prop="url">
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="等级" prop="radio">
-        <tiny-radio-group v-model="createData.radio" :options="options"></tiny-radio-group>
-      </tiny-form-item>
+
       <tiny-form-item label="邮件" prop="email">
         <tiny-input v-model="createData.email"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="数字" prop="num1">
         <tiny-numeric v-model="createData.num1"></tiny-numeric>
       </tiny-form-item>
-      <tiny-form-item label="IP字段" prop="ip">
-        <tiny-ip-address v-model="createData.ip"></tiny-ip-address>
-      </tiny-form-item>
       <tiny-form-item>
         <tiny-button type="primary" @click="validType === 'callback' ? handleSubmit() : handleSubmitPromise()">
           提交
         </tiny-button>
-        <tiny-button type="primary" @click="clearFormValid"> 移除校验 </tiny-button>
-        <tiny-button type="primary" @click="resetForm"> 重置表单 </tiny-button>
+        <tiny-button @click="clearFormValid"> 移除校验 </tiny-button>
+        <tiny-button @click="resetForm"> 重置表单 </tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/size-composition-api.vue b/examples/sites/demos/pc/app/form/size-composition-api.vue
index 1c8c4e7b0..c01ec8978 100644
--- a/examples/sites/demos/pc/app/form/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/size-composition-api.vue
@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/size.vue b/examples/sites/demos/pc/app/form/size.vue
index adc9691a9..26e24ee82 100644
--- a/examples/sites/demos/pc/app/form/size.vue
+++ b/examples/sites/demos/pc/app/form/size.vue
@@ -2,13 +2,13 @@
   <div class="demo-form">
     <div class="mb-12">表单尺寸： <tiny-button-group :data="sizeList" v-model="sizeValue"></tiny-button-group></div>
     <tiny-form ref="createData" label-width="100px" :size="sizeValue" label-position="right">
-      <tiny-form-item label="数字">
-        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
-      </tiny-form-item>
       <tiny-form-item label="单选">
         <tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
         <tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
       </tiny-form-item>
+      <tiny-form-item label="数字">
+        <tiny-numeric v-model="createData.quantity"></tiny-numeric>
+      </tiny-form-item>
       <tiny-form-item label="日期">
         <tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
       </tiny-form-item>
@@ -17,7 +17,7 @@
       </tiny-form-item>
       <tiny-form-item label="提示">
         <tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
-          <tiny-input v-model="createData.input" placeholder="click"></tiny-input>
+          <tiny-input v-model="createData.input"></tiny-input>
         </tiny-tooltip>
       </tiny-form-item>
       <tiny-form-item label="文本">
diff --git a/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue b/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
index 614ddd21c..b28bcd795 100644
--- a/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
+++ b/examples/sites/demos/pc/app/form/validate-debounce-composition-api.vue
@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/form/validate-debounce.vue b/examples/sites/demos/pc/app/form/validate-debounce.vue
index a65bdbc9c..dae8b8991 100644
--- a/examples/sites/demos/pc/app/form/validate-debounce.vue
+++ b/examples/sites/demos/pc/app/form/validate-debounce.vue
@@ -8,8 +8,8 @@
         <tiny-input v-model="createData.user2"></tiny-input>
       </tiny-form-item>
       <tiny-form-item>
-        <tiny-button type="success" @click="clearFormValid">移除表单校验</tiny-button>
         <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
+        <tiny-button @click="clearFormValid">移除表单校验</tiny-button>
       </tiny-form-item>
     </tiny-form>
   </div>
diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
index c1a1f06a0..5cfcc3455 100644
--- a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search-composition-api.vue
@@ -86,7 +86,7 @@ function getPopEditorOp() {
         {
           field: 'id',
           title: 'ID',
-          width: 40
+          width: 60
         },
         {
           field: 'name',
diff --git a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
index 49865c7af..ef4df3d82 100644
--- a/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
+++ b/examples/sites/demos/pc/app/grid/editor/popeditor-in-grid-remote-search.vue
@@ -89,7 +89,7 @@ export default {
             {
               field: 'id',
               title: 'ID',
-              width: 40
+              width: 60
             },
             {
               field: 'name',
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
index cdcbb38de..cbaad372e 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue
@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: red">没有更多数据了！</span>
+        <span style="color: #ff8800">没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
index 2d7bfc1a8..3db0b548c 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue
@@ -7,7 +7,7 @@
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
       <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
       <template #empty>
-        <span style="color: red">没有更多数据了！</span>
+        <span style="color: #ff8800">没有更多数据了！</span>
       </template>
     </tiny-grid>
     <br />
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
index f5fb11040..da91ea18e 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
@@ -5,7 +5,6 @@
       ref="gridRef"
       :select-config="selectConfig"
       highlight-current-row
-      border
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     >
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js b/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
index e1319cba7..fa838945b 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-editor.js
@@ -10,7 +10,7 @@ export default {
         <p>通过在 <code>grid</code> 标签上配置 <code>edit-config</code>。在 <code>grid-column</code> 列配置 <code>editor</code> 对象， <code>component</code> 渲染内置编辑组件， <code>events</code> 配置组件事件。</p>
         <div class="tip custom-block">
           <p class="custom-block-title">特别说明：</p>
-          <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件，需要使用其他组件可参考自定义编辑器。</p>
+          <p>内置编辑器只支持 <code>Input</code> 和 <code>Select</code> 组件且均为浏览器原生组件并非TinyVue组件，需要使用其他组件可参考自定义编辑器。</p>
         </div>
         `,
         'en-US':
@@ -44,7 +44,7 @@ export default {
     {
       'demoId': 'editor-popeditor-in-grid-remote-search',
       'name': {
-        'zh-CN': 'Popeditor 弹窗编辑',
+        'zh-CN': '弹窗编辑',
         'en-US': 'Edit the Popeditor pop-up window and configure remote search.'
       },
       'desc': {
diff --git a/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
index 1ddf9ae38..03354d6fc 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
@@ -1,5 +1,12 @@
 <template>
-  <tiny-hrapprover v-model="value" :approval-person="person" @update:approvalPerson="person = $event"></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      title="选择权签人"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -9,3 +16,9 @@ import { TinyHrapprover } from '@opentiny/vue'
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
index b2f175ba2..d8cc511d4 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
@@ -1,5 +1,12 @@
 <template>
-  <tiny-hrapprover v-model="value" :approval-person="person" @update:approvalPerson="person = $event"></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      title="选择权签人"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -17,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
index eee307097..0d6cc89d3 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type-composition-api.vue
@@ -1,10 +1,13 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    category="0506"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      title="选择权签人"
+      category="0506"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -14,3 +17,9 @@ import { TinyHrapprover } from '@opentiny/vue'
 const value = ref('022471')
 const person = ref('wangxiaofeng 00193664')
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/category-type.vue b/examples/sites/demos/pc/app/hrapprover/category-type.vue
index 519d8f551..5e40728fe 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type.vue
@@ -1,10 +1,13 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    category="0506"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      title="选择权签人"
+      @update:approvalPerson="person = $event"
+      category="0506"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -22,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
index 95b1038b6..15fc2e7ff 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service-composition-api.vue
@@ -1,11 +1,14 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    :fetch-hrapprover="getFetchHrapprover"
-    :category="category"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      :fetch-hrapprover="getFetchHrapprover"
+      :category="category"
+      title="选择权签人"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +42,9 @@ function getFetchHrapprover() {
   ])
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/custom-service.vue b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
index 7fee9fc01..40554bc57 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
@@ -1,11 +1,14 @@
 <template>
-  <tiny-hrapprover
-    v-model="value"
-    :approval-person="person"
-    @update:approvalPerson="person = $event"
-    :fetch-hrapprover="getFetchHrapprover"
-    :category="category"
-  ></tiny-hrapprover>
+  <div class="demo-hrapprover-class">
+    <tiny-hrapprover
+      v-model="value"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+      :fetch-hrapprover="getFetchHrapprover"
+      :category="category"
+      title="选择权签人"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +51,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
index c8d417a78..e517fa29b 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="demo-hrapprover-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <tiny-hrapprover
       :value="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       :disabled="disabled"
     ></tiny-hrapprover>
@@ -22,3 +23,9 @@ function Switchover() {
   disabled.value = !disabled.value
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/hrapprover/disabled.vue b/examples/sites/demos/pc/app/hrapprover/disabled.vue
index 571ab7b71..c87aa99ad 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="demo-hrapprover-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <tiny-hrapprover
       :value="value"
       :approval-person="person"
+      title="选择权签人"
       @update:approvalPerson="person = $event"
       :disabled="disabled"
     ></tiny-hrapprover>
@@ -32,3 +33,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-hrapprover-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue b/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
index 63aadc125..ac58c4c83 100644
--- a/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/locales/custom-service-composition-api.vue
@@ -11,15 +11,15 @@ import { TinyLocales } from '@opentiny/vue'
 
 function getLocale() {
   // resolve 出来的必须是国际化的 key
-  return Promise.resolve(['zhCN', 'enUS', 'zhTW'])
+  return Promise.resolve(['zh_CN', 'en_US', 'zh_TW'])
 }
 
 function getCurrentLocale() {
-  return Promise.resolve(['zhCN'])
+  return Promise.resolve(['zh_CN'])
 }
 
 function getChangeLocaleUrl(targetLocale) {
-  if (targetLocale === 'enUS') {
+  if (targetLocale === 'en_US') {
     return Promise.resolve(`${window.location.origin}/#/webenglish/en-US/component/locales/custom-service`)
   } else {
     return Promise.resolve(`${window.location.origin}/#/zh-CN/component/custom-service`)
diff --git a/examples/sites/demos/pc/app/locales/custom-service.spec.ts b/examples/sites/demos/pc/app/locales/custom-service.spec.ts
index 538540681..15c760d3d 100644
--- a/examples/sites/demos/pc/app/locales/custom-service.spec.ts
+++ b/examples/sites/demos/pc/app/locales/custom-service.spec.ts
@@ -8,7 +8,7 @@ test('locales-custom-service', async ({ page }) => {
   const reference = demo.locator('.reference-wrapper')
   const popper = page.locator('.tiny-locales__popper')
 
-  await expect(reference).toHaveText('zhCN')
+  await expect(reference).toHaveText('zh_CN')
   await expect(popper).toBeHidden()
   await reference.hover()
   await page.waitForTimeout(200)
diff --git a/examples/sites/demos/pc/app/locales/custom-service.vue b/examples/sites/demos/pc/app/locales/custom-service.vue
index 7a90b309a..7e0853d3b 100644
--- a/examples/sites/demos/pc/app/locales/custom-service.vue
+++ b/examples/sites/demos/pc/app/locales/custom-service.vue
@@ -16,13 +16,13 @@ export default {
   methods: {
     getLocale() {
       // resolve 出来的必须是国际化的 key
-      return Promise.resolve(['zhCN', 'enUS', 'zhTW'])
+      return Promise.resolve(['zh_CN', 'en_US', 'zh_TW'])
     },
     getCurrentLocale() {
-      return Promise.resolve(['zhCN'])
+      return Promise.resolve(['zh_CN'])
     },
     getChangeLocaleUrl(targetLocale) {
-      if (targetLocale === 'enUS') {
+      if (targetLocale === 'en_US') {
         return Promise.resolve(`${window.location.origin}/#/webenglish/en-US/component/locales/custom-service`)
       } else {
         return Promise.resolve(`${window.location.origin}/#/zh-CN/component/custom-service`)
diff --git a/examples/sites/demos/pc/app/select/size-composition-api.vue b/examples/sites/demos/pc/app/select/size-composition-api.vue
index 1e684d815..7192ccf68 100644
--- a/examples/sites/demos/pc/app/select/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/size-composition-api.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <p>默认</p>
-    <br />
-    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
-    <br />
-    <br />
     <p>medium</p>
     <br />
     <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
     <br />
     <br />
+    <p>默认</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>small</p>
     <br />
     <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
diff --git a/examples/sites/demos/pc/app/select/size.spec.ts b/examples/sites/demos/pc/app/select/size.spec.ts
index 183f48a40..54022497a 100644
--- a/examples/sites/demos/pc/app/select/size.spec.ts
+++ b/examples/sites/demos/pc/app/select/size.spec.ts
@@ -5,7 +5,7 @@ test('默认尺寸', async ({ page }) => {
   await page.goto('select#size')
 
   const wrap = page.locator('#size')
-  const select = wrap.locator('.tiny-select').nth(0)
+  const select = wrap.locator('.tiny-select').nth(1)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
@@ -18,12 +18,12 @@ test('medium 尺寸', async ({ page }) => {
   await page.goto('select#size')
 
   const wrap = page.locator('#size')
-  const select = wrap.locator('.tiny-select').nth(1)
+  const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
   await expect(input).toHaveClass(/tiny-input-medium/)
-  // TODO: 此处继承input 尺寸的话，应该是32
+
   await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '40px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--medium tiny-tag--light/)
 })
diff --git a/examples/sites/demos/pc/app/select/size.vue b/examples/sites/demos/pc/app/select/size.vue
index ebd67f8ef..9c2b742d5 100644
--- a/examples/sites/demos/pc/app/select/size.vue
+++ b/examples/sites/demos/pc/app/select/size.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <p>默认</p>
-    <br />
-    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
-    <br />
-    <br />
     <p>medium</p>
     <br />
     <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
     <br />
     <br />
+    <p>默认</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
     <p>small</p>
     <br />
     <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
diff --git a/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue b/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
index 0fb43a9ad..fd2e75c41 100644
--- a/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/allow-copy.vue b/examples/sites/demos/pc/app/user/allow-copy.vue
index d98e6fdb6..48c13925d 100644
--- a/examples/sites/demos/pc/app/user/allow-copy.vue
+++ b/examples/sites/demos/pc/app/user/allow-copy.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" auto-close allow-copy></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
index 5f0daa308..b28d5d540 100644
--- a/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/basic-usage-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user"></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/basic-usage.vue b/examples/sites/demos/pc/app/user/basic-usage.vue
index 336a058a5..a1889135d 100644
--- a/examples/sites/demos/pc/app/user/basic-usage.vue
+++ b/examples/sites/demos/pc/app/user/basic-usage.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/batch-composition-api.vue b/examples/sites/demos/pc/app/user/batch-composition-api.vue
index d5bf50ef2..e0f49b7a8 100644
--- a/examples/sites/demos/pc/app/user/batch-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/batch-composition-api.vue
@@ -1,22 +1,24 @@
 <template>
-  <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
-  <br />
-  <tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
-  <br />
+  <div class="demo-user-class">
+    <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user3" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user4" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user5" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user6" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user7" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user8" :batch="true" :cache="false"></tiny-user>
+    <br />
+    <tiny-user v-model="user9" :batch="true" :cache="false"></tiny-user>
+    <br />
+  </div>
 </template>
 
 <script setup>
@@ -33,3 +35,9 @@ const user7 = ref('421000103624007')
 const user8 = ref('421000103624008')
 const user9 = ref('421000103624009')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/batch.vue b/examples/sites/demos/pc/app/user/batch.vue
index fb5571c07..76ee2d437 100644
--- a/examples/sites/demos/pc/app/user/batch.vue
+++ b/examples/sites/demos/pc/app/user/batch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user1" :batch="true" :cache="false"></tiny-user>
     <br />
     <tiny-user v-model="user2" :batch="true" :cache="false"></tiny-user>
@@ -42,3 +42,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/cache-users-composition-api.vue b/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
index 58914a6bf..068924272 100644
--- a/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/cache-users-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>无缓存</p>
     <tiny-user v-model="user1" multiple :cache="false" value-field="userAccount"></tiny-user>
     <p>有缓存</p>
@@ -22,6 +22,9 @@ const user2 = ref('test1,test10')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/cache-users.vue b/examples/sites/demos/pc/app/user/cache-users.vue
index f43f1dee7..4004ced90 100644
--- a/examples/sites/demos/pc/app/user/cache-users.vue
+++ b/examples/sites/demos/pc/app/user/cache-users.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>无缓存</p>
     <tiny-user v-model="user1" multiple :cache="false" value-field="userAccount"></tiny-user>
     <p>有缓存</p>
@@ -30,6 +30,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
index 82c88fd42..a80e429be 100644
--- a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-user
-    v-model="user"
-    :collapse-show-overflow-tooltip="true"
-    multiple
-    cache-key="test-user"
-    :cache-fields="['email']"
-    value-field="userAccount"
-  ></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user
+      v-model="user"
+      :collapse-show-overflow-tooltip="true"
+      multiple
+      cache-key="test-user"
+      :cache-fields="['email']"
+      value-field="userAccount"
+    ></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -15,3 +17,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
index b26189c8d..71f3f617d 100644
--- a/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
+++ b/examples/sites/demos/pc/app/user/collapse-show-overflow-tooltip.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-user
-    v-model="user"
-    :collapse-show-overflow-tooltip="true"
-    multiple
-    cache-key="test-user"
-    :cache-fields="['email']"
-    value-field="userAccount"
-  ></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user
+      v-model="user"
+      :collapse-show-overflow-tooltip="true"
+      multiple
+      cache-key="test-user"
+      :cache-fields="['email']"
+      value-field="userAccount"
+    ></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -23,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue b/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue
index 2e4e7b99d..6698085f2 100644
--- a/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue	
+++ b/examples/sites/demos/pc/app/user/collapse-tags -composition-api.vue	
@@ -1,13 +1,15 @@
 <template>
-  <tiny-user
-    v-model="user"
-    :collapse-tags="true"
-    :collapse-show-overflow-tooltip="true"
-    multiple
-    cache-key="test-user"
-    :cache-fields="['email']"
-    value-field="userAccount"
-  ></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user
+      v-model="user"
+      :collapse-tags="true"
+      :collapse-show-overflow-tooltip="true"
+      multiple
+      cache-key="test-user"
+      :cache-fields="['email']"
+      value-field="userAccount"
+    ></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -16,3 +18,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/collapse-tags .vue b/examples/sites/demos/pc/app/user/collapse-tags .vue
index cc0229adb..429656f02 100644
--- a/examples/sites/demos/pc/app/user/collapse-tags .vue	
+++ b/examples/sites/demos/pc/app/user/collapse-tags .vue	
@@ -1,13 +1,15 @@
 <template>
-  <tiny-user
-    v-model="user"
-    :collapse-tags="true"
-    :collapse-show-overflow-tooltip="true"
-    multiple
-    cache-key="test-user"
-    :cache-fields="['email']"
-    value-field="userAccount"
-  ></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user
+      v-model="user"
+      :collapse-tags="true"
+      :collapse-show-overflow-tooltip="true"
+      multiple
+      cache-key="test-user"
+      :cache-fields="['email']"
+      value-field="userAccount"
+    ></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue b/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
index 15d265f6f..9a986cc57 100644
--- a/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-placeholder-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" placeholder="请输入工号"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" placeholder="请输入工号"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-placeholder.vue b/examples/sites/demos/pc/app/user/custom-placeholder.vue
index f4d486816..353da0fd5 100644
--- a/examples/sites/demos/pc/app/user/custom-placeholder.vue
+++ b/examples/sites/demos/pc/app/user/custom-placeholder.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" placeholder="请输入工号"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" placeholder="请输入工号"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-service-composition-api.vue b/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
index e9ace8d12..2f3b2974f 100644
--- a/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-service-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p class="user-value">
       {{ user }}
     </p>
@@ -152,6 +152,9 @@ function fetchW3Accounts(userId) {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 .user-value {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/custom-service.vue b/examples/sites/demos/pc/app/user/custom-service.vue
index d17cd1557..e1a99f5e2 100644
--- a/examples/sites/demos/pc/app/user/custom-service.vue
+++ b/examples/sites/demos/pc/app/user/custom-service.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p class="user-value">
       {{ user }}
     </p>
@@ -160,6 +160,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 .user-value {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue b/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
index 6fc8a4806..3278b94a4 100644
--- a/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/custom-sort-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :sortable="Sortable" multiple></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :sortable="Sortable" multiple></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -9,3 +11,9 @@ import Sortable from 'sortablejs'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/custom-sort.vue b/examples/sites/demos/pc/app/user/custom-sort.vue
index 4d04bc136..ddcf638d6 100644
--- a/examples/sites/demos/pc/app/user/custom-sort.vue
+++ b/examples/sites/demos/pc/app/user/custom-sort.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p class="user-value">
       {{ user }}
     </p>
@@ -183,6 +183,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/delay-load-composition-api.vue b/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
index bfff1be05..0f66501f6 100644
--- a/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/delay-load-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :delay="2000"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :delay="2000"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/delay-load.vue b/examples/sites/demos/pc/app/user/delay-load.vue
index 1d5ea345a..3a02d236f 100644
--- a/examples/sites/demos/pc/app/user/delay-load.vue
+++ b/examples/sites/demos/pc/app/user/delay-load.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :delay="2000"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :delay="2000"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/display-only-composition-api.vue b/examples/sites/demos/pc/app/user/display-only-composition-api.vue
index 8883e3312..b01afcb05 100644
--- a/examples/sites/demos/pc/app/user/display-only-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/display-only-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/display-only.vue b/examples/sites/demos/pc/app/user/display-only.vue
index d9e98d403..5d2ed3d24 100644
--- a/examples/sites/demos/pc/app/user/display-only.vue
+++ b/examples/sites/demos/pc/app/user/display-only.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" display-only auto-close allow-copy></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue b/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
index 5b3082ad7..9c980fffb 100644
--- a/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/dynamic-disable-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" disabled></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" disabled></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/dynamic-disable.vue b/examples/sites/demos/pc/app/user/dynamic-disable.vue
index 79f8a8962..b536c60f2 100644
--- a/examples/sites/demos/pc/app/user/dynamic-disable.vue
+++ b/examples/sites/demos/pc/app/user/dynamic-disable.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" disabled></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" disabled></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/event-change-composition-api.vue b/examples/sites/demos/pc/app/user/event-change-composition-api.vue
index 89f817cfb..32ce256cd 100644
--- a/examples/sites/demos/pc/app/user/event-change-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/event-change-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -24,3 +26,9 @@ const handleBlur = () => {
   })
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/event-change.vue b/examples/sites/demos/pc/app/user/event-change.vue
index 7bd601cc8..a2eccdadc 100644
--- a/examples/sites/demos/pc/app/user/event-change.vue
+++ b/examples/sites/demos/pc/app/user/event-change.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple @change="change" @focus="handleFocus" @blur="handleBlur"></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -31,3 +33,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/event-error-composition-api.vue b/examples/sites/demos/pc/app/user/event-error-composition-api.vue
index b18e0666a..c6587a99a 100644
--- a/examples/sites/demos/pc/app/user/event-error-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/event-error-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple @error="queryError"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple @error="queryError"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -15,3 +17,9 @@ function queryError(error) {
   })
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/event-error.vue b/examples/sites/demos/pc/app/user/event-error.vue
index 1fd9fb9db..2e9a5c68a 100644
--- a/examples/sites/demos/pc/app/user/event-error.vue
+++ b/examples/sites/demos/pc/app/user/event-error.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple @error="queryError"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple @error="queryError"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue b/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
index 7db1f0165..853ef79b3 100644
--- a/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/hidden-tips-disable-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple disabled :show-tips="false"></tiny-user>
     <br />
     {{ user }}
@@ -12,3 +12,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088,421000103624002,421000103624003')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hidden-tips-disable.vue b/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
index 30ea8612f..1aa8d9b5d 100644
--- a/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
+++ b/examples/sites/demos/pc/app/user/hidden-tips-disable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple disabled :show-tips="false"></tiny-user>
     <br />
     {{ user }}
@@ -20,3 +20,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue b/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
index 22234993d..7276a91e2 100644
--- a/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
+++ b/examples/sites/demos/pc/app/user/hide-selected-composition-spi.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple hide-selected></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple hide-selected></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/hide-selected.vue b/examples/sites/demos/pc/app/user/hide-selected.vue
index 1c2316ef0..1ae5e23a8 100644
--- a/examples/sites/demos/pc/app/user/hide-selected.vue
+++ b/examples/sites/demos/pc/app/user/hide-selected.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple hide-selected></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple hide-selected></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue b/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
index 048eb5b22..d943e6ecb 100644
--- a/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/load-after-input-the-length-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :suggest-length="6"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :suggest-length="6"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/load-after-input-the-length.vue b/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
index e1082fa25..a90ee31a9 100644
--- a/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
+++ b/examples/sites/demos/pc/app/user/load-after-input-the-length.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" :suggest-length="6"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" :suggest-length="6"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
index 23cf50e59..4feb0bf69 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
index 4bd20d0f7..d3a2ce6e5 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-hover-expand-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" style="width: 400px" multiple hover-expand></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple hover-expand></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue b/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
index 4bd20d0f7..d3a2ce6e5 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-hover-expand.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" style="width: 400px" multiple hover-expand></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple hover-expand></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue b/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
index 6afe3e1b6..330d2364f 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-tag-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple collapse-tags></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple collapse-tags></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users-tag.vue b/examples/sites/demos/pc/app/user/multiple-users-tag.vue
index 5ee19ebdd..f82194807 100644
--- a/examples/sites/demos/pc/app/user/multiple-users-tag.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users-tag.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple collapse-tags></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple collapse-tags></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/multiple-users.vue b/examples/sites/demos/pc/app/user/multiple-users.vue
index f09ebde07..1b7b8ac5e 100644
--- a/examples/sites/demos/pc/app/user/multiple-users.vue
+++ b/examples/sites/demos/pc/app/user/multiple-users.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue b/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
index d5e307c34..7774df4d8 100644
--- a/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/nodata-text-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  </div>
 </template>
 
 <script setup>
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/nodata-text.vue b/examples/sites/demos/pc/app/user/nodata-text.vue
index 19c901b40..03bf8d920 100644
--- a/examples/sites/demos/pc/app/user/nodata-text.vue
+++ b/examples/sites/demos/pc/app/user/nodata-text.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" no-data-text="查无此人"></tiny-user>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue b/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
index a40302d00..efeca56df 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-all-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" copyable></tiny-user>
   </div>
 </template>
@@ -10,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/tag-copy-all.vue b/examples/sites/demos/pc/app/user/tag-copy-all.vue
index 0c7b4fde6..43389b36a 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-all.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-all.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" copyable></tiny-user>
   </div>
 </template>
@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue b/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
index e2ffb500c..f63f28a91 100644
--- a/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" tag-selectable></tiny-user>
   </div>
 </template>
@@ -10,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('test1,test2,test3')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/tag-copy.vue b/examples/sites/demos/pc/app/user/tag-copy.vue
index 2f20fc8b8..316229f9e 100644
--- a/examples/sites/demos/pc/app/user/tag-copy.vue
+++ b/examples/sites/demos/pc/app/user/tag-copy.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount" tag-selectable></tiny-user>
   </div>
 </template>
@@ -18,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/text-field-composition-api.vue b/examples/sites/demos/pc/app/user/text-field-composition-api.vue
index 4b553e6b5..fa87f2b99 100644
--- a/examples/sites/demos/pc/app/user/text-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/text-field-composition-api.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('441047913162396,702973890055088,421000103624183')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/text-field.vue b/examples/sites/demos/pc/app/user/text-field.vue
index 49484ca30..9d316a2ba 100644
--- a/examples/sites/demos/pc/app/user/text-field.vue
+++ b/examples/sites/demos/pc/app/user/text-field.vue
@@ -1,5 +1,7 @@
 <template>
-  <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user" multiple text-field="userCN"></tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/user-options-composition-api.vue b/examples/sites/demos/pc/app/user/user-options-composition-api.vue
index ae136a08d..9dda9819c 100644
--- a/examples/sites/demos/pc/app/user/user-options-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/user-options-composition-api.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-user v-model="user">
-    <template #options="slotScope">
-      <div>
-        <span>{{ slotScope.slotScope.employeeNumber }}</span
-        >-<span>{{ slotScope.slotScope.email }}</span>
-      </div>
-    </template>
-  </tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user">
+      <template #options="slotScope">
+        <div>
+          <span>{{ slotScope.slotScope.employeeNumber }}</span
+          >-<span>{{ slotScope.slotScope.email }}</span>
+        </div>
+      </template>
+    </tiny-user>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -15,3 +17,9 @@ import { TinyUser } from '@opentiny/vue'
 
 const user = ref('702973890055088')
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/user-options.vue b/examples/sites/demos/pc/app/user/user-options.vue
index b41a91226..ffdefa116 100644
--- a/examples/sites/demos/pc/app/user/user-options.vue
+++ b/examples/sites/demos/pc/app/user/user-options.vue
@@ -1,12 +1,14 @@
 <template>
-  <tiny-user v-model="user">
-    <template #options="slotScope">
-      <div>
-        <span>{{ slotScope.slotScope.employeeNumber }}</span
-        >-<span>{{ slotScope.slotScope.email }}</span>
-      </div>
-    </template>
-  </tiny-user>
+  <div class="demo-user-class">
+    <tiny-user v-model="user">
+      <template #options="slotScope">
+        <div>
+          <span>{{ slotScope.slotScope.employeeNumber }}</span
+          >-<span>{{ slotScope.slotScope.email }}</span>
+        </div>
+      </template>
+    </tiny-user>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -23,3 +25,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-user-class {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue b/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
index f1e456112..6f21ad44a 100644
--- a/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/user-select-size-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>尺寸：medium</p>
     <tiny-user v-model="user" size="medium"></tiny-user>
     <p>尺寸：small</p>
@@ -17,6 +17,9 @@ const user = ref('421000103624183')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/user-select-size.vue b/examples/sites/demos/pc/app/user/user-select-size.vue
index e385125d6..40d4fe4d2 100644
--- a/examples/sites/demos/pc/app/user/user-select-size.vue
+++ b/examples/sites/demos/pc/app/user/user-select-size.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <p>尺寸：medium</p>
     <tiny-user v-model="user" size="medium"></tiny-user>
     <p>尺寸：small</p>
@@ -25,6 +25,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/value-field-composition-api.vue b/examples/sites/demos/pc/app/user/value-field-composition-api.vue
index 301995aca..1ae363900 100644
--- a/examples/sites/demos/pc/app/user/value-field-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/value-field-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -13,6 +13,9 @@ const user = ref('test1,test2,test3')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/value-field.vue b/examples/sites/demos/pc/app/user/value-field.vue
index 160850e32..6058e8503 100644
--- a/examples/sites/demos/pc/app/user/value-field.vue
+++ b/examples/sites/demos/pc/app/user/value-field.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -21,6 +21,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/value-split-composition-api.vue b/examples/sites/demos/pc/app/user/value-split-composition-api.vue
index fcd904417..5543046a5 100644
--- a/examples/sites/demos/pc/app/user/value-split-composition-api.vue
+++ b/examples/sites/demos/pc/app/user/value-split-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-split=";" text-split="," value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -13,6 +13,9 @@ const user = ref('test1,test2,test3')
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/user/value-split.vue b/examples/sites/demos/pc/app/user/value-split.vue
index c29804946..ad0004f14 100644
--- a/examples/sites/demos/pc/app/user/value-split.vue
+++ b/examples/sites/demos/pc/app/user/value-split.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-user-class">
     <tiny-user v-model="user" multiple value-split=";" text-split="," value-field="userAccount"></tiny-user>
     <p>value 值：{{ user }}</p>
   </div>
@@ -21,6 +21,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-user-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;
diff --git a/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
index 02104dd80..7d6acc7f2 100644
--- a/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/virtual-tree/basic-usage-composition-api.vue
@@ -6,7 +6,7 @@
       width="600"
       height="400"
       row-height="36"
-      scrollbar-size="6"
+      scrollbar-size="8"
       :tree-op="treeOp"
     ></tiny-virtual-tree>
   </div>
diff --git a/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue b/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
index 26906e6d8..2ee77e935 100644
--- a/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
+++ b/examples/sites/demos/pc/app/virtual-tree/basic-usage.vue
@@ -6,7 +6,7 @@
       width="600"
       height="400"
       row-height="36"
-      scrollbar-size="6"
+      scrollbar-size="8"
       :tree-op="treeOp"
     ></tiny-virtual-tree>
   </div>
diff --git a/examples/sites/package.json b/examples/sites/package.json
index 38c5b0f6e..7909155a7 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.19.3",
+  "version": "3.19.7",
   "license": "MIT",
   "scripts": {
     "start": "vite",
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index acf9edd8f..22f30ec9d 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -1,23 +1,18 @@
-<script setup>
+<script setup lang="jsx">
 import { onMounted, reactive, nextTick } from 'vue'
 import { Repl, useStore, File } from '@opentiny/vue-repl'
 import '@opentiny/vue-repl/dist/style.css'
 
 import Editor from '@vue/repl/codemirror-editor'
-import {
-  ButtonGroup as TinyButtonGroup,
-  Select as TinySelect,
-  Option as TinyOption,
-  Switch as TinySwitch,
-  Notify
-} from '@opentiny/vue'
+import { TinyButtonGroup, TinyButton, TinySelect, TinyOption, TinySwitch, Notify } from '@opentiny/vue'
 import { staticDemoPath, getWebdocPath } from '@/views/components/cmp-config'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
-const VERSION = 'tiny-vue-version-3.16'
+const VERSION = 'tiny-vue-version-3.19'
+const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -28,40 +23,57 @@ const isMobileFirst = tinyMode === 'mobile-first'
 const isSaas = tinyTheme === 'saas'
 const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览
 
-const versions = ['3.19', '3.18', '3.17', '3.16', '3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
-const latestVersion = isPreview ? versions[0] : localStorage.getItem(VERSION) || versions[0]
+const versions = ['3.19', '3.18', '3.17']
+const getVersion = () => {
+  if (isPreview) {
+    return versions[0]
+  }
+  if (versions.includes(localStorage.getItem(VERSION))) {
+    localStorage.getItem(VERSION)
+  }
+  return versions[0]
+}
+const latestVersion = getVersion()
 const cdnHost = localStorage.getItem('setting-cdn')
 
 const versionDelimiter = cdnHost.includes('npmmirror') ? '/' : '@'
 const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''
 
-const isOldVersion = (version) => {
-  const minorVersion = version?.split('.')?.[1]
-  return minorVersion && minorVersion < 16
+let notify
+const showNotify = () => {
+  if (localStorage.getItem(NOTIFY_KEY) !== 'true' && !notify) {
+    const muteNotify = () => {
+      notify.close()
+      localStorage.setItem(NOTIFY_KEY, true)
+    }
+    notify = Notify({
+      type: 'info',
+      title: '温馨提示：',
+      message: () => (
+        <div>
+          <div>演练场仅保留最新的三个版本可选。</div>
+          <div style="text-align: right;margin-top: 12px;">
+            <TinyButton onClick={muteNotify} type={'primary'}>
+              不再提示
+            </TinyButton>
+          </div>
+        </div>
+      ),
+      duration: -1,
+      position: 'top-right',
+      verticalOffset: 200
+    })
+  }
 }
 
-// 3.16.0版本之前的runtime还没有抽离单独的包
-const getRuntime = (version) => {
-  if (isOldVersion(version)) {
-    return `${cdnHost}/@opentiny/vue${versionDelimiter}${version}/${fileDelimiter}runtime/`
-  }
-  return `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
-}
-
-// 3.16.0版本之前的runtime没有tiny-vue-pc.mjs文件
-const getPcRuntime = (version) => {
-  if (isOldVersion(version)) {
-    return `${getRuntime(version)}tiny-vue.mjs`
-  }
-  return `${getRuntime(version)}tiny-vue-pc.mjs`
-}
+const getRuntime = (version) => `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
 
 const createImportMap = (version) => {
   const imports = {
     'vue': `${cdnHost}/vue${versionDelimiter}3.4.27/${fileDelimiter}dist/vue.runtime.esm-browser.js`,
     'echarts': `${cdnHost}/echarts${versionDelimiter}5.4.1/${fileDelimiter}dist/echarts.esm.js`,
     '@vue/compiler-sfc': `${cdnHost}/@vue/compiler-sfc${versionDelimiter}3.4.27/${fileDelimiter}dist/compiler-sfc.esm-browser.js`,
-    '@opentiny/vue': getPcRuntime(version),
+    '@opentiny/vue': `${getRuntime(version)}tiny-vue-pc.mjs`,
     '@opentiny/vue-icon': `${getRuntime(version)}tiny-vue-icon.mjs`,
     '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
     '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
@@ -276,9 +288,9 @@ function share() {
 
 <template>
   <div class="header">
-    <div class="title"><img class="logo" :src="logoUrl" /> <span>OpenTiny Vue 演练场</span></div>
+    <div class="title"><img class="logo" :src="logoUrl" /> <span class="mobile-hide">OpenTiny Vue 演练场</span></div>
     <div>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局方向:
         <tiny-button-group
           :data="state.layoutOptions"
@@ -286,13 +298,19 @@ function share() {
           @change="changeLayout"
         ></tiny-button-group>
       </span>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局反转:
         <tiny-switch v-model="state.layoutReverse" mini @change="changeReserve"></tiny-switch>
       </span>
       <span class="ml20">
-        OpenTiny Vue 版本:
-        <tiny-select v-model="state.selectVersion" @change="selectVersion" style="width: 150px" :disabled="isPreview">
+        <span class="mobile-hide">OpenTiny Vue 版本: </span>
+        <tiny-select
+          v-model="state.selectVersion"
+          style="width: 150px"
+          :disabled="isPreview"
+          @change="selectVersion"
+          @click="showNotify"
+        >
           <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
           </tiny-option>
         </tiny-select>
@@ -318,6 +336,12 @@ function share() {
   box-sizing: border-box;
 }
 
+/** 小屏幕时隐藏 */
+@media screen and (max-width: 640px) {
+  .mobile-hide {
+    display: none;
+  }
+}
 #header {
   display: none;
 }
diff --git a/examples/sites/public/static/css/design-common.css b/examples/sites/public/static/css/design-common.css
index a3fb6c60c..fd7e1e023 100644
--- a/examples/sites/public/static/css/design-common.css
+++ b/examples/sites/public/static/css/design-common.css
@@ -553,3 +553,268 @@
     height: 3.33333333vw;
   }
 }
+
+.tinyui-design-footer {
+  font-size: 16px;
+  color: #2c2e30;
+  background-color: #fafafa;
+  overflow: hidden;
+}
+.tinyui-design-footer .footer-content {
+  display: flex;
+  margin: 0 auto;
+  padding: 10vh 0 6.8vh;
+  justify-content: center;
+  width: 70%;
+  box-sizing: border-box;
+}
+.tinyui-design-footer .footer-content .contact {
+  width: fit-content;
+}
+.tinyui-design-footer .footer-content .contact .group-code {
+  margin: 30px 0;
+}
+.tinyui-design-footer .footer-content .contact .group-code > img {
+  width: 150px;
+  border: solid 0.55vw #f2f6f9;
+}
+.tinyui-design-footer .footer-content .links {
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  justify-content: space-between;
+  flex: 1 1 auto;
+}
+.tinyui-design-footer .footer-content .links .link-item .list-item {
+  width: 100%;
+  display: block;
+  text-decoration: none;
+  color: #2c2e30;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tinyui-design-footer .footer-content .links .link-item .list-item:hover {
+  color: #2f5bea;
+}
+.tinyui-design-footer .footer-text-list {
+  font-size: 14px;
+  line-height: 39px;
+  white-space: nowrap;
+}
+.tinyui-design-footer .footer-title {
+  display: inline-block;
+  height: 22px;
+  line-height: 22px;
+  margin-left: 3px;
+  font-size: 16px;
+  font-weight: 600;
+  vertical-align: middle;
+}
+.tinyui-design-footer .footer-title-container {
+  margin-bottom: 17px;
+}
+.tinyui-design-footer .copyright {
+  height: 86px;
+  line-height: 1.8;
+  text-align: center;
+  font-size: 14px;
+  color: #fff;
+  background-color: #3e4345;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.tinyui-design-footer .copyright p {
+  margin: 0;
+}
+.footer-logo-container {
+  position: relative;
+  padding-right: 4.7%;
+  margin-right: 4.7%;
+  box-sizing: border-box;
+}
+.footer-logo-container::after {
+  content: '';
+  position: absolute;
+  display: block;
+  height: 135px;
+  border-right: 1px solid #979797;
+  opacity: 0.28;
+  top: 60px;
+  right: 0;
+}
+.footer-promotional-container {
+  margin: 10px 0;
+  padding-left: 1.05vw;
+}
+.footer-logo-link {
+  display: inline-block;
+  text-decoration: none;
+  cursor: pointer;
+  height: 38px;
+}
+.footer-logo-link-list {
+  height: 26px;
+  margin-right: 30px;
+}
+.footer-logo-link-list:last-child {
+  margin-right: 0;
+}
+.footer-logo-link-list img {
+  height: 100%;
+}
+.footer-promotional-label {
+  font-size: 14px;
+  height: 40px;
+  line-height: 40px;
+  white-space: nowrap;
+}
+.footer-logo-title {
+  display: inline-block;
+  height: 38px;
+  font-size: 21px;
+  font-weight: 700;
+  color: #242424;
+  margin-left: 0.53vw;
+}
+.footer-logo {
+  vertical-align: middle;
+  width: 53px;
+}
+.footer-logo-s {
+  vertical-align: middle;
+  width: 16px;
+}
+.footer-logolist-container {
+  margin-top: 10px;
+}
+.footer-logo-list {
+  margin-right: 1.46vw;
+}
+.icon-arrow {
+  display: none;
+  position: absolute;
+  top: 4px;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  transform: rotate(0deg);
+  transition: all 0.3s ease-out;
+  transform-origin: center center;
+  background: url(assets/icon-arrow.png) no-repeat;
+  background-size: 100% 100%;
+}
+@media screen and (max-width: 1339px) {
+  .tinyui-design-footer .footer-content {
+    width: 84%;
+  }
+  .tinyui-design-footer .footer-content .contact .group-code > img {
+    width: 85px;
+  }
+}
+@media screen and (max-width: 1279px) {
+  .tinyui-design-footer .footer-content {
+    width: 96%;
+  }
+  .tinyui-design-footer .footer-logo-container {
+    padding-right: 2%;
+    margin-right: 2%;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .tinyui-design-footer .footer-logo-container {
+    display: flex;
+    padding-right: 0;
+    margin-right: 0;
+    margin-bottom: 20px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 40px;
+    border-bottom: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .footer-logo-container::after {
+    display: none;
+  }
+  .tinyui-design-footer .footer-logo-container .footer-logolist-container {
+    padding-left: 0;
+  }
+  .tinyui-design-footer .footer-logo-container .footer-promotional-container {
+    padding: 0;
+    margin-left: 0;
+    width: 100%;
+    text-align: center;
+  }
+  .tinyui-design-footer .footer-content {
+    flex-direction: column;
+    width: 100%;
+    padding: 50px 30px 20px;
+  }
+  .tinyui-design-footer .footer-content .links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .tinyui-design-footer .footer-content .links .link-item {
+    text-align: center;
+    width: 100%;
+    border-bottom: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .footer-content .links .link-item .list-item {
+    width: 100%;
+  }
+  .tinyui-design-footer .footer-content .links .link-item div {
+    width: 100%;
+    text-align: left;
+  }
+  .tinyui-design-footer .footer-content .contact {
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .tinyui-design-footer .footer-content .contact .group-code {
+    margin-left: 0;
+    margin: 30px auto 12px;
+  }
+  .tinyui-design-footer .footer-content .contact .footer-logo-s {
+    display: none;
+  }
+  .tinyui-design-footer .footer-content .contact .footer-title {
+    font-size: 16px;
+    color: #2c2e30;
+    line-height: 22px;
+  }
+  .tinyui-design-footer .footer-content .footer-text-list {
+    padding-left: 23px;
+    height: 0;
+    overflow: hidden;
+    transition: all 0.5s ease-out;
+  }
+  .tinyui-design-footer .footer-content .footer-text-list.current {
+    height: fit-content;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container {
+    margin: 19px 0;
+    position: relative;
+    text-align: left;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container .icon-arrow {
+    display: block;
+  }
+  .tinyui-design-footer .footer-content .footer-title-container.current .icon-arrow {
+    transform: rotate(180deg);
+  }
+  .tinyui-design-footer .copyright {
+    background: transparent;
+    border-top: 1px solid #e5e6ea;
+  }
+  .tinyui-design-footer .copyright p {
+    font-size: 12px;
+    text-align: center;
+    color: #2c2e30;
+    line-height: 21px;
+    margin: 0;
+  }
+}
diff --git a/examples/sites/public/static/images/footer/cli.svg b/examples/sites/public/static/images/footer/cli.svg
new file mode 100644
index 000000000..62082bfdf
--- /dev/null
+++ b/examples/sites/public/static/images/footer/cli.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 10</title>
+    <g id="logo-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-应用-2" transform="translate(-1329.000000, -159.000000)">
+            <g id="编组-10" transform="translate(1329.000000, 159.000000)">
+                <rect id="矩形备份" fill="#2F5BEA" x="0" y="0" width="40" height="40" rx="7.18993409"></rect>
+                <g id="编组备份" transform="translate(8.508089, 6.782504)">
+                    <polygon id="路径" fill="#FFFFFF" points="11.4919113 0 18.2721326 3.91330138 9.86688013 8.77230087 9.8738316 8.78433712 6.80512257 10.5554917 6.80512257 15.9762015 11.5011123 18.6865564 14.5641738 16.9186486 14.5731456 16.93418 22.9838048 12.0720729 22.9838226 19.8981426 11.4919113 26.5308568 0 19.8981426 0 6.6327142"></polygon>
+                    <polygon id="路径" fill="#A0B3F1" points="11.5011123 18.6865564 22.9225159 12.0615019 22.9225338 19.8875716 11.4919113 26.5308568"></polygon>
+                    <polygon id="路径" fill="#BFCCF6" points="6.80512257 15.9762015 11.5011123 18.6865564 11.4919113 26.5308568 0 19.8981426"></polygon>
+                    <polygon id="路径" fill="#DFE5FA" points="11.4919113 0 18.2721326 3.91330138 11.4966193 7.83016359"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/code-open.png b/examples/sites/public/static/images/footer/code-open.png
new file mode 100644
index 000000000..2ca3d1067
Binary files /dev/null and b/examples/sites/public/static/images/footer/code-open.png differ
diff --git a/examples/sites/public/static/images/footer/footer-title-community.svg b/examples/sites/public/static/images/footer/footer-title-community.svg
new file mode 100644
index 000000000..cc0b82ca2
--- /dev/null
+++ b/examples/sites/public/static/images/footer/footer-title-community.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-953.000000, -4115.000000)" fill="#2C2E30" fill-rule="nonzero">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="2" transform="translate(953.000000, 120.000000)">
+                    <path d="M15.3469388,7.88382687 C14.9478458,6.93621867 14.3673469,6.06150342 13.6417233,5.33257404 L13.5328798,5.22323462 C12.0453515,3.80182232 10.0498866,3 7.98185941,3 C5.84126984,3 3.84580499,3.8382688 2.32199547,5.33257404 L2.32199547,5.3690205 C0.834467124,6.89977221 0,8.90432802 0,11.0182232 C0,11.8929385 0.145124718,12.6947608 0.39909297,13.4965831 C0.653061223,14.2255125 0.979591842,14.9179954 1.41496598,15.5740319 L1.48752835,15.6469248 L1.48752835,18.7084282 C1.48752835,18.8542141 1.63265307,19 1.77777778,19 L7.98185941,19 C9.07029479,19 10.0861678,18.7813212 11.1020408,18.38041 C12.0453515,17.9794989 12.9160998,17.3963554 13.6417233,16.667426 L13.7505669,16.5580866 C15.2018141,15.0637813 16,13.095672 16,10.9817768 C15.9637188,9.92482916 15.7460317,8.90432802 15.3469388,7.88382687 Z M10.8480726,12.2938497 L7.98185941,15.0637813 C7.94557822,15.1002278 7.87301587,15.1366743 7.80045351,15.1366743 C7.72789114,15.1366743 7.69160997,15.1002278 7.61904762,15.0637813 L4.78911564,12.3302961 L4.75283446,12.2938497 C4.06349206,11.6013667 3.88208617,10.7266515 4.20861677,9.88838268 C4.57142856,8.97722095 5.47845804,8.35763098 6.42176871,8.35763098 C6.85714286,8.35763098 7.292517,8.50341686 7.69160997,8.75854214 L7.76417234,8.79498862 L7.83673469,8.75854214 C8.23582766,8.50341686 8.67120181,8.35763098 9.10657597,8.35763098 C10.0498866,8.35763098 10.9569161,8.97722095 11.3197279,9.88838268 C11.7188209,10.7266515 11.537415,11.6013667 10.8480726,12.2938497 L10.8480726,12.2938497 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/footer-title-help.svg b/examples/sites/public/static/images/footer/footer-title-help.svg
new file mode 100644
index 000000000..4a4c1e99d
--- /dev/null
+++ b/examples/sites/public/static/images/footer/footer-title-help.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-1247.000000, -4114.000000)">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="3" transform="translate(1247.000000, 120.000000)">
+                    <g id="编组-2" transform="translate(0.000000, 2.000000)">
+                        <path d="M3.51720686,0 C2.68270668,0 2,0.720048002 2,1.600256 L2,14.399808 C2,15.279952 2.68270668,16 3.51720686,16 L14,16 L14,0 L3.51720686,0 Z M5.26618474,0.822335994 L7.79488306,0.822335994 L7.79488306,6.91198399 L6.5305339,5.97852799 L5.26618474,6.91198399 L5.26618474,0.822335994 L5.26618474,0.822335994 Z M12.9480191,15.13528 L4.02293741,15.13528 C3.39704332,15.13528 2.8850171,14.595168 2.8850171,13.935152 C2.8850171,13.274992 3.39704332,12.73496 4.02293741,12.73496 L12.9480191,12.73496 L12.9480191,15.13528 Z" id="形状" fill="#2C2E30" fill-rule="nonzero"></path>
+                        <rect id="矩形" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="16" height="16"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/footer-title-human.svg b/examples/sites/public/static/images/footer/footer-title-human.svg
new file mode 100644
index 000000000..e359b502b
--- /dev/null
+++ b/examples/sites/public/static/images/footer/footer-title-human.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>路径</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-1433.000000, -4114.000000)" fill="#2C2E30" fill-rule="nonzero">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="编组-34" transform="translate(1432.000000, 120.000000)">
+                    <g id="编组-3" transform="translate(0.000000, 2.000000)">
+                        <path d="M1,14.7149463 C1,15.4569086 2.03140681,15.723591 4.06877366,15.8836866 C5.25011415,15.9765159 6.38410303,16 8,16 C9.61589679,16 10.7498857,15.9765159 11.9312263,15.8836866 C13.9685932,15.723591 15,15.4569086 15,14.7149463 C15,13.1133741 12.3717286,11.65186 9.49740836,11.0752141 L9.78480398,11.4048696 L9.67302574,9.86297635 L9.42914152,10.2343016 C10.4479499,9.8903769 11.0322442,9.17954213 11.5060158,7.93103375 L11.2645133,8.15135675 C11.7236876,8.02687189 12.1344381,7.71455766 12.4039945,7.27652308 C12.9402079,6.40516534 12.7633497,5.28921466 11.9753262,4.78920731 C11.9011171,4.74212105 11.8235088,4.70191487 11.743106,4.66877088 L11.6085614,5.00530456 L11.9662517,5.00530478 C11.9662527,3.42036457 11.7338749,2.41463765 11.1304508,1.72804246 L10.8635783,1.96987891 L11.0190881,2.29696423 C11.4840144,2.0690471 11.7505083,1.75786745 11.4673196,1.34707184 C11.3345629,1.15449402 11.1264251,0.985533192 10.85956,0.82572657 C10.7196555,0.741947758 10.5717097,0.66595524 10.4239755,0.598460476 C10.3350678,0.55784157 10.2648628,0.528614873 10.2221635,0.512137888 L10.3885763,1.05929365 C10.4091949,1.02924504 10.4335108,0.987490033 10.4570554,0.934824306 C10.507862,0.821177039 10.5355665,0.700774354 10.5220768,0.569685241 C10.4833734,0.193574431 10.1579622,0 9.65941069,0 C9.1779612,0 8.60389559,0.290045019 7.96035107,0.755703906 L8.16792764,1.05149499 L8.17749027,0.688416942 C8.07914818,0.68574631 7.97822642,0.684415807 7.87463121,0.684415807 C4.82098464,0.684415807 3.79294407,1.83978447 3.78309037,4.94975328 L4.14077888,4.95092181 L4.02040262,4.60889986 C3.91863601,4.64583062 3.82091716,4.69379974 3.7284385,4.75247822 C2.94041505,5.25248557 2.76355681,6.36843624 3.29977026,7.23979399 C3.5781587,7.69218085 4.00704347,8.01017232 4.4833112,8.12595448 L4.2320725,7.90132655 C4.76312093,9.32568005 5.26748609,9.96178872 6.35576324,10.2417272 L6.08615167,9.8762816 L6.03026255,11.4181748 L6.3197905,11.0749343 C3.50227272,11.628261 1,13.0761629 1,14.7149463 Z" id="路径"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/footer-title-resource.svg b/examples/sites/public/static/images/footer/footer-title-resource.svg
new file mode 100644
index 000000000..1d9814326
--- /dev/null
+++ b/examples/sites/public/static/images/footer/footer-title-resource.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tiny-Design-首页" transform="translate(-753.000000, -4114.000000)">
+            <g id="FOOTER" transform="translate(0.000000, 3992.000000)">
+                <g id="1" transform="translate(753.000000, 119.000000)">
+                    <g id="编组" transform="translate(0.000000, 3.000000)">
+                        <path d="M8.41594277,0 L8.415,3.782 L11.3592233,2.78156313 L15,14.4769539 L11.9340828,15.5190381 L8.415,4.215 L8.41594277,16 L4.99744507,16 L4.99744507,0 L8.41594277,0 Z M3.67143587,1.57114228 L3.67143587,15.5751503 L0,15.5751503 L0,1.57114228 L3.67143587,1.57114228 Z M11.0219724,3.5511022 L9.00613183,4.24048096 L9.34338273,5.31462926 L11.3592233,4.6252505 L11.0219724,3.5511022 Z M3.04292284,2.28456914 L0.636177823,2.28456914 L0.636177823,3.5751503 L3.04292284,3.5751503 L3.04292284,2.28456914 Z M7.91006643,0.617234469 L5.57996934,0.617234469 L5.57996934,1.86773547 L7.91006643,1.86773547 L7.91006643,0.617234469 Z" id="形状结合" fill="#2C2E30" fill-rule="nonzero"></path>
+                        <rect id="矩形" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="16" height="16"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/pro.svg b/examples/sites/public/static/images/footer/pro.svg
new file mode 100644
index 000000000..7fc560266
--- /dev/null
+++ b/examples/sites/public/static/images/footer/pro.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 7</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-应用-1" transform="translate(-662.000000, -130.000000)">
+            <g id="编组-7" transform="translate(662.000000, 130.000000)">
+                <rect id="矩形备份" fill="#2F5BEA" x="0" y="0" width="40" height="40" rx="7.18993409"></rect>
+                <g id="编组-2备份" transform="translate(8.668429, 8.651887)">
+                    <polygon id="路径备份" fill="#DFE5FA" points="22.6317512 0 22.6317512 13.3068917 11.3452329 24.5895746 11.3452329 15.2982059 15.8500083 10.7568644 15.8500214 0"></polygon>
+                    <polygon id="路径备份" fill="#FFFFFF" transform="translate(5.671777, 12.294787) scale(-1, 1) translate(-5.671777, -12.294787) " points="11.3435546 0 11.3435546 13.3068917 1.68246306e-15 24.5895746 -1.25938755e-15 15.306479 4.56181177 10.7568644 4.56182488 0"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/images/footer/theme.svg b/examples/sites/public/static/images/footer/theme.svg
new file mode 100644
index 000000000..48b04a033
--- /dev/null
+++ b/examples/sites/public/static/images/footer/theme.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 9</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-应用-1" transform="translate(-992.000000, -130.000000)">
+            <g id="编组-9" transform="translate(992.000000, 130.000000)">
+                <rect id="矩形备份" fill="#2F5BEA" x="0" y="0" width="40" height="40" rx="7.18993409"></rect>
+                <g id="编组备份" transform="translate(6.666667, 9.523810)" fill-rule="nonzero">
+                    <polygon id="矩形备份-2" fill="#DFE5FA" points="-2.17072369e-12 0 9.54694373 0 9.54694373 8.5861468 -2.17072369e-12 8.5861468"></polygon>
+                    <polygon id="矩形备份-4" fill="#A0B3F1" points="17.1387402 0 26.6666667 0 26.6666667 8.5593068 17.1387402 8.5593068"></polygon>
+                    <polygon id="路径" fill="#FFFFFF" points="23.8176711 8.55930828 23.8176711 20.952381 2.86596318 20.952381 2.86596318 8.55930828 9.54694373 8.5593068 9.54783769 15.1429542 17.1387402 15.1429542 17.1378462 8.5593068"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/sites/public/static/js/design-common.js b/examples/sites/public/static/js/design-common.js
index 07036fbdc..816f62d7f 100644
--- a/examples/sites/public/static/js/design-common.js
+++ b/examples/sites/public/static/js/design-common.js
@@ -31,6 +31,115 @@ const headerHtml = `
   </div>
 </div>`
 
+const footerHtml = `<div class="tinyui-design-footer">
+  <div class="footer-content">
+   <div class="footer-logo-container">
+      <a href="/" class="footer-logo-link">
+        <img src="/static/images/opentiny-logo.svg" title="OpenTiny" class="footer-logo">
+        <span class="footer-logo-title">OpenTiny</span>
+      </a>
+      <div class="footer-promotional-container">
+         
+          <div class="footer-promotional-label">企业级设计体系</div>
+         
+          <div class="footer-promotional-label">追求极致体验，多种设计方法融合</div>
+         
+          <div class="footer-promotional-label">开箱即用的多语言组件库</div>
+        
+        <div class="footer-logolist-container">
+          
+            <a href="/pro" class="footer-logo-link footer-logo-link-list">
+              <img src="/static/images/footer/pro.svg" title="TinyPro">
+            </a>
+          
+            <a href="/designtheme/home" class="footer-logo-link footer-logo-link-list">
+              <img src="/static/images/footer/theme.svg" title="TinyTheme">
+            </a>
+          
+            <a href="/tiny-cli/home" class="footer-logo-link footer-logo-link-list">
+              <img src="/static/images/footer/cli.svg" title="TinyCLI">
+            </a>
+          
+        </div>
+      </div>
+      
+   </div>
+    
+    <div class="links">
+      
+      <div class="link-item">
+        <div class="footer-title-container">
+          <img src="/static/images/footer/footer-title-resource.svg" class="footer-logo-s">
+          <span class="footer-title">相关资源</span>
+          <span class="icon-arrow"></span>
+        </div>
+        <div class="footer-text-list">
+          
+          
+            <a href="https://angular.cn/" title="Angular - 中文网" target="_blank" rel="noopener noreferrer" class="list-item">Angular - 中文网</a>
+          
+            <a href="https://cn.vuejs.org/" title="Vue - 中文网" target="_blank" rel="noopener noreferrer" class="list-item">Vue - 中文网</a>
+          
+            <a href="https://ionic.io/ionicons" title="ionicons 图标库" target="_blank" rel="noopener noreferrer" class="list-item">ionicons 图标库</a>
+                    
+        </div>        
+      </div>
+      
+      <div class="link-item">
+        <div class="footer-title-container">
+          <img src="/static/images/footer/footer-title-community.svg" class="footer-logo-s">
+          <span class="footer-title">社区</span>
+          <span class="icon-arrow"></span>
+        </div>
+        <div class="footer-text-list">
+          
+            <a href="https://mp.weixin.qq.com/s/3a6GaLY6hBGzV0nGzen2gw" title="公众号 - OpenTiny" target="_blank" rel="noopener noreferrer" class="list-item">公众号 - OpenTiny</a>
+          
+            <a href="https://juejin.cn/user/3808325101432983" title="掘金 - OpenTiny 社区" target="_blank" rel="noopener noreferrer" class="list-item">掘金 - OpenTiny 社区</a>
+          
+            <a href="https://www.zhihu.com/people/opentiny" title="知乎 - OpenTiny 社区" target="_blank" rel="noopener noreferrer" class="list-item">知乎 - OpenTiny 社区</a>
+          
+            <a href="https://space.bilibili.com/15284299" title="B 站 - OpenTiny 社区" target="_blank" rel="noopener noreferrer" class="list-item">B 站 - OpenTiny 社区</a>
+                    
+        </div>        
+      </div>
+      
+      <div class="link-item">
+        <div class="footer-title-container">
+          <img src="/static/images/footer/footer-title-help.svg" class="footer-logo-s">
+          <span class="footer-title">帮助</span>
+          <span class="icon-arrow"></span>
+        </div>
+        <div class="footer-text-list">
+          
+            <a href="https://github.com/opentiny" title="GitHub" target="_blank" rel="noopener noreferrer" class="list-item">GitHub</a>
+          
+            <a href="https://gitee.com/opentiny" title="Gitee" target="_blank" rel="noopener noreferrer" class="list-item">Gitee</a>
+          
+            <a href="/tiny-vue/zh-CN/os-theme/docs/changelog" title="更新日志" target="_blank" rel="noopener noreferrer" class="list-item">更新日志</a>
+          
+            <a href="https://github.com/opentiny/tiny-vue/issues" title="讨论区" target="_blank" rel="noopener noreferrer" class="list-item">讨论区</a>
+                    
+        </div>        
+      </div>
+      
+      <div class="contact">
+        <div>
+          <img src="/static/images/footer/footer-title-human.svg" class="footer-logo-s">
+          <span class="footer-title">联系我们</span>
+        </div>
+        <div class="group-code">
+          <img src="/static/images/footer/code-open.png">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="copyright">
+  <p>Copyright © Huawei Technologies Co., Ltd. 2023. All rights reserved.</p>
+  <p>粤ICP备2022156931号-1</p>
+  </div>
+</div>`
+
 class DesignCommon {
   renderHeader() {
     document.getElementById('header').innerHTML = headerHtml
@@ -40,7 +149,7 @@ class DesignCommon {
     document.head.append(link)
   }
   renderFooter() {
-    // 空方法，用于给官网执行，解决报错
+    document.getElementById('footer').innerHTML = footerHtml
   }
 }
 window.TDCommon = DesignCommon
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 1baa58412..d95100bc2 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -16,8 +16,8 @@
     </div>
     <span class="docs-header-spacer"></span>
   </header>
-  <div class="docs-content">
-    <div class="ti-fi-1 ti-rel cmp-container">
+  <div class="docs-content" id="doc-layout-scoller">
+    <div class="ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
           <div v-if="['interfaces', 'types', 'classes'].includes(cmpId)" id="TS" class="all-api-container">
@@ -36,60 +36,62 @@
                     <div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
                       {{ key }}
                     </div>
-                    <tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
-                      <tiny-grid-column
-                        v-if="tableData[oneGroup.name][key][0]?.type"
-                        class-name="api-table-expand-col"
-                        type="expand"
-                        width="32"
-                      >
-                        <template #default="{ row }">
-                          <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
-                        </template>
-                      </tiny-grid-column>
-                      <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
-                        <template #default="{ row }">
-                          <span class="api-table-name">
-                            <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
-                            <span v-else>{{ row.name }}</span>
-                          </span>
-                          <version-tip
-                            v-if="row.meta || row.versionTipOption"
-                            :meta="row.meta"
-                            v-bind="row.versionTipOption"
-                            render-type="tag"
-                            tip-subject="api"
-                          >
-                          </version-tip>
-                        </template>
-                      </tiny-grid-column>
-                      <tiny-grid-column
-                        v-if="tableData[oneGroup.name][key][0]?.type"
-                        field="type"
-                        :title="i18nByKey('propType')"
-                        :width="columnWidth[key][1]"
-                      >
-                        <template #default="{ row }">
-                          <a
-                            v-if="row.typeAnchorName"
-                            :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
-                            v-html="row.type"
-                          ></a>
-                          <span v-else v-html="row.type"></span>
-                        </template>
-                      </tiny-grid-column>
-                      <tiny-grid-column
-                        v-if="key === 'props'"
-                        field="defaultValue"
-                        :title="i18nByKey('defValue')"
-                        :width="columnWidth[key][2]"
-                      ></tiny-grid-column>
-                      <tiny-grid-column field="desc" :title="i18nByKey('desc')">
-                        <template #default="data">
-                          <span v-html="data.row.desc"></span>
-                        </template>
-                      </tiny-grid-column>
-                    </tiny-grid>
+                    <div class="api-table-box">
+                      <tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
+                        <tiny-grid-column
+                          v-if="tableData[oneGroup.name][key][0]?.type"
+                          class-name="api-table-expand-col"
+                          type="expand"
+                          width="32"
+                        >
+                          <template #default="{ row }">
+                            <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
+                          <template #default="{ row }">
+                            <span class="api-table-name">
+                              <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
+                              <span v-else>{{ row.name }}</span>
+                            </span>
+                            <version-tip
+                              v-if="row.meta || row.versionTipOption"
+                              :meta="row.meta"
+                              v-bind="row.versionTipOption"
+                              render-type="tag"
+                              tip-subject="api"
+                            >
+                            </version-tip>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column
+                          v-if="tableData[oneGroup.name][key][0]?.type"
+                          field="type"
+                          :title="i18nByKey('propType')"
+                          :width="columnWidth[key][1]"
+                        >
+                          <template #default="{ row }">
+                            <a
+                              v-if="row.typeAnchorName"
+                              :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
+                              v-html="row.type"
+                            ></a>
+                            <span v-else v-html="row.type"></span>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column
+                          v-if="key === 'props'"
+                          field="defaultValue"
+                          :title="i18nByKey('defValue')"
+                          :width="columnWidth[key][2]"
+                        ></tiny-grid-column>
+                        <tiny-grid-column field="desc" :title="i18nByKey('desc')">
+                          <template #default="data">
+                            <span v-html="data.row.desc"></span>
+                          </template>
+                        </tiny-grid-column>
+                      </tiny-grid>
+                    </div>
                   </template>
                 </div>
               </div>
@@ -142,7 +144,7 @@
               <div id="API" class="all-api-container">
                 <div class="ti-f-c ti-f-wrap api-list">
                   <!-- apis 是一个数组 {name,type,properties:[原table内容],events:[] ...........} -->
-                  <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+                  <div class="mt20 wp100" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
                     <div class="ti-f-r ti-f-pos-start ti-fw-bold">
                       <div :id="`cmp-${oneGroup.name}`" class="ti-f18">
                         {{ oneGroup.name }}
@@ -156,73 +158,75 @@
                         <div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
                           {{ key }}
                         </div>
-                        <tiny-grid
-                          ref="apiTableRef"
-                          class="api-table"
-                          :data="tableData[oneGroup.name][key]"
-                          :expand-config="apiExpandConf"
-                          row-id="name"
-                        >
-                          <tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
-                            <template #default="{ row }">
-                              <async-highlight
-                                v-if="row.code"
-                                :code="row.code.trim()"
-                                :types="chartCode ? 'html' : 'ts'"
-                              ></async-highlight>
-                              <div v-if="row.depTypes">
-                                <async-highlight
-                                  v-for="(k, i) in row.depTypes"
-                                  :key="i"
-                                  :code="currJson.types[k]?.code"
-                                  types="ts"
-                                ></async-highlight>
-                              </div>
-                            </template>
-                          </tiny-grid-column>
-                          <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
-                            <template #default="{ row }">
-                              <span class="api-table-name">
-                                <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
-                                <span v-else>{{ row.name }}</span>
-                              </span>
-                              <version-tip
-                                v-if="row.meta || row.versionTipOption"
-                                :meta="row.meta"
-                                v-bind="row.versionTipOption"
-                                render-type="tag"
-                                tip-subject="api"
-                              >
-                              </version-tip>
-                            </template>
-                          </tiny-grid-column>
-                          <tiny-grid-column
-                            v-if="tableData[oneGroup.name][key].find((i) => i.type)"
-                            field="type"
-                            :title="i18nByKey('propType')"
-                            :width="columnWidth[key][1]"
+                        <div class="api-table-box">
+                          <tiny-grid
+                            ref="apiTableRef"
+                            class="api-table"
+                            :data="tableData[oneGroup.name][key]"
+                            :expand-config="apiExpandConf"
+                            row-id="name"
                           >
-                            <template #default="{ row }">
-                              <span
-                                :class="{ 'type-link': row.typeAnchorName || row.linkTo }"
-                                :id="row.typeAnchorName ? row.type : ''"
-                                @click="toOuterType(row)"
-                                >{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
-                              ></span>
-                            </template>
-                          </tiny-grid-column>
-                          <tiny-grid-column
-                            v-if="key === 'props' || key === 'options'"
-                            field="defaultValue"
-                            :title="i18nByKey('defValue')"
-                            :width="columnWidth[key][2]"
-                          ></tiny-grid-column>
-                          <tiny-grid-column field="desc" :title="i18nByKey('desc')">
-                            <template #default="data">
-                              <span v-html="data.row.desc"></span>
-                            </template>
-                          </tiny-grid-column>
-                        </tiny-grid>
+                            <tiny-grid-column class-name="api-table-expand-col" type="expand" width="32">
+                              <template #default="{ row }">
+                                <async-highlight
+                                  v-if="row.code"
+                                  :code="row.code.trim()"
+                                  :types="chartCode ? 'html' : 'ts'"
+                                ></async-highlight>
+                                <div v-if="row.depTypes">
+                                  <async-highlight
+                                    v-for="(k, i) in row.depTypes"
+                                    :key="i"
+                                    :code="currJson.types[k]?.code"
+                                    types="ts"
+                                  ></async-highlight>
+                                </div>
+                              </template>
+                            </tiny-grid-column>
+                            <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
+                              <template #default="{ row }">
+                                <span class="api-table-name">
+                                  <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
+                                  <span v-else>{{ row.name }}</span>
+                                </span>
+                                <version-tip
+                                  v-if="row.meta || row.versionTipOption"
+                                  :meta="row.meta"
+                                  v-bind="row.versionTipOption"
+                                  render-type="tag"
+                                  tip-subject="api"
+                                >
+                                </version-tip>
+                              </template>
+                            </tiny-grid-column>
+                            <tiny-grid-column
+                              v-if="tableData[oneGroup.name][key].find((i) => i.type)"
+                              field="type"
+                              :title="i18nByKey('propType')"
+                              :width="columnWidth[key][1]"
+                            >
+                              <template #default="{ row }">
+                                <span
+                                  :class="{ 'type-link': row.typeAnchorName || row.linkTo }"
+                                  :id="row.typeAnchorName ? row.type : ''"
+                                  @click="toOuterType(row)"
+                                  >{{ row.type }} <icon-outer-link v-if="row.linkTo"></icon-outer-link
+                                ></span>
+                              </template>
+                            </tiny-grid-column>
+                            <tiny-grid-column
+                              v-if="key === 'props' || key === 'options'"
+                              field="defaultValue"
+                              :title="i18nByKey('defValue')"
+                              :width="columnWidth[key][2]"
+                            ></tiny-grid-column>
+                            <tiny-grid-column field="desc" :title="i18nByKey('desc')">
+                              <template #default="data">
+                                <span v-html="data.row.desc"></span>
+                              </template>
+                            </tiny-grid-column>
+                          </tiny-grid>
+                        </div>
                       </template>
                     </div>
                   </div>
@@ -235,13 +239,11 @@
         <div class="cmp-page-anchor catalog" v-if="currAnchorLinks.length">
           <tiny-anchor
             id="anchor"
-            :offset-top="156"
             :links="currAnchorLinks"
             :key="anchorRefreshKey"
             :is-affix="anchorAffix"
             type="dot"
-            mask-class="custom-active-anchor"
-            container-id="#doc-layout"
+            container-id="#doc-layout-scoller"
             @link-click="handleAnchorClick"
           >
           </tiny-anchor>
@@ -254,8 +256,8 @@
         {{ i18nByKey('doc-owner') }} : {{ currJson.owner }}
       </div>
     </div>
+    <div id="footer"></div>
   </div>
-  <div id="footer"></div>
 </template>
 
 <script lang="jsx">
@@ -473,7 +475,7 @@ export default defineComponent({
     const scrollByHash = (hash) => {
       setTimeout(() => {
         if (!hash) {
-          document.getElementById('doc-layout').scrollTo({
+          document.getElementById('doc-layout-scoller').scrollTo({
             top: 0,
             left: 0
           })
@@ -486,14 +488,16 @@ export default defineComponent({
             scrollTarget = document.querySelector(`#${hash}`)
           } catch (err) {}
           if (scrollTarget && !isRunningTest) {
-            document.getElementById('doc-layout').scrollTo({
-              top: scrollTarget.offsetTop,
+            // doc-layout-scoller(滚动) > tabs > tab-content(relative)， 造成  scrollTarget.offsetTop 是相对于 tab-content的距离
+            // 所以滚动需要修正 tab-title的占位高度才行
+            document.getElementById('doc-layout-scoller').scrollTo({
+              top: scrollTarget.offsetTop + 52,
               left: 0,
               behavior: 'smooth'
             })
           }
         }
-      }, 600)
+      }, 0)
     }
 
     // 在singleDemo情况时，才需要滚动示例区域到顶
@@ -501,7 +505,7 @@ export default defineComponent({
       let hash = router.currentRoute.value.hash?.slice(1)
       if (hash !== 'API') {
         setTimeout(() => {
-          document.getElementById('doc-layout').scrollTo({
+          document.getElementById('doc-layout-scoller').scrollTo({
             top: 0,
             left: 0,
             behavior: 'smooth'
@@ -622,18 +626,18 @@ export default defineComponent({
     }
 
     const onDocLayoutScroll = debounce(100, false, () => {
-      const docLayout = document.getElementById('doc-layout')
+      const docLayout = document.getElementById('doc-layout-scoller')
       const { scrollTop, scrollHeight, clientHeight: layoutHeight } = docLayout
       const headerHeight = document.querySelector('.docs-header')?.clientHeight || 0
       const footerHeight = document.getElementById('footer')?.clientHeight || 0
       const anchorHeight = document.querySelector('#anchor')?.clientHeight || 0
-      const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout视口下隐藏的部分高度
+      const remainHeight = scrollHeight - scrollTop - layoutHeight // doc-layout-scoller视口下隐藏的部分高度
       state.anchorAffix = layoutHeight - headerHeight - (footerHeight - remainHeight) > anchorHeight
     })
 
     const setScrollListener = () => {
       nextTick(() => {
-        const docLayout = document.getElementById('doc-layout')
+        const docLayout = document.getElementById('doc-layout-scoller')
         if (docLayout) {
           docLayout.addEventListener('scroll', onDocLayoutScroll)
         }
@@ -641,7 +645,7 @@ export default defineComponent({
     }
 
     const removeScrollListener = () => {
-      const docLayout = document.getElementById('doc-layout')
+      const docLayout = document.getElementById('doc-layout-scoller')
       if (docLayout) {
         docLayout.removeEventListener('scroll', onDocLayoutScroll)
       }
@@ -767,9 +771,6 @@ export default defineComponent({
 
 <style lang="less" scoped>
 .docs-header {
-  position: sticky;
-  top: 0;
-  z-index: var(--docs-header-zindex);
   padding: 16px 40px;
   background-color: #fff;
   box-shadow: 12px 0 20px 6px rgba(0, 0, 0, 0.06);
@@ -809,14 +810,16 @@ export default defineComponent({
 }
 
 .docs-content {
-  margin: 16px 0 120px;
+  flex: 1;
+  overflow: hidden auto;
+  padding: 16px 0 0;
   transition: all ease-in-out 0.3s;
 
   .docs-tabs-wrap {
+    width: 100%;
     flex: 1;
     display: flex;
     justify-content: center;
-    min-width: 680px;
     padding: 0 40px;
   }
 
@@ -837,7 +840,6 @@ export default defineComponent({
 
     :deep(> .tiny-tabs__header) {
       position: sticky;
-      top: 90px;
       z-index: var(--docs-tabs-header-zindex);
       background-color: #fff;
 
@@ -866,11 +868,18 @@ export default defineComponent({
   }
 }
 
+.api-table-box {
+  border-left: 1px solid rgb(239, 239, 245);
+  border-right: 1px solid rgb(239, 239, 245);
+  overflow-x: auto;
+  width: 100%;
+}
+
 .api-table {
   width: 100%;
+  min-width: 640px;
   table-layout: fixed;
   border-collapse: collapse;
-  border: 1px solid rgb(239, 239, 245);
 
   a,
   .type-link {
@@ -959,7 +968,7 @@ export default defineComponent({
 .all-demos-container,
 .all-api-container {
   flex: 1;
-  padding-top: 32px;
+  padding: 32px 0;
   scroll-behavior: smooth;
 }
 
diff --git a/examples/sites/src/views/components/float-settings.vue b/examples/sites/src/views/components/float-settings.vue
index cc8830947..c73b4af60 100644
--- a/examples/sites/src/views/components/float-settings.vue
+++ b/examples/sites/src/views/components/float-settings.vue
@@ -200,17 +200,11 @@ export default defineComponent({
         const nav = document.querySelector('.nav')
         if (docLayout) {
           docLayout.onscroll = debounce(100, false, () => {
-            const {
-              scrollTop: layoutScrollTop,
-              scrollHeight: layoutScrollHeight,
-              clientHeight: layoutHeight
-            } = docLayout
+            const { scrollTop: layoutScrollTop } = docLayout
             const headerHeight = docLayout.querySelector('header')?.clientHeight || 0
-            const footerHeight = docLayout.querySelector('#footer')?.clientHeight || 0
             const footerTop = footer.getBoundingClientRect().top
             const navHeight = nav?.clientHeight || 0
             const currSettingsBottom = parseInt(window.getComputedStyle(floatSettings.value).getPropertyValue('bottom'))
-            const footerVisibleHeight = footerHeight - (layoutScrollHeight - layoutScrollTop - layoutHeight)
 
             state.showBackTop = layoutScrollTop > 500
             state.showSettings = footerTop - navHeight - headerHeight > 220
@@ -218,11 +212,6 @@ export default defineComponent({
             if (!state.initBottomVal) {
               state.initBottomVal = currSettingsBottom
             }
-            if (footerVisibleHeight > state.initBottomVal - 40) {
-              state.settingsStyle.bottom = `${footerVisibleHeight + 20}px`
-            } else {
-              state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL
-            }
           })
         }
       })
@@ -297,9 +286,10 @@ export default defineComponent({
     border-radius: 12px;
     background-color: #fff;
     cursor: pointer;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 
     &:hover {
-      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
 
       .settings-icon {
         color: #191919;
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index 4b0f120a9..0527dc064 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -153,17 +153,6 @@ export default defineComponent({
     )
 
     onMounted(async () => {
-      // 每次切换路由，有锚点则跳转到锚点，否则导航到顶部
-      routerCbDestroy = router.afterEach((to) => {
-        if (to.hash) {
-          const el = document.querySelector(to.hash)
-          if (el) {
-            return el.scrollIntoView()
-          }
-        }
-        state.contentRef.scrollTo({ top: 0, behavior: 'auto' })
-      })
-
       // 刷新后，高亮相应的菜单
       const cmpId = router.currentRoute.value?.params?.cmpId
       if (cmpId) {
@@ -207,9 +196,12 @@ export default defineComponent({
 .content-layout {
   display: flex;
   --layout-tree-menu-input-height: 32px;
-  --layout-content-main-min-width: 600px;
+  --layout-content-main-min-width: 200px;
   --layout-content-main-max-width: 1000px;
 }
+@media screen and (max-width: 640px) {
+  --layout-content-main-min-width: 600px;
+}
 
 .tiny-tooltip.tiny-tooltip__popper.is-light.docs-tooltip {
   border: none;
@@ -346,12 +338,12 @@ export default defineComponent({
 }
 
 #doc-layout {
-  width: 100%;
-  height: calc(100vh - 60px);
-  overflow: hidden auto;
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden auto;
+  width: 100%;
+  height: calc(100vh - 60px);
 }
 
 .api-type-box {
diff --git a/packages/renderless/package.json b/packages/renderless/package.json
index e4056356f..0384cbf0f 100644
--- a/packages/renderless/package.json
+++ b/packages/renderless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.19.2",
+  "version": "3.19.5",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
diff --git a/packages/renderless/src/transfer/index.ts b/packages/renderless/src/transfer/index.ts
index 5da9d179f..6baab19b7 100644
--- a/packages/renderless/src/transfer/index.ts
+++ b/packages/renderless/src/transfer/index.ts
@@ -217,7 +217,7 @@ export const clearQuery = (refs: ITransferRenderlessParams['refs']) => (which: '
 
 /** SortableJs 插件的回调逻辑， 添加，删除，更新事件后，触发本函数 */
 export const logicFun =
-  ({ props, emit, state }: Pick<ITransferRenderlessParams, 'emit' | 'props' | 'state'>) =>
+  ({ props, emit, state, vm }: Pick<ITransferRenderlessParams, 'emit' | 'props' | 'state'>) =>
   ({ event, isAdd, pullMode }: { event: any; isAdd?: boolean; pullMode?: 'sort' }) => {
     let currentValue = props.modelValue.slice()
     let movedKeys = []
@@ -225,9 +225,12 @@ export const logicFun =
     if (pullMode) {
       currentValue.splice(event.newIndex, 0, currentValue.splice(event.oldIndex, 1)[0])
     } else {
+      const rightPanel = vm.$refs.rightPanel
+      const leftPanel = vm.$refs.leftPanel
+
       const key = isAdd
-        ? state.targetData[event.oldIndex][props.props.key]
-        : state.sourceData[event.oldIndex][props.props.key]
+        ? rightPanel.state.filteredData[event.oldIndex][props.props.key]
+        : leftPanel.state.filteredData[event.oldIndex][props.props.key]
       const index = isAdd ? state.rightChecked.indexOf(key) : state.leftChecked.indexOf(key)
       const valueIndex = currentValue.indexOf(key)
 
diff --git a/packages/renderless/src/transfer/vue.ts b/packages/renderless/src/transfer/vue.ts
index 2e93eda90..6668c8ae0 100644
--- a/packages/renderless/src/transfer/vue.ts
+++ b/packages/renderless/src/transfer/vue.ts
@@ -61,7 +61,7 @@ const initState = ({ reactive, computed, api, props, h, slots }): ITransferState
 export const renderless = (
   props: ITransferProps,
   { computed, onMounted, reactive, h }: ISharedRenderlessParamHooks,
-  { $prefix, emit, refs, parent, slots }: ITransferRenderlessParamUtils
+  { $prefix, emit, refs, parent, slots, vm }: ITransferRenderlessParamUtils
 ) => {
   const api = {} as ITransferApi
   const Tree = $prefix + 'Tree'
@@ -80,7 +80,7 @@ export const renderless = (
     addToRight: addToRight({ emit, refs, props, state, Tree }),
     onTargetCheckedChange: onTargetCheckedChange({ emit, state }),
     onSourceCheckedChange: onSourceCheckedChange({ emit, state }),
-    logicFun: logicFun({ props, emit, state }),
+    logicFun: logicFun({ props, emit, state, vm }),
     getTargetData: getTargetData({ props, state, Tree, Table }),
     sortableEvent: sortableEvent({ api, droppanel: DROPPANEL, props, queryDom: TRANSFERPANEL, refs })
   })
diff --git a/packages/renderless/src/tree-node/index.ts b/packages/renderless/src/tree-node/index.ts
index 085fe8c6f..a839e74fa 100644
--- a/packages/renderless/src/tree-node/index.ts
+++ b/packages/renderless/src/tree-node/index.ts
@@ -86,6 +86,12 @@ export const handleSelectChange =
 export const handleClick =
   ({ api, vm, props, state }) =>
   (e) => {
+    // tiny 新增： 点击子节点之间的空白时，不会收齐父节点
+    const contentElm = vm.$refs.content
+    if (contentElm && !contentElm.contains(e?.target)) {
+      return
+    }
+
     // tiny 新增： 去掉trigger参数，不影响点击的逻辑
     const store = state.tree.state.store
 
diff --git a/packages/theme/package.json b/packages/theme/package.json
index 075f258f0..dde928c97 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-theme",
   "type": "module",
-  "version": "3.19.3",
+  "version": "3.19.5",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
diff --git a/packages/theme/src/area/index.less b/packages/theme/src/area/index.less
index 26acbde97..104901246 100644
--- a/packages/theme/src/area/index.less
+++ b/packages/theme/src/area/index.less
@@ -11,14 +11,17 @@
 */
 
 @import '../custom.less';
+@import './vars.less';
 
 @area-prefix-cls: ~'@{css-prefix}area';
 @select-prefix-cls: ~'@{css-prefix}select';
 
 .@{area-prefix-cls} {
   .@{select-prefix-cls} {
-    width: 270px;
-    margin-right: 10px;
-    margin-bottom: 10px;
+    .inject-Area-vars();
+
+    width: 220px;
+    margin-right: var(--tv-Area-select-margin-right);
+    margin-bottom: var(--tv-Area-select-margin-bottom);;
   }
 }
diff --git a/packages/theme/src/area/vars.less b/packages/theme/src/area/vars.less
new file mode 100644
index 000000000..296c2182f
--- /dev/null
+++ b/packages/theme/src/area/vars.less
@@ -0,0 +1,17 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.inject-Area-vars() {
+  // 选中框间距
+  --tv-Area-select-margin-right: var(--tv-space-xl, 16px);
+  --tv-Area-select-margin-bottom: var(--tv-space-xl, 16px);
+}
\ No newline at end of file
diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less
index 1b2f490cd..eb237cdff 100644
--- a/packages/theme/src/base/reset.less
+++ b/packages/theme/src/base/reset.less
@@ -177,8 +177,29 @@
   }
 }
 
-.tiny-popper,
-.tiny-tooltip__popper {
+// 没有箭头的场景， select/ userlink /roles/ dept 等默认距离4 px
+.tiny-popper {
+  &[x-placement^='top'] {
+    margin-bottom: 4px;
+  }
+
+  &[x-placement^='bottom'] {
+    margin-top: 4px;
+  }
+
+  &[x-placement^='right'] {
+    margin-left: 4px;
+  }
+
+  &[x-placement^='left'] {
+    margin-right: 4px;
+  }
+}
+
+// 有箭头的场景，统一规范所有样式
+.tiny-popconfirm-popover:has(.popper__arrow),
+.tiny-popper:has(.popper__arrow),
+.tiny-tooltip__popper:has(.popper__arrow) {
   .popper__arrow {
     position: absolute;
     display: block;
diff --git a/packages/theme/src/dept/index.less b/packages/theme/src/dept/index.less
index 7c3951f95..09b1c0b45 100644
--- a/packages/theme/src/dept/index.less
+++ b/packages/theme/src/dept/index.less
@@ -22,22 +22,18 @@
   .inject-Dept-vars();
 
   &__search {
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
 
-  &__text,
   &__label {
+    width: 80px;
     font-size: var(--tv-Dept-label-font-size);
     color: var(--tv-Dept-label-text-color);
     font-weight: var(--tv-Dept-label-font-weight);
+    text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
-
-  &__label {
-    text-align: right;
-
     &.is-selected {
       text-align: left;
       margin-bottom: 4px;
@@ -53,7 +49,7 @@
   }
 
   &__item {
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
 
   &__search &__label,
diff --git a/packages/theme/src/dept/vars.less b/packages/theme/src/dept/vars.less
index b5b2a4af9..2982923e0 100644
--- a/packages/theme/src/dept/vars.less
+++ b/packages/theme/src/dept/vars.less
@@ -12,8 +12,8 @@
 
 .inject-Dept-vars() {
   --tv-Dept-label-font-size: var(--tv-font-size-default);
-  --tv-Dept-label-text-color: var(--tv-color-text);
-  --tv-Dept-label-font-weight: var(--tv-font-weight-bold);
+  --tv-Dept-label-text-color: var(--tv-color-text-secondary);
+  --tv-Dept-label-font-weight: var(--tv-font-weight-regular);
   --tv-Dept-selected-info-text-color: var(--tv-color-text);
   --tv-Dept-selected-info-bg-color: var(--tv-color-bg-active);
   --tv-Dept-selected-info-border-radius: var(--tv-border-radius-default);
diff --git a/packages/theme/src/espace/index.less b/packages/theme/src/espace/index.less
index bf4f21e7c..2e2a7bd51 100644
--- a/packages/theme/src/espace/index.less
+++ b/packages/theme/src/espace/index.less
@@ -22,7 +22,7 @@
   .item-talk,
   .item-call,
   .item-email {
-    margin: 0 8px 0 0;
+    margin: 0 24px 0 0;
     line-height: 1;
 
     .@{svg-prefix-cls} {
diff --git a/packages/theme/src/form-item/index.less b/packages/theme/src/form-item/index.less
index 5b5c68b07..abeb734cd 100644
--- a/packages/theme/src/form-item/index.less
+++ b/packages/theme/src/form-item/index.less
@@ -21,6 +21,8 @@
 @textarea-prefix-cls: ~'@{css-prefix}textarea';
 @button-prefix-cls: ~'@{css-prefix}button';
 @numeric-prefix-cls: ~'@{css-prefix}numeric';
+@cascader-prefix-cls: ~'@{css-prefix}cascader';
+@autocomplete-prefix-cls: ~'@{css-prefix}autocomplete';
 @date-editor-prefix-cls: ~'@{css-prefix}date-editor';
 @tooltip-prefix-cls: ~'@{css-prefix}tooltip';
 @switch-prefix-cls: ~'@{css-prefix}switch';
@@ -184,6 +186,8 @@
     }
 
     .@{numeric-prefix-cls},
+    .@{cascader-prefix-cls},
+    .@{autocomplete-prefix-cls},
     .@{date-editor-prefix-cls}--daterange.@{input-prefix-cls},
     .@{date-editor-prefix-cls}--daterange.@{input-prefix-cls}__inner,
     .@{date-editor-prefix-cls}--timerange.@{input-prefix-cls},
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index db22f0187..d56020240 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -905,7 +905,8 @@
     }
 
     .@{grid-prefix-cls}-body__column {
-      &.col__actived {
+      &.col__actived,
+      &.edit_visible {
         padding: 0 var(--tv-Grid-cell-padding-x);
       }
 
diff --git a/packages/theme/src/input/index.less b/packages/theme/src/input/index.less
index 3731680f4..9d7fa560e 100644
--- a/packages/theme/src/input/index.less
+++ b/packages/theme/src/input/index.less
@@ -255,6 +255,7 @@
 
   &-small {
     .input-size(var(--tv-Input-small-height));
+    font-size: var(--tv-Input-small-font-size);
     .@{input-prefix-cls}__inner {
       font-size: var(--tv-Input-small-font-size);
     }
@@ -265,6 +266,7 @@
 
   &-mini {
     .input-size(var(--tv-Input-mini-height));
+    font-size: var(--tv-Input-small-font-size);
     .@{input-prefix-cls}__inner {
       font-size: var(--tv-Input-small-font-size);
     }
diff --git a/packages/theme/src/locales/index.less b/packages/theme/src/locales/index.less
index 30d9ecd2f..72ed0d374 100644
--- a/packages/theme/src/locales/index.less
+++ b/packages/theme/src/locales/index.less
@@ -11,21 +11,45 @@
 */
 
 @import '../custom.less';
+@import './vars.less';
 
 @locales-prefix-cls: ~'@{css-prefix}locales';
 @popover-prefix-cls: ~'@{css-prefix}popover';
 @popper-prefix-cls: ~'@{css-prefix}popper';
 
 .@{locales-prefix-cls} {
+  .inject-Locales-vars() ;
+
   cursor: pointer;
 
   svg {
-    margin-left: 2px;
+    margin-left: var(--tv-Locales-svg-margin-left);
+  }
+  &__text {
+    font-size: var(--tv-Locales-text-font-size);
+    color: var(--tv-Locales-svg-color);
+    display: inline-flex;
+    align-items: center;
+  }
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+      width: var(--tv-Locales-svg-size);
+      height: var(--tv-Locales-svg-size);;
+      fill: var(--tv-Locales-text-color);
+    }
+    .chevron-up {
+      width: var(--tv-Locales-up-svg-size);
+      height: var(--tv-Locales-up-svg-size);
+    }
   }
 
   &__popper {
+    .inject-Locales-vars() ;
     &.@{popover-prefix-cls}.@{popper-prefix-cls} {
-      padding: 0;
+      padding: var(--tv-Locales-popper-padding-h) 0;
     }
 
     .poplist {
@@ -34,11 +58,11 @@
       li {
         list-style: none;
         cursor: pointer;
-        padding: 0 8px;
-        line-height: 30px;
+        padding: 0 var(--tv-Locales-popper-li-padding-h);
+        line-height: var(--tv-Locales-popper-li-line-heigaht);
 
-        &.selected {
-          background: #f5f5f5;
+        &:hover {
+          background-color: var(--tv-Locales-popper-li-hover-color);
         }
       }
     }
diff --git a/packages/theme/src/locales/vars.less b/packages/theme/src/locales/vars.less
new file mode 100644
index 000000000..7b0e1ad09
--- /dev/null
+++ b/packages/theme/src/locales/vars.less
@@ -0,0 +1,33 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.inject-Locales-vars() {
+  // 图标距离文字间距
+  --tv-Locales-svg-margin-left: var(--tv-space-sm, 4px);
+  // 图标尺寸
+  --tv-Locales-svg-size: var(--tv-font-size-md, 14px);
+  --tv-Locales-up-svg-size: var(--tv-font-size-sm, 12px);
+  // 图标颜色
+  --tv-Locales-svg-color: var(--tv-color-text, #191919);
+  // 文字字号
+  --tv-Locales-text-font-size: var(--tv-font-size-md, 14px);
+  // 文字颜色
+  --tv-Locales-text-color: var(--tv-color-text, #191919);
+  // 弹框间距
+  --tv-Locales-popper-padding-h: var(--tv-space-md, 8px);
+  // 弹框选项间距
+  --tv-Locales-popper-li-padding-h: var(--tv-space-xl, 16px);
+  // 弹框选项行高
+  --tv-Locales-popper-li-line-heigaht: 30px;
+  // 弹框选项悬浮色
+  --tv-Locales-popper-li-hover-color: var(--tv-color-bg-hover, #f5f5f5);
+}
\ No newline at end of file
diff --git a/packages/theme/src/roles/index.less b/packages/theme/src/roles/index.less
index e406ae528..307f8a8d9 100644
--- a/packages/theme/src/roles/index.less
+++ b/packages/theme/src/roles/index.less
@@ -24,7 +24,7 @@
 
   &__selector {
     &.@{css-prefix}popover.@{css-prefix}popper {
-      padding: 0;
+      padding: 8px 0;
     }
   }
 
@@ -57,11 +57,5 @@
       background: var(--tv-Roles-poplist-item-hover-bg-color);
     }
 
-    &.is-selected {
-      &,
-      &:hover {
-        background: var(--tv-Roles-poplist-item-selected-bg-color);
-      }
-    }
   }
 }
diff --git a/packages/theme/src/roles/vars.less b/packages/theme/src/roles/vars.less
index f462f519f..7d0b8a8c8 100644
--- a/packages/theme/src/roles/vars.less
+++ b/packages/theme/src/roles/vars.less
@@ -19,6 +19,4 @@
   --tv-Roles-poplist-item-font-size: var(--tv-font-size-default);
   // 下拉面板选项悬浮背景色
   --tv-Roles-poplist-item-hover-bg-color: var(--tv-color-bg-hover);
-  // 下拉面板选项选中色
-  --tv-Roles-poplist-item-selected-bg-color: var(--tv-color-bg-active);
 }
diff --git a/packages/theme/src/time-range/index.less b/packages/theme/src/time-range/index.less
index b60ca9501..cb0fc7ca0 100644
--- a/packages/theme/src/time-range/index.less
+++ b/packages/theme/src/time-range/index.less
@@ -24,7 +24,6 @@
   &__content {
     position: relative;
     text-align: center;
-    padding: var(--tv-TimeRange-content-padding);
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
@@ -39,31 +38,26 @@
     display: flex;
     justify-content: space-around;
     color: var(--tv-TimeRange-header-text-color);
-    padding: 8px;
-    height: 30px;
+    padding: var(--tv-TimeRange-title-padding);
     align-items: center;
-    line-height: 30px;
   }
 
   &__cell {
-    box-sizing: border-box;
-    margin: 0;
-    padding: var(--tv-TimeRange-cell-padding);
     width: 50%;
+
+    .tiny-time-panel__content {
+      padding-bottom: var(--tv-TimeRange-cell-content-padding-bottom);
+    }
   }
 
   &__header {
     height: var(--tv-TimeRange-header-height);
     color: var(--tv-TimeRange-header-text-color);
     line-height: var(--tv-TimeRange-header-line-height);
-    margin-bottom: var(--tv-TimeRange-header-margin-bottom);
+    padding: var(--tv-TimeRange-header-padding);
     text-align: left;
     font-size: var(--tv-TimeRange-font-size);
-    border-bottom: 1px solid var(--tv-TimeRange-header-border-bottom);
-
-    span {
-      margin-left: var(--tv-TimeRange-header-margin-left);
-    }
+    border-bottom: 1px solid var(--tv-TimeRange-border-color-divider);
   }
 
   &__body {
@@ -73,9 +67,6 @@
   &__footer {
     border-top: 1px solid var(--tv-TimeRange-border-color-divider);
     padding: var(--tv-TimeRange-footer-padding);
-    height: var(--tv-TimeRange-footer-height);
-    box-sizing: border-box;
-    margin-top: 12px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
diff --git a/packages/theme/src/time-range/vars.less b/packages/theme/src/time-range/vars.less
index fa4d9739f..51b53132a 100644
--- a/packages/theme/src/time-range/vars.less
+++ b/packages/theme/src/time-range/vars.less
@@ -19,27 +19,25 @@
   --tv-TimeRange-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
 
   // 单元格内间距
-  --tv-TimeRange-cell-padding: 0px;
-  // 内容区内间距
-  --tv-TimeRange-content-padding: 0px;
+  --tv-TimeRange-cell-content-padding-bottom: var(--tv-space-xl, 16px);
 
   // 头部高度
   --tv-TimeRange-header-height: var(--tv-size-height-xl, 48px);
   // 头部行高
-  --tv-TimeRange-header-line-height: calc(var(--tv-size-height-xl, 48px) - 2px);
-  // 头部底部外间距
-  --tv-TimeRange-header-margin-bottom: 0px;
+  --tv-TimeRange-header-line-height: var(--tv-TimeRange-header-height, 48px);
+
   // 头部文本色
   --tv-TimeRange-header-text-color: var(--tv-color-text-weaken, #808080);
-  // 头部右侧外间距
-  --tv-TimeRange-header-margin-left: var(--tv-space-xl, 16px);
+  // 头部内间距
+  --tv-TimeRange-header-padding: 0 var(--tv-space-xl, 16px);
+  // 标题内间距
+  --tv-TimeRange-title-padding: var(--tv-space-lg, 12px) var(--tv-space-md, 8px) var(--tv-space-md, 8px)
+    var(--tv-space-md, 8px);
 
-  // 底部高度
-  --tv-TimeRange-footer-height: 56px;
   // 底部内间距
-  --tv-TimeRange-footer-padding: var(--tv-space-xl, 16px) var(--tv-space-xl, 16px) 0 0;
+  --tv-TimeRange-footer-padding: var(--tv-space-xl, 16px);
 
-  //按钮内间距
+  // 按钮内间距
   --tv-TimeRange-btn-padding: 0 var(--tv-space-sm, 4px);
   // 按钮高度
   --tv-TimeRange-btn-height: var(--tv-size-height-sm, 28px);
diff --git a/packages/vue/src/drawer/package.json b/packages/vue/src/drawer/package.json
index 0f4db607b..6617bd1d2 100644
--- a/packages/vue/src/drawer/package.json
+++ b/packages/vue/src/drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-drawer",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/drawer/src/index.ts b/packages/vue/src/drawer/src/index.ts
index 7f675438f..f1c5843cf 100644
--- a/packages/vue/src/drawer/src/index.ts
+++ b/packages/vue/src/drawer/src/index.ts
@@ -10,7 +10,7 @@ export const $constants = {
     return (scrollLockClasses[mode] || '') as string
   },
   DEFAULT_WIDTH: '500px',
-  DEFAULT_HEIGHT: '500px'
+  DEFAULT_HEIGHT: '100vh'
 }
 
 export const drawerProps = {
diff --git a/packages/vue/src/drawer/src/pc.vue b/packages/vue/src/drawer/src/pc.vue
index f930d2b8a..7b29a5f53 100644
--- a/packages/vue/src/drawer/src/pc.vue
+++ b/packages/vue/src/drawer/src/pc.vue
@@ -31,7 +31,7 @@
         ]"
         :style="{
           width: ['left', 'right'].includes(placement) ? state.computedWidth : null,
-          height: ['top', 'bottom'].includes(placement) || dragable ? state.computedHeight : null,
+          height: ['top', 'bottom', 'left', 'right'].includes(placement) || dragable ? state.computedHeight : null,
           zIndex
         }"
         v-show="state.visible"
diff --git a/packages/vue/src/locales/package.json b/packages/vue/src/locales/package.json
index 0204fadde..1923c6f57 100644
--- a/packages/vue/src/locales/package.json
+++ b/packages/vue/src/locales/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-locales",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/locales/src/pc.vue b/packages/vue/src/locales/src/pc.vue
index b2f14b8d9..f7bc492e7 100644
--- a/packages/vue/src/locales/src/pc.vue
+++ b/packages/vue/src/locales/src/pc.vue
@@ -13,12 +13,13 @@
       :append-to-body="popperAppendToBody"
     >
       <template #reference>
-        <span
-          >{{ state.text && t(state.text)
-          }}<span>
+        <span class="tiny-locales__text">
+          {{ state.text && t(state.text) }}
+          <span class="tiny-locales__icon">
             <IconChevronDown v-show="!state.visible" />
-            <IconChevronUp v-show="state.visible" /> </span
-        ></span>
+            <IconChevronUp class="chevron-up" v-show="state.visible" />
+          </span>
+        </span>
       </template>
       <div class="poplist">
         <li
diff --git a/packages/vue/src/tree/package.json b/packages/vue/src/tree/package.json
index ff587d9f0..657c72576 100644
--- a/packages/vue/src/tree/package.json
+++ b/packages/vue/src/tree/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@opentiny/vue-tree",
   "type": "module",
-  "version": "3.19.0",
+  "version": "3.19.2",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
diff --git a/packages/vue/src/tree/src/tree-node.vue b/packages/vue/src/tree/src/tree-node.vue
index 150a91dad..cc4da6bea 100644
--- a/packages/vue/src/tree/src/tree-node.vue
+++ b/packages/vue/src/tree/src/tree-node.vue
@@ -47,6 +47,7 @@
     >
       <!-- 当前节点的行： 缩进块+left(箭头图标+单多选钮+loading+prefix+label+suffix)+right(finish图标+operation+编辑按钮) -->
       <div
+        ref="content"
         :class="{
           'tiny-tree-node__content': true,
           'tiny-tree-node__content-number': showNumber
diff --git a/packages/vue/src/virtual-scroll-box/package.json b/packages/vue/src/virtual-scroll-box/package.json
index 24b18830d..2628e9367 100644
--- a/packages/vue/src/virtual-scroll-box/package.json
+++ b/packages/vue/src/virtual-scroll-box/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-virtual-scroll-box",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/virtual-scroll-box/src/pc.vue b/packages/vue/src/virtual-scroll-box/src/pc.vue
index 03cf293fb..a51818bd1 100644
--- a/packages/vue/src/virtual-scroll-box/src/pc.vue
+++ b/packages/vue/src/virtual-scroll-box/src/pc.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="aui-virtual-scroll-box" :style="state.ctx.boxStyle" @scroll="onScroll">
-    <div class="aui-virtual-scroll-box__x-axis" :style="state.ctx.xAxisStyle"></div>
-    <div class="aui-virtual-scroll-box__y-axis" :style="state.ctx.yAxisStyle"></div>
-    <div class="aui-virtual-scroll-box__view" :style="state.ctx.viewStyle">
+  <div class="tiny-virtual-scroll-box" :style="state.ctx.boxStyle" @scroll="onScroll">
+    <div class="tiny-virtual-scroll-box__x-axis" :style="state.ctx.xAxisStyle"></div>
+    <div class="tiny-virtual-scroll-box__y-axis" :style="state.ctx.yAxisStyle"></div>
+    <div class="tiny-virtual-scroll-box__view" :style="state.ctx.viewStyle">
       <slot :params="state.slotParams"></slot>
     </div>
   </div>
diff --git a/packages/vue/src/virtual-tree/package.json b/packages/vue/src/virtual-tree/package.json
index 7a07b3271..72e280a56 100644
--- a/packages/vue/src/virtual-tree/package.json
+++ b/packages/vue/src/virtual-tree/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-virtual-tree",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/virtual-tree/src/pc.vue b/packages/vue/src/virtual-tree/src/pc.vue
index 76703c115..78ce37563 100644
--- a/packages/vue/src/virtual-tree/src/pc.vue
+++ b/packages/vue/src/virtual-tree/src/pc.vue
@@ -1,6 +1,6 @@
 <template>
-  <aui-virtual-scroll-box ref="vsBox" class="aui-virtual-tree" v-bind="state.vsBoxOptions" @change="onVsBoxChange">
-    <aui-tree
+  <tiny-virtual-scroll-box ref="vsBox" class="tiny-virtual-tree" v-bind="state.vsBoxOptions" @change="onVsBoxChange">
+    <tiny-tree
       ref="tree"
       v-bind="state.treeOptions"
       v-on="state.treeEvents"
@@ -32,8 +32,8 @@
       <template v-if="slots.operation" #operation="params">
         <slot name="operation" v-bind="params"></slot>
       </template>
-    </aui-tree>
-  </aui-virtual-scroll-box>
+    </tiny-tree>
+  </tiny-virtual-scroll-box>
 </template>
 
 <script lang="ts">
@@ -46,8 +46,8 @@ export default defineComponent({
   inheritAttrs: false,
   props: [...props, 'width', 'height', 'rowHeight', 'scrollbarSize', 'treeOp'],
   components: {
-    AuiVirtualScrollBox: VirtualScrollBox,
-    AuiTree: Tree
+    TinyVirtualScrollBox: VirtualScrollBox,
+    TinyTree: Tree
   },
   setup(props, context): any {
     return setup({ props, context, renderless, api })