feat: 管理中心Token用量页面SaaS商业化精修

【页面状态感知】
- 新增页面级状态类名（is-syncing/has-sync-error/has-low-balance/is-healthy）
- 状态指示灯根据加载/错误/正常动态切换样式与动画
- 加载中禁用刷新按钮，防止重复请求

【工具栏视觉升级】
- 标题增加副标题（"用量、成员与模型调用监控"）
- 状态胶囊 pill 增加圆点动画（绿色脉冲=在线，琥珀色=异常）
- 按钮增加 hover 品牌绿高亮、禁用态半透明
- 成员管理按钮增加 is-muted-action 弱化样式

【指标卡片精修】
- 四张指标卡片增加序号角标（01-04），左侧彩色竖线标识
- 主卡片（可用额度）增加品牌绿光晕背景 + 绿色竖线
- 卡片增加渐变背景、顶部光泽内阴影、圆角阴影

【数据展示增强】
- 模型消耗分布/系统状态/调用记录标题增加图标
- 模型消耗列表项增加 hover 浮起 + 品牌绿边框
- 调用记录表格增加表头背景、行 hover 高亮、状态标签徽章
- 分页按钮增加 hover 品牌绿填充

【响应式适配】
- 1180px/900px/560px 三级断点完整适配
- 900px：工具栏吸顶、指标卡单列、图表区单列
- 560px：工具栏按钮 2 列网格、状态胶囊全宽、卡片间距缩小

src/features/script-tokens/TokenUsagePage.tsx

@@ -230,25 +230,35 @@ function TokenUsagePage({
     { label: "账户类型", value: isEnterpriseAccount ? "企业账户" : "个人账户", tone: "good" },
     { label: "企业空间", value: enterpriseUsage?.enterpriseName || session?.user.enterpriseName || "-" },
   ];
+  const pageStatusClass = enterpriseUsageLoading
+    ? "is-syncing"
+    : enterpriseUsageError
+      ? "has-sync-error"
+      : isLowBalance
+        ? "has-low-balance"
+        : "is-healthy";
 
   return (
-    <section className="script-token-page token-usage-page management-center-page" aria-label="管理中心">
+    <section className={`script-token-page token-usage-page management-center-page ${pageStatusClass}`} aria-label="管理中心">
       <main className="management-center-shell">
         <header className="management-center-toolbar" aria-label="管理中心操作">
           <div className="management-center-toolbar__title">
             <button type="button" className="management-center-toolbar__back" aria-label="返回工具盒" onClick={onOpenMore}>
               <ArrowLeftOutlined />
             </button>
-            <strong>管理中心</strong>
+            <span>
+              <strong>管理中心</strong>
+              <small>用量、成员与模型调用监控</small>
+            </span>
           </div>
-          <span className="management-center-status-pill">
+          <span className={`management-center-status-pill ${enterpriseUsageError ? "is-error" : enterpriseUsageLoading ? "is-loading" : "is-online"}`}>
             {enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"}
           </span>
-          <button type="button" onClick={refreshEnterpriseUsage}>
+          <button type="button" onClick={refreshEnterpriseUsage} disabled={enterpriseUsageLoading}>
             <ReloadOutlined />
             刷新数据
           </button>
-          <button type="button">
+          <button type="button" className="is-muted-action">
             <UserOutlined />
             成员管理
           </button>
@@ -267,8 +277,9 @@ function TokenUsagePage({
         ) : null}
 
         <section className="management-metric-cards" aria-label="关键指标">
-          {metricCards.map((card) => (
+          {metricCards.map((card, index) => (
             <article key={card.key} className={`management-metric-card is-${card.tone}`}>
+              <span className="management-metric-card__index">{String(index + 1).padStart(2, "0")}</span>
               <span className="management-metric-card__label">{card.label}</span>
               <strong className="management-metric-card__value">{card.value}</strong>
               <span className="management-metric-card__hint">{card.hint}</span>
@@ -283,7 +294,7 @@ function TokenUsagePage({
                 <BarChartOutlined />
                 模型消耗分布
               </h2>
-              <span>{modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
+              <span>{enterpriseUsageLoading ? "SYNC" : modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span>
             </div>
             {modelBreakdown.length ? (
               <div className="management-model-list">
@@ -310,7 +321,10 @@ function TokenUsagePage({
 
           <article className="management-card management-status-card">
             <div className="management-card__head">
-              <h2>系统状态</h2>
+              <h2>
+                <LineChartOutlined />
+                系统状态
+              </h2>
             </div>
             <dl>
               {systemStatus.map((item) => (
@@ -364,7 +378,10 @@ function TokenUsagePage({
 
         <section className="management-card management-records">
           <div className="management-card__head">
-            <h2>调用记录</h2>
+            <h2>
+              <BarChartOutlined />
+              调用记录
+            </h2>
             <span>{records.length} 条记录</span>
           </div>
           <div className="management-record-table" role="table" aria-label="调用记录">