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

2025-12-13 09:28: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/components/app/t-shareBtn.vue
+++ b/src/components/app/t-shareBtn.vue
@@ -1,29 +1,25 @@
 <template>
  <div class="share-box" title="分享">
    <div class="share-btn" @click="shareContent()">
-      <v-icon> mdi-share-variant</v-icon>
+      <v-icon>mdi-share-variant</v-icon>
    </div>
  </div>
 </template>
 <script lang="ts" setup>
-// utils
 import TGLogger from "../../utils/TGLogger.js";
 import { generateShareImg } from "../../utils/TGShare.js";
+import showLoading from "../func/loading.js";

 interface TShareBtnProps {
  modelValue: HTMLElement;
  title: string;
-  loading: boolean;
 }

-type TShareBtnEmits = (e: "update:loading", value: boolean) => void;
-
 const props = defineProps<TShareBtnProps>();
-const emit = defineEmits<TShareBtnEmits>();

 async function shareContent(): Promise<void> {
+  showLoading.start("正在生成分享图片", props.title);
  await TGLogger.Info("[TShareBtn][shareContent] 开始生成分享图片");
-  emit("update:loading", true);
  props.modelValue.querySelectorAll("details").forEach((item) => {
    if (item.open) {
      item.setAttribute("details-open", "");
@@ -39,7 +35,7 @@ async function shareContent(): Promise<void> {
      item.open = false;
    }
  });
-  emit("update:loading", false);
+  showLoading.end();
  await TGLogger.Info("[TShareBtn][shareContent] 生成分享图片完成");
 }
 </script>
--- a/src/components/config/tc-userBadge.vue
+++ b/src/components/config/tc-userBadge.vue
@@ -49,7 +49,6 @@
        @click="confirmRefreshUser(userStore.uid.value!)"
        :disabled="userStore.uid.value === undefined"
        icon="mdi-refresh"
-        :loading="loading"
        title="刷新用户信息"
      />
      <v-btn
@@ -114,17 +113,12 @@ import TGLogger from "../../utils/TGLogger.js";
 import TGRequest from "../../web/request/TGRequest.js";
 import showDialog from "../func/dialog.js";
 import showGeetest from "../func/geetest.js";
+import showLoading from "../func/loading.js";
 import showSnackbar from "../func/snackbar.js";

-interface TcUserBadgeEmits {
-  (e: "loadOuter", v: TGApp.Component.Loading.EmitParams): void;
-}
-
-const emits = defineEmits<TcUserBadgeEmits>();
 const userStore = storeToRefs(useUserStore());
 const appStore = storeToRefs(useAppStore());

-const loading = ref<boolean>(false);
 const accounts = ref<TGApp.App.Account.User[]>([]);
 const gameAccounts = ref<TGApp.Sqlite.Account.Game[]>([]);
 const userInfo = computed<TGApp.App.Account.BriefInfo>(() => {
@@ -159,7 +153,7 @@ async function tryCaptchaLogin(): Promise<void> {
  }
  const loginResp = await tryLoginByCaptcha(phone, captcha, actionType);
  if (!loginResp) return;
-  loading.value = true;
+  showLoading.start("正在登录...");
  const ck: TGApp.App.Account.Cookie = {
    account_id: loginResp.user_info.aid,
    ltuid: loginResp.user_info.aid,
@@ -169,37 +163,34 @@ async function tryCaptchaLogin(): Promise<void> {
    stoken: loginResp.token.token,
    ltoken: "",
  };
-  emits("loadOuter", { show: true, title: "正在获取 LToken" });
+  showLoading.update("正在登录...", "正在获取 LToken");
  const ltokenRes = await TGRequest.User.bySToken.getLToken(ck.mid, ck.stoken);
  if (typeof ltokenRes !== "string") {
+    showLoading.end();
    showSnackbar.error(`[${ltokenRes.retcode}]${ltokenRes.message}`);
    await TGLogger.Error(`获取LToken失败：${ltokenRes.retcode}-${ltokenRes.message}`);
-    loading.value = false;
-    emits("loadOuter", { show: false });
    return;
  }
  showSnackbar.success("获取LToken成功");
  ck.ltoken = ltokenRes;
-  emits("loadOuter", { show: true, title: "正在获取 cookieToken " });
+  showLoading.update("正在登录...", "正在获取 CookieToken");
  const cookieTokenRes = await TGRequest.User.bySToken.getCookieToken(ck.mid, ck.stoken);
  if (typeof cookieTokenRes !== "string") {
+    showLoading.end();
    showSnackbar.error(`[${cookieTokenRes.retcode}]${cookieTokenRes.message}`);
    await TGLogger.Error(
      `获取CookieToken失败：${cookieTokenRes.retcode}-${cookieTokenRes.message}`,
    );
-    loading.value = false;
-    emits("loadOuter", { show: false });
    return;
  }
  showSnackbar.success("获取CookieToken成功");
  ck.cookie_token = cookieTokenRes;
-  emits("loadOuter", { show: true, title: "正在获取用户信息" });
+  showLoading.update("正在登录...", "正在获取用户信息");
  const briefRes = await TGRequest.User.byCookie.getUserInfo(ck.cookie_token, ck.account_id);
  if ("retcode" in briefRes) {
+    showLoading.end();
    showSnackbar.error(`[${briefRes.retcode}]${briefRes.message}`);
    await TGLogger.Error(`获取用户数据失败：${briefRes.retcode}-${briefRes.message}`);
-    loading.value = false;
-    emits("loadOuter", { show: false });
    return;
  }
  showSnackbar.success("获取用户信息成功");
@@ -209,7 +200,7 @@ async function tryCaptchaLogin(): Promise<void> {
    avatar: briefRes.avatar_url,
    desc: briefRes.introduce,
  };
-  emits("loadOuter", { show: true, title: "正在保存并切换用户" });
+  showLoading.update("正在登录...", "正在保存用户数据");
  await TSUserAccount.account.saveAccount({
    uid: briefInfo.uid,
    cookie: ck,
@@ -220,11 +211,10 @@ async function tryCaptchaLogin(): Promise<void> {
  userStore.briefInfo.value = briefInfo;
  userStore.cookie.value = ck;
  appStore.isLogin.value = true;
-  emits("loadOuter", { show: true, title: "正在获取游戏账号" });
+  showLoading.update("正在登录...", "正在获取游戏账号");
  const gameRes = await TGRequest.User.byCookie.getAccounts(ck.cookie_token, ck.account_id);
  if (!Array.isArray(gameRes)) {
-    loading.value = false;
-    emits("loadOuter", { show: false });
+    showLoading.end();
    showSnackbar.error(`[${gameRes.retcode}]${gameRes.message}`);
    await TGLogger.Error(`获取游戏账号失败：${gameRes.retcode}-${gameRes.message}`);
    return;
@@ -234,13 +224,11 @@ async function tryCaptchaLogin(): Promise<void> {
  const curAccount = await TSUserAccount.game.getCurAccount(briefInfo.uid);
  if (!curAccount) {
    showSnackbar.warn("未检测到游戏账号，请重新刷新");
-    loading.value = false;
-    emits("loadOuter", { show: false });
+    showLoading.end();
    return;
  }
  userStore.account.value = curAccount;
-  loading.value = false;
-  emits("loadOuter", { show: false });
+  showLoading.end();
  showSnackbar.success("成功登录!");
 }

@@ -251,66 +239,57 @@ async function refreshUser(uid: string) {
    return;
  }
  let ck = account.cookie;
-  loading.value = true;
-  emits("loadOuter", { show: true, title: "正在刷新用户信息" });
-  emits("loadOuter", { show: true, title: "正在验证 LToken" });
+  showLoading.start("正在刷新用户信息", "正在验证 LToken");
  const verifyLTokenRes = await TGRequest.User.verifyLToken(ck.ltoken, ck.ltuid);
  if (typeof verifyLTokenRes === "string") {
-    emits("loadOuter", { show: true, title: "正在验证 LToken", text: "验证 LToken 成功!" });
+    showLoading.update("正在刷新用户信息", "验证 LToken 成功");
+    showSnackbar.success("验证 LToken 成功");
    await TGLogger.Info("[tc-userBadge][refreshUser] 验证 LToken 成功");
  } else {
-    emits("loadOuter", {
-      show: true,
-      title: "正在验证 LToken",
-      text: "验证 LToken 失败!即将重新获取",
-    });
+    showLoading.update("正在刷新用户信息", "验证 LToken 失败");
+    showSnackbar.error(`[${verifyLTokenRes.retcode}]${verifyLTokenRes.message}`);
    await TGLogger.Warn("[tc-userBadge][refreshUser] 验证 LToken 失败");
    await TGLogger.Warn(
      `[tc-userBadge][refreshUser] ${verifyLTokenRes.retcode}: ${verifyLTokenRes.message}`,
    );
    const ltokenRes = await TGRequest.User.bySToken.getLToken(ck.mid, ck.stoken);
    if (typeof ltokenRes === "string") {
+      showLoading.update("正在刷新用户信息", "获取 LToken 成功");
      ck.ltoken = ltokenRes;
-      emits("loadOuter", { show: true, title: "正在验证 LToken", text: "获取 LToken 成功!" });
      await TGLogger.Info("[tc-userBadge][refreshUser] 获取 LToken 成功");
    } else {
-      emits("loadOuter", { show: true, title: "正在验证 LToken", text: "获取 LToken 失败!" });
+      showLoading.update("正在刷新用户信息", "获取 LToken 失败");
+      showSnackbar.error(`[${ltokenRes.retcode}]${ltokenRes.message}`);
      await TGLogger.Error("[tc-userBadge][refreshUser] 获取 LToken 失败");
      await TGLogger.Error(
        `[tc-userBadge][refreshUser] ${ltokenRes.retcode}: ${ltokenRes.message}`,
      );
    }
  }
-  emits("loadOuter", { show: true, title: "正在获取 CookieToken" });
+  showLoading.update("正在刷新用户信息", "正在获取 CookieToken");
  const cookieTokenRes = await TGRequest.User.bySToken.getCookieToken(ck.mid, ck.stoken);
  if (typeof cookieTokenRes === "string") {
+    showLoading.update("正在刷新用户信息", "获取 CookieToken 成功");
    ck.cookie_token = cookieTokenRes;
-    emits("loadOuter", {
-      show: true,
-      title: "正在获取 CookieToken",
-      text: "获取 CookieToken 成功!",
-    });
    await TGLogger.Info("[tc-userBadge][refreshUser] 获取 CookieToken 成功");
  } else {
-    emits("loadOuter", {
-      show: true,
-      title: "正在获取 CookieToken",
-      text: "获取 CookieToken 失败!",
-    });
+    showLoading.update("正在刷新用户信息", "获取 CookieToken 失败");
+    showSnackbar.error(`[${cookieTokenRes.retcode}]${cookieTokenRes.message}`);
    await TGLogger.Error("[tc-userBadge][refreshUser] 获取 CookieToken 失败");
    await TGLogger.Error(
      `[tc-userBadge][refreshUser] ${cookieTokenRes.retcode}: ${cookieTokenRes.message}`,
    );
  }
  account.cookie = ck;
-  emits("loadOuter", { show: true, title: "正在获取用户信息" });
+  showLoading.update("正在刷新用户信息", "正在获取用户信息");
  const infoRes = await TGRequest.User.byCookie.getUserInfo(ck.cookie_token, ck.account_id);
  if ("retcode" in infoRes) {
-    emits("loadOuter", { show: true, title: "正在获取用户信息", text: "获取用户信息失败!" });
+    showLoading.update("正在刷新用户信息", "获取用户信息失败");
+    showSnackbar.error(`[${infoRes.retcode}]${infoRes.message}`);
    await TGLogger.Error("[tc-userBadge][refreshUserInfo] 获取用户信息失败");
    await TGLogger.Error(`[tc-userBadge][refreshUserInfo] ${infoRes.retcode}: ${infoRes.message}`);
  } else {
-    emits("loadOuter", { show: true, title: "正在获取用户信息", text: "获取用户信息成功!" });
+    showLoading.update("正在刷新用户信息", "获取用户信息成功");
    account.brief = {
      nickname: infoRes.nickname,
      uid: infoRes.uid,
@@ -320,21 +299,21 @@ async function refreshUser(uid: string) {
    await TGLogger.Info("[tc-userBadge][refreshUserInfo] 获取用户信息成功");
  }
  await TSUserAccount.account.saveAccount(account);
-  emits("loadOuter", { show: true, title: "正在获取账号信息" });
+  showLoading.update("正在刷新用户信息", "正在获取账号信息");
  const accountRes = await TGRequest.User.byCookie.getAccounts(ck.cookie_token, ck.account_id);
  if (Array.isArray(accountRes)) {
-    emits("loadOuter", { show: true, title: "正在获取账号信息", text: "获取账号信息成功!" });
+    showLoading.update("正在刷新用户信息", "获取账号信息成功");
    await TGLogger.Info("[tc-userBadge][refreshUserInfo] 获取账号信息成功");
    await TSUserAccount.game.saveAccounts(account.uid, accountRes);
  } else {
-    emits("loadOuter", { show: true, title: "正在获取账号信息", text: "获取账号信息失败!" });
+    showLoading.update("正在刷新用户信息", "获取账号信息失败");
+    showSnackbar.error(`[${accountRes.retcode}]${accountRes.message}`);
    await TGLogger.Error("[tc-userBadge][refreshUserInfo] 获取账号信息失败");
    await TGLogger.Error(
      `[tc-userBadge][refreshUserInfo] ${accountRes.retcode}: ${accountRes.message}`,
    );
  }
-  loading.value = false;
-  emits("loadOuter", { show: false });
+  showLoading.end();
 }

 async function loadAccount(uid: string): Promise<void> {
@@ -366,7 +345,10 @@ async function confirmRefreshUser(uid: string): Promise<void> {
    return;
  }
  await refreshUser(uid);
-  if (userStore.uid.value === uid) showSnackbar.success("成功刷新用户信息");
+  if (userStore.uid.value === uid) {
+    showSnackbar.success("成功刷新用户信息");
+    return;
+  }
  const switchCheck = await showDialog.check("是否切换用户？", `将切换到用户${uid}`);
  if (!switchCheck) return;
  await loadAccount(uid);
@@ -460,8 +442,7 @@ async function addByCookie(): Promise<void> {
    await TGLogger.Error(`解析Cookie失败：${ckInput}`);
    return;
  }
-  loading.value = true;
-  emits("loadOuter", { show: true, title: "尝试刷新Cookie" });
+  showLoading.start("正在添加用户", "正在尝试刷新Cookie");
  const ck: TGApp.App.Account.Cookie = {
    account_id: ckRes.stuid,
    ltuid: ckRes.stuid,
@@ -471,35 +452,32 @@ async function addByCookie(): Promise<void> {
    stoken: ckRes.stoken,
    ltoken: "",
  };
-  emits("loadOuter", { show: true, title: "正在获取 LToken" });
+  showLoading.update("正在添加用户", "正在获取 LToken");
  const ltokenRes = await TGRequest.User.bySToken.getLToken(ck.mid, ck.stoken);
  if (typeof ltokenRes !== "string") {
+    showLoading.end();
    showSnackbar.error(`[${ltokenRes.retcode}]${ltokenRes.message}`);
    await TGLogger.Error(`获取LToken失败：${ltokenRes.retcode}-${ltokenRes.message}`);
-    loading.value = false;
-    emits("loadOuter", { show: false });
    return;
  }
  ck.ltoken = ltokenRes;
-  emits("loadOuter", { show: true, title: "正在获取 cookieToken " });
+  showLoading.update("正在添加用户", "正在获取 CookieToken");
  const cookieTokenRes = await TGRequest.User.bySToken.getCookieToken(ck.mid, ck.stoken);
  if (typeof cookieTokenRes !== "string") {
+    showLoading.end();
    showSnackbar.error(`[${cookieTokenRes.retcode}]${cookieTokenRes.message}`);
    await TGLogger.Error(
      `获取CookieToken失败：${cookieTokenRes.retcode}-${cookieTokenRes.message}`,
    );
-    loading.value = false;
-    emits("loadOuter", { show: false });
    return;
  }
  ck.cookie_token = cookieTokenRes;
-  emits("loadOuter", { show: true, title: "正在获取用户信息" });
+  showLoading.update("正在添加用户", "正在获取用户信息");
  const briefRes = await TGRequest.User.byCookie.getUserInfo(ck.cookie_token, ck.account_id);
  if ("retcode" in briefRes) {
+    showLoading.end();
    showSnackbar.error(`[${briefRes.retcode}]${briefRes.message}`);
    await TGLogger.Error(`获取用户数据失败：${briefRes.retcode}-${briefRes.message}`);
-    loading.value = false;
-    emits("loadOuter", { show: false });
    return;
  }
  const briefInfo: TGApp.App.Account.BriefInfo = {
@@ -508,31 +486,29 @@ async function addByCookie(): Promise<void> {
    avatar: briefRes.avatar_url,
    desc: briefRes.introduce,
  };
-  emits("loadOuter", { show: true, title: "正在保存用户数据" });
+  showLoading.update("正在添加用户", "正在保存用户数据");
  await TSUserAccount.account.saveAccount({
    uid: briefInfo.uid,
    cookie: ck,
    brief: briefInfo,
    updated: "",
  });
-  emits("loadOuter", { show: true, title: "正在获取游戏账号" });
+  showLoading.update("正在添加用户", "正在获取游戏账号");
  const gameRes = await TGRequest.User.bySToken.getAccounts(ck.stoken, ck.stuid);
  if (!Array.isArray(gameRes)) {
-    loading.value = false;
-    emits("loadOuter", { show: false });
+    showLoading.end();
    showSnackbar.error(`[${gameRes.retcode}]${gameRes.message}`);
    return;
  }
+  showLoading.update("正在添加用户", "正在保存游戏账号");
  await TSUserAccount.game.saveAccounts(briefInfo.uid, gameRes);
  const curAccount = await TSUserAccount.game.getCurAccount(briefInfo.uid);
  if (!curAccount) {
+    showLoading.end();
    showSnackbar.warn("未检测到游戏账号，请重新刷新");
-    loading.value = false;
-    emits("loadOuter", { show: false });
    return;
  }
-  loading.value = false;
-  emits("loadOuter", { show: false });
+  showLoading.end();
  showSnackbar.success("成功添加用户!");
 }

--- a/src/components/home/t-calendar.vue
+++ b/src/components/home/t-calendar.vue
@@ -116,8 +116,6 @@ const btnText = [

 interface TCalendarEmits {
  (e: "success"): void;
-
-  (e: "loadOuter", v: TGApp.Component.Loading.EmitParams): void;
 }

 const emits = defineEmits<TCalendarEmits>();
--- a/src/components/overlay/to-loading.vue
+++ b/src/components/overlay/to-loading.vue
@@ -1,110 +0,0 @@
-<template>
-  <TOverlay v-model="show" :blur-val="'5px'">
-    <div class="loading-container">
-      <div class="loading-box">
-        <div class="loading-title">
-          <slot name="title">
-            {{ title }}
-          </slot>
-          <v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
-        </div>
-        <div v-if="subtitle" class="loading-subtitle">
-          <slot name="subtitle">
-            {{ subtitle }}
-          </slot>
-        </div>
-        <div class="loading-img">
-          <slot name="img">
-            <img v-if="!empty" src="/source/UI/loading.webp" alt="loading" />
-            <img v-else src="/source/UI/empty.webp" alt="empty" />
-          </slot>
-        </div>
-      </div>
-    </div>
-  </TOverlay>
-</template>
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-
-import TOverlay from "../main/t-overlay.vue";
-
-interface LoadingProps {
-  modelValue: boolean;
-  title?: string;
-  subtitle?: string;
-  empty?: boolean;
-}
-
-const show = ref(true);
-
-const props = withDefaults(defineProps<LoadingProps>(), {
-  modelValue: true,
-  title: "加载中",
-  subtitle: "",
-  empty: false,
-});
-
-watch(
-  () => props.modelValue,
-  (v) => {
-    show.value = v;
-  },
-);
-</script>
-<style lang="css" scoped>
-.loading-container {
-  display: flex;
-  min-width: 800px;
-  min-height: 300px;
-  padding: 15px;
-  border-radius: 15px;
-  background: rgb(255 255 255 / 5%);
-  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
-}
-
-.loading-box {
-  display: flex;
-  width: 100%;
-  box-sizing: content-box;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 10px;
-  border: #f4d8a8 1px solid;
-  border-radius: 5px;
-  color: #f4d8a8;
-}
-
-.loading-title {
-  display: flex;
-  width: 100%;
-  height: 50px;
-  align-items: center;
-  justify-content: center;
-  font-family: Genshin, serif;
-  font-size: 2rem;
-  font-weight: 600;
-}
-
-.loading-subtitle {
-  width: 100%;
-  height: 25px;
-  font-family: Genshin-Light, serif;
-  font-size: 1rem;
-  text-align: center;
-}
-
-.loading-img {
-  display: flex;
-  width: 100%;
-  height: 200px;
-  align-items: center;
-  justify-content: center;
-}
-
-.loading-img:deep(img) {
-  max-width: 100%;
-  max-height: 200px;
-  border-radius: 5px;
-}
-</style>
--- 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} 条帖子`);
 }

--- a/src/types/Component/Loading.d.ts
+++ b/src/types/Component/Loading.d.ts
@@ -1,28 +0,0 @@
-/**
- * @file types/Component/Loading.d.ts
- * @description Component Loading 类型声明文件
- * @since Beta v0.4.2
- */
-
-/**
- * @description Loading 命名空间
- * @namespace TGApp.Component.Loading
- * @since Beta v0.4.2
- * @memberof TGApp.Component
- */
-declare namespace TGApp.Component.Loading {
-  /**
-   * @description Loading 参数-用于Emits
-   * @since Beta v0.4.2
-   * @interface EmitParams
-   * @property {boolean} show 显示
-   * @property {string} title 标题
-   * @property {string} text 副标题
-   * @return EmitParams
-   */
-  interface EmitParams {
-    show: boolean;
-    title?: string;
-    text?: string;
-  }
-}
--- a/src/utils/dataBS.ts
+++ b/src/utils/dataBS.ts
@@ -5,6 +5,7 @@
 */
 import { exists, mkdir } from "@tauri-apps/plugin-fs";

+import showLoading from "../components/func/loading.js";
 import showSnackbar from "../components/func/snackbar.js";
 import TSUserAbyss from "../plugins/Sqlite/modules/userAbyss.js";
 import TSUserAccount from "../plugins/Sqlite/modules/userAccount.js";
@@ -44,26 +45,31 @@ export async function restoreUserData(dir: string): Promise<void> {
    showSnackbar.error("备份目录不存在");
    return;
  }
+  showLoading.update("正在恢复数据...", "正在恢复成就数据");
  const restoreAchi = await TSUserAchi.restoreUiaf(dir);
  if (!restoreAchi) {
    showSnackbar.error("成就数据恢复失败");
    errNum++;
  }
+  showLoading.update("正在恢复数据...", "正在恢复账号数据");
  const restoreAccount = await TSUserAccount.account.restore(dir);
  if (!restoreAccount) {
    showSnackbar.error("Cookie 数据恢复失败");
    errNum++;
  }
+  showLoading.update("正在恢复数据...", "正在恢复深渊数据");
  const restoreAbyss = await TSUserAbyss.restoreAbyss(dir);
  if (!restoreAbyss) {
    showSnackbar.error("深渊数据恢复失败");
    errNum++;
  }
+  showLoading.update("正在恢复数据...", "正在恢复真境剧诗数据");
  const restoreCombat = await TSUserCombat.restoreCombat(dir);
  if (!restoreCombat) {
    showSnackbar.error("真境剧诗数据恢复失败");
    errNum++;
  }
+  showLoading.update("正在恢复数据...", "正在恢复祈愿数据");
  const restoreGacha = await TSUserGacha.restoreUigf(dir);
  if (!restoreGacha) {
    showSnackbar.error("祈愿数据恢复失败");
--- a/src/views/t-anno-json.vue
+++ b/src/views/t-anno-json.vue
@@ -1,6 +1,5 @@
 <template>
  <TSwitchTheme />
-  <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
  <div class="anno-json">
    <div class="anno-title">活动列表 JSON</div>
    <JsonViewer :value="jsonList" copyable boxed />
@@ -9,20 +8,15 @@
  </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, reactive } from "vue";
+import { onMounted, reactive } from "vue";
 import JsonViewer from "vue-json-viewer";
 import { useRoute } from "vue-router";

 import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import ToLoading from "../components/overlay/to-loading.vue";
+import showLoading from "../components/func/loading.js";
 import { AnnoLang, AnnoServer } from "../web/request/getAnno.js";
 import TGRequest from "../web/request/TGRequest.js";

-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载");
-const loadingEmpty = ref<boolean>(false);
-
 // 数据
 const route = useRoute();
 const annoId = Number(route.params.anno_id);
@@ -32,14 +26,12 @@ let jsonList = reactive({});
 let jsonContent = reactive({});

 onMounted(async () => {
-  // 检查数据
+  showLoading.start("正在获取公告数据...");
  if (!annoId) {
-    loadingEmpty.value = true;
-    loadingTitle.value = "未找到数据";
+    showLoading.empty("未找到数据");
    return;
  }
-  // 获取数据
-  loadingTitle.value = "正在获取数据...";
+  showLoading.update("正在获取数据...", `公告ID: ${annoId}`);
  const listData = await TGRequest.Anno.getList();
  listData.list.map((item: TGApp.BBS.Announcement.ListItem) => {
    return item.list.map((single: TGApp.BBS.Announcement.AnnoSingle) => {
@@ -47,9 +39,7 @@ onMounted(async () => {
    });
  });
  jsonContent = await TGRequest.Anno.getContent(annoId, region, lang);
-  setTimeout(() => {
-    loading.value = false;
-  }, 200);
+  showLoading.end();
 });
 </script>
 <style lang="css" scoped>
--- a/src/views/t-anno.vue
+++ b/src/views/t-anno.vue
@@ -1,21 +1,11 @@
 <template>
  <TSwitchTheme />
  <TPinWin />
-  <TShareBtn
-    v-show="!loadingEmpty"
-    v-model="annoRef"
-    v-model:loading="loadShare"
-    :title="annoTitle"
-  />
-  <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" :empty="loadingEmpty" />
+  <TShareBtn v-model="annoRef" :title="annoTitle" />
  <div class="anno-body" v-if="annoData">
    <div class="anno-info">AnnoID: {{ annoId }} | Render by TeyvatGuide v{{ appVersion }}</div>
-    <div class="anno-title">
-      {{ annoData.title }}
-    </div>
-    <div class="anno-subtitle">
-      {{ parseText(annoData.subtitle) }}
-    </div>
+    <div class="anno-title">{{ annoData.title }}</div>
+    <div class="anno-subtitle">{{ parseText(annoData.subtitle) }}</div>
    <div class="anno-content">
      <TaParser :data="annoData" />
    </div>
@@ -23,29 +13,21 @@
 </template>
 <script lang="ts" setup>
 import { app, webviewWindow } from "@tauri-apps/api";
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";

 import TaParser from "../components/anno/ta-parser.vue";
 import TPinWin from "../components/app/t-pinWin.vue";
 import TShareBtn from "../components/app/t-shareBtn.vue";
 import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import ToLoading from "../components/overlay/to-loading.vue";
+import showLoading from "../components/func/loading.js";
 import { useAppStore } from "../store/modules/app.js";
 import TGLogger from "../utils/TGLogger.js";
 import { createTGWindow } from "../utils/TGWindow.js";
 import { AnnoLang, AnnoServer } from "../web/request/getAnno.js";
 import TGRequest from "../web/request/TGRequest.js";

-// loading
-const loading = ref<boolean>(true);
-const loadShare = ref<boolean>(false);
-const loadingTitle = ref<string>("正在加载");
-const loadingSub = ref<string>();
-const loadingEmpty = ref<boolean>(false);
-
-// share
-const annoRef = ref<HTMLElement | null | undefined>();
+const annoRef = ref<HTMLElement>(<HTMLElement>{});
 const annoTitle = ref<string>("");

 // 数据
@@ -57,19 +39,17 @@ const appVersion = ref<string>();
 const annoData = ref<TGApp.BBS.Announcement.ContentItem | undefined>();

 onMounted(async () => {
+  showLoading.start("正在加载公告数据...");
  appVersion.value = await app.getVersion();
-  // 检查数据
  if (!annoId || !region) {
-    loadingEmpty.value = true;
-    loadingTitle.value = "未找到数据";
+    showLoading.empty("未找到数据", "公告不存在或解析失败");
    await TGLogger.Error("[t-anno.vue] 未找到数据");
    return;
  }
-  // 获取数据
-  loadingTitle.value = "正在获取数据...";
+  showLoading.update("正在获取数据...", `公告ID:${annoId}`);
  try {
    annoData.value = await TGRequest.Anno.getContent(annoId, region, lang);
-    loadingTitle.value = "正在渲染数据...";
+    showLoading.update("正在渲染数据...", `公告ID：${annoId}`);
    annoTitle.value = `Anno_${annoId}`;
    await webviewWindow
      .getCurrentWebviewWindow()
@@ -79,26 +59,14 @@ onMounted(async () => {
    if (error instanceof Error)
      await TGLogger.Error(`[t-anno.vue][${annoId}] ${error.name}：${error.message}`);
    else console.error(error);
-    loadingEmpty.value = true;
-    loadingTitle.value = "公告不存在或解析失败";
+    showLoading.empty("未找到数据", "公告不存在或解析失败");
    await webviewWindow.getCurrentWebviewWindow().setTitle(`Anno_${annoId} Parsing Error`);
    return;
  }
  // 打开 json
  const isDev = useAppStore().devMode ?? false;
  if (isDev) await createAnnoJson(annoId, region, lang);
-  loading.value = false;
-});
-
-watch(loadShare, (value) => {
-  if (value) {
-    loadingTitle.value = "正在生成分享图片";
-    loadingSub.value = `${annoTitle.value}.png`;
-    loading.value = true;
-  } else {
-    loadingSub.value = "";
-    loading.value = false;
-  }
+  showLoading.end();
 });

 function parseText(title: string): string {
--- a/src/views/t-post-json.vue
+++ b/src/views/t-post-json.vue
@@ -1,6 +1,5 @@
 <template>
  <TSwitchTheme />
-  <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" />
  <div class="post-json">
    <div class="post-title">帖子返回内容 JSON</div>
    <JsonViewer :value="jsonData" copyable boxed />
@@ -14,33 +13,25 @@ import JsonViewer from "vue-json-viewer";
 import { useRoute } from "vue-router";

 import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import ToLoading from "../components/overlay/to-loading.vue";
+import showLoading from "../components/func/loading.js";
 import Mys from "../plugins/Mys/index.js";
 import TGLogger from "../utils/TGLogger.js";

-// loading
-const loading = ref<boolean>(true);
-const loadingTitle = ref<string>("正在加载");
-const loadingEmpty = ref<boolean>(false);
-
-// 数据
 const postId = Number(useRoute().params.post_id);
 let jsonData = reactive<TGApp.Plugins.Mys.Post.FullData>(<TGApp.Plugins.Mys.Post.FullData>{});
 let parseData = reactive<TGApp.Plugins.Mys.SctPost.Base[]>([]);
 const isEmpty = ref<boolean>(false);

 onMounted(async () => {
+  showLoading.start(`正在获取帖子数据...`);
  if (!postId) {
-    loadingEmpty.value = true;
-    loadingTitle.value = "错误的 POST ID！";
+    showLoading.empty("错误的帖子ID！");
    return;
  }
-  loadingTitle.value = "正在获取数据...";
  try {
    jsonData = await Mys.Post.getPostFull(postId);
  } catch (e) {
-    loadingTitle.value = "获取数据失败";
-    loadingEmpty.value = true;
+    showLoading.empty("获取数据失败", `帖子ID:${postId}`);
    await TGLogger.Error(`[${postId}]获取帖子数据失败：${e}`);
    return;
  }
@@ -55,7 +46,7 @@ onMounted(async () => {
    }
    console.warn(`[${postId}]解析帖子数据失败：${err}`);
  }
-  loading.value = false;
+  showLoading.end();
 });
 </script>
 <style lang="css" scoped>
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -2,14 +2,8 @@
  <TSwitchTheme />
  <TPinWin />
  <TbCollect :model-value="postId" :data="postData" />
-  <TShareBtn
-    v-show="!loadingEmpty"
-    v-model="postRef"
-    v-model:loading="loadShare"
-    :title="shareTitle"
-  />
+  <TShareBtn v-model="postRef" :title="shareTitle" />
  <TprMain :gid="postData.post.game_id" :post-id="postData.post.post_id" v-if="postData" />
-  <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" :subtitle="loadingSub" />
  <div class="tp-post-body" v-if="postData">
    <div class="tp-post-info">
      <div class="tp-post-version">
@@ -93,13 +87,13 @@
 import { app } from "@tauri-apps/api";
 import { webviewWindow } from "@tauri-apps/api";
 import { emit } from "@tauri-apps/api/event";
-import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import { useRoute } from "vue-router";

 import TPinWin from "../components/app/t-pinWin.vue";
 import TShareBtn from "../components/app/t-shareBtn.vue";
 import TSwitchTheme from "../components/app/t-switchTheme.vue";
-import ToLoading from "../components/overlay/to-loading.vue";
+import showLoading from "../components/func/loading.js";
 import TbCollect from "../components/post/tb-collect.vue";
 import TpAvatar from "../components/post/tp-avatar.vue";
 import TpParser from "../components/post/tp-parser.vue";
@@ -112,13 +106,6 @@ import TGLogger from "../utils/TGLogger.js";
 import { createTGWindow } from "../utils/TGWindow.js";
 import TGConstant from "../web/constant/TGConstant.js";

-// loading
-const loading = ref<boolean>(true);
-const loadShare = ref<boolean>(false);
-const loadingTitle = ref<string>("正在加载");
-const loadingSub = ref<string>();
-const loadingEmpty = ref<boolean>(false);
-
 // share
 const postRef = ref<HTMLElement>(<HTMLElement>{});
 const shareTitle = ref<string>("");
@@ -142,20 +129,19 @@ function getGameIcon(gameId: number): string {
 }

 onMounted(async () => {
+  showLoading.start(`正在加载帖子数据...`);
  appVersion.value = await app.getVersion();
  // 检查数据
  if (!postId) {
-    loadingEmpty.value = true;
-    loadingTitle.value = "未找到数据";
+    showLoading.empty("未找到数据", "PostID 不存在");
    await webviewWindow.getCurrentWebviewWindow().setTitle("未找到数据");
    await TGLogger.Error("[t-post][onMounted] PostID 不存在");
    return;
  }
-  // 获取数据
-  loadingTitle.value = "正在获取数据...";
+  showLoading.update("正在获取数据...", `帖子ID: ${postId}`);
  try {
    postData.value = await Mys.Post.getPostFull(postId);
-    loadingTitle.value = "正在渲染数据...";
+    showLoading.update("正在渲染数据...", `帖子ID: ${postId}`);
    renderPost.value = getRenderPost(postData.value);
    shareTitle.value = `Post_${postId}`;
    await webviewWindow
@@ -164,14 +150,12 @@ onMounted(async () => {
  } catch (error) {
    if (error instanceof Error) {
      await TGLogger.Error(`[t-post][${postId}] ${error.name}: ${error.message}`);
-      loadingTitle.value = error.name;
-      loadingSub.value = error.message;
+      showLoading.update(error.name, error.message, true);
    } else {
      console.error(error);
-      loadingTitle.value = "帖子不存在或解析失败";
-      loadingSub.value = "请检查帖子是否存在或者是否为合法的帖子";
+      await TGLogger.Error(`[t-post][${postId}] 未知错误${JSON.stringify(error)}`);
+      showLoading.empty("帖子不存在或解析失败", "请检查帖子是否存在或者是否为合法的帖子");
    }
-    loadingEmpty.value = true;
    await webviewWindow.getCurrentWebviewWindow().setTitle(`Post_${postId} Parsing Error`);
    return;
  }
@@ -189,28 +173,9 @@ onMounted(async () => {
  }
  shareTimeTimer.value = setInterval(() => (shareTime.value = Math.floor(Date.now() / 1000)), 1000);
  postRef.value = <HTMLElement>document.querySelector(".tp-post-body");
-  loading.value = false;
+  showLoading.end();
 });

-watch(
-  () => loadShare.value,
-  async () => {
-    if (!loadShare.value) {
-      loadingSub.value = "";
-      loading.value = false;
-      await TGLogger.Info(
-        `[t-post.vue][${postId}][share] 生成分享图片完成：${shareTitle.value}.png`,
-      );
-      return;
-    }
-    shareTime.value = Math.floor(Date.now() / 1000);
-    loadingTitle.value = "正在生成分享图片";
-    loadingSub.value = `${shareTitle.value}.png`;
-    loading.value = true;
-    await TGLogger.Info(`[t-post.vue][${postId}][share] 生成分享图片：${shareTitle.value}.png`);
-  },
-);
-
 async function toTopic(topic: TGApp.Plugins.Mys.Topic.Info): Promise<void> {
  const gid = postData.value?.post.game_id ?? topic.game_id;
  await emit("active_deep_link", `router?path=/posts/${gid}/${topic.id}`);