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

src/pages/Achievements.vue

@@ -22,10 +22,8 @@
       </v-btn>
     </template>
   </v-app-bar>
-  <div v-show="loading">
-    <TLoading :title="loadingTitle" />
-  </div>
-  <div v-show="!loading" class="wrap">
+  <TLoading v-model="loading" :title="loadingTitle" />
+  <div 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,94 +1,90 @@
 <template>
-  <div v-if="loading">
-    <TLoading :title="loadingTitle" />
-  </div>
-  <div v-else>
-    <v-tabs v-model="tab" align-tabs="start" class="anno-tab">
-      <v-tab value="activity">
-        活动公告
-      </v-tab>
-      <v-tab value="game">
-        游戏公告
-      </v-tab>
-      <v-spacer />
-      <v-btn class="switch-btn" @click="switchNews">
-        <template #prepend>
-          <v-icon>mdi-bullhorn</v-icon>
-        </template>
-        切换米游社咨讯
-      </v-btn>
-    </v-tabs>
-    <v-window v-model="tab">
-      <v-window-item value="activity">
-        <div class="anno-grid">
-          <v-card v-for="item in annoCards.activity" :key="item.id" class="anno-card" width="340">
-            <div class="anno-cover" @click="toPost(item)">
-              <img :src="item.banner" alt="cover">
-            </div>
-            <v-card-title>
-              {{ item.title }}
-            </v-card-title>
-            <v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
-            <v-card-actions>
-              <v-btn class="anno-btn" @click="toPost(item)">
-                <template #prepend>
-                  <img :src="item.tagIcon || '../assets/icons/arrow-right.svg'" alt="right">
-                </template>
-                查看
-              </v-btn>
-              <v-card-subtitle v-show="!appStore.devMode">
-                <v-icon>mdi-calendar</v-icon>
-                {{ item.startTime.split(" ")[0] }} -
-                {{ item.endTime.split(" ")[0] }}
-              </v-card-subtitle>
-              <v-card-subtitle v-show="appStore.devMode">
-                id: {{ item.id }}
-              </v-card-subtitle>
-              <v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
-                <template #prepend>
-                  <img src="../assets/icons/arrow-right.svg" alt="right">
-                </template>
-                查看数据
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </div>
-      </v-window-item>
-      <v-window-item value="game">
-        <div class="anno-grid">
-          <v-card v-for="item in annoCards.game" :key="item.id" class="anno-card" width="340">
-            <div class="anno-cover" @click="toPost(item)">
-              <img :src="item.banner" alt="cover">
-            </div>
-            <v-card-title>{{ item.title }}</v-card-title>
-            <v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
-            <v-card-actions>
-              <v-btn class="anno-btn" @click="toPost(item)">
-                <template #prepend>
-                  <img :src="item.tagIcon || '../assets/icons/arrow-right.svg'" alt="right">
-                </template>
-                查看
-              </v-btn>
-              <v-card-subtitle v-show="!appStore.devMode">
-                <v-icon>mdi-calendar</v-icon>
-                {{ item.startTime.split(" ")[0] }} -
-                {{ item.endTime.split(" ")[0] }}
-              </v-card-subtitle>
-              <v-card-subtitle v-show="appStore.devMode">
-                id: {{ item.id }}
-              </v-card-subtitle>
-              <v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
-                <template #prepend>
-                  <img src="../assets/icons/arrow-right.svg" alt="right">
-                </template>
-                查看数据
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </div>
-      </v-window-item>
-    </v-window>
-  </div>
+  <TLoading v-model="loading" :title="loadingTitle" />
+  <v-tabs v-model="tab" align-tabs="start" class="anno-tab">
+    <v-tab value="activity">
+      活动公告
+    </v-tab>
+    <v-tab value="game">
+      游戏公告
+    </v-tab>
+    <v-spacer />
+    <v-btn class="switch-btn" @click="switchNews">
+      <template #prepend>
+        <v-icon>mdi-bullhorn</v-icon>
+      </template>
+      切换米游社咨讯
+    </v-btn>
+  </v-tabs>
+  <v-window v-model="tab">
+    <v-window-item value="activity">
+      <div class="anno-grid">
+        <v-card v-for="item in annoCards.activity" :key="item.id" class="anno-card" width="340">
+          <div class="anno-cover" @click="toPost(item)">
+            <img :src="item.banner" alt="cover">
+          </div>
+          <v-card-title>
+            {{ item.title }}
+          </v-card-title>
+          <v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
+          <v-card-actions>
+            <v-btn class="anno-btn" @click="toPost(item)">
+              <template #prepend>
+                <img :src="item.tagIcon || '../assets/icons/arrow-right.svg'" alt="right">
+              </template>
+              查看
+            </v-btn>
+            <v-card-subtitle v-show="!appStore.devMode">
+              <v-icon>mdi-calendar</v-icon>
+              {{ item.startTime.split(" ")[0] }} -
+              {{ item.endTime.split(" ")[0] }}
+            </v-card-subtitle>
+            <v-card-subtitle v-show="appStore.devMode">
+              id: {{ item.id }}
+            </v-card-subtitle>
+            <v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
+              <template #prepend>
+                <img src="../assets/icons/arrow-right.svg" alt="right">
+              </template>
+              查看数据
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </div>
+    </v-window-item>
+    <v-window-item value="game">
+      <div class="anno-grid">
+        <v-card v-for="item in annoCards.game" :key="item.id" class="anno-card" width="340">
+          <div class="anno-cover" @click="toPost(item)">
+            <img :src="item.banner" alt="cover">
+          </div>
+          <v-card-title>{{ item.title }}</v-card-title>
+          <v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
+          <v-card-actions>
+            <v-btn class="anno-btn" @click="toPost(item)">
+              <template #prepend>
+                <img :src="item.tagIcon || '../assets/icons/arrow-right.svg'" alt="right">
+              </template>
+              查看
+            </v-btn>
+            <v-card-subtitle v-show="!appStore.devMode">
+              <v-icon>mdi-calendar</v-icon>
+              {{ item.startTime.split(" ")[0] }} -
+              {{ item.endTime.split(" ")[0] }}
+            </v-card-subtitle>
+            <v-card-subtitle v-show="appStore.devMode">
+              id: {{ item.id }}
+            </v-card-subtitle>
+            <v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
+              <template #prepend>
+                <img src="../assets/icons/arrow-right.svg" alt="right">
+              </template>
+              查看数据
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </div>
+    </v-window-item>
+  </v-window>
 </template>
 
 <script lang="ts" setup>

src/pages/Home.vue

@@ -1,11 +1,11 @@
 <template>
-  <TLoading v-if="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
-  <component :is="item" v-for="item in components" v-show="!loading" :key="item" :ref="setItemRef" />
+  <TLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
+  <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) {