diff --git a/src/components/app/t-shareBtn.vue b/src/components/app/t-shareBtn.vue
index 7a535b21..cf023e93 100644
--- 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>
diff --git a/src/components/config/tc-userBadge.vue b/src/components/config/tc-userBadge.vue
index ffaa2856..26f29107 100644
--- 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("成功添加用户!");
 }
 
diff --git a/src/components/home/t-calendar.vue b/src/components/home/t-calendar.vue
index 9e9f7f3f..b8436dc0 100644
--- 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>();
diff --git a/src/components/overlay/to-loading.vue b/src/components/overlay/to-loading.vue
deleted file mode 100644
index 52b1f881..00000000
--- a/src/components/overlay/to-loading.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index a2a0390c..90960f75 100644
--- 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];
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index 595a9881..05bd3215 100644
--- 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}] 生成分享图片成功`);
 }
diff --git a/src/pages/User/Combat.vue b/src/pages/User/Combat.vue
index 1ba6ae44..cae59626 100644
--- 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>
diff --git a/src/pages/User/Gacha.vue b/src/pages/User/Gacha.vue
index f407b4cf..d60de271 100644
--- 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} 条祈愿数据`,
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index c2c13262..560cc02a 100644
--- 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}] 生成分享图片成功`);
 }
 
diff --git a/src/pages/WIKI/Abyss.vue b/src/pages/WIKI/Abyss.vue
index f81d5f6f..10ae4a8b 100644
--- 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>> {
diff --git a/src/pages/common/Achievements.vue b/src/pages/common/Achievements.vue
index bceb5436..ef808a64 100644
--- 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);
diff --git a/src/pages/common/Announcements.vue b/src/pages/common/Announcements.vue
index ce145c87..00b86af3 100644
--- 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 {
diff --git a/src/pages/common/Config.vue b/src/pages/common/Config.vue
index a903575b..18bb64a8 100644
--- 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 {
diff --git a/src/pages/common/Home.vue b/src/pages/common/Home.vue
index e3621354..550385ad 100644
--- 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;
-  }
-}
-
-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 = "";
+    showLoading.end();
   }
 }
 
-onUnmounted(() => {
-  components.value = [];
-});
+onUnmounted(() => (components.value = []));
 </script>
 <style lang="css" scoped>
 .home-container {
diff --git a/src/pages/common/News.vue b/src/pages/common/News.vue
index b148a5f9..c6992a0c 100644
--- 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> {
diff --git a/src/pages/common/PostCollect.vue b/src/pages/common/PostCollect.vue
index 38f7f266..1b69ed85 100644
--- 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}]`);
diff --git a/src/pages/common/PostForum.vue b/src/pages/common/PostForum.vue
index 40387761..8e6447b6 100644
--- 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();
 }
 
 // 查询帖子
diff --git a/src/pages/common/PostTopic.vue b/src/pages/common/PostTopic.vue
index 17e69e34..632320df 100644
--- 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} 条帖子`);
 }
 
diff --git a/src/types/Component/Loading.d.ts b/src/types/Component/Loading.d.ts
deleted file mode 100644
index 4e9a2962..00000000
--- a/src/types/Component/Loading.d.ts
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/src/utils/dataBS.ts b/src/utils/dataBS.ts
index 5ebd5373..39a175b2 100644
--- 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("祈愿数据恢复失败");
diff --git a/src/views/t-anno-json.vue b/src/views/t-anno-json.vue
index 6b45843b..37620919 100644
--- 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>
diff --git a/src/views/t-anno.vue b/src/views/t-anno.vue
index 3945f74e..7821d5fc 100644
--- 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 {
diff --git a/src/views/t-post-json.vue b/src/views/t-post-json.vue
index 8363f823..f907ea8a 100644
--- 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>
diff --git a/src/views/t-post.vue b/src/views/t-post.vue
index 62385ed4..8e5b59da 100644
--- 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}`);