diff --git a/frontend/src/app/contracts/page.tsx b/frontend/src/app/contracts/page.tsx
index 81203adc..e1b1dbcf 100644
--- a/frontend/src/app/contracts/page.tsx
+++ b/frontend/src/app/contracts/page.tsx
@@ -1,27 +1,36 @@
 "use client";
 
+import {
+  CaretDownOutlined,
+  CaretRightOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  FileTextOutlined,
+  HistoryOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  WarningOutlined,
+} from "@ant-design/icons";
 import {
   Alert,
   Button,
-  Card,
+  Drawer,
   Empty,
   Form,
   Input,
-  Popover,
+  message,
   Select,
   Space,
+  Spin,
   Steps,
-  Table,
   Tag,
+  Tree,
   Typography,
-  message,
 } from "antd";
-import type { ColumnsType } from "antd/es/table";
-import type { TablePaginationConfig } from "antd/es/table/interface";
+import type { DataNode } from "antd/es/tree";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAuthStore } from "@/stores/auth.store";
-import { useContractGeneration } from "@/hooks/use-contract-generation";
 
 import {
   formatAutoReviewStatus,
@@ -32,7 +41,6 @@ import {
   getAutoReviewStatusColor,
   getDueStatusColor,
   getErrorMessage,
-  getGenerationModeMeta,
   getGenerationQualityColor,
   getLifecycleNextStatuses,
   getLifecycleStatusColor,
@@ -40,8 +48,6 @@ import {
   hasRiskReviewSuggestions,
   isLifecycleTerminal,
   lifecycleStatusMeta,
-  lifecycleStatusOptions,
-  type StatusMeta,
 } from "@/lib/format";
 import {
   downloadContract,
@@ -52,17 +58,14 @@ import {
   updateGeneratedContractLifecycle,
   type ContractPreview,
   type ContractTemplate,
-  type ContractVariable,
   type AutoReviewSummary,
-  type ContractLifecycle,
   type GeneratedContract,
   type GeneratedContractListItem,
 } from "@/services/contract";
 import { downloadReviewReport } from "@/services/review";
-import { formatIndustryCategory, formatTemplateCategory, industryCategoryOptions, templateCategoryOptions } from "@/lib/template-taxonomy";
 
-const { Search, TextArea } = Input;
-const { Title, Text } = Typography;
+const { TextArea } = Input;
+const { Title, Text, Paragraph } = Typography;
 
 type ContractFormValues = {
   template_id: string;
@@ -70,24 +73,6 @@ type ContractFormValues = {
   export_format: string;
 };
 
-type RefillPayload = {
-  template_id: string;
-  variable_values: Record<string, string>;
-  export_format: string;
-  options?: Record<string, unknown>;
-};
-
-type ReviewContextPayload = {
-  reviewId?: string | null;
-  reviewTitle?: string | null;
-  contractType?: string | null;
-  overallRisk?: string | null;
-  reviewOpinion?: string | null;
-  recommendation?: string | null;
-  riskItems?: string[];
-  suggestions?: string[];
-};
-
 const exportFormatOptions = [
   { value: "docx", label: "Word文档 (.docx)" },
   { value: "pdf", label: "PDF文档 (.pdf)" },
@@ -102,488 +87,241 @@ function withTimeout<T>(promise: Promise<T>, timeoutMs: number, timeoutMessage:
   const timeout = new Promise<never>((_, reject) => {
     timeoutId = setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs);
   });
-
   return Promise.race([promise, timeout]).finally(() => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
+    if (timeoutId) clearTimeout(timeoutId);
   });
 }
 
 function getRequiredVariableValidationMessage(template: ContractTemplate, variableValues: Record<string, string> | undefined) {
   const missing = template.variables
-    .filter((variable) => variable.required)
-    .filter((variable) => !(variableValues?.[variable.name] ?? "").trim())
-    .map((variable) => variable.label || variable.name);
-
-  if (!missing.length) {
-    return null;
-  }
-
+    .filter((v) => v.required)
+    .filter((v) => !(variableValues?.[v.name] ?? "").trim())
+    .map((v) => v.label || v.name);
+  if (!missing.length) return null;
   const visible = missing.slice(0, 5).join("、");
-  const suffix = missing.length > 5 ? ` 等 ${missing.length} 项` : "";
-  return `请先填写必填变量：${visible}${suffix}`;
+  return `请先填写必填变量：${visible}${missing.length > 5 ? ` 等 ${missing.length} 项` : ""}`;
 }
 
-function parseRestorePayload(value: string | null): RefillPayload | null {
-  if (!value) {
-    return null;
-  }
-
-  try {
-    const parsed = JSON.parse(value) as Partial<RefillPayload>;
-    if (!parsed.template_id || !parsed.variable_values || !parsed.export_format) {
-      return null;
-    }
-
-    return {
-      template_id: parsed.template_id,
-      variable_values: parsed.variable_values,
-      export_format: parsed.export_format,
-      options: parsed.options ?? {},
-    };
-  } catch {
-    return null;
-  }
-}
-
-function parseReviewContextPayload(value: string | null): ReviewContextPayload | null {
-  if (!value) {
-    return null;
-  }
-
-  try {
-    const parsed = JSON.parse(value) as ReviewContextPayload;
-    if (!parsed.reviewId && !parsed.reviewTitle && !parsed.reviewOpinion) {
-      return null;
-    }
-    return parsed;
-  } catch {
-    return null;
-  }
-}
-
-function buildReviewContextVariableValue(variable: ContractVariable, context: ReviewContextPayload | null) {
-  if (!context) {
-    return "";
-  }
-
-  const matcher = `${variable.name} ${variable.label} ${variable.description}`.toLowerCase();
-  const riskSummary = [
-    context.overallRisk ? `总体风险：${context.overallRisk}` : null,
-    context.riskItems?.length ? `重点风险：${context.riskItems.join("；")}` : null,
-    context.reviewOpinion ? `审查意见：${context.reviewOpinion}` : null,
-  ].filter(Boolean).join("\n");
-  const actionSummary = [
-    context.reviewOpinion,
-    context.suggestions?.length ? context.suggestions.join("；") : null,
-  ].filter(Boolean).join("\n");
-
-  if (/risk|review|风险|审查|法务|意见|建议/.test(matcher)) {
-    return riskSummary || actionSummary;
-  }
-  if (/background|context|remark|note|memo|背景|依据|备注|说明|补充/.test(matcher)) {
-    return actionSummary || riskSummary;
-  }
-  if (/contract|title|name|subject|合同|名称|标题|主题/.test(matcher)) {
-    return context.reviewTitle ?? "";
-  }
-  if (/type|类型/.test(matcher)) {
-    return context.contractType ?? "";
-  }
-
-  return "";
-}
-
-
+const ALL_KEY = "__all__";
 
 export default function ContractsPage() {
   const [messageApi, contextHolder] = message.useMessage();
-  const [form] = Form.useForm<ContractFormValues>();
   const router = useRouter();
-  const currentUser = useAuthStore((state) => state.currentUser);
   const searchParams = useSearchParams();
-  const restorePayload = useMemo(() => parseRestorePayload(searchParams.get("restore")), [searchParams]);
-  const reviewContext = useMemo(() => parseReviewContextPayload(searchParams.get("review")), [searchParams]);
-  const [templateLoading, setTemplateLoading] = useState(true);
-  const [historyLoading, setHistoryLoading] = useState(true);
-  const [generating, setGenerating] = useState(false);
-  const [previewing, setPreviewing] = useState(false);
-  const [downloadingCurrent, setDownloadingCurrent] = useState(false);
-  const [historyDownloadingId, setHistoryDownloadingId] = useState<string | null>(null);
+  const currentUser = useAuthStore((state) => state.currentUser);
+  const [form] = Form.useForm<ContractFormValues>();
+
+  // History state
+  const [loading, setLoading] = useState(true);
+  const [items, setItems] = useState<GeneratedContractListItem[]>([]);
+
+  // Selection state
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([ALL_KEY]);
+
+  // Detail state
+  const [lifecycleUpdating, setLifecycleUpdating] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+
+  // Generation Drawer state
+  const [genDrawerOpen, setGenDrawerOpen] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
   const [templates, setTemplates] = useState<ContractTemplate[]>([]);
   const [selectedTemplate, setSelectedTemplate] = useState<ContractTemplate | null>(null);
-  const [templateCategoryFilter, setTemplateCategoryFilter] = useState<string | undefined>(undefined);
-  const [industryCategoryFilter, setIndustryCategoryFilter] = useState<string | undefined>(undefined);
   const [previewResult, setPreviewResult] = useState<ContractPreview | null>(null);
   const [generatedContract, setGeneratedContract] = useState<GeneratedContract | null>(null);
-  const [historyContracts, setHistoryContracts] = useState<GeneratedContractListItem[]>([]);
-  const [historyKeyword, setHistoryKeyword] = useState("");
-  const [historyContractType, setHistoryContractType] = useState<string | undefined>(undefined);
-  const [historyLifecycleStatus, setHistoryLifecycleStatus] = useState<string | undefined>(undefined);
-  const [historyPage, setHistoryPage] = useState(1);
-  const [historyPageSize, setHistoryPageSize] = useState(10);
-  const [historyTotal, setHistoryTotal] = useState(0);
-  const [restoredOptions, setRestoredOptions] = useState<Record<string, unknown>>({});
-  const [appliedRestoreValue, setAppliedRestoreValue] = useState<string | null>(null);
-  const [lifecycleUpdating, setLifecycleUpdating] = useState(false);
-  const [historyCollapsed, setHistoryCollapsed] = useState(true);
-  const canDownloadContracts = currentUser?.role === "admin";
-  const canOpenReviewDetail = (autoReview?: AutoReviewSummary | null) => Boolean(autoReview?.detail_url);
-  const canOpenReviewChat = (autoReview?: AutoReviewSummary | null) => Boolean(autoReview?.chat_url);
-  const canDownloadReview = (autoReview?: AutoReviewSummary | null) => Boolean(autoReview?.report_download_url);
+  const [generating, setGenerating] = useState(false);
+  const [previewing, setPreviewing] = useState(false);
 
-  const clearRestoreQuery = useCallback(() => {
-    if (!searchParams.get("restore")) {
-      return;
+  const selectedContract = useMemo(() => items.find((item) => item.id === selectedId) ?? null, [items, selectedId]);
+
+  const loadContracts = useCallback(async () => {
+    setLoading(true);
+    try {
+      const result = await listGeneratedContracts({ page: 1, page_size: 1000 });
+      if (result.code !== 0) {
+        messageApi.error(result.message || "获取合同历史失败");
+        return;
+      }
+      setItems(result.data.items);
+      if (!selectedId && result.data.items.length > 0) {
+        setSelectedId(result.data.items[0].id);
+      }
+    } catch {
+      messageApi.error("合同历史加载失败，请稍后重试");
+    } finally {
+      setLoading(false);
     }
-
-    router.replace("/contracts");
-  }, [router, searchParams]);
-
-  const applyTemplateSelection = useCallback(
-    (template: ContractTemplate, payload?: RefillPayload) => {
-      setSelectedTemplate(template);
-      setPreviewResult(null);
-      setGeneratedContract(null);
-      setCurrentStep(1);
-
-      const initialValues: Record<string, string> = {};
-      template.variables.forEach(variable => {
-        if (payload?.variable_values?.[variable.name] != null) {
-          initialValues[variable.name] = payload.variable_values[variable.name];
-          return;
-        }
-
-        const reviewContextValue = buildReviewContextVariableValue(variable, reviewContext);
-        if (reviewContextValue) {
-          initialValues[variable.name] = reviewContextValue;
-          return;
-        }
-
-        if (variable.default_value) {
-          initialValues[variable.name] = variable.default_value;
-        }
-      });
-
-      form.setFieldsValue({
-        template_id: template.id,
-        variable_values: initialValues,
-        export_format: payload?.export_format ?? "docx",
-      });
-      setRestoredOptions(payload?.options ?? {});
-    },
-    [form, reviewContext]
-  );
+  }, [messageApi, selectedId]);
 
   const loadTemplates = useCallback(async () => {
-    setTemplateLoading(true);
     try {
-      const result = await listContractTemplates({
-        template_category: templateCategoryFilter,
-        industry_category: industryCategoryFilter,
-      });
+      const result = await listContractTemplates({});
       if (result.code !== 0) {
         messageApi.error(result.message || "获取模板列表失败");
         return;
       }
       setTemplates(result.data);
     } catch {
-      messageApi.error("模板列表加载失败，请稍后重试");
-    } finally {
-      setTemplateLoading(false);
+      messageApi.error("模板列表加载失败");
     }
-  }, [industryCategoryFilter, messageApi, templateCategoryFilter]);
-
-  const loadHistory = useCallback(
-    async (
-      page = historyPage,
-      pageSize = historyPageSize,
-      contractType = historyContractType,
-      keyword = historyKeyword,
-      lifecycleStatus = historyLifecycleStatus,
-    ) => {
-      setHistoryLoading(true);
-      try {
-        const result = await listGeneratedContracts({
-          page,
-          page_size: pageSize,
-          contract_type: contractType,
-          lifecycle_status: lifecycleStatus,
-          keyword,
-        });
-        if (result.code !== 0) {
-          messageApi.error(result.message || "历史记录加载失败");
-          return;
-        }
-        setHistoryContracts(result.data.items);
-        setHistoryTotal(result.data.total);
-        setHistoryPage(result.data.page);
-        setHistoryPageSize(result.data.page_size);
-      } catch {
-        messageApi.error("历史记录加载失败，请稍后重试");
-      } finally {
-        setHistoryLoading(false);
-      }
-    },
-    [historyContractType, historyKeyword, historyLifecycleStatus, historyPage, historyPageSize, messageApi]
-  );
+  }, [messageApi]);
 
   useEffect(() => {
-    const timer = window.setTimeout(() => {
-      void loadTemplates();
-      void loadHistory(1, historyPageSize, historyContractType, historyKeyword, historyLifecycleStatus);
-    }, 0);
+    void loadContracts();
+  }, [loadContracts]);
 
-    return () => window.clearTimeout(timer);
-  }, [historyContractType, historyKeyword, historyLifecycleStatus, historyPageSize, loadHistory, loadTemplates]);
+  const filteredItems = useMemo(() => {
+    if (!searchQuery.trim()) return items;
+    const q = searchQuery.toLowerCase();
+    return items.filter(
+      (item) =>
+        (item.template_name ?? "").toLowerCase().includes(q) ||
+        (item.file_name ?? "").toLowerCase().includes(q) ||
+        (item.contract_type ?? "").toLowerCase().includes(q) ||
+        (item.metadata?.generated_by_name ?? "").toLowerCase().includes(q),
+    );
+  }, [items, searchQuery]);
 
-  useEffect(() => {
-    const restoreValue = searchParams.get("restore");
-    if (!restoreValue || !restorePayload || templates.length === 0 || appliedRestoreValue === restoreValue) {
-      return;
-    }
+  const treeData = useMemo((): DataNode[] => {
+    const contractTypes = Array.from(new Set(items.map((i) => i.contract_type).filter(Boolean)));
+    const lifecycleTypes = Array.from(new Set(items.map((i) => i.lifecycle?.status).filter(Boolean)));
 
-    const template = templates.find(item => item.id === restorePayload.template_id);
-    if (!template) {
-      messageApi.error("未找到需要恢复的合同模板");
-      clearRestoreQuery();
-      const timer = window.setTimeout(() => setAppliedRestoreValue(restoreValue), 0);
-      return () => window.clearTimeout(timer);
-    }
+    const typeChildren: DataNode[] = contractTypes.map((type) => {
+      const contractsInType = items.filter((i) => i.contract_type === type);
+      return {
+        key: `type:${type}`,
+        title: (
+          <Space>
+            <span>{type}</span>
+            <Tag color="default" style={{ margin: 0, fontSize: 11 }}>{contractsInType.length}</Tag>
+          </Space>
+        ),
+        selectable: false,
+        children: contractsInType.map((c) => ({
+          key: c.id,
+          title: (
+            <div className="contract-tree-item">
+              <span className="contract-tree-name">{c.template_name || c.file_name}</span>
+              {c.lifecycle?.status && (
+                <Tag color={getLifecycleStatusColor(c.lifecycle.status)} style={{ fontSize: 10, marginLeft: 4 }}>
+                  {formatLifecycleStatus(c.lifecycle.status).slice(0, 2)}
+                </Tag>
+              )}
+            </div>
+          ),
+          isLeaf: true,
+        })),
+      };
+    });
 
-    const timer = window.setTimeout(() => {
-      applyTemplateSelection(template, restorePayload);
-      setAppliedRestoreValue(restoreValue);
-      messageApi.success("已恢复历史生成参数，可继续编辑或再次生成");
-    }, 0);
+    const statusChildren: DataNode[] = lifecycleTypes.map((status) => {
+      const contractsInStatus = items.filter((i) => i.lifecycle?.status === status);
+      const meta = lifecycleStatusMeta[status] ?? { label: status, color: "default" };
+      return {
+        key: `status:${status}`,
+        title: (
+          <Space>
+            <span>{meta.label}</span>
+            <Tag color={meta.color} style={{ margin: 0, fontSize: 11 }}>{contractsInStatus.length}</Tag>
+          </Space>
+        ),
+        selectable: false,
+        children: contractsInStatus.map((c) => ({
+          key: c.id,
+          title: (
+            <div className="contract-tree-item">
+              <span className="contract-tree-name">{c.template_name || c.file_name}</span>
+              {c.lifecycle?.due_status && (
+                <Tag color={getDueStatusColor(c.lifecycle.due_status)} style={{ fontSize: 10, marginLeft: 4 }}>
+                  {formatDueStatus(c.lifecycle)}
+                </Tag>
+              )}
+            </div>
+          ),
+          isLeaf: true,
+        })),
+      };
+    });
 
-    return () => window.clearTimeout(timer);
-  }, [appliedRestoreValue, applyTemplateSelection, clearRestoreQuery, messageApi, restorePayload, searchParams, templates]);
+    return [
+      {
+        key: ALL_KEY,
+        title: (
+          <Space>
+            <span>全部合同</span>
+            <Tag color="blue" style={{ margin: 0, fontSize: 11 }}>{items.length}</Tag>
+          </Space>
+        ),
+        selectable: false,
+        children: [
+          { key: "group-type", title: <span className="tree-group-title">按合同类型</span>, selectable: false, children: typeChildren },
+          { key: "group-status", title: <span className="tree-group-title">按生命周期</span>, selectable: false, children: statusChildren },
+        ],
+      },
+    ];
+  }, [items]);
 
-  const contractTypeOptions = useMemo(() => {
-    return Array.from(
-      new Set([...templates.map(item => item.contract_type), ...historyContracts.map(item => item.contract_type)].filter(Boolean))
-    ).map(value => ({ value, label: value }));
-  }, [historyContracts, templates]);
-
-  const handleTemplateSelect = (templateId: string) => {
-    const template = templates.find(t => t.id === templateId);
-    if (!template) {
-      return;
-    }
-
-    clearRestoreQuery();
-    applyTemplateSelection(template);
-  };
-
-  const handlePreview = async () => {
-    if (!selectedTemplate) {
-      return;
-    }
-
-    try {
-      const values = await form.validateFields();
-      const validationMessage = getRequiredVariableValidationMessage(selectedTemplate, values.variable_values);
-      if (validationMessage) {
-        messageApi.warning(validationMessage);
-        return;
-      }
-
-      setPreviewing(true);
-      const result = await previewContract({
-        template_id: values.template_id,
-        variable_values: values.variable_values,
-      });
-
-      if (result.code !== 0) {
-        messageApi.error(result.message || "合同预览失败");
-        return;
-      }
-
-      setPreviewResult(result.data);
-      setCurrentStep(2);
-      messageApi.success("合同预览生成成功");
-    } catch (error: unknown) {
-      if (Array.isArray((error as { errorFields?: unknown[] }).errorFields)) {
-        messageApi.warning("请先补齐必填变量，再预览合同");
-        return;
-      }
-      messageApi.error(getErrorMessage(error, "合同预览失败，请稍后重试"));
-    } finally {
-      setPreviewing(false);
-    }
-  };
-
-  const handleGenerate = async () => {
-    if (!selectedTemplate) {
-      return;
-    }
-
-    try {
-      const values = await form.validateFields();
-      const validationMessage = getRequiredVariableValidationMessage(selectedTemplate, values.variable_values);
-      if (validationMessage) {
-        messageApi.warning(validationMessage);
-        return;
-      }
-      if (!values.export_format) {
-        messageApi.warning("请选择导出格式");
-        return;
-      }
-
-      setGenerating(true);
-      const result = await withTimeout(
-        generateContract({
-          template_id: values.template_id,
-          variable_values: values.variable_values,
-          export_format: values.export_format,
-          options: restoredOptions,
-        }),
-        GENERATE_RECOVERY_TIMEOUT_MS,
-        "合同生成仍在处理中，可稍后在历史结果查看。",
-      );
-
-      if (result.code !== 0) {
-        messageApi.error(result.message || "合同生成失败");
-        return;
-      }
-
-      setGeneratedContract(result.data);
-      setCurrentStep(3);
-      setHistoryPage(1);
-      clearRestoreQuery();
-      await loadHistory(1, historyPageSize, historyContractType, historyKeyword, historyLifecycleStatus);
-      messageApi.success("合同生成成功！");
-    } catch (error: unknown) {
-      if (Array.isArray((error as { errorFields?: unknown[] }).errorFields)) {
-        messageApi.warning("请先补齐必填变量，再生成合同");
-        return;
-      }
-      const nextMessage = getErrorMessage(error, "合同生成失败，请稍后重试");
-      if (nextMessage.includes("仍在处理中")) {
-        messageApi.warning(nextMessage);
-        setHistoryPage(1);
-        await loadHistory(1, historyPageSize, historyContractType, historyKeyword, historyLifecycleStatus);
-        return;
-      }
-      messageApi.error(nextMessage);
-    } finally {
-      setGenerating(false);
-    }
+  const handleTreeSelect = (_selectedKeys: React.Key[], info: { node: DataNode }) => {
+    const key = info.node.key as string;
+    if (key.startsWith("group-") || key === ALL_KEY) return;
+    setSelectedId(key);
   };
 
   const handleDownload = async () => {
-    if (!generatedContract) {
-      return;
-    }
-
-    setDownloadingCurrent(true);
+    if (!selectedContract) return;
+    setDownloading(true);
     try {
-      await downloadContract(generatedContract.id, generatedContract.file_name);
-      messageApi.success("文件下载开始");
-    } catch (error) {
-      console.error("下载失败:", error);
-      messageApi.error("文件下载失败");
+      await downloadContract(selectedContract.id, selectedContract.file_name);
+      messageApi.success("下载开始");
+    } catch {
+      messageApi.error("下载失败");
     } finally {
-      setDownloadingCurrent(false);
+      setDownloading(false);
     }
   };
 
-  const handleHistoryDownload = async (record: GeneratedContractListItem) => {
-    setHistoryDownloadingId(record.id);
+  const handleLifecycleTransition = async (newStatus: string) => {
+    if (!selectedContract || lifecycleUpdating) return;
+    setLifecycleUpdating(true);
     try {
-      await downloadContract(record.id, record.file_name);
-      messageApi.success("文件下载开始");
-    } catch (error) {
-      console.error("下载失败:", error);
-      messageApi.error("文件下载失败");
+      const result = await updateGeneratedContractLifecycle(selectedContract.id, { lifecycle_status: newStatus });
+      if (result.code !== 0) {
+        messageApi.error(result.message || "状态更新失败");
+        return;
+      }
+      const updated = result.data;
+      setItems((prev) => prev.map((item) => item.id === updated.id ? { ...item, lifecycle: updated.lifecycle } : item));
+      messageApi.success(`状态已更新为 ${formatLifecycleStatus(newStatus)}`);
+    } catch {
+      messageApi.error("状态更新失败");
     } finally {
-      setHistoryDownloadingId(null);
+      setLifecycleUpdating(false);
     }
   };
 
-  const handleViewGeneratedDetail = () => {
-    if (!generatedContract) {
+  const handleOpenReviewDetail = (autoReview?: AutoReviewSummary | null) => {
+    if (!autoReview?.detail_url) {
+      messageApi.warning("自动审查详情不可用");
       return;
     }
-    router.push(`/contracts/${generatedContract.id}`);
+    router.push(autoReview.detail_url);
   };
 
-  const handleHistorySearch = async (value?: string) => {
-    const keyword = value ?? historyKeyword;
-    setHistoryKeyword(keyword);
-    setHistoryPage(1);
-    await loadHistory(1, historyPageSize, historyContractType, keyword, historyLifecycleStatus);
-  };
-
-  const handleHistoryFilterChange = async (value: string | undefined) => {
-    setHistoryContractType(value);
-    setHistoryPage(1);
-    await loadHistory(1, historyPageSize, value, historyKeyword, historyLifecycleStatus);
-  };
-
-  const handleHistoryLifecycleFilterChange = async (value: string | undefined) => {
-    setHistoryLifecycleStatus(value);
-    setHistoryPage(1);
-    await loadHistory(1, historyPageSize, historyContractType, historyKeyword, value);
-  };
-
-  const handleHistoryReset = async () => {
-    setHistoryKeyword("");
-    setHistoryContractType(undefined);
-    setHistoryLifecycleStatus(undefined);
-    setHistoryPage(1);
-    await loadHistory(1, historyPageSize, undefined, "", undefined);
-  };
-
-  const handleHistoryTableChange = (pagination: TablePaginationConfig) => {
-    const nextPage = pagination.current ?? 1;
-    const nextPageSize = pagination.pageSize ?? historyPageSize;
-    void loadHistory(nextPage, nextPageSize, historyContractType, historyKeyword, historyLifecycleStatus);
-  };
-
-  const handleReset = () => {
-    setSelectedTemplate(null);
-    setPreviewResult(null);
-    setGeneratedContract(null);
-    setCurrentStep(0);
-    setRestoredOptions({});
-    form.resetFields();
-    clearRestoreQuery();
-  };
-
-  const handleOpenAutoReviewDetail = (autoReview?: AutoReviewSummary | null) => {
-    if (!autoReview) {
-      messageApi.warning("自动审查结果暂不可用");
-      return;
-    }
-
-    const target = autoReview.detail_url;
-    if (!target) {
-      messageApi.warning("自动审查详情尚未生成或当前记录未绑定可访问详情");
-      return;
-    }
-
-    router.push(target);
-  };
-
-  const handleOpenAutoReviewChat = (autoReview?: AutoReviewSummary | null) => {
+  const handleOpenReviewChat = (autoReview?: AutoReviewSummary | null) => {
     if (!autoReview?.chat_url) {
-      messageApi.warning("自动审查问答上下文尚未生成");
+      messageApi.warning("审查问答上下文尚未生成");
       return;
     }
-
     router.push(autoReview.chat_url);
   };
 
-  const handleDownloadAutoReviewReport = async (autoReview?: AutoReviewSummary | null) => {
+  const handleDownloadReviewReport = async (autoReview?: AutoReviewSummary | null) => {
     if (!autoReview?.report_download_url) {
-      messageApi.warning("当前还没有可下载的审查报告");
+      messageApi.warning("暂无可下载的审查报告");
       return;
     }
-
     try {
       await downloadReviewReport({
         file_name: autoReview.report_file_name ?? `review-report-${autoReview.review_id ?? "auto"}.pdf`,
@@ -592,631 +330,634 @@ export default function ContractsPage() {
       });
       messageApi.success("审查报告下载开始");
     } catch {
-      messageApi.error("审查报告下载失败，请稍后重试");
+      messageApi.error("审查报告下载失败");
     }
   };
 
-  const handleLifecycleTransition = async (record: GeneratedContractListItem, newStatus: string) => {
-    if (lifecycleUpdating) return;
-    setLifecycleUpdating(true);
+  // Generation handlers
+  const handleTemplateSelect = (template: ContractTemplate) => {
+    setSelectedTemplate(template);
+    setPreviewResult(null);
+    setGeneratedContract(null);
+    setCurrentStep(1);
+    form.setFieldsValue({
+      template_id: template.id,
+      export_format: "docx",
+    });
+  };
+
+  const handlePreview = async () => {
+    if (!selectedTemplate) return;
     try {
-      const result = await updateGeneratedContractLifecycle(record.id, {
-        lifecycle_status: newStatus,
-      });
-      if (result.code !== 0) {
-        messageApi.error(result.message || "状态更新失败");
+      const values = await form.validateFields();
+      const validationMessage = getRequiredVariableValidationMessage(selectedTemplate, values.variable_values);
+      if (validationMessage) {
+        messageApi.warning(validationMessage);
         return;
       }
-      const updated = result.data;
-      setHistoryContracts(prev => prev.map(item => (item.id === updated.id ? { ...item, lifecycle: updated.lifecycle } : item)));
-      if (generatedContract?.id === updated.id) {
-        setGeneratedContract(updated);
+      setPreviewing(true);
+      const result = await previewContract({
+        template_id: values.template_id,
+        variable_values: values.variable_values,
+      });
+      if (result.code !== 0) {
+        messageApi.error(result.message || "预览失败");
+        return;
       }
-      messageApi.success(`生命周期已更新为 ${formatLifecycleStatus(newStatus)}`);
+      setPreviewResult(result.data);
+      setCurrentStep(2);
+      messageApi.success("预览生成成功");
     } catch (error: unknown) {
-      messageApi.error(getErrorMessage(error, "状态更新失败，请稍后重试"));
+      if (Array.isArray((error as { errorFields?: unknown[] }).errorFields)) {
+        messageApi.warning("请先补齐必填变量");
+        return;
+      }
+      messageApi.error(getErrorMessage(error, "预览失败，请稍后重试"));
     } finally {
-      setLifecycleUpdating(false);
+      setPreviewing(false);
     }
   };
 
-  const templateColumns: ColumnsType<ContractTemplate> = [
-    {
-      title: "模板名称",
-      dataIndex: "name",
-      key: "name",
-      width: 200,
-      render: (value: string, record) => (
-        <div>
-          <div style={{ fontWeight: "bold" }}>{value}</div>
-          <Text type="secondary" style={{ fontSize: "12px" }}>
-            {record.contract_type}
-          </Text>
-          <Space wrap size={[4, 4]} style={{ marginTop: 6 }}>
-            <Tag>{formatTemplateCategory(record.template_category)}</Tag>
-            <Tag color="blue">{formatIndustryCategory(record.industry_category)}</Tag>
-          </Space>
+  const handleGenerate = async () => {
+    if (!selectedTemplate) return;
+    try {
+      const values = await form.validateFields();
+      const validationMessage = getRequiredVariableValidationMessage(selectedTemplate, values.variable_values);
+      if (validationMessage) {
+        messageApi.warning(validationMessage);
+        return;
+      }
+      setGenerating(true);
+      const result = await withTimeout(
+        generateContract({
+          template_id: values.template_id,
+          variable_values: values.variable_values,
+          export_format: values.export_format,
+        }),
+        GENERATE_RECOVERY_TIMEOUT_MS,
+        "合同仍在处理中，可稍后查看",
+      );
+      if (result.code !== 0) {
+        messageApi.error(result.message || "生成失败");
+        return;
+      }
+      setGeneratedContract(result.data);
+      setCurrentStep(3);
+      messageApi.success("合同生成成功！");
+      await loadContracts();
+    } catch (error: unknown) {
+      if (Array.isArray((error as { errorFields?: unknown[] }).errorFields)) {
+        messageApi.warning("请先补齐必填变量");
+        return;
+      }
+      messageApi.error(getErrorMessage(error, "生成失败，请稍后重试"));
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const handleCloseGeneration = () => {
+    setGenDrawerOpen(false);
+    setCurrentStep(0);
+    setSelectedTemplate(null);
+    setPreviewResult(null);
+    setGeneratedContract(null);
+    form.resetFields();
+  };
+
+  const handleDownloadGenerated = async () => {
+    if (!generatedContract) return;
+    setDownloading(true);
+    try {
+      await downloadContract(generatedContract.id, generatedContract.file_name);
+      messageApi.success("下载开始");
+    } catch {
+      messageApi.error("下载失败");
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  if (currentUser?.role !== "admin") {
+    return (
+      <main className="page-shell contracts-page">
+        {contextHolder}
+        <div style={{ padding: 48, textAlign: "center" }}>
+          <Text type="secondary">仅管理员可管理合同。</Text>
         </div>
-      ),
-    },
-    {
-      title: "描述",
-      dataIndex: "description",
-      key: "description",
-      width: 300,
-      render: (value: string) => <div style={{ maxHeight: "60px", overflow: "hidden" }}>{value || "暂无描述"}</div>,
-    },
-    {
-      title: "变量数量",
-      dataIndex: "variables",
-      key: "variables",
-      width: 100,
-      render: (variables: ContractVariable[]) => <Tag color="blue">{variables.length}个</Tag>,
-    },
-    {
-      title: "预览摘要",
-      dataIndex: "preview_excerpt",
-      key: "preview_excerpt",
-      width: 200,
-      render: (value: string) => <div style={{ maxHeight: "60px", overflow: "hidden", fontSize: "12px" }}>{value}</div>,
-    },
-    {
-      title: "操作",
-      key: "actions",
-      width: 120,
-      render: (_, record) => (
-        <Button type="primary" size="small" onClick={() => handleTemplateSelect(record.id)}>
-          <span className="ui-nowrap-label">选择</span>
-        </Button>
-      ),
-    },
-  ];
-
-  const historyColumns: ColumnsType<GeneratedContractListItem> = [
-    {
-      title: "模板名称",
-      dataIndex: "template_name",
-      key: "template_name",
-      width: 180,
-    },
-    {
-      title: "合同类型",
-      dataIndex: "contract_type",
-      key: "contract_type",
-      width: 140,
-      render: (value: string) => <Tag color="purple">{value || "未分类"}</Tag>,
-    },
-    {
-      title: "导出格式",
-      dataIndex: "export_format",
-      key: "export_format",
-      width: 120,
-      render: (value: string) => value.toUpperCase(),
-    },
-    {
-      title: "文件名",
-      dataIndex: "file_name",
-      key: "file_name",
-      width: 220,
-    },
-    {
-      title: "生命周期",
-      dataIndex: "lifecycle",
-      key: "lifecycle",
-      width: 220,
-      render: (lifecycle: ContractLifecycle | null | undefined) => (
-        <Space orientation="vertical" size={4}>
-          <Tag color={getLifecycleStatusColor(lifecycle?.status)}>{formatLifecycleStatus(lifecycle?.status)}</Tag>
-          <Tag color={getDueStatusColor(lifecycle?.due_status)}>{formatDueStatus(lifecycle)}</Tag>
-          <Text type="secondary" style={{ fontSize: 12 }}>
-            {lifecycle?.counterparty_name ?? "未设置相对方"}
-          </Text>
-        </Space>
-      ),
-    },
-    {
-      title: "资产文件",
-      dataIndex: "file_id",
-      key: "file_id",
-      width: 160,
-      render: (value: string | null | undefined) =>
-        value && currentUser?.role === "admin" ? (
-          <Button size="small" onClick={() => router.push(`/files?highlight=${value}`)}>
-            <span className="ui-nowrap-label">查看文件资产</span>
-          </Button>
-        ) : (
-          <Text type="secondary">未关联</Text>
-        ),
-    },
-    {
-      title: "生成时间",
-      dataIndex: "generated_at",
-      key: "generated_at",
-      width: 180,
-      render: (value: string) => new Date(value).toLocaleString("zh-CN"),
-    },
-    {
-      title: "生成质量",
-      dataIndex: "generation_quality",
-      key: "generation_quality",
-      width: 180,
-      render: (_, record) => {
-        const modeMeta = getGenerationModeMeta(record.metadata);
-        return (
-          <Space orientation="vertical" size={4}>
-            <Tag color={getGenerationQualityColor(record.generation_quality?.status)}>{formatGenerationQualityStatus(record.generation_quality?.status)}</Tag>
-            <Text type="secondary" style={{ fontSize: 12 }}>分数 {record.generation_quality?.score ?? "-"}</Text>
-            <Tag color={modeMeta.color}>{modeMeta.label}</Tag>
-            {hasRiskReviewSuggestions(record.clause_completion_suggestions) ? <Tag color="red">高风险补条款</Tag> : null}
-            {record.clause_completion_suggestions?.length ? <Tag color="orange">需补条款 {record.clause_completion_suggestions.length}</Tag> : null}
-          </Space>
-        );
-      },
-    },
-    {
-      title: "自动审查",
-      dataIndex: "auto_review",
-      key: "auto_review",
-      width: 210,
-      render: (autoReview: AutoReviewSummary | null | undefined) => {
-        if (!autoReview) {
-          return <Text type="secondary">未触发</Text>;
-        }
-
-        const highRisk = autoReview.risk_level === "high";
-        return (
-          <Space orientation="vertical" size={4}>
-            <Space wrap>
-              <Tag color={getAutoReviewStatusColor(autoReview.status)}>{formatAutoReviewStatus(autoReview.status)}</Tag>
-              {autoReview.risk_level ? <Tag color={getRiskColor(autoReview.risk_level)}>{autoReview.risk_level === "high" ? "高风险" : autoReview.risk_level === "medium" ? "中风险" : autoReview.risk_level === "low" ? "低风险" : autoReview.risk_level}</Tag> : null}
-            </Space>
-            <Text type={highRisk ? undefined : "secondary"} strong={highRisk} style={{ fontSize: 12, color: highRisk ? "#cf1322" : undefined }}>
-              {autoReview.current_stage_label ?? autoReview.next_action ?? "-"}
-            </Text>
-            {highRisk && autoReview.review_opinion ? (
-              <Text style={{ fontSize: 12, color: "#cf1322" }}>{autoReview.review_opinion}</Text>
-            ) : null}
-            <Button size="small" danger={highRisk} disabled={!canOpenReviewDetail(autoReview)} onClick={() => handleOpenAutoReviewDetail(autoReview)}>
-              <span className="ui-nowrap-label">审查详情</span>
-            </Button>
-          </Space>
-        );
-      },
-    },
-    {
-      title: "生成人员",
-      dataIndex: ["metadata", "generated_by_name"],
-      key: "generated_by_name",
-      width: 120,
-      render: (value: string | undefined) => value || "未知",
-    },
-    {
-      title: "操作",
-      key: "actions",
-      width: 230,
-      fixed: "right",
-      render: (_, record) => (
-        <Space>
-          <Button size="small" onClick={() => router.push(`/contracts/${record.id}`)}>
-            <span className="ui-nowrap-label">详情</span>
-          </Button>
-          <Button size="small" onClick={() => router.push(`/documents/${record.id}/edit`)}>
-            <span className="ui-nowrap-label">编辑</span>
-          </Button>
-          <Popover
-            key={`lifecycle-${record.id}`}
-            trigger="click"
-            placement="left"
-            title={
-              <Space>
-                <span>生命周期</span>
-                <Tag color={getLifecycleStatusColor(record.lifecycle?.status)}>
-                  {formatLifecycleStatus(record.lifecycle?.status)}
-                </Tag>
-              </Space>
-            }
-            content={
-              isLifecycleTerminal(record.lifecycle?.status) ? (
-                <div style={{ width: 200, textAlign: "center", padding: "8px 0" }}>
-                  <Text type="secondary">合同已归档，不可再流转</Text>
-                </div>
-              ) : (
-                <Space direction="vertical" size="small" style={{ width: 220 }}>
-                  <Text type="secondary" style={{ fontSize: 12 }}>流转至：</Text>
-                  {getLifecycleNextStatuses(record.lifecycle?.status).map((next) => (
-                    <Button
-                      key={next.value}
-                      size="small"
-                      block
-                      loading={lifecycleUpdating}
-                      onClick={() => void handleLifecycleTransition(record, next.value)}
-                    >
-                      {next.label}
-                    </Button>
-                  ))}
-                </Space>
-              )
-            }
-          >
-            <Button size="small">
-              <span className="ui-nowrap-label">状态</span>
-            </Button>
-          </Popover>
-          <Button size="small" type="primary" disabled={!canDownloadContracts} loading={historyDownloadingId === record.id} onClick={() => void handleHistoryDownload(record)}>
-            <span className="ui-nowrap-label">下载</span>
-          </Button>
-        </Space>
-      ),
-    },
-  ];
-
-  const steps = [
-    {
-      title: "选择模板",
-      content: "从可用模板中选择",
-    },
-    {
-      title: "填写变量",
-      content: "填写合同变量值",
-    },
-    {
-      title: "预览确认",
-      content: "预览生成结果",
-    },
-    {
-      title: "生成下载",
-      content: "生成并下载合同",
-    },
-  ];
-
-  const restoredOptionEntries = Object.entries(restoredOptions);
+      </main>
+    );
+  }
 
   return (
-    <main className="page-shell review-page-grid contracts-page">
+    <main className="page-shell contracts-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">合同生成</span>
-            <Title level={2}>从模板到下载，一屏完成合同生成。</Title>
-            <Text type="secondary">先选模板，再填写变量；预览确认后生成文件，历史结果保留在下方。</Text>
+      <div className="contract-layout">
+        {/* 左侧树形菜单 */}
+        <aside className="contract-sidebar">
+          <div className="contract-sidebar-header">
+            <Input
+              allowClear
+              prefix={<SearchOutlined style={{ color: "#8c8c8c" }} />}
+              placeholder="搜索合同..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="contract-search"
+            />
           </div>
-          <Card className="review-side-card" variant="borderless">
-            <span className="landing-panel-eyebrow">合同生成中心</span>
-            <Title level={4} style={{ margin: 0, color: "inherit" }}>
-              继续处理
-            </Title>
-            <Text type="secondary">选模板、填变量、预览和生成都在这一页完成，历史记录放在下方。</Text>
-          </Card>
-        </section>
-
-        <Card className="review-surface-card">
-          <Steps current={currentStep} items={steps} />
-        </Card>
-
-        {currentStep === 0 && (
-          <Card className="review-surface-card" title="选择合同模板">
-            <Space wrap style={{ marginBottom: 16 }}>
-              <Select
-                allowClear
-                style={{ width: 200 }}
-                options={templateCategoryOptions as unknown as { label: string; value: string }[]}
-                placeholder="按模板分类筛选"
-                value={templateCategoryFilter}
-                onChange={(value) => setTemplateCategoryFilter(value)}
-              />
-              <Select
-                allowClear
-                style={{ width: 200 }}
-                options={industryCategoryOptions as unknown as { label: string; value: string }[]}
-                placeholder="按行业入口筛选"
-                value={industryCategoryFilter}
-                onChange={(value) => setIndustryCategoryFilter(value)}
-              />
-            </Space>
-            {reviewContext ? (
-              <Alert
-                showIcon
-                type="info"
-                style={{ marginBottom: 16 }}
-                title={`已接收审查上下文：${reviewContext.reviewTitle ?? "未命名审查"}`}
-                description="选择模板后，系统会尝试把审查意见、风险项和处理建议预填到匹配的变量字段中。"
-              />
-            ) : null}
-            {templates.length === 0 && !templateLoading ? (
-              <Empty
-                description="当前还没有可用模板。你可以先发起合同审查，或通过法律问答梳理条款和修改建议。"
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-              >
-                <Button type="primary" onClick={() => router.push("/review")}>先发起合同审查</Button>
-                <Button onClick={() => router.push("/chat")}>去法律问答</Button>
-              </Empty>
+          <div className="contract-sidebar-tree">
+            {loading ? (
+              <div className="contract-loading"><Spin /></div>
             ) : (
-              <Table
-                className="contracts-template-table"
-                rowKey="id"
-                dataSource={templates}
-                loading={templateLoading}
-                columns={templateColumns}
-                locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无可用模板。" /> }}
-                pagination={{ pageSize: 6, responsive: true }}
-                scroll={{ x: 900 }}
+              <Tree
+                showIcon={false}
+                switcherIcon={({ expanded }) => expanded ? <CaretDownOutlined style={{ fontSize: 12 }} /> : <CaretRightOutlined style={{ fontSize: 12 }} />}
+                treeData={treeData}
+                expandedKeys={expandedKeys}
+                selectedKeys={selectedId ? [selectedId] : []}
+                onExpand={setExpandedKeys}
+                onSelect={handleTreeSelect}
+                blockNode
               />
             )}
-          </Card>
+          </div>
+          <div className="contract-sidebar-actions">
+            <Button type="primary" icon={<PlusOutlined />} block onClick={() => {
+              setGenDrawerOpen(true);
+              void loadTemplates();
+            }}>
+              生成新合同
+            </Button>
+          </div>
+        </aside>
+
+        {/* 右侧合同详情 */}
+        <section className="contract-detail">
+          {loading ? (
+            <div className="contract-loading-panel">
+              <Spin size="large" />
+              <Text type="secondary">加载中...</Text>
+            </div>
+          ) : selectedContract ? (
+            <div className="contract-detail-content">
+              {/* 头部 */}
+              <header className="contract-detail-header">
+                <div className="contract-header-row">
+                  <div className="contract-header-title">
+                    <Title level={3} style={{ margin: 0 }}>{selectedContract.template_name}</Title>
+                    <Text type="secondary">{selectedContract.file_name}</Text>
+                  </div>
+                  <Space size={8}>
+                    <Button icon={<EditOutlined />} onClick={() => router.push(`/documents/${selectedContract.id}/edit`)}>
+                      编辑
+                    </Button>
+                    <Button icon={<DownloadOutlined />} type="primary" loading={downloading} onClick={handleDownload}>
+                      下载
+                    </Button>
+                    <Button onClick={() => router.push(`/contracts/${selectedContract.id}`)}>
+                      详情
+                    </Button>
+                  </Space>
+                </div>
+                <div className="contract-header-meta">
+                  <Space size={[8, 8]} wrap>
+                    <Tag>{selectedContract.contract_type || "未分类"}</Tag>
+                    {selectedContract.lifecycle?.status && (
+                      <Tag color={getLifecycleStatusColor(selectedContract.lifecycle.status)}>
+                        {formatLifecycleStatus(selectedContract.lifecycle.status)}
+                      </Tag>
+                    )}
+                    {selectedContract.lifecycle?.due_status && (
+                      <Tag color={getDueStatusColor(selectedContract.lifecycle.due_status)}>
+                        {formatDueStatus(selectedContract.lifecycle)}
+                      </Tag>
+                    )}
+                    <Tag>{selectedContract.export_format.toUpperCase()}</Tag>
+                    <Tag color="geekblue">{(selectedContract.file_size / 1024).toFixed(1)} KB</Tag>
+                  </Space>
+                  <Space size={[8, 8]} wrap>
+                    <Text type="secondary">生成时间：{formatDateTime(selectedContract.generated_at)}</Text>
+                    <Text type="secondary">生成人员：{selectedContract.metadata?.generated_by_name || "未知"}</Text>
+                  </Space>
+                </div>
+              </header>
+
+              {/* 自动审查结果 */}
+              {selectedContract.auto_review && (
+                <div className="contract-section contract-review-section">
+                  <div className="contract-section-header">
+                    <Space>
+                      <WarningOutlined style={{ color: getRiskColor(selectedContract.auto_review.risk_level || "low") }} />
+                      <Text strong>自动审查结果</Text>
+                      <Tag color={getAutoReviewStatusColor(selectedContract.auto_review.status)}>
+                        {formatAutoReviewStatus(selectedContract.auto_review.status)}
+                      </Tag>
+                    </Space>
+                    {selectedContract.auto_review.risk_level && (
+                      <Tag color={getRiskColor(selectedContract.auto_review.risk_level)}>
+                        {selectedContract.auto_review.risk_level === "high" ? "高风险" : selectedContract.auto_review.risk_level === "medium" ? "中风险" : "低风险"}
+                      </Tag>
+                    )}
+                  </div>
+                  <div className="contract-review-content">
+                    <Paragraph type="secondary">{selectedContract.auto_review.review_opinion || selectedContract.auto_review.status_detail || selectedContract.auto_review.current_stage_label || "-"}</Paragraph>
+                    <Space wrap>
+                      <Button size="small" onClick={() => handleOpenReviewDetail(selectedContract.auto_review)} disabled={!selectedContract.auto_review.detail_url}>
+                        审查详情
+                      </Button>
+                      <Button size="small" type="primary" onClick={() => handleOpenReviewChat(selectedContract.auto_review)} disabled={!selectedContract.auto_review.chat_url}>
+                        审查问答
+                      </Button>
+                      <Button size="small" onClick={() => handleDownloadReviewReport(selectedContract.auto_review)} disabled={!selectedContract.auto_review.report_download_url}>
+                        下载报告
+                      </Button>
+                    </Space>
+                  </div>
+                </div>
+              )}
+
+              {/* 生命周期流转 */}
+              <div className="contract-section contract-lifecycle-section">
+                <div className="contract-section-header">
+                  <Space>
+                    <HistoryOutlined />
+                    <Text strong>生命周期</Text>
+                  </Space>
+                </div>
+                {selectedContract.lifecycle?.status ? (
+                  <div className="contract-lifecycle-content">
+                    <div className="contract-lifecycle-status">
+                      <Text>当前状态：</Text>
+                      <Tag color={getLifecycleStatusColor(selectedContract.lifecycle.status)} style={{ fontSize: 14 }}>
+                        {formatLifecycleStatus(selectedContract.lifecycle.status)}
+                      </Tag>
+                    </div>
+                    {selectedContract.lifecycle.counterparty_name && (
+                      <div className="contract-lifecycle-counterparty">
+                        <Text>相对方：</Text>
+                        <Text strong>{selectedContract.lifecycle.counterparty_name}</Text>
+                      </div>
+                    )}
+                    {!isLifecycleTerminal(selectedContract.lifecycle.status) && (
+                      <div className="contract-lifecycle-actions">
+                        <Text type="secondary" style={{ marginBottom: 8, display: "block" }}>流转至：</Text>
+                        <Space wrap>
+                          {getLifecycleNextStatuses(selectedContract.lifecycle.status).map((next) => (
+                            <Button
+                              key={next.value}
+                              size="middle"
+                              loading={lifecycleUpdating}
+                              onClick={() => void handleLifecycleTransition(next.value)}
+                            >
+                              {next.label}
+                            </Button>
+                          ))}
+                        </Space>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <Text type="secondary">暂无生命周期信息</Text>
+                )}
+              </div>
+
+              {/* 生成质量 */}
+              {selectedContract.generation_quality?.status && (
+                <div className="contract-section contract-quality-section">
+                  <div className="contract-section-header">
+                    <Text strong>生成质量</Text>
+                    <Tag color={getGenerationQualityColor(selectedContract.generation_quality.status)}>
+                      {formatGenerationQualityStatus(selectedContract.generation_quality.status)}
+                    </Tag>
+                    <Text type="secondary">分数：{selectedContract.generation_quality.score ?? "-"}</Text>
+                  </div>
+                  {hasRiskReviewSuggestions(selectedContract.clause_completion_suggestions) && (
+                    <Alert type="error" message="高风险补条款" style={{ marginTop: 8 }} />
+                  )}
+                  {selectedContract.clause_completion_suggestions?.length ? (
+                    <Tag color="orange">需补条款 {selectedContract.clause_completion_suggestions.length}</Tag>
+                  ) : null}
+                </div>
+              )}
+
+              {/* 关联文件 */}
+              {selectedContract.file_id && (
+                <div className="contract-section contract-file-section">
+                  <div className="contract-section-header">
+                    <Text strong>关联文件资产</Text>
+                    <Text code>{selectedContract.file_id}</Text>
+                  </div>
+                  <Button onClick={() => router.push(`/files?highlight=${selectedContract.file_id}`)}>
+                    查看文件资产
+                  </Button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="contract-empty">
+              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="请从左侧选择合同查看详情" />
+            </div>
+          )}
+        </section>
+      </div>
+
+      {/* 生成新合同 Drawer */}
+      <Drawer
+        title="生成新合同"
+        open={genDrawerOpen}
+        onClose={handleCloseGeneration}
+        width={800}
+        destroyOnClose
+      >
+        <Steps current={currentStep} items={[
+          { title: "选择模板" },
+          { title: "填写变量" },
+          { title: "预览确认" },
+          { title: "生成下载" },
+        ]} style={{ marginBottom: 24 }} />
+
+        {currentStep === 0 && (
+          <div>
+            <Text type="secondary" style={{ marginBottom: 16, display: "block" }}>请选择一个合同模板开始生成</Text>
+            {templates.length === 0 ? (
+              <Empty description="暂无可用模板" />
+            ) : (
+              <div className="contract-template-grid">
+                {templates.map((t) => (
+                  <div key={t.id} className="contract-template-card" onClick={() => handleTemplateSelect(t)}>
+                    <Text strong>{t.name}</Text>
+                    <Text type="secondary" style={{ fontSize: 12 }}>{t.contract_type}</Text>
+                    <Space wrap size={[4, 4]}>
+                      <Tag>{t.variables.length} 个变量</Tag>
+                    </Space>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
         )}
 
         {currentStep >= 1 && selectedTemplate && (
-          <div className="chat-layout-grid chat-layout-grid-history">
-            <Card className="review-surface-card" title="填写合同变量">
-              <Space orientation="vertical" size="middle" style={{ width: "100%" }}>
-                {restorePayload && (
-                  <Alert
-                    type="info"
-                    showIcon
-                    title="已从历史合同恢复生成参数"
-                    description="你可以直接修改变量后重新生成；历史导出选项也会继续沿用。"
-                  />
-                )}
-
-                {reviewContext && (
-                  <Alert
-                    type="info"
-                    showIcon
-                    title="正在消费审查上下文"
-                    description={`来自 ${reviewContext.reviewTitle ?? "审查结果"}；总体风险 ${reviewContext.overallRisk ?? "-"}。可继续编辑预填变量后生成合同。`}
-                  />
-                )}
-
-                {restoredOptionEntries.length > 0 && (
-                  <div className="embedded-panel">
-                    <div className="embedded-panel-header">
-                      <strong>已恢复的导出选项</strong>
-                    </div>
-                    <Space wrap>
-                      {restoredOptionEntries.map(([key, value]) => (
-                        <Tag key={key} color="blue">
-                          {key}: {String(value)}
-                        </Tag>
-                      ))}
-                    </Space>
-                  </div>
-                )}
-
-                <Form form={form} layout="vertical">
-                  <Form.Item name="template_id" hidden>
-                    <Input />
-                  </Form.Item>
-
-                  <div style={{ marginBottom: 24 }}>
-                    <Title level={5}>当前模板: {selectedTemplate.name}</Title>
-                    <Text type="secondary">{selectedTemplate.description}</Text>
-                  </div>
-
-                  {selectedTemplate.variables.map(variable => (
-                    <Form.Item
-                      key={variable.name}
-                      label={
-                        <Space>
-                          <span>{variable.label}</span>
-                          {variable.required && <Tag color="red">必填</Tag>}
-                        </Space>
-                      }
-                      name={["variable_values", variable.name]}
-                      rules={[
-                        {
-                          required: variable.required,
-                          message: `请输入${variable.label}`,
-                        },
-                      ]}
-                      help={variable.description}
-                      initialValue={variable.default_value}
-                    >
-                      <TextArea rows={2} placeholder={`请输入${variable.label}`} maxLength={1000} showCount />
-                    </Form.Item>
-                  ))}
-
-                  <Form.Item label="导出格式" name="export_format" rules={[{ required: true, message: "请选择导出格式" }]}>
-                    <Select options={exportFormatOptions} />
-                  </Form.Item>
-
-                  <Form.Item>
-                    <Space>
-                    <Button onClick={() => setCurrentStep(0)}><span className="ui-nowrap-label">返回选择模板</span></Button>
-                    <Button type="primary" onClick={handlePreview} loading={previewing}>
-                      <span className="ui-nowrap-label">预览合同</span>
-                    </Button>
-                    </Space>
-                  </Form.Item>
-                </Form>
-              </Space>
-            </Card>
-
-            {currentStep >= 2 && previewResult && (
-              <Card className="review-surface-card" title="合同预览">
-                <div style={{ marginBottom: 16 }}>
-                  <Title level={5}>模板: {previewResult.template_name}</Title>
-                  <Text type="secondary">预览内容如下：</Text>
-                </div>
-
-                <div className="contract-preview-panel">
-                  {previewResult.preview_content}
-                </div>
-
-                <div style={{ marginTop: 24 }}>
-                  <Title level={5}>变量填写情况</Title>
-                  <Table
-                    rowKey="name"
-                    size="small"
-                    dataSource={previewResult.variable_summary}
-                    columns={[
-                      { title: "变量名", dataIndex: "label", key: "label" },
-                      { title: "是否必填", dataIndex: "required", key: "required", render: value => (value ? "是" : "否") },
-                      { title: "是否填写", dataIndex: "provided", key: "provided", render: value => (value ? "已填写" : "未填写") },
-                      { title: "值预览", dataIndex: "value_preview", key: "value_preview" },
-                      { title: "是否为空", dataIndex: "is_empty", key: "is_empty", render: value => (value ? "是" : "否") },
-                    ]}
-                    pagination={false}
-                  />
-                </div>
-
-                <div style={{ marginTop: 24, textAlign: "center" }}>
-                  <Space>
-                    <Button onClick={() => setCurrentStep(1)}>返回修改</Button>
-                    <Button type="primary" onClick={handleGenerate} loading={generating}>
-                      确认生成合同
-                    </Button>
-                  </Space>
-                </div>
-              </Card>
-            )}
-
-            {currentStep >= 3 && generatedContract && (
-              <Card className="review-surface-card" title="合同生成成功">
-                <Alert
-                  title="合同生成成功！"
-                  description="您的合同已成功生成，可以下载到本地使用。"
-                  type="success"
-                  showIcon
-                  style={{ marginBottom: 24 }}
-                />
-
-                {generatedContract.auto_review ? (
-                  <div className="embedded-panel" style={{ marginBottom: 24 }}>
-                    <div className="embedded-panel-header">
-                      <strong>自动审查</strong>
-                      <Tag color={getAutoReviewStatusColor(generatedContract.auto_review.status)}>
-                        {formatAutoReviewStatus(generatedContract.auto_review.status)}
-                      </Tag>
-                    </div>
-                    <Space orientation="vertical" size="small" style={{ width: "100%" }}>
-                      <Text>审查任务: {generatedContract.auto_review.review_id ?? "-"}</Text>
-                      <Text>当前阶段: {generatedContract.auto_review.current_stage_label ?? "-"}</Text>
-                      <Text>总体风险: {generatedContract.auto_review.risk_level ?? "-"}</Text>
-                      <Text>状态说明: {generatedContract.auto_review.status_detail ?? "-"}</Text>
-                      <Text>下一步: {generatedContract.auto_review.next_action ?? "-"}</Text>
-                      {generatedContract.auto_review.review_opinion ? <Text>审查意见: {generatedContract.auto_review.review_opinion}</Text> : null}
-                    </Space>
-                    <Space wrap style={{ marginTop: 12 }}>
-                      <Button disabled={!canOpenReviewDetail(generatedContract.auto_review)} onClick={() => handleOpenAutoReviewDetail(generatedContract.auto_review)}>
-                        <span className="ui-nowrap-label">查看审查详情</span>
-                      </Button>
-                      <Button type="primary" disabled={!canOpenReviewChat(generatedContract.auto_review)} onClick={() => handleOpenAutoReviewChat(generatedContract.auto_review)}>
-                        <span className="ui-nowrap-label">继续审查问答</span>
-                      </Button>
-                      <Button disabled={!canDownloadReview(generatedContract.auto_review)} onClick={() => void handleDownloadAutoReviewReport(generatedContract.auto_review)}>
-                        <span className="ui-nowrap-label">下载审查报告</span>
-                      </Button>
-                    </Space>
-                  </div>
-                ) : null}
-
-                <div style={{ marginBottom: 24 }}>
-                  <Title level={5}>生成信息</Title>
-                  <Space orientation="vertical" size="small">
-                    <Text>合同ID: {generatedContract.id}</Text>
-                    <Text>模板名称: {generatedContract.template_name}</Text>
-                    <Text>合同类型: {generatedContract.contract_type}</Text>
-                    <Text>生成时间: {new Date(generatedContract.generated_at).toLocaleString("zh-CN")}</Text>
-                    <Text>导出格式: {generatedContract.export_format.toUpperCase()}</Text>
-                    <Text>文件名称: {generatedContract.file_name}</Text>
-                    <Text>文件大小: {(generatedContract.file_size / 1024).toFixed(2)} KB</Text>
-                    <Text>生成人员: {generatedContract.metadata.generated_by_name}</Text>
-                    <Text>资产文件ID: {generatedContract.file_id ?? "-"}</Text>
-                  </Space>
-                </div>
-
-                <div style={{ textAlign: "center", marginTop: 32 }}>
-                  <Space wrap>
-                    <Button onClick={handleReset}><span className="ui-nowrap-label">生成新合同</span></Button>
-                    <Button onClick={handleViewGeneratedDetail}><span className="ui-nowrap-label">查看合同详情</span></Button>
-                    {currentUser?.role === "admin" && generatedContract.file_id ? (
-                      <Button onClick={() => router.push(`/files?highlight=${generatedContract.file_id}`)}><span className="ui-nowrap-label">查看文件资产</span></Button>
-                    ) : null}
-                    <Button type="primary" disabled={!canDownloadContracts} loading={downloadingCurrent} onClick={handleDownload}>
-                      <span className="ui-nowrap-label">下载合同文件</span>
-                    </Button>
-                  </Space>
-                </div>
-              </Card>
-            )}
+          <div>
+            <div style={{ marginBottom: 16 }}>
+              <Title level={5}>当前模板：{selectedTemplate.name}</Title>
+              <Text type="secondary">{selectedTemplate.description}</Text>
+            </div>
+            <Form form={form} layout="vertical">
+              <Form.Item name="template_id" hidden><Input /></Form.Item>
+              {selectedTemplate.variables.map((variable) => (
+                <Form.Item
+                  key={variable.name}
+                  label={<Space><span>{variable.label}</span>{variable.required && <Tag color="red">必填</Tag>}</Space>}
+                  name={["variable_values", variable.name]}
+                  rules={[{ required: variable.required, message: `请输入${variable.label}` }]}
+                  help={variable.description}
+                >
+                  <TextArea rows={2} placeholder={`请输入${variable.label}`} maxLength={1000} showCount />
+                </Form.Item>
+              ))}
+              <Form.Item label="导出格式" name="export_format" rules={[{ required: true, message: "请选择导出格式" }]}>
+                <Select options={exportFormatOptions} />
+              </Form.Item>
+            </Form>
+            <div style={{ marginTop: 24 }}>
+              <Button onClick={() => setCurrentStep(0)} style={{ marginRight: 8 }}>返回选择模板</Button>
+              <Button type="primary" onClick={handlePreview} loading={previewing}>预览合同</Button>
+            </div>
           </div>
         )}
 
-        <Card
-          className="review-surface-card"
-          title={
-            <Space
-              style={{ cursor: "pointer", width: "100%" }}
-              onClick={() => setHistoryCollapsed(prev => !prev)}
-            >
-              <span>已生成合同历史</span>
-              <Tag>{historyTotal} 条</Tag>
-              <Button
-                size="small"
-                type="text"
-                icon={historyCollapsed ? <span>展开 ▸</span> : <span>收起 ▾</span>}
-              />
-            </Space>
-          }
-          extra={
-            !historyCollapsed ? (
-              <Space wrap>
-                <Search
-                  allowClear
-                  placeholder="搜索模板名、文件名、生成人员"
-                  value={historyKeyword}
-                  onChange={event => setHistoryKeyword(event.target.value)}
-                  onSearch={value => void handleHistorySearch(value)}
-                  style={{ width: 200 }}
-                />
-                <Select
-                  allowClear
-                  placeholder="按合同类型筛选"
-                  value={historyContractType}
-                  options={contractTypeOptions}
-                  style={{ width: 150 }}
-                  onChange={value => void handleHistoryFilterChange(value)}
-                />
-                <Select
-                  allowClear
-                  placeholder="按生命周期筛选"
-                  value={historyLifecycleStatus}
-                  options={lifecycleStatusOptions}
-                  style={{ width: 150 }}
-                  onChange={value => void handleHistoryLifecycleFilterChange(value)}
-                />
-                <Button size="small" onClick={() => void handleHistoryReset()}>重置</Button>
-              </Space>
-            ) : (
-              <Button size="small" onClick={() => setHistoryCollapsed(false)}>
-                展开历史记录
-              </Button>
-            )
-          }
-        >
-          {!historyCollapsed ? (
-            <Table
-              className="contracts-history-table"
-              rowKey="id"
-              dataSource={historyContracts}
-              loading={historyLoading}
-              columns={historyColumns}
-              locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无已生成合同。" /> }}
-              pagination={{
-                current: historyPage,
-                pageSize: historyPageSize,
-                total: historyTotal,
-                showSizeChanger: true,
-                showTotal: total => `共 ${total} 条`,
-              }}
-              onChange={handleHistoryTableChange}
-              scroll={{ x: 1400 }}
-            />
-          ) : null}
-        </Card>
+        {currentStep >= 2 && previewResult && (
+          <div>
+            <div className="contract-preview-box" style={{ maxHeight: 400, overflow: "auto", background: "#fafafa", padding: 16, borderRadius: 8, marginBottom: 16 }}>
+              {previewResult.preview_content}
+            </div>
+            <div style={{ marginTop: 16 }}>
+              <Button onClick={() => setCurrentStep(1)} style={{ marginRight: 8 }}>返回修改</Button>
+              <Button type="primary" onClick={handleGenerate} loading={generating}>确认生成</Button>
+            </div>
+          </div>
+        )}
 
-      </Space>
+        {currentStep >= 3 && generatedContract && (
+          <div>
+            <Alert type="success" message="合同生成成功！" style={{ marginBottom: 16 }} />
+            <div style={{ marginBottom: 16 }}>
+              <Text>合同ID：{generatedContract.id}</Text><br />
+              <Text>模板：{generatedContract.template_name}</Text><br />
+              <Text>文件名：{generatedContract.file_name}</Text><br />
+              <Text>格式：{generatedContract.export_format.toUpperCase()}</Text>
+            </div>
+            <Space>
+              <Button onClick={handleCloseGeneration}>生成新合同</Button>
+              <Button onClick={() => router.push(`/contracts/${generatedContract.id}`)}>查看详情</Button>
+              <Button type="primary" icon={<DownloadOutlined />} onClick={handleDownloadGenerated}>下载</Button>
+            </Space>
+          </div>
+        )}
+      </Drawer>
+
+      <style jsx global>{`
+        .contract-layout {
+          display: flex;
+          height: calc(100vh - 64px);
+          background: #f5f7fa;
+        }
+
+        .contract-sidebar {
+          width: 280px;
+          background: #fff;
+          border-right: 1px solid #e8e8e8;
+          display: flex;
+          flex-direction: column;
+          flex-shrink: 0;
+        }
+
+        .contract-sidebar-header {
+          padding: 16px;
+          border-bottom: 1px solid #f0f0f0;
+        }
+
+        .contract-search {
+          border-radius: 8px;
+        }
+
+        .contract-search .ant-input {
+          background: #f5f7fa;
+        }
+
+        .contract-sidebar-tree {
+          flex: 1;
+          overflow: auto;
+          padding: 8px;
+        }
+
+        .contract-sidebar-tree .ant-tree {
+          background: transparent;
+          font-size: 13px;
+        }
+
+        .contract-sidebar-tree .ant-tree-node-content-wrapper {
+          padding: 4px 8px;
+          border-radius: 6px;
+        }
+
+        .contract-sidebar-tree .ant-tree-node-selected {
+          background: #e6f4ff !important;
+        }
+
+        .contract-tree-item {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+
+        .contract-tree-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          max-width: 160px;
+        }
+
+        .tree-group-title {
+          font-weight: 600;
+          color: #1677ff;
+          font-size: 12px;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+
+        .contract-sidebar-actions {
+          padding: 16px;
+          border-top: 1px solid #f0f0f0;
+        }
+
+        .contract-loading {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 200px;
+        }
+
+        .contract-detail {
+          flex: 1;
+          overflow: auto;
+          padding: 24px;
+        }
+
+        .contract-loading-panel {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          gap: 16px;
+        }
+
+        .contract-empty {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+        }
+
+        .contract-detail-content {
+          max-width: 1000px;
+          margin: 0 auto;
+        }
+
+        .contract-detail-header {
+          background: #fff;
+          border-radius: 12px;
+          padding: 24px;
+          margin-bottom: 16px;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        }
+
+        .contract-header-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin-bottom: 12px;
+        }
+
+        .contract-header-meta {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 12px;
+          align-items: center;
+        }
+
+        .contract-section {
+          background: #fff;
+          border-radius: 12px;
+          padding: 20px;
+          margin-bottom: 16px;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        }
+
+        .contract-section-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 16px;
+          padding-bottom: 12px;
+          border-bottom: 1px solid #f0f0f0;
+        }
+
+        .contract-review-content {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+
+        .contract-lifecycle-status {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 8px;
+        }
+
+        .contract-lifecycle-counterparty {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 12px;
+        }
+
+        .contract-lifecycle-actions {
+          margin-top: 8px;
+        }
+
+        .contract-template-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+          gap: 12px;
+        }
+
+        .contract-template-card {
+          padding: 16px;
+          background: #f5f7fa;
+          border-radius: 8px;
+          cursor: pointer;
+          border: 2px solid transparent;
+          transition: border-color 0.2s;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+        }
+
+        .contract-template-card:hover {
+          border-color: #1677ff;
+          background: #e6f4ff;
+        }
+
+        .contract-preview-box {
+          white-space: pre-wrap;
+          font-size: 14px;
+          line-height: 1.6;
+        }
+      `}</style>
     </main>
   );
 }