fix promotion ui

Author: DoroWolf

src/components/BoardPanel.vue

@@ -42,6 +42,7 @@
         </template>
         <div v-if="promotionPending" class="promotion-overlay" @click="$emit('cancel-promotion')"></div>
         <Promotion v-if="promotionPending" :color="promotionPending.color" :style="promotionStyle ?? undefined"
+          :is-flipped="isFlipped"
           @select="(piece: string) => $emit('apply-promotion', piece)" />
       </div>
 

src/components/Promotion.vue

@@ -18,17 +18,19 @@ import { promotionImg } from '../assets/resourcePaths'
 
 const props = defineProps<{ 
   color: 'white' | 'black'; 
-  style?: CSSProperties 
+  style?: CSSProperties;
+  isFlipped?: boolean;
 }>()
 
 defineEmits<{
   (e: 'select', piece: string): void
 }>()
 
 const pieces = computed(() => {
-  return props.color === 'white' 
+  const basePieces = props.color === 'white' 
     ? ['queen', 'knight', 'rook', 'bishop'] 
     : ['bishop', 'rook', 'knight', 'queen']
+  return props.isFlipped ? [...basePieces].reverse() : basePieces
 })
 
 // 如果父级传入的 style 包含位置，这里做一个简单的容错和整合

src/composables/useGameState.ts

@@ -1,4 +1,4 @@
-import { ref, computed, onUnmounted, type CSSProperties, nextTick } from 'vue'
+import { ref, computed, onUnmounted, watch, type CSSProperties, nextTick } from 'vue'
 import type { Board, Color, Piece, Move } from '../models/chess'
 import {
   createInitialBoard,
@@ -733,6 +733,13 @@ export function useGameState(
     }
   }
 
+  // 棋盘翻转时，重新计算升变 UI 位置
+  watch(isFlipped, () => {
+    if (promotionPending.value) {
+      computePromotionStyle(promotionPending.value.to.row, promotionPending.value.to.col)
+    }
+  })
+
   const applyPromotion = (newType: string) => {
     if (!promotionPending.value) return
     const { from, to } = promotionPending.value