From 9aa7bdcc792ca4c65baa537fd254cca688d6d3f6 Mon Sep 17 00:00:00 2001
From: Tianyi Pu <912396513@qq.com>
Date: Mon, 15 Jul 2024 18:28:19 +0100
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E7=94=A8element=20plus=E6=8E=A8?=
 =?UTF-8?q?=E8=8D=90=E7=9A=84=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front_end/src/components/PlayerName.vue |  24 ++--
 front_end/src/components/Wait.vue       | 161 ------------------------
 2 files changed, 13 insertions(+), 172 deletions(-)
 delete mode 100644 front_end/src/components/Wait.vue

diff --git a/front_end/src/components/PlayerName.vue b/front_end/src/components/PlayerName.vue
index 6357baf..4cdbebc 100644
--- a/front_end/src/components/PlayerName.vue
+++ b/front_end/src/components/PlayerName.vue
@@ -1,16 +1,15 @@
 <template>
     <span @click.stop>
-        <el-popover v-if="render" v-model="visible" placement="bottom" width="298px" popper-class="max-h-300px overflow-auto" @show="pop_show"
-            @hide="pop_hide" popper-style="z-index:888;" 
+        <el-popover v-if="render" :visible="visible" placement="bottom" width="298px"
+            popper-class="max-h-300px overflow-auto" @show="pop_show" @hide="pop_hide" popper-style="z-index:888;"
             :show-after="0" :hide-after="0">
-            <Wait v-show="is_loading"></Wait>
             <div>
                 <div style="width: 80px;float: left;line-height: 200%;">
                     <el-image style="width: 72px; height: 72px;margin-top: 10px;border-radius: 8px;" :src="image_url"
                         :fit="'cover'" />
                     <el-button style="width: 72px;height: 24px;" @click="visit_me(+id);">我的空间</el-button>
                 </div>
-                <div style="width: 188px;float: right;text-align: center;line-height: 180%;">
+                <div style="width: 188px;float: right;text-align: center;line-height: 180%;" v-loading="is_loading">
                     <div><strong>{{ realname }}</strong> (id: {{ id }})</div>
                     <div>初级纪录：<PreviewNumber :id="+b_t_id" :text="to_fixed_n(b_t, 3)">
                         </PreviewNumber> | <PreviewNumber :id="+b_bvs_id" :text="to_fixed_n(b_bvs, 3)">
@@ -37,8 +36,9 @@
                 <span href="" target="_blank" class="clickable" @click="visible = !visible">{{ data.user_name }}
                 </span>
             </template>
-        </el-popover> 
-        <span v-else href="" target="_blank" class="clickable" @click="render = true; visible = true">{{ data.user_name }}
+        </el-popover>
+        <span v-else href="" target="_blank" class="clickable" @click="render = true; visible = true">{{ data.user_name
+            }}
         </span>
     </span>
 </template>
@@ -54,7 +54,6 @@ import image_url_default from '@/assets/person.png';
 const image_url = ref(image_url_default);
 // import PreviewDownload from '@/components/PreviewDownload.vue';
 import PreviewNumber from '@/components/PreviewNumber.vue';
-import Wait from '@/components/Wait.vue';
 import { useRouter } from 'vue-router'
 import { ms_to_s } from "@/utils"
 const router = useRouter()
@@ -93,12 +92,14 @@ const e_bvs_id = ref("");
 const is_loading = ref(true);
 
 
-const pop_show = () => {
+const pop_show = async () => {
+    is_loading.value = true;
+
     image_url.value = image_url_default;
     realname.value = "";
     id.value = "";
 
-    proxy.$axios.get('/msuser/info_abstract/',
+    await proxy.$axios.get('/msuser/info_abstract/',
         {
             params: {
                 id: data.user_id,
@@ -112,13 +113,13 @@ const pop_show = () => {
         if (response_data.avatar) {
             image_url.value = "data:image/;base64," + response_data.avatar;
         }
-        
+
         const records = JSON.parse(response_data.record_abstract)
 
         b_t.value = ms_to_s(records.timems[0])
         i_t.value = ms_to_s(records.timems[1])
         e_t.value = ms_to_s(records.timems[2])
-        
+
         b_t_id.value = records.timems_id[0]
         i_t_id.value = records.timems_id[1]
         e_t_id.value = records.timems_id[2]
@@ -155,6 +156,7 @@ const pop_hide = () => {
     b_bvs_id.value = "";
     i_bvs_id.value = "";
     e_bvs_id.value = "";
+    is_loading.value = true;
 }
 
 function to_fixed_n(input: string | number | undefined, to_fixed: number): string | number | undefined {
diff --git a/front_end/src/components/Wait.vue b/front_end/src/components/Wait.vue
deleted file mode 100644
index 9b736de..0000000
--- a/front_end/src/components/Wait.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-    <div class="spinner center">
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-        <div class="spinner-blade"></div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-// 加载时旋转的圈
-import { ref, reactive } from 'vue'
-
-</script>
-
-<style scope lang='less'>
-.spinner {
-    font-size: 28px;
-    position: relative;
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-}
-
-.spinner.center {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-}
-
-.spinner .spinner-blade {
-    position: absolute;
-    left: 0.4629em;
-    bottom: 0;
-    width: 0.074em;
-    height: 0.2777em;
-    border-radius: 0.0555em;
-    background-color: transparent;
-    -webkit-transform-origin: center -0.2222em;
-    -ms-transform-origin: center -0.2222em;
-    transform-origin: center -0.2222em;
-    animation: spinner-fade9234 1s infinite linear;
-}
-
-.spinner .spinner-blade:nth-child(1) {
-    -webkit-animation-delay: 0s;
-    animation-delay: 0s;
-    -webkit-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    transform: rotate(0deg);
-}
-
-.spinner .spinner-blade:nth-child(2) {
-    -webkit-animation-delay: 0.083s;
-    animation-delay: 0.083s;
-    -webkit-transform: rotate(30deg);
-    -ms-transform: rotate(30deg);
-    transform: rotate(30deg);
-}
-
-.spinner .spinner-blade:nth-child(3) {
-    -webkit-animation-delay: 0.166s;
-    animation-delay: 0.166s;
-    -webkit-transform: rotate(60deg);
-    -ms-transform: rotate(60deg);
-    transform: rotate(60deg);
-}
-
-.spinner .spinner-blade:nth-child(4) {
-    -webkit-animation-delay: 0.249s;
-    animation-delay: 0.249s;
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-
-.spinner .spinner-blade:nth-child(5) {
-    -webkit-animation-delay: 0.332s;
-    animation-delay: 0.332s;
-    -webkit-transform: rotate(120deg);
-    -ms-transform: rotate(120deg);
-    transform: rotate(120deg);
-}
-
-.spinner .spinner-blade:nth-child(6) {
-    -webkit-animation-delay: 0.415s;
-    animation-delay: 0.415s;
-    -webkit-transform: rotate(150deg);
-    -ms-transform: rotate(150deg);
-    transform: rotate(150deg);
-}
-
-.spinner .spinner-blade:nth-child(7) {
-    -webkit-animation-delay: 0.498s;
-    animation-delay: 0.498s;
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-.spinner .spinner-blade:nth-child(8) {
-    -webkit-animation-delay: 0.581s;
-    animation-delay: 0.581s;
-    -webkit-transform: rotate(210deg);
-    -ms-transform: rotate(210deg);
-    transform: rotate(210deg);
-}
-
-.spinner .spinner-blade:nth-child(9) {
-    -webkit-animation-delay: 0.664s;
-    animation-delay: 0.664s;
-    -webkit-transform: rotate(240deg);
-    -ms-transform: rotate(240deg);
-    transform: rotate(240deg);
-}
-
-.spinner .spinner-blade:nth-child(10) {
-    -webkit-animation-delay: 0.747s;
-    animation-delay: 0.747s;
-    -webkit-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    transform: rotate(270deg);
-}
-
-.spinner .spinner-blade:nth-child(11) {
-    -webkit-animation-delay: 0.83s;
-    animation-delay: 0.83s;
-    -webkit-transform: rotate(300deg);
-    -ms-transform: rotate(300deg);
-    transform: rotate(300deg);
-}
-
-.spinner .spinner-blade:nth-child(12) {
-    -webkit-animation-delay: 0.913s;
-    animation-delay: 0.913s;
-    -webkit-transform: rotate(330deg);
-    -ms-transform: rotate(330deg);
-    transform: rotate(330deg);
-}
-
-@keyframes spinner-fade9234 {
-    0% {
-        background-color: #69717d;
-    }
-
-    100% {
-        background-color: transparent;
-    }
-}
-</style>
\ No newline at end of file