Hooke / mlaj

添加 Claude Code 简称说明到代码生成情况对比文档
在新功能开发计划文档中添加详细的工具选择说明，明确不同任务类型推荐使用的 AI 工具
更新各阶段开发任务说明，标注哪些组件应使用 Trae 生成

- 将 DOCUMENTATION_STANDARDS.md 和 VUE_CODE_STYLE_GUIDE.md 移动到 docs/development/ 目录
- 更新所有文档中的相关链接引用路径
- 新增 ISSUES_TO_FIX.md 问题清单文档到 tasks/ 目录
- 统一文档分类结构，遵循新的文档规范

- 更新所有相关文档中的路径引用
- 同步更新模板文件名从openAPI-template.md为api-specs-template.md
- 保持API生成器功能不变，仅修改目录命名

添加OpenAPI文档规范目录结构，包含README使用指南和示例接口文档
README提供快速开始指南、目录结构说明、OpenAPI编写规范和生成代码示例
示例文件展示如何编写符合规范的接口文档

将VUE_CODE_STYLE_GUIDE.md和ISSUES_TO_FIX.md移动到docs目录，并大幅扩展内容
VUE_CODE_STYLE_GUIDE.md从291行扩展到12584行，详细分析项目现状并提供最佳实践
ISSUES_TO_FIX.md从494行扩展到16444行，记录已修复和待修复问题，包含详细修复统计

- 将 README.md 中的详细功能更新记录替换为指向 CHANGELOG.md 的链接
- 重构 CHANGELOG.md，采用更清晰的按日期分组结构，优化可读性
- 将历史更新内容从 README 移至专门的变更日志文件，保持主文档简洁

- 新增 `api:generate` 和 `api:diff` 命令，支持从 OpenAPI 3.0.1 文档自动生成前端 API 代码
- 集成完整的 API Generator Skill，包含智能变更检测和增量更新机制
- 新增示例文档和详细使用指南，提供完整的文档模板和跨项目安装脚本
- 更新项目文档，将新功能集成到 CLAUDE.md、CHANGELOG.md 和 SKILLS_GUIDE.md 中

将“代码生成情况对比.md”从docs/tasks/ideas/移动到docs/tasks/done/，表示该工作流优化方案已从构思阶段进入完成/采纳阶段。

添加详细的工作流程文档，分析Trae和Claude Code在不同场景下的优势，并提出分工协作策略。文档包含决策树、质量保证清单和实用技巧，旨在优化开发效率与代码质量。

- 删除 /src/views/test/ 目录下的测试页面
  - ActivityListTestPage.vue（活动列表测试）
  - CourseListTestPage.vue（课程列表测试）
- 移除路由配置中的测试路由
  - /test
  - /test/course-list
  - /test/activity-list
- 更新 CHANGELOG.md，移除测试页面相关记录

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- 新增活动列表测试页面 (ActivityListTestPage.vue)
- 新增课程列表测试页面 (CourseListTestPage.vue)
- 配置测试路由：/test/activity-list 和 /test/course-list
- 更新 CHANGELOG.md 记录变更
- 修复 ESLint 配置：添加 vue-eslint-parser 以正确解析 .vue 文件

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

主要更新：
- 新增快速开始指南，包含常用开发命令
- 添加欢迎页功能说明（首次访问检测、视频背景、功能入口）
- 更新打卡系统增强记录（草稿缓存、长文本折叠、多附件 Tab）
- 完善文档索引，指向 docs/ 目录下所有文档
- 新增功能更新记录（2026-01），包含欢迎页和打卡系统

相关文档：
- docs/tasks/done/26.1.28-欢迎页开发计划/
- docs/tasks/done/暂存用户打卡信息.md

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

问题：零碎需求陆续来时，不知道放哪里
解决：新增 ideas/ 目录，专门存放原始、零碎的需求

任务生命周期（4个阶段）：
1. ideas/ - 需求收集（零碎、原始、5分钟）
2. todo/ - 待办任务（整理后、完整、15分钟）
3. plan/ - 技术方案（详细、可执行、1-2小时）
4. done/ - 完成总结（记录、反思、30分钟）

ideas/ 特点：
- 快速记录，随便写，不需要模板
- 避免过度整理和过早设计
- 先存下来，避免遗忘

使用流程：
1. 收到零碎需求 → ideas/（随便记）
2. 需求相对完整 → todo/（用模板）
3. 决定开发 → plan/（详细设计）
4. 开发完成 → done/（写总结）

- 新增 TODO_TEMPLATE.md 标准模板
- 更新 tasks/README.md，明确 TODO 文档定位
- TODO 存放原始需求+初步分析，简洁明了
- plan/ 存放详细技术方案
- done/ 存放实现记录和总结

文档特点：
- 简洁：3-5分钟能看完
- 快速评估：技术可行性初步判断
- 避免过度设计：未决定前不写细节

将文档中所有引用的大写 "TODO" 目录名统一改为小写 "todo"，以保持命名一致性并遵循常见的小写目录命名约定。修改涉及目录结构说明、链接和生命周期描述。

主要变更：
- 创建分类目录：architecture/development/testing/tools/tasks
- 移动文档到对应分类目录
- 新增文档导航索引：docs/README.md
- 新增文档编写规范：docs/DOCUMENTATION_STANDARDS.md
- 新增任务管理索引：docs/tasks/README.md
- 更新主 README 文档链接

文档分类：
- architecture/: 架构设计（ARCHITECTURE.md, COMPONENTS.md）
- development/: 开发配置（ESLINT_PRETTIER.md, HUSKY_LINT_STAGED.md, WORKFLOW.md）
- testing/: 测试文档（PLAYWRIGHT.md, E2E_*.md）
- tools/: 工具指南（SKILLS_GUIDE.md）
- tasks/: 任务管理（done/plan/TODO）

文档规范：
- 使用英文大写+下划线命名（如 E2E_AUTH_GUIDE.md）
- 任务文档格式：[日期]_[类型]_[描述].md
- 新增文档时必须更新 docs/README.md 索引

详见：docs/DOCUMENTATION_STANDARDS.md

在项目文档中突出显示路由配置规则：
- 所有 URL 必须使用 /#/ 前缀
- 适用于代码生成、测试编写、文档编写
- 标记为 CRITICAL 级别规则

确保在计划阶段和生成阶段都能看到此重要规则。

重要规则：在生成路由地址前必须检查 Vue Router 配置
- Hash 模式：/#/路由路径
- History 模式：/路由路径
- 本项目使用 Hash 模式，所有 URL 需要 /#/ 前缀

修复问题：
1. Vue Router 使用 hash 模式，所有 URL 需要添加 /#/ 前缀
2. 登录页选择器更新为实际 DOM 结构（name="mobile", #verificationCode）
3. 手机号验证需要触发 blur 事件
4. localStorage 存储使用 currentUser 而非 user_info
5. 添加等待时间确保 getUserInfoAPI 异步完成

核心功能测试通过：
- ✓ 应该成功登录
- ✓ 访问受保护页面应跳转到登录页
- ✓ 未登录打卡应跳转到登录页
- ✓ 快速登录跳过输入流程
- ✓ 复用 token 多次测试

其他测试需要根据实际页面结构调整。

## 配置变更

### Playwright 配置
- 使用本地开发服务器 (localhost:5173)
- 通过 Vite 反向代理访问测试服务器
- 自动启动 Vite Dev Server 进行测试
- 配置 webServer 自动管理

### 环境变量
- .env.test - 测试环境配置
- 确认代理配置：VITE_PROXY_PREFIX=/srv/
- 确认目标：VITE_PROXY_TARGET=http://oa-dev.onwall.cn/

## 新增功能

### E2E 认证工具
- e2e/helpers/auth.js - 认证辅助工具
  • login() - 完整登录流程（触发发送短信接口）
  • quickLogin() - 快速登录（localStorage）
  • logout() - 登出
  • isLoggedIn() - 检查登录状态
  • authenticatedPage fixture - 自动登录

### 测试账号配置
- 手机号：13761653761
- 验证码：888888（测试环境固定）
- 通过发送短信接口获取验证码

### 测试示例
- e2e/auth.spec.js - 认证测试
  • 登录流程测试
  • 登出测试
  • 错误处理测试
  • 需要登录的功能测试（购买、打卡等）

- e2e/courses.spec.js - 课程功能测试
  • 使用 authenticatedPage fixture
  • 已登录/未登录场景对比
  • 课程浏览、收藏等

### 架构说明
- 通过 Vite 反向代理访问测试服务器
- 代理前缀：/srv/ -> http://oa-dev.onwall.cn/srv/
- Playwright 自动启动本地开发服务器
- 所有 /srv/api/* 请求自动代理

## 新增文档

- docs/E2E_AUTH_GUIDE.md - E2E 认证完整指南
- docs/E2E_PROXY_SETUP.md - 反向代理配置说明
- docs/E2E_TEST_SERVER.md - 测试服务器配置文档
- e2e/README.md - E2E 快速入门

## 特性

✅ 正确触发发送短信接口
✅ 等待接口响应后再输入验证码
✅ 详细的登录日志输出
✅ 支持多种选择器备选（提高稳定性）
✅ Token 复用机制
✅ 自动状态管理（beforeEach/afterEach）

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

## 新增工具

### 1. ESLint + Prettier
- ESLint 9.39.2 - 代码质量检查（Vue 3 规则）
- Prettier 3.8.1 - 代码格式化
- prettier-plugin-tailwindcss - TailwindCSS 类名排序
- 配置文件：eslint.config.js, .prettierrc
- VS Code 自动格式化配置

### 2. Husky + lint-staged
- Husky 9.1.7 - Git hooks 管理
- lint-staged 16.2.7 - 暂存文件检查
- pre-commit hook 自动运行 lint 和 format
- 提交前自动修复代码问题

### 3. Playwright E2E 测试
- @playwright/test 1.58.0 - E2E 测试框架
- 已安装 Chromium 和 Chrome Headless Shell
- 配置文件：playwright.config.js
- 示例测试：e2e/example.spec.js
- 支持 3 个测试项目（移动端、桌面端、Safari）

## 配置更新

- package.json：添加 lint、format、test:e2e 等脚本
- eslint.config.js：支持 Vue、Vitest、Playwright
- .gitignore：忽略 Playwright 测试结果

## 新增文档

- docs/ESLINT_PRETTIER.md - ESLint 和 Prettier 使用指南
- docs/HUSKY_LINT_STAGED.md - Git Hooks 配置说明
- docs/PLAYWRIGHT.md - E2E 测试完整指南

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

添加 ESLint、Prettier、Husky 和 lint-staged 以自动化代码检查和格式化
新增 .prettierrc、.prettierignore、eslint.config.js 和 Husky pre-commit hook
在 package.json 中添加相关脚本和依赖，包括格式化、检查、测试覆盖率等命令
新增详细配置文档 HUSKY_LINT_STAGED.md 和 ESLINT_PRETTIER.md

新增欢迎页开发计划文档，包含详细实现计划、头脑风暴记录、README说明和资源上传脚本。添加了暂存用户打卡信息的设计文档。

- 欢迎页开发计划包含6个阶段的完整实现方案
- 上传脚本支持七牛云视频和图片资源上传
- 打卡信息暂存文档提供了前端缓存解决方案
- 所有文档采用中文编写，便于团队协作

- 更新 CHANGELOG.md：记录标题图片、水平布局、尺寸优化等变更
- 更新 README.md：
  - 标记标题图片集成为已完成
  - 更新布局设计描述为水平布局
  - 更新功能入口描述为水平排列
  - 记录访问逻辑优化完成状态

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- 新增美乐爱觉标题图片，参考 ChoosePage.vue 的设计
- 调整布局为水平排列，3个功能入口在一行显示
- 优化图标尺寸为 5rem，文字为 0.95rem
- 调整左右边距保持一致，使用 space-between 均匀分布
- 布局更靠底部，padding-bottom 设置为 3rem
- 修复标题显示位置，标题在顶部，功能入口在底部

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

将默认视频和背景图片的URL从旧的recall目录更新到新的video目录，以匹配最新的资源组织结构。

将课程入口图标从welcome_btn_1.png改为welcome_btn_3.png
将活动入口图标从welcome_btn_1.png改为welcome_btn_2.png

- 将轨道布局改为水平布局，使用 flex 实现
- 缩小入口图标尺寸和标题字体大小
- 简化动画实现，移除基于优先级的定位类
- 调整内边距，优化整体间距

- 移除自动跳转逻辑：访问根目录或其他页面不再跳转到欢迎页
- 精准拦截：只有访问 /welcome 时才判断是否首次访问
- 首次访问：显示欢迎页并标记已访问
- 再次访问：直接跳转到首页
- 更新文档：说明新的访问逻辑

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- 更新 README.md：标记所有开发任务为已完成
- 新增 CHANGELOG.md：记录欢迎页功能的完整变更日志
- 详细记录新增的组件、配置、环境变量和调试工具
- 记录技术细节、文件结构和使用指南

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- 移除标题和底部按钮，简化页面结构
- 删除中心装饰圆圈，保持页面简洁
- 去掉图标背景装饰，放大图标尺寸至6rem
- 调整布局位置为不对称排列，打破完美对称
- 整体下移布局至页面中下部
- 修复文字倾斜问题，保持水平显示
- 优化文字与图标的间距

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

- 新增 WelcomeContent 组件：实现轨道式布局，3个功能入口环绕排列
- 新增 WelcomeEntryItem 组件：统一的功能入口卡片样式
- 新增 welcomeEntries 配置：课程中心、活动中心(外链)、个人中心
- 添加环境变量：VITE_WELCOME_PAGE_ENABLED 和 VITE_WELCOME_VIDEO_URL
- 支持外部链接跳转（活动中心）和内部路由跳转
- 添加浮动、脉冲等动画效果，提升视觉体验

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

第2-3阶段: 核心功能实现

新增组件：
- VideoBackground.vue (视频背景组件)
  * 支持自动播放、循环播放、静音
  * 自动从视频URL生成封面图 (七牛云 ?vframe/jpg/offset/0.001)
  * 完善的降级方案 (视频加载失败时使用静态背景图)
  * 支持 play/pause 方法暴露
  * 移动端兼容 (playsinline, x5-video-player-type)

- WelcomePage.vue (欢迎页视图)
  * 集成 VideoBackground 组件
  * 从环境变量读取视频URL
  * 预留内容区域插槽

路由与守卫：
- 路由配置: 添加 /welcome 路由 (routes.js)
- 首次访问检测: 检查 localStorage 标志位 (index.js)
- 标志位管理: hasVisitedWelcome(), markWelcomeVisited(), resetWelcomeFlag()
- 调试工具: window.resetWelcomeFlag(), window.showWelcome()
- URL参数: ?reset_welcome=true 重置标志

首次访问流程:
1. 用户首次访问 → 检测 localStorage 标志
2. 标志不存在 → 设置标志并跳转 /welcome
3. /welcome 页面显示视频背景和功能入口
4. 后续访问 → 直接进入目标页面

技术亮点:
- 七牛云视频处理参数自动生成封面图
- 移动端全屏视频优化
- 环境变量开关 (VITE_WELCOME_PAGE_ENABLED)
- 开发调试工具支持

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

添加欢迎页开发计划文档中的按钮图片资源文件 wecome_btn_1.png。

图标上传成功：
- 文件名: welcome_btn_1.png
- 七牛云URL: https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png
- 文件大小: 33.53KB (34,333 字节)
- Hash: FsqvctdBVJvXoQkAAEEhxuIRqX6h

配置更新：
- 所有功能入口统一使用七牛云图标URL
- 移除本地路径引用，改为CDN URL
- 更新文档说明图标已上传

技术优势：
- ✅ CDN加速，加载更快
- ✅ 无需提交大文件到git仓库
- ✅ 统一资源管理，便于更新
- ✅ 支持图片缓存和版本控制

更新文件：
- plan.md: 配置代码使用七牛云URL
- README.md: 更新图标资源说明
- brainstorm.md: 更新待确认事项

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

功能入口调整：
- 移除时光机入口，保留3个核心功能（课程、活动、我的）
- 图标改为使用图片: /img/wecome_btn_1.png
- 布局调整为环绕式，模拟天体行星轨道效果

布局设计：
- 🌌 环绕式布局: 3个图标呈弧形排列
- 📍 位置: 页面中下位置
- ✨ 效果: 星空宇宙主题，旋转虚线轨道
- 🖼️ 图标: 统一使用图片图标，圆形发光效果

技术实现：
- 使用绝对定位形成环绕效果
- 左侧: 课程中心 (左下)
- 顶部: 活动中心 (中上)
- 右侧: 个人中心 (右下)
- 添加旋转轨道动画 (60s 匀速旋转)

更新文件：
- plan.md: 更新功能入口配置和布局代码
- README.md: 更新开发进度和布局说明
- brainstorm.md: 更新待确认事项

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

功能入口更新：
- 活动中心标记为外链跳转 (isExternal: true)
- 外链地址: https://wxm.behalo.cc/pages/activity/activity
- 在 WelcomeEntryItem 组件中添加特殊处理逻辑

更新内容：
- plan.md: 配置中添加 isExternal 和 externalUrl 字段
- plan.md: handleClick 方法中添加外链跳转逻辑
- README.md: 添加活动中心外链跳转的注意事项
- brainstorm.md: 更新功能入口列表说明

技术实现：
- 使用 window.open() 打开新窗口
- 与底部导航栏 BottomNav.vue 的逻辑保持一致
- 未来可考虑集成到项目内

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

功能入口配置：
- 课程中心: /courses (对应底部Tab第2个入口)
- 活动中心: /activity (对应底部Tab第3个入口)
- 时光机: /recall/login (回顾功能)
- 个人中心: /profile (对应底部Tab第4个入口)

更新内容：
- plan.md: 新增完整的 welcomeEntries.js 配置
- README.md: 更新开发进度，标记功能入口为已完成
- brainstorm.md: 更新待确认事项

技术说明：
- 使用优先级排序 (priority 1-4)
- 每个入口包含：id, title, subtitle, icon, route, color
- 支持动态配置化，便于后续调整

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>