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/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)"
         />