基本布局

src/components/Layout.vue

@@ -1,28 +1,115 @@
 <template>
   <div id="layout" class="layout-container">
-    <el-aside width="200px" class="nav-sidebar">
+    <el-aside class="nav-sidebar">
       <div class="logo">
-        <el-image src="/logo.png" fit="contain" />
+        <el-image src="/turing.png" fit="contain" />
       </div>
-      <el-menu :default-active="activeIndex" class="el-menu-part" router>
+      <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
-        <el-menu-item index="/">告警管理</el-menu-item>
+        <el-radio-button :value="false">expand</el-radio-button>
-        <el-menu-item index="/test">测试</el-menu-item>
+        <el-radio-button :value="true">collapse</el-radio-button>
+      </el-radio-group> -->
+      <el-menu :default-active="activeIndex" class="el-menu-part" router :collapse="isCollapse">
+        <el-menu-item index="/">
+          <el-icon>
+            <WarnTriangleFilled />
+          </el-icon>
+          <template #title><span>告警展示</span></template>
+        </el-menu-item>
+        <el-menu-item index="/test">
+          <el-icon>
+            <document />
+          </el-icon>
+          <template #title><span>测试</span></template>
+        </el-menu-item>
+        <el-sub-menu index="1">
+          <template #title>
+            <el-icon>
+              <location />
+            </el-icon>
+            <span>功能面板</span>
+          </template>
+          <el-menu-item index="/alertChart">
+            <el-icon>
+              <WarningFilled />
+            </el-icon>
+            <template #title><span>功能点1测试</span></template>
+          </el-menu-item>
+          <el-menu-item index="/statistics">
+            <el-icon>
+              <document />
+            </el-icon>
+            <template #title><span>功能点2测试</span></template>
+          </el-menu-item>
+        </el-sub-menu>
       </el-menu>
     </el-aside>
+    <div class="content-layout">
+      <!-- 头部区域 -->
+      <el-header class="nav-header">
         
+        <div class="header-right">
+          <!-- 用户头像下拉菜单 -->
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+              <el-avatar shape="square"> 用户 </el-avatar>
+              <span class="username">Soybean</span>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>
+                  <el-icon>
+                    <User />
+                  </el-icon> 用户中心
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <el-icon>
+                    <SwitchButton />
+                  </el-icon> 退出登录
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-header>
+
+      <!-- 主内容区域 -->
       <el-main class="main-content">
         <router-view />
       </el-main>
+
+      <!-- 页脚区域 -->
+      <el-footer class="nav-footer">
+        Powered by AI
+      </el-footer>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import {
+  Document,
+  WarningFilled,
+  Location,
+  User,
+  SwitchButton,
+  WarnTriangleFilled,
+  Setting,
+} from '@element-plus/icons-vue'
+import { el } from 'element-plus/es/locale/index.mjs';
 
 const route = useRoute();
 const activeIndex = ref(route.path);
 
+const isCollapse = ref(false)
+// const handleOpen = (key: string, keyPath: string[]) => {
+//   console.log(key, keyPath)
+// }
+// const handleClose = (key: string, keyPath: string[]) => {
+//   console.log(key, keyPath)
+// }
+
 watch(
   () => route.path,
   (newPath) => {
@@ -37,14 +124,18 @@ watch(
   height: 100%;
   width: 100%;
   margin: 1px;
-  /* padding: 1px; */
+  padding: 1px;
 
 }
 
 .nav-sidebar {
-  background-color: #1f2d3d;
+  width: 200px;
+  background-color: #001529;
   /* width: 200px; */
   color: #fff;
+  min-height: 100vh;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
 
 .logo {
@@ -68,14 +159,85 @@ watch(
   font-size: 16px;
   font-weight: bold;
   color: #fff;
+  background-color: #001529;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+
+/* 悬停样式 */
 .el-menu-part .el-menu-item:hover {
+  background-color: #001529;
   color: #00aaff;
 }
 
-.main-content {
+/* 选中样式 */
+.el-menu-part .el-menu-item.is-active {
+  background-color: #001529;
+  color: #eeea07;
+}
+
+::v-deep .el-sub-menu__title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+}
+
+::v-deep .el-sub-menu__title:hover {
+  background-color: #001529;
+  color: #00aaff;
+}
+
+
+/* 内容布局区域 */
+.content-layout {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
-  padding: 20px;
+  min-height: 100%;
+}
+
+/* 头部样式 */
+.nav-header {
+  background-color: #001529;
+  padding: 10px;
+  font-size: 18px;
+  font-weight: bold;
+  color: white;
+  height: 58px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  justify-content: right;
+  /* flex-shrink: 1; */
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.username {
+  margin-left: 10px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #fff;
+}
+
+/* 主内容样式 */
+.main-content {
+  background-color: #f5f8fc;
+  flex-grow: 1;
+  min-height: 80%;
+}
+
+/* 页脚样式 */
+.nav-footer {
+  background-color: #fff;
+  /* padding: 10px; */
+  font-size: 16px;
+  color: #333;
+  height: 5vh;
+
+  /* flex-shrink: 0; */
 }
 </style>