hbte-saas-ui 0.0.1

package/packages/theme-chalk/table.scss

@@ -0,0 +1,102 @@
+@import "common/var.scss";
+
+.hb-table {
+  display: flex;
+  border-radius: 4px;
+  overflow: hidden;
+  .el-table--border,
+  .el-table--group {
+    border: 1px solid #dbdbdb;
+  }
+  // 单元格样式
+  .el-table {
+    &__empty-block {
+      min-height: 155px;
+    }
+    &__fixed-right-patch,
+    &__cell.gutter {
+      background-color: #eff1f5;
+    }
+
+    // th > cell
+    th.hb-table-header-cell {
+      position: relative;
+      padding: 7px 0;
+      font-size: 12px;
+      background-color: #eff1f5;
+      border-color: #eeeeee;
+      color: $mainColor;
+
+      > .cell {
+        color: inherit;
+        font-weight: bold;
+        line-height: 20px;
+        padding-left: 12px;
+        padding-right: 12px;
+        vertical-align: middle;
+      }
+    }
+
+    // tr > cell
+    .hb-table-cell {
+      position: relative;
+      padding: 6px 0;
+      font-size: 12px;
+      border-color: #eeeeee;
+      color: #222222;
+
+      > .cell {
+        color: inherit;
+        line-height: 18px;
+        min-height: 18px;
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+      &:hover {
+        background-color: #ffffff;
+      }
+    }
+
+    // 序号列样式再调整
+    th.hb-table-index > .cell,
+    tr.hb-table-index > .cell {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+    // 无数据
+    .hb-table-nodata {
+      margin: 0 auto;
+      width: 140px;
+      height: 55px;
+      background: url("./images/nodata.png") no-repeat center;
+      background-size: 100% auto;
+    }
+    .hb-table-nodata-text {
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+    }
+
+    // 编辑单元格无边距，便于编辑区域填充整个单元格
+    .hb-table__edit {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      line-height: 31px;
+    }
+    .hb-table__keep {
+      position: relative;
+      // left: 0;
+      // top: 0;
+      // right: initial;
+      // bottom: initial;
+      display: block;
+      margin-left: -6px;
+      margin-right: -6px;
+      width: auto;
+    }
+  }
+}

package/packages/theme-chalk/tool-group.scss

@@ -0,0 +1,105 @@
+@import "common/var.scss";
+
+.hb-toolgroup {
+  padding: 10px 0;
+  height: 24px;
+  display: flex;
+  justify-content: space-around;
+
+  // 按钮
+  &-btn {
+    border-radius: 2px;
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    margin-right: 10px;
+    padding-left: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 24px;
+    vertical-align: middle;
+    background: $primaryBg;
+    color: #ffffff;
+    cursor: pointer;
+    &:hover {
+      background: #2878ff;
+    }
+    &-shrink {
+      padding-left: 4px;
+    }
+    &:active {
+      background: darken($primaryBg, 10%);
+    }
+    & > i {
+      position: absolute;
+      left: 2px;
+      top: 0;
+      display: block;
+      height: 24px;
+      width: 24px;
+      font-size: 14px;
+      line-height: 24px;
+      text-align: center;
+    }
+    & > span {
+      padding: 0 6px 0 2px;
+    }
+  }
+  &__prefix {
+    flex: 1;
+  }
+  &__inner {
+    display: block;
+    padding: 0 10px;
+  }
+  &__suffix {
+    width: 200px;
+    border-radius: 2px;
+    // elementUI调整
+    .el-input > input {
+      border: {
+        width: 1px 0 1px 1px;
+        style: solid;
+        color: #e5e5e5;
+      }
+
+      border-radius: 2px 0 0 2px;
+      padding-left: 28px;
+      height: 24px;
+      line-height: 22px;
+    }
+
+    .el-input__prefix {
+      left: 2px;
+
+      .el-input__icon {
+        line-height: 24px;
+        font-size: 16px;
+        color: #999;
+      }
+    }
+
+    .el-input-group__append {
+      border: none;
+      border-radius: 0 2px 2px 0;
+      padding: 0;
+      height: 24px;
+      font-size: 12px;
+      line-height: 24px;
+      color: #fff;
+      background-color: $primaryBg;
+      cursor: pointer;
+      .append-text {
+        display: block;
+        height: 24px;
+        padding: 0 10px;
+      }
+      &:hover {
+        background: #2878ff;
+      }
+      &:active {
+        background: darken($primaryBg, 10%);
+      }
+    }
+  }
+}

package/packages/theme-chalk/top-bar.scss

@@ -0,0 +1,195 @@
+@import "common/var.scss";
+.hb-topbar {
+  width: 100%;
+  min-width: 1360px;
+  height: 60px;
+  background-color: #fff;
+  padding-right: 0;
+  position: relative;
+  z-index: 200;
+  // padding-right: 20px;
+  // top
+  &__top {
+    height: 32px;
+    line-height: 32px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    border-bottom: 1px solid #f3f3f3;
+    padding-right: 20px;
+  }
+  &__wrap {
+    display: flex;
+  }
+  &__right {
+    display: flex;
+    .el-dropdown {
+      font-size: 12px;
+    }
+    &--dropdown-item {
+      font-size: 12px;
+    }
+  }
+  &__block {
+    height: 60px;
+    width: 70px;
+    padding: 12px 15px 0px 15px;
+    box-sizing: border-box;
+    background-color: #2878ff;
+  }
+  &__text {
+    margin-left: 13px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #111;
+  }
+  &-logo {
+    width: 40px;
+    height: 40px;
+  }
+  &-avatar {
+    display: flex;
+    align-items: center;
+    img {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-left: 15px;
+    }
+  }
+  &-icon {
+    display: flex;
+    align-items: center;
+    margin: 0px 10px;
+    &__item {
+      width: 24px;
+      height: 24px;
+      margin: 0px 5px;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 4px;
+      font-size: 16px;
+      &:hover {
+        color: $primaryBg;
+        background-color: #eef4ff;
+      }
+    }
+    &--active {
+      background: #ccc;
+    }
+  }
+  // 没用上？
+  &__slot {
+    display: flex;
+  }
+
+  &__bottom {
+    width: calc(100% - 70px);
+    margin-left: 70px;
+    display: flex;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    border-bottom: 1px solid #f3f3f3;
+    padding-right: 20px;
+  }
+  &-routetab {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    width: 220px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    color: #5e6479;
+    padding: 0px 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    align-items: center;
+    position: relative;
+    &__line {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 1px;
+      background-color: #edeeef;
+    }
+    i.home {
+      margin-right: 10px;
+      margin-left: 6px;
+    }
+    &:hover {
+      background-color: #eff1f5;
+    }
+    &--active {
+      background-color: #eff1f5;
+      font-weight: 400;
+      .hb-topbar-routetab__title {
+        color: #111;
+      }
+    }
+    &__title {
+      width: calc(100%);
+      background: linear-gradient(to right, #111111 85%, #fff);
+      background-clip: text;
+      color: transparent !important;
+      overflow: hidden;
+    }
+
+    &__close {
+      width: 16px;
+    }
+    &__event {
+      cursor: pointer;
+      height: 24px;
+      font-size: 12px;
+      line-height: 24px;
+      text-align: center;
+      &:hover {
+        background-color: #eef4ff;
+        color: #488af8;
+      }
+    }
+  }
+  &__event {
+    position: absolute;
+    width: 128px;
+    max-height: 118px;
+    background: #ffffff;
+    border: 1px solid #eee;
+    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    padding: 10px 0px;
+    box-sizing: border-box;
+  }
+  // 没用上？
+  &__options {
+    text-align: center;
+    cursor: pointer;
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+    color: #111;
+
+    &:hover {
+      background: #eef4ff;
+      color: #488af8;
+    }
+  }
+}
+.el-dropdown-choose-system {
+  width: 118px;
+  .el-dropdown-menu__item {
+    padding: 0 12px;
+    .wrapper {
+      i {
+        margin-right: 10px;
+        font-size: 14px;
+      }
+    }
+  }
+}

package/packages/tool-group/index.js

@@ -0,0 +1,13 @@
+import HbToolgroup from "./src/main.vue";
+import config from "./src/config.js"
+HbToolgroup.install = function (Vue) {
+  Vue.component(HbToolgroup.name, HbToolgroup);
+};
+HbToolgroup.config = function (icons) {
+  // 合并传入的icon和默认的icons
+  config.iconConfig = config.iconConfig.concat(icons.filter(item => config.iconConfig.find(icon =>
+    icon.event !== item.event)));
+
+};
+
+export default HbToolgroup;

package/packages/tool-group/src/config.js

@@ -0,0 +1,40 @@
+export default {
+  // 事件名
+  eventName: "event",
+  // 使用关键字
+  useKw: true,
+  // placehodler
+  defPlaceholder: "请输入关键字",
+  // icon配置
+  iconConfig: [
+    {
+      event: "add",
+      text: "新增",
+      icon: "hbui-zengjia",
+    },
+    { event: "edit", text: "编辑", icon: "icon-bianji" },
+    {
+      event: "delete",
+      text: "删除",
+      icon: "hbui-shanchu",
+    },
+    {
+      event: "upload",
+      text: "导入",
+      icon: "hbui-shangchuan",
+    },
+    { event: "download", text: "下载", icon: "icon-xiazai" },
+    {
+      event: "print",
+      text: "打印",
+      icon: "hbui-dayin",
+    },
+    {
+      event: "export",
+      text: "导出",
+      icon: "icon-i-daochu1",
+    },
+  ],
+  // 默认显示的icon
+  defIcons: [],
+};

package/packages/tool-group/src/main.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="hb-toolgroup">
+    <div class="hb-toolgroup__prefix">
+      <div
+        class="hb-toolgroup-btn"
+        v-for="item in validIcons"
+        :class="{ 'hb-toolgroup-btn-shrink': !item.icon }"
+        :key="item.event"
+        @click="handleClickIcon(item)"
+      >
+        <i v-if="item.icon" :class="item.icon"></i>
+        <span>{{ item.text }}</span>
+      </div>
+    </div>
+    <div class="hb-toolgroup__inner">
+      <slot></slot>
+    </div>
+    <div v-if="useKw" class="hb-toolgroup__suffix">
+      <el-input
+        :placeholder="placeholder"
+        v-model="params[kwkey]"
+        prefix-icon="el-icon-search"
+        size="mini"
+        clearable
+      >
+        <template slot="append">
+          <span class="append-text" @click="handleSearch">搜索</span>
+        </template>
+      </el-input>
+    </div>
+  </div>
+</template>
+<script>
+import CONFIG from "./config";
+export default {
+  name: "HbToolgroup",
+  componentName: "HbToolgroup",
+  props: {
+    useKw: {
+      type: Boolean,
+      default: () => CONFIG.useKw,
+    },
+    icons: {
+      type: Array,
+      default: () => CONFIG.defIcons,
+    },
+    tools: {
+      type: Array,
+      default: () => [],
+    },
+    params: {
+      type: Object,
+      default: () => {},
+    },
+    kwkey: {
+      default: () => "name",
+    },
+  },
+  computed: {
+    // 按传入顺序排序
+    validIcons() {
+      const all = [...this.iconsConfig, ...this.tools];
+      const targets = [];
+      for (let i = 0; i < this.icons.length; i++) {
+        let target = all.find((item) => item.event === this.icons[i]);
+        target && targets.push(target);
+      }
+      return targets;
+    },
+  },
+  data() {
+    return {
+      iconsConfig: CONFIG.iconConfig,
+      placeholder: CONFIG.defPlaceholder,
+    };
+  },
+  methods: {
+    /** events */
+    /**
+     * @event handleClickIcon 点击图标
+     */
+    handleClickIcon(iconConfig) {
+      this.$emit(CONFIG.eventName, iconConfig.event);
+    },
+    /**
+     * @event handleSearch 搜索
+     */
+    handleSearch() {
+      this.$emit("search");
+    },
+  },
+};
+</script>

package/packages/top-bar/index.js

@@ -0,0 +1,7 @@
+import HbTopBar from "./src/main.vue";
+
+HbTopBar.install = function (Vue) {
+  Vue.component(HbTopBar.name, HbTopBar);
+};
+
+export default HbTopBar;