From b632b7ffed5c6d6ec15c23c8cce030bf669c554f Mon Sep 17 00:00:00 2001 From: Soybean Date: Wed, 12 Oct 2022 01:03:14 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20import=20i18n=20[=E5=BC=95?= =?UTF-8?q?=E5=85=A5i18n]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 53 +++++++++++++++++++++++++ src/layouts/common/GlobalLogo/index.vue | 17 ++++++-- src/locales/i18n.ts | 22 ++++++++++ src/locales/index.ts | 1 + src/locales/lang/en.ts | 21 ++++++++++ src/locales/lang/index.ts | 11 +++++ src/locales/lang/zh-cn.ts | 21 ++++++++++ src/main.ts | 3 ++ src/typings/system.d.ts | 18 +++++++++ 10 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 src/locales/i18n.ts create mode 100644 src/locales/index.ts create mode 100644 src/locales/lang/en.ts create mode 100644 src/locales/lang/index.ts create mode 100644 src/locales/lang/zh-cn.ts diff --git a/package.json b/package.json index f2a965e1..884ec49f 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 56573c65..68857092 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/layouts/common/GlobalLogo/index.vue b/src/layouts/common/GlobalLogo/index.vue index 8861fbf7..a5a25b29 100644 --- a/src/layouts/common/GlobalLogo/index.vue +++ b/src/layouts/common/GlobalLogo/index.vue @@ -1,15 +1,19 @@ diff --git a/src/locales/i18n.ts b/src/locales/i18n.ts new file mode 100644 index 00000000..47aec8a9 --- /dev/null +++ b/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; +} diff --git a/src/locales/index.ts b/src/locales/index.ts new file mode 100644 index 00000000..e82230f1 --- /dev/null +++ b/src/locales/index.ts @@ -0,0 +1 @@ +export * from './i18n'; diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts new file mode 100644 index 00000000..c285cc7b --- /dev/null +++ b/src/locales/lang/en.ts @@ -0,0 +1,21 @@ +import type { LocaleMessages } from 'vue-i18n'; + +const locale: LocaleMessages = { + message: { + system: { + title: 'SoybeanAdmin' + }, + routes: { + dashboard: { + dashboard: 'Dashboard', + analysis: 'Analysis', + workbench: 'Workbench' + }, + about: { + about: 'About' + } + } + } +}; + +export default locale; diff --git a/src/locales/lang/index.ts b/src/locales/lang/index.ts new file mode 100644 index 00000000..baf3eb71 --- /dev/null +++ b/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; diff --git a/src/locales/lang/zh-cn.ts b/src/locales/lang/zh-cn.ts new file mode 100644 index 00000000..30956e46 --- /dev/null +++ b/src/locales/lang/zh-cn.ts @@ -0,0 +1,21 @@ +import type { LocaleMessages } from 'vue-i18n'; + +const locale: LocaleMessages = { + message: { + system: { + title: 'Soybean管理系统' + }, + routes: { + dashboard: { + dashboard: '仪表盘', + analysis: '分析页', + workbench: '工作台' + }, + about: { + about: '关于' + } + } + } +}; + +export default locale; diff --git a/src/main.ts b/src/main.ts index 918fc306..6a81dfb8 100644 --- a/src/main.ts +++ b/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'); } diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts index 60278a82..65a723d2 100644 --- a/src/typings/system.d.ts +++ b/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; + }; + }; + } +}