From b61e80b199ecc4c5e16b29a16ebd2359045a848e Mon Sep 17 00:00:00 2001
From: Coze Agent <agent@coze>
Date: Fri, 2 Oct 2026 13:42:23 +0800
Subject: [PATCH] =?UTF-8?q?fix(viral-video):=20=E7=B4=A0=E6=9D=90=E5=BA=93?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=BC=B9=E7=AA=97=E9=80=89=E4=B8=AD=E6=80=81?=
 =?UTF-8?q?=E8=A7=86=E8=A7=89=E5=A2=9E=E5=BC=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：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，与选中态视觉一致
---
 .../src/pages/viral-video/ViralVideoPage.css  | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.css b/apps/web/src/pages/viral-video/ViralVideoPage.css
index 32a584922..63379cfd8 100644
--- a/apps/web/src/pages/viral-video/ViralVideoPage.css
+++ b/apps/web/src/pages/viral-video/ViralVideoPage.css
@@ -1509,7 +1509,7 @@
 }
 .vv-thumb-card {
   position: relative;
-  border: 1px solid #e5e7eb;
+  border: 2px solid #e5e7eb;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
@@ -1517,11 +1517,19 @@
   transition: all 0.15s;
 }
 .vv-thumb-card:hover {
-  border-color: #7c3aed;
+  border-color: #c4b5fd;
 }
-.vv-thumb-card.picked {
+.vv-thumb-card.selected {
   border-color: #7c3aed;
-  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
+}
+.vv-thumb-card.selected::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(124, 58, 237, 0.1);
+  pointer-events: none;
+  z-index: 1;
 }
 .vv-thumb-ph {
   aspect-ratio: 1;
@@ -1541,7 +1549,7 @@
 }
 .vv-asset-image {
   position: relative;
-  border: 1px solid #e5e7eb;
+  border: 2px solid #e5e7eb;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
@@ -1553,18 +1561,21 @@
   position: absolute;
   top: 6px;
   right: 6px;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   background: #7c3aed;
   color: #fff;
   display: none;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 700;
+  z-index: 2;
+  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.4);
+  border: 2px solid #fff;
 }
-.vv-thumb-card.picked .vv-thumb-check {
+.vv-thumb-card.selected .vv-thumb-check {
   display: flex;
 }
 .vv-thumb-name {