项目 04 前端设计稿：RAG 个人知识库

1. 产品气质

这是一个知识工作台。前端重点是让用户相信答案来源可靠，因此引用、检索片段和索引状态必须非常清楚。

关键词：

• 来源可信
• 文档可追踪
• 检索透明
• 流式回答
• 知识库管理

2. 页面结构

Sidebar
  Knowledge Bases
  Documents
  Ask
  Retrieval Debug
  Feedback

Main
  根据页面切换内容

Right Panel
  Citations
  Source Preview
  Retrieval Details

3. 知识库首页

卡片字段：

• 知识库名称。
• 文档数量。
• 已索引 chunk 数量。
• 最近更新时间。
• 健康状态：Ready / Indexing / Error。

顶部操作：

• 新建知识库。
• 上传文档。
• 进入问答。

4. 文档管理页

表格列：

• 文档名。
• 类型。
• 大小。
• 解析状态。
• Chunk 数。
• 上传时间。
• 操作。

状态设计：

• uploaded：灰色标签。
• parsing：蓝色旋转点。
• indexed：绿色标签。
• failed：红色标签，支持查看错误。

5. 问答页面

桌面布局：

┌──────────────────────────────┬──────────────────────┐
│ Chat Area                    │ Citation Panel        │
│ User Question                │ Source 1              │
│ Assistant Streaming Answer   │ Source 2              │
│ Follow-up Questions          │ Source Preview        │
├──────────────────────────────┴──────────────────────┤
│ Composer: question input, KB selector, ask button    │
└──────────────────────────────────────────────────────┘

回答卡片必须包含：

• 生成状态。
• 回答正文。
• 内联引用编号，如 [1]。
• 来源列表。
• 反馈按钮。

6. 引用来源面板

每个引用卡片展示：

• 文档标题。
• 相关片段。
• 相似度。
• 打开原文按钮。

点击引用：

• 右侧展示更长上下文。
• 对应回答中的引用编号高亮。
• 如果来源不可用，显示错误状态。

7. 检索调试页面

适合展示你的 AI 工程理解。

控件：

• Query 输入。
• topK。
• Score threshold。
• Knowledge Base 选择。

结果：

• 按 score 排序的 chunk 列表。
• 每条 chunk 显示来源、score、文本片段。
• 右侧展示“将发送给模型的上下文预览”。

8. 空状态

场景	文案方向
没有知识库	创建第一个知识库
知识库无文档	上传文档后才能提问
文档解析失败	查看错误并重新解析
无检索结果	调低阈值或换一种问法
回答无引用	提醒答案可信度不足

9. 实现提示

• CitationPanel 独立为可复用组件。
• SourcePreviewDrawer 支持从回答和调试页复用。
• RAG 消息类型要区分普通文本、引用、追问、反馈。
• 流式回答时引用可以先显示 skeleton，最终补齐。