perf: 同步完整版代码

package.json

@@ -26,15 +26,15 @@
   ],
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.0",
-    "@pureadmin/components": "^1.0.2",
-    "@vueuse/core": "^8.2.0",
+    "@pureadmin/components": "^1.0.6",
+    "@vueuse/core": "^8.2.6",
     "@vueuse/motion": "^2.0.0-beta.12",
-    "@vueuse/shared": "^8.2.0",
+    "@vueuse/shared": "^8.2.6",
     "animate.css": "^4.1.1",
     "axios": "^0.26.1",
     "css-color-function": "^1.3.3",
     "dayjs": "^1.11.0",
-    "element-plus": "^2.1.8",
+    "element-plus": "^2.1.9",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -49,8 +49,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^1.0.11",
     "rgb-hex": "^4.0.0",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.0-beta.33",
+    "vue": "^3.2.33",
+    "vue-i18n": "^9.2.0-beta.35",
     "vue-router": "^4.0.14",
     "vue-types": "^4.1.1"
   },
@@ -74,9 +74,9 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
-    "@vitejs/plugin-legacy": "^1.8.0",
+    "@vitejs/plugin-legacy": "^1.8.1",
     "@vitejs/plugin-vue": "^2.3.1",
-    "@vitejs/plugin-vue-jsx": "^1.3.9",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "autoprefixer": "^10.4.2",
@@ -104,12 +104,12 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
-    "unplugin-element-plus": "^0.3.2",
-    "vite": "^2.9.1",
+    "unplugin-element-plus": "^0.4.0",
+    "vite": "^2.9.5",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-remove-console": "^0.0.7",
     "vite-plugin-style-import": "1.4.1",
-    "vite-plugin-windicss": "^1.8.3",
+    "vite-plugin-windicss": "^1.8.4",
     "vite-svg-loader": "2.2.0",
     "vue-eslint-parser": "^8.2.0",
     "windicss": "^3.5.1"

src/layout/components/navbar.vue

@@ -24,6 +24,7 @@ const {
   toggleSideBar,
   pureApp,
   username,
+  avatarsStyle,
   getDropdownItemStyle
 } = useNav();
 
@@ -93,8 +94,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ username }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">
@@ -169,7 +170,6 @@ function translationEn() {
     }
 
     .el-dropdown-link {
-      width: 100px;
       height: 48px;
       padding: 10px;
       display: flex;

src/layout/components/sidebar/horizontal.vue

@@ -30,6 +30,7 @@ const {
   handleResize,
   menuSelect,
   username,
+  avatarsStyle,
   getDropdownItemStyle
 } = useNav();
 
@@ -46,6 +47,13 @@ watch(
   }
 );
 
+watch(
+  () => route.path,
+  () => {
+    menuSelect(route.path, routers);
+  }
+);
+
 function translationCh() {
   instance.locale = { locale: "zh" };
   locale.value = "zh";
@@ -114,8 +122,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ username }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/mixNav.vue

@@ -33,6 +33,7 @@ const {
   resolvePath,
   pureApp,
   username,
+  avatarsStyle,
   getDropdownItemStyle
 } = useNav();
 
@@ -166,8 +167,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ username }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/sidebarItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 import path from "path";
 import { useNav } from "../../hooks/nav";
 import { childrenType } from "../../types";
 import { transformI18n } from "/@/plugins/i18n";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 
 const { pureApp } = useNav();
 const menuMode = ["vertical", "mix"].includes(pureApp.layout);

src/layout/components/sidebar/vertical.vue

@@ -51,6 +51,7 @@ watch(
   () => route.path,
   () => {
     getSubMenuData(route.path);
+    menuSelect(route.path, routers);
   }
 );
 </script>

src/layout/hooks/nav.ts

@@ -9,6 +9,8 @@ import { storageSession } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 
+const errorInfo = "当前路由配置不正确，请检查配置";
+
 export function useNav() {
   const pureApp = useAppStoreHook();
   // 用户名
@@ -24,6 +26,10 @@ export function useNav() {
     };
   });
 
+  const avatarsStyle = computed(() => {
+    return username ? { marginRight: "10px" } : "";
+  });
+
   const isCollapse = computed(() => {
     return !pureApp.getSidebarStatus;
   });
@@ -59,6 +65,7 @@ export function useNav() {
   }
 
   function resolvePath(route) {
+    if (!route.children) return console.error(errorInfo);
     const httpReg = /^http(s?):\/\//;
     const routeChildPath = route.children[0]?.path;
     if (httpReg.test(routeChildPath)) {
@@ -77,6 +84,7 @@ export function useNav() {
     }
     // 找到当前路由的信息
     function findCurrentRoute(indexPath: string, routes) {
+      if (!routes) return console.error(errorInfo);
       return routes.map(item => {
         if (item.path === indexPath) {
           if (item.redirect) {
@@ -113,6 +121,7 @@ export function useNav() {
     isCollapse,
     pureApp,
     username,
+    avatarsStyle,
     getDropdownItemStyle
   };
 }

src/mockProdServer.ts

@@ -1,7 +1,11 @@
 import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
-import asyncRoutesMock from "../mock/asyncRoutes";
 
-export const mockModules = [...asyncRoutesMock];
+const modules = import.meta.globEager("../mock/*.ts");
+const mockModules = [];
+
+Object.keys(modules).forEach(key => {
+  mockModules.push(...modules[key].default);
+});
 
 export function setupProdMockServer() {
   createProdMockServer(mockModules);

src/style/element-plus.scss

@@ -36,7 +36,12 @@
   z-index: 99999 !important;
 }
 
-// 自定义popover的类名
+/* 重置button中icon的margin */
+.reset-margin [class*="el-icon"] + span {
+  margin-left: 2px !important;
+}
+
+/* 自定义popover的类名 */
 .pure-popper {
   padding: 0 !important;
 }

src/style/sidebar.scss

@@ -241,7 +241,6 @@
       }
 
       .el-dropdown-link {
-        width: 100px;
         height: 48px;
         padding: 10px;
         display: flex;

src/utils/tree.ts

@@ -117,3 +117,59 @@ export function appendFieldByUniqueId(
   }
   return menuTree;
 }
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export function handleTree(
+  data,
+  id?: string,
+  parentId?: string,
+  children?: string
+) {
+  const config = {
+    id: id || "id",
+    parentId: parentId || "parentId",
+    childrenList: children || "children"
+  };
+
+  const childrenListMap = {};
+  const nodeIds = {};
+  const tree = [];
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  }
+
+  for (const t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+  return tree;
+}