hbte-saas-ui 0.0.1

package/packages/theme-chalk/icon.scss

@@ -0,0 +1,96 @@
+@font-face {
+  font-family: "hbte-ui-font"; /* Project id 2073824 */
+  src: url("./fonts/iconfont.ttf?t=1653967282797") format("truetype");
+}
+
+[class*="hbui-"] {
+  font-family: "hbte-ui-font" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.hbui-bianji:before {
+  content: "\e6fd";
+}
+
+.hbui-bianji1:before {
+  content: "\e6e1";
+}
+
+.hbui-gaojichaxun:before {
+  content: "\e657";
+}
+
+.hbui-jianshao:before {
+  content: "\e6cb";
+}
+
+.hbui-zengjia:before {
+  content: "\e6cc";
+}
+
+.hbui-shanchu:before {
+  content: "\e6d5";
+}
+
+.hbui-shangchuan:before {
+  content: "\e6d6";
+}
+
+.hbui-daochu:before {
+  content: "\e6d8";
+}
+
+.hbui-daoru:before {
+  content: "\e6da";
+}
+
+.hbui-xiazai:before {
+  content: "\e6d7";
+}
+
+.hbui-piliangdaochu:before {
+  content: "\e6d9";
+}
+
+.hbui-chakan:before {
+  content: "\e6dc";
+}
+
+.hbui-sousuo:before {
+  content: "\e6dd";
+}
+
+.hbui-zhuxiao:before {
+  content: "\e6de";
+}
+
+.hbui-gengduo:before {
+  content: "\e6e3";
+}
+
+.hbui-dayin:before {
+  content: "\e6e4";
+}
+
+.hbui-shuaxin:before {
+  content: "\e6e5";
+}
+
+.hbui-shouqi:before {
+  content: "\e6ef";
+}
+
+.hbui-zhankai:before {
+  content: "\e6f0";
+}
+
+.hbui-quxiao:before {
+  content: "\e6c3";
+}
+
+.hbui-gengduo2:before {
+  content: "\e6e9";
+}

package/packages/theme-chalk/image-viewer.scss

@@ -0,0 +1,94 @@
+@import "common/var.scss";
+.hb-image-viewer {
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  padding: 0;
+  background: rgba($color: #000000, $alpha: 0.95);
+  width: 100vw;
+  height: 100vh;
+  z-index: 10000;
+  img {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition: transform 0.3s;
+  }
+  .tool {
+    position: absolute;
+    &.close {
+      width: 40px;
+      height: 40px;
+      top: 20px;
+      right: 20px;
+      font-size: 17px;
+      color: #fff;
+      line-height: 40px;
+      &:hover {
+        background: rgba($color: #ffffff, $alpha: 0.1);
+      }
+    }
+    &.size {
+      width: 70px;
+      height: 34px;
+      border-radius: 17px;
+      background: rgba($color: #000000, $alpha: 0.6);
+      color: #fff;
+      text-align: center;
+      line-height: 34px;
+      top: calc(50vh - 17px);
+      left: calc(50vw - 35px);
+    }
+    &.prev,
+    &.next {
+      width: 48px;
+      height: 48px;
+      background: rgba($color: #ffffff, $alpha: 0.2);
+      font-size: 18px;
+      color: #fff;
+      line-height: 48px;
+      top: calc(50vh - 24px);
+      &:hover {
+        background: rgba($color: #ffffff, $alpha: 0.4);
+      }
+    }
+    &.prev {
+      left: 26px;
+    }
+    &.next {
+      right: 26px;
+    }
+  }
+  .btn {
+    text-align: center;
+    border-radius: 50%;
+    color: #fff;
+    cursor: pointer;
+  }
+  .btn-wrapper {
+    width: 100vw;
+    height: 60px;
+    line-height: 60px;
+    background: linear-gradient(
+      0deg,
+      rgba(28, 28, 28, 0.4) 0%,
+      rgba(28, 28, 28, 0) 100%
+    );
+    bottom: 0;
+    left: 0;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    .btn {
+      width: 36px;
+      height: 36px;
+      margin: 14px;
+      font-size: 22px;
+      &:hover {
+        background: #666666;
+      }
+      line-height: 36px;
+    }
+  }
+}

package/packages/theme-chalk/index.scss

@@ -0,0 +1,21 @@
+@import "./common/reset.scss";
+@import "./common/elementCover.scss";
+// @import "./common/global.scss";
+@import "adv-query.scss";
+@import "custom-query.scss";
+@import "dialog.scss";
+@import "fragment.scss";
+@import "full-table.scss";
+@import "filter-drop.scss";
+@import "pagination.scss";
+@import "icon.scss";
+@import "edit-area.scss";
+@import "nav-menu.scss";
+@import "table.scss";
+@import "tool-group.scss";
+@import "top-bar.scss";
+@import "organize-dialog.scss";
+@import "authority.scss";
+@import "float-footer.scss";
+@import "select.scss";
+@import "image-viewer.scss";

package/packages/theme-chalk/nav-menu.scss

@@ -0,0 +1,205 @@
+@import "common/var.scss";
+.hb-navmenu {
+  height: calc(100vh - 60px);
+  width: 70px;
+  background-color: #2878ff;
+  position: relative;
+  &--open {
+    width: calc(70px + 179px);
+  }
+  &--transition {
+    transition: 0.2s width ease-out;
+  }
+  &--collapse {
+    animation: collapseOpen 0.2s;
+  }
+  &--collapse-closed {
+    transition: all 0 ease;
+    animation: collapseOpen 0.2s;
+  }
+  &-main {
+    // 没用上
+    // &-logo {
+    //   width: 40px;
+    //   height: 40px;
+    //   opacity: 0.8;
+    //   margin: 12px 0 14px 15px;
+    // }
+    height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    &__explain {
+      color: #fff;
+      max-width: 50px;
+      font-size: 12px;
+      opacity: 1;
+    }
+    &__item {
+      width: 60px;
+      height: 72px;
+      margin-bottom: 10px;
+      margin-left: 5px;
+      text-align: center;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      cursor: pointer;
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+        .hb-navmenu-main__explain {
+          opacity: 1;
+        }
+      }
+      .hb-navmenu-main__explain {
+        opacity: 0.8;
+      }
+      // transition: all 0.1 ease;
+      > i {
+        font-size: 20px;
+        color: #fff;
+        margin-bottom: 8px;
+        transition: all 0.4s ease-out;
+      }
+      > p {
+        transition: opacity 0.4s ease-out;
+      }
+      &--isactive {
+        background: rgba(255, 255, 255, 0.2);
+        .hb-navmenu-main__explain {
+          transition: opacity 0.4s ease-out;
+          opacity: 1;
+        }
+      }
+      &--isactive > &__explain {
+        opacity: 1;
+      }
+    }
+  }
+
+  &-sub {
+    width: 179px;
+    height: 100%;
+    position: absolute;
+    z-index: 100;
+    left: 70px;
+    top: 0;
+    background-color: #ffffff;
+    border-right: 1px solid #f3f3f3;
+    border-top: 10px solid transparent;
+    box-sizing: border-box;
+    &-bar {
+      background-color: #f7f8fb;
+      width: 179px;
+      height: 10px;
+    }
+    &--closed {
+      width: 0;
+    }
+
+    &--transition {
+      transition: 0.2s width ease-out;
+    }
+
+    &-hide {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      box-sizing: border-box;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    &-item {
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 14px 16px 14px 0;
+      font-size: 13px;
+      font-weight: 400;
+      color: #444444;
+
+      i {
+        margin-left: 16px;
+        margin-right: 10px;
+      }
+
+      &:hover {
+        background: #eef4ff;
+        color: #488af8;
+      }
+    }
+    &-content {
+      width: 179px;
+
+      &--active {
+        background: #eef4ff;
+        color: #488af8;
+      }
+
+      &__title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        font-weight: 400;
+        color: #222;
+        margin-left: 16px;
+        // padding: 22px 16px 14px;
+        background: #fff;
+        padding: 14px 16px 14px 0;
+
+        &:hover {
+          background: #fff;
+          color: #444444;
+        }
+      }
+    }
+  }
+  &-sub > &--collapse {
+    color: #dcdcdc;
+    font-size: 63px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: -1px;
+    width: 20px;
+    height: 64px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+  &-sub > &--collapse-closed {
+    color: #dcdcdc;
+    font-size: 63px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: -1px;
+    width: 20px;
+    height: 64px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+}
+
+@keyframes collapseOpen {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/packages/theme-chalk/organize-dialog.scss

@@ -0,0 +1,170 @@
+@import "common/var.scss";
+.hb-organizedialog__loading {
+  height: 536px;
+}
+.hb-organizedialog {
+  &__wrapper {
+    height: 536px;
+    overflow: hidden;
+    display: flex;
+    .hb-organizedialog__part {
+      width: 50%;
+    }
+    .hb-organizedialog__choosed {
+      border-right: 1px solid #f2f2f2;
+      padding-right: 10px;
+      position: relative;
+      &-wrapper {
+        max-height: 300px;
+        overflow-y: auto;
+        .hb-organizedialog__choosed-list {
+          display: flex;
+          flex-wrap: wrap;
+          .item {
+            box-sizing: border-box;
+            height: 26px;
+            line-height: 26px;
+            border-radius: 4px;
+            background: #f1f1f2;
+            margin-right: 6px;
+            margin-bottom: 6px;
+            font-size: $listFontSize;
+            color: $subColor;
+            padding: 0 8px;
+            i {
+              margin-left: 10px;
+              padding: 8px 10px;
+              padding-right: 0px;
+              cursor: pointer;
+            }
+          }
+          &--origin.item {
+            background: none;
+            border: 1px dashed #ccc;
+            cursor: not-allowed;
+            &.allowed {
+              cursor: auto;
+            }
+          }
+        }
+      }
+      .hb-organizedialog__search {
+        margin: 10px 0;
+        margin-right: 10px;
+        .el-input {
+          display: block;
+        }
+        .el-dropdown {
+          display: block;
+        }
+      }
+      .hb-organizedialog__foot {
+        width: calc(100% - 20px);
+        text-align: center;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+      }
+    }
+    .hb-organizedialog__tree {
+      padding-left: 20px;
+      &-company {
+        color: $mainColor;
+        font-size: $articleFontSize;
+        margin-bottom: 16px;
+      }
+    }
+    .hb-organizedialog__nav {
+      display: flex;
+      flex-wrap: wrap;
+      color: $subColor2;
+      font-size: $articleFontSize;
+      line-height: 18px;
+      margin-bottom: 15px;
+      &-item {
+        cursor: pointer;
+        &:not(:last-child):after {
+          content: " / ";
+          display: inline-block;
+          padding: 0 5px;
+        }
+        &.not-allow {
+          color: $subColor3;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+      }
+    }
+    .hb-organizedialog__tree-wrapper {
+      overflow-y: auto;
+      height: 465px;
+      .hb-organizedialog__tree-item {
+        display: flex;
+        justify-content: space-between;
+        line-height: 24px;
+        margin-top: 16px;
+        padding-right: 20px;
+        .avatar {
+          width: 23px;
+          height: 23px;
+          margin-right: 10px;
+          border-radius: 50%;
+        }
+        .subordinate-btn {
+          cursor: pointer;
+          border: none;
+          background: none;
+          color: $subColor2;
+          font-size: $articleFontSize;
+          &.not-allow {
+            color: $disableColor;
+            cursor: not-allowed;
+            &:hover {
+              color: $disableColor;
+            }
+          }
+          &:hover {
+            color: $subColor2;
+          }
+        }
+      }
+    }
+  }
+}
+
+//非全局dropdown下拉框样式
+body .hb-organizedialog__organization {
+  width: 305px;
+  max-height: 180px;
+  overflow-y: auto;
+  li {
+    height: 36px;
+    i {
+      color: #488af8;
+      font-style: normal;
+      margin: 0;
+    }
+    img.avatar {
+      margin-right: 10px;
+      width: 23px;
+      height: 23px;
+      border-radius: 50%;
+    }
+    span {
+      color: $subColor2;
+      font-size: $articleFontSize;
+      display: inline-block;
+      max-width: 224px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &.is-disabled {
+      cursor: not-allowed;
+      span,
+      span > i {
+        color: $disableColor;
+      }
+    }
+  }
+}

package/packages/theme-chalk/pagination.scss

@@ -0,0 +1,91 @@
+.hb-pagination {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  justify-content: flex-end;
+  position: relative;
+  // 针对下拉icon进行控制
+  &__dropdown-icon {
+    display: block !important;
+    line-height: 22px !important;
+  }
+
+  // 调整elementUI样式
+  .el-pagination {
+    padding: 5px 0;
+
+    &.is-background {
+      .btn-prev,
+      .btn-next,
+      .btn-dropdown,
+      .el-pager li {
+        cursor: pointer;
+        width: 24px;
+        height: 22px;
+        line-height: 22px;
+        min-width: 22px;
+        border: 1px solid #dbdbdb;
+        border-radius: 2px;
+        background-color: #f4f4f5;
+      }
+      .el-pagination__total {
+        position: absolute;
+        left: 18px;
+        color: #222222;
+        top: 8px;
+      }
+    }
+  }
+
+  .el-pagination__total {
+    height: 24px !important;
+    line-height: 24px !important;
+  }
+
+  .el-pagination__sizes {
+    height: 24px !important;
+    line-height: 24px !important;
+
+    .el-input--suffix {
+      width: 80px !important;
+
+      .el-input__inner {
+        width: 80px !important;
+        height: 24px !important;
+        line-height: 24px !important;
+        border-radius: 2px;
+      }
+    }
+  }
+  // slot
+  &-slot {
+    display: inline-block;
+    height: 24px;
+
+    &_text {
+      height: 24px !important;
+      line-height: 24px !important;
+      text-align: center;
+      min-width: 24px !important;
+    }
+    &_input {
+      width: 45px !important;
+
+      .el-input__inner {
+        width: 40px !important;
+        height: 24px !important;
+        border-radius: 2px;
+      }
+    }
+
+    &_text {
+      font-weight: 400;
+      font-size: 12px;
+      color: #222222;
+      min-width: 20px;
+      height: 24px;
+      line-height: 24px;
+    }
+  }
+}

package/packages/theme-chalk/select.scss

@@ -0,0 +1,8 @@
+@import "common/var.scss";
+
+.hb-select {
+}
+
+.high-light {
+  color: $primaryBg;
+}