hookehuyr

feat: 添加 Bash 权限并创建问题清单文档

docs: 记录项目问题与改进建议清单
新增 ISSUES_TO_FIX.md 文档,详细列出当前项目中的问题、改进建议和修复优先级
{
"permissions": {
"allow": [
"Bash(tree:*)"
"Bash(tree:*)",
"Bash(xargs awk:*)",
"Bash(find:*)"
]
}
}
......
# 项目问题与改进建议清单
> 创建日期: 2026-01-18
> 此文档记录代码中发现的问题和改进建议,修复后请勾选对应的复选框
---
## 0. 当前已修改文件的问题 [高优先级]
### 0.1 CompleteInfoPage.vue - API 响应检查错误
**文件**: `src/views/recall/CompleteInfoPage.vue:129`
**问题**: 使用 `if (res.code)` 而非 `if (res.code === 1)` 检查 API 响应
```javascript
// 当前代码(错误)
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`
**问题**: 手机号只有非空校验,没有格式校验
```javascript
// 当前只有
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` 统一管理常量
```javascript
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
```javascript
// 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
```javascript
// 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 表单验证代码重复
**问题**: 相似的表单验证代码在多个组件中重复
**修复建议**: 创建表单验证工具
```javascript
// 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
**修复建议**: 统一错误处理机制
```javascript
// 创建 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: 添加类型定义文件
```typescript
// 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` 检查的规则
```javascript
// .eslintrc.js
rules: {
'no-warning-comments': 'warn',
// 其他规则...
}
```
**状态**: ⬜ 未修复
### 10.2 Prettier 配置
**建议**: 统一代码格式化规则
```json
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
```
**状态**: ⬜ 未修复
### 10.3 Husky Git Hooks
**建议**: 添加提交前检查,防止提交不规范代码
**状态**: ⬜ 未修复
---
## 优先级总结
### 🔴 高优先级(1-2周内修复)
1. API 响应检查问题(安全性)
2. 当前已修改文件的问题(CompleteInfoPage.vue, IDQueryPage.vue)
### 🟡 中优先级(1个月内修复)
3. 硬编码常量提取
4. 大型组件拆分
5. 重复代码提取
6. 错误处理完善
### 🟢 低优先级(长期优化)
7. 代码风格统一
8. 性能优化
9. 组件命名统一
10. TypeScript 迁移
11. 工具链配置完善
---
## 快速修复清单
请按照以下顺序快速修复最关键的问题:
- [ ] 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