@nokecy/qc-ui-components 0.0.0-stage → 2.0.0-beta.0

package/dist/esm/RuleBuilder/RuleCard.js

@@ -0,0 +1,228 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 规则卡片组件 - 紧凑版
+ * 生产环境优化：使用small尺寸，紧凑布局，优化空间利用
+ */
+
+import React from 'react';
+import { Button, Tooltip } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { FieldSelector } from "./selectors/FieldSelector";
+import { OperatorSelector } from "./selectors/OperatorSelector";
+import ValueInput from "./inputs/ValueInput";
+import { useRuleBuilderContext } from "./context/RuleBuilderContext";
+import { getOperatorInfo, operatorSupportsValueField } from "./constants/operators";
+import styles from "./styles/index.module.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 规则卡片组件 - 紧凑版
+ * 优化空间利用，使用内联布局
+ */
+export var RuleCard = function RuleCard(_ref) {
+  var _ruleErrors$find, _ruleErrors$find2, _ruleErrors$find3, _ruleErrors$find4;
+  var rule = _ref.rule,
+    path = _ref.path,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    _ref$allowFieldCompar = _ref.allowFieldComparison,
+    allowFieldComparison = _ref$allowFieldCompar === void 0 ? false : _ref$allowFieldCompar;
+  var _useRuleBuilderContex = useRuleBuilderContext(),
+    state = _useRuleBuilderContex.state,
+    dispatch = _useRuleBuilderContex.dispatch;
+
+  // 获取当前字段定义
+  var currentField = state.fields.find(function (f) {
+    return f.name === rule.fieldName;
+  });
+
+  // 获取当前规则的验证错误
+  var ruleErrors = state.validationResult.errors.filter(function (error) {
+    if (error.path.length !== path.length) return false;
+    return error.path.every(function (p, i) {
+      return p === path[i];
+    });
+  });
+
+  // 字段改变处理
+  var handleFieldChange = function handleFieldChange(fieldName) {
+    var newField = state.fields.find(function (f) {
+      return f.name === fieldName;
+    });
+    dispatch({
+      type: 'UPDATE_RULE',
+      payload: {
+        path: path,
+        rule: _objectSpread(_objectSpread({}, rule), {}, {
+          fieldName: fieldName,
+          value: undefined,
+          value2: undefined,
+          // 可比较的字段随数据类型变化，保留字段模式但清空已选字段。@author nokecy
+          valueField: rule.valueField !== undefined ? '' : undefined
+        })
+      }
+    });
+  };
+
+  // 操作符改变处理
+  var handleOperatorChange = function handleOperatorChange(operator) {
+    var operatorInfo = getOperatorInfo(operator);
+    var needsValue = operatorInfo.requiresValue;
+    var needsValue2 = operatorInfo.requiresValue2;
+    var needsMultiValue = operatorInfo.requiresMultiValue;
+    dispatch({
+      type: 'UPDATE_RULE',
+      payload: {
+        path: path,
+        rule: _objectSpread(_objectSpread({}, rule), {}, {
+          operator: operator,
+          value: needsValue || needsValue2 || needsMultiValue ? rule.value : undefined,
+          value2: needsValue2 ? rule.value2 : undefined,
+          valueField: operatorSupportsValueField(operator) ? rule.valueField : undefined
+        })
+      }
+    });
+  };
+
+  // 值改变处理
+  var handleValueChange = function handleValueChange(value, value2) {
+    dispatch({
+      type: 'UPDATE_RULE',
+      payload: {
+        path: path,
+        rule: _objectSpread(_objectSpread({}, rule), {}, {
+          value: value,
+          value2: value2
+        })
+      }
+    });
+  };
+
+  // 比较字段改变处理：切换模式或选择字段时清空固定值，undefined 表示回到固定值模式。@author nokecy
+  var handleValueFieldChange = function handleValueFieldChange(valueField) {
+    dispatch({
+      type: 'UPDATE_RULE',
+      payload: {
+        path: path,
+        rule: _objectSpread(_objectSpread({}, rule), {}, {
+          value: undefined,
+          value2: undefined,
+          valueField: valueField
+        })
+      }
+    });
+  };
+
+  // 删除规则处理
+  var handleDelete = function handleDelete() {
+    dispatch({
+      type: 'DELETE_RULE',
+      payload: {
+        path: path
+      }
+    });
+  };
+  var hasError = ruleErrors.length > 0;
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.ruleCard,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.ruleContent,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.ruleField,
+        children: [/*#__PURE__*/_jsx(FieldSelector, {
+          value: rule.fieldName,
+          onChange: handleFieldChange,
+          fields: state.fields,
+          disabled: readonly,
+          size: "small"
+        }), ruleErrors.some(function (e) {
+          return e.field === 'fieldName';
+        }) && /*#__PURE__*/_jsx("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: '11px',
+            marginTop: '2px'
+          },
+          children: (_ruleErrors$find = ruleErrors.find(function (e) {
+            return e.field === 'fieldName';
+          })) === null || _ruleErrors$find === void 0 ? void 0 : _ruleErrors$find.message
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.ruleOperator,
+        children: [/*#__PURE__*/_jsx(OperatorSelector, {
+          value: rule.operator,
+          onChange: handleOperatorChange,
+          dataType: currentField === null || currentField === void 0 ? void 0 : currentField.dataType,
+          disabled: readonly,
+          size: "small"
+        }), ruleErrors.some(function (e) {
+          return e.field === 'operator';
+        }) && /*#__PURE__*/_jsx("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: '11px',
+            marginTop: '2px'
+          },
+          children: (_ruleErrors$find2 = ruleErrors.find(function (e) {
+            return e.field === 'operator';
+          })) === null || _ruleErrors$find2 === void 0 ? void 0 : _ruleErrors$find2.message
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.ruleValue,
+        children: [/*#__PURE__*/_jsx(ValueInput, {
+          operator: rule.operator,
+          dataType: (currentField === null || currentField === void 0 ? void 0 : currentField.dataType) || 'string',
+          value: rule.value,
+          value2: rule.value2,
+          onChange: handleValueChange,
+          valueField: rule.valueField,
+          onValueFieldChange: allowFieldComparison ? handleValueFieldChange : undefined,
+          fields: state.fields,
+          fieldName: rule.fieldName,
+          disabled: readonly,
+          size: "small"
+        }), ruleErrors.some(function (e) {
+          return e.field === 'value' || e.field === 'value2';
+        }) && /*#__PURE__*/_jsx("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: '11px',
+            marginTop: '2px'
+          },
+          children: (_ruleErrors$find3 = ruleErrors.find(function (e) {
+            return e.field === 'value' || e.field === 'value2';
+          })) === null || _ruleErrors$find3 === void 0 ? void 0 : _ruleErrors$find3.message
+        })]
+      }), !readonly && /*#__PURE__*/_jsx("div", {
+        className: styles.ruleActions,
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: "\u5220\u9664\u89C4\u5219",
+          children: /*#__PURE__*/_jsx(Button, {
+            type: "text",
+            danger: true,
+            size: "small",
+            icon: /*#__PURE__*/_jsx(DeleteOutlined, {}),
+            onClick: handleDelete
+          })
+        })
+      })]
+    }), hasError && ruleErrors.some(function (e) {
+      return !e.field;
+    }) && /*#__PURE__*/_jsx("div", {
+      style: {
+        color: '#ff4d4f',
+        fontSize: '11px',
+        marginTop: '4px'
+      },
+      children: (_ruleErrors$find4 = ruleErrors.find(function (e) {
+        return !e.field;
+      })) === null || _ruleErrors$find4 === void 0 ? void 0 : _ruleErrors$find4.message
+    })]
+  });
+};
+export default RuleCard;

package/dist/esm/RuleBuilder/RuleGroupEditor.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 规则组编辑器组件 - 紧凑版
+ *
+ * 生产环境优化：紧凑布局，小尺寸，优化空间利用
+ */
+import React from 'react';
+import type { RuleGroupDto, RulePath } from './types/index';
+export interface RuleGroupEditorProps {
+    /** 当前规则组的路径 */
+    path: RulePath;
+    /** 当前嵌套层级(从 0 开始) */
+    level: number;
+    /** 最大允许嵌套层级 */
+    maxLevel: number;
+    /** 是否只读模式 */
+    readonly?: boolean;
+    /** 是否允许与另一个字段比较 @author nokecy */
+    allowFieldComparison?: boolean;
+    /** 规则组变更回调(可选) */
+    onChange?: (group: RuleGroupDto) => void;
+}
+/**
+ * 规则组编辑器组件 - 紧凑版
+ * 移除Card组件，使用轻量级div布局
+ */
+export declare const RuleGroupEditor: React.FC<RuleGroupEditorProps>;
+export default RuleGroupEditor;

package/dist/esm/RuleBuilder/RuleGroupEditor.js

@@ -0,0 +1,203 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 规则组编辑器组件 - 紧凑版
+ *
+ * 生产环境优化：紧凑布局，小尺寸，优化空间利用
+ */
+
+import React, { useCallback } from 'react';
+import { Button, message, Tag } from 'antd';
+import { PlusOutlined, DeleteOutlined, GroupOutlined } from '@ant-design/icons';
+import { RuleCard } from "./RuleCard";
+import { LogicSelector } from "./LogicSelector";
+import { useRuleBuilderContext } from "./context/RuleBuilderContext";
+import { getRuleGroupByPath } from "./utils/pathHelpers";
+import { createEmptyRule, createEmptyRuleGroup } from "./utils/ruleHelpers";
+import styles from "./styles/index.module.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 规则组编辑器组件 - 紧凑版
+ * 移除Card组件，使用轻量级div布局
+ */
+export var RuleGroupEditor = function RuleGroupEditor(_ref) {
+  var path = _ref.path,
+    level = _ref.level,
+    maxLevel = _ref.maxLevel,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    _ref$allowFieldCompar = _ref.allowFieldComparison,
+    allowFieldComparison = _ref$allowFieldCompar === void 0 ? false : _ref$allowFieldCompar,
+    onChange = _ref.onChange;
+  var _useRuleBuilderContex = useRuleBuilderContext(),
+    state = _useRuleBuilderContex.state,
+    dispatch = _useRuleBuilderContex.dispatch;
+  var currentGroup = getRuleGroupByPath(state.ruleGroup, path);
+  var handleLogicChange = useCallback(function (logic) {
+    var updatedGroup = _objectSpread(_objectSpread({}, currentGroup), {}, {
+      logic: logic
+    });
+    dispatch({
+      type: 'UPDATE_RULE_GROUP',
+      payload: {
+        path: path,
+        group: updatedGroup
+      }
+    });
+    onChange === null || onChange === void 0 || onChange(updatedGroup);
+  }, [currentGroup, path, dispatch, onChange]);
+  var handleAddRule = useCallback(function () {
+    var newRule = createEmptyRule();
+    dispatch({
+      type: 'ADD_RULE',
+      payload: {
+        path: path,
+        rule: newRule
+      }
+    });
+    if (onChange) {
+      var updatedGroup = _objectSpread(_objectSpread({}, currentGroup), {}, {
+        rules: [].concat(_toConsumableArray(currentGroup.rules), [newRule])
+      });
+      onChange(updatedGroup);
+    }
+  }, [path, currentGroup, dispatch, onChange]);
+  var handleAddRuleGroup = useCallback(function () {
+    if (level >= maxLevel) {
+      message.warning("\u89C4\u5219\u7EC4\u5D4C\u5957\u5C42\u7EA7\u4E0D\u80FD\u8D85\u8FC7 ".concat(maxLevel, " \u5C42"));
+      return;
+    }
+    var newGroup = createEmptyRuleGroup();
+    dispatch({
+      type: 'ADD_RULE_GROUP',
+      payload: {
+        path: path,
+        group: newGroup
+      }
+    });
+    if (onChange) {
+      var updatedGroup = _objectSpread(_objectSpread({}, currentGroup), {}, {
+        groups: [].concat(_toConsumableArray(currentGroup.groups), [newGroup])
+      });
+      onChange(updatedGroup);
+    }
+  }, [level, maxLevel, path, currentGroup, dispatch, onChange]);
+  var handleDeleteGroup = useCallback(function () {
+    if (level === 0) {
+      message.warning('根规则组不能删除');
+      return;
+    }
+    dispatch({
+      type: 'DELETE_RULE_GROUP',
+      payload: {
+        path: path
+      }
+    });
+  }, [level, path, dispatch]);
+  var levelClass = "level".concat(level);
+  var logicClass = currentGroup.logic === 1 ? styles.orLogicGroup : '';
+  var className = "".concat(styles.ruleGroupEditor, " ").concat(styles[levelClass] || '', " ").concat(logicClass);
+  var marginLeft = level * 12; // 减小缩进
+
+  return /*#__PURE__*/_jsxs("div", {
+    className: className,
+    style: {
+      marginLeft: marginLeft
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.groupHeader,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: styles.groupTitle,
+        children: [/*#__PURE__*/_jsx(GroupOutlined, {
+          style: {
+            fontSize: '12px'
+          }
+        }), /*#__PURE__*/_jsxs("span", {
+          children: ["\u89C4\u5219\u7EC4 ", level]
+        }), /*#__PURE__*/_jsxs(Tag, {
+          color: currentGroup.logic === 0 ? 'blue' : 'orange',
+          style: {
+            marginLeft: '4px',
+            fontSize: '11px'
+          },
+          children: [currentGroup.rules.length, "\u6761\u89C4\u5219", currentGroup.groups.length > 0 && " + ".concat(currentGroup.groups.length, "\u7EC4")]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.groupActions,
+        children: [/*#__PURE__*/_jsx(LogicSelector, {
+          value: currentGroup.logic,
+          onChange: handleLogicChange,
+          disabled: readonly,
+          size: "small"
+        }), !readonly && level > 0 && /*#__PURE__*/_jsx(Button, {
+          type: "text",
+          danger: true,
+          size: "small",
+          icon: /*#__PURE__*/_jsx(DeleteOutlined, {}),
+          onClick: handleDeleteGroup,
+          title: "\u5220\u9664\u89C4\u5219\u7EC4"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.groupContent,
+      children: [currentGroup.rules.map(function (rule, ruleIndex) {
+        var rulePath = [].concat(_toConsumableArray(path), [ruleIndex]);
+        return /*#__PURE__*/_jsx(RuleCard, {
+          rule: rule,
+          path: rulePath,
+          readonly: readonly,
+          allowFieldComparison: allowFieldComparison
+        }, ruleIndex);
+      }), currentGroup.groups.length > 0 && /*#__PURE__*/_jsx("div", {
+        className: styles.nestedGroups,
+        children: currentGroup.groups.map(function (group, groupIndex) {
+          var groupPath = [].concat(_toConsumableArray(path), [groupIndex]);
+          return /*#__PURE__*/_jsx(RuleGroupEditor, {
+            path: groupPath,
+            level: level + 1,
+            maxLevel: maxLevel,
+            readonly: readonly,
+            allowFieldComparison: allowFieldComparison,
+            onChange: onChange
+          }, groupIndex);
+        })
+      }), currentGroup.rules.length === 0 && currentGroup.groups.length === 0 && /*#__PURE__*/_jsxs("div", {
+        className: styles.emptyState,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: styles.emptyIcon,
+          children: "\uD83D\uDCCB"
+        }), /*#__PURE__*/_jsx("div", {
+          className: styles.emptyText,
+          children: "\u6682\u65E0\u89C4\u5219"
+        })]
+      }), !readonly && /*#__PURE__*/_jsxs("div", {
+        className: styles.addButtonGroup,
+        children: [/*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          size: "small",
+          icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
+          onClick: handleAddRule,
+          children: "\u6DFB\u52A0\u89C4\u5219"
+        }), level < maxLevel && /*#__PURE__*/_jsx(Button, {
+          type: "default",
+          size: "small",
+          icon: /*#__PURE__*/_jsx(GroupOutlined, {}),
+          onClick: handleAddRuleGroup,
+          children: "\u6DFB\u52A0\u89C4\u5219\u7EC4"
+        })]
+      })]
+    })]
+  });
+};
+export default RuleGroupEditor;

package/dist/esm/RuleBuilder/constants/operators.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 操作符常量定义
+ */
+import { MatchOperator, FieldDataType } from '../types/index';
+/**
+ * 操作符显示信息
+ */
+export interface OperatorInfo {
+    value: MatchOperator;
+    label: string;
+    symbol: string;
+    description: string;
+    /** 是否需要输入值 */
+    requiresValue: boolean;
+    /** 是否需要第二个值（Between） */
+    requiresValue2: boolean;
+    /** 是否需要多个值（In/NotIn） */
+    requiresMultiValue: boolean;
+}
+/**
+ * 所有操作符的显示信息
+ */
+export declare const OPERATOR_INFO_MAP: Record<MatchOperator, OperatorInfo>;
+/**
+ * 根据数据类型获取可用操作符
+ */
+export declare const getOperatorsByDataType: (dataType: FieldDataType) => MatchOperator[];
+/**
+ * 获取操作符信息
+ */
+export declare const getOperatorInfo: (operator: MatchOperator) => OperatorInfo;
+/**
+ * 检查操作符是否需要值输入
+ */
+export declare const operatorRequiresValue: (operator: MatchOperator) => boolean;
+/**
+ * 检查操作符是否需要第二个值（Between）
+ */
+export declare const operatorRequiresValue2: (operator: MatchOperator) => boolean;
+/**
+ * 检查操作符是否需要多个值（In/NotIn）
+ */
+export declare const operatorRequiresMultiValue: (operator: MatchOperator) => boolean;
+/**
+ * 检查操作符是否支持与另一个字段比较（与后端 RuleGroupValidator 一致：等于、不等于及 4 个大小比较）
+ * @author nokecy
+ */
+export declare const operatorSupportsValueField: (operator: MatchOperator) => boolean;
+/**
+ * 最大嵌套层级
+ */
+export declare const MAX_NESTING_LEVEL = 5;