From 0c9aaa11cd2f0253f7784700f7ae4079396de57a Mon Sep 17 00:00:00 2001 From: seaislee1209 Date: Mon, 11 May 2026 20:24:24 +0800 Subject: [PATCH] =?UTF-8?q?fix(theme):=20V2-fix=20=E2=80=94=20=E6=B8=85?= =?UTF-8?q?=E9=99=A4=E6=AE=8B=E7=95=99=2030+=20=E5=A4=84=E6=AD=BB=E9=BB=91?= =?UTF-8?q?/=E6=AD=BB=E7=99=BD=E7=A1=AC=E7=BC=96=E7=A0=81=20(=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E5=8F=8D=E9=A6=88=E8=A1=A8=E6=A0=BC=E7=BA=BF=E6=AD=BB?= =?UTF-8?q?=E9=BB=91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户反馈: UsersPage 表格线浅色下死黑死黑。 全扫定位:V1 sub-agent 当年标注 "unmapped/near-match" 保留的硬编码, 在 V2 浅色重做下集中暴露为"死黑/死白"问题。 新增 5 个主题感知 token: --color-bg-glass-hover DARK rgba(255,255,255,0.12) / LIGHT rgba(0,0,0,0.06) --color-border-glass-hover DARK rgba(255,255,255,0.15) / LIGHT rgba(0,0,0,0.12) --color-bg-thumbnail DARK rgba(0,0,0,0.30) / LIGHT rgba(0,0,0,0.05) --color-bg-thumbnail-hover DARK rgba(0,0,0,0.15) / LIGHT rgba(0,0,0,0.04) --color-shadow-thumb DARK rgba(0,0,0,0.30) / LIGHT rgba(0,0,0,0.10) 修复(10 个文件, 30+ 处): 表格死黑线 (用户主诉): UsersPage / TeamsPage .table td border-bottom: rgba(42,42,56,0.5) 死紫黑 → var(--color-border-row) (浅色 rgba(0,0,0,0.06) 浅灰) .table tr:hover td bg: rgba(255,255,255,0.02) 浅色下消失 → var(--color-bg-row-hover) (浅色 rgba(0,0,0,0.03)) 玻璃面 hover 白透 alpha (浅色下死白看不见): VideoDetailModal closeBtn/floatingBtn/iconBtn hover: rgba(255,255,255,0.12-0.15) → var(--color-bg-glass-hover) TeamsPage detailClose hover: 同上 GenerationCard moreBtn:hover border: rgba(255,255,255,0.15) → var(--color-border-glass-hover) 视频缩略图 bg (浅色下不该死黑): AssetsPage thumbnail bg / hover overlay: rgba(0,0,0,0.3/0.15) → var(--color-bg-thumbnail / -hover) UniversalUpload thumbInner box-shadow: rgba(0,0,0,0.3) → var(--color-shadow-thumb) Modal/Upload overlay & hover: UsersPage drawerOverlay: rgba(0,0,0,0.5) → var(--color-overlay-soft) TeamsPage detailOverlay: rgba(0,0,0,0.65) → var(--color-modal-overlay) UniversalUpload uploadOverlay: rgba(0,0,0,0.5) → var(--color-overlay-soft) Upload trigger 虚线边 hover: KeyframeUpload / UniversalUpload trigger hover: #5a5a6a / #1e1e2a → var(--color-border-modal-hover / -bg-modal-hover) (已有 var) trigger bg: rgba(255,255,255,0.03) → var(--color-bg-upload) TeamsPage memberTable: memberTableWrapper bg: rgba(255,255,255,0.03) → var(--color-bg-upload) memberTable th bg: rgba(255,255,255,0.02) → var(--color-bg-row-hover) AssetLibraryModal 状态 / 主色 alpha: addAssetCard hover bg rgba(108,99,255,0.04) → var(--color-primary-bg) dropZone hover/active: 同上 + var(--color-primary-bg-hover) statusActive 0.12: rgba(0,184,148,0.12) → var(--color-success-bg) statusProcessing 0.12: rgba(243,156,18,0.12) → var(--color-warning-bg) statusFailed 0.12: rgba(231,76,60,0.12) → var(--color-danger-bg) dropZoneWarning #ff4d4f + alpha → var(--color-danger-hover/-bg/-border) UniversalUpload uploadError: rgba(239,68,68,0.25) → var(--color-danger-bg) ProfilePage warningBanner: rgba(243,156,18,0.12/0.3) → var(--color-warning-bg / -border) 验证: tsc 通过, vitest 71 fail / 162 pass 与基线一致, 24 张 V2 截图重出 关键页对比 (docs/screenshots/v2/): - UsersPage / TeamsPage 浅色表格线变浅灰 GitBook 风 - VideoDetailModal close 浅色下能看到 hover - 视频缩略图浅色不死黑 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) --- .../components/AssetLibraryModal.module.css | 18 +++++++++--------- web/src/components/GenerationCard.module.css | 2 +- web/src/components/KeyframeUpload.module.css | 4 ++-- web/src/components/UniversalUpload.module.css | 18 +++++++++--------- web/src/components/VideoDetailModal.module.css | 12 ++++++------ web/src/index.css | 14 ++++++++++++++ web/src/pages/AssetsPage.module.css | 4 ++-- web/src/pages/ProfilePage.module.css | 4 ++-- web/src/pages/TeamsPage.module.css | 14 +++++++------- web/src/pages/UsersPage.module.css | 6 +++--- 10 files changed, 55 insertions(+), 41 deletions(-) diff --git a/web/src/components/AssetLibraryModal.module.css b/web/src/components/AssetLibraryModal.module.css index 871e032..5fa4817 100644 --- a/web/src/components/AssetLibraryModal.module.css +++ b/web/src/components/AssetLibraryModal.module.css @@ -256,7 +256,7 @@ .addAssetCard:hover { border-color: var(--color-primary); color: var(--color-primary); - background: rgba(108, 99, 255, 0.04); /* unmapped: primary alpha 0.04 */ + background: var(--color-primary-bg); } .assetThumb { @@ -289,17 +289,17 @@ .statusActive { color: var(--color-success); - background: rgba(0, 184, 148, 0.12); /* near-match: ~--color-success-bg-hover (0.10) */ + background: var(--color-success-bg); } .statusProcessing { color: var(--color-warning); - background: rgba(243, 156, 18, 0.12); /* unmapped: warning alpha 0.12 */ + background: var(--color-warning-bg); } .statusFailed { color: var(--color-danger); - background: rgba(231, 76, 60, 0.12); /* near-match: ~--color-danger-bg-hover (0.10) */ + background: var(--color-danger-bg); } /* Upload view */ @@ -344,12 +344,12 @@ .dropZone:hover { border-color: var(--color-primary); - background: rgba(108, 99, 255, 0.04); /* unmapped: primary alpha 0.04 */ + background: var(--color-primary-bg); } .dropZoneActive { border-color: var(--color-primary); - background: rgba(108, 99, 255, 0.08); /* unmapped: primary alpha 0.08 */ + background: var(--color-primary-bg-hover); } .dropZoneText { @@ -366,11 +366,11 @@ .dropZoneWarning { font-size: 14px; font-weight: 600; - color: #ff4d4f; /* unmapped: distinct red shade, no var */ + color: var(--color-danger-hover); margin-top: 12px; padding: 8px 12px; - background: rgba(255, 77, 79, 0.08); /* unmapped: tied to #ff4d4f */ - border: 1px solid rgba(255, 77, 79, 0.25); /* unmapped: tied to #ff4d4f */ + background: var(--color-danger-hover-bg); + border: 1px solid var(--color-danger-hover-border); border-radius: 6px; } diff --git a/web/src/components/GenerationCard.module.css b/web/src/components/GenerationCard.module.css index 3a1704a..b177695 100644 --- a/web/src/components/GenerationCard.module.css +++ b/web/src/components/GenerationCard.module.css @@ -418,7 +418,7 @@ .moreBtn:hover { color: var(--color-text-secondary); background: var(--color-bg-hover); - border-color: rgba(255, 255, 255, 0.15); + border-color: var(--color-border-glass-hover); } .moreDropdown { position: absolute; diff --git a/web/src/components/KeyframeUpload.module.css b/web/src/components/KeyframeUpload.module.css index 302c7d6..b2e66d9 100644 --- a/web/src/components/KeyframeUpload.module.css +++ b/web/src/components/KeyframeUpload.module.css @@ -13,7 +13,7 @@ height: var(--thumbnail-size); aspect-ratio: 3 / 4; border: 1.5px dashed var(--color-border-modal); - background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */ + background: var(--color-bg-upload); border-radius: var(--radius-btn); display: flex; flex-direction: column; @@ -26,7 +26,7 @@ } .trigger:hover { - border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */ + border-color: var(--color-border-modal-hover); background: var(--color-bg-card); } diff --git a/web/src/components/UniversalUpload.module.css b/web/src/components/UniversalUpload.module.css index db80b0b..09a1ba0 100644 --- a/web/src/components/UniversalUpload.module.css +++ b/web/src/components/UniversalUpload.module.css @@ -20,7 +20,7 @@ height: var(--thumbnail-size); aspect-ratio: 3 / 4; border: 1.5px dashed var(--color-border-modal); - background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */ + background: var(--color-bg-upload); border-radius: var(--radius-btn); display: flex; flex-direction: column; @@ -33,7 +33,7 @@ } .trigger:hover { - border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */ + border-color: var(--color-border-modal-hover); background: var(--color-bg-card); } @@ -65,8 +65,8 @@ } .thumbRowExpanded .addMore:hover { - background: #1e1e2a; /* unmapped: hover variant of bg-modal-elevated */ - border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */ + background: var(--color-bg-modal-hover); + border-color: var(--color-border-modal-hover); } /* Each thumbnail card — 3:4 portrait ratio, overflow visible for tooltip */ @@ -92,7 +92,7 @@ } .thumbItem:hover .thumbInner { - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* unmapped: shadow alpha 0.3 */ + box-shadow: 0 2px 12px var(--color-shadow-thumb); } .thumbMedia { @@ -180,7 +180,7 @@ height: var(--thumbnail-size); aspect-ratio: 3 / 4; border: 1.5px dashed var(--color-border-modal); - background: rgba(255, 255, 255, 0.03); /* near-match: ~--color-bg-upload (0.04) */ + background: var(--color-bg-upload); border-radius: var(--radius-btn); display: flex; flex-direction: column; @@ -198,7 +198,7 @@ } .addMore:hover { - border-color: #5a5a6a; /* unmapped: hover border lighter than --color-border-modal */ + border-color: var(--color-border-modal-hover); background: var(--color-bg-card); } @@ -289,13 +289,13 @@ display: flex; align-items: center; justify-content: center; - background: rgba(0, 0, 0, 0.5); /* near-match: between --color-modal-overlay (0.6) and lighter overlays */ + background: var(--color-overlay-soft); border-radius: var(--radius-thumbnail); z-index: 2; } .uploadError { - background: rgba(239, 68, 68, 0.25); /* unmapped: danger-text (#ef4444) alpha 0.25 */ + background: var(--color-danger-bg); cursor: pointer; } diff --git a/web/src/components/VideoDetailModal.module.css b/web/src/components/VideoDetailModal.module.css index e9b6053..e8d76e7 100644 --- a/web/src/components/VideoDetailModal.module.css +++ b/web/src/components/VideoDetailModal.module.css @@ -56,8 +56,8 @@ } .closeBtn:hover { - color: var(--color-on-overlay); - background: rgba(255, 255, 255, 0.12); + color: var(--color-text-primary); + background: var(--color-bg-glass-hover); } .floatingActions { @@ -85,8 +85,8 @@ } .floatingBtn:hover { - color: var(--color-on-overlay); - background: rgba(255, 255, 255, 0.15); + color: var(--color-text-primary); + background: var(--color-bg-glass-hover); } /* Video area — centres the player */ @@ -314,8 +314,8 @@ } .iconBtn:hover { - color: rgba(255, 255, 255, 0.85); - background: var(--color-bg-card); + color: var(--color-text-primary); + background: var(--color-bg-glass-hover); } /* More menu dropdown */ diff --git a/web/src/index.css b/web/src/index.css index 6ecf76f..ff5f4f7 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -205,6 +205,13 @@ --color-chip-warm-badge-bg: rgba(255, 150, 100, 0.20); --color-chip-warm-badge-text: #ffb589; + /* V2-fix: 主题感知的 hover/border (替换 V1 漏改的白透 alpha) */ + --color-bg-glass-hover: rgba(255, 255, 255, 0.12); + --color-border-glass-hover: rgba(255, 255, 255, 0.15); + --color-bg-thumbnail: rgba(0, 0, 0, 0.30); /* 视频缩略图 bg (dark) */ + --color-bg-thumbnail-hover: rgba(0, 0, 0, 0.15); /* 缩略图 hover overlay */ + --color-shadow-thumb: rgba(0, 0, 0, 0.30); /* 缩略图阴影 */ + /* Backdrop-filter 标准五档 */ --bf-glass-sm: blur(12px) saturate(140%); --bf-glass-md: blur(16px) saturate(160%); @@ -353,6 +360,13 @@ --color-chip-warm-badge-bg: rgba(255, 100, 50, 0.12); --color-chip-warm-badge-text: #c2410c; + /* V2-fix: 主题感知 hover/border 浅色变黑透明 */ + --color-bg-glass-hover: rgba(0, 0, 0, 0.06); + --color-border-glass-hover: rgba(0, 0, 0, 0.12); + --color-bg-thumbnail: rgba(0, 0, 0, 0.05); /* 浅色下浅淡 */ + --color-bg-thumbnail-hover: rgba(0, 0, 0, 0.04); + --color-shadow-thumb: rgba(0, 0, 0, 0.10); + /* Mention pill */ --color-mention-bg: rgba(80, 72, 204, 0.10); --color-mention-bg-hover: rgba(80, 72, 204, 0.16); diff --git a/web/src/pages/AssetsPage.module.css b/web/src/pages/AssetsPage.module.css index 639e3da..3515400 100644 --- a/web/src/pages/AssetsPage.module.css +++ b/web/src/pages/AssetsPage.module.css @@ -125,7 +125,7 @@ aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; - background: rgba(0, 0, 0, 0.3); /* unmapped: thumbnail bg alpha 0.3 */ + background: var(--color-bg-thumbnail); cursor: pointer; transition: transform 0.15s; } @@ -162,6 +162,6 @@ .thumbOverlay { position: absolute; inset: 0; - background: rgba(0, 0, 0, 0.15); /* unmapped: hover overlay alpha 0.15 */ + background: var(--color-bg-thumbnail-hover); pointer-events: none; } diff --git a/web/src/pages/ProfilePage.module.css b/web/src/pages/ProfilePage.module.css index e969421..335624c 100644 --- a/web/src/pages/ProfilePage.module.css +++ b/web/src/pages/ProfilePage.module.css @@ -85,8 +85,8 @@ /* Warning banners */ .warningBanner { padding: 10px 16px; - background: rgba(243, 156, 18, 0.12); - border: 1px solid rgba(243, 156, 18, 0.3); + background: var(--color-warning-bg); + border: 1px solid var(--color-warning-border); border-radius: var(--radius-card); color: var(--color-warning); font-size: 13px; diff --git a/web/src/pages/TeamsPage.module.css b/web/src/pages/TeamsPage.module.css index d9bf55e..6a8f0f5 100644 --- a/web/src/pages/TeamsPage.module.css +++ b/web/src/pages/TeamsPage.module.css @@ -23,9 +23,9 @@ } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; } -.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; } +.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-row); white-space: nowrap; } .table tr:last-child td { border-bottom: none; } -.table tr:hover td { background: rgba(255, 255, 255, 0.02); } +.table tr:hover td { background: var(--color-bg-row-hover); } .teamNameLink { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 13px; text-decoration: underline; } .statusBadge { padding: 2px 8px; border-radius: 4px; font-size: 12px; } @@ -72,7 +72,7 @@ .detailOverlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.65); + background: var(--color-modal-overlay); display: flex; align-items: center; justify-content: center; @@ -141,8 +141,8 @@ } .detailClose:hover { - color: #fff; - background: rgba(255, 255, 255, 0.12); + color: var(--color-text-primary); + background: var(--color-bg-glass-hover); } /* ── Body ── */ @@ -223,7 +223,7 @@ } .memberTableWrapper { - background: rgba(255, 255, 255, 0.03); + background: var(--color-bg-upload); border: 1px solid var(--color-border-soft); border-radius: 10px; overflow: hidden; @@ -242,7 +242,7 @@ font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--color-border-soft); - background: rgba(255, 255, 255, 0.02); + background: var(--color-bg-row-hover); white-space: nowrap; } diff --git a/web/src/pages/UsersPage.module.css b/web/src/pages/UsersPage.module.css index 2b1ee11..3074e5c 100644 --- a/web/src/pages/UsersPage.module.css +++ b/web/src/pages/UsersPage.module.css @@ -29,9 +29,9 @@ } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; } -.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; } +.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-row); white-space: nowrap; } .table tr:last-child td { border-bottom: none; } -.table tr:hover td { background: rgba(255, 255, 255, 0.02); } +.table tr:hover td { background: var(--color-bg-row-hover); } .usernameLink { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 13px; text-decoration: underline; } .statusBadge { padding: 2px 8px; border-radius: 4px; font-size: 12px; } @@ -80,7 +80,7 @@ .formError { color: var(--color-danger); font-size: 13px; margin-bottom: 12px; } /* Drawer */ -.drawerOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 300; } +.drawerOverlay { position: fixed; inset: 0; background: var(--color-overlay-soft); z-index: 300; } .drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 440px; max-width: 90vw; background: var(--color-bg-modal-elevated); border-left: 1px solid var(--color-border-card);