perf: 优化国际化

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "stylelint.vscode-stylelint",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "johnsoncodehk.volar",
+    "lokalise.i18n-ally",
+    "mikestead.dotenv",
+    "antfu.iconify"
+  ]
+}

.vscode/settings.json

@@ -1,11 +1,14 @@
 {
-  // You should install these plugins:
+  /** 你需要安装这些插件，以便带来更好的提示体验
-  // ESLint
+   * ESLint
-  // Prettier - Code formatter
+   * Prettier - Code formatter
-  // stylelint
+   * stylelint
-  // vscode-icons
+   * vscode-icons
-  // TypeScript Vue Plugin (Volar)
+   * i18n Ally
-  // Vue Language Features (Volar)
+   * Iconify IntelliSense
+   * TypeScript Vue Plugin (Volar)
+   * Vue Language Features (Volar)
+   */
   "terminal.integrated.rendererType": "dom",
   "editor.formatOnType": true,
   "editor.formatOnSave": true,
@@ -45,5 +48,13 @@
   },
   "volar.tsPlugin": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "i18n-ally.localesPaths": ["src/plugins/i18n"]
+  "i18n-ally.localesPaths": ["src/plugins/i18n"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+  "i18n-ally.enabledParsers": ["ts"],
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.enabledFrameworks": ["vue", "react"]
 }

.vscode/vue3.2+.setup-snippets.json

@@ -0,0 +1,17 @@
+{
+  "Vue3.2+快速生成模板": {
+    "prefix": "Vue3.2+",
+    "body": [
+      "<script setup lang='ts'>",
+      "</script>\n",
+      "<template>",
+      "\t<div>\n",
+      "\t</div>",
+      "</template>\n",
+      "<style scoped>\n",
+      "</style>",
+      "$2"
+    ],
+    "description": "Vue3.2+"
+  }
+}

.vscode/vue3.2.setup-snippets

@@ -1,20 +0,0 @@
-{
-  "Vue3.2快速生成模板": {
-    "prefix": "Vue3.2",
-    "body": [
-      "<!-- $1 -->",
-      "<script setup lang='ts'>",
-      "\t$2",
-      "</script>\n",
-      "<template>",
-      "\t<div>",
-      "\t\t$3",
-      "\t</div>",
-      "</template>\n",
-      "<style scoped>",
-      "\t$4",
-      "</style>"
-    ],
-    "description": "Vue3.2"
-  }
-}

mock/asyncRoutes.ts

@@ -8,7 +8,7 @@ const systemRouter = {
   redirect: "/system/user",
   meta: {
     icon: "Setting",
-    title: "message.hssysManagement",
+    title: "menus.hssysManagement",
     i18n: true,
     showLink: true,
     rank: 6
@@ -18,7 +18,7 @@ const systemRouter = {
       path: "/system/user",
       name: "user",
       meta: {
-        title: "message.hsBaseinfo",
+        title: "menus.hsBaseinfo",
         i18n: true,
         showLink: true
       }
@@ -27,7 +27,7 @@ const systemRouter = {
       path: "/system/dict",
       name: "dict",
       meta: {
-        title: "message.hsDict",
+        title: "menus.hsDict",
         i18n: true,
         showLink: true,
         keepAlive: true
@@ -41,7 +41,7 @@ const permissionRouter = {
   name: "permission",
   redirect: "/permission/page",
   meta: {
-    title: "message.permission",
+    title: "menus.permission",
     icon: "Lollipop",
     i18n: true,
     showLink: true,
@@ -52,7 +52,7 @@ const permissionRouter = {
       path: "/permission/page",
       name: "permissionPage",
       meta: {
-        title: "message.permissionPage",
+        title: "menus.permissionPage",
         i18n: true,
         showLink: true
       }
@@ -61,7 +61,7 @@ const permissionRouter = {
       path: "/permission/button",
       name: "permissionButton",
       meta: {
-        title: "message.permissionButton",
+        title: "menus.permissionButton",
         i18n: true,
         showLink: true,
         authority: []
@@ -76,7 +76,7 @@ const tabsRouter = {
   redirect: "/tabs/index",
   meta: {
     icon: "IF-team-icontabs",
-    title: "message.hstabs",
+    title: "menus.hstabs",
     i18n: true,
     showLink: true,
     rank: 8
@@ -86,7 +86,7 @@ const tabsRouter = {
       path: "/tabs/index",
       name: "reTabs",
       meta: {
-        title: "message.hstabs",
+        title: "menus.hstabs",
         showLink: true,
         i18n: true
       }

src/components/ReCharts/src/Github.vue

@@ -19,21 +19,21 @@ const lists = ref([
   >
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-user"></i>
+        <el-icon><user /></el-icon>
         用户名
       </template>
       xiaoxian
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-mobile-phone"></i>
+        <el-icon><iphone /></el-icon>
         手机号
       </template>
       123456789
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-location-outline"></i>
+        <el-icon><location /></el-icon>
         居住地
       </template>
       上海
@@ -48,7 +48,7 @@ const lists = ref([
   >
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-tickets"></i>
+        <el-icon><tickets /></el-icon>
         标签
       </template>
       <el-tag
@@ -63,7 +63,7 @@ const lists = ref([
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-office-building"></i>
+        <el-icon><office-building /></el-icon>
         联系地址
       </template>
       上海市徐汇区
@@ -78,7 +78,7 @@ const lists = ref([
   >
     <el-descriptions-item>
       <template #label>
-        <i class="el-icon-notebook-1"></i>
+        <el-icon><notebook /></el-icon>
         留言
       </template>
       好好学习，天天向上

src/layout/components/navbar.vue

@@ -114,14 +114,14 @@ function translationEn() {
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
               <i class="ri-logout-circle-r-line"></i
-              >{{ $t("message.hsLoginOut") }}</el-dropdown-item
+              >{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
             >
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <el-icon
         class="el-icon-setting"
-        :title="$t('message.hssystemSet')"
+        :title="$t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <Setting />

src/layout/components/screenfull/index.vue

@@ -8,8 +8,8 @@ const { isFullscreen, toggle } = useFullscreen();
     <i
       :title="
         isFullscreen
-          ? $t('message.hsexitfullscreen')
+          ? $t('buttons.hsexitfullscreen')
-          : $t('message.hsfullscreen')
+          : $t('buttons.hsfullscreen')
       "
       :class="
         isFullscreen

src/layout/components/setting/index.vue

@@ -160,8 +160,8 @@ function onReset() {
       path: "/welcome",
       parentPath: "/",
       meta: {
-        title: "message.hshome",
+        title: "menus.hshome",
-        icon: "el-icon-s-home",
+        icon: "HomeFilled",
         i18n: true,
         showLink: true
       }

src/layout/components/sidebar/breadCrumb.vue

@@ -65,7 +65,7 @@ const getBreadcrumb = (): void => {
       {
         path: "/welcome",
         parentPath: "/",
-        meta: { title: "message.hshome", i18n: true }
+        meta: { title: "menus.hshome", i18n: true }
       } as unknown as RouteLocationMatched
     ].concat(matched);
   }

src/layout/components/sidebar/horizontal.vue

@@ -181,14 +181,14 @@ onMounted(() => {
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
               <i class="ri-logout-circle-r-line"></i
-              >{{ $t("message.hsLoginOut") }}</el-dropdown-item
+              >{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
             >
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <el-icon
         class="el-icon-setting"
-        :title="$t('message.hssystemSet')"
+        :title="$t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <Setting />

src/layout/components/tag/index.vue

@@ -17,6 +17,7 @@ import closeLeft from "/@/assets/svg/close_left.svg";
 import closeOther from "/@/assets/svg/close_other.svg";
 import closeRight from "/@/assets/svg/close_right.svg";
 
+import { $t } from "/@/plugins/i18n";
 import { emitter } from "/@/utils/mitt";
 import { isEqual, isEmpty } from "lodash-es";
 import { transformI18n } from "/@/plugins/i18n";
@@ -187,42 +188,42 @@ const handleScroll = (offset: number): void => {
 const tagsViews = ref<Array<tagsViewsType>>([
   {
     icon: refresh,
-    text: "message.hsreload",
+    text: $t("buttons.hsreload"),
     divided: false,
     disabled: false,
     show: true
   },
   {
     icon: close,
-    text: "message.hscloseCurrentTab",
+    text: $t("buttons.hscloseCurrentTab"),
     divided: false,
     disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeLeft,
-    text: "message.hscloseLeftTabs",
+    text: $t("buttons.hscloseLeftTabs"),
     divided: true,
     disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeRight,
-    text: "message.hscloseRightTabs",
+    text: $t("buttons.hscloseRightTabs"),
     divided: false,
     disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeOther,
-    text: "message.hscloseOtherTabs",
+    text: $t("buttons.hscloseOtherTabs"),
     divided: true,
     disabled: multiTags.value.length > 2 ? false : true,
     show: true
   },
   {
     icon: closeAll,
-    text: "message.hscloseAllTabs",
+    text: $t("buttons.hscloseAllTabs"),
     divided: false,
     disabled: multiTags.value.length > 1 ? false : true,
     show: true
@@ -306,7 +307,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
           path: "/welcome",
           parentPath: "/",
           meta: {
-            title: "message.hshome",
+            title: "menus.hshome",
             i18n: true,
             icon: "el-icon-s-home",
             showLink: true
@@ -682,7 +683,7 @@ onBeforeMount(() => {
     <ul class="right-button">
       <li>
         <el-icon
-          :title="$t('message.hsrefreshRoute')"
+          :title="$t('buttons.hsrefreshRoute')"
           class="el-icon-refresh-right rotate"
           @click="onFresh"
         >

src/layout/types.ts

@@ -3,9 +3,9 @@ export const routerArrays: Array<RouteConfigs> = [
     path: "/welcome",
     parentPath: "/",
     meta: {
-      title: "message.hshome",
+      title: "menus.hshome",
       i18n: true,
-      icon: "el-icon-s-home",
+      icon: "HomeFilled",
       showLink: true
     }
   }

src/plugins/element-plus/index.ts

@@ -116,7 +116,13 @@ import {
   Close,
   CloseBold,
   Bell,
-  Guide
+  Guide,
+  User,
+  Iphone,
+  Location,
+  Tickets,
+  OfficeBuilding,
+  Notebook
 } from "@element-plus/icons-vue";
 
 // Icon
@@ -136,7 +142,13 @@ export const iconComponents = [
   Close,
   CloseBold,
   Bell,
-  Guide
+  Guide,
+  User,
+  Iphone,
+  Location,
+  Tickets,
+  OfficeBuilding,
+  Notebook
 ];
 
 export function useElementPlus(app: App) {

src/plugins/i18n/config.ts

@@ -1,4 +1,4 @@
-// 菜单国际化配置
+import { siphonI18n } from "./index";
 // vxe-table组件国际化
 import zhVxeTable from "vxe-table/lib/locale/lang/zh-CN";
 import enVxeTable from "vxe-table/lib/locale/lang/en-US";
@@ -7,158 +7,18 @@ import enVxeTable from "vxe-table/lib/locale/lang/en-US";
 import enLocale from "element-plus/lib/locale/lang/en";
 import zhLocale from "element-plus/lib/locale/lang/zh-cn";
 
-// 导航菜单配置
+// 项目内自定义国际化
-export const menusConfig = {
+const zhModules = import.meta.globEager("./zh-CN/**/*.ts");
-  zh: {
+const enModules = import.meta.globEager("./en/**/*.ts");
-    message: {
-      hshome: "首页",
-      hssysManagement: "系统管理",
-      hsBaseinfo: "基础信息",
-      hsDict: "字典管理",
-      hseditor: "编辑器",
-      hserror: "错误页面",
-      hsfourZeroFour: "404",
-      hsfourZeroOne: "401",
-      hscomponents: "组件",
-      hsvideo: "视频组件",
-      hsmap: "地图组件",
-      hsdraggable: "拖拽组件",
-      hssplitPane: "切割面板",
-      hsbutton: "按钮组件",
-      hscropping: "图片裁剪",
-      hscountTo: "数字动画",
-      hsselector: "选择器组件",
-      hsflowChart: "流程图",
-      hsseamless: "无缝滚动",
-      hscontextmenu: "右键菜单",
-      hsmenus: "多级菜单",
-      hsmenu1: "菜单1",
-      "hsmenu1-1": "菜单1-1",
-      "hsmenu1-2": "菜单1-2",
-      "hsmenu1-2-1": "菜单1-2-1",
-      "hsmenu1-2-2": "菜单1-2-2",
-      "hsmenu1-3": "菜单1-3",
-      hsmenu2: "菜单2",
-      permission: "权限管理",
-      permissionPage: "页面权限",
-      permissionButton: "按钮权限",
-      hstabs: "标签页操作",
-      hsMenuTree: "菜单树结构",
-      hsguide: "引导页",
-      externalLink: "外链"
-    }
-  },
-  en: {
-    message: {
-      hshome: "Home",
-      hssysManagement: "System Manage",
-      hsBaseinfo: "Base Info",
-      hsDict: "Dict Manage",
-      hseditor: "Editor",
-      hserror: "Error Page",
-      hsfourZeroFour: "404",
-      hsfourZeroOne: "401",
-      hscomponents: "Components",
-      hsvideo: "Video Components",
-      hsmap: "Map Components",
-      hsdraggable: "Draggable Components",
-      hssplitPane: "Split Pane",
-      hsbutton: "Button Components",
-      hscropping: "Picture Cropping",
-      hscountTo: "Digital Animation",
-      hsselector: "Selector Components",
-      hsflowChart: "Flow Chart",
-      hsseamless: "Seamless Scroll",
-      hscontextmenu: "Context Menu",
-      hsmenus: "MultiLevel Menu",
-      hsmenu1: "Menu1",
-      "hsmenu1-1": "Menu1-1",
-      "hsmenu1-2": "Menu1-2",
-      "hsmenu1-2-1": "Menu1-2-1",
-      "hsmenu1-2-2": "Menu1-2-2",
-      "hsmenu1-3": "Menu1-3",
-      hsmenu2: "Menu2",
-      permission: "Permission Manage",
-      permissionPage: "Page Permission",
-      permissionButton: "Button Permission",
-      hstabs: "Tabs Operate",
-      hsMenuTree: "Menu Tree",
-      hsguide: "Guide",
-      externalLink: "External Link"
-    }
-  }
-};
-
-// 按钮配置
-export const buttonConfig = {
-  zh: {
-    message: {
-      hsLoginOut: "退出系统",
-      hsfullscreen: "全屏",
-      hsexitfullscreen: "退出全屏",
-      hsrefreshRoute: "刷新路由",
-      hslogin: "登陆",
-      hsadd: "新增",
-      hsmark: "标记/取消",
-      hssave: "保存",
-      hssearch: "搜索",
-      hsexpendAll: "全部展开",
-      hscollapseAll: "全部折叠",
-      hssystemSet: "打开项目配置",
-      hsdelete: "删除",
-      hsreload: "重新加载",
-      hscloseCurrentTab: "关闭当前标签页",
-      hscloseLeftTabs: "关闭左侧标签页",
-      hscloseRightTabs: "关闭右侧标签页",
-      hscloseOtherTabs: "关闭其他标签页",
-      hscloseAllTabs: "关闭全部标签页"
-    }
-  },
-  en: {
-    message: {
-      hsLoginOut: "loginOut",
-      hsfullscreen: "fullScreen",
-      hsexitfullscreen: "exitFullscreen",
-      hsrefreshRoute: "refreshRoute",
-      hslogin: "login",
-      hsadd: "Add",
-      hsmark: "Mark/Cancel",
-      hssave: "Save",
-      hssearch: "Search",
-      hsexpendAll: "Expand All",
-      hscollapseAll: "Collapse All",
-      hssystemSet: "Open ProjectConfig",
-      hsdelete: "Delete",
-      hsreload: "Reload",
-      hscloseCurrentTab: "Close CurrentTab",
-      hscloseLeftTabs: "Close LeftTabs",
-      hscloseRightTabs: "Close RightTabs",
-      hscloseOtherTabs: "Close OtherTabs",
-      hscloseAllTabs: "Close AllTabs"
-    }
-  }
-};
-
-// 配置
-// export const xxxx = {
-//   zh: {
-//     message: {},
-//   },
-//   en: {
-//     message: {},
-//   },
-// };
-
-const localesList = [menusConfig, buttonConfig];
 
 export const localesConfigs = {
   zh: {
-    message: Object.assign({}, ...localesList.map(v => v.zh.message)),
+    ...siphonI18n(zhModules, "zh-CN"),
     ...zhVxeTable,
     ...zhLocale
   },
   en: {
-    message: Object.assign({}, ...localesList.map(v => v.en.message)),
+    ...siphonI18n(enModules, "en"),
     ...enVxeTable,
     ...enLocale
   }

src/plugins/i18n/en/buttons.ts

@@ -0,0 +1,21 @@
+export default {
+  hsLoginOut: "LoginOut",
+  hsfullscreen: "FullScreen",
+  hsexitfullscreen: "ExitFullscreen",
+  hsrefreshRoute: "RefreshRoute",
+  hslogin: "Login",
+  hsadd: "Add",
+  hsmark: "Mark/Cancel",
+  hssave: "Save",
+  hssearch: "Search",
+  hsexpendAll: "Expand All",
+  hscollapseAll: "Collapse All",
+  hssystemSet: "Open ProjectConfig",
+  hsdelete: "Delete",
+  hsreload: "Reload",
+  hscloseCurrentTab: "Close CurrentTab",
+  hscloseLeftTabs: "Close LeftTabs",
+  hscloseRightTabs: "Close RightTabs",
+  hscloseOtherTabs: "Close OtherTabs",
+  hscloseAllTabs: "Close AllTabs"
+};

src/plugins/i18n/en/menus.ts

@@ -0,0 +1,38 @@
+export default {
+  hshome: "Home",
+  hslogin: "Login",
+  hssysManagement: "System Manage",
+  hsBaseinfo: "Base Info",
+  hsDict: "Dict Manage",
+  hseditor: "Editor",
+  hserror: "Error Page",
+  hsfourZeroFour: "404",
+  hsfourZeroOne: "401",
+  hscomponents: "Components",
+  hsvideo: "Video Components",
+  hsmap: "Map Components",
+  hsdraggable: "Draggable Components",
+  hssplitPane: "Split Pane",
+  hsbutton: "Button Components",
+  hscropping: "Picture Cropping",
+  hscountTo: "Digital Animation",
+  hsselector: "Selector Components",
+  hsflowChart: "Flow Chart",
+  hsseamless: "Seamless Scroll",
+  hscontextmenu: "Context Menu",
+  hsmenus: "MultiLevel Menu",
+  hsmenu1: "Menu1",
+  "hsmenu1-1": "Menu1-1",
+  "hsmenu1-2": "Menu1-2",
+  "hsmenu1-2-1": "Menu1-2-1",
+  "hsmenu1-2-2": "Menu1-2-2",
+  "hsmenu1-3": "Menu1-3",
+  hsmenu2: "Menu2",
+  permission: "Permission Manage",
+  permissionPage: "Page Permission",
+  permissionButton: "Button Permission",
+  hstabs: "Tabs Operate",
+  hsMenuTree: "Menu Tree",
+  hsguide: "Guide",
+  externalLink: "External Link"
+};

src/plugins/i18n/index.ts

@@ -1,19 +1,10 @@
 // 多组件库的国际化和本地项目国际化兼容
 import { App } from "vue";
+import { set } from "lodash-es";
 import { createI18n } from "vue-i18n";
 import { localesConfigs } from "./config";
 import { storageLocal } from "/@/utils/storage";
 
-export const i18n = createI18n({
-  locale: storageLocal.getItem("responsive-locale")?.locale ?? "zh",
-  fallbackLocale: "en",
-  messages: localesConfigs
-});
-
-export function usI18n(app: App) {
-  app.use(i18n);
-}
-
 /**
  * 国际化转换工具函数
  * @param message message
@@ -37,3 +28,47 @@ export function transformI18n(message: string | object = "", isI18n = false) {
     return message;
   }
 }
+
+/**
+ * 从模块中抽取国际化
+ * @param langs 存放国际化模块
+ * @param prefix 语言 默认 zh-CN
+ * @returns obj 格式：{模块名.**}
+ */
+export function siphonI18n(
+  langs: Record<string, Record<string, any>>,
+  prefix = "zh-CN"
+) {
+  const langsObj: Recordable = {};
+  Object.keys(langs).forEach((key: string) => {
+    let fileName = key.replace(`./${prefix}/`, "").replace(/^\.\//, "");
+    fileName = fileName.substring(0, fileName.lastIndexOf("."));
+    const keyList = fileName.split("/");
+    const moduleName = keyList.shift();
+    const objKey = keyList.join(".");
+    const langFileModule = langs[key].default;
+
+    if (moduleName) {
+      if (objKey) {
+        set(langsObj, moduleName, langsObj[moduleName] || {});
+        set(langsObj[moduleName], objKey, langFileModule);
+      } else {
+        set(langsObj, moduleName, langFileModule || {});
+      }
+    }
+  });
+  return langsObj;
+}
+
+// 此函数只是配合i18n Ally插件来进行国际化智能提示，并无实际意义（只对提示起作用），如果不需要国际化可删除
+export const $t = (key: string) => key;
+
+export const i18n = createI18n({
+  locale: storageLocal.getItem("responsive-locale")?.locale ?? "zh",
+  fallbackLocale: "en",
+  messages: localesConfigs
+});
+
+export function usI18n(app: App) {
+  app.use(i18n);
+}

src/plugins/i18n/zh-CN/buttons.ts

@@ -0,0 +1,21 @@
+export default {
+  hsLoginOut: "退出系统",
+  hsfullscreen: "全屏",
+  hsexitfullscreen: "退出全屏",
+  hsrefreshRoute: "刷新路由",
+  hslogin: "登陆",
+  hsadd: "新增",
+  hsmark: "标记/取消",
+  hssave: "保存",
+  hssearch: "搜索",
+  hsexpendAll: "全部展开",
+  hscollapseAll: "全部折叠",
+  hssystemSet: "打开项目配置",
+  hsdelete: "删除",
+  hsreload: "重新加载",
+  hscloseCurrentTab: "关闭当前标签页",
+  hscloseLeftTabs: "关闭左侧标签页",
+  hscloseRightTabs: "关闭右侧标签页",
+  hscloseOtherTabs: "关闭其他标签页",
+  hscloseAllTabs: "关闭全部标签页"
+};

src/plugins/i18n/zh-CN/menus.ts

@@ -0,0 +1,38 @@
+export default {
+  hshome: "首页",
+  hslogin: "登陆",
+  hssysManagement: "系统管理",
+  hsBaseinfo: "基础信息",
+  hsDict: "字典管理",
+  hseditor: "编辑器",
+  hserror: "错误页面",
+  hsfourZeroFour: "404",
+  hsfourZeroOne: "401",
+  hscomponents: "组件",
+  hsvideo: "视频组件",
+  hsmap: "地图组件",
+  hsdraggable: "拖拽组件",
+  hssplitPane: "切割面板",
+  hsbutton: "按钮组件",
+  hscropping: "图片裁剪",
+  hscountTo: "数字动画",
+  hsselector: "选择器组件",
+  hsflowChart: "流程图",
+  hsseamless: "无缝滚动",
+  hscontextmenu: "右键菜单",
+  hsmenus: "多级菜单",
+  hsmenu1: "菜单1",
+  "hsmenu1-1": "菜单1-1",
+  "hsmenu1-2": "菜单1-2",
+  "hsmenu1-2-1": "菜单1-2-1",
+  "hsmenu1-2-2": "菜单1-2-2",
+  "hsmenu1-3": "菜单1-3",
+  hsmenu2: "菜单2",
+  permission: "权限管理",
+  permissionPage: "页面权限",
+  permissionButton: "按钮权限",
+  hstabs: "标签页操作",
+  hsMenuTree: "菜单树结构",
+  hsguide: "引导页",
+  externalLink: "外链"
+};

src/plugins/vxe-table/index.ts

@@ -65,8 +65,8 @@ VXETable.setup({
   i18n: (key, args) => i18n.global.t(key, args),
   // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
   translate(key, args) {
-    // 例如，只翻译 "message." 开头的键值
+    // 例如，只翻译 "buttons." 开头的键值
-    if (key && key.indexOf("message.") > -1) {
+    if (key && key.indexOf("buttons.") > -1) {
       return i18n.global.t(key, args);
     }
     if (key && key.indexOf("el.") > -1) {

src/router/modules/components.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const componentsRouter = {
@@ -7,7 +8,7 @@ const componentsRouter = {
   redirect: "/components/video",
   meta: {
     icon: "Menu",
-    title: "message.hscomponents",
+    title: $t("menus.hscomponents"),
     i18n: true,
     showLink: true,
     rank: 4
@@ -18,7 +19,7 @@ const componentsRouter = {
       name: "video",
       component: () => import("/@/views/components/video/index.vue"),
       meta: {
-        title: "message.hsvideo",
+        title: $t("menus.hsvideo"),
         showLink: true,
         i18n: true
       }
@@ -28,7 +29,7 @@ const componentsRouter = {
       name: "map",
       component: () => import("/@/views/components/map/index.vue"),
       meta: {
-        title: "message.hsmap",
+        title: $t("menus.hsmap"),
         showLink: true,
         keepAlive: true,
         i18n: true,
@@ -42,7 +43,7 @@ const componentsRouter = {
       name: "draggable",
       component: () => import("/@/views/components/draggable/index.vue"),
       meta: {
-        title: "message.hsdraggable",
+        title: $t("menus.hsdraggable"),
         showLink: true,
         i18n: true,
         transition: {
@@ -57,7 +58,7 @@ const componentsRouter = {
       name: "splitPane",
       component: () => import("/@/views/components/split-pane/index.vue"),
       meta: {
-        title: "message.hssplitPane",
+        title: $t("menus.hssplitPane"),
         showLink: true,
         i18n: true,
         extraIcon: {
@@ -71,7 +72,7 @@ const componentsRouter = {
       name: "button",
       component: () => import("/@/views/components/button/index.vue"),
       meta: {
-        title: "message.hsbutton",
+        title: $t("menus.hsbutton"),
         i18n: true,
         showLink: true
       }
@@ -81,7 +82,7 @@ const componentsRouter = {
       name: "cropping",
       component: () => import("/@/views/components/cropping/index.vue"),
       meta: {
-        title: "message.hscropping",
+        title: $t("menus.hscropping"),
         i18n: true,
         showLink: true
       }
@@ -91,7 +92,7 @@ const componentsRouter = {
       name: "countTo",
       component: () => import("/@/views/components/count-to/index.vue"),
       meta: {
-        title: "message.hscountTo",
+        title: $t("menus.hscountTo"),
         i18n: true,
         showLink: true
       }
@@ -101,7 +102,7 @@ const componentsRouter = {
       name: "selector",
       component: () => import("/@/views/components/selector/index.vue"),
       meta: {
-        title: "message.hsselector",
+        title: $t("menus.hsselector"),
         i18n: true,
         showLink: true
       }
@@ -111,7 +112,7 @@ const componentsRouter = {
       name: "seamlessScroll",
       component: () => import("/@/views/components/seamless-scroll/index.vue"),
       meta: {
-        title: "message.hsseamless",
+        title: $t("menus.hsseamless"),
         i18n: true,
         showLink: true
       }
@@ -121,7 +122,7 @@ const componentsRouter = {
       name: "contextmenu",
       component: () => import("/@/views/components/contextmenu/index.vue"),
       meta: {
-        title: "message.hscontextmenu",
+        title: $t("menus.hscontextmenu"),
         i18n: true,
         showLink: true
       }

src/router/modules/editor.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const editorRouter = {
@@ -7,7 +8,7 @@ const editorRouter = {
   redirect: "/editor/index",
   meta: {
     icon: "Edit",
-    title: "message.hseditor",
+    title: $t("menus.hseditor"),
     i18n: true,
     showLink: true,
     rank: 2
@@ -18,7 +19,7 @@ const editorRouter = {
       name: "reEditor",
       component: () => import("/@/views/editor/index.vue"),
       meta: {
-        title: "message.hseditor",
+        title: $t("menus.hseditor"),
         showLink: true,
         i18n: true,
         keepAlive: true,

src/router/modules/error.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const errorRouter = {
@@ -7,7 +8,7 @@ const errorRouter = {
   redirect: "/error/401",
   meta: {
     icon: "Position",
-    title: "message.hserror",
+    title: $t("menus.hserror"),
     showLink: true,
     i18n: true,
     rank: 7
@@ -18,7 +19,7 @@ const errorRouter = {
       name: "401",
       component: () => import("/@/views/error/401.vue"),
       meta: {
-        title: "message.hsfourZeroOne",
+        title: $t("menus.hsfourZeroOne"),
         i18n: true,
         showLink: true
       }
@@ -28,7 +29,7 @@ const errorRouter = {
       name: "404",
       component: () => import("/@/views/error/404.vue"),
       meta: {
-        title: "message.hsfourZeroFour",
+        title: $t("menus.hsfourZeroFour"),
         i18n: true,
         showLink: true
       }

src/router/modules/externalLink.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const externalLink = {
@@ -6,7 +7,7 @@ const externalLink = {
   component: Layout,
   meta: {
     icon: "Link",
-    title: "message.externalLink",
+    title: $t("menus.externalLink"),
     showLink: true,
     i18n: true,
     rank: 190
@@ -15,7 +16,7 @@ const externalLink = {
     {
       path: "https://github.com/xiaoxian521/vue-pure-admin",
       meta: {
-        title: "message.externalLink",
+        title: $t("menus.externalLink"),
         showLink: true,
         i18n: true,
         rank: 191

src/router/modules/flowchart.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const flowChartRouter = {
@@ -7,7 +8,7 @@ const flowChartRouter = {
   redirect: "/flowChart/index",
   meta: {
     icon: "SetUp",
-    title: "message.hsflowChart",
+    title: $t("menus.hsflowChart"),
     showLink: true,
     i18n: true,
     rank: 1
@@ -18,7 +19,7 @@ const flowChartRouter = {
       name: "flowChart",
       component: () => import("/@/views/flow-chart/index.vue"),
       meta: {
-        title: "message.hsflowChart",
+        title: $t("menus.hsflowChart"),
         i18n: true,
         showLink: true
       }

src/router/modules/guide.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const guideRouter = {
@@ -7,7 +8,7 @@ const guideRouter = {
   redirect: "/guide/index",
   meta: {
     icon: "Guide",
-    title: "message.hsguide",
+    title: $t("menus.hsguide"),
     i18n: true,
     showLink: true,
     rank: 10
@@ -18,7 +19,7 @@ const guideRouter = {
       name: "reGuide",
       component: () => import("/@/views/guide/index.vue"),
       meta: {
-        title: "message.hsguide",
+        title: $t("menus.hsguide"),
         showLink: true,
         i18n: true
       }

src/router/modules/home.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const homeRouter = {
@@ -7,7 +8,7 @@ const homeRouter = {
   redirect: "/welcome",
   meta: {
     icon: "HomeFilled",
-    title: "message.hshome",
+    title: $t("menus.hshome"),
     showLink: true,
     i18n: true,
     rank: 0
@@ -18,7 +19,7 @@ const homeRouter = {
       name: "welcome",
       component: () => import("/@/views/welcome.vue"),
       meta: {
-        title: "message.hshome",
+        title: $t("menus.hshome"),
         i18n: true,
         showLink: true
       }

src/router/modules/menuTree.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const menuTreeRouter = {
@@ -7,7 +8,7 @@ const menuTreeRouter = {
   redirect: "/menuTree/index",
   meta: {
     icon: "RI-node-tree",
-    title: "message.hsMenuTree",
+    title: $t("menus.hsMenuTree"),
     i18n: true,
     showLink: true,
     rank: 9
@@ -18,7 +19,7 @@ const menuTreeRouter = {
       name: "reMenuTree",
       component: () => import("/@/views/menu-tree/index.vue"),
       meta: {
-        title: "message.hsMenuTree",
+        title: $t("menus.hsMenuTree"),
         showLink: true,
         i18n: true
       }

src/router/modules/nested.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const nestedRouter = {
@@ -6,7 +7,7 @@ const nestedRouter = {
   redirect: "/nested/menu1/menu1-1",
   name: "Nested",
   meta: {
-    title: "message.hsmenus",
+    title: $t("menus.hsmenus"),
     icon: "Histogram",
     showLink: true,
     i18n: true,
@@ -18,7 +19,7 @@ const nestedRouter = {
       component: () => import("/@/layout/routerView/parent.vue"),
       name: "Menu1",
       meta: {
-        title: "message.hsmenu1",
+        title: $t("menus.hsmenu1"),
         showLink: true,
         i18n: true,
         keepAlive: true
@@ -30,7 +31,7 @@ const nestedRouter = {
           component: () => import("/@/views/nested/menu1/menu1-1/index.vue"),
           name: "Menu1-1",
           meta: {
-            title: "message.hsmenu1-1",
+            title: $t("menus.hsmenu1-1"),
             showLink: true,
             i18n: true,
             keepAlive: true
@@ -42,7 +43,7 @@ const nestedRouter = {
           name: "Menu1-2",
           redirect: "/nested/menu1/menu1-2/menu1-2-1",
           meta: {
-            title: "message.hsmenu1-2",
+            title: $t("menus.hsmenu1-2"),
             showLink: true,
             i18n: true,
             keepAlive: true
@@ -54,7 +55,7 @@ const nestedRouter = {
                 import("/@/views/nested/menu1/menu1-2/menu1-2-1/index.vue"),
               name: "Menu1-2-1",
               meta: {
-                title: "message.hsmenu1-2-1",
+                title: $t("menus.hsmenu1-2-1"),
                 showLink: true,
                 i18n: true,
                 keepAlive: true
@@ -66,7 +67,7 @@ const nestedRouter = {
                 import("/@/views/nested/menu1/menu1-2/menu1-2-2/index.vue"),
               name: "Menu1-2-2",
               meta: {
-                title: "message.hsmenu1-2-2",
+                title: $t("menus.hsmenu1-2-2"),
                 showLink: true,
                 keepAlive: true,
                 i18n: true,
@@ -83,7 +84,7 @@ const nestedRouter = {
           component: () => import("/@/views/nested/menu1/menu1-3/index.vue"),
           name: "Menu1-3",
           meta: {
-            title: "message.hsmenu1-3",
+            title: $t("menus.hsmenu1-3"),
             showLink: true,
             i18n: true,
             keepAlive: true
@@ -96,7 +97,7 @@ const nestedRouter = {
       name: "Menu2",
       component: () => import("/@/views/nested/menu2/index.vue"),
       meta: {
-        title: "message.hsmenu2",
+        title: $t("menus.hsmenu2"),
         showLink: true,
         i18n: true,
         keepAlive: true

src/router/modules/remaining.ts

@@ -1,3 +1,4 @@
+import { $t } from "/@/plugins/i18n";
 import Layout from "/@/layout/index.vue";
 
 const remainingRouter = [
@@ -6,7 +7,7 @@ const remainingRouter = [
     name: "login",
     component: () => import("/@/views/login.vue"),
     meta: {
-      title: "message.hslogin",
+      title: $t("menus.hslogin"),
       showLink: false,
       i18n: true,
       rank: 101
@@ -18,7 +19,7 @@ const remainingRouter = [
     component: Layout,
     meta: {
       icon: "HomeFilled",
-      title: "message.hshome",
+      title: $t("menus.hshome"),
       i18n: true,
       showLink: false,
       rank: 104

src/store/modules/multiTags.ts

@@ -15,8 +15,8 @@ export const useMultiTagsStore = defineStore({
             path: "/welcome",
             parentPath: "/",
             meta: {
-              title: "message.hshome",
+              title: "menus.hshome",
-              icon: "el-icon-s-home",
+              icon: "HomeFilled",
               i18n: true,
               showLink: true
             }

src/store/modules/user.ts

@@ -58,8 +58,8 @@ export const useUserStore = defineStore({
           path: "/welcome",
           parentPath: "/",
           meta: {
-            title: "message.hshome",
+            title: "menus.hshome",
-            icon: "el-icon-s-home",
+            icon: "HomeFilled",
             i18n: true,
             showLink: true
           }

src/utils/storage/responsive.ts

@@ -41,7 +41,7 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
                 path: "/welcome",
                 parentPath: "/",
                 meta: {
-                  title: "message.hshome",
+                  title: "menus.hshome",
                   i18n: true,
                   icon: "HomeFilled",
                   showLink: true

src/views/nested/menu1/menu1-1/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <p>{{ $t("message.hsmenu1") }}</p>
+    <p>{{ $t("menus.hsmenu1") }}</p>
-    <p style="text-indent: 2em">{{ $t("message.hsmenu1-1") }}</p>
+    <p style="text-indent: 2em">{{ $t("menus.hsmenu1-1") }}</p>
     <el-input v-model="input" />
   </div>
 </template>

src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <p>{{ $t("message.hsmenu1") }}</p>
+    <p>{{ $t("menus.hsmenu1") }}</p>
-    <p style="text-indent: 2em">{{ $t("message.hsmenu1-2") }}</p>
+    <p style="text-indent: 2em">{{ $t("menus.hsmenu1-2") }}</p>
-    <p style="text-indent: 4em">{{ $t("message.hsmenu1-2-1") }}</p>
+    <p style="text-indent: 4em">{{ $t("menus.hsmenu1-2-1") }}</p>
     <el-input v-model="input" />
   </div>
 </template>

src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <p>{{ $t("message.hsmenu1") }}</p>
+    <p>{{ $t("menus.hsmenu1") }}</p>
-    <p style="text-indent: 2em">{{ $t("message.hsmenu1-2") }}</p>
+    <p style="text-indent: 2em">{{ $t("menus.hsmenu1-2") }}</p>
-    <p style="text-indent: 4em">{{ $t("message.hsmenu1-2-2") }}</p>
+    <p style="text-indent: 4em">{{ $t("menus.hsmenu1-2-2") }}</p>
     <el-input v-model="input" />
   </div>
 </template>

src/views/nested/menu1/menu1-3/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <p>{{ $t("message.hsmenu1") }}</p>
+    <p>{{ $t("menus.hsmenu1") }}</p>
-    <p style="text-indent: 2em">{{ $t("message.hsmenu1-3") }}</p>
+    <p style="text-indent: 2em">{{ $t("menus.hsmenu1-3") }}</p>
     <el-input v-model="input" />
   </div>
 </template>

src/views/nested/menu2/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>{{ $t("message.hsmenu2") }}</p>
+    <p>{{ $t("menus.hsmenu2") }}</p>
     <el-input v-model="input" />
   </div>
 </template>

src/views/system/dict/config.vue

@@ -101,13 +101,13 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
             <template #default="{ row }">
               <vxe-button
                 type="text"
-                icon="el-icon-edit"
+                icon="fa fa-pencil-square-o"
                 @click="editConfig(row)"
                 >编辑</vxe-button
               >
               <vxe-button
                 type="text"
-                icon="el-icon-delete"
+                icon="fa fa-trash-o"
                 @click="delConfig(row)"
                 >删除</vxe-button
               >
@@ -140,7 +140,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
               <span class="select-count"
                 >已选中{{ configData.selectRecords.length }}条</span
               >
-              <vxe-button size="small">{{ $t("message.hsdelete") }}</vxe-button>
+              <vxe-button size="small">{{ $t("buttons.hsdelete") }}</vxe-button>
             </span>
           </template>
         </vxe-pager>
@@ -179,10 +179,4 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
 :deep(.el-divider--horizontal) {
   margin: 13px 0;
 }
-
-:deep(.el-icon-close) {
-  &:hover {
-    color: red;
-  }
-}
 </style>

src/views/system/dict/index.vue

@@ -209,28 +209,28 @@ function handleClose() {
       <template #buttons>
         <vxe-input
           v-model="dictData.filterName"
-          :placeholder="$t('message.hssearch')"
+          :placeholder="$t('buttons.hssearch')"
           @keyup="searchEvent"
         ></vxe-input>
       </template>
       <template #tools>
         <vxe-button
-          icon="el-icon-circle-plus-outline"
+          icon="fa fa-plus-square-o"
           status="primary"
           @click="onAdd"
-          >{{ $t("message.hsadd") }}</vxe-button
+          >{{ $t("buttons.hsadd") }}</vxe-button
         >
         <vxe-button
-          icon="el-icon-folder-opened"
+          icon="fa fa-folder-open-o"
           status="primary"
           @click="$refs.xTree.setAllTreeExpand(true)"
-          >{{ $t("message.hsexpendAll") }}</vxe-button
+          >{{ $t("buttons.hsexpendAll") }}</vxe-button
         >
         <vxe-button
-          icon="el-icon-folder"
+          icon="fa fa-folder-o"
           status="primary"
           @click="$refs.xTree.clearTreeExpand()"
-          >{{ $t("message.hscollapseAll") }}</vxe-button
+          >{{ $t("buttons.hscollapseAll") }}</vxe-button
         >
       </template>
     </vxe-toolbar>
@@ -266,23 +266,26 @@ function handleClose() {
       </vxe-table-column>
       <vxe-table-column title="操作" width="330" fixed="right">
         <template #default="{ row }">
-          <vxe-button type="text" icon="el-icon-edit" @click="onEdit(row)"
+          <vxe-button
+            type="text"
+            icon="fa fa-pencil-square-o"
+            @click="onEdit(row)"
             >编辑</vxe-button
           >
           <vxe-button
             type="text"
-            icon="el-icon-circle-plus-outline"
+            icon="fa fa-plus-square-o"
             @click="onAddChild(row)"
             >新增子类型</vxe-button
           >
           <vxe-button
             v-show="row.model"
             type="text"
-            icon="el-icon-setting"
+            icon="fa fa-cog"
             @click="onDeploy(row)"
             >字典配置</vxe-button
           >
-          <vxe-button type="text" icon="el-icon-delete" @click="confirmEvent"
+          <vxe-button type="text" icon="fa fa-trash-o" @click="confirmEvent"
             >删除</vxe-button
           >
         </template>

src/views/system/user/index.vue

@@ -6,6 +6,7 @@ export default {
 
 <script setup lang="ts">
 import { reactive } from "vue";
+import { $t } from "/@/plugins/i18n";
 import { VxeGridProps } from "vxe-table";
 
 const gridOptions = reactive({
@@ -29,19 +30,19 @@ const gridOptions = reactive({
     buttons: [
       {
         code: "insert_actived",
-        name: "message.hsadd",
+        name: $t("buttons.hsadd"),
         status: "perfect",
         icon: "fa fa-plus"
       },
       {
         code: "mark_cancel",
-        name: "message.hsmark",
+        name: $t("buttons.hsmark"),
         status: "perfect",
         icon: "fa fa-trash-o"
       },
       {
         code: "save",
-        name: "message.hssave",
+        name: $t("buttons.hssave"),
         status: "perfect",
         icon: "fa fa-save"
       }