From b02b125dad84d15fd7ce43da2c53fa3df271a4e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Tue, 22 Oct 2024 13:50:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E5=BA=A6=E8=B0=83=E6=95=B4=E7=AD=89?=
 =?UTF-8?q?=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout.vue     | 150 +++++++++++-----------------------
 src/components/Statistics.vue |   2 +-
 2 files changed, 49 insertions(+), 103 deletions(-)

diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 973b4b2..780941f 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -1,75 +1,59 @@
 <template>
   <div id="layout" class="layout-container">
-    <el-aside class="nav-sidebar">
-      <div class="logo">
+    <!-- 侧边栏 -->
+    <el-aside class="nav-sidebar" :style="{ width: isCollapse ? '64px' : '180px' }">
+      <div class="logo" v-if="!isCollapse">
         <el-image src="/turing.png" fit="contain" />
       </div>
-      <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
-        <el-radio-button :value="false">expand</el-radio-button>
-        <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>
-            <House />
-          </el-icon>
+          <el-icon><House /></el-icon>
           <template #title><span>首页</span></template>
         </el-menu-item>
         <el-menu-item index="/alertManagement">
-          <el-icon>
-            <Management />
-          </el-icon>
+          <el-icon><Management /></el-icon>
           <template #title><span>告警列表</span></template>
         </el-menu-item>
         <el-menu-item index="/dataStatistics">
-          <el-icon>
-            <TrendCharts />
-          </el-icon>
+          <el-icon><TrendCharts /></el-icon>
           <template #title><span>数据统计</span></template>
         </el-menu-item>
         <el-menu-item index="/userList">
-          <el-icon>
-            <Avatar />
-          </el-icon>
+          <el-icon><Avatar /></el-icon>
           <template #title><span>用户管理</span></template>
         </el-menu-item>
         <el-sub-menu index="1">
           <template #title>
-            <el-icon>
-              <location />
-            </el-icon>
+            <el-icon><Location /></el-icon>
             <span>面板测试</span>
           </template>
           <el-menu-item index="/test">
-            <el-icon>
-              <WarningFilled />
-            </el-icon>
+            <el-icon><WarningFilled /></el-icon>
             <template #title><span>布局备份</span></template>
           </el-menu-item>
           <el-menu-item index="/alertChart">
-            <el-icon>
-              <WarningFilled />
-            </el-icon>
+            <el-icon><WarningFilled /></el-icon>
             <template #title><span>功能点1测试</span></template>
           </el-menu-item>
           <el-menu-item index="/statistics">
-            <el-icon>
-              <document />
-            </el-icon>
+            <el-icon><Document /></el-icon>
             <template #title><span>功能点2测试</span></template>
           </el-menu-item>
           <el-menu-item index="/cameras">
-            <el-icon>
-              <document />
-            </el-icon>
+            <el-icon><Document /></el-icon>
             <template #title><span>功能点3测试</span></template>
           </el-menu-item>
         </el-sub-menu>
       </el-menu>
     </el-aside>
+
     <div class="content-layout">
       <!-- 头部区域 -->
       <el-header class="nav-header">
+        <!-- 收缩/展开按钮 -->
+        <el-icon @click="toggleCollapse" style="cursor: pointer; margin-right: 20px;">
+          <component :is="isCollapse ? Expand : Fold" />
+        </el-icon>
 
         <div class="header-right">
           <!-- 用户头像下拉菜单 -->
@@ -81,14 +65,10 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item>
-                  <el-icon>
-                    <User />
-                  </el-icon> 用户中心
+                  <el-icon><User /></el-icon> 用户中心
                 </el-dropdown-item>
                 <el-dropdown-item @click="onLogout">
-                  <el-icon>
-                    <SwitchButton />
-                  </el-icon> 退出登录
+                  <el-icon><SwitchButton /></el-icon> 退出登录
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -102,9 +82,7 @@
       </el-main>
 
       <!-- 页脚区域 -->
-      <el-footer class="nav-footer">
-        Powered by AI
-      </el-footer>
+      <el-footer class="nav-footer">Powered by AI</el-footer>
     </div>
   </div>
 </template>
@@ -112,19 +90,9 @@
 <script lang="ts" setup>
 import { ref, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import {
-  Document,
-  WarningFilled,
-  Location,
-  User,
-  SwitchButton,
-  WarnTriangleFilled,
-  Setting,
-  House,
-  Grid,
-  Management,
-  TrendCharts,
-  Avatar
+import { 
+  Document, WarningFilled, Location, User, SwitchButton, 
+  House, Management, TrendCharts, Avatar, Fold, Expand 
 } from '@element-plus/icons-vue';
 import { BoxApi } from '@/utils/boxApi';
 import { ElMessage } from 'element-plus';
@@ -132,24 +100,14 @@ import { ElMessage } from 'element-plus';
 const route = useRoute();
 const router = useRouter();
 const activeIndex = ref(route.path);
-const isCollapse = ref(false);
+const isCollapse = ref(false);  // 控制侧边栏收缩状态
+const username = ref('');  // 存储用户名
 
-// 动态获取 username
-const username = ref(''); // 默认值为空
-
-// 页面加载时，检查 localStorage 是否存储了用户名
 onMounted(() => {
   const storedUsername = localStorage.getItem('username');
-  if (storedUsername) {
-    username.value = storedUsername;
-  } else {
-    username.value = '用户'; // 如果 localStorage 没有值，默认显示 "用户"
-  }
+  username.value = storedUsername ? storedUsername : '用户';
 });
 
-const apiInstance = new BoxApi();
-
-// 监听路由变化，更新菜单的 active 项
 watch(
   () => route.path,
   (newPath) => {
@@ -157,21 +115,20 @@ watch(
   }
 );
 
-// const onLogout = () => {
-//   localStorage.removeItem('alertToken');
-//   router.push('/login');
-// };
+const toggleCollapse = () => {
+  isCollapse.value = !isCollapse.value;  // 切换收缩状态
+};
+
 const onLogout = async () => {
   try {
     localStorage.removeItem('alertToken');
     ElMessage.success('退出登录成功');
     router.push('/login');
-    await apiInstance.logout();
+    await new BoxApi().logout();
   } catch (error: any) {
     ElMessage.error(`后台接口调用失败: ${error.message}`);
   }
 };
-
 </script>
 
 <style scoped>
@@ -179,19 +136,16 @@ const onLogout = async () => {
   display: flex;
   height: 100%;
   width: 100%;
-  margin: 1px;
-  padding: 1px;
-
+  /* overflow: hidden; */
 }
 
 .nav-sidebar {
-  width: 150px;
   background-color: #001529;
-  /* width: 200px; */
   color: #fff;
-  min-height: 97.5vh;
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
+  min-height: 100vh;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  transition: width 1s ease;
 }
 
 .logo {
@@ -204,9 +158,7 @@ const onLogout = async () => {
   background-color: transparent;
   color: #fff;
   border: 1px;
-  /* width: 200px; */
 }
-
 .el-menu-part .el-menu-item {
   /* padding:30px 0; */
   padding: 0px;
@@ -218,8 +170,6 @@ const onLogout = async () => {
   background-color: #001529;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
-
-
 /* 悬停样式 */
 .el-menu-part .el-menu-item:hover {
   background-color: #001529;
@@ -244,29 +194,27 @@ const onLogout = async () => {
 }
 
 
-/* 内容布局区域 */
 .content-layout {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   max-height: 100%;
+  /* overflow-x: auto;   */
+  /* min-width: 0;   */
 }
 
-/* 头部样式 */
 .nav-header {
-  /* background-color: #001529; */
-  background: linear-gradient(to right, rgba(0, 21, 41, 1), rgb(2, 16, 99,0.9));
+  background: linear-gradient(to right, rgba(0, 21, 41, 1), rgba(2, 16, 99, 0.9));
   padding: 10px;
   font-size: 18px;
   font-weight: bold;
   color: white;
-  height: 58px;
+  height: 68px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  justify-content: right;
-  max-width: 99.9%;
-  /* flex-shrink: 1; */
+  /* justify-content: right; */
+  /* max-width: 100%; */
 }
 
 .header-right {
@@ -277,32 +225,30 @@ const onLogout = async () => {
 .username {
   margin-left: 10px;
   margin-right: 30px;
-  font-weight: bold;
-  font-size: 16px;
+  /* font-weight: bold;
+  font-size: 16px; */
   color: #fff;
 }
 
-/* 主内容样式 */
 .main-content {
   background-color: #f5f8fc;
   flex-grow: 1;
-  max-height: 90%;
+  max-height: 95vh;
   margin: 0;
   padding: 0;
+  width: 100%;
+  overflow-y: hidden;
 }
 
-/* 页脚样式 */
 .nav-footer {
   background-color: #fff;
-  /* padding: 10px; */
   font-size: 16px;
   color: #333;
-  height: 2vh;
+  height: 5vh;
   display: flex;
   justify-content: center;
   text-align: center;
   margin: 0;
   padding: 0;
-  /* flex-shrink: 0; */
 }
 </style>
diff --git a/src/components/Statistics.vue b/src/components/Statistics.vue
index aafbb51..2a0aee8 100644
--- a/src/components/Statistics.vue
+++ b/src/components/Statistics.vue
@@ -196,7 +196,7 @@ onMounted(async () => {
 
 .chart {
   width: 100%;
-  height: 380px;
+  height: 365px;
   /* height: 445px; */
 }
 </style>