hookehuyr

docs(welcome): 完善欢迎页开发计划和文档

- 新增 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>
1 ### 1 ###
2 - # @Date: 2025-03-20 23:40:15 2 +# @Date: 2025-03-20 23:40:15
3 # @LastEditors: hookehuyr hookehuyr@gmail.com 3 # @LastEditors: hookehuyr hookehuyr@gmail.com
4 - # @LastEditTime: 2026-01-18 11:32:59 4 + # @LastEditTime: 2026-01-26 09:51:29
5 # @FilePath: /mlaj/.env.development 5 # @FilePath: /mlaj/.env.development
6 - # @Description: 文件描述 6 +# @Description: 开发环境配置文件
7 ### 7 ###
8 # 资源公共路径 8 # 资源公共路径
9 VITE_BASE = / 9 VITE_BASE = /
...@@ -23,10 +23,10 @@ VITE_PIN = ...@@ -23,10 +23,10 @@ VITE_PIN =
23 # 反向代理服务器地址 23 # 反向代理服务器地址
24 # VITE_PROXY_TARGET = https://oa.anxinchashi.com/ 24 # VITE_PROXY_TARGET = https://oa.anxinchashi.com/
25 # VITE_PROXY_TARGET = http://behalo.onwall.cn/ 25 # VITE_PROXY_TARGET = http://behalo.onwall.cn/
26 -# VITE_PROXY_TARGET = http://oa-dev.onwall.cn/ 26 +VITE_PROXY_TARGET = http://oa-dev.onwall.cn/
27 # VITE_PROXY_TARGET = https://oa.behalo.cc/ 27 # VITE_PROXY_TARGET = https://oa.behalo.cc/
28 # VITE_PROXY_TARGET = https://www.wxgzjs.cn/ 28 # VITE_PROXY_TARGET = https://www.wxgzjs.cn/
29 -VITE_PROXY_TARGET = https://wxm.behalo.cc/ 29 +# VITE_PROXY_TARGET = https://wxm.behalo.cc/
30 30
31 # PC端地址 31 # PC端地址
32 VITE_MOBILE_URL = http://localhost:5173/ 32 VITE_MOBILE_URL = http://localhost:5173/
......
...@@ -33,3 +33,14 @@ mlaj ...@@ -33,3 +33,14 @@ mlaj
33 .specify 33 .specify
34 .trae 34 .trae
35 .github 35 .github
36 +
37 +# Video files (large media assets)
38 +*.mp4
39 +*.mov
40 +*.avi
41 +*.mkv
42 +*.flv
43 +*.webm
44 +
45 +# Plan directory video resources
46 +docs/plan/*/video/
......
1 +# 欢迎页开发计划
2 +
3 +## 📁 文件说明
4 +
5 +```
6 +26.1.28-欢迎页开发计划/
7 +├── plan.md # 详细实现计划
8 +├── brainstorm.md # 头脑风暴与设计探索
9 +├── README.md # 本文件
10 +├── upload-welcome-video.sh # 视频上传脚本 ✅ 可用
11 +├── deploy.sh # 参考部署脚本
12 +├── video/ # 视频资源目录
13 +│ └── welcome-bg.mp4 # ✅ 背景视频已添加
14 +└── img/ # 图片资源目录 (待添加)
15 +```
16 +
17 +---
18 +
19 +## 🎬 快速开始
20 +
21 +### 上传背景视频到七牛云
22 +
23 +**方式 1: 使用专用脚本 (推荐)**
24 +
25 +```bash
26 +# 进入计划目录
27 +cd docs/plan/26.1.28-欢迎页开发计划
28 +
29 +# 直接上传
30 +./upload-welcome-video.sh
31 +
32 +# 使用代理上传
33 +USE_PROXY=true PROXY_HOST="127.0.0.1:7890" ./upload-welcome-video.sh
34 +```
35 +
36 +**方式 2: 使用通用上传工具**
37 +
38 +```bash
39 +# 初始化七牛账户 (首次使用)
40 +pnpm run qiniu:init
41 +
42 +# 上传视频
43 +pnpm run upload:qiniu video/welcome-bg.mp4 mlaj/video/welcome-bg.mp4
44 +
45 +# 使用代理上传
46 +USE_PROXY=true pnpm run upload:qiniu video/welcome-bg.mp4 mlaj/video/welcome-bg.mp4
47 +```
48 +
49 +### 上传成功后的 URL
50 +
51 +```
52 +视频: https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
53 +封面: https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001
54 +```
55 +
56 +### 更新环境变量
57 +
58 +将以下配置添加到 `.env.development``.env.production`:
59 +
60 +```bash
61 +VITE_WELCOME_PAGE_ENABLED=true
62 +VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
63 +```
64 +
65 +---
66 +
67 +## 📋 开发进度
68 +
69 +### ✅ 已完成
70 +- [x] 背景视频文件准备 (`welcome-bg.mp4`)
71 +- [x] 上传工具脚本 (`upload-welcome-video.sh`)
72 +- [x] 详细实现计划 (`plan.md`)
73 +- [x] 头脑风暴文档 (`brainstorm.md`)
74 +
75 +### ⏳ 待开发
76 +- [ ] 七牛云通用上传工具 (`scripts/upload-to-qiniu.sh`)
77 +- [ ] VideoBackground 组件
78 +- [ ] WelcomeContent 组件
79 +- [ ] 路由与首次访问逻辑
80 +- [ ] 功能入口配置
81 +
82 +### ❌ 待确认
83 +- [ ] 页面效果图 (设计稿)
84 +- [ ] 功能入口列表
85 +- [ ] 页面布局细节 (顶部/底部元素)
86 +
87 +---
88 +
89 +## 📖 文档索引
90 +
91 +1. **brainstorm.md** - 头脑风暴与设计探索
92 + - 需求探索过程
93 + - 架构设计探索
94 + - 核心组件设计
95 + - 七牛云上传工具设计
96 + - 风险识别与应对
97 + - 关键决策总结
98 +
99 +2. **plan.md** - 详细实现计划
100 + - 6个开发阶段
101 + - 完整代码示例
102 + - 测试清单
103 + - 技术要点
104 + - 使用指南
105 +
106 +---
107 +
108 +## 🔧 开发工具
109 +
110 +### 调试欢迎页
111 +
112 +**重置欢迎页标志:**
113 +```bash
114 +# URL 参数方式
115 +http://localhost:5173/?reset_welcome=true
116 +
117 +# 控制台方式
118 +window.resetWelcomeFlag()
119 +location.reload()
120 +```
121 +
122 +**直接访问欢迎页:**
123 +```javascript
124 +window.showWelcome()
125 +```
126 +
127 +---
128 +
129 +## 🎯 核心特性
130 +
131 +### 视频背景
132 +- ✅ 循环播放星空宇宙主题视频
133 +- ✅ 移动端和 PC 端自适应
134 +- ✅ 自动生成封面图 (七牛云视频处理)
135 +- ✅ 降级方案 (视频加载失败时使用静态图)
136 +
137 +### 首次访问检测
138 +- ✅ localStorage 标志位
139 +- ✅ 路由守卫自动拦截
140 +- ✅ 调试工具支持
141 +
142 +### 功能入口
143 +- ⏳ 持续循环的呼吸缩放动效
144 +- ⏳ 2-3列网格布局
145 +- ⏳ 配置化入口列表
146 +
147 +---
148 +
149 +## 📞 常见问题
150 +
151 +### Q: 视频上传失败?
152 +
153 +**A:** 检查是否需要使用代理:
154 +```bash
155 +USE_PROXY=true PROXY_HOST="127.0.0.1:7890" ./upload-welcome-video.sh
156 +```
157 +
158 +### Q: 封面图如何生成?
159 +
160 +**A:** 自动从视频中提取第一帧:
161 +```javascript
162 +const posterUrl = `${videoUrl}?vframe/jpg/offset/0.001`
163 +```
164 +
165 +### Q: 如何测试欢迎页?
166 +
167 +**A:** 重置标志后刷新页面:
168 +```javascript
169 +window.resetWelcomeFlag()
170 +location.reload()
171 +```
172 +
173 +---
174 +
175 +*最后更新: 2026-01-28*
...@@ -285,6 +285,54 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \ ...@@ -285,6 +285,54 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \
285 285
286 --- 286 ---
287 287
288 +### 视频封面图方案探索
289 +
290 +**原始方案问题:**
291 +- 需要单独准备和上传封面图片
292 +- 封面图可能与视频内容不匹配
293 +- 增加资源管理成本
294 +
295 +**改进方案: 使用七牛云视频处理参数**
296 +
297 +**方案选择:**
298 +```javascript
299 +// 自动从视频中提取第一帧作为封面
300 +const posterUrl = `${videoUrl}?vframe/jpg/offset/0.001`
301 +
302 +// 完整示例
303 +const videoUrl = 'https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4'
304 +const posterUrl = 'https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001'
305 +```
306 +
307 +**七牛云视频帧处理参数:**
308 +- `vframe/jpg/offset/0.001` - 从视频第 0.001 秒截取一帧作为 JPG
309 +- 官方文档: https://developer.qiniu.com/dora/1316/video-frame-operation
310 +
311 +**高级参数 (可选):**
312 +```javascript
313 +// 指定截取时间点
314 +?vframe/jpg/offset/1
315 +
316 +// 指定输出尺寸
317 +?vframe/jpg/offset/0.001/w/1920/h/1080
318 +
319 +// 指定图片质量
320 +?vframe/jpg/offset/0.001/quality/85
321 +```
322 +
323 +**优势:**
324 +- ✅ 只需上传一个视频文件
325 +- ✅ 封面图与视频内容一致
326 +- ✅ 减少资源管理成本
327 +- ✅ 支持动态调整参数
328 +
329 +**实现位置:**
330 +- `VideoBackground.vue` 组件内部使用 computed 自动生成
331 +- 环境变量只需配置 `VITE_WELCOME_VIDEO_URL`
332 +- 移除 `VITE_WELCOME_VIDEO_POSTER` 配置项
333 +
334 +---
335 +
288 ## 风险识别与应对 336 ## 风险识别与应对
289 337
290 ### 技术风险 338 ### 技术风险
...@@ -326,8 +374,9 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \ ...@@ -326,8 +374,9 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \
326 374
327 **应对:** 375 **应对:**
328 - 限制文件大小 < 10MB 376 - 限制文件大小 < 10MB
329 -- 提供封面图在视频加载前显示 377 +- 使用七牛云视频处理参数自动生成封面图 (`?vframe/jpg/offset/0.001`)
330 -- 添加加载进度提示 378 +- 封面图在视频加载前显示,提升用户体验
379 +- 可选: 指定封面图质量和尺寸优化加载速度
331 - 考虑视频分段加载或 M3U8 380 - 考虑视频分段加载或 M3U8
332 381
333 --- 382 ---
...@@ -368,8 +417,8 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \ ...@@ -368,8 +417,8 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \
368 417
369 根据需求文档,以下事项需要确认: 418 根据需求文档,以下事项需要确认:
370 419
371 -1. **背景视频文件** - `video/?.mp4` 文件名未知 420 +1. **背景视频文件** - `video/welcome-bg.mp4` 已添加
372 -2.**页面效果图** - `img/` 文件夹为空 421 +2.**页面效果图** - `img/` 文件夹为空,需要设计稿确认布局
373 3.**功能入口列表** - 具体跳转地址未知 422 3.**功能入口列表** - 具体跳转地址未知
374 4.**页面布局细节** - 顶部/底部是否需要元素(Logo、标语、按钮等) 423 4.**页面布局细节** - 顶部/底部是否需要元素(Logo、标语、按钮等)
375 424
...@@ -387,6 +436,7 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \ ...@@ -387,6 +436,7 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \
387 | 动效风格 | 持续循环 | 符合主题,视觉冲击力强 | 436 | 动效风格 | 持续循环 | 符合主题,视觉冲击力强 |
388 | 架构设计 | 组件化 | 职责清晰,易维护 | 437 | 架构设计 | 组件化 | 职责清晰,易维护 |
389 | 上传工具 | 通用化 | 支持多种场景复用 | 438 | 上传工具 | 通用化 | 支持多种场景复用 |
439 +| 封面图方案 | 七牛云自动生成 | 减少资源管理,内容一致 |
390 440
391 --- 441 ---
392 442
......
...@@ -106,12 +106,13 @@ scripts/qiniu/configs/ ...@@ -106,12 +106,13 @@ scripts/qiniu/configs/
106 106
107 #### 步骤 3: 准备视频资源 107 #### 步骤 3: 准备视频资源
108 108
109 --`docs/plan/26.1.28-欢迎页开发计划/video/` 添加背景视频 109 +**视频文件:** `docs/plan/26.1.28-欢迎页开发计划/video/welcome-bg.mp4` ✅ 已添加
110 -- 建议规格: 110 +
111 - - 分辨率: 1920x1080 (1080p) 111 +**建议规格:**
112 - - 编码格式: H.264 112 +- 分辨率: 1920x1080 (1080p)
113 - - 时长: 10-20秒循环视频 113 +- 编码格式: H.264
114 - - 文件大小: < 10MB 114 +- 时长: 10-20秒循环视频
115 +- 文件大小: < 10MB
115 116
116 #### 步骤 4: 上传资源到七牛云 117 #### 步骤 4: 上传资源到七牛云
117 118
...@@ -120,9 +121,15 @@ scripts/qiniu/configs/ ...@@ -120,9 +121,15 @@ scripts/qiniu/configs/
120 chmod +x scripts/upload-to-qiniu.sh 121 chmod +x scripts/upload-to-qiniu.sh
121 ./scripts/upload-to-qiniu.sh init 122 ./scripts/upload-to-qiniu.sh init
122 123
123 -# 上传视频(如果有代理) 124 +# 上传欢迎页背景视频
124 USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \ 125 USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \
125 - ./scripts/upload-to-qiniu.sh video/background.mp4 mlaj/video/welcome-background.mp4 126 + ./scripts/upload-to-qiniu.sh video/welcome-bg.mp4 mlaj/video/welcome-bg.mp4
127 +```
128 +
129 +**上传成功后的 URL:**
130 +```
131 +视频: https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
132 +封面: https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001
126 ``` 133 ```
127 134
128 #### 步骤 5: 更新环境变量 135 #### 步骤 5: 更新环境变量
...@@ -131,17 +138,23 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \ ...@@ -131,17 +138,23 @@ USE_PROXY=true PROXY_HOST="127.0.0.1:7890" \
131 ```bash 138 ```bash
132 # 欢迎页功能开关 139 # 欢迎页功能开关
133 VITE_WELCOME_PAGE_ENABLED=true 140 VITE_WELCOME_PAGE_ENABLED=true
134 -VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-background.mp4 141 +
135 -VITE_WELCOME_VIDEO_POSTER=https://cdn.ipadbiz.cn/mlaj/images/welcome-poster.jpg 142 +# 视频资源 URL
143 +# 封面图会自动通过七牛云处理参数生成: videoUrl + ?vframe/jpg/offset/0.001
144 +VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
136 ``` 145 ```
137 146
138 **`.env.production`:** 147 **`.env.production`:**
139 ```bash 148 ```bash
140 VITE_WELCOME_PAGE_ENABLED=true 149 VITE_WELCOME_PAGE_ENABLED=true
141 -VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-background.mp4 150 +VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
142 -VITE_WELCOME_VIDEO_POSTER=https://cdn.ipadbiz.cn/mlaj/images/welcome-poster.jpg
143 ``` 151 ```
144 152
153 +**说明:**
154 +- 只需配置视频 URL,封面图会自动从视频中提取第一帧生成
155 +- 七牛云处理参数: `?vframe/jpg/offset/0.001` 表示从视频第 0.001 秒截取一帧作为 JPG 图片
156 +- 降级方案: 视频加载失败时自动使用该封面图作为静态背景
157 +
145 --- 158 ---
146 159
147 ### 第 1 阶段: 通用上传工具开发 (优先级: 🔴 高) 160 ### 第 1 阶段: 通用上传工具开发 (优先级: 🔴 高)
...@@ -390,7 +403,7 @@ USE_PROXY=true pnpm run upload:qiniu ./test/file.mp4 mlaj/video/test.mp4 ...@@ -390,7 +403,7 @@ USE_PROXY=true pnpm run upload:qiniu ./test/file.mp4 mlaj/video/test.mp4
390 ref="videoRef" 403 ref="videoRef"
391 class="video-element" 404 class="video-element"
392 :src="videoSrc" 405 :src="videoSrc"
393 - :poster="poster" 406 + :poster="posterUrl"
394 :autoplay="autoplay" 407 :autoplay="autoplay"
395 :loop="loop" 408 :loop="loop"
396 :muted="muted" 409 :muted="muted"
...@@ -406,13 +419,13 @@ USE_PROXY=true pnpm run upload:qiniu ./test/file.mp4 mlaj/video/test.mp4 ...@@ -406,13 +419,13 @@ USE_PROXY=true pnpm run upload:qiniu ./test/file.mp4 mlaj/video/test.mp4
406 <div 419 <div
407 v-if="showFallback" 420 v-if="showFallback"
408 class="video-fallback" 421 class="video-fallback"
409 - :style="{ backgroundImage: `url(${poster || videoSrc})` }" 422 + :style="{ backgroundImage: `url(${posterUrl})` }"
410 ></div> 423 ></div>
411 </div> 424 </div>
412 </template> 425 </template>
413 426
414 <script setup> 427 <script setup>
415 -import { ref, onMounted, onUnmounted } from 'vue' 428 +import { ref, computed, onMounted, onUnmounted } from 'vue'
416 429
417 const props = defineProps({ 430 const props = defineProps({
418 /** 视频源 URL */ 431 /** 视频源 URL */
...@@ -420,7 +433,7 @@ const props = defineProps({ ...@@ -420,7 +433,7 @@ const props = defineProps({
420 type: String, 433 type: String,
421 required: true 434 required: true
422 }, 435 },
423 - /** 封面图 URL */ 436 + /** 封面图 URL (可选,不传则自动从视频生成) */
424 poster: { 437 poster: {
425 type: String, 438 type: String,
426 default: '' 439 default: ''
...@@ -451,6 +464,20 @@ const videoRef = ref(null) ...@@ -451,6 +464,20 @@ const videoRef = ref(null)
451 const isLoading = ref(true) 464 const isLoading = ref(true)
452 const showFallback = ref(false) 465 const showFallback = ref(false)
453 466
467 +/**
468 + * 自动生成封面图 URL
469 + * 如果没有传入 poster,使用七牛云视频处理参数从视频中提取第一帧
470 + * 处理参数: ?vframe/jpg/offset/0.001 表示从视频第 0.001 秒截取一帧作为 JPG
471 + */
472 +const posterUrl = computed(() => {
473 + if (props.poster) {
474 + return props.poster
475 + }
476 + // 从视频 URL 自动生成封面图
477 + // 七牛云视频处理: https://developer.qiniu.com/dora/1316/video-frame-operation
478 + return `${props.videoSrc}?vframe/jpg/offset/0.001`
479 +})
480 +
454 // 视频可以播放时 481 // 视频可以播放时
455 const onCanPlay = () => { 482 const onCanPlay = () => {
456 isLoading.value = false 483 isLoading.value = false
...@@ -555,7 +582,6 @@ defineExpose({ ...@@ -555,7 +582,6 @@ defineExpose({
555 <template> 582 <template>
556 <VideoBackground 583 <VideoBackground
557 :video-src="videoUrl" 584 :video-src="videoUrl"
558 - :poster="posterUrl"
559 autoplay 585 autoplay
560 loop 586 loop
561 muted 587 muted
...@@ -565,8 +591,9 @@ defineExpose({ ...@@ -565,8 +591,9 @@ defineExpose({
565 <script setup> 591 <script setup>
566 import VideoBackground from '@/components/effects/VideoBackground.vue' 592 import VideoBackground from '@/components/effects/VideoBackground.vue'
567 593
568 -const videoUrl = 'https://cdn.ipadbiz.cn/mlaj/video/welcome-background.mp4' 594 +const videoUrl = 'https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4'
569 -const posterUrl = 'https://cdn.ipadbiz.cn/mlaj/images/welcome-poster.jpg' 595 +// poster 会自动生成: videoUrl + ?vframe/jpg/offset/0.001
596 +// 即: https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001
570 </script> 597 </script>
571 ``` 598 ```
572 599
...@@ -587,7 +614,6 @@ const posterUrl = 'https://cdn.ipadbiz.cn/mlaj/images/welcome-poster.jpg' ...@@ -587,7 +614,6 @@ const posterUrl = 'https://cdn.ipadbiz.cn/mlaj/images/welcome-poster.jpg'
587 <VideoBackground 614 <VideoBackground
588 v-if="videoUrl" 615 v-if="videoUrl"
589 :video-src="videoUrl" 616 :video-src="videoUrl"
590 - :poster="posterUrl"
591 /> 617 />
592 618
593 <!-- 内容区域 --> 619 <!-- 内容区域 -->
...@@ -597,19 +623,13 @@ const posterUrl = 'https://cdn.ipadbiz.cn/mlaj/images/welcome-poster.jpg' ...@@ -597,19 +623,13 @@ const posterUrl = 'https://cdn.ipadbiz.cn/mlaj/images/welcome-poster.jpg'
597 623
598 <script setup> 624 <script setup>
599 import { computed } from 'vue' 625 import { computed } from 'vue'
600 -import { useRoute } from 'vue-router'
601 import VideoBackground from '@/components/effects/VideoBackground.vue' 626 import VideoBackground from '@/components/effects/VideoBackground.vue'
602 import WelcomeContent from '@/components/welcome/WelcomeContent.vue' 627 import WelcomeContent from '@/components/welcome/WelcomeContent.vue'
603 628
604 -const route = useRoute()
605 -
606 const videoUrl = computed(() => { 629 const videoUrl = computed(() => {
607 return import.meta.env.VITE_WELCOME_VIDEO_URL || '' 630 return import.meta.env.VITE_WELCOME_VIDEO_URL || ''
608 }) 631 })
609 - 632 +// poster 会自动从 videoUrl 生成,无需单独配置
610 -const posterUrl = computed(() => {
611 - return import.meta.env.VITE_WELCOME_VIDEO_POSTER || ''
612 -})
613 </script> 633 </script>
614 634
615 <style scoped> 635 <style scoped>
...@@ -1075,12 +1095,14 @@ window.showWelcome() ...@@ -1075,12 +1095,14 @@ window.showWelcome()
1075 1095
1076 ### 使用上传工具 1096 ### 使用上传工具
1077 1097
1098 +**当前视频文件:** `docs/plan/26.1.28-欢迎页开发计划/video/welcome-bg.mp4`
1099 +
1078 ```bash 1100 ```bash
1079 -# 单文件上传 1101 +# 上传欢迎页背景视频
1080 -pnpm run upload:qiniu ./local/video.mp4 mlaj/video/welcome-background.mp4 1102 +pnpm run upload:qiniu video/welcome-bg.mp4 mlaj/video/welcome-bg.mp4
1081 1103
1082 # 使用代理上传 1104 # 使用代理上传
1083 -USE_PROXY=true pnpm run upload:qiniu ./local/video.mp4 mlaj/video/welcome-background.mp4 1105 +USE_PROXY=true pnpm run upload:qiniu video/welcome-bg.mp4 mlaj/video/welcome-bg.mp4
1084 ``` 1106 ```
1085 1107
1086 ### 视频规格建议 1108 ### 视频规格建议
...@@ -1089,7 +1111,6 @@ USE_PROXY=true pnpm run upload:qiniu ./local/video.mp4 mlaj/video/welcome-backgr ...@@ -1089,7 +1111,6 @@ USE_PROXY=true pnpm run upload:qiniu ./local/video.mp4 mlaj/video/welcome-backgr
1089 - 编码格式: H.264 1111 - 编码格式: H.264
1090 - 时长: 10-20秒循环 1112 - 时长: 10-20秒循环
1091 - 文件大小: < 10MB 1113 - 文件大小: < 10MB
1092 -```
1093 1114
1094 #### 步骤 3: 部署到开发环境 1115 #### 步骤 3: 部署到开发环境
1095 1116
...@@ -1145,17 +1166,68 @@ transform: scale(1.08); ...@@ -1145,17 +1166,68 @@ transform: scale(1.08);
1145 will-change: transform, opacity; 1166 will-change: transform, opacity;
1146 ``` 1167 ```
1147 1168
1148 -### 3. 降级方案 1169 +### 3. 七牛云视频处理 - 自动生成封面图
1170 +
1171 +**封面图自动生成:**
1172 +```javascript
1173 +// VideoBackground 组件内部实现
1174 +const posterUrl = computed(() => {
1175 + if (props.poster) {
1176 + return props.poster
1177 + }
1178 + // 从视频 URL 自动生成封面图
1179 + return `${props.videoSrc}?vframe/jpg/offset/0.001`
1180 +})
1181 +```
1182 +
1183 +**七牛云视频帧处理参数说明:**
1184 +- `?vframe/jpg/offset/0.001` - 从视频第 0.001 秒截取一帧作为 JPG 图片
1185 +- 完整示例: `https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001`
1186 +- 官方文档: https://developer.qiniu.com/dora/1316/video-frame-operation
1187 +
1188 +**高级参数 (可选):**
1189 +```javascript
1190 +// 指定截取时间点 (第 1 秒)
1191 +https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/1
1192 +
1193 +// 指定输出尺寸 (1920x1080)
1194 +https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001/w/1920/h/1080
1195 +
1196 +// 指定图片质量 (质量 85)
1197 +https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001/quality/85
1198 +
1199 +// 组合使用
1200 +https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001/w/1920/h/1080/quality/85
1201 +```
1202 +
1203 +**优势:**
1204 +- ✅ 只需上传一个视频文件,无需单独准备封面图
1205 +- ✅ 封面图与视频内容一致,不会出现不匹配
1206 +- ✅ 减少资源管理成本
1207 +- ✅ 支持动态调整截取时间和图片质量
1208 +
1209 +---
1210 +
1211 +### 4. 降级方案
1149 1212
1150 ```vue 1213 ```vue
1151 <!-- 视频加载失败时显示静态背景图 --> 1214 <!-- 视频加载失败时显示静态背景图 -->
1152 <div 1215 <div
1153 v-if="showFallback" 1216 v-if="showFallback"
1154 class="video-fallback" 1217 class="video-fallback"
1155 - :style="{ backgroundImage: `url(${poster})` }" 1218 + :style="{ backgroundImage: `url(${posterUrl})` }"
1156 ></div> 1219 ></div>
1157 ``` 1220 ```
1158 1221
1222 +**降级触发条件:**
1223 +1. 视频加载失败 (网络错误、格式不支持)
1224 +2. 视频自动播放被阻止 (iOS Safari 政策)
1225 +3. 视频解码失败
1226 +
1227 +**降级方案:**
1228 +- 使用自动生成的封面图作为静态背景
1229 +- 保证用户始终能看到背景内容
1230 +
1159 --- 1231 ---
1160 1232
1161 ## 风险与注意事项 1233 ## 风险与注意事项
...@@ -1172,7 +1244,11 @@ will-change: transform, opacity; ...@@ -1172,7 +1244,11 @@ will-change: transform, opacity;
1172 1244
1173 3. **视频加载性能** 1245 3. **视频加载性能**
1174 - 文件过大导致加载缓慢 1246 - 文件过大导致加载缓慢
1175 - - 解决方案: 限制文件大小 < 10MB,提供封面图 1247 + - 解决方案:
1248 + - 限制文件大小 < 10MB
1249 + - 使用七牛云自动生成封面图作为 loading 状态
1250 + - 支持封面图质量参数优化加载速度
1251 + - 考虑使用 CDN 加速
1176 1252
1177 4. **七牛云代理问题** 1253 4. **七牛云代理问题**
1178 - 需要挂代理才能访问 1254 - 需要挂代理才能访问
...@@ -1207,7 +1283,7 @@ will-change: transform, opacity; ...@@ -1207,7 +1283,7 @@ will-change: transform, opacity;
1207 1283
1208 ## 待确认事项 1284 ## 待确认事项
1209 1285
1210 -1. **背景视频文件** - 需要提供视频资源 1286 +1. **背景视频文件** - `video/welcome-bg.mp4` 已添加
1211 2.**页面效果图** - 需要设计稿确认布局 1287 2.**页面效果图** - 需要设计稿确认布局
1212 3.**功能入口列表** - 需要确认具体入口和跳转地址 1288 3.**功能入口列表** - 需要确认具体入口和跳转地址
1213 4.**页面布局细节** - 顶部/底部是否需要元素 1289 4.**页面布局细节** - 顶部/底部是否需要元素
......
1 +#!/usr/bin/env bash
2 +# 欢迎页视频上传脚本
3 +# 用途: 将 video/welcome-bg.mp4 上传到七牛云
4 +
5 +set -euo pipefail
6 +
7 +# 项目根目录
8 +repo_root="$(cd "$(dirname "$0")" && pwd)"
9 +video_file="$repo_root/video/welcome-bg.mp4"
10 +remote_path="mlaj/video/welcome-bg.mp4"
11 +
12 +log_info() {
13 + echo "[upload] $1"
14 +}
15 +
16 +# 检查视频文件是否存在
17 +if [ ! -f "$video_file" ]; then
18 + echo "错误: 视频文件不存在 $video_file"
19 + exit 1
20 +fi
21 +
22 +log_info "准备上传欢迎页背景视频..."
23 +log_info "本地文件: $video_file"
24 +log_info "远程路径: $remote_path"
25 +
26 +# 调用通用上传工具
27 +upload_script="$repo_root/../../scripts/upload-to-qiniu.sh"
28 +
29 +if [ ! -f "$upload_script" ]; then
30 + echo "错误: 上传脚本不存在 $upload_script"
31 + echo "请先创建 scripts/upload-to-qiniu.sh"
32 + exit 1
33 +fi
34 +
35 +# 使用代理上传(如果设置了环境变量)
36 +if [ "${USE_PROXY:-}" = "true" ]; then
37 + log_info "使用代理: ${PROXY_HOST:-127.0.0.1:7890}"
38 +fi
39 +
40 +# 执行上传
41 +bash "$upload_script" "$video_file" "$remote_path"
42 +
43 +log_info "✅ 上传完成!"
44 +log_info "视频 URL: https://cdn.ipadbiz.cn/$remote_path"
45 +log_info "封面 URL: https://cdn.ipadbiz.cn/$remote_path?vframe/jpg/offset/0.001"