@nokecy/qc-ui 1.1.18 → 1.1.20

package/dist/esm/ag-grid-plus/setting/ColumnConfigTable.js

@@ -20,12 +20,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  */
 
 import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
-import { Button, Select, Switch, Space, Popconfirm, message, Tag, Input } from 'antd';
-import { DeleteOutlined, FolderOutlined, FolderAddOutlined, FileOutlined, HolderOutlined } from '@ant-design/icons';
+import { Button, Select, Switch, Space, Popconfirm, message, Tag } from 'antd';
+import { DeleteOutlined, FolderOutlined, FolderAddOutlined, FileOutlined } from '@ant-design/icons';
 import { AgGridReact } from 'ag-grid-react';
 import { generateId } from "./columnGroupUtils";
 import { DebounceNumberInput } from "./DebounceInputs";
 import { agGridTheme } from "../theme";
+import { ColumnNameCellRenderer } from "./ColumnNameCellRenderer";
 // ==================== Cell Renderers ====================
 
 /** 类型标签 */
@@ -44,63 +45,7 @@ var TypeCellRenderer = function TypeCellRenderer(props) {
   }, "\u5217");
 };
 
-/** 名称列 (带拖拽图标和缩进) */
-var NameCellRenderer = function NameCellRenderer(props) {
-  var item = props.data;
-  if (!item) return null;
-  var paddingLeft = (item.level || 0) * 20;
-
-  // 从 props 中获取自定义参数
-  var _ref = props,
-    expandedKeys = _ref.expandedKeys,
-    onToggleExpand = _ref.onToggleExpand,
-    allItems = _ref.allItems;
-
-  // 检查是否有子节点
-  var hasChildren = allItems === null || allItems === void 0 ? void 0 : allItems.some(function (i) {
-    return i.parentId === item.id;
-  });
-  var isExpanded = expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.has(item.id);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 8,
-      paddingLeft: paddingLeft
-    }
-  }, item.type === 'group' && hasChildren ? /*#__PURE__*/React.createElement("span", {
-    onClick: function onClick() {
-      return onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand(item.id);
-    },
-    style: {
-      cursor: 'pointer',
-      width: 16,
-      display: 'inline-block'
-    }
-  }, isExpanded ? '▼' : '▶') : /*#__PURE__*/React.createElement("span", {
-    style: {
-      width: 16,
-      display: 'inline-block'
-    }
-  }), /*#__PURE__*/React.createElement(HolderOutlined, {
-    style: {
-      color: '#999',
-      cursor: 'grab'
-    }
-  }), /*#__PURE__*/React.createElement(Input, {
-    value: item.headerName || '',
-    onChange: function onChange(e) {
-      if (props.node) {
-        props.node.setDataValue('headerName', e.target.value);
-      }
-    },
-    bordered: false,
-    placeholder: "\u8F93\u5165\u540D\u79F0",
-    style: {
-      flex: 1
-    }
-  }));
-};
+// 名称列渲染器已移至独立文件 ColumnNameCellRenderer.tsx
 
 /** 宽度输入 */
 var WidthCellRenderer = function WidthCellRenderer(props) {
@@ -115,6 +60,7 @@ var WidthCellRenderer = function WidthCellRenderer(props) {
     },
     min: 50,
     max: 1000,
+    size: "small",
     style: {
       width: '100%'
     }
@@ -220,16 +166,47 @@ var PinnedCellRenderer = function PinnedCellRenderer(props) {
   });
 };
 
+/** 对齐方式渲染器 */
+var AlignmentCellRenderer = function AlignmentCellRenderer(props) {
+  var item = props.data;
+  if (!item || item.type !== 'column') return /*#__PURE__*/React.createElement("span", null, "-");
+
+  // 标准化 cellClass 值，默认为左对齐
+  var normalizedValue = item.cellClass || 'custom-cell-left';
+  return /*#__PURE__*/React.createElement(Select, {
+    value: normalizedValue,
+    onChange: function onChange(val) {
+      if (props.node) {
+        props.node.setDataValue('cellClass', val);
+      }
+    },
+    style: {
+      width: '100%'
+    },
+    options: [{
+      value: 'custom-cell-left',
+      label: '左对齐'
+    }, {
+      value: 'custom-cell-centered',
+      label: '居中对齐'
+    }, {
+      value: 'custom-cell-right',
+      label: '右对齐'
+    }],
+    size: "small"
+  });
+};
+
 /** 操作列 */
 var ActionCellRenderer = function ActionCellRenderer(props) {
   var item = props.data;
   if (!item) return null;
 
   // 从 props 中获取自定义参数
-  var _ref2 = props,
-    onDelete = _ref2.onDelete,
-    onAddChildGroup = _ref2.onAddChildGroup,
-    simple = _ref2.simple;
+  var _ref = props,
+    onDelete = _ref.onDelete,
+    onAddChildGroup = _ref.onAddChildGroup,
+    simple = _ref.simple;
   return /*#__PURE__*/React.createElement(Space, {
     size: "small"
   }, !simple && item.type === 'group' && /*#__PURE__*/React.createElement(Button, {
@@ -254,13 +231,13 @@ var ActionCellRenderer = function ActionCellRenderer(props) {
 
 // ==================== 主组件 ====================
 
-var ColumnConfigTable = function ColumnConfigTable(_ref3) {
-  var items = _ref3.items,
-    onChange = _ref3.onChange,
-    _ref3$simple = _ref3.simple,
-    simple = _ref3$simple === void 0 ? false : _ref3$simple,
-    _ref3$scrollY = _ref3.scrollY,
-    scrollY = _ref3$scrollY === void 0 ? 480 : _ref3$scrollY;
+var ColumnConfigTable = function ColumnConfigTable(_ref2) {
+  var items = _ref2.items,
+    onChange = _ref2.onChange,
+    _ref2$simple = _ref2.simple,
+    simple = _ref2$simple === void 0 ? false : _ref2$simple,
+    _ref2$scrollY = _ref2.scrollY,
+    scrollY = _ref2$scrollY === void 0 ? 480 : _ref2$scrollY;
   var _useState = useState(items),
     _useState2 = _slicedToArray(_useState, 2),
     localItems = _useState2[0],
@@ -600,6 +577,12 @@ var ColumnConfigTable = function ColumnConfigTable(_ref3) {
 
   // 列定义
   var columnDefs = useMemo(function () {
+    // 通用单元格样式 - 垂直居中
+    var commonCellStyle = {
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%'
+    };
     var cols = [{
       field: 'type',
       headerName: '类型',
@@ -607,6 +590,7 @@ var ColumnConfigTable = function ColumnConfigTable(_ref3) {
       minWidth: 100,
       maxWidth: 150,
       cellRenderer: TypeCellRenderer,
+      cellStyle: commonCellStyle,
       rowDrag: true,
       suppressSizeToFit: true
     }, {
@@ -614,37 +598,49 @@ var ColumnConfigTable = function ColumnConfigTable(_ref3) {
       headerName: '名称',
       flex: 1,
       minWidth: 200,
-      cellRenderer: NameCellRenderer,
+      cellRenderer: ColumnNameCellRenderer,
       cellRendererParams: {
         expandedKeys: expandedKeys,
         onToggleExpand: toggleExpand,
         allItems: localItems
       }
+      // 名称列不需要 cellStyle，因为渲染器内部已经处理了
     }, {
       field: 'width',
       headerName: '宽度',
       width: 100,
-      cellRenderer: WidthCellRenderer
+      cellRenderer: WidthCellRenderer,
+      cellStyle: commonCellStyle
     }, {
       field: 'flex',
       headerName: '占满',
       width: 120,
-      cellRenderer: FlexCellRenderer
+      cellRenderer: FlexCellRenderer,
+      cellStyle: commonCellStyle
     }, {
       field: 'pinned',
       headerName: '固定',
       width: 120,
-      cellRenderer: PinnedCellRenderer
+      cellRenderer: PinnedCellRenderer,
+      cellStyle: commonCellStyle
+    }, {
+      field: 'cellClass',
+      headerName: '对齐',
+      width: 120,
+      cellRenderer: AlignmentCellRenderer,
+      cellStyle: commonCellStyle
     }, {
       field: 'hide',
       headerName: '隐藏',
       width: 80,
-      cellRenderer: createSwitchRenderer('hide')
+      cellRenderer: createSwitchRenderer('hide'),
+      cellStyle: commonCellStyle
     }, {
       field: 'suppressHeaderFilterButton',
       headerName: '列过滤',
       width: 80,
-      cellRenderer: SuppressFilterButtonRenderer
+      cellRenderer: SuppressFilterButtonRenderer,
+      cellStyle: commonCellStyle
     }, {
       headerName: '操作',
       width: 200,
@@ -654,7 +650,8 @@ var ColumnConfigTable = function ColumnConfigTable(_ref3) {
         onDelete: handleDelete,
         onAddChildGroup: handleAddChildGroup,
         simple: simple
-      }
+      },
+      cellStyle: commonCellStyle
     }];
     return cols;
   }, [handleDelete, handleAddChildGroup, simple, expandedKeys, toggleExpand, localItems]);
@@ -722,7 +719,13 @@ var ColumnConfigTable = function ColumnConfigTable(_ref3) {
     rowDragEntireRow: true,
     suppressMoveWhenRowDragging: true,
     suppressMovableColumns: true,
-    domLayout: "normal"
+    domLayout: "normal",
+    getRowHeight: function getRowHeight(params) {
+      var item = params.data;
+      // 如果已修改,显示双行布局(原始名称 + 当前名称)
+      var isModified = (item === null || item === void 0 ? void 0 : item.originalHeaderName) && (item === null || item === void 0 ? void 0 : item.headerName) !== (item === null || item === void 0 ? void 0 : item.originalHeaderName);
+      return isModified ? 56 : 40;
+    }
   })));
 };
 export default ColumnConfigTable;

package/dist/esm/ag-grid-plus/setting/ColumnNameCellRenderer.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 列名称单元格渲染器 - 分层叠加式设计
+ *
+ * 设计特点:
+ * - 垂直分层布局,原始字段(field)在上,编辑区域在下
+ * - 使用视觉层次区分只读和可编辑信息
+ * - 支持快速重置功能
+ * - 显示修改状态指示
+ */
+import React from 'react';
+import type { ICellRendererParams } from 'ag-grid-community';
+import type { FlatColumnItem } from './columnGroupTypes';
+interface ColumnNameCellRendererProps extends ICellRendererParams<FlatColumnItem> {
+    expandedKeys?: Set<string>;
+    onToggleExpand?: (id: string) => void;
+    allItems?: FlatColumnItem[];
+}
+/**
+ * 列名称单元格渲染器
+ */
+export declare const ColumnNameCellRenderer: React.FC<ColumnNameCellRendererProps>;
+export default ColumnNameCellRenderer;

package/dist/esm/ag-grid-plus/setting/ColumnNameCellRenderer.js

@@ -0,0 +1,204 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * 列名称单元格渲染器 - 分层叠加式设计
+ *
+ * 设计特点:
+ * - 垂直分层布局,原始字段(field)在上,编辑区域在下
+ * - 使用视觉层次区分只读和可编辑信息
+ * - 支持快速重置功能
+ * - 显示修改状态指示
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { Input, Typography, Button, Tooltip } from 'antd';
+import { UndoOutlined, InfoCircleOutlined, HolderOutlined } from '@ant-design/icons';
+var Text = Typography.Text;
+/**
+ * 列名称单元格渲染器
+ */
+export var ColumnNameCellRenderer = function ColumnNameCellRenderer(props) {
+  var item = props.data,
+    node = props.node,
+    expandedKeys = props.expandedKeys,
+    onToggleExpand = props.onToggleExpand,
+    allItems = props.allItems;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var _useState3 = useState((item === null || item === void 0 ? void 0 : item.headerName) || ''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    localValue = _useState4[0],
+    setLocalValue = _useState4[1];
+
+  // 计算缩进
+  var paddingLeft = ((item === null || item === void 0 ? void 0 : item.level) || 0) * 20;
+
+  // 检查是否有子节点
+  var hasChildren = useMemo(function () {
+    return allItems === null || allItems === void 0 ? void 0 : allItems.some(function (i) {
+      return i.parentId === (item === null || item === void 0 ? void 0 : item.id);
+    });
+  }, [allItems, item === null || item === void 0 ? void 0 : item.id]);
+  var isExpanded = expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.has((item === null || item === void 0 ? void 0 : item.id) || '');
+
+  // 判断是否已修改 (对比当前 headerName 和原始 originalHeaderName)
+  var isModified = useMemo(function () {
+    return (item === null || item === void 0 ? void 0 : item.originalHeaderName) && (item === null || item === void 0 ? void 0 : item.headerName) !== (item === null || item === void 0 ? void 0 : item.originalHeaderName);
+  }, [item === null || item === void 0 ? void 0 : item.originalHeaderName, item === null || item === void 0 ? void 0 : item.headerName]);
+
+  // 处理名称修改
+  var handleChange = useCallback(function (e) {
+    setLocalValue(e.target.value);
+  }, []);
+
+  // 处理失焦保存
+  var handleBlur = useCallback(function () {
+    setIsEditing(false);
+    if (localValue !== (item === null || item === void 0 ? void 0 : item.headerName) && node) {
+      node.setDataValue('headerName', localValue);
+    }
+  }, [localValue, item === null || item === void 0 ? void 0 : item.headerName, node]);
+
+  // 处理按下 Enter 键
+  var handlePressEnter = useCallback(function (e) {
+    e.currentTarget.blur();
+  }, []);
+
+  // 处理按下 Escape 键
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === 'Escape') {
+      setLocalValue((item === null || item === void 0 ? void 0 : item.headerName) || '');
+      e.currentTarget.blur();
+    }
+  }, [item === null || item === void 0 ? void 0 : item.headerName]);
+
+  // 处理聚焦
+  var handleFocus = useCallback(function () {
+    setIsEditing(true);
+  }, []);
+
+  // 处理重置
+  var handleReset = useCallback(function () {
+    if (item !== null && item !== void 0 && item.originalHeaderName && node) {
+      var originalValue = item.originalHeaderName;
+      setLocalValue(originalValue);
+      node.setDataValue('headerName', originalValue);
+    }
+  }, [item === null || item === void 0 ? void 0 : item.originalHeaderName, node]);
+  if (!item) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      paddingLeft: paddingLeft,
+      width: '100%',
+      height: '100%',
+      minHeight: isModified ? '56px' : '40px'
+    }
+  }, item.type === 'group' && hasChildren ? /*#__PURE__*/React.createElement("span", {
+    onClick: function onClick() {
+      return onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand(item.id);
+    },
+    style: {
+      cursor: 'pointer',
+      width: 16,
+      display: 'inline-block',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, isExpanded ? '▼' : '▶') : /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 16,
+      display: 'inline-block'
+    }
+  }), /*#__PURE__*/React.createElement(HolderOutlined, {
+    style: {
+      color: '#999',
+      cursor: 'grab',
+      fontSize: '14px'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2,
+      justifyContent: 'center'
+    }
+  }, item.originalHeaderName && isModified && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 4,
+      height: '16px'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    type: "secondary",
+    style: {
+      fontSize: '11px',
+      color: '#8c8c8c',
+      lineHeight: '16px'
+    }
+  }, "\u539F\u59CB: ", item.originalHeaderName), /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u5DF2\u4FEE\u6539: ".concat(item.originalHeaderName, " \u2192 ").concat(item.headerName)
+  }, /*#__PURE__*/React.createElement(InfoCircleOutlined, {
+    style: {
+      fontSize: '11px',
+      color: '#1890ff',
+      cursor: 'help'
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 4
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    value: isEditing ? localValue : item.headerName,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPressEnter: handlePressEnter,
+    onKeyDown: handleKeyDown,
+    bordered: false,
+    placeholder: item.type === 'group' ? '输入分组名称' : '输入显示名称',
+    style: {
+      flex: 1,
+      fontSize: '14px',
+      fontWeight: item.type === 'group' ? 600 : 400,
+      borderBottom: isEditing ? '1px solid #1890ff' : '1px solid transparent',
+      transition: 'border-color 0.2s',
+      padding: '0 4px',
+      color: isModified ? '#1890ff' : 'rgba(0, 0, 0, 0.85)'
+    }
+  }), isModified && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u91CD\u7F6E\u4E3A\u539F\u59CB\u540D\u79F0"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    size: "small",
+    icon: /*#__PURE__*/React.createElement(UndoOutlined, null),
+    onClick: handleReset,
+    style: {
+      minWidth: '24px',
+      width: '24px',
+      height: '24px',
+      padding: 0,
+      opacity: 0.6,
+      transition: 'opacity 0.2s'
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      return e.currentTarget.style.opacity = '1';
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return e.currentTarget.style.opacity = '0.6';
+    }
+  })))));
+};
+export default ColumnNameCellRenderer;