diff --git a/frontend/src/app/knowledge-bases/page.tsx b/frontend/src/app/knowledge-bases/page.tsx
index b64e6d06..2e88e992 100644
--- a/frontend/src/app/knowledge-bases/page.tsx
+++ b/frontend/src/app/knowledge-bases/page.tsx
@@ -1,11 +1,37 @@
 "use client";
 
 import Link from "next/link";
-import { InboxOutlined, ReloadOutlined } from "@ant-design/icons";
-import { Alert, Button, Card, Divider, Empty, Form, Input, Modal, Select, Space, Spin, Table, Tag, Typography, Upload, message } from "antd";
+import {
+  CaretDownOutlined,
+  CaretRightOutlined,
+  InboxOutlined,
+  MinusCircleOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  SearchOutlined,
+} from "@ant-design/icons";
+import {
+  Alert,
+  Button,
+  Divider,
+  Drawer,
+  Empty,
+  Form,
+  Input,
+  List,
+  Modal,
+  Select,
+  Space,
+  Spin,
+  Tag,
+  Tree,
+  Typography,
+  Upload,
+  message,
+} from "antd";
+import type { DataNode } from "antd/es/tree";
 import type { UploadFile } from "antd/es/upload/interface";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { ReactNode } from "react";
 
 import {
   createKnowledgeBase,
@@ -19,25 +45,26 @@ import {
   uploadKnowledgeBaseDocument,
 } from "@/services/knowledge-base";
 import { useAuthStore } from "@/stores/auth.store";
-import type { KnowledgeBaseDocumentItem, KnowledgeBaseItem, KnowledgeBaseVersionItem } from "@/types/api";
+import type {
+  ChatSourceItem,
+  KnowledgeBaseDocumentItem,
+  KnowledgeBaseItem,
+  KnowledgeBaseVersionItem,
+} from "@/types/api";
 
 const { Dragger } = Upload;
-const { Title, Text } = Typography;
+const { Title, Text, Paragraph } = Typography;
 
 type KnowledgeBaseFormValues = {
   name: string;
   description?: string;
-  note?: string;
-  source_type?: string;
-  authority?: string;
-  effective_date?: string;
-  region?: string;
-  tags?: string;
 };
+
 type KnowledgeBaseRollbackFormValues = {
   target_version_label: string;
   change_summary?: string;
 };
+
 type KnowledgeBaseGovernanceCheckStatus = "pass" | "warning" | "block";
 type KnowledgeBaseGovernanceCheckItem = {
   key: string;
@@ -45,6 +72,7 @@ type KnowledgeBaseGovernanceCheckItem = {
   status: KnowledgeBaseGovernanceCheckStatus;
   detail: string;
 };
+
 type KnowledgeBaseVersionComparisonRow = {
   key: string;
   label: string;
@@ -53,45 +81,6 @@ type KnowledgeBaseVersionComparisonRow = {
   changed: boolean;
 };
 
-type SimpleListProps<T> = {
-  bordered?: boolean;
-  dataSource: T[];
-  header?: ReactNode;
-  loading?: boolean;
-  locale?: { emptyText?: ReactNode };
-  renderItem: (item: T, index: number) => ReactNode;
-  size?: "small" | "default";
-};
-
-function SimpleList<T>({ bordered, dataSource, header, loading, locale, renderItem, size = "default" }: SimpleListProps<T>) {
-  if (loading) {
-    return (
-      <div className="kb-simple-list kb-simple-list-loading">
-        <Spin />
-      </div>
-    );
-  }
-
-  if (!dataSource.length) {
-    return <div className="kb-simple-list-empty">{locale?.emptyText ?? "暂无数据"}</div>;
-  }
-
-  return (
-    <div className={bordered ? `kb-simple-list kb-simple-list-${size} kb-simple-list-bordered` : `kb-simple-list kb-simple-list-${size}`}>
-      {header ? <div className="kb-simple-list-header">{header}</div> : null}
-      {dataSource.map((item, index) => (
-        <div className="kb-simple-list-row" key={index}>
-          {renderItem(item, index)}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function SimpleListItem({ children, className }: { children: ReactNode; className?: string }) {
-  return <div className={className ? `kb-simple-list-item ${className}` : "kb-simple-list-item"}>{children}</div>;
-}
-
 const DOCUMENT_STATUS_META: Record<string, { color: string; label: string }> = {
   pending: { color: "gold", label: "待处理" },
   processing: { color: "blue", label: "处理中" },
@@ -109,30 +98,20 @@ const LIFECYCLE_STATUS_META: Record<string, { color: string; label: string }> =
 };
 
 function formatLifecycleBadge(value: string | undefined) {
-  if (!value) {
-    return <Tag>-</Tag>;
-  }
+  if (!value) return <Tag>-</Tag>;
   const meta = LIFECYCLE_STATUS_META[value] ?? { color: "default", label: value };
   return <Tag color={meta.color}>{meta.label}</Tag>;
 }
 
 function getStageTone(record: KnowledgeBaseDocumentItem) {
-  if (record.status === "failed" || record.failure_reason) {
-    return "danger" as const;
-  }
-  if (record.index_status === "blocked" || record.parse_status === "partial") {
-    return "warning" as const;
-  }
-  if (record.status === "indexed") {
-    return "success" as const;
-  }
+  if (record.status === "failed" || record.failure_reason) return "danger" as const;
+  if (record.index_status === "blocked" || record.parse_status === "partial") return "warning" as const;
+  if (record.status === "indexed") return "success" as const;
   return "info" as const;
 }
 
 function getStageLabel(record: KnowledgeBaseDocumentItem) {
-  if (record.index_status === "blocked") {
-    return `${record.current_stage_label || "处理中"} · 索引阻塞`;
-  }
+  if (record.index_status === "blocked") return `${record.current_stage_label || "处理中"} · 索引阻塞`;
   return record.current_stage_label || "-";
 }
 
@@ -142,56 +121,29 @@ function formatDateTime(value: string) {
 
 function getRetrievalModeMeta(value: string | null | undefined) {
   const mode = (value || "").toLowerCase();
-
-  if (mode === "hybrid") {
-    return { color: "purple", label: "Hybrid" };
-  }
-  if (mode === "vector") {
-    return { color: "cyan", label: "Vector" };
-  }
-  if (mode === "bm25") {
-    return { color: "blue", label: "BM25" };
-  }
-  if (mode === "local-bm25") {
-    return { color: "gold", label: "Legacy Local BM25" };
-  }
-
+  if (mode === "hybrid") return { color: "purple", label: "Hybrid" };
+  if (mode === "vector") return { color: "cyan", label: "Vector" };
+  if (mode === "bm25") return { color: "blue", label: "BM25" };
+  if (mode === "local-bm25") return { color: "gold", label: "Legacy Local BM25" };
   return { color: "default", label: value || "Default" };
 }
 
 function getKnowledgeBaseStatusMeta(value: string | null | undefined) {
   const normalized = (value || "").toLowerCase();
-  if (normalized === "active") {
-    return { color: "green", label: "已发布" };
-  }
-  if (normalized === "archived") {
-    return { color: "default", label: "已下线" };
-  }
-  if (normalized === "draft") {
-    return { color: "gold", label: "草稿" };
-  }
+  if (normalized === "active") return { color: "green", label: "已发布" };
+  if (normalized === "archived") return { color: "default", label: "已下线" };
+  if (normalized === "draft") return { color: "gold", label: "草稿" };
   return { color: "blue", label: value || "未命名状态" };
 }
 
-function getErrorMessage(error: unknown, fallback: string) {
-  return error instanceof Error && error.message ? error.message : fallback;
-}
-
 function formatDisplayText(value: string | null | undefined, empty = "未填写") {
-  if (!value) {
-    return empty;
-  }
-  const trimmed = value.trim();
-  return trimmed ? trimmed : empty;
+  if (!value) return empty;
+  return value.trim() ? value.trim() : empty;
 }
 
 function getGovernanceCheckMeta(status: KnowledgeBaseGovernanceCheckStatus) {
-  if (status === "pass") {
-    return { color: "success", label: "通过" };
-  }
-  if (status === "warning") {
-    return { color: "warning", label: "注意" };
-  }
+  if (status === "pass") return { color: "success", label: "通过" };
+  if (status === "warning") return { color: "warning", label: "注意" };
   return { color: "error", label: "阻塞" };
 }
 
@@ -219,13 +171,8 @@ function isDocumentRetryable(document: KnowledgeBaseDocumentItem) {
 
 function getDocumentActionState(document: KnowledgeBaseDocumentItem) {
   if (isDocumentReadyForChat(document)) {
-    return {
-      readyForChat: true,
-      disabledReason: null,
-      retryable: false,
-    };
+    return { readyForChat: true, disabledReason: null, retryable: false };
   }
-
   if (isDocumentFailedLike(document)) {
     return {
       readyForChat: false,
@@ -233,7 +180,6 @@ function getDocumentActionState(document: KnowledgeBaseDocumentItem) {
       retryable: isDocumentRetryable(document),
     };
   }
-
   return {
     readyForChat: false,
     disabledReason: document.next_action || "当前文档尚未完成索引，暂时不能进入问答。",
@@ -261,16 +207,34 @@ function buildKnowledgeBaseChatHref(
       focusType: "knowledge_document",
     },
   };
-
   return `/chat?review=${encodeURIComponent(JSON.stringify(payload))}`;
 }
 
+function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+
+function getSourceTypeLabel(sourceType: string | null | undefined) {
+  if (!sourceType) return "未分类";
+  const typeMap: Record<string, string> = {
+    legal: "法律法规",
+    policy: "制度规范",
+    case: "判例",
+    guide: "业务指南",
+  };
+  return typeMap[sourceType] ?? sourceType;
+}
+
+const ALL_KEY = "__all__";
+
 export default function KnowledgeBasesPage() {
   const [messageApi, contextHolder] = message.useMessage();
   const currentUser = useAuthStore((state) => state.currentUser);
+
   const [createForm] = Form.useForm<KnowledgeBaseFormValues>();
   const [uploadForm] = Form.useForm<KnowledgeBaseFormValues>();
   const [rollbackForm] = Form.useForm<KnowledgeBaseRollbackFormValues>();
+
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [uploading, setUploading] = useState(false);
@@ -281,219 +245,22 @@ export default function KnowledgeBasesPage() {
   const [retryingDocumentId, setRetryingDocumentId] = useState<string | null>(null);
   const [listError, setListError] = useState<string | null>(null);
   const [documentsError, setDocumentsError] = useState<string | null>(null);
+
   const [items, setItems] = useState<KnowledgeBaseItem[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [documents, setDocuments] = useState<KnowledgeBaseDocumentItem[]>([]);
   const [versions, setVersions] = useState<KnowledgeBaseVersionItem[]>([]);
   const [versionsLoading, setVersionsLoading] = useState(false);
-  const [sourceTypeFilter, setSourceTypeFilter] = useState<string>("all");
-  const [regionFilter, setRegionFilter] = useState<string>("all");
   const [documentsLoading, setDocumentsLoading] = useState(false);
   const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>(ALL_KEY);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([ALL_KEY]);
+
   const rollbackTargetVersionLabel = Form.useWatch("target_version_label", rollbackForm);
-
-  const selectedKnowledgeBase = useMemo(
-    () => items.find((item) => item.id === selectedId) ?? null,
-    [items, selectedId],
-  );
-
-  const filteredDocuments = useMemo(() => {
-    return documents.filter((item) => {
-      const sourceTypeMatch = sourceTypeFilter === "all" || (item.source_type || "unknown") === sourceTypeFilter;
-      const regionMatch = regionFilter === "all" || (item.region || "unknown") === regionFilter;
-      return sourceTypeMatch && regionMatch;
-    });
-  }, [documents, regionFilter, sourceTypeFilter]);
-
-  const orderedDocuments = useMemo(() => {
-    return [...filteredDocuments].sort((left, right) => {
-      const leftPriority = isDocumentFailedLike(left) ? 0 : left.status === "processing" || left.status === "pending" ? 1 : 2;
-      const rightPriority = isDocumentFailedLike(right) ? 0 : right.status === "processing" || right.status === "pending" ? 1 : 2;
-      if (leftPriority !== rightPriority) {
-        return leftPriority - rightPriority;
-      }
-      return new Date(right.created_at).getTime() - new Date(left.created_at).getTime();
-    });
-  }, [filteredDocuments]);
-
-  const failedDocuments = useMemo(
-    () => orderedDocuments.filter((document) => isDocumentFailedLike(document)),
-    [orderedDocuments],
-  );
-
-  const sourceTypeOptions = useMemo(() => {
-    const values = Array.from(new Set(documents.map((item) => item.source_type || "unknown")));
-    return [{ value: "all", label: "全部来源类型" }, ...values.map((value) => ({ value, label: value }))];
-  }, [documents]);
-
-  const regionOptions = useMemo(() => {
-    const values = Array.from(new Set(documents.map((item) => item.region || "unknown")));
-    return [{ value: "all", label: "全部适用区域" }, ...values.map((value) => ({ value, label: value }))];
-  }, [documents]);
-
-  const selectedKnowledgeBaseStatus = getKnowledgeBaseStatusMeta(selectedKnowledgeBase?.status);
-  const rollbackVersionOptions = useMemo(
-    () =>
-      versions.map((item) => ({
-        value: item.version_label,
-        label: `${item.version_label} · ${item.status}`,
-      })),
-    [versions],
-  );
-
-  const rollbackTargetVersion = useMemo(
-    () => versions.find((item) => item.version_label === rollbackTargetVersionLabel) ?? null,
-    [rollbackTargetVersionLabel, versions],
-  );
-  const publishActionLabel = useMemo(() => {
-    if (!selectedKnowledgeBase) {
-      return "发布知识库";
-    }
-    return selectedKnowledgeBase.status?.toLowerCase() === "active" ? "发布新版本" : "发布知识库";
-  }, [selectedKnowledgeBase]);
-  const publishPreflightChecks = useMemo<KnowledgeBaseGovernanceCheckItem[]>(() => {
-    if (!selectedKnowledgeBase) {
-      return [];
-    }
-
-    const totalDocuments = selectedKnowledgeBase.document_count ?? 0;
-    const indexedDocuments = documents.filter((item) => isDocumentReadyForChat(item)).length;
-    const failedDocumentsCount = documents.filter((item) => isDocumentFailedLike(item)).length;
-    const inFlightDocuments = documents.filter((item) => item.status === "pending" || item.status === "processing").length;
-    const documentsMissingSourceMetadata = documents.filter(
-      (item) => !item.source_type || !item.authority || !item.effective_date || !item.region || !(item.tags?.length),
-    ).length;
-
-    const checks: KnowledgeBaseGovernanceCheckItem[] = [
-      {
-        key: "document-count",
-        label: "知识文档数量",
-        status: totalDocuments > 0 ? "pass" : "block",
-        detail: totalDocuments > 0 ? `当前已纳入 ${totalDocuments} 份知识文档。` : "当前知识库还没有文档，无法形成可发布知识集合。",
-      },
-      {
-        key: "source-metadata",
-        label: "法源元数据完整度",
-        status: documentsMissingSourceMetadata > 0 ? "warning" : "pass",
-        detail:
-          documentsMissingSourceMetadata > 0
-            ? `${documentsMissingSourceMetadata} 份文档缺少 source_type / authority / effective_date / region / tags 中的至少一项，建议补齐后再发版。`
-            : "文档的法源元数据已补齐，便于后续治理和追溯。",
-      },
-      {
-        key: "description",
-        label: "知识库说明",
-        status: selectedKnowledgeBase.description?.trim() ? "pass" : "warning",
-        detail: selectedKnowledgeBase.description?.trim()
-          ? "知识库说明已填写，便于团队理解本次发布范围。"
-          : "当前知识库说明为空，建议补一段适用范围说明。",
-      },
-      {
-        key: "versioning",
-        label: "版本快照",
-        status: "pass",
-        detail: versions.length > 0 ? `已有 ${versions.length} 个历史版本，本次会继续生成新的治理快照。` : "这是首次发布，系统会自动生成 v1 治理快照。",
-      },
-    ];
-
-    if (totalDocuments === 0) {
-      checks.splice(1, 0, {
-        key: "index-health",
-        label: "索引完成度",
-        status: "block",
-        detail: "没有可供检查的索引结果，请先上传并完成文档处理。",
-      });
-      return checks;
-    }
-
-    checks.splice(1, 0, {
-      key: "index-health",
-      label: "索引完成度",
-      status: failedDocumentsCount > 0 || inFlightDocuments > 0 || indexedDocuments !== totalDocuments ? "block" : "pass",
-      detail:
-        failedDocumentsCount > 0 || inFlightDocuments > 0 || indexedDocuments !== totalDocuments
-          ? `已索引 ${indexedDocuments}/${totalDocuments}，处理中 ${inFlightDocuments}，失败 ${failedDocumentsCount}。发布前需要全部文档处于可检索状态。`
-          : `全部 ${totalDocuments} 份文档均已完成索引，可参与正式检索。`,
-    });
-
-    return checks;
-  }, [documents, selectedKnowledgeBase, versions.length]);
-  const publishBlockerCount = useMemo(
-    () => publishPreflightChecks.filter((item) => item.status === "block").length,
-    [publishPreflightChecks],
-  );
-  const publishWarningCount = useMemo(
-    () => publishPreflightChecks.filter((item) => item.status === "warning").length,
-    [publishPreflightChecks],
-  );
-  const versionComparisonRows = useMemo<KnowledgeBaseVersionComparisonRow[]>(() => {
-    if (!selectedKnowledgeBase || !rollbackTargetVersion) {
-      return [];
-    }
-
-    return [
-      {
-        key: "version-label",
-        label: "版本标签",
-        current: formatDisplayText(selectedKnowledgeBase.current_version_label, "未发布"),
-        target: rollbackTargetVersion.version_label,
-        changed: selectedKnowledgeBase.current_version_label !== rollbackTargetVersion.version_label,
-      },
-      {
-        key: "status",
-        label: "生命周期状态",
-        current: selectedKnowledgeBaseStatus.label,
-        target: getKnowledgeBaseStatusMeta(rollbackTargetVersion.status).label,
-        changed: (selectedKnowledgeBase.status || "").toLowerCase() !== (rollbackTargetVersion.status || "").toLowerCase(),
-      },
-      {
-        key: "name",
-        label: "知识库名称",
-        current: formatDisplayText(selectedKnowledgeBase.name, "-"),
-        target: formatDisplayText(rollbackTargetVersion.name, "-"),
-        changed: selectedKnowledgeBase.name !== rollbackTargetVersion.name,
-      },
-      {
-        key: "description",
-        label: "知识库说明",
-        current: formatDisplayText(selectedKnowledgeBase.description),
-        target: formatDisplayText(rollbackTargetVersion.description),
-        changed: formatDisplayText(selectedKnowledgeBase.description) !== formatDisplayText(rollbackTargetVersion.description),
-      },
-      {
-        key: "retrieval-mode",
-        label: "检索模式",
-        current: getRetrievalModeMeta(selectedKnowledgeBase.retrieval_mode).label,
-        target: getRetrievalModeMeta(rollbackTargetVersion.retrieval_mode).label,
-        changed: (selectedKnowledgeBase.retrieval_mode || "").toLowerCase() !== (rollbackTargetVersion.retrieval_mode || "").toLowerCase(),
-      },
-      {
-        key: "published-by",
-        label: "发布人",
-        current: formatDisplayText(selectedKnowledgeBase.published_by, "未记录"),
-        target: formatDisplayText(rollbackTargetVersion.published_by, "未记录"),
-        changed: formatDisplayText(selectedKnowledgeBase.published_by, "未记录") !== formatDisplayText(rollbackTargetVersion.published_by, "未记录"),
-      },
-      {
-        key: "published-at",
-        label: "发布时间",
-        current: selectedKnowledgeBase.published_at ? formatDateTime(selectedKnowledgeBase.published_at) : "未发布",
-        target: rollbackTargetVersion.published_at ? formatDateTime(rollbackTargetVersion.published_at) : "未发布",
-        changed: (selectedKnowledgeBase.published_at || "") !== (rollbackTargetVersion.published_at || ""),
-      },
-      {
-        key: "change-summary",
-        label: "版本说明",
-        current: selectedKnowledgeBase.status?.toLowerCase() === "active" ? "当前线上版本" : "当前草稿状态",
-        target: formatDisplayText(rollbackTargetVersion.change_summary, "未填写"),
-        changed: true,
-      },
-    ];
-  }, [rollbackTargetVersion, selectedKnowledgeBase, selectedKnowledgeBaseStatus.label]);
-  const changedVersionComparisonCount = useMemo(
-    () => versionComparisonRows.filter((item) => item.changed).length,
-    [versionComparisonRows],
-  );
+  const selectedKnowledgeBase = useMemo(() => items.find((item) => item.id === selectedId) ?? null, [items, selectedId]);
 
   const loadKnowledgeBases = useCallback(async () => {
     if (currentUser?.role !== "admin") {
@@ -579,10 +346,7 @@ export default function KnowledgeBasesPage() {
   }, [messageApi, rollbackForm]);
 
   useEffect(() => {
-    const timer = window.setTimeout(() => {
-      void loadKnowledgeBases();
-    }, 0);
-
+    const timer = window.setTimeout(() => void loadKnowledgeBases(), 0);
     return () => window.clearTimeout(timer);
   }, [loadKnowledgeBases]);
 
@@ -594,37 +358,26 @@ export default function KnowledgeBasesPage() {
         setVersions([]);
         return;
       }
-
       void Promise.all([loadDocuments(selectedId), loadVersions(selectedId)]);
     }, 0);
-
     return () => window.clearTimeout(timer);
   }, [currentUser?.role, loadDocuments, loadVersions, selectedId]);
 
   useEffect(() => {
-    if (!selectedId || currentUser?.role !== "admin") {
-      return;
-    }
-
+    if (!selectedId || currentUser?.role !== "admin") return;
     const hasInFlightDocument = documents.some((item) => item.status === "pending" || item.status === "processing");
-    if (!hasInFlightDocument) {
-      return;
-    }
-
-    const timer = window.setTimeout(() => {
-      void loadDocuments(selectedId, true);
-    }, 3000);
-
+    if (!hasInFlightDocument) return;
+    const timer = window.setTimeout(() => void loadDocuments(selectedId, true), 3000);
     return () => window.clearTimeout(timer);
   }, [currentUser?.role, documents, loadDocuments, selectedId]);
 
   const handleRefreshDocuments = async () => {
-    if (!selectedId) {
-      return;
-    }
+    if (!selectedId) return;
     await loadDocuments(selectedId, true);
   };
 
+  const handleOpenUploadDrawer = () => setDrawerOpen(true);
+
   const handleCreate = async (values: KnowledgeBaseFormValues) => {
     setSubmitting(true);
     try {
@@ -652,7 +405,6 @@ export default function KnowledgeBasesPage() {
       messageApi.error("请先选择知识库");
       return;
     }
-
     const selectedFile = fileList[0]?.originFileObj;
     if (!selectedFile) {
       messageApi.error("请先选择文档");
@@ -693,10 +445,7 @@ export default function KnowledgeBasesPage() {
   };
 
   const handleRetryDocument = async (document: KnowledgeBaseDocumentItem) => {
-    if (!selectedId) {
-      return;
-    }
-
+    if (!selectedId) return;
     setRetryingDocumentId(document.id);
     try {
       const result = await retryKnowledgeBaseDocument(selectedId, document.id, undefined, "页面触发重试");
@@ -718,9 +467,7 @@ export default function KnowledgeBasesPage() {
   };
 
   const handlePublishKnowledgeBase = async () => {
-    if (!selectedId || !selectedKnowledgeBase) {
-      return;
-    }
+    if (!selectedId || !selectedKnowledgeBase) return;
     if (publishBlockerCount > 0) {
       messageApi.error(`发布前检查未通过，还有 ${publishBlockerCount} 个阻塞项需要先处理。`);
       return;
@@ -742,9 +489,7 @@ export default function KnowledgeBasesPage() {
   };
 
   const handleUnpublishKnowledgeBase = async () => {
-    if (!selectedId) {
-      return;
-    }
+    if (!selectedId) return;
     setUnpublishing(true);
     try {
       const result = await unpublishKnowledgeBase(selectedId);
@@ -762,9 +507,7 @@ export default function KnowledgeBasesPage() {
   };
 
   const handleRollbackKnowledgeBase = async () => {
-    if (!selectedId) {
-      return;
-    }
+    if (!selectedId) return;
     const values = await rollbackForm.validateFields();
     setRollingBack(true);
     try {
@@ -789,590 +532,510 @@ export default function KnowledgeBasesPage() {
     }
   };
 
+  const filteredItems = useMemo(() => {
+    let result = items;
+    if (selectedCategory !== ALL_KEY) {
+      result = result.filter((item) => {
+        if (selectedCategory === "active") return item.status?.toLowerCase() === "active";
+        if (selectedCategory === "draft") return item.status?.toLowerCase() === "draft";
+        if (selectedCategory === "archived") return item.status?.toLowerCase() === "archived";
+        if (selectedCategory.startsWith("retrieval:")) return item.retrieval_mode === selectedCategory.replace("retrieval:", "");
+        return true;
+      });
+    }
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (item) =>
+          item.name.toLowerCase().includes(q) ||
+          (item.description ?? "").toLowerCase().includes(q),
+      );
+    }
+    return result;
+  }, [items, selectedCategory, searchQuery]);
+
+  const treeData = useMemo((): DataNode[] => {
+    const activeCount = items.filter((item) => item.status?.toLowerCase() === "active").length;
+    const draftCount = items.filter((item) => item.status?.toLowerCase() === "draft").length;
+    const archivedCount = items.filter((item) => item.status?.toLowerCase() === "archived").length;
+
+    const retrievalModes = Array.from(new Set(items.map((item) => item.retrieval_mode).filter(Boolean)));
+    const retrievalChildren: DataNode[] = retrievalModes.map((mode) => {
+      const count = items.filter((item) => item.retrieval_mode === mode).length;
+      return {
+        key: `retrieval:${mode}`,
+        title: (
+          <Space>
+            <span>{getRetrievalModeMeta(mode).label}</span>
+            <Tag color={getRetrievalModeMeta(mode).color} style={{ margin: 0 }}>{count}</Tag>
+          </Space>
+        ),
+      };
+    });
+
+    return [
+      {
+        key: ALL_KEY,
+        title: (
+          <Space>
+            <span>全部知识库</span>
+            <Tag color="blue" style={{ margin: 0 }}>{items.length}</Tag>
+          </Space>
+        ),
+        children: [
+          { key: "group-status", title: <strong style={{ color: "#1677ff" }}>按状态</strong>, selectable: false, children: [
+            { key: "active", title: (
+              <Space><span>已发布</span><Tag color="green" style={{ margin: 0 }}>{activeCount}</Tag></Space>
+            )},
+            { key: "draft", title: (
+              <Space><span>草稿</span><Tag color="gold" style={{ margin: 0 }}>{draftCount}</Tag></Space>
+            )},
+            { key: "archived", title: (
+              <Space><span>已下线</span><Tag color="default" style={{ margin: 0 }}>{archivedCount}</Tag></Space>
+            )},
+          ]},
+          retrievalChildren.length > 0 ? { key: "group-retrieval", title: <strong style={{ color: "#1677ff" }}>按检索模式</strong>, selectable: false, children: retrievalChildren } : null,
+        ].filter(Boolean) as DataNode[],
+      },
+    ];
+  }, [items]);
+
+  const handleTreeSelect = (_selectedKeys: React.Key[], info: { node: DataNode }) => {
+    const key = info.node.key as string;
+    setSelectedCategory(key);
+  };
+
+  const selectedKnowledgeBaseStatus = getKnowledgeBaseStatusMeta(selectedKnowledgeBase?.status);
+  const rollbackVersionOptions = useMemo(
+    () => versions.map((item) => ({ value: item.version_label, label: `${item.version_label} · ${item.status}` })),
+    [versions],
+  );
+  const rollbackTargetVersion = useMemo(
+    () => versions.find((item) => item.version_label === rollbackTargetVersionLabel) ?? null,
+    [rollbackTargetVersionLabel, versions],
+  );
+  const publishActionLabel = useMemo(() => {
+    if (!selectedKnowledgeBase) return "发布知识库";
+    return selectedKnowledgeBase.status?.toLowerCase() === "active" ? "发布新版本" : "发布知识库";
+  }, [selectedKnowledgeBase]);
+
+  const publishPreflightChecks = useMemo<KnowledgeBaseGovernanceCheckItem[]>(() => {
+    if (!selectedKnowledgeBase) return [];
+    const totalDocuments = selectedKnowledgeBase.document_count ?? 0;
+    const indexedDocuments = documents.filter((item) => isDocumentReadyForChat(item)).length;
+    const failedDocumentsCount = documents.filter((item) => isDocumentFailedLike(item)).length;
+    const inFlightDocuments = documents.filter((item) => item.status === "pending" || item.status === "processing").length;
+    const documentsMissingSourceMetadata = documents.filter((item) => !item.source_type || !item.authority || !item.effective_date || !item.region || !(item.tags?.length)).length;
+
+    const checks: KnowledgeBaseGovernanceCheckItem[] = [
+      {
+        key: "document-count",
+        label: "知识文档数量",
+        status: totalDocuments > 0 ? "pass" : "block",
+        detail: totalDocuments > 0 ? `当前已纳入 ${totalDocuments} 份知识文档。` : "当前知识库还没有文档，无法形成可发布知识集合。",
+      },
+      {
+        key: "source-metadata",
+        label: "法源元数据完整度",
+        status: documentsMissingSourceMetadata > 0 ? "warning" : "pass",
+        detail: documentsMissingSourceMetadata > 0
+          ? `${documentsMissingSourceMetadata} 份文档缺少 source_type / authority / effective_date / region / tags 中的至少一项。`
+          : "文档的法源元数据已补齐。",
+      },
+      {
+        key: "description",
+        label: "知识库说明",
+        status: selectedKnowledgeBase.description?.trim() ? "pass" : "warning",
+        detail: selectedKnowledgeBase.description?.trim() ? "知识库说明已填写。" : "当前知识库说明为空。",
+      },
+      {
+        key: "versioning",
+        label: "版本快照",
+        status: "pass",
+        detail: versions.length > 0 ? `已有 ${versions.length} 个历史版本。` : "这是首次发布。",
+      },
+    ];
+
+    if (totalDocuments > 0) {
+      checks.splice(1, 0, {
+        key: "index-health",
+        label: "索引完成度",
+        status: failedDocumentsCount > 0 || inFlightDocuments > 0 || indexedDocuments !== totalDocuments ? "block" : "pass",
+        detail: failedDocumentsCount > 0 || inFlightDocuments > 0 || indexedDocuments !== totalDocuments
+          ? `已索引 ${indexedDocuments}/${totalDocuments}，处理中 ${inFlightDocuments}，失败 ${failedDocumentsCount}。`
+          : `全部 ${totalDocuments} 份文档均已完成索引。`,
+      });
+    } else {
+      checks.splice(1, 0, {
+        key: "index-health",
+        label: "索引完成度",
+        status: "block",
+        detail: "没有可供检查的索引结果，请先上传并完成文档处理。",
+      });
+    }
+
+    return checks;
+  }, [documents, selectedKnowledgeBase, versions.length]);
+
+  const publishBlockerCount = useMemo(() => publishPreflightChecks.filter((item) => item.status === "block").length, [publishPreflightChecks]);
+  const publishWarningCount = useMemo(() => publishPreflightChecks.filter((item) => item.status === "warning").length, [publishPreflightChecks]);
+  const failedDocuments = useMemo(() => documents.filter((item) => isDocumentFailedLike(item)), [documents]);
+
+  const versionComparisonRows = useMemo<KnowledgeBaseVersionComparisonRow[]>(() => {
+    if (!selectedKnowledgeBase || !rollbackTargetVersion) return [];
+    return [
+      { key: "version-label", label: "版本标签", current: formatDisplayText(selectedKnowledgeBase.current_version_label, "未发布"), target: rollbackTargetVersion.version_label, changed: selectedKnowledgeBase.current_version_label !== rollbackTargetVersion.version_label },
+      { key: "status", label: "生命周期状态", current: selectedKnowledgeBaseStatus.label, target: getKnowledgeBaseStatusMeta(rollbackTargetVersion.status).label, changed: (selectedKnowledgeBase.status || "").toLowerCase() !== (rollbackTargetVersion.status || "").toLowerCase() },
+      { key: "name", label: "知识库名称", current: formatDisplayText(selectedKnowledgeBase.name, "-"), target: formatDisplayText(rollbackTargetVersion.name, "-"), changed: selectedKnowledgeBase.name !== rollbackTargetVersion.name },
+      { key: "description", label: "知识库说明", current: formatDisplayText(selectedKnowledgeBase.description), target: formatDisplayText(rollbackTargetVersion.description), changed: formatDisplayText(selectedKnowledgeBase.description) !== formatDisplayText(rollbackTargetVersion.description) },
+      { key: "retrieval-mode", label: "检索模式", current: getRetrievalModeMeta(selectedKnowledgeBase.retrieval_mode).label, target: getRetrievalModeMeta(rollbackTargetVersion.retrieval_mode).label, changed: (selectedKnowledgeBase.retrieval_mode || "").toLowerCase() !== (rollbackTargetVersion.retrieval_mode || "").toLowerCase() },
+      { key: "published-by", label: "发布人", current: formatDisplayText(selectedKnowledgeBase.published_by, "未记录"), target: formatDisplayText(rollbackTargetVersion.published_by, "未记录"), changed: formatDisplayText(selectedKnowledgeBase.published_by, "未记录") !== formatDisplayText(rollbackTargetVersion.published_by, "未记录") },
+      { key: "published-at", label: "发布时间", current: selectedKnowledgeBase.published_at ? formatDateTime(selectedKnowledgeBase.published_at) : "未发布", target: rollbackTargetVersion.published_at ? formatDateTime(rollbackTargetVersion.published_at) : "未发布", changed: (selectedKnowledgeBase.published_at || "") !== (rollbackTargetVersion.published_at || "") },
+    ];
+  }, [rollbackTargetVersion, selectedKnowledgeBase, selectedKnowledgeBaseStatus.label]);
+
+  const changedVersionComparisonCount = useMemo(() => versionComparisonRows.filter((item) => item.changed).length, [versionComparisonRows]);
+
   if (currentUser?.role !== "admin") {
     return (
-      <main className="page-shell review-history-page">
+      <main className="page-shell knowledge-bases-page">
         {contextHolder}
-        <Card className="review-list-card">
-          <Alert title="仅管理员可管理知识库。" type="warning" showIcon />
-        </Card>
+        <div style={{ padding: 48, textAlign: "center" }}>
+          <Text type="secondary">仅管理员可管理知识库。</Text>
+        </div>
       </main>
     );
   }
 
   return (
-    <main className="page-shell review-page-grid">
+    <main className="page-shell knowledge-bases-page">
       {contextHolder}
-      <Space orientation="vertical" size="large" style={{ width: "100%" }}>
-        <section className="review-page-hero">
-          <div className="review-page-hero-copy">
-            <span className="landing-badge">Knowledge Base</span>
-            <Title level={2}>管理知识库、文档与索引状态。</Title>
-            <Text type="secondary">左侧选择知识库，右侧上传和追踪文档处理结果，失败原因直接暴露。</Text>
+      <div className="doc-layout-shell">
+        {/* 左侧树形菜单 */}
+        <aside className="doc-sidebar">
+          <Input
+            allowClear
+            prefix={<SearchOutlined />}
+            placeholder="搜索知识库"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="doc-sidebar-search"
+          />
+          <div className="doc-sidebar-tree">
+            <Tree
+              showIcon={false}
+              switcherIcon={({ expanded }) => (expanded ? <CaretDownOutlined /> : <CaretRightOutlined />)}
+              treeData={treeData}
+              expandedKeys={expandedKeys}
+              selectedKeys={[selectedCategory]}
+              onExpand={setExpandedKeys}
+              onSelect={(_keys, info) => handleTreeSelect(_keys, info)}
+              blockNode
+            />
           </div>
-          <Card className="review-side-card" variant="borderless">
-            <span className="landing-panel-eyebrow">Admin Workspace</span>
-            <Title level={4} style={{ margin: 0, color: "inherit" }}>
-              管理节奏
-            </Title>
-            <ul className="review-page-tip-list">
-              <li>先创建知识库，再上传文档。</li>
-              <li>处理失败时优先看生命周期说明。</li>
-              <li>索引完成后可进入问答继续使用。</li>
-            </ul>
+          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
+            <Button block icon={<PlusOutlined />} onClick={() => {
+              Modal.confirm({
+                title: "新建知识库",
+                content: (
+                  <Form form={createForm} layout="vertical">
+                    <Form.Item label="知识库名称" name="name" rules={[{ required: true, message: "请输入知识库名称" }]}>
+                      <Input placeholder="例如：劳动合同知识库" />
+                    </Form.Item>
+                    <Form.Item label="说明" name="description">
+                      <Input.TextArea rows={3} placeholder="可填写适用场景、制度范围" />
+                    </Form.Item>
+                  </Form>
+                ),
+                onOk: async () => {
+                  const values = await createForm.validateFields();
+                  await handleCreate(values as KnowledgeBaseFormValues);
+                },
+              });
+            }} loading={submitting}>
+              新建知识库
+            </Button>
+          </div>
+        </aside>
 
-            <Alert showIcon type="info" title="权限边界：member 使用审查、Chat、合同生成；admin 额外负责知识库治理。" />
-          </Card>
-        </section>
-
-        <div className="chat-layout-grid chat-layout-grid-history">
-          <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-            <Card className="review-surface-card" title="新建知识库">
-              <Form form={createForm} layout="vertical" onFinish={handleCreate}>
-                <Form.Item label="知识库名称" name="name" rules={[{ required: true, message: "请输入知识库名称" }]}>
-                  <Input placeholder="例如：劳动合同知识库" />
-                </Form.Item>
-                <Form.Item label="说明" name="description">
-                  <Input.TextArea rows={4} placeholder="可填写适用场景、制度范围或条款类型" />
-                </Form.Item>
-                <Button block type="primary" htmlType="button" loading={submitting} onClick={() => void createForm.submit()}>
-                  创建知识库
-                </Button>
-              </Form>
-            </Card>
-
-            <Card className="review-surface-card" title="知识库列表">
-              {listError ? (
-                <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-                  <Alert
-                    showIcon
-                    type="error"
-                    title="知识库列表加载失败"
-                    description={listError}
-                  />
-                  <Button icon={<ReloadOutlined />} onClick={() => void loadKnowledgeBases()}>
-                    重新加载知识库列表
+        {/* 右侧内容区 */}
+        <section className="doc-main-content">
+          {selectedKnowledgeBase ? (
+            <>
+              {/* 知识库信息头 */}
+              <div className="doc-content-header">
+                <div>
+                  <Title level={2} style={{ margin: 0 }}>{selectedKnowledgeBase.name}</Title>
+                  <Space wrap style={{ marginTop: 4 }}>
+                    <Tag color={selectedKnowledgeBaseStatus.color}>{selectedKnowledgeBaseStatus.label}</Tag>
+                    <Tag color={getRetrievalModeMeta(selectedKnowledgeBase.retrieval_mode).color}>
+                      {getRetrievalModeMeta(selectedKnowledgeBase.retrieval_mode).label}
+                    </Tag>
+                    {selectedKnowledgeBase.current_version_label && <Tag>v{selectedKnowledgeBase.current_version_label}</Tag>}
+                    <Text type="secondary">{selectedKnowledgeBase.description || "暂无说明"}</Text>
+                  </Space>
+                </div>
+                <Space wrap style={{ marginTop: 8 }}>
+                  <Button type="primary" loading={publishing} disabled={publishBlockerCount > 0} onClick={() => void handlePublishKnowledgeBase()}>
+                    {publishActionLabel}
+                  </Button>
+                  <Button loading={unpublishing} disabled={selectedKnowledgeBase.status?.toLowerCase() !== "active"} onClick={() => void handleUnpublishKnowledgeBase()}>
+                    下线
+                  </Button>
+                  <Button icon={<ReloadOutlined />} loading={refreshingDocuments} onClick={() => void handleRefreshDocuments()}>
+                    刷新
                   </Button>
                 </Space>
-              ) : (
-                <SimpleList
-                  loading={loading}
-                  locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="还没有知识库。" /> }}
-                  dataSource={items}
-                  renderItem={(item) => (
-                    <SimpleListItem>
-                      <button
-                        className={item.id === selectedId ? "chat-history-item chat-history-item-active" : "chat-history-item"}
-                        onClick={() => setSelectedId(item.id)}
-                        type="button"
-                      >
-                        <Space wrap size={[8, 8]}>
-                          <strong>{item.name}</strong>
-                          <Tag color={getRetrievalModeMeta(item.retrieval_mode).color}>{getRetrievalModeMeta(item.retrieval_mode).label}</Tag>
-                        </Space>
-                        <span>{item.description || "暂无说明"}</span>
-                        <span>{item.document_count} 份文档</span>
-                        <span className="chat-history-time">{formatDateTime(item.updated_at)}</span>
-                      </button>
-                    </SimpleListItem>
-                  )}
-                />
-              )}
-            </Card>
-          </Space>
+              </div>
 
-          <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-            <Card className="review-surface-card" title="发布治理">
-              <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-                {selectedKnowledgeBase ? (
-                  <>
-                    <Space wrap size={[8, 8]}>
-                      <Tag color={selectedKnowledgeBaseStatus.color}>{selectedKnowledgeBaseStatus.label}</Tag>
-                      <Tag color={getRetrievalModeMeta(selectedKnowledgeBase.retrieval_mode).color}>
-                        {getRetrievalModeMeta(selectedKnowledgeBase.retrieval_mode).label}
-                      </Tag>
-                      {selectedKnowledgeBase.current_version_label ? <Tag>当前版本 {selectedKnowledgeBase.current_version_label}</Tag> : null}
-                    </Space>
-                    <Text>{selectedKnowledgeBase.description || "当前知识库暂无说明。"}</Text>
-                    <Space orientation="vertical" size={4}>
-                      <Text type="secondary">发布人：{selectedKnowledgeBase.published_by || "-"}</Text>
-                      <Text type="secondary">发布时间：{selectedKnowledgeBase.published_at ? formatDateTime(selectedKnowledgeBase.published_at) : "-"}</Text>
-                    </Space>
-                    <Alert
-                      showIcon
-                      type={publishBlockerCount > 0 ? "error" : publishWarningCount > 0 ? "warning" : "success"}
-                      title={`${publishActionLabel}前检查：通过 ${publishPreflightChecks.filter((item) => item.status === "pass").length} 项，注意 ${publishWarningCount} 项，阻塞 ${publishBlockerCount} 项`}
-                      description="这一步先把当前知识库的文档、索引与法源元数据过一遍，避免带着未完成状态直接进生产可用版本。"
-                    />
-                    <SimpleList
-                      size="small"
-                      bordered
-                      dataSource={publishPreflightChecks}
-                      renderItem={(item) => {
-                        const meta = getGovernanceCheckMeta(item.status);
-                        return (
-                          <SimpleListItem>
-                            <Space orientation="vertical" size={2} style={{ width: "100%" }}>
-                              <Space wrap size={[8, 8]}>
-                                <Text strong>{item.label}</Text>
-                                <Tag color={meta.color}>{meta.label}</Tag>
-                              </Space>
-                              <Text type="secondary">{item.detail}</Text>
+              {/* 发布检查 */}
+              {publishPreflightChecks.length > 0 && (
+                <div style={{ marginBottom: 16 }}>
+                  <Text strong>发布前检查</Text>
+                  <List
+                    dataSource={publishPreflightChecks}
+                    size="small"
+                    renderItem={(item) => {
+                      const meta = getGovernanceCheckMeta(item.status);
+                      return (
+                        <List.Item>
+                          <Space>
+                            <Tag color={meta.color}>{meta.label}</Tag>
+                            <Text strong>{item.label}</Text>
+                            <Text type="secondary">{item.detail}</Text>
+                          </Space>
+                        </List.Item>
+                      );
+                    }}
+                  />
+                </div>
+              )}
+
+              {/* 文档列表 */}
+              <div style={{ marginBottom: 16 }}>
+                <Text strong>知识文档（{documents.length} 份）</Text>
+                {documentsLoading ? (
+                  <div style={{ textAlign: "center", padding: 24 }}><Spin /></div>
+                ) : documents.length > 0 ? (
+                  <List
+                    dataSource={documents}
+                    renderItem={(document) => (
+                      <List.Item className="doc-list-item" style={{ flexDirection: "column", alignItems: "stretch" }}>
+                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <Space wrap size={[6, 4]}>
+                              <span className="doc-item-name">{document.file_name}</span>
+                              {renderStatusTag(document.status, DOCUMENT_STATUS_META)}
+                              {formatLifecycleBadge(document.parse_status)}
+                              {formatLifecycleBadge(document.index_status)}
                             </Space>
-                          </SimpleListItem>
-                        );
-                      }}
-                    />
-                    <Space wrap>
-                      <Button type="primary" loading={publishing} disabled={publishBlockerCount > 0} onClick={() => void handlePublishKnowledgeBase()}>
-                        发布知识库
-                      </Button>
-                      <Button loading={unpublishing} disabled={selectedKnowledgeBase.status?.toLowerCase() !== "active"} onClick={() => void handleUnpublishKnowledgeBase()}>
-                        下线知识库
-                      </Button>
-                    </Space>
-                    <Form form={rollbackForm} layout="vertical">
-                      <Form.Item label="回滚到版本" name="target_version_label" rules={[{ required: true, message: "请选择目标版本" }]}>
-                        <Select
-                          placeholder="选择历史版本"
-                          loading={versionsLoading}
-                          options={rollbackVersionOptions.filter((item) => item.value !== selectedKnowledgeBase.current_version_label)}
-                          disabled={!rollbackVersionOptions.length}
-                        />
-                      </Form.Item>
-                      <Form.Item label="回滚说明" name="change_summary">
-                        <Input placeholder="例如：恢复到稳定知识库版本" />
-                      </Form.Item>
-                    </Form>
-                    <Divider style={{ margin: "8px 0" }}>版本对比与回滚确认</Divider>
-                    {rollbackTargetVersion ? (
-                      <SimpleList
-                        size="small"
-                        bordered
-                        header={`当前版本与 ${rollbackTargetVersion.version_label} 的差异`}
-                        dataSource={versionComparisonRows}
-                        renderItem={(item) => (
-                          <SimpleListItem>
-                            <Space orientation="vertical" size={2} style={{ width: "100%" }}>
-                              <Space wrap size={[8, 8]}>
-                                <Text strong>{item.label}</Text>
-                                <Tag color={item.changed ? "gold" : "default"}>{item.changed ? "有差异" : "一致"}</Tag>
+                            <div style={{ marginTop: 4 }}>
+                              <Space wrap size={[4, 4]}>
+                                <Text>{document.source_type || getSourceTypeLabel(document.source_type)}</Text>
+                                {document.authority && <Text type="secondary">{document.authority}</Text>}
+                                {document.region && <Text type="secondary">{document.region}</Text>}
                               </Space>
-                              <Text type="secondary">当前：{item.current}</Text>
-                              <Text type="secondary">目标：{item.target}</Text>
-                            </Space>
-                          </SimpleListItem>
-                        )}
-                      />
-                    ) : (
-                      <Alert showIcon type="info" title="选择一个历史版本后，这里会展示与当前知识库的关键差异。" />
+                            </div>
+                            {document.content_excerpt ? (
+                              <Paragraph type="secondary" ellipsis={{ rows: 1 }} style={{ margin: "4px 0 0" }}>
+                                {document.content_excerpt}（{document.extracted_text_length} 字）
+                              </Paragraph>
+                            ) : document.failure_reason ? (
+                              <Text type="danger" style={{ fontSize: 12 }}>{document.failure_reason}</Text>
+                            ) : null}
+                            {document.tags?.length > 0 && (
+                              <Space wrap size={[4, 4]} style={{ marginTop: 4 }}>
+                                {document.tags.slice(0, 5).map((tag) => <Tag key={tag} style={{ fontSize: 11 }}>{tag}</Tag>)}
+                              </Space>
+                            )}
+                          </div>
+                          <Space style={{ marginLeft: 16, flexShrink: 0 }}>
+                            {isDocumentRetryable(document) && (
+                              <Button size="small" danger loading={retryingDocumentId === document.id} onClick={() => void handleRetryDocument(document)}>
+                                重试
+                              </Button>
+                            )}
+                          </Space>
+                        </div>
+                      </List.Item>
                     )}
+                  />
+                ) : (
+                  <Empty description="当前知识库还没有文档" image={Empty.PRESENTED_IMAGE_SIMPLE}>
+                    <Button icon={<InboxOutlined />} onClick={() => handleOpenUploadDrawer()}>
+                      上传文档
+                    </Button>
+                  </Empty>
+                )}
+              </div>
+
+              {/* 失败文档恢复 */}
+              {failedDocuments.length > 0 && (
+                <div style={{ marginBottom: 16 }}>
+                  <Text strong style={{ color: "#d64545" }}>异常文档恢复（{failedDocuments.length} 份）</Text>
+                  <List
+                    dataSource={failedDocuments}
+                    size="small"
+                    renderItem={(document) => (
+                      <List.Item>
+                        <Space direction="vertical" size={4} style={{ width: "100%" }}>
+                          <Space wrap size={[6, 4]}>
+                            <Text strong>{document.file_name}</Text>
+                            <Tag color="red">失败</Tag>
+                          </Space>
+                          <Text type="danger" style={{ fontSize: 12 }}>{document.error_message || document.failure_reason}</Text>
+                          <Button size="small" danger loading={retryingDocumentId === document.id} onClick={() => void handleRetryDocument(document)}>
+                            重试处理
+                          </Button>
+                        </Space>
+                      </List.Item>
+                    )}
+                  />
+                </div>
+              )}
+
+              {/* 版本历史 */}
+              {versions.length > 0 && (
+                <div>
+                  <Text strong>版本历史</Text>
+                  <List
+                    dataSource={versions}
+                    size="small"
+                    renderItem={(item) => (
+                      <List.Item>
+                        <Space direction="vertical" size={2}>
+                          <Space>
+                            <Text strong>{item.version_label}</Text>
+                            <Tag color={getKnowledgeBaseStatusMeta(item.status).color}>{getKnowledgeBaseStatusMeta(item.status).label}</Tag>
+                          </Space>
+                          <Text type="secondary">{item.change_summary || "无变更说明"}</Text>
+                          <Text type="secondary" style={{ fontSize: 12 }}>
+                            {item.published_at ? formatDateTime(item.published_at) : formatDateTime(item.created_at)} · {item.published_by || "-"}
+                          </Text>
+                        </Space>
+                      </List.Item>
+                    )}
+                  />
+                </div>
+              )}
+
+              {/* 回滚 */}
+              {versions.length > 1 && (
+                <div style={{ marginTop: 16 }}>
+                  <Form form={rollbackForm} layout="vertical">
+                    <Form.Item label="回滚到版本" name="target_version_label" rules={[{ required: true }]}>
+                      <Select
+                        placeholder="选择历史版本"
+                        loading={versionsLoading}
+                        options={rollbackVersionOptions.filter((item) => item.value !== selectedKnowledgeBase.current_version_label)}
+                      />
+                    </Form.Item>
+                    <Form.Item label="回滚说明" name="change_summary">
+                      <Input placeholder="例如：恢复到稳定版本" />
+                    </Form.Item>
                     <Button
                       loading={rollingBack}
-                      disabled={!rollbackVersionOptions.length || !rollbackTargetVersion || rollbackTargetVersion.version_label === selectedKnowledgeBase?.current_version_label}
+                      disabled={!rollbackVersionOptions.length}
                       onClick={() => {
+                        if (!rollbackTargetVersion) return;
                         Modal.confirm({
-                          title: rollbackTargetVersion ? `确认回滚到 ${rollbackTargetVersion.version_label} 吗？` : "确认回滚知识库吗？",
+                          title: `确认回滚到 ${rollbackTargetVersion.version_label} 吗？`,
                           okText: "确认回滚",
                           cancelText: "取消",
                           okButtonProps: { danger: true },
-                          content: rollbackTargetVersion ? (
-                            <Space orientation="vertical" size="small" style={{ width: "100%" }}>
-                              <Text>
-                                当前版本：{formatDisplayText(selectedKnowledgeBase?.current_version_label, "未发布")}，目标版本：{rollbackTargetVersion.version_label}。
-                              </Text>
-                              <Text type="secondary">
-                                本次共检测到 {changedVersionComparisonCount} 项差异，回滚后系统会生成新的治理快照，而不是直接覆盖历史版本。
-                              </Text>
-                              <Alert
-                                showIcon
-                                type="warning"
-                                title={
-                                  rollbackTargetVersion.change_summary
-                                    ? `目标版本说明：${rollbackTargetVersion.change_summary}`
-                                    : "目标版本未填写版本说明，请结合历史记录确认。"
-                                }
-                              />
-                            </Space>
-                          ) : undefined,
+                          content: (
+                            <Text>
+                              当前版本 {selectedKnowledgeBase.current_version_label} → 目标版本 {rollbackTargetVersion.version_label}。
+                              回滚后系统会生成新的治理快照。
+                            </Text>
+                          ),
                           onOk: async () => handleRollbackKnowledgeBase(),
                         });
                       }}
                     >
                       回滚知识库
                     </Button>
-                    <SimpleList
-                      header="版本历史"
-                      loading={versionsLoading}
-                      locale={{ emptyText: "当前知识库还没有发布历史。" }}
-                      dataSource={versions}
-                      renderItem={(item) => (
-                        <SimpleListItem>
-                          <Space orientation="vertical" size={2} style={{ width: "100%" }}>
-                            <Space wrap size={[8, 8]}>
-                              <Text strong>{item.version_label}</Text>
-                              <Tag color={getKnowledgeBaseStatusMeta(item.status).color}>{getKnowledgeBaseStatusMeta(item.status).label}</Tag>
-                            </Space>
-                            <Text type="secondary">{item.change_summary || "无变更说明"}</Text>
-                            <Text type="secondary">
-                              {item.published_at ? formatDateTime(item.published_at) : formatDateTime(item.created_at)}
-                              {" · "}
-                              {item.published_by || "-"}
-                            </Text>
-                          </Space>
-                        </SimpleListItem>
-                      )}
-                    />
-                  </>
-                ) : (
-                  <Alert showIcon type="info" title="请先从左侧选择知识库，再进行发布、下线或回滚。" />
-                )}
-              </Space>
-            </Card>
-
-            <Card className="review-surface-card" title="上传文档">
-              <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-                <Alert showIcon type="info" title={selectedKnowledgeBase ? `当前知识库：${selectedKnowledgeBase.name}` : "请先从左侧选择知识库"} />
-                <Dragger
-                  beforeUpload={() => false}
-                  fileList={fileList}
-                  maxCount={1}
-                  multiple={false}
-                  accept=".txt,.md,.csv,.json,.docx,.pdf"
-                  onChange={({ fileList: nextFileList }) => setFileList(nextFileList)}
-                >
-                  <p className="ant-upload-drag-icon">
-                    <InboxOutlined />
-                  </p>
-                  <p>点击或拖拽上传知识文档</p>
-                  <p className="upload-hint">支持 txt、md、csv、json、docx、pdf，上传后展示提取摘要和索引状态。</p>
-                </Dragger>
-                <Form form={uploadForm} layout="vertical">
-                  <Form.Item label="上传备注" name="note">
-                    <Input placeholder="例如：2026 版采购制度" />
-                  </Form.Item>
-                  <Form.Item label="法源类型" name="source_type">
-                    <Input placeholder="例如：法律 / 司法解释 / 制度 / policy" />
-                  </Form.Item>
-                  <Form.Item label="发文机关" name="authority">
-                    <Input placeholder="例如：全国人民代表大会 / 企业法务部" />
-                  </Form.Item>
-                  <Form.Item label="生效日期" name="effective_date">
-                    <Input placeholder="例如：2021-01-01" />
-                  </Form.Item>
-                  <Form.Item label="适用区域" name="region">
-                    <Input placeholder="例如：CN / CN-SH" />
-                  </Form.Item>
-                  <Form.Item label="标签" name="tags">
-                    <Input placeholder="用逗号或分号分隔，例如：民法典, 合同, 劳动用工" />
-                  </Form.Item>
-                </Form>
-                <Button type="primary" onClick={() => void handleUpload()} loading={uploading} disabled={!selectedId}>
-                  上传到当前知识库
-                </Button>
-              </Space>
-            </Card>
-
-            <Card className="review-surface-card" title="异常文档恢复">
-              {failedDocuments.length ? (
-                <SimpleList
-                  dataSource={failedDocuments}
-                  renderItem={(document) => {
-                    const actionState = getDocumentActionState(document);
-                    return (
-                      <SimpleListItem className="kb-recovery-item">
-                        <Space orientation="vertical" size={8} style={{ width: "100%" }}>
-                          <Space wrap size={[8, 8]}>
-                            <Text strong>{document.file_name}</Text>
-                            <Tag color="red">失败文档</Tag>
-                            {formatLifecycleBadge(document.parse_status)}
-                            {formatLifecycleBadge(document.index_status)}
-                          </Space>
-                          <Text type="danger">{document.error_message || document.failure_reason || "文档处理失败"}</Text>
-                          <Text type="secondary">{document.status_detail || "请检查文件内容或格式后重试。"}</Text>
-                          {document.next_action ? <Text>下一步：{document.next_action}</Text> : null}
-                          <Space wrap size={[8, 8]}>
-                            <Link
-                              aria-disabled
-                              className="landing-primary-action disabled-link"
-                              href="#"
-                              onClick={(event) => {
-                                event.preventDefault();
-                                messageApi.warning(actionState.disabledReason || "当前文档尚未完成索引，暂时不能进入问答。");
-                              }}
-                            >
-                              审查要点
-                            </Link>
-                            <Link
-                              aria-disabled
-                              className="landing-secondary-action disabled-link"
-                              href="#"
-                              onClick={(event) => {
-                                event.preventDefault();
-                                messageApi.warning(actionState.disabledReason || "当前文档尚未完成索引，暂时不能进入问答。");
-                              }}
-                            >
-                              继续问答
-                            </Link>
-                            <Button size="small" danger loading={retryingDocumentId === document.id} onClick={() => void handleRetryDocument(document)}>
-                              重试处理
-                            </Button>
-                          </Space>
-                        </Space>
-                      </SimpleListItem>
-                    );
-                  }}
-                />
-              ) : (
-                <Alert showIcon type="success" title="当前知识库没有失败文档，异常恢复区为空。" />
+                  </Form>
+                </div>
               )}
-            </Card>
+            </>
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请先创建知识库或从列表中选择">
+              <Button type="primary" onClick={() => {
+                Modal.confirm({
+                  title: "新建知识库",
+                  content: (
+                    <Form form={createForm} layout="vertical">
+                      <Form.Item label="知识库名称" name="name" rules={[{ required: true }]}>
+                        <Input placeholder="例如：劳动合同知识库" />
+                      </Form.Item>
+                      <Form.Item label="说明" name="description">
+                        <Input.TextArea rows={3} placeholder="可填写适用场景、制度范围" />
+                      </Form.Item>
+                    </Form>
+                  ),
+                  onOk: async () => {
+                    const values = await createForm.validateFields();
+                    await handleCreate(values as KnowledgeBaseFormValues);
+                  },
+                });
+              }}>
+                新建知识库
+              </Button>
+            </Empty>
+          )}
+        </section>
+      </div>
 
-            <Card
-              className="review-surface-card"
-              title="文档索引状态"
-              extra={
-                <Space wrap>
-                  <Select
-                    value={sourceTypeFilter}
-                    style={{ width: 160 }}
-                    options={sourceTypeOptions}
-                    onChange={setSourceTypeFilter}
-                  />
-                  <Select
-                    value={regionFilter}
-                    style={{ width: 160 }}
-                    options={regionOptions}
-                    onChange={setRegionFilter}
-                  />
-                  <Button icon={<ReloadOutlined />} loading={refreshingDocuments} onClick={() => void handleRefreshDocuments()} disabled={!selectedId}>
-                    刷新状态
-                  </Button>
-                </Space>
-              }
-            >
-              {documentsError ? (
-                <Alert
-                  style={{ marginBottom: 16 }}
-                  showIcon
-                  type="error"
-                  title="知识库文档加载失败"
-                  description={documentsError}
-                  action={
-                    <Button size="small" icon={<ReloadOutlined />} onClick={() => void handleRefreshDocuments()} disabled={!selectedId}>
-                      重试
-                    </Button>
-                  }
-                />
-              ) : null}
-              <Table
-                rowKey="id"
-                dataSource={orderedDocuments}
-                loading={documentsLoading}
-                pagination={false}
-                locale={{
-                  emptyText: documentsError
-                    ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="文档列表加载失败，请先重试。" />
-                    : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前知识库还没有文档。" />,
-                }}
-                columns={[
-                  {
-                    title: "文件名",
-                    dataIndex: "file_name",
-                    key: "file_name",
-                  },
-                  {
-                    title: "状态 / 阶段",
-                    dataIndex: "status",
-                    key: "status",
-                    width: 180,
-                    render: (_value: string, record: KnowledgeBaseDocumentItem) => {
-                      const meta = getDocumentStatusMeta(record.status);
-                      return (
-                        <Space orientation="vertical" size={4}>
-                          <Tag color={meta.color}>{meta.label}</Tag>
-                          <Text type={getStageTone(record) === "danger" ? "danger" : getStageTone(record) === "warning" ? "warning" : "secondary"}>
-                            {getStageLabel(record)}
-                          </Text>
-                        </Space>
-                      );
-                    },
-                  },
-                  {
-                    title: "大小",
-                    dataIndex: "file_size",
-                    key: "file_size",
-                    width: 120,
-                    render: (value: number) => `${value} B`,
-                  },
-                  {
-                    title: "法源元数据",
-                    key: "source_meta",
-                    width: 260,
-                    render: (_value: unknown, record: KnowledgeBaseDocumentItem) => (
-                      <Space orientation="vertical" size={4}>
-                        <Text>{record.source_type || "-"}</Text>
-                        <Text type="secondary">{record.authority || "-"}</Text>
-                        <Text type="secondary">{record.effective_date || "-"}</Text>
-                        <Text type="secondary">{record.region || "-"}</Text>
-                        {record.tags?.length ? (
-                          <Space wrap size={[4, 4]}>
-                            {record.tags.map((tag) => (
-                              <Tag key={tag}>{tag}</Tag>
-                            ))}
-                          </Space>
-                        ) : null}
-                      </Space>
-                    ),
-                  },
-                  {
-                    title: "摘要 / 生命周期说明",
-                    dataIndex: "content_excerpt",
-                    key: "content_excerpt",
-                    render: (value: string | null, record: KnowledgeBaseDocumentItem) => {
-                      if (record.status === "failed") {
-                        return (
-                          <div>
-                            <Text type="danger">{record.error_message || "文档处理失败"}</Text>
-                            <div>
-                              <Text type="secondary" style={{ fontSize: 12 }}>{record.status_detail || "请检查文件内容或格式后重试。"}</Text>
-                            </div>
-                            {record.next_action ? (
-                              <div>
-                                <Text style={{ fontSize: 12 }}>下一步：{record.next_action}</Text>
-                              </div>
-                            ) : null}
-                          </div>
-                        );
-                      }
-
-                      if (!value) {
-                        return (
-                          <div>
-                            <Text type={record.failure_reason ? "danger" : "secondary"}>
-                              {record.status_detail || (record.status === "pending" || record.status === "processing" ? "等待处理结果" : "-")}
-                            </Text>
-                            {record.next_action ? (
-                              <div>
-                                <Text style={{ fontSize: 12 }}>下一步：{record.next_action}</Text>
-                              </div>
-                            ) : null}
-                          </div>
-                        );
-                      }
-
-                      return (
-                        <div>
-                          <div>{value}</div>
-                          <Text type="secondary" style={{ fontSize: 12 }}>
-                            提取文本 {record.extracted_text_length} 字{record.preview_truncated ? " · 已截断预览" : ""}
-                          </Text>
-                          <div>
-                            <Text type="secondary" style={{ fontSize: 12 }}>{record.status_detail || "-"}</Text>
-                          </div>
-                          {record.next_action ? (
-                            <div>
-                              <Text style={{ fontSize: 12 }}>下一步：{record.next_action}</Text>
-                            </div>
-                          ) : null}
-                        </div>
-                      );
-                    },
-                  },
-                  {
-                    title: "处理阶段",
-                    key: "lifecycle",
-                    width: 180,
-                    render: (_value: unknown, record: KnowledgeBaseDocumentItem) => (
-                      <Space orientation="vertical" size={4}>
-                        <div>
-                          <Text type="secondary">解析：</Text>
-                          {formatLifecycleBadge(record.parse_status)}
-                        </div>
-                        <div>
-                          <Text type="secondary">索引：</Text>
-                          {formatLifecycleBadge(record.index_status)}
-                        </div>
-                        {record.failure_reason ? <Text type="danger">失败原因：{record.failure_reason}</Text> : null}
-                      </Space>
-                    ),
-                  },
-                  {
-                    title: "上传时间",
-                    dataIndex: "created_at",
-                    key: "created_at",
-                    width: 180,
-                    render: (value: string) => formatDateTime(value),
-                  },
-                  {
-                    title: "继续问答",
-                    key: "chat_actions",
-                    width: 220,
-                    render: (_value: unknown, record: KnowledgeBaseDocumentItem) => {
-                      const actionState = getDocumentActionState(record);
-                      const readyForChat = actionState.readyForChat;
-                      return (
-                        <Space wrap size={[8, 8]}>
-                          <Link
-                            aria-disabled={!readyForChat}
-                            className={readyForChat ? "landing-primary-action" : "landing-primary-action disabled-link"}
-                            href={
-                              readyForChat
-                                ? buildKnowledgeBaseChatHref(
-                                    selectedKnowledgeBase,
-                                    record,
-                                    `请基于知识库文档“${record.file_name}”总结其中最值得重点关注的合同审查要点，并给出后续核查建议。`,
-                                    "总结审查要点",
-                                  )
-                                : "#"
-                            }
-                            onClick={(event) => {
-                              if (!readyForChat) {
-                                event.preventDefault();
-                                messageApi.warning(actionState.disabledReason || "当前文档尚未完成索引，暂时不能进入问答。");
-                              }
-                            }}
-                          >
-                            审查要点
-                          </Link>
-                          <Link
-                            aria-disabled={!readyForChat}
-                            className={readyForChat ? "landing-secondary-action" : "landing-secondary-action disabled-link"}
-                            href={
-                              readyForChat
-                                ? buildKnowledgeBaseChatHref(
-                                    selectedKnowledgeBase,
-                                    record,
-                                    `请基于知识库文档“${record.file_name}”提炼可直接用于合同审查助手的问答依据，并说明适合继续追问哪些问题。`,
-                                    "提炼问答依据",
-                                  )
-                                : "#"
-                            }
-                            onClick={(event) => {
-                              if (!readyForChat) {
-                                event.preventDefault();
-                                messageApi.warning(actionState.disabledReason || "当前文档尚未完成索引，暂时不能进入问答。");
-                              }
-                            }}
-                          >
-                            继续问答
-                          </Link>
-                          {actionState.retryable ? (
-                            <Button size="small" danger={isDocumentFailedLike(record)} loading={retryingDocumentId === record.id} onClick={() => void handleRetryDocument(record)}>
-                              重试处理
-                            </Button>
-                          ) : null}
-                        </Space>
-                      );
-                    },
-                  },
-                ]}
-                scroll={{ x: 1180 }}
-              />
-            </Card>
-          </Space>
-        </div>
-      </Space>
+      {/* 上传文档抽屉 */}
+      <Drawer
+        title="上传文档"
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        width={560}
+      >
+        <Form form={uploadForm} layout="vertical">
+          <Dragger
+            beforeUpload={() => false}
+            fileList={fileList}
+            maxCount={1}
+            multiple={false}
+            accept=".txt,.md,.csv,.json,.docx,.pdf"
+            onChange={({ fileList: nextFileList }) => setFileList(nextFileList)}
+          >
+            <p className="ant-upload-drag-icon"><InboxOutlined /></p>
+            <p>点击或拖拽上传知识文档</p>
+            <p className="upload-hint">支持 txt、md、csv、json、docx、pdf</p>
+          </Dragger>
+          <Form.Item label="上传备注" name="note">
+            <Input placeholder="例如：2026 版采购制度" />
+          </Form.Item>
+          <Form.Item label="法源类型" name="source_type">
+            <Input placeholder="例如：法律 / 司法解释 / 制度" />
+          </Form.Item>
+          <Form.Item label="发文机关" name="authority">
+            <Input placeholder="例如：全国人民代表大会" />
+          </Form.Item>
+          <Form.Item label="生效日期" name="effective_date">
+            <Input placeholder="例如：2021-01-01" />
+          </Form.Item>
+          <Form.Item label="适用区域" name="region">
+            <Input placeholder="例如：CN / CN-SH" />
+          </Form.Item>
+          <Form.Item label="标签" name="tags">
+            <Input placeholder="逗号或分号分隔" />
+          </Form.Item>
+          <Button type="primary" onClick={() => void handleUpload()} loading={uploading} block>
+            上传到当前知识库
+          </Button>
+        </Form>
+      </Drawer>
     </main>
   );
 }
+
+// Helper function for rendering status tags inline
+function renderStatusTag(value: string, metaMap: Record<string, { color: string; label: string }>) {
+  const meta = metaMap[value] ?? { color: "default", label: value || "未知" };
+  return <Tag color={meta.color}>{meta.label}</Tag>;
+}
diff --git a/frontend/src/app/legal-articles/page.tsx b/frontend/src/app/legal-articles/page.tsx
index cb39a81d..11564957 100644
--- a/frontend/src/app/legal-articles/page.tsx
+++ b/frontend/src/app/legal-articles/page.tsx
@@ -1,8 +1,30 @@
-"use client";
+"use client";
 
-import { ExperimentOutlined, EyeOutlined, FileSearchOutlined, LinkOutlined, ReloadOutlined, SearchOutlined } from "@ant-design/icons";
-import { Alert, Button, Card, Drawer, Empty, Form, Input, Select, Space, Statistic, Table, Tag, Typography, message } from "antd";
-import type { ColumnsType, TablePaginationConfig } from "antd/es/table";
+import {
+  CaretDownOutlined,
+  CaretRightOutlined,
+  ExperimentOutlined,
+  EyeOutlined,
+  FileSearchOutlined,
+  LinkOutlined,
+  ReloadOutlined,
+  SearchOutlined,
+} from "@ant-design/icons";
+import {
+  Button,
+  Drawer,
+  Empty,
+  Input,
+  List,
+  Select,
+  Space,
+  Spin,
+  Tag,
+  Tree,
+  Typography,
+  message,
+} from "antd";
+import type { DataNode } from "antd/es/tree";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -30,30 +52,14 @@ const defaultFilters: LegalArticleFilterValues = {
   published_status: "all",
 };
 
-const sourceTypeOptions = [
-  { value: "all", label: "全部法源类型" },
-  { value: "法律", label: "法律" },
-  { value: "行政法规", label: "行政法规" },
-  { value: "司法解释", label: "司法解释" },
-  { value: "地方法规", label: "地方法规" },
-  { value: "部门规章", label: "部门规章" },
-  { value: "规范性文件", label: "规范性文件" },
-];
-
-const indexStatusOptions = [
-  { value: "all", label: "全部索引状态" },
-  { value: "indexed", label: "已索引" },
-  { value: "pending", label: "待索引" },
-  { value: "processing", label: "索引中" },
-  { value: "failed", label: "索引失败" },
-];
-
-const publishedStatusOptions = [
-  { value: "all", label: "全部发布状态" },
-  { value: "published", label: "已发布" },
-  { value: "draft", label: "草稿" },
-  { value: "archived", label: "已归档" },
-];
+const sourceTypeLabelMap: Record<string, string> = {
+  法律: "法律",
+  行政法规: "行政法规",
+  司法解释: "司法解释",
+  地方法规: "地方法规",
+  部门规章: "部门规章",
+  规范性文件: "规范性文件",
+};
 
 const indexStatusMeta: Record<string, { color: string; label: string }> = {
   indexed: { color: "green", label: "已索引" },
@@ -69,24 +75,16 @@ const publishedStatusMeta: Record<string, { color: string; label: string }> = {
 };
 
 function formatDateTime(value: string | null | undefined) {
-  if (!value) {
-    return "-";
-  }
+  if (!value) return "-";
   const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
+  if (Number.isNaN(date.getTime())) return value;
   return date.toLocaleString("zh-CN", { hour12: false });
 }
 
 function formatDate(value: string | null | undefined) {
-  if (!value) {
-    return "-";
-  }
+  if (!value) return "-";
   const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
+  if (Number.isNaN(date.getTime())) return value;
   return date.toLocaleDateString("zh-CN");
 }
 
@@ -99,39 +97,25 @@ function renderStatusTag(value: string, metaMap: Record<string, { color: string;
   return <Tag color={meta.color}>{meta.label}</Tag>;
 }
 
-function normalizeFilters(values: LegalArticleFilterValues): LegalArticleFilterValues {
-  return {
-    keyword: values.keyword?.trim() ?? "",
-    source_id: values.source_id?.trim() ?? "",
-    source_type: values.source_type ?? "all",
-    article_no: values.article_no?.trim() ?? "",
-    index_status: values.index_status ?? "all",
-    published_status: values.published_status ?? "all",
-  };
-}
-
 function getSemanticSearchReason(item: ChatSourceItem) {
   const reason = item.metadata?.match_reason;
   return typeof reason === "string" && reason.trim() ? reason : "混合语义命中";
 }
 
+const ALL_KEY = "__all__";
+
 export default function LegalArticlesPage() {
   const [messageApi, contextHolder] = message.useMessage();
   const currentUser = useAuthStore((state) => state.currentUser);
-  const [form] = Form.useForm<LegalArticleFilterValues>();
+
   const [loading, setLoading] = useState(true);
   const [detailLoading, setDetailLoading] = useState(false);
   const [items, setItems] = useState<LegalArticleItem[]>([]);
-  const [filters, setFilters] = useState<LegalArticleFilterValues>(defaultFilters);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
   const [total, setTotal] = useState(0);
-  const [selectedArticle, setSelectedArticle] = useState<LegalArticleItem | null>(null);
-  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(50);
+  const [filters, setFilters] = useState<LegalArticleFilterValues>(defaultFilters);
   const [vectorizing, setVectorizing] = useState(false);
-  const [semanticQuery, setSemanticQuery] = useState("");
-  const [semanticSearching, setSemanticSearching] = useState(false);
-  const [semanticResults, setSemanticResults] = useState<ChatSourceItem[]>([]);
   const [vectorizationSummary, setVectorizationSummary] = useState({
     total_articles: 0,
     vectorized_articles: 0,
@@ -142,9 +126,16 @@ export default function LegalArticlesPage() {
     latest_article_title: null as string | null,
   });
 
-  const currentPageSourceCount = useMemo(() => new Set(items.map((item) => item.source_id)).size, [items]);
-  const currentPageIndexedCount = useMemo(() => items.filter((item) => item.index_status === "indexed").length, [items]);
-  const currentPagePublishedCount = useMemo(() => items.filter((item) => item.published_status === "published").length, [items]);
+  const [selectedArticle, setSelectedArticle] = useState<LegalArticleItem | null>(null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>(ALL_KEY);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([ALL_KEY]);
+
+  const [semanticQuery, setSemanticQuery] = useState("");
+  const [semanticSearching, setSemanticSearching] = useState(false);
+  const [semanticResults, setSemanticResults] = useState<ChatSourceItem[]>([]);
 
   const loadArticles = useCallback(
     async (nextPage = page, nextPageSize = pageSize, nextFilters = filters) => {
@@ -179,9 +170,7 @@ export default function LegalArticlesPage() {
 
   const openArticleDetail = useCallback(
     async (articleId: string, fallback?: LegalArticleItem) => {
-      if (fallback) {
-        setSelectedArticle(fallback);
-      }
+      if (fallback) setSelectedArticle(fallback);
       setDrawerOpen(true);
       setDetailLoading(true);
       try {
@@ -201,32 +190,17 @@ export default function LegalArticlesPage() {
   );
 
   useEffect(() => {
-    const timer = window.setTimeout(() => {
-      void loadArticles();
-    }, 0);
-
+    const timer = window.setTimeout(() => void loadArticles(), 0);
     return () => window.clearTimeout(timer);
   }, [loadArticles]);
 
   useEffect(() => {
-    if (currentUser?.role !== "admin" || typeof window === "undefined") {
-      return;
-    }
+    if (currentUser?.role !== "admin" || typeof window === "undefined") return;
     const articleId = new URLSearchParams(window.location.search).get("article_id");
-    if (articleId) {
-      void openArticleDetail(articleId);
-    }
+    if (articleId) void openArticleDetail(articleId);
   }, [currentUser?.role, openArticleDetail]);
 
-  const handleSearch = (values: LegalArticleFilterValues) => {
-    const nextFilters = normalizeFilters(values);
-    setFilters(nextFilters);
-    setLoading(true);
-    void loadArticles(1, pageSize, nextFilters);
-  };
-
   const handleReset = () => {
-    form.setFieldsValue(defaultFilters);
     setFilters(defaultFilters);
     setLoading(true);
     void loadArticles(1, pageSize, defaultFilters);
@@ -235,11 +209,7 @@ export default function LegalArticlesPage() {
   const handleVectorize = async () => {
     setVectorizing(true);
     try {
-      const result = await vectorizeLegalArticlesByFilters({
-        batch_size: 200,
-        force: false,
-        ...filters,
-      });
+      const result = await vectorizeLegalArticlesByFilters({ batch_size: 200, force: false, ...filters });
       if (result.code !== 0) {
         messageApi.error(result.message || "法条向量化失败");
         return;
@@ -276,358 +246,293 @@ export default function LegalArticlesPage() {
     }
   };
 
-  const handleTableChange = (pagination: TablePaginationConfig) => {
-    const nextPage = pagination.current ?? 1;
-    const nextPageSize = pagination.pageSize ?? pageSize;
-    setLoading(true);
-    void loadArticles(nextPage, nextPageSize, filters);
+  const filteredItems = useMemo(() => {
+    let result = items;
+    if (selectedCategory !== ALL_KEY) {
+      result = result.filter((item) => item.source_type === selectedCategory);
+    }
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (item) =>
+          item.source_title.toLowerCase().includes(q) ||
+          item.article_no.toLowerCase().includes(q) ||
+          (item.source_id ?? "").toLowerCase().includes(q) ||
+          item.article_text.toLowerCase().includes(q),
+      );
+    }
+    return result;
+  }, [items, selectedCategory, searchQuery]);
+
+  const treeData = useMemo((): DataNode[] => {
+    const typeCounts: Record<string, number> = {};
+    for (const item of items) {
+      typeCounts[item.source_type] = (typeCounts[item.source_type] || 0) + 1;
+    }
+
+    const children: DataNode[] = Object.entries(sourceTypeLabelMap)
+      .filter(([key]) => typeCounts[key])
+      .map(([key, label]) => ({
+        key,
+        title: (
+          <Space>
+            <span>{label}</span>
+            <Tag color="default" style={{ margin: 0 }}>{typeCounts[key] ?? 0}</Tag>
+          </Space>
+        ),
+      }));
+
+    return [
+      {
+        key: ALL_KEY,
+        title: (
+          <Space>
+            <span>全部法条</span>
+            <Tag color="blue" style={{ margin: 0 }}>{total}</Tag>
+          </Space>
+        ),
+        children,
+      },
+    ];
+  }, [items, total]);
+
+  const handleTreeSelect = (_selectedKeys: React.Key[], info: { node: DataNode }) => {
+    const key = info.node.key as string;
+    setSelectedCategory(key);
   };
 
-  const semanticColumns: ColumnsType<ChatSourceItem> = [
-    {
-      title: "命中法条",
-      key: "title",
-      width: 260,
-      render: (_, item) => (
-        <Space direction="vertical" size={2}>
-          <Text strong>{item.title}</Text>
-          <Text type="secondary">{item.authority || "-"}</Text>
-        </Space>
-      ),
-    },
-    {
-      title: "相关度",
-      dataIndex: "score",
-      key: "score",
-      width: 100,
-      render: (value?: number) => (typeof value === "number" ? value.toFixed(3) : "-"),
-    },
-    {
-      title: "命中原因",
-      key: "reason",
-      width: 220,
-      render: (_, item) => <Text type="secondary">{getSemanticSearchReason(item)}</Text>,
-    },
-    {
-      title: "摘要",
-      dataIndex: "content",
-      key: "content",
-      render: (value: string) => (
-        <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
-          {value}
-        </Paragraph>
-      ),
-    },
-    {
-      title: "操作",
-      key: "actions",
-      width: 120,
-      render: (_, item) => (
-        <Button disabled={!item.source_id} icon={<EyeOutlined />} size="small" onClick={() => (item.source_id ? void openArticleDetail(item.source_id) : undefined)}>
-          查看法条
-        </Button>
-      ),
-    },
-  ];
+  const getCategoryLabel = () => {
+    if (selectedCategory === ALL_KEY) return "全部法条";
+    return sourceTypeLabelMap[selectedCategory] ?? selectedCategory;
+  };
 
-  const columns: ColumnsType<LegalArticleItem> = [
-    {
-      title: "法源",
-      dataIndex: "source_title",
-      key: "source_title",
-      width: 260,
-      render: (_, item) => (
-        <Space orientation="vertical" size={2}>
-          <Text strong>{item.source_title}</Text>
-          <Text code>{item.source_id}</Text>
-          <Text type="secondary">{item.authority}</Text>
-        </Space>
-      ),
-    },
-    {
-      title: "条文编号",
-      dataIndex: "article_no",
-      key: "article_no",
-      width: 120,
-      render: (value: string) => <Text strong>{value}</Text>,
-    },
-    {
-      title: "章节",
-      key: "chapter",
-      width: 220,
-      render: (_, item) => (
-        <Space orientation="vertical" size={2}>
-          <Text>{item.chapter_title || "-"}</Text>
-          <Text type="secondary">{item.section_title || "-"}</Text>
-        </Space>
-      ),
-    },
-    {
-      title: "法条摘要",
-      dataIndex: "article_text",
-      key: "article_text",
-      width: 360,
-      render: (value: string) => (
-        <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
-          {value}
-        </Paragraph>
-      ),
-    },
-    {
-      title: "标签",
-      dataIndex: "tags",
-      key: "tags",
-      width: 180,
-      render: (value: string[]) => (
-        <Space wrap size={4}>
-          {value?.length ? value.slice(0, 3).map((tag) => <Tag key={tag}>{tag}</Tag>) : <Text type="secondary">-</Text>}
-          {value?.length > 3 ? <Tag>+{value.length - 3}</Tag> : null}
-        </Space>
-      ),
-    },
-    {
-      title: "知识库吸收",
-      key: "knowledge",
-      width: 220,
-      render: (_, item) => (
-        <Space orientation="vertical" size={2}>
-          {renderStatusTag(item.index_status, indexStatusMeta)}
-          <Text type="secondary">知识库：{item.knowledge_base_id || "-"}</Text>
-          <Text type="secondary">文档：{item.knowledge_document_id || "-"}</Text>
-        </Space>
-      ),
-    },
-    {
-      title: "发布状态",
-      key: "published_status",
-      width: 160,
-      render: (_, item) => (
-        <Space orientation="vertical" size={2}>
-          {renderStatusTag(item.published_status, publishedStatusMeta)}
-          <Text type="secondary">{formatDateTime(item.published_at)}</Text>
-        </Space>
-      ),
-    },
-    {
-      title: "生效范围",
-      key: "effective",
-      width: 160,
-      render: (_, item) => (
-        <Space orientation="vertical" size={2}>
-          <Text>{item.region}</Text>
-          <Text type="secondary">{formatDate(item.effective_date)}</Text>
-          <Text type="secondary">{item.validity_status || "-"}</Text>
-        </Space>
-      ),
-    },
-    {
-      title: "操作",
-      key: "actions",
-      fixed: "right",
-      width: 120,
-      render: (_, item) => (
-        <Button icon={<EyeOutlined />} size="small" onClick={() => void openArticleDetail(item.id, item)}>
-          查看全文
-        </Button>
-      ),
-    },
-  ];
+  const indexedCount = useMemo(() => items.filter((item) => item.index_status === "indexed").length, [items]);
+  const publishedCount = useMemo(() => items.filter((item) => item.published_status === "published").length, [items]);
 
   if (currentUser?.role !== "admin") {
     return (
-      <main className="page-shell review-history-page">
+      <main className="page-shell legal-articles-page">
         {contextHolder}
-        <Card className="review-list-card">
-          <Alert title="仅管理员可查看法条全文库。" type="warning" showIcon />
-        </Card>
+        <div style={{ padding: 48, textAlign: "center" }}>
+          <Text type="secondary">仅管理员可查看法条全文库。</Text>
+        </div>
       </main>
     );
   }
 
   return (
-    <main className="page-shell review-page-grid">
+    <main className="page-shell legal-articles-page">
       {contextHolder}
-      <Space orientation="vertical" size="large" style={{ width: "100%" }}>
-        <section className="review-page-hero">
-          <div className="review-page-hero-copy">
-            <span className="landing-badge">Legal Fulltext Library</span>
-            <Title level={2}>法条全文库</Title>
-            <Text type="secondary">查看 Phase14 已吸收入库的法律法规全文条款，核对法源、索引状态、发布状态和知识库追溯信息。</Text>
+      <div className="doc-layout-shell">
+        {/* 左侧树形菜单 */}
+        <aside className="doc-sidebar">
+          <Input
+            allowClear
+            prefix={<SearchOutlined />}
+            placeholder="搜索法条"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="doc-sidebar-search"
+          />
+          <div className="doc-sidebar-tree">
+            <Tree
+              showIcon={false}
+              switcherIcon={({ expanded }) => (expanded ? <CaretDownOutlined /> : <CaretRightOutlined />)}
+              treeData={treeData}
+              expandedKeys={expandedKeys}
+              selectedKeys={[selectedCategory]}
+              onExpand={setExpandedKeys}
+              onSelect={(_keys, info) => handleTreeSelect(_keys, info)}
+              blockNode
+            />
           </div>
-          <Card className="review-side-card" variant="borderless">
-            <span className="landing-panel-eyebrow">Phase14</span>
-            <Title level={4} style={{ margin: 0, color: "inherit" }}>
-              吸收闭环
-            </Title>
-            <ul className="review-page-tip-list">
-              <li>全文条款由治理资产资料包同步到业务运行层。</li>
-              <li>本页只查看和核验，不替代正式法源导入脚本。</li>
-              <li>每条法条保留知识库、文档、校验值和发布时间。</li>
-            </ul>
-            <Link href="/knowledge-bases">
-              <Button icon={<FileSearchOutlined />}>查看知识库</Button>
-            </Link>
-          </Card>
-        </section>
+          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8 }}>
+            <Button block icon={<ExperimentOutlined />} loading={vectorizing} onClick={() => void handleVectorize()}>
+              补齐向量化
+            </Button>
+            <Button block icon={<ReloadOutlined />} onClick={handleReset}>
+              重置筛选
+            </Button>
+          </div>
+        </aside>
 
-        <Space size="middle" wrap>
-          <Card className="review-surface-card" style={{ minWidth: 180 }}>
-            <Statistic title="法条总数" value={total} />
-          </Card>
-          <Card className="review-surface-card" style={{ minWidth: 180 }}>
-            <Statistic title="当前页法源" value={currentPageSourceCount} />
-          </Card>
-          <Card className="review-surface-card" style={{ minWidth: 180 }}>
-            <Statistic title="当前页已索引" value={currentPageIndexedCount} suffix={`/ ${items.length}`} />
-          </Card>
-          <Card className="review-surface-card" style={{ minWidth: 180 }}>
-            <Statistic title="当前页已发布" value={currentPagePublishedCount} suffix={`/ ${items.length}`} />
-          </Card>
-          <Card className="review-surface-card" style={{ minWidth: 220 }}>
-            <Statistic title="当前筛选向量化覆盖率" value={vectorizationSummary.coverage_percent} suffix="%" precision={2} prefix={<ExperimentOutlined />} />
-          </Card>
-        </Space>
+        {/* 右侧内容 */}
+        <section className="doc-main-content">
+          {/* KPI 统计 */}
+          <div className="prompt-kpi-grid" style={{ marginBottom: 16 }}>
+            <div className="prompt-kpi-card">
+              <Text>法条总数</Text>
+              <strong>{total}</strong>
+            </div>
+            <div className="prompt-kpi-card prompt-kpi-card-success">
+              <Text>已索引</Text>
+              <strong>{indexedCount}</strong>
+            </div>
+            <div className="prompt-kpi-card prompt-kpi-card-warning">
+              <Text>已发布</Text>
+              <strong>{publishedCount}</strong>
+            </div>
+            <div className="prompt-kpi-card prompt-kpi-card-info">
+              <Text>向量化覆盖</Text>
+              <strong>{vectorizationSummary.coverage_percent.toFixed(1)}%</strong>
+            </div>
+          </div>
 
-        <Card className="review-surface-card" title="语义检索">
-          <Space direction="vertical" style={{ width: "100%" }}>
+          {/* 语义检索 */}
+          <div style={{ marginBottom: 16 }}>
             <Input.Search
               allowClear
-              enterButton="检索"
+              enterButton="语义检索"
               loading={semanticSearching}
-              onChange={(event) => setSemanticQuery(event.target.value)}
+              onChange={(e) => setSemanticQuery(e.target.value)}
               onSearch={(value) => void handleSemanticSearch(value)}
               placeholder="输入法条语义问题，例如：违约责任、付款条件、电子签章证据"
               value={semanticQuery}
+              style={{ marginBottom: 8 }}
             />
-            <Alert
-              message="语义检索会优先结合已向量化的法条库返回结果，再叠加关键词与条号命中。"
-              type="info"
-              showIcon
-            />
-            <Table
-              rowKey={(item) => `${item.source_id}-${item.detail_path}`}
-              columns={semanticColumns}
-              dataSource={semanticResults}
-              loading={semanticSearching}
-              locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="输入一个问题后即可看到语义命中的法条。" /> }}
-              pagination={{ pageSize: 5, showSizeChanger: false }}
-              scroll={{ x: 1200 }}
-            />
-          </Space>
-        </Card>
+            {semanticResults.length > 0 && (
+              <List
+                dataSource={semanticResults}
+                size="small"
+                renderItem={(item) => (
+                  <List.Item>
+                    <List.Item.Meta
+                      title={
+                        <Space>
+                          <Text strong>{item.title}</Text>
+                          {item.score != null && <Tag color="purple">{item.score.toFixed(3)}</Tag>}
+                          <Text type="secondary" style={{ fontSize: 12 }}>{getSemanticSearchReason(item)}</Text>
+                        </Space>
+                      }
+                      description={item.content ? <Paragraph ellipsis={{ rows: 2 }}>{item.content}</Paragraph> : null}
+                    />
+                    {item.source_id && (
+                      <Button disabled={!item.source_id} icon={<EyeOutlined />} size="small" onClick={() => void openArticleDetail(item.source_id)}>
+                        查看
+                      </Button>
+                    )}
+                  </List.Item>
+                )}
+              />
+            )}
+          </div>
 
-        <Card className="review-surface-card" title="检索条件">
-          <Form form={form} layout="vertical" initialValues={defaultFilters} onFinish={handleSearch}>
-            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16 }}>
-              <Form.Item label="关键词" name="keyword">
-                <Input allowClear placeholder="搜索法源、条号或全文" prefix={<SearchOutlined />} />
-              </Form.Item>
-              <Form.Item label="法源编号" name="source_id">
-                <Input allowClear placeholder="例如 LAW-CIVIL-CODE-2020" />
-              </Form.Item>
-              <Form.Item label="法源类型" name="source_type">
-                <Select options={sourceTypeOptions} />
-              </Form.Item>
-              <Form.Item label="条文编号" name="article_no">
-                <Input allowClear placeholder="例如 第四百六十四条" />
-              </Form.Item>
-              <Form.Item label="索引状态" name="index_status">
-                <Select options={indexStatusOptions} />
-              </Form.Item>
-              <Form.Item label="发布状态" name="published_status">
-                <Select options={publishedStatusOptions} />
-              </Form.Item>
+          {/* 法条列表 */}
+          <div className="doc-content-header" style={{ marginBottom: 12 }}>
+            <Title level={2} style={{ margin: 0 }}>{getCategoryLabel()}</Title>
+            <Text type="secondary">{filteredItems.length} 条（共 {total} 条）</Text>
+          </div>
+
+          {loading ? (
+            <div className="doc-loading-panel">
+              <Spin />
+              <Text type="secondary">正在加载法条列表...</Text>
             </div>
-            <Space>
-              <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
-                查询
-              </Button>
-              <Button onClick={handleReset} icon={<ReloadOutlined />}>
-                重置
-              </Button>
-              <Button icon={<ExperimentOutlined />} loading={vectorizing} onClick={() => void handleVectorize()}>
-                按当前筛选补齐向量化
-              </Button>
-            </Space>
-          </Form>
-        </Card>
-
-        <Card className="review-surface-card" title="法条列表">
-          <Table
-            rowKey="id"
-            dataSource={items}
-            loading={loading}
-            columns={columns}
-            pagination={{ current: page, pageSize, total, showSizeChanger: true }}
-            locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="还没有法条全文数据。" /> }}
-            onChange={handleTableChange}
-            scroll={{ x: 1720 }}
-          />
-        </Card>
-      </Space>
+          ) : filteredItems.length > 0 ? (
+            <List
+              dataSource={filteredItems}
+              renderItem={(item) => (
+                <List.Item className="doc-list-item" style={{ flexDirection: "column", alignItems: "stretch" }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <Space wrap size={[6, 4]}>
+                        <span className="doc-item-name">{item.source_title}</span>
+                        <Tag color="blue">{item.article_no}</Tag>
+                        {renderStatusTag(item.index_status, indexStatusMeta)}
+                        {renderStatusTag(item.published_status, publishedStatusMeta)}
+                        <Tag>{item.source_type}</Tag>
+                        <Text code style={{ fontSize: 12 }}>{item.source_id}</Text>
+                      </Space>
+                      <div style={{ marginTop: 4 }}>
+                        <Paragraph type="secondary" ellipsis={{ rows: 2 }} style={{ marginBottom: 0 }}>
+                          {item.article_text}
+                        </Paragraph>
+                      </div>
+                      {item.tags?.length > 0 && (
+                        <Space wrap size={[4, 4]} style={{ marginTop: 4 }}>
+                          {item.tags.slice(0, 5).map((tag) => <Tag key={tag} style={{ fontSize: 11 }}>{tag}</Tag>)}
+                          {item.tags.length > 5 && <Tag style={{ fontSize: 11 }}>+{item.tags.length - 5}</Tag>}
+                        </Space>
+                      )}
+                    </div>
+                    <Space style={{ marginLeft: 16, flexShrink: 0 }}>
+                      <Button icon={<EyeOutlined />} size="small" onClick={() => void openArticleDetail(item.id, item)}>
+                        查看全文
+                      </Button>
+                    </Space>
+                  </div>
+                </List.Item>
+              )}
+            />
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有匹配的法条">
+              <Button onClick={() => { setSearchQuery(""); setSelectedCategory(ALL_KEY); }}>清空筛选</Button>
+            </Empty>
+          )}
+        </section>
+      </div>
 
+      {/* 法条详情抽屉 */}
       <Drawer
         title={selectedArticle ? `${selectedArticle.source_title} ${selectedArticle.article_no}` : "法条全文"}
         open={drawerOpen}
         size={760}
         onClose={() => setDrawerOpen(false)}
       >
-        <Card loading={detailLoading} variant="borderless">
-          {selectedArticle ? (
-            <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-              <Space wrap>
-                {renderStatusTag(selectedArticle.index_status, indexStatusMeta)}
-                {renderStatusTag(selectedArticle.published_status, publishedStatusMeta)}
-                <Tag>{selectedArticle.source_type}</Tag>
-                <Tag>{selectedArticle.region}</Tag>
-              </Space>
-              <div>
-                <Text type="secondary">法源</Text>
-                <Title level={4} style={{ marginTop: 4 }}>
-                  {selectedArticle.source_title}
-                </Title>
-                <Text>{selectedArticle.authority}</Text>
-              </div>
-              <div>
-                <Text type="secondary">章节</Text>
-                <Paragraph style={{ marginTop: 4, marginBottom: 0 }}>
-                  {[selectedArticle.chapter_title, selectedArticle.section_title].filter(Boolean).join(" / ") || "-"}
-                </Paragraph>
-              </div>
-              <div>
-                <Text type="secondary">全文</Text>
-                <Paragraph copyable={{ text: selectedArticle.article_text }} style={{ marginTop: 8, whiteSpace: "pre-wrap" }}>
-                  {selectedArticle.article_text}
-                </Paragraph>
-              </div>
-              <Space wrap>
-                {selectedArticle.tags.length ? selectedArticle.tags.map((tag) => <Tag key={tag}>{tag}</Tag>) : <Tag>暂无标签</Tag>}
-              </Space>
-              <Card size="small" title="追溯信息">
-                <Space orientation="vertical" size={6} style={{ width: "100%" }}>
-                  <Text>法源编号：{selectedArticle.source_id}</Text>
-                  <Text>生效日期：{formatDate(selectedArticle.effective_date)}</Text>
-                  <Text>有效性：{selectedArticle.validity_status || "-"}</Text>
-                  <Text>知识库：{selectedArticle.knowledge_base_id || "-"}</Text>
-                  <Text>知识文档：{selectedArticle.knowledge_document_id || "-"}</Text>
-                  <Text>向量版本：{selectedArticle.semantic_vector_version || "-"}</Text>
-                  <Text>向量维度：{selectedArticle.semantic_vector_terms ?? 0}</Text>
-                  <Text>向量更新时间：{formatDateTime(selectedArticle.semantic_vector_updated_at)}</Text>
-                  <Text>全文校验值：{formatHash(selectedArticle.text_checksum)}</Text>
-                  <Text>法源校验值：{formatHash(selectedArticle.source_checksum)}</Text>
-                  <Text>更新时间：{formatDateTime(selectedArticle.updated_at)}</Text>
-                  {selectedArticle.official_url ? (
-                    <a href={selectedArticle.official_url} target="_blank" rel="noreferrer">
-                      <LinkOutlined /> 打开官方来源
-                    </a>
-                  ) : null}
-                </Space>
-              </Card>
+        {detailLoading ? (
+          <div style={{ textAlign: "center", padding: 48 }}><Spin /></div>
+        ) : selectedArticle ? (
+          <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+            <Space wrap>
+              {renderStatusTag(selectedArticle.index_status, indexStatusMeta)}
+              {renderStatusTag(selectedArticle.published_status, publishedStatusMeta)}
+              <Tag>{selectedArticle.source_type}</Tag>
+              <Tag>{selectedArticle.region}</Tag>
             </Space>
-          ) : (
-            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请选择一条法条。" />
-          )}
-        </Card>
+            <div>
+              <Text type="secondary">法源</Text>
+              <Title level={4} style={{ marginTop: 4 }}>{selectedArticle.source_title}</Title>
+              <Text>{selectedArticle.authority}</Text>
+            </div>
+            <div>
+              <Text type="secondary">章节</Text>
+              <Paragraph style={{ marginTop: 4, marginBottom: 0 }}>
+                {[selectedArticle.chapter_title, selectedArticle.section_title].filter(Boolean).join(" / ") || "-"}
+              </Paragraph>
+            </div>
+            <div>
+              <Text type="secondary">全文</Text>
+              <Paragraph copyable={{ text: selectedArticle.article_text }} style={{ marginTop: 8, whiteSpace: "pre-wrap" }}>
+                {selectedArticle.article_text}
+              </Paragraph>
+            </div>
+            <Space wrap>
+              {selectedArticle.tags.length ? selectedArticle.tags.map((tag) => <Tag key={tag}>{tag}</Tag>) : <Tag>暂无标签</Tag>}
+            </Space>
+            <div style={{ padding: 16, background: "#f7f9fc", borderRadius: 8 }}>
+              <Text type="secondary" style={{ marginBottom: 8, display: "block" }}>追溯信息</Text>
+              <Space direction="vertical" size={6} style={{ width: "100%" }}>
+                <Text>法源编号：{selectedArticle.source_id}</Text>
+                <Text>生效日期：{formatDate(selectedArticle.effective_date)}</Text>
+                <Text>有效性：{selectedArticle.validity_status || "-"}</Text>
+                <Text>知识库：{selectedArticle.knowledge_base_id || "-"}</Text>
+                <Text>知识文档：{selectedArticle.knowledge_document_id || "-"}</Text>
+                <Text>向量版本：{selectedArticle.semantic_vector_version || "-"}</Text>
+                <Text>向量维度：{selectedArticle.semantic_vector_terms ?? 0}</Text>
+                <Text>向量更新时间：{formatDateTime(selectedArticle.semantic_vector_updated_at)}</Text>
+                <Text>全文校验值：{formatHash(selectedArticle.text_checksum)}</Text>
+                <Text>更新时间：{formatDateTime(selectedArticle.updated_at)}</Text>
+                {selectedArticle.official_url ? (
+                  <a href={selectedArticle.official_url} target="_blank" rel="noreferrer">
+                    <LinkOutlined /> 打开官方来源
+                  </a>
+                ) : null}
+              </Space>
+            </div>
+          </Space>
+        ) : (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请选择一条法条。" />
+        )}
       </Drawer>
     </main>
   );
diff --git a/frontend/src/app/rules/page.tsx b/frontend/src/app/rules/page.tsx
index b9ee1314..409b1b45 100644
--- a/frontend/src/app/rules/page.tsx
+++ b/frontend/src/app/rules/page.tsx
@@ -1,7 +1,29 @@
-"use client";
+"use client";
 
-import { Alert, Button, Card, Empty, Form, Input, Popconfirm, Select, Space, Switch, Table, Tag, Typography, message } from "antd";
-import type { ColumnsType, TablePaginationConfig } from "antd/es/table";
+import {
+  CaretDownOutlined,
+  CaretRightOutlined,
+  PlusOutlined,
+  SearchOutlined,
+} from "@ant-design/icons";
+import {
+  Button,
+  Drawer,
+  Empty,
+  Form,
+  Input,
+  List,
+  Popconfirm,
+  Select,
+  Space,
+  Spin,
+  Switch,
+  Tag,
+  Tree,
+  Typography,
+  message,
+} from "antd";
+import type { DataNode } from "antd/es/tree";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import {
@@ -17,7 +39,7 @@ import {
 import { useAuthStore } from "@/stores/auth.store";
 import type { ReviewRuleItem } from "@/types/api";
 
-const { Title, Text } = Typography;
+const { Title, Text, Paragraph } = Typography;
 
 type ReviewRuleFormValues = {
   name: string;
@@ -39,11 +61,20 @@ const contractTypeOptions = [
   { value: "nda", label: "保密协议" },
 ];
 
-const riskLevelOptions = [
-  { value: "high", label: "高风险" },
-  { value: "medium", label: "中风险" },
-  { value: "low", label: "低风险" },
-];
+const contractTypeLabelMap: Record<string, string> = {
+  all: "全部合同",
+  procurement: "采购合同",
+  sales: "销售合同",
+  labor: "劳动合同",
+  service: "服务合同",
+  nda: "保密协议",
+};
+
+const riskLevelLabelMap: Record<string, string> = {
+  high: "高风险",
+  medium: "中风险",
+  low: "低风险",
+};
 
 function formatDateTime(value: string) {
   return new Date(value).toLocaleString("zh-CN", { hour12: false });
@@ -55,65 +86,61 @@ function getRiskLevelTag(value: string) {
   return <Tag color="blue">低风险</Tag>;
 }
 
+const ALL_KEY = "__all__";
+
 export default function RulesPage() {
   const [messageApi, contextHolder] = message.useMessage();
   const currentUser = useAuthStore((state) => state.currentUser);
   const [form] = Form.useForm<ReviewRuleFormValues>();
+
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [statusChangingId, setStatusChangingId] = useState<string | null>(null);
-  const [items, setItems] = useState<ReviewRuleItem[]>([]);
-  const [editingId, setEditingId] = useState<string | null>(null);
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [publishingId, setPublishingId] = useState<string | null>(null);
   const [rollbackingId, setRollbackingId] = useState<string | null>(null);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [total, setTotal] = useState(0);
+
+  const [items, setItems] = useState<ReviewRuleItem[]>([]);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>(ALL_KEY);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([ALL_KEY]);
 
   const editingRule = useMemo(() => items.find((item) => item.id === editingId) ?? null, [editingId, items]);
 
-  const loadRules = useCallback(async (nextPage = page, nextPageSize = pageSize) => {
+  const loadRules = useCallback(async () => {
     if (currentUser?.role !== "admin") {
       setLoading(false);
       return;
     }
 
+    setLoading(true);
     try {
-      const result = await listReviewRules(nextPage, nextPageSize);
+      const result = await listReviewRules(1, 1000);
       if (result.code !== 0) {
         messageApi.error(result.message || "获取规则列表失败");
         return;
       }
       setItems(result.data.items);
-      setPage(result.data.page);
-      setPageSize(result.data.page_size);
-      setTotal(result.data.total);
     } catch {
       messageApi.error("规则列表加载失败，请稍后重试");
     } finally {
       setLoading(false);
     }
-  }, [currentUser?.role, messageApi, page, pageSize]);
+  }, [currentUser?.role, messageApi]);
 
   useEffect(() => {
-    const timer = window.setTimeout(() => {
-      void loadRules();
-    }, 0);
-
+    const timer = window.setTimeout(() => void loadRules(), 0);
     return () => window.clearTimeout(timer);
   }, [loadRules]);
 
   useEffect(() => {
     if (!editingRule) {
-      form.setFieldsValue({
-        contract_type: "all",
-        risk_level: "medium",
-        is_active: true,
-      });
+      form.setFieldsValue({ contract_type: "all", risk_level: "medium", is_active: true });
       return;
     }
-
     form.setFieldsValue({
       name: editingRule.name,
       keyword: editingRule.keyword,
@@ -126,6 +153,105 @@ export default function RulesPage() {
     });
   }, [editingRule, form]);
 
+  const filteredItems = useMemo(() => {
+    let result = items;
+    if (selectedCategory !== ALL_KEY) {
+      if (selectedCategory.startsWith("contract:")) {
+        const contractType = selectedCategory.replace("contract:", "");
+        result = result.filter((item) => item.contract_type === contractType);
+      } else if (selectedCategory.startsWith("risk:")) {
+        const riskLevel = selectedCategory.replace("risk:", "");
+        result = result.filter((item) => item.risk_level === riskLevel);
+      }
+    }
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (item) =>
+          item.name.toLowerCase().includes(q) ||
+          item.keyword.toLowerCase().includes(q) ||
+          (item.rule_code ?? "").toLowerCase().includes(q) ||
+          item.description.toLowerCase().includes(q),
+      );
+    }
+    return result;
+  }, [items, selectedCategory, searchQuery]);
+
+  const treeData = useMemo((): DataNode[] => {
+    const contractCounts: Record<string, number> = {};
+    const riskCounts: Record<string, number> = {};
+
+    for (const item of items) {
+      contractCounts[item.contract_type] = (contractCounts[item.contract_type] || 0) + 1;
+      riskCounts[item.risk_level] = (riskCounts[item.risk_level] || 0) + 1;
+    }
+
+    const contractChildren: DataNode[] = Object.entries(contractTypeLabelMap)
+      .filter(([key]) => contractCounts[key])
+      .map(([key, label]) => ({
+        key: `contract:${key}`,
+        title: (
+          <Space>
+            <span>{label}</span>
+            <Tag color="default" style={{ margin: 0 }}>{contractCounts[key] ?? 0}</Tag>
+          </Space>
+        ),
+      }));
+
+    const riskChildren: DataNode[] = Object.entries(riskLevelLabelMap)
+      .filter(([key]) => riskCounts[key])
+      .map(([key, label]) => ({
+        key: `risk:${key}`,
+        title: (
+          <Space>
+            <span>{label}</span>
+            <Tag color={key === "high" ? "red" : key === "medium" ? "gold" : "blue"} style={{ margin: 0 }}>{riskCounts[key] ?? 0}</Tag>
+          </Space>
+        ),
+      }));
+
+    return [
+      {
+        key: ALL_KEY,
+        title: (
+          <Space>
+            <span>全部规则</span>
+            <Tag color="blue" style={{ margin: 0 }}>{items.length}</Tag>
+          </Space>
+        ),
+        children: [
+          { key: "group-contract", title: <strong style={{ color: "#1677ff" }}>按合同类型</strong>, children: contractChildren, selectable: false },
+          { key: "group-risk", title: <strong style={{ color: "#1677ff" }}>按风险等级</strong>, children: riskChildren, selectable: false },
+        ],
+      },
+    ];
+  }, [items]);
+
+  const handleTreeSelect = (_selectedKeys: React.Key[], info: { node: DataNode }) => {
+    const key = info.node.key as string;
+    if (!key.startsWith("group-")) {
+      setSelectedCategory(key);
+    }
+  };
+
+  const handleOpenDrawer = (rule?: ReviewRuleItem) => {
+    if (rule) {
+      setEditingId(rule.id);
+    } else {
+      setEditingId(null);
+      form.resetFields();
+      form.setFieldsValue({ contract_type: "all", risk_level: "medium", is_active: true });
+    }
+    setDrawerOpen(true);
+  };
+
+  const handleCloseDrawer = () => {
+    setDrawerOpen(false);
+    setEditingId(null);
+    form.resetFields();
+    form.setFieldsValue({ contract_type: "all", risk_level: "medium", is_active: true });
+  };
+
   const handleSubmit = async (values: ReviewRuleFormValues) => {
     setSubmitting(true);
     try {
@@ -145,10 +271,8 @@ export default function RulesPage() {
         return;
       }
       messageApi.success(editingRule ? "规则已更新" : "规则已创建");
-      setEditingId(null);
-      form.resetFields();
-      form.setFieldsValue({ contract_type: "all", risk_level: "medium", is_active: true });
-      await loadRules(page, pageSize);
+      handleCloseDrawer();
+      await loadRules();
     } catch {
       messageApi.error("保存规则失败，请稍后重试");
     } finally {
@@ -165,10 +289,7 @@ export default function RulesPage() {
         return;
       }
       messageApi.success(checked ? "规则已启用" : "规则已停用");
-      await loadRules(page, pageSize);
-      if (editingId === item.id) {
-        setEditingId(item.id);
-      }
+      await loadRules();
     } catch {
       messageApi.error("更新规则状态失败，请稍后重试");
     } finally {
@@ -185,12 +306,7 @@ export default function RulesPage() {
         return;
       }
       messageApi.success("规则已删除");
-      await loadRules(page, pageSize);
-      if (editingId === ruleId) {
-        setEditingId(null);
-        form.resetFields();
-        form.setFieldsValue({ contract_type: "all", risk_level: "medium", is_active: true });
-      }
+      await loadRules();
     } catch {
       messageApi.error("删除规则失败，请稍后重试");
     } finally {
@@ -207,7 +323,7 @@ export default function RulesPage() {
         return;
       }
       messageApi.success("规则已发布到生产可用集合");
-      await loadRules(page, pageSize);
+      await loadRules();
     } catch (error) {
       messageApi.error(error instanceof Error ? error.message : "规则发布失败，请稍后重试");
     } finally {
@@ -224,7 +340,7 @@ export default function RulesPage() {
         return;
       }
       messageApi.success("规则已从生产可用集合移除");
-      await loadRules(page, pageSize);
+      await loadRules();
     } catch (error) {
       messageApi.error(error instanceof Error ? error.message : "规则下线失败，请稍后重试");
     } finally {
@@ -247,7 +363,7 @@ export default function RulesPage() {
         return;
       }
       messageApi.success("规则已回滚为新版本");
-      await loadRules(page, pageSize);
+      await loadRules();
     } catch (error) {
       messageApi.error(error instanceof Error ? error.message : "规则回滚失败，请稍后重试");
     } finally {
@@ -255,228 +371,183 @@ export default function RulesPage() {
     }
   };
 
-  const handleTableChange = (pagination: TablePaginationConfig) => {
-    const nextPage = pagination.current ?? 1;
-    const nextPageSize = pagination.pageSize ?? pageSize;
-    setLoading(true);
-    void loadRules(nextPage, nextPageSize);
+  const getCategoryLabel = () => {
+    if (selectedCategory === ALL_KEY) return "全部规则";
+    if (selectedCategory.startsWith("contract:")) {
+      return contractTypeLabelMap[selectedCategory.replace("contract:", "")] ?? "合同类型";
+    }
+    if (selectedCategory.startsWith("risk:")) {
+      return riskLevelLabelMap[selectedCategory.replace("risk:", "")] ?? "风险等级";
+    }
+    return "规则列表";
   };
 
-  const columns: ColumnsType<ReviewRuleItem> = [
-    {
-      title: "规则名称",
-      dataIndex: "name",
-      key: "name",
-      width: 180,
-    },
-    {
-      title: "关键词",
-      dataIndex: "keyword",
-      key: "keyword",
-      width: 140,
-    },
-    {
-      title: "规则编号",
-      dataIndex: "rule_code",
-      key: "rule_code",
-      width: 180,
-      render: (value: string | null) => value ? <Text code>{value}</Text> : "-",
-    },
-    {
-      title: "合同类型",
-      dataIndex: "contract_type",
-      key: "contract_type",
-      width: 140,
-      render: (value: string) => contractTypeOptions.find((item) => item.value === value)?.label ?? value,
-    },
-    {
-      title: "风险等级",
-      dataIndex: "risk_level",
-      key: "risk_level",
-      width: 120,
-      render: (value: string) => getRiskLevelTag(value),
-    },
-    {
-      title: "发布状态",
-      key: "publish_status",
-      width: 180,
-      render: (_, item) => (
-        <Space orientation="vertical" size={2}>
-          <Tag color={item.published_at ? "green" : "default"}>{item.published_at ? "已发布" : "未发布"}</Tag>
-          <Text type="secondary" style={{ fontSize: 12 }}>
-            {item.published_at ? formatDateTime(item.published_at) : "需治理批准后发布"}
-          </Text>
-        </Space>
-      ),
-    },
-    {
-      title: "状态",
-      dataIndex: "is_active",
-      key: "is_active",
-      width: 120,
-      render: (value: boolean) => <Tag color={value ? "green" : "default"}>{value ? "启用中" : "已停用"}</Tag>,
-    },
-    {
-      title: "更新时间",
-      dataIndex: "updated_at",
-      key: "updated_at",
-      width: 180,
-      render: (value: string) => formatDateTime(value),
-    },
-    {
-      title: "操作",
-      key: "actions",
-      width: 220,
-      render: (_, item) => (
-        <Space>
-          <Button size="small" onClick={() => setEditingId(item.id)}>
-            编辑
-          </Button>
-          {item.published_at ? (
-            <Button size="small" loading={publishingId === item.id} onClick={() => void handleUnpublish(item)}>
-              下线
-            </Button>
-          ) : (
-            <Button size="small" type="primary" loading={publishingId === item.id} onClick={() => void handlePublish(item)}>
-              发布
-            </Button>
-          )}
-          {item.version_count > 1 ? (
-            <Button size="small" loading={rollbackingId === item.id} onClick={() => void handleRollback(item)}>
-              回滚
-            </Button>
-          ) : null}
-          <Switch
-            checked={item.is_active}
-            loading={statusChangingId === item.id}
-            checkedChildren="启用"
-            unCheckedChildren="停用"
-            onChange={(checked) => void handleToggleStatus(item, checked)}
-          />
-          <Popconfirm title="确认删除这个规则？" okText="删除" cancelText="取消" onConfirm={() => void handleDelete(item.id)}>
-            <Button danger size="small" loading={deletingId === item.id}>
-              删除
-            </Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ];
-
   if (currentUser?.role !== "admin") {
     return (
-      <main className="page-shell review-history-page">
+      <main className="page-shell rules-page">
         {contextHolder}
-        <Card className="review-list-card">
-          <Alert title="仅管理员可管理审查规则。" type="warning" showIcon />
-        </Card>
+        <div style={{ padding: 48, textAlign: "center" }}>
+          <Text type="secondary">仅管理员可管理审查规则。</Text>
+        </div>
       </main>
     );
   }
 
   return (
-    <main className="page-shell review-page-grid">
+    <main className="page-shell rules-page">
       {contextHolder}
-      <Space orientation="vertical" size="large" style={{ width: "100%" }}>
-        <section className="review-page-hero">
-          <div className="review-page-hero-copy">
-            <span className="landing-badge">Rule Management</span>
-            <Title level={2}>维护审查规则，直接影响风险识别。</Title>
-            <Text type="secondary">左侧编辑规则，右侧查看启停状态和命中依据，规则变更更容易复核。</Text>
-          </div>
-          <Card className="review-side-card" variant="borderless">
-            <span className="landing-panel-eyebrow">Admin Workspace</span>
-            <Title level={4} style={{ margin: 0, color: "inherit" }}>
-              规则节奏
-            </Title>
-            <ul className="review-page-tip-list">
-              <li>先配置关键词规则，再发起合同审查。</li>
-              <li>支持按合同类型区分规则。</li>
-              <li>停用规则后不再参与后续审查匹配。</li>
-            </ul>
-
-            <Alert showIcon type="info" title="权限边界：member 消费审查结果，admin 负责规则配置与维护。" />
-          </Card>
-        </section>
-
-        <div className="chat-layout-grid chat-layout-grid-history">
-          <Card className="review-surface-card" title={editingRule ? "编辑规则" : "新建规则"}>
-            <Form form={form} layout="vertical" onFinish={handleSubmit} initialValues={{ contract_type: "all", risk_level: "medium", is_active: true }}>
-              <Form.Item label="规则名称" name="name" rules={[{ required: true, message: "请输入规则名称" }]}>
-                <Input placeholder="例如：自动续约预警" />
-              </Form.Item>
-              <Form.Item label="关键词" name="keyword" rules={[{ required: true, message: "请输入关键词" }]}>
-                <Input placeholder="例如：自动续约" />
-              </Form.Item>
-              <Form.Item label="合同类型" name="contract_type" rules={[{ required: true, message: "请选择合同类型" }]}>
-                <Select options={contractTypeOptions} />
-              </Form.Item>
-              <Form.Item label="风险等级" name="risk_level" rules={[{ required: true, message: "请选择风险等级" }]}>
-                <Select options={riskLevelOptions} />
-              </Form.Item>
-              <Form.Item label="风险描述" name="description" rules={[{ required: true, message: "请输入风险描述" }]}>
-                <Input.TextArea rows={4} placeholder="说明为什么这是风险点" />
-              </Form.Item>
-              <Form.Item label="审查建议" name="suggestion">
-                <Input.TextArea rows={3} placeholder="例如：补充通知期限和终止条件" />
-              </Form.Item>
-              <Form.Item label="法律依据" name="legal_basis">
-                <Input.TextArea rows={3} placeholder="例如：《民法典》相关规则" />
-              </Form.Item>
-              <Form.Item label="启用状态" name="is_active" valuePropName="checked">
-                <Switch checkedChildren="启用" unCheckedChildren="停用" />
-              </Form.Item>
-              <Space style={{ width: "100%" }}>
-                <Button type="primary" htmlType="submit" loading={submitting}>
-                  {editingRule ? "保存规则" : "创建规则"}
-                </Button>
-                {editingRule ? (
-                  <Button
-                    onClick={() => {
-                      setEditingId(null);
-                      form.resetFields();
-                      form.setFieldsValue({ contract_type: "all", risk_level: "medium", is_active: true });
-                    }}
-                  >
-                    取消编辑
-                  </Button>
-                ) : null}
-              </Space>
-            </Form>
-          </Card>
-
-          <Card className="review-surface-card" title="规则列表">
-            <Table
-              rowKey="id"
-              dataSource={items}
-              loading={loading}
-              pagination={{ current: page, pageSize, total, showSizeChanger: true }}
-              locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="还没有审查规则。" /> }}
-              columns={columns}
-              onChange={handleTableChange}
-              expandable={{
-                expandedRowRender: (item) => (
-                  <Space orientation="vertical" size="small" style={{ width: "100%" }}>
-                    <div>
-                      <strong>风险描述：</strong>
-                      <div>{item.description}</div>
-                    </div>
-                    <div>
-                      <strong>审查建议：</strong>
-                      <div>{item.suggestion || "-"}</div>
-                    </div>
-                    <div>
-                      <strong>法律依据：</strong>
-                      <div>{item.legal_basis || "-"}</div>
-                    </div>
-                  </Space>
-                ),
-              }}
-              scroll={{ x: 1440 }}
+      <div className="doc-layout-shell">
+        {/* 左侧树形菜单 */}
+        <aside className="doc-sidebar">
+          <Input
+            allowClear
+            prefix={<SearchOutlined />}
+            placeholder="搜索规则名称/关键词"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="doc-sidebar-search"
+          />
+          <div className="doc-sidebar-tree">
+            <Tree
+              showIcon={false}
+              switcherIcon={({ expanded }) => (expanded ? <CaretDownOutlined /> : <CaretRightOutlined />)}
+              treeData={treeData}
+              expandedKeys={expandedKeys}
+              selectedKeys={[selectedCategory]}
+              onExpand={setExpandedKeys}
+              onSelect={(_keys, info) => handleTreeSelect(_keys, info)}
+              blockNode
             />
-          </Card>
-        </div>
-      </Space>
+          </div>
+        </aside>
+
+        {/* 右侧规则列表 */}
+        <section className="doc-main-content">
+          <div className="doc-content-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <div>
+              <Title level={2} style={{ margin: 0 }}>{getCategoryLabel()}</Title>
+              <Text type="secondary">{filteredItems.length} 条规则</Text>
+            </div>
+            <Button type="primary" icon={<PlusOutlined />} onClick={() => handleOpenDrawer()}>
+              新建规则
+            </Button>
+          </div>
+
+          {loading ? (
+            <div className="doc-loading-panel">
+              <Spin />
+              <Text type="secondary">正在加载规则列表...</Text>
+            </div>
+          ) : filteredItems.length > 0 ? (
+            <List
+              dataSource={filteredItems}
+              renderItem={(item) => (
+                <List.Item className="doc-list-item" style={{ flexDirection: "column", alignItems: "stretch" }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <Space wrap size={[6, 4]}>
+                        <span className="doc-item-name">{item.name}</span>
+                        <Tag color={item.is_active ? "green" : "default"}>{item.is_active ? "启用" : "停用"}</Tag>
+                        <Tag color={item.published_at ? "blue" : "default"}>{item.published_at ? "已发布" : "未发布"}</Tag>
+                        {item.rule_code && <Text code>{item.rule_code}</Text>}
+                      </Space>
+                      <div style={{ marginTop: 4 }}>
+                        <Space wrap size={[4, 4]}>
+                          <Tag color="orange">关键词：{item.keyword}</Tag>
+                          <Tag>{contractTypeLabelMap[item.contract_type] ?? item.contract_type}</Tag>
+                          {getRiskLevelTag(item.risk_level)}
+                          <Tag>v{item.current_version_label}</Tag>
+                        </Space>
+                      </div>
+                      {item.description && (
+                        <Paragraph type="secondary" ellipsis={{ rows: 1 }} style={{ margin: "4px 0 0" }}>
+                          {item.description}
+                        </Paragraph>
+                      )}
+                    </div>
+                    <Space style={{ marginLeft: 16, flexShrink: 0 }}>
+                      <Switch
+                        size="small"
+                        checked={item.is_active}
+                        loading={statusChangingId === item.id}
+                        onChange={(checked) => void handleToggleStatus(item, checked)}
+                      />
+                      <Button size="small" onClick={() => handleOpenDrawer(item)}>
+                        编辑
+                      </Button>
+                      {item.published_at ? (
+                        <Button size="small" loading={publishingId === item.id} onClick={() => void handleUnpublish(item)}>
+                          下线
+                        </Button>
+                      ) : (
+                        <Button size="small" type="primary" loading={publishingId === item.id} onClick={() => void handlePublish(item)}>
+                          发布
+                        </Button>
+                      )}
+                      {item.version_count > 1 && (
+                        <Button size="small" loading={rollbackingId === item.id} onClick={() => void handleRollback(item)}>
+                          回滚
+                        </Button>
+                      )}
+                      <Popconfirm title="确认删除这个规则？" okText="删除" cancelText="取消" onConfirm={() => void handleDelete(item.id)}>
+                        <Button danger size="small" loading={deletingId === item.id}>
+                          删除
+                        </Button>
+                      </Popconfirm>
+                    </Space>
+                  </div>
+                </List.Item>
+              )}
+            />
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有匹配的规则">
+              <Button onClick={() => { setSearchQuery(""); setSelectedCategory(ALL_KEY); }}>清空筛选</Button>
+            </Empty>
+          )}
+        </section>
+      </div>
+
+      {/* 新建/编辑规则抽屉 */}
+      <Drawer
+        title={editingRule ? "编辑规则" : "新建规则"}
+        open={drawerOpen}
+        onClose={handleCloseDrawer}
+        width={560}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical" onFinish={handleSubmit} initialValues={{ contract_type: "all", risk_level: "medium", is_active: true }}>
+          <Form.Item label="规则名称" name="name" rules={[{ required: true, message: "请输入规则名称" }]}>
+            <Input placeholder="例如：自动续约预警" />
+          </Form.Item>
+          <Form.Item label="关键词" name="keyword" rules={[{ required: true, message: "请输入关键词" }]}>
+            <Input placeholder="例如：自动续约" />
+          </Form.Item>
+          <Form.Item label="合同类型" name="contract_type" rules={[{ required: true, message: "请选择合同类型" }]}>
+            <Select options={contractTypeOptions} />
+          </Form.Item>
+          <Form.Item label="风险等级" name="risk_level" rules={[{ required: true, message: "请选择风险等级" }]}>
+            <Select options={[{ value: "high", label: "高风险" }, { value: "medium", label: "中风险" }, { value: "low", label: "低风险" }]} />
+          </Form.Item>
+          <Form.Item label="风险描述" name="description" rules={[{ required: true, message: "请输入风险描述" }]}>
+            <Input.TextArea rows={3} placeholder="说明为什么这是风险点" />
+          </Form.Item>
+          <Form.Item label="审查建议" name="suggestion">
+            <Input.TextArea rows={2} placeholder="例如：补充通知期限和终止条件" />
+          </Form.Item>
+          <Form.Item label="法律依据" name="legal_basis">
+            <Input.TextArea rows={2} placeholder="例如：《民法典》相关规则" />
+          </Form.Item>
+          <Form.Item label="启用状态" name="is_active" valuePropName="checked">
+            <Switch checkedChildren="启用" unCheckedChildren="停用" />
+          </Form.Item>
+          <Space>
+            <Button type="primary" htmlType="submit" loading={submitting}>
+              {editingRule ? "保存规则" : "创建规则"}
+            </Button>
+            <Button onClick={handleCloseDrawer}>取消</Button>
+          </Space>
+        </Form>
+      </Drawer>
     </main>
   );
 }