diff --git a/frontend/src/app/templates/page.tsx b/frontend/src/app/templates/page.tsx
index b530145a..d924175c 100644
--- a/frontend/src/app/templates/page.tsx
+++ b/frontend/src/app/templates/page.tsx
@@ -1,8 +1,30 @@
-"use client";
+"use client";
 
-import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
-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,
+  MinusCircleOutlined,
+  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 {
@@ -18,7 +40,12 @@ import {
   updateTemplateStatus,
 } from "@/services/template";
 import { useAuthStore } from "@/stores/auth.store";
-import { formatIndustryCategory, formatTemplateCategory, industryCategoryOptions, templateCategoryOptions } from "@/lib/template-taxonomy";
+import {
+  formatIndustryCategory,
+  formatTemplateCategory,
+  industryCategoryOptions,
+  templateCategoryOptions,
+} from "@/lib/template-taxonomy";
 import type { TemplateItem, TemplateVersionItem } from "@/types/api";
 
 const { Title, Text, Paragraph } = Typography;
@@ -48,10 +75,16 @@ const contractTypeOptions = [
   { value: "nda", label: "保密协议" },
 ];
 
+const contractTypeLabelMap: Record<string, string> = {
+  labor: "劳动合同",
+  procurement: "采购合同",
+  sales: "销售合同",
+  service: "服务合同",
+  nda: "保密协议",
+};
+
 function formatDateTime(value?: string | null) {
-  if (!value) {
-    return "-";
-  }
+  if (!value) return "-";
   return new Date(value).toLocaleString("zh-CN", { hour12: false });
 }
 
@@ -59,54 +92,29 @@ function buildVariablesJson(values: TemplateFormValues) {
   const variables = (values.variables ?? [])
     .map((item) => {
       const name = item.name?.trim();
-      if (!name) {
-        return null;
-      }
-      return {
-        name,
-        label: item.label?.trim() || name,
-      };
+      if (!name) return null;
+      return { name, label: item.label?.trim() || name };
     })
     .filter((item): item is { name: string; label: string } => item !== null);
 
-  if (!variables.length) {
-    return undefined;
-  }
-
+  if (!variables.length) return undefined;
   return JSON.stringify(variables);
 }
 
 function getInitialVariables(template?: TemplateItem | null): TemplateVariableFormValue[] {
   if (template?.variables.length) {
-    return template.variables.map((item) => ({
-      name: item.name,
-      label: item.label,
-    }));
+    return template.variables.map((item) => ({ name: item.name, label: item.label }));
   }
   return [{}];
 }
 
-function formatVariablesPreview(values?: TemplateVariableFormValue[]) {
-  const variables = (values ?? [])
-    .map((item) => {
-      const name = item.name?.trim();
-      if (!name) {
-        return null;
-      }
-      return {
-        name,
-        label: item.label?.trim() || name,
-      };
-    })
-    .filter((item): item is { name: string; label: string } => item !== null);
-
-  return JSON.stringify(variables, null, 2);
-}
+const ALL_KEY = "__all__";
 
 export default function TemplatesPage() {
   const [messageApi, contextHolder] = message.useMessage();
   const currentUser = useAuthStore((state) => state.currentUser);
   const [form] = Form.useForm<TemplateFormValues>();
+
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [seeding, setSeeding] = useState(false);
@@ -114,86 +122,47 @@ export default function TemplatesPage() {
   const [statusChangingId, setStatusChangingId] = useState<string | null>(null);
   const [publishingId, setPublishingId] = useState<string | null>(null);
   const [rollbackingId, setRollbackingId] = useState<string | null>(null);
+
   const [items, setItems] = useState<TemplateItem[]>([]);
   const [editingId, setEditingId] = useState<string | null>(null);
-  const [contractTypeFilter, setContractTypeFilter] = useState<string | undefined>(undefined);
-  const [templateCategoryFilter, setTemplateCategoryFilter] = useState<string | undefined>(undefined);
-  const [industryCategoryFilter, setIndustryCategoryFilter] = useState<string | undefined>(undefined);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-  const [total, setTotal] = useState(0);
-  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
-  const [versionLoadingId, setVersionLoadingId] = useState<string | null>(null);
-  const [versionHistoryMap, setVersionHistoryMap] = useState<Record<string, TemplateVersionItem[]>>({});
+  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 [versionDrawerOpen, setVersionDrawerOpen] = useState(false);
+  const [versionLoading, setVersionLoading] = useState(false);
+  const [versionHistory, setVersionHistory] = useState<TemplateVersionItem[]>([]);
+  const [versionTemplate, setVersionTemplate] = useState<TemplateItem | null>(null);
+  const [rollbackingVersion, setRollbackingVersion] = useState<string | null>(null);
 
   const editingTemplate = useMemo(() => items.find((item) => item.id === editingId) ?? null, [editingId, items]);
   const watchedVariables = Form.useWatch("variables", form);
-  const variablePreview = useMemo(() => formatVariablesPreview(watchedVariables), [watchedVariables]);
 
-  const loadTemplates = useCallback(
-    async (
-      nextPage = page,
-      nextPageSize = pageSize,
-      nextContractType = contractTypeFilter,
-      nextTemplateCategory = templateCategoryFilter,
-      nextIndustryCategory = industryCategoryFilter,
-    ) => {
-      if (currentUser?.role !== "admin") {
-        setLoading(false);
+  const loadTemplates = useCallback(async () => {
+    if (currentUser?.role !== "admin") {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const result = await listTemplatesWithFilters({ page: 1, pageSize: 1000 });
+      if (result.code !== 0) {
+        messageApi.error(result.message || "获取模板列表失败");
         return;
       }
-
-      try {
-        const result = await listTemplatesWithFilters({
-          page: nextPage,
-          pageSize: nextPageSize,
-          contractType: nextContractType,
-          templateCategory: nextTemplateCategory,
-          industryCategory: nextIndustryCategory,
-        });
-        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);
-      }
-    },
-    [contractTypeFilter, currentUser?.role, industryCategoryFilter, messageApi, page, pageSize, templateCategoryFilter],
-  );
-
-  const loadTemplateVersions = useCallback(
-    async (templateId: string) => {
-      if (versionHistoryMap[templateId]) {
-        return;
-      }
-      setVersionLoadingId(templateId);
-      try {
-        const result = await getTemplateVersions(templateId);
-        if (result.code !== 0) {
-          messageApi.error(result.message || "获取模板版本历史失败");
-          return;
-        }
-        setVersionHistoryMap((current) => ({ ...current, [templateId]: result.data.items }));
-      } catch {
-        messageApi.error("模板版本历史加载失败，请稍后重试");
-      } finally {
-        setVersionLoadingId(null);
-      }
-    },
-    [messageApi, versionHistoryMap],
-  );
+      setItems(result.data.items);
+    } catch {
+      messageApi.error("模板列表加载失败，请稍后重试");
+    } finally {
+      setLoading(false);
+    }
+  }, [currentUser?.role, messageApi]);
 
   useEffect(() => {
-    const timer = window.setTimeout(() => {
-      void loadTemplates();
-    }, 0);
+    const timer = window.setTimeout(() => void loadTemplates(), 0);
     return () => window.clearTimeout(timer);
   }, [loadTemplates]);
 
@@ -203,7 +172,6 @@ export default function TemplatesPage() {
       form.setFieldsValue({ enabled: true, variables: [{}], change_summary: undefined });
       return;
     }
-
     form.setFieldsValue({
       name: editingTemplate.name,
       contract_type: editingTemplate.contract_type ?? undefined,
@@ -217,6 +185,129 @@ export default function TemplatesPage() {
     });
   }, [editingTemplate, 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("template:")) {
+        const templateCategory = selectedCategory.replace("template:", "");
+        result = result.filter((item) => item.template_category === templateCategory);
+      } else if (selectedCategory.startsWith("industry:")) {
+        const industryCategory = selectedCategory.replace("industry:", "");
+        result = result.filter((item) => item.industry_category === industryCategory);
+      }
+    }
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (item) =>
+          item.name.toLowerCase().includes(q) ||
+          (item.template_code ?? "").toLowerCase().includes(q) ||
+          (item.description ?? "").toLowerCase().includes(q),
+      );
+    }
+    return result;
+  }, [items, selectedCategory, searchQuery]);
+
+  const treeData = useMemo((): DataNode[] => {
+    const contractCounts: Record<string, number> = {};
+    const templateCounts: Record<string, number> = {};
+    const industryCounts: Record<string, number> = {};
+
+    for (const item of items) {
+      if (item.contract_type) {
+        contractCounts[item.contract_type] = (contractCounts[item.contract_type] || 0) + 1;
+      }
+      if (item.template_category) {
+        templateCounts[item.template_category] = (templateCounts[item.template_category] || 0) + 1;
+      }
+      if (item.industry_category) {
+        industryCounts[item.industry_category] = (industryCounts[item.industry_category] || 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 templateChildren: DataNode[] = templateCategoryOptions
+      .filter((opt) => templateCounts[opt.value])
+      .map((opt) => ({
+        key: `template:${opt.value}`,
+        title: (
+          <Space>
+            <span>{opt.label}</span>
+            <Tag color="default" style={{ margin: 0 }}>{templateCounts[opt.value] ?? 0}</Tag>
+          </Space>
+        ),
+      }));
+
+    const industryChildren: DataNode[] = industryCategoryOptions
+      .filter((opt) => industryCounts[opt.value])
+      .map((opt) => ({
+        key: `industry:${opt.value}`,
+        title: (
+          <Space>
+            <span>{opt.label}</span>
+            <Tag color="default" style={{ margin: 0 }}>{industryCounts[opt.value] ?? 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-template", title: <strong style={{ color: "#1677ff" }}>按模板分类</strong>, children: templateChildren, selectable: false },
+          { key: "group-industry", title: <strong style={{ color: "#1677ff" }}>按行业入口</strong>, children: industryChildren, selectable: false },
+        ],
+      },
+    ];
+  }, [items]);
+
+  const handleTreeSelect = (_selectedKeys: React.Key[], info: { node: DataNode }) => {
+    const key = info.node.key as string;
+    if (!key.startsWith("group-")) {
+      setSelectedCategory(key);
+      setExpandedKeys((prev) => (prev.includes(key) ? prev : [...prev, key]));
+    }
+  };
+
+  const handleOpenDrawer = (template?: TemplateItem) => {
+    if (template) {
+      setEditingId(template.id);
+    } else {
+      setEditingId(null);
+      form.resetFields();
+      form.setFieldsValue({ enabled: true, variables: [{}], change_summary: undefined });
+    }
+    setDrawerOpen(true);
+  };
+
+  const handleCloseDrawer = () => {
+    setDrawerOpen(false);
+    setEditingId(null);
+    form.resetFields();
+    form.setFieldsValue({ enabled: true, variables: [{}], change_summary: undefined });
+  };
+
   const handleSubmit = async (values: TemplateFormValues) => {
     setSubmitting(true);
     try {
@@ -237,18 +328,8 @@ export default function TemplatesPage() {
         return;
       }
       messageApi.success(editingTemplate ? "模板已更新并生成新版本" : "模板已创建");
-      setEditingId(null);
-      form.resetFields();
-      form.setFieldsValue({ enabled: true, variables: [{}], change_summary: undefined });
-      setVersionHistoryMap((current) => {
-        if (!editingTemplate) {
-          return current;
-        }
-        const next = { ...current };
-        delete next[editingTemplate.id];
-        return next;
-      });
-      await loadTemplates(page, pageSize, contractTypeFilter, templateCategoryFilter, industryCategoryFilter);
+      handleCloseDrawer();
+      await loadTemplates();
     } catch {
       messageApi.error("保存模板失败，请稍后重试");
     } finally {
@@ -261,17 +342,7 @@ export default function TemplatesPage() {
     try {
       await deleteTemplate(templateId);
       messageApi.success("模板已删除");
-      if (editingId === templateId) {
-        setEditingId(null);
-        form.resetFields();
-        form.setFieldsValue({ enabled: true, variables: [{}], change_summary: undefined });
-      }
-      setVersionHistoryMap((current) => {
-        const next = { ...current };
-        delete next[templateId];
-        return next;
-      });
-      await loadTemplates(page, pageSize, contractTypeFilter, templateCategoryFilter, industryCategoryFilter);
+      await loadTemplates();
     } catch {
       messageApi.error("删除模板失败，请稍后重试");
     } finally {
@@ -288,12 +359,7 @@ export default function TemplatesPage() {
         return;
       }
       messageApi.success(enabled ? "模板已启用" : "模板已停用");
-      setVersionHistoryMap((current) => {
-        const next = { ...current };
-        delete next[item.id];
-        return next;
-      });
-      await loadTemplates(page, pageSize, contractTypeFilter, templateCategoryFilter, industryCategoryFilter);
+      await loadTemplates();
     } catch {
       messageApi.error("更新模板状态失败，请稍后重试");
     } finally {
@@ -310,9 +376,7 @@ export default function TemplatesPage() {
         return;
       }
       messageApi.success(`默认模板初始化完成：新增 ${result.data.created_count} 个，已存在 ${result.data.existing_count} 个`);
-      setVersionHistoryMap({});
-      setLoading(true);
-      await loadTemplates(1, pageSize, contractTypeFilter, templateCategoryFilter, industryCategoryFilter);
+      await loadTemplates();
     } catch {
       messageApi.error("初始化默认模板失败，请稍后重试");
     } finally {
@@ -329,7 +393,7 @@ export default function TemplatesPage() {
         return;
       }
       messageApi.success("模板已发布到生产可用集合");
-      await loadTemplates(page, pageSize, contractTypeFilter, templateCategoryFilter, industryCategoryFilter);
+      await loadTemplates();
     } catch (error) {
       messageApi.error(error instanceof Error ? error.message : "模板发布失败，请稍后重试");
     } finally {
@@ -346,7 +410,7 @@ export default function TemplatesPage() {
         return;
       }
       messageApi.success("模板已从生产可用集合移除");
-      await loadTemplates(page, pageSize, contractTypeFilter, templateCategoryFilter, industryCategoryFilter);
+      await loadTemplates();
     } catch (error) {
       messageApi.error(error instanceof Error ? error.message : "模板下线失败，请稍后重试");
     } finally {
@@ -354,10 +418,30 @@ export default function TemplatesPage() {
     }
   };
 
-  const handleRollback = async (item: TemplateItem, versionLabel: string) => {
-    setRollbackingId(`${item.id}:${versionLabel}`);
+  const handleViewVersions = async (item: TemplateItem) => {
+    setVersionTemplate(item);
+    setVersionDrawerOpen(true);
+    setVersionLoading(true);
     try {
-      const result = await rollbackTemplate(item.id, {
+      const result = await getTemplateVersions(item.id);
+      if (result.code !== 0) {
+        messageApi.error(result.message || "获取模板版本历史失败");
+        return;
+      }
+      setVersionHistory(result.data.items);
+    } catch {
+      messageApi.error("模板版本历史加载失败，请稍后重试");
+    } finally {
+      setVersionLoading(false);
+    }
+  };
+
+  const handleRollback = async (versionLabel: string) => {
+    if (!versionTemplate) return;
+    const rollbackKey = `${versionTemplate.id}:${versionLabel}`;
+    setRollbackingVersion(rollbackKey);
+    try {
+      const result = await rollbackTemplate(versionTemplate.id, {
         target_version_label: versionLabel,
         change_summary: `Rollback to ${versionLabel}`,
       });
@@ -366,457 +450,271 @@ export default function TemplatesPage() {
         return;
       }
       messageApi.success(`模板已回滚为新版本，来源 ${versionLabel}`);
-      setVersionHistoryMap((current) => {
-        const next = { ...current };
-        delete next[item.id];
-        return next;
-      });
-      await loadTemplates(page, pageSize, contractTypeFilter, templateCategoryFilter, industryCategoryFilter);
-      await loadTemplateVersions(item.id);
+      await loadTemplates();
+      await handleViewVersions(versionTemplate);
     } catch (error) {
       messageApi.error(error instanceof Error ? error.message : "模板回滚失败，请稍后重试");
     } finally {
-      setRollbackingId(null);
+      setRollbackingVersion(null);
     }
   };
 
-  const handleTableChange = (pagination: TablePaginationConfig) => {
-    const nextPage = pagination.current ?? 1;
-    const nextPageSize = pagination.pageSize ?? pageSize;
-    setLoading(true);
-    void loadTemplates(nextPage, nextPageSize, contractTypeFilter, templateCategoryFilter, industryCategoryFilter);
-  };
-
-  const handleExpand = (expanded: boolean, record: TemplateItem) => {
-    const nextKeys = expanded ? Array.from(new Set([...expandedRowKeys, record.id])) : expandedRowKeys.filter((key) => key !== record.id);
-    setExpandedRowKeys(nextKeys);
-    if (expanded) {
-      void loadTemplateVersions(record.id);
+  const getCategoryLabel = () => {
+    if (selectedCategory === ALL_KEY) return "全部模板";
+    if (selectedCategory.startsWith("contract:")) {
+      return contractTypeLabelMap[selectedCategory.replace("contract:", "")] ?? "合同类型";
     }
+    if (selectedCategory.startsWith("template:")) {
+      return formatTemplateCategory(selectedCategory.replace("template:", ""));
+    }
+    if (selectedCategory.startsWith("industry:")) {
+      return formatIndustryCategory(selectedCategory.replace("industry:", ""));
+    }
+    return "模板列表";
   };
 
-  const buildVersionColumns = (templateId: string): ColumnsType<TemplateVersionItem> => [
-    {
-      title: "版本",
-      dataIndex: "version_label",
-      key: "version_label",
-      width: 120,
-      render: (value, item) => (
-        <Space>
-          <Tag color={item.is_current ? "green" : "default"}>{value}</Tag>
-          {item.is_current ? <Tag color="blue">当前</Tag> : null}
-        </Space>
-      ),
-    },
-    {
-      title: "变更说明",
-      dataIndex: "change_summary",
-      key: "change_summary",
-      render: (value: string | null) => value || "-",
-    },
-    {
-      title: "模板分类",
-      dataIndex: "template_category",
-      key: "template_category",
-      width: 160,
-      render: (value: string | null) => formatTemplateCategory(value),
-    },
-    {
-      title: "行业入口",
-      dataIndex: "industry_category",
-      key: "industry_category",
-      width: 160,
-      render: (value: string | null) => formatIndustryCategory(value),
-    },
-    {
-      title: "操作人",
-      dataIndex: "created_by_name",
-      key: "created_by_name",
-      width: 140,
-      render: (value: string | null, item) => value || item.created_by || "-",
-    },
-    {
-      title: "时间",
-      dataIndex: "created_at",
-      key: "created_at",
-      width: 180,
-      render: (value: string) => formatDateTime(value),
-    },
-    {
-      title: "操作",
-      key: "actions",
-      width: 120,
-      render: (_, version, index) =>
-        index > 0 ? (
-          <Button
-            size="small"
-            loading={rollbackingId === `${templateId}:${version.version_label}`}
-            onClick={() => {
-              const targetTemplate = items.find((entry) => entry.id === templateId);
-              if (targetTemplate) {
-                void handleRollback(targetTemplate, version.version_label);
-              }
-            }}
-          >
-            回滚到此版本
-          </Button>
-        ) : null,
-    },
-  ];
-
-  const columns: ColumnsType<TemplateItem> = [
-    { title: "模板名称", dataIndex: "name", key: "name", width: 200 },
-    {
-      title: "合同类型",
-      dataIndex: "contract_type",
-      key: "contract_type",
-      width: 140,
-      render: (value: string | null) => contractTypeOptions.find((item) => item.value === value)?.label ?? value ?? "未分类",
-    },
-    {
-      title: "模板分类",
-      dataIndex: "template_category",
-      key: "template_category",
-      width: 160,
-      render: (value: string | null) => formatTemplateCategory(value),
-    },
-    {
-      title: "行业入口",
-      dataIndex: "industry_category",
-      key: "industry_category",
-      width: 160,
-      render: (value: string | null) => formatIndustryCategory(value),
-    },
-    {
-      title: "模板编号",
-      dataIndex: "template_code",
-      key: "template_code",
-      width: 170,
-      render: (value: string | null) => value ? <Text code>{value}</Text> : "-",
-    },
-    {
-      title: "当前版本",
-      dataIndex: "current_version_label",
-      key: "current_version_label",
-      width: 160,
-      render: (value: string, item) => (
-        <Space orientation="vertical" size={2}>
-          <Tag color="blue">{value}</Tag>
-          <Text type="secondary" style={{ fontSize: 12 }}>
-            共 {item.version_count} 个版本
-          </Text>
-        </Space>
-      ),
-    },
-    {
-      title: "最新变更",
-      dataIndex: "latest_change_summary",
-      key: "latest_change_summary",
-      render: (value: string | null) => 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: "enabled",
-      key: "enabled",
-      width: 180,
-      render: (_value: boolean, item) => (
-        <Space>
-          <Tag color={item.enabled ? "green" : "default"}>{item.enabled ? "启用中" : "已停用"}</Tag>
-          <Switch
-            size="small"
-            checked={item.enabled}
-            loading={statusChangingId === item.id}
-            checkedChildren="启用"
-            unCheckedChildren="停用"
-            onChange={(checked) => void handleToggleStatus(item, checked)}
-          />
-        </Space>
-      ),
-    },
-    {
-      title: "更新时间",
-      dataIndex: "updated_at",
-      key: "updated_at",
-      width: 180,
-      render: (value: string) => formatDateTime(value),
-    },
-    {
-      title: "操作",
-      key: "actions",
-      width: 180,
-      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>
-          )}
-          <Popconfirm title="确认删除这个模板？" okText="删除" cancelText="取消" onConfirm={() => void handleDelete(item.id)}>
-            <Button danger size="small" loading={deletingId === item.id}>
-              删除
-            </Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ];
-
-  const templateStats = useMemo(
-    () => ({
-      enabledCount: items.filter((item) => item.enabled).length,
-      disabledCount: items.filter((item) => !item.enabled).length,
-      versionedCount: items.filter((item) => item.version_count > 1).length,
-    }),
-    [items],
-  );
-
   if (currentUser?.role !== "admin") {
     return (
-      <main className="page-shell review-history-page">
+      <main className="page-shell templates-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 templates-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">Template Management</span>
-            <Title level={2}>把模板库做成可维护、可筛选、可追踪的产品资产</Title>
-            <Text type="secondary">
-              这轮把模板管理从“覆盖式编辑”推进到“分类清晰、行业可进、版本可追”。管理员既能维护模板，也能为业务入口准备更清楚的分类结构。
-            </Text>
-            <Space style={{ marginTop: 16 }} wrap>
-              <Button onClick={() => void handleSeedDefaults()} loading={seeding}>
-                一键初始化默认模板
-              </Button>
-              <Text type="secondary">
-                当前模板 {total} 个，已启用 {templateStats.enabledCount} 个，已形成多版本 {templateStats.versionedCount} 个。
-              </Text>
-            </Space>
-          </div>
-          <Card className="review-side-card" variant="borderless">
-            <span className="landing-panel-eyebrow">Phase 1</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={`停用模板 ${templateStats.disabledCount} 个；版本化模板 ${templateStats.versionedCount} 个。`} />
-          </Card>
-        </section>
-
-        <div className="chat-layout-grid chat-layout-grid-history">
-          <Card className="review-surface-card" title={editingTemplate ? "编辑模板" : "新建模板"}>
-            <Form form={form} layout="vertical" onFinish={handleSubmit} initialValues={{ enabled: true, variables: [{}], change_summary: undefined }}>
-              <Form.Item label="模板名称" name="name" rules={[{ required: true, message: "请输入模板名称" }]}>
-                <Input placeholder="例如：采购合同标准模板" />
-              </Form.Item>
-              <Form.Item label="合同类型" name="contract_type">
-                <Select allowClear options={contractTypeOptions} placeholder="可选，未选则视为未分类" />
-              </Form.Item>
-              <Form.Item label="模板分类" name="template_category">
-                <Select allowClear options={templateCategoryOptions as unknown as { label: string; value: string }[]} placeholder="例如：采购供应链 / 合规与保密" />
-              </Form.Item>
-              <Form.Item label="行业入口" name="industry_category">
-                <Select allowClear options={industryCategoryOptions as unknown as { label: string; value: string }[]} placeholder="例如：通用企业 / 科技互联网" />
-              </Form.Item>
-              <Form.Item label="模板说明" name="description">
-                <Input.TextArea rows={3} placeholder="说明适用场景、边界或使用注意事项" />
-              </Form.Item>
-              <Form.Item label="模板正文" name="content" rules={[{ required: true, message: "请输入模板正文" }]}>
-                <Input.TextArea rows={8} placeholder="请输入合同模板正文" />
-              </Form.Item>
-              <Form.Item label={editingTemplate ? "本次变更说明" : "初始版本说明"} name="change_summary">
-                <Input placeholder={editingTemplate ? "例如：补充采购行业分类" : "例如：首次建立采购模板"} />
-              </Form.Item>
-
-              <div className="embedded-panel">
-                <div className="embedded-panel-header">
-                  <strong>变量配置</strong>
-                </div>
-                <Form.List name="variables">
-                  {(fields, { add, remove }) => (
-                    <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-                      {fields.map((field) => (
-                        <Space key={field.key} size="middle" style={{ display: "flex" }} align="start">
-                          <Form.Item label="变量名称" name={[field.name, "name"]} style={{ flex: 1 }}>
-                            <Input placeholder="例如：party_a" />
-                          </Form.Item>
-                          <Form.Item label="显示名称" name={[field.name, "label"]} style={{ flex: 1 }}>
-                            <Input placeholder="例如：甲方名称" />
-                          </Form.Item>
-                          <Button danger icon={<MinusCircleOutlined />} onClick={() => remove(field.name)} disabled={fields.length <= 1} />
-                        </Space>
-                      ))}
-                      <Button icon={<PlusOutlined />} onClick={() => add({})}>
-                        添加变量
-                      </Button>
-                    </Space>
-                  )}
-                </Form.List>
-              </div>
-
-              <div className="embedded-panel">
-                <div className="embedded-panel-header">
-                  <strong>变量 JSON 预览</strong>
-                </div>
-                <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>{variablePreview}</pre>
-              </div>
-
-              <Form.Item label="启用状态" name="enabled" valuePropName="checked" style={{ marginTop: 16 }}>
-                <Switch checkedChildren="启用" unCheckedChildren="停用" />
-              </Form.Item>
-
-              <Space style={{ width: "100%" }}>
-                <Button type="primary" htmlType="submit" loading={submitting}>
-                  {editingTemplate ? "保存并生成新版本" : "创建模板"}
-                </Button>
-                {editingTemplate ? (
-                  <Button
-                    onClick={() => {
-                      setEditingId(null);
-                      form.resetFields();
-                      form.setFieldsValue({ enabled: true, variables: [{}], change_summary: undefined });
-                    }}
-                  >
-                    取消编辑
-                  </Button>
-                ) : null}
-              </Space>
-            </Form>
-          </Card>
-
-          <Card
-            className="review-surface-card"
-            title="模板列表"
-            extra={
-              <Space wrap>
-                <Select
-                  allowClear
-                  style={{ width: 180 }}
-                  options={contractTypeOptions}
-                  placeholder="按合同类型筛选"
-                  value={contractTypeFilter}
-                  onChange={(value) => {
-                    setLoading(true);
-                    setContractTypeFilter(value);
-                    setPage(1);
-                    void loadTemplates(1, pageSize, value, templateCategoryFilter, industryCategoryFilter);
-                  }}
-                />
-                <Select
-                  allowClear
-                  style={{ width: 180 }}
-                  options={templateCategoryOptions as unknown as { label: string; value: string }[]}
-                  placeholder="按模板分类筛选"
-                  value={templateCategoryFilter}
-                  onChange={(value) => {
-                    setLoading(true);
-                    setTemplateCategoryFilter(value);
-                    setPage(1);
-                    void loadTemplates(1, pageSize, contractTypeFilter, value, industryCategoryFilter);
-                  }}
-                />
-                <Select
-                  allowClear
-                  style={{ width: 180 }}
-                  options={industryCategoryOptions as unknown as { label: string; value: string }[]}
-                  placeholder="按行业入口筛选"
-                  value={industryCategoryFilter}
-                  onChange={(value) => {
-                    setLoading(true);
-                    setIndustryCategoryFilter(value);
-                    setPage(1);
-                    void loadTemplates(1, pageSize, contractTypeFilter, templateCategoryFilter, value);
-                  }}
-                />
-              </Space>
-            }
-          >
-            <Table
-              rowKey="id"
-              dataSource={items}
-              loading={loading}
-              pagination={{ current: page, pageSize, total, showSizeChanger: true }}
-              onChange={handleTableChange}
-              locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="还没有合同模板。" /> }}
-              columns={columns}
-              expandable={{
-                expandedRowKeys,
-                onExpand: handleExpand,
-                expandedRowRender: (item) => {
-                  const versions = versionHistoryMap[item.id];
-                  return (
-                    <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-                      <div>
-                        <strong>模板说明：</strong>
-                        <div>{item.description || "-"}</div>
-                      </div>
-                      <div>
-                        <strong>模板分类 / 行业入口：</strong>
-                        <div>{formatTemplateCategory(item.template_category)} / {formatIndustryCategory(item.industry_category)}</div>
-                      </div>
-                      <div>
-                        <strong>模板正文：</strong>
-                        <Paragraph style={{ marginBottom: 0, whiteSpace: "pre-wrap" }}>{item.content}</Paragraph>
-                      </div>
-                      <div>
-                        <strong>最新变更说明：</strong>
-                        <div>{item.latest_change_summary || "-"}</div>
-                      </div>
-                      <div>
-                        <strong>变量：</strong>
-                        <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>{JSON.stringify(item.variables, null, 2)}</pre>
-                      </div>
-                      <div>
-                        <strong>版本历史：</strong>
-                        {versionLoadingId === item.id && !versions ? (
-                          <Text type="secondary">版本历史加载中...</Text>
-                        ) : versions && versions.length > 0 ? (
-                          <Table rowKey="id" size="small" pagination={false} columns={buildVersionColumns(item.id)} dataSource={versions} />
-                        ) : (
-                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无版本历史。" />
-                        )}
-                      </div>
-                    </Space>
-                  );
-                },
-              }}
-      scroll={{ x: 1720 }}
+      <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>
+          <div style={{ marginTop: 16 }}>
+            <Button block onClick={() => void handleSeedDefaults()} loading={seeding}>
+              一键初始化默认模板
+            </Button>
+          </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" 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.enabled ? "green" : "default"}>{item.enabled ? "启用" : "停用"}</Tag>
+                        <Tag color={item.published_at ? "blue" : "default"}>{item.published_at ? "已发布" : "未发布"}</Tag>
+                        {item.template_code && <Text code>{item.template_code}</Text>}
+                      </Space>
+                      <div style={{ marginTop: 4 }}>
+                        <Space wrap size={[4, 4]}>
+                          <Tag>{contractTypeLabelMap[item.contract_type ?? ""] ?? item.contract_type ?? "未分类"}</Tag>
+                          <Tag color="geekblue">{formatTemplateCategory(item.template_category)}</Tag>
+                          <Tag color="purple">{formatIndustryCategory(item.industry_category)}</Tag>
+                          <Tag>v{item.current_version_label}</Tag>
+                          {item.version_count > 1 && <Text type="secondary" style={{ fontSize: 12 }}>({item.version_count} 个版本)</Text>}
+                        </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.enabled}
+                        loading={statusChangingId === item.id}
+                        onChange={(checked) => void handleToggleStatus(item, checked)}
+                      />
+                      <Button size="small" onClick={() => void handleViewVersions(item)}>
+                        版本
+                      </Button>
+                      <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>
+                      )}
+                      <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={editingTemplate ? "编辑模板" : "新建模板"}
+        open={drawerOpen}
+        onClose={handleCloseDrawer}
+        width={640}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical" onFinish={handleSubmit} initialValues={{ enabled: true, variables: [{}], change_summary: undefined }}>
+          <Form.Item label="模板名称" name="name" rules={[{ required: true, message: "请输入模板名称" }]}>
+            <Input placeholder="例如：采购合同标准模板" />
+          </Form.Item>
+          <Form.Item label="合同类型" name="contract_type">
+            <Select allowClear options={contractTypeOptions} placeholder="可选，未选则视为未分类" />
+          </Form.Item>
+          <Form.Item label="模板分类" name="template_category">
+            <Select allowClear options={templateCategoryOptions as unknown as { label: string; value: string }[]} placeholder="例如：采购供应链 / 合规与保密" />
+          </Form.Item>
+          <Form.Item label="行业入口" name="industry_category">
+            <Select allowClear options={industryCategoryOptions as unknown as { label: string; value: string }[]} placeholder="例如：通用企业 / 科技互联网" />
+          </Form.Item>
+          <Form.Item label="模板说明" name="description">
+            <Input.TextArea rows={2} placeholder="说明适用场景、边界或使用注意事项" />
+          </Form.Item>
+          <Form.Item label="模板正文" name="content" rules={[{ required: true, message: "请输入模板正文" }]}>
+            <Input.TextArea rows={6} placeholder="请输入合同模板正文" />
+          </Form.Item>
+          <Form.Item label={editingTemplate ? "本次变更说明" : "初始版本说明"} name="change_summary">
+            <Input placeholder={editingTemplate ? "例如：补充采购行业分类" : "例如：首次建立采购模板"} />
+          </Form.Item>
+
+          <div className="embedded-panel">
+            <div className="embedded-panel-header">
+              <strong>变量配置</strong>
+            </div>
+            <Form.List name="variables">
+              {(fields, { add, remove }) => (
+                <Space direction="vertical" size="middle" style={{ width: "100%" }}>
+                  {fields.map((field) => (
+                    <Space key={field.key} size="middle" style={{ display: "flex" }} align="start">
+                      <Form.Item label="变量名称" name={[field.name, "name"]} style={{ flex: 1, marginBottom: 0 }}>
+                        <Input placeholder="例如：party_a" />
+                      </Form.Item>
+                      <Form.Item label="显示名称" name={[field.name, "label"]} style={{ flex: 1, marginBottom: 0 }}>
+                        <Input placeholder="例如：甲方名称" />
+                      </Form.Item>
+                      <Button danger icon={<MinusCircleOutlined />} onClick={() => remove(field.name)} disabled={fields.length <= 1} />
+                    </Space>
+                  ))}
+                  <Button icon={<PlusOutlined />} onClick={() => add({})}>
+                    添加变量
+                  </Button>
+                </Space>
+              )}
+            </Form.List>
+          </div>
+
+          <Form.Item label="启用状态" name="enabled" valuePropName="checked" style={{ marginTop: 16 }}>
+            <Switch checkedChildren="启用" unCheckedChildren="停用" />
+          </Form.Item>
+
+          <Space>
+            <Button type="primary" htmlType="submit" loading={submitting}>
+              {editingTemplate ? "保存并生成新版本" : "创建模板"}
+            </Button>
+            <Button onClick={handleCloseDrawer}>取消</Button>
+          </Space>
+        </Form>
+      </Drawer>
+
+      {/* 版本历史抽屉 */}
+      <Drawer
+        title={versionTemplate ? `版本历史 - ${versionTemplate.name}` : "版本历史"}
+        open={versionDrawerOpen}
+        onClose={() => { setVersionDrawerOpen(false); setVersionHistory([]); setVersionTemplate(null); }}
+        width={720}
+      >
+        {versionLoading ? (
+          <div style={{ textAlign: "center", padding: 48 }}><Spin /></div>
+        ) : versionHistory.length > 0 ? (
+          <List
+            dataSource={versionHistory}
+            renderItem={(version, index) => (
+              <List.Item
+                actions={
+                  index > 0
+                    ? [<Button key="rollback" size="small" loading={rollbackingVersion === `${versionTemplate?.id}:${version.version_label}`} onClick={() => void handleRollback(version.version_label)}>回滚</Button>]
+                    : []
+                }
+              >
+                <List.Item.Meta
+                  title={
+                    <Space>
+                      <Tag color={version.is_current ? "green" : "default"}>{version.version_label}</Tag>
+                      {version.is_current && <Tag color="blue">当前</Tag>}
+                    </Space>
+                  }
+                  description={
+                    <Space direction="vertical" size={2}>
+                      <Text>{version.change_summary || "无变更说明"}</Text>
+                      <Text type="secondary" style={{ fontSize: 12 }}>
+                        {formatDateTime(version.created_at)} · {version.created_by_name || version.created_by || "未知"}
+                      </Text>
+                    </Space>
+                  }
+                />
+              </List.Item>
+            )}
+          />
+        ) : (
+          <Empty description="暂无版本历史" />
+        )}
+      </Drawer>
     </main>
   );
 }