Merge pull request #12 from yruh/fix/gameSpeed-resource

fix: 同步 gameSpeed 倍率展示并修复移动端资源栏遮挡
2026-05-12 07:55:11 +08:00 · 2025-12-17 22:50:02 +08:00
parent cfcde0b024 690e6cbbf5
commit ebd7eb1405
6 changed files with 129 additions and 69 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -200,41 +200,49 @@
                <SidebarTrigger class="lg:hidden" data-tutorial="mobile-menu" />
              </div>

-              <!-- 资源显示 - PC端居中，移动端可折叠 -->
-              <div
-                class="resource-bar flex items-center gap-3 sm:gap-6 justify-center"
-                :class="resourceBarExpanded ? 'hidden' : 'overflow-x-auto'"
-              >
-                <div v-for="resourceType in resourceTypes" :key="resourceType.key" class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
-                  <ResourceIcon :type="resourceType.key" size="md" />
-                  <div class="min-w-0">
-                    <!-- 电力显示净产量和效率 -->
-                    <template v-if="resourceType.key === 'energy'">
-                      <p
-                        class="text-xs sm:text-sm font-medium truncate"
-                        :class="netEnergy >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"
-                      >
-                        {{ netEnergy >= 0 ? '+' : '' }}{{ formatNumber(netEnergy) }}
-                      </p>
-                      <p class="text-[10px] sm:text-xs text-muted-foreground truncate">
-                        {{ formatNumber(production?.energy || 0) }} / {{ formatNumber(energyConsumption) }}
-                      </p>
-                    </template>
-                    <!-- 其他资源统一显示：当前值/容量 -->
-                    <template v-else>
-                      <p
-                        class="text-xs sm:text-sm font-medium truncate"
-                        :class="getResourceColor(planet.resources[resourceType.key], capacity?.[resourceType.key] || Infinity)"
-                      >
-                        {{ formatNumber(planet.resources[resourceType.key]) }} / {{ formatNumber(capacity?.[resourceType.key] || 0) }}
-                      </p>
-                      <p class="text-[10px] sm:text-xs text-muted-foreground truncate">
-                        +{{ formatNumber(Math.round((production?.[resourceType.key] || 0) / 60)) }}/{{ t('resources.perMinute') }}
-                      </p>
-                    </template>
-                  </div>
-                </div>
-              </div>
+	              <!-- 资源显示 - PC端居中，移动端可折叠 -->
+	              <!-- 关键：min-w-0 + overflow-hidden，避免横向滚动内容溢出覆盖左侧菜单按钮 -->
+	              <div class="min-w-0 overflow-hidden">
+	                <div
+	                  class="resource-bar flex items-center gap-3 sm:gap-6 justify-start sm:justify-center"
+	                  :class="resourceBarExpanded ? 'hidden' : 'overflow-x-auto'"
+	                >
+	                  <div
+	                    v-for="resourceType in resourceTypes"
+	                    :key="resourceType.key"
+	                    class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0"
+	                  >
+	                    <ResourceIcon :type="resourceType.key" size="md" />
+	                    <div class="min-w-0">
+	                      <!-- 电力显示净产量和效率 -->
+	                      <template v-if="resourceType.key === 'energy'">
+	                        <p
+	                          class="text-xs sm:text-sm font-medium truncate"
+	                          :class="netEnergy >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"
+	                        >
+	                          {{ netEnergy >= 0 ? '+' : '' }}{{ formatNumber(netEnergy) }}
+	                        </p>
+	                        <p class="text-[10px] sm:text-xs text-muted-foreground truncate">
+	                          {{ formatNumber(production?.energy || 0) }} / {{ formatNumber(energyConsumption) }}
+	                        </p>
+	                      </template>
+	                      <!-- 其他资源统一显示：当前值/容量 -->
+	                      <template v-else>
+	                        <p
+	                          class="text-xs sm:text-sm font-medium truncate"
+	                          :class="getResourceColor(planet.resources[resourceType.key], capacity?.[resourceType.key] || Infinity)"
+	                        >
+	                          {{ formatNumber(planet.resources[resourceType.key]) }} /
+	                          {{ formatNumber(capacity?.[resourceType.key] || 0) }}
+	                        </p>
+	                        <p class="text-[10px] sm:text-xs text-muted-foreground truncate">
+	                          +{{ formatNumber(Math.round((production?.[resourceType.key] || 0) / 60)) }}/{{ t('resources.perMinute') }}
+	                        </p>
+	                      </template>
+	                    </div>
+	                  </div>
+	                </div>
+	              </div>

              <!-- 右侧：展开按钮（仅移动端） + 状态 -->
              <div class="flex items-center gap-2 sm:gap-3 flex-shrink-0 justify-end">
@@ -407,6 +415,7 @@
  import { DIPLOMATIC_CONFIG } from '@/config/gameConfig'
  import type { VersionInfo } from '@/utils/versionCheck'
  import { formatNumber, getResourceColor } from '@/utils/format'
+  import { getGameLoopIntervalMs, scaleNumber, scaleResources } from '@/utils/speed'
  import {
    Moon,
    Sun,
@@ -1209,7 +1218,7 @@
      clearInterval(gameLoop)
    }
    // 根据游戏速度计算间隔时间
-    const interval = 1000 / (gameStore.gameSpeed || 1)
+    const interval = getGameLoopIntervalMs(gameStore.gameSpeed)
    // 启动新的游戏循环
    gameLoop = setInterval(() => {
      updateGame()
@@ -1410,11 +1419,12 @@
    if (!planet.value) return null
    const now = Date.now()
    const bonuses = officerLogic.calculateActiveBonuses(gameStore.player.officers, now)
-    return resourceLogic.calculateResourceProduction(planet.value, {
+    const base = resourceLogic.calculateResourceProduction(planet.value, {
      resourceProductionBonus: bonuses.resourceProductionBonus,
      darkMatterProductionBonus: bonuses.darkMatterProductionBonus,
      energyProductionBonus: bonuses.energyProductionBonus
    })
+    return scaleResources(base, gameStore.gameSpeed)
  })

  const capacity = computed(() => {
@@ -1427,7 +1437,7 @@
  // 电力消耗
  const energyConsumption = computed(() => {
    if (!planet.value) return 0
-    return resourceLogic.calculateEnergyConsumption(planet.value)
+    return scaleNumber(resourceLogic.calculateEnergyConsumption(planet.value), gameStore.gameSpeed)
  })

  // 净电力（产量 - 消耗）
--- a/src/logic/publicLogic.ts
+++ b/src/logic/publicLogic.ts
@@ -8,6 +8,7 @@ import type { Planet, Resources, Officer, BuildingConfig, TechnologyConfig } fro
 import { OfficerType } from '@/types/game'
 import * as officerLogic from '@/logic/officerLogic'
 import * as resourceLogic from '@/logic/resourceLogic'
+import { scaleResources } from '@/utils/speed'

 /**
 * 获取特定等级的升级条件
@@ -93,11 +94,12 @@ export const checkRequirements = (
 * @param officers 玩家的军官对象
 * @returns 每小时各类资源的产量
 */
-export const getResourceProduction = (planet: Planet, officers: Record<OfficerType, Officer>): Resources => {
+export const getResourceProduction = (planet: Planet, officers: Record<OfficerType, Officer>, resourceSpeed: number = 1): Resources => {
  // 计算当前激活的军官加成
  const bonuses = officerLogic.calculateActiveBonuses(officers, Date.now())
  // 根据建筑等级和军官加成计算资源产量
-  return resourceLogic.calculateResourceProduction(planet, bonuses)
+  const base = resourceLogic.calculateResourceProduction(planet, bonuses)
+  return scaleResources(base, resourceSpeed)
 }

 /**
--- a/src/logic/resourceLogic.ts
+++ b/src/logic/resourceLogic.ts
@@ -249,7 +249,8 @@ export interface ConsumptionDetail {
 export const calculateProductionBreakdown = (
  planet: Planet,
  officers: Record<OfficerType, Officer>,
-  currentTime: number
+  currentTime: number,
+  resourceSpeed: number = 1
 ): ProductionBreakdown => {
  const metalMineLevel = planet.buildings[BuildingType.MetalMine] || 0
  const crystalMineLevel = planet.buildings[BuildingType.CrystalMine] || 0
@@ -435,42 +436,56 @@ export const calculateProductionBreakdown = (

  const energyFinal = energyBase * (1 + totalEnergyBonus / 100)

+  const speed = resourceSpeed
+
+  const scaleBonuses = (bonuses: ProductionBonus[]) =>
+    bonuses.map(bonus => ({
+      ...bonus,
+      value: bonus.value * speed
+    }))
+
+  const scaleSources = (sources?: ProductionSource[]) =>
+    sources?.map(source => ({
+      ...source,
+      production: source.production * speed
+    }))
+
  return {
    metal: {
-      baseProduction: metalBase,
+      baseProduction: metalBase * speed,
      buildingLevel: metalMineLevel,
      buildingName: 'buildings.metalMine',
-      bonuses: metalBonuses,
-      finalProduction: metalFinal
+      bonuses: scaleBonuses(metalBonuses),
+      finalProduction: metalFinal * speed
    },
    crystal: {
-      baseProduction: crystalBase,
+      baseProduction: crystalBase * speed,
      buildingLevel: crystalMineLevel,
      buildingName: 'buildings.crystalMine',
-      bonuses: crystalBonuses,
-      finalProduction: crystalFinal
+      bonuses: scaleBonuses(crystalBonuses),
+      finalProduction: crystalFinal * speed
    },
    deuterium: {
-      baseProduction: deuteriumBase,
+      baseProduction: deuteriumBase * speed,
      buildingLevel: deuteriumSynthesizerLevel,
      buildingName: 'buildings.deuteriumSynthesizer',
-      bonuses: deuteriumBonuses,
-      finalProduction: deuteriumFinal
+      bonuses: scaleBonuses(deuteriumBonuses),
+      finalProduction: deuteriumFinal * speed
    },
    darkMatter: {
-      baseProduction: darkMatterBase,
+      baseProduction: darkMatterBase * speed,
      buildingLevel: darkMatterCollectorLevel,
      buildingName: 'buildings.darkMatterCollector',
-      bonuses: darkMatterBonuses,
-      finalProduction: darkMatterFinal
+      bonuses: scaleBonuses(darkMatterBonuses),
+      finalProduction: darkMatterFinal * speed
    },
    energy: {
-      baseProduction: energyBase,
+      baseProduction: energyBase * speed,
      buildingLevel: solarPlantLevel,
      buildingName: 'buildings.solarPlant',
-      bonuses: energyBonuses,
-      finalProduction: energyFinal,
-      sources: energySources
+      bonuses: scaleBonuses(energyBonuses),
+      finalProduction: energyFinal * speed,
+      sources: scaleSources(energySources)
    }
  }
 }
@@ -478,7 +493,7 @@ export const calculateProductionBreakdown = (
 /**
 * 计算能量消耗详细breakdown
 */
-export const calculateConsumptionBreakdown = (planet: Planet): ConsumptionBreakdown => {
+export const calculateConsumptionBreakdown = (planet: Planet, resourceSpeed: number = 1): ConsumptionBreakdown => {
  const metalMineLevel = planet.buildings[BuildingType.MetalMine] || 0
  const crystalMineLevel = planet.buildings[BuildingType.CrystalMine] || 0
  const deuteriumSynthesizerLevel = planet.buildings[BuildingType.DeuteriumSynthesizer] || 0
@@ -487,22 +502,24 @@ export const calculateConsumptionBreakdown = (planet: Planet): ConsumptionBreakd
  const crystalConsumption = crystalMineLevel * 10 * Math.pow(1.1, crystalMineLevel)
  const deuteriumConsumption = deuteriumSynthesizerLevel * 15 * Math.pow(1.1, deuteriumSynthesizerLevel)

+  const speed = resourceSpeed
+
  return {
    metalMine: {
      buildingLevel: metalMineLevel,
      buildingName: 'buildings.metalMine',
-      consumption: metalConsumption
+      consumption: metalConsumption * speed
    },
    crystalMine: {
      buildingLevel: crystalMineLevel,
      buildingName: 'buildings.crystalMine',
-      consumption: crystalConsumption
+      consumption: crystalConsumption * speed
    },
    deuteriumSynthesizer: {
      buildingLevel: deuteriumSynthesizerLevel,
      buildingName: 'buildings.deuteriumSynthesizer',
-      consumption: deuteriumConsumption
+      consumption: deuteriumConsumption * speed
    },
-    total: metalConsumption + crystalConsumption + deuteriumConsumption
+    total: (metalConsumption + crystalConsumption + deuteriumConsumption) * speed
  }
 }
--- a/src/utils/speed.ts
+++ b/src/utils/speed.ts
@@ -0,0 +1,28 @@
+import type { Resources } from '@/types/game'
+
+/**
+ * 按倍率缩放一个数值
+ * - 支持合法的 0（例如用于“暂停”）
+ */
+export const scaleNumber = (value: number, multiplier: number): number => value * multiplier
+
+/**
+ * 按倍率缩放 Resources（常用于“每小时产量/消耗”等展示）
+ * - 支持合法的 0（例如用于“暂停”）
+ */
+export const scaleResources = (resources: Resources, multiplier: number): Resources => ({
+  metal: resources.metal * multiplier,
+  crystal: resources.crystal * multiplier,
+  deuterium: resources.deuterium * multiplier,
+  darkMatter: resources.darkMatter * multiplier,
+  energy: resources.energy * multiplier
+})
+
+/**
+ * 计算游戏循环的间隔（毫秒）
+ * - multiplier <= 0 或非有限值时，回退到 baseMs，避免除 0
+ */
+export const getGameLoopIntervalMs = (multiplier: number, baseMs: number = 1000): number => {
+  if (!Number.isFinite(multiplier) || multiplier <= 0) return baseMs
+  return baseMs / multiplier
+}
--- a/src/views/OverviewView.vue
+++ b/src/views/OverviewView.vue
@@ -201,6 +201,7 @@
  import { Badge } from '@/components/ui/badge'
  import ResourceIcon from '@/components/ResourceIcon.vue'
  import { formatNumber, getResourceColor } from '@/utils/format'
+  import { scaleNumber } from '@/utils/speed'
  import type { Planet } from '@/types/game'
  import * as publicLogic from '@/logic/publicLogic'
  import * as resourceLogic from '@/logic/resourceLogic'
@@ -209,25 +210,27 @@
  const { t } = useI18n()
  const { SHIPS } = useGameConfig()
  const planet = computed(() => gameStore.currentPlanet)
-  const production = computed(() => (planet.value ? publicLogic.getResourceProduction(planet.value, gameStore.player.officers) : null))
+  const production = computed(() =>
+    planet.value ? publicLogic.getResourceProduction(planet.value, gameStore.player.officers, gameStore.gameSpeed) : null
+  )
  const capacity = computed(() => (planet.value ? publicLogic.getResourceCapacity(planet.value, gameStore.player.officers) : null))

  // 能量消耗
  const energyConsumption = computed(() => {
    if (!planet.value) return 0
-    return resourceLogic.calculateEnergyConsumption(planet.value)
+    return scaleNumber(resourceLogic.calculateEnergyConsumption(planet.value), gameStore.gameSpeed)
  })

  // 资源产量详细breakdown
  const productionBreakdown = computed(() => {
    if (!planet.value) return null
-    return resourceLogic.calculateProductionBreakdown(planet.value, gameStore.player.officers, Date.now())
+    return resourceLogic.calculateProductionBreakdown(planet.value, gameStore.player.officers, Date.now(), gameStore.gameSpeed)
  })

  // 资源消耗详细breakdown
  const consumptionBreakdown = computed(() => {
    if (!planet.value) return null
-    return resourceLogic.calculateConsumptionBreakdown(planet.value)
+    return resourceLogic.calculateConsumptionBreakdown(planet.value, gameStore.gameSpeed)
  })

  // 资源类型配置
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -65,10 +65,10 @@
            <h3 class="font-medium">{{ t('settings.gameSpeed') }}</h3>
            <p class="text-sm text-muted-foreground">{{ t('settings.gameSpeedDesc') }}</p>
          </div>
-          <div class="flex items-center gap-2 sm:gap-4 w-full sm:w-auto">
-            <div class="flex items-center gap-2 flex-1 sm:flex-initial">
+	          <div class="flex items-center gap-2 sm:gap-4 w-full sm:w-auto">
+	            <div class="flex items-center gap-2 flex-1 sm:flex-initial">
              <Button @click="decreaseSpeed" variant="outline" size="sm" :disabled="gameStore.gameSpeed <= 0.5">-</Button>
-              <span class="min-w-[60px] text-center font-medium">{{ gameStore.gameSpeed || 1 }}x</span>
+              <span class="min-w-[60px] text-center font-medium">{{ gameStore.gameSpeed }}x</span>
              <Button @click="increaseSpeed" variant="outline" size="sm" :disabled="gameStore.gameSpeed >= 10">+</Button>
            </div>
            <Button @click="resetSpeed" variant="ghost" size="sm">{{ t('settings.reset') }}</Button>