ui调整

src/assets/style/base.less

@@ -6,10 +6,10 @@
 
 /* part */
 .part-box {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   background-color: #fff;
   border-radius: var(--border-radius);
-  padding: 20px;
+  padding: 16px;
 
   &.is-border {
     border: 1px solid var(--color-border);
@@ -20,50 +20,96 @@
   &.is-nopad {
     padding: 0;
   }
-
   &.is-filter {
-    .a-form-item {
-      margin-bottom: 15px;
-    }
-    .a-form-item__label {
-      display: none;
-    }
-    .arco-select {
-      width: 200px;
-    }
-    .arco-input-wrapper {
-      width: 200px;
-    }
-    .arco-form-item-layout-inline {
-      margin-right: 16px;
-    }
-  }
-
-  &-action {
-    padding-bottom: 15px;
-    white-space: nowrap;
-    display: flex;
-    align-items: flex-end;
-  }
-  &-tips {
-    font-size: 16px;
-    line-height: 25px;
-    color: var(--color-text-dark-1);
-    margin-bottom: 15px;
+    padding-bottom: 4px;
   }
 
   &-head {
     .box-justify;
     min-height: 30px;
     margin: -10px 0 10px -10px;
-    color: var(--color-text-dark);
+    color: var(--app-main-text-color);
 
     > h3 {
-      font-size: 17px;
+      font-size: 18px;
+    }
+  }
+}
+
+.filter-line {
+  .arco-input-wrapper,
+  .arco-select {
+    width: 200px;
+    padding-left: 8px;
+  }
+
+  .arco-select-view-prefix,
+  .arco-input-prefix {
+    padding-right: 16px;
+    position: relative;
+    color: var(--color-text-dark-1);
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 1px;
+      height: 14px;
+      background: var(--color-border);
+      right: 8px;
+      top: 50%;
+      margin-top: -7px;
     }
   }
 }
 
+.part-action {
+  margin-bottom: 16px;
+  .arco-btn-text {
+    padding: 5px 8px;
+  }
+  .arco-divider {
+    margin: 0;
+    border-color: var(--color-border);
+  }
+}
+
+// page-table
+.page-table {
+  .arco-table-container {
+    border: none;
+  }
+  .arco-table-tr {
+    .arco-table-th {
+      color: var(--color-text-gray);
+      font-weight: 400;
+      background-color: #f7f7f7;
+      border-color: var(--color-border);
+    }
+    .arco-table-td {
+      border-color: var(--color-border);
+      color: var(--color-text-dark);
+    }
+  }
+  .arco-table-cell {
+    padding: 12px;
+  }
+}
+
+// action-more
+.action-more {
+  .ant-btn-block {
+    display: block;
+    padding: 5px 8px;
+  }
+
+  .ant-popover-inner {
+    border-radius: 6px;
+    padding: 6px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
+  }
+}
+
 /* table */
 .table {
   width: 100%;
@@ -79,7 +125,7 @@
     padding: 12px;
     line-height: 1.2;
     letter-spacing: 1px;
-    color: var(--color-text-gray-2);
+    color: var(--color-text-gray);
     border: 1px solid var(--color-border);
   }
   td {
@@ -150,7 +196,7 @@
     }
   }
   &.arco-btn-disabled {
-    color: var(--color-text-gray-4);
+    color: var(--color-text-gray-2);
   }
 }
 .btn-primary {
@@ -171,7 +217,7 @@
 .tips-info {
   font-size: 14px;
   line-height: 20px;
-  color: var(--color-text-gray-2);
+  color: var(--color-text-gray);
 
   > i {
     margin-right: 2px;
@@ -189,7 +235,7 @@
 .tips-icon {
   display: inline-block;
   vertical-align: middle;
-  color: var(--color-text-gray-3);
+  color: var(--color-text-gray-1);
   font-size: 18px;
   margin: 0 10px;
   cursor: pointer;

src/assets/style/home.less

@@ -58,166 +58,60 @@
 .home-navs {
   position: absolute;
   width: 220px;
-  top: 0;
+  top: 56px;
   left: 0;
   bottom: 0;
   z-index: 100;
   overflow: auto;
   font-size: 14px;
   background: var(--color-white);
-  border-top-right-radius: var(--border-radius-huge);
-  border-bottom-right-radius: var(--border-radius-huge);
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    height: 100%;
-    width: 1px;
-    right: 0;
-    bottom: 0;
-    z-index: 9;
-    background: rgba(229, 229, 229, 1);
-  }
-
-  .head-logo {
-    padding: 0 40px;
-    font-size: 20px;
-    line-height: 40px;
-    text-align: center;
-
-    &-content {
-      display: block;
-      padding: 30px 0;
-      border-bottom: 1px solid #eff0f5;
-      cursor: pointer;
+}
 
-      &:hover {
-        opacity: 0.8;
-      }
-    }
+.arco-menu-home {
+  padding: 16px 8px;
 
-    img {
-      display: block;
-      max-width: 160px;
-      height: 40px;
-    }
+  .arco-menu-inner {
+    padding: 0;
   }
 
-  .nav-part {
-    padding: 20px 0;
-    border-top: 1px solid var(--color-border);
+  .arco-menu-inline {
+    margin-bottom: 20px;
   }
 
-  .nav-head {
-    padding: 10px 0;
-    color: var(--color-text-gray-2);
-    font-size: var(--font-size-base);
+  .arco-menu-inline-header {
+    padding: 9px 40px !important;
+    min-height: 38px;
     line-height: 20px;
-    position: relative;
-    font-weight: 500;
+    font-weight: 400;
 
-    > span {
-      display: inline-block;
-      vertical-align: top;
-      font-weight: 600;
-    }
-
-    &-right-icon {
+    .arco-menu-icon {
       position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      color: #d3d5e0;
-      font-size: 12px;
+      left: 16px;
+      font-size: 16px;
     }
-  }
-
-  // .nav-list {
-  //   padding: 0 0 0 23px;
-  // }
-  .nav-item {
-    overflow: hidden;
-    color: var(--color-text-dark-1);
 
-    &-main {
-      padding: 10px 0;
-      line-height: 20px;
-      position: relative;
-      font-weight: 500;
-      cursor: pointer;
-
-      &-act,
+    &.arco-menu-selected {
       &:hover {
-        font-weight: 600;
-        color: var(--color-primary);
+        background-color: var(--color-primary-light);
       }
     }
-
-    &-icon {
-      display: block;
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      top: 50%;
-      margin-top: -10px;
-      text-align: center;
-      line-height: 20px;
-    }
-
-    &-icon-right {
-      right: 5px;
-    }
-
-    &-info {
-      display: block;
-      position: absolute;
-      padding: 0 3px;
-      min-width: 16px;
-      height: 16px;
-      font-size: 12px;
-      line-height: 16px;
-      top: 12px;
-      right: 40px;
-      background-color: var(--color-warning);
-      color: #fff;
-      text-align: center;
-      border-radius: 3px;
-    }
-  }
-}
-
-.arco-menu-home {
-  padding-top: 20px;
-
-  .arco-menu-inline {
-    margin-bottom: 20px;
-  }
-
-  .arco-menu-inline-header {
-    padding: 0 40px !important;
-    height: 50px;
-    line-height: 50px;
-    font-weight: 600;
-
-    > .icon {
-      margin-right: 12px;
-    }
   }
 
   .arco-menu-item {
     height: auto;
-    min-height: 40px;
+    min-height: 38px;
     line-height: 20px;
-    padding: 10px 40px !important;
+    padding: 9px 40px !important;
     white-space: normal;
     .arco-menu-indent-list {
       display: none;
     }
-  }
 
-  .arco-menu-item.arco-menu-selected {
-    font-weight: 600;
+    &.arco-menu-selected {
+      font-weight: 500;
+      color: var(--color-primary);
+      background-color: var(--color-primary-light);
+    }
   }
 }
 
@@ -225,115 +119,55 @@
 .home-header {
   position: absolute;
   width: 100%;
-  height: 50px;
+  height: 56px;
   top: 0;
   left: 0;
   z-index: 99;
-  color: #fff;
-  padding-left: 220px;
-  background-color: var(--color-text-dark);
+  padding: 12px 16px 11px;
+  background-color: #fff;
 
   display: flex;
-  align-items: stretch;
+  align-items: center;
   justify-content: space-between;
+  border-bottom: 1px solid var(--color-border);
 
-  .menu-list {
-    li {
-      position: relative;
-      display: inline-block;
-      vertical-align: top;
-      padding: 10px;
-      height: 50px;
-      line-height: 30px;
-      opacity: 0.4;
-      font-size: 16px;
-      position: relative;
-      text-align: center;
-      cursor: pointer;
+  .home-title {
+    font-size: 20px;
+    font-weight: bold;
+  }
 
-      &:hover {
-        opacity: 1;
+  .home-action {
+    &-item {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 8px;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 8px;
+      font-weight: 400;
+      border-radius: var(--border-radius-small);
+
+      .svg-icon {
+        font-size: 18px;
       }
 
-      &.menu-item-act {
-        opacity: 1;
-
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
-          left: 5px;
-          right: 5px;
-          bottom: 0;
-          border-top: 5px solid #fff;
-          border-radius: 5px;
-          z-index: 8;
-        }
+      .svg-icon + span {
+        margin-left: 6px;
       }
-
-      span {
+      > span {
         display: inline-block;
-        vertical-align: top;
-      }
-
-      .icon {
-        margin-top: -3px;
-        margin-right: 6px;
+        vertical-align: middle;
       }
 
-      > i {
-        margin-right: 6px;
-      }
-    }
-  }
-
-  .head-menu {
-    flex-grow: 1;
-    overflow-y: hidden;
-    overflow-x: auto;
-
-    ul {
-      white-space: nowrap;
-    }
-  }
-
-  .head-user {
-    flex-grow: 0;
-    flex-shrink: 0;
-
-    .menu-item-account {
-      white-space: nowrap;
-      padding: 10px;
+      &.cursor {
+        cursor: pointer;
 
-      span {
-        max-width: 156px;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        &:hover {
+          background-color: var(--color-background);
+        }
       }
     }
   }
-
-  // .head-menu-btn
-  .head-menu-btn {
-    display: none;
-    float: right;
-    line-height: 36px;
-    padding: 12px 15px;
-    text-align: center;
-
-    > span {
-      display: block;
-      height: 36px;
-      width: 36px;
-      border-radius: 5px;
-      background-color: rgba(255, 255, 255, 0.3);
-    }
-
-    i {
-      font-size: 22px;
-      vertical-align: middle;
-    }
-  }
 }
 
 // menu-dialog
@@ -356,11 +190,11 @@
     width: 52px;
     height: 52px;
     margin: 0 auto;
-    border: 1px solid var(--color-text-gray-3);
+    border: 1px solid var(--color-text-gray-1);
     border-radius: 50%;
     font-size: 30px;
     text-align: center;
-    color: var(--color-text-gray-3);
+    color: var(--color-text-gray-1);
     cursor: pointer;
 
     &:hover {
@@ -372,33 +206,31 @@
 
 // home-breadcrumb
 .home-breadcrumb {
-  margin-bottom: 18px;
-  font-weight: 500;
-  color: var(--color-text-gray-2);
+  margin-bottom: 16px;
 
   .breadcrumb-tips {
     display: inline-block;
     vertical-align: middle;
+    color: var(--color-text-gray);
 
-    > i {
-      margin-top: -2px;
-      margin-right: 8px;
+    > .svg-icon {
+      margin-top: -3px;
+      margin-right: 5px;
+      font-size: 14px;
     }
   }
 
   .arco-breadcrumb {
-    line-height: 16px;
     display: inline-block;
     vertical-align: middle;
 
-    .arco-breadcrumb__item {
-      .arco-breadcrumb__inner {
-        color: var(--color-text-gray-2);
-      }
+    .arco-breadcrumb-item {
+      line-height: 22px;
+      color: var(--color-text-gray);
     }
 
-    .arco-breadcrumb__separator {
-      margin: 0 5px;
+    .arco-breadcrumb-item-separator {
+      margin: 0;
     }
   }
 }
@@ -415,13 +247,13 @@
   z-index: 99;
   padding: 5px 0;
   line-height: 20px;
-  color: var(--color-text-gray-3);
+  color: var(--color-text-gray-1);
   text-align: center;
   font-size: 13px;
   background-color: var(--color-background);
 
   a {
-    color: var(--color-text-gray-3);
+    color: var(--color-text-gray-1);
   }
 
   a:hover {

src/assets/style/pages.less

@@ -33,45 +33,71 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 860px;
-  height: 514px;
+  width: 800px;
+  height: 500px;
   transform: translate(-50%, -50%);
   overflow: hidden;
-  border-radius: 20px;
+  border-radius: 30px;
   background-color: #fff;
+  backdrop-filter: blur(10px);
 }
 .login-theme {
-  width: 420px;
+  width: 400px;
   height: 100%;
-  border-radius: 20px;
-  background-color: #3858e0;
-  background-image: url(assets/images/login-theme.png);
+  border-radius: 30px 0 0 30px;
+  background-image: url(assets/images/login-theme.jpg);
   background-size: 100% 100%;
   float: left;
   position: relative;
 
   > h2 {
     position: absolute;
-    width: 100%;
-    top: 60px;
-    left: 0;
-    text-align: center;
-    font-size: 25px;
-    color: #fff;
+    top: 192px;
+    left: 48px;
+    font-weight: bold;
+    font-size: 42px;
+    color: #ffffff;
+    line-height: 56px;
+    font-style: normal;
+  }
+
+  .login-webinfo {
+    position: absolute;
+    bottom: 48px;
+    left: 48px;
+
+    font-weight: 400;
+    font-size: 14px;
+    color: #e5e5e5;
+    line-height: 22px;
+
+    a:hover {
+      opacity: 0.8;
+    }
   }
 }
 .login-body {
-  margin-left: 420px;
+  margin-left: 400px;
   height: 100%;
   overflow: hidden;
-  padding: 80px 75px;
+  padding: 126px 40px;
 }
 .login-title {
-  text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 24px;
+
   h1 {
-    font-size: 21px;
+    height: 32px;
     font-weight: bold;
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 4px;
+  }
+  p {
+    height: 28px;
+    font-weight: 400;
+    font-size: 16px;
+    color: var(--color-text-gray);
+    line-height: 28px;
   }
 
   img {
@@ -120,7 +146,7 @@
   .label-item {
     display: inline-block;
     vertical-align: top;
-    border: 1px solid var(--color-text-gray-6);
+    border: 1px solid var(--color-text-gray-4);
     border-radius: 3px;
     padding: 4px 40px 5px 10px;
     position: relative;
@@ -139,7 +165,7 @@
     transform: translateY(-50%);
     z-index: 99;
     font-size: 16px;
-    color: var(--color-text-gray-5);
+    color: var(--color-text-gray-3);
     cursor: pointer;
     &:hover {
       color: var(--color-danger);
@@ -148,10 +174,10 @@
   .label-add {
     display: inline-block;
     vertical-align: top;
-    border: 1px solid var(--color-text-gray-6);
+    border: 1px solid var(--color-text-gray-4);
     border-radius: 3px;
     padding: 0 10px;
-    color: var(--color-text-gray-2);
+    color: var(--color-text-gray);
     line-height: 31px;
     cursor: pointer;
     &:hover {
@@ -260,7 +286,7 @@
   }
   .field-textarea {
     border-radius: var(--border-radius);
-    border: 1px solid var(--color-text-gray-4);
+    border: 1px solid var(--color-text-gray-2);
     min-height: 60px;
     padding: 2px;
     overflow: hidden;

src/assets/style/reset.less

@@ -34,15 +34,13 @@ u {
 
 input {
   font-family: var(--font-family);
-  background: rgba(245 245 245 1);
   border: none;
   outline: none;
 }
 
-input:-webkit-input-placeholder {
-  color: var(--color-text-gray-4);
-  font-weight: bold;
-  font-size: 12px;
+input::placeholder {
+  color: var(--color-text-gray-2) !important;
+  font-weight: 400;
 }
 
 button,
@@ -119,18 +117,63 @@ textarea:focus {
 }
 
 body {
-  color: var(--color-text-dark-1);
+  color: var(--color-text-dark);
   font-size: var(--font-size-base);
   font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: var(--color-background);
 }
+// svg-icon
+.svg-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  path {
+    fill: inherit;
+  }
+}
 
 // arco ------->
 .arco-btn + .arco-btn {
   margin-left: 10px;
 }
+.arco-btn-text {
+  &.arco-btn-status-normal {
+    color: var(--color-text-dark) !important;
+    font-weight: 400;
+  }
+  &:not(.arco-btn-only-icon) .arco-btn-icon {
+    margin-right: 4px;
+  }
+}
+// .arco-pagination
+.arco-table-pagination {
+  display: block;
+}
+.arco-pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .arco-pagination-item {
+    border: 1px solid var(--color-border);
+    line-height: 30px;
+  }
+  .arco-pagination-item-active {
+    border-color: var(--color-primary);
+    background-color: var(--color-primary);
+    color: #fff;
+  }
+  .arco-select-view-single {
+    border-color: var(--color-border);
+  }
+  .arco-pagination-total {
+    flex-grow: 2;
+  }
+}
 .action-column {
   .arco-btn {
     height: 20px;
@@ -148,3 +191,15 @@ body {
     }
   }
 }
+.arco-input-wrapper,
+.arco-select-view-single {
+  border-color: #d9d9d9;
+  background-color: transparent;
+}
+.arco-input-wrapper:not(.arco-input-focus),
+.arco-select-view-single:not(.arco-select-view-focus) {
+  &:hover {
+    border-color: #bebebe;
+    background-color: transparent;
+  }
+}

src/assets/style/var.less

@@ -1,33 +1,30 @@
-:root {
+body {
   /* color -------------------> */
-  --color-text-dark: #1f2230;
-  --color-text-dark-1: #434656;
-  --color-text-gray: #6f7482;
-  --color-text-gray-1: #7a7c87;
-  --color-text-gray-2: #8b8fa1;
-  --color-text-gray-3: #aaa;
-  --color-text-gray-4: #ccc;
-  --color-text-gray-5: #d3d5e0;
-  --color-text-gray-6: #e0e1eb;
-  --color-text-gray-7: #f2f4fa;
-  --color-border: #eff0f5;
-  --color-border-bold: #e6e6e6;
-  --color-background: #eff0f5;
+  --color-text-dark: #262626;
+  --color-text-dark-1: #595959;
+  --color-text-gray: #8c8c8c;
+  --color-text-gray-1: #aaa;
+  --color-text-gray-2: #bfbfbf;
+  --color-text-gray-3: #d3d5e0;
+  --color-text-gray-4: #e0e1eb;
+  --color-border: #e5e5e5;
+  --color-border-bold: #d5d5d5;
+  --color-background: #f2f3f5;
 
   /* status */
-  --color-primary: #3a5ae5;
+  --color-primary: #165dff;
+  --color-primary-light: #e8f3ff;
   --color-success: #3fcb98;
   --color-success-light: #32cf8a;
   --color-warning: #ff9427;
   --color-danger: #fe5d4e;
   --color-cyan: #2abcff;
   --color-cyan-light: #5fc9fa;
-  --color-blue: #556dff;
-  --color-blue-white: #4f79ff;
+  --color-blue: #3491fa;
   --color-blue-dark: #172666;
   --color-purple: #9877ff;
   --color-white: #fff;
-  --color-dark: #1f2230;
+  --color-dark: #262626;
 
   /* shadow */
   --shadow-light: 0 0 1px rgba(0 0 0 0.15);
@@ -41,6 +38,10 @@
   --border-radius-huge: 20px;
 
   /* font-family */
-  --font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', Arial, sans-serif;
+  --font-family: SourceHanSansCN, 'Helvetica Neue', Helvetica, 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
+
+  // arco
+  --border-radius-small: 4px;
+  --color-text-1: --color-text-dark-1;
 }

src/assets/svgs/icon-home.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-主页</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02.01-授权管理-授权管理" transform="translate(-236, -75)">
+            <g id="icon-主页" transform="translate(236, 75)">
+                <rect id="home-(Background)" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M6.00003767,12.0000153 L10.0000381,12.0000153 L10.0000381,11.0000153 L6.00003767,11.0000153 L6.00003767,12.0000153 Z M14.8535919,8.14646196 L14.1464844,8.85356855 L13.0000381,7.70712233 L13.0000381,13.5000153 C13.0000381,14.0523 12.5523229,14.5000153 12.0000381,14.5000153 L4.00003779,14.5000153 C3.44775304,14.5000153 3.00003779,14.0523 3.00003779,13.5000153 L3.00003779,7.70712185 L3.00003779,7.70712185 L1.8535912,8.85356855 L1.14648438,8.14646196 L7.64648428,1.64646111 C7.84174641,1.45119895 8.1583289,1.45119892 8.35359106,1.64646106 C8.35359107,1.64646106 8.35359108,1.64646107 8.35359109,1.64646108 L14.8535919,8.14646196 L14.8535919,8.14646196 Z M12.0000381,6.70712233 L12.0000381,13.5000153 L4.00003767,13.5000153 L4.00003767,6.70712185 L8.00003767,2.70712197 L12.0000381,6.70712233 Z" id="home" fill-opacity="0.9"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon-import.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg  viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-导入</title>
+    <g id="超管" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="06.01-用户管理" transform="translate(-116, -171)">
+            <g id="icon-导入" transform="translate(116, 171)">
+                <rect id="download-(Background)" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M8.5,9.57746124 L8.49998093,0.5 L7.49998093,0.5 L7.5,9.57745647 L3.73641205,5.81387091 L3.02930534,6.5209775 L7.64644661,11.1381191 C7.84170875,11.3333813 8.15829124,11.3333813 8.35355339,11.1381192 C8.35355339,11.1381191 8.3535534,11.1381191 8.3535534,11.1381191 L12.9706955,6.52097702 L12.9706955,6.52097702 L12.2635889,5.81386995 L8.5,9.57746124 Z M2,13.0000238 C2,13.5523081 2.44771534,14.0000238 3,14.0000238 L13,14.0000238 C13.5522842,14.0000238 14,13.552309 14,13.0000238 L14,11.0000238 L13,11.0000238 L13,13.0000238 L3,13.0000238 L3,11.0000238 L2,11.0000238 L2,13.0000238 Z" id="download" ></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon-logout.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-退出</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02.01-授权管理-授权管理" transform="translate(-1398, -19)">
+            <g id="icon-退出" transform="translate(1398, 19)">
+                <rect id="logout-(Background)" opacity="0" x="0" y="0" width="18" height="18"></rect>
+                <path d="M10.6871798,2.25 C10.9978269,2.25 11.2496609,2.5018425 11.2496609,2.8125 L11.2496609,5.625 L10.1246986,5.625 L10.1246986,3.375 L2.24996233,3.375 L2.24996233,14.625 L10.1246986,14.625 L10.1246986,12.375 L11.2496609,12.375 L11.2496609,15.1875 C11.2496609,15.4981125 10.9978269,15.75 10.6871798,15.75 L1.68748116,15.75 C1.37683407,15.75 1.125,15.4981125 1.125,15.1875 L1.125,2.8125 C1.125,2.5018425 1.37683407,2.25 1.68748116,2.25 Z M13.4309636,5.11551 L16.9177359,8.60237858 C17.1374522,8.82205308 17.1374522,9.17821692 16.9177359,9.39789142 L13.4309636,12.88476 L12.6354625,12.0892472 L15.1620308,9.56265292 L6.74974414,9.56263042 L6.74974414,8.43759458 L15.1620308,8.43761708 L12.6354625,5.91103409 L13.4309636,5.11551 Z" id="logout" fill="#595959"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon-org.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-机构</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02.01-授权管理-授权管理" transform="translate(-1132, -19)" fill-rule="nonzero">
+            <g id="icon-机构" transform="translate(1132, 19)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="18" height="18"></rect>
+                <path d="M15.7148438,8.12109375 C16.2580078,8.12109375 16.4847656,7.42324219 16.0435547,7.1015625 L9.33046875,2.21835937 C9.13373237,2.07421898 8.86626763,2.07421898 8.66953125,2.21835937 L1.95644531,7.1015625 C1.51523438,7.42148437 1.74199219,8.12109375 2.28691406,8.12109375 L3.375,8.12109375 L3.375,14.6953125 L2.109375,14.6953125 C2.03203125,14.6953125 1.96875,14.7585937 1.96875,14.8359375 L1.96875,15.75 C1.96875,15.8273437 2.03203125,15.890625 2.109375,15.890625 L15.890625,15.890625 C15.9679688,15.890625 16.03125,15.8273437 16.03125,15.75 L16.03125,14.8359375 C16.03125,14.7585937 15.9679688,14.6953125 15.890625,14.6953125 L14.625,14.6953125 L14.625,8.12109375 L15.7148438,8.12109375 Z M6.69726563,14.6953125 L4.640625,14.6953125 L4.640625,8.12109375 L6.69726563,8.12109375 L6.69726563,14.6953125 Z M10.0195313,14.6953125 L7.96289063,14.6953125 L7.96289063,8.12109375 L10.0195313,8.12109375 L10.0195313,14.6953125 Z M13.359375,14.6953125 L11.2851563,14.6953125 L11.2851563,8.12109375 L13.359375,8.12109375 L13.359375,14.6953125 Z" id="形状" fill="#BFBFBF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon-user.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-用户</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02.01-授权管理-授权管理" transform="translate(-1244, -19)">
+            <g id="icon-用户" transform="translate(1244, 19)">
+                <polygon id="Rectangle-4117" opacity="0" transform="translate(9, 9) rotate(0) translate(-9, -9)" points="3.14721972e-06 3.14721974e-06 18.0000031 3.14721974e-06 18.0000031 18.0000031 3.14721972e-06 18.0000031"></polygon>
+                <path d="M9.00000629,9.5625 C6.82538495,9.5625 5.06250603,7.79962134 5.06250603,5.62499973 C5.06250603,3.45037839 6.82538495,1.6875 9.00000629,1.6875 C11.1746276,1.6875 12.9375063,3.45037839 12.9375063,5.62499973 C12.9375063,7.79962134 11.1746276,9.5625 9.00000629,9.5625 Z M16.3125063,13.190207 L16.3125063,15.75 C16.3125063,16.0606599 16.0606662,16.3125 15.7500063,16.3125 L2.25000777,16.3125 C1.93934758,16.3125 1.68750629,16.0606599 1.68750629,15.75 L1.68750629,13.190207 C1.68750629,12.7739882 1.91589921,12.3887544 2.29147854,12.2093714 C4.33058476,11.2354603 6.59982888,10.6875 9.00000683,10.6875 C11.4001843,10.6875 13.6694286,11.2354603 15.7085351,12.2093714 C16.0841141,12.3887544 16.3125063,12.7739882 16.3125063,13.190207 Z" id="Union" fill="#BFBFBF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/index.ts

@@ -1,6 +1,7 @@
 import { App } from 'vue';
 
 // selection
+import SvgIcon from './svg-icon/index.vue';
 import SelectTask from './select-task/index.vue';
 import SelectTeaching from './select-teaching/index.vue';
 import SelectAgent from './select-agent/index.vue';
@@ -8,6 +9,7 @@ import SelectRangeDatetime from './select-range-datetime/index.vue';
 
 export default {
   install(Vue: App) {
+    Vue.component('SvgIcon', SvgIcon);
     Vue.component('SelectTask', SelectTask);
     Vue.component('SelectTeaching', SelectTeaching);
     Vue.component('SelectAgent', SelectAgent);

src/components/select-agent/index.vue

@@ -9,6 +9,7 @@
     v-bind="attrs"
     @change="onChange"
   >
+    <template #prefix>考点</template>
   </a-select>
 </template>
 

src/components/select-task/index.vue

@@ -9,6 +9,7 @@
     v-bind="attrs"
     @change="onChange"
   >
+    <template #prefix>任务</template>
   </a-select>
 </template>
 

src/components/select-teaching/index.vue

@@ -9,6 +9,7 @@
     v-bind="attrs"
     @change="onChange"
   >
+    <template #prefix>教学点</template>
   </a-select>
 </template>
 

src/components/svg-icon/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <component class="svg-icon" :is="iconComponent" :fill="fill"></component>
+</template>
+
+<script setup lang="ts">
+  import { snakeToHump } from '@/utils/utils';
+  import { computed } from 'vue';
+  import IconHome from '../../assets/svgs/icon-home.svg?component';
+  import IconLogout from '../../assets/svgs/icon-logout.svg?component';
+  import IconOrg from '../../assets/svgs/icon-org.svg?component';
+  import IconSystem from '../../assets/svgs/icon-system.svg?component';
+  import IconUser from '../../assets/svgs/icon-user.svg?component';
+  import IconImport from '../../assets/svgs/icon-import.svg?component';
+
+  defineOptions({
+    name: 'SvgIcon',
+  });
+
+  const props = withDefaults(
+    defineProps<{
+      name: string;
+      fill?: string;
+    }>(),
+    {
+      fill: 'currentColor',
+    }
+  );
+
+  const icons = {
+    IconHome,
+    IconLogout,
+    IconOrg,
+    IconSystem,
+    IconUser,
+    IconImport,
+  };
+
+  const iconComponent = computed(() => icons[snakeToHump(props.name)]);
+</script>

src/env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-svg-loader" />
 
 declare module '*.vue' {
   import { DefineComponent } from 'vue';

src/layout/default-layout.vue

@@ -1,27 +1,25 @@
 <template>
   <div class="home">
     <div class="home-header">
-      <div> </div>
-      <div class="head-user menu-list">
-        <ul>
-          <li class="menu-item menu-item-account" @click="toResetPwd">
-            <icon-user />
+      <div>
+        <h1 class="home-title">预约报名系统</h1>
+      </div>
+      <div class="head-action">
+        <a-tooltip content="修改密码" position="br">
+          <div class="home-action-item cursor" @click="toResetPwd">
+            <svg-icon name="icon-user" fill="#BFBFBF" />
             <span :title="userStore.name">{{ userStore.name }}</span>
-          </li>
-          <li class="menu-item" title="退出登录" @click="toLogout">
-            <icon-export />
-          </li>
-        </ul>
+          </div>
+        </a-tooltip>
+        <a-tooltip content="退出登录" position="br">
+          <div class="home-action-item cursor" @click="toLogout">
+            <svg-icon name="icon-logout" />
+          </div>
+        </a-tooltip>
       </div>
     </div>
 
     <div class="home-navs">
-      <div class="head-logo">
-        <div class="head-logo-content">
-          <h1>预约报名系统</h1>
-        </div>
-      </div>
-
       <a-menu
         v-if="appStore.appMenus && appStore.appMenus.length"
         class="arco-menu-home"
@@ -34,6 +32,9 @@
             v-if="submenu.children && submenu.children.length"
             :key="submenu.url"
           >
+            <template #icon>
+              <icon-bookmark />
+            </template>
             <template #title>
               <span>{{ submenu.name }}</span>
             </template>
@@ -53,7 +54,7 @@
       <div class="home-body-content">
         <div v-if="appStore.breadcrumbs.length" class="home-breadcrumb">
           <span class="breadcrumb-tips">
-            <icon-home />
+            <svg-icon name="icon-home" />
             <span>当前所在位置：</span>
           </span>
           <a-breadcrumb>

src/utils/utils.ts

@@ -415,3 +415,15 @@ export function dictToOption(
   });
   return options;
 }
+
+/**
+ * 蛇形转驼峰
+ * @param name 蛇形字符
+ * @returns 驼峰字符
+ */
+export function snakeToHump(name: string): string {
+  return name
+    .split('-')
+    .map((item) => item[0].toLocaleUpperCase() + item.substring(1))
+    .join('');
+}

src/views/login/home.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="login-home">
     <router-view></router-view>
-    <Footer class="login-footer" />
   </div>
 </template>
 
-<script setup lang="ts" name="LoginHome">
-  import Footer from '@/components/footer/index.vue';
-</script>
+<script setup lang="ts" name="LoginHome"></script>

src/views/login/login/index.vue

@@ -1,13 +1,31 @@
 <template>
   <div class="login login-box">
-    <div class="login-theme"><h2>预约报名系统</h2></div>
+    <div class="login-theme">
+      <h2>
+        欢迎登录 <br />
+        预约报名系统
+      </h2>
+
+      <p class="login-webinfo">
+        <a href="http://www.qmth.com.cn" target="_blank"
+          >Copyright © 2024 启明泰和</a
+        >
+        <!-- <br /> -->
+        <!-- <a href="https://beian.miit.gov.cn/" target="_blank">
+          启明泰和 鄂ICP备12000033号-9</a
+        > -->
+        <span v-if="appStore.version"> v{{ appStore.version }}</span>
+      </p>
+    </div>
     <div class="login-body" @keyup.enter="submit">
       <div class="login-title">
-        <h1> 登录 </h1>
+        <h1>输入信息</h1>
+        <p>请输入账号与密码</p>
       </div>
       <div class="login-form">
         <a-form
           ref="formRef"
+          size="large"
           :model="formData"
           :rules="rules"
           :label-col-props="{ span: 0, offset: 0 }"
@@ -19,9 +37,6 @@
               placeholder="请输入账号"
               allow-clear
             >
-              <template #prefix>
-                <icon-user />
-              </template>
             </a-input>
           </a-form-item>
           <a-form-item field="password">
@@ -30,9 +45,6 @@
               placeholder="请输入密码"
               allow-clear
             >
-              <template #prefix>
-                <icon-lock />
-              </template>
             </a-input-password>
           </a-form-item>
 

src/views/order/order-record-manage/index.vue

@@ -1,70 +1,67 @@
 <template>
   <div class="part-box is-filter">
-    <a-form
-      layout="inline"
-      :model="searchModel"
-      :label-col-props="{ span: 0, offset: 0 }"
-      :wrapper-col-props="{ span: 24, offset: 0 }"
-    >
-      <a-form-item label="教学点">
-        <SelectTask
-          v-model="searchModel.taskId"
-          placeholder="教学点"
-          allow-clear
-        />
-      </a-form-item>
-      <a-form-item label="教学点">
-        <SelectTeaching
-          v-model="searchModel.teachingId"
-          placeholder="教学点"
-          allow-clear
-        />
-      </a-form-item>
-      <a-form-item label="考点">
-        <SelectAgent
-          v-model="searchModel.agentId"
-          placeholder="考点"
-          allow-clear
-          :teaching-id="searchModel.teachingId"
-        />
-      </a-form-item>
-      <a-form-item label="姓名">
-        <a-input
-          v-model.trim="searchModel.name"
-          placeholder="姓名"
-          allow-clear
-        ></a-input>
-      </a-form-item>
-      <a-form-item label="证件号">
-        <a-input
-          v-model.trim="searchModel.identityNumber"
-          placeholder="证件号"
-          allow-clear
-        ></a-input>
-      </a-form-item>
-      <a-form-item label="学号">
-        <a-input
-          v-model.trim="searchModel.studentCode"
-          placeholder="学号"
-          allow-clear
-        ></a-input>
-      </a-form-item>
-      <a-form-item>
-        <a-button type="primary" @click="toPage(1)">查询</a-button>
-      </a-form-item>
-    </a-form>
-    <div>
-      <a-button type="primary" @click="toImport">导入预考</a-button>
-      <a-button type="primary" :loading="assginLoading" @click="toAssgin"
-        >一键自动分配</a-button
+    <a-space class="filter-line" :size="12" wrap>
+      <SelectTask
+        v-model="searchModel.taskId"
+        placeholder="请选择"
+        allow-clear
+      />
+      <SelectTeaching
+        v-model="searchModel.teachingId"
+        placeholder="请选择"
+        allow-clear
+      />
+      <SelectAgent
+        v-model="searchModel.agentId"
+        placeholder="请选择"
+        allow-clear
+        :teaching-id="searchModel.teachingId"
+      />
+      <a-input v-model.trim="searchModel.name" placeholder="请输入" allow-clear>
+        <template #prefix>姓名</template>
+      </a-input>
+      <a-input
+        v-model.trim="searchModel.identityNumber"
+        placeholder="请输入"
+        allow-clear
       >
-      <a-button type="primary" :loading="printLoading" @click="toPrint"
-        >打印签到表</a-button
+        <template #prefix>证件号</template>
+      </a-input>
+      <a-input
+        v-model.trim="searchModel.studentCode"
+        placeholder="请输入"
+        allow-clear
       >
-    </div>
+        <template #prefix>学号</template>
+      </a-input>
+
+      <a-button type="primary" @click="toPage(1)">查询</a-button>
+    </a-space>
   </div>
   <div class="part-box">
-    <a-table :columns="columns" :data="dataList" :pagination="pagination">
+    <a-space class="part-action" :size="6">
+      <a-button type="text" @click="toImport">
+        <template #icon>
+          <svg-icon name="icon-import" />
+        </template>
+        导入预考
+      </a-button>
+      <a-button type="text" :loading="assginLoading" @click="toAssgin">
+        <template #icon><icon-translate /></template>
+        一键自动分配
+      </a-button>
+      <a-button type="text" :loading="printLoading" @click="toPrint">
+        <template #icon><icon-file /></template>
+        打印签到表
+      </a-button>
+    </a-space>
+    <a-table
+      class="page-table"
+      :columns="columns"
+      :data="dataList"
+      :scroll="{ x: 1200 }"
+      :pagination="pagination"
+    >
       <template #status="{ record }">
         {{ record.cancel ? '已取消' : '正常' }}
       </template>
@@ -120,11 +117,15 @@
   import { parseTimeRangeDateAndTimeContent } from '@/utils/utils';
 
   import ImportDialog from '@/components/import-dialog/index.vue';
+  import { useAppStore } from '@/store';
 
   defineOptions({
     name: 'OrderRecordManage',
   });
 
+  const appStore = useAppStore();
+  appStore.setInfo({ breadcrumbs: ['考试预约管理', '预约明细'] });
+
   // const { getLabel: getAbleLabel } = useDictOption('ABLE_TYPE');
 
   const searchModel = reactive({