feat(hide): 密码可见隐藏块，发帖双栏预览与门禁体验修复

增加密码解锁与游客签名 cookie；发帖页对齐 1440 并默认双栏预览；修复 locked 解析、按钮对比度与回复聚焦。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-17 05:46:42 +08:00
parent 01e2fd05ca
commit c44b0efa7d
23 changed files with 911 additions and 132 deletions
--- a/frontend/components/CommentSection.tsx
+++ b/frontend/components/CommentSection.tsx
@@ -136,6 +136,22 @@ export default function CommentSection({
    }
  }, [commentsOpen]);

+  // 登录回跳 / 隐藏块「去回复」：滚到评论框并聚焦
+  useEffect(() => {
+    if (!user || !commentsOpen) return;
+    const focusComposer = () => {
+      const hash = window.location.hash;
+      if (hash !== "#comment-input" && hash !== "#comments") return;
+      const el = textareaRef.current ?? document.getElementById("comment-input");
+      if (!(el instanceof HTMLTextAreaElement)) return;
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      window.setTimeout(() => el.focus({ preventScroll: true }), 280);
+    };
+    focusComposer();
+    window.addEventListener("hashchange", focusComposer);
+    return () => window.removeEventListener("hashchange", focusComposer);
+  }, [user, commentsOpen]);
+
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!commentsOpen || !content.trim()) return;
@@ -1034,7 +1050,7 @@ export default function CommentSection({
  }

  return (
-    <section className="panel p-6 sm:p-8 mt-6" aria-label="评论区">
+    <section id="comments" className="panel p-6 sm:p-8 mt-6 scroll-mt-24" aria-label="评论区">
      <div className="flex items-center gap-2.5 mb-6">
        <h2 className="text-lg font-semibold" style={{ color: "var(--ink)" }}>
          评论
@@ -1063,7 +1079,7 @@ export default function CommentSection({
            }}
            placeholder="友善发言，发表一个新楼层..."
            rows={3}
-            className="field"
+            className="field scroll-mt-28"
            aria-label="写评论"
          />
          <div className="flex items-center justify-between gap-3 mt-2.5">
--- a/frontend/components/MarkdownEditor.tsx
+++ b/frontend/components/MarkdownEditor.tsx
@@ -5,6 +5,7 @@ import {
  useState,
  useCallback,
  useEffect,
+  useDeferredValue,
  type ReactNode,
  type KeyboardEvent as ReactKeyboardEvent,
 } from "react";
@@ -27,6 +28,7 @@ import {
  Pencil,
  Maximize2,
  Minimize2,
+  Columns2,
  Lock,
  ChevronDown,
  Upload,
@@ -47,6 +49,8 @@ type MarkdownEditorProps = {
  id?: string;
 };

+type EditorMode = "split" | "write" | "preview";
+
 type WrapOpts = {
  before: string;
  after?: string;
@@ -107,7 +111,8 @@ export default function MarkdownEditor({
  const taRef = useRef<HTMLTextAreaElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);
  const toolbarRef = useRef<HTMLDivElement>(null);
-  const [mode, setMode] = useState<"write" | "preview">("write");
+  const [mode, setMode] = useState<EditorMode>("split");
+  const deferredValue = useDeferredValue(value);
  const [uploading, setUploading] = useState(false);
  const [fullscreen, setFullscreen] = useState(false);
  const [dragOver, setDragOver] = useState(false);
@@ -118,7 +123,8 @@ export default function MarkdownEditor({
  const [imageAlt, setImageAlt] = useState("图片");
  const [codeQuery, setCodeQuery] = useState("");
  const [hidePoints, setHidePoints] = useState(10);
-  const [hideStep, setHideStep] = useState<"menu" | "points">("menu");
+  const [hidePassword, setHidePassword] = useState("");
+  const [hideStep, setHideStep] = useState<"menu" | "points" | "password">("menu");
  const savedSel = useRef<{ start: number; end: number } | null>(null);

  useEffect(() => {
@@ -260,6 +266,7 @@ export default function MarkdownEditor({
    if (kind === "hide") {
      setHideStep("menu");
      setHidePoints(10);
+      setHidePassword("");
    }
    setPopover((prev) => (prev === kind ? null : kind));
  };
@@ -320,17 +327,23 @@ export default function MarkdownEditor({
    setPopover(null);
  };

-  const insertHide = (kind: "login" | "reply" | "points", points?: number) => {
+  const insertHide = (
+    kind: "login" | "reply" | "points" | "password",
+    points?: number,
+    password?: string
+  ) => {
    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}`;
+    let open = `:::hide ${kind}`;
+    if (kind === "points") {
+      open = `:::hide points ${points || 10}`;
+    } else if (kind === "password") {
+      open = `:::hide password ${password || "password"}`;
+    }
    const block = `${open}\n${body}\n:::`;
    const padBefore = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
    const padAfter = end < value.length && value[end] !== "\n" ? "\n" : "";
@@ -724,8 +737,15 @@ export default function MarkdownEditor({
                    >
                      积分可见…
                    </button>
+                    <button
+                      type="button"
+                      className="j13-md-menu-item"
+                      onClick={() => setHideStep("password")}
+                    >
+                      密码可见…
+                    </button>
                  </>
-                ) : (
+                ) : hideStep === "points" ? (
                  <>
                    <label className="j13-md-field">
                      <span>所需积分</span>
@@ -770,6 +790,53 @@ export default function MarkdownEditor({
                      </button>
                    </div>
                  </>
+                ) : (
+                  <>
+                    <label className="j13-md-field">
+                      <span>查看密码（不含空格，1–64 字）</span>
+                      <input
+                        autoFocus
+                        type="text"
+                        value={hidePassword}
+                        maxLength={64}
+                        placeholder="例如：secret"
+                        onChange={(e) => setHidePassword(e.target.value)}
+                        className="j13-md-popover-input"
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            const p = hidePassword.trim();
+                            if (p && !/\s/.test(p)) {
+                              insertHide("password", undefined, p);
+                            }
+                          }
+                        }}
+                      />
+                    </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={() => {
+                          const p = hidePassword.trim();
+                          if (!p || /\s/.test(p) || p.length > 64) {
+                            toast("密码须为 1–64 字符且不含空格", "error");
+                            return;
+                          }
+                          insertHide("password", undefined, p);
+                        }}
+                      >
+                        插入
+                      </button>
+                    </div>
+                  </>
                )}
              </div>
            )}
@@ -786,6 +853,15 @@ export default function MarkdownEditor({
            >
              <Pencil size={12} /> 编写
            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={mode === "split"}
+              className={mode === "split" ? "is-on" : ""}
+              onClick={() => setMode("split")}
+            >
+              <Columns2 size={12} /> 双栏
+            </button>
            <button
              type="button"
              role="tab"
@@ -816,9 +892,10 @@ export default function MarkdownEditor({
        onChange={(e) => void uploadImageFile(e.target.files?.[0] ?? null)}
      />

-      {mode === "write" ? (
+      <div className={`j13-md-panes is-${mode}`}>
        <div
          className={`j13-md-write-wrap${dragOver ? " is-dragover" : ""}`}
+          hidden={mode === "preview"}
          onDragEnter={(e) => {
            e.preventDefault();
            if (e.dataTransfer.types.includes("Files")) setDragOver(true);
@@ -853,15 +930,17 @@ export default function MarkdownEditor({
            onSelect={rememberSel}
          />
        </div>
-      ) : (
-        <div className="j13-md-preview">
-          {value.trim() ? (
-            <MarkdownBodyClient content={value} />
+        <div className="j13-md-preview" hidden={mode === "write"}>
+          <div className="j13-md-preview-label meta" aria-hidden>
+            预览
+          </div>
+          {deferredValue.trim() ? (
+            <MarkdownBodyClient content={deferredValue} />
          ) : (
            <p className="meta text-center py-16">暂无内容可预览</p>
          )}
        </div>
-      )}
+      </div>

      <div className="j13-md-foot">
        <span>支持粘贴/拖拽图片 · Markdown · Ctrl/⌘ + Enter 提交</span>
--- a/frontend/components/PostComposer.tsx
+++ b/frontend/components/PostComposer.tsx
@@ -1178,7 +1178,7 @@ export default function PostComposer(props: PostComposerProps) {
              disabled={loading}
              rows={18}
              placeholder={
-                "从这里开始写正文…\n\n工具栏可插入格式、代码块、链接、图片与隐藏内容（登录/回复/积分可见）。支持粘贴与拖拽上传图片。"
+                "从这里开始写正文…\n\n工具栏可插入格式、代码块、链接、图片与隐藏内容（登录/回复/积分/密码可见）。支持粘贴与拖拽上传图片；默认双栏实时预览。"
              }
              onSubmitShortcut={() => {
                if (canSubmit) void handleSubmit();
--- a/frontend/components/markdown/MdHideBlock.tsx
+++ b/frontend/components/markdown/MdHideBlock.tsx
@@ -1,14 +1,27 @@
 "use client";

-import type { ReactNode } from "react";
+import type { ReactNode, FormEvent } 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 { useId, useState } from "react";
+import { apiUnlockPost, apiUnlockPostPassword } from "@/lib/api";
+import { CSRF_COOKIE } from "@/lib/cookies";
 import { toast } from "@/lib/toast";
 import { hideKindLabel, type HideKind } from "@/lib/hideBlocks";

+/** 若浏览器尚无 CSRF cookie，请求公开接口以触发后端签发 */
+async function ensureGuestCSRF() {
+  if (typeof document === "undefined") return;
+  const escaped = CSRF_COOKIE.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  if (new RegExp(`(?:^|;\\s*)${escaped}=`).test(document.cookie)) return;
+  try {
+    await fetch("/api/me", { credentials: "include", cache: "no-store" });
+  } catch {
+    /* 忽略：后续解锁会报 CSRF 错误 */
+  }
+}
+
 type MdHideBlockProps = {
  kind: HideKind;
  points?: number;
@@ -28,11 +41,14 @@ export default function MdHideBlock({
  children,
 }: MdHideBlockProps) {
  const router = useRouter();
+  const pwdErrId = useId();
  const [busy, setBusy] = useState(false);
+  const [pwd, setPwd] = useState("");
+  const [pwdError, setPwdError] = useState("");
  const label = hideKindLabel(kind);

  if (locked) {
-    const unlock = async () => {
+    const unlockPoints = async () => {
      if (!postId) return;
      setBusy(true);
      try {
@@ -50,6 +66,35 @@ export default function MdHideBlock({
      }
    };

+    const unlockPassword = async (e: FormEvent) => {
+      e.preventDefault();
+      if (!postId) return;
+      const password = pwd.trim();
+      if (!password) {
+        setPwdError("请输入密码");
+        return;
+      }
+      setBusy(true);
+      setPwdError("");
+      try {
+        // 游客可能尚无 CSRF：先打一次公开 GET 让后端签发，再提交解锁
+        await ensureGuestCSRF();
+        const res = await apiUnlockPostPassword(String(postId), password);
+        if (res.post) {
+          toast("密码正确，已解锁", "ok");
+          setPwd("");
+          setPwdError("");
+          router.refresh();
+        } else {
+          setPwdError(res.error || "密码错误，请重试");
+        }
+      } catch {
+        setPwdError("验证失败，请稍后重试");
+      } finally {
+        setBusy(false);
+      }
+    };
+
    return (
      <aside
        className="j13-hide-gate"
@@ -62,8 +107,12 @@ export default function MdHideBlock({
          {kind === "points"
            ? `支付 ${points || 0} 积分后可阅读此段`
            : kind === "reply"
-              ? "发表一条回复后即可阅读此段"
-              : "登录后即可阅读此段"}
+              ? loggedIn
+                ? "发表一条回复后即可阅读此段"
+                : "登录并发表一条回复后即可阅读此段"
+              : kind === "password"
+                ? "输入正确密码后可阅读此段"
+                : "登录后即可阅读此段"}
        </p>
        <div className="j13-hide-gate-actions">
          {kind === "login" && !loggedIn && postId && (
@@ -79,7 +128,7 @@ export default function MdHideBlock({
              type="button"
              className="btn btn-primary"
              disabled={busy}
-              onClick={() => void unlock()}
+              onClick={() => void unlockPoints()}
            >
              {busy ? "解锁中…" : `支付 ${points || 0} 积分解锁`}
            </button>
@@ -92,11 +141,67 @@ export default function MdHideBlock({
              登录后解锁
            </Link>
          )}
-          {kind === "reply" && (
-            <a href="#comments" className="btn btn-primary">
+          {kind === "reply" && postId && !loggedIn && (
+            <Link
+              href={`/login?redirect=${encodeURIComponent(`/post/${postId}#comment-input`)}`}
+              className="btn btn-primary"
+            >
+              登录后去回复
+            </Link>
+          )}
+          {kind === "reply" && loggedIn && (
+            <a
+              href="#comment-input"
+              className="btn btn-primary"
+              onClick={(e) => {
+                e.preventDefault();
+                const el = document.getElementById("comment-input");
+                if (!(el instanceof HTMLTextAreaElement)) {
+                  document.getElementById("comments")?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                  });
+                  return;
+                }
+                el.scrollIntoView({ behavior: "smooth", block: "center" });
+                window.setTimeout(() => {
+                  el.focus({ preventScroll: true });
+                }, 280);
+              }}
+            >
              去回复
            </a>
          )}
+          {kind === "password" && postId && (
+            <div className="j13-hide-pwd-wrap">
+              <form className="j13-hide-pwd-form" onSubmit={(e) => void unlockPassword(e)}>
+                <input
+                  type="password"
+                  className={`j13-hide-pwd-input${pwdError ? " is-invalid" : ""}`}
+                  placeholder="输入密码"
+                  value={pwd}
+                  maxLength={64}
+                  autoComplete="off"
+                  disabled={busy}
+                  aria-invalid={pwdError ? true : undefined}
+                  aria-describedby={pwdError ? pwdErrId : undefined}
+                  onChange={(e) => {
+                    setPwd(e.target.value);
+                    if (pwdError) setPwdError("");
+                  }}
+                  aria-label="隐藏内容密码"
+                />
+                <button type="submit" className="btn btn-primary" disabled={busy}>
+                  {busy ? "验证中…" : "查看"}
+                </button>
+              </form>
+              {pwdError && (
+                <p id={pwdErrId} className="j13-hide-pwd-error" role="alert">
+                  {pwdError}
+                </p>
+              )}
+            </div>
+          )}
        </div>
      </aside>
    );