xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 16 Pull Requests 9 Actions 34.2k Packages Projects Releases 7 Wiki Activity

feat(viral-video): #2041 STEP1 UI 重做——按钮模式+参考视频+2x2音频+识别汇览 #2115

Merged
auto-approve-bot merged 1 commits from feat/2041-step1-redo-button-ui into develop 2026-10-01 10:47:46 +08:00
Conversation 4 Commits 1 Files Changed 4
+1729 -763
xiaoxia commented 2026-10-01 10:43:05 +08:00
Owner
Copy Link
Copy Source

改动概要

对齐用户参考截图重做 STEP1 区域 UI，配色保持浅色紫调（背景 #f5f6fa、白底卡片、主紫 #7c3aed、选中浅紫底 #f3f0ff）。

1. 图片上传改为按钮模式

  • 两个并排按钮：本地上传 / 从素材库选择图片（新增通用 AssetPickerModal，支持 image/video/voice、单选/多选）
  • 右上角「已选 X/9」计数 + 「清空图片」
  • 已上传图片改为列表卡片展示：缩略图+文件名+大小+上移/下移/删除三个图标按钮（替换原网格+拖拽）
  • 删除原紫色虚线拖拽上传区

2. 新增参考视频子区块（图片与音频之间）

  • 标题「参考视频」+「选填」标签 + 右侧限制说明「最大 200MB·最长 120 秒」
  • 两个按钮：本地上传视频 / 抖音链接识别（UI 预留输入框，后端解析接口上线后自动启用，当前提示敬请期待）
  • 已上传/解析的视频显示预览+删除按钮
  • 风格强度三档（轻度借鉴/中度参考/像素级复刻）放视频下方（选了视频才显示）

3. 参考音频改为 2x2 按钮网格

  • 标题「参考音频」+「选填」标签 + 右侧限制「最大 10MB·最长 30 秒」
  • 4 个按钮：选择内置音色 / 本地上传 / 从素材库选择 / 直接录音（带文件/上传/文件夹/麦克风图标）
  • 选中态紫色描边 1.5px + #f3f0ff 浅紫底
  • 「选择内置音色」展开系统预置音色列表（/api/tts/presets，失败兜底 4 个常用音色）
  • 「从素材库选择」打开 AssetPickerModal 选我的音频
  • 「直接录音」复用 CloneModal
  • 底部「支持格式与录音建议」可折叠
  • 选中后显示紫色已选：xxx提示条

4. 新增识别描述汇览

  • 图片 VLM 分析后在 STEP1 底部出现「识别描述汇览」区域，展示商品名/规格/视觉特征
  • 分析中显示 loading 状态
  • 数据从 job.image_analysis.products[] 读取（前端类型已新增 ImageAnalysisResult/ImageProductAnalysis）

5. 配色/按钮

  • 主操作按钮 .vv-action-btn：白底+#e5e7eb 边，hover 紫边+紫字+#f9f7ff 浅紫底
  • 音频格 .vv-audio-cell：圆角 10px，1.5px 灰边，选中态 1.5px 紫边+#f3f0ff 底
  • 保持原紫色渐变主按钮「⚡ 开始分析」在 STEP1 底部，校验至少 1 张图才可用

6. 其他

  • types.ts：新增 ImageProductAnalysis/ImageAnalysisResult 类型；ViralVideoJob 新增 image_analysis/result_video_url/error_msg/voice_source 等可选字段做前后兼容
  • 抽离通用组件 components/AssetPickerModal.tsx（250 行，替代仅面向视频的 ai-avatar/ModalAssetPicker）
  • 删除原图片网格拖拽上传区、原参考视频虚线占位、原系统音色/我的音色分段Tab
  • 中列/右列 Section 恢复可折叠
  • Net: +966 行

测试

  • tsc --noEmit 全绿
  • eslint 无警告
  • prettier --write 已跑
  • vite build 成功（ViralVideoPage 32.6KB gzip 10.6KB）
## 改动概要 对齐用户参考截图重做 STEP1 区域 UI，配色保持浅色紫调（背景 #f5f6fa、白底卡片、主紫 #7c3aed、选中浅紫底 #f3f0ff）。 ### 1. 图片上传改为按钮模式 - 两个并排按钮：**本地上传** / **从素材库选择图片**（新增通用 AssetPickerModal，支持 image/video/voice、单选/多选） - 右上角「已选 X/9」计数 + 「清空图片」 - 已上传图片改为**列表卡片**展示：缩略图+文件名+大小+上移/下移/删除三个图标按钮（替换原网格+拖拽） - 删除原紫色虚线拖拽上传区 ### 2. 新增参考视频子区块（图片与音频之间） - 标题「参考视频」+「选填」标签 + 右侧限制说明「最大 200MB·最长 120 秒」 - 两个按钮：**本地上传视频** / **抖音链接识别**（UI 预留输入框，后端解析接口上线后自动启用，当前提示敬请期待） - 已上传/解析的视频显示预览+删除按钮 - 风格强度三档（轻度借鉴/中度参考/像素级复刻）放视频下方（选了视频才显示） ### 3. 参考音频改为 2x2 按钮网格 - 标题「参考音频」+「选填」标签 + 右侧限制「最大 10MB·最长 30 秒」 - 4 个按钮：选择内置音色 / 本地上传 / 从素材库选择 / 直接录音（带文件/上传/文件夹/麦克风图标） - 选中态紫色描边 1.5px + #f3f0ff 浅紫底 - 「选择内置音色」展开系统预置音色列表（/api/tts/presets，失败兜底 4 个常用音色） - 「从素材库选择」打开 AssetPickerModal 选我的音频 - 「直接录音」复用 CloneModal - 底部「支持格式与录音建议」可折叠 - 选中后显示紫色已选：xxx提示条 ### 4. 新增识别描述汇览 - 图片 VLM 分析后在 STEP1 底部出现「识别描述汇览」区域，展示商品名/规格/视觉特征 - 分析中显示 loading 状态 - 数据从 job.image_analysis.products[] 读取（前端类型已新增 ImageAnalysisResult/ImageProductAnalysis） ### 5. 配色/按钮 - 主操作按钮 .vv-action-btn：白底+#e5e7eb 边，hover 紫边+紫字+#f9f7ff 浅紫底 - 音频格 .vv-audio-cell：圆角 10px，1.5px 灰边，选中态 1.5px 紫边+#f3f0ff 底 - 保持原紫色渐变主按钮「⚡ 开始分析」在 STEP1 底部，校验至少 1 张图才可用 ### 6. 其他 - types.ts：新增 ImageProductAnalysis/ImageAnalysisResult 类型；ViralVideoJob 新增 image_analysis/result_video_url/error_msg/voice_source 等可选字段做前后兼容 - 抽离通用组件 components/AssetPickerModal.tsx（250 行，替代仅面向视频的 ai-avatar/ModalAssetPicker） - 删除原图片网格拖拽上传区、原参考视频虚线占位、原系统音色/我的音色分段Tab - 中列/右列 Section 恢复可折叠 - Net: +966 行 ## 测试 - [x] tsc --noEmit 全绿 - [x] eslint 无警告 - [x] prettier --write 已跑 - [x] vite build 成功（ViralVideoPage 32.6KB gzip 10.6KB）
xiaoxia added 1 commit 2026-10-01 10:43:06 +08:00
feat(viral-video): #2041 STEP1 UI 重做——按钮模式+参考视频双入口+2x2 音频选择+识别描述汇览
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 2s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 1s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration 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 Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web 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 / Retag skipped Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (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
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m33s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m48s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m54s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m13s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m19s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m27s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m43s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 3m59s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 1s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 2m13s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m39s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 4m7s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 4m10s
Details
4cc5ba00a6 
- 图片上传由拖拽虚线框改为「本地上传/从素材库选择」双按钮模式
- 新增通用 AssetPickerModal（支持 image/video/voice，单选/多选）
- 已选图片改为列表式展示（缩略图+文件名+大小+上移/下移/删除）
- 右上角「已选 X/9」计数 + 「清空图片」按钮
- 新增「参考视频」子区块（放图片与音频之间）：本地上传视频 / 抖音链接识别（UI 预留，后端解析接口上线后自动启用），右侧标注最大 200MB·最长 120 秒
- 风格强度三档（轻度借鉴/中度参考/像素级复刻）放参考视频下方（选了视频才显示）
- 参考音频改为 2x2 按钮网格：选择内置音色/本地上传/从素材库选择/直接录音，选中态紫色描边+浅紫底 #f3f0ff
- 「选择内置音色」展开系统预置音色列表；「从素材库选择」打开 AssetPickerModal；「直接录音」复用 CloneModal
- 新增「识别描述汇览」区域：图片 VLM 分析完成后展示商品名/规格/视觉特征；分析中显示 loading
- types.ts 新增 ImageProductAnalysis/ImageAnalysisResult 类型；ViralVideoJob 新增 image_analysis、result_video_url、error_msg、voice_source 等可选字段做前后向兼容
- STEP1 底部保留「⚡ 开始分析」按钮，校验至少 1 张图片上传完成才可点击
- 浅色紫调：背景 #f5f6fa、白底卡片 #fff+#e5e7eb、主紫 #7c3aed、选中浅紫底 #f3f0ff
- 修复中列/右列 Section 折叠箭头被遗漏的问题（STEP1 区使用不折叠大标题对齐截图）
gitea-actions bot commented 2026-10-01 10:44:32 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-10-01 10:45:33 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit e935d1d72a into develop 2026-10-01 10:47:46 +08:00
auto-approve-bot deleted branch feat/2041-step1-redo-button-ui 2026-10-01 10:47:48 +08:00
gitea-actions bot commented 2026-10-01 10:51:52 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2115
Delete Branch "feat/2041-step1-redo-button-ui"

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?