feat(frontend): 优化充值金币功能

- 添加 loading 状态，提升用户体验
- 实现 iframe 加载完成后的回调处理
-增加窗口消息监听，处理充值后的关闭逻辑
- 优化对话框关闭逻辑，确保用户信息及时更新

frontend/src/views/Setting/components/otherConfig.vue

@@ -1,25 +1,68 @@
 <template>
   <div class="flex left fs-14 line-40 mar-top-10" style="margin-left: 100px">
     剩余金币：{{ useUserInfoStore.userInfo.coin_amount }}
-    <el-button class="mar-left-10" @click="showRechargeDialog = true">充值金币</el-button>
+    <el-button class="mar-left-10" @click="openDialog()">充值金币</el-button>
   </div>
 
   <!-- 新增：充值金币弹窗 -->
-  <el-dialog v-model="showRechargeDialog" title="充值金币" width="700px" :height="630 + 'px'" :destroy-on-close="true">
-    <iframe :src="rechargeUrl" width="660" height="610" frameborder="0"></iframe>
+  <el-dialog v-model="showRechargeDialog"
+             title="充值金币"
+             width="700px"
+             :height="630 + 'px'"
+             @close="onClose"
+             :destroy-on-close="true">
+    <!-- 显示 loading 提示 -->
+    <div v-if="loading" class="loading-text flex" style="width: 660px; height: 610px;" >加载中，请稍候...</div>
+    <iframe v-show="!loading" :src="rechargeUrl" width="660" height="610" frameborder="0" @load="onIframeLoad"></iframe>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
 import { configs } from '@/utils/appconfig';
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import useUserInfo from "@/stores/modules/user";
 const useUserInfoStore = useUserInfo();
-import  tokenInfo  from '@/stores/modules/token';
+import tokenInfo from '@/stores/modules/token';
 const tokenInfoStore = tokenInfo();
 
-
 // 数据定义
 const showRechargeDialog = ref(false);
-const rechargeUrl = ref(configs.tkkWebUrl + '/other/recharge_gold_coin?token='+tokenInfoStore.getToken);
+const rechargeUrl = ref(configs.tkkWebUrl + '/other/recharge_gold_coin?token=' + tokenInfoStore.getToken);
+const loading = ref(true); // 新增 loading 状态
+
+// iframe 加载完成回调
+const onIframeLoad = () => {
+  loading.value = false;
+};
+
+// 消息监听函数
+const handleWindowMessage = async (event) => {
+  // 可选：验证 event.origin 来确保消息来源可信
+  const message = event.data;
+
+  if (message.type === 'close') {
+    showRechargeDialog.value = false;
+    await useUserInfoStore.getInfo();
+    this.loading = false;
+  }
+};
+
+const onClose = async () => {
+  await useUserInfoStore.getInfo();
+  this.loading = false;
+};
+
+const openDialog = () => {
+  showRechargeDialog.value = true;
+  this.loading = false;
+};
+// 绑定监听
+onMounted(() => {
+  window.addEventListener('message', handleWindowMessage);
+});
+
+// 移除监听
+onUnmounted(() => {
+  window.removeEventListener('message', handleWindowMessage);
+});
 </script>