feat: 帖子收藏与用户关注

- 新增收藏功能：favorite 服务与 handler、FavoriteButton 组件 - 新增关注功能：follow 服务与 handler、FollowButton 组件 - 用户主页适配关注/粉丝与收藏展示 - flash 消息工具、广告与侧边栏组件微调
2026-09-26 03:02:40 +08:00
parent 31f5360c26
commit d7c6b3a961
40 changed files with 1528 additions and 268 deletions
--- a/frontend/components/AdText.tsx
+++ b/frontend/components/AdText.tsx
@@ -1,12 +1,15 @@
 "use client";

 import { useEffect, useRef, useState, type CSSProperties } from "react";
+import { AD_TIP_DELAY_MS, adHoverTip } from "@/lib/ads";

 type AdTextProps = {
  title: string;
  textColor?: string;
  bgColor?: string;
  href?: string;
+  /** 广告到期时间（ISO 字符串）：有值时气泡首行展示，无值时仅显示免责声明 */
+  endsAt?: string | null;
  className?: string;
 };

@@ -14,7 +17,14 @@ type AdTextProps = {
 * 文字广告：仅当文字宽度超出容器时才启用跑马灯滚动，
 * 能完整显示时居中静止。结构与样式复用侧栏 .j13-ad-text。
 */
-export function AdText({ title, textColor, bgColor, href, className = "" }: AdTextProps) {
+export function AdText({
+  title,
+  textColor,
+  bgColor,
+  href,
+  endsAt,
+  className = "",
+}: AdTextProps) {
  const trackRef = useRef<HTMLSpanElement>(null);
  const [overflow, setOverflow] = useState(false);

@@ -35,6 +45,9 @@ export function AdText({ title, textColor, bgColor, href, className = "" }: AdTe
  const cls = `j13-ad-text${overflow ? " is-overflow" : ""}${className ? ` ${className}` : ""}`;
  const style: CSSProperties = { color: textColor, background: bgColor };

+  // 气泡首行：到期时间；第二行：免责声明
+  const tip = adHoverTip(endsAt);
+
  const inner = (
    <span
      className={`j13-ad-text-track${overflow ? " is-overflow" : ""}`}
@@ -57,14 +70,20 @@ export function AdText({ title, textColor, bgColor, href, className = "" }: AdTe
        rel="noopener noreferrer sponsored"
        className={cls}
        style={style}
-        data-tip={title}
+        data-tip={tip}
+        data-tip-delay={AD_TIP_DELAY_MS}
      >
        {inner}
      </a>
    );
  }
  return (
-    <span className={cls} style={style} data-tip={title}>
+    <span
+      className={cls}
+      style={style}
+      data-tip={tip}
+      data-tip-delay={AD_TIP_DELAY_MS}
+    >
      {inner}
    </span>
  );
--- a/frontend/components/BadgeChip.tsx
+++ b/frontend/components/BadgeChip.tsx
@@ -22,11 +22,11 @@ export default function BadgeChip({

  return (
    <span
-      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium leading-[1.6] whitespace-nowrap select-none ${className}`}
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] font-medium leading-[1.5] whitespace-nowrap select-none transition-transform duration-200 hover:-translate-y-[1px] ${className}`}
      style={{ background: soft, color }}
      data-tip={tip ?? badge.name}
    >
-      <Icon size={11} className="shrink-0" />
+      <Icon size={12} className="shrink-0" />
      {badge.name}
    </span>
  );
--- a/frontend/components/CommentSection.tsx
+++ b/frontend/components/CommentSection.tsx
@@ -39,6 +39,8 @@ import MarkdownEditor from "@/components/MarkdownEditor";
 import ConfirmDialog from "@/components/ConfirmDialog";
 import DeleteCommentModal, { type DeleteCommentPayload } from "@/components/DeleteCommentModal";
 import EditHistoryModal from "@/components/EditHistoryModal";
+import { scrollFlashTo } from "@/lib/flash";
+import { fetchCommentLocation } from "@/lib/api";

 interface CommentSectionProps {
  postId: string;
@@ -288,6 +290,59 @@ export default function CommentSection({
    return () => window.removeEventListener("hashchange", focusComposer);
  }, [user, commentsOpen]);

+  // 深链定位：#comment-{id} → 滚动 + 主题色浅底高亮渐隐。
+  // 目标是折叠楼层里的子回复时先展开所属楼层；不在当前页时查楼层号换页后重试。
+  // 楼层号锚点（#楼）、「回复 @xx」、采纳答案卡等页内跳转经 hashchange 同样获得高亮。
+  const locatedRef = useRef<number | null>(null); // 已跨页尝试过的评论 ID，防循环
+  useEffect(() => {
+    if (!commentsOpen) return;
+    let cancelled = false;
+    const locate = async () => {
+      const m = window.location.hash.match(/^#comment-(\d+)$/);
+      if (!m) return;
+      const id = Number(m[1]);
+      const el = document.getElementById(`comment-${id}`);
+      if (el) {
+        scrollFlashTo(el);
+        return;
+      }
+      // 不在 DOM：先看是否在本页数据里（折叠的子回复）→ 展开所属楼层后定位
+      const node = findComment(comments, id);
+      if (node) {
+        const rootId = node.root_id ?? node.parent_id ?? node.id;
+        setExpandedFloors((prev) => {
+          if (prev.has(rootId)) return prev;
+          const next = new Set(prev);
+          next.add(rootId);
+          return next;
+        });
+        window.setTimeout(() => {
+          if (!cancelled) scrollFlashTo(document.getElementById(`comment-${id}`));
+        }, 160);
+        return;
+      }
+      // 不在本页：查楼层号 → 换页（comments 变化后本 effect 再次运行并定位）
+      if (locatedRef.current === id) return; // 已尝试仍找不到（如被拒/未公开），放弃
+      locatedRef.current = id;
+      try {
+        const floor = await fetchCommentLocation(postId, id);
+        if (cancelled || floor <= 0) return;
+        const destPage = Math.max(1, Math.ceil(floor / size));
+        if (destPage === page) return; // 同页却无节点（异常数据），放弃
+        router.replace(`/post/${postId}?page=${destPage}#comment-${id}`, { scroll: false });
+      } catch {
+        /* 定位失败静默：停留在当前页 */
+      }
+    };
+    locate();
+    window.addEventListener("hashchange", locate);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("hashchange", locate);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [comments, commentsOpen, page, postId, size]);
+
  const submitFloor = async () => {
    if (!commentsOpen || !content.trim() || submitLock.current || floorUploading) return;
    submitLock.current = true;
--- a/frontend/components/FavoriteButton.tsx
+++ b/frontend/components/FavoriteButton.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { Bookmark } from "lucide-react";
+import { apiToggleFavorite } from "@/lib/api";
+import { toast } from "@/lib/toast";
+
+interface FavoriteButtonProps {
+  postId: string;
+  favorited: boolean;
+  variant?: "default" | "compact" | "article";
+}
+
+export default function FavoriteButton({
+  postId,
+  favorited: initialFavorited,
+  variant = "default",
+}: FavoriteButtonProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [favorited, setFavorited] = useState(initialFavorited);
+  const [loading, setLoading] = useState(false);
+
+  // router.refresh()（登录/登出后）服务端会重新下发 favorited 态，同步到本地
+  useEffect(() => {
+    setFavorited(initialFavorited);
+  }, [initialFavorited]);
+
+  const handleClick = async () => {
+    if (loading) return;
+    setLoading(true);
+    const wasFavorited = favorited;
+    setFavorited(!wasFavorited);
+    try {
+      const res = await apiToggleFavorite(postId);
+      if (res.error === "未登录") {
+        router.push(`/login?redirect=${encodeURIComponent(pathname)}`);
+        return;
+      }
+      if (typeof res.favorited === "boolean") {
+        setFavorited(res.favorited);
+      } else {
+        throw new Error(res.error || "FAIL");
+      }
+    } catch {
+      setFavorited(wasFavorited);
+      toast("操作失败，请稍后重试");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const sizeCls =
+    variant === "compact"
+      ? "px-2.5 py-1.5 gap-1 text-[12.5px]"
+      : variant === "article"
+        ? "px-7 py-3 gap-2 text-[15px] min-w-[132px]"
+        : "px-4 py-2 gap-1.5 text-sm";
+  const iconSize = variant === "compact" ? 13 : variant === "article" ? 18 : 15;
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={loading}
+      data-tip={favorited ? "取消收藏" : "收藏"}
+      aria-label={favorited ? "取消收藏" : "收藏"}
+      aria-pressed={favorited}
+      className={`inline-flex items-center justify-center tabular-nums rounded-full border transition-colors duration-150 disabled:opacity-50 ${
+        favorited
+          ? "border-[var(--accent)] text-[var(--accent)] bg-[color-mix(in_srgb,var(--accent)_10%,var(--panel))]"
+          : "border-[var(--line-2)] text-[var(--ink-2)] hover:border-[var(--accent)] hover:text-[var(--accent)]"
+      } ${sizeCls}`}
+      style={!favorited ? { background: "var(--panel)" } : undefined}
+    >
+      <Bookmark size={iconSize} fill={favorited ? "currentColor" : "none"} />
+      {variant === "article" && <span>{favorited ? "已收藏" : "收藏"}</span>}
+    </button>
+  );
+}
--- a/frontend/components/FollowButton.tsx
+++ b/frontend/components/FollowButton.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { UserPlus, UserCheck } from "lucide-react";
+import { apiToggleFollow } from "@/lib/api";
+import { toast } from "@/lib/toast";
+
+interface FollowButtonProps {
+  userId: string | number;
+  following: boolean;
+  size?: "default" | "sm";
+}
+
+export default function FollowButton({
+  userId,
+  following: initialFollowing,
+  size = "default",
+}: FollowButtonProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [following, setFollowing] = useState(initialFollowing);
+  const [loading, setLoading] = useState(false);
+
+  // router.refresh()（登录/登出后）服务端会重新下发关注态，同步到本地
+  useEffect(() => {
+    setFollowing(initialFollowing);
+  }, [initialFollowing]);
+
+  const handleClick = async () => {
+    if (loading) return;
+    setLoading(true);
+    const wasFollowing = following;
+    setFollowing(!wasFollowing);
+    try {
+      const res = await apiToggleFollow(userId);
+      if (res.error === "未登录") {
+        router.push(`/login?redirect=${encodeURIComponent(pathname)}`);
+        return;
+      }
+      if (typeof res.following === "boolean") {
+        setFollowing(res.following);
+        // 关注数变化后刷新页面统计（导航计数、Hero 统计）
+        router.refresh();
+      } else {
+        throw new Error(res.error || "FAIL");
+      }
+    } catch {
+      setFollowing(wasFollowing);
+      toast("操作失败，请稍后重试");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const sizeCls = size === "sm" ? "px-2.5 py-1 gap-1 text-[12px]" : "btn-sm";
+  const iconSize = size === "sm" ? 12 : 14;
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={loading}
+      data-tip={following ? "取消关注" : "关注"}
+      aria-label={following ? "取消关注" : "关注"}
+      aria-pressed={following}
+      className={`inline-flex items-center justify-center gap-1.5 rounded-full border font-semibold transition-colors duration-150 disabled:opacity-50 ${
+        following
+          ? "border-[var(--line-2)] text-[var(--ink-2)] hover:border-[var(--danger)] hover:text-[var(--danger)]"
+          : "border-[var(--accent)] text-[var(--accent)] hover:bg-[color-mix(in_srgb,var(--accent)_10%,var(--panel))]"
+      } ${sizeCls}`}
+      style={{ background: "var(--panel)" }}
+    >
+      {following ? <UserCheck size={iconSize} /> : <UserPlus size={iconSize} />}
+      {following ? "已关注" : "关注"}
+    </button>
+  );
+}
--- a/frontend/components/MobilePostBar.tsx
+++ b/frontend/components/MobilePostBar.tsx
@@ -2,21 +2,24 @@

 import { MessageSquare } from "lucide-react";
 import LikeButton from "./LikeButton";
+import FavoriteButton from "./FavoriteButton";
 import { scrollBehavior } from "@/lib/motion";

 /**
 * 帖子详情移动端浮动操作条（lg 以下显示）：
- * 长文读到中途也能点赞 / 跳评论框；回顶由全局 BackToTop 承担。
+ * 长文读到中途也能点赞 / 收藏 / 跳评论框；回顶由全局 BackToTop 承担。
 */
 export default function MobilePostBar({
  postId,
  liked,
  likeCount,
+  favorited = false,
  allowComments = true,
 }: {
  postId: string;
  liked: boolean;
  likeCount: number;
+  favorited?: boolean;
  allowComments?: boolean;
 }) {
  const scrollToComments = () => {
@@ -52,6 +55,7 @@ export default function MobilePostBar({
        <div className="j13-bar-like">
          <LikeButton postId={postId} liked={liked} likeCount={likeCount} variant="compact" />
        </div>
+        <FavoriteButton postId={postId} favorited={favorited} variant="compact" />
      </div>
    </div>
  );
--- a/frontend/components/NotificationBell.tsx
+++ b/frontend/components/NotificationBell.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { Bell, CheckCheck, Heart, MessageCircle, CheckCircle2, XCircle, AtSign, ClipboardList, Award, AlertTriangle } from "lucide-react";
+import { Bell, CheckCheck, Heart, MessageCircle, CheckCircle2, XCircle, AtSign, ClipboardList, Award, AlertTriangle, UserPlus } from "lucide-react";
 import {
  apiFetchNotifications,
  apiUnreadCount,
@@ -99,13 +99,18 @@ export default function NotificationBell({ initialUnread = 0 }: { initialUnread?
      );
    }
    setOpen(false);
-    // @提及通知跳到群聊房间；徽章通知无关联帖子（仅标已读）；其余跳到帖子/评论
+    // @提及通知跳到群聊房间；徽章通知无关联帖子（仅标已读）；关注通知跳到关注者主页；其余跳到帖子/评论
    if (n.type === "mention" && n.room_id) {
      router.push(`/chat/${n.room_id}`);
    } else if (n.type === "pending_review") {
      router.push(n.post_id ? `/post/${n.post_id}` : "/admin/content?status=pending");
    } else if (n.type === "badge") {
      return;
+    } else if (n.type === "follow") {
+      router.push(`/u/${n.actor_id}`);
+    } else if (n.comment_id > 0) {
+      // 评论/回复/点赞等：直达评论所在楼层（跨页由帖子页深链定位换页）
+      router.push(`/post/${n.post_id}#comment-${n.comment_id}`);
    } else {
      router.push(`/post/${n.post_id}`);
    }
@@ -138,6 +143,7 @@ export default function NotificationBell({ initialUnread = 0 }: { initialUnread?
    if (n.type === "deleted") return "删除了你的帖子";
    if (n.type === "badge") return "向你颁布了徽章";
    if (n.type === "necro_reply") return "旧帖回复提醒";
+    if (n.type === "follow") return "关注了你";
    return "点赞了你的帖子";
  };

@@ -161,6 +167,8 @@ export default function NotificationBell({ initialUnread = 0 }: { initialUnread?
      return { color: "var(--accent)", bg: "var(--accent-soft)", node: <ClipboardList size={15} /> };
    if (n.type === "badge")
      return { color: "var(--gold)", bg: "var(--gold-soft)", node: <Award size={15} /> };
+    if (n.type === "follow")
+      return { color: "var(--accent)", bg: "var(--accent-soft)", node: <UserPlus size={15} /> };
    return { color: "var(--accent)", bg: "var(--accent-soft)", node: <MessageCircle size={15} /> };
  };

--- a/frontend/components/PostRow.tsx
+++ b/frontend/components/PostRow.tsx
@@ -6,7 +6,6 @@ import { getPublicSettingsCached } from "@/lib/serverData";
 import { normalizePostType, postTypeLabel, typeStatusLabel, typeStatusClass } from "@/lib/postMeta";
 import LikeButton from "./LikeButton";
 import Avatar from "./Avatar";
-import BadgeChip from "./BadgeChip";
 import { IconComment, IconEye } from "./Icons";

 /**
@@ -104,9 +103,6 @@ export default async function PostRow({
          >
            {authorName}
          </Link>
-          {(post.user.badges ?? []).slice(0, 2).map((ub) => (
-            <BadgeChip key={ub.id} badge={ub.badge} />
-          ))}
          <span aria-hidden>·</span>
          <span className="tabular-nums">{formatRelative(post.created_at)}</span>
          {replied && (
--- a/frontend/components/PostToc.tsx
+++ b/frontend/components/PostToc.tsx
@@ -2,6 +2,7 @@

 import { useEffect, useRef, useState } from "react";
 import { scrollBehavior } from "@/lib/motion";
+import { flashElement } from "@/lib/flash";

 export interface TocItem {
  level: 2 | 3;
@@ -53,6 +54,7 @@ export default function PostToc({ items }: { items: TocItem[] }) {
    const target = document.getElementById(id);
    if (!target) return;
    target.scrollIntoView({ behavior: scrollBehavior(), block: "start" });
+    flashElement(target); // 主题色浅底高亮渐隐，标记落点
    setActive(id);
  };

--- a/frontend/components/RoleBadge.tsx
+++ b/frontend/components/RoleBadge.tsx
@@ -2,6 +2,7 @@

 import { Crown, BadgeCheck, ShieldCheck, Shield, Users, type LucideIcon } from "lucide-react";
 import { roleMeta, type RoleIconKey } from "@/lib/roles";
+import { BOARD_COLOR_COUNT } from "@/components/BoardIcon";

 // 角色图标集中映射（图标库不含 ShieldStar，超管使用 BadgeCheck 表达"全权限认证"）
 const ICONS: Record<RoleIconKey, LucideIcon> = {
@@ -12,59 +13,92 @@ const ICONS: Record<RoleIconKey, LucideIcon> = {
  user: Users,
 };

+/** 已知板块信息：名称 + 配色下标（0..15） */
+type BoardRef = { name: string; colorIdx: number | null };
+
 /**
- * 角色徽章：图标 + 文案，配色走角色元数据中的 CSS token。
- * - board_admin 额外展示授权板块数（或板块名）
- * - variant=plain 时仅图标+文字不着底色（用于表头/文本行）
+ * 角色徽章：图标 + 文案。
+ * - 普通角色：配色走角色元数据中的 CSS token
+ * - board_admin 提供板块名时逐板块渲染「{板块名} · 板块管理员」，配色对齐板块色
+ *   （av-N，深浅色自适应）；truncate 窄列场景折叠为单枚「{首板块}等 N 个板块 · 板块管理员」
+ * - board_admin 未提供板块名时退回「板块管理员 · N 个板块」
 */
 export default function RoleBadge({
  role,
  boardIds,
  boardNames,
-  size = 11,
+  boardColors,
+  size = 12,
  className = "",
  title,
  truncate = false,
 }: {
  role?: string | null;
  boardIds?: number[] | null;
-  /** id -> 名称映射；提供时板块管理员展示板块名（多选时折叠为 N 个板块） */
+  /** id -> 名称映射；提供时板块管理员按板块逐枚展示 */
  boardNames?: Map<number, string> | Record<number, string>;
+  /** id -> 配色下标（boardColor 计算）；提供时徽章配色对齐板块色 */
+  boardColors?: Map<number, number> | Record<number, number>;
  size?: number;
  className?: string;
  title?: string;
-  /** 窄列场景：限制最大宽度并省略过长文案 */
+  /** 窄列场景：限制最大宽度并省略过长文案；多板块折叠为单枚 */
  truncate?: boolean;
 }) {
  const meta = roleMeta(role);
  const Icon = ICONS[meta.icon];

-  let label = meta.label;
-  if (role === "board_admin") {
-    if (boardNames) {
-      const names = (boardIds ?? [])
-        .map((id) => (boardNames instanceof Map ? boardNames.get(id) : boardNames[id]))
-        .filter(Boolean) as string[];
-      if (names.length === 1) {
-        label = `${meta.label} · ${names[0]}`;
-      } else if (names.length > 1) {
-        label = `${meta.label} · ${names.length} 个板块`;
-      }
-    } else if (boardIds && boardIds.length > 0) {
-      label = `${meta.label} · ${boardIds.length} 个板块`;
-    }
-  }
-
-  return (
+  // 单枚渲染：有板块配色下标时用 av-N 类（自带深浅色两套值），否则角色配色 token
+  const renderBadge = (label: string, boardColorIdx: number | null, key?: number) => (
    <span
-      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium leading-[1.6] select-none ${
+      key={key}
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] font-medium leading-[1.5] select-none transition-transform duration-200 hover:-translate-y-[1px] ${
        truncate ? "max-w-full whitespace-nowrap" : "whitespace-nowrap"
-      } ${className}`}
-      style={{ background: `var(${meta.softToken})`, color: `var(${meta.colorToken})` }}
+      } ${boardColorIdx != null ? `av-${boardColorIdx}` : ""} ${className}`}
+      style={
+        boardColorIdx != null
+          ? undefined
+          : { background: `var(${meta.softToken})`, color: `var(${meta.colorToken})` }
+      }
      data-tip={title ?? label}
    >
      <Icon size={size} className="shrink-0" />
      {truncate ? <span className="overflow-hidden text-ellipsis">{label}</span> : label}
    </span>
  );
+
+  if (role === "board_admin" && boardNames) {
+    const boards = (boardIds ?? [])
+      .map((id): BoardRef | null => {
+        const name = boardNames instanceof Map ? boardNames.get(id) : boardNames[id];
+        if (!name) return null;
+        const c = boardColors
+          ? boardColors instanceof Map
+            ? boardColors.get(id)
+            : boardColors[id]
+          : undefined;
+        return { name, colorIdx: typeof c === "number" ? c % BOARD_COLOR_COUNT : null };
+      })
+      .filter((b): b is BoardRef => b !== null);
+
+    if (boards.length > 0) {
+      if (truncate) {
+        // 窄列：折叠为单枚，避免多枚徽章撑破布局
+        const first = boards[0];
+        const label =
+          boards.length === 1
+            ? `${first.name} · ${meta.label}`
+            : `${first.name} 等 ${boards.length} 个板块 · ${meta.label}`;
+        return renderBadge(label, first.colorIdx);
+      }
+      return <>{boards.map((b, i) => renderBadge(`${b.name} · ${meta.label}`, b.colorIdx, i))}</>;
+    }
+    // 板块名缺失（板块被删等）：回落通用渲染
+  }
+
+  let label = meta.label;
+  if (role === "board_admin" && boardIds && boardIds.length > 0) {
+    label = `${meta.label} · ${boardIds.length} 个板块`;
+  }
+  return renderBadge(label, null);
 }
--- a/frontend/components/TipHost.tsx
+++ b/frontend/components/TipHost.tsx
@@ -136,7 +136,17 @@ export default function TipHost() {
  const activeEl = useRef<Element | null>(null);

  useEffect(() => {
+    let pendingTimer: number | null = null;
+
+    const clearPending = () => {
+      if (pendingTimer !== null) {
+        window.clearTimeout(pendingTimer);
+        pendingTimer = null;
+      }
+    };
+
    const hide = () => {
+      clearPending();
      activeEl.current = null;
      setTip(null);
    };
@@ -160,8 +170,27 @@ export default function TipHost() {
        hide();
        return;
      }
-      activeEl.current = host;
-      placeTip(host, text);
+      // 同一目标已在显示：直接复位位置，不重新计时
+      if (activeEl.current === host && pendingTimer === null) {
+        placeTip(host, text);
+        return;
+      }
+      // data-tip-delay="毫秒"：停留一会再显示，期间移出即取消
+      const delay = Number(host.getAttribute("data-tip-delay") || 0);
+      if (!Number.isFinite(delay) || delay <= 0) {
+        clearPending();
+        activeEl.current = host;
+        placeTip(host, text);
+        return;
+      }
+      clearPending();
+      pendingTimer = window.setTimeout(() => {
+        pendingTimer = null;
+        const focused = host.contains(document.activeElement);
+        if (!host.matches(":hover") && !focused) return;
+        activeEl.current = host;
+        placeTip(host, text);
+      }, delay);
    };

    const onOver = (e: Event) => {
@@ -202,6 +231,7 @@ export default function TipHost() {
    window.addEventListener("resize", onScrollOrResize);

    return () => {
+      clearPending();
      document.removeEventListener("mouseover", onOver);
      document.removeEventListener("mouseout", onOut);
      document.removeEventListener("focusin", onOver);
--- a/frontend/components/home/CommunityPanels.tsx
+++ b/frontend/components/home/CommunityPanels.tsx
@@ -34,7 +34,13 @@ import { FRIEND_LINKS } from "@/lib/friendLinks";
 import { formatCompact, formatShortDate } from "@/lib/format";
 import { pageGlyph } from "@/lib/pageGlyph";
 import { AboutSiteHeader } from "@/components/site-doc";
-import { AD_IMAGE_HEIGHT, AD_IMAGE_SIZE_LABEL, AD_IMAGE_WIDTH } from "@/lib/ads";
+import {
+  AD_IMAGE_HEIGHT,
+  AD_IMAGE_SIZE_LABEL,
+  AD_IMAGE_WIDTH,
+  AD_TIP_DELAY_MS,
+  adHoverTip,
+} from "@/lib/ads";

 /* ---------- 站点数据（2×2 bento 统计瓦片） ---------- */

@@ -464,10 +470,7 @@ export function AdsPanel({
      <p className="j13-module-title mb-3">
        <CircleDollarSign size={15} style={{ color: "var(--accent)" }} />
        {title || "自助推广"}
-        <Link
-          href="/ads/buy"
-          className="meta ml-auto text-[12px] font-normal transition-colors hover:text-[var(--accent)]"
-        >
+        <Link href="/ads/buy" className="j13-ad-buy-btn ml-auto">
          购买广告位
        </Link>
      </p>
@@ -482,6 +485,8 @@ export function AdsPanel({
                  target="_blank"
                  rel="noopener noreferrer sponsored"
                  className="j13-ad-image-link"
+                  data-tip={adHoverTip(ad.ends_at)}
+                  data-tip-delay={AD_TIP_DELAY_MS}
                >
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
@@ -513,6 +518,7 @@ export function AdsPanel({
                  textColor={ad.text_color || "#1E293B"}
                  bgColor={ad.bg_color || "#F1F5F9"}
                  href={ad.link_url}
+                  endsAt={ad.ends_at}
                />
              </li>
            ) : (
--- a/frontend/components/post/PostRailBlocks.tsx
+++ b/frontend/components/post/PostRailBlocks.tsx
@@ -5,6 +5,7 @@ import BoardIcon, { boardColor } from "@/components/BoardIcon";
 import Avatar from "@/components/Avatar";
 import RoleBadge from "@/components/RoleBadge";
 import LevelBadge from "@/components/LevelBadge";
+import BadgeChip from "@/components/BadgeChip";

 // formatYMD 帖子详情页左栏「作者其他帖」日期
 function formatYMD(dateStr: string) {
@@ -56,9 +57,14 @@ export function BoardCard({ board }: { board: Board }) {
 export function AuthorRailCard({
  profile,
  allowComments,
+  boardNames,
+  boardColors,
 }: {
  profile: UserProfile;
  allowComments: boolean;
+  /** 板块 id → 名称/配色：板块管理员徽章展示「{板块名}板块管理员」并对齐板块色 */
+  boardNames?: Record<number, string>;
+  boardColors?: Record<number, number>;
 }) {
  const u = profile.user;
  const signature = (u.signature || "").trim();
@@ -89,13 +95,23 @@ export function AuthorRailCard({
            <LevelBadge level={u.level} className="shrink-0" />
          </div>
          <p className="meta mt-0.5 truncate">@{u.username}</p>
-          {u.role !== "user" && (
-            <div className="mt-1">
-              <RoleBadge role={u.role} boardIds={u.board_ids} />
-            </div>
-          )}
        </div>
      </div>
+      {/* 徽章行：站点角色 + 管理员颁布徽章统一收拢一处，悬浮显示颁布时间；窄栏最多 4 枚 */}
+      {(u.role !== "user" || (u.badges ?? []).length > 0) && (
+        <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
+          {u.role !== "user" && (
+            <RoleBadge role={u.role} boardIds={u.board_ids} boardNames={boardNames} boardColors={boardColors} />
+          )}
+          {(u.badges ?? []).slice(0, 4).map((ub) => (
+            <BadgeChip
+              key={ub.id}
+              badge={ub.badge}
+              tip={`${ub.badge.name} · ${new Date(ub.awarded_at).toLocaleDateString("zh-CN")} 颁布`}
+            />
+          ))}
+        </div>
+      )}
      {/* 有签名则展示；无则留空，不放占位文案 */}
      {signature ? (
        <p
@@ -106,18 +122,21 @@ export function AuthorRailCard({
          {signature}
        </p>
      ) : null}
+      {/* 数据面板：圆角浅底 + 竖线分隔（参考作者卡布局，配色走站点令牌） */}
      <div
-        className={`mt-3 grid border-t ${stats.length === 3 ? "grid-cols-3" : "grid-cols-2"}`}
-        style={{ borderColor: "var(--line)" }}
+        className={`mt-3 grid overflow-hidden rounded-[10px] ${
+          stats.length === 3 ? "grid-cols-3" : "grid-cols-2"
+        }`}
+        style={{ background: "var(--panel-2)" }}
      >
        {stats.map((s, i) => (
          <div
            key={s.label}
-            className="px-1.5 py-2.5 text-center"
+            className="py-2.5 text-center"
            style={i > 0 ? { borderLeft: "1px solid var(--line)" } : undefined}
          >
            <p
-              className="text-[17px] font-semibold leading-none tabular-nums"
+              className="text-[16px] font-semibold leading-none tabular-nums"
              style={{ color: "var(--ink)" }}
            >
              {s.value}
@@ -128,12 +147,17 @@ export function AuthorRailCard({
          </div>
        ))}
      </div>
+      {/* 连签胶囊：金色调软底，与站点 gold 令牌一致 */}
      {streak > 0 && (
        <p
-          className="mt-2 flex items-center justify-center gap-1 text-[11.5px] font-medium"
-          style={{ color: "var(--gold)" }}
+          className="mt-2.5 flex h-9 items-center justify-center gap-1.5 rounded-full text-[12px] font-semibold"
+          style={{
+            background: "var(--gold-soft)",
+            color: "var(--gold)",
+            border: "1px solid color-mix(in srgb, var(--gold) 22%, transparent)",
+          }}
        >
-          <Flame size={11.5} /> 连签 {streak} 天
+          <Flame size={12.5} /> 连签 {streak} 天
        </p>
      )}
      <Link href={`/u/${u.id}`} className="btn btn-line btn-sm w-full justify-center mt-3">
--- a/frontend/components/sidebar/registry.tsx
+++ b/frontend/components/sidebar/registry.tsx
@@ -78,6 +78,9 @@ export interface SidebarBlockProps {
  authorProfile?: UserProfile;
  authorPosts?: PostListItem[];
  toc?: TocItem[];
+  // 板块 id → 名称/配色下标：板块管理员徽章展示「{板块名}板块管理员」并对齐板块色
+  boardNames?: Record<number, string>;
+  boardColors?: Record<number, number>;
 }

 // 内置块注册表：key → 组件。数据未就绪或未知 key 返回 null（渲染层静默跳过）。
@@ -143,7 +146,12 @@ export function renderSidebarBlock(key: string, p: SidebarBlockProps) {
      return p.postBoard ? <PostBoardCard board={p.postBoard} /> : null;
    case "post_author":
      return p.authorProfile ? (
-        <PostAuthorCard profile={p.authorProfile} allowComments={p.allowComments} />
+        <PostAuthorCard
+          profile={p.authorProfile}
+          allowComments={p.allowComments}
+          boardNames={p.boardNames}
+          boardColors={p.boardColors}
+        />
      ) : null;
    case "post_author_posts":
      return p.authorPosts ? <PostAuthorPosts posts={p.authorPosts} /> : null;