@canvas-components/react-pivot-table 0.2.3 → 0.2.5

package/dist/index.js

@@ -1,79 +1,242 @@
-import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle } from 'react';
-import { createEmptyPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, getValueByDataIndex, resolvePivotDimensionTitle, findPivotFieldArea, removePivotField, movePivotField, resolvePivotValueFieldTitle, createPivotCellKey } from '@canvas-components/pivot-table';
+import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle, Fragment as Fragment$1 } from 'react';
+import { createEmptyPivotFieldLayout, createPivotFieldCatalog, resolvePivotDimensionKey, resolvePivotFieldLayoutOptions, PivotTable, loadPivotFieldLayout, getValueByDataIndex, resolvePivotDimensionTitle, findPivotFieldArea, removePivotField, movePivotField, resolvePivotValueFieldTitle, savePivotFieldLayout, createPivotCellKey } from '@canvas-components/pivot-table';
 import { ReactResizablePanels, ReactFilterPanel, ReactPopup, ReactCheckbox, ReactInput, ReactSelect, ReactInputNumber } from '@canvas-components/react-components';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { CanvasChart } from '@canvas-components/chart';
 
 // src/components/react-pivot-table.tsx
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/features/context-menu/pivot-context-menu.css
+styleInject(".react-pivot-table-menu-action {\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-pivot-table-menu-action:hover {\n  background: #f3f4f6 !important;\n}\n.react-pivot-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-pivot-table-menu-action:hover .react-pivot-table-menu-chevron,\n.react-pivot-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
+var CONTEXT_MENU_SURFACE_STYLE = {
+  padding: 8,
+  background: "#ffffff",
+  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)"
+};
 function PivotContextMenu(props) {
   const { request } = props;
+  const [menuOpen, setMenuOpen] = useState(true);
+  useEffect(() => {
+    if (request) setMenuOpen(true);
+  }, [request]);
   if (!request) return null;
   return /* @__PURE__ */ jsx(
     ReactPopup,
     {
-      open: true,
+      open: menuOpen,
       anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
       offset: 4,
       matchAnchorWidth: false,
-      minWidth: 180,
+      minWidth: 260,
       onOpenChange: (open) => {
+        setMenuOpen(open);
         if (!open) request.onClose();
       },
-      surfaceStyle: { padding: 6 },
-      children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", minWidth: 180 }, children: [
+      surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: 260 },
+      children: /* @__PURE__ */ jsxs("div", { children: [
+        request.title ? /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", color: "#8f959e", fontSize: 12 }, children: request.title }) : null,
         /* @__PURE__ */ jsx(
-          MenuButton,
+          MenuSubmenu,
           {
-            label: "\u590D\u5236\u5355\u5143\u683C",
-            onClick: request.onCopy,
-            close: request.onClose
+            label: "\u590D\u5236",
+            items: [
+              {
+                key: "copy-cell",
+                label: request.target === "header" ? "\u590D\u5236\u8868\u5934" : "\u590D\u5236\u5355\u5143\u683C",
+                onClick: request.onCopy
+              },
+              {
+                key: "copy-selection",
+                label: "\u590D\u5236\u9009\u533A",
+                onClick: request.target === "header" ? void 0 : request.onCopySelection
+              }
+            ],
+            children: request.target !== "header" ? /* @__PURE__ */ jsx(CustomSelectionMenu, { request }) : null
           }
         ),
-        request.onCopySelection ? /* @__PURE__ */ jsx(
-          MenuButton,
-          {
-            label: "\u590D\u5236\u9009\u533A",
-            onClick: request.onCopySelection,
-            close: request.onClose
-          }
-        ) : null,
-        /* @__PURE__ */ jsx(
-          CustomSelectionMenu,
+        request.target === "header" ? /* @__PURE__ */ jsx(HeaderMenu, { request }) : null,
+        request.target === "summary" ? /* @__PURE__ */ jsx(
+          SummaryMenu,
           {
             request
           },
-          `${request.x}-${request.y}`
-        ),
-        /* @__PURE__ */ jsx(
-          MenuButton,
-          {
-            label: "\u5BFC\u51FA CSV",
-            onClick: request.onExportCsv,
-            close: request.onClose
-          }
-        ),
+          `${request.indicatorKey}-${request.x}-${request.y}`
+        ) : null,
+        /* @__PURE__ */ jsx(DataFormatMenu, { request }),
+        /* @__PURE__ */ jsx(DensityMenu, { request }),
         /* @__PURE__ */ jsx(
-          MenuButton,
+          MenuSubmenu,
           {
-            label: "\u5BFC\u51FA XLSX",
-            onClick: request.onExportXlsx,
-            close: request.onClose
+            label: "\u5BFC\u51FA",
+            items: [
+              {
+                key: "export-csv",
+                label: "\u5BFC\u51FA CSV",
+                onClick: request.onExportCsv
+              },
+              {
+                key: "export-xlsx",
+                label: "\u5BFC\u51FA XLSX",
+                onClick: request.onExportXlsx
+              }
+            ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { padding: "8px 10px", color: "#8f959e", fontSize: 12 }, children: [
+        request.recordCount != null ? /* @__PURE__ */ jsxs("div", { style: { padding: "8px 10px", color: "#8f959e", fontSize: 12 }, children: [
           "\u4E0B\u94BB\u8BB0\u5F55 ",
           request.recordCount,
           " \u6761"
-        ] })
+        ] }) : null
       ] })
     }
   );
 }
+function HeaderMenu(props) {
+  const { request } = props;
+  const hasSort = request.onSortAsc || request.onSortDesc || request.onClearSort;
+  const hasExpand = request.onExpand || request.onCollapse || request.onExpandAll || request.onCollapseAll;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasSort ? /* @__PURE__ */ jsx(
+      MenuSubmenu,
+      {
+        label: "\u6392\u5E8F",
+        items: [
+          {
+            key: "sort-asc",
+            label: "\u5347\u5E8F",
+            selected: request.sortDirection === "asc",
+            onClick: request.onSortAsc
+          },
+          {
+            key: "sort-desc",
+            label: "\u964D\u5E8F",
+            selected: request.sortDirection === "desc",
+            onClick: request.onSortDesc
+          },
+          {
+            key: "sort-clear",
+            label: "\u53D6\u6D88\u6392\u5E8F",
+            onClick: request.onClearSort
+          }
+        ]
+      }
+    ) : null,
+    request.onOpenFilter ? /* @__PURE__ */ jsx(MenuAction, { label: "\u6253\u5F00\u7B5B\u9009\u9762\u677F", onClick: request.onOpenFilter }) : null,
+    hasExpand ? /* @__PURE__ */ jsx(
+      MenuSubmenu,
+      {
+        label: "\u5C55\u5F00/\u6298\u53E0",
+        items: [
+          {
+            key: "toggle-current",
+            label: request.expanded ? "\u6298\u53E0\u5F53\u524D\u9879" : "\u5C55\u5F00\u5F53\u524D\u9879",
+            onClick: request.expanded ? request.onCollapse : request.onExpand
+          },
+          {
+            key: "expand-all",
+            label: "\u5168\u90E8\u5C55\u5F00",
+            onClick: request.onExpandAll
+          },
+          {
+            key: "collapse-all",
+            label: "\u5168\u90E8\u6298\u53E0",
+            onClick: request.onCollapseAll
+          }
+        ]
+      }
+    ) : null
+  ] });
+}
+function SummaryMenu(props) {
+  const { request } = props;
+  const [precision, setPrecision] = useState(
+    request.summaryPrecision ?? null
+  );
+  const aggregators = [
+    ["sum", "\u6C42\u548C"],
+    ["avg", "\u5E73\u5747\u503C"],
+    ["count", "\u8BA1\u6570"],
+    ["distinctCount", "\u53BB\u91CD\u8BA1\u6570"],
+    ["min", "\u6700\u5C0F\u503C"],
+    ["max", "\u6700\u5927\u503C"]
+  ];
+  if (!request.onChangeSummaryAggregator) return null;
+  return /* @__PURE__ */ jsx(
+    MenuSubmenu,
+    {
+      label: "\u6C47\u603B\u65B9\u5F0F",
+      items: aggregators.map(([value, label]) => ({
+        key: `summary-${value}`,
+        label,
+        selected: request.summaryAggregator === value,
+        onClick: () => {
+          request.onChangeSummaryAggregator?.(value);
+          request.onClose();
+        }
+      })),
+      footer: request.onChangeSummaryPrecision ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "72px 1fr",
+            gap: 8,
+            alignItems: "center",
+            marginTop: 4,
+            padding: "10px 10px 4px",
+            borderTop: "1px solid #e5e7eb"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
+            /* @__PURE__ */ jsx(
+              ReactInputNumber,
+              {
+                value: precision,
+                min: 0,
+                max: 20,
+                step: 1,
+                precision: 0,
+                placeholder: "\u81EA\u52A8",
+                onChange: (value) => {
+                  setPrecision(value);
+                  request.onChangeSummaryPrecision?.(value ?? void 0);
+                }
+              }
+            )
+          ]
+        }
+      ) : null
+    }
+  );
+}
+function MenuDivider() {
+  return /* @__PURE__ */ jsx("div", { style: { height: 1, margin: "6px 0", background: "#f0f0f0" } });
+}
 function CustomSelectionMenu(props) {
   const { request } = props;
-  const triggerRef = useRef(null);
-  const [open, setOpen] = useState(false);
   const [range, setRange] = useState(
     request.customSelection ?? {
       startRow: 1,
@@ -91,104 +254,79 @@ function CustomSelectionMenu(props) {
       [key]: value == null ? 1 : Math.floor(value)
     }));
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx(MenuSubmenu, { label: "\u590D\u5236\u81EA\u5B9A\u4E49\u9009\u533A", items: [], minWidth: 250, children: /* @__PURE__ */ jsxs("div", { style: { padding: 6 }, children: [
+    /* @__PURE__ */ jsx("div", { style: { color: "#6b7280", fontSize: 12, marginBottom: 6 }, children: "\u8F93\u5165\u8D77\u59CB\u4F4D\u7F6E\u548C\u7ED3\u675F\u4F4D\u7F6E" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "38px 1fr 1fr",
+          gap: 6,
+          marginBottom: 4,
+          color: "#6b7280",
+          fontSize: 12,
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", { children: "\u884C" }),
+          /* @__PURE__ */ jsx("span", { children: "\u5217" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
-      "button",
+      CustomSelectionRow,
       {
-        ref: triggerRef,
-        type: "button",
-        onClick: () => setOpen((value) => !value),
-        style: menuButtonStyle,
-        children: "\u590D\u5236\u81EA\u5B9A\u4E49\u9009\u533A"
+        label: "\u8D77\u59CB",
+        row: range.startRow,
+        column: range.startColumn,
+        maxRow: range.rowCount,
+        maxColumn: range.columnCount,
+        onRowChange: (value) => update("startRow", value),
+        onColumnChange: (value) => update("startColumn", value)
       }
     ),
     /* @__PURE__ */ jsx(
-      ReactPopup,
+      CustomSelectionRow,
       {
-        open,
-        anchorRef: triggerRef,
-        placement: "rightTop",
-        offset: 2,
-        minWidth: 250,
-        onOpenChange: setOpen,
-        surfaceStyle: { padding: 6, width: 250 },
-        children: /* @__PURE__ */ jsxs("div", { style: { padding: 6 }, children: [
-          /* @__PURE__ */ jsx("div", { style: { color: "#6b7280", fontSize: 12, marginBottom: 6 }, children: "\u8F93\u5165\u8D77\u59CB\u4F4D\u7F6E\u548C\u7ED3\u675F\u4F4D\u7F6E" }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "grid",
-                gridTemplateColumns: "38px 1fr 1fr",
-                gap: 6,
-                marginBottom: 4,
-                color: "#6b7280",
-                fontSize: 12,
-                textAlign: "center"
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", {}),
-                /* @__PURE__ */ jsx("span", { children: "\u884C" }),
-                /* @__PURE__ */ jsx("span", { children: "\u5217" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            CustomSelectionRow,
-            {
-              label: "\u8D77\u59CB",
-              row: range.startRow,
-              column: range.startColumn,
-              maxRow: range.rowCount,
-              maxColumn: range.columnCount,
-              onRowChange: (value) => update("startRow", value),
-              onColumnChange: (value) => update("startColumn", value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            CustomSelectionRow,
-            {
-              label: "\u7ED3\u675F",
-              row: range.endRow,
-              column: range.endColumn,
-              maxRow: range.rowCount,
-              maxColumn: range.columnCount,
-              onRowChange: (value) => update("endRow", value),
-              onColumnChange: (value) => update("endColumn", value)
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              style: {
-                display: "block",
-                width: "100%",
-                height: 32,
-                marginTop: 6,
-                border: "none",
-                borderRadius: 4,
-                background: "#1677ff",
-                color: "#fff",
-                cursor: "pointer"
-              },
-              onClick: () => {
-                request.onCopyCustomSelection?.({
-                  startRow: range.startRow,
-                  startColumn: range.startColumn,
-                  endRow: range.endRow,
-                  endColumn: range.endColumn
-                });
-                setOpen(false);
-                request.onClose();
-              },
-              children: "\u590D\u5236"
-            }
-          )
-        ] })
+        label: "\u7ED3\u675F",
+        row: range.endRow,
+        column: range.endColumn,
+        maxRow: range.rowCount,
+        maxColumn: range.columnCount,
+        onRowChange: (value) => update("endRow", value),
+        onColumnChange: (value) => update("endColumn", value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        style: {
+          display: "block",
+          width: "100%",
+          height: 32,
+          marginTop: 6,
+          border: "none",
+          borderRadius: 4,
+          background: "#1677ff",
+          color: "#fff",
+          cursor: "pointer"
+        },
+        onClick: () => {
+          request.onCopyCustomSelection?.({
+            startRow: range.startRow,
+            startColumn: range.startColumn,
+            endRow: range.endRow,
+            endColumn: range.endColumn
+          });
+          request.onClose();
+        },
+        children: "\u590D\u5236"
       }
     )
-  ] });
+  ] }) });
 }
 function CustomSelectionRow(props) {
   return /* @__PURE__ */ jsxs(
@@ -231,27 +369,324 @@ function CustomSelectionRow(props) {
     }
   );
 }
-var menuButtonStyle = {
-  height: 34,
-  padding: "0 10px",
-  border: 0,
-  borderRadius: 4,
-  background: "transparent",
-  color: "#1f2329",
-  textAlign: "left",
-  cursor: "pointer"
-};
-function MenuButton(props) {
-  return /* @__PURE__ */ jsx(
+function MenuAction(props) {
+  const { label, preview, onClick, selected, disabled, reserveSelectionIcon } = props;
+  if (!onClick && !disabled) return null;
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick: () => {
-        props.onClick();
-        props.close();
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      className: "react-pivot-table-menu-action",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        height: 32,
+        padding: "0 10px",
+        border: "none",
+        borderRadius: 8,
+        background: "transparent",
+        color: disabled ? "#9ca3af" : "#374151",
+        textAlign: "left",
+        cursor: disabled ? "default" : "pointer"
       },
-      style: menuButtonStyle,
-      children: props.label
+      children: [
+        reserveSelectionIcon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: 16,
+              flex: "0 0 16px",
+              marginRight: 6,
+              textAlign: "center"
+            },
+            children: selected ? "\u2713" : ""
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { style: { flex: 1, whiteSpace: "nowrap" }, children: label }),
+        preview ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: { marginLeft: 16, color: "#9ca3af", whiteSpace: "nowrap" },
+            children: preview
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MenuSubmenu(props) {
+  const { label, items, footer, children, minWidth = 220 } = props;
+  const menuItems = items.filter((item) => item.onClick || item.disabled);
+  const reserveSelectionIcon = menuItems.some(
+    (item) => typeof item.selected === "boolean"
+  );
+  const triggerRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const closeTimerRef = useRef(null);
+  if (!menuItems.length && !footer && !children) return null;
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current != null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+  const scheduleClose = () => {
+    clearCloseTimer();
+    closeTimerRef.current = window.setTimeout(() => {
+      setOpen(false);
+      closeTimerRef.current = null;
+    }, 120);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: () => {
+        clearCloseTimer();
+        setOpen(true);
+      },
+      onMouseLeave: scheduleClose,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            onClick: () => setOpen((value) => !value),
+            className: "react-pivot-table-menu-action react-pivot-table-menu-action-submenu",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              height: 32,
+              padding: "0 10px",
+              border: "none",
+              borderRadius: 8,
+              background: "transparent",
+              color: "#374151",
+              textAlign: "left",
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `react-pivot-table-menu-chevron${open ? " react-pivot-table-menu-chevron-active" : ""}`,
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ReactPopup,
+          {
+            open,
+            anchorRef: triggerRef,
+            placement: "rightTop",
+            offset: 2,
+            minWidth,
+            onOpenChange: setOpen,
+            surfaceStyle: { ...CONTEXT_MENU_SURFACE_STYLE, width: minWidth },
+            children: /* @__PURE__ */ jsxs("div", { onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, children: [
+              menuItems.map((item) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                item.separatorBefore ? /* @__PURE__ */ jsx(MenuDivider, {}) : null,
+                /* @__PURE__ */ jsx(
+                  MenuAction,
+                  {
+                    label: item.label,
+                    preview: item.preview,
+                    selected: item.selected,
+                    disabled: item.disabled,
+                    onClick: item.onClick,
+                    reserveSelectionIcon
+                  }
+                )
+              ] }, item.key)),
+              children,
+              footer
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function DensityMenu(props) {
+  const { request } = props;
+  if (!request.onChangeDensity) return null;
+  return /* @__PURE__ */ jsx(
+    MenuSubmenu,
+    {
+      label: "\u8868\u683C\u5BC6\u5EA6",
+      items: [
+        {
+          key: "density-comfortable",
+          label: "\u5BBD\u677E",
+          selected: request.density === "comfortable",
+          onClick: () => request.onChangeDensity?.("comfortable")
+        },
+        {
+          key: "density-middle",
+          label: "\u4E2D\u7B49",
+          selected: request.density === "middle",
+          onClick: () => request.onChangeDensity?.("middle")
+        },
+        {
+          key: "density-compact",
+          label: "\u7D27\u51D1",
+          selected: request.density === "compact",
+          onClick: () => request.onChangeDensity?.("compact")
+        },
+        {
+          key: "density-ultra-compact",
+          label: "\u8D85\u7D27\u51D1",
+          selected: request.density === "ultra-compact",
+          onClick: () => request.onChangeDensity?.("ultra-compact")
+        },
+        {
+          key: "density-auto",
+          label: "\u81EA\u9002\u5E94",
+          selected: request.density === "auto",
+          onClick: () => request.onChangeDensity?.("auto")
+        }
+      ]
+    }
+  );
+}
+function DataFormatMenu(props) {
+  const { request } = props;
+  if (!request.onChangeDataFormat) return null;
+  const formats = [
+    { key: "default", label: "\u5E38\u89C4", value: "default" },
+    { key: "text", label: "\u7EAF\u6587\u672C", value: "text" },
+    {
+      key: "number",
+      label: "\u6570\u5B57",
+      preview: "1024",
+      value: "number",
+      separatorBefore: true
+    },
+    {
+      key: "thousands",
+      label: "\u6570\u5B57\uFF08\u5343\u5206\u4F4D\uFF09",
+      preview: "1,024",
+      value: "thousands"
+    },
+    {
+      key: "decimal",
+      label: "\u6570\u5B57\uFF08\u5343\u5206\u4F4D\uFF0C\u5C0F\u6570\u70B9\uFF09",
+      preview: "1,024.56",
+      value: "decimal"
+    },
+    {
+      key: "percent",
+      label: "\u767E\u5206\u6BD4",
+      preview: "10%",
+      value: "percent",
+      separatorBefore: true
+    },
+    {
+      key: "percentDecimal",
+      label: "\u767E\u5206\u6BD4\uFF08\u5C0F\u6570\u70B9\uFF09",
+      preview: "10.24%",
+      value: "percentDecimal"
+    },
+    {
+      key: "scientific",
+      label: "\u79D1\u5B66\u8BB0\u6570",
+      preview: "1.02E+003",
+      value: "scientific"
+    },
+    {
+      key: "numberToChineseUpper",
+      label: "\u6570\u5B57\u8F6C\u5927\u5199",
+      preview: "\u7396\u62FE\u58F9\u4E07\u634C\u4EDF",
+      value: "numberToChineseUpper"
+    },
+    {
+      key: "chineseUpperToNumber",
+      label: "\u5927\u5199\u8F6C\u6570\u5B57",
+      preview: "918000",
+      value: "chineseUpperToNumber"
+    },
+    {
+      key: "cny",
+      label: "\u4EBA\u6C11\u5E01",
+      preview: "\xA51,024",
+      value: "cny",
+      separatorBefore: true
+    },
+    {
+      key: "cnyDecimal",
+      label: "\u4EBA\u6C11\u5E01\uFF08\u5C0F\u6570\u70B9\uFF09",
+      preview: "\xA51,024.56",
+      value: "cnyDecimal"
+    },
+    { key: "usd", label: "\u7F8E\u5143", preview: "$1,024", value: "usd" },
+    {
+      key: "usdDecimal",
+      label: "\u7F8E\u5143\uFF08\u5C0F\u6570\u70B9\uFF09",
+      preview: "$1,024.56",
+      value: "usdDecimal"
+    },
+    {
+      key: "dateSlash",
+      label: "\u65E5\u671F\uFF08\u659C\u6760\uFF09",
+      preview: "2017/08/01",
+      value: "dateSlash",
+      separatorBefore: true
+    },
+    {
+      key: "dateDash",
+      label: "\u65E5\u671F\uFF08\u77ED\u6A2A\u7EBF\uFF09",
+      preview: "2017-08-01",
+      value: "dateDash"
+    },
+    {
+      key: "dateFullCN",
+      label: "\u65E5\u671F\uFF08\u4E2D\u6587\uFF09",
+      preview: "2017\u5E748\u67081\u65E5",
+      value: "dateFullCN"
+    },
+    { key: "time", label: "\u65F6\u95F4", preview: "23:24:25", value: "time" },
+    {
+      key: "timeShort",
+      label: "\u65F6\u95F4\uFF08\u5206\uFF09",
+      preview: "23:24",
+      value: "timeShort"
+    },
+    {
+      key: "datetime",
+      label: "\u65E5\u671F\u65F6\u95F4",
+      preview: "2017/08/01 23:24:25",
+      value: "datetime"
+    },
+    {
+      key: "datetime12",
+      label: "\u65E5\u671F\u65F6\u95F4\uFF08\u4E0A\u4E0B\uFF09",
+      preview: "2017/08/01 \u4E0B\u534811:24",
+      value: "datetime12"
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    MenuSubmenu,
+    {
+      label: "\u683C\u5F0F",
+      minWidth: 340,
+      items: formats.map((item) => ({
+        key: `data-format-${item.key}`,
+        label: item.label,
+        preview: "preview" in item ? item.preview : void 0,
+        separatorBefore: "separatorBefore" in item ? item.separatorBefore : void 0,
+        selected: request.dataFormat === item.value,
+        onClick: () => request.onChangeDataFormat?.(item.value)
+      }))
     }
   );
 }
@@ -286,28 +721,6 @@ function PivotTooltip(props) {
   );
 }
 
-// #style-inject:#style-inject
-function styleInject(css, { insertAt } = {}) {
-  if (!css || typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
 // src/features/field-panel/pivot-field-panel.css
 styleInject('.react-pivot-table-customization {\n  position: relative;\n  overflow: hidden;\n}\n.react-pivot-table-customization__table {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.react-pivot-table-customization__panel-column {\n  flex-grow: 0 !important;\n  overflow: hidden;\n}\n.react-pivot-table-customization__chart-column {\n  flex-grow: 0 !important;\n  overflow: hidden;\n}\n.react-pivot-field-panel {\n  display: flex;\n  width: 100%;\n  min-width: 280px;\n  height: 100%;\n  flex-direction: column;\n  overflow: hidden;\n  background: #fff;\n  color: #1f2329;\n  font-family:\n    "Segoe UI",\n    "Microsoft YaHei",\n    sans-serif;\n  font-size: 13px;\n  box-sizing: border-box;\n}\n.react-pivot-field-panel button,\n.react-pivot-field-panel input,\n.react-pivot-field-panel select {\n  font: inherit;\n}\n.react-pivot-field-panel__header {\n  display: flex;\n  height: 42px;\n  flex: 0 0 42px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 10px 0 14px;\n  border-bottom: 1px solid #edf0f2;\n  background: #fff;\n}\n.react-pivot-field-panel__icon-button {\n  display: inline-flex;\n  width: 24px;\n  height: 24px;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: #646a73;\n  cursor: pointer;\n  font: 18px/24px "Segoe UI", sans-serif;\n}\n.react-pivot-field-panel__icon-button:hover {\n  background: #f2f3f5;\n  color: #d14343;\n}\n.react-pivot-field-panel__layout {\n  width: 100%;\n  height: auto;\n  min-height: 0;\n  flex: 1 1 0;\n  overflow: hidden;\n}\n.react-pivot-field-panel__layout > .canvas-react-resizable-panels-item > .canvas-react-resizable-panel {\n  overflow: hidden;\n}\n.react-pivot-field-panel__section {\n  height: 100%;\n  padding: 10px 12px 0;\n  box-sizing: border-box;\n}\n.react-pivot-field-panel__section--fields,\n.react-pivot-field-panel__section--areas {\n  display: flex;\n  min-height: 0;\n  flex-direction: column;\n}\n.react-pivot-field-panel__section--fields {\n  padding-bottom: 6px;\n}\n.react-pivot-field-panel__section--areas {\n  padding-bottom: 12px;\n}\n.react-pivot-field-panel__section-title {\n  margin-bottom: 5px;\n  font-weight: 600;\n}\n.react-pivot-field-panel__hint {\n  margin-bottom: 8px;\n  color: #646a73;\n  font-size: 12px;\n}\n.react-pivot-field-panel__search {\n  display: flex;\n  height: 32px;\n  align-items: center;\n  gap: 8px;\n  padding: 0 9px;\n  border: 1px solid #d5d9de;\n  border-radius: 3px;\n  background: #fff;\n  box-sizing: border-box;\n}\n.react-pivot-field-panel__search > span {\n  width: 12px;\n  height: 12px;\n  border: 1.5px solid #4f5660;\n  border-radius: 50%;\n  position: relative;\n}\n.react-pivot-field-panel__search > span::after {\n  position: absolute;\n  right: -4px;\n  bottom: -3px;\n  width: 5px;\n  height: 1.5px;\n  background: #4f5660;\n  content: "";\n  transform: rotate(45deg);\n}\n.react-pivot-field-panel__search input {\n  min-width: 0;\n  flex: 1;\n  border: 0;\n  outline: 0;\n  color: #1f2329;\n}\n.react-pivot-field-panel__field-list {\n  min-height: 0;\n  flex: 1;\n  margin-top: 6px;\n  overflow: auto;\n  border: 1px solid #dfe3e7;\n  border-radius: 3px;\n  background: #fff;\n}\n.react-pivot-field-panel__field,\n.react-pivot-field-panel__area-field {\n  display: grid;\n  height: 28px;\n  align-items: center;\n  column-gap: 6px;\n  box-sizing: border-box;\n}\n.react-pivot-field-panel__field {\n  grid-template-columns: 10px 16px minmax(0, 1fr);\n  padding: 0 8px 0 6px;\n}\n.react-pivot-field-panel__field:hover {\n  background: #f5f8fb;\n}\n.react-pivot-field-panel__field[data-dragging] {\n  opacity: 0.45;\n}\n.react-pivot-field-panel__field > span:nth-of-type(2),\n.react-pivot-field-panel__area-field > span:nth-of-type(2) {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.react-pivot-field-panel__drag {\n  width: 8px;\n  height: 12px;\n  cursor: grab;\n  background-image:\n    radial-gradient(\n      circle at 2px 2px,\n      #8f959e 1px,\n      transparent 1.2px);\n  background-position: 0 0;\n  background-size: 4px 4px;\n  background-repeat: repeat;\n}\n.react-pivot-field-panel__empty,\n.react-pivot-field-panel__area-empty {\n  display: grid;\n  height: 100%;\n  place-items: center;\n  color: #8f959e;\n  font-size: 12px;\n}\n.react-pivot-field-panel__areas {\n  display: grid;\n  min-height: 0;\n  flex: 1;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 8px;\n}\n.react-pivot-field-panel__area-wrap {\n  display: flex;\n  min-width: 0;\n  min-height: 0;\n  flex-direction: column;\n}\n.react-pivot-field-panel__area-title {\n  display: grid;\n  height: 25px;\n  grid-template-columns: minmax(0, 1fr);\n  align-items: center;\n  gap: 5px;\n  color: #3f454d;\n}\n.react-pivot-field-panel__area {\n  min-height: 0;\n  flex: 1;\n  overflow: auto;\n  border: 1px solid #dfe3e7;\n  border-radius: 3px;\n  background: #fff;\n}\n.react-pivot-field-panel__area[data-dragging] {\n  border-color: #2f78d0;\n  background: #f7faff;\n}\n.react-pivot-field-panel__area-field {\n  grid-template-columns: 9px minmax(0, 1fr) 18px;\n  padding: 0 7px 0 5px;\n}\n.react-pivot-field-panel__area-field:hover {\n  background: #f5f8fb;\n}\n.react-pivot-field-panel__area-field-menu {\n  display: grid;\n  width: 18px;\n  height: 22px;\n  padding: 0;\n  place-items: center;\n  border: 0;\n  background: transparent;\n  color: #646a73;\n  cursor: pointer;\n}\n.react-pivot-field-panel__area-field-menu:hover {\n  color: #1f2329;\n  background: #e9edf2;\n}\n.react-pivot-field-panel__area-field-menu > span {\n  width: 0;\n  height: 0;\n  border-top: 5px solid currentColor;\n  border-right: 4px solid transparent;\n  border-left: 4px solid transparent;\n}\n.react-pivot-field-menu {\n  min-width: 176px;\n  padding: 5px 0;\n  color: #1f2329;\n  font:\n    13px "Segoe UI",\n    "Microsoft YaHei",\n    sans-serif;\n}\n.react-pivot-field-menu__item {\n  display: block;\n  width: 100%;\n  height: 30px;\n  padding: 0 12px;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n.react-pivot-field-menu__item:hover:not(:disabled) {\n  background: #e9f2fc;\n}\n.react-pivot-field-menu__item:disabled {\n  color: #a7abb2;\n  cursor: default;\n}\n.react-pivot-field-menu__item[data-danger] {\n  color: #c9372c;\n}\n.react-pivot-field-menu__separator {\n  height: 1px;\n  margin: 4px 0;\n  background: #e1e4e8;\n}\n.react-pivot-field-settings {\n  display: grid;\n  min-width: 260px;\n  gap: 12px;\n  padding: 14px;\n  color: #1f2329;\n  font:\n    13px "Segoe UI",\n    "Microsoft YaHei",\n    sans-serif;\n}\n.react-pivot-field-settings label {\n  display: grid;\n  gap: 5px;\n  color: #515761;\n}\n.react-pivot-field-settings__name-input,\n.react-pivot-field-settings__aggregator {\n  height: 30px;\n  font: inherit;\n}\n.react-pivot-field-settings__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.react-pivot-field-settings__actions button {\n  height: 30px;\n  padding: 0 14px;\n  border: 1px solid #bfc4cb;\n  border-radius: 3px;\n  background: #fff;\n  cursor: pointer;\n}\n.react-pivot-field-settings__actions button.is-primary {\n  border-color: #2f78d0;\n  background: #2f78d0;\n  color: #fff;\n}\n');
 function PivotFieldPanel(props) {
@@ -573,7 +986,7 @@ function FieldContextMenu(props) {
       },
       children: /* @__PURE__ */ jsxs("div", { className: "react-pivot-field-menu", role: "menu", children: [
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u4E0A\u79FB",
             disabled: index <= 0,
@@ -582,7 +995,7 @@ function FieldContextMenu(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u4E0B\u79FB",
             disabled: index < 0 || index >= keys.length - 1,
@@ -591,7 +1004,7 @@ function FieldContextMenu(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u79FB\u81F3\u5F00\u5934",
             disabled: index <= 0,
@@ -600,7 +1013,7 @@ function FieldContextMenu(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u79FB\u81F3\u672B\u5C3E",
             disabled: index === keys.length - 1,
@@ -610,7 +1023,7 @@ function FieldContextMenu(props) {
         ),
         /* @__PURE__ */ jsx(MenuSeparator, {}),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u6DFB\u52A0\u5230\u62A5\u8868\u7B5B\u9009",
             disabled: state.area === "filter",
@@ -619,7 +1032,7 @@ function FieldContextMenu(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u6DFB\u52A0\u5230\u884C\u6807\u7B7E",
             disabled: state.area === "row",
@@ -628,7 +1041,7 @@ function FieldContextMenu(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u6DFB\u52A0\u5230\u5217\u6807\u7B7E",
             disabled: state.area === "column",
@@ -637,7 +1050,7 @@ function FieldContextMenu(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u79FB\u52A8\u5230\u503C",
             disabled: state.area === "value",
@@ -647,7 +1060,7 @@ function FieldContextMenu(props) {
         ),
         /* @__PURE__ */ jsx(MenuSeparator, {}),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u5220\u9664\u5B57\u6BB5",
             danger: true,
@@ -656,7 +1069,7 @@ function FieldContextMenu(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          MenuAction,
+          MenuAction2,
           {
             label: "\u5B57\u6BB5\u8BBE\u7F6E...",
             onClick: () => props.onSettings(state)
@@ -739,7 +1152,7 @@ function FieldSettingsPopup(props) {
     }
   );
 }
-function MenuAction(props) {
+function MenuAction2(props) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -1266,10 +1679,12 @@ function ReactPivotTableInner(props, ref) {
     null
   );
   const chartIdRef = useRef(0);
+  const layoutRevisionRef = useRef(0);
   const [internalLayout, setInternalLayout] = useState(
     () => customizationOptions?.defaultLayout ?? createEmptyPivotFieldLayout()
   );
   const [fieldOverrides, setFieldOverrides] = useState({});
+  const [densityOverride, setDensityOverride] = useState(null);
   const [filterRequest, setFilterRequest] = useState(null);
   const [contextMenuRequest, setContextMenuRequest] = useState(null);
   const [tooltipRequest, setTooltipRequest] = useState(null);
@@ -1313,7 +1728,9 @@ function ReactPivotTableInner(props, ref) {
         indicator: {
           ...field.indicator,
           title: override.title ?? field.indicator?.title,
-          aggregator: override.aggregator ?? field.indicator?.aggregator
+          aggregator: override.aggregator ?? field.indicator?.aggregator,
+          precision: "precision" in override ? override.precision : field.indicator?.precision,
+          dataFormat: "dataFormat" in override ? override.dataFormat : field.indicator?.dataFormat
         }
       };
     }),
@@ -1323,6 +1740,20 @@ function ReactPivotTableInner(props, ref) {
     () => customizationEnabled ? resolvePivotFieldLayoutOptions(fields, fieldLayout) : null,
     [customizationEnabled, fieldLayout, fields]
   );
+  const overriddenIndicators = useMemo(
+    () => tableOptions.indicators.map((indicator) => {
+      const override = fieldOverrides[indicator.key];
+      if (!override) return indicator;
+      return {
+        ...indicator,
+        title: override.title ?? indicator.title,
+        aggregator: override.aggregator ?? indicator.aggregator,
+        precision: "precision" in override ? override.precision : indicator.precision,
+        dataFormat: "dataFormat" in override ? override.dataFormat : indicator.dataFormat
+      };
+    }),
+    [fieldOverrides, tableOptions.indicators]
+  );
   const refreshChartModel = () => {
     const nextModel = tableRef.current?.getPivotModel() ?? null;
     setChartModel((current) => current === nextModel ? current : nextModel);
@@ -1330,9 +1761,31 @@ function ReactPivotTableInner(props, ref) {
   const options = {
     ...tableOptions,
     ...customizedOptions,
+    rowHeight: densityOverride == null ? tableOptions.rowHeight : resolveDensityRowHeight(densityOverride),
+    indicators: customizedOptions?.indicators ?? overriddenIndicators,
     ui: {
       onFilterPanelRequest: setFilterRequest,
-      onContextMenuRequest: setContextMenuRequest,
+      onContextMenuRequest: (request) => {
+        if (request) {
+          const nativeChangeDensity = request.onChangeDensity;
+          const fieldKey = request.indicatorKey;
+          const enhancedRequest = {
+            ...request,
+            onChangeDensity: (density) => {
+              nativeChangeDensity?.(density);
+              setDensityOverride(density);
+            },
+            onChangeDataFormat: fieldKey == null ? void 0 : (dataFormat) => updateField(fieldKey, { dataFormat })
+          };
+          if (request.target === "summary" && fieldKey != null) {
+            enhancedRequest.onChangeSummaryAggregator = (aggregator) => updateField(fieldKey, { aggregator });
+            enhancedRequest.onChangeSummaryPrecision = (precision) => updateField(fieldKey, { precision });
+          }
+          setContextMenuRequest(enhancedRequest);
+          return;
+        }
+        setContextMenuRequest(null);
+      },
       onTooltipRequest: setTooltipRequest
     },
     onFilterChange: (event) => {
@@ -1371,7 +1824,13 @@ function ReactPivotTableInner(props, ref) {
     setCharts((current) => current.filter((chart) => chart.id !== chartId));
   };
   const applyLayout = (next) => {
-    if (customizationOptions?.layout === void 0) setInternalLayout(next);
+    if (customizationOptions?.layout === void 0) {
+      layoutRevisionRef.current += 1;
+      setInternalLayout(next);
+      if (customizationOptions?.storageKey) {
+        void savePivotFieldLayout(customizationOptions.storageKey, next);
+      }
+    }
     customizationOptions?.onLayoutChange?.(next);
   };
   const moveField = (fieldKey, area, index, sourceArea) => {
@@ -1380,7 +1839,7 @@ function ReactPivotTableInner(props, ref) {
   const removeField = (fieldKey) => {
     applyLayout(removePivotField(fieldLayout, fieldKey));
   };
-  const updateField = (fieldKey, patch) => {
+  function updateField(fieldKey, patch) {
     setFieldOverrides((current) => ({
       ...current,
       [fieldKey]: { ...current[fieldKey], ...patch }
@@ -1395,11 +1854,13 @@ function ReactPivotTableInner(props, ref) {
         indicator: {
           ...field.indicator,
           title: patch.title ?? field.indicator?.title,
-          aggregator: patch.aggregator ?? field.indicator?.aggregator
+          aggregator: patch.aggregator ?? field.indicator?.aggregator,
+          precision: "precision" in patch ? patch.precision : field.indicator?.precision,
+          dataFormat: "dataFormat" in patch ? patch.dataFormat : field.indicator?.dataFormat
         }
       });
     }
-  };
+  }
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
@@ -1419,6 +1880,22 @@ function ReactPivotTableInner(props, ref) {
     table.updateOptions(options);
     refreshChartModel();
   }, [options]);
+  useEffect(() => {
+    const storageKey = customizationOptions?.storageKey;
+    if (!storageKey || customizationOptions?.layout !== void 0) return;
+    let active = true;
+    const revision = layoutRevisionRef.current;
+    void loadPivotFieldLayout(storageKey).then((storedLayout) => {
+      if (!active || !storedLayout || layoutRevisionRef.current !== revision) {
+        return;
+      }
+      setInternalLayout(storedLayout);
+      customizationOptions?.onLayoutChange?.(storedLayout);
+    });
+    return () => {
+      active = false;
+    };
+  }, [customizationOptions?.layout, customizationOptions?.storageKey]);
   useEffect(() => {
     if (customizationOptions?.panelWidth != null) {
       setFieldPanelWidth(customizationOptions.panelWidth);
@@ -1565,6 +2042,13 @@ function ReactPivotTableInner(props, ref) {
     /* @__PURE__ */ jsx(PivotTooltip, { request: tooltipRequest })
   ] });
 }
+function resolveDensityRowHeight(density) {
+  if (density === "comfortable") return 56;
+  if (density === "middle") return 48;
+  if (density === "compact") return 32;
+  if (density === "ultra-compact") return 26;
+  return void 0;
+}
 var ReactPivotTable = forwardRef(ReactPivotTableInner);
 function toSharedFilterRequest(request, onValueChange) {
   if (!request) return null;