merge: re-merge origin/master after rollback, resolve same conflicts

src/features/script-tokens/TokenUsagePage.tsx

@@ -142,6 +142,8 @@ function TokenUsagePage({
   onSelectView,
 }: TokenUsagePageProps) {
   const [enterpriseUsage, setEnterpriseUsage] = useState<WebEnterpriseUsageSummary | null>(null);
+  const [enterpriseUsageLoading, setEnterpriseUsageLoading] = useState(false);
+  const [enterpriseUsageError, setEnterpriseUsageError] = useState<string | null>(null);
   const isEnterpriseAdmin = session?.user.enterpriseRole === "admin";
   const isEnterpriseAccount = Boolean(session?.user.enterpriseId || session?.user.accountType === "enterprise");
 
@@ -152,10 +154,15 @@ function TokenUsagePage({
       setEnterpriseUsage(null);
       return;
     }
+    setEnterpriseUsageLoading(true);
+    setEnterpriseUsageError(null);
     try {
       setEnterpriseUsage(await loader());
     } catch (error) {
       setEnterpriseUsage(null);
+      setEnterpriseUsageError(error instanceof Error ? error.message : "加载失败");
+    } finally {
+      setEnterpriseUsageLoading(false);
     }
   }, [session, isEnterpriseAdmin, loadEnterpriseUsage, loadPersonalUsage]);
 
@@ -222,22 +229,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>
-          <button type="button" onClick={refreshEnterpriseUsage}>
+          <span className={`management-center-status-pill ${enterpriseUsageError ? "is-error" : enterpriseUsageLoading ? "is-loading" : "is-online"}`}>
+            {enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"}
+          </span>
+          <button type="button" onClick={refreshEnterpriseUsage} disabled={enterpriseUsageLoading}>
             <ReloadOutlined />
             刷新数据
           </button>
-          <button type="button">
+          <button type="button" className="is-muted-action">
             <UserOutlined />
             成员管理
           </button>
@@ -251,8 +271,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>
@@ -267,7 +288,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">
@@ -294,7 +315,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) => (
@@ -348,7 +372,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="调用记录">