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

package/dist/esm/RuleBuilder/styles/index.module.less

@@ -0,0 +1,443 @@
+/**
+ * 规则构建器样式 - 生产环境紧凑版
+ * 适用于需要在一屏显示大量规则的企业生产环境
+ */
+
+// ===== 紧凑配置 =====
+@compactPadding: 8px;
+@compactMargin: 4px;
+@compactGap: 6px;
+@compactFontSize: 12px;
+@compactHeight: 24px;
+
+// ===== 颜色配置 =====
+@groupLevel1: #fafafa;
+@groupLevel2: #f5f5f5;
+@groupLevel3: #f0f0f0;
+@groupLevel4: #ebebeb;
+@groupLevel5: #e6e6e6;
+@andLogic: #1890ff;
+@orLogic: #fa8c16;
+@ruleCardBg: #ffffff;
+@borderColor: #d9d9d9;
+@borderColorLight: #e8e8e8;
+@shadowColor: rgba(0, 0, 0, 0.04);
+@hoverShadowColor: rgba(0, 0, 0, 0.08);
+@text-color: rgba(0, 0, 0, 0.85);
+@text-color-secondary: rgba(0, 0, 0, 0.45);
+
+// ===== 规则构建器容器 =====
+.ruleBuilderContainer {
+  padding: 0;
+  background: transparent;
+  border: none;
+  font-size: @compactFontSize;
+}
+
+// ===== 规则组编辑器 =====
+.ruleGroupEditor {
+  padding: @compactPadding;
+  margin-bottom: @compactGap;
+  border-radius: 4px;
+  border: 1px solid @borderColorLight;
+  box-shadow: 0 1px 2px @shadowColor;
+  transition: box-shadow 0.2s;
+
+  &:hover {
+    box-shadow: 0 2px 4px @hoverShadowColor;
+  }
+
+  // 根据层级设置不同背景色
+  &.level0 {
+    background: @groupLevel1;
+    border-left: 2px solid @andLogic;
+  }
+
+  &.level1 {
+    background: @groupLevel2;
+    border-left: 2px solid @andLogic;
+  }
+
+  &.level2 {
+    background: @groupLevel3;
+    border-left: 2px solid @andLogic;
+  }
+
+  &.level3 {
+    background: @groupLevel4;
+    border-left: 2px solid @andLogic;
+  }
+
+  &.level4 {
+    background: @groupLevel5;
+    border-left: 2px solid @andLogic;
+  }
+
+  // OR 逻辑使用橙色边框
+  &.orLogicGroup {
+    border-left-color: @orLogic;
+  }
+
+  // 规则组头部
+  .groupHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: @compactGap;
+    padding-bottom: 4px;
+    border-bottom: 1px solid @borderColorLight;
+
+    .groupTitle {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-weight: 500;
+      color: @text-color;
+      font-size: @compactFontSize;
+      line-height: @compactHeight;
+    }
+
+    .groupActions {
+      display: flex;
+      gap: 4px;
+    }
+  }
+
+  // 规则组内容
+  .groupContent {
+    display: flex;
+    flex-direction: column;
+    gap: @compactMargin;
+  }
+
+  // 嵌套规则组
+  .nestedGroups {
+    margin-top: @compactGap;
+    margin-left: @compactPadding;
+    padding-left: @compactPadding;
+    border-left: 1px dashed @borderColorLight;
+  }
+}
+
+// ===== 规则卡片 =====
+.ruleCard {
+  background: @ruleCardBg;
+  padding: 6px @compactPadding;
+  border-radius: 4px;
+  border: 1px solid @borderColorLight;
+  box-shadow: 0 1px 2px @shadowColor;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: @andLogic;
+    box-shadow: 0 2px 4px @hoverShadowColor;
+  }
+
+  .ruleContent {
+    display: flex;
+    align-items: center;
+    gap: @compactGap;
+    flex-wrap: nowrap;
+
+    .ruleField {
+      min-width: 120px;
+      flex: 1;
+    }
+
+    .ruleOperator {
+      min-width: 80px;
+      flex: 0.6;
+    }
+
+    .ruleValue {
+      min-width: 120px;
+      flex: 1.2;
+    }
+
+    .ruleValue2 {
+      min-width: 100px;
+      flex: 0.8;
+    }
+
+    .ruleActions {
+      display: flex;
+      gap: 2px;
+      margin-left: auto;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// ===== 逻辑选择器 =====
+.logicSelector {
+  display: inline-block;
+  margin-bottom: @compactGap;
+
+  :global(.ant-radio-group) {
+    display: flex;
+    gap: @compactGap;
+  }
+
+  :global(.ant-radio-button-wrapper) {
+    padding: 2px 12px;
+    min-width: 70px;
+    height: @compactHeight;
+    line-height: 20px;
+    border-radius: 4px;
+    font-size: @compactFontSize;
+    transition: all 0.2s;
+
+    &:hover {
+      box-shadow: 0 1px 3px @shadowColor;
+    }
+  }
+
+  .logicLabel {
+    font-weight: 500;
+    font-size: @compactFontSize;
+  }
+
+  .logicDescription {
+    display: none; // 紧凑模式隐藏描述
+  }
+
+  // AND 逻辑样式
+  .andLogic {
+    color: @andLogic;
+  }
+
+  .andLogicActive {
+    background: @andLogic;
+    border-color: @andLogic;
+    color: #ffffff;
+  }
+
+  // OR 逻辑样式
+  .orLogic {
+    color: @orLogic;
+  }
+
+  .orLogicActive {
+    background: @orLogic;
+    border-color: @orLogic;
+    color: #ffffff;
+  }
+}
+
+// ===== 添加按钮组 =====
+.addButtonGroup {
+  display: flex;
+  gap: @compactGap;
+  margin-top: @compactGap;
+  padding-top: @compactGap;
+  border-top: 1px dashed @borderColorLight;
+
+  :global(.ant-btn) {
+    height: @compactHeight;
+    padding: 0 8px;
+    font-size: @compactFontSize;
+    line-height: 22px;
+  }
+
+  :global(.ant-btn-primary) {
+    box-shadow: 0 1px 2px rgba(24, 144, 255, 0.2);
+
+    &:hover {
+      box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
+    }
+  }
+
+  :global(.ant-btn-default) {
+    &:hover {
+      border-color: @andLogic;
+      color: @andLogic;
+    }
+  }
+}
+
+// ===== 空状态 =====
+.emptyState {
+  text-align: center;
+  padding: 20px 16px;
+  color: @text-color-secondary;
+  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
+  border-radius: 4px;
+  border: 1px dashed @borderColorLight;
+
+  .emptyIcon {
+    font-size: 32px;
+    margin-bottom: 8px;
+    opacity: 0.6;
+  }
+
+  .emptyText {
+    font-size: @compactFontSize;
+    margin-bottom: 0;
+    line-height: 1.5;
+  }
+}
+
+// ===== JSON 预览 =====
+.jsonPreview {
+  margin-top: 16px;
+  padding: @compactPadding;
+  background: #fafafa;
+  border-radius: 4px;
+  border: 1px solid @borderColorLight;
+
+  .previewTitle {
+    font-weight: 500;
+    margin-bottom: @compactGap;
+    color: @text-color;
+    font-size: @compactFontSize;
+  }
+
+  .previewContent {
+    max-height: 300px;
+    overflow-y: auto;
+    background: #ffffff;
+    padding: @compactPadding;
+    border-radius: 4px;
+    border: 1px solid @borderColorLight;
+
+    pre {
+      margin: 0;
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 11px;
+      line-height: 1.5;
+    }
+  }
+}
+
+// ===== 验证错误提示 =====
+.validationErrors {
+  margin-top: @compactPadding;
+  padding: @compactPadding;
+  background: #fff2e8;
+  border-radius: 4px;
+  border: 1px solid #ffbb96;
+
+  .errorTitle {
+    font-weight: 500;
+    color: #d4380d;
+    margin-bottom: 4px;
+    font-size: @compactFontSize;
+  }
+
+  .errorList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .errorItem {
+      padding: 2px 0;
+      color: #d4380d;
+      font-size: 11px;
+
+      &:before {
+        content: '• ';
+        margin-right: 4px;
+      }
+    }
+  }
+}
+
+// ===== 响应式设计 =====
+@media (max-width: 768px) {
+  .ruleCard {
+    .ruleContent {
+      flex-wrap: wrap;
+
+      .ruleField,
+      .ruleOperator,
+      .ruleValue,
+      .ruleValue2 {
+        min-width: calc(50% - 3px);
+      }
+
+      .ruleActions {
+        margin-left: 0;
+        width: 100%;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+
+// ===== 全局紧凑样式覆盖 =====
+:global {
+  .ruleBuilderContainer {
+    // 确保所有表单组件使用小尺寸
+    .ant-select,
+    .ant-input,
+    .ant-input-number {
+      font-size: @compactFontSize;
+
+      &-sm {
+        height: @compactHeight;
+        line-height: @compactHeight;
+      }
+    }
+
+    .ant-select-sm {
+      .ant-select-content {
+        height: @compactHeight;
+        padding: 0 7px;
+        font-size: @compactFontSize;
+      }
+
+      .ant-select-selection-item {
+        line-height: 22px;
+      }
+    }
+
+    .ant-input-sm {
+      height: @compactHeight;
+      padding: 0 7px;
+      font-size: @compactFontSize;
+    }
+
+    .ant-input-number-sm {
+      height: @compactHeight;
+      font-size: @compactFontSize;
+
+      .ant-input-number-input {
+        height: 22px;
+        padding: 0 7px;
+      }
+    }
+
+    .ant-btn-sm {
+      height: @compactHeight;
+      padding: 0 7px;
+      font-size: @compactFontSize;
+      line-height: 22px;
+
+      &.ant-btn-icon-only {
+        width: @compactHeight;
+        padding: 0;
+      }
+    }
+  }
+}
+
+// ===== 打印样式 =====
+@media print {
+  .ruleBuilderContainer {
+    border: none;
+    box-shadow: none;
+  }
+
+  .ruleGroupEditor,
+  .ruleCard {
+    break-inside: avoid;
+    box-shadow: none;
+  }
+
+  .groupActions,
+  .ruleActions,
+  .addButtonGroup {
+    display: none;
+  }
+}

package/dist/esm/RuleBuilder/styles/index.module.less.d.ts

@@ -0,0 +1,43 @@
+// TypeScript declaration for CSS modules
+declare const styles: {
+  readonly ruleBuilderContainer: string;
+  readonly ruleGroupEditor: string;
+  readonly level0: string;
+  readonly level1: string;
+  readonly level2: string;
+  readonly level3: string;
+  readonly level4: string;
+  readonly orLogicGroup: string;
+  readonly groupHeader: string;
+  readonly groupTitle: string;
+  readonly groupActions: string;
+  readonly groupContent: string;
+  readonly nestedGroups: string;
+  readonly ruleCard: string;
+  readonly ruleContent: string;
+  readonly ruleField: string;
+  readonly ruleOperator: string;
+  readonly ruleValue: string;
+  readonly ruleValue2: string;
+  readonly ruleActions: string;
+  readonly logicSelector: string;
+  readonly logicLabel: string;
+  readonly logicDescription: string;
+  readonly andLogic: string;
+  readonly andLogicActive: string;
+  readonly orLogic: string;
+  readonly orLogicActive: string;
+  readonly addButtonGroup: string;
+  readonly emptyState: string;
+  readonly emptyIcon: string;
+  readonly emptyText: string;
+  readonly jsonPreview: string;
+  readonly previewTitle: string;
+  readonly previewContent: string;
+  readonly validationErrors: string;
+  readonly errorTitle: string;
+  readonly errorList: string;
+  readonly errorItem: string;
+};
+
+export default styles;

package/dist/esm/RuleBuilder/types/index.d.ts

@@ -0,0 +1,244 @@
+/**
+ * 规则构建器类型定义
+ *
+ * ⚠️ 重要：与后端定义完全一致
+ * - 后端 Domain: Burn.Abp.RuleEngine.Domain.Shared (Rule, RuleGroup)
+ * - 后端 DTO: Burn.Abp.LabelManagement.Application.Contracts.RuleEngine (RuleDto, RuleGroupDto)
+ *
+ * JSON 序列化属性名：
+ * - fieldName (不是 FieldName)
+ * - operator (不是 Operator)
+ * - value, value2, valueField
+ * - logic, rules, groups
+ */
+/**
+ * 操作符显示信息
+ */
+export interface OperatorInfo {
+    value: MatchOperator;
+    label: string;
+    symbol: string;
+    description: string;
+    /** 是否需要输入值 */
+    requiresValue: boolean;
+    /** 是否需要第二个值（Between） */
+    requiresValue2: boolean;
+    /** 是否需要多个值（In/NotIn） */
+    requiresMultiValue: boolean;
+}
+/**
+ * 匹配操作符枚举
+ *
+ * 对应后端: Burn.Abp.RuleEngine.Domain.Shared.MatchOperator
+ */
+export declare enum MatchOperator {
+    /** 等于 (=) */
+    Equals = 0,
+    /** 不等于 (!=) */
+    NotEquals = 1,
+    /** 大于 (>) */
+    GreaterThan = 2,
+    /** 大于等于 (>=) */
+    GreaterThanOrEqual = 3,
+    /** 小于 (<) */
+    LessThan = 4,
+    /** 小于等于 (<=) */
+    LessThanOrEqual = 5,
+    /** 包含于 (IN) */
+    In = 6,
+    /** 不包含于 (NOT IN) */
+    NotIn = 7,
+    /** 区间 (BETWEEN) */
+    Between = 8,
+    /** 模糊匹配 (LIKE) */
+    Like = 9,
+    /** 为空 (IS NULL) */
+    IsNull = 10,
+    /** 不为空 (IS NOT NULL) */
+    IsNotNull = 11
+}
+/**
+ * 逻辑连接符枚举（与后端保持一致）
+ */
+export declare enum MatchLogic {
+    /** 逻辑与（所有条件都满足） */
+    And = 0,
+    /** 逻辑或（任一条件满足） */
+    Or = 1
+}
+/**
+ * 规则 DTO（与后端保持一致）
+ */
+export interface RuleDto {
+    /** 字段名称 */
+    fieldName: string;
+    /** 匹配操作符 */
+    operator: MatchOperator;
+    /** 匹配值 */
+    value?: any;
+    /** 第二个值（用于 Between 操作符） */
+    value2?: any;
+    /**
+     * 比较字段：与另一个字段的值比较，与 value 互斥，仅 6 个比较操作符可用。
+     * undefined 为固定值模式；空字符串表示已切到字段模式但尚未选择。
+     * @author nokecy
+     */
+    valueField?: string;
+}
+/**
+ * 规则组 DTO（与后端保持一致）
+ */
+export interface RuleGroupDto {
+    /** 逻辑关系 (And/Or) */
+    logic: MatchLogic;
+    /** 规则列表 */
+    rules: RuleDto[];
+    /** 嵌套规则组列表 */
+    groups: RuleGroupDto[];
+}
+/**
+ * 字段数据类型
+ */
+export type FieldDataType = 'string' | 'number' | 'date' | 'boolean';
+/**
+ * 字段定义
+ */
+export interface FieldDefinition {
+    /** 字段名（与后端字段名对应） */
+    name: string;
+    /** 显示名称（UI 展示） */
+    displayName: string;
+    /** 数据类型 */
+    dataType: FieldDataType;
+    /** 字段说明 */
+    description?: string;
+    /** 允许的操作符（如不指定则根据数据类型自动过滤） */
+    allowedOperators?: MatchOperator[];
+}
+/**
+ * 验证错误
+ */
+export interface ValidationError {
+    /** 错误位置路径 */
+    path: number[];
+    /** 错误信息 */
+    message: string;
+    /** 相关字段 */
+    field?: string;
+}
+/**
+ * 验证结果
+ */
+export interface ValidationResult {
+    /** 是否有效 */
+    isValid: boolean;
+    /** 错误列表 */
+    errors: ValidationError[];
+    /** 警告列表 */
+    warnings: ValidationError[];
+}
+/**
+ * 规则构建器配置
+ */
+export interface RuleBuilderConfig {
+    /** 静态字段定义 */
+    staticFields?: FieldDefinition[];
+    /** 动态字段 API 端点 */
+    fieldsApiUrl?: string;
+    /** 最大嵌套层级（默认 5） */
+    maxNestingLevel?: number;
+    /** 是否显示 JSON 预览 */
+    showJsonPreview?: boolean;
+    /**
+     * 是否允许规则与另一个字段比较（valueField）。
+     * 需要后端规则引擎与调用方的格式转换都支持 valueField 才能开启，默认关闭。
+     * @author nokecy
+     */
+    allowFieldComparison?: boolean;
+    /** 自定义验证器 */
+    validator?: (rule: RuleGroupDto) => ValidationResult;
+}
+/**
+ * 规则构建器 Props
+ */
+export interface RuleBuilderProps {
+    /** 初始规则（编辑模式） */
+    value?: RuleGroupDto | null;
+    /** 值变更回调 */
+    onChange?: (rule: RuleGroupDto | null) => void;
+    /** 配置 */
+    config?: RuleBuilderConfig;
+    /** 是否只读 */
+    readonly?: boolean;
+}
+/**
+ * 规则路径（用于定位嵌套规则）
+ */
+export type RulePath = number[];
+/**
+ * 规则构建器内部状态
+ */
+export interface RuleBuilderState {
+    /** 当前规则组 */
+    ruleGroup: RuleGroupDto;
+    /** 字段定义列表 */
+    fields: FieldDefinition[];
+    /** 是否加载中 */
+    loading: boolean;
+    /** 验证结果 */
+    validationResult: ValidationResult;
+    /** 是否已修改 */
+    isDirty: boolean;
+}
+/**
+ * 规则构建器 Action
+ */
+export type RuleBuilderAction = {
+    type: 'SET_RULE_GROUP';
+    payload: RuleGroupDto;
+} | {
+    type: 'SET_FIELDS';
+    payload: FieldDefinition[];
+} | {
+    type: 'SET_LOADING';
+    payload: boolean;
+} | {
+    type: 'UPDATE_RULE';
+    payload: {
+        path: RulePath;
+        rule: RuleDto;
+    };
+} | {
+    type: 'DELETE_RULE';
+    payload: {
+        path: RulePath;
+    };
+} | {
+    type: 'ADD_RULE';
+    payload: {
+        path: RulePath;
+        rule: RuleDto;
+    };
+} | {
+    type: 'UPDATE_RULE_GROUP';
+    payload: {
+        path: RulePath;
+        group: RuleGroupDto;
+    };
+} | {
+    type: 'DELETE_RULE_GROUP';
+    payload: {
+        path: RulePath;
+    };
+} | {
+    type: 'ADD_RULE_GROUP';
+    payload: {
+        path: RulePath;
+        group: RuleGroupDto;
+    };
+} | {
+    type: 'SET_VALIDATION_RESULT';
+    payload: ValidationResult;
+} | {
+    type: 'RESET';
+};