docs(architecture): 组件化重构专项完成 - 同步 005 lastUpdate + known-issues 第 25 章
- 005 JSON: lastUpdate 更新为组件化重构专项全量完成摘要 - known-issues.md: 新增第 25 章(4 个小节:底座使用规则/拆分模式/迁移规则/验证规则) - 9 个巨型文件全部 ≤500 行,49 个重复组件全部删除
This commit is contained in:
@@ -1301,3 +1301,50 @@ if (announcement.type === "school") {
|
||||
| 多余的 `}` 或 `)` 字符 | 迁移后用 tsc 全量校验 | 手动编辑后未运行 tsc(TS1005/TS1128 语法错误) |
|
||||
| questions/data-access.ts 等大文件分批迁移 | 完整迁移所有 `cache(...)` 调用至 cacheFn | 部分迁移导致 `import { cache }` 已删但调用仍存 |
|
||||
|
||||
---
|
||||
|
||||
## 25. 组件化重构专项(2026-07-06)
|
||||
|
||||
### 25.1 共享底座使用规则
|
||||
|
||||
| 规则 | 正确写法 | 错误写法 |
|
||||
|------|---------|---------|
|
||||
| 错误边界必须用 preset | `<SectionErrorBoundary namespace="x">` | 自行实现类组件 |
|
||||
| 统计卡片必须用 StatsGrid | `<StatsGrid items={[...]} />` | 手写 grid + StatCard 循环 |
|
||||
| 骨架卡片必须用 SkeletonCard | `<SkeletonCard variant="table" />` | 手写 Card + Skeleton 布局 |
|
||||
| 新增 `*-filters.tsx` 禁止 | 用 `<FilterBar>` + `<FilterSearchInput>` 组合 | 新建模块专属筛选器文件 |
|
||||
| ErrorBoundary 基础类不直接使用 | 通过 SectionErrorBoundary/WidgetBoundary preset | 直接 `<ErrorBoundary>` |
|
||||
| FilterBar 是 children-based 组合式 | `<FilterBar><FilterSearchInput/><Select/></FilterBar>` | 传入 fields 配置数组 |
|
||||
|
||||
### 25.2 巨型文件拆分模式
|
||||
|
||||
| 规则 | 正确写法 | 错误写法 |
|
||||
|------|---------|---------|
|
||||
| 容器+子组件拆分保持外部 API 不变 | 容器 props 签名不变,子组件通过 props 接收数据 | 改变容器导出名或 props |
|
||||
| 容器目标 ≤300 行,子组件各 ≤200 行 | 拆分后容器仅负责状态编排与 Server Action 调用 | 容器保留大量渲染逻辑 |
|
||||
| 纯函数抽离为工具模块 | `utils/exam-structure-tree.ts` 含递归计算/收集/扁平化 | 在组件中写复杂纯函数 |
|
||||
| 持久化逻辑抽为 Hook | `use-lesson-plan-persistence.ts` 封装 autoSave/effect | 容器内联 useEffect 处理持久化 |
|
||||
| 流式响应状态保持稳定 | `useAiChatStream` hook 在容器中调用,AbortController 用 useRef | 子组件持有流式状态 |
|
||||
| Tiptap 编辑器 SSR 配置 | `immediatelyRender: false` 必须保留 | 拆分时遗漏 SSR 配置 |
|
||||
| dashboard 4 角色仅抽象布局壳 | `<DashboardShell title stats actions>{children}</DashboardShell>` | 强制 4 角色使用相同内容区 |
|
||||
|
||||
### 25.3 重复组件迁移规则
|
||||
|
||||
| 规则 | 正确写法 | 错误写法 |
|
||||
|------|---------|---------|
|
||||
| filter 组件迁到 app 层就近位置 | `app/(dashboard)/.../xxx-filters.tsx` | 保留在 modules 层 |
|
||||
| 删除旧组件不留 backwards-compat shim | 直接删除文件,调用方改 import | 保留 re-export 文件 |
|
||||
| 同名冲突优先删除模块层版本 | textbooks 的 `section-error-boundary.tsx` 删除 | 保留两份同名文件 |
|
||||
| 单数与复数重复时合并 | attendance 的 `attendance-stats-card.tsx`(单数)删除 | 保留两份 |
|
||||
| StatsGrid 列数支持 2/3/4/5 | `<StatsGrid columns={5}>` 按需指定 | 固定 4 列 |
|
||||
|
||||
### 25.4 验证规则
|
||||
|
||||
| 规则 | 正确写法 | 错误写法 |
|
||||
|------|---------|---------|
|
||||
| 拆分后 tsc + lint 全量验证 | `npx tsc --noEmit` + `npm run lint` | 仅验证修改文件 |
|
||||
| 旧组件名 grep 确认无残留 | 搜索 import 路径 + 组件名 | 仅搜索文件名 |
|
||||
| i18n 键同步新增 | SectionErrorBoundary 的 namespace 需有 `error.boundaryTitle` 等键 | 新增 namespace 但不补 i18n 键 |
|
||||
| 架构文档同步 004/005 | 每批闭环后更新 exports/lastUpdate | 全部完成后才更新 |
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user