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

fix(viral-video): 素材库选择弹窗选中态视觉增强 #2144

Merged
xiaoxia merged 1 commits from fix/2041-asset-picker-selected-state into develop 2026-10-02 13:43:00 +08:00
Conversation 4 Commits 1 Files Changed 1
+20 -9
xiaoxia commented 2026-10-02 13:42:51 +08:00
Owner
Copy Link
Copy Source

Bug

素材库图片选择弹窗中，选中状态完全不明显——根因是 JSX 里用的 class="selected"，但 CSS 里写的是 .vv-thumb-card.picked，类名不匹配，选中态样式从未生效。

修复

  1. 统一 CSS 类名为 .selected（与 JSX 对齐，删除遗留的 .picked）
  2. 选中图片边框加为 2px solid #7c3aed，外加紫色外发光 box-shadow
  3. 右上角紫色圆形对勾✓：紫底白勾，加白色描边+紫色阴影更醒目，尺寸24px，z-index:2确保在遮罩之上
  4. 选中图片叠加浅紫色半透明遮罩 rgba(124,58,237,0.1)（::after伪元素，pointer-events:none 不阻挡点击，z-index:1）
  5. 多选时每张选中图都独立带边框+勾+遮罩
  6. 「确认选择(N)」按钮的 N 原本就通过 picked.size 实时反映选中数量，无需改动
  7. hover 边框改为淡紫色 #c4b5fd，选中态更突出
  8. vv-asset-image 边框从 1px 改为 2px，与 thumb-card 视觉一致

适用于所有复用 AssetPickerModal 的场景：STEP1 从素材库选择图片、STEP1 从素材库选择参考音频等。

验收

  • tsc --noEmit ✅
  • prettier ✅
  • vite build ✅ 6.21s
## Bug 素材库图片选择弹窗中，选中状态完全不明显——根因是 JSX 里用的 class="selected"，但 CSS 里写的是 `.vv-thumb-card.picked`，类名不匹配，选中态样式从未生效。 ## 修复 1. 统一 CSS 类名为 `.selected`（与 JSX 对齐，删除遗留的 `.picked`） 2. 选中图片边框加为 2px solid #7c3aed，外加紫色外发光 box-shadow 3. 右上角紫色圆形对勾✓：紫底白勾，加白色描边+紫色阴影更醒目，尺寸24px，z-index:2确保在遮罩之上 4. 选中图片叠加浅紫色半透明遮罩 `rgba(124,58,237,0.1)`（::after伪元素，pointer-events:none 不阻挡点击，z-index:1） 5. 多选时每张选中图都独立带边框+勾+遮罩 6. 「确认选择(N)」按钮的 N 原本就通过 picked.size 实时反映选中数量，无需改动 7. hover 边框改为淡紫色 #c4b5fd，选中态更突出 8. vv-asset-image 边框从 1px 改为 2px，与 thumb-card 视觉一致 适用于所有复用 AssetPickerModal 的场景：STEP1 从素材库选择图片、STEP1 从素材库选择参考音频等。 ## 验收 - tsc --noEmit ✅ - prettier ✅ - vite build ✅ 6.21s
xiaoxia added 1 commit 2026-10-02 13:42:51 +08:00
fix(viral-video): 素材库选择弹窗选中态视觉增强
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 0s
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (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 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 / 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
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 51s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 59s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m39s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m46s
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
PR Automation / Auto Approve on CI Green (pull_request) Failing after 1m56s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m59s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 4m6s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 4m34s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 5m16s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Has been skipped
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m45s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 10m46s
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
b61e80b199 
根因：JSX 里用 class="selected" 但 CSS 里写的是 .picked，类名不匹配导致选中态完全没生效。

修复：
1. 统一类名为 .selected（CSS 与 JSX 对齐）
2. 选中图片加 2px 紫色边框 #7c3aed + 紫色外发光 box-shadow
3. 右上角紫色圆形对勾✓：紫底白勾，加白色描边+阴影更清晰，尺寸24px，z-index:2 确保在遮罩之上
4. 选中图片叠加浅紫色半透明遮罩 rgba(124,58,237,0.1)（::after 伪元素，pointer-events:none 不影响点击，z-index:1）
5. 多选时每张选中图都独立带边框+勾+遮罩
6. 「确认选择(N)」按钮 N 原本就通过 picked.size 实时反映选中数量，保持不变
7. 同步把 vv-asset-image 边框从1px改为2px，与选中态视觉一致
xiaoxia reviewed 2026-10-02 13:42:55 +08:00
xiaoxia left a comment
Author
Owner
Copy Link
Copy Source

LGTM

LGTM
xiaoxia merged commit d3ee11d27a into develop 2026-10-02 13:43:00 +08:00
xiaoxia deleted branch fix/2041-asset-picker-selected-state 2026-10-02 13:43:07 +08:00
gitea-actions bot commented 2026-10-02 13:44:06 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2144 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
auto-approve-bot reviewed 2026-10-02 13:44:47 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-10-02 13:44:50 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2144 | | 预览链接 | [https://pr-2144.preview.xiaoxiajianji.com](https://pr-2144.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
Sign in to join this conversation.
Reviewers
No Reviewers
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#2144
Delete Branch "fix/2041-asset-picker-selected-state"

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?