保存进度！

企业级管理系统/web/admin_system/src/layout/Index.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:05:44
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-05 16:35:15
+ * @LastEditTime: 2023-01-06 17:45:34
  * @FilePath: \admin_system\src\layout\index.vue
  * @Description: 
  * 
@@ -44,13 +44,13 @@ export default {
 }
 
 #layout-aside {
-    width: 200px;
-    background-color: #344a5f;
+    width: 175px;
+    background-color: #223142;
     overflow: auto;
 }
 
 #layout-header {
-    /* height: 75px; */
+    height: 50px;
     /* background-color: #77bc99; */
     padding: 0px;
 }

企业级管理系统/web/admin_system/src/layout/components/Aside.vue

@@ -2,28 +2,34 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:30:33
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-05 21:37:17
+ * @LastEditTime: 2023-01-06 18:08:03
  * @FilePath: \admin_system\src\layout\components\Aside.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    <el-menu id="side-bar" default-active="/console" unique-opened="true" background-color="#344a5f" text-color="#fff"
-        active-text-color="#ffd04b">
+    <el-menu id="side-bar" router default-active="/desktop" unique-opened="true" background-color="#223142"
+        text-color="#fff" active-text-color="#ffd04b">
         <template v-for="route in this.routers" :key="route.path">
             <template v-if="!route.hidden">
-                <el-menu-item v-if="!route.children" :index="route.path">
-                    <template #title>{{ route.meta && route.meta.title }}</template>
-                </el-menu-item>
-                <el-sub-menu v-else :index="route.path">
-                    <template #title>{{ route.meta && route.meta.title }}</template>
-                    <template v-for="child in route.children" :key="child.path">
-                        <el-menu-item v-if="!child.hidden" :index="child.path">
-                            <template #title>{{ child.mate && child.mate.title }}</template>
-                        </el-menu-item>
-                    </template>
-                </el-sub-menu>
+                <template v-if="hasOnlyChild(route.children)">
+                    <!-- 当只有一个子路由时，直接渲染子路由 -->
+                    <el-menu-item :index="route.children[0].path">
+                        <template #title>{{ route.children[0].meta && route.children[0].meta.title }}</template>
+                    </el-menu-item>
+                </template>
+                <template v-else>
+                    <!-- 不是一个子路由时，有可能没有子路由，或者是多个子路由 -->
+                    <el-sub-menu v-if="route.children && route.children.length" :index="route.path">
+                        <template #title>{{ route.meta && route.meta.title }}</template>
+                        <template v-for="child in route.children" :key="child.path">
+                            <el-menu-item v-if="!child.hidden" :index="child.path">
+                                <template #title>{{ child.meta && child.meta.title }}</template>
+                            </el-menu-item>
+                        </template>
+                    </el-sub-menu>
+                </template>
             </template>
         </template>
     </el-menu>
@@ -40,6 +46,31 @@ export default {
             routers: null,
         };
     },
+    methods: {
+        //用于判断一个路由是否只有一项子路由
+        hasOnlyChild: function (children)
+        {
+            //防御验证
+            if (!children)
+            {
+                return false;
+            }
+
+            //剔除掉hidden的路由
+            const routes = children.filter((item) =>
+            {
+                return item.hidden ? false : true;
+            });
+
+            if (routes.length === 1)
+            {
+                return true;
+            }
+
+            return false;
+        },
+
+    },
     created()
     {
         this.routers = useRouter().options.routes;
@@ -55,4 +86,13 @@ export default {
     /* border-left: 5px solid #1d74b2; */
     overflow: auto;
 }
+
+.is-active {
+    background-color: #ffffff4f !important;
+    border-left: 5px solid #1d74b2;
+}
+
+.is-opened {
+    border-left: none;
+}
 </style>

企业级管理系统/web/admin_system/src/layout/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:39:04
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-05 16:17:43
+ * @LastEditTime: 2023-01-06 17:10:33
  * @FilePath: \admin_system\src\layout\components\Header.vue
  * @Description: 
  * 
@@ -13,7 +13,7 @@
         <span class="company_name">CPIC</span>
         <div class="version_div">
             <div>测试版</div>
-            <div>3.6.7 x64 Build202208301257</div>
+            <div>3.6.7 x64 Build 202208301257</div>
         </div>
         <div class="buttons_div"></div>
     </div>

企业级管理系统/web/admin_system/src/layout/components/Main.vue

@@ -2,14 +2,14 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:40:03
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-04 11:40:04
+ * @LastEditTime: 2023-01-06 12:54:17
  * @FilePath: \admin_system\src\layout\components\Main.vue
  * @Description: 
  * 
  * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 -->
 <template>
-    Main
+    <router-view />
 </template>
 
 <script>