172 lines
4.4 KiB
Markdown
172 lines
4.4 KiB
Markdown
|
|
# 代码重构问题修复计划
|
|||
|
|
|
|||
|
|
## 问题分析
|
|||
|
|
|
|||
|
|
代码重构后,只有登录功能能正常工作,其他功能和业务都无法正常运行。
|
|||
|
|
|
|||
|
|
### 根本原因
|
|||
|
|
|
|||
|
|
1. **路由配置严重缺失** - 从 100+ 个嵌套路由减少到不到 10 个简单路由
|
|||
|
|
2. **LayoutView 未使用** - 所有布局组件(侧边栏、导航栏)未加载
|
|||
|
|
3. **API 调用可能不兼容** - 响应格式和错误处理需要验证
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 修复任务清单
|
|||
|
|
|
|||
|
|
### 阶段 1: 恢复路由配置 ⚠️ 高优先级
|
|||
|
|
|
|||
|
|
**任务 #19**: 恢复完整路由配置
|
|||
|
|
|
|||
|
|
从 git 历史恢复原始的嵌套路由结构:
|
|||
|
|
- 使用 LayoutView 作为父路由(admin, school, teacher, parent)
|
|||
|
|
- 保留所有子路由(100+ 个路由)
|
|||
|
|
- 保留路由守卫和权限检查
|
|||
|
|
- 文件位置: `src/router/index.ts`
|
|||
|
|
|
|||
|
|
**操作步骤:**
|
|||
|
|
```bash
|
|||
|
|
# 1. 从历史版本获取原始路由配置
|
|||
|
|
git show ad0204a:reading-platform-frontend/src/router/index.ts > /tmp/original-routes.ts
|
|||
|
|
|
|||
|
|
# 2. 恢复路由配置
|
|||
|
|
cp /tmp/original-routes.ts reading-platform-frontend/src/router/index.ts
|
|||
|
|
|
|||
|
|
# 3. 更新导入路径(@/alias 可能需要调整)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**验证标准:**
|
|||
|
|
- [ ] 所有页面能通过 URL 访问
|
|||
|
|
- [ ] 布局组件(侧边栏、导航栏)正常显示
|
|||
|
|
- [ ] 路由嵌套和守卫正常工作
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 阶段 2: 验证 API 兼容性 ⚠️ 高优先级
|
|||
|
|
|
|||
|
|
**任务 #20**: 检查并修复 API 调用兼容性
|
|||
|
|
|
|||
|
|
**检查清单:**
|
|||
|
|
- [ ] 响应拦截器正确解包 `{ code, message, data }` 格式
|
|||
|
|
- [ ] 错误处理使用 `error.message` 而不是 `error.response?.data?.message`
|
|||
|
|
- [ ] Orval 生成的 API 参数类型正确
|
|||
|
|
- [ ] 各模块 API 适配层正常工作
|
|||
|
|
|
|||
|
|
**可能的问题和修复:**
|
|||
|
|
|
|||
|
|
1. **错误处理不兼容**
|
|||
|
|
```typescript
|
|||
|
|
// 修复前
|
|||
|
|
catch (error: any) {
|
|||
|
|
message.error(error.response?.data?.message || '操作失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 修复后
|
|||
|
|
catch (error: any) {
|
|||
|
|
message.error(error.message || '操作失败');
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **响应数据格式**
|
|||
|
|
```typescript
|
|||
|
|
// 响应拦截器已修复,返回 data.data
|
|||
|
|
// 但需要确保所有地方都正确使用
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 阶段 3: 验证布局组件 ⚠️ 高优先级
|
|||
|
|
|
|||
|
|
**任务 #21**: 验证页面布局组件
|
|||
|
|
|
|||
|
|
**检查清单:**
|
|||
|
|
- [ ] `src/views/admin/LayoutView.vue` 正常工作
|
|||
|
|
- [ ] `src/views/school/LayoutView.vue` 正常工作
|
|||
|
|
- [ ] `src/views/teacher/LayoutView.vue` 正常工作
|
|||
|
|
- [ ] `src/views/parent/LayoutView.vue` 正常工作
|
|||
|
|
|
|||
|
|
**验证步骤:**
|
|||
|
|
1. 登录各端账号
|
|||
|
|
2. 检查侧边栏是否显示
|
|||
|
|
3. 检查导航菜单是否可点击
|
|||
|
|
4. 检查用户信息是否显示
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
### 阶段 4: 修复页面数据加载 ⚠️ 中优先级
|
|||
|
|
|
|||
|
|
**任务 #22**: 修复页面数据加载问题
|
|||
|
|
|
|||
|
|
**重点页面:**
|
|||
|
|
1. 管理员控制台 - 统计数据
|
|||
|
|
2. 教师控制台 - 课程列表、待办事项
|
|||
|
|
3. 课程详情页 - 课程内容加载
|
|||
|
|
4. 校本课程列表 - 数据加载
|
|||
|
|
|
|||
|
|
**检查方法:**
|
|||
|
|
- 打开浏览器开发者工具
|
|||
|
|
- 查看 Network 标签,检查 API 请求
|
|||
|
|
- 查看 Console 标签,检查错误信息
|
|||
|
|
- 验证数据是否正确显示在页面上
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 快速修复步骤
|
|||
|
|
|
|||
|
|
### 步骤 1: 恢复路由配置(最重要)
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd /Users/retirado/Program/ccProgram_0312/reading-platform-frontend
|
|||
|
|
|
|||
|
|
# 从 git 历史恢复原始路由
|
|||
|
|
git show ad0204a:reading-platform-frontend/src/router/index.ts > src/router/index.ts
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 2: 验证修复
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 启动前端
|
|||
|
|
npm run dev
|
|||
|
|
|
|||
|
|
# 测试各端路由
|
|||
|
|
# 访问: http://localhost:5173/admin/dashboard
|
|||
|
|
# 访问: http://localhost:5173/teacher/courses
|
|||
|
|
# 访问: http://localhost:5173/school/dashboard
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 步骤 3: 逐个修复发现的问题
|
|||
|
|
|
|||
|
|
根据浏览器控制台错误和网络请求结果,逐个修复问题。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 预期问题和解决方案
|
|||
|
|
|
|||
|
|
| 问题 | 原因 | 解决方案 |
|
|||
|
|
|------|------|----------|
|
|||
|
|
| 页面空白 | 路由未配置 | 恢复完整路由配置 |
|
|||
|
|
| 无侧边栏/导航 | LayoutView 未使用 | 使用嵌套路由结构 |
|
|||
|
|
| API 调用失败 | 响应格式不匹配 | 检查响应拦截器 |
|
|||
|
|
| 数据不显示 | 错误处理逻辑 | 修复 catch 块 |
|
|||
|
|
| 类型错误 | Orval 生成类型 | 添加类型断言 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 时间估算
|
|||
|
|
|
|||
|
|
- **阶段 1**: 10-15 分钟(恢复路由配置)
|
|||
|
|
- **阶段 2**: 15-30 分钟(API 兼容性检查)
|
|||
|
|
- **阶段 3**: 10-15 分钟(布局验证)
|
|||
|
|
- **阶段 4**: 30-60 分钟(页面修复)
|
|||
|
|
|
|||
|
|
**总计**: 约 1-2 小时
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 执行顺序
|
|||
|
|
|
|||
|
|
1. ✅ 立即执行: 恢复路由配置
|
|||
|
|
2. ✅ 立即执行: 验证布局组件
|
|||
|
|
3. ✅ 立即执行: 检查 API 兼容性
|
|||
|
|
4. ⏸️ 按需执行: 修复具体页面问题
|