Hooke / mlaj

将文档中所有引用的大写 "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>

- 新增通用七牛云上传工具 scripts/upload-to-qiniu.sh
  * 支持单文件上传和批量上传
  * 支持代理配置
  * 使用 rput 命令直接上传，更简单可靠

- ✅ 成功上传 welcome-bg.mp4 (17.57MB)
  * URL: https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
  * Hash: lpipKorSMZBEVa-eCevwvcqkB8ZH
  * 封面图自动生成: ?vframe/jpg/offset/0.001

- 更新文档:
  * 修正七牛云 Bucket 名称为 ipadbiz
  * 更新上传说明，移除代理相关配置(本次未使用)
  * 添加文件信息和上传验证

技术说明:
- 七牛云空间: ipadbiz
- CDN 域名: cdn.ipadbiz.cn
- 上传路径: mlaj/video/welcome-bg.mp4

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

- 新增 README.md 项目说明文档，包含快速开始指南和常见问题
- 新增 upload-welcome-video.sh 视频上传脚本
- 更新 plan.md：采用七牛云视频处理参数自动生成封面图
- 更新 brainstorm.md：记录封面图方案探索过程
- 更新 .gitignore：忽略视频文件（*.mp4, *.mov 等）
- 更新 .env.development：切换代理服务器配置

技术亮点：
- 使用七牛云 ?vframe/jpg/offset/0.001 参数自动提取视频首帧
- 只需上传一个视频文件，无需单独准备封面图
- 视频文件已准备（welcome-bg.mp4），待上传到七牛云

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

新增欢迎页功能的详细开发计划文档，包括头脑风暴、架构设计和实现步骤
创建通用七牛云上传工具脚本，支持单文件上传和批量上传
添加视频背景组件和欢迎页路由配置的基础框架
实现首次访问检测逻辑，使用localStorage记录用户访问状态

将计划文档中的置顶功能API接口路径更新为实际使用的接口名称，确保文档与代码实现一致。

更新自动生成的类型声明文件，以包含 Vue 的 Slot 和 Slots 类型，确保类型完整性并支持模板中的插槽类型检查。

更新 26.1.26 新功能开发计划文档，重新组织内容结构并完善细节：
- 按优先级重新排序功能：置顶、评论、评论列表为高优先级，海报为中优先级
- 新增教师评论管理功能需求
- 完善数据字段定义和 API 接口汇总
- 细化开发步骤为四个阶段并明确里程碑
- 补充边界条件、性能优化和测试计划

添加 SKILLS_GUIDE.md 文档，系统整理所有可用 Claude Code Skills 及其使用指南。同时在 26.1.26 新功能开发计划中补充内容规范和数据统计相关讨论点，完善功能规划。

不再忽略docs目录以将其纳入版本控制

添加项目架构、组件索引、变更记录、工作流和开发计划等文档
- ARCHITECTURE.md: 系统架构与工程配置说明
- COMPONENTS.md: 组件目录索引与说明
- CHANGELOG.md: 功能更新记录
- 工作流.md: 开发工作流程指南
- 暂存用户打卡信息.md: 草稿功能详细规划
- 26.1.26新功能开发计划.md: 打卡互动功能规划
- TODO/26.1.26新功能.md: 功能开发清单

新增 TEACHER_PIN 和 TEACHER_UNPIN 两个API端点，并导出对应的 teacherPinCheckinAPI 和 teacherUnpinCheckinAPI 函数，以支持老师对打卡进行置顶操作。

避免多tab高度不一致时容器被最高的内容撑开，导致短内容下方出现空白区域

- 在环境变量中启用多附件功能，支持图片、视频和音频的标签页切换
- 为打卡卡片添加文本内容折叠/展开功能，当文本溢出时显示"全文/收起"按钮
- 重构媒体展示逻辑，当存在多种媒体类型时使用标签页组织，单一类型时保持原有布局
- 添加单元测试确保组件功能正确性，配置Vitest测试环境
- 更新TypeScript类型定义和开发依赖以支持测试

在恢复打卡草稿前，检查草稿中保存的作业ID是否仍在当前可用作业列表中。如果作业已失效（如被删除或截止），则提示用户并清空草稿，避免恢复无效数据。

- 添加详细目录结构，便于快速导航
- 新增快速开始章节，包含环境准备和新手指南
- 扩展常用开发命令和目录结构说明
- 完善核心架构模式解释，补充组合式函数详情
- 新增常见问题与解决方案章节，涵盖Video.js、API调用、Vant组件等常见问题
- 更新功能更新记录，按时间分类整理
- 优化组件目录结构说明，增加文档索引