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,53 +237,52 @@ onMounted(() => {
         </p>
       </div>
     </div>
-
-    <!-- 使用说明 -->
-    <div class="usage-guide">
-      <el-divider />
-      <h3>使用说明</h3>
-      <div class="guide-content">
-        <p><strong>API地址：</strong>https://ai.ccnetcore.com</p>
-        <p><strong>密钥：</strong>上面申请的token</p>
-        <p><strong>模型：</strong>聊天界面显示的模型名称</p>
-      </div>
-
-      <div class="guide-images">
-        <el-image
-          style="max-width: 100%; margin: 10px 0;"
-          src="/images/api_usage_instructions.png"
-          fit="contain"
-        />
-      </div>
+  </div>
+  <!-- 使用说明 -->
+  <div class="usage-guide">
+    <el-divider />
+    <h3>使用说明</h3>
+    <div class="guide-content">
+      <p><strong>API地址：</strong>https://ai.ccnetcore.com</p>
+      <p><strong>密钥：</strong>上面申请的token</p>
+      <p><strong>模型：</strong>聊天界面显示的模型名称</p>
     </div>
 
-    <!-- 领取成功弹窗 -->
-    <el-dialog
-      v-model="showSuccessDialog"
-      title="领取成功"
-      width="400px"
-      :show-close="false"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-    >
-      <div class="success-dialog">
-        <el-icon color="#67C23A" :size="60">
-          <CircleCheck />
-        </el-icon>
-        <p class="success-message">
-          恭喜您成功领取API密钥！
-        </p>
-        <p class="success-tip">
-          请妥善保管您的密钥
-        </p>
-      </div>
-      <template #footer>
-        <el-button type="primary" @click="showSuccessDialog = false">
-          确定
-        </el-button>
-      </template>
-    </el-dialog>
+    <div class="guide-images">
+      <el-image
+        style="max-width: 100%; margin: 10px 0;"
+        src="/images/api_usage_instructions.png"
+        fit="contain"
+      />
+    </div>
   </div>
+
+  <!-- 领取成功弹窗 -->
+  <el-dialog
+    v-model="showSuccessDialog"
+    title="领取成功"
+    width="400px"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div class="success-dialog">
+      <el-icon color="#67C23A" :size="60">
+        <CircleCheck />
+      </el-icon>
+      <p class="success-message">
+        恭喜您成功领取API密钥！
+      </p>
+      <p class="success-tip">
+        请妥善保管您的密钥
+      </p>
+    </div>
+    <template #footer>
+      <el-button type="primary" @click="showSuccessDialog = false">
+        确定
+      </el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped>