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

fix(viral-video): 素材库/音色弹窗底部固定操作栏，内容区可滚动 #2158

Merged
auto-approve-bot merged 1 commits from fix/asset-picker-footer-buttons into develop 2026-10-03 15:05:21 +08:00
Conversation 4 Commits 1 Files Changed 2
+51 -9
xiaoxia commented 2026-10-03 14:53:32 +08:00
Owner
Copy Link
Copy Source

改动说明

修复素材库选择弹窗(AssetPickerModal)和音色选择弹窗(PresetVoicePickerModal)的按钮位置问题：

问题

之前 CSS 把遮罩样式(overlay)错误写在 .vv-modal 上，把卡片白底+边框+圆角+max-height+overflow 错误写在 .vv-modal-body 上，导致 JSX 里的三段式结构(head/body/foot)无法按 flex-column 布局，「取消/确认选择(N)」按钮浮在内容区里和图片网格混排。

修改

CSS（ViralVideoPage.css）：

  • .vv-modal-mask：承担遮罩层（fixed inset + rgba 背景 + flex 居中）
  • .vv-modal：成为白色弹窗卡片（白底+边框+圆角+max-height:80vh+display:flex;flex-direction:column+overflow:hidden+阴影）
  • 新增 .vv-modal.vv-modal-lg：音色弹窗 860px 宽
  • 新增 .vv-modal-head：标题区（flex 两端对齐+底部分隔线+padding 14px 20px）
  • 新增 .vv-modal-title：标题样式（15px/600/#1f2937）
  • 修正 .vv-modal-body：flex:1 + overflow-y:auto + padding 16px 20px + min-height:0，内容多可独立滚动
  • 新增 .vv-modal-foot：底部固定操作栏（flex-shrink:0+flex 右对齐+gap 10px+顶部分隔线+白底）
  • 新增 .vv-modal-foot .vv-btn-primary/.vv-btn-ghost：按钮 auto-width+统一 padding 8px 18px
  • .vv-modal-close：改为 flex 居中（移除 absolute 定位，配合 head 内的 space-between 自然靠右）

TSX（AssetPickerModal.tsx）：

  • 移除「确认选择」按钮上的 inline style 覆盖（width:auto/marginTop:0/padding:8px 18px），改由 CSS 统一控制
  • 「取消」按钮去掉 vv-btn-sm，和主按钮保持同尺寸

验收

  • 弹窗三段式布局：头部标题栏固定、内容区可滚动、底部按钮栏固定不滚
  • 按钮右对齐、间距一致、不超出弹窗边界
  • 分镜文案流式文档排版已在 PR #2156 合入 develop，本次不重复提交
  • tsc/vite build 全绿
## 改动说明 修复素材库选择弹窗(AssetPickerModal)和音色选择弹窗(PresetVoicePickerModal)的按钮位置问题： ### 问题 之前 CSS 把遮罩样式(overlay)错误写在 `.vv-modal` 上，把卡片白底+边框+圆角+max-height+overflow 错误写在 `.vv-modal-body` 上，导致 JSX 里的三段式结构(head/body/foot)无法按 flex-column 布局，「取消/确认选择(N)」按钮浮在内容区里和图片网格混排。 ### 修改 **CSS（ViralVideoPage.css）**： - `.vv-modal-mask`：承担遮罩层（fixed inset + rgba 背景 + flex 居中） - `.vv-modal`：成为白色弹窗卡片（白底+边框+圆角+max-height:80vh+display:flex;flex-direction:column+overflow:hidden+阴影） - 新增 `.vv-modal.vv-modal-lg`：音色弹窗 860px 宽 - 新增 `.vv-modal-head`：标题区（flex 两端对齐+底部分隔线+padding 14px 20px） - 新增 `.vv-modal-title`：标题样式（15px/600/#1f2937） - 修正 `.vv-modal-body`：flex:1 + overflow-y:auto + padding 16px 20px + min-height:0，内容多可独立滚动 - 新增 `.vv-modal-foot`：底部固定操作栏（flex-shrink:0+flex 右对齐+gap 10px+顶部分隔线+白底） - 新增 `.vv-modal-foot .vv-btn-primary/.vv-btn-ghost`：按钮 auto-width+统一 padding 8px 18px - `.vv-modal-close`：改为 flex 居中（移除 absolute 定位，配合 head 内的 space-between 自然靠右） **TSX（AssetPickerModal.tsx）**： - 移除「确认选择」按钮上的 inline style 覆盖（width:auto/marginTop:0/padding:8px 18px），改由 CSS 统一控制 - 「取消」按钮去掉 `vv-btn-sm`，和主按钮保持同尺寸 ### 验收 - 弹窗三段式布局：头部标题栏固定、内容区可滚动、底部按钮栏固定不滚 - 按钮右对齐、间距一致、不超出弹窗边界 - 分镜文案流式文档排版已在 PR #2156 合入 develop，本次不重复提交 - tsc/vite build 全绿
xiaoxia added 1 commit 2026-10-03 14:53:32 +08:00
fix(viral-video): modal footer buttons pinned to bottom; body scrolls
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 2s
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 / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m24s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m45s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m45s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m56s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m13s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 4m17s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 4m54s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m31s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 11m0s
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 / CI Gate (pull_request) Successful in 1s
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
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 10m29s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 44s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 18s
Details
418809669c 
- Fix modal CSS: move overlay styles to .vv-modal-mask; .vv-modal becomes the white dialog card with flex column layout (head/body/foot)
- Add .vv-modal-head (title + close), .vv-modal-title, .vv-modal-foot (fixed bottom action bar with right-aligned buttons, top separator)
- .vv-modal-body is now flex:1 with overflow-y:auto, scrolls independently
- .vv-modal-foot buttons auto-width, consistent padding; remove inline style overrides
- PresetVoicePickerModal benefits from the same fix (same class structure)
- tsc & vite build pass
auto-approve-bot approved these changes 2026-10-03 14:55:14 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-10-03 14:55:17 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2158 | | 预览链接 | [https://pr-2158.preview.xiaoxiajianji.com](https://pr-2158.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot merged commit 1baf29c76a into develop 2026-10-03 15:05:21 +08:00
auto-approve-bot deleted branch fix/asset-picker-footer-buttons 2026-10-03 15:05:42 +08:00
gitea-actions bot commented 2026-10-03 15:06:07 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2158 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#2158
Delete Branch "fix/asset-picker-footer-buttons"

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?