perf(assets): Player/Admin 静态图改用 WebP，vs 保留 PNG

Player 端 banner/bg/card/h5bg 等改为 webp 并移除旧 png；Admin 登录背景改 webp；vs 对阵图仍用 png。

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

apps/player/src/components/BannerCarousel.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-import defaultBannerImg from '../assets/images/banner.png';
+import defaultBannerImg from '../assets/images/banner.webp';
 
 export interface BannerItem {
   id?: string;

apps/player/src/components/LeagueAccordionItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import MatchBetCard from './MatchBetCard.vue';
-import saishiImg from '../assets/images/saishi.png';
-import cardBg from '../assets/images/card-bg.png';
+import saishiImg from '../assets/images/saishi.webp';
+import cardBg from '../assets/images/card-bg.webp';
 
 const matchCardBg = `url(${cardBg})`;
 

apps/player/src/components/outright/OutrightEventSection.vue

@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import OutrightOptionCard from './OutrightOptionCard.vue';
-import saishiImg from '../../assets/images/saishi.png';
-import cardBg from '../../assets/images/card-bg.png';
+import saishiImg from '../../assets/images/saishi.webp';
+import cardBg from '../../assets/images/card-bg.webp';
 
 const matchCardBg = `url(${cardBg})`;
 

apps/player/src/components/parlay/ParlayPanel.vue

@@ -9,7 +9,7 @@ import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS, PARLAY_MARKET_GROUPS } from
 import BetGuideHelp from '../BetGuideHelp.vue';
 import GoldSpinner from '../GoldSpinner.vue';
 import TeamEmblem from '../TeamEmblem.vue';
-import cardBg from '../../assets/images/card-bg.png';
+import cardBg from '../../assets/images/card-bg.webp';
 import { matchPhaseLabel, type MatchPhase } from '../../utils/matchPhase';
 
 const matchCardBg = `url(${cardBg})`;

apps/player/src/constants/defaultBanner.ts

@@ -1,7 +1,7 @@
 import type { BannerItem } from '../components/BannerCarousel.vue';
 
-/** 默认轮播首图：apps/player/src/assets/images/banner.png */
-import defaultBannerImg from '../assets/images/banner.png';
+/** 默认轮播首图：apps/player/src/assets/images/banner.webp */
+import defaultBannerImg from '../assets/images/banner.webp';
 
 const FALLBACK_BANNER_URL = '/uploads/banners/welcome.svg';
 

apps/player/src/styles.css

@@ -197,7 +197,7 @@ body {
   background-image:
     radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 55%),
     linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.88)),
-    url('./assets/images/bg.png');
+    url('./assets/images/bg.webp');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;

apps/player/src/views/HomeView.vue

@@ -3,7 +3,7 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import emptyMatchesImg from '../assets/images/empty-matches.svg';
 import vsImg from '../assets/images/vs.png';
-import cardBg from '../assets/images/card-bg.png';
+import cardBg from '../assets/images/card-bg.webp';
 import BannerCarousel from '../components/BannerCarousel.vue';
 import { usePlayerHome } from '../composables/usePlayerHome';
 import TeamEmblem from '../components/TeamEmblem.vue';

apps/player/src/views/LoginView.vue

@@ -8,7 +8,7 @@ import { useAppLocale } from '../composables/useAppLocale';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import PhoneCountrySelect from '../components/PhoneCountrySelect.vue';
 import RobotVerify from '../components/RobotVerify.vue';
-import loginBg from '../assets/images/h5bg.png';
+import loginBg from '../assets/images/h5bg.webp';
 
 type LoginMode = 'account' | 'phone';
 

apps/player/src/views/ProfileView.vue

@@ -9,7 +9,7 @@ import { useAuthStore } from '../stores/auth';
 import { useAppLocale } from '../composables/useAppLocale';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
-import walletBg from '../assets/images/wallet-bg.png';
+import walletBg from '../assets/images/wallet-bg.webp';
 
 const { t, locale } = useI18n();
 const router = useRouter();

apps/player/src/views/RegisterView.vue

@@ -8,7 +8,7 @@ import { useAppLocale } from '../composables/useAppLocale';
 import { useSmsCode } from '../composables/useSmsCode';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import PhoneCountrySelect from '../components/PhoneCountrySelect.vue';
-import loginBg from '../assets/images/h5bg.png';
+import loginBg from '../assets/images/h5bg.webp';
 
 const { t, locale } = useI18n();
 const { initFromUser } = useAppLocale();

apps/player/src/vite-env.d.ts

@@ -21,3 +21,8 @@ declare module '*.png' {
   const src: string;
   export default src;
 }
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}