فهرست منبع

feat(home): 增加健康检查状态管理及加载文案优化

- 新增 healthReady 状态用于跟踪程序自检完成情况
- 添加计算属性 loadingText 动态显示不同阶段加载文案
- 在健康检查成功或失败时更新 healthReady 状态
- 将 v-loading 指令绑定到 healthReady 和 syncCompleted 状态
- 引入 computed 方法支持响应式加载文本逻辑
panqiuyao 2 هفته پیش
والد
کامیت
0610b2fb2e
1فایلهای تغییر یافته به همراه18 افزوده شده و 2 حذف شده
  1. 18 2
      frontend/src/views/Home/index.vue

+ 18 - 2
frontend/src/views/Home/index.vue

@@ -3,7 +3,11 @@
 
     <template  #title><div @click="handleSettingClick" v-log="{ describe: { action: '点击首页标题' } }">首页</div></template>
   </headerBar>
-  <div class="home-container" v-loading="loading || !syncCompleted" :element-loading-text="!syncCompleted ? '正在同步配置...' : '正在加载...'">
+  <div
+    class="home-container"
+    v-loading="loading || !healthReady || !syncCompleted"
+    :element-loading-text="loadingText"
+  >
     <!-- 背景图片 -->
     <img src="@/assets/images/home/bg.png" alt="背景图片" class="background-image" />
 
@@ -25,7 +29,7 @@
 import headerBar from "@/components/header-bar/index.vue";
 import { useRouter } from "vue-router";
 import configInfo from '@/stores/modules/config';
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import axios from 'axios';
 import client from "@/stores/modules/client";
 import icpList from '@/utils/ipc';
@@ -36,8 +40,18 @@ import tokenInfo from "@/stores/modules/token";
 
 const router = useRouter();
 const loading = ref(true);
+const healthReady = ref(false); // 程序是否已完成自检
 const syncLoading = ref(false); // 同步配置的loading状态
 const syncCompleted = ref(false); // 同步是否完成
+const loadingText = computed(() => {
+  if (!healthReady.value) {
+    return '程序启动中...';
+  }
+  if (!syncCompleted.value) {
+    return '正在同步配置...';
+  }
+  return '正在加载...';
+});
 
 // 用户状态管理 - 在 onMounted 中初始化
 let configInfoStore: any;
@@ -118,6 +132,7 @@ const checkHealth = async () => {
     const response = await axios.get(healthUrl);
     if (response.status === 200) {
       loading.value = false; // 健康检查成功,关闭 loading
+      healthReady.value = true;
 
       // 健康检查成功后,如果用户已登录则执行数据同步
       if (tokenInfoStore && tokenInfoStore.getToken) {
@@ -151,6 +166,7 @@ const checkHealth = async () => {
     }
   } catch (error) {
     console.error('健康检查失败:', error);
+    healthReady.value = false;
     setTimeout(() => {
       checkHealth(); // 延迟检查
     }, 2000);