haiwei-ui 1.0.0

package/packages/skins/pretty/store/modules/sidebar.js

@@ -0,0 +1,32 @@
+/** 侧边栏状态 */
+export default {
+  namespaced: true,
+  state: {
+    collapse: false
+  },
+  actions: {
+    /**
+     * @description 切换折叠状态
+     */
+    toggle({ state, commit }) {
+      commit('collapseSet', !state.collapse)
+    },
+    /**
+     * @description 隐藏
+     */
+    hide({ commit }) {
+      commit('collapseSet', false)
+    },
+    /**
+     * @description 显示
+     */
+    show({ commit }) {
+      commit('collapseSet', true)
+    }
+  },
+  mutations: {
+    collapseSet(state, collapse) {
+      state.collapse = collapse
+    }
+  }
+}

package/packages/skins/pretty/styles/_index.scss

@@ -0,0 +1,30 @@
+@import '../../../styles/mixins';
+@import '../../../styles/variables';
+
+#{$prefix}skin-pretty {
+  #{$prefix}wrapper {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  @import './components/sidebar/index';
+  @import './components/header/index';
+  @import './components/main/index';
+
+  @import './themes/index';
+
+  #{$prefix}header-userinfo-dropdown {
+    #{$prefix}button {
+      padding: 6px 0;
+      font-size: 13px;
+
+      #{$prefix}icon {
+        font-size: 1.5em;
+      }
+    }
+  }
+}

package/packages/skins/pretty/styles/components/header/_index.scss

@@ -0,0 +1,77 @@
+$pretty-header-height: 50px;
+
+#{$prefix}header {
+  padding-right: 0;
+  display: flex;
+  flex-shrink: 0;
+  height: $pretty-header-height;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+
+  &-left {
+    position: relative;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    /*logo*/
+    #{$prefix}logo {
+      &-box {
+        padding-right: 5px;
+        @include vertical-center($pretty-header-height);
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.26), 0 -1px 0 rgba(0, 0, 0, 0.02);
+        z-index: 1;
+        float: left;
+      }
+
+      &-img {
+        float: left;
+        margin: 5px 11px;
+        width: $pretty-header-height - 10;
+        height: $pretty-header-height - 10;
+      }
+
+      &-text {
+        float: left;
+        @include vertical-center($pretty-header-height);
+        font-size: 20px;
+        white-space: nowrap;
+      }
+    }
+
+    /*侧边栏隐藏切换按钮*/
+    #{$prefix}sidebar-toggle-btn {
+      position: relative;
+      float: left;
+      @include vertical-center(50px);
+      width: 50px;
+      font-size: 25px;
+      color: #fff;
+      text-align: center;
+      cursor: pointer;
+
+      @include toolbar-hover-border();
+    }
+
+    #{$prefix}breadcrumb {
+      float: left;
+      @include vertical-center(50px);
+    }
+  }
+
+  &-right {
+    display: flex;
+    flex-grow: 1;
+    @include vertical-center(50px);
+    justify-content: flex-end;
+  }
+
+  &-userinfo {
+    margin: 0 10px 0 5px;
+    position: relative;
+    cursor: pointer;
+    @include toolbar-hover-border();
+
+    .el-dropdown {
+      color: #fff;
+    }
+  }
+}

package/packages/skins/pretty/styles/components/main/_index.scss

@@ -0,0 +1,24 @@
+#{$prefix}main {
+  display: flex;
+  align-items: stretch;
+  flex-grow: 1;
+  flex-direction: row;
+  overflow: hidden;
+
+  &-left {
+    flex-shrink: 0;
+    z-index: 1;
+  }
+  &-right {
+    display: flex;
+    align-items: stretch;
+    flex-grow: 1;
+    flex-direction: column;
+    overflow: hidden;
+
+    #{$prefix}content {
+      position: relative;
+      flex-grow: 1;
+    }
+  }
+}

package/packages/skins/pretty/styles/components/menus/_index.scss

@@ -0,0 +1,80 @@
+#{$prefix}menus {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+
+  .el-scrollbar {
+    height: 100%;
+
+    .el-scrollbar__wrap {
+      overflow-x: hidden;
+
+      .el-scrollbar__view {
+        padding: 0 7px;
+      }
+    }
+  }
+
+  .no-menus {
+    margin: 5px 5%;
+    padding: 35px 0;
+    width: 90%;
+    height: 150px;
+    line-height: 2;
+    text-align: center;
+    background-color: #29d;
+    color: #fff;
+    border-radius: 5px;
+    box-sizing: border-box;
+
+    #{$prefix}icon {
+      font-size: 50px;
+    }
+  }
+}
+
+#{$prefix}sidebar {
+  &.collapse {
+    #{$prefix}menus {
+      .el-scrollbar {
+        .el-scrollbar__wrap {
+          .el-scrollbar__view {
+            padding: 0 5px;
+          }
+        }
+      }
+    }
+  }
+}
+
+/**这些代码需要放在body下**/
+.el-menu,
+.el-menu--vertical {
+  border: none;
+
+  .el-menu-item,
+  .el-submenu__title {
+    margin: 5px 0;
+    height: 45px;
+    line-height: 45px;
+    border-radius: 5px;
+    font-size: 15px;
+
+    #{$prefix}icon {
+      position: relative;
+      top: 2px;
+      margin-right: 15px;
+      font-size: 25px;
+      vertical-align: -0.25em;
+    }
+  }
+}
+
+.el-menu--collapse {
+  > .el-menu-item,
+  > .el-submenu > .el-submenu__title {
+    padding: 0 15px !important;
+    width: 55px;
+  }
+}

package/packages/skins/pretty/styles/components/sidebar/_index.scss

@@ -0,0 +1,28 @@
+/*侧边栏*/
+#{$prefix}sidebar {
+  position: relative;
+  display: flex;
+  width: 230px;
+  height: 100%;
+  align-items: stretch;
+  flex-direction: column;
+  flex-shrink: 0;
+
+  &.collapse {
+    width: 65px;
+
+    /*logo*/
+    #{$prefix}logo {
+      &-text {
+        display: none;
+      }
+    }
+  }
+}
+
+#{$prefix}menu-wapper {
+  position: relative;
+  flex-grow: 1;
+}
+
+@import '../menus/index';

package/packages/skins/pretty/styles/themes/_index.scss

@@ -0,0 +1,20 @@
+$pretty-sidebar-toggle-btn-color: #fff;
+
+@import './default/index';
+@import './blue-light/index';
+@import './green/index';
+@import './green-light/index';
+@import './orange/index';
+@import './orange-light/index';
+@import './pink/index';
+@import './pink-light/index';
+
+#{$prefix}tabnav {
+  &-tabs {
+    .el-tabs__header {
+      .el-tabs__nav {
+        padding-left: 5px;
+      }
+    }
+  }
+}

package/packages/skins/pretty/styles/themes/_theme.scss

@@ -0,0 +1,283 @@
+#{$prefix}header {
+  background-color: $pretty-header-background-color;
+
+  &-left {
+    /*logo*/
+    #{$prefix}logo {
+      &-box {
+        background-color: $pretty-logo-box-background-color;
+      }
+
+      &-text {
+        color: $pretty-logo-text-color;
+      }
+    }
+
+    //菜单栏切换
+    #{$prefix}sidebar-toggle-btn {
+      color: $pretty-sidebar-toggle-btn-color;
+    }
+
+    //面包屑
+    #{$prefix}breadcrumb {
+      .el-breadcrumb__item {
+        .el-breadcrumb__inner {
+          color: $pretty-breadcrumb-color;
+
+          &.is-link {
+            color: $pretty-breadcrumb-link-color;
+          }
+        }
+
+        .el-breadcrumb__separator {
+          color: $pretty-breadcrumb-separator-color;
+        }
+      }
+    }
+  }
+}
+
+#{$prefix}main {
+  /*侧边栏*/
+  #{$prefix}sidebar {
+    background-color: $pretty-sidebar-background-color;
+
+    #{$prefix}menus {
+      background-color: $pretty-menus-background-color !important;
+    }
+  }
+
+  #{$prefix}content {
+    background: $pretty-main-background-color;
+  }
+}
+
+.el-menu,
+.el-menu--vertical {
+  background-color: $pretty-menus-background-color !important;
+
+  .el-menu-item,
+  .el-submenu__title {
+    color: $pretty-menus-menu-color !important;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background: $pretty-menus-menu-hover-background-color;
+      color: $pretty-menus-menu-hover-color !important;
+    }
+
+    &.is-active {
+      background: $pretty-menus-menu-active-background-color;
+      color: $pretty-menus-menu-active-color !important;
+    }
+  }
+}
+
+//树
+#{$prefix}tree {
+  &.el-tree--highlight-current {
+    .el-tree-node {
+      &.is-current {
+        > .el-tree-node__content {
+          background-color: $pretty-tree-background-color;
+          color: $pretty-tree-color;
+        }
+      }
+    }
+  }
+}
+
+//标签导航激活
+#{$prefix}tabnav-tabs {
+  .el-tabs__header {
+    .el-tabs__nav {
+      .el-tabs__item {
+        &.is-active,
+        &:hover {
+          color: $pretty-theme-color;
+          &::before {
+            background-color: $pretty-theme-color;
+          }
+        }
+        &.is-active {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+#{$prefix}dialog-icon {
+  #{$prefix}icon {
+    background: $pretty-theme-color;
+    color: $pretty-dialog-icon-color;
+  }
+}
+
+#{$prefix}box-header-icon {
+  #{$prefix}icon {
+    background: $pretty-theme-color;
+    color: $pretty-dialog-icon-color;
+  }
+}
+
+#{$prefix}list-icon {
+  #{$prefix}icon {
+    background: $pretty-theme-color;
+    color: $pretty-dialog-icon-color;
+  }
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: $pretty-theme-color;
+}
+.el-date-table td.today span {
+  color: $pretty-theme-color;
+}
+.el-date-table td.end-date span,
+.el-date-table td.start-date span {
+  background-color: $pretty-theme-color;
+  color: #ffffff;
+}
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover {
+  border-color: $pretty-theme-color;
+}
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus {
+  border-color: $pretty-theme-color;
+  outline: 0;
+}
+.el-select-dropdown__item.selected {
+  color: $pretty-theme-color;
+}
+.el-button--primary {
+  color: #fff;
+  background-color: $pretty-theme-color;
+  border-color: $pretty-theme-color;
+}
+.el-tabs__item.is-active {
+  color: $pretty-theme-color;
+}
+.el-tabs__active-bar {
+  background-color: $pretty-theme-color;
+}
+.el-switch.is-checked .el-switch__core {
+  border-color: $pretty-theme-color;
+  background-color: $pretty-theme-color;
+}
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: $pretty-theme-color;
+  background: $pretty-theme-color;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: $pretty-theme-color;
+}
+.el-radio.is-bordered.is-checked {
+  border-color: $pretty-theme-color;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner,
+.el-checkbox-button.is-checked .el-checkbox-button__inner,
+.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  background-color: $pretty-theme-color;
+  border-color: $pretty-theme-color;
+}
+.el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: $pretty-theme-color;
+}
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: $pretty-theme-color;
+}
+.el-checkbox.is-bordered.is-checked {
+  border-color: $pretty-theme-color;
+}
+.el-button--text {
+  color: $pretty-theme-color;
+}
+
+.el-button--text.is-disabled {
+  color: #c0c4cc;
+}
+
+.nm-list-select-column > span:focus {
+  border-color: $pretty-theme-color;
+}
+.el-checkbox__inner:hover {
+  border-color: $pretty-theme-color;
+}
+.el-select .el-input.is-focus .el-input__inner {
+  border-color: $pretty-theme-color;
+}
+.el-select .el-input .el-input__inner:hover {
+  border-color: $pretty-theme-color;
+}
+.nm-admin-config-library .el-tabs__item.is-active {
+  color: $pretty-theme-color !important;
+}
+.nm-admin-config-library .el-tabs__item:hover {
+  color: $pretty-theme-color !important;
+}
+.el-tabs__item.is-active {
+  color: $pretty-theme-color !important;
+}
+.el-textarea.is-active .el-textarea__inner,
+.el-textarea__inner:focus {
+  border-color: $pretty-theme-color;
+  outline: 0;
+}
+.nm-tabnav-contextmenu li:hover {
+  background-color: $pretty-theme-color-transpart;
+  color: $pretty-theme-color !important;
+}
+.el-dropdown-menu__item:hover {
+  background-color: $pretty-theme-color-transpart;
+  color: $pretty-theme-color !important;
+}
+.advanced-arrow {
+  border-bottom-color: $pretty-theme-color;
+}
+.nm-list-querybar-advanced {
+  -webkit-box-shadow: 0 0 1px 1px $pretty-theme-color;
+  box-shadow: 0 0 1px 1px $pretty-theme-color;
+  border-color: $pretty-theme-color;
+}
+.el-loading-spinner .el-loading-text {
+  color: $pretty-theme-color;
+}
+.el-loading-spinner i {
+  color: $pretty-theme-color;
+}
+.el-table__body tr.current-row > td {
+  background-color: $pretty-theme-color-transpart;
+}
+.el-table__body tr.hover-row > td {
+  background-color: $pretty-theme-color-transpart;
+}
+.nm-file-upload-img:hover {
+  border: 2px dashed $pretty-theme-color;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: $pretty-theme-color-transpart;
+  color: $pretty-theme-color;
+}
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover,
+.el-date-table.is-week-mode .el-date-table__row.current div,
+.el-date-table.is-week-mode .el-date-table__row:hover div {
+  background-color: $pretty-theme-color-transpart;
+}
+.el-tree-node__content:hover {
+  background-color: $pretty-theme-color-transpart;
+}
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li:hover {
+  color: $pretty-theme-color;
+  background-color: $pretty-theme-color-transpart;
+}
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: $pretty-theme-color-transpart;
+}

package/packages/skins/pretty/styles/themes/blue-light/_index.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+&.theme-blue-light {
+    @import '../theme';
+}

package/packages/skins/pretty/styles/themes/blue-light/_variables.scss

@@ -0,0 +1,38 @@
+/*主题色*/
+$pretty-theme-color: rgb(3, 169, 244);
+$pretty-theme-color-transpart: #ecf5ff;
+/*header*/
+$pretty-header-background-color: $pretty-theme-color;
+$pretty-header-color: #fff;
+
+/*面包屑*/
+$pretty-breadcrumb-color: #e4e7ed;
+$pretty-breadcrumb-separator-color: #dcdfe6;
+$pretty-breadcrumb-link-color: #fff;
+
+/*main*/
+$pretty-main-background-color: #f0f0f0;
+
+/*sidebar*/
+$pretty-sidebar-background-color: #f9fafc;
+
+/*logo*/
+$pretty-logo-box-background-color: $pretty-theme-color;
+$pretty-logo-text-color: #fff;
+
+/*menus*/
+$pretty-menus-background-color: #fff;
+$pretty-menus-menu-color: #444;
+
+$pretty-menus-menu-active-background-color: $pretty-theme-color-transpart;
+$pretty-menus-menu-active-color: $pretty-theme-color;
+
+$pretty-menus-menu-hover-background-color: $pretty-theme-color-transpart;
+$pretty-menus-menu-hover-color: $pretty-theme-color;
+
+/*树*/
+$pretty-tree-color: #fff;
+$pretty-tree-background-color: $pretty-theme-color;
+
+/*对话框*/
+$pretty-dialog-icon-color: #fff;

package/packages/skins/pretty/styles/themes/default/_index.scss

@@ -0,0 +1,2 @@
+@import './variables';
+@import '../theme';

package/packages/skins/pretty/styles/themes/default/_variables.scss

@@ -0,0 +1,38 @@
+/*主题色*/
+$pretty-theme-color: #03a9f4;
+$pretty-theme-color-transpart: #ecf5ff;
+/*header*/
+$pretty-header-background-color: $pretty-theme-color;
+$pretty-header-color: #fff;
+
+/*面包屑*/
+$pretty-breadcrumb-color: #e4e7ed;
+$pretty-breadcrumb-separator-color: #dcdfe6;
+$pretty-breadcrumb-link-color: #fff;
+
+/*main*/
+$pretty-main-background-color: #f0f0f0;
+
+/*sidebar*/
+$pretty-sidebar-background-color: #222d32;
+
+/*logo*/
+$pretty-logo-box-background-color: $pretty-theme-color;
+$pretty-logo-text-color: #fff;
+
+/*menus*/
+$pretty-menus-background-color: $pretty-sidebar-background-color;
+$pretty-menus-menu-color: rgba(255, 255, 255, 0.7);
+
+$pretty-menus-menu-active-background-color: $pretty-theme-color;
+$pretty-menus-menu-active-color: #fff;
+
+$pretty-menus-menu-hover-background-color: $pretty-theme-color;
+$pretty-menus-menu-hover-color: #fff;
+
+/*树*/
+$pretty-tree-color: #fff;
+$pretty-tree-background-color: $pretty-theme-color;
+
+/*对话框*/
+$pretty-dialog-icon-color: #fff;

package/packages/skins/pretty/styles/themes/green/_index.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+&.theme-green {
+    @import '../theme';
+}

package/packages/skins/pretty/styles/themes/green/_variables.scss

@@ -0,0 +1,38 @@
+/*主题色*/
+$pretty-theme-color: #00a65a;
+$pretty-theme-color-transpart: #ccedde;
+/*header*/
+$pretty-header-background-color: $pretty-theme-color;
+$pretty-header-color: #fff;
+
+/*面包屑*/
+$pretty-breadcrumb-color: #e4e7ed;
+$pretty-breadcrumb-separator-color: #dcdfe6;
+$pretty-breadcrumb-link-color: #fff;
+
+/*main*/
+$pretty-main-background-color: #f0f0f0;
+
+/*sidebar*/
+$pretty-sidebar-background-color: #222d32;
+
+/*logo*/
+$pretty-logo-box-background-color: $pretty-theme-color;
+$pretty-logo-text-color: #fff;
+
+/*menus*/
+$pretty-menus-background-color: $pretty-sidebar-background-color;
+$pretty-menus-menu-color: rgba(255, 255, 255, 0.7);
+
+$pretty-menus-menu-active-background-color: $pretty-theme-color;
+$pretty-menus-menu-active-color: #fff;
+
+$pretty-menus-menu-hover-background-color: #1e282c;
+$pretty-menus-menu-hover-color: #fff;
+
+/*树*/
+$pretty-tree-color: #fff;
+$pretty-tree-background-color: $pretty-theme-color;
+
+/*对话框*/
+$pretty-dialog-icon-color: #fff;