路由导航ok

Author: 陈鑫

src/components/GlobalHeader/Menus.tsx

@@ -14,19 +14,23 @@ const Menus = defineComponent({
   },
   setup(props, { slots }) {
     const route = useRoute()
+    const router = useRouter()
     const activeRoute = ref(route.path) // 当前路由
 
+    // 默认展开项
     const openKeys = computed(() => {
       if (props.mode == 'inline') {
         return ['/smart', '/eoms', '/system', '/database']
       }
       return []
-    }) // 默认展开项
+    })
 
+    // 获取显示状态的路由
     const menuLists = computed(() => {
       return getMenus().filter((item) => !item?.meta?.hidden)
-    }) // 获取显示状态的路由
+    })
 
+    // 获取路由列表
     const getMenus = () => {
       let menuList: RouteRecordRaw[] = []
       const routes: Array<RouteRecordRaw> = useRouter().options?.routes || []
@@ -36,11 +40,50 @@ const Menus = defineComponent({
         }
       })
       return menuList
-    } // 获取路由列表
+    }
 
+    //  路由跳转
+    const handleMenuClick = (item: { key: string }) => {
+      router.push(item.key)
+    }
+
+    // 监听路由变化
     watch(route, (val) => {
       activeRoute.value = val.path
-    }) // 监听路由变化
+    })
+
+    // 子级导航渲染
+    const SubItem = (menus: any) => {
+      return (
+        <Menu.SubMenu key={menus.path}>
+          {{
+            title: () => (
+              <>
+                {menus.meta?.icon && (
+                  <span class={`iconfont ${menus.meta.icon} menu-icon`}></span>
+                )}
+                <span>{menus.meta?.title}</span>
+              </>
+            ),
+            default: () => (
+              <>
+                {menus.children.map((menu: any) => {
+                  if (!menu.children || !menu.children.length) {
+                    return (
+                      <Menu.Item key={menu.path}>
+                        <span>{menu.meta?.title}</span>
+                      </Menu.Item>
+                    )
+                  } else {
+                    return SubItem(menu)
+                  }
+                })}
+              </>
+            ),
+          }}
+        </Menu.SubMenu>
+      )
+    }
 
     return () => (
       <div
@@ -50,7 +93,9 @@ const Menus = defineComponent({
           theme="dark"
           selectedKeys={[activeRoute.value]}
           openKeys={openKeys.value}
+          mode={props.mode}
           style={{ lineHeight: '54px' }}
+          onClick={handleMenuClick}
         >
           {menuLists['value'].map((menu) => {
             if (!menu.children || !menu.children.length) {
@@ -62,6 +107,8 @@ const Menus = defineComponent({
                   <span>{menu.meta?.title}</span>
                 </Menu.Item>
               )
+            } else {
+              return SubItem(menu)
             }
           })}
         </Menu>

src/components/GlobalHeader/index.module.less

@@ -76,23 +76,34 @@
           font-size: 15px;
           border-bottom: none;
           top: 0;
+          &:hover {
+            background-color: rgba(255, 255, 255, 0);
+          }
           &-active {
             color: rgba(255, 255, 255, 0.9);
+            background-color: rgba(255, 255, 255, 0.7);
           }
           &-selected {
-            background: #4a4b4c;
+            background-color: #4a4b4c !important;
             position: relative;
             font-weight: 700;
             color: rgba(255, 255, 255, 0.9);
             border-bottom: none;
+            margin: 0;
+            height: 55px;
+            line-height: 55px;
             &::after {
               content: '';
               position: absolute;
               bottom: 0;
-              height: 3px;
+              height: 4px;
               width: 100%;
               background: #0972fe;
               left: 0;
+              z-index: 111;
+              opacity: 1;
+              transform: scaleY(1);
+              top: auto;
             }
           }
         }

src/router/router.config.ts

@@ -1,5 +1,5 @@
 import { RouteRecordRaw } from 'vue-router'
-import { LevelBasicLayout } from '@/layouts';
+import { LevelBasicLayout, RouteLayout } from '@/layouts';
 
 // 导航路由
 const Routes: Array<RouteRecordRaw> = [
@@ -14,6 +14,32 @@ const Routes: Array<RouteRecordRaw> = [
     name: 'database',
     component: () => import(/* webpackChunkName: "database" */ '@/views/database'),
     meta: { title: '数据库配置', hidden: false, icon: 'icon-zichan' }
+  },
+  {
+    path: '/smart',
+    name: 'smart',
+    component: () => import(/* webpackChunkName: "smart" */ '@/views/smart'),
+    meta: { title: '物联管理', hidden: false, icon: 'icon-wulianwang' }
+  },
+  {
+    path: '/eoms',
+    name: 'eoms',
+    component: RouteLayout,
+    meta: { title: '运维配置', hidden: false, icon: 'icon-yunwei1' },
+    children: [
+      {
+        path: "/eoms/fault",
+        name: 'fault',
+        component: () => import(/* webpackChunkName: "fault" */ '@/views/eoms/fault'),
+        meta: { title: '故障处理方案', hidden: false },
+      },
+      {
+        path: "/eoms/alarm",
+        name: 'alarm',
+        component: () => import(/* webpackChunkName: "alarm" */ '@/views/eoms/alarm'),
+        meta: { title: '告警模板管理', hidden: false }
+      }
+    ]
   }
 ]
 

src/views/eoms/alarm/index.module.less

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue'
+
+import styles from './index.module.less'
+
+const Alarm = defineComponent({
+  name: 'Alarm',
+  setup() {
+    return () => <div>这是内容区</div>
+  },
+})
+
+export default Alarm

src/views/eoms/alarm/index.tsx

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue'
+
+import styles from './index.module.less'
+
+const Fault = defineComponent({
+  name: 'Fault',
+  setup() {
+    return () => <div>这是内容区</div>
+  },
+})
+
+export default Fault

src/views/eoms/fault/index.module.less

@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue'
+import { RouteLayout } from '@/layouts'
+
+import styles from './index.module.less'
+
+const Smart = defineComponent({
+  name: 'Smart',
+  setup() {
+    const slots = {
+      default: () => <div>这是内容区</div>,
+    }
+    return () => <RouteLayout v-slots={slots} isSubView={false}></RouteLayout>
+  },
+})
+
+export default Smart