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

2025-12-16 09:58:13 +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/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
  <v-app-bar>
    <template #prepend>
      <div class="uat-left">
@@ -116,9 +115,9 @@ import { onMounted, ref, watch, computed } from "vue";
 import { 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 TSubLine from "../../components/main/t-subline.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import TuaDetail from "../../components/userAbyss/tua-detail.vue";
 import TuaOverview from "../../components/userAbyss/tua-overview.vue";
 import Hutao from "../../plugins/Hutao/index.js";
@@ -132,10 +131,6 @@ import TGRequest from "../../web/request/TGRequest.js";

 // store
 const userStore = storeToRefs(useUserStore());
-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>();
-const loadingSub = ref<string>();

 // data
 const userTab = ref<number>(0);
@@ -153,15 +148,15 @@ const abyssIdList = computed<number[]>(() => {
 });

 onMounted(async () => {
+  showLoading.start("正在加载深渊数据...");
  version.value = await getVersion();
  await TGLogger.Info("[UserAbyss][onMounted] 打开角色深渊页面");
-  loadingTitle.value = "正在加载深渊数据";
  uidList.value = await TSUserAbyss.getAllUid();
  if (uidList.value.includes(user.value.gameUid)) uidCur.value = user.value.gameUid;
  else if (uidList.value.length > 0) uidCur.value = uidList.value[0];
  else uidCur.value = "";
  await loadAbyss();
-  loading.value = false;
+  showLoading.end();
 });

 watch(
@@ -215,49 +210,44 @@ async function refreshAbyss(): Promise<void> {
    }
  }
  await TGLogger.Info("[UserAbyss][getAbyssData] 更新深渊数据");
-  loadingTitle.value = `正在获取${user.value.gameUid}的深渊数据`;
-  loading.value = true;
-  loadingTitle.value = `正在获取${user.value.gameUid}的上期深渊数据`;
+  showLoading.start("正在获取上期深渊数据...", `UID: ${user.value.gameUid}`);
  const resP = await TGRequest.User.byCookie.getAbyss(userStore.cookie.value, "2", user.value);
  if ("retcode" in resP) {
+    showLoading.end();
    showSnackbar.error(`[${resP.retcode}]${resP.message}`);
-    loading.value = false;
    await TGLogger.Error(`[UserAbyss][getAbyssData] 获取${user.value.gameUid}的上期深渊数据失败`);
    await TGLogger.Error(`[UserAbyss][getAbyssData] ${resP.retcode} ${resP.message}`);
    return;
  }
  await TGLogger.Info("[UserAbyss][getAbyssData] 成功获取上期深渊数据");
-  loadingTitle.value = `正在保存${user.value.gameUid}的上期深渊数据`;
+  showLoading.update("正在保存上期深渊数据...", `UID: ${user.value.gameUid}`);
  await TSUserAbyss.saveAbyss(user.value.gameUid, resP);
-  loadingTitle.value = `正在获取${user.value.gameUid}的上期深渊数据`;
+  showLoading.update("正在获取本期深渊数据...", `UID: ${user.value.gameUid}`);
  const res = await TGRequest.User.byCookie.getAbyss(userStore.cookie.value, "1", user.value);
  if ("retcode" in res) {
+    showLoading.end();
    showSnackbar.error(`[${res.retcode}]${res.message}`);
-    loading.value = false;
    await TGLogger.Error(`[UserAbyss][getAbyssData] 获取${user.value.gameUid}的本期深渊数据失败`);
    await TGLogger.Error(`[UserAbyss][getAbyssData] ${res.retcode} ${res.message}`);
    return;
  }
-  loadingTitle.value = `正在保存${user.value.gameUid}的本期深渊数据`;
+  showLoading.update("正在保存本期深渊数据...", `UID: ${user.value.gameUid}`);
  await TSUserAbyss.saveAbyss(user.value.gameUid, res);
  await TGLogger.Info(`[UserAbyss][getAbyssData] 成功获取${user.value.gameUid}的本期深渊数据`);
-  loadingTitle.value = "正在加载深渊数据";
+  showLoading.update("正在加载深渊数据...", `UID: ${user.value.gameUid}`);
  uidList.value = await TSUserAbyss.getAllUid();
  uidCur.value = user.value.gameUid;
  await loadAbyss();
-  loading.value = false;
+  showLoading.end();
 }

 async function shareAbyss(): Promise<void> {
  await TGLogger.Info(`[UserAbyss][shareAbyss][${userTab.value}] 生成深渊数据分享图片`);
  const fileName = `【深渊数据】${userTab.value}-${user.value.gameUid}`;
-  loadingTitle.value = "正在生成图片";
-  loadingSub.value = `${fileName}.png`;
-  loading.value = true;
+  showLoading.start("正在生成图片", `${fileName}.png`);
  abyssRef.value = <HTMLElement>document.getElementById(`user-abyss-${userTab.value}`);
  await generateShareImg(fileName, abyssRef.value);
-  loadingSub.value = "";
-  loading.value = false;
+  showLoading.end();
  await TGLogger.Info(`[UserAbyss][shareAbyss][${userTab.value}] 生成深渊数据分享图片成功`);
 }

@@ -284,20 +274,20 @@ async function uploadAbyss(): Promise<void> {
    return;
  }
  try {
-    loadingTitle.value = "正在转换深渊数据";
-    loading.value = true;
+    showLoading.start("正在上传深渊数据", `UID: ${user.value.gameUid}`);
    const transAbyss = Hutao.Abyss.utils.transData(abyssData);
-    loadingTitle.value = "正在获取角色数据";
+    showLoading.update("正在获取角色数据", `UID: ${user.value.gameUid}`);
    const roles = await TSUserAvatar.getAvatars(Number(user.value.gameUid));
    if (!roles) {
-      loading.value = false;
+      showLoading.end();
+      showSnackbar.warn("未找到角色数据");
      return;
    }
-    loadingTitle.value = "正在转换角色数据";
+    showLoading.update("正在转换角色数据", `UID: ${user.value.gameUid}`);
    transAbyss.Avatars = Hutao.Abyss.utils.transAvatars(roles);
-    loadingTitle.value = "正在上传深渊数据";
+    showLoading.update("正在上传深渊数据", `UID: ${user.value.gameUid}`);
    const res = await Hutao.Abyss.upload(transAbyss);
-    loading.value = false;
+    showLoading.end();
    if (res.retcode !== 0) {
      showSnackbar.error(`[${res.retcode}]${res.message}`);
      await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败");
@@ -313,7 +303,7 @@ async function uploadAbyss(): Promise<void> {
      await TGLogger.Error(`[UserAbyss][uploadAbyss] ${e.message}`);
    }
  }
-  if (loading.value) loading.value = false;
+  showLoading.end();
 }

 async function deleteAbyss(): Promise<void> {
@@ -326,11 +316,9 @@ async function deleteAbyss(): Promise<void> {
    showSnackbar.cancel("已取消删除");
    return;
  }
-  loadingTitle.value = `正在删除 ${uidCur.value} 的深渊数据`;
-  loading.value = true;
+  showLoading.start(`正在删除 ${uidCur.value} 的深渊数据`);
  await TSUserAbyss.delAbyss(uidCur.value);
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`已清除 ${uidCur.value} 的深渊数据`);
  uidList.value = await TSUserAbyss.getAllUid();
  if (uidList.value.length > 0) uidCur.value = uidList.value[0];
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
  <v-app-bar>
    <template #prepend>
      <div class="uc-top-title">
@@ -104,8 +103,8 @@ import { storeToRefs } from "pinia";
 import { onMounted, ref, watch, computed } from "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 TuaAvatarBox from "../../components/userAvatar/tua-avatar-box.vue";
 import TuaDetailOverlay from "../../components/userAvatar/tua-detail-overlay.vue";
 import TwoSelectC, { SelectedCValue } from "../../components/wiki/two-select-c.vue";
@@ -122,12 +121,9 @@ const userStore = storeToRefs(useUserStore());
 const user = computed<TGApp.Sqlite.Account.Game>(() => userStore.account.value);

 // loading
-const loading = ref<boolean>(false);
 const loadData = ref<boolean>(false);
 const loadShare = ref<boolean>(false);
 const loadDel = ref<boolean>(false);
-const loadingTitle = ref<string>();
-const loadingSub = ref<string>();
 const version = ref<string>();

 // data
@@ -158,13 +154,12 @@ const uidCur = ref<string>();
 const uidList = ref<string[]>([]);

 onMounted(async () => {
+  showLoading.start("正在获取角色数据...");
  await TGLogger.Info("[Character][onMounted] 进入角色页面");
-  loadingTitle.value = "正在获取角色数据";
-  loading.value = true;
  version.value = await getVersion();
  await loadUid();
-  loading.value = false;
  loadData.value = false;
+  showLoading.end();
 });

 watch(
@@ -271,20 +266,20 @@ async function refresh(): Promise<void> {
    }
  }
  await TGLogger.Info(`[Character][refreshRoles][${user.value.gameUid}] 正在更新角色数据`);
-  loadingTitle.value = "正在获取角色列表";
-  loading.value = true;
+  showLoading.start("正在更新角色数据...", `UID: ${user.value.gameUid}`);
  loadData.value = true;
  if (!userStore.cookie.value) {
+    showLoading.end();
    showSnackbar.warn("请先登录");
-    loading.value = false;
    loadData.value = false;
    return;
  }
+  showLoading.update("正在更新角色数据...", "正在获取角色列表");
  const indexRes = await TGRequest.User.byCookie.getAvatarIndex(userStore.cookie.value, user.value);
  if (indexRes.retcode !== 0) {
    showSnackbar.error(`[${indexRes.retcode}] ${indexRes.message}`);
    await TGLogger.Error(JSON.stringify(indexRes.message));
-    loading.value = false;
+    showLoading.end();
    loadData.value = false;
    return;
  }
@@ -295,13 +290,12 @@ async function refresh(): Promise<void> {
    await TGLogger.Error(
      `[Character][refreshRoles][${user.value.gameUid}] ${listRes.retcode} ${listRes.message}`,
    );
-    loading.value = false;
+    showLoading.end();
    loadData.value = false;
    return;
  }
  const idList = listRes.map((i) => i.id.toString());
-  loadingTitle.value = "正在获取角色数据";
-  loadingSub.value = `共${idList.length}个角色`;
+  showLoading.update("正在更新角色数据...", `共${idList.length}个角色`);
  const res = await TGRequest.User.byCookie.getAvatarDetail(
    userStore.cookie.value,
    user.value,
@@ -313,19 +307,19 @@ async function refresh(): Promise<void> {
    await TGLogger.Error(
      `[Character][refreshRoles][${user.value.gameUid}] ${res.retcode} ${res.message}`,
    );
-    loading.value = false;
+    showLoading.end();
    loadData.value = false;
    return;
  }
  userStore.propMap.value = res.property_map;
-  loadingTitle.value = "正在保存角色数据";
+  showLoading.update("正在更新角色数据...", "正在保存角色数据");
  await TSUserAvatar.saveAvatars(user.value.gameUid, res.list);
  await TGLogger.Info(`[Character][refreshRoles][${user.value.gameUid}] 成功更新角色数据`);
  await TGLogger.Info(
    `[Character][refreshRoles][${user.value.gameUid}] 共更新${res.list.length}个角色`,
  );
  await loadRole();
-  loading.value = false;
+  showLoading.end();
  loadData.value = false;
 }

@@ -337,13 +331,10 @@ async function share(): Promise<void> {
  await TGLogger.Info(`[Character][shareRoles][${user.value.gameUid}] 正在生成分享图片`);
  const rolesBox = <HTMLElement>document.querySelector(".uc-box");
  const fileName = `【角色列表】-${user.value.gameUid}`;
-  loadingTitle.value = "正在生成图片";
-  loadingSub.value = `${fileName}.png`;
-  loading.value = true;
+  showLoading.start("正在生成图片", `${fileName}.png`);
  loadShare.value = true;
  await generateShareImg(fileName, rolesBox);
-  loadingSub.value = "";
-  loading.value = false;
+  showLoading.end();
  loadShare.value = false;
  await TGLogger.Info(`[Character][shareRoles][${user.value.gameUid}] 生成分享图片成功`);
 }
--- a/src/pages/User/Combat.vue
+++ b/src/pages/User/Combat.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
  <v-app-bar>
    <template #prepend>
      <div class="uct-left">
@@ -97,9 +96,9 @@ import { onMounted, ref, watch, computed } from "vue";
 import { 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 TSubLine from "../../components/main/t-subline.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import TucAvatars from "../../components/userCombat/tuc-avatars.vue";
 import TucOverview from "../../components/userCombat/tuc-overview.vue";
 import TucRound from "../../components/userCombat/tuc-round.vue";
@@ -112,10 +111,6 @@ import TGRequest from "../../web/request/TGRequest.js";

 // store
 const userStore = storeToRefs(useUserStore());
-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>();
-const loadingSub = ref<string>();

 // data
 const userTab = ref<number>(0);
@@ -133,15 +128,16 @@ const combatIdList = computed<number[]>(() => {
 });

 onMounted(async () => {
+  showLoading.start("正在加载剧诗数据...");
  version.value = await getVersion();
  await TGLogger.Info("[UserCombat][onMounted] 打开真境剧诗页面");
-  loadingTitle.value = "正在加载剧诗数据";
+  showLoading.update("正在加载用户数据...");
  uidList.value = await TSUserCombat.getAllUid();
  if (uidList.value.includes(user.value.gameUid)) uidCur.value = user.value.gameUid;
  else if (uidList.value.length > 0) uidCur.value = uidList.value[0];
  else uidCur.value = "";
  await loadCombat();
-  loading.value = false;
+  showLoading.end();
 });

 watch(
@@ -186,44 +182,39 @@ async function refreshCombat(): Promise<void> {
    }
  }
  await TGLogger.Info("[UserCombat][getCombatData] 更新剧诗数据");
-  loadingTitle.value = `正在获取${user.value.gameUid}的深渊数据`;
-  loading.value = true;
-  loadingTitle.value = `正在获取${user.value.gameUid}的剧诗数据`;
+  showLoading.start("正在获取剧诗数据...", `UID: ${user.value.gameUid}`);
  const res = await TGRequest.User.byCookie.getCombat(userStore.cookie.value, user.value);
  if (res === false) {
-    loading.value = false;
+    showLoading.end();
    showSnackbar.warn("用户未解锁幻想真境剧诗");
    return;
  }
  if ("retcode" in res) {
+    showLoading.end();
    showSnackbar.error(`[${res.retcode}]${res.message}`);
-    loading.value = false;
    await TGLogger.Error(`[UserCombat][getCombatData] 获取${user.value.gameUid}的剧诗数据失败`);
    await TGLogger.Error(`[UserCombat][getCombatData] ${res.retcode} ${res.message}`);
    return;
  }
-  loadingTitle.value = `正在保存剧诗数据`;
+  showLoading.update("正在保存剧诗数据...");
  for (const combat of res) {
-    loadingSub.value = `正在保存第${combat.schedule.schedule_id}期数据`;
+    showLoading.update("正在保存剧诗数据...", `第${combat.schedule.schedule_id}期`);
    await TSUserCombat.saveCombat(user.value.gameUid, combat);
  }
-  loadingTitle.value = "正在加载剧诗数据";
+  showLoading.update("正在加载剧诗数据...");
  uidList.value = await TSUserCombat.getAllUid();
  uidCur.value = user.value.gameUid;
  await loadCombat();
-  loading.value = false;
+  showLoading.end();
 }

 async function shareCombat(): Promise<void> {
  await TGLogger.Info(`[UserCombat][shareCombat][${userTab.value}] 生成剧诗数据分享图片`);
  const fileName = `【剧诗数据】${userTab.value}-${user.value.gameUid}`;
-  loadingTitle.value = "正在生成图片";
-  loadingSub.value = `${fileName}.png`;
-  loading.value = true;
+  showLoading.start("正在生成图片", `${fileName}.png`);
  combatRef.value = <HTMLElement>document.getElementById(`user-combat-${userTab.value}`);
  await generateShareImg(fileName, combatRef.value);
-  loadingSub.value = "";
-  loading.value = false;
+  showLoading.end();
  await TGLogger.Info(`[UserCombat][shareCombat][${userTab.value}] 生成剧诗数据分享图片成功`);
 }

@@ -249,13 +240,10 @@ async function uploadCombat(): Promise<void> {
    return;
  }
  try {
-    loadingTitle.value = "正在转换剧诗数据";
-    loadingSub.value = "";
-    loading.value = true;
+    showLoading.start("正在上传剧诗数据");
    const transCombat = Hutao.Combat.trans(combatData);
-    loadingTitle.value = "正在上传剧诗数据";
    const res = await Hutao.Combat.upload(transCombat);
-    loading.value = false;
+    showLoading.end();
    if (res.retcode === 0) {
      showSnackbar.success(res.message ?? "上传剧诗数据成功");
      await TGLogger.Info("[UserCombat][uploadCombat] 上传剧诗数据成功");
@@ -271,7 +259,7 @@ async function uploadCombat(): Promise<void> {
      await TGLogger.Error(`[UserCombat][uploadCombat] ${e.message}`);
    }
  }
-  if (loading.value) loading.value = false;
+  showLoading.end();
 }

 async function deleteCombat(): Promise<void> {
@@ -284,16 +272,15 @@ async function deleteCombat(): Promise<void> {
    showSnackbar.cancel("已取消删除");
    return;
  }
-  loadingTitle.value = `正在删除 ${uidCur.value} 的剧诗数据`;
-  loading.value = true;
+  showLoading.start(`正在删除 ${uidCur.value} 的剧诗数据`);
  await TSUserCombat.delCombat(uidCur.value);
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-  loading.value = false;
+  showLoading.update("正在加载剧诗数据...");
  showSnackbar.success(`已清除 ${uidCur.value} 的剧诗数据`);
  uidList.value = await TSUserCombat.getAllUid();
  if (uidList.value.length > 0) uidCur.value = uidList.value[0];
  else uidCur.value = undefined;
  await loadCombat();
+  showLoading.end();
 }
 </script>
 <style lang="css" scoped>
--- a/src/pages/User/Gacha.vue
+++ b/src/pages/User/Gacha.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
  <div class="gacha-top-bar">
    <div class="gacha-top-title">
      <img src="/source/UI/userGacha.webp" alt="gacha" />
@@ -56,12 +55,12 @@ import { storeToRefs } from "pinia";
 import { onMounted, ref, watch, computed } from "vue";

 import showDialog from "../../components/func/dialog.js";
+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import GroEcharts from "../../components/gachaRecord/gro-echarts.vue";
 import GroHistory from "../../components/gachaRecord/gro-history.vue";
 import GroOverview from "../../components/gachaRecord/gro-overview.vue";
 import GroTable from "../../components/gachaRecord/gro-table.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import { AppCharacterData, AppWeaponData } from "../../data/index.js";
 import TSUserGacha from "../../plugins/Sqlite/modules/userGacha.js";
 import { useUserStore } from "../../store/modules/user.js";
@@ -80,11 +79,6 @@ const userStore = storeToRefs(useUserStore());
 const account = computed<TGApp.Sqlite.Account.Game>(() => userStore.account.value);
 const authkey = ref<string>("");

-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>();
-const loadingSub = ref<string>();
-
 // data
 const selectItem = ref<string[]>([]);
 const uidCur = ref<string>();
@@ -105,23 +99,22 @@ watch(
 );

 onMounted(async () => {
+  showLoading.start("正在加载祈愿数据...", "正在获取祈愿 UID 列表");
  await TGLogger.Info("[UserGacha][onMounted] 进入角色祈愿页面");
-  loadingTitle.value = "正在获取祈愿 UID 列表";
  selectItem.value = await TSUserGacha.getUidList();
  if (selectItem.value.length === 0) {
+    showLoading.end();
    showSnackbar.error("暂无祈愿数据，请先导入祈愿数据");
-    loading.value = false;
    await TGLogger.Warn("[UserGacha][onMounted] 暂无祈愿数据，请先导入祈愿数据");
    return;
  }
  uidCur.value = selectItem.value[0];
-  loadingTitle.value = `正在获取祈愿数据，默认 UID：${uidCur.value}`;
+  showLoading.update("正在获取祈愿数据...", `UID：${uidCur.value}`);
  gachaListCur.value = await TSUserGacha.getGachaRecords(uidCur.value);
  await TGLogger.Info(
    `[UserGacha][onMounted] 获取到 ${uidCur.value} 的 ${gachaListCur.value.length} 条祈愿数据`,
  );
-  loadingTitle.value = "正在渲染数据";
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`成功获取 ${gachaListCur.value.length} 条祈愿数据`);
 });

@@ -147,11 +140,10 @@ async function confirmRefresh(force: boolean): Promise<void> {
      return;
    }
  }
-  loadingTitle.value = "正在获取 authkey";
-  loading.value = true;
+  showLoading.start("正在刷新祈愿数据", "正在获取 authkey");
  if (!userStore.cookie.value) {
+    showLoading.end();
    showSnackbar.error("请先登录");
-    loading.value = false;
    await TGLogger.Warn("[UserGacha][${account.gameUid}][confirmRefresh] 未检测到 cookie");
    return;
  }
@@ -165,7 +157,7 @@ async function confirmRefresh(force: boolean): Promise<void> {
    await TGLogger.Error(
      `[UserGacha][${account.value.gameUid}][confirmRefresh] ${authkeyRes.retcode} ${authkeyRes.message}`,
    );
-    loading.value = false;
+    showLoading.end();
    return;
  }
  let checkList: Array<string | undefined> = [
@@ -176,7 +168,7 @@ async function confirmRefresh(force: boolean): Promise<void> {
    undefined,
  ];
  if (!force) {
-    loadingTitle.value = "正在获取数据库祈愿最新 ID";
+    showLoading.update("正在刷新祈愿数据", "正在获取数据库祈愿最新 ID");
    checkList[0] = await TSUserGacha.getGachaCheck(account.value.gameUid, "200");
    checkList[1] = await TSUserGacha.getGachaCheck(account.value.gameUid, "301");
    checkList[2] = await TSUserGacha.getGachaCheck(account.value.gameUid, "400");
@@ -184,31 +176,30 @@ async function confirmRefresh(force: boolean): Promise<void> {
    checkList[4] = await TSUserGacha.getGachaCheck(account.value.gameUid, "500");
  }
  console.log(checkList);
-  loadingTitle.value = "正在刷新新手祈愿数据";
-  await getGachaLogs("100", "0", undefined);
-  loadingTitle.value = "正在刷新常驻祈愿数据";
-  await getGachaLogs("200", "0", checkList[0]);
-  loadingTitle.value = "正在刷新角色祈愿数据";
-  await getGachaLogs("301", "0", checkList[1]);
-  loadingTitle.value = "正在刷新角色祈愿2数据";
-  await getGachaLogs("400", "0", checkList[2]);
-  loadingTitle.value = "正在刷新武器祈愿数据";
-  await getGachaLogs("302", "0", checkList[3]);
-  loadingTitle.value = "正在刷新集录祈愿数据";
-  await getGachaLogs("500", "0", checkList[4]);
-  loadingTitle.value = "数据获取完成，即将刷新页面";
-  loadingSub.value = "";
-  loading.value = false;
-  await new Promise((resolve) => {
-    setTimeout(() => {
-      resolve("");
-    }, 1000);
-  });
+  showLoading.update("正在刷新新手祈愿数据");
+  await getGachaLogs("100", "0", "新手祈愿", undefined);
+  showLoading.update("正在刷新常驻祈愿数据");
+  await getGachaLogs("200", "0", "常驻祈愿", checkList[0]);
+  showLoading.update("正在刷新角色祈愿数据");
+  await getGachaLogs("301", "0", "角色祈愿", checkList[1]);
+  showLoading.update("正在刷新角色祈愿2数据");
+  await getGachaLogs("400", "0", "角色祈愿2", checkList[2]);
+  showLoading.update("正在刷新武器祈愿数据");
+  await getGachaLogs("302", "0", "武器祈愿", checkList[3]);
+  showLoading.update("正在刷新集录祈愿数据");
+  await getGachaLogs("500", "0", "集录祈愿", checkList[4]);
+  showLoading.update("正在刷新祈愿数据", "数据获取完成，即将刷新页面");
+  showLoading.end();
  await TGLogger.Info(`[UserGacha][${account.value.gameUid}][confirmRefresh] 刷新祈愿数据完成`);
  window.location.reload();
 }

-async function getGachaLogs(pool: string, endId: string = "0", check?: string): Promise<void> {
+async function getGachaLogs(
+  pool: string,
+  endId: string = "0",
+  title: string,
+  check?: string,
+): Promise<void> {
  const uid = account.value.gameUid;
  await TGLogger.Info(
    `[UserGacha][${uid}][getGachaLogs] 获取祈愿数据，pool：${pool}，endId：${endId}`,
@@ -225,7 +216,10 @@ async function getGachaLogs(pool: string, endId: string = "0", check?: string):
    }
    const uigfList: TGApp.Plugins.UIGF.GachaItem[] = [];
    gachaRes.forEach((item) => {
-      loadingSub.value = `[${item.item_type}][${item.time}] ${item.name}`;
+      showLoading.update(
+        `正在导入 ${title} 数据`,
+        `[${item.item_type}][${item.time}] ${item.name}`,
+      );
      const tempItem: TGApp.Plugins.UIGF.GachaItem = {
        gacha_type: item.gacha_type,
        item_id: item.item_id,
@@ -248,20 +242,12 @@ async function getGachaLogs(pool: string, endId: string = "0", check?: string):
    });
    await TSUserGacha.mergeUIGF(uid, uigfList);
    if (check !== undefined && gachaRes.some((i) => i.id === check)) {
-      await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve("");
-        }, 1000);
-      });
+      await new Promise<void>((resolve) => setTimeout(() => resolve(), 1000));
      return;
    }
    if (gachaRes.length === 20) {
-      await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve("");
-        }, 1000);
-      });
-      await getGachaLogs(pool, gachaRes[gachaRes.length - 1].id, check);
+      await new Promise<void>((resolve) => setTimeout(() => resolve(), 1000));
+      await getGachaLogs(pool, gachaRes[gachaRes.length - 1].id, title, check);
    }
  } else {
    showSnackbar.error(`[${pool}][${gachaRes.retcode}] ${gachaRes.message}`);
@@ -305,13 +291,12 @@ async function importUigf4(filePath: string): Promise<void> {
    showSnackbar.cancel("已取消祈愿数据导入");
    return;
  }
-  loadingTitle.value = "正在导入祈愿数据(v4)";
-  loading.value = true;
+  showLoading.start("正在导入祈愿数据(v4)");
  for (const account of remoteData.hk4e) {
-    loadingSub.value = `正在导入 ${account.uid} 的祈愿数据`;
+    showLoading.update("正在导入祈愿数据(v4)", `UID：${account.uid}`);
    await TSUserGacha.mergeUIGF4(account);
  }
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`成功导入 ${uidCount} 个 UID 的 ${dataCount} 条祈愿数据`);
  await TGLogger.Info(
    `[UserGacha][importUigf4] 成功导入 ${uidCount} 个 UID，${dataCount} 条祈愿数据`,
@@ -329,15 +314,15 @@ async function importUigf(filePath: string): Promise<void> {
    showSnackbar.cancel("已取消祈愿数据导入");
    return;
  }
-  loadingTitle.value = "正在导入祈愿数据";
-  loading.value = true;
+  showLoading.start("正在导入祈愿数据");
  if (remoteData.list.length === 0) {
-    loading.value = false;
+    showLoading.end();
    showSnackbar.error("导入的祈愿数据为空");
    return;
  }
+  showLoading.update("正在导入祈愿数据", `UID：${remoteData.info.uid}`);
  await TSUserGacha.mergeUIGF(remoteData.info.uid, remoteData.list);
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`成功导入 ${remoteData.list.length} 条祈愿数据`);
  await TGLogger.Info(
    `[UserGacha][importUigf] 成功导入 ${remoteData.info.uid} 的 ${remoteData.list.length} 条祈愿数据`,
@@ -374,10 +359,9 @@ async function exportUigf(): Promise<void> {
  await TGLogger.Info(
    `[UserGacha][${uidCur.value}][exportUigf] 导出${gachaList.length} 条祈愿数据到 ${file}`,
  );
-  loadingTitle.value = `正在导出 ${uidCur.value} 的祈愿数据`;
-  loading.value = true;
+  showLoading.start("正在导出祈愿数据", `正在导出 ${uidCur.value} 的祈愿数据`);
  await exportUigfData(uidCur.value, gachaList, file);
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`成功导出 ${uidCur.value} 的祈愿数据`);
  await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf] 导出祈愿数据完成`);
 }
@@ -416,14 +400,13 @@ async function exportUigf4(): Promise<void> {
    showSnackbar.cancel("已取消文件保存");
    return;
  }
-  loadingTitle.value = "正在导出祈愿数据";
-  loading.value = true;
+  showLoading.start("正在导出祈愿数据", `路径：${file}`);
  if (!exportAllCheck) {
    await exportUigf4Data(file, uidCur.value);
  } else {
    await exportUigf4Data(file);
  }
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success("祈愿数据已成功导出");
  await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf4] 导出祈愿数据完成`);
 }
@@ -452,10 +435,9 @@ async function deleteGacha(): Promise<void> {
      return;
    }
  }
-  loadingTitle.value = `正在删除${uidCur.value}的祈愿数据`;
-  loading.value = true;
+  showLoading.start("正在删除祈愿数据", `正在删除${uidCur.value}的祈愿数据`);
  await TSUserGacha.deleteGachaRecords(uidCur.value);
-  loading.value = false;
+  showLoading.end();
  showSnackbar.success(`已成功删除 ${uidCur.value} 的祈愿数据`);
  await TGLogger.Info(
    `[UserGacha][${uidCur.value}][deleteGacha] 成功删除 ${gachaListCur.value.length} 条祈愿数据`,
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
  <v-app-bar>
    <template #prepend>
      <div class="ur-top-title">
@@ -61,9 +60,9 @@ import { storeToRefs } from "pinia";
 import { computed, onMounted, 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 TSubLine from "../../components/main/t-subline.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import TurAvatarGrid from "../../components/userRecord/tur-avatar-grid.vue";
 import TurHomeGrid from "../../components/userRecord/tur-home-grid.vue";
 import TurOverviewGrid from "../../components/userRecord/tur-overview-grid.vue";
@@ -79,11 +78,6 @@ import TGRequest from "../../web/request/TGRequest.js";
 const userStore = storeToRefs(useUserStore());
 const user = computed<TGApp.Sqlite.Account.Game>(() => userStore.account.value);

-// loading
-const loading = ref<boolean>(false);
-const loadingTitle = ref<string>();
-const loadingSub = ref<string>();
-
 // data
 const uidCur = ref<number>();
 const uidList = ref<number[]>([]);
@@ -91,12 +85,11 @@ const recordData = ref<TGApp.Sqlite.Record.RenderData>();
 const version = ref<string>();

 onMounted(async () => {
+  showLoading.start("正在获取战绩数据...");
  await TGLogger.Info("[UserRecord][onMounted] 打开角色战绩页面");
-  loadingTitle.value = "正在加载战绩数据";
-  loading.value = true;
  version.value = await getVersion();
  await loadUid();
-  loading.value = false;
+  showLoading.end();
 });

 watch(
@@ -143,12 +136,11 @@ async function refreshRecord(): Promise<void> {
      return;
    }
  }
+  showLoading.start("正在刷新战绩数据...");
  await TGLogger.Info(`[UserRecord][refresh][${user.value.gameUid}] 刷新战绩数据`);
-  loadingTitle.value = "正在获取战绩数据";
-  loading.value = true;
  if (!userStore.cookie.value) {
+    showLoading.end();
    showSnackbar.warn("请先登录");
-    loading.value = false;
    await TGLogger.Warn(`[UserRecord][refresh][${user.value.gameUid}] 未登录`);
    return;
  }
@@ -161,7 +153,7 @@ async function refreshRecord(): Promise<void> {
    await TGLogger.Info(`[UserRecord][refresh][${user.value.gameUid}] 获取战绩数据成功`);
    await TGLogger.Info(`[UserRecord][refresh][${user.value.gameUid}]`, false);
    await TGLogger.Info(JSON.stringify(res), false);
-    loadingTitle.value = "正在保存战绩数据";
+    showLoading.update("正在保存战绩数据");
    await TSUserRecord.saveRecord(Number(user.value.gameUid), res);
    await loadUid();
    await loadRecord();
@@ -173,7 +165,7 @@ async function refreshRecord(): Promise<void> {
      `[UserRecord][refresh][${user.value.gameUid}] ${res.retcode} ${res.message}`,
    );
  }
-  loading.value = false;
+  showLoading.end();
 }

 async function shareRecord(): Promise<void> {
@@ -184,12 +176,9 @@ async function shareRecord(): Promise<void> {
  await TGLogger.Info(`[UserRecord][shareRecord][${user.value.gameUid}] 生成分享图片`);
  const recordBox = <HTMLElement>document.querySelector(".ur-box");
  const fileName = `【原神战绩】-${user.value.gameUid}`;
-  loadingTitle.value = "正在生成图片";
-  loadingSub.value = `${fileName}.png`;
-  loading.value = true;
+  showLoading.start("正在生成图片", fileName);
  await generateShareImg(fileName, recordBox);
-  loadingSub.value = "";
-  loading.value = false;
+  showLoading.end();
  await TGLogger.Info(`[UserRecord][shareRecord][${user.value.gameUid}] 生成分享图片成功`);
 }

--- a/src/pages/WIKI/Abyss.vue
+++ b/src/pages/WIKI/Abyss.vue
@@ -1,5 +1,4 @@
 <template>
-  <ToLoading v-model="loading" :title="loadT" />
  <v-app-bar>
    <template #prepend>
      <div class="hta-top-prepend">
@@ -44,12 +43,12 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from "vue";

+import showLoading from "../../components/func/loading.js";
 import HtaOverlayOverview from "../../components/hutaoAbyss/hta-overlay-overview.vue";
 import HtaTabHold from "../../components/hutaoAbyss/hta-tab-hold.vue";
 import HtaTabTeam from "../../components/hutaoAbyss/hta-tab-team.vue";
 import HtaTabUp from "../../components/hutaoAbyss/hta-tab-up.vue";
 import HtaTabUse from "../../components/hutaoAbyss/hta-tab-use.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import Hutao from "../../plugins/Hutao/index.js";
 import { timestampToDate } from "../../utils/toolFunc.js";

@@ -82,9 +81,6 @@ const abyssList: AbyssList = [
  { label: AbyssTabEnum.team, value: "team" },
  { label: AbyssTabEnum.hold, value: "hold" },
 ];
-
-const loading = ref<boolean>(false);
-const loadT = ref<string>("");
 const showDialog = ref<boolean>(false);

 // data
@@ -98,17 +94,15 @@ watch(
 );

 onMounted(async () => {
-  loadT.value = "正在获取深渊数据";
-  loading.value = true;
-  loadT.value = "正在获取深渊概览";
+  showLoading.start("正在获取深渊数据...", "正在获取深渊概览");
  overview.value = {
    cur: await Hutao.Abyss.overview(),
    last: await Hutao.Abyss.overview(true),
  };
-  loadT.value = "正在获取深渊数据";
+  showLoading.update("正在获取深渊数据...", "正在角色使用率数据");
  const useData = <AbyssDataItem<TGApp.Plugins.Hutao.Abyss.AvatarUse[]>>await getData("use");
  abyssData.value = { use: useData, up: null, team: null, hold: null };
-  loading.value = false;
+  showLoading.end();
 });

 function show(): void {
@@ -117,9 +111,7 @@ function show(): void {

 async function refreshData(type: AbyssTab): Promise<void> {
  if (abyssData.value && abyssData.value[type] !== null) return;
-  if (loading.value) return;
-  loading.value = true;
-  loadT.value = `正在获取 ${AbyssTabEnum[type]} 数据`;
+  showLoading.update("正在获取深渊数据...", `正在获取 ${AbyssTabEnum[type]} 数据`);
  const data = await getData(type);
  switch (type) {
    case "use":
@@ -135,7 +127,7 @@ async function refreshData(type: AbyssTab): Promise<void> {
      abyssData.value.hold = <AbyssDataItemType<"hold">>data;
      break;
  }
-  loading.value = false;
+  showLoading.end();
 }

 async function getData(type: AbyssTab): Promise<AbyssDataItemType<AbyssTab>> {
--- 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} 条帖子`);
 }