feat(posts): 类型帖截止时间、抽奖奖品表与悬赏发帖体验

统一投票/悬赏/抽奖截止与状态展示，抽奖支持多奖品行；发帖页悬赏积分对齐表格输入，并在余额不足时于底部就地提示。

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

frontend/components/AcceptedAnswerCard.tsx

@@ -1,76 +1,83 @@
 import Link from "next/link";
-import { CheckCircle2 } from "lucide-react";
+import { CheckCircle2, CircleHelp, Coins } from "lucide-react";
 import type { AcceptedAnswer } from "@/lib/api";
 import Avatar from "@/components/Avatar";
 import MarkdownBody from "@/components/MarkdownBody";
-import AcceptedAnswerReopen from "@/components/AcceptedAnswerReopen";
 
-/** 正文下方的已采纳答案卡：头像 + 昵称 + 全文；问答已解决时并入状态与「重新打开」 */
+/** 正文下方已采纳答案：对齐类型帖 typed-card；已采纳后不可重新打开 */
 export default async function AcceptedAnswerCard({
   answer,
   variant = "question",
-  postId,
-  canReopen = false,
+  solvedAt,
 }: {
   answer: AcceptedAnswer;
   /** 问答用「最佳答案」，悬赏用「已采纳」 */
   variant?: "question" | "bounty";
-  postId?: number;
-  canReopen?: boolean;
+  /** 解决/采纳时刻；缺省用答案创建时间 */
+  solvedAt?: string;
 }) {
   const name = answer.user.nickname || answer.user.username || "用户";
-  const label = variant === "bounty" ? "已采纳" : "最佳答案";
-  const showReopen = variant === "question" && canReopen && !!postId;
+  const isQuestion = variant === "question";
+  const title = isQuestion ? "问答" : "悬赏";
+  const statusLabel = isQuestion ? "已解决" : "已采纳";
+  const answerLabel = isQuestion ? "最佳答案" : "采纳答案";
+  const endTime = solvedAt || answer.created_at;
+  const endLabel = formatEndsAt(endTime);
 
   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>
+    <section
+      className={`j13-interact-card j13-typed-card j13-accepted-answer${isQuestion ? " is-question" : " is-bounty"}`}
+      aria-label={`${title} · ${statusLabel}`}
+    >
+      <div className="j13-typed-head">
+        <div className="j13-typed-head-main">
+          <h2 className={`j13-typed-title ${isQuestion ? "is-question" : "is-bounty"}`}>
+            {isQuestion ? (
+              <CircleHelp size={16} strokeWidth={2.25} aria-hidden />
+            ) : (
+              <Coins size={16} strokeWidth={2.25} aria-hidden />
+            )}
+            {title}
+          </h2>
+          <span className="badge-status badge-status-solved shrink-0">{statusLabel}</span>
         </div>
-        {showReopen && <AcceptedAnswerReopen postId={postId!} />}
-      </header>
+      </div>
+
+      <div className="j13-accepted-answer__author">
+        <span className="j13-accepted-answer__chip">
+          <CheckCircle2 size={12} strokeWidth={2.25} aria-hidden />
+          {answerLabel}
+        </span>
+        <Link href={`/u/${answer.user.id}`} className="shrink-0" aria-label={name}>
+          <Avatar name={name} src={answer.user.avatar || undefined} size={32} />
+        </Link>
+        <div className="min-w-0 flex flex-col gap-0.5">
+          <Link
+            href={`/u/${answer.user.id}`}
+            className="truncate text-[13.5px] 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 !mb-0">
+            <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 className="j13-accepted-answer__body">
         {answer.deleted ? (
@@ -81,6 +88,25 @@ export default async function AcceptedAnswerCard({
           <MarkdownBody content={answer.content} className="prose-content prose-comment" />
         )}
       </div>
+
+      <div className="j13-typed-foot">
+        <span className="j13-typed-foot-status">
+          <CheckCircle2 size={14} strokeWidth={2.25} aria-hidden />
+          {isQuestion ? "已采纳答案" : "悬赏已发放"}
+        </span>
+        {endLabel ? (
+          <span className="j13-typed-foot-time">结束时间: {endLabel}</span>
+        ) : null}
+      </div>
     </section>
   );
 }
+
+function formatEndsAt(iso?: string) {
+  if (!iso) return "";
+  try {
+    return new Date(iso).toLocaleString("zh-CN");
+  } catch {
+    return iso;
+  }
+}