From d72c6a3f251c360a182af9a225f672ec6eaa17f6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Sun, 15 Mar 2026 21:43:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20Chat=20=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=92=8C=E8=81=8A=E5=A4=A9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 chat.css 聊天样式文件
- 优化 Chat.vue 页面交互
- 更新 chat.ts 聊天逻辑

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/views/Chat.vue      |  66 +++++++++++++++--
 web/src/views/chat/chat.css | 144 ++++++++++++++++++++++++++++++++++++
 web/src/views/chat/chat.ts  |  31 +++++++-
 3 files changed, 229 insertions(+), 12 deletions(-)

diff --git a/web/src/views/Chat.vue b/web/src/views/Chat.vue
index 040b354..de26d00 100644
--- a/web/src/views/Chat.vue
+++ b/web/src/views/Chat.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, nextTick, watch, onMounted, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus'
 import { useChat } from './chat/chat'
 import ChatHeader from '@/components/chat/ChatHeader.vue'
 import ChatMessage from '@/components/chat/ChatMessage.vue'
@@ -188,6 +189,18 @@ const handleSelectModel = (model: any) => {
   showModelDropdown.value = false
 }
 
+// 选择智能体并创建会话
+const selectAgentAndCreateSession = async (agent: any) => {
+  selectedAgent.value = agent
+  const session = await createSession()
+  if (session) {
+    messages.value = [
+      { id: Date.now(), role: 'assistant', content: `你好！我是 ${agent.name}，有什么我可以帮助你的吗？`, timestamp: new Date() }
+    ]
+    await saveMessage('assistant', messages.value[0].content)
+  }
+}
+
 // 删除会话
 const handleDeleteSession = async (session: any) => {
   try {
@@ -236,15 +249,16 @@ const generateSessionTitle = async () => {
 const sendMessage = async () => {
   if (!inputMessage.value.trim() || isLoading.value) return
 
+  // 如果没有会话，提示用户先选择智能体
+  if (!currentSessionId.value) {
+    ElMessage.warning('请先选择或创建一个会话')
+    return
+  }
+
   const userContent = inputMessage.value.trim()
   inputMessage.value = ''
   resetInputHeight()
 
-  if (!currentSessionId.value) {
-    const session = await createSession()
-    if (!session) return
-  }
-
   const userMessage = createUserMessage(userContent)
   messages.value.push(userMessage)
   await saveMessage('user', userContent)
@@ -287,6 +301,7 @@ onUnmounted(() => {
     <div class="flex-1 flex flex-col bg-[#09090b]">
       <!-- 顶部栏 -->
       <ChatHeader
+        v-if="currentSessionId"
         :selected-agent="selectedAgent"
         :chat-models="chatModels"
         :selected-model="selectedModel"
@@ -301,8 +316,42 @@ onUnmounted(() => {
 
       <!-- 消息区域 -->
       <div ref="messagesContainer" class="flex-1 overflow-y-auto py-4">
-        <!-- 空状态欢迎提示 -->
-        <div v-if="messages.length === 0" class="h-full flex items-center justify-center">
+        <!-- 无会话时显示引导界面 -->
+        <div v-if="!currentSessionId" class="h-full flex items-center justify-center empty-chat">
+          <div class="text-center" style="position: relative; z-index: 1;">
+            <div class="empty-logo">🧠</div>
+            <h2 class="empty-title">欢迎使用 X-Agents</h2>
+            <p class="empty-desc">与智能 AI 助手对话，获取专业解答与创意灵感</p>
+            <button @click="newChat" class="empty-btn">
+              <i class="fa-solid fa-plus mr-2"></i>
+              开始新对话
+            </button>
+
+            <!-- 推荐智能体 -->
+            <div v-if="chatAgents.length > 0" class="recommend-section">
+              <div class="recommend-title">或选择一个智能体</div>
+              <div class="recommend-cards">
+                <div
+                  v-for="agent in chatAgents.slice(0, 4)"
+                  :key="agent.id"
+                  class="recommend-card"
+                  @click="selectAgentAndCreateSession(agent)"
+                >
+                  <div
+                    class="recommend-avatar"
+                    :style="{ backgroundColor: agent.accentColor + '20', color: agent.accentColor }"
+                  >
+                    {{ agent.avatar }}
+                  </div>
+                  <div class="recommend-name">{{ agent.name }}</div>
+                  <div class="recommend-desc">{{ agent.description || 'AI 助手' }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 有会话但无消息时显示欢迎提示 -->
+        <div v-else-if="messages.length === 0" class="h-full flex items-center justify-center">
           <div class="text-center">
             <div class="text-5xl mb-4">{{ selectedAgent?.avatar || '🧠' }}</div>
             <h2 class="text-xl font-semibold text-white mb-2">和 {{ selectedAgent?.name || 'AI' }} 开始对话</h2>
@@ -320,8 +369,9 @@ onUnmounted(() => {
         </div>
       </div>
 
-      <!-- 输入区域 -->
+      <!-- 输入区域 - 仅在有会话时显示 -->
       <ChatInput
+        v-if="currentSessionId"
         v-model="inputMessage"
         :loading="isLoading"
         @send="sendMessage"
diff --git a/web/src/views/chat/chat.css b/web/src/views/chat/chat.css
index 768d38e..4f1e83a 100644
--- a/web/src/views/chat/chat.css
+++ b/web/src/views/chat/chat.css
@@ -49,3 +49,147 @@
 .agent-glow {
   animation: pulse-glow 2s ease-in-out infinite;
 }
+
+/* 空会话页面样式 */
+.empty-chat {
+  position: relative;
+  overflow: hidden;
+}
+
+.empty-chat::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle at 30% 30%, rgba(249, 115, 22, 0.08) 0%, transparent 50%),
+              radial-gradient(circle at 70% 70%, rgba(239, 68, 68, 0.06) 0%, transparent 50%);
+  animation: bgFloat 20s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes bgFloat {
+  0%, 100% { transform: translate(0, 0) rotate(0deg); }
+  50% { transform: translate(-2%, -2%) rotate(1deg); }
+}
+
+.empty-logo {
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 24px;
+  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.1));
+  border-radius: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+  animation: logoFloat 3s ease-in-out infinite;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
+              inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+@keyframes logoFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+.empty-title {
+  font-size: 28px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 12px;
+}
+
+.empty-desc {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 15px;
+  margin-bottom: 32px;
+  max-width: 360px;
+}
+
+.empty-btn {
+  padding: 14px 32px;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
+}
+
+.empty-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 32px rgba(249, 115, 22, 0.4);
+}
+
+.empty-btn:active {
+  transform: translateY(0);
+}
+
+/* 推荐智能体卡片 */
+.recommend-section {
+  margin-top: 48px;
+}
+
+.recommend-title {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.4);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  margin-bottom: 16px;
+}
+
+.recommend-cards {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.recommend-card {
+  width: 160px;
+  padding: 20px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.recommend-card:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(249, 115, 22, 0.3);
+  transform: translateY(-4px);
+}
+
+.recommend-avatar {
+  width: 52px;
+  height: 52px;
+  margin: 0 auto 12px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px;
+}
+
+.recommend-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  margin-bottom: 4px;
+}
+
+.recommend-desc {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 1.4;
+}
diff --git a/web/src/views/chat/chat.ts b/web/src/views/chat/chat.ts
index a71656d..0e45602 100644
--- a/web/src/views/chat/chat.ts
+++ b/web/src/views/chat/chat.ts
@@ -309,7 +309,7 @@ export function useChat() {
         timestamp: new Date()
       })
 
-      currentSessionId.value = session.id
+      saveSessionId(session.id)
       return session
     } catch {
       return null
@@ -508,18 +508,38 @@ export function useChat() {
   }
 
   // 选择历史对话
+  // 保存会话 ID 到 localStorage
+  const saveSessionId = (sessionId: string) => {
+    localStorage.setItem('current_session_id', sessionId)
+    currentSessionId.value = sessionId
+  }
+
+  // 从 localStorage 恢复会话
+  const restoreSession = async () => {
+    const savedSessionId = localStorage.getItem('current_session_id')
+    if (!savedSessionId) return
+
+    const session = chatSessions.value.find(s => s.id === savedSessionId)
+    if (session) {
+      await selectSession(session)
+    }
+  }
+
   const selectSession = async (session: ChatSession) => {
     const agent = chatAgents.value.find(a => a.id === session.agent_id)
     if (agent) {
       selectedAgent.value = agent
     }
 
-    currentSessionId.value = session.id
+    saveSessionId(session.id)
     await fetchSessionMessages(session.id)
   }
 
   // 新建聊天 - 先打开智能体选择器
   const newChat = () => {
+    // 清除当前会话 ID（新建会话时会重新设置）
+    currentSessionId.value = null
+    localStorage.removeItem('current_session_id')
     // 打开智能体选择器，让用户选择智能体
     openAgentSelector('single')
   }
@@ -561,12 +581,15 @@ export function useChat() {
   }
 
   // 初始化
-  const init = () => {
+  const init = async () => {
     fetchModels()
     fetchAgents()
-    fetchSessions()
+    await fetchSessions()
     fetchGroups()
     document.addEventListener('click', handleClickOutside)
+
+    // 恢复之前选中的会话
+    await restoreSession()
   }
 
   // 清理