优化界面

src/App.vue

@@ -1,12 +1,15 @@
 <template>
-  <div id="app">
+  <MainLayout />
-    <router-view />
-  </div>
 </template>
 
 <script>
+import MainLayout from './layouts/MainLayout.vue';
+
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    MainLayout
+  }
 };
 </script>
 

src/components/DeviceList.vue

@@ -3,7 +3,7 @@
     <el-card>
       <template #header>
         <div class="card-header">
-          <span>设备管理</span>
+          <h2 class="page-title">设备管理</h2>
           <el-button type="primary" @click="addDevice">添加设备</el-button>
         </div>
       </template>
@@ -211,10 +211,23 @@ export default {
 </script>
 
 <style scoped>
+.device-list {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 15px 0;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 
 .dialog-footer {
@@ -233,4 +246,15 @@ export default {
 .retry-btn {
   margin-top: 15px;
 }
+
+@media (max-width: 768px) {
+  .device-list {
+    padding: 10px;
+  }
+  
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
 </style>

src/components/Home.vue

@@ -64,13 +64,26 @@ export default {
 </script>
 
 <style scoped>
+.home {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
 .welcome-card {
   margin-bottom: 2rem;
 }
 
 .card-header {
-  font-size: 1.2rem;
+  font-size: 1.5rem;
   font-weight: bold;
+  text-align: center;
+  padding: 10px 0;
+}
+
+.content {
+  font-size: 1rem;
+  line-height: 1.6;
 }
 
 .content p {
@@ -99,4 +112,14 @@ export default {
   font-size: 0.9rem;
   color: #909399;
 }
+
+@media (max-width: 768px) {
+  .home {
+    padding: 10px;
+  }
+  
+  .el-col {
+    margin-bottom: 15px;
+  }
+}
 </style>

src/components/PlanList.vue

@@ -1,9 +1,9 @@
 <template>
-  <MainLayout>
+  <div class="plan-list">
     <el-card>
       <template #header>
         <div class="card-header">
-          <span>计划管理</span>
+          <h2 class="page-title">计划管理</h2>
           <el-button type="primary" @click="addPlan">添加计划</el-button>
         </div>
       </template>
@@ -66,18 +66,14 @@
         </span>
       </template>
     </el-dialog>
-  </MainLayout>
+  </div>
 </template>
 
 <script>
-import MainLayout from '../layouts/MainLayout.vue';
 import apiClient from '../api/index.js';
 
 export default {
   name: 'PlanList',
-  components: {
-    MainLayout
-  },
   data() {
     return {
       plans: [],
@@ -188,13 +184,37 @@ export default {
 </script>
 
 <style scoped>
+.plan-list {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 15px 0;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 
 .dialog-footer {
   text-align: right;
 }
+
+@media (max-width: 768px) {
+  .plan-list {
+    padding: 10px;
+  }
+  
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
 </style>

src/layouts/MainLayout.vue

@@ -1,9 +1,10 @@
 <template>
   <el-container class="layout-container">
     <!-- 侧边栏菜单 -->
-    <el-aside width="200px" class="sidebar">
+    <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
-      <div class="logo">
+      <div class="logo" @click="toggleCollapse">
-        <h2>猪场管理系统</h2>
+        <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 {