feature:增加顶栏组合模式。

flipped-aurora · Jun 17, 2024 · 10fe9a8 · 10fe9a8
1 parent df9ca8b
commit 10fe9a8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 47 deletions.
diff --git a/web/src/pinia/modules/router.js b/web/src/pinia/modules/router.js
@@ -2,7 +2,7 @@ import { asyncRouterHandle } from '@/utils/asyncRouter'
 import { emitter } from '@/utils/bus.js'
 import { asyncMenu } from '@/api/menu'
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref,watchEffect,onMounted } from 'vue'
 
 const notLayoutRouterArr = []
 const keepAliveRoutersArr = []
@@ -56,6 +56,37 @@ export const useRouterStore = defineStore('router', () => {
   emitter.on('setKeepAlive', setKeepAliveRouters)
 
   const asyncRouters = ref([])
+
+  const topMenu = ref([])
+
+  const leftMenu = ref([])
+
+  const menuMap = {}
+
+  const topActive = ref("")
+
+
+
+
+
+  const setLeftMenu = (name) => {
+    sessionStorage.setItem('topActive', name)
+    topActive.value = name
+    if(menuMap[name]?.children){
+      leftMenu.value = menuMap[name].children
+    }
+    return menuMap[name]?.children
+  }
+
+  watchEffect(()=>{
+    asyncRouters.value[0]?.children.forEach((item) => {
+      if (item.hidden) return;
+      menuMap[item.name] = item;
+      topMenu.value.push({...item, children: []})
+    });
+    setLeftMenu(sessionStorage.getItem("topActive"))
+  })
+
   const routeMap = ({})
   // 从后台获取动态路由
   const SetAsyncRouter = async() => {
@@ -93,6 +124,10 @@ export const useRouterStore = defineStore('router', () => {
   }
 
   return {
+    topActive,
+    setLeftMenu,
+    topMenu,
+    leftMenu,
     asyncRouters,
     keepAliveRouters,
     asyncRouterFlag,

diff --git a/web/src/view/layout/aside/combinationMode.vue b/web/src/view/layout/aside/combinationMode.vue
@@ -2,13 +2,13 @@
   <div class="h-full">
     <div v-if="mode==='head'" class="bg-white text-slate-700 dark:text-slate-300 mx-2 dark:bg-slate-900 flex items-center w-full overflow-auto">
       <el-menu
-        :default-active="active"
+        :default-active="routerStore.topActive"
         mode="horizontal"
         class="border-r-0 border-b-0 w-[calc(100%-100px)] flex gap-1 items-center box-border h-[calc(100%-1px)]"
         unique-opened
-        @select="selectMenuItem"
+        @select="(index, _, ele)=>selectMenuItem(index, _, ele,true)"
       >
-        <template v-for="item in topMenu">
+        <template v-for="item in routerStore.topMenu">
           <aside-component
             v-if="!item.hidden"
             :key="item.name"
@@ -32,9 +32,9 @@
         :default-active="active"
         class="border-r-0 w-full"
         unique-opened
-        @select="selectMenuItem"
+        @select="(index, _, ele)=>selectMenuItem(index, _, ele,false)"
       >
-        <template v-for="item in leftMenu">
+        <template v-for="item in routerStore.leftMenu">
           <aside-component
             v-if="!item.hidden"
             :key="item.name"
@@ -59,7 +59,7 @@
 </template>
 <script setup>
 import AsideComponent from "@/view/layout/aside/asideComponent/index.vue";
-import { ref, provide, watchEffect, computed,reactive } from "vue";
+import { ref, provide, watchEffect, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useRouterStore } from "@/pinia/modules/router";
 import { useAppStore } from "@/pinia";
@@ -78,14 +78,12 @@ defineProps({
   },
 })
 
-const leftMenu = ref([])
-const topMenu = ref([])
-
 const route = useRoute();
 const router = useRouter();
 const routerStore = useRouterStore();
 const isCollapse = ref(false);
 const active = ref("");
+const topActive = ref("");
 const layoutSideWidth = computed(() => {
   if (!isCollapse.value) {
     return config.value.layout_side_width;
@@ -94,24 +92,10 @@ const layoutSideWidth = computed(() => {
   }
 });
 
-
-
-
-const menuMap ={}
-
 watchEffect(() => {
   active.value = route.meta.activeName || route.name;
 });
 
-watchEffect(() => {
-  routerStore.asyncRouters[0].children.forEach((item) => {
-    if (item.hidden) return;
-    menuMap[item.name] = item;
-    topMenu.value.push({...item, children: []})
-  });
-
-});
-
 watchEffect(() => {
   if (device.value === "mobile") {
     isCollapse.value = true;
@@ -122,7 +106,7 @@ watchEffect(() => {
 
 provide("isCollapse", isCollapse);
 
-const selectMenuItem = (index, _, ele, aaa) => {
+const selectMenuItem = (index, _, ele,top) => {
   const query = {};
   const params = {};
   routerStore.routeMap[index]?.parameters &&
@@ -137,16 +121,17 @@ const selectMenuItem = (index, _, ele, aaa) => {
   if (index.indexOf("http://") > -1 || index.indexOf("https://") > -1) {
     window.open(index);
   } else {
-
-    if(menuMap[index].children) {
-      leftMenu.value = menuMap[index].children
+    if(!top){
+      router.push({ name: index, query, params });
+      return
+    }
+    if (!routerStore.setLeftMenu(index)){
+      router.push({ name: index, query, params });
     }
-    console.log(leftMenu.value)
-    // router.push({ name: index, query, params });
   }
 };
 
 const toggleCollapse = () => {
   isCollapse.value = !isCollapse.value;
 };
-</script>
+</script>
diff --git a/web/src/view/layout/header/index.vue b/web/src/view/layout/header/index.vue
@@ -7,25 +7,23 @@
   <div class="flex justify-between fixed top-0 left-0 right-0 z-10 h-16 bg-white text-slate-700 dark:text-slate-300  dark:bg-slate-900 shadow dark:shadow-gray-700 flex items-center px-2">
     <div
       class="flex items-center cursor-pointer flex-1"
-      @click="router.push({ path: '/' })"
     >
-      <img
-        alt
-        class="h-12 bg-white rounded-full"
-        :src="$GIN_VUE_ADMIN.appLogo"
-      >
-      <div
-        v-if="!isMobile"
-        class="inline-flex font-bold text-2xl ml-2"
-        :class="(config.side_mode === 'head' || config.side_mode === 'combination') &&'min-w-fit'"
-      >
-        {{ $GIN_VUE_ADMIN.appName }}
+      <div class="flex items-center cursor-pointer" @click="router.push({ path: '/' })">
+        <img
+          alt
+          class="h-12 bg-white rounded-full"
+          :src="$GIN_VUE_ADMIN.appLogo"
+        >
+        <div
+          v-if="!isMobile"
+          class="inline-flex font-bold text-2xl ml-2"
+          :class="(config.side_mode === 'head' || config.side_mode === 'combination') &&'min-w-fit'"
+        >
+          {{ $GIN_VUE_ADMIN.appName }}
+        </div>
       </div>
 
-      <gva-aside v-if="config.side_mode === 'head' && !isMobile" class="flex-1"/>
-      <gva-aside v-if="config.side_mode === 'combination' && !isMobile" mode="head" class="flex-1" />
-
-      <el-breadcrumb v-show="!isMobile" v-else class="ml-4">
+      <el-breadcrumb v-show="!isMobile" v-if="config.side_mode !== 'combination'&&config.side_mode !== 'combination'" class="ml-4">
         <el-breadcrumb-item
           v-for="item in matched.slice(1, matched.length)"
           :key="item.path"
@@ -35,6 +33,8 @@
           }}
         </el-breadcrumb-item>
       </el-breadcrumb>
+      <gva-aside v-if="config.side_mode === 'head' && !isMobile" class="flex-1" />
+      <gva-aside v-if="config.side_mode === 'combination' && !isMobile" mode="head" class="flex-1" />
     </div>
 
     <div class="ml-2 flex items-center">