@pisell/materials 6.11.10 → 6.11.11

package/lib/components/pisellRecordBoard/PisellRecordBoard.stories.js

@@ -36,10 +36,12 @@ __export(PisellRecordBoard_stories_exports, {
   GridLayoutFull: () => GridLayoutFull,
   GridLayoutToolBarSearchInput: () => GridLayoutToolBarSearchInput,
   GridLayoutToolBarSortAndFilter: () => GridLayoutToolBarSortAndFilter,
+  GridLayoutWithCollapseUniformColumns: () => GridLayoutWithCollapseUniformColumns,
   GridLayoutWithColumnType: () => GridLayoutWithColumnType,
   GridLayoutWithPisellFindInToolBar: () => GridLayoutWithPisellFindInToolBar,
   GridLayoutWithQuickFilterOnLeft: () => GridLayoutWithQuickFilterOnLeft,
   GridLayoutWithTable: () => GridLayoutWithTable,
+  GridLayoutWithUniformCompare: () => GridLayoutWithUniformCompare,
   GridWithMultiplePages: () => GridWithMultiplePages,
   GridWithOnRow: () => GridWithOnRow,
   Placeholder: () => Placeholder,
@@ -542,6 +544,161 @@ var GridWithMultiplePages = {
     ));
   }
 };
+var GridLayoutWithCollapseUniformColumns = {
+  parameters: {
+    docs: {
+      description: {
+        story: "grid.collapseUniformColumns: true 时，当前页某列全部同值或全部为空则隐藏该列，在表格上方显示总结区。本示例数据当前页「支付状态」均为已支付、「备注」均为空，故两列折叠并出现在总结区。"
+      }
+    }
+  },
+  render: function GridLayoutWithCollapseUniformColumnsRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const uniformData = (0, import_react.useMemo)(
+      () => Array.from({ length: 8 }, (_, i) => ({
+        id: `u-${i + 1}`,
+        orderNo: `U${String(10001 + i).padStart(6, "0")}`,
+        payStatus: "paid",
+        amount: 100 + i * 10,
+        note: ""
+      })),
+      []
+    );
+    const total = uniformData.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return uniformData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, uniformData]);
+    const columnsUniform = [
+      { title: "订单号", dataIndex: "orderNo", key: "orderNo", width: 140 },
+      { title: "支付状态", dataIndex: "payStatus", key: "payStatus", width: 120 },
+      { title: "订单金额", dataIndex: "amount", key: "amount", width: 120 },
+      { title: "备注", dataIndex: "note", key: "note", width: 160 }
+    ];
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: {},
+        onSearch: () => {
+        },
+        onReset: () => {
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsUniform,
+          scroll: { x: 600 },
+          collapseUniformColumns: true,
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
+var GridLayoutWithUniformCompare = {
+  parameters: {
+    docs: {
+      description: {
+        story: "列「支付分类」的 dataIndex 取值为对象 { id, name }。通过 uniformCompare(value, record) 返回 String(value.id) 参与比较，当前页全部为同一 id 时该列折叠，总结区优先用列 render 展示（如「已支付」）。"
+      }
+    }
+  },
+  render: function GridLayoutWithUniformCompareRender() {
+    const [pageNumber, setPageNumber] = (0, import_react.useState)(1);
+    const [pageSize, setPageSize] = (0, import_react.useState)(10);
+    const [selectedKeys, setSelectedKeys] = (0, import_react.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, import_react.useState)([]);
+    const uniformCompareData = (0, import_react.useMemo)(
+      () => Array.from({ length: 6 }, (_, i) => ({
+        id: `uc-${i + 1}`,
+        orderNo: `UC${String(20001 + i).padStart(6, "0")}`,
+        payCategory: { id: 1, name: "已支付" },
+        amount: 50 + i * 5
+      })),
+      []
+    );
+    const total = uniformCompareData.length;
+    const data = (0, import_react.useMemo)(() => {
+      const start = (pageNumber - 1) * pageSize;
+      return uniformCompareData.slice(start, start + pageSize);
+    }, [pageNumber, pageSize, uniformCompareData]);
+    const columnsWithUniformCompare = [
+      { title: "订单号", dataIndex: "orderNo", key: "orderNo", width: 140 },
+      {
+        title: "支付分类",
+        dataIndex: "payCategory",
+        key: "payCategory",
+        width: 120,
+        uniformCompare: (value2) => value2 != null && typeof value2 === "object" && "id" in value2 && value2.id != null ? String(value2.id) : void 0,
+        render: (value2) => (value2 == null ? void 0 : value2.name) != null ? value2.name : "-"
+      },
+      { title: "订单金额", dataIndex: "amount", key: "amount", width: 120 }
+    ];
+    const value = (0, import_react.useMemo)(
+      () => ({
+        data,
+        loading: false,
+        total,
+        pagination: { pageNumber, pageSize },
+        onPageChange: (num, size) => {
+          setPageNumber(num);
+          setPageSize(size);
+        },
+        searchParams: {},
+        onSearch: () => {
+        },
+        onReset: () => {
+        },
+        layoutType: "grid",
+        rowKey: "id"
+      }),
+      [data, total, pageNumber, pageSize]
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, background: "#f5f5f5", minHeight: 400 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        rowKey: "id",
+        ...value,
+        grid: {
+          columns: columnsWithUniformCompare,
+          scroll: { x: 450 },
+          collapseUniformColumns: true,
+          selectedKeys,
+          selectedRows,
+          onSelectionChange: (keys, rows) => {
+            setSelectedKeys(keys);
+            setSelectedRows(rows);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_index.default.ShellFrame, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.GridLayout, null))
+    ));
+  }
+};
 var GridWithOnRow = {
   parameters: {
     docs: {
@@ -1502,10 +1659,12 @@ var SearchAndGridOnly = {
   GridLayoutFull,
   GridLayoutToolBarSearchInput,
   GridLayoutToolBarSortAndFilter,
+  GridLayoutWithCollapseUniformColumns,
   GridLayoutWithColumnType,
   GridLayoutWithPisellFindInToolBar,
   GridLayoutWithQuickFilterOnLeft,
   GridLayoutWithTable,
+  GridLayoutWithUniformCompare,
   GridWithMultiplePages,
   GridWithOnRow,
   Placeholder,

package/lib/components/pisellRecordBoard/context/RecordBoardContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RecordBoardContextValue } from '../types';
+export declare const RecordBoardContext: import("react").Context<RecordBoardContextValue | null>;

package/lib/components/pisellRecordBoard/context/RecordBoardProvider.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import type { RecordBoardContextValue } from '../types';
+export interface RecordBoardProviderProps {
+    value: RecordBoardContextValue;
+    children: ReactNode;
+}
+/**
+ * 仅负责注入 RecordBoard 上下文。
+ * 实际的数据源、onSearch/onPageChange 由上层（如接 DataSourceContainer 或独立 fetch）提供。
+ */
+export declare const RecordBoardProvider: React.FC<RecordBoardProviderProps>;

package/lib/components/pisellRecordBoard/hooks/useRecordBoardContext.d.ts

@@ -0,0 +1,16 @@
+import type { RecordBoardContextValue, RecordBoardChildComponentProps, RecordBoardGridProps } from '../types';
+export interface UseRecordBoardContextOptions {
+    /** 子组件 displayName，用于从 childComponentProps 中取对应 props */
+    displayName?: keyof RecordBoardChildComponentProps;
+    /** 上层传入的 childComponentProps（若 Context 未提供则从参数传入） */
+    childComponentProps?: RecordBoardChildComponentProps;
+}
+/**
+ * 消费 RecordBoard 上下文，供各 layout 内子组件（Search / ToolBar / Grid / CardList / Pagination）使用。
+ * 若传入 displayName，返回会合并 childComponentProps[displayName] 便于透传。
+ * 当 displayName 为 'grid' 时，返回类型包含 RecordBoardGridProps（columns、scroll、size）。
+ */
+export declare function useRecordBoardContext(options: UseRecordBoardContextOptions & {
+    displayName: 'grid';
+}): RecordBoardContextValue & RecordBoardGridProps;
+export declare function useRecordBoardContext(options?: UseRecordBoardContextOptions): RecordBoardContextValue;

package/lib/components/pisellRecordBoard/layouts/CardLayout/CardList.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { RecordBoardContextValue } from '../../types';
+export interface RecordBoardCardListProps extends Partial<Pick<RecordBoardContextValue, 'data' | 'loading'>> {
+    className?: string;
+    style?: React.CSSProperties;
+    render?: (ctx: RecordBoardContextValue) => React.ReactNode;
+}
+/**
+ * Card 布局下的数据视图：从 context 取 data / loading。
+ */
+declare const RecordBoardCardList: React.FC<RecordBoardCardListProps>;
+export default RecordBoardCardList;

package/lib/components/pisellRecordBoard/layouts/CardLayout/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import RecordBoardCardList from './CardList';
+/**
+ * Card 布局：仅内容区 = 卡片列表（不含分页）。
+ * 工具栏、多选操作栏、分页由 Shell Frame 提供，使用时用 ShellFrame 包裹：
+ * <PisellRecordBoard.ShellFrame><PisellRecordBoard.CardLayout /></PisellRecordBoard.ShellFrame>
+ */
+declare const CardLayout: React.FC<{
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+export default CardLayout;
+export { RecordBoardCardList as CardLayoutCardList };

package/lib/components/pisellRecordBoard/layouts/GridLayout/Grid.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
 var import_recordBoardColumns = require("../../utils/recordBoardColumns");
+var import_locales = require("../../../../locales");
 var import_Grid = require("./Grid.less");
 function getRowKey(record, rowKey) {
   if (typeof rowKey === "function") {
@@ -68,7 +69,10 @@ var CONTEXT_ONLY_KEYS = [
   "size",
   "defaultHiddenColumnKeys",
   "scrollAreaHeight",
-  "setScrollAreaHeight"
+  "setScrollAreaHeight",
+  "collapseUniformColumns",
+  "columnOrder",
+  "onColumnOrderChange"
 ];
 var RecordBoardGridView = (props) => {
   const ctx = (0, import_useRecordBoardContext.useRecordBoardContext)({ displayName: "grid" });
@@ -81,13 +85,60 @@ var RecordBoardGridView = (props) => {
   } = props;
   const rawColumns = columnsProp ?? ctx.columns ?? [];
   const columnVisibility = ctx.columnVisibility;
-  const columns = (0, import_react.useMemo)(() => {
-    const list = rawColumns;
-    const visible = columnVisibility == null ? list : list.filter(
+  const columnOrder = ctx.columnOrder;
+  const collapseUniformColumns = ctx.collapseUniformColumns !== false;
+  const summaryRef = (0, import_react.useRef)(null);
+  const [uniformSummaryHeight, setUniformSummaryHeight] = (0, import_react.useState)(0);
+  const {
+    columns,
+    uniformSummaryItems: summaryItems,
+    processedColumnsForSummary
+  } = (0, import_react.useMemo)(() => {
+    let list = rawColumns;
+    if (Array.isArray(columnOrder) && columnOrder.length > 0) {
+      const keyToCol = new Map(
+        list.map((c) => [(0, import_recordBoardColumns.getRecordBoardColumnKey)(c), c])
+      );
+      const ordered = [];
+      for (const key of columnOrder) {
+        const col = keyToCol.get(key);
+        if (col) ordered.push(col);
+      }
+      list.forEach((col) => {
+        const key = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
+        if (!columnOrder.includes(key)) ordered.push(col);
+      });
+      list = ordered;
+    }
+    const visibleByUser = columnVisibility == null ? list : list.filter(
       (col) => columnVisibility[(0, import_recordBoardColumns.getRecordBoardColumnKey)(col)] !== false
     );
-    return (0, import_recordBoardColumns.processColumnsForGrid)(visible);
-  }, [rawColumns, columnVisibility]);
+    const data = ctx.data ?? [];
+    const shouldCollapseUniform = collapseUniformColumns && data.length > 5;
+    if (!shouldCollapseUniform) {
+      return {
+        columns: (0, import_recordBoardColumns.processColumnsForGrid)(visibleByUser),
+        uniformSummaryItems: [],
+        processedColumnsForSummary: void 0
+      };
+    }
+    const processedAllVisible = (0, import_recordBoardColumns.processColumnsForGrid)(visibleByUser);
+    const { uniformHiddenColumnKeys, summaryItems: items } = (0, import_recordBoardColumns.computeUniformColumnSummary)(data, visibleByUser);
+    const columnsForTable = processedAllVisible.filter(
+      (col) => !uniformHiddenColumnKeys.includes((0, import_recordBoardColumns.getRecordBoardColumnKey)(col))
+    );
+    return {
+      columns: columnsForTable,
+      uniformSummaryItems: items,
+      processedColumnsForSummary: items.length > 0 ? processedAllVisible : void 0
+    };
+  }, [
+    rawColumns,
+    columnVisibility,
+    columnOrder,
+    collapseUniformColumns,
+    ctx.data
+  ]);
   const tableRowKey = (0, import_react.useMemo)(() => {
     const key = ctx.rowKey ?? rowKeyProp ?? "id";
     return typeof key === "function" ? key : (record) => getRowKey(record, typeof key === "string" ? key : String(key));
@@ -107,6 +158,23 @@ var RecordBoardGridView = (props) => {
       }
     };
   }, [ctx.selectedKeys, ctx.onSelectionChange, rowSelectionConfig]);
+  (0, import_react.useEffect)(() => {
+    if (summaryItems.length === 0) {
+      setUniformSummaryHeight(0);
+      return;
+    }
+    const el = summaryRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setUniformSummaryHeight(entry.contentRect.height);
+    });
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      setUniformSummaryHeight(0);
+    };
+  }, [summaryItems.length]);
   const gridTableProps = (0, import_react.useMemo)(() => {
     const picked = {};
     Object.keys(ctx).forEach((k) => {
@@ -134,9 +202,11 @@ var RecordBoardGridView = (props) => {
     const scrollX = isEmpty && scroll && typeof scroll.x !== "number" ? sumColumnWidths : scroll == null ? void 0 : scroll.x;
     if ((scroll == null ? void 0 : scroll.autoCalc) && typeof ctx.scrollAreaHeight === "number") {
       const wrapHeight = ctx.scrollAreaHeight;
+      const reservedHeight = 40 + uniformSummaryHeight;
+      console.log(wrapHeight, reservedHeight);
       return {
         x: scrollX ?? sumColumnWidths,
-        y: Math.max(wrapHeight - 40, 100),
+        y: Math.max(wrapHeight - reservedHeight, 100),
         scrollToFirstRowOnChange: scroll.scrollToFirstRowOnChange
       };
     }
@@ -159,9 +229,25 @@ var RecordBoardGridView = (props) => {
     ctx.pagination,
     columns,
     sumColumnWidths,
-    isEmpty
+    isEmpty,
+    uniformSummaryHeight
   ]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { "data-layout-slot": "grid", className: "pisell-lowcode-record-board-grid" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { "data-layout-slot": "grid", className: "pisell-lowcode-record-board-grid" }, summaryItems.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { ref: summaryRef, className: "pisell-record-board-uniform-summary" }, summaryItems.map((item) => {
+    const processedCol = processedColumnsForSummary == null ? void 0 : processedColumnsForSummary.find(
+      (c) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(c) === item.columnKey
+    );
+    const useRender = typeof (processedCol == null ? void 0 : processedCol.render) === "function";
+    const content = useRender ? processedCol.render(item.cellValue, item.record ?? {}, 0) : item.type === "empty" ? (0, import_locales.getText)("record-board-uniform-summary-empty") : item.displayValue ?? (0, import_locales.getText)("record-board-uniform-summary-same");
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: item.columnKey,
+        className: "pisell-record-board-uniform-summary-item"
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-record-board-uniform-summary-label" }, item.title),
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-record-board-uniform-summary-value" }, content)
+    );
+  })), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Table,
     {
       ...rest,

package/lib/components/pisellRecordBoard/layouts/GridLayout/Grid.less

@@ -7,6 +7,44 @@
   }
 }
 
+// 同值列折叠时的总结区样式（参考 Figma 12840-86869）
+.pisell-record-board-uniform-summary {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 32px;
+  min-height: 44px;
+  padding: 12px 24px;
+  background: #f2f4f7;
+  border-bottom: 1px solid #eaecf0;
+  border-radius: 8px 8px 0 0;
+
+  .pisell-record-board-uniform-summary-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .pisell-record-board-uniform-summary-label {
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    color: #475467;
+    white-space: nowrap;
+  }
+
+  .pisell-record-board-uniform-summary-value {
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    color: #475467;
+    white-space: nowrap;
+  }
+}
+
 // 纯 CSS 占满高度：滚动发生在 .pisell-record-board-scroll-body，表头 sticky 固定；高度传到 table
 .pisell-record-board-scroll-body .pisell-lowcode-record-board-grid {
   height: 100%;

package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.d.ts

@@ -1,6 +1,5 @@
 /**
- * 列显示隐藏弹层内容（仅控制列展示显隐，不控制 filter/sort）。
- * 参考 table Actions ColumnsSetting PopoverContent，去掉拖拽排序。
+ * 列显示隐藏弹层内容：显隐切换 + 拖拽排序（参考 table Actions ColumnsSetting PopoverContent）。
  */
 import React from 'react';
 import type { RecordBoardColumnType } from '../../types';
@@ -8,6 +7,9 @@ export interface ColumnSettingPopoverProps {
     columns: RecordBoardColumnType[];
     columnVisibility: Record<string, boolean>;
     onColumnVisibilityChange: (visibility: Record<string, boolean>) => void;
+    /** 列 key 顺序（拖拽排序后持久化）；未传则按 columns 顺序 */
+    columnOrder?: string[] | null;
+    onColumnOrderChange?: (columnKeys: string[]) => void;
 }
 declare const ColumnSettingPopover: React.FC<ColumnSettingPopoverProps>;
 export default ColumnSettingPopover;

package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.js

@@ -34,8 +34,10 @@ __export(ColumnSettingPopover_exports, {
 module.exports = __toCommonJS(ColumnSettingPopover_exports);
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
+var import_DotsSix = __toESM(require("@pisell/icon/es/DotsSix"));
 var import_icons = require("@ant-design/icons");
 var import_locales = require("../../../../locales");
+var import_DragSortList = __toESM(require("../../../DragSortList"));
 var import_recordBoardColumns = require("../../utils/recordBoardColumns");
 var prefix = "pisell-lowcode-";
 function getColumnTitle(column) {
@@ -46,12 +48,94 @@ function getColumnTitle(column) {
 var ColumnSettingPopover = ({
   columns,
   columnVisibility,
-  onColumnVisibilityChange
+  onColumnVisibilityChange,
+  columnOrder,
+  onColumnOrderChange
 }) => {
+  const orderedColumns = (0, import_react.useMemo)(() => {
+    if (!Array.isArray(columnOrder) || columnOrder.length === 0) return columns;
+    const keyToCol = new Map(
+      columns.map((c) => [(0, import_recordBoardColumns.getRecordBoardColumnKey)(c), c])
+    );
+    const result = [];
+    for (const key of columnOrder) {
+      const col = keyToCol.get(key);
+      if (col) result.push(col);
+    }
+    columns.forEach((col) => {
+      const key = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
+      if (!columnOrder.includes(key)) result.push(col);
+    });
+    return result;
+  }, [columns, columnOrder]);
   const handleToggle = (colKey, isShow) => {
     onColumnVisibilityChange({ [colKey]: isShow });
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-popover-content-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}table-action-column-header-title` }, (0, import_locales.getText)("table-action-column-title"))), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-content` }, columns.map((col) => {
+  const handleOrderChange = (list) => {
+    onColumnOrderChange == null ? void 0 : onColumnOrderChange(
+      list.map((c) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(c)).filter(Boolean)
+    );
+  };
+  const listContent = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-content` }, typeof onColumnOrderChange === "function" ? /* @__PURE__ */ import_react.default.createElement(
+    import_DragSortList.default,
+    {
+      list: orderedColumns,
+      rowKey: (col) => (0, import_recordBoardColumns.getRecordBoardColumnKey)(col) || "",
+      onChange: handleOrderChange
+    },
+    ({
+      item: col,
+      index,
+      style,
+      props,
+      attributes,
+      setActivatorNodeRef,
+      listeners
+    }) => {
+      const colKey = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
+      const isShow = columnVisibility[colKey] !== false;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: colKey,
+          ...attributes,
+          ref: props.ref,
+          style,
+          className: `${prefix}table-action-column-drag-item`
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_DotsSix.default,
+          {
+            ref: setActivatorNodeRef,
+            ...listeners,
+            style: { touchAction: "none" },
+            className: `${prefix}table-action-column-drag-bar`
+          }
+        ),
+        /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-drag-item-right` }, /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: (0, import_classnames.default)(
+              `${prefix}table-action-column-drag-item-right-text`,
+              {
+                [`${prefix}table-action-column-drag-item-right-text-hidden`]: !isShow
+              }
+            )
+          },
+          getColumnTitle(col)
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: `${prefix}table-action-column-drag-item-right-icon-wrap`,
+            onClick: () => handleToggle(colKey, !isShow),
+            role: "button",
+            "aria-label": isShow ? "hide" : "show"
+          },
+          isShow ? /* @__PURE__ */ import_react.default.createElement(import_icons.EyeOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.EyeInvisibleOutlined, null)
+        ))
+      );
+    }
+  ) : orderedColumns.map((col) => {
     const colKey = (0, import_recordBoardColumns.getRecordBoardColumnKey)(col);
     const isShow = columnVisibility[colKey] !== false;
     return /* @__PURE__ */ import_react.default.createElement(
@@ -83,6 +167,7 @@ var ColumnSettingPopover = ({
         isShow ? /* @__PURE__ */ import_react.default.createElement(import_icons.EyeOutlined, null) : /* @__PURE__ */ import_react.default.createElement(import_icons.EyeInvisibleOutlined, null)
       ))
     );
-  })));
+  }));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-popover-content-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}table-action-column-header` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}table-action-column-header-title` }, (0, import_locales.getText)("table-action-column-title"))), listContent);
 };
 var ColumnSettingPopover_default = ColumnSettingPopover;

package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/index.js

@@ -45,6 +45,8 @@ var RecordBoardColumnSetting = () => {
   const gridColumns = (_b = (_a = ctx.childComponentProps) == null ? void 0 : _a.grid) == null ? void 0 : _b.columns;
   const columnVisibility = ctx.columnVisibility ?? {};
   const onColumnVisibilityChange = ctx.onColumnVisibilityChange;
+  const columnOrder = ctx.columnOrder ?? null;
+  const onColumnOrderChange = ctx.onColumnOrderChange;
   const content = (0, import_react.useMemo)(() => {
     if (!Array.isArray(gridColumns) || gridColumns.length === 0 || typeof onColumnVisibilityChange !== "function") {
       return null;
@@ -54,10 +56,12 @@ var RecordBoardColumnSetting = () => {
       {
         columns: gridColumns,
         columnVisibility,
-        onColumnVisibilityChange
+        onColumnVisibilityChange,
+        columnOrder,
+        onColumnOrderChange
       }
     );
-  }, [gridColumns, columnVisibility, onColumnVisibilityChange]);
+  }, [gridColumns, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange]);
   const hasHiddenColumns = (0, import_react.useMemo)(() => {
     if (!Array.isArray(gridColumns)) return false;
     return gridColumns.some(

package/lib/components/pisellRecordBoard/shellFrame/Pagination/index.js

@@ -38,7 +38,7 @@ var import_index = require("./index.less");
 var import_useRecordBoardContext = require("../../hooks/useRecordBoardContext");
 var defaultPagination = {
   pageNumber: 1,
-  pageSize: 10
+  pageSize: 50
 };
 var RecordBoardPagination = (props) => {
   var _a;