update 优化 !pr850 相关代码用法与问题

src/api/ai/agent/index.ts

@@ -1,7 +1,15 @@
 import type { AxiosPromise } from '@/utils/api-types';
-import request from '@/utils/request';
+import request, { globalHeaders } from '@/utils/request';
-import { getToken } from '@/utils/auth';
+import { getLanguage } from '@/lang';
-import type { AgentChatRequest, AgentItem, ConversationMessage, ConversationSummaryList, SnailOpenApiUser } from './types';
+import type {
+  AgentChatRequest,
+  AgentChatSyncResponse,
+  AgentItem,
+  ConversationMessage,
+  ConversationSummaryItem,
+  ConversationSummaryList,
+  SnailOpenApiUser
+} from './types';
 
 export const fetchMyAgents = (): AxiosPromise<AgentItem[]> => {
   return request({
@@ -35,7 +43,7 @@ export const fetchConversationMessages = (agentId: number, conversationId: strin
   });
 };
 
-export const createConversation = (agentId: number, data: { title?: string }): AxiosPromise<{ conversationId: string; title?: string }> => {
+export const createConversation = (agentId: number, data: { title?: string }): AxiosPromise<ConversationSummaryItem> => {
   return request({
     url: `/snail-ai/agent/${agentId}/conversation`,
     method: 'post',
@@ -43,6 +51,13 @@ export const createConversation = (agentId: number, data: { title?: string }): A
   });
 };
 
+export const deleteConversation = (agentId: number, conversationId: string): AxiosPromise<void> => {
+  return request({
+    url: `/snail-ai/agent/${agentId}/conversation/${conversationId}`,
+    method: 'delete'
+  });
+};
+
 export const registerCurrentSnailUser = (): AxiosPromise<SnailOpenApiUser> => {
   return request({
     url: '/snail-ai/user/register',
@@ -57,7 +72,7 @@ export const fetchChatMode = (): AxiosPromise<{ mode?: 'stream' | 'sync' }> => {
   });
 };
 
-export const fetchAgentChat = (
+export const fetchAgentChat = async (
   agentId: number,
   data: AgentChatRequest,
   options: {
@@ -67,25 +82,24 @@ export const fetchAgentChat = (
     onError: (error: Error) => void;
     signal?: AbortSignal;
   }
-) => {
+): Promise<void> => {
   const baseURL = import.meta.env.VITE_APP_BASE_API;
-  const token = getToken();
-  const query = new URLSearchParams({ content: data.content });
-  if (data.conversationId) {
-    query.set('conversationId', data.conversationId);
-  }
 
-  fetch(`${baseURL}/snail-ai/agent/${agentId}/chat/stream?${query.toString()}`, {
+  await fetch(`${baseURL}/snail-ai/agent/${agentId}/chat/stream`, {
-    method: 'GET',
+    method: 'POST',
     headers: {
-      Authorization: token ? `Bearer ${token}` : '',
+      ...globalHeaders(),
-      clientid: import.meta.env.VITE_APP_CLIENT_ID
+      'Content-Language': getLanguage(),
+      Accept: 'text/event-stream',
+      'Content-Type': 'application/json;charset=utf-8'
     },
+    body: JSON.stringify(data),
     signal: options.signal
   })
     .then(async response => {
       if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
+        const text = await response.text();
+        throw new Error(text || `HTTP ${response.status}`);
       }
 
       const reader = response.body?.getReader();
@@ -100,21 +114,21 @@ export const fetchAgentChat = (
         if (done) break;
 
         buffer += decoder.decode(value, { stream: true });
-        const eventBlocks = buffer.split('\n\n');
+        const eventBlocks = buffer.split(/\r?\n\r?\n/);
         buffer = eventBlocks.pop() || '';
 
         for (const block of eventBlocks) {
           if (!block.trim()) continue;
           let eventName = 'message';
           let payload = '';
-          for (const line of block.split('\n')) {
+          for (const line of block.split(/\r?\n/)) {
             if (line.startsWith('event:')) {
               eventName = line.slice(6).trim();
             } else if (line.startsWith('data:')) {
               payload += line.slice(5).trim();
             }
           }
-          if (!payload) continue;
+          if (!payload && eventName !== 'done') continue;
           if (eventName === 'thinking') {
             options.onThinking?.(payload);
           } else if (eventName === 'text') {
@@ -139,7 +153,7 @@ export const fetchAgentChat = (
     });
 };
 
-export const fetchAgentChatSync = (agentId: number, data: AgentChatRequest): AxiosPromise<any> => {
+export const fetchAgentChatSync = (agentId: number, data: AgentChatRequest): AxiosPromise<AgentChatSyncResponse> => {
   return request({
     url: `/snail-ai/agent/${agentId}/chat/sync`,
     method: 'post',

src/api/ai/agent/types.ts

@@ -1,26 +1,25 @@
+import type { PageResult } from '@/api/types';
+
 export interface AgentItem {
   id: number;
   name: string;
   description?: string;
   avatar?: string;
   greeting?: string;
+  status?: number;
   presetQuestions?: string[];
-  webSearchEnabled?: boolean;
 }
 
 export interface ConversationSummaryItem {
   conversationId: string;
+  agentId?: number;
   title: string;
   lastMessageDt?: string;
   createDt?: string;
+  updateDt?: string;
 }
 
-export interface ConversationSummaryList {
+export type ConversationSummaryList = PageResult<ConversationSummaryItem>;
-  data: ConversationSummaryItem[];
-  page?: number;
-  size?: number;
-  total?: number;
-}
 
 export interface ConversationMessage {
   role?: string;
@@ -33,8 +32,13 @@ export interface AgentChatRequest {
   content: string;
   disabledMcpServerIds?: number[];
   disabledSkillIds?: number[];
-  deepPlanEnabled?: boolean;
+}
-  webSearchEnabled?: boolean;
+
+export interface AgentChatSyncResponse {
+  conversationId?: string;
+  content?: string;
+  traceId?: string;
+  durationMs?: number;
 }
 
 export interface SnailOpenApiUser {

src/views/ai/chat/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { fetchAgentConversations, fetchMyAgents, registerCurrentSnailUser } from '@/api/ai/agent';
+import { deleteConversation, fetchAgentConversations, fetchMyAgents, registerCurrentSnailUser } from '@/api/ai/agent';
 import type { AgentItem, ConversationSummaryItem } from '@/api/ai/agent/types';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import ChatMain from './modules/chat-main.vue';
 import ChatSidebar from './modules/chat-sidebar.vue';
 
@@ -12,6 +13,29 @@ const conversations = ref<ConversationSummaryItem[]>([]);
 const currentAgent = ref<AgentItem | null>(null);
 const currentConversationId = ref('');
 const currentNickname = ref('');
+const loading = ref(false);
+
+function normalizeAgentList(payload: any): AgentItem[] {
+  const container = payload?.data ?? payload;
+  const source =
+    (Array.isArray(container) && container) ||
+    (Array.isArray(container?.rows) && container.rows) ||
+    (Array.isArray(container?.list) && container.list) ||
+    (Array.isArray(container?.records) && container.records) ||
+    [];
+
+  return source
+    .map((item: any) => ({
+      id: Number(item?.id ?? item?.agentId),
+      name: String(item?.name ?? item?.title ?? ''),
+      description: item?.description,
+      avatar: item?.avatar,
+      greeting: item?.greeting,
+      status: item?.status,
+      presetQuestions: Array.isArray(item?.presetQuestions) ? item.presetQuestions : []
+    }))
+    .filter((item: AgentItem) => Number.isFinite(item.id) && !!item.name);
+}
 
 function normalizeConversationList(payload: any): ConversationSummaryItem[] {
   const container = payload?.data ?? payload;
@@ -29,11 +53,12 @@ function normalizeConversationList(payload: any): ConversationSummaryItem[] {
     .map((item: any) => ({
       conversationId: String(item?.conversationId ?? item?.id ?? ''),
       title: String(item?.title ?? item?.name ?? ''),
-      lastMessageDt: item?.lastMessageDt ?? item?.updateTime ?? item?.updateDt,
+      lastMessageDt: item?.lastMessageDt ?? item?.updateDt ?? item?.updateTime,
-      createDt: item?.createDt ?? item?.createTime
+      createDt: item?.createDt ?? item?.createTime,
+      updateDt: item?.updateDt
     }))
     .filter((item: ConversationSummaryItem) => !!item.conversationId)
-    .sort((a: ConversationSummaryItem, b: ConversationSummaryItem) => {
+    .toSorted((a: ConversationSummaryItem, b: ConversationSummaryItem) => {
       const ta = new Date(a.lastMessageDt || a.createDt || 0).getTime();
       const tb = new Date(b.lastMessageDt || b.createDt || 0).getTime();
       return tb - ta;
@@ -41,11 +66,16 @@ function normalizeConversationList(payload: any): ConversationSummaryItem[] {
 }
 
 async function loadAgents() {
-  const { data: user } = await registerCurrentSnailUser();
+  loading.value = true;
-  currentNickname.value = user?.nickname || '';
+  try {
-  const { data } = await fetchMyAgents();
+    const { data: user } = await registerCurrentSnailUser();
-  agents.value = Array.isArray(data) ? data : [];
+    currentNickname.value = user?.nickname || '';
-  currentAgent.value = agents.value[0] || null;
+    const { data } = await fetchMyAgents();
+    agents.value = normalizeAgentList(data);
+    currentAgent.value = agents.value.find(item => item.id === currentAgent.value?.id) || agents.value[0] || null;
+  } finally {
+    loading.value = false;
+  }
 }
 
 async function loadConversations(agentId: number) {
@@ -63,6 +93,25 @@ async function onSelectAgent(agent: AgentItem) {
   await loadConversations(agent.id);
 }
 
+async function onDeleteConversation(conversationId: string) {
+  if (!currentAgent.value) return;
+  try {
+    await ElMessageBox.confirm('确认删除该会话记录？', '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+  } catch {
+    return;
+  }
+  await deleteConversation(currentAgent.value.id, conversationId);
+  if (currentConversationId.value === conversationId) {
+    currentConversationId.value = '';
+  }
+  await loadConversations(currentAgent.value.id);
+  ElMessage.success('删除成功');
+}
+
 onMounted(() => {
   loadAgents().then(async () => {
     if (currentAgent.value) {
@@ -82,6 +131,7 @@ onMounted(() => {
     </header>
     <div class="chat-body">
       <ChatSidebar
+        v-loading="loading"
         :agents="agents"
         :conversations="conversations"
         :current-agent="currentAgent"
@@ -89,6 +139,7 @@ onMounted(() => {
         :current-nickname="currentNickname"
         @select-agent="onSelectAgent"
         @select-conversation="currentConversationId = $event"
+        @delete-conversation="onDeleteConversation"
         @new-chat="currentConversationId = ''"
       />
       <ChatMain
@@ -106,15 +157,15 @@ onMounted(() => {
   flex-direction: column;
   height: calc(100vh - 84px);
   min-height: 0;
-  background: #f5f6f8;
+  background: var(--el-bg-color-page);
   overflow: hidden;
 }
 
 .chat-header {
   height: 46px;
   padding: 0 14px;
-  border-bottom: 1px solid #e6e8ee;
+  border-bottom: 1px solid var(--app-surface-border);
-  background: #fff;
+  background: var(--app-surface-bg);
   display: flex;
   align-items: center;
 }
@@ -123,7 +174,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #8b90a0;
+  color: var(--app-text-title);
   font-size: 18px;
   font-weight: 600;
 }
@@ -132,7 +183,7 @@ onMounted(() => {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #6f76ff;
+  background: var(--el-color-primary);
 }
 
 .chat-body {
@@ -141,4 +192,14 @@ onMounted(() => {
   overflow: hidden;
   min-height: 0;
 }
+
+@media (max-width: 768px) {
+  .ai-chat-page {
+    height: calc(100vh - 64px);
+  }
+
+  .chat-body {
+    flex-direction: column;
+  }
+}
 </style>

src/views/ai/chat/modules/chat-input.vue

@@ -29,7 +29,7 @@ function submit() {
           placeholder="给智能体发消息"
           @keydown.enter.exact.prevent="submit"
         />
-        <el-button type="primary" circle :disabled="sending" @click="submit">
+        <el-button type="primary" circle :loading="sending" :disabled="sending" @click="submit">
           <el-icon><Promotion /></el-icon>
         </el-button>
       </div>
@@ -45,10 +45,11 @@ function submit() {
 .chat-input-box {
   max-width: 920px;
   margin: 0 auto;
-  border-radius: 16px;
+  border-radius: 8px;
-  border: 1px solid #dde2eb;
+  border: 1px solid var(--app-surface-border);
-  background: #fff;
+  background: var(--app-surface-bg);
   padding: 12px;
+  box-shadow: var(--app-shadow-sm);
 }
 
 .input-row {

src/views/ai/chat/modules/chat-main.vue

@@ -1,18 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { createConversation, fetchAgentChat, fetchAgentChatSync, fetchChatMode, fetchConversationMessages } from '@/api/ai/agent';
+import type { AgentItem } from '@/api/ai/agent/types';
 import { ElMessage } from 'element-plus';
 import ChatInput from './chat-input.vue';
 
-interface AgentItem {
-  id: number;
-  name: string;
-  description?: string;
-  greeting?: string;
-  presetQuestions?: string[];
-  webSearchEnabled?: boolean;
-}
-
 const props = defineProps<{
   agent: AgentItem | null;
   conversationId: string;
@@ -29,7 +21,9 @@ interface ChatMessage {
 const messages = ref<ChatMessage[]>([]);
 const sending = ref(false);
 const sendMode = ref<'stream' | 'sync'>('stream');
+const streamTimeout = 300000;
 let sendingTimer: ReturnType<typeof setTimeout> | null = null;
+let activeController: AbortController | null = null;
 
 const showWelcome = computed(() => !!props.agent && !props.conversationId && !messages.value.length);
 const displayQuestions = computed(() => {
@@ -154,31 +148,47 @@ async function loadMessages() {
   messages.value = normalizeMessageList(data);
 }
 
+function clearSendingTimer() {
+  if (sendingTimer) {
+    clearTimeout(sendingTimer);
+    sendingTimer = null;
+  }
+}
+
+function finishSending() {
+  sending.value = false;
+  clearSendingTimer();
+  activeController = null;
+}
+
 async function onSend(content: string) {
   if (!props.agent || !content.trim() || sending.value) return;
   sending.value = true;
-  if (sendingTimer) clearTimeout(sendingTimer);
+  clearSendingTimer();
   sendingTimer = setTimeout(() => {
     if (sending.value) {
-      sending.value = false;
+      activeController?.abort();
+      finishSending();
       ElMessage.warning('响应超时，已恢复发送按钮，请重试');
     }
-  }, 60000);
+  }, streamTimeout);
   let targetConversationId = props.conversationId;
   if (!targetConversationId) {
     messages.value = [];
-    const { data } = await createConversation(props.agent.id, { title: content.slice(0, 20) });
+    try {
-    if (!data?.conversationId) {
+      const { data } = await createConversation(props.agent.id, { title: content.slice(0, 20) });
-      sending.value = false;
+      if (!data?.conversationId) {
-      if (sendingTimer) {
+        finishSending();
-        clearTimeout(sendingTimer);
+        ElMessage.error('创建会话失败，请稍后重试');
-        sendingTimer = null;
+        return;
       }
-      ElMessage.error('创建会话失败，请稍后重试');
+      targetConversationId = data.conversationId;
+      emit('conversationCreated', targetConversationId);
+    } catch (error: any) {
+      finishSending();
+      ElMessage.error(error?.message || '创建会话失败，请稍后重试');
       return;
     }
-    targetConversationId = data.conversationId;
-    emit('conversationCreated', targetConversationId);
   }
 
   messages.value.push({ role: 'user', content });
@@ -186,60 +196,49 @@ async function onSend(content: string) {
     try {
       const { data } = await fetchAgentChatSync(props.agent.id, {
         conversationId: targetConversationId,
-        content,
+        content
-        webSearchEnabled: props.agent.webSearchEnabled
       });
       const reply = extractSyncReply(data) || '（后端已返回空消息）';
       messages.value.push({ role: 'assistant', content: reply });
     } catch (error: any) {
       ElMessage.error(error?.message || '对话失败，请稍后重试');
     } finally {
-      sending.value = false;
+      finishSending();
-      if (sendingTimer) {
-        clearTimeout(sendingTimer);
-        sendingTimer = null;
-      }
     }
     return;
   }
 
   messages.value.push({ role: 'assistant', content: '' });
   const assistantIndex = messages.value.length - 1;
-  fetchAgentChat(
+  activeController?.abort();
-      props.agent.id,
+  activeController = new AbortController();
-      {
+  void fetchAgentChat(
-        conversationId: targetConversationId,
+    props.agent.id,
-        content,
+    {
-        webSearchEnabled: props.agent.webSearchEnabled
+      conversationId: targetConversationId,
+      content
+    },
+    {
+      signal: activeController.signal,
+      onMessage(chunk) {
+        const msg = messages.value[assistantIndex];
+        if (msg) msg.content += normalizeStreamChunk(chunk);
       },
-      {
+      onThinking() {},
-        onMessage(chunk) {
+      onDone() {
-          const msg = messages.value[assistantIndex];
+        const msg = messages.value[assistantIndex];
-          if (msg) msg.content += normalizeStreamChunk(chunk);
+        if (msg && !msg.content.trim()) {
-        },
+          msg.content = '（后端已返回空消息）';
-        onThinking() {},
-        onDone() {
-          const msg = messages.value[assistantIndex];
-          if (msg && !msg.content.trim()) {
-            msg.content = '（后端已返回空消息）';
-          }
-          sending.value = false;
-          if (sendingTimer) {
-            clearTimeout(sendingTimer);
-            sendingTimer = null;
-          }
-        },
-        onError(error) {
-          messages.value.splice(assistantIndex, 1);
-          sending.value = false;
-          if (sendingTimer) {
-            clearTimeout(sendingTimer);
-            sendingTimer = null;
-          }
-          ElMessage.error(error.message || '对话失败，请稍后重试');
         }
+        finishSending();
+      },
+      onError(error) {
+        messages.value.splice(assistantIndex, 1);
+        finishSending();
+        ElMessage.error(error.message || '对话失败，请稍后重试');
       }
-    );
+    }
+  );
 }
 
 watch(
@@ -248,11 +247,8 @@ watch(
     if (sending.value && convId) {
       return;
     }
-    sending.value = false;
+    activeController?.abort();
-    if (sendingTimer) {
+    finishSending();
-      clearTimeout(sendingTimer);
-      sendingTimer = null;
-    }
     if (agentId && convId) {
       await loadMessages();
     } else if (agentId && !convId) {
@@ -263,6 +259,11 @@ watch(
 );
 
 loadSendMode();
+
+onBeforeUnmount(() => {
+  activeController?.abort();
+  clearSendingTimer();
+});
 </script>
 
 <template>
@@ -273,28 +274,23 @@ loadSendMode();
         <div class="chat-content">
           <div v-if="showWelcome" class="welcome-card">
             <div class="card-head">
-              <span class="avatar-dot" />
+              <el-avatar class="agent-avatar" :size="36" :src="agent.avatar">{{ agent.name.slice(0, 1) }}</el-avatar>
               <div class="title-block">
                 <div class="agent-name">{{ agent.name }}</div>
-              <div class="agent-desc">{{ agent.description || '暂无描述' }}</div>
+                <div class="agent-desc">{{ agent.description || '暂无描述' }}</div>
+              </div>
             </div>
-          </div>
             <div class="greeting">{{ agent.greeting || '你好，我是你的智能助手。' }}</div>
             <div v-if="displayQuestions.length" class="question-title">推荐问题</div>
             <div v-if="displayQuestions.length" class="question-list">
-              <button
+              <button v-for="q in displayQuestions" :key="q" class="question-pill" @click="onSend(q)">
-                v-for="q in displayQuestions"
-                :key="q"
-                class="question-pill"
-                @click="onSend(q)"
-              >
                 {{ q }}
               </button>
             </div>
           </div>
 
           <div v-for="(msg, idx) in messages" :key="idx" class="msg-row" :class="{ user: msg.role === 'user' }">
-            <div class="msg-bubble">{{ msg.content }}</div>
+            <div class="msg-bubble" :class="{ pending: msg.role === 'assistant' && !msg.content }">{{ msg.content || '正在生成...' }}</div>
           </div>
         </div>
       </el-scrollbar>
@@ -318,7 +314,7 @@ loadSendMode();
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #98a0af;
+  color: var(--app-text-muted);
 }
 
 .chat-scroll {
@@ -334,11 +330,12 @@ loadSendMode();
 }
 
 .welcome-card {
-  background: #fff;
+  background: var(--app-surface-bg);
-  border: 1px solid #e4e8f0;
+  border: 1px solid var(--app-surface-border);
-  border-radius: 14px;
+  border-radius: 8px;
   padding: 16px;
   margin-bottom: 14px;
+  box-shadow: var(--app-shadow-sm);
 }
 
 .card-head {
@@ -346,36 +343,33 @@ loadSendMode();
   gap: 10px;
 }
 
-.avatar-dot {
+.agent-avatar {
-  margin-top: 2px;
+  flex-shrink: 0;
-  width: 14px;
+  background: var(--el-color-primary);
-  height: 14px;
-  border-radius: 50%;
-  background: #3f434b;
 }
 
 .agent-name {
   font-size: 20px;
   font-weight: 700;
-  color: #1f2430;
+  color: var(--app-text-title);
 }
 
 .agent-desc {
   margin-top: 4px;
-  color: #6f7687;
+  color: var(--app-text-muted);
   line-height: 1.6;
 }
 
 .greeting {
   margin-top: 12px;
-  color: #2b3240;
+  color: var(--app-text-title);
 }
 
 .question-title {
   margin-top: 14px;
   padding-top: 10px;
-  border-top: 1px solid #edf0f5;
+  border-top: 1px solid var(--app-surface-border);
-  color: #6f7687;
+  color: var(--app-text-muted);
   font-size: 13px;
 }
 
@@ -387,14 +381,19 @@ loadSendMode();
 }
 
 .question-pill {
-  border: 1px solid #e0e5ef;
+  border: 1px solid var(--app-surface-border);
-  background: #fff;
+  background: var(--app-surface-bg);
-  color: #3a4252;
+  color: var(--app-text-title);
-  border-radius: 999px;
+  border-radius: 8px;
   padding: 6px 12px;
   cursor: pointer;
 }
 
+.question-pill:hover {
+  border-color: var(--el-color-primary);
+  color: var(--el-color-primary);
+}
+
 .msg-row {
   display: flex;
   margin-bottom: 12px;
@@ -408,15 +407,31 @@ loadSendMode();
   max-width: 80%;
   white-space: pre-wrap;
   line-height: 1.7;
-  background: #fff;
+  background: var(--app-surface-bg);
-  border: 1px solid #e4e8f0;
+  border: 1px solid var(--app-surface-border);
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 10px 12px;
+  color: var(--app-text-title);
+  box-shadow: var(--app-shadow-sm);
 }
 
 .msg-row.user .msg-bubble {
-  background: #e9ecff;
+  background: var(--el-color-primary-light-9);
-  border-color: #d7dcff;
+  border-color: var(--el-color-primary-light-7);
-  color: #4552d9;
+  color: var(--el-color-primary);
+}
+
+.msg-bubble.pending {
+  color: var(--app-text-muted);
+}
+
+@media (max-width: 768px) {
+  .chat-scroll {
+    padding: 12px 12px 0;
+  }
+
+  .msg-bubble {
+    max-width: 92%;
+  }
 }
 </style>

src/views/ai/chat/modules/chat-sidebar.vue

@@ -16,6 +16,7 @@ interface ConversationItem {
 const emit = defineEmits<{
   selectAgent: [agent: AgentItem];
   selectConversation: [conversationId: string];
+  deleteConversation: [conversationId: string];
   newChat: [];
 }>();
 
@@ -34,12 +35,16 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 <template>
   <aside class="chat-sidebar">
     <div class="sidebar-block sidebar-head">
-      <el-button class="new-btn" :disabled="!currentAgent" @click="emit('newChat')">+ 新对话</el-button>
+      <el-button class="new-btn" type="primary" plain :disabled="!currentAgent" @click="emit('newChat')">
+        <el-icon><Plus /></el-icon>
+        <span>新对话</span>
+      </el-button>
     </div>
 
     <el-scrollbar class="sidebar-scroll">
       <div class="sidebar-block">
         <div class="block-title">我的智能体</div>
+        <el-empty v-if="!agents.length" :image-size="54" description="暂无智能体" />
         <div
           v-for="agent in agents"
           :key="agent.id"
@@ -54,6 +59,7 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 
       <div class="sidebar-block">
         <div class="block-title">对话记录</div>
+        <el-empty v-if="!conversations.length" :image-size="54" description="暂无会话" />
         <div
           v-for="conv in conversations"
           :key="conv.conversationId"
@@ -61,13 +67,16 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
           :class="{ active: currentConversationId === conv.conversationId }"
           @click="emit('selectConversation', conv.conversationId)"
         >
-          {{ conv.title || '未命名会话' }}
+          <span class="conv-title">{{ conv.title || '未命名会话' }}</span>
+          <el-button class="delete-btn" link type="danger" circle @click.stop="emit('deleteConversation', conv.conversationId)">
+            <el-icon><Delete /></el-icon>
+          </el-button>
         </div>
       </div>
     </el-scrollbar>
 
     <div class="sidebar-foot">
-        <div class="user-avatar">{{ avatarText }}</div>
+      <div class="user-avatar">{{ avatarText }}</div>
       <div>
         <div class="user-name">{{ displayNickname }}</div>
         <div class="user-status">已登录</div>
@@ -79,10 +88,11 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 <style scoped lang="scss">
 .chat-sidebar {
   width: 234px;
-  border-right: 1px solid #e5e8ef;
+  border-right: 1px solid var(--app-surface-border);
-  background: #f8f9fc;
+  background: var(--app-elevated-soft-bg);
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 .sidebar-head {
@@ -103,16 +113,10 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 
 .block-title {
   margin-bottom: 10px;
-  color: #8a8fa2;
+  color: var(--app-text-muted);
   font-size: 12px;
 }
 
-.sub-title {
-  margin-bottom: 6px;
-  color: #9399aa;
-  font-size: 13px;
-}
-
 .agent-item,
 .conv-item {
   height: 36px;
@@ -121,51 +125,73 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #2a2e38;
+  color: var(--app-text-title);
   cursor: pointer;
 }
 
 .agent-item:hover,
 .conv-item:hover {
-  background: #eef1f6;
+  background: var(--el-fill-color-light);
 }
 
 .agent-item.active,
 .conv-item.active {
-  background: #e9ecff;
+  background: var(--el-color-primary-light-9);
-  color: #4d57ea;
+  color: var(--el-color-primary);
 }
 
 .avatar-dot {
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: #3f434b;
+  background: var(--el-color-primary);
 }
 
 .name {
   font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .conv-item {
   font-size: 13px;
 }
 
+.conv-title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.delete-btn {
+  width: 24px;
+  height: 24px;
+  visibility: hidden;
+}
+
+.conv-item:hover .delete-btn,
+.conv-item.active .delete-btn {
+  visibility: visible;
+}
+
 .sidebar-foot {
-  border-top: 1px solid #e5e8ef;
+  border-top: 1px solid var(--app-surface-border);
   padding: 10px 12px;
   display: flex;
   align-items: center;
   gap: 10px;
-  background: #fff;
+  background: var(--app-surface-bg);
 }
 
 .user-avatar {
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  background: #1dbf73;
+  background: var(--el-color-success);
-  color: #fff;
+  color: var(--el-color-white);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -175,10 +201,28 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
 .user-name {
   font-size: 14px;
   font-weight: 600;
+  color: var(--app-text-title);
 }
 
 .user-status {
-  color: #8f95a3;
+  color: var(--app-text-muted);
   font-size: 12px;
 }
+
+:deep(.el-empty) {
+  --el-empty-padding: 8px 0 12px;
+}
+
+@media (max-width: 768px) {
+  .chat-sidebar {
+    width: 100%;
+    height: 224px;
+    border-right: 0;
+    border-bottom: 1px solid var(--app-surface-border);
+  }
+
+  .sidebar-foot {
+    display: none;
+  }
+}
 </style>