hbte-saas-ui 0.0.1

package/packages/theme-chalk/common/flex.scss

@@ -0,0 +1,66 @@
+@import "var.scss";
+// flex快速布局
+// parent
+.flex-block .flex-column, .flex-start, .flex-between, .flex-end, .flex-center, .flex-around, .flex-wrap, .flex-middle, .flex_middle_center {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction:column;
+}
+
+.flex-start {
+  justify-content: flex-start;
+}
+
+.flex-between {
+  justify-content: space-between;
+}
+  
+.flex-end {
+  justify-content: flex-end;
+}
+
+.flex-center {
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.flex-around {
+  justify-content: space-around;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-middle {
+  align-content: center;
+}
+
+.flex_middle_center {
+  align-items: center;
+}
+
+.flex-column-center {
+  align-items: center;
+}
+
+// children
+.flex0, .flex, .flex1, .flex2, .flex3, .flex4, .flex5, .flex6, .flex7, .flex8, .flex9 {
+  min-width: 0;
+}
+  
+.flex0 {
+  flex: 0 0 auto;
+}
+
+
+@for $i from 1 through 10 {
+  .flex#{$i} {
+    flex: ($i * 1)
+  }
+}
+
+

package/packages/theme-chalk/common/global.scss

@@ -0,0 +1,147 @@
+@import "./elementCover.scss";
+@import "./flex.scss";
+
+.iconfont,
+[class*="icon"] {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[class*=" el-icon-"],
+[class^="el-icon-"] {
+  font-family: element-icons !important;
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: baseline;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// // 一些常用margin值 直接使用ml30 -> margin-left 30
+@for $i from 1 through 50 {
+  .ml#{$i} {
+    margin-left: ($i * 1px);
+  }
+
+  .mr#{$i} {
+    margin-right: ($i * 1px);
+  }
+
+  .mt#{$i} {
+    margin-top: ($i * 1px);
+  }
+
+  .mb#{$i} {
+    margin-bottom: ($i * 1px);
+  }
+
+  .pl#{$i} {
+    padding-left: ($i * 1px);
+  }
+
+  .pr#{$i} {
+    padding-right: ($i * 1px);
+  }
+
+  .pt#{$i} {
+    padding-top: ($i * 1px);
+  }
+
+  .pb#{$i} {
+    padding-bottom: ($i * 1px);
+  }
+}
+
+@import "var.scss";
+
+.clearfix::after {
+  content: "";
+  visibility: hidden;
+  display: block;
+  height: 0;
+  clear: both;
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.text-overflow {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.w100 {
+  width: 100% !important;
+}
+
+.h100 {
+  height: 100% !important;
+}
+
+.hiddenScrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0 !important;
+  }
+}
+
+/** 以下为UI统一的基础样式规范 */
+
+// 主标题 + 加粗，用于各种页面普遍的、不特殊的标题
+.hb-title {
+  font-size: 14px;
+  color: #111;
+}
+
+.hb-title--bold {
+  font-size: 14px;
+  color: #111;
+  font-weight: bold;
+}
+
+// 列表标题 + 列内文本，用于各种列表、表格的基础样式
+.hb-list-title {
+  font-size: 12px;
+  color: #111;
+  font-weight: bold;
+}
+.hb-list-content {
+  font-size: 12px;
+  color: #222;
+}
+
+// 文章内容，用于p标签或者大篇幅文本
+.hb-article {
+  font-size: 13px;
+  color: #666;
+}
+
+// 常规边框颜色
+.hb-border {
+  border: 1px solid #eee;
+}
+
+// 禁用状态 用于自写的按钮、控件等，
+.hb-disable {
+  // font-size: 13px; // x 禁用状态无关文字
+  color: #c9c9c9;
+}

package/packages/theme-chalk/common/reset.scss

@@ -0,0 +1,92 @@
+/* 重置样式 */
+html,
+body,
+ul,
+li,
+ol,
+dl,
+dd,
+dt,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+img {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC,
+    Helvetica Neue, Noto Sans, Noto Sans CJK SC, Microsoft Yahei, Arial,
+    Hiragino Sans GB, sans-serif;
+  color: #111;
+  word-break: break-all;
+}
+
+body,
+html {
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+}
+
+ul,
+ol,
+dl {
+  list-style: none;
+}
+
+img {
+  vertical-align: middle;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+input::placeholder {
+  color: #999;
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px;
+  height: 8px;
+  border-radius: 0px;
+  z-index: 10;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  background: #dcdcdc;
+  // background: transparent ;
+  // box-shadow: inset 0 0 100px #dcdcdc ;
+  border-radius: 4px;
+  height: 8px;
+  // border: 4px solid transparent ;
+  z-index: 10;
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  background: #eff1f5;
+  // border-top: 1px solid #dbdbdb;
+  z-index: 10;
+}
+::-webkit-scrollbar-corner {
+  /*滚动条 交汇处*/
+  background: #eff1f5;
+}

package/packages/theme-chalk/common/var.scss

@@ -0,0 +1,46 @@
+//主题背景颜色
+$primaryBg: #488af8;
+$assistantBg: #eef4ff; //淡蓝色背景
+$successBg: #21c0a6;
+$warnBg: #ffa000;
+$dangerBg: #ff5a5a;
+$infoBg: #909399;
+$disabledBg: #ebebeb;
+$defaultBg: #ffffff;
+// 按钮交互色
+$primaryBgHover: #2878ff;
+$successBgHover: #00af92;
+$warnBgHover: #ff9600;
+$dangerBgHover: #ff4040;
+
+$plainPrimaryBg: #ecf3fe;
+$plainPrimaryBorderColor: #b6d0fc;
+
+$plainSuccessBg: #e8f9f6;
+$plainSuccessBorderColor: #a6e6db;
+
+$plainWarnBg: #fff5e5;
+$plainWarnBgHover: #faedd9;
+$plainWarnBorderColor: #ffd999;
+
+$plainDangerBg: #ffeeee;
+$plainDangerBgHover: #f9e2e2;
+$plainDangerBorderColor: #ffbdbd;
+
+// 字体颜色
+$mainColor: #111111;
+$subColor: #222222;
+$subColor1: #444444;
+$subColor2: #666666;
+$subColor3: #999999;
+$disableColor: #c9c9c9;
+$defaultColor: #ffffff;
+$dangerColor: #ff4040;
+
+// 字体大小
+$titleFontSize: 14px; // 标题字体大小
+$articleFontSize: 13px; // 普通文本、段落、文章内容字体大小
+$listFontSize: 12px; // 列表字体大小
+
+//默认边框色
+$defaultBorderColor: #dbdbdb;

package/packages/theme-chalk/custom-query.scss

@@ -0,0 +1,10 @@
+@import "common/var.scss";
+.hb-customquery{
+  &-text{
+    margin: 20px
+  }
+  /** elementUI调整 */
+  .el-form-item--small{
+    height: 50px;
+  }
+}

package/packages/theme-chalk/dialog.scss

@@ -0,0 +1,9 @@
+@import "common/var.scss";
+.hb-dialog {
+  &__wrapper {
+    overflow: hidden;
+  }
+  &__footer-btn {
+    border-radius: 6px;
+  }
+}

package/packages/theme-chalk/edit-area.scss

@@ -0,0 +1,119 @@
+@import "common/var.scss";
+.hb-editarea {
+  // cursor: url();
+  display: flex;
+  align-items: center;
+  width: 100%;
+  // 所有图标均为20
+  &-icon {
+    display: block;
+    height: 20px;
+    width: 20px;
+    font-size: 14px;
+    line-height: 20px; // 被iconfont影响只能加重权重
+    text-align: center;
+  }
+  // 单控件区域
+  &__form {
+    position: relative;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    &-item {
+      flex: 1;
+    }
+  }
+  // 文本区域
+  &__text {
+    flex: 1;
+    position: relative;
+    padding: 0 32px 0 12px;
+    min-height: 18px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  &__text > &-icon {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    margin-top: -10px;
+    display: none;
+    cursor: pointer;
+  }
+  &__text:hover > &-icon {
+    display: block;
+  }
+  // 控件编辑区域
+  &__edit {
+    box-sizing: border-box;
+    z-index: 1;
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 2px;
+    height: 100%;
+    input,
+    select,
+    textarea,
+    .el-input__inner {
+      border: none;
+      padding-right: 30px;
+      // padding: 0 30px 0 12px;
+    }
+    input,
+    select,
+    radio,
+    checkbox {
+      background-color: transparent;
+    }
+    .el-input {
+      height: 100%;
+    }
+    &-input {
+      flex: 1;
+    }
+  }
+  // 错误
+  &-error {
+    font-size: 18px;
+    color: $dangerColor;
+    cursor: pointer;
+  }
+  &__form &-error {
+    margin-left: 2px;
+  }
+  &__edit &-error {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    margin-top: -11px;
+    font-size: 18px;
+    color: $dangerBg;
+    right: 9px;
+    background-color: #ffffff;
+  }
+  // &__edit > &-input {
+  //   height: 100%;
+  // }
+  // 底层背景板
+  &__bg {
+    content: "";
+    z-index: -1;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #fff;
+    &--border {
+      border: 1px solid lighten($primaryBg, 10%);
+      border-radius: 1px;
+    }
+  }
+  // loading
+  &__loading {
+    margin-left: 12px;
+  }
+}

package/packages/theme-chalk/filter-drop.scss

@@ -0,0 +1,81 @@
+@import "common/var.scss";
+
+.hb-filterdrop {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  min-width: 24px;
+  border: 1px solid $defaultBorderColor;
+  border-radius: 2px;
+  cursor: pointer;
+  &__cover {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    border-radius: 5px;
+    cursor: not-allowed;
+  }
+  &--disabled {
+    background: #f5f7fa !important;
+    border-color: $disableColor;
+    color: #c0c4cc;
+  }
+  /* elementUI调整*/
+  .el-dropdown {
+    box-sizing: border-box;
+    display: block;
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    // 约束插槽大小
+    .el-dropdown-selfdefine {
+      width: 22px;
+      height: 22px;
+      min-width: 22px;
+      line-height: 22px;
+      text-align: center;
+    }
+  }
+
+  /* body上浮层 +*/
+  &__dropdown-selectMenu {
+    max-height: 600px;
+    padding-bottom: 0 !important;
+    overflow-y: auto;
+  }
+  &__custom-drop-checkbox {
+    width: 110px;
+    /* elementUI调整*/
+    .el-checkbox__label {
+      color: #666 !important;
+    }
+  }
+  &__main-darggable {
+    padding: 0 15px;
+  }
+  &__darggable-selectItem {
+    padding: 5px 0;
+  }
+  &__custom-dropdown-btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 15px;
+    background-color: #fff;
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    /* elementUI调整*/
+    .el-button {
+      width: 58px;
+      height: 30px;
+      padding: 0;
+    }
+  }
+}

package/packages/theme-chalk/float-footer.scss

@@ -0,0 +1,14 @@
+@import "common/var.scss";
+
+.hb-float-footer {
+  width: 100%;
+  position: absolute;
+  background: #fff;
+  padding: 10px 30px;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: flex-end;
+}

package/packages/theme-chalk/fragment.scss

@@ -0,0 +1,51 @@
+@import "common/var.scss";
+
+.hb-fragment {
+  &__layout {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__title {
+    font-size: 13px;
+    font-weight: 400;
+    color: #999;
+    line-height: 15px;
+    margin-bottom: 2px;
+    white-space: initial;
+  }
+
+  &__value {
+    font-size: 13px;
+    font-weight: 400;
+    color: #111111;
+    height: 24px;
+    line-height: 24px;
+    .hb-editarea__text {
+      height: 24px;
+      padding-left: unset;
+    }
+    // &--writable {
+    //   .el-input__inner {
+    //     height: 26px;
+    //     line-height: 26px;
+    //     font-size: 13px;
+    //     font-weight: 400;
+    //     color: #111111;
+    //   }
+    //   .el-input__suffix {
+    //     .el-input__icon {
+    //       line-height: 26px;
+    //     }
+    //   }
+    //   .el-input__prefix {
+    //     .el-input__icon {
+    //       line-height: 26px;
+    //     }
+    //   }
+    // }
+  }
+  .el-col-lg-4-8 {
+    width: 20%;
+  }
+}

package/packages/theme-chalk/full-table.scss

@@ -0,0 +1,40 @@
+@import "common/var.scss";
+
+.hb-fulltable {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #dbdbdb;
+  border-radius: 4px;
+  &__header,
+  &__footer {
+    transition: height 0.15s ease-out;
+    background: #eff1f5;
+  }
+  &__body {
+    position: relative;
+    flex: 1;
+    transition: height 0.15s ease-out;
+    &--inner {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      top: 0;
+      // border-bottom: 1px solid #dbdbdb;
+      border-radius: 4px;
+    }
+    .el-table::before {
+      height: 1px;
+      background-color: #dbdbdb;
+      z-index: 99;
+    }
+    .el-table--border,
+    .el-table--group {
+      border: none;
+    }
+    .el-table__fixed::before {
+      display: none;
+    }
+  }
+}