feat(i18n): 管理端与玩家端三语支持（中/英/马来语）

- 管理后台 adminT 文案库、结算与代理端页面、表单校验 - 玩家端 vue-i18n 补全首页/公告/串关与 ms 文案 - Element Plus ms 语言包与共享 locale 工具
2026-06-03 15:05:36 +08:00
parent 80adc0e928
commit cbfa18d1d3
63 changed files with 3081 additions and 1038 deletions
--- a/apps/player/src/components/AnnouncementMarquee.vue
+++ b/apps/player/src/components/AnnouncementMarquee.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();

 const props = withDefaults(
  defineProps<{ items: string[]; embedded?: boolean }>(),
@@ -15,7 +18,7 @@ const text = computed(() => {

 <template>
  <div v-if="text" class="marquee-bar" :class="{ embedded }">
-    <span class="marquee-badge">公告</span>
+    <span class="marquee-badge">{{ t('home.announcement_badge') }}</span>
    <div class="marquee-viewport">
      <div class="marquee-track">
        <span class="marquee-text">{{ text }}</span>
--- a/apps/player/src/components/BannerCarousel.vue
+++ b/apps/player/src/components/BannerCarousel.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 import defaultBannerImg from '../assets/images/banner.png';

 export interface BannerItem {
@@ -31,7 +34,7 @@ function onImgError(e: Event) {
 }

 function title(banner: BannerItem) {
-  return banner.translation?.title || 'Banner';
+  return banner.translation?.title || t('home.banner_fallback');
 }

 function goTo(index: number) {
@@ -130,8 +133,8 @@ onUnmounted(stopAutoPlay);
        </div>
      </div>

-      <button v-if="banners.length > 1" class="nav prev" type="button" aria-label="上一张" @click.stop="prev">‹</button>
-      <button v-if="banners.length > 1" class="nav next" type="button" aria-label="下一张" @click.stop="next">›</button>
+      <button v-if="banners.length > 1" class="nav prev" type="button" :aria-label="t('home.banner_prev')" @click.stop="prev">‹</button>
+      <button v-if="banners.length > 1" class="nav next" type="button" :aria-label="t('home.banner_next')" @click.stop="next">›</button>

      <div v-if="banners.length > 1" class="dots">
        <button
@@ -140,7 +143,7 @@ onUnmounted(stopAutoPlay);
          type="button"
          class="dot"
          :class="{ active: i === active }"
-          :aria-label="`第 ${i + 1} 张`"
+          :aria-label="t('home.banner_slide', { n: i + 1 })"
          @click.stop="goTo(i)"
        />
      </div>
--- a/apps/player/src/components/BetGuideHelp.vue
+++ b/apps/player/src/components/BetGuideHelp.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    ariaLabel?: string;
+    /** 设置后首次自动弹出，关闭时写入 localStorage */
+    storageKey?: string;
+  }>(),
+  {},
+);
+
+const { t } = useI18n();
+const open = ref(false);
+
+onMounted(() => {
+  if (props.storageKey && !localStorage.getItem(props.storageKey)) {
+    open.value = true;
+  }
+});
+
+function close() {
+  open.value = false;
+  if (props.storageKey) {
+    localStorage.setItem(props.storageKey, '1');
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="help-btn"
+    :aria-label="ariaLabel ?? t('bet.guide_help_aria')"
+    :title="ariaLabel ?? t('bet.guide_help_aria')"
+    @click="open = true"
+  >
+    ?
+  </button>
+
+  <Teleport to="body">
+    <div v-if="open" class="overlay" @click.self="close">
+      <div class="modal" role="dialog" aria-modal="true" :aria-label="title">
+        <button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="close">✕</button>
+
+        <h3 class="title">{{ title }}</h3>
+
+        <div class="guide-body">
+          <slot />
+        </div>
+
+        <button type="button" class="btn-ok btn-gold-outline" @click="close">
+          {{ t('bet.guide_got_it') }}
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.help-btn {
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--primary-light);
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1;
+  padding: 0;
+  margin-left: auto;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 205;
+  background: rgba(0, 0, 0, 0.72);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  backdrop-filter: blur(4px);
+}
+
+.modal {
+  position: relative;
+  width: 100%;
+  max-width: 340px;
+  max-height: 85vh;
+  overflow-y: auto;
+  background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
+  border: 1px solid var(--border-gold-soft);
+  border-radius: var(--radius);
+  padding: 16px 14px 14px;
+  box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
+}
+
+.close-x {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+  text-align: center;
+  margin-bottom: 12px;
+  padding-right: 24px;
+}
+
+.guide-body {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 14px;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+.guide-body :deep(.flow-name) {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  margin: 0 0 8px;
+}
+
+.guide-body :deep(ol) {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.guide-body :deep(li + li) {
+  margin-top: 6px;
+}
+
+.guide-body :deep(.intro) {
+  margin: 0;
+}
+
+.guide-body :deep(.flow-block) {
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+
+.guide-body :deep(.rules-link) {
+  margin: 4px 0 0;
+  font-size: 12px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--border);
+}
+
+.btn-ok {
+  width: 100%;
+  padding: 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 800;
+}
+</style>
--- a/apps/player/src/components/BetSlipDrawer.vue
+++ b/apps/player/src/components/BetSlipDrawer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
 import { useBetSlipStore } from '../stores/betSlip';
 import api from '../api';

@@ -29,11 +30,19 @@ async function placeBet() {
  success.value = '';

  try {
-    if (slip.mode === 'parlay' && slip.items.length >= 2) {
+    if (slip.mode === 'parlay' && slip.items.length >= PARLAY_MIN_LEGS) {
      if (slip.hasSameMatch) {
        error.value = t('bet.parlay_same_match');
        return;
      }
+      if (slip.items.length > PARLAY_MAX_LEGS) {
+        error.value = t('bet.parlay_max_legs');
+        return;
+      }
+      if (!slip.canPlaceParlay) {
+        error.value = t('bet.parlay_need_more');
+        return;
+      }
      await api.post('/player/bets/parlay', {
        legs: slip.items.map((i) => ({
          selectionId: i.selectionId,
@@ -110,7 +119,7 @@ async function placeBet() {
      <button
        type="button"
        class="btn-primary"
-        :disabled="loading || !slip.items.length"
+        :disabled="loading || !slip.items.length || (slip.mode === 'parlay' && !slip.canPlaceParlay)"
        @click="placeBet"
      >
        {{ loading ? t('bet.placing') : t('bet.place_bet') }}
--- a/apps/player/src/components/CashBalanceChip.vue
+++ b/apps/player/src/components/CashBalanceChip.vue
@@ -89,12 +89,14 @@ function close() {
  display: flex;
  align-items: center;
  gap: 4px;
-  padding: 4px 6px 4px 6px;
+  height: 36px;
+  padding: 0 8px 0 8px;
  min-width: 0;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #141414;
+  box-sizing: border-box;
 }

 .chip-body {
@@ -105,21 +107,21 @@ function close() {
 }

 .chip-label {
-  font-size: 9px;
+  font-size: 8px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
-  line-height: 1.2;
+  line-height: 1.15;
 }

 .chip-amount {
-  font-size: 12px;
+  font-size: 11px;
  font-weight: 800;
  color: var(--primary-light);
  text-shadow: none;
  white-space: nowrap;
-  line-height: 1.2;
+  line-height: 1.15;
 }

 .chevron {
--- a/apps/player/src/components/LocaleSwitcher.vue
+++ b/apps/player/src/components/LocaleSwitcher.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import LocaleFlag from './LocaleFlag.vue';
+import { useAppLocale } from '../composables/useAppLocale';
+
+withDefaults(
+  defineProps<{
+    compact?: boolean;
+  }>(),
+  { compact: false },
+);
+
+const { locale } = useI18n();
+const { locales, setLocale } = useAppLocale();
+
+async function onChange(code: string) {
+  await setLocale(code);
+}
+</script>
+
+<template>
+  <div class="locale-switch" :class="{ compact }">
+    <LocaleFlag :locale="locale" :size="compact ? 16 : 18" />
+    <select
+      :value="locale"
+      class="locale-select"
+      :aria-label="compact ? 'Language' : undefined"
+      @change="onChange(($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="l in locales" :key="l.code" :value="l.code">
+        {{ l.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<style scoped>
+.locale-switch {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 36px;
+  padding: 0 8px 0 6px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #0d0d0d;
+  box-sizing: border-box;
+}
+
+.locale-switch.compact {
+  height: auto;
+  padding: 2px 5px;
+}
+
+.locale-select {
+  background: transparent;
+  color: var(--primary-light);
+  border: none;
+  padding: 2px 2px 2px 0;
+  font-size: 11px;
+  font-weight: 700;
+  outline: none;
+  max-width: 120px;
+}
+</style>
--- a/apps/player/src/components/UserAvatarMenu.vue
+++ b/apps/player/src/components/UserAvatarMenu.vue
@@ -57,8 +57,9 @@ function logout() {
 }

 .avatar-btn {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
+  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--border-gold-soft);
  background: linear-gradient(145deg, #2a2210, #141008);
--- a/apps/player/src/components/match-detail/MatchBetGuide.vue
+++ b/apps/player/src/components/match-detail/MatchBetGuide.vue
@@ -1,156 +1,37 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import BetGuideHelp from '../BetGuideHelp.vue';
+
+const GUIDE_SEEN_KEY = 'thebet365_match_bet_guide_seen';

 const { t } = useI18n();
-const open = ref(false);
-
-function close() {
-  open.value = false;
-}
 </script>

 <template>
-  <button
-    type="button"
-    class="help-btn"
-    :aria-label="t('bet.guide_help_aria')"
-    :title="t('bet.guide_help_aria')"
-    @click="open = true"
+  <BetGuideHelp
+    :title="t('bet.guide_title')"
+    :storage-key="GUIDE_SEEN_KEY"
  >
-    ?
-  </button>
-
-  <Teleport to="body">
-    <div v-if="open" class="overlay" @click.self="close">
-      <div class="modal" role="dialog" aria-modal="true" :aria-label="t('bet.guide_title')">
-        <button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="close">✕</button>
-
-        <h3 class="title">{{ t('bet.guide_title') }}</h3>
-
-        <div class="guide-body">
-          <div class="flow">
-            <p class="flow-name">{{ t('bet.guide_flow_normal') }}</p>
-            <ol>
-              <li>{{ t('bet.guide_normal_1') }}</li>
-              <li>{{ t('bet.guide_normal_2') }}</li>
-              <li>{{ t('bet.guide_normal_3') }}</li>
-            </ol>
-          </div>
-          <div class="flow flow--cs">
-            <p class="flow-name">{{ t('bet.guide_flow_cs') }}</p>
-            <ol>
-              <li>{{ t('bet.guide_cs_1') }}</li>
-              <li>{{ t('bet.guide_cs_2') }}</li>
-              <li>{{ t('bet.guide_cs_3') }}</li>
-            </ol>
-          </div>
-        </div>
-
-        <button type="button" class="btn-ok btn-gold-outline" @click="close">
-          {{ t('bet.guide_got_it') }}
-        </button>
-      </div>
+    <div class="flow">
+      <p class="flow-name">{{ t('bet.guide_flow_normal') }}</p>
+      <ol>
+        <li>{{ t('bet.guide_normal_1') }}</li>
+        <li>{{ t('bet.guide_normal_2') }}</li>
+        <li>{{ t('bet.guide_normal_3') }}</li>
+      </ol>
    </div>
-  </Teleport>
+    <div class="flow flow-block">
+      <p class="flow-name">{{ t('bet.guide_flow_cs') }}</p>
+      <ol>
+        <li>{{ t('bet.guide_cs_1') }}</li>
+        <li>{{ t('bet.guide_cs_2') }}</li>
+        <li>{{ t('bet.guide_cs_3') }}</li>
+      </ol>
+    </div>
+    <div class="flow flow-block">
+      <p class="flow-name">{{ t('bet.guide_flow_parlay') }}</p>
+      <p class="intro">{{ t('bet.guide_parlay_1') }}</p>
+    </div>
+    <p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
+  </BetGuideHelp>
 </template>
-
-<style scoped>
-.help-btn {
-  flex-shrink: 0;
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  border: 1px solid var(--border-gold-soft);
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--primary-light);
-  font-size: 14px;
-  font-weight: 800;
-  line-height: 1;
-  padding: 0;
-}
-
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 205;
-  background: rgba(0, 0, 0, 0.72);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  backdrop-filter: blur(4px);
-}
-
-.modal {
-  position: relative;
-  width: 100%;
-  max-width: 340px;
-  max-height: 85vh;
-  overflow-y: auto;
-  background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
-  border: 1px solid var(--border-gold-soft);
-  border-radius: var(--radius);
-  padding: 16px 14px 14px;
-  box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
-}
-
-.close-x {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--text-muted);
-  font-size: 14px;
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 800;
-  color: var(--primary-light);
-  text-align: center;
-  margin-bottom: 12px;
-  padding-right: 24px;
-}
-
-.guide-body {
-  display: grid;
-  gap: 10px;
-  margin-bottom: 14px;
-}
-
-.flow-name {
-  font-size: 13px;
-  font-weight: 800;
-  color: var(--primary-light);
-  margin-bottom: 8px;
-}
-
-.flow ol {
-  margin: 0;
-  padding-left: 20px;
-  font-size: 13px;
-  color: var(--text-muted);
-  line-height: 1.55;
-}
-
-.flow li + li {
-  margin-top: 6px;
-}
-
-.flow--cs {
-  padding-top: 10px;
-  border-top: 1px solid var(--border);
-}
-
-.btn-ok {
-  width: 100%;
-  padding: 10px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 800;
-}
-</style>
--- a/apps/player/src/components/parlay/ParlayPanel.vue
+++ b/apps/player/src/components/parlay/ParlayPanel.vue
@@ -3,7 +3,9 @@ import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../../api';
 import { useBetSlipStore } from '../../stores/betSlip';
-import { PARLAY_MARKET_TYPES, SELECTION_SHORT } from '../../utils/parlayColumns';
+import { PARLAY_MAX_LEGS, canSelectForParlay } from '@thebet365/shared';
+import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS } from '../../utils/parlayColumns';
+import BetGuideHelp from '../BetGuideHelp.vue';

 type TimeFilter = 'all' | 'today';

@@ -18,6 +20,8 @@ interface Selection {
 interface Market {
  id: string;
  marketType: string;
+  lineValue?: string | number | null;
+  allowParlay?: boolean;
  selections: Selection[];
 }

@@ -51,10 +55,25 @@ onMounted(async () => {
  }
 });

+function parseLine(v: string | number | null | undefined) {
+  if (v == null || v === '') return null;
+  const n = typeof v === 'number' ? v : parseFloat(String(v));
+  return Number.isFinite(n) ? n : null;
+}
+
+function isParlayEligibleMarket(market: Market) {
+  if (!market.selections.length) return false;
+  return canSelectForParlay({
+    marketType: market.marketType,
+    lineValue: parseLine(market.lineValue),
+    allowParlay: market.allowParlay ?? true,
+  }).ok;
+}
+
 function hasParlayMarkets(m: ParlayMatch) {
  return parlayMarketKeys.some((key) => {
    const market = m.markets?.find((mk) => mk.marketType === key);
-    return market && market.selections.length > 0;
+    return market && isParlayEligibleMarket(market);
  });
 }

@@ -98,15 +117,23 @@ function formatOdds(odds: string) {
 }

 function selLabel(sel: Selection) {
-  return SELECTION_SHORT[sel.selectionCode] ?? sel.selectionName.slice(0, 2);
+  const key = PARLAY_SELECTION_KEYS[sel.selectionCode];
+  if (key) return t(`bet.${key}`);
+  return sel.selectionName.slice(0, 2);
+}
+
+function colLabel(labelKey: string) {
+  return t(`bet.${labelKey}`);
 }

 function isPicked(selectionId: string) {
  return slip.items.some((i) => i.selectionId === selectionId);
 }

+const parlayHint = ref('');
+
 function pickSelection(match: ParlayMatch, market: Market, sel: Selection) {
-  slip.addParlayLeg({
+  const err = slip.addParlayLeg({
    selectionId: sel.id,
    oddsVersion: String(sel.oddsVersion),
    matchId: match.id,
@@ -114,7 +141,14 @@ function pickSelection(match: ParlayMatch, market: Market, sel: Selection) {
    selectionName: `${selLabel(sel)} ${formatOdds(sel.odds)}`,
    odds: parseFloat(sel.odds),
    marketType: market.marketType,
+    lineValue: parseLine(market.lineValue),
+    allowParlay: market.allowParlay,
  });
+  if (err === 'MAX_LEGS') parlayHint.value = t('bet.parlay_max_legs');
+  else if (err === 'QUARTER_LINE') parlayHint.value = t('bet.parlay_block_quarter');
+  else if (err === 'OUTRIGHT') parlayHint.value = t('bet.parlay_block_outright');
+  else if (err === 'NOT_ALLOWED') parlayHint.value = t('bet.parlay_block_not_allowed');
+  else parlayHint.value = '';
 }

 function openSlip() {
@@ -126,21 +160,28 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);

 <template>
  <div class="parlay-panel" :class="{ 'has-fixed-foot': showParlayFoot }">
-    <header class="panel-head">
-      <div class="head-title">
-        <span class="layers-icon" aria-hidden="true" />
-        <h2>{{ t('bet.parlay_title') }}</h2>
-      </div>
-      <p class="head-desc">{{ t('bet.parlay_desc') }}</p>
-    </header>
-
    <div class="toolbar">
-      <select v-model="timeFilter" class="filter-select">
+      <div class="toolbar-filters">
+        <select v-model="timeFilter" class="filter-select">
        <option value="all">{{ t('bet.parlay_filter_all') }}</option>
        <option value="today">{{ t('bet.tab_today') }}</option>
-      </select>
+        </select>
+        <BetGuideHelp
+          :title="t('bet.parlay_guide_title')"
+          :aria-label="t('bet.parlay_guide_help')"
+          storage-key="thebet365_parlay_guide_seen"
+        >
+          <p class="intro">{{ t('bet.parlay_desc') }}</p>
+          <ol>
+            <li>{{ t('bet.parlay_guide_1') }}</li>
+            <li>{{ t('bet.parlay_guide_2') }}</li>
+            <li>{{ t('bet.parlay_guide_3') }}</li>
+          </ol>
+          <p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
+        </BetGuideHelp>
+      </div>
      <div class="col-headers">
-        <span v-for="col in PARLAY_MARKET_TYPES" :key="col.key" class="col-head">{{ col.label }}</span>
+        <span v-for="col in PARLAY_MARKET_TYPES" :key="col.key" class="col-head">{{ colLabel(col.labelKey) }}</span>
      </div>
    </div>

@@ -159,7 +200,12 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
            :key="col.key"
            class="market-cell"
          >
-            <template v-if="getMarket(match, col.key)?.selections.length">
+            <template
+              v-if="
+                getMarket(match, col.key) &&
+                isParlayEligibleMarket(getMarket(match, col.key)!)
+              "
+            >
              <button
                v-for="sel in getMarket(match, col.key)!.selections"
                :key="sel.id"
@@ -185,7 +231,9 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);

    <Teleport to="body">
      <div v-if="showParlayFoot" class="parlay-foot-fixed">
-        <p v-if="slip.count < 2" class="foot-hint">{{ t('bet.parlay_need_more') }}</p>
+        <p v-if="parlayHint" class="foot-hint foot-hint--warn">{{ parlayHint }}</p>
+        <p v-else-if="slip.count < 2" class="foot-hint">{{ t('bet.parlay_need_more') }}</p>
+        <p v-else-if="slip.count > PARLAY_MAX_LEGS" class="foot-hint">{{ t('bet.parlay_max_legs') }}</p>
        <p v-else class="foot-meta">
          {{ t('bet.bet_slip') }} ({{ slip.count }}) · {{ t('bet.parlay') }}
          {{ slip.totalOdds.toFixed(2) }}
@@ -193,7 +241,7 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
        <button
          type="button"
          class="market-foot-btn"
-          :disabled="slip.count < 2"
+          :disabled="!slip.canPlaceParlay"
          @click="openSlip"
        >
          {{ t('bet.cs_confirm_cell') }}
@@ -212,43 +260,11 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
  padding-bottom: 100px;
 }

-.panel-head {
-  background: #141414;
-  border: 1px solid #2a2a2a;
-  border-radius: 8px;
-  padding: 14px 12px;
-  margin-bottom: 12px;
-}
-
-.head-title {
+.toolbar-filters {
  display: flex;
  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.layers-icon {
-  width: 26px;
-  height: 20px;
+  gap: 8px;
  flex-shrink: 0;
-  background:
-    linear-gradient(#2e9e5e, #2e9e5e) 0 0 / 100% 4px no-repeat,
-    linear-gradient(#2e9e5e, #2e9e5e) 0 8px / 85% 4px no-repeat,
-    linear-gradient(#2e9e5e, #2e9e5e) 0 16px / 70% 4px no-repeat;
-  border-radius: 2px;
-}
-
-.head-title h2 {
-  font-size: 18px;
-  font-weight: 800;
-  color: var(--text);
-}
-
-.head-desc {
-  font-size: 12px;
-  color: var(--text-muted);
-  line-height: 1.45;
-  margin-bottom: 10px;
 }

 .parlay-foot-fixed {
@@ -267,6 +283,10 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
 .foot-meta {
  margin: 0 0 8px;
  font-size: 11px;
+}
+
+.foot-hint--warn {
+  color: var(--danger);
  color: var(--text-muted);
  text-align: center;
 }
@@ -322,11 +342,12 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
 }

 .col-head {
-  font-size: 9px;
+  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
-  letter-spacing: 0.02em;
+  line-height: 1.25;
+  word-break: keep-all;
 }

 .table-wrap {
--- a/apps/player/src/composables/useAnnouncements.ts
+++ b/apps/player/src/composables/useAnnouncements.ts
@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { resolveAnnouncements } from '../constants/defaultAnnouncement';

@@ -20,14 +21,16 @@ function collectAnnouncementLines(data: {
 }

 export function useAnnouncements() {
-  const items = ref<string[]>(resolveAnnouncements([]));
+  const { t } = useI18n();
+  const items = ref<string[]>(resolveAnnouncements([], t('home.announcement_default')));

  async function load() {
+    const fallback = t('home.announcement_default');
    try {
      const { data } = await api.get('/player/home');
-      items.value = resolveAnnouncements(collectAnnouncementLines(data.data));
+      items.value = resolveAnnouncements(collectAnnouncementLines(data.data), fallback);
    } catch {
-      items.value = resolveAnnouncements([]);
+      items.value = resolveAnnouncements([], fallback);
    }
  }

--- a/apps/player/src/composables/useAppLocale.ts
+++ b/apps/player/src/composables/useAppLocale.ts
@@ -0,0 +1,51 @@
+import { useI18n } from 'vue-i18n';
+import { SUPPORTED_LOCALES, LOCALE_UI_LABELS } from '@thebet365/shared';
+import api from '../api';
+import { useAuthStore } from '../stores/auth';
+
+const STORAGE_KEY = 'locale';
+const COOKIE_MAX_AGE = 365 * 24 * 60 * 60;
+
+export const APP_LOCALES = SUPPORTED_LOCALES.map((code) => ({
+  code,
+  label: LOCALE_UI_LABELS[code] ?? code,
+}));
+
+function persistLocale(code: string) {
+  localStorage.setItem(STORAGE_KEY, code);
+  document.cookie = `${STORAGE_KEY}=${encodeURIComponent(code)};path=/;max-age=${COOKIE_MAX_AGE};SameSite=Lax`;
+}
+
+export function useAppLocale() {
+  const { locale } = useI18n();
+  const auth = useAuthStore();
+
+  function applyLocale(code: string) {
+    if (!(SUPPORTED_LOCALES as readonly string[]).includes(code)) return;
+    locale.value = code;
+    persistLocale(code);
+  }
+
+  async function setLocale(code: string) {
+    applyLocale(code);
+    if (auth.token) {
+      try {
+        await api.post('/player/language', { locale: code });
+        if (auth.user) {
+          auth.user = { ...auth.user, locale: code };
+          localStorage.setItem('user', JSON.stringify(auth.user));
+        }
+      } catch {
+        /* 离线或 token 过期时仍保留本地语言 */
+      }
+    }
+  }
+
+  function initFromUser(userLocale?: string | null) {
+    if (userLocale && (SUPPORTED_LOCALES as readonly string[]).includes(userLocale)) {
+      applyLocale(userLocale);
+    }
+  }
+
+  return { locales: APP_LOCALES, setLocale, applyLocale, initFromUser };
+}
--- a/apps/player/src/constants/defaultAnnouncement.ts
+++ b/apps/player/src/constants/defaultAnnouncement.ts
@@ -1,8 +1,4 @@
-export const DEFAULT_ANNOUNCEMENTS = [
-  '欢迎光临 TheBet365 · 足球赛事火热进行中 · 理性投注，量力而行',
-];
-
-export function resolveAnnouncements(items: string[]): string[] {
+export function resolveAnnouncements(items: string[], fallback: string): string[] {
  const list = items.map((s) => s.trim()).filter(Boolean);
-  return list.length ? list : DEFAULT_ANNOUNCEMENTS;
+  return list.length ? list : [fallback];
 }
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -6,33 +6,26 @@ import { useBetSlipStore } from '../stores/betSlip';
 import BetSlipDrawer from '../components/BetSlipDrawer.vue';
 import CashBalanceChip from '../components/CashBalanceChip.vue';
 import UserAvatarMenu from '../components/UserAvatarMenu.vue';
-import LocaleFlag from '../components/LocaleFlag.vue';
+import LocaleSwitcher from '../components/LocaleSwitcher.vue';
+import { useAppLocale } from '../composables/useAppLocale';
 import AnnouncementMarquee from '../components/AnnouncementMarquee.vue';
 import BottomNavIcon from '../components/BottomNavIcon.vue';
 import { computed, onMounted } from 'vue';
-import { getLocaleDisplay } from '../utils/localeDisplay';
 import { useAnnouncements } from '../composables/useAnnouncements';

-const { t, locale } = useI18n();
+const { t } = useI18n();
 const auth = useAuthStore();
+const { initFromUser } = useAppLocale();
 const route = useRoute();
 const slip = useBetSlipStore();

-const locales = [
-  { code: 'zh-CN', label: '中文' },
-  { code: 'en-US', label: 'EN' },
-  { code: 'ms-MY', label: 'BM' },
-];
-
 const showAnnouncement = computed(() => !route.path.startsWith('/profile'));
 const { items: announcements, load: loadAnnouncements } = useAnnouncements();

-onMounted(loadAnnouncements);
-
-function setLocale(code: string) {
-  locale.value = code;
-  localStorage.setItem('locale', code);
-}
+onMounted(() => {
+  loadAnnouncements();
+  if (auth.user?.locale) initFromUser(auth.user.locale);
+});
 </script>

 <template>
@@ -40,14 +33,7 @@ function setLocale(code: string) {
    <header class="header">
      <img src="/logo.png" alt="TheBet365" class="logo" />
      <div class="header-actions">
-        <div class="lang-select-wrap">
-          <LocaleFlag :locale="locale" :size="18" />
-          <select :value="locale" @change="setLocale(($event.target as HTMLSelectElement).value)" class="lang-select">
-            <option v-for="l in locales" :key="l.code" :value="l.code">
-              {{ getLocaleDisplay(l.code).label }}
-            </option>
-          </select>
-        </div>
+        <LocaleSwitcher />
        <CashBalanceChip v-if="auth.user" />
        <UserAvatarMenu v-if="auth.user" />
      </div>
@@ -115,25 +101,20 @@ function setLocale(code: string) {
  height: 36px; width: auto; display: block;
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.2));
 }
-.header-actions { display: flex; gap: 6px; align-items: center; }
-.lang-select-wrap {
+.header-actions {
+  --header-chip-h: 36px;
  display: flex;
+  gap: 6px;
  align-items: center;
-  gap: 5px;
-  padding: 3px 6px 3px 5px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: #0d0d0d;
 }
-.lang-select {
-  background: transparent;
-  color: var(--primary-light);
-  border: none;
-  padding: 2px 2px 2px 0;
-  width: auto;
-  font-size: 11px;
-  font-weight: 700;
-  outline: none;
+.header-actions :deep(.locale-switch:not(.compact)),
+.header-actions :deep(.cash-chip),
+.header-actions :deep(.avatar-btn) {
+  height: var(--header-chip-h);
+  box-sizing: border-box;
+}
+.header-actions :deep(.avatar-btn) {
+  width: var(--header-chip-h);
 }
 .announce-strip {
  flex-shrink: 0;
--- a/apps/player/src/main.ts
+++ b/apps/player/src/main.ts
@@ -8,10 +8,21 @@ import './styles.css';
 const i18n = createI18n({
  legacy: false,
  locale: localStorage.getItem('locale') || 'zh-CN',
-  fallbackLocale: 'en-US',
+  fallbackLocale: ['en-US', 'zh-CN'],
  messages: {
    'zh-CN': {
      nav: { home: '主页', bet: '投注', bet_history: '历史投注', wallet: '账单', profile: '我的' },
+      home: {
+        hot_matches: '热门赛事',
+        no_matches: '暂无赛事',
+        announcement_badge: '公告',
+        announcement_default:
+          '欢迎光临 TheBet365 · 足球赛事火热进行中 · 理性投注，量力而行',
+        banner_prev: '上一张',
+        banner_next: '下一张',
+        banner_slide: '第 {n} 张',
+        banner_fallback: 'Banner',
+      },
      history: {
        league_default: '足球',
        stake: '投注 Stake',
@@ -69,7 +80,16 @@ const i18n = createI18n({
        no_outright: '暂无冠军盘口',
        cancel: '取消',
        parlay_title: '串关投注',
-        parlay_desc: '选择3-10场比赛来创建串关投注。组合赔率相乘可赢得更多！',
+        parlay_guide_title: '串关怎么投？',
+        parlay_guide_help: '查看串关说明',
+        parlay_desc: '选择 2–5 场赛前赛事组合串关（2 串 1 至 5 串 1）。赔率相乘，不含滚球、冠军盘与四分盘让球/大小。',
+        parlay_guide_1: '在列表中点击各场赔率，选中项显示金边；再点同一项可取消',
+        parlay_guide_2: '须选 2–5 场不同赛事，不可同场串关；冠军盘与四分盘让球/大小不可选',
+        parlay_guide_3: '选好后点底部「确认下单」打开投注单，填写金额并提交',
+        parlay_max_legs: '串关最多 5 项',
+        parlay_block_outright: '冠军盘不可串关',
+        parlay_block_quarter: '四分盘让球/大小不可串关',
+        parlay_block_not_allowed: '该玩法不可串关',
        parlay_filter_all: '全部',
        parlay_empty: '暂无可用串关赛事',
        parlay_same_match: '同一场比赛不能串关',
@@ -91,6 +111,13 @@ const i18n = createI18n({
        market_ht_handicap: '半场 让球',
        market_ht_ou: '半场 大小',
        market_ht_1x2: '半场 独赢盘',
+        parlay_sel_home: '主',
+        parlay_sel_away: '客',
+        parlay_sel_draw: '和',
+        parlay_sel_over: '大',
+        parlay_sel_under: '小',
+        parlay_sel_odd: '单',
+        parlay_sel_even: '双',
        col_home: '主场',
        col_draw: '平',
        col_away: '客场',
@@ -111,6 +138,9 @@ const i18n = createI18n({
        guide_cs_1: '点「展开玩法」在表格里填各比分金额',
        guide_cs_2: '填好金额后点该玩法底部「确认下单」，核对后提交',
        guide_cs_3: '可一次填多个比分，会拆成多笔注单',
+        guide_flow_parlay: '串关（2–5 场）',
+        guide_parlay_1: '本页为单关/波胆。串关：底部导航点「投注」，在页面顶部切换到「串关投注」，选 2–5 场不同赛事后在投注单提交。',
+        guide_rules_link: '完整规则见「我的」→ 投注规则。',
        mode_cs_tag: '本页直接下注',
        mode_slip_tag: '加入投注单',
        cs_confirm_btn: '确认下注',
@@ -126,7 +156,7 @@ const i18n = createI18n({
        cs_top_hint: '① 在比分格填金额  ② 点上方「确认下注」',
        slip_empty_hint: '点击赔率加入投注单',
        slip_remove: '移除',
-        slip_singles_hint: '共 {n} 笔单关（串关请用「串关投注」页）',
+        slip_singles_hint: '共 {n} 笔单关（串关请到「投注」页顶部「串关投注」）',
        slip_stake_per_bet: '每笔投注金额',
        slip_est_return: '预计总返还',
        slip_parlay_odds: '组合赔率 {odds}',
@@ -155,10 +185,27 @@ const i18n = createI18n({
        password_failed: '密码修改失败',
        password_mismatch: '两次新密码不一致',
        password_incomplete: '修改密码需填写当前密码、新密码及确认密码',
+        rules_title: '投注规则',
+        rules_p1: '本平台第一版仅支持足球赛前盘，不含滚球、Cash Out、改单及系统串关。',
+        rules_p2: '串关为 2 串 1 至 5 串 1，不可同场串关；冠军盘、四分盘让球/大小不可进入串关。',
+        rules_p3: '赛果由平台根据官方录入的半场/全场比分结算，结算预览经确认后入账。',
+        rules_p4: '若本说明与后台公告冲突，以最新公告及实际盘口规则为准。',
+        rules_p5: '操作步骤：进入任意赛事详情，点右上角「?」查看玩法说明。',
      },
    },
    'en-US': {
      nav: { home: 'Home', bet: 'Bet', bet_history: 'History', wallet: 'Wallet', profile: 'Profile' },
+      home: {
+        hot_matches: 'Hot matches',
+        no_matches: 'No matches',
+        announcement_badge: 'Notice',
+        announcement_default:
+          'Welcome to TheBet365 · Football events are live · Bet responsibly',
+        banner_prev: 'Previous slide',
+        banner_next: 'Next slide',
+        banner_slide: 'Slide {n}',
+        banner_fallback: 'Banner',
+      },
      history: {
        league_default: 'Football',
        stake: 'Stake 投注',
@@ -216,7 +263,16 @@ const i18n = createI18n({
        no_outright: 'No outright markets',
        cancel: 'Cancel',
        parlay_title: 'Parlay',
-        parlay_desc: 'Pick 3-10 matches. Combined odds multiply your potential win!',
+        parlay_guide_title: 'How to parlay',
+        parlay_guide_help: 'Parlay help',
+        parlay_desc: 'Combine 2–5 pre-match legs (2-fold to 5-fold). No live, outright, or quarter-ball HDP/O-U in parlay.',
+        parlay_guide_1: 'Tap odds in the list; selected cells show a gold border. Tap again to remove',
+        parlay_guide_2: 'Pick 2–5 different matches only. No same match, outright, or quarter-ball HDP/O-U',
+        parlay_guide_3: 'Tap Confirm order at the bottom, enter stake in the bet slip, and submit',
+        parlay_max_legs: 'Parlay allows up to 5 legs',
+        parlay_block_outright: 'Outright cannot be parlayed',
+        parlay_block_quarter: 'Quarter-ball HDP/O-U cannot be parlayed',
+        parlay_block_not_allowed: 'This market cannot be parlayed',
        parlay_filter_all: 'All',
        parlay_empty: 'No matches available for parlay betting',
        parlay_same_match: 'Cannot parlay selections from the same match',
@@ -238,6 +294,13 @@ const i18n = createI18n({
        market_ht_handicap: 'HT Handicap',
        market_ht_ou: 'HT O/U',
        market_ht_1x2: 'HT 1X2',
+        parlay_sel_home: 'H',
+        parlay_sel_away: 'A',
+        parlay_sel_draw: 'D',
+        parlay_sel_over: 'O',
+        parlay_sel_under: 'U',
+        parlay_sel_odd: 'Odd',
+        parlay_sel_even: 'Even',
        col_home: 'Home',
        col_draw: 'Draw',
        col_away: 'Away',
@@ -258,6 +321,9 @@ const i18n = createI18n({
        guide_cs_1: 'Expand and enter stake on each score',
        guide_cs_2: 'Enter stakes, then tap Place order at the bottom of that market',
        guide_cs_3: 'Multiple scores = multiple bets',
+        guide_flow_parlay: 'Parlay (2–5 legs)',
+        guide_parlay_1: 'This page is for singles and correct score. Parlay: tap Bet in the bottom nav, then the Parlay tab at the top of that page, pick 2–5 different matches, and submit from the bet slip.',
+        guide_rules_link: 'Full rules: Profile → Betting Rules.',
        mode_cs_tag: 'Bet here',
        mode_slip_tag: 'Add to slip',
        cs_confirm_btn: 'Confirm bet',
@@ -273,7 +339,7 @@ const i18n = createI18n({
        cs_top_hint: '① Enter stake  ② Tap Confirm bet above',
        slip_empty_hint: 'Tap odds to add to bet slip',
        slip_remove: 'Remove',
-        slip_singles_hint: '{n} single bet(s). Use Parlay tab for parlays.',
+        slip_singles_hint: '{n} single bet(s). Parlay: Bet page → top Parlay tab.',
        slip_stake_per_bet: 'Stake per bet',
        slip_est_return: 'Est. total return',
        slip_parlay_odds: 'Combined odds {odds}',
@@ -302,6 +368,12 @@ const i18n = createI18n({
        password_failed: 'Password change failed',
        password_mismatch: 'Passwords do not match',
        password_incomplete: 'Fill current, new and confirm password to change password',
+        rules_title: 'Betting Rules',
+        rules_p1: 'Football pre-match only in v1. No live betting, Cash Out, bet edits, or system parlays.',
+        rules_p2: 'Parlays: 2–5 legs, different matches only. Outright and quarter-ball HDP/O-U are excluded from parlays.',
+        rules_p3: 'Results use admin-entered half-time and full-time scores; payouts apply after settlement preview is confirmed.',
+        rules_p4: 'If this text conflicts with site notices, the latest notice and market rules prevail.',
+        rules_p5: 'How to bet: open any match, tap the ? icon on the top right.',
      },
    },
    'ms-MY': {
@@ -312,18 +384,29 @@ const i18n = createI18n({
        wallet: 'Bil',
        profile: 'Profil',
      },
+      home: {
+        hot_matches: 'Perlawanan popular',
+        no_matches: 'Tiada perlawanan',
+        announcement_badge: 'Notis',
+        announcement_default:
+          'Selamat datang ke TheBet365 · Perlawanan bola sepak sedang berlangsung · Bertaruh secara bertanggungjawab',
+        banner_prev: 'Slaid sebelumnya',
+        banner_next: 'Slaid seterusnya',
+        banner_slide: 'Slaid {n}',
+        banner_fallback: 'Banner',
+      },
      history: {
        league_default: 'Bola Sepak',
-        stake: 'Stake 投注',
-        return: 'Return 回报',
-        est_return: 'Est. Return 预计回报',
-        parlay_title: 'Parlay · {n} perlawanan',
-        parlay_league: 'Parlay 串关',
+        stake: 'Stake',
+        return: 'Pulangan',
+        est_return: 'Anggaran pulangan',
+        parlay_title: 'Berganda · {n} perlawanan',
+        parlay_league: 'Berganda',
        empty: 'Tiada rekod pertaruhan',
-        status_won: 'WON 赢',
-        status_pending: 'PENDING 待定',
-        status_lost: 'LOST 输',
-        status_push: 'PUSH 走盘',
+        status_won: 'MENANG',
+        status_pending: 'MENUNGGU',
+        status_lost: 'KALAH',
+        status_push: 'SERI',
      },
      auth: {
        login: 'Log Masuk',
@@ -369,9 +452,18 @@ const i18n = createI18n({
        no_outright: 'Tiada pasaran juara',
        cancel: 'Batal',
        parlay_title: 'Pertaruhan Berganda',
-        parlay_desc: 'Pilih 3-10 perlawanan. Gabungan odds didarab!',
+        parlay_guide_title: 'Cara parlay',
+        parlay_guide_help: 'Bantuan parlay',
+        parlay_desc: 'Gabung 2–5 perlawanan pra-perlawanan (2 hingga 5 liputan). Tiada live, outright atau suku bola HDP/O-U.',
+        parlay_guide_1: 'Ketik odds dalam senarai; pilihan dipilih ada sempadan emas. Ketik lagi untuk batal',
+        parlay_guide_2: 'Pilih 2–5 perlawanan berbeza. Tiada perlawanan sama, outright atau suku bola HDP/O-U',
+        parlay_guide_3: 'Ketik Sahkan pesanan di bawah, isi pegangan dalam slip, dan hantar',
+        parlay_max_legs: 'Maksimum 5 pilihan parlay',
+        parlay_block_outright: 'Outright tidak boleh parlay',
+        parlay_block_quarter: 'HDP/O-U suku bola tidak boleh parlay',
+        parlay_block_not_allowed: 'Pasaran ini tidak boleh parlay',
        parlay_filter_all: 'Semua',
-        parlay_empty: 'No matches available for parlay betting',
+        parlay_empty: 'Tiada perlawanan untuk pertaruhan berganda',
        parlay_same_match: 'Perlawanan sama tidak boleh berganda',
        parlay_need_more: 'Pilih sekurang-kurangnya 2 pilihan',
        back: 'Kembali',
@@ -391,6 +483,13 @@ const i18n = createI18n({
        market_ht_handicap: 'Handicap Separuh',
        market_ht_ou: 'Atas/Bawah Separuh',
        market_ht_1x2: '1X2 Separuh',
+        parlay_sel_home: 'R',
+        parlay_sel_away: 'P',
+        parlay_sel_draw: 'S',
+        parlay_sel_over: 'Atas',
+        parlay_sel_under: 'Bwh',
+        parlay_sel_odd: 'G',
+        parlay_sel_even: 'Gn',
        col_home: 'Home',
        col_draw: 'Seri',
        col_away: 'Away',
@@ -411,6 +510,9 @@ const i18n = createI18n({
        guide_cs_1: 'Kembang dan isi jumlah setiap skor',
        guide_cs_2: 'Isi jumlah, kemudian Sahkan pesanan di bawah pasaran itu',
        guide_cs_3: 'Beberapa skor = beberapa pertaruhan',
+        guide_flow_parlay: 'Parlay (2–5 perlawanan)',
+        guide_parlay_1: 'Halaman ini untuk tunggal dan skor tepat. Parlay: ketik Pertaruhan di nav bawah, kemudian tab Parlay di bahagian atas halaman, pilih 2–5 perlawanan berbeza, hantar dari slip.',
+        guide_rules_link: 'Peraturan penuh: Profil → Peraturan Pertaruhan.',
        mode_cs_tag: 'Pertaruhan di sini',
        mode_slip_tag: 'Tambah ke slip',
        cs_confirm_btn: 'Sahkan pertaruhan',
@@ -426,7 +528,7 @@ const i18n = createI18n({
        cs_top_hint: '① Isi jumlah  ② Ketik Sahkan di atas',
        slip_empty_hint: 'Ketik odds untuk tambah ke slip',
        slip_remove: 'Buang',
-        slip_singles_hint: '{n} pertaruhan tunggal. Guna tab Berganda untuk parlay.',
+        slip_singles_hint: '{n} pertaruhan tunggal. Parlay: halaman Pertaruhan → tab Berganda di atas.',
        slip_stake_per_bet: 'Jumlah setiap pertaruhan',
        slip_est_return: 'Anggaran pulangan',
        slip_parlay_odds: 'Odds gabungan {odds}',
@@ -455,6 +557,12 @@ const i18n = createI18n({
        password_failed: 'Gagal tukar kata laluan',
        password_mismatch: 'Kata laluan tidak sepadan',
        password_incomplete: 'Isi kata laluan semasa, baharu dan pengesahan untuk menukar',
+        rules_title: 'Peraturan Pertaruhan',
+        rules_p1: 'Versi pertama: hanya bola sepak pra-perlawanan. Tiada live, Cash Out, edit pertaruhan atau parlay sistem.',
+        rules_p2: 'Parlay 2–5 perlawanan, bukan perlawanan sama. Outright dan suku bola HDP/O-U tidak boleh parlay.',
+        rules_p3: 'Keputusan berdasarkan skor separuh masa/penuh yang dimasukkan admin; bayaran selepas pratonton disahkan.',
+        rules_p4: 'Jika bercanggah dengan notis laman, ikut notis terkini dan peraturan pasaran.',
+        rules_p5: 'Langkah operasi: buka butiran perlawanan, ketik ikon ? di atas kanan.',
      },
    },
  },
--- a/apps/player/src/stores/auth.ts
+++ b/apps/player/src/stores/auth.ts
@@ -4,7 +4,9 @@ import api from '../api';

 export const useAuthStore = defineStore('auth', () => {
  const token = ref(localStorage.getItem('token') || '');
-  const user = ref(JSON.parse(localStorage.getItem('user') || 'null'));
+  const user = ref<{ id?: string; username?: string; locale?: string } | null>(
+    JSON.parse(localStorage.getItem('user') || 'null'),
+  );

  async function login(username: string, password: string) {
    const { data } = await api.post('/player/auth/login', { username, password });
--- a/apps/player/src/stores/betSlip.ts
+++ b/apps/player/src/stores/betSlip.ts
@@ -1,5 +1,11 @@
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
+import {
+  PARLAY_MIN_LEGS,
+  PARLAY_MAX_LEGS,
+  canSelectForParlay,
+  type ParlayRejectReason,
+} from '@thebet365/shared';

 export interface SlipItem {
  selectionId: string;
@@ -9,20 +15,30 @@ export interface SlipItem {
  selectionName: string;
  odds: number;
  marketType: string;
+  lineValue?: number | null;
+  allowParlay?: boolean;
 }

 export const useBetSlipStore = defineStore('betSlip', () => {
  const items = ref<SlipItem[]>([]);
  const stake = ref<number>(10);
  const mode = ref<'single' | 'parlay'>('single');
+  const lastParlayError = ref<ParlayRejectReason | 'MAX_LEGS' | null>(null);

  const count = computed(() => items.value.length);
-  const isParlay = computed(() => mode.value === 'parlay' && items.value.length >= 2);
+  const isParlay = computed(() => mode.value === 'parlay' && items.value.length >= PARLAY_MIN_LEGS);
+
+  function parseLineValue(v: number | string | null | undefined): number | null {
+    if (v == null || v === '') return null;
+    const n = typeof v === 'number' ? v : parseFloat(String(v));
+    return Number.isFinite(n) ? n : null;
+  }

  /** 球赛/详情页：仅单关，且投注单同时只能有 1 项 */
  function addItem(item: SlipItem) {
    if (mode.value === 'parlay') items.value = [];
    mode.value = 'single';
+    lastParlayError.value = null;

    const existing = items.value.findIndex(
      (i) => i.selectionId === item.selectionId,
@@ -35,27 +51,48 @@ export const useBetSlipStore = defineStore('betSlip', () => {
  }

  /** 串关页专用：跨场组合，同场只保留一个选项 */
-  function addParlayLeg(item: SlipItem) {
+  function addParlayLeg(item: SlipItem): ParlayRejectReason | 'MAX_LEGS' | null {
    if (mode.value === 'single') items.value = [];
    mode.value = 'parlay';

    const samePick = items.value.findIndex((i) => i.selectionId === item.selectionId);
    if (samePick >= 0) {
      items.value.splice(samePick, 1);
-      return;
+      lastParlayError.value = null;
+      return null;
    }
+
+    const check = canSelectForParlay({
+      marketType: item.marketType,
+      lineValue: parseLineValue(item.lineValue),
+      allowParlay: item.allowParlay,
+    });
+    if (!check.ok) {
+      lastParlayError.value = check.reason;
+      return check.reason;
+    }
+
+    if (items.value.length >= PARLAY_MAX_LEGS) {
+      lastParlayError.value = 'MAX_LEGS';
+      return 'MAX_LEGS';
+    }
+
    items.value = items.value.filter((i) => i.matchId !== item.matchId);
    items.value.push(item);
+    lastParlayError.value = null;
+    return null;
  }

  function removeItem(selectionId: string) {
    items.value = items.value.filter((i) => i.selectionId !== selectionId);
    if (!items.value.length) mode.value = 'single';
+    lastParlayError.value = null;
  }

  function clear() {
    items.value = [];
    mode.value = 'single';
+    lastParlayError.value = null;
  }

  const totalOdds = computed(() =>
@@ -64,7 +101,7 @@ export const useBetSlipStore = defineStore('betSlip', () => {

  const potentialReturn = computed(() => {
    if (!items.value.length) return 0;
-    if (mode.value === 'parlay' && items.value.length >= 2) {
+    if (mode.value === 'parlay' && items.value.length >= PARLAY_MIN_LEGS) {
      return stake.value * totalOdds.value;
    }
    return stake.value * items.value[0].odds;
@@ -75,6 +112,14 @@ export const useBetSlipStore = defineStore('betSlip', () => {
    return new Set(matchIds).size !== matchIds.length;
  });

+  const canPlaceParlay = computed(
+    () =>
+      mode.value === 'parlay' &&
+      items.value.length >= PARLAY_MIN_LEGS &&
+      items.value.length <= PARLAY_MAX_LEGS &&
+      !hasSameMatch.value,
+  );
+
  const drawerOpen = ref(false);

  function openDrawer() {
@@ -94,6 +139,8 @@ export const useBetSlipStore = defineStore('betSlip', () => {
    totalOdds,
    potentialReturn,
    hasSameMatch,
+    canPlaceParlay,
+    lastParlayError,
    drawerOpen,
    addItem,
    addParlayLeg,
--- a/apps/player/src/utils/localeDisplay.ts
+++ b/apps/player/src/utils/localeDisplay.ts
@@ -1,3 +1,5 @@
+import { LOCALE_UI_LABELS } from '@thebet365/shared';
+
 export interface LocaleDisplay {
  countryCode: 'cn' | 'us' | 'my';
  currency: string;
@@ -5,9 +7,9 @@ export interface LocaleDisplay {
 }

 const LOCALE_DISPLAY: Record<string, LocaleDisplay> = {
-  'zh-CN': { countryCode: 'cn', currency: 'CNY', label: '中文' },
-  'en-US': { countryCode: 'us', currency: 'USD', label: 'English' },
-  'ms-MY': { countryCode: 'my', currency: 'MYR', label: 'BM' },
+  'zh-CN': { countryCode: 'cn', currency: 'CNY', label: LOCALE_UI_LABELS['zh-CN'] },
+  'en-US': { countryCode: 'us', currency: 'USD', label: LOCALE_UI_LABELS['en-US'] },
+  'ms-MY': { countryCode: 'my', currency: 'MYR', label: LOCALE_UI_LABELS['ms-MY'] },
 };

 export function getLocaleDisplay(locale: string): LocaleDisplay {
--- a/apps/player/src/utils/parlayColumns.ts
+++ b/apps/player/src/utils/parlayColumns.ts
@@ -1,23 +1,23 @@
-/** 串关列表表头与玩法类型 */
+/** 串关列表表头与玩法类型（labelKey 对应 main.ts bet.*） */
 export const PARLAY_MARKET_TYPES = [
-  { key: 'FT_HANDICAP', label: 'FT.HDP' },
-  { key: 'FT_OVER_UNDER', label: 'FT.O/U' },
-  { key: 'FT_1X2', label: 'FT.1X2' },
-  { key: 'FT_ODD_EVEN', label: 'FT.O/E' },
-  { key: 'HT_HANDICAP', label: '1H.HDP' },
-  { key: 'HT_OVER_UNDER', label: '1H.O/U' },
-  { key: 'HT_1X2', label: '1H.1X2' },
+  { key: 'FT_HANDICAP', labelKey: 'market_ft_handicap' },
+  { key: 'FT_OVER_UNDER', labelKey: 'market_ft_ou' },
+  { key: 'FT_1X2', labelKey: 'market_ft_1x2' },
+  { key: 'FT_ODD_EVEN', labelKey: 'market_ft_oe' },
+  { key: 'HT_HANDICAP', labelKey: 'market_ht_handicap' },
+  { key: 'HT_OVER_UNDER', labelKey: 'market_ht_ou' },
+  { key: 'HT_1X2', labelKey: 'market_ht_1x2' },
 ] as const;

 export type ParlayMarketType = (typeof PARLAY_MARKET_TYPES)[number]['key'];

-/** 选项简称（串关格内展示） */
-export const SELECTION_SHORT: Record<string, string> = {
-  HOME: '主',
-  AWAY: '客',
-  DRAW: '和',
-  OVER: '大',
-  UNDER: '小',
-  ODD: '单',
-  EVEN: '双',
+/** 选项简称 i18n key（串关格内展示） */
+export const PARLAY_SELECTION_KEYS: Record<string, string> = {
+  HOME: 'parlay_sel_home',
+  AWAY: 'parlay_sel_away',
+  DRAW: 'parlay_sel_draw',
+  OVER: 'parlay_sel_over',
+  UNDER: 'parlay_sel_under',
+  ODD: 'parlay_sel_odd',
+  EVEN: 'parlay_sel_even',
 };
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 import api from '../api';
 import emptyMatchesImg from '../assets/images/empty-matches.svg';
 import BannerCarousel from '../components/BannerCarousel.vue';
@@ -49,7 +52,7 @@ function goMatch(id: string) {
  <div>
    <BannerCarousel :banners="displayBanners" />

-    <h2 class="section-title">热门赛事</h2>
+    <h2 class="section-title">{{ t('home.hot_matches') }}</h2>
    <div v-for="match in home?.hotMatches || []" :key="match.id" class="card match-card" @click="goMatch(match.id)">
      <div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
      <div class="match-time">{{ new Date(match.startTime).toLocaleString() }}</div>
@@ -57,7 +60,7 @@ function goMatch(id: string) {

    <div v-if="home && !home.hotMatches?.length" class="empty">
      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
-      <p>暂无赛事</p>
+      <p>{{ t('home.no_matches') }}</p>
    </div>
  </div>
 </template>
--- a/apps/player/src/views/LoginView.vue
+++ b/apps/player/src/views/LoginView.vue
@@ -3,10 +3,13 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth';
+import { useAppLocale } from '../composables/useAppLocale';
+import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import RobotVerify from '../components/RobotVerify.vue';
 import loginBg from '../assets/images/h5bg.png';

 const { t } = useI18n();
+const { initFromUser } = useAppLocale();
 const auth = useAuthStore();
 const router = useRouter();
 const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
@@ -25,6 +28,7 @@ async function submit() {
  error.value = '';
  try {
    await auth.login(username.value, password.value);
+    initFromUser(auth.user?.locale);
    router.push('/');
  } catch (e: unknown) {
    error.value = (e as { response?: { data?: { error?: string } } })?.response?.data?.error || 'Login failed';
@@ -36,6 +40,9 @@ async function submit() {

 <template>
  <div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
+    <div class="login-lang">
+      <LocaleSwitcher compact />
+    </div>
    <form @submit.prevent="submit" class="login-form ps-gold-frame">
      <label>{{ t('auth.username') }}</label>
      <input v-model="username" class="ps-gold-input" required />
@@ -51,7 +58,15 @@ async function submit() {
 </template>

 <style scoped>
+.login-lang {
+  position: absolute;
+  top: max(12px, env(safe-area-inset-top));
+  right: 16px;
+  z-index: 2;
+}
+
 .login-page {
+  position: relative;
  height: 100%;
  min-height: 100dvh;
  overflow-y: auto;
--- a/apps/player/src/views/MatchDetailView.vue
+++ b/apps/player/src/views/MatchDetailView.vue
@@ -24,7 +24,8 @@ interface Market {
  id: string;
  marketType: string;
  period: string;
-  lineValue?: string;
+  lineValue?: string | number | null;
+  allowParlay?: boolean;
  selections: Selection[];
 }

@@ -212,6 +213,11 @@ function toggleSelection(sel: Selection, market: Market) {
    selectionName: sel.selectionName,
    odds: parseFloat(sel.odds),
    marketType: market.marketType,
+    lineValue:
+      market.lineValue != null && market.lineValue !== ''
+        ? parseFloat(String(market.lineValue))
+        : null,
+    allowParlay: market.allowParlay,
  });
 }

--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -6,16 +6,12 @@ import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
 import LocaleFlag from '../components/LocaleFlag.vue';
 import { useAuthStore } from '../stores/auth';
+import { useAppLocale } from '../composables/useAppLocale';

 const { t, locale } = useI18n();
 const router = useRouter();
 const auth = useAuthStore();
-
-const locales = [
-  { code: 'zh-CN', label: '中文' },
-  { code: 'en-US', label: 'EN' },
-  { code: 'ms-MY', label: 'BM' },
-] as const;
+const { locales, setLocale, initFromUser } = useAppLocale();

 const profile = ref<{
  username?: string;
@@ -25,12 +21,11 @@ const profile = ref<{
 onMounted(async () => {
  const { data } = await api.get('/player/profile');
  profile.value = data.data;
+  initFromUser(data.data?.locale);
 });

 async function changeLocale(code: string) {
-  locale.value = code;
-  localStorage.setItem('locale', code);
-  await api.post('/player/language', { locale: code });
+  await setLocale(code);
 }

 function logout() {
@@ -79,6 +74,19 @@ function logout() {
          </button>
        </div>
      </div>
+
+      <div class="settings-cell settings-cell--stack rules-cell">
+        <div class="cell-head">
+          <span class="cell-label">{{ t('profile.rules_title') }}</span>
+        </div>
+        <div class="rules-body">
+          <p>{{ t('profile.rules_p1') }}</p>
+          <p>{{ t('profile.rules_p2') }}</p>
+          <p>{{ t('profile.rules_p3') }}</p>
+          <p>{{ t('profile.rules_p4') }}</p>
+          <p>{{ t('profile.rules_p5') }}</p>
+        </div>
+      </div>
    </section>

    <button type="button" class="logout-btn" @click="logout">
@@ -236,4 +244,19 @@ function logout() {
 .logout-btn:active {
  background: rgba(255, 69, 58, 0.08);
 }
+
+.rules-body {
+  padding: 0 0 12px;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--text-muted);
+}
+
+.rules-body p {
+  margin: 0 0 8px;
+}
+
+.rules-body p:last-child {
+  margin-bottom: 0;
+}
 </style>
--- a/apps/player/vite.config.ts
+++ b/apps/player/vite.config.ts
@@ -7,6 +7,10 @@ export default defineConfig({
  resolve: {
    // 避免删除 src 内过期 .js 后仍优先请求 index.js 导致 404
    extensions: ['.ts', '.tsx', '.mjs', '.js', '.mts', '.jsx', '.json', '.vue'],
+    alias: {
+      // shared 的 dist 为 CommonJS，Vite 无法按命名导出加载；直连源码
+      '@thebet365/shared': resolve(__dirname, '../../packages/shared/src/index.ts'),
+    },
  },
  publicDir: resolve(__dirname, '../../packages/shared/public'),
  server: {