Refactor code structure and remove redundant changes

assets/scss/app.scss

@@ -0,0 +1,358 @@
+html,
+body,
+p,
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  font-family: Microsoft YaHei, PingFang SC, Helvetica Neue, Helvetica, Hiragino Sans GB, Arial, sans-serif;
+  font-weight: normal;
+  word-break: break-all;
+}
+body {
+  min-width: 1500px;
+}
+img {
+  user-select: none;
+}
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+:root {
+  --el-text-color-regular: #484b52; //调整全局色
+  --el-border-color: #ced4de;
+  --el-color-primary-light-1: rgba(8, 88, 247, 0.9);
+}
+
+#app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  .page-content {
+    overflow-x: auto;
+    flex: 1;
+    display: flex;
+    padding: 8px;
+    box-sizing: border-box;
+    flex-direction: column;
+    background-color: #f5f6f7;
+    .page-table-wrap {
+      height: 100%;
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      background-color: #ffffff;
+      padding: 8px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      .el-table {
+        position: absolute;
+      }
+    }
+    .page-card {
+      flex: 1;
+      background-color: #ffffff;
+      padding: 8px;
+      box-sizing: border-box;
+      border-radius: 4px;
+    }
+  }
+}
+#nprogress {
+  .bar {
+    background: var(--el-color-primary) !important;
+    z-index: 9999999 !important;
+  }
+  .spinner-icon {
+    border-top-color: var(--el-color-primary) !important;
+    border-left-color: var(--el-color-primary) !important;
+  }
+}
+.color-primary {
+  color: $color-primary;
+}
+.color-gray {
+  color: #858c99;
+}
+.text-line-2 {
+  @include ellipsis(2);
+}
+.el-divider--horizontal {
+  margin: 12px 0 !important;
+}
+// 滚动条的宽度
+::-webkit-scrollbar {
+  width: 10px !important; // 横向滚动条
+  height: 10px !important; // 纵向滚动条 必写
+}
+// 滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 5px;
+}
+.el-button {
+  outline: none !important;
+  font-weight: normal !important; // 普通字重
+  padding: 8px 10px !important; // 间距调整
+  [class*='el-icon'] + span {
+    margin-left: 4px !important; // 按钮字标间距
+  }
+}
+.el-tabs__item {
+  // 表格标签字色间距
+  color: #9da0a3 !important;
+  padding: 0 24px 6px 0 !important;
+  font-size: 15px !important;
+}
+.el-tabs__item.is-active,
+.el-tabs__item:hover {
+  // 表格标签活动字色
+  color: #333538 !important;
+}
+.page-header .el-tabs__item.is-active {
+  font-weight: 700 !important; //页面头部导航，字重改为blod
+}
+.el-badge {
+  // 徽章样式优化
+  font-weight: 400;
+  --el-badge-size: 16px !important;
+  --el-badge-padding: 5px !important;
+}
+.el-table {
+  .el-link__inner {
+    font-size: 13px;
+    font-weight: normal;
+  }
+}
+.el-table th {
+  background-color: #f2f3f5 !important;
+  padding: 7px 0 !important;
+  .cell {
+    color: #484b52; // 更改颜色为二级
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 16px;
+  }
+  &.el-table-column--selection > .cell {
+    display: flex;
+    height: auto;
+  }
+}
+.el-table td .cell {
+  color: #333538;
+  font-size: 13px;
+  line-height: 16px;
+}
+.el-table .caret-wrapper {
+  //add 表头排序按钮上下标间距
+  height: 10px !important;
+}
+.el-table .sort-caret {
+  //add 表头排序按钮上下标大小右边间距
+  border-width: 4px !important;
+  left: 4px !important;
+  border-radius: 3px;
+}
+.el-table__body tr:hover > td {
+  background-color: #f7f8fa !important;
+}
+.el-table--default td.el-table__cell {
+  padding: 9px 0 !important;
+  height: 33px;
+}
+.el-table__body-wrapper .el-table-column--selection > .cell,
+.el-table__header-wrapper .el-table-column--selection > .cell {
+  height: unset !important;
+  display: flex !important;
+}
+.el-table .el-scrollbar__bar {
+  background-color: #f2f3f5;
+}
+.el-table tbody td .cell:empty::after {
+  content: '-';
+}
+.el-scrollbar__bar.is-vertical {
+  width: 10px !important;
+}
+.el-scrollbar__bar.is-horizontal {
+  height: 10px !important;
+}
+.page-title {
+  color: #333538;
+  font-weight: 600;
+  padding: 6px 10px 8px;
+  font-size: 16px;
+}
+.el-form-item {
+  margin-bottom: 15px !important;
+}
+.el-form-item__label {
+  color: #484b52 !important; // 输入title文字颜色
+  font-size: 15px;
+}
+.el-dialog {
+  border-radius: 4px !important;
+  padding: 0 !important;
+}
+.el-dialog__body {
+  padding: 16px 10px 16px 16px !important;
+  max-height: calc(100vh - 300px) !important;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  .page-table-wrap {
+    height: calc(100vh - 300px) !important;
+    min-height: 300px;
+    padding: 0px !important;
+  }
+  .el-input__inner {
+    min-height: 30px;
+  }
+}
+.el-dialog__header {
+  border-bottom: 1px solid #e6e8ed;
+  margin: 0 15px;
+  padding: 0 !important;
+  height: 46px;
+  line-height: 46px;
+  position: relative;
+  .el-dialog__title {
+    font-size: 15px;
+    font-weight: 700;
+  }
+  .el-dialog__headerbtn {
+    right: 0;
+    width: 16px;
+    height: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+.el-dialog__footer {
+  border-top: 1px solid #e6e8ed;
+  margin: 0 15px;
+  padding-bottom: 14px !important;
+  padding-right: 0 !important;
+  .el-button {
+    min-width: 60px;
+  }
+  .el-button.is-text {
+    color: #333538;
+  }
+}
+.el-drawer__header {
+  margin: 0 !important;
+  .el-drawer__title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #23272e;
+  }
+}
+.el-drawer__body {
+  .el-input__inner {
+    min-height: 30px;
+  }
+}
+.table-tooltip {
+  max-width: 600px;
+}
+
+.el-input .el-input__wrapper {
+  padding: 1px 10px !important; //更改input框内间距
+}
+
+.el-form-item .el-form-item__label {
+  padding: 0 10px 0 0; //更改输入框标题间距
+}
+
+.el-pagination {
+  --el-pagination-font-size-small: 13px !important; //列表页分页器字号修改
+  --el-pagination-font-size: 13px !important; //列表页分页器字号修改
+  --el-pagination-button-color: var(--el-text-color-regular) !important;
+  --el-pagination-border-radius: 4px !important;
+  --el-pagination-button-bg-color: #fff !important;
+  --el-pagination-button-height-small: 28px !important;
+  --el-pagination-button-width-small: 28px !important;
+  --el-pagination-button-height: 28px !important;
+  --el-pagination-button-width: 28px !important;
+  justify-content: flex-end;
+}
+
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+  border: 1px solid #ced4de; //分页样式增加边框
+}
+.el-pagination.is-background .btn-next.is-active,
+.el-pagination.is-background .btn-prev.is-active,
+.el-pagination.is-background .el-pager li.is-active {
+  border: none; //分页活动样式去除边框
+}
+
+.el-pagination .el-pagination__sizes .el-select__wrapper {
+  min-height: 28px !important;
+  box-shadow: 0 0 0 1px #ced4de inset; //分页每页显示样式调整
+}
+
+.el-pagination .el-pagination__sizes .el-select .el-select__wrapper .el-select__suffix .el-icon {
+  width: 12px;
+  height: 12px; //分页每页显示样式下拉箭头大小
+}
+
+.el-pagination .el-pagination__jump .el-input .el-input__wrapper .el-input__inner {
+  height: 28px !important;
+  min-height: 28px; //分页页面跳转办输入高
+}
+
+.el-pagination .el-input--small .el-input__wrapper,
+.el-pagination .el-input__wrapper {
+  padding: 0 !important; //分页页面跳转办输入内间距
+}
+
+.el-pagination .el-pagination__jump .el-pagination__editor.el-input {
+  width: 40px; //分页页面跳转办输入宽
+}
+
+.kl-fwn {
+  font-weight: normal !important;
+  * {
+    font-weight: normal !important;
+  }
+}
+
+.kl-table-btn {
+  padding: 0 !important;
+  font-size: 13px !important;
+}
+
+.el-input__inner {
+  text-align: left !important;
+  height: 37px !important;
+}
+
+.el-form-item--large .el-form-item__error {
+  padding-top: 0 !important;
+}
+
+.el-select__wrapper {
+  min-height: 37px !important;
+}
+
+// 文字显示1行 超出显示点点
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 文字显示2行 超出显示点点
+.ellipsis-2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}

assets/scss/mixins.scss

@@ -0,0 +1,9 @@
+//文字溢出...
+@mixin ellipsis($line: 1) {
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box !important;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}

assets/scss/variables.scss

@@ -0,0 +1,6 @@
+// 全局scss变量
+$color-primary: #0858f7;
+html {
+  --el-color-primary: #0858f7 !important;
+  --el-color-danger: #ff5651 !important;
+}