diff --git a/Docs/DevLogs/Day17.md b/Docs/DevLogs/Day17.md index 0e07b08..f425022 100644 --- a/Docs/DevLogs/Day17.md +++ b/Docs/DevLogs/Day17.md @@ -1,31 +1,4 @@ -## 🧩 发布预览与播放修复 (14:10) - -### 内容 -- 发布页作品预览兼容签名 URL 与相对路径 -- 参考音频试听统一走 `resolveMediaUrl` -- 素材/BGM 选择在列表变化时自动回退有效项 -- 录音预览 URL 回收、预览弹窗滚动状态恢复、全局任务提示挂载 - -### 涉及文件 -- `frontend/src/app/publish/page.tsx` -- `frontend/src/hooks/useMediaPlayers.ts` -- `frontend/src/hooks/useBgm.ts` -- `frontend/src/hooks/useMaterials.ts` -- `frontend/src/components/home/RefAudioPanel.tsx` -- `frontend/src/components/VideoPreviewModal.tsx` -- `frontend/src/app/layout.tsx` - ---- - -## 🧩 首页持久化修复 (12:20) - -### 内容 -- 接入 `useHomePersistence`,补齐 `isRestored` 恢复/保存逻辑 -- 修复首页刷新后选择项恢复链路,`npm run build` 通过 - -### 涉及文件 -- `frontend/src/app/page.tsx` -- `frontend/src/hooks/useHomePersistence.ts` +# Day 17 - 前端重构与体验优化 ## 🧩 前端 UI 拆分 (09:10) @@ -93,6 +66,31 @@ --- +## 🖼️ 预览弹窗增强 (11:10) + +### 内容 +- 预览弹窗统一为可复用组件,支持标题与提示 +- 发布页预览与素材预览共享弹窗样式 +- 弹窗头部样式统一(图标 + 标题 + 关闭按钮) + +### 涉及文件 +- `frontend/src/components/VideoPreviewModal.tsx` +- `frontend/src/app/page.tsx` +- `frontend/src/app/publish/page.tsx` + +--- + +## 🧭 术语统一 (11:20) + +### 内容 +- “视频预览” → “作品预览” +- “历史视频” → “历史作品” +- “选择要发布的视频” → “选择要发布的作品” +- “选择素材视频” → “视频素材” +- “选择配音方式” → “配音方式” + +--- + ## 🧱 Phase 2 Hook 抽取 (11:45) ### 内容 @@ -114,25 +112,44 @@ --- -## 🖼️ 预览弹窗增强 (11:10) +## 🧩 首页持久化修复 (12:20) ### 内容 -- 预览弹窗统一为可复用组件,支持标题与提示 -- 发布页预览与素材预览共享弹窗样式 -- 弹窗头部样式统一(图标 + 标题 + 关闭按钮) +- 接入 `useHomePersistence`,补齐 `isRestored` 恢复/保存逻辑 +- 修复首页刷新后选择项恢复链路,`npm run build` 通过 ### 涉及文件 -- `frontend/src/components/VideoPreviewModal.tsx` - `frontend/src/app/page.tsx` -- `frontend/src/app/publish/page.tsx` +- `frontend/src/hooks/useHomePersistence.ts` --- -## 🧭 术语统一 (11:20) +## 🧩 发布预览与播放修复 (14:10) ### 内容 -- “视频预览” → “作品预览” -- “历史视频” → “历史作品” -- “选择要发布的视频” → “选择要发布的作品” +- 发布页作品预览兼容签名 URL 与相对路径 +- 参考音频试听统一走 `resolveMediaUrl` +- 素材/BGM 选择在列表变化时自动回退有效项 +- 录音预览 URL 回收、预览弹窗滚动状态恢复、全局任务提示挂载 + +### 涉及文件 +- `frontend/src/app/publish/page.tsx` +- `frontend/src/hooks/useMediaPlayers.ts` +- `frontend/src/hooks/useBgm.ts` +- `frontend/src/hooks/useMaterials.ts` +- `frontend/src/components/home/RefAudioPanel.tsx` +- `frontend/src/components/VideoPreviewModal.tsx` +- `frontend/src/app/layout.tsx` --- + +## 🧩 标题同步与长度限制 (15:30) + +### 内容 +- 片头标题修改同步写入发布信息标题 +- 标题输入兼容中文输入法,限制 15 字(发布信息同规则) + +### 涉及文件 +- `frontend/src/app/page.tsx` +- `frontend/src/components/home/TitleSubtitlePanel.tsx` +- `frontend/src/app/publish/page.tsx` diff --git a/Docs/FRONTEND_DEV.md b/Docs/FRONTEND_DEV.md index 54ebb61..69107c9 100644 --- a/Docs/FRONTEND_DEV.md +++ b/Docs/FRONTEND_DEV.md @@ -220,6 +220,15 @@ import { formatDate } from '@/lib/media'; --- +## 标题输入规则 + +- 片头标题与发布信息标题统一限制 15 字。 +- 中文输入法合成阶段不截断,合成结束后才校验长度。 +- 首页片头标题修改会同步写入 `vigent_${storageKey}_publish_title`。 +- 避免使用 `maxLength` 强制截断输入法合成态。 + +--- + ## 新增页面 Checklist 1. [ ] 导入 `import api from '@/lib/axios'` diff --git a/Docs/FRONTEND_README.md b/Docs/FRONTEND_README.md index cd458c0..6e03f3a 100644 --- a/Docs/FRONTEND_README.md +++ b/Docs/FRONTEND_README.md @@ -33,7 +33,8 @@ ViGent2 的前端界面,采用 Next.js 16 + TailwindCSS 构建。 - **一键克隆**: 选择参考音频后自动调用 Qwen3-TTS 服务。 ### 4. 字幕与标题 [Day 13 新增] -- **片头标题**: 可选输入,视频开头显示 3 秒淡入淡出标题。 +- **片头标题**: 可选输入,限制 15 字,视频开头显示 3 秒淡入淡出标题。 +- **标题同步**: 首页片头标题修改会同步到发布信息标题。 - **逐字高亮字幕**: 卡拉OK效果,默认开启,可关闭。 - **自动对齐**: 基于 faster-whisper 生成字级别时间戳。 - **样式预设**: 标题/字幕样式选择 + 预览 + 字号调节 (Day 16)。 diff --git a/Docs/implementation_plan.md b/Docs/implementation_plan.md index e921803..ea07c8d 100644 --- a/Docs/implementation_plan.md +++ b/Docs/implementation_plan.md @@ -140,7 +140,7 @@ backend/ | 端点 | 方法 | 功能 | |------|------|------| -| `/api/materials` | POST | 上传素材视频 | ✅ | +| `/api/materials` | POST | 上传视频素材 | ✅ | | `/api/materials` | GET | 获取素材列表 | ✅ | | `/api/videos/generate` | POST | 创建视频生成任务 | ✅ | | `/api/videos/tasks/{id}` | GET | 查询任务状态 | ✅ | @@ -164,7 +164,7 @@ background_tasks.add_task(_process_video_generation, task_id, req, user_id) | 页面 | 功能 | |------|------| -| **素材库** | 上传/管理多场景素材视频 | +| **素材库** | 上传/管理多场景视频素材 | | **生成视频** | 输入文案、选择素材、生成预览 | | **任务中心** | 查看生成进度、下载视频 | | **发布管理** | 绑定平台、一键发布、定时发布 |