aegon-gen 1.0.0

package/src/views/ReportCenter/index.vue

@@ -0,0 +1,1380 @@
+<!--
+  template-center 单文件版（含 PageHeader、API/SSE、Knowledge、章节对话）
+  路由：{ path: '/template-center', component: () => import('@/test/test2.vue') }
+  环境变量：VITE_REPORT_STREAM_URL、VITE_REPORT_STREAM_MOCK、VITE_CHAT_MODEL
+-->
+<template>
+  <div class="template-center-page">
+    <header class="page-header">
+      <h1 class="page-header__title">IR-DEMO</h1>
+    </header>
+
+    <div class="chatbot-report-shell">
+      <!-- 左侧：报告配置 -->
+      <aside class="chatbot-report-panel chatbot-report-panel--config left">
+        <div class="chatbot-report-panel__body">
+          <h3 class="chatbot-report-config-title">報告配置</h3>
+          <div class="chatbot-report-field">
+            <span class="chatbot-report-field__label">名稱</span>
+            <span class="chatbot-report-field__value">
+              {{ activeConversation?.label || 'Hedera 鏈上運營 2026' }}
+            </span>
+            <EditPen class="chatbot-report-field__edit" @click="newChat" />
+          </div>
+          <div class="chatbot-report-field">
+            <span class="chatbot-report-field__label">模型</span>
+            <span class="chatbot-report-field__value">
+              {{ useLocalFallback ? '本地知識庫' : displayModel }}
+            </span>
+            <EditPen class="chatbot-report-field__edit" @click="useLocalFallback = !useLocalFallback" />
+          </div>
+          <div class="chatbot-report-field chatbot-report-field--readonly">
+            <span class="chatbot-report-field__label">語言</span>
+            <span class="chatbot-report-field__value">中文</span>
+          </div>
+          <div class="chatbot-report-field chatbot-report-field--readonly">
+            <span class="chatbot-report-field__label">行業</span>
+            <span class="chatbot-report-field__value">Hedera 鏈上運營</span>
+          </div>
+          <div class="chatbot-report-field chatbot-report-field--readonly">
+            <span class="chatbot-report-field__label">年份</span>
+            <span class="chatbot-report-field__value">2026</span>
+          </div>
+
+          <div class="chatbot-report-section-title">信息源</div>
+          <div class="chatbot-report-add-source" role="presentation">
+            <div style="display: flex; align-items: center;justify-content: center;">
+              <span class="chatbot-report-add-source__icon">
+                <Plus />
+              </span>
+            </div>
+            <div>
+              添加信息源
+            </div>
+          </div>
+          <button type="button" class="chatbot-report-web-search" @click="webSearch = !webSearch">
+            <CheckMark :checked="webSearch" />
+            在網絡中搜索信息源
+          </button>
+
+          <div class="chatbot-report-source-select">
+            <div class="chatbot-report-select-all" @click="toggleAllDocs">
+              <span>選擇所有信息源</span>
+              <CheckMark :checked="allDocsSelected" />
+            </div>
+
+            <div class="chatbot-report-doc-group">
+              <div class="chatbot-report-doc-group__header chatbot-report-source-row"
+                @click="toggleDocGroup(SHARED_DOCS.map(d => d.id))">
+                <span class="chatbot-report-source-row__label">共享文檔集</span>
+                <CheckMark :checked="SHARED_DOCS.every(d => selectedDocs[d.id])" />
+              </div>
+              <div v-for="doc in SHARED_DOCS" :key="doc.id"
+                class="chatbot-report-source-row chatbot-report-source-row--doc" @click="toggleDoc(doc.id)">
+                <PdfIcon />
+                <span class="chatbot-report-source-row__label">{{ doc.title }}</span>
+                <CheckMark :checked="!!selectedDocs[doc.id]" />
+              </div>
+            </div>
+
+            <div class="chatbot-report-doc-group">
+              <div class="chatbot-report-doc-group__header chatbot-report-source-row"
+                @click="toggleDocGroup(PERSONAL_DOCS.map(d => d.id))">
+                <span class="chatbot-report-source-row__label">個人文檔集</span>
+                <CheckMark :checked="PERSONAL_DOCS.every(d => selectedDocs[d.id])" />
+              </div>
+              <div v-for="doc in PERSONAL_DOCS" :key="doc.id"
+                class="chatbot-report-source-row chatbot-report-source-row--doc" @click="toggleDoc(doc.id)">
+                <PdfIcon />
+                <span class="chatbot-report-source-row__label">{{ doc.title }}</span>
+                <CheckMark :checked="!!selectedDocs[doc.id]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <!-- 中间：对话预览（当前注释，保留占位） -->
+      <main class="chatbot-report-center center">
+        <div class="chatbot-report-toolbar">
+          <el-button class="chatbot-report-btn-outline" @click="backToChapterEdit">返回章节编辑</el-button>
+          <div>
+            <el-button class="chatbot-report-btn-outline" :icon="Download" :disabled="!reportPreviewVisible"
+              @click="exportReportPdf">
+              匯出為 PDF
+            </el-button>
+            <el-button class="chatbot-report-btn-outline" :icon="Download" :disabled="!reportPreviewVisible"
+              @click="exportReportWord">
+              匯出為 Word
+            </el-button>
+          </div>
+        </div>
+
+        <div v-if="!reportPreviewVisible" class="chatbot-report-center__empty">
+          <p>選擇章節後點擊「生成報告」預覽內容</p>
+        </div>
+        <div v-else class="chatbot-report-center__preview">
+          <div class="chatbot-report-stream-debug">
+            <div v-if="isRequesting" class="chatbot-report-stream-debug__status">输出中...</div>
+            <div class="chatbot-report-stream-debug__body">{{ reportStreamText || '等待 SSE 数据...' }}</div>
+          </div>
+        </div>
+      </main>
+
+      <!-- 右侧：生成報告設置 -->
+      <aside class="chatbot-report-panel chatbot-report-panel--settings right">
+        <div class="chatbot-report-panel__body">
+          <h3 class="chatbot-report-config-title">生成報告設置</h3>
+
+          <div class="chatbot-report-chapter-select">
+            <div class="chatbot-report-chapter-header">
+              <span class="chatbot-report-chapter-header__title">選擇章節及版本</span>
+              <div class="chatbot-report-chapter-header__all" @click="toggleAllChapters">
+                <CheckMark :checked="allChaptersSelected" />
+                <span>全部章節</span>
+              </div>
+            </div>
+            <div class="chatbot-report-chapter-list">
+              <div v-for="preset in orderedPresets" :key="preset.key" class="chatbot-report-chapter-row" :class="{
+                'is-dragging': dragChapterKey === preset.key,
+                'is-drag-over': dragOverChapterKey === preset.key,
+              }" draggable="true" @dragstart="onChapterDragStart($event, preset.key)" @dragend="handleChapterDragEnd"
+                @dragover.prevent="setDragOverChapterKey(preset.key)" @drop="handleChapterDrop(preset.key)">
+                <CheckMark :checked="!!selectedChapters[preset.key]" @click.stop="toggleChapter(preset.key)"
+                  @mousedown.stop @dragstart.prevent />
+                <span class="chatbot-report-chapter-row__label"
+                  @click="setActiveKey(preset.key); sendMessage(preset.label)">
+                  {{ preset.label }}
+                </span>
+                <select class="chatbot-report-chapter-row__version" :value="chapterVersions[preset.key]"
+                  @change="chapterVersions[preset.key] = ($event.target as HTMLSelectElement).value" @click.stop
+                  @mousedown.stop>
+                  <option v-for="v in CHAPTER_VERSIONS" :key="v" :value="v">{{ v }}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div class="chatbot-report-section-title chatbot-report-section-title--settings">生成報告方式</div>
+          <el-radio-group v-model="reportMode" class="chatbot-report-radio-group">
+            <el-radio value="polish">拼裝並潤色</el-radio>
+            <el-radio value="rewrite">重寫整篇報告</el-radio>
+          </el-radio-group>
+
+          <el-button class="chatbot-report-generate-btn" :disabled="isRequesting" v-debounce.lock.loading
+            @click="generateFromChapters">
+            生成X報告
+          </el-button>
+
+          <div class="chatbot-report-history">
+            <div class="chatbot-report-history__title">報告歷史</div>
+            <div class="chatbot-report-history-list">
+              <div v-for="item in reportHistory" :key="item.key" class="chatbot-report-history-row"
+                :class="{ 'is-active': item.key === activeHistoryKey }" @click="activeHistoryKey = item.key">
+                <span class="chatbot-report-history-item__indicator" aria-hidden="true" />
+                <div class="chatbot-report-history-item">
+                  <div class="chatbot-report-history-item__body">
+                    <div class="chatbot-report-history-item__title">{{ item.title }}</div>
+                    <div class="chatbot-report-history-item__meta">
+                      {{ item.author }} {{ item.time }}
+                    </div>
+                  </div>
+                  <MoreFilled class="chatbot-report-history-item__menu" @click.stop />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Download, EditPen, MoreFilled, Plus } from '@element-plus/icons-vue'
+import { ElButton, ElRadio, ElRadioGroup } from 'element-plus'
+import { computed, defineComponent, h, nextTick, onUnmounted, ref } from 'vue'
+
+// —— API（原 api/request.ts + api/modules/report.ts）——
+function getToken(): string {
+  return localStorage.getItem('token') || ''
+}
+
+function buildAuthHeaders(): HeadersInit {
+  const token = getToken()
+  return {
+    'Content-Type': 'application/json',
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+  }
+}
+
+interface PostRequestOptions {
+  url: string
+  data?: unknown
+  signal?: AbortSignal
+}
+
+interface SseBlock {
+  event: string
+  data: string
+}
+
+function parseSseBlock(block: string): SseBlock | null {
+  if (!block.trim()) return null
+  let event = ''
+  let data = ''
+  for (const line of block.split('\n')) {
+    if (line.startsWith('event:')) {
+      event = line.replace('event:', '').trim()
+    } else if (line.startsWith('data:')) {
+      data += line.replace('data:', '')
+    }
+  }
+  return { event, data }
+}
+
+async function postStreamRequest(options: PostRequestOptions): Promise<Response> {
+  const response = await fetch(options.url, {
+    method: 'POST',
+    headers: buildAuthHeaders(),
+    body: JSON.stringify(options.data ?? {}),
+    signal: options.signal,
+  })
+  if (!response.ok) {
+    throw new Error(`请求失败 ${response.status}`)
+  }
+  return response
+}
+
+async function* streamPostSse(options: PostRequestOptions): AsyncGenerator<SseBlock> {
+  const response = await postStreamRequest(options)
+  const reader = response.body?.getReader()
+  if (!reader) throw new Error('No reader')
+  const decoder = new TextDecoder('utf-8')
+  let buffer = ''
+  try {
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      buffer += decoder.decode(value, { stream: true })
+      const blocks = buffer.split('\n\n')
+      buffer = blocks.pop() || ''
+      for (const block of blocks) {
+        const parsed = parseSseBlock(block)
+        if (parsed) yield parsed
+      }
+    }
+  } finally {
+    reader.releaseLock()
+  }
+}
+
+const REPORT_STREAM_USE_MOCK = import.meta.env.VITE_REPORT_STREAM_MOCK === 'true'
+const REPORT_STREAM_API_URL = import.meta.env.VITE_REPORT_STREAM_URL || '/sse/aiStream'
+
+const MOCK_REPORT_STREAM_TEXT = `# 行业分析报告（Mock）
+
+## 摘要與本年總結
+
+本报告为本地 Mock 流式输出。接入后端 SSE 后由接口返回替换。
+
+## 宏觀環境與政策背景
+
+宏观政策延续稳健基调，行业监管框架逐步完善。`
+
+interface GenerateReportParams {
+  userId?: string
+  question?: string
+  chapters?: string[]
+  chapterVersions?: Record<string, string>
+  reportMode?: string
+}
+
+function buildMockStreamText(params: GenerateReportParams): string {
+  const chapters = params.chapters?.length
+    ? params.chapters.map((label, i) => `## ${label}\n\n（Mock）第 ${i + 1} 章内容占位。\n`).join('\n')
+    : MOCK_REPORT_STREAM_TEXT
+  return `# 生成报告预览（Mock）\n\n**模式**：${params.reportMode === 'rewrite' ? '重寫整篇報告' : '拼裝並潤色'}\n\n${chapters}`
+}
+
+async function* streamMockReport(text: string): AsyncGenerator<string> {
+  for (const char of text) {
+    yield char
+    await new Promise((resolve) => setTimeout(resolve, 12))
+  }
+}
+
+async function* streamAiReportSse(
+  params: { userId: string; question: string },
+  signal?: AbortSignal,
+): AsyncGenerator<string> {
+  for await (const block of streamPostSse({
+    url: REPORT_STREAM_API_URL,
+    data: params,
+    signal,
+  })) {
+    if (block.event === 'text') yield block.data
+    if (block.event === 'end') return
+  }
+}
+
+async function* streamGenerateReport(
+  params: GenerateReportParams,
+  signal?: AbortSignal,
+): AsyncGenerator<string> {
+  if (REPORT_STREAM_USE_MOCK) {
+    yield* streamMockReport(buildMockStreamText(params))
+    return
+  }
+  yield* streamAiReportSse(
+    {
+      userId: params.userId ?? 'user001',
+      question: params.question ?? '介绍一下SSE流式传输',
+    },
+    signal,
+  )
+}
+
+const reportApi = { getToken }
+
+// —— Knowledge（原 TemplateCenter/Knowledge.ts）——
+const HEDERA_SYSTEM_PROMPT = `你是 HederaRoot 平台的 Hedera 链上运营助手。
+你熟悉 HTS（代币）、HCS（共识存证）、HSCS（智能合约）、Governance（KYC/密钥矩阵）、RWA 上链与 Mirror Node 监控。
+回答应简洁、可执行，优先给出页面路径（如 /hts/tokens、/governance/kyc）与 .env 配置提示。
+若涉及私钥，提醒用户仅在 .env 本地配置，不要提交到 Git。`
+
+type KnowledgeEntry = { keywords: string[]; answer: string }
+
+const KNOWLEDGE_BASE: KnowledgeEntry[] = [
+  { keywords: ['创建', '代币', 'hts', 'create'], answer: '创建 FT/NFT：打开 **/hts/create-token**，在 .env 配置 ACCOUNT_ID 与 PRIVATE_KEY。' },
+  { keywords: ['kyc', '白名单', '准入'], answer: 'KYC 流程：创建代币时设置 **KYC Key**；在 **/governance/kyc** 链上授权。' },
+  { keywords: ['暂停', 'pause', '熔断'], answer: '代币暂停需 **Pause Key**，在 **/hts/TokenServe** 执行暂停/恢复。' },
+  { keywords: ['rwa', 'metadata', '100'], answer: 'Hedera Token metadata 上限 **100 字节**，完整信息写入 **HCS Topic**。' },
+  { keywords: ['合约', 'hscs', 'deploy', '部署'], answer: '智能合约：**/hscs/contracts** 部署，**/hscs/debug** 调试。' },
+  { keywords: ['mirror', 'tps', '网络'], answer: '网络监控：**/settings/network** 与 **/dashboard/monitor**。' },
+  { keywords: ['hcs', '存证', 'topic'], answer: 'HCS 共识存证：**/hcs** 查看 Topic 消息流。' },
+  { keywords: ['env', 'account', '私钥', '配置'], answer: '在 `.env` 配置 ACCOUNT_ID、PRIVATE_KEY、HEDERA_RPC_URL。' },
+]
+
+function matchLocalKnowledge(question: string): string | null {
+  const lower = question.toLowerCase()
+  let best: KnowledgeEntry | null = null
+  let bestScore = 0
+  for (const entry of KNOWLEDGE_BASE) {
+    let score = 0
+    for (const kw of entry.keywords) {
+      if (lower.includes(kw.toLowerCase())) score += 1
+    }
+    if (score > bestScore) {
+      bestScore = score
+      best = entry
+    }
+  }
+  return bestScore > 0 ? best!.answer : null
+}
+
+// —— Chat service（原 TemplateCenter/service.ts）——
+const CHAT_API_URL = '/api/chat/completions'
+const CHAT_MODEL = import.meta.env.VITE_CHAT_MODEL ?? 'qwen/qwen-2.5-7b-instruct:free'
+
+async function* streamChatCompletion(messages: Array<{ role: string; content: string }>) {
+  const response = await fetch(CHAT_API_URL, {
+    method: 'POST',
+    headers: buildAuthHeaders(),
+    body: JSON.stringify({
+      model: CHAT_MODEL,
+      messages,
+      stream: true,
+      temperature: 0.7,
+      max_tokens: 2048,
+    }),
+  })
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+  const reader = response.body?.getReader()
+  if (!reader) throw new Error('No reader')
+  const decoder = new TextDecoder()
+  let buffer = ''
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    buffer += decoder.decode(value, { stream: true })
+    const lines = buffer.split('\n')
+    buffer = lines.pop() || ''
+    for (const line of lines) {
+      const trimmed = line.trim()
+      if (!trimmed || trimmed === 'data: [DONE]') continue
+      if (!trimmed.startsWith('data: ')) continue
+      try {
+        const json = JSON.parse(trimmed.slice(6))
+        const delta = json.choices?.[0]?.delta?.content || ''
+        if (delta) yield delta
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+}
+
+const displayModel = CHAT_MODEL.split('/').pop()?.replace(/:.*$/, '') ?? 'Qwen3-Max'
+
+const SHARED_DOCS = [
+  { id: 'hts', title: 'Hedera HTS 代币创建与 KYC 操作指南' },
+  { id: 'hscs', title: 'HSCS 智能合约部署与调试手册' },
+  { id: 'rwa', title: 'RWA 上链 metadata 与 HCS 存证说明' },
+]
+const PERSONAL_DOCS = [
+  { id: 'env', title: 'Operator .env 配置与 Mirror Node 说明' },
+  { id: 'gov', title: 'Governance 密钥矩阵与 KYC 准入流程' },
+  { id: 'audit', title: 'AI 审计与链上风险事件采样' },
+]
+const ALL_DOC_IDS = [...SHARED_DOCS, ...PERSONAL_DOCS].map(d => d.id)
+const HEDERA_PRESETS = [
+  { key: 'preset-summary', label: '摘要與本年總結', group: 'Hedera' },
+  { key: 'preset-macro', label: '宏觀環境與政策背景', group: 'Hedera' },
+  { key: 'preset-industry', label: '行業運行情況與核心指標', group: 'Hedera' },
+  { key: 'preset-competition', label: '競爭格局與商業模式演變', group: 'Hedera' },
+  { key: 'preset-risk', label: '關鍵風險與監管關切', group: 'Hedera' },
+  { key: 'preset-appendix', label: '附錄：數據、方法與名詞解釋', group: 'Hedera' },
+]
+const CHAPTER_VERSIONS = ['V1', 'V2', 'V3']
+
+type ParsedMessage = { role: 'user'; content: string } | { role: 'assistant'; content: string; thinkContent?: string }
+type ConversationItem = { key: string; label: string; group?: string; isDraft?: boolean }
+type ReportHistoryItem = { key: string; title: string; author: string; time: string }
+
+const CheckMark = defineComponent({
+  name: 'CheckMark',
+  inheritAttrs: false,
+  props: {
+    checked: { type: Boolean, required: true },
+  },
+  emits: ['click'],
+  setup(props, { emit, attrs }) {
+    return () =>
+      h('span', {
+        ...attrs,
+        class: ['chatbot-report-check', props.checked && 'is-checked', attrs.class],
+        onClick: (e: MouseEvent) => emit('click', e),
+      })
+  },
+})
+
+const PdfIcon = defineComponent({
+  name: 'PdfIcon',
+  setup() {
+    return () =>
+      h(
+        'svg',
+        {
+          xmlns: 'http://www.w3.org/2000/svg',
+          viewBox: '0 0 1024 1024',
+          class: 'chatbot-report-doc-card__pdf',
+        },
+        [
+          h('path', {
+            fill: 'currentColor',
+            d: 'M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z',
+          }),
+        ],
+      )
+  },
+})
+
+const useLocalFallback = ref(false)
+const webSearch = ref(true)
+const conversations = ref<ConversationItem[]>([
+  { key: 'default', label: 'Hedera 运营问答', group: '今天', isDraft: true },
+  ...HEDERA_PRESETS,
+])
+const activeKey = ref('default')
+const activeHistoryKey = ref('history-final')
+const reportHistory = ref<ReportHistoryItem[]>([
+  { key: 'history-final', title: '定稿版本', author: '陳大文', time: '15min前' },
+  { key: 'history-v2', title: 'V2', author: '陳大文', time: '15min前' },
+])
+const selectedDocs = ref<Record<string, boolean>>(Object.fromEntries(ALL_DOC_IDS.map(id => [id, true])))
+const selectedChapters = ref<Record<string, boolean>>(Object.fromEntries(HEDERA_PRESETS.map(p => [p.key, true])))
+const chapterVersions = ref<Record<string, string>>(Object.fromEntries(HEDERA_PRESETS.map(p => [p.key, 'V3'])))
+const chapterOrder = ref<string[]>(HEDERA_PRESETS.map(p => p.key))
+const reportMode = ref('polish')
+const isRequesting = ref(false)
+const reportPreviewVisible = ref(false)
+const reportStreamText = ref('')
+let reportStreamAbort: AbortController | null = null
+const messages = ref<ParsedMessage[]>([])
+const dragChapterKey = ref<string | null>(null)
+const dragOverChapterKey = ref<string | null>(null)
+
+const setDragOverChapterKey = (key: string) => {
+  dragOverChapterKey.value = key
+}
+
+const activeConversation = computed(() => conversations.value.find(c => c.key === activeKey.value))
+const orderedPresets = computed(() => chapterOrder.value.map(key => HEDERA_PRESETS.find(p => p.key === key)!).filter(Boolean))
+const allDocsSelected = computed(() => ALL_DOC_IDS.every(id => selectedDocs.value[id]))
+const allChaptersSelected = computed(() => HEDERA_PRESETS.every(p => selectedChapters.value[p.key]))
+
+const toggleDoc = (id: string) => {
+  selectedDocs.value[id] = !selectedDocs.value[id]
+}
+const toggleAllDocs = () => {
+  const next = !allDocsSelected.value
+  selectedDocs.value = Object.fromEntries(ALL_DOC_IDS.map(id => [id, next]))
+}
+const toggleDocGroup = (ids: string[]) => {
+  const allOn = ids.every(id => selectedDocs.value[id])
+  ids.forEach(id => {
+    selectedDocs.value[id] = !allOn
+  })
+}
+const toggleChapter = (key: string) => {
+  selectedChapters.value[key] = !selectedChapters.value[key]
+}
+const toggleAllChapters = () => {
+  const next = !allChaptersSelected.value
+  HEDERA_PRESETS.forEach(p => {
+    selectedChapters.value[p.key] = next
+  })
+}
+const setActiveKey = (key: string) => {
+  activeKey.value = key
+}
+const newChat = () => {
+  const key = crypto.randomUUID()
+  conversations.value = [{ key, label: '新对话', group: '今天', isDraft: true }, ...conversations.value.filter(c => c.key !== key)]
+  activeKey.value = key
+  messages.value = []
+}
+const backToChapterEdit = () => {
+  reportPreviewVisible.value = false
+}
+const generateFromChapters = async () => {
+  const selected = orderedPresets.value.filter(p => selectedChapters.value[p.key])
+  if (!selected.length) return
+
+  const token = reportApi.getToken()
+  if (!token) {
+    alert('请先登录')
+    return
+  }
+
+  if (reportStreamAbort) reportStreamAbort.abort()
+  reportStreamAbort = new AbortController()
+
+  isRequesting.value = true
+  reportStreamText.value = ''
+  reportPreviewVisible.value = true
+
+  const question = selected.map(p => p.label).join('、')
+
+  try {
+    for await (const chunk of streamGenerateReport(
+      {
+        userId: 'user001',
+        question,
+        chapters: selected.map(p => p.label),
+        chapterVersions: Object.fromEntries(
+          selected.map((p) => [p.key, chapterVersions.value[p.key] ?? 'V3']),
+        ),
+        reportMode: reportMode.value,
+      },
+      reportStreamAbort.signal,
+    )) {
+      reportStreamText.value += chunk
+    }
+  } catch (err) {
+    if ((err as Error).name !== 'AbortError') {
+      console.error('流异常', err)
+      reportStreamText.value = `[SSE 请求失败] ${(err as Error).message}\n\n${MOCK_REPORT_STREAM_TEXT}`
+    }
+  } finally {
+    isRequesting.value = false
+    reportStreamAbort = null
+  }
+}
+
+onUnmounted(() => {
+  reportStreamAbort?.abort()
+})
+function downloadReportText(ext: 'txt' | 'md') {
+  if (!reportStreamText.value) return
+  const blob = new Blob([reportStreamText.value], { type: 'text/plain;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `report-${Date.now()}.${ext}`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+const exportReportPdf = () => downloadReportText('txt')
+const exportReportWord = () => downloadReportText('md')
+
+const handleChapterDragStart = (key: string) => {
+  dragChapterKey.value = key
+  dragOverChapterKey.value = key
+}
+const onChapterDragStart = (event: DragEvent, key: string) => {
+  if ((event.target as HTMLElement).closest('.chatbot-report-check, .chatbot-report-chapter-row__version')) {
+    event.preventDefault()
+    return
+  }
+  handleChapterDragStart(key)
+}
+const handleChapterDragEnd = () => {
+  dragChapterKey.value = null
+  dragOverChapterKey.value = null
+}
+const handleChapterDrop = (targetKey: string) => {
+  const draggingKey = dragChapterKey.value
+  if (draggingKey && draggingKey !== targetKey) {
+    const newOrder = [...chapterOrder.value]
+    const fromIdx = newOrder.indexOf(draggingKey)
+    const toIdx = newOrder.indexOf(targetKey)
+    if (fromIdx !== -1 && toIdx !== -1) {
+      newOrder.splice(fromIdx, 1)
+      newOrder.splice(toIdx, 0, draggingKey)
+      chapterOrder.value = newOrder
+    }
+  }
+  handleChapterDragEnd()
+}
+
+const sendMessage = async (text: string) => {
+  if (!text.trim()) return
+  messages.value.push({ role: 'user', content: text })
+  if (useLocalFallback.value) {
+    const answer = matchLocalKnowledge(text) ?? '本地知识库暂未收录该问题。请切换「云端模型」或尝试：创建代币、KYC、RWA、HSCS、暂停代币、Mirror Node 等关键词。'
+    messages.value.push({ role: 'assistant', content: answer })
+    return
+  }
+  isRequesting.value = true
+  const apiMessages = [
+    { role: 'system', content: HEDERA_SYSTEM_PROMPT },
+    { role: 'user', content: text },
+  ]
+  try {
+    let fullContent = ''
+    messages.value.push({ role: 'assistant', content: '' })
+    const lastIndex = messages.value.length - 1
+    for await (const chunk of streamChatCompletion(apiMessages)) {
+      fullContent += chunk
+      messages.value[lastIndex] = { role: 'assistant', content: fullContent }
+      await nextTick()
+    }
+  } catch (err) {
+    console.error(err)
+    messages.value.push({ role: 'assistant', content: '请求失败，请检查网络或 API 配置。' })
+  } finally {
+    isRequesting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.page-header {
+  flex-shrink: 0;
+  height: 62px;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  background: #fff;
+  border-bottom: 1px solid #e8eaec;
+}
+
+.page-header__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #2d3139;
+  line-height: 1;
+}
+
+.template-center-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--report-bg, #f3f3f3);
+}
+
+.chatbot-report-shell {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  --report-border: #ebebeb;
+  --report-bg: #f3f3f3;
+  --report-text: #1a1a1a;
+  --report-muted: #999;
+  --report-card-bg: #f5f5f5;
+  --report-add-blue: #4a90d9;
+
+  flex: 1;
+  display: flex;
+  gap: 0px;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--report-bg);
+  padding: 20px;
+}
+
+.chatbot-report-shell .left,
+.chatbot-report-shell .right {
+  width: 20%;
+  min-width: 280px;
+  flex-shrink: 0;
+}
+
+.chatbot-report-shell .center {
+  flex: 1;
+  min-width: 520px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.chatbot-report-panel {
+  background: #fff;
+  border: 0px solid var(--report-border);
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chatbot-report-panel--config .chatbot-report-panel__body,
+.chatbot-report-panel--settings .chatbot-report-panel__body {
+  padding: 16px 18px 20px;
+}
+
+.chatbot-report-panel__head {
+  padding: 14px 16px 10px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--report-text);
+  border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
+}
+
+.chatbot-report-panel__body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.chatbot-report-config-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--report-text);
+  margin: 0 0 4px;
+}
+
+.chatbot-report-field {
+  display: grid;
+  grid-template-columns: 72px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 0;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 13px;
+}
+
+.chatbot-report-field--readonly {
+  grid-template-columns: 72px 1fr;
+}
+
+.chatbot-report-field__label {
+  color: var(--report-muted);
+}
+
+.chatbot-report-field__value {
+  text-align: right;
+  color: #555;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatbot-report-field__edit {
+  color: var(--report-accent);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.chatbot-report-section-title {
+  margin: 18px 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--report-text);
+}
+
+.chatbot-report-add-source {
+  border: 1px dashed #d9d9d9;
+  border-radius: 20px;
+  padding: 20px;
+  text-align: center;
+  color: var(--report-muted);
+  cursor: pointer;
+  font-size: 13px;
+  background: #fff;
+  transition: border-color 0.2s;
+}
+
+.chatbot-report-add-source:hover {
+  border-color: var(--report-add-blue);
+}
+
+.chatbot-report-add-source__icon {
+  display: block;
+  font-size: 24px;
+  line-height: 1;
+  margin-bottom: 8px;
+  color: var(--report-add-blue);
+  width: 20px;
+}
+
+.chatbot-report-doc-card__pdf {
+  width: 14px;
+  height: 14px;
+  color: #c53355;
+  flex-shrink: 0;
+}
+
+.chatbot-report-web-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border: none;
+  border-radius: 6px;
+  background: var(--report-card-bg);
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+  box-sizing: border-box;
+}
+
+.chatbot-report-source-select .chatbot-report-source-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--source-check-size);
+  column-gap: var(--source-check-gap);
+  align-items: center;
+  width: 100%;
+  padding: 10px var(--source-row-padding-x);
+  border: none;
+  border-radius: 6px;
+  background: var(--report-card-bg);
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+  box-sizing: border-box;
+}
+
+.chatbot-report-source-select .chatbot-report-source-row--doc {
+  grid-template-columns: 14px minmax(0, 1fr) var(--source-check-size);
+}
+
+.chatbot-report-web-search:hover,
+.chatbot-report-source-row:hover {
+  background: #efefef;
+}
+
+.chatbot-report-web-search {
+  margin-top: 12px;
+}
+
+.chatbot-report-source-row__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatbot-report-source-select {
+  --source-check-size: 20px;
+  --source-check-gap: 10px;
+  --source-row-padding-x: 12px;
+}
+
+.chatbot-report-select-all {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--source-check-size);
+  column-gap: var(--source-check-gap);
+  align-items: center;
+  padding: 0 var(--source-row-padding-x);
+  margin: 16px 0 10px;
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+}
+
+.chatbot-report-source-select .chatbot-report-check {
+  justify-self: end;
+}
+
+.chatbot-report-check {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  position: relative;
+  transition: all 0.2s;
+  cursor: pointer;
+  background: #fff;
+}
+
+.chatbot-report-check.is-checked {
+  border-color: #c53355;
+  background-color: #c53355;
+}
+
+.chatbot-report-check.is-checked::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.chatbot-report-doc-group {
+  margin-top: 14px;
+}
+
+.chatbot-report-doc-group .chatbot-report-source-row {
+  margin-bottom: 8px;
+}
+
+.chatbot-report-doc-group .chatbot-report-source-row:last-child {
+  margin-bottom: 0;
+}
+
+.chatbot-report-doc-group__header.chatbot-report-source-row {
+  font-weight: 600;
+  color: var(--report-text);
+}
+
+.chatbot-report-center {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: #fff;
+  border-left: 1px solid var(--report-border);
+  border-right: 1px solid var(--report-border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.chatbot-report-center__empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 24px;
+  color: #999;
+  font-size: 14px;
+  background: #fff;
+}
+
+.chatbot-report-center__preview {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.chatbot-report-stream-debug {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.chatbot-report-stream-debug__status {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--report-accent);
+  border-bottom: 1px solid var(--report-border);
+}
+
+.chatbot-report-stream-debug__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 20px 28px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.chatbot-report-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  flex-shrink: 0;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.chatbot-report-btn-outline {
+  border: 1px solid var(--report-accent) !important;
+  color: var(--report-accent) !important;
+  background: #fff !important;
+  border-radius: 4px !important;
+  font-size: 13px !important;
+  height: 32px !important;
+  padding-inline: 14px !important;
+}
+
+.chatbot-report-btn-outline:hover {
+  background: var(--report-accent-soft) !important;
+}
+
+.chatbot-report-document {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 28px 24px;
+  background: #fafafa;
+  min-height: 0;
+}
+
+.chatbot-report-document__paper {
+  max-width: 720px;
+  margin: 0 auto;
+  background: #fff;
+  border: 1px solid #eee;
+  padding: 32px 36px 40px;
+  min-height: 100%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.chatbot-report-document__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 20px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.chatbot-report-document__welcome {
+  text-align: center;
+  padding: 48px 16px 32px;
+  color: var(--report-muted);
+}
+
+.chatbot-report-document__welcome h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--report-text);
+  margin: 0 0 12px;
+}
+
+.chatbot-report-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.chatbot-report-sender {
+  flex-shrink: 0;
+  padding: 12px 16px 14px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+
+.chatbot-report-chapter-select {
+  --chapter-check-size: 20px;
+  --chapter-version-width: 52px;
+  margin-top: 8px;
+}
+
+.chatbot-report-chapter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.chatbot-report-chapter-header__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.chatbot-report-chapter-header__all {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #555;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.chatbot-report-chapter-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.chatbot-report-chapter-row {
+  display: grid;
+  grid-template-columns: var(--chapter-check-size) minmax(0, 1fr) var(--chapter-version-width);
+  column-gap: 8px;
+  align-items: center;
+  padding: 7px 4px;
+  margin: 0 -4px;
+  font-size: 13px;
+  color: #333;
+  border-radius: 6px;
+  cursor: grab;
+  user-select: none;
+  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
+}
+
+.chatbot-report-chapter-row:hover {
+  background: var(--report-card-bg);
+}
+
+.chatbot-report-chapter-row.is-dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+}
+
+.chatbot-report-chapter-row.is-drag-over {
+  background: #fdf0f2;
+  box-shadow: inset 0 0 0 1px rgba(197, 51, 85, 0.35);
+}
+
+.chatbot-report-chapter-row .chatbot-report-check {
+  cursor: pointer;
+}
+
+.chatbot-report-chapter-row__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  line-height: 1.45;
+  color: #333;
+}
+
+.chatbot-report-chapter-row__version {
+  width: var(--chapter-version-width);
+  height: 26px;
+  padding: 0 18px 0 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #333;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23999' d='M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 12px;
+  appearance: none;
+  cursor: pointer;
+  justify-self: end;
+  box-sizing: border-box;
+}
+
+.chatbot-report-section-title--settings {
+  margin: 20px 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.chatbot-report-radio-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 0 0 20px;
+}
+
+.chatbot-report-radio-group :deep(.el-radio) {
+  margin-right: 0;
+  height: auto;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__label) {
+  font-size: 13px;
+  color: #333;
+  padding-left: 8px;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__inner) {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #d9d9d9;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__input.is-checked .el-radio__inner) {
+  border-color: #c53355;
+  background: #c53355;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__inner::after) {
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
+}
+
+.chatbot-report-generate-btn.el-button {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c53355;
+  color: #c53355;
+  background: #fff;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0 auto 24px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.chatbot-report-generate-btn.el-button:hover:not(.is-disabled) {
+  background: #fdf0f2;
+  color: #c53355;
+  border-color: #c53355;
+}
+
+.chatbot-report-generate-btn.el-button.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.chatbot-report-history {
+  border-top: 1px solid #f0f0f0;
+  padding-top: 20px;
+}
+
+.chatbot-report-history__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 12px;
+}
+
+.chatbot-report-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chatbot-report-history-row {
+  display: grid;
+  grid-template-columns: 4px minmax(0, 1fr);
+  column-gap: 10px;
+  align-items: stretch;
+  cursor: pointer;
+}
+
+.chatbot-report-history-item__indicator {
+  width: 4px;
+  border-radius: 2px;
+  background: transparent;
+  align-self: center;
+  min-height: 36px;
+  transition: background 0.15s;
+}
+
+.chatbot-report-history-row.is-active .chatbot-report-history-item__indicator {
+  background: #c53355;
+}
+
+.chatbot-report-history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  transition: background 0.15s;
+}
+
+.chatbot-report-history-row.is-active .chatbot-report-history-item {
+  background: #fdf0f3;
+}
+
+.chatbot-report-history-row:not(.is-active):hover .chatbot-report-history-item {
+  background: #fafafa;
+}
+
+.chatbot-report-history-item__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.chatbot-report-history-item__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.4;
+}
+
+.chatbot-report-history-item__meta {
+  margin-top: 2px;
+  color: #999;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.chatbot-report-history-item__menu {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  color: #c53355;
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+@media (max-width: 1200px) {
+  .chatbot-report-shell {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .chatbot-report-shell .left,
+  .chatbot-report-shell .right {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .chatbot-report-shell .center {
+    min-width: 0;
+    min-height: 420px;
+  }
+}
+</style>