feat:更新布局样式

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.18.1",
     "element-plus": "^2.9.7",
     "md-editor-v3": "^6.4.0",
     "pinia": "^3.0.4",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      axios:
+        specifier: ^1.18.1
+        version: 1.18.1
       element-plus:
         specifier: ^2.9.7
         version: 2.14.0(vue@3.5.35(typescript@6.0.3))
@@ -550,6 +553,10 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
   alien-signals@3.2.1:
     resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
 
@@ -559,9 +566,19 @@ packages:
   async-validator@4.2.5:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.18.1:
+    resolution: {integrity: sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==}
+
   birpc@2.9.0:
     resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
 
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
   chokidar@5.0.0:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
@@ -569,6 +586,10 @@ packages:
   codemirror@6.0.2:
     resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -588,10 +609,27 @@ packages:
   dayjs@1.11.21:
     resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
 
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
   element-plus@2.14.0:
     resolution: {integrity: sha512-POgH+TtoreaEKWqYYAVQyE6i8rQMEFqAEublyF29dBA5yASWPLKY6EzfeqBTr2Uv26mPss4vSrMrNPyaK7LX5w==}
     peerDependencies:
@@ -605,6 +643,22 @@ packages:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
 
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -617,14 +671,58 @@ packages:
       picomatch:
         optional: true
 
+  follow-redirects@1.16.0:
+    resolution: {integrity: sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
+    engines: {node: '>= 6'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
+    engines: {node: '>= 0.4'}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
   immutable@5.1.5:
     resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==}
 
@@ -749,6 +847,10 @@ packages:
     resolution: {integrity: sha512-1TGiQiJVRQ3NPmZH6sx5Cfnmg6GQm9jvC1ch4TK511NjSJvjzKLzn5pPfZRNZkRPZP0HqCioSndqH8v2nRaWVQ==}
     hasBin: true
 
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
   md-editor-v3@6.5.1:
     resolution: {integrity: sha512-tdE5xgrm6FYrKDNGM6slQ2GS7eS1iZnQdQl3o+pVlfwmOKj06Lx3WtafhPN4WSxUhCwIDi8PXrr/Y9eEJWhyzA==}
     peerDependencies:
@@ -763,9 +865,20 @@ packages:
   memoize-one@6.0.0:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
@@ -806,6 +919,10 @@ packages:
     resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
   punycode.js@2.3.1:
     resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
     engines: {node: '>=6'}
@@ -1602,14 +1719,37 @@ snapshots:
     dependencies:
       vue: 3.5.35(typescript@6.0.3)
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   alien-signals@3.2.1: {}
 
   argparse@2.0.1: {}
 
   async-validator@4.2.5: {}
 
+  asynckit@0.4.0: {}
+
+  axios@1.18.1:
+    dependencies:
+      follow-redirects: 1.16.0
+      form-data: 4.0.6
+      https-proxy-agent: 5.0.1
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+
   birpc@2.9.0: {}
 
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
   chokidar@5.0.0:
     dependencies:
       readdirp: 5.0.0
@@ -1624,6 +1764,10 @@ snapshots:
       '@codemirror/state': 6.6.0
       '@codemirror/view': 6.43.0
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@2.20.3: {}
 
   copy-anything@4.0.5:
@@ -1638,8 +1782,20 @@ snapshots:
 
   dayjs@1.11.21: {}
 
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  delayed-stream@1.0.0: {}
+
   detect-libc@2.1.2: {}
 
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
   element-plus@2.14.0(vue@3.5.35(typescript@6.0.3)):
     dependencies:
       '@ctrl/tinycolor': 4.2.0
@@ -1663,17 +1819,81 @@ snapshots:
 
   entities@7.0.1: {}
 
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.2:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.4
+
   estree-walker@2.0.2: {}
 
   fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
       picomatch: 4.0.4
 
+  follow-redirects@1.16.0: {}
+
+  form-data@4.0.6:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.4
+      mime-types: 2.1.35
+
   fsevents@2.3.3:
     optional: true
 
+  function-bind@1.1.2: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.4
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.2
+
+  gopd@1.2.0: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.4:
+    dependencies:
+      function-bind: 1.1.2
+
   hookable@5.5.3: {}
 
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   immutable@5.1.5: {}
 
   is-extglob@2.1.1:
@@ -1770,6 +1990,8 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
+  math-intrinsics@1.1.0: {}
+
   md-editor-v3@6.5.1(vue@3.5.35(typescript@6.0.3)):
     dependencies:
       '@codemirror/autocomplete': 6.20.2
@@ -1800,8 +2022,16 @@ snapshots:
 
   memoize-one@6.0.0: {}
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   mitt@3.0.1: {}
 
+  ms@2.1.3: {}
+
   muggle-string@0.4.1: {}
 
   nanoid@3.3.12: {}
@@ -1832,6 +2062,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  proxy-from-env@2.1.0: {}
+
   punycode.js@2.3.1: {}
 
   readdirp@5.0.0: {}

src/App.vue

@@ -1,12 +1,6 @@
 <template>
-  <div class="layout">
+  <div class="app-layout">
-    <!-- 移动端抽屉 -->
+    <el-drawer v-model="drawerVisible" direction="ltr" :size="250" class="mobile-drawer">
-    <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>
+        <el-icon v-if="isMobile" @click="drawerVisible = true" class="fold-button"><Fold/></el-icon>
-        <div class="website-title">
+        <div class="title">智能家庭助手</div>
-          智能家庭助手
-        </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 {
+  .mobile-drawer {
-    padding: 16px;
+    background: linear-gradient(180deg, #1f2937, #111827);
-    color: #333;
+
+    .el-drawer__body {
+
+    }
+
+    .sidebar {
+      padding: 20px 14px;
+      color: #e5e7eb;
+    }
   }
 
   .main-container {
@@ -68,32 +77,39 @@ onUnmounted(() => window.removeEventListener('resize', onResize))
     min-width: 0;
     display: flex;
     flex-direction: column;
+    backdrop-filter: blur(6px);
 
     .header {
-      height: 50px;
+      height: 56px;
-      background: #fff;
+      background: rgba(255, 255, 255, 0.85);
-      border-bottom: 1px solid #eee;
+      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;
+        left: 16px;
-        cursor: pointer;
       }
 
-      .website-title {
+      .title {
-        font-size: 18px;
+        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;
     }
   }
 }

src/components/Agent.vue

@@ -35,24 +35,18 @@
       </div>
     </main>
 
-    <!-- 底部输入区 -->
     <footer class="input-bar">
-      <div class="input-wrap">
+      <el-input
-        <el-input v-model="agentStore.inputMessage" placeholder="输入你的问题…"
+          v-model="agentStore.inputMessage" type="textarea"
-                  @keyup.enter="sendMessage" clearable :disabled="agentStore.loading"/>
+          autosize placeholder="请输入问题..." :disabled="agentStore.loading"
-        <el-button type="primary" circle :loading="agentStore.loading"
+          @keydown.enter.exact.prevent="sendMessage"
-                   :disabled="!agentStore.inputMessage.trim()" @click="sendMessage">
+          class="chat-input-wrap"
-          <template #icon>
+      />
-            <el-icon><Promotion /></el-icon>
-          </template>
-        </el-button>
-      </div>
     </footer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Promotion } from "@element-plus/icons-vue";
 import { MdPreview } from "md-editor-v3";
 import "md-editor-v3/lib/preview.css";
 import { useAgentStore } from "../stores/agent.ts";
@@ -125,20 +119,27 @@ const clearChat = () => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  background: #f7f8fa;
+  border-radius: 15px;
   overflow: hidden;
 
   .message-container {
-    background: #f5f5f5;
-    border-radius: 12px;
-
     flex: 1;
     overflow-y: auto;
-    padding: 20px 16px;
+    padding: 24px 20px;
-
+    border-radius: 12px;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 20px;
+
+    /* 自定义滚动条 */
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #dcdcdc;
+      border-radius: 6px;
+    }
 
     .empty-state {
       flex: 1;
@@ -146,123 +147,162 @@ const clearChat = () => {
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: 12px;
-      color: #999;
+      color: #8a8a8a;
 
       h2 {
         margin: 0;
-        font-size: 20px;
+        font-size: 22px;
-        color: #333;
+        font-weight: 600;
+        color: #222;
       }
+
       p {
         margin: 0;
         font-size: 14px;
       }
+
+      .empty-avatar {
+        box-shadow: 0 6px 20px rgba(64, 158, 255, 0.25);
+      }
+
       .quick-actions {
         display: flex;
         flex-wrap: wrap;
-        gap: 8px;
+        gap: 10px;
-        margin-top: 12px;
         justify-content: center;
       }
     }
 
     .msg-row {
       display: flex;
-      gap: 10px;
+      gap: 12px;
       align-items: flex-start;
-      max-width: 85%;
+      max-width: 82%;
+
+      .msg-avatar {
+        background-color: white;
+        flex-shrink: 0;
+        margin-top: 4px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      }
 
       .msg-body {
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: 6px;
 
         .msg-bubble {
-          padding: 10px 14px;
+          padding: 12px 16px;
-          line-height: 1.7;
+          font-size: 14px;
+          line-height: 1.75;
           word-break: break-word;
-          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+          border-radius: 20px;
+          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
+          transition: background 0.2s ease;
+
+          &.ai {
+            background: #ffffff;
+            border: 1px solid #f0f0f0;
+            color: #2c2c2c;
+          }
+
+          &.user {
+            background: linear-gradient(
+                    135deg,
+                    #409eff 0%,
+                    #337ecc 100%
+            );
+            color: #fff;
+            border: none;
+          }
 
           .md-preview {
             background: transparent;
             padding: 0;
             font-size: 14px;
           }
-
-          .user-text {
-            white-space: pre-wrap;
-          }
-
-          &.ai {
-            background: #fff;
-            color: #333;
-          }
-          &.user {
-            background: linear-gradient(135deg, #409eff 0%, #337ecc 100%);
-            color: #fff;
-          }
         }
 
         .msg-time {
           font-size: 11px;
           color: #bbb;
-          padding-left: 4px;
+          padding-left: 6px;
         }
 
         .typing {
           display: flex;
           align-items: center;
-          gap: 5px;
+          gap: 6px;
           padding: 14px 18px;
+          background: #fff;
+          border-radius: 20px;
+          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
+
           .dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: #bbb;
+            background: #b0b0b0;
-            animation: blink 1.2s infinite both;
+            animation: blink 1.4s infinite both;
-            &:nth-child(2) { animation-delay: 0.2s; }
+
-            &:nth-child(3) { animation-delay: 0.4s; }
+            &:nth-child(2) {
+              animation-delay: 0.2s;
+            }
+            &:nth-child(3) {
+              animation-delay: 0.4s;
+            }
           }
         }
-
-        @keyframes blink {
-          0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
-          40% { opacity: 1; transform: scale(1); }
-        }
-      }
-
-      .msg-avatar {
-        flex-shrink: 0;
-        margin-top: 2px;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
       }
 
       &.user {
         flex-direction: row-reverse;
         align-self: flex-end;
+
         .msg-bubble {
-          border-radius: 18px 18px 4px 18px;
+          border-radius: 20px 20px 6px 20px;
         }
       }
 
       &.ai {
         align-self: flex-start;
+
         .msg-bubble {
-          border-radius: 18px 18px 18px 4px;
+          border-radius: 20px 20px 20px 6px;
         }
       }
     }
   }
 
   .input-bar {
-    background: #fff;
+    padding: 0 12px 12px;
-    border-top: 1px solid #e8e8e8;
+
-    .input-wrap {
+    .chat-input-wrap {
-      display: flex;
+      border-radius: 12px;
-      gap: 10px;
+
-      align-items: center;
+      box-shadow:
+          0 10px 30px rgba(0, 0, 0, 0.08),
+          0 1px 4px rgba(0, 0, 0, 0.04);
+
+      .el-textarea__inner {
+        border-radius: 12px;
+        padding: 10px;
+      }
     }
   }
 }
+
+@keyframes blink {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>

vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
     // 服务器代理 服务器没有部署Nginx的情况下使用
     proxy: {
       '/agent-api': {
-        target: `http://192.168.1.7:8000`,
+        target: `http://127.0.0.1:8000`,
         changeOrigin: true,
         rewrite: (item) => item.replace(/^\/agent-api/, '')
       }