问题跟踪与知识沉淀：从任务到知识的闭环）

📌 写给熟悉 Vue2.3 的你：

这篇文档讲的是「问题跟踪 + 知识沉淀」两大模块的完整实现，以及它们如何形成闭环。

业务概念偏多，但技术上都是你熟悉的：列表、表单、详情页、Markdown 编辑器......

碰到新概念我会用 Vue 做类比，帮你快速建立认知。

先记住一个核心类比：

Vue 2 的概念	React 里对应的东西	一句话解释
data() 里的数据	useState()	定义响应式变量，变了就重新渲染
computed 计算属性	函数里直接算 / useMemo	根据已有数据算出新值
methods 方法	函数组件里定义的函数	处理点击等交互逻辑
mounted 生命周期	useEffect(() => {}, [])	组件第一次渲染完后执行
watch 侦听器	useEffect(() => {}, [依赖])	依赖变了就执行
props 父传子	函数的参数 Props	一模一样，父组件传进来的数据
$emit 子传父	父传一个回调函数当 props	React 没有 $emit，靠"父传函数、子调用"来传值
v-for 循环渲染	array.map(item => <div>...</div>)	JS 原生的 map 方法
v-if 条件渲染	{条件 && <组件 />} 或三元表达式	JS 里的短路与 / 三元

🌍 英文词汇小词典（先混个脸熟）：

• issue --- 问题（这里指"需要跟踪解决的系统性问题"）
• knowledge --- 知识
• root cause --- 根因（问题的根本原因）
• RCA --- Root Cause Analysis，根因分析
• severity --- 严重程度
• owner --- 负责人（这件事归谁管）
• reporter --- 上报人（谁提的这个问题）
• action item --- 行动项（要做的具体事情）
• deadline --- 截止日期
• priority --- 优先级
• status --- 状态
• draft / published / archived --- 草稿 / 已发布 / 已归档
• Markdown --- 一种轻量级标记语言（用 #、*、- 等符号排版）
• 闭环 --- closed loop，事情从开始到结束有完整流程，不会不了了之

---

前言

在任务协同系统中，任务处理完就结束了吗？并没有。很多任务背后藏着系统性的问题，如果只是把任务关了，下次还会再犯。同样，很多任务的解决方案很有价值，如果只是散落在聊天记录和任务描述里，后来人找不到。

所以需要两个闭环：

1. 问题跟踪：把重复性的任务升级为"问题"，做根因分析和跟踪，直到彻底解决
2. 知识沉淀：把有价值的解决方案整理成知识库，让后人能搜到、能复用

本文分享问题跟踪 + 知识沉淀的完整实现，以及两者如何联动形成闭环。

本文基于真实生产项目脱敏整理。

---

一、整体架构

🎓 小白课堂：任务、问题、知识，三者是什么关系？

想象你在公司处理工单：

• 任务（task） = 一次具体的工单（比如"登录报错了，帮我看看"）

  • 一次性的，解决了就关闭

• 问题（issue） = 反复出现的系统性毛病（比如"登录模块每周都崩一次"）

  • 需要找到根因，彻底解决，确保不再发生
  • 生命周期更长：分析 → 改进 → 验证 → 关闭

• 知识（knowledge） = 踩过坑后总结的经验文档（比如"登录报错的3种原因和解决办法"）

  • 可以复用，后来人搜一下就知道怎么办

闭环流程 ：

任务解决了 → 发现是老问题 → 升级为问题 → 根因分析 → 改进落地 → 沉淀成知识 → 后人搜到知识 → 新任务快速解决

就像从"救火"到"防火"再到"消防手册"的升级过程。

两大模块的关系

任务处理
   │
   ├── 升级为问题 ──→ 问题跟踪（根因分析、改进措施、跟踪闭环）
   │
   └── 转知识   ──→ 知识沉淀（分类管理、检索、复用）
                           ↑
                           │
                     问题解决后沉淀知识

• 任务是"一次性"的，解决了就关了
• 问题是"系统性"的，需要跟踪到底，确保不再发生
• 知识是"可复用"的，从任务和问题中提取，供后来人查询

功能清单

模块	功能
问题跟踪	问题列表、创建问题、问题详情、根因分析、改进措施、状态流转
知识沉淀	知识列表、创建知识、知识详情、分类管理、全文检索
联动能力	从任务升级问题、从任务转知识、从问题转知识、关联引用

---

二、问题跟踪系统

🎓 小白课堂：什么是问题跟踪系统？

你可以把它理解成"问题版的 JIRA"或者"高级 Bug 追踪器"。

普通任务是"做一件事"，问题跟踪是"搞定一类事"。

比如：

• 任务 = 修复今天的登录报错
• 问题 = 为什么登录模块老是报错？根因是什么？怎么彻底解决？

问题跟踪强调的是根因分析 和持续改进，而不是一次性的修复。

对应到 Vue 项目，就是一个标准的"列表 + 详情 + 表单"的后台模块，

跟你写过的用户管理、订单管理差不多，只是业务字段不同。

2.1 问题与任务的区别

维度	任务	问题
目标	解决具体的事情	解决系统性的根因
生命周期	短（小时/天）	长（天/周/月）
关注点	能不能解决	会不会再发生
产出	任务关闭	改进措施落地 + 知识沉淀
负责人	处理人	问题Owner

2.2 问题状态流转

新建 → 分析中 → 已确认 → 改进中 → 已解决 → 已关闭
         ↑         ↑        ↑
         └── 补充信息 ───┘

状态	说明
新建	刚从任务升级或手动创建，还没开始分析
分析中	正在做根因分析，确认问题本质
已确认	根因已确认，等待排期改进
改进中	改进措施正在执行
已解决	改进完成，验证通过
已关闭	问题彻底关闭，持续观察

💡 小白提示：状态流转就像快递的物流信息：

已下单 → 已发货 → 运输中 → 派送中 → 已签收。

每个状态代表一个阶段，往前走需要触发特定操作。

技术上就是改一个 status 字段的值。

2.3 问题数据模型

interface Issue {
  // 👆 interface = 接口，TypeScript 里用来定义"对象长什么样"
  //    你可以理解成 Vue 里 props 的 type 定义，或者后端返回数据的"说明书"
  id: string;                      // 问题的唯一 ID
  title: string;                   // 问题标题（一句话概括）
  description: string;             // 问题描述（详细说明现象）
  category: string;                // 问题分类（比如：前端Bug/后端Bug/流程问题）
  severity: 'high' | 'medium' | 'low';
  // 👆 严重程度：高/中/低
  //    'high' | 'medium' | 'low' 是联合类型（Union Type），表示只能是这三个值之一
  //    类比 Vue：props 的 validator 校验，只允许这几个值
  status: IssueStatus;             // 状态（IssueStatus 是另外定义的枚举或类型）
  owner: string;                   // 问题负责人（谁来跟进解决）
  reporter: string;                // 上报人（谁提的这个问题）
  source_task_ids: string[];       // 来源任务 ID（从哪些任务升级来的，可能多个）
  // 👆 string[] = 字符串数组，每个元素是任务 ID

  // 根因分析
  // 👆 RCA = Root Cause Analysis，根因分析
  root_cause: string;              // 根因描述（一句话说清楚根本原因是什么）
  root_cause_category: string;     // 根因分类（代码Bug/配置问题/流程缺失/人为误操作等）
  rca_analysis: string;            // 详细根因分析（Markdown 格式，长篇大论）

  // 改进措施
  action_items: ActionItem[];
  // 👆 行动项列表（要做哪些事情来解决这个问题）
  //    ActionItem[] 表示 ActionItem 类型的数组
  //    每个行动项就是一个 ActionItem 对象

  // 时间信息
  created_at: number;              // 创建时间（Unix 时间戳）
  confirmed_at?: number;           // 确认时间（可选，状态变为"已确认"的时间）
  // 👆 ? 表示可选属性，这个字段可以没有
  resolved_at?: number;            // 解决时间（可选）
  closed_at?: number;              // 关闭时间（可选）
  updated_at: number;              // 最后更新时间
}

interface ActionItem {
  // 👆 行动项 = 要做的具体事情
  id: string;                      // 行动项 ID
  description: string;             // 改进内容（具体要做什么）
  owner: string;                   // 负责人（谁来做这件事）
  deadline: number;                // 截止日期（时间戳）
  status: 'pending' | 'doing' | 'done' | 'cancelled';
  // 👆 状态：待开始 / 进行中 / 已完成 / 已取消
  priority: 'high' | 'medium' | 'low';
  // 👆 优先级：高 / 中 / 低
  result?: string;                 // 改进结果说明（做完了写一下效果）
}

2.4 从任务升级问题

在任务详情页加一个「升级为问题」按钮，点击后弹出表单，自动带入任务信息：

// 升级为问题
async function handleUpgradeToIssue(task: Task) {
  // 👆 接收一个 Task 对象作为参数
  //    async 表示这是个异步函数，里面有 await
  Modal.confirm({
    // 👆 antd 的 Modal.confirm = 确认弹窗
    //    类比 Vue：this.$confirm()
    title: '升级为问题',
    content: '确认将此任务升级为问题进行跟踪？',
    onOk: async () => {
      // 👆 用户点"确定"后执行
      const issue = await createIssue({
        // 👆 调用创建问题的接口（API 层封装的函数）
        //    await 等待接口返回
        title: `【问题跟踪】${task.title}`,
        // 👆 自动生成标题，前面加个标记
        description: task.description,
        // 👆 自动带入任务描述
        severity: task.priority === 'P1' ? 'high' : 'medium',
        // 👆 任务优先级是 P1 的话，严重程度设为 high，否则 medium
        //    三元表达式：条件 ? 值1 : 值2
        source_task_ids: [task.task_id],
        // 👆 来源任务 ID（关联起来，方便追溯）
        reporter: currentUser.id,
        // 👆 上报人 = 当前登录用户
        owner: task.assignee,
        // 👆 负责人 = 任务处理人（默认分给同一个人）
      });
      message.success('已升级为问题');
      // 👆 右上角弹出成功提示
      navigate(`/issue/${issue.id}`);
      // 👆 跳转到新建的问题详情页
      //    类比 Vue：this.$router.push(`/issue/${issue.id}`)
    },
  });
}

升级后，任务详情页显示「已升级为问题 #XXX」的关联标识，点击跳转。

2.5 问题详情页结构

问题详情页
├── 顶部：标题 + 状态标签 + 严重程度 + 负责人
├── Tab 切换
│   ├── 概览：基本信息 + 来源任务 + 关联知识
│   ├── 根因分析：5 Why + 根因分类 + 分析结论
│   ├── 改进措施：行动项列表（可增删改，支持甘特图视图）
│   └── 操作记录：所有状态变更和操作日志
└── 操作栏：编辑 / 确认根因 / 开始改进 / 标记已解决 / 关闭

💡 小白提示：这种详情页结构在后台系统里超级常见------

顶部信息 + Tab 切换内容 + 底部操作栏。

用 Vue 写的话，就是 el-tabs 包几个 el-tab-pane，

每个 pane 里放不同的子组件。React 写法也一样，

用 antd 的 Tabs 组件，每个 Tabs.TabPane 里放组件。

2.6 改进行动项管理

改进行动项是问题跟踪的核心------分析得再好，不落地也没用。

// 行动项列表
function ActionItemsList({ items, onChange }) {
  // 👆 items = 行动项数组（父组件传进来的）
  //    onChange = 数据变化时的回调函数（子传父的方式）
  //    类比 Vue：props.items + this.$emit('change', newItems)

  const handleAdd = () => {
    // 弹出新增行动项表单
    // 👆 具体弹出逻辑省略了，大概就是弹个 Modal，填完点确定加一条
  };

  const handleUpdateStatus = (id, status) => {
    // 👆 更新某个行动项的状态
    const updated = items.map(item =>
      // 👆 map 遍历，找到 id 匹配的那项，更新它的 status
      item.id === id ? { ...item, status } : item
      // 👆 { ...item, status } = 展开 item 的所有属性，再覆盖 status
      //    为什么不直接 item.status = status？
      //    因为 React 讲究"不可变数据"，要生成一个新对象，不能直接修改原对象
      //    类比 Vue：Vue 里直接改属性也行，因为有响应式系统
      //    但 React 要 setState 传一个新值，才会触发重新渲染
    );
    onChange(updated);
    // 👆 调用父组件的回调，把新数组传出去
  };

  return (
    <div>
      <Button type="primary" onClick={handleAdd}>+ 添加改进项</Button>
      <Table
        dataSource={items}
        // 👆 表格数据源
        columns={[
          // 👆 列配置数组，每一项是一列
          { title: '改进内容', dataIndex: 'description' },
          // 👆 title = 列标题，dataIndex = 对应数据的字段名
          { title: '负责人', dataIndex: 'owner' },
          { title: '截止日期', dataIndex: 'deadline', render: formatDate },
          // 👆 render = 自定义渲染函数，把时间戳格式化成日期字符串
          {
            title: '优先级', dataIndex: 'priority',
            render: p => <Tag color={priorityColor[p]}>{priorityLabel[p]}</Tag>,
            // 👆 用 Tag 组件显示优先级，不同优先级不同颜色
            //    priorityColor 是一个颜色映射对象，比如 { high: 'red', medium: 'orange', low: 'green' }
            //    priorityLabel 是中文标签映射
          },
          {
            title: '状态', dataIndex: 'status',
            render: (s, record) => (
              // 👆 render 函数的参数：(当前值, 整行数据)
              <Select value={s} onChange={val => handleUpdateStatus(record.id, val)}>
                {/* 👆 状态列直接是个下拉选择器，选完就更新 */}
                <Option value="pending">待开始</Option>
                <Option value="doing">进行中</Option>
                <Option value="done">已完成</Option>
                <Option value="cancelled">已取消</Option>
              </Select>
            ),
          },
          {
            title: '操作',
            render: (_, record) => (
              // 👆 操作列，_ 表示第一个参数不用（当前值），用第二个参数（整行数据）
              <Space>
                <a onClick={() => editActionItem(record)}>编辑</a>
                <a onClick={() => deleteActionItem(record.id)}>删除</a>
              </Space>
            ),
          },
        ]}
      />
    </div>
  );
}

---

三、知识沉淀系统

🎓 小白课堂：知识沉淀系统是什么？

你可以把它理解成"团队内部的 Wiki / 知识库"。

就像你工作中遇到的问题，解决了之后写一篇文档记录下来，

下次再碰到（或者新人碰到），搜一下就能找到答案。

知识沉淀系统的核心能力：

1. 写：把经验写成文档（Markdown 编辑器）
2. 存：分类管理，有标签，有状态
3. 搜：全文检索，能快速找到想要的
4. 用：查看、点赞、评论、分享

对应到 Vue 项目，就是一个"文章管理系统"------

列表页 + 详情页 + 编辑器，跟你写过的 CMS 内容管理差不多。

3.1 什么是"知识"

知识不是任务描述的复制粘贴，而是经过整理的、可复用的内容。一条知识通常包含：

• 标题：问题是什么（要能被搜到）
• 问题描述：背景和现象
• 解决方案：具体步骤或方法
• 原因分析：为什么会出现（可选）
• 适用范围：什么场景下适用
• 相关分类：属于哪个知识分类

3.2 知识数据模型

interface KnowledgeArticle {
  // 👆 article = 文章，一条知识就是一篇文章
  id: string;                      // 文章 ID
  title: string;                   // 标题
  summary: string;                 // 摘要（一句话概括，列表页显示）
  content: string;                 // 正文（Markdown 格式的字符串）
  category_id: string;             // 知识分类 ID（属于哪个分类）
  tags: string[];                  // 标签数组（可以有多个标签）
  author: string;                  // 作者
  source_type: 'task' | 'issue' | 'manual';
  // 👆 来源类型：从任务转来的 / 从问题转来的 / 手动创建的
  source_id?: string;              // 来源 ID（来源任务或问题的 ID，可选）
  status: 'draft' | 'published' | 'archived';
  // 👆 状态：草稿 / 已发布 / 已归档
  view_count: number;              // 浏览数
  like_count: number;              // 点赞数
  comment_count: number;           // 评论数
  created_at: number;              // 创建时间
  updated_at: number;              // 更新时间
}

3.3 从任务转知识

任务解决后，如果解决方案有价值，可以一键转知识：

async function handleConvertToKnowledge(task: Task) {
  // 👆 把任务转成知识
  // 新建知识草稿，自动带入任务信息
  const draft = await createKnowledgeDraft({
    // 👆 调用创建知识草稿的接口
    title: task.title,
    // 👆 标题直接用任务标题
    summary: task.description,
    // 👆 摘要用任务描述
    content: `## 问题描述\n${task.description}\n\n## 解决方案\n${task.resolution || ''}\n\n## 原因分析\n${task.root_cause || ''}\n`,
    // 👆 正文用模板字符串拼好，自动搭好骨架
    //    ## 是 Markdown 的二级标题
    //    \n 是换行符
    //    task.resolution || '' = 如果没有解决方案就填空，避免显示 undefined
    category_id: '',
    // 👆 分类留空，让用户自己选
    source_type: 'task',
    // 👆 标记来源是任务
    source_id: task.task_id,
    // 👆 来源任务 ID，方便追溯
    status: 'draft',
    // 👆 先存成草稿，不直接发布
  });

  // 跳转到知识编辑页，让用户完善后发布
  navigate(`/knowledge/${draft.id}/edit`);
  // 👆 跳转到编辑页，用户修改完了自己点发布
}

设计思路：转知识不是一键发布，而是生成草稿------因为任务描述不等于知识，需要人来整理和提炼。系统做的是"搭骨架"，人做的是"填血肉"。

3.4 知识列表与检索

知识列表支持：

• 按分类筛选（左侧分类树）
• 全文检索（标题 + 摘要 + 正文）
• 按标签筛选
• 按热度/最新/最多浏览排序
• 按作者筛选

🎓 小白课堂：自定义 Hook 是什么？

自定义 Hook = 以 use 开头的函数，里面封装了一些状态和逻辑，可以在多个组件里复用。

生活例子：你每天早上都要做"刷牙 + 洗脸 + 吃早饭"，

你可以把这些步骤打包成一个叫"早晨例行公事"的流程，每天直接调用就行。

自定义 Hook 就是把一组相关的逻辑打包起来，组件里直接调用。

对应 Vue：

• 类似 mixin，但比 mixin 好（来源清晰，不会命名冲突）
• 也类似 Composition API 的 setup 函数（React Hook 其实就是 Vue Composition API 的灵感来源）

比如 useKnowledgeList 就是一个自定义 Hook，

封装了"获取知识列表"的所有逻辑：发请求、loading、分页、参数管理......

组件里一行代码就能用。

function KnowledgeListPage() {
  // 👆 知识列表页组件

  const [searchText, setSearchText] = useState('');
  // 👆 搜索关键词
  //    对应 Vue：data() { return { searchText: '' } }
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  // 👆 选中的分类 ID（null 表示全部分类）
  //    string | null 是联合类型：可以是字符串，也可以是 null

  const { data } = useKnowledgeList({
    // 👆 调用自定义 Hook 获取知识列表数据
    //    返回 data 对象，里面有 records（列表数据）和 total（总数）
    search: searchText,
    // 👆 搜素关键词
    category_id: selectedCategory || undefined,
    // 👆 分类 ID（如果选了就传，没选就传 undefined）
    //    为什么不直接传 selectedCategory？因为 null 可能会被后端当作字符串 "null"
    //    传 undefined 表示不传这个参数
    status: 'published',
    // 👆 只查已发布的
  });

  return (
    <div className="knowledge-list-page">
      {/* 👆 className = CSS 类名，相当于 Vue 的 class */}
      <LeftSidebar>
        {/* 👆 左侧边栏 */}
        <CategoryTree onSelect={setSelectedCategory} />
        {/* 👆 分类树，选中分类时更新 selectedCategory */}
      </LeftSidebar>
      <MainContent>
        {/* 👆 主内容区 */}
        <SearchBar value={searchText} onChange={setSearchText} />
        {/* 👆 搜索框 */}
        <ArticleList articles={data.records} />
        {/* 👆 文章列表 */}
        <Pagination total={data.total} />
        {/* 👆 分页组件 */}
      </MainContent>
    </div>
  );
}

3.5 知识详情页

知识详情页
├── 标题 + 分类 + 标签
├── 作者 + 发布时间 + 浏览数 + 点赞数
├── 正文（Markdown 渲染，支持代码高亮）
├── 相关推荐（同分类/同标签的知识）
├── 评论区
└── 操作栏：点赞 / 收藏 / 分享 / 编辑（作者）

3.6 Markdown 编辑器

知识正文用 Markdown 编辑，左右分栏预览：

🎓 小白课堂：Markdown 是什么？

Markdown 是一种轻量级标记语言，用简单的符号来排版。

比如：

• # 标题 → 一级标题
• ## 小标题 → 二级标题
• **加粗** → 加粗
• - 列表项 → 无序列表
• 代码 → 行内代码

程序员写文档、写 README、写博客几乎都用 Markdown。

好处是纯文本、格式简单、到处都能渲染。

import ReactMarkdown from 'react-markdown';
// 👆 react-markdown 是一个 React 组件，用来把 Markdown 字符串渲染成 HTML
import remarkGfm from 'remark-gfm';
// 👆 remark-gfm = GitHub Flavored Markdown 插件
//    支持表格、任务列表、删除线等 GitHub 扩展的 Markdown 语法
import rehypeHighlight from 'rehype-highlight';
// 👆 rehype-highlight = 代码高亮插件
//    让代码块里的代码有语法高亮（不同颜色显示关键字、字符串等）
import 'highlight.js/styles/github.css';
// 👆 highlight.js 的 GitHub 主题样式
//    为什么要 import CSS？React 里样式也是模块，可以直接 import

function KnowledgeEditor({ initialValue, onChange }) {
  // 👆 知识编辑器组件
  //    initialValue = 初始内容（编辑已有文章时传入）
  //    onChange = 内容变化时的回调
  const [value, setValue] = useState(initialValue || '');
  // 👆 编辑器内容的状态
  //    initialValue || '' = 有初始值就用，没有就空字符串

  return (
    <div className="editor-wrapper">
      {/* 👆 编辑器容器，左右分栏布局 */}
      <div className="editor-pane">
        {/* 👆 左侧：编辑区 */}
        <textarea
          value={value}
          onChange={e => setValue(e.target.value)}
          // 👆 受控组件：value 由 state 控制，onChange 更新 state
          //    类比 Vue：v-model="value"（双向绑定）
          //    React 没有 v-model，要手动写 value + onChange
          placeholder="使用 Markdown 编写知识正文..."
        />
      </div>
      <div className="preview-pane">
        {/* 👆 右侧：预览区 */}
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          // 👆 remark 插件（处理 Markdown 语法扩展）
          rehypePlugins={[rehypeHighlight]}
          // 👆 rehype 插件（处理 HTML 渲染阶段的代码高亮）
        >
          {value}
          {/* 👆 要渲染的 Markdown 内容，作为组件的 children 传入 */}
        </ReactMarkdown>
      </div>
    </div>
  );
}

---

四、闭环：任务 → 问题 → 知识

🎓 小白课堂：什么是"闭环"？

"闭环"就是事情有始有终，不会石沉大海。

想象一个反馈循环：

1. 你发现了一个问题
2. 你记录下来并跟进解决
3. 你把经验总结成文档
4. 别人遇到类似问题，搜到文档，快速解决
5. 别人又有新的经验，继续补充文档

这样一圈一圈转起来，团队的知识库就越来越丰富，

同样的坑不会反复踩------这就叫"形成闭环"。

三者不是孤立的，而是形成一个闭环：

任务处理中
   │
   ├─→ 发现是重复问题 ─→ 升级为问题 ─→ 根因分析 ─→ 改进措施 ─→ 解决关闭
   │                          ↑                                        │
   │                          │                                        ↓
   │                    关联来源任务                           沉淀为知识
   │                          ↑                                        │
   └─→ 解决方案有价值 ──→ 转知识 ←───────────────────────────────────┘
                                    ↑
                                    │
                              知识被引用/复用
                                    │
                                    ↓
                              新任务快速解决

关联与引用

• 任务详情显示：关联的问题、关联的知识
• 问题详情显示：来源任务、已沉淀的知识
• 知识详情显示：来源任务/问题、被引用的任务

💡 小白提示：怎么实现"关联"？

很简单，就是在各自的数据模型里加引用字段：

• 任务里有 related_issue_ids 和 related_knowledge_ids
• 问题里有 source_task_ids 和 related_knowledge_ids
• 知识里有 source_type 和 source_id

就像你手机通讯录里每个人都有"所属公司"、"备注"等字段，

通过这些字段你就能找到相关的人。数据关联也是一个道理。

统计与度量

可以做一些指标来衡量知识沉淀的效果：

• 知识复用率：有多少任务是通过查找已有知识解决的
• 问题复发率：已解决的问题有没有再发生
• 知识增长率：每个月新增多少条知识
• 任务转知识率：关闭的任务中有多少被转成了知识

---

五、设计亮点总结

体验层面

1. 一键升级/转知识：从任务到问题/知识，一键直达，减少操作成本
2. 自动带入信息：升级/转换时自动带入标题、描述等，不用重新写
3. 相互关联跳转：任务、问题、知识之间互相有链接，方便追溯
4. Markdown 编辑预览：写知识时左边写右边看，所见即所得

架构层面

1. 三模块各司其职：任务管执行、问题管改进、知识管复用，职责清晰
2. 数据模型独立又关联：各有自己的表和接口，通过 source_id 等字段关联
3. 状态机明确：问题有独立的状态流转，不和任务状态混在一起
4. 来源可追溯：每条知识都有来源信息，知道是从哪来的

工程层面

1. 复用列表组件：问题列表和知识列表都可以复用通用列表框架
2. Markdown 渲染统一：问题分析、知识正文都用同一套 Markdown 渲染组件
3. 搜索能力可复用：分类树 + 搜索框 + 列表的模式可以抽象成通用组件
4. 草稿机制：转知识生成草稿而不是直接发布，保证知识质量

---

六、可扩展方向

1. AI 辅助总结：AI 自动从任务描述中提取要点，生成知识草稿
2. 知识图谱：知识之间建立关联，形成知识图谱，推荐相关知识
3. 问题看板：按状态/负责人/分类看问题分布，类似看板视图
4. 社区化：知识可以评论、点赞、讨论，形成社区氛围
5. 知识评分：用户可以给知识打分，高质量知识排序靠前
6. 定期回顾：问题关闭后定期（如30天）检查是否复发，形成闭环验证

---

写在最后

很多团队都有类似的困扰：问题重复发生、经验无法传承、新人来了总踩坑。原因不是大家不努力，而是缺少把"事"变成"知识"的机制。

任务解决了，只是做完了一件事；

问题根因找到了，才是解决了一类事；

知识沉淀下来了，才能让后来人不再踩同样的坑。

任务 → 问题 → 知识，这三步走通了，团队的能力才能真正积累起来，而不是随着人的离开而流失。

希望这篇文章对你搭建团队的问题跟踪和知识沉淀体系有帮助。有想法欢迎在评论区交流 👋

---

关于本文：基于真实生产项目脱敏整理，技术栈为 React 19 + TypeScript + Vite + Ant Design。文中代码为教学目的做了精简，实际项目中请根据具体需求调整。

---

📝 小白学习路线建议

如果你是第一次接触 React + TypeScript，建议按这个顺序消化：

顺序	内容	对应章节	难度
1	先看懂两个数据模型（Issue / KnowledgeArticle）	第二章第三节、第三章第二节	⭐ 简单
2	看"从任务升级问题"，理解简单的交互逻辑	第二章第四节	⭐ 简单
3	看行动项列表组件，理解 antd Table 的用法	第二章第六节	⭐⭐ 中等
4	看知识列表页，理解自定义 Hook 的用法	第三章第四节	⭐⭐⭐ 重点
5	看 Markdown 编辑器，理解受控组件和第三方库	第三章第六节	⭐⭐ 中等
6	理解"任务→问题→知识"的业务闭环和数据关联	第四章	⭐⭐ 综合

📋 核心概念总结表

概念	是什么	类比 Vue	一句话记住
useState	定义响应式状态变量	data()	变了就重新渲染
useEffect	处理副作用（请求、DOM、订阅等）	mounted + watch	依赖变了就执行
自定义 Hook	以 use 开头的可复用逻辑函数	类似 mixin / Composition API	状态逻辑抽出来复用
interface	定义对象的类型结构	类似 props 的 type 定义	对象长什么样的说明书
联合类型	`A	B` 表示可以是 A 也可以是 B	类似 props 允许多种 type
可选属性	name?: string 表示这个字段可有可无	---	字段后面加个问号
受控组件	value + onChange 手动控制输入框的值	v-model（但 React 要手写）	React 表单的标配
不可变数据	不直接修改原对象，生成新对象	Vue 可以直接改，React 不行	给 setState 传新值才会渲染
问题跟踪	对系统性问题的根因分析和持续改进	---	从"救火"到"防火"
知识沉淀	把经验整理成可复用的文档	---	让后来人不再踩同样的坑
闭环	有始有终的完整流程	---	任务→问题→知识→复用
Markdown	轻量级标记语言	---	用 #、*、- 等符号排版

学完之后，你可以尝试回答这几个问题来检验自己：

1. React 里子组件怎么把数据传给父组件？（对比 Vue 的 $emit）
2. 自定义 Hook 和普通函数有什么区别？
3. 什么是"受控组件"？为什么 React 里没有 v-model？
4. 任务、问题、知识三者有什么区别和联系？
5. "从任务转知识"为什么生成草稿而不是直接发布？