feat(locales): [locales] Optimize the style and demo

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">

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">

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,

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('牙买加办事处')

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,

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;

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;

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>

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>

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>

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>

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;

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;

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>

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>

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>

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>

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;

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;

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>