feat: 实时消息与管理端运营能力

新增群聊/私信与公共 WebSocket 总线，站长用户内容档案，并将通知与待审角标改为推送驱动；同步精简管理仪表盘并修复主题换肤 DOM 冲突。

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

frontend/app/admin/AdminNav.tsx

@@ -21,6 +21,7 @@ import {
   isSuperOrOwner,
   type RoleUserLike,
 } from "@/lib/roles";
+import { realtime, RT_MODERATION_CHANGED } from "@/lib/realtime";
 import Avatar from "@/components/Avatar";
 import RoleBadge from "@/components/RoleBadge";
 
@@ -69,7 +70,7 @@ function isActive(pathname: string, href: string, exact?: boolean) {
   return exact ? pathname === href : pathname === href || pathname.startsWith(`${href}/`);
 }
 
-/** 待审核数量轮询（30 秒）；仅内容审核入口可见时启用 */
+/** 待审核数量：首屏 + WS 推送 + 回前台校准（无定时轮询） */
 function usePendingCounts(enabled: boolean) {
   const [counts, setCounts] = useState({ posts: 0, comments: 0 });
   useEffect(() => {
@@ -83,14 +84,14 @@ function usePendingCounts(enabled: boolean) {
         .catch(() => {});
     };
     load();
-    const t = setInterval(load, 30_000);
+    const off = realtime.on(RT_MODERATION_CHANGED, () => load());
     const onVisible = () => {
       if (document.visibilityState === "visible") load();
     };
     document.addEventListener("visibilitychange", onVisible);
     return () => {
       alive = false;
-      clearInterval(t);
+      off();
       document.removeEventListener("visibilitychange", onVisible);
     };
   }, [enabled]);

frontend/app/admin/page.tsx

@@ -2,21 +2,22 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { cookies } from "next/headers";
 import {
-  Users,
-  PenLine,
-  MessageCircle,
-  Activity,
-  Megaphone,
-  Palette,
-  ChevronRight,
   UserPlus,
   LayoutGrid,
   ClipboardCheck,
+  ChevronRight,
+  MessageSquareText,
+  FileText,
+  Users,
 } from "lucide-react";
-import { fetchOverview, type OverviewResponse } from "@/lib/api";
+import {
+  fetchOverview,
+  fetchAdminPendingCounts,
+  type PendingCounts,
+} from "@/lib/api";
 import { authCookieHeader } from "@/lib/cookies";
 import { getMeCached } from "@/lib/serverData";
-import { canModerateAny, isAdminOrAbove, isSuperOrOwner } from "@/lib/roles";
+import { canModerateAny, isSuperOrOwner } from "@/lib/roles";
 import Avatar from "@/components/Avatar";
 import { formatRelative } from "@/lib/format";
 
@@ -24,7 +25,6 @@ export const metadata: Metadata = {
   title: "管理仪表盘",
 };
 
-// 精确千分位（管理员视角需要真实数值，不用首页的紧凑 K/M）
 const fmt = (n: number) => n.toLocaleString("zh-CN");
 
 function greeting(hour: number) {
@@ -35,91 +35,6 @@ function greeting(hour: number) {
   return "晚上好";
 }
 
-// 统计 Bento 卡：总量 + 今日增量，语义色与全站令牌一致
-function StatCard({
-  label,
-  value,
-  foot,
-  icon,
-  color,
-  soft,
-}: {
-  label: string;
-  value: string;
-  foot: string;
-  icon: React.ReactNode;
-  color: string;
-  soft: string;
-}) {
-  return (
-    <div className="panel p-4 sm:p-5">
-      <div className="flex items-start justify-between gap-2">
-        <p className="text-[12.5px] font-semibold" style={{ color: "var(--ink-3)" }}>
-          {label}
-        </p>
-        <span
-          className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
-          style={{ background: soft, color }}
-          aria-hidden="true"
-        >
-          {icon}
-        </span>
-      </div>
-      <p
-        className="mt-3 text-[26px] sm:text-[30px] font-extrabold tabular-nums leading-none tracking-tight"
-        style={{ color: "var(--ink)" }}
-      >
-        {value}
-      </p>
-      <p className="mt-2 text-[11.5px] sm:text-[12px] font-semibold" style={{ color: "var(--ink-3)" }}>
-        {foot}
-      </p>
-    </div>
-  );
-}
-
-// 快捷管理入口：整卡可点（stretch-link），图标 + 标题 + 描述 + 箭头
-function QuickLink({
-  href,
-  icon,
-  title,
-  desc,
-  soft,
-  color,
-}: {
-  href: string;
-  icon: React.ReactNode;
-  title: string;
-  desc: string;
-  soft: string;
-  color: string;
-}) {
-  return (
-    <Link href={href} className="panel hover-lift relative block p-5 group">
-      <div className="flex items-start gap-3.5">
-        <span
-          className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
-          style={{ background: soft, color }}
-          aria-hidden="true"
-        >
-          {icon}
-        </span>
-        <div className="min-w-0 flex-1">
-          <p className="text-[15px] font-extrabold" style={{ color: "var(--ink)" }}>
-            {title}
-          </p>
-          <p className="meta mt-1 text-[12.5px] leading-relaxed">{desc}</p>
-        </div>
-        <ChevronRight
-          size={17}
-          className="shrink-0 mt-1 transition-transform group-hover:translate-x-0.5"
-          style={{ color: "var(--ink-3)" }}
-        />
-      </div>
-    </Link>
-  );
-}
-
 function PanelHead({ title, extra }: { title: string; extra?: string }) {
   return (
     <div
@@ -138,12 +53,86 @@ function PanelHead({ title, extra }: { title: string; extra?: string }) {
   );
 }
 
+/** 待办工作区：待审帖子 / 评论数量，整块进入审核页 */
+function PendingWorkPanel({ counts }: { counts: PendingCounts }) {
+  const total = counts.posts + counts.comments;
+  const idle = total === 0;
+
+  return (
+    <Link
+      href="/admin/moderation"
+      className="panel hover-lift relative block p-4 sm:p-5 mb-4 group"
+    >
+      <div className="flex items-start gap-3.5">
+        <span
+          className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
+          style={{
+            background: idle ? "var(--tint)" : "var(--ok-soft)",
+            color: idle ? "var(--ink-3)" : "var(--ok)",
+          }}
+          aria-hidden="true"
+        >
+          <ClipboardCheck size={20} />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 flex-wrap">
+            <p className="text-[15px] font-extrabold" style={{ color: "var(--ink)" }}>
+              内容审核
+            </p>
+            {idle ? (
+              <span
+                className="text-[11.5px] font-semibold px-2 py-0.5 rounded-full"
+                style={{ background: "var(--tint)", color: "var(--ink-3)" }}
+              >
+                暂无待审
+              </span>
+            ) : (
+              <span
+                className="text-[11.5px] font-semibold px-2 py-0.5 rounded-full tabular-nums"
+                style={{ background: "var(--ok-soft)", color: "var(--ok)" }}
+              >
+                {fmt(total)} 项待处理
+              </span>
+            )}
+          </div>
+          <div className="mt-3 flex flex-wrap gap-3 sm:gap-5">
+            <span className="inline-flex items-center gap-1.5 text-[13px]" style={{ color: "var(--ink-2)" }}>
+              <FileText size={14} style={{ color: "var(--ink-3)" }} aria-hidden="true" />
+              待审帖子
+              <strong className="tabular-nums font-extrabold" style={{ color: "var(--ink)" }}>
+                {fmt(counts.posts)}
+              </strong>
+            </span>
+            <span className="inline-flex items-center gap-1.5 text-[13px]" style={{ color: "var(--ink-2)" }}>
+              <MessageSquareText size={14} style={{ color: "var(--ink-3)" }} aria-hidden="true" />
+              待审评论
+              <strong className="tabular-nums font-extrabold" style={{ color: "var(--ink)" }}>
+                {fmt(counts.comments)}
+              </strong>
+            </span>
+          </div>
+        </div>
+        <ChevronRight
+          size={18}
+          className="shrink-0 mt-1 transition-transform group-hover:translate-x-0.5"
+          style={{ color: "var(--ink-3)" }}
+        />
+      </div>
+    </Link>
+  );
+}
+
 export default async function AdminDashboardPage() {
   const cookie = authCookieHeader(await cookies());
-  // 与 layout 的 /me 请求共享 React cache；概览失败降级，不阻塞仪表盘骨架
-  const [me, overview] = await Promise.all([
-    getMeCached(cookie || undefined),
+  const me = await getMeCached(cookie || undefined);
+  const canMod = canModerateAny(me.user);
+  const canUsers = isSuperOrOwner(me.user?.role);
+
+  const [overview, pendingCounts] = await Promise.all([
     fetchOverview(cookie).catch(() => null),
+    canMod
+      ? fetchAdminPendingCounts(cookie).catch(() => ({ posts: 0, comments: 0 }))
+      : Promise.resolve(null),
   ]);
 
   const now = new Date();
@@ -162,100 +151,24 @@ export default async function AdminDashboardPage() {
 
   return (
     <div>
-      {/* 页头 */}
       <div className="mb-5">
-        <h1 className="text-[22px] sm:text-[26px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+        <h1
+          className="text-[22px] sm:text-[26px] font-extrabold tracking-tight"
+          style={{ color: "var(--ink)" }}
+        >
           {greeting(now.getHours())}，{me.user?.nickname}
         </h1>
-        <p className="meta mt-1.5 text-[12.5px]">{dateLabel} · 这里是站点运营全貌</p>
+        <p className="meta mt-1.5 text-[12.5px]">{dateLabel} · 站点管理</p>
       </div>
 
-      {/* 统计 Bento */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
-        <StatCard
-          label="注册用户"
-          value={stats ? fmt(stats.users) : "—"}
-          foot={stats ? `今日新增 +${fmt(stats.today_users)}` : "统计暂不可用"}
-          icon={<Users size={16} />}
-          color="var(--accent)"
-          soft="var(--accent-soft)"
-        />
-        <StatCard
-          label="话题总数"
-          value={stats ? fmt(stats.posts) : "—"}
-          foot={stats ? `今日新发 +${fmt(stats.today_posts)}` : "统计暂不可用"}
-          icon={<PenLine size={16} />}
-          color="var(--clay)"
-          soft="var(--clay-soft)"
-        />
-        <StatCard
-          label="回复总数"
-          value={stats ? fmt(stats.comments) : "—"}
-          foot={stats ? `今日新增 +${fmt(stats.today_comments)}` : "统计暂不可用"}
-          icon={<MessageCircle size={16} />}
-          color="var(--ok)"
-          soft="var(--ok-soft)"
-        />
-        <StatCard
-          label="在线用户"
-          value={stats ? fmt(stats.online) : "—"}
-          foot={stats ? `近 5 分钟活跃 · 峰值 ${fmt(stats.peak_online)}` : "统计暂不可用"}
-          icon={<Activity size={16} />}
-          color="var(--gold)"
-          soft="var(--gold-soft)"
-        />
-      </div>
+      {canMod && pendingCounts && <PendingWorkPanel counts={pendingCounts} />}
 
-      {/* 快捷入口（按角色权限过滤，与侧边栏一致；后端路由另有守卫） */}
-      <h2 className="sr-only">快捷管理</h2>
-      <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-4 mt-4">
-        {canModerateAny(me.user) && (
-          <QuickLink
-            href="/admin/moderation"
-            icon={<ClipboardCheck size={18} />}
-            title="内容审核"
-            desc="审核普通用户提交的帖子与评论，通过后内容公开可见"
-            soft="var(--ok-soft)"
-            color="var(--ok)"
-          />
-        )}
-        {isAdminOrAbove(me.user?.role) && (
-          <QuickLink
-            href="/admin/announcements"
-            icon={<Megaphone size={18} />}
-            title="公告管理"
-            desc="发布、编辑与下线站点公告，支持标签颜色与草稿状态"
-            soft="var(--clay-soft)"
-            color="var(--clay)"
-          />
-        )}
-        {isSuperOrOwner(me.user?.role) && (
-          <QuickLink
-            href="/admin/users"
-            icon={<Users size={18} />}
-            title="用户权限"
-            desc="查看全站成员，授予管理角色与板块授权，封禁违规账号"
-            soft="var(--accent-soft)"
-            color="var(--accent)"
-          />
-        )}
-        {isSuperOrOwner(me.user?.role) && (
-          <QuickLink
-            href="/admin/appearance"
-            icon={<Palette size={18} />}
-            title="外观设置"
-            desc="配置全站主题强调色，实时预览后保存并对所有用户生效"
-            soft="var(--gold-soft)"
-            color="var(--gold)"
-          />
-        )}
-      </div>
-
-      {/* 成员与板块 */}
-      <div className="grid lg:grid-cols-2 gap-4 mt-4 items-start">
-        {/* 最新注册成员 */}
+      <div className="grid lg:grid-cols-2 gap-4 items-start">
         <div className="panel overflow-hidden">
-          <PanelHead title="最新注册成员" extra={stats ? `共 ${fmt(stats.users)} 人` : undefined} />
+          <PanelHead
+            title="最新注册成员"
+            extra={stats ? `共 ${fmt(stats.users)} 人` : undefined}
+          />
           {newUsers.length === 0 ? (
             <p className="meta text-center py-14 text-[13px]">暂无成员数据</p>
           ) : (
@@ -266,12 +179,22 @@ export default async function AdminDashboardPage() {
                 className="flex items-center gap-3 px-4 sm:px-5 py-3 transition-colors hover:bg-[var(--panel-2)]"
                 style={{ borderTop: "1px solid var(--line)" }}
               >
-                <Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={34} />
+                <Avatar
+                  name={u.nickname || u.username}
+                  src={u.avatar || undefined}
+                  size={34}
+                />
                 <span className="min-w-0 flex-1 leading-tight">
-                  <span className="block text-[13.5px] font-bold truncate" style={{ color: "var(--ink)" }}>
+                  <span
+                    className="block text-[13.5px] font-bold truncate"
+                    style={{ color: "var(--ink)" }}
+                  >
                     {u.nickname}
                   </span>
-                  <span className="block text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
+                  <span
+                    className="block text-[11.5px] truncate"
+                    style={{ color: "var(--ink-3)" }}
+                  >
                     @{u.username}
                   </span>
                 </span>
@@ -285,9 +208,22 @@ export default async function AdminDashboardPage() {
               </Link>
             ))
           )}
+          {canUsers && (
+            <Link
+              href="/admin/users"
+              className="flex items-center justify-center gap-1.5 px-4 py-3 text-[13px] font-semibold transition-colors hover:bg-[var(--panel-2)]"
+              style={{
+                borderTop: "1px solid var(--line)",
+                color: "var(--accent)",
+              }}
+            >
+              <Users size={14} aria-hidden="true" />
+              前往用户权限
+              <ChevronRight size={14} aria-hidden="true" />
+            </Link>
+          )}
         </div>
 
-        {/* 板块分布 */}
         <div className="panel overflow-hidden">
           <PanelHead title="板块话题分布" extra={`${boards.length} 个板块`} />
           {topBoards.length === 0 ? (
@@ -309,14 +245,19 @@ export default async function AdminDashboardPage() {
                 </span>
                 <span className="min-w-0 flex-1">
                   <span className="flex items-center justify-between gap-2">
-                    <span className="text-[13.5px] font-bold truncate" style={{ color: "var(--ink)" }}>
+                    <span
+                      className="text-[13.5px] font-bold truncate"
+                      style={{ color: "var(--ink)" }}
+                    >
                       {b.name}
                     </span>
-                    <span className="text-[12px] font-bold tabular-nums shrink-0" style={{ color: "var(--ink-2)" }}>
+                    <span
+                      className="text-[12px] font-bold tabular-nums shrink-0"
+                      style={{ color: "var(--ink-2)" }}
+                    >
                       {fmt(b.post_count)}
                     </span>
                   </span>
-                  {/* 相对占比迷你条（纯装饰） */}
                   <span
                     className="block mt-1.5 h-1 rounded-full overflow-hidden"
                     style={{ background: "var(--tint)" }}

frontend/app/admin/users/UsersAdmin.tsx

@@ -9,6 +9,7 @@ import {
   ChevronRight,
   Clock,
   ExternalLink,
+  FolderSearch,
   History,
   Loader2,
   Monitor,
@@ -31,9 +32,10 @@ import {
   type Board,
   type LoginLog,
 } from "@/lib/api";
-import { ROLES } from "@/lib/roles";
+import { isOwner, ROLES } from "@/lib/roles";
 import { formatDate, formatRelative } from "@/lib/format";
 import { toast } from "@/lib/toast";
+import { realtime } from "@/lib/realtime";
 import Avatar from "@/components/Avatar";
 import RoleBadge from "@/components/RoleBadge";
 
@@ -156,6 +158,24 @@ export default function UsersAdmin({
       .catch(() => {});
   }, []);
 
+  // 在线状态实时化：WS hello 全量快照校正当前页绿点，之后 presence:update 增量跳变；
+  // 后端在线判定（有活跃 WS 连接）比列表接口的 5 分钟 last_seen 启发式更精确
+  useEffect(() => {
+    const reconcile = (ids: ReadonlySet<number>) => {
+      if (ids.size === 0) return;
+      setUsers((prev) =>
+        prev.map((u) => (u.online === ids.has(u.id) ? u : { ...u, online: ids.has(u.id) }))
+      );
+    };
+    reconcile(realtime.getOnlineIds());
+    const off = realtime.onPresence(({ user_id: id, online }) => {
+      setUsers((prev) =>
+        prev.map((u) => (u.id === id && u.online !== online ? { ...u, online } : u))
+      );
+    });
+    return off;
+  }, []);
+
   const load = useCallback(async (opts: { page: number; filter: UserFilter; q: string }) => {
     const seq = ++seqRef.current;
     setLoading(true);
@@ -319,10 +339,24 @@ export default function UsersAdmin({
   );
 
   const renderActions = (u: AdminUser, isSelf: boolean) => {
-    // 站长账号：任何人不可操作（后端 403 兜底），仅保留主页入口与站长标识
+    const canAudit = isOwner(currentUserRole);
+    const auditBtn = canAudit ? (
+      <Link
+        href={`/admin/users/${u.id}`}
+        title="内容档案"
+        aria-label={`查看 ${u.username} 的内容档案`}
+        className={ghostBtn}
+        style={{ color: "var(--accent)" }}
+      >
+        <FolderSearch size={15} />
+      </Link>
+    ) : null;
+
+    // 站长账号：不可改角色/封禁，保留主页与（站长自己的）内容档案
     if (u.role === ROLES.OWNER) {
       return (
         <div className="flex items-center gap-1 justify-end">
+          {auditBtn}
           <Link
             href={`/u/${u.id}`}
             title="查看个人主页"
@@ -336,17 +370,21 @@ export default function UsersAdmin({
     }
     if (isSelf) {
       return (
-        <span
-          className="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-bold whitespace-nowrap"
-          style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
-        >
-          当前账号
-        </span>
+        <div className="flex items-center gap-1 justify-end">
+          {auditBtn}
+          <span
+            className="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-bold whitespace-nowrap"
+            style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
+          >
+            当前账号
+          </span>
+        </div>
       );
     }
     const busy = actingId === u.id;
     return (
       <div className="flex items-center gap-1 justify-end">
+        {auditBtn}
         <button
           type="button"
           title="登录历史"
@@ -623,7 +661,11 @@ export default function UsersAdmin({
                     </div>
                     <div className="min-w-0">{renderLastLogin(u)}</div>
                     <div className="hidden xl:block">
-                      <p className="text-[12.5px] font-semibold tabular-nums" style={{ color: "var(--ink-2)" }}>
+                      <p
+                        className="text-[12.5px] font-semibold tabular-nums"
+                        style={{ color: "var(--ink-2)" }}
+                        title="仅统计已发布内容；驳回/删除见内容档案"
+                      >
                         帖 {u.post_count} · 评 {u.comment_count}
                       </p>
                       <p className="text-[11px] tabular-nums" style={{ color: "var(--ink-3)" }}>
@@ -661,7 +703,11 @@ export default function UsersAdmin({
                       </div>
                       {renderStatus(u)}
                     </div>
-                    <p className="mt-2.5 text-[11.5px] tabular-nums" style={{ color: "var(--ink-3)" }}>
+                    <p
+                      className="mt-2.5 text-[11.5px] tabular-nums"
+                      style={{ color: "var(--ink-3)" }}
+                      title="仅统计已发布内容；驳回/删除见内容档案"
+                    >
                       帖 {u.post_count} · 评 {u.comment_count} · 注册 {formatDate(u.created_at)}
                     </p>
                     <p className="mt-1 text-[11.5px] tabular-nums flex items-center gap-1.5" style={{ color: "var(--ink-3)" }}>
@@ -671,37 +717,49 @@ export default function UsersAdmin({
                         {u.last_login_at ? ` · ${formatRelative(u.last_login_at)}` : ""}
                       </button>
                     </p>
-                    {!isSelf && u.role !== ROLES.OWNER && (
-                      <div className="flex items-center gap-2 mt-3 flex-wrap">
+                    <div className="flex items-center gap-2 mt-3 flex-wrap">
+                      {isOwner(currentUserRole) && (
+                        <Link href={`/admin/users/${u.id}`} className="btn btn-line btn-sm">
+                          <FolderSearch size={13} /> 内容档案
+                        </Link>
+                      )}
+                      {(isSelf || u.role === ROLES.OWNER) && (
                         <Link href={`/u/${u.id}`} className="btn btn-line btn-sm">
                           <ExternalLink size={13} /> 主页
                         </Link>
-                        <button
-                          type="button"
-                          disabled={actingId === u.id}
-                          onClick={() => setRoleTarget(u)}
-                          className="btn btn-line btn-sm"
-                          style={u.role !== ROLES.USER ? { color: "var(--accent)", borderColor: "var(--accent)" } : undefined}
-                        >
-                          <ShieldCheck size={13} />
-                          角色权限
-                        </button>
-                        <button
-                          type="button"
-                          disabled={actingId === u.id}
-                          onClick={() => setBanTarget(u)}
-                          className="btn btn-sm"
-                          style={
-                            u.banned
-                              ? { background: "var(--ok-soft)", color: "var(--ok)" }
-                              : { background: "var(--danger-soft)", color: "var(--danger)" }
-                          }
-                        >
-                          {u.banned ? <RotateCcw size={13} /> : <Ban size={13} />}
-                          {u.banned ? "解封" : "封禁"}
-                        </button>
-                      </div>
-                    )}
+                      )}
+                      {!isSelf && u.role !== ROLES.OWNER && (
+                        <>
+                          <Link href={`/u/${u.id}`} className="btn btn-line btn-sm">
+                            <ExternalLink size={13} /> 主页
+                          </Link>
+                          <button
+                            type="button"
+                            disabled={actingId === u.id}
+                            onClick={() => setRoleTarget(u)}
+                            className="btn btn-line btn-sm"
+                            style={u.role !== ROLES.USER ? { color: "var(--accent)", borderColor: "var(--accent)" } : undefined}
+                          >
+                            <ShieldCheck size={13} />
+                            角色权限
+                          </button>
+                          <button
+                            type="button"
+                            disabled={actingId === u.id}
+                            onClick={() => setBanTarget(u)}
+                            className="btn btn-sm"
+                            style={
+                              u.banned
+                                ? { background: "var(--ok-soft)", color: "var(--ok)" }
+                                : { background: "var(--danger-soft)", color: "var(--danger)" }
+                            }
+                          >
+                            {u.banned ? <RotateCcw size={13} /> : <Ban size={13} />}
+                            {u.banned ? "解封" : "封禁"}
+                          </button>
+                        </>
+                      )}
+                    </div>
                   </div>
                 </div>
               );

frontend/app/admin/users/[id]/UserAuditClient.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  ChevronLeft,
+  ChevronRight,
+  ExternalLink,
+  FileText,
+  Loader2,
+  MessageCircle,
+  MessagesSquare,
+} from "lucide-react";
+import {
+  apiAdminUserAuditComments,
+  apiAdminUserAuditMessages,
+  apiAdminUserAuditPosts,
+  type AdminAuditCommentItem,
+  type AdminAuditMessageItem,
+  type AdminAuditPostItem,
+  type AdminUserAuditProfile,
+} from "@/lib/api";
+import { formatDate, formatRelative } from "@/lib/format";
+import Avatar from "@/components/Avatar";
+import RoleBadge from "@/components/RoleBadge";
+
+type TabKey = "posts" | "comments" | "messages";
+
+const TABS: { key: TabKey; label: string; icon: React.ReactNode }[] = [
+  { key: "posts", label: "帖子", icon: <FileText size={14} /> },
+  { key: "comments", label: "评论", icon: <MessageCircle size={14} /> },
+  { key: "messages", label: "私信与群消息", icon: <MessagesSquare size={14} /> },
+];
+
+const PAGE_SIZE = 20;
+
+function StatusChip({
+  status,
+  deleted,
+  recalled,
+}: {
+  status?: string;
+  deleted?: boolean;
+  recalled?: boolean;
+}) {
+  const chips: { label: string; color: string; soft: string }[] = [];
+  if (deleted) chips.push({ label: "已删除", color: "var(--danger)", soft: "var(--danger-soft)" });
+  if (recalled) chips.push({ label: "已撤回", color: "var(--ink-3)", soft: "var(--tint)" });
+  if (status === "pending") chips.push({ label: "待审", color: "var(--gold)", soft: "var(--gold-soft)" });
+  if (status === "rejected") chips.push({ label: "已驳回", color: "var(--danger)", soft: "var(--danger-soft)" });
+  if (status === "published" && !deleted) {
+    chips.push({ label: "已发布", color: "var(--ok)", soft: "var(--ok-soft)" });
+  }
+  if (chips.length === 0 && !recalled) {
+    chips.push({ label: "正常", color: "var(--ink-3)", soft: "var(--tint)" });
+  }
+  return (
+    <span className="inline-flex flex-wrap gap-1">
+      {chips.map((c) => (
+        <span
+          key={c.label}
+          className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-bold"
+          style={{ background: c.soft, color: c.color }}
+        >
+          {c.label}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+function Pager({
+  page,
+  total,
+  onChange,
+  loading,
+}: {
+  page: number;
+  total: number;
+  onChange: (p: number) => void;
+  loading?: boolean;
+}) {
+  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  if (pages <= 1) return null;
+  return (
+    <div className="flex items-center justify-center gap-2 py-3">
+      <button
+        type="button"
+        disabled={page <= 1 || loading}
+        onClick={() => onChange(page - 1)}
+        className="btn btn-line btn-sm"
+        aria-label="上一页"
+      >
+        <ChevronLeft size={14} />
+      </button>
+      <span className="text-[12.5px] tabular-nums meta">
+        {page} / {pages}
+      </span>
+      <button
+        type="button"
+        disabled={page >= pages || loading}
+        onClick={() => onChange(page + 1)}
+        className="btn btn-line btn-sm"
+        aria-label="下一页"
+      >
+        <ChevronRight size={14} />
+      </button>
+    </div>
+  );
+}
+
+export default function UserAuditClient({
+  userId,
+  initial,
+}: {
+  userId: number;
+  initial: AdminUserAuditProfile;
+}) {
+  const [profile] = useState(initial);
+  const [tab, setTab] = useState<TabKey>("posts");
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [posts, setPosts] = useState<AdminAuditPostItem[]>([]);
+  const [comments, setComments] = useState<AdminAuditCommentItem[]>([]);
+  const [messages, setMessages] = useState<AdminAuditMessageItem[]>([]);
+  const [total, setTotal] = useState(0);
+
+  const u = profile.user;
+
+  const load = useCallback(
+    async (t: TabKey, p: number) => {
+      setLoading(true);
+      setError("");
+      try {
+        if (t === "posts") {
+          const res = await apiAdminUserAuditPosts(userId, p);
+          setPosts(res.items || []);
+          setTotal(res.total);
+        } else if (t === "comments") {
+          const res = await apiAdminUserAuditComments(userId, p);
+          setComments(res.items || []);
+          setTotal(res.total);
+        } else {
+          const res = await apiAdminUserAuditMessages(userId, p);
+          setMessages(res.items || []);
+          setTotal(res.total);
+        }
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "加载失败");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [userId]
+  );
+
+  useEffect(() => {
+    load(tab, page);
+  }, [tab, page, load]);
+
+  const switchTab = (t: TabKey) => {
+    setTab(t);
+    setPage(1);
+  };
+
+  const tabCount = (t: TabKey) => {
+    if (t === "posts") return profile.posts_total;
+    if (t === "comments") return profile.comments_total;
+    return profile.messages_total;
+  };
+
+  return (
+    <div>
+      <Link
+        href="/admin/users"
+        className="inline-flex items-center gap-1.5 text-[13px] font-semibold mb-4 hover:opacity-80"
+        style={{ color: "var(--accent)" }}
+      >
+        <ArrowLeft size={14} />
+        返回用户列表
+      </Link>
+
+      <div className="panel p-4 sm:p-5 mb-4">
+        <div className="flex items-start gap-3.5">
+          <Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={48} />
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h1
+                className="text-[18px] sm:text-[20px] font-extrabold truncate"
+                style={{ color: "var(--ink)" }}
+              >
+                {u.nickname}
+              </h1>
+              <RoleBadge role={u.role} />
+              {u.banned && (
+                <span
+                  className="text-[11px] font-bold px-2 py-0.5 rounded-full"
+                  style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
+                >
+                  已封禁
+                </span>
+              )}
+            </div>
+            <p className="meta text-[12.5px] mt-0.5 truncate">@{u.username}</p>
+            <p className="meta text-[12px] mt-2">
+              注册于 {formatDate(u.created_at)} · 已发布帖 {profile.published_posts} / 评{" "}
+              {profile.published_comments}
+            </p>
+          </div>
+          <Link
+            href={`/u/${u.id}`}
+            className="btn btn-line btn-sm gap-1.5 shrink-0"
+            target="_blank"
+          >
+            <ExternalLink size={13} />
+            主页
+          </Link>
+        </div>
+        <div
+          className="mt-4 grid grid-cols-3 gap-2 sm:gap-3 pt-4"
+          style={{ borderTop: "1px solid var(--line)" }}
+        >
+          {[
+            { label: "全部帖子", value: profile.posts_total },
+            { label: "全部评论", value: profile.comments_total },
+            { label: "全部消息", value: profile.messages_total },
+          ].map((c) => (
+            <div key={c.label} className="text-center">
+              <p
+                className="text-[20px] font-extrabold tabular-nums leading-none"
+                style={{ color: "var(--ink)" }}
+              >
+                {c.value.toLocaleString("zh-CN")}
+              </p>
+              <p className="meta text-[11.5px] mt-1.5">{c.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className="flex gap-1 mb-3 overflow-x-auto"
+        style={{ borderBottom: "1px solid var(--line)" }}
+      >
+        {TABS.map((t) => {
+          const active = tab === t.key;
+          return (
+            <button
+              key={t.key}
+              type="button"
+              onClick={() => switchTab(t.key)}
+              className="inline-flex items-center gap-1.5 px-3 py-2.5 text-[13px] font-bold whitespace-nowrap -mb-px"
+              style={{
+                color: active ? "var(--accent)" : "var(--ink-3)",
+                borderBottom: active ? "2px solid var(--accent)" : "2px solid transparent",
+              }}
+            >
+              {t.icon}
+              {t.label}
+              <span className="tabular-nums font-semibold opacity-70">
+                {tabCount(t.key).toLocaleString("zh-CN")}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="panel overflow-hidden">
+        {error && (
+          <p className="text-center py-10 text-[13px]" style={{ color: "var(--danger)" }}>
+            {error}
+          </p>
+        )}
+        {!error && loading && posts.length + comments.length + messages.length === 0 && (
+          <div className="flex justify-center py-14" style={{ color: "var(--ink-3)" }}>
+            <Loader2 size={22} className="animate-spin" />
+          </div>
+        )}
+        {!error && !loading && total === 0 && (
+          <p className="meta text-center py-14 text-[13px]">该分类暂无内容</p>
+        )}
+
+        {tab === "posts" &&
+          posts.map((p) => (
+            <div
+              key={p.id}
+              className="px-4 sm:px-5 py-3.5"
+              style={{ borderTop: "1px solid var(--line)" }}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2 flex-wrap mb-1">
+                    <StatusChip status={p.status} deleted={p.deleted} />
+                    {p.board_name && (
+                      <span className="text-[11.5px] meta truncate">{p.board_name}</span>
+                    )}
+                  </div>
+                  {p.deleted ? (
+                    <p className="text-[14px] font-bold" style={{ color: "var(--ink-3)" }}>
+                      {p.title || "（无标题）"}
+                    </p>
+                  ) : (
+                    <Link
+                      href={`/post/${p.id}`}
+                      className="text-[14px] font-bold hover:underline"
+                      style={{ color: "var(--ink)" }}
+                    >
+                      {p.title || "（无标题）"}
+                    </Link>
+                  )}
+                  {p.content && (
+                    <p className="meta text-[12.5px] mt-1 line-clamp-2 leading-relaxed">
+                      {p.content}
+                    </p>
+                  )}
+                </div>
+                <span className="shrink-0 text-[11.5px] meta tabular-nums">
+                  {formatRelative(p.created_at)}
+                </span>
+              </div>
+            </div>
+          ))}
+
+        {tab === "comments" &&
+          comments.map((c) => (
+            <div
+              key={c.id}
+              className="px-4 sm:px-5 py-3.5"
+              style={{ borderTop: "1px solid var(--line)" }}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2 flex-wrap mb-1">
+                    <StatusChip status={c.status} deleted={c.deleted} />
+                    {c.deleted ? (
+                      <span className="text-[11.5px] meta">帖子 #{c.post_id}</span>
+                    ) : (
+                      <Link
+                        href={`/post/${c.post_id}`}
+                        className="text-[11.5px] font-semibold hover:underline"
+                        style={{ color: "var(--accent)" }}
+                      >
+                        帖子 #{c.post_id}
+                      </Link>
+                    )}
+                  </div>
+                  <p
+                    className="text-[13.5px] leading-relaxed whitespace-pre-wrap break-words"
+                    style={{ color: c.deleted ? "var(--ink-3)" : "var(--ink)" }}
+                  >
+                    {c.content || "（空）"}
+                  </p>
+                </div>
+                <span className="shrink-0 text-[11.5px] meta tabular-nums">
+                  {formatRelative(c.created_at)}
+                </span>
+              </div>
+            </div>
+          ))}
+
+        {tab === "messages" &&
+          messages.map((m) => (
+            <div
+              key={m.id}
+              className="px-4 sm:px-5 py-3.5"
+              style={{ borderTop: "1px solid var(--line)" }}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2 flex-wrap mb-1">
+                    <StatusChip deleted={m.deleted} recalled={m.recalled} />
+                    <span className="text-[11.5px] meta truncate">
+                      {m.room_name}
+                      {m.room_type === "direct" ? " · 私聊" : m.room_type === "group" ? " · 群聊" : ""}
+                    </span>
+                  </div>
+                  <p
+                    className="text-[13.5px] leading-relaxed whitespace-pre-wrap break-words"
+                    style={{
+                      color: m.recalled || m.deleted ? "var(--ink-3)" : "var(--ink)",
+                      fontStyle: m.recalled ? "italic" : undefined,
+                    }}
+                  >
+                    {m.content || "（空）"}
+                  </p>
+                </div>
+                <span className="shrink-0 text-[11.5px] meta tabular-nums">
+                  {formatRelative(m.created_at)}
+                </span>
+              </div>
+            </div>
+          ))}
+
+        <Pager page={page} total={total} onChange={setPage} loading={loading} />
+      </div>
+    </div>
+  );
+}

frontend/app/admin/users/[id]/page.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { cookies } from "next/headers";
+import { authCookieHeader } from "@/lib/cookies";
+import { fetchAdminUserAudit } from "@/lib/api";
+import { getMeCached } from "@/lib/serverData";
+import { isOwner, isSuperOrOwner } from "@/lib/roles";
+import Forbidden from "../../Forbidden";
+import UserAuditClient from "./UserAuditClient";
+
+export const metadata: Metadata = {
+  title: "用户内容档案",
+};
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function AdminUserAuditPage({ params }: PageProps) {
+  const { id: idRaw } = await params;
+  const userId = parseInt(idRaw, 10);
+  if (!Number.isFinite(userId) || userId <= 0) {
+    return <Forbidden text="无效的用户 ID。" />;
+  }
+
+  const cookie = authCookieHeader(await cookies());
+  const me = await getMeCached(cookie || undefined);
+
+  if (!me.user || !isSuperOrOwner(me.user.role)) {
+    return <Forbidden text="用户与角色权限仅超级管理员和站长可操作。" />;
+  }
+  if (!isOwner(me.user.role)) {
+    return <Forbidden text="用户内容档案仅站长可查看。" />;
+  }
+
+  let profile;
+  try {
+    profile = await fetchAdminUserAudit(userId, cookie || undefined);
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : "获取用户档案失败";
+    return <Forbidden text={msg} />;
+  }
+
+  return <UserAuditClient userId={userId} initial={profile} />;
+}

frontend/app/board/[id]/page.tsx

@@ -4,9 +4,11 @@ import { cookies } from "next/headers";
 import { PenSquare, MessagesSquare, ChevronRight } from "lucide-react";
 import { fetchPosts, fetchBoards } from "@/lib/api";
 import { authCookieHeader } from "@/lib/cookies";
+import { getMeCached } from "@/lib/serverData";
 import Pagination from "@/components/Pagination";
 import PostRow from "@/components/PostRow";
 import PinnedPosts from "@/components/PinnedPosts";
+import FeedNewTip from "@/components/home/FeedNewTip";
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -28,12 +30,14 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
   const { page: pageStr } = await searchParams;
   const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
   const cookie = authCookieHeader(await cookies());
-  const [postsData, boardsData] = await Promise.all([
+  const [postsData, boardsData, me] = await Promise.all([
     fetchPosts(page, 20, Number(id), "latest", "", false, cookie),
     fetchBoards(),
+    getMeCached(cookie || undefined),
   ]);
   const boardIndex = boardsData.boards.findIndex((b) => b.id === Number(id));
   const board = boardIndex >= 0 ? boardsData.boards[boardIndex] : null;
+  const user = me.user;
 
   // 第一页：置顶帖独立成区，列表只保留非置顶
   const pinned = page === 1 ? postsData.posts.filter((p) => p.pinned > 0) : [];
@@ -88,6 +92,16 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
                 <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>全部讨论</span>
                 <span className="meta text-xs">第 {page} 页</span>
               </div>
+              {user && (
+                <div className="pt-2.5">
+                  <FeedNewTip
+                    sort="latest"
+                    boardId={Number(id)}
+                    page={page}
+                    userId={user.id}
+                  />
+                </div>
+              )}
               {rows.map((post, i) => (
                 <PostRow key={post.id} post={post} index={i} />
               ))}

frontend/app/chat/ChatShell.tsx

@@ -0,0 +1,706 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  Search,
+  Plus,
+  MessageSquare,
+  Users,
+  X,
+  Pin,
+} from "lucide-react";
+import {
+  apiListChatRooms,
+  apiSearchChatUsers,
+  apiOpenDirectChat,
+  apiCreateChatRoom,
+  apiPinChatRoom,
+  type ChatRoomView,
+  type User,
+} from "@/lib/api";
+import { realtime, RT_CHAT_UNREAD, RT_CHAT_MEMBERSHIP } from "@/lib/realtime";
+import type { RtChatUnreadData, RtChatMembershipData } from "@/lib/realtime";
+import { toast } from "@/lib/toast";
+import Avatar from "@/components/Avatar";
+import ContextMenu, { type CtxMenuItem } from "@/components/ContextMenu";
+
+function roomTitle(room: ChatRoomView) {
+  if (room.room_type === "direct") {
+    return room.peer?.nickname || room.peer?.username || room.name || "私聊";
+  }
+  return room.name || "未命名群";
+}
+
+function roomPreview(room: ChatRoomView) {
+  const lm = room.last_message;
+  if (!lm) return room.description || "暂无消息";
+  if (lm.recalled_at) {
+    if (lm.recalled_by && lm.recalled_by !== lm.sender_id) {
+      return "管理员撤回了此消息";
+    }
+    return "此消息已撤回";
+  }
+  const who =
+    room.room_type === "direct"
+      ? ""
+      : `${lm.sender?.nickname || lm.sender?.username || ""}：`;
+  return `${who}${lm.content || ""}`.slice(0, 48);
+}
+
+function formatTime(dateStr?: string) {
+  if (!dateStr) return "";
+  const d = new Date(dateStr);
+  const now = new Date();
+  const sameDay =
+    d.getFullYear() === now.getFullYear() &&
+    d.getMonth() === now.getMonth() &&
+    d.getDate() === now.getDate();
+  if (sameDay) {
+    return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  }
+  return `${d.getMonth() + 1}/${d.getDate()}`;
+}
+
+/** 与后端一致：大厅强制置顶 > 个人置顶 > last_message_id */
+function sortRooms(list: ChatRoomView[]): ChatRoomView[] {
+  return [...list].sort((a, b) => {
+    const aHall = !!a.is_default;
+    const bHall = !!b.is_default;
+    if (aHall !== bHall) return aHall ? -1 : 1;
+    const aPin = !aHall && !!a.pinned;
+    const bPin = !bHall && !!b.pinned;
+    if (aPin !== bPin) return aPin ? -1 : 1;
+    if (a.last_message_id !== b.last_message_id) {
+      return (b.last_message_id || 0) - (a.last_message_id || 0);
+    }
+    return b.id - a.id;
+  });
+}
+
+function isPinnedView(room: ChatRoomView) {
+  return !!room.is_default || !!room.pinned || !!room.pin_forced;
+}
+
+/**
+ * PC 端飞书式消息壳：左会话列表 + 右会话区；移动端列表/会话互斥全屏。
+ */
+export default function ChatShell({
+  meId,
+  initialRooms,
+  activeRoomId = null,
+  children,
+}: {
+  meId: number;
+  initialRooms: ChatRoomView[];
+  activeRoomId?: number | null;
+  children?: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [rooms, setRooms] = useState<ChatRoomView[]>(initialRooms);
+  const [query, setQuery] = useState("");
+  const [userHits, setUserHits] = useState<User[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [showCreate, setShowCreate] = useState(false);
+  const [ctxMenu, setCtxMenu] = useState<{
+    x: number;
+    y: number;
+    room: ChatRoomView;
+  } | null>(null);
+  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    setRooms(sortRooms(initialRooms));
+  }, [initialRooms]);
+
+  const refreshRooms = useCallback(async () => {
+    try {
+      const res = await apiListChatRooms(1, 50, "", "joined");
+      setRooms(sortRooms(res.rooms || []));
+    } catch {
+      // 静默
+    }
+  }, []);
+
+  // 每次进入消息壳都用 HTTP 拉最新排序（避免首页 Link 预取/路由缓存导致新消息会话不置顶）
+  useEffect(() => {
+    refreshRooms();
+  }, [refreshRooms, activeRoomId]);
+
+  // 从其他标签页切回时也对账一次
+  useEffect(() => {
+    const onVisible = () => {
+      if (document.visibilityState === "visible") refreshRooms();
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => document.removeEventListener("visibilitychange", onVisible);
+  }, [refreshRooms]);
+
+  // 实时未读：更新侧栏角标与预览，按置顶规则重排（不盲目置顶到最前）
+  useEffect(() => {
+    const off = realtime.on<RtChatUnreadData>(RT_CHAT_UNREAD, (data) => {
+      if (!data?.room_id) return;
+      if (activeRoomId === data.room_id) return;
+      setRooms((prev) => {
+        const idx = prev.findIndex((r) => r.id === data.room_id);
+        if (idx < 0) {
+          refreshRooms();
+          return prev;
+        }
+        const next = [...prev];
+        const cur = next[idx];
+        next[idx] = {
+          ...cur,
+          unread_count: (cur.unread_count || 0) + (data.delta || 1),
+          last_message_id: data.message_id,
+          last_message: {
+            id: data.message_id,
+            room_id: data.room_id,
+            sender_id: data.sender_id,
+            content: data.preview || "",
+            created_at: new Date().toISOString(),
+            sender: cur.last_message?.sender || ({
+              id: data.sender_id,
+              username: "",
+              nickname: "",
+              avatar: "",
+              role: "user",
+            } as User),
+          },
+        };
+        return sortRooms(next);
+      });
+    });
+    return off;
+  }, [activeRoomId, refreshRooms]);
+
+  useEffect(() => {
+    const off = realtime.on<RtChatMembershipData>(RT_CHAT_MEMBERSHIP, (data) => {
+      if (!data) return;
+      if (data.status === "invited" || data.status === "dissolved" || data.status === "kicked") {
+        refreshRooms();
+      }
+    });
+    return off;
+  }, [refreshRooms]);
+
+  // 进入会话后清零该会话未读
+  useEffect(() => {
+    if (!activeRoomId) return;
+    setRooms((prev) =>
+      prev.map((r) => (r.id === activeRoomId ? { ...r, unread_count: 0 } : r))
+    );
+  }, [activeRoomId]);
+
+  // 搜索：会话本地过滤 + 用户远程搜索
+  useEffect(() => {
+    const q = query.trim();
+    if (!q) {
+      setUserHits([]);
+      return;
+    }
+    const t = setTimeout(async () => {
+      setSearching(true);
+      try {
+        const res = await apiSearchChatUsers(q);
+        setUserHits(res.users || []);
+      } catch {
+        setUserHits([]);
+      } finally {
+        setSearching(false);
+      }
+    }, 300);
+    return () => clearTimeout(t);
+  }, [query]);
+
+  const filteredRooms = (() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return rooms;
+    return rooms.filter((r) => {
+      const title = roomTitle(r).toLowerCase();
+      const uname = r.peer?.username?.toLowerCase() || "";
+      return title.includes(q) || uname.includes(q) || r.name.toLowerCase().includes(q);
+    });
+  })();
+
+  const openDM = async (uid: number) => {
+    try {
+      const { room } = await apiOpenDirectChat(uid);
+      setQuery("");
+      setUserHits([]);
+      router.push(`/chat/${room.id}`);
+      refreshRooms();
+    } catch (e) {
+      toast(e instanceof Error ? e.message : "无法发起私聊");
+    }
+  };
+
+  const togglePin = async (room: ChatRoomView) => {
+    setCtxMenu(null);
+    if (room.is_default || room.pin_forced) {
+      toast("大厅已置顶且不可取消");
+      return;
+    }
+    const next = !room.pinned;
+    try {
+      await apiPinChatRoom(room.id, next);
+      setRooms((prev) =>
+        sortRooms(
+          prev.map((r) =>
+            r.id === room.id ? { ...r, pinned: next } : r
+          )
+        )
+      );
+      toast(next ? "已置顶" : "已取消置顶", "ok");
+    } catch (err) {
+      toast(err instanceof Error ? err.message : "操作失败");
+    }
+  };
+
+  const openRoomMenu = (room: ChatRoomView, x: number, y: number) => {
+    if (room.is_default || room.pin_forced) return;
+    setCtxMenu({ x, y, room });
+  };
+
+  const clearLongPress = () => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+  };
+
+  const showList = !activeRoomId;
+  // 移动端：有会话时隐藏列表；桌面始终显示列表
+  const listClass = activeRoomId
+    ? "hidden lg:flex"
+    : "flex";
+  const paneClass = activeRoomId
+    ? "flex"
+    : "hidden lg:flex";
+
+  return (
+    <div
+      className="panel overflow-hidden grid grid-cols-1 lg:grid-cols-[320px_minmax(0,1fr)]"
+      style={{
+        height: "calc(100vh - 8.5rem)",
+        minHeight: "480px",
+        borderColor: "var(--line)",
+      }}
+    >
+      {/* 左栏：会话列表 */}
+      <aside
+        className={`${listClass} flex-col min-h-0`}
+        style={{ borderRight: "1px solid var(--line)" }}
+      >
+        <div
+          className="flex items-center justify-between gap-2 px-4 py-3 shrink-0"
+          style={{ borderBottom: "1px solid var(--line)" }}
+        >
+          <h1 className="font-extrabold text-[17px]" style={{ color: "var(--ink)" }}>
+            消息
+          </h1>
+          <button
+            onClick={() => setShowCreate(true)}
+            className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
+            style={{ color: "var(--accent)" }}
+            aria-label="新建群聊"
+            title="新建群聊"
+          >
+            <Plus size={18} />
+          </button>
+        </div>
+
+        <div className="px-3 py-2.5 shrink-0 space-y-1.5">
+          <label
+            className="j13-chat-search flex items-center gap-2 px-3 h-10 rounded-xl cursor-text transition-[border-color,box-shadow] duration-150"
+            style={{
+              background: "var(--bg)",
+              border: "1px solid var(--line)",
+            }}
+          >
+            <Search size={15} className="shrink-0 pointer-events-none" style={{ color: query ? "var(--accent)" : "var(--ink-3)" }} />
+            <input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="搜索会话、用户名或昵称"
+              className="j13-chat-search-input bg-transparent flex-1 self-stretch h-full text-[13px] min-w-0"
+              style={{ color: "var(--ink)" }}
+            />
+            {query && (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setQuery("");
+                }}
+                aria-label="清除搜索"
+                className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] shrink-0"
+                style={{ color: "var(--ink-3)" }}
+              >
+                <X size={12} />
+              </button>
+            )}
+          </label>
+          {query.trim() && (
+            <p className="px-1 text-[11px] meta">
+              {searching
+                ? "正在搜索用户…"
+                : `会话 ${filteredRooms.length} · 用户 ${userHits.length}`}
+            </p>
+          )}
+        </div>
+
+        <div className="flex-1 overflow-y-auto min-h-0">
+          {query.trim() && (
+            <div className="px-2 pb-2">
+              <p
+                className="px-2 py-1.5 text-[11px] font-bold uppercase tracking-wider"
+                style={{ color: "var(--ink-3)" }}
+              >
+                用户 {searching ? "…" : ""}
+              </p>
+              {userHits.length === 0 && !searching ? (
+                <p className="px-2 py-2 text-[12px] meta">无匹配用户</p>
+              ) : (
+                userHits.map((u) => (
+                  <button
+                    key={u.id}
+                    onClick={() => openDM(u.id)}
+                    className="w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-[var(--accent-soft)] transition-colors"
+                  >
+                    <Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={36} />
+                    <div className="min-w-0">
+                      <p className="text-[13px] font-semibold truncate" style={{ color: "var(--ink)" }}>
+                        {u.nickname || u.username}
+                      </p>
+                      <p className="text-[11px] meta truncate">@{u.username}</p>
+                    </div>
+                  </button>
+                ))
+              )}
+              <p
+                className="px-2 py-1.5 mt-1 text-[11px] font-bold uppercase tracking-wider"
+                style={{ color: "var(--ink-3)" }}
+              >
+                会话
+              </p>
+            </div>
+          )}
+
+          {filteredRooms.length === 0 ? (
+            <div className="text-center py-16 px-4">
+              <MessageSquare size={28} style={{ color: "var(--ink-3)", margin: "0 auto 8px" }} />
+              <p className="text-[13px] meta">
+                {query ? "无匹配会话" : "还没有会话，搜索用户发起私聊或新建群聊"}
+              </p>
+            </div>
+          ) : (
+            <ul className="px-1.5 pb-2">
+              {filteredRooms.map((room) => {
+                const active = room.id === activeRoomId;
+                const pinned = isPinnedView(room);
+                return (
+                  <li key={room.id}>
+                    <Link
+                      href={`/chat/${room.id}`}
+                      className="flex items-center gap-2.5 px-2.5 py-2.5 rounded-xl transition-colors"
+                      style={{
+                        background: active ? "var(--accent-soft)" : "transparent",
+                      }}
+                      onContextMenu={(e) => {
+                        if (room.is_default || room.pin_forced) return;
+                        e.preventDefault();
+                        openRoomMenu(room, e.clientX, e.clientY);
+                      }}
+                      onTouchStart={(e) => {
+                        if (room.is_default || room.pin_forced) return;
+                        const t = e.touches[0];
+                        if (!t) return;
+                        clearLongPress();
+                        longPressTimer.current = setTimeout(() => {
+                          openRoomMenu(room, t.clientX, t.clientY);
+                        }, 480);
+                      }}
+                      onTouchEnd={clearLongPress}
+                      onTouchMove={clearLongPress}
+                    >
+                      <span
+                        className="w-10 h-10 shrink-0 rounded-xl flex items-center justify-center overflow-hidden"
+                        style={{ background: "var(--panel-2)" }}
+                      >
+                        {room.room_type === "direct" && room.peer ? (
+                          <Avatar
+                            name={room.peer.nickname || room.peer.username}
+                            src={room.peer.avatar || undefined}
+                            size={40}
+                          />
+                        ) : (
+                          <Users size={18} style={{ color: "var(--accent)" }} />
+                        )}
+                      </span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-1.5">
+                          <span
+                            className="font-semibold text-[13.5px] truncate"
+                            style={{ color: "var(--ink)" }}
+                          >
+                            {roomTitle(room)}
+                          </span>
+                          {pinned && (
+                            <span
+                              className="inline-flex items-center gap-0.5 text-[10px] font-bold shrink-0 px-1.5 py-0.5 rounded"
+                              style={{
+                                background: "var(--accent-soft)",
+                                color: "var(--accent)",
+                              }}
+                              title={room.is_default ? "强制置顶" : "置顶"}
+                            >
+                              <Pin size={10} /> 置顶
+                            </span>
+                          )}
+                          {room.is_default && (
+                            <span className="text-[10px] font-bold shrink-0" style={{ color: "var(--gold)" }}>
+                              大厅
+                            </span>
+                          )}
+                          {room.is_private && room.room_type === "group" && (
+                            <span className="text-[10px] font-bold shrink-0 meta">私密</span>
+                          )}
+                          <span className="ml-auto meta text-[10.5px] shrink-0">
+                            {formatTime(room.last_message?.created_at || room.updated_at)}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2 mt-0.5">
+                          <p className="text-[12px] truncate meta flex-1">{roomPreview(room)}</p>
+                          {room.unread_count > 0 && (
+                            <span
+                              className="shrink-0 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center"
+                              style={{ background: "var(--clay)", color: "#fff" }}
+                            >
+                              {room.unread_count > 99 ? "99+" : room.unread_count}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </aside>
+
+      {/* 右栏：会话内容 */}
+      <section className={`${paneClass} flex-col min-h-0 min-w-0`}>
+        {children ? (
+          children
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center px-6 text-center">
+            <span
+              className="w-16 h-16 rounded-2xl flex items-center justify-center mb-4"
+              style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+            >
+              <MessageSquare size={28} />
+            </span>
+            <p className="font-bold text-[16px]" style={{ color: "var(--ink)" }}>
+              选择一个会话开始聊天
+            </p>
+            <p className="meta mt-1.5 text-[13px] max-w-xs">
+              在左侧搜索用户发起私聊，或新建群聊。全站大厅已为你自动加入。
+            </p>
+            {showList && (
+              <p className="lg:hidden meta mt-4 text-[12px]">请从上方列表选择会话</p>
+            )}
+          </div>
+        )}
+      </section>
+
+      {showCreate && (
+        <CreateGroupModal
+          onClose={() => setShowCreate(false)}
+          onCreated={(id) => {
+            setShowCreate(false);
+            toast("群已创建", "ok");
+            router.push(`/chat/${id}`);
+            refreshRooms();
+          }}
+        />
+      )}
+
+      {ctxMenu && (
+        <ContextMenu
+          x={ctxMenu.x}
+          y={ctxMenu.y}
+          items={
+            [
+              {
+                key: "pin",
+                label: ctxMenu.room.pinned ? "取消置顶" : "置顶",
+                icon: <Pin size={14} />,
+                onClick: () => togglePin(ctxMenu.room),
+              },
+            ] as CtxMenuItem[]
+          }
+          onClose={() => setCtxMenu(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+function CreateGroupModal({
+  onClose,
+  onCreated,
+}: {
+  onClose: () => void;
+  onCreated: (roomId: number) => void;
+}) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [memberInput, setMemberInput] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = async () => {
+    const trimmed = name.trim();
+    if (trimmed.length < 2 || trimmed.length > 32) {
+      toast("群名称需为 2-32 个字符");
+      return;
+    }
+    if (description.length > 200) {
+      toast("群简介不能超过 200 个字符");
+      return;
+    }
+    const usernames = memberInput
+      .split(/[\s,，]+/)
+      .map((s) => s.trim())
+      .filter(Boolean);
+    setSubmitting(true);
+    try {
+      const { room } = await apiCreateChatRoom(trimmed, description.trim(), {
+        is_private: isPrivate,
+        member_usernames: isPrivate ? usernames : [],
+      });
+      onCreated(room.id);
+    } catch (e) {
+      toast(e instanceof Error ? e.message : "建群失败");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
+      style={{ background: "rgba(0,0,0,0.55)" }}
+      // 刻意不绑定外侧点击关闭，避免误关丢失已填内容
+    >
+      <div
+        className="w-full max-w-md rounded-2xl p-6 j13-toast-in"
+        style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-5">
+          <h2 className="text-[18px] font-extrabold" style={{ color: "var(--ink)" }}>
+            新建群聊
+          </h2>
+          <button
+            onClick={onClose}
+            disabled={submitting}
+            aria-label="关闭"
+            className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
+            style={{ color: "var(--ink-3)" }}
+          >
+            <X size={15} />
+          </button>
+        </div>
+        <div className="space-y-4">
+          <div>
+            <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
+              群名称 <span style={{ color: "var(--danger)" }}>*</span>
+            </label>
+            <input
+              autoFocus
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              maxLength={32}
+              placeholder="2-32 个字符"
+              className="w-full px-3.5 h-10 rounded-lg outline-none"
+              style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
+            />
+          </div>
+          <div>
+            <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
+              群简介（选填）
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              maxLength={200}
+              rows={3}
+              className="w-full px-3.5 py-2.5 rounded-lg outline-none resize-none"
+              style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
+            />
+          </div>
+          <div>
+            <label className="block text-[12px] font-bold mb-2" style={{ color: "var(--ink-2)" }}>
+              可见性
+            </label>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => setIsPrivate(false)}
+                className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
+                style={{
+                  background: !isPrivate ? "var(--accent-soft)" : "var(--bg)",
+                  color: !isPrivate ? "var(--accent)" : "var(--ink-2)",
+                  border: `1px solid ${!isPrivate ? "var(--accent)" : "var(--line)"}`,
+                }}
+              >
+                公开
+              </button>
+              <button
+                type="button"
+                onClick={() => setIsPrivate(true)}
+                className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
+                style={{
+                  background: isPrivate ? "var(--accent-soft)" : "var(--bg)",
+                  color: isPrivate ? "var(--accent)" : "var(--ink-2)",
+                  border: `1px solid ${isPrivate ? "var(--accent)" : "var(--line)"}`,
+                }}
+              >
+                私密
+              </button>
+            </div>
+          </div>
+          {isPrivate && (
+            <div>
+              <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
+                初始成员（选填）
+              </label>
+              <input
+                type="text"
+                value={memberInput}
+                onChange={(e) => setMemberInput(e.target.value)}
+                placeholder="用户名，多个用空格或逗号分隔"
+                className="w-full px-3.5 h-10 rounded-lg outline-none"
+                style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
+              />
+            </div>
+          )}
+          <div className="flex justify-end gap-2 pt-1">
+            <button onClick={onClose} disabled={submitting} className="btn btn-line btn-sm">
+              取消
+            </button>
+            <button onClick={submit} disabled={submitting} className="btn btn-accent btn-sm">
+              {submitting ? "创建中..." : "创建"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/chat/[id]/page.tsx

@@ -0,0 +1,94 @@
+import type { Metadata } from "next";
+import { notFound, redirect } from "next/navigation";
+import { cookies } from "next/headers";
+import { authCookieHeader } from "@/lib/cookies";
+import { getMeCached } from "@/lib/serverData";
+import { fetchChatRoom, fetchChatMessages, fetchChatRooms } from "@/lib/api";
+import ChatShell from "../ChatShell";
+import ChatRoomClient from "./ChatRoomClient";
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id } = await params;
+  try {
+    const { room } = await fetchChatRoom(id, authCookieHeader(await cookies()));
+    const title =
+      room.room_type === "direct"
+        ? room.peer?.nickname || room.peer?.username || room.name || "私聊"
+        : room.name;
+    return { title: `消息 · ${title}` };
+  } catch {
+    return { title: "会话不存在" };
+  }
+}
+
+export default async function ChatRoomPage({ params }: PageProps) {
+  const { id } = await params;
+  const cookie = authCookieHeader(await cookies());
+  const me = await getMeCached(cookie || undefined);
+  if (!me.user) {
+    redirect(`/login?redirect=${encodeURIComponent(`/chat/${id}`)}`);
+  }
+
+  let rooms: Awaited<ReturnType<typeof fetchChatRooms>>["rooms"] = [];
+  try {
+    const data = await fetchChatRooms(1, 50, "", cookie, "joined");
+    rooms = data.rooms || [];
+  } catch {
+    rooms = [];
+  }
+
+  let room: Awaited<ReturnType<typeof fetchChatRoom>>["room"];
+  try {
+    ({ room } = await fetchChatRoom(id, cookie));
+  } catch {
+    notFound();
+  }
+
+  let initialMessages: Awaited<ReturnType<typeof fetchChatMessages>> = {
+    messages: [],
+    has_more: false,
+  };
+  if (room.joined) {
+    try {
+      initialMessages = await fetchChatMessages(id, 0, 30, cookie);
+    } catch {
+      // 客户端兜底
+    }
+  }
+
+  const displayName =
+    room.room_type === "direct"
+      ? room.peer?.nickname || room.peer?.username || room.name || "私聊"
+      : room.name;
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <ChatShell meId={me.user.id} initialRooms={rooms} activeRoomId={room.id}>
+        <ChatRoomClient
+          roomId={room.id}
+          roomName={displayName}
+          roomDescription={room.description}
+          ownerId={room.owner_id}
+          memberCount={room.member_count}
+          myRole={room.my_role}
+          joined={room.joined}
+          isPrivate={room.is_private}
+          isDefault={room.is_default}
+          roomType={room.room_type || "group"}
+          peer={room.peer || null}
+          meId={me.user.id}
+          meRole={me.user.role}
+          meName={me.user.nickname || me.user.username}
+          meAvatar={me.user.avatar || ""}
+          initialMessages={initialMessages.messages}
+          initialHasMore={initialMessages.has_more}
+          embedded
+        />
+      </ChatShell>
+    </div>
+  );
+}

frontend/app/chat/page.tsx

@@ -0,0 +1,34 @@
+import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+import type { Metadata } from "next";
+import { authCookieHeader } from "@/lib/cookies";
+import { getMeCached } from "@/lib/serverData";
+import { fetchChatRooms } from "@/lib/api";
+import ChatShell from "./ChatShell";
+
+export const metadata: Metadata = {
+  title: "消息",
+  description: "私聊与群聊，实时交流。",
+};
+
+export default async function ChatListPage() {
+  const cookie = authCookieHeader(await cookies());
+  const me = await getMeCached(cookie || undefined);
+  if (!me.user) {
+    redirect(`/login?redirect=${encodeURIComponent("/chat")}`);
+  }
+
+  let rooms: Awaited<ReturnType<typeof fetchChatRooms>>["rooms"] = [];
+  try {
+    const data = await fetchChatRooms(1, 50, "", cookie, "joined");
+    rooms = data.rooms || [];
+  } catch {
+    rooms = [];
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <ChatShell meId={me.user.id} initialRooms={rooms} activeRoomId={null} />
+    </div>
+  );
+}

frontend/app/globals.css

@@ -155,6 +155,89 @@ h1, h2, h3, h4 {
   border-radius: 6px;
 }
 
+/* 消息侧栏搜索：单层描边，避免外框 + focus-visible 双线 */
+.j13-chat-search:focus-within {
+  border-color: var(--accent) !important;
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.j13-chat-search-input,
+.j13-chat-search-input:focus,
+.j13-chat-search-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* 聊天输入区：与搜索框同款聚焦态 */
+.j13-chat-composer:focus-within {
+  border-color: var(--accent) !important;
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.j13-chat-composer-input,
+.j13-chat-composer-input:focus,
+.j13-chat-composer-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+  resize: none !important;
+}
+.j13-chat-composer-input.has-value {
+  color: transparent;
+  caret-color: var(--ink);
+}
+.j13-chat-composer-input.has-value::placeholder {
+  color: transparent;
+}
+.j13-chat-composer-mirror {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  color: var(--ink);
+}
+.j13-mention-token {
+  display: inline-block;
+  padding: 2px 8px;
+  margin: 0 2px;
+  border-radius: 999px;
+  line-height: 1.35;
+  vertical-align: baseline;
+  /* 主题强调色加深 + 对比色字，胶囊形 */
+  background: color-mix(in srgb, var(--accent) 82%, #000);
+  color: #fff !important;
+  font-weight: 600;
+  text-decoration: none !important;
+  cursor: pointer;
+  transition: filter 0.12s ease, opacity 0.12s ease;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+a.j13-mention-token:hover {
+  filter: brightness(1.08);
+  opacity: 0.95;
+}
+.dark .j13-mention-token {
+  /* 暗色下 accent 偏亮，用实心 accent + 配套字色 */
+  background: var(--accent);
+  color: var(--accent-on) !important;
+}
+/* 输入镜像层：不加粗/不加 padding，避免与透明 textarea 字宽错位 */
+.j13-chat-composer-mirror .j13-mention-token {
+  display: inline;
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+  font-weight: inherit;
+  border-radius: 999px;
+  box-shadow: none;
+  background: color-mix(in srgb, var(--accent) 82%, #000);
+}
+.dark .j13-chat-composer-mirror .j13-mention-token {
+  background: var(--accent);
+  color: var(--accent-on) !important;
+}
+
 @layer components {
   /* ----- 小标签（旧名 .kicker 保留兼容） ----- */
   .kicker {
@@ -230,6 +313,22 @@ h1, h2, h3, h4 {
   .btn-primary:active:not(:disabled) {
     transform: translateY(0);
   }
+  /* 与 btn-primary 同款，历史类名兼容 */
+  .btn-accent {
+    background: var(--accent);
+    color: var(--accent-on);
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12),
+      0 2px 8px color-mix(in srgb, var(--accent) 26%, transparent);
+  }
+  .btn-accent:hover:not(:disabled) {
+    background: var(--accent-hi);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1),
+      0 8px 20px color-mix(in srgb, var(--accent) 34%, transparent);
+  }
+  .btn-accent:active:not(:disabled) {
+    transform: translateY(0);
+  }
 
   .btn-line {
     background: var(--panel);
@@ -380,6 +479,18 @@ h1, h2, h3, h4 {
     border-radius: 999px;
     white-space: nowrap;
   }
+  .badge-pending {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 4px 11px;
+    background: var(--accent-soft);
+    color: var(--accent);
+    border-radius: 999px;
+    white-space: nowrap;
+  }
 
   /* 帖子列表中的板块小标签：全站统一浅灰配色，避免每行多色眩目 */
   .j13-board-tag {
@@ -539,6 +650,20 @@ h1, h2, h3, h4 {
     transform: scale(0.97);
   }
 
+  /* 帖子流「有新内容」提示条（三期） */
+  .j13-feed-new-tip:hover {
+    filter: brightness(0.97);
+  }
+  .j13-feed-new-tip:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .j13-feed-new-tip {
+      transition: none;
+    }
+  }
+
   /* 侧栏导航项 */
   .j13-raillink {
     display: flex;

frontend/app/layout.tsx

@@ -7,6 +7,7 @@ import Footer from "@/components/Footer";
 import Toaster from "@/components/Toaster";
 import AccountGuard from "@/components/AccountGuard";
 import ThemeSync from "@/components/ThemeSync";
+import RealtimeProvider from "@/components/RealtimeProvider";
 import type { User } from "@/lib/api";
 import { getMeCached, getPublicSettingsCached } from "@/lib/serverData";
 import { TOKEN_COOKIE, REFRESH_COOKIE, authCookieHeader } from "@/lib/cookies";
@@ -68,6 +69,7 @@ export default async function RootLayout({
 
   let user: User | null = null;
   let unread = 0;
+  let chatUnread = 0;
   const hasAuthCookie =
     !!cookieStore.get(TOKEN_COOKIE)?.value || !!cookieStore.get(REFRESH_COOKIE)?.value;
   if (hasAuthCookie) {
@@ -75,6 +77,7 @@ export default async function RootLayout({
     const me = await getMeCached(authCookieHeader(cookieStore) || undefined);
     user = me.user;
     unread = me.unread_count;
+    chatUnread = me.chat_unread_count ?? 0;
   }
 
   return (
@@ -84,7 +87,7 @@ export default async function RootLayout({
     >
       <body className="min-h-screen flex flex-col">
         {accentCSS ? (
-          // id 与 lib/theme 的运行时换肤共用：后台实时预览时直接复用/替换此节点
+          // React 托管的 SSR 主题节点；客户端换肤走 j13-accent-runtime，禁止对此外挂 remove
           <style
             id="j13-accent-vars"
             data-accent-source="ssr"
@@ -94,7 +97,12 @@ export default async function RootLayout({
         <a href="#main" className="skip-link">
           跳到主要内容
         </a>
-        <Header initialUser={user} initialUnread={unread} initialTheme={theme} />
+        <Header
+          initialUser={user}
+          initialUnread={unread}
+          initialChatUnread={chatUnread}
+          initialTheme={theme}
+        />
         <main
           id="main"
           tabIndex={-1}
@@ -106,6 +114,7 @@ export default async function RootLayout({
         <Toaster />
         <AccountGuard />
         <ThemeSync initialAccent={accent || ""} />
+        <RealtimeProvider userId={user ? user.id : null} />
       </body>
     </html>
   );

frontend/app/notifications/NotificationsClient.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { Heart, MessageCircle, CheckCheck, Bell, CheckCircle2, XCircle } from "lucide-react";
+import { Heart, MessageCircle, CheckCheck, Bell, CheckCircle2, XCircle, AtSign, ClipboardList } from "lucide-react";
 import { apiMarkRead, apiMarkAllRead, type NotificationsResponse, type NotificationItem } from "@/lib/api";
 
 /**
@@ -20,7 +20,14 @@ export default function NotificationsClient({ initialData }: { initialData: Noti
         list.map((item) => (item.id === n.id ? { ...item, is_read: true } : item))
       );
     }
-    router.push(`/post/${n.post_id}`);
+    // @提及通知跳到群聊房间；其余跳到帖子/评论
+    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/moderation");
+    } else {
+      router.push(`/post/${n.post_id}`);
+    }
   };
 
   const handleMarkAll = async () => {
@@ -73,7 +80,11 @@ export default function NotificationsClient({ initialData }: { initialData: Noti
                 ? <XCircle size={16} />
                 : n.type === "like"
                   ? <Heart size={16} />
-                  : <MessageCircle size={16} />;
+                  : n.type === "mention"
+                    ? <AtSign size={16} />
+                    : n.type === "pending_review"
+                      ? <ClipboardList size={16} />
+                      : <MessageCircle size={16} />;
             const iconColor = n.type === "approved"
               ? "var(--ok)"
               : n.type === "rejected"
@@ -128,14 +139,28 @@ export default function NotificationsClient({ initialData }: { initialData: Noti
                           ? "评论了你的帖子"
                           : n.type === "reply"
                             ? "回复了你的评论"
-                            : "点赞了你的帖子"}
+                            : n.type === "mention"
+                              ? "在消息中提到了你"
+                              : n.type === "pending_review"
+                                ? "有新内容待审核"
+                                : "点赞了你的帖子"}
                       </span>
                     </>
                   )}
                 </p>
-                <p className="text-sm mt-1 truncate" style={{ color: "var(--ink-2)" }}>
-                  《{n.post.title}》
-                </p>
+                {n.type === "mention" ? (
+                  n.room && (
+                    <p className="text-sm mt-1 truncate" style={{ color: "var(--ink-2)" }}>
+                      # {n.room.name}
+                    </p>
+                  )
+                ) : (
+                  n.post && (
+                    <p className="text-sm mt-1 truncate" style={{ color: "var(--ink-2)" }}>
+                      《{n.post.title}》
+                    </p>
+                  )
+                )}
                 {n.content && (
                   <p className="text-[13px] mt-1.5 line-clamp-2" style={{ color: "var(--ink-3)" }}>
                     {n.content}

frontend/app/page.tsx

@@ -12,6 +12,7 @@ import { getMeCached } from "@/lib/serverData";
 import Pagination from "@/components/Pagination";
 import PostRow from "@/components/PostRow";
 import FeedTabs, { type FeedSort } from "@/components/home/FeedTabs";
+import FeedNewTip from "@/components/home/FeedNewTip";
 import { WorkspaceNav, WorkspaceNavMobile } from "@/components/home/WorkspaceNav";
 import { CommunityPanels, CommunityPanelsMobile } from "@/components/home/CommunityPanels";
 
@@ -158,6 +159,14 @@ export default async function HomePage({ searchParams }: HomePageProps) {
                 共 {postsData.total} 篇
               </span>
             </div>
+            {user && (
+              <FeedNewTip
+                sort={sort}
+                boardId={boardId}
+                page={page}
+                userId={user.id}
+              />
+            )}
             {postsData.posts.length > 0 ? (
               postsData.posts.map((post, i) => (
                 <PostRow

frontend/app/post/[id]/page.tsx

@@ -33,7 +33,7 @@ import PostToc, { type TocItem } from "@/components/PostToc";
 import MobilePostBar from "@/components/MobilePostBar";
 import Avatar from "@/components/Avatar";
 import RoleBadge from "@/components/RoleBadge";
-import { isStaff } from "@/lib/roles";
+import { canModerateBoard } from "@/lib/roles";
 import { IconComment, IconEye } from "@/components/Icons";
 
 interface PageProps {
@@ -340,7 +340,7 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
 
   // 非公开帖（待审/未通过）仅作者本人与管理团队可看，顶部给出醒目状态
   const isPublished = post.status === "published";
-  const canSeeStatus = !!me.user && (me.user.id === post.user.id || isStaff(me.user.role));
+  const canSeeStatus = !!me.user && (me.user.id === post.user.id || canModerateBoard(me.user, post.board_id));
 
   const jsonLd = {
     "@context": "https://schema.org",

frontend/app/u/[id]/StartDMButton.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { MessageSquare } from "lucide-react";
+import { apiOpenDirectChat } from "@/lib/api";
+import { toast } from "@/lib/toast";
+
+/** 用户主页：发起私聊 */
+export default function StartDMButton({ userId }: { userId: number }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const start = async () => {
+    setLoading(true);
+    try {
+      const { room } = await apiOpenDirectChat(userId);
+      router.push(`/chat/${room.id}`);
+    } catch (e) {
+      toast(e instanceof Error ? e.message : "无法发起私聊");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={start}
+      disabled={loading}
+      className="btn btn-accent btn-sm gap-1.5"
+    >
+      <MessageSquare size={14} />
+      {loading ? "打开中…" : "私聊"}
+    </button>
+  );
+}

frontend/app/u/[id]/page.tsx

@@ -14,6 +14,7 @@ import PasswordForm from "./PasswordForm";
 import Avatar from "@/components/Avatar";
 import RoleBadge from "@/components/RoleBadge";
 import { roleMeta } from "@/lib/roles";
+import StartDMButton from "./StartDMButton";
 
 interface UserPageProps {
   params: Promise<{ id: string }>;
@@ -132,8 +133,8 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
           />
         </div>
 
-        {/* 本人操作按钮 */}
-        {isOwner && (
+        {/* 本人操作按钮 / 访客私聊 */}
+        {isOwner ? (
           <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-20 flex items-center gap-2">
             <Link href={`/u/${id}?tab=settings`} className="btn btn-line btn-sm">
               <PenLine size={13.5} />
@@ -148,7 +149,11 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
               <Shield size={14} />
             </Link>
           </div>
-        )}
+        ) : currentUser ? (
+          <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-20">
+            <StartDMButton userId={data.user.id} />
+          </div>
+        ) : null}
 
         {/* 身份信息：纯文档流，头像 + 右侧文字 baseline 对齐 */}
         <div className="relative z-10 px-5 sm:px-7 pt-5 sm:pt-6">