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

package/dist/index.js

@@ -1,6 +1,7 @@
 import { createContext, memo, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useLayoutEffect, useContext, useId, Fragment as Fragment$1 } from 'react';
 import { createPortal } from 'react-dom';
-import { getSharedScrollbarSettings, subscribeSharedScrollbarSettings, setSharedScrollbarSettings, ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactScrollbarSettingsDialog, ReactScrollbarPositionDialog, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, resolveReactScrollbarMode, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader, ReactTreeSelect } from '@canvas-components/react-components';
+import { getSharedScrollbarSettings, subscribeSharedScrollbarSettings, setSharedScrollbarSettings, ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactScrollbarSettingsDialog, ReactScrollbarPositionDialog, ReactModal, ReactForm, ReactInput, ReactRadio, ReactColorPicker, ReactButton, ReactVirtualList, ReactPopconfirm, ReactContentScaleProvider, ReactInputNumber, resolveReactScrollbarMode, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader, ReactTreeSelect } from '@canvas-components/react-components';
+import { printBrowserTable, getBrowserPrintLayoutWarning, getBrowserPrintRowLayoutWarning, BROWSER_PRINT_PAPER_SIZES, calculateBrowserPrintRowsPerPage, calculateBrowserPrintColumnWidths, createBrowserPrintPreviewHtml } from '@canvas-components/print';
 import { EXPAND_COLUMN, SELECTION_COLUMN, ROW_SELECTION_COLUMN, resetListTableStoredColumnConfig, ListTable } from '@canvas-components/list-table';
 export { EXPAND_COLUMN, ROW_SELECTION_COLUMN, SELECTION_COLUMN, getListTableStoredPageSize } from '@canvas-components/list-table';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -1048,6 +1049,30 @@ function ReactTableContextMenuView(props) {
             }
           ),
           /* @__PURE__ */ jsx(MenuAction, { label: "\u67E5\u627E", onClick: request.onOpenSearch }),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u6253\u5370",
+              items: [
+                {
+                  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",
+                  onClick: request.onGetPrintData ? () => {
+                    setMenuOpen(false);
+                    props.onPrint?.();
+                  } : void 0
+                }
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(
             MenuAction,
             {
@@ -3946,6 +3971,1582 @@ function fitExportDialogColumns(columns, availableWidth) {
   return fit(columns);
 }
 
+// src/features/print/print-settings.ts
+function createPrintColumns(columns, summaryColumns = []) {
+  const choices = new Map(summaryColumns.map((column) => [column.key, column]));
+  return columns.map((column) => {
+    const choice = choices.get(column.key);
+    return {
+      ...column,
+      align: column.align ?? "left",
+      overflow: column.overflow ?? "wrap",
+      summaryType: choice?.summary.type ?? "none",
+      showTypePrefix: choice?.summary.showTypePrefix ? "yes" : "no",
+      precision: choice?.summary.precision,
+      roundingMode: choice?.summary.roundingMode ?? "round",
+      preserveTrailingZeros: choice?.summary.preserveTrailingZeros ? "yes" : "no",
+      summaryTitle: choice?.summaryTitle
+    };
+  });
+}
+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 = [];
+  settings?.columns?.forEach((saved) => {
+    const column = current.get(saved.key);
+    if (!column) return;
+    restored.push({ ...column, ...saved, title: column.title });
+    current.delete(saved.key);
+  });
+  return [...restored, ...current.values()];
+}
+function resolvePrintSelectedKeys(sourceColumns, presetConfig, cached) {
+  const cachedColumnKeys = 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 };
+  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"
+    }
+  );
+}
+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])
+  );
+  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"
+      }
+    ])
+  );
+  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;
+  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"
+  };
+}
+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 = useId();
+  const [cached] = 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] = useState(
+    () => restorePrintColumns(
+      restorePrintColumns(
+        createPrintColumns(props.source.columns, props.source.summaryColumns),
+        initialConfig?.columns ? { columns: initialConfig.columns } : null
+      ),
+      cached
+    )
+  );
+  const [selectedKeys, setSelectedKeys] = useState(
+    () => resolvePrintSelectedKeys(props.source.columns, initialConfig, cached)
+  );
+  const [rowsPerPage, setRowsPerPage] = useState(
+    cached?.rowsPerPage ?? initialConfig?.rowsPerPage ?? 30
+  );
+  const [rowHeight, setRowHeight] = useState(
+    cached?.rowHeight ?? initialConfig?.rowHeight ?? 8
+  );
+  const [autoCalculateRows, setAutoCalculateRows] = useState(
+    cached?.autoCalculateRowsPerPage ?? initialConfig?.autoCalculateRowsPerPage ?? false
+  );
+  const [title, setTitle] = useState(
+    cached?.title ?? initialConfig?.title ?? "\u8868\u683C\u6253\u5370"
+  );
+  const [subtitle, setSubtitle] = useState(
+    cached?.subtitle ?? initialConfig?.subtitle ?? ""
+  );
+  const [titleFontSize, setTitleFontSize] = useState(
+    cached?.titleFontSize ?? initialConfig?.titleFontSize ?? 18
+  );
+  const [subtitleFontSize, setSubtitleFontSize] = useState(
+    cached?.subtitleFontSize ?? initialConfig?.subtitleFontSize ?? 12
+  );
+  const [includeSummary, setIncludeSummary] = useState(
+    () => cached?.includeSummary ?? initialConfig?.includeSummary ?? Boolean(
+      props.source.summaryRow || props.source.summaryColumns?.some(
+        (column) => column.summary.type !== "none"
+      )
+    )
+  );
+  const [summaryPosition, setSummaryPosition] = useState(cached?.summaryPosition ?? initialConfig?.summaryPosition ?? "last-page");
+  const [showPageNumbers, setShowPageNumbers] = useState(
+    cached?.showPageNumbers ?? initialConfig?.showPageNumbers ?? false
+  );
+  const [pageNumberPosition, setPageNumberPosition] = useState(cached?.pageNumberPosition ?? initialConfig?.pageNumberPosition ?? "right");
+  const [showPrintTime, setShowPrintTime] = useState(
+    cached?.showPrintTime ?? initialConfig?.showPrintTime ?? false
+  );
+  const [printTimePosition, setPrintTimePosition] = useState(cached?.printTimePosition ?? initialConfig?.printTimePosition ?? "left");
+  const [pageMargins, setPageMargins] = useState(
+    cached?.pageMargins ?? initialConfig?.pageMargins ?? {
+      top: 12,
+      right: 12,
+      bottom: 12,
+      left: 12
+    }
+  );
+  const [paperSize, setPaperSize] = useState(cached?.paperSize ?? initialConfig?.paperSize ?? "a4");
+  const [orientation, setOrientation] = useState(
+    cached?.orientation ?? initialConfig?.orientation ?? "portrait"
+  );
+  const [useCellBorders, setUseCellBorders] = useState(
+    cached?.useCellBorders ?? initialConfig?.useCellBorders ?? true
+  );
+  const [borderColor, setBorderColor] = useState(
+    cached?.borderColor ?? initialConfig?.borderColor ?? "#000000"
+  );
+  const [textColor, setTextColor] = useState(
+    cached?.textColor ?? initialConfig?.textColor ?? "#000000"
+  );
+  const [headerBackgroundColor, setHeaderBackgroundColor] = useState(
+    cached?.headerBackgroundColor ?? initialConfig?.headerBackgroundColor ?? "#f2f5f8"
+  );
+  const [summaryBackgroundColor, setSummaryBackgroundColor] = useState(
+    cached?.summaryBackgroundColor ?? initialConfig?.summaryBackgroundColor ?? "#f2f5f8"
+  );
+  const [selectedPresetName, setSelectedPresetName] = useState(
+    initialPreset?.name ?? ""
+  );
+  const [showSectionDividers, setShowSectionDividers] = useState(
+    cached?.showSectionDividers ?? initialConfig?.showSectionDividers ?? true
+  );
+  const [sectionDividerTopSpacing, setSectionDividerTopSpacing] = useState(
+    cached?.sectionDividerTopSpacing ?? initialConfig?.sectionDividerTopSpacing ?? 4
+  );
+  const [sectionDividerBottomSpacing, setSectionDividerBottomSpacing] = useState(
+    cached?.sectionDividerBottomSpacing ?? initialConfig?.sectionDividerBottomSpacing ?? 4
+  );
+  const [formItemSpacing, setFormItemSpacing] = useState(
+    cached?.formItemSpacing ?? initialConfig?.formItemSpacing ?? 4
+  );
+  const [cacheEnabled, setCacheEnabled] = useState(Boolean(props.storageKey));
+  const [error, setError] = useState("");
+  const [previewHtml, setPreviewHtml] = useState("");
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [printFullscreen, setPrintFullscreen] = useState(false);
+  const [previewFullscreen, setPreviewFullscreen] = useState(false);
+  const [previewMode, setPreviewMode] = useState("render");
+  const [previewViewport, setPreviewViewport] = useState(() => ({
+    width: typeof window === "undefined" ? 1280 : window.innerWidth,
+    height: typeof window === "undefined" ? 900 : window.innerHeight
+  }));
+  const selectedColumnKeys = new Set(selectedKeys.map(String));
+  const layoutWarning = getBrowserPrintLayoutWarning({
+    columns: columns.filter((column) => selectedColumnKeys.has(column.key)),
+    pageMargins,
+    paperSize,
+    orientation
+  });
+  const rowLayoutWarning = getBrowserPrintRowLayoutWarning({
+    pageMargins,
+    paperSize,
+    orientation,
+    rowsPerPage,
+    rowHeight,
+    includeSummary,
+    summaryPosition,
+    showPageNumbers,
+    showPrintTime,
+    titleFontSize,
+    subtitleFontSize,
+    subtitle
+  });
+  const printLayoutWarning = [layoutWarning, rowLayoutWarning].filter(Boolean).join("\uFF1B");
+  const [paperWidth, paperHeight] = 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 = 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
+  ]);
+  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 = 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 = 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("");
+  };
+  useEffect(() => {
+    if (autoCalculateRows) autoCalculateRowsPerPage();
+  }, [
+    autoCalculateRows,
+    rowHeight,
+    includeSummary,
+    summaryPosition,
+    showPageNumbers,
+    showPrintTime,
+    titleFontSize,
+    subtitleFontSize,
+    subtitle,
+    paperSize,
+    orientation,
+    pageMargins
+  ]);
+  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(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 (!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 = [
+    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__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        height: 1,
+        marginTop: sectionDividerTopSpacing,
+        marginBottom: sectionDividerBottomSpacing,
+        background: "#e2e8f0"
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    ReactModal,
+    {
+      open: true,
+      title: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: {
+            display: "flex",
+            alignItems: "baseline",
+            gap: 12,
+            minWidth: 0
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "\u6253\u5370\u8868\u683C\u914D\u7F6E" }),
+            printLayoutWarning ? /* @__PURE__ */ 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__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            gap: 8,
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsx(ReactButton, { type: "default", onClick: props.onClose, children: "\u53D6\u6D88" }),
+            /* @__PURE__ */ jsx(ReactButton, { type: "default", onClick: previewPrintHtml, children: "\u6253\u5370\u9884\u89C8" }),
+            /* @__PURE__ */ jsx(ReactButton, { type: "primary", onClick: confirm, children: "\u6253\u5370" })
+          ]
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flex: "1 1 auto",
+              minHeight: 0,
+              flexDirection: "column"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  flex: "1 1 auto",
+                  minHeight: 0,
+                  gridTemplateColumns: "minmax(340px, 380px) minmax(0, 1fr)",
+                  gap: 20,
+                  alignItems: "stretch"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "grid",
+                        gap: 0,
+                        padding: "4px 4px 0 0",
+                        minHeight: 0,
+                        overflowY: "auto"
+                      },
+                      children: /* @__PURE__ */ jsxs(
+                        ReactForm,
+                        {
+                          layout: "horizontal",
+                          noWrap: true,
+                          itemSpacing: `${formItemSpacing}px`,
+                          labelWidth: 88,
+                          labelAlign: "left",
+                          style: { display: "contents" },
+                          children: [
+                            props.printPresets?.length ? /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6253\u5370\u914D\u7F6E", children: /* @__PURE__ */ jsx(
+                              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__ */ jsx(ReactForm.Item, { label: "\u7F13\u5B58\u5230\u672C\u5730", children: /* @__PURE__ */ jsx(
+                              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__ */ jsx(ReactForm.Item, { label: "\u5206\u9694\u7EBF\u5360\u4F4D", children: /* @__PURE__ */ jsx(
+                              ReactCheckbox,
+                              {
+                                checked: showSectionDividers,
+                                "aria-label": "\u663E\u793A\u5206\u7EC4\u5206\u9694\u7EBF",
+                                onChange: (event) => setShowSectionDividers(event.target.checked)
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u884C\u95F4\u8DDD\uFF08px\uFF09", children: /* @__PURE__ */ jsx(
+                              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__ */ jsx(ReactForm.Item, { label: "\u5206\u9694\u7EBF\u4E0A\u4E0B\u95F4\u8DDD\uFF08px\uFF09", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                              /* @__PURE__ */ jsx("span", { children: "\u4E0A" }),
+                              /* @__PURE__ */ jsx(
+                                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__ */ jsx("span", { children: "\u4E0B" }),
+                              /* @__PURE__ */ jsx(
+                                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__ */ jsx(ReactForm.Item, { label: "\u6807\u9898", children: /* @__PURE__ */ jsx(
+                              ReactInput,
+                              {
+                                value: title,
+                                "aria-label": "\u6253\u5370\u6807\u9898",
+                                allowClear: true,
+                                onChange: (event) => setTitle(event.target.value),
+                                style: { width: "100%", minWidth: 0 }
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u5B50\u6807\u9898", children: /* @__PURE__ */ jsx(
+                              ReactInput,
+                              {
+                                value: subtitle,
+                                "aria-label": "\u6253\u5370\u5B50\u6807\u9898",
+                                allowClear: true,
+                                onChange: (event) => setSubtitle(event.target.value),
+                                style: { width: "100%", minWidth: 0 }
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6807\u9898\u5B57\u53F7", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, minWidth: 0 }, children: [
+                              /* @__PURE__ */ jsx(
+                                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__ */ jsx(
+                                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__ */ jsx(ReactForm.Item, { label: "\u7EB8\u5F20", children: /* @__PURE__ */ jsx(
+                              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__ */ jsx(ReactForm.Item, { label: "\u6253\u5370\u65B9\u5411", children: /* @__PURE__ */ jsxs(
+                              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__ */ jsx(ReactRadio, { value: "portrait", children: "\u7EB5\u5411" }),
+                                  /* @__PURE__ */ jsx(ReactRadio, { value: "landscape", children: "\u6A2A\u5411" })
+                                ]
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6253\u5370\u8FB9\u8DDD\uFF08mm\uFF09", children: /* @__PURE__ */ 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__ */ jsxs(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "grid",
+                                      gridTemplateColumns: "20px minmax(0, 1fr)",
+                                      gap: 4,
+                                      alignItems: "center"
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx("span", { children: label }),
+                                      /* @__PURE__ */ jsx(
+                                        ReactNumberInput,
+                                        {
+                                          min: 0,
+                                          step: 1,
+                                          value: pageMargins[side],
+                                          onChange: (value) => setPageMargins((current) => ({
+                                            ...current,
+                                            [side]: value ?? 0
+                                          })),
+                                          style: { width: "100%" }
+                                        }
+                                      )
+                                    ]
+                                  },
+                                  side
+                                ))
+                              }
+                            ) }),
+                            sectionDivider,
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u5355\u5143\u683C\u8FB9\u6846", children: /* @__PURE__ */ jsx(
+                              ReactCheckbox,
+                              {
+                                checked: useCellBorders,
+                                "aria-label": "\u5355\u5143\u683C\u8FB9\u6846",
+                                onChange: (event) => setUseCellBorders(event.target.checked)
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u8FB9\u6846\u989C\u8272", children: /* @__PURE__ */ jsx(
+                              ReactColorPicker,
+                              {
+                                value: borderColor,
+                                disabled: !useCellBorders,
+                                onChange: setBorderColor,
+                                style: { width: "100%" }
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6587\u5B57\u989C\u8272", children: /* @__PURE__ */ jsx(
+                              ReactColorPicker,
+                              {
+                                value: textColor,
+                                onChange: setTextColor,
+                                style: { width: "100%" }
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u8868\u5934\u80CC\u666F\u8272", children: /* @__PURE__ */ jsx(
+                              ReactColorPicker,
+                              {
+                                value: headerBackgroundColor,
+                                onChange: setHeaderBackgroundColor,
+                                style: { width: "100%" }
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6C47\u603B\u884C\u80CC\u666F\u8272", children: /* @__PURE__ */ jsx(
+                              ReactColorPicker,
+                              {
+                                value: summaryBackgroundColor,
+                                onChange: setSummaryBackgroundColor,
+                                style: { width: "100%" }
+                              }
+                            ) }),
+                            sectionDivider,
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6253\u5370\u6C47\u603B\u884C", children: /* @__PURE__ */ jsx(
+                              ReactCheckbox,
+                              {
+                                checked: includeSummary,
+                                "aria-label": "\u6253\u5370\u6C47\u603B\u884C",
+                                onChange: (event) => setIncludeSummary(event.target.checked)
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6C47\u603B\u4F4D\u7F6E", children: /* @__PURE__ */ jsxs(
+                              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__ */ jsx(ReactRadio, { value: "every-page", disabled: !includeSummary, children: "\u6BCF\u9875" }),
+                                  /* @__PURE__ */ jsx(ReactRadio, { value: "last-page", disabled: !includeSummary, children: "\u6700\u540E\u4E00\u9875" })
+                                ]
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6253\u5370\u65F6\u95F4", children: /* @__PURE__ */ jsxs(
+                              "span",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: 8,
+                                  minWidth: 0,
+                                  whiteSpace: "nowrap"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    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__ */ jsx(ReactForm.Item, { label: "\u65F6\u95F4\u4F4D\u7F6E", children: /* @__PURE__ */ jsxs(
+                              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__ */ jsx(
+                                    ReactRadio,
+                                    {
+                                      value: "left",
+                                      disabled: !showPrintTime || showPageNumbers && pageNumberPosition === "left",
+                                      children: "\u5DE6\u4FA7"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    ReactRadio,
+                                    {
+                                      value: "center",
+                                      disabled: !showPrintTime || showPageNumbers && pageNumberPosition === "center",
+                                      children: "\u4E2D\u95F4"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    ReactRadio,
+                                    {
+                                      value: "right",
+                                      disabled: !showPrintTime || showPageNumbers && pageNumberPosition === "right",
+                                      children: "\u53F3\u4FA7"
+                                    }
+                                  )
+                                ]
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u5206\u9875\u4FE1\u606F", children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                              /* @__PURE__ */ jsx(
+                                ReactCheckbox,
+                                {
+                                  checked: showPageNumbers,
+                                  "aria-label": "\u663E\u793A\u5206\u9875\u4FE1\u606F",
+                                  onChange: (event) => setShowPageNumbers(event.target.checked)
+                                }
+                              ),
+                              "\u663E\u793A"
+                            ] }) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u5206\u9875\u4F4D\u7F6E", children: /* @__PURE__ */ jsxs(
+                              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__ */ jsx(
+                                    ReactRadio,
+                                    {
+                                      value: "left",
+                                      disabled: !showPageNumbers || showPrintTime && printTimePosition === "left",
+                                      children: "\u5DE6\u4FA7"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    ReactRadio,
+                                    {
+                                      value: "center",
+                                      disabled: !showPageNumbers || showPrintTime && printTimePosition === "center",
+                                      children: "\u4E2D\u95F4"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    ReactRadio,
+                                    {
+                                      value: "right",
+                                      disabled: !showPageNumbers || showPrintTime && printTimePosition === "right",
+                                      children: "\u53F3\u4FA7"
+                                    }
+                                  )
+                                ]
+                              }
+                            ) }),
+                            sectionDivider,
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u884C\u9AD8\uFF08mm\uFF09", children: /* @__PURE__ */ jsx(
+                              ReactNumberInput,
+                              {
+                                min: 1,
+                                step: 1,
+                                value: rowHeight,
+                                onChange: (value) => {
+                                  setRowHeight(value ?? 0);
+                                  setError("");
+                                },
+                                style: { width: "100%" }
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx(ReactForm.Item, { label: "\u6BCF\u9875\u884C\u6570", children: /* @__PURE__ */ jsxs(
+                              "span",
+                              {
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: 8,
+                                  whiteSpace: "nowrap"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    ReactNumberInput,
+                                    {
+                                      min: 1,
+                                      step: 1,
+                                      value: rowsPerPage,
+                                      onChange: (value) => {
+                                        setRowsPerPage(value ?? 0);
+                                        setError("");
+                                      },
+                                      style: { flex: "1 1 auto", minWidth: 0 }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    ReactCheckbox,
+                                    {
+                                      checked: autoCalculateRows,
+                                      "aria-label": "\u81EA\u52A8\u8BA1\u7B97\u6BCF\u9875\u884C\u6570",
+                                      onChange: (event) => setAutoCalculateRows(event.target.checked)
+                                    }
+                                  ),
+                                  "\u81EA\u52A8\u8BA1\u7B97"
+                                ]
+                              }
+                            ) })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        minWidth: 0,
+                        minHeight: 0,
+                        display: "flex",
+                        flexDirection: "column"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              justifyContent: "flex-end",
+                              marginBottom: 8
+                            },
+                            children: /* @__PURE__ */ jsx(
+                              ReactButton,
+                              {
+                                type: "default",
+                                onClick: autoCalculateColumnWidths,
+                                disabled: selectedKeys.length === 0,
+                                children: "\u81EA\u52A8\u8BA1\u7B97\u5217\u5BBD"
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ 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__ */ jsx("div", { role: "alert", style: { color: "#c2410c", marginTop: 8 }, children: error }) : null,
+        /* @__PURE__ */ jsx(
+          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__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  gap: 8,
+                  width: "100%"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ReactButton,
+                    {
+                      type: previewMode === "render" ? "primary" : "default",
+                      onClick: () => setPreviewMode("render"),
+                      children: "\u6548\u679C"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ReactButton,
+                    {
+                      type: previewMode === "source" ? "primary" : "default",
+                      onClick: () => setPreviewMode("source"),
+                      children: "HTML"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ReactButton, { type: "default", onClick: previewPrintHtml, children: "\u5237\u65B0\u9884\u89C8" })
+                ]
+              }
+            ),
+            onCancel: () => setPreviewOpen(false),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flex: 1,
+                  minHeight: 0,
+                  width: "100%",
+                  justifyContent: "center"
+                },
+                children: previewMode === "render" ? /* @__PURE__ */ jsx(
+                  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__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          ...meta.style,
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "flex-start",
+                          height: previewItemHeight,
+                          padding: 12,
+                          boxSizing: "border-box",
+                          overflow: "hidden"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              width: pageWidthPixels * previewScale,
+                              height: pageHeightPixels * previewScale,
+                              border: "1px solid #cbd5e1",
+                              position: "relative",
+                              overflow: "hidden",
+                              background: "white"
+                            },
+                            children: /* @__PURE__ */ 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__ */ 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)) {
@@ -5947,6 +7548,32 @@ function applyColumnManagerState(columns, visibility, orders, config, parentKey
     };
   });
 }
+function normalizeUniqueColumnKeys(columns) {
+  const usedKeys = /* @__PURE__ */ new Set();
+  const reservedKeys = /* @__PURE__ */ new Set();
+  const collectKeys = (items) => {
+    items.forEach((column) => {
+      reservedKeys.add(resolveColumnKey(column));
+      if (column.children) collectKeys(column.children);
+    });
+  };
+  collectKeys(columns);
+  const visit = (items) => items.map((column) => {
+    const baseKey = resolveColumnKey(column);
+    let key = baseKey;
+    let suffix = 2;
+    while (usedKeys.has(key) || key !== baseKey && reservedKeys.has(key)) {
+      key = `${baseKey}#${suffix++}`;
+    }
+    usedKeys.add(key);
+    return {
+      ...column,
+      key,
+      children: column.children ? visit(column.children) : void 0
+    };
+  });
+  return visit(columns);
+}
 function applyManagedColumnOrder(columns, orderedKeys) {
   const managedKeySet = new Set(orderedKeys);
   const managedSlots = columns.map(
@@ -6052,6 +7679,10 @@ function ReactListTableInner(props, ref) {
     toolbar,
     exportOptions
   } = props;
+  const sourceColumns = useMemo(
+    () => normalizeUniqueColumnKeys(columns),
+    [columns]
+  );
   const inheritedDebugEnabled = useReactListTableDebugEnabled();
   const resolvedDebug = useMemo(
     () => resolveReactListTableDebugOptions(debug, inheritedDebugEnabled),
@@ -6091,13 +7722,13 @@ function ReactListTableInner(props, ref) {
   const [columnConfigResetRevision, setColumnConfigResetRevision] = useState(0);
   const resolvedColumns = useMemo(
     () => applyColumnManagerState(
-      restoredColumnTree?.sourceColumns === columns && restoredColumnTree.storageKey === storageKey ? restoredColumnTree.columns : columns,
+      restoredColumnTree?.sourceColumns === sourceColumns && restoredColumnTree.storageKey === storageKey ? restoredColumnTree.columns : sourceColumns,
       columnVisibility,
       columnOrders,
       columnConfig
     ),
     [
-      columns,
+      sourceColumns,
       storageKey,
       restoredColumnTree,
       columnVisibility,
@@ -6178,10 +7809,10 @@ function ReactListTableInner(props, ref) {
         onColumnSettingsChange: (restoredColumns, source) => {
           const signature = getColumnSettingsSignature(restoredColumns);
           const current = restoredColumnTreeRef.current;
-          if (current?.sourceColumns === columns && current.storageKey === storageKey && current.signature === signature)
+          if (current?.sourceColumns === sourceColumns && current.storageKey === storageKey && current.signature === signature)
             return;
           const next = {
-            sourceColumns: columns,
+            sourceColumns,
             storageKey,
             columns: restoredColumns,
             signature
@@ -6266,6 +7897,7 @@ function ReactListTableInner(props, ref) {
     closeDangerConfirmRequest
   } = useReactListTableState(options);
   const hasPagination = paginationConfig != null;
+  const [printSource, setPrintSource] = useState(null);
   const paginationLayout = resolveReactListTablePaginationLayout(resolvedRowHeight);
   const portalContainer = resolveFullscreenPortalContainer(shellRef.current);
   useImperativeHandle(
@@ -6372,7 +8004,7 @@ function ReactListTableInner(props, ref) {
               },
               onResetColumns: () => {
                 const initialColumns = applyColumnManagerState(
-                  columns,
+                  sourceColumns,
                   /* @__PURE__ */ new Map(),
                   /* @__PURE__ */ new Map(),
                   /* @__PURE__ */ new Map()
@@ -6447,6 +8079,30 @@ function ReactListTableInner(props, ref) {
       /* @__PURE__ */ jsx(
         ReactTableContextMenuView,
         {
+          onPrint: () => {
+            const getPrintData = headerContextMenuRequest?.onGetPrintData;
+            if (!getPrintData) return;
+            void Promise.resolve(getPrintData()).then(
+              (source) => setPrintSource(source)
+            );
+            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) => {
+              printBrowserTable(options2);
+            }).catch((error) => {
+              console.error("\u76F4\u63A5\u6253\u5370\u5931\u8D25", error);
+            });
+          },
           request: headerContextMenuRequest ? {
             ...headerContextMenuRequest,
             scrollbar: effectiveScrollbar,
@@ -6467,6 +8123,19 @@ function ReactListTableInner(props, ref) {
       ),
       portalContainer
     ),
+    printSource ? createPortal(
+      /* @__PURE__ */ jsx(
+        ReactListTablePrintDialog,
+        {
+          source: printSource,
+          printPresets: props.printPresets,
+          storageKey: storageKey ? `list:${storageKey}` : void 0,
+          onClose: () => setPrintSource(null),
+          renderTable: (tableProps) => /* @__PURE__ */ jsx(ReactListTable, { ...tableProps })
+        }
+      ),
+      portalContainer
+    ) : null,
     searchRequest ? createPortal(
       /* @__PURE__ */ jsx(ReactListTableSearchDialog, { request: searchRequest }),
       portalContainer