mirror of
https://github.com/setube/ogame-vue-ts.git
synced 2026-05-12 07:55:11 +08:00
feat: 新增战报弹窗与舰队模拟器,重构UI组件
新增 BattleReportDialog、SpyReportDialog、NumberWithTooltip 等组件,完善舰队模拟器功能。重构并引入 Sheet、Sidebar、Tooltip、Skeleton 等 UI 组件,优化界面结构。实现 battle.worker 支持战斗计算,增加 universeStore、fleetStorageLogic 等核心逻辑,完善多语言与类型定义。
This commit is contained in:
50
src/components/NumberWithTooltip.vue
Normal file
50
src/components/NumberWithTooltip.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<span class="cursor-pointer underline decoration-dotted underline-offset-4 touch-manipulation">{{ abbreviatedValue }}</span>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-2" side="top" align="center">
|
||||
<p class="font-mono text-sm">{{ formattedValue }}</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
|
||||
const props = defineProps<{
|
||||
value: number
|
||||
}>()
|
||||
|
||||
// 完整格式化的数字(带千位分隔符)
|
||||
const formattedValue = computed(() => {
|
||||
return props.value.toLocaleString()
|
||||
})
|
||||
|
||||
// 缩写格式的数字
|
||||
const abbreviatedValue = computed(() => {
|
||||
const num = props.value
|
||||
|
||||
// 小于1000直接显示
|
||||
if (num < 1000) {
|
||||
return num.toString()
|
||||
}
|
||||
|
||||
// 1000 - 999,999: 使用 K (千)
|
||||
if (num < 1000000) {
|
||||
const k = num / 1000
|
||||
return k % 1 === 0 ? `${k}K` : `${k.toFixed(1)}K`
|
||||
}
|
||||
|
||||
// 1,000,000 - 999,999,999: 使用 M (百万)
|
||||
if (num < 1000000000) {
|
||||
const m = num / 1000000
|
||||
return m % 1 === 0 ? `${m}M` : `${m.toFixed(1)}M`
|
||||
}
|
||||
|
||||
// 1,000,000,000+: 使用 B (十亿)
|
||||
const b = num / 1000000000
|
||||
return b % 1 === 0 ? `${b}B` : `${b.toFixed(1)}B`
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user