feat(admin,api,player): 优胜赛配置、赛事管理重构与玩家端投注体验优化

管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。

API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。

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

apps/player/src/views/MyBetsView.vue

@@ -3,7 +3,10 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
+import BetStatsPanel from '../components/BetStatsPanel.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const { t } = useI18n();
 
@@ -13,15 +16,26 @@ const page = ref(1);
 const loading = ref(false);
 const initialLoading = ref(true);
 const hasMore = ref(true);
+const statusFilter = ref('');
 
 const sentinel = ref<HTMLElement | null>(null);
 let observer: IntersectionObserver | null = null;
 
+const FILTERS = [
+  { key: '', label: 'history.filter_all' },
+  { key: 'WON', label: 'history.filter_won' },
+  { key: 'LOST', label: 'history.filter_lost' },
+  { key: 'PENDING', label: 'history.filter_pending' },
+  { key: 'PUSH', label: 'history.filter_push' },
+];
+
 async function loadPage(p: number) {
   if (loading.value) return;
   loading.value = true;
   try {
-    const { data } = await api.get('/player/bets', { params: { page: p } });
+    const params: Record<string, unknown> = { page: p };
+    if (statusFilter.value) params.status = statusFilter.value;
+    const { data } = await api.get('/player/bets', { params });
     const result = data.data ?? { items: [], total: 0, pageSize: 20 };
     total.value = result.total ?? 0;
     const pageSize = result.pageSize ?? 20;
@@ -38,7 +52,7 @@ async function loadPage(p: number) {
   }
 }
 
-function reset() {
+async function reset() {
   items.value = [];
   total.value = 0;
   page.value = 1;
@@ -47,8 +61,18 @@ function reset() {
   loadPage(1);
 }
 
+function changeFilter(key: string) {
+  if (statusFilter.value === key) return;
+  statusFilter.value = key;
+  reset();
+}
+
 useOnLocaleChange(reset);
 
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadPage(1); },
+});
+
 onMounted(() => {
   observer = new IntersectionObserver(
     (entries) => {
@@ -56,7 +80,7 @@ onMounted(() => {
         loadPage(page.value + 1);
       }
     },
-    { rootMargin: '120px' },
+    { rootMargin: '200px' },
   );
   if (sentinel.value) observer.observe(sentinel.value);
 });
@@ -64,28 +88,59 @@ onMounted(() => {
 onUnmounted(() => {
   observer?.disconnect();
 });
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
 </script>
 
 <template>
   <div class="history-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
 
-    <div v-if="initialLoading" class="state">{{ t('bet.loading') }}</div>
+    <div v-if="initialLoading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
 
-    <template v-else-if="items.length">
-      <BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
+    <template v-else>
+      <BetStatsPanel :items="items" />
 
-      <div ref="sentinel" class="sentinel" />
-
-      <div v-if="loading" class="load-more-spinner">
-        <span class="spinner" />
+      <div class="filter-tabs">
+        <button
+          v-for="f in FILTERS"
+          :key="f.key"
+          type="button"
+          class="filter-tab"
+          :class="{ active: statusFilter === f.key }"
+          @click="changeFilter(f.key)"
+        >
+          {{ t(f.label) }}
+        </button>
       </div>
 
-      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
-        {{ t('history.no_more') }}
-      </div>
+      <template v-if="items.length">
+        <BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
+
+        <div ref="sentinel" class="sentinel" />
+
+        <div v-if="loading" class="load-more-spinner">
+          <GoldSpinner :size="24" />
+        </div>
+
+        <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+          {{ t('common.no_more') }}
+        </div>
+      </template>
+
+      <div v-else class="state">{{ t('history.empty') }}</div>
     </template>
-
-    <div v-else class="state">{{ t('history.empty') }}</div>
   </div>
 </template>
 
@@ -94,7 +149,48 @@ onUnmounted(() => {
   padding-bottom: 24px;
 }
 
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.filter-tabs::-webkit-scrollbar { display: none; }
+
+.filter-tab {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+}
+
 .state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
   text-align: center;
   color: var(--text-muted);
   padding: 56px 20px;
@@ -102,6 +198,10 @@ onUnmounted(() => {
   font-size: 14px;
 }
 
+.loading-text {
+  font-size: 13px;
+}
+
 .sentinel {
   height: 1px;
 }
@@ -112,20 +212,6 @@ onUnmounted(() => {
   padding: 20px 0 8px;
 }
 
-.spinner {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  border: 3px solid #2a2a2a;
-  border-top-color: var(--primary-light);
-  border-radius: 50%;
-  animation: spin 0.7s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .end-hint {
   text-align: center;
   font-size: 12px;