From a704b26b26aab2e7dea1fd9dce0501bf2bce1ce6 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 12 Feb 2026 01:06:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ChatMessageRenderer.vue    | 129 ----
 .../src/components/agents/ChatDrawer.vue      | 650 +++++++++++++++++
 frontend/app/web-gold/src/router/index.js     |   4 +-
 .../app/web-gold/src/views/agents/Agents.vue  | 674 ++++++++++++++++++
 4 files changed, 1327 insertions(+), 130 deletions(-)
 delete mode 100644 frontend/app/web-gold/src/components/ChatMessageRenderer.vue
 create mode 100644 frontend/app/web-gold/src/components/agents/ChatDrawer.vue
 create mode 100644 frontend/app/web-gold/src/views/agents/Agents.vue

diff --git a/frontend/app/web-gold/src/components/ChatMessageRenderer.vue b/frontend/app/web-gold/src/components/ChatMessageRenderer.vue
deleted file mode 100644
index 4a694262d3..0000000000
--- a/frontend/app/web-gold/src/components/ChatMessageRenderer.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <div class="prompt-display" v-html="renderedContent"></div>
-</template>
-
-<script setup>
-import { ref, watch, nextTick, onUnmounted, onMounted } from 'vue'
-import { renderMarkdown } from '@/utils/markdown'
-
-const props = defineProps({
-  content: {
-    type: String,
-    default: ''
-  },
-  isStreaming: {
-    type: Boolean,
-    default: false
-  }
-})
-
-// 内部维护的纯文本内容（用于计算增量和渲染源）
-const internalContent = ref('')
-// 最终渲染的 HTML
-const renderedContent = ref('')
-
-let debounceTimer = null
-// 页面可见性状态
-const isPageVisible = ref(true)
-
-// 仅在流式时计算并追加增量
-function appendStreamingDelta(newFullContent) {
-  // 页面不可见时，跳过更新避免重复片段
-  if (!isPageVisible.value) {
-    console.log('[ChatMessageRenderer] 页面不可见，跳过流式更新')
-    return
-  }
-
-  const prev = internalContent.value
-  if (newFullContent.startsWith(prev)) {
-    // 正常情况：新内容包含旧内容 → 只追加差值
-    const delta = newFullContent.slice(prev.length)
-    internalContent.value += delta
-  } else {
-    // 异常情况（如后端重发了不连续的内容），直接覆盖防止乱序
-    console.warn('[ChatMessageRenderer] Streaming content out of order, forcing replace')
-    internalContent.value = newFullContent
-  }
-}
-
-// 更新 Markdown 渲染
-async function updateRendered() {
-  if (!internalContent.value) {
-    renderedContent.value = ''
-    return
-  }
-  // renderMarkdown 可能包含异步操作（如 highlight.js），用 nextTick 确保 DOM 就绪
-  renderedContent.value = await renderMarkdown(internalContent.value)
-}
-
-// 主更新逻辑
-function updateContent(newContent = '') {
-  if (props.isStreaming) {
-    appendStreamingDelta(newContent)
-  } else {
-    internalContent.value = newContent
-  }
-
-  // 流式直接渲染，非流式防抖（避免频繁完整替换导致光标跳动或闪烁）
-  if (props.isStreaming) {
-    updateRendered()
-  } else {
-    clearTimeout(debounceTimer)
-    debounceTimer = setTimeout(() => {
-      updateRendered()
-    }, 60) // 60ms 足够平滑且不卡顿
-  }
-}
-
-// 监听 content 变化（外部每次推送的都是当前完整内容）
-watch(() => props.content, (newVal) => {
-  updateContent(newVal || '')
-}, { immediate: true })
-
-// 当流式开始时清空，防止旧内容残留
-watch(() => props.isStreaming, (newVal, oldVal) => {
-  if (newVal && !oldVal) {
-    internalContent.value = ''
-    renderedContent.value = ''
-  }
-})
-
-// 监听页面可见性变化，避免后台时累积重复片段
-function handleVisibilityChange() {
-  const wasVisible = isPageVisible.value
-  isPageVisible.value = !document.hidden
-
-  if (!wasVisible && isPageVisible.value) {
-    // 页面从不可见变为可见：立即同步最新内容
-    console.log('[ChatMessageRenderer] 页面重新可见，同步最新内容')
-    // 使用外部传入的最新content进行同步，而不是累积的增量
-    if (props.content) {
-      internalContent.value = props.content
-      updateRendered()
-    }
-  } else if (wasVisible && !isPageVisible.value) {
-    console.log('[ChatMessageRenderer] 页面进入后台')
-  }
-}
-
-onMounted(() => {
-  // 初始状态
-  handleVisibilityChange()
-  // 添加监听器
-  document.addEventListener('visibilitychange', handleVisibilityChange)
-})
-
-onUnmounted(() => {
-  if (debounceTimer) clearTimeout(debounceTimer)
-  // 移除监听器
-  document.removeEventListener('visibilitychange', handleVisibilityChange)
-})
-</script>
-
-<style scoped>
-.prompt-display {
-  line-height: 1.6;
-  color: var(--color-text);
-  font-size: 14px;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
new file mode 100644
index 0000000000..8563015b5c
--- /dev/null
+++ b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
@@ -0,0 +1,650 @@
+<template>
+  <teleport to="body">
+    <transition name="slide-drawer">
+      <div v-if="visible" class="chat-drawer-overlay" @click="handleOverlayClick">
+        <div class="chat-drawer" :class="{ 'chat-drawer--visible': visible }" @click.stop>
+          <!-- 头部 -->
+          <div class="drawer-header">
+            <div class="header-info">
+              <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="header-text">
+                <h3 class="header-title">与「{{ agent?.name }}」对话中</h3>
+                <p class="header-subtitle">{{ agent?.categoryName }} • Pro模型已就绪</p>
+              </div>
+            </div>
+            <button class="close-btn" @click="handleClose">
+              <CloseOutlined />
+            </button>
+          </div>
+
+          <!-- 消息区域 -->
+          <div class="drawer-messages" ref="messagesRef">
+            <div v-if="messages.length === 0" class="welcome-message">
+              <div class="agent-avatar-large">
+                <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
+                <RobotOutlined v-else class="avatar-icon-large" />
+              </div>
+              <p class="welcome-text">{{ agent?.description || '你好呀，有什么我可以帮你的吗？' }}</p>
+            </div>
+
+            <div
+              v-for="(msg, index) in messages"
+              :key="index"
+              class="message-item"
+              :class="`message-item--${msg.role}`"
+            >
+              <!-- 智能体消息 -->
+              <template v-if="msg.role === 'assistant'">
+                <div class="agent-avatar-small msg-avatar">
+                  <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
+                  <RobotOutlined v-else class="avatar-icon" />
+                </div>
+                <div class="message-bubble message-bubble--assistant">
+                  <div v-if="msg.isPro" class="pro-tag">生成结果 (Pro版):</div>
+                  <div class="message-content" v-html="msg.content"></div>
+                  <div v-if="msg.actions" class="message-actions">
+                    <a-button size="small" @click="handleCopy(msg.content)">
+                      <template #icon><CopyOutlined /></template>
+                      复制文案
+                    </a-button>
+                    <a-button size="small" @click="handleRegenerate(index)">
+                      <template #icon><ReloadOutlined /></template>
+                      重新生成
+                    </a-button>
+                  </div>
+                </div>
+              </template>
+
+              <!-- 用户消息 -->
+              <template v-else>
+                <div class="message-bubble message-bubble--user">
+                  {{ msg.content }}
+                </div>
+                <div class="user-avatar msg-avatar">{{ userAvatar }}</div>
+              </template>
+            </div>
+
+            <!-- 加载中 -->
+            <div v-if="loading" class="message-item message-item--assistant">
+              <div class="agent-avatar-small msg-avatar">
+                <RobotOutlined v-if="!agent?.avatar" class="avatar-icon" />
+                <img v-else :src="agent?.avatar" :alt="agent?.name" />
+              </div>
+              <div class="message-bubble message-bubble--assistant">
+                <div class="typing-indicator">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 底部输入区 -->
+          <div class="drawer-footer">
+            <div class="model-selector">
+              <span class="selector-label">选择模型模式：</span>
+              <div class="model-options">
+                <button
+                  class="model-option"
+                  :class="{ 'model-option--active': modelMode === 'standard' }"
+                  @click="modelMode = 'standard'"
+                >
+                  标准版 (-10分)
+                </button>
+                <button
+                  class="model-option"
+                  :class="{ 'model-option--active': modelMode === 'pro' }"
+                  @click="modelMode = 'pro'"
+                >
+                  Pro 深度版 (-50分) <ThunderboltFilled class="pro-icon" />
+                </button>
+              </div>
+            </div>
+            <div class="input-wrapper">
+              <a-textarea
+                v-model:value="inputText"
+                class="chat-input"
+                placeholder="在这里输入你的需求，例如：帮我写一段关于..."
+                :auto-size="{ minRows: 3, maxRows: 5 }"
+                @keydown="handleKeyDown"
+              />
+              <button class="send-btn" :disabled="!inputText.trim() || loading" @click="handleSend">
+                <SendOutlined />
+              </button>
+            </div>
+            <p class="input-tip">点击发送将扣除对应积分，内容仅供参考。</p>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+import {
+  CloseOutlined,
+  RobotOutlined,
+  CopyOutlined,
+  ReloadOutlined,
+  SendOutlined,
+  ThunderboltFilled
+} from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  agent: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:visible', 'send'])
+
+// 状态
+const modelMode = ref('pro')
+const inputText = ref('')
+const loading = ref(false)
+const messages = ref([])
+const messagesRef = ref(null)
+const userAvatar = ref('王')
+
+// 方法
+const handleClose = () => {
+  emit('update:visible', false)
+}
+
+const handleOverlayClick = () => {
+  handleClose()
+}
+
+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
+  inputText.value = ''
+  loading.value = true
+
+  await scrollToBottom()
+
+  // 模拟 AI 响应
+  setTimeout(() => {
+    const assistantMessage = {
+      role: 'assistant',
+      content: generateMockResponse(question),
+      isPro: modelMode.value === 'pro',
+      actions: true
+    }
+    messages.value.push(assistantMessage)
+    loading.value = false
+    nextTick(() => scrollToBottom())
+  }, 1500)
+
+  emit('send', {
+    agentId: props.agent?.id,
+    content: question,
+    modelMode: modelMode.value
+  })
+}
+
+const handleKeyDown = (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleSend()
+  }
+}
+
+const handleCopy = (content) => {
+  navigator.clipboard.writeText(content)
+  message.success('已复制到剪贴板')
+}
+
+const handleRegenerate = (index) => {
+  // TODO: 重新生成消息
+  message.info('重新生成中...')
+}
+
+const scrollToBottom = async () => {
+  await nextTick()
+  if (messagesRef.value) {
+    messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+  }
+}
+
+const generateMockResponse = (question) => {
+  const responses = [
+    '当夜深人静的时候，我们卸下了一天的铠甲，那才是真实的自己。成年人的世界里，连崩溃都要调成静音模式。',
+    '根据您的需求，我为您生成以下内容：这是一个经过精心设计的文案，结合了情感共鸣和产品卖点。',
+    '让我帮您分析一下这个问题。首先，我们需要考虑目标受众的需求和痛点...'
+  ]
+  return responses[Math.floor(Math.random() * responses.length)]
+}
+
+// 监听 visible 变化，重置状态
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    messages.value = []
+    inputText.value = ''
+    nextTick(() => scrollToBottom())
+  }
+})
+</script>
+
+<style scoped lang="less">
+.chat-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.chat-drawer {
+  width: 500px;
+  height: 100%;
+  background: #fff;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #E2E8F0;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+
+  @media (max-width: 576px) {
+    width: 100%;
+  }
+
+  &--visible {
+    transform: translateX(0);
+  }
+}
+
+.slide-drawer-enter-active,
+.slide-drawer-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.slide-drawer-enter-from,
+.slide-drawer-leave-to {
+  opacity: 0;
+}
+
+// 头部
+.drawer-header {
+  height: 64px;
+  border-bottom: 1px solid #F1F5F9;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background: #F8FAFC;
+  flex-shrink: 0;
+}
+
+.header-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.agent-avatar-small {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.avatar-icon {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1E293B;
+  margin: 0;
+}
+
+.header-subtitle {
+  font-size: 10px;
+  color: #94A3B8;
+  margin: 0;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: #94A3B8;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #E2E8F0;
+    color: #1E293B;
+  }
+
+  .anticon {
+    font-size: 16px;
+  }
+}
+
+// 消息区域
+.drawer-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #CBD5E1;
+    border-radius: 3px;
+  }
+}
+
+.welcome-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.agent-avatar-large {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.avatar-icon-large {
+  font-size: 32px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.welcome-text {
+  font-size: 14px;
+  color: #64748B;
+  max-width: 280px;
+  line-height: 1.6;
+}
+
+.message-item {
+  display: flex;
+  gap: 12px;
+
+  &--user {
+    flex-direction: row-reverse;
+  }
+}
+
+.msg-avatar {
+  flex-shrink: 0;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #4F46E5;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  border: 2px solid #fff;
+}
+
+.message-bubble {
+  max-width: 80%;
+  padding: 12px 16px;
+  border-radius: 16px;
+  font-size: 14px;
+  line-height: 1.6;
+
+  &--assistant {
+    background: #F1F5F9;
+    color: #334155;
+    border-radius: 16px 16px 16px 4px;
+  }
+
+  &--user {
+    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
+    border-radius: 16px 16px 4px 16px;
+  }
+}
+
+.pro-tag {
+  font-size: 10px;
+  font-weight: 600;
+  color: #92400E;
+  margin-bottom: 8px;
+}
+
+.message-content {
+  white-space: pre-wrap;
+}
+
+.message-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+
+  .ant-btn {
+    height: 24px;
+    padding: 0 8px;
+    font-size: 10px;
+    border-radius: 4px;
+  }
+}
+
+// 输入打字动画
+.typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+
+  span {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #94A3B8;
+    animation: typing 1.4s infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+}
+
+@keyframes typing {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-8px);
+    opacity: 1;
+  }
+}
+
+// 底部输入区
+.drawer-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #E2E8F0;
+  background: #F8FAFC;
+  flex-shrink: 0;
+}
+
+.model-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding: 0 4px;
+}
+
+.selector-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748B;
+}
+
+.model-options {
+  display: flex;
+  background: #E2E8F0;
+  border-radius: 8px;
+  padding: 2px;
+  gap: 2px;
+}
+
+.model-option {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #64748B;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &--active {
+    background: #fff;
+    color: #7C3AED;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+}
+
+.pro-icon {
+  font-size: 10px;
+  color: #EAB308;
+}
+
+.input-wrapper {
+  position: relative;
+}
+
+.chat-input {
+  width: 100%;
+
+  :deep(.ant-input) {
+    padding-right: 44px;
+    border-radius: 12px;
+    border: 1px solid #E2E8F0;
+    font-size: 14px;
+
+    &:focus,
+    &:hover {
+      border-color: #7C3AED;
+      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
+    }
+  }
+}
+
+.send-btn {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: none;
+  background: #7C3AED;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background: #6D28D9;
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .anticon {
+    font-size: 12px;
+  }
+}
+
+.input-tip {
+  font-size: 10px;
+  color: #94A3B8;
+  text-align: center;
+  margin: 8px 0 0 0;
+}
+</style>
diff --git a/frontend/app/web-gold/src/router/index.js b/frontend/app/web-gold/src/router/index.js
index 0997c38ee6..a1d87c05f2 100644
--- a/frontend/app/web-gold/src/router/index.js
+++ b/frontend/app/web-gold/src/router/index.js
@@ -12,6 +12,7 @@ const navConfig = [
       { name: '对标分析', path: 'content-style/benchmark', icon: 'grid', component: () => import('../views/content-style/Benchmark.vue') },
       { name: '文案创作', path: 'content-style/copywriting', icon: 'text', component: () => import('../views/content-style/Copywriting.vue') },
       { name: '热点趋势', path: 'trends/forecast', icon: 'text', component: () => import('../views/trends/Forecast.vue') },
+      { name: '智能体', path: 'agents', icon: 'robot', component: () => import('../views/agents/Agents.vue') },
     ]
   },
   {
@@ -51,7 +52,8 @@ const navIcons = {
   user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a8.38 8.38 0 0 1 13 0"/></svg>',
   video: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2" ry="2"/></svg>',
   folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>',
-  scissors: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.59 13.51 15.42 17.49"/><path d="M15.41 6.51 8.59 10.49"/></svg>'
+  scissors: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.59 13.51 15.42 17.49"/><path d="M15.41 6.51 8.59 10.49"/></svg>',
+  robot: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>'
 }
 
 // ============ 辅助函数 ============
diff --git a/frontend/app/web-gold/src/views/agents/Agents.vue b/frontend/app/web-gold/src/views/agents/Agents.vue
new file mode 100644
index 0000000000..03c167065b
--- /dev/null
+++ b/frontend/app/web-gold/src/views/agents/Agents.vue
@@ -0,0 +1,674 @@
+<template>
+  <FullWidthLayout :show-padding="false" class="agents-layout">
+    <div class="agents-container">
+      <!-- 筛选器区域 -->
+      <aside class="agents-sidebar">
+        <div class="sidebar-content">
+          <h3 class="sidebar-title">领域分类</h3>
+          <nav class="category-nav">
+            <button
+              v-for="category in categories"
+              :key="category.id"
+              class="category-btn"
+              :class="{ 'category-btn--active': activeCategory === category.id }"
+              @click="handleCategoryChange(category.id)"
+            >
+              <span>{{ category.name }}</span>
+              <span class="category-count">{{ category.count }}</span>
+            </button>
+          </nav>
+        </div>
+      </aside>
+
+      <!-- 主内容区域 -->
+      <main class="agents-main">
+        <!-- 搜索栏 -->
+        <div class="search-bar">
+          <div class="search-input-wrapper">
+            <SearchOutlined class="search-icon" />
+            <input
+              v-model="searchKeyword"
+              type="text"
+              placeholder="搜索智能体风格，如：文案、数据分析..."
+              class="search-input"
+              @keydown.enter="handleSearch"
+            />
+            <CloseOutlined v-if="searchKeyword" class="search-clear" @click="searchKeyword = ''; handleSearch()" />
+          </div>
+          <div class="sort-info">
+            排序：<span class="sort-active">热度 <i class="icon-arrow-down"></i></span>
+          </div>
+        </div>
+
+        <!-- 智能体卡片网格 -->
+        <div class="agents-content">
+          <a-spin :spinning="loading" tip="加载中...">
+            <template v-if="agentList.length > 0">
+              <div class="agents-grid">
+                <div
+                  v-for="agent in agentList"
+                  :key="agent.id"
+                  class="agent-card"
+                  @click="handleAgentClick(agent)"
+                >
+                  <!-- 头部：头像 + 标签 -->
+                  <div class="card-header">
+                    <div class="agent-avatar">
+                      <img v-if="agent.avatar" :src="agent.avatar" :alt="agent.name" />
+                      <RobotOutlined v-else class="avatar-placeholder" />
+                    </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">🔥 {{ formatNumber(agent.usage) }}+ 使用</span>
+                    <button class="chat-btn" @click.stop="handleChat(agent)">
+                      开始对话
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </template>
+            <a-empty v-else description="暂无智能体" />
+          </a-spin>
+
+          <!-- 分页 -->
+          <div v-if="agentList.length > 0" class="pagination-wrapper">
+            <a-pagination
+              v-model:current="pagination.current"
+              v-model:page-size="pagination.pageSize"
+              :total="pagination.total"
+              :show-size-changer="true"
+              :show-quick-jumper="true"
+              :show-total="(total) => `共 ${total} 个智能体`"
+              @change="handlePageChange"
+            />
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <!-- 对话抽屉 -->
+    <ChatDrawer
+      v-model:visible="chatDrawerVisible"
+      :agent="currentAgent"
+      @send="handleSendMessage"
+    />
+  </FullWidthLayout>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import {
+  SearchOutlined,
+  RobotOutlined,
+  CloseOutlined
+} from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
+import ChatDrawer from '@/components/agents/ChatDrawer.vue'
+
+// 状态管理
+const loading = ref(false)
+const activeCategory = ref('all')
+const searchKeyword = ref('')
+const chatDrawerVisible = ref(false)
+const currentAgent = ref(null)
+
+// 分类数据
+const categories = ref([
+  { id: 'all', name: '全部智能体', count: 0 },
+  { id: 'writing', name: '文案创作', count: 0 },
+  { id: 'analysis', name: '数据分析', count: 0 },
+  { id: 'coding', name: '代码助手', count: 0 },
+  { id: 'design', name: '设计创作', count: 0 },
+  { id: 'education', name: '教育学习', count: 0 }
+])
+
+// 智能体列表数据
+const agentList = ref([
+  {
+    id: 1,
+    name: '文案写作助手',
+    description: '专业的内容创作智能体，帮助您撰写各类文案，包括广告语、产品介绍、营销文案等。',
+    avatar: '',
+    categoryId: 'writing',
+    categoryName: '文案创作',
+    tagColor: 'blue',
+    usage: 12580
+  },
+  {
+    id: 2,
+    name: '数据分析专家',
+    description: '强大的数据分析工具，支持多种数据格式，提供专业的数据洞察和可视化建议。',
+    avatar: '',
+    categoryId: 'analysis',
+    categoryName: '数据分析',
+    tagColor: 'green',
+    usage: 8920
+  },
+  {
+    id: 3,
+    name: '代码生成器',
+    description: '智能代码生成工具，支持多种编程语言，提高开发效率，减少重复工作。',
+    avatar: '',
+    categoryId: 'coding',
+    categoryName: '代码助手',
+    tagColor: 'purple',
+    usage: 15230
+  },
+  {
+    id: 4,
+    name: '海报设计助手',
+    description: '专业的海报设计工具，提供丰富的模板和设计建议，轻松制作精美海报。',
+    avatar: '',
+    categoryId: 'design',
+    categoryName: '设计创作',
+    tagColor: 'pink',
+    usage: 6750
+  },
+  {
+    id: 5,
+    name: '英语学习伙伴',
+    description: '个性化英语学习助手，提供口语练习、语法讲解、词汇积累等功能。',
+    avatar: '',
+    categoryId: 'education',
+    categoryName: '教育学习',
+    tagColor: 'amber',
+    usage: 9840
+  },
+  {
+    id: 6,
+    name: '短视频脚本',
+    description: '专业的短视频脚本创作工具，支持多种视频类型，助您打造爆款内容。',
+    avatar: '',
+    categoryId: 'writing',
+    categoryName: '文案创作',
+    tagColor: 'blue',
+    usage: 7680
+  }
+])
+
+// 分页
+const pagination = reactive({
+  current: 1,
+  pageSize: 12,
+  total: 0
+})
+
+// 方法
+const handleCategoryChange = (categoryId) => {
+  activeCategory.value = categoryId
+  pagination.current = 1
+  loadAgentList()
+}
+
+const handleSearch = () => {
+  pagination.current = 1
+  loadAgentList()
+}
+
+const handlePageChange = (page) => {
+  pagination.current = page
+  loadAgentList()
+}
+
+const handleAgentClick = (agent) => {
+  console.log('查看智能体详情:', agent)
+  // TODO: 跳转到智能体详情页
+}
+
+const handleChat = (agent) => {
+  currentAgent.value = agent
+  chatDrawerVisible.value = true
+}
+
+const handleSendMessage = (data) => {
+  console.log('发送消息:', data)
+  // TODO: 调用 API 发送消息
+}
+
+const formatNumber = (num) => {
+  if (num >= 10000) {
+    return (num / 10000).toFixed(0) + 'w'
+  }
+  return (num / 1000).toFixed(1) + 'w'
+}
+
+const loadAgentList = async () => {
+  loading.value = true
+  try {
+    // TODO: 调用 API 获取数据
+    // 模拟筛选
+    let filteredList = agentList.value
+    if (activeCategory.value !== 'all') {
+      filteredList = agentList.value.filter(a => a.categoryId === activeCategory.value)
+    }
+    if (searchKeyword.value) {
+      filteredList = filteredList.filter(a =>
+        a.name.includes(searchKeyword.value) || a.description.includes(searchKeyword.value)
+      )
+    }
+    pagination.total = filteredList.length
+  } catch (error) {
+    console.error('加载智能体列表失败:', error)
+    message.error('加载失败，请重试')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 初始化
+onMounted(() => {
+  // 更新分类数量
+  categories.value.forEach(cat => {
+    if (cat.id === 'all') {
+      cat.count = agentList.value.length
+    } else {
+      cat.count = agentList.value.filter(a => a.categoryId === cat.id).length
+    }
+  })
+  pagination.total = agentList.value.length
+})
+</script>
+
+<style scoped lang="less">
+.agents-layout {
+  height: 100%;
+}
+
+.agents-container {
+  display: flex;
+  height: 100%;
+  background: #F8FAFC;
+}
+
+// 侧边栏
+.agents-sidebar {
+  width: 260px;
+  background: #fff;
+  border-right: 1px solid #E2E8F0;
+  flex-shrink: 0;
+  padding: 20px;
+}
+
+.sidebar-content {
+  position: sticky;
+  top: 0;
+}
+
+.sidebar-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: #94A3B8;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 0 0 12px 0;
+}
+
+.category-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.category-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #64748B;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+  width: 100%;
+
+  &:hover {
+    background: #F1F5F9;
+    color: #334155;
+  }
+
+  &--active {
+    background: #EFF6FF;
+    color: #1D4ED8;
+    font-weight: 600;
+  }
+}
+
+.category-count {
+  font-size: 10px;
+  background: #E2E8F0;
+  color: #64748B;
+  padding: 2px 6px;
+  border-radius: 12px;
+  font-weight: 500;
+
+  .category-btn--active & {
+    background: #BFDBFE;
+    color: #1E40AF;
+  }
+}
+
+// 主内容区域
+.agents-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #F8FAFC;
+}
+
+.search-bar {
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  flex-shrink: 0;
+  background: #fff;
+  border-bottom: 1px solid #F1F5F9;
+  margin: 0 12px;
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 16px;
+    gap: 12px;
+  }
+}
+
+.search-input-wrapper {
+  position: relative;
+  width: 380px;
+  max-width: 100%;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}
+
+.search-icon {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94A3B8;
+  font-size: 14px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.search-clear {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94A3B8;
+  font-size: 12px;
+  cursor: pointer;
+  z-index: 2;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #64748B;
+  }
+}
+
+.search-input {
+  width: 100%;
+  height: 42px;
+  padding: 0 40px 0 42px;
+  border: 1px solid #E2E8F0;
+  border-radius: 10px;
+  font-size: 14px;
+  color: #1E293B;
+  background: #fff;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &::placeholder {
+    color: #94A3B8;
+  }
+
+  &:focus {
+    border-color: #3B82F6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  &:hover {
+    border-color: #CBD5E1;
+  }
+}
+
+.sort-info {
+  font-size: 12px;
+  color: #94A3B8;
+  white-space: nowrap;
+}
+
+.sort-active {
+  font-weight: 600;
+  color: #1E293B;
+  cursor: pointer;
+}
+
+.icon-arrow-down {
+  display: inline-block;
+  font-size: 10px;
+  margin-left: 2px;
+}
+
+// 智能体内容区域
+.agents-content {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+
+  @media (max-width: 768px) {
+    padding: 16px;
+  }
+}
+
+.agents-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// 智能体卡片
+.agent-card {
+  background: #fff;
+  border: 1px solid #E2E8F0;
+  border-radius: 12px;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+
+  &:hover {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
+    border-color: #93C5FD;
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.agent-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.avatar-placeholder {
+  font-size: 24px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.agent-tag {
+  font-size: 10px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-weight: 600;
+  border: 1px solid;
+
+  &--blue {
+    background: #EFF6FF;
+    color: #1D4ED8;
+    border-color: #BFDBFE;
+  }
+
+  &--green {
+    background: #F0FDF4;
+    color: #16A34A;
+    border-color: #BBF7D0;
+  }
+
+  &--purple {
+    background: #FAF5FF;
+    color: #9333EA;
+    border-color: #E9D5FF;
+  }
+
+  &--pink {
+    background: #FDF2F8;
+    color: #DB2777;
+    border-color: #FBCFE8;
+  }
+
+  &--amber {
+    background: #FFFBEB;
+    color: #D97706;
+    border-color: #FDE68A;
+  }
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1E293B;
+  margin: 0 0 6px 0;
+}
+
+.card-description {
+  font-size: 12px;
+  color: #64748B;
+  margin: 0 0 16px 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.5;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.usage-count {
+  font-size: 10px;
+  color: #94A3B8;
+}
+
+.chat-btn {
+  background: #F1F5F9;
+  color: #64748B;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .agent-card:hover & {
+    background: #3B82F6;
+    color: #fff;
+  }
+}
+
+// 分页
+.pagination-wrapper {
+  padding-top: 24px;
+  display: flex;
+  justify-content: center;
+
+  :deep(.ant-pagination) {
+    .ant-pagination-item {
+      border-radius: 6px;
+      border-color: #E2E8F0;
+
+      a {
+        color: #64748B;
+      }
+
+      &:hover {
+        border-color: #3B82F6;
+
+        a {
+          color: #3B82F6;
+        }
+      }
+
+      &-active {
+        background: #3B82F6;
+        border-color: #3B82F6;
+
+        a {
+          color: #fff;
+        }
+      }
+    }
+
+    .ant-pagination-prev,
+    .ant-pagination-next {
+      .ant-pagination-item-link {
+        border-radius: 6px;
+        border-color: #E2E8F0;
+
+        &:hover {
+          border-color: #3B82F6;
+          color: #3B82F6;
+        }
+      }
+    }
+  }
+}
+</style>