xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

feat: #1798 AI数字人前端页面 — 5列水平面板布局 #1803

Merged
xiaoxia merged 1 commits from feat/ai-avatar-page-1798 into develop 2026-09-08 18:31:03 +08:00
Conversation 4 Commits 1 Files Changed 14
+2500
xiaoxia commented 2026-09-08 18:25:53 +08:00
Owner
Copy Link
Copy Source

概述

实现 AI数字人口播短视频的完整前端页面，UI 严格按照 5 列水平面板布局 1:1 实现。

新增文件

类型 & API

  • types/aiAvatar.ts — 完整 TypeScript 类型（AvatarVideo、VoiceCloneState、Script、LipsyncJob、BRollSegment 等）
  • api/aiAvatar.ts — API 封装（文案库 CRUD、对口型、渲染合成、素材上传复用）

状态管理

  • hooks/useAiAvatarState.ts — 页面全局状态（5个面板状态 + 弹窗控制 + 渲染任务）

5个面板组件

  • AvatarVideoPanel.tsx — 面板1：出镜视频上传 + 预览
  • VoiceClonePanel.tsx — 面板2：声音克隆 + 音色列表
  • ScriptLipsyncPanel.tsx — 面板3：文案编辑/选择 + 对口型预览
  • TitleConfigPanel.tsx — 面板4：标题配置（复用 TitleStylePanel）
  • CoverGeneratePanel.tsx — 面板5：封面设置 + 生成按钮

弹窗

  • ScriptSelectModal.tsx — 文案库选择弹窗（搜索+列表+选择）
  • BRollInsertModal.tsx — B-roll 画面插入弹窗（时间轴+素材+模式设置）

主页面 & 样式

  • AiAvatarPage.tsx — 5列面板布局容器
  • AiAvatar.css — 完整样式（面板宽度 20%/20%/25%/17.5%/17.5%）

路由 & 导航

  • appRoutes.tsx — 新增 /ai-avatar 路由
  • navigation.ts — 侧边栏「创作工具」分组新增「AI数字人」

复用清单

  • ✅ TitleStylePanel — import from @/pages/generate/components/title/TitleStylePanel
  • ✅ prepareDirectUpload / completeDirectUpload — import from @/api/assets
  • ✅ apiClient — import from @/api/client

验收

  • 5列面板布局与 UI 原型一致
  • 所有面板可折叠/展开
  • TitleStylePanel 正确复用（import 非复制）
  • 路由和侧边栏注册完成
  • TypeScript 无 any
  • Vite build 通过
  • ESLint 通过
  • Prettier 通过
  • CI 全绿
## 概述 实现 AI数字人口播短视频的完整前端页面，UI 严格按照 5 列水平面板布局 1:1 实现。 ## 新增文件 ### 类型 & API - `types/aiAvatar.ts` — 完整 TypeScript 类型（AvatarVideo、VoiceCloneState、Script、LipsyncJob、BRollSegment 等） - `api/aiAvatar.ts` — API 封装（文案库 CRUD、对口型、渲染合成、素材上传复用） ### 状态管理 - `hooks/useAiAvatarState.ts` — 页面全局状态（5个面板状态 + 弹窗控制 + 渲染任务） ### 5个面板组件 - `AvatarVideoPanel.tsx` — 面板1：出镜视频上传 + 预览 - `VoiceClonePanel.tsx` — 面板2：声音克隆 + 音色列表 - `ScriptLipsyncPanel.tsx` — 面板3：文案编辑/选择 + 对口型预览 - `TitleConfigPanel.tsx` — 面板4：标题配置（**复用 TitleStylePanel**） - `CoverGeneratePanel.tsx` — 面板5：封面设置 + 生成按钮 ### 弹窗 - `ScriptSelectModal.tsx` — 文案库选择弹窗（搜索+列表+选择） - `BRollInsertModal.tsx` — B-roll 画面插入弹窗（时间轴+素材+模式设置） ### 主页面 & 样式 - `AiAvatarPage.tsx` — 5列面板布局容器 - `AiAvatar.css` — 完整样式（面板宽度 20%/20%/25%/17.5%/17.5%） ### 路由 & 导航 - `appRoutes.tsx` — 新增 `/ai-avatar` 路由 - `navigation.ts` — 侧边栏「创作工具」分组新增「AI数字人」 ## 复用清单 - ✅ TitleStylePanel — `import from @/pages/generate/components/title/TitleStylePanel` - ✅ prepareDirectUpload / completeDirectUpload — `import from @/api/assets` - ✅ apiClient — `import from @/api/client` ## 验收 - [x] 5列面板布局与 UI 原型一致 - [x] 所有面板可折叠/展开 - [x] TitleStylePanel 正确复用（import 非复制） - [x] 路由和侧边栏注册完成 - [x] TypeScript 无 any - [x] Vite build 通过 - [x] ESLint 通过 - [x] Prettier 通过 - [ ] CI 全绿
xiaoxia added 1 commit 2026-09-08 18:25:53 +08:00
feat: #1798 AI数字人前端页面 — 5列水平面板布局
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 1s
Details
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m32s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m55s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m4s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m8s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m23s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m25s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m33s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 2m51s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 11s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 26s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m33s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 7m6s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 4s
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
062e61dff9 
新增 AI 数字人口播短视频完整前端页面，5列水平面板 1:1 实现：
- 面板1 出镜视频：拖拽上传 MP4 + 视频预览播放器
- 面板2 声音克隆：音频上传 + 克隆状态 + 音色列表
- 面板3 文案&对口型：文案编辑/选择 + 对口型预览 + B-roll 插入
- 面板4 标题配置：复用 TitleStylePanel + 字幕设置
- 面板5 封面&生成：封面预览 + 分辨率/模式设置 + 生成按钮
- 弹窗：ScriptSelectModal（文案库选择）、BRollInsertModal（B-roll 配置）
- 路由 /ai-avatar + 侧边栏导航注册
- API 层封装（文案/对口型/渲染合成）
- 全部面板可折叠/展开，面板间无步骤依赖
- TypeScript 类型完整，无 any
- 构建/lint/prettier 全部通过
gitea-actions bot commented 2026-09-08 18:28:17 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

项目 详情
PR号 #1803
预览链接 https://pr-1803.preview.xiaoxiajianji.com
API环境 staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1803 | | 预览链接 | [https://pr-1803.preview.xiaoxiajianji.com](https://pr-1803.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot approved these changes 2026-09-08 18:28:20 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-08 18:28:20 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
xiaoxia merged commit e45a8fe775 into develop 2026-09-08 18:31:03 +08:00
gitea-actions bot commented 2026-09-08 18:31:28 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

PR #1803 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1803 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.
Reviewers
No Reviewers
auto-approve-bot
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1803
Delete Branch "feat/ai-avatar-page-1798"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?