初始化足球投注平台 MVP Monorepo

包含 NestJS 后端、三端前端、Prisma 数据模型、结算引擎测试与 PRD 文档。

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

apps/player/src/layouts/MainLayout.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { RouterView, RouterLink, useRoute } from 'vue-router';
+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';
+
+const { t, locale } = useI18n();
+const auth = useAuthStore();
+const slip = useBetSlipStore();
+const route = useRoute();
+const showSlip = ref(false);
+
+const locales = [
+  { code: 'zh-CN', label: '中文' },
+  { code: 'en-US', label: 'EN' },
+  { code: 'ms-MY', label: 'BM' },
+];
+
+function setLocale(code: string) {
+  locale.value = code;
+  localStorage.setItem('locale', code);
+}
+</script>
+
+<template>
+  <div class="layout">
+    <header class="header">
+      <span class="logo">TheBet365</span>
+      <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>
+    </header>
+
+    <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>
+
+    <BetSlipDrawer v-model="showSlip" />
+  </div>
+</template>
+
+<style scoped>
+.layout { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 60px; }
+.header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 12px 16px; background: #1a2332; border-bottom: 1px solid var(--border);
+}
+.logo { font-weight: 800; color: var(--primary); font-size: 18px; }
+.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);
+  z-index: 100;
+}
+.bottom-nav a, .slip-btn {
+  flex: 1; text-align: center; padding: 10px 4px; font-size: 11px;
+  color: var(--text-muted); background: none; position: relative;
+}
+.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;
+}
+</style>