51 lines
2.3 KiB
Markdown
51 lines
2.3 KiB
Markdown
|
# 2026-03-22 工作记录
|
|||
|
|
|
|||
|
|
## UI统一修复 - 全面验证与补漏
|
|||
|
|
|
|||
|
|
### 背景
|
|||
|
|
用户要求对UI统一改造后的页面做严格全面验证。之前仅用 Vite build（不做 tsc 严格检查）和 vitest 验证，漏掉了很多 TypeScript 编译错误。
|
|||
|
|
|
|||
|
|
### 发现并修复的问题（共15处）
|
|||
|
|
|
|||
|
|
#### 1. ContentCard 组件缺陷
|
|||
|
|
- **问题**: ContentCard 没有 `style` prop，但 ProfilePage 和 ProfileSecurityPage 传了 `style`
|
|||
|
|
- **修复**: 给 ContentCard 接口添加 `style?: React.CSSProperties` 并透传给内部 Card
|
|||
|
|
|
|||
|
|
#### 2. 未使用的导入（TS6133）
|
|||
|
|
| 文件 | 未使用导入 |
|
|||
|
|
|-----|-----------|
|
|||
|
|
| ProfilePage.tsx | `Title`, `Card` |
|
|||
|
|
| ProfileSecurityPage.tsx | `Card`, `Title`, `Paragraph` |
|
|||
|
|
| RolesPage.tsx | `Card`, `styles` |
|
|||
|
|
| UsersPage.tsx | `Card`, `styles` |
|
|||
|
|
| WebhooksPage.tsx | `styles` |
|
|||
|
|
| ImportExportPage.tsx | `Title`, `Paragraph` |
|
|||
|
|
| LoginLogsPage.tsx | `styles` |
|
|||
|
|
| OperationLogsPage.tsx | `styles` |
|
|||
|
|
| DashboardPage.tsx | `Card` |
|
|||
|
|
|
|||
|
|
#### 3. API 使用错误
|
|||
|
|
- **ProfilePage**: `Alert` 组件用了不存在的 `title` prop → 改为 `message`
|
|||
|
|
- **DashboardPage**: 10 处 `Statistic` 用了不存在的 `styles` prop → 改为 `valueStyle`
|
|||
|
|
- **PageState**: `Spin` 组件用了不存在的 `description` prop → 改为 `tip` + 包裹子元素
|
|||
|
|
|
|||
|
|
#### 4. 类型定义错误
|
|||
|
|
- **router.tsx**: `v7_startTransition` 在当前 react-router 类型中不存在 → 移除
|
|||
|
|
|
|||
|
|
### 验证结果
|
|||
|
|
- `tsc -b` (严格模式构建): **0 错误** (之前 15+ 错误)
|
|||
|
|
- `vite build`: **成功**，696ms
|
|||
|
|
- `vitest`: **5/5 测试通过**
|
|||
|
|
- 唯一警告：chunk size 1.49MB > 500KB（性能优化建议，非阻塞）
|
|||
|
|
|
|||
|
|
### 教训
|
|||
|
|
1. **必须用 `tsc -b`（项目 build 脚本）而非 `tsc --noEmit` 来验证**，两者的 tsconfig 配置不同
|
|||
|
|
2. 页面改造后移除旧组件导入时，容易遗漏
|
|||
|
|
3. Ant Design 5.x 的 prop 名称需要核对类型定义，不能凭印象
|
|||
|
|
|
|||
|
|
### 修复计划完成度
|
|||
|
|
- 阶段1（基础组件建设）: **100% 完成** - PageLayout, FilterCard, TableCard, TreeCard, ContentCard
|
|||
|
|
- 阶段2（页面改造）: **100% 完成** - 全部 10 个页面已改造
|
|||
|
|
- 阶段3（验证与优化）: **100% 完成** - tsc 严格通过、构建成功、测试通过
|
|||
|
|
- 计划中提到的 ActionBar 组件: 未单独创建（PageHeader 已覆盖 actions 功能）
|