177 lines
5.1 KiB
Markdown
177 lines
5.1 KiB
Markdown
# Day 17 - 前端重构与体验优化
|
||
|
||
## 🧩 前端 UI 拆分 (09:10)
|
||
|
||
### 内容
|
||
- 首页 `page.tsx` 拆分为独立 UI 组件，状态与逻辑仍集中在页面
|
||
- 新增首页组件目录 `frontend/src/features/home/ui/`
|
||
|
||
### 组件列表
|
||
- `HomeHeader`
|
||
- `MaterialSelector`
|
||
- `ScriptEditor`
|
||
- `TitleSubtitlePanel`
|
||
- `VoiceSelector`
|
||
- `RefAudioPanel`
|
||
- `BgmPanel`
|
||
- `GenerateActionBar`
|
||
- `PreviewPanel`
|
||
- `HistoryList`
|
||
|
||
---
|
||
|
||
## 🧰 前端通用工具抽取 (09:30)
|
||
|
||
### 内容
|
||
- 抽取 API Base / 资源 URL / 日期格式化等通用工具
|
||
- 首页与发布页统一调用，消除重复逻辑
|
||
|
||
### 涉及文件
|
||
- `frontend/src/shared/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 音量/发布表单）
|
||
|
||
---
|
||
|
||
## 🖼️ 预览弹窗增强 (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)
|
||
|
||
### 内容
|
||
- `useTitleSubtitleStyles`：标题/字幕样式获取与默认选择逻辑
|
||
- `useMaterials`：素材列表/上传/删除逻辑抽取
|
||
- `useRefAudios`：参考音频列表/上传/删除逻辑抽取
|
||
- `useBgm`：背景音乐列表与加载状态抽取
|
||
- `useMediaPlayers`：音频试听逻辑集中管理（参考音频/背景音乐）
|
||
- `useGeneratedVideos`：历史作品列表获取 + 选择逻辑抽取
|
||
|
||
### 涉及文件
|
||
- `frontend/src/features/home/model/useTitleSubtitleStyles.ts`
|
||
- `frontend/src/features/home/model/useMaterials.ts`
|
||
- `frontend/src/features/home/model/useRefAudios.ts`
|
||
- `frontend/src/features/home/model/useBgm.ts`
|
||
- `frontend/src/features/home/model/useMediaPlayers.ts`
|
||
- `frontend/src/features/home/model/useGeneratedVideos.ts`
|
||
- `frontend/src/app/page.tsx`
|
||
|
||
---
|
||
|
||
## 🧩 首页持久化修复 (12:20)
|
||
|
||
### 内容
|
||
- 接入 `useHomePersistence`，补齐 `isRestored` 恢复/保存逻辑
|
||
- 修复首页刷新后选择项恢复链路，`npm run build` 通过
|
||
|
||
### 涉及文件
|
||
- `frontend/src/app/page.tsx`
|
||
- `frontend/src/features/home/model/useHomePersistence.ts`
|
||
|
||
---
|
||
|
||
## 🧩 发布预览与播放修复 (14:10)
|
||
|
||
### 内容
|
||
- 发布页作品预览兼容签名 URL 与相对路径
|
||
- 参考音频试听统一走 `resolveMediaUrl`
|
||
- 素材/BGM 选择在列表变化时自动回退有效项
|
||
- 录音预览 URL 回收、预览弹窗滚动状态恢复、全局任务提示挂载
|
||
|
||
### 涉及文件
|
||
- `frontend/src/app/publish/page.tsx`
|
||
- `frontend/src/features/home/model/useMediaPlayers.ts`
|
||
- `frontend/src/features/home/model/useBgm.ts`
|
||
- `frontend/src/features/home/model/useMaterials.ts`
|
||
- `frontend/src/features/home/ui/RefAudioPanel.tsx`
|
||
- `frontend/src/components/VideoPreviewModal.tsx`
|
||
- `frontend/src/app/layout.tsx`
|
||
|
||
---
|
||
|
||
## 🧩 标题同步与长度限制 (15:30)
|
||
|
||
### 内容
|
||
- 片头标题修改同步写入发布信息标题
|
||
- 标题输入兼容中文输入法，限制 15 字（发布信息同规则）
|
||
|
||
### 涉及文件
|
||
- `frontend/src/features/home/model/useHomeController.ts`
|
||
- `frontend/src/features/home/ui/TitleSubtitlePanel.tsx`
|
||
- `frontend/src/features/publish/model/usePublishController.ts`
|
||
|
||
---
|
||
|
||
## 🧱 轻量 FSD 迁移 (16:20)
|
||
|
||
### 内容
|
||
- 页面瘦身：`app` 仅保留入口组件，业务逻辑集中到 Controller Hook
|
||
- 引入 `features/*` 分层：UI 与 model 分离，Home/Publish 按功能聚合
|
||
- 通用能力下沉到 `shared/*`（lib/hooks/api）
|
||
|
||
### 涉及文件
|
||
- `frontend/src/features/home/ui/HomePage.tsx`
|
||
- `frontend/src/features/home/model/useHomeController.ts`
|
||
- `frontend/src/features/publish/ui/PublishPage.tsx`
|
||
- `frontend/src/features/publish/model/usePublishController.ts`
|
||
- `frontend/src/shared/lib/media.ts`
|
||
- `frontend/src/shared/lib/title.ts`
|
||
- `frontend/src/shared/api/axios.ts`
|
||
- `frontend/src/shared/hooks/useTitleInput.ts`
|
||
- `frontend/src/app/page.tsx`
|
||
- `frontend/src/app/publish/page.tsx`
|