perf: 同步完整版代码

locales/en.yaml

@@ -28,3 +28,5 @@ menus:
   permission: Permission Manage
   permissionPage: Page Permission
   permissionButton: Button Permission
+status:
+  hsLoad: Loading...

locales/zh-CN.yaml

@@ -28,3 +28,5 @@ menus:
   permission: 权限管理
   permissionPage: 页面权限
   permissionButton: 按钮权限
+status:
+  hsLoad: 加载中...

mock/asyncRoutes.ts

@@ -7,7 +7,6 @@ const permissionRouter = {
   meta: {
     title: "menus.permission",
     icon: "lollipop",
-    i18n: true,
     rank: 7
   },
   children: [
@@ -15,8 +14,7 @@ const permissionRouter = {
       path: "/permission/page/index",
       name: "permissionPage",
       meta: {
-        title: "menus.permissionPage",
-        i18n: true
+        title: "menus.permissionPage"
       }
     },
     {
@@ -24,7 +22,6 @@ const permissionRouter = {
       name: "permissionButton",
       meta: {
         title: "menus.permissionButton",
-        i18n: true,
         authority: []
       }
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pure-admin-thin",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "private": true,
   "scripts": {
     "dev": "cross-env --max_old_space_size=4096 vite",
@@ -26,16 +26,16 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@ctrl/tinycolor": "^3.4.0",
+    "@ctrl/tinycolor": "^3.4.1",
     "@pureadmin/components": "^1.0.6",
-    "@vueuse/core": "^8.3.1",
+    "@vueuse/core": "^8.4.2",
     "@vueuse/motion": "^2.0.0-beta.12",
-    "@vueuse/shared": "^8.3.1",
+    "@vueuse/shared": "^8.4.2",
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "css-color-function": "^1.3.3",
-    "dayjs": "^1.11.0",
-    "element-plus": "^2.1.11",
+    "dayjs": "^1.11.2",
+    "element-plus": "2.1.11",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -45,7 +45,7 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.13",
+    "pinia": "^2.0.14",
     "qrcode": "^1.5.0",
     "qs": "^6.10.2",
     "resize-observer-polyfill": "^1.5.1",
@@ -53,7 +53,7 @@
     "rgb-hex": "^4.0.0",
     "vue": "^3.2.33",
     "vue-i18n": "^9.2.0-beta.35",
-    "vue-router": "^4.0.14",
+    "vue-router": "^4.0.15",
     "vue-types": "^4.1.1"
   },
   "devDependencies": {
@@ -75,8 +75,8 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
-    "@vitejs/plugin-legacy": "^1.8.1",
-    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-legacy": "^1.8.2",
+    "@vitejs/plugin-vue": "^2.3.2",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
@@ -97,7 +97,7 @@
     "rimraf": "3.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.50.1",
+    "sass": "^1.51.0",
     "stylelint": "^14.3.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
@@ -105,11 +105,11 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
-    "unocss": "^0.32.13",
+    "unocss": "^0.33.2",
     "vite": "^2.9.8",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-remove-console": "^0.0.7",
-    "vite-svg-loader": "2.2.0",
+    "vite-svg-loader": "^3.3.0",
     "vue-eslint-parser": "^8.2.0"
   },
   "repository": "[email protected]:xiaoxian521/vue-pure-admin.git",

public/serverConfig.json

@@ -1,5 +1,5 @@
 {
-  "Version": "3.2.0",
+  "Version": "3.3.0",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,

src/layout/components/search/components/SearchModal.vue

@@ -68,7 +68,7 @@ function search() {
   resultOptions.value = flatMenusData.filter(
     menu =>
       keyword.value &&
-      transformI18n(menu.meta?.title, menu.meta?.i18n)
+      transformI18n(menu.meta?.title)
         .toLocaleLowerCase()
         .includes(keyword.value.toLocaleLowerCase().trim())
   );

src/layout/components/setting/index.vue

@@ -157,8 +157,7 @@ function onReset() {
       parentPath: "/",
       meta: {
         title: "menus.hshome",
-        icon: "home-filled",
-        i18n: true
+        icon: "home-filled"
       }
     }
   ]);

src/layout/components/sidebar/breadCrumb.vue

@@ -65,7 +65,7 @@ const getBreadcrumb = (): void => {
       {
         path: "/welcome",
         parentPath: "/",
-        meta: { title: "menus.hshome", i18n: true }
+        meta: { title: "menus.hshome" }
       } as unknown as RouteLocationMatched
     ].concat(matched);
   }
@@ -104,10 +104,10 @@ const handleLink = (item: RouteLocationMatched): any => {
         <span
           v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
           class="no-redirect"
-          >{{ transformI18n(item.meta.title, item.meta.i18n) }}</span
+          >{{ transformI18n(item.meta.title) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
-          {{ transformI18n(item.meta.title, item.meta.i18n) }}
+          {{ transformI18n(item.meta.title) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>

src/layout/components/sidebar/mixNav.vue

@@ -123,7 +123,7 @@ function translationEn() {
           <div v-show="route.meta.icon" :class="['el-icon', route.meta.icon]">
             <component :is="useRenderIcon(route.meta && route.meta.icon)" />
           </div>
-          <span>{{ transformI18n(route.meta.title, route.meta.i18n) }}</span>
+          <span>{{ transformI18n(route.meta.title) }}</span>
           <FontIcon
             v-if="route.meta.extraIcon"
             width="30px"

src/layout/components/sidebar/sidebarItem.vue

@@ -167,13 +167,13 @@ function resolvePath(routePath) {
         :style="getDivStyle"
       >
         <span :style="getMenuTextStyle">
-          {{ transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n) }}
+          {{ transformI18n(onlyOneChild.meta.title) }}
         </span>
       </div>
       <template #title>
         <div :style="getDivStyle">
           <span v-if="!menuMode">{{
-            transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+            transformI18n(onlyOneChild.meta.title)
           }}</span>
           <el-tooltip
             v-else
@@ -182,18 +182,14 @@ function resolvePath(routePath) {
             :disabled="!onlyOneChild.showTooltip"
           >
             <template #content>
-              {{
-                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
-              }}
+              {{ transformI18n(onlyOneChild.meta.title) }}
             </template>
             <span
               ref="menuTextRef"
               :style="getMenuTextStyle"
               @mouseover="hoverMenu(onlyOneChild)"
             >
-              {{
-                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
-              }}
+              {{ transformI18n(onlyOneChild.meta.title) }}
             </span>
           </el-tooltip>
           <FontIcon
@@ -221,9 +217,7 @@ function resolvePath(routePath) {
           :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
         />
       </div>
-      <span v-if="!menuMode">{{
-        transformI18n(props.item.meta.title, props.item.meta.i18n)
-      }}</span>
+      <span v-if="!menuMode">{{ transformI18n(props.item.meta.title) }}</span>
       <el-tooltip
         v-else
         placement="top"
@@ -231,7 +225,7 @@ function resolvePath(routePath) {
         :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
       >
         <template #content>
-          {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
+          {{ transformI18n(props.item.meta.title) }}
         </template>
         <div
           ref="menuTextRef"
@@ -239,7 +233,7 @@ function resolvePath(routePath) {
           @mouseover="hoverMenu(props.item)"
         >
           <span :style="getSpanStyle">
-            {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
+            {{ transformI18n(props.item.meta.title) }}
           </span>
         </div>
       </el-tooltip>

src/layout/components/tag/index.vue

@@ -3,6 +3,7 @@ import {
   ref,
   watch,
   unref,
+  toRaw,
   reactive,
   nextTick,
   computed,
@@ -318,7 +319,6 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
           parentPath: "/",
           meta: {
             title: "menus.hshome",
-            i18n: true,
             icon: "home-filled"
           }
         },
@@ -662,7 +662,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
           @click="tagOnClick(item)"
         >
           <router-link :to="item.path"
-            >{{ transformI18n(item.meta.title, item.meta.i18n) }}
+            >{{ transformI18n(item.meta.title) }}
           </router-link>
           <span
             v-if="
@@ -702,7 +702,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
           style="display: flex; align-items: center"
         >
           <li v-if="item.show" @click="selectTag(key, item)">
-            <component :is="item.icon" :key="key" />
+            <component :is="toRaw(item.icon)" :key="key" />
             {{ t(item.text) }}
           </li>
         </div>
@@ -736,7 +736,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
                 :disabled="item.disabled"
               >
                 <component
-                  :is="item.icon"
+                  :is="toRaw(item.icon)"
                   :key="key"
                   style="margin-right: 6px"
                 />

src/layout/frameView.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="frame" v-loading="loading">
+  <div
+    class="frame"
+    v-loading="loading"
+    :element-loading-text="t('status.hsLoad')"
+  >
     <iframe :src="frameSrc" class="frame-iframe" ref="frameRef" />
   </div>
 </template>
+
 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { ref, unref, onMounted, nextTick } from "vue";
 
+const { t } = useI18n();
 const loading = ref(false);
 const currentRoute = useRoute();
 const frameSrc = ref<string>("");
@@ -45,7 +52,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .frame {
-  height: 100vh;
+  height: calc(100vh - 88px);
   z-index: 998;
 
   .frame-iframe {
@@ -58,6 +65,6 @@ onMounted(() => {
 }
 
 .main-content {
-  margin: 0 !important;
+  margin: 2px 0 0 !important;
 }
 </style>

src/layout/hooks/nav.ts

@@ -37,9 +37,8 @@ export function useNav() {
   // 动态title
   function changeTitle(meta: routeMetaType) {
     const Title = getConfig().Title;
-    if (Title)
-      document.title = `${transformI18n(meta.title, meta.i18n)} | ${Title}`;
-    else document.title = transformI18n(meta.title, meta.i18n);
+    if (Title) document.title = `${transformI18n(meta.title)} | ${Title}`;
+    else document.title = transformI18n(meta.title);
   }
 
   // 退出登录

src/layout/types.ts

@@ -5,7 +5,6 @@ export const routerArrays: Array<RouteConfigs> = [
     parentPath: "/",
     meta: {
       title: "menus.hshome",
-      i18n: true,
       icon: "home-filled"
     }
   }

src/plugins/i18n.ts

@@ -30,15 +30,11 @@ export const localesConfigs = {
 };
 
 /**
- * 国际化转换工具函数
+ * 国际化转换工具函数（自动读取根目录locales文件夹下文件进行国际化匹配）
  * @param message message
- * @param isI18n  如果true,获取对应的消息,否则返回本身
- * @returns message
+ * @returns 转化后的message
  */
-export function transformI18n(
-  message: string | unknown | object = "",
-  isI18n: boolean | unknown = false
-) {
+export function transformI18n(message: any = "") {
   if (!message) {
     return "";
   }
@@ -50,7 +46,11 @@ export function transformI18n(
     return message[locale?.value];
   }
 
-  if (isI18n) {
+  const key = message.match(/(\S*)\./)?.[1];
+  if (key && Object.keys(siphonI18n("zh-CN")).includes(key)) {
+    return i18n.global.t.call(i18n.global.locale, message);
+  } else if (!key && Object.keys(siphonI18n("zh-CN")).includes(message)) {
+    // 兼容非嵌套形式的国际化写法
     return i18n.global.t.call(i18n.global.locale, message);
   } else {
     return message;

src/router/index.ts

@@ -90,11 +90,8 @@ router.beforeEach((to: toRouteType, _from, next) => {
       if (!item.meta.title) return "";
       const Title = getConfig().Title;
       if (Title)
-        document.title = `${transformI18n(
-          item.meta.title,
-          item.meta?.i18n
-        )} | ${Title}`;
-      else document.title = transformI18n(item.meta.title, item.meta?.i18n);
+        document.title = `${transformI18n(item.meta.title)} | ${Title}`;
+      else document.title = transformI18n(item.meta.title);
     });
   if (name) {
     if (_from?.name) {

src/router/modules/error.ts

@@ -8,7 +8,6 @@ const errorRouter = {
   meta: {
     icon: "information-line",
     title: $t("menus.hserror"),
-    i18n: true,
     rank: 9
   },
   children: [
@@ -17,8 +16,7 @@ const errorRouter = {
       name: "403",
       component: () => import("/@/views/error/403.vue"),
       meta: {
-        title: $t("menus.hsfourZeroOne"),
-        i18n: true
+        title: $t("menus.hsfourZeroOne")
       }
     },
     {
@@ -26,8 +24,7 @@ const errorRouter = {
       name: "404",
       component: () => import("/@/views/error/404.vue"),
       meta: {
-        title: $t("menus.hsfourZeroFour"),
-        i18n: true
+        title: $t("menus.hsfourZeroFour")
       }
     },
     {
@@ -35,8 +32,7 @@ const errorRouter = {
       name: "500",
       component: () => import("/@/views/error/500.vue"),
       meta: {
-        title: $t("menus.hsFive"),
-        i18n: true
+        title: $t("menus.hsFive")
       }
     }
   ]

src/router/modules/home.ts

@@ -9,7 +9,6 @@ const homeRouter = {
   meta: {
     icon: "home-filled",
     title: $t("menus.hshome"),
-    i18n: true,
     rank: 0
   },
   children: [
@@ -18,8 +17,7 @@ const homeRouter = {
       name: "welcome",
       component: () => import("/@/views/welcome.vue"),
       meta: {
-        title: $t("menus.hshome"),
-        i18n: true
+        title: $t("menus.hshome")
       }
     }
   ]

src/router/modules/remaining.ts

@@ -9,7 +9,6 @@ const remainingRouter = [
     meta: {
       title: $t("menus.hslogin"),
       showLink: false,
-      i18n: true,
       rank: 101
     }
   },
@@ -19,7 +18,6 @@ const remainingRouter = [
     meta: {
       icon: "home-filled",
       title: $t("menus.hshome"),
-      i18n: true,
       showLink: false,
       rank: 104
     },

src/store/modules/multiTags.ts

@@ -17,8 +17,7 @@ export const useMultiTagsStore = defineStore({
             parentPath: "/",
             meta: {
               title: "menus.hshome",
-              icon: "home-filled",
-              i18n: true
+              icon: "home-filled"
             }
           }
         ],

src/store/modules/user.ts

@@ -68,8 +68,7 @@ export const useUserStore = defineStore({
           parentPath: "/",
           meta: {
             title: "menus.hshome",
-            icon: "home-filled",
-            i18n: true
+            icon: "home-filled"
           }
         }
       ]);

src/utils/storage/responsive.ts

@@ -46,7 +46,6 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
                 parentPath: "/",
                 meta: {
                   title: "menus.hshome",
-                  i18n: true,
                   icon: "home-filled"
                 }
               }

unocss.config.ts

@@ -12,6 +12,10 @@ export default defineConfig({
   presets: [presetMini({ dark: "class" }), presetAttributify(), presetUno()],
   transformers: [transformerDirectives(), transformerVariantGroup()],
   exclude: [`${__dirname}/node_modules/**/*`],
-  shortcuts: {},
+  shortcuts: {
+    "wh-full": "w-full h-full",
+    "flex-ac": "flex justify-around items-center",
+    "flex-bc": "flex justify-between items-center"
+  },
   theme: {}
 });