feat(attach): 附件可配置限额、流式落盘与分阶段上传

管理端可配类型/体积；上传改流式避免整文件进内存；发帖先选再传并拦截未上传提交；提高 Next proxy 体积上限。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-17 07:33:16 +08:00
parent 6cc434f103
commit 61bf9fb48c
24 changed files with 2513 additions and 307 deletions
--- a/frontend/app/admin/settings/SettingsAdmin.tsx
+++ b/frontend/app/admin/settings/SettingsAdmin.tsx
@@ -15,17 +15,26 @@ import {
  Wrench,
  Palette,
  FileText,
+  Paperclip,
+  Image as ImageIcon,
 } from "lucide-react";
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
+  AdminExtChipEditor,
  AdminField,
  AdminPageHeader,
  AdminSection,
+  AdminStepper,
  AdminSwitch,
 } from "@/components/admin";
 import { apiUpdateSiteSettings, type PublicSettings } from "@/lib/api";
 import { toast } from "@/lib/toast";

+function extsEqual(a: string[], b: string[]) {
+  if (a.length !== b.length) return false;
+  return a.every((v, i) => v === b[i]);
+}
+
 type SectionId =
  | "basic"
  | "content"
@@ -119,7 +128,18 @@ export default function SettingsAdmin({ initial }: { initial: PublicSettings })
  const [togglingLink, setTogglingLink] = useState(false);
  const [active, setActive] = useState<SectionId>("basic");

+  const [extLimit, setExtLimit] = useState(initial.attachment_ext_limit !== false);
+  const [exts, setExts] = useState<string[]>(() => [...(initial.attachment_exts || [])]);
+  const [savedExts, setSavedExts] = useState<string[]>(() => [...(initial.attachment_exts || [])]);
+  const [attMaxMB, setAttMaxMB] = useState(initial.attachment_max_mb || 20);
+  const [attMaxCount, setAttMaxCount] = useState(initial.attachment_max_count || 10);
+  const [imageMaxMB, setImageMaxMB] = useState(initial.image_max_mb || 5);
+  const [togglingExtLimit, setTogglingExtLimit] = useState(false);
+  const [savingLimits, setSavingLimits] = useState(false);
+  const [savingExts, setSavingExts] = useState(false);
+
  const dirty = siteName.trim() !== savedName || siteDescription.trim() !== savedDesc;
+  const extsDirty = useMemo(() => !extsEqual(exts, savedExts), [exts, savedExts]);

  useEffect(() => {
    const ids = NAV.map((n) => n.id);
@@ -232,6 +252,75 @@ export default function SettingsAdmin({ initial }: { initial: PublicSettings })
    }
  };

+  const toggleExtLimit = async () => {
+    if (togglingExtLimit) return;
+    const next = !extLimit;
+    setTogglingExtLimit(true);
+    try {
+      const res = await apiUpdateSiteSettings({ attachment_ext_limit: next });
+      setExtLimit(res.attachment_ext_limit !== false);
+      toast(res.attachment_ext_limit !== false ? "已开启附件类型限制" : "已关闭附件类型限制", "ok");
+    } catch (e) {
+      toast(e instanceof Error ? e.message : "保存失败");
+    } finally {
+      setTogglingExtLimit(false);
+    }
+  };
+
+  const saveUploadLimits = async (patch: {
+    attachment_max_mb?: number;
+    attachment_max_count?: number;
+    image_max_mb?: number;
+  }) => {
+    if (savingLimits) return;
+    setSavingLimits(true);
+    try {
+      const res = await apiUpdateSiteSettings(patch);
+      setAttMaxMB(res.attachment_max_mb);
+      setAttMaxCount(res.attachment_max_count);
+      setImageMaxMB(res.image_max_mb);
+      toast("上传限额已保存", "ok");
+    } catch (e) {
+      toast(e instanceof Error ? e.message : "保存失败");
+    } finally {
+      setSavingLimits(false);
+    }
+  };
+
+  // 步进器手输会连续触发 onChange，防抖后再写库
+  const limitsTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scheduleLimitSave = (patch: {
+    attachment_max_mb?: number;
+    attachment_max_count?: number;
+    image_max_mb?: number;
+  }) => {
+    if (limitsTimer.current) clearTimeout(limitsTimer.current);
+    limitsTimer.current = setTimeout(() => {
+      void saveUploadLimits(patch);
+    }, 450);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (limitsTimer.current) clearTimeout(limitsTimer.current);
+    };
+  }, []);
+
+  const saveExts = async () => {
+    if (savingExts || !extsDirty) return;
+    setSavingExts(true);
+    try {
+      const res = await apiUpdateSiteSettings({ attachment_exts: exts });
+      setExts([...res.attachment_exts]);
+      setSavedExts([...res.attachment_exts]);
+      toast("附件扩展名已保存", "ok");
+    } catch (e) {
+      toast(e instanceof Error ? e.message : "保存失败");
+    } finally {
+      setSavingExts(false);
+    }
+  };
+
  return (
    <div>
      <AdminPageHeader
@@ -310,7 +399,7 @@ export default function SettingsAdmin({ initial }: { initial: PublicSettings })
            </AdminSection>
          </div>

-          <div id="settings-content" className="scroll-mt-4">
+          <div id="settings-content" className="scroll-mt-4 flex flex-col gap-4">
            <AdminSection title="内容与互动" description="控制注册、评论、消息与链接打开方式">
              <SwitchRow
                bordered
@@ -380,6 +469,137 @@ export default function SettingsAdmin({ initial }: { initial: PublicSettings })
                }
              />
            </AdminSection>
+
+            <AdminSection
+              title="附件与上传"
+              description="帖子附件限额、扩展名白名单与正文插图体积；改后经实时通道同步到发帖页"
+            >
+              <SwitchRow
+                bordered
+                title={
+                  <>
+                    <Paperclip size={15} /> 附件单文件上限
+                  </>
+                }
+                description="发帖附件体积上限。过大可能拖垮进程，并须把反代 / Next 请求体上限调到不少于该值。"
+                control={
+                  <AdminStepper
+                    value={attMaxMB}
+                    min={1}
+                    max={999999}
+                    unit="MB"
+                    ariaLabel="附件单文件上限"
+                    disabled={savingLimits}
+                    onChange={(n) => {
+                      setAttMaxMB(n);
+                      scheduleLimitSave({ attachment_max_mb: n });
+                    }}
+                  />
+                }
+              />
+              {attMaxMB >= 50 ? (
+                <p className="j13-ext-warn !mt-0 !mb-3" role="status">
+                  当前 ≥50MB：请确认服务器内存与反代 body 上限已同步调大，否则用户仍会先撞上网关 413。
+                </p>
+              ) : null}
+
+              <SwitchRow
+                bordered
+                title={
+                  <>
+                    <Paperclip size={15} /> 每帖附件个数
+                  </>
+                }
+                description="单帖（含草稿）最多可绑定的附件数量。"
+                control={
+                  <AdminStepper
+                    value={attMaxCount}
+                    min={1}
+                    max={20}
+                    unit="个"
+                    ariaLabel="每帖附件个数"
+                    disabled={savingLimits}
+                    onChange={(n) => {
+                      setAttMaxCount(n);
+                      scheduleLimitSave({ attachment_max_count: n });
+                    }}
+                  />
+                }
+              />
+
+              <SwitchRow
+                bordered
+                title={
+                  <>
+                    <ImageIcon size={15} /> 正文插图上限
+                  </>
+                }
+                description="Markdown 拖拽/粘贴图片（仅 JPEG / PNG / WebP）。插图会在服务端解析头部。"
+                control={
+                  <AdminStepper
+                    value={imageMaxMB}
+                    min={1}
+                    max={999999}
+                    unit="MB"
+                    ariaLabel="正文插图上限"
+                    disabled={savingLimits}
+                    onChange={(n) => {
+                      setImageMaxMB(n);
+                      scheduleLimitSave({ image_max_mb: n });
+                    }}
+                  />
+                }
+              />
+              {imageMaxMB >= 10 ? (
+                <p className="j13-ext-warn !mt-0 !mb-3" role="status">
+                  插图 ≥10MB：解码头部更耗内存，建议保持较小值。
+                </p>
+              ) : null}
+
+              <SwitchRow
+                bordered
+                title={
+                  <>
+                    <Paperclip size={15} /> 限制附件扩展名
+                  </>
+                }
+                description={
+                  extLimit
+                    ? "仅允许下方列表中的扩展名；安装包 / 脚本 / 网页可按需保留。"
+                    : "任意格式可传，仍受体积上限与下载沙箱约束。"
+                }
+                control={
+                  <AdminSwitch
+                    checked={extLimit}
+                    disabled={togglingExtLimit}
+                    onChange={() => void toggleExtLimit()}
+                    label="限制附件扩展名"
+                  />
+                }
+              />
+
+              <div className="pt-2">
+                <p className="text-[13.5px] font-medium mb-2" style={{ color: "var(--ink)" }}>
+                  允许的扩展名
+                </p>
+                <AdminExtChipEditor
+                  value={exts}
+                  onChange={setExts}
+                  disabled={!extLimit || savingExts}
+                />
+                <div className="flex justify-end mt-3">
+                  <button
+                    type="button"
+                    className="btn btn-primary btn-sm"
+                    disabled={!extsDirty || savingExts || !extLimit}
+                    onClick={() => void saveExts()}
+                  >
+                    {savingExts ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+                    保存扩展名
+                  </button>
+                </div>
+              </div>
+            </AdminSection>
          </div>

          <div id="settings-brand" className="scroll-mt-4">
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -404,6 +404,242 @@ body {
  border: 1px solid var(--line);
  background: var(--panel);
 }
+.j13-compose-attach-section {
+  background: var(--panel);
+  border-color: color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
+}
+.j13-compose-attach-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 13px !important;
+  letter-spacing: 0.02em;
+  color: var(--ink-2) !important;
+}
+.j13-compose-attach-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+.j13-compose-drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 7.5rem;
+  padding: 1.15rem 1rem;
+  border-radius: 14px;
+  border: 1.5px dashed color-mix(in srgb, var(--accent) 42%, var(--line));
+  background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
+  cursor: pointer;
+  text-align: center;
+  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+}
+.j13-compose-drop:hover,
+.j13-compose-drop:focus-visible {
+  border-color: var(--accent);
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+.j13-compose-drop.is-over {
+  border-color: var(--accent);
+  border-style: solid;
+  background: color-mix(in srgb, var(--accent-soft) 85%, var(--panel));
+}
+.j13-compose-drop.is-disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.j13-compose-drop-icon {
+  color: var(--accent);
+  opacity: 0.85;
+}
+.j13-compose-drop-lead {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--ink);
+}
+.j13-compose-drop-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ink-3);
+  max-width: 36rem;
+}
+.j13-compose-att-list,
+.j13-compose-att-queue {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.j13-compose-att-pending {
+  margin-top: 0.75rem;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line));
+  background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel));
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+.j13-compose-att-pending-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+.j13-compose-att-pending-title {
+  margin: 0;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--ink);
+}
+.j13-compose-att-upload-btn {
+  width: 100%;
+  justify-content: center;
+  gap: 0.45rem;
+  min-height: 42px;
+  font-size: 14.5px;
+  font-weight: 600;
+  /* 次于发布主 CTA：白底 + 实线 accent，在 soft 待传区里仍清晰 */
+  color: var(--accent);
+  background: var(--panel);
+  border-color: var(--accent);
+  border-width: 1.5px;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06),
+    0 2px 8px color-mix(in srgb, var(--accent) 14%, transparent);
+}
+.j13-compose-att-upload-btn:hover:not(:disabled) {
+  color: var(--accent-on);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.j13-compose-att-upload-btn:active:not(:disabled) {
+  background: var(--accent-hi);
+  border-color: var(--accent-hi);
+  color: var(--accent-on);
+}
+.j13-compose-att-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+}
+.j13-compose-att-card.is-error {
+  border-color: color-mix(in srgb, var(--danger, #c44) 45%, var(--line));
+}
+.j13-compose-att-name {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--ink);
+}
+.j13-compose-att-bar {
+  margin-top: 6px;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--panel-2);
+  overflow: hidden;
+}
+.j13-compose-att-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--accent);
+  transition: width 0.2s ease;
+}
+.j13-ext-editor.is-disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.j13-ext-warn {
+  margin: 0 0 0.75rem;
+  padding: 0.55rem 0.75rem;
+  border-radius: 10px;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: color-mix(in srgb, var(--gold) 85%, var(--ink));
+  background: color-mix(in srgb, var(--gold) 14%, var(--panel));
+  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
+}
+.j13-ext-groups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 0.65rem;
+}
+.j13-ext-wall {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  min-height: 2.75rem;
+  padding: 0.55rem 0.65rem;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: var(--panel-2);
+  cursor: text;
+}
+.j13-ext-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.2rem 0.35rem 0.2rem 0.55rem;
+  border-radius: 999px;
+  font-size: 12.5px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+  background: var(--panel);
+  border: 1px solid var(--line);
+}
+.j13-ext-chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ink-3);
+  cursor: pointer;
+}
+.j13-ext-chip-x:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--ink) 8%, transparent);
+}
+.j13-ext-input-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 9rem;
+  flex: 1 1 8rem;
+}
+.j13-ext-input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-size: 13px;
+  color: var(--ink);
+  padding: 0.2rem 0;
+}
 .j13-compose-att-paid {
  color: var(--gold);
  font-weight: 650;