feat(compose): 正文内嵌隐藏块并升级 Markdown 编辑器

去掉整帖可见性表单，改为 :::hide 按块脱敏；工具栏补齐代码块、链接/图片对话框与粘贴拖拽上传。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-17 04:58:20 +08:00
parent d1155cbd64
commit 01e2fd05ca
19 changed files with 1867 additions and 471 deletions
--- a/frontend/components/ContentLockGate.tsx
+++ b/frontend/components/ContentLockGate.tsx
@@ -1,92 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import { Lock } from "lucide-react";
-import { apiUnlockPost } from "@/lib/api";
-import { toast } from "@/lib/toast";
-
-export default function ContentLockGate({
-  postId,
-  hint,
-  access,
-  points,
-  loggedIn,
-}: {
-  postId: number;
-  hint?: string;
-  access?: string;
-  points?: number;
-  loggedIn: boolean;
-}) {
-  const router = useRouter();
-  const [busy, setBusy] = useState(false);
-
-  const unlock = async () => {
-    setBusy(true);
-    try {
-      const res = await apiUnlockPost(String(postId));
-      if (res.post) {
-        toast("已解锁全文", "ok");
-        router.refresh();
-      } else {
-        toast(res.error || "解锁失败", "error");
-      }
-    } catch {
-      toast("解锁失败", "error");
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  return (
-    <div
-      className="rounded-[14px] px-6 py-10 text-center my-4"
-      style={{
-        background: "var(--accent-soft)",
-        border: "1px solid color-mix(in srgb, var(--accent) 20%, transparent)",
-      }}
-    >
-      <Lock size={28} className="mx-auto mb-3" style={{ color: "var(--accent)" }} />
-      <p className="font-bold text-[16px] mb-1" style={{ color: "var(--ink)" }}>
-        {hint || "正文暂不可见"}
-      </p>
-      <p className="meta text-[13px] mb-5">
-        {access === "points"
-          ? `支付 ${points || 0} 积分后可阅读全文`
-          : access === "reply"
-            ? "发表一条回复后即可阅读全文"
-            : access === "login"
-              ? "登录后即可阅读全文"
-              : null}
-      </p>
-      {access === "login" && !loggedIn && (
-        <Link
-          href={`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`}
-          className="btn btn-primary"
-        >
-          去登录
-        </Link>
-      )}
-      {access === "points" && loggedIn && (
-        <button type="button" className="btn btn-primary" disabled={busy} onClick={() => void unlock()}>
-          {busy ? "解锁中…" : `支付 ${points || 0} 积分解锁`}
-        </button>
-      )}
-      {access === "points" && !loggedIn && (
-        <Link
-          href={`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`}
-          className="btn btn-primary"
-        >
-          登录后解锁
-        </Link>
-      )}
-      {access === "reply" && (
-        <a href="#comments" className="btn btn-primary">
-          去回复
-        </a>
-      )}
-    </div>
-  );
-}
--- a/frontend/components/MarkdownBody.tsx
+++ b/frontend/components/MarkdownBody.tsx
@@ -1,21 +1,61 @@
 import type { Components } from "react-markdown";
 import { renderMarkdownToReact } from "@/components/markdown/renderMarkdown";
+import { splitHideSegments, type HideKind } from "@/lib/hideBlocks";
+import MdHideBlock from "@/components/markdown/MdHideBlock";

 type MarkdownBodyProps = {
  content: string;
  className?: string;
  components?: Components;
+  /** 详情页解锁门禁需要 */
+  postId?: number;
+  loggedIn?: boolean;
 };

 /**
- * 站点统一 Markdown 渲染（服务端）：GFM + Shiki 双主题、图箱、代码块复制/折叠。
- * 客户端预览请用 MarkdownBodyClient。
+ * 站点统一 Markdown 渲染（服务端）：GFM + Shiki；支持 :::hide 内嵌块。
 */
 export default async function MarkdownBody({
  content,
  className = "prose-content",
  components,
+  postId,
+  loggedIn = false,
 }: MarkdownBodyProps) {
-  const tree = await renderMarkdownToReact(content, components);
-  return <div className={className}>{tree}</div>;
+  const segs = splitHideSegments(content || "");
+  const nodes = [];
+  for (let i = 0; i < segs.length; i++) {
+    const seg = segs[i];
+    if (seg.type === "md") {
+      if (!seg.text.trim()) continue;
+      nodes.push(
+        <div key={`md-${i}`}>{await renderMarkdownToReact(seg.text, components)}</div>
+      );
+      continue;
+    }
+    const kind = seg.kind as HideKind;
+    if (seg.locked) {
+      nodes.push(
+        <MdHideBlock
+          key={`hide-${i}`}
+          kind={kind}
+          points={seg.points}
+          locked
+          postId={postId}
+          loggedIn={loggedIn}
+        />
+      );
+      continue;
+    }
+    const inner = seg.body.trim()
+      ? await renderMarkdownToReact(seg.body, components)
+      : null;
+    nodes.push(
+      <MdHideBlock key={`hide-${i}`} kind={kind} points={seg.points}>
+        {inner}
+      </MdHideBlock>
+    );
+  }
+
+  return <div className={className}>{nodes}</div>;
 }
--- a/frontend/components/MarkdownBodyClient.tsx
+++ b/frontend/components/MarkdownBodyClient.tsx
@@ -3,30 +3,64 @@
 import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { mergeMarkdownComponents } from "@/components/markdown/mergeComponents";
+import { splitHideSegments, type HideKind } from "@/lib/hideBlocks";
+import MdHideBlock from "@/components/markdown/MdHideBlock";

 type MarkdownBodyClientProps = {
  content: string;
  className?: string;
  components?: Components;
+  postId?: number;
+  loggedIn?: boolean;
 };

 /**
- * 客户端 Markdown（发帖预览 / 评论）：GFM + 图箱 / 代码折叠复制。
- * 语法高亮在 MdCodeBlock 内按需用 Shiki 补齐。
+ * 客户端 Markdown（发帖预览 / 评论）：GFM + 隐藏块徽章预览。
 */
 export default function MarkdownBodyClient({
  content,
  className = "prose-content",
  components,
+  postId,
+  loggedIn = false,
 }: MarkdownBodyClientProps) {
+  const segs = splitHideSegments(content || "");
+  const mdComponents = mergeMarkdownComponents(components);
+
  return (
    <div className={className}>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={mergeMarkdownComponents(components)}
-      >
-        {content || ""}
-      </ReactMarkdown>
+      {segs.map((seg, i) => {
+        if (seg.type === "md") {
+          if (!seg.text.trim()) return null;
+          return (
+            <ReactMarkdown key={`md-${i}`} remarkPlugins={[remarkGfm]} components={mdComponents}>
+              {seg.text}
+            </ReactMarkdown>
+          );
+        }
+        const kind = seg.kind as HideKind;
+        if (seg.locked) {
+          return (
+            <MdHideBlock
+              key={`hide-${i}`}
+              kind={kind}
+              points={seg.points}
+              locked
+              postId={postId}
+              loggedIn={loggedIn}
+            />
+          );
+        }
+        return (
+          <MdHideBlock key={`hide-${i}`} kind={kind} points={seg.points}>
+            {seg.body.trim() ? (
+              <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+                {seg.body}
+              </ReactMarkdown>
+            ) : null}
+          </MdHideBlock>
+        );
+      })}
    </div>
  );
 }
--- a/frontend/components/MarkdownEditor.tsx
+++ b/frontend/components/MarkdownEditor.tsx
@@ -1,23 +1,41 @@
 "use client";

-import { useRef, useState, useCallback, useEffect, type ReactNode } from "react";
+import {
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+  type ReactNode,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from "react";
 import {
  Bold,
  Italic,
+  Strikethrough,
  Code,
+  Code2,
  Quote,
  List,
+  ListOrdered,
  Heading2,
+  Heading3,
  Link as LinkIcon,
  Image as ImageIcon,
+  Table,
+  Minus,
  Eye,
  Pencil,
  Maximize2,
  Minimize2,
+  Lock,
+  ChevronDown,
+  Upload,
+  Link2,
 } from "lucide-react";
 import { apiUploadPostImage } from "@/lib/api";
 import { toast } from "@/lib/toast";
 import MarkdownBodyClient from "@/components/MarkdownBodyClient";
+import { SHIKI_LANG_IDS } from "@/components/markdown/shikiHighlighter";

 type MarkdownEditorProps = {
  value: string;
@@ -36,6 +54,10 @@ type WrapOpts = {
  linePrefix?: string;
 };

+type PopoverKind = "link" | "imageUrl" | "code" | "hide" | "heading" | "image" | null;
+
+const CODE_LANGS = ["plaintext", "aardio", ...SHIKI_LANG_IDS.filter((l) => l !== "plaintext")] as const;
+
 function applyWrap(
  el: HTMLTextAreaElement,
  value: string,
@@ -53,11 +75,7 @@ function applyWrap(
    );
    const inserted = lines.join("\n");
    const next = value.slice(0, start) + inserted + value.slice(end);
-    return {
-      next,
-      selStart: start,
-      selEnd: start + inserted.length,
-    };
+    return { next, selStart: start, selEnd: start + inserted.length };
  }

  const inner = selected || opts.placeholder || "";
@@ -68,6 +86,15 @@ function applyWrap(
  return { next, selStart, selEnd };
 }

+function isHttpUrl(raw: string): boolean {
+  try {
+    const u = new URL(raw.trim());
+    return u.protocol === "http:" || u.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
 export default function MarkdownEditor({
  value,
  onChange,
@@ -79,16 +106,28 @@ export default function MarkdownEditor({
 }: MarkdownEditorProps) {
  const taRef = useRef<HTMLTextAreaElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);
+  const toolbarRef = useRef<HTMLDivElement>(null);
  const [mode, setMode] = useState<"write" | "preview">("write");
  const [uploading, setUploading] = useState(false);
  const [fullscreen, setFullscreen] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [popover, setPopover] = useState<PopoverKind>(null);
+  const [linkText, setLinkText] = useState("");
+  const [linkUrl, setLinkUrl] = useState("https://");
+  const [imageUrl, setImageUrl] = useState("https://");
+  const [imageAlt, setImageAlt] = useState("图片");
+  const [codeQuery, setCodeQuery] = useState("");
+  const [hidePoints, setHidePoints] = useState(10);
+  const [hideStep, setHideStep] = useState<"menu" | "points">("menu");
+  const savedSel = useRef<{ start: number; end: number } | null>(null);

  useEffect(() => {
    if (!fullscreen) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.preventDefault();
-        setFullscreen(false);
+        if (popover) setPopover(null);
+        else setFullscreen(false);
      }
    };
    const prev = document.body.style.overflow;
@@ -98,7 +137,40 @@ export default function MarkdownEditor({
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
-  }, [fullscreen]);
+  }, [fullscreen, popover]);
+
+  useEffect(() => {
+    if (!popover) return;
+    const onDoc = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (toolbarRef.current && !toolbarRef.current.contains(t)) {
+        setPopover(null);
+      }
+    };
+    const onEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setPopover(null);
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [popover]);
+
+  const rememberSel = () => {
+    const el = taRef.current;
+    if (!el) return;
+    savedSel.current = { start: el.selectionStart, end: el.selectionEnd };
+  };
+
+  const restoreSel = () => {
+    const el = taRef.current;
+    const sel = savedSel.current;
+    if (!el || !sel) return;
+    el.focus();
+    el.setSelectionRange(sel.start, sel.end);
+  };

  const runWrap = useCallback(
    (opts: WrapOpts) => {
@@ -115,29 +187,35 @@ export default function MarkdownEditor({
  );

  const insertAtCursor = useCallback(
-    (text: string) => {
+    (text: string, selectInner?: { offset: number; length: number }) => {
      const el = taRef.current;
      if (!el) {
        onChange(value + (value.endsWith("\n") || !value ? "" : "\n") + text);
        return;
      }
-      const start = el.selectionStart;
-      const end = el.selectionEnd;
+      const start = savedSel.current?.start ?? el.selectionStart;
+      const end = savedSel.current?.end ?? el.selectionEnd;
      const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
      const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
      const inserted = padBefore + text + padAfter;
      const next = value.slice(0, start) + inserted + value.slice(end);
      onChange(next);
-      const caret = start + inserted.length;
      requestAnimationFrame(() => {
        el.focus();
-        el.setSelectionRange(caret, caret);
+        if (selectInner) {
+          const a = start + padBefore.length + selectInner.offset;
+          el.setSelectionRange(a, a + selectInner.length);
+        } else {
+          const caret = start + inserted.length;
+          el.setSelectionRange(caret, caret);
+        }
      });
+      savedSel.current = null;
    },
    [value, onChange]
  );

-  const handleImagePick = async (file: File | null) => {
+  const uploadImageFile = async (file: File | null) => {
    if (!file || disabled) return;
    if (!/^image\/(jpeg|png|webp)$/i.test(file.type)) {
      toast("仅支持 JPEG / PNG / WebP", "error");
@@ -166,82 +244,536 @@ export default function MarkdownEditor({
    }
  };

-  const tools: {
-    key: string;
+  const openPopover = (kind: PopoverKind) => {
+    rememberSel();
+    if (kind === "link") {
+      const el = taRef.current;
+      const selected = el ? value.slice(el.selectionStart, el.selectionEnd) : "";
+      setLinkText(selected || "链接文字");
+      setLinkUrl("https://");
+    }
+    if (kind === "imageUrl") {
+      setImageUrl("https://");
+      setImageAlt("图片");
+    }
+    if (kind === "code") setCodeQuery("");
+    if (kind === "hide") {
+      setHideStep("menu");
+      setHidePoints(10);
+    }
+    setPopover((prev) => (prev === kind ? null : kind));
+  };
+
+  const applyLink = () => {
+    const url = linkUrl.trim();
+    if (!isHttpUrl(url)) {
+      toast("请输入有效的 http(s) 链接", "error");
+      return;
+    }
+    const el = taRef.current;
+    restoreSel();
+    const start = el?.selectionStart ?? 0;
+    const end = el?.selectionEnd ?? 0;
+    const selected = value.slice(start, end);
+    const label = (selected || linkText.trim() || url).trim() || url;
+    const md = `[${label}](${url})`;
+    const next = value.slice(0, start) + md + value.slice(end);
+    onChange(next);
+    requestAnimationFrame(() => {
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange(start + md.length, start + md.length);
+    });
+    setPopover(null);
+  };
+
+  const applyImageUrl = () => {
+    const url = imageUrl.trim();
+    if (!isHttpUrl(url)) {
+      toast("请输入有效的图片 URL（http/https）", "error");
+      return;
+    }
+    const alt = imageAlt.trim() || "图片";
+    insertAtCursor(`![${alt}](${url})`);
+    setPopover(null);
+  };
+
+  const insertCodeBlock = (lang: string) => {
+    const el = taRef.current;
+    restoreSel();
+    const start = el?.selectionStart ?? 0;
+    const end = el?.selectionEnd ?? 0;
+    const selected = value.slice(start, end);
+    const body = selected || "代码";
+    const fence = "```" + lang + "\n" + body + "\n```";
+    const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
+    const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
+    const inserted = padBefore + fence + padAfter;
+    const next = value.slice(0, start) + inserted + value.slice(end);
+    onChange(next);
+    requestAnimationFrame(() => {
+      if (!el) return;
+      el.focus();
+      const bodyStart = start + padBefore.length + 3 + lang.length + 1;
+      el.setSelectionRange(bodyStart, bodyStart + body.length);
+    });
+    setPopover(null);
+  };
+
+  const insertHide = (kind: "login" | "reply" | "points", points?: number) => {
+    restoreSel();
+    const el = taRef.current;
+    const start = el?.selectionStart ?? 0;
+    const end = el?.selectionEnd ?? 0;
+    const selected = value.slice(start, end);
+    const body = selected || "在此填写隐藏内容";
+    const open =
+      kind === "points"
+        ? `:::hide points ${points || 10}`
+        : `:::hide ${kind}`;
+    const block = `${open}\n${body}\n:::`;
+    const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
+    const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
+    const inserted = padBefore + block + padAfter;
+    const next = value.slice(0, start) + inserted + value.slice(end);
+    onChange(next);
+    requestAnimationFrame(() => {
+      if (!el) return;
+      el.focus();
+      const bodyStart = start + padBefore.length + open.length + 1;
+      el.setSelectionRange(bodyStart, bodyStart + body.length);
+    });
+    setPopover(null);
+  };
+
+  const insertOrderedList = () => {
+    const el = taRef.current;
+    if (!el || disabled) return;
+    const start = el.selectionStart;
+    const end = el.selectionEnd;
+    const selected = value.slice(start, end) || "列表项";
+    const lines = selected.split("\n").map((l, i) => {
+      if (/^\d+\.\s/.test(l)) return l;
+      return `${i + 1}. ${l}`;
+    });
+    const inserted = lines.join("\n");
+    const next = value.slice(0, start) + inserted + value.slice(end);
+    onChange(next);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(start, start + inserted.length);
+    });
+  };
+
+  const insertTable = () => {
+    insertAtCursor(
+      "| 列1 | 列2 | 列3 |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |"
+    );
+  };
+
+  const onTextareaKeyDown = (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+      e.preventDefault();
+      onSubmitShortcut?.();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "b") {
+      e.preventDefault();
+      runWrap({ before: "**", after: "**", placeholder: "粗体" });
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "i") {
+      e.preventDefault();
+      runWrap({ before: "*", after: "*", placeholder: "斜体" });
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "k") {
+      e.preventDefault();
+      openPopover("link");
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "c") {
+      e.preventDefault();
+      openPopover("code");
+      return;
+    }
+  };
+
+  const onPaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const items = e.clipboardData?.items;
+    if (items) {
+      for (const item of items) {
+        if (item.type.startsWith("image/")) {
+          e.preventDefault();
+          const file = item.getAsFile();
+          await uploadImageFile(file);
+          return;
+        }
+      }
+    }
+    const text = e.clipboardData?.getData("text/plain")?.trim() || "";
+    if (text && isHttpUrl(text)) {
+      const el = taRef.current;
+      if (el && el.selectionStart !== el.selectionEnd) {
+        e.preventDefault();
+        const start = el.selectionStart;
+        const end = el.selectionEnd;
+        const selected = value.slice(start, end);
+        const md = `[${selected}](${text})`;
+        const next = value.slice(0, start) + md + value.slice(end);
+        onChange(next);
+        requestAnimationFrame(() => {
+          el.focus();
+          el.setSelectionRange(start + md.length, start + md.length);
+        });
+      }
+    }
+  };
+
+  const filteredLangs = CODE_LANGS.filter((l) =>
+    l.toLowerCase().includes(codeQuery.trim().toLowerCase())
+  );
+
+  const ToolBtn = ({
+    label,
+    icon,
+    onClick,
+    active,
+    disabled: dis,
+  }: {
    label: string;
    icon: ReactNode;
    onClick: () => void;
-  }[] = [
-    {
-      key: "bold",
-      label: "粗体",
-      icon: <Bold size={15} />,
-      onClick: () => runWrap({ before: "**", after: "**", placeholder: "粗体" }),
-    },
-    {
-      key: "italic",
-      label: "斜体",
-      icon: <Italic size={15} />,
-      onClick: () => runWrap({ before: "*", after: "*", placeholder: "斜体" }),
-    },
-    {
-      key: "code",
-      label: "行内代码",
-      icon: <Code size={15} />,
-      onClick: () => runWrap({ before: "`", after: "`", placeholder: "code" }),
-    },
-    {
-      key: "quote",
-      label: "引用",
-      icon: <Quote size={15} />,
-      onClick: () =>
-        runWrap({ before: "", linePrefix: "> ", placeholder: "引用内容" }),
-    },
-    {
-      key: "list",
-      label: "列表",
-      icon: <List size={15} />,
-      onClick: () =>
-        runWrap({ before: "", linePrefix: "- ", placeholder: "列表项" }),
-    },
-    {
-      key: "h2",
-      label: "二级标题",
-      icon: <Heading2 size={15} />,
-      onClick: () => runWrap({ before: "## ", after: "", placeholder: "标题" }),
-    },
-    {
-      key: "link",
-      label: "链接",
-      icon: <LinkIcon size={15} />,
-      onClick: () =>
-        runWrap({ before: "[", after: "](https://)", placeholder: "链接文字" }),
-    },
-    {
-      key: "image",
-      label: uploading ? "上传中…" : "插入图片",
-      icon: <ImageIcon size={15} />,
-      onClick: () => fileRef.current?.click(),
-    },
-  ];
+    active?: boolean;
+    disabled?: boolean;
+  }) => (
+    <button
+      type="button"
+      className={`j13-md-tool${active ? " is-active" : ""}`}
+      data-tip={label}
+      aria-label={label}
+      disabled={disabled || dis}
+      onClick={onClick}
+    >
+      {icon}
+    </button>
+  );
+
+  const Sep = () => <span className="j13-md-sep" aria-hidden />;

  return (
    <div className={`j13-md-editor${fullscreen ? " is-fullscreen" : ""}`}>
-      <div className="j13-md-toolbar">
-        <div className="flex items-center gap-0.5 flex-1 flex-wrap min-w-0">
-          {tools.map((t) => (
-            <button
-              key={t.key}
-              type="button"
-              className="j13-md-tool"
-              data-tip={t.label}
-              aria-label={t.label}
-              disabled={disabled || (t.key === "image" && uploading)}
-              onClick={t.onClick}
-            >
-              {t.icon}
-            </button>
-          ))}
+      <div className="j13-md-toolbar" ref={toolbarRef}>
+        <div className="j13-md-tool-groups flex items-center gap-0.5 flex-1 flex-wrap min-w-0">
+          <ToolBtn
+            label="粗体 Ctrl+B"
+            icon={<Bold size={15} />}
+            onClick={() => runWrap({ before: "**", after: "**", placeholder: "粗体" })}
+          />
+          <ToolBtn
+            label="斜体 Ctrl+I"
+            icon={<Italic size={15} />}
+            onClick={() => runWrap({ before: "*", after: "*", placeholder: "斜体" })}
+          />
+          <ToolBtn
+            label="删除线"
+            icon={<Strikethrough size={15} />}
+            onClick={() => runWrap({ before: "~~", after: "~~", placeholder: "删除线" })}
+          />
+          <Sep />
+          <div className="j13-md-popover-anchor relative">
+            <ToolBtn
+              label="标题"
+              icon={
+                <span className="inline-flex items-center gap-0.5">
+                  <Heading2 size={15} />
+                  <ChevronDown size={11} />
+                </span>
+              }
+              active={popover === "heading"}
+              onClick={() => openPopover("heading")}
+            />
+            {popover === "heading" && (
+              <div className="j13-md-popover" role="menu">
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    runWrap({ before: "## ", after: "", placeholder: "二级标题" });
+                    setPopover(null);
+                  }}
+                >
+                  <Heading2 size={14} /> 二级标题
+                </button>
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    runWrap({ before: "### ", after: "", placeholder: "三级标题" });
+                    setPopover(null);
+                  }}
+                >
+                  <Heading3 size={14} /> 三级标题
+                </button>
+              </div>
+            )}
+          </div>
+          <Sep />
+          <ToolBtn
+            label="引用"
+            icon={<Quote size={15} />}
+            onClick={() =>
+              runWrap({ before: "", linePrefix: "> ", placeholder: "引用内容" })
+            }
+          />
+          <ToolBtn
+            label="无序列表"
+            icon={<List size={15} />}
+            onClick={() =>
+              runWrap({ before: "", linePrefix: "- ", placeholder: "列表项" })
+            }
+          />
+          <ToolBtn
+            label="有序列表"
+            icon={<ListOrdered size={15} />}
+            onClick={insertOrderedList}
+          />
+          <ToolBtn label="表格" icon={<Table size={15} />} onClick={insertTable} />
+          <ToolBtn
+            label="分割线"
+            icon={<Minus size={15} />}
+            onClick={() => insertAtCursor("---")}
+          />
+          <Sep />
+          <ToolBtn
+            label="行内代码"
+            icon={<Code size={15} />}
+            onClick={() => runWrap({ before: "`", after: "`", placeholder: "code" })}
+          />
+          <div className="j13-md-popover-anchor relative">
+            <ToolBtn
+              label="代码块 Ctrl+Shift+C"
+              icon={<Code2 size={15} />}
+              active={popover === "code"}
+              onClick={() => openPopover("code")}
+            />
+            {popover === "code" && (
+              <div className="j13-md-popover j13-md-popover-wide" role="dialog" aria-label="选择语言">
+                <input
+                  autoFocus
+                  className="j13-md-popover-input"
+                  placeholder="搜索语言…"
+                  value={codeQuery}
+                  onChange={(e) => setCodeQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && filteredLangs[0]) {
+                      e.preventDefault();
+                      insertCodeBlock(filteredLangs[0]);
+                    }
+                  }}
+                />
+                <div className="j13-md-popover-list">
+                  {filteredLangs.map((lang) => (
+                    <button
+                      key={lang}
+                      type="button"
+                      onClick={() => insertCodeBlock(lang)}
+                    >
+                      {lang}
+                    </button>
+                  ))}
+                  {filteredLangs.length === 0 && (
+                    <p className="meta px-2 py-3 text-center">无匹配语言</p>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+          <Sep />
+          <div className="j13-md-popover-anchor relative">
+            <ToolBtn
+              label="链接 Ctrl+K"
+              icon={<LinkIcon size={15} />}
+              active={popover === "link"}
+              onClick={() => openPopover("link")}
+            />
+            {popover === "link" && (
+              <div className="j13-md-popover j13-md-popover-form" role="dialog" aria-label="插入链接">
+                <label className="j13-md-field">
+                  <span>文字</span>
+                  <input
+                    value={linkText}
+                    onChange={(e) => setLinkText(e.target.value)}
+                    className="j13-md-popover-input"
+                  />
+                </label>
+                <label className="j13-md-field">
+                  <span>URL</span>
+                  <input
+                    autoFocus
+                    value={linkUrl}
+                    onChange={(e) => setLinkUrl(e.target.value)}
+                    className="j13-md-popover-input"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        applyLink();
+                      }
+                    }}
+                  />
+                </label>
+                <div className="j13-md-popover-footer">
+                  <button type="button" className="btn btn-line btn-sm" onClick={() => setPopover(null)}>
+                    取消
+                  </button>
+                  <button type="button" className="btn btn-primary btn-sm" onClick={applyLink}>
+                    插入
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="j13-md-popover-anchor relative">
+            <ToolBtn
+              label={uploading ? "上传中…" : "图片"}
+              icon={<ImageIcon size={15} />}
+              active={popover === "image" || popover === "imageUrl"}
+              disabled={uploading}
+              onClick={() => openPopover("image")}
+            />
+            {popover === "image" && (
+              <div className="j13-md-popover" role="menu">
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={uploading}
+                  onClick={() => {
+                    setPopover(null);
+                    fileRef.current?.click();
+                  }}
+                >
+                  <Upload size={14} /> 上传图片
+                </button>
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => openPopover("imageUrl")}
+                >
+                  <Link2 size={14} /> 图片地址
+                </button>
+              </div>
+            )}
+            {popover === "imageUrl" && (
+              <div className="j13-md-popover j13-md-popover-form" role="dialog" aria-label="插入图片 URL">
+                <label className="j13-md-field">
+                  <span>说明</span>
+                  <input
+                    value={imageAlt}
+                    onChange={(e) => setImageAlt(e.target.value)}
+                    className="j13-md-popover-input"
+                  />
+                </label>
+                <label className="j13-md-field">
+                  <span>URL</span>
+                  <input
+                    autoFocus
+                    value={imageUrl}
+                    onChange={(e) => setImageUrl(e.target.value)}
+                    className="j13-md-popover-input"
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        applyImageUrl();
+                      }
+                    }}
+                  />
+                </label>
+                <div className="j13-md-popover-footer">
+                  <button type="button" className="btn btn-line btn-sm" onClick={() => setPopover(null)}>
+                    取消
+                  </button>
+                  <button type="button" className="btn btn-primary btn-sm" onClick={applyImageUrl}>
+                    插入
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+          <Sep />
+          <div className="j13-md-popover-anchor relative">
+            <ToolBtn
+              label="隐藏内容"
+              icon={<Lock size={15} />}
+              active={popover === "hide"}
+              onClick={() => openPopover("hide")}
+            />
+            {popover === "hide" && (
+              <div className="j13-md-popover j13-md-popover-form" role="dialog" aria-label="插入隐藏内容">
+                {hideStep === "menu" ? (
+                  <>
+                    <button type="button" className="j13-md-menu-item" onClick={() => insertHide("login")}>
+                      登录可见
+                    </button>
+                    <button type="button" className="j13-md-menu-item" onClick={() => insertHide("reply")}>
+                      回复可见
+                    </button>
+                    <button
+                      type="button"
+                      className="j13-md-menu-item"
+                      onClick={() => setHideStep("points")}
+                    >
+                      积分可见…
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <label className="j13-md-field">
+                      <span>所需积分</span>
+                      <input
+                        autoFocus
+                        type="number"
+                        min={1}
+                        max={100000}
+                        value={hidePoints}
+                        onChange={(e) => setHidePoints(Number(e.target.value) || 1)}
+                        className="j13-md-popover-input"
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            if (hidePoints >= 1 && hidePoints <= 100000) {
+                              insertHide("points", hidePoints);
+                            }
+                          }
+                        }}
+                      />
+                    </label>
+                    <div className="j13-md-popover-footer">
+                      <button
+                        type="button"
+                        className="btn btn-line btn-sm"
+                        onClick={() => setHideStep("menu")}
+                      >
+                        返回
+                      </button>
+                      <button
+                        type="button"
+                        className="btn btn-primary btn-sm"
+                        onClick={() => {
+                          if (hidePoints < 1 || hidePoints > 100000) {
+                            toast("积分须在 1–100000", "error");
+                            return;
+                          }
+                          insertHide("points", hidePoints);
+                        }}
+                      >
+                        插入
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
        </div>
        <div className="flex items-center gap-2 shrink-0">
          <div className="j13-md-mode" role="tablist" aria-label="编辑模式">
@@ -281,26 +813,46 @@ export default function MarkdownEditor({
        type="file"
        accept="image/jpeg,image/png,image/webp"
        className="hidden"
-        onChange={(e) => handleImagePick(e.target.files?.[0] ?? null)}
+        onChange={(e) => void uploadImageFile(e.target.files?.[0] ?? null)}
      />

      {mode === "write" ? (
-        <textarea
-          ref={taRef}
-          id={id}
-          value={value}
-          disabled={disabled}
-          rows={rows}
-          placeholder={placeholder}
-          className="j13-md-textarea"
-          onChange={(e) => onChange(e.target.value)}
-          onKeyDown={(e) => {
-            if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-              e.preventDefault();
-              onSubmitShortcut?.();
-            }
+        <div
+          className={`j13-md-write-wrap${dragOver ? " is-dragover" : ""}`}
+          onDragEnter={(e) => {
+            e.preventDefault();
+            if (e.dataTransfer.types.includes("Files")) setDragOver(true);
          }}
-        />
+          onDragOver={(e) => e.preventDefault()}
+          onDragLeave={(e) => {
+            if (e.currentTarget === e.target) setDragOver(false);
+          }}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDragOver(false);
+            const file = e.dataTransfer.files?.[0];
+            if (file) void uploadImageFile(file);
+          }}
+        >
+          {dragOver && (
+            <div className="j13-md-drop-mask" aria-hidden>
+              放开以上传图片
+            </div>
+          )}
+          <textarea
+            ref={taRef}
+            id={id}
+            value={value}
+            disabled={disabled}
+            rows={rows}
+            placeholder={placeholder}
+            className="j13-md-textarea"
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={onTextareaKeyDown}
+            onPaste={(e) => void onPaste(e)}
+            onSelect={rememberSel}
+          />
+        </div>
      ) : (
        <div className="j13-md-preview">
          {value.trim() ? (
@@ -312,7 +864,7 @@ export default function MarkdownEditor({
      )}

      <div className="j13-md-foot">
-        <span>Markdown · Ctrl/⌘ + Enter 提交</span>
+        <span>支持粘贴/拖拽图片 · Markdown · Ctrl/⌘ + Enter 提交</span>
        <span className="tabular-nums">{value.length} 字</span>
      </div>
    </div>
--- a/frontend/components/PostComposer.tsx
+++ b/frontend/components/PostComposer.tsx
@@ -17,13 +17,11 @@ import {
 } from "@/lib/api";
 import {
  POST_TYPES,
-  CONTENT_ACCESS,
  BOUNTY_EXPIRE_DAYS,
  LOTTERY_EXPIRE_DAYS,
  POLL_EXPIRE_DAYS,
  normalizePostType,
  type PostTypeValue,
-  type ContentAccessValue,
 } from "@/lib/postMeta";
 import { toast } from "@/lib/toast";
 import MarkdownEditor from "@/components/MarkdownEditor";
@@ -44,8 +42,6 @@ type ComposeDraft = {
  tags: string;
  boardId: number;
  postType?: string;
-  contentAccess?: string;
-  accessPoints?: number;
  typeMeta?: string;
  updatedAt: number;
 };
@@ -128,8 +124,6 @@ type EditProps = {
  initialContent: string;
  initialTags?: string;
  initialPostType?: string;
-  initialContentAccess?: string;
-  initialAccessPoints?: number;
  initialTypeMeta?: string;
  initialAttachments?: PostAttachment[];
  /** 投票帖：有票后禁止改选项 */
@@ -162,14 +156,6 @@ export default function PostComposer(props: PostComposerProps) {
  const [postType, setPostType] = useState<PostTypeValue>(
    normalizePostType(isCreate ? "discussion" : props.initialPostType)
  );
-  const [contentAccess, setContentAccess] = useState<ContentAccessValue>(
-    (isCreate
-      ? "public"
-      : (props.initialContentAccess as ContentAccessValue) || "public") as ContentAccessValue
-  );
-  const [accessPoints, setAccessPoints] = useState(
-    isCreate ? 10 : props.initialAccessPoints || 10
-  );
  const [typeMeta, setTypeMeta] = useState(
    isCreate ? "" : props.initialTypeMeta || ""
  );
@@ -364,8 +350,6 @@ export default function PostComposer(props: PostComposerProps) {
        tags: serializeTags(tagList),
        boardId,
        postType,
-        contentAccess,
-        accessPoints,
        typeMeta,
        updatedAt: Date.now(),
      });
@@ -380,8 +364,6 @@ export default function PostComposer(props: PostComposerProps) {
    tagList,
    boardId,
    postType,
-    contentAccess,
-    accessPoints,
    typeMeta,
  ]);

@@ -392,10 +374,6 @@ export default function PostComposer(props: PostComposerProps) {
    setTagList(parseTags(draftBanner.tags || ""));
    if (draftBanner.boardId) setBoardId(draftBanner.boardId);
    if (draftBanner.postType) setPostType(normalizePostType(draftBanner.postType));
-    if (draftBanner.contentAccess) {
-      setContentAccess(draftBanner.contentAccess as ContentAccessValue);
-    }
-    if (draftBanner.accessPoints) setAccessPoints(draftBanner.accessPoints);
    if (draftBanner.typeMeta) setTypeMeta(draftBanner.typeMeta);
    setDraftBanner(null);
    skipDraftSave.current = false;
@@ -533,7 +511,6 @@ export default function PostComposer(props: PostComposerProps) {
    title.trim().length > 0 &&
    content.trim().length > 0 &&
    (isCreate ? boardsReady && boardId > 0 : true) &&
-    (contentAccess !== "points" || accessPoints > 0) &&
    (postType !== "poll" ||
      pollOptions.map((o) => o.trim()).filter(Boolean).length >= 2) &&
    (postType !== "bounty" ||
@@ -609,8 +586,6 @@ export default function PostComposer(props: PostComposerProps) {
          content: content.trim(),
          tags,
          post_type: postType,
-          content_access: contentAccess,
-          access_points: contentAccess === "points" ? accessPoints : 0,
          type_meta: meta,
          attachment_ids: attIds,
        });
@@ -634,8 +609,6 @@ export default function PostComposer(props: PostComposerProps) {
          title: title.trim(),
          content: content.trim(),
          tags,
-          content_access: contentAccess,
-          access_points: contentAccess === "points" ? accessPoints : 0,
          type_meta: meta,
          attachment_ids: attIds,
        });
@@ -818,42 +791,6 @@ export default function PostComposer(props: PostComposerProps) {
                  />
                </div>
              </div>
-
-              <div className="j13-compose-meta-access">
-                <label className="field-label" htmlFor="compose-access">
-                  正文可见性
-                </label>
-                <select
-                  id="compose-access"
-                  className="j13-compose-field"
-                  value={contentAccess}
-                  disabled={loading}
-                  onChange={(e) => setContentAccess(e.target.value as ContentAccessValue)}
-                >
-                  {CONTENT_ACCESS.map((a) => (
-                    <option key={a.value} value={a.value}>
-                      {a.label}
-                    </option>
-                  ))}
-                </select>
-                {contentAccess === "points" && (
-                  <div className="mt-2 flex items-center gap-2">
-                    <label className="meta text-[12.5px] shrink-0" htmlFor="compose-access-pts">
-                      所需积分
-                    </label>
-                    <input
-                      id="compose-access-pts"
-                      type="number"
-                      min={1}
-                      max={100000}
-                      value={accessPoints}
-                      disabled={loading}
-                      onChange={(e) => setAccessPoints(Number(e.target.value) || 0)}
-                      className="j13-compose-field !py-1.5 w-28"
-                    />
-                  </div>
-                )}
-              </div>
            </div>

        </section>
@@ -1241,7 +1178,7 @@ export default function PostComposer(props: PostComposerProps) {
              disabled={loading}
              rows={18}
              placeholder={
-                "从这里开始写正文…\n\n支持 Markdown；可用工具栏插入格式与图片。可点全屏沉浸写作。"
+                "从这里开始写正文…\n\n工具栏可插入格式、代码块、链接、图片与隐藏内容（登录/回复/积分可见）。支持粘贴与拖拽上传图片。"
              }
              onSubmitShortcut={() => {
                if (canSubmit) void handleSubmit();
--- a/frontend/components/markdown/MdHideBlock.tsx
+++ b/frontend/components/markdown/MdHideBlock.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Lock } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { apiUnlockPost } from "@/lib/api";
+import { toast } from "@/lib/toast";
+import { hideKindLabel, type HideKind } from "@/lib/hideBlocks";
+
+type MdHideBlockProps = {
+  kind: HideKind;
+  points?: number;
+  locked?: boolean;
+  postId?: number;
+  loggedIn?: boolean;
+  children?: ReactNode;
+};
+
+/** 正文内嵌隐藏块：已解锁显示徽章容器；locked 显示就地门禁 */
+export default function MdHideBlock({
+  kind,
+  points = 0,
+  locked = false,
+  postId,
+  loggedIn = false,
+  children,
+}: MdHideBlockProps) {
+  const router = useRouter();
+  const [busy, setBusy] = useState(false);
+  const label = hideKindLabel(kind);
+
+  if (locked) {
+    const unlock = async () => {
+      if (!postId) return;
+      setBusy(true);
+      try {
+        const res = await apiUnlockPost(String(postId));
+        if (res.post) {
+          toast("已解锁隐藏内容", "ok");
+          router.refresh();
+        } else {
+          toast(res.error || "解锁失败", "error");
+        }
+      } catch {
+        toast("解锁失败", "error");
+      } finally {
+        setBusy(false);
+      }
+    };
+
+    return (
+      <aside
+        className="j13-hide-gate"
+        role="note"
+        aria-label={`${label}（未解锁）`}
+      >
+        <Lock size={22} className="j13-hide-gate-icon" aria-hidden />
+        <p className="j13-hide-gate-title">此段内容{label}</p>
+        <p className="j13-hide-gate-desc meta">
+          {kind === "points"
+            ? `支付 ${points || 0} 积分后可阅读此段`
+            : kind === "reply"
+              ? "发表一条回复后即可阅读此段"
+              : "登录后即可阅读此段"}
+        </p>
+        <div className="j13-hide-gate-actions">
+          {kind === "login" && !loggedIn && postId && (
+            <Link
+              href={`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`}
+              className="btn btn-primary"
+            >
+              去登录
+            </Link>
+          )}
+          {kind === "points" && loggedIn && postId && (
+            <button
+              type="button"
+              className="btn btn-primary"
+              disabled={busy}
+              onClick={() => void unlock()}
+            >
+              {busy ? "解锁中…" : `支付 ${points || 0} 积分解锁`}
+            </button>
+          )}
+          {kind === "points" && !loggedIn && postId && (
+            <Link
+              href={`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`}
+              className="btn btn-primary"
+            >
+              登录后解锁
+            </Link>
+          )}
+          {kind === "reply" && (
+            <a href="#comments" className="btn btn-primary">
+              去回复
+            </a>
+          )}
+        </div>
+      </aside>
+    );
+  }
+
+  return (
+    <div className="j13-hide-block" data-hide-kind={kind}>
+      <div className="j13-hide-block-bar">
+        <span className="j13-hide-badge">{label}</span>
+        {kind === "points" && points > 0 && (
+          <span className="meta text-[12px]">{points} 积分</span>
+        )}
+      </div>
+      <div className="j13-hide-block-body">{children}</div>
+    </div>
+  );
+}