feat(posts): 类型特殊块移至正文下，采纳答案卡与中奖楼层按评论标记

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

frontend/components/AcceptedAnswerCard.tsx

@@ -0,0 +1,86 @@
+import Link from "next/link";
+import { CheckCircle2 } from "lucide-react";
+import type { AcceptedAnswer } from "@/lib/api";
+import Avatar from "@/components/Avatar";
+import MarkdownBody from "@/components/MarkdownBody";
+import AcceptedAnswerReopen from "@/components/AcceptedAnswerReopen";
+
+/** 正文下方的已采纳答案卡：头像 + 昵称 + 全文；问答已解决时并入状态与「重新打开」 */
+export default async function AcceptedAnswerCard({
+  answer,
+  variant = "question",
+  postId,
+  canReopen = false,
+}: {
+  answer: AcceptedAnswer;
+  /** 问答用「最佳答案」，悬赏用「已采纳」 */
+  variant?: "question" | "bounty";
+  postId?: number;
+  canReopen?: boolean;
+}) {
+  const name = answer.user.nickname || answer.user.username || "用户";
+  const label = variant === "bounty" ? "已采纳" : "最佳答案";
+  const showReopen = variant === "question" && canReopen && !!postId;
+
+  return (
+    <section className="j13-accepted-answer" aria-label={variant === "question" ? "问答 · 已解决" : label}>
+      <header className="j13-accepted-answer__head">
+        <div className="j13-accepted-answer__meta min-w-0">
+          {variant === "question" && (
+            <p className="j13-accepted-answer__status">问答 · 已解决</p>
+          )}
+          <div className="j13-accepted-answer__author min-w-0">
+            <span className="badge-accepted shrink-0">
+              <CheckCircle2 size={13} aria-hidden />
+              {label}
+            </span>
+            <Link
+              href={`/u/${answer.user.id}`}
+              className="shrink-0"
+              aria-label={name}
+            >
+              <Avatar name={name} src={answer.user.avatar || undefined} size={36} />
+            </Link>
+            <div className="min-w-0 flex flex-col gap-0.5">
+              <Link
+                href={`/u/${answer.user.id}`}
+                className="truncate text-[14px] font-semibold hover:text-[var(--accent)] transition-colors"
+                style={{ color: "var(--ink)" }}
+              >
+                {name}
+              </Link>
+              <p className="meta text-[12px] flex items-center gap-1.5 flex-wrap">
+                <time dateTime={answer.created_at}>
+                  {new Date(answer.created_at).toLocaleString("zh-CN")}
+                </time>
+                {answer.floor > 0 && (
+                  <>
+                    <span aria-hidden>·</span>
+                    <a
+                      href={`#comment-${answer.id}`}
+                      className="hover:underline"
+                      style={{ color: "var(--accent)" }}
+                    >
+                      #{answer.floor}
+                    </a>
+                  </>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+        {showReopen && <AcceptedAnswerReopen postId={postId!} />}
+      </header>
+
+      <div className="j13-accepted-answer__body">
+        {answer.deleted ? (
+          <p className="meta text-[14px]" style={{ color: "var(--ink-3)" }}>
+            该答案已被删除
+          </p>
+        ) : (
+          <MarkdownBody content={answer.content} className="prose-content prose-comment" />
+        )}
+      </div>
+    </section>
+  );
+}

frontend/components/AcceptedAnswerReopen.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { apiReopenQuestion } from "@/lib/api";
+import { toast } from "@/lib/toast";
+
+/** 已采纳答案卡上的「重新打开」——并入正文下方资料卡，避免与上方状态条重复 */
+export default function AcceptedAnswerReopen({ postId }: { postId: number }) {
+  const router = useRouter();
+  const [busy, setBusy] = useState(false);
+
+  const reopen = async () => {
+    setBusy(true);
+    try {
+      const res = await apiReopenQuestion(String(postId));
+      if (res.post) {
+        toast("已重新打开", "ok");
+        router.refresh();
+      } else toast(res.error || "操作失败", "error");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className="btn btn-line btn-sm shrink-0 ml-auto"
+      disabled={busy}
+      onClick={() => void reopen()}
+    >
+      {busy ? "处理中…" : "重新打开"}
+    </button>
+  );
+}

frontend/components/CommentSection.tsx

@@ -55,8 +55,8 @@ interface CommentSectionProps {
   /** 悬赏或问答：可采纳时在评论旁显示采纳按钮（二者按帖子类型二选一） */
   acceptMode?: "bounty" | "question" | null;
   acceptedCommentId?: number;
-  /** 抽奖已开奖：中奖用户 ID，用于楼层旁显示「中奖」徽标 */
-  winnerUserIds?: number[];
+  /** 抽奖已开奖：中奖楼层评论 ID（每名中奖者仅其最早主评一条） */
+  winnerCommentIds?: number[];
   /** 全站是否开放评论；缺省 true。关闭时隐藏发评/回复入口 */
   allowComments?: boolean;
 }
@@ -115,10 +115,10 @@ export default function CommentSection({
   user,
   acceptMode = null,
   acceptedCommentId = 0,
-  winnerUserIds = [],
+  winnerCommentIds = [],
   allowComments: allowCommentsProp = true,
 }: CommentSectionProps) {
-  const winnerIdSet = new Set(winnerUserIds.filter((id) => id > 0));
+  const winnerCommentIdSet = new Set(winnerCommentIds.filter((id) => id > 0));
   const router = useRouter();
   const [content, setContent] = useState("");
   // 内联回复目标：在该评论下方就地发子评论（同一时间只有一个回复框）
@@ -875,7 +875,7 @@ export default function CommentSection({
               {acceptedCommentId === c.id && (
                 <span className="badge-accepted shrink-0">已采纳</span>
               )}
-              {winnerIdSet.has(c.user.id) && (
+              {winnerCommentIdSet.has(c.id) && (
                 <span className="badge-winner shrink-0">中奖楼层</span>
               )}
               {floor && (

frontend/components/PostInteractPanels.tsx

@@ -21,23 +21,21 @@ import Avatar from "@/components/Avatar";
 
 export default function PostInteractPanels({
   postId,
-  question,
   poll,
   bounty,
   lottery,
   loggedIn,
 }: {
   postId: number;
-  question?: QuestionState | null;
   poll?: PollState | null;
   bounty?: BountyState | null;
   lottery?: LotteryState | null;
   loggedIn: boolean;
 }) {
-  if (!question && !poll && !bounty && !lottery) return null;
+  // 问答状态改在正文下方展示（未解决 / 已解决资料卡），此处不再放
+  if (!poll && !bounty && !lottery) return null;
   return (
-    <div className="space-y-4 mb-8">
-      {question && <QuestionPanel postId={postId} state={question} />}
+    <div className="j13-interact-below space-y-4">
       {poll && <PollPanel postId={postId} state={poll} loggedIn={loggedIn} />}
       {bounty && <BountyPanel postId={postId} state={bounty} />}
       {lottery && <LotteryPanel postId={postId} state={lottery} />}
@@ -54,7 +52,8 @@ function formatEndsAt(iso?: string) {
   }
 }
 
-function QuestionPanel({ postId, state }: { postId: number; state: QuestionState }) {
+/** 正文下方的问答状态卡（未解决 / 仅标记已解决）；有采纳答案时改用 AcceptedAnswerCard */
+export function QuestionStatusCard({ postId, state }: { postId: number; state: QuestionState }) {
   const router = useRouter();
   const [busy, setBusy] = useState(false);
 
@@ -72,7 +71,10 @@ function QuestionPanel({ postId, state }: { postId: number; state: QuestionState
   };
 
   return (
-    <section className={`j13-interact-card${state.solved ? " is-solved" : " is-unsolved"}`}>
+    <section
+      className={`j13-interact-card j13-question-below${state.solved ? " is-solved" : " is-unsolved"}`}
+      aria-label={`问答 · ${state.solved ? "已解决" : "未解决"}`}
+    >
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div>
           <h2 className="text-[15px] font-medium" style={{ color: "var(--ink)" }}>
@@ -319,20 +321,22 @@ function BountyPanel({ postId, state }: { postId: number; state: BountyState })
             悬赏 {state.points} 积分
           </h2>
           <p className="meta text-[12.5px] mt-1">
-            {state.accepted_comment_id ? (
-              <>
-                已采纳{" "}
-                <a
-                  href={`#comment-${state.accepted_comment_id}`}
-                  className="hover:underline"
-                  style={{ color: "var(--accent)" }}
-                >
-                  #{state.accepted_floor || "?"}
-                </a>
-              </>
-            ) : (
-              statusText
-            )}
+            {state.accepted_answer
+              ? "悬赏积分已发放给采纳答案"
+              : state.accepted_comment_id
+                ? (
+                    <>
+                      已采纳{" "}
+                      <a
+                        href={`#comment-${state.accepted_comment_id}`}
+                        className="hover:underline"
+                        style={{ color: "var(--accent)" }}
+                      >
+                        #{state.accepted_floor || "?"}
+                      </a>
+                    </>
+                  )
+                : statusText}
             {state.ends_at && !state.settled ? ` · 截止 ${formatEndsAt(state.ends_at)}` : ""}
           </p>
         </div>
@@ -426,13 +430,20 @@ function LotteryPanel({
             <ul className="flex flex-wrap gap-3">
               {state.winners.map((w) => (
                 <li key={w.id}>
-                  <Link
-                    href={`/u/${w.id}`}
-                    className="badge-winner inline-flex items-center gap-2 !py-1.5 !px-2.5 !text-[13px] !font-medium"
-                  >
-                    <Avatar name={w.nickname || w.username} src={w.avatar || undefined} size={22} />
-                    <span>{w.nickname || w.username}</span>
-                  </Link>
+                  <span className="badge-winner inline-flex items-center gap-2 !py-1.5 !px-2.5 !text-[13px] !font-medium">
+                    <Link href={`/u/${w.id}`} className="inline-flex items-center gap-2 min-w-0">
+                      <Avatar name={w.nickname || w.username} src={w.avatar || undefined} size={22} />
+                      <span className="truncate">{w.nickname || w.username}</span>
+                    </Link>
+                    {w.comment_id && w.floor ? (
+                      <a
+                        href={`#comment-${w.comment_id}`}
+                        className="opacity-90 hover:underline shrink-0"
+                      >
+                        #{w.floor}
+                      </a>
+                    ) : null}
+                  </span>
                 </li>
               ))}
             </ul>