feat(web): 新增系统管理功能并优化界面样式

- 更新路由配置，调整页面结构
- 优化主题样式，自定义 ant-design 样式
- 新增全局样式，包括滚动条、按钮、模态框等

web/src/views/MainView.vue

@@ -1,11 +1,32 @@
 <template>
   <div class="main">
     <div class="header"></div>
+
     <div class="page">
-      <router-view/>
+      <div class="subMenu" v-if="subMenu.length > 0">
+        <div
+          class="subItem"
+          v-for="subItem in subMenu"
+          :key="subItem.name"
+          @click="subMenuClick(subItem)"
+          :class="subCurrentKey == subItem.path ? 'active' : ''"
+        >
+          {{ subItem.title }}
+        </div>
+      </div>
+      <div :class="[subMenu.length > 0 ? 'subcontent' : 'content']">
+         <router-view />
+      </div>
+     
     </div>
     <div class="menu">
-      <div v-for="menu in menuList" :key="menu.name" class="menu-item">
+      <div
+        v-for="menu in menuList"
+        :key="menu.name"
+        class="menu-item"
+        @click="menuClick(menu)"
+        :class="currentKey == menu.path ? 'active' : ''"
+      >
         <i :class="menu.icon"></i>
         {{ menu.name }}
       </div>
@@ -21,29 +42,83 @@ export default {
   components: {},
   data() {
     return {
+      currentKey: '',
+      subCurrentKey: '',
       menuList: [
         {
           name: '系统总览',
           icon: 'icon-xitongguanli'
         },
+        {
+          name: '运行监控',
+          path: '/monitor'
+        },
         {
           name: '系统管理',
-          icon: 'icon-xitongguanli',
+          path: '/system',
           children: [
             {
               name: '用户管理',
-              icon: 'icon-yonghuguanli',
-              children: [
-                {
-                  name: '用户列表',
-                  icon: 'icon-yonghuguanli',
-                  path: '/user/list'
-                }
-              ]
+              path: '/user'
+            },
+            {
+              name: '角色管理',
+              path: '/role'
+            },
+            {
+              name: '权限管理',
+              icon: 'icon-caidanguanli'
+            },
+            {
+              name: '场站管理',
+              icon: 'icon-caidanguanli'
+            },
+            {
+              name: '服务管理',
+              icon: 'icon-bumenguanli'
+            },
+            {
+              name: '策略管理',
+              path: '/policy'
+            },
+            {
+              name: '设备管理',
+              icon: 'icon-rizhiguanli'
+            },
+            {
+              name: '告警日志',
+              icon: 'icon-rizhiguanli'
+            },
+            {
+              name: '系统日志',
+              icon: 'icon-rizhiguanli'
             }
           ]
         }
-      ]
+      ],
+      subMenu: []
+    }
+  },
+  mounted() {
+    this.initRoute()
+  },
+  methods: {
+    initRoute() {
+      console.log(this.$route,this.$router)
+      this.subMenu = this.$route.matched[1].children || []
+
+      this.currentKey = '/' + this.$route.fullPath.split('/')[1]
+      this.subCurrentKey = this.$route.fullPath.split('/')[2]
+      console.log(this.subCurrentKey)
+    },
+    menuClick(menu) {
+      this.currentKey = menu.path
+      this.subMenu = menu.children || []
+      this.$router.push(menu.path)
+    },
+    subMenuClick(subMenu) {
+      this.subCurrentKey = subMenu.path
+      this.$router.push(subMenu.path)
     }
   }
 }
@@ -56,18 +131,44 @@ export default {
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
-.header { 
+.header {
   width: 100%;
-  height: 80px;
-  border: 1px solid red;
+  height: 70px;
 }
-.page{
-  width: calc(100% - 20px);
-  height: calc(100% - 80px - 15px - 47px - 60px);
-  margin: 40px 10px 20px 10px;
-  border-radius: 20px;
-background: #052F4D;
+.subMenu {
+  display: flex;
+  color: #fff;
+  margin-left: 10px;
+  padding-bottom: 20px;
+  .subItem {
+    width: 96px;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    background: #132347;
 
+    border: 1px solid #2169c3;
+    border-radius: 8px;
+    margin-right: 15px;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+  }
+  .active {
+    background: #27a188;
+  }
+}
+.page {
+  width: calc(100% - 20px);
+  height: calc(100% - 70px - 65px - 40px);
+  margin: 20px 10px;
+  border-radius: 20px;
+}
+.content{
+  height: 100%;
+}
+.subcontent{
+  height: calc(100% - 46px);
 }
 .menu {
   position: absolute;
@@ -86,6 +187,11 @@ background: #052F4D;
     color: #fff;
     font-size: 20px;
     font-weight: 700;
+    cursor: pointer;
+  }
+  .active {
+    border: 1px solid $border-color;
+    color: #01b3cd;
   }
 }
 </style>