fix: router-travel

src/layout/routerTravel.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="router-travel" >
-    <div class="route-list" >
+  <div class="router-travel"  ref="routeTravelDom"  >
+    <div class="route-list" ref="routeListDom"  @wheel="horizontalScroll">
       <div
         :class="[
           'route',
@@ -21,6 +21,25 @@
       </a-space>
       </div>
     </div>
+    <div class="expend-button" ref="expendButtonDom" >
+      <a-space>
+        <a-dropdown>
+          <a class="ant-dropdown-link" @click.prevent>
+            <MoreOutlined style="font-size: 24px;" />
+          </a>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item>
+                <a href="javascript:;" @click="useRouterTravel.closeOtherPage">关闭其他页</a>
+              </a-menu-item>
+              <a-menu-item>
+                <a href="javascript:;" @click="reloadPage">刷新当前页</a>
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </a-space>
+    </div>
   </div>
 </template>
 
@@ -28,13 +47,19 @@
 import { ref } from 'vue'
 import { useRouterTravelStore } from '@/store'
 import { ReloadIconTsx } from '@/components/MicroComponents'
-import { CloseOutlined } from '@ant-design/icons-vue'
+import { CloseOutlined, MoreOutlined } from '@ant-design/icons-vue'
 import { useSchedulerOnce } from '@/hooks'
 
 const useRouterTravel = useRouterTravelStore()
 
 const loading = ref<boolean>(false)
 
+const routeTravelDom = ref<HTMLElement>()
+
+const routeListDom = ref<HTMLElement>()
+
+const expendButtonDom = ref<HTMLElement>()
+
 const onChangeRoute = (item) => useRouterTravel.setCurrentRoute(item)
 
 const reloadPage = () => {
@@ -51,6 +76,12 @@ const delRouter = (path: string) => {
   useRouterTravel.del(path)
 }
 
+const horizontalScroll = (event) => {
+  const x = event.deltaY > 0 ? 100 : -100
+  routeTravelDom.value!.scrollBy(x, 0)
+  event.preventDefault()
+}
+
 </script>
 
 <style lang="less" scoped >
@@ -58,30 +89,39 @@ const delRouter = (path: string) => {
 .router-travel {
   width: 100%;
   height: 46px;
-  padding-left: 12px;
   background-color: #fff;
   overflow: hidden;
+  overflow-x: scroll;
   border:  1px solid rgba(5, 5, 5, 0.06);
   margin-left: -1px;
-  // box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
   .route-list {
+    width: 100%;
+    min-width: 1200px;
+    padding-left: 12px;
     display: flex;
     margin-top: 5px;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
     .route {
-      min-width: 100px;
       height: 40px;
       line-height: 40px;
-      // text-align: right;
-      border-radius: 8px 8px 0px 0px;
+      border-radius: 8px 8px 0px -0px;
       border: 1px solid rgba(5, 5, 5, 0.06);
       background: rgba(0, 0, 0, 0.02);
       cursor: pointer;
       margin-right: 4px;
       padding: 0 8px;
+      box-sizing: border-box;
       transition: all 0.2s;
-      display: flex;
+      display: inline-flex;
       justify-content: center;
       align-items: center;
+      white-space: nowrap;
     }
 
     .active {
@@ -89,6 +129,32 @@ const delRouter = (path: string) => {
       background-color: #fff;
     }
   }
+
+  .router-list ::-webkit-scrollbar {
+    background: transparent;
+    width: 0 !important;
+    height: 0;
+  }
+
+  .expend-button {
+    height: 43px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    z-index: 1;
+    position: fixed;
+    right: 0px;
+    background-color: #fff;
+    box-shadow: 0 0px 4px rgba(0,21,41,.12);
+    padding: 0 12px;
+    box-sizing: border-box;
+  }
 }
 
+.router-travel::-webkit-scrollbar {
+    background: transparent;
+    width: 0 !important;
+    height: 0;
+  }
 </style>

src/pages/Iot/dashboard/deviceAccess/index.vue

@@ -38,7 +38,8 @@
     </a-card>
 
     <!-- 资源 -->
-    <a-card title="资源概览" style="margin-top: 20px">
+    <a-card title="资源概览" style="margin-top: 20px"
+    >
       <a-row :gutter="[8, 8]" justify="space-between" >
         <a-col
           v-for="item in sourceList"

src/store/index.ts

@@ -5,3 +5,5 @@ export { useDesignStore } from './modules/designStore/designStore'
 export { useUserStore } from './modules/user/index'
 
 export { useRouterTravelStore } from './modules/commonStore/routerTravelStore'
+
+export { useAppRouter } from './router'

src/store/modules/commonStore/routerTravelStore.ts

@@ -1,10 +1,12 @@
-
 import { defineStore } from 'pinia'
 import { ref, nextTick, computed } from 'vue'
 import { RouteRecordRaw } from 'vue-router'
 import router, { routes } from '@/router'
+import { useAppRouter } from '@/store/router'
 
 export const useRouterTravelStore = defineStore('routerTravelStore', () => {
+  const appRouter = useAppRouter()
+
   const history = ref<RouteRecordRaw[]>([])
 
   const currentRoute = ref<RouteRecordRaw>()
@@ -41,6 +43,8 @@ export const useRouterTravelStore = defineStore('routerTravelStore', () => {
       currenRouteIndex.value = history.value.length - 1
     }
     currentRoute.value = route
+
+    console.log('父节点:', appRouter.findRootRoute(route.path))
   }
 
   const setCurrentRoute = (route: RouteRecordRaw) => {
@@ -49,6 +53,11 @@ export const useRouterTravelStore = defineStore('routerTravelStore', () => {
     router.push(currentRoute.value!.path)
   }
 
+  const closeOtherPage = () => {
+    history.value = [JSON.parse(JSON.stringify(routes[1].children[0])), currentRoute.value]
+    currenRouteIndex.value = history.value.length - 1
+  }
+
   init()
 
   return {
@@ -58,7 +67,8 @@ export const useRouterTravelStore = defineStore('routerTravelStore', () => {
     keyCount,
     setCurrentRoute,
     push,
-    del
+    del,
+    closeOtherPage
   }
 }, {
   persist: true

src/store/router.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ConstantStore } from '@/enum/store'
 import { reactive, watch } from 'vue'
 import RootRouter from '@/router'
-import VueRouter from 'vue-router'
+import VueRouter, { RouteRecordRaw } from 'vue-router'
 
 const initAppRouterState: ROUTER.RouterRecords = {
   navbar: {
@@ -15,6 +15,7 @@ const initAppRouterState: ROUTER.RouterRecords = {
     openKeys: []
   }
 }
+
 export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
   const appRouter = reactive<ROUTER.RouterRecords>(initAppRouterState)
 
@@ -44,15 +45,50 @@ export const useAppRouter = defineStore(ConstantStore.ROUTER, () => {
     }
   }
 
-  watch(
-    () => RootRouter.currentRoute,
-    () => {
-      console.log('RootRouter.currentRoute:', RootRouter.currentRoute)
-    }
-  )
+  // 根据当前子路由，逐级向上查找到根路由
+  function findRootRoute (data, path: string) {
+    const routes = RootRouter.options.routes as RouteRecordRaw[]
+
+    // const fn = (routes: RouteRecordRaw[]) => {
+    //   for (let index = 0; index < routes.length; index++) {
+    //     if (routes[index].path === path) {
+    //       return routes[index]
+    //     } else {
+    //       fn(routes[index].children)
+    //     }
+    //   }
+    //   if (route.path === path) return true
+    //   else if (route.children && route.children.length > 0) {
+    //     fn(route.children)
+    //   } else return false
+    // }
+
+    // for (let index = 0; index < routes.length; index++) {
+    //   if (routes[index].path === path) {
+    //     return routes[index]
+    //   } else {
+    //     fn(routes[index].children)
+    //   }
+    // }
+
+    // for (const node of data) {
+    //   if (node.path === path) {
+    //     // 如果找到匹配的 path，表示当前节点就是根节点
+    //     return node
+    //   } else if (node.children) {
+    //     // 如果当前节点有子节点，递归搜索子节点
+    //     const result = findRootRoute(node.children, path)
+    //     if (result) {
+    //       // 如果在子节点中找到匹配的 path，返回子节点的结果
+    //       return result
+    //     }
+    //   }
+    // }
+  }
 
   return {
     router: appRouter,
-    changeNavbarRoute
+    changeNavbarRoute,
+    findRootRoute: (path) => findRootRoute(RootRouter.options.routes, path)
   }
 })