openteam/web/src/views/console/UsageView.vue

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import client, { unwrap } from '../../api/client'
import Badge from '../../components/ui/Badge.vue'

interface LogItem {
  id: number
  request_id: string
  model: string
  protocol: string
  input_tokens: number
  output_tokens: number
  cache_read_tokens: number
  cost: number
  latency_ms: number
  status: string
  created_at: string
}

const logs = ref<LogItem[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = 20
const modelFilter = ref('')
const models = ref<string[]>([])
const loading = ref(false)

const pages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))

async function load() {
  loading.value = true
  try {
    const data = await unwrap<{ items: LogItem[]; total: number }>(
      client.get('/usage/logs', { params: { page: page.value, page_size: pageSize, model: modelFilter.value || undefined } }),
    )
    logs.value = data.items
    total.value = data.total
    if (!modelFilter.value) {
      const m = await unwrap<{ items: string[] }>(client.get('/usage/logs', { params: { page_size: 1 } })).catch(() => ({ items: [] }))
      void m
    }
  } catch {
    // ignore
  } finally {
    loading.value = false
  }
}

async function loadModels() {
  try {
    const data = await unwrap<{ items: string[] }>(client.get('/user/models'))
    models.value = data.items ?? []
  } catch { /* ignore */ }
}

onMounted(() => {
  load()
  loadModels()
})

const fmtCost = (n: number) => (n >= 0.01 ? n.toFixed(4) : n.toExponential(2))
const fmtDate = (s: string) => new Date(s).toLocaleString('zh-CN', { hour12: false })
</script>

<template>
  <div>
    <div class="flex items-end justify-between">
      <div>
        <h1 class="text-xl font-semibold tracking-tight">用量明细</h1>
        <p class="mt-1 text-[13px] text-paper-500">请求级记录 · 按当时价格入账</p>
      </div>
      <select
        v-model="modelFilter"
        class="h-9 rounded-md border border-ink-600 bg-ink-900 px-3 text-[13px] text-paper-300 focus:border-signal-400 focus:outline-none"
        @change="page = 1; load()"
      >
        <option value="">全部模型</option>
        <option v-for="m in models" :key="m" :value="m">{{ m }}</option>
      </select>
    </div>

    <div class="mt-6 overflow-hidden rounded-lg border border-ink-700">
      <table class="w-full text-left text-[13px]">
        <thead>
          <tr class="border-b border-ink-700 bg-ink-900 text-xs text-paper-500">
            <th class="px-4 py-3 font-medium">时间</th>
            <th class="px-4 py-3 font-medium">模型</th>
            <th class="px-4 py-3 font-medium">协议</th>
            <th class="px-4 py-3 text-right font-medium">输入 tok</th>
            <th class="px-4 py-3 text-right font-medium">输出 tok</th>
            <th class="px-4 py-3 text-right font-medium">成本</th>
            <th class="px-4 py-3 text-right font-medium">耗时</th>
            <th class="px-4 py-3 font-medium">状态</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-ink-800 bg-ink-900/50">
          <tr v-for="l in logs" :key="l.id" class="transition-colors hover:bg-ink-850">
            <td class="num px-4 py-3 text-paper-500">{{ fmtDate(l.created_at) }}</td>
            <td class="px-4 py-3"><code class="font-mono text-[12.5px] text-paper-100">{{ l.model }}</code></td>
            <td class="px-4 py-3 font-mono text-[12px] text-paper-500">{{ l.protocol }}</td>
            <td class="num px-4 py-3 text-right text-paper-300">{{ l.input_tokens }}</td>
            <td class="num px-4 py-3 text-right text-paper-300">{{ l.output_tokens }}</td>
            <td class="num px-4 py-3 text-right text-signal-300">${{ fmtCost(l.cost) }}</td>
            <td class="num px-4 py-3 text-right text-paper-500">{{ l.latency_ms }}ms</td>
            <td class="px-4 py-3"><Badge :tone="l.status === 'success' ? 'success' : 'error'" /></td>
          </tr>
          <tr v-if="!logs.length">
            <td colspan="8" class="px-4 py-12 text-center text-[13px] text-paper-600">{{ loading ? '加载中…' : '暂无用量记录' }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-4 flex items-center justify-between">
      <p class="num text-xs text-paper-600">共 {{ total }} 条</p>
      <div class="flex items-center gap-1.5">
        <button
          class="rounded-md border border-ink-600 px-3 py-1.5 text-xs text-paper-300 transition-colors hover:border-signal-400 disabled:opacity-40 cursor-pointer disabled:cursor-default"
          :disabled="page <= 1"
          @click="page--; load()"
        >上一页</button>
        <span class="num px-2 text-xs text-paper-500">{{ page }} / {{ pages }}</span>
        <button
          class="rounded-md border border-ink-600 px-3 py-1.5 text-xs text-paper-300 transition-colors hover:border-signal-400 disabled:opacity-40 cursor-pointer disabled:cursor-default"
          :disabled="page >= pages"
          @click="page++; load()"
        >下一页</button>
      </div>
    </div>
  </div>
</template>