解决战斗界面小数点显示的问题

Build_God_Game/src/views/BattleView.vue

@@ -22,15 +22,29 @@ const isFighting = ref(false)
 const battleResult = ref<'win' | 'lose' | null>(null)
 const rewards = ref<{ type: string; itemName: string; count: number }[]>([])
 
-const playerHealthPercent = computed(() => {
+const formatBattleStat = (value: number) => Math.floor(value)
-  if (playerMaxHealth.value === 0) return 0
-  return (playerHealth.value / playerMaxHealth.value) * 100
-})
 
-const monsterHealthPercent = computed(() => {
+const toHealthPercent = (current: number, max: number) => {
-  if (monsterMaxHealth.value === 0) return 0
+  if (max <= 0) return 0
-  return (monsterHealth.value / monsterMaxHealth.value) * 100
+  const ratio = current / max
-})
+  return Math.min(100, Math.max(0, Math.round(ratio * 100)))
+}
+
+const playerHealthPercent = computed(() =>
+  toHealthPercent(playerHealth.value, playerMaxHealth.value)
+)
+
+const monsterHealthPercent = computed(() =>
+  toHealthPercent(monsterHealth.value, monsterMaxHealth.value)
+)
+
+const playerHealthDisplay = computed(
+  () => `${formatBattleStat(playerHealth.value)} / ${formatBattleStat(playerMaxHealth.value)}`
+)
+
+const monsterHealthDisplay = computed(
+  () => `${formatBattleStat(monsterHealth.value)} / ${formatBattleStat(monsterMaxHealth.value)}`
+)
 
 const currentCharacter = computed(() => characterStore.currentCharacter)
 const currentMonster = computed(() => monsterStore.currentMonster)
@@ -60,10 +74,10 @@ const startBattle = async () => {
   battleLog.value = []
   rewards.value = []
 
-  playerMaxHealth.value = currentCharacter.value.maxHP
+  playerMaxHealth.value = Math.floor(currentCharacter.value.maxHP)
-  playerHealth.value = currentCharacter.value.currentHP
+  playerHealth.value = Math.floor(currentCharacter.value.currentHP)
-  monsterMaxHealth.value = currentMonster.value.health
+  monsterMaxHealth.value = Math.floor(currentMonster.value.health)
-  monsterHealth.value = currentMonster.value.health
+  monsterHealth.value = Math.floor(currentMonster.value.health)
 
   const playerAttack = currentCharacter.value.attack
   const playerDefend = currentCharacter.value.defend
@@ -154,13 +168,13 @@ onMounted(async () => {
     await monsterStore.fetchMonster(monsterId.value)
     
     if (currentCharacter.value) {
-      playerMaxHealth.value = currentCharacter.value.maxHP
+      playerMaxHealth.value = Math.floor(currentCharacter.value.maxHP)
-      playerHealth.value = currentCharacter.value.currentHP
+      playerHealth.value = Math.floor(currentCharacter.value.currentHP)
     }
 
     if (currentMonster.value) {
-      monsterMaxHealth.value = currentMonster.value.health
+      monsterMaxHealth.value = Math.floor(currentMonster.value.health)
-      monsterHealth.value = currentMonster.value.health
+      monsterHealth.value = Math.floor(currentMonster.value.health)
     }
   }
 })
@@ -196,7 +210,7 @@ onUnmounted(() => {
             :color="monsterHealthPercent > 30 ? '#ef4444' : '#dc2626'"
           />
           <div class="health-text">
-            {{ monsterHealth }} / {{ monsterMaxHealth }}
+            {{ monsterHealthDisplay }}
           </div>
         </div>
 
@@ -215,7 +229,7 @@ onUnmounted(() => {
             :color="playerHealthPercent > 30 ? '#22c55e' : '#ef4444'"
           />
           <div class="health-text">
-            {{ playerHealth }} / {{ playerMaxHealth }}
+            {{ playerHealthDisplay }}
           </div>
         </div>
       </div>