@canvas-components/react-list-table 0.3.24 → 0.3.26

package/dist/index.js

@@ -4,6 +4,7 @@ import { ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactP
 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 { CanvasChart } from '@canvas-components/chart';
 import { formatDateTimeValue, isDateTimeFormatPattern } from '@canvas-components/utils/date';
 import { formatNumberValue, formatPercentValue, formatScientificValue, formatCustomNumberPattern } from '@canvas-components/utils/number';
 
@@ -30,7 +31,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles/table-overrides.css
-styleInject(".react-list-table-filter-option {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-filter-option:hover {\n  background: #f3f4f6;\n}\n.react-list-table-menu-action,\n.react-list-table-menu-row {\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-list-table-menu-action:hover,\n.react-list-table-menu-row:hover {\n  background: #f3f4f6 !important;\n}\n.react-list-table-custom-selection-copy {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-custom-selection-copy:hover {\n  background: #4096ff !important;\n}\n.react-list-table-custom-selection-input > .canvas-react-input-number-handler-down {\n  display: none;\n}\n.react-list-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-list-table-menu-action:hover .react-list-table-menu-chevron,\n.react-list-table-menu-row:hover .react-list-table-menu-chevron {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n.react-list-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
+styleInject(".react-list-table-filter-option {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-filter-option:hover {\n  background: #f3f4f6;\n}\n.react-list-table-menu-action,\n.react-list-table-menu-row {\n  font-size: 14px;\n  transition: background-color 0.2s ease, color 0.2s ease;\n}\n.react-list-table-menu-action:hover,\n.react-list-table-menu-row:hover {\n  background: #f3f4f6 !important;\n}\n.react-list-table-custom-selection-copy {\n  transition: background-color 0.2s ease;\n}\n.react-list-table-custom-selection-copy:hover {\n  background: #4096ff !important;\n}\n.react-list-table-custom-selection-input > .canvas-react-input-number-handler-down {\n  display: none;\n}\n.react-list-table-menu-chevron {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  margin-left: 8px;\n  border-top: 1.5px solid #9ca3af;\n  border-right: 1.5px solid #9ca3af;\n  transform: rotate(45deg);\n  transform-origin: center;\n  transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.react-list-table-menu-action:hover .react-list-table-menu-chevron,\n.react-list-table-menu-row:hover .react-list-table-menu-chevron {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n.react-list-table-menu-chevron-active {\n  border-color: #6b7280;\n  transform: rotate(135deg);\n}\n");
 var conditionalOperators = {
   eq: "\u7B49\u4E8E",
   neq: "\u4E0D\u7B49\u4E8E",
@@ -353,10 +354,325 @@ function buildCacheMenuItems(request) {
     });
   return items;
 }
+
+// src/features/context-menu/chart-options.ts
+var SELECTION_CHART_TYPES = [
+  { value: "line", label: "\u6298\u7EBF\u56FE" },
+  { value: "step-line", label: "\u9636\u68AF\u6298\u7EBF\u56FE" },
+  { value: "bump", label: "\u51F9\u51F8\u56FE\uFF08\u6392\u540D\uFF09" },
+  { value: "area", label: "\u9762\u79EF\u56FE" },
+  { value: "stacked-area", label: "\u5806\u79EF\u9762\u79EF\u56FE" },
+  { value: "bar", label: "\u67F1\u72B6\u56FE" },
+  { value: "stacked-bar", label: "\u5806\u79EF\u67F1\u72B6\u56FE" },
+  { value: "horizontal-bar", label: "\u6761\u5F62\u56FE" },
+  { value: "stacked-horizontal-bar", label: "\u5806\u79EF\u6761\u5F62\u56FE" },
+  { value: "mixed", label: "\u67F1\u7EBF\u6DF7\u5408\u56FE" },
+  { value: "pie", label: "\u997C\u56FE" },
+  { value: "donut", label: "\u73AF\u5F62\u56FE" },
+  { value: "rose", label: "\u73AB\u7470\u56FE" },
+  { value: "half-donut", label: "\u534A\u73AF\u5F62\u56FE" },
+  { value: "radar", label: "\u96F7\u8FBE\u56FE" },
+  { value: "gauge", label: "\u4EEA\u8868\u76D8" }
+];
+var COLORS = ["#1677ff", "#13c2c2", "#fa8c16", "#722ed1", "#eb2f96"];
+function createSelectionChartOption(data, chartType, seriesIndex = 0) {
+  const activeSeries = data.series[Math.min(seriesIndex, data.series.length - 1)];
+  if (["pie", "donut", "rose", "half-donut"].includes(chartType)) {
+    const option2 = {
+      color: COLORS,
+      legend: { show: true, orient: "vertical", left: "right", top: "middle" },
+      tooltip: { show: true },
+      series: {
+        type: "pie",
+        name: activeSeries.name,
+        data: data.labels.map((name, index) => ({
+          name,
+          value: Math.max(activeSeries.data[index] ?? 0, 0)
+        })),
+        radius: chartType === "pie" || chartType === "rose" ? "62%" : ["28%", "62%"],
+        center: ["39%", "50%"],
+        roseType: chartType === "rose" ? "radius" : void 0,
+        startAngle: chartType === "half-donut" ? 180 : void 0,
+        endAngle: chartType === "half-donut" ? 360 : void 0,
+        label: { show: true, position: "outside" },
+        labelLine: { show: true }
+      }
+    };
+    return { type: "pie", option: option2 };
+  }
+  if (chartType === "radar") {
+    const labels = data.labels.slice(0, 12);
+    const series = data.series.slice(0, 5);
+    const maximum = Math.max(
+      1,
+      ...series.flatMap((item) => item.data.slice(0, labels.length))
+    );
+    const option2 = {
+      color: COLORS,
+      radar: {
+        indicator: labels.map((name) => ({
+          name,
+          max: Math.ceil(maximum * 1.1)
+        })),
+        radius: "58%",
+        center: ["50%", "55%"],
+        splitNumber: 4
+      },
+      legend: { show: series.length > 1 },
+      tooltip: { show: true },
+      series: {
+        type: "radar",
+        data: series.map((item) => ({
+          name: item.name,
+          value: item.data.slice(0, labels.length),
+          areaStyle: { opacity: 0.12 }
+        }))
+      }
+    };
+    return { type: "radar", option: option2 };
+  }
+  if (chartType === "gauge") {
+    const value = activeSeries.data[0] ?? 0;
+    const option2 = {
+      color: COLORS,
+      tooltip: { show: true },
+      series: {
+        type: "gauge",
+        name: activeSeries.name,
+        data: [{ name: data.labels[0] ?? activeSeries.name, value }],
+        min: Math.min(0, value),
+        max: Math.max(100, Math.ceil(value * 1.2)),
+        radius: "68%",
+        progress: { show: true },
+        pointer: { show: true },
+        detail: { show: true }
+      }
+    };
+    return { type: "gauge", option: option2 };
+  }
+  const horizontal = chartType.includes("horizontal");
+  const stacked = chartType.startsWith("stacked");
+  const area = chartType.includes("area");
+  const bumpData = chartType === "bump" ? resolveBumpRanks(data) : null;
+  const option = {
+    grid: {
+      show: true,
+      left: 20,
+      right: 20,
+      top: 36,
+      bottom: 28,
+      containLabel: true
+    },
+    legend: { show: data.series.length > 1 },
+    xAxis: horizontal ? { show: true, type: "value" } : { show: true, type: "category", data: data.labels },
+    yAxis: horizontal ? { show: true, type: "category", data: data.labels } : {
+      show: true,
+      type: "value",
+      min: bumpData ? 1 : void 0,
+      max: bumpData ? data.series.length : void 0,
+      inverse: Boolean(bumpData),
+      splitNumber: bumpData ? Math.max(data.series.length - 1, 1) : void 0,
+      axisLabel: bumpData ? { formatter: (value) => `\u7B2C${value}\u540D` } : void 0,
+      splitLine: { show: true }
+    },
+    tooltip: { show: true, trigger: "axis" },
+    series: data.series.map((series, index) => {
+      const color = COLORS[index % COLORS.length];
+      const isBar = chartType === "mixed" ? index % 2 === 0 : chartType.includes("bar");
+      return isBar ? {
+        type: "bar",
+        name: series.name,
+        data: series.data,
+        stack: stacked ? "total" : void 0,
+        itemStyle: { color }
+      } : {
+        type: "line",
+        name: series.name,
+        data: bumpData?.[index] ?? series.data,
+        stack: stacked ? "total" : void 0,
+        lineStyle: { color, width: 2 },
+        step: chartType === "step-line" ? "end" : void 0,
+        showSymbol: chartType === "bump",
+        symbolSize: chartType === "bump" ? 7 : void 0,
+        areaStyle: area ? { color, opacity: stacked ? 0.35 : 0.16 } : void 0
+      };
+    })
+  };
+  return { type: "sparkline", option };
+}
+function resolveBumpRanks(data) {
+  const ranks = data.series.map(() => []);
+  data.labels.forEach((_, dataIndex) => {
+    const order = data.series.map((series, seriesIndex) => ({
+      seriesIndex,
+      value: series.data[dataIndex] ?? Number.NEGATIVE_INFINITY
+    })).sort(
+      (left, right) => right.value - left.value || left.seriesIndex - right.seriesIndex
+    );
+    order.forEach(({ seriesIndex }, rankIndex) => {
+      ranks[seriesIndex][dataIndex] = rankIndex + 1;
+    });
+  });
+  return ranks;
+}
+function ChartDialog(props) {
+  const [chartType, setChartType] = useState("line");
+  const [seriesIndex, setSeriesIndex] = useState(0);
+  const [ready, setReady] = useState(false);
+  const chartHostRef = useRef(null);
+  const chartRef = useRef(null);
+  const chartConfig = useMemo(() => {
+    if (!props.data) return null;
+    return createSelectionChartOption(props.data, chartType, seriesIndex);
+  }, [chartType, props.data, seriesIndex]);
+  useEffect(() => {
+    if (!ready || !chartConfig || !chartHostRef.current) return;
+    let chart = chartRef.current;
+    if (!chart) {
+      chart = new CanvasChart(chartHostRef.current, {
+        type: chartConfig.type,
+        option: chartConfig.option
+      });
+      chart.mount();
+      chartRef.current = chart;
+    } else {
+      chart.updateOptions({
+        type: chartConfig.type,
+        option: chartConfig.option
+      });
+    }
+  }, [chartConfig, ready]);
+  useEffect(
+    () => () => {
+      chartRef.current?.destroy();
+      chartRef.current = null;
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      open: true,
+      title: "\u521B\u5EFA\u56FE\u8868",
+      width: 760,
+      centered: true,
+      draggable: true,
+      resizable: true,
+      mask: false,
+      footer: false,
+      onCancel: props.onClose,
+      afterOpenChange: setReady,
+      bodyStyle: { padding: "12px 20px 20px", display: "flex" },
+      children: props.data ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            minHeight: 0,
+            gap: 12
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  whiteSpace: "nowrap"
+                },
+                children: [
+                  "\u56FE\u8868\u7C7B\u578B",
+                  /* @__PURE__ */ jsx(
+                    ReactSelect,
+                    {
+                      value: chartType,
+                      allowClear: false,
+                      options: SELECTION_CHART_TYPES,
+                      onChange: (value) => setChartType(value),
+                      style: { width: 180 }
+                    }
+                  )
+                ]
+              }
+            ),
+            props.data.series.length > 1 && [
+              "pie",
+              "donut",
+              "rose",
+              "half-donut",
+              "gauge"
+            ].includes(chartType) ? /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  whiteSpace: "nowrap"
+                },
+                children: [
+                  "\u6570\u636E\u7CFB\u5217",
+                  /* @__PURE__ */ jsx(
+                    ReactSelect,
+                    {
+                      value: seriesIndex,
+                      allowClear: false,
+                      options: props.data.series.map((series, index) => ({
+                        value: index,
+                        label: series.name
+                      })),
+                      onChange: (value) => setSeriesIndex(Number(value)),
+                      style: { width: 180 }
+                    }
+                  )
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: chartHostRef,
+                style: {
+                  width: "100%",
+                  height: 400,
+                  flex: "1 1 200px",
+                  minHeight: 160
+                }
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("div", { style: { padding: "24px 0" }, children: "\u5F53\u524D\u9009\u533A\u6CA1\u6709\u53EF\u7ED8\u5236\u7684\u6570\u503C\u6570\u636E\u3002" })
+    }
+  );
+}
+
+// src/features/density/density-options.ts
+var TABLE_DENSITY_OPTIONS = [
+  {
+    key: "density-comfortable",
+    label: "\u5BBD\u677E",
+    mode: "comfortable",
+    rowHeight: 56
+  },
+  { key: "density-middle", label: "\u4E2D\u7B49", mode: "middle", rowHeight: 48 },
+  { key: "density-compact", label: "\u7D27\u51D1", mode: "compact", rowHeight: 32 },
+  {
+    key: "density-ultra-compact",
+    label: "\u8D85\u7D27\u51D1",
+    mode: "ultra-compact",
+    rowHeight: 26
+  },
+  { key: "density-auto", label: "\u81EA\u9002\u5E94", mode: "auto", rowHeight: "auto" }
+];
 var CONTEXT_MENU_SURFACE_STYLE = {
   padding: 8,
   background: "#ffffff",
-  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)"
+  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.16)",
+  fontSize: 14
 };
 function ReactTableContextMenuView(props) {
   const { request } = props;
@@ -374,9 +690,25 @@ function ReactTableContextMenuView(props) {
   ) : null;
   const [moreFormatRequest, setMoreFormatRequest] = useState(null);
   const [customSelectionRequest, setCustomSelectionRequest] = useState(null);
+  const [chartRequest, setChartRequest] = useState(null);
+  const [columnEditor, setColumnEditor] = useState(null);
+  const columnDialogs = /* @__PURE__ */ jsx(Fragment, { children: columnEditor ? /* @__PURE__ */ jsx(
+    ColumnEditorDialog,
+    {
+      request: columnEditor.request,
+      item: columnEditor.item,
+      parentItem: columnEditor.parentItem,
+      onClose: () => {
+        setColumnEditor(null);
+        columnEditor.request.onClose();
+      }
+    },
+    columnEditor.item?.key ?? "new"
+  ) : null });
   if (!request) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       conditionalDialog,
+      columnDialogs,
       moreFormatRequest ? /* @__PURE__ */ jsx(
         MoreFormatDialog,
         {
@@ -393,6 +725,16 @@ function ReactTableContextMenuView(props) {
             customSelectionRequest.onClose();
           }
         }
+      ) : null,
+      chartRequest ? /* @__PURE__ */ jsx(
+        ChartDialog,
+        {
+          data: chartRequest.data,
+          onClose: () => {
+            chartRequest.request.onClose();
+            setChartRequest(null);
+          }
+        }
       ) : null
     ] });
   }
@@ -402,6 +744,7 @@ function ReactTableContextMenuView(props) {
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     conditionalDialog,
+    columnDialogs,
     /* @__PURE__ */ jsx(
       ReactPopup,
       {
@@ -411,7 +754,7 @@ function ReactTableContextMenuView(props) {
         minWidth: 260,
         onOpenChange: (open) => {
           setMenuOpen(open);
-          if (!open && !moreFormatRequest && !customSelectionRequest && !conditionalEditor) {
+          if (!open && !moreFormatRequest && !customSelectionRequest && !chartRequest && !conditionalEditor && !columnEditor) {
             request.onClose();
           }
         },
@@ -482,6 +825,16 @@ function ReactTableContextMenuView(props) {
             }
           ),
           /* @__PURE__ */ jsx(MenuAction, { label: "\u67E5\u627E", onClick: request.onOpenSearch }),
+          /* @__PURE__ */ jsx(
+            MenuAction,
+            {
+              label: "\u521B\u5EFA\u56FE\u8868",
+              onClick: request.onCreateChart ? () => {
+                setChartRequest({ request, data: request.onCreateChart?.() ?? null });
+                setMenuOpen(false);
+              } : void 0
+            }
+          ),
           /* @__PURE__ */ jsx(
             MenuSubmenu,
             {
@@ -571,6 +924,11 @@ function ReactTableContextMenuView(props) {
                   key: "auto-fit-all",
                   label: "\u5168\u90E8\u5217",
                   onClick: request.onAutoFitAllColumns
+                },
+                {
+                  key: "auto-fit-fill-container",
+                  label: "\u81EA\u52A8\u94FA\u6EE1\u5BB9\u5668",
+                  onClick: request.onAutoFitFillContainer
                 }
               ]
             }
@@ -770,13 +1128,29 @@ function ReactTableContextMenuView(props) {
               items: buildCacheMenuItems(request)
             }
           ),
-          request.columns?.length && request.onToggleColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          request.columns && request.onToggleColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(MenuDivider, {}),
             /* @__PURE__ */ jsx(
               ColumnVisibilityMenu,
               {
                 columns: request.columns,
-                onToggle: request.onToggleColumn
+                onToggle: request.onToggleColumn,
+                onAdd: () => {
+                  setColumnEditor({ request, item: null, parentItem: null });
+                  setMenuOpen(false);
+                },
+                onAddChild: (parentItem) => {
+                  setColumnEditor({ request, item: null, parentItem });
+                  setMenuOpen(false);
+                },
+                onEdit: (item) => {
+                  setColumnEditor({ request, item, parentItem: null });
+                  setMenuOpen(false);
+                },
+                onDelete: (item) => {
+                  request.onDeleteColumn?.(item.key);
+                  request.onClose();
+                }
               }
             )
           ] }) : null
@@ -802,6 +1176,16 @@ function ReactTableContextMenuView(props) {
           customSelectionRequest.onClose();
         }
       }
+    ) : null,
+    chartRequest ? /* @__PURE__ */ jsx(
+      ChartDialog,
+      {
+        data: chartRequest.data,
+        onClose: () => {
+          chartRequest.request.onClose();
+          setChartRequest(null);
+        }
+      }
     ) : null
   ] });
 }
@@ -1014,48 +1398,12 @@ function DensityMenu(props) {
     MenuSubmenu,
     {
       label: "\u8868\u683C\u5BC6\u5EA6",
-      items: [
-        {
-          key: "density-comfortable",
-          label: "\u5BBD\u677E",
-          selected: value === "comfortable",
-          onClick: () => {
-            onChange("comfortable");
-          }
-        },
-        {
-          key: "density-middle",
-          label: "\u4E2D\u7B49",
-          selected: value === "middle",
-          onClick: () => {
-            onChange("middle");
-          }
-        },
-        {
-          key: "density-compact",
-          label: "\u7D27\u51D1",
-          selected: value === "compact",
-          onClick: () => {
-            onChange("compact");
-          }
-        },
-        {
-          key: "density-ultra-compact",
-          label: "\u8D85\u7D27\u51D1",
-          selected: value === "ultra-compact",
-          onClick: () => {
-            onChange("ultra-compact");
-          }
-        },
-        {
-          key: "density-auto",
-          label: "\u81EA\u9002\u5E94",
-          selected: value === "auto",
-          onClick: () => {
-            onChange("auto");
-          }
-        }
-      ]
+      items: TABLE_DENSITY_OPTIONS.map((option) => ({
+        key: option.key,
+        label: option.label,
+        selected: value === option.mode,
+        onClick: () => onChange(option.mode)
+      }))
     }
   );
 }
@@ -1249,10 +1597,152 @@ function ZoomMenu(props) {
     }
   );
 }
+function ColumnEditorDialog(props) {
+  const { item, parentItem, request } = props;
+  const isUserColumn = item == null || item.userDefined === true;
+  const [draft, setDraft] = useState(() => ({
+    key: item?.key,
+    parentKey: parentItem?.key,
+    title: item?.title ?? "",
+    dataIndex: item?.dataIndex ?? "",
+    width: item?.width ?? 160,
+    minWidth: item?.minWidth ?? Math.min(40, item?.width ?? 160),
+    maxWidth: item?.maxWidth ?? Math.max(2e3, item?.width ?? 160),
+    fixed: item?.fixed,
+    order: item?.order ?? (parentItem?.children?.length ?? request.columns?.length ?? 0) + 1
+  }));
+  const [error, setError] = useState(null);
+  const update = (patch) => {
+    setDraft((current) => ({ ...current, ...patch }));
+    setError(null);
+  };
+  const fieldStyle = {
+    display: "grid",
+    gap: 6,
+    color: "#475569",
+    fontSize: 13
+  };
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      open: true,
+      title: item ? "\u7F16\u8F91\u5217" : parentItem ? "\u65B0\u589E\u5B50\u5217" : "\u65B0\u589E\u5217",
+      width: 440,
+      centered: true,
+      fullscreenable: false,
+      onCancel: props.onClose,
+      onOk: () => {
+        const nextError = request.onSaveColumn ? request.onSaveColumn(draft) : "\u65E0\u6CD5\u4FDD\u5B58\u5217\u914D\u7F6E";
+        if (nextError) {
+          setError(nextError);
+        } else {
+          props.onClose();
+        }
+      },
+      bodyStyle: { padding: "4px 20px 20px" },
+      children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 14 }, children: [
+        /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+          /* @__PURE__ */ jsx("span", { children: "\u5217\u540D\u79F0" }),
+          /* @__PURE__ */ jsx(
+            ReactInput,
+            {
+              autoFocus: true,
+              value: draft.title,
+              placeholder: "\u8BF7\u8F93\u5165\u5217\u540D\u79F0",
+              onChange: (event) => update({ title: event.target.value })
+            }
+          )
+        ] }),
+        isUserColumn ? /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+          /* @__PURE__ */ jsx("span", { children: "dataIndex\uFF08\u5FC5\u586B\uFF09" }),
+          /* @__PURE__ */ jsx(
+            ReactSelect,
+            {
+              value: draft.dataIndex ?? "",
+              placeholder: "\u8BF7\u9009\u62E9\u6570\u636E\u5B57\u6BB5",
+              showSearch: true,
+              allowClear: false,
+              options: (request.dataIndexOptions ?? []).map((option) => ({
+                label: option.disabled && option.label ? `${option.value}\uFF08${option.label}\uFF09` : option.value,
+                value: option.value,
+                disabled: option.disabled && option.value !== item?.dataIndex
+              })),
+              onChange: (value) => update({ dataIndex: value })
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+              gap: 10
+            },
+            children: [
+              ["\u9ED8\u8BA4\u5BBD\u5EA6", "width"],
+              ["\u6700\u5C0F\u5BBD\u5EA6", "minWidth"],
+              ["\u6700\u5927\u5BBD\u5EA6", "maxWidth"]
+            ].map(([label, key]) => /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                label,
+                "\uFF08px\uFF09"
+              ] }),
+              /* @__PURE__ */ jsx(
+                ReactInputNumber,
+                {
+                  value: draft[key],
+                  min: 1,
+                  precision: 0,
+                  onChange: (value) => update({ [key]: value ?? void 0 }),
+                  style: { width: "100%" }
+                }
+              )
+            ] }, key))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: fieldStyle, children: [
+          /* @__PURE__ */ jsx("span", { children: "\u5217\u987A\u5E8F\uFF08\u540C\u7EA7\uFF0C\u4ECE 1 \u5F00\u59CB\uFF09" }),
+          /* @__PURE__ */ jsx(
+            ReactInputNumber,
+            {
+              value: draft.order,
+              min: 1,
+              max: item?.siblingCount ?? (parentItem?.children?.length ?? request.columns?.length ?? 0) + 1,
+              precision: 0,
+              onChange: (value) => update({ order: value ?? void 0 }),
+              style: { width: "100%" }
+            }
+          )
+        ] }),
+        isUserColumn ? /* @__PURE__ */ jsxs("label", { style: fieldStyle, children: [
+          /* @__PURE__ */ jsx("span", { children: "\u56FA\u5B9A\u4F4D\u7F6E" }),
+          /* @__PURE__ */ jsx(
+            ReactSelect,
+            {
+              value: draft.fixed ?? "none",
+              allowClear: false,
+              options: [
+                { label: "\u4E0D\u56FA\u5B9A", value: "none" },
+                { label: "\u56FA\u5B9A\u5DE6\u4FA7", value: "left" },
+                { label: "\u56FA\u5B9A\u53F3\u4FA7", value: "right" }
+              ],
+              onChange: (value) => update({
+                fixed: value === "none" ? void 0 : value
+              })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx("div", { style: { color: "#64748b", fontSize: 12 }, children: "\u4EE3\u7801\u4F20\u5165\u7684\u5217\u4E0D\u53EF\u4FEE\u6539 dataIndex\u3001\u56FA\u5B9A\u4F4D\u7F6E\u6216\u5220\u9664\u3002" }),
+        error ? /* @__PURE__ */ jsx("div", { role: "alert", style: { color: "#dc2626", fontSize: 12 }, children: error }) : null
+      ] })
+    }
+  );
+}
 function ColumnVisibilityMenu(props) {
-  const { columns, onToggle } = props;
+  const { columns, onToggle, onAdd, onAddChild, onEdit, onDelete } = props;
   const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
+  const [deleteConfirmKey, setDeleteConfirmKey] = useState(null);
   const closeTimerRef = useRef(null);
   const clearCloseTimer = () => {
     if (closeTimerRef.current != null) {
@@ -1261,6 +1751,7 @@ function ColumnVisibilityMenu(props) {
     }
   };
   const scheduleClose = () => {
+    if (deleteConfirmKey) return;
     clearCloseTimer();
     closeTimerRef.current = window.setTimeout(() => {
       setOpen(false);
@@ -1318,7 +1809,7 @@ function ColumnVisibilityMenu(props) {
             anchorRef: triggerRef,
             placement: "rightTop",
             offset: 2,
-            minWidth: 220,
+            minWidth: 300,
             onOpenChange: setOpen,
             surfaceClassName: "canvas-react-scrollbar",
             surfaceStyle: {
@@ -1326,7 +1817,7 @@ function ColumnVisibilityMenu(props) {
               maxHeight: 360,
               overflow: "auto"
             },
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsxs(
               "div",
               {
                 onMouseEnter: () => {
@@ -1335,14 +1826,35 @@ function ColumnVisibilityMenu(props) {
                 onMouseLeave: () => {
                   scheduleClose();
                 },
-                children: columns.map((column) => /* @__PURE__ */ jsx(
-                  ColumnVisibilityItem,
-                  {
-                    item: column,
-                    onToggle
-                  },
-                  column.key
-                ))
+                children: [
+                  /* @__PURE__ */ jsx("div", { style: { padding: "4px 10px" }, children: /* @__PURE__ */ jsx(
+                    ReactButton,
+                    {
+                      type: "default",
+                      size: "small",
+                      onClick: onAdd,
+                      style: { height: 32, width: "100%", padding: "0 8px" },
+                      children: "\u65B0\u589E\u5217"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid #e5e7eb", margin: "4px 0" } }),
+                  columns.map((column) => /* @__PURE__ */ jsx(
+                    ColumnVisibilityItem,
+                    {
+                      item: column,
+                      onToggle,
+                      onAddChild,
+                      onEdit,
+                      onDelete,
+                      deleteConfirmKey,
+                      onDeleteConfirmOpenChange: (key) => {
+                        setDeleteConfirmKey(key);
+                        if (!key) setOpen(false);
+                      }
+                    },
+                    column.key
+                  ))
+                ]
               }
             )
           }
@@ -1352,7 +1864,15 @@ function ColumnVisibilityMenu(props) {
   );
 }
 function ColumnVisibilityItem(props) {
-  const { item, onToggle } = props;
+  const {
+    item,
+    onToggle,
+    onAddChild,
+    onEdit,
+    onDelete,
+    deleteConfirmKey,
+    onDeleteConfirmOpenChange
+  } = props;
   const triggerRef = useRef(null);
   const [open, setOpen] = useState(false);
   const closeTimerRef = useRef(null);
@@ -1364,6 +1884,7 @@ function ColumnVisibilityItem(props) {
     }
   };
   const scheduleClose = () => {
+    if (deleteConfirmKey) return;
     clearCloseTimer();
     closeTimerRef.current = window.setTimeout(() => {
       setOpen(false);
@@ -1398,7 +1919,7 @@ function ColumnVisibilityItem(props) {
         fontSize: 14
       },
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { style: { flex: "1 1 auto", minWidth: 0 }, children: /* @__PURE__ */ jsxs(
           ReactCheckbox,
           {
             checked: item.checked,
@@ -1407,16 +1928,67 @@ function ColumnVisibilityItem(props) {
             onChange: (event) => {
               onToggle(item.key, !!event.target.checked);
             },
-            children: item.title
+            children: [
+              item.title,
+              item.dataIndex ? `\uFF08${item.dataIndex}\uFF09` : ""
+            ]
           }
-        ),
-        hasChildren ? /* @__PURE__ */ jsx(
-          "span",
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            className: `react-list-table-menu-chevron${open ? " react-list-table-menu-chevron-active" : ""}`,
-            "aria-hidden": "true"
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              flex: "none",
+              marginLeft: "auto"
+            },
+            children: [
+              item.userDefined ? /* @__PURE__ */ jsx(
+                ReactPopconfirm,
+                {
+                  title: `\u786E\u5B9A\u5220\u9664\u5217\u201C${item.title}\u201D\u5417\uFF1F`,
+                  placement: "rightTop",
+                  okText: "\u5220\u9664",
+                  open: deleteConfirmKey === item.key,
+                  onOpenChange: (nextOpen) => onDeleteConfirmOpenChange(nextOpen ? item.key : null),
+                  onConfirm: () => onDelete(item),
+                  children: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: "#",
+                      title: "\u5220\u9664\u5217",
+                      onClick: (event) => event.preventDefault(),
+                      style: { color: "#ff4d4f", fontSize: 12, textDecoration: "none" },
+                      children: "\u5220\u9664"
+                    }
+                  )
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "#",
+                  title: "\u7F16\u8F91\u5217",
+                  onClick: (event) => {
+                    event.preventDefault();
+                    onEdit(item);
+                  },
+                  style: { color: "#1677ff", fontSize: 12, textDecoration: "none" },
+                  children: "\u7F16\u8F91"
+                }
+              ),
+              hasChildren ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `react-list-table-menu-chevron${open ? " react-list-table-menu-chevron-active" : ""}`,
+                  "aria-hidden": "true"
+                }
+              ) : null
+            ]
           }
-        ) : null,
+        ),
         hasChildren ? /* @__PURE__ */ jsx(
           ReactPopup,
           {
@@ -1425,7 +1997,7 @@ function ColumnVisibilityItem(props) {
             anchorRef: triggerRef,
             placement: "rightTop",
             offset: 2,
-            minWidth: 220,
+            minWidth: 300,
             onOpenChange: setOpen,
             surfaceClassName: "canvas-react-scrollbar",
             surfaceStyle: {
@@ -1433,7 +2005,7 @@ function ColumnVisibilityItem(props) {
               maxHeight: 320,
               overflow: "auto"
             },
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsxs(
               "div",
               {
                 onMouseEnter: () => {
@@ -1442,14 +2014,32 @@ function ColumnVisibilityItem(props) {
                 onMouseLeave: () => {
                   scheduleClose();
                 },
-                children: item.children.map((child) => /* @__PURE__ */ jsx(
-                  ColumnVisibilityItem,
-                  {
-                    item: child,
-                    onToggle
-                  },
-                  child.key
-                ))
+                children: [
+                  /* @__PURE__ */ jsx("div", { style: { padding: "4px 10px" }, children: /* @__PURE__ */ jsx(
+                    ReactButton,
+                    {
+                      type: "default",
+                      size: "small",
+                      onClick: () => onAddChild(item),
+                      style: { height: 32, width: "100%", padding: "0 8px" },
+                      children: "\u65B0\u589E\u5B50\u5217"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid #e5e7eb", margin: "4px 0" } }),
+                  item.children.map((child) => /* @__PURE__ */ jsx(
+                    ColumnVisibilityItem,
+                    {
+                      item: child,
+                      onToggle,
+                      onAddChild,
+                      onEdit,
+                      onDelete,
+                      deleteConfirmKey,
+                      onDeleteConfirmOpenChange
+                    },
+                    child.key
+                  ))
+                ]
               }
             )
           }
@@ -2583,16 +3173,22 @@ var SEARCH_MODAL_BODY_STYLE = {
 function ReactListTableSearchDialog(props) {
   const { request } = props;
   const [keyword, setKeyword] = useState(request.keyword);
+  const [mode, setMode] = useState(request.mode);
+  const [caseSensitive, setCaseSensitive] = useState(request.caseSensitive);
   useEffect(() => {
     setKeyword(request.keyword);
-  }, [request.keyword]);
-  const matchText = request.matchCount > 0 ? `${request.currentIndex + 1} / ${request.matchCount}` : "\u672A\u627E\u5230";
-  return /* @__PURE__ */ jsx(
+    setMode(request.mode);
+    setCaseSensitive(request.caseSensitive);
+  }, [request.keyword, request.mode, request.caseSensitive]);
+  const isDirty = keyword !== request.keyword || mode !== request.mode || caseSensitive !== request.caseSensitive;
+  const submit = () => request.onSubmit(keyword, { mode, caseSensitive });
+  const matchText = request.error ? "\u8868\u8FBE\u5F0F\u65E0\u6548" : request.matchCount > 0 ? `${request.currentIndex + 1} / ${request.matchCount}` : "\u672A\u627E\u5230";
+  return /* @__PURE__ */ jsxs(
     ReactModal,
     {
       open: true,
       title: "\u67E5\u627E",
-      width: 360,
+      width: 420,
       mask: false,
       centered: false,
       draggable: true,
@@ -2601,58 +3197,97 @@ function ReactListTableSearchDialog(props) {
       onCancel: request.onClose,
       bodyStyle: SEARCH_MODAL_BODY_STYLE,
       style: { marginTop: 96 },
-      children: /* @__PURE__ */ jsxs("div", { style: searchContentStyle, children: [
-        /* @__PURE__ */ jsx(
-          ReactInput,
-          {
-            autoFocus: true,
-            value: keyword,
-            placeholder: "\u67E5\u627E\u5185\u5BB9",
-            onChange: (event) => {
-              const value = event.target.value;
-              setKeyword(value);
-            },
-            onPressEnter: () => {
-              request.onSubmit(keyword);
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: searchContentStyle, children: [
+          /* @__PURE__ */ jsx(
+            ReactInput,
+            {
+              autoFocus: true,
+              value: keyword,
+              placeholder: "\u67E5\u627E\u5185\u5BB9",
+              style: { flex: "1 1 0", minWidth: 0 },
+              onChange: (event) => {
+                const value = event.target.value;
+                setKeyword(value);
+              },
+              onPressEnter: submit
             }
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: matchTextStyle, children: matchText }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            title: "\u4E0A\u4E00\u4E2A",
-            onClick: () => {
-              if (keyword !== request.keyword) {
-                request.onSubmit(keyword);
-              } else {
-                request.onNavigate("previous");
-              }
-            },
-            disabled: request.matchCount === 0 && keyword === request.keyword,
-            style: toolButtonStyle,
-            children: "\u2039"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            title: "\u4E0B\u4E00\u4E2A",
-            onClick: () => {
-              if (keyword !== request.keyword) {
-                request.onSubmit(keyword);
-              } else {
-                request.onNavigate("next");
+          ),
+          /* @__PURE__ */ jsx("span", { style: matchTextStyle, children: matchText }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: "\u4E0A\u4E00\u4E2A",
+              onClick: () => {
+                if (isDirty) {
+                  submit();
+                } else {
+                  request.onNavigate("previous");
+                }
+              },
+              disabled: request.matchCount === 0 && !isDirty,
+              style: toolButtonStyle,
+              children: "\u2039"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              title: "\u4E0B\u4E00\u4E2A",
+              onClick: () => {
+                if (isDirty) {
+                  submit();
+                } else {
+                  request.onNavigate("next");
+                }
+              },
+              disabled: request.matchCount === 0 && !isDirty,
+              style: toolButtonStyle,
+              children: "\u203A"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: searchOptionsStyle, children: [
+          /* @__PURE__ */ jsx(
+            ReactSelect,
+            {
+              value: mode,
+              allowClear: false,
+              options: [
+                { label: "\u6A21\u7CCA\u5339\u914D", value: "fuzzy" },
+                { label: "\u7CBE\u786E\u5339\u914D", value: "exact" },
+                { label: "\u901A\u914D\u7B26 (* ?)", value: "wildcard" },
+                { label: "\u6B63\u5219\u5339\u914D", value: "regex" }
+              ],
+              style: { width: 150 },
+              onChange: (value) => {
+                const nextMode = value;
+                setMode(nextMode);
+                request.onSubmit(keyword, { mode: nextMode, caseSensitive });
               }
-            },
-            disabled: request.matchCount === 0 && keyword === request.keyword,
-            style: toolButtonStyle,
-            children: "\u203A"
-          }
-        )
-      ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ReactCheckbox,
+            {
+              checked: caseSensitive,
+              style: { whiteSpace: "nowrap", flex: "none" },
+              onChange: (event) => {
+                const nextCaseSensitive = event.target.checked;
+                setCaseSensitive(nextCaseSensitive);
+                request.onSubmit(keyword, {
+                  mode,
+                  caseSensitive: nextCaseSensitive
+                });
+              },
+              children: "\u533A\u5206\u5927\u5C0F\u5199"
+            }
+          )
+        ] }),
+        request.error ? /* @__PURE__ */ jsx("div", { style: searchErrorStyle, children: request.error }) : null
+      ]
     }
   );
 }
@@ -2661,6 +3296,18 @@ var searchContentStyle = {
   alignItems: "center",
   gap: 8
 };
+var searchOptionsStyle = {
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "nowrap",
+  gap: 12,
+  marginTop: 10
+};
+var searchErrorStyle = {
+  color: "#dc2626",
+  fontSize: 12,
+  marginTop: 6
+};
 var matchTextStyle = {
   minWidth: 58,
   color: "#64748b",
@@ -2668,8 +3315,10 @@ var matchTextStyle = {
   whiteSpace: "nowrap"
 };
 var toolButtonStyle = {
-  width: 28,
-  height: 28,
+  width: 32,
+  minWidth: 32,
+  flex: "0 0 32px",
+  height: 32,
   padding: 0,
   border: "1px solid #d1d5db",
   borderRadius: 4,
@@ -4060,7 +4709,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  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');
+styleInject(".react-list-table-shell {\n  background: #fff;\n  font-size: 14px;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: #374151;\n  font-size: 14px;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu {\n  width: max-content;\n  min-width: 0;\n  padding: 8px;\n  border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n  width: 16px;\n  flex: 0 0 16px;\n  margin-right: 6px;\n  text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n  background: #f3f4f6;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-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);
@@ -4146,18 +4795,28 @@ function ReactTableToolbar(props) {
             children: /* @__PURE__ */ jsx(ColumnHeightOutlined, {})
           }
         ),
-        densityOpen ? /* @__PURE__ */ jsx("div", { className: "react-list-table-tool-menu", children: [56, 48, 32, 26].map((height) => /* @__PURE__ */ jsx(
+        densityOpen ? /* @__PURE__ */ jsx("div", { className: "react-list-table-tool-menu", children: TABLE_DENSITY_OPTIONS.map((option) => /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            className: props.density === height ? "active" : "",
+            className: props.density === option.rowHeight ? "active" : "",
             onClick: () => {
-              props.onDensityChange(height);
+              props.onDensityChange(option.rowHeight);
               setDensityOpen(false);
             },
-            children: height === 56 ? "\u5BBD\u677E" : height === 48 ? "\u4E2D\u7B49" : height === 32 ? "\u7D27\u51D1" : "\u8D85\u7D27\u51D1"
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "react-list-table-tool-menu-check",
+                  "aria-hidden": "true",
+                  children: props.density === option.rowHeight ? "\u2713" : ""
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: option.label })
+            ]
           },
-          height
+          option.key
         )) }) : null
       ] }) : null,
       config.showColumnSetting !== false ? /* @__PURE__ */ jsxs("div", { className: "react-list-table-tool-wrap", children: [