Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
Switch branch/tag
ISSUES_TO_FIX.md 10.3 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 等错误响应误判为成功 修复难度: 简单 状态: ⬜ 未修复

0.2 IDQueryPage.vue - API 响应检查错误

文件: src/views/recall/IDQueryPage.vue:164 问题: 使用 if (res.code) 而非 if (res.code === 1) 检查 API 响应 影响: 可能将 401/403 等错误响应误判为成功 修复难度: 简单 状态: ⬜ 未修复

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 响应检查不当

影响文件:

  • src/contexts/auth.js (第68、81、98行)
  • src/composables/useCheckin.js
  • src/composables/useStudyComments.js
  • src/components/ui/CheckInList.vue

问题: 大量使用 if (code) 而非 if (code === 1) 检查 API 响应

影响: 可能将 401/403 等错误响应误判为成功，导致安全问题

修复建议:

  1. 全局搜索 if (res\.code\b) 和 if (code\b) (排除 === 1 的情况)
  2. 统一改为 if (res.code === 1) 或 if (code === 1)
  3. 或创建工具函数: javascript // src/utils/api.js export const isSuccess = (response) => { return response?.code === 1 }

修复难度: 中等（需要全局修改） 状态: ⬜ 未修复

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

// src/composables/useImageLoader.js
export const useImageLoader = () => {
  const handleImageError = (e) => {
    e.target.src = 'https://cdn.ipadbiz.cn/mlaj/images/default-avatar.jpeg'
  }
  return { handleImageError }
}

状态: ⬜ 未修复

5.2 用户信息获取逻辑

问题: 重复的用户信息获取逻辑分散在多处

修复建议: 创建用户信息 composable

// src/composables/useUserInfo.js
export const useUserInfo = () => {
  const refreshUserInfo = async () => {
    const { code, data } = await getUserInfoAPI()
    if (code === 1) {
      return data
    }
    throw new Error('获取用户信息失败')
  }
  return { refreshUserInfo }
}

状态: ⬜ 未修复

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

修复建议: 统一错误处理机制

// 创建 src/composables/useErrorHandler.js
export const useErrorHandler = () => {
  const handleError = (error, customMessage) => {
    console.error(error)
    showToast(customMessage || '操作失败，请稍后重试')
  }
  return { 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. 重复代码提取
  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）
  • 3.1 提取魔法数字为常量
  • 4.1 拆分大型组件
  • 5.1 提取图片加载错误处理逻辑
  • 5.2 提取用户信息获取逻辑
  • 5.3 提取表单验证逻辑
  • 7.1 完善错误处理机制
  • 10.1 配置 ESLint 规则
  • 10.2 配置 Prettier