feat: 修改菜单

src/router/index.ts

@@ -43,7 +43,10 @@ const router = createRouter({
         {
           path: '/public-tracking',
           name: 'Public Tracking',
-          component: () => import('../views/Tracking/src/components/PublicTracking')
+          component: () => import('../views/Tracking/src/components/PublicTracking'),
+          meta: {
+            activeMenu: '/tracking'
+          }
         },
         {
           path: '/public-tracking/detail',
@@ -53,13 +56,16 @@ const router = createRouter({
               '../views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue'
             ),
           meta: {
-            activeMenu: '/public-tracking'
+            activeMenu: '/tracking'
           }
         },
         {
           path: '/login',
           name: 'Login',
-          component: () => import('../views/Login')
+          component: () => import('../views/Login'),
+          meta: {
+            activeMenu: '/tracking'
+          }
         },
         {
           path: '/Operationlog',
@@ -73,6 +79,19 @@ const router = createRouter({
 
 // * 路由拦截 beforeEach
 router.beforeEach(async (to, from, next) => {
+  // 未登录白名单
+  const whiteList = ['/login', '/public-tracking', '/public-tracking/detail']
+  // 判断是否登录
+  if (!whiteList.includes(to.path) && !localStorage.getItem('token')) {
+    if (whiteList.includes(from.path)) {
+      ElMessage.warning('Please log in to use this feature.')
+      console.log('跳转')
+      next(false)
+      return
+    } else {
+      next('/public-tracking')
+    }
+  }
   next()
 })
 

src/views/Layout/src/LayoutView.vue

@@ -69,11 +69,11 @@ const handleMenuCollapse = (val: boolean) => {
   .layout-content {
     padding: 0;
     & > .el-scrollbar {
-      :deep(& > .el-scrollbar__view) {
-        height: 100%;
-      }
       :deep(.el-scrollbar__wrap--hidden-default) {
         border-radius: 0;
+        & > .el-scrollbar__view {
+          height: 100%;
+        }
       }
     }
   }

src/views/Layout/src/components/Header/HeaderView.vue

@@ -27,6 +27,14 @@ const handleLogout = () => {
 const handleLogin = () => {
   router.push('/login')
 }
+
+const test = () => {
+  if (localStorage.getItem('token')) {
+    localStorage.removeItem('token')
+  } else {
+    localStorage.setItem('token', '123')
+  }
+}
 </script>
 
 <template>
@@ -42,6 +50,7 @@ const handleLogin = () => {
       <!-- <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
       <span class="font_family icon-icon_language_b" style="font-size: 16px"></span> -->
 
+      <el-button @click="test">测试</el-button>
       <el-popover
         placement="bottom-end"
         :width="256"

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

@@ -67,24 +67,110 @@ const menuList = [
   }
 ]
 
-const activeMenu = computed((): string => {
-  return (route.meta?.activeMenu as string) || route.path
-})
+const activeMenu = ref()
+activeMenu.value = (route.meta?.activeMenu as string) || route.path
+// console.log('activeMenu', activeMenu.value)
 
-const changeRouter = (path: string) => {
-  router.push({ path })
+// // 未登录白名单
+// const whiteList = ['/login', '/public-tracking', '/public-tracking/detail']
+// // 判断是否允许跳转
+// const isAllowJump = (path: string) => {
+//   // 判断是否登录
+//   if (!whiteList.includes(path) && !localStorage.getItem('token')) {
+//     if (whiteList.includes(route.path)) {
+//       ElMessage.warning('Please log in to use this feature.')
+//       console.log('跳转')
+//       activeMenu.value = (route.meta?.activeMenu as string) || route.path
+//       return false
+//     } else {
+//       ElMessage.warning('Please log in to use this feature.')
+//       return '/public-tracking'
+//     }
+//   } else {
+//     return path
+//   }
+// }
+
+// const changeRouter = (path: string) => {
+//   let toPath = path
+//   if (path === '/tracking' && !localStorage.getItem('token')) {
+//     toPath = '/public-tracking'
+//   }
+//   if (isAllowJump(toPath)) {
+//     router.push(isAllowJump(toPath))
+//   }
+// }
+
+const getAllMenuPaths = (menuList) => {
+  let paths = []
+  menuList.forEach((item) => {
+    paths.push(item.path) // 添加主菜单路径
+    if (item.children && item.children.length > 0) {
+      // 递归添加子菜单路径
+      paths = paths.concat(getAllMenuPaths(item.children))
+    }
+  })
+  return paths
 }
+// 获取所有菜单项的路径（包括子菜单）
+const menuPaths = getAllMenuPaths(menuList)
+
+// 未登录白名单
+const whiteList = ['/login', '/public-tracking', '/public-tracking/detail']
+
+// 判断是否允许跳转
+const isAllowJump = (path) => {
+  // 判断是否登录
+  if (!whiteList.includes(path) && !localStorage.getItem('token')) {
+    ElMessage.warning('Please log in to use this feature.')
+    activeMenu.value = route.path // 保持选中状态不变
+    return false
+  }
+  return true
+}
+
+// 路由跳转函数
+const changeRouter = (path) => {
+  let toPath = path
+  if (path === '/tracking' && !localStorage.getItem('token')) {
+    toPath = '/public-tracking'
+  }
+
+  // 如果允许跳转，执行跳转
+  if (isAllowJump(toPath)) {
+    router.push(toPath)
+    nextTick(() => {
+      activeMenu.value = (route.meta?.activeMenu as string) || route.path // 确保菜单栏选中状态为当前路径
+    })
+  } else {
+    // 如果不允许跳转，保持当前 activeMenu 不变
+    nextTick(() => {
+      activeMenu.value = (route.meta?.activeMenu as string) || route.path // 确保菜单栏选中状态为当前路径
+    })
+  }
+}
+
+// 计算属性，返回当前菜单项
+const computedActiveMenu = computed(() =>
+  menuPaths.includes(activeMenu.value) ? activeMenu.value : ''
+)
 
 const handleCollapseClick = () => {
   isCollapse.value = !isCollapse.value
 }
+const menuRef = ref()
+const test = () => {
+  console.log('test', menuRef.value)
+}
 </script>
 
 <template>
+  <!-- <el-button @click="test">测试</el-button> -->
   <el-menu
+    ref="menuRef"
     class="layout-menu"
     @select="changeRouter"
-    :default-active="activeMenu"
+    :default-active="computedActiveMenu"
     :collapse="isCollapse"
   >
     <template v-for="item in menuList" :key="item.index">

src/views/Login/src/loginView.vue

@@ -22,7 +22,7 @@ watch(status, () => {
     email: false,
     code: false
   }
-  // getCode()
+  getCode()
 })
 
 const loginError = ref({
@@ -35,14 +35,17 @@ const verificationCode = ref()
 // 获取验证码
 const getCode = () => {
   $api.getVerifcationCode().then((res) => {
-    verificationCode.value = `data:image/png;base64,${res}`
+    verificationCode.value = `data:image/png;base64,${res.data.imagePngBase64}`
     console.log(res)
   })
 }
-// getCode()
+getCode()
 
 // 验证当前用户是否存在
 const handleCheckUser = () => {
+  if (!loginForm.value.username) {
+    return
+  }
   // 这里是验证用户是否存在的逻辑
   $api.isUserNameExit({ uname: loginForm.value.username }).then((res) => {
     if (res.code === 200) {

src/views/Tracking/src/components/PublicTracking/src/PublicTrackingSearch.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
 const inputVModel = ref('')
+
+const handleSearchNo = () => {
+  router.push(`/public-tracking/detail?searchNo=${inputVModel.value}`)
+  console.log('search no')
+}
 </script>
 
 <template>
@@ -12,7 +19,7 @@ const inputVModel = ref('')
         placeholder="Search a reference number to see shipment details"
       >
         <template #append>
-          <span class="font_family icon-icon_search_b"></span>
+          <span @click="handleSearchNo" class="font_family icon-icon_search_b"></span>
         </template>
       </el-input>
       <div class="empty">