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 c14d9538cc..7341e553db 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 20aa9c4838..607cd65a8f 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 d4bb2674f2..742bd3ac7d 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 bd38214961..165353a0b6 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 0086c56cce..396ffa0a29 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 f718b0c7c9..3e1e57e3c4 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 a659d5f1c6..1e79570172 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 3ccc160de4..786609b3bb 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 d8fff6e219..f1ba8eafbf 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 80beadaf83..4040ab7f6d 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 d52056a7f0..6c7d991fc0 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 12723c81ff..1dbcf389c0 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 f1dfc8cd61..ed52524e48 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 209c5e1f89..9fd8980afc 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 df26f051ad..cd95f9604f 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 5c375816d3..0e44950bf2 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 1ba408c9b2..1014ab58a6 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 6dda7eac20..3ef96825e5 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 d5e58c80aa..7fe06ea210 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 c26b9ac6ca..7abc90ad75 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 69728f5190..fc57ed465d 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 9a3627723f..93367fad1c 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 16ed0c54ac..aefa0d5b27 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 5aa622e785..72d3e13b78 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 e3cfd60133..7c73a9f281 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 46b9e1c312..e827de75f8 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 b999aefe6b..1e0863e330 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 2b59e4f016..b5f4b7d66a 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 9669cbfeb7..97f5382ec3 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 d32b65a939..28974cae43 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 12acde8c21..e7d1ed351b 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 92b18ed02b..1784fd4f78 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 625ea9e814..d385d3d2e8 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 4ce732f5a6..c73caa050a 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 820323b1a7..4f5d921d49 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 d5817da786..cf1f85b9a2 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 c335056b6a..ff898e59f0 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 57d5496190..03aafa542f 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 f6973ca255..53f97bf994 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 c7dba8ca25..706bca1d4d 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 a5a349e1f7..b83076c764 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 6bcfd83411..5489c5d206 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 d6f1039d68..6d69f75e97 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 c0eb903306..ae749a8b32 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 64d37754c2..9a4e669403 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 b5bbaa9f9e..5d942c00aa 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 9513402b79..03c5772866 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 d3a041aac7..ec58bcde04 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 46ef045129..7986595872 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 656bbf7fb9..e5d5916fff 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 824465fa07..164aa3552c 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 f7902dd25f..1349d0fddc 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 906037a8b9..2174e2412a 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 1b10012fea..0aa18e1259 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 a5657fdaad..d35d206705 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 166b3195a8..26785bbb69 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 ee6a8eb648..d5619933f0 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 a7be07a6b6..ba18252eca 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 a226e91d24..cb5c430020 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/drop-roles/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/drop-roles/basic-usage-composition-api.vue
index a2549db259..ff86ad3b40 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 ca10a038f9..57180551e3 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 9ef43f2cc3..ad499918f0 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 444df1a4fd..864ee69acc 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 d75ef47502..7527556977 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 659a7401d4..f99405dfb0 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 da3366d2a6..4d2de13d44 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 e508fcc744..2cf758fa54 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/hrapprover/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/hrapprover/basic-usage-composition-api.vue
index 1ddf9ae386..58532d8fd0 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,11 @@
 <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"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -9,3 +15,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 b2f175ba23..742f7b29db 100644
--- a/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
+++ b/examples/sites/demos/pc/app/hrapprover/basic-usage.vue
@@ -1,5 +1,11 @@
 <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"
+      :approval-person="person"
+      @update:approvalPerson="person = $event"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -17,3 +23,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 eee307097e..a5b8f8dc43 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,12 @@
 <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"
+      category="0506"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -14,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/category-type.vue b/examples/sites/demos/pc/app/hrapprover/category-type.vue
index 519d8f551c..cb77bc73a2 100644
--- a/examples/sites/demos/pc/app/hrapprover/category-type.vue
+++ b/examples/sites/demos/pc/app/hrapprover/category-type.vue
@@ -1,10 +1,12 @@
 <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"
+      category="0506"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -22,3 +24,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 95b1038b64..c02960bcbf 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,13 @@
 <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"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -39,3 +41,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 7fee9fc014..00ff863e7c 100644
--- a/examples/sites/demos/pc/app/hrapprover/custom-service.vue
+++ b/examples/sites/demos/pc/app/hrapprover/custom-service.vue
@@ -1,11 +1,13 @@
 <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"
+    ></tiny-hrapprover>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -48,3 +50,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 c8d417a78f..5af30bd1fe 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-hrapprover-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <tiny-hrapprover
       :value="value"
@@ -22,3 +22,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 571ab7b713..eb716e0ec3 100644
--- a/examples/sites/demos/pc/app/hrapprover/disabled.vue
+++ b/examples/sites/demos/pc/app/hrapprover/disabled.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-hrapprover-class">
     <tiny-button @click="Switchover" style="margin-bottom: 10px">启用/禁用</tiny-button>
     <tiny-hrapprover
       :value="value"
@@ -32,3 +32,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 63aadc1255..ac58c4c837 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 5385406812..15c760d3dd 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 7a90b309ac..7e0853d3b2 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/user/allow-copy-composition-api.vue b/examples/sites/demos/pc/app/user/allow-copy-composition-api.vue
index 0fb43a9ad3..fd2e75c418 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 d98e6fdb67..48c13925d7 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 5f0daa3088..b28d5d5409 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 336a058a55..a1889135d5 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 d5bf50ef2b..e0f49b7a89 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 fb5571c073..76ee2d437d 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 58914a6bf6..068924272d 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 f43f1dee77..4004ced903 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 82c88fd426..a80e429be1 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 b26189c8dd..71f3f617df 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 2e4e7b99d3..6698085f27 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 cc0229adbf..429656f02e 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 15d265f6f0..9a986cc57b 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 f4d4868165..353da0fd58 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 e9ace8d12b..2f3b2974ff 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 d17cd15579..e1a99f5e25 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 6fc8a48066..3278b94a40 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 4d04bc1362..ddcf638d6d 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 bfff1be056..0f66501f6c 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 1d5ea345ac..3a02d236f8 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 8883e33127..b01afcb05d 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 d9e98d4032..5d2ed3d247 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 5b3082ad79..9c980fffb9 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 79f8a89624..b536c60f24 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 89f817cfbe..32ce256cd4 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 7bd601cc84..a2eccdadcd 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 b18e0666ae..c6587a99af 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 1fd9fb9db5..2e9a5c68a9 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 7db1f0165d..853ef79b34 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 30ea8612f7..1aa8d9b5db 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 22234993df..7276a91e20 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 1c2316ef0c..1ae5e23a82 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 048eb5b22d..d943e6ecbb 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 e1082fa25b..a90ee31a98 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 23cf50e592..4feb0bf690 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 4bd20d0f72..d3a2ce6e5f 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 4bd20d0f72..d3a2ce6e5f 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 6afe3e1b62..330d2364ff 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 5ee19ebddc..f82194807f 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 f09ebde07c..1b7b8ac5e5 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 d5e307c342..7774df4d89 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 19c901b408..03bf8d9204 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 a40302d006..efeca56dfb 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 0c7b4fde69..43389b36a7 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 e2ffb500c9..f63f28a912 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 2f20fc8b8a..316229f9e7 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 4b553e6b5b..fa87f2b993 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 49484ca309..9d316a2ba7 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 ae136a08d1..9dda9819cf 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 b41a91226f..ffdefa1167 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 f1e4561124..6f21ad44af 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 e385125d6e..40d4fe4d25 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 301995acad..1ae3639008 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 160850e325..6058e8503c 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 fcd9044173..5543046a51 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 c298049463..ad0004f141 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/packages/theme/src/area/index.less b/packages/theme/src/area/index.less
index 26acbde97b..104901246f 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 0000000000..296c2182f2
--- /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/locales/index.less b/packages/theme/src/locales/index.less
index 30d9ecd2f9..72ed0d374c 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 0000000000..7b0e1ad09f
--- /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/vue/src/locales/package.json b/packages/vue/src/locales/package.json
index 0204fadde9..1923c6f574 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 b2f14b8d9a..f7bc492e7a 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