静态菜单

src/constant/disaster-prevention.ts

@@ -0,0 +1,39 @@
+/**
+ * 灾害防治菜单
+ */
+export const DISASTER_PREVENTION_MENU = [
+  {
+    name: '总览',
+    path: '/disaster-prevention/overview',
+  },
+  {
+    name: '重点区域监测',
+    path: '/disaster-prevention/risk-point-monitoring',
+  },
+  {
+    name: '灾害预警',
+    path: '/disaster-prevention/disaster-warning',
+  },
+  {
+    name: '预防检查',
+    path: '/disaster-prevention/disaster-precaution',
+    children: [
+      {
+        name: '任务管理',
+        path: '/disaster-prevention/disaster-precaution/task-management',
+      },
+      {
+        name: '任务执行',
+        path: '/disaster-prevention/disaster-precaution/task-execution',
+      },
+      {
+        name: '任务模板',
+        path: '/disaster-prevention/disaster-precaution/task-template',
+      },
+    ],
+  },
+  {
+    name: '灾害处置',
+    path: '/disaster-prevention/disaster-control',
+  },
+];

src/layout/MenuLayout.vue

@@ -1,31 +1,67 @@
 <!-- 带有二级菜单的layout -->
 <template>
   <div class="component-container home-container">
-    <aside class="aside"></aside>
+    <aside class="aside">
+      <el-menu :default-active="defaultActive" router class="el-menu-vertical">
+        <template v-for="item in DISASTER_PREVENTION_MENU" :key="item.path">
+          <el-sub-menu v-if="item.children" :index="item.path">
+            <template #title>{{ item.name }}</template>
+            <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
+              {{ child.name }}
+            </el-menu-item>
+          </el-sub-menu>
+          <el-menu-item v-else :index="item.path">
+            {{ item.name }}
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </aside>
     <div class="main">
       <router-view></router-view>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { DISASTER_PREVENTION_MENU } from '@/constant/disaster-prevention';
+  const defaultActive = ref(DISASTER_PREVENTION_MENU[0].path);
+</script>
 
 <style scoped lang="scss">
-.home-container{
-  display: flex;
-  gap: 10cpx;
-  padding: 10cpx;
-}
-.aside,
-.main{
-  height: 100%;
-  border-radius: 4cpx;
-  background: $white-color;
-}
-.aside{
-  width: 270cpx;
-}
-.main{
-  flex: 1;
-}
+  .home-container {
+    display: flex;
+    gap: 10cpx;
+    padding: 10cpx;
+  }
+  .aside,
+  .main {
+    height: 100%;
+    border-radius: 4cpx;
+    background: $white-color;
+  }
+  .aside {
+    width: 270cpx;
+  }
+  .main {
+    flex: 1;
+  }
+  .el-menu-vertical {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 4cpx;
+    .el-menu-item,
+    :deep(.el-sub-menu__title) {
+      font-size: 18cpx;
+      color: #333;
+    }
+    .el-menu-item.is-active {
+      color: $white-color;
+      background-color: $primary-color;
+    }
+    .el-menu-item:first-child.is-active {
+      border-radius: 4cpx 4cpx 0 0;
+    }
+  }
 </style>