feat: 新增战报弹窗与舰队模拟器，重构UI组件

新增 BattleReportDialog、SpyReportDialog、NumberWithTooltip 等组件，完善舰队模拟器功能。重构并引入 Sheet、Sidebar、Tooltip、Skeleton 等 UI 组件，优化界面结构。实现 battle.worker 支持战斗计算，增加 universeStore、fleetStorageLogic 等核心逻辑，完善多语言与类型定义。

src/components/BattleReportDialog.vue

@@ -0,0 +1,334 @@
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="max-w-4xl max-h-[90vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle class="flex items-center gap-2">
+          <Trophy class="h-5 w-5" />
+          {{ t('messagesView.battleReport') }}
+        </DialogTitle>
+        <DialogDescription v-if="report">
+          {{ formatDate(report.timestamp) }}
+        </DialogDescription>
+      </DialogHeader>
+      <div v-if="report" class="space-y-4">
+        <!-- 战斗双方信息 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+          <!-- 攻击方星球 -->
+          <div class="p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
+            <p class="font-medium text-blue-600 dark:text-blue-400 mb-1">{{ t('simulatorView.attacker') }}</p>
+            <p v-if="attackerPlanet" class="text-xs text-muted-foreground">
+              {{ attackerPlanet.name }} [{{ attackerPlanet.position.galaxy }}:{{ attackerPlanet.position.system }}:{{
+                attackerPlanet.position.position
+              }}]
+            </p>
+            <p v-else class="text-xs text-muted-foreground">{{ report.attackerPlanetId }}</p>
+          </div>
+
+          <!-- 防守方星球 -->
+          <div class="p-3 bg-red-50 dark:bg-red-950/20 rounded-lg">
+            <p class="font-medium text-red-600 dark:text-red-400 mb-1">{{ t('simulatorView.defender') }}</p>
+            <p v-if="defenderPlanet" class="text-xs text-muted-foreground">
+              {{ defenderPlanet.name }} [{{ defenderPlanet.position.galaxy }}:{{ defenderPlanet.position.system }}:{{
+                defenderPlanet.position.position
+              }}]
+            </p>
+            <p v-else class="text-xs text-muted-foreground">{{ report.defenderPlanetId }}</p>
+          </div>
+        </div>
+
+        <!-- 胜利者 -->
+        <div class="text-center p-4 rounded-lg" :class="getWinnerStyle(report.winner)">
+          <p class="text-lg font-bold">
+            {{
+              report.winner === 'attacker'
+                ? t('messagesView.victory')
+                : report.winner === 'defender'
+                ? t('messagesView.defeat')
+                : t('messagesView.draw')
+            }}
+          </p>
+          <p v-if="report.rounds" class="text-sm mt-1">{{ t('simulatorView.afterRounds').replace('{rounds}', String(report.rounds)) }}</p>
+        </div>
+
+        <!-- 损失对比 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- 攻击方损失 -->
+          <div class="space-y-2">
+            <p class="text-sm font-medium text-red-600 dark:text-red-400">{{ t('messagesView.attackerLosses') }}</p>
+            <div class="p-3 bg-muted rounded-lg space-y-1 text-xs">
+              <div v-for="(count, shipType) in report.attackerLosses" :key="shipType">
+                <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+              <p v-if="Object.keys(report.attackerLosses).length === 0" class="text-muted-foreground">
+                {{ t('messagesView.noLosses') }}
+              </p>
+            </div>
+          </div>
+
+          <!-- 防守方损失 -->
+          <div class="space-y-2">
+            <p class="text-sm font-medium text-red-600 dark:text-red-400">{{ t('messagesView.defenderLosses') }}</p>
+            <div class="p-3 bg-muted rounded-lg space-y-1 text-xs">
+              <div v-for="(count, shipType) in report.defenderLosses.fleet" :key="shipType">
+                <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+              <div v-for="(count, defenseType) in report.defenderLosses.defense" :key="defenseType">
+                <span class="text-muted-foreground">{{ DEFENSES[defenseType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+              <p
+                v-if="Object.keys(report.defenderLosses.fleet).length === 0 && Object.keys(report.defenderLosses.defense).length === 0"
+                class="text-muted-foreground"
+              >
+                {{ t('messagesView.noLosses') }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 剩余单位 -->
+        <div v-if="report.attackerRemaining || report.defenderRemaining" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- 攻击方剩余 -->
+          <div v-if="report.attackerRemaining && Object.keys(report.attackerRemaining).length > 0" class="space-y-2">
+            <p class="text-sm font-medium text-blue-600 dark:text-blue-400">{{ t('messagesView.attackerRemaining') }}</p>
+            <div class="p-3 bg-muted rounded-lg space-y-1 text-xs">
+              <div v-for="(count, shipType) in report.attackerRemaining" :key="shipType">
+                <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 防守方剩余 -->
+          <div
+            v-if="
+              report.defenderRemaining &&
+              (Object.keys(report.defenderRemaining.fleet || {}).length > 0 ||
+                Object.keys(report.defenderRemaining.defense || {}).length > 0)
+            "
+            class="space-y-2"
+          >
+            <p class="text-sm font-medium text-blue-600 dark:text-blue-400">{{ t('messagesView.defenderRemaining') }}</p>
+            <div class="p-3 bg-muted rounded-lg space-y-1 text-xs">
+              <div v-for="(count, shipType) in report.defenderRemaining.fleet" :key="shipType">
+                <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+              <div v-for="(count, defenseType) in report.defenderRemaining.defense" :key="defenseType">
+                <span class="text-muted-foreground">{{ DEFENSES[defenseType].name }}:</span>
+                <span class="ml-2 font-medium">{{ count }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 战利品和残骸 -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- 掠夺资源 -->
+          <div
+            v-if="report.plunder && (report.plunder.metal > 0 || report.plunder.crystal > 0 || report.plunder.deuterium > 0)"
+            class="p-3 bg-green-50 dark:bg-green-950 rounded-lg"
+          >
+            <p class="text-sm font-medium mb-2 text-green-600 dark:text-green-400">{{ t('messagesView.plunder') }}</p>
+            <div class="flex flex-wrap gap-3 text-xs">
+              <span v-if="report.plunder.metal > 0" class="flex items-center gap-1">
+                <ResourceIcon type="metal" size="sm" />
+                {{ formatNumber(report.plunder.metal) }}
+              </span>
+              <span v-if="report.plunder.crystal > 0" class="flex items-center gap-1">
+                <ResourceIcon type="crystal" size="sm" />
+                {{ formatNumber(report.plunder.crystal) }}
+              </span>
+              <span v-if="report.plunder.deuterium > 0" class="flex items-center gap-1">
+                <ResourceIcon type="deuterium" size="sm" />
+                {{ formatNumber(report.plunder.deuterium) }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 残骸场 -->
+          <div
+            v-if="report.debrisField && (report.debrisField.metal > 0 || report.debrisField.crystal > 0)"
+            class="p-3 bg-muted rounded-lg"
+          >
+            <p class="text-sm font-medium mb-2">{{ t('messagesView.debrisField') }}</p>
+            <div class="flex flex-wrap gap-3 text-xs">
+              <span v-if="report.debrisField.metal > 0" class="flex items-center gap-1">
+                <ResourceIcon type="metal" size="sm" />
+                {{ formatNumber(report.debrisField.metal) }}
+              </span>
+              <span v-if="report.debrisField.crystal > 0" class="flex items-center gap-1">
+                <ResourceIcon type="crystal" size="sm" />
+                {{ formatNumber(report.debrisField.crystal) }}
+              </span>
+            </div>
+            <!-- 月球生成概率 -->
+            <p v-if="report.moonChance && report.moonChance > 0" class="text-xs text-muted-foreground mt-2">
+              {{ t('messagesView.moonChance') }}: {{ (report.moonChance * 100).toFixed(1) }}%
+            </p>
+          </div>
+        </div>
+
+        <!-- 回合详情 -->
+        <div v-if="report.roundDetails && report.roundDetails.length > 0" class="space-y-2">
+          <Button @click="showRoundDetails = !showRoundDetails" variant="outline" size="sm" class="w-full">
+            {{ showRoundDetails ? t('messagesView.hideRoundDetails') : t('messagesView.showRoundDetails') }}
+          </Button>
+
+          <div v-if="showRoundDetails" class="relative pl-6 space-y-4">
+            <!-- 时间线 -->
+            <div class="absolute left-2 top-0 bottom-0 w-0.5 bg-border" />
+
+            <div v-for="detail in report.roundDetails" :key="detail.round" class="relative">
+              <!-- 时间线节点 -->
+              <div class="absolute -left-6 top-3 w-4 h-4 rounded-full bg-primary border-2 border-background" />
+
+              <!-- 回合内容卡片 -->
+              <div class="border rounded-lg p-3 bg-card hover:shadow-md transition-shadow">
+                <div class="flex items-center justify-between mb-3">
+                  <p class="text-sm font-semibold">{{ t('messagesView.round').replace('{round}', String(detail.round)) }}</p>
+                  <TooltipProvider :delay-duration="300">
+                    <div class="flex gap-3 text-xs text-muted-foreground">
+                      <Tooltip>
+                        <TooltipTrigger as-child>
+                          <span class="flex items-center gap-1">
+                            <Sword class="h-3 w-3" />
+                            {{ formatNumber(detail.attackerRemainingPower) }}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>{{ t('messagesView.attackerRemainingPower') }}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                      <Tooltip>
+                        <TooltipTrigger as-child>
+                          <span class="flex items-center gap-1">
+                            <Shield class="h-3 w-3" />
+                            {{ formatNumber(detail.defenderRemainingPower) }}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p>{{ t('messagesView.defenderRemainingPower') }}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
+                  </TooltipProvider>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <!-- 攻击方本回合损失 -->
+                  <div class="bg-red-50 dark:bg-red-950/20 rounded p-2">
+                    <p class="text-xs font-medium text-red-600 dark:text-red-400 mb-1.5">{{ t('messagesView.attackerLosses') }}</p>
+                    <div class="text-xs space-y-0.5">
+                      <div v-for="(count, shipType) in detail.attackerLosses" :key="shipType" class="flex justify-between">
+                        <span class="text-muted-foreground">{{ SHIPS[shipType].name }}</span>
+                        <span class="font-medium">-{{ count }}</span>
+                      </div>
+                      <p v-if="Object.keys(detail.attackerLosses).length === 0" class="text-muted-foreground italic">
+                        {{ t('messagesView.noLosses') }}
+                      </p>
+                    </div>
+                  </div>
+
+                  <!-- 防守方本回合损失 -->
+                  <div class="bg-blue-50 dark:bg-blue-950/20 rounded p-2">
+                    <p class="text-xs font-medium text-blue-600 dark:text-blue-400 mb-1.5">{{ t('messagesView.defenderLosses') }}</p>
+                    <div class="text-xs space-y-0.5">
+                      <div v-for="(count, shipType) in detail.defenderLosses.fleet" :key="shipType" class="flex justify-between">
+                        <span class="text-muted-foreground">{{ SHIPS[shipType].name }}</span>
+                        <span class="font-medium">-{{ count }}</span>
+                      </div>
+                      <div v-for="(count, defenseType) in detail.defenderLosses.defense" :key="defenseType" class="flex justify-between">
+                        <span class="text-muted-foreground">{{ DEFENSES[defenseType].name }}</span>
+                        <span class="font-medium">-{{ count }}</span>
+                      </div>
+                      <p
+                        v-if="
+                          Object.keys(detail.defenderLosses.fleet).length === 0 && Object.keys(detail.defenderLosses.defense).length === 0
+                        "
+                        class="text-muted-foreground italic"
+                      >
+                        {{ t('messagesView.noLosses') }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed } from 'vue'
+  import { useGameStore } from '@/stores/gameStore'
+  import { useUniverseStore } from '@/stores/universeStore'
+  import { useI18n } from '@/composables/useI18n'
+  import { useGameConfig } from '@/composables/useGameConfig'
+  import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+  import { Button } from '@/components/ui/button'
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+  import ResourceIcon from '@/components/ResourceIcon.vue'
+  import { formatNumber, formatDate } from '@/utils/format'
+  import { Trophy, Sword, Shield } from 'lucide-vue-next'
+  import type { BattleResult } from '@/types/game'
+
+  const props = defineProps<{
+    report: BattleResult | null
+    open: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:open', value: boolean): void
+  }>()
+
+  const gameStore = useGameStore()
+  const universeStore = useUniverseStore()
+  const { t } = useI18n()
+  const { SHIPS, DEFENSES } = useGameConfig()
+
+  const isOpen = ref(props.open)
+  const showRoundDetails = ref(false)
+
+  // 获取攻击方星球信息
+  const attackerPlanet = computed(() => {
+    if (!props.report) return null
+    return gameStore.player.planets.find(p => p.id === props.report!.attackerPlanetId)
+  })
+
+  // 获取防守方星球信息
+  const defenderPlanet = computed(() => {
+    if (!props.report) return null
+    // 先从玩家星球中查找
+    const playerPlanet = gameStore.player.planets.find(p => p.id === props.report!.defenderPlanetId)
+    if (playerPlanet) return playerPlanet
+    // 再从宇宙星球地图中查找
+    return Object.values(universeStore.planets).find(p => p.id === props.report!.defenderPlanetId)
+  })
+
+  watch(
+    () => props.open,
+    newValue => {
+      isOpen.value = newValue
+      if (newValue) {
+        showRoundDetails.value = false
+      }
+    }
+  )
+
+  watch(isOpen, newValue => {
+    emit('update:open', newValue)
+  })
+
+  // 获取胜利者样式
+  const getWinnerStyle = (winner: string) => {
+    if (winner === 'attacker') return 'bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-300'
+    if (winner === 'defender') return 'bg-red-50 dark:bg-red-950 text-red-700 dark:text-red-300'
+    return 'bg-gray-50 dark:bg-gray-950 text-gray-700 dark:text-gray-300'
+  }
+</script>

src/components/CardUnlockOverlay.vue

@@ -30,6 +30,7 @@
 
   interface Props {
     requirements?: Partial<Record<BuildingType | TechnologyType, number>>
+    currentLevel?: number // 当前建筑/科技等级，用于判断是否已解锁
   }
 
   const props = defineProps<Props>()
@@ -39,6 +40,8 @@
   const requirementsDialog = ref<InstanceType<typeof AlertDialog> | null>(null)
 
   const isUnlocked = computed(() => {
+    // 如果已经建造过（level > 0），则认为已解锁，不显示遮罩
+    if (props.currentLevel !== undefined && props.currentLevel > 0) return true
     if (!props.requirements || !gameStore.currentPlanet) return true
     return publicLogic.checkRequirements(gameStore.currentPlanet, gameStore.player.technologies, props.requirements)
   })

src/components/NumberWithTooltip.vue

@@ -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>

src/components/SpyReportDialog.vue

@@ -0,0 +1,141 @@
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle class="flex items-center gap-2">
+          <Eye class="h-5 w-5" />
+          {{ t('messagesView.spyReport') }}
+        </DialogTitle>
+        <DialogDescription v-if="report">
+          {{ formatDate(report.timestamp) }}
+        </DialogDescription>
+      </DialogHeader>
+      <div v-if="report" class="space-y-4">
+        <!-- 目标星球信息 -->
+        <div class="p-3 bg-muted rounded-lg">
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.targetPlanet') }}</p>
+          <p v-if="targetPlanet" class="text-xs text-muted-foreground">
+            {{ targetPlanet.name }} [{{ targetPlanet.position.galaxy }}:{{ targetPlanet.position.system }}:{{
+              targetPlanet.position.position
+            }}]
+          </p>
+          <p v-else class="text-xs text-muted-foreground">{{ report.targetPlanetId }}</p>
+        </div>
+
+        <!-- 资源 -->
+        <div>
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.resources') }}:</p>
+          <div class="flex flex-wrap gap-3 text-xs sm:text-sm">
+            <span class="flex items-center gap-1">
+              <ResourceIcon type="metal" size="sm" />
+              {{ formatNumber(report.resources.metal) }}
+            </span>
+            <span class="flex items-center gap-1">
+              <ResourceIcon type="crystal" size="sm" />
+              {{ formatNumber(report.resources.crystal) }}
+            </span>
+            <span class="flex items-center gap-1">
+              <ResourceIcon type="deuterium" size="sm" />
+              {{ formatNumber(report.resources.deuterium) }}
+            </span>
+            <span class="flex items-center gap-1">
+              <ResourceIcon type="darkMatter" size="sm" />
+              {{ formatNumber(report.resources.darkMatter) }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 舰队（如果有） -->
+        <div v-if="report.fleet && Object.keys(report.fleet).length > 0">
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.fleet') }}:</p>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs sm:text-sm">
+            <div v-for="(count, shipType) in report.fleet" :key="shipType">
+              <span class="text-muted-foreground">{{ SHIPS[shipType].name }}:</span>
+              <span class="ml-1 font-medium">{{ count }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 防御设施（如果有） -->
+        <div v-if="report.defense && hasDefense(report.defense)">
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.defense') }}:</p>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs sm:text-sm">
+            <div v-for="(count, defenseType) in report.defense" :key="defenseType">
+              <span v-if="count && count > 0" class="block">
+                <span class="text-muted-foreground">{{ DEFENSES[defenseType].name }}:</span>
+                <span class="ml-1 font-medium">{{ count }}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 建筑（如果有） -->
+        <div v-if="report.buildings && Object.keys(report.buildings).length > 0">
+          <p class="text-sm font-medium mb-2">{{ t('messagesView.buildings') }}:</p>
+          <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs sm:text-sm">
+            <div v-for="(level, buildingType) in report.buildings" :key="buildingType">
+              <span class="text-muted-foreground">{{ BUILDINGS[buildingType].name }}:</span>
+              <span class="ml-1 font-medium">Lv.{{ level }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed } from 'vue'
+  import { useGameStore } from '@/stores/gameStore'
+  import { useUniverseStore } from '@/stores/universeStore'
+  import { useI18n } from '@/composables/useI18n'
+  import { useGameConfig } from '@/composables/useGameConfig'
+  import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+  import ResourceIcon from '@/components/ResourceIcon.vue'
+  import { formatNumber, formatDate } from '@/utils/format'
+  import { Eye } from 'lucide-vue-next'
+  import type { SpyReport } from '@/types/game'
+
+  const props = defineProps<{
+    report: SpyReport | null
+    open: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update:open', value: boolean): void
+  }>()
+
+  const gameStore = useGameStore()
+  const universeStore = useUniverseStore()
+  const { t } = useI18n()
+  const { SHIPS, DEFENSES, BUILDINGS } = useGameConfig()
+
+  const isOpen = ref(props.open)
+
+  // 获取目标星球信息
+  const targetPlanet = computed(() => {
+    if (!props.report) return null
+    // 先从玩家星球中查找
+    const playerPlanet = gameStore.player.planets.find(p => p.id === props.report!.targetPlanetId)
+    if (playerPlanet) return playerPlanet
+    // 再从宇宙星球地图中查找
+    return Object.values(universeStore.planets).find(p => p.id === props.report!.targetPlanetId)
+  })
+
+  watch(
+    () => props.open,
+    newValue => {
+      isOpen.value = newValue
+    }
+  )
+
+  watch(isOpen, newValue => {
+    emit('update:open', newValue)
+  })
+
+  // 检查是否有防御设施
+  const hasDefense = (defense: any): boolean => {
+    if (!defense) return false
+    return Object.values(defense).some((count: any) => count > 0)
+  }
+</script>

src/components/detail-views/BuildingDetailView.vue

@@ -21,24 +21,36 @@
               <Badge v-if="level === currentLevel" variant="default">{{ level }}</Badge>
               <span v-else>{{ level }}</span>
             </TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.metal) }}</TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.crystal) }}</TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.deuterium) }}</TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.metal" />
+            </TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.crystal" />
+            </TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.deuterium" />
+            </TableCell>
             <TableCell class="text-center text-sm">{{ formatTime(getLevelData(level).buildTime) }}</TableCell>
             <TableCell class="text-center text-sm">
               <span v-if="getLevelData(level).production > 0" class="text-green-600 dark:text-green-400">
-                +{{ formatNumber(getLevelData(level).production) }}/{{ t('resources.perHour') }}
+                +
+                <NumberWithTooltip :value="getLevelData(level).production" />
+                /{{ t('resources.perHour') }}
               </span>
               <span v-else>-</span>
             </TableCell>
             <TableCell class="text-center text-sm">
               <span v-if="getLevelData(level).consumption > 0" class="text-red-600 dark:text-red-400">
-                -{{ formatNumber(getLevelData(level).consumption) }}
+                -
+                <NumberWithTooltip :value="getLevelData(level).consumption" />
               </span>
               <span v-else>-</span>
             </TableCell>
             <TableCell class="text-center text-sm">
-              <span class="text-primary font-medium">+{{ getLevelData(level).points }}</span>
+              <span class="text-primary font-medium">
+                +
+                <NumberWithTooltip :value="getLevelData(level).points" />
+              </span>
             </TableCell>
           </TableRow>
         </TableBody>
@@ -54,15 +66,21 @@
         <CardContent class="space-y-2">
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.metal') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.metal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.metal" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.crystal') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.crystal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.crystal" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.deuterium') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.deuterium) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.deuterium" />
+            </span>
           </div>
         </CardContent>
       </Card>
@@ -72,7 +90,9 @@
           <CardTitle class="text-sm">{{ t('buildings.totalPoints') }}</CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-3xl font-bold text-primary">{{ formatNumber(totalStats.points) }}</div>
+          <div class="text-3xl font-bold text-primary">
+            <NumberWithTooltip :value="totalStats.points" />
+          </div>
           <p class="text-xs text-muted-foreground mt-1">
             {{ t('buildings.levelRange') }}: {{ Math.max(0, currentLevel - 10) }} - {{ Math.min(currentLevel + 10, currentLevel + 10) }}
           </p>
@@ -89,8 +109,10 @@
   import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Badge } from '@/components/ui/badge'
+  import NumberWithTooltip from '@/components/NumberWithTooltip.vue'
   import * as buildingLogic from '@/logic/buildingLogic'
   import * as pointsLogic from '@/logic/pointsLogic'
+  import { formatTime } from '@/utils/format'
 
   const { t } = useI18n()
 
@@ -99,12 +121,11 @@
     currentLevel: number
   }>()
 
-  // 等级范围：当前等级 ±10
+  // 等级范围：当前等级 +10
   const levelRange = computed(() => {
-    const start = Math.max(0, props.currentLevel - 10)
     const end = props.currentLevel + 10
     const levels = []
-    for (let i = start; i <= end; i++) {
+    for (let i = props.currentLevel; i <= end; i++) {
       levels.push(i)
     }
     return levels
@@ -129,18 +150,18 @@
     let production = 0
     let consumption = 0
 
-    // 资源矿产量
+    // 资源矿产量（与 resourceLogic.ts 保持一致）
     if (props.buildingType === 'metalMine') {
-      production = Math.floor(30 * level * Math.pow(1.1, level))
+      production = Math.floor(1500 * level * Math.pow(1.5, level))
     } else if (props.buildingType === 'crystalMine') {
-      production = Math.floor(20 * level * Math.pow(1.1, level))
+      production = Math.floor(1000 * level * Math.pow(1.5, level))
     } else if (props.buildingType === 'deuteriumSynthesizer') {
-      production = Math.floor(10 * level * Math.pow(1.1, level))
+      production = Math.floor(500 * level * Math.pow(1.5, level))
     }
 
-    // 能量产出
+    // 能量产出（与 resourceLogic.ts 保持一致）
     if (props.buildingType === 'solarPlant') {
-      production = Math.floor(20 * level * Math.pow(1.1, level))
+      production = Math.floor(50 * level * Math.pow(1.1, level))
     }
 
     // 能量消耗（矿场和合成器）
@@ -178,18 +199,4 @@
 
     return { metal, crystal, deuterium, points }
   })
-
-  const formatNumber = (num: number): string => {
-    return num.toLocaleString()
-  }
-
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}${t('common.timeSecond')}`
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (minutes < 60) return `${minutes}${t('common.timeMinute')}${secs}${t('common.timeSecond')}`
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return `${hours}${t('common.timeHour')}${mins}${t('common.timeMinute')}`
-  }
 </script>

src/components/detail-views/DefenseDetailView.vue

@@ -10,7 +10,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.attack) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.attack" />
+          </div>
         </CardContent>
       </Card>
 
@@ -22,7 +24,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.shield) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.shield" />
+          </div>
         </CardContent>
       </Card>
 
@@ -34,7 +38,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.armor) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.armor" />
+          </div>
         </CardContent>
       </Card>
     </div>
@@ -48,19 +54,27 @@
         <CardContent class="space-y-2">
           <div v-if="config.cost.metal > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.metal') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.metal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.metal" />
+            </span>
           </div>
           <div v-if="config.cost.crystal > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.crystal') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.crystal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.crystal" />
+            </span>
           </div>
           <div v-if="config.cost.deuterium > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.deuterium') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.deuterium) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.deuterium" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm pt-2 border-t">
             <span class="text-muted-foreground">{{ t('player.points') }}:</span>
-            <span class="font-bold text-primary">{{ pointsPerUnit }}</span>
+            <span class="font-bold text-primary">
+              <NumberWithTooltip :value="pointsPerUnit" />
+            </span>
           </div>
         </CardContent>
       </Card>
@@ -92,22 +106,31 @@
             <div class="space-y-1 text-sm">
               <div class="flex justify-between">
                 <span>{{ t('resources.metal') }}:</span>
-                <span class="font-medium">{{ formatNumber(batchCost.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">{{ formatNumber(batchCost.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">{{ formatNumber(batchCost.deuterium) }}</span>
+                <span class="font-medium">
+                  <NumberWithTooltip :value="batchCost.deuterium" />
+                </span>
               </div>
             </div>
           </div>
           <div class="space-y-2">
             <p class="text-sm text-muted-foreground">{{ t('defense.totalTime') }}:</p>
             <div class="text-xl font-bold">{{ formatTime(config.buildTime * quantity) }}</div>
-            <p class="text-xs text-muted-foreground">{{ t('player.points') }}: +{{ formatNumber(batchPoints) }}</p>
+            <p class="text-xs text-muted-foreground">
+              {{ t('player.points') }}: +
+              <NumberWithTooltip :value="batchPoints" />
+            </p>
           </div>
         </div>
       </CardContent>
@@ -122,9 +145,11 @@
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Input } from '@/components/ui/input'
   import { Label } from '@/components/ui/label'
+  import NumberWithTooltip from '@/components/NumberWithTooltip.vue'
   import { Sword, Shield, ShieldCheck } from 'lucide-vue-next'
   import * as pointsLogic from '@/logic/pointsLogic'
   import { DEFENSES } from '@/config/gameConfig'
+  import { formatTime } from '@/utils/format'
 
   const { t } = useI18n()
 
@@ -151,18 +176,4 @@
   const batchPoints = computed(() => {
     return pointsLogic.calculateDefensePoints(props.defenseType, quantity.value)
   })
-
-  const formatNumber = (num: number): string => {
-    return num.toLocaleString()
-  }
-
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}${t('common.timeSecond')}`
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (minutes < 60) return `${minutes}${t('common.timeMinute')}${secs}${t('common.timeSecond')}`
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return `${hours}${t('common.timeHour')}${mins}${t('common.timeMinute')}`
-  }
 </script>

src/components/detail-views/ShipDetailView.vue

@@ -10,7 +10,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.attack) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.attack" />
+          </div>
         </CardContent>
       </Card>
 
@@ -22,7 +24,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.shield) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.shield" />
+          </div>
         </CardContent>
       </Card>
 
@@ -34,7 +38,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.armor) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.armor" />
+          </div>
         </CardContent>
       </Card>
 
@@ -46,7 +52,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.speed) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.speed" />
+          </div>
         </CardContent>
       </Card>
 
@@ -58,7 +66,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.cargoCapacity) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.cargoCapacity" />
+          </div>
         </CardContent>
       </Card>
 
@@ -70,7 +80,9 @@
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-2xl font-bold">{{ formatNumber(config.fuelConsumption) }}</div>
+          <div class="text-2xl font-bold">
+            <NumberWithTooltip :value="config.fuelConsumption" />
+          </div>
         </CardContent>
       </Card>
     </div>
@@ -84,19 +96,27 @@
         <CardContent class="space-y-2">
           <div v-if="config.cost.metal > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.metal') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.metal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.metal" />
+            </span>
           </div>
           <div v-if="config.cost.crystal > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.crystal') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.crystal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.crystal" />
+            </span>
           </div>
           <div v-if="config.cost.deuterium > 0" class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.deuterium') }}:</span>
-            <span class="font-medium">{{ formatNumber(config.cost.deuterium) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="config.cost.deuterium" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm pt-2 border-t">
             <span class="text-muted-foreground">{{ t('player.points') }}:</span>
-            <span class="font-bold text-primary">{{ pointsPerUnit }}</span>
+            <span class="font-bold text-primary">
+              <NumberWithTooltip :value="pointsPerUnit" />
+            </span>
           </div>
         </CardContent>
       </Card>
@@ -128,22 +148,31 @@
             <div class="space-y-1 text-sm">
               <div class="flex justify-between">
                 <span>{{ t('resources.metal') }}:</span>
-                <span class="font-medium">{{ formatNumber(batchCost.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">{{ formatNumber(batchCost.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">{{ formatNumber(batchCost.deuterium) }}</span>
+                <span class="font-medium">
+                  <NumberWithTooltip :value="batchCost.deuterium" />
+                </span>
               </div>
             </div>
           </div>
           <div class="space-y-2">
             <p class="text-sm text-muted-foreground">{{ t('shipyard.totalTime') }}:</p>
             <div class="text-xl font-bold">{{ formatTime(config.buildTime * quantity) }}</div>
-            <p class="text-xs text-muted-foreground">{{ t('player.points') }}: +{{ formatNumber(batchPoints) }}</p>
+            <p class="text-xs text-muted-foreground">
+              {{ t('player.points') }}: +
+              <NumberWithTooltip :value="batchPoints" />
+            </p>
           </div>
         </div>
       </CardContent>
@@ -158,9 +187,11 @@
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Input } from '@/components/ui/input'
   import { Label } from '@/components/ui/label'
+  import NumberWithTooltip from '@/components/NumberWithTooltip.vue'
   import { Sword, Shield, ShieldCheck, Zap, Package, Fuel } from 'lucide-vue-next'
   import * as pointsLogic from '@/logic/pointsLogic'
   import { SHIPS } from '@/config/gameConfig'
+  import { formatTime } from '@/utils/format'
 
   const { t } = useI18n()
 
@@ -187,18 +218,4 @@
   const batchPoints = computed(() => {
     return pointsLogic.calculateShipPoints(props.shipType, quantity.value)
   })
-
-  const formatNumber = (num: number): string => {
-    return num.toLocaleString()
-  }
-
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}${t('common.timeSecond')}`
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (minutes < 60) return `${minutes}${t('common.timeMinute')}${secs}${t('common.timeSecond')}`
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return `${hours}${t('common.timeHour')}${mins}${t('common.timeMinute')}`
-  }
 </script>

src/components/detail-views/TechnologyDetailView.vue

@@ -19,12 +19,21 @@
               <Badge v-if="level === currentLevel" variant="default">{{ level }}</Badge>
               <span v-else>{{ level }}</span>
             </TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.metal) }}</TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.crystal) }}</TableCell>
-            <TableCell class="text-center text-sm">{{ formatNumber(getLevelData(level).cost.deuterium) }}</TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.metal" />
+            </TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.crystal" />
+            </TableCell>
+            <TableCell class="text-center text-sm">
+              <NumberWithTooltip :value="getLevelData(level).cost.deuterium" />
+            </TableCell>
             <TableCell class="text-center text-sm">{{ formatTime(getLevelData(level).researchTime) }}</TableCell>
             <TableCell class="text-center text-sm">
-              <span class="text-primary font-medium">+{{ getLevelData(level).points }}</span>
+              <span class="text-primary font-medium">
+                +
+                <NumberWithTooltip :value="getLevelData(level).points" />
+              </span>
             </TableCell>
           </TableRow>
         </TableBody>
@@ -40,15 +49,21 @@
         <CardContent class="space-y-2">
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.metal') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.metal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.metal" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.crystal') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.crystal) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.crystal" />
+            </span>
           </div>
           <div class="flex items-center justify-between text-sm">
             <span class="text-muted-foreground">{{ t('resources.deuterium') }}:</span>
-            <span class="font-medium">{{ formatNumber(totalStats.deuterium) }}</span>
+            <span class="font-medium">
+              <NumberWithTooltip :value="totalStats.deuterium" />
+            </span>
           </div>
         </CardContent>
       </Card>
@@ -58,7 +73,9 @@
           <CardTitle class="text-sm">{{ t('research.totalPoints') }}</CardTitle>
         </CardHeader>
         <CardContent>
-          <div class="text-3xl font-bold text-primary">{{ formatNumber(totalStats.points) }}</div>
+          <div class="text-3xl font-bold text-primary">
+            <NumberWithTooltip :value="totalStats.points" />
+          </div>
           <p class="text-xs text-muted-foreground mt-1">
             {{ t('research.levelRange') }}: {{ Math.max(0, currentLevel - 10) }} - {{ Math.min(currentLevel + 10, currentLevel + 10) }}
           </p>
@@ -75,8 +92,10 @@
   import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
   import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
   import { Badge } from '@/components/ui/badge'
+  import NumberWithTooltip from '@/components/NumberWithTooltip.vue'
   import * as researchLogic from '@/logic/researchLogic'
   import * as pointsLogic from '@/logic/pointsLogic'
+  import { formatTime } from '@/utils/format'
 
   const { t } = useI18n()
 
@@ -85,12 +104,11 @@
     currentLevel: number
   }>()
 
-  // 等级范围：当前等级 ±10
+  // 等级范围：当前等级 +10
   const levelRange = computed(() => {
-    const start = Math.max(0, props.currentLevel - 10)
     const end = props.currentLevel + 10
     const levels = []
-    for (let i = start; i <= end; i++) {
+    for (let i = props.currentLevel; i <= end; i++) {
       levels.push(i)
     }
     return levels
@@ -137,18 +155,4 @@
 
     return { metal, crystal, deuterium, points }
   })
-
-  const formatNumber = (num: number): string => {
-    return num.toLocaleString()
-  }
-
-  const formatTime = (seconds: number): string => {
-    if (seconds < 60) return `${seconds}${t('common.timeSecond')}`
-    const minutes = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    if (minutes < 60) return `${minutes}${t('common.timeMinute')}${secs}${t('common.timeSecond')}`
-    const hours = Math.floor(minutes / 60)
-    const mins = minutes % 60
-    return `${hours}${t('common.timeHour')}${mins}${t('common.timeMinute')}`
-  }
 </script>

src/components/ui/input/Input.vue

@@ -14,22 +14,22 @@
 </template>
 
 <script setup lang="ts">
-  import type { HTMLAttributes } from 'vue'
-  import { useVModel } from '@vueuse/core'
-  import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
-  const props = defineProps<{
-    defaultValue?: string | number
-    modelValue?: string | number
-    class?: HTMLAttributes['class']
-  }>()
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
 
-  const emits = defineEmits<{
-    (e: 'update:modelValue', payload: string | number): void
-  }>()
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
 
-  const modelValue = useVModel(props, 'modelValue', emits, {
-    passive: true,
-    defaultValue: props.defaultValue
-  })
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue
+})
 </script>

src/components/ui/separator/Separator.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>(), {
+  orientation: "horizontal",
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  />
+</template>

src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue"

src/components/ui/sheet/Sheet.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="sheet"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

src/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="sheet-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>

src/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import SheetOverlay from "./SheetOverlay.vue"
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: "top" | "right" | "bottom" | "left"
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: "right",
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        side === 'right'
+          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        side === 'left'
+          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        side === 'top'
+          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        side === 'bottom'
+          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+        props.class)"
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

src/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>

src/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-footer"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/sheet/SheetOverlay.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

src/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    :class="cn('text-foreground font-semibold', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>

src/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="sheet-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>

src/components/ui/sheet/index.ts

@@ -0,0 +1,8 @@
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"

src/components/ui/sidebar/Sidebar.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE
+      }"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="
+        cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+        )
+      "
+    />
+    <div
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class
+        )
+      "
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { SidebarProps } from '.'
+  import { cn } from '@/lib/utils'
+  import { Sheet, SheetContent } from '@/components/ui/sheet'
+  import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
+  import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
+  import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
+  import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+
+  defineOptions({
+    inheritAttrs: false
+  })
+
+  const props = withDefaults(defineProps<SidebarProps>(), {
+    side: 'left',
+    variant: 'sidebar',
+    collapsible: 'offcanvas'
+  })
+
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>

src/components/ui/sidebar/SidebarContent.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', 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/sidebar/SidebarFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="sidebar-footer" data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', 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/sidebar/SidebarGroup.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="sidebar-group" data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', 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/sidebar/SidebarGroupAction.vue

@@ -0,0 +1,31 @@
+<template>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<
+    PrimitiveProps & {
+      class?: HTMLAttributes['class']
+    }
+  >()
+</script>

src/components/ui/sidebar/SidebarGroupContent.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="sidebar-group-content" data-sidebar="group-content" :class="cn('w-full 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/sidebar/SidebarGroupLabel.vue

@@ -0,0 +1,30 @@
+<template>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<
+    PrimitiveProps & {
+      class?: HTMLAttributes['class']
+    }
+  >()
+</script>

src/components/ui/sidebar/SidebarHeader.vue

@@ -0,0 +1,14 @@
+<template>
+  <div data-slot="sidebar-header" data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', 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/sidebar/SidebarInput.vue

@@ -0,0 +1,15 @@
+<template>
+  <Input data-slot="sidebar-input" data-sidebar="input" :class="cn('bg-background h-8 w-full shadow-none', props.class)">
+    <slot />
+  </Input>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+  import { Input } from '@/components/ui/input'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarInset.vue

@@ -0,0 +1,23 @@
+<template>
+  <main
+    data-slot="sidebar-inset"
+    :class="
+      cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </main>
+</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/sidebar/SidebarMenu.vue

@@ -0,0 +1,14 @@
+<template>
+  <ul data-slot="sidebar-menu" data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+    <slot />
+  </ul>
+</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/sidebar/SidebarMenuAction.vue

@@ -0,0 +1,41 @@
+<template>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        props.class
+      )
+    "
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        showOnHover?: boolean
+        class?: HTMLAttributes['class']
+      }
+    >(),
+    {
+      as: 'button'
+    }
+  )
+</script>

src/components/ui/sidebar/SidebarMenuBadge.vue

@@ -0,0 +1,28 @@
+<template>
+  <div
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        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/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,49 @@
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+  import type { Component } from 'vue'
+  import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+  import { reactiveOmit } from '@vueuse/core'
+  import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+  import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
+  import { useSidebar } from './utils'
+
+  defineOptions({
+    inheritAttrs: false
+  })
+
+  const props = withDefaults(
+    defineProps<
+      SidebarMenuButtonProps & {
+        tooltip?: string | Component
+      }
+    >(),
+    {
+      as: 'button',
+      variant: 'default',
+      size: 'default'
+    }
+  )
+
+  const { isMobile, state } = useSidebar()
+
+  const delegatedProps = reactiveOmit(props, 'tooltip')
+</script>

src/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -0,0 +1,36 @@
+<template>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import type { SidebarMenuButtonVariants } from '.'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+  import { sidebarMenuButtonVariants } from '.'
+
+  export interface SidebarMenuButtonProps extends PrimitiveProps {
+    variant?: SidebarMenuButtonVariants['variant']
+    size?: SidebarMenuButtonVariants['size']
+    isActive?: boolean
+    class?: HTMLAttributes['class']
+  }
+
+  const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+    as: 'button',
+    variant: 'default',
+    size: 'default'
+  })
+</script>

src/components/ui/sidebar/SidebarMenuItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <li data-slot="sidebar-menu-item" data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
+    <slot />
+  </li>
+</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/sidebar/SidebarMenuSkeleton.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+
+    <Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { computed } from 'vue'
+  import { cn } from '@/lib/utils'
+  import { Skeleton } from '@/components/ui/skeleton'
+
+  const props = defineProps<{
+    showIcon?: boolean
+    class?: HTMLAttributes['class']
+  }>()
+
+  const width = computed(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+</script>

src/components/ui/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,24 @@
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ul>
+</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/sidebar/SidebarMenuSubButton.vue

@@ -0,0 +1,43 @@
+<template>
+  <Primitive
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+  import type { HTMLAttributes } from 'vue'
+  import { Primitive } from 'reka-ui'
+  import { cn } from '@/lib/utils'
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        size?: 'sm' | 'md'
+        isActive?: boolean
+        class?: HTMLAttributes['class']
+      }
+    >(),
+    {
+      as: 'a',
+      size: 'md'
+    }
+  )
+</script>

src/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
+    <slot />
+  </li>
+</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/sidebar/SidebarProvider.vue

@@ -0,0 +1,92 @@
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      data-slot="sidebar-wrapper"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON
+      }"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes, Ref } from 'vue'
+  import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+  import { TooltipProvider } from 'reka-ui'
+  import { computed, ref } from 'vue'
+  import { cn } from '@/lib/utils'
+  import {
+    provideSidebarContext,
+    SIDEBAR_COOKIE_MAX_AGE,
+    SIDEBAR_COOKIE_NAME,
+    SIDEBAR_KEYBOARD_SHORTCUT,
+    SIDEBAR_WIDTH,
+    SIDEBAR_WIDTH_ICON
+  } from './utils'
+
+  const props = withDefaults(
+    defineProps<{
+      defaultOpen?: boolean
+      open?: boolean
+      class?: HTMLAttributes['class']
+    }>(),
+    {
+      defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+      open: undefined
+    }
+  )
+
+  const emits = defineEmits<{
+    'update:open': [open: boolean]
+  }>()
+
+  const isMobile = useMediaQuery('(max-width: 768px)')
+  const openMobile = ref(false)
+
+  const open = useVModel(props, 'open', emits, {
+    defaultValue: props.defaultOpen ?? false,
+    passive: (props.open === undefined) as false
+  }) as Ref<boolean>
+
+  function setOpen(value: boolean) {
+    open.value = value // emits('update:open', value)
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  }
+
+  function setOpenMobile(value: boolean) {
+    openMobile.value = value
+  }
+
+  // Helper to toggle the sidebar.
+  function toggleSidebar() {
+    return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+  }
+
+  useEventListener('keydown', (event: KeyboardEvent) => {
+    if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      toggleSidebar()
+    }
+  })
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = computed(() => (open.value ? 'expanded' : 'collapsed'))
+
+  provideSidebarContext({
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar
+  })
+</script>

src/components/ui/sidebar/SidebarRail.vue

@@ -0,0 +1,35 @@
+<template>
+  <button
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="
+      cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class
+      )
+    "
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+  import { useSidebar } from './utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+
+  const { toggleSidebar } = useSidebar()
+</script>

src/components/ui/sidebar/SidebarSeparator.vue

@@ -0,0 +1,15 @@
+<template>
+  <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+    <slot />
+  </Separator>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@/lib/utils'
+  import { Separator } from '@/components/ui/separator'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+</script>

src/components/ui/sidebar/SidebarTrigger.vue

@@ -0,0 +1,27 @@
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { PanelLeft } from 'lucide-vue-next'
+  import { cn } from '@/lib/utils'
+  import { Button } from '@/components/ui/button'
+  import { useSidebar } from './utils'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+
+  const { toggleSidebar } = useSidebar()
+</script>

src/components/ui/sidebar/index.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
+
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>

src/components/ui/sidebar/utils.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')

src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+interface SkeletonProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
+  />
+</template>

src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue"

src/components/ui/sonner/Sonner.vue

@@ -1,12 +1,3 @@
-<script lang="ts" setup>
-import type { ToasterProps } from "vue-sonner"
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next"
-import { Toaster as Sonner } from "vue-sonner"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<ToasterProps>()
-</script>
-
 <template>
   <Sonner
     :class="cn('toaster group', props.class)"
@@ -14,7 +5,7 @@ const props = defineProps<ToasterProps>()
       '--normal-bg': 'var(--popover)',
       '--normal-text': 'var(--popover-foreground)',
       '--normal-border': 'var(--border)',
-      '--border-radius': 'var(--radius)',
+      '--border-radius': 'var(--radius)'
     }"
     v-bind="props"
   >
@@ -40,3 +31,12 @@ const props = defineProps<ToasterProps>()
     </template>
   </Sonner>
 </template>
+
+<script lang="ts" setup>
+  import type { ToasterProps } from 'vue-sonner'
+  import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'
+  import { Toaster as Sonner } from 'vue-sonner'
+  import { cn } from '@/lib/utils'
+
+  const props = defineProps<ToasterProps>()
+</script>

src/components/ui/sonner/index.ts

@@ -1 +1 @@
-export { default as Toaster } from "./Sonner.vue"
+export { default as Toaster } from './Sonner.vue'

src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,15 @@
+<template>
+  <TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>
+
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,39 @@
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
+          props.class
+        )
+      "
+    >
+      <slot />
+
+      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
+
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
+
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0
+})
+</script>

src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,12 @@
+<template>
+  <TooltipTrigger data-slot="tooltip-trigger" v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
+
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>

src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'