@nokecy/qc-ui 1.1.37 → 1.1.39

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

@@ -1,443 +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-selector {
-        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;
-  }
-}
+/**
+ * 规则构建器样式 - 生产环境紧凑版
+ * 适用于需要在一屏显示大量规则的企业生产环境
+ */
+
+// ===== 紧凑配置 =====
+@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-selector {
+        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;
+  }
+}