Files
ViGent2/Docs/DevLogs/Day17.md
Kevin Wong 74516dbcdb 更新
2026-02-04 11:56:37 +08:00

2.1 KiB
Raw Blame History

🧩 前端 UI 拆分 (11:00)

🧩 前端 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 音量/发布表单)

🖼️ 预览弹窗增强 (11:10)

内容

  • 预览弹窗统一为可复用组件,支持标题与提示
  • 发布页预览与素材预览共享弹窗样式
  • 弹窗头部样式统一(图标 + 标题 + 关闭按钮)

涉及文件

  • frontend/src/components/VideoPreviewModal.tsx
  • frontend/src/app/page.tsx
  • frontend/src/app/publish/page.tsx

🧭 术语统一 (11:20)

内容

  • “视频预览” → “作品预览”
  • “历史视频” → “历史作品”
  • “选择要发布的视频” → “选择要发布的作品”