ele-admin-plus 1.4.1 → 1.5.0-beta.1

package/lib/ele-split-panel/style/index.scss

@@ -1,120 +1,192 @@
 @use '../../style/themes/default.scss' as *;
 @use '../../style/util.scss' as *;
+@use '../../ele-pro-table/style/css-var.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-split-panel-var($ele);
 
 .ele-split-panel {
   display: flex;
   position: relative;
-  --ele-split-size: 200px;
-  --ele-split-space: 16px;
+  overflow: hidden;
 
-  /* 侧边容器 */
+  /* 边栏 */
   & > .ele-split-panel-wrap {
     flex-shrink: 0;
-    box-sizing: border-box;
-    width: calc(var(--ele-split-size) + var(--ele-split-space));
     display: flex;
     justify-content: flex-end;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all eleVar('split-panel', 'collapse-transition');
+    box-sizing: border-box;
+    position: relative;
     opacity: 1;
+  }
 
-    /* 侧边 */
-    & > .ele-split-panel-side {
-      flex-shrink: 0;
-      width: var(--ele-split-size);
-      border: 1px solid elVar('border-color', 'light');
-      box-sizing: border-box;
-      position: relative;
-    }
-
-    /* 间距 */
-    & > .ele-split-panel-space {
-      flex-shrink: 0;
-      width: var(--ele-split-space);
-      box-sizing: border-box;
-      position: relative;
-
-      /* 拉伸线 */
-      .ele-split-resize-line {
-        width: 12px;
-        height: 100%;
-        position: absolute;
-        left: -6px;
-        z-index: 4;
-        cursor: e-resize;
-
-        &::after {
-          content: '';
-          width: 3px;
-          height: 100%;
-          display: block;
-          margin: 0 auto;
-        }
-
-        &:hover::after {
-          background: elVar('color-primary');
-        }
-      }
-    }
+  .ele-split-panel-side {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    border: eleVar('split-panel', 'side-border');
+    transition: all eleVar('split-panel', 'collapse-transition');
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
   }
 
   /* 内容 */
   & > .ele-split-panel-body {
     flex: 1;
-    overflow: auto;
-    box-sizing: border-box;
     position: relative;
+    box-sizing: border-box;
+    overflow: auto;
   }
 
-  /* 折叠按钮 */
-  & > .ele-split-collapse-button {
-    width: 24px;
-    height: 24px;
+  /* 操作元素容器 */
+  .ele-split-panel-tools {
+    width: 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: calc(#{eleVar('split-panel', 'mask-index')} + 1);
+  }
+
+  /* 拉伸线 */
+  .ele-split-panel-resize {
+    height: 100%;
+    width: eleVar('split-panel', 'resize-line-trigger');
+    position: absolute;
+    top: 0;
+    left: calc(#{eleVar('split-panel', 'resize-line-trigger')} / 2 * -1);
     display: flex;
-    align-items: center;
     justify-content: center;
+    cursor: e-resize;
+
+    &::after {
+      content: '';
+      width: eleVar('split-panel', 'resize-line-size');
+      height: 100%;
+    }
+
+    &:hover::after {
+      background: eleVar('split-panel', 'resize-line-hover-bg');
+    }
+  }
+
+  /* 折叠按钮 */
+  .ele-split-panel-collapse-btn {
+    width: eleVar('split-panel', 'collapse-btn-width');
+    height: eleVar('split-panel', 'collapse-btn-height');
     position: absolute;
     top: 50%;
-    left: var(--ele-split-size);
-    border-radius: 50%;
-    border: 1px solid elVar('border-color', 'extra-light');
+    left: 50%;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-top: calc(#{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1);
+    margin-left: calc(#{eleVar('split-panel', 'collapse-btn-width')} / 2 * -1);
+    background: eleVar('split-panel', 'collapse-btn-bg');
+    box-shadow: eleVar('split-panel', 'collapse-btn-shadow');
+    border: eleVar('split-panel', 'collapse-btn-border');
+    border-radius: eleVar('split-panel', 'collapse-btn-radius');
+    transition: all eleVar('split-panel', 'collapse-transition');
     box-sizing: border-box;
-    margin: -12px 0 0 -12px;
-    background: elVar('bg-color', 'overlay');
-    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.04);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
-    z-index: 5;
 
-    .ele-split-collapse-icon {
-      font-size: 14px;
-      color: elVar('text-color', 'secondary');
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    .ele-split-panel-collapse-icon {
+      font-size: eleVar('split-panel', 'collapse-btn-font-size');
+      color: eleVar('split-panel', 'collapse-btn-color');
+      transition: all eleVar('split-panel', 'collapse-transition');
       transform: scaleX(1);
+    }
 
-      & > svg {
-        stroke-width: 5;
-      }
+    &:hover .ele-split-panel-collapse-icon {
+      color: eleVar('split-panel', 'collapse-btn-hover-color');
     }
 
-    &:hover .ele-split-collapse-icon {
-      color: elVar('text-color', 'primary');
+    /* 最大化按钮 */
+    &.is-maximized-btn .ele-split-panel-collapse-icon {
+      transform: scaleX(-1);
+    }
+  }
+
+  /* 折叠按钮组 */
+  .ele-split-panel-collapse-btn-group {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: calc(#{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1);
+
+    & > .ele-split-panel-collapse-btn {
+      position: static;
+      top: auto;
+      left: auto;
+      margin: 0;
     }
   }
 
   /* 折叠状态 */
-  &.is-collapse {
-    & > .ele-split-panel-wrap {
-      width: 0 !important;
-      pointer-events: none;
+  &.is-collapse > .ele-split-panel-wrap {
+    & > .ele-split-panel-side {
       opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+
+      * {
+        pointer-events: none !important;
+      }
     }
 
-    & > .ele-split-collapse-button {
-      left: 0;
+    & > .ele-split-panel-tools {
+      & > .ele-split-panel-resize {
+        visibility: hidden;
+        pointer-events: none;
+      }
 
-      .ele-split-collapse-icon {
+      & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
         transform: scaleX(-1);
       }
+
+      & > .ele-split-panel-collapse-btn-group {
+        & > .ele-split-panel-collapse-btn.is-collapse-btn {
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+
+          * {
+            pointer-events: none;
+          }
+        }
+      }
+    }
+  }
+
+  /* 最大化状态 */
+  &.is-maximized > .ele-split-panel-wrap {
+    width: 100% !important;
+    margin: 0 !important;
+
+    & > .ele-split-panel-tools {
+      & > .ele-split-panel-resize {
+        visibility: hidden;
+        pointer-events: none;
+      }
+
+      & > .ele-split-panel-collapse-btn-group > .ele-split-panel-collapse-btn {
+        &.is-maximized-btn {
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+
+          * {
+            pointer-events: none;
+          }
+        }
+      }
     }
   }
 
@@ -124,56 +196,59 @@
 
     & > .ele-split-panel-wrap {
       flex-direction: column;
-      height: calc(var(--ele-split-size) + var(--ele-split-space));
-      width: auto;
-
-      & > .ele-split-panel-side {
-        height: var(--ele-split-size);
-        width: auto;
-      }
 
-      & > .ele-split-panel-space {
-        height: var(--ele-split-space);
-        width: auto;
+      & > .ele-split-panel-tools {
+        height: 0;
+        width: 100%;
+        left: 0;
+        bottom: 0;
+        top: auto;
+        right: auto;
 
-        .ele-split-resize-line {
+        & > .ele-split-panel-resize {
           width: 100%;
-          height: 12px;
-          left: auto;
-          top: -6px;
+          height: eleVar('split-panel', 'resize-line-trigger');
+          top: calc(#{eleVar('split-panel', 'resize-line-trigger')} / 2 * -1);
+          left: 0;
+          flex-direction: column;
           cursor: n-resize;
 
           &::after {
             width: 100%;
-            height: 3px;
-            margin: 4px 0 0 0;
+            height: eleVar('split-panel', 'resize-line-size');
           }
         }
-      }
-    }
 
-    & > .ele-split-collapse-button {
-      top: var(--ele-split-size);
-      left: 50%;
+        & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
+          transform: scaleY(1);
+        }
+
+        & > .ele-split-panel-collapse-btn-group {
+          flex-direction: column;
+          transform: translateY(-50%);
+          margin-top: 0;
+          margin-left: calc(
+            #{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1
+          );
 
-      .ele-split-collapse-icon {
-        transform: scaleY(1);
+          & > .ele-split-panel-collapse-btn.is-maximized-btn {
+            .ele-split-panel-collapse-icon {
+              transform: scaleY(-1);
+            }
+          }
+        }
       }
     }
 
-    &.is-collapse {
-      & > .ele-split-panel-wrap {
-        width: auto !important;
-        height: 0 !important;
+    &.is-collapse > .ele-split-panel-wrap > .ele-split-panel-tools {
+      & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
+        transform: scaleY(-1);
       }
+    }
 
-      & > .ele-split-collapse-button {
-        top: 0;
-
-        .ele-split-collapse-icon {
-          transform: scaleY(-1);
-        }
-      }
+    &.is-maximized > .ele-split-panel-wrap {
+      height: 100% !important;
+      margin: 0 !important;
     }
   }
 
@@ -184,26 +259,41 @@
     & > .ele-split-panel-wrap {
       flex-direction: row-reverse;
 
-      & > .ele-split-panel-space .ele-split-resize-line {
-        left: auto;
-        right: -6px;
-      }
-    }
+      & > .ele-split-panel-tools {
+        left: 0;
+        right: auto;
 
-    & > .ele-split-collapse-button {
-      left: auto;
-      right: var(--ele-split-size);
-      margin: -12px -12px 0 0;
+        & > .ele-split-panel-collapse-btn {
+          left: auto;
+          right: 50%;
+          margin-left: 0;
+          margin-right: calc(
+            #{eleVar('split-panel', 'collapse-btn-width')} / 2 * -1
+          );
 
-      .ele-split-collapse-icon {
-        transform: scaleX(-1);
+          .ele-split-panel-collapse-icon {
+            transform: scaleX(-1);
+          }
+        }
+
+        & > .ele-split-panel-collapse-btn-group {
+          flex-direction: row-reverse;
+
+          & > .ele-split-panel-collapse-btn {
+            .ele-split-panel-collapse-icon {
+              transform: scaleX(-1);
+            }
+
+            &.is-maximized-btn .ele-split-panel-collapse-icon {
+              transform: none;
+            }
+          }
+        }
       }
     }
 
-    &.is-collapse > .ele-split-collapse-button {
-      right: 0;
-
-      .ele-split-collapse-icon {
+    &.is-collapse > .ele-split-panel-wrap > .ele-split-panel-tools {
+      & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
         transform: scaleX(1);
       }
     }
@@ -214,28 +304,44 @@
       & > .ele-split-panel-wrap {
         flex-direction: column-reverse;
 
-        & > .ele-split-panel-space .ele-split-resize-line {
-          top: auto;
+        & > .ele-split-panel-tools {
+          top: 0;
+          left: 0;
           right: auto;
-          bottom: -6px;
-        }
-      }
-
-      & > .ele-split-collapse-button {
-        left: 50%;
-        top: auto;
-        bottom: var(--ele-split-size);
-        margin: 0 0 -12px -12px;
+          bottom: auto;
+
+          & > .ele-split-panel-collapse-btn {
+            top: auto;
+            bottom: 50%;
+            margin-top: 0;
+            margin-bottom: calc(
+              #{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1
+            );
+
+            .ele-split-panel-collapse-icon {
+              transform: scaleY(-1);
+            }
+          }
 
-        .ele-split-collapse-icon {
-          transform: scaleY(-1);
+          & > .ele-split-panel-collapse-btn-group {
+            flex-direction: column-reverse;
+            transform: translateY(-50%);
+            margin-top: 0;
+            margin-left: calc(
+              #{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1
+            );
+
+            & > .ele-split-panel-collapse-btn.is-collapse-btn {
+              .ele-split-panel-collapse-icon {
+                transform: scaleY(-1);
+              }
+            }
+          }
         }
       }
 
-      &.is-collapse > .ele-split-collapse-button {
-        bottom: 0;
-
-        .ele-split-collapse-icon {
+      &.is-collapse > .ele-split-panel-wrap > .ele-split-panel-tools {
+        & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
           transform: scaleY(1);
         }
       }
@@ -246,10 +352,20 @@
   &.is-resizing {
     user-select: none;
 
+    * {
+      user-select: none !important;
+    }
+
     & > .ele-split-panel-wrap,
-    & > .ele-split-collapse-button {
+    & > .ele-split-panel-wrap > .ele-split-panel-side {
       transition: none;
     }
+
+    & > .ele-split-panel-wrap > .ele-split-panel-tools {
+      & > .ele-split-panel-resize::after {
+        background: eleVar('split-panel', 'resize-line-hover-bg');
+      }
+    }
   }
 
   /* 遮罩层 */
@@ -260,101 +376,144 @@
     right: 0;
     bottom: 0;
     opacity: 0;
-    backdrop-filter: blur(6px);
-    background: rgba(158, 158, 158, 0.2);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    pointer-events: none;
+    visibility: hidden;
+    transition: all eleVar('split-panel', 'collapse-transition');
+    background: eleVar('split-panel', 'mask-bg');
+    z-index: eleVar('split-panel', 'mask-index');
     display: none;
-    z-index: 2;
   }
 
   /* 内部表格弹性布局 */
   &.is-flex-table {
     flex: 1;
-    overflow: auto;
 
     & > .ele-split-panel-body,
     & > .ele-split-panel-wrap > .ele-split-panel-side {
       display: flex;
       flex-direction: column;
 
-      & > .ele-pro-table {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
+      @include flex-pro-table();
+    }
+  }
 
-        & > .ele-pro-table-view {
-          flex: 1;
-          height: 100%;
-        }
-      }
+  &.is-flex-auto-table {
+    flex: auto;
+
+    & > .ele-split-panel-body,
+    & > .ele-split-panel-wrap > .ele-split-panel-side {
+      display: flex;
+      flex-direction: column;
+
+      @include flex-auto-pro-table();
     }
   }
 }
 
-/* 小屏幕样式 */
-@media screen and (max-width: 768px) {
-  .ele-split-panel.is-responsive:not(.is-vertical) {
-    &:not(.is-collapse) {
-      overflow: hidden !important;
+/* 侧栏顶部 */
+.ele-split-panel-side-header,
+.ele-split-panel-body-header {
+  flex-shrink: 0;
+  border-bottom: eleVar('split-panel', 'side-header-border');
+  padding: eleVar('split-panel', 'side-header-padding');
+  box-sizing: border-box;
+  overflow: hidden;
+
+  .el-form-item {
+    margin-bottom: eleVar('split-panel', 'side-header-form-space');
+  }
+
+  & + .ele-pro-table {
+    padding: eleVar('split-panel', 'table-padding');
+
+    &.is-default-toolbar {
+      padding: eleVar('split-panel', 'table-default-padding');
+    }
+
+    &.is-maximized > .ele-toolbar.is-plain {
+      padding-left: 0;
+      padding-right: 0;
     }
+  }
+}
 
+/* 主体顶部 */
+.ele-split-panel-body-header {
+  padding: eleVar('split-panel', 'body-header-padding');
+}
+
+/* 小屏幕样式 */
+@media screen and (max-width: #{$mobile-max-width}) {
+  .ele-split-panel.is-responsive:not(.is-vertical) {
     & > .ele-split-panel-wrap {
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
+      background: eleVar('split-panel', 'side-pop-bg');
+      z-index: calc(#{eleVar('split-panel', 'mask-index')} + 1);
 
       & > .ele-split-panel-side {
-        background: elVar('bg-color');
         border: none;
-        z-index: 3;
       }
     }
 
-    & > .ele-split-panel-body {
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
     & > .ele-split-panel-mask {
       display: block;
     }
 
     &:not(.is-collapse) {
       & > .ele-split-panel-mask {
-        left: var(--ele-split-size);
-        pointer-events: all;
+        visibility: visible;
         opacity: 1;
       }
 
       & > .ele-split-panel-body {
-        transform: translateX(
-          calc(var(--ele-split-size) + var(--ele-split-space))
-        );
         z-index: 1;
       }
     }
 
     /* 反向 */
-    &.is-reverse {
-      & > .ele-split-panel-wrap {
-        right: 0;
-        left: auto;
+    &.is-reverse > .ele-split-panel-wrap {
+      right: 0;
+      left: auto;
+    }
+  }
+}
+
+@media screen and (max-height: #{$mobile-max-height}) {
+  .ele-split-panel.is-responsive.is-vertical {
+    & > .ele-split-panel-wrap {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: eleVar('split-panel', 'side-pop-bg');
+      z-index: calc(#{eleVar('split-panel', 'mask-index')} + 1);
+
+      & > .ele-split-panel-side {
+        border: none;
       }
+    }
 
-      &:not(.is-collapse) {
-        & > .ele-split-panel-mask {
-          left: 0;
-          right: var(--ele-split-size);
-        }
+    & > .ele-split-panel-mask {
+      display: block;
+    }
 
-        & > .ele-split-panel-body {
-          transform: translateX(
-            calc(0px - var(--ele-split-size) - var(--ele-split-space))
-          );
-        }
+    &:not(.is-collapse) {
+      & > .ele-split-panel-mask {
+        visibility: visible;
+        opacity: 1;
       }
+
+      & > .ele-split-panel-body {
+        z-index: 1;
+      }
+    }
+
+    /* 反向 */
+    &.is-reverse > .ele-split-panel-wrap {
+      bottom: 0;
+      top: auto;
     }
   }
 }