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

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

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

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>