feat(admin,api,player): 结算预览分页、统计图表与返水限额

完善结算计算与预览 API（含后端分页），加强管理端结算/返水/权限，并优化玩家端投注单与队徽展示。

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

apps/player/src/views/HomeView.vue

@@ -6,7 +6,7 @@ import vsImg from '../assets/images/vs.png';
 import cardBg from '../assets/images/卡片.png';
 import BannerCarousel from '../components/BannerCarousel.vue';
 import { usePlayerHome } from '../composables/usePlayerHome';
-import { teamFlagUrl } from '../utils/teamFlag';
+import TeamEmblem from '../components/TeamEmblem.vue';
 
 const matchCardBg = `url(${cardBg})`;
 const { t, locale } = useI18n();
@@ -28,13 +28,6 @@ function formatKickoff(startTime: string) {
   });
 }
 
-function homeFlag(match: (typeof hotMatches.value)[number]) {
-  return teamFlagUrl(match.homeTeamCode, match.homeTeamName);
-}
-
-function awayFlag(match: (typeof hotMatches.value)[number]) {
-  return teamFlagUrl(match.awayTeamCode, match.awayTeamName);
-}
 </script>
 
 <template>
@@ -53,8 +46,12 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
         <div class="match-time">{{ formatKickoff(match.startTime) }}</div>
       </div>
       <div class="match-flags" aria-hidden="true">
-        <img v-if="homeFlag(match)" :src="homeFlag(match)" alt="" class="flag" />
-        <span v-else class="flag-ph">⚽</span>
+        <TeamEmblem
+          size="md"
+          :team-code="match.homeTeamCode"
+          :team-name="match.homeTeamName"
+          :logo-url="match.homeTeamLogoUrl"
+        />
         <div class="vs-arena">
           <svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
             <defs>
@@ -80,8 +77,12 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
           <span class="hz-beam" aria-hidden="true" />
           <img :src="vsImg" alt="" class="vs-img" />
         </div>
-        <img v-if="awayFlag(match)" :src="awayFlag(match)" alt="" class="flag" />
-        <span v-else class="flag-ph">⚽</span>
+        <TeamEmblem
+          size="md"
+          :team-code="match.awayTeamCode"
+          :team-name="match.awayTeamName"
+          :logo-url="match.awayTeamLogoUrl"
+        />
       </div>
     </div>
 
@@ -155,32 +156,15 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: 6px;
-}
-
-.flag {
-  width: 40px;
-  height: 28px;
-  object-fit: cover;
-  border-radius: 3px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-}
-
-.flag-ph {
-  width: 40px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  opacity: 0.45;
+  gap: 4px;
+  max-width: 46%;
 }
 
 .vs-arena {
   position: relative;
   flex-shrink: 0;
-  width: 72px;
-  height: 58px;
+  width: 64px;
+  height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -240,7 +224,7 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
 .vs-img {
   position: relative;
   z-index: 0;
-  width: 58px;
+  width: 48px;
   height: auto;
   object-fit: contain;
   animation: vs-glow 2.4s ease-in-out infinite;

apps/player/src/views/MatchDetailView.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { useBetSlipStore } from '../stores/betSlip';
-import { teamFlagUrl } from '../utils/teamFlag';
+import TeamEmblem from '../components/TeamEmblem.vue';
 import { DETAIL_MARKET_TYPES, MARKET_I18N_KEY } from '../utils/marketCatalog';
 import MatchBetGuide from '../components/match-detail/MatchBetGuide.vue';
 import MarketTypeTile from '../components/match-detail/MarketTypeTile.vue';
@@ -75,13 +75,6 @@ const marketsByType = computed(() => {
   return map;
 });
 
-const homeFlag = computed(() =>
-  teamFlagUrl(match.value?.homeTeamCode, match.value?.homeTeamName, match.value?.homeTeamLogoUrl),
-);
-const awayFlag = computed(() =>
-  teamFlagUrl(match.value?.awayTeamCode, match.value?.awayTeamName, match.value?.awayTeamLogoUrl),
-);
-
 function marketPromoLabel(marketType: string) {
   const m = marketsByType.value.get(marketType);
   return m?.promoLabel?.trim() || '';
@@ -249,11 +242,12 @@ function openBetSlipDrawer() {
   slip.openDrawer();
 }
 
-/** 当前玩法是否已选入投注单（单关、仅一项） */
+/** 当前玩法是否已有选项加入投注单 */
 function hasSlipPickForMarket(marketType: string) {
-  if (!match.value || slip.mode !== 'single' || slip.items.length !== 1) return false;
-  const item = slip.items[0];
-  return item.matchId === match.value.id && item.marketType === marketType;
+  if (!match.value || slip.mode !== 'single') return false;
+  return slip.items.some(
+    (item) => item.matchId === match.value!.id && item.marketType === marketType,
+  );
 }
 </script>
 
@@ -284,8 +278,12 @@ function hasSlipPickForMarket(marketType: string) {
         <div class="hero-teams">
           <!-- home -->
           <div class="hero-team">
-            <img v-if="homeFlag" :src="homeFlag" alt="" class="hero-flag" />
-            <span v-else class="hero-flag-ph">⚽</span>
+            <TeamEmblem
+              size="lg"
+              :team-code="match.homeTeamCode"
+              :team-name="match.homeTeamName"
+              :logo-url="match.homeTeamLogoUrl"
+            />
             <span class="hero-name">{{ match.homeTeamName }}</span>
           </div>
 
@@ -318,8 +316,12 @@ function hasSlipPickForMarket(marketType: string) {
 
           <!-- away -->
           <div class="hero-team">
-            <img v-if="awayFlag" :src="awayFlag" alt="" class="hero-flag" />
-            <span v-else class="hero-flag-ph">⚽</span>
+            <TeamEmblem
+              size="lg"
+              :team-code="match.awayTeamCode"
+              :team-name="match.awayTeamName"
+              :logo-url="match.awayTeamLogoUrl"
+            />
             <span class="hero-name">{{ match.awayTeamName }}</span>
           </div>
         </div>
@@ -487,24 +489,6 @@ function hasSlipPickForMarket(marketType: string) {
   min-width: 0;
 }
 
-.hero-flag {
-  width: 54px;
-  height: 36px;
-  object-fit: cover;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
-}
-
-.hero-flag-ph {
-  width: 54px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22px;
-  opacity: 0.45;
-}
-
 .hero-name {
   font-size: 13px;
   font-weight: 800;