fix: apikey加载状态

Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue

@@ -8,10 +8,19 @@ import { isUserVip } from '@/utils/user';
 
 const apiKey = ref('');
 const showKey = ref(false);
-const loading = ref(false);
+const loading = ref(true);
 const displayedKey = ref('');
 const showSuccessDialog = ref(false);
-
+const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `;
 const isOpening = ref(false);
 const confettis = ref<any[]>([]);
 const router = useRouter();
@@ -147,13 +156,21 @@ function generateConfetti() {
   setTimeout(() => confettis.value = [], 2000);
 }
 
-onMounted(() => {
-  fetchApiKey();
+onMounted(async () => {
+  await fetchApiKey();
+  loading.value = false;
 });
 </script>
 
 <template>
-  <div class="api-key-management">
+  <div
+    v-loading="loading"
+    class="api-key-management"
+    element-loading-text="Loading..."
+    :element-loading-spinner="svg"
+    element-loading-svg-view-box="-10, -10, 50, 50"
+    element-loading-background="rgba(122, 122, 122, 0.8)"
+  >
     <!-- 未领取状态 -->
     <div v-if="!apiKey " class="unclaimed-state">
       <div class="gift-container" @click="handleClaim">
@@ -212,7 +229,7 @@ onMounted(() => {
       </div>
 
       <div class="key-actions">
-        <el-button type="warning" :loading="loading" @click="handleReset">
+        <el-button type="warning" @click="handleReset">
           重置密钥
         </el-button>
         <p class="key-hint">
@@ -220,7 +237,7 @@ onMounted(() => {
         </p>
       </div>
     </div>
-
+  </div>
   <!-- 使用说明 -->
   <div class="usage-guide">
     <el-divider />
@@ -266,7 +283,6 @@ onMounted(() => {
       </el-button>
     </template>
   </el-dialog>
-  </div>
 </template>
 
 <style scoped>