feat: 国际化规范重构

config/index.ts

@@ -4,7 +4,7 @@ import svgLoader from 'vite-svg-loader';
 import type { PluginOption } from 'vite';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import removeConsole from 'vite-plugin-remove-console';
-import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import i18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import configCompressPlugin from './plugin/compress';
 import configVisualizerPlugin from './plugin/visualizer';
 import autoImportPlugin from './plugin/autoImport';
@@ -13,12 +13,11 @@ export function pluginsList(): PluginOption[] {
   return [
     vue(),
     autoImportPlugin(),
-    VueI18nPlugin({
-      runtimeOnly: true,
-      compositionOnly: true,
-      include: [resolve('locales/**')]
-    }),
     vueJsx(), // jsx支持
+    i18nPlugin({
+      jitCompilation: false,
+      include: [resolve('./src/locale/*.yaml')]
+    }),
     removeConsole(), // 移除console
     svgLoader({ svgoConfig: {} }), // svg组件化支持
     configCompressPlugin('gzip'), // 压缩

src/components/message-box/index.vue

@@ -6,7 +6,7 @@
           <span>{{ item.title }}{{ formatUnreadLength(item.key) }}</span>
         </template>
         <a-result v-if="!renderList.length" status="404">
-          <template #subtitle>{{ $t('messageBox.noContent') }}</template>
+          <template #subtitle>暂无内容</template>
         </a-result>
         <List
           :render-list="renderList"
@@ -16,7 +16,7 @@
       </a-tab-pane>
       <template #extra>
         <a-button type="text" @click="emptyList">
-          {{ $t('messageBox.tab.button') }}
+          {{ $t('common.clear') }}
         </a-button>
       </template>
     </a-tabs>
@@ -54,15 +54,15 @@ toRefs(messageData);
 const tabList: TabItem[] = [
   {
     key: 'message',
-    title: t('messageBox.tab.title.message')
+    title: '消息'
   },
   {
     key: 'notice',
-    title: t('messageBox.tab.title.notice')
+    title: '通知'
   },
   {
     key: 'todo',
-    title: t('messageBox.tab.title.todo')
+    title: '待办'
   }
 ];
 async function fetchSourceData() {

src/components/message-box/list.vue

@@ -57,10 +57,10 @@
         :class="{ 'add-border-top': renderList.length < showMax }"
       >
         <div class="footer-wrap">
-          <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
+          <a-link @click="allRead">全部已读</a-link>
         </div>
         <div class="footer-wrap">
-          <a-link>{{ $t('messageBox.viewMore') }}</a-link>
+          <a-link>查看更多</a-link>
         </div>
       </a-space>
     </template>

src/components/navbar/index.vue

@@ -67,8 +67,8 @@
         <a-tooltip
           :content="
             theme === 'light'
-              ? $t('settings.navbar.theme.toDark')
-              : $t('settings.navbar.theme.toLight')
+              ? $t('settings.themeToDark')
+              : $t('settings.themeToLight')
           "
         >
           <div class="nav-btn" @click="handleToggleTheme">
@@ -78,7 +78,7 @@
         </a-tooltip>
       </li>
       <li>
-        <a-tooltip :content="$t('settings.navbar.alerts')">
+        <a-tooltip :content="$t('settings.alerts')">
           <a-badge :count="9">
             <div class="nav-btn" @click="setPopoverVisible">
               <icon-notification />
@@ -101,8 +101,8 @@
         <a-tooltip
           :content="
             isFullscreen
-              ? $t('settings.navbar.screen.toExit')
-              : $t('settings.navbar.screen.toFull')
+              ? $t('settings.screenToExit')
+              : $t('settings.screenToFull')
           "
         >
           <div class="nav-btn" @click="toggleFullScreen">
@@ -168,7 +168,6 @@ import { computed, ref, inject } from 'vue';
 import { Message } from '@arco-design/web-vue';
 import { useDark, useToggle, useFullscreen } from '@vueuse/core';
 import { useAppStore, useUserStore } from '@/store';
-import { LOCALE_OPTIONS } from '@/locale';
 import useLocale from '@/hooks/useLocale';
 import useUser from '@/hooks/useUser';
 import Menu from '@/components/menu/index.vue';
@@ -180,7 +179,10 @@ const userStore = useUserStore();
 const { logout } = useUser();
 const { changeLocale, currentLocale } = useLocale();
 const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
-const locales = [...LOCALE_OPTIONS];
+const locales = [
+  { label: '中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' }
+];
 const theme = computed(() => {
   return appStore.theme;
 });

src/locale/en-US.yaml

@@ -0,0 +1,72 @@
+common:
+  clear: Clear
+  login: Log in
+  register: register
+login:
+  accountLogin: Account login
+  agreement: I have read and agree
+  agreementAnd: and
+  agreementTips: Please read and agree to the Service Agreement and Privacy Policy
+  captchaMsg: Please enter the correct verification code
+  captchaPlaceholder: please enter verification code
+  captchaResend: Reacquire
+  captchaSend: get verification code
+  loginSuccess: login successful
+  mobileLogin: Mobile phone number login
+  more: More ways
+  passwordPlaceholder: Please enter password
+  phonePlaceholder: Please enter phone number
+  privacyPolicy: Privacy Policy
+  remember: Remember password
+  serviceAgreement: Service Agreement
+  title: Login please
+  unamePlaceholder: Account/email
+  usernameMsg: Please enter the correct account number
+menu:
+  cardList: card list
+  exception: Exception page
+  exception403: '403'
+  exception404: '404'
+  exception500: '500'
+  form: form page
+  formGroup: group form
+  formStep: step by step form
+  list: List
+  profile: Details page
+  profileBasic: Basic details page
+  result: Results page
+  resultError: failure page
+  resultSuccess: success page
+  searchTable: Inquiry form
+  user: Personal Center
+  userInfo: user settings
+  userSetting: user settings
+  workplace: workbench
+messageBox:
+  logout: sign out
+  switchRoles: Switch roles
+  userCenter: User Center
+  userSettings: user settings
+settings:
+  alertContent: >-
+    After configuration, it will only take effect temporarily. To actually
+    affect the project, click the "Copy Configuration" button below and replace
+    the configuration into settings.json.
+  alerts: notification
+  colorWeak: model
+  copySettings: Copy configuration
+  footer: bottom
+  language: language
+  menu: Menu Bar
+  menuWidth: Menu width (px)
+  navbar: Navigation Bar
+  otherSettings: other settings
+  reload: Reload
+  screenToExit: Exit Full Screen
+  screenToFull: full screen
+  source: Source code address
+  tabBar: Multiple tabs
+  themeToDark: Click to switch to dark mode
+  themeToLight: Click to switch to light mode
+  title: Application configuration
+  topMenu: top menu bar

src/locale/index.ts

@@ -1,22 +1,26 @@
 import { createI18n } from 'vue-i18n';
-import en from './en-US/index.json';
-import cn from './zh-CN/index.json';
 
-export const LOCALE_OPTIONS = [
-  { label: '中文', value: 'zh-CN' },
-  { label: 'English', value: 'en-US' }
-];
 const defaultLocale = localStorage.getItem('arco-locale') || 'zh-CN';
 
+const autoImportLocale = () => {
+  let locale = Object.fromEntries(
+    Object.entries(import.meta.glob('./*.y(a)?ml', { eager: true })).map(
+      ([key, value]: any) => {
+        const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1];
+        return [matched, value.default];
+      }
+    )
+  );
+  return locale;
+};
+
+const messages = autoImportLocale();
+
 const i18n = createI18n({
   locale: defaultLocale,
   fallbackLocale: 'en-US',
   legacy: false,
-  allowComposition: true,
-  messages: {
-    'en-US': en,
-    'zh-CN': cn
-  }
+  messages
 });
 
 export default i18n;