perf: 证书上传按钮优化

portal-manager-ui/admin/src/components/licenseHint/LicenseHint.vue

@@ -21,17 +21,16 @@
       <p class="message">{{ licenseInfo.msg }}</p>
 
       <div class="actions">
-        <a-button class="read" :loading="loading" @click="handleUpload">
-          点击上传新证书
-        </a-button>
-
-        <a-button
-          class="mark-as-read"
-          :disabled="isDisabled"
-          @click="handleClose"
-        >
+        <div class="read" @click="handleUpload">
+          <div class="loading-btn" v-if="loading">
+            <span>上传中</span><Loading></Loading>
+          </div>
+          <span v-else>点击上传新证书</span>
+        </div>
+
+        <div class="mark-as-read" :disabled="isDisabled" @click="handleClose">
           关闭弹窗<span v-if="time">（{{ time }}）</span>
-        </a-button>
+        </div>
       </div>
     </div>
   </div>
@@ -40,11 +39,15 @@
 <script>
 import { uploadCipher, checkCipher } from "@/api/user";
 import { mapMutations, mapState } from "vuex";
+import Loading from "./Loading.vue";
 export default {
+  components: {
+    Loading,
+  },
   data() {
     return {
       accept: "application/x-zip-compressed",
-      loading: false,
+      loading: true,
       timer: null,
       isDisabled: true,
       time: 0,
@@ -71,10 +74,11 @@ export default {
       }, 1000);
     },
     handleClose() {
-      // if (this.isDisabled) return;
+      if (this.isDisabled) return;
       this.show = false;
     },
     async handleUpload() {
+      if (this.loading) return;
       let file = await this.getFile();
       if (!file) return;
       this.loading = true;
@@ -198,12 +202,13 @@ export default {
   .read {
     width: 100%;
     height: 44px;
-    // display: flex;
-    // align-items: center;
-    // justify-content: center;
-    // cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
     border: none;
     border-radius: 8px;
+    font-size: 14px;
     font-weight: 600;
   }
 
@@ -211,7 +216,11 @@ export default {
     background-color: #0857e8;
     color: rgba(255, 255, 255, 1);
   }
-
+  .loading-btn {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+  }
   .mark-as-read {
     margin-top: 8px;
     background-color: rgba(249, 250, 251, 1);
@@ -222,8 +231,8 @@ export default {
   .mark-as-read:hover {
     background-color: rgb(230, 231, 233);
   }
-  // .mark-as-read[disabled] {
-  //   cursor: not-allowed;
-  // }
+  .mark-as-read[disabled] {
+    cursor: not-allowed;
+  }
 }
 </style>

portal-manager-ui/admin/src/components/licenseHint/Loading.vue

+<template>
+  <div class="loader">
+    <div class="dot dot-1"></div>
+    <div class="dot dot-2"></div>
+    <div class="dot dot-3"></div>
+    <!-- <div class="dot dot-4"></div>
+    <div class="dot dot-5"></div> -->
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+}
+
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #fff;
+  -webkit-animation: dot-pulse2 1.5s ease-in-out infinite;
+  animation: dot-pulse2 1.5s ease-in-out infinite;
+}
+
+.dot-1 {
+  animation-delay: 0s;
+}
+
+.dot-2 {
+  animation-delay: 0.3s;
+}
+
+.dot-3 {
+  animation-delay: 0.6s;
+}
+
+// .dot-4 {
+//   animation-delay: 0.9s;
+// }
+
+// .dot-5 {
+//   animation-delay: 1.2s;
+// }
+
+@keyframes dot-pulse2 {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.5;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.5);
+    opacity: 0.5;
+  }
+}
+</style>