lami-base-v1/.trae/documents/qa_ai_logic_plan.md

QA 页面接入 AI 逻辑 + Markdown 渲染 + 图片处理计划

现状分析

模块	状态	说明
后端 /api/chat	✅ 已实现	完整的 DashScope SSE 代理
前端 qa.ts sendMessage	❌ Mock	setTimeout 模拟
Markdown 渲染	❌ 无	当前纯文本，没有 Markdown
图片处理	❌ 无	demo 中有 MCP 图片提取逻辑
marked 库	✅ 已安装	但未在 QA 页面使用

实现方案

第一步：Markdown 渲染

使用 ngx-markdown 库（npm install ngx-markdown），通过 <markdown> 组件或 | markdown pipe 渲染。

• provideMarkdown() 在 app.config.ts 全局配置
• QA 页面的 AI 消息用 [data] 绑定渲染 Markdown
• 高亮代码使用 highlight.js（已安装）

第二步：图片处理

从 demo 迁移 MCP 图片提取逻辑：

• 解析 output.thoughts 中的 action_type === 'mcp' 节点
• 从 observation.content[].text 中提取 image URLs（results[] 数组）
• 不直接渲染图片，而是在 Markdown 渲染后将 ![alt](url) 替换为 <img> 标签，统一添加样式类、懒加载、点击放大等

第三步：AI 流式逻辑

从 demo 迁移到 Angular：

• ai-chat.service.ts — SSE 流式请求 + 图片提取
• qa.ts — 替换 sendMessage，接入真实流式逻辑
• QAMessage 模型扩展 — 添加 thoughts、images 字段

第四步：后端 .env

基于 .env.example 创建 .env 文件

---

需要修改的文件

文件	操作	说明
frontend/package.json	添加依赖	ngx-markdown
frontend/src/app/app.config.ts	更新	添加 provideMarkdown()
frontend/src/app/core/services/ai-chat.service.ts	新建	SSE 流 + 图片提取
frontend/src/app/core/models/qa.model.ts	更新	扩展 QAMessage 接口
frontend/src/app/features/qa/qa/qa.ts	重写	接入 AI 流式 + Markdown
frontend/src/app/features/qa/qa/qa.html	更新	使用 <markdown> 组件
backend/.env	新建	基于 .env.example

图片处理策略

demo 中的图片提取逻辑：

// thought.action_type === 'mcp'
// → observation.content[].type === 'text'
// → JSON.parse(item.text).results[] → 图片 URL 数组

Angular 中：

1. 在 ai-chat.service.ts 中提取 imageUrls
2. API 返回 { text, thoughts, images } 给组件
3. 组件将 images 拼接到 Markdown 内容末尾（用 ![图片](url) 格式）
4. ngx-markdown 自动渲染为 <img>，配合 CSS 控制样式

数据流

用户输入 → qa.ts sendMessage()
  → aiChatService.stream(prompt, sessionId)
    → fetch('/api/chat')
      → SSE 逐帧解析
        → output.text → 追加到 Markdown 内容
        → output.thoughts[].thought → 思考过程
        → output.thoughts[].mcp → 提取图片 URLs
        → output.session_id → 保存会话
          → qa.ts 实时更新 messages signal
            → <markdown> 组件渲染
            → 图片自动生成 <img> 标签

关键实现

1. ngx-markdown 配置：需要 provideHttpClient()（已提供）+ provideMarkdown()
2. 安全渲染：使用 [data] 绑定而非 [src] 加载外部文件
3. 图片样式：CSS 统一控制 .qa-markdown img { max-width: 100%; border-radius: 8px; }
4. 流式更新：发送时插入空 AI 消息，收到 chunk 后更新 content 字段，ngx-markdown 自动重新渲染