## 🧩 发布预览与播放修复 (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` ## 🧩 前端 UI 拆分 (09:10) ### 内容 - 首页 `page.tsx` 拆分为独立 UI 组件,状态与逻辑仍集中在页面 - 新增首页组件目录 `frontend/src/components/home/` ### 组件列表 - `HomeHeader` - `MaterialSelector` - `ScriptEditor` - `TitleSubtitlePanel` - `VoiceSelector` - `RefAudioPanel` - `BgmPanel` - `GenerateActionBar` - `PreviewPanel` - `HistoryList` --- ## 🧰 前端通用工具抽取 (09:30) ### 内容 - 抽取 API Base / 资源 URL / 日期格式化等通用工具 - 首页与发布页统一调用,消除重复逻辑 ### 涉及文件 - `frontend/src/lib/media.ts` - `frontend/src/app/page.tsx` - `frontend/src/app/publish/page.tsx` --- ## 📝 前端规范更新 (09:40) ### 内容 - 更新 `FRONTEND_DEV.md` 以匹配最新目录结构 - 新增 `media.ts` 使用规范与示例 - 增加组件拆分规范与页面 checklist ### 涉及文件 - `Docs/FRONTEND_DEV.md` --- ## 🎨 交互体验与视图优化 (10:00) ### 标题/字幕预览 - 标题/字幕预览按素材分辨率缩放,字号更接近成片 - 标题/字幕样式选择持久化,刷新不回默认 - 默认样式更新:标题 90px 站酷快乐体,字幕 60px 经典黄字 + DingTalkJinBuTi ### 发布页优化 - 选择作品改为卡片列表 + 搜索 + 预览弹窗 --- ## ⚡ 性能微优化 (10:30) ### 内容 - 列表渲染启用 `content-visibility`(素材/历史/参考音频/发布作品),BGM 列表保留滚动定位 - 首屏数据请求并行化(`Promise.allSettled`) - localStorage 写入防抖(文本/标题/BGM 音量/发布表单) --- ## 🧱 Phase 2 Hook 抽取 (11:45) ### 内容 - `useTitleSubtitleStyles`:标题/字幕样式获取与默认选择逻辑 - `useMaterials`:素材列表/上传/删除逻辑抽取 - `useRefAudios`:参考音频列表/上传/删除逻辑抽取 - `useBgm`:背景音乐列表与加载状态抽取 - `useMediaPlayers`:音频试听逻辑集中管理(参考音频/背景音乐) - `useGeneratedVideos`:历史作品列表获取 + 选择逻辑抽取 ### 涉及文件 - `frontend/src/hooks/useTitleSubtitleStyles.ts` - `frontend/src/hooks/useMaterials.ts` - `frontend/src/hooks/useRefAudios.ts` - `frontend/src/hooks/useBgm.ts` - `frontend/src/hooks/useMediaPlayers.ts` - `frontend/src/hooks/useGeneratedVideos.ts` - `frontend/src/app/page.tsx` --- ## 🖼️ 预览弹窗增强 (11:10) ### 内容 - 预览弹窗统一为可复用组件,支持标题与提示 - 发布页预览与素材预览共享弹窗样式 - 弹窗头部样式统一(图标 + 标题 + 关闭按钮) ### 涉及文件 - `frontend/src/components/VideoPreviewModal.tsx` - `frontend/src/app/page.tsx` - `frontend/src/app/publish/page.tsx` --- ## 🧭 术语统一 (11:20) ### 内容 - “视频预览” → “作品预览” - “历史视频” → “历史作品” - “选择要发布的视频” → “选择要发布的作品” ---