M3 收尾: 限流/配额 + 前端骨架屏 + 单端口托管前端

- ratelimit(内存计数): 密钥级每日请求数/Token 配额、用户级每秒速率
  (OT_RATELIMIT_USER_RPS), 超限返回 429
- 网关 Auth 前置配额/限流检查, finishUsage 累计密钥 token 用量
- 前端 Skeleton 组件 + Dashboard/管理总览加载态
- Go 服务托管 web/dist 静态资源(SPA 回退), 单端口即可访问前后端

Co-Authored-By: Claude <noreply@anthropic.com>

.env.example

@@ -33,6 +33,9 @@ OT_PROXY_TIMEOUT=120s
 OT_PROXY_HEALTH_INTERVAL=60s
 OT_PROXY_HEALTH_FAIL_THRESHOLD=2
 
+# 限流（内存计数，Redis 后置）：用户级每秒请求数上限（0=不限制）
+OT_RATELIMIT_USER_RPS=20
+
 # 初始管理员（仅首次创建生效）
 OT_ADMIN_USERNAME=admin
 OT_ADMIN_EMAIL=admin@localhost

PLANNING.md

@@ -461,8 +461,8 @@ pending(待审核) ──approve──▶ credited(已入账)
 - 已过 web-design-guidelines 复查并修复（移动端侧栏、表格横向滚动、模态框焦点/滚动锁、focus-visible、aria 等）。
 **验收**：用户在控制台建 key、发请求、看用量；管理员能加渠道、调价、看统计。
 
-### M3 管理后台前端 + 计费完善（◻ 部分完成）
+### M3 管理后台前端 + 计费完善（✅ 完成收尾）
-渠道/模型/用户/总览/配置页面已完成；`usage_daily` 趋势图已内建（自建 SVG）。待做：限流接入、加载骨架屏、按模型聚合报表增强。
+渠道/模型/用户/总览/配置页面已完成；`usage_daily` 趋势图已内建（自建 SVG）；限流/配额接入（内存计数：密钥每日请求/token 配额、用户级速率，超限 429）；Dashboard/总览骨架屏加载态。待做：Redis 化限流、按模型聚合报表增强。
 
 ### M4 协议转换（✅ 已完成）
 - `convert` 包：Chat↔Messages↔Responses 请求/响应 JSON 转换 + 流式 SSE 逐行状态机转换器（含单测）。

README.md

@@ -2,7 +2,7 @@
 
 自托管的 LLM API 中转网关，功能对标 OpenRouter / one-api：统一 OpenAI 与 Anthropic 协议入口，背后对接多个上游渠道，内置用户体系、API Key 管理与用量计费。
 
-> 规划文档见 [PLANNING.md](./PLANNING.md)。当前进度：**M0-M2 + M4-M5 已完成**（基建 + 用户/密钥/核心代理 + 前端 MVP + 管理后台基础 + 三协议互转 + 渠道体系）。
+> 规划文档见 [PLANNING.md](./PLANNING.md)。当前进度：**M0-M2 + M4-M5 + M3 收尾已完成**（基建 + 用户/密钥/核心代理 + 前端 MVP + 管理后台基础 + 三协议互转 + 渠道体系 + 限流/配额 + 前端骨架屏）。
 
 ## 功能（当前）
 
@@ -14,6 +14,8 @@
   - **三协议互转**：客户端协议 × 渠道协议不匹配时自动转换（如 Chat 调用 Claude、Messages 调用 OpenAI、Responses 调用 Claude），流式逐事件转换；协议匹配时直通
   - 错误按客户端协议返回（OpenAI 格式 / Anthropic 格式）
 - **渠道体系**：按模型绑定选渠道 + 加权负载均衡；每渠道并发信号量（满载溢出）；后台健康检查（连续失败进 cooldown、恢复放回）；可安全重试的失败自动故障转移（网络错误/429/5xx/超时且未写出响应头）
+- **限流/配额**（内存计数）：密钥级每日请求数 / Token 数配额、用户级每秒速率（`OT_RATELIMIT_USER_RPS`）；超限返回 429
+- **前端**：Dashboard / 管理总览骨架屏加载态
 - **用户体系**：注册（开放/邀请码可切换，管理后台可改）、登录（JWT access + HttpOnly refresh cookie）、argon2id 密码
 - **API Key**：`sk-` 48 位 base62，仅存 SHA-256 哈希，明文一次性展示；支持限额/过期/白名单字段
 - **用量计费**：请求级 `usage_logs` 异步批量落库，按模型价格扣减余额，日粒度预聚合（`usage_daily`）

server/cmd/server/main.go

@@ -31,7 +31,7 @@ func main() {
 	}
 	defer a.Shutdown(context.Background())
 
-	gw := proxy.NewGateway(a.DB, a.Enc, a.Usage)
+	gw := proxy.NewGateway(a.DB, a.Enc, a.Usage, a.Limit, cfg.RateLimit.UserRPS)
 	router := api.NewRouter(a, gw)
 
 	srv := &http.Server{

server/internal/api/router.go

@@ -2,6 +2,8 @@ package api
 
 import (
 	"net/http"
+	"os"
+	"strings"
 
 	"github.com/gin-gonic/gin"
 	"github.com/openteam/server/internal/api/middleware"
@@ -29,15 +31,26 @@ func NewRouter(a *app.App, gw *proxy.Gateway) *gin.Engine {
 		proxyGroup.Any("/messages", gw.Auth, gw.Handle)
 		proxyGroup.Any("/models", gw.Auth, gw.Handle)
 	}
-	// 未匹配的 /v1/* 返回 OpenAI 风格 404（需先认证）
+	// 静态资源（前端构建产物，存在时托管）
+	const dist = "web/dist"
+	if _, err := os.Stat(dist); err == nil {
+		r.Static("/assets", dist+"/assets")
+		r.StaticFile("/favicon.svg", dist+"/favicon.svg")
+	}
+
+	// 未匹配路由：/v1/* 走代理鉴权；其余回退 SPA 或 404
 	r.NoRoute(func(c *gin.Context) {
-		if len(c.Request.URL.Path) >= 3 && c.Request.URL.Path[:3] == "/v1" {
+		if strings.HasPrefix(c.Request.URL.Path, "/v1") {
 			gw.Auth(c)
 			if !c.IsAborted() {
 				gw.Handle(c)
 			}
 			return
 		}
+		if _, err := os.Stat(dist); err == nil {
+			c.File(dist + "/index.html")
+			return
+		}
 		c.JSON(http.StatusNotFound, gin.H{"error": "not found"})
 	})
 

server/internal/app/app.go

@@ -10,6 +10,7 @@ import (
 	"github.com/openteam/server/internal/config"
 	"github.com/openteam/server/internal/pkg/crypto"
 	"github.com/openteam/server/internal/pkg/jwt"
+	"github.com/openteam/server/internal/pkg/ratelimit"
 	"github.com/openteam/server/internal/store"
 	"github.com/openteam/server/internal/usage"
 	"gorm.io/gorm"
@@ -23,6 +24,7 @@ type App struct {
 	JWT       *jwt.Manager
 	Usage     *usage.Recorder
 	Health    *channel.HealthMonitor
+	Limit     *ratelimit.Limiter
 	startedAt time.Time
 	ctx       context.Context
 	cancel    context.CancelFunc
@@ -44,6 +46,7 @@ func New(cfg *config.Config) (*App, error) {
 	}
 	a.ctx, a.cancel = context.WithCancel(context.Background())
 	a.Usage = usage.NewRecorder(db)
+	a.Limit = ratelimit.New()
 
 	if err := a.Seed(); err != nil {
 		return nil, err

server/internal/config/config.go

@@ -11,13 +11,19 @@ import (
 )
 
 type Config struct {
-	Env    string // development | production
+	Env       string // development | production
-	Port   int
+	Port      int
-	DB     DBConfig
+	DB        DBConfig
-	JWT    JWTConfig
+	JWT       JWTConfig
-	Auth   AuthConfig
+	Auth      AuthConfig
-	Proxy  ProxyConfig
+	Proxy     ProxyConfig
-	Master string // 渠道密钥 AES-GCM 主密钥（来自环境变量）
+	RateLimit RateLimitConfig
+	Master    string // 渠道密钥 AES-GCM 主密钥（来自环境变量）
+}
+
+// RateLimitConfig 限流参数（MVP 内存计数，Redis 后置）。
+type RateLimitConfig struct {
+	UserRPS int // 用户级每秒请求数上限（0=不限制）
 }
 
 type DBConfig struct {
@@ -116,6 +122,8 @@ func Load() (*Config, error) {
 	v.SetDefault("proxy.health_interval", "60s")
 	v.SetDefault("proxy.health_fail_threshold", 2)
 
+	v.SetDefault("ratelimit.user_rps", 20)
+
 	return &Config{
 		Env:  v.GetString("env"),
 		Port: v.GetInt("port"),
@@ -149,6 +157,9 @@ func Load() (*Config, error) {
 			HealthInterval:      v.GetDuration("proxy.health_interval"),
 			HealthFailThreshold: v.GetInt("proxy.health_fail_threshold"),
 		},
+		RateLimit: RateLimitConfig{
+			UserRPS: v.GetInt("ratelimit.user_rps"),
+		},
 		Master: v.GetString("master_key"),
 	}, nil
 }

server/internal/pkg/ratelimit/ratelimit.go

@@ -0,0 +1,112 @@
+// Package ratelimit 内存限流与配额（MVP 起步，Redis 后置）。
+// 覆盖：密钥级每日请求数 / 每日 token 数配额、用户级每秒速率。
+package ratelimit
+
+import (
+	"sync"
+	"time"
+)
+
+type dayCounter struct {
+	date string
+	n    int64
+}
+
+type hitWindow struct {
+	times  []time.Time
+	limit  int
+	window time.Duration
+}
+
+// Limiter 内存计数器。并发安全。
+type Limiter struct {
+	mu       sync.Mutex
+	reqDaily map[uint64]*dayCounter // 密钥每日请求数
+	tokDaily map[uint64]*dayCounter // 密钥每日 token 用量
+	userHits map[uint64]*hitWindow  // 用户速率窗口
+}
+
+func New() *Limiter {
+	return &Limiter{
+		reqDaily: map[uint64]*dayCounter{},
+		tokDaily: map[uint64]*dayCounter{},
+		userHits: map[uint64]*hitWindow{},
+	}
+}
+
+func today() string { return time.Now().UTC().Format("2006-01-02") }
+
+// AllowRequestDaily 检查并计数密钥每日请求配额；无配额（limit<=0）时仅计数。
+// 返回 false 表示超过配额。
+func (l *Limiter) AllowRequestDaily(keyID uint64, limit int) bool {
+	l.mu.Lock()
+	defer l.mu.Unlock()
+	d := today()
+	c, ok := l.reqDaily[keyID]
+	if !ok || c.date != d {
+		c = &dayCounter{date: d}
+		l.reqDaily[keyID] = c
+	}
+	c.n++
+	if limit > 0 && c.n > int64(limit) {
+		return false
+	}
+	return true
+}
+
+// AddTokens 累计密钥今日 token 用量（请求结束后记账）。
+func (l *Limiter) AddTokens(keyID uint64, n int64) {
+	if n <= 0 {
+		return
+	}
+	l.mu.Lock()
+	defer l.mu.Unlock()
+	d := today()
+	c, ok := l.tokDaily[keyID]
+	if !ok || c.date != d {
+		c = &dayCounter{date: d}
+		l.tokDaily[keyID] = c
+	}
+	c.n += n
+}
+
+// TokensUsed 返回密钥今日已用 token。
+func (l *Limiter) TokensUsed(keyID uint64) int64 {
+	l.mu.Lock()
+	defer l.mu.Unlock()
+	c, ok := l.tokDaily[keyID]
+	if !ok || c.date != today() {
+		return 0
+	}
+	return c.n
+}
+
+// AllowUserRate 用户级每秒请求速率限制（滑动窗口）；limit<=0 不限制。
+func (l *Limiter) AllowUserRate(userID uint64, limit int) bool {
+	if limit <= 0 {
+		return true
+	}
+	l.mu.Lock()
+	defer l.mu.Unlock()
+	now := time.Now()
+	win := time.Second
+	w, ok := l.userHits[userID]
+	if !ok || w.limit != limit || w.window != win {
+		w = &hitWindow{limit: limit, window: win}
+		l.userHits[userID] = w
+	}
+	// 清理窗口外的时间戳
+	cutoff := now.Add(-win)
+	keep := w.times[:0]
+	for _, t := range w.times {
+		if t.After(cutoff) {
+			keep = append(keep, t)
+		}
+	}
+	w.times = keep
+	if len(w.times) >= limit {
+		return false
+	}
+	w.times = append(w.times, now)
+	return true
+}

server/internal/pkg/ratelimit/ratelimit_test.go

@@ -0,0 +1,52 @@
+package ratelimit
+
+import "testing"
+
+func TestAllowRequestDaily(t *testing.T) {
+	l := New()
+	if !l.AllowRequestDaily(1, 2) {
+		t.Fatal("first request should be allowed")
+	}
+	if !l.AllowRequestDaily(1, 2) {
+		t.Fatal("second request should be allowed")
+	}
+	if l.AllowRequestDaily(1, 2) {
+		t.Fatal("third request should be blocked")
+	}
+	// 另一个 key 不受影响
+	if !l.AllowRequestDaily(2, 2) {
+		t.Fatal("other key should be allowed")
+	}
+}
+
+func TestTokensDaily(t *testing.T) {
+	l := New()
+	l.AddTokens(1, 100)
+	l.AddTokens(1, 50)
+	if got := l.TokensUsed(1); got != 150 {
+		t.Fatalf("tokens = %d, want 150", got)
+	}
+	if got := l.TokensUsed(2); got != 0 {
+		t.Fatalf("other key tokens = %d, want 0", got)
+	}
+	// 配额检查语义：已达 150 再设配额 150 应拒绝
+	l.AddTokens(3, 150)
+	if l.TokensUsed(3) >= 150 {
+		// 注意：>= 表示已达上限，Auth 层据此拒绝
+	}
+}
+
+func TestAllowUserRate(t *testing.T) {
+	l := New()
+	// limit=1：立即第二次应被拒绝
+	if !l.AllowUserRate(9, 1) {
+		t.Fatal("first should be allowed")
+	}
+	if l.AllowUserRate(9, 1) {
+		t.Fatal("second in same second should be blocked")
+	}
+	// limit<=0 不限制
+	if !l.AllowUserRate(9, 0) {
+		t.Fatal("limit 0 should always allow")
+	}
+}

server/internal/proxy/gateway.go

@@ -12,6 +12,7 @@ import (
 	"github.com/openteam/server/internal/channel"
 	"github.com/openteam/server/internal/pkg/apikey"
 	"github.com/openteam/server/internal/pkg/crypto"
+	"github.com/openteam/server/internal/pkg/ratelimit"
 	"github.com/openteam/server/internal/proxy/convert"
 	"github.com/openteam/server/internal/store"
 	"github.com/openteam/server/internal/usage"
@@ -25,20 +26,24 @@ const (
 )
 
 type Gateway struct {
-	db  *gorm.DB
+	db      *gorm.DB
-	ch  *channel.Service
+	ch      *channel.Service
-	rec *usage.Recorder
+	rec     *usage.Recorder
-	enc *crypto.Encryptor
+	enc     *crypto.Encryptor
-	hc  *http.Client
+	lim     *ratelimit.Limiter
+	userRPS int
+	hc      *http.Client
 }
 
-func NewGateway(db *gorm.DB, enc *crypto.Encryptor, rec *usage.Recorder) *Gateway {
+func NewGateway(db *gorm.DB, enc *crypto.Encryptor, rec *usage.Recorder, lim *ratelimit.Limiter, userRPS int) *Gateway {
 	return &Gateway{
-		db:  db,
+		db:      db,
-		ch:  channel.NewService(db, enc),
+		ch:      channel.NewService(db, enc),
-		rec: rec,
+		rec:     rec,
-		enc: enc,
+		enc:     enc,
-		hc:  &http.Client{Timeout: 120 * time.Second},
+		lim:     lim,
+		userRPS: userRPS,
+		hc:      &http.Client{Timeout: 120 * time.Second},
 	}
 }
 
@@ -81,6 +86,25 @@ func (g *Gateway) Auth(c *gin.Context) {
 		return
 	}
 
+	// 限流与配额（内存计数）
+	if g.lim != nil {
+		if k.QuotaRequestsPerDay != nil && !g.lim.AllowRequestDaily(k.ID, *k.QuotaRequestsPerDay) {
+			apiError(c, http.StatusTooManyRequests, "rate_limit_exceeded", "Daily request quota exceeded for this API key")
+			c.Abort()
+			return
+		}
+		if k.QuotaTokensPerDay != nil && g.lim.TokensUsed(k.ID) >= *k.QuotaTokensPerDay {
+			apiError(c, http.StatusTooManyRequests, "rate_limit_exceeded", "Daily token quota exceeded for this API key")
+			c.Abort()
+			return
+		}
+		if !g.lim.AllowUserRate(u.ID, g.userRPS) {
+			apiError(c, http.StatusTooManyRequests, "rate_limit_exceeded", "Too many requests. Please slow down.")
+			c.Abort()
+			return
+		}
+	}
+
 	c.Set(CtxUserID, u.ID)
 	c.Set(CtxKeyID, k.ID)
 	c.Set(CtxTrace, newTraceID())

server/internal/proxy/passthrough.go

@@ -433,6 +433,11 @@ func (g *Gateway) finishUsage(c *gin.Context, ch *store.Channel, start time.Time
 		chID = ch.ID
 	}
 
+	// 密钥今日 token 用量累计（配额检查用）
+	if g.lim != nil && kidVal > 0 {
+		g.lim.AddTokens(kidVal, in+out)
+	}
+
 	g.rec.Record(&store.UsageLog{
 		RequestID:           fmt.Sprintf("trace-%s", traceStr),
 		TraceID:             traceStr,

web/src/components/ui/Skeleton.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    height?: string
+    width?: string
+    cls?: string
+    rounded?: string
+  }>(),
+  { height: '1rem', width: '100%', rounded: 'rounded-md' },
+)
+</script>
+
+<template>
+  <div
+    class="animate-pulse bg-zinc-800/60"
+    :class="[rounded, cls]"
+    :style="{ height, width }"
+  />
+</template>

web/src/views/admin/OverviewView.vue

@@ -4,10 +4,12 @@ import { http, errMsg } from '@/api/client'
 import { useToastStore } from '@/stores/toast'
 import { fmtNum, fmtCost, fmtTime } from '@/lib/format'
 import Badge from '@/components/ui/Badge.vue'
+import Skeleton from '@/components/ui/Skeleton.vue'
 import TrendChart from '@/components/ui/TrendChart.vue'
 import type { UsageLog } from '@/types'
 
 const toast = useToastStore()
+const loading = ref(true)
 const data = ref({
   total_users: 0, total_keys: 0, total_channels: 0, total_models: 0,
   today: { requests: 0, cost: 0, tokens: 0 },
@@ -23,6 +25,8 @@ async function load() {
     logs.value = u.data.data.items
   } catch (e) {
     toast.err(errMsg(e))
+  } finally {
+    loading.value = false
   }
 }
 
@@ -39,19 +43,23 @@ onMounted(load)
     <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(data.total_users) }} / {{ fmtNum(data.total_keys) }}</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>
       </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(data.total_channels) }} / {{ fmtNum(data.total_models) }}</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>
       </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(data.today.requests) }}</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>
       </div>
       <div class="card p-4">
         <p class="text-xs text-zinc-500">本月营收</p>
-        <p class="mono-num mt-1 text-xl text-emerald-300">{{ fmtCost(data.month.cost) }}</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>
       </div>
     </div>
 
@@ -61,7 +69,9 @@ onMounted(load)
           <h2 class="text-sm font-semibold">近 14 天全局成本</h2>
           <span class="font-mono text-[11px] text-zinc-600">{{ fmtCost(data.month.cost) }} / 本月</span>
         </div>
+        <Skeleton v-if="loading" height="160px" />
         <TrendChart
+          v-else
           :points="data.trend_14d.map((t) => ({ label: t.date.slice(5), value: t.cost }))"
           :format="(v) => '$' + v.toExponential(2)"
         />

web/src/views/console/DashboardView.vue

@@ -4,11 +4,13 @@ import { http, errMsg } from '@/api/client'
 import { useToastStore } from '@/stores/toast'
 import { fmtMoney, fmtNum, fmtCost, fmtTime } from '@/lib/format'
 import Badge from '@/components/ui/Badge.vue'
+import Skeleton from '@/components/ui/Skeleton.vue'
 import TrendChart from '@/components/ui/TrendChart.vue'
 import type { UsageLog } from '@/types'
 
 const toast = useToastStore()
 
+const loading = ref(true)
 const balance = ref(0)
 const today = ref({ requests: 0, tokens: 0, cost: 0 })
 const monthCost = ref(0)
@@ -32,6 +34,8 @@ async function load() {
     logs.value = l.data.data.items
   } catch (e) {
     toast.err(errMsg(e))
+  } finally {
+    loading.value = false
   }
 }
 
@@ -54,19 +58,23 @@ onMounted(load)
     <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-emerald-300">{{ fmtMoney(balance) }}</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>
       </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(today.requests) }}</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>
       </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(today.tokens) }}</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>
       </div>
       <div class="card p-4">
         <p class="text-xs text-zinc-500">近 30 日消耗</p>
-        <p class="mono-num mt-1 text-xl text-zinc-100">{{ fmtCost(monthCost) }}</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>
       </div>
     </div>
 
@@ -77,7 +85,8 @@ onMounted(load)
           <h2 class="text-sm font-semibold">近 14 天成本</h2>
           <span class="font-mono text-[11px] text-zinc-600">{{ models }} 个可用模型</span>
         </div>
-        <TrendChart :points="trend" :format="(v) => '$' + v.toExponential(2)" />
+        <Skeleton v-if="loading" height="160px" />
+        <TrendChart v-else :points="trend" :format="(v) => '$' + v.toExponential(2)" />
       </div>
 
       <!-- 最近请求 -->
@@ -86,7 +95,13 @@ 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 class="divide-y divide-zinc-800/70">
+        <ul v-if="loading" class="divide-y divide-zinc-800/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">
           <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>