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

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

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

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>