M0+M1: 基建 + 用户/密钥/核心代理

后端 (Go/Gin/GORM): - 配置(viper+env)、SQLite/Postgres 迁移、argon2id、AES-GCM 渠道密钥、JWT+refresh cookie - 用户注册/登录/刷新/登出、API Key CRUD(仅存哈希、明文一次展示) - 代理网关: /v1/chat/completions、/v1/responses、/v1/models 直通 OpenAI 渠道非流式+流式(SSE 零缓冲转发), 用量捕获(chat 末块/responses completed 嵌套), OpenAI 错误格式(401/402/404/502), 余额检查 - 异步批量记账 + 余额流水 + 日聚合, admin 用户/余额/配置 API - 单测: crypto/jwt/apikey/流式 usage 提取前端 (Vue3+TS+Vite+Tailwind v4): - taste-skill 设计 tokens: 深色仪表盘, 石墨+信号铜色, Outfit+JetBrains Mono - Landing/登录/注册, 控制台(仪表盘图表/密钥管理/用量明细) - 基础组件 Button/Input/Badge/Modal, ECharts 用量图部署: docker-compose(nginx+api+postgres), 双 Dockerfile, nginx SSE 反代联调: scripts/mockupstream 本地 mock 上游, 端到端验证通过
2026-08-15 13:10:47 +08:00
commit 360c6b33a6
75 changed files with 7044 additions and 0 deletions
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import client, { unwrap } from '../../api/client'
+import Badge from '../../components/ui/Badge.vue'
+
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
+
+interface BalanceInfo { balance: number; spent_last_30d: number; today: { requests: number; tokens: number; cost: number }; models_available: number }
+interface UsagePoint { date: string; requests: number; tokens: number; cost: number }
+interface LogItem { id: number; model: string; protocol: string; input_tokens: number; output_tokens: number; cost: number; latency_ms: number; status: string; created_at: string }
+
+const balance = ref<BalanceInfo | null>(null)
+const stats = ref<UsagePoint[]>([])
+const recentLogs = ref<LogItem[]>([])
+const error = ref('')
+
+const todayCost = computed(() => balance.value?.today.cost ?? 0)
+
+const chartOption = computed(() => ({
+  grid: { left: 8, right: 8, top: 24, bottom: 0, containLabel: true },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: '#16191d',
+    borderColor: '#282d34',
+    textStyle: { color: '#eae8e3', fontSize: 12, fontFamily: 'JetBrains Mono' },
+  },
+  xAxis: {
+    type: 'category',
+    data: stats.value.map((s) => s.date.slice(5)),
+    axisLine: { lineStyle: { color: '#282d34' } },
+    axisLabel: { color: '#63686f', fontFamily: 'JetBrains Mono', fontSize: 11 },
+    axisTick: { show: false },
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: { lineStyle: { color: '#1c2025' } },
+    axisLabel: { color: '#63686f', fontFamily: 'JetBrains Mono', fontSize: 11 },
+  },
+  series: [
+    {
+      name: '请求数',
+      type: 'bar',
+      data: stats.value.map((s) => s.requests),
+      itemStyle: { color: '#e5a13c', borderRadius: [3, 3, 0, 0] },
+      barMaxWidth: 22,
+    },
+  ],
+}))
+
+onMounted(async () => {
+  try {
+    const [b, s, logs] = await Promise.all([
+      unwrap<BalanceInfo>(client.get('/user/balance')),
+      unwrap<{ items: UsagePoint[] }>(client.get('/usage/stats', { params: { group: 'day' } })),
+      unwrap<{ items: LogItem[] }>(client.get('/usage/logs', { params: { page_size: 8 } })),
+    ])
+    balance.value = b
+    stats.value = s.items ?? []
+    recentLogs.value = logs.items ?? []
+  } catch (e: any) {
+    error.value = e.message || '加载失败'
+  }
+})
+
+const fmtCost = (n: number) => (n >= 0.01 ? n.toFixed(4) : n.toExponential(2))
+</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">今日与近 30 日用量总览</p>
+      </div>
+      <router-link to="/console/keys" class="rounded-md bg-signal-400 px-4 py-2 text-sm font-medium text-ink-950 transition-colors hover:bg-signal-300">新建密钥</router-link>
+    </div>
+
+    <p v-if="error" class="mt-4 rounded-md border border-ember-500/40 bg-ember-500/10 px-3 py-2 text-[13px] text-ember-300">{{ error }}</p>
+
+    <!-- 指标行 -->
+    <div class="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
+      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+        <p class="text-xs text-paper-500">余额</p>
+        <p class="num mt-1.5 text-2xl font-semibold text-mint-400">${{ balance?.balance.toFixed(4) ?? '—' }}</p>
+        <p class="num mt-1 text-[11px] text-paper-600">30 日消耗 ${{ fmtCost(balance?.spent_last_30d ?? 0) }}</p>
+      </div>
+      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+        <p class="text-xs text-paper-500">今日请求</p>
+        <p class="num mt-1.5 text-2xl font-semibold">{{ balance?.today.requests ?? '—' }}</p>
+        <p class="num mt-1 text-[11px] text-paper-600">{{ balance?.today.tokens ?? 0 }} tokens</p>
+      </div>
+      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+        <p class="text-xs text-paper-500">今日成本</p>
+        <p class="num mt-1.5 text-2xl font-semibold text-signal-300">${{ todayCost.toFixed(6) }}</p>
+        <p class="num mt-1 text-[11px] text-paper-600">按量计费 · USD</p>
+      </div>
+      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+        <p class="text-xs text-paper-500">可用模型</p>
+        <p class="num mt-1.5 text-2xl font-semibold">{{ balance?.models_available ?? '—' }}</p>
+        <p class="mt-1 text-[11px] text-paper-600">GET /v1/models 查看</p>
+      </div>
+    </div>
+
+    <!-- 图表 + 最近请求 -->
+    <div class="mt-6 grid grid-cols-1 gap-3 lg:grid-cols-[1.4fr_1fr]">
+      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+        <div class="mb-2 flex items-center justify-between">
+          <h2 class="text-sm font-medium text-paper-300">近 30 日请求</h2>
+          <span class="font-mono text-[11px] text-paper-600">usage/stats?group=day</span>
+        </div>
+        <VChart v-if="stats.length" class="h-56" :option="chartOption" autoresize />
+        <div v-else class="flex h-56 items-center justify-center text-[13px] text-paper-600">暂无数据，发起第一次请求后这里会出现图表</div>
+      </div>
+
+      <div class="rounded-lg border border-ink-700 bg-ink-900 p-4">
+        <div class="mb-2 flex items-center justify-between">
+          <h2 class="text-sm font-medium text-paper-300">最近请求</h2>
+          <router-link to="/console/usage" class="text-xs text-signal-300 hover:text-signal-200">全部 →</router-link>
+        </div>
+        <div v-if="recentLogs.length" class="divide-y divide-ink-800">
+          <div v-for="l in recentLogs" :key="l.id" class="flex items-center justify-between gap-3 py-2.5">
+            <div class="min-w-0">
+              <p class="truncate font-mono text-[12.5px] text-paper-100">{{ l.model }}</p>
+              <p class="num mt-0.5 text-[11px] text-paper-600">{{ l.protocol }} · {{ l.input_tokens }}/{{ l.output_tokens }} tok · {{ l.latency_ms }}ms</p>
+            </div>
+            <div class="flex shrink-0 items-center gap-2">
+              <span class="num text-[12.5px] text-paper-300">${{ fmtCost(l.cost) }}</span>
+              <Badge :tone="l.status === 'success' ? 'success' : 'error'" />
+            </div>
+          </div>
+        </div>
+        <div v-else class="flex h-48 items-center justify-center text-[13px] text-paper-600">还没有请求记录</div>
+      </div>
+    </div>
+  </div>
+</template>