From 749f68f982366122c2aecc5ea8082efad817f46e Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 25 May 2023 22:06:40 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E5=85=88=E6=8A=8A=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E7=94=A8=E5=88=B0=20loading=20=E7=9A=84=E7=BB=99?=
 =?UTF-8?q?=E8=BD=AC=E4=BA=86=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/t-loading.vue |  10 +-
 src/pages/Achievements.vue        |   6 +-
 src/pages/Announcements.vue       | 176 +++++++++++++++---------------
 src/pages/Home.vue                |  21 ++--
 src/views/t-anno-json.vue         |   6 +-
 src/views/t-anno.vue              |   9 +-
 src/views/t-lottery.vue           |   4 +-
 src/views/t-news.vue              |   6 +-
 src/views/t-post-json.vue         |   6 +-
 src/views/t-post.vue              |   6 +-
 10 files changed, 117 insertions(+), 133 deletions(-)

diff --git a/src/components/main/t-loading.vue b/src/components/main/t-loading.vue
index 27ba2ae8..655727e5 100644
--- a/src/components/main/t-loading.vue
+++ b/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);
     }
   },
 );
diff --git a/src/pages/Achievements.vue b/src/pages/Achievements.vue
index 64ecd102..226f0589 100644
--- a/src/pages/Achievements.vue
+++ b/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)">
diff --git a/src/pages/Announcements.vue b/src/pages/Announcements.vue
index c4eb9f2a..6fc926fd 100644
--- a/src/pages/Announcements.vue
+++ b/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>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 958eea42..d97e1404 100644
--- a/src/pages/Home.vue
+++ b/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) {
diff --git a/src/views/t-anno-json.vue b/src/views/t-anno-json.vue
index 6a02835f..e5d1c9ed 100644
--- a/src/views/t-anno-json.vue
+++ b/src/views/t-anno-json.vue
@@ -1,9 +1,7 @@
 <template>
   <TSwitchTheme />
-  <div v-if="loading">
-    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
-  </div>
-  <div v-else class="anno-json">
+  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
+  <div class="anno-json">
     <div class="anno-title">
       活动列表 JSON
     </div>
diff --git a/src/views/t-anno.vue b/src/views/t-anno.vue
index a1e308fa..7e8a0175 100644
--- a/src/views/t-anno.vue
+++ b/src/views/t-anno.vue
@@ -1,10 +1,8 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <TSwitchTheme />
-  <div v-if="loading" class="loading">
-    <TLoading :title="loadingTitle" :empty="loadingEmpty" />
-  </div>
-  <div v-else class="anno-body">
+  <TLoading v-model="loading" :title="loadingTitle" :empty="loadingEmpty" />
+  <div 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 />
diff --git a/src/views/t-lottery.vue b/src/views/t-lottery.vue
index 8f532fbf..fab018e2 100644
--- a/src/views/t-lottery.vue
+++ b/src/views/t-lottery.vue
@@ -1,8 +1,6 @@
 <template>
   <TSwitchTheme />
-  <div v-if="loading">
-    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
-  </div>
+  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
   <div v-else>
     <div class="lottery-div">
       <div class="lottery-title">
diff --git a/src/views/t-news.vue b/src/views/t-news.vue
index fcaddb67..e9d3b97c 100644
--- a/src/views/t-news.vue
+++ b/src/views/t-news.vue
@@ -1,8 +1,6 @@
 <template>
-  <div v-show="loading">
-    <TLoading :title="loadingTitle" />
-  </div>
-  <div v-show="!loading">
+  <div>
+    <TLoading v-model="loading" :title="loadingTitle" />
     <v-tabs v-model="tab" align-tabs="start" class="news-tab">
       <v-tab value="notice">
         公告
diff --git a/src/views/t-post-json.vue b/src/views/t-post-json.vue
index 38bc89ed..34fb97a1 100644
--- a/src/views/t-post-json.vue
+++ b/src/views/t-post-json.vue
@@ -1,9 +1,7 @@
 <template>
   <TSwitchTheme />
-  <div v-if="loading">
-    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
-  </div>
-  <div v-else class="post-json">
+  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
+  <div class="post-json">
     <div class="post-title">
       帖子返回内容 JSON
     </div>
diff --git a/src/views/t-post.vue b/src/views/t-post.vue
index 3446deb8..3aa92310 100644
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -1,10 +1,8 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <TSwitchTheme />
-  <div v-if="loading">
-    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
-  </div>
-  <div v-else class="mys-post-body" v-html="postHtml" />
+  <TLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
+  <div class="mys-post-body" v-html="postHtml" />
 </template>
 <script lang="ts" setup>
 // vue