@hsu-react/ui 0.0.5 → 0.0.8

package/es/components/Table/_hooks/useTableColumns.js

@@ -22,6 +22,25 @@ import usePermissions from "../../../hooks/usePermissions";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+// measureAlign 列：与表体、autoWidth 标题测量一致，统一按 14px 测量
+var MEASURE_ALIGN_FONT_SIZE = 14;
+// Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
+var MEASURE_ALIGN_BUFFER_PX = 2;
+
+// 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
+var getMeasureAlignWidth = function getMeasureAlignWidth(column, dataSource) {
+  if (!(dataSource !== null && dataSource !== void 0 && dataSource.length)) return 0;
+  var measureText = column.measureText,
+    dataIndex = column.dataIndex;
+  var max = dataSource.reduce(function (acc, record) {
+    var _ref;
+    var text = measureText ? measureText(record) : String((_ref = dataIndex ? record[dataIndex] : "") !== null && _ref !== void 0 ? _ref : "");
+    return Math.max(acc, get_string_size(text, {
+      size: MEASURE_ALIGN_FONT_SIZE
+    }).width);
+  }, 0);
+  return max > 0 ? Math.ceil(max) + MEASURE_ALIGN_BUFFER_PX : 0;
+};
 var useTableColumns = function useTableColumns(params) {
   var _params$columns = params.columns,
     columns = _params$columns === void 0 ? [] : _params$columns,
@@ -77,10 +96,10 @@ var useTableColumns = function useTableColumns(params) {
     var _cloned$map;
     var cloned = cloneDeep(columns);
     var newColumns = cloned === null || cloned === void 0 || (_cloned$map = cloned.map(function (item, idx) {
-      var _ref, _item$key;
+      var _ref2, _item$key;
       return _objectSpread(_objectSpread({}, item), {}, {
         width: !item.width ? "100%" : item.width,
-        key: (_ref = (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.dataIndex) !== null && _ref !== void 0 ? _ref : "col_".concat(idx),
+        key: (_ref2 = (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.dataIndex) !== null && _ref2 !== void 0 ? _ref2 : "col_".concat(idx),
         hidden: !checkPermission(item.hasPermi) || item.hidden,
         ellipsis: typeof item.ellipsis === "boolean" ? item.ellipsis : true
       });
@@ -220,12 +239,33 @@ var useTableColumns = function useTableColumns(params) {
     return (_enhancedColumns3 = enhancedColumns) === null || _enhancedColumns3 === void 0 ? void 0 : _enhancedColumns3.map(function (column) {
       var orderKey = column.orderKey || column.dataIndex;
       var isOrderColumn = orderKey && orderKey !== "serialNumber";
+
+      // measureAlign 列：把展示内容包进定宽右对齐块（块随列 align 居中），各行右边缘对齐。
+      // 不适用于 render 返回 { children, rowSpan } 这类 RenderedCell 的合并单元格场景。
+      var render = column.render;
+      if (column.measureAlign) {
+        var cellWidth = getMeasureAlignWidth(column, dataSource);
+        if (cellWidth > 0) {
+          var innerRender = column.render;
+          render = function render(value, record, index) {
+            return /*#__PURE__*/_jsx("span", {
+              style: {
+                display: "inline-block",
+                width: cellWidth,
+                textAlign: "right"
+              },
+              children: innerRender ? innerRender(value, record, index) : value
+            });
+          };
+        }
+      }
       return _objectSpread(_objectSpread({
         showSorterTooltip: false,
         sorter: typeof sorter === "boolean" ? sorter : isOrderColumn ? true : false
       }, column), {}, {
         orderKey: orderKey,
         title: renderColumnTitle(column),
+        render: render,
         children: column !== null && column !== void 0 && column.children ? renderColumns(column.children) : undefined,
         onCell: function onCell(record, index) {
           var _column$onCell;
@@ -241,7 +281,7 @@ var useTableColumns = function useTableColumns(params) {
         sortOrder: (order === null || order === void 0 ? void 0 : order.k) === orderKey ? (order === null || order === void 0 ? void 0 : order.t) === "desc" ? "descend" : "ascend" : undefined
       });
     });
-  }, [enhanceColumns, serialNumberColumn, _columns, tableWidth, pagination, _pageNum, _pageSize, bordered, rowSelection, expandable, sorter, renderColumnTitle, order, mergeRowDataSource]);
+  }, [enhanceColumns, serialNumberColumn, _columns, tableWidth, pagination, _pageNum, _pageSize, bordered, rowSelection, expandable, sorter, renderColumnTitle, order, mergeRowDataSource, dataSource]);
 
   // 缓存渲染后的列配置
   var renderedColumns = useMemo(function () {

package/es/components/Table/index.d.ts

@@ -24,6 +24,16 @@ export interface ColumnType<RecordType> extends AntColumnType<RecordType> {
     orderKey?: string;
     fixedWidth?: boolean;
     ellipsisPosition?: "start" | "end";
+    /**
+     * 定宽对齐列：列标题随 align 居中，单元格内容放进按本列最宽内容
+     * 测量出的定宽块内右对齐，使各行右边缘对齐、整体在列内居中（适合数字/金额列）。
+     */
+    measureAlign?: boolean;
+    /**
+     * measureAlign 列测量宽度所用的文本。默认取 dataIndex 原始值；当单元格由 render
+     * 产出复合/JSX 内容（无法从 dataIndex 直接得到展示文本）时，用它提供与展示一致的文本。
+     */
+    measureText?: (record: RecordType) => string;
 }
 export interface ColumnsGroupType<RecordType> extends Omit<AntColumnGroupType<RecordType>, "children"> {
     title?: string;
@@ -39,6 +49,8 @@ export interface ColumnsGroupType<RecordType> extends Omit<AntColumnGroupType<Re
     orderKey?: string;
     fixedWidth?: boolean;
     ellipsisPosition?: "start" | "end";
+    measureAlign?: boolean;
+    measureText?: (record: RecordType) => string;
 }
 export type ColumnsType<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnsGroupType<RecordType>)[];
 export interface TableProps<RecordType = AnyObject> extends Omit<AntdTableProps<RecordType>, "scroll" | "pagination" | "columns"> {

package/lib/components/Table/_hooks/useTableColumns.js

@@ -15,6 +15,26 @@ var _tableUtils = require("../_utils/tableUtils");
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// measureAlign 列：与表体、autoWidth 标题测量一致，统一按 14px 测量
+const MEASURE_ALIGN_FONT_SIZE = 14;
+// Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
+const MEASURE_ALIGN_BUFFER_PX = 2;
+
+// 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
+const getMeasureAlignWidth = (column, dataSource) => {
+  if (!dataSource?.length) return 0;
+  const {
+    measureText,
+    dataIndex
+  } = column;
+  const max = dataSource.reduce((acc, record) => {
+    const text = measureText ? measureText(record) : String((dataIndex ? record[dataIndex] : "") ?? "");
+    return Math.max(acc, (0, _hsuUtils.get_string_size)(text, {
+      size: MEASURE_ALIGN_FONT_SIZE
+    }).width);
+  }, 0);
+  return max > 0 ? Math.ceil(max) + MEASURE_ALIGN_BUFFER_PX : 0;
+};
 const useTableColumns = params => {
   const {
     columns = [],
@@ -195,12 +215,31 @@ const useTableColumns = params => {
     return enhancedColumns?.map(column => {
       const orderKey = column.orderKey || column.dataIndex;
       const isOrderColumn = orderKey && orderKey !== "serialNumber";
+
+      // measureAlign 列：把展示内容包进定宽右对齐块（块随列 align 居中），各行右边缘对齐。
+      // 不适用于 render 返回 { children, rowSpan } 这类 RenderedCell 的合并单元格场景。
+      let render = column.render;
+      if (column.measureAlign) {
+        const cellWidth = getMeasureAlignWidth(column, dataSource);
+        if (cellWidth > 0) {
+          const innerRender = column.render;
+          render = (value, record, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            style: {
+              display: "inline-block",
+              width: cellWidth,
+              textAlign: "right"
+            },
+            children: innerRender ? innerRender(value, record, index) : value
+          });
+        }
+      }
       return {
         showSorterTooltip: false,
         sorter: typeof sorter === "boolean" ? sorter : isOrderColumn ? true : false,
         ...column,
         orderKey,
         title: renderColumnTitle(column),
+        render,
         children: column?.children ? renderColumns(column.children) : undefined,
         onCell: (record, index) => {
           const cell = column?.onCell?.(record, index);
@@ -216,7 +255,7 @@ const useTableColumns = params => {
         sortOrder: order?.k === orderKey ? order?.t === "desc" ? "descend" : "ascend" : undefined
       };
     });
-  }, [enhanceColumns, serialNumberColumn, _columns, tableWidth, pagination, _pageNum, _pageSize, bordered, rowSelection, expandable, sorter, renderColumnTitle, order, mergeRowDataSource]);
+  }, [enhanceColumns, serialNumberColumn, _columns, tableWidth, pagination, _pageNum, _pageSize, bordered, rowSelection, expandable, sorter, renderColumnTitle, order, mergeRowDataSource, dataSource]);
 
   // 缓存渲染后的列配置
   const renderedColumns = (0, _react.useMemo)(() => renderColumns((0, _lodash.cloneDeep)(_columns)), [renderColumns, _columns]);

package/lib/components/Table/index.d.ts

@@ -24,6 +24,16 @@ export interface ColumnType<RecordType> extends AntColumnType<RecordType> {
     orderKey?: string;
     fixedWidth?: boolean;
     ellipsisPosition?: "start" | "end";
+    /**
+     * 定宽对齐列：列标题随 align 居中，单元格内容放进按本列最宽内容
+     * 测量出的定宽块内右对齐，使各行右边缘对齐、整体在列内居中（适合数字/金额列）。
+     */
+    measureAlign?: boolean;
+    /**
+     * measureAlign 列测量宽度所用的文本。默认取 dataIndex 原始值；当单元格由 render
+     * 产出复合/JSX 内容（无法从 dataIndex 直接得到展示文本）时，用它提供与展示一致的文本。
+     */
+    measureText?: (record: RecordType) => string;
 }
 export interface ColumnsGroupType<RecordType> extends Omit<AntColumnGroupType<RecordType>, "children"> {
     title?: string;
@@ -39,6 +49,8 @@ export interface ColumnsGroupType<RecordType> extends Omit<AntColumnGroupType<Re
     orderKey?: string;
     fixedWidth?: boolean;
     ellipsisPosition?: "start" | "end";
+    measureAlign?: boolean;
+    measureText?: (record: RecordType) => string;
 }
 export type ColumnsType<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnsGroupType<RecordType>)[];
 export interface TableProps<RecordType = AnyObject> extends Omit<AntdTableProps<RecordType>, "scroll" | "pagination" | "columns"> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -63,7 +63,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@hsu-react/single-router": "^0.0.24",
+    "@hsu-react/single-router": "0.0.26",
     "@iconify/json": "^2.2.385",
     "@iconify/react": "^5.0.1",
     "@uiw/codemirror-theme-vscode": "^4.25.1",

package/src/components/Table/_hooks/useTableColumns.tsx

@@ -19,6 +19,30 @@ import {
 import usePermissions from "../../../hooks/usePermissions";
 import { PaginationProps } from "../_components/Pagination";
 
+// measureAlign 列：与表体、autoWidth 标题测量一致，统一按 14px 测量
+const MEASURE_ALIGN_FONT_SIZE = 14;
+// Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
+const MEASURE_ALIGN_BUFFER_PX = 2;
+
+// 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
+const getMeasureAlignWidth = <T extends AnyObject>(
+  column: ColumnType<T>,
+  dataSource?: readonly T[]
+): number => {
+  if (!dataSource?.length) return 0;
+  const { measureText, dataIndex } = column;
+  const max = dataSource.reduce((acc, record) => {
+    const text = measureText
+      ? measureText(record)
+      : String((dataIndex ? record[dataIndex] : "") ?? "");
+    return Math.max(
+      acc,
+      get_string_size(text, { size: MEASURE_ALIGN_FONT_SIZE }).width
+    );
+  }, 0);
+  return max > 0 ? Math.ceil(max) + MEASURE_ALIGN_BUFFER_PX : 0;
+};
+
 interface UseTableColumnsParams<T extends AnyObject> {
   columns?: ColumnsType<T>;
   scroll?: boolean | { y: boolean };
@@ -276,6 +300,34 @@ const useTableColumns = <T extends AnyObject>(
         const orderKey = column.orderKey || column.dataIndex;
         const isOrderColumn = orderKey && orderKey !== "serialNumber";
 
+        // measureAlign 列：把展示内容包进定宽右对齐块（块随列 align 居中），各行右边缘对齐。
+        // 不适用于 render 返回 { children, rowSpan } 这类 RenderedCell 的合并单元格场景。
+        let render = column.render;
+        if (column.measureAlign) {
+          const cellWidth = getMeasureAlignWidth(
+            column as ColumnType<T>,
+            dataSource
+          );
+          if (cellWidth > 0) {
+            const innerRender = column.render;
+            render = (value: unknown, record: T, index: number) => (
+              <span
+                style={{
+                  display: "inline-block",
+                  width: cellWidth,
+                  textAlign: "right",
+                }}
+              >
+                {
+                  (innerRender
+                    ? innerRender(value, record, index)
+                    : value) as React.ReactNode
+                }
+              </span>
+            );
+          }
+        }
+
         return {
           showSorterTooltip: false,
           sorter:
@@ -283,6 +335,7 @@ const useTableColumns = <T extends AnyObject>(
           ...column,
           orderKey,
           title: renderColumnTitle(column),
+          render,
           children: column?.children
             ? renderColumns(column.children)
             : undefined,
@@ -328,6 +381,7 @@ const useTableColumns = <T extends AnyObject>(
       renderColumnTitle,
       order,
       mergeRowDataSource,
+      dataSource,
     ]
   );
 

package/src/components/Table/index.md

@@ -45,7 +45,7 @@ export default () => (
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| columns | 列配置，使用自定义 `ColumnsType`（支持 `hidden`、`sort`、`hasPermi`、`help`、`mergeRow`、`fixedWidth`、`ellipsisPosition` 等） | `ColumnsType<RecordType>` | `[]` |
+| columns | 列配置，使用自定义 `ColumnsType`（支持 `hidden`、`sort`、`hasPermi`、`help`、`mergeRow`、`fixedWidth`、`ellipsisPosition`、`measureAlign`、`measureText` 等） | `ColumnsType<RecordType>` | `[]` |
 | scroll | 是否开启滚动；`{ y: false }` 可关闭纵向滚动 | `boolean \| { y: boolean }` | `false` |
 | pagination | 分页配置；为 `false` 时不展示分页 | `false \| PaginationProps` | `{}` |
 | autoWidth | 列宽自适应 | `boolean` | - |
@@ -73,4 +73,15 @@ export default () => (
 | showTotal | 自定义分页总数展示；为 `false` 时不展示 | `false \| ((total, range) => ReactNode)` | - |
 | isExpandedCellTable | 是否为展开行内嵌表格样式 | `boolean` | `false` |
 
+### ColumnType 扩展字段：measureAlign
+
+数字/金额/单量列适用：按本列所有行展示文本测量出最大像素宽，把单元格内容包进该定宽块内右对齐，块本身随列 `align` 居中——各行右边缘对齐、整体在列内居中。
+
+| 字段 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| measureAlign | 开启定宽右对齐（配合列 `align: "center"` 使用） | `boolean` | - |
+| measureText | 测量宽度所用文本；当单元格由 `render` 产出复合/JSX 内容时，用它提供与展示一致的文本（默认取 `dataIndex` 原始值） | `(record) => string` | - |
+
+> 注意：不适用于 `render` 返回 `{ children, rowSpan }` 这类合并单元格场景。
+
 > 另导出 `TableDrag`，用于行拖拽排序场景。

package/src/components/Table/index.tsx

@@ -46,6 +46,16 @@ export interface ColumnType<RecordType> extends AntColumnType<RecordType> {
   orderKey?: string;
   fixedWidth?: boolean;
   ellipsisPosition?: "start" | "end";
+  /**
+   * 定宽对齐列：列标题随 align 居中，单元格内容放进按本列最宽内容
+   * 测量出的定宽块内右对齐，使各行右边缘对齐、整体在列内居中（适合数字/金额列）。
+   */
+  measureAlign?: boolean;
+  /**
+   * measureAlign 列测量宽度所用的文本。默认取 dataIndex 原始值；当单元格由 render
+   * 产出复合/JSX 内容（无法从 dataIndex 直接得到展示文本）时，用它提供与展示一致的文本。
+   */
+  measureText?: (record: RecordType) => string;
 }
 export interface ColumnsGroupType<RecordType>
   extends Omit<AntColumnGroupType<RecordType>, "children"> {
@@ -62,6 +72,8 @@ export interface ColumnsGroupType<RecordType>
   orderKey?: string;
   fixedWidth?: boolean;
   ellipsisPosition?: "start" | "end";
+  measureAlign?: boolean;
+  measureText?: (record: RecordType) => string;
 }
 export type ColumnsType<RecordType = AnyObject> = (
   | ColumnType<RecordType>