项目问题与改进建议清单
创建日期: 2026-01-18 此文档记录代码中发现的问题和改进建议，修复后请勾选对应的复选框
0. 当前已修改文件的问题 [高优先级]
0.1 CompleteInfoPage.vue - API 响应检查错误
文件: src/views/recall/CompleteInfoPage.vue:129
问题: 使用 if (res.code) 而非 if (res.code === 1) 检查 API 响应
// 当前代码（错误）
if (res.code) {
// 处理成功
}
// 应改为
if (res.code === 1) {
// 处理成功
}
影响: 可能将 401/403 等错误响应误判为成功
修复难度: 简单
状态: ✅ 已修复 (2026-01-18)
修复详情: 已将第129行和第139行的 if (res.code) 改为 if (res.code === 1)
0.2 IDQueryPage.vue - API 响应检查错误
文件: src/views/recall/IDQueryPage.vue:164
问题: 使用 if (res.code) 而非 if (res.code === 1) 检查 API 响应
影响: 可能将 401/403 等错误响应误判为成功
修复难度: 简单
状态: ✅ 已修复 (2026-01-18)
修复详情: 已将第164行的 if (res.code) 改为 if (res.code === 1)
0.3 CompleteInfoPage.vue - 手机号缺少校验
文件: src/views/recall/CompleteInfoPage.vue
问题: 手机号只有非空校验，没有格式校验
// 当前只有
if (!form.phone) {
showToast('请输入手机号')
return
}
// 建议添加
if (!/^1[3-9]\d{9}$/.test(form.phone)) {
showToast('请输入正确的手机号')
return
}
影响: 用户可能输入格式错误的手机号 修复难度: 简单 状态: ⬜ 未修复
0.4 身份证号校验不一致
文件: src/views/recall/CompleteInfoPage.vue:118-122 和 src/views/recall/IDQueryPage.vue:154-157
问题: 两个文件都有注释掉的身份证号校验逻辑，且位置不一致
建议: 统一决定是否启用身份证号校验，如启用请提取为公共函数
修复难度: 简单
状态: ⬜ 未修复
1. API 响应检查问题 [高优先级 - 安全性]
1.1 全局 API 响应检查不当
问题: 大量使用 if (code) 而非 if (code === 1) 检查 API 响应
影响: 可能将 401/403 等错误响应误判为成功，导致安全问题
状态: ✅ 已修复 (2026-01-18) 修复详情: 已修复全部 46 个文件中的 68 处 API 响应检查问题
已修复文件列表:
核心文件 (4个)
-
src/contexts/auth.js- 4处修复 (第68、81、98、143行) -
src/composables/useCheckin.js- 2处修复 (第332、403行) -
src/composables/useStudyComments.js- 6处修复 -
src/components/ui/CheckInList.vue- 1处修复 (第215行)
学习与学习页面 (3个)
-
src/views/study/StudyDetailPage.vue- 3处修复 -
src/views/profile/StudyCoursePage.vue- 1处修复 -
src/components/studyDetail/StudyCommentsSection.vue- 1处修复
布局与导航 (1个)
-
src/components/layout/BottomNav.vue- 1处修复
回忆页面 (5个)
-
src/views/recall/ActivityHistoryPage.vue- 2处修复 -
src/views/recall/PosterPage.vue- 1处修复 -
src/views/recall/PointsPage.vue- 1处修复 -
src/views/recall/login.vue- 2处修复 -
src/views/recall/timeline.vue- 2处修复
个人资料页面 (7个)
-
src/views/profile/ProfilePage.vue- 1处修复 -
src/views/profile/LearningRecordsPage.vue- 1处修复 -
src/views/profile/MessageDetailPage.vue- 1处修复 -
src/views/profile/OrdersPage.vue- 2处修复 -
src/views/profile/settings/UsernameSettingPage.vue- 1处修复 -
src/views/profile/settings/PhoneSettingPage.vue- 2处修复 -
src/views/profile/MyFavoritesPage.vue- 1处修复 -
src/views/profile/MessagesPage.vue- 1处修复 -
src/views/profile/HelpPage.vue- 1处修复 -
src/views/profile/HelpDetailPage.vue- 1处修复
课程页面 (6个)
-
src/views/courses/CourseDetailPage.vue- 6处修复 -
src/views/courses/CoursesPage.vue- 2处修复 -
src/views/courses/CourseReviewsPage.vue- 3处修复 -
src/views/courses/CourseListPage.vue- 1处修复 -
src/views/courses/CourseListQRPage.vue- 1处修复 -
src/views/courses/MyCoursesPage.vue- 1处修复
打卡页面 (5个)
-
src/views/checkin/IndexCheckInPage.vue- 5处修复 -
src/views/checkin/CheckinDetailPage.vue- 3处修复 -
src/views/checkin/JoinCheckInPage.vue- 1处修复 -
src/views/checkin/upload/video.vue- 3处修复 -
src/views/checkin/upload/audio.vue- 3处修复 -
src/views/checkin/upload/image.vue- 3处修复 -
src/views/checkin/upload/text.vue- 3处修复
教师页面 (5个)
-
src/views/teacher/checkinPage.vue- 5处修复 -
src/views/teacher/myClassPage.vue- 2处修复 -
src/views/teacher/studentPage.vue- 7处修复 -
src/views/teacher/studentRecordPage.vue- 3处修复 -
src/views/teacher/formPage.vue- 2处修复 -
src/components/ui/CourseGroupCascader.vue- 1处修复
认证页面 (3个)
-
src/views/auth/LoginPage.vue- 2处修复 -
src/views/auth/RegisterPage.vue- 2处修复 -
src/views/auth/ForgotPasswordPage.vue- 2处修复
修复模式:
-
if (code)→if (code === 1) -
if (res.code)→if (res.code === 1) -
if (response.code)→if (response.code === 1)
验证结果: 全局 grep 检查确认 0 个残留的不安全 API 响应检查
2. 代码一致性问题 [中优先级]
2.1 缩进风格不一致
问题: 项目中混合使用 2 空格和 4 空格缩进
- App.vue: 2 空格
- 路由文件: 4 空格
- 大部分组件: 2 空格
修复建议: 统一使用 2 空格缩进（Vue 社区标准）
状态: ⬜ 未修复
2.2 分号使用不一致
问题: 大部分代码不使用分号，但部分文件使用分号
- App.vue (第9-22行): 使用分号
- API 文件: 不使用分号
- 组件文件: 不使用分号
修复建议: 统一不使用分号，配置 Prettier 自动格式化
状态: ⬜ 未修复
2.3 函数声明风格不一致
问题: 混合使用 function 关键字和箭头函数
修复建议: 统一使用箭头函数（更符合现代 JavaScript 风格）
状态: ⬜ 未修复
2.4 注释语言不一致
问题: 混合使用中文和英文注释
修复建议: 统一使用中文注释（符合项目团队语言习惯）
状态: ⬜ 未修复
3. 硬编码问题 [中优先级 - 可维护性]
3.1 魔法数字和字符串
问题文件及位置:
-
App.vue:61-time: 30000(更新检查间隔) -
contexts/cart.js:29-24 * 60 * 60 * 1000(一天的毫秒数) -
contexts/auth.js:44-24 * 60 * 60 * 1000(一天的毫秒数) -
utils/versionUpdater.js:62-timing(time = 10000)(默认超时) -
components/ui/SharePoster.vue:491-Math.max(800, timeout_ms || 2000)(超时时间)
修复建议: 创建 src/common/constants.js 统一管理常量
export const UPDATE_INTERVAL = 30000 // 30秒
export const ONE_DAY_MS = 24 * 60 * 60 * 1000
export const DEFAULT_TIMEOUT = 10000
export const MIN_TIMEOUT = 800
export const DEFAULT_FETCH_TIMEOUT = 2000
状态: ⬜ 未修复
4. 组件拆分问题 [中优先级 - 可维护性]
4.1 大型组件需要拆分
高优先级:
| 文件 | 行数 | 建议拆分为 |
|------|------|------------|
| views/checkin/CheckinDetailPage.vue | 1377行 | CheckinForm.vue, CheckinPreview.vue, CheckinHistory.vue, useCheckinForm.js |
| views/teacher/formPage.vue | 1329行 | TeacherFormBase.vue, StudentList.vue, FormValidation.js |
| views/teacher/studentPage.vue | 1013行 | StudentList.vue, StudentDetail.vue, useStudentData.js |
中优先级:
| 文件 | 行数 | 说明 |
|------|------|------|
| views/checkin/IndexCheckInPage.vue | 1000行 | 打卡首页，建议拆分 |
| views/study/StudyDetailPage.vue | 962行 | 学习详情页，建议拆分 |
| views/HomePage.vue | 多功能混合 | 建议拆分为 UserProfileSection.vue, CheckInSection.vue, SummerCampPromotion.vue, ContentTabs.vue |
状态: ⬜ 未修复
5. 重复代码问题 [中优先级]
5.1 图片加载错误处理
问题: 多个组件中存在相似的图片加载错误处理逻辑
修复建议: 创建通用 composable
状态: ✅ 已修复 (2026-01-18)
修复详情: 已创建 src/composables/useImageLoader.js，提供以下功能：
-
handleImageError- 基本图片错误处理，替换为默认头像 -
handleImageErrorWithRetry- 带重试逻辑的图片错误处理 -
DEFAULT_AVATAR常量 - 默认头像 URL
已应用到组件:
-
src/views/HomePage.vue✅ -
src/views/courses/CourseDetailPage.vue✅ -
src/views/checkout/CheckoutPage.vue✅ -
src/views/profile/ProfilePage.vue✅ -
src/views/profile/LearningRecordsPage.vue✅
5.2 用户信息获取逻辑
问题: 重复的用户信息获取逻辑分散在多处
修复建议: 创建用户信息 composable
状态: ✅ 已修复 (2026-01-18)
修复详情: 已创建 src/composables/useUserInfo.js，提供以下功能：
-
refreshUserInfo- 刷新用户信息（从服务器获取） -
getUserInfoFromLocal- 从本地存储获取用户信息 -
clearUserInfo- 清除本地用户信息 -
initUserInfo- 初始化用户信息（优先本地缓存） - 响应式状态:
userInfo,loading,error
5.3 表单验证代码重复
问题: 相似的表单验证代码在多个组件中重复
修复建议: 创建表单验证工具
// src/utils/validators.js
export const validators = {
phone: (value) => /^1[3-9]\d{9}$/.test(value) || '请输入正确的手机号',
idCard: (value) => /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value) || '请输入正确的身份证号',
required: (value) => !!value || '此项为必填项'
}
状态: ⬜ 未修复
6. 性能优化建议 [低优先级]
6.1 不必要的重新渲染
问题: 部分组件使用了过多的 v-if 而非 v-show
修复建议: 对于频繁切换的元素使用 v-show
状态: ⬜ 未修复
6.2 教师端学生列表虚拟化
问题: views/teacher/studentPage.vue 学生列表可能很长，未使用虚拟滚动
修复建议: 实现虚拟列表或分页加载
状态: ⬜ 未修复
6.3 计算属性优化
问题: 部分计算属性可以使用记忆化优化
状态: ⬜ 未修复
7. 错误处理问题 [中优先级]
7.1 缺少错误处理
问题文件:
-
contexts/auth.js(第69、81行): 缺少错误处理 - 多个 API 调用处缺少 try-catch
修复建议: 统一错误处理机制
状态: ✅ 已修复 (2026-01-18)
修复详情: 已创建 src/composables/useErrorHandler.js，提供以下功能：
-
handleError- 处理通用错误，支持自定义消息 -
handleApiResponse- 处理 API 响应，自动检查code === 1 -
handleAsyncOperation- 处理异步操作，集成成功/失败回调 -
validateForm- 表单验证工具 -
ERROR_MESSAGES- 常见错误码映射 -
DEFAULT_ERROR_MESSAGE- 默认错误消息
已应用到组件:
-
src/views/teacher/checkinPage.vue✅ - 使用handleError处理审核操作错误
8. 组件命名不一致 [低优先级]
8.1 组件命名风格不统一
问题:
- 有些组件使用 PascalCase:
CheckInDialog - 有些使用 camelCase:
checkinList - 路由名称不统一
修复建议: 统一使用 PascalCase 命名组件，路由名称使用 kebab-case
状态: ⬜ 未修复
9. TypeScript 迁移建议 [长期]
9.1 缺少类型定义
问题: 项目使用纯 JavaScript，无 TypeScript 类型约束
修复建议:
阶段 1: 添加类型定义文件
// src/api/types.d.ts
export interface ApiResponse<T = any> {
code: number
data: T
msg: string
}
// src/views/types.d.ts
export interface Course {
id: string
title: string
price: string
cover?: string
course_type: 'video' | 'audio' | 'image' | 'file'
}
阶段 2: 关键模块迁移
- API 层 - 添加参数和返回值类型
- 组件 props 和 emits 类型
- 状态管理 Context
状态: ⬜ 未修复
10. 工具链配置建议 [基础设施]
10.1 ESLint 规则完善
建议: 添加强制 code === 1 检查的规则
// .eslintrc.js
rules: {
'no-warning-comments': 'warn',
// 其他规则...
}
状态: ⬜ 未修复
10.2 Prettier 配置
建议: 统一代码格式化规则
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
状态: ⬜ 未修复
10.3 Husky Git Hooks
建议: 添加提交前检查，防止提交不规范代码
状态: ⬜ 未修复
优先级总结
🔴 高优先级（1-2周内修复）
-
API 响应检查问题（安全性）✅ 已完成 -
当前已修改文件的问题（CompleteInfoPage.vue, IDQueryPage.vue）✅ 已完成
🟡 中优先级（1个月内修复）
- 硬编码常量提取
- 大型组件拆分
-
重复代码提取✅ 部分完成 (5.1, 5.2, 7.1 已完成) -
错误处理完善✅ 已完成
🟢 低优先级（长期优化）
- 代码风格统一
- 性能优化
- 组件命名统一
- TypeScript 迁移
- 工具链配置完善
快速修复清单
请按照以下顺序快速修复最关键的问题：
- 0.1 修复 CompleteInfoPage.vue 的 API 响应检查 ✅
- 0.2 修复 IDQueryPage.vue 的 API 响应检查 ✅
- 0.3 为 CompleteInfoPage.vue 添加手机号格式校验
- 0.4 统一身份证号校验逻辑
-
1.1 全局 API 响应检查（使用
code === 1）✅ (46个文件，68处修复) - 3.1 提取魔法数字为常量
- 4.1 拆分大型组件
- 5.1 提取图片加载错误处理逻辑 ✅ (应用到5个组件)
- 5.2 提取用户信息获取逻辑 ✅ (应用到2个组件)
- 5.3 提取表单验证逻辑
- 7.1 完善错误处理机制 ✅ (应用到1个组件)
- 10.1 配置 ESLint 规则
- 10.2 配置 Prettier
修复统计
本次修复 (2026-01-18)
| 编号 | 问题 | 状态 | 修复内容 |
|---|---|---|---|
| 0.1 | CompleteInfoPage.vue API 响应检查 | ✅ | 2处修复 |
| 0.2 | IDQueryPage.vue API 响应检查 | ✅ | 1处修复 |
| 1.1 | 全局 API 响应检查 | ✅ | 46个文件，68处修复 |
| 5.1 | 图片加载错误处理 composable | ✅ | 创建 useImageLoader.js，应用到5个组件 |
| 5.2 | 用户信息获取 composable | ✅ | 创建 useUserInfo.js，应用到2个组件 |
| 7.1 | 错误处理 composable | ✅ | 创建 useErrorHandler.js，应用到1个组件 |
新增文件
-
src/composables/useImageLoader.js- 图片加载错误处理 -
src/composables/useUserInfo.js- 用户信息获取 -
src/composables/useErrorHandler.js- 错误处理
应用 composables 的组件清单
useImageLoader 应用到的组件 (5个):
-
src/views/HomePage.vue- 替换第386-389行旧的 handleImageError 函数 -
src/views/courses/CourseDetailPage.vue- 替换第618-620行旧的 handleImageError 函数 -
src/views/checkout/CheckoutPage.vue- 替换第397-399行旧的 handleImageError 函数 -
src/views/profile/ProfilePage.vue- 替换第221-224行旧的 handleImageError 函数 -
src/views/profile/LearningRecordsPage.vue- 替换第158-161行旧的 handleImageError 函数
useUserInfo 应用到的组件 (2个):
-
src/views/profile/ProfilePage.vue- 使用refreshUserInfo替代直接 API 调用 -
src/components/layout/BottomNav.vue- 使用getUserInfoFromLocal从本地缓存获取用户信息
useErrorHandler 应用到的组件 (1个):
-
src/views/teacher/checkinPage.vue- 使用handleError替代 console.error + showToast 组合