update: 优化聊天界面，替换按钮为 Element Plus 组件，调整输入框样式，增强移动端适配

src/views/chat/ChatInterface.vue

@@ -71,21 +71,33 @@
       </div>
     </div>
     <div class="input-area">
-      <button class="new-chat-btn" @click="chatStore.startNewChat" :disabled="newChatButtonsDisabled">
+      <el-button 
-        <span class="new-chat-icon">+</span>
+        class="new-chat-btn" 
+        @click="chatStore.startNewChat" 
+        :disabled="newChatButtonsDisabled"
+        :icon="Plus"
+      >
         新会话
-      </button>
+      </el-button>
-      <textarea
+      <el-input
         v-model="messageInput"
-        @keyup.enter.exact="sendMessage"
+        type="textarea"
-        @keydown.enter.exact.prevent
+        :rows="1"
+        :autosize="{ minRows: 1, maxRows: 6 }"
         placeholder="请输入消息..."
-        rows="1"
+        @keyup.enter.exact.prevent="sendMessage"
+        resize="none"
         ref="messageInputRef"
-        @input="adjustTextareaHeight"
         :disabled="isInputDisabled"
-      ></textarea>
+      />
-      <button class="send-btn" @click="sendMessage" :disabled="isInputDisabled || !messageInput.trim()">发送</button>
+      <el-button 
+        class="send-btn" 
+        @click="sendMessage" 
+        :disabled="isInputDisabled || !messageInput.trim()"
+        type="primary"
+      >
+        发送
+      </el-button>
     </div>
     <!-- 总结弹窗 -->
     <div v-if="lastMessageWithDafen" class="summary-panel" :class="{ 'summary-panel-collapsed': isSummaryCollapsed }">
@@ -107,7 +119,8 @@ import { marked } from 'marked'
 import * as echarts from 'echarts'
 import { useChatStore } from '@/store/chat'
 import ChatHeader from '@/views/chat/ChatHeader.vue'
-import { ElTag } from 'element-plus'
+import { ElTag, ElButton, ElInput } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
 
 defineOptions({
   name: 'ChatInterface'
@@ -692,95 +705,131 @@ onUnmounted(() => {
   left: 0;
   right: 0;
   display: flex;
+  align-items: flex-end;
   gap: 12px;
-  padding: 12px 16px;
+  padding: 16px;
   background: #f5f5f5;
   border-top: 1px solid #e5e5e5;
-  align-items: flex-end;
   z-index: 101;
 
-  textarea {
+  :deep(.el-textarea) {
     flex: 1;
-    padding: 10px 16px;
-    border: 1px solid #eee;
-    border-radius: 4px;
-    outline: none;
-    transition: all 0.3s;
-    background: #fff;
-    resize: none;
-    min-height: 42px;
-    max-height: calc(24px * 6);
-    line-height: 1.5;
 
-    &:focus {
+    .el-textarea__inner {
-      border-color: #07c160;
+      min-height: 40px !important;
-      box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
+      padding: 8px 12px;
-    }
+      font-size: 14px;
+      line-height: 1.5;
+      border-radius: 4px;
+      border-color: #dcdfe6;
+      background-color: #fff;
+      transition: all 0.3s;
+      resize: none;
 
-    &:disabled {
+      &:hover {
-      background-color: #f5f5f5;
+        border-color: #c0c4cc;
-      cursor: not-allowed;
+      }
-      color: #999;
-      border-color: #e0e0e0;
-    }
-  }
 
-  button {
+      &:focus {
-    padding: 0 24px;
+        border-color: var(--el-color-primary);
-    border: none;
+        box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
-    border-radius: 4px;
+      }
-    cursor: pointer;
+
-    font-size: 14px;
+      &:disabled {
-    font-weight: 500;
+        background-color: #f5f5f5;
-    height: 42px;
+        border-color: #e0e0e0;
-    transition: all 0.3s;
+        color: #999;
-    line-height: 42px;
+        cursor: not-allowed;
-    border: 1px solid #ddd;
+      }
-    white-space: nowrap;
+
-    &:disabled {
+      &::placeholder {
-      background: #f5f5f5 !important;
+        color: #999;
-      border-color: #e0e0e0;
+      }
-      color: #999;
-      cursor: not-allowed;
     }
   }
 }
 
-.new-chat-btn {
+:deep(.el-button) {
-  padding: 0 16px;
+  height: 40px;
-  background: #fff;
+  padding: 0 20px;
-  color: #333;
   font-size: 14px;
-  display: flex;
+  border-radius: 4px;
-  align-items: center;
+  font-weight: 500;
-  gap: 6px;
   
-  &:hover {
+  &.is-disabled {
-    background: #e8e8e8;
+    background-color: #f5f5f5 !important;
-    border-color: #ccc;
+    border-color: #dcdfe6 !important;
-  }
+    color: #999 !important;
-
-  &:disabled {
-    background: #f5f5f5;
-    border-color: #ddd;
-    color: #999;
     cursor: not-allowed;
   }
 
-  .new-chat-icon {
+  &.new-chat-btn {
-    
+    --el-button-bg-color: #f2f3f5;
-    font-size: 18px;
+    --el-button-border-color: #dcdfe6;
-    font-weight: bold;
+    --el-button-text-color: #606266;
-    line-height: 1;
+    --el-button-hover-bg-color: #e9ecef;
+    --el-button-hover-border-color: #c0c4cc;
+    --el-button-hover-text-color: #303133;
+    --el-button-active-bg-color: #e9ecef;
+    --el-button-active-border-color: #c0c4cc;
+    --el-button-active-text-color: #303133;
+    padding: 0 12px;
+
+    .el-icon {
+      font-size: 14px;
+      margin-right: 2px;
+      position: relative;
+      top: -1px;
+    }
   }
 }
-.send-btn {
+
-  color: white;
+:deep(.el-button--primary) {
-  background: #07c160;
+  --el-button-bg-color: #07c160;
-  &:hover {
+  --el-button-border-color: #07c160;
-      background: #06ae56;
+  --el-button-hover-bg-color: #06ae56;
-    }
+  --el-button-hover-border-color: #06ae56;
+  --el-button-active-bg-color: #06ae56;
+  --el-button-active-border-color: #06ae56;
 }
+
+.new-chat-btn {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  white-space: nowrap;
+}
+
+.send-btn {
+  min-width: 80px;
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 768px) {
+  .input-area {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  :deep(.el-button) {
+    padding: 0 12px;
+
+    &.new-chat-btn {
+      .el-icon {
+        display: none;
+      }
+    }
+  }
+
+  .new-chat-btn {
+    padding: 0 12px;
+  }
+
+  .send-btn {
+    min-width: 60px;
+  }
+}
+
 /* 统一的滚动条样式 */
 .chat-messages,
 .summary-content,