From 108d75516601b63490afb572628310e8fdc0aea9 Mon Sep 17 00:00:00 2001
From: Hanserwei <2628273921@qq.com>
Date: Wed, 22 Oct 2025 20:07:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue              |  14 +-
 src/router/index.ts      |   8 +-
 src/views/AiChatPage.vue | 516 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 536 insertions(+), 2 deletions(-)
 create mode 100644 src/views/AiChatPage.vue

diff --git a/src/App.vue b/src/App.vue
index 1a3d812..3f2b2b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,4 +7,16 @@ import { RouterView } from 'vue-router'
   <RouterView />
 </template>
 
-<style scoped></style>
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+#app {
+  height: 100vh;
+  width: 100vw;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index e1eab52..9019894 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,7 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes: [
+    {
+      path: '/',
+      name: 'aiChatPage',
+      component: () => import('../views/AiChatPage.vue'),
+    },
+  ],
 })
 
 export default router
diff --git a/src/views/AiChatPage.vue b/src/views/AiChatPage.vue
new file mode 100644
index 0000000..a9a98d9
--- /dev/null
+++ b/src/views/AiChatPage.vue
@@ -0,0 +1,516 @@
+<script setup lang="ts">
+import type {
+  AttachmentsProps,
+  BubbleListProps,
+  ConversationsProps,
+  PromptsProps,
+} from 'ant-design-x-vue'
+import type { VNode } from 'vue'
+import {
+  CloudUploadOutlined,
+  CommentOutlined,
+  EllipsisOutlined,
+  FireOutlined,
+  HeartOutlined,
+  PaperClipOutlined,
+  PlusOutlined,
+  ReadOutlined,
+  ShareAltOutlined,
+  SmileOutlined,
+} from '@ant-design/icons-vue'
+import { Badge, Button, Flex, Space, Typography, theme } from 'ant-design-vue'
+import {
+  Attachments,
+  Bubble,
+  Conversations,
+  Prompts,
+  Sender,
+  Welcome,
+} from 'ant-design-x-vue'
+import { computed, h, ref, watch } from 'vue'
+
+const { token } = theme.useToken()
+
+const styles = computed(() => {
+  return {
+    layout: {
+      width: '100vw',
+      height: '100vh',
+      'border-radius': '0',
+      display: 'flex',
+      background: `${token.value.colorBgContainer}`,
+      'font-family': `AlibabaPuHuiTi, ${token.value.fontFamily}, sans-serif`,
+    },
+    menu: {
+      background: `${token.value.colorBgLayout}80`,
+      width: '280px',
+      height: '100%',
+      display: 'flex',
+      'flex-direction': 'column',
+    },
+    conversations: {
+      padding: '0 12px',
+      flex: 1,
+      'overflow-y': 'auto',
+    },
+    chat: {
+      height: '100%',
+      width: '100%',
+      'max-width': '1300px',
+      margin: '0 auto',
+      'box-sizing': 'border-box',
+      display: 'flex',
+      'flex-direction': 'column',
+      padding: `${token.value.paddingLG}px`,
+      gap: '16px',
+    },
+    messages: {
+      flex: 1,
+    },
+    placeholder: {
+      'padding-top': '32px',
+      'text-align': 'left',
+      flex: 1,
+    },
+    sender: {
+      'box-shadow': token.value.boxShadow,
+    },
+    logo: {
+      display: 'flex',
+      height: '72px',
+      'align-items': 'center',
+      'justify-content': 'start',
+      padding: '0 24px',
+      'box-sizing': 'border-box',
+    },
+    'logo-img': {
+      width: '24px',
+      height: '24px',
+      display: 'inline-block',
+    },
+    'logo-span': {
+      display: 'inline-block',
+      margin: '0 8px',
+      'font-weight': 'bold',
+      color: token.value.colorText,
+      'font-size': '16px',
+    },
+    addBtn: {
+      background: '#1677ff0f',
+      border: '1px solid #1677ff34',
+      width: 'calc(100% - 24px)',
+      margin: '0 12px 24px 12px',
+    },
+  } as const
+})
+
+defineOptions({ name: 'PlaygroundIndependentSetup' })
+
+function renderTitle(icon: VNode, title: string) {
+  return h(Space, { align: 'start' }, () => [icon, h('span', title)])
+}
+
+// 对话列表记录
+const defaultConversationsItems = [
+  {
+    key: '0',
+    label: '什么是Ant Design X Vue?',
+  },
+]
+
+// 提示集列表记录
+const placeholderPromptsItems: PromptsProps['items'] = [
+  {
+    key: '1',
+    label: renderTitle(h(FireOutlined, { style: { color: '#FF4D4F' } }), '热门话题'),
+    description: '你感兴趣的话题是什么？',
+    children: [
+      {
+        key: '1-1',
+        description: `X的新功能是什么？`,
+      },
+      {
+        key: '1-2',
+        description: `什么是AGI？`,
+      },
+      {
+        key: '1-3',
+        description: `文档在哪里？`,
+      },
+    ],
+  },
+  {
+    key: '2',
+    label: renderTitle(h(ReadOutlined, { style: { color: '#1890FF' } }), '设计指南'),
+    description: '如何设计一个好的产品？',
+    children: [
+      {
+        key: '2-1',
+        icon: h(HeartOutlined),
+        description: `知道它的好处`,
+      },
+      {
+        key: '2-2',
+        icon: h(SmileOutlined),
+        description: `给AI设定一个角色`,
+      },
+      {
+        key: '2-3',
+        icon: h(CommentOutlined),
+        description: `表达感受`,
+      },
+    ],
+  },
+]
+
+const senderPromptsItems: PromptsProps['items'] = [
+  {
+    key: '1',
+    description: '热点话题',
+    icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
+  },
+  {
+    key: '2',
+    description: '设计指南',
+    icon: h(ReadOutlined, { style: { color: '#1890FF' } }),
+  },
+]
+
+const roles: BubbleListProps['roles'] = {
+  ai: {
+    placement: 'start',
+    typing: false, // 禁用打字机动画，使用后端流式显示
+    styles: {
+      content: {
+        borderRadius: '16px',
+      },
+    },
+  },
+  local: {
+    placement: 'end',
+    variant: 'shadow',
+  },
+}
+
+// ==================== State ====================
+const headerOpen = ref(false)
+const content = ref('')
+const conversationsItems = ref(defaultConversationsItems)
+const activeKey = ref(defaultConversationsItems[0]?.key)
+const attachedFiles = ref<AttachmentsProps['items']>([])
+const agentRequestLoading = ref(false)
+
+// 消息列表
+interface Message {
+  id: string
+  role: 'user' | 'ai'
+  content: string
+  status: 'loading' | 'success' | 'error'
+}
+
+const messages = ref<Message[]>([])
+let messageIdCounter = 0
+
+// ==================== Runtime ====================
+async function sendMessage(userMessage: string) {
+  console.log('📝 [Submit] 用户提交消息:', userMessage)
+  if (!userMessage) return
+
+  // 添加用户消息
+  const userMsg: Message = {
+    id: `user_${messageIdCounter++}`,
+    role: 'user',
+    content: userMessage,
+    status: 'success',
+  }
+  messages.value.push(userMsg)
+
+  // 添加 AI 消息占位符
+  const aiMsg: Message = {
+    id: `ai_${messageIdCounter++}`,
+    role: 'ai',
+    content: '',
+    status: 'loading',
+  }
+  messages.value.push(aiMsg)
+  const aiMsgIndex = messages.value.length - 1
+
+  agentRequestLoading.value = true
+
+  try {
+    const convId = parseInt(activeKey.value || '0')
+    const requestBody = {
+      message: userMessage,
+      conversionId: convId,
+    }
+    console.log('📤 [Request] 请求体:', JSON.stringify(requestBody, null, 2))
+
+    // 调用后端接口
+    const response = await fetch('http://localhost:8080/dashscope/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    })
+
+    console.log('📥 [Response] 响应状态:', response.status, response.statusText)
+
+    if (!response.ok) {
+      throw new Error(`请求失败: ${response.status} ${response.statusText}`)
+    }
+
+    // 处理 SSE 流式响应
+    if (response.body) {
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      console.log('🌊 [Stream] 开始读取流数据...')
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read()
+
+          if (done) {
+            console.log('✅ [Stream] 流读取完成')
+            const msg = messages.value[aiMsgIndex]
+            if (msg) {
+              msg.status = 'success'
+            }
+            break
+          }
+
+          // 解码数据
+          const text = decoder.decode(value, { stream: true })
+          buffer += text
+          console.log('📦 [Stream] 收到原始数据:', text)
+
+          // 解析 SSE 格式: data: content\n\n
+          const lines = buffer.split('\n\n')
+
+          // 保留最后一个可能不完整的块
+          if (!text.endsWith('\n\n')) {
+            buffer = lines.pop() || ''
+          } else {
+            buffer = ''
+          }
+
+          for (const block of lines) {
+            if (block.startsWith('data:')) {
+              // 提取 data: 后面的内容
+              const content = block.substring(5)
+              console.log('✨ [Parse] 解析后的内容:', JSON.stringify(content))
+
+              // 直接累积到消息内容
+              const msg = messages.value[aiMsgIndex]
+              if (msg) {
+                msg.content += content
+                console.log('🔄 [Update] 更新消息, 当前长度:', msg.content.length)
+              }
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock()
+      }
+    }
+  } catch (error) {
+    console.error('❌ [Error] 请求错误:', error)
+    const msg = messages.value[aiMsgIndex]
+    if (msg) {
+      msg.status = 'error'
+      msg.content = '抱歉，发生了错误，请稍后重试。'
+    }
+  } finally {
+    agentRequestLoading.value = false
+  }
+}
+
+watch(
+  activeKey,
+  () => {
+    if (activeKey.value !== undefined) {
+      console.log('🔄 [Conversation] 切换会话:', activeKey.value)
+      messages.value = []
+    }
+  },
+  { immediate: true },
+)
+
+// ==================== Event ====================
+function onSubmit(nextContent: string) {
+  if (!nextContent) return
+  sendMessage(nextContent)
+  content.value = ''
+}
+
+const onPromptsItemClick: PromptsProps['onItemClick'] = (info) => {
+  sendMessage(info.data.description as string)
+}
+
+function onAddConversation() {
+  conversationsItems.value = [
+    ...conversationsItems.value,
+    {
+      key: `${conversationsItems.value.length}`,
+      label: `New Conversation ${conversationsItems.value.length}`,
+    },
+  ]
+  activeKey.value = `${conversationsItems.value.length}`
+}
+
+const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
+  activeKey.value = key
+}
+
+const handleFileChange: AttachmentsProps['onChange'] = (info) =>
+  (attachedFiles.value = info.fileList)
+
+// ==================== Nodes ====================
+const placeholderNode = computed(() =>
+  h(Space, { direction: 'vertical', size: 16, style: styles.value.placeholder }, () => [
+    h(Welcome, {
+      variant: 'borderless',
+      icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
+      title: "Hello, I'm Ant Design X",
+      description: '基于Ant Design，AGI产品界面解决方案，创造更美好的智能愿景~',
+      extra: h(Space, {}, () => [
+        h(Button, { icon: h(ShareAltOutlined) }),
+        h(Button, { icon: h(EllipsisOutlined) }),
+      ]),
+    }),
+    h(Prompts, {
+      title: '想要了是吧?',
+      items: placeholderPromptsItems,
+      styles: {
+        list: {
+          width: '100%',
+        },
+        item: {
+          flex: 1,
+        },
+      },
+      onItemClick: onPromptsItemClick,
+    }),
+  ]),
+)
+
+const items = computed<BubbleListProps['items']>(() => {
+  console.log('🎨 [Items] 计算 items, messages数量:', messages.value.length)
+
+  if (messages.value.length === 0) {
+    console.log('🎨 [Items] 显示占位符')
+    return [{ content: placeholderNode, variant: 'borderless' }]
+  }
+
+  const result = messages.value.map(({ id, role, content, status }) => {
+    console.log('🎨 [Items] 处理消息:', { id, role, status, contentLength: content?.length })
+    return {
+      key: id,
+      loading: status === 'loading',
+      role: role === 'user' ? 'local' : 'ai',
+      content: content,
+    }
+  })
+
+  console.log('🎨 [Items] 最终 items:', result)
+  return result
+})
+</script>
+
+<template>
+  <div :style="styles.layout">
+    <div :style="styles.menu">
+      <!-- 🌟 Logo -->
+      <div :style="styles.logo">
+        <img
+          src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"
+          draggable="false"
+          alt="logo"
+          :style="styles['logo-img']"
+        />
+        <span :style="styles['logo-span']">Ant Design X Vue</span>
+      </div>
+
+      <!-- 🌟 添加会话 -->
+      <Button type="link" :style="styles.addBtn" @click="onAddConversation">
+        <PlusOutlined />
+        New Conversation
+      </Button>
+
+      <!-- 🌟 会话管理 -->
+      <Conversations
+        :items="conversationsItems"
+        :style="styles.conversations"
+        :active-key="activeKey"
+        @active-change="onConversationClick"
+      />
+    </div>
+
+    <div :style="styles.chat">
+      <!-- 🌟 消息列表 -->
+      <Bubble.List :items="items" :roles="roles" :style="styles.messages" />
+
+      <!-- 🌟 提示词 -->
+      <Prompts :items="senderPromptsItems" @item-click="onPromptsItemClick" />
+
+      <!-- 🌟 输入框 -->
+      <Sender
+        :value="content"
+        :style="styles.sender"
+        :loading="agentRequestLoading"
+        @submit="onSubmit"
+        @change="(value) => (content = value)"
+      >
+        <template #prefix>
+          <Badge :dot="(attachedFiles?.length ?? 0) > 0 && !headerOpen">
+            <Button type="text" @click="() => (headerOpen = !headerOpen)">
+              <template #icon>
+                <PaperClipOutlined />
+              </template>
+            </Button>
+          </Badge>
+        </template>
+
+        <template #header>
+          <Sender.Header
+            title="Attachments"
+            :open="headerOpen"
+            :styles="{ content: { padding: 0 } }"
+            @open-change="(open) => (headerOpen = open)"
+          >
+            <Attachments
+              :before-upload="() => false"
+              :items="attachedFiles"
+              @change="handleFileChange"
+            >
+              <template #placeholder="type">
+                <Flex
+                  v-if="type && type.type === 'inline'"
+                  align="center"
+                  justify="center"
+                  vertical
+                  gap="2"
+                >
+                  <Typography.Text style="font-size: 30px; line-height: 1">
+                    <CloudUploadOutlined />
+                  </Typography.Text>
+                  <Typography.Title :level="5" style="margin: 0; font-size: 14px; line-height: 1.5">
+                    Upload files
+                  </Typography.Title>
+                  <Typography.Text type="secondary">
+                    Click or drag files to this area to upload
+                  </Typography.Text>
+                </Flex>
+                <Typography.Text v-if="type && type.type === 'drop'">
+                  Drop file here
+                </Typography.Text>
+              </template>
+            </Attachments>
+          </Sender.Header>
+        </template>
+      </Sender>
+    </div>
+  </div>
+</template>