<template>
  <div class="page-content">
    <div class="mb-5 flex justify-between"><div><h2 class="text-xl font-semibold">我的用量</h2><p class="text-g-500 mt-1 text-sm">统计仅包含归属于你账号的 API Key</p></div><ElSegmented v-model="days" :options="[{label:'今日',value:1},{label:'近 7 天',value:7},{label:'近 30 天',value:30}]" @change="load"/></div>
    <div class="mb-5 grid grid-cols-2 gap-4 lg:grid-cols-4"><ElCard shadow="never"><div class="text-g-500 text-sm">请求数</div><b class="mt-2 block text-2xl">{{stats.requests}}</b></ElCard><ElCard shadow="never"><div class="text-g-500 text-sm">总 Tokens</div><b class="mt-2 block text-2xl">{{stats.total_tokens}}</b></ElCard><ElCard shadow="never"><div class="text-g-500 text-sm">失败请求</div><b class="mt-2 block text-2xl">{{stats.failed_requests}}</b></ElCard><ElCard shadow="never"><div class="text-g-500 text-sm">费用（微单位）</div><b class="mt-2 block text-2xl">{{stats.cost_microunits}}</b></ElCard></div>
    <ElTable v-loading="loading" :data="logs"><ElTableColumn prop="recorded_at" label="时间" width="200"/><ElTableColumn prop="model" label="模型" min-width="170"/><ElTableColumn prop="protocol" label="协议" width="130"/><ElTableColumn prop="status_code" label="状态" width="90"><template #default="{row}"><ElTag :type="row.status_code<400?'success':'danger'">{{row.status_code||'-'}}</ElTag></template></ElTableColumn><ElTableColumn label="Tokens" width="120"><template #default="{row}">{{(row.prompt_tokens||0)+(row.completion_tokens||0)}}</template></ElTableColumn><ElTableColumn prop="latency_ms" label="耗时(ms)" width="110"/><ElTableColumn prop="request_id" label="Request ID" min-width="220"/></ElTable>
  </div>
</template>
<script setup lang="ts">
import{AuditEvent,Stats,fetchLogs,fetchStats}from'@/api/portal';const loading=ref(false),days=ref(7),logs=ref<AuditEvent[]>([]),stats=reactive<Stats>({days:7,requests:0,failed_requests:0,prompt_tokens:0,completion_tokens:0,total_tokens:0,cost_microunits:0});async function load(){loading.value=true;try{const[s,l]=await Promise.all([fetchStats(days.value),fetchLogs(days.value)]);Object.assign(stats,s);logs.value=l.items}finally{loading.value=false}}onMounted(load)
</script>

