feat(player): 完善 H5 投注端与 API 演示数据

- 球赛/串关/优胜冠军、赛事详情、历史投注与个人资料编辑
- 固定顶栏、公告与底栏，仅内容区滚动
- 底部导航与站点 favicon 使用 logo，登录页精简
- API 种子、冠军盘与历史注单增强

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/player/src/layouts/MainLayout.vue

@@ -4,13 +4,19 @@ import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth';
 import { useBetSlipStore } from '../stores/betSlip';
 import BetSlipDrawer from '../components/BetSlipDrawer.vue';
-import { ref } from 'vue';
+import CashBalanceChip from '../components/CashBalanceChip.vue';
+import UserAvatarMenu from '../components/UserAvatarMenu.vue';
+import LocaleFlag from '../components/LocaleFlag.vue';
+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 auth = useAuthStore();
-const slip = useBetSlipStore();
 const route = useRoute();
-const showSlip = ref(false);
+const slip = useBetSlipStore();
 
 const locales = [
   { code: 'zh-CN', label: '中文' },
@@ -18,6 +24,11 @@ const locales = [
   { 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);
@@ -29,56 +40,164 @@ function setLocale(code: string) {
     <header class="header">
       <img src="/logo.png" alt="TheBet365" class="logo" />
       <div class="header-actions">
-        <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">{{ l.label }}</option>
-        </select>
-        <span class="balance">{{ auth.user?.username }}</span>
+        <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>
+        <CashBalanceChip v-if="auth.user" />
+        <UserAvatarMenu v-if="auth.user" />
       </div>
     </header>
 
+    <div v-if="showAnnouncement" class="announce-strip">
+      <AnnouncementMarquee :items="announcements" embedded />
+    </div>
+
     <main class="main">
       <RouterView />
     </main>
 
-    <nav class="bottom-nav">
-      <RouterLink to="/" :class="{ active: route.path === '/' }">{{ t('nav.home') }}</RouterLink>
-      <RouterLink to="/football" :class="{ active: route.path.startsWith('/football') || route.path.startsWith('/match') }">{{ t('nav.football') }}</RouterLink>
-      <button class="slip-btn" @click="showSlip = true">
-        {{ t('bet.bet_slip') }}
-        <span v-if="slip.count" class="badge">{{ slip.count }}</span>
-      </button>
-      <RouterLink to="/bets" :class="{ active: route.path === '/bets' }">{{ t('nav.my_bets') }}</RouterLink>
-      <RouterLink to="/profile" :class="{ active: route.path === '/profile' }">{{ t('nav.profile') }}</RouterLink>
+    <nav class="bottom-nav" aria-label="Main">
+      <RouterLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
+        <BottomNavIcon name="home" />
+        <span class="nav-label">{{ t('nav.home') }}</span>
+      </RouterLink>
+      <RouterLink
+        to="/bet"
+        class="nav-item"
+        :class="{ active: route.path === '/bet' || route.path.startsWith('/match') }"
+      >
+        <BottomNavIcon name="bet" />
+        <span class="nav-label">{{ t('nav.bet') }}</span>
+      </RouterLink>
+      <RouterLink to="/bets" class="nav-item" :class="{ active: route.path === '/bets' }">
+        <BottomNavIcon name="history" />
+        <span class="nav-label">{{ t('nav.bet_history') }}</span>
+      </RouterLink>
+      <RouterLink to="/wallet" class="nav-item" :class="{ active: route.path === '/wallet' }">
+        <BottomNavIcon name="wallet" />
+        <span class="nav-label">{{ t('nav.wallet') }}</span>
+      </RouterLink>
+      <RouterLink to="/profile" class="nav-item" :class="{ active: route.path.startsWith('/profile') }">
+        <BottomNavIcon name="profile" />
+        <span class="nav-label">{{ t('nav.profile') }}</span>
+      </RouterLink>
     </nav>
 
-    <BetSlipDrawer v-model="showSlip" />
+    <BetSlipDrawer v-model="slip.drawerOpen" />
   </div>
 </template>
 
 <style scoped>
-.layout { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 60px; }
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100dvh;
+  overflow: hidden;
+  background: var(--bg-body);
+}
 .header {
+  flex-shrink: 0;
   display: flex; justify-content: space-between; align-items: center;
-  padding: 12px 16px; background: #1a2332; border-bottom: 1px solid var(--border);
+  padding: 8px 12px;
+  background: linear-gradient(180deg, #222 0%, #1A1A1A 100%);
+  border-bottom: 1px solid var(--border);
+  z-index: 110;
+}
+.logo {
+  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 {
+  display: flex;
+  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;
+}
+.announce-strip {
+  flex-shrink: 0;
+  z-index: 105;
+  border-bottom: 1px solid var(--border);
+}
+
+.main {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 12px 16px 16px;
 }
-.logo { height: 48px; width: auto; display: block; }
-.header-actions { display: flex; gap: 12px; align-items: center; }
-.lang-select { background: var(--bg-card); color: #fff; border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; width: auto; }
-.balance { font-size: 13px; color: var(--text-muted); }
-.main { flex: 1; padding: 12px; }
 .bottom-nav {
-  position: fixed; bottom: 0; left: 0; right: 0;
-  display: flex; background: #1a2332; border-top: 1px solid var(--border);
+  display: flex;
+  background: linear-gradient(0deg, #111 0%, #1A1A1A 100%);
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
   z-index: 100;
+  padding-bottom: env(safe-area-inset-bottom, 0);
 }
-.bottom-nav a, .slip-btn {
-  flex: 1; text-align: center; padding: 10px 4px; font-size: 11px;
-  color: var(--text-muted); background: none; position: relative;
+.nav-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 6px 2px 8px;
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  position: relative;
+  transition: color 0.2s;
+  line-height: 1.2;
+  min-width: 0;
 }
-.bottom-nav a.active, .slip-btn.active { color: var(--primary); }
-.badge {
-  position: absolute; top: 2px; right: 20%;
-  background: var(--danger); color: #fff; font-size: 10px;
-  padding: 1px 5px; border-radius: 10px;
+
+.nav-label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 2px;
+}
+
+.nav-item.active {
+  color: var(--primary-light);
+  font-weight: 800;
+}
+
+.nav-item.active :deep(.nav-icon) {
+  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
+}
+
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 22%;
+  right: 22%;
+  height: 2px;
+  background: var(--primary);
+  border-radius: 0 0 4px 4px;
 }
 </style>