From 3e80e63f7dbae64d22377288a1251e789a12f8a0 Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 08:49:43 +0800
Subject: [PATCH 1/9] =?UTF-8?q?feat(admin):=20=E5=90=8E=E5=8F=B0=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=20token=20=E5=B1=82=E2=80=94=E2=80=94ink=20=E4=B8=89?=
 =?UTF-8?q?=E6=A1=A3=E4=B8=8E=E8=AF=AD=E4=B9=89=E8=89=B2=E5=AF=B9=E5=8F=AA?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=8D=E6=94=B9=20(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

globals.css @theme 增量:--color-ink-900/800/700/500/300/200/100、
--color-admin-accent(指向品牌橙)、admin-danger/warn text+bg 对
(深底徽章 300 系文字+12% 透明底保证 4.5:1),外加骨架 shimmer
动画及 prefers-reduced-motion 静态降级。前台零波及。
---
 frontend/src/app/globals.css | 52 ++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index b9c73a2a..b844b9b7 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -41,6 +41,29 @@
   --color-page: #F7F7F8;
   --color-text: #1A1A2E;
 
+  /* ── 管理后台（工具面）token —— 只加不改，前台不受影响 ──
+   * 圆桌 2026-10-18（issue #121）：后台走工具面路线——ink 纯墨深侧边栏、
+   * 品牌橙为唯一点缀；语义色（danger/warn）与品牌色双通道隔离不互借。
+   * ink 三档 + 200/100 浅档供浅底分隔与表头使用。
+   */
+  --color-ink-900: #1D1D20;
+  --color-ink-800: #2A2A2E;
+  --color-ink-700: #3F3F46;
+  --color-ink-500: #71717A;
+  --color-ink-300: #D4D4D8;
+  --color-ink-200: #E4E4E7;
+  --color-ink-100: #F4F4F5;
+
+  /* 后台点缀色：指向品牌橙，语义上只承担「导航激活 / 主操作」。 */
+  --color-admin-accent: #FF6B35;
+
+  /* 深底徽章/警示：文字用 300 系亮色保证对 ink-900 的 4.5:1 对比度，
+   * 底为同色 12% 透明。与浅底语义色（red/amber 系）分属两个使用面。 */
+  --color-admin-danger-text: #FCA5A5;
+  --color-admin-danger-bg: rgba(239, 68, 68, 0.12);
+  --color-admin-warn-text: #FCD34D;
+  --color-admin-warn-bg: rgba(217, 119, 6, 0.12);
+
   --font-sans: var(--font-dm-sans), -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
   --font-mono: var(--font-dm-mono), ui-monospace, monospace;
   --font-serif-display: var(--font-display), "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
@@ -165,6 +188,35 @@ svg {
   background-clip: content-box;
 }
 
+/* 骨架屏 shimmer：1.6s 循环；reduced-motion 时降级为静态块（见下方媒体查询） */
+@keyframes admin-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.admin-shimmer {
+  background-image: linear-gradient(
+    90deg,
+    rgba(29, 29, 32, 0.06) 25%,
+    rgba(29, 29, 32, 0.1) 50%,
+    rgba(29, 29, 32, 0.06) 75%
+  );
+  background-size: 200% 100%;
+  animation: admin-shimmer 1.6s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .admin-shimmer {
+    animation: none;
+    background-image: none;
+    background-color: rgba(29, 29, 32, 0.06);
+  }
+}
+
 /* Radar ping animation */
 @keyframes radar-ping {
   0% {

From 9d46816082be178afcee5d14b6f6ec5d3731a240 Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 08:49:53 +0800
Subject: [PATCH 2/9] =?UTF-8?q?feat(admin):=20=E6=95=B0=E6=8D=AE=E5=AF=86?=
 =?UTF-8?q?=E9=9B=86=E9=A1=B5=E4=BA=94=E5=8E=9F=E8=AF=AD+=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E5=8D=87=E7=BA=A7+=E5=BC=B9=E7=AA=97=E8=84=8F?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=20(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

components/admin/ 新增 AdminTable(columns 定义式/三态内建/粘性操作
列/可选批量)、AdminFilters(防抖+chips+清空全部)、AdminEmptyState、
AdminTableSkeleton/BlockSkeleton、Toast(sonner,生产依赖)。
Pagination 升级跳页输入与每页条数(向后兼容)。AdminPageHeader 按
18px/600 降档,AdminModal 加 isDirty 内联脏关闭确认。
---
 frontend/package-lock.json                    |  17 ++
 frontend/package.json                         |   1 +
 frontend/src/components/Pagination.tsx        |  70 ++++-
 frontend/src/components/admin-ui.tsx          |  59 ++++-
 .../src/components/admin/AdminEmptyState.tsx  |  50 ++++
 .../src/components/admin/AdminFilters.tsx     | 127 +++++++++
 .../src/components/admin/AdminSkeleton.tsx    |  70 +++++
 frontend/src/components/admin/AdminTable.tsx  | 245 ++++++++++++++++++
 frontend/src/components/admin/admin-toast.tsx |  35 +++
 frontend/src/components/admin/index.ts        |  18 ++
 10 files changed, 684 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/admin/AdminEmptyState.tsx
 create mode 100644 frontend/src/components/admin/AdminFilters.tsx
 create mode 100644 frontend/src/components/admin/AdminSkeleton.tsx
 create mode 100644 frontend/src/components/admin/AdminTable.tsx
 create mode 100644 frontend/src/components/admin/admin-toast.tsx
 create mode 100644 frontend/src/components/admin/index.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f9364797..e4d9ec7b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,6 +12,7 @@
         "next": "^16.3.8",
         "react": "19.2.4",
         "react-dom": "19.2.4",
+        "sonner": "^2.0.8",
         "zustand": "^5.0.14"
       },
       "devDependencies": {
@@ -6555,6 +6556,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.8.tgz",
+      "integrity": "sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d94e660d..e82e99c2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "next": "^16.3.8",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "sonner": "^2.0.8",
     "zustand": "^5.0.14"
   },
   "devDependencies": {
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index aa919ffb..68e57a08 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -8,9 +8,12 @@
  * `summary?: React.ReactNode` 用于在左侧渲染自定义统计文本
  * （如「第 1 / 5 页，共 234 条」）。
  * `onPage` 支持 updater 函数形式，兼容 `setPage(prev => ...)` 调用模式。
+ *
+ * #121 后台改版升级（全部可选、向后兼容）：总页数 > 5 时显示跳页输入；
+ * 传入 `pageSize` + `onPageSizeChange` 时显示每页条数选择器（10/20/50）。
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button, cx } from '@/components/ui';
 
@@ -36,19 +39,43 @@ function PageButton({
   );
 }
 
+const PAGE_SIZE_OPTIONS = [10, 20, 50] as const;
+
 export function Pagination({
   page,
   totalPages,
   onPage,
   summary,
+  pageSize,
+  pageSizeOptions,
+  onPageSizeChange,
   className,
 }: {
   page: number;
   totalPages: number;
   onPage: (updater: number | ((page: number) => number)) => void;
   summary?: React.ReactNode;
+  /** 每页条数。与 onPageSizeChange 同时传入才显示条数选择器。 */
+  pageSize?: number;
+  /** 可选的自定义档位，默认 10/20/50。 */
+  pageSizeOptions?: readonly number[];
+  onPageSizeChange?: (pageSize: number) => void;
   className?: string;
 }) {
+  const [jumpValue, setJumpValue] = useState('');
+  const showJump = totalPages > 5;
+  const showPageSize = pageSize != null && onPageSizeChange != null;
+  const options = pageSizeOptions ?? PAGE_SIZE_OPTIONS;
+
+  const jumpToPage = () => {
+    const target = Number.parseInt(jumpValue, 10);
+    if (Number.isFinite(target)) {
+      const clamped = Math.min(Math.max(1, target), Math.max(1, totalPages));
+      onPage(clamped);
+    }
+    setJumpValue('');
+  };
+
   // 计算最多 5 个页码窗口，始终围绕当前页
   const pageNumbers = Array.from({ length: Math.min(5, totalPages) }, (_, index) => {
     if (totalPages <= 5) return index + 1;
@@ -58,9 +85,27 @@ export function Pagination({
   });
 
   return (
-    <div className={cx('mt-6 flex items-center justify-between gap-3', className)}>
+    <div className={cx('mt-6 flex flex-wrap items-center justify-between gap-3', className)}>
       {summary && <span className="text-[13px] text-gray-500">{summary}</span>}
-      <div className="ml-auto flex items-center gap-3">
+      <div className="ml-auto flex flex-wrap items-center gap-3">
+        {showPageSize && (
+          <label className="flex items-center gap-1.5 text-[13px] text-gray-500">
+            每页
+            <select
+              value={pageSize}
+              onChange={(e) => onPageSizeChange?.(Number(e.target.value))}
+              aria-label="每页条数"
+              className="h-8 rounded-sm border border-gray-200 bg-white px-1.5 text-[13px] text-gray-700"
+            >
+              {options.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+            条
+          </label>
+        )}
         <div className="flex gap-1">
           {pageNumbers.map((pageNumber) => {
             const active = page === pageNumber;
@@ -81,6 +126,25 @@ export function Pagination({
             );
           })}
         </div>
+        {showJump && (
+          <div className="flex items-center gap-1 text-[13px] text-gray-500">
+            跳至
+            <input
+              type="number"
+              min={1}
+              max={totalPages}
+              value={jumpValue}
+              onChange={(e) => setJumpValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') jumpToPage();
+              }}
+              onBlur={() => setJumpValue('')}
+              aria-label={`跳转页码（1-${totalPages}）`}
+              className="h-8 w-14 rounded-sm border border-gray-200 bg-white px-2 text-center text-[13px] text-gray-700 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            />
+            页
+          </div>
+        )}
         <div className="flex gap-2">
           <PageButton disabled={page === 1} onClick={() => onPage((current) => Math.max(1, current - 1))}>
             <ChevronLeft size={14} /> 上一页
diff --git a/frontend/src/components/admin-ui.tsx b/frontend/src/components/admin-ui.tsx
index 77895700..fffeaf1c 100644
--- a/frontend/src/components/admin-ui.tsx
+++ b/frontend/src/components/admin-ui.tsx
@@ -92,12 +92,14 @@ export function AdminPageHeader({
   return (
     <div className="flex flex-wrap items-start justify-between gap-3">
       <div className="min-w-0">
-        <h1 className="flex items-center gap-2 text-[26px] font-black leading-tight text-gray-900">
-          {Icon && <Icon size={22} className="text-primary" strokeWidth={2.2} />}
+        {/* #121 规格：标题 18px/600（原 26px font-black 与卡片标题拉差过大，
+            扫读定位不了页面结构）；icon 18px 跟随字号降档。 */}
+        <h1 className="flex items-center gap-2 text-lg font-semibold leading-tight text-ink-900">
+          {Icon && <Icon size={18} className="text-admin-accent" strokeWidth={2.2} />}
           {title}
         </h1>
         {description && (
-          <p className="mt-1.5 text-sm leading-6 text-gray-500">{description}</p>
+          <p className="mt-1.5 text-[13px] leading-6 text-ink-500">{description}</p>
         )}
       </div>
       {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
@@ -188,17 +190,39 @@ export function AdminModal({
   children,
   onClose,
   maxWidth = 480,
+  isDirty = false,
 }: {
   title: string;
   children: React.ReactNode;
   onClose: () => void;
   maxWidth?: number;
+  /**
+   * 表单已脏时拦截关闭（#121 圆桌规范，H5 错误预防 / H3 紧急出口）：
+   * 遮罩点击与 Esc 先弹内联确认条，「放弃修改」才真正 onClose。
+   */
+  isDirty?: boolean;
 }) {
-  const { dialogRef, onKeyDown } = useDialogFocus<HTMLDivElement>(true, onClose);
+  // 拦截链：requestClose → (isDirty ? 内联确认 : onClose)。useDialogFocus 的
+  // Esc 走 requestClose，焦点管理不受确认条影响。
+  const [confirming, setConfirming] = React.useState(false);
+  const requestClose = React.useCallback(() => {
+    if (isDirty) {
+      setConfirming(true);
+    } else {
+      onClose();
+    }
+  }, [isDirty, onClose]);
+
+  // 脏状态被外部清掉（如保存成功后父组件直接关闭）时同步撤掉确认条
+  React.useEffect(() => {
+    if (!isDirty && confirming) setConfirming(false);
+  }, [isDirty, confirming]);
+
+  const { dialogRef, onKeyDown } = useDialogFocus<HTMLDivElement>(true, requestClose);
   const titleId = React.useId();
   return (
     <>
-      <div aria-hidden="true" className="fixed inset-0 z-[1000] bg-black/30" onClick={onClose} />
+      <div aria-hidden="true" className="fixed inset-0 z-[1000] bg-black/30" onClick={requestClose} />
       <div
         ref={dialogRef}
         role="dialog"
@@ -211,6 +235,31 @@ export function AdminModal({
         <Panel className="pointer-events-auto max-h-[calc(100dvh-3rem)] w-full overflow-y-auto p-6 shadow-2xl" style={{ maxWidth }}>
           <h2 id={titleId} className="mb-5 text-lg font-black text-gray-900">{title}</h2>
           {children}
+          {confirming && (
+            <div
+              role="alertdialog"
+              aria-label="未保存的修改"
+              className="mt-5 rounded-sm border border-amber-border bg-amber-light px-4 py-3"
+            >
+              <p className="mb-3 text-[13px] font-medium text-amber">有未保存的修改，关闭后将丢失。</p>
+              <div className="flex justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={() => setConfirming(false)}
+                  className="rounded-xs border border-ink-200 bg-white px-3 py-1.5 text-xs font-medium text-ink-700 transition hover:border-ink-300"
+                >
+                  继续编辑
+                </button>
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="rounded-xs border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-600 transition hover:bg-red-50"
+                >
+                  放弃修改
+                </button>
+              </div>
+            </div>
+          )}
         </Panel>
       </div>
     </>
diff --git a/frontend/src/components/admin/AdminEmptyState.tsx b/frontend/src/components/admin/AdminEmptyState.tsx
new file mode 100644
index 00000000..642cdcce
--- /dev/null
+++ b/frontend/src/components/admin/AdminEmptyState.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { Inbox } from 'lucide-react';
+import { cx } from '@/components/ui';
+
+/**
+ * 后台统一空态（#121 圆桌规范）：空态 = 一句「为什么为空」+ 一个主动作按钮，
+ * 禁纯插画。原因让操作者判断是否正常，动作给恢复路径。
+ */
+export function AdminEmptyState({
+  icon: Icon = Inbox,
+  title,
+  description,
+  action,
+  compact = false,
+  className,
+}: {
+  /** 可选图标，默认收件箱。 */
+  icon?: LucideIcon;
+  /** 为什么为空（如「没有匹配的信源」）。 */
+  title: string;
+  /** 补充说明（如「试试调整筛选条件」）。 */
+  description?: string;
+  /** 主动作（如「清空筛选」「添加信源」）。 */
+  action?: React.ReactNode;
+  /** 表格内嵌使用时收敛留白。 */
+  compact?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cx(
+        'flex flex-col items-center justify-center text-center',
+        compact ? 'px-6 py-10' : 'px-6 py-16',
+        className,
+      )}
+    >
+      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-ink-100">
+        <Icon size={18} className="text-ink-500" strokeWidth={1.8} />
+      </div>
+      <div className="text-sm font-medium text-ink-700">{title}</div>
+      {description && (
+        <p className="mt-1 max-w-[320px] text-xs leading-5 text-ink-500">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}
diff --git a/frontend/src/components/admin/AdminFilters.tsx b/frontend/src/components/admin/AdminFilters.tsx
new file mode 100644
index 00000000..aa8a5ba7
--- /dev/null
+++ b/frontend/src/components/admin/AdminFilters.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Search, X } from 'lucide-react';
+import { cx } from '@/components/ui';
+
+/**
+ * 后台统一筛选行（#121 圆桌规范）：
+ * - 搜索 300ms 防抖后提交（onSearchChange 收到的是防抖后的值）
+ * - 下拉等筛选控件由 children 传入，保持各页自由度
+ * - 已选条件用 chips 呈现（H1 当前过滤状态可见），单 chip 可移除（H6 不靠回忆），
+ *   末尾常显「清空全部」（H3 紧急出口）
+ *
+ * 受控契约：搜索值归父组件所有；本组件只做展示与防抖转发。
+ */
+export function AdminFilters({
+  searchPlaceholder,
+  searchValue,
+  onSearchChange,
+  debounceMs = 300,
+  searchClassName,
+  children,
+  actions,
+  className,
+}: {
+  searchPlaceholder?: string;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  debounceMs?: number;
+  searchClassName?: string;
+  /** 筛选下拉等控件。 */
+  children?: React.ReactNode;
+  /** 右侧动作区（如导出按钮）。 */
+  actions?: React.ReactNode;
+  className?: string;
+}) {
+  const [local, setLocal] = useState(searchValue);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // 外部清空（如「清空全部」）时同步输入框
+  useEffect(() => {
+    setLocal(searchValue);
+  }, [searchValue]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const handleInput = (value: string) => {
+    setLocal(value);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => onSearchChange(value), debounceMs);
+  };
+
+  return (
+    <div className={cx('flex flex-wrap items-center gap-2', className)}>
+      <div className={cx('relative', searchClassName)}>
+        <Search
+          size={14}
+          className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-500"
+          strokeWidth={2}
+          aria-hidden="true"
+        />
+        <input
+          type="search"
+          value={local}
+          onChange={(e) => handleInput(e.target.value)}
+          placeholder={searchPlaceholder}
+          aria-label={searchPlaceholder ?? '搜索'}
+          className="h-9 w-56 rounded-xs border border-ink-200 bg-white pl-8 pr-3 text-[13px] text-ink-900 placeholder:text-ink-500 focus:border-admin-accent focus:outline-none"
+        />
+      </div>
+      {children}
+      {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}
+
+export interface AdminFilterChip {
+  key: string;
+  label: string;
+  onRemove: () => void;
+}
+
+/** 已选条件 chips 行：有 chips 才渲染。规格：高 24 / 12px / 圆角 6 / 边框 ink 16%。 */
+export function AdminFilterChips({
+  chips,
+  onClearAll,
+  className,
+}: {
+  chips: readonly AdminFilterChip[];
+  onClearAll?: () => void;
+  className?: string;
+}) {
+  if (chips.length === 0) return null;
+  return (
+    <div className={cx('flex flex-wrap items-center gap-1.5', className)}>
+      {chips.map((chip) => (
+        <span
+          key={chip.key}
+          className="inline-flex h-6 items-center gap-1 rounded-xs border border-ink-900/15 bg-white pl-2 pr-1 text-xs text-ink-700"
+        >
+          {chip.label}
+          <button
+            type="button"
+            onClick={chip.onRemove}
+            aria-label={`移除筛选 ${chip.label}`}
+            className="flex h-6 w-6 items-center justify-center rounded-xs text-ink-500 transition hover:bg-ink-900/10 hover:text-ink-900"
+          >
+            <X size={12} strokeWidth={2.2} />
+          </button>
+        </span>
+      ))}
+      {onClearAll && (
+        <button
+          type="button"
+          onClick={onClearAll}
+          className="ml-1 h-6 px-1.5 text-xs font-medium text-ink-500 underline-offset-2 transition hover:text-ink-900 hover:underline"
+        >
+          清空全部
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/admin/AdminSkeleton.tsx b/frontend/src/components/admin/AdminSkeleton.tsx
new file mode 100644
index 00000000..b7c44a57
--- /dev/null
+++ b/frontend/src/components/admin/AdminSkeleton.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { cx } from '@/components/ui';
+
+/**
+ * 后台表格骨架屏（#121 圆桌规范）：
+ * - 首屏加载用保持列宽的骨架，禁全屏 spinner（布局稳定，H1 + 防跳变）
+ * - shimmer 1.6s 循环走 globals.css 的 .admin-shimmer，
+ *   prefers-reduced-motion 时自动降级为静态块
+ */
+export function AdminTableSkeleton({
+  rows = 6,
+  columns = 5,
+  className,
+}: {
+  rows?: number;
+  columns?: number;
+  className?: string;
+}) {
+  return (
+    <div aria-busy="true" aria-live="polite" className={cx('w-full', className)}>
+      {/* 表头骨架：高度对齐 AdminTable 的 40px 表头 */}
+      <div className="flex h-10 items-center gap-4 border-b border-ink-200 bg-ink-100 px-4">
+        {Array.from({ length: columns }, (_, i) => (
+          <div
+            key={i}
+            className="admin-shimmer h-3 rounded-xs"
+            style={{ width: `${Math.max(10, 90 / columns - 4)}%` }}
+          />
+        ))}
+      </div>
+      {/* 数据行骨架：高度对齐 48px 行 */}
+      {Array.from({ length: rows }, (_, row) => (
+        <div key={row} className="flex h-12 items-center gap-4 border-b border-ink-100 px-4">
+          {Array.from({ length: columns }, (_, col) => (
+            <div
+              key={col}
+              className="admin-shimmer h-3.5 rounded-xs"
+              style={{ width: col === 0 ? '26%' : `${Math.max(8, 84 / columns - 3)}%` }}
+            />
+          ))}
+        </div>
+      ))}
+      <span className="sr-only">正在加载…</span>
+    </div>
+  );
+}
+
+/** 通用块骨架：卡片/表单区加载占位。 */
+export function AdminBlockSkeleton({
+  lines = 3,
+  className,
+}: {
+  lines?: number;
+  className?: string;
+}) {
+  return (
+    <div aria-busy="true" className={cx('space-y-3 p-4', className)}>
+      {Array.from({ length: lines }, (_, i) => (
+        <div
+          key={i}
+          className="admin-shimmer h-4 rounded-xs"
+          style={{ width: i === lines - 1 ? '55%' : `${92 - i * 8}%` }}
+        />
+      ))}
+      <span className="sr-only">正在加载…</span>
+    </div>
+  );
+}
diff --git a/frontend/src/components/admin/AdminTable.tsx b/frontend/src/components/admin/AdminTable.tsx
new file mode 100644
index 00000000..eb8cab0e
--- /dev/null
+++ b/frontend/src/components/admin/AdminTable.tsx
@@ -0,0 +1,245 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle, RotateCw } from 'lucide-react';
+import { Panel, cx } from '@/components/ui';
+import { AdminEmptyState } from './AdminEmptyState';
+import { AdminTableSkeleton } from './AdminSkeleton';
+
+/**
+ * 后台统一表格原语（#121 圆桌定稿）。
+ *
+ * 行为契约（页面层禁止自造态）：
+ * - loading  → AdminTableSkeleton（保持列宽，禁全屏 spinner）
+ * - error    → 表格区内联错误 + 重试按钮（H9：就近可恢复，不弹 Toast）
+ * - empty    → AdminEmptyState（为什么为空 + 主动作）
+ *
+ * 视觉规格：
+ * - 表头 40px / 12px·500 / ink-500 / 底 ink-100
+ * - 行高 48px / 分隔线 ink-100~200 / hover ink-100 / 选中 primary/8 + 左 2px 橙条
+ * - 数字 tabular-nums；操作列右侧粘性（background 随行底变化）
+ *
+ * 用法：
+ * ```tsx
+ * <AdminTable
+ *   columns={[
+ *     { key: 'email', header: '邮箱', render: (u) => u.email },
+ *     { key: 'actions', header: '', sticky: 'right', render: (u) => <RowActions row={u} /> },
+ *   ]}
+ *   rows={users}
+ *   rowKey={(u) => u.id}
+ *   loading={loading}
+ *   error={error}
+ *   onRetry={refetch}
+ *   empty={<AdminEmptyState title="暂无用户" action={<Button>新建用户</Button>} />}
+ * />
+ * ```
+ */
+
+export interface AdminTableColumn<T> {
+  key: string;
+  header: React.ReactNode;
+  render: (row: T, index: number) => React.ReactNode;
+  width?: number | string;
+  align?: 'left' | 'right' | 'center';
+  /** 操作列：右侧粘性。每张表至多一列。 */
+  sticky?: 'right';
+  className?: string;
+}
+
+export function AdminTable<T>({
+  columns,
+  rows,
+  rowKey,
+  loading = false,
+  error,
+  onRetry,
+  empty,
+  selectable = false,
+  selected = new Set(),
+  onSelectedChange,
+  batchBar,
+  onRowClick,
+  minWidth = 720,
+  className,
+}: {
+  columns: AdminTableColumn<T>[];
+  rows: readonly T[];
+  rowKey: (row: T, index: number) => string | number;
+  loading?: boolean;
+  /** 非空时渲染内联错误态。 */
+  error?: string | null;
+  onRetry?: () => void;
+  /** 空态内容；传字符串时自动包 AdminEmptyState（compact）。 */
+  empty?: React.ReactNode;
+  /** 开启行选择（批量操作的前置）。 */
+  selectable?: boolean;
+  selected?: Set<string | number>;
+  onSelectedChange?: (next: Set<string | number>) => void;
+  /** 选中行数 > 0 时渲染在表格上方的批量条（常显选中计数）。 */
+  batchBar?: React.ReactNode;
+  onRowClick?: (row: T) => void;
+  /** 表格最小宽度，列多时出横向滚动。 */
+  minWidth?: number;
+  className?: string;
+}) {
+  const allKeys = rows.map((row, index) => rowKey(row, index));
+  const allSelected = selectable && rows.length > 0 && allKeys.every((key) => selected.has(key));
+
+  const toggleAll = () => {
+    if (!onSelectedChange) return;
+    const next = new Set(selected);
+    if (allSelected) {
+      for (const key of allKeys) next.delete(key);
+    } else {
+      for (const key of allKeys) next.add(key);
+    }
+    onSelectedChange(next);
+  };
+
+  const toggleOne = (key: string | number) => {
+    if (!onSelectedChange) return;
+    const next = new Set(selected);
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    onSelectedChange(next);
+  };
+
+  const stickyCount = columns.filter((c) => c.sticky === 'right').length;
+  if (stickyCount > 1) {
+    throw new Error('AdminTable: 至多一列可声明 sticky: "right"（操作列）');
+  }
+
+  const emptyNode =
+    empty === undefined || typeof empty === 'string' ? (
+      <AdminEmptyState compact title={typeof empty === 'string' ? empty : '暂无数据'} />
+    ) : (
+      empty
+    );
+
+  return (
+    <div className={cx('space-y-2', className)}>
+      {selectable && selected.size > 0 && batchBar}
+      <Panel className={cx('overflow-hidden', loading && 'animate-none')}>
+        {loading ? (
+          <AdminTableSkeleton columns={columns.length} />
+        ) : error ? (
+          <div className="flex flex-col items-center justify-center px-6 py-10 text-center">
+            <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-red-50">
+              <AlertTriangle size={18} className="text-red-500" strokeWidth={1.8} />
+            </div>
+            <div className="text-sm font-medium text-ink-700">加载失败</div>
+            <p className="mt-1 max-w-[360px] break-all text-xs leading-5 text-ink-500">{error}</p>
+            {onRetry && (
+              <button
+                type="button"
+                onClick={onRetry}
+                className="mt-3 inline-flex items-center gap-1.5 rounded-xs border border-ink-200 bg-white px-3 py-1.5 text-xs font-medium text-ink-700 transition hover:border-ink-300 hover:text-ink-900"
+              >
+                <RotateCw size={12} strokeWidth={2} />
+                重试
+              </button>
+            )}
+          </div>
+        ) : rows.length === 0 ? (
+          emptyNode
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse text-sm tabular-nums" style={{ minWidth }}>
+              <thead>
+                <tr className="border-b border-ink-200 bg-ink-100">
+                  {selectable && (
+                    <th scope="col" className="w-10 px-4 py-2.5 text-left">
+                      <input
+                        type="checkbox"
+                        checked={allSelected}
+                        onChange={toggleAll}
+                        aria-label="全选本页"
+                        className="h-3.5 w-3.5 accent-[var(--color-primary-solid)]"
+                      />
+                    </th>
+                  )}
+                  {columns.map((column) => (
+                    <th
+                      key={column.key}
+                      scope="col"
+                      style={{ width: column.width }}
+                      className={cx(
+                        'px-4 py-2.5 text-left text-xs font-medium tracking-wide text-ink-500',
+                        column.align === 'right' && 'text-right',
+                        column.align === 'center' && 'text-center',
+                        column.sticky === 'right' && 'sticky right-0 bg-ink-100',
+                        column.className,
+                      )}
+                    >
+                      {column.header}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((row, index) => {
+                  const key = rowKey(row, index);
+                  const isSelected = selected.has(key);
+                  return (
+                    <tr
+                      key={key}
+                      onClick={onRowClick ? () => onRowClick(row) : undefined}
+                      className={cx(
+                        'group/group-row border-b border-ink-100 transition-colors last:border-b-0',
+                        isSelected ? 'bg-primary/[0.06]' : 'hover:bg-ink-100/60',
+                        onRowClick && 'cursor-pointer',
+                      )}
+                    >
+                      {selectable && (
+                        <td className="relative px-4 py-0" onClick={(e) => e.stopPropagation()}>
+                          {isSelected && (
+                            <span
+                              aria-hidden="true"
+                              className="absolute left-0 top-1/2 h-[18px] w-0.5 -translate-y-1/2 bg-admin-accent"
+                            />
+                          )}
+                          <div className="flex h-12 items-center">
+                            <input
+                              type="checkbox"
+                              checked={isSelected}
+                              onChange={() => toggleOne(key)}
+                              aria-label={`选择第 ${index + 1} 行`}
+                              className="h-3.5 w-3.5 accent-[var(--color-primary-solid)]"
+                            />
+                          </div>
+                        </td>
+                      )}
+                      {columns.map((column) => (
+                        <td
+                          key={column.key}
+                          className={cx(
+                            'px-4 py-0 align-middle',
+                            column.align === 'right' && 'text-right',
+                            column.align === 'center' && 'text-center',
+                            // 粘性列自带底色（随选中/hover 变化），不继承行底
+                            column.sticky === 'right' && 'sticky right-0',
+                            column.sticky === 'right' &&
+                              (isSelected
+                                ? 'bg-primary/[0.06]'
+                                : 'bg-white group-hover/group-row:bg-ink-100/60'),
+                            column.className,
+                          )}
+                        >
+                          <div className="flex h-12 items-center">{column.render(row, index)}</div>
+                        </td>
+                      ))}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Panel>
+    </div>
+  );
+}
diff --git a/frontend/src/components/admin/admin-toast.tsx b/frontend/src/components/admin/admin-toast.tsx
new file mode 100644
index 00000000..b3ccbcd8
--- /dev/null
+++ b/frontend/src/components/admin/admin-toast.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+import { Toaster, toast } from 'sonner';
+
+/**
+ * 后台 Toast（#121 圆桌规范）：
+ * - 位置右上、距视口 16px、宽 min(360px, 100vw−32px)、圆角 8
+ * - 边界：操作反馈（保存成功/复制完成）归 Toast；
+ *   系统级需动作的消息（配额告警等）仍走 AdminNoticeBanner——
+ *   Toast 转瞬即逝，恢复路径优先于视觉干净
+ * - AdminToaster 在 admin layout 挂载一次；页面里 `import { toast } from '@/components/admin'`
+ */
+export function AdminToaster() {
+  return (
+    <Toaster
+      position="top-right"
+      offset={16}
+      gap={8}
+      toastOptions={{
+        duration: 3200,
+        style: {
+          width: 'min(360px, calc(100vw - 32px))',
+          borderRadius: '8px',
+          border: '1px solid var(--color-ink-200)',
+          color: 'var(--color-ink-900)',
+          fontFamily: 'var(--font-sans)',
+          fontSize: '13px',
+        },
+      }}
+    />
+  );
+}
+
+export { toast };
diff --git a/frontend/src/components/admin/index.ts b/frontend/src/components/admin/index.ts
new file mode 100644
index 00000000..152aa136
--- /dev/null
+++ b/frontend/src/components/admin/index.ts
@@ -0,0 +1,18 @@
+/**
+ * 管理后台数据密集页原语集（#121 圆桌定稿，S3 切片）。
+ *
+ * 三态契约：页面层禁止自造加载/空/错误态——
+ * - loading → AdminTableSkeleton / AdminBlockSkeleton
+ * - empty   → AdminEmptyState（为什么为空 + 主动作）
+ * - error   → AdminTable 内联错误 + 重试（或页面级 AdminNoticeBanner 系统消息）
+ *
+ * 旧 admin-ui.tsx 四件套（Shell/Header/Banner/Modal）继续有效，
+ * 本目录补齐表格/筛选/反馈层。
+ */
+export { AdminEmptyState } from './AdminEmptyState';
+export { AdminTableSkeleton, AdminBlockSkeleton } from './AdminSkeleton';
+export { AdminTable } from './AdminTable';
+export type { AdminTableColumn } from './AdminTable';
+export { AdminFilters, AdminFilterChips } from './AdminFilters';
+export type { AdminFilterChip } from './AdminFilters';
+export { AdminToaster, toast } from './admin-toast';

From 9678d10c4dd719c16a942dfc384136e0126f8307 Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 08:50:02 +0800
Subject: [PATCH 3/9] =?UTF-8?q?feat(admin):=20=E5=A3=B3=E5=B1=82=E6=94=B9?=
 =?UTF-8?q?=E7=89=88=E2=80=94=E2=80=94=E5=9B=9B=E7=BB=84=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?/ink=20=E4=BE=A7=E8=BE=B9=E6=A0=8F/56px=20=E9=A1=B6=E6=A0=8F/?=
 =?UTF-8?q?=E6=A6=82=E8=A7=88=E6=8D=A2=E5=A3=B3=20(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

导航按领域名词分四组(内容/评测/用户/系统,频率排序默认全展开),
侧边栏 ink-900+橙左边条激活,顶栏 56px 面包屑+返回前台+账号菜单
(退出收敛至顶栏)。概览快捷卡 amber 裸类清零改 ink/primary。登录
跳转移出渲染期进 useEffect(修 React 19 渲染期更新 Router 报错)。
锁死的导航字面值测试同步更新。
---
 frontend/src/app/admin/layout.tsx            |  23 ++-
 frontend/src/app/admin/page.tsx              |   8 +-
 frontend/src/components/AdminSidebar.tsx     | 144 +++++++++----------
 frontend/src/components/AdminTopBar.tsx      | 109 +++++++++++---
 frontend/src/lib/__tests__/admin-nav.test.ts |  51 ++++---
 frontend/src/lib/admin-nav.ts                |  47 +++---
 frontend/src/lib/navigation.ts               |   1 +
 7 files changed, 238 insertions(+), 145 deletions(-)

diff --git a/frontend/src/app/admin/layout.tsx b/frontend/src/app/admin/layout.tsx
index b75b5a24..d61454f7 100644
--- a/frontend/src/app/admin/layout.tsx
+++ b/frontend/src/app/admin/layout.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Loader2, ShieldCheck } from 'lucide-react';
 import { useAppContext } from '@/components/ClientLayout';
 import AdminSidebar from '@/components/AdminSidebar';
 import AdminTopBar from '@/components/AdminTopBar';
 import { Panel } from '@/components/ui';
+import { AdminToaster } from '@/components/admin';
 
 export default function AdminLayout({
   children,
@@ -16,6 +17,15 @@ export default function AdminLayout({
   const { currentUser, authLoading } = useAppContext();
   const router = useRouter();
 
+  // 未登录跳转放 effect：渲染期调 router.replace 会触发
+  // 「Cannot update a component (Router) while rendering」（React 19 报错），
+  // 渲染期只出占位
+  useEffect(() => {
+    if (!authLoading && !currentUser) {
+      router.replace('/login');
+    }
+  }, [authLoading, currentUser, router]);
+
   // 加载中：显示骨架
   if (authLoading) {
     return (
@@ -28,11 +38,8 @@ export default function AdminLayout({
     );
   }
 
-  // 未登录：跳转登录页
+  // 未登录：渲染跳转占位（跳转动作见上方 effect）
   if (!currentUser) {
-    if (typeof window !== 'undefined') {
-      router.replace('/login');
-    }
     return (
       <div className="flex h-dvh items-center justify-center bg-page">
         <div className="inline-flex items-center gap-2 text-sm font-bold text-gray-500">
@@ -48,8 +55,8 @@ export default function AdminLayout({
     return (
       <div className="flex h-dvh items-center justify-center bg-page p-6">
         <Panel className="max-w-md p-8 text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-amber-50">
-            <ShieldCheck size={24} className="text-amber-500" strokeWidth={2} />
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary-light">
+            <ShieldCheck size={24} className="text-primary" strokeWidth={2} />
           </div>
           <h2 className="mb-2 text-base font-bold text-gray-900">需要管理员权限</h2>
           <p className="mb-5 text-[13px] leading-6 text-gray-500">
@@ -77,6 +84,8 @@ export default function AdminLayout({
           {children}
         </div>
       </main>
+      {/* 操作反馈 Toast：系统级消息仍走 AdminNoticeBanner（#121 边界） */}
+      <AdminToaster />
     </div>
   );
 }
diff --git a/frontend/src/app/admin/page.tsx b/frontend/src/app/admin/page.tsx
index d909335e..154e442a 100644
--- a/frontend/src/app/admin/page.tsx
+++ b/frontend/src/app/admin/page.tsx
@@ -68,14 +68,14 @@ export default function AdminDashboardPage() {
               onClick={() => router.push(card.href)}
               className="group text-left"
             >
-              <Panel className="h-full p-4 transition hover:border-amber-300 hover:shadow-[0_4px_16px_rgba(217,119,6,0.08)]">
+              <Panel className="h-full p-4 transition hover:border-primary-border hover:shadow-[0_4px_16px_rgba(255,107,53,0.08)]">
                 <div className="mb-2.5 flex items-center gap-2.5">
-                  <div className="flex h-9 w-9 items-center justify-center rounded-sm bg-amber-50 text-amber-600 transition group-hover:bg-amber-100">
+                  <div className="flex h-9 w-9 items-center justify-center rounded-sm bg-ink-100 text-ink-700 transition group-hover:bg-primary-light group-hover:text-primary-text">
                     <Icon size={18} strokeWidth={2} />
                   </div>
-                  <span className="text-[15px] font-bold text-gray-900">{card.label}</span>
+                  <span className="text-sm font-semibold text-ink-900">{card.label}</span>
                 </div>
-                <p className="text-[12px] leading-5 text-gray-500">
+                <p className="text-xs leading-5 text-ink-500">
                   {card.description}
                 </p>
               </Panel>
diff --git a/frontend/src/components/AdminSidebar.tsx b/frontend/src/components/AdminSidebar.tsx
index 159844e1..e46ea6f0 100644
--- a/frontend/src/components/AdminSidebar.tsx
+++ b/frontend/src/components/AdminSidebar.tsx
@@ -4,13 +4,11 @@ import React from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import {
   Activity,
-  ArrowLeft,
   BarChart3,
   BookOpen,
   BrainCircuit,
   GitMerge,
   LayoutDashboard,
-  LogOut,
   MessageSquareWarning,
   Newspaper,
   RadioTower,
@@ -24,7 +22,7 @@ import {
 } from 'lucide-react';
 import { cx } from '@/components/ui';
 import { useAppContext } from '@/components/ClientLayout';
-import { ADMIN_NAV_ITEMS as ADMIN_NAV_ENTRIES } from '@/lib/admin-nav';
+import { ADMIN_NAV_ITEMS as ADMIN_NAV_ENTRIES, ADMIN_NAV_GROUP_LABELS } from '@/lib/admin-nav';
 
 interface AdminNavItem {
   id: string;
@@ -37,7 +35,6 @@ interface AdminNavItem {
 // 缺映射时响亮抛错而不是静默渲染空白——「挂起/未挂载/被跳过」必须显式报错。
 const ADMIN_NAV_ICONS: Record<string, LucideIcon> = {
   dashboard: LayoutDashboard,
-  monitor: Activity,
   sources: RadioTower,
   contents: Newspaper,
   'content-events': GitMerge,
@@ -45,6 +42,7 @@ const ADMIN_NAV_ICONS: Record<string, LucideIcon> = {
   'model-eval': BrainCircuit,
   'mother-topics': BookOpen,
   updates: Rocket,
+  monitor: Activity,
   prompts: ScrollText,
   'scoring-dashboard': BarChart3,
   evidence: ShieldCheck,
@@ -54,7 +52,7 @@ const ADMIN_NAV_ICONS: Record<string, LucideIcon> = {
 };
 
 // admin 全量导航（含不在 NAV_SPACES 里的 /admin/contents、/admin/mother-topics）。
-// href/label 来自 @/lib/admin-nav 的唯一清单，顶栏面包屑由同一份派生（#88）。
+// href/label/group 来自 @/lib/admin-nav 的唯一清单，顶栏面包屑由同一份派生（#88）。
 const ADMIN_NAV_ITEMS: AdminNavItem[] = ADMIN_NAV_ENTRIES.map((entry) => {
   const icon = ADMIN_NAV_ICONS[entry.id];
   if (!icon) {
@@ -63,107 +61,101 @@ const ADMIN_NAV_ITEMS: AdminNavItem[] = ADMIN_NAV_ENTRIES.map((entry) => {
   return { id: entry.id, label: entry.label, href: entry.href, icon };
 });
 
+// 分组渲染结构：概览独立置顶，其余按清单 group 字段聚组（#121 圆桌定稿：
+// 领域名词组名 + 频率排序，默认全展开不折叠——折叠把识别变回回忆）。
+const NAV_GROUPS: { key: 'content' | 'eval' | 'users' | 'system'; items: AdminNavItem[] }[] = (
+  ['content', 'eval', 'users', 'system'] as const
+).map((key) => ({
+  key,
+  items: ADMIN_NAV_ITEMS.filter((item) => ADMIN_NAV_ENTRIES.find((e) => e.id === item.id)?.group === key),
+}));
+
+const PINNED_ITEM = ADMIN_NAV_ITEMS[0]; // 概览
+
 export default function AdminSidebar() {
   const pathname = usePathname();
   const router = useRouter();
-  const { currentUser, authLoading, logout } = useAppContext();
+  const { currentUser } = useAppContext();
 
   const isActive = (href: string) => {
     if (href === '/admin') return pathname === '/admin';
     return pathname === href || pathname.startsWith(`${href}/`);
   };
 
-  const handleLogout = () => {
-    if (logout) {
-      void logout();
-    }
+  const renderItem = (item: AdminNavItem) => {
+    const active = isActive(item.href);
+    const Icon = item.icon;
+    return (
+      <button
+        key={item.id}
+        type="button"
+        aria-current={active ? 'page' : undefined}
+        onClick={() => router.push(item.href)}
+        className={cx(
+          // #121 规格：14px/高 36px/内距 12px/圆角 6px；hover ink-800；
+          // active = 2px 橙左边条 + 文字最高亮度，不叠背景块（避免与徽章抢面积）。
+          'relative flex w-full items-center gap-2.5 rounded-xs px-3 py-2 text-left text-sm transition',
+          active
+            ? 'font-medium text-white'
+            : 'font-normal text-ink-500 hover:bg-ink-800 hover:text-white',
+        )}
+      >
+        {active && (
+          <span
+            aria-hidden="true"
+            className="absolute left-0 top-1/2 h-[18px] w-0.5 -translate-y-1/2 rounded-full bg-admin-accent"
+          />
+        )}
+        <Icon size={16} strokeWidth={active ? 2.2 : 1.8} className={active ? 'text-admin-accent' : undefined} />
+        <span>{item.label}</span>
+      </button>
+    );
   };
 
   return (
-    <div className="relative flex h-screen shrink-0 select-none flex-col bg-slate-900 text-slate-300" style={{ width: 220 }}>
+    <div className="relative flex h-screen shrink-0 select-none flex-col bg-ink-900 text-ink-500" style={{ width: 220 }}>
       {/* Brand */}
-      <div className="px-6 pb-6 pt-7">
+      <div className="px-5 pb-5 pt-6">
         <div className="flex items-center gap-2.5">
-          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-amber-500">
-            <ShieldCheck size={16} className="text-slate-900" strokeWidth={2.4} />
+          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-admin-accent">
+            <ShieldCheck size={16} className="text-ink-900" strokeWidth={2.4} />
           </div>
           <div>
-            <div className="text-[15px] font-bold leading-tight text-white">
-              管理后台
-            </div>
-            <div className="mt-px text-[10px] tracking-[0.08em] text-slate-500">
-              ADMIN CONSOLE
-            </div>
+            <div className="text-sm font-bold leading-tight text-white">管理后台</div>
+            <div className="mt-px text-[10px] tracking-[0.08em] text-ink-500">ADMIN CONSOLE</div>
           </div>
         </div>
       </div>
 
-      {/* Back to user side */}
-      <div className="px-3 pb-3">
-        <button
-          type="button"
-          onClick={() => router.push('/')}
-          className="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-left text-xs text-slate-400 transition hover:bg-slate-800 hover:text-white"
-        >
-          <ArrowLeft size={14} strokeWidth={2} />
-          返回用户侧
-        </button>
-      </div>
-
       {/* Navigation */}
-      <nav className="flex-1 overflow-y-auto px-3">
-        {ADMIN_NAV_ITEMS.map((item) => {
-          const active = isActive(item.href);
-          const Icon = item.icon;
-          return (
-            <button
-              key={item.id}
-              type="button"
-              aria-current={active ? 'page' : undefined}
-              onClick={() => {
-                if (item.href.startsWith('/dashboard')) {
-                  window.open(item.href, '_blank');
-                } else {
-                  router.push(item.href);
-                }
-              }}
-              className={cx(
-                'mb-0.5 flex w-full items-center gap-2 rounded-sm px-3 py-2.5 text-left text-sm transition',
-                active
-                  ? 'bg-amber-500/15 font-semibold text-amber-400'
-                  : 'font-normal text-slate-400 hover:bg-slate-800 hover:text-white',
-              )}
-            >
-              <Icon size={16} strokeWidth={active ? 2.2 : 1.8} />
-              <span>{item.label}</span>
-            </button>
-          );
-        })}
+      <nav aria-label="管理后台导航" className="flex-1 overflow-y-auto px-3 pb-4">
+        {PINNED_ITEM && (
+          <div className="mb-4">{renderItem(PINNED_ITEM)}</div>
+        )}
+        {NAV_GROUPS.map((group) => (
+          <div key={group.key} className="mb-4">
+            {/* #121 规格：分组标题 12px/ink-500/大写/字距 0.08em，组间上距 24 下距 8 */}
+            <div className="mb-1.5 mt-6 px-3 text-[10px] font-semibold uppercase tracking-[0.08em] text-ink-500 first:mt-0">
+              {ADMIN_NAV_GROUP_LABELS[group.key]}
+            </div>
+            <div className="space-y-0.5">{group.items.map(renderItem)}</div>
+          </div>
+        ))}
       </nav>
 
-      {/* Bottom User Area */}
-      <div className="border-t border-slate-800 px-3 pb-4 pt-3">
+      {/* Bottom User Area：身份展示；会话操作（退出）移至顶栏账号菜单（#121）。 */}
+      <div className="border-t border-ink-800 px-5 pb-4 pt-3">
         {currentUser && (
-          <div className="flex items-center justify-between gap-2 px-3">
-            <div className="min-w-0">
-              <div className="truncate text-xs font-medium text-slate-300">
+          <div className="flex items-center gap-2">
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-xs font-medium text-ink-300">
                 {currentUser.display_name || currentUser.email}
               </div>
-              <div className="flex items-center gap-1 text-[10px] text-amber-500">
+              <div className="flex items-center gap-1 text-[10px] text-ink-500">
                 <ShieldCheck size={10} strokeWidth={2.4} />
                 管理员
               </div>
             </div>
-            <button
-              type="button"
-              onClick={handleLogout}
-              disabled={authLoading}
-              aria-label="退出登录"
-              className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-slate-500 transition hover:bg-slate-800 hover:text-red-400"
-              title="退出登录"
-            >
-              <LogOut size={14} strokeWidth={2} />
-            </button>
           </div>
         )}
       </div>
diff --git a/frontend/src/components/AdminTopBar.tsx b/frontend/src/components/AdminTopBar.tsx
index 81c80f0e..e021770e 100644
--- a/frontend/src/components/AdminTopBar.tsx
+++ b/frontend/src/components/AdminTopBar.tsx
@@ -1,35 +1,106 @@
 'use client';
 
-import React from 'react';
-import { usePathname } from 'next/navigation';
-import { ChevronRight, ShieldCheck } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { ChevronRight, ExternalLink, LogOut, ShieldCheck, UserRound } from 'lucide-react';
 import { useAppContext } from '@/components/ClientLayout';
 import { findAdminPageLabel } from '@/lib/admin-nav';
 
+/**
+ * 后台顶栏（#121 圆桌规格）：56px 高、白底、下边框 1px ink-200。
+ * 职责边界——面包屑（你在哪）+ 返回前台 + 账号菜单（会话操作）。
+ * 页面级操作按钮一律不进顶栏：那是各页自己的事，混进来会拖慢任务路径。
+ */
 export default function AdminTopBar() {
   const pathname = usePathname();
-  const { currentUser } = useAppContext();
+  const router = useRouter();
+  const { currentUser, logout } = useAppContext();
   // 页面名由 @/lib/admin-nav 的导航清单派生（#88），不再手写第二份映射表。
-  // 此前两份目录互相矛盾（侧边栏 15 项 / 面包屑 10 条），4 个页面的顶栏
-  // 回退显示兜底文案「管理」，与侧边栏自相矛盾。
   const pageLabel = findAdminPageLabel(pathname);
 
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    const onClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('mousedown', onClickOutside);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('mousedown', onClickOutside);
+    };
+  }, [menuOpen]);
+
+  const handleLogout = () => {
+    setMenuOpen(false);
+    if (logout) {
+      void logout();
+    }
+  };
+
   return (
-    <div className="flex h-12 shrink-0 items-center justify-between border-b border-slate-200 bg-white px-6">
-      {/* Breadcrumb */}
-      <nav className="flex items-center gap-1.5 text-[13px]">
-        <span className="font-bold text-amber-600">管理后台</span>
-        <ChevronRight size={14} className="text-gray-300" strokeWidth={2.2} />
-        <span className="font-medium text-gray-700">{pageLabel}</span>
+    <div className="flex h-14 shrink-0 items-center justify-between border-b border-ink-200 bg-white px-6">
+      {/* Breadcrumb：分隔符 ink-300，当前项 ink-900（#121 规格） */}
+      <nav aria-label="面包屑" className="flex items-center gap-1.5 text-[13px]">
+        <span className="font-bold text-admin-accent">管理后台</span>
+        <ChevronRight size={14} className="text-ink-300" strokeWidth={2.2} aria-hidden="true" />
+        <span className="font-medium text-ink-900">{pageLabel}</span>
       </nav>
 
-      {/* Admin badge */}
-      {currentUser && (
-        <div className="flex items-center gap-1.5 rounded-sm bg-amber-50 px-2.5 py-1 text-[11px] font-bold text-amber-700">
-          <ShieldCheck size={12} strokeWidth={2.4} />
-          {currentUser.display_name || currentUser.email}
-        </div>
-      )}
+      <div className="flex items-center gap-2">
+        {/* 返回前台：管理员的日常是跨前后台跳转，常驻顶栏 */}
+        <button
+          type="button"
+          onClick={() => router.push('/')}
+          className="flex items-center gap-1.5 rounded-xs border border-ink-200 bg-white px-3 py-1.5 text-xs font-medium text-ink-700 transition hover:border-ink-300 hover:text-ink-900"
+        >
+          <ExternalLink size={13} strokeWidth={2} aria-hidden="true" />
+          返回前台
+        </button>
+
+        {/* 账号菜单：会话操作收敛于此（侧栏底部只留身份展示） */}
+        {currentUser && (
+          <div ref={menuRef} className="relative">
+            <button
+              type="button"
+              onClick={() => setMenuOpen((v) => !v)}
+              aria-haspopup="menu"
+              aria-expanded={menuOpen}
+              className="flex items-center gap-1.5 rounded-xs px-2 py-1.5 text-xs font-medium text-ink-700 transition hover:bg-ink-100 hover:text-ink-900"
+            >
+              <UserRound size={14} strokeWidth={2} aria-hidden="true" />
+              <span className="max-w-[160px] truncate">
+                {currentUser.display_name || currentUser.email}
+              </span>
+              <ShieldCheck size={12} className="text-admin-accent" strokeWidth={2.4} aria-hidden="true" />
+            </button>
+            {menuOpen && (
+              <div
+                role="menu"
+                className="absolute right-0 top-[calc(100%+6px)] z-50 w-40 rounded-sm border border-ink-200 bg-white p-1 shadow-lg"
+              >
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={handleLogout}
+                  className="flex w-full items-center gap-2 rounded-xs px-2.5 py-2 text-left text-xs font-medium text-red-600 transition hover:bg-red-50"
+                >
+                  <LogOut size={13} strokeWidth={2} aria-hidden="true" />
+                  退出登录
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/lib/__tests__/admin-nav.test.ts b/frontend/src/lib/__tests__/admin-nav.test.ts
index 0939bbfe..98febeb7 100644
--- a/frontend/src/lib/__tests__/admin-nav.test.ts
+++ b/frontend/src/lib/__tests__/admin-nav.test.ts
@@ -38,26 +38,31 @@ describe('ADMIN_NAV_ITEMS 结构不变式', () => {
   /**
    * 独立复核 M7：结构性不变量（唯一性/派生一致）锁不住**字面值**——
    * 把 `updates` 的 label+href 同时改掉，179 条测试无一报警。
-   * 这里把 15 项逐字锁死：改导航必须是有意识的动作，并同步改这条期望。
+   * 这里把全部导航项逐字锁死：改导航必须是有意识的动作，并同步改这条期望。
+   *
+   * 2026-10-18（#121 后台改版）：新增 group 字段（四组领域分组）；
+   * 「内容事件治理」→「事件治理」、「系统母题模板库」→「母题库」缩名。
+   * 2026-10-19（owner 验收反馈定稿）：任务统计从用户侧 /stats/jobs 迁入
+   * 后台壳（/admin/jobs「任务监控」，系统组），旧路径留服务端跳转桩。
    */
   it('15 项字面值逐项锁死（改导航必须同步改本表）', () => {
-    const actual = ADMIN_NAV_ITEMS.map((i) => [i.id, i.label, i.href, i.inShell]);
+    const actual = ADMIN_NAV_ITEMS.map((i) => [i.id, i.label, i.href, i.inShell, i.group ?? null]);
     expect(actual).toEqual([
-      ['dashboard', '概览', '/admin', true],
-      ['monitor', '监控大盘', '/dashboard', false],
-      ['sources', '信源管理', '/admin/sources', true],
-      ['contents', '内容管理', '/admin/contents', true],
-      ['content-events', '内容事件治理', '/admin/content-events', true],
-      ['users', '用户管理', '/admin/users', true],
-      ['model-eval', 'AI 引擎', '/admin/model-eval', true],
-      ['mother-topics', '系统母题模板库', '/admin/mother-topics', true],
-      ['updates', '发版记录', '/admin/updates', true],
-      ['prompts', 'Prompt 管理', '/admin/prompts', true],
-      ['scoring-dashboard', '评分看板', '/admin/scoring-dashboard', true],
-      ['evidence', '可信线索', '/admin/evidence', true],
-      ['feedback', '反馈工作台', '/admin/feedback', true],
-      ['webhook-logs', 'Webhook 日志', '/admin/webhook-logs', true],
-      ['settings', '系统设置', '/admin/settings', true],
+      ['dashboard', '概览', '/admin', true, null],
+      ['sources', '信源管理', '/admin/sources', true, 'content'],
+      ['contents', '内容管理', '/admin/contents', true, 'content'],
+      ['content-events', '事件治理', '/admin/content-events', true, 'content'],
+      ['mother-topics', '母题库', '/admin/mother-topics', true, 'content'],
+      ['model-eval', 'AI 引擎', '/admin/model-eval', true, 'eval'],
+      ['scoring-dashboard', '评分看板', '/admin/scoring-dashboard', true, 'eval'],
+      ['evidence', '可信线索', '/admin/evidence', true, 'eval'],
+      ['users', '用户管理', '/admin/users', true, 'users'],
+      ['feedback', '反馈工作台', '/admin/feedback', true, 'users'],
+      ['updates', '发版记录', '/admin/updates', true, 'users'],
+      ['monitor', '任务监控', '/admin/jobs', true, 'system'],
+      ['prompts', 'Prompt 管理', '/admin/prompts', true, 'system'],
+      ['webhook-logs', 'Webhook 日志', '/admin/webhook-logs', true, 'system'],
+      ['settings', '系统设置', '/admin/settings', true, 'system'],
     ]);
   });
 });
@@ -68,14 +73,14 @@ describe('面包屑映射与清单一致（#88 核心不变量）', () => {
     expect(missing).toEqual([]);
   });
 
-  it('映射表不含任何壳外路径（监控大盘由 window.open 单独打开）', () => {
+  it('映射表不含任何壳外路径（清单全壳内，防回归）', () => {
     expect(ADMIN_PAGE_LABELS['/dashboard']).toBeUndefined();
   });
 
-  it('壳内 14 项、壳外 1 项（/dashboard 监控大盘）', () => {
-    expect(ADMIN_IN_SHELL_PATHS).toHaveLength(14);
+  it('壳内 15 项、壳外 0 项（任务监控已迁入壳内 /admin/jobs）', () => {
+    expect(ADMIN_IN_SHELL_PATHS).toHaveLength(15);
     expect(ADMIN_NAV_ITEMS).toHaveLength(15);
-    expect(ADMIN_NAV_ITEMS.filter((i) => !i.inShell).map((i) => i.href)).toEqual(['/dashboard']);
+    expect(ADMIN_NAV_ITEMS.filter((i) => !i.inShell)).toEqual([]);
   });
 
   it('#88 修复的四个页面都有真实页面名，不再回退到「管理」', () => {
@@ -114,7 +119,7 @@ describe('findAdminPageLabel', () => {
     expect(findAdminPageLabel('/totally/unknown')).toBe(ADMIN_FALLBACK_LABEL);
   });
 
-  it('壳外路径（监控大盘）不在壳内时也走兜底', () => {
-    expect(findAdminPageLabel('/dashboard')).toBe(ADMIN_FALLBACK_LABEL);
+  it('用户侧路径不在壳内清单，走兜底', () => {
+    expect(findAdminPageLabel('/stats/jobs')).toBe(ADMIN_FALLBACK_LABEL);
   });
 });
diff --git a/frontend/src/lib/admin-nav.ts b/frontend/src/lib/admin-nav.ts
index 704aa0ab..6c4162e0 100644
--- a/frontend/src/lib/admin-nav.ts
+++ b/frontend/src/lib/admin-nav.ts
@@ -23,28 +23,43 @@ export interface AdminNavEntry {
   href: string;
   /**
    * 是否在 admin 壳内渲染并出现在面包屑里。
-   * `/dashboard`（监控大盘）由侧边栏 `window.open` 在新标签页打开，
-   * 脱离本壳，因此不参与面包屑映射。
+   *
+   * 2026-10-19（owner 验收反馈定稿）：「任务监控」从用户侧 /stats/jobs
+   * 迁入本壳（/admin/jobs）——流水线健康信息本就属于后台；旧路径保留
+   * 服务端跳转桩。清单自此前不再有壳外项。
    */
   inShell: boolean;
+  /**
+   * 导航分组（圆桌 2026-10-18，issue #121）：领域名词做组名（可猜中，
+   * Nielsen 6「识别而非回忆」），组间顺序按操作频率排、组内按管道序。
+   * 概览不归组，独立置顶。
+   */
+  group?: 'content' | 'eval' | 'users' | 'system';
 }
 
+export const ADMIN_NAV_GROUP_LABELS: Readonly<Record<NonNullable<AdminNavEntry['group']>, string>> = Object.freeze({
+  content: '内容',
+  eval: '评测',
+  users: '用户',
+  system: '系统',
+});
+
 export const ADMIN_NAV_ITEMS: readonly AdminNavEntry[] = [
   { id: 'dashboard', label: '概览', href: '/admin', inShell: true },
-  { id: 'monitor', label: '监控大盘', href: '/dashboard', inShell: false },
-  { id: 'sources', label: '信源管理', href: '/admin/sources', inShell: true },
-  { id: 'contents', label: '内容管理', href: '/admin/contents', inShell: true },
-  { id: 'content-events', label: '内容事件治理', href: '/admin/content-events', inShell: true },
-  { id: 'users', label: '用户管理', href: '/admin/users', inShell: true },
-  { id: 'model-eval', label: 'AI 引擎', href: '/admin/model-eval', inShell: true },
-  { id: 'mother-topics', label: '系统母题模板库', href: '/admin/mother-topics', inShell: true },
-  { id: 'updates', label: '发版记录', href: '/admin/updates', inShell: true },
-  { id: 'prompts', label: 'Prompt 管理', href: '/admin/prompts', inShell: true },
-  { id: 'scoring-dashboard', label: '评分看板', href: '/admin/scoring-dashboard', inShell: true },
-  { id: 'evidence', label: '可信线索', href: '/admin/evidence', inShell: true },
-  { id: 'feedback', label: '反馈工作台', href: '/admin/feedback', inShell: true },
-  { id: 'webhook-logs', label: 'Webhook 日志', href: '/admin/webhook-logs', inShell: true },
-  { id: 'settings', label: '系统设置', href: '/admin/settings', inShell: true },
+  { id: 'sources', label: '信源管理', href: '/admin/sources', inShell: true, group: 'content' },
+  { id: 'contents', label: '内容管理', href: '/admin/contents', inShell: true, group: 'content' },
+  { id: 'content-events', label: '事件治理', href: '/admin/content-events', inShell: true, group: 'content' },
+  { id: 'mother-topics', label: '母题库', href: '/admin/mother-topics', inShell: true, group: 'content' },
+  { id: 'model-eval', label: 'AI 引擎', href: '/admin/model-eval', inShell: true, group: 'eval' },
+  { id: 'scoring-dashboard', label: '评分看板', href: '/admin/scoring-dashboard', inShell: true, group: 'eval' },
+  { id: 'evidence', label: '可信线索', href: '/admin/evidence', inShell: true, group: 'eval' },
+  { id: 'users', label: '用户管理', href: '/admin/users', inShell: true, group: 'users' },
+  { id: 'feedback', label: '反馈工作台', href: '/admin/feedback', inShell: true, group: 'users' },
+  { id: 'updates', label: '发版记录', href: '/admin/updates', inShell: true, group: 'users' },
+  { id: 'monitor', label: '任务监控', href: '/admin/jobs', inShell: true, group: 'system' },
+  { id: 'prompts', label: 'Prompt 管理', href: '/admin/prompts', inShell: true, group: 'system' },
+  { id: 'webhook-logs', label: 'Webhook 日志', href: '/admin/webhook-logs', inShell: true, group: 'system' },
+  { id: 'settings', label: '系统设置', href: '/admin/settings', inShell: true, group: 'system' },
 ];
 
 /** 壳内路由 → 页面名。由清单派生，不手写第二份。 */
diff --git a/frontend/src/lib/navigation.ts b/frontend/src/lib/navigation.ts
index 89bd2588..b725b868 100644
--- a/frontend/src/lib/navigation.ts
+++ b/frontend/src/lib/navigation.ts
@@ -106,6 +106,7 @@ const EXTRA_ADMIN_ONLY_PATHS = [
   '/admin/feedback',
   '/admin/settings',
   '/admin/users',
+  '/admin/jobs',
 ];
 
 // 显式声明的公开路径（未登录可访问）。OAuth 回调页与 MCP 授权同意页

From 37e44ae42bbcf98775e066d1c65378faa183dc9f Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 08:50:14 +0800
Subject: [PATCH 4/9] =?UTF-8?q?feat(admin):=20=E7=B3=BB=E7=BB=9F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=8B=86=E5=88=86=E7=BB=84=E5=8D=A1+=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E9=94=9A=E7=82=B9,=E6=AF=8F=E7=BB=84=E7=8B=AC?=
 =?UTF-8?q?=E7=AB=8B=E4=BF=9D=E5=AD=98=20(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

641 行纵向长滚动改三张分组卡(邮件服务/第三方登录/通知推送),
右侧 sticky 锚点导航(IntersectionObserver 于 Shell 滚动容器),
每组独立保存按钮+loading 防重;成功反馈就近 toast,系统级错误
保留 AdminNoticeBanner。业务逻辑与 API 调用不动。
---
 frontend/src/app/admin/settings/page.tsx | 892 +++++++++++++----------
 1 file changed, 511 insertions(+), 381 deletions(-)

diff --git a/frontend/src/app/admin/settings/page.tsx b/frontend/src/app/admin/settings/page.tsx
index 26069915..932fab83 100644
--- a/frontend/src/app/admin/settings/page.tsx
+++ b/frontend/src/app/admin/settings/page.tsx
@@ -1,14 +1,14 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import type { LucideIcon } from 'lucide-react';
 import { CheckCircle2, KeyRound, Loader2, LogIn, Mail, Plus, Server, Settings, Trash2, Webhook } from 'lucide-react';
-import { useAppContext } from '@/components/ClientLayout';
 import { settingsApi } from '@/lib/api';
 import type { EmailProviderConfig, NotificationWebhookConfig, OAuthProviderItem, WebhookItem, WebhookItemUpdate } from '@/lib/api/_analytics';
 import { NOTIFICATION_EVENT_TYPES } from '@/lib/api/_analytics';
-import { Badge, Button, Panel } from '@/components/ui';
+import { Badge, Button, Panel, cx } from '@/components/ui';
 import { AdminPageShell, AdminPageHeader, AdminNoticeBanner } from '@/components/admin-ui';
-import { LoadingState } from '@/components/StateView';
+import { AdminBlockSkeleton, AdminEmptyState, toast } from '@/components/admin';
 
 const DEFAULT_FROM_NAME = 'TopicEye';
 
@@ -26,8 +26,95 @@ const SMTP_NOTES: string[] = [
   '部分邮箱（如 QQ、163）需使用授权码而非登录密码',
 ];
 
+/** 通知推送说明项（原独立说明 Panel 合并进分组卡脚注） */
+const WEBHOOK_NOTES: React.ReactNode[] = [
+  '支持配置多个 webhook，每个独立配置推送事件类型',
+  '支持飞书 / 钉钉 / Slack 群机器人 incoming webhook',
+  'webhook URL 含 token，以加密方式存储，不会明文保存',
+  '推送场景：信源失败告警 / 日报生成完成 / 周报生成完成 / 今日精选推送 / 测试发送',
+  <>
+    环境变量 <code className="rounded-xs bg-ink-100 px-1 py-0.5 font-mono text-[11px]">ALERT_WEBHOOK_URL</code> 仍生效（运维通道，不参与事件过滤）
+  </>,
+];
+
+/** 分组锚点导航：id 与下方分组卡 Panel 的 id 一一对应 */
+const SECTION_LINKS = [
+  { id: 'settings-email', label: '邮件服务' },
+  { id: 'settings-oauth', label: '第三方登录' },
+  { id: 'settings-webhook', label: '通知推送' },
+] as const;
+
+// ── 表单基样式（#121 新原语：ink token + admin-accent 聚焦，替代散落的 gray/primary 旧写法） ──
+const FIELD_LABEL_CLASS = 'mb-1.5 block text-xs font-medium text-ink-500';
+const INPUT_CLASS =
+  'h-9 w-full rounded-xs border border-ink-200 bg-white px-3 text-[13px] text-ink-900 placeholder:text-ink-500 focus:border-admin-accent focus:outline-none';
+const INPUT_ICON_WRAPPER_CLASS =
+  'flex items-center rounded-xs border border-ink-200 bg-white px-3 focus-within:border-admin-accent focus-within:outline-none';
+
+/** 分组卡：带锚点 id 的 Panel，统一「图标 + 标题 + 右侧状态/操作」头部 */
+function SettingsSection({
+  id,
+  icon: Icon,
+  title,
+  actions,
+  description,
+  children,
+}: {
+  id: string;
+  icon: LucideIcon;
+  title: string;
+  actions?: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <Panel id={id} className="p-5 sm:p-6">
+      <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <Icon size={15} className="shrink-0 text-ink-500" strokeWidth={2.2} />
+          <h2 className="text-sm font-black text-ink-900">{title}</h2>
+        </div>
+        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+      </div>
+      {description && <p className="mb-4 text-xs leading-5 text-ink-500">{description}</p>}
+      {children}
+    </Panel>
+  );
+}
+
+/** 表单字段：统一 label + 控件结构 */
+function Field({
+  label,
+  children,
+  className,
+}: {
+  label: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <label className={cx('block', className)}>
+      <span className={FIELD_LABEL_CLASS}>{label}</span>
+      {children}
+    </label>
+  );
+}
+
+/** 卡内说明脚注：合并原独立「配置说明」Panel */
+function SectionNotes({ title, items }: { title: string; items: readonly React.ReactNode[] }) {
+  return (
+    <div className="mt-5 border-t border-ink-100 pt-4">
+      <h3 className="mb-2 text-xs font-bold text-ink-700">{title}</h3>
+      <ul className="list-disc space-y-1.5 pl-4 text-xs leading-5 text-ink-500">
+        {items.map((item, i) => (
+          <li key={i}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 export default function AdminSettingsPage() {
-  const { currentUser } = useAppContext();
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [config, setConfig] = useState<EmailProviderConfig | null>(null);
@@ -38,7 +125,6 @@ export default function AdminSettingsPage() {
   const [smtpUsername, setSmtpUsername] = useState('');
   const [smtpPassword, setSmtpPassword] = useState('');
   const [smtpUseSsl, setSmtpUseSsl] = useState(false);
-  const [notice, setNotice] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   // 通知推送 webhook 状态（多 webhook 列表）
@@ -47,16 +133,17 @@ export default function AdminSettingsPage() {
   const [webhookSaving, setWebhookSaving] = useState(false);
   const [webhookTesting, setWebhookTesting] = useState(false);
   const [webhookTestResult, setWebhookTestResult] = useState<string | null>(null);
-  const [webhookNotice, setWebhookNotice] = useState<string | null>(null);
   const [webhookError, setWebhookError] = useState<string | null>(null);
 
   // 第三方登录（OAuth）provider 配置状态
   const [oauthProviders, setOauthProviders] = useState<OAuthProviderItem[]>([]);
   const [oauthForms, setOauthForms] = useState<Record<string, { client_id: string; client_secret: string; enabled: boolean }>>({});
   const [oauthSaving, setOauthSaving] = useState<string | null>(null);
-  const [oauthNotice, setOauthNotice] = useState<string | null>(null);
   const [oauthError, setOauthError] = useState<string | null>(null);
 
+  // 锚点导航当前高亮分组
+  const [activeSection, setActiveSection] = useState<string>(SECTION_LINKS[0].id);
+
   const syncOauthForms = (providers: OAuthProviderItem[]) => {
     setOauthProviders(providers);
     setOauthForms(
@@ -98,6 +185,33 @@ export default function AdminSettingsPage() {
       .finally(() => setLoading(false));
   }, []);
 
+  // 锚点导航高亮：分组卡进入视口上部激活带即点亮。
+  // 用 IntersectionObserver 而非 window scroll——本页滚动发生在 AdminPageShell
+  // 内部滚动容器里，scroll 事件不会冒泡到 window。
+  useEffect(() => {
+    const sections = SECTION_LINKS
+      .map(({ id }) => document.getElementById(id))
+      .filter((el): el is HTMLElement => el !== null);
+    if (sections.length === 0) return;
+
+    const visible = new Set<string>();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) visible.add(entry.target.id);
+          else visible.delete(entry.target.id);
+        }
+        // 激活带内可见的组取文档序最后一组：下滑时新组一进带即点亮
+        const next = [...SECTION_LINKS].reverse().find(({ id }) => visible.has(id));
+        if (next) setActiveSection(next.id);
+      },
+      // 激活带 = 视口上部约 1/3，其余留给阅读区
+      { rootMargin: '0px 0px -66% 0px' },
+    );
+    sections.forEach((section) => observer.observe(section));
+    return () => observer.disconnect();
+  }, []);
+
   // 切换 SSL 时联动常用端口
   const handleSslToggle = (checked: boolean) => {
     setSmtpUseSsl(checked);
@@ -108,7 +222,6 @@ export default function AdminSettingsPage() {
   const handleSave = async () => {
     setSaving(true);
     setError(null);
-    setNotice(null);
     try {
       await settingsApi.updateEmailProvider({
         provider: 'smtp',
@@ -121,7 +234,7 @@ export default function AdminSettingsPage() {
         smtp_use_ssl: smtpUseSsl,
       });
       setSmtpPassword('');
-      setNotice('保存成功');
+      toast.success('已保存');
       const fresh = await settingsApi.getEmailProvider();
       setConfig(fresh);
     } catch (err) {
@@ -134,10 +247,9 @@ export default function AdminSettingsPage() {
   const handleSaveWebhook = async () => {
     setWebhookSaving(true);
     setWebhookError(null);
-    setWebhookNotice(null);
     try {
       await settingsApi.updateNotificationWebhook({ webhooks });
-      setWebhookNotice('保存成功');
+      toast.success('已保存');
       const fresh = await settingsApi.getNotificationWebhook();
       setWebhookConfig(fresh);
       setWebhooks(
@@ -166,14 +278,13 @@ export default function AdminSettingsPage() {
     if (!form) return;
     setOauthSaving(provider);
     setOauthError(null);
-    setOauthNotice(null);
     try {
       await settingsApi.updateOAuthProvider(provider, {
         client_id: form.client_id,
         client_secret: form.client_secret,
         enabled: form.enabled,
       });
-      setOauthNotice(`${OAUTH_PROVIDER_LABELS[provider] || provider} 已保存`);
+      toast.success('已保存');
       const fresh = await settingsApi.getOAuthProviders();
       syncOauthForms(fresh.providers);
     } catch (err) {
@@ -232,410 +343,429 @@ export default function AdminSettingsPage() {
     }
   };
 
-  // admin 守卫已收敛到 app/admin/layout.tsx
-
-  if (loading) {
-    return (
-      <AdminPageShell maxWidth={860}>
-        <LoadingState label="加载中…" minHeight="200px" panel />
-      </AdminPageShell>
-    );
-  }
+  // admin 守卫已收敛到 app/admin/layout.tsx；本页 loading 期间保持
+  // 分组卡结构渲染骨架（布局稳定防跳变），不做全屏 spinner 早退。
 
   return (
-    <AdminPageShell maxWidth={860}>
+    <AdminPageShell maxWidth={1280}>
       <AdminPageHeader
         title="系统设置"
         icon={Settings}
-        description="配置系统级邮件服务，用于注册验证码等事务邮件发送"
+        description="邮件服务、第三方登录与通知推送的系统级配置，按分组独立保存"
       />
 
-        <Panel className="p-6">
-          <div className="mb-5 flex items-center justify-between">
-            <h2 className="text-base font-black text-gray-900">邮件服务</h2>
-            {config?.smtp_password_configured ? (
+      <div className="flex items-start gap-6">
+        {/* 分组卡主列 */}
+        <div className="min-w-0 flex-1 space-y-5">
+          {error && (
+            <AdminNoticeBanner tone="red" onClose={() => setError(null)}>{error}</AdminNoticeBanner>
+          )}
+
+          {/* ── 邮件服务 ── */}
+          <SettingsSection
+            id="settings-email"
+            icon={Mail}
+            title="邮件服务"
+            actions={!loading && (config?.smtp_password_configured ? (
               <Badge tone="teal">
                 <CheckCircle2 size={12} className="mr-1" />
                 已配置
               </Badge>
             ) : (
               <Badge tone="amber">未配置</Badge>
-            )}
-          </div>
-
-          {/* 通用字段：发件人 */}
-          <label className="mt-4 block">
-            <span className="mb-1.5 block text-xs font-black text-gray-500">发件人邮箱</span>
-            <div className="flex items-center rounded-sm border border-gray-200 bg-white px-3 focus-within:border-primary-border focus-within:ring-2 focus-within:ring-primary-light">
-              <Mail size={15} className="shrink-0 text-gray-400" />
-              <input
-                value={fromEmail}
-                onChange={(e) => setFromEmail(e.target.value)}
-                type="email"
-                placeholder="noreply@yourdomain.com"
-                className="h-10 min-w-0 flex-1 bg-transparent px-2 text-sm outline-none"
-              />
-            </div>
-          </label>
-
-          <label className="mt-4 block">
-            <span className="mb-1.5 block text-xs font-black text-gray-500">发件人名称</span>
-            <input
-              value={fromName}
-              onChange={(e) => setFromName(e.target.value)}
-              className="h-10 w-full rounded-sm border border-gray-200 bg-white px-3 text-sm outline-none focus:border-primary-border focus:ring-2 focus:ring-primary-light"
-            />
-          </label>
-
-          {/* SMTP 配置 */}
-              <label className="mt-4 block">
-                <span className="mb-1.5 block text-xs font-black text-gray-500">SMTP 服务器</span>
-                <div className="flex items-center rounded-sm border border-gray-200 bg-white px-3 focus-within:border-primary-border focus-within:ring-2 focus-within:ring-primary-light">
-                  <Server size={15} className="shrink-0 text-gray-400" />
-                  <input
-                    value={smtpHost}
-                    onChange={(e) => setSmtpHost(e.target.value)}
-                    placeholder="smtp.qq.com"
-                    className="h-10 min-w-0 flex-1 bg-transparent px-2 text-sm outline-none"
-                  />
-                </div>
-              </label>
+            ))}
+          >
+            {loading ? (
+              <AdminBlockSkeleton lines={7} />
+            ) : (
+              <>
+                <Field label="发件人邮箱" className="mt-1">
+                  <div className={INPUT_ICON_WRAPPER_CLASS}>
+                    <Mail size={14} className="shrink-0 text-ink-500" />
+                    <input
+                      value={fromEmail}
+                      onChange={(e) => setFromEmail(e.target.value)}
+                      type="email"
+                      placeholder="noreply@yourdomain.com"
+                      className="h-9 min-w-0 flex-1 bg-transparent px-2 text-[13px] text-ink-900 outline-none placeholder:text-ink-500"
+                    />
+                  </div>
+                </Field>
 
-              <div className="mt-4 flex gap-3">
-                <label className="block flex-1">
-                  <span className="mb-1.5 block text-xs font-black text-gray-500">端口</span>
+                <Field label="发件人名称" className="mt-4">
                   <input
-                    value={smtpPort}
-                    onChange={(e) => setSmtpPort(Number(e.target.value) || 587)}
-                    type="number"
-                    className="h-10 w-full rounded-sm border border-gray-200 bg-white px-3 text-sm outline-none focus:border-primary-border focus:ring-2 focus:ring-primary-light"
+                    value={fromName}
+                    onChange={(e) => setFromName(e.target.value)}
+                    className={INPUT_CLASS}
                   />
-                </label>
-                <div className="flex w-32 items-end pb-2.5">
-                  <label className="flex cursor-pointer items-center gap-2 text-xs font-black text-gray-600">
+                </Field>
+
+                <Field label="SMTP 服务器" className="mt-4">
+                  <div className={INPUT_ICON_WRAPPER_CLASS}>
+                    <Server size={14} className="shrink-0 text-ink-500" />
                     <input
-                      type="checkbox"
-                      checked={smtpUseSsl}
-                      onChange={(e) => handleSslToggle(e.target.checked)}
-                      className="h-4 w-4 rounded border-gray-300"
+                      value={smtpHost}
+                      onChange={(e) => setSmtpHost(e.target.value)}
+                      placeholder="smtp.qq.com"
+                      className="h-9 min-w-0 flex-1 bg-transparent px-2 text-[13px] text-ink-900 outline-none placeholder:text-ink-500"
                     />
-                    SSL 直连
-                  </label>
+                  </div>
+                </Field>
+
+                <div className="mt-4 flex gap-3">
+                  <Field label="端口" className="min-w-0 flex-1">
+                    <input
+                      value={smtpPort}
+                      onChange={(e) => setSmtpPort(Number(e.target.value) || 587)}
+                      type="number"
+                      className={INPUT_CLASS}
+                    />
+                  </Field>
+                  <div className="flex w-32 items-end pb-2.5">
+                    <label className="flex cursor-pointer items-center gap-2 text-xs font-medium text-ink-700">
+                      <input
+                        type="checkbox"
+                        checked={smtpUseSsl}
+                        onChange={(e) => handleSslToggle(e.target.checked)}
+                        className="h-4 w-4 rounded border-ink-300 accent-ink-900"
+                      />
+                      SSL 直连
+                    </label>
+                  </div>
                 </div>
-              </div>
-              <p className="mt-1 text-[11px] text-gray-400">
-                勾选 SSL 通常用 465；不勾选则用 STARTTLS（587）。会自动联动端口。
-              </p>
-
-              <label className="mt-4 block">
-                <span className="mb-1.5 block text-xs font-black text-gray-500">SMTP 用户名</span>
-                <input
-                  value={smtpUsername}
-                  onChange={(e) => setSmtpUsername(e.target.value)}
-                  placeholder="通常为发件人邮箱"
-                  className="h-10 w-full rounded-sm border border-gray-200 bg-white px-3 text-sm outline-none focus:border-primary-border focus:ring-2 focus:ring-primary-light"
-                />
-              </label>
-
-              <label className="mt-4 block">
-                <span className="mb-1.5 block text-xs font-black text-gray-500">SMTP 密码 / 授权码</span>
-                <div className="flex items-center rounded-sm border border-gray-200 bg-white px-3 focus-within:border-primary-border focus-within:ring-2 focus-within:ring-primary-light">
-                  <KeyRound size={15} className="shrink-0 text-gray-400" />
+                <p className="mt-1 text-[11px] text-ink-500">
+                  勾选 SSL 通常用 465；不勾选则用 STARTTLS（587）。会自动联动端口。
+                </p>
+
+                <Field label="SMTP 用户名" className="mt-4">
                   <input
-                    value={smtpPassword}
-                    onChange={(e) => setSmtpPassword(e.target.value)}
-                    type="password"
-                    placeholder={
-                      config?.smtp_password_configured
-                        ? `已配置（${config.smtp_password_preview}****）留空不修改`
-                        : '输入密码或授权码'
-                    }
-                    className="h-10 min-w-0 flex-1 bg-transparent px-2 text-sm outline-none"
+                    value={smtpUsername}
+                    onChange={(e) => setSmtpUsername(e.target.value)}
+                    placeholder="通常为发件人邮箱"
+                    className={INPUT_CLASS}
                   />
+                </Field>
+
+                <Field label="SMTP 密码 / 授权码" className="mt-4">
+                  <div className={INPUT_ICON_WRAPPER_CLASS}>
+                    <KeyRound size={14} className="shrink-0 text-ink-500" />
+                    <input
+                      value={smtpPassword}
+                      onChange={(e) => setSmtpPassword(e.target.value)}
+                      type="password"
+                      placeholder={
+                        config?.smtp_password_configured
+                          ? `已配置（${config.smtp_password_preview}****）留空不修改`
+                          : '输入密码或授权码'
+                      }
+                      className="h-9 min-w-0 flex-1 bg-transparent px-2 text-[13px] text-ink-900 outline-none placeholder:text-ink-500"
+                    />
+                  </div>
+                </Field>
+
+                <div className="mt-5 flex justify-end">
+                  <Button type="button" variant="primary" onClick={handleSave} disabled={saving || !fromEmail.trim()}>
+                    {saving ? <Loader2 size={14} className="animate-spin" /> : null}
+                    {saving ? '保存中...' : '保存配置'}
+                  </Button>
                 </div>
-              </label>
-          {error && (
-            <AdminNoticeBanner tone="red" onClose={() => setError(null)}>{error}</AdminNoticeBanner>
-          )}
-          {notice && (
-            <AdminNoticeBanner tone="teal" onClose={() => setNotice(null)}>{notice}</AdminNoticeBanner>
-          )}
 
-          <div className="mt-5 flex justify-end">
-            <Button variant="primary" onClick={handleSave} disabled={saving || !fromEmail.trim()}>
-              {saving ? <Loader2 size={14} className="animate-spin" /> : null}
-              {saving ? '保存中...' : '保存配置'}
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="p-5">
-          <h3 className="mb-2 text-sm font-black text-gray-700">配置说明</h3>
-          <ul className="space-y-1.5 text-xs text-gray-500">
-            {SMTP_NOTES.map((note) => (
-              <li key={note}>{note}</li>
-            ))}
-          </ul>
-        </Panel>
-
-        {/* ── 第三方登录（OAuth provider 凭据，DB 单一事实源 #94） ── */}
-        <Panel className="p-6">
-          <div className="mb-5 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <LogIn size={16} className="text-gray-500" />
-              <h2 className="text-base font-black text-gray-900">第三方登录</h2>
-            </div>
-            {oauthProviders.some((p) => p.enabled && p.client_secret_configured) ? (
+                <SectionNotes title="配置说明" items={SMTP_NOTES} />
+              </>
+            )}
+          </SettingsSection>
+
+          {/* ── 第三方登录（OAuth provider 凭据，DB 单一事实源 #94） ── */}
+          <SettingsSection
+            id="settings-oauth"
+            icon={LogIn}
+            title="第三方登录"
+            description="配置 Google / GitHub 登录凭据，保存后即时生效（无需重启）。client_secret 加密存储，永不回传。"
+            actions={!loading && (oauthProviders.some((p) => p.enabled && p.client_secret_configured) ? (
               <Badge tone="teal">
                 <CheckCircle2 size={12} className="mr-1" />
                 {oauthProviders.filter((p) => p.enabled && p.client_secret_configured).length} 个已启用
               </Badge>
             ) : (
               <Badge tone="amber">未启用</Badge>
+            ))}
+          >
+            {loading ? (
+              <AdminBlockSkeleton lines={6} />
+            ) : oauthProviders.length === 0 ? (
+              <AdminEmptyState
+                icon={LogIn}
+                title="暂无可配置的登录方式"
+                description="服务端未注册任何 OAuth provider"
+                compact
+              />
+            ) : (
+              <>
+                <div className="space-y-4">
+                  {oauthProviders.map((p) => {
+                    const form = oauthForms[p.provider] || { client_id: '', client_secret: '', enabled: false };
+                    const configured = p.client_secret_configured && !!p.client_id;
+                    return (
+                      <div key={p.provider} className="rounded-xs border border-ink-200 p-4">
+                        <div className="mb-3 flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <input
+                              type="checkbox"
+                              checked={form.enabled}
+                              onChange={(e) => handleUpdateOauthForm(p.provider, { enabled: e.target.checked })}
+                              className="h-4 w-4 rounded border-ink-300 accent-ink-900"
+                            />
+                            <span className="text-sm font-bold text-ink-900">{OAUTH_PROVIDER_LABELS[p.provider] || p.provider}</span>
+                            {configured ? (
+                              <Badge tone={p.enabled ? 'teal' : 'neutral'}>{p.enabled ? '已启用' : '已配置未启用'}</Badge>
+                            ) : (
+                              <Badge tone="amber">未配置</Badge>
+                            )}
+                          </div>
+                        </div>
+
+                        <Field label="Client ID">
+                          <input
+                            value={form.client_id}
+                            onChange={(e) => handleUpdateOauthForm(p.provider, { client_id: e.target.value })}
+                            placeholder={p.provider === 'google' ? 'xxxx.apps.googleusercontent.com' : 'Ov23liXXXXXXXXXXXXXX'}
+                            className={INPUT_CLASS}
+                          />
+                        </Field>
+
+                        <Field label="Client Secret" className="mt-3">
+                          <div className={INPUT_ICON_WRAPPER_CLASS}>
+                            <KeyRound size={14} className="shrink-0 text-ink-500" />
+                            <input
+                              value={form.client_secret}
+                              onChange={(e) => handleUpdateOauthForm(p.provider, { client_secret: e.target.value })}
+                              type="password"
+                              placeholder={p.client_secret_configured ? '已配置（加密存储）留空不修改' : '输入 Client Secret'}
+                              className="h-9 min-w-0 flex-1 bg-transparent px-2 text-[13px] text-ink-900 outline-none placeholder:text-ink-500"
+                            />
+                          </div>
+                        </Field>
+
+                        <div className="mt-4 flex justify-end">
+                          <Button
+                            type="button"
+                            variant="primary"
+                            onClick={() => handleSaveOauth(p.provider)}
+                            disabled={oauthSaving === p.provider || (form.enabled && (!form.client_id.trim() || (!form.client_secret.trim() && !p.client_secret_configured)))}
+                          >
+                            {oauthSaving === p.provider ? <Loader2 size={14} className="animate-spin" /> : null}
+                            {oauthSaving === p.provider ? '保存中...' : '保存'}
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {oauthError && (
+                  <AdminNoticeBanner tone="red" className="mt-4" onClose={() => setOauthError(null)}>{oauthError}</AdminNoticeBanner>
+                )}
+              </>
             )}
-          </div>
+          </SettingsSection>
+
+          {/* ── 通知推送 webhook（多 webhook 列表） ── */}
+          <SettingsSection
+            id="settings-webhook"
+            icon={Webhook}
+            title="通知推送"
+            description="将运营通知推送到飞书 / 钉钉 / Slack 群机器人。每个 webhook 可独立配置推送事件类型。webhook URL 加密存储。"
+            actions={
+              <>
+                {!loading && (webhookConfig?.webhooks.some((w) => w.enabled && w.webhook_url_configured) ? (
+                  <Badge tone="teal">
+                    <CheckCircle2 size={12} className="mr-1" />
+                    {webhookConfig.webhooks.filter((w) => w.enabled && w.webhook_url_configured).length} 个已启用
+                  </Badge>
+                ) : (
+                  <Badge tone="amber">未配置</Badge>
+                ))}
+                <Button type="button" variant="ghost" onClick={handleAddWebhook} disabled={loading} className="!px-2 !py-1 text-xs">
+                  <Plus size={12} className="mr-1" />
+                  添加
+                </Button>
+              </>
+            }
+          >
+            {loading ? (
+              <AdminBlockSkeleton lines={8} />
+            ) : webhooks.length === 0 ? (
+              <AdminEmptyState
+                icon={Webhook}
+                title="暂无 webhook 配置"
+                description="添加一个 webhook，把信源失败告警与日报推送送到群里"
+                compact
+                action={
+                  <Button type="button" variant="secondary" onClick={handleAddWebhook}>
+                    <Plus size={12} className="mr-1" />
+                    添加 webhook
+                  </Button>
+                }
+              />
+            ) : (
+              <>
+                <div className="space-y-4">
+                  {webhooks.map((wh, index) => {
+                    const original = webhookConfig?.webhooks[index];
+                    const urlConfigured = original?.webhook_url_configured;
+                    const urlPreview = original?.webhook_url_preview || '';
+                    return (
+                      <div key={index} className="rounded-xs border border-ink-200 p-4">
+                        {/* 行 1：名称 + 启用 + 删除 */}
+                        <div className="mb-3 flex items-center justify-between">
+                          <div className="flex min-w-0 items-center gap-2">
+                            <input
+                              type="checkbox"
+                              checked={wh.enabled}
+                              onChange={(e) => handleUpdateWebhook(index, { enabled: e.target.checked })}
+                              className="h-4 w-4 rounded border-ink-300 accent-ink-900"
+                            />
+                            <input
+                              value={wh.name}
+                              onChange={(e) => handleUpdateWebhook(index, { name: e.target.value })}
+                              placeholder={`Webhook ${index + 1}（如：运营群）`}
+                              className="h-8 w-48 rounded-xs border border-ink-200 bg-white px-2 text-[13px] font-bold text-ink-900 outline-none placeholder:font-normal placeholder:text-ink-500 focus:border-admin-accent"
+                            />
+                            {urlConfigured ? (
+                              <Badge tone={wh.enabled ? 'teal' : 'neutral'}>
+                                {wh.enabled ? '已启用' : '未启用'}
+                              </Badge>
+                            ) : null}
+                          </div>
+                          <button
+                            type="button"
+                            onClick={() => handleRemoveWebhook(index)}
+                            className="shrink-0 text-ink-300 transition hover:text-red-500"
+                            title="删除"
+                            aria-label={`删除 Webhook ${index + 1}`}
+                          >
+                            <Trash2 size={14} />
+                          </button>
+                        </div>
+
+                        {/* Webhook URL */}
+                        <Field label="Webhook URL">
+                          <div className={INPUT_ICON_WRAPPER_CLASS}>
+                            <Webhook size={14} className="shrink-0 text-ink-500" />
+                            <input
+                              value={wh.webhook_url}
+                              onChange={(e) => handleUpdateWebhook(index, { webhook_url: e.target.value })}
+                              type="password"
+                              placeholder={
+                                urlConfigured
+                                  ? `已配置（${urlPreview}****）留空不修改`
+                                  : 'https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxxxx'
+                              }
+                              className="h-9 min-w-0 flex-1 bg-transparent px-2 text-[13px] text-ink-900 outline-none placeholder:text-ink-500"
+                            />
+                          </div>
+                        </Field>
+
+                        {/* 推送事件类型 */}
+                        <div className="mt-3">
+                          <span className={FIELD_LABEL_CLASS}>推送事件类型</span>
+                          <div className="flex flex-wrap gap-1.5">
+                            {NOTIFICATION_EVENT_TYPES.map((et) => {
+                              const checked = wh.event_types.includes(et.value);
+                              return (
+                                <label
+                                  key={et.value}
+                                  className={cx(
+                                    'flex cursor-pointer items-center gap-1 rounded-xs border px-2 py-1 text-xs transition',
+                                    checked
+                                      ? 'border-admin-accent bg-admin-accent/10 text-ink-900'
+                                      : 'border-ink-200 bg-white text-ink-500 hover:border-ink-300',
+                                  )}
+                                >
+                                  <input
+                                    type="checkbox"
+                                    checked={checked}
+                                    onChange={(e) => handleToggleEventType(index, et.value, e.target.checked)}
+                                    className="h-3 w-3 rounded border-ink-300 accent-ink-900"
+                                  />
+                                  {et.label}
+                                </label>
+                              );
+                            })}
+                          </div>
+                        </div>
+
+                        {/* 备注 */}
+                        <Field label="备注（可选）" className="mt-3">
+                          <input
+                            value={wh.note}
+                            onChange={(e) => handleUpdateWebhook(index, { note: e.target.value })}
+                            placeholder="如：飞书运营群"
+                            className={INPUT_CLASS}
+                          />
+                        </Field>
+                      </div>
+                    );
+                  })}
+                </div>
 
-          <p className="mb-4 text-xs text-gray-500">
-            配置 Google / GitHub 登录凭据，保存后即时生效（无需重启）。client_secret 加密存储，永不回传。
-          </p>
+                {webhookError && (
+                  <AdminNoticeBanner tone="red" className="mt-4" onClose={() => setWebhookError(null)}>{webhookError}</AdminNoticeBanner>
+                )}
+                {webhookTestResult && (
+                  <AdminNoticeBanner tone="teal" className="mt-4" onClose={() => setWebhookTestResult(null)}>
+                    <pre className="whitespace-pre-wrap font-sans text-xs">{webhookTestResult}</pre>
+                  </AdminNoticeBanner>
+                )}
+
+                <div className="mt-5 flex flex-wrap items-center justify-between gap-3">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={handleTestWebhook}
+                    disabled={webhookTesting || !webhookConfig?.webhooks.some((w) => w.webhook_url_configured)}
+                  >
+                    {webhookTesting ? <Loader2 size={14} className="animate-spin" /> : null}
+                    {webhookTesting ? '发送中...' : '发送测试（全部）'}
+                  </Button>
+                  <Button type="button" variant="primary" onClick={handleSaveWebhook} disabled={webhookSaving}>
+                    {webhookSaving ? <Loader2 size={14} className="animate-spin" /> : null}
+                    {webhookSaving ? '保存中...' : '保存配置'}
+                  </Button>
+                </div>
 
-          <div className="space-y-4">
-            {oauthProviders.map((p) => {
-              const form = oauthForms[p.provider] || { client_id: '', client_secret: '', enabled: false };
-              const configured = p.client_secret_configured && !!p.client_id;
+                <SectionNotes title="推送说明" items={WEBHOOK_NOTES} />
+              </>
+            )}
+          </SettingsSection>
+        </div>
+
+        {/* 分组锚点导航：sticky 于滚动容器顶部，滚动/点击高亮当前组 */}
+        <nav aria-label="设置分组导航" className="sticky top-5 hidden w-44 shrink-0 lg:block">
+          <ul className="space-y-0.5 border-l border-ink-200">
+            {SECTION_LINKS.map(({ id, label }) => {
+              const active = activeSection === id;
               return (
-                <div key={p.provider} className="rounded-sm border border-gray-200 p-4">
-                  <div className="mb-3 flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <input
-                        type="checkbox"
-                        checked={form.enabled}
-                        onChange={(e) => handleUpdateOauthForm(p.provider, { enabled: e.target.checked })}
-                        className="h-4 w-4 rounded border-gray-300"
-                      />
-                      <span className="text-sm font-black text-gray-700">{OAUTH_PROVIDER_LABELS[p.provider] || p.provider}</span>
-                      {configured ? (
-                        <Badge tone={p.enabled ? 'teal' : 'neutral'}>{p.enabled ? '已启用' : '已配置未启用'}</Badge>
-                      ) : (
-                        <Badge tone="amber">未配置</Badge>
-                      )}
-                    </div>
-                  </div>
-
-                  <label className="block">
-                    <span className="mb-1.5 block text-xs font-black text-gray-500">Client ID</span>
-                    <input
-                      value={form.client_id}
-                      onChange={(e) => handleUpdateOauthForm(p.provider, { client_id: e.target.value })}
-                      placeholder={p.provider === 'google' ? 'xxxx.apps.googleusercontent.com' : 'Ov23liXXXXXXXXXXXXXX'}
-                      className="h-9 w-full rounded-sm border border-gray-200 bg-white px-3 text-sm outline-none focus:border-primary-border focus:ring-2 focus:ring-primary-light"
-                    />
-                  </label>
-
-                  <label className="mt-3 block">
-                    <span className="mb-1.5 block text-xs font-black text-gray-500">Client Secret</span>
-                    <div className="flex items-center rounded-sm border border-gray-200 bg-white px-3 focus-within:border-primary-border focus-within:ring-2 focus:ring-primary-light">
-                      <KeyRound size={14} className="shrink-0 text-gray-400" />
-                      <input
-                        value={form.client_secret}
-                        onChange={(e) => handleUpdateOauthForm(p.provider, { client_secret: e.target.value })}
-                        type="password"
-                        placeholder={p.client_secret_configured ? '已配置（加密存储）留空不修改' : '输入 Client Secret'}
-                        className="h-9 min-w-0 flex-1 bg-transparent px-2 text-sm outline-none"
-                      />
-                    </div>
-                  </label>
-
-                  <div className="mt-4 flex justify-end">
-                    <Button
-                      variant="primary"
-                      onClick={() => handleSaveOauth(p.provider)}
-                      disabled={oauthSaving === p.provider || (form.enabled && (!form.client_id.trim() || (!form.client_secret.trim() && !p.client_secret_configured)))}
-                    >
-                      {oauthSaving === p.provider ? <Loader2 size={14} className="animate-spin" /> : null}
-                      {oauthSaving === p.provider ? '保存中...' : '保存'}
-                    </Button>
-                  </div>
-                </div>
+                <li key={id}>
+                  <a
+                    href={`#${id}`}
+                    aria-current={active ? 'true' : undefined}
+                    onClick={() => setActiveSection(id)}
+                    className={cx(
+                      '-ml-px block border-l-2 py-1.5 pl-3 text-[13px] transition',
+                      active
+                        ? 'border-admin-accent font-medium text-ink-900'
+                        : 'border-transparent text-ink-500 hover:border-ink-300 hover:text-ink-700',
+                    )}
+                  >
+                    {label}
+                  </a>
+                </li>
               );
             })}
-          </div>
-
-          {oauthError && (
-            <AdminNoticeBanner tone="red" onClose={() => setOauthError(null)}>{oauthError}</AdminNoticeBanner>
-          )}
-          {oauthNotice && (
-            <AdminNoticeBanner tone="teal" onClose={() => setOauthNotice(null)}>{oauthNotice}</AdminNoticeBanner>
-          )}
-        </Panel>
-
-        {/* ── 通知推送 webhook（多 webhook 列表） ── */}
-        <Panel className="p-6">
-          <div className="mb-5 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Webhook size={16} className="text-gray-500" />
-              <h2 className="text-base font-black text-gray-900">通知推送</h2>
-            </div>
-            <div className="flex items-center gap-2">
-              {webhookConfig?.webhooks.some((w) => w.enabled && w.webhook_url_configured) ? (
-                <Badge tone="teal">
-                  <CheckCircle2 size={12} className="mr-1" />
-                  {webhookConfig.webhooks.filter((w) => w.enabled && w.webhook_url_configured).length} 个已启用
-                </Badge>
-              ) : (
-                <Badge tone="amber">未配置</Badge>
-              )}
-              <Button variant="ghost" onClick={handleAddWebhook} className="!px-2 !py-1 text-xs">
-                <Plus size={12} className="mr-1" />
-                添加
-              </Button>
-            </div>
-          </div>
-
-          <p className="mb-4 text-xs text-gray-500">
-            将运营通知推送到飞书 / 钉钉 / Slack 群机器人。每个 webhook 可独立配置推送事件类型。webhook URL 加密存储。
-          </p>
-
-          {/* webhook 列表 */}
-          {webhooks.length === 0 ? (
-            <div className="rounded-sm border border-dashed border-gray-200 py-8 text-center text-xs text-gray-400">
-              暂无 webhook 配置，点击右上角「添加」按钮新增
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {webhooks.map((wh, index) => {
-                const original = webhookConfig?.webhooks[index];
-                const urlConfigured = original?.webhook_url_configured;
-                const urlPreview = original?.webhook_url_preview || '';
-                return (
-                  <div key={index} className="rounded-sm border border-gray-200 p-4">
-                    {/* 行 1：名称 + 启用 + 删除 */}
-                    <div className="mb-3 flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <input
-                          type="checkbox"
-                          checked={wh.enabled}
-                          onChange={(e) => handleUpdateWebhook(index, { enabled: e.target.checked })}
-                          className="h-4 w-4 rounded border-gray-300"
-                        />
-                        <input
-                          value={wh.name}
-                          onChange={(e) => handleUpdateWebhook(index, { name: e.target.value })}
-                          placeholder={`Webhook ${index + 1}（如：运营群）`}
-                          className="h-8 w-48 rounded-sm border border-gray-200 px-2 text-sm font-black outline-none focus:border-primary-border"
-                        />
-                        {urlConfigured ? (
-                          <Badge tone={wh.enabled ? 'teal' : 'neutral'}>
-                            {wh.enabled ? '已启用' : '未启用'}
-                          </Badge>
-                        ) : null}
-                      </div>
-                      <button
-                        onClick={() => handleRemoveWebhook(index)}
-                        className="text-gray-400 hover:text-red-500"
-                        title="删除"
-                      >
-                        <Trash2 size={14} />
-                      </button>
-                    </div>
-
-                    {/* Webhook URL */}
-                    <label className="block">
-                      <span className="mb-1 block text-xs font-black text-gray-500">Webhook URL</span>
-                      <div className="flex items-center rounded-sm border border-gray-200 bg-white px-3 focus-within:border-primary-border focus-within:ring-2 focus-within:ring-primary-light">
-                        <Webhook size={14} className="shrink-0 text-gray-400" />
-                        <input
-                          value={wh.webhook_url}
-                          onChange={(e) => handleUpdateWebhook(index, { webhook_url: e.target.value })}
-                          type="password"
-                          placeholder={
-                            urlConfigured
-                              ? `已配置（${urlPreview}****）留空不修改`
-                              : 'https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxxxx'
-                          }
-                          className="h-9 min-w-0 flex-1 bg-transparent px-2 text-sm outline-none"
-                        />
-                      </div>
-                    </label>
-
-                    {/* 推送事件类型 */}
-                    <div className="mt-3">
-                      <span className="mb-1.5 block text-xs font-black text-gray-500">推送事件类型</span>
-                      <div className="flex flex-wrap gap-1.5">
-                        {NOTIFICATION_EVENT_TYPES.map((et) => {
-                          const checked = wh.event_types.includes(et.value);
-                          return (
-                            <label
-                              key={et.value}
-                              className={`flex cursor-pointer items-center gap-1 rounded-sm border px-2 py-1 text-xs ${checked ? 'border-primary-border bg-primary-light/20 text-gray-700' : 'border-gray-200 text-gray-500'}`}
-                            >
-                              <input
-                                type="checkbox"
-                                checked={checked}
-                                onChange={(e) => handleToggleEventType(index, et.value, e.target.checked)}
-                                className="h-3 w-3 rounded border-gray-300"
-                              />
-                              {et.label}
-                            </label>
-                          );
-                        })}
-                      </div>
-                    </div>
-
-                    {/* 备注 */}
-                    <label className="mt-3 block">
-                      <span className="mb-1 block text-xs font-black text-gray-500">备注（可选）</span>
-                      <input
-                        value={wh.note}
-                        onChange={(e) => handleUpdateWebhook(index, { note: e.target.value })}
-                        placeholder="如：飞书运营群"
-                        className="h-9 w-full rounded-sm border border-gray-200 px-3 text-sm outline-none focus:border-primary-border"
-                      />
-                    </label>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {webhookError && (
-            <AdminNoticeBanner tone="red" onClose={() => setWebhookError(null)}>{webhookError}</AdminNoticeBanner>
-          )}
-          {webhookNotice && (
-            <AdminNoticeBanner tone="teal" onClose={() => setWebhookNotice(null)}>{webhookNotice}</AdminNoticeBanner>
-          )}
-          {webhookTestResult && (
-            <AdminNoticeBanner tone="teal" onClose={() => setWebhookTestResult(null)}>
-              <pre className="whitespace-pre-wrap font-sans text-xs">{webhookTestResult}</pre>
-            </AdminNoticeBanner>
-          )}
-
-          <div className="mt-5 flex items-center justify-between gap-3">
-            <Button
-              variant="ghost"
-              onClick={handleTestWebhook}
-              disabled={webhookTesting || !webhookConfig?.webhooks.some((w) => w.webhook_url_configured)}
-            >
-              {webhookTesting ? <Loader2 size={14} className="animate-spin" /> : null}
-              {webhookTesting ? '发送中...' : '发送测试（全部）'}
-            </Button>
-            <Button variant="primary" onClick={handleSaveWebhook} disabled={webhookSaving}>
-              {webhookSaving ? <Loader2 size={14} className="animate-spin" /> : null}
-              {webhookSaving ? '保存中...' : '保存配置'}
-            </Button>
-          </div>
-        </Panel>
-
-        <Panel className="p-5">
-          <h3 className="mb-2 text-sm font-black text-gray-700">通知推送说明</h3>
-          <ul className="space-y-1.5 text-xs text-gray-500">
-            <li>支持配置多个 webhook，每个独立配置推送事件类型</li>
-            <li>支持飞书 / 钉钉 / Slack 群机器人 incoming webhook</li>
-            <li>webhook URL 含 token，以加密方式存储，不会明文保存</li>
-            <li>推送场景：信源失败告警 / 日报生成完成 / 周报生成完成 / 今日精选推送 / 测试发送</li>
-            <li>环境变量 <code className="rounded bg-gray-100 px-1">ALERT_WEBHOOK_URL</code> 仍生效（运维通道，不参与事件过滤）</li>
           </ul>
-        </Panel>
+        </nav>
+      </div>
     </AdminPageShell>
   );
 }

From d4fe2b33740e2640fcd60460936253d30ae26a0f Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 08:50:14 +0800
Subject: [PATCH 5/9] =?UTF-8?q?feat(admin):=20=E4=BF=A1=E6=BA=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E5=90=83=E6=BB=A1=E5=8E=9F=E8=AF=AD=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E8=A1=A8=E6=A0=BC=E4=B8=89=E6=80=81/=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=20chips/URL=20=E5=90=8C=E6=AD=A5=20(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

列表换 AdminTable(八列/粘性操作列/同步+编辑直显+···菜单收其余),
删除/暂停/批量暂停统一 AdminModal 二次确认替代原生 confirm;筛选
换 AdminFilters+chips 单移除+清空全部;URL query 两段式同步(挂载后
恢复,防 hydration mismatch,didRestore 门防双请求);分页接每页条数。
添加/编辑弹窗接 isDirty 脏关闭。批量部分失败仍走横幅保留重试路径。
---
 frontend/src/app/admin/sources/_modals.tsx |   23 +-
 frontend/src/app/admin/sources/page.tsx    | 1133 ++++++++++++++++----
 2 files changed, 926 insertions(+), 230 deletions(-)

diff --git a/frontend/src/app/admin/sources/_modals.tsx b/frontend/src/app/admin/sources/_modals.tsx
index fc6236e8..96b3721c 100644
--- a/frontend/src/app/admin/sources/_modals.tsx
+++ b/frontend/src/app/admin/sources/_modals.tsx
@@ -18,12 +18,25 @@ import React from 'react';
 import { Upload } from 'lucide-react';
 import { Badge, Button, Panel } from '@/components/ui';
 import { AdminModal, AdminModalFooter } from '@/components/admin-ui';
-import SourceForm, { type FormState } from '@/components/SourceForm';
+import SourceForm, { emptyForm, type FormState } from '@/components/SourceForm';
 import type { BackendSource } from '@/components/SourceRow';
 import { sourceTypeLabel } from '@/lib/source-sync-board';
 import type { SourceBatchImportItem } from '@/lib/api';
 import { useDialogFocus } from '@/components/useDialogFocus';
 
+/**
+ * 脏检测：与挂载时快照比较（两个模态都是条件挂载，每次打开重新取基线）。
+ * 添加态再叠加「与空表单比较」——add 关闭不重置 form，重开时残留值仍算脏。
+ */
+function useFormDirty(form: FormState, extraCleanBaseline?: FormState) {
+  const mountBaseline = React.useRef(form);
+  return React.useMemo(() => {
+    if (JSON.stringify(form) === JSON.stringify(mountBaseline.current)) return false;
+    if (extraCleanBaseline && JSON.stringify(form) === JSON.stringify(extraCleanBaseline)) return false;
+    return true;
+  }, [form, extraCleanBaseline]);
+}
+
 export function AddSourceModal({
   form,
   setForm,
@@ -37,8 +50,10 @@ export function AddSourceModal({
   onCreate: () => void;
   onClose: () => void;
 }) {
+  // #121：表单脏时 ESC/遮罩关闭先过 AdminModal 内联确认，防误丢输入
+  const isDirty = useFormDirty(form, emptyForm);
   return (
-    <AdminModal title="添加信源" onClose={onClose}>
+    <AdminModal title="添加信源" onClose={onClose} isDirty={isDirty}>
       <SourceForm form={form} setForm={setForm} />
       <AdminModalFooter>
         <Button type="button" variant="secondary" onClick={onClose} disabled={submitting} className="px-5">
@@ -197,8 +212,10 @@ export function EditSourceModal({
   onUpdate: () => void;
   onClose: () => void;
 }) {
+  // #121：编辑表单脏时 ESC/遮罩关闭先过内联确认（H5 错误预防）
+  const isDirty = useFormDirty(form);
   return (
-    <AdminModal title="编辑信源" onClose={onClose}>
+    <AdminModal title="编辑信源" onClose={onClose} isDirty={isDirty}>
       <SourceForm form={form} setForm={setForm} />
       <AdminModalFooter>
         <Button type="button" variant="secondary" onClick={onClose} disabled={submitting} className="px-5">
diff --git a/frontend/src/app/admin/sources/page.tsx b/frontend/src/app/admin/sources/page.tsx
index ff69658e..b39784e2 100644
--- a/frontend/src/app/admin/sources/page.tsx
+++ b/frontend/src/app/admin/sources/page.tsx
@@ -1,50 +1,323 @@
 'use client';
 
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { Activity, FileSearch, List, Network, Plus, Star, Upload } from 'lucide-react';
-import { favoritesApi, sourcesApi, settingsApi } from '@/lib/api';
-import type { RSSHubInstance, CreateSourceRequest, SourceBatchImportItem, UpdateSourceRequest } from '@/lib/api';
+/**
+ * 信源管理（S5 切片，#121 后台改版）。
+ *
+ * 列表视图由手写 grid 迁移到 AdminTable（三态内建：骨架 / 内联错误+重试 / 空态），
+ * 高频动作（同步 / 编辑）直接可见，其余收进行尾「···」菜单；
+ * 删除 / 暂停类破坏性动作统一走二次确认弹窗（替代原生 confirm）。
+ * 筛选换 AdminFilters（搜索 300ms 防抖）+ AdminFilterChips（单移除 / 清空全部）。
+ * 筛选 / 搜索 / 页码 / 每页条数 / 视图与 URL query 双向同步（四页试点之一）。
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Activity,
+  FileSearch,
+  List,
+  MoreHorizontal,
+  Network,
+  Pause,
+  Play,
+  Plus,
+  ShieldCheck,
+  Star,
+  Trash2,
+  Upload,
+} from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { favoritesApi, settingsApi, sourcesApi } from '@/lib/api';
+import type { CreateSourceRequest, RSSHubInstance, SourceBatchImportItem, UpdateSourceRequest } from '@/lib/api';
 import { useAppContext } from '@/components/ClientLayout';
 import { timeAgo } from '@/lib/utils';
-import { Badge, Button, Panel, Toolbar, cx } from '@/components/ui';
-import { AdminPageShell, AdminPageHeader, AdminNoticeBanner } from '@/components/admin-ui';
-import SourceForm, { FormState, emptyForm } from '@/components/SourceForm';
-import SourceRowComponent, { type BackendSource } from '@/components/SourceRow';
+import { Badge, Button, PanelTitle, cx } from '@/components/ui';
+import { AdminModal, AdminModalFooter, AdminNoticeBanner, AdminPageHeader, AdminPageShell } from '@/components/admin-ui';
+import { AdminEmptyState, AdminFilterChips, AdminFilters, AdminTable, toast } from '@/components/admin';
+import type { AdminFilterChip, AdminTableColumn } from '@/components/admin';
+import { Pagination } from '@/components/Pagination';
+import { emptyForm } from '@/components/SourceForm';
+import type { FormState } from '@/components/SourceForm';
 import { Spinner } from '@/components/SourceRow';
+import type { BackendSource } from '@/components/SourceRow';
 import SourceSyncBoard from '@/components/SourceSyncBoard';
 import { buildSourceSyncBoard, sourceTypeLabel } from '@/lib/source-sync-board';
 import { getFavoriteTargetKey } from '@/lib/favorites';
+import { EvidenceProfileModal } from '@/components/EvidenceProfileModal';
 import {
   type SourceTierKey,
-  type DropTarget,
-  sourceTierMeta,
   getSourceTier,
   normalizeRsshubInstanceUrl,
-  isPlainObject,
   validateApiSourceConfig,
 } from './_sources-utils';
 
-import { SourceMapCard, SourceMapView } from './_components';
+import { SourceMapView } from './_components';
 import { AddSourceModal, BatchImportModal, EditSourceModal } from './_modals';
-import { EvidenceProfileModal } from '@/components/EvidenceProfileModal';
-import { RSSHubManager, SourceListPanel, FeatureFlagsPanel } from './_panels';
+import { RSSHubManager, FeatureFlagsPanel } from './_panels';
 import { describeBatchResult, recomputeSelectionAfterBatch, runBatchToggle } from './_batch-utils';
 
+// ─── 常量 ───
+
+const SOURCE_TYPE_FILTERS = ['RSS', 'RSSHub', 'TwitterRSS', 'Reddit', 'API', 'Zhihu', '网站'] as const;
+
+const TYPE_BADGE_TONE: Record<string, 'neutral' | 'primary' | 'teal' | 'amber' | 'purple'> = {
+  RSS: 'purple',
+  RSSHub: 'teal',
+  API: 'primary',
+  网站: 'amber',
+};
+
+const INTERVAL_OPTIONS = [
+  { value: 30, label: '30分钟' },
+  { value: 60, label: '1小时' },
+  { value: 120, label: '2小时' },
+  { value: 360, label: '6小时' },
+  { value: 720, label: '12小时' },
+  { value: 1440, label: '1天' },
+];
+
+const DEFAULT_PAGE_SIZE = 20;
+const PAGE_SIZE_OPTIONS = [10, 20, 50] as const;
+
+// ─── URL query 同步（#121 四页试点之一）──
+// 挂载时从 location.search 恢复初始状态；此后筛选/搜索/页码/每页条数变化用
+// history.replaceState 覆写 query——不产生历史记录、不触发导航，
+// 刻意不用 useSearchParams 以避开 Suspense 边界（与 contents 页同口径）。
+// 默认值（第 1 页、每页 20、无筛选、地图视图）不写入 query，保持 URL 干净。
+
+type SourcesQueryState = {
+  page: number;
+  pageSize: number;
+  q: string;
+  type: string;
+  enabled: boolean | undefined;
+  view: 'map' | 'sync' | 'list';
+};
+
+function defaultSourcesQueryState(): SourcesQueryState {
+  return {
+    page: 1,
+    pageSize: DEFAULT_PAGE_SIZE,
+    q: '',
+    type: '',
+    enabled: undefined,
+    view: 'map',
+  };
+}
+
+function readInitialStateFromLocation(): SourcesQueryState {
+  const defaults = defaultSourcesQueryState();
+  const sp = new URLSearchParams(window.location.search);
+  const page = Math.max(1, Number.parseInt(sp.get('page') ?? '', 10) || 1);
+  const rawPageSize = Number.parseInt(sp.get('page_size') ?? '', 10);
+  const pageSize = (PAGE_SIZE_OPTIONS as readonly number[]).includes(rawPageSize)
+    ? rawPageSize
+    : DEFAULT_PAGE_SIZE;
+  const rawType = sp.get('type') ?? '';
+  const type = (SOURCE_TYPE_FILTERS as readonly string[]).includes(rawType) ? rawType : '';
+  const enabledParam = sp.get('enabled');
+  const view = sp.get('view');
+  return {
+    page,
+    pageSize,
+    q: sp.get('q') ?? '',
+    type,
+    enabled: enabledParam === '1' ? true : enabledParam === '0' ? false : undefined,
+    view: view === 'sync' || view === 'list' ? view : 'map',
+  };
+}
+
+// ─── URL 展示打码（与 SourceRow 同口径，纯展示层）──
+// 信源 URL 常带 token/key 类 query 参数，展示前统一换成 ***。
+
+const SENSITIVE_QUERY_KEYS = new Set([
+  'access_token',
+  'apikey',
+  'api_key',
+  'auth_token',
+  'authorization',
+  'client_secret',
+  'key',
+  'password',
+  'secret',
+  'token',
+]);
+
+function redactSourceUrlForDisplay(value: string): string {
+  try {
+    const url = new URL(value);
+    let changed = false;
+    url.searchParams.forEach((_, key) => {
+      if (SENSITIVE_QUERY_KEYS.has(key.toLowerCase())) {
+        url.searchParams.set(key, '***');
+        changed = true;
+      }
+    });
+    return changed ? url.toString() : value;
+  } catch {
+    return value.replace(
+      /([?&](?:access_token|apikey|api_key|auth_token|authorization|client_secret|key|password|secret|token)=)[^&#\s]+/gi,
+      '$1***',
+    );
+  }
+}
+
+// ─── 行尾「···」菜单 ───
+// 高频动作（≤2 个）之外的行操作收进这里。键盘可达：打开后焦点移入首项，
+// ↑/↓ 在菜单项间移动，Esc 关闭并还焦给触发按钮，点击菜单外任意处关闭。
+// 菜单用 fixed 定位挂在视口坐标上——否则会被表格 overflow-x-auto 滚动容器裁剪。
+
+interface RowMenuItem {
+  key: string;
+  label: string;
+  icon: LucideIcon;
+  danger?: boolean;
+  disabled?: boolean;
+  onSelect: () => void;
+}
+
+function RowActionsMenu({ label, items }: { label: string; items: RowMenuItem[] }) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  const openMenu = () => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setPos({ top: rect.bottom + 4, left: rect.right });
+    setOpen(true);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    // 打开后把焦点移进菜单，键盘用户不用再 Tab 一次
+    const frame = window.requestAnimationFrame(() => {
+      menuRef.current
+        ?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')
+        ?.focus();
+    });
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (!menuRef.current?.contains(target) && !triggerRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    // 任何滚动/缩放都收回菜单：fixed 菜单不跟随滚动，悬空比关闭更糟
+    const close = () => setOpen(false);
+    document.addEventListener('pointerdown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    window.addEventListener('scroll', close, true);
+    window.addEventListener('resize', close);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('scroll', close, true);
+      window.removeEventListener('resize', close);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative">
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => (open ? setOpen(false) : openMenu())}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={label}
+        className="flex h-7 w-7 items-center justify-center rounded-xs border border-transparent text-ink-500 transition hover:border-ink-200 hover:bg-white hover:text-ink-900"
+      >
+        <MoreHorizontal size={15} strokeWidth={2} />
+      </button>
+      {open && pos && (
+        <div
+          ref={menuRef}
+          role="menu"
+          aria-label={label}
+          style={{ position: 'fixed', top: pos.top, left: pos.left, transform: 'translateX(-100%)' }}
+          className="z-50 min-w-[148px] rounded-xs border border-ink-200 bg-white p-1 shadow-[0_8px_24px_rgba(15,23,42,0.12)]"
+          onKeyDown={(event) => {
+            if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+            event.preventDefault();
+            const buttons = Array.from(
+              menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]') ?? [],
+            );
+            if (buttons.length === 0) return;
+            const activeIndex = buttons.findIndex((button) => button === document.activeElement);
+            const nextIndex =
+              event.key === 'ArrowDown'
+                ? (activeIndex + 1) % buttons.length
+                : (activeIndex - 1 + buttons.length) % buttons.length;
+            buttons[nextIndex]?.focus();
+          }}
+        >
+          {items.map((item) => {
+            const Icon = item.icon;
+            return (
+              <button
+                key={item.key}
+                type="button"
+                role="menuitem"
+                disabled={item.disabled}
+                onClick={() => {
+                  setOpen(false);
+                  item.onSelect();
+                }}
+                className={cx(
+                  'flex w-full items-center gap-2 rounded-xs px-2.5 py-1.5 text-left text-xs transition disabled:cursor-not-allowed disabled:opacity-50',
+                  item.danger ? 'text-red-600 hover:bg-red-light' : 'text-ink-700 hover:bg-ink-100',
+                )}
+              >
+                <Icon size={13} strokeWidth={2} aria-hidden="true" />
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 破坏性动作二次确认 ───
+// 删除 / 暂停（禁用类）统一收口到这一个确认弹窗，替代原生 confirm()。
+
+interface ConfirmState {
+  title: string;
+  message: React.ReactNode;
+  confirmLabel: string;
+  onConfirm: () => void | Promise<void>;
+}
+
 // ─── Page Component ───
 
 export default function SourcesPage() {
   const { currentUser, updateEnabledFeatures, favoriteTargets, favoriteTargetPendingKeys, toggleFavoriteTarget, refreshCounts } = useAppContext();
+  // 两段式恢复：SSR 与首帧一律用默认值（防 hydration mismatch——惰性读
+  // location 会在带参数直达时让服务端/客户端首帧不一致），挂载后再从 URL
+  // 恢复一次；didRestore 门让首拉只发一次且 URL 不被默认值覆写清掉。
+  const [initial] = useState(defaultSourcesQueryState);
   const [sources, setSources] = useState<BackendSource[]>([]);
   const [mapSources, setMapSources] = useState<BackendSource[]>([]);
   const [sourceFavoriteKeys, setSourceFavoriteKeys] = useState<Set<string>>(new Set());
   const [total, setTotal] = useState(0);
-  const [page, setPage] = useState(1);
-  const [pageSize] = useState(20);
-  const [viewMode, setViewMode] = useState<'map' | 'sync' | 'list'>('map');
-  const [searchKeyword, setSearchKeyword] = useState('');
-  const [filterType, setFilterType] = useState('');
-  const [filterEnabled, setFilterEnabled] = useState<boolean | undefined>(undefined);
+  const [page, setPage] = useState(initial.page);
+  const [pageSize, setPageSize] = useState(initial.pageSize);
+  const [viewMode, setViewMode] = useState<'map' | 'sync' | 'list'>(initial.view);
+  const [searchKeyword, setSearchKeyword] = useState(initial.q);
+  const [filterType, setFilterType] = useState(initial.type);
+  const [filterEnabled, setFilterEnabled] = useState<boolean | undefined>(initial.enabled);
   const [loading, setLoading] = useState(true);
+  // 列表加载失败 → AdminTable 内联错误 + 重试；系统级/变更类错误仍走顶部 AdminNoticeBanner
+  const [listError, setListError] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [showAddModal, setShowAddModal] = useState(false);
   const [editingSource, setEditingSource] = useState<BackendSource | null>(null);
@@ -60,7 +333,7 @@ export default function SourcesPage() {
   const [newInstanceUrl, setNewInstanceUrl] = useState('');
   const opmlInputRef = useRef<HTMLInputElement>(null);
   const batchImportInputRef = useRef<HTMLInputElement>(null);
-  const [, setImportingOPML] = useState(false);
+  const [importingOPML, setImportingOPML] = useState(false);
   const [showBatchImport, setShowBatchImport] = useState(false);
   const [evidenceProfileSource, setEvidenceProfileSource] = useState<BackendSource | null>(null);
   const [batchImportContent, setBatchImportContent] = useState('');
@@ -68,12 +341,14 @@ export default function SourcesPage() {
   const [batchImportPreview, setBatchImportPreview] = useState<SourceBatchImportItem[]>([]);
   const [batchImportPreviewing, setBatchImportPreviewing] = useState(false);
   const [batchImporting, setBatchImporting] = useState(false);
+  const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
+  const [confirmBusy, setConfirmBusy] = useState(false);
 
   // ─── Fetch sources ───
   const fetchSources = useCallback(async (p: number = 1): Promise<boolean> => {
     try {
       setLoading(true);
-      setError(null);
+      setListError(null);
       const res = await sourcesApi.list({
         page: p,
         page_size: pageSize,
@@ -87,7 +362,7 @@ export default function SourcesPage() {
       setPage(p);
       return true;
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : '加载信源列表失败');
+      setListError(err instanceof Error ? err.message : '加载信源列表失败');
       return false;
     } finally {
       setLoading(false);
@@ -144,11 +419,49 @@ export default function SourcesPage() {
     }
   }, []);
 
+  // 挂载后恢复 URL 状态（两段式的第二段），随后放行首拉
+  const [didRestore, setDidRestore] = useState(false);
+  useEffect(() => {
+    const restored = readInitialStateFromLocation();
+    if (restored.page !== initial.page) setPage(restored.page);
+    if (restored.pageSize !== initial.pageSize) setPageSize(restored.pageSize);
+    if (restored.view !== initial.view) setViewMode(restored.view);
+    if (restored.q !== initial.q) setSearchKeyword(restored.q);
+    if (restored.type !== initial.type) setFilterType(restored.type);
+    if (restored.enabled !== initial.enabled) setFilterEnabled(restored.enabled);
+    setDidRestore(true);
+    // 仅挂载时执行一次
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 首拉与筛选/每页条数变化的重拉。翻页不进这个 effect（由分页器直接调
+  // fetchSources），避免翻一个页码连带全量信源地图重拉。
+  useEffect(() => {
+    if (!didRestore) return;
+    void fetchSources(page);
+    void fetchSourceMap();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [didRestore, fetchSources, fetchSourceMap]);
+
+  // RSSHub 实例不随筛选变化，只在挂载时拉一次
   useEffect(() => {
-    fetchSources(1);
-    fetchSourceMap();
     fetchRSSHubInstances();
-  }, [fetchSources, fetchSourceMap, fetchRSSHubInstances]);
+  }, [fetchRSSHubInstances]);
+
+  // URL query 覆写：与恢复逻辑对称，非默认值才落 query（恢复完成前不写，
+  // 防止把直达 URL 清成默认态）
+  useEffect(() => {
+    if (!didRestore) return;
+    const sp = new URLSearchParams();
+    if (searchKeyword.trim()) sp.set('q', searchKeyword.trim());
+    if (filterType) sp.set('type', filterType);
+    if (filterEnabled !== undefined) sp.set('enabled', filterEnabled ? '1' : '0');
+    if (page > 1) sp.set('page', String(page));
+    if (pageSize !== DEFAULT_PAGE_SIZE) sp.set('page_size', String(pageSize));
+    if (viewMode !== 'map') sp.set('view', viewMode);
+    const qs = sp.toString();
+    window.history.replaceState(null, '', qs ? `?${qs}` : window.location.pathname);
+  }, [didRestore, searchKeyword, filterType, filterEnabled, page, pageSize, viewMode]);
 
   useEffect(() => {
     const ids = Array.from(new Set([...sources, ...mapSources].map((source) => source.id)));
@@ -180,8 +493,30 @@ export default function SourcesPage() {
     return () => { cancelled = true; };
   }, [sources, mapSources]);
 
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  // 恢复的页码可能越过当前筛选下的总页数（书签里存着 page=99），收回最后一页
+  useEffect(() => {
+    if (!loading && page > totalPages) void fetchSources(totalPages);
+  }, [loading, page, totalPages, fetchSources]);
+
+  // ─── 确认弹窗执行 ───
+  const runConfirm = async () => {
+    if (!confirmState || confirmBusy) return;
+    setConfirmBusy(true);
+    try {
+      await confirmState.onConfirm();
+      setConfirmState(null);
+    } catch {
+      // 各 onConfirm 自带错误上抛（AdminNoticeBanner），这里只防止确认框卡死
+    } finally {
+      setConfirmBusy(false);
+    }
+  };
+
   // ─── Toggle instance enabled ───
   const toggleInstance = async (url: string) => {
+    const target = rsshubInstances.find((i) => i.url === url);
     const updated = rsshubInstances.map((i) =>
       i.url === url ? { ...i, enabled: !i.enabled } : i
     );
@@ -189,6 +524,7 @@ export default function SourcesPage() {
     try {
       setRsshubSaving(true);
       await settingsApi.updateRSSHubInstances(updated);
+      toast.success(`实例已${target?.enabled ? '禁用' : '启用'}`);
     } catch (err: unknown) {
       setRsshubError(err instanceof Error ? err.message : '更新失败');
       setRsshubInstances((prev) => prev.map((i) => i.url === url ? { ...i, enabled: !i.enabled } : i));
@@ -214,6 +550,7 @@ export default function SourcesPage() {
     try {
       setRsshubSaving(true);
       await settingsApi.updateRSSHubInstances(updated);
+      toast.success('实例已添加');
     } catch (err: unknown) {
       setRsshubError(err instanceof Error ? err.message : '添加失败');
       setRsshubInstances((prev) => prev.filter((i) => i.url !== url));
@@ -222,20 +559,32 @@ export default function SourcesPage() {
     }
   };
 
-  // ─── Delete instance ───
-  const deleteInstance = async (url: string) => {
-    if (!confirm(`删除实例 ${url}？`)) return;
-    const prev = rsshubInstances;
-    setRsshubInstances((prev) => prev.filter((i) => i.url !== url));
-    try {
-      setRsshubSaving(true);
-      await settingsApi.updateRSSHubInstances(rsshubInstances.filter((i) => i.url !== url));
-    } catch (err: unknown) {
-      setRsshubError(err instanceof Error ? err.message : '删除失败');
-      setRsshubInstances(prev);
-    } finally {
-      setRsshubSaving(false);
-    }
+  // ─── Delete instance（破坏性动作：二次确认） ───
+  const deleteInstance = (url: string) => {
+    setConfirmState({
+      title: '删除 RSSHub 实例',
+      message: (
+        <>
+          确定删除实例 <span className="break-all font-mono text-[12px] text-ink-900">{url}</span> 吗？
+          使用该实例路由的信源会在下次同步时自动切换到其它可用实例。
+        </>
+      ),
+      confirmLabel: '删除实例',
+      onConfirm: async () => {
+        const prev = rsshubInstances;
+        setRsshubInstances((current) => current.filter((i) => i.url !== url));
+        try {
+          setRsshubSaving(true);
+          await settingsApi.updateRSSHubInstances(rsshubInstances.filter((i) => i.url !== url));
+          toast.success('实例已删除');
+        } catch (err: unknown) {
+          setRsshubError(err instanceof Error ? err.message : '删除失败');
+          setRsshubInstances(prev);
+        } finally {
+          setRsshubSaving(false);
+        }
+      },
+    });
   };
 
   // ─── Create source ───
@@ -260,7 +609,8 @@ export default function SourcesPage() {
       } as CreateSourceRequest);
       setShowAddModal(false);
       setForm(emptyForm);
-      await fetchSources();
+      toast.success('信源已添加');
+      await fetchSources(page);
       await fetchSourceMap();
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : '添加信源失败');
@@ -276,10 +626,9 @@ export default function SourcesPage() {
     setImportingOPML(true);
     try {
       const result = await sourcesApi.importOPML(file);
-      // Show success as a temporary rsshubError display (reuses existing banner)
-      setRsshubError(result.message);
-      fetchSources();
-      fetchSourceMap();
+      toast.success(result.message);
+      void fetchSources(page);
+      void fetchSourceMap();
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : 'OPML 导入失败');
     } finally {
@@ -328,11 +677,11 @@ export default function SourcesPage() {
         content: batchImportContent,
         category: batchImportCategory || '批量导入',
       });
-      setRsshubError(result.message);
+      toast.success(result.message);
       setShowBatchImport(false);
       setBatchImportContent('');
       setBatchImportPreview([]);
-      await fetchSources();
+      await fetchSources(page);
       await fetchSourceMap();
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : '批量导入失败');
@@ -363,7 +712,8 @@ export default function SourcesPage() {
       } as UpdateSourceRequest);
       setEditingSource(null);
       setForm(emptyForm);
-      await fetchSources();
+      toast.success('信源已更新');
+      await fetchSources(page);
       await fetchSourceMap();
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : '更新信源失败');
@@ -387,6 +737,11 @@ export default function SourcesPage() {
     });
   };
 
+  const openAddModal = () => {
+    setForm(emptyForm);
+    setShowAddModal(true);
+  };
+
   // ─── Sync source ───
   const handleSync = async (id: number) => {
     try {
@@ -403,7 +758,7 @@ export default function SourcesPage() {
         ...prev,
         [id]: `获取 ${fetched} 条，新增 ${newCount} 条`,
       }));
-      await fetchSources();
+      await fetchSources(page);
       await fetchSourceMap();
     } catch (err: unknown) {
       setSyncResults((prev) => ({
@@ -427,24 +782,9 @@ export default function SourcesPage() {
   // 批量选择：多选 + 批量启用/暂停
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
   const [batchProcessing, setBatchProcessing] = useState(false);
-  // 批量操作结果反馈（成功 / 部分失败）。失败必须可见——见 handleBatchToggle。
+  // 批量操作结果反馈（部分失败必须持久可见——见 handleBatchToggle）。
   const [batchResult, setBatchResult] = useState<{ tone: 'teal' | 'red'; text: string } | null>(null);
-  const handleSelectSource = (source: BackendSource, checked: boolean) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (checked) next.add(source.id);
-      else next.delete(source.id);
-      return next;
-    });
-  };
-  const handleSelectAllVisible = (sources: BackendSource[], checked: boolean) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (checked) sources.forEach((s) => next.add(s.id));
-      else sources.forEach((s) => next.delete(s.id));
-      return next;
-    });
-  };
+
   const handleBatchToggle = async (enabled: boolean) => {
     if (selectedIds.size === 0 || batchProcessing) return;
     setBatchProcessing(true);
@@ -460,22 +800,46 @@ export default function SourcesPage() {
       );
       // 执行完成后重建选择态：失败项保持选中以便直接重试。
       setSelectedIds((prev) => recomputeSelectionAfterBatch(prev, ids, failedIds));
-      await fetchSources();
+      await fetchSources(page);
       await fetchSourceMap();
 
-      setBatchResult(describeBatchResult(ids.length, failedIds, enabled));
+      const result = describeBatchResult(ids.length, failedIds, enabled);
+      if (failedIds.length > 0) {
+        // 部分失败：失败项保持选中可重试，需要持久可见 → 横幅（Toast 转瞬即逝不够）
+        setBatchResult(result);
+      } else {
+        toast.success(result.text);
+      }
     } finally {
       setBatchProcessing(false);
     }
   };
-  const handleToggleEnabled = async (source: BackendSource) => {
+
+  // 批量暂停属禁用类破坏性动作，先过二次确认；批量启用不拦截
+  const requestBatchPause = () => {
+    if (selectedIds.size === 0 || batchProcessing) return;
+    setConfirmState({
+      title: '批量暂停信源',
+      message: (
+        <>
+          将暂停 <b className="font-mono">{selectedIds.size}</b> 个已选信源的抓取，暂停期间不采集新内容，
+          可随时重新勾选启用。
+        </>
+      ),
+      confirmLabel: '批量暂停',
+      onConfirm: () => handleBatchToggle(false),
+    });
+  };
+
+  const runToggleEnabled = async (source: BackendSource) => {
     if (togglingIds.has(source.id)) return;
     const nextEnabled = !source.enabled;
     try {
       setTogglingIds((prev) => new Set(prev).add(source.id));
       await sourcesApi.update(source.id, { enabled: nextEnabled });
-      await fetchSources();
+      await fetchSources(page);
       await fetchSourceMap();
+      toast.success(nextEnabled ? `已启用「${source.name}」` : `已暂停「${source.name}」`);
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : String(err));
     } finally {
@@ -487,23 +851,52 @@ export default function SourcesPage() {
     }
   };
 
-  // ─── Delete source ───
-  const handleDelete = async (id: number) => {
-    if (!confirm('确定要删除此信源吗？')) return;
-    try {
-      setDeletingIds((prev) => new Set(prev).add(id));
-      await sourcesApi.delete(id);
-      setSources((prev) => prev.filter((s) => s.id !== id));
-      setMapSources((prev) => prev.filter((s) => s.id !== id));
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : '删除失败');
-    } finally {
-      setDeletingIds((prev) => {
-        const next = new Set(prev);
-        next.delete(id);
-        return next;
-      });
+  // 暂停属禁用类破坏性动作，二次确认后才执行；启用不拦截
+  const handleToggleEnabled = (source: BackendSource) => {
+    if (!source.enabled) {
+      void runToggleEnabled(source);
+      return;
     }
+    setConfirmState({
+      title: '暂停信源抓取',
+      message: (
+        <>
+          暂停「<b>{source.name}</b>」后将停止采集新内容，可随时在行尾菜单中重新启用。
+        </>
+      ),
+      confirmLabel: '暂停抓取',
+      onConfirm: () => runToggleEnabled(source),
+    });
+  };
+
+  // ─── Delete source（破坏性动作：二次确认） ───
+  const handleDelete = (source: BackendSource) => {
+    setConfirmState({
+      title: '删除信源',
+      message: (
+        <>
+          确定删除信源「<b>{source.name}</b>」吗？删除后停止抓取且不可恢复，已入库内容不受影响。
+        </>
+      ),
+      confirmLabel: '删除',
+      onConfirm: async () => {
+        try {
+          setDeletingIds((prev) => new Set(prev).add(source.id));
+          await sourcesApi.delete(source.id);
+          setSources((prev) => prev.filter((s) => s.id !== source.id));
+          setMapSources((prev) => prev.filter((s) => s.id !== source.id));
+          toast.success(`已删除「${source.name}」`);
+        } catch (err: unknown) {
+          setError(err instanceof Error ? err.message : '删除失败');
+        } finally {
+          setDeletingIds((prev) => {
+            const next = new Set(prev);
+            next.delete(source.id);
+            return next;
+          });
+        }
+      },
+    });
   };
 
   const handleWeightChange = async (id: number, weight: number) => {
@@ -697,129 +1090,364 @@ export default function SourcesPage() {
 
   const syncBoard = useMemo(() => buildSourceSyncBoard(mapSources, syncingIds, new Date()), [mapSources, syncingIds]);
 
-  return (
-    <AdminPageShell maxWidth={1200}>
-      {/* Header */}
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <div className="mb-2 flex flex-wrap items-center gap-2">
-            {selectedIds.size > 0 && (
-              <div className="flex items-center gap-1.5 rounded-sm border border-primary-border bg-primary-light px-2.5 py-1 text-[12px]">
-                <span className="font-mono font-semibold text-primary">{selectedIds.size}</span>
-                <span className="text-gray-600">已选</span>
-                <button
-                  type="button"
-                  onClick={() => setSelectedIds(new Set())}
-                  className="ml-1 text-[11px] text-gray-500 hover:text-gray-700"
-                >
-                  清除
-                </button>
-                <span className="mx-1 h-3 w-px bg-gray-300" />
-                <button
-                  type="button"
-                  onClick={() => void handleBatchToggle(true)}
-                  disabled={batchProcessing}
-                  className="text-[12px] text-teal hover:underline disabled:opacity-50"
-                >
-                  批量启用
-                </button>
-                <span className="text-gray-300">|</span>
-                <button
-                  type="button"
-                  onClick={() => void handleBatchToggle(false)}
-                  disabled={batchProcessing}
-                  className="text-[12px] text-red hover:underline disabled:opacity-50"
-                >
-                  批量暂停
-                </button>
-              </div>
+  // ─── 筛选与 chips ───
+
+  const hasActiveFilters = searchKeyword.trim() !== '' || filterType !== '' || filterEnabled !== undefined;
+
+  const handleSearchChange = (value: string) => {
+    setSearchKeyword(value);
+    setPage(1);
+  };
+
+  const handleTypeChange = (value: string) => {
+    setFilterType(value);
+    setPage(1);
+  };
+
+  const handleEnabledChange = (value: string) => {
+    setFilterEnabled(value === '' ? undefined : value === 'yes');
+    setPage(1);
+  };
+
+  const clearAllFilters = () => {
+    setSearchKeyword('');
+    setFilterType('');
+    setFilterEnabled(undefined);
+    setPage(1);
+  };
+
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size);
+    setPage(1);
+  };
+
+  const filterChips: AdminFilterChip[] = [];
+  if (searchKeyword.trim()) {
+    const keyword = searchKeyword.trim();
+    filterChips.push({
+      key: 'q',
+      label: `搜索：${keyword.length > 16 ? `${keyword.slice(0, 16)}…` : keyword}`,
+      onRemove: () => handleSearchChange(''),
+    });
+  }
+  if (filterType) {
+    filterChips.push({
+      key: 'type',
+      label: `类型：${filterType}`,
+      onRemove: () => handleTypeChange(''),
+    });
+  }
+  if (filterEnabled !== undefined) {
+    filterChips.push({
+      key: 'enabled',
+      label: `状态：${filterEnabled ? '已启用' : '已禁用'}`,
+      onRemove: () => handleEnabledChange(''),
+    });
+  }
+
+  // ─── 列定义（操作列右侧粘性；高频动作同步/编辑直接可见，其余收「···」菜单） ───
+
+  const columns: AdminTableColumn<BackendSource>[] = [
+    {
+      key: 'name',
+      header: '名称',
+      render: (source) => {
+        const displayUrl = source.url ? redactSourceUrlForDisplay(source.url) : '';
+        return (
+          <div className="min-w-0">
+            <span className="block max-w-[280px] truncate text-[13px] font-bold text-ink-900" title={source.name}>
+              {source.name}
+            </span>
+            {displayUrl && (
+              <span className="mt-0.5 block max-w-[280px] truncate text-[11px] text-ink-500" title={displayUrl}>
+                {displayUrl}
+              </span>
             )}
           </div>
-          <AdminPageHeader
-            title="信源管理"
-            description={<>共 <b className="font-mono text-gray-600">{total}</b> 个信源 · 活跃 <b className="font-mono text-teal">{activeCount}</b> 个</>}
-          />
-        </div>
-        <Toolbar>
-          <Button
-            type="button"
-            variant="primary"
-            onClick={() => {
-              setForm(emptyForm);
-              setShowAddModal(true);
-            }}
-            className="whitespace-nowrap"
-          >
-            <Plus size={15} strokeWidth={2.2} />
-            添加信源
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => opmlInputRef.current?.click()}
-            className="whitespace-nowrap"
-          >
-            <Upload size={15} strokeWidth={2} />
-            导入 OPML
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => setShowBatchImport(true)}
-            className="whitespace-nowrap"
-          >
-            <FileSearch size={15} strokeWidth={2} />
-            批量导入
-          </Button>
-        </Toolbar>
-        <input ref={opmlInputRef} type="file" accept=".opml,.xml" className="hidden" onChange={handleOPMLImport} />
-        <input ref={batchImportInputRef} type="file" accept=".json,.md,.txt,.opml,.xml" className="hidden" onChange={handleBatchImportFile} />
-      </div>
-
-      {/* Search & Filter Bar */}
-      <Toolbar className="mb-4">
-        <input
-          type="text"
-          placeholder="搜索名称 / URL / 平台 / 分类..."
-          value={searchKeyword}
-          onChange={(e) => setSearchKeyword(e.target.value)}
-          className="h-9 w-56 rounded-sm border border-gray-200 bg-white px-3.5 text-[13px] outline-none transition focus:border-primary-border focus:ring-2 focus:ring-primary-light"
-        />
+        );
+      },
+    },
+    {
+      key: 'type',
+      header: '类型',
+      width: 92,
+      render: (source) => (
+        <Badge tone={TYPE_BADGE_TONE[source.source_type] ?? 'neutral'}>{source.source_type}</Badge>
+      ),
+    },
+    {
+      key: 'category',
+      header: '分类',
+      width: 110,
+      render: (source) => <span className="truncate text-[13px] text-ink-700">{source.category || '未分类'}</span>,
+    },
+    {
+      key: 'lastSync',
+      header: '最后同步',
+      width: 168,
+      render: (source) => {
+        const sourceSyncing = syncingIds.has(source.id) || source.status === 'syncing';
+        return (
+          <div className="min-w-0">
+            <span className={cx('text-xs', source.sync_error ? 'text-red' : 'text-ink-500')}>
+              {sourceSyncing ? '同步中' : source.sync_error ? '同步失败' : timeAgo(source.last_sync_at)}
+            </span>
+            {source.sync_error && (
+              <span className="mt-0.5 block max-w-[210px] truncate text-[11px] text-red" title={source.sync_error}>
+                {source.sync_error}
+              </span>
+            )}
+            {syncResults[source.id] && (
+              <span className="mt-0.5 block max-w-[210px] truncate text-[11px] text-teal" title={syncResults[source.id]}>
+                {syncResults[source.id]}
+              </span>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: 'interval',
+      header: '采集频率',
+      width: 104,
+      render: (source) => (
         <select
-          value={filterType}
-          onChange={(e) => setFilterType(e.target.value)}
-          className="h-9 cursor-pointer rounded-sm border border-gray-200 bg-white px-3 text-[13px] outline-none transition focus:border-primary-border focus:ring-2 focus:ring-primary-light"
+          value={source.fetch_interval_minutes}
+          onChange={(e) => void handleIntervalChange(source.id, Number(e.target.value))}
+          aria-label={`修改「${source.name}」的采集频率`}
+          className="h-7 cursor-pointer rounded-xs border border-ink-200 bg-white px-1.5 text-xs text-ink-700 focus:border-admin-accent focus:outline-none"
         >
-          <option value="">全部类型</option>
-          <option value="RSS">RSS</option>
-          <option value="RSSHub">RSSHub</option>
-          <option value="TwitterRSS">Twitter RSS</option>
-          <option value="Reddit">Reddit</option>
-          <option value="API">API</option>
-          <option value="Zhihu">知乎</option>
-          <option value="网站">网站</option>
+          {/* 当前值不在档位内时补一项，避免原生 select 显示空白 */}
+          {!INTERVAL_OPTIONS.some((opt) => opt.value === source.fetch_interval_minutes) && (
+            <option value={source.fetch_interval_minutes}>{source.fetch_interval_minutes}分钟</option>
+          )}
+          {INTERVAL_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
         </select>
-        <select
-          value={filterEnabled === undefined ? '' : filterEnabled ? 'yes' : 'no'}
-          onChange={(e) => setFilterEnabled(e.target.value === '' ? undefined : e.target.value === 'yes')}
-          className="h-9 cursor-pointer rounded-sm border border-gray-200 bg-white px-3 text-[13px] outline-none transition focus:border-primary-border focus:ring-2 focus:ring-primary-light"
+      ),
+    },
+    {
+      key: 'weight',
+      header: '权重',
+      width: 128,
+      render: (source) => (
+        <div
+          className="flex items-center gap-0.5"
+          title={`权重 ${source.weight}/5 — 影响精选加分：${source.weight > 3 ? '+' : ''}${(source.weight - 3) * 8} 分`}
         >
-          <option value="">全部状态</option>
-          <option value="yes">已启用</option>
-          <option value="no">已禁用</option>
-        </select>
-        {(searchKeyword || filterType || filterEnabled !== undefined) && (
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={() => { setSearchKeyword(''); setFilterType(''); setFilterEnabled(undefined); }}
+          {[1, 2, 3, 4, 5].map((w) => (
+            <button
+              key={w}
+              type="button"
+              aria-label={`将「${source.name}」权重设为 ${w}`}
+              onClick={() => void handleWeightChange(source.id, w)}
+              className={cx(
+                'px-0.5 text-[11px] leading-none transition',
+                w <= source.weight ? 'text-primary' : 'text-ink-200 hover:text-primary/50',
+              )}
+            >
+              ●
+            </button>
+          ))}
+          <span className="ml-1 text-[10px] text-ink-500">
+            {(source.weight - 3) * 8 > 0 ? '+' : ''}{(source.weight - 3) * 8}
+          </span>
+        </div>
+      ),
+    },
+    {
+      key: 'status',
+      header: '状态',
+      width: 96,
+      render: (source) => {
+        const isActive = source.status === 'active' && source.enabled;
+        return (
+          <span className="flex items-center gap-1.5 text-[11px]">
+            <span className={cx('h-2 w-2 rounded-full', isActive ? 'bg-teal' : 'bg-red')} aria-hidden="true" />
+            <span className={isActive ? 'text-teal' : 'text-red'}>
+              {source.enabled ? (source.status === 'active' ? '正常' : source.status) : '已禁用'}
+            </span>
+          </span>
+        );
+      },
+    },
+    {
+      key: 'actions',
+      header: '操作',
+      width: 170,
+      sticky: 'right',
+      render: (source) => {
+        const sourceSyncing = syncingIds.has(source.id) || source.status === 'syncing';
+        const sourceDisabled = !source.enabled || source.status === 'disabled';
+        const favoriteKey = getFavoriteTargetKey({ target_type: 'source', target_id: source.id });
+        const isFavorite = favoriteTargets.has(favoriteKey) || sourceFavoriteKeys.has(favoriteKey);
+        return (
+          <div className="flex items-center justify-end gap-1.5">
+            {/* 高频动作 ≤2 直接可见：同步 / 编辑 */}
+            <Button
+              type="button"
+              onClick={() => void handleSync(source.id)}
+              disabled={sourceSyncing || sourceDisabled}
+              variant={sourceSyncing ? 'secondary' : 'success'}
+              className="min-h-7 px-2.5 py-1 text-[11px]"
+              title={sourceDisabled ? '信源已禁用，启用后可同步' : '同步信源'}
+            >
+              {sourceSyncing ? <Spinner /> : null}
+              {sourceSyncing ? '同步中' : '同步'}
+            </Button>
+            <Button
+              type="button"
+              onClick={() => openEditModal(source)}
+              variant="secondary"
+              className="min-h-7 px-2.5 py-1 text-[11px]"
+            >
+              编辑
+            </Button>
+            {/* 其余动作收进行尾「···」菜单；暂停/删除在菜单内二次确认 */}
+            <RowActionsMenu
+              label={`「${source.name}」的更多操作`}
+              items={[
+                {
+                  key: 'profile',
+                  label: '证据画像',
+                  icon: ShieldCheck,
+                  onSelect: () => setEvidenceProfileSource(source),
+                },
+                {
+                  key: 'favorite',
+                  label: isFavorite ? '移出收藏' : '收藏信源',
+                  icon: Star,
+                  disabled: favoriteTargetPendingKeys.has(favoriteKey),
+                  onSelect: () => void handleToggleSourceFavorite(source),
+                },
+                {
+                  key: 'toggle',
+                  label: source.enabled ? '暂停抓取' : '启用抓取',
+                  icon: source.enabled ? Pause : Play,
+                  disabled: togglingIds.has(source.id),
+                  onSelect: () => handleToggleEnabled(source),
+                },
+                {
+                  key: 'delete',
+                  label: '删除信源',
+                  icon: Trash2,
+                  danger: true,
+                  disabled: deletingIds.has(source.id),
+                  onSelect: () => handleDelete(source),
+                },
+              ]}
+            />
+          </div>
+        );
+      },
+    },
+  ];
+
+  const batchBar = (
+    <div className="flex flex-wrap items-center gap-2 rounded-sm border border-primary-border bg-primary-light px-3 py-2 text-[13px]">
+      已选 <b className="font-mono text-primary">{selectedIds.size}</b> 个信源
+      <button
+        type="button"
+        onClick={() => setSelectedIds(new Set())}
+        className="text-xs text-ink-500 underline-offset-2 transition hover:text-ink-900 hover:underline"
+      >
+        清除选择
+      </button>
+      <span className="mx-1 h-4 w-px bg-primary-border" aria-hidden="true" />
+      <Button
+        type="button"
+        variant="success"
+        onClick={() => void handleBatchToggle(true)}
+        disabled={batchProcessing}
+        className="min-h-7 px-2.5 py-1 text-[12px]"
+      >
+        {batchProcessing ? '处理中…' : '批量启用'}
+      </Button>
+      <Button
+        type="button"
+        variant="danger"
+        onClick={requestBatchPause}
+        disabled={batchProcessing}
+        className="min-h-7 px-2.5 py-1 text-[12px]"
+      >
+        {batchProcessing ? '处理中…' : '批量暂停'}
+      </Button>
+    </div>
+  );
+
+  return (
+    <AdminPageShell maxWidth={1200}>
+      {/* Header */}
+      <AdminPageHeader
+        title="信源管理"
+        description={<>共 <b className="font-mono text-ink-900">{total}</b> 个信源 · 活跃 <b className="font-mono text-ink-900">{activeCount}</b> 个</>}
+        actions={
+          <>
+            <Button type="button" variant="primary" onClick={openAddModal} className="whitespace-nowrap">
+              <Plus size={15} strokeWidth={2.2} />
+              添加信源
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => opmlInputRef.current?.click()}
+              disabled={importingOPML}
+              className="whitespace-nowrap"
+            >
+              <Upload size={15} strokeWidth={2} />
+              {importingOPML ? '导入中…' : '导入 OPML'}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => setShowBatchImport(true)}
+              className="whitespace-nowrap"
+            >
+              <FileSearch size={15} strokeWidth={2} />
+              批量导入
+            </Button>
+          </>
+        }
+      />
+      <input ref={opmlInputRef} type="file" accept=".opml,.xml" className="hidden" onChange={handleOPMLImport} />
+      <input ref={batchImportInputRef} type="file" accept=".json,.md,.txt,.opml,.xml" className="hidden" onChange={handleBatchImportFile} />
+
+      {/* 筛选行：搜索（300ms 防抖内建）+ 类型/状态下拉；已选条件 chips 单移除 / 清空全部 */}
+      <div className="space-y-2">
+        <AdminFilters
+          searchPlaceholder="搜索名称 / URL / 平台 / 分类…"
+          searchValue={searchKeyword}
+          onSearchChange={handleSearchChange}
+        >
+          <select
+            value={filterType}
+            onChange={(e) => handleTypeChange(e.target.value)}
+            aria-label="按类型筛选"
+            className="h-9 cursor-pointer rounded-xs border border-ink-200 bg-white px-2 text-[13px] text-ink-900 focus:border-admin-accent focus:outline-none"
           >
-            清除筛选
-          </Button>
-        )}
-      </Toolbar>
+            <option value="">全部类型</option>
+            {SOURCE_TYPE_FILTERS.map((type) => (
+              <option key={type} value={type}>{type}</option>
+            ))}
+          </select>
+          <select
+            value={filterEnabled === undefined ? '' : filterEnabled ? 'yes' : 'no'}
+            onChange={(e) => handleEnabledChange(e.target.value)}
+            aria-label="按启用状态筛选"
+            className="h-9 cursor-pointer rounded-xs border border-ink-200 bg-white px-2 text-[13px] text-ink-900 focus:border-admin-accent focus:outline-none"
+          >
+            <option value="">全部状态</option>
+            <option value="yes">已启用</option>
+            <option value="no">已禁用</option>
+          </select>
+        </AdminFilters>
+        <AdminFilterChips chips={filterChips} onClearAll={clearAllFilters} />
+      </div>
 
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-2.5">
+      <div className="mb-1 flex flex-wrap items-center justify-between gap-2.5">
         <div className="inline-flex rounded-sm border border-gray-200 bg-gray-100 p-0.5">
           {[
             { key: 'map' as const, label: '信源地图', icon: Network },
@@ -833,6 +1461,7 @@ export default function SourcesPage() {
                 type="button"
                 key={item.key}
                 onClick={() => setViewMode(item.key)}
+                aria-pressed={active}
                 className={cx(
                   'inline-flex items-center gap-1.5 rounded-xs border border-transparent px-3 py-1.5 text-[13px] transition',
                   active ? 'bg-white font-black text-primary shadow-sm' : 'font-semibold text-gray-500 hover:text-gray-800',
@@ -849,7 +1478,7 @@ export default function SourcesPage() {
         </span>
       </div>
 
-      {/* Error Banner */}
+      {/* Error Banner（系统级 / 变更类错误；列表加载失败走 AdminTable 内联错误） */}
       {rsshubError && (
         <AdminNoticeBanner tone="red" onClose={() => setRsshubError(null)}>{rsshubError}</AdminNoticeBanner>
       )}
@@ -886,7 +1515,12 @@ export default function SourcesPage() {
             {tab.label}
             <span className={cx(
               'rounded-full px-1.5 text-[10px]',
-              statusFilter === tab.value ? 'bg-white/20' : 'bg-gray-100',
+              statusFilter === tab.value
+                ? 'bg-white/20'
+                // 异常计数跳出：错误数 > 0 时红色加粗（#121 统计条口径）
+                : tab.value === 'error' && tab.count > 0
+                  ? 'bg-red-light font-bold text-red-600'
+                  : 'bg-gray-100',
             )}>
               {tab.count}
             </span>
@@ -933,30 +1567,60 @@ export default function SourcesPage() {
             onAdd={addInstance}
           />
           {currentUser?.role === 'admin' && <FeatureFlagsPanel onUpdate={updateEnabledFeatures} />}
-          <SourceListPanel
-            loading={loading}
-            sources={sources}
-            syncingIds={syncingIds}
-            syncResults={syncResults}
-            deletingIds={deletingIds}
-            total={total}
-            page={page}
-            pageSize={pageSize}
-            favoriteTargets={favoriteTargets}
-            favoriteTargetPendingKeys={favoriteTargetPendingKeys}
-            sourceFavoriteKeys={sourceFavoriteKeys}
-            selectedIds={selectedIds}
-            onSync={handleSync}
-            onEdit={openEditModal}
-            onEvidenceProfile={setEvidenceProfileSource}
-            onDelete={handleDelete}
-            onWeightChange={handleWeightChange}
-            onIntervalChange={handleIntervalChange}
-            onFavorite={handleToggleSourceFavorite}
-            onSelect={handleSelectSource}
-            onSelectAllVisible={handleSelectAllVisible}
-            onPageChange={(p) => void fetchSources(p)}
-          />
+
+          {/* 信源列表：三态（骨架 / 内联错误+重试 / 空态）由 AdminTable 内建，操作列右侧粘性 */}
+          <div className="space-y-2">
+            <PanelTitle icon={List} title="信源列表" hint="勾选行可批量启用 / 暂停" />
+            <AdminTable
+              columns={columns}
+              rows={sources}
+              rowKey={(source) => source.id}
+              loading={loading}
+              error={listError}
+              onRetry={() => void fetchSources(page)}
+              empty={
+                <AdminEmptyState
+                  compact
+                  icon={FileSearch}
+                  title={hasActiveFilters ? '没有匹配的信源' : '暂无信源'}
+                  description={hasActiveFilters ? '试试更换关键词或放宽类型 / 状态筛选' : '添加第一个信源，开始采集内容'}
+                  action={
+                    hasActiveFilters ? (
+                      <Button type="button" variant="secondary" onClick={clearAllFilters}>
+                        清空筛选
+                      </Button>
+                    ) : (
+                      <Button type="button" variant="primary" onClick={openAddModal}>
+                        添加信源
+                      </Button>
+                    )
+                  }
+                />
+              }
+              selectable
+              selected={selectedIds}
+              onSelectedChange={(next) => setSelectedIds(new Set(Array.from(next, Number)))}
+              batchBar={batchBar}
+              minWidth={1040}
+            />
+          </div>
+
+          {/* 分页：/sources 支持 page_size（1–200），每页条数选择器随之落地 */}
+          {!loading && total > 0 && (
+            <Pagination
+              page={page}
+              totalPages={totalPages}
+              onPage={(next) => void fetchSources(typeof next === 'function' ? next(page) : next)}
+              pageSize={pageSize}
+              pageSizeOptions={PAGE_SIZE_OPTIONS}
+              onPageSizeChange={handlePageSizeChange}
+              summary={
+                <>
+                  第 <b className="font-mono">{(page - 1) * pageSize + 1}-{Math.min(page * pageSize, total)}</b> 条，共 {total} 条
+                </>
+              }
+            />
+          )}
         </>
       )}
 
@@ -984,6 +1648,21 @@ export default function SourcesPage() {
       {evidenceProfileSource && (
         <EvidenceProfileModal source={evidenceProfileSource} onClose={() => setEvidenceProfileSource(null)} />
       )}
+
+      {/* 破坏性动作二次确认（删除 / 暂停类统一入口，替代原生 confirm） */}
+      {confirmState && (
+        <AdminModal title={confirmState.title} onClose={() => { if (!confirmBusy) setConfirmState(null); }}>
+          <p className="text-[13px] leading-6 text-ink-700">{confirmState.message}</p>
+          <AdminModalFooter>
+            <Button type="button" variant="secondary" onClick={() => setConfirmState(null)} disabled={confirmBusy} className="px-5">
+              取消
+            </Button>
+            <Button type="button" variant="danger" onClick={() => void runConfirm()} disabled={confirmBusy} className="px-5">
+              {confirmBusy ? '处理中…' : confirmState.confirmLabel}
+            </Button>
+          </AdminModalFooter>
+        </AdminModal>
+      )}
     </AdminPageShell>
   );
 }

From 15c2c5a8179d59fce6b1b4e6f14bb270fe765b4e Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 08:50:14 +0800
Subject: [PATCH 6/9] =?UTF-8?q?feat(admin):=20=E5=86=85=E5=AE=B9=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E5=90=83=E6=BB=A1=E5=8E=9F=E8=AF=AD+URL=20?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E8=AF=95=E7=82=B9=20(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AdminTable 七列(操作列粘性)、AdminFilters+chips、空态区分有无
筛选两种文案、分页接 page_size(后端原生支持)。URL query 两段式
同步与信源页同口径。
---
 frontend/src/app/admin/contents/page.tsx | 498 +++++++++++++++--------
 1 file changed, 337 insertions(+), 161 deletions(-)

diff --git a/frontend/src/app/admin/contents/page.tsx b/frontend/src/app/admin/contents/page.tsx
index 6983931a..e582b174 100644
--- a/frontend/src/app/admin/contents/page.tsx
+++ b/frontend/src/app/admin/contents/page.tsx
@@ -1,18 +1,19 @@
 'use client';
 
-import React, { useState } from 'react';
-import { Download, Newspaper } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Copy, Download, ExternalLink, Newspaper } from 'lucide-react';
 import { CATEGORIES, SOURCE_TYPE_COLOR_MAP } from '@/lib/design-tokens';
 import { contentsApi } from '@/lib/api';
-import { Badge, Button, Panel, Toolbar, cx } from '@/components/ui';
+import { Badge, Button } from '@/components/ui';
 import { Pagination } from '@/components/Pagination';
-import { ErrorState, LoadingState, EmptyState } from '@/components/StateView';
 import { useFetch } from '@/hooks/useFetch';
 import { AdminPageShell, AdminPageHeader } from '@/components/admin-ui';
+import { AdminEmptyState, AdminFilterChips, AdminFilters, AdminTable, toast } from '@/components/admin';
+import type { AdminFilterChip, AdminTableColumn } from '@/components/admin';
 import type { ContentItem } from '@/types';
 import { timeAgo } from '@/lib/datetime';
 
-// ─── Helpers ──
+// ─── 常量 ──
 
 const CONTENT_STATUS_TONE: Record<string, 'neutral' | 'teal' | 'red'> = {
   pending: 'neutral',
@@ -20,7 +21,39 @@ const CONTENT_STATUS_TONE: Record<string, 'neutral' | 'teal' | 'red'> = {
   error: 'red',
 };
 
-const PAGE_SIZE = 50;
+const CONTENT_STATUS_LABEL: Record<string, string> = {
+  pending: '待处理',
+  analyzed: '已分析',
+  error: '错误',
+};
+
+const DEFAULT_PAGE_SIZE = 50;
+const PAGE_SIZE_OPTIONS = [10, 20, 50] as const;
+
+/* ─── URL query 同步（#121 四页试点之一）──
+ * 挂载时从 location.search 恢复初始状态；此后筛选/搜索/页码变化用
+ * history.replaceState 覆写 query——不产生历史记录、不触发导航，
+ * 刻意不用 useSearchParams 以避开 Suspense 边界。
+ * 默认值（第 1 页、全部分类、空搜索、每页 50）不写入 query，保持 URL 干净。 */
+
+type ContentsQueryState = { page: number; pageSize: number; category: string; q: string };
+
+function defaultContentsQueryState(): ContentsQueryState {
+  return { page: 1, pageSize: DEFAULT_PAGE_SIZE, category: '全部', q: '' };
+}
+
+function readInitialStateFromLocation(): ContentsQueryState {
+  const sp = new URLSearchParams(window.location.search);
+  const page = Math.max(1, Number.parseInt(sp.get('page') ?? '', 10) || 1);
+  const rawPageSize = Number.parseInt(sp.get('page_size') ?? '', 10);
+  const pageSize = (PAGE_SIZE_OPTIONS as readonly number[]).includes(rawPageSize)
+    ? rawPageSize
+    : DEFAULT_PAGE_SIZE;
+  const rawCategory = sp.get('category') ?? '全部';
+  const category = (CATEGORIES as readonly string[]).includes(rawCategory) ? rawCategory : '全部';
+  const q = sp.get('q') ?? '';
+  return { page, pageSize, category, q };
+}
 
 /* ─── Page Component ── */
 
@@ -61,32 +94,228 @@ function exportContentsAsCSV(items: ContentItem[]): void {
 }
 
 export default function ContentsPage() {
-  const [page, setPage] = useState(1);
-  const [category, setCategory] = useState<string>('全部');
+  // 两段式恢复：SSR 与首帧一律用默认值（防 hydration mismatch——惰性读
+  // location 会让带参数直达时服务端/客户端首帧不一致），挂载后再从 URL 恢复
+  const [initial] = useState(defaultContentsQueryState);
+  const [page, setPage] = useState(initial.page);
+  const [pageSize, setPageSize] = useState(initial.pageSize);
+  const [category, setCategory] = useState(initial.category);
+  const [q, setQ] = useState(initial.q);
+  const [didRestore, setDidRestore] = useState(false);
+
+  // 挂载后恢复 URL 状态（两段式的第二段），随后放行首拉
+  useEffect(() => {
+    const restored = readInitialStateFromLocation();
+    if (restored.page !== initial.page) setPage(restored.page);
+    if (restored.pageSize !== initial.pageSize) setPageSize(restored.pageSize);
+    if (restored.category !== initial.category) setCategory(restored.category);
+    if (restored.q !== initial.q) setQ(restored.q);
+    setDidRestore(true);
+    // 仅挂载时执行一次
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   type ListPayload = { items: ContentItem[]; total: number };
   const { data, loading, error, refetch } = useFetch<ListPayload>(
     async () => {
-      const params: Record<string, unknown> = { page, page_size: PAGE_SIZE, admin_view: true };
+      const params: Record<string, unknown> = { page, page_size: pageSize, admin_view: true };
       if (category && category !== '全部') params.category = category;
+      if (q.trim()) params.q = q.trim();
       const res = await contentsApi.list(params);
       return {
         items: (res?.items || []) as ContentItem[],
         total: res?.total ?? (res?.items?.length ?? 0),
       };
     },
-    [page, category],
+    [page, pageSize, category, q],
+    // 恢复完成前不拉，避免默认值先打一发再被 URL 值重打的double fetch
+    { enabled: didRestore },
   );
 
   const items = data?.items ?? [];
   const total = data?.total ?? 0;
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  // URL query 覆写：与恢复逻辑对称，非默认值才落 query（恢复完成前不写，
+  // 防止把直达 URL 清成默认态）
+  useEffect(() => {
+    if (!didRestore) return;
+    const sp = new URLSearchParams();
+    if (page > 1) sp.set('page', String(page));
+    if (q.trim()) sp.set('q', q.trim());
+    if (category !== '全部') sp.set('category', category);
+    if (pageSize !== DEFAULT_PAGE_SIZE) sp.set('page_size', String(pageSize));
+    const qs = sp.toString();
+    window.history.replaceState(null, '', qs ? `?${qs}` : window.location.pathname);
+  }, [didRestore, page, pageSize, category, q]);
+
+  // 恢复的页码可能越过当前筛选下的总页数（如书签里存着 page=99），收回最后一页
+  useEffect(() => {
+    if (!loading && page > totalPages) setPage(totalPages);
+  }, [loading, page, totalPages]);
+
+  /* ─── 筛选与动作 ── */
+
+  const hasActiveFilters = q.trim() !== '' || category !== '全部';
+
+  const handleSearchChange = (value: string) => {
+    setQ(value);
+    setPage(1);
+  };
 
   const handleCategoryChange = (cat: string) => {
     setCategory(cat);
     setPage(1);
   };
 
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size);
+    setPage(1);
+  };
+
+  const clearAllFilters = () => {
+    setQ('');
+    setCategory('全部');
+    setPage(1);
+  };
+
+  const chips: AdminFilterChip[] = [];
+  if (q.trim()) {
+    const keyword = q.trim();
+    chips.push({
+      key: 'q',
+      label: `搜索：${keyword.length > 16 ? `${keyword.slice(0, 16)}…` : keyword}`,
+      onRemove: () => handleSearchChange(''),
+    });
+  }
+  if (category !== '全部') {
+    chips.push({
+      key: 'category',
+      label: `分类：${category}`,
+      onRemove: () => handleCategoryChange('全部'),
+    });
+  }
+
+  const handleExportCsv = () => {
+    exportContentsAsCSV(items);
+    toast.success(`已导出本页 ${items.length} 条到 CSV`);
+  };
+
+  const handleCopyLink = async (item: ContentItem) => {
+    if (!item.url) return;
+    try {
+      await navigator.clipboard.writeText(item.url);
+      toast.success('原文链接已复制');
+    } catch {
+      // 剪贴板被拒绝等场景：给可感知的失败反馈，不静默吞掉
+      toast.error('复制失败，请打开原文后复制地址栏链接');
+    }
+  };
+
+  /* ─── 列定义 ── */
+
+  const columns: AdminTableColumn<ContentItem>[] = [
+    {
+      key: 'title',
+      header: '标题',
+      render: (item) =>
+        item.url ? (
+          <a
+            href={item.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block max-w-[440px] truncate text-[13px] font-medium text-ink-900 no-underline transition hover:text-primary"
+          >
+            {item.title || '无标题'}
+          </a>
+        ) : (
+          <span className="block max-w-[440px] truncate text-[13px] font-medium text-ink-900">
+            {item.title || '无标题'}
+          </span>
+        ),
+    },
+    {
+      key: 'source',
+      header: '来源',
+      width: 170,
+      render: (item) => {
+        const color = SOURCE_TYPE_COLOR_MAP[item.source_type] || { bg: '#F3F4F6', color: '#6B7280' };
+        return (
+          <div className="flex items-center gap-1.5 overflow-hidden">
+            <span className="truncate text-[13px] text-ink-700">{item.source_name}</span>
+            <span
+              className="shrink-0 whitespace-nowrap rounded px-1.5 py-0.5 text-[10px] font-semibold"
+              style={{ background: color.bg, color: color.color }}
+            >
+              {item.source_type}
+            </span>
+          </div>
+        );
+      },
+    },
+    {
+      key: 'category',
+      header: '分类',
+      width: 96,
+      render: (item) => (
+        <span className="whitespace-nowrap rounded bg-primary-light px-2 py-1 text-[11px] font-semibold text-primary">
+          {item.category}
+        </span>
+      ),
+    },
+    {
+      key: 'tags',
+      header: '标签',
+      width: 200,
+      render: (item) => (
+        <div className="flex flex-wrap gap-1 overflow-hidden">
+          {item.tags && item.tags.length > 0 ? (
+            item.tags.slice(0, 3).map((tag) => (
+              <span
+                key={tag}
+                className="whitespace-nowrap rounded bg-purple-light px-2 py-0.5 text-[10px] font-medium text-purple"
+              >
+                {tag}
+              </span>
+            ))
+          ) : (
+            <span className="text-ink-500">-</span>
+          )}
+          {item.tags && item.tags.length > 3 && (
+            <span className="text-[10px] text-ink-500">+{item.tags.length - 3}</span>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: 'published_at',
+      header: '发布时间',
+      width: 110,
+      render: (item) => <span className="whitespace-nowrap font-mono text-xs text-ink-500">{timeAgo(item.published_at)}</span>,
+    },
+    {
+      key: 'status',
+      header: '状态',
+      width: 88,
+      render: (item) => {
+        const statusKey = item.status || 'pending';
+        const statusTone = CONTENT_STATUS_TONE[statusKey] || CONTENT_STATUS_TONE.pending;
+        return (
+          <Badge tone={statusTone} className="rounded px-2.5 py-1 text-[11px] font-semibold">
+            {CONTENT_STATUS_LABEL[statusKey] || statusKey}
+          </Badge>
+        );
+      },
+    },
+    {
+      key: 'actions',
+      header: '操作',
+      width: 92,
+      sticky: 'right',
+      render: (item) => <ContentRowActions item={item} onCopyLink={handleCopyLink} />,
+    },
+  ];
+
   return (
     <AdminPageShell maxWidth={1200}>
       <AdminPageHeader
@@ -94,91 +323,79 @@ export default function ContentsPage() {
         description={<>从各信源采集到的原始内容 · 共 <b className="font-mono text-gray-600">{total}</b> 条</>}
       />
 
-      {/* Category Filter Bar */}
-      <Toolbar className="mb-5 gap-2">
-        {CATEGORIES.map((cat) => {
-          const active = category === cat;
-          return (
-            <button
-              key={cat}
-              type="button"
-              onClick={() => handleCategoryChange(cat)}
-              className={cx(
-                'rounded-xs border px-3.5 py-1.5 text-xs transition',
-                active
-                  ? 'border-primary-border bg-primary-light font-semibold text-primary'
-                  : 'border-gray-200 bg-white font-medium text-gray-600 hover:border-primary-border hover:text-primary',
-              )}
-            >
-              {cat}
-            </button>
-          );
-        })}
-      </Toolbar>
-
-      {/* Error Banner */}
-      {error && (
-        <div className="mb-4">
-          <ErrorState error={error} onRetry={() => void refetch()} panel={false} />
-        </div>
-      )}
-
-      {/* Loading State */}
-      {loading && (
-        <LoadingState label="加载中…" minHeight="200px" panel />
-      )}
-
-      {/* Table */}
-      {!loading && items.length > 0 && (
-        <div className="mb-2 flex justify-end">
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => exportContentsAsCSV(items)}
-            className="!px-2.5 !py-1 text-[12px]"
+      {/* 筛选行：搜索（防抖后提交）+ 分类下拉；导出为右侧动作 */}
+      <div className="space-y-2">
+        <AdminFilters
+          searchPlaceholder="搜索标题 / 标签 / 正文…"
+          searchValue={q}
+          onSearchChange={handleSearchChange}
+          actions={
+            !loading && items.length > 0 ? (
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={handleExportCsv}
+                className="!px-2.5 !py-1 text-[12px]"
+              >
+                <Download size={12} />
+                导出本页 CSV（{items.length} 条）
+              </Button>
+            ) : undefined
+          }
+        >
+          <select
+            value={category}
+            onChange={(e) => handleCategoryChange(e.target.value)}
+            aria-label="按分类筛选"
+            className="h-9 rounded-xs border border-ink-200 bg-white px-2 text-[13px] text-ink-900 focus:border-admin-accent focus:outline-none"
           >
-            <Download size={12} />
-            导出本页 CSV（{items.length} 条）
-          </Button>
-        </div>
-      )}
-      {!loading && (
-        <Panel className="overflow-hidden">
-          <div className="overflow-x-auto">
-          {/* Table Header */}
-          <div className="grid grid-cols-[3fr_1.2fr_0.8fr_1.5fr_1fr_0.8fr] border-b border-gray-200 bg-gray-50 px-6 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">
-            <span>标题</span>
-            <span>来源</span>
-            <span>分类</span>
-            <span>标签</span>
-            <span>发布时间</span>
-            <span>状态</span>
-          </div>
+            {CATEGORIES.map((cat) => (
+              <option key={cat} value={cat}>
+                {cat === '全部' ? '全部分类' : cat}
+              </option>
+            ))}
+          </select>
+        </AdminFilters>
 
-          {/* Empty State */}
-          {items.length === 0 && (
-            <EmptyState
-              icon={Newspaper}
-              title="暂无内容数据"
-              desc="内容池为空，请检查信源采集状态"
-              minHeight="160px"
-            />
-          )}
+        {/* 已选条件 chips：单个移除 / 清空全部（无 chips 时整行不渲染） */}
+        <AdminFilterChips chips={chips} onClearAll={clearAllFilters} />
+      </div>
 
-          {/* Rows */}
-          {items.map((item) => (
-            <ContentRow key={item.id} item={item} />
-          ))}
-          </div>
-        </Panel>
-      )}
+      {/* 三态（加载/错误/空）由 AdminTable 内建，页面层不自造 */}
+      <AdminTable
+        columns={columns}
+        rows={items}
+        rowKey={(item) => item.id}
+        loading={loading}
+        error={error}
+        onRetry={() => void refetch()}
+        empty={
+          <AdminEmptyState
+            compact
+            icon={Newspaper}
+            title={hasActiveFilters ? '没有匹配的内容' : '内容池为空'}
+            description={hasActiveFilters ? '试试更换关键词或切换分类' : '内容池为空，请检查信源采集状态'}
+            action={
+              hasActiveFilters ? (
+                <Button type="button" variant="secondary" onClick={clearAllFilters}>
+                  清空筛选
+                </Button>
+              ) : undefined
+            }
+          />
+        }
+        minWidth={980}
+      />
 
-      {/* Pagination */}
+      {/* 分页：后端 /contents 支持 page_size（1–200），条数选择器随之落地 */}
       {!loading && total > 0 && (
         <Pagination
           page={page}
           totalPages={totalPages}
           onPage={setPage}
+          pageSize={pageSize}
+          pageSizeOptions={PAGE_SIZE_OPTIONS}
+          onPageSizeChange={handlePageSizeChange}
           summary={
             <>
               第 <b className="font-mono">{page}</b> / <b className="font-mono">{totalPages}</b> 页，共 {total} 条
@@ -190,82 +407,41 @@ export default function ContentsPage() {
   );
 }
 
-// ─── Content Row ───
-
-function ContentRow({ item }: { item: ContentItem }) {
-  const statusKey = item.status || 'pending';
-  const statusTone = CONTENT_STATUS_TONE[statusKey] || CONTENT_STATUS_TONE.pending;
-  const sourceTypeColor = SOURCE_TYPE_COLOR_MAP[item.source_type] || { bg: '#F3F4F6', color: '#6B7280' };
-  const statusLabel: Record<string, string> = {
-    pending: '待处理',
-    analyzed: '已分析',
-    error: '错误',
-  };
+/* ─── 行操作 ───
+ * 本页只有两个高频动作（打开原文 / 复制链接），≤2 全部直接可见，
+ * 无需「···」折叠菜单；两者皆非破坏性，也没有需要二次确认的入口。 */
 
+function ContentRowActions({
+  item,
+  onCopyLink,
+}: {
+  item: ContentItem;
+  onCopyLink: (item: ContentItem) => void;
+}) {
+  if (!item.url) {
+    return <span className="text-ink-500">—</span>;
+  }
   return (
-    <div className="grid grid-cols-[3fr_1.2fr_0.8fr_1.5fr_1fr_0.8fr] items-center border-b border-gray-100 px-6 py-3.5 text-[13px] transition hover:bg-gray-50">
-      {/* 标题 */}
-      <div className="truncate pr-3">
-        {item.url ? (
-          <a
-            href={item.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="font-medium text-gray-800 no-underline transition hover:text-primary"
-          >
-            {item.title || '无标题'}
-          </a>
-        ) : (
-          <span className="font-medium text-gray-800">{item.title || '无标题'}</span>
-        )}
-      </div>
-
-      {/* 来源 */}
-      <div className="flex items-center gap-1.5 overflow-hidden">
-        <span className="truncate text-gray-700">
-          {item.source_name}
-        </span>
-        <span
-          className="shrink-0 whitespace-nowrap rounded px-1.5 py-0.5 text-[10px] font-semibold"
-          style={{ background: sourceTypeColor.bg, color: sourceTypeColor.color }}
-        >
-          {item.source_type}
-        </span>
-      </div>
-
-      {/* 分类 */}
-      <div>
-        <span className="whitespace-nowrap rounded bg-primary-light px-2 py-1 text-[11px] font-semibold text-primary">
-          {item.category}
-        </span>
-      </div>
-
-      {/* 标签 */}
-      <div className="flex flex-wrap gap-1 overflow-hidden">
-        {item.tags && item.tags.length > 0
-          ? item.tags.slice(0, 3).map((tag) => (
-              <span key={tag} className="whitespace-nowrap rounded bg-purple-light px-2 py-0.5 text-[10px] font-medium text-purple">
-                {tag}
-              </span>
-            ))
-          : <span className="text-gray-300">-</span>
-        }
-        {item.tags && item.tags.length > 3 && (
-          <span className="text-[10px] text-gray-400">+{item.tags.length - 3}</span>
-        )}
-      </div>
-
-      {/* 发布时间 */}
-      <div className="font-mono text-xs text-gray-500">
-        {timeAgo(item.published_at)}
-      </div>
-
-      {/* 状态 */}
-      <div>
-        <Badge tone={statusTone} className="rounded px-2.5 py-1 text-[11px] font-semibold">
-          {statusLabel[statusKey] || statusKey}
-        </Badge>
-      </div>
+    <div className="flex items-center justify-center gap-1">
+      <a
+        href={item.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={`打开原文：${item.title || '无标题'}`}
+        title="打开原文"
+        className="flex h-7 w-7 items-center justify-center rounded-xs text-ink-500 transition hover:bg-ink-100 hover:text-ink-900"
+      >
+        <ExternalLink size={14} strokeWidth={2} />
+      </a>
+      <button
+        type="button"
+        onClick={() => onCopyLink(item)}
+        aria-label={`复制链接：${item.title || '无标题'}`}
+        title="复制链接"
+        className="flex h-7 w-7 items-center justify-center rounded-xs text-ink-500 transition hover:bg-ink-100 hover:text-ink-900"
+      >
+        <Copy size={14} strokeWidth={2} />
+      </button>
     </div>
   );
 }

From 60381ae72238eb37bc066eb34aa7c36cbbdf4bc3 Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 08:50:28 +0800
Subject: [PATCH 7/9] =?UTF-8?q?feat(admin):=20=E4=BB=BB=E5=8A=A1=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E4=BB=8E=E7=94=A8=E6=88=B7=E4=BE=A7=E8=BF=81=E5=85=A5?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=E6=88=90=E4=B8=BA=E3=80=8C=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E3=80=8D(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/stats/jobs 本就是无用户侧入口的后台工具页(流水线健康信息),
整页迁至 /admin/jobs 换后台壳(AdminPageShell/Header/时间窗口切换),
侧边栏系统组加回「任务监控」(壳内真页面,15 项全壳内);旧路径留
服务端 redirect 桩防收藏失效;EXTRA_ADMIN_ONLY_PATHS 补显式冗余。
---
 frontend/src/app/admin/jobs/page.tsx | 360 ++++++++++++++++++++++++++
 frontend/src/app/stats/jobs/page.tsx | 367 +--------------------------
 2 files changed, 370 insertions(+), 357 deletions(-)
 create mode 100644 frontend/src/app/admin/jobs/page.tsx

diff --git a/frontend/src/app/admin/jobs/page.tsx b/frontend/src/app/admin/jobs/page.tsx
new file mode 100644
index 00000000..c0f52ef0
--- /dev/null
+++ b/frontend/src/app/admin/jobs/page.tsx
@@ -0,0 +1,360 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Activity,
+  AlertTriangle,
+  CheckCircle2,
+  Clock,
+  ListChecks,
+  RefreshCw,
+  Timer,
+  XCircle,
+} from 'lucide-react';
+
+import { Badge, Button, Panel, cx, type Tone } from '@/components/ui';
+import { AdminPageHeader, AdminPageShell } from '@/components/admin-ui';
+import { ErrorState } from '@/components/StateView';
+import { useFetch } from '@/hooks/useFetch';
+import { statsJobsApi, type JobStatsByJobKey, type JobStatsResponse } from '@/lib/api';
+import { timeAgoShort as formatRelativeTime } from '@/lib/datetime';
+
+const DAY_OPTIONS: Array<{ value: number; label: string }> = [
+  { value: 1, label: '今日' },
+  { value: 7, label: '7 天' },
+  { value: 30, label: '30 天' },
+  { value: 90, label: '90 天' },
+];
+
+const JOB_STATUS_TONE: Record<string, Tone> = {
+  SUCCESS: 'teal',
+  FAILED: 'red',
+  TIMEOUT: 'amber',
+  SKIPPED: 'neutral',
+  RUNNING: 'primary',
+};
+
+const STATUS_BAR_COLOR: Record<string, string> = {
+  SUCCESS: '#10b981',
+  FAILED: '#ef4444',
+  TIMEOUT: '#f59e0b',
+  SKIPPED: '#94a3b8',
+  RUNNING: '#3b82f6',
+};
+
+function formatDuration(ms: number | null | undefined): string {
+  if (ms == null || ms <= 0) return '-';
+  if (ms < 1000) return `${ms}ms`;
+  const seconds = ms / 1000;
+  if (seconds < 60) return `${seconds.toFixed(1)}s`;
+  const minutes = seconds / 60;
+  if (minutes < 60) return `${minutes.toFixed(1)}min`;
+  return `${(minutes / 60).toFixed(1)}h`;
+}
+
+function successTone(rate: number): Tone {
+  if (rate >= 0.95) return 'teal';
+  if (rate >= 0.8) return 'amber';
+  return 'red';
+}
+
+function lastStatusTone(status: string | null | undefined): Tone {
+  if (!status) return 'neutral';
+  return JOB_STATUS_TONE[status] || 'neutral';
+}
+
+export default function JobStatsPage() {
+  const [days, setDays] = useState(7);
+  const [selectedJobKey, setSelectedJobKey] = useState<string | null>(null);
+
+  const { data, loading, error, refetch } = useFetch<JobStatsResponse>(
+    () => statsJobsApi.get(days, selectedJobKey ?? undefined),
+    [days, selectedJobKey],
+    { initialLoading: false },
+  );
+
+  const totals = data?.totals;
+  const byStatusMax = data
+    ? Math.max(...data.by_status.map((row) => row.count), 1)
+    : 1;
+
+  return (
+    <AdminPageShell maxWidth={1200}>
+      <AdminPageHeader
+        title="任务监控"
+        icon={Activity}
+        description={
+          <>
+            来自 <code className="rounded bg-ink-100 px-1">job_execution_logs</code> 表的运行数据，覆盖所有用{' '}
+            <code className="rounded bg-ink-100 px-1">@track_job</code> 装饰的全局任务。
+          </>
+        }
+        actions={
+          <div className="flex items-center gap-2">
+            <div className="flex overflow-hidden rounded-xs border border-ink-200">
+              {DAY_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => setDays(opt.value)}
+                  aria-pressed={days === opt.value}
+                  className={cx(
+                    'min-h-8 px-3 py-1 text-[13px] transition',
+                    days === opt.value
+                      ? 'bg-primary-solid text-white'
+                      : 'bg-white text-ink-700 hover:bg-ink-100',
+                  )}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => void refetch()}
+              disabled={loading}
+              className="min-h-8 px-3.5 py-1.5 text-[13px]"
+            >
+              <RefreshCw className={cx('mr-1 inline h-3.5 w-3.5', loading && 'animate-spin')} />
+              刷新
+            </Button>
+          </div>
+        }
+      />
+
+      {error && (
+        <div className="mb-4">
+          <ErrorState error={error} onRetry={() => void refetch()} panel={false} />
+        </div>
+      )}
+
+      {/* ── KPI 卡片 ── */}
+      <section className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <KpiCard
+          icon={<ListChecks className="h-5 w-5 text-blue-600" />}
+          label="总运行数"
+          value={totals ? totals.total_runs.toLocaleString() : '-'}
+          hint={data ? `${data.period.days} 天内` : ''}
+        />
+        <KpiCard
+          icon={<CheckCircle2 className="h-5 w-5 text-emerald-600" />}
+          label="成功率"
+          value={totals ? `${(totals.success_rate * 100).toFixed(1)}%` : '-'}
+          hint={totals ? `${totals.success_count} 成功 / ${totals.failed_count + totals.timeout_count} 失败` : ''}
+          tone={successTone(totals?.success_rate ?? 1)}
+        />
+        <KpiCard
+          icon={<Timer className="h-5 w-5 text-amber-600" />}
+          label="平均耗时"
+          value={formatDuration(totals?.avg_duration_ms)}
+          hint={totals ? `最长 ${formatDuration(totals.max_duration_ms)}` : ''}
+        />
+        <KpiCard
+          icon={<AlertTriangle className="h-5 w-5 text-red-600" />}
+          label="最近失败"
+          value={data ? data.recent_failures.length.toString() : '-'}
+          hint={totals ? `${totals.failed_count + totals.timeout_count} 次` : '近 10 条'}
+        />
+      </section>
+
+      {/* ── 状态分布 ── */}
+      <Panel className="mb-6">
+        <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900">
+          <Activity className="h-4 w-4 text-gray-500" />
+          状态分布
+        </h2>
+        {data && data.by_status.length > 0 ? (
+          <div className="space-y-2">
+            {data.by_status.map((row) => (
+              <div key={row.status} className="flex items-center gap-3">
+                <span className="w-20 text-[12px] text-gray-600">
+                  <Badge tone={JOB_STATUS_TONE[row.status] || 'neutral'}>{row.status}</Badge>
+                </span>
+                <div className="h-5 flex-1 overflow-hidden rounded-sm bg-gray-100">
+                  <div
+                    className="h-full transition-all"
+                    style={{
+                      width: `${(row.count / byStatusMax) * 100}%`,
+                      backgroundColor: STATUS_BAR_COLOR[row.status] || '#94a3b8',
+                    }}
+                  />
+                </div>
+                <span className="w-20 text-right font-mono text-[12px] text-gray-700">
+                  {row.count.toLocaleString()}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="py-6 text-center text-[13px] text-gray-500">暂无数据</p>
+        )}
+      </Panel>
+
+      {/* ── Per-job_key 表格 ── */}
+      <Panel className="mb-6">
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="flex items-center gap-2 text-sm font-semibold text-gray-900">
+            <ListChecks className="h-4 w-4 text-gray-500" />
+            各任务运行情况
+          </h2>
+          {selectedJobKey && (
+            <button
+              type="button"
+              onClick={() => setSelectedJobKey(null)}
+              className="text-[12px] text-orange hover:underline"
+            >
+              清除筛选
+            </button>
+          )}
+        </div>
+        {data && data.by_job_key.length > 0 ? (
+          <div className="overflow-x-auto">
+            <table className="w-full text-[13px]">
+              <thead>
+                <tr className="border-b border-gray-200 text-left text-[12px] uppercase tracking-wide text-gray-500">
+                  <th className="px-2 py-2">任务</th>
+                  <th className="px-2 py-2 text-right">运行</th>
+                  <th className="px-2 py-2">成功率</th>
+                  <th className="px-2 py-2 text-right">平均耗时</th>
+                  <th className="px-2 py-2">最近状态</th>
+                  <th className="px-2 py-2">最近运行</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.by_job_key.map((row) => (
+                  <JobKeyRow
+                    key={row.job_key}
+                    row={row}
+                    isSelected={selectedJobKey === row.job_key}
+                    onClick={() =>
+                      setSelectedJobKey(
+                        selectedJobKey === row.job_key ? null : row.job_key,
+                      )
+                    }
+                  />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="py-6 text-center text-[13px] text-gray-500">暂无数据</p>
+        )}
+      </Panel>
+
+      {/* ── 最近失败 ── */}
+      <Panel>
+        <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900">
+          <XCircle className="h-4 w-4 text-red-500" />
+          最近失败 / 超时
+          <span className="text-[12px] font-normal text-gray-500">
+            (最多 10 条)
+          </span>
+        </h2>
+        {data && data.recent_failures.length > 0 ? (
+          <ul className="space-y-2">
+            {data.recent_failures.map((row, idx) => (
+              <li
+                key={`${row.job_key}-${row.started_at}-${idx}`}
+                className="rounded-sm border border-red-light bg-red-light/30 px-3 py-2"
+              >
+                <div className="mb-1 flex items-center justify-between text-[12px]">
+                  <span className="font-mono text-gray-700">{row.job_key}</span>
+                  <span className="flex items-center gap-2 text-gray-500">
+                    <Badge tone={JOB_STATUS_TONE[row.status] || 'neutral'}>{row.status}</Badge>
+                    <Clock className="h-3 w-3" />
+                    {formatRelativeTime(row.started_at)}
+                    <span>· {formatDuration(row.duration_ms)}</span>
+                  </span>
+                </div>
+                {row.error_message && (
+                  <pre className="overflow-x-auto whitespace-pre-wrap break-words text-[12px] text-red">
+                    {row.error_message}
+                  </pre>
+                )}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="py-6 text-center text-[13px] text-gray-500">
+            {data ? '🎉 该时间窗口内无失败记录' : ''}
+          </p>
+        )}
+      </Panel>
+    </AdminPageShell>
+  );
+}
+
+function KpiCard({
+  icon,
+  label,
+  value,
+  hint,
+  tone = 'neutral',
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  hint?: string;
+  tone?: Tone;
+}) {
+  return (
+    <div className="rounded-sm border border-gray-200 bg-white px-4 py-3 shadow-sm">
+      <div className="mb-1 flex items-center gap-2 text-[12px] text-gray-500">
+        {icon}
+        {label}
+      </div>
+      <div className="font-mono text-2xl font-semibold text-gray-900">
+        {value}
+      </div>
+      {hint && (
+        <Badge tone={tone} className="mt-1.5">
+          {hint}
+        </Badge>
+      )}
+    </div>
+  );
+}
+
+function JobKeyRow({
+  row,
+  isSelected,
+  onClick,
+}: {
+  row: JobStatsByJobKey;
+  isSelected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <tr
+      onClick={onClick}
+      className={cx(
+        'cursor-pointer border-b border-gray-100 transition hover:bg-gray-50',
+        isSelected && 'bg-primary/5',
+      )}
+    >
+      <td className="px-2 py-2 font-mono text-[12px] text-gray-700">
+        {row.job_key}
+      </td>
+      <td className="px-2 py-2 text-right font-mono text-[12px] text-gray-700">
+        {row.runs}
+      </td>
+      <td className="px-2 py-2">
+        <Badge tone={successTone(row.success_rate)}>
+          {(row.success_rate * 100).toFixed(1)}%
+        </Badge>
+      </td>
+      <td className="px-2 py-2 text-right font-mono text-[12px] text-gray-700">
+        {formatDuration(row.avg_duration_ms)}
+      </td>
+      <td className="px-2 py-2">
+        <Badge tone={lastStatusTone(row.last_status)}>
+          {row.last_status || '-'}
+        </Badge>
+      </td>
+      <td className="px-2 py-2 text-[12px] text-gray-500">
+        {formatRelativeTime(row.last_run_at)}
+      </td>
+    </tr>
+  );
+}
diff --git a/frontend/src/app/stats/jobs/page.tsx b/frontend/src/app/stats/jobs/page.tsx
index fcbe7406..58861cc1 100644
--- a/frontend/src/app/stats/jobs/page.tsx
+++ b/frontend/src/app/stats/jobs/page.tsx
@@ -1,358 +1,11 @@
-'use client';
-
-import React, { useState } from 'react';
-import {
-  Activity,
-  AlertTriangle,
-  CheckCircle2,
-  Clock,
-  ListChecks,
-  RefreshCw,
-  Timer,
-  XCircle,
-} from 'lucide-react';
-
-import { Badge, Button, Panel, cx, type Tone } from '@/components/ui';
-import { ErrorState } from '@/components/StateView';
-import { useFetch } from '@/hooks/useFetch';
-import { statsJobsApi, type JobStatsByJobKey, type JobStatsResponse } from '@/lib/api';
-import { timeAgoShort as formatRelativeTime } from '@/lib/datetime';
-
-const DAY_OPTIONS: Array<{ value: number; label: string }> = [
-  { value: 1, label: '今日' },
-  { value: 7, label: '7 天' },
-  { value: 30, label: '30 天' },
-  { value: 90, label: '90 天' },
-];
-
-const JOB_STATUS_TONE: Record<string, Tone> = {
-  SUCCESS: 'teal',
-  FAILED: 'red',
-  TIMEOUT: 'amber',
-  SKIPPED: 'neutral',
-  RUNNING: 'primary',
-};
-
-const STATUS_BAR_COLOR: Record<string, string> = {
-  SUCCESS: '#10b981',
-  FAILED: '#ef4444',
-  TIMEOUT: '#f59e0b',
-  SKIPPED: '#94a3b8',
-  RUNNING: '#3b82f6',
-};
-
-function formatDuration(ms: number | null | undefined): string {
-  if (ms == null || ms <= 0) return '-';
-  if (ms < 1000) return `${ms}ms`;
-  const seconds = ms / 1000;
-  if (seconds < 60) return `${seconds.toFixed(1)}s`;
-  const minutes = seconds / 60;
-  if (minutes < 60) return `${minutes.toFixed(1)}min`;
-  return `${(minutes / 60).toFixed(1)}h`;
-}
-
-function successTone(rate: number): Tone {
-  if (rate >= 0.95) return 'teal';
-  if (rate >= 0.8) return 'amber';
-  return 'red';
-}
-
-function lastStatusTone(status: string | null | undefined): Tone {
-  if (!status) return 'neutral';
-  return JOB_STATUS_TONE[status] || 'neutral';
-}
-
-export default function JobStatsPage() {
-  const [days, setDays] = useState(7);
-  const [selectedJobKey, setSelectedJobKey] = useState<string | null>(null);
-
-  const { data, loading, error, refetch } = useFetch<JobStatsResponse>(
-    () => statsJobsApi.get(days, selectedJobKey ?? undefined),
-    [days, selectedJobKey],
-    { initialLoading: false },
-  );
-
-  const totals = data?.totals;
-  const byStatusMax = data
-    ? Math.max(...data.by_status.map((row) => row.count), 1)
-    : 1;
-
-  return (
-    <div className="mx-auto w-full max-w-6xl px-6 py-8">
-      <header className="mb-6 flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h1 className="flex items-center gap-2 text-2xl font-semibold text-gray-900">
-            <Activity className="h-6 w-6 text-orange" />
-            抓取/调度任务监控
-          </h1>
-          <p className="mt-1 text-sm text-gray-500">
-            来自 <code className="rounded bg-gray-100 px-1">job_execution_logs</code> 表的运行数据。
-            覆盖所有用 <code className="rounded bg-gray-100 px-1">@track_job</code> 装饰的全局任务。
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="flex overflow-hidden rounded-sm border border-gray-200">
-            {DAY_OPTIONS.map((opt) => (
-              <button
-                key={opt.value}
-                type="button"
-                onClick={() => setDays(opt.value)}
-                className={cx(
-                  'min-h-8 px-3 py-1 text-[13px] transition',
-                  days === opt.value
-                    ? 'bg-orange text-white'
-                    : 'bg-white text-gray-700 hover:bg-gray-50',
-                )}
-              >
-                {opt.label}
-              </button>
-            ))}
-          </div>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => void refetch()}
-            disabled={loading}
-            className="min-h-8 px-3.5 py-1.5 text-[13px]"
-          >
-            <RefreshCw className={cx('mr-1 inline h-3.5 w-3.5', loading && 'animate-spin')} />
-            刷新
-          </Button>
-        </div>
-      </header>
-
-      {error && (
-        <div className="mb-4">
-          <ErrorState error={error} onRetry={() => void refetch()} panel={false} />
-        </div>
-      )}
-
-      {/* ── KPI 卡片 ── */}
-      <section className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
-        <KpiCard
-          icon={<ListChecks className="h-5 w-5 text-blue-600" />}
-          label="总运行数"
-          value={totals ? totals.total_runs.toLocaleString() : '-'}
-          hint={data ? `${data.period.days} 天内` : ''}
-        />
-        <KpiCard
-          icon={<CheckCircle2 className="h-5 w-5 text-emerald-600" />}
-          label="成功率"
-          value={totals ? `${(totals.success_rate * 100).toFixed(1)}%` : '-'}
-          hint={totals ? `${totals.success_count} 成功 / ${totals.failed_count + totals.timeout_count} 失败` : ''}
-          tone={successTone(totals?.success_rate ?? 1)}
-        />
-        <KpiCard
-          icon={<Timer className="h-5 w-5 text-amber-600" />}
-          label="平均耗时"
-          value={formatDuration(totals?.avg_duration_ms)}
-          hint={totals ? `最长 ${formatDuration(totals.max_duration_ms)}` : ''}
-        />
-        <KpiCard
-          icon={<AlertTriangle className="h-5 w-5 text-red-600" />}
-          label="最近失败"
-          value={data ? data.recent_failures.length.toString() : '-'}
-          hint={totals ? `${totals.failed_count + totals.timeout_count} 次` : '近 10 条'}
-        />
-      </section>
-
-      {/* ── 状态分布 ── */}
-      <Panel className="mb-6">
-        <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900">
-          <Activity className="h-4 w-4 text-gray-500" />
-          状态分布
-        </h2>
-        {data && data.by_status.length > 0 ? (
-          <div className="space-y-2">
-            {data.by_status.map((row) => (
-              <div key={row.status} className="flex items-center gap-3">
-                <span className="w-20 text-[12px] text-gray-600">
-                  <Badge tone={JOB_STATUS_TONE[row.status] || 'neutral'}>{row.status}</Badge>
-                </span>
-                <div className="h-5 flex-1 overflow-hidden rounded-sm bg-gray-100">
-                  <div
-                    className="h-full transition-all"
-                    style={{
-                      width: `${(row.count / byStatusMax) * 100}%`,
-                      backgroundColor: STATUS_BAR_COLOR[row.status] || '#94a3b8',
-                    }}
-                  />
-                </div>
-                <span className="w-20 text-right font-mono text-[12px] text-gray-700">
-                  {row.count.toLocaleString()}
-                </span>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="py-6 text-center text-[13px] text-gray-500">暂无数据</p>
-        )}
-      </Panel>
-
-      {/* ── Per-job_key 表格 ── */}
-      <Panel className="mb-6">
-        <div className="mb-3 flex items-center justify-between">
-          <h2 className="flex items-center gap-2 text-sm font-semibold text-gray-900">
-            <ListChecks className="h-4 w-4 text-gray-500" />
-            各任务运行情况
-          </h2>
-          {selectedJobKey && (
-            <button
-              type="button"
-              onClick={() => setSelectedJobKey(null)}
-              className="text-[12px] text-orange hover:underline"
-            >
-              清除筛选
-            </button>
-          )}
-        </div>
-        {data && data.by_job_key.length > 0 ? (
-          <div className="overflow-x-auto">
-            <table className="w-full text-[13px]">
-              <thead>
-                <tr className="border-b border-gray-200 text-left text-[12px] uppercase tracking-wide text-gray-500">
-                  <th className="px-2 py-2">任务</th>
-                  <th className="px-2 py-2 text-right">运行</th>
-                  <th className="px-2 py-2">成功率</th>
-                  <th className="px-2 py-2 text-right">平均耗时</th>
-                  <th className="px-2 py-2">最近状态</th>
-                  <th className="px-2 py-2">最近运行</th>
-                </tr>
-              </thead>
-              <tbody>
-                {data.by_job_key.map((row) => (
-                  <JobKeyRow
-                    key={row.job_key}
-                    row={row}
-                    isSelected={selectedJobKey === row.job_key}
-                    onClick={() =>
-                      setSelectedJobKey(
-                        selectedJobKey === row.job_key ? null : row.job_key,
-                      )
-                    }
-                  />
-                ))}
-              </tbody>
-            </table>
-          </div>
-        ) : (
-          <p className="py-6 text-center text-[13px] text-gray-500">暂无数据</p>
-        )}
-      </Panel>
-
-      {/* ── 最近失败 ── */}
-      <Panel>
-        <h2 className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900">
-          <XCircle className="h-4 w-4 text-red-500" />
-          最近失败 / 超时
-          <span className="text-[12px] font-normal text-gray-500">
-            (最多 10 条)
-          </span>
-        </h2>
-        {data && data.recent_failures.length > 0 ? (
-          <ul className="space-y-2">
-            {data.recent_failures.map((row, idx) => (
-              <li
-                key={`${row.job_key}-${row.started_at}-${idx}`}
-                className="rounded-sm border border-red-light bg-red-light/30 px-3 py-2"
-              >
-                <div className="mb-1 flex items-center justify-between text-[12px]">
-                  <span className="font-mono text-gray-700">{row.job_key}</span>
-                  <span className="flex items-center gap-2 text-gray-500">
-                    <Badge tone={JOB_STATUS_TONE[row.status] || 'neutral'}>{row.status}</Badge>
-                    <Clock className="h-3 w-3" />
-                    {formatRelativeTime(row.started_at)}
-                    <span>· {formatDuration(row.duration_ms)}</span>
-                  </span>
-                </div>
-                {row.error_message && (
-                  <pre className="overflow-x-auto whitespace-pre-wrap break-words text-[12px] text-red">
-                    {row.error_message}
-                  </pre>
-                )}
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p className="py-6 text-center text-[13px] text-gray-500">
-            {data ? '🎉 该时间窗口内无失败记录' : ''}
-          </p>
-        )}
-      </Panel>
-    </div>
-  );
-}
-
-function KpiCard({
-  icon,
-  label,
-  value,
-  hint,
-  tone = 'neutral',
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: string;
-  hint?: string;
-  tone?: Tone;
-}) {
-  return (
-    <div className="rounded-sm border border-gray-200 bg-white px-4 py-3 shadow-sm">
-      <div className="mb-1 flex items-center gap-2 text-[12px] text-gray-500">
-        {icon}
-        {label}
-      </div>
-      <div className="font-mono text-2xl font-semibold text-gray-900">
-        {value}
-      </div>
-      {hint && (
-        <Badge tone={tone} className="mt-1.5">
-          {hint}
-        </Badge>
-      )}
-    </div>
-  );
-}
-
-function JobKeyRow({
-  row,
-  isSelected,
-  onClick,
-}: {
-  row: JobStatsByJobKey;
-  isSelected: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <tr
-      onClick={onClick}
-      className={cx(
-        'cursor-pointer border-b border-gray-100 transition hover:bg-gray-50',
-        isSelected && 'bg-orange/5',
-      )}
-    >
-      <td className="px-2 py-2 font-mono text-[12px] text-gray-700">
-        {row.job_key}
-      </td>
-      <td className="px-2 py-2 text-right font-mono text-[12px] text-gray-700">
-        {row.runs}
-      </td>
-      <td className="px-2 py-2">
-        <Badge tone={successTone(row.success_rate)}>
-          {(row.success_rate * 100).toFixed(1)}%
-        </Badge>
-      </td>
-      <td className="px-2 py-2 text-right font-mono text-[12px] text-gray-700">
-        {formatDuration(row.avg_duration_ms)}
-      </td>
-      <td className="px-2 py-2">
-        <Badge tone={lastStatusTone(row.last_status)}>
-          {row.last_status || '-'}
-        </Badge>
-      </td>
-      <td className="px-2 py-2 text-[12px] text-gray-500">
-        {formatRelativeTime(row.last_run_at)}
-      </td>
-    </tr>
-  );
+import { redirect } from 'next/navigation';
+
+/**
+ * 旧路径跳转桩（2026-10-19，owner 验收反馈）：
+ * 任务统计本是流水线健康信息，归属管理后台。页面已迁至 /admin/jobs
+ * （后台「系统」组「任务监控」），此处保留 301 语义的服务端跳转，
+ * 让历史收藏/文档链接不失效。
+ */
+export default function LegacyJobsStatsPage() {
+  redirect('/admin/jobs');
 }

From abd08d8555d5683ff60fdb8003b9656c69506bf5 Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 08:50:28 +0800
Subject: [PATCH 8/9] =?UTF-8?q?feat(api):=20=E4=BB=BB=E5=8A=A1=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E7=AB=AF=E7=82=B9=E6=94=B6=E7=B4=A7=20admin-only=20(#?=
 =?UTF-8?q?121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/stats/jobs 路由守卫从 get_current_user 换 get_current_admin_user
(与 users.py 同模式)。消费端已全部归位管理后台。实测权限矩阵:
无 token 401/普通登录用户 403/admin 200(探针用户验证后即删)。
---
 backend/app/api/v1/stats_jobs.py | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/backend/app/api/v1/stats_jobs.py b/backend/app/api/v1/stats_jobs.py
index 562fb51a..4fe35184 100644
--- a/backend/app/api/v1/stats_jobs.py
+++ b/backend/app/api/v1/stats_jobs.py
@@ -3,6 +3,10 @@
 
 不走 DuckDB —— job_execution_logs 在 OLTP DB（PG/SQLite），
 和 stats.py 的 DuckDB 分析路径独立。复用 json_cache 做轻量缓存。
+
+2026-10-19（#121）：admin-only。流水线健康是运维信息，消费端已迁至
+管理后台 /admin/jobs（前端迁移见同 issue）；此前挂在用户侧 /stats/jobs
+只是历史摆位，用户侧并无入口。router 级守卫与 users.py 同模式。
 """
 
 from __future__ import annotations
@@ -12,7 +16,7 @@
 from fastapi import APIRouter, Depends, Query
 from fastapi.responses import Response
 
-from app.api.v1.auth import get_current_user
+from app.api.v1.auth import get_current_admin_user
 from app.core.config import settings
 from app.core.database import async_session
 from app.repositories.job_execution_log_repo import JobExecutionLogRepository
@@ -21,7 +25,7 @@
 router = APIRouter(
     prefix="/stats/jobs",
     tags=["stats"],
-    dependencies=[Depends(get_current_user)],
+    dependencies=[Depends(get_current_admin_user)],
 )
 
 

From aac3efa21247b137d95c11503ea415de412845fc Mon Sep 17 00:00:00 2001
From: fxbin <fxbin123@gmail.com>
Date: Mon, 19 Oct 2026 09:00:14 +0800
Subject: [PATCH 9/9] =?UTF-8?q?fix(admin):=20=E5=A4=8D=E5=AE=A1=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=E2=80=94=E2=80=94=E4=BB=BB=E5=8A=A1=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E9=A1=B5=E8=A3=B8=E7=B1=BB=E6=B8=85=E7=90=86=E4=B8=8E=20/admin?=
 =?UTF-8?q?/jobs=20=E6=9D=83=E9=99=90=E6=96=AD=E8=A8=80=20(#121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

独立 Verifier 复审两处 blocking:text-amber-600 裸类换 text-amber
(项目 token 同值),text-orange 无 token 无效类换 text-primary-text;
跳转桩注释 301 修正为 redirect() 实际的 307。补 /admin/jobs 进
navigation 测试与 check-navigation-access 断言(权限收紧留机器回归)。
---
 frontend/scripts/check-navigation-access.js   | 2 +-
 frontend/src/app/admin/jobs/page.tsx          | 4 ++--
 frontend/src/app/stats/jobs/page.tsx          | 4 ++--
 frontend/src/lib/__tests__/navigation.test.ts | 3 +++
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/scripts/check-navigation-access.js b/frontend/scripts/check-navigation-access.js
index 6b53bd99..385d2089 100644
--- a/frontend/scripts/check-navigation-access.js
+++ b/frontend/scripts/check-navigation-access.js
@@ -85,7 +85,7 @@ for (const pathName of ['/daily', '/weekly', '/monthly', '/stats', '/my-topics',
   assert.strictEqual(canAccessPath(pathName, user, enabledFeatures), true, `${pathName} should allow user`);
 }
 
-for (const pathName of ['/admin', '/admin/sources', '/admin/model-eval', '/admin/contents', '/admin/mother-topics']) {
+for (const pathName of ['/admin', '/admin/sources', '/admin/model-eval', '/admin/contents', '/admin/mother-topics', '/admin/jobs']) {
   assert(ADMIN_ONLY_PATHS.includes(pathName), `ADMIN_ONLY_PATHS should include ${pathName}`);
   assert.strictEqual(requiredAccessForPath(pathName), 'admin');
   assert.strictEqual(canAccessPath(pathName, null), false, `${pathName} should require admin login`);
diff --git a/frontend/src/app/admin/jobs/page.tsx b/frontend/src/app/admin/jobs/page.tsx
index c0f52ef0..785e3a35 100644
--- a/frontend/src/app/admin/jobs/page.tsx
+++ b/frontend/src/app/admin/jobs/page.tsx
@@ -145,7 +145,7 @@ export default function JobStatsPage() {
           tone={successTone(totals?.success_rate ?? 1)}
         />
         <KpiCard
-          icon={<Timer className="h-5 w-5 text-amber-600" />}
+          icon={<Timer className="h-5 w-5 text-amber" />}
           label="平均耗时"
           value={formatDuration(totals?.avg_duration_ms)}
           hint={totals ? `最长 ${formatDuration(totals.max_duration_ms)}` : ''}
@@ -202,7 +202,7 @@ export default function JobStatsPage() {
             <button
               type="button"
               onClick={() => setSelectedJobKey(null)}
-              className="text-[12px] text-orange hover:underline"
+              className="text-[12px] text-primary-text hover:underline"
             >
               清除筛选
             </button>
diff --git a/frontend/src/app/stats/jobs/page.tsx b/frontend/src/app/stats/jobs/page.tsx
index 58861cc1..b1f74f3a 100644
--- a/frontend/src/app/stats/jobs/page.tsx
+++ b/frontend/src/app/stats/jobs/page.tsx
@@ -3,8 +3,8 @@ import { redirect } from 'next/navigation';
 /**
  * 旧路径跳转桩（2026-10-19，owner 验收反馈）：
  * 任务统计本是流水线健康信息，归属管理后台。页面已迁至 /admin/jobs
- * （后台「系统」组「任务监控」），此处保留 301 语义的服务端跳转，
- * 让历史收藏/文档链接不失效。
+ * （后台「系统」组「任务监控」），此处保留服务端跳转（redirect() 为
+ * 307 临时跳转），让历史收藏/文档链接不失效。
  */
 export default function LegacyJobsStatsPage() {
   redirect('/admin/jobs');
diff --git a/frontend/src/lib/__tests__/navigation.test.ts b/frontend/src/lib/__tests__/navigation.test.ts
index 21152ce6..730c167d 100644
--- a/frontend/src/lib/__tests__/navigation.test.ts
+++ b/frontend/src/lib/__tests__/navigation.test.ts
@@ -116,6 +116,9 @@ describe('派生路径集合', () => {
   it('ADMIN_ONLY_PATHS / USER_ONLY_PATHS 覆盖关键路径', () => {
     expect(ADMIN_ONLY_PATHS).toContain('/admin/contents');
     expect(ADMIN_ONLY_PATHS).toContain('/admin/model-eval');
+    // #121：任务统计从用户侧迁入后台，权限随之收紧
+    expect(ADMIN_ONLY_PATHS).toContain('/admin/jobs');
+    expect(requiredAccessForPath('/admin/jobs')).toBe('admin');
     expect(USER_ONLY_PATHS).toContain('/profile');
     expect(USER_ONLY_PATHS).toContain('/daily');
   });