sy-form-components 0.2.8 → 0.2.9

package/dist/index.mjs

@@ -6745,6 +6745,38 @@ var normalizeField = (key, field, system = false) => ({
   width: field?.width,
   system
 });
+var SYSTEM_VALUE_ALIASES = {
+  formInstanceId: ["formInstanceId", "formInstId", "form_instance_id", "processInstanceId"],
+  instanceTitle: ["instanceTitle", "instance_title", "processInstanceTitle", "title"],
+  createdBy: ["createdBy", "created_by", "originator"],
+  createdByName: ["createdByName", "created_by_name", "originatorName", "creatorName"],
+  createdByDepartmentId: ["createdByDepartmentId", "created_by_department_id", "originatorCorp"],
+  createdByDepartmentName: [
+    "createdByDepartmentName",
+    "created_by_department_name",
+    "originatorDepartmentName",
+    "originatorCorpName"
+  ],
+  createdAt: ["createdAt", "created_at", "createTime", "gmtCreate"],
+  updatedAt: ["updatedAt", "updated_at", "modifiedTime", "modifyTime", "gmtModified"]
+};
+var pickAliasValue = (record, aliases) => {
+  for (const alias of aliases) {
+    const value = record?.[alias];
+    if (value !== void 0 && value !== null && value !== "") return value;
+  }
+  return void 0;
+};
+var normalizeDataManagementRecord = (record) => {
+  if (!record || typeof record !== "object" || Array.isArray(record)) return record;
+  const normalized = { ...record };
+  Object.entries(SYSTEM_VALUE_ALIASES).forEach(([targetKey, aliases]) => {
+    if (normalized[targetKey] !== void 0 && normalized[targetKey] !== null) return;
+    const aliasValue = pickAliasValue(record, aliases);
+    if (aliasValue !== void 0) normalized[targetKey] = aliasValue;
+  });
+  return normalized;
+};
 var PROCESS_INSTANCE_STATUS_OPTIONS = [
   { label: "\u5F85\u5904\u7406", value: "pending" },
   { label: "\u5BA1\u6279\u4E2D", value: "running" },
@@ -6799,15 +6831,29 @@ var PROCESS_SYSTEM_FIELDS = [
   )
 ];
 var BASE_SYSTEM_FIELDS = [
-  normalizeField("createTime", { label: "\u521B\u5EFA\u65F6\u95F4", componentName: "DateField", width: 170 }, true),
   normalizeField(
-    "modifiedTime",
-    { label: "\u66F4\u65B0\u65F6\u95F4", componentName: "DateField", width: 170 },
+    "instanceTitle",
+    { label: "\u5B9E\u4F8B\u6807\u9898", componentName: "TextField", width: 220, displayable: true },
     true
   ),
   normalizeField(
-    "originatorName",
-    { label: "\u521B\u5EFA\u4EBA", componentName: "TextField", width: 130 },
+    "createdByName",
+    { label: "\u521B\u5EFA\u4EBA", componentName: "TextField", width: 130, displayable: true },
+    true
+  ),
+  normalizeField(
+    "createdByDepartmentName",
+    { label: "\u521B\u5EFA\u4EBA\u90E8\u95E8", componentName: "TextField", width: 150, displayable: true },
+    true
+  ),
+  normalizeField(
+    "createdAt",
+    { label: "\u521B\u5EFA\u65F6\u95F4", componentName: "DateField", width: 170, displayable: true },
+    true
+  ),
+  normalizeField(
+    "updatedAt",
+    { label: "\u66F4\u65B0\u65F6\u95F4", componentName: "DateField", width: 170, displayable: true },
     true
   )
 ];
@@ -6828,7 +6874,7 @@ var normalizeDataManagementList = (payload) => {
   const records = body?.data || body?.records || body?.list || body?.items || [];
   const total = body?.totalCount ?? body?.total ?? body?.count ?? records.length;
   return {
-    records: Array.isArray(records) ? records : [],
+    records: Array.isArray(records) ? records.map(normalizeDataManagementRecord) : [],
     total: Number(total) || 0
   };
 };
@@ -6848,7 +6894,9 @@ var buildFilterPayload = (group) => {
 var normalizeColumnConfig = (cfg, fields) => {
   const allowed = new Set(fields.map((field) => field.fieldId));
   const configured = Array.isArray(cfg?.showFields) ? cfg.showFields.filter((fieldId) => allowed.has(fieldId)) : [];
-  const defaultShow = fields.filter((field) => !field.system || field.displayable).slice(0, 8).map((field) => field.fieldId);
+  const defaultBusinessFields = fields.filter((field) => !field.system).slice(0, 8).map((field) => field.fieldId);
+  const defaultSystemFields = fields.filter((field) => field.system && field.displayable).map((field) => field.fieldId);
+  const defaultShow = [...defaultBusinessFields, ...defaultSystemFields];
   return {
     showFields: configured.length > 0 ? configured : defaultShow,
     widths: cfg?.widths || {},
@@ -7510,8 +7558,14 @@ import { useState as useState24, useEffect as useEffect29, useCallback as useCal
 var FORM_INSTANCE_METADATA_KEYS = /* @__PURE__ */ new Set([
   "appType",
   "code",
+  "createTime",
+  "created_at",
   "createdAt",
   "createdBy",
+  "created_by",
+  "created_by_department_id",
+  "created_by_department_name",
+  "created_by_name",
   "createdByDepartmentId",
   "createdByDepartmentName",
   "createdByName",
@@ -7523,9 +7577,18 @@ var FORM_INSTANCE_METADATA_KEYS = /* @__PURE__ */ new Set([
   "formUuid",
   "instanceTitle",
   "message",
+  "modifiedTime",
+  "modifyTime",
+  "originator",
+  "originatorCorp",
+  "originatorCorpName",
+  "originatorDepartmentName",
+  "originatorName",
+  "processInstanceTitle",
   "result",
   "success",
   "title",
+  "updated_at",
   "updatedAt"
 ]);
 var isPlainRecord = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
@@ -7572,6 +7635,76 @@ var extractFormValues = (formInstance, fieldIds) => {
   const flatValues = pickKnownFields(formInstance, fieldIds);
   return Object.keys(flatValues).length > 0 ? flatValues : null;
 };
+var firstValue = (source, keys) => {
+  for (const key of keys) {
+    const value = source[key];
+    if (value !== void 0 && value !== null && value !== "") return value;
+  }
+  return void 0;
+};
+var normalizeFormInstanceInfo = (formInstance, fallback) => {
+  if (!isPlainRecord(formInstance)) return null;
+  const creator = isPlainRecord(formInstance.creator) ? formInstance.creator : {};
+  const formInstanceId = firstValue(formInstance, [
+    "formInstanceId",
+    "formInstId",
+    "form_instance_id",
+    "id"
+  ]);
+  const createdByName = firstValue(formInstance, [
+    "createdByName",
+    "created_by_name",
+    "originatorName",
+    "creatorName"
+  ]);
+  const createdByDepartmentName = firstValue(formInstance, [
+    "createdByDepartmentName",
+    "created_by_department_name",
+    "originatorDepartmentName",
+    "originatorCorpName"
+  ]);
+  return {
+    ...formInstance,
+    formInstanceId: formInstanceId || fallback?.formInstanceId || "",
+    formUuid: formInstance.formUuid || fallback?.formUuid || "",
+    appType: formInstance.appType || fallback?.appType || "",
+    data: isPlainRecord(formInstance.data) ? formInstance.data : {},
+    title: firstValue(formInstance, [
+      "title",
+      "instanceTitle",
+      "instance_title",
+      "processInstanceTitle"
+    ]) || void 0,
+    instanceTitle: firstValue(formInstance, [
+      "instanceTitle",
+      "instance_title",
+      "processInstanceTitle",
+      "title"
+    ]) || void 0,
+    creator: {
+      userId: creator.userId || creator.id || formInstance.createdBy || formInstance.originator || "",
+      name: creator.name || createdByName || "",
+      avatar: creator.avatar,
+      department: creator.department || createdByDepartmentName || ""
+    },
+    createdBy: firstValue(formInstance, ["createdBy", "created_by", "originator"]),
+    createdByName,
+    createdByDepartmentId: firstValue(formInstance, [
+      "createdByDepartmentId",
+      "created_by_department_id",
+      "originatorCorp"
+    ]),
+    createdByDepartmentName,
+    createdAt: firstValue(formInstance, ["createdAt", "created_at", "createTime", "gmtCreate"]) || "",
+    updatedAt: firstValue(formInstance, [
+      "updatedAt",
+      "updated_at",
+      "modifiedTime",
+      "modifyTime",
+      "gmtModified"
+    ])
+  };
+};
 
 // src/hooks/useFormDetail.ts
 function useFormDetail(options) {
@@ -7602,8 +7735,13 @@ function useFormDetail(options) {
       if (!permResult || !hasViewOperation(permResult.operations, "view")) {
         onPermissionDenied?.();
       }
+      const normalizedInfo = normalizeFormInstanceInfo(formResult, {
+        formUuid,
+        appType,
+        formInstanceId
+      });
       setPermissions(permResult);
-      setInstanceInfo(formResult);
+      setInstanceInfo(normalizedInfo);
       setFormData(extractFormValues(formResult, fieldIds));
     } catch (error) {
       console.error("[useFormDetail] Failed to load data:", error);
@@ -9609,8 +9747,8 @@ var SummaryPanel = ({
           )
         ] }),
         /* @__PURE__ */ jsx86("h1", { className: "m-0 break-words text-2xl font-semibold leading-9 text-ant-text md:text-[28px]", children: title }),
-        items.length > 0 && /* @__PURE__ */ jsx86("div", { className: "mt-5 grid grid-cols-1 gap-4 md:grid-cols-3", children: items.map((item) => /* @__PURE__ */ jsxs38("div", { className: "flex min-w-0 items-center gap-3", children: [
-          /* @__PURE__ */ jsx86("span", { className: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100 text-ant-text-secondary", children: item.icon }),
+        items.length > 0 && /* @__PURE__ */ jsx86("div", { className: "mt-5 grid grid-cols-1 gap-4 md:grid-cols-4", children: items.map((item) => /* @__PURE__ */ jsxs38("div", { className: "flex min-w-0 items-center gap-3", children: [
+          item.icon && /* @__PURE__ */ jsx86("span", { className: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100 text-ant-text-secondary", children: item.icon }),
           /* @__PURE__ */ jsxs38("span", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx86("span", { className: "block text-xs leading-5 text-ant-text-tertiary", children: item.label }),
             /* @__PURE__ */ jsx86("span", { className: "block break-words text-sm font-medium leading-6 text-ant-text", children: item.value || "-" })
@@ -9728,10 +9866,12 @@ import {
   Button as Button15,
   Checkbox as Checkbox5,
   ConfigProvider,
+  Divider,
   Drawer as Drawer2,
   Dropdown as Dropdown3,
   Empty as Empty5,
   Input as Input12,
+  InputNumber as InputNumber2,
   Modal as Modal8,
   Segmented,
   Select as Select6,
@@ -9742,6 +9882,7 @@ import {
   Upload as Upload3,
   message
 } from "antd";
+import dayjs5 from "dayjs";
 import {
   DeleteOutlined,
   DownloadOutlined,
@@ -9787,6 +9928,11 @@ var formatPrimitive = (value) => {
     return /* @__PURE__ */ jsx89("span", { className: "text-ant-color-text-quaternary", children: "--" });
   return String(value);
 };
+var formatDateTime = (value) => {
+  if (value === void 0 || value === null || value === "") return formatPrimitive("");
+  const parsed = dayjs5(value);
+  return parsed.isValid() ? parsed.format("YYYY-MM-DD HH:mm:ss") : String(value);
+};
 var pickOptionLabel = (field, value) => {
   const options = field.options || field.optionList || field.option_list || field.componentProps?.options || [];
   const scalar = typeof value === "object" ? value?.value ?? value?.id ?? value?.label ?? value?.name : value;
@@ -9814,6 +9960,9 @@ var renderStatusTag = (value, fieldId) => {
 var renderCellValue = (value, field) => {
   const status = renderStatusTag(value, field.fieldId);
   if (status) return status;
+  if (field.componentName === "DateField" || field.componentName === "DateTimeField") {
+    return formatDateTime(value);
+  }
   if (Array.isArray(value)) {
     if (value.length === 0) return formatPrimitive("");
     if (field.componentName === "ImageField") {
@@ -9992,6 +10141,54 @@ function FilterGroupEditor({
     }
   );
 }
+function ResizableColumnTitle({
+  label,
+  width,
+  onResize,
+  onResizeEnd
+}) {
+  const dragRef = useRef14({ startX: 0, startWidth: width, latestWidth: width });
+  const handleMouseDown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    dragRef.current = {
+      startX: event.clientX,
+      startWidth: width,
+      latestWidth: width
+    };
+    const handleMouseMove = (moveEvent) => {
+      const nextWidth = Math.min(
+        520,
+        Math.max(96, dragRef.current.startWidth + moveEvent.clientX - dragRef.current.startX)
+      );
+      dragRef.current.latestWidth = nextWidth;
+      onResize(nextWidth);
+    };
+    const handleMouseUp = () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      onResizeEnd(dragRef.current.latestWidth);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+  return /* @__PURE__ */ jsxs41("span", { className: "relative flex min-w-0 items-center pr-3", children: [
+    /* @__PURE__ */ jsx89("span", { className: "min-w-0 truncate", children: label }),
+    /* @__PURE__ */ jsx89(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "absolute -right-2 top-1/2 h-5 w-2 -translate-y-1/2 cursor-col-resize rounded hover:bg-ant-color-primary",
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onMouseDown: handleMouseDown,
+        title: "\u62D6\u62FD\u8C03\u6574\u5217\u5BBD"
+      }
+    )
+  ] });
+}
 var DataManagementList = ({
   appType,
   formUuid,
@@ -10001,6 +10198,7 @@ var DataManagementList = ({
   configScope = "global",
   title,
   detailRenderer,
+  detailPageUrlBuilder,
   submitRenderer,
   requestOverride,
   rowActions = []
@@ -10014,9 +10212,11 @@ var DataManagementList = ({
   }, [requestOverride]);
   const [fields, setFields] = useState35([]);
   const [config, setConfig] = useState35({});
+  const [formType, setFormType] = useState35("form");
   const [showFields, setShowFields] = useState35([]);
   const [lockFieldIds, setLockFieldIds] = useState35([]);
   const [widths, setWidths] = useState35({});
+  const widthsRef = useRef14({});
   const [sort, setSort] = useState35([]);
   const [density, setDensity] = useState35("middle");
   const [detailOpenMode, setDetailOpenMode] = useState35("drawer");
@@ -10053,7 +10253,7 @@ var DataManagementList = ({
   const fetchStateRef = useRef14({});
   const request = api.request;
   const getPopupContainer = useCallback17(
-    (triggerNode) => triggerNode?.parentElement || rootRef.current || document.body,
+    (triggerNode) => rootRef.current || triggerNode?.ownerDocument?.body || (typeof document !== "undefined" ? document.body : triggerNode?.parentElement),
     []
   );
   const confirmDanger = useCallback17((title2, content, onOk) => {
@@ -10063,6 +10263,9 @@ var DataManagementList = ({
     () => showFields.map((fieldId) => fields.find((field) => field.fieldId === fieldId)).filter(Boolean),
     [fields, showFields]
   );
+  useEffect36(() => {
+    widthsRef.current = widths;
+  }, [widths]);
   useEffect36(() => {
     fetchStateRef.current = {
       current,
@@ -10130,16 +10333,18 @@ var DataManagementList = ({
         }).catch(() => void 0);
         if (!mounted) return;
         const resolved = normalizeColumnConfig(saved, allFields);
+        const resolvedDetailOpenMode = detailPageUrlBuilder ? resolved.detailOpenMode : "drawer";
         const nextSearchKeyWord = saved?.filter?.searchKeyWord || "";
         const nextFilterGroup = hydrateFilterGroup(saved?.filter?.group);
         setFields(allFields);
+        setFormType(schemaResult.formType || "form");
         setConfig(saved || {});
         setShowFields(resolved.showFields);
         setWidths(resolved.widths);
         setLockFieldIds(resolved.lockFieldIds);
         setSort(resolved.sort);
         setDensity(resolved.density);
-        setDetailOpenMode(resolved.detailOpenMode);
+        setDetailOpenMode(resolvedDetailOpenMode);
         setPageSize(resolved.pageSize);
         setSearchKeyWord(nextSearchKeyWord);
         setFilterGroup(nextFilterGroup);
@@ -10161,7 +10366,7 @@ var DataManagementList = ({
     return () => {
       mounted = false;
     };
-  }, [appType, configScope, formUuid, loadData, menuFormUuid, request]);
+  }, [appType, configScope, detailPageUrlBuilder, formUuid, loadData, menuFormUuid, request]);
   const persistConfig = useCallback17(
     async (patch) => {
       const nextConfig = { ...config, ...patch };
@@ -10185,22 +10390,62 @@ var DataManagementList = ({
       showFields,
       lockFieldIds,
       widths,
+      sort,
       density,
       detailOpenMode,
       pageSize
     });
+    await loadData({ current: 1, pageSize, sort });
+  };
+  const handleSortChange = (index, patch) => {
+    setSort(
+      (prev) => prev.map((item, itemIndex) => itemIndex === index ? { ...item, ...patch } : item)
+    );
   };
+  const handleAddSort = () => {
+    const firstFieldId = showFields[0] || fields[0]?.fieldId;
+    if (!firstFieldId) return;
+    setSort((prev) => [...prev, { id: firstFieldId, isAsc: "y" }]);
+  };
+  const handleRemoveSort = (index) => {
+    setSort((prev) => prev.filter((_, itemIndex) => itemIndex !== index));
+  };
+  const updateColumnWidth = useCallback17((fieldId, width) => {
+    const nextWidth = Math.round(Math.max(96, Math.min(520, width)));
+    widthsRef.current = { ...widthsRef.current, [fieldId]: nextWidth };
+    setWidths(widthsRef.current);
+  }, []);
+  const commitColumnWidth = useCallback17(
+    (fieldId, width) => {
+      const nextWidth = Math.round(Math.max(96, Math.min(520, width)));
+      const nextWidths = { ...widthsRef.current, [fieldId]: nextWidth };
+      widthsRef.current = nextWidths;
+      setWidths(nextWidths);
+      void persistConfig({ widths: nextWidths });
+    },
+    [persistConfig]
+  );
   const handleDetail = useCallback17(
     (record) => {
       const formInstanceId = getRecordId(record);
-      if (detailOpenMode === "newPage" && typeof window !== "undefined") {
-        window.open(`/${appType}/forms/${formUuid}/detail/${formInstanceId}`, "_blank");
+      if (!formInstanceId) {
+        message.warning("\u5F53\u524D\u8BB0\u5F55\u7F3A\u5C11\u5B9E\u4F8B ID\uFF0C\u65E0\u6CD5\u6253\u5F00\u8BE6\u60C5");
         return;
       }
+      if (detailOpenMode === "newPage" && detailPageUrlBuilder && typeof window !== "undefined") {
+        const detailUrl = detailPageUrlBuilder({ record, formInstanceId: String(formInstanceId) });
+        if (detailUrl) {
+          window.open(detailUrl, "_blank");
+          return;
+        }
+      }
+      if (detailOpenMode === "newPage" && !detailPageUrlBuilder) {
+        setDetailOpenMode("drawer");
+      }
       setActiveRecord(record);
       setDetailOpen(true);
     },
-    [appType, detailOpenMode, formUuid]
+    [detailOpenMode, detailPageUrlBuilder]
   );
   const handleDelete = useCallback17(
     async (ids) => {
@@ -10316,22 +10561,33 @@ var DataManagementList = ({
     await loadData({ current: 1, pageSize });
   };
   const columns = useMemo18(() => {
-    const baseColumns = visibleFields.map((field) => ({
-      title: field.label,
-      dataIndex: field.fieldId,
-      key: field.fieldId,
-      width: widths[field.fieldId] || field.width || 160,
-      fixed: lockFieldIds.includes(field.fieldId) ? "left" : void 0,
-      ellipsis: true,
-      sorter: true,
-      render: (value) => renderCellValue(value, field)
-    })) || [];
+    const baseColumns = visibleFields.map((field) => {
+      const columnWidth = widths[field.fieldId] || field.width || 160;
+      return {
+        title: /* @__PURE__ */ jsx89(
+          ResizableColumnTitle,
+          {
+            label: field.label,
+            width: columnWidth,
+            onResize: (width) => updateColumnWidth(field.fieldId, width),
+            onResizeEnd: (width) => commitColumnWidth(field.fieldId, width)
+          }
+        ),
+        dataIndex: field.fieldId,
+        key: field.fieldId,
+        width: columnWidth,
+        fixed: lockFieldIds.includes(field.fieldId) ? "left" : void 0,
+        ellipsis: true,
+        sorter: true,
+        render: (value) => renderCellValue(value, field)
+      };
+    }) || [];
     return [
       ...baseColumns,
       {
         title: "\u64CD\u4F5C",
         key: "__actions",
-        width: 148,
+        width: 136,
         fixed: "right",
         render: (_, record) => /* @__PURE__ */ jsxs41(Space9, { size: 4, children: [
           /* @__PURE__ */ jsx89(Button15, { type: "link", size: "small", onClick: () => handleDetail(record), children: "\u8BE6\u60C5" }),
@@ -10342,18 +10598,6 @@ var DataManagementList = ({
               getPopupContainer,
               menu: {
                 items: [
-                  ...rowActions.map((action) => ({
-                    key: action.key,
-                    label: action.label,
-                    danger: action.danger,
-                    onClick: () => action.onClick(record)
-                  })),
-                  {
-                    key: "workflow",
-                    label: "\u6D41\u7A0B\u65E5\u5FD7",
-                    icon: /* @__PURE__ */ jsx89(HistoryOutlined2, {}),
-                    onClick: () => message.info("\u8BF7\u901A\u8FC7 detailRenderer \u63A5\u5165\u6D41\u7A0B\u65E5\u5FD7\u6216\u6D41\u7A0B\u56FE\u5165\u53E3")
-                  },
                   ...!readonly ? [
                     {
                       key: "delete",
@@ -10366,6 +10610,20 @@ var DataManagementList = ({
                         () => handleDelete([String(getRecordId(record))])
                       )
                     }
+                  ] : [],
+                  ...rowActions.map((action) => ({
+                    key: action.key,
+                    label: action.label,
+                    danger: action.danger,
+                    onClick: () => action.onClick(record)
+                  })),
+                  ...formType === "process" ? [
+                    {
+                      key: "workflow",
+                      label: "\u6D41\u7A0B\u65E5\u5FD7",
+                      icon: /* @__PURE__ */ jsx89(HistoryOutlined2, {}),
+                      onClick: () => message.info("\u8BF7\u901A\u8FC7 detailRenderer \u63A5\u5165\u6D41\u7A0B\u65E5\u5FD7\u6216\u6D41\u7A0B\u56FE\u5165\u53E3")
+                    }
                   ] : []
                 ]
               },
@@ -10377,16 +10635,23 @@ var DataManagementList = ({
     ];
   }, [
     confirmDanger,
+    commitColumnWidth,
+    formType,
     getPopupContainer,
     handleDelete,
     handleDetail,
     lockFieldIds,
     readonly,
     rowActions,
+    updateColumnWidth,
     visibleFields,
     widths
   ]);
   const tableSize = density === "compact" ? "small" : density === "loose" ? "large" : "middle";
+  const tableScrollX = Math.max(
+    900,
+    visibleFields.reduce((sum, field) => sum + (widths[field.fieldId] || field.width || 160), 136)
+  );
   const importPreviewColumns = useMemo18(() => {
     const keys = Array.from(
       new Set(importPreview.flatMap((record) => Object.keys(record || {})))
@@ -10403,450 +10668,525 @@ var DataManagementList = ({
       };
     });
   }, [fields, importPreview]);
-  return /* @__PURE__ */ jsx89(ConfigProvider, { getPopupContainer, children: /* @__PURE__ */ jsxs41("div", { ref: rootRef, className: `${fullHeight ? "h-full min-h-full" : ""} bg-ant-bg-layout`, children: [
-    /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex h-full max-w-[1440px] flex-col px-4 py-4 md:px-6", children: [
-      /* @__PURE__ */ jsxs41("div", { className: "mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
-        /* @__PURE__ */ jsxs41("div", { children: [
-          /* @__PURE__ */ jsx89("h1", { className: "text-xl font-semibold text-ant-color-text", children: title || "\u6570\u636E\u7BA1\u7406" }),
-          /* @__PURE__ */ jsxs41("p", { className: "mt-1 text-sm text-ant-color-text-secondary", children: [
-            "\u5171 ",
-            total,
-            " \u6761\u6570\u636E\uFF0C\u5DF2\u9009\u62E9 ",
-            selectedRowKeys.length,
-            " \u6761"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs41(Space9, { wrap: true, children: [
-          !readonly && submitRenderer && /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(PlusOutlined, {}), type: "primary", onClick: () => setSubmitOpen(true), children: "\u65B0\u589E" }),
-          /* @__PURE__ */ jsx89(
-            Input12.Search,
+  return /* @__PURE__ */ jsx89(ConfigProvider, { getPopupContainer, children: /* @__PURE__ */ jsxs41(
+    "div",
+    {
+      ref: rootRef,
+      className: `relative w-full bg-ant-bg-layout ${fullHeight ? "flex h-[calc(100vh-88px)] min-h-[560px] overflow-hidden" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex min-h-0 w-full max-w-[1440px] flex-col px-4 py-4 md:px-6", children: [
+          /* @__PURE__ */ jsxs41("div", { className: "mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [
+            /* @__PURE__ */ jsxs41("div", { children: [
+              /* @__PURE__ */ jsx89("h1", { className: "text-xl font-semibold text-ant-color-text", children: title || "\u6570\u636E\u7BA1\u7406" }),
+              /* @__PURE__ */ jsxs41("p", { className: "mt-1 text-sm text-ant-color-text-secondary", children: [
+                "\u5171 ",
+                total,
+                " \u6761\u6570\u636E\uFF0C\u5DF2\u9009\u62E9 ",
+                selectedRowKeys.length,
+                " \u6761"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs41(Space9, { wrap: true, children: [
+              !readonly && submitRenderer && /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(PlusOutlined, {}), type: "primary", onClick: () => setSubmitOpen(true), children: "\u65B0\u589E" }),
+              /* @__PURE__ */ jsx89(
+                Input12.Search,
+                {
+                  allowClear: true,
+                  className: "w-[260px]",
+                  placeholder: "\u641C\u7D22\u5173\u952E\u5B57",
+                  value: searchKeyWord,
+                  onChange: (event) => setSearchKeyWord(event.target.value),
+                  onSearch: (value) => {
+                    const nextSearchKeyWord = String(value || "");
+                    setSearchKeyWord(nextSearchKeyWord);
+                    persistConfig({
+                      filter: { searchKeyWord: nextSearchKeyWord, group: filterGroup }
+                    });
+                    loadData({
+                      current: 1,
+                      pageSize,
+                      searchKeyWord: nextSearchKeyWord,
+                      filterGroup
+                    });
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(FilterOutlined, {}), onClick: () => setFilterOpen(true), children: "\u7B5B\u9009" }),
+              /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(SettingOutlined, {}), onClick: () => setColumnOpen(true), children: "\u5217\u8BBE\u7F6E" }),
+              /* @__PURE__ */ jsx89(
+                Dropdown3,
+                {
+                  getPopupContainer,
+                  menu: {
+                    items: [
+                      {
+                        key: "selected",
+                        label: "\u5BFC\u51FA\u9009\u4E2D",
+                        disabled: selectedRowKeys.length === 0,
+                        onClick: () => {
+                          setExportScope("selected");
+                          setExportFields(showFields);
+                          setExportOpen(true);
+                        }
+                      },
+                      {
+                        key: "all",
+                        label: "\u5BFC\u51FA\u5168\u90E8",
+                        onClick: () => {
+                          setExportScope("all");
+                          setExportFields(showFields);
+                          setExportOpen(true);
+                        }
+                      },
+                      {
+                        key: "records",
+                        label: "\u5BFC\u51FA\u8BB0\u5F55",
+                        onClick: () => loadTransferRecords("export")
+                      }
+                    ]
+                  },
+                  children: /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(DownloadOutlined, {}), children: "\u5BFC\u51FA" })
+                }
+              ),
+              !readonly && /* @__PURE__ */ jsx89(
+                Dropdown3,
+                {
+                  getPopupContainer,
+                  menu: {
+                    items: [
+                      { key: "import", label: "\u5BFC\u5165\u6570\u636E", onClick: () => setImportOpen(true) },
+                      {
+                        key: "records",
+                        label: "\u5BFC\u5165\u8BB0\u5F55",
+                        onClick: () => loadTransferRecords("import")
+                      }
+                    ]
+                  },
+                  children: /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(ImportOutlined, {}), children: "\u5BFC\u5165" })
+                }
+              ),
+              /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(ReloadOutlined3, {}), onClick: () => loadData({ current, pageSize }) })
+            ] })
+          ] }),
+          selectedRowKeys.length > 0 && /* @__PURE__ */ jsxs41("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-ant-border-secondary bg-ant-bg-container px-4 py-3 shadow-sm", children: [
+            /* @__PURE__ */ jsxs41("span", { className: "text-sm text-ant-color-text-secondary", children: [
+              "\u5DF2\u9009 ",
+              selectedRowKeys.length,
+              " \u6761"
+            ] }),
+            /* @__PURE__ */ jsxs41(Space9, { wrap: true, children: [
+              !readonly && /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(SwapOutlined2, {}), onClick: handleBatchApprove, children: "\u6279\u91CF\u5BA1\u6279" }),
+              !readonly && /* @__PURE__ */ jsx89(
+                Button15,
+                {
+                  danger: true,
+                  icon: /* @__PURE__ */ jsx89(DeleteOutlined, {}),
+                  onClick: () => confirmDanger(
+                    "\u786E\u8BA4\u6279\u91CF\u5220\u9664",
+                    `\u5C06\u5220\u9664 ${selectedRowKeys.length} \u6761\u6570\u636E\uFF0C\u786E\u8BA4\u7EE7\u7EED\u5417\uFF1F`,
+                    () => handleDelete(selectedRowKeys.map(String))
+                  ),
+                  children: "\u6279\u91CF\u5220\u9664"
+                }
+              ),
+              /* @__PURE__ */ jsx89(Button15, { type: "link", onClick: () => setSelectedRowKeys([]), children: "\u53D6\u6D88\u9009\u62E9" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx89("div", { className: "relative flex-1 overflow-hidden rounded-lg border border-ant-border-secondary bg-ant-bg-container", children: /* @__PURE__ */ jsx89(
+            Table3,
             {
-              allowClear: true,
-              className: "w-[260px]",
-              placeholder: "\u641C\u7D22\u5173\u952E\u5B57",
-              value: searchKeyWord,
-              onChange: (event) => setSearchKeyWord(event.target.value),
-              onSearch: (value) => {
-                const nextSearchKeyWord = String(value || "");
-                setSearchKeyWord(nextSearchKeyWord);
-                persistConfig({
-                  filter: { searchKeyWord: nextSearchKeyWord, group: filterGroup }
-                });
+              rowKey: (record) => String(getRecordId(record)),
+              loading: loading || schemaLoading,
+              columns,
+              dataSource,
+              size: tableSize,
+              scroll: {
+                x: tableScrollX,
+                y: fullHeight ? selectedRowKeys.length > 0 ? "calc(100vh - 360px)" : "calc(100vh - 300px)" : void 0
+              },
+              rowSelection: {
+                selectedRowKeys,
+                onChange: setSelectedRowKeys
+              },
+              pagination: {
+                current,
+                pageSize,
+                total,
+                showSizeChanger: true,
+                showTotal: (count) => `\u5171 ${count} \u6761`
+              },
+              onChange: (pagination, _filters, sorter) => {
+                const sorters = Array.isArray(sorter) ? sorter : [sorter];
+                const nextSort = sorters.filter((item) => item?.field && item?.order).map((item) => ({
+                  id: String(item.field),
+                  isAsc: item.order === "ascend" ? "y" : "n"
+                }));
+                setSort(nextSort);
+                persistConfig({ sort: nextSort });
                 loadData({
-                  current: 1,
-                  pageSize,
-                  searchKeyWord: nextSearchKeyWord,
-                  filterGroup
+                  current: pagination.current || 1,
+                  pageSize: pagination.pageSize || pageSize,
+                  sort: nextSort
                 });
               }
             }
-          ),
-          /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(FilterOutlined, {}), onClick: () => setFilterOpen(true), children: "\u7B5B\u9009" }),
-          /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(SettingOutlined, {}), onClick: () => setColumnOpen(true), children: "\u5217\u8BBE\u7F6E" }),
-          /* @__PURE__ */ jsx89(
-            Dropdown3,
-            {
-              getPopupContainer,
-              menu: {
-                items: [
-                  {
-                    key: "selected",
-                    label: "\u5BFC\u51FA\u9009\u4E2D",
-                    disabled: selectedRowKeys.length === 0,
-                    onClick: () => {
-                      setExportScope("selected");
-                      setExportFields(showFields);
-                      setExportOpen(true);
-                    }
-                  },
-                  {
-                    key: "all",
-                    label: "\u5BFC\u51FA\u5168\u90E8",
-                    onClick: () => {
-                      setExportScope("all");
-                      setExportFields(showFields);
-                      setExportOpen(true);
-                    }
-                  },
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx89(
+          Modal8,
+          {
+            getContainer: false,
+            title: "\u9AD8\u7EA7\u7B5B\u9009",
+            open: filterOpen,
+            width: 760,
+            onCancel: () => setFilterOpen(false),
+            onOk: () => {
+              setFilterOpen(false);
+              persistConfig({ filter: { searchKeyWord, group: filterGroup } });
+              loadData({ current: 1, pageSize, searchKeyWord, filterGroup });
+            },
+            okText: "\u5E94\u7528\u7B5B\u9009",
+            children: /* @__PURE__ */ jsx89(FilterGroupEditor, { group: filterGroup, fields, onChange: setFilterGroup })
+          }
+        ),
+        /* @__PURE__ */ jsx89(
+          Modal8,
+          {
+            getContainer: false,
+            title: "\u5217\u8BBE\u7F6E",
+            open: columnOpen,
+            width: 920,
+            onCancel: () => setColumnOpen(false),
+            onOk: handleColumnCommit,
+            children: /* @__PURE__ */ jsxs41("div", { className: "space-y-5", children: [
+              /* @__PURE__ */ jsxs41("div", { children: [
+                /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u663E\u793A\u5217" }),
+                /* @__PURE__ */ jsx89(
+                  Checkbox5.Group,
                   {
-                    key: "records",
-                    label: "\u5BFC\u51FA\u8BB0\u5F55",
-                    onClick: () => loadTransferRecords("export")
+                    className: "grid grid-cols-2 gap-2 md:grid-cols-3",
+                    value: showFields,
+                    options: fields.map((field) => ({ label: field.label, value: field.fieldId })),
+                    onChange: (values) => setShowFields(values.map(String))
                   }
-                ]
-              },
-              children: /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(DownloadOutlined, {}), children: "\u5BFC\u51FA" })
-            }
-          ),
-          !readonly && /* @__PURE__ */ jsx89(
-            Dropdown3,
-            {
-              getPopupContainer,
-              menu: {
-                items: [
-                  { key: "import", label: "\u5BFC\u5165\u6570\u636E", onClick: () => setImportOpen(true) },
+                )
+              ] }),
+              /* @__PURE__ */ jsxs41("div", { children: [
+                /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u5217\u5BBD" }),
+                /* @__PURE__ */ jsx89("div", { className: "grid max-h-56 gap-2 overflow-auto rounded-lg border border-ant-border-secondary p-3 md:grid-cols-2", children: showFields.map((fieldId) => {
+                  const field = fields.find((item) => item.fieldId === fieldId);
+                  const width = widths[fieldId] || field?.width || 160;
+                  return /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-3", children: [
+                    /* @__PURE__ */ jsx89("span", { className: "min-w-0 truncate text-sm text-ant-color-text-secondary", children: field?.label || fieldId }),
+                    /* @__PURE__ */ jsx89(
+                      InputNumber2,
+                      {
+                        min: 96,
+                        max: 520,
+                        value: width,
+                        addonAfter: "px",
+                        onChange: (value) => updateColumnWidth(fieldId, Number(value || 160)),
+                        onBlur: () => commitColumnWidth(fieldId, widthsRef.current[fieldId] || width)
+                      }
+                    )
+                  ] }, fieldId);
+                }) })
+              ] }),
+              /* @__PURE__ */ jsxs41("div", { children: [
+                /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u51BB\u7ED3\u5217" }),
+                /* @__PURE__ */ jsx89(
+                  Select6,
                   {
-                    key: "records",
-                    label: "\u5BFC\u5165\u8BB0\u5F55",
-                    onClick: () => loadTransferRecords("import")
+                    mode: "multiple",
+                    className: "w-full",
+                    value: lockFieldIds,
+                    options: showFields.map((fieldId) => {
+                      const field = fields.find((item) => item.fieldId === fieldId);
+                      return { label: field?.label || fieldId, value: fieldId };
+                    }),
+                    onChange: setLockFieldIds
                   }
-                ]
-              },
-              children: /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(ImportOutlined, {}), children: "\u5BFC\u5165" })
-            }
-          ),
-          /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(ReloadOutlined3, {}), onClick: () => loadData({ current, pageSize }) })
-        ] })
-      ] }),
-      selectedRowKeys.length > 0 && /* @__PURE__ */ jsxs41("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-ant-border-secondary bg-ant-bg-container px-4 py-3 shadow-sm", children: [
-        /* @__PURE__ */ jsxs41("span", { className: "text-sm text-ant-color-text-secondary", children: [
-          "\u5DF2\u9009 ",
-          selectedRowKeys.length,
-          " \u6761"
-        ] }),
-        /* @__PURE__ */ jsxs41(Space9, { wrap: true, children: [
-          !readonly && /* @__PURE__ */ jsx89(Button15, { icon: /* @__PURE__ */ jsx89(SwapOutlined2, {}), onClick: handleBatchApprove, children: "\u6279\u91CF\u5BA1\u6279" }),
-          !readonly && /* @__PURE__ */ jsx89(
-            Button15,
-            {
-              danger: true,
-              icon: /* @__PURE__ */ jsx89(DeleteOutlined, {}),
-              onClick: () => confirmDanger(
-                "\u786E\u8BA4\u6279\u91CF\u5220\u9664",
-                `\u5C06\u5220\u9664 ${selectedRowKeys.length} \u6761\u6570\u636E\uFF0C\u786E\u8BA4\u7EE7\u7EED\u5417\uFF1F`,
-                () => handleDelete(selectedRowKeys.map(String))
-              ),
-              children: "\u6279\u91CF\u5220\u9664"
-            }
-          ),
-          /* @__PURE__ */ jsx89(Button15, { type: "link", onClick: () => setSelectedRowKeys([]), children: "\u53D6\u6D88\u9009\u62E9" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx89("div", { className: "relative flex-1 overflow-hidden rounded-lg border border-ant-border-secondary bg-ant-bg-container", children: /* @__PURE__ */ jsx89(
-        Table3,
-        {
-          rowKey: (record) => String(getRecordId(record)),
-          loading: loading || schemaLoading,
-          columns,
-          dataSource,
-          size: tableSize,
-          scroll: {
-            x: Math.max(900, visibleFields.length * 160),
-            y: fullHeight ? selectedRowKeys.length > 0 ? "calc(100vh - 320px)" : "calc(100vh - 260px)" : void 0
-          },
-          rowSelection: {
-            selectedRowKeys,
-            onChange: setSelectedRowKeys
-          },
-          pagination: {
-            current,
-            pageSize,
-            total,
-            showSizeChanger: true,
-            showTotal: (count) => `\u5171 ${count} \u6761`
-          },
-          onChange: (pagination, _filters, sorter) => {
-            const sorters = Array.isArray(sorter) ? sorter : [sorter];
-            const nextSort = sorters.filter((item) => item?.field && item?.order).map((item) => ({
-              id: String(item.field),
-              isAsc: item.order === "ascend" ? "y" : "n"
-            }));
-            setSort(nextSort);
-            persistConfig({ sort: nextSort });
-            loadData({
-              current: pagination.current || 1,
-              pageSize: pagination.pageSize || pageSize,
-              sort: nextSort
-            });
+                )
+              ] }),
+              /* @__PURE__ */ jsx89(Divider, { className: "my-1" }),
+              /* @__PURE__ */ jsxs41("div", { children: [
+                /* @__PURE__ */ jsxs41("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+                  /* @__PURE__ */ jsx89("span", { className: "text-sm font-medium text-ant-color-text", children: "\u6392\u5E8F\u89C4\u5219" }),
+                  /* @__PURE__ */ jsx89(Button15, { size: "small", onClick: handleAddSort, disabled: fields.length === 0, children: "\u6DFB\u52A0\u6392\u5E8F" })
+                ] }),
+                /* @__PURE__ */ jsx89("div", { className: "space-y-2", children: sort.length === 0 ? /* @__PURE__ */ jsx89("div", { className: "rounded-lg border border-dashed border-ant-border-secondary px-3 py-4 text-center text-sm text-ant-color-text-tertiary", children: "\u6682\u65E0\u6392\u5E8F\u89C4\u5219" }) : sort.map((item, index) => /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx89(
+                    Select6,
+                    {
+                      className: "min-w-0 flex-1",
+                      value: item.id,
+                      options: fields.map((field) => ({
+                        label: field.label,
+                        value: field.fieldId
+                      })),
+                      onChange: (value) => handleSortChange(index, { id: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx89(
+                    Segmented,
+                    {
+                      value: item.isAsc,
+                      options: [
+                        { label: "\u5347\u5E8F", value: "y" },
+                        { label: "\u964D\u5E8F", value: "n" }
+                      ],
+                      onChange: (value) => handleSortChange(index, { isAsc: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx89(
+                    Button15,
+                    {
+                      danger: true,
+                      type: "text",
+                      icon: /* @__PURE__ */ jsx89(DeleteOutlined, {}),
+                      onClick: () => handleRemoveSort(index)
+                    }
+                  )
+                ] }, `${item.id}_${index}`)) })
+              ] }),
+              /* @__PURE__ */ jsxs41("div", { className: "grid gap-4 md:grid-cols-3", children: [
+                /* @__PURE__ */ jsxs41("div", { children: [
+                  /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u8868\u683C\u5BC6\u5EA6" }),
+                  /* @__PURE__ */ jsx89(
+                    Segmented,
+                    {
+                      block: true,
+                      value: density,
+                      options: [
+                        { label: "\u7D27\u51D1", value: "compact" },
+                        { label: "\u6807\u51C6", value: "middle" },
+                        { label: "\u5BBD\u677E", value: "loose" }
+                      ],
+                      onChange: (value) => setDensity(value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs41("div", { children: [
+                  /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u8BE6\u60C5\u6253\u5F00\u65B9\u5F0F" }),
+                  /* @__PURE__ */ jsx89(
+                    Segmented,
+                    {
+                      block: true,
+                      value: detailOpenMode,
+                      options: detailPageUrlBuilder ? [
+                        { label: "\u62BD\u5C49", value: "drawer" },
+                        { label: "\u65B0\u9875", value: "newPage" }
+                      ] : [{ label: "\u62BD\u5C49", value: "drawer" }],
+                      onChange: (value) => setDetailOpenMode(value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs41("div", { children: [
+                  /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u9875\u5927\u5C0F" }),
+                  /* @__PURE__ */ jsx89(
+                    Select6,
+                    {
+                      className: "w-full",
+                      value: pageSize,
+                      options: [10, 20, 50, 100].map((value) => ({ label: `${value} \u6761`, value })),
+                      onChange: setPageSize
+                    }
+                  )
+                ] })
+              ] })
+            ] })
           }
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx89(
-      Modal8,
-      {
-        getContainer: false,
-        title: "\u9AD8\u7EA7\u7B5B\u9009",
-        open: filterOpen,
-        width: 760,
-        onCancel: () => setFilterOpen(false),
-        onOk: () => {
-          setFilterOpen(false);
-          persistConfig({ filter: { searchKeyWord, group: filterGroup } });
-          loadData({ current: 1, pageSize, searchKeyWord, filterGroup });
-        },
-        okText: "\u5E94\u7528\u7B5B\u9009",
-        children: /* @__PURE__ */ jsx89(FilterGroupEditor, { group: filterGroup, fields, onChange: setFilterGroup })
-      }
-    ),
-    /* @__PURE__ */ jsx89(
-      Modal8,
-      {
-        getContainer: false,
-        title: "\u5217\u8BBE\u7F6E",
-        open: columnOpen,
-        width: 720,
-        onCancel: () => setColumnOpen(false),
-        onOk: handleColumnCommit,
-        children: /* @__PURE__ */ jsxs41("div", { className: "space-y-5", children: [
-          /* @__PURE__ */ jsxs41("div", { children: [
-            /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u663E\u793A\u5217" }),
-            /* @__PURE__ */ jsx89(
+        ),
+        /* @__PURE__ */ jsx89(
+          Modal8,
+          {
+            getContainer: false,
+            title: exportScope === "selected" ? "\u5BFC\u51FA\u9009\u4E2D\u6570\u636E" : "\u5BFC\u51FA\u5168\u90E8\u6570\u636E",
+            open: exportOpen,
+            onCancel: () => setExportOpen(false),
+            footer: /* @__PURE__ */ jsxs41(Space9, { children: [
+              /* @__PURE__ */ jsx89(Button15, { onClick: () => setExportOpen(false), children: "\u53D6\u6D88" }),
+              /* @__PURE__ */ jsx89(
+                Button15,
+                {
+                  type: "primary",
+                  loading: exporting,
+                  disabled: exportScope === "selected" && selectedRowKeys.length === 0,
+                  onClick: () => handleExport(exportScope),
+                  children: exportScope === "selected" ? `\u5BFC\u51FA\u9009\u4E2D (${selectedRowKeys.length})` : "\u5BFC\u51FA\u5168\u90E8"
+                }
+              )
+            ] }),
+            children: /* @__PURE__ */ jsx89(
               Checkbox5.Group,
               {
-                className: "grid grid-cols-2 gap-2 md:grid-cols-3",
-                value: showFields,
+                className: "grid grid-cols-2 gap-2",
+                value: exportFields,
                 options: fields.map((field) => ({ label: field.label, value: field.fieldId })),
-                onChange: (values) => setShowFields(values.map(String))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs41("div", { children: [
-            /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u51BB\u7ED3\u5217" }),
-            /* @__PURE__ */ jsx89(
-              Select6,
-              {
-                mode: "multiple",
-                className: "w-full",
-                value: lockFieldIds,
-                options: showFields.map((fieldId) => {
-                  const field = fields.find((item) => item.fieldId === fieldId);
-                  return { label: field?.label || fieldId, value: fieldId };
-                }),
-                onChange: setLockFieldIds
+                onChange: (values) => setExportFields(values.map(String))
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxs41("div", { className: "grid gap-4 md:grid-cols-3", children: [
-            /* @__PURE__ */ jsxs41("div", { children: [
-              /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u8868\u683C\u5BC6\u5EA6" }),
+          }
+        ),
+        /* @__PURE__ */ jsx89(
+          Modal8,
+          {
+            getContainer: false,
+            title: "\u6279\u91CF\u5BA1\u6279",
+            open: batchApprovalOpen,
+            onCancel: () => setBatchApprovalOpen(false),
+            onOk: handleBatchApprovalConfirm,
+            okText: batchApprovalAction === "approved" ? "\u786E\u8BA4\u901A\u8FC7" : "\u786E\u8BA4\u62D2\u7EDD",
+            confirmLoading: batchApproving,
+            children: /* @__PURE__ */ jsxs41("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs41("div", { className: "text-sm text-ant-color-text-secondary", children: [
+                "\u5DF2\u9009\u62E9 ",
+                selectedRowKeys.length,
+                " \u6761\u8BB0\u5F55"
+              ] }),
               /* @__PURE__ */ jsx89(
                 Segmented,
                 {
                   block: true,
-                  value: density,
+                  value: batchApprovalAction,
                   options: [
-                    { label: "\u7D27\u51D1", value: "compact" },
-                    { label: "\u6807\u51C6", value: "middle" },
-                    { label: "\u5BBD\u677E", value: "loose" }
+                    { label: "\u540C\u610F", value: "approved" },
+                    { label: "\u62D2\u7EDD", value: "rejected" }
                   ],
-                  onChange: (value) => setDensity(value)
+                  onChange: (value) => setBatchApprovalAction(value)
+                }
+              ),
+              /* @__PURE__ */ jsx89(
+                Input12.TextArea,
+                {
+                  value: batchApprovalComments,
+                  rows: 4,
+                  maxLength: 500,
+                  showCount: true,
+                  placeholder: "\u586B\u5199\u5BA1\u6279\u610F\u89C1",
+                  onChange: (event) => setBatchApprovalComments(event.target.value)
                 }
               )
-            ] }),
-            /* @__PURE__ */ jsxs41("div", { children: [
-              /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u8BE6\u60C5\u6253\u5F00\u65B9\u5F0F" }),
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs41(
+          Modal8,
+          {
+            getContainer: false,
+            title: "\u5BFC\u5165\u6570\u636E",
+            open: importOpen,
+            width: 720,
+            onCancel: () => setImportOpen(false),
+            onOk: handleImportConfirm,
+            okButtonProps: { disabled: !importBase64 },
+            okText: "\u786E\u8BA4\u5BFC\u5165",
+            children: [
+              /* @__PURE__ */ jsx89(
+                Upload3.Dragger,
+                {
+                  accept: ".xlsx,.xls",
+                  maxCount: 1,
+                  beforeUpload: handleImportPreview,
+                  onRemove: () => {
+                    setImportBase64("");
+                    setImportPreview([]);
+                  },
+                  children: /* @__PURE__ */ jsx89("p", { className: "text-ant-color-text-secondary", children: "\u62D6\u62FD Excel \u6587\u4EF6\u5230\u6B64\u5904\uFF0C\u6216\u70B9\u51FB\u9009\u62E9\u6587\u4EF6" })
+                }
+              ),
+              importPreview.length > 0 && /* @__PURE__ */ jsxs41("div", { className: "mt-4", children: [
+                /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u5BFC\u5165\u9884\u89C8" }),
+                /* @__PURE__ */ jsx89(
+                  Table3,
+                  {
+                    size: "small",
+                    dataSource: importPreview,
+                    columns: importPreviewColumns,
+                    scroll: { x: Math.max(600, (importPreviewColumns?.length || 0) * 150) },
+                    pagination: false,
+                    rowKey: (_, index) => String(index)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs41(
+          Drawer2,
+          {
+            getContainer: false,
+            rootStyle: { position: "absolute" },
+            styles: { body: { padding: 24, overflow: "auto" } },
+            title: recordTab === "import" ? "\u5BFC\u5165\u8BB0\u5F55" : "\u5BFC\u51FA\u8BB0\u5F55",
+            open: recordsOpen,
+            width: 720,
+            onClose: () => setRecordsOpen(false),
+            children: [
               /* @__PURE__ */ jsx89(
                 Segmented,
                 {
-                  block: true,
-                  value: detailOpenMode,
+                  value: recordTab,
                   options: [
-                    { label: "\u62BD\u5C49", value: "drawer" },
-                    { label: "\u65B0\u9875", value: "newPage" }
+                    { label: "\u5BFC\u5165\u8BB0\u5F55", value: "import" },
+                    { label: "\u5BFC\u51FA\u8BB0\u5F55", value: "export" }
                   ],
-                  onChange: (value) => setDetailOpenMode(value)
+                  onChange: (value) => loadTransferRecords(value)
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs41("div", { children: [
-              /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u9875\u5927\u5C0F" }),
+              ),
               /* @__PURE__ */ jsx89(
-                Select6,
+                Table3,
                 {
-                  className: "w-full",
-                  value: pageSize,
-                  options: [10, 20, 50, 100].map((value) => ({ label: `${value} \u6761`, value })),
-                  onChange: setPageSize
+                  className: "mt-4",
+                  size: "small",
+                  dataSource: transferRecords,
+                  rowKey: (record) => record.id || record.recordId
                 }
               )
-            ] })
-          ] })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx89(
-      Modal8,
-      {
-        getContainer: false,
-        title: exportScope === "selected" ? "\u5BFC\u51FA\u9009\u4E2D\u6570\u636E" : "\u5BFC\u51FA\u5168\u90E8\u6570\u636E",
-        open: exportOpen,
-        onCancel: () => setExportOpen(false),
-        footer: /* @__PURE__ */ jsxs41(Space9, { children: [
-          /* @__PURE__ */ jsx89(Button15, { onClick: () => setExportOpen(false), children: "\u53D6\u6D88" }),
-          /* @__PURE__ */ jsx89(
-            Button15,
-            {
-              type: "primary",
-              loading: exporting,
-              disabled: exportScope === "selected" && selectedRowKeys.length === 0,
-              onClick: () => handleExport(exportScope),
-              children: exportScope === "selected" ? `\u5BFC\u51FA\u9009\u4E2D (${selectedRowKeys.length})` : "\u5BFC\u51FA\u5168\u90E8"
-            }
-          )
-        ] }),
-        children: /* @__PURE__ */ jsx89(
-          Checkbox5.Group,
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx89(
+          Drawer2,
           {
-            className: "grid grid-cols-2 gap-2",
-            value: exportFields,
-            options: fields.map((field) => ({ label: field.label, value: field.fieldId })),
-            onChange: (values) => setExportFields(values.map(String))
+            getContainer: false,
+            rootStyle: { position: "absolute" },
+            styles: { body: { padding: 0, overflow: "auto" } },
+            title: "\u8BE6\u60C5",
+            open: detailOpen,
+            width: 720,
+            onClose: () => setDetailOpen(false),
+            destroyOnClose: true,
+            children: activeRecord && detailRenderer ? detailRenderer({
+              record: activeRecord,
+              formInstanceId: String(getRecordId(activeRecord)),
+              onClose: () => setDetailOpen(false)
+            }) : /* @__PURE__ */ jsx89(Empty5, { description: "\u8BF7\u901A\u8FC7 detailRenderer \u63A5\u5165\u8BE6\u60C5\u6A21\u677F" })
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx89(
-      Modal8,
-      {
-        getContainer: false,
-        title: "\u6279\u91CF\u5BA1\u6279",
-        open: batchApprovalOpen,
-        onCancel: () => setBatchApprovalOpen(false),
-        onOk: handleBatchApprovalConfirm,
-        okText: batchApprovalAction === "approved" ? "\u786E\u8BA4\u901A\u8FC7" : "\u786E\u8BA4\u62D2\u7EDD",
-        confirmLoading: batchApproving,
-        children: /* @__PURE__ */ jsxs41("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs41("div", { className: "text-sm text-ant-color-text-secondary", children: [
-            "\u5DF2\u9009\u62E9 ",
-            selectedRowKeys.length,
-            " \u6761\u8BB0\u5F55"
-          ] }),
-          /* @__PURE__ */ jsx89(
-            Segmented,
-            {
-              block: true,
-              value: batchApprovalAction,
-              options: [
-                { label: "\u540C\u610F", value: "approved" },
-                { label: "\u62D2\u7EDD", value: "rejected" }
-              ],
-              onChange: (value) => setBatchApprovalAction(value)
-            }
-          ),
-          /* @__PURE__ */ jsx89(
-            Input12.TextArea,
-            {
-              value: batchApprovalComments,
-              rows: 4,
-              maxLength: 500,
-              showCount: true,
-              placeholder: "\u586B\u5199\u5BA1\u6279\u610F\u89C1",
-              onChange: (event) => setBatchApprovalComments(event.target.value)
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs41(
-      Modal8,
-      {
-        getContainer: false,
-        title: "\u5BFC\u5165\u6570\u636E",
-        open: importOpen,
-        width: 720,
-        onCancel: () => setImportOpen(false),
-        onOk: handleImportConfirm,
-        okButtonProps: { disabled: !importBase64 },
-        okText: "\u786E\u8BA4\u5BFC\u5165",
-        children: [
-          /* @__PURE__ */ jsx89(
-            Upload3.Dragger,
-            {
-              accept: ".xlsx,.xls",
-              maxCount: 1,
-              beforeUpload: handleImportPreview,
-              onRemove: () => {
-                setImportBase64("");
-                setImportPreview([]);
-              },
-              children: /* @__PURE__ */ jsx89("p", { className: "text-ant-color-text-secondary", children: "\u62D6\u62FD Excel \u6587\u4EF6\u5230\u6B64\u5904\uFF0C\u6216\u70B9\u51FB\u9009\u62E9\u6587\u4EF6" })
-            }
-          ),
-          importPreview.length > 0 && /* @__PURE__ */ jsxs41("div", { className: "mt-4", children: [
-            /* @__PURE__ */ jsx89("div", { className: "mb-2 text-sm font-medium text-ant-color-text", children: "\u5BFC\u5165\u9884\u89C8" }),
-            /* @__PURE__ */ jsx89(
-              Table3,
-              {
-                size: "small",
-                dataSource: importPreview,
-                columns: importPreviewColumns,
-                scroll: { x: Math.max(600, (importPreviewColumns?.length || 0) * 150) },
-                pagination: false,
-                rowKey: (_, index) => String(index)
+        ),
+        /* @__PURE__ */ jsx89(
+          Drawer2,
+          {
+            getContainer: false,
+            rootStyle: { position: "absolute" },
+            styles: { body: { padding: 0, overflow: "auto" } },
+            title: "\u65B0\u589E\u6570\u636E",
+            open: submitOpen,
+            width: 720,
+            onClose: () => setSubmitOpen(false),
+            destroyOnClose: true,
+            children: submitRenderer ? submitRenderer({
+              onClose: () => setSubmitOpen(false),
+              onSubmitted: () => {
+                setSubmitOpen(false);
+                loadData({ current: 1, pageSize });
               }
-            )
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs41(
-      Drawer2,
-      {
-        getContainer: false,
-        title: recordTab === "import" ? "\u5BFC\u5165\u8BB0\u5F55" : "\u5BFC\u51FA\u8BB0\u5F55",
-        open: recordsOpen,
-        width: 720,
-        onClose: () => setRecordsOpen(false),
-        children: [
-          /* @__PURE__ */ jsx89(
-            Segmented,
-            {
-              value: recordTab,
-              options: [
-                { label: "\u5BFC\u5165\u8BB0\u5F55", value: "import" },
-                { label: "\u5BFC\u51FA\u8BB0\u5F55", value: "export" }
-              ],
-              onChange: (value) => loadTransferRecords(value)
-            }
-          ),
-          /* @__PURE__ */ jsx89(
-            Table3,
-            {
-              className: "mt-4",
-              size: "small",
-              dataSource: transferRecords,
-              rowKey: (record) => record.id || record.recordId
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx89(
-      Drawer2,
-      {
-        getContainer: false,
-        title: "\u8BE6\u60C5",
-        open: detailOpen,
-        width: 720,
-        onClose: () => setDetailOpen(false),
-        destroyOnClose: true,
-        children: activeRecord && detailRenderer ? detailRenderer({
-          record: activeRecord,
-          formInstanceId: String(getRecordId(activeRecord)),
-          onClose: () => setDetailOpen(false)
-        }) : /* @__PURE__ */ jsx89(Empty5, { description: "\u8BF7\u901A\u8FC7 detailRenderer \u63A5\u5165\u8BE6\u60C5\u6A21\u677F" })
-      }
-    ),
-    /* @__PURE__ */ jsx89(
-      Drawer2,
-      {
-        getContainer: false,
-        title: "\u65B0\u589E\u6570\u636E",
-        open: submitOpen,
-        width: 720,
-        onClose: () => setSubmitOpen(false),
-        destroyOnClose: true,
-        children: submitRenderer ? submitRenderer({
-          onClose: () => setSubmitOpen(false),
-          onSubmitted: () => {
-            setSubmitOpen(false);
-            loadData({ current: 1, pageSize });
+            }) : /* @__PURE__ */ jsx89(Empty5, { description: "\u8BF7\u901A\u8FC7 submitRenderer \u63A5\u5165\u63D0\u4EA4\u6A21\u677F" })
           }
-        }) : /* @__PURE__ */ jsx89(Empty5, { description: "\u8BF7\u901A\u8FC7 submitRenderer \u63A5\u5165\u63D0\u4EA4\u6A21\u677F" })
-      }
-    )
-  ] }) });
+        )
+      ]
+    }
+  ) });
 };
 
 // src/templates/FormSubmitTemplate.tsx
@@ -11104,52 +11444,66 @@ var InnerFormContent = ({
       actions,
       inDrawer,
       position: "inline",
-      className: "mt-6 -mx-5 -mb-5 rounded-b-lg md:-mx-6 md:-mb-6"
+      className: inDrawer ? "mt-5 -mx-4 -mb-4 rounded-b-lg md:-mx-5 md:-mb-5" : "mt-6 -mx-5 -mb-5 rounded-b-lg md:-mx-6 md:-mb-6"
     }
   ) : null;
-  return /* @__PURE__ */ jsxs42(RuntimePageShell, { inDrawer, children: [
-    /* @__PURE__ */ jsxs42("div", { className: "space-y-6", children: [
-      header,
-      enableDraft && hasDraft && !submitted && /* @__PURE__ */ jsx90("div", { children: /* @__PURE__ */ jsx90(
-        DraftManager,
-        {
-          hasDraft,
-          draftTimestamp,
-          onRestore: handleRestoreDraft,
-          onDiscard: clearDraft
-        }
-      ) }),
-      !submitted ? /* @__PURE__ */ jsxs42("div", { className: "rounded-lg border border-ant-border-secondary bg-ant-bg-container p-5 md:p-6", children: [
-        departmentSelector,
-        beforeForm,
-        renderForm ? renderForm({ schema, config }) : /* @__PURE__ */ jsx90(FormRenderer, { columns: 2 }),
-        afterForm,
-        actionsNode
-      ] }) : successInfo && /* @__PURE__ */ jsx90(
-        SubmitSuccessCard,
-        {
-          info: successInfo,
-          mode: submitSuccessMode,
-          isRedirecting,
-          countdown,
-          onContinue: handleContinue,
-          onViewDetail: handleViewDetail,
-          renderSuccess
-        }
-      ),
-      footer
-    ] }),
-    /* @__PURE__ */ jsx90(
-      ProcessPreview,
-      {
-        open: previewOpen,
-        routes: previewRoutes,
-        loading: previewLoading,
-        onClose: () => setPreviewOpen(false),
-        onConfirm: handlePreviewConfirm
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs42(
+    RuntimePageShell,
+    {
+      inDrawer,
+      maxWidth: inDrawer ? "100%" : 1240,
+      contentClassName: inDrawer ? "px-4 py-4 md:px-5" : "py-4 md:py-6",
+      children: [
+        /* @__PURE__ */ jsxs42("div", { className: "space-y-6", children: [
+          header,
+          enableDraft && hasDraft && !submitted && /* @__PURE__ */ jsx90("div", { children: /* @__PURE__ */ jsx90(
+            DraftManager,
+            {
+              hasDraft,
+              draftTimestamp,
+              onRestore: handleRestoreDraft,
+              onDiscard: clearDraft
+            }
+          ) }),
+          !submitted ? /* @__PURE__ */ jsxs42(
+            "div",
+            {
+              className: `rounded-lg border border-ant-border-secondary bg-ant-bg-container ${inDrawer ? "p-4 md:p-5" : "p-5 shadow-sm md:p-6"}`,
+              children: [
+                departmentSelector,
+                beforeForm,
+                renderForm ? renderForm({ schema, config }) : /* @__PURE__ */ jsx90(FormRenderer, { columns: 2 }),
+                afterForm,
+                actionsNode
+              ]
+            }
+          ) : successInfo && /* @__PURE__ */ jsx90(
+            SubmitSuccessCard,
+            {
+              info: successInfo,
+              mode: submitSuccessMode,
+              isRedirecting,
+              countdown,
+              onContinue: handleContinue,
+              onViewDetail: handleViewDetail,
+              renderSuccess
+            }
+          ),
+          footer
+        ] }),
+        /* @__PURE__ */ jsx90(
+          ProcessPreview,
+          {
+            open: previewOpen,
+            routes: previewRoutes,
+            loading: previewLoading,
+            onClose: () => setPreviewOpen(false),
+            onConfirm: handlePreviewConfirm
+          }
+        )
+      ]
+    }
+  );
 };
 var FormSubmitTemplate = ({
   schema,
@@ -11196,6 +11550,7 @@ var FormSubmitTemplate = ({
 
 // src/templates/FormDetailTemplate.tsx
 import { useCallback as useCallback19, useMemo as useMemo19, useRef as useRef15, useState as useState37 } from "react";
+import dayjs6 from "dayjs";
 
 // src/templates/PageSkeleton.tsx
 import { Skeleton as Skeleton3 } from "antd";
@@ -11267,6 +11622,11 @@ function FormDataBridge({
   formDataRef.current = getFormData2;
   return null;
 }
+var formatDateTime2 = (value) => {
+  if (!value || typeof value !== "string") return value || "-";
+  const parsed = dayjs6(value);
+  return parsed.isValid() ? parsed.format("YYYY-MM-DD HH:mm:ss") : value;
+};
 var InnerDetailContent = ({
   schema,
   formUuid,
@@ -11377,14 +11737,36 @@ var InnerDetailContent = ({
     renderSummary && instanceInfo ? renderSummary(instanceInfo) : /* @__PURE__ */ jsx92(
       SummaryPanel,
       {
-        title: instanceInfo?.title || formData?.instanceTitle || schema.formMeta.title,
+        title: instanceInfo?.title || instanceInfo?.instanceTitle || schema.formMeta.title,
         eyebrow: `\u6570\u636E\u5B9E\u4F8B ${formInstanceId?.slice(0, 8) || "-"}`,
-        creator: instanceInfo?.creator ? {
-          name: instanceInfo.creator.name,
-          avatar: instanceInfo.creator.avatar,
-          department: instanceInfo.creator.department
+        creator: instanceInfo?.creator || instanceInfo?.createdByName ? {
+          name: instanceInfo?.creator?.name || instanceInfo?.createdByName,
+          avatar: instanceInfo?.creator?.avatar,
+          department: instanceInfo?.creator?.department || instanceInfo?.createdByDepartmentName
         } : void 0,
-        createdAt: instanceInfo?.createdAt,
+        createdAt: formatDateTime2(instanceInfo?.createdAt),
+        metaItems: [
+          {
+            key: "creator",
+            label: "\u521B\u5EFA\u4EBA",
+            value: instanceInfo?.creator?.name || instanceInfo?.createdByName || "\u672A\u77E5\u7528\u6237"
+          },
+          {
+            key: "department",
+            label: "\u521B\u5EFA\u4EBA\u90E8\u95E8",
+            value: instanceInfo?.creator?.department || instanceInfo?.createdByDepartmentName || "-"
+          },
+          {
+            key: "createdAt",
+            label: "\u521B\u5EFA\u65F6\u95F4",
+            value: formatDateTime2(instanceInfo?.createdAt)
+          },
+          {
+            key: "updatedAt",
+            label: "\u66F4\u65B0\u65F6\u95F4",
+            value: formatDateTime2(instanceInfo?.updatedAt)
+          }
+        ],
         status: mode === "edit" ? { label: "\u7F16\u8F91\u4E2D", tone: "brand" } : void 0
       }
     ),