feat(projects): import i18n [引入i18n]

package.json

@@ -77,6 +77,7 @@
     "ua-parser-js": "^1.0.2",
     "vditor": "^3.8.17",
     "vue": "3.2.40",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.5",
     "vuedraggable": "^4.1.0",
     "wangeditor": "^4.7.15",

pnpm-lock.yaml

@@ -64,6 +64,7 @@ specifiers:
   vite-plugin-pwa: ^0.13.1
   vite-plugin-svg-icons: ^2.0.1
   vue: 3.2.40
+  vue-i18n: ^9.2.2
   vue-router: ^4.1.5
   vue-tsc: ^1.0.2
   vuedraggable: ^4.1.0
@@ -93,6 +94,7 @@ dependencies:
   ua-parser-js: 1.0.2
   vditor: 3.8.17
   vue: 3.2.40
+  vue-i18n: 9.2.2_vue@3.2.40
   vue-router: 4.1.5_vue@3.2.40
   vuedraggable: 4.1.0_vue@3.2.40
   wangeditor: 4.7.15
@@ -1847,6 +1849,44 @@ packages:
       vue: 3.2.40
     dev: true
 
+  /@intlify/core-base/9.2.2:
+    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/devtools-if': 9.2.2
+      '@intlify/message-compiler': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+    dev: false
+
+  /@intlify/devtools-if/9.2.2:
+    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+    dev: false
+
+  /@intlify/message-compiler/9.2.2:
+    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+      source-map: 0.6.1
+    dev: false
+
+  /@intlify/shared/9.2.2:
+    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    engines: {node: '>= 14'}
+    dev: false
+
+  /@intlify/vue-devtools/9.2.2:
+    resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+    dev: false
+
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}
@@ -10232,6 +10272,19 @@ packages:
       - supports-color
     dev: true
 
+  /vue-i18n/9.2.2_vue@3.2.40:
+    resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+      '@vue/devtools-api': 6.4.4
+      vue: 3.2.40
+    dev: false
+
   /vue-router/4.1.5_vue@3.2.40:
     resolution: {integrity: sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==}
     peerDependencies:

src/layouts/common/GlobalLogo/index.vue

@@ -1,15 +1,19 @@
 <template>
   <router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
     <system-logo class="text-32px text-primary" />
-    <h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
+    <h2
-      {{ title }}
+      v-show="showTitle"
+      class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out"
+      @click="toggleLocal"
+    >
+      {{ t('message.system.title') }}
     </h2>
   </router-link>
 </template>
 
 <script setup lang="ts">
 import { routePath } from '@/router';
-import { useAppInfo } from '@/composables';
+import { t, setLocale } from '@/locales';
 
 defineOptions({ name: 'GlobalLogo' });
 
@@ -20,8 +24,13 @@ interface Props {
 
 defineProps<Props>();
 
-const { title } = useAppInfo();
 const routeHomePath = routePath('root');
+
+let flag = true;
+function toggleLocal() {
+  flag = !flag;
+  setLocale(flag ? 'en' : 'zh-CN');
+}
 </script>
 
 <style scoped></style>

src/locales/i18n.ts

@@ -0,0 +1,22 @@
+import type { App } from 'vue';
+import { createI18n } from 'vue-i18n';
+import messages from './lang';
+import type { LocaleKey } from './lang';
+
+const i18n = createI18n({
+  locale: 'zh-CN',
+  fallbackLocale: 'en',
+  messages
+});
+
+export function setupI18n(app: App) {
+  app.use(i18n);
+}
+
+export function t(key: string) {
+  return i18n.global.t(key);
+}
+
+export function setLocale(locale: LocaleKey) {
+  i18n.global.locale = locale;
+}

src/locales/index.ts

@@ -0,0 +1 @@
+export * from './i18n';

src/locales/lang/en.ts

@@ -0,0 +1,21 @@
+import type { LocaleMessages } from 'vue-i18n';
+
+const locale: LocaleMessages<I18nType.Schema> = {
+  message: {
+    system: {
+      title: 'SoybeanAdmin'
+    },
+    routes: {
+      dashboard: {
+        dashboard: 'Dashboard',
+        analysis: 'Analysis',
+        workbench: 'Workbench'
+      },
+      about: {
+        about: 'About'
+      }
+    }
+  }
+};
+
+export default locale;

src/locales/lang/index.ts

@@ -0,0 +1,11 @@
+import zhCN from './zh-cn';
+import en from './en';
+
+const locales = {
+  'zh-CN': zhCN,
+  en
+};
+
+export type LocaleKey = keyof typeof locales;
+
+export default locales;

src/locales/lang/zh-cn.ts

@@ -0,0 +1,21 @@
+import type { LocaleMessages } from 'vue-i18n';
+
+const locale: LocaleMessages<I18nType.Schema> = {
+  message: {
+    system: {
+      title: 'Soybean管理系统'
+    },
+    routes: {
+      dashboard: {
+        dashboard: '仪表盘',
+        analysis: '分析页',
+        workbench: '工作台'
+      },
+      about: {
+        about: '关于'
+      }
+    }
+  }
+};
+
+export default locale;

src/main.ts

@@ -4,6 +4,7 @@ import { setupDirectives } from './directives';
 import { setupRouter } from './router';
 import { setupAssets } from './plugins';
 import { setupStore } from './store';
+import { setupI18n } from './locales';
 
 async function setupApp() {
   // import assets: js、css
@@ -20,6 +21,8 @@ async function setupApp() {
   // vue router
   await setupRouter(app);
 
+  setupI18n(app);
+
   // mount app
   app.mount('#app');
 }

src/typings/system.d.ts

@@ -329,3 +329,21 @@ declare namespace Message {
     tagProps?: import('naive-ui').TagProps;
   }
 }
+
+declare namespace I18nType {
+  interface Schema {
+    system: {
+      title: string;
+    };
+    routes: {
+      dashboard: {
+        dashboard: string;
+        analysis: string;
+        workbench: string;
+      };
+      about: {
+        about: string;
+      };
+    };
+  }
+}