perf: 同步完整版代码

mock/user.ts

@@ -0,0 +1,23 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/login",
+    method: "post",
+    response: ({ body }) => {
+      if (body.username === "admin") {
+        return {
+          username: "admin",
+          expires: 24 * 60 * 60,
+          accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
+        };
+      } else {
+        return {
+          username: "test",
+          expires: 24 * 60 * 60,
+          accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+        };
+      }
+    }
+  }
+] as MockMethod[];

src/layout/components/panel/index.vue

@@ -54,7 +54,7 @@ emitter.on("openPanel", () => {
 
 .right-panel {
   width: 100%;
-  max-width: 300px;
+  max-width: 315px;
   height: 100vh;
   position: fixed;
   top: 0;
@@ -105,8 +105,8 @@ emitter.on("openPanel", () => {
 
 .right-panel-items {
   margin-top: 60px;
-  height: 100vh;
-  overflow: auto;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
 }
 
 .project-configuration {

src/layout/components/setting/index.vue

@@ -266,6 +266,7 @@ function setLayoutThemeColor(theme: string) {
 
 // 设置ep主题色
 const setEpThemeColor = (color: string) => {
+  // @ts-expect-error
   writeNewStyle(createNewStyle(color));
   useEpThemeStoreHook().setEpThemeColor(color);
   body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
@@ -298,7 +299,7 @@ nextTick(() => {
   settings.weakVal &&
     document.querySelector("html")?.setAttribute("class", "html-weakness");
   settings.tabsVal && tagsChange();
-
+  // @ts-expect-error
   writeNewStyle(createNewStyle(epThemeColor.value));
   dataThemeChange();
 });

src/layout/components/sidebar/horizontal.vue

@@ -46,13 +46,6 @@ watch(
   }
 );
 
-watch(
-  () => route.path,
-  () => {
-    menuSelect(route.path, routers);
-  }
-);
-
 function translationCh() {
   instance.locale = { locale: "zh" };
   locale.value = "zh";

src/layout/components/sidebar/vertical.vue

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

src/layout/hooks/nav.ts

@@ -7,6 +7,7 @@ import { remainingPaths } from "/@/router";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageSession } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
+import { useUserStoreHook } from "/@/store/modules/user";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 
 export function useNav() {
@@ -38,8 +39,7 @@ export function useNav() {
 
   // 退出登录
   function logout() {
-    storageSession.removeItem("info");
-    router.push("/login");
+    useUserStoreHook().logOut();
   }
 
   function backHome() {

src/router/utils.ts

@@ -234,7 +234,11 @@ function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
     } else if (v.meta?.frameSrc) {
       v.component = IFrame;
     } else {
-      const index = modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
+      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会根path保持一致）
+      const index = v?.component
+        ? // @ts-expect-error
+          modulesRoutesKeys.findIndex(ev => ev.includes(v.component))
+        : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
       v.component = modulesRoutes[modulesRoutesKeys[index]];
     }
     if (v.children) {

src/store/modules/permission.ts

@@ -61,8 +61,11 @@ export const usePermissionStore = defineStore({
           break;
       }
     },
-    // 清空缓存页面
+    // 清空缓存
     clearAllCachePage() {
+      this.wholeMenus = [];
+      this.menusTree = [];
+      this.buttonAuth = [];
       this.cachePageList = [];
     }
   }

src/store/modules/user.ts

@@ -2,8 +2,8 @@ import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { userType } from "./types";
 import { router } from "/@/router";
+import { storageSession } from "/@/utils/storage";
 import { getLogin, refreshToken } from "/@/api/user";
-import { storageLocal, storageSession } from "/@/utils/storage";
 import { getToken, setToken, removeToken } from "/@/utils/auth";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 
@@ -33,12 +33,12 @@ export const useUserStore = defineStore({
     },
     // 登入
     async loginByUsername(data) {
-      return new Promise<void>((resolve, reject) => {
+      return new Promise((resolve, reject) => {
         getLogin(data)
-          .then(data => {
-            if (data) {
-              setToken(data);
-              resolve();
+          .then(res => {
+            if (res) {
+              setToken(res);
+              resolve(res);
             }
           })
           .catch(error => {
@@ -51,7 +51,6 @@ export const useUserStore = defineStore({
       this.token = "";
       this.name = "";
       removeToken();
-      storageLocal.clear();
       storageSession.clear();
       useMultiTagsStoreHook().handleTags("equal", [
         {

src/views/login.vue

@@ -8,18 +8,26 @@ import bg from "/@/assets/login/bg.png";
 import avatar from "/@/assets/login/avatar.svg?component";
 import illustration from "/@/assets/login/illustration.svg?component";
 
+import { useUserStoreHook } from "/@/store/modules/user";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
 const router = useRouter();
 
 let user = ref("admin");
 let pwd = ref("123456");
 
 const onLogin = (): void => {
-  storageSession.setItem("info", {
-    username: "admin",
-    accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-  });
-  initRouter("admin").then(() => {});
-  router.push("/");
+  useUserStoreHook()
+    .loginByUsername({ username: user.value, password: pwd.value })
+    .then(async (res: any) => {
+      storageSession.setItem("info", {
+        username: res.username,
+        accessToken: res.accessToken
+      });
+      usePermissionStoreHook().clearAllCachePage();
+      initRouter(res.username);
+      router.push("/");
+    });
 };
 
 function onUserFocus() {