mirrors2/openteam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端: 浅色模式 + 系统自动主题

Browse Source 
- 引入语义化 CSS 变量令牌(bg/surface/edge/ink/muted/accent 等), data-theme 三态切换
- theme store(localStorage + 系统偏好跟随), 首屏内联脚本防主题闪烁
- ThemeToggle 组件(浅色/深色/跟随系统) 置于导航与控制台顶栏
- 全量替换硬编码 zinc/emerald/red 类为令牌, 图表基线/状态色随主题适配
- 浅色对比度校准(accent/err/warn 深浅各一套)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sakurasan
2026-08-15 16:20:43 +08:00
co-authored by Claude
parent 4846db9293
commit a422034b2b
24 changed files with 380 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/LandingView.vue
+45 -43
View File
@@ -1,32 +1,34 @@
<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import ThemeToggle from '@/components/ui/ThemeToggle.vue'
const auth = useAuthStore()
</script>
<template>
<div class="min-h-[100dvh] bg-zinc-950 text-zinc-100">
<div class="min-h-[100dvh] bg-bg text-ink">
<!-- 导航 -->
<header class="sticky top-0 z-40 border-b border-zinc-800/60 bg-zinc-950/80 backdrop-blur">
<header class="sticky top-0 z-40 border-b border-edge/60 bg-bg/80 backdrop-blur">
<div class="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
<div class="flex items-center gap-2">
<img src="/favicon.svg" alt="" class="size-5" />
<span class="text-sm font-semibold tracking-tight">openteam</span>
</div>
<nav class="flex items-center gap-2">
<ThemeToggle />
<router-link
v-if="!auth.isAuthed"
to="/login"
class="rounded-md px-3 py-1.5 text-sm text-zinc-400 transition hover:text-zinc-100"
class="rounded-md px-3 py-1.5 text-sm text-muted transition hover:text-ink"
>
登录
</router-link>
<router-link v-else to="/console/dashboard" class="rounded-md px-3 py-1.5 text-sm text-zinc-400 transition hover:text-zinc-100">
<router-link v-else to="/console/dashboard" class="rounded-md px-3 py-1.5 text-sm text-muted transition hover:text-ink">
控制台
</router-link>
<router-link
v-if="!auth.isAuthed"
to="/register"
class="rounded-md bg-accent px-3.5 py-1.5 text-sm font-medium text-zinc-950 transition hover:bg-accent-strong"
class="rounded-md bg-accent px-3.5 py-1.5 text-sm font-medium text-ink transition hover:bg-accent-strong"
>
免费注册
</router-link>
@@ -39,49 +41,49 @@ const auth = useAuthStore()
<div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-500/40 to-transparent" />
<div class="mx-auto grid max-w-6xl items-center gap-10 px-4 pt-20 pb-16 lg:grid-cols-2 lg:pt-24">
<div class="max-w-xl">
<p class="mb-3 font-mono text-xs tracking-wide text-emerald-400/80">LLM API 中转网关</p>
<p class="mb-3 font-mono text-xs tracking-wide text-accent">LLM API 中转网关</p>
<h1 class="text-4xl leading-none font-semibold tracking-tight md:text-5xl">
一个 Key，调用所有主流模型
</h1>
<p class="mt-5 max-w-md text-base leading-relaxed text-zinc-400">
<p class="mt-5 max-w-md text-base leading-relaxed text-muted">
统一 OpenAI 与 Anthropic 协议入口，三套 API 自动互转，用量、计费与 API Key 管理开箱即用。
</p>
<div class="mt-8 flex items-center gap-3">
<router-link
to="/register"
class="inline-flex h-10 items-center rounded-md bg-accent px-5 text-sm font-medium text-zinc-950 transition hover:bg-accent-strong active:scale-[0.98]"
class="inline-flex h-10 items-center rounded-md bg-accent px-5 text-sm font-medium text-ink transition hover:bg-accent-strong active:scale-[0.98]"
>
免费注册
</router-link>
<router-link
to="/login"
class="inline-flex h-10 items-center rounded-md border border-zinc-700 px-5 text-sm text-zinc-200 transition hover:border-zinc-500"
class="inline-flex h-10 items-center rounded-md border border-edge2 px-5 text-sm text-ink transition hover:border-edge2"
>
登录
</router-link>
</div>
<p class="mt-5 font-mono text-xs text-zinc-600">不用换 SDK，改一行 base_url 即可接入</p>
<p class="mt-5 font-mono text-xs text-muted">不用换 SDK，改一行 base_url 即可接入</p>
</div>
<!-- 调用演示（真实格式，非伪截图） -->
<div class="card overflow-hidden font-mono text-xs">
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 py-2.5">
<span class="size-2.5 rounded-full bg-zinc-700" />
<span class="size-2.5 rounded-full bg-zinc-700" />
<span class="ml-2 text-zinc-500">curl api.openteam.dev</span>
<div class="flex items-center gap-1.5 border-b border-edge px-4 py-2.5">
<span class="size-2.5 rounded-full bg-surface2" />
<span class="size-2.5 rounded-full bg-surface2" />
<span class="ml-2 text-muted">curl api.openteam.dev</span>
</div>
<div class="space-y-3 p-4 leading-relaxed">
<div>
<p class="text-zinc-400"><span class="text-emerald-400">$</span> curl https://api.openteam.dev/v1/chat/completions</p>
<p class="text-zinc-400"> -H <span class="text-emerald-300">"Authorization: Bearer sk-..."</span> \</p>
<p class="text-zinc-400"> -d <span class="text-zinc-300">'{"model": "claude-sonnet-5", "messages": [{"role": "user", "content": "你好"}]}'</span></p>
<p class="text-muted"><span class="text-accent">$</span> curl https://api.openteam.dev/v1/chat/completions</p>
<p class="text-muted"> -H <span class="text-accent">"Authorization: Bearer sk-..."</span> \</p>
<p class="text-muted"> -d <span class="text-ink">'{"model": "claude-sonnet-5", "messages": [{"role": "user", "content": "你好"}]}'</span></p>
</div>
<div class="border-t border-zinc-800 pt-3 text-zinc-500">
<p class="text-zinc-600"># OpenAI 格式请求，网关自动转 Anthropic 协议</p>
<p class="text-zinc-300">data: {"id":"resp_1","model":"claude-sonnet-5","choices":[{</p>
<p class="text-zinc-300">&nbsp;&nbsp;"delta":{"content":"你好，这是流式回复"}</p>
<p class="text-zinc-300">}]}</p>
<p class="text-zinc-300">data: [DONE]</p>
<div class="border-t border-edge pt-3 text-muted">
<p class="text-muted"># OpenAI 格式请求，网关自动转 Anthropic 协议</p>
<p class="text-ink">data: {"id":"resp_1","model":"claude-sonnet-5","choices":[{</p>
<p class="text-ink">&nbsp;&nbsp;"delta":{"content":"你好，这是流式回复"}</p>
<p class="text-ink">}]}</p>
<p class="text-ink">data: [DONE]</p>
</div>
</div>
</div>
@@ -89,57 +91,57 @@ const auth = useAuthStore()
</section>
<!-- 协议入口 -->
<section class="border-t border-zinc-800/60">
<section class="border-t border-edge/60">
<div class="mx-auto max-w-6xl px-4 py-16">
<h2 class="text-2xl font-semibold tracking-tight">三套协议，一个入口</h2>
<p class="mt-2 max-w-xl text-sm text-zinc-500">
<p class="mt-2 max-w-xl text-sm text-muted">
对客户端暴露统一的 OpenAI 兼容入口；客户端协议与上游渠道不匹配时自动转换，无需关心背后接的是哪家。
</p>
<div class="card mt-8 divide-y divide-zinc-800/70">
<div class="card mt-8 divide-y divide-edge/70">
<div v-for="p in [
{ path: 'POST /v1/chat/completions', desc: 'OpenAI Chat，兼容面最广，SDK 与工具链最全', tag: 'OpenAI' },
{ path: 'POST /v1/responses', desc: 'OpenAI Responses，新一代 SDK 与 Agents 首选', tag: 'OpenAI' },
{ path: 'POST /v1/messages', desc: 'Anthropic Messages，Claude 生态原生格式', tag: 'Anthropic' },
{ path: 'GET /v1/models', desc: 'OpenAI 风格模型列表', tag: 'List' },
]" :key="p.path" class="grid gap-1 px-5 py-3.5 sm:grid-cols-3 sm:items-center">
<code class="font-mono text-sm text-emerald-300">{{ p.path }}</code>
<p class="text-sm text-zinc-400 sm:col-span-1">{{ p.desc }}</p>
<span class="hidden justify-self-end font-mono text-[11px] text-zinc-600 sm:block">{{ p.tag }}</span>
<code class="font-mono text-sm text-accent">{{ p.path }}</code>
<p class="text-sm text-muted sm:col-span-1">{{ p.desc }}</p>
<span class="hidden justify-self-end font-mono text-[11px] text-muted sm:block">{{ p.tag }}</span>
</div>
</div>
</div>
</section>
<!-- 网关能力 -->
<section class="border-t border-zinc-800/60">
<section class="border-t border-edge/60">
<div class="mx-auto max-w-6xl px-4 py-16">
<h2 class="text-2xl font-semibold tracking-tight">网关替你处理的事</h2>
<div class="mt-8 grid gap-4 lg:grid-cols-3">
<div class="card p-5 lg:col-span-2">
<p class="font-mono text-xs text-emerald-400/80">responses → claude-sonnet-5</p>
<p class="font-mono text-xs text-accent">responses → claude-sonnet-5</p>
<h3 class="mt-2 text-lg font-semibold">协议自动转换</h3>
<p class="mt-2 text-sm leading-relaxed text-zinc-500">
<p class="mt-2 text-sm leading-relaxed text-muted">
客户端按 Responses 调用 Claude 模型，网关转成 Anthropic 协议打给上游，再以 Responses 事件流式返回。直通优先，能力无损时零转换。
</p>
</div>
<div class="card p-5">
<p class="font-mono text-xs text-zinc-600">usage · daily</p>
<p class="font-mono text-xs text-muted">usage · daily</p>
<h3 class="mt-2 text-lg font-semibold">用量与计费</h3>
<p class="mt-2 text-sm leading-relaxed text-zinc-500">
<p class="mt-2 text-sm leading-relaxed text-muted">
请求级 token 统计，按模型价格自动扣费，日粒度报表与余额流水可追溯。
</p>
</div>
<div class="card p-5">
<p class="font-mono text-xs text-zinc-600">sk-…</p>
<p class="font-mono text-xs text-muted">sk-…</p>
<h3 class="mt-2 text-lg font-semibold">API Key 管理</h3>
<p class="mt-2 text-sm leading-relaxed text-zinc-500">
<p class="mt-2 text-sm leading-relaxed text-muted">
密钥仅存哈希，支持配额、过期与模型白名单，创建时一次性展示。
</p>
</div>
<div class="card p-5 lg:col-span-2">
<p class="font-mono text-xs text-zinc-600">channels · lb · health</p>
<p class="font-mono text-xs text-muted">channels · lb · health</p>
<h3 class="mt-2 text-lg font-semibold">多渠道接入</h3>
<p class="mt-2 text-sm leading-relaxed text-zinc-500">
<p class="mt-2 text-sm leading-relaxed text-muted">
一个模型绑定多个上游渠道，按权重与健康状态选择，故障自动转移。管理员在后台一键接入新渠道、导入模型并定价。
</p>
</div>
@@ -148,21 +150,21 @@ const auth = useAuthStore()
</section>
<!-- CTA -->
<section class="border-t border-zinc-800/60">
<section class="border-t border-edge/60">
<div class="mx-auto max-w-6xl px-4 py-20 text-center">
<h2 class="text-2xl font-semibold tracking-tight">自托管，密钥在自己手里</h2>
<p class="mx-auto mt-3 max-w-md text-sm text-zinc-500">Docker Compose 一键部署，PostgreSQL 存账，渠道密钥加密存储。</p>
<p class="mx-auto mt-3 max-w-md text-sm text-muted">Docker Compose 一键部署，PostgreSQL 存账，渠道密钥加密存储。</p>
<router-link
to="/register"
class="mt-8 inline-flex h-10 items-center rounded-md bg-accent px-6 text-sm font-medium text-zinc-950 transition hover:bg-accent-strong active:scale-[0.98]"
class="mt-8 inline-flex h-10 items-center rounded-md bg-accent px-6 text-sm font-medium text-ink transition hover:bg-accent-strong active:scale-[0.98]"
>
开始使用
</router-link>
</div>
</section>
<footer class="border-t border-zinc-800/60">
<div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-6 text-xs text-zinc-600">
<footer class="border-t border-edge/60">
<div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-6 text-xs text-muted">
<div class="flex items-center gap-2">
<img src="/favicon.svg" alt="" class="size-4" />
<span>openteam · LLM API 中转站</span>
web/src/views/LoginView.vue
+6 -4
View File
@@ -6,6 +6,7 @@ import { useToastStore } from '@/stores/toast'
import { errMsg } from '@/api/client'
import Button from '@/components/ui/Button.vue'
import Input from '@/components/ui/Input.vue'
import ThemeToggle from '@/components/ui/ThemeToggle.vue'
const router = useRouter()
const route = useRoute()
@@ -35,24 +36,25 @@ async function submit() {
</script>
<template>
<div class="flex min-h-[100dvh] items-center justify-center bg-zinc-950 px-4">
<div class="flex min-h-[100dvh] items-center justify-center bg-bg px-4">
<ThemeToggle class="fixed right-4 top-4" />
<div class="w-full max-w-sm">
<div class="mb-8 text-center">
<div class="mb-3 inline-flex items-center gap-2">
<img src="/favicon.svg" alt="" class="size-7" />
<span class="text-lg font-semibold tracking-tight">openteam</span>
</div>
<p class="text-sm text-zinc-500">登录到控制台</p>
<p class="text-sm text-muted">登录到控制台</p>
</div>
<form class="card space-y-4 p-6" @submit.prevent="submit">
<Input v-model="username" label="用户名或邮箱" autocomplete="username" placeholder="alice" />
<Input v-model="password" label="密码" type="password" autocomplete="current-password" />
<p v-if="error" class="text-xs text-red-400">{{ error }}</p>
<p v-if="error" class="text-xs text-err">{{ error }}</p>
<Button class="w-full" :loading="loading" type="submit">登录</Button>
</form>
<p class="mt-5 text-center text-sm text-zinc-500">
<p class="mt-5 text-center text-sm text-muted">
还没有账号?
<router-link to="/register" class="text-accent hover:text-accent-strong">注册</router-link>
</p>
web/src/views/RegisterView.vue
+6 -4
View File
@@ -6,6 +6,7 @@ import { useToastStore } from '@/stores/toast'
import { errMsg } from '@/api/client'
import Button from '@/components/ui/Button.vue'
import Input from '@/components/ui/Input.vue'
import ThemeToggle from '@/components/ui/ThemeToggle.vue'
const router = useRouter()
const auth = useAuthStore()
@@ -42,14 +43,15 @@ async function submit() {
</script>
<template>
<div class="flex min-h-[100dvh] items-center justify-center bg-zinc-950 px-4">
<div class="flex min-h-[100dvh] items-center justify-center bg-bg px-4">
<ThemeToggle class="fixed right-4 top-4" />
<div class="w-full max-w-sm">
<div class="mb-8 text-center">
<div class="mb-3 inline-flex items-center justify-center gap-2">
<img src="/favicon.svg" alt="" class="size-7" />
<span class="text-lg font-semibold tracking-tight">openteam</span>
</div>
<p class="text-sm text-zinc-500">一个 Key 访问多家模型</p>
<p class="text-sm text-muted">一个 Key 访问多家模型</p>
</div>
<form class="card space-y-4 p-6" @submit.prevent="submit">
@@ -62,11 +64,11 @@ async function submit() {
autocomplete="new-password"
hint="至少 8 位"
/>
<p v-if="error" class="text-xs text-red-400">{{ error }}</p>
<p v-if="error" class="text-xs text-err">{{ error }}</p>
<Button class="w-full" :loading="loading" type="submit">注册</Button>
</form>
<p class="mt-5 text-center text-sm text-zinc-500">
<p class="mt-5 text-center text-sm text-muted">
已有账号?
<router-link to="/login" class="text-accent hover:text-accent-strong">登录</router-link>
</p>
web/src/views/admin/ChannelsView.vue
+14 -14
View File
@@ -131,7 +131,7 @@ onMounted(load)
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-lg font-semibold">渠道</h1>
<p class="text-sm text-zinc-500">接入上游服务，API Key 加密存储</p>
<p class="text-sm text-muted">接入上游服务，API Key 加密存储</p>
</div>
<Button @click="openCreate">添加渠道</Button>
</div>
@@ -140,7 +140,7 @@ onMounted(load)
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-zinc-800 text-left text-xs text-zinc-500">
<tr class="border-b border-edge text-left text-xs text-muted">
<th scope="col" class="px-4 py-2.5 font-medium">名称</th>
<th scope="col" class="px-4 py-2.5 font-medium">类型</th>
<th scope="col" class="px-4 py-2.5 font-medium">Base URL</th>
@@ -152,29 +152,29 @@ onMounted(load)
</thead>
<tbody>
<tr v-for="ch in channels" :key="ch.id" class="table-row">
<td class="px-4 py-2.5 text-zinc-200">{{ ch.name }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-400">{{ providerMap[ch.provider] }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-500">{{ ch.base_url }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-600">{{ ch.api_key_masked || '****' }}</td>
<td class="px-4 py-2.5 text-ink">{{ ch.name }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ providerMap[ch.provider] }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ ch.base_url }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ ch.api_key_masked || '****' }}</td>
<td class="px-4 py-2.5">
<Badge :variant="ch.health_status === 'healthy' ? 'ok' : ch.health_status === 'cooldown' ? 'err' : 'warn'">
{{ ch.health_status }}
</Badge>
</td>
<td class="px-4 py-2.5 text-xs text-zinc-400">{{ ch.enabled ? '是' : '否' }}</td>
<td class="px-4 py-2.5 text-xs text-muted">{{ ch.enabled ? '是' : '否' }}</td>
<td class="px-4 py-2.5 text-right">
<div class="flex justify-end gap-2">
<button class="text-xs text-zinc-500 hover:text-accent" :disabled="busyId === ch.id" @click="testChannel(ch)">
<button class="text-xs text-muted hover:text-accent" :disabled="busyId === ch.id" @click="testChannel(ch)">
{{ busyId === ch.id ? '测试中…' : '测试' }}
</button>
<button class="text-xs text-zinc-500 hover:text-accent" @click="importModels(ch)">导入模型</button>
<button class="text-xs text-zinc-500 hover:text-zinc-200" @click="openEdit(ch)">编辑</button>
<button class="text-xs text-zinc-500 hover:text-red-400" @click="remove(ch)">删除</button>
<button class="text-xs text-muted hover:text-accent" @click="importModels(ch)">导入模型</button>
<button class="text-xs text-muted hover:text-ink" @click="openEdit(ch)">编辑</button>
<button class="text-xs text-muted hover:text-err" @click="remove(ch)">删除</button>
</div>
</td>
</tr>
<tr v-if="channels.length === 0">
<td colspan="7" class="px-4 py-10 text-center text-sm text-zinc-600">还没有渠道，点击「添加渠道」</td>
<td colspan="7" class="px-4 py-10 text-center text-sm text-muted">还没有渠道，点击「添加渠道」</td>
</tr>
</tbody>
</table>
@@ -186,8 +186,8 @@ onMounted(load)
<div class="grid grid-cols-2 gap-4">
<Input v-model="form.name" label="名称" placeholder="openai" />
<label class="block">
<span class="mb-1.5 block text-xs font-medium text-zinc-400">API 类型</span>
<select v-model="form.provider" class="h-10 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 text-sm text-zinc-100 outline-none focus:border-accent">
<span class="mb-1.5 block text-xs font-medium text-muted">API 类型</span>
<select v-model="form.provider" class="h-10 w-full rounded-md border border-edge2 bg-surface px-3 text-sm text-ink outline-none focus:border-accent">
<option value="openai">OpenAI</option>
<option value="anthropic">Anthropic</option>
<option value="compatible">兼容</option>
web/src/views/admin/ConfigView.vue
+12 -12
View File
@@ -41,49 +41,49 @@ onMounted(load)
<div class="mx-auto max-w-2xl">
<div class="mb-6">
<h1 class="text-lg font-semibold">系统配置</h1>
<p class="text-sm text-zinc-500">注册策略等平台级配置</p>
<p class="text-sm text-muted">注册策略等平台级配置</p>
</div>
<div class="card space-y-5 p-6">
<div v-if="loading" class="py-8 text-center text-sm text-zinc-600">加载中…</div>
<div v-if="loading" class="py-8 text-center text-sm text-muted">加载中…</div>
<template v-else>
<div class="space-y-4">
<div>
<p class="mb-1.5 text-xs font-medium text-zinc-400">注册模式</p>
<p class="mb-1.5 text-xs font-medium text-muted">注册模式</p>
<div class="flex gap-2">
<button
class="flex-1 rounded-md border px-3 py-2 text-sm transition"
:class="config.registration_mode === 'open' ? 'border-accent bg-accent/10 text-emerald-300' : 'border-zinc-700 text-zinc-400'"
:class="config.registration_mode === 'open' ? 'border-accent bg-accent/10 text-accent' : 'border-edge2 text-muted'"
@click="config.registration_mode = 'open'"
>
开放注册
</button>
<button
class="flex-1 rounded-md border px-3 py-2 text-sm transition"
:class="config.registration_mode === 'invite' ? 'border-accent bg-accent/10 text-emerald-300' : 'border-zinc-700 text-zinc-400'"
:class="config.registration_mode === 'invite' ? 'border-accent bg-accent/10 text-accent' : 'border-edge2 text-muted'"
@click="config.registration_mode = 'invite'"
>
邀请码
</button>
</div>
<p class="mt-1.5 text-xs text-zinc-600">邀请模式下注册需填写有效邀请码（invite_codes 配置）</p>
<p class="mt-1.5 text-xs text-muted">邀请模式下注册需填写有效邀请码（invite_codes 配置）</p>
</div>
<div>
<p class="mb-1.5 text-xs font-medium text-zinc-400">邀请码（逗号分隔）</p>
<p class="mb-1.5 text-xs font-medium text-muted">邀请码（逗号分隔）</p>
<input
v-model="config.invite_codes"
placeholder="code1,code2"
class="h-10 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 font-mono text-xs outline-none focus:border-accent"
class="h-10 w-full rounded-md border border-edge2 bg-surface px-3 font-mono text-xs outline-none focus:border-accent"
/>
</div>
<div class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-900/60 px-4 py-3">
<div class="flex items-center justify-between rounded-md border border-edge bg-surface/60 px-4 py-3">
<div>
<p class="text-sm text-zinc-300">其他配置项</p>
<p class="text-xs text-zinc-600">汇率、限流阈值、维护开关在后续里程碑开放</p>
<p class="text-sm text-ink">其他配置项</p>
<p class="text-xs text-muted">汇率、限流阈值、维护开关在后续里程碑开放</p>
</div>
<span class="font-mono text-xs text-zinc-600">M3+</span>
<span class="font-mono text-xs text-muted">M3+</span>
</div>
</div>
web/src/views/admin/ModelsView.vue
+16 -16
View File
@@ -130,7 +130,7 @@ onMounted(load)
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-lg font-semibold">模型与定价</h1>
<p class="text-sm text-zinc-500">价格按每百万 token (USD)，历史用量按当时价格入账</p>
<p class="text-sm text-muted">价格按每百万 token (USD)，历史用量按当时价格入账</p>
</div>
<Button @click="openCreate">添加模型</Button>
</div>
@@ -139,39 +139,39 @@ onMounted(load)
<div v-for="m in models" :key="m.id" class="card">
<div class="flex items-center justify-between px-4 py-3">
<div class="flex items-center gap-3">
<span class="font-mono text-sm text-zinc-100">{{ m.name }}</span>
<span class="font-mono text-sm text-ink">{{ m.name }}</span>
<Badge :variant="m.enabled ? 'ok' : 'neutral'">{{ m.enabled ? '启用' : '停用' }}</Badge>
</div>
<div class="flex items-center gap-3">
<span class="mono-num text-xs text-zinc-400">入 {{ m.input_price }}</span>
<span class="mono-num text-xs text-zinc-400">出 {{ m.output_price }}</span>
<span class="mono-num text-xs text-zinc-500">缓存读 {{ m.cache_read_price }}</span>
<span class="mono-num text-xs text-muted">入 {{ m.input_price }}</span>
<span class="mono-num text-xs text-muted">出 {{ m.output_price }}</span>
<span class="mono-num text-xs text-muted">缓存读 {{ m.cache_read_price }}</span>
</div>
<div class="flex gap-2">
<button class="text-xs text-zinc-500 hover:text-accent" @click="openBind(m)">绑定渠道</button>
<button class="text-xs text-zinc-500 hover:text-zinc-200" @click="openEdit(m)">编辑</button>
<button class="text-xs text-zinc-500 hover:text-red-400" @click="removeModel(m)">删除</button>
<button class="text-xs text-muted hover:text-accent" @click="openBind(m)">绑定渠道</button>
<button class="text-xs text-muted hover:text-ink" @click="openEdit(m)">编辑</button>
<button class="text-xs text-muted hover:text-err" @click="removeModel(m)">删除</button>
</div>
</div>
<div v-if="m.channels.length" class="border-t border-zinc-800/70 px-4 py-2">
<div v-if="m.channels.length" class="border-t border-edge/70 px-4 py-2">
<div class="flex flex-wrap gap-2">
<span
v-for="b in m.channels"
:key="b.id"
class="inline-flex items-center gap-1.5 rounded-md border border-zinc-800 bg-zinc-900 px-2 py-0.5 font-mono text-[11px] text-zinc-400"
class="inline-flex items-center gap-1.5 rounded-md border border-edge bg-surface px-2 py-0.5 font-mono text-[11px] text-muted"
>
{{ b.channel_name }} → {{ b.upstream_model }}
<button class="text-zinc-400 hover:text-red-400" aria-label="移除绑定" @click="removeBinding(m, b.id)">×</button>
<button class="text-muted hover:text-err" aria-label="移除绑定" @click="removeBinding(m, b.id)">×</button>
</span>
</div>
</div>
<p v-else class="border-t border-zinc-800/70 px-4 py-2 text-xs text-zinc-600">
<p v-else class="border-t border-edge/70 px-4 py-2 text-xs text-muted">
未绑定渠道，客户端无法调用该模型
</p>
</div>
<p v-if="models.length === 0" class="card px-4 py-10 text-center text-sm text-zinc-600">
<p v-if="models.length === 0" class="card px-4 py-10 text-center text-sm text-muted">
还没有模型，点击「添加模型」或到渠道页「导入模型」
</p>
</div>
@@ -196,10 +196,10 @@ onMounted(load)
<!-- 绑定渠道 -->
<Modal :open="bindOpen" title="绑定渠道" @close="bindOpen = false">
<div class="space-y-4">
<p class="text-xs text-zinc-500">模型 <span class="font-mono text-emerald-300">{{ bindModel?.name }}</span> 通过以下渠道提供</p>
<p class="text-xs text-muted">模型 <span class="font-mono text-accent">{{ bindModel?.name }}</span> 通过以下渠道提供</p>
<label class="block">
<span class="mb-1.5 block text-xs font-medium text-zinc-400">渠道</span>
<select v-model="binding.channel_id" class="h-10 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 text-sm text-zinc-100 outline-none focus:border-accent">
<span class="mb-1.5 block text-xs font-medium text-muted">渠道</span>
<select v-model="binding.channel_id" class="h-10 w-full rounded-md border border-edge2 bg-surface px-3 text-sm text-ink outline-none focus:border-accent">
<option v-for="ch in channels" :key="ch.id" :value="ch.id">{{ ch.name }}</option>
</select>
</label>
web/src/views/admin/OverviewView.vue
+17 -17
View File
@@ -37,29 +37,29 @@ onMounted(load)
<div class="mx-auto max-w-6xl space-y-6">
<div class="mb-2">
<h1 class="text-lg font-semibold">运营总览</h1>
<p class="text-sm text-zinc-500">全局用户、渠道与营收</p>
<p class="text-sm text-muted">全局用户、渠道与营收</p>
</div>
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
<div class="card p-4">
<p class="text-xs text-zinc-500">用户 / 密钥</p>
<p class="text-xs text-muted">用户 / 密钥</p>
<Skeleton v-if="loading" class="mt-2" height="1.5rem" width="55%" />
<p v-else class="mono-num mt-1 text-xl text-zinc-100">{{ fmtNum(data.total_users) }} / {{ fmtNum(data.total_keys) }}</p>
<p v-else class="mono-num mt-1 text-xl text-ink">{{ fmtNum(data.total_users) }} / {{ fmtNum(data.total_keys) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">渠道 / 模型</p>
<p class="text-xs text-muted">渠道 / 模型</p>
<Skeleton v-if="loading" class="mt-2" height="1.5rem" width="45%" />
<p v-else class="mono-num mt-1 text-xl text-zinc-100">{{ fmtNum(data.total_channels) }} / {{ fmtNum(data.total_models) }}</p>
<p v-else class="mono-num mt-1 text-xl text-ink">{{ fmtNum(data.total_channels) }} / {{ fmtNum(data.total_models) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">今日请求</p>
<p class="text-xs text-muted">今日请求</p>
<Skeleton v-if="loading" class="mt-2" height="1.5rem" width="40%" />
<p v-else class="mono-num mt-1 text-xl text-zinc-100">{{ fmtNum(data.today.requests) }}</p>
<p v-else class="mono-num mt-1 text-xl text-ink">{{ fmtNum(data.today.requests) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">本月营收</p>
<p class="text-xs text-muted">本月营收</p>
<Skeleton v-if="loading" class="mt-2" height="1.5rem" width="45%" />
<p v-else class="mono-num mt-1 text-xl text-emerald-300">{{ fmtCost(data.month.cost) }}</p>
<p v-else class="mono-num mt-1 text-xl text-accent">{{ fmtCost(data.month.cost) }}</p>
</div>
</div>
@@ -67,7 +67,7 @@ onMounted(load)
<div class="card p-5 lg:col-span-3">
<div class="mb-4 flex items-baseline justify-between">
<h2 class="text-sm font-semibold">近 14 天全局成本</h2>
<span class="font-mono text-[11px] text-zinc-600">{{ fmtCost(data.month.cost) }} / 本月</span>
<span class="font-mono text-[11px] text-muted">{{ fmtCost(data.month.cost) }} / 本月</span>
</div>
<Skeleton v-if="loading" height="160px" />
<TrendChart
@@ -80,22 +80,22 @@ onMounted(load)
<div class="card p-5 lg:col-span-2">
<div class="mb-3 flex items-baseline justify-between">
<h2 class="text-sm font-semibold">全局最近请求</h2>
<span class="font-mono text-[11px] text-zinc-600">共 {{ data.month.requests }} / 月</span>
<span class="font-mono text-[11px] text-muted">共 {{ data.month.requests }} / 月</span>
</div>
<ul class="divide-y divide-zinc-800/70">
<ul class="divide-y divide-edge/70">
<li v-for="l in logs" :key="l.id" class="flex items-center justify-between py-2">
<div class="min-w-0">
<p class="truncate text-xs text-zinc-300">
<span class="font-mono text-emerald-400/80">{{ l.user }}</span> · {{ l.model }}
<p class="truncate text-xs text-ink">
<span class="font-mono text-accent">{{ l.user }}</span> · {{ l.model }}
</p>
<p class="font-mono text-[11px] text-zinc-600">{{ fmtTime(l.created_at) }}</p>
<p class="font-mono text-[11px] text-muted">{{ fmtTime(l.created_at) }}</p>
</div>
<div class="flex items-center gap-2">
<span class="mono-num text-xs text-zinc-500">{{ fmtCost(l.cost) }}</span>
<span class="mono-num text-xs text-muted">{{ fmtCost(l.cost) }}</span>
<Badge :variant="l.status === 'success' ? 'ok' : 'err'">{{ l.status }}</Badge>
</div>
</li>
<li v-if="logs.length === 0" class="py-6 text-center text-xs text-zinc-600">暂无请求</li>
<li v-if="logs.length === 0" class="py-6 text-center text-xs text-muted">暂无请求</li>
</ul>
</div>
</div>
web/src/views/admin/UsersView.vue
+19 -19
View File
@@ -93,13 +93,13 @@ onMounted(load)
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-lg font-semibold">用户</h1>
<p class="text-sm text-zinc-500">管理角色、状态与余额</p>
<p class="text-sm text-muted">管理角色、状态与余额</p>
</div>
<div class="flex gap-2">
<input
v-model="q"
placeholder="搜索用户名 / 邮箱"
class="h-10 w-56 rounded-md border border-zinc-700 bg-zinc-900 px-3 text-sm outline-none focus:border-accent"
class="h-10 w-56 rounded-md border border-edge2 bg-surface px-3 text-sm outline-none focus:border-accent"
@keyup.enter="search"
/>
<Button variant="ghost" @click="search">搜索</Button>
@@ -110,7 +110,7 @@ onMounted(load)
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-zinc-800 text-left text-xs text-zinc-500">
<tr class="border-b border-edge text-left text-xs text-muted">
<th scope="col" class="px-4 py-2.5 font-medium">ID</th>
<th scope="col" class="px-4 py-2.5 font-medium">用户名</th>
<th scope="col" class="px-4 py-2.5 font-medium">邮箱</th>
@@ -123,35 +123,35 @@ onMounted(load)
</thead>
<tbody>
<tr v-for="u in users" :key="u.id" class="table-row">
<td class="px-4 py-2.5 font-mono text-xs text-zinc-500">{{ u.id }}</td>
<td class="px-4 py-2.5 text-zinc-200">
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ u.id }}</td>
<td class="px-4 py-2.5 text-ink">
{{ u.username }}
<span v-if="u.id === auth.user?.id" class="text-[11px] text-zinc-600">(我)</span>
<span v-if="u.id === auth.user?.id" class="text-[11px] text-muted">(我)</span>
</td>
<td class="px-4 py-2.5 text-xs text-zinc-400">{{ u.email }}</td>
<td class="px-4 py-2.5 text-xs text-muted">{{ u.email }}</td>
<td class="px-4 py-2.5">
<Badge :variant="u.role === 'admin' ? 'accent' : 'neutral'">{{ u.role }}</Badge>
</td>
<td class="px-4 py-2.5 mono-num text-xs text-emerald-300/90">{{ fmtMoney(u.balance) }}</td>
<td class="px-4 py-2.5 mono-num text-xs text-accent">{{ fmtMoney(u.balance) }}</td>
<td class="px-4 py-2.5">
<Badge :variant="u.status === 'active' ? 'ok' : 'warn'">{{ u.status }}</Badge>
</td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-500">{{ fmtTime(u.created_at) }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ fmtTime(u.created_at) }}</td>
<td class="px-4 py-2.5 text-right">
<div class="flex justify-end gap-2">
<button class="text-xs text-zinc-500 hover:text-zinc-200" @click="openEdit(u)">编辑</button>
<button class="text-xs text-zinc-500 hover:text-accent" @click="openBalance(u)">调余额</button>
<button class="text-xs text-muted hover:text-ink" @click="openEdit(u)">编辑</button>
<button class="text-xs text-muted hover:text-accent" @click="openBalance(u)">调余额</button>
</div>
</td>
</tr>
<tr v-if="users.length === 0">
<td colspan="8" class="px-4 py-10 text-center text-sm text-zinc-600">无用户</td>
<td colspan="8" class="px-4 py-10 text-center text-sm text-muted">无用户</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between border-t border-zinc-800 px-4 py-3">
<span class="font-mono text-xs text-zinc-600">共 {{ total }} 人</span>
<div class="flex items-center justify-between border-t border-edge px-4 py-3">
<span class="font-mono text-xs text-muted">共 {{ total }} 人</span>
<div class="flex gap-2">
<Button size="sm" variant="ghost" :disabled="page <= 1" @click="goPage(page - 1)">上一页</Button>
<Button size="sm" variant="ghost" :disabled="page * pageSize >= total" @click="goPage(page + 1)">下一页</Button>
@@ -163,15 +163,15 @@ onMounted(load)
<Modal :open="editOpen" title="编辑用户" @close="editOpen = false">
<div class="space-y-4">
<label class="block">
<span class="mb-1.5 block text-xs font-medium text-zinc-400">角色</span>
<select v-model="editForm.role" class="h-10 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 text-sm outline-none focus:border-accent">
<span class="mb-1.5 block text-xs font-medium text-muted">角色</span>
<select v-model="editForm.role" class="h-10 w-full rounded-md border border-edge2 bg-surface px-3 text-sm outline-none focus:border-accent">
<option value="user">user</option>
<option value="admin">admin</option>
</select>
</label>
<label class="block">
<span class="mb-1.5 block text-xs font-medium text-zinc-400">状态</span>
<select v-model="editForm.status" class="h-10 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 text-sm outline-none focus:border-accent">
<span class="mb-1.5 block text-xs font-medium text-muted">状态</span>
<select v-model="editForm.status" class="h-10 w-full rounded-md border border-edge2 bg-surface px-3 text-sm outline-none focus:border-accent">
<option value="active">active</option>
<option value="disabled">disabled</option>
</select>
@@ -186,7 +186,7 @@ onMounted(load)
<!-- 调整余额 -->
<Modal :open="balanceOpen" :title="`调整余额 · ${balanceUser?.username}`" @close="balanceOpen = false">
<div class="space-y-4">
<p class="text-xs text-zinc-500">当前余额 {{ fmtMoney(balanceUser?.balance ?? 0) }}</p>
<p class="text-xs text-muted">当前余额 {{ fmtMoney(balanceUser?.balance ?? 0) }}</p>
<Input v-model="balanceForm.amount" label="调整金额" type="number" hint="正数增加，负数扣减" />
<Input v-model="balanceForm.remark" label="备注" placeholder="可选" />
</div>
web/src/views/console/DashboardView.vue
+17 -17
View File
@@ -51,30 +51,30 @@ onMounted(load)
<div class="mx-auto max-w-5xl space-y-6">
<div class="mb-2">
<h1 class="text-lg font-semibold">仪表盘</h1>
<p class="text-sm text-zinc-500">余额、用量与最近请求</p>
<p class="text-sm text-muted">余额、用量与最近请求</p>
</div>
<!-- 指标条 -->
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
<div class="card p-4">
<p class="text-xs text-zinc-500">余额</p>
<p class="text-xs text-muted">余额</p>
<Skeleton v-if="loading" class="mt-2" height="1.5rem" width="55%" />
<p v-else class="mono-num mt-1 text-xl text-emerald-300">{{ fmtMoney(balance) }}</p>
<p v-else class="mono-num mt-1 text-xl text-accent">{{ fmtMoney(balance) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">今日请求</p>
<p class="text-xs text-muted">今日请求</p>
<Skeleton v-if="loading" class="mt-2" height="1.5rem" width="40%" />
<p v-else class="mono-num mt-1 text-xl text-zinc-100">{{ fmtNum(today.requests) }}</p>
<p v-else class="mono-num mt-1 text-xl text-ink">{{ fmtNum(today.requests) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">今日 Token</p>
<p class="text-xs text-muted">今日 Token</p>
<Skeleton v-if="loading" class="mt-2" height="1.5rem" width="40%" />
<p v-else class="mono-num mt-1 text-xl text-zinc-100">{{ fmtNum(today.tokens) }}</p>
<p v-else class="mono-num mt-1 text-xl text-ink">{{ fmtNum(today.tokens) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">近 30 日消耗</p>
<p class="text-xs text-muted">近 30 日消耗</p>
<Skeleton v-if="loading" class="mt-2" height="1.5rem" width="45%" />
<p v-else class="mono-num mt-1 text-xl text-zinc-100">{{ fmtCost(monthCost) }}</p>
<p v-else class="mono-num mt-1 text-xl text-ink">{{ fmtCost(monthCost) }}</p>
</div>
</div>
@@ -83,7 +83,7 @@ onMounted(load)
<div class="card p-5 lg:col-span-3">
<div class="mb-4 flex items-baseline justify-between">
<h2 class="text-sm font-semibold">近 14 天成本</h2>
<span class="font-mono text-[11px] text-zinc-600">{{ models }} 个可用模型</span>
<span class="font-mono text-[11px] text-muted">{{ models }} 个可用模型</span>
</div>
<Skeleton v-if="loading" height="160px" />
<TrendChart v-else :points="trend" :format="(v) => '$' + v.toExponential(2)" />
@@ -95,25 +95,25 @@ onMounted(load)
<h2 class="text-sm font-semibold">最近请求</h2>
<router-link to="/console/usage" class="text-xs text-accent hover:text-accent-strong">查看全部</router-link>
</div>
<ul v-if="loading" class="divide-y divide-zinc-800/70">
<ul v-if="loading" class="divide-y divide-edge/70">
<li v-for="i in 4" :key="i" class="flex items-center justify-between py-2">
<Skeleton height="0.75rem" width="40%" />
<Skeleton height="0.75rem" width="30%" />
</li>
</ul>
<ul v-else class="divide-y divide-zinc-800/70">
<ul v-else class="divide-y divide-edge/70">
<li v-for="l in logs" :key="l.id" class="flex items-center justify-between py-2">
<div class="min-w-0">
<p class="truncate font-mono text-xs text-zinc-300">{{ l.model }}</p>
<p class="text-[11px] text-zinc-600">{{ fmtTime(l.created_at) }}</p>
<p class="truncate font-mono text-xs text-ink">{{ l.model }}</p>
<p class="text-[11px] text-muted">{{ fmtTime(l.created_at) }}</p>
</div>
<div class="flex items-center gap-2">
<span class="mono-num text-xs text-zinc-400">{{ l.input_tokens }}/{{ l.output_tokens }}</span>
<span class="mono-num w-16 text-right text-xs text-zinc-500">{{ fmtCost(l.cost) }}</span>
<span class="mono-num text-xs text-muted">{{ l.input_tokens }}/{{ l.output_tokens }}</span>
<span class="mono-num w-16 text-right text-xs text-muted">{{ fmtCost(l.cost) }}</span>
<Badge :variant="l.status === 'success' ? 'ok' : 'err'">{{ l.status }}</Badge>
</div>
</li>
<li v-if="logs.length === 0" class="py-6 text-center text-xs text-zinc-600">
<li v-if="logs.length === 0" class="py-6 text-center text-xs text-muted">
还没有请求记录，去
<router-link to="/console/keys" class="text-accent">API Keys</router-link>
创建密钥开始调用
web/src/views/console/KeysView.vue
+10 -10
View File
@@ -75,7 +75,7 @@ onMounted(load)
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-lg font-semibold">API Keys</h1>
<p class="text-sm text-zinc-500">密钥明文仅在创建时展示一次，请立即保存</p>
<p class="text-sm text-muted">密钥明文仅在创建时展示一次，请立即保存</p>
</div>
<Button @click="createOpen = true">新建密钥</Button>
</div>
@@ -84,7 +84,7 @@ onMounted(load)
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-zinc-800 text-left text-xs text-zinc-500">
<tr class="border-b border-edge text-left text-xs text-muted">
<th scope="col" class="px-4 py-2.5 font-medium">名称</th>
<th scope="col" class="px-4 py-2.5 font-medium">前缀</th>
<th scope="col" class="px-4 py-2.5 font-medium">状态</th>
@@ -95,17 +95,17 @@ onMounted(load)
</thead>
<tbody>
<tr v-for="k in keys" :key="k.id" class="table-row">
<td class="px-4 py-2.5 text-zinc-200">{{ k.name }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-400">{{ k.key_prefix }}…</td>
<td class="px-4 py-2.5 text-ink">{{ k.name }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ k.key_prefix }}…</td>
<td class="px-4 py-2.5">
<Badge :variant="k.status === 'active' ? 'ok' : 'neutral'">{{ k.status }}</Badge>
</td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-500">{{ fmtTime(k.last_used_at) }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-500">{{ fmtTime(k.created_at) }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ fmtTime(k.last_used_at) }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ fmtTime(k.created_at) }}</td>
<td class="px-4 py-2.5 text-right">
<button
v-if="k.status === 'active'"
class="text-xs text-zinc-500 hover:text-red-400"
class="text-xs text-muted hover:text-err"
@click="revoke(k)"
>
吊销
@@ -113,7 +113,7 @@ onMounted(load)
</td>
</tr>
<tr v-if="keys.length === 0">
<td colspan="6" class="px-4 py-10 text-center text-sm text-zinc-600">
<td colspan="6" class="px-4 py-10 text-center text-sm text-muted">
还没有密钥，点击右上角「新建密钥」
</td>
</tr>
@@ -134,9 +134,9 @@ onMounted(load)
<!-- 一次性展示密钥 -->
<Modal :open="!!created" title="密钥已创建" @close="created = null">
<div class="space-y-4">
<p class="text-xs text-zinc-500">请复制并妥善保存，关闭后不再显示。</p>
<p class="text-xs text-muted">请复制并妥善保存，关闭后不再显示。</p>
<div class="flex items-center gap-2">
<code class="mono-num flex-1 truncate rounded-md border border-accent/40 bg-zinc-900 px-3 py-2 text-xs text-emerald-300">
<code class="mono-num flex-1 truncate rounded-md border border-accent/40 bg-surface px-3 py-2 text-xs text-accent">
{{ created?.key }}
</code>
<Button size="sm" @click="copyKey">
web/src/views/console/UsageView.vue
+24 -24
View File
@@ -51,42 +51,42 @@ onMounted(load)
<div class="mx-auto max-w-5xl space-y-6">
<div class="mb-2">
<h1 class="text-lg font-semibold">用量</h1>
<p class="text-sm text-zinc-500">汇总、分布与请求明细</p>
<p class="text-sm text-muted">汇总、分布与请求明细</p>
</div>
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
<div class="card p-4">
<p class="text-xs text-zinc-500">今日请求</p>
<p class="mono-num mt-1 text-xl text-zinc-100">{{ fmtNum(summary.today.requests) }}</p>
<p class="text-xs text-muted">今日请求</p>
<p class="mono-num mt-1 text-xl text-ink">{{ fmtNum(summary.today.requests) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">今日 Token</p>
<p class="mono-num mt-1 text-xl text-zinc-100">{{ fmtNum(summary.today.tokens) }}</p>
<p class="text-xs text-muted">今日 Token</p>
<p class="mono-num mt-1 text-xl text-ink">{{ fmtNum(summary.today.tokens) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">本月请求</p>
<p class="mono-num mt-1 text-xl text-zinc-100">{{ fmtNum(summary.month.requests) }}</p>
<p class="text-xs text-muted">本月请求</p>
<p class="mono-num mt-1 text-xl text-ink">{{ fmtNum(summary.month.requests) }}</p>
</div>
<div class="card p-4">
<p class="text-xs text-zinc-500">本月成本</p>
<p class="mono-num mt-1 text-xl text-zinc-100">{{ fmtCost(summary.month.cost) }}</p>
<p class="text-xs text-muted">本月成本</p>
<p class="mono-num mt-1 text-xl text-ink">{{ fmtCost(summary.month.cost) }}</p>
</div>
</div>
<div class="card p-5">
<div class="mb-4 flex items-center justify-between">
<h2 class="text-sm font-semibold">成本分布</h2>
<div class="flex gap-1 rounded-md border border-zinc-800 p-0.5">
<div class="flex gap-1 rounded-md border border-edge p-0.5">
<button
class="rounded px-2.5 py-1 text-xs transition"
:class="group === 'day' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-500'"
:class="group === 'day' ? 'bg-surface2 text-ink' : 'text-muted'"
@click="switchGroup('day')"
>
按天
</button>
<button
class="rounded px-2.5 py-1 text-xs transition"
:class="group === 'model' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-500'"
:class="group === 'model' ? 'bg-surface2 text-ink' : 'text-muted'"
@click="switchGroup('model')"
>
按模型
@@ -97,19 +97,19 @@ onMounted(load)
</div>
<div class="card">
<div class="flex items-center justify-between border-b border-zinc-800 px-4 py-3">
<div class="flex items-center justify-between border-b border-edge px-4 py-3">
<h2 class="text-sm font-semibold">请求明细</h2>
<input
v-model="modelFilter"
placeholder="按模型过滤"
class="h-8 w-48 rounded-md border border-zinc-700 bg-zinc-900 px-2.5 font-mono text-xs outline-none focus:border-accent"
class="h-8 w-48 rounded-md border border-edge2 bg-surface px-2.5 font-mono text-xs outline-none focus:border-accent"
@keyup.enter="page = 1; load()"
/>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-zinc-800 text-left text-xs text-zinc-500">
<tr class="border-b border-edge text-left text-xs text-muted">
<th scope="col" class="px-4 py-2.5 font-medium">模型</th>
<th scope="col" class="px-4 py-2.5 font-medium">协议</th>
<th scope="col" class="px-4 py-2.5 font-medium">Token 入/出</th>
@@ -121,22 +121,22 @@ onMounted(load)
</thead>
<tbody>
<tr v-for="l in logs" :key="l.id" class="table-row">
<td class="px-4 py-2.5 font-mono text-xs text-zinc-200">{{ l.model }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-500">{{ l.protocol }}</td>
<td class="px-4 py-2.5 mono-num text-xs text-zinc-400">{{ l.input_tokens }}/{{ l.output_tokens }}</td>
<td class="px-4 py-2.5 mono-num text-xs text-zinc-300">{{ fmtCost(l.cost) }}</td>
<td class="px-4 py-2.5 mono-num text-xs text-zinc-500">{{ l.latency_ms }}ms</td>
<td class="px-4 py-2.5 font-mono text-xs text-ink">{{ l.model }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ l.protocol }}</td>
<td class="px-4 py-2.5 mono-num text-xs text-muted">{{ l.input_tokens }}/{{ l.output_tokens }}</td>
<td class="px-4 py-2.5 mono-num text-xs text-ink">{{ fmtCost(l.cost) }}</td>
<td class="px-4 py-2.5 mono-num text-xs text-muted">{{ l.latency_ms }}ms</td>
<td class="px-4 py-2.5"><Badge :variant="l.status === 'success' ? 'ok' : 'err'">{{ l.status }}</Badge></td>
<td class="px-4 py-2.5 font-mono text-xs text-zinc-500">{{ fmtTime(l.created_at) }}</td>
<td class="px-4 py-2.5 font-mono text-xs text-muted">{{ fmtTime(l.created_at) }}</td>
</tr>
<tr v-if="logs.length === 0">
<td colspan="7" class="px-4 py-10 text-center text-sm text-zinc-600">暂无请求记录</td>
<td colspan="7" class="px-4 py-10 text-center text-sm text-muted">暂无请求记录</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between border-t border-zinc-800 px-4 py-3">
<span class="font-mono text-xs text-zinc-600">共 {{ total }} 条</span>
<div class="flex items-center justify-between border-t border-edge px-4 py-3">
<span class="font-mono text-xs text-muted">共 {{ total }} 条</span>
<div class="flex gap-2">
<Button size="sm" variant="ghost" :disabled="page <= 1" @click="goPage(page - 1)">上一页</Button>
<Button size="sm" variant="ghost" :disabled="page * pageSize >= total" @click="goPage(page + 1)">下一页</Button>