dcp-design-react 1.7.42

package/lib/table/style/index.less

@@ -0,0 +1,29 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-03-16 19:06:00
+ */
+@import './variable.less';
+@import './toper.less';
+@import './alert.less';
+@import './full-screen.less';
+@import './reload.less';
+@import './print.less';
+@import './import.less';
+@import './export.less';
+@import './clipboard.less';
+@import './tollbox.less';
+@import './select-collection.less';
+@import './group-summary.less';
+@import './super-search.less';
+@import './fast-search.less';
+@import './column-filter.less';
+@import './table.less';
+@import './header.less';
+@import './body.less';
+@import './footer.less';
+@import './pager.less';
+@import './empty.less';
+@import './expandable.less';
+@import './size.less';

package/lib/table/style/pager.less

@@ -0,0 +1,29 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-09-04 10:17:37
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-pager {
+  margin-top: @v-module-distance;
+  display: flex;
+  justify-content: space-between;
+  .pager-alert {
+    .@{prefix-table}__alert {
+      height: 100%;
+    }
+  }
+  .ant-pagination {
+    line-height: 1;
+    &-options-size-changer.ant-select {
+      width: auto;
+      &.ant-select-status-error {
+        .ant-select-selector {
+          border-color: @--border-color-base !important;
+        }
+      }
+    }
+  }
+}

package/lib/table/style/print.less

@@ -0,0 +1,21 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-09 10:06:27
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-print {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}

package/lib/table/style/reload.less

@@ -0,0 +1,21 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-12-31 14:12:41
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-reload {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}

package/lib/table/style/select-collection.less

@@ -0,0 +1,21 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-06 10:27:07
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-select-collection {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}

package/lib/table/style/size.less

@@ -0,0 +1,88 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-02-28 22:11:53
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-12-28 13:59:08
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table} {
+  // 42 34 26
+  &--wrapper {
+    font-size: @v-font-size;
+    .@{prefix-table}-top {
+      height: @v-table-row-height - 2px;
+    }
+    .header--column,
+    .body--column,
+    .footer--column {
+      &.col--ellipsis {
+        height: @v-table-row-height;
+      }
+      &:not(.col--ellipsis) {
+        padding: ceil(((@v-table-row-height - @v-table-row-line-height) / 2)) 0;
+      }
+    }
+    .is--head-group {
+      .header--column.col--ellipsis {
+        height: @v-table-row-height * 0.8;
+      }
+    }
+    .row--height {
+      height: @v-table-row-height;
+    }
+  }
+
+  &--lg {
+    font-size: @v-font-size-large;
+    .@{prefix-table}-top {
+      height: @v-table-row-height-large - 2px;
+    }
+    .header--column,
+    .body--column,
+    .footer--column {
+      &.col--ellipsis {
+        height: @v-table-row-height-large;
+      }
+      &:not(.col--ellipsis) {
+        padding: ceil(((@v-table-row-height-large - @v-table-row-line-height) / 2)) 0;
+      }
+      .cell--edit {
+        margin: 0 -1 * (@v-module-distance / 2);
+      }
+    }
+    .is--head-group {
+      .header--column.col--ellipsis {
+        height: @v-table-row-height-large * 0.8;
+      }
+    }
+    .row--height {
+      height: @v-table-row-height-large;
+    }
+  }
+
+  &--sm {
+    font-size: @v-font-size-small;
+    .@{prefix-table}-top {
+      height: @v-table-row-height-small - 2px;
+    }
+    .header--column,
+    .body--column,
+    .footer--column {
+      &.col--ellipsis {
+        height: @v-table-row-height-small;
+      }
+      &:not(.col--ellipsis) {
+        padding: ceil(((@v-table-row-height-small - @v-table-row-line-height) / 2)) 0;
+      }
+    }
+    .is--head-group {
+      .header--column.col--ellipsis {
+        height: @v-table-row-height-small * 0.8;
+      }
+    }
+    .row--height {
+      height: @v-table-row-height-small;
+    }
+  }
+}

package/lib/table/style/super-search.less

@@ -0,0 +1,102 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-03-26 11:45:02
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-11-26 21:11:13
+ */
+@prefix-table: ~'@{qm-prefix}-table';
+
+.@{prefix-table}-super-search {
+  display: inline-block;
+  padding: 5px 3px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  .icon {
+    font-size: 1.05em;
+  }
+  &:hover {
+    color: @v-primary-color;
+  }
+}
+
+.@{prefix-table}-super-search__setting {
+  .main {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    margin-bottom: @v-module-distance;
+    .container {
+      flex: 1;
+      width: 0;
+      .lang-js {
+        display: block;
+        margin-top: @v-module-distance;
+        background-color: #2b3a42;
+        padding: 6px 10px;
+        color: #62b1d8;
+        border-radius: @v-border-radius;
+        text-shadow: 0 1px 0 rgba(23, 31, 35, 0.5);
+      }
+    }
+    .saved {
+      width: 200px;
+      .form-wrap {
+        display: flex;
+      }
+      .card-wrap {
+        margin-top: @v-module-distance;
+        border: 1px solid @v-table-border-color;
+        > h5 {
+          display: flex;
+          align-items: center;
+          font-size: inherit;
+          font-weight: normal;
+          margin-bottom: 0;
+          padding: 0 @v-module-distance;
+          border-bottom: 1px solid @v-table-border-color;
+          background-color: @v-table-header-background-color;
+        }
+        > ul {
+          margin-bottom: 0;
+          li {
+            display: flex;
+            align-items: center;
+            position: relative;
+            padding: 6px @v-module-distance;
+            border-bottom: 1px solid @v-table-border-color;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            &:last-of-type {
+              border-bottom: 0;
+            }
+            &:hover {
+              background-color: @v-table-row-hover-background-color;
+              .close {
+                visibility: visible;
+              }
+            }
+            &.selected {
+              background-color: @v-table-row-selected-background-color;
+            }
+            .title {
+              i {
+                margin-right: 5px;
+              }
+            }
+            .close {
+              position: absolute;
+              right: @v-module-distance;
+              visibility: hidden;
+            }
+          }
+        }
+      }
+    }
+    .line {
+      border-left: 1px dashed @--border-color-base;
+      padding-left: @v-module-distance;
+      margin-left: @v-module-distance;
+    }
+  }
+}

package/lib/table/style/table.less

@@ -0,0 +1,372 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2023-06-03 21:46:35
+ */
+@import '../../style/common';
+
+@prefix-table: ~'@{qm-prefix}-table';
+
+// 外层容器
+.@{prefix-table}--wrapper {
+  .reset-container();
+}
+
+/* 全屏 */
+.@{prefix-table}--maximize {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  z-index: 100;
+  overflow-y: auto;
+  padding: @v-module-distance;
+  padding-bottom: 0;
+  background-color: @v-table-background-color;
+}
+
+/* table 样式 */
+.@{prefix-table} {
+  position: relative;
+  background-color: @v-table-background-color;
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 0;
+    z-index: 3;
+    pointer-events: none;
+  }
+  &:before {
+    top: 0;
+    border-top: 1px solid @v-table-border-color;
+  }
+  &:after {
+    bottom: -1px;
+    border-bottom: 1px solid @v-table-border-color;
+  }
+
+  &--header,
+  &--body,
+  &--footer {
+    border: 0;
+    border-spacing: 0;
+    border-collapse: separate;
+    table-layout: fixed;
+  }
+
+  &--header-wrapper,
+  &--footer-wrapper {
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+
+  &--body-wrapper {
+    overflow-y: auto;
+    overflow-x: auto;
+  }
+
+  &--merge-cell {
+    position: absolute;
+    display: none;
+    border: 2px solid @v-primary-color;
+    border-radius: @v-border-radius;
+    background-color: rgba(255, 255, 255, 0.3);
+    z-index: 9;
+    .btn {
+      position: absolute;
+      right: -54px;
+      bottom: 0;
+    }
+    .cancel {
+      bottom: 30px;
+    }
+  }
+
+  &.c--resize {
+    cursor: col-resize;
+    .header--column {
+      pointer-events: none;
+    }
+  }
+
+  .header--column {
+    background-color: @v-table-header-background-color;
+  }
+
+  .body--column {
+    transition: background-color 0.3s ease;
+    background-color: @v-table-background-color;
+  }
+
+  .footer--column {
+    background-color: @v-table-footer-background-color;
+    border-bottom: 0;
+  }
+
+  .body--row:hover {
+    .body--column {
+      background-color: @v-table-row-hover-background-color;
+    }
+  }
+
+  .body--row-striped {
+    .body--column {
+      background-color: @v-table-header-background-color;
+    }
+  }
+
+  .body--row-selected {
+    .body--column {
+      background-color: @v-table-row-selected-background-color;
+    }
+  }
+
+  .body--row-current {
+    .body--column {
+      background-color: @v-table-row-current-background-color;
+    }
+  }
+
+  .body--row-expanded {
+    .body--column {
+      background-color: @v-table-row-expanded-background-color;
+    }
+  }
+
+  .body--row-group_1 {
+    .body--column {
+      background-color: @--primary-1;
+    }
+  }
+
+  .body--row-group_2 {
+    .body--column {
+      background-color: @--primary-2;
+    }
+  }
+
+  .body--row-group_3 {
+    .body--column {
+      background-color: @--primary-3;
+    }
+  }
+
+  .header--column,
+  .body--column,
+  .footer--column {
+    position: relative;
+    text-align: left;
+    // line-height: @v-table-row-line-height;
+    &:not(.col--ellipsis) {
+      padding: ceil(((@v-table-row-height - @v-table-row-line-height) / 2)) 0;
+      .cell {
+        line-height: 1.2;
+      }
+    }
+    &.col--center:not(.header--column) {
+      text-align: center;
+    }
+    &.col--right:not(.header--column) {
+      text-align: right;
+    }
+    .cell {
+      white-space: pre-wrap;
+      word-break: break-all;
+      padding: 0 @v-module-distance;
+      .cell--indent {
+        float: left;
+        height: 1px;
+        visibility: hidden;
+      }
+      .cell--sign {
+        content: ' ';
+        top: -5px;
+        left: -5px;
+        position: absolute;
+        z-index: 1;
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent @v-primary-color transparent transparent;
+        transform: rotate(45deg);
+        pointer-events: none;
+      }
+      .cell--copy {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: space-between;
+        .text {
+          flex: 1;
+          .text-overflow-cut();
+        }
+        .icon {
+          margin-right: -2px;
+          color: @v-font-secondary-color;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  // 自定义
+  &.is--fixed {
+    .cell-fix-left,
+    .cell-fix-right {
+      position: sticky;
+      z-index: 2;
+    }
+    .cell-fix-left-last {
+      &::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;
+      }
+    }
+    .cell-fix-right-first {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: -1px;
+        width: 20px;
+        transform: translateX(-100%);
+        transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
+        pointer-events: none;
+      }
+    }
+    &.ping--left .cell-fix-left-last::after {
+      box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+    }
+    &.ping--right .cell-fix-right-first::after {
+      box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  &.is--sortable {
+    .column-has-sorter {
+      transition: background-color 0.3s ease;
+      cursor: pointer;
+      &:hover {
+        background-color: @v-table-column-sort-hover-color;
+      }
+      &.column--sort {
+        background-color: @v-table-column-sorted-color;
+      }
+    }
+    .column--sort {
+      background-color: @v-table-header-background-color;
+    }
+  }
+
+  &.is--border {
+    .header--column,
+    .body--column,
+    .footer--column {
+      border-bottom: 1px solid @v-table-border-color;
+      border-right: 1px solid @v-table-border-color;
+      .box-sizing-content();
+    }
+  }
+
+  &:not(.is--border) {
+    &:before,
+    &:after {
+      border: 0;
+    }
+    .header--column,
+    .body--column {
+      border-bottom: 1px solid @v-table-border-color;
+    }
+  }
+
+  &.is--merge-cell &--body-wrapper > table > tbody {
+    pointer-events: none;
+  }
+
+  /* body 填充元素 */
+  .body--x-space {
+    height: 0;
+    visibility: hidden;
+    &::after {
+      content: '.';
+    }
+  }
+  .body--y-space {
+    width: 0;
+    line-height: 0;
+    float: left;
+    visibility: hidden;
+    &::after {
+      content: '.';
+    }
+  }
+
+  /* 列宽线 */
+  &--resizable-bar {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 100%;
+    z-index: 4;
+    &:before {
+      content: '';
+      display: block;
+      height: 100%;
+      background-color: @v-table-resizable-color;
+    }
+  }
+
+  /* 边框线 */
+  &--border-line {
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      width: 0;
+      height: 100%;
+      z-index: 3;
+      pointer-events: none;
+    }
+    &:before {
+      left: 0;
+      border-left: 1px solid @v-table-border-color;
+    }
+    &:after {
+      right: 0;
+      border-right: 1px solid @v-table-border-color;
+    }
+  }
+
+  /* 溢出列 */
+  .header--column,
+  .body--column,
+  .footer--column {
+    &.col--ellipsis {
+      .cell {
+        .text-overflow-cut();
+        word-break: break-all;
+        white-space: pre;
+      }
+    }
+  }
+
+  /* 弹出层 */
+  &__popper {
+    padding: @v-module-distance;
+  }
+}