feat: 新增帖子最后回复展示、文章目录与三栏布局，优化点赞按钮与导航栏

这是一次包含多个功能升级的提交：
1. 后端新增批量查询帖子最后回复的逻辑，在前端帖子列表项中展示最后回复信息
2. 重构点赞按钮，新增文章样式变体并统一样式逻辑
3. 重写工作台导航栏，精简默认展示的菜单选项
4. 新增文章目录组件，为帖子详情页添加文章目录导航
5. 重构帖子详情页，实现三栏响应式布局，新增板块卡片、作者信息栏与同板块热议推荐
6. 重构帖子列表行组件，优化排版与信息展示逻辑
7. 重构帖子管理操作组件，使用下拉菜单整合所有管理功能
8. 新增全局通用的滚动容器与点赞按钮样式

frontend/components/PostActions.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { Pencil, Trash2, Pin, Star } from "lucide-react";
+import { Pencil, Trash2, Pin, Star, SlidersHorizontal, ChevronDown, Check } from "lucide-react";
 import { apiMe, apiDeletePost, apiTogglePin, apiToggleRecommend, type User } from "@/lib/api";
 import { toast } from "@/lib/toast";
 
@@ -17,10 +17,12 @@ interface PostActionsProps {
 export default function PostActions({ postId, authorId, pinned, recommended }: PostActionsProps) {
   const router = useRouter();
   const [user, setUser] = useState<User | null>(null);
+  const [open, setOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [isPinned, setIsPinned] = useState(pinned > 0);
   const [isRecommended, setIsRecommended] = useState(recommended);
   const [acting, setActing] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     apiMe()
@@ -28,11 +30,28 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
       .catch(() => setUser(null));
   }, []);
 
+  // 点击外部 / Esc 关闭菜单（与通知铃铛同一交互模式）
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
   const canManage = user && (user.id === authorId || user.role === "admin");
   const isAdmin = user?.role === "admin";
-  if (!canManage) return null;
 
   const handleDelete = async () => {
+    setOpen(false);
     if (!confirm("确定要删除这篇帖子吗？此操作不可恢复。")) return;
     setDeleting(true);
     try {
@@ -52,6 +71,7 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
 
   const handlePin = async () => {
     setActing(true);
+    setOpen(false);
     try {
       const res = await apiTogglePin(postId);
       setIsPinned(res.pinned > 0);
@@ -66,6 +86,7 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
 
   const handleRecommend = async () => {
     setActing(true);
+    setOpen(false);
     try {
       const res = await apiToggleRecommend(postId);
       setIsRecommended(res.recommended);
@@ -78,38 +99,89 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
     }
   };
 
+  if (!canManage) return null;
+
+  const itemCls =
+    "w-full flex items-center gap-2.5 px-4 py-2.5 text-[13px] transition-colors hover:bg-[var(--panel-2)]";
+
   return (
-    <div className="flex items-center gap-1.5 flex-wrap">
-      {isAdmin && (
-        <>
-          <button
-            onClick={handlePin}
-            disabled={acting}
-            className="btn btn-line btn-sm"
-            style={isPinned ? { borderColor: "var(--accent)", color: "var(--accent)" } : undefined}
-          >
-            <Pin size={13} /> {isPinned ? "取消置顶" : "置顶"}
-          </button>
-          <button
-            onClick={handleRecommend}
-            disabled={acting}
-            className="btn btn-line btn-sm"
-            style={
-              isRecommended
-                ? { borderColor: "var(--gold)", color: "var(--gold)", background: "var(--gold-soft)" }
-                : undefined
-            }
-          >
-            <Star size={13} /> {isRecommended ? "取消推荐" : "推荐"}
-          </button>
-        </>
-      )}
-      <Link href={`/post/${postId}/edit`} className="btn btn-line btn-sm">
-        <Pencil size={13} /> 编辑
-      </Link>
-      <button onClick={handleDelete} disabled={deleting} className="btn btn-danger btn-sm">
-        <Trash2 size={13} /> {deleting ? "删除中..." : "删除"}
+    <div className="relative" ref={menuRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        disabled={acting || deleting}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="btn btn-line btn-sm"
+        style={open ? { borderColor: "var(--accent)", color: "var(--accent)" } : undefined}
+      >
+        <SlidersHorizontal size={13} /> 管理
+        <ChevronDown
+          size={13}
+          style={{ transition: "transform .15s", transform: open ? "rotate(180deg)" : "none" }}
+        />
       </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 mt-2 w-44 overflow-hidden z-50 j13-toast-in"
+          style={{
+            background: "var(--panel)",
+            border: "1px solid var(--line)",
+            borderRadius: "var(--r)",
+            boxShadow: "var(--shadow-lg)",
+          }}
+        >
+          {isAdmin && (
+            <>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={handlePin}
+                className={itemCls}
+                style={isPinned ? { color: "var(--accent)" } : { color: "var(--ink)" }}
+              >
+                <Pin size={14} className="shrink-0" />
+                <span className="flex-1 text-left">{isPinned ? "取消置顶" : "置顶"}</span>
+                {isPinned && <Check size={14} className="shrink-0" />}
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                onClick={handleRecommend}
+                className={itemCls}
+                style={isRecommended ? { color: "var(--gold)" } : { color: "var(--ink)" }}
+              >
+                <Star size={14} className="shrink-0" />
+                <span className="flex-1 text-left">{isRecommended ? "取消推荐" : "推荐"}</span>
+                {isRecommended && <Check size={14} className="shrink-0" />}
+              </button>
+              <div style={{ height: 1, background: "var(--line)" }} />
+            </>
+          )}
+          <Link
+            href={`/post/${postId}/edit`}
+            role="menuitem"
+            className={`${itemCls} items-center`}
+            style={{ color: "var(--ink)" }}
+          >
+            <Pencil size={14} className="shrink-0" />
+            <span className="flex-1 text-left">编辑帖子</span>
+          </Link>
+          <button
+            type="button"
+            role="menuitem"
+            onClick={handleDelete}
+            disabled={deleting}
+            className={`${itemCls} items-center`}
+            style={{ color: "var(--danger)" }}
+          >
+            <Trash2 size={14} className="shrink-0" />
+            <span className="flex-1 text-left">{deleting ? "删除中..." : "删除帖子"}</span>
+          </button>
+        </div>
+      )}
     </div>
   );
 }