💄 先把所有用到 loading 的给转了一下

src/components/main/t-loading.vue

@@ -54,14 +54,14 @@ watch(
   (v) => {
     if (v) {
       showOut.value = true;
-      setTimeout(() => {
-        showIn.value = true;
-      }, 0);
-    } else {
       showIn.value = false;
+    } else {
+      setTimeout(() => {
+        showIn.value = false;
+      }, 100);
       setTimeout(() => {
         showOut.value = false;
-      }, 200);
+      }, 300);
     }
   },
 );

src/pages/Achievements.vue

@@ -22,10 +22,8 @@
       </v-btn>
     </template>
   </v-app-bar>
-  <div v-show="loading">
+  <TLoading v-model="loading" :title="loadingTitle" />
-    <TLoading :title="loadingTitle" />
+  <div class="wrap">
-  </div>
-  <div v-show="!loading" class="wrap">
     <!-- 左侧菜单 -->
     <div class="left-wrap">
       <v-list v-for="series in seriesList" :key="series.id" class="card-left" @click="selectSeries(series.id)">

src/pages/Announcements.vue

@@ -1,8 +1,5 @@
 <template>
-  <div v-if="loading">
+  <TLoading v-model="loading" :title="loadingTitle" />
-    <TLoading :title="loadingTitle" />
-  </div>
-  <div v-else>
   <v-tabs v-model="tab" align-tabs="start" class="anno-tab">
     <v-tab value="activity">
       活动公告
@@ -88,7 +85,6 @@
       </div>
     </v-window-item>
   </v-window>
-  </div>
 </template>
 
 <script lang="ts" setup>

src/pages/Home.vue

@@ -1,11 +1,11 @@
 <template>
-  <TLoading v-if="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
+  <TLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
-  <component :is="item" v-for="item in components" v-show="!loading" :key="item" :ref="setItemRef" />
+  <component :is="item" v-for="item in components" :key="item" :ref="setItemRef" />
 </template>
 
 <script lang="ts" setup>
 // vue
-import { ref, markRaw, onMounted, onUnmounted, onUpdated } from "vue";
+import { markRaw, onMounted, onUnmounted, onUpdated, ref } from "vue";
 import TLoading from "../components/main/t-loading.vue";
 import TPool from "../components/main/t-pool.vue";
 import TPosition from "../components/main/t-position.vue";
@@ -45,6 +45,14 @@ function readLoading (): void {
 
 onMounted(async () => {
   loadingTitle.value = "正在加载首页";
+  loading.value = true;
+  // 获取当前环境
+  const timeGet = getBuildTime();
+  appStore.devEnv = timeGet.startsWith("dev");
+  if (!appStore.devEnv && appStore.devMode) {
+    appStore.devMode = false;
+  }
+  appStore.buildTime = getBuildTime();
   const showItems = homeStore.getShowValue();
   await Promise.allSettled(
     showItems.map((item) => {
@@ -61,13 +69,6 @@ onMounted(async () => {
     }),
   );
   timer.value = setInterval(readLoading, 100);
-  // 获取当前环境
-  const timeGet = getBuildTime();
-  appStore.devEnv = timeGet.startsWith("dev");
-  if (!appStore.devEnv && appStore.devMode) {
-    appStore.devMode = false;
-  }
-  appStore.buildTime = getBuildTime();
 });
 
 function setItemRef (item: any) {

src/views/t-anno-json.vue

@@ -1,9 +1,7 @@
 <template>
   <TSwitchTheme />
-  <div v-if="loading">
+  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
-    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
+  <div class="anno-json">
-  </div>
-  <div v-else class="anno-json">
     <div class="anno-title">
       活动列表 JSON
     </div>

src/views/t-anno.vue

@@ -1,10 +1,8 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <TSwitchTheme />
-  <div v-if="loading" class="loading">
+  <TLoading v-model="loading" :title="loadingTitle" :empty="loadingEmpty" />
-    <TLoading :title="loadingTitle" :empty="loadingEmpty" />
+  <div class="anno-body">
-  </div>
-  <div v-else class="anno-body">
     <div class="anno-title">
       {{ annoData.title }}
     </div>
@@ -47,6 +45,7 @@ onMounted(async () => {
   }
   // 获取数据
   loadingTitle.value = "正在获取数据...";
+  loading.value = true;
   try {
     annoData.value = await TGRequest.Anno.getContent(annoId);
     loadingTitle.value = "正在渲染数据...";
@@ -58,7 +57,7 @@ onMounted(async () => {
   }
   setTimeout(() => {
     loading.value = false;
-  }, 200);
+  }, 1200);
 });
 </script>
 <style lang="css" src="../assets/css/anno-parser.css" scoped />

src/views/t-lottery.vue

@@ -1,8 +1,6 @@
 <template>
   <TSwitchTheme />
-  <div v-if="loading">
+  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
-    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
-  </div>
   <div v-else>
     <div class="lottery-div">
       <div class="lottery-title">

src/views/t-news.vue

@@ -1,8 +1,6 @@
 <template>
-  <div v-show="loading">
+  <div>
-    <TLoading :title="loadingTitle" />
+    <TLoading v-model="loading" :title="loadingTitle" />
-  </div>
-  <div v-show="!loading">
     <v-tabs v-model="tab" align-tabs="start" class="news-tab">
       <v-tab value="notice">
         公告

src/views/t-post-json.vue

@@ -1,9 +1,7 @@
 <template>
   <TSwitchTheme />
-  <div v-if="loading">
+  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
-    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
+  <div class="post-json">
-  </div>
-  <div v-else class="post-json">
     <div class="post-title">
       帖子返回内容 JSON
     </div>

src/views/t-post.vue

@@ -1,10 +1,8 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <TSwitchTheme />
-  <div v-if="loading">
+  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
-    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
+  <div class="mys-post-body" v-html="postHtml" />
-  </div>
-  <div v-else class="mys-post-body" v-html="postHtml" />
 </template>
 <script lang="ts" setup>
 // vue