docs: 更新欢迎页开发文档和新增CHANGELOG
- 更新 README.md:标记所有开发任务为已完成 - 新增 CHANGELOG.md:记录欢迎页功能的完整变更日志 - 详细记录新增的组件、配置、环境变量和调试工具 - 记录技术细节、文件结构和使用指南 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
2 changed files
with
151 additions
and
7 deletions
CHANGELOG.md
0 → 100644
| 1 | +# Changelog | ||
| 2 | + | ||
| 3 | +All notable changes to this project will be documented in this file. | ||
| 4 | + | ||
| 5 | +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), | ||
| 6 | +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). | ||
| 7 | + | ||
| 8 | +## [Unreleased] | ||
| 9 | + | ||
| 10 | +## [2026-01-28] | ||
| 11 | + | ||
| 12 | +### Added | ||
| 13 | + | ||
| 14 | +#### 欢迎页功能 (Welcome Page) | ||
| 15 | +- **新增欢迎页首次访问功能**: 用户首次打开应用时自动展示欢迎页,提供核心功能入口 | ||
| 16 | +- **新增 VideoBackground 组件**: 全屏视频背景,支持自动播放、循环播放、移动端优化 | ||
| 17 | +- **新增 WelcomeContent 组件**: 欢迎页内容区域,采用不对称布局展示3个功能入口 | ||
| 18 | +- **新增 WelcomeEntryItem 组件**: 可复用的功能入口卡片组件 | ||
| 19 | +- **新增 welcomeEntries 配置**: 功能入口配置化管理,支持内部路由和外部链接 | ||
| 20 | +- **新增首次访问检测**: 基于 localStorage 的首次访问标志位和路由守卫 | ||
| 21 | +- **新增调试工具**: 开发环境下提供 `window.resetWelcomeFlag()` 和 `window.showWelcome()` 调试函数 | ||
| 22 | +- **新增环境变量**: | ||
| 23 | + - `VITE_WELCOME_PAGE_ENABLED`: 控制欢迎页功能开关 | ||
| 24 | + - `VITE_WELCOME_VIDEO_URL`: 欢迎页背景视频 URL | ||
| 25 | + | ||
| 26 | +#### 资源上传 | ||
| 27 | +- **新增通用七牛云上传工具**: `scripts/upload-to-qiniu.sh`,支持单文件和批量上传 | ||
| 28 | +- **上传欢迎页背景视频**: 17.57MB 星空宇宙主题视频 (https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4) | ||
| 29 | +- **上传欢迎页图标**: 33.53KB 功能入口图标 (https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png) | ||
| 30 | + | ||
| 31 | +### Changed | ||
| 32 | + | ||
| 33 | +#### 路由配置 | ||
| 34 | +- **新增欢迎页路由**: `/welcome` 路由,无需登录即可访问 | ||
| 35 | +- **优化路由守卫**: 在 `router/index.js` 中添加首次访问检测逻辑 | ||
| 36 | + | ||
| 37 | +#### 环境配置 | ||
| 38 | +- **更新 .env.development**: 添加欢迎页相关环境变量 | ||
| 39 | +- **更新 .env.production**: 添加欢迎页相关环境变量 | ||
| 40 | + | ||
| 41 | +### Features | ||
| 42 | + | ||
| 43 | +#### 欢迎页核心特性 | ||
| 44 | +- **视频背景**: 循环播放星空宇宙主题视频,自动生成封面图 | ||
| 45 | +- **首次访问检测**: 基于 localStorage,仅首次访问时展示 | ||
| 46 | +- **功能入口**: 3个核心功能入口(课程中心、活动中心、个人中心) | ||
| 47 | +- **不对称布局**: 打破完美对称,更自然的视觉效果 | ||
| 48 | +- **浮动动画**: 入口图标带有上下浮动动画效果 | ||
| 49 | +- **外部链接支持**: 活动中心支持外链跳转到小程序 | ||
| 50 | + | ||
| 51 | +#### 技术亮点 | ||
| 52 | +- **七牛云视频处理**: 自动生成封面图 `?vframe/jpg/offset/0.001` | ||
| 53 | +- **移动端优化**: 视频元素添加 `playsinline`、`webkit-playsinline`、`x5-video-player-type` 等属性 | ||
| 54 | +- **降级方案**: 视频加载失败时显示静态背景图 | ||
| 55 | +- **配置化管理**: 功能入口列表可通过配置文件轻松修改 | ||
| 56 | + | ||
| 57 | +### Technical Details | ||
| 58 | + | ||
| 59 | +#### 文件结构 | ||
| 60 | +``` | ||
| 61 | +src/ | ||
| 62 | +├── components/ | ||
| 63 | +│ ├── effects/ | ||
| 64 | +│ │ └── VideoBackground.vue # 视频背景组件 | ||
| 65 | +│ └── welcome/ | ||
| 66 | +│ ├── WelcomeContent.vue # 欢迎页内容组件 | ||
| 67 | +│ └── WelcomeEntryItem.vue # 功能入口项组件 | ||
| 68 | +├── config/ | ||
| 69 | +│ └── welcomeEntries.js # 功能入口配置 | ||
| 70 | +├── router/ | ||
| 71 | +│ ├── index.js # 路由守卫(首次访问检测) | ||
| 72 | +│ ├── guards.js # 访问标志管理 | ||
| 73 | +│ └── routes.js # 路由配置 | ||
| 74 | +└── views/ | ||
| 75 | + └── welcome/ | ||
| 76 | + └── WelcomePage.vue # 欢迎页视图 | ||
| 77 | +``` | ||
| 78 | + | ||
| 79 | +#### 功能入口配置 | ||
| 80 | +```javascript | ||
| 81 | +export const welcomeEntries = [ | ||
| 82 | + { | ||
| 83 | + id: 'courses', | ||
| 84 | + title: '课程中心', | ||
| 85 | + icon: 'https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png', | ||
| 86 | + route: '/courses', | ||
| 87 | + priority: 1 | ||
| 88 | + }, | ||
| 89 | + { | ||
| 90 | + id: 'activity', | ||
| 91 | + title: '活动中心', | ||
| 92 | + icon: 'https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png', | ||
| 93 | + route: '/activity', | ||
| 94 | + priority: 2, | ||
| 95 | + isExternal: true, | ||
| 96 | + externalUrl: 'https://wxm.behalo.cc/pages/activity/activity?token=&user_id=' | ||
| 97 | + }, | ||
| 98 | + { | ||
| 99 | + id: 'profile', | ||
| 100 | + title: '个人中心', | ||
| 101 | + icon: 'https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png', | ||
| 102 | + route: '/profile', | ||
| 103 | + priority: 3 | ||
| 104 | + } | ||
| 105 | +] | ||
| 106 | +``` | ||
| 107 | + | ||
| 108 | +### Development | ||
| 109 | + | ||
| 110 | +#### 调试工具 | ||
| 111 | +```javascript | ||
| 112 | +// 开发环境全局函数 | ||
| 113 | +window.resetWelcomeFlag() // 重置首次访问标志 | ||
| 114 | +window.showWelcome() // 直接跳转到欢迎页 | ||
| 115 | + | ||
| 116 | +// URL 参数方式 | ||
| 117 | +?reset_welcome=true // 重置并刷新 | ||
| 118 | +``` | ||
| 119 | + | ||
| 120 | +#### 测试清单 | ||
| 121 | +- [x] 首次访问自动跳转到欢迎页 | ||
| 122 | +- [x] 非首次访问直接进入首页 | ||
| 123 | +- [x] 视频背景正常播放 | ||
| 124 | +- [x] 3个功能入口正常跳转 | ||
| 125 | +- [x] 活动中心外链正常打开 | ||
| 126 | +- [x] 调试工具正常工作 | ||
| 127 | +- [x] 移动端视频正常播放 | ||
| 128 | +- [x] 布局响应式正常 | ||
| 129 | + | ||
| 130 | +### Documentation | ||
| 131 | + | ||
| 132 | +#### 新增文档 | ||
| 133 | +- `docs/plan/26.1.28-欢迎页开发计划/plan.md` - 详细实现计划 | ||
| 134 | +- `docs/plan/26.1.28-欢迎页开发计划/brainstorm.md` - 头脑风暴与设计探索 | ||
| 135 | +- `docs/plan/26.1.28-欢迎页开发计划/README.md` - 快速开始指南 | ||
| 136 | + | ||
| 137 | +#### 工具脚本 | ||
| 138 | +- `scripts/upload-to-qiniu.sh` - 通用七牛云上传工具 | ||
| 139 | + | ||
| 140 | +--- | ||
| 141 | + | ||
| 142 | +*Last updated: 2026-01-28* |
| ... | @@ -72,17 +72,19 @@ VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4 | ... | @@ -72,17 +72,19 @@ VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4 |
| 72 | - [x] 详细实现计划 (`plan.md`) | 72 | - [x] 详细实现计划 (`plan.md`) |
| 73 | - [x] 头脑风暴文档 (`brainstorm.md`) | 73 | - [x] 头脑风暴文档 (`brainstorm.md`) |
| 74 | - [x] 功能入口列表确定(3个入口:课程、活动、我的) | 74 | - [x] 功能入口列表确定(3个入口:课程、活动、我的) |
| 75 | +- [x] VideoBackground 组件 ✅ | ||
| 76 | +- [x] WelcomeContent 组件 ✅ | ||
| 77 | +- [x] WelcomeEntryItem 组件 ✅ | ||
| 78 | +- [x] 路由与首次访问逻辑 ✅ | ||
| 79 | +- [x] 环境变量配置 ✅ | ||
| 80 | +- [x] 功能入口配置文件 ✅ | ||
| 81 | +- [x] 页面布局优化(不对称布局)✅ | ||
| 75 | 82 | ||
| 76 | ### ⏳ 待开发 | 83 | ### ⏳ 待开发 |
| 77 | -- [ ] VideoBackground 组件 | 84 | +- 无 |
| 78 | -- [ ] WelcomeContent 组件(环绕式布局) | ||
| 79 | -- [ ] WelcomeEntryItem 组件(图片图标) | ||
| 80 | -- [ ] 路由与首次访问逻辑 | ||
| 81 | 85 | ||
| 82 | ### ❌ 待确认 | 86 | ### ❌ 待确认 |
| 83 | -- [ ] 页面效果图 (设计稿) | 87 | +- 无 |
| 84 | -- [ ] 环绕式布局的具体位置参数 | ||
| 85 | -- [ ] 页面布局细节 (顶部/底部元素) | ||
| 86 | 88 | ||
| 87 | --- | 89 | --- |
| 88 | 90 | ... | ... |
-
Please register or login to post a comment