进阶路线

进阶路线

跨项目技术沉淀，按能力维度重组。 创建于 2026-04-09

项目知识版图

shopdiary-claude (3858行)     knowledge-hub (11195行)     market-ai-model (2794行)
┌─────────────────────┐    ┌─────────────────────┐    ┌─────────────────────┐
│ 企业级工程实践        │    │ AI 全栈 + 系统设计    │    │ 前端深度 + UX 优化    │
│ - 错误处理规范化      │    │ - RAG 架构           │    │ - AI 图片/视频       │
│ - E2E 测试           │    │ - 向量数据库          │    │ - 渐进式渲染          │
│ - 分页标准化         │    │ - 流式输出            │    │ - 轮询/进度追踪       │
│ - 请求层封装         │    │ - 部署/安全/性能       │    │ - HEIC 兼容          │
│ - React 17→18→19    │    │ - 测试/调试方法论      │    │ - 设计模式盘点        │
└─────────────────────┘    └─────────────────────┘    └─────────────────────┘

缩写：kh = knowledge-hub, sd = shopdiary-claude, ma = market-ai-model

能力地图（从三个项目中抽取）

能力 1：架构设计与技术选型

来源 章节 内容
kh Ch 1-2 项目全景 + 技术选型
sd Ch 1 企业级架构全景
sd Ch 6-7 请求层设计（直连 vs 转发）
ma Ch 18 10 个值得学的技术模式

能力 2：AI 工程（差异化亮点）

来源 章节 内容
kh Ch 5-7 数据库 + AI 层 + RAG 全链路
kh Ch 12 面试 FAQ（STAR 版）
kh Ch 33 原理深挖
ma Ch 1,3 AI 穿版/视频（AI 产品化经验）

能力 3：工程质量与规范

来源 章节 内容
kh Ch 36 测试策略
kh Ch 38 错误处理体系
sd Ch 12-13 错误处理规范化（120+ 文件实战）
sd Ch 15-16 静默吞错修复
sd Ch 3 E2E 测试

能力 4：性能优化

来源 章节 内容
kh Ch 37 RAG 链路性能画像 + Web Vitals
ma Ch 12 视频无黑屏切换
ma Ch 17 图片渐进式渲染（blur-up）
sd Ch 22 表格显示密度优化

能力 5：系统思维（资深核心）

来源 章节 内容
kh Ch 39 TypeScript 进阶
kh Ch 40 安全加固
kh Ch 41 系统设计延伸（扩展到 10 万用户）
kh Ch 42 调试方法论
ma Ch 19 踩坑与设计取舍

能力 6：Bug 排查故事库（面试弹药）

来源 章节 内容
kh Ch 21-27 RAG 去重/上下文污染/竞态/闭包
sd Ch 14-15 导出/分页/吞错
ma Ch 9-14 HEIC 兼容/进度计算/滑动冲突
kh Ch 42 通用排查框架

4 周推进计划

Week 1：架构 + AI 基础

天 内容 来源 时间
1 三个项目各自的架构全景，画出差异 kh Ch1, sd Ch1, ma Ch18 1.5h
2-3 SQL + 向量数据库 + HNSW kh Ch5 3h
4-5 AI 层 + RAG 全链路 kh Ch6-7 3h
6 流式输出 + SSE kh Ch9 1.5h
7 复习：面试 Q1-Q4 录音练习 kh Ch12 1h

动手做：

  • 本地启动 knowledge-hub，打开每个页面点一遍
  • 打开 Supabase Dashboard，看 6 张表的真实数据
  • 手动执行一次 match_chunks RPC，观察向量搜索结果
  • 用自己的话画一遍"项目数据流全景图"（不看文档）

本周产出：能用 2 分钟讲清楚 RAG 全流程 + 为什么这样选型

Week 2：工程质量

天 内容 来源 时间
1 测试策略 + RAG 评估方法 kh Ch36 1.5h
2-3 错误处理：先读理论框架，再看实战 kh Ch38 → sd Ch12-13 3h
4 静默吞错修复（120+ 文件怎么系统改） sd Ch15-16 1.5h
5 E2E 测试 sd Ch3 1h
6 动手：给 chunker 写 3 个测试 实践 1h
7 复习：面试"怎么保证质量""怎么处理错误" kh Ch36,38 1h

动手做：

  • 给 knowledge-hub 的 chunker.ts 写 3 个单元测试
  • 故意关掉 DashScope API Key，观察降级行为
  • 读 shopdiary 的错误处理 PR，理解 120+ 文件怎么系统化改

本周产出：能讲"我系统化修复了 120+ 文件的错误处理"这个故事

Week 3：性能 + 前端深度

天 内容 来源 时间
1 RAG 链路性能画像 + Web Vitals kh Ch37 1.5h
2 图片渐进式渲染 + blur-up ma Ch17 1h
3 视频无黑屏切换 + 进度追踪 ma Ch12 1h
4 React 17→18→19 演进 sd Ch11 1.5h
5 请求层封装设计 sd Ch4,6 1h
6 动手：用 console.time 给 RAG 链路画性能画像 实践 1h
7 复习：面试"做过什么性能优化" 跨项目整合 1h

动手做：

  • 给 RAG 链路每个环节加 console.time，记录耗时分布
  • 在浏览器 Lighthouse 跑一次 knowledge-hub，看 LCP/CLS
  • 回顾 market-ai 的 blur-up 实现，理解渐进式图片加载原理

本周产出：能讲 3 个不同领域的性能优化故事（RAG/图片/表格）

Week 4：系统思维 + 故事库打磨

天 内容 来源 时间
1 TypeScript 进阶 + 安全加固 kh Ch39-40 2h
2 系统设计（扩展到 10 万用户） kh Ch41 1.5h
3 调试方法论 kh Ch42 1h
4-5 Bug 故事库：从三个项目各挑 3 个最精彩的 见下表 3h
6 踩坑与设计取舍 ma Ch19 1h
7 模拟面试：随机抽问，限时回答 全部 1.5h

动手做：

  • 把 datasource 的 config 改为 Discriminated Union
  • 给一个 API Route 加 Zod 输入验证
  • 故意引入一个 bug，用假设驱动调试法定位

本周产出：9 个 Bug 故事能脱口而出，系统设计问题能聊 5 分钟

9 个精选 Bug 故事（面试弹药库）

# Bug 核心模式 来源 一句话记忆
1 RAG 上下文污染 累积状态泄漏 kh Ch22 历史消息携带了旧检索结果
2 流式响应串入 异步资源生命周期 kh Ch25 切换对话没 abort 旧流
3 全局搜索竞态 Race Condition kh Ch27 旧请求覆盖新请求结果
4 120+ 文件吞错 系统化重构方法论 sd Ch13 空 catch 导致错误静默
5 分页配置混乱 标准化治理 sd Ch17 统一分页参数消除不一致
6 usePagination 双重弹出 Hook 副作用设计 sd Ch15 多层 onError 重复触发
7 HEIC 图片不显示 浏览器兼容性 ma Ch10 iOS 拍照格式浏览器不支持
8 进度计算不一致 状态聚合逻辑 ma Ch13 总进度 < 单张进度的悖论
9 视频缩略图滑动冲突 事件冒泡/嵌套滚动 ma Ch14 内层滚动吃掉外层滑动

每日执行模板

每天 1.5h，分三段：

  30 min — 读（按当周计划，跨项目交叉读）
  30 min — 做（跑代码/写测试/加日志）
  30 min — 讲（挑 1 个问题，录音 2 分钟，回放检查）

周末 1h — 回顾本周：
  - "能讲清楚的" → 打勾
  - "还模糊的" → 下周重点攻

检验标准

  • 能用 2 分钟讲清楚 RAG 全流程（Week 1）
  • 能讲"120+ 文件错误处理规范化"的完整故事（Week 2）
  • 能讲 3 个不同领域的性能优化（Week 3）
  • 9 个 Bug 故事能脱口而出（Week 4）
  • 面试 FAQ 的 8 个问题都能接住追问聊 5 分钟（Week 4）
  • 系统设计问题"如果扩展到 10 万用户"能自由发挥（Week 4）

终极检验：找朋友或 AI 模拟面试 30 分钟，全程不看文档能自然对话 = 真正掌握。