From 6ba10b1a2fe07b6f885ec751883ecb4bd8ca6216 Mon Sep 17 00:00:00 2001 From: wang_fan_w <2547096351@qq.com> Date: Sat, 27 Apr 2024 19:18:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BD=E9=99=85=E5=8C=96i18n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 44 +++++++++++++++++-- src/assets/icons/earth.svg | 1 + src/components/lang-provider/index.vue | 10 +++-- src/lang/index.ts | 22 ++++++++++ src/lang/modules/enUS.ts | 33 ++++++++++++++ src/lang/modules/zhCN.ts | 33 ++++++++++++++ .../Header/components/Breadcrumb/index.vue | 4 +- src/layout/components/Header/index.vue | 24 ++++++++-- src/layout/components/Main/index.vue | 4 +- src/layout/components/Menu/menu-item.vue | 4 +- src/layout/components/Tabs/index.vue | 19 +++++--- src/layout/index.vue | 4 +- src/main.ts | 4 +- src/router/route.ts | 25 ++++++++--- src/store/theme-config.ts | 10 ++++- src/store/user-info.ts | 3 +- src/utils/index.ts | 12 +++++ .../form-component/form-component.vue | 2 +- .../internationalization.vue | 10 +++++ .../second-menu/second-menu-1.vue | 2 +- .../third-menu/third-menu-1.vue | 2 +- .../third-menu/third-menu-2.vue | 2 +- 23 files changed, 235 insertions(+), 40 deletions(-) create mode 100644 src/assets/icons/earth.svg create mode 100644 src/lang/index.ts create mode 100644 src/lang/modules/enUS.ts create mode 100644 src/lang/modules/zhCN.ts create mode 100644 src/views/internationalization/internationalization.vue diff --git a/package.json b/package.json index 4c09caa..525ff8f 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "pinia": "^2.1.7", "pinia-plugin-persist": "^1.0.0", "vue": "^3.4.21", + "vue-i18n": "10.0.0-alpha.2", "vue-router": "^4.3.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b894fe5..d6cbe80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: dc-admin: specifier: 'link:' @@ -16,6 +20,9 @@ dependencies: vue: specifier: ^3.4.21 version: 3.4.21(typescript@5.4.3) + vue-i18n: + specifier: 10.0.0-alpha.2 + version: 10.0.0-alpha.2(vue@3.4.21) vue-router: specifier: ^4.3.0 version: 4.3.0(vue@3.4.21) @@ -1119,6 +1126,27 @@ packages: resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==} dev: true + /@intlify/core-base@10.0.0-alpha.2: + resolution: {integrity: sha512-bT+RwQtJ2BOwpt/lLlDtJM8+lfNG9TdWWGRYphDsV8123SiGb4Qm6iEjBN3/RKC/9hX+EHl2ENslURfioov3dQ==} + engines: {node: '>= 16'} + dependencies: + '@intlify/message-compiler': 10.0.0-alpha.2 + '@intlify/shared': 10.0.0-alpha.2 + dev: false + + /@intlify/message-compiler@10.0.0-alpha.2: + resolution: {integrity: sha512-OGwttsMwB2BUzhZLraoAfAqcza5UyLMEU013ort3LbmdE6ke/pFONFyxjNQdmFWzW2K868AIVgwx4zo8lbmhjg==} + engines: {node: '>= 16'} + dependencies: + '@intlify/shared': 10.0.0-alpha.2 + source-map-js: 1.2.0 + dev: false + + /@intlify/shared@10.0.0-alpha.2: + resolution: {integrity: sha512-pWlpsC3IqkDuIH/5bNlyyiUbAXYymeNXkznORzPWT3qpAe8MazPOm14wMHGn/wESCdB5b9txQson4+CH0ym1hQ==} + engines: {node: '>= 16'} + dev: false + /@jridgewell/gen-mapping@0.3.5: resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} engines: {node: '>=6.0.0'} @@ -5161,6 +5189,18 @@ packages: - supports-color dev: true + /vue-i18n@10.0.0-alpha.2(vue@3.4.21): + resolution: {integrity: sha512-wP3+3k0TbdqvYDUn5lS5v7dtAsX0lP9J+CRcoP7mTQXsmkGurfruyd0rvw+DBnW+mULsoP/oygtj75HZFPp6YQ==} + engines: {node: '>= 16'} + peerDependencies: + vue: ^3.0.0 + dependencies: + '@intlify/core-base': 10.0.0-alpha.2 + '@intlify/shared': 10.0.0-alpha.2 + '@vue/devtools-api': 6.6.1 + vue: 3.4.21(typescript@5.4.3) + dev: false + /vue-router@4.3.0(vue@3.4.21): resolution: {integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==} peerDependencies: @@ -5289,7 +5329,3 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} dev: true - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false diff --git a/src/assets/icons/earth.svg b/src/assets/icons/earth.svg new file mode 100644 index 0000000..b3de0e2 --- /dev/null +++ b/src/assets/icons/earth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/lang-provider/index.vue b/src/components/lang-provider/index.vue index d62ac81..6fca0fc 100644 --- a/src/components/lang-provider/index.vue +++ b/src/components/lang-provider/index.vue @@ -1,6 +1,6 @@ diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue index ca0a3a4..9f82f1b 100644 --- a/src/layout/components/Tabs/index.vue +++ b/src/layout/components/Tabs/index.vue @@ -9,7 +9,12 @@ @tab-click="onTabs" @delete="onDelete" > - +
@@ -17,27 +22,27 @@ diff --git a/src/layout/index.vue b/src/layout/index.vue index 3c56d41..2d6b35d 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -1,8 +1,8 @@ diff --git a/src/main.ts b/src/main.ts index b5f337d..e57ccea 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,13 +9,13 @@ import "virtual:svg-icons-register"; import "@arco-design/web-vue/dist/arco.css"; // 额外引入图标库 import ArcoVueIcon from "@arco-design/web-vue/es/icon"; - +import i18n from "@/lang/index"; pinia.use(piniaPluginPersist); const app = createApp(App); app.use(ArcoVue, { - // 用于改变使用组件时的前缀名称 componentPrefix: "arco" }); +app.use(i18n); app.use(ArcoVueIcon); app.use(pinia); app.use(router); diff --git a/src/router/route.ts b/src/router/route.ts index 4b24c3d..5b477dd 100644 --- a/src/router/route.ts +++ b/src/router/route.ts @@ -192,6 +192,21 @@ export const dynamicRoutes: RouteRecordRaw[] = [ } ] }, + { + path: "/internationalization", + name: "internationalization", + component: () => import("@/views/internationalization/internationalization.vue"), + meta: { + title: "internationalization", + hide: false, + keepAlive: true, + affix: false, + link: "", + iframe: false, + roles: ["admin", "common"], + svgIcon: "earth" + } + }, { path: "/about-project", name: "about-project", @@ -223,7 +238,7 @@ export const staticRoutes = [ name: "login", component: () => import("@/views/login/login.vue"), meta: { - title: "登录" + title: "login" } } /** @@ -239,19 +254,19 @@ export const staticRoutes = [ export const notFoundAndNoPower = [ { path: "/401", - name: "noPower", + name: "no-power", component: () => import("@/views/error/401.vue"), meta: { - title: "notFound", + title: "not-power", hide: true } }, { path: "/:path(.*)*", // 匹配任意路由，兜底，未找到页面的时候跳转该页面 - name: "notFound", + name: "not-found", component: () => import("@/views/error/404.vue"), meta: { - title: "notFound", + title: "not-found", hide: true } } diff --git a/src/store/theme-config.ts b/src/store/theme-config.ts index 65b6bf3..7802fef 100644 --- a/src/store/theme-config.ts +++ b/src/store/theme-config.ts @@ -7,7 +7,8 @@ import { defineStore } from "pinia"; export const useThemeConfig = defineStore("themeConfig", { state: (): any => ({ collapsed: false, // 是否折叠菜单 - refreshPage: true // 刷新页面 + refreshPage: true, // 刷新页面 + language: "zh-CN" // 系统语言 }), actions: { // 折叠菜单 @@ -17,9 +18,14 @@ export const useThemeConfig = defineStore("themeConfig", { // 刷新页面 setRefreshPage(data: Boolean) { this.refreshPage = data; + }, + // 设置语言 + setLanguage(data: string) { + this.language = data; } }, persist: { - enabled: true + enabled: true, // 开启数据缓存-默认缓存全部数据 + key: "themeConfig" } }); diff --git a/src/store/user-info.ts b/src/store/user-info.ts index 5db5ef5..3e6dce4 100644 --- a/src/store/user-info.ts +++ b/src/store/user-info.ts @@ -26,6 +26,7 @@ export const useUserInfoStore = defineStore("userInfo", { } }, persist: { - enabled: true // 开启数据缓存-默认缓存全部数据 + enabled: true, // 开启数据缓存-默认缓存全部数据 + key: "userInfo" } }); diff --git a/src/utils/index.ts b/src/utils/index.ts index 6d86804..e357c1a 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -59,3 +59,15 @@ export function arrayFlattened(tree: any, term: string) { } return result.reverse(); } + +/** + * 获取浏览器默认语言 + * @returns 语言类型 + */ +export function webDefaultLanguage() { + if (navigator.language === "zh-CN") { + return "zhCN"; + } else { + return "enUS"; + } +} diff --git a/src/views/common-components/form-component/form-component.vue b/src/views/common-components/form-component/form-component.vue index fd808f1..0209cce 100644 --- a/src/views/common-components/form-component/form-component.vue +++ b/src/views/common-components/form-component/form-component.vue @@ -1,6 +1,6 @@ diff --git a/src/views/internationalization/internationalization.vue b/src/views/internationalization/internationalization.vue new file mode 100644 index 0000000..f2624de --- /dev/null +++ b/src/views/internationalization/internationalization.vue @@ -0,0 +1,10 @@ + + + + + diff --git a/src/views/multilevel-menu/second-menu/second-menu-1.vue b/src/views/multilevel-menu/second-menu/second-menu-1.vue index bab4b33..13fe816 100644 --- a/src/views/multilevel-menu/second-menu/second-menu-1.vue +++ b/src/views/multilevel-menu/second-menu/second-menu-1.vue @@ -1,7 +1,7 @@ diff --git a/src/views/multilevel-menu/third-menu/third-menu-1.vue b/src/views/multilevel-menu/third-menu/third-menu-1.vue index 9bf4ffe..8427036 100644 --- a/src/views/multilevel-menu/third-menu/third-menu-1.vue +++ b/src/views/multilevel-menu/third-menu/third-menu-1.vue @@ -1,7 +1,7 @@ diff --git a/src/views/multilevel-menu/third-menu/third-menu-2.vue b/src/views/multilevel-menu/third-menu/third-menu-2.vue index d660c06..f466ce2 100644 --- a/src/views/multilevel-menu/third-menu/third-menu-2.vue +++ b/src/views/multilevel-menu/third-menu/third-menu-2.vue @@ -1,7 +1,7 @@