- 从 git 历史恢复完整的嵌套路由配置(100+ 路由) - 恢复 LayoutView 作为父路由的布局结构 - 添加教师控制台相关 API 函数到 teacher.ts - 修复语法错误(移除多余的分号) 修复的问题: 1. 页面无法加载 - 路由配置缺失 2. 侧边栏/导航栏不显示 - LayoutView 未使用 3. 教师控制台报错 - API 函数缺失 测试结果: - 管理员端: 登录、控制台、租户管理、课程管理 ✓ - 教师端: 登录、课程列表、校本课程、授课记录 ✓ 注意: 部分页面可能需要浏览器刷新 (Cmd+R) 来加载最新代码 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
4.4 KiB
4.4 KiB
代码重构问题修复计划
问题分析
代码重构后,只有登录功能能正常工作,其他功能和业务都无法正常运行。
根本原因
- 路由配置严重缺失 - 从 100+ 个嵌套路由减少到不到 10 个简单路由
- LayoutView 未使用 - 所有布局组件(侧边栏、导航栏)未加载
- API 调用可能不兼容 - 响应格式和错误处理需要验证
修复任务清单
阶段 1: 恢复路由配置 ⚠️ 高优先级
任务 #19: 恢复完整路由配置
从 git 历史恢复原始的嵌套路由结构:
- 使用 LayoutView 作为父路由(admin, school, teacher, parent)
- 保留所有子路由(100+ 个路由)
- 保留路由守卫和权限检查
- 文件位置:
src/router/index.ts
操作步骤:
# 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 适配层正常工作
可能的问题和修复:
-
错误处理不兼容
// 修复前 catch (error: any) { message.error(error.response?.data?.message || '操作失败'); } // 修复后 catch (error: any) { message.error(error.message || '操作失败'); } -
响应数据格式
// 响应拦截器已修复,返回 data.data // 但需要确保所有地方都正确使用
阶段 3: 验证布局组件 ⚠️ 高优先级
任务 #21: 验证页面布局组件
检查清单:
src/views/admin/LayoutView.vue正常工作src/views/school/LayoutView.vue正常工作src/views/teacher/LayoutView.vue正常工作src/views/parent/LayoutView.vue正常工作
验证步骤:
- 登录各端账号
- 检查侧边栏是否显示
- 检查导航菜单是否可点击
- 检查用户信息是否显示
阶段 4: 修复页面数据加载 ⚠️ 中优先级
任务 #22: 修复页面数据加载问题
重点页面:
- 管理员控制台 - 统计数据
- 教师控制台 - 课程列表、待办事项
- 课程详情页 - 课程内容加载
- 校本课程列表 - 数据加载
检查方法:
- 打开浏览器开发者工具
- 查看 Network 标签,检查 API 请求
- 查看 Console 标签,检查错误信息
- 验证数据是否正确显示在页面上
快速修复步骤
步骤 1: 恢复路由配置(最重要)
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: 验证修复
# 启动前端
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 小时
执行顺序
- ✅ 立即执行: 恢复路由配置
- ✅ 立即执行: 验证布局组件
- ✅ 立即执行: 检查 API 兼容性
- ⏸️ 按需执行: 修复具体页面问题