feat: 重构战报弹窗与模拟器视图，优化UI与逻辑

重构BattleReportDialog和BattleSimulatorView相关静态资源，替换旧版JS/CSS文件，提升界面一致性和交互体验。新增和优化空状态、滚动区域等通用UI组件，移除部分冗余composable，完善多语言内容。引入导弹逻辑，补充版本检测工具，提升整体代码结构和可维护性。

src/components/ItemDetailView.vue

@@ -15,23 +15,37 @@
             <TableHead v-if="type === 'building' && showProductionColumn" class="text-center">{{ t('buildings.production') }}</TableHead>
             <TableHead v-if="type === 'building' && showConsumptionColumn" class="text-center">{{ t('buildings.consumption') }}</TableHead>
             <TableHead v-if="type === 'building' && showCapacityColumn" class="text-center">{{ t('buildings.storageCapacity') }}</TableHead>
-            <TableHead v-if="type === 'building' && showFleetStorageColumn" class="text-center">{{ t('buildings.fleetStorage') }}</TableHead>
-            <TableHead v-if="type === 'building' && showBuildQueueColumn" class="text-center">{{ t('buildings.buildQueueBonus') }}</TableHead>
+            <TableHead v-if="type === 'building' && showFleetStorageColumn" class="text-center">
+              {{ t('buildings.fleetStorage') }}
+            </TableHead>
+            <TableHead v-if="type === 'building' && showBuildQueueColumn" class="text-center">
+              {{ t('buildings.buildQueueBonus') }}
+            </TableHead>
             <TableHead v-if="type === 'building' && showSpaceColumn" class="text-center">{{ t('buildings.spaceBonus') }}</TableHead>
             <TableHead v-if="type === 'building' && showMissileColumn" class="text-center">{{ t('buildings.missileCapacity') }}</TableHead>
-            <TableHead v-if="type === 'building' && showBuildSpeedColumn" class="text-center">{{ t('buildings.buildSpeedBonus') }}</TableHead>
-            <TableHead v-if="type === 'building' && showResearchSpeedColumn" class="text-center">{{ t('buildings.researchSpeedBonus') }}</TableHead>
+            <TableHead v-if="type === 'building' && showBuildSpeedColumn" class="text-center">
+              {{ t('buildings.buildSpeedBonus') }}
+            </TableHead>
+            <TableHead v-if="type === 'building' && showResearchSpeedColumn" class="text-center">
+              {{ t('buildings.researchSpeedBonus') }}
+            </TableHead>
             <!-- 科技相关列 -->
             <TableHead v-if="type === 'technology' && showAttackBonusColumn" class="text-center">{{ t('research.attackBonus') }}</TableHead>
             <TableHead v-if="type === 'technology' && showShieldBonusColumn" class="text-center">{{ t('research.shieldBonus') }}</TableHead>
             <TableHead v-if="type === 'technology' && showArmorBonusColumn" class="text-center">{{ t('research.armorBonus') }}</TableHead>
             <TableHead v-if="type === 'technology' && showSpyLevelColumn" class="text-center">{{ t('research.spyLevel') }}</TableHead>
-            <TableHead v-if="type === 'technology' && showFleetStorageColumn" class="text-center">{{ t('buildings.fleetStorage') }}</TableHead>
-            <TableHead v-if="type === 'technology' && showResearchQueueColumn" class="text-center">{{ t('research.researchQueueBonus') }}</TableHead>
+            <TableHead v-if="type === 'technology' && showFleetStorageColumn" class="text-center">
+              {{ t('buildings.fleetStorage') }}
+            </TableHead>
+            <TableHead v-if="type === 'technology' && showResearchQueueColumn" class="text-center">
+              {{ t('research.researchQueueBonus') }}
+            </TableHead>
             <TableHead v-if="type === 'technology' && showColonySlotsColumn" class="text-center">{{ t('research.colonySlots') }}</TableHead>
             <TableHead v-if="type === 'technology' && showSpaceColumn" class="text-center">{{ t('buildings.spaceBonus') }}</TableHead>
             <TableHead v-if="type === 'technology' && showSpeedBonusColumn" class="text-center">{{ t('research.speedBonus') }}</TableHead>
-            <TableHead v-if="type === 'technology' && showResearchSpeedColumn" class="text-center">{{ t('buildings.researchSpeedBonus') }}</TableHead>
+            <TableHead v-if="type === 'technology' && showResearchSpeedColumn" class="text-center">
+              {{ t('buildings.researchSpeedBonus') }}
+            </TableHead>
             <TableHead class="text-center">{{ t('player.points') }}</TableHead>
           </TableRow>
         </TableHeader>
@@ -78,7 +92,8 @@
             </TableCell>
             <TableCell v-if="type === 'building' && showFleetStorageColumn" class="text-center text-sm">
               <span v-if="getLevelData(level).fleetStorage > 0" class="text-blue-600 dark:text-blue-400">
-                +<NumberWithTooltip :value="getLevelData(level).fleetStorage" />
+                +
+                <NumberWithTooltip :value="getLevelData(level).fleetStorage" />
               </span>
               <span v-else>-</span>
             </TableCell>
@@ -87,7 +102,8 @@
             </TableCell>
             <TableCell v-if="type === 'building' && showSpaceColumn" class="text-center text-sm">
               <span v-if="getLevelData(level).spaceBonus > 0" class="text-green-600 dark:text-green-400">
-                +<NumberWithTooltip :value="getLevelData(level).spaceBonus" />
+                +
+                <NumberWithTooltip :value="getLevelData(level).spaceBonus" />
               </span>
               <span v-else>-</span>
             </TableCell>
@@ -95,8 +111,12 @@
               <span class="text-orange-600 dark:text-orange-400">+10</span>
             </TableCell>
             <TableCell v-if="type === 'building' && showBuildSpeedColumn" class="text-center text-sm">
-              <span v-if="itemType === 'roboticsFactory'" class="text-cyan-600 dark:text-cyan-400">+{{ getLevelData(level).buildSpeedBonus * 100 }}%</span>
-              <span v-else-if="itemType === 'naniteFactory'" class="text-cyan-600 dark:text-cyan-400">+{{ getLevelData(level).buildSpeedBonus * 100 }}%</span>
+              <span v-if="itemType === 'roboticsFactory'" class="text-cyan-600 dark:text-cyan-400">
+                +{{ getLevelData(level).buildSpeedBonus * 100 }}%
+              </span>
+              <span v-else-if="itemType === 'naniteFactory'" class="text-cyan-600 dark:text-cyan-400">
+                +{{ getLevelData(level).buildSpeedBonus * 100 }}%
+              </span>
             </TableCell>
             <TableCell v-if="type === 'building' && showResearchSpeedColumn" class="text-center text-sm">
               <span class="text-indigo-600 dark:text-indigo-400">+{{ (getLevelData(level).researchSpeedBonus - 1) * 100 }}%</span>
@@ -115,7 +135,10 @@
               <span class="text-purple-600 dark:text-purple-400">+{{ level }}</span>
             </TableCell>
             <TableCell v-if="type === 'technology' && showFleetStorageColumn" class="text-center text-sm">
-              <span class="text-blue-600 dark:text-blue-400">+<NumberWithTooltip :value="level * 500" /></span>
+              <span class="text-blue-600 dark:text-blue-400">
+                +
+                <NumberWithTooltip :value="level * 500" />
+              </span>
             </TableCell>
             <TableCell v-if="type === 'technology' && showResearchQueueColumn" class="text-center text-sm">
               <span class="text-purple-600 dark:text-purple-400">+1</span>
@@ -124,7 +147,7 @@
               <span class="text-green-600 dark:text-green-400">+1</span>
             </TableCell>
             <TableCell v-if="type === 'technology' && showSpaceColumn" class="text-center text-sm">
-              <span class="text-green-600 dark:text-green-400">+5 {{ t('research.forAllPlanets') }}</span>
+              <span class="text-green-600 dark:text-green-400">+30 {{ t('research.forAllPlanets') }}</span>
             </TableCell>
             <TableCell v-if="type === 'technology' && showSpeedBonusColumn" class="text-center text-sm">
               <span class="text-yellow-600 dark:text-yellow-400">+{{ level * 10 }}%</span>
@@ -275,7 +298,12 @@
           <CardTitle class="text-sm">{{ t(`${typeKey}.buildCost`) }}</CardTitle>
         </CardHeader>
         <CardContent class="space-y-2">
-          <div v-for="resourceType in costResourceTypes" :key="resourceType.key" v-show="unitCost[resourceType.key] > 0" class="flex items-center justify-between text-sm">
+          <div
+            v-for="resourceType in costResourceTypes"
+            :key="resourceType.key"
+            v-show="unitCost[resourceType.key] > 0"
+            class="flex items-center justify-between text-sm"
+          >
             <span class="text-muted-foreground">{{ t(`resources.${resourceType.key}`) }}:</span>
             <span class="font-medium"><NumberWithTooltip :value="unitCost[resourceType.key]" /></span>
           </div>
@@ -311,9 +339,17 @@
           <div class="space-y-2">
             <p class="text-sm text-muted-foreground">{{ t(`${typeKey}.totalCost`) }}:</p>
             <div class="space-y-1 text-sm">
-              <div v-for="resourceType in costResourceTypes" :key="resourceType.key" class="flex justify-between">
-                <span>{{ t(`resources.${resourceType.key}`) }}:</span>
-                <span class="font-medium"><NumberWithTooltip :value="batchCost[resourceType.key]" /></span>
+              <div class="flex justify-between">
+                <span>{{ t('resources.metal') }}:</span>
+                <span class="font-medium"><NumberWithTooltip :value="batchCost.metal" /></span>
+              </div>
+              <div class="flex justify-between">
+                <span>{{ t('resources.crystal') }}:</span>
+                <span class="font-medium"><NumberWithTooltip :value="batchCost.crystal" /></span>
+              </div>
+              <div class="flex justify-between">
+                <span>{{ t('resources.deuterium') }}:</span>
+                <span class="font-medium"><NumberWithTooltip :value="batchCost.deuterium" /></span>
               </div>
             </div>
           </div>
@@ -654,9 +690,9 @@
       } else if (buildingType === 'shipyard') {
         fleetStorage = 1000 * level
       } else if (buildingType === 'terraformer') {
-        spaceBonus = 5
+        spaceBonus = 30
       } else if (buildingType === 'lunarBase') {
-        spaceBonus = 5
+        spaceBonus = 30
       } else if (buildingType === 'roboticsFactory') {
         buildSpeedBonus = level
       } else if (buildingType === 'naniteFactory') {
@@ -685,7 +721,18 @@
       }
 
       const points = pointsLogic.calculateTechnologyPoints(techType, level - 1, level)
-      return { cost, time, production: 0, consumption: 0, points, capacity: 0, fleetStorage: 0, spaceBonus: 0, buildSpeedBonus: 0, researchSpeedBonus }
+      return {
+        cost,
+        time,
+        production: 0,
+        consumption: 0,
+        points,
+        capacity: 0,
+        fleetStorage: 0,
+        spaceBonus: 0,
+        buildSpeedBonus: 0,
+        researchSpeedBonus
+      }
     }
   }
 

src/components/UpdateDialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <Dialog :open="open" @update:open="$emit('update:open', $event)">
+    <DialogScrollContent class="max-w-2xl max-h-[80vh] flex flex-col">
+      <DialogHeader class="flex-shrink-0">
+        <DialogTitle>{{ t('settings.newVersionAvailable', { version: versionInfo?.version || '' }) }}</DialogTitle>
+        <DialogDescription>{{ t('settings.updateAvailable') }}</DialogDescription>
+      </DialogHeader>
+
+      <div class="flex-1 overflow-y-auto min-h-0 mt-4 pr-2">
+        <div class="prose prose-sm dark:prose-invert max-w-none" v-html="renderedMarkdown"></div>
+      </div>
+
+      <DialogFooter class="flex gap-2 flex-shrink-0 mt-4">
+        <Button variant="outline" @click="$emit('update:open', false)">
+          {{ t('common.cancel') }}
+        </Button>
+        <Button @click="handleDownload">
+          <Download class="mr-2 h-4 w-4" />
+          {{ t('settings.download') }}
+        </Button>
+      </DialogFooter>
+    </DialogScrollContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { marked } from 'marked'
+  import { useI18n } from '@/composables/useI18n'
+  import { Dialog, DialogScrollContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+  import { Button } from '@/components/ui/button'
+  import { Download } from 'lucide-vue-next'
+  import type { VersionInfo } from '@/utils/versionCheck'
+
+  const props = defineProps<{
+    open: boolean
+    versionInfo: VersionInfo | null
+  }>()
+
+  defineEmits<{
+    'update:open': [value: boolean]
+  }>()
+
+  const { t } = useI18n()
+
+  const renderedMarkdown = computed(() => {
+    if (!props.versionInfo?.releaseNotes) return ''
+    return marked(props.versionInfo.releaseNotes)
+  })
+
+  const handleDownload = () => {
+    if (props.versionInfo?.downloadUrl) {
+      window.open(props.versionInfo.downloadUrl, '_blank')
+    }
+  }
+</script>
+
+<style scoped>
+  :deep(.prose) {
+    color: hsl(var(--foreground));
+  }
+
+  :deep(.prose h1) {
+    font-size: 1.5em;
+    font-weight: 700;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+  }
+
+  :deep(.prose h2) {
+    font-size: 1.25em;
+    font-weight: 600;
+    margin-top: 0.8em;
+    margin-bottom: 0.4em;
+  }
+
+  :deep(.prose h3) {
+    font-size: 1.1em;
+    font-weight: 600;
+    margin-top: 0.6em;
+    margin-bottom: 0.3em;
+  }
+
+  :deep(.prose p) {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  :deep(.prose ul) {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    padding-left: 1.5em;
+  }
+
+  :deep(.prose li) {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+  }
+
+  :deep(.prose code) {
+    background: hsl(var(--muted));
+    padding: 0.2em 0.4em;
+    border-radius: 0.25rem;
+    font-size: 0.875em;
+  }
+
+  :deep(.prose pre) {
+    background: hsl(var(--muted));
+    padding: 1em;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  :deep(.prose a) {
+    color: hsl(var(--primary));
+    text-decoration: underline;
+  }
+</style>

src/components/ui/dialog/DialogContent.vue

@@ -6,7 +6,7 @@
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-2xl',
           props.class
         )
       "

src/components/ui/dialog/ScrollableDialogContent.vue

@@ -6,7 +6,7 @@
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 w-[calc(100vw-3rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 sm:w-auto flex flex-col p-0',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 w-[calc(100vw-3rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 sm:w-auto sm:min-w-[764px] flex flex-col p-0',
           containerClass
         )
       "

src/components/ui/empty/Empty.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    data-slot="empty"
+    :class="
+      cn(
+        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/empty/EmptyContent.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="empty-content" :class="cn('flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/empty/EmptyDescription.vue

@@ -0,0 +1,19 @@
+<template>
+  <p
+    data-slot="empty-description"
+    :class="
+      cn('text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', $attrs.class ?? '')
+    "
+  >
+    <slot />
+  </p>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/empty/EmptyHeader.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="empty-header" :class="cn('flex max-w-sm flex-col items-center gap-2 text-center', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/empty/EmptyMedia.vue

@@ -0,0 +1,17 @@
+<template>
+  <div data-slot="empty-icon" :data-variant="variant" :class="cn(emptyMediaVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import type { EmptyMediaVariants } from '.'
+  import { cn } from '@/lib/utils'
+  import { emptyMediaVariants } from '.'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+    variant?: EmptyMediaVariants['variant']
+  }>()
+</script>

src/components/ui/empty/EmptyTitle.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="empty-title" :class="cn('text-lg font-medium tracking-tight', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/empty/index.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Empty } from './Empty.vue'
+export { default as EmptyContent } from './EmptyContent.vue'
+export { default as EmptyDescription } from './EmptyDescription.vue'
+export { default as EmptyHeader } from './EmptyHeader.vue'
+export { default as EmptyMedia } from './EmptyMedia.vue'
+export { default as EmptyTitle } from './EmptyTitle.vue'
+
+export const emptyMediaVariants = cva('mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+  variants: {
+    variant: {
+      default: 'bg-transparent',
+      icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+})
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>

src/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,25 @@
+<template>
+  <ScrollAreaRoot data-slot="scroll-area" v-bind="delegatedProps" :class="cn('relative', props.class)">
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
+
+<script setup lang="ts">
+  import type { ScrollAreaRootProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { reactiveOmit } from '@vueuse/core'
+  import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+  import ScrollBar from './ScrollBar.vue'
+
+  const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+  const delegatedProps = reactiveOmit(props, 'class')
+</script>

src/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,30 @@
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+        props.class
+      )
+    "
+  >
+    <ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaScrollbar>
+</template>
+
+<script setup lang="ts">
+  import type { ScrollAreaScrollbarProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { reactiveOmit } from '@vueuse/core'
+  import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+
+  const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+    orientation: 'vertical'
+  })
+
+  const delegatedProps = reactiveOmit(props, 'class')
+</script>

src/components/ui/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'

src/components/ui/sonner/Sonner.vue

@@ -37,6 +37,7 @@
   import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'
   import { Toaster as Sonner } from 'vue-sonner'
   import { cn } from '@/lib/utils'
+  import 'vue-sonner/style.css'
 
   const props = defineProps<ToasterProps>()
 </script>