eoss 0.1.0-alpha.20 → 0.1.0-alpha.21

package/packages/theme-chalk/src/lowcode.scss

@@ -0,0 +1,461 @@
+@import './common/var.scss';
+@import './mixins/mixins.scss';
+
+// .es-lowcode-attribute-enter-active,
+// .es-lowcode-attribute-leave-active {
+//   transition: all 0.3s ease;
+// }
+
+// .es-lowcode-attribute-enter-from {
+//   transform: translateX(100%);
+//   opacity: 0;
+//   width: 0;
+// }
+
+// .es-lowcode-attribute-leave-to {
+//   transform: translateX(100%);
+//   opacity: 0;
+//   width: 0;
+// }
+/* Sortable 动画效果 */
+.es-lowcode__canvas-ghost {
+  opacity: 0.4;
+  transform: scale(0.98);
+}
+
+.es-lowcode__canvas-chosen {
+  user-select: none;
+  box-shadow: 0 0 0 2px #409eff;
+}
+
+.es-lowcode__canvas-drag {
+  opacity: 0.8;
+}
+@include b(lowcode) {
+  height: 100%;
+  .es-collapse-item__content {
+    padding-bottom: 10px;
+  }
+  @include e(add-page-form) {
+    padding-top: 20px;
+  }
+  @include e(main) {
+    height: calc(100% - 39px);
+    display: flex;
+  }
+  @include e(aside) {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    @include m(handle) {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      right: 0;
+      width: 0;
+      height: 0;
+      border-width: 8px 8px 8px 0;
+      border-style: solid;
+      border-color: transparent #999 transparent transparent;
+      cursor: pointer;
+      z-index: 100;
+    }
+    @include m(tabs) {
+      width: 400px;
+      background-color: #ffffff;
+      & > .es-tabs__header {
+        margin-right: 0 !important;
+        & > .es-tabs__nav-wrap {
+          position: relative;
+          &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 1px;
+            height: 100%;
+            background-color: $--border-color-base;
+          }
+        }
+        .es-tabs__nav {
+          border: 0 !important;
+        }
+        .es-tabs__item {
+          width: 50px;
+          padding: 0 12px;
+          border: 0 !important;
+          text-align: center !important;
+          &.is-active {
+            border-top: $--border-base !important;
+            border-bottom: $--border-base !important;
+            border-right: solid 1px #ffffff !important;
+            &:first-child {
+              border-top-color: #ffffff !important;
+            }
+          }
+          [class*='low-icon-'] {
+            font-size: 16px;
+          }
+        }
+      }
+      .es-tab-pane {
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+    @include m(title) {
+      height: 32px;
+      padding: 0 8px 0 12px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    @include m(add) {
+      font-size: 20px;
+      padding: 4px 8px;
+      color: $--color-primary;
+    }
+    @include m(empty) {
+      height: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      color: $--font-color-secondary;
+    }
+    @include m(form-btn) {
+      text-align: right;
+    }
+  }
+  @include e(attribute) {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    @include m(handle) {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      left: 0;
+      width: 0;
+      height: 0;
+      border-width: 8px 0 8px 8px;
+      border-style: solid;
+      border-color: transparent transparent transparent #999;
+      cursor: pointer;
+      z-index: 100;
+    }
+    @include m(tabs) {
+      height: 100%;
+      width: 350px;
+      border-left: $--border-base;
+      & > .es-tabs__header {
+        height: 30px;
+        .es-tabs__nav {
+          width: 100%;
+          border-top: 0 !important;
+          border-left: 0 !important;
+          border-radius: 0 !important;
+          display: flex;
+        }
+        .es-tabs__item {
+          height: 30px;
+          line-height: 30px;
+          flex: 1;
+        }
+      }
+      & > .es-tabs__content {
+        height: calc(100% - 30px);
+        .es-tab-pane {
+          height: 100%;
+          .es-scrollbar__view {
+            padding: 20px;
+          }
+        }
+      }
+      .es-form-content {
+        padding: 20px;
+      }
+    }
+  }
+  @include e(property) {
+    height: 100%;
+    @include m(dialog-footer) {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  @include e(styles) {
+    height: 100%;
+  }
+  @include e(datas) {
+    height: 100%;
+    .es-input-group__prepend,
+    .es-input-group__append {
+      padding: 0 8px;
+      .es-button {
+        margin: -10px -12px;
+      }
+    }
+  }
+  @include e(canvas) {
+    flex: 1;
+    padding: 12px;
+    border-left: $--border-base;
+    background-color: #f5f5f5;
+    position: relative;
+    @include m(content) {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: calc(100% - 24px);
+      height: calc(100% - 24px);
+      background-color: #ffffff;
+      overflow: hidden;
+      transform: translate(-50%, -50%);
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        box-sizing: border-box;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+        opacity: 0.5;
+      }
+      &.is-empty {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      &:not(.is-empty):not(.is-active):hover {
+        &::before {
+          border: 2px dashed #bd813b;
+          background-color: #fdf5eb;
+        }
+      }
+      &.is-active {
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          box-sizing: border-box;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border: 2px solid $--color-primary;
+          border-radius: 4px;
+          background-color: $--color-primary-light-2;
+        }
+      }
+    }
+    @include m(component) {
+      position: relative;
+      transition: transform 0.2s ease;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        cursor: move;
+        border: 1px dashed #999;
+        border-radius: 4px;
+      }
+      &:hover {
+        background-color: #fdf5eb;
+        &::after {
+          border: 2px dashed #bd813b;
+        }
+      }
+      &.is-active {
+        background-color: $--color-primary-light-2;
+        &::after {
+          border: 2px solid $--color-primary;
+        }
+      }
+    }
+  }
+  @include e(modules) {
+    height: calc(100% - 32px);
+    padding-right: 8px;
+    padding-left: 8px;
+    .es-collapse {
+      border-top: none;
+    }
+    .es-tabs__nav-wrap {
+      &::after {
+        height: 1px;
+      }
+    }
+    @include m(item) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 8px;
+      border-radius: 4px;
+      background-color: #fafafa;
+      border: 1px dashed transparent;
+      cursor: move;
+      line-height: 20px;
+      &:hover {
+        border-color: #e3e6ec;
+      }
+    }
+    @include m(item-dom) {
+      font-size: 14px;
+      color: $--color-primary;
+    }
+    @include m(content) {
+      .es-collapse-item__content {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 12px;
+      }
+    }
+    @include m(contents) {
+      padding: 12px 0;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: 12px;
+    }
+  }
+  @include e(events) {
+    height: 100%;
+  }
+  @include e(pages) {
+    height: calc(100% - 32px);
+    .es-scrollbar.is-page {
+      height: calc(100% - 48px);
+    }
+    .es-scrollbar__view {
+      padding-right: 8px;
+      padding-left: 8px;
+    }
+    @include m(item) {
+      height: 32px;
+      padding: 4px 8px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      border-radius: 6px;
+      &:hover {
+        background-color: $--color-primary-light-1;
+      }
+      &.is-active {
+        background-color: $--color-primary-light-1;
+      }
+    }
+    @include m(item-name) {
+      font-size: 14px;
+      color: $--font-color-secondary;
+    }
+    @include m(item-delete) {
+      color: #999999;
+    }
+    .es-pagination {
+      justify-content: center;
+    }
+  }
+  @include e(handles) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0 4px;
+    z-index: 100;
+    .es-button {
+      color: #e94c41;
+    }
+  }
+  @include e(resize-size) {
+    position: absolute;
+    font-size: 16px;
+  }
+  @include e(resize-handle) {
+    position: absolute;
+    font-size: 14px;
+    z-index: 100;
+    &.is-top {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: ns-resize;
+      .es-lowcode__resize-size {
+        right: -4px;
+        top: 4px;
+        transform: translateX(100%);
+      }
+    }
+    &.is-bottom {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: ns-resize;
+      .es-lowcode__resize-size {
+        right: -4px;
+        bottom: 4px;
+        transform: translateX(100%);
+      }
+    }
+    &.is-left {
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: ew-resize;
+      .es-lowcode__resize-size {
+        left: 4px;
+        top: -20px;
+      }
+    }
+    &.is-right {
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: ew-resize;
+      .es-lowcode__resize-size {
+        top: -20px;
+        right: 4px;
+      }
+    }
+  }
+  @include e(toolbar) {
+    height: 39px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px;
+    position: relative;
+    @include m(size) {
+      display: flex;
+      gap: 4px;
+      justify-content: center;
+      align-items: center;
+      .es-input {
+        width: 50px;
+      }
+    }
+    @include m(size-split) {
+      font-size: 20px;
+      color: #999;
+    }
+    @include m(right) {
+      position: absolute;
+      right: 16px;
+      display: flex;
+      gap: 10px;
+    }
+  }
+}

package/packages/theme-chalk/src/main.scss

@@ -45,22 +45,6 @@
     transform: translate(-100%, 0px);
   }
 }
-@keyframes runShrink {
-  0% {
-    left: 0;
-  }
-  100% {
-    left: 220px;
-  }
-}
-@keyframes closeShrink {
-  0% {
-    left: 220px;
-  }
-  100% {
-    left: 0;
-  }
-}
 .applications-hover {
   opacity: 0;
   display: flex;
@@ -152,55 +136,26 @@
     }
   }
   @include e(ai) {
-    height: 114px;
     position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    @include when(shrink) {
-      animation: runShrink 0.3s forwards;
-    }
-    @include when(close) {
-      animation: closeShrink 0.3s forwards;
-    }
-    @include m(content) {
-      height: 76px;
-      width: 800px;
-      position: absolute;
-      bottom: 22px;
-      left: 50%;
-      transform: translateX(-50%);
-      border-radius: 9px;
-      overflow: hidden;
-      @include when(open) {
-        height: 600px;
-        box-shadow: 0px 2px 24px 0px rgba(33, 70, 141, 0.1);
-      }
-    }
+    user-select: none;
     @include m(logo) {
       width: 100%;
       height: 100%;
     }
-
-    @include when(full) {
-      position: absolute;
-      left: 0;
-      top: 54px;
-      width: 100%;
-      height: calc(100% - 54px);
-      .es-main__ai--content {
-        left: 12px;
-        right: 12px;
-        top: 12px;
-        bottom: 12px;
-        height: unset;
-        width: unset;
-        transform: translateX(0);
-      }
-    }
-    @include when(float) {
-      user-select: none;
-    }
+    // @include m(content) {
+    //   height: 76px;
+    //   width: 800px;
+    //   position: absolute;
+    //   bottom: 22px;
+    //   left: 50%;
+    //   transform: translateX(-50%);
+    //   border-radius: 9px;
+    //   overflow: hidden;
+    //   @include when(open) {
+    //     height: 600px;
+    //     box-shadow: 0px 2px 24px 0px rgba(33, 70, 141, 0.1);
+    //   }
+    // }
   }
 }
 @include b(main-application) {
@@ -443,6 +398,11 @@
       right: -4px;
       cursor: pointer;
     }
+    @include m(text) {
+      width: 66px;
+      text-align: center;
+      @extend .es-text-ellipsis;
+    }
   }
   @include e(search) {
     padding-bottom: 20px;
@@ -489,8 +449,8 @@
     }
     @include m(apps-item) {
       height: 42px;
-      margin-right: 0;
-      display: flex;
+      margin-right: 0 !important;
+      display: flex !important;
       flex-direction: row-reverse;
       justify-content: space-between;
       align-items: center;
@@ -1089,7 +1049,7 @@
       }
       @include when(disabled) {
         color: $--button-disabled-font-color;
-        user-select: none;
+        cursor: not-allowed;
         &:hover {
           background-color: transparent;
         }
@@ -1105,7 +1065,7 @@
         margin: 0;
         border-bottom: 1px solid #dfebf6;
         background-color: #fff;
-        & > .es-tabs__nav-main {
+        & > .es-tabs__nav-wrap {
           margin: 0 10px;
         }
         .es-tabs__nav-next,
@@ -1460,7 +1420,7 @@
     font-size: 16px;
     color: #ffffff;
     padding: 16px 24px;
-    background-color: #2591f7;
+    background-color: $--color-primary;
     position: absolute;
     top: 0;
     right: 0;
@@ -2170,3 +2130,6 @@
   position: absolute !important;
   width: 1620px;
 }
+.v-modal.is-gzw {
+  opacity: 0;
+}

package/packages/theme-chalk/src/pagination.scss

@@ -205,57 +205,16 @@
     .btn-next,
     .es-pager li {
       margin: 0 4px;
-      background-color: $--color-info-lighter;
-      color: $--color-text-regular;
-      min-width: 30px;
-      border-radius: 2px;
-
-      &.disabled {
-        color: $--color-text-placeholder;
-      }
-    }
-
-    .btn-prev,
-    .btn-next {
-      padding: 0;
-
-      &:disabled {
-        color: $--color-text-placeholder;
-      }
-    }
-
-    .es-pager li:not(.disabled) {
-      &:hover {
-        color: $--pagination-hover-color;
-      }
-
-      &.active {
-        background-color: $--color-primary;
-        color: $--color-white;
-      }
-    }
-
-    &.es-pagination--small {
-      .btn-prev,
-      .btn-next,
-      .es-pager li {
-        margin: 0 3px;
-        min-width: 22px;
-        line-height: 20px;
-      }
-    }
-  }
-  @include when(border) {
-    .es-pager li {
-      margin: 0 4px;
-      border: $--border-base;
+      background-color: $--pagination-background-color;
       color: $--color-text-regular;
       min-width: 32px;
       border-radius: 6px;
+      border: $--border-base;
       line-height: 30px;
       &.more::before {
         line-height: 30px;
       }
+
       &.disabled {
         color: $--color-text-placeholder;
       }
@@ -272,23 +231,13 @@
 
     .es-pager li:not(.disabled) {
       &:hover {
-        border: none;
         color: $--color-white;
         background-color: $--color-primary;
-        line-height: 30px;
-        &.more::before {
-          line-height: 30px;
-        }
       }
 
       &.active {
-        border: none;
         background-color: $--color-primary;
         color: $--color-white;
-        line-height: 30px;
-        &.more::before {
-          line-height: 30px;
-        }
       }
     }
 
@@ -298,6 +247,7 @@
       .es-pager li {
         margin: 0 3px;
         min-width: 22px;
+        line-height: 20px;
       }
     }
   }
@@ -318,7 +268,6 @@
 
   li {
     padding: 0 4px;
-    background: $--pagination-background-color;
     vertical-align: top;
     display: inline-block;
     font-size: $--pagination-font-size;

package/packages/theme-chalk/src/qrcode-login.scss

@@ -10,12 +10,14 @@
     font-weight: 400;
     text-align: center;
     line-height: 20px;
+    padding-top: 8px;
   }
   @include e(app-name) {
     color: $--color-primary;
     cursor: pointer;
   }
   &+ .es-login__download-setup {
-    margin-top: 4px;
+    margin-top: 10px;
+    height: 20px;
   }
 }