ui调整

package.json

@@ -37,7 +37,8 @@
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
     "terser-webpack-plugin": "^1.2.3",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "yorkie": "^2.0.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

pnpm-lock.yaml

@@ -29,6 +29,7 @@ specifiers:
   vue-router: ^3.1.6
   vue-template-compiler: ^2.6.10
   vuex: ^3.1.3
+  yorkie: ^2.0.0
 
 dependencies:
   axios: registry.npmmirror.com/axios/0.19.2
@@ -61,6 +62,7 @@ devDependencies:
   sass-loader: registry.npmmirror.com/sass-loader/8.0.2_sass@1.55.0
   terser-webpack-plugin: registry.npmmirror.com/terser-webpack-plugin/1.4.5
   vue-template-compiler: registry.npmmirror.com/vue-template-compiler/2.7.10
+  yorkie: registry.npmmirror.com/yorkie/2.0.0
 
 packages:
 

src/assets/styles/base.scss

@@ -36,6 +36,19 @@ u {
 input {
   outline: none;
   border: none;
+  background: rgba(245, 245, 245, 1);
+  font-family: $--font-family;
+}
+input::-webkit-input-placeholder,
+input::-moz-placeholder,
+input:-ms-input-placeholder,
+input:-moz-placeholder {
+  font-size: 12px;
+  font-weight: bold;
+  color: $--color-text-gray-4;
+}
+button,
+textarea {
   font-family: $--font-family;
 }
 h1,
@@ -45,7 +58,6 @@ h4,
 h5,
 h6 {
   font-size: 100%;
-  font-weight: normal;
 }
 fieldset,
 img {
@@ -58,7 +70,7 @@ abbr {
 a {
   text-decoration: none;
   color: inherit;
-  *color: $--color-text-secondary;
+  *color: $--color-text-gray-3;
 }
 img {
   vertical-align: middle;
@@ -77,8 +89,8 @@ textarea:focus {
 
 /* browse style */
 ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 8px;
+  height: 8px;
   background: transparent;
 }
 ::-webkit-scrollbar-button {
@@ -88,8 +100,8 @@ textarea:focus {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background: $--color-text-secondary;
+  border-radius: 8px;
+  background: #666;
 }
 ::-webkit-scrollbar-corner {
   background: transparent;
@@ -103,123 +115,134 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: $--font-size-base;
-  color: $--color-text-primary;
+  color: $--color-text-dark-1;
 }
 
 /* part */
-// part-box
 .part-box {
-  padding: 20px;
   margin-bottom: 20px;
   background-color: #fff;
-  border-radius: 6px;
+  border-radius: $--border-radius;
 
-  &-head {
-    margin-bottom: 20px;
-    line-height: 32px;
-
-    &::after {
-      content: "";
-      display: block;
-      clear: both;
-      visibility: hidden;
-    }
+  &-border {
+    border: 1px solid $--color-border;
+  }
+  &-pad {
+    padding: 20px;
+  }
 
-    &-left {
-      float: left;
+  &-filter {
+    padding: 20px 20px 5px 20px;
 
-      > h1 {
-        color: #202b4b;
-        font-size: 18px;
-        font-weight: 600;
-        margin: 0;
-      }
+    .el-form-item {
+      margin-bottom: 15px;
     }
-    &-right {
-      float: right;
+    .el-form-item__label {
+      display: none;
     }
   }
-}
-.part {
-  &-filter {
-    margin-bottom: 20px;
-    background-color: #fff;
-    border-radius: 6px;
+  &-gray {
+    background-color: $--color-text-gray-7;
+  }
 
-    > div[class^="part-filter"]:nth-of-type(2) {
-      border-top: 1px solid #f0f4f9;
-    }
-    .line-split {
-      display: inline-block;
-      margin: 0 5px;
-      color: #ccd4e2;
-      font-weight: 600;
-    }
+  &-flex {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+  }
 
-    &-info {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-between;
-      padding: 10px 20px;
+  &-action {
+    padding-bottom: 15px;
+    white-space: nowrap;
+    display: flex;
+    align-items: flex-end;
+  }
+  &-tips {
+    font-size: 16px;
+    line-height: 25px;
+    color: $--color-text-dark-1;
+    margin-bottom: 15px;
+  }
 
-      &-sub {
-        padding-left: 20px;
-      }
-    }
+  &-head {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    min-height: 30px;
+    margin: -10px 0 10px -10px;
+    color: $--color-text-dark;
 
-    &-form {
-      display: flex;
-      align-items: stretch;
-      justify-content: space-between;
-      padding: 20px 20px 10px;
-
-      &-action {
-        padding-bottom: 15px;
-        white-space: nowrap;
-        display: flex;
-        align-items: flex-end;
-      }
+    > h3 {
+      font-size: 17px;
+    }
+    .el-icon-question {
+      margin-left: 10px;
+      font-size: 16px;
+      color: $--color-text-gray-5;
+      cursor: pointer;
 
-      .el-form-item {
-        margin-bottom: 15px;
-      }
-      .el-form-item__label {
-        margin-bottom: 0;
-        display: none;
-      }
-      .el-button {
-        vertical-align: top;
+      &:hover {
+        color: #fe8652;
       }
     }
   }
 }
+.part-title {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 15px 20px;
+  line-height: 30px;
+  overflow: hidden;
 
-.part-page {
-  margin-top: 20px;
-  text-align: right;
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-    visibility: hidden;
-  }
-
-  .page-info {
+  h2 {
     float: left;
-    line-height: 32px;
   }
-  .el-pagination {
+  &-infos {
     float: right;
-    padding: 0;
   }
 }
+.part-body {
+  padding: 25px;
+}
+.part-page {
+  margin-top: 15px;
+  text-align: right;
+}
+.part-none {
+  padding: 100px;
+  font-size: 20px;
+  color: $--color-text-gray-3;
+  text-align: center;
+}
+// box-justify
+.box-justify {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
-.clear-float {
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-    visibility: hidden;
+// page-head
+.page-head {
+  margin-bottom: 20px;
+  color: $--color-text-dark;
+  &-flex {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+
+  > h2 {
+    font-size: 20px;
+  }
+  .el-icon-question {
+    margin-left: 10px;
+    font-size: 16px;
+    color: $--color-text-gray-5;
+    cursor: pointer;
+
+    &:hover {
+      color: #fe8652;
+    }
   }
 }
 
@@ -228,23 +251,52 @@ body {
   width: 100%;
   border-spacing: 0;
   border-collapse: collapse;
-  text-align: center;
-  margin-bottom: 30px;
-}
-.table th {
-  padding: 10px;
-  line-height: 20px;
-  letter-spacing: 1px;
-  border: 1px solid $--border-color-light;
-}
-.table td {
-  padding: 10px;
-  line-height: 20px;
-  border: 1px solid $--border-color-light;
-}
-.table .td-th {
-  font-weight: 600;
-  color: $--color-text-primary;
+  text-align: left;
+
+  &.table-white {
+    background-color: #fff;
+  }
+
+  th {
+    padding: 12px;
+    line-height: 1.2;
+    letter-spacing: 1px;
+    color: $--color-text-gray-2;
+    border: 1px solid $--color-border;
+  }
+  td {
+    padding: 14px;
+    line-height: 1.2;
+    color: $--color-text-dark;
+    border: 1px solid $--color-border;
+
+    &.td-link {
+      span {
+        cursor: pointer;
+        &:hover {
+          color: $--color-text-gray;
+        }
+      }
+    }
+  }
+  .td-th {
+    font-weight: 600;
+    color: $--color-text-gray;
+  }
+
+  &--border {
+    border: 1px solid $--color-border;
+    border-radius: 10px;
+    th {
+      background-color: #fcfcfd;
+      border: none;
+      border-bottom: 1px solid $--color-border;
+    }
+    td {
+      border: none;
+      border-bottom: 1px solid $--color-border;
+    }
+  }
 }
 
 /* list */
@@ -256,16 +308,6 @@ body {
   margin-right: 320px;
 }
 
-/* user reset */
-h3.account-title {
-  text-align: center;
-  font-weight: 600;
-}
-.account-form {
-  width: 60%;
-  min-width: 600px;
-  margin: 50px auto;
-}
 .vlcode {
   height: 36px;
 }
@@ -276,33 +318,6 @@ h3.account-title {
   float: right;
   width: 120px;
 }
-.logo-image {
-  display: inline-block;
-  padding: 15px;
-  border-radius: 5px;
-  background-color: #f0f4f9;
-}
-.logo-view {
-  display: block;
-  max-width: 200px;
-  height: auto;
-}
-
-// vue-echarts
-.echarts {
-  width: 100% !important;
-}
-
-// other
-.tips-info {
-  font-size: 14px;
-  height: 25px;
-  line-height: 25px;
-  color: $--color-text-secondary;
-}
-.tips-error {
-  color: $--color-danger;
-}
 
 // color
 .color-primary {
@@ -318,25 +333,155 @@ h3.account-title {
   color: $--color-danger;
 }
 .color-info {
-  color: $--color-info;
+  color: $--color-text-gray-1;
+}
+.color-dark {
+  color: $--color-dark;
+}
+.color-gray {
+  color: $--color-text-gray;
+}
+.color-gray-2 {
+  color: $--color-text-gray-2;
 }
 .color-white {
   color: #fff;
 }
-.md-1 {
-  margin-bottom: 5px;
+
+// text
+.text-center {
+  text-align: center;
+}
+.text-left {
+  text-align: left;
 }
-.md-2 {
+.text-right {
+  text-align: right;
+}
+
+// other
+.btn-danger {
+  &.el-button--text {
+    color: $--color-danger !important;
+
+    &:hover {
+      font-weight: 600;
+      color: mix(#000, $--color-danger, 20%) !important;
+    }
+  }
+}
+.btn-primary {
+  &.el-button--text:not(.is-disabled) {
+    color: $--color-text-dark-1 !important;
+    &:hover {
+      font-weight: 600;
+      color: $--color-primary !important;
+    }
+  }
+}
+
+.btn-white {
+  background-color: #fff !important;
+  color: #999 !important;
+}
+.font-bold {
+  font-weight: bold;
+}
+.table-head-bg {
+  th {
+    background-color: #f6f6f6;
+    color: $--color-text-gray;
+  }
+}
+
+.tab-btns {
+  .el-button {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &:first-child {
+      border-bottom-left-radius: 8px;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: 8px;
+    }
+  }
+
+  .el-button + .el-button {
+    margin-left: 10px;
+  }
+}
+
+.cont-link {
+  color: $--color-primary;
+  cursor: pointer;
+  &:hover {
+    color: $--color-success;
+  }
+}
+.ml-1 {
+  margin-left: 5px;
+}
+.ml-2 {
+  margin-left: 10px;
+}
+.mr-1 {
+  margin-right: 5px;
+}
+.mr-2 {
+  margin-right: 10px;
+}
+.mr-4 {
+  margin-right: 20px;
+}
+.mb-0 {
+  margin-bottom: 0;
+}
+.mb-2 {
   margin-bottom: 10px;
 }
+.mb-4 {
+  margin-bottom: 20px;
+}
 
 // other
-.flex-between {
+.tips-info {
+  font-size: 12px;
+  line-height: 20px;
+  color: $--color-text-gray-2;
+}
+.tips-dark {
+  color: $--color-text-gray;
+}
+.tips-error {
+  color: $--color-danger;
+}
+.tips-icon {
+  display: inline-block;
+  vertical-align: middle;
+  color: $--color-text-gray-3;
+  font-size: 18px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+.form-item-content {
+  color: $--color-text-gray-2;
+}
+.inline-block {
+  display: inline-block;
+  vertical-align: top;
+}
+.custom-tree-node {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  font-size: 12px;
+  padding-right: 8px;
 }
 
+// icon
 .icon {
   display: inline-block;
   vertical-align: middle;

src/assets/styles/element-ui-costom.scss

@@ -1,322 +1,619 @@
-// el-input
-.el-input {
-  // &.is-focus {
-  //   .el-input__inner {
-  //     border-color: $--color-primary !important;
-  //   }
-  // }
-  .el-input__inner {
-    border-radius: 6px;
-    border-color: #e8edf3;
-    background-color: #f0f4f9;
+/*
+* element-ui不管是自行构建的主题还是动态设置的主题，
+* 产生的css文件中存在近乎1/3的冗余样式，过于累赘，不如直接覆盖样式简洁。
+*/
+// dialog
+.el-dialog {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #c8c8ca;
+  box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.1);
+
+  &.is-fullscreen {
+    border-radius: 0;
+
+    .el-dialog__header {
+      width: 100%;
+      position: fixed;
+      z-index: 9;
+      background-color: #fff;
+      border-bottom: 1px solid $--color-border;
+    }
+    .el-dialog__body {
+      padding-top: 90px;
+    }
   }
 }
-.el-input-group--append {
-  .el-input__inner {
-    border-radius: 6px 0 0 6px;
+.el-dialog__header {
+  padding: 15px 20px;
+  .el-dialog__title {
+    color: $--color-text-dark;
+    font-size: 16px;
+    line-height: 19px;
+  }
+  .el-dialog__headerbtn {
+    top: 15px;
+    width: 16px;
+    height: 16px;
+    background-image: url(../images/icon-close.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    &:hover {
+      background-image: url(../images/icon-close-act.png);
+    }
+
+    .el-dialog__close {
+      display: none;
+    }
+  }
+}
+.el-dialog__body {
+  padding: 30px 40px;
+  position: relative;
+  border-top: 1px solid $--color-border;
+  color: $--color-text-dark-1;
+
+  .el-form-item__label {
+    padding-right: 2px;
+  }
+  .el-input-tips {
+    color: rgba(187, 187, 187, 1);
+    margin-left: 13px;
+  }
+}
+.el-dialog__footer {
+  overflow: hidden;
+  .el-button {
+    width: 100px;
+    border-radius: 8px;
+    float: right;
+    margin-left: 10px;
+  }
+}
+
+// .opacity-dialog
+.opacity-dialog {
+  .el-dialog {
+    background-color: transparent;
+  }
+  .el-dialog__header,
+  .el-dialog__footer {
+    display: none;
   }
-  .el-input-group__append {
-    border-color: #e8edf3;
+  .el-dialog__body {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    padding: 0;
+    background-color: transparent;
   }
 }
-.el-input-number {
-  &.is-without-controls {
+
+// form
+.el-form {
+  &-item {
+    &__error {
+      font-size: 12px;
+      color: rgba(254, 108, 105, 1);
+    }
+    &__content {
+      .el-table {
+        line-height: 1;
+      }
+    }
+  }
+  // form-info
+  &.form-info {
+    .el-form-item {
+      margin-bottom: 0;
+
+      .el-form-item__label {
+        color: $--color-text-gray-2;
+      }
+    }
+  }
+  &--label-top {
+    .el-form-item__label {
+      line-height: 20px;
+      padding-bottom: 5px;
+    }
+  }
+}
+// input
+.el-input {
+  &.is-focus {
+    .el-input__inner {
+      border-color: $--color-primary !important;
+    }
+  }
+  &.is-disabled {
     .el-input__inner {
-      padding: 0 12px;
+      color: $--color-text-gray-2;
     }
   }
+  .el-input__inner {
+    border-radius: 8px;
+    border-color: #ddd;
+    background-color: #fff;
+  }
+  // .el-input__suffix {
+  //   right: 0;
+  //   border-left: 1px solid #ddd;
+  // }
 }
-// el-textarea
+// textarea
 .el-textarea {
-  .el-textarea__inner {
-    border-color: #e8edf3;
-    background-color: #f0f4f9;
+  &.is-disabled {
+    .el-textarea__inner {
+      color: $--color-text-gray-2;
+    }
   }
 }
-
-// datepicker
-.el-date-editor.el-input__inner {
-  border-radius: 6px;
-  border-color: #e8edf3;
-  background-color: #f0f4f9;
-
-  .el-range-input {
-    background-color: #f0f4f9;
+.el-select {
+  .el-input__suffix {
+    right: 0;
+    border-left: 1px solid #ddd;
+  }
+  .el-input {
+    .el-select__caret {
+      width: 30px;
+    }
+    .el-icon-arrow-up:before {
+      font-size: 12px;
+      content: "\e78f";
+    }
   }
 }
-
-// .el-button
+.el-select-dropdown {
+  &.popper-filter {
+    .el-scrollbar {
+      display: block !important;
+      padding-top: 52px;
+    }
+    .el-select-filter {
+      padding: 0 10px;
+      position: absolute;
+      width: 100%;
+      top: 10px;
+      left: 0;
+      z-index: 9;
+    }
+  }
+}
+// upload
+.el-upload,
+.el-upload-dragger {
+  width: 100%;
+}
+// radio
+.el-radio-button {
+  &:hover {
+    .el-radio-button__inner {
+      color: $--color-primary;
+    }
+  }
+}
+.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+  color: $--color-white;
+  border-color: $--color-primary;
+  background: $--color-primary;
+}
+// button
 .el-button {
-  border-radius: 6px;
+  border-radius: $--border-radius;
 
-  .icon {
+  > .icon {
     margin-right: 5px;
-    width: 13px;
-    height: 13px;
   }
-  .icon-view {
-    height: 10px;
+  > span {
+    display: inline-block;
   }
-  .icon-upload {
-    height: 12px;
+  &.is-disabled {
+    color: $--color-text-gray-3 !important;
+    background: $--color-background !important;
+    border: 1px solid $--color-border !important;
   }
-  span {
-    display: inline-block;
-    vertical-align: middle;
-    line-height: 1;
+}
+
+.el-button + .popover-button,
+.popover-button + .el-button {
+  margin-left: 10px;
+}
+.el-button + .el-button {
+  margin-left: 10px;
+}
+.el-button--text + .el-button--text {
+  margin-left: 5px;
+}
+.el-button--small {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 12px;
+}
+.el-button--text {
+  color: $--color-text-gray-2;
+
+  & + .el-button--text {
+    margin-left: 10px;
   }
 }
-.el-button--small,
-.el-button--small.is-round {
-  padding: 8px 12px 9px;
+.el-button--info {
+  background-color: $--color-cyan;
+  border-color: $--color-cyan;
+
+  &:hover,
+  &:focus {
+    background-color: $--color-cyan-light;
+    border-color: $--color-cyan-light;
+  }
 }
+.el-button--primary {
+  background-color: $--color-primary;
+  border-color: $--color-primary;
 
-// .el-table
+  &:hover,
+  &:focus {
+    background-color: $--color-primary-light;
+    border-color: $--color-primary-light;
+  }
+}
+.el-button--success {
+  background-color: $--color-success;
+  border-color: $--color-success;
+
+  &:hover,
+  &:focus {
+    background-color: $--color-success-light;
+    border-color: $--color-success-light;
+  }
+}
+
+// table
 .el-table {
-  color: #626a82;
-  font-weight: 400;
-  background-color: #fff;
+  color: $--color-text-dark-1;
   font-size: 14px;
-  border-radius: 6px;
 
-  &__header {
-    th {
-      color: #202b4b;
-      font-weight: bold;
-    }
+  thead th {
+    color: $--color-text-gray-2;
   }
+
+  thead.is-group th {
+    background-color: $--color-white;
+  }
+
   tr.el-table__row {
-    border-top: 1px solid #f0f4f9;
+    color: $--color-text-dark;
   }
   td,
   th {
-    padding-top: 16px;
-    padding-bottom: 16px;
+    border-color: $--color-border !important;
+    padding: 14px 0;
+    font-weight: 500;
   }
-  // .el-table__row.row-danger {
-  //   color: $--color-danger;
-  // }
-
-  .cell {
-    .el-checkbox {
-      margin-bottom: 0;
+  .el-table__row.row-danger {
+    color: $--color-danger;
+  }
+  &.el-table--noback {
+    tr.el-table__row {
+      background-color: $--color-white;
     }
-    .btn-table-icon {
-      padding: 5px 12px 6px;
-      font-size: 14px;
-      &.el-button--primary {
-        background-color: #5fc9fa;
-        border-color: #5fc9fa;
+  }
 
-        &:hover {
-          background-color: mix(#fff, #5fc9fa, 10%);
-          border-color: mix(#fff, #5fc9fa, 10%);
-        }
+  .cell-head {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 1.3;
+  }
+  // caret-wrapper
+  .caret-wrapper {
+    width: 20px;
+    height: 20px;
+    top: -1px;
+    .sort-caret {
+      &.ascending {
+        top: -1px;
+      }
+      &.descending {
+        bottom: -1px;
       }
     }
   }
+  // action-column
+  td.action-column {
+    padding-left: 10px;
+    padding-right: 10px;
+    .cell {
+      padding: 0;
+      margin: 0 -5px;
+    }
+    .el-button--text {
+      padding: 0;
+      margin: 0 5px;
+      border: none !important;
+      outline: none !important;
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+.el-table--border {
+  border-radius: 10px;
+  th {
+    padding: 12px 0;
+    background-color: #fcfcfd;
+    border-right: none;
+  }
+  td {
+    border-right: none;
+  }
+}
+// el-checkbox
+.el-checkbox {
+  .el-checkbox__label {
+    color: $--color-text-gray-2 !important;
+  }
+  .el-checkbox__inner::after {
+    border-width: 2px;
+  }
+}
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: $--color-white;
+  border-color: $--color-primary;
+
+  &::after {
+    border-color: $--color-primary;
+  }
+}
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: $--color-white;
+  border-color: $--color-primary;
+  &::before {
+    background-color: $--color-primary;
+  }
+}
+
+.el-radio {
+  .el-radio__label {
+    color: $--color-text-gray-2 !important;
+  }
+}
+.el-radio__input.is-checked .el-radio__inner {
+  background-color: $--color-white;
+  border-color: $--color-primary;
+  &::after {
+    width: 6px;
+    height: 6px;
+    background-color: $--color-primary;
+  }
+}
+
+// el-switch
+.el-switch {
+  &.is-checked {
+    .el-switch__core {
+      background-color: $--color-primary;
+      border-color: $--color-primary;
+    }
+  }
 }
 
 // el-pagination
 .el-pagination-li {
-  width: 32px;
+  min-width: 32px;
   height: 32px;
-  border-radius: 6px;
+  border-radius: 8px;
   overflow: hidden;
-  background-color: #fff;
+  background-color: $--color-white;
+  border: 1px solid #e1e3eb;
 }
 .el-pagination {
+  padding: 0;
+  .el-pagination__total {
+    float: left;
+  }
+  span:not([class*="suffix"]) {
+    line-height: 32px;
+    height: 32px;
+  }
   &.is-background {
     .btn-prev,
     .btn-next {
+      color: $--color-text-gray-2;
+      margin: 0 5px;
       @extend .el-pagination-li;
     }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      opacity: 0.7;
+    }
 
     .el-pager li {
-      color: #8c94ac;
-      margin: 0 4px;
+      color: $--color-text-gray-2;
+      margin: 0 5px;
+      padding: 0 8px;
       line-height: 32px;
 
       @extend .el-pagination-li;
       &:not(.disabled).active {
         color: #fff;
-        background-color: #5fc9fa;
+        background-color: $--color-primary;
       }
     }
   }
-  span:not([class*="suffix"]) {
-    height: 32px;
-    line-height: 32px;
+}
+// el-message-box
+.el-message-box {
+  width: 320px;
+  background-color: #f6f6f6;
+  border-radius: 10px;
+  &__title {
+    display: none;
   }
-  &__total {
-    color: #8c94ac;
-    margin: 0 16px 0 6px;
+  &__headerbtn {
+    display: none;
   }
-  &__sizes {
-    color: #8c94ac;
-    background-color: #fff;
-    .el-input__inner {
-      background-color: #fff;
-      border-color: #fff;
+  &__content {
+    text-align: center;
+
+    .el-message-box__status {
+      position: relative;
+      top: 0;
+      height: 48px;
+      width: 48px;
+      transform: none;
+      margin-bottom: 10px;
+
+      &.el-icon-warning {
+        border-radius: 50%;
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-image: url(../images/icon-doubt.png);
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+        }
+      }
     }
-  }
-  &__jump {
-    margin-left: 6px;
-    color: #8c94ac;
-    .el-input__inner {
-      background-color: #fff;
-      border-color: #fff;
-      padding-left: 10px;
-      padding-right: 10px;
+    .el-message-box__message {
+      padding: 0;
     }
   }
-  &__editor {
-    height: 32px;
-    &.el-input .el-input__inner {
-      height: 32px;
+  &__btns {
+    height: 75px;
+    padding: 30px 20px 10px;
+    text-align: center;
+
+    > .el-button {
+      width: 100px;
     }
   }
 }
 
-// el-dialog
-.el-dialog {
-  background: #ffffff;
-  border-radius: 10px;
-  color: #202b4b;
-  .el-dialog__header {
-    padding: 16px 20px;
-    border-bottom: 1px solid rgba(240, 244, 249, 1);
+.alert-message {
+  .el-message-box__btns {
+    text-align: center;
+    > .el-button {
+      position: relative;
+      left: auto;
+      top: 0;
+      margin: 0;
+    }
   }
-  .el-dialog__body {
-    padding: 30px;
+}
+// .el-message
+.el-message-loading {
+  border-color: mix($--color-white, $--color-success, 80%);
+  background-color: mix($--color-white, $--color-success, 90%);
+}
+// el-date-editor
+.el-date-editor {
+  border-radius: 8px;
+  .el-range-separator {
+    width: auto;
   }
-  .el-dialog__footer {
-    .el-button {
-      width: 83px;
-    }
+  .el-range-input {
+    background-color: transparent;
   }
 }
-.fullscreen-dialog {
-  .el-dialog {
-    border-radius: 0;
 
-    .el-dialog__header {
-      position: absolute;
-      padding: 14px 20px;
-      height: 60px;
-      width: 100%;
-      background-color: #fff;
-      h3 {
-        font-size: 18px;
-        line-height: 30px;
-        margin: 0;
-      }
+// el-step
+.el-step {
+  &__title.is-success,
+  &__description.is-success,
+  &__title.is-process,
+  &__description.is-process {
+    color: $--color-success;
+  }
+  &__title.is-process {
+    font-weight: normal;
+  }
+  &__head.is-success {
+    .el-step__line {
+      background-color: $--color-success;
     }
-    .el-dialog__body {
-      position: absolute;
-      top: 60px;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: #e8edf3;
-      padding: 20px;
-      overflow: auto;
+    .el-step__icon.is-text {
+      color: $--color-white;
+      border-color: $--color-success;
+      background-color: $--color-success;
     }
-    .el-dialog__footer {
-      display: none;
+  }
+  &__head.is-process {
+    .el-step__icon.is-text {
+      color: $--color-success;
+      border-color: $--color-success;
     }
   }
-}
 
-// el-message-box
-.el-message-box {
-  color: #202b4b;
-  border-radius: 10px;
-  .el-message-box__header {
-    padding: 16px 20px;
-    border-bottom: 1px solid rgba(240, 244, 249, 1);
-  }
-  .el-message-box__content {
-    padding: 30px;
-    min-height: 140px;
-  }
-  .el-message-box__btns {
-    .el-button {
-      width: 83px;
+  &__title.is-wait,
+  &__description.is-wait {
+    color: $--color-text-gray-2;
+  }
+  &__head.is-wait {
+    .el-step__icon.is-text {
+      color: $--color-text-gray-2;
+      border-color: #e1e3eb;
+      background-color: #e1e3eb;
     }
   }
-  .el-message-box__message {
-    padding-left: 50px;
-    padding-top: 4px;
-    font-size: 16px;
-    color: #202b4b;
-    line-height: 22px;
-  }
-  .el-message-box__status {
-    font-size: 32px !important;
-    top: 0;
-    left: 0;
-    transform: none;
-  }
 }
-.el-message-box__error {
-  width: 540px;
-  .el-message-box__status {
-    color: #fe5863;
-  }
+// el-popover
+.el-popper-dark {
+  background-color: $--color-text-dark-1;
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 16px;
+  border: none;
 }
-.el-message-box__warning {
-  .el-message-box__status {
-    color: #5fc9fa;
-  }
+.el-popper-dark {
+  box-shadow: 0px 10px 10px 0px rgba(54, 61, 89, 0.2);
 }
+.el-popper-dark[x-placement^="right"] .popper__arrow {
+  border-right-color: $--color-text-dark-1;
 
-// el-tabs
-.el-tabs {
-  .el-tabs__header {
-    margin-bottom: 0;
-  }
-  .el-tabs__content {
-    background-color: #fff;
-    padding: 30px;
+  &::after {
+    border-right-color: $--color-text-dark-1;
   }
+}
+.el-popper-dark[x-placement^="top"] .popper__arrow {
+  border-top-color: $--color-text-dark-1;
 
-  .el-tabs__item {
-    color: #626a82;
-    border: none;
-    background-color: #fff;
-    border-radius: 6px 6px 0 0;
-    margin-right: 12px;
-
-    &.is-active {
-      font-weight: 600;
-      color: #000;
-
-      &::before {
-        content: "";
-        display: inline-block;
-        vertical-align: middle;
-        width: 10px;
-        height: 10px;
-        background-color: $--color-primary;
-        border-radius: 50%;
-        margin-right: 5px;
-      }
-    }
+  &::after {
+    border-top-color: $--color-text-dark-1;
   }
 }
-.el-tabs--card > .el-tabs__header .el-tabs__nav {
-  border: none;
+.el-popper-dark[x-placement^="bottom"] .popper__arrow {
+  border-bottom-color: $--color-text-dark-1;
+
+  &::after {
+    border-bottom-color: $--color-text-dark-1;
+  }
 }
+.el-popper-dark[x-placement^="left"] .popper__arrow {
+  border-left-color: $--color-text-dark-1;
 
-// .el-form
-.el-form {
-  &-item__label {
-    color: #202b4b;
+  &::after {
+    border-left-color: $--color-text-dark-1;
   }
 }
-.el-form--label-top {
-  .el-form-item__label {
-    line-height: 1;
+// popper-list
+.popper-list {
+  min-width: auto;
+
+  .el-button {
+    display: block;
+    width: 100%;
+    margin: 0;
+    &:not(:last-child) {
+      margin-bottom: 5px;
+    }
   }
 }

src/assets/styles/home.scss

@@ -32,15 +32,15 @@
   z-index: auto;
   padding: 20px 0;
   line-height: 20px;
-  color: $--color-text-secondary;
+  color: $--color-text-gray-2;
   text-align: center;
   font-size: 13px;
 }
 .home-footer a {
-  color: $--color-text-secondary;
+  color: $--color-text-gray-2;
 }
 .home-footer a:hover {
-  color: $--color-text-primary;
+  color: $--color-text-dark;
 }
 
 /* navs */
@@ -98,7 +98,7 @@
 
   .nav-head {
     padding: 10px 0;
-    color: $--color-text-secondary;
+    color: $--color-text-gray-2;
     font-size: $--font-size-base;
     line-height: 20px;
     position: relative;
@@ -125,7 +125,7 @@
   // }
   .nav-item {
     overflow: hidden;
-    color: $--color-text-primary;
+    color: $--color-text-dark;
 
     &-main {
       padding: 10px 0;
@@ -219,13 +219,13 @@
   left: 0;
   z-index: 100;
   background: #fff;
-  box-shadow: 0 0 1px 0 $--border-color-base;
+  box-shadow: 0 0 1px 0 $--color-border;
   line-height: 32px;
 }
 .head-logo {
   width: 220px;
   float: left;
-  color: $--color-text-primary;
+  color: $--color-text-dark;
   height: 32px;
   padding: 0 20px;
   font-size: 20px;
@@ -236,7 +236,7 @@
     line-height: 32px;
   }
   .el-breadcrumb__inner {
-    color: $--color-text-secondary;
+    color: $--color-text-gray-2;
   }
 }
 
@@ -246,7 +246,7 @@
   height: 32px;
   line-height: 32px;
   position: relative;
-  color: $--color-text-regular;
+  color: $--color-text-gray;
   cursor: pointer;
 }
 .user-item {

src/assets/styles/variables.scss

@@ -1,40 +1,42 @@
 // color ------------------->
-$--color-text-primary: #303133 !default;
-$--color-text-regular: #606266 !default;
-$--color-text-secondary: #909399 !default;
-$--color-text-placeholder: #cccccc !default;
-$--border-color-base: #dcdfe6 !default;
-$--border-color-light: #e4e7ed !default;
-$--border-color-lighter: #ebeef5 !default;
-$--border-color-extra-light: #f2f6fc !default;
+$--color-text-dark: #1f2230 !default;
+$--color-text-dark-1: #434656 !default;
+$--color-text-gray: #6f7482 !default;
+$--color-text-gray-1: #7a7c87 !default;
 $--color-text-gray-2: #8b8fa1 !default;
-
+$--color-text-gray-3: #aaa !default;
+$--color-text-gray-4: #ccc !default;
+$--color-text-gray-5: #d3d5e0 !default;
+$--color-text-gray-6: #e0e1eb !default;
+$--color-text-gray-7: #f2f4fa !default;
+$--color-border: #eff0f5;
+$--color-background: #eff0f5;
 // status
 $--color-primary: #3a5ae5 !default;
+$--color-primary-light: mix(#fff, $--color-primary, 20%) !default;
 $--color-success: #3fcb98 !default;
+$--color-success-light: #32cf8a !default;
 $--color-warning: #ff9427 !default;
-$--color-danger: #f56c6c !default;
-$--color-info: #909399 !default;
+$--color-danger: #fe5d4e !default;
+$--color-cyan: #2abcff !default;
+$--color-cyan-light: #5fc9fa !default;
+$--color-blue: #556dff !default;
+$--color-blue-white: #4f79ff !default;
+$--color-blue-dark: #172666 !default;
+$--color-purple: #9877ff !default;
 $--color-white: #ffffff;
+$--color-dark: #1f2230;
 
-// skin
-$--color-background: #f0f4f9;
-$--color-background-dark: #21252b;
-$--color-background-act-dark: #2c313a;
-$--color-border: #eff0f5;
-$--color-border-bold: #e6e6e6;
-// text
-$--color-text-base: #abb2bf;
 // shadow
 $--shadow-light: 0 0 1px rgba(0, 0, 0, 0.15) !default;
 
 // size ------------------->
 $--font-size-base: 14px !default;
-$--font-size-large: 18px !default;
 $--font-size-medium: 16px !default;
+$--font-size-large: 18px !default;
 $--border-radius: 8px;
 $--border-radius-large: 12px;
 $--border-radius-huge: 20px;
-
+// font-family
 $--font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  "Microsoft YaHei", Arial, sans-serif;

src/modules/admin/components/ModifyApp.vue

@@ -24,69 +24,30 @@
           clearable
         ></el-input>
       </el-form-item>
-      <el-form-item prop="type" label="分类">
-        <el-select
-          v-model="modalForm.type"
-          placeholder="选择应用分类"
-          clearable
-          style="width: 100%"
-        >
-          <el-option
-            v-for="item in datas.types"
-            :key="item.code"
-            :value="item.code"
-            :label="item.name"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item prop="deploy" label="部署分类">
-        <el-select
-          v-model="modalForm.deploy"
-          placeholder="选择应用分类"
-          clearable
-          style="width: 100%"
-        >
-          <el-option
-            v-for="item in datas.deploys"
-            :key="item.code"
-            :value="item.code"
-            :label="item.name"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="IP白名单">
+      <el-form-item prop="code" label="编码">
         <el-input
-          v-model.trim="modalForm.ipAllow"
-          type="textarea"
-          placeholder="请输入访问IP白名单"
+          v-model.trim="modalForm.code"
+          placeholder="请输入编码"
+          clearable
         ></el-input>
       </el-form-item>
     </el-form>
-    <div class="flex-between" slot="footer">
-      <el-button type="danger" plain @click="toResetKey">重置密钥</el-button>
-      <div>
-        <el-button type="danger" @click="cancel" plain>取消</el-button>
-        <el-button type="primary" :disabled="isSubmit" @click="submit"
-          >确认</el-button
-        >
-      </div>
+    <div slot="footer">
+      <el-button type="danger" @click="cancel" plain>取消</el-button>
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
     </div>
   </el-dialog>
 </template>
 
 <script>
-import { clearData } from "../../../plugins/utils";
-import { appInsertOrUpdate, appResetSecret } from "../api";
+import { appInsertOrUpdate } from "../api";
 
 const initModalForm = {
   id: "",
   name: "",
-  type: "",
-  deploy: "",
-  ipAllow: "",
-  control: {}
+  code: ""
 };
 
 export default {
@@ -97,16 +58,6 @@ export default {
       default() {
         return {};
       }
-    },
-    datas: {
-      type: Object,
-      default() {
-        return {
-          types: [],
-          deploys: [],
-          controlKeys: []
-        };
-      }
     }
   },
   computed: {
@@ -128,19 +79,22 @@ export default {
             required: true,
             message: "请输入应用名称",
             trigger: "change"
-          }
-        ],
-        type: [
+          },
           {
-            required: true,
-            message: "请选择分类",
+            max: 50,
+            message: "名称不能超过50",
             trigger: "change"
           }
         ],
-        deploy: [
+        code: [
           {
             required: true,
-            message: "请选择部署分类",
+            message: "请输入应用编码",
+            trigger: "change"
+          },
+          {
+            max: 50,
+            message: "编码不能超过50",
             trigger: "change"
           }
         ]
@@ -154,16 +108,6 @@ export default {
       } else {
         this.modalForm = { ...initModalForm };
       }
-      const controlVals = val.control || {};
-      let control = {};
-      this.datas.controlKeys.forEach(cont => {
-        const defaultVal = cont.type === "number" ? undefined : null;
-        control[cont.code] =
-          controlVals[cont.code] || controlVals[cont.code] === 0
-            ? controlVals[cont.code]
-            : defaultVal;
-      });
-      this.modalForm.control = control;
 
       this.$refs.modalFormComp.clearValidate();
     },
@@ -176,17 +120,6 @@ export default {
     open() {
       this.modalIsShow = true;
     },
-    toResetKey() {
-      this.$confirm("确定要重置当前应用密钥吗？", "操作警告", {
-        type: "warning",
-        callback: async action => {
-          if (action !== "confirm") return;
-          await appResetSecret(this.instance.id);
-          this.$message.success("重置成功！");
-          this.$emit("modified");
-        }
-      });
-    },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate();
       if (!valid) return;
@@ -194,7 +127,6 @@ export default {
       if (this.isSubmit) return;
       this.isSubmit = true;
       let datas = { ...this.modalForm };
-      datas.control = clearData(this.modalForm.control);
       const data = await appInsertOrUpdate(datas).catch(() => {
         this.isSubmit = false;
       });

src/modules/admin/views/AppManage.vue

@@ -1,42 +1,49 @@
 <template>
   <div class="app-manage">
-    <div class="part-filter">
-      <div class="part-filter-form">
-        <el-form
-          ref="FilterForm"
-          label-position="left"
-          label-width="80px"
-          inline
-        >
-          <el-form-item label="模糊查询">
-            <el-input
-              v-model="filter.nameStartWith"
-              placeholder="名称前缀"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label-width="0px">
-            <el-button type="primary" icon="ios-search" @click="toPage(1)"
-              >查询</el-button
-            >
-            <el-button type="success" icon="md-add" @click="toAdd"
-              >新增</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
+    <div class="part-box part-box-filter part-box-flex">
+      <el-form ref="FilterForm" label-position="left" label-width="80px" inline>
+        <el-form-item label="模糊查询">
+          <el-input
+            v-model="filter.nameStartWith"
+            placeholder="名称前缀"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="编码">
+          <el-input v-model="filter.code" placeholder="编码"></el-input>
+        </el-form-item>
+        <el-form-item label-width="0px">
+          <el-button type="primary" icon="ios-search" @click="toPage(1)"
+            >查询</el-button
+          >
+          <el-button type="success" icon="md-add" @click="toAdd"
+            >新增</el-button
+          >
+        </el-form-item>
+      </el-form>
     </div>
 
-    <div class="part-box">
-      <el-table ref="TableList" :data="dataList" border>
+    <div class="part-box part-box-pad">
+      <el-table ref="TableList" :data="dataList">
         <el-table-column prop="id" label="ID" width="80"></el-table-column>
         <el-table-column prop="name" label="名称"> </el-table-column>
-        <el-table-column prop="typeName" label="分类"> </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="160">
+        <el-table-column prop="code" label="编码"> </el-table-column>
+        <el-table-column prop="masterVersionName" label="版本号">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              title="切换主干版本"
+              @click="toSwithMasterVersion(scope.row)"
+              >{{ scope.row.masterVersionName }}</el-button
+            >
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="170">
           <span slot-scope="scope">{{
             scope.row.createTime | timestampFilter
           }}</span>
         </el-table-column>
-        <el-table-column prop="updateTime" label="修改时间" width="160">
+        <el-table-column prop="updateTime" label="修改时间" width="170">
           <span slot-scope="scope">{{
             scope.row.updateTime | timestampFilter
           }}</span>
@@ -116,7 +123,8 @@ export default {
     toEdit(row) {
       this.curRow = row;
       this.$refs.ModifyApp.open();
-    }
+    },
+    toSwithMasterVersion(row) {}
   }
 };
 </script>