Aether/frontend/src/features/providers/components/ProviderBalanceCell.vue

<template>
  <!-- 显示从上游 API 查询的余额 -->
  <div
    v-if="provider.ops_configured && getProviderBalance(provider.id)"
    class="flex items-center gap-2 text-xs"
  >
    <!-- 余额文字：balance + points 分开显示，或普通余额 -->
    <template
      v-for="(bd, idx) in [getProviderBalanceBreakdown(provider.id)]"
      :key="idx"
    >
      <div
        v-if="bd"
        class="min-w-[4.5rem] tabular-nums leading-tight"
      >
        <div class="font-semibold text-foreground/90">
          ${{ bd.balance.toFixed(2) }}
        </div>
        <div class="text-muted-foreground/70 text-[10px]">
          ${{ bd.points.toFixed(2) }}
        </div>
      </div>
      <span
        v-else
        class="font-semibold text-foreground/90 min-w-[4.5rem] tabular-nums"
      >
        {{ formatBalanceDisplay(getProviderBalance(provider.id)) }}
      </span>
    </template>
    <!-- 窗口限额 + 签到状态 + Cookie 失效警告 -->
    <div
      v-if="getProviderBalanceExtra(provider.id, provider.ops_architecture_id).length > 0 || getProviderCheckin(provider.id) || getProviderCookieExpired(provider.id)"
      class="text-muted-foreground/70 space-y-0.5"
    >
      <!-- 限额（进度条 + 倒计时，每行一个） -->
      <template
        v-for="item in getProviderBalanceExtra(provider.id, provider.ops_architecture_id)"
        :key="item.label"
      >
        <div
          :title="item.tooltip"
          class="flex items-center gap-1"
        >
          <span class="text-[10px] text-muted-foreground/60 w-4">{{ item.label }}</span>
          <div class="w-12 h-1.5 bg-border rounded-full overflow-hidden">
            <div
              class="h-full rounded-full"
              :class="[
                item.percent !== undefined && item.percent >= 50 ? 'bg-green-500' :
                item.percent !== undefined && item.percent >= 20 ? 'bg-amber-500' : 'bg-red-500'
              ]"
              :style="{ width: `${item.percent ?? 0}%` }"
            />
          </div>
          <span class="text-[10px] text-muted-foreground/50 w-7 text-right tabular-nums">{{ item.value }}</span>
          <span
            v-if="item.resetsAt"
            class="text-[10px] text-muted-foreground/40 w-14 text-right tabular-nums"
          >{{ formatResetCountdown(item.resetsAt) }}</span>
        </div>
      </template>
      <!-- Cookie 失效警告 -->
      <div
        v-if="getProviderCookieExpired(provider.id)"
        class="flex items-center gap-1"
      >
        <span
          class="text-[10px] text-amber-600 dark:text-amber-500"
          :title="getProviderCookieExpired(provider.id)?.message"
        >签到 Cookie 已失效</span>
      </div>
      <!-- 签到状态 -->
      <div
        v-else-if="getProviderCheckin(provider.id)"
        class="flex items-center gap-1.5"
      >
        <span
          v-if="getProviderCheckin(provider.id)?.success !== false"
          class="text-[10px] text-muted-foreground/60"
          :title="getProviderCheckin(provider.id)?.message"
        >已签到</span>
        <span
          v-else
          class="text-[10px] text-destructive/70"
          :title="getProviderCheckin(provider.id)?.message"
        >签到失败</span>
      </div>
    </div>
  </div>
  <!-- 显示保存到 Key 的手动余额查询摘要 -->
  <div
    v-else-if="getSavedKeyBalance(provider)"
    class="space-y-0.5 text-xs"
    :title="getSavedKeyBalanceTitle(provider)"
  >
    <div class="flex items-center gap-1.5">
      <WalletCards class="h-3 w-3 text-primary" />
      <span class="font-semibold text-foreground/90 tabular-nums">
        {{ formatKeyBalanceAmount(getSavedKeyBalance(provider)?.total_available, getSavedKeyBalance(provider)?.currency || 'USD') }}
      </span>
    </div>
    <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[10px] text-muted-foreground/70">
      <span v-if="toFiniteNumber(getSavedKeyBalance(provider)?.total_used) !== null">
        已用 {{ formatKeyBalanceAmount(getSavedKeyBalance(provider)?.total_used, getSavedKeyBalance(provider)?.currency || 'USD') }}
      </span>
      <span>
        {{ keyBalanceTemplateLabel(getSavedKeyBalance(provider)?.architecture_id) }} · {{ formatKeyBalanceUpdatedAt(getSavedKeyBalance(provider)?.updated_at) }}
      </span>
    </div>
  </div>
  <!-- 余额正在加载中 -->
  <div
    v-else-if="provider.ops_configured && isBalanceLoading(provider.id)"
    class="flex items-center gap-1.5 text-xs text-muted-foreground"
  >
    <Loader2 class="h-3 w-3 animate-spin" />
    <span>加载中...</span>
  </div>
  <!-- 余额查询失败时显示错误 -->
  <div
    v-else-if="provider.ops_configured && getProviderBalanceError(provider.id)"
    class="text-xs text-destructive/80"
    :title="getProviderBalanceError(provider.id)?.message"
  >
    {{ getProviderBalanceError(provider.id)?.message }}
  </div>
  <!-- 显示本地配置的月度配额 -->
  <div
    v-else-if="provider.billing_type === 'monthly_quota'"
    class="space-y-0.5 text-xs"
  >
    <Badge
      variant="outline"
      class="text-[10px] font-normal border-border/50"
    >
      {{ formatBillingType(provider.billing_type) }}
    </Badge>
    <div class="text-muted-foreground/70 pt-0.5">
      <span
        class="font-semibold"
        :class="getQuotaUsedColorClass(provider)"
      >${{ (provider.monthly_used_usd ?? 0).toFixed(2) }}</span> / <span class="font-medium">${{ (provider.monthly_quota_usd ?? 0).toFixed(2) }}</span>
    </div>
  </div>
  <span
    v-else
    class="text-xs text-muted-foreground/50"
  >-</span>
</template>

<script setup lang="ts">
import { Loader2, WalletCards } from 'lucide-vue-next'
import Badge from '@/components/ui/badge.vue'
import type { ProviderKeyBalanceSummary, ProviderWithEndpointsSummary } from '@/api/endpoints'
import { formatBillingType } from '@/utils/format'
import type { BalanceExtraItem } from '@/features/providers/auth-templates'
import {
  formatKeyBalanceAmount,
  formatKeyBalanceUpdatedAt,
  hasKeyBalanceSummary,
  keyBalanceTemplateLabel,
  toFiniteNumber,
} from '@/features/providers/utils/keyBalanceSummary'

defineProps<{
  provider: ProviderWithEndpointsSummary
  isBalanceLoading: (providerId: string) => boolean
  getProviderBalance: (providerId: string) => { available: number | null; currency: string } | null
  getProviderBalanceBreakdown: (providerId: string) => { balance: number; points: number; currency: string } | null
  getProviderBalanceError: (providerId: string) => { status: string; message: string } | null
  getProviderCheckin: (providerId: string) => { success: boolean | null; message: string } | null
  getProviderCookieExpired: (providerId: string) => { expired: boolean; message: string } | null
  getProviderBalanceExtra: (providerId: string, architectureId?: string) => BalanceExtraItem[]
  formatBalanceDisplay: (balance: { available: number | null; currency: string } | null) => string
  formatResetCountdown: (resetsAt: number) => string
  getQuotaUsedColorClass: (provider: ProviderWithEndpointsSummary) => string
}>()

function getSavedKeyBalance(provider: ProviderWithEndpointsSummary): ProviderKeyBalanceSummary | null {
  return hasKeyBalanceSummary(provider.key_balance_summary) ? provider.key_balance_summary : null
}

function getSavedKeyBalanceTitle(provider: ProviderWithEndpointsSummary): string {
  const summary = getSavedKeyBalance(provider)
  if (!summary) return ''
  const parts = [
    summary.key_name ? `Key: ${summary.key_name}` : null,
    keyBalanceTemplateLabel(summary.architecture_id),
    formatKeyBalanceUpdatedAt(summary.updated_at),
  ].filter(Boolean)
  return parts.join(' · ')
}
</script>