feat: 外观支持自定义 CSS/JS，并升级发帖工作台与积分存量看板

后台可注入全站 CSS/JS（SSR 生效，CSS 可热换）；发帖/编辑改为锁一屏工作室；经济看板增加存量健康度；主题令牌与弹层误关一并收紧。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/admin/economy/EconomyClient.tsx

@@ -157,6 +157,174 @@ function todayDelta(items: PointLedgerItem[]) {
   return { granted, spent };
 }
 
+type FlowHealth = "low" | "ok" | "hot";
+
+function stockFromStats(stats: EconomyStats) {
+  let granted = 0;
+  let spent = 0;
+  const series = stats.delta_series || [];
+  const seriesHas = series.some((d) => (Number(d.granted) || 0) > 0 || (Number(d.spent) || 0) > 0);
+  if (seriesHas) {
+    for (const d of series) {
+      granted += Math.max(0, Number(d.granted) || 0);
+      spent += Math.max(0, Number(d.spent) || 0);
+    }
+  } else {
+    for (const it of stats.recent_ledger || []) {
+      const n = Number(it.delta) || 0;
+      if (n > 0) granted += n;
+      else if (n < 0) spent += -n;
+    }
+  }
+  let frozen = 0;
+  for (const it of stats.recent_ledger || []) {
+    if (it.reason === "bounty_escrow" && (Number(it.delta) || 0) < 0) {
+      frozen += Math.abs(Number(it.delta));
+    }
+  }
+  if ((stats.escrowed_points || 0) > frozen) {
+    frozen = stats.escrowed_points;
+  }
+  const circulating = granted - spent;
+  const empty = granted <= 0 && spent <= 0 && frozen <= 0;
+  const rate = granted > 0 ? Math.round((spent / granted) * 100) : 0;
+  let health: FlowHealth = "ok";
+  if (rate < 20) health = "low";
+  else if (rate > 60) health = "hot";
+  return { granted, spent, circulating, frozen, empty, rate, health };
+}
+
+const HEALTH_COPY: Record<FlowHealth, string> = {
+  low: "积分消耗偏低，可考虑增加积分消耗场景",
+  ok: "积分经济体健康",
+  hot: "积分消耗较快，注意通胀",
+};
+
+const HEALTH_LABEL: Record<FlowHealth, string> = {
+  low: "偏低",
+  ok: "健康",
+  hot: "偏快",
+};
+
+function StockOverviewCard({ stats }: { stats: EconomyStats }) {
+  const stock = useMemo(() => stockFromStats(stats), [stats]);
+  const { granted, spent, circulating, frozen, empty, rate, health } = stock;
+  const tip = HEALTH_COPY[health];
+  const showFrozen = frozen > 0;
+
+  let circBarPct = granted > 0 ? Math.max(0, (circulating / granted) * 100) : 0;
+  const spentLabelPct = granted > 0 ? Math.min(100, (spent / granted) * 100) : 0;
+  const circLabelPct = granted > 0 ? Math.max(0, Math.round((Math.max(0, circulating) / granted) * 100)) : 0;
+  const netSpent = Math.max(0, spent - frozen);
+  let netSpentPct = granted > 0 ? (netSpent / granted) * 100 : 0;
+  let frozenPct = granted > 0 && showFrozen ? (frozen / granted) * 100 : 0;
+  const segSum = circBarPct + netSpentPct + frozenPct;
+  if (segSum > 100 && segSum > 0) {
+    const scale = 100 / segSum;
+    circBarPct *= scale;
+    netSpentPct *= scale;
+    frozenPct *= scale;
+  }
+
+  return (
+    <section className="stock-card">
+      <div className="flex items-start justify-between gap-3 mb-3">
+        <div className="min-w-0">
+          <h3 className="text-[14.5px] font-semibold" style={{ color: "var(--ink)" }}>
+            积分存量概览
+          </h3>
+          <p className="meta text-[11.5px] mt-0.5 leading-relaxed">基于全站累计流水计算</p>
+        </div>
+        {!empty ? (
+          <span
+            className={`stock-badge is-${health} shrink-0`}
+            title={tip}
+          >
+            流通率 {granted > 0 ? `${rate}%` : "—"} · {HEALTH_LABEL[health]}
+          </span>
+        ) : null}
+      </div>
+
+      {empty ? (
+        <div className="stock-card-body items-center justify-center">
+          <p className="meta text-center">暂无流水，无法计算存量</p>
+        </div>
+      ) : (
+        <div className="stock-card-body">
+          <div>
+            <p className="text-[13px]" style={{ color: "var(--ink-3)" }}>
+              流通中积分
+            </p>
+            <p
+              className="tabular-nums text-[32px] font-bold leading-none mt-1"
+              style={{ color: "var(--stock-circ)", fontVariantNumeric: "tabular-nums" }}
+            >
+              {fmt(circulating)}
+            </p>
+          </div>
+
+          <div>
+            <div
+              className="stock-bar"
+              role="img"
+              aria-label={`流通中 ${circLabelPct}%，消耗 ${Math.round(spentLabelPct)}%${
+                showFrozen ? `，托管冻结 ${fmt(frozen)}` : ""
+              }`}
+            >
+              {circBarPct > 0 ? (
+                <span className="stock-bar-seg is-circ" style={{ width: `${circBarPct}%` }} />
+              ) : null}
+              {netSpentPct > 0 ? (
+                <span className="stock-bar-seg is-spent" style={{ width: `${netSpentPct}%` }} />
+              ) : null}
+              {frozenPct > 0 ? (
+                <span className="stock-bar-seg is-frozen" style={{ width: `${frozenPct}%` }} />
+              ) : null}
+            </div>
+            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1.5 text-[12px] tabular-nums">
+              <span style={{ color: "var(--stock-circ)" }}>流通中 {circLabelPct}%</span>
+              <span style={{ color: "var(--ink-3)" }}>消耗 {Math.round(spentLabelPct)}%</span>
+              {showFrozen ? (
+                <span style={{ color: "var(--stock-frozen)" }}>托管 {fmt(frozen)}</span>
+              ) : null}
+            </div>
+          </div>
+
+          <div>
+            <p className="text-[13px] flex flex-wrap items-center gap-x-4 gap-y-1" style={{ color: "var(--ink-2)" }}>
+              <span>
+                累计发放{" "}
+                <strong className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>
+                  {fmt(granted)}
+                </strong>
+              </span>
+              <span>
+                累计消耗{" "}
+                <strong className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>
+                  {fmt(spent)}
+                </strong>
+              </span>
+              {showFrozen ? (
+                <span>
+                  托管冻结{" "}
+                  <strong className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>
+                    {fmt(frozen)}
+                  </strong>
+                </span>
+              ) : null}
+            </p>
+            {showFrozen ? (
+              <p className="text-[12px] mt-1.5" style={{ color: "var(--ink-3)" }}>
+                托管的 {fmt(frozen)} 积分处于冻结态，悬赏采纳或退回后释放
+              </p>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
+
 function LedgerUserLink({ user, compact }: { user: LedgerParty; compact?: boolean }) {
   const name = partyName(user);
   return (
@@ -207,7 +375,7 @@ function RecentLedgerRow({ it }: { it: PointLedgerItem }) {
       )}
 
       {payee ? (
-        <span className="hidden md:flex items-center gap-1.5 min-w-0 shrink-0">
+        <span className="hidden xl:flex items-center gap-1.5 min-w-0 shrink-0">
           <ArrowRight size={13} className="shrink-0" style={{ color: "var(--ink-3)" }} aria-hidden />
           <LedgerUserLink user={payee} compact />
         </span>
@@ -306,7 +474,7 @@ export default function EconomyClient({ stats }: { stats: EconomyStats }) {
         />
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 [&>*]:min-w-0">
         <AdminChartCard title="签到趋势" hint="近 14 日每日签到人数">
           {checkinSeries.length === 0 ? (
             <p className="meta text-center py-16">暂无签到数据</p>
@@ -343,48 +511,52 @@ export default function EconomyClient({ stats }: { stats: EconomyStats }) {
             <NamedPieChart data={postsByType} />
           )}
         </AdminChartCard>
-      </div>
 
-      <section className="panel overflow-hidden ledger-feed">
-        <div
-          className="px-5 py-3 flex items-start justify-between gap-3 flex-wrap"
-          style={{ borderBottom: "1px solid var(--line)" }}
-        >
-          <p className="font-medium text-[15px] pt-0.5" style={{ color: "var(--ink)" }}>
-            最近流水
+        <StockOverviewCard stats={stats} />
+
+        <section className="panel overflow-hidden flex flex-col max-h-[420px]">
+          <div
+            className="px-4 py-3 flex items-start justify-between gap-2 flex-wrap"
+            style={{ borderBottom: "1px solid var(--line)" }}
+          >
+            <p className="font-medium text-[15px] pt-0.5" style={{ color: "var(--ink)" }}>
+              最近流水
+            </p>
+            <AdminSegmented
+              size="sm"
+              role="group"
+              ariaLabel="按类型筛选最近流水"
+              options={LEDGER_FILTERS}
+              value={filter}
+              onChange={setFilter}
+            />
+          </div>
+          <p className="px-4 py-2 text-[12.5px] shrink-0" style={{ borderBottom: "1px solid var(--line)", color: "var(--ink-2)" }}>
+            今日 发放{" "}
+            <span className="tabular-nums font-semibold" style={{ color: "var(--ledger-in)" }}>
+              +{fmt(today.granted)}
+            </span>
+            {" · "}
+            消耗{" "}
+            <span className="tabular-nums font-semibold" style={{ color: "var(--ledger-out)" }}>
+              -{fmt(today.spent)}
+            </span>
           </p>
-          <AdminSegmented
-            size="sm"
-            role="group"
-            ariaLabel="按类型筛选最近流水"
-            options={LEDGER_FILTERS}
-            value={filter}
-            onChange={setFilter}
-          />
-        </div>
-        <p className="px-5 py-2 text-[12.5px]" style={{ borderBottom: "1px solid var(--line)", color: "var(--ink-2)" }}>
-          今日 发放{" "}
-          <span className="tabular-nums font-semibold" style={{ color: "var(--ledger-in)" }}>
-            +{fmt(today.granted)}
-          </span>
-          {" · "}
-          消耗{" "}
-          <span className="tabular-nums font-semibold" style={{ color: "var(--ledger-out)" }}>
-            -{fmt(today.spent)}
-          </span>
-        </p>
-        {ledger.length === 0 ? (
-          <p className="meta text-center py-10">暂无流水</p>
-        ) : filtered.length === 0 ? (
-          <p className="meta text-center py-10">该分类下暂无流水</p>
-        ) : (
-          <ul>
-            {filtered.map((it) => (
-              <RecentLedgerRow key={it.id} it={it} />
-            ))}
-          </ul>
-        )}
-      </section>
+          <div className="flex-1 min-h-0 overflow-y-auto">
+            {ledger.length === 0 ? (
+              <p className="meta text-center py-10">暂无流水</p>
+            ) : filtered.length === 0 ? (
+              <p className="meta text-center py-10">该分类下暂无流水</p>
+            ) : (
+              <ul>
+                {filtered.map((it) => (
+                  <RecentLedgerRow key={it.id} it={it} />
+                ))}
+              </ul>
+            )}
+          </div>
+        </section>
+      </div>
 
       <p className="meta text-[12.5px] mt-5">
         用户可在{" "}