优化界面

src/layouts/MainLayout.vue

@@ -1,9 +1,10 @@
 <template>
   <el-container class="layout-container">
     <!-- 侧边栏菜单 -->
-    <el-aside width="200px" class="sidebar">
-      <div class="logo">
-        <h2>猪场管理系统</h2>
+    <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
+      <div class="logo" @click="toggleCollapse">
+        <h2 v-if="!isCollapse" class="logo-text">猪场管理系统</h2>
+        <el-icon v-else class="logo-icon"><Menu /></el-icon>
       </div>
       <el-menu
         :default-active="activeMenu"
@@ -11,19 +12,21 @@
         background-color="#545c64"
         text-color="#fff"
         active-text-color="#ffd04b"
+        :collapse="isCollapse"
+        :collapse-transition="false"
         router
       >
         <el-menu-item index="/">
           <el-icon><House /></el-icon>
-          <span>首页</span>
+          <template #title>首页</template>
         </el-menu-item>
         <el-menu-item index="/devices">
           <el-icon><Monitor /></el-icon>
-          <span>设备管理</span>
+          <template #title>设备管理</template>
         </el-menu-item>
         <el-menu-item index="/plans">
           <el-icon><Calendar /></el-icon>
-          <span>计划管理</span>
+          <template #title>计划管理</template>
         </el-menu-item>
       </el-menu>
     </el-aside>
@@ -33,7 +36,12 @@
       <!-- 头部 -->
       <el-header class="header">
         <div class="header-content">
-          <h3>{{ currentPageTitle }}</h3>
+          <div class="header-left">
+            <el-button link @click="toggleCollapse">
+              <el-icon><Expand v-if="isCollapse" /><Fold v-else /></el-icon>
+            </el-button>
+            <h3 class="page-title">{{ currentPageTitle }}</h3>
+          </div>
           <div class="user-info">
             <el-dropdown>
               <span class="el-dropdown-link">
@@ -52,7 +60,7 @@
 
       <!-- 主内容区 -->
       <el-main class="main-content">
-        <slot></slot>
+        <router-view />
       </el-main>
 
       <!-- 底部 -->
@@ -64,9 +72,9 @@
 </template>
 
 <script>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { House, Monitor, Calendar, ArrowDown } from '@element-plus/icons-vue';
+import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand } from '@element-plus/icons-vue';
 
 export default {
   name: 'MainLayout',
@@ -74,10 +82,19 @@ export default {
     House,
     Monitor,
     Calendar,
-    ArrowDown
+    ArrowDown,
+    Menu,
+    Fold,
+    Expand
   },
   setup() {
     const route = useRoute();
+    const isCollapse = ref(false);
+    
+    // 切换侧边栏折叠状态
+    const toggleCollapse = () => {
+      isCollapse.value = !isCollapse.value;
+    };
     
     // 当前激活的菜单项
     const activeMenu = computed(() => {
@@ -95,8 +112,10 @@ export default {
     });
 
     return {
+      isCollapse,
       activeMenu,
-      currentPageTitle
+      currentPageTitle,
+      toggleCollapse
     };
   }
 };
@@ -110,6 +129,8 @@ export default {
 .sidebar {
   background-color: #545c64;
   box-shadow: 2px 0 6px rgba(0, 21, 18, 0.1);
+  transition: width 0.3s ease;
+  overflow: hidden;
 }
 
 .logo {
@@ -119,6 +140,18 @@ export default {
   justify-content: center;
   color: white;
   background-color: #454d54;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.logo-text {
+  margin: 0;
+  font-size: 18px;
+  white-space: nowrap;
+}
+
+.logo-icon {
+  font-size: 24px;
 }
 
 .sidebar-menu {
@@ -126,6 +159,10 @@ export default {
   height: calc(100% - 60px);
 }
 
+.sidebar-menu:not(.el-menu--collapse) {
+  width: 200px;
+}
+
 .header {
   background-color: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 18, 0.1);
@@ -137,10 +174,23 @@ export default {
   justify-content: space-between;
   align-items: center;
   height: 100%;
+  padding: 0 20px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .user-info {
-  margin-right: 20px;
+  margin-right: 10px;
 }
 
 .main-content {