feat:更新布局样式

src/App.vue

@@ -1,12 +1,6 @@
 <template>
-  <div class="layout">
-    <!-- 移动端抽屉 -->
-    <el-drawer
-        v-model="drawerVisible"
-        direction="ltr"
-        :size="250"
-        class="mobile-drawer"
-    >
+  <div class="app-layout">
+    <el-drawer v-model="drawerVisible" direction="ltr" :size="250" class="mobile-drawer">
       <div class="sidebar"><session-message /></div>
     </el-drawer>
 
@@ -14,13 +8,10 @@
       <div class="sidebar"><session-message /></div>
     </el-aside>
 
-    <!-- 主内容 -->
     <el-container class="main-container">
       <el-header class="header">
-        <el-icon v-if="isMobile" @click="drawerVisible = true"><Fold/></el-icon>
-        <div class="website-title">
-          智能家庭助手
-        </div>
+        <el-icon v-if="isMobile" @click="drawerVisible = true" class="fold-button"><Fold/></el-icon>
+        <div class="title">智能家庭助手</div>
       </el-header>
 
       <el-main class="main-body">
@@ -49,18 +40,36 @@ onUnmounted(() => window.removeEventListener('resize', onResize))
 </script>
 
 <style lang="scss">
-.layout {
+.app-layout {
   display: flex;
-  height: 100%;
+  height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa, #eef1f6);
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   .pc-aside {
-    background: gainsboro;
+    background: linear-gradient(180deg, #1f2937, #111827);
     color: #fff;
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+
+    .sidebar {
+      padding: 20px 14px;
+      color: #e5e7eb;
+      height: 100%;
+    }
   }
 
-  .sidebar {
-    padding: 16px;
-    color: #333;
+  .mobile-drawer {
+    background: linear-gradient(180deg, #1f2937, #111827);
+
+    .el-drawer__body {
+
+    }
+
+    .sidebar {
+      padding: 20px 14px;
+      color: #e5e7eb;
+    }
   }
 
   .main-container {
@@ -68,33 +77,40 @@ onUnmounted(() => window.removeEventListener('resize', onResize))
     min-width: 0;
     display: flex;
     flex-direction: column;
+    backdrop-filter: blur(6px);
 
     .header {
-      height: 50px;
-      background: #fff;
-      border-bottom: 1px solid #eee;
-
+      height: 56px;
+      background: rgba(255, 255, 255, 0.85);
+      backdrop-filter: blur(8px);
+      border-bottom: 1px solid #e5e7eb;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
 
-      .el-icon {
+      .fold-button {
         position: absolute;
-        left: 12px;
-        cursor: pointer;
+        left: 16px;
       }
 
-      .website-title {
-        font-size: 18px;
+      .title {
+        font-size: larger;
         font-weight: 600;
+        letter-spacing: 1px;
+        background: linear-gradient(90deg, #3b82f6, #6366f1);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
       }
     }
 
     .main-body {
-      flex: 1;
+      background-color: white;
       padding: 10px;
+      flex: 1;
+      overflow-y: auto;
     }
   }
 }
-</style>
+</style>