feat: 修改显示的菜单和详情页顶部面包屑展示内容

src/components/VBreadcrumd/src/VBreadcrumd.vue

@@ -1,19 +1,54 @@
 <script setup lang="ts">
-import { useParentPathStore } from '@/stores/modules/parentPath'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 
 const router = useRouter()
-const parentPathStore = useParentPathStore()
+const route = useRoute()
 
+const path = computed(() => {
+  const path = route.path
+  // 检查URL中是否包含'detail'
+  if (path.includes('/detail')) {
+    // 获取'detail'的位置
+    const detailIndex = path.indexOf('/detail')
+    // 从开始到'/detail'前一个'/'的位置的子串
+    const lastSlashIndex = path.lastIndexOf('/', detailIndex - 1)
+    // 如果找到了'/'
+    if (lastSlashIndex !== -1) {
+      // 获取上一段字符串
+      return path.substring(lastSlashIndex + 1, detailIndex)
+    }
+  }
+  // 如果没有找到或者不符合条件，则返回null
+  return null
+})
+watch(
+  () => path.value,
+  (newVal) => {
+    if (newVal) {
+      console.log('pathName:', newVal)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+const mapPathName = {
+  booking: 'Booking',
+  tracking: 'Tracking',
+  'public-tracking': 'Public Tracking'
+}
 const handleGoBack = () => {
-  router.push({ path: parentPathStore.parentPathInfo?.fullPath })
+  router.push({ path: '/' + path.value })
 }
+const pathName = computed(() => {
+  return mapPathName[path.value]
+})
 </script>
 
 <template>
-  <div class="v-breadcrumd" v-if="parentPathStore.parentPathInfo?.name">
+  <div class="v-breadcrumd" v-if="path">
     <span class="font_family icon-icon_back_b" @click="handleGoBack"></span>
-    <span style="color: var(--color-neutral-3)">{{ parentPathStore.parentPathInfo?.name }}</span>
+    <span style="color: var(--color-neutral-3)">{{ pathName }}</span>
     <span class="interval">|</span>
     <span style="font-weight: 700">Detail</span>
   </div>

src/router/index.ts

@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { useParentPathStore } from '@/stores/modules/parentPath'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -25,7 +24,7 @@ const router = createRouter({
           name: 'Booking Detail',
           component: () => import('../views/Booking/src/components/BookingDetail'),
           meta: {
-            parentPath: '/booking'
+            activeMenu: '/booking'
           }
         },
         {
@@ -36,7 +35,10 @@ const router = createRouter({
         {
           path: '/tracking/detail',
           name: 'Tracking Detail',
-          component: () => import('../views/Tracking/src/components/TrackingDetail')
+          component: () => import('../views/Tracking/src/components/TrackingDetail'),
+          meta: {
+            activeMenu: '/tracking'
+          }
         },
         {
           path: '/public-tracking',
@@ -49,7 +51,10 @@ const router = createRouter({
           component: () =>
             import(
               '../views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue'
-            )
+            ),
+          meta: {
+            activeMenu: '/public-tracking'
+          }
         },
         {
           path: '/login',
@@ -68,12 +73,6 @@ const router = createRouter({
 
 // * 路由拦截 beforeEach
 router.beforeEach(async (to, from, next) => {
-  const parentPathStore = useParentPathStore()
-  if (to.path.includes('/detail')) {
-    parentPathStore.setParentPath(from)
-  } else {
-    parentPathStore.clearParentPath()
-  }
   next()
 })
 

src/stores/modules/parentPath.ts

@@ -1,28 +0,0 @@
-import { defineStore } from 'pinia'
-interface ParentPath {
-  parentPathInfo: {
-    fullPath?: string
-    name?: string
-  }
-}
-
-export const useParentPathStore = defineStore('parentPath', {
-  state: (): ParentPath => ({
-    parentPathInfo: JSON.parse(localStorage.getItem('parentPathInfo') as string) || {}
-  }),
-  getters: {},
-  actions: {
-    setParentPath(route: any) {
-      const pathInfo = {
-        name: route.name,
-        fullPath: route.fullPath
-      }
-      localStorage.setItem('parentPath', JSON.stringify(pathInfo))
-      this.parentPathInfo = pathInfo
-    },
-    clearParentPath() {
-      localStorage.removeItem('parentPath')
-      this.parentPathInfo = {}
-    }
-  }
-})

src/views/Layout/src/components/Menu/MenuView.vue

@@ -12,12 +12,12 @@ const menuList = [
     icon: 'icon_data_fill_b',
     path: '/dashboard'
   },
-  {
-    index: '2',
-    label: 'Quote',
-    icon: 'icon_quote__fill_b',
-    path: '/booking/detail'
-  },
+  // {
+  //   index: '2',
+  //   label: 'Quote',
+  //   icon: 'icon_quote__fill_b',
+  //   path: '/booking/detail'
+  // },
   {
     index: '3',
     label: 'Booking',
@@ -30,12 +30,12 @@ const menuList = [
     icon: 'icon_tracking__fill_b',
     path: '/tracking'
   },
-  {
-    index: '5',
-    label: 'Report',
-    icon: 'icon_report__fill_b',
-    path: '/tracking/detail'
-  },
+  // {
+  //   index: '5',
+  //   label: 'Report',
+  //   icon: 'icon_report__fill_b',
+  //   path: '/tracking/detail'
+  // },
   {
     index: '6',
     label: 'System Management',
@@ -43,21 +43,21 @@ const menuList = [
     path: '/test5',
     type: 'list',
     children: [
-      {
-        index: '5-1',
-        label: 'Account Management',
-        path: '/public-tracking'
-      },
-      {
-        index: '5-2',
-        label: 'Permission Management',
-        path: '/public-tracking/detail'
-      },
-      {
-        index: '5-3',
-        label: 'System Configuration',
-        path: '/login'
-      },
+      // {
+      //   index: '5-1',
+      //   label: 'Account Management',
+      //   path: '/public-tracking'
+      // },
+      // {
+      //   index: '5-2',
+      //   label: 'Permission Management',
+      //   path: '/public-tracking/detail'
+      // },
+      // {
+      //   index: '5-3',
+      //   label: 'System Configuration',
+      //   path: '/login'
+      // },
       {
         index: '5-4',
         label: 'Operation Log',
@@ -75,11 +75,8 @@ const changeRouter = (path: string) => {
   router.push({ path })
 }
 
-const emit = defineEmits<{ collapse: [boolean] }>()
-
 const handleCollapseClick = () => {
   isCollapse.value = !isCollapse.value
-  // emit('collapse', isCollapse.value)
 }
 </script>