《60天AI学习计划启动 | Day 47: 知识库版本管理与变更可视化（前端视角》

Day 47：知识库版本管理与变更可视化（前端视角）

学习目标

• 理解 文档/知识条目“版本”的意义：追溯回答依据、支持回滚/对比
• 设计 简单的 Document + DocumentVersion 数据模型
• 实现 一个最小的「版本列表 + diff 预览」前端结构

---

核心知识点

• 1. 版本模型

  export interface DocumentVersion {
    id: string
    version: number        // 1,2,3...
    content: string
    createdAt: number
    author?: string
    changeLog?: string
  }
  
  export interface Document {
    id: string
    title: string
    currentVersion: number
    versions: DocumentVersion[]
  }
  

  • 必要字段：version / createdAt / changeLog，方便展示“这一版改了啥”

• 2. 与回答关联

  export interface AnswerMeta {
    docId: string
    docVersion: number   // 当时使用的版本号
  }
  

  • 回答记录里带上 docVersion，前端可标注：“本回答基于《X》v3”

• 3. 前端展示

  • 文档详情页：
    • 当前内容（最新版本）
    • 右侧/下方：版本列表（版本号/时间/作者/备注）
  • 点击旧版本：显示旧内容；支持与当前版做简单 diff（行级对比即可）

---

简单实战代码示例

• 版本列表 + 选中版本视图

import React, { useState } from 'react'
import type { Document, DocumentVersion } from './types'

interface Props {
  doc: Document
}

const VersionList: React.FC<{
  versions: DocumentVersion[]
  onSelect: (v: DocumentVersion) => void
  selectedId?: string
}> = ({ versions, onSelect, selectedId }) => (
  <ul>
    {versions
      .slice()
      .sort((a,b) => b.version - a.version)
      .map(v => (
        <li
          key={v.id}
          onClick={() => onSelect(v)}
          style={{
            cursor:'pointer',
            fontWeight: v.id === selectedId ? 'bold' : 'normal'
          }}
        >
          v{v.version} · {new Date(v.createdAt).toLocaleString()}
          {v.changeLog && ` · ${v.changeLog}`}
        </li>
      ))}
  </ul>
)

export const DocumentWithVersions: React.FC<Props> = ({ doc }) => {
  const [selected, setSelected] = useState<DocumentVersion | null>(
    doc.versions.find(v => v.version === doc.currentVersion) || null
  )

  return (
    <div style={{ display:'flex', gap:16 }}>
      <div style={{ width:260 }}>
        <h4>版本列表</h4>
        <VersionList
          versions={doc.versions}
          selectedId={selected?.id}
          onSelect={setSelected}
        />
      </div>
      <div style={{ flex:1 }}>
        <h3>{doc.title}（当前 v{doc.currentVersion}）</h3>
        <h4>查看版本：v{selected?.version}</h4>
        <pre style={{ whiteSpace:'pre-wrap' }}>
          {selected?.content}
        </pre>
      </div>
    </div>
  )
}

简化版：只展示不同版本内容；如果以后要做 diff，可以前端引入 diff 库或简单按行对比。

---

明日学习计划预告（Day 48）

• 主题：前端标注/纠错 UI（用户修正 AI 答案并回流）
• 方向：
  • 设计“我来改一版更好的回答”的交互
  • 把用户修订内容与原问题/原答案一起存入反馈结构