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

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">
-      {{ title }}
+    <h2
+      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;
+      };
+    };
+  }
+}