hookehuyr

docs: 更新欢迎页开发文档和新增CHANGELOG

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
## [2026-01-28]
### Added
#### 欢迎页功能 (Welcome Page)
- **新增欢迎页首次访问功能**: 用户首次打开应用时自动展示欢迎页,提供核心功能入口
- **新增 VideoBackground 组件**: 全屏视频背景,支持自动播放、循环播放、移动端优化
- **新增 WelcomeContent 组件**: 欢迎页内容区域,采用不对称布局展示3个功能入口
- **新增 WelcomeEntryItem 组件**: 可复用的功能入口卡片组件
- **新增 welcomeEntries 配置**: 功能入口配置化管理,支持内部路由和外部链接
- **新增首次访问检测**: 基于 localStorage 的首次访问标志位和路由守卫
- **新增调试工具**: 开发环境下提供 `window.resetWelcomeFlag()``window.showWelcome()` 调试函数
- **新增环境变量**:
- `VITE_WELCOME_PAGE_ENABLED`: 控制欢迎页功能开关
- `VITE_WELCOME_VIDEO_URL`: 欢迎页背景视频 URL
#### 资源上传
- **新增通用七牛云上传工具**: `scripts/upload-to-qiniu.sh`,支持单文件和批量上传
- **上传欢迎页背景视频**: 17.57MB 星空宇宙主题视频 (https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4)
- **上传欢迎页图标**: 33.53KB 功能入口图标 (https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png)
### Changed
#### 路由配置
- **新增欢迎页路由**: `/welcome` 路由,无需登录即可访问
- **优化路由守卫**: 在 `router/index.js` 中添加首次访问检测逻辑
#### 环境配置
- **更新 .env.development**: 添加欢迎页相关环境变量
- **更新 .env.production**: 添加欢迎页相关环境变量
### Features
#### 欢迎页核心特性
- **视频背景**: 循环播放星空宇宙主题视频,自动生成封面图
- **首次访问检测**: 基于 localStorage,仅首次访问时展示
- **功能入口**: 3个核心功能入口(课程中心、活动中心、个人中心)
- **不对称布局**: 打破完美对称,更自然的视觉效果
- **浮动动画**: 入口图标带有上下浮动动画效果
- **外部链接支持**: 活动中心支持外链跳转到小程序
#### 技术亮点
- **七牛云视频处理**: 自动生成封面图 `?vframe/jpg/offset/0.001`
- **移动端优化**: 视频元素添加 `playsinline``webkit-playsinline``x5-video-player-type` 等属性
- **降级方案**: 视频加载失败时显示静态背景图
- **配置化管理**: 功能入口列表可通过配置文件轻松修改
### Technical Details
#### 文件结构
```
src/
├── components/
│ ├── effects/
│ │ └── VideoBackground.vue # 视频背景组件
│ └── welcome/
│ ├── WelcomeContent.vue # 欢迎页内容组件
│ └── WelcomeEntryItem.vue # 功能入口项组件
├── config/
│ └── welcomeEntries.js # 功能入口配置
├── router/
│ ├── index.js # 路由守卫(首次访问检测)
│ ├── guards.js # 访问标志管理
│ └── routes.js # 路由配置
└── views/
└── welcome/
└── WelcomePage.vue # 欢迎页视图
```
#### 功能入口配置
```javascript
export const welcomeEntries = [
{
id: 'courses',
title: '课程中心',
icon: 'https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png',
route: '/courses',
priority: 1
},
{
id: 'activity',
title: '活动中心',
icon: 'https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png',
route: '/activity',
priority: 2,
isExternal: true,
externalUrl: 'https://wxm.behalo.cc/pages/activity/activity?token=&user_id='
},
{
id: 'profile',
title: '个人中心',
icon: 'https://cdn.ipadbiz.cn/mlaj/images/welcome_btn_1.png',
route: '/profile',
priority: 3
}
]
```
### Development
#### 调试工具
```javascript
// 开发环境全局函数
window.resetWelcomeFlag() // 重置首次访问标志
window.showWelcome() // 直接跳转到欢迎页
// URL 参数方式
?reset_welcome=true // 重置并刷新
```
#### 测试清单
- [x] 首次访问自动跳转到欢迎页
- [x] 非首次访问直接进入首页
- [x] 视频背景正常播放
- [x] 3个功能入口正常跳转
- [x] 活动中心外链正常打开
- [x] 调试工具正常工作
- [x] 移动端视频正常播放
- [x] 布局响应式正常
### Documentation
#### 新增文档
- `docs/plan/26.1.28-欢迎页开发计划/plan.md` - 详细实现计划
- `docs/plan/26.1.28-欢迎页开发计划/brainstorm.md` - 头脑风暴与设计探索
- `docs/plan/26.1.28-欢迎页开发计划/README.md` - 快速开始指南
#### 工具脚本
- `scripts/upload-to-qiniu.sh` - 通用七牛云上传工具
---
*Last updated: 2026-01-28*
......@@ -72,17 +72,19 @@ VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
- [x] 详细实现计划 (`plan.md`)
- [x] 头脑风暴文档 (`brainstorm.md`)
- [x] 功能入口列表确定(3个入口:课程、活动、我的)
- [x] VideoBackground 组件 ✅
- [x] WelcomeContent 组件 ✅
- [x] WelcomeEntryItem 组件 ✅
- [x] 路由与首次访问逻辑 ✅
- [x] 环境变量配置 ✅
- [x] 功能入口配置文件 ✅
- [x] 页面布局优化(不对称布局)✅
### ⏳ 待开发
- [ ] VideoBackground 组件
- [ ] WelcomeContent 组件(环绕式布局)
- [ ] WelcomeEntryItem 组件(图片图标)
- [ ] 路由与首次访问逻辑
-
### ❌ 待确认
- [ ] 页面效果图 (设计稿)
- [ ] 环绕式布局的具体位置参数
- [ ] 页面布局细节 (顶部/底部元素)
-
---
......