feat(admin): 独立后台壳、站点分析与聊天监管，公开站拆出主题切换与访问埋点

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

frontend/app/admin/page.tsx

@@ -2,27 +2,28 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { cookies } from "next/headers";
 import {
-  UserPlus,
-  LayoutGrid,
   ClipboardCheck,
   ChevronRight,
-  MessageSquareText,
+  Eye,
   FileText,
-  Users,
+  MessageSquareText,
   LayoutDashboard,
   Coins,
+  Users,
+  Activity,
 } from "lucide-react";
 import {
   fetchOverview,
   fetchAdminPendingCounts,
+  fetchAdminAnalytics,
   type PendingCounts,
+  type AnalyticsOverview,
 } from "@/lib/api";
 import { authCookieHeader } from "@/lib/cookies";
 import { getMeCached } from "@/lib/serverData";
 import { canModerateAny, isSuperOrOwner, isAdminOrAbove } from "@/lib/roles";
-import Avatar from "@/components/Avatar";
 import { AdminPageHeader, AdminStatCard } from "@/components/admin";
-import { formatRelative } from "@/lib/format";
+import DashboardClient from "./DashboardClient";
 
 export const metadata: Metadata = {
   title: "管理仪表盘",
@@ -38,93 +39,76 @@ function greeting(hour: number) {
   return "晚上好";
 }
 
-function PanelHead({ title, extra }: { title: string; extra?: string }) {
-  return (
-    <div
-      className="px-4 sm:px-5 py-3.5 flex items-center justify-between gap-2"
-      style={{ borderBottom: "1px solid var(--line)" }}
-    >
-      <span className="font-medium text-[15px]" style={{ color: "var(--ink)" }}>
-        {title}
-      </span>
-      {extra && (
-        <span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
-          {extra}
-        </span>
-      )}
-    </div>
-  );
-}
-
-/** 待办：待审帖子 / 评论，进入内容管理的待审筛选 */
-function PendingWorkPanel({ counts }: { counts: PendingCounts }) {
+/** 紧凑待审条：跳转内容管理待审筛选 */
+function PendingStrip({ counts }: { counts: PendingCounts }) {
   const total = counts.posts + counts.comments;
   const idle = total === 0;
+  const href =
+    counts.posts > 0 || counts.comments === 0
+      ? "/admin/content?status=pending"
+      : "/admin/content?status=pending&kind=comments";
 
   return (
     <Link
-      href={
-        counts.posts > 0 || counts.comments === 0
-          ? "/admin/content?status=pending"
-          : "/admin/content?status=pending&kind=comments"
-      }
-      className="panel hover-lift relative block p-4 sm:p-5 mb-4 group"
+      href={href}
+      className="panel hover-lift mb-4 px-4 sm:px-5 py-3 flex items-center gap-3 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
-        >
-          <ClipboardCheck size={20} />
+      <span
+        className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0"
+        style={{
+          background: idle ? "var(--tint)" : "var(--ok-soft)",
+          color: idle ? "var(--ink-3)" : "var(--ok)",
+        }}
+        aria-hidden
+      >
+        <ClipboardCheck size={18} />
+      </span>
+      <div className="min-w-0 flex-1 flex items-center gap-3 sm:gap-5 flex-wrap">
+        <span className="text-[13.5px] font-semibold" style={{ color: "var(--ink)" }}>
+          待审内容
+        </span>
+        {idle ? (
+          <span className="admin-status is-muted">暂无待审</span>
+        ) : (
+          <span className="admin-status is-ok tabular-nums">{fmt(total)} 项</span>
+        )}
+        <span className="inline-flex items-center gap-1 text-[12.5px]" style={{ color: "var(--ink-2)" }}>
+          <FileText size={13} style={{ color: "var(--ink-3)" }} aria-hidden />
+          帖子
+          <strong className="tabular-nums font-bold" style={{ color: "var(--ink)" }}>
+            {fmt(counts.posts)}
+          </strong>
+        </span>
+        <span className="inline-flex items-center gap-1 text-[12.5px]" style={{ color: "var(--ink-2)" }}>
+          <MessageSquareText size={13} style={{ color: "var(--ink-3)" }} aria-hidden />
+          评论
+          <strong className="tabular-nums font-bold" style={{ color: "var(--ink)" }}>
+            {fmt(counts.comments)}
+          </strong>
         </span>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2 flex-wrap">
-            <p className="text-[15px] font-semibold" style={{ color: "var(--ink)" }}>
-              待审内容
-            </p>
-            {idle ? (
-              <span
-                className="admin-status is-muted"
-              >
-                暂无待审
-              </span>
-            ) : (
-              <span className="admin-status is-ok tabular-nums">
-                {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 />
-              待审帖子
-              <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 />
-              待审评论
-              <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>
+      <ChevronRight
+        size={16}
+        className="shrink-0 transition-transform group-hover:translate-x-0.5"
+        style={{ color: "var(--ink-3)" }}
+      />
     </Link>
   );
 }
 
+const emptyAnalytics = (): AnalyticsOverview => ({
+  range_days: 7,
+  today_pv: 0,
+  today_uv: 0,
+  visits: [],
+  posts_series: [],
+  comments_series: [],
+  registers_series: [],
+  boards: [],
+  post_types: [],
+  top_viewed: [],
+});
+
 export default async function AdminDashboardPage() {
   const cookie = authCookieHeader(await cookies());
   const me = await getMeCached(cookie || undefined);
@@ -132,11 +116,12 @@ export default async function AdminDashboardPage() {
   const canUsers = isSuperOrOwner(me.user?.role);
   const canEconomy = isAdminOrAbove(me.user?.role);
 
-  const [overview, pendingCounts] = await Promise.all([
+  const [overview, pendingCounts, analytics] = await Promise.all([
     fetchOverview(cookie).catch(() => null),
     canMod
       ? fetchAdminPendingCounts(cookie).catch(() => ({ posts: 0, comments: 0 }))
       : Promise.resolve(null),
+    fetchAdminAnalytics(cookie, "7d").catch(() => emptyAnalytics()),
   ]);
 
   const now = new Date();
@@ -148,10 +133,7 @@ export default async function AdminDashboardPage() {
   }).format(now);
 
   const stats = overview?.stats;
-  const boards = overview?.boards ?? [];
   const newUsers = overview?.new_users ?? [];
-  const topBoards = [...boards].sort((a, b) => b.post_count - a.post_count).slice(0, 6);
-  const maxBoardCount = Math.max(1, ...topBoards.map((b) => b.post_count));
 
   return (
     <div>
@@ -159,138 +141,58 @@ export default async function AdminDashboardPage() {
         icon={LayoutDashboard}
         title={`${greeting(now.getHours())}，${me.user?.nickname ?? ""}`}
         description={`${dateLabel} · 站点管理`}
+        actions={
+          canEconomy ? (
+            <Link href="/admin/economy" className="btn btn-ghost text-[13px] gap-1.5">
+              <Coins size={15} aria-hidden />
+              积分看板
+            </Link>
+          ) : undefined
+        }
       />
 
-      {canMod && pendingCounts && <PendingWorkPanel counts={pendingCounts} />}
-
-      {canEconomy && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
-          <Link href="/admin/economy" className="block hover-lift rounded-[var(--r)]">
-            <AdminStatCard
-              label="积分看板"
-              value="查看"
-              hint="余额合计、悬赏托管与流水"
-              icon={<Coins size={16} />}
-              color="var(--gold)"
-              soft="var(--gold-soft)"
-            />
-          </Link>
-          {stats && (
-            <AdminStatCard
-              label="注册成员"
-              value={fmt(stats.users)}
-              hint="全站用户总量"
-              icon={<Users size={16} />}
-            />
-          )}
-        </div>
-      )}
-
-      <div className="grid lg:grid-cols-2 gap-4 items-start">
-        <div className="panel overflow-hidden">
-          <PanelHead
-            title="最新注册成员"
-            extra={stats ? `共 ${fmt(stats.users)} 人` : undefined}
-          />
-          {newUsers.length === 0 ? (
-            <p className="meta text-center py-14 text-[13px]">暂无成员数据</p>
-          ) : (
-            newUsers.slice(0, 6).map((u) => (
-              <Link
-                key={u.id}
-                href={`/u/${u.id}`}
-                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}
-                />
-                <span className="min-w-0 flex-1 leading-tight">
-                  <span className="block text-[13.5px] truncate" style={{ color: "var(--ink)" }}>
-                    {u.nickname}
-                  </span>
-                  <span className="block text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
-                    @{u.username}
-                  </span>
-                </span>
-                <span
-                  className="shrink-0 inline-flex items-center gap-1 text-[11.5px]"
-                  style={{ color: "var(--ink-3)" }}
-                >
-                  <UserPlus size={12} aria-hidden />
-                  {formatRelative(u.created_at)}加入
-                </span>
-              </Link>
-            ))
-          )}
-          {canUsers && (
-            <Link
-              href="/admin/users"
-              className="flex items-center justify-center gap-1.5 px-4 py-3 text-[13px] transition-colors hover:bg-[var(--panel-2)]"
-              style={{
-                borderTop: "1px solid var(--line)",
-                color: "var(--accent)",
-              }}
-            >
-              <Users size={14} aria-hidden />
-              前往用户权限
-              <ChevronRight size={14} aria-hidden />
-            </Link>
-          )}
-        </div>
-
-        <div className="panel overflow-hidden">
-          <PanelHead title="板块话题分布" extra={`${boards.length} 个板块`} />
-          {topBoards.length === 0 ? (
-            <p className="meta text-center py-14 text-[13px]">暂无板块数据</p>
-          ) : (
-            topBoards.map((b) => (
-              <Link
-                key={b.id}
-                href={`/?board=${b.id}`}
-                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)" }}
-              >
-                <span
-                  className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
-                  style={{ background: "var(--panel-2)", color: "var(--accent)" }}
-                  aria-hidden
-                >
-                  <LayoutGrid size={14} />
-                </span>
-                <span className="min-w-0 flex-1">
-                  <span className="flex items-center justify-between gap-2">
-                    <span className="text-[13.5px] truncate" style={{ color: "var(--ink)" }}>
-                      {b.name}
-                    </span>
-                    <span
-                      className="text-[12px] 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)" }}
-                    aria-hidden
-                  >
-                    <span
-                      className="block h-full rounded-full"
-                      style={{
-                        width: `${Math.max(4, Math.round((b.post_count / maxBoardCount) * 100))}%`,
-                        background: "var(--accent)",
-                      }}
-                    />
-                  </span>
-                </span>
-              </Link>
-            ))
-          )}
-        </div>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+        <AdminStatCard
+          label="今日 PV"
+          value={fmt(analytics.today_pv)}
+          hint={`独立访客 UV ${fmt(analytics.today_uv)}`}
+          icon={<Eye size={16} />}
+        />
+        <AdminStatCard
+          label="今日 UV"
+          value={fmt(analytics.today_uv)}
+          hint="独立访客"
+          icon={<Users size={16} />}
+          color="var(--ok)"
+          soft="var(--ok-soft)"
+        />
+        <AdminStatCard
+          label="今日内容"
+          value={fmt(stats?.today_posts ?? 0)}
+          sub="帖"
+          hint={`评论 ${fmt(stats?.today_comments ?? 0)} · 注册 ${fmt(stats?.today_users ?? 0)}`}
+          icon={<FileText size={16} />}
+          color="var(--gold)"
+          soft="var(--gold-soft)"
+        />
+        <AdminStatCard
+          label="在线"
+          value={fmt(stats?.online ?? 0)}
+          hint={`峰值 ${fmt(stats?.peak_online ?? 0)}`}
+          icon={<Activity size={16} />}
+          color="var(--clay)"
+          soft="var(--clay-soft)"
+        />
       </div>
+
+      {canMod && pendingCounts && <PendingStrip counts={pendingCounts} />}
+
+      <DashboardClient
+        initialAnalytics={analytics}
+        newUsers={newUsers}
+        totalUsers={stats?.users}
+        canUsers={canUsers}
+      />
     </div>
   );
 }