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

package/dist/esm/RuleBuilder/inputs/SingleValueInput.js

@@ -0,0 +1,75 @@
+/**
+ * 单值输入组件
+ *
+ * 根据字段数据类型渲染对应的输入控件：
+ * - string: Input
+ * - number: InputNumber
+ * - date: DatePicker
+ * - boolean: Switch
+ */
+
+import React from 'react';
+import { Input, InputNumber, DatePicker, Switch } from 'antd';
+import dayjs from 'dayjs';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SingleValueInput = function SingleValueInput(_ref) {
+  var value = _ref.value,
+    _onChange = _ref.onChange,
+    dataType = _ref.dataType,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size;
+  // 根据数据类型渲染不同的输入组件
+  switch (dataType) {
+    case 'string':
+      return /*#__PURE__*/_jsx(Input, {
+        value: value,
+        onChange: function onChange(e) {
+          return _onChange(e.target.value);
+        },
+        disabled: disabled,
+        size: size,
+        placeholder: "\u8BF7\u8F93\u5165\u503C",
+        style: {
+          width: 200
+        }
+      });
+    case 'number':
+      return /*#__PURE__*/_jsx(InputNumber, {
+        value: value,
+        onChange: _onChange,
+        disabled: disabled,
+        size: size,
+        placeholder: "\u8BF7\u8F93\u5165\u6570\u503C",
+        style: {
+          width: 200
+        }
+      });
+    case 'date':
+      return /*#__PURE__*/_jsx(DatePicker, {
+        value: value ? dayjs(value) : null,
+        onChange: function onChange(date) {
+          return _onChange(date === null || date === void 0 ? void 0 : date.format('YYYY-MM-DD'));
+        },
+        disabled: disabled,
+        size: size,
+        placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F",
+        style: {
+          width: 200
+        }
+      });
+    case 'boolean':
+      return /*#__PURE__*/_jsx(Switch, {
+        checked: value,
+        onChange: _onChange,
+        disabled: disabled,
+        size: size === 'small' ? 'small' : 'default',
+        checkedChildren: "\u662F",
+        unCheckedChildren: "\u5426"
+      });
+    default:
+      return null;
+  }
+};
+export default SingleValueInput;

package/dist/esm/RuleBuilder/inputs/ValueInput.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 值输入分发组件
+ *
+ * 根据操作符类型自动选择合适的输入组件：
+ * - IsNull/IsNotNull: 不渲染任何输入
+ * - Between: 渲染 BetweenValueInput
+ * - In/NotIn: 渲染 MultiValueInput
+ * - 其他: 渲染 SingleValueInput；允许比较字段时前置「固定值 / 字段」切换
+ */
+import React from 'react';
+import type { MatchOperator, FieldDataType, FieldDefinition } from '../types/index';
+export interface ValueInputProps {
+    /** 操作符 */
+    operator: MatchOperator;
+    /** 字段数据类型 */
+    dataType: FieldDataType;
+    /** 主值 */
+    value: any;
+    /** 第二个值（用于 Between） */
+    value2?: any;
+    /** 值变更回调 */
+    onChange: (value: any, value2?: any) => void;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 尺寸 */
+    size?: 'small' | 'middle' | 'large';
+    /** 比较字段（undefined 为固定值模式） @author nokecy */
+    valueField?: string;
+    /** 比较字段变更回调；不传则不提供「字段」模式 @author nokecy */
+    onValueFieldChange?: (valueField: string | undefined) => void;
+    /** 可供比较的字段列表 @author nokecy */
+    fields?: FieldDefinition[];
+    /** 当前规则的字段名（比较字段中排除自身） @author nokecy */
+    fieldName?: string;
+}
+export declare const ValueInput: React.FC<ValueInputProps>;
+export default ValueInput;

package/dist/esm/RuleBuilder/inputs/ValueInput.js

@@ -0,0 +1,127 @@
+/**
+ * 值输入分发组件
+ *
+ * 根据操作符类型自动选择合适的输入组件：
+ * - IsNull/IsNotNull: 不渲染任何输入
+ * - Between: 渲染 BetweenValueInput
+ * - In/NotIn: 渲染 MultiValueInput
+ * - 其他: 渲染 SingleValueInput；允许比较字段时前置「固定值 / 字段」切换
+ */
+
+import React from 'react';
+import { Segmented, Select, Space } from 'antd';
+import { operatorRequiresValue, operatorRequiresValue2, operatorRequiresMultiValue, operatorSupportsValueField } from "../constants/operators";
+import SingleValueInput from "./SingleValueInput";
+import BetweenValueInput from "./BetweenValueInput";
+import MultiValueInput from "./MultiValueInput";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ValueInput = function ValueInput(_ref) {
+  var operator = _ref.operator,
+    dataType = _ref.dataType,
+    value = _ref.value,
+    value2 = _ref.value2,
+    _onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    valueField = _ref.valueField,
+    onValueFieldChange = _ref.onValueFieldChange,
+    _ref$fields = _ref.fields,
+    fields = _ref$fields === void 0 ? [] : _ref$fields,
+    fieldName = _ref.fieldName;
+  // 不需要值输入的操作符（IsNull/IsNotNull）
+  if (!operatorRequiresValue(operator) && !operatorRequiresValue2(operator) && !operatorRequiresMultiValue(operator)) {
+    return null;
+  }
+
+  // Between 操作符：渲染区间输入
+  if (operatorRequiresValue2(operator)) {
+    if (dataType !== 'number' && dataType !== 'date') {
+      return null; // Between 只支持数值和日期
+    }
+    return /*#__PURE__*/_jsx(BetweenValueInput, {
+      value: value,
+      value2: value2,
+      onChange: _onChange,
+      dataType: dataType,
+      disabled: disabled,
+      size: size
+    });
+  }
+
+  // In/NotIn 操作符：渲染多值输入
+  if (operatorRequiresMultiValue(operator)) {
+    if (dataType !== 'string' && dataType !== 'number') {
+      return null; // In/NotIn 只支持字符串和数值
+    }
+    return /*#__PURE__*/_jsx(MultiValueInput, {
+      values: Array.isArray(value) ? value : [],
+      onChange: function onChange(values) {
+        return _onChange(values);
+      },
+      dataType: dataType,
+      disabled: disabled,
+      size: size
+    });
+  }
+  var singleValueInput = /*#__PURE__*/_jsx(SingleValueInput, {
+    value: value,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    },
+    dataType: dataType,
+    disabled: disabled,
+    size: size
+  });
+
+  // 其他操作符：渲染单值输入
+  if (!onValueFieldChange || !operatorSupportsValueField(operator)) {
+    return singleValueInput;
+  }
+
+  // 比较类操作符：可切换为与同类型的另一个字段比较。@author nokecy
+  var isFieldMode = valueField !== undefined;
+  return /*#__PURE__*/_jsxs(Space, {
+    size: 4,
+    children: [/*#__PURE__*/_jsx(Segmented, {
+      size: size,
+      value: isFieldMode ? 'field' : 'value',
+      disabled: disabled,
+      options: [{
+        label: '固定值',
+        value: 'value'
+      }, {
+        label: '字段',
+        value: 'field'
+      }],
+      onChange: function onChange(mode) {
+        return onValueFieldChange(mode === 'field' ? '' : undefined);
+      }
+    }), isFieldMode ? /*#__PURE__*/_jsx(Select, {
+      value: valueField || undefined,
+      onChange: function onChange(name) {
+        return onValueFieldChange(name);
+      },
+      placeholder: "\u8BF7\u9009\u62E9\u6BD4\u8F83\u5B57\u6BB5",
+      disabled: disabled,
+      size: size,
+      showSearch: true,
+      optionFilterProp: "label",
+      style: {
+        width: 200
+      },
+      options: fields.filter(function (field) {
+        return field.dataType === dataType && field.name !== fieldName;
+      }).map(function (field) {
+        return {
+          value: field.name,
+          label: field.displayName,
+          title: field.description
+        };
+      })
+    }) : singleValueInput]
+  });
+};
+export default ValueInput;

package/dist/esm/RuleBuilder/selectors/FieldSelector.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 字段选择器组件
+ * 用于选择规则匹配的字段
+ */
+import React from 'react';
+import type { FieldDefinition } from '../types/index';
+export interface FieldSelectorProps {
+    /** 当前选中的字段名 */
+    value?: string;
+    /** 值变更回调 */
+    onChange?: (fieldName: string) => void;
+    /** 字段定义列表 */
+    fields: FieldDefinition[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 尺寸 */
+    size?: 'small' | 'middle' | 'large';
+}
+/**
+ * 字段选择器
+ */
+export declare const FieldSelector: React.FC<FieldSelectorProps>;

package/dist/esm/RuleBuilder/selectors/FieldSelector.js

@@ -0,0 +1,39 @@
+/**
+ * 字段选择器组件
+ * 用于选择规则匹配的字段
+ */
+
+import React from 'react';
+import { Select } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 字段选择器
+ */
+export var FieldSelector = function FieldSelector(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    fields = _ref.fields,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size;
+  return /*#__PURE__*/_jsx(Select, {
+    value: value,
+    onChange: onChange,
+    placeholder: "\u8BF7\u9009\u62E9\u5B57\u6BB5",
+    disabled: disabled,
+    size: size,
+    showSearch: true,
+    optionFilterProp: "label",
+    style: {
+      width: '100%'
+    },
+    options: fields.map(function (field) {
+      return {
+        value: field.name,
+        label: field.displayName,
+        title: field.description // 鼠标悬停时显示字段说明
+      };
+    })
+  });
+};

package/dist/esm/RuleBuilder/selectors/OperatorSelector.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 操作符选择器组件
+ * 根据字段数据类型动态显示可用的操作符
+ */
+import React from 'react';
+import type { MatchOperator, FieldDataType } from '../types/index';
+export interface OperatorSelectorProps {
+    /** 当前选中的操作符 */
+    value?: MatchOperator;
+    /** 值变更回调 */
+    onChange?: (operator: MatchOperator) => void;
+    /** 字段数据类型（用于过滤可用操作符） */
+    dataType?: FieldDataType;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 尺寸 */
+    size?: 'small' | 'middle' | 'large';
+}
+/**
+ * 操作符选择器
+ */
+export declare const OperatorSelector: React.FC<OperatorSelectorProps>;

package/dist/esm/RuleBuilder/selectors/OperatorSelector.js

@@ -0,0 +1,49 @@
+/**
+ * 操作符选择器组件
+ * 根据字段数据类型动态显示可用的操作符
+ */
+
+import React from 'react';
+import { Select } from 'antd';
+import { getOperatorsByDataType, getOperatorInfo, OPERATOR_INFO_MAP } from "../constants/operators";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 操作符选择器
+ */
+export var OperatorSelector = function OperatorSelector(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    dataType = _ref.dataType,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size;
+  // 根据数据类型获取可用操作符
+  var availableOperators = dataType ? getOperatorsByDataType(dataType) : Object.keys(OPERATOR_INFO_MAP).map(Number);
+  return /*#__PURE__*/_jsx(Select, {
+    value: value,
+    onChange: onChange,
+    placeholder: "\u8BF7\u9009\u62E9\u64CD\u4F5C\u7B26",
+    disabled: disabled,
+    size: size,
+    style: {
+      width: '100%'
+    },
+    options: availableOperators.map(function (operator) {
+      var info = getOperatorInfo(operator);
+      return {
+        value: operator,
+        label: /*#__PURE__*/_jsxs("span", {
+          children: [info.label, " ", /*#__PURE__*/_jsxs("span", {
+            style: {
+              color: '#999'
+            },
+            children: ["(", info.symbol, ")"]
+          })]
+        }),
+        title: info.description // 鼠标悬停时显示操作符说明
+      };
+    })
+  });
+};