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

Author: Youyou-smiles

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/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`)

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)

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`)

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);;
   }
 }

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);
+}