From ec28d4e53d5bbd3395bb1850abe816a55ea1f01f Mon Sep 17 00:00:00 2001 From: chansee97 Date: Fri, 5 Apr 2024 14:03:48 +0800 Subject: [PATCH] feat: add i18n --- .env | 2 +- .vscode/settings.json | 11 +- build/plugins.ts | 2 +- locales/en.json | 119 ++++++++++++++++++ locales/zh.json | 119 ++++++++++++++++++ package.json | 1 + src/components/common/CommonWrapper.vue | 1 - src/components/common/DarkModeSwitch.vue | 41 +++--- src/components/common/langsSwitch.vue | 25 ++++ src/layouts/BasicLayout/index.vue | 1 + src/layouts/components/common/BackTop.vue | 4 +- src/layouts/components/header/Breadcrumb.vue | 3 +- .../components/header/CollapaseButton.vue | 2 +- src/layouts/components/header/FullScreen.vue | 2 +- src/layouts/components/header/Notices.vue | 11 +- src/layouts/components/header/Search.vue | 8 +- src/layouts/components/header/Setting.vue | 115 ++++++++--------- src/layouts/components/header/UserCenter.vue | 72 ++++++----- src/layouts/components/tab/DropTabs.vue | 39 ++++++ src/layouts/components/tab/Reload.vue | 2 +- src/layouts/components/tab/TabBar.vue | 100 +++++++-------- src/modules/i18n.ts | 19 +++ src/router/routes.static.ts | 96 +++++++------- src/store/app/index.ts | 7 ++ src/store/route.ts | 8 +- src/typings/global.d.ts | 13 ++ src/typings/route.d.ts | 2 + src/utils/i18n.ts | 7 ++ src/utils/index.ts | 1 + src/views/{plugin => demo}/QRCode/index.vue | 0 .../{plugin => demo}/clipboard/index.vue | 0 src/views/{plugin => demo}/echarts/index.vue | 0 .../{plugin => demo}/editor/md/index.vue | 0 .../{plugin => demo}/editor/rich/index.vue | 0 .../fetch/components/Delete.vue | 0 .../fetch/components/DownLoad.vue | 0 .../fetch/components/DownLoadWithProgress.vue | 0 .../{plugin => demo}/fetch/components/Env.vue | 0 .../fetch/components/FailedRequest.vue | 0 .../fetch/components/FailedResponse.vue | 0 .../components/FailedResponseWithoutTip.vue | 0 .../fetch/components/FormPost.vue | 0 .../{plugin => demo}/fetch/components/Get.vue | 0 .../fetch/components/NoToken.vue | 0 .../fetch/components/Post.vue | 0 .../{plugin => demo}/fetch/components/Put.vue | 0 .../fetch/components/RefreshToken.vue | 0 .../fetch/components/TokenExpiration.vue | 0 .../fetch/components/Transform.vue | 0 .../fetch/components/UseRequest.vue | 0 src/views/{plugin => demo}/fetch/index.vue | 0 src/views/{plugin => demo}/icons/index.vue | 0 .../{plugin => demo}/map/components/AMap.vue | 0 .../{plugin => demo}/map/components/BMap.vue | 0 src/views/{plugin => demo}/map/index.vue | 0 src/views/login/components/Login/index.vue | 55 ++++---- src/views/login/components/Register/index.vue | 46 ++++--- src/views/login/components/ResetPwd/index.vue | 49 +++++--- src/views/login/index.vue | 1 + 59 files changed, 678 insertions(+), 306 deletions(-) create mode 100644 locales/en.json create mode 100644 locales/zh.json create mode 100644 src/components/common/langsSwitch.vue create mode 100644 src/layouts/components/tab/DropTabs.vue create mode 100644 src/modules/i18n.ts create mode 100644 src/utils/i18n.ts rename src/views/{plugin => demo}/QRCode/index.vue (100%) rename src/views/{plugin => demo}/clipboard/index.vue (100%) rename src/views/{plugin => demo}/echarts/index.vue (100%) rename src/views/{plugin => demo}/editor/md/index.vue (100%) rename src/views/{plugin => demo}/editor/rich/index.vue (100%) rename src/views/{plugin => demo}/fetch/components/Delete.vue (100%) rename src/views/{plugin => demo}/fetch/components/DownLoad.vue (100%) rename src/views/{plugin => demo}/fetch/components/DownLoadWithProgress.vue (100%) rename src/views/{plugin => demo}/fetch/components/Env.vue (100%) rename src/views/{plugin => demo}/fetch/components/FailedRequest.vue (100%) rename src/views/{plugin => demo}/fetch/components/FailedResponse.vue (100%) rename src/views/{plugin => demo}/fetch/components/FailedResponseWithoutTip.vue (100%) rename src/views/{plugin => demo}/fetch/components/FormPost.vue (100%) rename src/views/{plugin => demo}/fetch/components/Get.vue (100%) rename src/views/{plugin => demo}/fetch/components/NoToken.vue (100%) rename src/views/{plugin => demo}/fetch/components/Post.vue (100%) rename src/views/{plugin => demo}/fetch/components/Put.vue (100%) rename src/views/{plugin => demo}/fetch/components/RefreshToken.vue (100%) rename src/views/{plugin => demo}/fetch/components/TokenExpiration.vue (100%) rename src/views/{plugin => demo}/fetch/components/Transform.vue (100%) rename src/views/{plugin => demo}/fetch/components/UseRequest.vue (100%) rename src/views/{plugin => demo}/fetch/index.vue (100%) rename src/views/{plugin => demo}/icons/index.vue (100%) rename src/views/{plugin => demo}/map/components/AMap.vue (100%) rename src/views/{plugin => demo}/map/components/BMap.vue (100%) rename src/views/{plugin => demo}/map/index.vue (100%) diff --git a/.env b/.env index 77ad0d3..b48df03 100644 --- a/.env +++ b/.env @@ -5,7 +5,7 @@ VITE_APP_NAME=Nova - Admin # 路由模式 VITE_ROUTE_MODE = web # 权限路由模式: static ｜ dynamic -VITE_AUTH_ROUTE_MODE=dynamic +VITE_AUTH_ROUTE_MODE=static # 设置登陆后跳转地址 VITE_HOME_PATH = /dashboard/workbench diff --git a/.vscode/settings.json b/.vscode/settings.json index abd048b..b20e46b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -65,5 +65,14 @@ "jsonc", "yaml", "toml" - ] + ], + "i18n-ally.displayLanguage": "zh", + // "i18n-ally.enabledParsers": ["ts"], + "i18n-ally.enabledFrameworks": ["vue"], + "i18n-ally.editor.preferEditor": true, + "i18n-ally.keystyle": "nested", + "i18n-ally.localesPaths": [ + "locales" + ], + "commentTranslate.source": "Google" } diff --git a/build/plugins.ts b/build/plugins.ts index 0e18d54..3ef7498 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -27,7 +27,7 @@ export function createVitePlugins(env: ImportMetaEnv) { // auto import api of lib AutoImport({ - imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'], + imports: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n'], include: [ /\.[tj]sx?$/, /\.vue$/, diff --git a/locales/en.json b/locales/en.json new file mode 100644 index 0000000..83b2af8 --- /dev/null +++ b/locales/en.json @@ -0,0 +1,119 @@ +{ + "common": { + "cancel": "Cancel", + "confirm": "Confirm", + "close": "Closure", + "reload": "Refresh" + }, + "app": { + "loginOut": "Login out", + "loginOutContent": "Confirm to log out of current account?", + "loginOutTitle": "Sign out", + "userCenter": "Personal center", + "lignt": "Light", + "dark": "Dark", + "system": "System", + "backTop": "Back to top", + "toggleSider": "Toggle sidebar", + "BreadcrumbIcon": "Breadcrumbs icon", + "blackAndWhite": "Black and white mode", + "bottomCopyright": "Bottom copyright", + "breadcrumb": "Bread crumbs", + "colorWeak": "Color Weakness Mode", + "interfaceDisplay": "Interface display", + "logoDisplay": "LOGO display", + "messages": "Messages", + "multitab": "Display multiple tabs", + "notifications": "Notify", + "notificationsTips": "Notification", + "pageTransition": "Page transition", + "reset": "Reset", + "resetSettingContent": "Confirm to reset all settings?", + "resetSettingMeaasge": "Reset successful", + "resetSettingTitle": "Reset settings", + "searchPlaceholder": "Search page/path", + "setting": "Setting", + "systemSetting": "System settings", + "themeColor": "Theme color", + "themeSetting": "Theme settings", + "todos": "Todos", + "toggleFullScreen": "Toggle full screen", + "topProgress": "Top progress", + "transitionFadeBottom": "Bottom fade", + "transitionFadeScale": "Scale fade", + "transitionFadeSlide": "Side fade", + "transitionNull": "No transition", + "transitionSoft": "Soft", + "transitionZoomFade": "Expand fade out", + "transitionZoomOut": "Zoom out", + "watermake": "Watermark", + "closeOther": "Close other", + "closeAll": "Close all", + "closeLeft": "Close left", + "closeRight": "Close right" + }, + "login": { + "signInTitle": "Login", + "accountRuleTip": "Please enter account", + "passwordRuleTip": "Please enter password", + "or": "Or", + "rememberMe": "Remember me", + "forgotPassword": "Forget the password?", + "signIn": "Sign in", + "signUp": "Sign up", + "noAccountText": "Don't have an account?", + "accountPlaceholder": "Enter the account number", + "checkPasswordPlaceholder": "Please enter password again", + "checkPasswordRuleTip": "Please confirm password again", + "haveAccountText": "Do you have an account?", + "passwordPlaceholder": "Enter password", + "readAndAgree": "I have read and agree", + "registerTitle": "Register", + "userAgreement": "User Agreement", + "resetPassword": "Reset password", + "resetPasswordPlaceholder": "Enter account/mobile phone number", + "resetPasswordRuleTip": "Please enter your account/mobile phone number", + "resetPasswordTitle": "Reset" + }, + "route": { + "appRoot": "Home", + "cardList": "Card list", + "commonList": "Common list", + "dashboard": "Dashboard", + "demo": "Function example", + "fetch": "Request example", + "list": "List", + "monitor": "Monitoring", + "test": "Multi-level menu", + "test2": "Multi-level menu subpage", + "test2Detail": "Details page of multi-level menu", + "test3": "multi-level menu", + "test4": "Multi-level menu 3-1", + "workbench": "Workbench", + "QRCode": "QR code", + "about": "About", + "clipboard": "Clipboard", + "demo403": "403", + "demo404": "404", + "demo500": "500", + "dictionarySetting": "Dictionary settings", + "docments": "Document", + "docmentsVite": "Vite", + "docmentsVue": "Vue", + "docmentsVueuse": "VueUse (external link)", + "echarts": "Echarts", + "editor": "Editor", + "editorMd": "MarkDown editor", + "editorRich": "Rich text editor", + "error": "Exception page", + "icons": "Icon", + "justSuper": "Supervisible", + "map": "Map", + "menuSetting": "Menu Settings", + "permission": "Permissions", + "permissionDemo": "Permissions example", + "setting": "System settings", + "userCenter": "Personal Center", + "accountSetting": "User settings" + } +} diff --git a/locales/zh.json b/locales/zh.json new file mode 100644 index 0000000..b2ef18e --- /dev/null +++ b/locales/zh.json @@ -0,0 +1,119 @@ +{ + "common": { + "confirm": "确认", + "cancel": "取消", + "reload": "刷新", + "close": "关闭" + }, + "app": { + "loginOut": "退出登录", + "loginOutTitle": "退出登录", + "loginOutContent": "确认退出当前账号？", + "userCenter": "个人中心", + "lignt": "浅色", + "dark": "深色", + "system": "跟随系统", + "backTop": "返回顶部", + "toggleSider": "切换侧边栏", + "toggleFullScreen": "切换全屏", + "notificationsTips": "消息通知", + "notifications": "通知", + "messages": "消息", + "todos": "待办", + "searchPlaceholder": "搜索页面/路径", + "resetSettingTitle": "重置设置", + "resetSettingContent": "确认重置所有设置？", + "resetSettingMeaasge": "重置成功", + "reset": "重置", + "setting": "设置", + "themeSetting": "主题设置", + "colorWeak": "色弱模式", + "blackAndWhite": "黑白模式", + "themeColor": "主题色", + "pageTransition": "页面过渡", + "transitionNull": "无过渡", + "transitionFadeSlide": "侧边淡出", + "transitionFadeBottom": "底边淡出", + "transitionFadeScale": "收缩淡出", + "transitionZoomFade": "扩大淡出", + "transitionZoomOut": "收缩", + "transitionSoft": "柔和", + "systemSetting": "系统设置", + "interfaceDisplay": "界面显示", + "logoDisplay": "LOGO显示", + "topProgress": "顶部进度", + "multitab": "多页签显示", + "bottomCopyright": "底部版权", + "breadcrumb": "面包屑", + "BreadcrumbIcon": "面包屑图标", + "watermake": "水印", + "closeOther": "关闭其他", + "closeLeft": "关闭左侧", + "closeRight": "关闭右侧", + "closeAll": "全部关闭" + }, + "login": { + "signInTitle": "登录", + "accountPlaceholder": "输入账号", + "passwordPlaceholder": "输入密码", + "accountRuleTip": "请输入账户", + "passwordRuleTip": "请输入密码", + "or": "其他", + "signIn": "登录", + "rememberMe": "记住我", + "forgotPassword": "忘记密码？", + "signUp": "注册", + "noAccountText": "你没有账户？", + "haveAccountText": "已有账号?", + "checkPasswordRuleTip": "请再次确认密码", + "registerTitle": "注册", + "checkPasswordPlaceholder": "请再次输入密码", + "readAndAgree": "我已阅读并同意", + "userAgreement": "用户协议", + "resetPasswordTitle": "重置密码", + "resetPasswordPlaceholder": "输入账号/手机号码", + "resetPasswordRuleTip": "请输入账号/手机号码", + "resetPassword": "重置密码" + }, + "route": { + "appRoot": "首页", + "dashboard": "仪表盘", + "workbench": "工作台", + "monitor": "监控页", + "test": "多级菜单演示", + "test2": "多级菜单子页", + "test2Detail": "多级菜单的详情页", + "test3": "多级菜单", + "test4": "多级菜单3-1", + "list": "列表页", + "commonList": "常用列表", + "cardList": "卡片列表", + "demo": "功能示例", + "fetch": "请求示例", + "echarts": "Echarts示例", + "map": "地图", + "editor": "编辑器", + "editorMd": "MarkDown编辑器", + "editorRich": "富文本编辑器", + "clipboard": "剪贴板", + "icons": "图标", + "QRCode": "二维码", + "docments": "文档", + "docmentsVue": "Vue", + "docmentsVite": "Vite", + "docmentsVueuse": "VueUse（外链）", + "permission": "权限", + "permissionDemo": "权限示例", + "justSuper": "super可见", + "error": "异常页", + "demo403": "403", + "demo404": "404", + "demo500": "500", + "setting": "系统设置", + "accountSetting": "用户设置", + "dictionarySetting": "字典设置", + "menuSetting": "菜单设置", + "userCenter": "个人中心", + "about": "关于" + } +} diff --git a/package.json b/package.json index 42ed094..b1de248 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "qs": "^6.12.0", "radash": "^12.1.0", "vue": "^3.4.21", + "vue-i18n": "^9.11.0", "vue-router": "^4.3.0" }, "devDependencies": { diff --git a/src/components/common/CommonWrapper.vue b/src/components/common/CommonWrapper.vue index bb7d27b..f752769 100644 --- a/src/components/common/CommonWrapper.vue +++ b/src/components/common/CommonWrapper.vue @@ -18,7 +18,6 @@ diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue index d6b3d67..d729acc 100644 --- a/src/layouts/BasicLayout/index.vue +++ b/src/layouts/BasicLayout/index.vue @@ -54,6 +54,7 @@ const appStore = useAppStore() + diff --git a/src/layouts/components/common/BackTop.vue b/src/layouts/components/common/BackTop.vue index 84eb8db..109a4e8 100644 --- a/src/layouts/components/common/BackTop.vue +++ b/src/layouts/components/common/BackTop.vue @@ -8,9 +8,7 @@ - 返回顶部 + {{ $t('app.backTop') }} - - diff --git a/src/layouts/components/header/Breadcrumb.vue b/src/layouts/components/header/Breadcrumb.vue index 7010357..ec9518f 100644 --- a/src/layouts/components/header/Breadcrumb.vue +++ b/src/layouts/components/header/Breadcrumb.vue @@ -22,7 +22,7 @@ const appStore = useAppStore() @click="router.push(item.path)" > - {{ item.meta.title }} + {{ $t(`route.${String(item.name)}`, item.meta.title) }} @@ -34,7 +34,6 @@ const appStore = useAppStore() } .list-move, -/* 对移动中的元素应用的过渡 */ .list-enter-active, .list-leave-active { transition: all 0.3s ease; diff --git a/src/layouts/components/header/CollapaseButton.vue b/src/layouts/components/header/CollapaseButton.vue index e41d308..f39ef0b 100644 --- a/src/layouts/components/header/CollapaseButton.vue +++ b/src/layouts/components/header/CollapaseButton.vue @@ -12,7 +12,7 @@ const appStore = useAppStore() - 切换侧边栏 + {{ $t('app.toggleSider') }} diff --git a/src/layouts/components/header/FullScreen.vue b/src/layouts/components/header/FullScreen.vue index 3dd5f65..9409809 100644 --- a/src/layouts/components/header/FullScreen.vue +++ b/src/layouts/components/header/FullScreen.vue @@ -12,7 +12,7 @@ const appStore = useAppStore() - 全屏 + {{ $t('app.toggleFullScreen') }} diff --git a/src/layouts/components/header/Notices.vue b/src/layouts/components/header/Notices.vue index 78101e0..eacfab4 100644 --- a/src/layouts/components/header/Notices.vue +++ b/src/layouts/components/header/Notices.vue @@ -81,11 +81,10 @@ const MassageData = ref([ ]) const currentTab = ref(0) function handleRead(id: number) { - // MassageData.value[currentTab.value].list[index].isRead = true const data = MassageData.value.find(i => i.id === id) if (data) data.isRead = true - window.$message.success(`已读id: ${id}`) + window.$message.success(`id: ${id}`) } const massageCount = computed(() => { return MassageData.value.filter(i => !i.isRead).length @@ -106,14 +105,14 @@ const groupMessage = computed(() => { - 消息通知 + {{ $t('app.notificationsTips') }} @@ -122,7 +121,7 @@ const groupMessage = computed(() => { @@ -131,7 +130,7 @@ const groupMessage = computed(() => { diff --git a/src/layouts/components/header/Search.vue b/src/layouts/components/header/Search.vue index c844cc7..e840ec2 100644 --- a/src/layouts/components/header/Search.vue +++ b/src/layouts/components/header/Search.vue @@ -6,16 +6,18 @@ import { renderIcon } from '@/utils' const routeStore = useRouteStore() const searchValue = ref('') +const { t } = useI18n() + const options = computed(() => { return routeStore.rowRoutes.filter((item) => { const conditions = [ - item['meta.title']?.includes(searchValue.value), + t(`route.${String(item.name)}`, item['meta.title'] || item.name)?.includes(searchValue.value), item.path?.includes(searchValue.value), ] return conditions.some(condition => condition) }).map((item) => { return { - label: item['meta.title'], + label: t(`route.${String(item.name)}`, item['meta.title'] || item.name), value: item.path, icon: item['meta.icon'], } @@ -44,7 +46,7 @@ function handleSelect(value: string) { - 设置 + {{ $t('app.setting') }} - - diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue index 71e02d1..9351fcb 100644 --- a/src/layouts/components/header/UserCenter.vue +++ b/src/layouts/components/header/UserCenter.vue @@ -2,46 +2,50 @@ import { renderIcon } from '@/utils/icon' import { useAuthStore } from '@/store' +const { t } = useI18n() + const { userInfo, resetAuthStore } = useAuthStore() const router = useRouter() -const options = [ - { - label: '个人中心', - key: 'userCenter', - icon: renderIcon('carbon:user-avatar-filled-alt'), - }, - { - type: 'divider', - key: 'd1', - }, - { - label: 'Github', - key: 'guthub', - icon: renderIcon('icon-park-outline:github'), - }, - { - label: 'gitee', - key: 'gitee', - icon: renderIcon('simple-icons:gitee'), - }, - { - type: 'divider', - key: 'd1', - }, - { - label: '退出登录', - key: 'loginOut', - icon: renderIcon('icon-park-outline:logout'), - }, -] +const options = computed(() => { + return [ + { + label: t('app.userCenter'), + key: 'userCenter', + icon: renderIcon('carbon:user-avatar-filled-alt'), + }, + { + type: 'divider', + key: 'd1', + }, + { + label: 'Github', + key: 'guthub', + icon: renderIcon('icon-park-outline:github'), + }, + { + label: 'Gitee', + key: 'gitee', + icon: renderIcon('simple-icons:gitee'), + }, + { + type: 'divider', + key: 'd1', + }, + { + label: t('app.loginOut'), + key: 'loginOut', + icon: renderIcon('icon-park-outline:logout'), + }, + ] +}) function handleSelect(key: string | number) { if (key === 'loginOut') { window.$dialog?.info({ - title: '退出登录', - content: '确认退出当前账号？', - positiveText: '确定', - negativeText: '取消', + title: t('app.loginOutTitle'), + content: t('app.loginOutContent'), + positiveText: t('common.confirm'), + negativeText: t('common.cancel'), onPositiveClick: () => { resetAuthStore() }, diff --git a/src/layouts/components/tab/DropTabs.vue b/src/layouts/components/tab/DropTabs.vue new file mode 100644 index 0000000..1335f02 --- /dev/null +++ b/src/layouts/components/tab/DropTabs.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/src/layouts/components/tab/Reload.vue b/src/layouts/components/tab/Reload.vue index 75631fe..aae2f83 100644 --- a/src/layouts/components/tab/Reload.vue +++ b/src/layouts/components/tab/Reload.vue @@ -21,7 +21,7 @@ function handleReload() { - 刷新页面 + {{ $t('common.reload') }} diff --git a/src/layouts/components/tab/TabBar.vue b/src/layouts/components/tab/TabBar.vue index 3855e4a..76e537f 100644 --- a/src/layouts/components/tab/TabBar.vue +++ b/src/layouts/components/tab/TabBar.vue @@ -1,6 +1,7 @@ - +./DropTabs.vue diff --git a/src/modules/i18n.ts b/src/modules/i18n.ts new file mode 100644 index 0000000..ed3e0c7 --- /dev/null +++ b/src/modules/i18n.ts @@ -0,0 +1,19 @@ +import { createI18n } from 'vue-i18n' +import type { App } from 'vue' +import en from '../../locales/en.json' +import zh from '../../locales/zh.json' +import { local } from '@/utils' + +export const i18n = createI18n({ + legacy: false, + locale: local.get('lang') || 'zh', // 默认显示语言 + fallbackLocale: 'en', + messages: { + zh, + en, + }, +}) + +export function install(app: App) { + app.use(i18n) +} diff --git a/src/router/routes.static.ts b/src/router/routes.static.ts index 3854085..9971d0a 100644 --- a/src/router/routes.static.ts +++ b/src/router/routes.static.ts @@ -10,7 +10,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': null, }, { - 'name': 'dashboard_workbench', + 'name': 'workbench', 'path': '/dashboard/workbench', 'meta.title': '工作台', 'meta.requiresAuth': true, @@ -21,7 +21,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 1, }, { - 'name': 'dashboard_monitor', + 'name': 'monitor', 'path': '/dashboard/monitor', 'meta.title': '监控页', 'meta.requiresAuth': true, @@ -51,7 +51,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 4, }, { - 'name': 'test2_detail', + 'name': 'test2Detail', 'path': '/test/test2/detail', 'meta.title': '多级菜单的详情页', 'meta.requiresAuth': true, @@ -93,7 +93,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': null, }, { - 'name': 'list_commonList', + 'name': 'commonList', 'path': '/list/commonList', 'meta.title': '常用列表', 'meta.requiresAuth': true, @@ -103,7 +103,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 10, }, { - 'name': 'list_cardList', + 'name': 'cardList', 'path': '/list/cardList', 'meta.title': '卡片列表', 'meta.requiresAuth': true, @@ -113,8 +113,8 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 10, }, { - 'name': 'plugin', - 'path': '/plugin', + 'name': 'demo', + 'path': '/demo', 'meta.title': '功能示例', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:application-one', @@ -124,38 +124,38 @@ export const staticRoutes: AppRoute.RowRoute[] = [ }, { 'name': 'fetch', - 'path': '/plugin/fetch', - 'meta.title': '接口功能测试', + 'path': '/demo/fetch', + 'meta.title': '请求示例', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:international', - 'componentPath': '/plugin/fetch/index.vue', + 'componentPath': '/demo/fetch/index.vue', 'id': 5, 'pid': 13, }, { - 'name': 'plugin_echarts', - 'path': '/plugin/echarts', + 'name': 'echarts', + 'path': '/demo/echarts', 'meta.title': 'ECharts', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:chart-proportion', - 'componentPath': '/plugin/echarts/index.vue', + 'componentPath': '/demo/echarts/index.vue', 'id': 15, 'pid': 13, }, { - 'name': 'PluginMap', - 'path': '/plugin/map', + 'name': 'map', + 'path': '/demo/map', 'meta.title': '地图', 'meta.requiresAuth': true, 'meta.icon': 'carbon:map', 'meta.keepAlive': true, - 'componentPath': '/plugin/map/index.vue', + 'componentPath': '/demo/map/index.vue', 'id': 17, 'pid': 13, }, { - 'name': 'plugin_editor', - 'path': '/plugin/editor', + 'name': 'editor', + 'path': '/demo/editor', 'meta.title': '编辑器', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:editor', @@ -164,52 +164,52 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 13, }, { - 'name': 'plugin_md', - 'path': '/plugin/editor/md', + 'name': 'editorMd', + 'path': '/demo/editor/md', 'meta.title': 'MarkDown', 'meta.requiresAuth': true, 'meta.icon': 'ri:markdown-line', - 'componentPath': '/plugin/editor/md/index.vue', + 'componentPath': '/demo/editor/md/index.vue', 'id': 19, 'pid': 18, }, { - 'name': 'plugin_rich', - 'path': '/plugin/editor/rich', + 'name': 'editorRich', + 'path': '/demo/editor/rich', 'meta.title': '富文本', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:edit-one', - 'componentPath': '/plugin/editor/rich/index.vue', + 'componentPath': '/demo/editor/rich/index.vue', 'id': 20, 'pid': 18, }, { - 'name': 'plugin_clipboard', - 'path': '/plugin/clipboard', + 'name': 'clipboard', + 'path': '/demo/clipboard', 'meta.title': '剪贴板', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:clipboard', - 'componentPath': '/plugin/clipboard/index.vue', + 'componentPath': '/demo/clipboard/index.vue', 'id': 21, 'pid': 13, }, { - 'name': 'plugin_icons', - 'path': '/plugin/icons', + 'name': 'icons', + 'path': '/demo/icons', 'meta.title': '图标', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:winking-face-with-open-eyes', - 'componentPath': '/plugin/icons/index.vue', + 'componentPath': '/demo/icons/index.vue', 'id': 22, 'pid': 13, }, { - 'name': 'plugin_QRCode', - 'path': '/plugin/QRCode', + 'name': 'QRCode', + 'path': '/demo/QRCode', 'meta.title': '二维码', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:two-dimensional-code', - 'componentPath': '/plugin/QRCode/index.vue', + 'componentPath': '/demo/QRCode/index.vue', 'id': 23, 'pid': 13, }, @@ -224,9 +224,9 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': null, }, { - 'name': 'docments_vue', + 'name': 'docmentsVue', 'path': '/docments/vue', - 'meta.title': 'vue', + 'meta.title': 'Vue', 'meta.requiresAuth': true, 'meta.icon': 'logos:vue', 'componentPath': '/docments/vue/index.vue', @@ -234,9 +234,9 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 24, }, { - 'name': 'docments_vite', + 'name': 'docmentsVite', 'path': '/docments/vite', - 'meta.title': 'vite', + 'meta.title': 'Vite', 'meta.requiresAuth': true, 'meta.icon': 'logos:vitejs', 'componentPath': '/docments/vite/index.vue', @@ -244,7 +244,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 24, }, { - 'name': 'docments_vueuse', + 'name': 'docmentsVueuse', 'path': '/docments/vueuse', 'meta.title': 'VueUse（外链）', 'meta.requiresAuth': true, @@ -257,7 +257,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ { 'name': 'permission', 'path': '/permission', - 'meta.title': '权限示例', + 'meta.title': '权限', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:people-safe', 'componentPath': null, @@ -265,7 +265,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': null, }, { - 'name': 'permission_permission', + 'name': 'permissionDemo', 'path': '/permission/permission', 'meta.title': '权限示例', 'meta.requiresAuth': true, @@ -275,9 +275,9 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 28, }, { - 'name': 'permission_justSuper', + 'name': 'justSuper', 'path': '/permission/justSuper', - 'meta.title': '超管super可见', + 'meta.title': 'super可见', 'meta.requiresAuth': true, 'meta.roles': [ 'super', @@ -300,7 +300,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ { 'name': 'demo403', 'path': '/error/403', - 'meta.title': '403页', + 'meta.title': '403', 'meta.requiresAuth': true, 'meta.icon': 'carbon:error', 'meta.order': 3, @@ -311,7 +311,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ { 'name': 'demo404', 'path': '/error/404', - 'meta.title': '404页', + 'meta.title': '404', 'meta.requiresAuth': true, 'meta.icon': 'icon-park-outline:error', 'meta.order': 2, @@ -322,7 +322,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ { 'name': 'demo500', 'path': '/error/500', - 'meta.title': '500页', + 'meta.title': '500', 'meta.requiresAuth': true, 'meta.icon': 'carbon:data-error', 'meta.order': 1, @@ -341,7 +341,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': null, }, { - 'name': 'setting_account', + 'name': 'accountSetting', 'path': '/setting/account', 'meta.title': '用户设置', 'meta.requiresAuth': true, @@ -351,7 +351,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 35, }, { - 'name': 'setting_dictionary', + 'name': 'dictionarySetting', 'path': '/setting/dictionary', 'meta.title': '字典设置', 'meta.requiresAuth': true, @@ -361,7 +361,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [ 'pid': 35, }, { - 'name': 'setting_menu', + 'name': 'menuSetting', 'path': '/setting/menu', 'meta.title': '菜单设置', 'meta.requiresAuth': true, diff --git a/src/store/app/index.ts b/src/store/app/index.ts index d0cf436..03bd8b0 100644 --- a/src/store/app/index.ts +++ b/src/store/app/index.ts @@ -2,6 +2,7 @@ import type { GlobalThemeOverrides } from 'naive-ui' import chroma from 'chroma-js' import { set } from 'radash' import themeConfig from './theme.json' +import { local, setLocale } from '@/utils' type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out' @@ -17,6 +18,7 @@ export const useAppStore = defineStore('app-store', { state: () => { return { footerText: 'Copyright © 2024 chansee97', + lang: 'zh', theme: themeConfig as GlobalThemeOverrides, primaryColor: themeConfig.common.primaryColor, collapsed: false, @@ -65,6 +67,11 @@ export const useAppStore = defineStore('app-store', { // 重置所有配色 this.setPrimaryColor(this.primaryColor) }, + setAppLang(lang: App.lang) { + setLocale(lang) + local.set('lang', lang) + this.lang = lang + }, /* 设置主题色 */ setPrimaryColor(color: string) { const brightenColor = chroma(color).brighten(1).hex() diff --git a/src/store/route.ts b/src/store/route.ts index 75ea41d..4274b88 100644 --- a/src/store/route.ts +++ b/src/store/route.ts @@ -3,7 +3,7 @@ import { RouterLink } from 'vue-router' import { h } from 'vue' import { clone, construct, min } from 'radash' import type { RouteRecordRaw } from 'vue-router' -import { arrayToTree, local, renderIcon } from '@/utils' +import { $t, arrayToTree, local, renderIcon } from '@/utils' import { router } from '@/router' import { fetchUserRoutes } from '@/service' import { staticRoutes } from '@/router/routes.static' @@ -81,9 +81,9 @@ export const useRouteStore = defineStore('route-store', { path: item.path, }, }, - { default: () => item.meta.title }, + { default: () => $t(`route.${String(item.name)}`, item.meta.title) }, ) - : item.meta.title, + : $t(`route.${String(item.name)}`, item.meta.title), key: item.path, icon: item.meta.icon ? renderIcon(item.meta.icon) : undefined, } @@ -142,7 +142,7 @@ export const useRouteStore = defineStore('route-store', { redirect: import.meta.env.VITE_HOME_PATH, component: BasicLayout, meta: { - title: '首页', + title: '', icon: 'icon-park-outline:home', }, children: [], diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts index af687ad..d2f4ed2 100644 --- a/src/typings/global.d.ts +++ b/src/typings/global.d.ts @@ -19,6 +19,13 @@ declare namespace NaiveUI { type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning' } +declare module '~icons/*' { + import type { FunctionalComponent, SVGAttributes } from 'vue' + + const component: FunctionalComponent + export default component +} + declare namespace Storage { interface Session { demoKey: string @@ -33,5 +40,11 @@ declare namespace Storage { refreshToken: string /* 存储登录账号 */ loginAccount: any + /* 存储当前语言 */ + lang: App.lang } } + +declare namespace App { + type lang = 'zh' | 'en' +} diff --git a/src/typings/route.d.ts b/src/typings/route.d.ts index 7c2edf8..85c4a22 100644 --- a/src/typings/route.d.ts +++ b/src/typings/route.d.ts @@ -23,6 +23,8 @@ declare namespace AppRoute { withoutTab?: boolean /** 当前路由是否会被固定在Tab中,用于一些常驻页面 */ pinTab?: boolean + /** 当前路由i18n标识 */ + i18nKey?: string } /** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */ interface baseRoute { diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts new file mode 100644 index 0000000..7cc9411 --- /dev/null +++ b/src/utils/i18n.ts @@ -0,0 +1,7 @@ +import { i18n } from '@/modules/i18n' + +export function setLocale(locale: App.lang) { + i18n.global.locale.value = locale +} + +export const $t = i18n.global.t diff --git a/src/utils/index.ts b/src/utils/index.ts index c8551d7..d9bedb9 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,4 @@ export * from './icon' export * from './storage' export * from './array' +export * from './i18n' diff --git a/src/views/plugin/QRCode/index.vue b/src/views/demo/QRCode/index.vue similarity index 100% rename from src/views/plugin/QRCode/index.vue rename to src/views/demo/QRCode/index.vue diff --git a/src/views/plugin/clipboard/index.vue b/src/views/demo/clipboard/index.vue similarity index 100% rename from src/views/plugin/clipboard/index.vue rename to src/views/demo/clipboard/index.vue diff --git a/src/views/plugin/echarts/index.vue b/src/views/demo/echarts/index.vue similarity index 100% rename from src/views/plugin/echarts/index.vue rename to src/views/demo/echarts/index.vue diff --git a/src/views/plugin/editor/md/index.vue b/src/views/demo/editor/md/index.vue similarity index 100% rename from src/views/plugin/editor/md/index.vue rename to src/views/demo/editor/md/index.vue diff --git a/src/views/plugin/editor/rich/index.vue b/src/views/demo/editor/rich/index.vue similarity index 100% rename from src/views/plugin/editor/rich/index.vue rename to src/views/demo/editor/rich/index.vue diff --git a/src/views/plugin/fetch/components/Delete.vue b/src/views/demo/fetch/components/Delete.vue similarity index 100% rename from src/views/plugin/fetch/components/Delete.vue rename to src/views/demo/fetch/components/Delete.vue diff --git a/src/views/plugin/fetch/components/DownLoad.vue b/src/views/demo/fetch/components/DownLoad.vue similarity index 100% rename from src/views/plugin/fetch/components/DownLoad.vue rename to src/views/demo/fetch/components/DownLoad.vue diff --git a/src/views/plugin/fetch/components/DownLoadWithProgress.vue b/src/views/demo/fetch/components/DownLoadWithProgress.vue similarity index 100% rename from src/views/plugin/fetch/components/DownLoadWithProgress.vue rename to src/views/demo/fetch/components/DownLoadWithProgress.vue diff --git a/src/views/plugin/fetch/components/Env.vue b/src/views/demo/fetch/components/Env.vue similarity index 100% rename from src/views/plugin/fetch/components/Env.vue rename to src/views/demo/fetch/components/Env.vue diff --git a/src/views/plugin/fetch/components/FailedRequest.vue b/src/views/demo/fetch/components/FailedRequest.vue similarity index 100% rename from src/views/plugin/fetch/components/FailedRequest.vue rename to src/views/demo/fetch/components/FailedRequest.vue diff --git a/src/views/plugin/fetch/components/FailedResponse.vue b/src/views/demo/fetch/components/FailedResponse.vue similarity index 100% rename from src/views/plugin/fetch/components/FailedResponse.vue rename to src/views/demo/fetch/components/FailedResponse.vue diff --git a/src/views/plugin/fetch/components/FailedResponseWithoutTip.vue b/src/views/demo/fetch/components/FailedResponseWithoutTip.vue similarity index 100% rename from src/views/plugin/fetch/components/FailedResponseWithoutTip.vue rename to src/views/demo/fetch/components/FailedResponseWithoutTip.vue diff --git a/src/views/plugin/fetch/components/FormPost.vue b/src/views/demo/fetch/components/FormPost.vue similarity index 100% rename from src/views/plugin/fetch/components/FormPost.vue rename to src/views/demo/fetch/components/FormPost.vue diff --git a/src/views/plugin/fetch/components/Get.vue b/src/views/demo/fetch/components/Get.vue similarity index 100% rename from src/views/plugin/fetch/components/Get.vue rename to src/views/demo/fetch/components/Get.vue diff --git a/src/views/plugin/fetch/components/NoToken.vue b/src/views/demo/fetch/components/NoToken.vue similarity index 100% rename from src/views/plugin/fetch/components/NoToken.vue rename to src/views/demo/fetch/components/NoToken.vue diff --git a/src/views/plugin/fetch/components/Post.vue b/src/views/demo/fetch/components/Post.vue similarity index 100% rename from src/views/plugin/fetch/components/Post.vue rename to src/views/demo/fetch/components/Post.vue diff --git a/src/views/plugin/fetch/components/Put.vue b/src/views/demo/fetch/components/Put.vue similarity index 100% rename from src/views/plugin/fetch/components/Put.vue rename to src/views/demo/fetch/components/Put.vue diff --git a/src/views/plugin/fetch/components/RefreshToken.vue b/src/views/demo/fetch/components/RefreshToken.vue similarity index 100% rename from src/views/plugin/fetch/components/RefreshToken.vue rename to src/views/demo/fetch/components/RefreshToken.vue diff --git a/src/views/plugin/fetch/components/TokenExpiration.vue b/src/views/demo/fetch/components/TokenExpiration.vue similarity index 100% rename from src/views/plugin/fetch/components/TokenExpiration.vue rename to src/views/demo/fetch/components/TokenExpiration.vue diff --git a/src/views/plugin/fetch/components/Transform.vue b/src/views/demo/fetch/components/Transform.vue similarity index 100% rename from src/views/plugin/fetch/components/Transform.vue rename to src/views/demo/fetch/components/Transform.vue diff --git a/src/views/plugin/fetch/components/UseRequest.vue b/src/views/demo/fetch/components/UseRequest.vue similarity index 100% rename from src/views/plugin/fetch/components/UseRequest.vue rename to src/views/demo/fetch/components/UseRequest.vue diff --git a/src/views/plugin/fetch/index.vue b/src/views/demo/fetch/index.vue similarity index 100% rename from src/views/plugin/fetch/index.vue rename to src/views/demo/fetch/index.vue diff --git a/src/views/plugin/icons/index.vue b/src/views/demo/icons/index.vue similarity index 100% rename from src/views/plugin/icons/index.vue rename to src/views/demo/icons/index.vue diff --git a/src/views/plugin/map/components/AMap.vue b/src/views/demo/map/components/AMap.vue similarity index 100% rename from src/views/plugin/map/components/AMap.vue rename to src/views/demo/map/components/AMap.vue diff --git a/src/views/plugin/map/components/BMap.vue b/src/views/demo/map/components/BMap.vue similarity index 100% rename from src/views/plugin/map/components/BMap.vue rename to src/views/demo/map/components/BMap.vue diff --git a/src/views/plugin/map/index.vue b/src/views/demo/map/index.vue similarity index 100% rename from src/views/plugin/map/index.vue rename to src/views/demo/map/index.vue diff --git a/src/views/login/components/Login/index.vue b/src/views/login/components/Login/index.vue index 53cc8a9..b9276e2 100644 --- a/src/views/login/components/Login/index.vue +++ b/src/views/login/components/Login/index.vue @@ -10,18 +10,22 @@ const authStore = useAuthStore() function toOtherForm(type: any) { emit('update:modelValue', type) } -const rules = { - account: { - required: true, - trigger: 'blur', - message: '请输入账户', - }, - pwd: { - required: true, - trigger: 'blur', - message: '请输入密码', - }, -} + +const { t } = useI18n() +const rules = computed(() => { + return { + account: { + required: true, + trigger: 'blur', + message: t('login.accountRuleTip'), + }, + pwd: { + required: true, + trigger: 'blur', + message: t('login.passwordRuleTip'), + }, + } +}) const formValue = ref({ account: 'super', pwd: '123456', @@ -46,6 +50,9 @@ function handleLogin() { isLoading.value = false }) } +onMounted(() => { + checkUserAccount() +}) function checkUserAccount() { const loginAccount = local.get('loginAccount') if (!loginAccount) @@ -54,20 +61,19 @@ function checkUserAccount() { formValue.value = loginAccount isRemember.value = true } -checkUserAccount()