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