From 99dc8352336a638584738c2a06f6e7c65c2e80f9 Mon Sep 17 00:00:00 2001
From: lijun <lijun.lj@foxmail.com>
Date: Tue, 12 May 2026 23:33:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A8=A1=E5=9E=8B=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/gen-chat.vue  | 1909 ++++++++++++++++++--------------
 src/views/system/gen-chat2.vue | 1351 ++++++++++++++--------
 2 files changed, 1949 insertions(+), 1311 deletions(-)

diff --git a/src/views/system/gen-chat.vue b/src/views/system/gen-chat.vue
index 544e5cb..c0c35a1 100644
--- a/src/views/system/gen-chat.vue
+++ b/src/views/system/gen-chat.vue
@@ -1,235 +1,303 @@
 <template>
   <div class="chat-app">
     <!-- 历史会话侧边栏 -->
-    <div class="history-sessions" v-if="sessionIsShow">
-      <div>
-        <el-button type="primary" @click="clearCurrent">新会话</el-button>
+    <div class="history-sessions" :class="{ collapsed: !sessionIsShow }">
+      <div class="session-header">
+        <el-button type="primary" @click="clearCurrent" class="new-session-btn">
+          <el-icon><Plus /></el-icon>
+          新会话
+        </el-button>
       </div>
-      <el-card class="session-card">
-        <template #header>
-          <h3>当前会话</h3>
-        </template>
-        <el-tooltip :content=sessionName placement="top">
-          <ul>
-            <li>{{ getShortenedName(sessionName) }}</li>
-          </ul>
-        </el-tooltip>
-      </el-card>
-      <el-card class="session-card2">
-        <template #header>
-          <h3>历史会话</h3>
-        </template>
-        <el-scrollbar style="height: 400px; scrollbar-width: none">
-          <ul>
-            <li v-for="(session, index) in historySessions" :key="index" @click="loadSession(session.ID)">
-              <el-tooltip :content="session.Name" placement="top">
-                <span>{{ getShortenedName(session.Name) }}</span>
-              </el-tooltip>
-            </li>
-          </ul>
-        </el-scrollbar>
-      </el-card>
-    </div>
-    <div>
-      <div @click="showSession" style="cursor: pointer">
-        <el-icon v-if="sessionIsShow">
-          <Expand />
-        </el-icon>
-        <el-icon v-else>
-          <Fold />
-        </el-icon>
-      </div>
-    </div>
 
-    <!-- 原有的聊天区域 -->
-    <div class="chat-container">
-      <!-- 消息列表 -->
-      <el-card class="chat-messages" shadow="never" ref="messagesContainer" v-if="messages.length > 0">
-        <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]">
-          <div class="message-avatar">
-            <span v-if="message.role === 'assistant'">💬</span>
-            <span v-else>🧑‍🎓</span>
+      <el-card class="session-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <el-icon><ChatDotRound /></el-icon>
+            <span>当前会话</span>
           </div>
-          <div class="message-content">
-            <div v-html="renderMarkdown(message, index)"></div>
-            <!-- 添加复制 -->
-            <div>
-              <el-tooltip content="复制" placement="top">
-                <el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)"></el-button>
-              </el-tooltip>
-              <!-- <el-button
-                type="text"
-                :icon="Document"
-                @click="MessageTextToDoc(message.content)"
-                ></el-button> -->
-              <el-tooltip content="预览、文本创建文件" placement="top">
-                <el-button type="text" :icon="Document" @click="MessageTextToDoc(message.content)">
-                </el-button>
+        </template>
+        <div class="current-session">
+          <el-tooltip :content="sessionName" placement="top">
+            <div class="session-name">{{ getShortenedName(sessionName) || '新会话' }}</div>
+          </el-tooltip>
+        </div>
+      </el-card>
+
+      <el-card class="session-card history-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <el-icon><Clock /></el-icon>
+            <span>历史会话</span>
+          </div>
+        </template>
+        <el-scrollbar class="history-scroll">
+          <div class="history-list">
+            <div
+              v-for="(session, index) in historySessions"
+              :key="index"
+              class="history-item"
+              :class="{ active: session.ID === sessionID }"
+              @click="loadSession(session.ID)"
+            >
+              <el-tooltip :content="session.Name" placement="top">
+                <span class="history-name">{{ getShortenedName(session.Name) }}</span>
               </el-tooltip>
             </div>
           </div>
-        </div>
-        <div v-if="loading" class="loading-indicator">Loading...,已回答字符:{{ currentAIMessage.length }}</div>
+        </el-scrollbar>
       </el-card>
+    </div>
 
-      <!-- 输入区域 -->
-      <el-card class="chat-input" shadow="never">
-        <el-row :gutter="10">
-          <el-col :span="20">
-            <el-input v-model="inputMessage" type="textarea" style="border: 0" :rows="5" placeholder="输入消息..."
-              @keyup.enter="sendMessage" />
-            <!-- <el-text
-              v-model="inputMessage"
-              aria-placeholder="输入信息...."
-            ></el-text> -->
-          </el-col>
-          <el-col :span="4" style="text-align: center">
-            <el-button @click="sendMessage" type="success" :icon="Check" round :disabled="loading">发送</el-button>
-            <el-dropdown trigger="click" class="model-dropdown">
-              <span class="el-dropdown-link">
-                <span>模型参数</span>
-                <el-icon>
-                  <ArrowDown />
-                </el-icon>
-              </span>
-              <template #dropdown>
-                <div class="dropdown-content">
-                  <div class="model-params">
-                    <h4>模型参数
-                      <el-tooltip effect="dark" placement="right" content="建议仅调整 temperature 或 top_p 其中之一，不建议两者都修改">
-                        <el-icon class="tip-icon">
-                          <QuestionFilled />
-                        </el-icon>
-                      </el-tooltip>
-                    </h4>
+    <!-- 折叠按钮 -->
+    <div class="toggle-sidebar" @click="showSession">
+      <el-icon v-if="sessionIsShow"><DArrowLeft /></el-icon>
+      <el-icon v-else><DArrowRight /></el-icon>
+    </div>
 
-                    <!-- 温度参数 -->
-                    <div class="param-item">
-                      <div class="param-label">
-                        <span>温度 (Temperature)</span>
-                        <el-tooltip effect="dark" placement="right" content="采样温度，控制生成随机性（0: 保守，2: 随机）">
-                          <el-icon class="tip-icon">
-                            <QuestionFilled />
-                          </el-icon>
-                        </el-tooltip>
-                      </div>
-                      <el-slider v-model="temperature" :min="0" :max="2" :step="0.1" :show-tooltip="false" />
-                      <div class="param-value">{{ temperature }}</div>
-                    </div>
+    <!-- 聊天区域 -->
+    <div class="chat-container">
+      <!-- 顶部工具栏 -->
+      <div class="chat-header">
+        <el-select v-model="selectModel" placeholder="选择模型" class="model-select">
+          <el-option v-for="item in ModelList" :key="item.ID" :label="item.Type + ' - ' + item.Description" :value="item.ID" />
+        </el-select>
 
-                    <!-- Top P 参数 -->
-                    <div class="param-item">
-                      <div class="param-label">
-                        <span>Top P</span>
-                        <el-tooltip effect="dark" placement="right" content="限制候选词范围（0: 严格，1: 宽松）">
-                          <el-icon class="tip-icon">
-                            <QuestionFilled />
-                          </el-icon>
-                        </el-tooltip>
-                      </div>
-                      <el-slider v-model="topP" :min="0" :max="1" :step="0.1" :show-tooltip="false" />
-                      <div class="param-value">{{ topP }}</div>
-                    </div>
+        <el-dropdown trigger="click" class="params-dropdown">
+          <el-button link>
+            <el-icon><Setting /></el-icon>
+            模型参数
+            <el-icon><ArrowDown /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <div class="dropdown-content">
+              <div class="model-params">
+                <div class="params-tip">
+                  <el-icon><InfoFilled /></el-icon>
+                  <span>建议仅调整 temperature 或 top_p 其中之一</span>
+                </div>
+                <!-- 温度参数 -->
+                <div class="param-item">
+                  <div class="param-label">
+                    <span>温度 (Temperature)</span>
+                    <el-tooltip effect="dark" placement="top" content="采样温度，控制生成随机性（0: 保守，2: 随机）">
+                      <el-icon class="tip-icon"><QuestionFilled /></el-icon>
+                    </el-tooltip>
+                  </div>
+                  <div class="param-control">
+                    <el-slider v-model="temperature" :min="0" :max="2" :step="0.1" :show-tooltip="false" />
+                    <span class="param-value">{{ temperature }}</span>
                   </div>
                 </div>
-              </template>
-            </el-dropdown>
 
+                <!-- Top P 参数 -->
+                <div class="param-item">
+                  <div class="param-label">
+                    <span>Top P</span>
+                    <el-tooltip effect="dark" placement="top" content="限制候选词范围（0: 严格，1: 宽松）">
+                      <el-icon class="tip-icon"><QuestionFilled /></el-icon>
+                    </el-tooltip>
+                  </div>
+                  <div class="param-control">
+                    <el-slider v-model="topP" :min="0" :max="1" :step="0.1" :show-tooltip="false" />
+                    <span class="param-value">{{ topP }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-dropdown>
+      </div>
 
+      <!-- 消息列表 -->
+      <div class="chat-messages" ref="messagesContainer">
+        <!-- 空状态 -->
+        <div v-if="messages.length === 0" class="empty-state">
+          <div class="empty-icon">
+            <el-icon :size="80"><ChatLineRound /></el-icon>
+          </div>
+          <div class="empty-text">开始一段对话吧</div>
+          <div class="empty-hint">输入消息或选择文件，与 AI 进行交流</div>
+        </div>
 
+        <!-- 消息列表 -->
+        <div v-else class="messages-list">
+          <div v-for="(message, index) in messages" :key="index" :class="['message-item', message.role]">
+            <div class="message-avatar">
+              <el-icon v-if="message.role === 'assistant'" class="ai-icon"><Promotion /></el-icon>
+              <el-icon v-else class="user-icon"><User /></el-icon>
+            </div>
+            <div class="message-wrapper">
+              <div class="message-content">
+                <div v-html="renderMarkdown(message, index)" class="markdown-body"></div>
+              </div>
+              <div class="message-actions">
+                <el-tooltip content="复制" placement="top">
+                  <el-button type="text" :icon="DocumentCopy" @click="copyMessage(message.content)" />
+                </el-tooltip>
+                <el-tooltip content="保存为文件" placement="top">
+                  <el-button type="text" :icon="Document" @click="MessageTextToDoc(message.content)" />
+                </el-tooltip>
+              </div>
+            </div>
+          </div>
 
-          </el-col>
-          <el-col :span="3" style="text-align: center">
-            <el-select v-model="selectModel" placeholder="选择模型" style="width: 320px;">
-              <el-option v-for="item in ModelList" :key="item.ID" :label="item.Type + ':' + item.Description"
-                :value="item.ID"></el-option>
-            </el-select>
-          </el-col>
-          <el-col :span="10" style="text-align: center">
-            <el-tooltip content="文件选择" placement="top">
-              <el-button @click="handleSelectFileVisible"><el-icon>
-                  <Files />
-                </el-icon></el-button>
+          <!-- 加载状态 -->
+          <div v-if="loading" class="message-item assistant">
+            <div class="message-avatar">
+              <el-icon class="ai-icon"><Promotion /></el-icon>
+            </div>
+            <div class="message-wrapper">
+              <div class="message-content">
+                <div class="typing-indicator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+                <div class="typing-text">正在思考... ({{ currentAIMessage.length }} 字符)</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 输入区域 -->
+      <div class="chat-input-wrapper">
+        <!-- 已选文件 -->
+        <div v-if="selectedFiles.length > 0" class="selected-files">
+          <el-tag
+            v-for="(file, index) in selectedFiles"
+            :key="index"
+            closable
+            @close="removeFile(index)"
+            class="file-tag"
+          >
+            <el-icon><Document /></el-icon>
+            {{ file.UserFileName }}
+          </el-tag>
+        </div>
+
+        <div class="input-area">
+          <div class="input-tools">
+            <el-tooltip content="选择文件" placement="top">
+              <el-button type="text" :icon="FolderOpened" @click="handleSelectFileVisible" />
             </el-tooltip>
-          </el-col>
-          <!-- <el-col :span="1" style="text-align: center">
-            <el-button @click="handleUploadPicture"><el-icon><Picture /></el-icon></el-button>
-          </el-col>
-          <el-col :span="1" style="text-align: center">
-            <el-button><el-icon><VideoCamera /></el-icon></el-button>
-          </el-col> -->
-          <!-- 已选文件一行显示 -->
-          <el-col :span="12" style="text-align: center">
-            <el-tag v-for="(file, index) in selectedFiles" :key="index" closable @close="removeFile(index)">{{
-              file.UserFileName }}</el-tag>
-          </el-col>
-        </el-row>
-      </el-card>
+          </div>
+
+          <el-input
+            v-model="inputMessage"
+            type="textarea"
+            placeholder="输入消息... (Enter 发送，Shift+Enter 换行)"
+            @keydown="handleKeydown"
+            class="chat-textarea"
+            :autosize="{ minRows: 1, maxRows: 6 }"
+          />
+
+          <el-button
+            type="primary"
+            :icon="loading ? VideoPause : Check"
+            @click="sendMessage"
+            class="send-btn"
+          >
+            {{ loading ? '停止' : '发送' }}
+          </el-button>
+        </div>
+      </div>
     </div>
 
-    <div>
-      <!-- 文件对话框 -->
-      <el-dialog v-model="selectFileVisible" title="从上传文件中选择" width="50%">
-        <el-input placeholder="搜索文件" v-model="searchFileQuery" prefix-icon="el-icon-search" />
-        <el-button @click="uploadMessageFile">上传文件</el-button>
-        <!-- 文件列表 -->
-        <div class="file-list">
-          <el-checkbox-group v-model="selectedFiles">
-            <el-checkbox v-for="(item, index) in filteredFiles" :key="index" :label="item">
-              <span class="file-icon">
-                <!-- 根据文件类型展示不同图标 -->
-                <i v-if="item.UploadType === 'image'" class="el-icon-picture"></i>
-                <i v-else-if="item.UploadType === 'file'" class="el-icon-document"></i>
-                <!-- 可继续补充其他文件类型图标 -->
-              </span>
-              {{ item.UserFileName }}
-              <!-- <span class="file-time">{{ item.CreatedAt }}</span> -->
-            </el-checkbox>
-          </el-checkbox-group>
-        </div>
-        <!-- 底部状态栏和按钮 -->
-        <div class="footer-bar">
-          <span class="selected-count">已选 {{ selectedFiles.length }} 个文件</span>
+    <!-- 文件对话框 -->
+    <el-dialog v-model="selectFileVisible" title="从上传文件中选择" width="50%" class="file-dialog">
+      <div class="dialog-search">
+        <el-input placeholder="搜索文件" v-model="searchFileQuery" prefix-icon="Search" clearable />
+        <el-button type="primary" @click="uploadMessageFile" class="upload-btn">
+          <el-icon><Upload /></el-icon>
+          上传文件
+        </el-button>
+      </div>
+      <div class="file-list">
+        <el-checkbox-group v-model="selectedFiles">
+          <div v-for="(item, index) in filteredFiles" :key="index" class="file-item">
+            <el-checkbox :label="item" />
+            <div class="file-info">
+              <el-icon class="file-icon">
+                <Picture v-if="item.UploadType === 'image'" />
+                <Document v-else />
+              </el-icon>
+              <span class="file-name">{{ item.UserFileName }}</span>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </div>
+      <div class="footer-bar">
+        <span class="selected-count">已选 {{ selectedFiles.length }} 个文件</span>
+        <div>
           <el-button @click="selectFileVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSelectFileConfirm">确认添加({{ selectedFiles.length }})</el-button>
+          <el-button type="primary" @click="handleSelectFileConfirm">确认添加</el-button>
         </div>
-      </el-dialog>
-    </div>
-    <!-- 上传文件对话框 -->
-    <div>
-      <el-dialog title="上传文件" v-model="uploadFileVisible" width="50%" :before-close="handleUploadFileClose">
-        <UploadFile></UploadFile>
-      </el-dialog>
-    </div>
-    <div>
-      <!-- 文本创建文件对话 -->
-      <el-dialog title="文本创建文件" v-model="textToDocFileVisible" width="70%" heigth="80vh"
-        :before-close="handleMessageTextToDOCClose">
-        <!-- <textarea v-model="textToDocFileContent"></textarea> -->
-        <div ref="vditorRef"></div>
-        <el-col>
-          <!-- 提示 -->
-          <el-input v-model="textToDocFileName" placeholder="输入文件名..." style="width: 30%;">输入文件名</el-input>
-        </el-col>
-        <!-- <el-input v-model="textToDocFileName" placeholder="输入文件名..." width="30%">输入文件名</el-input> -->
-        <el-col>
-          <el-select v-model="selectFileDocType" placeholder="选择文本类型" style="width: 30%;">
-            <el-option label="docx" value="docx"></el-option>
-            <el-option label="txt" value="txt"></el-option>
-            <el-option label="md" value="md"></el-option>
-          </el-select>
-        </el-col>
+      </div>
+    </el-dialog>
 
-        <el-button type="primary" @click="HandleTextToDocFile">确认</el-button>
+    <!-- 上传文件对话框 -->
+    <el-dialog title="上传文件" v-model="uploadFileVisible" width="50%" :before-close="handleUploadFileClose">
+      <UploadFile />
+    </el-dialog>
+
+    <!-- 文本创建文件对话 -->
+    <el-dialog title="文本创建文件" v-model="textToDocFileVisible" width="70%" class="doc-dialog" :before-close="handleMessageTextToDOCClose">
+      <div class="doc-header">
+        <el-input v-model="textToDocFileName" placeholder="输入文件名..." class="doc-name-input">
+          <template #append>
+            <el-select v-model="selectFileDocType" placeholder="类型">
+              <el-option label="docx" value="docx" />
+              <el-option label="txt" value="txt" />
+              <el-option label="md" value="md" />
+            </el-select>
+          </template>
+        </el-input>
+      </div>
+      <div ref="vditorRef" class="vditor-container"></div>
+      <div class="doc-footer">
         <el-button @click="textToDocFileVisible = false">取消</el-button>
-      </el-dialog>
-    </div>
+        <el-button type="primary" @click="HandleTextToDocFile">确认创建</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts" name="gen-chat">
 import { ref, onMounted, onUnmounted, reactive, nextTick, watch } from "vue";
-import { ElCard, ElInput, ElButton, ElDialog } from "element-plus";
+import {
+  Check,
+  DocumentCopy,
+  Document,
+  Plus,
+  ChatDotRound,
+  Clock,
+  DArrowLeft,
+  DArrowRight,
+  Setting,
+  ArrowDown,
+  QuestionFilled,
+  ChatLineRound,
+  Promotion,
+  User,
+  FolderOpened,
+  VideoPause,
+  Upload,
+  Picture,
+  InfoFilled,
+} from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import MarkdownIt from "markdown-it";
+import hljs from "highlight.js";
+import "highlight.js/styles/github.css";
+import markdownItHighlightjs from "markdown-it-highlightjs";
+import markdownItKatex from "markdown-it-katex";
+import mermaidPlugin from "@agoose77/markdown-it-mermaid";
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import "katex/dist/katex.min.css";
+import Vditor from 'vditor';
+import 'vditor/dist/index.css';
+
 import { WSMessage, GenMessage } from "@/types/im";
 import { GetMessageService } from "@/api/im";
 import { FindUserFileService } from "@/api/file";
@@ -239,38 +307,19 @@ import { File, fileUrl } from "@/types/file";
 import { Session } from "@/types/session";
 import { FindSessionService } from "@/api/session";
 import { SetMessageTextToDocService } from "@/api/tool";
-import { ElMessage } from "element-plus";
-import { Check, DocumentCopy, Document, PriceTag } from "@element-plus/icons-vue";
-import MarkdownIt from "markdown-it";
-import hljs from "highlight.js";
 import UploadFile from "@/components/upload-file.vue";
 import { updateUserUIconfigInfoService } from "@/api/user";
 import { FindModelListByFunctionName } from "@/api/function";
-import markdownItHighlightjs from "markdown-it-highlightjs";
-import markdownItKatex from "markdown-it-katex";
-import mermaidPlugin from "@agoose77/markdown-it-mermaid";
-import { fetchEventSource } from '@microsoft/fetch-event-source';
-import "katex/dist/katex.min.css";
-import Vditor from 'vditor';
-import 'vditor/dist/index.css';
-
 
 interface Message {
   role: "user" | "assistant";
   content: string;
   finished?: boolean;
 }
-interface SendImageMessage {
-  img_name: string;
-  img_url: string;
-}
-interface ImageMessage {
-  image_content: SendImageMessage[];
-  text: string;
-}
+
 interface FileMessage {
-  file_content: File; //文件内容，文件内容的base64编码
-  file_type: string | null; //文件类型，文本类型，图片类型等，text_file,img_file等
+  file_content: File;
+  file_type: string | null;
 }
 
 interface GenerationMessage {
@@ -286,82 +335,68 @@ md.use(markdownItHighlightjs, {
 });
 md.renderer.rules.image = function (tokens, idx, options, env, self) {
   const token = tokens[idx];
-  // 设置图片的宽度和高度属性
   token.attrSet('width', '400');
-  token.attrSet('height', '300');
+  token.attrSet('style', 'max-width: 100%; height: auto; border-radius: 8px;');
   return self.renderToken(tokens, idx, options, env, self);
 };
 md.use(markdownItKatex);
 md.use(mermaidPlugin);
 
-//md.use(markdownItMermaid);
-
 const historySessions = ref<Session[]>([]);
 const loading = ref(false);
+const canStop = ref(false);
 const isUserScrolling = ref<boolean>(false);
-const messages = reactive([]);
+const messages = reactive<Message[]>([]);
 const inputMessage = ref("");
-const socket = ref(null);
 const currentAIMessage = ref("");
 const sessionID = ref(0);
 const messagesContainer = ref<HTMLDivElement | null>(null);
-const sessionIsShow = ref(false);
+const sessionIsShow = ref(true);
 const sessionName = ref("");
 const ModelList = ref<Model[]>([]);
 const selectModel = ref(0);
 const temperature = ref(0.8);
 const topP = ref(0.9);
-const selectedFiles = ref<File[]>([]); // 用于存储已选文件
-const selectFileVisible = ref(false); // 控制文件选择对话框的显示与隐藏
-const searchFileQuery = ref(""); // 用于搜索文件的查询条件
-const filteredFiles = ref<File[]>([]); // 用于存储过滤后的文件列表
-const uploadFileVisible = ref(false); // 控制上传文件对话框的显示与隐藏
-const textToDocFileVisible = ref(false); // 控制文本创建文件对话框的显示与隐藏
-const selectFileDocType = ref("docx"); // 选择的文本类型
-const textToDocFileName = ref(""); // 文本创建文件的名称
-const textToDocFileContent = ref(""); // 文本创建文件的内容
-const vditor = ref(); // Vditor 实例
+const selectedFiles = ref<File[]>([]);
+const selectFileVisible = ref(false);
+const searchFileQuery = ref("");
+const filteredFiles = ref<File[]>([]);
+const uploadFileVisible = ref(false);
+const textToDocFileVisible = ref(false);
+const selectFileDocType = ref("docx");
+const textToDocFileName = ref("");
+const textToDocFileContent = ref("");
+const vditor = ref();
 const vditorRef = ref(null);
-const userUIconfigInfo = ref<UserUISettings>({} as UserUISettings); // 用户UI配置
+const userUIconfigInfo = ref<UserUISettings>({} as UserUISettings);
+const historyMsgHtml = ref([]);
 
-
-
-//监听需要保存的配置
+// 监听需要保存的配置
 watch(
   [selectModel, temperature, topP, sessionID],
-  () => {  //保存配置
+  () => {
     updateUserUIconfigInfo();
   }
-)
-
-
-const historyMsgHtml = ref([]); // 用于存储历史消息的HTML内容
-const wssUrl =
-  "wss://pm.ljsea.top/im/ai_chat_ws?" +
-  "token=" +
-  localStorage.getItem("token");
+);
 
 const renderMarkdown = (message: Message, index: number) => {
-  if (message.finished == false) {
-    //console.log("not finished");
+  if (message.finished === false) {
     return message.content;
   }
   if (historyMsgHtml.value[index]) {
-    //console.log("historyMsgHtml:", historyMsgHtml.value[index]);
-    //console.log("historyMsgHtml:", index);
-    //已经渲染过的消息，直接返回
     return historyMsgHtml.value[index];
   }
-  //console.log("new finish:");
   const html = md.render(message.content);
   historyMsgHtml.value.push(html);
   return html;
 };
 
 const scrollToBottom = () => {
-  let x = document.getElementsByClassName("chat-messages")[0];
-  if (!x) return;
-  x.scrollTop = x.scrollHeight; //将滚轮置底
+  nextTick(() => {
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+    }
+  });
 };
 
 const copyCode = (code: string) => {
@@ -369,162 +404,110 @@ const copyCode = (code: string) => {
     ElMessage.success("代码已复制到剪贴板");
   });
 };
+
 const removeFile = (index: number) => {
   selectedFiles.value.splice(index, 1);
 };
 
 const handleSelectFileVisible = async () => {
-  await getFileListData(); // 获取文件列表
-  console.log("selectedFiles:", selectedFiles.value);
-  selectFileVisible.value = true; // 显示对话框
-  console.log("handleSelectFileVisible:", selectFileVisible.value);
+  await getFileListData();
+  selectFileVisible.value = true;
 };
 
 const handleUploadFileClose = async () => {
-  uploadFileVisible.value = false; // 关闭上传文件对话框
-  await getFileListData(); // 获取文件列表
-  console.log("handleUploadFileClose:", uploadFileVisible.value);
+  uploadFileVisible.value = false;
+  await getFileListData();
 };
 
 const handleMessageTextToDOCClose = async () => {
-  textToDocFileVisible.value = false; // 关闭文本创建文件对话框
-};
-
-
-const handleUploadPicture = () => {
-  // 处理上传图片的逻辑
-  //选择图片并上传
+  textToDocFileVisible.value = false;
 };
 
 const uploadMessageFile = () => {
-  // 处理上传文件的逻辑
-  // 这里可以调用上传文件的API
-  uploadFileVisible.value = true; // 显示上传文件对话框
-  console.log("上传文件:", selectedFiles.value);
+  uploadFileVisible.value = true;
 };
 
 const handleSelectFileConfirm = () => {
-  // 处理选中的文件
-  console.log("选中的文件:", selectedFiles.value);
-  // 在这里可以进行文件上传或其他操作
-  selectFileVisible.value = false; // 关闭对话框
-
+  selectFileVisible.value = false;
 };
 
-
 const doButtonD = () => {
-  const codeBlocks = document.querySelectorAll("pre code");
-  codeBlocks.forEach((codeBlock) => {
-    //先查看是否已经添加了复制按钮
-    if (codeBlock.parentNode.querySelector(".code-controls")) {
-      return;
-    }
+  nextTick(() => {
+    const codeBlocks = document.querySelectorAll<HTMLElement>(".markdown-body pre");
+    codeBlocks.forEach((pre) => {
+      if (pre.querySelector(".code-header")) return;
 
-    // 获取代码类型
-    const codeType = codeBlock.className.replace("hljs", "");
-    // 创建代码类型显示元素
-    const codeTypeElement = document.createElement("span");
-    codeTypeElement.textContent = codeType.split("-")[1];
-    codeTypeElement.setAttribute("background-color", "rgba(0, 0, 0, 0.1)");
-    codeTypeElement.setAttribute("padding", "3px 6px");
-    codeTypeElement.setAttribute("border-radius", "4px");
-    codeTypeElement.setAttribute("font-size", "0.9em");
+      const code = pre.querySelector("code");
+      const lang = code?.className.match(/language-(\w+)/)?.[1] || "code";
 
-    // 创建复制按钮
-    const copyButton = document.createElement("button");
-    copyButton.setAttribute("background-color", "dodgerblue");
-    copyButton.setAttribute("display", "flex");
-    copyButton.setAttribute("align-items", "center");
-    copyButton.setAttribute("padding", "5px 10px");
-    copyButton.setAttribute("cursor", "pointer");
-    copyButton.setAttribute("border-radius", "4px");
-    copyButton.textContent = "复制";
-    copyButton.classList.add();
-    copyButton.addEventListener("click", () => {
-      copyCode(codeBlock.textContent);
+      const header = document.createElement("div");
+      header.className = "code-header";
+      header.innerHTML = `
+        <span class="code-lang">${lang}</span>
+        <button class="copy-btn" title="复制代码">
+          <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+          </svg>
+        </button>
+      `;
+
+      pre.style.position = "relative";
+      pre.style.marginTop = "0";
+      pre.insertBefore(header, pre.firstChild);
+
+      header.querySelector(".copy-btn")?.addEventListener("click", () => {
+        copyCode(code?.textContent || "");
+        ElMessage.success("复制成功");
+      });
     });
-
-    // 设置代码块父元素的定位，以便按钮定位
-    const pre = codeBlock.parentNode;
-    // pre.style.position = 'relative';
-
-    // 创建一个容器用于放置代码类型和复制按钮
-    const controlsContainer = document.createElement("div");
-    controlsContainer.classList.add("code-controls");
-    controlsContainer.appendChild(codeTypeElement);
-    controlsContainer.appendChild(copyButton);
-
-    // 将容器添加到代码块父元素中
-    pre.insertBefore(controlsContainer, codeBlock);
   });
 };
 
-onMounted(() => {
-  // if (typeof window !== 'undefined') {
-  //   // 浏览器环境
-  //   md.use(markdownItMermaid);
-  // }
-  //IMWSConnect();
-
-
+// 处理键盘事件
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    sendMessage();
+  }
+};
 
+onMounted(async () => {
   userUIconfigInfo.value = JSON.parse(
     localStorage.getItem("userUIconfigInfo") || "{}"
   );
-  console.log("userUIconfigInfo:", userUIconfigInfo.value);
   messagesContainer.value = document.querySelector(".chat-messages");
-  //console.log("userUIconfigInfo:", userUIconfigInfo.value);
+  // 页面加载时获取历史会话
+  await fetchHistorySessions();
 });
 
+// 获取历史会话
+const fetchHistorySessions = async () => {
+  try {
+    let req = {
+      token: localStorage.getItem("token"),
+      type: "UserID",
+      session_type: 1,
+    };
+    let result = await FindSessionService(req);
+    historySessions.value = result.data;
+  } catch (e) {
+    console.error("获取历史会话失败:", e);
+  }
+};
+
 onUnmounted(() => {
-  if (socket.value) {
-    socket.value.close();
-  }
+  // 清理工作可以在这里添加
 });
 
-const doReceiveMessage = (event) => {
-  // 处理接收到的消息
-  let msg: WSMessage = JSON.parse(event.data);
-  const existingMessage = messages.find(
-    (msg) => msg.role === "assistant" && !msg.finished
-  );
-  if (existingMessage) {
-    // 追加内容
-    existingMessage.content += msg.msg.msg.response;
-  } else {
-    // 新消息
-    messages.push({
-      role: "assistant",
-      content: msg.msg.msg.response,
-      finished: false,
-    });
-  }
-
-  sessionID.value = msg.session_id;
-  currentAIMessage.value += msg.msg.msg.response;
-  if (msg.msg.msg.done) {
-    const assistantMessage = messages[messages.length - 1];
-    assistantMessage.finished = true;
-    loading.value = false;
-    currentAIMessage.value = "";
-    doButtonD();
-  }
-  nextTick(() => {
-    scrollToBottom(); // 新增滚动调用
-  });
-}
-
-const doReceiveMessageSSE = (event) => {
-  // 处理接收到的消息
+const doReceiveMessageSSE = (event: any) => {
   let msg: WSMessage = JSON.parse(event.data.replace("data: ", ""));
   const existingMessage = messages.find(
-    (msg) => msg.role === "assistant" && !msg.finished
+    (m) => m.role === "assistant" && !m.finished
   );
   if (existingMessage) {
-    // 追加内容
     existingMessage.content += msg.msg.msg.response;
   } else {
-    // 新消息
     messages.push({
       role: "assistant",
       content: msg.msg.msg.response,
@@ -538,15 +521,14 @@ const doReceiveMessageSSE = (event) => {
     const assistantMessage = messages[messages.length - 1];
     assistantMessage.finished = true;
     loading.value = false;
+    canStop.value = false;
     currentAIMessage.value = "";
     doButtonD();
   }
-  nextTick(() => {
-    scrollToBottom(); // 新增滚动调用
-  });
-}
+  scrollToBottom();
+};
+
 const updateUserUIconfigInfo = () => {
-  //将配置保存到数据库
   let req: UserUISettings = JSON.parse(localStorage.getItem("userUIconfigInfo") || "{}");
   if (req.user_id == 0) {
     req.user_id = parseInt(localStorage.getItem("user_id") || "0");
@@ -559,39 +541,29 @@ const updateUserUIconfigInfo = () => {
   updateUserUIconfigInfoService(req, localStorage.getItem("token")).then((res) => {
     if (res["code"] === 0) {
       console.log("保存成功");
-    } else {
-      console.log("保存失败");
     }
   });
-}
-
-
+};
 
 const sendMessage = async () => {
-  //测试ws是否连接断开
-  // if (socket.value == null) {
-  //   await IMWSConnect();
-
-  // }
-  if (loading.value === true) {
-    ElMessage.warning("正在等待AI回复，请稍后再试");
+  if (loading.value) {
+    ElMessage.info("正在停止生成...");
+    return;
+  }
+  if (inputMessage.value.trim() === "" && selectedFiles.value.length === 0) {
+    ElMessage.warning("消息不能为空");
     return;
   }
   await nextTick();
   sendMessageWithFileUseSSE();
-  //sendMessageWithFile();
-  return;
 };
 
 const sendMessageWithFileUseSSE = async () => {
   checkTokenIsValidAndRefresh();
   let url = "https://pm.ljsea.top/im/chat_completion";
-  let headers = { "token": localStorage.getItem("token") };
-  if (inputMessage.value.trim() === "") {
-    ElMessage.warning("消息不能为空");
-    return;
-  }
-  let end_msg = {
+  let headers = { "token": localStorage.getItem("token") || "" };
+
+  let end_msg: any = {
     msg: inputMessage.value,
     type: "null",
     function: "gen-ai-chat",
@@ -600,41 +572,59 @@ const sendMessageWithFileUseSSE = async () => {
     temperature: temperature.value,
     top_p: topP.value,
   };
+
   if (selectedFiles.value.length > 0) {
-    // 处理选中的文件
-    console.log("选中的文件:", selectedFiles.value);
-    let file_contents = []
-    let file_type = ""
+    let file_contents: FileMessage[] = [];
     for (let i = 0; i < selectedFiles.value.length; i++) {
       let file: File = selectedFiles.value[i];
-      //图片文件：jpg、png、gif、bmp
-      if (file.UserFileName.endsWith(".jpg") || file.UserFileName.endsWith(".png") || file.UserFileName.endsWith(".gif") || file.UserFileName.endsWith(".bmp")) {
-        file_type = "image_file"
-      } else {
-        file_type = "text_file"
-      }
-      let file_msg: FileMessage = {
+      let file_type = file.UserFileName.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i) ? "image_file" : "text_file";
+      file_contents.push({
         file_content: file,
         file_type: file_type,
-      };
-      file_contents.push(file_msg);
+      });
     }
     let msg: GenerationMessage = {
       text: inputMessage.value,
       file_content: file_contents,
     };
-    let msg_str = JSON.stringify(msg);
-    end_msg["msg"] = msg_str;
-    end_msg["is_file"] = true;
+    end_msg.msg = JSON.stringify(msg);
+    end_msg.is_file = true;
   }
+
+  let pMsgContent = "";
+  if (end_msg.is_file) {
+    let file_msg: GenerationMessage = JSON.parse(end_msg.msg);
+    for (let i = 0; i < file_msg.file_content.length; i++) {
+      const fc = file_msg.file_content[i];
+      if (fc.file_type === "image_file") {
+        pMsgContent += `![${fc.file_content.UserFileName}](${fileUrl}${fc.file_content.file_store_name})\n\n`;
+      } else {
+        pMsgContent += `📎 文件：[${fc.file_content.UserFileName}](${fileUrl}${fc.file_content.file_store_name})\n\n`;
+      }
+    }
+    pMsgContent += file_msg.text;
+  } else {
+    pMsgContent = end_msg.msg;
+  }
+
+  messages.push({ role: "user", content: pMsgContent, finished: true });
+  inputMessage.value = "";
+  selectedFiles.value = [];
+  loading.value = true;
+  canStop.value = true;
+  if (sessionID.value === 0) {
+    sessionName.value = pMsgContent.slice(0, 50);
+  }
+  scrollToBottom();
+
   fetchEventSource(url, {
     method: 'POST',
     headers: {
-      'Content-Type': 'application/json', // 请求体格式
-      ...headers,                         // 合并自定义请求头（如Authorization）
+      'Content-Type': 'application/json',
+      ...headers,
     },
-    body: JSON.stringify(end_msg),           // 序列化请求体
-    openWhenHidden: true,                 // 允许页面隐藏时保持连接
+    body: JSON.stringify(end_msg),
+    openWhenHidden: true,
     onmessage: (event) => {
       try {
         doReceiveMessageSSE(event);
@@ -643,160 +633,23 @@ const sendMessageWithFileUseSSE = async () => {
       }
     },
     onerror: (error) => {
-      ElMessage.error("发送失败!请刷新页面!");
+      ElMessage.error("发送失败! 请刷新页面重试");
+      loading.value = false;
+      canStop.value = false;
     },
     onclose: () => {
       console.log('SSE connection closed');
     },
   });
-
-  let pMsgContent = "";
-  if (end_msg["is_file"]) {
-    let file_msg: GenerationMessage = JSON.parse(end_msg["msg"]);
-    //解析成md格式
-    let file_content = file_msg.file_content
-    for (let i = 0; i < file_content.length; i++) {
-      if (file_content[i].file_type == "image_file") {
-        pMsgContent += `![${file_content[i].file_content.UserFileName}](${fileUrl + file_content[i].file_content.file_store_name})` + "\n\n";
-      } else {
-        pMsgContent += `文件：[${file_content[i].file_content.UserFileName}](${fileUrl + file_content[i].file_content.file_store_name})` + "\n\n";
-      }
-
-    }
-    pMsgContent = pMsgContent + "输入：" + file_msg.text;
-  } else {
-    pMsgContent = end_msg.msg;
-  }
-  messages.push({ role: "user", content: pMsgContent, finished: true });
-  inputMessage.value = "";
-  nextTick(() => {
-    scrollToBottom(); // 新增滚动调用
-  });
-  loading.value = true;
-  if (sessionID.value == 0) {
-    sessionName.value = end_msg.msg;
-  }
 };
 
-const sendMessageWithFile = async () => {
-  if (inputMessage.value.trim() === "") {
-    ElMessage.warning("消息不能为空");
-    return;
-  }
-  let end_msg = {
-    msg: inputMessage.value,
-    type: "null",
-    function: "gen-ai-chat",
-    session_id: sessionID.value,
-    model_id: selectModel.value,
-    temperature: temperature.value,
-    top_p: topP.value,
-  };
-  if (selectedFiles.value.length > 0) {
-    // 处理选中的文件
-    console.log("选中的文件:", selectedFiles.value);
-    let file_contents = []
-    let file_type = ""
-    for (let i = 0; i < selectedFiles.value.length; i++) {
-      let file: File = selectedFiles.value[i];
-      //图片文件：jpg、png、gif、bmp
-      if (file.UserFileName.endsWith(".jpg") || file.UserFileName.endsWith(".png") || file.UserFileName.endsWith(".gif") || file.UserFileName.endsWith(".bmp")) {
-        file_type = "image_file"
-      } else {
-        file_type = "text_file"
-      }
-      let file_msg: FileMessage = {
-        file_content: file,
-        file_type: file_type,
-      };
-      file_contents.push(file_msg);
-    }
-    let msg: GenerationMessage = {
-      text: inputMessage.value,
-      file_content: file_contents,
-    };
-    let msg_str = JSON.stringify(msg);
-    end_msg["msg"] = msg_str;
-    end_msg["is_file"] = true;
-  }
-  console.log("end_msg:", end_msg);
-
-  try {
-    socket.value.send(JSON.stringify(end_msg));
-    console.log("send msg:", end_msg);
-  } catch (e) {
-    //ElMessage.error("发送失败!请刷新页面!");
-    await IMWSConnect();
-    socket.value.send(JSON.stringify(end_msg));
-  }
-  if (sessionID.value == 0) {
-    sessionName.value = inputMessage.value;
-  }
-  let pMsgContent = "";
-  if (end_msg["is_file"]) {
-    let file_msg: GenerationMessage = JSON.parse(end_msg["msg"]);
-    //解析成md格式
-    let file_content = file_msg.file_content
-    for (let i = 0; i < file_content.length; i++) {
-      if (file_content[i].file_type == "image_file") {
-        pMsgContent += `![${file_content[i].file_content.UserFileName}](${fileUrl + file_content[i].file_content.file_store_name})` + "\n\n";
-      } else {
-        pMsgContent += `文件：[${file_content[i].file_content.UserFileName}](${fileUrl + file_content[i].file_content.file_store_name})` + "\n\n";
-      }
-
-    }
-    pMsgContent = pMsgContent + "输入：" + file_msg.text;
-  } else {
-    pMsgContent = end_msg.msg;
-  }
-  messages.push({ role: "user", content: pMsgContent, finished: true });
-  inputMessage.value = "";
-  nextTick(() => {
-    scrollToBottom(); // 新增滚动调用
-  });
-  loading.value = true;
-  if (sessionID.value == 0) {
-    sessionName.value = end_msg.msg;
-  }
-};
-
-const IMWSConnect = async () => {
-  let url =
-    "wss://pm.ljsea.top/im/ai_chat_ws?" +
-    "token=" +
-    localStorage.getItem("token");
-  //获取模型列表
-  let test_url = "ws://127.0.0.1:8084/im/ai_chat_ws?" + "token=" + localStorage.getItem("token");
-  //url =test_url;
-  socket.value = new WebSocket(url);
-  socket.value.onopen = () => {
-    console.log("WebSocket 连接已建立");
-    ElMessage.success("连接成功");
-  };
-  socket.value.onmessage = (event) => {
-    doReceiveMessage(event);
-  };
-
-  socket.value.onclose = () => {
-    console.log("WebSocket 连接已关闭");
-    ElMessage.error("连接已关闭");
-    //重新连接
-    //socket.value = new WebSocket(url);
-    socket.value = null;
-  };
-
-  socket.value.onerror = (error) => {
-    socket.value = null;
-    console.log("WebSocket 连接发生错误:", error);
-  };
-}
-
 const loadSession = async (session_id: number) => {
   sessionID.value = session_id;
-  messages.length = 0; // 清空消息
+  messages.length = 0;
+  historyMsgHtml.value.length = 0;
   sessionName.value = historySessions.value.find(
-    (session) => session.ID == session_id
-  )?.Name;
+    (session) => session.ID === session_id
+  )?.Name || "";
   await getMessage(session_id);
   scrollToBottom();
   doButtonD();
@@ -804,34 +657,30 @@ const loadSession = async (session_id: number) => {
 
 const clearCurrent = () => {
   sessionID.value = 0;
-  messages.length = 0; // 清空消息
-  historyMsgHtml.value.length = 0; // 清空历史消息
+  messages.length = 0;
+  historyMsgHtml.value.length = 0;
   sessionName.value = "新会话";
-  showSession();
-  ElMessage.success("新会话已创建!可以开始聊天了");
+  ElMessage.success("新会话已创建! 可以开始聊天了");
 };
 
 const showSession = async () => {
-  //获取历史会话
-  let req = {
-    token: localStorage.getItem("token"),
-    type: "UserID",
-    session_type: 1, //通用会话
-  };
-  let result = await FindSessionService(req);
-  historySessions.value = result.data;
+  if (!sessionIsShow.value) {
+    await fetchHistorySessions();
+  }
   sessionIsShow.value = !sessionIsShow.value;
 };
+
 const getShortenedName = (name: string) => {
-  if (name.length > 10) {
-    return name.slice(0, 10) + "...";
+  if (!name) return "";
+  if (name.length > 20) {
+    return name.slice(0, 20) + "...";
   }
   return name;
 };
 
 const getMessage = async (session_id: number) => {
-  historyMsgHtml.value.length = 0; // 清空历史消息
-  let result = {};
+  historyMsgHtml.value.length = 0;
+  let result: any = {};
   try {
     let req = {
       token: localStorage.getItem("token"),
@@ -839,23 +688,22 @@ const getMessage = async (session_id: number) => {
     };
     result = await GetMessageService(req);
     if (result["code"] === 0) {
-      // console.log(result["data"]);
       let data = result["data"];
       for (let i = 0; i < data.length; i++) {
         if (data[i]["Type"] === 3) {
           let msg: GenMessage = data[i];
           let pMsgContent = "";
-          if (msg.Status == 3) {
+          if (msg.Status === 3) {
             let file_msg: GenerationMessage = JSON.parse(msg.Msg);
-            let file_content = file_msg.file_content
-            for (let i = 0; i < file_content.length; i++) {
-              if (file_content[i].file_type == "image_file") {
-                pMsgContent += `![${file_content[i].file_content.UserFileName}](${fileUrl + file_content[i].file_content.file_store_name})` + "\n\n";
+            for (let j = 0; j < file_msg.file_content.length; j++) {
+              const fc = file_msg.file_content[j];
+              if (fc.file_type === "image_file") {
+                pMsgContent += `![${fc.file_content.UserFileName}](${fileUrl}${fc.file_content.file_store_name})\n\n`;
               } else {
-                pMsgContent += `文件：[${file_content[i].file_content.UserFileName}](${fileUrl + file_content[i].file_content.file_store_name})` + "\n\n";
+                pMsgContent += `📎 文件：[${fc.file_content.UserFileName}](${fileUrl}${fc.file_content.file_store_name})\n\n`;
               }
             }
-            pMsgContent = pMsgContent + file_msg.text;
+            pMsgContent += file_msg.text;
           } else {
             pMsgContent = msg.Msg;
           }
@@ -870,111 +718,48 @@ const getMessage = async (session_id: number) => {
             content: data[i]["Msg"],
             finished: true,
           });
-        } else {
-          console.log("未知消息类型");
         }
       }
     }
   } catch (e) {
     console.log(e);
   }
-  return {};
 };
 
-
-const getMessageWithFile = async (session_id: number) => {
-  let result = {};
-  try {
-    let req = {
-      token: localStorage.getItem("token"),
-      session_id: session_id,
-    };
-    result = await GetMessageService(req);
-    if (result["code"] === 0) {
-      console.log(result["data"]);
-      let data = result["data"];
-      for (let i = 0; i < data.length; i++) {
-        if (data[i]["Type"] === 3) {
-          let msg: GenMessage = data[i];
-          let pMsgContent = "";
-          if (msg.Status == 3) {
-            let img_msg: ImageMessage = JSON.parse(msg.Msg);
-            //解析成md格式
-            let img_content = img_msg.image_content
-            for (let i = 0; i < img_content.length; i++) {
-              pMsgContent += `![${img_content[i].img_name}](${img_content[i].img_url})` + "\n";
-            }
-            pMsgContent = pMsgContent + img_msg.text;
-          } else {
-            pMsgContent = msg.Msg;
-          }
-          messages.push({
-            role: "user",
-            content: pMsgContent,
-            finished: true,
-          });
-        } else if (data[i]["Type"] === 4) {
-          messages.push({
-            role: "assistant",
-            content: data[i]["Msg"],
-            finished: true,
-          });
-        } else {
-          console.log("未知消息类型");
-        }
-      }
-    }
-  } catch (e) {
-    console.log(e);
-  }
-  return {};
-};
-
-
 const MessageTextToDoc = async (content: string) => {
-
   textToDocFileContent.value = content;
   textToDocFileVisible.value = true;
   await nextTick();
   vditor.value = new Vditor(vditorRef.value, {
     mode: 'sv',
-    height: '600px',
+    height: '500px',
     width: '100%',
     cache: { enable: false },
     value: textToDocFileContent.value,
   });
-
 };
 
-
 const copyMessage = (content: string) => {
-  navigator.clipboard
-    .writeText(content)
-    .then(() => {
-      ElMessage.success("复制成功");
-    })
-    .catch((error) => {
-      ElMessage.error("复制失败: " + error);
-    });
+  navigator.clipboard.writeText(content).then(() => {
+    ElMessage.success("复制成功");
+  }).catch(() => {
+    ElMessage.error("复制失败");
+  });
 };
 
 const checkTokenIsValidAndRefresh = () => {
-  let last_refresh = localStorage.getItem("refresh_time"); //localStorage.setItem("refresh_time", Date.now().toString());
+  let last_refresh = localStorage.getItem("refresh_time");
   let now = Date.now();
   let isValid = false;
   if (last_refresh) {
     let diff = now - parseInt(last_refresh);
-    //超过1小时，token过期
     if (diff < 60 * 60 * 1000) {
       isValid = true;
     }
-  } else {
-    isValid = false;
   }
-  if (isValid == false) {
+  if (!isValid) {
     GetModelListByFunctionName();
   }
-
 };
 
 const GetModelListByFunctionName = async () => {
@@ -985,22 +770,18 @@ const GetModelListByFunctionName = async () => {
   try {
     let result = await FindModelListByFunctionName(req);
     if (result["code"] === 0) {
-      ModelList.value = result["data"];
-      if (userUIconfigInfo.value.gen_ai_function.model_id == 0) {
-        selectModel.value = ModelList.value[0].ID;
-      } else {
+      ModelList.value = result.data;
+      if (userUIconfigInfo.value.gen_ai_function?.model_id) {
         selectModel.value = userUIconfigInfo.value.gen_ai_function.model_id;
-        temperature.value = userUIconfigInfo.value.gen_ai_function.temperature;
-        topP.value = userUIconfigInfo.value.gen_ai_function.top_p;
-        sessionID.value = userUIconfigInfo.value.gen_ai_function.session_id;
-        if (sessionID.value != 0) {
+        temperature.value = userUIconfigInfo.value.gen_ai_function.temperature || 0.8;
+        topP.value = userUIconfigInfo.value.gen_ai_function.top_p || 0.9;
+        sessionID.value = userUIconfigInfo.value.gen_ai_function.session_id || 0;
+        if (sessionID.value !== 0) {
           getMessage(sessionID.value);
         }
+      } else if (ModelList.value.length > 0) {
+        selectModel.value = ModelList.value[0].ID;
       }
-      //console.log("gen_ai_chat_model_id:", gen_ai_chat_model_id);
-      //console.log("selectModel:", selectModel.value);
-      // selectModel.value = ModelList.value[0].ID;
-      //console.log("model_list:", ModelList.value);
     } else {
       ElMessage.error(result["msg"]);
     }
@@ -1024,10 +805,7 @@ const getFileListData = async () => {
   }
 };
 
-
 const HandleTextToDocFile = async () => {
-  // 处理文本创建文件的逻辑
-  //console.log("文本创建文件:", textToDocFileName.value, vditor.value.getValue(), selectFileDocType.value);
   if (textToDocFileName.value.trim() === "") {
     ElMessage.warning("文件名不能为空");
     return;
@@ -1040,262 +818,691 @@ const HandleTextToDocFile = async () => {
   };
   let result = await SetMessageTextToDocService(req);
   if (result["code"] === 0) {
-    ElMessage.success("文件已加入创建队列，请等待一段时间后可在你的文件中查看!");
+    ElMessage.success("文件已加入创建队列，请在文件列表中查看");
     textToDocFileVisible.value = false;
   } else {
     ElMessage.error(result["msg"]);
   }
 };
-
 </script>
+
 <style scoped>
 .chat-app {
   display: flex;
   height: 100%;
+  background-color: #f7f8fa;
 }
 
+/* 侧边栏 */
 .history-sessions {
-  width: 15%;
-  padding: 20px;
+  width: 280px;
   height: 100%;
-  overflow-y: auto;
-  border-right: 1px solid #e1e1e1;
-  scrollbar-width: none;
-}
-
-.history-sessions ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-.history-sessions li {
-  cursor: pointer;
-  padding: 10px;
-  border-bottom: 1px solid #e1e1e1;
-}
-
-.history-sessions li:hover {
-  background-color: #f0f0f0;
-}
-
-.chat-container {
-  flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 20px;
-  height: 100%;
-  box-sizing: border-box;
+  background: #fff;
+  border-right: 1px solid #e5e6eb;
+  transition: all 0.3s ease;
 }
 
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  /* 允许垂直滚动 */
-  padding: 10px;
-  margin-bottom: 20px;
-  scrollbar-width: 10px;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
+.history-sessions.collapsed {
+  width: 0;
+  overflow: hidden;
+  border-right: none;
 }
 
-.messages-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  /* 确保内部可以滚动 */
-  height: 100%;
+.session-header {
+  padding: 16px;
+  border-bottom: 1px solid #e5e6eb;
 }
 
-.message {
-  display: flex;
-  margin-bottom: 15px;
-}
-
-.message.user {
-  justify-content: flex-end;
-}
-
-.message-avatar {
-  width: 40px;
-  text-align: center;
-  line-height: 40px;
-  font-size: 20px;
-  margin-right: 10px;
-}
-
-.message.assistant .message-avatar {
-  margin-right: 0;
-  margin-left: 10px;
-}
-
-.message-content {
-  background-color: #f0f9eb;
-  border: 1px solid #e1f3d8;
-  border-radius: 4px;
-  padding: 10px 15px;
-  white-space: pre-wrap;
-  max-width: 800px;
-}
-
-.message.assistant .message-content {
-  background-color: #f3f4f6;
-  border: 1px solid #dce4eb;
-  max-width: 1000px;
-}
-
-.loading-indicator {
-  text-align: center;
-  color: #999;
-  font-size: 16px;
-}
-
-.chat-input {
-  width: 100%;
-}
-
-.el-input {
+.new-session-btn {
   width: 100%;
 }
 
 .session-card {
-  margin-bottom: 20px;
-  height: 20%;
+  margin: 12px;
+  border-radius: 8px;
 }
 
-.session-card2 {
-  margin-bottom: 20px;
-  height: 70%;
+.session-card :deep(.el-card__header) {
+  padding: 12px 16px;
+  background: #f7f8fa;
+  border-bottom: none;
 }
 
-.session-card ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-
-.session-card li {
-  cursor: pointer;
-  padding: 10px;
-  border-bottom: 1px solid #e1e1e1;
-}
-
-.session-card li:hover {
-  background-color: #f0f0f0;
-}
-
-.scroll-wrapper {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.code-controls {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  display: flex;
-  gap: 10px;
-}
-
-.copy-code-button {
-  background-color: dodgerblue;
-  color: white;
-  width: 30px;
-  height: 20px;
-  border: 0;
+.card-header {
   display: flex;
   align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: #1d2129;
 }
 
-.el-icon-copy {
-  margin-right: 5px;
+.current-session {
+  padding: 8px 0;
+}
+
+.session-name {
+  padding: 8px 12px;
+  background: #f2f3f5;
+  border-radius: 6px;
+  color: #4e5969;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+}
+
+.history-scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.history-item {
+  padding: 10px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: #4e5969;
+  font-size: 14px;
+}
+
+.history-item:hover {
+  background: #f2f3f5;
+}
+
+.history-item.active {
+  background: #e8f3ff;
+  color: #1677ff;
+}
+
+.history-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 折叠按钮 */
+.toggle-sidebar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  cursor: pointer;
+  color: #86909c;
+  transition: all 0.2s;
+  background: #fff;
+  border-right: 1px solid #e5e6eb;
+}
+
+.toggle-sidebar:hover {
+  color: #4e5969;
+  background: #f7f8fa;
+}
+
+/* 聊天容器 */
+.chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+}
+
+/* 顶部工具栏 */
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 24px;
+  background: #fff;
+  border-bottom: 1px solid #e5e6eb;
+}
+
+.model-select {
+  width: 300px;
+}
+
+/* 消息列表 */
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #86909c;
+}
+
+.empty-icon {
+  color: #c9cdd4;
+  margin-bottom: 16px;
+}
+
+.empty-text {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1d2129;
+  margin-bottom: 8px;
+}
+
+.empty-hint {
+  font-size: 14px;
+  color: #86909c;
+}
+
+/* 消息列表 */
+.messages-list {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.message-item {
+  display: flex;
+  gap: 12px;
+}
+
+.message-item.user {
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ai-icon {
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.user-icon {
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  color: #fff;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.message-wrapper {
+  max-width: calc(100% - 80px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.message-item.user .message-wrapper {
+  align-items: flex-end;
+}
+
+.message-content {
+  padding: 16px 20px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.message-item.user .message-content {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+}
+
+.message-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.message-item:hover .message-actions {
+  opacity: 1;
+}
+
+/* 打字指示器 */
+.typing-indicator {
+  display: flex;
+  gap: 6px;
+  padding: 8px 0;
+}
+
+.typing-indicator span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #86909c;
+  animation: typing 1.4s infinite;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-6px);
+    opacity: 1;
+  }
+}
+
+.typing-text {
+  color: #86909c;
+  font-size: 14px;
+}
+
+/* 输入区域 */
+.chat-input-wrapper {
+  padding: 16px 24px;
+  background: #fff;
+  border-top: 1px solid #e5e6eb;
+}
+
+.selected-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.file-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.input-area {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.input-tools {
+  display: flex;
+  gap: 4px;
+  padding-bottom: 8px;
+}
+
+.chat-textarea {
+  flex: 1;
+}
+
+.chat-textarea :deep(.el-textarea__inner) {
+  border-radius: 12px;
+  padding: 12px 16px;
+  resize: none;
+}
+
+.send-btn {
+  padding: 12px 24px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+/* 文件对话框 */
+.file-dialog :deep(.el-dialog__body) {
+  padding: 0;
+}
+
+.dialog-search {
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e6eb;
+}
+
+.dialog-search .el-input {
+  flex: 1;
 }
 
-/* 对话框 */
 .file-list {
   max-height: 400px;
   overflow-y: auto;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  margin-bottom: 10px;
+  padding: 12px 0;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.file-item:hover {
+  background: #f7f8fa;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
 }
 
 .file-icon {
-  margin-right: 5px;
-  color: #606266;
+  color: #86909c;
 }
 
-.file-time {
-  float: right;
-  color: #909399;
-  font-size: 12px;
+.file-name {
+  color: #1d2129;
 }
 
 .footer-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 16px 20px;
+  border-top: 1px solid #e5e6eb;
 }
 
 .selected-count {
-  margin-right: 10px;
+  color: #86909c;
 }
 
-.el-icon-document {
-  color: #409eff;
+/* 文档对话框 */
+.doc-dialog :deep(.el-dialog__body) {
+  padding: 0;
 }
 
-.model-dropdown {
-  margin-top: 10px;
+.doc-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e6eb;
 }
 
-.dropdown-content {
+.doc-name-input {
   width: 400px;
-  padding: 10px;
+}
+
+.vditor-container {
+  min-height: 500px;
+}
+
+.doc-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid #e5e6eb;
+}
+
+/* 参数下拉 */
+.dropdown-content {
+  width: 360px;
+  padding: 8px;
 }
 
 .model-params {
-  margin-top: 10px;
+  padding: 8px;
 }
 
-.param-value {
-  margin-top: 5px;
-  text-align: right;
+.params-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  background: #e8f3ff;
+  border-radius: 6px;
+  color: #1677ff;
+  font-size: 13px;
 }
 
 .param-item {
-  margin: 25px 0;
+  margin-bottom: 20px;
 }
 
 .param-label {
   display: flex;
   align-items: center;
+  gap: 6px;
   margin-bottom: 8px;
-  color: #606266;
+  color: #4e5969;
+  font-size: 14px;
 }
 
 .tip-icon {
-  margin-left: 8px;
-  color: #909399;
+  color: #86909c;
   cursor: help;
 }
 
+.param-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.param-control .el-slider {
+  flex: 1;
+}
+
 .param-value {
-  margin-top: 8px;
-  text-align: center;
-  font-weight: bold;
-  color: #409eff;
-}
-
-/* 自定义滑块样式 */
-:deep(.el-slider__runway) {
-  height: 6px;
-}
-
-:deep(.el-slider__button) {
-  width: 16px;
-  height: 16px;
+  min-width: 40px;
+  text-align: right;
+  font-weight: 600;
+  color: #1677ff;
+}
+</style>
+
+<style>
+/* Markdown 样式 */
+.markdown-body {
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.markdown-body p {
+  margin: 8px 0;
+}
+
+.markdown-body pre {
+  margin: 16px 0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.markdown-body code {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 14px;
+}
+
+.markdown-body pre code {
+  display: block;
+  padding: 16px;
+  padding-top: 12px;
+  overflow-x: auto;
+}
+
+.markdown-body :not(pre) > code {
+  background: #f2f3f5;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #d63384;
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background: #1e1e1e;
+  border-bottom: 1px solid #333;
+}
+
+.code-lang {
+  color: #888;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.copy-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: transparent;
+  border: none;
+  color: #888;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.copy-btn:hover {
+  color: #fff;
+  background: #333;
+}
+
+.markdown-body blockquote {
+  margin: 12px 0;
+  padding: 8px 16px;
+  border-left: 4px solid #667eea;
+  background: #f7f8fa;
+  color: #4e5969;
+  border-radius: 0 6px 6px 0;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 24px;
+  margin: 12px 0;
+}
+
+.markdown-body li {
+  margin: 4px 0;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin: 16px 0 8px;
+  font-weight: 600;
+  color: #1d2129;
+}
+
+.markdown-body h1 {
+  font-size: 24px;
+  border-bottom: 1px solid #e5e6eb;
+  padding-bottom: 8px;
+}
+
+.markdown-body h2 {
+  font-size: 20px;
+}
+
+.markdown-body h3 {
+  font-size: 18px;
+}
+
+.markdown-body a {
+  color: #667eea;
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 12px 0;
+}
+
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid #e5e6eb;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.markdown-body th {
+  background: #f7f8fa;
+  font-weight: 600;
+}
+
+.message-item.user .markdown-body :not(pre) > code {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.message-item.user .markdown-body a {
+  color: #fff;
+  text-decoration: underline;
+}
+
+/* 滚动条样式 */
+.chat-messages::-webkit-scrollbar,
+.history-scroll::-webkit-scrollbar,
+.file-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track,
+.history-scroll::-webkit-scrollbar-track,
+.file-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb,
+.history-scroll::-webkit-scrollbar-thumb,
+.file-list::-webkit-scrollbar-thumb {
+  background: #c9cdd4;
+  border-radius: 3px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover,
+.history-scroll::-webkit-scrollbar-thumb:hover,
+.file-list::-webkit-scrollbar-thumb:hover {
+  background: #86909c;
 }
 </style>
diff --git a/src/views/system/gen-chat2.vue b/src/views/system/gen-chat2.vue
index 5d8fc3e..160d815 100644
--- a/src/views/system/gen-chat2.vue
+++ b/src/views/system/gen-chat2.vue
@@ -1,336 +1,369 @@
 <template>
   <div class="chat-app">
     <!-- 历史会话侧边栏 -->
-    <div class="history-sessions" v-if="sessionIsShow">
-      <div>
-        <el-button type="primary" @click="clearCurrent">新会话</el-button>
+    <div class="history-sessions" :class="{ 'sessions-hidden': !sessionIsShow }">
+      <div class="sessions-header">
+        <el-button type="primary" @click="clearCurrent" class="new-session-btn">
+          <el-icon><Plus /></el-icon>
+          新会话
+        </el-button>
       </div>
-      <el-card class="session-card">
-        <template #header>
-            <h3>当前会话</h3>
-          </template>
-        <el-tooltip :content=sessionName placement="top">
-          <ul>
-            <li>{{ getShortenedName(sessionName) }}</li>
-          </ul>
+
+      <div class="session-card">
+        <div class="card-header">
+          <el-icon><ChatDotRound /></el-icon>
+          <span>当前会话</span>
+        </div>
+        <el-tooltip :content="sessionName" placement="top">
+          <div class="current-session-item">
+            <el-icon class="session-icon"><Document /></el-icon>
+            <span class="session-name">{{ getShortenedName(sessionName) || '新会话' }}</span>
+          </div>
         </el-tooltip>
-      </el-card>
-      <el-card class="session-card2">
-        <template #header>
-          <h3>历史会话</h3>
-        </template>
-        <el-scrollbar style="height: 400px; scrollbar-width: none">
-          <ul>
-            <li
+      </div>
+
+      <div class="session-card history-card">
+        <div class="card-header">
+          <el-icon><Clock /></el-icon>
+          <span>历史会话</span>
+        </div>
+        <el-scrollbar class="history-scrollbar">
+          <div class="session-list">
+            <div
               v-for="(session, index) in historySessions"
               :key="index"
+              class="session-item"
               @click="loadSession(session.ID)"
             >
-              <el-tooltip :content="session.Name" placement="top">
-                <span>{{ getShortenedName(session.Name) }}</span>
+              <el-icon class="session-icon"><ChatLineRound /></el-icon>
+              <el-tooltip :content="session.Name" placement="top" :show-after="500">
+                <span class="session-name">{{ getShortenedName(session.Name) }}</span>
               </el-tooltip>
-            </li>
-          </ul>
+            </div>
+          </div>
         </el-scrollbar>
-      </el-card>
-    </div>
-    <div>
-      <div @click="showSession" style="cursor: pointer">
-        <el-icon v-if="sessionIsShow">
-          <Expand />
-        </el-icon>
-        <el-icon v-else>
-          <Fold />
-        </el-icon>
       </div>
     </div>
 
-    <!-- 原有的聊天区域 -->
+    <!-- 侧边栏切换按钮 -->
+    <div class="toggle-sidebar" @click="showSession">
+      <el-icon v-if="sessionIsShow"><DArrowLeft /></el-icon>
+      <el-icon v-else><DArrowRight /></el-icon>
+    </div>
+
+    <!-- 聊天区域 -->
     <div class="chat-container">
       <!-- 消息列表 -->
-      <el-card
-        class="chat-messages"
-        shadow="never"
-        ref="messagesContainer"
-        v-if="messages.length > 0"
-      >
-        <div
-          v-for="(message, index) in messages"
-          :key="index"
-          :class="['message', message.role]"
-        >
-          <div class="message-avatar">
-            <span v-if="message.role === 'assistant'">💬</span>
-            <span v-else>🧑‍🎓</span>
+      <div class="chat-messages-wrapper">
+        <div class="chat-messages" ref="messagesContainer">
+          <!-- 欢迎消息 -->
+          <div v-if="messages.length === 0" class="welcome-section">
+            <div class="welcome-icon">🤖</div>
+            <h2>你好！我是AI助手</h2>
+            <p>选择模型并开始对话吧</p>
           </div>
-          <div class="message-content">
-            <div v-html="renderMarkdown(message,index)"></div>
-            <!-- 添加复制 -->
-            <div>
-            <el-tooltip content="复制" placement="top">
-              <el-button
-                type="text"
-                :icon="DocumentCopy"
-                @click="copyMessage(message.content)"
-              ></el-button>
-              </el-tooltip> 
-              <!-- <el-button
-                type="text"
-                :icon="Document"
-                @click="MessageTextToDoc(message.content)"
-                ></el-button> -->
-                <el-tooltip content="预览、文本创建文件" placement="top">
-                    <el-button
-                      type="text"
-                      :icon="Document"
-                      @click="MessageTextToDoc(message.content)"
-                    >
-                    </el-button>
+
+          <!-- 消息列表 -->
+          <div
+            v-for="(message, index) in messages"
+            :key="index"
+            :class="['message-item', message.role]"
+          >
+            <div class="message-avatar">
+              <el-icon v-if="message.role === 'assistant'" class="ai-avatar"><Service /></el-icon>
+              <el-icon v-else class="user-avatar"><User /></el-icon>
+            </div>
+            <div class="message-wrapper">
+              <div class="message-content" v-html="renderMarkdown(message, index)"></div>
+              <div class="message-actions" v-if="message.role === 'assistant' && message.finished">
+                <el-tooltip content="复制内容" placement="top">
+                  <el-button link type="primary" size="small" @click="copyMessage(message.content)">
+                    <el-icon><DocumentCopy /></el-icon>
+                    复制
+                  </el-button>
                 </el-tooltip>
+                <el-tooltip content="导出为文件" placement="top">
+                  <el-button link type="primary" size="small" @click="MessageTextToDoc(message.content)">
+                    <el-icon><Download /></el-icon>
+                    导出
+                  </el-button>
+                </el-tooltip>
+              </div>
             </div>
           </div>
+
+          <!-- 加载指示器 -->
+          <div v-if="loading" class="loading-indicator">
+            <div class="typing-dots">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <span class="loading-text">AI正在思考中... (已生成 {{ currentAIMessage.length }} 字符)</span>
+          </div>
         </div>
-        <div v-if="loading" class="loading-indicator">Loading...,已回答字符:{{currentAIMessage.length}}</div>
-      </el-card>
+      </div>
 
       <!-- 输入区域 -->
-      <el-card class="chat-input" shadow="never">
-        <el-row :gutter="10">
-          <el-col :span="20">
-            <el-input
-              v-model="inputMessage"
-              type="textarea"
-              style="border: 0"
-              :rows="5"
-              placeholder="输入消息..."
-              @keyup.enter="sendMessage"
-            />
-            <!-- <el-text
-              v-model="inputMessage"
-              aria-placeholder="输入信息...."
-            ></el-text> -->
-          </el-col>
-          <el-col :span="4" style="text-align: center">
-            <el-button
-              @click="sendMessage"
-              type="success"
-              :icon="Check"
-              round
-              :disabled="loading"
-              >发送</el-button
-            >
-            <el-dropdown trigger="click" class="model-dropdown">
-              <span class="el-dropdown-link">
-                <span>模型参数</span>
-                <el-icon><ArrowDown /></el-icon>
-              </span>
-              <template #dropdown>
-                <div class="dropdown-content">
-                  <div class="model-params">
-                  <h4>模型参数
-                    <el-tooltip 
-                        effect="dark" 
-                        placement="right"
-                        content="建议仅调整 temperature 或 top_p 其中之一，不建议两者都修改"
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
-                      </el-tooltip>
-                  </h4>
-
-                  <!-- 温度参数 -->
-                  <div class="param-item">
-                    <div class="param-label">
-                      <span>温度 (Temperature)</span>
-                      <el-tooltip 
-                        effect="dark" 
-                        placement="right"
-                        content="采样温度，控制生成随机性（0: 保守，2: 随机）"
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
-                      </el-tooltip>
-                    </div>
-                    <el-slider 
-                      v-model="temperature" 
-                      :min="0" 
-                      :max="2" 
-                      :step="0.1"
-                      :show-tooltip="false"
-                    />
-                    <div class="param-value">{{ temperature }}</div>
-                  </div>
-
-                  <!-- Top P 参数 -->
-                  <div class="param-item">
-                    <div class="param-label">
-                      <span>Top P</span>
-                      <el-tooltip 
-                        effect="dark" 
-                        placement="right"
-                        content="限制候选词范围（0: 严格，1: 宽松）"
-                      >
-                        <el-icon class="tip-icon"><QuestionFilled /></el-icon>
-                      </el-tooltip>
-                    </div>
-                    <el-slider 
-                      v-model="topP" 
-                      :min="0" 
-                      :max="1" 
-                      :step="0.1"
-                      :show-tooltip="false"
-                    />
-                    <div class="param-value">{{ topP }}</div>
-                  </div>
-                </div>
-                </div>
-              </template>
-            </el-dropdown>
-
-
-
-
-          </el-col>
-          <el-col :span="3" style="text-align: center">
-            <el-select v-model="selectModel" placeholder="选择模型" style="width: 320px;">
+      <div class="input-section">
+        <div class="input-toolbar">
+          <div class="toolbar-left">
+            <el-select v-model="selectModel" placeholder="选择模型" class="model-select">
               <el-option
                 v-for="item in ModelList"
                 :key="item.ID"
-                :label="item.Type + ':' + item.Description"
+                :label="item.Type + ' - ' + item.Description"
                 :value="item.ID"
-              ></el-option>
+              />
             </el-select>
-          </el-col>
-          <el-col :span="10" style="text-align: center">
-            <el-tooltip content="文件选择" placement="top">
-            <el-button @click="handleSelectFileVisible"
-              ><el-icon><Files /></el-icon
-            ></el-button>
-            </el-tooltip>
-          </el-col>
-          <!-- <el-col :span="1" style="text-align: center">
-            <el-button @click="handleUploadPicture"><el-icon><Picture /></el-icon></el-button>
-          </el-col>
-          <el-col :span="1" style="text-align: center">
-            <el-button><el-icon><VideoCamera /></el-icon></el-button>
-          </el-col> -->
-          <!-- 已选文件一行显示 -->
-          <el-col :span="12" style="text-align: center">
-            <el-tag
-              v-for="(file, index) in selectedFiles"
-              :key="index"
-              closable
-              @close="removeFile(index)"
-              >{{ file.UserFileName }}</el-tag
+
+            <el-popover
+              placement="top"
+              :width="360"
+              trigger="click"
+              popper-class="params-popover"
             >
-          </el-col>
-        </el-row>
-      </el-card>
+              <template #reference>
+                <el-button class="params-btn">
+                  <el-icon><Setting /></el-icon>
+                  模型参数
+                </el-button>
+              </template>
+              <div class="model-params-panel">
+                <div class="params-title">
+                  <span>模型参数设置</span>
+                  <el-tooltip
+                    effect="dark"
+                    placement="top"
+                    content="建议仅调整 temperature 或 top_p 其中之一，不建议两者都修改"
+                  >
+                    <el-icon class="tip-icon"><InfoFilled /></el-icon>
+                  </el-tooltip>
+                </div>
+
+                <div class="param-item">
+                  <div class="param-header">
+                    <span class="param-name">温度 (Temperature)</span>
+                    <span class="param-value">{{ temperature }}</span>
+                  </div>
+                  <el-tooltip
+                    effect="dark"
+                    placement="top"
+                    content="采样温度，控制生成随机性（0: 保守，2: 随机）"
+                  >
+                    <el-slider
+                      v-model="temperature"
+                      :min="0"
+                      :max="2"
+                      :step="0.1"
+                      :show-tooltip="true"
+                    />
+                  </el-tooltip>
+                </div>
+
+                <div class="param-item">
+                  <div class="param-header">
+                    <span class="param-name">Top P</span>
+                    <span class="param-value">{{ topP }}</span>
+                  </div>
+                  <el-tooltip
+                    effect="dark"
+                    placement="top"
+                    content="限制候选词范围（0: 严格，1: 宽松）"
+                  >
+                    <el-slider
+                      v-model="topP"
+                      :min="0"
+                      :max="1"
+                      :step="0.1"
+                      :show-tooltip="true"
+                    />
+                  </el-tooltip>
+                </div>
+              </div>
+            </el-popover>
+          </div>
+
+          <div class="toolbar-right">
+            <el-tooltip content="添加文件" placement="top">
+              <el-button circle @click="handleSelectFileVisible">
+                <el-icon><FolderOpened /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </div>
+        </div>
+
+        <!-- 已选文件标签 -->
+        <div v-if="selectedFiles.length > 0" class="selected-files">
+          <el-tag
+            v-for="(file, index) in selectedFiles"
+            :key="index"
+            closable
+            class="file-tag"
+            @close="removeFile(index)"
+          >
+            <el-icon><Document /></el-icon>
+            {{ file.UserFileName }}
+          </el-tag>
+        </div>
+
+        <div class="input-wrapper">
+          <el-input
+            v-model="inputMessage"
+            type="textarea"
+            :rows="4"
+            placeholder="输入消息... (Shift + Enter 换行)"
+            class="message-input"
+            @keydown="handleKeyDown"
+            resize="none"
+          />
+          <div class="send-btn-wrapper">
+            <el-button
+              type="primary"
+              :loading="loading"
+              :disabled="!inputMessage.trim() && selectedFiles.length === 0"
+              @click="sendMessage"
+              class="send-btn"
+            >
+              <span v-if="!loading">发送</span>
+              <el-icon v-else><Loading /></el-icon>
+            </el-button>
+          </div>
+        </div>
+      </div>
     </div>
 
-    <div>
-      <!-- 文件对话框 -->
-      <el-dialog
-        v-model="selectFileVisible"
-        title="从上传文件中选择"
-        width="50%"
-      >
+    <!-- 文件对话框 -->
+    <el-dialog
+      v-model="selectFileVisible"
+      title="选择文件"
+      width="600px"
+      class="file-dialog"
+    >
+      <div class="file-dialog-header">
         <el-input
           placeholder="搜索文件"
           v-model="searchFileQuery"
-          prefix-icon="el-icon-search"
-        />
-        <el-button @click="uploadMessageFile">上传文件</el-button>
-        <!-- 文件列表 -->
-        <div class="file-list">
-          <el-checkbox-group v-model="selectedFiles">
-            <el-checkbox
-              v-for="(item, index) in filteredFiles"
-              :key="index"
-              :label="item"
-            >
-              <span class="file-icon">
-                <!-- 根据文件类型展示不同图标 -->
-                <i
-                  v-if="item.UploadType === 'image'"
-                  class="el-icon-picture"
-                ></i>
-                <i
-                  v-else-if="item.UploadType === 'file'"
-                  class="el-icon-document"
-                ></i>
-                <!-- 可继续补充其他文件类型图标 -->
-              </span>
-              {{ item.UserFileName }}
-              <!-- <span class="file-time">{{ item.CreatedAt }}</span> -->
-            </el-checkbox>
-          </el-checkbox-group>
-        </div>
-        <!-- 底部状态栏和按钮 -->
-        <div class="footer-bar">
-          <span class="selected-count"
-            >已选 {{ selectedFiles.length }} 个文件</span
-          >
-          <el-button @click="selectFileVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSelectFileConfirm"
-            >确认添加({{ selectedFiles.length }})</el-button
+          class="search-input"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+        <el-button type="primary" @click="uploadMessageFile">
+          <el-icon><Upload /></el-icon>
+          上传文件
+        </el-button>
+      </div>
+
+      <div class="file-list">
+        <el-checkbox-group v-model="selectedFiles">
+          <div
+            v-for="(item, index) in filteredFiles"
+            :key="index"
+            class="file-item"
           >
+            <el-checkbox :label="item" />
+            <div class="file-info">
+              <el-icon class="file-type-icon">
+                <Picture v-if="item.UploadType === 'image'" />
+                <Document v-else />
+              </el-icon>
+              <span class="file-name">{{ item.UserFileName }}</span>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <span class="selected-count">已选择 {{ selectedFiles.length }} 个文件</span>
+          <div class="footer-buttons">
+            <el-button @click="selectFileVisible = false">取消</el-button>
+            <el-button type="primary" @click="handleSelectFileConfirm">
+              确认添加
+            </el-button>
+          </div>
         </div>
-      </el-dialog>
-    </div>
+      </template>
+    </el-dialog>
+
     <!-- 上传文件对话框 -->
-    <div>
-      <el-dialog
-        title="上传文件"
-        v-model="uploadFileVisible"
-        width="50%"
-        :before-close="handleUploadFileClose"
-      >
-        <UploadFile></UploadFile>
-      </el-dialog>
-    </div>
-    <div>
-      <!-- 文本创建文件对话 -->
-      <el-dialog
-        title="文本创建文件"
-        v-model="textToDocFileVisible"
-        width="70%"
-        heigth="80vh"
-        :before-close="handleMessageTextToDOCClose">
-        <!-- <textarea v-model="textToDocFileContent"></textarea> -->
-        <div ref="vditorRef"></div>
-        <el-col>
-          <!-- 提示 -->
-          <el-input v-model="textToDocFileName" placeholder="输入文件名..." style="width: 30%;">输入文件名</el-input>
-        </el-col>
-        <!-- <el-input v-model="textToDocFileName" placeholder="输入文件名..." width="30%">输入文件名</el-input> -->
-        <el-col>
-          <el-select v-model="selectFileDocType" placeholder="选择文本类型" style="width: 30%;">
-          <el-option label="docx" value="docx"></el-option>
-          <el-option label="txt" value="txt"></el-option>
-          <el-option label="md" value="md"></el-option>
-        </el-select>
-        </el-col>
-      
-       <el-button type="primary" @click="HandleTextToDocFile">确认</el-button>
-        <el-button @click="textToDocFileVisible = false">取消</el-button>
-      </el-dialog>
-    </div>
+    <el-dialog
+      title="上传文件"
+      v-model="uploadFileVisible"
+      width="600px"
+      :before-close="handleUploadFileClose"
+    >
+      <UploadFile />
+    </el-dialog>
+
+    <!-- 文本创建文件对话 -->
+    <el-dialog
+      title="导出为文件"
+      v-model="textToDocFileVisible"
+      width="70%"
+      :before-close="handleMessageTextToDOCClose"
+      class="export-dialog"
+    >
+      <div class="export-form">
+        <div class="form-row">
+          <span class="form-label">文件名：</span>
+          <el-input v-model="textToDocFileName" placeholder="请输入文件名..." class="form-input" />
+        </div>
+        <div class="form-row">
+          <span class="form-label">文件类型：</span>
+          <el-select v-model="selectFileDocType" placeholder="选择文件类型" class="form-select">
+            <el-option label="Word文档 (.docx)" value="docx" />
+            <el-option label="文本文件 (.txt)" value="txt" />
+            <el-option label="Markdown文件 (.md)" value="md" />
+          </el-select>
+        </div>
+      </div>
+      <div ref="vditorRef" class="vditor-container"></div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="textToDocFileVisible = false">取消</el-button>
+          <el-button type="primary" @click="HandleTextToDocFile">确认导出</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, nextTick,watch } from "vue";
-import { ElCard, ElInput, ElButton, ElDialog } from "element-plus";
+import { ref, onMounted, onUnmounted, reactive, nextTick, watch } from "vue";
+import { ElInput, ElButton, ElDialog } from "element-plus";
 import { WSMessage, GenMessage } from "@/types/im";
 import { GetMessageService } from "@/api/im";
 import { FindUserFileService } from "@/api/file";
 import { Model } from "@/types/model";
-import {UserUISettings} from '@/types/user';
+import { UserUISettings } from '@/types/user';
 import { File, fileUrl } from "@/types/file";
 import { Session } from "@/types/session";
 import { FindSessionService } from "@/api/session";
 import { SetMessageTextToDocService } from "@/api/tool";
 import { ElMessage } from "element-plus";
-import { Check, DocumentCopy,Document, PriceTag } from "@element-plus/icons-vue";
+import {
+  DocumentCopy,
+  Document,
+  Plus,
+  ChatDotRound,
+  Clock,
+  ChatLineRound,
+  DArrowLeft,
+  DArrowRight,
+  Service,
+  User,
+  Download,
+  Setting,
+  FolderOpened,
+  Search,
+  Upload,
+  Picture,
+  Loading,
+  InfoFilled
+} from "@element-plus/icons-vue";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
 import UploadFile from "@/components/upload-file.vue";
@@ -623,11 +656,19 @@ const updateUserUIconfigInfo = () => {
     });
 }
 
+const handleKeyDown = (event: KeyboardEvent) => {
+  // Enter 发送，Shift + Enter 换行
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    sendMessage();
+  }
+};
+
 const sendMessage = async () => {
   //测试ws是否连接断开
   if (socket.value == null) {
     await IMWSConnect();
-    
+
   }
   if(loading.value === true){
     ElMessage.warning("正在等待AI回复，请稍后再试");
@@ -994,241 +1035,631 @@ const HandleTextToDocFile = async () => {
 .chat-app {
   display: flex;
   height: 100%;
+  background: #f7f8fa;
 }
 
+/* 侧边栏 */
 .history-sessions {
-  width: 15%;
-  padding: 20px;
+  width: 280px;
   height: 100%;
-  overflow-y: auto;
-  border-right: 1px solid #e1e1e1;
-  scrollbar-width: none;
-}
-
-.history-sessions ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-.history-sessions li {
-  cursor: pointer;
-  padding: 10px;
-  border-bottom: 1px solid #e1e1e1;
-}
-
-.history-sessions li:hover {
-  background-color: #f0f0f0;
-}
-
-.chat-container {
-  flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 20px;
-  height: 100%;
-  box-sizing: border-box;
+  background: #ffffff;
+  border-right: 1px solid #e5e7eb;
+  transition: all 0.3s ease;
+  overflow: hidden;
 }
 
-.chat-messages {
-  flex: 1;
-  overflow-y: auto; /* 允许垂直滚动 */
-  padding: 10px;   
-  margin-bottom: 20px;
-  scrollbar-width: 10px;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
+.history-sessions.sessions-hidden {
+  width: 0;
 }
 
-.messages-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto; /* 确保内部可以滚动 */
-  height: 100%;
+.sessions-header {
+  padding: 16px;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-.message {
-  display: flex;
-  margin-bottom: 15px;
-}
-
-.message.user {
-  justify-content: flex-end;
-}
-
-.message-avatar {
-  width: 40px;
-  text-align: center;
-  line-height: 40px;
-  font-size: 20px;
-  margin-right: 10px;
-}
-
-.message.assistant .message-avatar {
-  margin-right: 0;
-  margin-left: 10px;
-}
-
-.message-content {
-  background-color: #f0f9eb;
-  border: 1px solid #e1f3d8;
-  border-radius: 4px;
-  padding: 10px 15px;
-  white-space: pre-wrap;
-  max-width: 800px;
-}
-
-.message.assistant .message-content {
-  background-color: #f3f4f6;
-  border: 1px solid #dce4eb;
-  max-width: 1000px;
-}
-
-.loading-indicator {
-  text-align: center;
-  color: #999;
-  font-size: 16px;
-}
-
-.chat-input {
-  width: 100%;
-}
-
-.el-input {
+.new-session-btn {
   width: 100%;
 }
 
 .session-card {
-  margin-bottom: 20px;
-  height: 20%;
-}
-.session-card2 {
-  margin-bottom: 20px;
-  height: 70%;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-.session-card ul {
-  list-style-type: none;
-  padding: 0;
+.history-card {
+  flex: 1;
+  overflow: hidden;
+  border-bottom: none;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 12px;
+}
+
+.current-session-item,
+.session-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.current-session-item:hover,
+.session-item:hover {
+  background: #f3f4f6;
+}
+
+.session-icon {
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.session-name {
+  font-size: 14px;
+  color: #374151;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-scrollbar {
+  height: 100%;
+}
+
+.session-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* 侧边栏切换 */
+.toggle-sidebar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  background: #ffffff;
+  border-right: 1px solid #e5e7eb;
+  cursor: pointer;
+  color: #6b7280;
+  transition: all 0.2s;
+}
+
+.toggle-sidebar:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+/* 聊天容器 */
+.chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+}
+
+.chat-messages-wrapper {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 欢迎区域 */
+.welcome-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 400px;
+}
+
+.welcome-icon {
+  font-size: 64px;
+  margin-bottom: 20px;
+}
+
+.welcome-section h2 {
+  font-size: 24px;
+  color: #1f2937;
+  margin: 0 0 8px;
+}
+
+.welcome-section p {
+  font-size: 14px;
+  color: #6b7280;
   margin: 0;
 }
 
-.session-card li {
-  cursor: pointer;
-  padding: 10px;
-  border-bottom: 1px solid #e1e1e1;
-}
-
-.session-card li:hover {
-  background-color: #f0f0f0;
-}
-
-.scroll-wrapper {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.code-controls {
-  position: absolute;
-  top: 5px;
-  right: 5px;
+/* 消息 */
+.message-item {
   display: flex;
-  gap: 10px;
+  gap: 12px;
+  width: 100%;
 }
 
-.copy-code-button {
-  background-color: dodgerblue;
+.message-item.user {
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ai-avatar {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
-  width: 30px;
-  height: 20px;
-  border: 0;
+  font-size: 20px;
+}
+
+.user-avatar {
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  color: white;
+  font-size: 20px;
+}
+
+.message-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 75%;
+}
+
+.message-item.user .message-wrapper {
+  align-items: flex-end;
+}
+
+.message-content {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.message-item.user .message-content {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.message-actions {
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.message-item:hover .message-actions {
+  opacity: 1;
+}
+
+/* Markdown 样式 */
+.message-content :deep(h1),
+.message-content :deep(h2),
+.message-content :deep(h3) {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.message-content :deep(p) {
+  margin: 8px 0;
+}
+
+.message-content :deep(pre) {
+  background: #1f2937;
+  border-radius: 8px;
+  padding: 16px;
+  overflow-x: auto;
+  margin: 12px 0;
+  position: relative;
+}
+
+.message-content :deep(code) {
+  font-family: 'Fira Code', monospace;
+  font-size: 14px;
+}
+
+.message-content :deep(pre code) {
+  color: #e5e7eb;
+  background: transparent;
+  padding: 0;
+}
+
+.message-content :deep(:not(pre) > code) {
+  background: #f3f4f6;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.message-item.user .message-content :deep(:not(pre) > code) {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.message-content :deep(ul),
+.message-content :deep(ol) {
+  padding-left: 20px;
+  margin: 8px 0;
+}
+
+.message-content :deep(li) {
+  margin: 4px 0;
+}
+
+.message-content :deep(img) {
+  max-width: 100%;
+  border-radius: 8px;
+  margin: 12px 0;
+}
+
+.message-content :deep(blockquote) {
+  border-left: 4px solid #667eea;
+  padding-left: 16px;
+  margin: 12px 0;
+  color: #6b7280;
+}
+
+.message-item.user .message-content :deep(blockquote) {
+  border-left-color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.message-content :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 12px 0;
+}
+
+.message-content :deep(th),
+.message-content :deep(td) {
+  border: 1px solid #e5e7eb;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.message-content :deep(th) {
+  background: #f9fafb;
+}
+
+/* 加载指示器 */
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0;
+}
+
+.typing-dots {
+  display: flex;
+  gap: 4px;
+}
+
+.typing-dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #667eea;
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-dots span:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.typing-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-6px);
+    opacity: 1;
+  }
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+/* 输入区域 */
+.input-section {
+  background: #ffffff;
+  border-top: 1px solid #e5e7eb;
+  padding: 16px 24px 24px;
+}
+
+.input-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.toolbar-left {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.model-select {
+  width: 240px;
+}
+
+.params-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toolbar-right {
+  display: flex;
+  gap: 8px;
+}
+
+/* 已选文件 */
+.selected-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.file-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.input-wrapper {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.message-input {
+  flex: 1;
+}
+
+.message-input :deep(.el-textarea__inner) {
+  border-radius: 12px;
+  padding: 12px 16px;
+  font-size: 14px;
+  resize: none;
+  transition: all 0.2s;
+}
+
+.message-input :deep(.el-textarea__inner:focus) {
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.send-btn-wrapper {
   display: flex;
   align-items: center;
 }
 
-.el-icon-copy {
-  margin-right: 5px;
+.send-btn {
+  width: 80px;
+  height: 48px;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+/* 模型参数面板 */
+.model-params-panel {
+  padding: 8px;
+}
+
+.params-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 16px;
+}
+
+.tip-icon {
+  color: #9ca3af;
+  cursor: help;
+}
+
+.param-item {
+  margin-bottom: 20px;
+}
+
+.param-item:last-child {
+  margin-bottom: 0;
+}
+
+.param-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.param-name {
+  font-size: 14px;
+  color: #374151;
+}
+
+.param-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #667eea;
+}
+
+/* 文件对话框 */
+.file-dialog :deep(.el-dialog__body) {
+  padding: 16px 24px;
+}
+
+.file-dialog-header {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.search-input {
+  flex: 1;
 }
 
-/* 对话框 */
 .file-list {
   max-height: 400px;
   overflow-y: auto;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  margin-bottom: 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px;
 }
-.file-icon {
-  margin-right: 5px;
-  color: #606266;
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
 }
-.file-time {
-  float: right;
-  color: #909399;
-  font-size: 12px;
+
+.file-item:hover {
+  background: #f9fafb;
 }
-.footer-bar {
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.file-type-icon {
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.file-name {
+  font-size: 14px;
+  color: #374151;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dialog-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .selected-count {
-  margin-right: 10px;
-}
-.el-icon-document {
-  color: #409eff;
+  font-size: 14px;
+  color: #6b7280;
 }
 
-.model-dropdown {
-  margin-top: 10px;
+.footer-buttons {
+  display: flex;
+  gap: 8px;
 }
 
-.dropdown-content {
-  width: 400px;
-  padding: 10px;
+/* 导出对话框 */
+.export-dialog :deep(.el-dialog__body) {
+  padding: 16px 24px;
 }
 
-.model-params {
-  margin-top: 10px;
-}
-.param-value {
-  margin-top: 5px;
-  text-align: right;
+.export-form {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
 }
 
-.param-item {
-  margin: 25px 0;
-}
-
-.param-label {
+.form-row {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
-  color: #606266;
+  gap: 8px;
 }
 
-.tip-icon {
-  margin-left: 8px;
-  color: #909399;
-  cursor: help;
+.form-label {
+  font-size: 14px;
+  color: #374151;
+  white-space: nowrap;
 }
 
-.param-value {
-  margin-top: 8px;
-  text-align: center;
-  font-weight: bold;
-  color: #409eff;
+.form-input {
+  width: 240px;
 }
 
-/* 自定义滑块样式 */
-:deep(.el-slider__runway) {
-  height: 6px;
+.form-select {
+  width: 200px;
 }
 
-:deep(.el-slider__button) {
-  width: 16px;
-  height: 16px;
+.vditor-container {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 滚动条 */
+.chat-messages::-webkit-scrollbar,
+.file-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.chat-messages::-webkit-scrollbar-track,
+.file-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb,
+.file-list::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 4px;
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover,
+.file-list::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
 }
 </style>