dcp-design-react 1.12.3 → 1.12.5

package/lib/pivot-grid/style/grid-layout.less

@@ -1,409 +1,501 @@
-/*
- * @Author: 焦质晔
- * @Date: 2022-03-16 19:05:30
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2025-01-12 14:23:51
- */
-@import '../../style/common';
-
-.@{prefix-pivot-grid}__layout {
-  .reset-container();
-  width: 100%;
-
-  // =========== 变量 ===========
-  @header-bg-color: #d7f0ff;
-  @border-radius: 8px;
-  .bor-radius-left() {
-    border-top-left-radius: @border-radius;
-    border-bottom-left-radius: @border-radius;
-  }
-  .bor-radius-right() {
-    border-top-right-radius: @border-radius;
-    border-bottom-right-radius: @border-radius;
-  }
-  .bor-left-shadow() {
-    box-shadow: -5px 0px 0 0px @--background-color-light;
-  }
-  .bor-right-shadow() {
-    box-shadow: 5px 0px 0 0px @--background-color-light;
-  }
-  // =========== 变量 END ===========
-
-  .@{qm-prefix}-scrollbar__wrap {
-    // 调整为 flex 布局
-    display: flex;
-    flex-wrap: nowrap;
-    & > div {
-      height: fit-content;
-    }
-  }
-  .header,
-  .footer {
-    display: flex;
-    flex-direction: row;
-    .fixed-left {
-      position: sticky;
-      left: 0;
-      z-index: 1;
-      display: flex;
-      border-left: 1px solid @--border-color-secondary;
-      border-bottom: 1px solid @--border-color-secondary;
-      .bor-left-shadow();
-      &,
-      .table-cell:first-child {
-        .bor-radius-left();
-      }
-    }
-    .no-fixed {
-      flex: 1 0;
-      display: flex;
-      border-bottom: 1px solid @--border-color-secondary;
-      .bor-right-shadow();
-      &,
-      .table-cell:last-child {
-        .bor-radius-right();
-      }
-    }
-  }
-  .header {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    .table-cell {
-      position: relative;
-      background-color: @header-bg-color !important;
-      cursor: pointer;
-    }
-    .resize-bar {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: -3px;
-      width: 6px;
-      z-index: 2;
-      cursor: col-resize;
-    }
-  }
-  .body {
-    display: flex;
-    flex-direction: row;
-    min-height: fit-content;
-  }
-  .footer {
-    position: sticky;
-    bottom: 0;
-    z-index: 2;
-  }
-  .header,
-  .body,
-  .footer {
-    .table-cell {
-      align-self: stretch; // 子元素高度和父元素一致
-      display: inline-flex;
-      align-items: center;
-      border-top: 1px solid @--border-color-secondary;
-      border-right: 1px solid @--border-color-secondary;
-      background-color: #fff;
-      &.selection-column {
-        justify-content: center;
-        border-right-color: transparent;
-      }
-      .action {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        .drag-icon,
-        .expand-icon {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 20px;
-          height: 20px;
-          color: @--text-color-placeholder;
-          visibility: hidden;
-        }
-        .expand-icon:hover {
-          color: @--primary-color;
-        }
-        .middle {
-          text-align: center;
-          width: 16px;
-          margin: 0 2px;
-          .order {
-            display: inline-block;
-          }
-          .checkbox {
-            display: none;
-          }
-        }
-      }
-      &.col--center {
-        text-align: center;
-        justify-content: center;
-      }
-      &.col--right {
-        text-align: right;
-        justify-content: flex-end;
-      }
-      &.col--fix-left {
-        position: sticky;
-        z-index: 1;
-      }
-      &.col--checked {
-        background-color: @--primary-1;
-      }
-      &.active {
-        box-shadow: inset 0 0 0 2px @--primary-color;
-        background-color: rgba(255, 235, 140, 1);
-      }
-      .cell {
-        .text-overflow-cut();
-        padding: 0 @--padding-sm;
-      }
-    }
-    .label-cell,
-    .table-cell {
-      &:hover {
-        .count-select {
-          visibility: visible;
-        }
-      }
-    }
-    .count-select {
-      .text-overflow-cut();
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-end;
-      height: 100%;
-      width: 100%;
-      padding: 0 @--padding-sm;
-      color: @--text-color-placeholder;
-      cursor: pointer;
-      visibility: hidden;
-      &:hover,
-      &.ant-dropdown-open {
-        visibility: visible;
-        background-color: @--background-color-light;
-      }
-      &.show {
-        visibility: visible;
-      }
-      .icon {
-        margin-left: 4px;
-      }
-    }
-  }
-  .resize-line {
-    position: absolute;
-    left: -2px;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: @--primary-color;
-    cursor: col-resize;
-    z-index: 2;
-  }
-  .fixed-line {
-    position: absolute;
-    left: -1px;
-    top: 0;
-    width: 0;
-    height: 100%;
-    border-left: 1px solid @--primary-3;
-    z-index: 2;
-    pointer-events: none;
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: -1px;
-      width: 20px;
-      transform: translateX(100%);
-      transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
-      pointer-events: none;
-    }
-    &.active {
-      &::after {
-        box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
-      }
-    }
-  }
-  // 左侧面板
-  .left-panel {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    .group-label {
-      border-right: 0 !important;
-      .bor-radius-left();
-      &.level0 {
-        .bor-left-shadow();
-      }
-    }
-    .row-item {
-      &:nth-of-type(1) {
-        border-top-left-radius: @border-radius;
-        .bor-left-shadow();
-        .table-cell:first-child {
-          border-top-left-radius: @border-radius;
-        }
-      }
-      &.last {
-        border-bottom-left-radius: @border-radius;
-        .table-cell:first-child {
-          border-bottom-left-radius: @border-radius;
-        }
-      }
-    }
-    .no-group {
-      .row-item:last-child {
-        .bor-left-shadow();
-      }
-    }
-  }
-  .main-panel {
-    flex: 1 0;
-    z-index: 0;
-    .group-label,
-    .row-item {
-      border-left: 0 !important;
-    }
-    .group-label {
-      .bor-radius-right();
-    }
-    .row-item {
-      &:nth-of-type(1) {
-        border-top-right-radius: @border-radius;
-        .table-cell:last-child {
-          border-top-right-radius: @border-radius;
-        }
-      }
-      &.last {
-        border-bottom-right-radius: @border-radius;
-        .table-cell:last-child {
-          border-bottom-right-radius: @border-radius;
-        }
-      }
-    }
-  }
-  .container {
-    position: relative;
-    left: 0;
-    top: 0;
-    .group-label {
-      position: absolute;
-      border: 1px solid @--border-color-secondary;
-      background-color: #fff;
-      .label-row {
-        display: flex;
-        align-items: center;
-      }
-      .label-cell {
-        align-self: stretch;
-        display: inline-flex;
-        align-items: center;
-        &.expandable-column {
-          justify-content: center;
-          .button-icon {
-            & > .anticon {
-              transition: transform 0.3s ease;
-            }
-            &.expand > .anticon {
-              transform: rotate(90deg);
-            }
-          }
-        }
-        &.col--fix-left {
-          position: sticky;
-          z-index: 1;
-        }
-        .title {
-          flex-shrink: 0;
-          margin-right: 20px;
-          font-weight: 600;
-          .empty {
-            color: @--text-color-placeholder;
-            font-weight: 400;
-          }
-        }
-      }
-    }
-    .row-item {
-      position: absolute;
-      border-left: 1px solid @--border-color-secondary;
-      &.last {
-        .table-cell {
-          border-bottom: 1px solid @--border-color-secondary;
-        }
-      }
-      .table-row {
-        display: flex;
-        align-items: center;
-        height: inherit;
-        &.row--hover,
-        &.row--selection {
-          .table-cell {
-            background-color: @--background-color-light;
-            .middle&:has(.checkbox) {
-              .order {
-                display: none;
-              }
-              .checkbox {
-                display: inline-flex;
-              }
-            }
-          }
-        }
-        &.row--highlight {
-          .table-cell {
-            background-color: @--primary-1;
-          }
-        }
-        &.row--hover {
-          .table-cell {
-            .drag-icon,
-            .expand-icon {
-              visibility: visible;
-            }
-          }
-        }
-        .cell--expand {
-          display: inline-flex;
-          padding: 4px;
-          font-size: 13px;
-          color: @--text-color-placeholder;
-          cursor: pointer;
-          transform: scaleX(1.15);
-          transition: transform 0.3s ease;
-          &.fold {
-            transform: rotate(-90deg);
-          }
-          &.disabled {
-            color: @--disabled-color;
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
-  }
-  // size
-  &.small {
-    .label-row,
-    .table-cell {
-      height: 26px;
-    }
-  }
-  &.middle {
-    .label-row,
-    .table-cell {
-      height: 34px;
-    }
-  }
-  &.large {
-    .label-row,
-    .table-cell {
-      height: 42px;
-    }
-  }
-}
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-03-16 19:05:30
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2025-01-12 14:23:51
+ */
+@import '../../style/common';
+
+.@{prefix-pivot-grid}__layout {
+  .reset-container();
+  width: 100%;
+
+  &.col-resize {
+    cursor: col-resize;
+    .qm-scrollbar__view {
+      pointer-events: none;
+    }
+  }
+
+  // =========== 变量 ===========
+  @header-bg-color: #d7f0ff;
+  @border-radius: 8px;
+  .bor-radius-left() {
+    border-top-left-radius: @border-radius;
+    border-bottom-left-radius: @border-radius;
+  }
+  .bor-radius-right() {
+    border-top-right-radius: @border-radius;
+    border-bottom-right-radius: @border-radius;
+  }
+  .bor-left-shadow() {
+    box-shadow: -5px 0px 0 0px @--background-color-light;
+  }
+  .bor-right-shadow() {
+    box-shadow: 5px 0px 0 0px @--background-color-light;
+  }
+  // =========== 变量 END ===========
+
+  .@{qm-prefix}-scrollbar__wrap {
+    // 调整为 flex 布局
+    display: flex;
+    flex-wrap: nowrap;
+    & > div {
+      height: fit-content;
+    }
+  }
+  .header,
+  .footer {
+    display: flex;
+    flex-direction: row;
+    .fixed-left {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+      display: flex;
+      border-left: 1px solid @--border-color-secondary;
+      border-bottom: 1px solid @--border-color-secondary;
+      .bor-left-shadow();
+      &,
+      .table-cell:first-child {
+        .bor-radius-left();
+      }
+    }
+    .no-fixed {
+      flex: 1 0;
+      display: flex;
+      border-bottom: 1px solid @--border-color-secondary;
+      .bor-right-shadow();
+      &,
+      .table-cell:last-child {
+        .bor-radius-right();
+      }
+    }
+  }
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    .table-cell {
+      position: relative;
+      background-color: @header-bg-color !important;
+      cursor: pointer;
+    }
+    .resize-bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: -3px;
+      width: 6px;
+      z-index: 2;
+      cursor: col-resize;
+    }
+  }
+  .body {
+    display: flex;
+    flex-direction: row;
+    min-height: fit-content;
+  }
+  .footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+  }
+  .header,
+  .body,
+  .footer {
+    .table-cell {
+      align-self: stretch; // 子元素高度和父元素一致
+      display: inline-flex;
+      align-items: center;
+      border-top: 1px solid @--border-color-secondary;
+      border-right: 1px solid @--border-color-secondary;
+      background-color: #fff;
+      &.selection-column {
+        justify-content: center;
+        border-right-color: transparent;
+      }
+      .action {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        .drag-icon,
+        .expand-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 20px;
+          height: 20px;
+          color: @--text-color-placeholder;
+          visibility: hidden;
+        }
+        .drag-icon {
+          cursor: grab;
+        }
+        .expand-icon:hover {
+          color: @--primary-color;
+        }
+        .middle {
+          text-align: center;
+          width: 16px;
+          margin: 0 2px;
+          .order {
+            display: inline-block;
+          }
+          .checkbox {
+            display: none;
+          }
+        }
+      }
+      &.col--center {
+        text-align: center;
+        justify-content: center;
+      }
+      &.col--right {
+        text-align: right;
+        justify-content: flex-end;
+      }
+      &.col--fix-left {
+        position: sticky;
+        z-index: 1;
+      }
+      &.col--checked {
+        background-color: @--primary-1;
+      }
+      &.active {
+        box-shadow: inset 0 0 0 2px @--primary-color;
+        background-color: rgba(255, 235, 140, 1);
+      }
+      .cell {
+        .text-overflow-cut();
+        padding: 0 @--padding-sm;
+      }
+    }
+    .label-cell,
+    .table-cell {
+      &:hover {
+        .count-select {
+          visibility: visible;
+        }
+      }
+    }
+    .count-select {
+      .text-overflow-cut();
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      height: 100%;
+      width: 100%;
+      padding: 0 @--padding-sm;
+      color: @--text-color-placeholder;
+      cursor: pointer;
+      visibility: hidden;
+      &:hover,
+      &.ant-dropdown-open {
+        visibility: visible;
+        background-color: @--background-color-light;
+      }
+      &.show {
+        visibility: visible;
+      }
+      .icon {
+        margin-left: 4px;
+      }
+    }
+  }
+  .resize-line {
+    position: absolute;
+    left: -2px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: @--primary-color;
+    z-index: 2;
+  }
+  .fixed-line {
+    position: absolute;
+    left: -1px;
+    top: 0;
+    width: 0;
+    height: 100%;
+    border-left: 1px solid @--border-color-base;
+    z-index: 2;
+    pointer-events: none;
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: -1px;
+      width: 20px;
+      transform: translateX(100%);
+      transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
+      pointer-events: none;
+    }
+    &.leave {
+      &::after {
+        box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+      }
+    }
+    &.active {
+      border-left: 1px solid @--primary-color;
+      border-right: 1px solid @--primary-color;
+    }
+  }
+  .fixed-bar {
+    position: absolute;
+    top: 0;
+    left: -1px;
+    width: 6px;
+    height: 100%;
+    margin-left: -2px;
+    background-image: none;
+    background-repeat: no-repeat;
+    z-index: 1;
+    cursor: col-resize;
+    &:hover,
+    &.active {
+      background-image: linear-gradient(to right, transparent 2px, @--border-color-base 2px 4px, transparent 4px 6px);
+      z-index: 2;
+      .thumb {
+        opacity: 1;
+      }
+    }
+    .thumb {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 32px;
+      border-radius: 6px;
+      background-color: @--primary-color;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+  .content-empty {
+    position: absolute;
+    width: 100%;
+    margin: 20px 0;
+  }
+  // 左侧面板
+  .left-panel {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    .group-label {
+      border-right: 0 !important;
+      .bor-radius-left();
+      &.level0 {
+        .bor-left-shadow();
+      }
+    }
+    .row-item {
+      &:nth-of-type(1) {
+        border-top-left-radius: @border-radius;
+        .bor-left-shadow();
+        .table-cell:first-child {
+          border-top-left-radius: @border-radius;
+        }
+      }
+      &.last {
+        border-bottom-left-radius: @border-radius;
+        .table-cell:first-child {
+          border-bottom-left-radius: @border-radius;
+        }
+      }
+      &.is-leaf {
+        .selection-column {
+          border-top-color: transparent;
+        }
+        .cell--indent {
+          display: flex;
+          background-color: #fff;
+          .line {
+            flex: 1 0;
+            position: relative;
+            &::before {
+              content: '';
+              position: absolute;
+              left: 10px;
+              height: 100%;
+              margin-top: -100%;
+              border-left: 1px dashed rgba(0, 0, 0, 0.175);
+            }
+          }
+        }
+      }
+    }
+    .no-group {
+      .row-item:last-child {
+        .bor-left-shadow();
+      }
+    }
+  }
+  .main-panel {
+    flex: 1 0;
+    z-index: 0;
+    .group-label,
+    .row-item {
+      border-left: 0 !important;
+    }
+    .group-label {
+      .bor-radius-right();
+    }
+    .row-item {
+      &:nth-of-type(1) {
+        border-top-right-radius: @border-radius;
+        .table-cell:last-child {
+          border-top-right-radius: @border-radius;
+        }
+      }
+      &.last {
+        border-bottom-right-radius: @border-radius;
+        .table-cell:last-child {
+          border-bottom-right-radius: @border-radius;
+        }
+      }
+    }
+  }
+  .container {
+    position: relative;
+    left: 0;
+    top: 0;
+    &.no-group {
+      .row-item:last-child {
+        .table-cell {
+          border-bottom: 1px solid @--border-color-secondary;
+        }
+        .cell--indent {
+          height: fill-available;
+          height: -webkit-fill-available;
+        }
+      }
+    }
+    .group-label {
+      position: absolute;
+      box-sizing: content-box;
+      border: 1px solid @--border-color-secondary;
+      background-color: #fff;
+      overflow: hidden;
+      .label-row {
+        display: flex;
+        align-items: center;
+      }
+      .label-cell {
+        align-self: stretch;
+        display: inline-flex;
+        align-items: center;
+        &.expandable-column {
+          justify-content: center;
+          .button-icon {
+            & > .anticon {
+              transition: transform 0.3s ease;
+            }
+            &.expand > .anticon {
+              transform: rotate(90deg);
+            }
+          }
+        }
+        &.col--fix-left {
+          position: sticky;
+          z-index: 1;
+        }
+        .title {
+          flex-shrink: 0;
+          margin-left: 8px;
+          margin-right: 20px;
+          font-weight: 600;
+          .empty {
+            color: @--text-color-placeholder;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+    .row-item {
+      position: absolute;
+      border-left: 1px solid @--border-color-secondary;
+      .table-row {
+        display: flex;
+        align-items: center;
+        height: inherit;
+        &.row--hover,
+        &.row--selection {
+          .table-cell,
+          .cell--indent {
+            background-color: @--background-color-light;
+            .middle&:has(.checkbox) {
+              .order {
+                display: none;
+              }
+              .checkbox {
+                display: inline-flex;
+              }
+            }
+          }
+        }
+        &.row--highlight {
+          .table-cell,
+          .cell--indent {
+            background-color: @--primary-1;
+          }
+        }
+        &.row--hover {
+          .table-cell {
+            .drag-icon,
+            .expand-icon {
+              visibility: visible;
+            }
+          }
+        }
+        .cell--expand {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 1;
+          padding: 3px;
+          color: @--text-color-placeholder;
+          border-radius: @--border-radius-lg;
+          background-color: #fff;
+          user-select: none;
+          cursor: pointer;
+          .icon {
+            transition: transform 0.3s ease;
+          }
+          &.fold {
+            .icon {
+              transform: rotate(-90deg);
+            }
+          }
+          &.disabled {
+            color: @--disabled-color;
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+  }
+  // size
+  &.small {
+    .label-row,
+    .table-cell,
+    .cell--indent {
+      height: 26px;
+    }
+  }
+  &.middle {
+    .label-row,
+    .table-cell,
+    .cell--indent {
+      height: 34px;
+    }
+  }
+  &.large {
+    .label-row,
+    .table-cell,
+    .cell--indent {
+      height: 42px;
+    }
+  }
+}