feat: 新增NPC与外交逻辑，优化UI组件结构

重构并精简了部分UI组件，移除冗余弹窗与详情组件，新增NPC相关逻辑（npcBehaviorLogic、npcGrowthLogic、npcStore等）及外交逻辑（diplomaticLogic、DiplomacyView）。完善分页、标签、复选框等通用UI组件。优化战报弹窗，调整README下载链接为相对路径，修复部分国际化内容。

src/views/OfficersView.vue

@@ -5,14 +5,18 @@
     <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 sm:gap-6">
       <Card v-for="officerType in Object.values(OfficerType)" :key="officerType">
         <CardHeader>
-          <div class="flex justify-between items-start gap-2">
-            <div class="min-w-0 flex-1">
-              <CardTitle class="text-lg sm:text-xl">{{ OFFICERS[officerType].name }}</CardTitle>
-              <CardDescription class="text-xs sm:text-sm">{{ OFFICERS[officerType].description }}</CardDescription>
+          <div class="mb-2">
+            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2">
+              <CardTitle class="text-sm sm:text-base lg:text-lg order-2 sm:order-1">{{ OFFICERS[officerType].name }}</CardTitle>
+              <Badge v-if="isOfficerActive(officerType)" variant="default" class="text-xs whitespace-nowrap self-start order-1 sm:order-2">
+                {{ t('officersView.activated') }}
+              </Badge>
+              <Badge v-else variant="outline" class="text-xs whitespace-nowrap self-start order-1 sm:order-2">
+                {{ t('officersView.inactive') }}
+              </Badge>
             </div>
-            <Badge v-if="isOfficerActive(officerType)" variant="default" class="text-xs">{{ t('officersView.activated') }}</Badge>
-            <Badge v-else variant="outline" class="text-xs">{{ t('officersView.inactive') }}</Badge>
           </div>
+          <CardDescription class="text-xs sm:text-sm">{{ OFFICERS[officerType].description }}</CardDescription>
         </CardHeader>
         <CardContent class="space-y-4">
           <!-- 状态信息 -->
@@ -30,44 +34,21 @@
           <div class="space-y-2">
             <p class="text-sm font-medium text-muted-foreground">{{ t('officersView.recruitCost') }} (7{{ t('officersView.days') }}):</p>
             <div class="space-y-1.5">
-              <div class="flex items-center gap-2">
-                <ResourceIcon type="metal" size="sm" />
-                <span class="text-xs">{{ t('resources.metal') }}:</span>
+              <div
+                v-for="resourceType in costResourceTypes"
+                :key="resourceType.key"
+                v-show="resourceType.key !== 'darkMatter' || OFFICERS[officerType].cost.darkMatter > 0"
+                class="flex items-center gap-2"
+              >
+                <ResourceIcon :type="resourceType.key" size="sm" />
+                <span class="text-xs">{{ t(`resources.${resourceType.key}`) }}:</span>
                 <span
                   class="font-medium text-sm"
-                  :class="planet ? getResourceCostColor(planet.resources.metal, OFFICERS[officerType].cost.metal) : ''"
+                  :class="
+                    planet ? getResourceCostColor(planet.resources[resourceType.key], OFFICERS[officerType].cost[resourceType.key]) : ''
+                  "
                 >
-                  {{ formatNumber(OFFICERS[officerType].cost.metal) }}
-                </span>
-              </div>
-              <div class="flex items-center gap-2">
-                <ResourceIcon type="crystal" size="sm" />
-                <span class="text-xs">{{ t('resources.crystal') }}:</span>
-                <span
-                  class="font-medium text-sm"
-                  :class="planet ? getResourceCostColor(planet.resources.crystal, OFFICERS[officerType].cost.crystal) : ''"
-                >
-                  {{ formatNumber(OFFICERS[officerType].cost.crystal) }}
-                </span>
-              </div>
-              <div class="flex items-center gap-2">
-                <ResourceIcon type="deuterium" size="sm" />
-                <span class="text-xs">{{ t('resources.deuterium') }}:</span>
-                <span
-                  class="font-medium text-sm"
-                  :class="planet ? getResourceCostColor(planet.resources.deuterium, OFFICERS[officerType].cost.deuterium) : ''"
-                >
-                  {{ formatNumber(OFFICERS[officerType].cost.deuterium) }}
-                </span>
-              </div>
-              <div v-if="OFFICERS[officerType].cost.darkMatter > 0" class="flex items-center gap-2">
-                <ResourceIcon type="darkMatter" size="sm" />
-                <span class="text-xs">{{ t('resources.darkMatter') }}:</span>
-                <span
-                  class="font-medium text-sm"
-                  :class="planet ? getResourceCostColor(planet.resources.darkMatter, OFFICERS[officerType].cost.darkMatter) : ''"
-                >
-                  {{ formatNumber(OFFICERS[officerType].cost.darkMatter) }}
+                  {{ formatNumber(OFFICERS[officerType].cost[resourceType.key]) }}
                 </span>
               </div>
             </div>
@@ -121,14 +102,19 @@
           </div>
 
           <!-- 操作按钮 -->
-          <div class="flex gap-2">
-            <Button v-if="!isOfficerActive(officerType)" @click="handleHire(officerType)" :disabled="!canHire(officerType)" class="flex-1">
+          <div class="flex flex-col sm:flex-row gap-2">
+            <Button v-if="!isOfficerActive(officerType)" @click="handleHire(officerType)" :disabled="!canHire(officerType)" class="w-full">
               {{ t('officersView.hire') }} (7{{ t('officersView.days') }})
             </Button>
-            <Button v-if="isOfficerActive(officerType)" @click="handleRenew(officerType)" :disabled="!canHire(officerType)" class="flex-1">
+            <Button
+              v-if="isOfficerActive(officerType)"
+              @click="handleRenew(officerType)"
+              :disabled="!canHire(officerType)"
+              class="w-full sm:flex-1"
+            >
               {{ t('officersView.renew') }} (7{{ t('officersView.days') }})
             </Button>
-            <Button v-if="isOfficerActive(officerType)" @click="handleDismiss(officerType)" variant="outline" size="sm">
+            <Button v-if="isOfficerActive(officerType)" @click="handleDismiss(officerType)" variant="outline" class="w-full sm:w-auto">
               {{ t('officersView.dismiss') }}
             </Button>
           </div>
@@ -136,9 +122,36 @@
       </Card>
     </div>
 
+    <!-- 提示对话框 -->
+    <AlertDialog :open="alertDialogOpen" @update:open="alertDialogOpen = $event">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{{ alertDialogTitle }}</AlertDialogTitle>
+          <AlertDialogDescription class="whitespace-pre-line">
+            {{ alertDialogMessage }}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction>{{ t('common.confirm') }}</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+
     <!-- 确认对话框 -->
-    <AlertDialog ref="alertDialog" />
-    <ConfirmDialog ref="confirmDialog" />
+    <AlertDialog :open="confirmDialogOpen" @update:open="confirmDialogOpen = $event">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{{ confirmDialogTitle }}</AlertDialogTitle>
+          <AlertDialogDescription class="whitespace-pre-line">
+            {{ confirmDialogMessage }}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{{ t('common.cancel') }}</AlertDialogCancel>
+          <AlertDialogAction @click="handleConfirmDialogConfirm">{{ t('common.confirm') }}</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   </div>
 </template>
 
@@ -150,8 +163,16 @@
   import { Button } from '@/components/ui/button'
   import { Badge } from '@/components/ui/badge'
   import ResourceIcon from '@/components/ResourceIcon.vue'
-  import AlertDialog from '@/components/AlertDialog.vue'
-  import ConfirmDialog from '@/components/ConfirmDialog.vue'
+  import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle
+  } from '@/components/ui/alert-dialog'
   import { formatNumber, formatTime, formatDate, getResourceCostColor } from '@/utils/format'
   import * as officerLogic from '@/logic/officerLogic'
   import * as resourceLogic from '@/logic/resourceLogic'
@@ -162,8 +183,32 @@
   const { OFFICERS } = useGameConfig()
   const gameStore = useGameStore()
   const planet = computed(() => gameStore.currentPlanet)
-  const alertDialog = ref<InstanceType<typeof AlertDialog> | null>(null)
-  const confirmDialog = ref<InstanceType<typeof ConfirmDialog> | null>(null)
+
+  // AlertDialog 状态
+  const alertDialogOpen = ref(false)
+  const alertDialogTitle = ref('')
+  const alertDialogMessage = ref('')
+
+  // ConfirmDialog 状态
+  const confirmDialogOpen = ref(false)
+  const confirmDialogTitle = ref('')
+  const confirmDialogMessage = ref('')
+  const confirmDialogAction = ref<(() => void) | null>(null)
+
+  const handleConfirmDialogConfirm = () => {
+    if (confirmDialogAction.value) {
+      confirmDialogAction.value()
+    }
+    confirmDialogOpen.value = false
+  }
+
+  // 资源类型配置（用于成本显示）
+  const costResourceTypes = [
+    { key: 'metal' as const },
+    { key: 'crystal' as const },
+    { key: 'deuterium' as const },
+    { key: 'darkMatter' as const }
+  ]
 
   // 检查军官是否激活
   const isOfficerActive = (officerType: OfficerType): boolean => {
@@ -212,19 +257,17 @@
 
   // 招募军官
   const handleHire = (officerType: OfficerType) => {
-    confirmDialog.value?.show({
-      title: t('officersView.hireTitle'),
-      message: t('officersView.hireMessage').replace('{name}', OFFICERS.value[officerType].name),
-      onConfirm: () => {
-        const success = hireOfficer(officerType, 7)
-        if (!success) {
-          alertDialog.value?.show({
-            title: t('officersView.hireFailed'),
-            message: t('officersView.insufficientResources')
-          })
-        }
+    confirmDialogTitle.value = t('officersView.hireTitle')
+    confirmDialogMessage.value = t('officersView.hireMessage').replace('{name}', OFFICERS.value[officerType].name)
+    confirmDialogAction.value = () => {
+      const success = hireOfficer(officerType, 7)
+      if (!success) {
+        alertDialogTitle.value = t('officersView.hireFailed')
+        alertDialogMessage.value = t('officersView.insufficientResources')
+        alertDialogOpen.value = true
       }
-    })
+    }
+    confirmDialogOpen.value = true
   }
 
   const renewOfficer = (officerType: OfficerType, duration: number = 7): boolean => {
@@ -241,29 +284,26 @@
 
   // 续约军官
   const handleRenew = (officerType: OfficerType) => {
-    confirmDialog.value?.show({
-      title: t('officersView.renewTitle'),
-      message: t('officersView.renewMessage').replace('{name}', OFFICERS.value[officerType].name),
-      onConfirm: () => {
-        const success = renewOfficer(officerType, 7)
-        if (!success) {
-          alertDialog.value?.show({
-            title: t('officersView.renewFailed'),
-            message: t('officersView.insufficientResources')
-          })
-        }
+    confirmDialogTitle.value = t('officersView.renewTitle')
+    confirmDialogMessage.value = t('officersView.renewMessage').replace('{name}', OFFICERS.value[officerType].name)
+    confirmDialogAction.value = () => {
+      const success = renewOfficer(officerType, 7)
+      if (!success) {
+        alertDialogTitle.value = t('officersView.renewFailed')
+        alertDialogMessage.value = t('officersView.insufficientResources')
+        alertDialogOpen.value = true
       }
-    })
+    }
+    confirmDialogOpen.value = true
   }
 
   // 解雇军官
   const handleDismiss = (officerType: OfficerType): void => {
-    confirmDialog.value?.show({
-      title: t('officersView.dismissTitle'),
-      message: t('officersView.dismissMessage').replace('{name}', OFFICERS.value[officerType].name),
-      onConfirm: () => {
-        gameStore.player.officers[officerType] = officerLogic.createInactiveOfficer(officerType)
-      }
-    })
+    confirmDialogTitle.value = t('officersView.dismissTitle')
+    confirmDialogMessage.value = t('officersView.dismissMessage').replace('{name}', OFFICERS.value[officerType].name)
+    confirmDialogAction.value = () => {
+      gameStore.player.officers[officerType] = officerLogic.createInactiveOfficer(officerType)
+    }
+    confirmDialogOpen.value = true
   }
 </script>