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

增加密码解锁与游客签名 cookie；发帖页对齐 1440 并默认双栏预览；修复 locked 解析、按钮对比度与回复聚焦。

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

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>
     );