From 5bd74a46282a09a27be371bd158b9310320ef1f1 Mon Sep 17 00:00:00 2001
From: shenaowei <450702724@qq.com>
Date: Mon, 23 Feb 2026 20:36:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/agents/ChatDrawer.vue      | 1245 ++++++++---------
 .../app/web-gold/src/views/agents/Agents.vue  |  987 +++++++------
 .../system/task-management/mix-task/index.vue |   15 +-
 3 files changed, 1139 insertions(+), 1108 deletions(-)

diff --git a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
index 555e972fef..3811e7f458 100644
--- a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
+++ b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
@@ -1,27 +1,21 @@
 <template>
   <teleport to="body">
     <transition name="drawer-fade">
-      <div v-if="visible" class="chat-overlay" @click="handleOverlayClick">
+      <div v-if="visible" class="chat-overlay" @click.self="handleOverlayClick">
         <div class="chat-drawer" :class="{ 'chat-drawer--visible': visible }" @click.stop>
-          <!-- Background Gradient Mesh -->
-          <div class="drawer-bg-gradient"></div>
+          <!-- Background Effect -->
+          <div class="drawer-bg-pattern"></div>
 
           <!-- Header -->
           <header class="drawer-header">
-            <div class="header-content">
-              <div class="avatar-ring">
-                <div class="agent-avatar-small">
-                  <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
-                  <RobotOutlined v-else class="avatar-icon" />
-                </div>
-                <div class="status-dot"></div>
+            <div class="header-left">
+              <div class="agent-avatar">
+                <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
+                <RobotOutlined v-else class="avatar-fallback" />
               </div>
-              <div class="header-info">
-                <h3 class="header-title">{{ agent?.name || '智能助手' }}</h3>
-                <div class="header-badges">
-                  <span class="badge-pill">{{ agent?.categoryName || '通用' }}</span>
-                  <span class="badge-pill badge-pro" v-if="modelMode === 'pro'">Pro Mode</span>
-                </div>
+              <div class="agent-info">
+                <h3 class="agent-name">{{ agent?.name || 'AI 助手' }}</h3>
+                <span class="agent-category">{{ agent?.categoryName || '通用' }}</span>
               </div>
             </div>
             <button class="close-btn" @click="handleClose">
@@ -29,129 +23,120 @@
             </button>
           </header>
 
-          <!-- Messages Area -->
-          <div class="drawer-messages" ref="messagesRef">
-            <transition name="fade-up">
-              <div v-if="messages.length === 0" class="welcome-screen">
-                <div class="welcome-avatar-container">
-                  <div class="agent-avatar-large">
-                    <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
-                    <RobotOutlined v-else class="avatar-icon-large" />
-                  </div>
-                  <div class="avatar-glow"></div>
-                </div>
-                <h2 class="welcome-title">你好，我是 {{ agent?.name }}</h2>
-                <p class="welcome-desc">{{ agent?.description || '有什么我可以帮你的吗？' }}</p>
-                
-                <div class="suggestion-chips">
-                  <div class="chip" @click="inputText = '帮我写一份周报'; handleSend()">📝 帮我写一份周报</div>
-                  <div class="chip" @click="inputText = '解释一下量子纠缠'; handleSend()">🔬 解释一下量子纠缠</div>
-                  <div class="chip" @click="inputText = '制定一个健身计划'; handleSend()">💪 制定一个健身计划</div>
+          <!-- Main Content -->
+          <main class="drawer-main">
+            <!-- Empty State -->
+            <div v-if="!generatedContent && !isGenerating" class="empty-state">
+              <div class="empty-visual">
+                <div class="visual-ring"></div>
+                <div class="visual-ring delay-1"></div>
+                <div class="visual-ring delay-2"></div>
+                <div class="visual-core">
+                  <RobotOutlined class="core-icon" />
                 </div>
               </div>
-            </transition>
-
-            <transition-group name="message-fade">
-              <div
-                v-for="(msg, index) in messages"
-                :key="index"
-                class="message-row"
-                :class="`message-row--${msg.role}`"
-              >
-                <!-- Assistant Avatar -->
-                <div v-if="msg.role === 'assistant'" class="message-avatar">
-                  <div class="agent-avatar-xs">
-                    <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
-                    <RobotOutlined v-else class="avatar-icon-xs" />
-                  </div>
+              <h3 class="empty-title">准备好为你生成内容</h3>
+              <p class="empty-desc">在下方输入框描述你的需求，AI 将立即开始创作</p>
+              <div class="empty-features">
+                <div class="feature-item">
+                  <ThunderboltFilled class="feature-icon" />
+                  <span>深度模式支持复杂任务</span>
                 </div>
-
-                <div class="message-bubble-container">
-                  <div class="message-bubble" :class="[`message-bubble--${msg.role}`, { 'bubble-pro': msg.isPro }]">
-                    <div v-if="msg.isPro && msg.role === 'assistant'" class="pro-indicator">
-                      <ThunderboltFilled /> Pro Model
-                    </div>
-                    <div class="message-content" v-html="msg.content"></div>
-                  </div>
-                  
-                  <!-- Actions -->
-                  <div v-if="msg.role === 'assistant' && msg.actions" class="message-actions">
-                    <button class="action-btn" @click="handleCopy(msg.content)" title="复制">
-                      <CopyOutlined />
-                    </button>
-                    <button class="action-btn" @click="handleRegenerate(index)" title="重新生成">
-                      <ReloadOutlined />
-                    </button>
-                  </div>
-                </div>
-
-                <!-- User Avatar -->
-                <div v-if="msg.role === 'user'" class="message-avatar">
-                  <div class="user-avatar">{{ userAvatar }}</div>
-                </div>
-              </div>
-            </transition-group>
-
-            <!-- Loading Indicator -->
-            <div v-if="loading" class="message-row message-row--assistant loading-row">
-              <div class="message-avatar">
-                <div class="agent-avatar-xs">
-                  <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
-                  <RobotOutlined v-else class="avatar-icon-xs" />
-                </div>
-              </div>
-              <div class="message-bubble message-bubble--assistant loading-bubble">
-                <div class="typing-dots">
-                  <span></span><span></span><span></span>
+                <div class="feature-item">
+                  <EditOutlined class="feature-icon" />
+                  <span>可随时重新生成调整</span>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- Footer Input Area -->
-          <footer class="drawer-footer">
-            <div class="input-container">
-              <!-- Model Toggle -->
-              <div class="model-toggle-wrapper">
-                <div class="model-toggle">
-                  <div class="toggle-bg" :class="{ 'toggle-bg--pro': modelMode === 'pro' }"></div>
-                  <button 
-                    class="toggle-item" 
-                    :class="{ active: modelMode === 'standard' }"
-                    @click="modelMode = 'standard'"
-                  >
-                    标准版
-                  </button>
-                  <button 
-                    class="toggle-item" 
-                    :class="{ active: modelMode === 'pro' }"
-                    @click="modelMode = 'pro'"
-                  >
-                    <ThunderboltFilled class="toggle-icon" /> 深度版
-                  </button>
-                </div>
-                <span class="points-hint">{{ modelMode === 'pro' ? '-50 积分' : '-10 积分' }}</span>
+            <!-- Generating / Result State -->
+            <div v-else class="result-area">
+              <!-- User Prompt Display -->
+              <div class="prompt-display">
+                <p class="prompt-text">{{ currentInput }}</p>
+                <button v-if="generatedContent" class="prompt-edit" @click="resetTask">
+                  <EditOutlined />
+                </button>
               </div>
 
-              <div class="textarea-wrapper">
-                <textarea
-                  v-model="inputText"
-                  class="chat-textarea"
-                  placeholder="输入你的问题..."
-                  rows="1"
-                  @keydown="handleKeyDown"
-                  ref="textareaRef"
-                ></textarea>
-                <button 
-                  class="send-fab" 
-                  :disabled="!inputText.trim() || loading" 
-                  @click="handleSend"
-                >
-                  <SendOutlined />
+              <!-- Result Content -->
+              <div class="result-body" ref="resultBodyRef">
+                <!-- Generating Skeleton -->
+                <div v-if="isGenerating && !generatedContent" class="generating-skeleton">
+                  <div class="skeleton-line"></div>
+                  <div class="skeleton-line short"></div>
+                  <div class="skeleton-line"></div>
+                  <div class="skeleton-line medium"></div>
+                </div>
+
+                <!-- Actual Content -->
+                <div v-else class="result-content" :class="{ 'is-streaming': isGenerating }">
+                  <div class="result-text" v-html="generatedContent"></div>
+                  <span v-if="isGenerating" class="cursor-blink"></span>
+                </div>
+              </div>
+
+              <!-- Action Bar -->
+              <div v-if="generatedContent && !isGenerating" class="action-bar">
+                <button class="action-btn primary" @click="handleCopy(generatedContent)">
+                  <CopyOutlined /> 复制
+                </button>
+                <button class="action-btn" @click="handleRegenerate">
+                  <ReloadOutlined /> 重新生成
                 </button>
               </div>
             </div>
-            <div class="footer-note">内容由 AI 生成，仅供参考</div>
+          </main>
+
+          <!-- Input Area -->
+          <footer class="drawer-footer">
+            <!-- Model Selector -->
+            <div class="model-row">
+              <div class="model-tabs">
+                <button
+                  class="model-tab"
+                  :class="{ active: modelMode === 'standard' }"
+                  @click="modelMode = 'standard'"
+                >
+                  标准
+                  <span class="model-cost">-10 积分</span>
+                </button>
+                <button
+                  class="model-tab pro"
+                  :class="{ active: modelMode === 'pro' }"
+                  @click="modelMode = 'pro'"
+                >
+                  <ThunderboltFilled />
+                  深度
+                  <span class="model-cost">-50 积分</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Input Box -->
+            <div class="input-box" :class="{ focused: isInputFocused, 'has-content': inputText.trim() }">
+              <textarea
+                v-model="inputText"
+                class="input-textarea"
+                placeholder="输入你的需求..."
+                rows="1"
+                @focus="isInputFocused = true"
+                @blur="isInputFocused = false"
+                @keydown="handleKeyDown"
+                @input="adjustTextareaHeight"
+                ref="textareaRef"
+              ></textarea>
+              <button
+                class="submit-btn"
+                :disabled="!inputText.trim() || isGenerating"
+                @click="handleGenerate"
+              >
+                <LoadingOutlined v-if="isGenerating" class="spin" />
+                <SendOutlined v-else />
+              </button>
+            </div>
+
+            <p class="footer-tip">按 Enter 发送，Shift + Enter 换行</p>
           </footer>
         </div>
       </div>
@@ -160,153 +145,136 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick, onMounted } from 'vue'
+import { ref, watch, nextTick, computed } from 'vue'
 import {
   CloseOutlined,
   RobotOutlined,
   CopyOutlined,
   ReloadOutlined,
+  ThunderboltFilled,
+  EditOutlined,
   SendOutlined,
-  ThunderboltFilled
+  LoadingOutlined
 } from '@ant-design/icons-vue'
-import { message } from 'ant-design-vue'
+import { message, Modal } from 'ant-design-vue'
 import { sendChatStream } from '@/api/agent'
 
 const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false
-  },
-  agent: {
-    type: Object,
-    default: null
-  }
+  visible: { type: Boolean, default: false },
+  agent: { type: Object, default: null }
 })
 
 const emit = defineEmits(['update:visible', 'send'])
 
-// 状态
+// State
 const modelMode = ref('pro')
 const inputText = ref('')
-const loading = ref(false)
-const messages = ref([])
-const messagesRef = ref(null)
+const isInputFocused = ref(false)
+const isGenerating = ref(false)
+const generatedContent = ref('')
+const usedProMode = ref(false)
+const currentInput = ref('')
 const textareaRef = ref(null)
-const userAvatar = ref('我')
-const conversationId = ref(null)
+const resultBodyRef = ref(null)
 const abortController = ref(null)
 
-// 方法
-const handleClose = () => {
+// Methods
+const handleClose = (force = false) => {
+  // 正在生成时，不允许关闭
+  if (isGenerating.value) {
+    message.warning('正在生成内容，请稍候...')
+    return
+  }
+  // 有生成内容时，提示用户
+  if (!force && generatedContent.value) {
+    Modal.confirm({
+      title: '关闭将丢失生成的内容',
+      content: '建议先复制内容，确定要关闭吗？',
+      okText: '关闭',
+      cancelText: '取消',
+      onOk: () => {
+        doClose()
+      }
+    })
+    return
+  }
+  doClose()
+}
+
+const doClose = () => {
   if (abortController.value) {
     abortController.value.abort()
     abortController.value = null
   }
+  // 清空状态
+  generatedContent.value = ''
+  currentInput.value = ''
+  inputText.value = ''
+  isGenerating.value = false
   emit('update:visible', false)
 }
 
-const handleOverlayClick = () => {
-  handleClose()
-}
+const handleOverlayClick = () => handleClose()
 
-// 自动调整高度
 const adjustTextareaHeight = () => {
   const el = textareaRef.value
   if (el) {
     el.style.height = 'auto'
-    el.style.height = Math.min(el.scrollHeight, 120) + 'px'
+    el.style.height = Math.min(el.scrollHeight, 100) + 'px'
   }
 }
 
-watch(inputText, () => {
-  nextTick(adjustTextareaHeight)
-})
+const handleGenerate = async () => {
+  if (!inputText.value.trim() || isGenerating.value) return
 
-const handleSend = async () => {
-  if (!inputText.value.trim() || loading.value) return
-
-  const userMessage = {
-    role: 'user',
-    content: inputText.value
-  }
-  messages.value.push(userMessage)
-
-  const question = inputText.value
+  const prompt = inputText.value.trim()
+  currentInput.value = prompt
+  usedProMode.value = modelMode.value === 'pro'
+  isGenerating.value = true
+  generatedContent.value = ''
   inputText.value = ''
-  loading.value = true
-  
-  // 重置高度
+
   if (textareaRef.value) textareaRef.value.style.height = 'auto'
 
-  await scrollToBottom()
-
-  const assistantMessage = {
-    role: 'assistant',
-    content: '',
-    isPro: modelMode.value === 'pro',
-    actions: false
-  }
-  messages.value.push(assistantMessage)
-  const currentMessage = messages.value[messages.value.length - 1]
-
   abortController.value = new AbortController()
 
   try {
     await sendChatStream({
       agentId: props.agent?.id,
-      content: question,
-      conversationId: conversationId.value,
+      content: prompt,
       modelMode: modelMode.value,
       ctrl: abortController.value,
       onMessage: (result) => {
         if (result.event === 'message' && result.content) {
-          currentMessage.content += result.content
+          generatedContent.value += result.content
           scrollToBottom()
-        } else if (result.event === 'done') {
-          conversationId.value = result.conversationId
-          currentMessage.actions = true
         } else if (result.event === 'error') {
-          message.error(result.errorMessage || '对话出错')
+          message.error(result.errorMessage || '生成出错')
         }
       },
       onError: (error) => {
-        console.error('发送消息失败:', error)
-        message.error('发送消息失败，请重试')
-        const lastMsg = messages.value[messages.value.length - 1]
-        if (lastMsg?.role === 'assistant' && !lastMsg.content) {
-          messages.value.pop()
-        }
+        console.error('生成失败:', error)
+        message.error('生成失败，请重试')
+        if (!generatedContent.value) isGenerating.value = false
       },
       onClose: () => {
-        loading.value = false
+        isGenerating.value = false
         abortController.value = null
-        nextTick(() => scrollToBottom())
       }
     })
-
-    emit('send', {
-      agentId: props.agent?.id,
-      content: question,
-      modelMode: modelMode.value
-    })
+    emit('send', { agentId: props.agent?.id, content: prompt, modelMode: modelMode.value })
   } catch (error) {
     if (error.name !== 'AbortError') {
-      console.error('发送消息失败:', error)
-      message.error('发送消息失败，请重试')
-      const lastMsg = messages.value[messages.value.length - 1]
-      if (lastMsg?.role === 'assistant' && !lastMsg.content) {
-        messages.value.pop()
-      }
+      message.error('生成失败，请重试')
     }
-  } finally {
-    loading.value = false
+    isGenerating.value = false
   }
 }
 
 const handleKeyDown = (e) => {
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault()
-    handleSend()
+    handleGenerate()
   }
 }
 
@@ -315,130 +283,140 @@ const handleCopy = (content) => {
   message.success('已复制')
 }
 
-const handleRegenerate = async (index) => {
-  if (index > 0 && messages.value[index - 1]?.role === 'user') {
-    const userMsg = messages.value[index - 1]
-    messages.value.splice(index - 1, 2)
-    inputText.value = userMsg.content
-    await handleSend()
-  }
-}
+const handleRegenerate = async () => {
+  if (!currentInput.value || isGenerating.value) return
+  generatedContent.value = ''
+  isGenerating.value = true
+  usedProMode.value = modelMode.value === 'pro'
 
-const scrollToBottom = async () => {
-  await nextTick()
-  if (messagesRef.value) {
-    messagesRef.value.scrollTo({
-      top: messagesRef.value.scrollHeight,
-      behavior: 'smooth'
+  abortController.value = new AbortController()
+
+  try {
+    await sendChatStream({
+      agentId: props.agent?.id,
+      content: currentInput.value,
+      modelMode: modelMode.value,
+      ctrl: abortController.value,
+      onMessage: (result) => {
+        if (result.event === 'message' && result.content) {
+          generatedContent.value += result.content
+          scrollToBottom()
+        } else if (result.event === 'error') {
+          message.error(result.errorMessage || '生成出错')
+        }
+      },
+      onError: () => {
+        message.error('生成失败')
+        if (!generatedContent.value) isGenerating.value = false
+      },
+      onClose: () => {
+        isGenerating.value = false
+        abortController.value = null
+      }
     })
+  } catch (error) {
+    if (error.name !== 'AbortError') message.error('生成失败')
+    isGenerating.value = false
   }
 }
 
-watch(() => props.visible, (newVal) => {
-  if (newVal) {
-    messages.value = []
-    inputText.value = ''
-    conversationId.value = null
+const resetTask = () => {
+  generatedContent.value = ''
+  currentInput.value = ''
+  inputText.value = ''
+  if (abortController.value) {
+    abortController.value.abort()
     abortController.value = null
-    nextTick(() => scrollToBottom())
+  }
+  nextTick(() => textareaRef.value?.focus())
+}
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (resultBodyRef.value) {
+      resultBodyRef.value.scrollTop = resultBodyRef.value.scrollHeight
+    }
+  })
+}
+
+watch(() => props.visible, (val) => {
+  if (val) {
+    // 打开时聚焦输入框
+    nextTick(() => textareaRef.value?.focus())
   }
 })
 </script>
 
 <style scoped lang="less">
-// Variables
-@primary-color: #6366f1; // Indigo 500
-@primary-dark: #4f46e5; // Indigo 600
-@secondary-color: #8b5cf6; // Violet 500
-@bg-color: #f8fafc; // Slate 50
-@surface-color: #ffffff;
-@text-primary: #1e293b; // Slate 800
-@text-secondary: #64748b; // Slate 500
-@border-color: #e2e8f0; // Slate 200
-@shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-@shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-@shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-@shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+@primary: #6366f1;
+@primary-dark: #4f46e5;
+@surface: #ffffff;
+@bg: #f8fafc;
+@text: #1e293b;
+@text-light: #64748b;
+@border: #e2e8f0;
+@radius: 12px;
 
 .chat-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.4); // Slate 900 with opacity
-  backdrop-filter: blur(4px);
+  background: rgba(15, 23, 42, 0.5);
+  backdrop-filter: blur(8px);
   z-index: 1000;
   display: flex;
   justify-content: flex-end;
 }
 
 .chat-drawer {
-  width: 500px;
+  width: 560px;
   height: 100%;
-  background: @bg-color;
-  box-shadow: @shadow-xl;
+  background: @bg;
   display: flex;
   flex-direction: column;
-  position: relative;
   transform: translateX(100%);
-  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  overflow: hidden;
+  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+  position: relative;
 
-  @media (max-width: 576px) {
-    width: 100%;
-  }
-
-  &--visible {
-    transform: translateX(0);
-  }
+  @media (max-width: 640px) { width: 100%; }
+  &--visible { transform: translateX(0); }
 }
 
-.drawer-bg-gradient {
+.drawer-bg-pattern {
   position: absolute;
-  top: -20%;
-  right: -20%;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
+  inset: 0;
+  background-image: radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.05) 1px, transparent 0);
+  background-size: 24px 24px;
   pointer-events: none;
-  z-index: 0;
 }
 
 // Header
 .drawer-header {
-  height: 72px;
-  padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: rgba(255, 255, 255, 0.8);
+  padding: 16px 20px;
+  background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
+  border-bottom: 1px solid @border;
+  position: relative;
   z-index: 10;
-  flex-shrink: 0;
 }
 
-.header-content {
+.header-left {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
 }
 
-.avatar-ring {
-  position: relative;
-  padding: 2px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, @primary-color, @secondary-color);
-}
-
-.agent-avatar-small {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: @surface-color;
+.agent-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, @primary, #8b5cf6);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 2px solid @surface-color;
 
   img {
     width: 100%;
@@ -447,443 +425,394 @@ watch(() => props.visible, (newVal) => {
   }
 }
 
-.status-dot {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 10px;
-  height: 10px;
-  background: #22c55e; // Green 500
-  border: 2px solid @surface-color;
-  border-radius: 50%;
+.avatar-fallback {
+  font-size: 20px;
+  color: #fff;
 }
 
-.header-info {
+.agent-info {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
 }
 
-.header-title {
-  font-size: 16px;
-  font-weight: 700;
-  color: @text-primary;
+.agent-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: @text;
   margin: 0;
-  line-height: 1.2;
 }
 
-.header-badges {
-  display: flex;
-  gap: 6px;
-}
-
-.badge-pill {
-  font-size: 10px;
-  padding: 2px 8px;
-  background: #f1f5f9;
-  color: @text-secondary;
-  border-radius: 12px;
-  font-weight: 500;
-}
-
-.badge-pro {
-  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
-  color: #b45309;
-  border: 1px solid #fde68a;
+.agent-category {
+  font-size: 12px;
+  color: @text-light;
 }
 
 .close-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
   border: none;
   background: transparent;
-  color: @text-secondary;
+  color: @text-light;
   cursor: pointer;
-  transition: all 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s;
 
   &:hover {
     background: #f1f5f9;
-    color: @text-primary;
-    transform: rotate(90deg);
+    color: @text;
   }
 }
 
-// Messages
-.drawer-messages {
+// Main
+.drawer-main {
   flex: 1;
   overflow-y: auto;
-  padding: 24px;
+  padding: 20px;
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  z-index: 1;
-  scroll-behavior: smooth;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
-    border-radius: 3px;
-  }
 }
 
-// Welcome Screen
-.welcome-screen {
+// Empty State
+.empty-state {
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 0;
+  padding: 40px 20px;
   text-align: center;
-  height: 100%;
 }
 
-.welcome-avatar-container {
+.empty-visual {
   position: relative;
-  margin-bottom: 24px;
+  width: 100px;
+  height: 100px;
+  margin-bottom: 28px;
 }
 
-.agent-avatar-large {
-  width: 80px;
-  height: 80px;
+.visual-ring {
+  position: absolute;
+  inset: 0;
   border-radius: 50%;
-  background: linear-gradient(135deg, @primary-color, @secondary-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 2;
-  box-shadow: @shadow-lg;
+  border: 2px solid rgba(99, 102, 241, 0.15);
+  animation: ringPulse 3s ease-in-out infinite;
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-    border: 3px solid @surface-color;
+  &.delay-1 {
+    inset: 10px;
+    animation-delay: 0.5s;
+  }
+  &.delay-2 {
+    inset: 20px;
+    animation-delay: 1s;
   }
 }
 
-.avatar-icon-large {
-  font-size: 40px;
-  color: rgba(255, 255, 255, 0.9);
+@keyframes ringPulse {
+  0%, 100% { transform: scale(1); opacity: 0.15; }
+  50% { transform: scale(1.05); opacity: 0.3; }
 }
 
-.avatar-glow {
+.visual-core {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 120px;
-  height: 120px;
-  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
-  animation: pulse 3s infinite;
-}
-
-.welcome-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: @text-primary;
-  margin-bottom: 8px;
-}
-
-.welcome-desc {
-  font-size: 14px;
-  color: @text-secondary;
-  max-width: 300px;
-  line-height: 1.6;
-  margin-bottom: 32px;
-}
-
-.suggestion-chips {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
-  max-width: 360px;
-}
-
-.chip {
-  padding: 8px 16px;
-  background: @surface-color;
-  border: 1px solid @border-color;
-  border-radius: 20px;
-  font-size: 12px;
-  color: @text-secondary;
-  cursor: pointer;
-  transition: all 0.2s;
-  box-shadow: @shadow-sm;
-
-  &:hover {
-    border-color: @primary-color;
-    color: @primary-color;
-    transform: translateY(-2px);
-    box-shadow: @shadow-md;
-  }
-}
-
-// Message Rows
-.message-row {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-
-  &--user {
-    flex-direction: row-reverse;
-  }
-}
-
-.message-avatar {
-  flex-shrink: 0;
-  margin-top: 4px;
-}
-
-.agent-avatar-xs {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, @primary-color, @secondary-color);
+  background: linear-gradient(135deg, @primary, #8b5cf6);
   display: flex;
   align-items: center;
   justify-content: center;
-  
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-  }
+  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
 }
 
-.avatar-icon-xs {
-  font-size: 14px;
+.core-icon {
+  font-size: 22px;
   color: #fff;
 }
 
-.user-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: @text-primary;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
+.empty-title {
+  font-size: 18px;
   font-weight: 600;
+  color: @text;
+  margin: 0 0 8px;
 }
 
-.message-bubble-container {
-  max-width: 85%;
+.empty-desc {
+  font-size: 14px;
+  color: @text-light;
+  margin: 0 0 28px;
+  max-width: 280px;
+  line-height: 1.6;
+}
+
+.empty-features {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  
-  .message-row--user & {
-    align-items: flex-end;
-  }
+  gap: 12px;
 }
 
-.message-bubble {
-  padding: 12px 16px;
-  border-radius: 16px;
-  font-size: 14px;
-  line-height: 1.6;
-  position: relative;
-  word-break: break-word;
-
-  &--assistant {
-    background: @surface-color;
-    color: @text-primary;
-    border-radius: 4px 16px 16px 16px;
-    box-shadow: @shadow-sm;
-    border: 1px solid rgba(226, 232, 240, 0.8);
-  }
-
-  &--user {
-    background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
-    color: #fff;
-    border-radius: 16px 16px 4px 16px;
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
-  }
-}
-
-.bubble-pro {
-  border: 1px solid rgba(245, 158, 11, 0.2);
-  background: linear-gradient(to bottom right, #fff, #fffbeb);
-}
-
-.pro-indicator {
-  font-size: 10px;
-  font-weight: 700;
-  color: #b45309;
-  margin-bottom: 6px;
+.feature-item {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 10px;
+  font-size: 13px;
+  color: @text-light;
 }
 
-.message-content {
-  white-space: pre-wrap;
-  
-  :deep(p) {
-    margin: 0 0 8px 0;
-    &:last-child { margin-bottom: 0; }
-  }
+.feature-icon {
+  font-size: 14px;
+  color: @primary;
 }
 
-.message-actions {
+// Result Area
+.result-area {
+  flex: 1;
   display: flex;
-  gap: 8px;
-  margin-top: 6px;
-  opacity: 0;
-  transition: opacity 0.2s;
+  flex-direction: column;
+  min-height: 0;
+}
 
-  .message-row:hover & {
-    opacity: 1;
+.prompt-display {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #f1f5f9;
+  border-radius: @radius;
+  margin-bottom: 16px;
+}
+
+.prompt-text {
+  flex: 1;
+  font-size: 13px;
+  color: @text;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.prompt-edit {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: @text-light;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: #e2e8f0;
+    color: @text;
   }
 }
 
+.result-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  background: @surface;
+  border: 1px solid @border;
+  border-radius: @radius;
+  min-height: 200px;
+
+  &::-webkit-scrollbar { width: 4px; }
+  &::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
+}
+
+.generating-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.skeleton-line {
+  height: 14px;
+  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+
+  &.short { width: 40%; }
+  &.medium { width: 70%; }
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.result-content {
+  font-size: 14px;
+  line-height: 1.8;
+  color: @text;
+
+  &.is-streaming {
+    opacity: 0.9;
+  }
+}
+
+.result-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+
+  :deep(p) { margin: 0 0 12px; &:last-child { margin-bottom: 0; } }
+  :deep(ul), :deep(ol) { margin: 8px 0; padding-left: 20px; }
+  :deep(li) { margin-bottom: 4px; }
+  :deep(code) { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
+  :deep(pre) {
+    background: #1e293b;
+    color: #e2e8f0;
+    padding: 16px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 12px 0;
+    code { background: transparent; padding: 0; }
+  }
+}
+
+.cursor-blink {
+  display: inline-block;
+  width: 2px;
+  height: 16px;
+  background: @primary;
+  margin-left: 2px;
+  animation: blink 1s infinite;
+  vertical-align: text-bottom;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+// Action Bar
+.action-bar {
+  display: flex;
+  gap: 10px;
+  margin-top: 16px;
+}
+
 .action-btn {
-  background: transparent;
-  border: none;
-  color: @text-secondary;
-  font-size: 12px;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  
-  &:hover {
-    background: #f1f5f9;
-    color: @primary-color;
-  }
-}
-
-// Loading
-.loading-bubble {
-  padding: 12px 20px;
-}
-
-.typing-dots {
   display: flex;
-  gap: 4px;
-  
-  span {
-    width: 6px;
-    height: 6px;
-    background: @text-secondary;
-    border-radius: 50%;
-    animation: bounce 1.4s infinite ease-in-out both;
-    
-    &:nth-child(1) { animation-delay: -0.32s; }
-    &:nth-child(2) { animation-delay: -0.16s; }
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border: 1px solid @border;
+  border-radius: 10px;
+  background: @surface;
+  font-size: 13px;
+  font-weight: 500;
+  color: @text;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: @primary;
+    color: @primary;
+  }
+
+  &.primary {
+    background: @primary;
+    border-color: @primary;
+    color: #fff;
+
+    &:hover {
+      background: @primary-dark;
+      border-color: @primary-dark;
+      color: #fff;
+    }
   }
 }
 
 // Footer
 .drawer-footer {
-  padding: 20px 24px;
-  background: rgba(255, 255, 255, 0.9);
+  padding: 16px 20px 20px;
+  background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(12px);
-  border-top: 1px solid rgba(226, 232, 240, 0.6);
+  border-top: 1px solid @border;
+  position: relative;
   z-index: 10;
-  flex-shrink: 0;
 }
 
-.input-container {
+.model-row {
+  margin-bottom: 12px;
+}
+
+.model-tabs {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
-.model-toggle-wrapper {
+.model-tab {
+  flex: 1;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-}
-
-.model-toggle {
-  position: relative;
-  display: flex;
-  background: #f1f5f9;
-  border-radius: 20px;
-  padding: 4px;
-  width: fit-content;
-}
-
-.toggle-bg {
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  width: calc(50% - 4px);
-  height: calc(100% - 8px);
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: @shadow-sm;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  
-  &--pro {
-    transform: translateX(100%);
-    background: #fff;
-  }
-}
-
-.toggle-item {
-  position: relative;
-  z-index: 1;
-  padding: 4px 16px;
-  border: none;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 600;
-  color: @text-secondary;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: 1px solid @border;
+  border-radius: 10px;
+  background: @surface;
+  font-size: 13px;
+  font-weight: 500;
+  color: @text-light;
   cursor: pointer;
-  transition: color 0.3s;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  &.active {
-    color: @primary-color;
-  }
-}
-
-.toggle-icon {
-  color: #eab308;
-}
-
-.points-hint {
-  font-size: 11px;
-  color: @text-secondary;
-  background: #f8fafc;
-  padding: 2px 8px;
-  border-radius: 4px;
-  border: 1px solid @border-color;
-}
-
-.textarea-wrapper {
-  position: relative;
-  background: @surface-color;
-  border-radius: 16px;
-  box-shadow: @shadow-sm;
-  border: 1px solid @border-color;
   transition: all 0.2s;
 
-  &:focus-within {
-    border-color: @primary-color;
+  &:hover { border-color: #cbd5e1; }
+
+  &.active {
+    border-color: @primary;
+    color: @primary;
+    background: rgba(99, 102, 241, 0.04);
+  }
+
+  &.pro.active {
+    border-color: #f59e0b;
+    color: #d97706;
+    background: rgba(245, 158, 11, 0.08);
+  }
+}
+
+.model-cost {
+  font-size: 11px;
+  opacity: 0.7;
+}
+
+.input-box {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  background: @surface;
+  border: 1px solid @border;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: all 0.25s ease;
+
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &.focused {
+    border-color: @primary;
     box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
   }
 }
 
-.chat-textarea {
-  width: 100%;
-  padding: 12px 48px 12px 16px;
+.input-textarea {
+  flex: 1;
+  padding: 14px 16px;
+  padding-right: 52px;
   border: none;
   background: transparent;
   resize: none;
@@ -891,58 +820,56 @@ watch(() => props.visible, (newVal) => {
   font-family: inherit;
   font-size: 14px;
   line-height: 1.5;
-  color: @text-primary;
+  color: @text;
   max-height: 120px;
-  
-  &::placeholder {
-    color: #94a3b8;
-  }
+
+  &::placeholder { color: #94a3b8; }
 }
 
-.send-fab {
+.submit-btn {
   position: absolute;
   right: 8px;
   bottom: 8px;
-  width: 32px;
-  height: 32px;
-  border-radius: 10px;
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
   border: none;
-  background: @primary-color;
+  background: linear-gradient(135deg, @primary 0%, #8b5cf6 100%);
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
-  
-  &:hover:not(:disabled) {
-    background: @primary-dark;
+  opacity: 0.5;
+
+  &:not(:disabled):hover {
     transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
   }
-  
+
   &:disabled {
-    background: #cbd5e1;
     cursor: not-allowed;
   }
+
+  .has-content & {
+    opacity: 1;
+  }
 }
 
-.footer-note {
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.footer-tip {
   text-align: center;
-  font-size: 10px;
-  color: #cbd5e1;
-  margin-top: 8px;
-}
-
-// Animations
-@keyframes pulse {
-  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
-  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.2; }
-  100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
-}
-
-@keyframes bounce {
-  0%, 80%, 100% { transform: scale(0); }
-  40% { transform: scale(1); }
+  font-size: 11px;
+  color: #94a3b8;
+  margin: 8px 0 0;
 }
 
 // Transitions
@@ -954,22 +881,4 @@ watch(() => props.visible, (newVal) => {
 .drawer-fade-leave-to {
   opacity: 0;
 }
-
-.fade-up-enter-active,
-.fade-up-leave-active {
-  transition: all 0.4s ease;
-}
-.fade-up-enter-from,
-.fade-up-leave-to {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-.message-fade-enter-active {
-  transition: all 0.4s ease;
-}
-.message-fade-enter-from {
-  opacity: 0;
-  transform: translateY(10px);
-}
 </style>
diff --git a/frontend/app/web-gold/src/views/agents/Agents.vue b/frontend/app/web-gold/src/views/agents/Agents.vue
index c3abf1fe7d..185dfbb8d4 100644
--- a/frontend/app/web-gold/src/views/agents/Agents.vue
+++ b/frontend/app/web-gold/src/views/agents/Agents.vue
@@ -1,102 +1,114 @@
 <template>
   <FullWidthLayout :show-padding="false" class="agents-layout">
     <div class="agents-container">
-      <!-- 头部区域：搜索 + 分类 -->
-      <div class="agents-header">
+      <!-- 优雅头部区域 -->
+      <header class="agents-header">
+        <!-- 装饰性背景元素 -->
+        <div class="header-decoration">
+          <div class="deco-circle deco-circle--1"></div>
+          <div class="deco-circle deco-circle--2"></div>
+        </div>
+
         <div class="header-content">
-          <!-- <h1 class="header-title">AI Agent Store</h1>
-          <p class="header-subtitle">Discover the perfect AI assistant for your workflow</p> -->
-          
-          <!-- 搜索栏 -->
-          <div class="search-section">
-            <div class="search-input-wrapper">
+          <!-- 搜索区域 - 核心焦点 -->
+          <div class="search-hero">
+            <div class="search-input-group">
               <SearchOutlined class="search-icon" />
               <input
                 v-model="searchKeyword"
                 type="text"
-                placeholder="搜索智能体风格，如：文案、数据分析..."
+                placeholder="搜索智能体..."
                 class="search-input"
                 @keydown.enter="handleSearch"
               />
-              <CloseOutlined v-if="searchKeyword" class="search-clear" @click="searchKeyword = ''; handleSearch()" />
+              <transition name="fade">
+                <button v-if="searchKeyword" class="search-clear" @click="clearSearch">
+                  <CloseOutlined />
+                </button>
+              </transition>
             </div>
           </div>
 
-          <!-- 分类筛选 -->
-          <div class="category-section">
-            <div class="category-wrapper" :class="{ 'is-expanded': isExpanded }">
-              <nav class="category-nav">
+          <!-- 精简分类筛选 -->
+          <div class="category-filter">
+            <div class="category-scroll" ref="categoryScrollRef">
+              <div class="category-track">
                 <button
-                  v-for="category in categories"
+                  v-for="category in visibleCategories"
                   :key="category.id"
-                  class="category-btn"
-                  :class="{ 'category-btn--active': activeCategory === category.id }"
+                  :data-category-id="category.id"
+                  class="category-chip"
+                  :class="{ 'category-chip--active': activeCategory === category.id }"
                   @click="handleCategoryChange(category.id)"
                 >
-                  <span>{{ category.name }}</span>
-                  <span class="category-count" v-if="category.count > 0">{{ category.count }}</span>
+                  <span class="chip-label">{{ category.name }}</span>
+                  <span class="chip-count" v-if="category.count > 0">{{ category.count }}</span>
                 </button>
-              </nav>
-              <!-- 底部遮罩（仅在折叠状态显示） -->
-              <div class="category-mask" v-if="!isExpanded && categories.length > 10"></div>
+              </div>
             </div>
-
-            <!-- 展开/收起按钮 -->
-            <button 
-              v-if="categories.length > 10" 
-              class="expand-btn" 
-              @click="isExpanded = !isExpanded"
-            >
-              <span>{{ isExpanded ? '收起更多' : '显示更多' }}</span>
-              <component :is="isExpanded ? UpOutlined : DownOutlined" />
-            </button>
           </div>
         </div>
-      </div>
+      </header>
 
       <!-- 主内容区域 -->
       <main class="agents-main">
-        <!-- 智能体卡片网格 -->
-        <div class="agents-content">
-          <a-spin :spinning="loading" tip="加载中...">
-            <template v-if="filteredAgentList.length > 0">
-              <div class="agents-grid">
-                <div
-                  v-for="agent in filteredAgentList"
-                  :key="agent.id"
-                  class="agent-card"
-                  @click="handleAgentClick(agent)"
-                >
-                  <!-- 头部：头像 + 标签 -->
-                  <div class="card-header">
-                    <div class="agent-avatar">
+        <a-spin :spinning="loading" class="loading-spinner">
+          <template #indicator>
+            <div class="custom-spinner"></div>
+          </template>
+
+          <template v-if="filteredAgentList.length > 0">
+            <div class="agents-grid">
+              <article
+                v-for="(agent, index) in filteredAgentList"
+                :key="agent.id"
+                class="agent-card"
+                :style="{ '--i': index }"
+                @click="handleAgentClick(agent)"
+              >
+                <!-- 卡片内容 -->
+                <div class="card-content">
+                  <!-- 左侧头像 -->
+                  <div class="card-avatar">
+                    <div class="avatar-ring" :class="`ring--${agent.tagColor}`"></div>
+                    <div class="avatar-inner">
                       <img v-if="agent.avatar" :src="agent.avatar" :alt="agent.name" />
-                      <RobotOutlined v-else class="avatar-placeholder" />
+                      <RobotOutlined v-else class="avatar-icon" />
                     </div>
-                    <span class="agent-tag" :class="`agent-tag--${agent.tagColor}`">
-                      {{ agent.categoryName }}
-                    </span>
                   </div>
 
-                  <!-- 名称 -->
-                  <h3 class="card-title">{{ agent.name }}</h3>
-
-                  <!-- 描述 -->
-                  <p class="card-description">{{ agent.description }}</p>
-
-                  <!-- 底部：按钮 -->
-                  <div class="card-footer">
-                    <span class="usage-count">{{ agent.categoryName }}</span>
-                    <button class="chat-btn" @click.stop="handleChat(agent)">
-                      开始对话
-                    </button>
+                  <!-- 右侧信息 -->
+                  <div class="card-info">
+                    <div class="info-header">
+                      <h3 class="info-name">{{ agent.name }}</h3>
+                      <span class="info-badge" :class="`badge--${agent.tagColor}`">
+                        {{ agent.categoryName }}
+                      </span>
+                    </div>
+                    <p class="info-desc">{{ agent.description }}</p>
                   </div>
                 </div>
-              </div>
-            </template>
-            <a-empty v-else description="暂无智能体" />
-          </a-spin>
-        </div>
+
+                <!-- 底部操作栏 -->
+                <div class="card-footer">
+                  <div class="footer-spacer"></div>
+                  <button class="chat-btn" @click.stop="handleChat(agent)">
+                    <MessageOutlined class="chat-btn-icon" />
+                    <span>对话</span>
+                  </button>
+                </div>
+              </article>
+            </div>
+          </template>
+
+          <div v-else class="empty-state">
+            <div class="empty-visual">
+              <SearchOutlined />
+            </div>
+            <p class="empty-text">没有找到匹配的智能体</p>
+            <button class="empty-action" @click="resetFilters">清除筛选</button>
+          </div>
+        </a-spin>
       </main>
     </div>
 
@@ -110,13 +122,13 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import {
   SearchOutlined,
   RobotOutlined,
   CloseOutlined,
-  DownOutlined,
-  UpOutlined
+  ArrowRightOutlined,
+  MessageOutlined
 } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
@@ -129,57 +141,42 @@ const activeCategory = ref('all')
 const searchKeyword = ref('')
 const chatDrawerVisible = ref(false)
 const currentAgent = ref(null)
-const isExpanded = ref(false)
+const categoryScrollRef = ref(null)
 
-// 智能体列表数据（从 API 获取）
+// 智能体列表数据
 const agentList = ref([])
 
-// 分类数据（动态从 agentList 提取）
+// 分类数据
 const categories = computed(() => {
   const categoryMap = new Map()
 
-  // 统计各分类数量
   agentList.value.forEach(agent => {
     const cat = agent.categoryName || '其他'
     categoryMap.set(cat, (categoryMap.get(cat) || 0) + 1)
   })
 
-  // 构建分类列表
   const cats = [
-    { id: 'all', name: '全部智能体', count: agentList.value.length }
+    { id: 'all', name: '全部', count: agentList.value.length }
   ]
 
   categoryMap.forEach((count, name) => {
     cats.push({ id: name, name, count })
   })
 
-  // Mock data to demonstrate "lots of content"
-  // Only add if we have few real categories, to test the UI
-  if (cats.length < 10) {
-    const mockCategories = [
-      '市场营销', '产品设计', '人力资源', '财务会计', '法律咨询',
-      '客户服务', '项目管理', '数据科学', '网络安全', '云计算',
-      '人工智能', '区块链', '物联网', '虚拟现实', '增强现实',
-      '游戏开发', '移动应用', '前端开发', '后端开发', '全栈开发'
-    ]
-    mockCategories.forEach((name, index) => {
-      cats.push({ id: `mock-${index}`, name, count: Math.floor(Math.random() * 50) + 1 })
-    })
-  }
-
   return cats
 })
 
-// 计算属性：过滤后的列表
+// 可见分类（用于展示）
+const visibleCategories = computed(() => categories.value)
+
+// 过滤后的列表
 const filteredAgentList = computed(() => {
   let list = agentList.value
 
-  // 按分类过滤
   if (activeCategory.value !== 'all') {
     list = list.filter(a => a.categoryName === activeCategory.value)
   }
 
-  // 按关键词搜索（前端过滤）
   if (searchKeyword.value) {
     const keyword = searchKeyword.value.toLowerCase()
     list = list.filter(a =>
@@ -197,7 +194,6 @@ const fetchAgentList = async () => {
   try {
     const res = await getAgentList()
     if (res.code === 0 && res.data) {
-      // 字段映射：agentName → name, icon → avatar
       agentList.value = res.data.map(item => ({
         id: item.id,
         agentId: item.agentId,
@@ -216,27 +212,49 @@ const fetchAgentList = async () => {
   }
 }
 
-// 根据分类名称获取标签颜色
+// 根据分类获取标签颜色
 const getTagColor = (categoryName) => {
-  const colorMap = {
-    '文案创作': 'blue',
-    '数据分析': 'green',
-    '代码助手': 'purple',
-    '设计创作': 'pink',
-    '教育学习': 'amber'
-  }
-  return colorMap[categoryName] || 'blue'
+  const colors = ['blue', 'emerald', 'violet', 'rose', 'amber', 'cyan']
+  const index = categoryName ? categoryName.charCodeAt(0) % colors.length : 0
+  return colors[index]
+}
+
+// 滚动分类到可见区域
+const scrollCategoryIntoView = (categoryId) => {
+  nextTick(() => {
+    const scrollContainer = categoryScrollRef.value
+    if (!scrollContainer) return
+
+    const chipEl = scrollContainer.querySelector(`[data-category-id="${categoryId}"]`)
+    if (!chipEl) return
+
+    chipEl.scrollIntoView({
+      behavior: 'smooth',
+      inline: 'center',
+      block: 'nearest'
+    })
+  })
 }
 
 // 方法
 const handleCategoryChange = (categoryId) => {
   activeCategory.value = categoryId
+  scrollCategoryIntoView(categoryId)
 }
 
 const handleSearch = () => {
   // 搜索逻辑通过 computed 自动处理
 }
 
+const clearSearch = () => {
+  searchKeyword.value = ''
+}
+
+const resetFilters = () => {
+  searchKeyword.value = ''
+  activeCategory.value = 'all'
+}
+
 const handleAgentClick = (agent) => {
   console.log('查看智能体详情:', agent)
 }
@@ -257,353 +275,393 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
+// ============================================
+// CSS Variables - 设计令牌
+// ============================================
+:root {
+  --surface-primary: #FAFAFA;
+  --surface-elevated: #FFFFFF;
+  --surface-muted: #F5F5F5;
+
+  --text-primary: #171717;
+  --text-secondary: #525252;
+  --text-tertiary: #A3A3A3;
+
+  --border-subtle: #E5E5E5;
+  --border-light: #F0F0F0;
+
+  --accent-blue: #2563EB;
+  --accent-emerald: #059669;
+  --accent-violet: #7C3AED;
+  --accent-rose: #E11D48;
+  --accent-amber: #D97706;
+  --accent-cyan: #0891B2;
+
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.05);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.06);
+
+  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+// ============================================
+// 基础布局
+// ============================================
 .agents-layout {
   height: 100%;
+  background: var(--surface-primary);
 }
 
 .agents-container {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: #F8FAFC;
+  position: relative;
 }
 
-// 头部区域
+// ============================================
+// 头部区域 - 极简优雅
+// ============================================
 .agents-header {
-  background: #F8FAFC;
-  padding: 64px 0 48px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-bottom: 1px solid #F1F5F9;
+  position: relative;
+  padding: 48px 0 32px;
+  background: var(--surface-primary);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.header-decoration {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.deco-circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.5;
+
+  &--1 {
+    width: 300px;
+    height: 300px;
+    right: -100px;
+    top: -150px;
+    background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
+  }
+
+  &--2 {
+    width: 200px;
+    height: 200px;
+    left: -50px;
+    bottom: -100px;
+    background: radial-gradient(circle, rgba(124, 58, 237, 0.04) 0%, transparent 70%);
+  }
 }
 
 .header-content {
-  width: 100%;
-  max-width: 800px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
+  max-width: 960px;
+  margin: 0 auto;
   padding: 0 24px;
-}
-
-.header-title {
-  font-size: 48px;
-  font-weight: 800;
-  color: #1E293B;
-  margin: 0 0 16px 0;
-  letter-spacing: -0.02em;
-}
-
-.header-subtitle {
-  font-size: 18px;
-  color: #64748B;
-  margin: 0 0 40px 0;
-  max-width: 600px;
-  line-height: 1.6;
-}
-
-.search-section {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 32px;
-}
-
-.search-input-wrapper {
   position: relative;
-  width: 100%;
-  max-width: 600px;
+  z-index: 1;
+}
+
+// ============================================
+// 搜索区域 - 核心焦点
+// ============================================
+.search-hero {
+  max-width: 480px;
+  margin: 0 auto 28px;
+}
+
+.search-input-group {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .search-icon {
   position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #94A3B8;
-  font-size: 20px;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.search-clear {
-  position: absolute;
-  right: 18px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #94A3B8;
+  left: 18px;
   font-size: 16px;
-  cursor: pointer;
-  z-index: 2;
-  transition: all 0.2s ease;
-
-  &:hover {
-    color: #64748B;
-  }
+  color: var(--text-tertiary);
+  pointer-events: none;
+  transition: color var(--transition-fast);
 }
 
 .search-input {
   width: 100%;
-  height: 56px;
-  padding: 0 52px 0 56px;
-  border: 1px solid #E2E8F0;
-  border-radius: 28px;
-  font-size: 16px;
-  color: #1E293B;
-  background: #F8FAFC;
+  height: 52px;
+  padding: 0 48px 0 48px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  font-size: 15px;
+  color: var(--text-primary);
+  background: var(--surface-elevated);
   outline: none;
-  transition: all 0.2s ease;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: all var(--transition-smooth);
+  box-shadow: var(--shadow-sm);
 
   &::placeholder {
-    color: #94A3B8;
+    color: var(--text-tertiary);
   }
 
   &:focus {
-    border-color: #94A3B8;
-    background: #fff;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), var(--shadow-md);
+
+    & + .search-icon,
+    & ~ .search-icon {
+      color: var(--accent-blue);
+    }
   }
 
+  &:hover:not(:focus) {
+    border-color: #D4D4D4;
+  }
+}
+
+.search-clear {
+  position: absolute;
+  right: 14px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: var(--surface-muted);
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+  font-size: 10px;
+  transition: all var(--transition-fast);
+
   &:hover {
-    border-color: #CBD5E1;
+    background: #E5E5E5;
+    color: var(--text-secondary);
   }
 }
 
-// 分类筛选
-.category-section {
-  width: 100%;
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.category-wrapper {
-  position: relative;
-  width: 100%;
-  max-width: 1000px;
-  // Default state: collapsed (show 1 row approx)
-  max-height: 48px; 
-  overflow: hidden;
-  transition: max-height 0.3s ease-in-out;
-  
-  &.is-expanded {
-    max-height: 240px; // Limit expanded height
-    overflow-y: auto; // Allow scrolling when content exceeds max-height
-  }
-
-  // Scrollbar styling for desktop
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(148, 163, 184, 0.4);
-    border-radius: 3px;
-    
-    &:hover {
-      background-color: rgba(148, 163, 184, 0.6);
-    }
-  }
-
-  /* Mobile optimization: Keep horizontal scroll on small screens */
-  @media (max-width: 640px) {
-    max-height: none;
-    overflow-x: auto;
-    white-space: nowrap;
-    mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
-    -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
-
-    /* Hide scrollbar */
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-}
-
-.category-nav {
+// ============================================
+// 分类筛选 - 精简胶囊
+// ============================================
+.category-filter {
   display: flex;
   justify-content: center;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: 4px 0; // Removed horizontal padding to fit wrapper
-  width: 100%;
-
-  @media (max-width: 640px) {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    width: max-content;
-    justify-content: flex-start;
-    padding: 4px 20px; // Add padding back for mobile scroll
-  }
 }
 
-.category-mask {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 24px;
-  background: linear-gradient(to bottom, transparent, #F8FAFC);
-  pointer-events: none;
-  
-  @media (max-width: 640px) {
+.category-scroll {
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
     display: none;
   }
 }
 
-.expand-btn {
+.category-track {
   display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 12px;
-  background: transparent;
-  border: none;
-  font-size: 13px;
-  color: #64748B;
-  cursor: pointer;
-  transition: color 0.2s;
-  padding: 4px 12px;
-
-  &:hover {
-    color: #334155;
-  }
-  
-  @media (max-width: 640px) {
-    display: none;
-  }
+  gap: 8px;
+  padding: 4px;
 }
 
-.category-btn {
+.category-chip {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: 20px;
-  font-size: 14px;
+  gap: 6px;
+  height: 34px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 17px;
+  font-size: 13px;
   font-weight: 500;
-  color: #64748B;
-  background: #F1F5F9;
-  border: 1px solid transparent;
+  color: var(--text-secondary);
+  background: transparent;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--transition-fast);
   white-space: nowrap;
 
-  &:hover {
-    background: #E2E8F0;
-    color: #334155;
+  &:hover:not(.category-chip--active) {
+    background: var(--surface-muted);
+    color: var(--text-primary);
   }
 
   &--active {
-    background: #1E293B;
-    color: #fff;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    
+    background: var(--text-primary);
+    color: white;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  }
+}
+
+.chip-label {
+  font-weight: 500;
+}
+
+.chip-count {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: rgba(255,255,255,0.15);
+  color: inherit;
+  opacity: 0.9;
+
+  .category-chip:not(.category-chip--active) & {
+    background: var(--surface-muted);
+  }
+}
+
+// ============================================
+// 主内容区域
+// ============================================
+.agents-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 24px 48px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #E5E5E5;
+    border-radius: 3px;
+
     &:hover {
-      background: #334155;
-      color: #fff;
+      background: #D4D4D4;
     }
   }
 }
 
-.category-count {
-  font-size: 12px;
-  background: rgba(255, 255, 255, 0.5);
-  color: #64748B;
-  padding: 0 6px;
-  height: 18px;
-  line-height: 18px;
-  border-radius: 9px;
-  font-weight: 600;
-  transition: all 0.2s ease;
-
-  .category-btn--active & {
-    background: rgba(255, 255, 255, 0.2);
-    color: #fff;
-  }
+.loading-spinner {
+  width: 100%;
 }
 
-// 主内容区域
-.agents-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  max-width: 1400px;
-  width: 100%;
+.custom-spinner {
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--border-subtle);
+  border-top-color: var(--accent-blue);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
   margin: 0 auto;
 }
 
-// 智能体内容区域
-.agents-content {
-  flex: 1;
-  padding: 40px 24px;
-  overflow-y: auto;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
+// ============================================
+// 智能体卡片网格
+// ============================================
 .agents-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
 
   @media (max-width: 640px) {
     grid-template-columns: 1fr;
   }
 }
 
-// 智能体卡片
+// ============================================
+// 智能体卡片 - 现代设计
+// ============================================
 .agent-card {
-  background: #fff;
-  border: 1px solid #F1F5F9;
-  border-radius: 16px;
-  padding: 24px;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
+  background: var(--surface-elevated);
+  border-radius: 16px;
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: cardReveal 0.5s ease-out backwards;
+  animation-delay: calc(var(--i) * 0.04s);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
 
   &:hover {
     transform: translateY(-4px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
-    border-color: #E2E8F0;
+    box-shadow: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
+
+    .card-footer {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .avatar-ring {
+      transform: scale(1);
+      opacity: 1;
+    }
   }
 }
 
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 20px;
+@keyframes cardReveal {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.agent-avatar {
-  width: 56px;
-  height: 56px;
-  border-radius: 12px;
+.card-content {
+  display: flex;
+  gap: 16px;
+  padding: 20px;
+}
+
+// 头像区域
+.card-avatar {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.avatar-ring {
+  position: absolute;
+  inset: -3px;
+  border-radius: 16px;
+  opacity: 0;
+  transform: scale(0.9);
+  transition: all 0.3s ease;
+
+  &--blue { background: linear-gradient(135deg, #3B82F6, #8B5CF6); }
+  &--emerald { background: linear-gradient(135deg, #10B981, #06B6D4); }
+  &--violet { background: linear-gradient(135deg, #8B5CF6, #EC4899); }
+  &--rose { background: linear-gradient(135deg, #F43F5E, #F97316); }
+  &--amber { background: linear-gradient(135deg, #F59E0B, #EF4444); }
+  &--cyan { background: linear-gradient(135deg, #06B6D4, #3B82F6); }
+}
+
+.avatar-inner {
+  position: relative;
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
   overflow: hidden;
-  border: 1px solid #F1F5F9;
-  background: #F8FAFC;
+  background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.3s ease;
-
-  .agent-card:hover & {
-    transform: scale(1.05);
-  }
 
   img {
     width: 100%;
@@ -612,101 +670,166 @@ onMounted(() => {
   }
 }
 
-.avatar-placeholder {
-  font-size: 28px;
-  color: #94A3B8;
+.avatar-icon {
+  font-size: 24px;
+  color: #9CA3AF;
 }
 
-.agent-tag {
-  font-size: 12px;
-  padding: 4px 10px;
-  border-radius: 6px;
-  font-weight: 500;
-
-  &--blue {
-    background: #EFF6FF;
-    color: #3B82F6;
-  }
-
-  &--green {
-    background: #F0FDF4;
-    color: #22C55E;
-  }
-
-  &--purple {
-    background: #FAF5FF;
-    color: #A855F7;
-  }
-
-  &--pink {
-    background: #FDF2F8;
-    color: #EC4899;
-  }
-
-  &--amber {
-    background: #FFFBEB;
-    color: #F59E0B;
-  }
+// 信息区域
+.card-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.card-title {
-  font-size: 18px;
+.info-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.info-name {
+  font-size: 15px;
   font-weight: 600;
-  color: #1E293B;
-  margin: 0 0 8px 0;
-  line-height: 1.4;
+  color: #111827;
+  margin: 0;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
 }
 
-.card-description {
-  font-size: 14px;
-  color: #64748B;
-  margin: 0 0 24px 0;
+.info-badge {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 8px;
+  border-radius: 6px;
+  white-space: nowrap;
+
+  &--blue { background: #EFF6FF; color: #2563EB; }
+  &--emerald { background: #ECFDF5; color: #059669; }
+  &--violet { background: #F5F3FF; color: #7C3AED; }
+  &--rose { background: #FFF1F2; color: #E11D48; }
+  &--amber { background: #FFFBEB; color: #D97706; }
+  &--cyan { background: #ECFEFF; color: #0891B2; }
+}
+
+.info-desc {
+  font-size: 13px;
+  color: #6B7280;
+  margin: 0;
+  line-height: 1.5;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  line-height: 1.6;
+}
+
+// 底部操作栏
+.card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 12px 16px;
+  border-top: 1px solid #F3F4F6;
+  background: #FAFAFA;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: all 0.25s ease;
+}
+
+.footer-spacer {
   flex: 1;
 }
 
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 16px;
-  border-top: 1px solid #F1F5F9;
-  margin-top: auto;
-}
-
-.usage-count {
-  font-size: 12px;
-  color: #94A3B8;
-  font-weight: 500;
-  display: flex;
+.chat-btn {
+  display: inline-flex;
   align-items: center;
   gap: 6px;
-}
-
-.chat-btn {
-  background: #F1F5F9;
-  color: #475569;
+  padding: 6px 14px;
+  background: #111827;
   border: none;
-  padding: 8px 16px;
   border-radius: 8px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
+  color: white;
   cursor: pointer;
   transition: all 0.2s ease;
 
-  .agent-card:hover & {
-    background: #1E293B;
-    color: #fff;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  }
-  
   &:hover {
-    background: #334155 !important;
+    background: #1F2937;
+    transform: scale(1.02);
+  }
+
+  &:active {
+    transform: scale(0.98);
   }
 }
+
+.chat-btn-icon {
+  font-size: 13px;
+}
+
+// ============================================
+// 空状态
+// ============================================
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 24px;
+  text-align: center;
+}
+
+.empty-visual {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--surface-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: var(--text-tertiary);
+  margin-bottom: 20px;
+}
+
+.empty-text {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin: 0 0 16px 0;
+}
+
+.empty-action {
+  padding: 8px 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--surface-elevated);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+
+  &:hover {
+    border-color: var(--text-tertiary);
+    color: var(--text-primary);
+  }
+}
+
+// ============================================
+// 过渡动画
+// ============================================
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity var(--transition-fast);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
diff --git a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
index 5c096c7d6a..a9702ecedd 100644
--- a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
@@ -58,7 +58,7 @@
           @change="handleTableChange"
           :expanded-row-keys="expandedRowKeys"
           @expandedRowsChange="handleExpandedRowsChange"
-          :scroll="{ x: 1000 }"
+          :scroll="{ x: 'max-content' }"
         >
           <!-- 标题列 -->
           <template #bodyCell="{ column, record }">
@@ -364,44 +364,43 @@ const columns = [
     title: 'ID',
     dataIndex: 'id',
     key: 'id',
-    width: 80,
+    width: 70,
     fixed: 'left'
   },
   {
     title: '标题',
     dataIndex: 'title',
     key: 'title',
-    width: 250,
     ellipsis: true
   },
   {
     title: '状态',
     dataIndex: 'status',
     key: 'status',
-    width: 100
+    width: 90
   },
   {
     title: '生成结果',
     dataIndex: 'outputUrls',
     key: 'outputUrls',
-    width: 120
+    width: 100
   },
   {
     title: '创建时间',
     dataIndex: 'createTime',
     key: 'createTime',
-    width: 180
+    width: 160
   },
   {
     title: '完成时间',
     dataIndex: 'finishTime',
     key: 'finishTime',
-    width: 180
+    width: 160
   },
   {
     title: '操作',
     key: 'actions',
-    width: 300,
+    width: 240,
     fixed: 'right'
   }
 ]