@canvas-components/react-list-table 0.3.18 → 0.3.20

package/dist/index.js

@@ -1,11 +1,11 @@
 import { createContext, forwardRef, useMemo, useRef, useState, useImperativeHandle, useContext, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { createPortal } from 'react-dom';
-import { ReactImagePreview, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactInputNumber, ReactCheckbox, ReactAutoComplete, ReactColorPicker, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange } from '@canvas-components/react-components';
+import { ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader } from '@canvas-components/react-components';
 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';
 import { formatDateTimeValue, isDateTimeFormatPattern } from '@canvas-components/utils/date';
 import { formatNumberValue, formatPercentValue, formatScientificValue, formatCustomNumberPattern } from '@canvas-components/utils/number';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
@@ -31,6 +31,328 @@ function styleInject(css, { insertAt } = {}) {
 
 // src/styles/table-overrides.css
 styleInject(".react-list-table-filter-option {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-filter-option:hover {\n  background: #f3f4f6;\n}\n.react-list-table-menu-action,\n.react-list-table-menu-row {\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-list-table-menu-action:hover,\n.react-list-table-menu-row:hover {\n  background: #f3f4f6 !important;\n}\n.react-list-table-custom-selection-copy {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-custom-selection-copy:hover {\n  background: #4096ff !important;\n}\n.react-list-table-custom-selection-input > .canvas-react-input-number-handler-down {\n  display: none;\n}\n.react-list-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-list-table-menu-action:hover .react-list-table-menu-chevron,\n.react-list-table-menu-row:hover .react-list-table-menu-chevron {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n.react-list-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
+var conditionalOperators = {
+  eq: "\u7B49\u4E8E",
+  neq: "\u4E0D\u7B49\u4E8E",
+  gt: "\u5927\u4E8E",
+  gte: "\u5927\u4E8E\u7B49\u4E8E",
+  lt: "\u5C0F\u4E8E",
+  lte: "\u5C0F\u4E8E\u7B49\u4E8E",
+  between: "\u4ECB\u4E8E\uFF08\u542B\u8FB9\u754C\uFF09",
+  contains: "\u5305\u542B\u6587\u672C",
+  empty: "\u4E3A\u7A7A",
+  notEmpty: "\u4E0D\u4E3A\u7A7A"
+};
+function describeConditionalRule(rule) {
+  return resolveConditions(rule).map(
+    (condition, index) => `${index === 0 ? "" : (condition.relation ?? rule.conditionRelation ?? "and") === "or" ? " \u6216 " : " \u4E14 "}${conditionalOperators[condition.operator]}${condition.operator === "empty" || condition.operator === "notEmpty" ? "" : ` ${condition.value ?? ""}`}${condition.operator === "between" ? ` \uFF5E ${condition.endValue ?? ""}` : ""}`
+  ).join("");
+}
+function resolveConditions(rule) {
+  return rule.conditions ?? (rule.operator ? [
+    {
+      operator: rule.operator,
+      value: rule.value,
+      endValue: rule.endValue
+    }
+  ] : []);
+}
+function validateConditionalRule(rule) {
+  const conditions = resolveConditions(rule);
+  if (!conditions.length) return "\u8BF7\u81F3\u5C11\u6DFB\u52A0\u4E00\u4E2A\u6761\u4EF6\u3002";
+  for (const [index, condition] of conditions.entries()) {
+    const error = validateCondition(condition);
+    if (error) return `\u6761\u4EF6 ${index + 1}\uFF1A${error}`;
+  }
+  return null;
+}
+function validateCondition(rule) {
+  if (rule.operator === "empty" || rule.operator === "notEmpty") return null;
+  if (String(rule.value ?? "").trim() === "")
+    return "\u8BF7\u8F93\u5165\u6BD4\u8F83\u503C\uFF1B\u7A7A\u503C\u8BF7\u4F7F\u7528\u201C\u4E3A\u7A7A\u201D\u6761\u4EF6\u3002";
+  if (["gt", "gte", "lt", "lte", "between"].includes(rule.operator)) {
+    if (!Number.isFinite(Number(rule.value))) return "\u8BF7\u8F93\u5165\u6709\u6548\u6570\u503C\u3002";
+    if (rule.operator === "between" && (String(rule.endValue ?? "").trim() === "" || !Number.isFinite(Number(rule.endValue)) || Number(rule.endValue) < Number(rule.value)))
+      return "\u8BF7\u8F93\u5165\u4E0D\u5C0F\u4E8E\u8D77\u59CB\u503C\u7684\u7ED3\u675F\u6570\u503C\u3002";
+  }
+  return null;
+}
+function ConditionalFormatDialog(props) {
+  const rules = props.request.conditionalFormats ?? [];
+  const [rule, setRule] = useState(
+    () => props.index == null ? {
+      id: `rule-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      operator: "gt",
+      value: "",
+      backgroundColor: "#fff1b8",
+      textColor: "#1f2329"
+    } : { ...rules[props.index] }
+  );
+  const [error, setError] = useState(null);
+  const conditions = resolveConditions(rule);
+  const patch = (value) => {
+    setRule((current) => ({ ...current, ...value }));
+    setError(null);
+  };
+  const apply = (next) => {
+    props.request.onChangeConditionalFormats?.(next);
+    props.onClose();
+  };
+  const patchCondition = (index, value) => {
+    patch({
+      conditions: conditions.map(
+        (condition, i) => i === index ? { ...condition, ...value } : condition
+      )
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      open: true,
+      title: props.index == null ? "\u65B0\u589E\u6761\u4EF6\u683C\u5F0F\u89C4\u5219" : "\u7F16\u8F91\u6761\u4EF6\u683C\u5F0F\u89C4\u5219",
+      width: 460,
+      onCancel: props.onClose,
+      onOk: () => {
+        const message = validateConditionalRule(rule);
+        if (message) {
+          setError(message);
+          return;
+        }
+        const next = rules.map((item) => ({ ...item }));
+        if (props.index == null) next.push(rule);
+        else next[props.index] = rule;
+        apply(next);
+      },
+      okText: "\u4FDD\u5B58\u89C4\u5219",
+      cancelText: "\u53D6\u6D88",
+      children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 14, fontSize: 14 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { color: "#64748b" }, children: "\u4EC5\u5F53\u524D\u5217\u751F\u6548\uFF1B\u4ECE\u4E0A\u5230\u4E0B\u5339\u914D\uFF0C\u9996\u6761\u547D\u4E2D\u7684\u80CC\u666F\u751F\u6548\u3002 \u6761\u4EF6\u4E4B\u95F4\u53EF\u5206\u522B\u8BBE\u7F6E\u201C\u4E14 / \u6216\u201D\uFF0C\u4E14\u4F18\u5148\u4E8E\u6216\u3002" }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          "\u89C4\u5219\u540D\u79F0\uFF08\u53EF\u9009\uFF09",
+          /* @__PURE__ */ jsx(
+            ReactInput,
+            {
+              value: rule.name ?? "",
+              onChange: (event) => patch({ name: event.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gap: 12,
+              maxHeight: "35vh",
+              overflowY: "auto"
+            },
+            children: conditions.map((condition, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              index > 0 && /* @__PURE__ */ jsx(
+                ReactSelect,
+                {
+                  "aria-label": `\u6761\u4EF6 ${index} \u4E0E\u6761\u4EF6 ${index + 1} \u7684\u5173\u7CFB`,
+                  value: condition.relation ?? rule.conditionRelation ?? "and",
+                  options: [
+                    { value: "and", label: "\u4E14" },
+                    { value: "or", label: "\u6216" }
+                  ],
+                  onChange: (value) => patchCondition(index, { relation: value }),
+                  style: { width: 88, justifySelf: "center" }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    gap: 8,
+                    padding: 12,
+                    border: "1px solid #d9e1ec"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            "\u6761\u4EF6 ",
+                            index + 1
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            ReactButton,
+                            {
+                              type: "text",
+                              size: "small",
+                              disabled: conditions.length === 1,
+                              "aria-label": `\u5220\u9664\u6761\u4EF6 ${index + 1}`,
+                              onClick: () => patch({
+                                conditions: conditions.filter((_, i) => i !== index)
+                              }),
+                              children: "\u5220\u9664\u6761\u4EF6"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ReactSelect,
+                      {
+                        "aria-label": `\u6761\u4EF6 ${index + 1} \u6BD4\u8F83\u65B9\u5F0F`,
+                        value: condition.operator,
+                        options: Object.entries(conditionalOperators).map(
+                          ([value, label]) => ({ value, label })
+                        ),
+                        onChange: (value) => patchCondition(index, {
+                          operator: value
+                        })
+                      }
+                    ),
+                    condition.operator !== "empty" && condition.operator !== "notEmpty" && /* @__PURE__ */ jsxs("label", { children: [
+                      "\u6BD4\u8F83\u503C",
+                      /* @__PURE__ */ jsx(
+                        ReactInput,
+                        {
+                          value: String(condition.value ?? ""),
+                          onChange: (event) => patchCondition(index, { value: event.target.value })
+                        }
+                      )
+                    ] }),
+                    condition.operator === "between" && /* @__PURE__ */ jsxs("label", { children: [
+                      "\u7ED3\u675F\u503C",
+                      /* @__PURE__ */ jsx(
+                        ReactInput,
+                        {
+                          value: String(condition.endValue ?? ""),
+                          onChange: (event) => patchCondition(index, { endValue: event.target.value })
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }, index))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ReactButton,
+          {
+            onClick: () => patch({
+              conditions: [
+                ...conditions,
+                { operator: "gt", value: "", relation: "and" }
+              ]
+            }),
+            children: "\u65B0\u589E\u6761\u4EF6"
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { style: { display: "grid", gap: 4 }, children: [
+          "\u5355\u5143\u683C\u80CC\u666F",
+          /* @__PURE__ */ jsx(
+            ReactColorPicker,
+            {
+              "aria-label": "\u5355\u5143\u683C\u80CC\u666F",
+              value: rule.backgroundColor,
+              onChange: (backgroundColor) => patch({ backgroundColor })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { style: { display: "grid", gap: 4 }, children: [
+          "\u6587\u672C\u989C\u8272",
+          /* @__PURE__ */ jsx(
+            ReactColorPicker,
+            {
+              "aria-label": "\u6587\u672C\u989C\u8272",
+              value: rule.textColor,
+              onChange: (textColor) => patch({ textColor })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "8px 12px",
+              backgroundColor: rule.backgroundColor,
+              color: rule.textColor,
+              border: "1px solid #d9e1ec"
+            },
+            children: [
+              "\u6837\u5F0F\u9884\u89C8\uFF1A",
+              describeConditionalRule(rule)
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx("div", { role: "alert", style: { color: "#cf1322" }, children: error }),
+        props.index != null && /* @__PURE__ */ jsx(
+          ReactButton,
+          {
+            type: "text",
+            danger: true,
+            onClick: () => apply(rules.filter((_, index) => index !== props.index)),
+            children: "\u5220\u9664\u6B64\u89C4\u5219"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/features/context-menu/cache-menu.ts
+function buildCacheMenuItems(request) {
+  const available = request.columnSettingsCacheAvailable === true;
+  const items = [];
+  const state = {
+    disabled: !available,
+    title: available ? void 0 : "\u914D\u7F6E storageKey \u540E\u53EF\u7F13\u5B58\u914D\u7F6E"
+  };
+  if (request.onChangeColumnSettingsCache)
+    items.push({
+      ...state,
+      key: "cache-columns",
+      label: "\u5217\u8BBE\u7F6E",
+      selected: available && request.cacheColumnSettings === true,
+      onClick: () => request.onChangeColumnSettingsCache?.(!request.cacheColumnSettings)
+    });
+  if (request.onChangeCachePreference) {
+    const categories = [
+      ["sort", "\u6392\u5E8F"],
+      ["filter", "\u7B5B\u9009"],
+      ["summary", "\u6C47\u603B"],
+      ["alignment", "\u5BF9\u9F50"],
+      ["dataFormat", "\u683C\u5F0F"],
+      ["density", "\u8868\u683C\u5BC6\u5EA6"],
+      ["zoom", "\u7F29\u653E"]
+    ];
+    for (const [category, label] of categories)
+      items.push({
+        ...state,
+        key: `cache-${category}`,
+        label,
+        selected: available && request.cachePreferences?.[category] !== false,
+        onClick: () => request.onChangeCachePreference?.(
+          category,
+          request.cachePreferences?.[category] === false
+        )
+      });
+  }
+  if (request.onChangeConditionalFormats)
+    items.push({
+      ...state,
+      key: "cache-conditional",
+      label: "\u5F53\u524D\u5217\u6761\u4EF6\u683C\u5F0F",
+      selected: available && request.cacheConditionalFormats !== false,
+      onClick: () => request.onChangeConditionalFormats?.(
+        request.conditionalFormats ?? [],
+        request.cacheConditionalFormats === false
+      )
+    });
+  return items;
+}
 var CONTEXT_MENU_SURFACE_STYLE = {
   padding: 8,
   background: "#ffffff",
@@ -39,10 +361,22 @@ var CONTEXT_MENU_SURFACE_STYLE = {
 function ReactTableContextMenuView(props) {
   const { request } = props;
   const [menuOpen, setMenuOpen] = useState(true);
+  const [conditionalEditor, setConditionalEditor] = useState(null);
+  const conditionalDialog = conditionalEditor ? /* @__PURE__ */ jsx(
+    ConditionalFormatDialog,
+    {
+      ...conditionalEditor,
+      onClose: () => {
+        setConditionalEditor(null);
+        conditionalEditor.request.onClose();
+      }
+    }
+  ) : null;
   const [moreFormatRequest, setMoreFormatRequest] = useState(null);
   const [customSelectionRequest, setCustomSelectionRequest] = useState(null);
   if (!request) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
+      conditionalDialog,
       moreFormatRequest ? /* @__PURE__ */ jsx(
         MoreFormatDialog,
         {
@@ -67,15 +401,17 @@ function ReactTableContextMenuView(props) {
     width: 260
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    conditionalDialog,
     /* @__PURE__ */ jsx(
       ReactPopup,
       {
+        constrainHeight: true,
         open: menuOpen,
         anchorRect: { x: request.x, y: request.y, width: 0, height: 0 },
         minWidth: 260,
         onOpenChange: (open) => {
           setMenuOpen(open);
-          if (!open && !moreFormatRequest && !customSelectionRequest) {
+          if (!open && !moreFormatRequest && !customSelectionRequest && !conditionalEditor) {
             request.onClose();
           }
         },
@@ -110,7 +446,28 @@ function ReactTableContextMenuView(props) {
                   key: "copy-selection",
                   label: "\u590D\u5236\u9009\u533A",
                   onClick: request.onCopySelection
-                }
+                },
+                ...request.onCopyImage ? [
+                  {
+                    key: "copy-image-all",
+                    label: "\u590D\u5236\u4E3A\u56FE\u7247 \xB7 \u6240\u6709\u533A\u57DF",
+                    separatorBefore: true,
+                    title: "\u5F53\u524D\u5DF2\u52A0\u8F7D\u5E76\u7ECF\u8FC7\u6392\u5E8F\u8FC7\u6EE4\u7684\u5168\u90E8\u6570\u636E\uFF0C\u4E0D\u8BF7\u6C42\u672A\u52A0\u8F7D\u7684\u670D\u52A1\u7AEF\u6570\u636E",
+                    onClick: () => request.onCopyImage?.("all")
+                  },
+                  {
+                    key: "copy-image-selection",
+                    label: "\u590D\u5236\u4E3A\u56FE\u7247 \xB7 \u9009\u4E2D\u533A\u57DF",
+                    disabled: !request.canCopySelectionImage,
+                    onClick: () => request.onCopyImage?.("selection")
+                  },
+                  {
+                    key: "copy-image-viewport",
+                    label: "\u590D\u5236\u4E3A\u56FE\u7247 \xB7 \u89C6\u53E3\u533A\u57DF",
+                    title: "\u5F53\u524D\u53EF\u89C1\u8868\u683C\uFF0C\u5305\u542B\u8868\u5934\u548C\u6C47\u603B\u884C\uFF0C\u4E0D\u5305\u542B\u5206\u9875\u5668\u548C\u83DC\u5355",
+                    onClick: () => request.onCopyImage?.("viewport")
+                  }
+                ] : []
               ],
               children: /* @__PURE__ */ jsx(
                 CustomSelectionMenu,
@@ -149,7 +506,26 @@ function ReactTableContextMenuView(props) {
                   key: "export-json",
                   label: "\u5BFC\u51FA JSON",
                   onClick: request.onExportJson
-                }
+                },
+                ...request.onExportImage ? [
+                  {
+                    key: "export-image-all",
+                    label: "\u5BFC\u51FA\u56FE\u7247 \xB7 \u6240\u6709\u533A\u57DF",
+                    separatorBefore: true,
+                    onClick: () => request.onExportImage?.("all")
+                  },
+                  {
+                    key: "export-image-selection",
+                    label: "\u5BFC\u51FA\u56FE\u7247 \xB7 \u9009\u4E2D\u533A\u57DF",
+                    disabled: !request.canCopySelectionImage,
+                    onClick: () => request.onExportImage?.("selection")
+                  },
+                  {
+                    key: "export-image-viewport",
+                    label: "\u5BFC\u51FA\u56FE\u7247 \xB7 \u89C6\u53E3\u533A\u57DF",
+                    onClick: () => request.onExportImage?.("viewport")
+                  }
+                ] : []
               ]
             }
           ),
@@ -222,6 +598,41 @@ function ReactTableContextMenuView(props) {
           ),
           /* @__PURE__ */ jsx(SummaryMenu, { request }),
           /* @__PURE__ */ jsx(AlignmentMenu, { request }),
+          request.onChangeConditionalFormats && /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u6761\u4EF6\u683C\u5F0F",
+              items: [
+                {
+                  key: "add-rule",
+                  label: "\u65B0\u589E\u89C4\u5219",
+                  onClick: () => {
+                    setConditionalEditor({ request, index: null });
+                    setMenuOpen(false);
+                  }
+                },
+                {
+                  key: "reset-rules",
+                  label: "\u91CD\u7F6E\u6761\u4EF6\u683C\u5F0F",
+                  disabled: !request.conditionalFormats?.length,
+                  onClick: () => request.onChangeConditionalFormats?.([])
+                }
+              ],
+              header: /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 4, paddingBottom: 8 }, children: request.conditionalFormats?.length ? request.conditionalFormats.map((rule, index) => /* @__PURE__ */ jsx(
+                MenuAction,
+                {
+                  label: rule.name?.trim() || `\u89C4\u5219 ${index + 1}`,
+                  colorSwatch: rule.backgroundColor,
+                  title: `${rule.name?.trim() || `\u89C4\u5219 ${index + 1}`}\uFF1A${describeConditionalRule(rule)}`,
+                  onClick: () => {
+                    setConditionalEditor({ request, index });
+                    setMenuOpen(false);
+                  }
+                },
+                rule.id
+              )) : /* @__PURE__ */ jsx("span", { style: { color: "#64748b", padding: 8 }, children: "\u6682\u65E0\u89C4\u5219" }) })
+            }
+          ),
           /* @__PURE__ */ jsx(
             DataFormatMenu,
             {
@@ -352,6 +763,13 @@ function ReactTableContextMenuView(props) {
             }
           ),
           /* @__PURE__ */ jsx(ZoomMenu, { value: request.zoom ?? 1, onChange: request.onChangeZoom }),
+          /* @__PURE__ */ jsx(
+            MenuSubmenu,
+            {
+              label: "\u7F13\u5B58\u5230\u672C\u5730",
+              items: buildCacheMenuItems(request)
+            }
+          ),
           request.columns?.length && request.onToggleColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(MenuDivider, {}),
             /* @__PURE__ */ jsx(
@@ -398,6 +816,7 @@ function MenuAction(props) {
       type: "button",
       onClick: disabled ? void 0 : onClick,
       disabled,
+      title: props.title,
       className: "react-list-table-menu-action",
       style: {
         display: "flex",
@@ -426,7 +845,36 @@ function MenuAction(props) {
             children: selected ? "\u2713" : ""
           }
         ) : null,
-        /* @__PURE__ */ jsx("span", { style: { flex: 1, whiteSpace: "nowrap" }, children: label }),
+        props.colorSwatch ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: 14,
+              height: 14,
+              flex: "0 0 14px",
+              marginRight: 8,
+              borderRadius: 2,
+              backgroundColor: props.colorSwatch,
+              boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.12)"
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              flex: 1,
+              whiteSpace: "nowrap",
+              ...props.colorSwatch ? {
+                minWidth: 0,
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              } : null
+            },
+            children: label
+          }
+        ),
         preview ? /* @__PURE__ */ jsx(
           "span",
           {
@@ -509,6 +957,7 @@ function MenuSubmenu(props) {
         /* @__PURE__ */ jsx(
           ReactPopup,
           {
+            constrainHeight: true,
             open,
             anchorRef: triggerRef,
             placement: "rightTop",
@@ -536,6 +985,7 @@ function MenuSubmenu(props) {
                       MenuAction,
                       {
                         label: item.label,
+                        title: item.title,
                         preview: item.preview,
                         onClick: item.onClick,
                         selected: item.selected,
@@ -698,6 +1148,7 @@ function ZoomMenu(props) {
         /* @__PURE__ */ jsx(
           ReactPopup,
           {
+            constrainHeight: true,
             open,
             anchorRef: triggerRef,
             placement: "rightTop",
@@ -862,6 +1313,7 @@ function ColumnVisibilityMenu(props) {
         /* @__PURE__ */ jsx(
           ReactPopup,
           {
+            constrainHeight: true,
             open,
             anchorRef: triggerRef,
             placement: "rightTop",
@@ -968,6 +1420,7 @@ function ColumnVisibilityItem(props) {
         hasChildren ? /* @__PURE__ */ jsx(
           ReactPopup,
           {
+            constrainHeight: true,
             open,
             anchorRef: triggerRef,
             placement: "rightTop",
@@ -1022,13 +1475,7 @@ function CustomSelectionMenu(props) {
   if (!request.onCopyCustomSelection || !request.customSelection) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
-    MenuAction,
-    {
-      label: "\u590D\u5236\u81EA\u5B9A\u4E49\u9009\u533A",
-      onClick: props.onOpen
-    }
-  );
+  return /* @__PURE__ */ jsx(MenuAction, { label: "\u590D\u5236\u81EA\u5B9A\u4E49\u9009\u533A", onClick: props.onOpen });
 }
 function CustomSelectionDialog(props) {
   const { request } = props;
@@ -1241,6 +1688,16 @@ function SummaryMenu(props) {
           selected: request.summaryType === item.value,
           onClick: () => request.onChangeSummaryType?.(item.value)
         })),
+        {
+          key: "show-summary-type-prefix",
+          label: "\u5C55\u793A\u6C47\u603B\u65B9\u5F0F\u524D\u7F00",
+          separatorBefore: true,
+          selected: request.summaryShowTypePrefix !== false,
+          disabled: !request.summaryType,
+          onClick: request.onChangeSummaryShowTypePrefix ? () => request.onChangeSummaryShowTypePrefix?.(
+            request.summaryShowTypePrefix === false
+          ) : void 0
+        },
         {
           key: "clear-summary",
           label: "\u53D6\u6D88\u6C47\u603B",
@@ -2329,6 +2786,8 @@ function ReactTableEditorOverlay(props) {
 }
 function renderEditorByType(request, style) {
   switch (request.config.valueType ?? "text") {
+    case "cascader":
+      return /* @__PURE__ */ jsx(CascaderEditor, { request, style });
     case "number":
       return /* @__PURE__ */ jsx(NumberEditor, { request, style });
     case "input-range":
@@ -2617,6 +3076,50 @@ function DateEditor(props) {
     }
   ) });
 }
+function CascaderEditor({
+  request,
+  style
+}) {
+  const [value, setValue] = useState(
+    Array.isArray(request.value) ? request.value : []
+  );
+  const skipBlurCommitRef = useRef(false);
+  useEffect(() => {
+    setValue(Array.isArray(request.value) ? request.value : []);
+  }, [request.value]);
+  return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+    ReactCascader,
+    {
+      value,
+      options: request.config.options,
+      autoFocus: true,
+      placeholder: request.config.placeholder,
+      showSearch: request.config.showSearch,
+      allowClear: request.config.allowClear,
+      changeOnSelect: request.config.changeOnSelect,
+      expandTrigger: request.config.expandTrigger,
+      displayRender: request.config.displayRender,
+      style: getEditorInputStyle(request),
+      onChange: (next, _options, info) => {
+        setValue(next);
+        request.onChange(next);
+        if (info.complete && info.trigger !== "clear") {
+          skipBlurCommitRef.current = true;
+          request.onCommit();
+        }
+      },
+      onBlur: (event) => handleEditorBlur(event, skipBlurCommitRef, request),
+      onKeyDown: (event) => {
+        if (event.key === "Tab")
+          handleEditorNavigationKey(event, request, skipBlurCommitRef);
+        if (event.key === "Escape") {
+          skipBlurCommitRef.current = true;
+          handleEditorEscapeKey(event, request);
+        }
+      }
+    }
+  ) });
+}
 function SelectEditor(props) {
   const { request, style } = props;
   const options = request.config.options ?? [];
@@ -3443,7 +3946,7 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
 }
 
 // src/features/toolbar/style.css
-styleInject('.react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n  content: "\\2713";\n  margin-left: 12px;\n  font-size: 14px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n  color: #1677ff;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n');
+styleInject('.react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n  content: "\\2713";\n  margin-left: 12px;\n  font-size: 14px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n  color: #1677ff;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n');
 function ReactTableToolbar(props) {
   const { toolbar, title } = props;
   const [densityOpen, setDensityOpen] = useState(false);
@@ -3560,6 +4063,18 @@ function ReactTableToolbar(props) {
             children: [
               /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-setting-head", children: [
                 /* @__PURE__ */ jsx("strong", { children: "\u5217\u8BBE\u7F6E" }),
+                /* @__PURE__ */ jsx(
+                  ReactCheckbox,
+                  {
+                    checked: props.cacheColumnSettings === true,
+                    disabled: !props.columnSettingsCacheAvailable,
+                    title: props.columnSettingsCacheAvailable ? "\u7F13\u5B58\u5217\u5BBD\u3001\u663E\u9690\u3001\u56FA\u5B9A\u548C\u987A\u5E8F" : "\u914D\u7F6E storageKey \u540E\u53EF\u7F13\u5B58\u5217\u8BBE\u7F6E",
+                    onChange: (event) => props.onColumnSettingsCacheChange?.(
+                      event.target.checked
+                    ),
+                    children: "\u7F13\u5B58\u5230\u672C\u5730"
+                  }
+                ),
                 /* @__PURE__ */ jsx("span", { style: { marginLeft: "auto" }, children: config.columnSettingHeaderExtra }),
                 /* @__PURE__ */ jsx("button", { type: "button", onClick: props.onResetColumns, children: "\u91CD\u7F6E" })
               ] }),
@@ -3895,6 +4410,8 @@ function ReactListTableInner(props, ref) {
     stretchColumns,
     resizable,
     storageKey,
+    cacheColumnSettings,
+    cachePreferences,
     draggable,
     tableId,
     rowDrag,
@@ -3916,6 +4433,10 @@ function ReactListTableInner(props, ref) {
   );
   const [columnConfig, setColumnConfig] = useState(() => /* @__PURE__ */ new Map());
   const [columnConfigRevision, setColumnConfigRevision] = useState(0);
+  const [columnSettingsCacheOverride, setColumnSettingsCacheOverride] = useState(null);
+  const resolvedColumnSettingsCache = (columnSettingsCacheOverride?.storageKey === storageKey ? columnSettingsCacheOverride?.value : void 0) ?? cacheColumnSettings ?? true;
+  const [cachePreferencesOverride, setCachePreferencesOverride] = useState();
+  const resolvedCachePreferences = (cachePreferencesOverride?.storageKey === storageKey ? cachePreferencesOverride?.value : void 0) ?? cachePreferences;
   const [columnConfigResetRevision, setColumnConfigResetRevision] = useState(0);
   const resolvedColumns = useMemo(
     () => applyColumnManagerState(
@@ -3969,6 +4490,8 @@ function ReactListTableInner(props, ref) {
       stretchColumns,
       resizable,
       storageKey,
+      cacheColumnSettings: resolvedColumnSettingsCache,
+      cachePreferences: resolvedCachePreferences,
       draggable,
       tableId,
       rowDrag,
@@ -3986,7 +4509,13 @@ function ReactListTableInner(props, ref) {
       columnConfigResetRevision,
       ui: {
         ...nextOptions.ui,
-        onDensityChange: setDensityOverride
+        onDensityChange: setDensityOverride,
+        onColumnSettingsCacheChange: (value) => setColumnSettingsCacheOverride(
+          (current) => current?.storageKey === storageKey && current?.value === value ? current : { storageKey, value }
+        ),
+        onCachePreferencesChange: (next) => setCachePreferencesOverride(
+          (current) => current?.storageKey === storageKey && JSON.stringify(current?.value ?? {}) === JSON.stringify(next) ? current : { storageKey, value: next }
+        )
       }
     };
   }, [
@@ -4022,6 +4551,8 @@ function ReactListTableInner(props, ref) {
     stretchColumns,
     resizable,
     storageKey,
+    resolvedColumnSettingsCache,
+    resolvedCachePreferences,
     draggable,
     tableId,
     rowDrag,
@@ -4090,6 +4621,9 @@ function ReactListTableInner(props, ref) {
             {
               title,
               toolbar,
+              cacheColumnSettings: Boolean(storageKey) && resolvedColumnSettingsCache,
+              columnSettingsCacheAvailable: Boolean(storageKey),
+              onColumnSettingsCacheChange: (enabled) => tableRef.current?.setColumnSettingsCache(enabled),
               columns: resolvedColumns,
               density: resolvedRowHeight ?? 32,
               hostRef: shellRef,