feat: 类型帖互动、积分经济与发帖体验

补齐问答采纳/重开、投票匿名与有票禁编、悬赏过期退回、抽奖回帖开奖，并接入积分账本与发帖附件可见性。

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

frontend/app/compose/layout.tsx

@@ -0,0 +1,18 @@
+/**
+ * 发帖路由布局：标记 data-compose-viewport，配合 globals.css
+ * 让舞台占满 main 剩余高度（对齐私信体量，保留页脚）。
+ */
+export default function ComposeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      data-compose-viewport
+      className="flex flex-col flex-1 min-h-0 w-full max-w-6xl mx-auto"
+    >
+      {children}
+    </div>
+  );
+}

frontend/app/compose/page.tsx

@@ -1,153 +1,64 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useEffect, useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
-import { ChevronRight, PenSquare } from "lucide-react";
-import { apiCreatePost, apiMe, fetchBoards, type Board } from "@/lib/api";
-import { toast } from "@/lib/toast";
+import { ChevronRight } from "lucide-react";
+import { apiMe } from "@/lib/api";
+import PostComposer from "@/components/PostComposer";
 
-export default function ComposePage() {
+function ComposeInner() {
   const router = useRouter();
-  const [boards, setBoards] = useState<Board[]>([]);
-  const [boardId, setBoardId] = useState<number>(0);
-  const [title, setTitle] = useState("");
-  const [content, setContent] = useState("");
-  const [tags, setTags] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+  const searchParams = useSearchParams();
+  const initialBoardId = Number(searchParams.get("board")) || 0;
+  const [ready, setReady] = useState(false);
 
   useEffect(() => {
     apiMe()
       .then((res) => {
         if (!res.user) {
-          router.push("/login?redirect=/compose");
+          const q = initialBoardId > 0 ? `?board=${initialBoardId}` : "";
+          router.push(`/login?redirect=${encodeURIComponent(`/compose${q}`)}`);
           return;
         }
-        fetchBoards().then((data) => {
-          setBoards(data.boards);
-          if (data.boards.length > 0) setBoardId(data.boards[0].id);
-        });
+        setReady(true);
       })
-      .catch(() => router.push("/login?redirect=/compose"));
-  }, [router]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-    try {
-      const res = await apiCreatePost({
-        board_id: boardId,
-        title,
-        content,
-        tags,
-        post_type: "normal",
+      .catch(() => {
+        router.push("/login?redirect=/compose");
       });
-      if (res.post) {
-        // 普通用户发帖进入待审核队列：跳转详情页（作者可见）并提示
-        if (res.post.status === "pending") {
-          toast("已提交，等待审核通过后公开", "ok");
-        }
-        router.push(`/post/${res.post.id}`);
-      } else {
-        setError(res.error || "发帖失败");
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
+  }, [router, initialBoardId]);
 
+  if (!ready) {
+    return (
+      <div className="j13-compose-stage px-8 py-16 text-center">
+        <p className="meta">正在准备发帖…</p>
+      </div>
+    );
+  }
+
+  return <PostComposer mode="create" initialBoardId={initialBoardId} />;
+}
+
+export default function ComposePage() {
   return (
-    <div className="max-w-3xl mx-auto">
-      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
-        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
+    <div className="j13-compose-page">
+      <nav className="meta mb-4 flex items-center gap-1.5 text-[13px] shrink-0">
+        <Link href="/" className="hover:text-[var(--accent)] transition-colors">
+          首页
+        </Link>
         <ChevronRight size={13} />
-        <span style={{ color: "var(--accent)" }}>发布新帖</span>
+        <span style={{ color: "var(--ink-2)" }}>发布新帖</span>
       </nav>
 
-      <div className="mb-7 flex items-center gap-3.5">
-        <span
-          className="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0"
-          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
-        >
-          <PenSquare size={22} />
-        </span>
-        <div>
-          <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight leading-tight" style={{ color: "var(--ink)" }}>
-            发布新帖
-          </h1>
-          <p className="meta mt-0.5">清晰的标题和内容，更容易获得回应</p>
-        </div>
-      </div>
-
-      <form onSubmit={handleSubmit} className="panel p-5 sm:p-7 space-y-5">
-        {error && <div className="alert-error">{error}</div>}
-
-        <div>
-          <label className="field-label">选择板块</label>
-          <select
-            value={boardId}
-            onChange={(e) => setBoardId(Number(e.target.value))}
-            className="field"
-          >
-            {boards.map((b) => (
-              <option key={b.id} value={b.id}>
-                {b.name}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div>
-          <label className="field-label">标题</label>
-          <input
-            type="text"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            required
-            maxLength={256}
-            placeholder="一句话说清楚你要讨论什么"
-            className="field"
-          />
-        </div>
-
-        <div>
-          <label className="field-label">标签（逗号分隔，可选）</label>
-          <input
-            type="text"
-            value={tags}
-            onChange={(e) => setTags(e.target.value)}
-            placeholder="Go, PostgreSQL, 架构"
-            className="field"
-          />
-        </div>
-
-        <div>
-          <label className="field-label">正文（支持 Markdown）</label>
-          <textarea
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-            required
-            rows={14}
-            placeholder="# 开头写结论&#10;&#10;支持 Markdown 语法..."
-            className="field"
-          />
-        </div>
-
-        <div className="flex gap-3 pt-2">
-          <button
-            type="submit"
-            disabled={loading || !title.trim() || !content.trim()}
-            className="btn btn-primary"
-          >
-            {loading ? "发布中..." : "发布帖子"}
-          </button>
-          <Link href="/" className="btn btn-line">
-            取消
-          </Link>
-        </div>
-      </form>
+      <Suspense
+        fallback={
+          <div className="j13-compose-stage px-8 py-16 text-center">
+            <p className="meta">正在准备发帖…</p>
+          </div>
+        }
+      >
+        <ComposeInner />
+      </Suspense>
     </div>
   );
 }