migrate

Author: DoroWolf

src/App.vue

@@ -17,7 +17,7 @@
               :aria-label="getSquareLabel(getActualRow(displayRow - 1), getActualCol(displayCol - 1))">
 
               <img class="square-background base" draggable="false"
-                :src="isWhiteSquare(getActualRow(displayRow - 1), getActualCol(displayCol - 1)) ? './texture/board/board_white.png' : './texture/board/board_black.png'"
+                :src="isWhiteSquare(getActualRow(displayRow - 1), getActualCol(displayCol - 1)) ? getAssetUrl('texture/board/board_white.png') : getAssetUrl('texture/board/board_black.png')"
                 alt="" />
 
               <img v-if="getOverlayTexture(getActualRow(displayRow - 1), getActualCol(displayCol - 1))"
@@ -99,6 +99,11 @@ import Promotion from './components/Promotion.vue'
 import Sidebar from './components/Sidebar.vue'
 import GameSetup from './components/GameSetup.vue'
 
+// --- 动态导入 src/assets 资源的辅助函数 ---
+const getAssetUrl = (path: string): string => {
+  return new URL(`../assets/${path}`, import.meta.url).href
+}
+
 // --- 存储 Key 常量 ---
 const STORAGE_KEYS = {
   SOUND_ENABLED: 'chess_sound_enabled',
@@ -146,12 +151,12 @@ const getDisplayedRank = (displayRow: number): string => {
 }
 
 const sounds = {
-  move: new Audio('./sound/Move.ogg'),
-  capture: new Audio('./sound/Capture.ogg'),
-  check: new Audio('./sound/Check.ogg'),
-  victory: new Audio('./sound/Victory.ogg'),
-  defeat: new Audio('./sound/Defeat.ogg'),
-  draw: new Audio('./sound/Draw.ogg'),
+  move: new Audio(getAssetUrl('sound/Move.ogg')),
+  capture: new Audio(getAssetUrl('sound/Capture.ogg')),
+  check: new Audio(getAssetUrl('sound/Check.ogg')),
+  victory: new Audio(getAssetUrl('sound/Victory.ogg')),
+  defeat: new Audio(getAssetUrl('sound/Defeat.ogg')),
+  draw: new Audio(getAssetUrl('sound/Draw.ogg')),
 }
 
 interface GameSetupConfig {
@@ -394,22 +399,22 @@ const isSelectedSquare = (row: number, col: number): boolean => {
 const getPieceImage = (piece: Piece): string => {
   if (piece.type === 'king') {
     if (isDraw.value) {
-      return `./texture/pieces/king_draw_${piece.color}.png`
+      return getAssetUrl(`texture/pieces/king_draw_${piece.color}.png`)
     }
     if (hasResigned.value && piece.color === hasResigned.value) {
-      return `./texture/pieces/king_checkmate_${piece.color}.png`
+      return getAssetUrl(`texture/pieces/king_checkmate_${piece.color}.png`)
     }
     if (timeoutWinner.value && piece.color !== timeoutWinner.value) {
-      return `./texture/pieces/king_checkmate_${piece.color}.png`
+      return getAssetUrl(`texture/pieces/king_checkmate_${piece.color}.png`)
     }
     if (isCheckmate(board.value, piece.color)) {
-      return `./texture/pieces/king_checkmate_${piece.color}.png`
+      return getAssetUrl(`texture/pieces/king_checkmate_${piece.color}.png`)
     }
     if (isKingInCheck(board.value, piece.color)) {
-      return `./texture/pieces/king_check_${piece.color}.png`
+      return getAssetUrl(`texture/pieces/king_check_${piece.color}.png`)
     }
   }
-  return `./texture/pieces/${piece.type}_${piece.color}.png`
+  return getAssetUrl(`texture/pieces/${piece.type}_${piece.color}.png`)
 }
 
 const isGameOver = computed(() => {
@@ -595,21 +600,21 @@ const applyClockAfterMove = (moverColor: Color, nextTurn: Color, nextBoard: Boar
 
 const getOverlayTexture = (row: number, col: number): string | null => {
   if (isSelectedSquare(row, col)) {
-    return './texture/board/board_hover.png'
+    return getAssetUrl('texture/board/board_hover.png')
   }
 
   const move = possibleMoves.value.find((candidate) => candidate.row === row && candidate.col === col)
 
   if (move) {
     if (isDragging.value && hoverSquare.value?.row === row && hoverSquare.value?.col === col) {
-      return './texture/board/board_hover.png'
+      return getAssetUrl('texture/board/board_hover.png')
     }
 
     const targetPiece = board.value[row]?.[col] ?? null
     if (targetPiece !== null) {
-      return './texture/board/board_capture.png'
+      return getAssetUrl('texture/board/board_capture.png')
     }
-    return './texture/board/board_placeable.png'
+    return getAssetUrl('texture/board/board_placeable.png')
   }
 
   return null