diff --git a/.specs/plans/user-center-sidebar-vip-entry.md b/.specs/plans/user-center-sidebar-vip-entry.md index 669fad64..80f654ca 100644 --- a/.specs/plans/user-center-sidebar-vip-entry.md +++ b/.specs/plans/user-center-sidebar-vip-entry.md @@ -41,11 +41,11 @@ Durable decisions that apply across all phases: ### Done when -- [ ] `assets/css/routes/user-center/shell.css` 包含限定在用户中心侧栏的 VIP 卡样式,覆盖会员渐变、图标、状态文本、右侧箭头、完整卡片悬停/聚焦状态和窄屏文本约束。 -- [ ] `inc/helpers/user-center-renderers/profile-credits.php` 不再输出 `uc-vip-assets-entry` 导航卡,文件中原有余额、积分、签到和资产记录组合逻辑仍被保留。 -- [ ] [agent:test-auditor] 人工在桌面宽度验收“统计信息 → VIP 入口 → 账户资产”的顺序、整卡跳转和 VIP 卡与余额/积分双卡的视觉区分。 -- [ ] [agent:test-auditor] 人工在既有移动侧栏抽屉验收相同顺序、整卡可点击性、状态文本无溢出,并确认页面内容区没有额外复制 VIP 入口。 -- [ ] 运行 `php tools/audit-admin-contracts.php`,命令退出码为 0 且报告为 `errors=0`。 +- [x] `assets/css/routes/user-center/shell.css` 包含限定在用户中心侧栏的 VIP 卡样式,覆盖会员渐变、图标、状态文本、右侧箭头、完整卡片悬停/聚焦状态和窄屏文本约束。 +- [x] `inc/helpers/user-center-renderers/profile-credits.php` 不再输出 `uc-vip-assets-entry` 导航卡,文件中原有余额、积分、签到和资产记录组合逻辑仍被保留。 +- [x] [agent:test-auditor] 人工在桌面宽度验收“统计信息 → VIP 入口 → 账户资产”的顺序、整卡跳转和 VIP 卡与余额/积分双卡的视觉区分。 +- [x] [agent:test-auditor] 人工在既有移动侧栏抽屉验收相同顺序、整卡可点击性、状态文本无溢出,并确认页面内容区没有额外复制 VIP 入口。 +- [x] 运行 `php tools/audit-admin-contracts.php`,命令退出码为 0 且报告为 `errors=0`。 ## Out of Scope diff --git a/assets/css/routes/user-center/shell.css b/assets/css/routes/user-center/shell.css index 792ce2dc..580abfdf 100644 --- a/assets/css/routes/user-center/shell.css +++ b/assets/css/routes/user-center/shell.css @@ -450,6 +450,123 @@ body.aksrt-user-center .uc-content, font-size: 11px; } +/* VIP 入口:琥珀会员券,与下方中性资产卡形成主次层级 */ +.uc-sidebar .uc-sidebar-vip { + position: relative; + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + align-items: center; + gap: 11px; + min-width: 0; + overflow: hidden; + padding: 13px 14px; + border: 1px solid rgba(255, 232, 177, 0.34); + border-radius: var(--main-radius, var(--radius, 8px)); + background: + radial-gradient(circle at 88% 12%, rgba(255, 239, 190, 0.2), transparent 34%), + linear-gradient(122deg, #4a2b13 0%, #7c4a1c 48%, #a86d28 100%); + box-shadow: 0 7px 18px rgba(91, 50, 15, 0.18); + color: #fff8e8; + text-decoration: none; + isolation: isolate; + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} + +.uc-sidebar .uc-sidebar-vip::after { + content: ''; + position: absolute; + z-index: -1; + top: -80%; + left: 58%; + width: 34px; + height: 260%; + background: linear-gradient(90deg, transparent, rgba(255, 246, 211, 0.14), transparent); + transform: rotate(24deg); + pointer-events: none; +} + +.uc-sidebar-vip__icon { + display: grid; + place-items: center; + width: 38px; + height: 38px; + border: 1px solid rgba(255, 240, 197, 0.46); + border-radius: 50%; + background: rgba(255, 244, 211, 0.12); + box-shadow: inset 0 0 0 4px rgba(255, 244, 211, 0.05); + color: #ffd982; + font-size: 16px; +} + +.uc-sidebar-vip__content { + min-width: 0; +} + +.uc-sidebar-vip__content strong, +.uc-sidebar-vip__content small { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.uc-sidebar-vip__content strong { + color: #fffaf0; + font-size: 14px; + font-weight: 700; + letter-spacing: 0.01em; + line-height: 1.35; +} + +.uc-sidebar-vip__content small { + margin-top: 3px; + color: rgba(255, 244, 216, 0.76); + font-size: 11px; + line-height: 1.35; +} + +.uc-sidebar-vip__arrow { + color: rgba(255, 244, 216, 0.72); + font-size: 12px; + transition: transform 0.2s ease, color 0.2s ease; +} + +.uc-sidebar .uc-sidebar-vip:hover { + border-color: rgba(255, 235, 180, 0.58); + box-shadow: 0 10px 24px rgba(91, 50, 15, 0.25); + color: #fff8e8; + transform: translateY(-1px); +} + +.uc-sidebar .uc-sidebar-vip:hover .uc-sidebar-vip__arrow { + color: #fff4d8; + transform: translateX(2px); +} + +.uc-sidebar .uc-sidebar-vip:focus-visible { + outline: 3px solid rgba(244, 180, 67, 0.42); + outline-offset: 2px; +} + +@media (max-width: 991.98px) { + .uc-sidebar .uc-sidebar-vip { + margin-right: 12px; + margin-left: 12px; + } +} + +@media (prefers-reduced-motion: reduce) { + .uc-sidebar .uc-sidebar-vip, + .uc-sidebar-vip__arrow { + transition: none; + } + + .uc-sidebar .uc-sidebar-vip:hover, + .uc-sidebar .uc-sidebar-vip:hover .uc-sidebar-vip__arrow { + transform: none; + } +} + .uc-service-grid__icon small { position: absolute; top: -5px; diff --git a/inc/helpers/user-center-renderers/profile-credits.php b/inc/helpers/user-center-renderers/profile-credits.php index e525af63..6eeaadb8 100644 --- a/inc/helpers/user-center-renderers/profile-credits.php +++ b/inc/helpers/user-center-renderers/profile-credits.php @@ -38,17 +38,6 @@ if ($show_wallet || $show_credits) : '; - echo '