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

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-16 08:33:00 +08:00
parent 92695c2143
commit 44fdcace4c
8 changed files with 410 additions and 83 deletions
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -303,6 +303,64 @@ body {
  border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
 }

+/* 正文下方已采纳答案：问答资料卡 */
+.j13-accepted-answer {
+  margin-top: 1.75rem;
+  padding: 1.15rem 1.25rem 1.25rem;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--line));
+  background: color-mix(in srgb, var(--ok) 7%, var(--panel));
+  box-shadow: inset 3px 0 0 0 var(--ok);
+}
+.dark .j13-accepted-answer {
+  background: color-mix(in srgb, var(--ok) 12%, var(--panel));
+  border-color: color-mix(in srgb, var(--ok) 36%, var(--line));
+}
+.j13-accepted-answer__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px 16px;
+  margin-bottom: 0.9rem;
+  padding-bottom: 0.85rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--ok) 18%, var(--line));
+}
+.j13-accepted-answer__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+.j13-accepted-answer__status {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ink);
+  line-height: 1.3;
+}
+.j13-accepted-answer__author {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.j13-accepted-answer__body {
+  min-width: 0;
+}
+/* 正文下方类型特殊块（投票/悬赏/抽奖/问答状态） */
+.j13-interact-below {
+  margin-top: 1.75rem;
+}
+.j13-interact-below + .j13-accepted-answer,
+.j13-interact-below + .j13-question-below {
+  margin-top: 1rem;
+}
+.j13-question-below {
+  margin-top: 1.75rem;
+}
+
 .j13-compose-field {
  width: 100%;
  padding: 10px 14px;
@@ -1134,12 +1192,15 @@ a.j13-mention-token:hover {
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
-    background: var(--gold);
-    color: #ffffff;
+    /* 中奖：明亮类金色（不用偏棕的 --gold 实心白字） */
+    background: color-mix(in srgb, #d4a017 22%, var(--panel));
+    color: #8a6d00;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, #d4a017 42%, transparent);
  }
  .dark .badge-winner {
-    background: var(--gold);
-    color: #1a1204;
+    background: color-mix(in srgb, #e8c56b 26%, transparent);
+    color: #f5dfa0;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, #e8c56b 48%, transparent);
  }

  /* 站点公告列表 */
--- a/frontend/app/post/[id]/page.tsx
+++ b/frontend/app/post/[id]/page.tsx
@@ -35,7 +35,8 @@ import RoleBadge from "@/components/RoleBadge";
 import MarkdownBody from "@/components/MarkdownBody";
 import ContentLockGate from "@/components/ContentLockGate";
 import PostAttachments from "@/components/PostAttachments";
-import PostInteractPanels from "@/components/PostInteractPanels";
+import PostInteractPanels, { QuestionStatusCard } from "@/components/PostInteractPanels";
+import AcceptedAnswerCard from "@/components/AcceptedAnswerCard";
 import { canModerateBoard } from "@/lib/roles";
 import { IconComment, IconEye } from "@/components/Icons";
 import { normalizePostType, postTypeLabel, contentAccessLabel, typeStatusLabel, typeStatusClass } from "@/lib/postMeta";
@@ -479,6 +480,24 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
        ? ("bounty" as const)
        : null;

+  const acceptedAnswer =
+    post.question?.accepted_answer || post.bounty?.accepted_answer || null;
+  const acceptedAnswerVariant =
+    postType === "bounty" && post.bounty?.accepted_answer
+      ? ("bounty" as const)
+      : ("question" as const);
+  const questionState =
+    postType === "question"
+      ? post.question ?? {
+          solved: false,
+          accepted_comment_id: 0,
+          accepted_floor: 0,
+          can_accept: canManageTyped,
+          can_solve: canManageTyped,
+          can_reopen: false,
+        }
+      : null;
+
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "DiscussionForumPosting",
@@ -494,6 +513,20 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
      interactionType: { "@type": "ReadAction" },
      userInteractionCount: post.view_count,
    },
+    ...(acceptedAnswer &&
+      !acceptedAnswer.deleted &&
+      !post.content_locked && {
+        acceptedAnswer: {
+          "@type": "Comment",
+          text: acceptedAnswer.content,
+          dateCreated: acceptedAnswer.created_at,
+          author: {
+            "@type": "Person",
+            name: acceptedAnswer.user.nickname || acceptedAnswer.user.username,
+          },
+          url: `#comment-${acceptedAnswer.id}`,
+        },
+      }),
  };

  // 目录项与 Markdown 标题按渲染顺序一一对应（extractToc 顺序 == 文档顺序）
@@ -650,26 +683,6 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
                </div>
              )}

-              <PostInteractPanels
-                postId={post.id}
-                question={
-                  postType === "question"
-                    ? post.question ?? {
-                        solved: false,
-                        accepted_comment_id: 0,
-                        accepted_floor: 0,
-                        can_accept: canManageTyped,
-                        can_solve: canManageTyped,
-                        can_reopen: false,
-                      }
-                    : post.question
-                }
-                poll={post.poll}
-                bounty={post.bounty}
-                lottery={post.lottery}
-                loggedIn={!!me.user}
-              />
-
              {post.content_locked ? (
                <ContentLockGate
                  postId={post.id}
@@ -689,6 +702,25 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
                <PostAttachments postId={post.id} items={post.attachments || []} />
              )}

+              {/* 类型特殊块（投票/悬赏/抽奖/问答）统一放正文最下方 */}
+              <PostInteractPanels
+                postId={post.id}
+                poll={post.poll}
+                bounty={post.bounty}
+                lottery={post.lottery}
+                loggedIn={!!me.user}
+              />
+              {!post.content_locked && acceptedAnswer ? (
+                <AcceptedAnswerCard
+                  answer={acceptedAnswer}
+                  variant={acceptedAnswerVariant}
+                  postId={post.id}
+                  canReopen={!!post.question?.can_reopen}
+                />
+              ) : questionState ? (
+                <QuestionStatusCard postId={post.id} state={questionState} />
+              ) : null}
+
              {/* 文末点赞：分隔线后居中，唯一的点赞入口（作者行不再放置） */}
              <div
                className="mt-9 pt-7 flex justify-center"
@@ -729,9 +761,11 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
                  post.bounty?.accepted_comment_id ||
                  0
                }
-                winnerUserIds={
+                winnerCommentIds={
                  post.lottery?.drawn
-                    ? (post.lottery.winners || []).map((w) => w.id)
+                    ? (post.lottery.winners || [])
+                        .map((w) => w.comment_id || 0)
+                        .filter((id) => id > 0)
                    : []
                }
              />
--- a/frontend/components/AcceptedAnswerCard.tsx
+++ b/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>
+  );
+}
--- a/frontend/components/AcceptedAnswerReopen.tsx
+++ b/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>
+  );
+}
--- a/frontend/components/CommentSection.tsx
+++ b/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 && (
--- a/frontend/components/PostInteractPanels.tsx
+++ b/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>
--- a/frontend/lib/api.ts
+++ b/frontend/lib/api.ts
@@ -235,10 +235,25 @@ export interface Post {
  deleted_at?: string;
 }

+export interface AcceptedAnswer {
+  id: number;
+  floor: number;
+  content: string;
+  created_at: string;
+  deleted?: boolean;
+  user: {
+    id: number;
+    username: string;
+    nickname: string;
+    avatar: string;
+  };
+}
+
 export interface QuestionState {
  solved: boolean;
  accepted_comment_id: number;
  accepted_floor: number;
+  accepted_answer?: AcceptedAnswer | null;
  can_accept: boolean;
  can_solve: boolean;
  can_reopen: boolean;
@@ -276,6 +291,7 @@ export interface BountyState {
  points: number;
  accepted_comment_id: number;
  accepted_floor: number;
+  accepted_answer?: AcceptedAnswer | null;
  escrowed: boolean;
  refunded: boolean;
  expired?: boolean;
@@ -290,6 +306,9 @@ export interface LotteryEntrant {
  nickname: string;
  username: string;
  avatar: string;
+  /** 中奖楼层评论 ID（该用户最早主评，每人仅一条） */
+  comment_id?: number;
+  floor?: number;
 }

 export interface LotteryState {