<script setup lang="ts">
import { ref, onMounted } from 'vue'
import http from '@/utils/http'

// 前端版本号：构建期从 package.json 注入，无需接口
const frontendVersion = __FRONTEND_VERSION__ || '0.1.0'
// 后端版本号：从 API 获取
const backendVersion = ref('')
const buildTime = ref('')

onMounted(async () => {
  try {
    const res = await http.get('/api/version')
    if (res.data?.success) {
      backendVersion.value = res.data.data?.backendVersion || ''
      buildTime.value = res.data.data?.buildTime || ''
    }
  } catch {
    // 静默失败
  }
})
</script>

<template>
  <span
    class="app-version"
    :title="buildTime ? `构建时间: ${buildTime}` : ''"
  >
    <span v-if="frontendVersion" class="ver-item">前端 v{{ frontendVersion }}</span>
    <span v-if="backendVersion" class="ver-divider">/</span>
    <span v-if="backendVersion" class="ver-item">后端 v{{ backendVersion }}</span>
  </span>
</template>

<style scoped lang="scss">
.app-version {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 4px;

  .ver-divider {
    opacity: 0.5;
  }
}
</style>