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

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

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

frontend/app/admin/appearance/AppearanceAdmin.tsx

@@ -12,6 +12,7 @@ import {
   RotateCcw,
   Pipette,
   Sparkles,
+  FileCode2,
 } from "lucide-react";
 import {
   AdminPageHeader,
@@ -20,7 +21,7 @@ import {
   AdminStepper,
   AdminSwitch,
 } from "@/components/admin";
-import { apiUpdateSiteSettings, type PublicSettings } from "@/lib/api";
+import { apiUpdateSiteSettings, type PublicSettings, type UpdateSiteSettingsBody } from "@/lib/api";
 import { toast } from "@/lib/toast";
 import {
   ACCENT_PRESETS,
@@ -30,14 +31,27 @@ import {
   findPreset,
   normalizeHex,
 } from "@/lib/theme";
+import {
+  MAX_CUSTOM_CSS_CHARS,
+  MAX_CUSTOM_JS_CHARS,
+  SAMPLE_CUSTOM_CSS,
+  SAMPLE_CUSTOM_JS,
+  applyCustomCSS,
+  clipCustomSnippet,
+} from "@/lib/customCode";
 
-// 后台「外观设置」：主题色、代码块折叠与界面动画。
-// 主题色修改时立即对整页实时预览（仅本地），保存后才写库并对所有用户生效。
+// 后台「外观设置」：主题色、自定义 CSS/JS、代码块折叠与界面动画。
+// 主题色 / 自定义 CSS 修改时立即对整页实时预览（仅本地），保存后才写库并对所有用户生效。
+// 自定义 JS 不在编辑时执行，保存后整页加载生效。
 export default function AppearanceAdmin({ initial }: { initial: PublicSettings }) {
   const router = useRouter();
   const initialAccent = initial.accent || "";
   const [savedHex, setSavedHex] = useState(initialAccent);
   const [draft, setDraft] = useState(initialAccent || DEFAULT_ACCENT);
+  const [savedCustomCSS, setSavedCustomCSS] = useState(initial.custom_css || "");
+  const [customCSS, setCustomCSS] = useState(initial.custom_css || SAMPLE_CUSTOM_CSS);
+  const [savedCustomJS, setSavedCustomJS] = useState(initial.custom_js || "");
+  const [customJS, setCustomJS] = useState(initial.custom_js || SAMPLE_CUSTOM_JS);
   const [codeAutoFold, setCodeAutoFold] = useState(initial.code_block_auto_fold !== false);
   const [foldLines, setFoldLines] = useState(
     Number.isFinite(initial.code_block_fold_lines) ? initial.code_block_fold_lines : 5
@@ -54,6 +68,8 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
   const [saving, setSaving] = useState(false);
   const savedRef = useRef(savedHex);
   savedRef.current = savedHex;
+  const savedCSSRef = useRef(savedCustomCSS);
+  savedCSSRef.current = savedCustomCSS;
 
   const normalized = useMemo(() => normalizeHex(draft), [draft]);
   const pair = useMemo(
@@ -62,7 +78,12 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
   );
   const preset = useMemo(() => (normalized ? findPreset(normalized) : null), [normalized]);
   const submitHex = normalized && normalized !== DEFAULT_ACCENT ? normalized : "";
-  const dirty = (savedHex || DEFAULT_ACCENT) !== (normalized || "");
+  const accentDirty = (savedHex || DEFAULT_ACCENT) !== (normalized || "");
+  const cssIsGuide = !savedCustomCSS && customCSS === SAMPLE_CUSTOM_CSS;
+  const jsIsGuide = !savedCustomJS && customJS === SAMPLE_CUSTOM_JS;
+  const cssDirty = customCSS !== savedCustomCSS && !cssIsGuide;
+  const jsDirty = customJS !== savedCustomJS && !jsIsGuide;
+  const dirty = accentDirty || cssDirty || jsDirty;
   const invalid = draft.trim() !== "" && !normalized;
 
   useEffect(() => {
@@ -72,19 +93,35 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
     };
   }, [normalized]);
 
+  useEffect(() => {
+    applyCustomCSS(customCSS, true);
+    return () => {
+      applyCustomCSS(savedCSSRef.current, false);
+    };
+  }, [customCSS]);
+
   const handleSave = async () => {
     if (!normalized || saving) return;
+    const body: UpdateSiteSettingsBody = {};
+    if (accentDirty) body.accent = submitHex;
+    if (cssDirty) body.custom_css = customCSS;
+    if (jsDirty) body.custom_js = customJS;
+    if (Object.keys(body).length === 0) return;
     setSaving(true);
     try {
-      const res = await apiUpdateSiteSettings({ accent: submitHex });
+      const res = await apiUpdateSiteSettings(body);
       const next = (res.accent || "").toLowerCase();
       setSavedHex(next);
+      setSavedCustomCSS(res.custom_css || "");
+      setSavedCustomJS(res.custom_js || "");
       applyAccentTheme(next || null);
+      applyCustomCSS(res.custom_css || "", false);
       router.refresh();
-      toast(next ? "主题色已保存并对全站生效" : "已恢复默认主题色");
+      toast(jsDirty ? "外观已保存；自定义 JS 将在整页刷新后执行" : "外观已保存并对全站生效");
     } catch (e) {
       toast(e instanceof Error ? e.message : "保存失败", "error");
       applyAccentTheme(savedRef.current || null);
+      applyCustomCSS(savedCSSRef.current, false);
     } finally {
       setSaving(false);
     }
@@ -92,7 +129,10 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
 
   const discard = () => {
     setDraft(savedHex || DEFAULT_ACCENT);
+    setCustomCSS(savedCustomCSS || SAMPLE_CUSTOM_CSS);
+    setCustomJS(savedCustomJS || SAMPLE_CUSTOM_JS);
     applyAccentTheme(savedHex || null);
+    applyCustomCSS(savedCustomCSS, true);
   };
 
   const toggleCodeFold = async () => {
@@ -167,7 +207,7 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
       <AdminPageHeader
         icon={Palette}
         title="外观设置"
-        description="配置站点主题色、代码块折叠与界面动画"
+        description="配置站点主题色、自定义 CSS/JS、代码块折叠与界面动画"
       />
 
       <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-6">
@@ -296,7 +336,10 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
           <AdminSection title="实时预览">
             <div
               className="rounded-[var(--r-sm)] border p-4 space-y-4"
-              style={{ borderColor: "var(--line)", background: "var(--bg)" }}
+              style={{
+                borderColor: "var(--line)",
+                background: "var(--bg)",
+              }}
             >
               <div className="flex flex-wrap items-center gap-2.5">
                 <button type="button" className="btn btn-primary btn-sm">
@@ -327,14 +370,16 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
                 </span>
               </div>
               <div className="max-w-xs">
-                <div className="j13-bcard" aria-current="page">
-                  <span
-                    className="j13-bcard-ico"
-                    style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
-                  >
-                    <Palette size={16} />
-                  </span>
-                  <span className="j13-bcard-name text-[13px] flex-1">选中的板块卡片</span>
+                <div className="panel p-3">
+                  <div className="j13-bcard" aria-current="page">
+                    <span
+                      className="j13-bcard-ico"
+                      style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+                    >
+                      <Palette size={16} />
+                    </span>
+                    <span className="j13-bcard-name text-[13px] flex-1">选中的板块卡片</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -470,6 +515,85 @@ export default function AppearanceAdmin({ initial }: { initial: PublicSettings }
         </div>
       </div>
 
+      <AdminSection
+        title={
+          <span className="inline-flex items-center gap-1.5">
+            <FileCode2 size={15} /> 自定义代码
+          </span>
+        }
+        description="注入全站 HTML。空配置时先显示注释示例（不会自动写入）；保存后才对访客生效。勿包含 </style> 或 </script>。"
+        className="mb-6"
+      >
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+          <div>
+            <div className="flex items-center justify-between gap-2 mb-1">
+              <label className="field-label !mb-0" htmlFor="custom-css">
+                自定义 CSS
+              </label>
+              {customCSS !== SAMPLE_CUSTOM_CSS && (
+                <button
+                  type="button"
+                  className="btn btn-line btn-sm !h-7 !px-2.5 !text-[12px]"
+                  onClick={() => setCustomCSS(SAMPLE_CUSTOM_CSS)}
+                >
+                  填入示例
+                </button>
+              )}
+            </div>
+            <p className="meta text-[12.5px] mb-2 leading-relaxed">
+              覆盖令牌或组件类。本页即时预览；去掉注释后的规则才会改变外观。上限{" "}
+              {MAX_CUSTOM_CSS_CHARS.toLocaleString()} 字。
+            </p>
+            <textarea
+              id="custom-css"
+              className="j13-compose-field w-full font-mono text-[12.5px] leading-relaxed"
+              style={{ minHeight: 280 }}
+              spellCheck={false}
+              value={customCSS}
+              onChange={(e) => setCustomCSS(clipCustomSnippet(e.target.value, MAX_CUSTOM_CSS_CHARS))}
+              aria-label="自定义 CSS"
+            />
+            <p className="meta text-[11.5px] mt-1.5 tabular-nums">
+              {customCSS.length.toLocaleString()} / {MAX_CUSTOM_CSS_CHARS.toLocaleString()}
+              {cssIsGuide ? " · 示例未保存" : ""}
+            </p>
+          </div>
+          <div>
+            <div className="flex items-center justify-between gap-2 mb-1">
+              <label className="field-label !mb-0" htmlFor="custom-js">
+                自定义 JS
+              </label>
+              {customJS !== SAMPLE_CUSTOM_JS && (
+                <button
+                  type="button"
+                  className="btn btn-line btn-sm !h-7 !px-2.5 !text-[12px]"
+                  onClick={() => setCustomJS(SAMPLE_CUSTOM_JS)}
+                >
+                  填入示例
+                </button>
+              )}
+            </div>
+            <p className="meta text-[12.5px] mb-2 leading-relaxed">
+              仅站长/超管可写。不在编辑时运行，保存后需整页刷新。上限{" "}
+              {MAX_CUSTOM_JS_CHARS.toLocaleString()} 字。
+            </p>
+            <textarea
+              id="custom-js"
+              className="j13-compose-field w-full font-mono text-[12.5px] leading-relaxed"
+              style={{ minHeight: 280 }}
+              spellCheck={false}
+              value={customJS}
+              onChange={(e) => setCustomJS(clipCustomSnippet(e.target.value, MAX_CUSTOM_JS_CHARS))}
+              aria-label="自定义 JS"
+            />
+            <p className="meta text-[11.5px] mt-1.5 tabular-nums">
+              {customJS.length.toLocaleString()} / {MAX_CUSTOM_JS_CHARS.toLocaleString()}
+              {jsIsGuide ? " · 示例未保存" : ""}
+            </p>
+          </div>
+        </div>
+      </AdminSection>
+
       <div className="flex items-center justify-between gap-3 sticky bottom-5 panel !p-3.5 pl-5 z-10">
         <p className="text-[12.5px] meta hidden sm:block">
           {dirty ? "有未保存的改动，整页正处于实时预览状态" : "设置已是保存状态"}

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">
         用户可在{" "}