feat: 调整页面顶部菜单栏

components.d.ts

@@ -55,6 +55,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
@@ -63,6 +64,7 @@ declare module 'vue' {
     ImageView: typeof import('./src/components/ImageView.vue')['default']
     LogList: typeof import('./src/components/LogList.vue')['default']
     NavMenu: typeof import('./src/components/NavMenu.vue')['default']
+    NavMenuItem: typeof import('./src/components/NavMenuItem.vue')['default']
     RenderColumn: typeof import('./src/components/RenderColumn.vue')['default']
     RightClickMenu: typeof import('./src/components/RightClickMenu.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/NavMenuItem.vue

+<template>
+  <router-link
+    v-if="!hasChildren"
+    :to="item.index"
+    class="nav-menu-item"
+    :class="{ 'is-active': isActive }"
+  >
+    {{ item.label }}
+  </router-link>
+
+  <div
+    v-else
+    class="nav-menu-item has-children"
+    :class="{ 'is-active': isActive }"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <span class="nav-menu-item-label">{{ item.label }}</span>
+    <div v-show="panelVisible" class="mega-panel">
+      <div v-for="group in item.children" :key="group.id" class="mega-group">
+        <div class="mega-group-title">{{ group.label }}</div>
+        <div class="mega-group-items">
+          <router-link
+            v-for="child in group.children"
+            :key="child.id"
+            :to="child.index"
+            class="mega-item"
+            @click="panelVisible = false"
+          >
+            <span class="mega-item-text" :title="child.label">{{
+              child.label
+            }}</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import type { MenuItem } from '@/router/menu'
+
+const props = defineProps<{
+  item: MenuItem
+}>()
+
+const route = useRoute()
+const panelVisible = ref(false)
+
+const hasChildren = computed(
+  () => !!props.item.children && props.item.children.length > 0,
+)
+
+const isRouteIndex = (index: string) => index.startsWith('/')
+
+const isActive = computed(() => {
+  return checkActive(props.item)
+})
+
+function checkActive(menuItem: MenuItem): boolean {
+  if (isRouteIndex(menuItem.index) && route.path === menuItem.index) {
+    return true
+  }
+  if (menuItem.children) {
+    return menuItem.children.some((child) => checkActive(child))
+  }
+  return false
+}
+
+const onMouseEnter = () => {
+  panelVisible.value = true
+}
+
+const onMouseLeave = () => {
+  panelVisible.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.nav-menu-item {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 16px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.2s;
+  position: relative;
+
+  &:hover .nav-menu-item-label {
+    color: #409eff;
+    font-weight: 500;
+  }
+  &.is-active {
+    color: #409eff;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: #409eff;
+    }
+  }
+  &.is-active .nav-menu-item-label {
+    font-weight: 500;
+  }
+}
+
+.has-children {
+  > span {
+    pointer-events: none;
+  }
+}
+
+.mega-panel {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  padding: 12px 0;
+  z-index: 2000;
+  min-width: 280px;
+  width: 580px;
+}
+
+.mega-group {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 20px;
+
+  & + & {
+    border-top: 1px solid #f0f0f0;
+  }
+}
+
+.mega-group-title {
+  font-weight: bold;
+  color: #303133;
+  font-size: 14px;
+  white-space: nowrap;
+  min-width: 80px;
+  line-height: 32px;
+}
+
+.mega-group-items {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.mega-item {
+  display: block;
+  min-width: 0;
+  padding: 6px 12px;
+  color: #333;
+  font-size: 14px;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &:hover {
+    color: #409eff;
+  }
+
+  &.router-link-exact-active {
+    color: #409eff;
+    font-weight: 600;
+  }
+}
+
+.mega-item-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/components/SideBar.vue

@@ -441,7 +441,7 @@ watch(getLogisticDrawer, async (value: boolean) => {
 <style lang="scss" scoped>
 .tool_warper {
   position: absolute;
-  top: 50px;
+  top: 60px;
   right: 0;
   bottom: 0;
   width: 40px;

src/components/navmenu.md

+# 顶部菜单修改
+
+## 菜单
+
+### 概览
+
+### 物流
+
+- 物流管理
+  - 物流公司
+  - 物流方式
+  - 物流分区
+  - 物流报价
+  - 运费试算
+  - 物流跟踪
+  - 发货地址
+- 规则设置
+  - 申报规则
+  - 分拣配置
+
+### 库存
+
+- 库存管理
+  - 入库申请单
+  - 仓库预警
+  - 入库单
+  - 出库单
+  - 备货计划
+- 仓库管理
+  - 仓库管理
+  - 库位管理
+  - 仓库规则
+- 仓库规则
+  - 共享库存设置
+
+### 订单
+
+- 订单处理
+  - 定制订单
+  - POD 订单
+  - POD 订单(CN)
+  - POD 订单(US)
+  - 工厂订单(NEW)
+  - 取消后订单处理
+- 订单查询
+  - POD(CN)订单跟踪
+  - POD(US)订单跟踪
+- 订单规则
+  - POD(US)派单规则
+  - 配货分拣规则
+
+### 供应
+
+- 采购生产
+  - 备货计划
+  - 备货订单
+  - 打版管理
+- 供应管理
+  - 供应商管理
+
+### 财务
+
+- 对账管理
+  - 定制对账单
+  - POD(CN)对账单
+  - POD(US)对账单
+
+### 发货单
+
+- 发货单查询
+  - 定制发货单
+  - POD 发货单
+
+### 系统
+
+- 系统管理
+  - 用户管理
+  - 功能角色管理
+- 系统设置
+  - 工厂设置
+  - 下载生产客户端
+
+其中菜单的数据结构为
+
+```ts
+interface MenuItem {
+  index: string
+  id: number
+  label: string
+  children?: MenuItem[]
+}
+// 菜单数据结构
+const menu = [
+  {
+    route: 'xxx', // 路由地址
+    path: 'xxx', // 菜单路径
+    url: 'xxx', // 菜单url
+    id: 1, // 菜单id
+    pid: 0, // 父级id
+    type: 0, // 菜单类型 0: 菜单 1: 按钮
+    sortNo: 1, // 排序
+    enable: true, // 是否启用，用于权限控制
+    includeNamespace: '', // 包含命名空间
+    excludeNamespace: '', // 排除命名空间，用于权限控制
+    children: [
+      {
+        route: 'xxx', // 二级菜单不可点击 路由为空
+        path: 'xxx', // 二级菜单路径
+        url: 'xxx', // 二级菜单url
+        id: 1, // 菜单id
+        pid: 0, // 父级id
+        type: 0, // 菜单类型 0: 菜单 1: 按钮
+        sortNo: 1, // 排序
+        enable: true, // 是否启用，用于权限控制
+        children: [], // 三级菜单 结构与二级菜单相同
+        label: 'xxx', // 菜单名称
+      },
+    ], //二级菜单
+    label: 'xxx', // 菜单名称
+  },
+]
+```
+
+如果有菜单有子级的话，不可点击
\ No newline at end of file

src/views/Home.vue

@@ -5,10 +5,12 @@
     <div class="container">
       <RouterView />
     </div>
+    <SideBar />
   </div>
 </template>
 <script setup lang="ts">
 import NavMenu from '@/components/NavMenu.vue'
+import SideBar from '@/components/SideBar.vue'
 </script>
 <style lang="scss" scoped>
 .home {

src/views/setting/settingIndex.vue

@@ -8,12 +8,8 @@
     </div>
     <div class="cardBox">
       <div class="card-box-item-container">
-        <div
-          v-for="(item, index) in formList"
-          :key="index"
-          class="card-box-item"
-        >
-          <template v-if="item.type === 'RIIN'">
+        <template v-for="(item, index) in formList" :key="index">
+          <div v-if="item.type === 'RIIN'" class="card-box-item">
             <div class="formBox">
               <div class="form-item">
                 <span>转至RIIN生产</span>
@@ -65,8 +61,8 @@
               @click="saveConfiguration(item, index)"
               >保存配置</ElButton
             >
-          </template>
-          <template v-if="item.type === 'TRACK'">
+          </div>
+          <div v-if="item.type === 'TRACK'" class="card-box-item">
             <div class="formBox">
               <div class="form-item">
                 <span>物流轨迹跟踪</span>
@@ -118,8 +114,8 @@
               @click="saveConfiguration(item, index)"
               >保存配置</ElButton
             >
-          </template>
-        </div>
+          </div>
+        </template>
         <div class="card-box-item">
           <div class="formBox">
             <div class="form-item">