perf: 同步完整版代码

2 years ago · d9b62a9e62
24 changed files with 283 additions and 265 deletions
--- a/locales/en.yaml
+++ b/locales/en.yaml
@ -28,3 +28,5 @@ menus:
  permission: Permission Manage
  permissionPage: Page Permission
  permissionButton: Button Permission
+status:
+  hsLoad: Loading...
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@ -28,3 +28,5 @@ menus:
  permission: 权限管理
  permissionPage: 页面权限
  permissionButton: 按钮权限
+status:
+  hsLoad: 加载中...
--- a/mock/asyncRoutes.ts
+++ b/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: []
      }
    }
--- a/package.json
+++ b/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": "git@github.com:xiaoxian521/vue-pure-admin.git",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@ -1,5 +1,5 @@
 {
-  "Version": "3.2.0",
+  "Version": "3.3.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/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())
  );
--- a/src/layout/components/setting/index.vue
+++ b/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"
      }
    }
  ]);
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/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>
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/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"
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/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>
--- a/src/layout/components/tag/index.vue
+++ b/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"
                />
--- a/src/layout/frameView.vue
+++ b/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>
--- a/src/layout/hooks/nav.ts
+++ b/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);
  }

  // 退出登录
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@ -5,7 +5,6 @@ export const routerArrays: Array<RouteConfigs> = [
    parentPath: "/",
    meta: {
      title: "menus.hshome",
-      i18n: true,
      icon: "home-filled"
    }
  }
--- a/src/plugins/i18n.ts
+++ b/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;
--- a/src/router/index.ts
+++ b/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) {
--- a/src/router/modules/error.ts
+++ b/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")
      }
    }
  ]
--- a/src/router/modules/home.ts
+++ b/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")
      }
    }
  ]
--- a/src/router/modules/remaining.ts
+++ b/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
    },
--- a/src/store/modules/multiTags.ts
+++ b/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"
            }
          }
        ],
--- a/src/store/modules/user.ts
+++ b/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"
          }
        }
      ]);
--- a/src/utils/storage/responsive.ts
+++ b/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"
                }
              }
--- a/unocss.config.ts
+++ b/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: {}
 });