fix: 修复标签页未根据权限显示

src/api/mock.ts

@@ -1,11 +1,11 @@
 import { http } from "../utils/http";
 
 // 地图数据
-export const mapJson = (data?: object): any => {
+export const mapJson = (data?: object) => {
   return http.request("get", "/getMapInfo", data);
 };
 
 // echarts数据
-export const echartsJson = (data?: object): any => {
+export const echartsJson = (data?: object) => {
   return http.request("get", "/getEchartsInfo", data);
 };

src/api/routes.ts

@@ -1,5 +1,5 @@
 import { http } from "../utils/http";
 
-export const getAsyncRoutes = (data?: object): any => {
+export const getAsyncRoutes = (data?: object) => {
   return http.request("get", "/getAsyncRoutes", data);
 };

src/api/user.ts

@@ -1,16 +1,16 @@
 import { http } from "../utils/http";
 
 // 获取验证码
-export const getVerify = (): any => {
+export const getVerify = () => {
   return http.request("get", "/captcha");
 };
 
 // 登录
-export const getLogin = (data: object): any => {
+export const getLogin = (data: object) => {
   return http.request("post", "/login", data);
 };
 
 // 注册
-export const getRegist = (data: object): any => {
+export const getRegist = (data: object) => {
   return http.request("post", "/register", data);
 };

src/layout/components/tag/index.vue

@@ -45,7 +45,7 @@
           :key="key"
           style="display: flex; align-items: center"
         >
-          <li v-if="item.show" @click="selectTag(item, key)">
+          <li v-if="item.show" @click="selectTag(key, item)">
             <component :is="item.icon" :key="key" />
             {{ item.text }}
           </li>
@@ -112,6 +112,7 @@ let refreshButton = "refresh-button";
 let routerArrays: Array<object> = [
   {
     path: "/welcome",
+    parentPath: "/",
     meta: {
       title: "message.hshome",
       icon: "el-icon-s-home",
@@ -215,6 +216,7 @@ export default {
             if (arrItem.path === value || pathConcat === value) {
               routerArrays.push({
                 path: value,
+                parentPath: `/${parentPath.split("/")[1]}`,
                 meta: arrItem.meta
               });
               st.routesInStorage = routerArrays;
@@ -255,6 +257,7 @@ export default {
           st.routesInStorage = routerArrays = [
             {
               path: "/welcome",
+              parentPath: "/",
               meta: {
                 title: "message.hshome",
                 icon: "el-icon-s-home",
@@ -294,7 +297,7 @@ export default {
     }
 
     function deleteMenu(item, tag?: string) {
-      deleteDynamicTag(item, route.path, tag);
+      deleteDynamicTag(item, item.path, tag);
     }
 
     function onClickDrop(key, item, selectRoute) {
@@ -360,8 +363,8 @@ export default {
     }
 
     // 触发右键中菜单的点击事件
-    function selectTag(item, key) {
-      onClickDrop(key, {}, currentSelect.value);
+    function selectTag(key, item) {
+      onClickDrop(key, item, currentSelect.value);
     }
 
     function closeMenu() {

src/main.ts

@@ -31,6 +31,7 @@ app.use(Storage, {
     default: Storage.getData(undefined, "routesInStorage") ?? [
       {
         path: "/welcome",
+        parentPath: "/",
         meta: {
           title: "message.hshome",
           icon: "el-icon-s-home",

src/router/index.ts

@@ -1,25 +1,27 @@
 import {
-  createRouter,
-  createWebHashHistory,
   Router,
-  RouteComponent
+  createRouter,
+  RouteComponent,
+  createWebHashHistory
 } from "vue-router";
-
-import Layout from "/@/layout/index.vue";
-import homeRouter from "./modules/home";
-import flowChartRouter from "./modules/flowchart";
-import editorRouter from "./modules/editor";
-import componentsRouter from "./modules/components";
-import nestedRouter from "./modules/nested";
-import errorRouter from "./modules/error";
-import externalLink from "./modules/externalLink";
-import remainingRouter from "./modules/remaining"; //静态路由
-
 import { i18n } from "/@/plugins/i18n";
-import { getAsyncRoutes } from "/@/api/routes";
-import { storageSession } from "../utils/storage";
+import NProgress from "/@/utils/progress";
+import { storageSession, storageLocal } from "/@/utils/storage";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
+// 静态路由
+import homeRouter from "./modules/home";
+import Layout from "/@/layout/index.vue";
+import errorRouter from "./modules/error";
+import editorRouter from "./modules/editor";
+import nestedRouter from "./modules/nested";
+import externalLink from "./modules/externalLink";
+import remainingRouter from "./modules/remaining";
+import flowChartRouter from "./modules/flowchart";
+import componentsRouter from "./modules/components";
+// 动态路由
+import { getAsyncRoutes } from "/@/api/routes";
+
 // https://cn.vitejs.dev/guide/features.html#glob-import
 const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
 
@@ -41,12 +43,12 @@ export const ascending = arr => {
 };
 
 // 将所有静态路由导出
-export const constantRoutesArr = ascending(constantRoutes).concat(
-  ...remainingRouter
-);
+export const constantRoutesArr: Array<RouteComponent> = ascending(
+  constantRoutes
+).concat(...remainingRouter);
 
-// 过滤后端传来的动态路由重新生成规范路由
-export const addAsyncRoutes = (arrRoutes: Array<string>) => {
+// 过滤后端传来的动态路由 重新生成规范路由
+export const addAsyncRoutes = (arrRoutes: Array<RouteComponent>) => {
   if (!arrRoutes || !arrRoutes.length) return;
   arrRoutes.forEach((v: any) => {
     if (v.redirect) {
@@ -61,7 +63,7 @@ export const addAsyncRoutes = (arrRoutes: Array<string>) => {
   return arrRoutes;
 };
 
-const router = createRouter({
+const router: Router = createRouter({
   history: createWebHashHistory(),
   routes: ascending(constantRoutes).concat(...remainingRouter),
   scrollBehavior(to, from, savedPosition) {
@@ -79,7 +81,7 @@ const router = createRouter({
   }
 });
 
-export const initRouter = (name, next?, to?) => {
+export const initRouter = name => {
   return new Promise(resolve => {
     getAsyncRoutes({ name }).then(({ info }) => {
       if (info.length === 0) {
@@ -98,7 +100,6 @@ export const initRouter = (name, next?, to?) => {
             // 最终路由进行升序
             ascending(router.options.routes);
             router.addRoute(v.name, v);
-            if (next && to) next({ ...to, replace: true });
             usePermissionStoreHook().changeSetting(info);
           }
           resolve(router);
@@ -122,8 +123,6 @@ export function resetRouter() {
   });
 }
 
-import NProgress from "../utils/progress";
-
 const whiteList = ["/login", "/register"];
 
 router.beforeEach((to, _from, next) => {
@@ -137,9 +136,24 @@ router.beforeEach((to, _from, next) => {
     if (_from?.name) {
       next();
     } else {
+      // 刷新
       if (usePermissionStoreHook().wholeRoutes.length === 0)
-        initRouter(name.username, next, to).then((router: Router) => {
+        initRouter(name.username).then((router: Router) => {
           router.push(to.path);
+          // 刷新页面更新标签栏与页面路由匹配
+          const localRoutes = storageLocal.getItem(
+            "responsive-routesInStorage"
+          );
+          const optionsRoutes = router.options?.routes;
+          const newLocalRoutes = [];
+          optionsRoutes.forEach(ors => {
+            localRoutes.forEach(lrs => {
+              if (ors.path === lrs.parentPath) {
+                newLocalRoutes.push(lrs);
+              }
+            });
+          });
+          storageLocal.setItem("responsive-routesInStorage", newLocalRoutes);
         });
       next();
     }

src/store/modules/permission.ts

@@ -6,7 +6,8 @@ import { constantRoutesArr, ascending } from "/@/router/index";
 export const usePermissionStore = defineStore({
   id: "pure-permission",
   state: () => ({
-    constantRoutes: constantRoutesArr, //静态路由
+    // 静态路由
+    constantRoutes: constantRoutesArr,
     wholeRoutes: [],
     buttonAuth: []
   }),

src/views/welcome.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import Flop from "/@/components/ReFlop";
 import { ref, computed, onMounted, nextTick } from "vue";
-import { deviceDetection } from "/@/utils/deviceDetection";
 import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
 import { echartsJson } from "/@/api/mock";
 import echarts from "/@/plugins/echarts";
@@ -9,7 +7,6 @@ import { ECharts } from "echarts";
 
 //折线图实例
 let brokenLine: ECharts;
-let mobile = ref<boolean>(deviceDetection());
 let date: Date = new Date();
 let loading = ref<boolean>(true);
 
@@ -167,29 +164,41 @@ tryOnUnmounted(() => {
 
 <template>
   <div class="welcome">
-    <el-affix>
-      <div class="top-content">
-        <div class="left-mark">
-          <img
-            src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
-            title="直达仓库地址"
-            alt
-            @click="openDepot"
-          />
-          <span>{{ greetings }}</span>
-        </div>
-        <Flop v-if="!mobile" />
+    <el-card class="top-content">
+      <div class="left-mark">
+        <img
+          src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
+          title="直达仓库地址"
+          alt
+          @click="openDepot"
+        />
+        <span>{{ greetings }}</span>
       </div>
-    </el-affix>
+    </el-card>
 
     <!-- 图表 -->
-    <el-card class="box-card">
+
+    <el-space wrap>
+      <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i">
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+            <el-button class="button" type="text">Operation button</el-button>
+          </div>
+        </template>
+        <div v-for="o in 4" :key="o" class="text item">
+          {{ "List item " + o }}
+        </div>
+      </el-card>
+    </el-space>
+
+    <!-- <el-card class="box-card">
       <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
         <template #default>
           <div id="brokenLine"></div>
         </template>
       </el-skeleton>
-    </el-card>
+    </el-card> -->
   </div>
 </template>
 
@@ -197,16 +206,13 @@ tryOnUnmounted(() => {
 .welcome {
   width: 100%;
   height: 100%;
-  margin-top: 1px;
 
   .top-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 120px;
+    height: 60px;
     background: #fff;
-    padding: 20px;
-    border-bottom: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
 
     .left-mark {
       display: flex;
@@ -214,12 +220,16 @@ tryOnUnmounted(() => {
 
       img {
         display: block;
-        width: 72px;
-        height: 72px;
+        width: 50px;
+        height: 50px;
         border-radius: 50%;
         margin-right: 10px;
         cursor: pointer;
       }
+
+      span {
+        font-size: 14px;
+      }
     }
   }