feat: 优化 Chat 页面和聊天样式

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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"