From e6cf93006235d1567b0b988a7063893d2efb4d55 Mon Sep 17 00:00:00 2001
From: Codewoc <947380458@qq.com>
Date: Mon, 23 Mar 2026 22:50:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(review-ai):=20=E5=B9=B3=E6=9D=BF=20AI=20?=
 =?UTF-8?q?=E5=8A=A9=E6=89=8B=E9=9D=A2=E6=9D=BF=20MVP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增功能：
- src/api/review/ai.ts：5 个 AI API（摘要、重建、会话、流式问答、清空）
- 平板页右侧 AI 助手面板（toggleable 抽屉，三栏布局）
  - 摘要状态卡片：未生成/生成中（轮询4s）/已完成/失败
  - 结构化摘要展示：概述/目标/范围/计划/预算/来源文件
  - 共享问答区：历史消息加载 + 流式生成气泡
  - 4个快捷问题按钮
  - 停止生成 / 清空当前项目问答 按钮
  - 回车快捷发送

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 src/api/review/ai.ts              |  99 ++++
 src/views/review/tablet/index.vue | 816 ++++++++++++++++++++++--------
 2 files changed, 701 insertions(+), 214 deletions(-)
 create mode 100644 src/api/review/ai.ts

diff --git a/src/api/review/ai.ts b/src/api/review/ai.ts
new file mode 100644
index 000000000..596715e28
--- /dev/null
+++ b/src/api/review/ai.ts
@@ -0,0 +1,99 @@
+import request from '@/config/axios'
+import { fetchEventSource } from '@microsoft/fetch-event-source'
+import { getAccessToken } from '@/utils/auth'
+import { config } from '@/config/axios/config'
+
+// ============================================================
+// 类型定义
+// ============================================================
+
+export const AI_SUMMARY_STATUS = {
+  NOT_BUILT: 0,
+  BUILDING: 1,
+  SUCCESS: 2,
+  FAILED: 3
+} as const
+
+export interface ReviewAiSummaryVO {
+  reviewMeetingProjectId: number
+  status: number
+  statusName: string
+  updatedTime: string | null
+  summaryMarkdown: string | null
+  sourceFileIds: number[]
+  errorMessage: string | null
+  summary: {
+    projectOverview: string
+    businessGoal: string
+    constructionScope: string
+    implementationPlan: string
+    budgetInfo: string
+    keyEntities: string[]
+    readingGuide: string[]
+    sourceFiles: string[]
+  } | null
+}
+
+export interface ReviewAiConversationVO {
+  conversationId: number
+  title: string
+  knowledgeId: number
+}
+
+// ============================================================
+// API 调用
+// ============================================================
+
+/** 获取评审项目 AI 摘要 */
+export const getProjectAiSummary = (reviewMeetingProjectId: number): Promise<ReviewAiSummaryVO> =>
+  request.get({ url: `/project/review-ai/project/${reviewMeetingProjectId}/summary` })
+
+/** 触发重建 AI 摘要（管理端） */
+export const rebuildProjectAiSummary = (reviewMeetingProjectId: number) =>
+  request.post({ url: `/project/review-ai/project/${reviewMeetingProjectId}/rebuild` })
+
+/** 打开 / 获取当前项目共享会话 */
+export const openProjectAiConversation = (
+  reviewMeetingProjectId: number
+): Promise<ReviewAiConversationVO> =>
+  request.post({ url: `/project/review-ai/project/${reviewMeetingProjectId}/conversation/open` })
+
+/** 清空当前项目共享会话消息 */
+export const clearProjectAiMessages = (reviewMeetingProjectId: number) =>
+  request.delete({ url: `/project/review-ai/project/${reviewMeetingProjectId}/chat/messages` })
+
+/**
+ * 流式发送评审项目 AI 消息
+ * 使用 fetchEventSource（axios 不支持 SSE）
+ */
+export const sendProjectAiChatStream = (
+  reviewMeetingProjectId: number,
+  conversationId: number,
+  content: string,
+  ctrl: AbortController,
+  onMessage: (event: any) => void,
+  onError: (error: any) => void,
+  onClose: () => void
+) => {
+  const token = getAccessToken()
+  return fetchEventSource(
+    `${config.base_url}/project/review-ai/project/${reviewMeetingProjectId}/chat/send-stream`,
+    {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
+      },
+      openWhenHidden: true,
+      body: JSON.stringify({
+        conversationId,
+        content,
+        useContext: true
+      }),
+      onmessage: onMessage,
+      onerror: onError,
+      onclose: onClose,
+      signal: ctrl.signal
+    }
+  )
+}
diff --git a/src/views/review/tablet/index.vue b/src/views/review/tablet/index.vue
index 4440a04c1..284f2280c 100644
--- a/src/views/review/tablet/index.vue
+++ b/src/views/review/tablet/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="tablet-full-page" v-loading="pageLoading">
+    <!-- ── 顶部工具栏 ── -->
     <header class="page-toolbar">
       <div class="title-wrap">
         <h2>专家评审资料</h2>
@@ -16,7 +17,10 @@
       </div>
     </header>
 
-    <div class="page-body">
+    <!-- ── 主体三栏 ── -->
+    <div class="page-body" :class="{ 'ai-open': aiPanelOpen && !!activeProjectId }">
+
+      <!-- 左：项目目录 -->
       <aside class="directory-panel">
         <div class="panel-title">项目目录</div>
         <el-empty v-if="treeData.length === 0" description="当前时段暂无可查看资料" />
@@ -54,6 +58,7 @@
         </el-tree>
       </aside>
 
+      <!-- 中：资料预览 -->
       <section class="preview-panel">
         <div class="preview-header">
           <div class="preview-meta">
@@ -70,6 +75,14 @@
             >
               新窗口打开
             </el-button>
+            <!-- AI 助手开关 -->
+            <el-button
+              v-if="activeProjectId"
+              :type="aiPanelOpen ? 'primary' : 'default'"
+              @click="toggleAiPanel"
+            >
+              🤖 AI 助手
+            </el-button>
           </div>
         </div>
 
@@ -93,14 +106,166 @@
           ></iframe>
         </div>
       </section>
+
+      <!-- 右：AI 助手面板 -->
+      <aside v-if="aiPanelOpen && activeProjectId" class="ai-panel">
+        <!-- 面板头部 -->
+        <div class="ai-header">
+          <div class="ai-header-left">
+            <span class="ai-title">🤖 AI 助手</span>
+            <span
+              class="ai-status-badge"
+              :class="`status-${aiSummary?.status ?? 0}`"
+            >{{ aiSummary?.statusName ?? '未生成' }}</span>
+          </div>
+          <div class="ai-header-right">
+            <el-tooltip content="清空当前项目问答记录" placement="top">
+              <el-button
+                size="small"
+                text
+                :disabled="!aiConversationId || aiChatLoading"
+                @click="handleClearMessages"
+              >清空对话</el-button>
+            </el-tooltip>
+            <el-button size="small" text @click="aiPanelOpen = false">✕</el-button>
+          </div>
+        </div>
+
+        <!-- 摘要区 -->
+        <div class="ai-summary-wrap" v-loading="aiSummaryLoading">
+          <!-- 未生成 -->
+          <div v-if="!aiSummary || aiSummary.status === 0" class="ai-summary-empty">
+            <el-icon><InfoFilled /></el-icon>
+            <span>当前项目尚未生成 AI 摘要，请上传资料后自动触发生成</span>
+          </div>
+          <!-- 生成中 -->
+          <div v-else-if="aiSummary.status === 1" class="ai-summary-building">
+            <el-icon class="is-loading"><Loading /></el-icon>
+            <span>AI 摘要生成中，请稍候…</span>
+          </div>
+          <!-- 失败 -->
+          <div v-else-if="aiSummary.status === 3" class="ai-summary-failed">
+            <el-icon><WarningFilled /></el-icon>
+            <span>摘要生成失败：{{ aiSummary.errorMessage || '未知错误' }}</span>
+          </div>
+          <!-- 已完成 -->
+          <div v-else-if="aiSummary.status === 2 && aiSummary.summary" class="ai-summary-card">
+            <div class="summary-updated">
+              最后更新：{{ aiSummary.updatedTime ? formatDate(new Date(aiSummary.updatedTime), 'YYYY-MM-DD HH:mm') : '-' }}
+            </div>
+            <div class="summary-field">
+              <span class="field-label">项目概述</span>
+              <span class="field-value">{{ aiSummary.summary.projectOverview }}</span>
+            </div>
+            <div class="summary-field">
+              <span class="field-label">建设目标</span>
+              <span class="field-value">{{ aiSummary.summary.businessGoal }}</span>
+            </div>
+            <div class="summary-field">
+              <span class="field-label">建设范围</span>
+              <span class="field-value">{{ aiSummary.summary.constructionScope }}</span>
+            </div>
+            <div class="summary-field">
+              <span class="field-label">实施计划</span>
+              <span class="field-value">{{ aiSummary.summary.implementationPlan }}</span>
+            </div>
+            <div class="summary-field">
+              <span class="field-label">预算信息</span>
+              <span class="field-value">{{ aiSummary.summary.budgetInfo }}</span>
+            </div>
+            <div v-if="aiSummary.summary.sourceFiles?.length" class="summary-field">
+              <span class="field-label">来源文件</span>
+              <span class="field-value">{{ aiSummary.summary.sourceFiles.join('；') }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 分隔线 -->
+        <div class="ai-divider" v-if="aiConversationId || aiSummary?.status === 2" />
+
+        <!-- 对话区（仅摘要 SUCCESS 后才能对话） -->
+        <template v-if="aiSummary?.status === 2">
+          <!-- 消息列表 -->
+          <div class="ai-messages" ref="aiMessagesRef">
+            <div v-if="aiChatLoading && aiMessages.length === 0" class="ai-messages-loading">
+              <el-icon class="is-loading"><Loading /></el-icon> 加载中…
+            </div>
+            <div
+              v-for="msg in aiMessages"
+              :key="msg.id"
+              class="chat-msg"
+              :class="msg.type === 'user' ? 'user-msg' : 'ai-msg'"
+            >
+              <div class="msg-bubble">
+                <span class="msg-role">{{ msg.type === 'user' ? '您' : 'AI' }}</span>
+                <div class="msg-content" v-html="renderMsgContent(msg.content)" />
+              </div>
+            </div>
+            <!-- 流式生成中的气泡 -->
+            <div v-if="streamingText || streamingLoading" class="chat-msg ai-msg">
+              <div class="msg-bubble">
+                <span class="msg-role">AI</span>
+                <div class="msg-content">
+                  <span v-if="streamingLoading && !streamingText" class="streaming-dot">思考中…</span>
+                  <span v-else>{{ streamingText }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 快捷问题 -->
+          <div class="quick-questions">
+            <button
+              v-for="q in QUICK_QUESTIONS"
+              :key="q"
+              class="quick-btn"
+              :disabled="streamingLoading"
+              @click="sendQuestion(q)"
+            >{{ q }}</button>
+          </div>
+
+          <!-- 输入框 -->
+          <div class="ai-input-wrap">
+            <el-input
+              v-model="chatInput"
+              type="textarea"
+              :rows="2"
+              resize="none"
+              placeholder="输入问题，基于当前项目资料回答…"
+              :disabled="streamingLoading"
+              @keydown.enter.exact.prevent="handleSend"
+            />
+            <div class="ai-input-actions">
+              <el-button
+                v-if="streamingLoading"
+                type="danger"
+                size="small"
+                @click="stopStream"
+              >停止</el-button>
+              <el-button
+                v-else
+                type="primary"
+                size="small"
+                :disabled="!chatInput.trim()"
+                @click="handleSend"
+              >发送</el-button>
+            </div>
+          </div>
+        </template>
+
+        <!-- 摘要未就绪时提示 -->
+        <div v-else-if="aiSummary && aiSummary.status !== 2" class="ai-chat-unavail">
+          AI 摘要就绪后才能开始对话
+        </div>
+      </aside>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
-import { Document, Folder, Link, Refresh } from '@element-plus/icons-vue'
-import { ElMessage } from 'element-plus'
+import { Document, Folder, InfoFilled, Link, Loading, Refresh, WarningFilled } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { formatDate } from '@/utils/formatTime'
 import {
   getFileOpenUrl,
@@ -110,9 +275,27 @@ import {
   type ReviewTabletOpenUrlVO
 } from '@/api/review/tablet'
 import type { ReviewMeetingFileRespVO } from '@/api/review/project'
+import {
+  AI_SUMMARY_STATUS,
+  clearProjectAiMessages,
+  getProjectAiSummary,
+  openProjectAiConversation,
+  sendProjectAiChatStream,
+  type ReviewAiSummaryVO
+} from '@/api/review/ai'
+import { ChatMessageApi, type ChatMessageVO } from '@/api/ai/chat/message/index'
 
 defineOptions({ name: 'ReviewTablet' })
 
+// ── 快捷问题 ──────────────────────────────────────────────────
+const QUICK_QUESTIONS = [
+  '这个项目要解决什么问题？',
+  '建设范围包括哪些内容？',
+  '实施计划是怎样的？',
+  '预算或投入信息有哪些？'
+]
+
+// ── 类型 ──────────────────────────────────────────────────────
 type TreeNode = ProjectTreeNode | FileTreeNode
 
 interface ProjectTreeNode {
@@ -141,6 +324,7 @@ interface FileTreeNode {
   source: ReviewMeetingFileRespVO
 }
 
+// ── 目录 & 预览 state ─────────────────────────────────────────
 const pageLoading = ref(false)
 const previewLoading = ref(false)
 const previewError = ref('')
@@ -157,43 +341,48 @@ const activeFileNode = ref<FileTreeNode>()
 const previewUrl = ref('')
 const previewPayload = ref<ReviewTabletOpenUrlVO>()
 
-const treeProps = {
-  label: 'label',
-  children: 'children'
-}
+const treeProps = { label: 'label', children: 'children' }
 
 const projectCount = computed(() => treeData.value.length)
 const activeFileName = computed(() => activeFileNode.value?.label || previewPayload.value?.fileName || '')
 const activeFileDesc = computed(() => {
   if (!activeFileNode.value) return ''
-  const segments: string[] = []
-  if (activeFileNode.value.fileType) {
-    segments.push(activeFileNode.value.fileType.toUpperCase())
-  }
-  if (activeFileNode.value.fileSize) {
-    segments.push(formatFileSize(activeFileNode.value.fileSize))
-  }
-  if (activeFileNode.value.createTime) {
-    segments.push(`上传于 ${formatDate(new Date(activeFileNode.value.createTime), 'YYYY-MM-DD HH:mm')}`)
-  }
-  return segments.join(' · ')
+  const segs: string[] = []
+  if (activeFileNode.value.fileType) segs.push(activeFileNode.value.fileType.toUpperCase())
+  if (activeFileNode.value.fileSize) segs.push(formatFileSize(activeFileNode.value.fileSize))
+  if (activeFileNode.value.createTime)
+    segs.push(`上传于 ${formatDate(new Date(activeFileNode.value.createTime), 'YYYY-MM-DD HH:mm')}`)
+  return segs.join(' · ')
 })
 
-watch(keyword, (value) => {
-  treeRef.value?.filter(value.trim())
-})
+// ── AI 面板 state ─────────────────────────────────────────────
+const aiPanelOpen = ref(false)
+const aiSummaryLoading = ref(false)
+const aiSummary = ref<ReviewAiSummaryVO | null>(null)
+const aiConversationId = ref<number | null>(null)
+const aiMessages = ref<ChatMessageVO[]>([])
+const aiChatLoading = ref(false)
+const chatInput = ref('')
+const streamingText = ref('')
+const streamingLoading = ref(false)
+const aiMessagesRef = ref<HTMLElement>()
+let streamAbortCtrl: AbortController | null = null
+let summaryPollingTimer: ReturnType<typeof setTimeout> | null = null
+
+// ── 搜索过滤 ──────────────────────────────────────────────────
+watch(keyword, (val) => treeRef.value?.filter(val.trim()))
 
 const filterNode = (value: string, data: TreeNode): boolean => {
   if (!value) return true
-  const keywordValue = value.toLowerCase()
+  const kw = value.toLowerCase()
   if (data.type === 'project') {
-    const projectMatched = [data.label, data.meetingName].join('|').toLowerCase().includes(keywordValue)
-    const childMatched = data.children.some((item) => item.label.toLowerCase().includes(keywordValue))
-    return projectMatched || childMatched
+    return [data.label, data.meetingName].join('|').toLowerCase().includes(kw)
+      || data.children.some((f) => f.label.toLowerCase().includes(kw))
   }
-  return [data.label, data.fileType].join('|').toLowerCase().includes(keywordValue)
+  return [data.label, data.fileType].join('|').toLowerCase().includes(kw)
 }
 
+// ── 树节点构建 ────────────────────────────────────────────────
 const buildProjectNode = (item: ReviewTabletCatalogVO): ProjectTreeNode => ({
   id: `project-${item.reviewMeetingProjectId}`,
   type: 'project',
@@ -220,11 +409,12 @@ const toFileNode = (file: ReviewMeetingFileRespVO, projectId: number): FileTreeN
   source: file
 })
 
+// ── 文件加载 ──────────────────────────────────────────────────
 const loadProjectFiles = async (projectNode: ProjectTreeNode) => {
   if (projectNode.loaded || projectNode.loading) return
-  const cachedFiles = fileCache.value[projectNode.projectId]
-  if (cachedFiles) {
-    projectNode.children = cachedFiles.map((item) => toFileNode(item, projectNode.projectId))
+  const cached = fileCache.value[projectNode.projectId]
+  if (cached) {
+    projectNode.children = cached.map((f) => toFileNode(f, projectNode.projectId))
     projectNode.loaded = true
     return
   }
@@ -232,7 +422,7 @@ const loadProjectFiles = async (projectNode: ProjectTreeNode) => {
   try {
     const files = await getProjectFiles(projectNode.projectId)
     fileCache.value[projectNode.projectId] = files
-    projectNode.children = files.map((item) => toFileNode(item, projectNode.projectId))
+    projectNode.children = files.map((f) => toFileNode(f, projectNode.projectId))
     projectNode.loaded = true
   } catch {
     ElMessage.error('加载项目资料失败，请稍后重试')
@@ -242,17 +432,14 @@ const loadProjectFiles = async (projectNode: ProjectTreeNode) => {
   }
 }
 
+// ── 预览 ──────────────────────────────────────────────────────
 const loadPreview = async (fileId: number) => {
   previewLoading.value = true
   previewError.value = ''
   try {
     const payload = await getFileOpenUrl(fileId)
     previewPayload.value = payload
-    if (!payload?.openUrl) {
-      previewUrl.value = ''
-      previewError.value = '未获取到预览地址'
-      return
-    }
+    if (!payload?.openUrl) { previewUrl.value = ''; previewError.value = '未获取到预览地址'; return }
     previewUrl.value = payload.openUrl
   } catch {
     previewUrl.value = ''
@@ -271,48 +458,37 @@ const selectFileNode = async (fileNode: FileTreeNode) => {
 
 const openInNewWindow = () => {
   const url = previewPayload.value?.openUrl || previewUrl.value
-  if (!url) {
-    ElMessage.warning('暂无可打开的预览地址')
-    return
-  }
+  if (!url) { ElMessage.warning('暂无可打开的预览地址'); return }
   window.open(url, '_blank', 'noopener,noreferrer')
 }
 
-const refreshPreview = async () => {
-  if (!activeFileId.value) return
-  await loadPreview(activeFileId.value)
-}
+const refreshPreview = async () => { if (activeFileId.value) await loadPreview(activeFileId.value) }
 
+// ── 树事件 ────────────────────────────────────────────────────
 const handleNodeExpand = async (data: TreeNode) => {
   if (data.type !== 'project') return
-  if (!expandedKeys.value.includes(data.id)) {
-    expandedKeys.value.push(data.id)
-  }
+  if (!expandedKeys.value.includes(data.id)) expandedKeys.value.push(data.id)
   await loadProjectFiles(data)
 }
 
 const handleNodeCollapse = (data: TreeNode) => {
   if (data.type !== 'project') return
   expandedKeys.value = expandedKeys.value.filter((id) => id !== data.id)
-  if (expandedKeys.value.length > 0) return
-
-  activeProjectId.value = undefined
-  activeFileId.value = undefined
-  activeFileNode.value = undefined
-  previewUrl.value = ''
-  previewPayload.value = undefined
-  previewError.value = ''
 }
 
 const handleNodeClick = async (data: TreeNode) => {
   if (data.type === 'project') {
+    const switched = activeProjectId.value !== data.projectId
     activeProjectId.value = data.projectId
     await loadProjectFiles(data)
+    if (switched) resetProjectAiState()
+    if (aiPanelOpen.value) await loadProjectAi(data.projectId)
     return
   }
   await selectFileNode(data)
 }
 
+// ── 目录加载 ──────────────────────────────────────────────────
 const loadCatalog = async () => {
   pageLoading.value = true
   previewError.value = ''
@@ -321,15 +497,14 @@ const loadCatalog = async () => {
   activeFileId.value = undefined
   activeFileNode.value = undefined
   activeProjectId.value = undefined
+  resetProjectAiState()
+  aiPanelOpen.value = false
   try {
     const catalog = await getTodayCatalog()
     treeData.value = catalog
       .sort((a, b) => (a.seqNo || 0) - (b.seqNo || 0))
       .map((item) => buildProjectNode(item))
     fileCache.value = {}
-    expandedKeys.value = []
-    if (treeData.value.length === 0) return
-
     expandedKeys.value = []
     await nextTick()
     treeRef.value?.setCurrentKey(undefined)
@@ -338,6 +513,177 @@ const loadCatalog = async () => {
   }
 }
 
+// ── AI 面板 ───────────────────────────────────────────────────
+const toggleAiPanel = async () => {
+  aiPanelOpen.value = !aiPanelOpen.value
+  if (aiPanelOpen.value && activeProjectId.value) {
+    await loadProjectAi(activeProjectId.value)
+  }
+}
+
+const resetProjectAiState = () => {
+  stopStream()
+  clearSummaryPolling()
+  aiSummary.value = null
+  aiConversationId.value = null
+  aiMessages.value = []
+  chatInput.value = ''
+  streamingText.value = ''
+}
+
+const loadProjectAi = async (projectId: number) => {
+  resetProjectAiState()
+  aiSummaryLoading.value = true
+  try {
+    aiSummary.value = await getProjectAiSummary(projectId)
+    // 如果生成中，开启轮询
+    if (aiSummary.value?.status === AI_SUMMARY_STATUS.BUILDING) {
+      startSummaryPolling(projectId)
+    }
+    // 已完成则加载会话
+    if (aiSummary.value?.status === AI_SUMMARY_STATUS.SUCCESS) {
+      await openAndLoadConversation(projectId)
+    }
+  } catch (e: any) {
+    // 如果是视图窗口未到，静默处理
+    if (e?.code !== 1900009006) ElMessage.error('加载 AI 摘要失败')
+  } finally {
+    aiSummaryLoading.value = false
+  }
+}
+
+const openAndLoadConversation = async (projectId: number) => {
+  aiChatLoading.value = true
+  try {
+    const conv = await openProjectAiConversation(projectId)
+    aiConversationId.value = conv.conversationId
+    const msgs = await ChatMessageApi.getChatMessageListByConversationId(conv.conversationId)
+    aiMessages.value = msgs || []
+    await scrollAiToBottom()
+  } catch {
+    // 会话打开失败不影响主流程
+  } finally {
+    aiChatLoading.value = false
+  }
+}
+
+// 摘要生成中轮询
+const startSummaryPolling = (projectId: number) => {
+  clearSummaryPolling()
+  summaryPollingTimer = setTimeout(async () => {
+    if (activeProjectId.value !== projectId || !aiPanelOpen.value) return
+    try {
+      aiSummary.value = await getProjectAiSummary(projectId)
+    } catch { /* silent */ }
+    if (aiSummary.value?.status === AI_SUMMARY_STATUS.BUILDING) {
+      startSummaryPolling(projectId)
+    } else if (aiSummary.value?.status === AI_SUMMARY_STATUS.SUCCESS) {
+      await openAndLoadConversation(projectId)
+    }
+  }, 4000)
+}
+
+const clearSummaryPolling = () => {
+  if (summaryPollingTimer) { clearTimeout(summaryPollingTimer); summaryPollingTimer = null }
+}
+
+// ── AI 对话 ───────────────────────────────────────────────────
+const sendQuestion = (q: string) => { chatInput.value = q; handleSend() }
+
+const handleSend = async () => {
+  const content = chatInput.value.trim()
+  if (!content || streamingLoading.value || !aiConversationId.value || !activeProjectId.value) return
+  chatInput.value = ''
+
+  // 先插入用户消息
+  aiMessages.value.push({ id: Date.now(), type: 'user', content, createTime: new Date() } as any)
+  streamingLoading.value = true
+  streamingText.value = ''
+  await scrollAiToBottom()
+
+  streamAbortCtrl = new AbortController()
+  let isFirst = true
+  const projectId = activeProjectId.value
+  const convId = aiConversationId.value
+
+  try {
+    await sendProjectAiChatStream(
+      projectId,
+      convId,
+      content,
+      streamAbortCtrl,
+      async (res: any) => {
+        const { code, data, msg } = JSON.parse(res.data)
+        if (code !== 0) {
+          ElMessage.error(`AI 对话异常：${msg}`)
+          streamingLoading.value = false
+          return
+        }
+        if (data?.receive?.content === '' && !data?.receive?.reasoningContent) return
+        if (isFirst) {
+          isFirst = false
+          // 用真实 send 消息替换假消息
+          aiMessages.value.pop()
+          aiMessages.value.push(data.send)
+        }
+        if (data?.receive?.content) {
+          streamingText.value += data.receive.content
+        }
+        await scrollAiToBottom()
+      },
+      (_err: any) => {
+        streamingLoading.value = false
+        throw _err
+      },
+      async () => {
+        // 流式结束，把完整回复追加为消息记录
+        if (streamingText.value) {
+          aiMessages.value.push({
+            id: Date.now() + 1,
+            type: 'assistant',
+            content: streamingText.value,
+            createTime: new Date()
+          } as any)
+          streamingText.value = ''
+        }
+        streamingLoading.value = false
+        await scrollAiToBottom()
+      }
+    )
+  } catch {
+    streamingLoading.value = false
+  }
+}
+
+const stopStream = () => {
+  if (streamAbortCtrl) { streamAbortCtrl.abort(); streamAbortCtrl = null }
+  if (streamingText.value) {
+    aiMessages.value.push({
+      id: Date.now() + 1,
+      type: 'assistant',
+      content: streamingText.value,
+      createTime: new Date()
+    } as any)
+    streamingText.value = ''
+  }
+  streamingLoading.value = false
+}
+
+const handleClearMessages = async () => {
+  await ElMessageBox.confirm('确认清空当前项目的全部问答记录？摘要和知识库不受影响。', '提示', { type: 'warning' })
+  if (!activeProjectId.value) return
+  stopStream()
+  await clearProjectAiMessages(activeProjectId.value)
+  aiMessages.value = []
+  ElMessage.success('问答记录已清空')
+}
+
+const scrollAiToBottom = async () => {
+  await nextTick()
+  if (aiMessagesRef.value) aiMessagesRef.value.scrollTop = aiMessagesRef.value.scrollHeight
+}
+
+// ── 工具 ──────────────────────────────────────────────────────
 const formatFileSize = (bytes: number): string => {
   if (!bytes) return '-'
   if (bytes < 1024) return `${bytes} B`
@@ -345,10 +691,15 @@ const formatFileSize = (bytes: number): string => {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
+const renderMsgContent = (text: string) =>
+  text.replace(/\n/g, '<br/>').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/&lt;br\/&gt;/g, '<br/>')
+
 loadCatalog()
 </script>
 
 <style scoped>
+/* ── 整体布局 ── */
 .tablet-full-page {
   height: 100vh;
   min-height: 100vh;
@@ -371,28 +722,10 @@ loadCatalog()
   border: 1px solid #e5e7eb;
 }
 
-.title-wrap h2 {
-  margin: 0;
-  font-size: 22px;
-  font-weight: 700;
-}
-
-.title-wrap span {
-  display: block;
-  margin-top: 4px;
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.tool-wrap {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.search-input {
-  width: 320px;
-}
+.title-wrap h2 { margin: 0; font-size: 22px; font-weight: 700; }
+.title-wrap span { display: block; margin-top: 4px; font-size: 13px; color: #6b7280; }
+.tool-wrap { display: flex; align-items: center; gap: 8px; }
+.search-input { width: 320px; }
 
 .page-body {
   flex: 1;
@@ -400,10 +733,17 @@ loadCatalog()
   display: grid;
   grid-template-columns: 360px minmax(0, 1fr);
   gap: 12px;
+  transition: grid-template-columns 0.25s ease;
 }
 
+.page-body.ai-open {
+  grid-template-columns: 280px minmax(0, 1fr) 360px;
+}
+
+/* ── 目录面板 ── */
 .directory-panel,
-.preview-panel {
+.preview-panel,
+.ai-panel {
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   background: #fff;
@@ -416,63 +756,26 @@ loadCatalog()
   padding: 10px;
 }
 
-.panel-title {
-  padding: 6px 8px 10px;
-  font-size: 15px;
-  font-weight: 600;
-}
+.panel-title { padding: 6px 8px 10px; font-size: 15px; font-weight: 600; }
 
-.catalog-tree {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-}
+.catalog-tree { flex: 1; min-height: 0; overflow: auto; }
 
-.tree-project,
-.tree-file {
+.tree-project, .tree-file {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
+.node-left { display: inline-flex; align-items: center; min-width: 0; gap: 6px; }
+.node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.node-icon { font-size: 16px; }
+.folder-icon { color: #2563eb; }
+.file-icon { color: #475569; }
+.file-type { font-size: 11px; color: #64748b; }
 
-.node-left {
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  gap: 6px;
-}
-
-.node-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.node-icon {
-  font-size: 16px;
-}
-
-.folder-icon {
-  color: #2563eb;
-}
-
-.file-icon {
-  color: #475569;
-}
-
-.file-type {
-  font-size: 11px;
-  color: #64748b;
-}
-
-.preview-panel {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-}
+/* ── 预览面板 ── */
+.preview-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
 
 .preview-header {
   padding: 12px 14px;
@@ -482,101 +785,186 @@ loadCatalog()
   justify-content: space-between;
   gap: 12px;
 }
+.preview-meta { min-width: 0; }
+.preview-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.preview-sub { margin-top: 4px; color: #64748b; font-size: 12px; }
+.preview-actions { display: flex; gap: 8px; flex-shrink: 0; }
 
-.preview-meta {
-  min-width: 0;
-}
-
-.preview-title {
-  font-size: 16px;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.preview-sub {
-  margin-top: 4px;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.preview-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.preview-body {
-  flex: 1;
-  min-height: 0;
-  background: #f8fafc;
-}
-
+.preview-body { flex: 1; min-height: 0; background: #f8fafc; }
 .welcome-panel {
   height: 100%;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  color: #1f2937; text-align: center; padding: 24px;
+}
+.welcome-title { font-size: 30px; font-weight: 700; letter-spacing: 1px; }
+.welcome-sub { margin-top: 12px; font-size: 15px; color: #64748b; }
+.preview-iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
+
+/* ── AI 面板 ── */
+.ai-panel {
   display: flex;
   flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* AI 头部 */
+.ai-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+.ai-header-left { display: flex; align-items: center; gap: 8px; }
+.ai-header-right { display: flex; align-items: center; gap: 4px; }
+.ai-title { font-size: 15px; font-weight: 600; }
+.ai-status-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+.status-0 { background: #f3f4f6; color: #6b7280; }
+.status-1 { background: #fef3c7; color: #d97706; }
+.status-2 { background: #d1fae5; color: #059669; }
+.status-3 { background: #fee2e2; color: #dc2626; }
+
+/* 摘要区 */
+.ai-summary-wrap {
+  flex-shrink: 0;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 10px 12px;
+  background: #f8fafc;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.ai-summary-empty,
+.ai-summary-building,
+.ai-summary-failed {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #6b7280;
+  padding: 8px 0;
+}
+.ai-summary-failed { color: #dc2626; }
+
+.ai-summary-card { display: flex; flex-direction: column; gap: 8px; }
+.summary-updated { font-size: 11px; color: #9ca3af; }
+.summary-field { display: flex; flex-direction: column; gap: 2px; }
+.field-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #2563eb;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.field-value { font-size: 13px; color: #374151; line-height: 1.5; }
+
+/* 分隔线 */
+.ai-divider { height: 1px; background: #e5e7eb; flex-shrink: 0; }
+
+/* 消息列表 */
+.ai-messages {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.ai-messages-loading {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 13px; color: #9ca3af; padding: 8px 0;
+}
+
+.chat-msg { display: flex; }
+.user-msg { justify-content: flex-end; }
+.ai-msg { justify-content: flex-start; }
+
+.msg-bubble {
+  max-width: 85%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.user-msg .msg-bubble { align-items: flex-end; }
+.ai-msg .msg-bubble { align-items: flex-start; }
+
+.msg-role { font-size: 11px; color: #9ca3af; }
+
+.msg-content {
+  padding: 8px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+.user-msg .msg-content { background: #2563eb; color: #fff; border-bottom-right-radius: 3px; }
+.ai-msg .msg-content { background: #f3f4f6; color: #1f2937; border-bottom-left-radius: 3px; }
+.streaming-dot { color: #9ca3af; }
+
+/* 快捷问题 */
+.quick-questions {
+  flex-shrink: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 12px;
+  border-top: 1px solid #e5e7eb;
+}
+.quick-btn {
+  padding: 4px 10px;
+  font-size: 12px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 12px;
+  color: #1d4ed8;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+.quick-btn:hover:not(:disabled) { background: #dbeafe; }
+.quick-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* 输入区 */
+.ai-input-wrap {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ai-input-actions { display: flex; justify-content: flex-end; }
+
+/* 不可用提示 */
+.ai-chat-unavail {
+  flex: 1;
+  display: flex;
   align-items: center;
   justify-content: center;
-  color: #1f2937;
-  text-align: center;
-  padding: 24px;
+  font-size: 13px;
+  color: #9ca3af;
 }
 
-.welcome-title {
-  font-size: 30px;
-  font-weight: 700;
-  letter-spacing: 1px;
-}
+/* ── 树样式 ── */
+:deep(.el-tree-node__content) { height: 42px; padding-right: 8px; }
+:deep(.el-tree-node__content:hover) { background: #eff6ff; }
 
-.welcome-sub {
-  margin-top: 12px;
-  font-size: 15px;
-  color: #64748b;
-}
-
-.preview-iframe {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  display: block;
-  background: #fff;
-}
-
-:deep(.el-tree-node__content) {
-  height: 42px;
-  padding-right: 8px;
-}
-
-:deep(.el-tree-node__content:hover) {
-  background: #eff6ff;
-}
-
-@media (max-width: 1024px) {
-  .tablet-full-page {
-    height: auto;
-    min-height: 100vh;
-  }
-
-  .page-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .search-input {
-    width: 100%;
-  }
-
-  .page-body {
-    grid-template-columns: 1fr;
-  }
-
-  .directory-panel {
-    max-height: 42vh;
-  }
-
-  .preview-panel {
-    min-height: 56vh;
-  }
+/* ── 响应式 ── */
+@media (max-width: 1100px) {
+  .tablet-full-page { height: auto; min-height: 100vh; }
+  .page-toolbar { flex-direction: column; align-items: stretch; }
+  .search-input { width: 100%; }
+  .page-body { grid-template-columns: 1fr !important; }
+  .directory-panel { max-height: 42vh; }
+  .preview-panel { min-height: 56vh; }
+  .ai-panel { min-height: 50vh; }
 }
 </style>