feat(player/admin/api): 玩家端暗色极简主题重构与盘口单串关修复

## 管理端 / API（Bug 修复） - matches.service：getAdminMatchDetail 返回 markets 时补充 allowSingle、allowParlay 字段 - MatchMarketsPanel：mapMarkets 从接口读取单关/串关开关，不再硬编码为 true - match-form.ts：AdminMarket 类型补充 allowSingle、allowParlay ## 玩家端 — 全局主题（styles.css / index.html / site.webmanifest） - 海军暗色 + 白色强调 token，卡片高光渐变（--gradient-card） - 下拉/弹窗实底不透明（--dropdown-bg: #0A2540） - 统一 sub-toolbar、status-ribbon、filter-tab 等全局样式 - theme-color 同步为 #001A33 ## 玩家端 — 布局与壳层 - MainLayout：详情子页去顶栏/公告，sub-toolbar 全宽铺底 - WalletBalanceCard（新）：个人页钱包卡片（反水 + 未结算） - walletStats.ts（新）：钱包统计逻辑抽取 ## 玩家端 — 赛事 / 投注 - MatchDetailView：顶栏 8px 顶距、卡片全宽（--detail-gutter-x: 0） - 盘口状态标签（暂停/已关闭）、去掉 MarketTypeTile 右侧箭头 - VsBadge（新）：纯文字 VS，删除 vs.png - isMarketLocked：仅关单关但允许串关时仍可点击，支持串关流程 - BetSlipDrawer：仅串关盘口禁用单关提交并提示 slip_parlay_only_hint - betSlip：SlipItem 增加 allowSingle 字段 - MatchBetCard / LeagueAccordionItem：45° 待开赛角标，去掉展开左侧白边 - OutrightEventSection：去掉展开时左侧白色选中条 - FootballView：加大左右边距、筛选栏去 sticky、选中态增强 - BannerCarousel：恢复原始全宽轮播 ## 玩家端 — 钱包 / 个人 / 认证 / 其他页面 - WalletView：移除顶部钱包卡片，保留账单列表 - ProfileView：保留 WalletBalanceCard - 充值/账单/注单/登录注册等页面配色与间距统一 - 公告标签、余额面板、语言切换、区号选择等弹层改为实底 ## 国际化 - zh-CN / en-US / ms-MY：新增 slip_parlay_only_hint（仅串关盘口提示） ## 资产 - 更新 banner.svg、empty-matches.svg 配色 - 删除 vs.png Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-17 11:00:25 +08:00
parent f34fe54489
commit d3ca8498fb
64 changed files with 2466 additions and 2084 deletions
--- a/apps/player/src/views/BetDetailView.vue
+++ b/apps/player/src/views/BetDetailView.vue
@@ -142,9 +142,9 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
    </div>

    <!-- back bar -->
-    <div class="top-bar">
+    <header class="top-bar sub-toolbar">
      <button class="back-btn" @click="router.back()">‹ {{ t('history.back') }}</button>
-    </div>
+    </header>

    <div v-if="loading" class="state">
      <GoldSpinner :size="36" />
@@ -275,7 +275,7 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .back-btn {
  background: none;
  border: none;
-  color: var(--primary-light, #d4af37);
+  color: var(--primary-light);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 0 8px;
@@ -288,14 +288,14 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .state {
  text-align: center;
  padding: 60px 20px;
-  color: #666;
+  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
 }

 /* ── hero ── */
 .hero {
-  border-radius: 14px;
+  border-radius: var(--radius);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
@@ -305,48 +305,60 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  text-align: center;
 }

-.hero.won    { background: linear-gradient(135deg, rgba(61,184,101,0.15), rgba(61,184,101,0.06)); border: 1px solid rgba(61,184,101,0.25); }
-.hero.lost   { background: linear-gradient(135deg, rgba(224,80,80,0.12), rgba(224,80,80,0.05)); border: 1px solid rgba(224,80,80,0.2); }
-.hero.pending { background: linear-gradient(135deg, rgba(232,200,74,0.1), rgba(232,200,74,0.04)); border: 1px solid rgba(232,200,74,0.2); }
-.hero.push   { background: #181818; border: 1px solid #2a2a2a; }
+.hero.won {
+  background: linear-gradient(135deg, rgba(46, 204, 113, 0.18), rgba(46, 204, 113, 0.06));
+  border: 1px solid rgba(46, 204, 113, 0.35);
+}
+.hero.lost {
+  background: linear-gradient(135deg, var(--surface-accent), rgba(255, 255, 255, 0.06));
+  border: 1px solid rgba(255, 255, 255, 0.35);
+}
+.hero.pending {
+  background: var(--gradient-card);
+  border: 1px solid var(--border-gold-soft);
+}
+.hero.push {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+}

 .hero-status {
  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  opacity: 0.7;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: none;
+  opacity: 0.85;
 }
-.hero.won    .hero-status  { color: #3db865; }
-.hero.lost   .hero-status  { color: #e05050; }
-.hero.pending .hero-status { color: #e8c84a; }
-.hero.push   .hero-status  { color: #888; }
+.hero.won    .hero-status  { color: var(--success); }
+.hero.lost   .hero-status  { color: var(--primary); }
+.hero.pending .hero-status { color: var(--primary-light); }
+.hero.push   .hero-status  { color: var(--text-muted); }

 .hero-return {
-  font-size: 36px;
-  font-weight: 900;
+  font-size: 32px;
+  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
 }
-.hero.won    .hero-return  { color: #3db865; text-shadow: 0 0 24px rgba(61,184,101,0.3); }
-.hero.lost   .hero-return  { color: #e05050; }
-.hero.pending .hero-return { color: #e8c84a; }
-.hero.push   .hero-return  { color: #777; }
+.hero.won    .hero-return  { color: var(--success); text-shadow: none; }
+.hero.lost   .hero-return  { color: var(--primary); }
+.hero.pending .hero-return { color: var(--primary-light); }
+.hero.push   .hero-return  { color: var(--text-muted); }

 .hero-return-label {
  font-size: 10.5px;
-  color: #555;
+  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
 }

 /* ── sections ── */
 .section {
-  background: #141414;
-  border: 1px solid #222;
-  border-radius: 12px;
-  padding: 14px 16px;
-  margin-bottom: 10px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-card) 16px;
+  margin-bottom: var(--space-section);
 }

 .section-head {
@@ -358,21 +370,21 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));

 .league-tag {
  font-size: 11px;
-  color: #888;
+  color: var(--text-muted);
  font-weight: 700;
 }

 .placed-time {
  font-size: 11px;
-  color: #555;
+  color: var(--neutral);
  font-weight: 600;
 }

 .match-name {
-  font-size: 17px;
-  font-weight: 900;
-  color: #f0f0f0;
-  line-height: 1.3;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.35;
  margin-bottom: 10px;
 }

@@ -398,18 +410,18 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));

 .row-label {
  font-size: 11px;
-  color: #666;
+  color: var(--text-muted);
  font-weight: 600;
 }

 .row-val {
  font-size: 13px;
  font-weight: 700;
-  color: #c8c8c8;
+  color: var(--text);
 }

 .row-val.pick {
-  color: #d4af37;
+  color: var(--primary);
 }

 .score-chips {
@@ -421,44 +433,44 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  display: flex;
  align-items: center;
  gap: 5px;
-  background: #1e1e1e;
-  border: 1px solid #2a2a2a;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
 }

 .score-period {
  font-size: 10px;
-  color: #666;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: none;
 }

 .score-value {
-  font-size: 16px;
-  font-weight: 900;
-  color: #e8e8e8;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text);
 }

 .score-value.muted {
-  color: #666;
+  color: var(--neutral);
  font-size: 13px;
 }

 .no-score {
  font-size: 11.5px;
-  color: #555;
+  color: var(--neutral);
  font-style: italic;
 }

 /* section title */
 .section-title {
-  font-size: 10.5px;
-  color: #555;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: none;
  margin-bottom: 10px;
 }

@@ -474,14 +486,14 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
-  background: #1a1a1a;
-  border: 1px solid #252525;
+  background: var(--bg-body);
+  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
 }

-.leg-row.won  { border-color: rgba(61,184,101,0.2); }
-.leg-row.lost { border-color: rgba(224,80,80,0.18); }
+.leg-row.won  { border-color: rgba(46, 204, 113, 0.35); }
+.leg-row.lost { border-color: rgba(255, 255, 255, 0.35); }

 .leg-left {
  display: flex;
@@ -496,8 +508,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  width: 20px;
  height: 20px;
  border-radius: 50%;
-  background: #2a2a2a;
-  color: #666;
+  background: var(--bg-card);
+  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  display: flex;
@@ -506,8 +518,8 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  margin-top: 1px;
 }

-.leg-num.won  { background: rgba(61,184,101,0.18); color: #3db865; }
-.leg-num.lost { background: rgba(224,80,80,0.18); color: #e05050; }
+.leg-num.won  { background: rgba(46, 204, 113, 0.18); color: var(--success); }
+.leg-num.lost { background: rgba(255, 255, 255, 0.18); color: var(--primary); }

 .leg-body {
  display: flex;
@@ -519,12 +531,12 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .leg-match {
  font-size: 12.5px;
  font-weight: 800;
-  color: #d0d0d0;
+  color: var(--text);
 }

 .leg-pick-line {
  font-size: 11.5px;
-  color: #888;
+  color: var(--text-muted);
  font-weight: 600;
 }

@@ -537,11 +549,11 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 .leg-scores span {
  font-size: 11px;
  font-weight: 700;
-  color: #c8c8c8;
+  color: var(--text);
 }

 .leg-scores .muted-score {
-  color: #555;
+  color: var(--neutral);
 }

 .leg-right {
@@ -554,23 +566,23 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));

 .leg-odds-val {
  font-size: 15px;
-  font-weight: 900;
-  color: #b8a04a;
+  font-weight: 700;
+  color: var(--text);
 }

 .leg-result-badge {
-  font-size: 9px;
-  font-weight: 800;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: none;
+  padding: 2px 8px;
  border-radius: 10px;
 }

-.leg-result-badge.won   { color: #3db865; background: rgba(61,184,101,0.12); }
-.leg-result-badge.lost  { color: #e05050; background: rgba(224,80,80,0.1); }
-.leg-result-badge.push  { color: #888; background: #222; }
-.leg-result-badge.pending { color: #666; background: #1e1e1e; }
+.leg-result-badge.won   { color: var(--success); background: rgba(46, 204, 113, 0.12); }
+.leg-result-badge.lost  { color: var(--primary); background: rgba(255, 255, 255, 0.1); }
+.leg-result-badge.push  { color: var(--text-muted); background: var(--bg-card); }
+.leg-result-badge.pending { color: var(--neutral); background: var(--bg-body); }

 /* summary */
 .summary-rows {
@@ -584,9 +596,9 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
-  border-bottom: 1px solid #1c1c1c;
+  border-bottom: 1px solid var(--border);
  font-size: 13px;
-  color: #b0b0b0;
+  color: var(--text-muted);
  font-weight: 600;
 }

@@ -595,29 +607,29 @@ const matchPhaseText = computed(() => matchPhaseLabel(t, matchPhase.value));
 }

 .sum-row.muted {
-  color: #444;
+  color: var(--neutral);
  font-size: 11px;
 }

 .odds-val {
-  color: #b8a04a;
-  font-weight: 800;
+  color: var(--text);
+  font-weight: 700;
 }

 .amt-won {
-  color: #3db865;
-  font-weight: 900;
+  color: var(--success);
+  font-weight: 700;
  font-size: 15px;
 }

 .amt-pending {
-  color: #e8c84a;
-  font-weight: 900;
+  color: var(--text-muted);
+  font-weight: 700;
 }

 .amt-lost {
-  color: #e05050;
-  font-weight: 900;
+  color: var(--primary);
+  font-weight: 700;
  font-size: 15px;
 }