R49 合同台账增强：金额分类、筛选、到期预警、续约与导出

client/src/pages/ContractsRegistryPage.tsx

@@ -1,9 +1,22 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createContractRegistry,
+  exportContractsRegistry,
+  fetchContractsRegistry,
+  fetchExpiringContracts,
+  patchContractRegistry,
+  renewContractRegistry,
+  type ContractRegistryExportFormat,
+  type ContractRegistryFilters,
+  type ContractRegistryItem,
+  type ContractRegistryPersistedStatus,
+  type ContractRegistryStatus,
+  type ContractRegistryType,
+} from "../api/contractsRegistry";
 import { fetchEmployees } from "../api/employees";
 import { mapApiErrorMessage } from "../api/errorMessages";
-import { createContractRegistry, fetchContractsRegistry, patchContractRegistry, type ContractRegistryItem } from "../api/contractsRegistry";
 import { fetchProjects, type ConfidentialityLevel } from "../api/projects";
 import { isApiError } from "../api/types";
 import { PageHeader } from "../components/common/PageHeader";
@@ -12,9 +25,51 @@ import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
 import { Textarea } from "../components/ui/textarea";
+import { downloadBlob } from "../lib/download";
 import { toast } from "sonner";
 
 const CONFIDENTIALITY_OPTIONS: ConfidentialityLevel[] = ["public", "internal", "confidential", "restricted"];
+const CONTRACT_TYPE_OPTIONS: ContractRegistryType[] = ["purchase", "sales", "service", "framework", "other"];
+const FILTER_STATUS_OPTIONS: Array<{ value: ContractRegistryStatus; label: string }> = [
+  { value: "active", label: "生效中" },
+  { value: "expired", label: "已过期" },
+  { value: "draft", label: "草稿" },
+  { value: "archived", label: "已归档" },
+];
+const EDITOR_STATUS_OPTIONS: Array<{ value: ContractRegistryPersistedStatus; label: string }> = [
+  { value: "active", label: "active" },
+  { value: "draft", label: "draft" },
+  { value: "archived", label: "archived" },
+];
+const AMOUNT_PATTERN = /^\d{1,12}(\.\d{1,2})?$/;
+const EXPIRING_DAYS = 30;
+
+type FiltersState = {
+  projectId: string;
+  status: "" | ContractRegistryStatus;
+  contractType: "" | ContractRegistryType;
+  counterpartyName: string;
+  expiryDateFrom: string;
+  expiryDateTo: string;
+};
+
+type EditorState = {
+  contractNo: string;
+  projectId: string;
+  contractType: ContractRegistryType;
+  counterpartyName: string;
+  summary: string;
+  amount: string;
+  currency: string;
+  signedDate: string;
+  effectiveDate: string;
+  expiryDate: string;
+  confidentialityLevel: ConfidentialityLevel;
+  archiveLocation: string;
+  offlineArchiveNo: string;
+  ownerEmployeeId: string;
+  status: ContractRegistryPersistedStatus;
+};
 
 function resolveError(error: unknown, fallback = "操作失败") {
   if (isApiError(error)) {
@@ -30,8 +85,87 @@ function confidentialityLabel(value: ConfidentialityLevel) {
   return "限制";
 }
 
-function nextStatus(item: ContractRegistryItem) {
-  return item.status === "archived" ? "active" : "archived";
+function contractTypeLabel(value: ContractRegistryType) {
+  if (value === "purchase") return "采购合同";
+  if (value === "sales") return "销售合同";
+  if (value === "service") return "服务合同";
+  if (value === "framework") return "框架协议";
+  return "其他";
+}
+
+function buildEmptyEditor(projectId = ""): EditorState {
+  return {
+    contractNo: "",
+    projectId,
+    contractType: "other",
+    counterpartyName: "",
+    summary: "",
+    amount: "",
+    currency: "CNY",
+    signedDate: "",
+    effectiveDate: "",
+    expiryDate: "",
+    confidentialityLevel: "internal",
+    archiveLocation: "",
+    offlineArchiveNo: "",
+    ownerEmployeeId: "",
+    status: "active",
+  };
+}
+
+function buildFiltersPayload(filters: FiltersState): ContractRegistryFilters {
+  return {
+    ...(filters.projectId ? { projectId: filters.projectId } : {}),
+    ...(filters.status ? { status: filters.status } : {}),
+    ...(filters.contractType ? { contractType: filters.contractType } : {}),
+    ...(filters.counterpartyName.trim() ? { counterpartyName: filters.counterpartyName.trim() } : {}),
+    ...(filters.expiryDateFrom ? { expiryDateFrom: filters.expiryDateFrom } : {}),
+    ...(filters.expiryDateTo ? { expiryDateTo: filters.expiryDateTo } : {}),
+  };
+}
+
+function buildSavePayload(form: EditorState) {
+  return {
+    contractNo: form.contractNo.trim(),
+    projectId: form.projectId || null,
+    contractType: form.contractType,
+    counterpartyName: form.counterpartyName.trim(),
+    summary: form.summary.trim(),
+    amount: form.amount.trim() ? form.amount.trim() : null,
+    currency: form.currency.trim().toUpperCase(),
+    signedDate: form.signedDate || null,
+    effectiveDate: form.effectiveDate || null,
+    expiryDate: form.expiryDate || null,
+    confidentialityLevel: form.confidentialityLevel,
+    archiveLocation: form.archiveLocation.trim(),
+    offlineArchiveNo: form.offlineArchiveNo.trim() || null,
+    ownerEmployeeId: form.ownerEmployeeId || undefined,
+    status: form.status,
+  };
+}
+
+function loadEditorFromItem(item: ContractRegistryItem): EditorState {
+  return {
+    contractNo: item.contractNo,
+    projectId: item.projectId ?? "",
+    contractType: item.contractType,
+    counterpartyName: item.counterpartyName,
+    summary: item.summary,
+    amount: item.amount ?? "",
+    currency: item.currency,
+    signedDate: item.signedDate ?? "",
+    effectiveDate: item.effectiveDate ?? "",
+    expiryDate: item.expiryDate ?? "",
+    confidentialityLevel: item.confidentialityLevel,
+    archiveLocation: item.archiveLocation,
+    offlineArchiveNo: item.offlineArchiveNo ?? "",
+    ownerEmployeeId: item.ownerEmployeeId,
+    status: item.persistedStatus,
+  };
+}
+
+function nextPersistedStatus(item: ContractRegistryItem): ContractRegistryPersistedStatus {
+  return item.persistedStatus === "archived" ? "active" : "archived";
 }
 
 export function ContractsRegistryPage() {
@@ -39,27 +173,42 @@ export function ContractsRegistryPage() {
   const [searchParams] = useSearchParams();
   const initialProjectId = searchParams.get("projectId") ?? "";
 
-  const [projectId, setProjectId] = useState(initialProjectId);
-  const [contractNo, setContractNo] = useState("");
-  const [counterpartyName, setCounterpartyName] = useState("");
-  const [summary, setSummary] = useState("");
-  const [archiveLocation, setArchiveLocation] = useState("");
-  const [offlineArchiveNo, setOfflineArchiveNo] = useState("");
-  const [ownerEmployeeId, setOwnerEmployeeId] = useState("");
-  const [confidentialityLevel, setConfidentialityLevel] = useState<ConfidentialityLevel>("internal");
-  const [status, setStatus] = useState("active");
+  const [filters, setFilters] = useState<FiltersState>({
+    projectId: initialProjectId,
+    status: "",
+    contractType: "",
+    counterpartyName: "",
+    expiryDateFrom: "",
+    expiryDateTo: "",
+  });
+  const [editorId, setEditorId] = useState<string | null>(null);
+  const [editor, setEditor] = useState<EditorState>(() => buildEmptyEditor(initialProjectId));
+  const [showExpiring, setShowExpiring] = useState(false);
 
+  const filterPayload = buildFiltersPayload(filters);
   const contractsQuery = useQuery({
-    queryKey: ["contracts-registry", projectId],
-    queryFn: () => fetchContractsRegistry(projectId || undefined),
+    queryKey: ["contracts-registry", filterPayload],
+    queryFn: () => fetchContractsRegistry(filterPayload),
+  });
+  const expiringQuery = useQuery({
+    queryKey: ["contracts-registry", "expiring", EXPIRING_DAYS],
+    queryFn: () => fetchExpiringContracts(EXPIRING_DAYS),
+  });
+  const projectsQuery = useQuery({
+    queryKey: ["projects", "contracts-page"],
+    queryFn: () => fetchProjects({}),
+  });
+  const employeesQuery = useQuery({
+    queryKey: ["employees", "contracts-page"],
+    queryFn: () => fetchEmployees({ page: 1, pageSize: 100, status: "active" }),
   });
-  const projectsQuery = useQuery({ queryKey: ["projects", "contracts-page"], queryFn: () => fetchProjects({}) });
-  const employeesQuery = useQuery({ queryKey: ["employees", "contracts-page"], queryFn: () => fetchEmployees({ page: 1, pageSize: 100, status: "active" }) });
 
   const projectOptions = projectsQuery.data?.items ?? [];
   const employeeOptions = employeesQuery.data?.items ?? [];
-
-  const groupedContracts = useMemo(() => contractsQuery.data?.items ?? [], [contractsQuery.data?.items]);
+  const contracts = contractsQuery.data?.items ?? [];
+  const expiringItems = expiringQuery.data?.items ?? [];
+  const editingItem = editorId ? contracts.find((item) => item.id === editorId) ?? null : null;
+  const amountInvalid = Boolean(editor.amount.trim()) && !AMOUNT_PATTERN.test(editor.amount.trim());
 
   const refreshAll = async () => {
     await Promise.all([
@@ -68,62 +217,216 @@ export function ContractsRegistryPage() {
     ]);
   };
 
-  const createMutation = useMutation({
-    mutationFn: () =>
-      createContractRegistry({
-        contractNo: contractNo.trim(),
-        projectId: projectId || null,
-        counterpartyName: counterpartyName.trim(),
-        summary: summary.trim(),
-        archiveLocation: archiveLocation.trim(),
-        offlineArchiveNo: offlineArchiveNo.trim() || null,
-        ownerEmployeeId: ownerEmployeeId || undefined,
-        confidentialityLevel,
-        status,
-      }),
-    onSuccess: async () => {
-      setContractNo("");
-      setCounterpartyName("");
-      setSummary("");
-      setArchiveLocation("");
-      setOfflineArchiveNo("");
-      setOwnerEmployeeId("");
-      setConfidentialityLevel("internal");
-      setStatus("active");
-      await refreshAll();
-      toast.success("合同台账已创建");
+  const resetEditor = () => {
+    setEditorId(null);
+    setEditor(buildEmptyEditor(filters.projectId));
+  };
+
+  const saveMutation = useMutation({
+    mutationFn: async () => {
+      if (editorId) {
+        return patchContractRegistry(editorId, buildSavePayload(editor));
+      }
+      return createContractRegistry(buildSavePayload(editor));
     },
-    onError: (error) => toast.error(resolveError(error, "创建合同台账失败")),
+    onSuccess: async () => {
+      await refreshAll();
+      resetEditor();
+      toast.success(editorId ? "合同台账已更新" : "合同台账已创建");
+    },
+    onError: (error) => toast.error(resolveError(error, editorId ? "更新合同台账失败" : "创建合同台账失败")),
   });
 
   const toggleStatusMutation = useMutation({
-    mutationFn: (item: ContractRegistryItem) => patchContractRegistry(item.id, { status: nextStatus(item) }),
-    onSuccess: refreshAll,
+    mutationFn: (item: ContractRegistryItem) => patchContractRegistry(item.id, { status: nextPersistedStatus(item) }),
+    onSuccess: async () => {
+      await refreshAll();
+      toast.success("合同状态已更新");
+    },
     onError: (error) => toast.error(resolveError(error, "更新合同状态失败")),
   });
 
+  const renewMutation = useMutation({
+    mutationFn: (item: ContractRegistryItem) => renewContractRegistry(item.id),
+    onSuccess: async () => {
+      await refreshAll();
+      toast.success("合同已续约，新的草稿合同已创建");
+    },
+    onError: (error) => toast.error(resolveError(error, "续约合同失败")),
+  });
+
+  const exportMutation = useMutation({
+    mutationFn: (format: ContractRegistryExportFormat) =>
+      exportContractsRegistry({
+        ...filterPayload,
+        format,
+      }),
+    onSuccess: (response, format) => {
+      downloadBlob(response.blob, response.filename ?? `contracts-registry.${format}`);
+      toast.success(`合同台账已导出为 ${format.toUpperCase()}`);
+    },
+    onError: (error) => toast.error(resolveError(error, "导出合同台账失败")),
+  });
+
   return (
     <div className="space-y-6">
       <PageHeader
         title="合同台账"
-        subtitle="只维护合同元数据、归档位置和项目关联，不在 OA 存放涉密正文附件。"
+        subtitle="维护合同元数据、生命周期、到期预警与导出，不在 OA 存放涉密正文附件。"
         actions={
-          <Button asChild variant="secondary" type="button">
-            <Link to="/projects">返回项目</Link>
-          </Button>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              variant="secondary"
+              disabled={exportMutation.isPending}
+              onClick={() => exportMutation.mutate("csv")}
+            >
+              导出 CSV
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              disabled={exportMutation.isPending}
+              onClick={() => exportMutation.mutate("xlsx")}
+            >
+              导出 Excel
+            </Button>
+            <Button asChild variant="secondary" type="button">
+              <Link to="/projects">返回项目</Link>
+            </Button>
+          </div>
         }
       />
 
-      <div className="grid gap-6 xl:grid-cols-[360px,minmax(0,1fr)]">
+      <div className="card-std space-y-4 p-6">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <div className="text-sm text-zinc-500">到期预警</div>
+            <div className="mt-1 text-3xl font-semibold text-zinc-900">{expiringQuery.data?.total ?? 0}</div>
+            <div className="text-sm text-zinc-600">份合同将在 {EXPIRING_DAYS} 天内到期</div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              variant="secondary"
+              disabled={expiringQuery.isLoading}
+              onClick={() => setShowExpiring((value) => !value)}
+            >
+              {showExpiring ? "收起到期列表" : "展开到期列表"}
+            </Button>
+          </div>
+        </div>
+
+        {expiringQuery.isError ? (
+          <div className="text-sm text-red-600">{resolveError(expiringQuery.error, "加载到期预警失败")}</div>
+        ) : null}
+
+        {showExpiring ? (
+          <div className="space-y-3 border-t border-zinc-200 pt-4">
+            {expiringItems.map((item) => (
+              <div
+                key={item.id}
+                className="flex flex-col gap-2 rounded-lg border border-amber-200 bg-amber-50/70 p-4 lg:flex-row lg:items-center lg:justify-between"
+              >
+                <div>
+                  <div className="font-medium text-zinc-900">
+                    {item.contractNo} · {item.counterpartyName}
+                  </div>
+                  <div className="mt-1 text-sm text-zinc-600">
+                    {contractTypeLabel(item.contractType)} · 到期日 {item.expiryDate ?? "-"} · 责任人 {item.owner?.name ?? "-"}
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="secondary"
+                    onClick={() => {
+                      setEditorId(item.id);
+                      setEditor(loadEditorFromItem(item));
+                    }}
+                  >
+                    编辑
+                  </Button>
+                </div>
+              </div>
+            ))}
+            {!expiringQuery.isLoading && !expiringItems.length ? (
+              <div className="text-sm text-zinc-500">未来 {EXPIRING_DAYS} 天内暂无即将到期合同。</div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-[400px,minmax(0,1fr)]">
         <div className="card-std space-y-4 p-6">
-          <h3 className="text-base font-semibold text-zinc-900">新建合同台账</h3>
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h3 className="text-base font-semibold text-zinc-900">{editorId ? "编辑合同台账" : "新建合同台账"}</h3>
+              <p className="mt-1 text-sm text-zinc-500">
+                补齐合同类型、金额、签署/生效/到期日期，续约将自动创建新的草稿合同。
+              </p>
+            </div>
+            {editorId ? (
+              <Button type="button" variant="secondary" size="sm" onClick={resetEditor}>
+                切换到新建
+              </Button>
+            ) : null}
+          </div>
+
+          {editingItem?.status === "expired" ? (
+            <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">
+              当前合同因到期日已过，列表状态显示为“已过期”；保存时仍以数据库状态 {editingItem.persistedStatus} 持久化。
+            </div>
+          ) : null}
+
           <div className="space-y-2">
             <Label>合同编号</Label>
-            <Input value={contractNo} onChange={(event) => setContractNo(event.target.value)} placeholder="例如 HT-2026-001" />
+            <Input
+              value={editor.contractNo}
+              onChange={(event) => setEditor((current) => ({ ...current, contractNo: event.target.value }))}
+              placeholder="例如 HT-2026-001"
+            />
           </div>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>合同类型</Label>
+              <select
+                className="select-std"
+                value={editor.contractType}
+                onChange={(event) => setEditor((current) => ({ ...current, contractType: event.target.value as ContractRegistryType }))}
+              >
+                {CONTRACT_TYPE_OPTIONS.map((item) => (
+                  <option key={item} value={item}>
+                    {contractTypeLabel(item)}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="space-y-2">
+              <Label>状态</Label>
+              <select
+                className="select-std"
+                value={editor.status}
+                onChange={(event) => setEditor((current) => ({ ...current, status: event.target.value as ContractRegistryPersistedStatus }))}
+              >
+                {EDITOR_STATUS_OPTIONS.map((item) => (
+                  <option key={item.value} value={item.value}>
+                    {item.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
           <div className="space-y-2">
             <Label>关联项目</Label>
-            <select className="select-std" value={projectId} onChange={(event) => setProjectId(event.target.value)}>
+            <select
+              className="select-std"
+              value={editor.projectId}
+              onChange={(event) => setEditor((current) => ({ ...current, projectId: event.target.value }))}
+            >
               <option value="">未关联</option>
               {projectOptions.map((item) => (
                 <option key={item.id} value={item.id}>
@@ -132,98 +435,319 @@ export function ContractsRegistryPage() {
               ))}
             </select>
           </div>
+
           <div className="space-y-2">
             <Label>相对方</Label>
-            <Input value={counterpartyName} onChange={(event) => setCounterpartyName(event.target.value)} placeholder="合同对方名称" />
+            <Input
+              value={editor.counterpartyName}
+              onChange={(event) => setEditor((current) => ({ ...current, counterpartyName: event.target.value }))}
+              placeholder="合同对方名称"
+            />
           </div>
+
           <div className="space-y-2">
             <Label>摘要</Label>
-            <Textarea value={summary} onChange={(event) => setSummary(event.target.value)} placeholder="只写最小必要摘要，不录入涉密正文" />
-          </div>
-          <div className="space-y-2">
-            <Label>归档位置</Label>
-            <Input value={archiveLocation} onChange={(event) => setArchiveLocation(event.target.value)} placeholder="NAS/文件柜/共享盘路径" />
-          </div>
-          <div className="space-y-2">
-            <Label>离线档案号</Label>
-            <Input value={offlineArchiveNo} onChange={(event) => setOfflineArchiveNo(event.target.value)} placeholder="可选" />
+            <Textarea
+              value={editor.summary}
+              onChange={(event) => setEditor((current) => ({ ...current, summary: event.target.value }))}
+              placeholder="只写最小必要摘要，不录入涉密正文"
+            />
           </div>
+
           <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>合同金额</Label>
+              <Input
+                value={editor.amount}
+                onChange={(event) => setEditor((current) => ({ ...current, amount: event.target.value }))}
+                placeholder="例如 100000.00"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>币种</Label>
+              <Input
+                value={editor.currency}
+                onChange={(event) => setEditor((current) => ({ ...current, currency: event.target.value.toUpperCase() }))}
+                placeholder="CNY"
+              />
+            </div>
+          </div>
+          {amountInvalid ? <div className="text-xs text-red-600">合同金额需为最多 12 位整数、最多 2 位小数。</div> : null}
+
+          <div className="grid gap-3 md:grid-cols-3">
+            <div className="space-y-2">
+              <Label>签署日期</Label>
+              <Input
+                type="date"
+                value={editor.signedDate}
+                onChange={(event) => setEditor((current) => ({ ...current, signedDate: event.target.value }))}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>生效日期</Label>
+              <Input
+                type="date"
+                value={editor.effectiveDate}
+                onChange={(event) => setEditor((current) => ({ ...current, effectiveDate: event.target.value }))}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>到期日期</Label>
+              <Input
+                type="date"
+                value={editor.expiryDate}
+                onChange={(event) => setEditor((current) => ({ ...current, expiryDate: event.target.value }))}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>归档位置</Label>
+            <Input
+              value={editor.archiveLocation}
+              onChange={(event) => setEditor((current) => ({ ...current, archiveLocation: event.target.value }))}
+              placeholder="NAS/文件柜/共享盘路径"
+            />
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>离线档案号</Label>
+              <Input
+                value={editor.offlineArchiveNo}
+                onChange={(event) => setEditor((current) => ({ ...current, offlineArchiveNo: event.target.value }))}
+                placeholder="可选"
+              />
+            </div>
             <div className="space-y-2">
               <Label>密级</Label>
-              <select className="select-std" value={confidentialityLevel} onChange={(event) => setConfidentialityLevel(event.target.value as ConfidentialityLevel)}>
+              <select
+                className="select-std"
+                value={editor.confidentialityLevel}
+                onChange={(event) => setEditor((current) => ({ ...current, confidentialityLevel: event.target.value as ConfidentialityLevel }))}
+              >
                 {CONFIDENTIALITY_OPTIONS.map((item) => (
-                  <option key={item} value={item}>{confidentialityLabel(item)}</option>
+                  <option key={item} value={item}>
+                    {confidentialityLabel(item)}
+                  </option>
                 ))}
               </select>
             </div>
-            <div className="space-y-2">
-              <Label>状态</Label>
-              <select className="select-std" value={status} onChange={(event) => setStatus(event.target.value)}>
-                <option value="active">active</option>
-                <option value="draft">draft</option>
-                <option value="archived">archived</option>
-              </select>
-            </div>
           </div>
+
           <div className="space-y-2">
             <Label>责任人</Label>
-            <select className="select-std" value={ownerEmployeeId} onChange={(event) => setOwnerEmployeeId(event.target.value)}>
+            <select
+              className="select-std"
+              value={editor.ownerEmployeeId}
+              onChange={(event) => setEditor((current) => ({ ...current, ownerEmployeeId: event.target.value }))}
+            >
               <option value="">默认当前用户</option>
               {employeeOptions.map((item) => (
-                <option key={item.id} value={item.id}>{item.name} · {item.employeeNo}</option>
+                <option key={item.id} value={item.id}>
+                  {item.name} · {item.employeeNo}
+                </option>
               ))}
             </select>
           </div>
+
           <Button
             type="button"
-            disabled={createMutation.isPending || !contractNo.trim() || !counterpartyName.trim() || !summary.trim() || !archiveLocation.trim()}
-            onClick={() => createMutation.mutate()}
+            disabled={
+              saveMutation.isPending ||
+              amountInvalid ||
+              !editor.contractNo.trim() ||
+              !editor.counterpartyName.trim() ||
+              !editor.summary.trim() ||
+              !editor.archiveLocation.trim() ||
+              !editor.currency.trim()
+            }
+            onClick={() => saveMutation.mutate()}
           >
-            {createMutation.isPending ? "创建中..." : "创建合同台账"}
+            {saveMutation.isPending ? (editorId ? "保存中..." : "创建中...") : editorId ? "保存修改" : "创建合同台账"}
           </Button>
         </div>
 
         <div className="card-std space-y-4 p-6">
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <h3 className="text-base font-semibold text-zinc-900">台账列表</h3>
-            <div className="text-sm text-zinc-500">{projectId ? "已按项目过滤" : "显示全部可见合同"}</div>
+          <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+            <div>
+              <h3 className="text-base font-semibold text-zinc-900">台账列表</h3>
+              <div className="mt-1 text-sm text-zinc-500">{filters.projectId ? "已按项目过滤" : "显示全部可见合同"}</div>
+            </div>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                setFilters({
+                  projectId: initialProjectId,
+                  status: "",
+                  contractType: "",
+                  counterpartyName: "",
+                  expiryDateFrom: "",
+                  expiryDateTo: "",
+                });
+                setEditorId(null);
+                setEditor(buildEmptyEditor(initialProjectId));
+              }}
+            >
+              重置筛选
+            </Button>
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            <div className="space-y-2">
+              <Label>项目</Label>
+              <select
+                className="select-std"
+                value={filters.projectId}
+                onChange={(event) => setFilters((current) => ({ ...current, projectId: event.target.value }))}
+              >
+                <option value="">全部项目</option>
+                {projectOptions.map((item) => (
+                  <option key={item.id} value={item.id}>
+                    {item.projectNo} · {item.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>状态</Label>
+              <select
+                className="select-std"
+                value={filters.status}
+                onChange={(event) => setFilters((current) => ({ ...current, status: event.target.value as FiltersState["status"] }))}
+              >
+                <option value="">全部状态</option>
+                {FILTER_STATUS_OPTIONS.map((item) => (
+                  <option key={item.value} value={item.value}>
+                    {item.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>合同类型</Label>
+              <select
+                className="select-std"
+                value={filters.contractType}
+                onChange={(event) => setFilters((current) => ({ ...current, contractType: event.target.value as FiltersState["contractType"] }))}
+              >
+                <option value="">全部类型</option>
+                {CONTRACT_TYPE_OPTIONS.map((item) => (
+                  <option key={item} value={item}>
+                    {contractTypeLabel(item)}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>相对方模糊筛选</Label>
+              <Input
+                value={filters.counterpartyName}
+                onChange={(event) => setFilters((current) => ({ ...current, counterpartyName: event.target.value }))}
+                placeholder="输入相对方名称关键字"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>到期日开始</Label>
+              <Input
+                type="date"
+                value={filters.expiryDateFrom}
+                onChange={(event) => setFilters((current) => ({ ...current, expiryDateFrom: event.target.value }))}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>到期日结束</Label>
+              <Input
+                type="date"
+                value={filters.expiryDateTo}
+                onChange={(event) => setFilters((current) => ({ ...current, expiryDateTo: event.target.value }))}
+              />
+            </div>
           </div>
 
           {contractsQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
-          {contractsQuery.isError ? <div className="text-sm text-red-600">{resolveError(contractsQuery.error, "加载合同台账失败")}</div> : null}
+          {contractsQuery.isError ? (
+            <div className="text-sm text-red-600">{resolveError(contractsQuery.error, "加载合同台账失败")}</div>
+          ) : null}
 
           <div className="space-y-3">
-            {groupedContracts.map((item) => (
+            {contracts.map((item) => (
               <div key={item.id} className="rounded-lg border border-zinc-200 p-4">
-                <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-                  <div>
-                    <div className="flex items-center gap-3">
+                <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+                  <div className="space-y-2">
+                    <div className="flex flex-wrap items-center gap-3">
                       <div className="font-semibold text-zinc-900">{item.contractNo}</div>
                       <StatusBadge status={item.status} />
-                      <span className="rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">{confidentialityLabel(item.confidentialityLevel)}</span>
+                      <span className="rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
+                        {confidentialityLabel(item.confidentialityLevel)}
+                      </span>
                     </div>
-                    <div className="mt-1 text-sm text-zinc-900">{item.counterpartyName}</div>
-                    <div className="mt-1 text-sm text-zinc-600">{item.summary}</div>
-                    <div className="mt-2 text-xs text-zinc-500">
-                      项目：{item.project ? `${item.project.projectNo} · ${item.project.name}` : "未关联"} · 责任人：{item.owner?.name ?? "-"}
+                    <div className="text-sm text-zinc-900">{item.counterpartyName}</div>
+                    <div className="text-sm text-zinc-600">{item.summary}</div>
+                    <div className="text-xs text-zinc-500">
+                      {contractTypeLabel(item.contractType)}
+                      {item.amount ? ` · ${item.amount} ${item.currency}` : " · 金额未录入"}
+                      {item.expiryDate ? ` · 到期日 ${item.expiryDate}` : " · 未设置到期日"}
+                    </div>
+                    <div className="text-xs text-zinc-500">
+                      项目：{item.project ? `${item.project.projectNo} · ${item.project.name}` : "未关联"} · 责任人：
+                      {item.owner?.name ?? "-"}
+                    </div>
+                    <div className="text-xs text-zinc-500">
+                      签署：{item.signedDate ?? "-"} · 生效：{item.effectiveDate ?? "-"} · 归档：{item.archiveLocation}
+                      {item.offlineArchiveNo ? ` · 离线档案号 ${item.offlineArchiveNo}` : ""}
                     </div>
-                    <div className="mt-1 text-xs text-zinc-500">归档：{item.archiveLocation}{item.offlineArchiveNo ? ` · 离线档案号 ${item.offlineArchiveNo}` : ""}</div>
                   </div>
-                  <div className="flex gap-2">
+
+                  <div className="flex flex-wrap gap-2 md:max-w-[260px] md:justify-end">
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => {
+                        setEditorId(item.id);
+                        setEditor(loadEditorFromItem(item));
+                      }}
+                    >
+                      编辑
+                    </Button>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="secondary"
+                      disabled={renewMutation.isPending || !["active", "expired"].includes(item.status)}
+                      onClick={() => renewMutation.mutate(item)}
+                    >
+                      续约
+                    </Button>
                     {item.project ? (
                       <Button asChild size="sm" variant="secondary" type="button">
                         <Link to={`/projects/${item.project.id}`}>查看项目</Link>
                       </Button>
                     ) : null}
-                    <Button size="sm" variant="secondary" type="button" disabled={toggleStatusMutation.isPending} onClick={() => toggleStatusMutation.mutate(item)}>
-                      {item.status === "archived" ? "恢复为 active" : "归档"}
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="secondary"
+                      disabled={toggleStatusMutation.isPending}
+                      onClick={() => toggleStatusMutation.mutate(item)}
+                    >
+                      {item.persistedStatus === "archived" ? "恢复为 active" : "归档"}
                     </Button>
                   </div>
                 </div>
               </div>
             ))}
-            {!contractsQuery.isLoading && !groupedContracts.length ? <div className="text-sm text-zinc-500">暂无合同台账。</div> : null}
+
+            {!contractsQuery.isLoading && !contracts.length ? (
+              <div className="text-sm text-zinc-500">暂无符合筛选条件的合同台账。</div>
+            ) : null}
           </div>
         </div>
       </div>