fix(game): 修复底部塔面板不可见问题，改用React层实现，并用AI素材替换Graphics像素块

game/towers/TowerBase.ts

@@ -1,13 +1,15 @@
 import type Phaser from 'phaser'
 import { GameManager } from '../GameManager'
-import { TILE_SIZE, HUD_HEIGHT, COFFEE_COST, STAMINA_MAX, STAMINA_REGEN } from '../constants'
+import { HUD_HEIGHT, COFFEE_COST, STAMINA_MAX, STAMINA_REGEN } from '../constants'
+import { getCellSize } from '../mapRenderer'
 import type { EnemyBase } from '../enemies/EnemyBase'
 
 export abstract class TowerBase {
   protected scene: Phaser.Scene
   public gridX: number
   public gridY: number
-  protected sprite!: Phaser.GameObjects.Graphics
+  protected imageSprite!: Phaser.GameObjects.Image
+  protected spriteKey: string
   protected staminaBar!: Phaser.GameObjects.Graphics
   private frozenOverlay!: Phaser.GameObjects.Graphics
 
@@ -23,9 +25,11 @@ export abstract class TowerBase {
   protected staminaRegen: number = STAMINA_REGEN
   protected isActive: boolean = true
 
-  // Pixel center position
+  // Pixel center position (computed from actual cell size)
   protected px: number
   protected py: number
+  protected cellW: number
+  protected cellH: number
 
   constructor(
     scene: Phaser.Scene,
@@ -34,7 +38,8 @@ export abstract class TowerBase {
     cost: number,
     attackRange: number,
     attackDamage: number,
-    attackSpeed: number
+    attackSpeed: number,
+    spriteKey: string
   ) {
     this.scene = scene
     this.gridX = gridX
@@ -43,41 +48,44 @@ export abstract class TowerBase {
     this.attackRange = attackRange
     this.attackDamage = attackDamage
     this.attackSpeed = attackSpeed
+    this.spriteKey = spriteKey
 
-    this.px = gridX * TILE_SIZE + TILE_SIZE / 2
-    this.py = gridY * TILE_SIZE + TILE_SIZE / 2 + HUD_HEIGHT
+    const { cellW, cellH } = getCellSize()
+    this.cellW = cellW
+    this.cellH = cellH
+    this.px = gridX * cellW + cellW / 2
+    this.py = HUD_HEIGHT + gridY * cellH + cellH / 2
+
+    // 用 AI 图片作为精灵
+    this.imageSprite = scene.add.image(this.px, this.py, spriteKey)
+    const scale = Math.min(cellW, cellH) / 128 * 0.85
+    this.imageSprite.setScale(scale)
+    this.imageSprite.setDepth(10)
 
-    this.sprite = scene.add.graphics()
     this.staminaBar = scene.add.graphics()
     this.frozenOverlay = scene.add.graphics()
-
-    this.drawSprite()
     this.updateStaminaBar()
   }
 
   update(delta: number, enemies: EnemyBase[]): void {
-    // 禁锢状态：跳过攻击，显示灰色覆盖
     if (this.isFrozen) {
       this.drawFrozenOverlay()
       return
     }
-    // 解除禁锢时清除覆盖层
     this.clearFrozenOverlay()
     this.attackCooldown -= delta
 
-    if (this.stamina <= 0) {
-      this.isActive = false
-    }
+    if (this.stamina <= 0) this.isActive = false
 
     if (!this.isActive) {
-      this.stamina = Math.min(
-        this.maxStamina,
-        this.stamina + (this.staminaRegen * delta) / 1000
-      )
+      this.stamina = Math.min(this.maxStamina, this.stamina + (this.staminaRegen * delta) / 1000)
       if (this.stamina > 20) this.isActive = true
       this.updateStaminaBar()
+      // 摸鱼时图片半透明
+      this.imageSprite.setAlpha(0.5)
       return
     }
+    this.imageSprite.setAlpha(1)
 
     const target = this.findTarget(enemies)
     if (target && this.attackCooldown <= 0) {
@@ -86,29 +94,23 @@ export abstract class TowerBase {
       this.attackCooldown = 1000 / this.attackSpeed
       this.updateStaminaBar()
     } else if (!target) {
-      this.stamina = Math.min(
-        this.maxStamina,
-        this.stamina + (this.staminaRegen * delta) / 1000
-      )
+      this.stamina = Math.min(this.maxStamina, this.stamina + (this.staminaRegen * delta) / 1000)
       this.updateStaminaBar()
     }
   }
 
   protected findTarget(enemies: EnemyBase[]): EnemyBase | null {
-    const rangePx = this.attackRange * TILE_SIZE
+    const rangePx = this.attackRange * this.cellW
     let best: EnemyBase | null = null
     let bestProgress = -1
-
     for (const e of enemies) {
       if (e.isDead) continue
-      const dx = e.sprite.x - this.px
-      const dy = e.sprite.y - this.py
+      const dx = e.x - this.px
+      const dy = e.y - this.py
       const dist = Math.sqrt(dx * dx + dy * dy)
       if (dist <= rangePx) {
-        // 优先选取路径进度最深的（模拟血量最多/威胁最大）
-        const progress = e.pathProgress
-        if (progress > bestProgress) {
-          bestProgress = progress
+        if (e.pathProgress > bestProgress) {
+          bestProgress = e.pathProgress
           best = e
         }
       }
@@ -118,15 +120,16 @@ export abstract class TowerBase {
 
   protected updateStaminaBar(): void {
     this.staminaBar.clear()
-    const bw = 40
-    const bh = 4
+    const bw = this.cellW * 0.7
+    const bh = 5
     const bx = this.px - bw / 2
-    const by = this.py + TILE_SIZE / 2 - 8
-
-    this.staminaBar.fillStyle(0x374151, 1)
+    const by = this.py + this.cellH / 2 - 10
+    this.staminaBar.fillStyle(0x1f2937, 1)
     this.staminaBar.fillRect(bx, by, bw, bh)
-    this.staminaBar.fillStyle(0xf59e0b, 1)
-    this.staminaBar.fillRect(bx, by, bw * (this.stamina / this.maxStamina), bh)
+    const ratio = this.stamina / this.maxStamina
+    const color = ratio > 0.5 ? 0xf59e0b : ratio > 0.25 ? 0xfb923c : 0xef4444
+    this.staminaBar.fillStyle(color, 1)
+    this.staminaBar.fillRect(bx, by, bw * ratio, bh)
     this.staminaBar.setDepth(11)
   }
 
@@ -135,6 +138,7 @@ export abstract class TowerBase {
     if (manager.spendHC(COFFEE_COST)) {
       this.stamina = this.maxStamina
       this.isActive = true
+      this.imageSprite.setAlpha(1)
       this.updateStaminaBar()
       return true
     }
@@ -145,30 +149,25 @@ export abstract class TowerBase {
     return { x: this.px, y: this.py }
   }
 
-  /** 绘制禁锢状态灰色覆盖层 */
   protected drawFrozenOverlay(): void {
     this.frozenOverlay.clear()
-    const half = TILE_SIZE / 2
-    this.frozenOverlay.fillStyle(0x6b7280, 0.6)
-    this.frozenOverlay.fillRect(
-      this.px - half,
-      this.py - half,
-      TILE_SIZE,
-      TILE_SIZE
-    )
+    const hw = this.cellW / 2
+    const hh = this.cellH / 2
+    this.frozenOverlay.fillStyle(0x6b7280, 0.55)
+    this.frozenOverlay.fillRect(this.px - hw, this.py - hh, this.cellW, this.cellH)
     this.frozenOverlay.setDepth(13)
+    this.imageSprite.setTint(0x9ca3af)
   }
 
-  /** 清除禁锢覆盖层 */
   protected clearFrozenOverlay(): void {
     this.frozenOverlay.clear()
+    this.imageSprite.clearTint()
   }
 
   abstract attack(target: EnemyBase): void
-  abstract drawSprite(): void
 
   destroy(): void {
-    this.sprite?.destroy()
+    this.imageSprite?.destroy()
     this.staminaBar?.destroy()
     this.frozenOverlay?.destroy()
   }