♻️ 函数式调用替代to-loading

2025-12-18 10:18:14 +08:00 · 2024-11-15 17:52:06 +08:00
parent c87ec77543
commit 0c24b95fff
24 changed files with 297 additions and 701 deletions
--- a/src/pages/common/Achievements.vue
+++ b/src/pages/common/Achievements.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" />
  <v-app-bar>
    <div class="top-title" @click="switchHideFin">{{ title }}</div>
    <template #append>
@@ -60,8 +59,8 @@ import { onMounted, ref, watch, computed, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";

 import showDialog from "../../components/func/dialog.js";
+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import TuaAchiList from "../../components/userAchi/tua-achi-list.vue";
 import TuaSeries from "../../components/userAchi/tua-series.vue";
 import { AppAchievementSeriesData } from "../../data/index.js";
@@ -74,8 +73,6 @@ import {
  verifyUiafDataClipboard,
 } from "../../utils/UIAF.js";

-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载数据");
 const search = ref<string>("");
 const hideFin = ref<boolean>(false);

@@ -102,13 +99,13 @@ async function switchHideFin() {
 }

 onMounted(async () => {
+  showLoading.start("正在加载成就数据...");
  await TGLogger.Info("[Achievements][onMounted] 打开成就页面");
-  loading.value = true;
  uidList.value = await TSUserAchi.getAllUid();
  if (uidList.value.length === 0) uidList.value = [0];
  uidCur.value = uidList.value[0];
  await refreshOverview();
-  loading.value = false;
+  showLoading.end();
  if (route.query.app && typeof route.query.app === "string") {
    await handleImportOuter(route.query.app);
  }
@@ -161,6 +158,7 @@ async function importJson(): Promise<void> {
    showSnackbar.warn("请输入合法数字");
    return;
  }
+  showLoading.start("正在导入数据", "正在解析数据");
  const remoteRaw = await readUiafData(selectedFile);
  await TGLogger.Info("[Achievements][importJson] 读取 UIAF 数据成功");
  await TGLogger.Info(`[Achievements][importJson] 导入来源：${remoteRaw.info.export_app}`);
@@ -168,11 +166,9 @@ async function importJson(): Promise<void> {
  await TGLogger.Info(`[Achievements][importJson] 导入时间：${remoteRaw.info.export_timestamp}`);
  await TGLogger.Info(`[Achievements][importJson] 导入数据：${remoteRaw.list.length} 条`);
  await TGLogger.Info(`[Achievements][importJson] 导入存档：${uidInput}`);
-  loadingTitle.value = "正在解析数据";
-  loading.value = true;
-  loadingTitle.value = "正在合并成就数据";
+  showLoading.update("正在导入数据", "正在合并数据");
  await TSUserAchi.mergeUiaf(remoteRaw.list, Number(uidInput));
-  loadingTitle.value = "即将刷新页面";
+  showLoading.end();
  setTimeout(() => window.location.reload(), 1000);
 }

@@ -226,10 +222,9 @@ async function handleImportOuter(app: string): Promise<void> {
    return;
  }
  const data: TGApp.Plugins.UIAF.Data = JSON.parse(clipboard);
-  loadingTitle.value = "正在导入数据";
-  loading.value = true;
+  showLoading.start("正在导入数据", "正在解析数据");
  await TSUserAchi.mergeUiaf(data.list, Number(uidInput));
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success("导入成功，即将刷新页面");
  await TGLogger.Info("[Achievements][handleImportOuter] 导入成功");
  setTimeout(async () => await router.push("/achievements"), 1500);
--- a/src/pages/common/Announcements.vue
+++ b/src/pages/common/Announcements.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
  <v-app-bar>
    <template #prepend>
      <v-tabs v-model="tab" align-tabs="start" class="anno-tab">
@@ -58,9 +57,9 @@
 import { nextTick, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";

+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import TAnnocard from "../../components/main/t-annocard.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import { useAppStore } from "../../store/modules/app.js";
 import TGLogger from "../../utils/TGLogger.js";
 import { AnnoLang, AnnoServer } from "../../web/request/getAnno.js";
@@ -96,11 +95,6 @@ type AnnoCard = {
  [key in AnnoKey]: TGApp.App.Announcement.ListCard[];
 };

-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载");
-const loadingSub = ref<string>("请稍后");
-
 const appStore = useAppStore();

 // 路由
@@ -146,9 +140,10 @@ onMounted(async () => {
 });

 async function loadData(): Promise<void> {
-  loadingTitle.value = "正在获取公告数据";
-  loadingSub.value = `服务器：${getRegionName(curRegion.value)}，语言：${getLangName(curLang.value)}`;
-  loading.value = true;
+  showLoading.start(
+    "正在获取公告数据",
+    `服务器：${getRegionName(curRegion.value)}，语言：${getLangName(curLang.value)}`,
+  );
  const annoData = await TGRequest.Anno.getList(curRegion.value, curLang.value);
  const listCards = TGUtils.Anno.getCard(annoData);
  await Promise.all(
@@ -163,8 +158,8 @@ async function loadData(): Promise<void> {
    activity: listCards.filter((item) => item.typeLabel === AnnoType.activity),
    game: listCards.filter((item) => item.typeLabel === AnnoType.game),
  };
-  loadingTitle.value = "正在渲染公告数据";
-  await nextTick(() => (loading.value = false));
+  showLoading.update("正在渲染公告数据");
+  await nextTick(() => showLoading.end());
 }

 function getRegionName(value: AnnoServer): string {
--- a/src/pages/common/Config.vue
+++ b/src/pages/common/Config.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
  <div class="config-box">
    <TcInfo />
    <v-list class="config-list">
@@ -102,7 +101,7 @@
  </div>
  <div class="config-right">
    <TcAppBadge />
-    <TcUserBadge @loadOuter="loadHandle" />
+    <TcUserBadge />
    <TcGameBadge v-if="platform() === 'windows'" />
  </div>
 </template>
@@ -121,8 +120,8 @@ import TcGameBadge from "../../components/config/tc-gameBadge.vue";
 import TcInfo from "../../components/config/tc-info.vue";
 import TcUserBadge from "../../components/config/tc-userBadge.vue";
 import showDialog from "../../components/func/dialog.js";
+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import TGSqlite from "../../plugins/Sqlite/index.js";
 import { useAppStore } from "../../store/modules/app.js";
 import { useHomeStore } from "../../store/modules/home.js";
@@ -137,19 +136,14 @@ const appStore = useAppStore();
 const homeStore = useHomeStore();
 // @ts-expect-error-next-line
 const isDevEnv = ref<boolean>(import.meta.env.MODE === "development");
-
-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载...");
-const loadingSub = ref<string>("");
 const showReset = ref<boolean>(false);
 const needResize = ref<boolean>(appStore.needResize !== "false");

 const cacheSize = ref<number>(0);

 onMounted(async () => {
+  showLoading.start("正在获取应用信息...");
  await TGLogger.Info("[Config] 打开设置页面");
-  loading.value = false;
  const cacheDir = await getCacheDir();
  if (cacheDir === false) return;
  let cacheBSize: number = 0;
@@ -158,6 +152,7 @@ onMounted(async () => {
    cacheBSize += size;
  }
  cacheSize.value = cacheBSize;
+  showLoading.end();
 });

 // 备份数据
@@ -183,10 +178,9 @@ async function confirmBackup(): Promise<void> {
  } else {
    await TGLogger.Info(`[Config][confirmBackup] 备份到默认路径 ${saveDir}`);
  }
-  loadingTitle.value = "正在备份数据...";
-  loading.value = true;
+  showLoading.start("正在备份数据...");
  await backUpUserData(saveDir);
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success("数据已备份!");
  await TGLogger.Info("[Config][confirmBackup] 备份完成");
 }
@@ -214,11 +208,9 @@ async function confirmRestore(): Promise<void> {
  } else {
    await TGLogger.Info(`[Config][confirmRestore] 恢复到默认路径 ${saveDir}`);
  }
-  loadingTitle.value = "正在恢复数据...";
-  loadingSub.value = "请稍后...";
-  loading.value = true;
+  showLoading.start("正在恢复数据...");
  await restoreUserData(saveDir);
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success("数据已恢复!");
  await TGLogger.Info("[Config][confirmRestore] 恢复完成");
 }
@@ -230,11 +222,10 @@ async function confirmUpdate(title?: string): Promise<void> {
    showSnackbar.cancel("已取消更新数据库");
    return;
  }
-  loadingTitle.value = "正在更新数据库...";
-  loading.value = true;
+  showLoading.start("正在更新数据库...");
  await TGSqlite.update();
  appStore.buildTime = getBuildTime();
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success("数据库已更新!");
  await TGLogger.Info("[Config][confirmUpdate] 数据库更新完成");
  window.location.reload();
@@ -298,14 +289,13 @@ async function confirmDelCache(): Promise<void> {
    return;
  }
  let cacheBSize: number = 0;
-  loadingTitle.value = "正在检测缓存...";
-  loading.value = true;
+  showLoading.start("正在检测缓存...");
  for (const dir of CacheDir) {
    const size: number = await core.invoke("get_dir_size", { path: dir });
    cacheBSize += size;
  }
  cacheSize.value = cacheBSize;
-  loading.value = false;
+  showLoading.end();
  const delCheck = await showDialog.check(
    "确认清除缓存吗？",
    `当前缓存大小为 ${bytesToSize(cacheBSize)}`,
@@ -315,13 +305,13 @@ async function confirmDelCache(): Promise<void> {
    await TGLogger.Info("[Config][confirmDelCache] 取消清除缓存");
    return;
  }
-  loadingTitle.value = "正在清除缓存...";
-  loading.value = true;
+  showLoading.start("正在清除缓存...");
  for (const dir of CacheDir) {
+    showLoading.update("正在清除缓存...", dir);
    await remove(dir, { recursive: true });
  }
+  showLoading.end();
  await TGLogger.Info("[Config][confirmDelCache] 缓存清除完成");
-  loading.value = false;
  showSnackbar.success("缓存已清除!即将退出应用！");
  setTimeout(async () => await exit(), 1000);
 }
@@ -371,11 +361,10 @@ async function confirmResetDB(title?: string): Promise<void> {
    await TGLogger.Info("[Config][confirmResetDB] 取消重置数据库");
    return;
  }
-  loadingTitle.value = "正在重置数据库...";
-  loading.value = true;
+  showLoading.start("正在重置数据库...");
  await TGSqlite.reset();
+  showLoading.end();
  await TGLogger.Info("[Config][confirmResetDB] 数据库重置完成");
-  loading.value = false;
  showSnackbar.success("数据库已重置!请进行再次检查。");
  setTimeout(() => window.location.reload(), 1500);
 }
@@ -398,13 +387,6 @@ function submitResize(): void {
  }
  showSnackbar.success("已开启窗口回正!");
 }
-
-// 通过子组件的事件来控制 loading
-function loadHandle(params: TGApp.Component.Loading.EmitParams): void {
-  loading.value = params.show;
-  if (params.title) loadingTitle.value = params.title;
-  if (params.text) loadingSub.value = params.text;
-}
 </script>
 <style lang="css" scoped>
 .config-box {
--- a/src/pages/common/Home.vue
+++ b/src/pages/common/Home.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
  <div class="home-container">
    <div class="home-top">
      <div class="home-tools" v-if="appStore.isLogin">
@@ -28,25 +27,19 @@
        <v-btn class="select-btn" @click="submitHome" :rounded="true">确定</v-btn>
      </div>
    </div>
-    <component
-      :is="item"
-      v-for="item in components"
-      :key="item"
-      @success="loadEnd(item)"
-      @loadOuter="handleLoad"
-    />
+    <component :is="item" v-for="item in components" :key="item" @success="loadEnd(item)" />
  </div>
 </template>

 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, shallowRef } from "vue";

+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import TCalendar from "../../components/home/t-calendar.vue";
 import TPool from "../../components/home/t-pool.vue";
 import TPosition from "../../components/home/t-position.vue";
 import TGameNav from "../../components/main/t-gamenav.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import { useAppStore } from "../../store/modules/app.js";
 import { useHomeStore } from "../../store/modules/home.js";
 import TGLogger from "../../utils/TGLogger.js";
@@ -56,11 +49,6 @@ import TGConstant from "../../web/constant/TGConstant.js";
 const appStore = useAppStore();
 const homeStore = useHomeStore();

-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载首页");
-const loadingSubtitle = ref<string>("");
-
 // data
 const endNum = ref<number>(0);
 const components = shallowRef<any[]>([]);
@@ -70,7 +58,7 @@ const gameSelectList = TGConstant.BBS.CHANNELS;
 const curGid = ref<string>(gameSelectList[0].gid);

 onMounted(async () => {
-  loadingTitle.value = "正在加载首页";
+  showLoading.start("正在加载首页...");
  // @ts-expect-error-next-line
  const isProdEnv = import.meta.env.MODE === "production";
  // 获取当前环境
@@ -94,7 +82,7 @@ onMounted(async () => {
    }
  }
  const items = showHome.value.join("、");
-  loadingSubtitle.value = `正在加载：${items}`;
+  showLoading.update("正在加载首页...", `正在加载：${items}`);
  components.value = temp;
  await TGLogger.Info(`[Home][onMounted] 打开首页，当前显示：${items}`);
 });
@@ -116,25 +104,11 @@ async function loadEnd(item: any): Promise<void> {
  await TGLogger.Info(`[Home][loadEnd] ${item.__name} 加载完成`);
  endNum.value++;
  if (endNum.value === components.value.length) {
-    loading.value = false;
+    showLoading.end();
  }
 }

-function handleLoad(params: TGApp.Component.Loading.EmitParams): void {
-  loading.value = params.show;
-  if (params.title) {
-    loadingTitle.value = params.title;
-  }
-  if (params.text) {
-    loadingSubtitle.value = params.text;
-  } else {
-    loadingSubtitle.value = "";
-  }
-}
-
-onUnmounted(() => {
-  components.value = [];
-});
+onUnmounted(() => (components.value = []));
 </script>
 <style lang="css" scoped>
 .home-container {
--- a/src/pages/common/News.vue
+++ b/src/pages/common/News.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" />
  <v-app-bar density="compact">
    <template #prepend>
      <v-tabs v-model="tab" align-tabs="start" class="news-tab">
@@ -47,7 +46,7 @@
        </div>
      </div>
      <div class="load-news">
-        <v-btn class="news-top-btn" :rounded="true" :loading="loadingSub" @click="loadMore(value)">
+        <v-btn class="news-top-btn" :rounded="true" :loading="loading" @click="loadMore(value)">
          已加载：{{ rawData[value].lastId }}，加载更多
        </v-btn>
      </div>
@@ -61,10 +60,10 @@
 import { computed, nextTick, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";

+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import TPostCard from "../../components/main/t-postcard.vue";
 import ToChannel from "../../components/overlay/to-channel.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import ToPostSearch from "../../components/post/to-postSearch.vue";
 import Mys from "../../plugins/Mys/index.js";
 import { useAppStore } from "../../store/modules/app.js";
@@ -94,9 +93,7 @@ type RawData = {
 const router = useRouter();
 const gid = <string>useRoute().params.gid;
 // loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载");
-const loadingSub = ref<boolean>(false);
+const loading = ref<boolean>(false);

 // UI 数据
 const appStore = useAppStore();
@@ -149,16 +146,13 @@ async function firstLoad(key: NewsKey, refresh: boolean = false): Promise<void>
    postData.value[key] = [];
    rawData.value[key].lastId = 0;
  }
-  loadingTitle.value = `正在获取${rawData.value[key].name}数据...`;
-  loading.value = true;
+  showLoading.start(`正在获取${rawData.value[key].name}数据...`);
  const getData = await Mys.Painter.getNewsList(gid, NewsType[key]);
  rawData.value[key].isLast = getData.is_last;
  rawData.value[key].lastId = getData.list.length;
  postData.value[key] = getData.list;
-  loadingTitle.value = `正在渲染${rawData.value[key].name}数据...`;
-  await nextTick(() => {
-    loading.value = false;
-  });
+  showLoading.update(`正在渲染${rawData.value[key].name}数据...`);
+  await nextTick(() => showLoading.end());
  await TGLogger.Info(`[News][${gid}][firstLoad] 获取${rawData.value[key].name}数据成功`);
 }

@@ -169,28 +163,25 @@ async function switchAnno(): Promise<void> {

 // 加载更多
 async function loadMore(key: NewsKey): Promise<void> {
-  loadingSub.value = true;
+  loading.value = true;
  if (rawData.value[key].isLast) {
    showSnackbar.warn("已经是最后一页了");
-    loadingSub.value = false;
+    loading.value = false;
    return;
  }
-  loadingTitle.value = `正在获取${rawData.value[key].name}数据...`;
-  loading.value = true;
+  showLoading.start(`正在获取${rawData.value[key].name}数据...`);
  const getData = await Mys.Painter.getNewsList(gid, NewsType[key], 20, rawData.value[key].lastId);
  rawData.value[key].lastId = rawData.value[key].lastId + getData.list.length;
  rawData.value[key].isLast = getData.is_last;
  postData.value[key] = postData.value[key].concat(getData.list);
  if (rawData.value[key].isLast) {
+    showLoading.end();
    showSnackbar.warn("已经是最后一页了");
-    loadingSub.value = false;
    loading.value = false;
    return;
  }
-  await nextTick(() => {
-    loadingSub.value = false;
-    loading.value = false;
-  });
+  await nextTick(() => showLoading.end());
+  loading.value = false;
 }

 async function searchPost(): Promise<void> {
--- a/src/pages/common/PostCollect.vue
+++ b/src/pages/common/PostCollect.vue
@@ -1,6 +1,5 @@
 <template>
  <div class="pc-container">
-    <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
    <div class="pc-top">
      <v-select
        v-model="curSelect"
@@ -79,7 +78,7 @@
    <div class="pc-posts">
      <div v-for="item in getPageItems()" :key="item.post.post_id">
        <TPostCard
-          @update:selected="selectedPost = $event"
+          @update:selected="(v) => (selectedPost = v)"
          :model-value="item"
          :selected="selectedPost"
          :select-mode="selectedMode"
@@ -96,18 +95,15 @@ import { storeToRefs } from "pinia";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";

 import showDialog from "../../components/func/dialog.js";
+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import TPostCard from "../../components/main/t-postcard.vue";
 import ToCollectPost from "../../components/overlay/to-collectPost.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import TSUserCollection from "../../plugins/Sqlite/modules/userCollect.js";
 import { useUserStore } from "../../store/modules/user.js";
 import TGLogger from "../../utils/TGLogger.js";
 import TGRequest from "../../web/request/TGRequest.js";

-const loading = ref(false);
-const loadingTitle = ref("加载中...");
-const loadingSub = ref("");
 const userStore = storeToRefs(useUserStore());

 const collections = ref<TGApp.Sqlite.UserCollection.UFCollection[]>([]);
@@ -154,11 +150,9 @@ function sortPost(value: boolean) {
 }

 async function load(): Promise<void> {
-  loadingTitle.value = "获取收藏帖子...";
-  loading.value = true;
-  loadingTitle.value = "获取收藏合集...";
+  showLoading.start("正在加载收藏帖子...", "获取收藏合集");
  collections.value = await TSUserCollection.getCollectList();
-  loadingTitle.value = "获取未分类帖子...";
+  showLoading.update("正在加载收藏帖子...", "获取未分类帖子");
  const postUnCollect = await TSUserCollection.getUnCollectPostList();
  if (curSelect.value === "未分类" || collections.value.length === 0) {
    selected.value = postUnCollect;
@@ -172,7 +166,7 @@ async function load(): Promise<void> {
  selectedMode.value = false;
  selectedPost.value = [];
  if (page.value > length.value) page.value = 1;
-  loading.value = false;
+  showLoading.end();
 }

 function toSelect() {
@@ -239,10 +233,9 @@ async function toEdit(): Promise<void> {
    showSnackbar.cancel("取消修改分类信息");
    return;
  }
-  loadingTitle.value = "正在修改分类信息...";
-  loading.value = true;
+  showLoading.start("正在修改分类信息...");
  const check = await TSUserCollection.updateCollect(collect.title, cTc, cTd);
-  loading.value = false;
+  showLoading.end();
  if (!check) {
    showSnackbar.warn("修改分类信息失败");
    return;
@@ -267,8 +260,7 @@ async function deletePost(force: boolean = false): Promise<void> {
    showSnackbar.cancel("取消操作");
    return;
  }
-  loadingTitle.value = `正在${title}...`;
-  loading.value = true;
+  showLoading.start(`正在${title}...`);
  let success = 0;
  for (const post of selectedPost.value) {
    const check = await TSUserCollection.deletePostCollect(post, force);
@@ -279,7 +271,7 @@ async function deletePost(force: boolean = false): Promise<void> {
    showSnackbar.warn(`帖子 ${post} 操作失败`);
    await new Promise((resolve) => setTimeout(resolve, 1500));
  }
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`成功${title} ${success} 条`);
  await load();
 }
@@ -318,8 +310,7 @@ async function freshPost(select: string | null): Promise<void> {
    curSelect.value = "未分类";
    return;
  }
-  loadingTitle.value = `获取合集 ${select}...`;
-  loading.value = true;
+  showLoading.start("正在获取合集帖子...", `获取合集 ${select}`);
  if (select === "未分类") {
    curSelect.value = "未分类";
    selected.value = await TSUserCollection.getUnCollectPostList();
@@ -327,7 +318,7 @@ async function freshPost(select: string | null): Promise<void> {
    selected.value = await TSUserCollection.getCollectPostList(select);
  }
  page.value = 1;
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`切换合集 ${select}，共 ${selected.value.length} 条帖子`);
 }

@@ -377,32 +368,30 @@ async function freshUser(uid?: string): Promise<void> {
    cookie_token: userStore.cookie.value.cookie_token,
    account_id: userStore.cookie.value.account_id,
  };
-  loadingTitle.value = "获取用户收藏...";
-  loading.value = true;
+  showLoading.start("获取用户收藏...", `UID: ${uid || userStore.briefInfo.value.uid}`);
  let res = await TGRequest.User.getCollect(cookie, uid || userStore.briefInfo.value.uid);
  while (true) {
    if ("retcode" in res) {
+      showLoading.end();
      if (res.retcode === 1001) {
        showSnackbar.warn("用户收藏已设为私密，无法获取");
      } else {
        showSnackbar.error(`[${res.retcode}] ${res.message}`);
      }
-      loading.value = false;
      break;
    }
    let posts = res.list;
-    loadingTitle.value = `合并收藏帖子 [offset]${res.next_offset}...`;
+    showLoading.update("获取用户收藏...", `合并收藏帖子 [offset]${res.next_offset}...`);
    await mergePosts(posts, uid || userStore.briefInfo.value.uid);
    if (res.is_last) break;
-    loadingTitle.value = "获取用户收藏...";
-    loadingSub.value = `[offset]${res.next_offset} [is_last]${res.is_last}`;
+    showLoading.update("获取用户收藏...", `[offset]${res.next_offset} [is_last]${res.is_last}`);
    res = await TGRequest.User.getCollect(
      cookie,
      uid || userStore.briefInfo.value.uid,
      res.next_offset,
    );
  }
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success("获取用户收藏成功");
  window.location.reload();
 }
@@ -414,8 +403,7 @@ async function mergePosts(
 ): Promise<void> {
  const title = `用户收藏-${collect}`;
  for (const post of posts) {
-    loadingTitle.value = `收藏帖子 [${post.post.post_id}]...`;
-    loadingSub.value = `[POST]${post.post.subject} [collection]${title}`;
+    showLoading.start("获取用户收藏...", `[POST]${post.post.subject} [collection]${title}`);
    const res = await TSUserCollection.addCollect(post.post.post_id, post, title, true);
    if (!res) {
      await TGLogger.Error(`[PostCollect] mergePosts [${post.post.post_id}]`);
--- a/src/pages/common/PostForum.vue
+++ b/src/pages/common/PostForum.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" />
  <v-app-bar>
    <template #prepend>
      <div class="posts-top">
@@ -66,18 +65,15 @@
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";

+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import TGameNav from "../../components/main/t-gamenav.vue";
 import TPostCard from "../../components/main/t-postcard.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import ToPostSearch from "../../components/post/to-postSearch.vue";
 import Mys from "../../plugins/Mys/index.js";
 import TGLogger from "../../utils/TGLogger.js";
 import { createPost } from "../../utils/TGWindow.js";

-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载数据");
-
 type SortSelect = {
  text: string;
  value: number;
@@ -188,15 +184,16 @@ const search = ref<string>("");
 const showSearch = ref<boolean>(false);

 onMounted(async () => {
+  showLoading.start("正在获取帖子数据...");
  if (gid && typeof gid === "string") curGid.value = Number(gid);
  if (forum && typeof forum === "string") curForum.value = Number(forum);
  const gameLabel = getGameLabel(curGid.value);
  const forumLabel = getForumLabel(curGid.value, curForum.value);
  await TGLogger.Info(`[Posts][${gameLabel}][onMounted][${forumLabel}] 打开帖子列表`);
-  loading.value = true;
+  showLoading.update(`正在获取 ${gameLabel}-${forumLabel} 数据`);
  await freshPostData();
  curForumLabel.value = forumLabel;
-  loading.value = false;
+  showLoading.end();
 });

 watch(
@@ -236,11 +233,10 @@ async function freshPostData(): Promise<void> {
  await TGLogger.Info(
    `[Posts][${gameLabel}][freshPostData][${forumLabel}][${sortLabel}] 刷新帖子列表`,
  );
-  loading.value = true;
-  loadingTitle.value = `正在加载 ${gameLabel}-${forumLabel}-${sortLabel} 数据`;
+  showLoading.start(`正在加载 ${gameLabel}-${forumLabel}-${sortLabel} 数据`);
  const postsGet = await Mys.Post.getForumPostList(curForum.value, curSortType.value);
  posts.value = postsGet.list;
-  loading.value = false;
+  showLoading.end();
 }

 // 查询帖子
--- a/src/pages/common/PostTopic.vue
+++ b/src/pages/common/PostTopic.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" />
  <v-app-bar>
    <template #prepend>
      <div class="post-topic-top" v-if="topicInfo">
@@ -65,19 +64,16 @@
 import { computed, onMounted, ref, toRaw, watch } from "vue";
 import { useRoute } from "vue-router";

+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import TGameNav from "../../components/main/t-gamenav.vue";
 import TPostCard from "../../components/main/t-postcard.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import ToPostSearch from "../../components/post/to-postSearch.vue";
 import Mys from "../../plugins/Mys/index.js";
 import { createPost } from "../../utils/TGWindow.js";

 const gid = <string>useRoute().params.gid;
 const topic = <string>useRoute().params.topic;
-
-const loading = ref<boolean>(false);
-const loadingTitle = ref<string>("");
 const showSearch = ref<boolean>(false);

 const curGid = ref<number>(Number(gid));
@@ -116,12 +112,11 @@ watch(
 );

 async function firstLoad(): Promise<void> {
-  loading.value = true;
-  loadingTitle.value = `正在加载话题${topic}信息`;
+  showLoading.start(`正在加载话题${topic}信息`);
  const info = await Mys.Post.getTopicFullInfo(gid, topic);
  if ("retcode" in info) {
+    showLoading.end();
    showSnackbar.error(`[${info.retcode}] ${info.message}`);
-    loading.value = false;
    return;
  }
  topicInfo.value = info;
@@ -129,17 +124,17 @@ async function firstLoad(): Promise<void> {
    curGame.value = toRaw(info.game_info_list.find((i) => i.id === curGid.value));
  }
  if (curGame.value === undefined) curGame.value = info.game_info_list[0];
-  loadingTitle.value = `正在加载${curGame.value.name}帖子列表`;
+  showLoading.update(`正在加载${curGame.value.name}帖子列表`);
  const postList = await Mys.Post.getTopicPostList(gid, topic, curSortType.value);
  if ("retcode" in postList) {
+    showLoading.end();
    showSnackbar.error(`[${postList.retcode}] ${postList.message}`);
-    loading.value = false;
    return;
  }
  isLastPage.value = postList.is_last;
  lastPostId.value = postList.last_id;
  posts.value = postList.posts;
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`加载了 ${postList.posts.length} 条帖子`);
 }

@@ -148,18 +143,17 @@ async function freshPostData(): Promise<void> {
    showSnackbar.warn("已经到底了");
    return;
  }
-  loading.value = true;
-  loadingTitle.value = "正在加载帖子列表";
+  showLoading.start("正在加载帖子列表");
  const postList = await Mys.Post.getTopicPostList(gid, topic, curSortType.value, lastPostId.value);
  if ("retcode" in postList) {
+    showLoading.end();
    showSnackbar.error(`[${postList.retcode}] ${postList.message}`);
-    loading.value = false;
    return;
  }
  isLastPage.value = postList.is_last;
  lastPostId.value = postList.last_id;
  posts.value = posts.value.concat(postList.posts);
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`加载了 ${postList.posts.length} 条帖子`);
 }