@canvas-components/react-list-table 0.3.44 → 0.3.46

package/dist/index.cjs

@@ -3,12 +3,14 @@
 var react = require('react');
 var reactDom = require('react-dom');
 var reactComponents = require('@canvas-components/react-components');
-var print = require('@canvas-components/print');
+var reactPrintDesign = require('@canvas-components/react-print-design');
 var listTable = require('@canvas-components/list-table');
 var jsxRuntime = require('react/jsx-runtime');
 var chart = require('@canvas-components/chart');
 var date = require('@canvas-components/utils/date');
 var number = require('@canvas-components/utils/number');
+var printDesign = require('@canvas-components/print-design');
+var print = require('@canvas-components/print');
 
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
@@ -33,7 +35,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles/table-overrides.css
-styleInject(".react-list-table-filter-option {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-filter-option:hover {\n  background: #f3f4f6;\n}\n.react-list-table-menu-action,\n.react-list-table-menu-row {\n  font-size: 14px;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-list-table-menu-action:hover,\n.react-list-table-menu-row:hover {\n  background: #f3f4f6 !important;\n}\n.react-list-table-custom-selection-copy {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-custom-selection-copy:hover {\n  background: #4096ff !important;\n}\n.react-list-table-custom-selection-input > .canvas-react-input-number-handler-down {\n  display: none;\n}\n.react-list-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-list-table-menu-action:hover .react-list-table-menu-chevron,\n.react-list-table-menu-row:hover .react-list-table-menu-chevron {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n.react-list-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
+styleInject(".react-list-table-host {\n  touch-action: none;\n  min-width: 0;\n  min-height: 0;\n}\n.react-list-table-filter-option {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-filter-option:hover {\n  background: #f3f4f6;\n}\n.react-list-table-menu-action,\n.react-list-table-menu-row {\n  font-size: 14px;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-list-table-menu-action:hover,\n.react-list-table-menu-row:hover {\n  background: #f3f4f6 !important;\n}\n.react-list-table-custom-selection-copy {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-custom-selection-copy:hover {\n  background: #4096ff !important;\n}\n.react-list-table-custom-selection-input > .canvas-react-input-number-handler-down {\n  display: none;\n}\n.react-list-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-list-table-menu-action:hover .react-list-table-menu-chevron,\n.react-list-table-menu-row:hover .react-list-table-menu-chevron {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n.react-list-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
 var conditionalOperators = {
   eq: "\u7B49\u4E8E",
   neq: "\u4E0D\u7B49\u4E8E",
@@ -949,11 +951,20 @@ function ReactTableContextMenuView(props) {
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(ResetMenu, { request }),
-            buildCacheMenuItems(request).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            request.columnSettingsCacheAvailable === true && buildCacheMenuItems(request).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
               MenuSubmenu,
               {
                 label: "\u7F13\u5B58\u5230\u672C\u5730",
-                items: buildCacheMenuItems(request)
+                items: [
+                  ...buildCacheMenuItems(request),
+                  {
+                    key: "view-cache-config",
+                    label: "\u67E5\u770B\u7F13\u5B58\u914D\u7F6E",
+                    separatorBefore: true,
+                    disabled: request.columnSettingsCacheAvailable !== true,
+                    onClick: props.onViewCacheConfig
+                  }
+                ]
               }
             ) : null
           ]
@@ -1050,22 +1061,41 @@ function ReactTableContextMenuView(props) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(MenuAction, { label: "\u67E5\u627E", onClick: request.onOpenSearch }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          request.onPrint ? /* @__PURE__ */ jsxRuntime.jsx(
+            MenuAction,
+            {
+              label: "\u6253\u5370",
+              onClick: () => {
+                setMenuOpen(false);
+                request.onPrint?.();
+              }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
             MenuSubmenu,
             {
               label: "\u6253\u5370",
               items: [
-                {
-                  key: "print-direct",
-                  label: "\u76F4\u63A5\u6253\u5370",
-                  onClick: request.onGetPrintData ? () => {
+                ...props.printTemplates && props.printTemplates.length > 1 ? props.printTemplates.map((template) => ({
+                  key: `print-template-${template.key}`,
+                  label: `\u76F4\u63A5\u6253\u5370 ${template.label}`,
+                  disabled: template.disabled,
+                  onClick: template.disabled ? void 0 : () => {
                     setMenuOpen(false);
-                    props.onDirectPrint?.();
-                  } : void 0
-                },
+                    props.onPrintTemplate?.(template.key);
+                  }
+                })) : [
+                  {
+                    key: "print-direct",
+                    label: "\u76F4\u63A5\u6253\u5370",
+                    onClick: request.onGetPrintData ? () => {
+                      setMenuOpen(false);
+                      props.onDirectPrint?.();
+                    } : void 0
+                  }
+                ],
                 {
                   key: "print-configure",
-                  label: "\u6253\u5370\u914D\u7F6E",
+                  label: "\u6253\u5370\u8BBE\u8BA1",
                   onClick: request.onGetPrintData ? () => {
                     setMenuOpen(false);
                     props.onPrint?.();
@@ -1074,6 +1104,14 @@ function ReactTableContextMenuView(props) {
               ]
             }
           ),
+          request.customItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            CustomContextMenuItem,
+            {
+              item,
+              onClose: () => setMenuOpen(false)
+            },
+            item.key
+          )),
           /* @__PURE__ */ jsxRuntime.jsx(
             MenuAction,
             {
@@ -1348,13 +1386,21 @@ function ReactTableContextMenuView(props) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ZoomMenu, { value: request.zoom ?? 1, onChange: request.onChangeZoom }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          request.columnSettingsCacheAvailable === true ? /* @__PURE__ */ jsxRuntime.jsx(
             MenuSubmenu,
             {
               label: "\u7F13\u5B58\u5230\u672C\u5730",
-              items: buildCacheMenuItems(request)
+              items: [
+                ...buildCacheMenuItems(request),
+                {
+                  key: "view-cache-config",
+                  label: "\u67E5\u770B\u7F13\u5B58\u914D\u7F6E",
+                  separatorBefore: true,
+                  onClick: props.onViewCacheConfig
+                }
+              ]
             }
-          ),
+          ) : null,
           request.columns && request.onToggleColumn ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(MenuDivider, {}),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1499,6 +1545,31 @@ function MenuAction(props) {
     }
   );
 }
+function CustomContextMenuItem(props) {
+  const { item, onClose } = props;
+  const children = item.children?.filter(Boolean) ?? [];
+  if (children.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MenuSubmenu, { label: item.label, items: [], minWidth: 240, children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      CustomContextMenuItem,
+      {
+        item: child,
+        onClose
+      },
+      child.key
+    )) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuAction,
+    {
+      label: item.label,
+      disabled: item.disabled,
+      onClick: item.disabled ? void 0 : () => {
+        onClose();
+        item.onClick?.();
+      }
+    }
+  );
+}
 function MenuSubmenu(props) {
   const { label, items, header, footer, children, minWidth = 220 } = props;
   const menuItems = items.filter((item) => item.onClick || item.disabled);
@@ -3458,6 +3529,107 @@ var moreFormatChoiceSelectedStyle = {
   background: "#f3f4f6",
   color: "#1677ff"
 };
+function ReactListTableCacheConfigDialog(props) {
+  const [rows, setRows] = react.useState([]);
+  const [config, setConfig] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  react.useEffect(() => {
+    let active = true;
+    setLoading(true);
+    void listTable.getListTableStoredColumnConfig(props.storageKey).then((config2) => {
+      if (!active) return;
+      setConfig(config2 ?? null);
+      setRows(
+        config2 ? createCacheConfigRows(config2) : []
+      );
+      setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [props.storageKey]);
+  const removeRow = (key) => {
+    if (!config) return;
+    const next = removeCacheConfigKey(config, key);
+    setConfig(next);
+    setRows((current) => current.filter((row) => row.key !== key));
+    void listTable.saveListTableStoredColumnConfig(props.storageKey, next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.ReactModal,
+    {
+      open: true,
+      title: "\u7F13\u5B58\u914D\u7F6E",
+      width: 1180,
+      fullscreenable: true,
+      onCancel: props.onClose,
+      footer: false,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 24, textAlign: "center", color: "#64748b" }, children: "\u6B63\u5728\u8BFB\u53D6\u7F13\u5B58\u914D\u7F6E\u2026" }) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 24, textAlign: "center", color: "#64748b" }, children: "\u5F53\u524D\u6CA1\u6709\u7F13\u5B58\u914D\u7F6E" }) : props.renderTable({
+        tableId: "list-table-cache-config",
+        columns: [
+          {
+            key: "key",
+            dataIndex: "key",
+            title: "\u914D\u7F6E\u9879",
+            width: 190,
+            cellStyle: { verticalAlign: "top" }
+          },
+          {
+            key: "value",
+            dataIndex: "value",
+            title: "\u7F13\u5B58\u503C",
+            width: 850,
+            cellType: "json",
+            cellStyle: {
+              verticalAlign: "top",
+              fontFamily: "monospace",
+              fontSize: 12
+            }
+          },
+          {
+            key: "operation",
+            dataIndex: "key",
+            title: "\u64CD\u4F5C",
+            width: 90,
+            render: (_value, row) => ({
+              type: "button",
+              text: "\u79FB\u9664",
+              buttonType: "link",
+              size: "small",
+              danger: true,
+              popconfirm: {
+                title: "\u786E\u8BA4\u79FB\u9664\u7F13\u5B58\u914D\u7F6E\u5417\uFF1F",
+                description: `\u5C06\u79FB\u9664\u201C${row.key}\u201D\u914D\u7F6E\u9879\u3002`,
+                okText: "\u79FB\u9664",
+                cancelText: "\u53D6\u6D88"
+              },
+              cursor: "pointer",
+              onClick: () => removeRow(row.key)
+            })
+          }
+        ],
+        dataSource: rows,
+        rowKey: "key",
+        rowHeight: "auto",
+        pagination: false,
+        toolbar: false,
+        contextMenu: false,
+        style: { width: "100%", height: "min(68vh, 620px)" }
+      })
+    }
+  );
+}
+function createCacheConfigRows(config) {
+  return Object.entries(config).map(([key, value]) => ({
+    key,
+    value
+  }));
+}
+function removeCacheConfigKey(config, key) {
+  const next = { ...config };
+  delete next[key];
+  return next;
+}
 var SEARCH_MODAL_BODY_STYLE = {
   padding: 12
 };
@@ -3835,6 +4007,8 @@ function ReactListTableExportNameDialog({
     if (request.columns && !selectedKeys.length) return setError("\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u5217");
     if (request.columns && cacheEnabled) {
       writeExportCache(storageKey, { version: 1, rows, selectedKeys: selectedKeys.map(String), includeSummary });
+    } else if (request.columns) {
+      writeExportCache(storageKey, null);
     }
     request.onConfirm(
       `${fileName.trim()}${extension}`,
@@ -3990,32 +4164,6 @@ function createPrintColumns(columns, summaryColumns = []) {
     };
   });
 }
-function readPrintSettings(storageKey) {
-  if (!storageKey) return null;
-  try {
-    const value = JSON.parse(
-      localStorage.getItem(`canvas-table-print:${storageKey}`) ?? "null"
-    );
-    if (!value || typeof value !== "object") return null;
-    const settings = value;
-    if (settings.version !== 2 || settings.presetName !== void 0 && typeof settings.presetName !== "string" || !Array.isArray(settings.columns) || !settings.columns.every(
-      (column) => column && typeof column.key === "string" && Number.isFinite(column.width) && column.width >= 10
-    ) || !Array.isArray(settings.selectedKeys) || !settings.selectedKeys.every((key) => typeof key === "string") || !Number.isInteger(settings.rowsPerPage) || settings.rowsPerPage < 1)
-      return null;
-    return settings;
-  } catch {
-    return null;
-  }
-}
-function writePrintSettings(storageKey, settings) {
-  if (!storageKey) return;
-  try {
-    const key = `canvas-table-print:${storageKey}`;
-    if (settings) localStorage.setItem(key, JSON.stringify(settings));
-    else localStorage.removeItem(key);
-  } catch {
-  }
-}
 function restorePrintColumns(columns, settings) {
   const current = new Map(columns.map((column) => [column.key, column]));
   const restored = [];
@@ -4028,1577 +4176,254 @@ function restorePrintColumns(columns, settings) {
   return [...restored, ...current.values()];
 }
 function resolvePrintSelectedKeys(sourceColumns, presetConfig, cached) {
-  const cachedColumnKeys = new Set(cached?.columns.map((column) => column.key));
+  new Set(cached?.columns.map((column) => column.key));
   const presetKeys = presetConfig?.selectedKeys ? new Set(presetConfig.selectedKeys) : null;
   return sourceColumns.filter((column) => {
-    if (cached) {
-      return cachedColumnKeys.has(column.key) ? cached.selectedKeys.includes(column.key) : true;
-    }
     if (presetKeys) return presetKeys.has(column.key);
     return true;
   }).map((column) => column.key);
 }
-function createCachedPrintTableOptions(source, storageKey, printPresets = []) {
-  const cached = readPrintSettings(storageKey);
-  const selectedPreset = cached?.presetName ? printPresets.find((preset) => preset.name === cached.presetName) : cached ? void 0 : printPresets[0];
-  const config = selectedPreset?.config;
-  const settings = { ...config, ...cached };
+function createTableDocument(source, preset) {
+  const config = preset?.config;
+  const page = printDesign.createPrintDesignPage("\u8868\u683C\u6253\u5370");
+  const [paperWidth, paperHeight] = print.BROWSER_PRINT_PAPER_SIZES[config?.paperSize ?? "a4"];
+  page.width = config?.orientation === "landscape" ? paperHeight : paperWidth;
+  page.height = config?.orientation === "landscape" ? paperWidth : paperHeight;
+  page.orientation = config?.orientation ?? "portrait";
+  page.margins = config?.pageMargins ?? page.margins;
+  const selectedKeys = resolvePrintSelectedKeys(source.columns, config);
   const columns = restorePrintColumns(
-    restorePrintColumns(
-      createPrintColumns(source.columns, source.summaryColumns),
-      config?.columns ? { columns: config.columns } : null
-    ),
-    cached
-  );
-  const selectedKeys = resolvePrintSelectedKeys(source.columns, config, cached);
-  return configurePrintTable(
-    source,
-    columns,
-    selectedKeys,
-    settings.rowsPerPage ?? 30,
-    {
-      includeSummary: settings.includeSummary ?? Boolean(
-        source.summaryRow || source.summaryColumns?.some(
-          (column) => column.summary.type !== "none"
-        )
-      ),
-      rowHeight: settings.rowHeight ?? 8,
-      title: settings.title ?? "\u8868\u683C\u6253\u5370",
-      subtitle: settings.subtitle ?? "",
-      titleFontSize: settings.titleFontSize ?? 18,
-      subtitleFontSize: settings.subtitleFontSize ?? 12,
-      summaryPosition: settings.summaryPosition ?? "last-page",
-      showPageNumbers: settings.showPageNumbers ?? false,
-      pageNumberPosition: settings.pageNumberPosition ?? "right",
-      showPrintTime: settings.showPrintTime ?? false,
-      printTimePosition: settings.printTimePosition ?? "left",
-      pageMargins: settings.pageMargins ?? {
-        top: 12,
-        right: 12,
-        bottom: 12,
-        left: 12
-      },
-      paperSize: settings.paperSize ?? "a4",
-      orientation: settings.orientation ?? "portrait",
-      useCellBorders: settings.useCellBorders ?? true,
-      borderColor: settings.borderColor ?? "#000000",
-      textColor: settings.textColor ?? "#000000",
-      headerBackgroundColor: settings.headerBackgroundColor ?? "#f2f5f8",
-      summaryBackgroundColor: settings.summaryBackgroundColor ?? "#f2f5f8"
-    }
+    createPrintColumns(source.columns, source.summaryColumns),
+    config?.columns ? { columns: config.columns } : null
+  ).filter((column) => selectedKeys.includes(column.key));
+  const left = page.margins?.left ?? 10;
+  const right = page.margins?.right ?? 10;
+  const bottom = page.margins?.bottom ?? 10;
+  const contentWidth = page.width - left - right;
+  const widthSum = columns.reduce((sum, column) => sum + column.width, 0);
+  const rowHeight = config?.rowHeight ?? 8;
+  const footerY = page.height - bottom - 6;
+  const tableY = 28;
+  const tableHeight = footerY - tableY - 8;
+  const rowsPerPage = Math.max(1, Math.floor((tableHeight - 9) / rowHeight));
+  const pageCount = Math.max(1, Math.ceil(source.rows.length / rowsPerPage));
+  const printedAt = (/* @__PURE__ */ new Date()).toLocaleString("zh-CN");
+  const pages = Array.from(
+    { length: pageCount },
+    (_, index) => ({
+      ...page,
+      id: index === 0 ? page.id : printDesign.createPrintDesignPage().id,
+      name: `\u8868\u683C\u6253\u5370 ${index + 1}`,
+      elements: [
+        {
+          id: `list-table-title-${index}`,
+          type: "text",
+          name: "\u6807\u9898",
+          x: left,
+          y: 12,
+          width: contentWidth,
+          height: 10,
+          text: config?.title ?? "\u8868\u683C\u6253\u5370",
+          fontSize: config?.titleFontSize ?? 18,
+          fontWeight: "700",
+          textAlign: "center"
+        },
+        {
+          id: `list-table-data-${index}`,
+          type: "table",
+          name: "\u8868\u683C\u6570\u636E",
+          x: left,
+          y: tableY,
+          width: contentWidth,
+          height: tableHeight,
+          dataMode: "binding",
+          dataPath: `listTable.pages.${index}.rows`,
+          dataSource: [],
+          columns: columns.map((column) => ({
+            key: column.key,
+            title: column.title,
+            dataIndex: column.key,
+            width: widthSum > 0 ? Math.max(24, column.width / widthSum * 720) : 120,
+            align: column.align
+          })),
+          rowHeight,
+          headerRowHeight: 9,
+          showHeader: true
+        },
+        {
+          id: `list-table-print-time-${index}`,
+          type: "text",
+          name: "\u6253\u5370\u65F6\u95F4",
+          x: left,
+          y: footerY,
+          width: contentWidth / 2,
+          height: 6,
+          text: `\u6253\u5370\u65F6\u95F4\uFF1A${printedAt}`,
+          fontSize: 9,
+          color: "#000000"
+        },
+        {
+          id: `list-table-page-number-${index}`,
+          type: "text",
+          name: "\u5206\u9875\u4FE1\u606F",
+          x: left + contentWidth / 2,
+          y: footerY,
+          width: contentWidth / 2,
+          height: 6,
+          text: `\u7B2C ${index + 1} \u9875 / \u5171 ${pageCount} \u9875`,
+          textAlign: "right",
+          fontSize: 9,
+          color: "#000000"
+        }
+      ]
+    })
   );
+  return printDesign.createPrintDesignDocument({
+    name: preset?.name ?? "\u8868\u683C\u6253\u5370\u6A21\u677F",
+    pages
+  });
 }
-async function configurePrintTable(source, columns, selectedKeys, rowsPerPage, settings = {}) {
-  const selected = new Set(selectedKeys);
-  const activeColumns = columns.filter((column) => selected.has(column.key));
-  const sourceIndexes = new Map(
-    source.columns.map((column, index) => [column.key, index])
+function mapPrintSourceRows(source) {
+  return source.rows.map(
+    (row) => Object.fromEntries(
+      source.columns.map((column, index) => [column.key, row[index] ?? ""])
+    )
   );
-  const summaries = Object.fromEntries(
-    activeColumns.map((column) => [
-      column.key,
-      {
-        type: column.summaryType ?? "none",
-        showTypePrefix: column.showTypePrefix === "yes",
-        precision: column.precision,
-        roundingMode: column.roundingMode ?? "round",
-        preserveTrailingZeros: column.preserveTrailingZeros === "yes"
-      }
-    ])
+}
+function createTableData(source, document2, rows = mapPrintSourceRows(source)) {
+  const firstTable = document2.pages[0]?.elements.find(
+    (item) => item.type === "table"
   );
-  const summaryRow = settings.includeSummary ? source.getSummaryRow ? await source.getSummaryRow({
-    columnKeys: activeColumns.map((column) => column.key),
-    sortState: [],
-    summaries,
-    includeSummary: true
-  }) : source.summaryRow ? activeColumns.map(
-    (column) => source.summaryRow?.[sourceIndexes.get(column.key) ?? -1] ?? ""
-  ) : void 0 : void 0;
+  const rowsPerPage = firstTable?.type === "table" ? Math.max(
+    1,
+    Math.floor(
+      (firstTable.height - (firstTable.showHeader === false ? 0 : firstTable.headerRowHeight ?? 9)) / (firstTable.rowHeight ?? 8)
+    )
+  ) : Math.max(1, Math.ceil(rows.length / document2.pages.length));
   return {
-    title: settings.title ?? "\u8868\u683C\u6253\u5370",
-    ...settings.subtitle ? { subtitle: settings.subtitle } : {},
-    titleFontSize: settings.titleFontSize ?? 18,
-    subtitleFontSize: settings.subtitleFontSize ?? 12,
-    columns: activeColumns.map(({ key, title, width, align, overflow }) => ({
-      key,
-      title,
-      width,
-      ...align ? { align } : {},
-      ...overflow ? { overflow } : {}
-    })),
-    rows: source.rows.map(
-      (row) => activeColumns.map(
-        (column) => row[sourceIndexes.get(column.key) ?? -1] ?? ""
-      )
-    ),
-    rowsPerPage,
-    rowHeight: settings.rowHeight ?? 8,
-    ...settings.includeSummary && summaryRow ? {
-      summaryRow: activeColumns.map(
-        (_column, index) => summaryRow[index] ?? ""
-      ),
-      summaryPosition: settings.summaryPosition ?? "last-page"
-    } : {},
-    showPageNumbers: settings.showPageNumbers ?? false,
-    pageNumberPosition: settings.pageNumberPosition ?? "right",
-    showPrintTime: settings.showPrintTime ?? false,
-    printTimePosition: settings.printTimePosition ?? "left",
-    pageMargins: settings.pageMargins ?? {
-      top: 12,
-      right: 12,
-      bottom: 12,
-      left: 12
-    },
-    paperSize: settings.paperSize ?? "a4",
-    orientation: settings.orientation ?? "portrait",
-    useCellBorders: settings.useCellBorders ?? true,
-    borderColor: settings.borderColor ?? "#000000",
-    textColor: settings.textColor ?? "#000000",
-    headerBackgroundColor: settings.headerBackgroundColor ?? "#f2f5f8",
-    summaryBackgroundColor: settings.summaryBackgroundColor ?? "#f2f5f8"
+    listTable: {
+      rows,
+      columns: source.columns.map((column) => ({ key: column.key })),
+      pages: document2.pages.map((_, index) => ({
+        rows: rows.slice(index * rowsPerPage, (index + 1) * rowsPerPage)
+      }))
+    }
   };
 }
-var summaryOptions2 = [
-  { value: "original", label: "\u539F\u6C47\u603B" },
-  { value: "none", label: "\u65E0\u6C47\u603B" },
-  { value: "title", label: "\u6807\u9898" },
-  { value: "sum", label: "\u6C42\u548C" },
-  { value: "avg", label: "\u5E73\u5747\u503C" },
-  { value: "count", label: "\u8BA1\u6570" },
-  { value: "unionCount", label: "\u53BB\u91CD\u8BA1\u6570" },
-  { value: "rowCount", label: "\u884C\u6570" },
-  { value: "mergedRowCount", label: "\u5408\u5E76\u884C\u6570" },
-  { value: "min", label: "\u6700\u5C0F\u503C" },
-  { value: "max", label: "\u6700\u5927\u503C" }
-];
-var roundingOptions2 = [
-  { value: "round", label: "\u56DB\u820D\u4E94\u5165" },
-  { value: "floor", label: "\u5411\u4E0B\u53D6\u6574" },
-  { value: "ceil", label: "\u5411\u4E0A\u53D6\u6574" },
-  { value: "truncate", label: "\u622A\u65AD" }
-];
-var booleanOptions2 = [
-  { value: "yes", label: "\u662F" },
-  { value: "no", label: "\u5426" }
-];
-function ReactListTablePrintDialog(props) {
-  const tableId = react.useId();
-  const [cached] = react.useState(() => readPrintSettings(props.storageKey));
-  const initialPreset = cached?.presetName ? props.printPresets?.find((preset) => preset.name === cached.presetName) : cached ? void 0 : props.printPresets?.[0];
-  const initialConfig = initialPreset?.config;
-  const [columns, setColumns] = react.useState(
-    () => restorePrintColumns(
-      restorePrintColumns(
-        createPrintColumns(props.source.columns, props.source.summaryColumns),
-        initialConfig?.columns ? { columns: initialConfig.columns } : null
-      ),
-      cached
-    )
-  );
-  const [selectedKeys, setSelectedKeys] = react.useState(
-    () => resolvePrintSelectedKeys(props.source.columns, initialConfig, cached)
-  );
-  const [rowsPerPage, setRowsPerPage] = react.useState(
-    cached?.rowsPerPage ?? initialConfig?.rowsPerPage ?? 30
-  );
-  const [rowHeight, setRowHeight] = react.useState(
-    cached?.rowHeight ?? initialConfig?.rowHeight ?? 8
-  );
-  const [autoCalculateRows, setAutoCalculateRows] = react.useState(
-    cached?.autoCalculateRowsPerPage ?? initialConfig?.autoCalculateRowsPerPage ?? false
-  );
-  const [title, setTitle] = react.useState(
-    cached?.title ?? initialConfig?.title ?? "\u8868\u683C\u6253\u5370"
+function getPrintSourceFormat(source) {
+  return JSON.stringify(
+    source.columns.map((column) => String(column.key)).sort()
   );
-  const [subtitle, setSubtitle] = react.useState(
-    cached?.subtitle ?? initialConfig?.subtitle ?? ""
+}
+function printTableTemplate(source, popup, document2 = createTableDocument(source)) {
+  const data = createTableData(source, document2);
+  printDesign.printPrintDesignHtml(popup, printDesign.transformPrintDesignToHtml(document2, { data }));
+  return true;
+}
+function ReactListTablePrintDesignDialog(props) {
+  const [fullscreen, setFullscreen] = react.useState(true);
+  const document2 = react.useMemo(
+    () => createTableDocument(props.source),
+    [props.source]
   );
-  const [titleFontSize, setTitleFontSize] = react.useState(
-    cached?.titleFontSize ?? initialConfig?.titleFontSize ?? 18
+  const [boundDocument, setBoundDocument] = react.useState(document2);
+  const rows = react.useMemo(() => mapPrintSourceRows(props.source), [props.source]);
+  const defaultTemplates = react.useMemo(
+    () => [
+      document2,
+      ...props.printPresets?.map(
+        (preset) => createTableDocument(props.source, preset)
+      ) ?? [],
+      ...props.printTemplates ?? []
+    ],
+    [document2, props.printPresets, props.printTemplates, props.source]
   );
-  const [subtitleFontSize, setSubtitleFontSize] = react.useState(
-    cached?.subtitleFontSize ?? initialConfig?.subtitleFontSize ?? 12
+  const data = react.useMemo(
+    () => createTableData(props.source, boundDocument, rows),
+    [props.source, boundDocument, rows]
   );
-  const [includeSummary, setIncludeSummary] = react.useState(
-    () => cached?.includeSummary ?? initialConfig?.includeSummary ?? Boolean(
-      props.source.summaryRow || props.source.summaryColumns?.some(
-        (column) => column.summary.type !== "none"
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.ReactModal,
+    {
+      open: true,
+      fullscreen,
+      closable: false,
+      fullscreenable: false,
+      footer: false,
+      width: "min(96vw, 1440px)",
+      style: { height: fullscreen ? "100%" : "min(88vh, 900px)" },
+      bodyStyle: { padding: 0, overflow: "hidden", display: "flex" },
+      onCancel: props.onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactPrintDesign.ReactPrintDesign,
+        {
+          document: document2,
+          defaultTemplates,
+          data,
+          dataFormatKey: getPrintSourceFormat(props.source),
+          onChange: setBoundDocument,
+          storeKey: props.storeKey,
+          fullscreen,
+          onFullscreenChange: setFullscreen,
+          onClose: props.onClose,
+          style: { flex: 1 }
+        }
       )
-    )
-  );
-  const [summaryPosition, setSummaryPosition] = react.useState(cached?.summaryPosition ?? initialConfig?.summaryPosition ?? "last-page");
-  const [showPageNumbers, setShowPageNumbers] = react.useState(
-    cached?.showPageNumbers ?? initialConfig?.showPageNumbers ?? false
-  );
-  const [pageNumberPosition, setPageNumberPosition] = react.useState(cached?.pageNumberPosition ?? initialConfig?.pageNumberPosition ?? "right");
-  const [showPrintTime, setShowPrintTime] = react.useState(
-    cached?.showPrintTime ?? initialConfig?.showPrintTime ?? false
-  );
-  const [printTimePosition, setPrintTimePosition] = react.useState(cached?.printTimePosition ?? initialConfig?.printTimePosition ?? "left");
-  const [pageMargins, setPageMargins] = react.useState(
-    cached?.pageMargins ?? initialConfig?.pageMargins ?? {
-      top: 12,
-      right: 12,
-      bottom: 12,
-      left: 12
     }
   );
-  const [paperSize, setPaperSize] = react.useState(cached?.paperSize ?? initialConfig?.paperSize ?? "a4");
-  const [orientation, setOrientation] = react.useState(
-    cached?.orientation ?? initialConfig?.orientation ?? "portrait"
-  );
-  const [useCellBorders, setUseCellBorders] = react.useState(
-    cached?.useCellBorders ?? initialConfig?.useCellBorders ?? true
-  );
-  const [borderColor, setBorderColor] = react.useState(
-    cached?.borderColor ?? initialConfig?.borderColor ?? "#000000"
-  );
-  const [textColor, setTextColor] = react.useState(
-    cached?.textColor ?? initialConfig?.textColor ?? "#000000"
-  );
-  const [headerBackgroundColor, setHeaderBackgroundColor] = react.useState(
-    cached?.headerBackgroundColor ?? initialConfig?.headerBackgroundColor ?? "#f2f5f8"
-  );
-  const [summaryBackgroundColor, setSummaryBackgroundColor] = react.useState(
-    cached?.summaryBackgroundColor ?? initialConfig?.summaryBackgroundColor ?? "#f2f5f8"
-  );
-  const [selectedPresetName, setSelectedPresetName] = react.useState(
-    initialPreset?.name ?? ""
-  );
-  const [showSectionDividers, setShowSectionDividers] = react.useState(
-    cached?.showSectionDividers ?? initialConfig?.showSectionDividers ?? true
-  );
-  const [sectionDividerTopSpacing, setSectionDividerTopSpacing] = react.useState(
-    cached?.sectionDividerTopSpacing ?? initialConfig?.sectionDividerTopSpacing ?? 4
-  );
-  const [sectionDividerBottomSpacing, setSectionDividerBottomSpacing] = react.useState(
-    cached?.sectionDividerBottomSpacing ?? initialConfig?.sectionDividerBottomSpacing ?? 4
-  );
-  const [formItemSpacing, setFormItemSpacing] = react.useState(
-    cached?.formItemSpacing ?? initialConfig?.formItemSpacing ?? 4
-  );
-  const [cacheEnabled, setCacheEnabled] = react.useState(Boolean(props.storageKey));
-  const [error, setError] = react.useState("");
-  const [previewHtml, setPreviewHtml] = react.useState("");
-  const [previewOpen, setPreviewOpen] = react.useState(false);
-  const [printFullscreen, setPrintFullscreen] = react.useState(false);
-  const [previewFullscreen, setPreviewFullscreen] = react.useState(false);
-  const [previewMode, setPreviewMode] = react.useState("render");
-  const [previewViewport, setPreviewViewport] = react.useState(() => ({
-    width: typeof window === "undefined" ? 1280 : window.innerWidth,
-    height: typeof window === "undefined" ? 900 : window.innerHeight
-  }));
-  const selectedColumnKeys = new Set(selectedKeys.map(String));
-  const layoutWarning = print.getBrowserPrintLayoutWarning({
-    columns: columns.filter((column) => selectedColumnKeys.has(column.key)),
-    pageMargins,
-    paperSize,
-    orientation
-  });
-  const rowLayoutWarning = print.getBrowserPrintRowLayoutWarning({
-    pageMargins,
-    paperSize,
-    orientation,
-    rowsPerPage,
-    rowHeight,
-    includeSummary,
-    summaryPosition,
-    showPageNumbers,
-    showPrintTime,
-    titleFontSize,
-    subtitleFontSize,
-    subtitle
-  });
-  const printLayoutWarning = [layoutWarning, rowLayoutWarning].filter(Boolean).join("\uFF1B");
-  const [paperWidth, paperHeight] = print.BROWSER_PRINT_PAPER_SIZES[paperSize];
-  const previewPaperWidth = orientation === "portrait" ? paperWidth : paperHeight;
-  const previewPaperHeight = orientation === "portrait" ? paperHeight : paperWidth;
-  const previewListHeight = Math.max(
-    240,
-    previewFullscreen ? previewViewport.height - 168 : Math.min(previewViewport.height - 260, 900)
-  );
-  const previewListWidth = Math.max(
-    320,
-    (previewFullscreen ? previewViewport.width : Math.min(previewViewport.width * 0.96, 1280)) - 48
-  );
-  const pageWidthPixels = previewPaperWidth * 96 / 25.4;
-  const pageHeightPixels = previewPaperHeight * 96 / 25.4;
-  const previewScale = Math.min(
-    1,
-    (previewListWidth - 24) / pageWidthPixels,
-    (previewListHeight - 24) / pageHeightPixels
-  );
-  const previewItemHeight = Math.ceil(pageHeightPixels * previewScale + 24);
-  const previewPages = react.useMemo(() => {
-    if (!previewHtml || typeof DOMParser === "undefined") return [];
-    const parsed = new DOMParser().parseFromString(previewHtml, "text/html");
-    const styles = Array.from(parsed.head.querySelectorAll("style")).map((style) => style.outerHTML).join("");
-    const pages = Array.from(parsed.body.children).filter(
-      (element) => element.classList.contains("page")
-    );
-    const pageStyles = `<style>html,body{box-sizing:border-box;width:${pageWidthPixels}px;height:${pageHeightPixels}px;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden;background:#fff}body{display:block}.page{box-sizing:border-box;flex:0 0 auto;width:${previewPaperWidth}mm;max-width:none;height:${previewPaperHeight}mm;margin:0;overflow:hidden}</style>`;
-    return pages.map((page, index) => ({
-      index,
-      srcDoc: `<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">${styles}${pageStyles}</head><body>${page.outerHTML}</body></html>`
-    }));
-  }, [
-    pageHeightPixels,
-    pageWidthPixels,
-    previewHtml,
-    previewPaperHeight,
-    previewPaperWidth
-  ]);
-  react.useEffect(() => {
-    const updateViewport = () => {
-      setPreviewViewport({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    };
-    window.addEventListener("resize", updateViewport);
-    return () => window.removeEventListener("resize", updateViewport);
-  }, []);
-  const autoCalculateColumnWidths = () => {
-    const selectedColumnSet = new Set(selectedKeys.map(String));
-    const selectedColumns = columns.filter(
-      (column) => selectedColumnSet.has(column.key)
-    );
-    const calculated = print.calculateBrowserPrintColumnWidths(selectedColumns, {
-      pageMargins,
-      paperSize,
-      orientation
-    });
-    if (!calculated) {
-      setError("\u5F53\u524D\u7EB8\u5F20\u53EF\u7528\u5BBD\u5EA6\u4E0D\u8DB3\u4EE5\u5BB9\u7EB3\u6240\u9009\u5217\uFF08\u6BCF\u5217\u81F3\u5C11 10mm\uFF09");
-      return;
-    }
-    const widths = new Map(calculated.map(({ key, width }) => [key, width]));
-    setColumns(
-      (current) => current.map(
-        (column) => widths.has(column.key) ? { ...column, width: widths.get(column.key) } : column
-      )
-    );
-    setError("");
-  };
-  const autoCalculateRowsPerPage = () => {
-    const calculated = print.calculateBrowserPrintRowsPerPage({
-      pageMargins,
-      paperSize,
-      orientation,
-      rowHeight,
-      includeSummary,
-      summaryPosition,
-      showPageNumbers,
-      showPrintTime,
-      titleFontSize,
-      subtitleFontSize,
-      subtitle
-    });
-    if (!calculated) {
-      setError("\u5F53\u524D\u7EB8\u5F20\u53EF\u7528\u9AD8\u5EA6\u4E0D\u8DB3\u4EE5\u5BB9\u7EB3\u4E00\u884C");
-      return;
-    }
-    setRowsPerPage(calculated);
-    setError("");
-  };
-  react.useEffect(() => {
-    if (autoCalculateRows) autoCalculateRowsPerPage();
-  }, [
-    autoCalculateRows,
-    rowHeight,
-    includeSummary,
-    summaryPosition,
-    showPageNumbers,
-    showPrintTime,
-    titleFontSize,
-    subtitleFontSize,
-    subtitle,
-    paperSize,
-    orientation,
-    pageMargins
-  ]);
-  react.useEffect(() => {
-    if (showPageNumbers && showPrintTime && pageNumberPosition === printTimePosition) {
-      setPrintTimePosition(pageNumberPosition === "left" ? "center" : "left");
-    }
-  }, [showPageNumbers, showPrintTime, pageNumberPosition, printTimePosition]);
-  const createCurrentPrintOptions = () => configurePrintTable(
-    props.source,
-    columns,
-    selectedKeys.map(String),
-    rowsPerPage,
-    {
-      includeSummary,
-      rowHeight,
-      title,
-      subtitle,
-      titleFontSize,
-      subtitleFontSize,
-      summaryPosition,
-      showPageNumbers,
-      pageNumberPosition,
-      showPrintTime,
-      printTimePosition,
-      pageMargins,
-      paperSize,
-      orientation,
-      useCellBorders,
-      borderColor,
-      textColor,
-      headerBackgroundColor,
-      summaryBackgroundColor
-    }
-  );
-  const applyPrintPreset = (name) => {
-    setSelectedPresetName(name);
-    setError("");
-    if (!name) {
-      const defaultColumns = createPrintColumns(
-        props.source.columns,
-        props.source.summaryColumns
-      );
-      setColumns(defaultColumns);
-      setSelectedKeys(
-        resolvePrintSelectedKeys(props.source.columns, void 0, null)
-      );
-      setRowsPerPage(30);
-      setRowHeight(8);
-      setAutoCalculateRows(false);
-      setTitle("\u8868\u683C\u6253\u5370");
-      setSubtitle("");
-      setTitleFontSize(18);
-      setSubtitleFontSize(12);
-      setIncludeSummary(
-        Boolean(
-          props.source.summaryRow || props.source.summaryColumns?.some(
-            (column) => column.summary.type !== "none"
-          )
-        )
-      );
-      setSummaryPosition("last-page");
-      setShowPageNumbers(false);
-      setPageNumberPosition("right");
-      setShowPrintTime(false);
-      setPrintTimePosition("left");
-      setPageMargins({ top: 12, right: 12, bottom: 12, left: 12 });
-      setPaperSize("a4");
-      setOrientation("portrait");
-      setUseCellBorders(true);
-      setBorderColor("#000000");
-      setTextColor("#000000");
-      setHeaderBackgroundColor("#f2f5f8");
-      setSummaryBackgroundColor("#f2f5f8");
-      setShowSectionDividers(true);
-      setSectionDividerTopSpacing(4);
-      setSectionDividerBottomSpacing(4);
-      setFormItemSpacing(4);
-      return;
-    }
-    const preset = props.printPresets?.find((item) => item.name === name);
-    if (!preset) return;
-    const config = preset.config;
-    const baseColumns = createPrintColumns(
-      props.source.columns,
-      props.source.summaryColumns
-    );
-    setColumns(
-      restorePrintColumns(
-        baseColumns,
-        config.columns ? { columns: config.columns } : null
-      )
-    );
-    setSelectedKeys(
-      resolvePrintSelectedKeys(props.source.columns, config, null)
-    );
-    setRowsPerPage(config.rowsPerPage ?? 30);
-    setRowHeight(config.rowHeight ?? 8);
-    setAutoCalculateRows(config.autoCalculateRowsPerPage ?? false);
-    setTitle(config.title ?? "\u8868\u683C\u6253\u5370");
-    setSubtitle(config.subtitle ?? "");
-    setTitleFontSize(config.titleFontSize ?? 18);
-    setSubtitleFontSize(config.subtitleFontSize ?? 12);
-    setIncludeSummary(
-      config.includeSummary ?? Boolean(
-        props.source.summaryRow || props.source.summaryColumns?.some(
-          (column) => column.summary.type !== "none"
-        )
-      )
-    );
-    setSummaryPosition(config.summaryPosition ?? "last-page");
-    setShowPageNumbers(config.showPageNumbers ?? false);
-    setPageNumberPosition(config.pageNumberPosition ?? "right");
-    setShowPrintTime(config.showPrintTime ?? false);
-    setPrintTimePosition(config.printTimePosition ?? "left");
-    setPageMargins(
-      config.pageMargins ?? { top: 12, right: 12, bottom: 12, left: 12 }
-    );
-    setPaperSize(config.paperSize ?? "a4");
-    setOrientation(config.orientation ?? "portrait");
-    setUseCellBorders(config.useCellBorders ?? true);
-    setBorderColor(config.borderColor ?? "#000000");
-    setTextColor(config.textColor ?? "#000000");
-    setHeaderBackgroundColor(config.headerBackgroundColor ?? "#f2f5f8");
-    setSummaryBackgroundColor(config.summaryBackgroundColor ?? "#f2f5f8");
-    setShowSectionDividers(config.showSectionDividers ?? true);
-    setSectionDividerTopSpacing(config.sectionDividerTopSpacing ?? 4);
-    setSectionDividerBottomSpacing(config.sectionDividerBottomSpacing ?? 4);
-    setFormItemSpacing(config.formItemSpacing ?? 4);
-  };
-  const previewPrintHtml = async () => {
-    if (!selectedKeys.length) {
-      setError("\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u5217");
-      return;
-    }
-    if (!Number.isInteger(rowsPerPage) || rowsPerPage < 1) {
-      setError("\u6BCF\u9875\u884C\u6570\u5FC5\u987B\u662F\u6B63\u6574\u6570");
-      return;
-    }
-    if (!Number.isFinite(rowHeight) || rowHeight <= 0) {
-      setError("\u884C\u9AD8\u5FC5\u987B\u662F\u6B63\u6570");
-      return;
-    }
-    try {
-      const options = await createCurrentPrintOptions();
-      setPreviewHtml(print.createBrowserPrintPreviewHtml(options));
-      setPreviewMode("render");
-      setPreviewOpen(true);
-      setError("");
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "\u751F\u6210\u6253\u5370\u9884\u89C8\u5931\u8D25");
-    }
-  };
-  const confirm = async () => {
-    const selected = selectedKeys.map(String);
-    if (!selected.length) return setError("\u8BF7\u81F3\u5C11\u9009\u62E9\u4E00\u5217");
-    if (!Number.isInteger(rowsPerPage) || rowsPerPage < 1)
-      return setError("\u6BCF\u9875\u884C\u6570\u5FC5\u987B\u662F\u6B63\u6574\u6570");
-    if (!Number.isFinite(rowHeight) || rowHeight <= 0)
-      return setError("\u884C\u9AD8\u5FC5\u987B\u662F\u6B63\u6570");
-    if (Object.values(pageMargins).some(
-      (margin) => !Number.isFinite(margin) || margin < 0
-    )) {
-      return setError("\u6253\u5370\u8FB9\u8DDD\u5FC5\u987B\u662F\u975E\u8D1F\u6570");
-    }
-    if (columns.some(
-      (column) => !Number.isFinite(column.width) || column.width < 10
-    )) {
-      return setError("\u5217\u5BBD\u4E0D\u80FD\u5C0F\u4E8E 10 \u6BEB\u7C73");
-    }
-    const options = await createCurrentPrintOptions();
-    if (!print.printBrowserTable(options))
-      return setError("\u6D4F\u89C8\u5668\u963B\u6B62\u4E86\u6253\u5370\u7A97\u53E3\uFF0C\u8BF7\u5141\u8BB8\u6B64\u9875\u9762\u6253\u5F00\u5F39\u7A97");
-    if (cacheEnabled) {
-      writePrintSettings(props.storageKey, {
-        version: 2,
-        columns,
-        selectedKeys: selected,
-        rowsPerPage,
-        presetName: selectedPresetName || void 0,
-        rowHeight,
-        autoCalculateRowsPerPage: autoCalculateRows,
-        title,
-        subtitle,
-        titleFontSize,
-        subtitleFontSize,
-        includeSummary,
-        summaryPosition,
-        showPageNumbers,
-        pageNumberPosition,
-        showPrintTime,
-        printTimePosition,
-        pageMargins,
-        paperSize,
-        orientation,
-        useCellBorders,
-        borderColor,
-        textColor,
-        headerBackgroundColor,
-        summaryBackgroundColor,
-        showSectionDividers,
-        sectionDividerTopSpacing,
-        sectionDividerBottomSpacing,
-        formItemSpacing
-      });
-    }
-    props.onClose();
-  };
-  const tableColumns = [
-    listTable.ROW_SELECTION_COLUMN,
-    { key: "title", dataIndex: "title", title: "\u6253\u5370\u5217", width: 260 },
-    {
-      key: "width",
-      dataIndex: "width",
-      title: "\u5217\u5BBD\uFF08mm\uFF09",
-      width: 110,
-      editable: true,
-      formItemProps: { valueType: "number", clickCount: 1, min: 10 }
-    },
-    {
-      key: "align",
-      dataIndex: "align",
-      title: "\u5BF9\u9F50\u65B9\u5F0F",
-      width: 100,
-      editable: true,
-      formItemProps: {
-        valueType: "select",
-        clickCount: 1,
-        options: [
-          { value: "left", label: "\u5DE6\u5BF9\u9F50" },
-          { value: "center", label: "\u5C45\u4E2D" },
-          { value: "right", label: "\u53F3\u5BF9\u9F50" }
-        ]
-      },
-      render: (value) => value === "center" ? "\u5C45\u4E2D" : value === "right" ? "\u53F3\u5BF9\u9F50" : "\u5DE6\u5BF9\u9F50"
-    },
-    {
-      key: "overflow",
-      dataIndex: "overflow",
-      title: "\u8D85\u5BBD\u5904\u7406",
-      width: 105,
-      editable: true,
-      formItemProps: {
-        valueType: "select",
-        clickCount: 1,
-        options: [
-          { value: "ellipsis", label: "\u7701\u7565\u53F7" },
-          { value: "clip", label: "\u88C1\u5207" },
-          { value: "wrap", label: "\u6362\u884C" }
-        ]
-      },
-      render: (value) => value === "ellipsis" ? "\u7701\u7565\u53F7" : value === "clip" ? "\u88C1\u5207" : "\u6362\u884C"
-    },
-    ...includeSummary ? [
-      {
-        key: "summary-group",
-        dataIndex: "summaryType",
-        title: "\u6C47\u603B",
-        children: [
-          {
-            key: "summaryType",
-            dataIndex: "summaryType",
-            title: "\u6C47\u603B\u65B9\u5F0F",
-            width: 110,
-            editable: true,
-            formItemProps: {
-              valueType: "select",
-              clickCount: 1,
-              options: summaryOptions2.filter(
-                (option) => option.value !== "original" || props.source.summaryColumns?.some(
-                  (column) => column.summary.type === "original"
-                )
-              )
-            },
-            render: (value) => summaryOptions2.find((option) => option.value === value)?.label ?? "\u65E0\u6C47\u603B"
-          },
-          {
-            key: "showTypePrefix",
-            dataIndex: "showTypePrefix",
-            title: "\u6C47\u603B\u524D\u7F00",
-            width: 90,
-            editable: true,
-            formItemProps: {
-              valueType: "select",
-              clickCount: 1,
-              options: booleanOptions2
-            },
-            render: (value) => value === "yes" ? "\u662F" : "\u5426"
-          },
-          {
-            key: "precision",
-            dataIndex: "precision",
-            title: "\u5C0F\u6570\u4F4D\u6570",
-            width: 90,
-            editable: true,
-            formItemProps: {
-              valueType: "number",
-              clickCount: 1,
-              min: 0,
-              max: 20
-            }
-          },
-          {
-            key: "roundingMode",
-            dataIndex: "roundingMode",
-            title: "\u53D6\u6574\u65B9\u5F0F",
-            width: 100,
-            editable: true,
-            formItemProps: {
-              valueType: "select",
-              clickCount: 1,
-              options: roundingOptions2
-            },
-            render: (value) => roundingOptions2.find((option) => option.value === value)?.label ?? "\u56DB\u820D\u4E94\u5165"
-          },
-          {
-            key: "preserveTrailingZeros",
-            dataIndex: "preserveTrailingZeros",
-            title: "\u4FDD\u7559\u65E0\u6548\u96F6",
-            width: 100,
-            editable: true,
-            formItemProps: {
-              valueType: "select",
-              clickCount: 1,
-              options: booleanOptions2
-            },
-            render: (value) => value === "yes" ? "\u662F" : "\u5426"
-          }
-        ]
-      }
-    ] : []
-  ];
-  const sectionDivider = showSectionDividers ? /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "aria-hidden": "true",
-      style: {
-        height: 1,
-        marginTop: sectionDividerTopSpacing,
-        marginBottom: sectionDividerBottomSpacing,
-        background: "#e2e8f0"
-      }
-    }
-  ) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactComponents.ReactModal,
-    {
-      open: true,
-      title: /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          style: {
-            display: "flex",
-            alignItems: "baseline",
-            gap: 12,
-            minWidth: 0
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u6253\u5370\u8868\u683C\u914D\u7F6E" }),
-            printLayoutWarning ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                role: "status",
-                title: `${printLayoutWarning}\uFF0C\u4ECD\u53EF\u7EE7\u7EED\u6253\u5370\uFF1B\u6253\u5370\u7ED3\u679C\u53EF\u80FD\u88AB\u88C1\u5207\u6216\u5206\u9875\u5F02\u5E38\u3002`,
-                style: {
-                  color: "#b45309",
-                  fontSize: 12,
-                  fontWeight: 400,
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  minWidth: 0
-                },
-                children: [
-                  printLayoutWarning,
-                  "\uFF0C\u4ECD\u53EF\u7EE7\u7EED\u6253\u5370"
-                ]
-              }
-            ) : null
-          ]
-        }
-      ),
-      width: "min(98vw, 1680px)",
-      fullscreenable: true,
-      fullscreen: printFullscreen,
-      onFullscreenChange: setPrintFullscreen,
-      bodyStyle: { display: "flex", minHeight: 0 },
-      okText: "\u6253\u5370",
-      cancelText: "\u53D6\u6D88",
-      onCancel: props.onClose,
-      footer: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "flex-end",
-            alignItems: "center",
-            gap: 8,
-            width: "100%"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactButton, { type: "default", onClick: props.onClose, children: "\u53D6\u6D88" }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactButton, { type: "default", onClick: previewPrintHtml, children: "\u6253\u5370\u9884\u89C8" }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactButton, { type: "primary", onClick: confirm, children: "\u6253\u5370" })
-          ]
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flex: "1 1 auto",
-              minHeight: 0,
-              flexDirection: "column"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: {
-                  display: "grid",
-                  flex: "1 1 auto",
-                  minHeight: 0,
-                  gridTemplateColumns: "minmax(340px, 380px) minmax(0, 1fr)",
-                  gap: 20,
-                  alignItems: "stretch"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        display: "grid",
-                        gap: 0,
-                        padding: "4px 4px 0 0",
-                        minHeight: 0,
-                        overflowY: "auto"
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        reactComponents.ReactForm,
-                        {
-                          layout: "horizontal",
-                          noWrap: true,
-                          itemSpacing: `${formItemSpacing}px`,
-                          labelWidth: 88,
-                          labelAlign: "left",
-                          style: { display: "contents" },
-                          children: [
-                            props.printPresets?.length ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6253\u5370\u914D\u7F6E", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactSelect,
-                              {
-                                value: selectedPresetName,
-                                "aria-label": "\u6253\u5370\u914D\u7F6E\u9884\u8BBE",
-                                options: [
-                                  { value: "", label: "\u9ED8\u8BA4\u914D\u7F6E" },
-                                  ...props.printPresets.map((preset) => ({
-                                    value: preset.name,
-                                    label: preset.name
-                                  }))
-                                ],
-                                onChange: (value) => applyPrintPreset(String(value ?? "")),
-                                style: { width: "100%" }
-                              }
-                            ) }) : null,
-                            props.storageKey ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u7F13\u5B58\u5230\u672C\u5730", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactCheckbox,
-                              {
-                                checked: cacheEnabled,
-                                "aria-label": "\u7F13\u5B58\u6253\u5370\u914D\u7F6E\u5230\u672C\u5730",
-                                onChange: (event) => {
-                                  setCacheEnabled(event.target.checked);
-                                  if (!event.target.checked)
-                                    writePrintSettings(props.storageKey, null);
-                                }
-                              }
-                            ) }) : null,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u5206\u9694\u7EBF\u5360\u4F4D", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactCheckbox,
-                              {
-                                checked: showSectionDividers,
-                                "aria-label": "\u663E\u793A\u5206\u7EC4\u5206\u9694\u7EBF",
-                                onChange: (event) => setShowSectionDividers(event.target.checked)
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u884C\u95F4\u8DDD\uFF08px\uFF09", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactNumberInput,
-                              {
-                                min: 0,
-                                max: 40,
-                                step: 1,
-                                value: formItemSpacing,
-                                "aria-label": "\u8868\u5355\u884C\u95F4\u8DDD",
-                                onChange: (value) => setFormItemSpacing(value ?? 0),
-                                style: { width: "100%" }
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u5206\u9694\u7EBF\u4E0A\u4E0B\u95F4\u8DDD\uFF08px\uFF09", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u4E0A" }),
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                reactComponents.ReactNumberInput,
-                                {
-                                  min: 0,
-                                  max: 40,
-                                  step: 1,
-                                  value: sectionDividerTopSpacing,
-                                  "aria-label": "\u5206\u9694\u7EBF\u4E0A\u95F4\u8DDD",
-                                  onChange: (value) => setSectionDividerTopSpacing(value ?? 0),
-                                  style: { width: 64 }
-                                }
-                              ),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u4E0B" }),
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                reactComponents.ReactNumberInput,
-                                {
-                                  min: 0,
-                                  max: 40,
-                                  step: 1,
-                                  value: sectionDividerBottomSpacing,
-                                  "aria-label": "\u5206\u9694\u7EBF\u4E0B\u95F4\u8DDD",
-                                  onChange: (value) => setSectionDividerBottomSpacing(value ?? 0),
-                                  style: { width: 64 }
-                                }
-                              )
-                            ] }) }),
-                            sectionDivider,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6807\u9898", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactInput,
-                              {
-                                value: title,
-                                "aria-label": "\u6253\u5370\u6807\u9898",
-                                allowClear: true,
-                                onChange: (event) => setTitle(event.target.value),
-                                style: { width: "100%", minWidth: 0 }
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u5B50\u6807\u9898", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactInput,
-                              {
-                                value: subtitle,
-                                "aria-label": "\u6253\u5370\u5B50\u6807\u9898",
-                                allowClear: true,
-                                onChange: (event) => setSubtitle(event.target.value),
-                                style: { width: "100%", minWidth: 0 }
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6807\u9898\u5B57\u53F7", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, minWidth: 0 }, children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                reactComponents.ReactNumberInput,
-                                {
-                                  min: 1,
-                                  step: 1,
-                                  value: titleFontSize,
-                                  "aria-label": "\u6807\u9898\u5B57\u53F7",
-                                  onChange: (value) => setTitleFontSize(value ?? 18),
-                                  style: { flex: "1 1 0", minWidth: 0 }
-                                }
-                              ),
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                reactComponents.ReactNumberInput,
-                                {
-                                  min: 1,
-                                  step: 1,
-                                  value: subtitleFontSize,
-                                  "aria-label": "\u5B50\u6807\u9898\u5B57\u53F7",
-                                  onChange: (value) => setSubtitleFontSize(value ?? 12),
-                                  style: { flex: "1 1 0", minWidth: 0 }
-                                }
-                              )
-                            ] }) }),
-                            sectionDivider,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u7EB8\u5F20", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactSelect,
-                              {
-                                value: paperSize,
-                                options: [
-                                  { value: "a0", label: "A0" },
-                                  { value: "a1", label: "A1" },
-                                  { value: "a2", label: "A2" },
-                                  { value: "a3", label: "A3" },
-                                  { value: "a4", label: "A4" },
-                                  { value: "a5", label: "A5" },
-                                  { value: "a6", label: "A6" },
-                                  { value: "b4", label: "B4" },
-                                  { value: "b5", label: "B5" },
-                                  { value: "letter", label: "Letter" },
-                                  { value: "legal", label: "Legal" },
-                                  { value: "tabloid", label: "Tabloid" },
-                                  { value: "executive", label: "Executive" },
-                                  { value: "folio", label: "Folio" }
-                                ],
-                                onChange: (value) => setPaperSize(value),
-                                style: { width: "100%" }
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6253\u5370\u65B9\u5411", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              reactComponents.ReactRadio.Group,
-                              {
-                                value: orientation,
-                                "aria-label": "\u6253\u5370\u65B9\u5411",
-                                onChange: (event) => setOrientation(event.target.value),
-                                style: { display: "flex", gap: 10, flexWrap: "nowrap" },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactRadio, { value: "portrait", children: "\u7EB5\u5411" }),
-                                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactRadio, { value: "landscape", children: "\u6A2A\u5411" })
-                                ]
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6253\u5370\u8FB9\u8DDD\uFF08mm\uFF09", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              "div",
-                              {
-                                style: {
-                                  display: "grid",
-                                  gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
-                                  gap: 8
-                                },
-                                children: [
-                                  ["top", "\u4E0A"],
-                                  ["right", "\u53F3"],
-                                  ["bottom", "\u4E0B"],
-                                  ["left", "\u5DE6"]
-                                ].map(([side, label]) => /* @__PURE__ */ jsxRuntime.jsxs(
-                                  "div",
-                                  {
-                                    style: {
-                                      display: "grid",
-                                      gridTemplateColumns: "20px minmax(0, 1fr)",
-                                      gap: 4,
-                                      alignItems: "center"
-                                    },
-                                    children: [
-                                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-                                      /* @__PURE__ */ jsxRuntime.jsx(
-                                        reactComponents.ReactNumberInput,
-                                        {
-                                          min: 0,
-                                          step: 1,
-                                          value: pageMargins[side],
-                                          onChange: (value) => setPageMargins((current) => ({
-                                            ...current,
-                                            [side]: value ?? 0
-                                          })),
-                                          style: { width: "100%" }
-                                        }
-                                      )
-                                    ]
-                                  },
-                                  side
-                                ))
-                              }
-                            ) }),
-                            sectionDivider,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u5355\u5143\u683C\u8FB9\u6846", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactCheckbox,
-                              {
-                                checked: useCellBorders,
-                                "aria-label": "\u5355\u5143\u683C\u8FB9\u6846",
-                                onChange: (event) => setUseCellBorders(event.target.checked)
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u8FB9\u6846\u989C\u8272", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactColorPicker,
-                              {
-                                value: borderColor,
-                                disabled: !useCellBorders,
-                                onChange: setBorderColor,
-                                style: { width: "100%" }
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6587\u5B57\u989C\u8272", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactColorPicker,
-                              {
-                                value: textColor,
-                                onChange: setTextColor,
-                                style: { width: "100%" }
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u8868\u5934\u80CC\u666F\u8272", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactColorPicker,
-                              {
-                                value: headerBackgroundColor,
-                                onChange: setHeaderBackgroundColor,
-                                style: { width: "100%" }
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6C47\u603B\u884C\u80CC\u666F\u8272", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactColorPicker,
-                              {
-                                value: summaryBackgroundColor,
-                                onChange: setSummaryBackgroundColor,
-                                style: { width: "100%" }
-                              }
-                            ) }),
-                            sectionDivider,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6253\u5370\u6C47\u603B\u884C", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactCheckbox,
-                              {
-                                checked: includeSummary,
-                                "aria-label": "\u6253\u5370\u6C47\u603B\u884C",
-                                onChange: (event) => setIncludeSummary(event.target.checked)
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6C47\u603B\u4F4D\u7F6E", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              reactComponents.ReactRadio.Group,
-                              {
-                                value: summaryPosition,
-                                "aria-label": "\u6C47\u603B\u4F4D\u7F6E",
-                                onChange: (event) => setSummaryPosition(
-                                  event.target.value
-                                ),
-                                style: { display: "flex", gap: 10, flexWrap: "nowrap" },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactRadio, { value: "every-page", disabled: !includeSummary, children: "\u6BCF\u9875" }),
-                                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactRadio, { value: "last-page", disabled: !includeSummary, children: "\u6700\u540E\u4E00\u9875" })
-                                ]
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6253\u5370\u65F6\u95F4", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              "span",
-                              {
-                                style: {
-                                  display: "flex",
-                                  alignItems: "center",
-                                  gap: 8,
-                                  minWidth: 0,
-                                  whiteSpace: "nowrap"
-                                },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactCheckbox,
-                                    {
-                                      checked: showPrintTime,
-                                      "aria-label": "\u663E\u793A\u6253\u5370\u65F6\u95F4",
-                                      onChange: (event) => {
-                                        const checked = event.target.checked;
-                                        setShowPrintTime(checked);
-                                        if (checked && showPageNumbers && pageNumberPosition === printTimePosition) {
-                                          setPrintTimePosition(
-                                            pageNumberPosition === "left" ? "center" : "left"
-                                          );
-                                        }
-                                      }
-                                    }
-                                  ),
-                                  "\u663E\u793A"
-                                ]
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u65F6\u95F4\u4F4D\u7F6E", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              reactComponents.ReactRadio.Group,
-                              {
-                                value: printTimePosition,
-                                "aria-label": "\u6253\u5370\u65F6\u95F4\u4F4D\u7F6E",
-                                onChange: (event) => {
-                                  const next = event.target.value;
-                                  if (showPageNumbers && next === pageNumberPosition) return;
-                                  setPrintTimePosition(next);
-                                },
-                                style: { display: "flex", gap: 10, flexWrap: "nowrap" },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactRadio,
-                                    {
-                                      value: "left",
-                                      disabled: !showPrintTime || showPageNumbers && pageNumberPosition === "left",
-                                      children: "\u5DE6\u4FA7"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactRadio,
-                                    {
-                                      value: "center",
-                                      disabled: !showPrintTime || showPageNumbers && pageNumberPosition === "center",
-                                      children: "\u4E2D\u95F4"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactRadio,
-                                    {
-                                      value: "right",
-                                      disabled: !showPrintTime || showPageNumbers && pageNumberPosition === "right",
-                                      children: "\u53F3\u4FA7"
-                                    }
-                                  )
-                                ]
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u5206\u9875\u4FE1\u606F", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                reactComponents.ReactCheckbox,
-                                {
-                                  checked: showPageNumbers,
-                                  "aria-label": "\u663E\u793A\u5206\u9875\u4FE1\u606F",
-                                  onChange: (event) => setShowPageNumbers(event.target.checked)
-                                }
-                              ),
-                              "\u663E\u793A"
-                            ] }) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u5206\u9875\u4F4D\u7F6E", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              reactComponents.ReactRadio.Group,
-                              {
-                                value: pageNumberPosition,
-                                "aria-label": "\u5206\u9875\u4FE1\u606F\u4F4D\u7F6E",
-                                onChange: (event) => (() => {
-                                  const next = event.target.value;
-                                  setPageNumberPosition(next);
-                                  if (showPrintTime && next === printTimePosition) {
-                                    setPrintTimePosition(
-                                      next === "left" ? "center" : "left"
-                                    );
-                                  }
-                                })(),
-                                style: { display: "flex", gap: 10, flexWrap: "nowrap" },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactRadio,
-                                    {
-                                      value: "left",
-                                      disabled: !showPageNumbers || showPrintTime && printTimePosition === "left",
-                                      children: "\u5DE6\u4FA7"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactRadio,
-                                    {
-                                      value: "center",
-                                      disabled: !showPageNumbers || showPrintTime && printTimePosition === "center",
-                                      children: "\u4E2D\u95F4"
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactRadio,
-                                    {
-                                      value: "right",
-                                      disabled: !showPageNumbers || showPrintTime && printTimePosition === "right",
-                                      children: "\u53F3\u4FA7"
-                                    }
-                                  )
-                                ]
-                              }
-                            ) }),
-                            sectionDivider,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u884C\u9AD8\uFF08mm\uFF09", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactNumberInput,
-                              {
-                                min: 1,
-                                step: 1,
-                                value: rowHeight,
-                                onChange: (value) => {
-                                  setRowHeight(value ?? 0);
-                                  setError("");
-                                },
-                                style: { width: "100%" }
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactForm.Item, { label: "\u6BCF\u9875\u884C\u6570", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              "span",
-                              {
-                                style: {
-                                  display: "flex",
-                                  alignItems: "center",
-                                  gap: 8,
-                                  whiteSpace: "nowrap"
-                                },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactNumberInput,
-                                    {
-                                      min: 1,
-                                      step: 1,
-                                      value: rowsPerPage,
-                                      onChange: (value) => {
-                                        setRowsPerPage(value ?? 0);
-                                        setError("");
-                                      },
-                                      style: { flex: "1 1 auto", minWidth: 0 }
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.ReactCheckbox,
-                                    {
-                                      checked: autoCalculateRows,
-                                      "aria-label": "\u81EA\u52A8\u8BA1\u7B97\u6BCF\u9875\u884C\u6570",
-                                      onChange: (event) => setAutoCalculateRows(event.target.checked)
-                                    }
-                                  ),
-                                  "\u81EA\u52A8\u8BA1\u7B97"
-                                ]
-                              }
-                            ) })
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      style: {
-                        minWidth: 0,
-                        minHeight: 0,
-                        display: "flex",
-                        flexDirection: "column"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              justifyContent: "flex-end",
-                              marginBottom: 8
-                            },
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.ReactButton,
-                              {
-                                type: "default",
-                                onClick: autoCalculateColumnWidths,
-                                disabled: selectedKeys.length === 0,
-                                children: "\u81EA\u52A8\u8BA1\u7B97\u5217\u5BBD"
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "div",
-                          {
-                            style: {
-                              flex: "1 1 auto",
-                              minHeight: 280,
-                              height: printFullscreen ? "100%" : "min(58vh, 560px)"
-                            },
-                            children: props.renderTable({
-                              tableId,
-                              columns: tableColumns,
-                              dataSource: columns,
-                              rowKey: "key",
-                              rowHeight: 40,
-                              headerRowHeight: 38,
-                              toolbar: false,
-                              contextMenu: false,
-                              pagination: false,
-                              draggable: true,
-                              rowSelection: {
-                                type: "checkbox",
-                                selectedRowKeys: selectedKeys,
-                                selectRowByClick: false,
-                                onChange: (keys) => {
-                                  setSelectedKeys(keys);
-                                  setError("");
-                                }
-                              },
-                              rowDrag: {
-                                enabled: true,
-                                droppable: true,
-                                allowSelfDrop: true,
-                                mode: "move",
-                                onDrop: ({ rows: moved, insertIndex, source }) => {
-                                  if (source.tableId !== tableId || insertIndex == null)
-                                    return;
-                                  const keys = new Set(moved.map((row) => row.key));
-                                  setColumns((current) => {
-                                    const remaining = current.filter(
-                                      (row) => !keys.has(row.key)
-                                    );
-                                    const preceding = current.slice(0, insertIndex).filter((row) => !keys.has(row.key)).length;
-                                    remaining.splice(
-                                      preceding,
-                                      0,
-                                      ...current.filter((row) => keys.has(row.key))
-                                    );
-                                    return remaining;
-                                  });
-                                }
-                              },
-                              style: { width: "100%", height: "100%" }
-                            })
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        error ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", style: { color: "#c2410c", marginTop: 8 }, children: error }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.ReactModal,
-          {
-            open: previewOpen,
-            title: "\u6253\u5370\u9884\u89C8",
-            width: "min(96vw, 1280px)",
-            fullscreenable: true,
-            fullscreen: previewFullscreen,
-            onFullscreenChange: setPreviewFullscreen,
-            bodyStyle: { display: "flex", minHeight: 0 },
-            footer: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "flex-end",
-                  alignItems: "center",
-                  gap: 8,
-                  width: "100%"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    reactComponents.ReactButton,
-                    {
-                      type: previewMode === "render" ? "primary" : "default",
-                      onClick: () => setPreviewMode("render"),
-                      children: "\u6548\u679C"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    reactComponents.ReactButton,
-                    {
-                      type: previewMode === "source" ? "primary" : "default",
-                      onClick: () => setPreviewMode("source"),
-                      children: "HTML"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactButton, { type: "default", onClick: previewPrintHtml, children: "\u5237\u65B0\u9884\u89C8" })
-                ]
-              }
-            ),
-            onCancel: () => setPreviewOpen(false),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flex: 1,
-                  minHeight: 0,
-                  width: "100%",
-                  justifyContent: "center"
-                },
-                children: previewMode === "render" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.ReactVirtualList,
-                  {
-                    items: previewPages,
-                    height: previewListHeight,
-                    itemHeight: previewItemHeight,
-                    itemKey: (page) => page.index,
-                    overscan: 1,
-                    style: {
-                      width: "100%",
-                      maxWidth: previewListWidth,
-                      overflowX: "hidden"
-                    },
-                    renderItem: (page, _index, meta) => /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        style: {
-                          ...meta.style,
-                          display: "flex",
-                          justifyContent: "center",
-                          alignItems: "flex-start",
-                          height: previewItemHeight,
-                          padding: 12,
-                          boxSizing: "border-box",
-                          overflow: "hidden"
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "div",
-                          {
-                            style: {
-                              width: pageWidthPixels * previewScale,
-                              height: pageHeightPixels * previewScale,
-                              border: "1px solid #cbd5e1",
-                              position: "relative",
-                              overflow: "hidden",
-                              background: "white"
-                            },
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              "iframe",
-                              {
-                                title: `\u6253\u5370\u6548\u679C\u9884\u89C8\u7B2C ${page.index + 1} \u9875`,
-                                srcDoc: page.srcDoc,
-                                sandbox: "",
-                                style: {
-                                  display: "block",
-                                  position: "absolute",
-                                  left: 0,
-                                  top: 0,
-                                  width: pageWidthPixels,
-                                  height: pageHeightPixels,
-                                  transform: `scale(${previewScale})`,
-                                  transformOrigin: "top left",
-                                  border: 0,
-                                  overflow: "hidden",
-                                  background: "white"
-                                }
-                              }
-                            )
-                          }
-                        )
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "pre",
-                  {
-                    "aria-label": "\u751F\u6210\u7684\u6253\u5370 HTML",
-                    style: {
-                      boxSizing: "border-box",
-                      width: "100%",
-                      height: previewFullscreen ? "100%" : "min(72vh, 900px)",
-                      minHeight: 0,
-                      overflow: "auto",
-                      margin: 0,
-                      padding: 12,
-                      border: "1px solid #cbd5e1",
-                      background: "#f8fafc",
-                      color: "#1f2937",
-                      font: "12px/1.5 ui-monospace, SFMono-Regular, monospace",
-                      whiteSpace: "pre-wrap",
-                      overflowWrap: "anywhere"
-                    },
-                    children: previewHtml
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/features/editor/utils.ts
-function toNumberValue(value) {
-  if (typeof value === "number" && Number.isFinite(value)) {
-    return value;
-  }
-  if (typeof value === "string" && value.trim().length > 0) {
-    const nextValue = Number(value);
-    return Number.isFinite(nextValue) ? nextValue : null;
-  }
-  return null;
-}
-function toNumericProp(value) {
-  if (typeof value === "number") {
-    return value;
-  }
-  if (typeof value === "string" && value.trim().length > 0) {
-    const nextValue = Number(value);
-    return Number.isFinite(nextValue) ? nextValue : void 0;
-  }
-  return void 0;
-}
-function resolvePadding(value, fallback = 0) {
-  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback;
-}
-function resolveEditorControlSize(request) {
-  const targetRect = request.hostRect ?? request.rect;
-  const height = Math.max(targetRect.height - 2, 1);
-  const fontSize = typeof request.theme.fontSize === "number" && Number.isFinite(request.theme.fontSize) && request.theme.fontSize > 0 ? request.theme.fontSize : void 0;
-  const paddingInline = resolvePadding(request.theme.paddingInline);
-  const paddingBlock = resolvePadding(request.theme.paddingBlock);
-  const contentZoom = typeof request.theme.contentZoom === "number" && Number.isFinite(request.theme.contentZoom) && request.theme.contentZoom > 0 ? request.theme.contentZoom : 1;
-  return { height, fontSize, paddingInline, paddingBlock, contentZoom };
-}
-function getEditorInputStyle(request) {
-  const { height, fontSize, paddingInline, paddingBlock, contentZoom } = resolveEditorControlSize(request);
-  return {
-    width: "100%",
-    height,
-    minHeight: height,
-    color: request.theme.cellColor ?? request.theme.textColor,
-    fontFamily: request.theme.fontFamily,
-    fontSize,
-    // 用像素 token，确保 select/time/color 触发器与内部 Input 同步缩放。
-    ["--canvas-react-control-height"]: `${height}px`,
-    ["--canvas-react-font-size"]: fontSize != null ? `${fontSize}px` : void 0,
-    ["--canvas-react-control-padding-inline"]: `${paddingInline}px`,
-    ["--canvas-react-control-padding-block"]: `${paddingBlock}px`,
-    ["--canvas-react-content-zoom"]: String(contentZoom),
-    ["--canvas-react-radius-sm"]: "0px",
-    borderRadius: 0,
-    boxSizing: "border-box"
+}
+
+// src/features/editor/utils.ts
+function toNumberValue(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const nextValue = Number(value);
+    return Number.isFinite(nextValue) ? nextValue : null;
+  }
+  return null;
+}
+function toNumericProp(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const nextValue = Number(value);
+    return Number.isFinite(nextValue) ? nextValue : void 0;
+  }
+  return void 0;
+}
+function resolvePadding(value, fallback = 0) {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+function resolveEditorControlSize(request) {
+  const targetRect = request.hostRect ?? request.rect;
+  const height = Math.max(targetRect.height - 2, 1);
+  const fontSize = typeof request.theme.fontSize === "number" && Number.isFinite(request.theme.fontSize) && request.theme.fontSize > 0 ? request.theme.fontSize : void 0;
+  const paddingInline = resolvePadding(request.theme.paddingInline);
+  const paddingBlock = resolvePadding(request.theme.paddingBlock);
+  const contentZoom = typeof request.theme.contentZoom === "number" && Number.isFinite(request.theme.contentZoom) && request.theme.contentZoom > 0 ? request.theme.contentZoom : 1;
+  return { height, fontSize, paddingInline, paddingBlock, contentZoom };
+}
+function getEditorInputStyle(request) {
+  const { height, fontSize, paddingInline, paddingBlock, contentZoom } = resolveEditorControlSize(request);
+  return {
+    width: "100%",
+    height,
+    minHeight: height,
+    color: request.theme.cellColor ?? request.theme.textColor,
+    fontFamily: request.theme.fontFamily,
+    fontSize,
+    // 用像素 token，确保 select/time/color 触发器与内部 Input 同步缩放。
+    ["--canvas-react-control-height"]: `${height}px`,
+    ["--canvas-react-font-size"]: fontSize != null ? `${fontSize}px` : void 0,
+    ["--canvas-react-control-padding-inline"]: `${paddingInline}px`,
+    ["--canvas-react-control-padding-block"]: `${paddingBlock}px`,
+    ["--canvas-react-content-zoom"]: String(contentZoom),
+    ["--canvas-react-radius-sm"]: "0px",
+    borderRadius: 0,
+    boxSizing: "border-box"
   };
 }
 function resolveEditorOverlayStyle(params) {
@@ -5634,6 +4459,16 @@ function resolveEditorOverlayStyle(params) {
 function ReactTableEditorOverlay(props) {
   const { request } = props;
   const editorHostRef = react.useRef(null);
+  const wheelCommittedRef = react.useRef(false);
+  const editorRequest = {
+    ...request,
+    onCommit: (options) => {
+      if (!wheelCommittedRef.current) request.onCommit(options);
+    }
+  };
+  react.useEffect(() => {
+    wheelCommittedRef.current = false;
+  }, [request.editorKey]);
   const style = resolveEditorOverlayStyle({
     rect: request.rect,
     hostRect: request.hostRect,
@@ -5650,7 +4485,26 @@ function ReactTableEditorOverlay(props) {
     }
     focusAndSelectEditorInput(input, request.selectOnFocus);
   }, [request]);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactContentScaleProvider, { scale: contentZoom, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: editorHostRef, children: renderEditorByType(request, style) }, request.editorKey) });
+  react.useEffect(() => {
+    const host = editorHostRef.current;
+    if (!host) return;
+    const valueType = request.config.valueType ?? "text";
+    if (valueType !== "text" && valueType !== "number" && valueType !== "input-range") {
+      return;
+    }
+    const handleWheel = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!wheelCommittedRef.current) {
+        wheelCommittedRef.current = true;
+        request.onCommit();
+      }
+      request.onWheel?.(event);
+    };
+    host.addEventListener("wheel", handleWheel, { passive: false });
+    return () => host.removeEventListener("wheel", handleWheel);
+  }, [request]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.ReactContentScaleProvider, { scale: contentZoom, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: editorHostRef, children: renderEditorByType(editorRequest, style) }, request.editorKey) });
 }
 function renderEditorByType(request, style) {
   switch (request.config.valueType ?? "text") {
@@ -6702,245 +5556,8 @@ function HolderOutlined() {
   return /* @__PURE__ */ jsxRuntime.jsx(ToolbarIcon, { path: "M300 276.5a56 56 0 1056-97 56 56 0 00-56 97zm0 284a56 56 0 1056-97 56 56 0 00-56 97zM640 228a56 56 0 10112 0 56 56 0 00-112 0zm0 284a56 56 0 10112 0 56 56 0 00-112 0zM300 844.5a56 56 0 1056-97 56 56 0 00-56 97zM640 796a56 56 0 10112 0 56 56 0 00-112 0z" });
 }
 
-// src/components/fullscreen-portal.ts
-function resolveFullscreenPortalContainer(host) {
-  const fullscreenElement = document.fullscreenElement;
-  return fullscreenElement instanceof HTMLElement && host && fullscreenElement.contains(host) ? fullscreenElement : document.body;
-}
-function SortableList(props) {
-  const { items, onOrderChange } = props;
-  const rootRef = react.useRef(null);
-  const dragRef = react.useRef(null);
-  const [dragState, setDragState] = react.useState(null);
-  react.useEffect(
-    () => () => {
-      document.body.classList.remove("react-list-table-sorting");
-      document.body.style.removeProperty("user-select");
-    },
-    []
-  );
-  react.useEffect(() => {
-    if (!dragState) return;
-    const scrollContainer = props.scrollContainerRef?.current;
-    let frameId = 0;
-    let lastTime = null;
-    const updateTarget = () => {
-      const current = dragRef.current;
-      if (!current) return;
-      const target = resolveClosestSortableItem({
-        items,
-        parentKey: current.source.parentKey,
-        layouts: current.layouts,
-        // 保留拖拽开始时的布局，补偿滚动位移，避免受行交换动画影响。
-        overlayCenterY: current.pointerY - current.offsetY + current.height / 2 + current.rootTop - (rootRef.current?.getBoundingClientRect().top ?? current.rootTop)
-      });
-      if (target) {
-        current.target = target;
-      }
-      setDragState({
-        sourceKey: current.source.key,
-        targetKey: current.target.key,
-        pointerY: current.pointerY
-      });
-    };
-    const handleMove = (event) => {
-      const current = dragRef.current;
-      if (!current || event.pointerId !== current.pointerId) return;
-      current.pointerY = event.clientY;
-      updateTarget();
-    };
-    const tick = (time) => {
-      const current = dragRef.current;
-      if (!current) return;
-      const elapsed = lastTime == null ? 0 : Math.min(time - lastTime, 50);
-      lastTime = time;
-      if (scrollContainer) {
-        const rect = scrollContainer.getBoundingClientRect();
-        const top = rect.top + scrollContainer.clientTop;
-        const height = scrollContainer.clientHeight;
-        const edge = Math.min(40, height / 2);
-        const bottom = top + height;
-        const direction = edge <= 0 ? 0 : current.pointerY < top + edge ? -Math.min(1, (top + edge - current.pointerY) / edge) : current.pointerY > bottom - edge ? Math.min(1, (current.pointerY - bottom + edge) / edge) : 0;
-        if (direction) {
-          scrollContainer.scrollTop = Math.max(
-            0,
-            Math.min(
-              scrollContainer.scrollHeight - height,
-              scrollContainer.scrollTop + direction * elapsed * 0.5
-            )
-          );
-          updateTarget();
-        }
-      }
-      frameId = requestAnimationFrame(tick);
-    };
-    const finish = (commit) => {
-      const current = dragRef.current;
-      cancelAnimationFrame(frameId);
-      if (commit && current && current.source.key !== current.target.key) {
-        const siblings = items.filter(
-          (item) => item.parentKey === current.source.parentKey
-        );
-        const orderedKeys = resolveNextSortableOrder(
-          siblings.map((item) => item.key),
-          current.source.key,
-          current.target.key
-        );
-        if (orderedKeys) {
-          onOrderChange(current.source.parentKey, orderedKeys);
-        }
-      }
-      dragRef.current = null;
-      setDragState(null);
-      document.body.classList.remove("react-list-table-sorting");
-      document.body.style.removeProperty("user-select");
-    };
-    const handleEnd = (event) => {
-      if (event.pointerId !== dragRef.current?.pointerId) return;
-      handleMove(event);
-      finish(true);
-    };
-    const handleCancel = (event) => {
-      if (event.pointerId === dragRef.current?.pointerId) finish(false);
-    };
-    const handleBlur = () => finish(false);
-    frameId = requestAnimationFrame(tick);
-    scrollContainer?.addEventListener("scroll", updateTarget);
-    window.addEventListener("pointermove", handleMove);
-    window.addEventListener("pointerup", handleEnd);
-    window.addEventListener("pointercancel", handleCancel);
-    window.addEventListener("blur", handleBlur);
-    return () => {
-      cancelAnimationFrame(frameId);
-      scrollContainer?.removeEventListener("scroll", updateTarget);
-      window.removeEventListener("pointermove", handleMove);
-      window.removeEventListener("pointerup", handleEnd);
-      window.removeEventListener("pointercancel", handleCancel);
-      window.removeEventListener("blur", handleBlur);
-    };
-  }, [dragState != null, items, onOrderChange, props.scrollContainerRef]);
-  const sourceIndex = dragState ? items.findIndex((item) => item.key === dragState.sourceKey) : -1;
-  const targetIndex = dragState ? items.findIndex((item) => item.key === dragState.targetKey) : -1;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, children: [
-    items.map((item, index) => {
-      const style = resolveSortableTransform(
-        index,
-        sourceIndex,
-        targetIndex,
-        dragRef.current?.height ?? 0
-      );
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "data-sortable-key": item.key,
-          className: dragState?.sourceKey === item.key ? "dragging" : "",
-          style,
-          children: props.renderItem(item, {
-            onPointerDown: (event) => {
-              if (event.button !== 0 || dragRef.current) return;
-              const row = event.currentTarget.closest(
-                "[data-sortable-key]"
-              );
-              if (!row) return;
-              const rect = row.getBoundingClientRect();
-              dragRef.current = {
-                source: item,
-                target: item,
-                layouts: collectSortableItemLayouts(rootRef.current),
-                offsetY: event.clientY - rect.top,
-                width: rect.width,
-                left: rect.left,
-                height: rect.height,
-                pointerId: event.pointerId,
-                pointerY: event.clientY,
-                rootTop: rootRef.current?.getBoundingClientRect().top ?? 0
-              };
-              setDragState({
-                sourceKey: item.key,
-                targetKey: item.key,
-                pointerY: event.clientY
-              });
-              document.body.classList.add("react-list-table-sorting");
-              document.body.style.userSelect = "none";
-              event.preventDefault();
-            }
-          })
-        },
-        item.key
-      );
-    }),
-    dragState && dragRef.current ? reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "react-list-table-sort-overlay",
-          style: {
-            left: dragRef.current.left,
-            top: dragState.pointerY - dragRef.current.offsetY,
-            width: dragRef.current.width,
-            height: dragRef.current.height
-          },
-          children: props.renderItem(dragRef.current.source, {
-            onPointerDown: (event) => event.preventDefault()
-          })
-        }
-      ),
-      resolveFullscreenPortalContainer(rootRef.current)
-    ) : null
-  ] });
-}
-function resolveNextSortableOrder(currentKeys, sourceKey, targetKey) {
-  const sourceIndex = currentKeys.indexOf(sourceKey);
-  const targetIndex = currentKeys.indexOf(targetKey);
-  if (sourceIndex < 0 || targetIndex < 0 || sourceIndex === targetIndex) {
-    return null;
-  }
-  const nextKeys = [...currentKeys];
-  const [source] = nextKeys.splice(sourceIndex, 1);
-  nextKeys.splice(targetIndex, 0, source);
-  return nextKeys;
-}
-function collectSortableItemLayouts(root) {
-  if (!root) return [];
-  return Array.from(
-    root.querySelectorAll("[data-sortable-key]")
-  ).map((element) => {
-    const rect = element.getBoundingClientRect();
-    return {
-      key: element.dataset.sortableKey ?? "",
-      centerY: rect.top + rect.height / 2
-    };
-  });
-}
-function resolveClosestSortableItem(params) {
-  let closestItem = null;
-  let closestDistance = Number.POSITIVE_INFINITY;
-  params.layouts.forEach((layout) => {
-    const item = params.items.find((candidate) => candidate.key === layout.key);
-    if (!item || item.parentKey !== params.parentKey) return;
-    const distance = Math.abs(params.overlayCenterY - layout.centerY);
-    if (distance < closestDistance) {
-      closestDistance = distance;
-      closestItem = item;
-    }
-  });
-  return closestItem;
-}
-function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
-  let translateY = 0;
-  if (sourceIndex < targetIndex && index > sourceIndex && index <= targetIndex) {
-    translateY = -height;
-  } else if (sourceIndex > targetIndex && index >= targetIndex && index < sourceIndex) {
-    translateY = height;
-  }
-  return {
-    transform: translateY ? `translate3d(0, ${translateY}px, 0)` : void 0,
-    transition: sourceIndex >= 0 ? "transform 180ms ease" : void 0
-  };
-}
-
 // src/features/toolbar/style.css
-styleInject(".react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #374151;\n  font-size: 14px;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu {\n  width: max-content;\n  min-width: 0;\n  padding: 8px;\n  border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n  width: 16px;\n  flex: 0 0 16px;\n  margin-right: 6px;\n  text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n  background: #f3f4f6;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-position {\n  flex: 0 0 28px;\n  text-align: center;\n  color: #64748b;\n  font-variant-numeric: tabular-nums;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-sort-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  touch-action: none;\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n");
+styleInject(".react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #374151;\n  font-size: 14px;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu {\n  width: max-content;\n  min-width: 0;\n  padding: 8px;\n  border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n  width: 16px;\n  flex: 0 0 16px;\n  margin-right: 6px;\n  text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n  background: #f3f4f6;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-position {\n  flex: 0 0 28px;\n  text-align: center;\n  color: #64748b;\n  font-variant-numeric: tabular-nums;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-sort-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-drag {\n  touch-action: none;\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\n.canvas-react-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n");
 function ReactTableToolbar(props) {
   const { toolbar, title } = props;
   const [densityOpen, setDensityOpen] = react.useState(false);
@@ -7071,18 +5688,17 @@ function ReactTableToolbar(props) {
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-column-setting-head", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "\u5217\u8BBE\u7F6E" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                props.columnSettingsCacheAvailable ? /* @__PURE__ */ jsxRuntime.jsx(
                   reactComponents.ReactCheckbox,
                   {
                     checked: props.cacheColumnSettings === true,
-                    disabled: !props.columnSettingsCacheAvailable,
-                    title: props.columnSettingsCacheAvailable ? "\u7F13\u5B58\u5217\u5BBD\u3001\u663E\u9690\u3001\u56FA\u5B9A\u548C\u987A\u5E8F" : "\u914D\u7F6E storageKey \u540E\u53EF\u7F13\u5B58\u5217\u8BBE\u7F6E",
+                    title: "\u7F13\u5B58\u5217\u5BBD\u3001\u663E\u9690\u3001\u56FA\u5B9A\u548C\u987A\u5E8F",
                     onChange: (event) => props.onColumnSettingsCacheChange?.(
                       event.target.checked
                     ),
                     children: "\u7F13\u5B58\u5230\u672C\u5730"
                   }
-                ),
+                ) : null,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "auto" }, children: config.columnSettingHeaderExtra }),
                 /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: props.onResetColumns, children: "\u91CD\u7F6E" })
               ] }),
@@ -7092,13 +5708,15 @@ function ReactTableToolbar(props) {
                   ref: columnSettingsBodyRef,
                   className: "react-list-table-column-setting-body canvas-react-scrollbar",
                   children: /* @__PURE__ */ jsxRuntime.jsx(
-                    SortableList,
+                    reactComponents.ReactSortableList,
                     {
                       scrollContainerRef: columnSettingsBodyRef,
-                      items: flattenColumns(props.columns).map((column, index) => ({
-                        ...column,
-                        position: index + 1
-                      })),
+                      items: flattenColumns(props.columns).map(
+                        (column, index) => ({
+                          ...column,
+                          position: index + 1
+                        })
+                      ),
                       onOrderChange: props.onColumnOrderChange,
                       renderItem: (column, handleProps) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-column-item", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7525,6 +6143,12 @@ function resolveReactListTableDebugOptions(debug, inheritedEnabled) {
   };
 }
 
+// src/components/fullscreen-portal.ts
+function resolveFullscreenPortalContainer(host) {
+  const fullscreenElement = document.fullscreenElement;
+  return fullscreenElement instanceof HTMLElement && host && fullscreenElement.contains(host) ? fullscreenElement : document.body;
+}
+
 // src/components/column-manager-state.ts
 function applyColumnManagerState(columns, visibility, orders, config, parentKey = "root") {
   const order = orders.get(parentKey);
@@ -7899,12 +6523,102 @@ function ReactListTableInner(props, ref) {
   } = useReactListTableState(options);
   const hasPagination = paginationConfig != null;
   const [printSource, setPrintSource] = react.useState(null);
+  const [savedPrintTemplates, setSavedPrintTemplates] = react.useState([]);
+  const [printMenuSource, setPrintMenuSource] = react.useState(null);
+  const printStoreKey = storageKey ? `list:${storageKey}` : void 0;
+  const printMenuOpen = Boolean(headerContextMenuRequest);
+  react.useEffect(() => {
+    if (!printMenuOpen || !printStoreKey) {
+      setSavedPrintTemplates([]);
+      return;
+    }
+    let disposed = false;
+    void reactPrintDesign.readPrintDesignTemplates(printStoreKey).then((versions) => {
+      if (!disposed) setSavedPrintTemplates(versions);
+    }).catch(() => {
+      if (!disposed) setSavedPrintTemplates([]);
+    });
+    return () => {
+      disposed = true;
+    };
+  }, [printMenuOpen, printStoreKey]);
+  react.useEffect(() => {
+    if (!printMenuOpen) {
+      setPrintMenuSource(null);
+      return;
+    }
+    const getPrintData = headerContextMenuRequest?.onGetPrintData;
+    if (!getPrintData) return;
+    let disposed = false;
+    void Promise.resolve(getPrintData()).then((source) => {
+      if (!disposed) setPrintMenuSource(source);
+    }).catch(() => {
+      if (!disposed) setPrintMenuSource(null);
+    });
+    return () => {
+      disposed = true;
+    };
+  }, [printMenuOpen]);
+  const printDataFormat = printMenuSource ? getPrintSourceFormat(printMenuSource) : void 0;
+  const printMenuRows = react.useMemo(
+    () => printMenuSource ? mapPrintSourceRows(printMenuSource) : [],
+    [printMenuSource]
+  );
+  const latestSavedTemplates = [
+    ...new Set(savedPrintTemplates.map((item) => item.templateId))
+  ].map((templateId) => {
+    const versions = savedPrintTemplates.filter(
+      (item) => item.templateId === templateId
+    );
+    return versions[versions.length - 1];
+  });
+  const printTemplateChoices = [
+    { key: "base", label: "\u8868\u683C\u6253\u5370\u6A21\u677F" },
+    ...props.printPresets?.map((item, index) => ({
+      key: `preset:${index}`,
+      label: item.name
+    })) ?? [],
+    ...props.printTemplates?.map((item, index) => {
+      const invalid = Boolean(
+        printMenuSource && !reactPrintDesign.isPrintDesignDocumentCompatible(
+          item,
+          createTableData(printMenuSource, item, printMenuRows)
+        )
+      );
+      return {
+        key: `document:${index}`,
+        label: `${item.name}${invalid ? "\uFF08\u5DF2\u5931\u6548\uFF09" : ""}`,
+        disabled: invalid
+      };
+    }) ?? [],
+    ...latestSavedTemplates.map((item) => {
+      const invalid = Boolean(
+        printMenuSource && reactPrintDesign.isPrintDesignTemplateInvalid(
+          item,
+          printDataFormat,
+          createTableData(printMenuSource, item.document, printMenuRows)
+        )
+      );
+      return {
+        key: `saved:${item.id}`,
+        label: `${item.document.name} (v${item.version})${invalid ? "\uFF08\u5DF2\u5931\u6548\uFF09" : ""}`,
+        disabled: invalid
+      };
+    })
+  ];
+  const [cacheConfigOpen, setCacheConfigOpen] = react.useState(false);
   const paginationLayout = resolveReactListTablePaginationLayout(resolvedRowHeight);
   const portalContainer = resolveFullscreenPortalContainer(shellRef.current);
   react.useImperativeHandle(
     ref,
     () => ({
       validate: () => tableRef.current?.validate() ?? Promise.resolve([]),
+      setValidationErrors: (errors) => {
+        tableRef.current?.setValidationErrors(errors);
+      },
+      clearValidationErrors: (targets) => {
+        tableRef.current?.clearValidationErrors(targets);
+      },
       exportXlsx: (options2) => {
         tableRef.current?.exportXlsx(options2);
       },
@@ -8080,27 +6794,56 @@ function ReactListTableInner(props, ref) {
       /* @__PURE__ */ jsxRuntime.jsx(
         ReactTableContextMenuView,
         {
+          printTemplates: printTemplateChoices,
+          onPrintTemplate: (key) => {
+            const request = headerContextMenuRequest;
+            if (!request?.onGetPrintData) return;
+            request.onClose();
+            const popup = window.open("", "_blank");
+            if (!popup) return;
+            void Promise.resolve(request.onGetPrintData()).then((source) => {
+              const document2 = key.startsWith("saved:") ? savedPrintTemplates.find((item) => item.id === key.slice(6))?.document : key.startsWith("preset:") ? createTableDocument(
+                source,
+                props.printPresets?.[Number(key.slice(7))]
+              ) : key.startsWith("document:") ? props.printTemplates?.[Number(key.slice(9))] : createTableDocument(source);
+              if (!document2) throw new Error("\u627E\u4E0D\u5230\u6253\u5370\u6A21\u677F");
+              const data = createTableData(source, document2);
+              if (!reactPrintDesign.isPrintDesignDocumentCompatible(document2, data))
+                throw new Error("\u6253\u5370\u6A21\u677F\u5DF2\u5931\u6548");
+              if (key.startsWith("saved:") && reactPrintDesign.isPrintDesignTemplateInvalid(
+                savedPrintTemplates.find(
+                  (item) => item.id === key.slice(6)
+                ),
+                getPrintSourceFormat(source),
+                data
+              ))
+                throw new Error("\u6253\u5370\u6A21\u677F\u5DF2\u5931\u6548");
+              printTableTemplate(source, popup, document2);
+            }).catch((error) => {
+              popup.close();
+              console.error("\u76F4\u63A5\u6253\u5370\u5931\u8D25", error);
+            });
+          },
+          onViewCacheConfig: () => {
+            headerContextMenuRequest?.onClose();
+            setCacheConfigOpen(true);
+          },
           onPrint: () => {
             const getPrintData = headerContextMenuRequest?.onGetPrintData;
             if (!getPrintData) return;
-            void Promise.resolve(getPrintData()).then(
-              (source) => setPrintSource(source)
-            );
+            void Promise.resolve(getPrintData()).then(setPrintSource);
             headerContextMenuRequest?.onClose();
           },
           onDirectPrint: () => {
             const request = headerContextMenuRequest;
             if (!request?.onGetPrintData) return;
             request.onClose();
-            void Promise.resolve(request.onGetPrintData()).then(
-              (source) => createCachedPrintTableOptions(
-                source,
-                storageKey ? `list:${storageKey}` : void 0,
-                props.printPresets
-              )
-            ).then((options2) => {
-              print.printBrowserTable(options2);
+            const popup = window.open("", "_blank");
+            if (!popup) return;
+            void Promise.resolve(request.onGetPrintData()).then((source) => {
+              printTableTemplate(source, popup);
             }).catch((error) => {
+              popup.close();
               console.error("\u76F4\u63A5\u6253\u5370\u5931\u8D25", error);
             });
           },
@@ -8126,12 +6869,23 @@ function ReactListTableInner(props, ref) {
     ),
     printSource ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx(
-        ReactListTablePrintDialog,
+        ReactListTablePrintDesignDialog,
         {
           source: printSource,
+          storeKey: storageKey ? `list:${storageKey}` : void 0,
           printPresets: props.printPresets,
-          storageKey: storageKey ? `list:${storageKey}` : void 0,
-          onClose: () => setPrintSource(null),
+          printTemplates: props.printTemplates,
+          onClose: () => setPrintSource(null)
+        }
+      ),
+      portalContainer
+    ) : null,
+    cacheConfigOpen && storageKey ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ReactListTableCacheConfigDialog,
+        {
+          storageKey,
+          onClose: () => setCacheConfigOpen(false),
           renderTable: (tableProps) => /* @__PURE__ */ jsxRuntime.jsx(ReactListTable, { ...tableProps })
         }
       ),