Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
Switch branch/tag
ISSUES_TO_FIX.md 16.1 KB

项目问题与改进建议清单

创建日期: 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

状态: ✅ 已修复 (2026-01-18) 修复详情: 已创建 src/common/constants.js，包含所有需要的常量

已应用到以下文件:

  • src/App.vue - 已导入 UPDATE_INTERVAL 并替换 time: 30000
  • src/contexts/cart.js - 已导入 ONE_DAY_MS 并替换 24 * 60 * 60 * 1000
  • src/utils/versionUpdater.js - 已导入 DEFAULT_TIMEOUT 并替换 timing(time = 10000)
  • src/components/ui/SharePoster.vue - 已导入 MIN_TIMEOUT, DEFAULT_FETCH_TIMEOUT 并替换 Math.max(800, timeout_ms || 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: 关键模块迁移

  1. API 层 - 添加参数和返回值类型
  2. 组件 props 和 emits 类型
  3. 状态管理 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周内修复）

  1. API 响应检查问题（安全性） ✅ 已完成
  2. 当前已修改文件的问题（CompleteInfoPage.vue, IDQueryPage.vue） ✅ 已完成

🟡 中优先级（1个月内修复）

  1. 硬编码常量提取
  2. 大型组件拆分
  3. 重复代码提取 ✅ 部分完成 (5.1, 5.2, 7.1 已完成)
  4. 错误处理完善 ✅ 已完成

🟢 低优先级（长期优化）

  1. 代码风格统一
  2. 性能优化
  3. 组件命名统一
  4. TypeScript 迁移
  5. 工具链配置完善

快速修复清单

请按照以下顺序快速修复最关键的问题：

  • 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个组件

新增文件

  1. src/composables/useImageLoader.js - 图片加载错误处理
  2. src/composables/useUserInfo.js - 用户信息获取
  3. 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 组合

修复的文件数量: 46个

修复的代码位置: 68处