From ac6dbe0cdfb02aece98527b6dee5afd59e29f8f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Thu, 14 Nov 2024 18:01:38 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20showSnackbar=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .npmrc                                        |   1 -
 eslint.config.js => eslint.config.mjs         |   0
 src/App.vue                                   |  25 +-
 src/components/app/t-pinWin.vue               |   3 +-
 src/components/config/tc-dataDir.vue          |  62 +++--
 src/components/config/tc-gameBadge.vue        |  14 +-
 src/components/config/tc-info.vue             |   5 +-
 src/components/config/tc-userBadge.vue        |  70 +++---
 src/components/func/confirm.vue               |  61 ++---
 src/components/func/snackbar.ts               |  43 +++-
 src/components/func/snackbar.vue              |  47 ++--
 src/components/gachaRecord/gro-history.vue    |  24 +-
 src/components/home/t-pool.vue                |  12 +-
 src/components/home/t-position.vue            |   6 +-
 src/components/main/t-gamenav.vue             |  26 +--
 src/components/overlay/to-arcBrith.vue        |   9 +-
 src/components/overlay/to-channel.vue         |   5 +-
 src/components/overlay/to-collectPost.vue     |  41 +---
 src/components/overlay/to-livecode.vue        |   2 +-
 src/components/overlay/to-postCollect.vue     |  66 ++----
 src/components/post/tb-collect.vue            |  25 +-
 src/components/post/to-postSearch.vue         |  12 +-
 src/components/post/tp-emoticon.vue           |   4 +-
 src/components/post/tp-linkCard.vue           |   6 +-
 src/components/post/tp-text.vue               |   4 +-
 src/components/post/tp-uid.vue                |   2 +-
 src/components/post/tp-vod.vue                |   2 +-
 src/components/post/tpo-collection.vue        |  12 +-
 src/components/post/tpo-image.vue             |  22 +-
 src/components/post/tpo-lottery.vue           |   5 +-
 src/components/postReply/tpr-debug.vue        |  15 +-
 src/components/postReply/tpr-main.vue         |  17 +-
 src/components/postReply/tpr-reply.vue        |  19 +-
 src/components/userAchi/tua-achi-list.vue     |  15 +-
 src/components/userAchi/tua-achi.vue          |  16 +-
 src/components/userAchi/tua-series.vue        |   5 +-
 src/components/wiki/twc-character.vue         |   6 +-
 src/components/wiki/twc-materials.vue         |  22 +-
 src/components/wiki/twc-weapon.vue            |   6 +-
 src/pages/User/Abyss.vue                      |  52 ++---
 src/pages/User/Characters.vue                 |  40 ++--
 src/pages/User/Combat.vue                     |  26 +--
 src/pages/User/Gacha.vue                      |  82 +++----
 src/pages/User/Record.vue                     |  14 +-
 src/pages/WIKI/Character.vue                  |  10 +-
 src/pages/WIKI/Material.vue                   |  13 +-
 src/pages/WIKI/Namecard.vue                   |  20 +-
 src/pages/WIKI/Weapon.vue                     |  10 +-
 src/pages/common/Achievements.vue             |  60 ++---
 src/pages/common/Announcements.vue            |  38 +--
 src/pages/common/Config.vue                   | 153 ++++---------
 src/pages/common/Home.vue                     |  15 +-
 src/pages/common/News.vue                     |  15 +-
 src/pages/common/PostCollect.vue              | 216 +++++-------------
 src/pages/common/Posts.vue                    |  20 +-
 src/plugins/Mys/index.ts                      |   5 +-
 src/plugins/Mys/request/doCaptchaLogin.ts     |   5 +-
 src/plugins/Mys/request/getGachaData.ts       |  23 --
 .../request/{getPositionData.ts => obcReq.ts} |  53 +++--
 src/store/modules/user.ts                     |   8 +-
 src/types/Component/Snackbar.d.ts             |   8 +-
 src/utils/TGClient.ts                         |   9 +-
 src/utils/TGShare.ts                          |  10 +-
 src/utils/TGShell.ts                          |   8 +-
 src/utils/UIAF.ts                             |  16 +-
 src/utils/UIGF.ts                             |  17 +-
 src/utils/dataBS.ts                           |  20 +-
 src/utils/linkParser.ts                       |   5 +-
 tsconfig.json                                 |   2 +-
 69 files changed, 613 insertions(+), 1097 deletions(-)
 delete mode 100644 .npmrc
 rename eslint.config.js => eslint.config.mjs (100%)
 delete mode 100644 src/plugins/Mys/request/getGachaData.ts
 rename src/plugins/Mys/request/{getPositionData.ts => obcReq.ts} (59%)

diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index e5e442ba..00000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.mjs
similarity index 100%
rename from eslint.config.js
rename to eslint.config.mjs
diff --git a/src/App.vue b/src/App.vue
index e9e92973..bce60f0c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,7 +60,7 @@ onBeforeMount(async () => {
 async function checkResize(): Promise<void> {
   const screen = await TauriWindow.currentMonitor();
   if (screen === null) {
-    showSnackbar({ text: "获取屏幕信息失败！", color: "error", timeout: 3000 });
+    showSnackbar.error("获取屏幕信息失败！", 3000);
     return;
   }
   const windowCur = await webviewWindow.getCurrentWebviewWindow();
@@ -153,7 +153,7 @@ async function checkUserLoad(): Promise<void> {
   // 检测用户数据
   const uidDB = await TSUserAccount.account.getAllUid();
   if (uidDB.length === 0 && appStore.isLogin) {
-    showSnackbar({ text: "未检测到可用UID，请重新登录!", color: "warn" });
+    showSnackbar.warn("未检测到可用UID，请重新登录！");
     appStore.isLogin = false;
     return;
   }
@@ -164,7 +164,7 @@ async function checkUserLoad(): Promise<void> {
   }
   const curAccount = await TSUserAccount.account.getAccount(userStore.uid.value);
   if (curAccount === false) {
-    showSnackbar({ text: `未获取到${userStore.uid.value}账号数据`, color: "error" });
+    showSnackbar.error(`未获取到${userStore.uid.value}的账号数据！`);
     await TGLogger.Error(`[App][listenOnInit] 获取${userStore.uid.value}账号数据失败`);
     await new Promise((resolve) => setTimeout(resolve, 1000));
   } else {
@@ -173,7 +173,7 @@ async function checkUserLoad(): Promise<void> {
   }
   const curGameAccount = await TSUserAccount.game.getCurAccount(userStore.uid.value);
   if (curGameAccount === false) {
-    showSnackbar({ text: `未获取到${userStore.uid.value}游戏数据`, color: "error" });
+    showSnackbar.error(`未获取到${userStore.uid.value}的游戏数据！`);
     await TGLogger.Error(`[App][listenOnInit] 获取${userStore.uid.value}游戏数据失败`);
     await new Promise((resolve) => setTimeout(resolve, 1000));
   } else {
@@ -184,13 +184,11 @@ async function checkUserLoad(): Promise<void> {
 async function getDeepLink(): Promise<UnlistenFn> {
   return await event.listen("active_deep_link", async (e: Event<string>) => {
     const windowGet = new webviewWindow.WebviewWindow("TeyvatGuide");
-    if (await windowGet.isMinimized()) {
-      await windowGet.unminimize();
-    }
+    if (await windowGet.isMinimized()) await windowGet.unminimize();
     await windowGet.setFocus();
     const payload = parseDeepLink(e.payload);
     if (payload === false) {
-      showSnackbar({ text: "无效的 deep link！", color: "error", timeout: 3000 });
+      showSnackbar.error("无效的 deep link！", 3000);
       await TGLogger.Error(`[App][getDeepLink] 无效的 deep link！ ${JSON.stringify(e.payload)}`);
       return;
     }
@@ -224,7 +222,7 @@ async function handleDeepLink(payload: string): Promise<void> {
   if (payload.startsWith("router?path=")) {
     const routerPath = payload.replace("router?path=", "");
     if (router.currentRoute.value.path === routerPath) {
-      showSnackbar({ text: "已在当前页面！", color: "warn", timeout: 3000 });
+      showSnackbar.warn("已在当前页面！", 3000);
       return;
     }
     await router.push(routerPath);
@@ -244,6 +242,7 @@ async function toUIAF(link: string) {
 
 // 检测更新
 async function checkUpdate(): Promise<void> {
+  // @ts-expect-error-next-line
   const isProdEnv = import.meta.env.MODE === "production";
   const needUpdate = await TGSqlite.checkUpdate();
   if (needUpdate && isProdEnv) {
@@ -253,16 +252,12 @@ async function checkUpdate(): Promise<void> {
       text: "是否更新数据库数据？（请确保成就数据已导出）",
     });
     if (!confirm) {
-      showSnackbar({
-        text: "请到设置页手动更新数据库！",
-        color: "error",
-        timeout: 3000,
-      });
+      showSnackbar.error("请到设置页手动更新数据库！", 3000);
       return;
     }
     appStore.buildTime = getBuildTime();
     await TGSqlite.update();
-    showSnackbar({ text: "数据库已更新！", color: "success", timeout: 3000 });
+    showSnackbar.success("数据库已更新！", 3000);
     window.open("https://app.btmuli.ink/docs/TeyvatGuide/changelogs.html");
   }
 }
diff --git a/src/components/app/t-pinWin.vue b/src/components/app/t-pinWin.vue
index f684acb3..88dace1d 100644
--- a/src/components/app/t-pinWin.vue
+++ b/src/components/app/t-pinWin.vue
@@ -24,8 +24,7 @@ onMounted(async () => {
 async function switchPin(): Promise<void> {
   isPined.value = !isPined.value;
   await getCurrentWindow().setAlwaysOnTop(isPined.value);
-  const text = isPined.value ? "已将窗口置顶！" : "已经取消窗口置顶!";
-  showSnackbar({ text: text, color: "success" });
+  showSnackbar.success(isPined.value ? "已将窗口置顶！" : "已经取消窗口置顶!");
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/components/config/tc-dataDir.vue b/src/components/config/tc-dataDir.vue
index 065adb62..c55471c0 100644
--- a/src/components/config/tc-dataDir.vue
+++ b/src/components/config/tc-dataDir.vue
@@ -10,9 +10,9 @@
       </template>
       <template #append>
         <div class="config-opers">
-          <v-icon @click="confirmCUD()" title="修改用户数据目录"> mdi-pencil </v-icon>
-          <v-icon @click="openPath('user')" title="打开用户数据目录"> mdi-folder-open </v-icon>
-          <v-icon @click="copyPath('user')" title="复制用户数据目录路径"> mdi-content-copy </v-icon>
+          <v-icon @click="confirmCUD()" title="修改用户数据目录"> mdi-pencil</v-icon>
+          <v-icon @click="openPath('user')" title="打开用户数据目录"> mdi-folder-open</v-icon>
+          <v-icon @click="copyPath('user')" title="复制用户数据目录路径"> mdi-content-copy</v-icon>
         </div>
       </template>
     </v-list-item>
@@ -24,8 +24,8 @@
       </template>
       <template #append>
         <div class="config-opers">
-          <v-icon @click="openPath('db')" title="打开数据库目录"> mdi-folder-open </v-icon>
-          <v-icon @click="copyPath('db')" title="复制数据库目录路径"> mdi-content-copy </v-icon>
+          <v-icon @click="openPath('db')" title="打开数据库目录"> mdi-folder-open</v-icon>
+          <v-icon @click="copyPath('db')" title="复制数据库目录路径"> mdi-content-copy</v-icon>
         </div>
       </template>
     </v-list-item>
@@ -41,9 +41,9 @@
       </template>
       <template #append>
         <div class="config-opers">
-          <v-icon @click="confirmCGD()" title="修改游戏安装目录"> mdi-pencil </v-icon>
-          <v-icon @click="openPath('game')" title="打开游戏安装目录"> mdi-folder-open </v-icon>
-          <v-icon @click="copyPath('game')" title="复制游戏安装目录"> mdi-content-copy </v-icon>
+          <v-icon @click="confirmCGD()" title="修改游戏安装目录"> mdi-pencil</v-icon>
+          <v-icon @click="openPath('game')" title="打开游戏安装目录"> mdi-folder-open</v-icon>
+          <v-icon @click="copyPath('game')" title="复制游戏安装目录"> mdi-content-copy</v-icon>
         </div>
       </template>
     </v-list-item>
@@ -55,9 +55,9 @@
       </template>
       <template #append>
         <div class="config-opers">
-          <v-icon @click="confirmCLD()" title="清理日志文件"> mdi-delete </v-icon>
-          <v-icon @click="openPath('log')" title="打开日志目录"> mdi-folder-open </v-icon>
-          <v-icon @click="copyPath('log')" title="复制日志目录路径"> mdi-content-copy </v-icon>
+          <v-icon @click="confirmCLD()" title="清理日志文件"> mdi-delete</v-icon>
+          <v-icon @click="openPath('log')" title="打开日志目录"> mdi-folder-open</v-icon>
+          <v-icon @click="copyPath('log')" title="复制日志目录路径"> mdi-content-copy</v-icon>
         </div>
       </template>
     </v-list-item>
@@ -94,7 +94,7 @@ onMounted(async () => {
     message += "日志路径 ";
   }
   if (message !== "") {
-    showSnackbar({ text: `${message}已更新!`, color: "success" });
+    showSnackbar.success(`${message}已更新!`);
   }
 });
 
@@ -102,7 +102,7 @@ async function confirmCUD(): Promise<void> {
   const oriDir = appStore.userDir.value;
   const check = await showConfirm({ title: "确认修改用户数据路径吗？" });
   if (!check) {
-    showSnackbar({ color: "cancel", text: "已取消修改" });
+    showSnackbar.cancel("已取消修改");
     return;
   }
   const dir: string | null = await open({
@@ -111,30 +111,28 @@ async function confirmCUD(): Promise<void> {
     multiple: false,
   });
   if (dir === null) {
-    showSnackbar({ color: "error", text: "路径不能为空!" });
+    showSnackbar.warn("路径不能为空!");
     return;
   }
   if (dir === oriDir) {
-    showSnackbar({ color: "warn", text: "路径未修改!" });
+    showSnackbar.warn("路径未修改!");
     return;
   }
   appStore.userDir.value = dir;
   await TGSqlite.saveAppData("userDir", dir);
   await backUpUserData(dir);
-  showSnackbar({ text: "已重新备份数据!", color: "success" });
+  showSnackbar.success("已修改用户数据路径!");
   const confirm = await showConfirm({ title: "是否删除原用户数据目录？", text: "删除后不可恢复!" });
   if (confirm) {
     await remove(oriDir, { recursive: true });
-    showSnackbar({ text: "已删除原用户数据目录!", color: "success" });
+    showSnackbar.success("已删除原用户数据目录!");
   }
-  setTimeout(() => {
-    window.location.reload();
-  }, 4000);
+  setTimeout(() => window.location.reload(), 4000);
 }
 
 async function confirmCGD(): Promise<void> {
   if (platform() !== "windows") {
-    showSnackbar({ text: "不支持的平台！", color: "warning" });
+    showSnackbar.warn("不支持的平台！");
     return;
   }
   const oriEmpty = appStore.gameDir.value === "未设置";
@@ -143,7 +141,7 @@ async function confirmCGD(): Promise<void> {
     text: oriEmpty ? "请选择启动器所在目录" : `当前：${appStore.gameDir.value}`,
   });
   if (!editConfirm) {
-    showSnackbar({ text: oriEmpty ? "取消设置启动器目录" : "取消修改启动器目录", color: "cancel" });
+    showSnackbar.cancel(oriEmpty ? "已取消设置" : "已取消修改");
     return;
   }
   const dir: string | null = await open({
@@ -152,20 +150,20 @@ async function confirmCGD(): Promise<void> {
     multiple: false,
   });
   if (dir === null) {
-    showSnackbar({ text: "路径不能为空!", color: "error" });
+    showSnackbar.warn("路径不能为空!");
     return;
   }
   if (!oriEmpty && appStore.gameDir.value === dir) {
-    showSnackbar({ text: "路径未修改！", color: "warn" });
+    showSnackbar.warn("路径未修改！");
     return;
   }
   // 校验是否存在游戏本体
   if (!(await exists(`${dir}${path.sep()}YuanShen.exe`))) {
-    showSnackbar({ text: "未检测到游戏本体", color: "error" });
+    showSnackbar.warn("未检测到游戏本体");
     return;
   }
   appStore.gameDir.value = dir;
-  showSnackbar({ text: oriEmpty ? "成功设置游戏目录" : "成功修改游戏目录" });
+  showSnackbar.success(oriEmpty ? "成功设置游戏目录" : "成功修改游戏目录");
 }
 
 // 判断是否超过一周
@@ -182,7 +180,7 @@ async function confirmCLD(): Promise<void> {
     text: "将保留一周内的日志文件",
   });
   if (!check) {
-    showSnackbar({ color: "cancel", text: "已取消清理" });
+    showSnackbar.cancel("已取消清理");
     return;
   }
   const logDir = appStore.logDir.value;
@@ -196,14 +194,14 @@ async function confirmCLD(): Promise<void> {
     return isOverWeek(date);
   });
   if (delFiles.length < 1) {
-    showSnackbar({ color: "warn", text: "无需清理!" });
+    showSnackbar.warn("无需清理!");
     return;
   }
   for (const file of delFiles) {
     const filePath = `${logDir}/${file.name}`;
     await remove(filePath);
   }
-  showSnackbar({ text: `已清理 ${delFiles.length} 个日志文件!` });
+  showSnackbar.success(`已清理 ${delFiles.length} 个日志文件!`);
 }
 
 function copyPath(type: "db" | "user" | "log" | "game"): void {
@@ -223,14 +221,14 @@ function copyPath(type: "db" | "user" | "log" | "game"): void {
       break;
     case "game":
       if (appStore.gameDir.value === "未设置") {
-        showSnackbar({ text: "未设置游戏目录！", color: "warn" });
+        showSnackbar.warn("未设置游戏目录！");
         return;
       }
       targetPath = appStore.gameDir.value;
       targetName = "游戏安装目录";
   }
   navigator.clipboard.writeText(targetPath);
-  showSnackbar({ text: `${targetName}路径已复制!` });
+  showSnackbar.success(`${targetName}路径已复制!`);
 }
 
 async function openPath(type: "db" | "user" | "log" | "game"): Promise<void> {
@@ -247,7 +245,7 @@ async function openPath(type: "db" | "user" | "log" | "game"): Promise<void> {
       break;
     case "game":
       if (appStore.gameDir.value === "未设置") {
-        showSnackbar({ text: "未设置游戏目录！", color: "warn" });
+        showSnackbar.warn("未设置游戏目录！");
         return;
       }
       targetPath = appStore.gameDir.value;
diff --git a/src/components/config/tc-gameBadge.vue b/src/components/config/tc-gameBadge.vue
index 07464e64..54daf4a0 100644
--- a/src/components/config/tc-gameBadge.vue
+++ b/src/components/config/tc-gameBadge.vue
@@ -34,32 +34,32 @@ const account = computed<TGApp.Sqlite.Account.Game>(() => userStore.account.valu
 
 async function tryPlayGame(): Promise<void> {
   if (!userStore.uid.value || !userStore.cookie.value) {
-    showSnackbar({ text: "请先登录！", color: "warn" });
+    showSnackbar.warn("请先登录！");
     return;
   }
   if (account.value.isOfficial === 0) {
-    showSnackbar({ text: "仅支持官服用户启动！", color: "warn" });
+    showSnackbar.warn("仅支持官服用户启动！");
     return;
   }
   if (appStore.gameDir.value === "未设置") {
-    showSnackbar({ text: "未设置游戏安装目录！", color: "warn" });
+    showSnackbar.warn("未设置游戏安装目录！");
     return;
   }
   const gamePath = `${appStore.gameDir.value}${path.sep()}YuanShen.exe`;
   if (!(await exists(gamePath))) {
-    showSnackbar({ text: "未检测到原神本体应用！", color: "warn" });
+    showSnackbar.warn("未检测到原神本体应用！");
     return;
   }
   const resp = await TGRequest.User.getAuthTicket(account.value, userStore.cookie.value);
   if (typeof resp !== "string") {
-    showSnackbar({ text: `[${resp.retcode}] ${resp.message}`, color: "error" });
+    showSnackbar.error(`[${resp.retcode}] ${resp.message}`);
     await TGLogger.Error(
       `[config][gameBadge] 尝试获取authTicket失败，当前用户：${account.value.uid}-${account.value.gameUid}`,
     );
     await TGLogger.Error(`[config][gameBadge] resp: ${JSON.stringify(resp)}`);
     return;
   }
-  showSnackbar({ text: `成功获取ticket:${resp}，正在启动应用...` });
+  showSnackbar.success(`成功获取ticket:${resp}，正在启动应用...`);
   const cmd = Command.create("exec-sh", [`&"${gamePath}" login_auth_ticket=${resp}`], {
     cwd: appStore.gameDir.value,
     encoding: "utf-8",
@@ -69,7 +69,7 @@ async function tryPlayGame(): Promise<void> {
   if (result.stderr) {
     await TGLogger.Error(`[config][gameBadge] 启动游戏本体失败！`);
     console.error(result.stderr);
-    showSnackbar({ text: `[config][gameBadge] ${result.stderr}`, color: "error" });
+    showSnackbar.error(`[${result.code}] ${result.stderr}`);
   }
 }
 </script>
diff --git a/src/components/config/tc-info.vue b/src/components/config/tc-info.vue
index f6d123ae..dffe26a3 100644
--- a/src/components/config/tc-info.vue
+++ b/src/components/config/tc-info.vue
@@ -116,10 +116,7 @@ onMounted(async () => {
   try {
     dbInfo.value = await TGSqlite.getAppData();
   } catch (e) {
-    showSnackbar({
-      text: "加载数据库错误，请重置数据库!",
-      color: "error",
-    });
+    showSnackbar.warn("加载数据库错误，请重置数据库!");
     await TGLogger.Error(`加载数据库错误: ${e}`);
   }
 });
diff --git a/src/components/config/tc-userBadge.vue b/src/components/config/tc-userBadge.vue
index 6126284f..8bf35d28 100644
--- a/src/components/config/tc-userBadge.vue
+++ b/src/components/config/tc-userBadge.vue
@@ -141,17 +141,17 @@ const userInfo = computed<TGApp.App.Account.BriefInfo>(() => {
 async function tryCaptchaLogin(): Promise<void> {
   const phone = await showConfirm({ mode: "input", title: "请输入手机号", text: "+86" });
   if (!phone) {
-    showSnackbar({ color: "cancel", text: "已取消验证码登录" });
+    showSnackbar.cancel("已取消验证码登录");
     return;
   }
   const phoneReg = /^1[3-9]\d{9}$/;
   if (!phoneReg.test(phone)) {
-    showSnackbar({ color: "error", text: "请输入正确的手机号" });
+    showSnackbar.warn("请输入正确的手机号");
     return;
   }
   const actionType = await tryGetCaptcha(phone);
   if (!actionType) return;
-  showSnackbar({ text: `已发送验证码到 ${phone}` });
+  showSnackbar.success(`已发送验证码到 ${phone}`);
   const captcha = await showConfirm({
     mode: "input",
     title: "请输入验证码",
@@ -159,7 +159,7 @@ async function tryCaptchaLogin(): Promise<void> {
     otcancel: false,
   });
   if (!captcha) {
-    showSnackbar({ color: "error", text: "输入验证码为空" });
+    showSnackbar.warn("输入验证码为空");
     return;
   }
   const loginResp = await tryLoginByCaptcha(phone, captcha, actionType);
@@ -177,7 +177,7 @@ async function tryCaptchaLogin(): Promise<void> {
   emits("loadOuter", { show: true, title: "正在获取 LToken" });
   const ltokenRes = await TGRequest.User.bySToken.getLToken(ck.mid, ck.stoken);
   if (typeof ltokenRes !== "string") {
-    showSnackbar({ text: `[${ltokenRes.retcode}]${ltokenRes.message}`, color: "error" });
+    showSnackbar.error(`[${ltokenRes.retcode}]${ltokenRes.message}`);
     await TGLogger.Error(`获取LToken失败：${ltokenRes.retcode}-${ltokenRes.message}`);
     loading.value = false;
     emits("loadOuter", { show: false });
@@ -187,7 +187,7 @@ async function tryCaptchaLogin(): Promise<void> {
   emits("loadOuter", { show: true, title: "正在获取 cookieToken " });
   const cookieTokenRes = await TGRequest.User.bySToken.getCookieToken(ck.mid, ck.stoken);
   if (typeof cookieTokenRes !== "string") {
-    showSnackbar({ text: `[${cookieTokenRes.retcode}]${cookieTokenRes.message}`, color: "error" });
+    showSnackbar.error(`[${cookieTokenRes.retcode}]${cookieTokenRes.message}`);
     await TGLogger.Error(
       `获取CookieToken失败：${cookieTokenRes.retcode}-${cookieTokenRes.message}`,
     );
@@ -199,7 +199,7 @@ async function tryCaptchaLogin(): Promise<void> {
   emits("loadOuter", { show: true, title: "正在获取用户信息" });
   const briefRes = await TGRequest.User.byCookie.getUserInfo(ck.cookie_token, ck.account_id);
   if ("retcode" in briefRes) {
-    showSnackbar({ text: `[${briefRes.retcode}]${briefRes.message}` });
+    showSnackbar.error(`[${briefRes.retcode}]${briefRes.message}`);
     await TGLogger.Error(`获取用户数据失败：${briefRes.retcode}-${briefRes.message}`);
     loading.value = false;
     emits("loadOuter", { show: false });
@@ -227,13 +227,13 @@ async function tryCaptchaLogin(): Promise<void> {
   if (!Array.isArray(gameRes)) {
     loading.value = false;
     emits("loadOuter", { show: false });
-    showSnackbar({ text: `[${gameRes.retcode}]${gameRes.message}` });
+    showSnackbar.error(`[${gameRes.retcode}]${gameRes.message}`);
     return;
   }
   await TSUserAccount.game.saveAccounts(briefInfo.uid, gameRes);
   const curAccount = await TSUserAccount.game.getCurAccount(briefInfo.uid);
   if (!curAccount) {
-    showSnackbar({ text: "未检测到游戏账号，请重新刷新", color: "warn" });
+    showSnackbar.warn("未检测到游戏账号，请重新刷新");
     loading.value = false;
     emits("loadOuter", { show: false });
     return;
@@ -241,13 +241,13 @@ async function tryCaptchaLogin(): Promise<void> {
   userStore.account.value = curAccount;
   loading.value = false;
   emits("loadOuter", { show: false });
-  showSnackbar({ text: "成功加载用户数据!" });
+  showSnackbar.success("成功登录!");
 }
 
 async function refreshUser(uid: string) {
   let account = await TSUserAccount.account.getAccount(uid);
   if (!account) {
-    showSnackbar({ text: `未获取到${userStore.uid.value}账号数据，请重新登录!`, color: "error" });
+    showSnackbar.warn(`未获取到${uid}账号数据，请重新登录!`);
     return;
   }
   let ck = account.cookie;
@@ -339,12 +339,12 @@ async function refreshUser(uid: string) {
 
 async function loadAccount(uid: string): Promise<void> {
   if (userStore.uid.value && uid === userStore.uid.value) {
-    showSnackbar({ text: "该账户已经登录，无需切换", color: "warn" });
+    showSnackbar.warn("该账户已经登录，无需切换");
     return;
   }
   const account = await TSUserAccount.account.getAccount(uid);
   if (!account) {
-    showSnackbar({ text: `无法获取${uid}的账号信息`, color: "warn" });
+    showSnackbar.warn(`未找到${uid}的账号信息，请重新登录`);
     return;
   }
   userStore.uid.value = uid;
@@ -352,17 +352,17 @@ async function loadAccount(uid: string): Promise<void> {
   userStore.cookie.value = account.cookie;
   const gameAccount = await TSUserAccount.game.getCurAccount(uid);
   if (!gameAccount) {
-    showSnackbar({ text: `无法获取${uid}的游戏信息`, color: "warn" });
+    showSnackbar.warn(`未找到${uid}的游戏账号信息，请尝试刷新`);
     return;
   }
   userStore.account.value = gameAccount;
-  showSnackbar({ text: `成功切换到用户${uid}` });
+  showSnackbar.success(`成功切换到用户${uid}`);
 }
 
 async function confirmRefreshUser(uid: string): Promise<void> {
   const res = await showConfirm({ title: "确认刷新用户信息吗？", text: "将会重新获取用户信息" });
   if (!res) {
-    showSnackbar({ color: "cancel", text: "已取消刷新" });
+    showSnackbar.cancel("已取消刷新用户信息");
     return;
   }
   await refreshUser(uid);
@@ -377,23 +377,23 @@ async function confirmCopyCookie(): Promise<void> {
     text: "将会复制当前登录的 Cookie",
   });
   if (!res) {
-    showSnackbar({ color: "cancel", text: "已取消复制" });
+    showSnackbar.cancel("已取消复制 Cookie");
     return;
   }
   if (!userStore.cookie.value) {
-    showSnackbar({ color: "error", text: "请先登录" });
+    showSnackbar.warn("请先登录");
     return;
   }
   const ckText = TSUserAccount.account.copy(userStore.cookie.value);
   await navigator.clipboard.writeText(ckText);
-  showSnackbar({ text: "已复制 Cookie!", color: "success" });
+  showSnackbar.success("已复制 Cookie!");
 }
 
 async function tryGetCaptcha(phone: string, aigis?: string): Promise<string | false> {
   const captchaResp = await Mys.User.getCaptcha(phone, aigis);
   if ("retcode" in captchaResp) {
     if (!captchaResp.data || captchaResp.data === "") {
-      showSnackbar({ text: `[${captchaResp.retcode}] ${captchaResp.message}`, color: "error" });
+      showSnackbar.error(`[${captchaResp.retcode}] ${captchaResp.message}`);
       return false;
     }
     const aigisResp: TGApp.Plugins.Mys.CaptchaLogin.CaptchaAigis = JSON.parse(captchaResp.data);
@@ -413,7 +413,7 @@ async function tryLoginByCaptcha(
   const loginResp = await Mys.User.login(phone, captcha, actionType, aigis);
   if ("retcode" in loginResp) {
     if (!loginResp.data || loginResp.data === "") {
-      showSnackbar({ text: `[${loginResp.retcode}] ${loginResp.message}`, color: "error" });
+      showSnackbar.error(`[${loginResp.retcode}] ${loginResp.message}`);
       return false;
     }
     const aigisResp: TGApp.Plugins.Mys.CaptchaLogin.CaptchaAigis = JSON.parse(loginResp.data);
@@ -430,12 +430,12 @@ async function showMenu(): Promise<void> {
 
 async function showAccounts(): Promise<void> {
   if (!userStore.uid.value) {
-    showSnackbar({ text: "未登录!", color: "error" });
+    showSnackbar.warn("未登录!");
     return;
   }
   gameAccounts.value = await TSUserAccount.game.getAccount(userStore.uid.value);
   if (gameAccounts.value.length === 0) {
-    showSnackbar({ text: "未找到账户的游戏数据，请尝试刷新!", color: "warn" });
+    showSnackbar.warn("未找到账户的游戏数据，请尝试刷新!");
     return;
   }
 }
@@ -447,11 +447,11 @@ async function addByCookie(): Promise<void> {
     text: "Cookie:",
   });
   if (!ckInput) {
-    showSnackbar({ text: "已取消Cookie输入", color: "cancel" });
+    showSnackbar.cancel("已取消Cookie输入");
     return;
   }
   if (ckInput === "") {
-    showSnackbar({ text: "请输入Cookie!", color: "warn" });
+    showSnackbar.warn("请输入Cookie!");
     return;
   }
   const ckArr = ckInput.split(";");
@@ -462,7 +462,7 @@ async function addByCookie(): Promise<void> {
     else if (ck.startsWith("stuid=")) ckRes.stuid = ck.substring(6);
   }
   if (ckRes.mid === "" || ckRes.stoken === "" || ckRes.stuid === "") {
-    showSnackbar({ text: "解析Cookie失败", color: "error" });
+    showSnackbar.warn("Cookie格式错误");
     await TGLogger.Error(`解析Cookie失败：${ckInput}`);
     return;
   }
@@ -480,7 +480,7 @@ async function addByCookie(): Promise<void> {
   emits("loadOuter", { show: true, title: "正在获取 LToken" });
   const ltokenRes = await TGRequest.User.bySToken.getLToken(ck.mid, ck.stoken);
   if (typeof ltokenRes !== "string") {
-    showSnackbar({ text: `[${ltokenRes.retcode}]${ltokenRes.message}`, color: "error" });
+    showSnackbar.error(`[${ltokenRes.retcode}]${ltokenRes.message}`);
     await TGLogger.Error(`获取LToken失败：${ltokenRes.retcode}-${ltokenRes.message}`);
     loading.value = false;
     emits("loadOuter", { show: false });
@@ -490,7 +490,7 @@ async function addByCookie(): Promise<void> {
   emits("loadOuter", { show: true, title: "正在获取 cookieToken " });
   const cookieTokenRes = await TGRequest.User.bySToken.getCookieToken(ck.mid, ck.stoken);
   if (typeof cookieTokenRes !== "string") {
-    showSnackbar({ text: `[${cookieTokenRes.retcode}]${cookieTokenRes.message}`, color: "error" });
+    showSnackbar.error(`[${cookieTokenRes.retcode}]${cookieTokenRes.message}`);
     await TGLogger.Error(
       `获取CookieToken失败：${cookieTokenRes.retcode}-${cookieTokenRes.message}`,
     );
@@ -502,7 +502,7 @@ async function addByCookie(): Promise<void> {
   emits("loadOuter", { show: true, title: "正在获取用户信息" });
   const briefRes = await TGRequest.User.byCookie.getUserInfo(ck.cookie_token, ck.account_id);
   if ("retcode" in briefRes) {
-    showSnackbar({ text: `[${briefRes.retcode}]${briefRes.message}` });
+    showSnackbar.error(`[${briefRes.retcode}]${briefRes.message}`);
     await TGLogger.Error(`获取用户数据失败：${briefRes.retcode}-${briefRes.message}`);
     loading.value = false;
     emits("loadOuter", { show: false });
@@ -526,34 +526,34 @@ async function addByCookie(): Promise<void> {
   if (!Array.isArray(gameRes)) {
     loading.value = false;
     emits("loadOuter", { show: false });
-    showSnackbar({ text: `[${gameRes.retcode}]${gameRes.message}` });
+    showSnackbar.error(`[${gameRes.retcode}]${gameRes.message}`);
     return;
   }
   await TSUserAccount.game.saveAccounts(briefInfo.uid, gameRes);
   const curAccount = await TSUserAccount.game.getCurAccount(briefInfo.uid);
   if (!curAccount) {
-    showSnackbar({ text: "未检测到游戏账号，请重新刷新", color: "warn" });
+    showSnackbar.warn("未检测到游戏账号，请重新刷新");
     loading.value = false;
     emits("loadOuter", { show: false });
     return;
   }
   loading.value = false;
   emits("loadOuter", { show: false });
-  showSnackbar({ text: "成功加载用户数据!" });
+  showSnackbar.success("成功添加用户!");
 }
 
 async function clearUser(user: TGApp.App.Account.User): Promise<void> {
   if (user.uid === userStore.uid.value) {
-    showSnackbar({ text: "当前登录用户不许删除！", color: "warn" });
+    showSnackbar.warn("当前登录用户不许删除！");
     return;
   }
   const confirm = await showConfirm({ title: "确认删除", text: "将删除账号及其游戏账号数据" });
   if (!confirm) {
-    showSnackbar({ text: "取消删除用户数据", color: "cancel" });
+    showSnackbar.cancel("已取消删除用户数据");
     return;
   }
   await TSUserAccount.account.deleteAccount(user.uid);
-  showSnackbar({ text: "成功删除用户!", color: "success" });
+  showSnackbar.success("成功删除用户!");
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/components/func/confirm.vue b/src/components/func/confirm.vue
index 4ffe8f6c..e7d42e2f 100644
--- a/src/components/func/confirm.vue
+++ b/src/components/func/confirm.vue
@@ -40,12 +40,7 @@ interface ConfirmProps {
   otcancel?: boolean;
 }
 
-const defaultProp: ConfirmProps = {
-  title: "",
-  text: "",
-  mode: "confirm",
-  otcancel: false,
-};
+const defaultProp: ConfirmProps = { title: "", text: "", mode: "confirm", otcancel: false };
 
 const props = withDefaults(defineProps<ConfirmProps>(), {
   title: "",
@@ -63,25 +58,20 @@ const confirmVal = ref<boolean | string | undefined>();
 const inputVal = ref<string>("");
 const inputEl = useTemplateRef<HTMLInputElement>("inputRef");
 
-watch(show, () => {
-  if (show.value) {
-    showOuter.value = true;
-    setTimeout(() => {
-      showInner.value = true;
-    }, 100);
-  } else {
-    setTimeout(() => {
-      showInner.value = false;
-    }, 100);
-    setTimeout(() => {
-      showOuter.value = false;
-    }, 300);
-  }
-});
+watch(
+  () => show.value,
+  () => {
+    if (show.value) {
+      showOuter.value = true;
+      setTimeout(() => (showInner.value = true), 100);
+      return;
+    }
+    setTimeout(() => (showInner.value = false), 100);
+    setTimeout(() => (showOuter.value = false), 300);
+  },
+);
 
-onMounted(async () => {
-  await displayBox(props);
-});
+onMounted(async () => await displayBox(props));
 
 async function displayBox(
   params: TGApp.Component.Confirm.Params,
@@ -90,26 +80,20 @@ async function displayBox(
   data.text = params.text ?? "";
   data.mode = params.mode ?? "confirm";
   data.otcancel = params.otcancel ?? true;
-  if (params.mode === "input" && params.input) {
-    inputVal.value = params.input;
-  }
+  if (params.mode === "input" && params.input) inputVal.value = params.input;
   show.value = true;
   // 等待确认框关闭，返回关闭后的confirmVal
   return await new Promise<string | boolean | undefined>((resolve) => {
     nextTick(() => {
       if (data.mode === "input") {
         // 等待确认框打开，聚焦输入框
-        setTimeout(() => {
-          inputEl.value?.focus();
-        }, 100);
+        setTimeout(() => inputEl.value?.focus(), 100);
       }
     });
-    watch(show, () => {
-      // 等 0.5s 动画
-      setTimeout(() => {
-        resolve(confirmVal.value);
-      }, 500);
-    });
+    watch(
+      () => show.value,
+      () => setTimeout(() => resolve(confirmVal.value), 500),
+    );
   });
 }
 
@@ -138,11 +122,8 @@ function handleOuter(): void {
   }
 }
 
-defineExpose({
-  displayBox,
-});
+defineExpose({ displayBox });
 </script>
-
 <style scoped>
 .func-confirm-outer-enter-active,
 .func-confirm-outer-leave-active,
diff --git a/src/components/func/snackbar.ts b/src/components/func/snackbar.ts
index 3737ecf1..725e7547 100644
--- a/src/components/func/snackbar.ts
+++ b/src/components/func/snackbar.ts
@@ -1,7 +1,7 @@
 /**
  * @file component func snackbar.ts
  * @description 封装 vuetify 的 snackbar 组件，通过函数调用的方式，简化 snackbar 的使用
- * @since Beta v0.3.4
+ * @since Beta v0.6.3
  */
 
 import type { ComponentInternalInstance, VNode } from "vue";
@@ -35,14 +35,47 @@ const renderBox = (props: TGApp.Component.Snackbar.Params): VNode => {
 
 let snackbarInstance: VNode;
 
-function showSnackbar(props: TGApp.Component.Snackbar.Params): void {
+function showSnackbarFull(text: string, color?: string, timeout?: number): void {
+  const params: TGApp.Component.Snackbar.Params = {
+    text: text,
+    color: color ?? "success",
+    timeout: timeout ?? 1500,
+  };
   if (snackbarInstance !== undefined) {
     const boxVue = <SnackbarInstance>snackbarInstance.component;
-    boxVue.exposeProxy.displayBox(props);
+    boxVue.exposeProxy.displayBox(params);
   } else {
-    snackbarInstance = renderBox(props);
-    showSnackbar(props);
+    snackbarInstance = renderBox(params);
+    showSnackbarFull(params.text, params.color, params.timeout);
   }
 }
 
+function showSnackbarCancel(text: string, timeout?: number): void {
+  showSnackbarFull(text, "cancel", timeout);
+}
+
+function showSnackbarError(text: string, timeout?: number): void {
+  showSnackbarFull(text, "error", timeout);
+}
+
+function showSnackbarInfo(text: string, timeout?: number): void {
+  showSnackbarFull(text, "info", timeout);
+}
+
+function showSnackbarSuccess(text: string, timeout?: number): void {
+  showSnackbarFull(text, "success", timeout);
+}
+
+function showSnackbarWarn(text: string, timeout?: number): void {
+  showSnackbarFull(text, "warn", timeout);
+}
+
+const showSnackbar = {
+  _: showSnackbarFull,
+  cancel: showSnackbarCancel,
+  error: showSnackbarError,
+  info: showSnackbarInfo,
+  success: showSnackbarSuccess,
+  warn: showSnackbarWarn,
+};
 export default showSnackbar;
diff --git a/src/components/func/snackbar.vue b/src/components/func/snackbar.vue
index c83baf3d..24868ef9 100644
--- a/src/components/func/snackbar.vue
+++ b/src/components/func/snackbar.vue
@@ -10,37 +10,27 @@
   </transition>
 </template>
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref, toRaw } from "vue";
 
 interface SnackbarProps {
   text: string;
-  color?: string;
-  timeout?: number;
+  color: string;
+  timeout: number;
 }
 
-const props = withDefaults(defineProps<SnackbarProps>(), {
-  text: "",
-  color: "success",
-  timeout: 1500,
-});
-
+const props = defineProps<SnackbarProps>();
+const data = ref<TGApp.Component.Snackbar.Params>(toRaw(props));
 // 组件参数
-const data = reactive<TGApp.Component.Snackbar.Params>({
-  text: "",
-});
 const show = ref<boolean>(false);
+
 // eslint-disable-next-line no-undef
-let timer: NodeJS.Timeout;
+let timer: NodeJS.Timeout | undefined = undefined;
 
-onMounted(() => {
-  displayBox(props);
-});
+onMounted(() => displayBox(props));
 
 // 根据输入的颜色转换为 hex 格式
 function transColor(color: string): string {
-  if (color.startsWith("#")) {
-    return color;
-  }
+  if (color.startsWith("#")) return color;
   switch (color) {
     case "success":
       return "#7ebd21";
@@ -58,19 +48,18 @@ function transColor(color: string): string {
 }
 
 function displayBox(params: TGApp.Component.Snackbar.Params): void {
-  data.text = params.text;
-  data.color = transColor(params.color ?? "success");
-  data.timeout = params.timeout ?? 1500;
+  data.value.text = params.text;
+  data.value.color = transColor(params.color);
+  data.value.timeout = params.timeout;
   show.value = true;
-  clearTimeout(timer);
-  timer = setTimeout(() => {
-    show.value = false;
-  }, data.timeout);
+  if (timer != undefined) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+  timer = setTimeout(() => (show.value = false), data.value.timeout);
 }
 
-defineExpose({
-  displayBox,
-});
+defineExpose({ displayBox });
 </script>
 <style lang="css" scoped>
 .func-snackbar-enter-active,
diff --git a/src/components/gachaRecord/gro-history.vue b/src/components/gachaRecord/gro-history.vue
index bc1049fd..3bf49174 100644
--- a/src/components/gachaRecord/gro-history.vue
+++ b/src/components/gachaRecord/gro-history.vue
@@ -94,31 +94,15 @@ async function toWiki(id: number): Promise<void> {
     title: "是否跳转到对应图鉴界面？",
   });
   if (confirm === undefined || confirm === false) {
-    showSnackbar({
-      text: "已取消",
-      color: "cancel",
-    });
+    showSnackbar.cancel("已取消");
     return;
   }
   if (cFind) {
-    await router.push({
-      name: "角色图鉴",
-      params: {
-        id: id.toString(),
-      },
-    });
+    await router.push({ name: "角色图鉴", params: { id: id.toString() } });
   } else if (wFind) {
-    await router.push({
-      name: "武器图鉴",
-      params: {
-        id: id.toString(),
-      },
-    });
+    await router.push({ name: "武器图鉴", params: { id: id.toString() } });
   } else {
-    showSnackbar({
-      text: "未找到对应角色或武器",
-      color: "error",
-    });
+    showSnackbar.warn("未找到对应角色或武器");
   }
 }
 
diff --git a/src/components/home/t-pool.vue b/src/components/home/t-pool.vue
index d030f176..6fb91c21 100644
--- a/src/components/home/t-pool.vue
+++ b/src/components/home/t-pool.vue
@@ -178,20 +178,12 @@ async function toOuter(
   title: string,
 ): Promise<void> {
   if (character.info !== undefined) {
-    await router.push({
-      name: "角色图鉴",
-      params: {
-        id: character.info.id,
-      },
-    });
+    await router.push({ name: "角色图鉴", params: { id: character.info.id } });
     return;
   }
   const url = character.url;
   if (url === "") {
-    showSnackbar({
-      text: "链接为空!",
-      color: "error",
-    });
+    showSnackbar.warn("链接为空!");
     return;
   }
   await createTGWindow(url, "Sub_window", `Pool_${title}`, 1200, 800, true, true);
diff --git a/src/components/home/t-position.vue b/src/components/home/t-position.vue
index b3bcfb71..bf85c553 100644
--- a/src/components/home/t-position.vue
+++ b/src/components/home/t-position.vue
@@ -98,11 +98,7 @@ async function openPosition(card: TGApp.Plugins.Mys.Position.RenderCard): Promis
   const res = await parseLink(card.link);
   if (res === "post") await createPost(card.postId, card.title);
   if (res === false) {
-    showSnackbar({
-      text: `未知链接:${card.link}`,
-      color: "error",
-      timeout: 3000,
-    });
+    showSnackbar.warn(`未知链接:${card.link}`, 3000);
     return;
   }
 }
diff --git a/src/components/main/t-gamenav.vue b/src/components/main/t-gamenav.vue
index 8bdc2526..604eb3f6 100644
--- a/src/components/main/t-gamenav.vue
+++ b/src/components/main/t-gamenav.vue
@@ -60,27 +60,24 @@ async function tryGetCode(): Promise<void> {
   if (!navFind) return;
   const actIdFind = new URL(navFind.app_path).searchParams.get("act_id");
   if (!actIdFind) {
-    showSnackbar({ text: "未找到活动ID", color: "warn" });
+    showSnackbar.warn("未找到活动ID");
     return;
   }
   actId.value = actIdFind;
   const res = await TGRequest.Nav.getCode(actIdFind);
   if (!Array.isArray(res)) {
-    showSnackbar({ text: `[${res.retcode}] ${res.message}`, color: "warn" });
+    showSnackbar.warn(`[${res.retcode}] ${res.message}`);
     return;
   }
   codeData.value = res;
-  showSnackbar({ text: "获取兑换码成功", color: "success" });
+  showSnackbar.success("获取兑换码成功");
   await TGLogger.Info(JSON.stringify(res));
   showOverlay.value = true;
 }
 
 async function toNav(item: TGApp.BBS.Navigator.Navigator): Promise<void> {
   if (!appStore.isLogin) {
-    showSnackbar({
-      text: "请先登录",
-      color: "warn",
-    });
+    showSnackbar.warn("请先登录");
     return;
   }
   await TGLogger.Info(`[TGameNav][toNav] 打开网页活动 ${item.name}`);
@@ -111,10 +108,7 @@ async function toNav(item: TGApp.BBS.Navigator.Navigator): Promise<void> {
     text: "取消则采用竖屏模式打开",
   });
   if (modeConfirm === undefined) {
-    showSnackbar({
-      text: "已取消打开",
-      color: "cancel",
-    });
+    showSnackbar.cancel("已取消打开");
     return;
   }
   if (modeConfirm) await TGClient.open("web_act", item.app_path);
@@ -133,20 +127,14 @@ async function toBBS(link: URL): Promise<void> {
       const forumId = link.pathname.split("/").pop();
       const localPath = getLocalPath(forumId);
       if (localPath === "") {
-        showSnackbar({
-          text: `不支持的链接：${link.href}`,
-          color: "warn",
-        });
+        showSnackbar.warn(`不支持的链接：${link.href}`);
         return;
       }
       await emit("active_deep_link", `router?path=${localPath}`);
       return;
     }
   }
-  showSnackbar({
-    text: `不支持的链接：${link.href}`,
-    color: "warn",
-  });
+  showSnackbar.warn(`不支持的链接：${link.href}`);
 }
 
 function getLocalPath(forum?: string): string {
diff --git a/src/components/overlay/to-arcBrith.vue b/src/components/overlay/to-arcBrith.vue
index 5a660830..8233fafd 100644
--- a/src/components/overlay/to-arcBrith.vue
+++ b/src/components/overlay/to-arcBrith.vue
@@ -95,7 +95,7 @@ async function onCopy(): Promise<void> {
   if (buffer.value === null) buffer.value = await getImageBuffer(image);
   const size = bytesToSize(buffer.value.byteLength);
   await copyToClipboard(buffer.value);
-  showSnackbar({ text: `图片已复制到剪贴板，大小：${size}` });
+  showSnackbar.success(`图片已复制到剪贴板，大小：${size}`);
 }
 
 async function onDownload() {
@@ -104,7 +104,7 @@ async function onDownload() {
   if (buffer.value === null) buffer.value = await getImageBuffer(image);
   const size = bytesToSize(buffer.value.byteLength);
   await saveCanvasImg(buffer.value, Date.now().toString());
-  showSnackbar({ text: `图片已下载到本地，大小：${size}` });
+  showSnackbar.success(`图片已下载到本地，大小：${size}`);
 }
 
 async function loadText(): Promise<void> {
@@ -115,10 +115,7 @@ async function loadText(): Promise<void> {
   }
   const resSource: any = await parseXml(props.data.gal_resource);
   if (resSource === false) {
-    showSnackbar({
-      text: "对白数据加载失败",
-      color: "error",
-    });
+    showSnackbar.warn("对白数据加载失败");
     return;
   }
   const keyMap: XmlKeyMap[] = resSource["elements"][0]["elements"][0]["elements"]
diff --git a/src/components/overlay/to-channel.vue b/src/components/overlay/to-channel.vue
index 80995c6e..94a3664b 100644
--- a/src/components/overlay/to-channel.vue
+++ b/src/components/overlay/to-channel.vue
@@ -64,10 +64,7 @@ function onCancel(): void {
 
 async function toChannel(item: ToChannelItem): Promise<void> {
   if (props.gid === item.gid) {
-    showSnackbar({
-      text: "当前已经在该频道",
-      color: "warn",
-    });
+    showSnackbar.warn("当前已经在该频道");
     return;
   }
   visible.value = false;
diff --git a/src/components/overlay/to-collectPost.vue b/src/components/overlay/to-collectPost.vue
index b173a347..defcd40b 100644
--- a/src/components/overlay/to-collectPost.vue
+++ b/src/components/overlay/to-collectPost.vue
@@ -68,10 +68,7 @@ watch(
 
 async function onSubmit(): Promise<void> {
   if (!select.value) {
-    showSnackbar({
-      text: "请选择分类",
-      color: "error",
-    });
+    showSnackbar.warn("请选择分类");
     return;
   }
   submit.value = true;
@@ -83,17 +80,11 @@ async function onSubmit(): Promise<void> {
   if (forceCheck === false) force = true;
   const check = await TSUserCollection.updatePostsCollect(props.post, select.value, force);
   if (!check) {
-    showSnackbar({
-      text: "处理失败",
-      color: "error",
-    });
+    showSnackbar.warn("处理失败");
     submit.value = false;
     return;
   }
-  showSnackbar({
-    text: `成功处理 ${props.post.length} 个帖子`,
-    color: "success",
-  });
+  showSnackbar.success(`成功处理 ${props.post.length} 个帖子`);
   submit.value = false;
   visible.value = false;
   emits("submit");
@@ -108,17 +99,11 @@ async function newCollect(): Promise<void> {
   });
   if (titleC === undefined || titleC === false) return;
   if (titleC === "未分类") {
-    showSnackbar({
-      text: "分类名不可为未分类",
-      color: "error",
-    });
+    showSnackbar.warn("分类名不可为未分类");
     return;
   }
   if (collectList.value.find((i) => i.title === titleC)) {
-    showSnackbar({
-      text: "分类已存在",
-      color: "error",
-    });
+    showSnackbar.warn("分类已存在");
     return;
   }
   title = titleC;
@@ -131,18 +116,12 @@ async function newCollect(): Promise<void> {
   if (descC === undefined) desc = title;
   else desc = descC;
   const res = await TSUserCollection.createCollect(title, desc);
-  if (res) {
-    showSnackbar({
-      text: "新建成功",
-      color: "success",
-    });
-    await freshData();
-  } else {
-    showSnackbar({
-      text: "新建失败",
-      color: "error",
-    });
+  if (!res) {
+    showSnackbar.warn("新建失败");
+    return;
   }
+  showSnackbar.success("新建成功");
+  await freshData();
 }
 
 async function freshData(): Promise<void> {
diff --git a/src/components/overlay/to-livecode.vue b/src/components/overlay/to-livecode.vue
index 79e9490c..30f48689 100644
--- a/src/components/overlay/to-livecode.vue
+++ b/src/components/overlay/to-livecode.vue
@@ -81,7 +81,7 @@ function onCancel(): void {
 
 function copy(code: string): void {
   navigator.clipboard.writeText(code);
-  showSnackbar({ text: "已复制到剪贴板", color: "success" });
+  showSnackbar.success("已复制到剪贴板");
 }
 
 async function shareImg(): Promise<void> {
diff --git a/src/components/overlay/to-postCollect.vue b/src/components/overlay/to-postCollect.vue
index 10fddacf..12953dad 100644
--- a/src/components/overlay/to-postCollect.vue
+++ b/src/components/overlay/to-postCollect.vue
@@ -94,25 +94,16 @@ async function deleteCollect(item: TGApp.Sqlite.UserCollection.UFCollection): Pr
     text: "该分类若有帖子，则会变为未分类",
   });
   if (!res) {
-    showSnackbar({
-      text: "取消删除",
-      color: "cancel",
-    });
+    showSnackbar.cancel("取消删除");
     return;
   }
   const resD = await TSUserCollection.deleteCollect(item.title, false);
-  if (resD) {
-    showSnackbar({
-      text: "删除成功",
-      color: "success",
-    });
-    await freshData();
-  } else {
-    showSnackbar({
-      text: "删除失败",
-      color: "error",
-    });
+  if (!resD) {
+    showSnackbar.error("删除失败");
+    return;
   }
+  showSnackbar.success("删除成功");
+  await freshData();
 }
 
 async function newCollect(): Promise<void> {
@@ -124,17 +115,11 @@ async function newCollect(): Promise<void> {
   });
   if (titleC === undefined || titleC === false) return;
   if (titleC === "未分类") {
-    showSnackbar({
-      text: "分类名不可为未分类",
-      color: "error",
-    });
+    showSnackbar.warn("分类名不可为未分类");
     return;
   }
   if (collectList.value.find((i) => i.title === titleC)) {
-    showSnackbar({
-      text: "分类已存在",
-      color: "error",
-    });
+    showSnackbar.warn("分类已存在");
     return;
   }
   title = titleC;
@@ -147,26 +132,17 @@ async function newCollect(): Promise<void> {
   if (descC === undefined) desc = title;
   else desc = descC;
   const res = await TSUserCollection.createCollect(title, desc);
-  if (res) {
-    showSnackbar({
-      text: "新建成功",
-      color: "success",
-    });
-    await freshData();
-  } else {
-    showSnackbar({
-      text: "新建失败",
-      color: "error",
-    });
+  if (!res) {
+    showSnackbar.error("新建失败");
+    return;
   }
+  showSnackbar.success("新建成功");
+  await freshData();
 }
 
 async function onSubmit(): Promise<void> {
   if (!props.post) {
-    showSnackbar({
-      text: "未找到帖子信息",
-      color: "error",
-    });
+    showSnackbar.warn("未找到帖子信息");
     return;
   }
   submit.value = true;
@@ -177,17 +153,11 @@ async function onSubmit(): Promise<void> {
   await freshData();
   emits("submit");
   submit.value = false;
-  if (res) {
-    showSnackbar({
-      text: "更新成功",
-      color: "success",
-    });
-  } else {
-    showSnackbar({
-      text: "更新失败",
-      color: "error",
-    });
+  if (!res) {
+    showSnackbar.error("更新失败");
+    return;
   }
+  showSnackbar.success("更新成功");
 }
 
 function onCancel() {
diff --git a/src/components/post/tb-collect.vue b/src/components/post/tb-collect.vue
index 5f916269..3bf16248 100644
--- a/src/components/post/tb-collect.vue
+++ b/src/components/post/tb-collect.vue
@@ -61,16 +61,10 @@ watch(
     const res = await TSUserCollection.updatePostInfo(props.modelValue.toString(), val);
     await event.emit("refreshCollect");
     if (!res) {
-      showSnackbar({
-        text: "更新帖子信息失败，数据库中不存在帖子信息！",
-        color: "error",
-      });
+      showSnackbar.warn("更新帖子信息失败，数据库中不存在帖子信息！");
       return;
     }
-    showSnackbar({
-      text: "已更新帖子信息",
-      color: "success",
-    });
+    showSnackbar.success("已更新帖子信息");
     await TGLogger.Info(`[TbCollect] 更新帖子信息：${props.modelValue.toString()}`);
   },
 );
@@ -78,19 +72,13 @@ watch(
 async function switchCollect(): Promise<void> {
   if (!isCollected.value) {
     if (props.data === undefined) {
-      showSnackbar({
-        text: "未获取到帖子信息",
-        color: "error",
-      });
+      showSnackbar.warn("未获取到帖子信息");
       return;
     }
     await TSUserCollection.addCollect(props.modelValue.toString(), props.data);
     await event.emit("refreshCollect");
     isCollected.value = true;
-    showSnackbar({
-      text: "收藏成功",
-      color: "success",
-    });
+    showSnackbar.success("收藏成功");
     return;
   }
   if (collect.value.length > 1) {
@@ -105,10 +93,7 @@ async function switchCollect(): Promise<void> {
   await TSUserCollection.deletePostCollect(props.modelValue.toString(), true);
   await event.emit("refreshCollect");
   isCollected.value = false;
-  showSnackbar({
-    text: "取消收藏成功",
-    color: "success",
-  });
+  showSnackbar.success("取消收藏成功");
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/components/post/to-postSearch.vue b/src/components/post/to-postSearch.vue
index 4bb5069a..a0a84720 100644
--- a/src/components/post/to-postSearch.vue
+++ b/src/components/post/to-postSearch.vue
@@ -114,23 +114,17 @@ async function searchPosts() {
   if (load.value) return;
   load.value = true;
   if (!props.gid || !props.keyword) {
-    showSnackbar({
-      text: "参数错误",
-    });
+    showSnackbar.warn("参数错误");
     load.value = false;
     return;
   }
   if (isLast.value) {
-    showSnackbar({
-      text: "没有更多了",
-    });
+    showSnackbar.warn("没有更多了");
     load.value = false;
     return;
   }
   if (search.value === "") {
-    showSnackbar({
-      text: "请输入搜索关键词",
-    });
+    showSnackbar.warn("请输入搜索关键词");
     load.value = false;
     return;
   }
diff --git a/src/components/post/tp-emoticon.vue b/src/components/post/tp-emoticon.vue
index 0bb1e07f..a02a6360 100644
--- a/src/components/post/tp-emoticon.vue
+++ b/src/components/post/tp-emoticon.vue
@@ -71,13 +71,13 @@ async function download(): Promise<void> {
   if (buffer.value === null) buffer.value = await getImageBuffer(image);
   const size = bytesToSize(props.data.insert.custom_emoticon.size.file_size);
   if (buffer.value.byteLength > 80000000) {
-    showSnackbar({ text: "图片过大，无法下载到本地", color: "warn" });
+    showSnackbar.warn(`图片过大(${size})，无法下载到本地`);
     return;
   }
   const format = image.split(".").pop();
   const title = props.data.insert.custom_emoticon.hash;
   await saveCanvasImg(buffer.value, props.data.insert.custom_emoticon.hash, format);
-  showSnackbar({ text: `已保存${title}.${format}到本地，大小为${size}` });
+  showSnackbar.success(`已保存${title}.${format}到本地，大小为${size}`);
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/components/post/tp-linkCard.vue b/src/components/post/tp-linkCard.vue
index 6e7c8efb..fe53275e 100644
--- a/src/components/post/tp-linkCard.vue
+++ b/src/components/post/tp-linkCard.vue
@@ -76,11 +76,7 @@ async function toLink() {
   const res = await parseLink(link);
   if (res === true) return;
   if (res === false) {
-    showSnackbar({
-      text: `未知链接:${link}`,
-      color: "error",
-      timeout: 3000,
-    });
+    showSnackbar.error(`未知链接:${link}`, 3000);
     return;
   }
   window.open(res);
diff --git a/src/components/post/tp-text.vue b/src/components/post/tp-text.vue
index 8ea47907..5a7dc75e 100644
--- a/src/components/post/tp-text.vue
+++ b/src/components/post/tp-text.vue
@@ -107,7 +107,7 @@ async function toLink() {
   const res = await parseLink(link);
   if (res === true) return;
   if (res === false) {
-    showSnackbar({ text: `未知链接:${link}`, color: "error", timeout: 3000 });
+    showSnackbar.error(`未知链接:${link}`, 3000);
     return;
   }
   window.open(res);
@@ -120,7 +120,7 @@ function getEmojiUrl(): string {
     getEmojis().then((res) => {
       if ("retcode" in res) {
         console.error(res);
-        showSnackbar({ text: "获取表情包失败！", color: "error" });
+        showSnackbar.error("获取表情包失败！");
         mode.value = "text";
         return "";
       }
diff --git a/src/components/post/tp-uid.vue b/src/components/post/tp-uid.vue
index 65f9c100..26f0bee2 100644
--- a/src/components/post/tp-uid.vue
+++ b/src/components/post/tp-uid.vue
@@ -39,7 +39,7 @@ console.log("tpUid", props.data.insert.game_user_info);
 
 function copyUid(): void {
   navigator.clipboard.writeText(props.data.insert.game_user_info.game_uid);
-  showSnackbar({ text: "已复制UID" });
+  showSnackbar.success("已复制UID");
 }
 
 function getGameName(): string {
diff --git a/src/components/post/tp-vod.vue b/src/components/post/tp-vod.vue
index 62136836..fd9f5b0d 100644
--- a/src/components/post/tp-vod.vue
+++ b/src/components/post/tp-vod.vue
@@ -119,7 +119,7 @@ onMounted(async () => {
           const buffer = await getImageBuffer(props.data.insert.vod.cover);
           const size = bytesToSize(buffer.byteLength);
           await saveCanvasImg(buffer, `vod-cover-${props.data.insert.vod.id}`);
-          showSnackbar({ text: `封面已下载到本地，大小：${size}` });
+          showSnackbar.success(`封面已下载到本地，大小：${size}`);
         },
       },
     ],
diff --git a/src/components/post/tpo-collection.vue b/src/components/post/tpo-collection.vue
index edd01150..a21938aa 100644
--- a/src/components/post/tpo-collection.vue
+++ b/src/components/post/tpo-collection.vue
@@ -125,18 +125,10 @@ function getDate(date: number): string {
 
 async function toPost(postId: string, index: number): Promise<void> {
   if (index === props.collection.cur - 1) {
-    showSnackbar({
-      text: "已经在当前帖子",
-      color: "warn",
-    });
+    showSnackbar.warn("已经在当前帖子");
     return;
   }
-  await router.push({
-    name: "帖子详情",
-    params: {
-      post_id: postId,
-    },
-  });
+  await router.push({ name: "帖子详情", params: { post_id: postId } });
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/components/post/tpo-image.vue b/src/components/post/tpo-image.vue
index c77866a7..e5711ed4 100644
--- a/src/components/post/tpo-image.vue
+++ b/src/components/post/tpo-image.vue
@@ -77,24 +77,19 @@ function resizeImg() {
 function setBlackBg() {
   bgMode.value = (bgMode.value + 1) % 3;
   const bgLabelList = ["透明", "黑色", "白色"];
-  showSnackbar({
-    text: `背景已切换为${bgLabelList[bgMode.value]}`,
-  });
+  showSnackbar.success(`背景已切换为${bgLabelList[bgMode.value]}`);
 }
 
 async function onCopy(): Promise<void> {
   if (format.value === "gif") {
-    showSnackbar({
-      text: "GIF 图片不支持复制到剪贴板",
-      color: "error",
-    });
+    showSnackbar.warn("GIF 图片不支持复制到剪贴板");
     return;
   }
   const image = props.image.insert.image;
   if (buffer.value === null) buffer.value = await getImageBuffer(image);
   const size = bytesToSize(buffer.value.byteLength);
   await copyToClipboard(buffer.value);
-  showSnackbar({ text: `图片已复制到剪贴板，大小：${size}` });
+  showSnackbar.success(`图片已复制到剪贴板，大小：${size}`);
 }
 
 async function onDownload() {
@@ -102,19 +97,14 @@ async function onDownload() {
   if (buffer.value === null) buffer.value = await getImageBuffer(image);
   const size = bytesToSize(buffer.value.byteLength);
   if (buffer.value.byteLength > 80000000) {
-    showSnackbar({
-      text: "图片过大，无法下载到本地",
-      color: "error",
-    });
+    showSnackbar.warn("图片过大，无法下载到本地");
     return;
   }
   await saveCanvasImg(buffer.value, Date.now().toString(), format.value);
-  showSnackbar({ text: `图片已下载到本地，大小：${size}` });
+  showSnackbar.success(`图片已下载到本地，大小：${size}`);
 }
 
-onUnmounted(() => {
-  buffer.value = null;
-});
+onUnmounted(() => (buffer.value = null));
 </script>
 <style lang="css" scoped>
 .tpoi-box {
diff --git a/src/components/post/tpo-lottery.vue b/src/components/post/tpo-lottery.vue
index 95608e79..be4916e1 100644
--- a/src/components/post/tpo-lottery.vue
+++ b/src/components/post/tpo-lottery.vue
@@ -95,10 +95,7 @@ async function load(): Promise<void> {
   if (card.value) return;
   const cardGet = await Mys.Lottery.get(props.lottery);
   if ("retcode" in cardGet) {
-    showSnackbar({
-      text: `[${cardGet.retcode}] ${cardGet.message}`,
-      color: "error",
-    });
+    showSnackbar.error(`[${cardGet.retcode}] ${cardGet.message}`);
     return;
   }
   jsonData.value = cardGet;
diff --git a/src/components/postReply/tpr-debug.vue b/src/components/postReply/tpr-debug.vue
index 4ff07585..d9488601 100644
--- a/src/components/postReply/tpr-debug.vue
+++ b/src/components/postReply/tpr-debug.vue
@@ -51,16 +51,10 @@ async function selectFile(): Promise<void> {
   const file = await open({
     multiple: false,
     directory: false,
-    filter: {
-      name: "JSON",
-      extensions: ["json"],
-    },
+    filter: { name: "JSON", extensions: ["json"] },
   });
   if (file === null) {
-    showSnackbar({
-      text: "未选择文件",
-      color: "error",
-    });
+    showSnackbar.warn("未选择文件");
     return;
   }
   filePath.value = file;
@@ -68,10 +62,7 @@ async function selectFile(): Promise<void> {
     const data = await readTextFile(file);
     replyData.value = JSON.parse(data);
   } catch (error) {
-    showSnackbar({
-      text: `解析失败：${error}`,
-      color: "error",
-    });
+    showSnackbar.error(`解析失败：${error}`);
     return;
   }
 }
diff --git a/src/components/postReply/tpr-main.vue b/src/components/postReply/tpr-main.vue
index 2bd4e4d0..9b5bf75e 100644
--- a/src/components/postReply/tpr-main.vue
+++ b/src/components/postReply/tpr-main.vue
@@ -134,10 +134,7 @@ async function loadReply(): Promise<void> {
     replyOrder.value,
   );
   if ("retcode" in resp) {
-    showSnackbar({
-      text: `[${resp.retcode}] ${resp.message}`,
-      color: "warn",
-    });
+    showSnackbar.error(`[${resp.retcode}] ${resp.message}`);
     return;
   }
   isLast.value = resp.is_last;
@@ -146,16 +143,10 @@ async function loadReply(): Promise<void> {
   reply.value = reply.value.concat(resp.list);
   loading.value = false;
   if (isLast.value) {
-    showSnackbar({
-      text: "没有更多了",
-      color: "info",
-    });
-  } else {
-    showSnackbar({
-      text: `成功加载${resp.list.length}条回复`,
-      color: "success",
-    });
+    showSnackbar.warn("没有更多了");
+    return;
   }
+  showSnackbar.success(`成功加载${resp.list.length}条回复`);
 }
 
 async function handleDebug(): Promise<void> {
diff --git a/src/components/postReply/tpr-reply.vue b/src/components/postReply/tpr-reply.vue
index 2ba7957f..e4fdb01e 100644
--- a/src/components/postReply/tpr-reply.vue
+++ b/src/components/postReply/tpr-reply.vue
@@ -214,7 +214,7 @@ async function loadSub(): Promise<void> {
     lastId.value,
   );
   if ("retcode" in resp) {
-    showSnackbar({ text: `[${resp.retcode}] ${resp.message}`, color: "error" });
+    showSnackbar.error(`[${resp.retcode}] ${resp.message}`);
     loading.value = false;
     return;
   }
@@ -222,7 +222,7 @@ async function loadSub(): Promise<void> {
   lastId.value = resp.last_id;
   subReplies.value = subReplies.value.concat(resp.list);
   loading.value = false;
-  if (isLast.value) showSnackbar({ text: "没有更多了", color: "info" });
+  if (isLast.value) showSnackbar.warn("没有更多了");
 }
 
 async function exportData(): Promise<void> {
@@ -231,10 +231,7 @@ async function exportData(): Promise<void> {
     text: "将回复对应的JSON数据导出到文件",
   });
   if (!confirm) {
-    showSnackbar({
-      text: "已取消",
-      color: "cancel",
-    });
+    showSnackbar.cancel("已取消");
     return;
   }
   const data = JSON.stringify(toRaw(props.modelValue), null, 2);
@@ -244,17 +241,11 @@ async function exportData(): Promise<void> {
     defaultPath: `${await path.downloadDir()}${path.sep()}${replyId}.json`,
   });
   if (savePath === null) {
-    showSnackbar({
-      text: "已取消",
-      color: "cancel",
-    });
+    showSnackbar.cancel("已取消");
     return;
   }
   await writeTextFile(savePath, data);
-  showSnackbar({
-    text: "导出成功",
-    color: "success",
-  });
+  showSnackbar.success("导出成功");
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/components/userAchi/tua-achi-list.vue b/src/components/userAchi/tua-achi-list.vue
index a9e84bae..8f86f15e 100644
--- a/src/components/userAchi/tua-achi-list.vue
+++ b/src/components/userAchi/tua-achi-list.vue
@@ -100,7 +100,7 @@ async function loadAchi(): Promise<void> {
     if (ncFind) ncData.value = ncFind;
     else ncData.value = undefined;
   }
-  showSnackbar({ text: `已获取 ${renderAchi.value.length} 条成就数据`, color: "success" });
+  showSnackbar.success(`已获取 ${achievements.value.length} 条成就数据`);
 }
 
 function selectAchi(data: TGApp.Sqlite.Achievement.RenderAchi): void {
@@ -114,27 +114,26 @@ function selectSeries(data: number): void {
 
 function switchAchiInfo(next: boolean): void {
   if (selectedAchi.value === undefined) {
-    showSnackbar({ text: "当前未选中成就！", color: "warn" });
+    showSnackbar.warn("当前未选中成就！");
     return;
   }
   const index = renderAchi.value.findIndex((i) => i === selectedAchi.value);
   if (index === -1) {
-    showSnackbar({
-      text: `未找到选中成就 ${selectedAchi.value.name}(${selectedAchi.value.id}) 的索引！`,
-      color: "error",
-    });
+    showSnackbar.warn(
+      `未找到选中成就 ${selectedAchi.value.name}(${selectedAchi.value.id}) 的索引！`,
+    );
     return;
   }
   if (next) {
     if (index === renderAchi.value.length - 1) {
-      showSnackbar({ text: "已经是最后一个了", color: "warn" });
+      showSnackbar.warn("已经是最后一个了");
       return;
     }
     selectedAchi.value = renderAchi.value[index + 1];
     return;
   }
   if (index === 0) {
-    showSnackbar({ text: "已经是第一个了", color: "warn" });
+    showSnackbar.warn("已经是第一个了");
     return;
   }
   selectedAchi.value = renderAchi.value[index - 1];
diff --git a/src/components/userAchi/tua-achi.vue b/src/components/userAchi/tua-achi.vue
index 168ed2d0..4dacf389 100644
--- a/src/components/userAchi/tua-achi.vue
+++ b/src/components/userAchi/tua-achi.vue
@@ -78,25 +78,22 @@ async function setAchiStat(stat: boolean): Promise<void> {
     await TSUserAchi.updateAchi(data.value);
     emits("update:modelValue", data.value);
     await event.emit("updateAchi", data.value.series);
-    showSnackbar({
-      text: `已将成就 ${data.value.name}(${data.value.id}) 状态设为未完成`,
-      color: "success",
-    });
+    showSnackbar.success(`已将成就 ${data.value.name}(${data.value.id}) 状态设为未完成`);
     return;
   }
-  let progress: false | undefined | string = await showConfirm({
+  let progress: boolean | undefined | string = await showConfirm({
     mode: "input",
     title: "请输入成就进度",
     text: "进度",
     input: data.value.progress,
   });
   if (progress === false) {
-    showSnackbar({ text: "已取消成就编辑", color: "cancel" });
+    showSnackbar.cancel("已取消成就编辑");
     return;
   }
   if (progress === undefined) progress = data.value.progress.toString();
   if (isNaN(Number(progress)) || progress === "0") {
-    showSnackbar({ text: "请输入有效数字！", color: "warn" });
+    showSnackbar.warn("请输入有效数字！");
     return;
   }
   data.value.progress = Number(progress);
@@ -104,10 +101,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
   data.value.isCompleted = true;
   await TSUserAchi.updateAchi(data.value);
   await event.emit("updateAchi", data.value.series);
-  showSnackbar({
-    text: `已将成就 ${data.value.name}(${data.value.id}) 状态设为已完成`,
-    color: "success",
-  });
+  showSnackbar.success(`已将成就 ${data.value.name}(${data.value.id}) 状态设为已完成`);
   emits("update:modelValue", data.value);
 }
 </script>
diff --git a/src/components/userAchi/tua-series.vue b/src/components/userAchi/tua-series.vue
index 3f116d22..98e9be03 100644
--- a/src/components/userAchi/tua-series.vue
+++ b/src/components/userAchi/tua-series.vue
@@ -64,10 +64,7 @@ onUnmounted(async () => {
 
 async function selectSeries(): Promise<void> {
   if (props.cur === props.series) {
-    showSnackbar({
-      text: "已选中当前系列！",
-      color: "warn",
-    });
+    showSnackbar.warn("已选中当前系列！");
     return;
   }
   emits("selectSeries", props.series);
diff --git a/src/components/wiki/twc-character.vue b/src/components/wiki/twc-character.vue
index fdf0b78c..f6d97660 100644
--- a/src/components/wiki/twc-character.vue
+++ b/src/components/wiki/twc-character.vue
@@ -142,7 +142,7 @@ const nameCard = ref<TGApp.App.NameCard.Item>();
 async function loadData(): Promise<void> {
   const res = WikiCharacterData.find((item) => item.id === props.item.id);
   if (res === undefined) {
-    showSnackbar({ text: `未获取到角色 ${props.item.name} 的 Wiki 数据`, color: "error" });
+    showSnackbar.warn(`未获取到角色 ${props.item.name} 的 Wiki 数据`);
     return;
   }
   data.value = res;
@@ -153,7 +153,7 @@ async function loadData(): Promise<void> {
   } else {
     hasNc.value = false;
   }
-  showSnackbar({ text: `成功获取角色 ${props.item.name} 的 Wiki 数据` });
+  showSnackbar.success(`成功获取角色 ${props.item.name} 的 Wiki 数据`);
 }
 
 watch(
@@ -165,7 +165,7 @@ onMounted(async () => await loadData());
 
 async function toWiki(): Promise<void> {
   if (props.item.contentId === 0) {
-    showSnackbar({ text: `角色 ${props.item.name} 暂无详情`, color: "warn" });
+    showSnackbar.warn(`角色 ${props.item.name} 暂无详情`);
     return;
   }
   await createObc(props.item.contentId, props.item.name);
diff --git a/src/components/wiki/twc-materials.vue b/src/components/wiki/twc-materials.vue
index 5b772400..b33be0d3 100644
--- a/src/components/wiki/twc-materials.vue
+++ b/src/components/wiki/twc-materials.vue
@@ -66,30 +66,21 @@ function checkData(item: TGApp.App.Calendar.Material, index: number) {
     curData.value = material;
     curIndex.value = index;
     showOverlay.value = true;
-  } else {
-    showSnackbar({
-      text: `材料 ${item.name} 暂无详细信息`,
-      color: "warn",
-    });
+    return;
   }
+  showSnackbar.warn(`材料 ${item.name} 暂无详细信息`);
 }
 
 function switchMaterial(isNext: boolean) {
   if (isNext) {
     if (curIndex.value === props.data.length - 1) {
-      showSnackbar({
-        text: "已经是最后一个材料了",
-        color: "warn",
-      });
+      showSnackbar.warn("已经是最后一个材料了");
       return;
     }
     curIndex.value++;
   } else {
     if (curIndex.value === 0) {
-      showSnackbar({
-        text: "已经是第一个材料了",
-        color: "warn",
-      });
+      showSnackbar.warn("已经是第一个材料了");
       return;
     }
     curIndex.value--;
@@ -100,10 +91,7 @@ function switchMaterial(isNext: boolean) {
     curData.value = material;
     return;
   }
-  showSnackbar({
-    text: `材料 ${curItem.name} 暂无详细信息`,
-    color: "warn",
-  });
+  showSnackbar.warn(`材料 ${curItem.name} 暂无详细信息`);
   if (isNext) curIndex.value--;
   else curIndex.value++;
 }
diff --git a/src/components/wiki/twc-weapon.vue b/src/components/wiki/twc-weapon.vue
index 68d19540..90d0ee98 100644
--- a/src/components/wiki/twc-weapon.vue
+++ b/src/components/wiki/twc-weapon.vue
@@ -87,11 +87,11 @@ const selectItems = ref<number[]>([]);
 async function loadData(): Promise<void> {
   const res = WikiWeaponData.find((item) => item.id === props.item.id);
   if (res === undefined) {
-    showSnackbar({ text: `未获取到武器 ${props.item.name} 的 Wiki 数据`, color: "error" });
+    showSnackbar.warn(`未获取到武器 ${props.item.name} 的 Wiki 数据`);
     return;
   }
   data.value = res;
-  showSnackbar({ text: `成功获取武器 ${props.item.name} 的 Wiki 数据` });
+  showSnackbar.success(`成功获取武器 ${props.item.name} 的 Wiki 数据`);
   if (data.value?.affix === undefined) return;
   selectItems.value = data.value?.affix.Descriptions.map((item) => item.Level) ?? [];
 }
@@ -105,7 +105,7 @@ onMounted(async () => await loadData());
 
 async function toWiki(): Promise<void> {
   if (props.item.contentId === 0) {
-    showSnackbar({ text: `武器 ${props.item.name} 暂无详情`, color: "warn" });
+    showSnackbar.warn(`武器 ${props.item.name} 暂无详情`);
     return;
   }
   await createObc(props.item.contentId, props.item.name);
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index 30d08549..85287ae8 100644
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -172,7 +172,7 @@ watch(
 async function toCombat(): Promise<void> {
   const check = await TSUserCombat.check();
   if (!check) {
-    showSnackbar({ text: "未检测到剧诗表，请更新数据库！", color: "warn" });
+    showSnackbar.warn("未检测到剧诗表，请更新数据库！");
     return;
   }
   await router.push({ name: "真境剧诗" });
@@ -191,7 +191,7 @@ async function loadAbyss(): Promise<void> {
 
 async function refreshAbyss(): Promise<void> {
   if (!userStore.cookie.value) {
-    showSnackbar({ text: "未登录", color: "error" });
+    showSnackbar.warn("未登录");
     await TGLogger.Warn("[UserAbyss][getAbyssData] 未登录");
     return;
   }
@@ -210,7 +210,7 @@ async function refreshAbyss(): Promise<void> {
       text: `用户${user.value.gameUid}与当前UID${uidCur.value}不一致`,
     });
     if (!confirm) {
-      showSnackbar({ text: "已取消深渊数据刷新", color: "cancel" });
+      showSnackbar.cancel("已取消深渊数据刷新");
       return;
     }
   }
@@ -219,30 +219,28 @@ async function refreshAbyss(): Promise<void> {
   loading.value = true;
   loadingTitle.value = `正在获取${user.value.gameUid}的上期深渊数据`;
   const resP = await TGRequest.User.byCookie.getAbyss(userStore.cookie.value, "2", user.value);
-  if (!("retcode" in resP)) {
-    await TGLogger.Info("[UserAbyss][getAbyssData] 成功获取上期深渊数据");
-    loadingTitle.value = `正在保存${user.value.gameUid}的上期深渊数据`;
-    await TSUserAbyss.saveAbyss(user.value.gameUid, resP);
-  } else {
-    showSnackbar({ text: `[${resP.retcode}]${resP.message}`, color: "error" });
+  if ("retcode" in resP) {
+    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}的上期深渊数据`;
+  await TSUserAbyss.saveAbyss(user.value.gameUid, resP);
   loadingTitle.value = `正在获取${user.value.gameUid}的上期深渊数据`;
   const res = await TGRequest.User.byCookie.getAbyss(userStore.cookie.value, "1", user.value);
-  if (!("retcode" in res)) {
-    loadingTitle.value = `正在保存${user.value.gameUid}的本期深渊数据`;
-    await TSUserAbyss.saveAbyss(user.value.gameUid, res);
-    await TGLogger.Info(`[UserAbyss][getAbyssData] 成功获取${user.value.gameUid}的本期深渊数据`);
-  } else {
-    showSnackbar({ text: `[${res.retcode}]${res.message}`, color: "error" });
+  if ("retcode" in res) {
+    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}的本期深渊数据`;
+  await TSUserAbyss.saveAbyss(user.value.gameUid, res);
+  await TGLogger.Info(`[UserAbyss][getAbyssData] 成功获取${user.value.gameUid}的本期深渊数据`);
   loadingTitle.value = "正在加载深渊数据";
   uidList.value = await TSUserAbyss.getAllUid();
   uidCur.value = user.value.gameUid;
@@ -267,13 +265,13 @@ async function uploadAbyss(): Promise<void> {
   await TGLogger.Info("[UserAbyss][uploadAbyss] 上传深渊数据");
   const abyssData = localAbyss.value.find((item) => item.id === Math.max(...abyssIdList.value));
   if (!abyssData) {
-    showSnackbar({ text: "未找到深渊数据", color: "error" });
+    showSnackbar.warn("未找到深渊数据");
     await TGLogger.Warn("[UserAbyss][uploadAbyss] 未找到深渊数据");
     return;
   }
   const maxFloor = Number(abyssData.maxFloor.split("-")[0]);
   if (isNaN(maxFloor) || maxFloor <= 9) {
-    showSnackbar({ text: "尚未完成深渊，请完成深渊后重试！", color: "error" });
+    showSnackbar.warn("尚未完成深渊，请完成深渊后重试！");
     await TGLogger.Warn(`[UserAbyss][uploadAbyss] 尚未完成深渊 ${abyssData.maxFloor}`);
     return;
   }
@@ -281,7 +279,7 @@ async function uploadAbyss(): Promise<void> {
   const endTime = new Date(abyssData.endTime).getTime();
   const nowTime = new Date().getTime();
   if (nowTime < startTime || nowTime > endTime) {
-    showSnackbar({ text: "非最新深渊数据，请刷新深渊数据后重试！", color: "error" });
+    showSnackbar.warn("非最新深渊数据，请刷新深渊数据后重试！");
     await TGLogger.Warn("[UserAbyss][uploadAbyss] 非最新深渊数据");
     return;
   }
@@ -300,17 +298,17 @@ async function uploadAbyss(): Promise<void> {
     loadingTitle.value = "正在上传深渊数据";
     const res = await Hutao.Abyss.upload(transAbyss);
     loading.value = false;
-    if (res.retcode === 0) {
-      showSnackbar({ text: res.message ?? "上传深渊数据成功" });
-      await TGLogger.Info("[UserAbyss][uploadAbyss] 上传深渊数据成功");
-    } else {
-      showSnackbar({ text: `[${res.retcode}]${res.message}`, color: "error" });
+    if (res.retcode !== 0) {
+      showSnackbar.error(`[${res.retcode}]${res.message}`);
       await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败");
       await TGLogger.Error(`[UserAbyss][uploadAbyss] ${res.retcode} ${res.message}`);
+      return;
     }
+    showSnackbar.success(res.message ?? "上传深渊数据成功");
+    await TGLogger.Info("[UserAbyss][uploadAbyss] 上传深渊数据成功");
   } catch (e) {
     if (e instanceof Error) {
-      showSnackbar({ text: e.message, color: "error" });
+      showSnackbar.error(e.message);
       await TGLogger.Error("[UserAbyss][uploadAbyss] 上传深渊数据失败");
       await TGLogger.Error(`[UserAbyss][uploadAbyss] ${e.message}`);
     }
@@ -320,7 +318,7 @@ async function uploadAbyss(): Promise<void> {
 
 async function deleteAbyss(): Promise<void> {
   if (uidCur.value === undefined || uidCur.value === "") {
-    showSnackbar({ text: "未找到符合条件的数据!", color: "error" });
+    showSnackbar.warn("未选择游戏UID");
     return;
   }
   const confirm = await showConfirm({
@@ -328,7 +326,7 @@ async function deleteAbyss(): Promise<void> {
     text: `将清除${uidCur.value}的所有深渊数据`,
   });
   if (!confirm) {
-    showSnackbar({ text: "已取消删除", color: "cancel" });
+    showSnackbar.cancel("已取消删除");
     return;
   }
   loadingTitle.value = `正在删除 ${uidCur.value} 的深渊数据`;
@@ -336,7 +334,7 @@ async function deleteAbyss(): Promise<void> {
   await TSUserAbyss.delAbyss(uidCur.value);
   await new Promise((resolve) => setTimeout(resolve, 1000));
   loading.value = false;
-  showSnackbar({ text: `已清除 ${uidCur.value} 的深渊数据`, color: "success" });
+  showSnackbar.success(`已清除 ${uidCur.value} 的深渊数据`);
   uidList.value = await TSUserAbyss.getAllUid();
   if (uidList.value.length > 0) uidCur.value = uidList.value[0];
   else uidCur.value = undefined;
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index e5988cc8..d8cf4516 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -169,10 +169,10 @@ onMounted(async () => {
 
 watch(
   () => resetSelect.value,
-  (val) => {
-    if (val) {
+  () => {
+    if (resetSelect.value) {
       selectedList.value = getOrderedList(roleList.value);
-      showSnackbar({ text: "已重置筛选条件", color: "success" });
+      showSnackbar.success("已重置筛选条件");
       if (!dataVal.value) return;
       selectIndex.value = selectedList.value.indexOf(dataVal.value);
       if (selectIndex.value === -1) {
@@ -184,16 +184,16 @@ watch(
 );
 watch(
   () => showMode.value,
-  (val) => {
-    switch (val) {
+  () => {
+    switch (showMode.value) {
       case "classic":
-        showSnackbar({ text: "已切换至经典视图", color: "success" });
+        showSnackbar.success("已切换至经典视图");
         break;
       case "card":
-        showSnackbar({ text: "已切换至卡片视图（简略）", color: "success" });
+        showSnackbar.success("已切换至卡片视图（简略）");
         break;
       case "dev":
-        showSnackbar({ text: "已切换至卡片视图（详细）", color: "success" });
+        showSnackbar.success("已切换至卡片视图（详细）");
         break;
     }
   },
@@ -238,7 +238,7 @@ async function loadRole(): Promise<void> {
   isEmpty.value = roleList.value.length === 0;
   await TGLogger.Info(`[Character][loadRole][${uidCur.value}] 成功加载角色数据`);
   await TGLogger.Info(`[Character][loadRole][${uidCur.value}] 共获取到${roleData.length}个角色`);
-  showSnackbar({ text: `成功加载${roleData.length}个角色`, color: "success" });
+  showSnackbar.success(`成功加载${roleData.length}个角色`);
 }
 
 async function refresh(): Promise<void> {
@@ -266,7 +266,7 @@ async function refresh(): Promise<void> {
       text: `用户${user.value.gameUid}与当前UID${uidCur.value}不一致`,
     });
     if (!confirm) {
-      showSnackbar({ text: "已取消角色数据刷新", color: "cancel" });
+      showSnackbar.cancel("已取消角色数据刷新");
       return;
     }
   }
@@ -275,14 +275,14 @@ async function refresh(): Promise<void> {
   loading.value = true;
   loadData.value = true;
   if (!userStore.cookie.value) {
-    showSnackbar({ text: "请先登录", color: "error" });
+    showSnackbar.warn("请先登录");
     loading.value = false;
     loadData.value = false;
     return;
   }
   const indexRes = await TGRequest.User.byCookie.getAvatarIndex(userStore.cookie.value, user.value);
   if (indexRes.retcode !== 0) {
-    showSnackbar({ text: `[${indexRes.retcode}] ${indexRes.message}` });
+    showSnackbar.error(`[${indexRes.retcode}] ${indexRes.message}`);
     await TGLogger.Error(JSON.stringify(indexRes.message));
     loading.value = false;
     loadData.value = false;
@@ -290,7 +290,7 @@ async function refresh(): Promise<void> {
   }
   const listRes = await TGRequest.User.byCookie.getAvatarList(userStore.cookie.value, user.value);
   if (!Array.isArray(listRes)) {
-    showSnackbar({ text: `[${listRes.retcode}] ${listRes.message}`, color: "error" });
+    showSnackbar.error(`[${listRes.retcode}] ${listRes.message}`);
     await TGLogger.Error(`[Character][refreshRoles][${user.value.gameUid}] 获取角色列表失败`);
     await TGLogger.Error(
       `[Character][refreshRoles][${user.value.gameUid}] ${listRes.retcode} ${listRes.message}`,
@@ -308,7 +308,7 @@ async function refresh(): Promise<void> {
     idList,
   );
   if ("retcode" in res) {
-    showSnackbar({ text: `[${res.retcode}] ${res.message}`, color: "error" });
+    showSnackbar.error(`[${res.retcode}] ${res.message}`);
     await TGLogger.Error(`[Character][refreshRoles][${user.value.gameUid}] 获取角色数据失败`);
     await TGLogger.Error(
       `[Character][refreshRoles][${user.value.gameUid}] ${res.retcode} ${res.message}`,
@@ -331,7 +331,7 @@ async function refresh(): Promise<void> {
 
 async function share(): Promise<void> {
   if (!user.value || isEmpty.value) {
-    showSnackbar({ text: "暂无数据", color: "error" });
+    showSnackbar.warn("暂无数据");
     return;
   }
   await TGLogger.Info(`[Character][shareRoles][${user.value.gameUid}] 正在生成分享图片`);
@@ -350,7 +350,7 @@ async function share(): Promise<void> {
 
 async function deleteUid(): Promise<void> {
   if (!uidCur.value) {
-    showSnackbar({ text: "未找到当前UID", color: "error" });
+    showSnackbar.warn("未找到当前UID");
     return;
   }
   const confirm = await showConfirm({
@@ -358,11 +358,11 @@ async function deleteUid(): Promise<void> {
     text: `将删除${uidCur.value}对应的角色数据`,
   });
   if (!confirm) {
-    showSnackbar({ text: "已取消删除", color: "cancel" });
+    showSnackbar.cancel("已取消删除");
     return;
   }
   await TSUserAvatar.deleteUid(uidCur.value);
-  showSnackbar({ text: `成功删除${uidCur.value}的角色数据` });
+  showSnackbar.success(`成功删除${uidCur.value}的角色数据`);
   await loadUid();
   await loadRole();
 }
@@ -397,10 +397,10 @@ function handleSelect(val: SelectedCValue) {
     return val.area.includes(avatar.area);
   });
   if (filterC.length === 0) {
-    showSnackbar({ text: "未找到符合条件的角色", color: "warn" });
+    showSnackbar.warn("未找到符合条件的角色");
     return;
   }
-  showSnackbar({ text: `筛选出符合条件的角色 ${filterC.length} 个`, color: "success" });
+  showSnackbar.success(`筛选出符合条件的角色 ${filterC.length} 个`);
   const selectedId = filterC.map((item) => item.id);
   selectedList.value = roleList.value.filter((role) => selectedId.includes(role.cid));
   if (!dataVal.value) return;
diff --git a/src/pages/User/Combat.vue b/src/pages/User/Combat.vue
index c177e552..6ba5d518 100644
--- a/src/pages/User/Combat.vue
+++ b/src/pages/User/Combat.vue
@@ -162,7 +162,7 @@ async function loadCombat(): Promise<void> {
 
 async function refreshCombat(): Promise<void> {
   if (!userStore.cookie.value) {
-    showSnackbar({ text: "未登录", color: "error" });
+    showSnackbar.error("未登录");
     await TGLogger.Warn("[UserCombat][getAbyssData] 未登录");
     return;
   }
@@ -181,7 +181,7 @@ async function refreshCombat(): Promise<void> {
       text: `用户${user.value.gameUid}与当前UID${uidCur.value}不一致`,
     });
     if (!confirm) {
-      showSnackbar({ text: "已取消剧诗数据刷新", color: "cancel" });
+      showSnackbar.cancel("已取消剧诗数据刷新");
       return;
     }
   }
@@ -192,11 +192,11 @@ async function refreshCombat(): Promise<void> {
   const res = await TGRequest.User.byCookie.getCombat(userStore.cookie.value, user.value);
   if (res === false) {
     loading.value = false;
-    showSnackbar({ text: "用户未解锁幻想真境剧诗!", color: "warn" });
+    showSnackbar.warn("用户未解锁幻想真境剧诗");
     return;
   }
   if ("retcode" in res) {
-    showSnackbar({ text: `[${res.retcode}]${res.message}`, color: "error" });
+    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}`);
@@ -231,12 +231,12 @@ async function uploadCombat(): Promise<void> {
   await TGLogger.Info("[UserCombat][uploadCombat] 上传剧诗数据");
   const combatData = localCombat.value.find((item) => item.id === Math.max(...combatIdList.value));
   if (!combatData) {
-    showSnackbar({ text: "未找到剧诗数据", color: "error" });
+    showSnackbar.error("未找到剧诗数据");
     await TGLogger.Warn("[UserCombat][uploadCombat] 未找到深渊数据");
     return;
   }
   if (!combatData.hasDetailData) {
-    showSnackbar({ text: "未获取到详情数据", color: "error" });
+    showSnackbar.error("未获取到详情数据");
     await TGLogger.Warn(`[UserCombat][uploadCombat] 未获取到详细数据`);
     return;
   }
@@ -244,7 +244,7 @@ async function uploadCombat(): Promise<void> {
   const endTime = new Date(combatData.endTime).getTime();
   const nowTime = new Date().getTime();
   if (nowTime < startTime || nowTime > endTime) {
-    showSnackbar({ text: "非最新剧诗数据，请刷新剧诗数据后重试！", color: "error" });
+    showSnackbar.warn("非最新剧诗数据，请刷新剧诗数据后重试！");
     await TGLogger.Warn("[UserCombat][uploadCombat] 非最新剧诗数据");
     return;
   }
@@ -257,16 +257,16 @@ async function uploadCombat(): Promise<void> {
     const res = await Hutao.Combat.upload(transCombat);
     loading.value = false;
     if (res.retcode === 0) {
-      showSnackbar({ text: res.message ?? "上传剧诗数据成功" });
+      showSnackbar.success(res.message ?? "上传剧诗数据成功");
       await TGLogger.Info("[UserCombat][uploadCombat] 上传剧诗数据成功");
     } else {
-      showSnackbar({ text: `[${res.retcode}]${res.message}`, color: "error" });
+      showSnackbar.error(`[${res.retcode}]${res.message}`);
       await TGLogger.Error("[UserCombat][uploadCombat] 上传剧诗数据失败");
       await TGLogger.Error(`[UserCombat][uploadCombat] ${res.retcode} ${res.message}`);
     }
   } catch (e) {
     if (e instanceof Error) {
-      showSnackbar({ text: e.message, color: "error" });
+      showSnackbar.error(e.message);
       await TGLogger.Error("[UserCombat][uploadCombat] 上传剧诗数据失败");
       await TGLogger.Error(`[UserCombat][uploadCombat] ${e.message}`);
     }
@@ -276,7 +276,7 @@ async function uploadCombat(): Promise<void> {
 
 async function deleteCombat(): Promise<void> {
   if (uidCur.value === undefined || uidCur.value === "") {
-    showSnackbar({ text: "未找到符合条件的数据!", color: "error" });
+    showSnackbar.error("未找到符合条件的数据!");
     return;
   }
   const confirm = await showConfirm({
@@ -284,7 +284,7 @@ async function deleteCombat(): Promise<void> {
     text: `将清除${uidCur.value}的所有剧诗数据`,
   });
   if (!confirm) {
-    showSnackbar({ text: "已取消删除", color: "cancel" });
+    showSnackbar.cancel("已取消删除");
     return;
   }
   loadingTitle.value = `正在删除 ${uidCur.value} 的剧诗数据`;
@@ -292,7 +292,7 @@ async function deleteCombat(): Promise<void> {
   await TSUserCombat.delCombat(uidCur.value);
   await new Promise((resolve) => setTimeout(resolve, 1000));
   loading.value = false;
-  showSnackbar({ text: `已清除 ${uidCur.value} 的剧诗数据`, color: "success" });
+  showSnackbar.success(`已清除 ${uidCur.value} 的剧诗数据`);
   uidList.value = await TSUserCombat.getAllUid();
   if (uidList.value.length > 0) uidCur.value = uidList.value[0];
   else uidCur.value = undefined;
diff --git a/src/pages/User/Gacha.vue b/src/pages/User/Gacha.vue
index 422e6bc7..4c463997 100644
--- a/src/pages/User/Gacha.vue
+++ b/src/pages/User/Gacha.vue
@@ -97,7 +97,7 @@ watch(
   async (newUid) => {
     if (!newUid) return;
     gachaListCur.value = await TSUserGacha.getGachaRecords(newUid);
-    showSnackbar({ text: `成功获取 ${gachaListCur.value.length} 条祈愿数据` });
+    showSnackbar.success(`成功获取 ${gachaListCur.value.length} 条祈愿数据`);
     await TGLogger.Info(
       `[UserGacha][${newUid}][watch] 成功获取 ${gachaListCur.value.length} 条祈愿数据`,
     );
@@ -109,10 +109,7 @@ onMounted(async () => {
   loadingTitle.value = "正在获取祈愿 UID 列表";
   selectItem.value = await TSUserGacha.getUidList();
   if (selectItem.value.length === 0) {
-    showSnackbar({
-      color: "error",
-      text: "暂无祈愿数据，请先导入祈愿数据",
-    });
+    showSnackbar.error("暂无祈愿数据，请先导入祈愿数据");
     loading.value = false;
     await TGLogger.Warn("[UserGacha][onMounted] 暂无祈愿数据，请先导入祈愿数据");
     return;
@@ -125,9 +122,7 @@ onMounted(async () => {
   );
   loadingTitle.value = "正在渲染数据";
   loading.value = false;
-  showSnackbar({
-    text: `成功获取 ${gachaListCur.value.length} 条祈愿数据`,
-  });
+  showSnackbar.success(`成功获取 ${gachaListCur.value.length} 条祈愿数据`);
 });
 
 // 刷新按钮点击事件
@@ -148,14 +143,14 @@ async function confirmRefresh(force: boolean): Promise<void> {
       text: `用户${account.value.gameUid}与当前UID${uidCur.value}不一致`,
     });
     if (!confirm) {
-      showSnackbar({ text: "已取消祈愿数据刷新", color: "cancel" });
+      showSnackbar.cancel("已取消祈愿数据刷新");
       return;
     }
   }
   loadingTitle.value = "正在获取 authkey";
   loading.value = true;
   if (!userStore.cookie.value) {
-    showSnackbar({ color: "error", text: "请先登录" });
+    showSnackbar.error("请先登录");
     loading.value = false;
     await TGLogger.Warn("[UserGacha][${account.gameUid}][confirmRefresh] 未检测到 cookie");
     return;
@@ -165,7 +160,7 @@ async function confirmRefresh(force: boolean): Promise<void> {
     authkey.value = authkeyRes;
     await TGLogger.Info(`[UserGacha][${account.value.gameUid}][confirmRefresh] 成功获取 authkey`);
   } else {
-    showSnackbar({ color: "error", text: "获取 authkey 失败" });
+    showSnackbar.error("获取 authkey 失败");
     await TGLogger.Error(`[UserGacha][${account.value.gameUid}][confirmRefresh] 获取 authkey 失败`);
     await TGLogger.Error(
       `[UserGacha][${account.value.gameUid}][confirmRefresh] ${authkeyRes.retcode} ${authkeyRes.message}`,
@@ -225,11 +220,7 @@ async function getGachaLogs(pool: string, endId: string = "0", check?: string):
       `[UserGacha][${uid}][getGachaLogs] 成功获取到 ${gachaRes.length} 条祈愿数据`,
     );
     if (gachaRes.length === 0) {
-      await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve("");
-        }, 1000);
-      });
+      await new Promise((resolve) => setTimeout(() => resolve(""), 1000));
       return;
     }
     const uigfList: TGApp.Plugins.UIGF.GachaItem[] = [];
@@ -273,7 +264,7 @@ async function getGachaLogs(pool: string, endId: string = "0", check?: string):
       await getGachaLogs(pool, gachaRes[gachaRes.length - 1].id, check);
     }
   } else {
-    showSnackbar({ color: "error", text: `[${pool}][${gachaRes.retcode}] ${gachaRes.message}` });
+    showSnackbar.error(`[${pool}][${gachaRes.retcode}] ${gachaRes.message}`);
     await TGLogger.Error(`[UserGacha][${uid}][getGachaLogs] 获取祈愿数据失败`);
     await TGLogger.Error(
       `[UserGacha][${uid}][getGachaLogs] ${gachaRes.retcode} ${gachaRes.message}`,
@@ -292,7 +283,7 @@ async function handleImportBtn(isV4: boolean): Promise<void> {
     directory: false,
   });
   if (selectedFile === null) {
-    showSnackbar({ color: "cancel", text: "已取消文件选择" });
+    showSnackbar.cancel("已取消文件选择");
     return;
   }
   const check = await verifyUigfData(selectedFile, isV4);
@@ -311,7 +302,7 @@ async function importUigf4(filePath: string): Promise<void> {
     text: `共 ${uidCount} 个 UID，${dataCount} 条数据`,
   });
   if (!res) {
-    showSnackbar({ color: "cancel", text: "已取消祈愿数据导入" });
+    showSnackbar.cancel("已取消祈愿数据导入");
     return;
   }
   loadingTitle.value = "正在导入祈愿数据(v4)";
@@ -321,13 +312,11 @@ async function importUigf4(filePath: string): Promise<void> {
     await TSUserGacha.mergeUIGF4(account);
   }
   loading.value = false;
-  showSnackbar({ text: `成功导入 ${uidCount} 个 UID 的 ${dataCount} 条祈愿数据` });
+  showSnackbar.success(`成功导入 ${uidCount} 个 UID 的 ${dataCount} 条祈愿数据`);
   await TGLogger.Info(
     `[UserGacha][importUigf4] 成功导入 ${uidCount} 个 UID，${dataCount} 条祈愿数据`,
   );
-  setTimeout(() => {
-    window.location.reload();
-  }, 1000);
+  setTimeout(() => window.location.reload(), 1000);
 }
 
 async function importUigf(filePath: string): Promise<void> {
@@ -337,25 +326,23 @@ async function importUigf(filePath: string): Promise<void> {
     text: `UID：${remoteData.info.uid}，共 ${remoteData.list.length} 条数据`,
   });
   if (!confirm) {
-    showSnackbar({ color: "cancel", text: "已取消祈愿数据导入" });
+    showSnackbar.cancel("已取消祈愿数据导入");
     return;
   }
   loadingTitle.value = "正在导入祈愿数据";
   loading.value = true;
   if (remoteData.list.length === 0) {
     loading.value = false;
-    showSnackbar({ color: "error", text: "导入的祈愿数据为空" });
+    showSnackbar.error("导入的祈愿数据为空");
     return;
   }
   await TSUserGacha.mergeUIGF(remoteData.info.uid, remoteData.list);
   loading.value = false;
-  showSnackbar({ text: `成功导入 ${remoteData.list.length} 条祈愿数据` });
+  showSnackbar.success(`成功导入 ${remoteData.list.length} 条祈愿数据`);
   await TGLogger.Info(
     `[UserGacha][importUigf] 成功导入 ${remoteData.info.uid} 的 ${remoteData.list.length} 条祈愿数据`,
   );
-  setTimeout(() => {
-    window.location.reload();
-  }, 1000);
+  setTimeout(() => window.location.reload(), 1000);
 }
 
 // 导出当前UID的祈愿数据
@@ -364,7 +351,7 @@ async function exportUigf(): Promise<void> {
   await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf] 导出祈愿数据`);
   const gachaList = await TSUserGacha.getGachaRecords(uidCur.value);
   if (gachaList.length === 0) {
-    showSnackbar({ color: "error", text: `UID ${uidCur.value} 暂无祈愿数据` });
+    showSnackbar.error(`UID ${uidCur.value} 暂无祈愿数据`);
     return;
   }
   const res = await showConfirm({
@@ -372,7 +359,7 @@ async function exportUigf(): Promise<void> {
     text: `UID：${uidCur.value}，共 ${gachaList.length} 条数据`,
   });
   if (!res) {
-    showSnackbar({ color: "cancel", text: `已取消 UID ${uidCur.value} 的祈愿数据导出` });
+    showSnackbar.cancel(`已取消 UID ${uidCur.value} 的祈愿数据导出`);
     return;
   }
   const file = await save({
@@ -381,7 +368,7 @@ async function exportUigf(): Promise<void> {
     defaultPath: `${await path.downloadDir()}${path.sep()}UIGF_${uidCur.value}.json`,
   });
   if (!file) {
-    showSnackbar({ color: "cancel", text: "已取消文件保存" });
+    showSnackbar.cancel("已取消文件保存");
     return;
   }
   await TGLogger.Info(
@@ -391,7 +378,7 @@ async function exportUigf(): Promise<void> {
   loading.value = true;
   await exportUigfData(uidCur.value, gachaList, file);
   loading.value = false;
-  showSnackbar({ text: `成功导出 ${uidCur.value} 的祈愿数据` });
+  showSnackbar.success(`成功导出 ${uidCur.value} 的祈愿数据`);
   await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf] 导出祈愿数据完成`);
 }
 
@@ -400,7 +387,7 @@ async function exportUigf4(): Promise<void> {
   if (!uidCur.value) return;
   const checkConfirm = await showConfirm({ title: "确定导出UIGFv4格式的祈愿数据？" });
   if (!checkConfirm) {
-    showSnackbar({ color: "cancel", text: "已取消 UIGF v4 格式导出" });
+    showSnackbar.cancel("已取消 UIGF v4 格式导出");
     return;
   }
   await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf4] 导出祈愿数据(v4)`);
@@ -410,28 +397,23 @@ async function exportUigf4(): Promise<void> {
     text: "取消则只导出当前 UID 的祈愿数据",
   });
   if (allConfirm === undefined) {
-    showSnackbar({ color: "cancel", text: "已取消祈愿数据导出" });
+    showSnackbar.cancel("已取消 UIGF v4 格式导出");
     return;
   }
   if (!allConfirm) {
     const gachaList = await TSUserGacha.getGachaRecords(uidCur.value);
     if (gachaList.length === 0) {
-      showSnackbar({ color: "error", text: `UID ${uidCur.value} 暂无祈愿数据` });
+      showSnackbar.error(`UID ${uidCur.value} 暂无祈愿数据`);
       return;
     }
   }
   const file = await save({
     title: "选择导出祈愿数据的文件路径",
-    filters: [
-      {
-        name: "UIGF JSON",
-        extensions: ["json"],
-      },
-    ],
+    filters: [{ name: "UIGF JSON", extensions: ["json"] }],
     defaultPath: `${await path.downloadDir()}${path.sep()}UIGF4.json`,
   });
   if (!file) {
-    showSnackbar({ color: "cancel", text: "已取消文件保存" });
+    showSnackbar.cancel("已取消文件保存");
     return;
   }
   loadingTitle.value = "正在导出祈愿数据";
@@ -442,14 +424,14 @@ async function exportUigf4(): Promise<void> {
     await exportUigf4Data(file);
   }
   loading.value = false;
-  showSnackbar({ text: "祈愿数据已成功导出" });
+  showSnackbar.success("祈愿数据已成功导出");
   await TGLogger.Info(`[UserGacha][${uidCur.value}][exportUigf4] 导出祈愿数据完成`);
 }
 
 // 删除当前 UID 的祈愿数据
 async function deleteGacha(): Promise<void> {
   if (gachaListCur.value.length === 0 || !uidCur.value) {
-    showSnackbar({ color: "error", text: "暂无祈愿数据" });
+    showSnackbar.error("暂无祈愿数据");
     return;
   }
   await TGLogger.Info(`[UserGacha][${uidCur.value}][deleteGacha] 删除祈愿数据`);
@@ -458,7 +440,7 @@ async function deleteGacha(): Promise<void> {
     text: `UID：${uidCur.value}，共 ${gachaListCur.value.length} 条数据`,
   });
   if (!firstConfirm) {
-    showSnackbar({ color: "cancel", text: "已取消祈愿数据删除" });
+    showSnackbar.cancel("已取消祈愿数据删除");
     await TGLogger.Info(`[UserGacha][${uidCur.value}][deleteGacha] 已取消祈愿数据删除`);
     return;
   }
@@ -470,7 +452,7 @@ async function deleteGacha(): Promise<void> {
       text: `UID：${uidCur.value}，共 ${gachaListCur.value.length} 条数据`,
     });
     if (!secondConfirm) {
-      showSnackbar({ color: "cancel", text: "已取消祈愿数据删除" });
+      showSnackbar.cancel("已取消祈愿数据删除");
       await TGLogger.Info(`[UserGacha][${uidCur.value}][deleteGacha] 已取消祈愿数据删除`);
       return;
     }
@@ -479,13 +461,11 @@ async function deleteGacha(): Promise<void> {
   loading.value = true;
   await TSUserGacha.deleteGachaRecords(uidCur.value);
   loading.value = false;
-  showSnackbar({ text: `已成功删除 ${uidCur.value} 的祈愿数据` });
+  showSnackbar.success(`已成功删除 ${uidCur.value} 的祈愿数据`);
   await TGLogger.Info(
     `[UserGacha][${uidCur.value}][deleteGacha] 成功删除 ${gachaListCur.value.length} 条祈愿数据`,
   );
-  setTimeout(() => {
-    window.location.reload();
-  }, 1000);
+  setTimeout(() => window.location.reload(), 1000);
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index 8cdb90b8..a74fb235 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -139,7 +139,7 @@ async function refreshRecord(): Promise<void> {
       text: `用户${user.value.gameUid}与当前UID${uidCur.value}不一致`,
     });
     if (!confirm) {
-      showSnackbar({ text: "已取消战绩数据刷新", color: "cancel" });
+      showSnackbar.cancel("已取消战绩数据刷新");
       return;
     }
   }
@@ -147,7 +147,7 @@ async function refreshRecord(): Promise<void> {
   loadingTitle.value = "正在获取战绩数据";
   loading.value = true;
   if (!userStore.cookie.value) {
-    showSnackbar({ text: "请先登录", color: "error" });
+    showSnackbar.warn("请先登录");
     loading.value = false;
     await TGLogger.Warn(`[UserRecord][refresh][${user.value.gameUid}] 未登录`);
     return;
@@ -167,7 +167,7 @@ async function refreshRecord(): Promise<void> {
     await loadRecord();
     if (recordData.value === undefined) await loadRecord();
   } else {
-    showSnackbar({ text: `[${res.retcode}] ${res.message}`, color: "error" });
+    showSnackbar.error(`[${res.retcode}] ${res.message}`);
     await TGLogger.Error(`[UserRecord][refresh][${user.value.gameUid}] 获取战绩数据失败`);
     await TGLogger.Error(
       `[UserRecord][refresh][${user.value.gameUid}] ${res.retcode} ${res.message}`,
@@ -178,7 +178,7 @@ async function refreshRecord(): Promise<void> {
 
 async function shareRecord(): Promise<void> {
   if (!recordData.value) {
-    showSnackbar({ text: "未找到战绩数据，请尝试刷新", color: "warn" });
+    showSnackbar.warn("未找到战绩数据，请尝试刷新");
     return;
   }
   await TGLogger.Info(`[UserRecord][shareRecord][${user.value.gameUid}] 生成分享图片`);
@@ -195,7 +195,7 @@ async function shareRecord(): Promise<void> {
 
 async function deleteRecord(): Promise<void> {
   if (!uidCur.value) {
-    showSnackbar({ text: "未找到当前UID", color: "error" });
+    showSnackbar.warn("未找到当前UID");
     return;
   }
   const confirm = await showConfirm({
@@ -203,11 +203,11 @@ async function deleteRecord(): Promise<void> {
     text: `将删除${uidCur.value}对应的战绩数据`,
   });
   if (!confirm) {
-    showSnackbar({ text: "已取消删除战绩数据", color: "cancel" });
+    showSnackbar.cancel("已取消删除战绩数据");
     return;
   }
   await TSUserRecord.deleteUid(uidCur.value);
-  showSnackbar({ text: `成功删除${uidCur.value}的战绩数据` });
+  showSnackbar.success(`成功删除${uidCur.value}的战绩数据`);
   await loadUid();
   await loadRecord();
 }
diff --git a/src/pages/WIKI/Character.vue b/src/pages/WIKI/Character.vue
index bf357756..3e1be0ec 100644
--- a/src/pages/WIKI/Character.vue
+++ b/src/pages/WIKI/Character.vue
@@ -61,7 +61,7 @@ onBeforeMount(() => {
     curItem.value = item;
     return;
   }
-  showSnackbar({ text: `角色 ${id} 不存在`, color: "warn" });
+  showSnackbar.warn(`角色 ${id} 不存在`);
   curItem.value = cardsInfo.value[0];
 });
 
@@ -78,10 +78,10 @@ function handleSelect(val: SelectedCValue) {
     return val.area.includes(item.area);
   });
   if (filterC.length === 0) {
-    showSnackbar({ text: "未找到符合条件的角色", color: "warn" });
+    showSnackbar.warn("未找到符合条件的角色");
     return;
   }
-  showSnackbar({ text: `筛选出符合条件的角色 ${filterC.length} 个` });
+  showSnackbar.success(`筛选出符合条件的角色 ${filterC.length} 个`);
   cardsInfo.value = filterC;
 }
 
@@ -96,7 +96,7 @@ async function switchC(item: TGApp.App.Character.WikiBriefInfo): Promise<void> {
 async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void> {
   if (!item) return;
   if (item.contentId === 0) {
-    showSnackbar({ text: `角色 ${item.name} 暂无观测枢页面`, color: "warn" });
+    showSnackbar.warn(`角色 ${item.name} 暂无观测枢页面`);
     return;
   }
   const confirm = await showConfirm({
@@ -104,7 +104,7 @@ async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void>
     text: "是否打开观测枢页面？",
   });
   if (!confirm) {
-    showSnackbar({ text: "已取消", color: "cancel" });
+    showSnackbar.cancel("已取消打开观测枢页面");
     return;
   }
   await createObc(item.contentId, item.name);
diff --git a/src/pages/WIKI/Material.vue b/src/pages/WIKI/Material.vue
index 3fb64351..ddb44aed 100644
--- a/src/pages/WIKI/Material.vue
+++ b/src/pages/WIKI/Material.vue
@@ -102,7 +102,7 @@ onMounted(() => {
     }
   });
   sortData(WikiMaterialData);
-  showSnackbar({ text: `成功获取${sortMaterialsData.value.length}条数据` });
+  showSnackbar.success(`成功获取${sortMaterialsData.value.length}条数据`);
 });
 
 function getSelectMaterials(): TGApp.App.Material.WikiItem[] {
@@ -150,23 +150,22 @@ function searchMaterial() {
   let selectData = getSelectMaterials();
   if (search.value === undefined || search.value === "") {
     if (sortMaterialsData.value.length === selectData.length) {
-      showSnackbar({ text: "请输入搜索内容!", color: "warn" });
+      showSnackbar.warn("请输入搜索内容!");
       return;
-    } else {
-      sortData(selectData);
-      showSnackbar({ text: "已重置!" });
     }
+    sortData(selectData);
+    showSnackbar.success("已重置!");
     return;
   }
   selectData = selectData.filter(
     (i) => i.name.includes(search.value!) || i.description.includes(search.value!),
   );
   if (selectData.length === 0) {
-    showSnackbar({ text: "未找到符合条件的材料!", color: "warn" });
+    showSnackbar.warn("未找到符合条件的材料!");
     return;
   }
   sortData(selectData);
-  showSnackbar({ text: `找到 ${selectData.length} 条符合条件的内容` });
+  showSnackbar.success(`找到${selectData.length}条符合条件的材料`);
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/pages/WIKI/Namecard.vue b/src/pages/WIKI/Namecard.vue
index 24ea90e4..aac2595e 100644
--- a/src/pages/WIKI/Namecard.vue
+++ b/src/pages/WIKI/Namecard.vue
@@ -55,10 +55,7 @@ function sortData(data: TGApp.App.NameCard.Item[]) {
   curIndex.value = 0;
   total.value = sortNameCardsData.value.length;
   curNameCard.value = sortNameCardsData.value[curIndex.value];
-  showSnackbar({
-    text: `共搜索到 ${sortNameCardsData.value.length} 个结果`,
-    color: "success",
-  });
+  showSnackbar.success(`共搜索到 ${sortNameCardsData.value.length} 个结果`);
 }
 
 function toNameCard(item: TGApp.App.NameCard.Item) {
@@ -70,19 +67,13 @@ function toNameCard(item: TGApp.App.NameCard.Item) {
 function switchCard(isNext: boolean) {
   if (isNext) {
     if (curIndex.value === total.value - 1) {
-      showSnackbar({
-        text: "已经是最后一个了",
-        color: "warn",
-      });
+      showSnackbar.warn("已经是最后一个了");
       return;
     }
     curIndex.value++;
   } else {
     if (curIndex.value === 0) {
-      showSnackbar({
-        text: "已经是第一个了",
-        color: "warn",
-      });
+      showSnackbar.warn("已经是第一个了");
       return;
     }
     curIndex.value--;
@@ -95,10 +86,7 @@ function searchNamecard() {
     sortData(AppNameCardsData);
   } else if (search.value === "") {
     if (sortNameCardsData.value.length === AppNameCardsData.length) {
-      showSnackbar({
-        text: "请先输入搜索内容",
-        color: "warn",
-      });
+      showSnackbar.warn("请先输入搜索内容");
     } else {
       sortData(AppNameCardsData);
     }
diff --git a/src/pages/WIKI/Weapon.vue b/src/pages/WIKI/Weapon.vue
index 5affad56..52400b88 100644
--- a/src/pages/WIKI/Weapon.vue
+++ b/src/pages/WIKI/Weapon.vue
@@ -61,7 +61,7 @@ onBeforeMount(() => {
     curItem.value = item;
     return;
   }
-  showSnackbar({ text: `武器 ${id} 不存在`, color: "warn" });
+  showSnackbar.warn(`武器 ${id} 不存在`);
   curItem.value = cardsInfo.value[0];
 });
 
@@ -75,10 +75,10 @@ function handleSelectW(val: SelectedWValue) {
     return val.weapon.includes(match[1]);
   });
   if (filterW.length === 0) {
-    showSnackbar({ text: "未找到符合条件的武器", color: "warn" });
+    showSnackbar.warn("未找到符合条件的武器");
     return;
   }
-  showSnackbar({ text: `找到 ${filterW.length} 件符合条件的武器` });
+  showSnackbar.success(`找到 ${filterW.length} 件符合条件的武器`);
   cardsInfo.value = filterW;
 }
 
@@ -89,7 +89,7 @@ async function switchW(item: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
 async function toOuter(item?: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
   if (!item) return;
   if (item.contentId === 0) {
-    showSnackbar({ text: `武器 ${item.name} 暂无观测枢页面`, color: "warn" });
+    showSnackbar.warn(`武器 ${item.name} 暂无观测枢页面`);
     return;
   }
   const confirm = await showConfirm({
@@ -97,7 +97,7 @@ async function toOuter(item?: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
     text: "是否打开观测枢页面？",
   });
   if (!confirm) {
-    showSnackbar({ text: "已取消", color: "cancel" });
+    showSnackbar.cancel("已取消打开观测枢页面");
     return;
   }
   await createObc(item.contentId, item.name);
diff --git a/src/pages/common/Achievements.vue b/src/pages/common/Achievements.vue
index 5b7d21b1..dbbc2f79 100644
--- a/src/pages/common/Achievements.vue
+++ b/src/pages/common/Achievements.vue
@@ -98,7 +98,7 @@ let achiListener: UnlistenFn | null = null;
 async function switchHideFin() {
   const text = hideFin.value ? "显示已完成" : "隐藏已完成";
   hideFin.value = !hideFin.value;
-  showSnackbar({ text: `已${text}`, color: "success" });
+  showSnackbar.success(`已${text}`);
 }
 
 onMounted(async () => {
@@ -140,20 +140,12 @@ async function importJson(): Promise<void> {
   const selectedFile = await open({
     title: "选择 UIAF 数据文件",
     multiple: false,
-    filters: [
-      {
-        name: "UIAF JSON",
-        extensions: ["json"],
-      },
-    ],
+    filters: [{ name: "UIAF JSON", extensions: ["json"] }],
     defaultPath: await path.downloadDir(),
     directory: false,
   });
   if (selectedFile === null) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消文件选择",
-    });
+    showSnackbar.cancel("已取消文件选择");
     await TGLogger.Info("[Achievements][importJson] 已取消文件选择");
     return;
   }
@@ -166,12 +158,12 @@ async function importJson(): Promise<void> {
     input: uidCur.value.toString(),
   });
   if (uidInput === false) {
-    showSnackbar({ text: "已取消存档导入!", color: "cancel" });
+    showSnackbar.cancel("已取消存档导入");
     return;
   }
   if (uidInput === undefined) uidInput = uidCur.value.toString();
   else if (isNaN(Number(uidInput))) {
-    showSnackbar({ text: "请输入合法数字", color: "warn" });
+    showSnackbar.warn("请输入合法数字");
     return;
   }
   const remoteRaw = await readUiafData(selectedFile);
@@ -186,15 +178,13 @@ async function importJson(): Promise<void> {
   loadingTitle.value = "正在合并成就数据";
   await TSUserAchi.mergeUiaf(remoteRaw.list, Number(uidInput));
   loadingTitle.value = "即将刷新页面";
-  setTimeout(() => {
-    window.location.reload();
-  }, 1000);
+  setTimeout(() => window.location.reload(), 1000);
 }
 
 async function exportJson(): Promise<void> {
   await TGLogger.Info("[Achievements][exportJson] 导出 UIAF 数据");
   if (overview.value.fin === 0) {
-    showSnackbar({ color: "error", text: "没有可导出的数据" });
+    showSnackbar.warn("没有可导出的数据");
     await TGLogger.Warn("[Achievements][exportJson] 没有可导出的数据");
     return;
   }
@@ -205,21 +195,16 @@ async function exportJson(): Promise<void> {
   const fileName = `UIAF_${UiafData.info.export_app}_${UiafData.info.export_app_version}_${uidCur.value}`;
   const isSave = await save({
     title: "导出 UIAF 数据",
-    filters: [
-      {
-        name: "UIAF JSON",
-        extensions: ["json"],
-      },
-    ],
+    filters: [{ name: "UIAF JSON", extensions: ["json"] }],
     defaultPath: `${await path.downloadDir()}${path.sep()}${fileName}.json`,
   });
   if (isSave === null) {
-    showSnackbar({ color: "warn", text: "已取消导出" });
+    showSnackbar.cancel("已取消导出");
     await TGLogger.Info("[Achievements][exportJson] 已取消导出");
     return;
   }
   await writeTextFile(isSave, JSON.stringify(UiafData));
-  showSnackbar({ text: "导出成功", color: "success" });
+  showSnackbar.success("导出成功");
   await TGLogger.Info("[Achievements][exportJson] 导出成功");
   await TGLogger.Info(`[Achievements][exportJson] 导出路径：${isSave}`);
 }
@@ -231,10 +216,7 @@ async function handleImportOuter(app: string): Promise<void> {
     text: `来源APP：${app}`,
   });
   if (!confirm) {
-    showSnackbar({
-      color: "warn",
-      text: "已取消导入",
-    });
+    showSnackbar.cancel("已取消导入");
     await TGLogger.Info("[Achievements][handleImportOuter] 已取消导入");
     return;
   }
@@ -249,12 +231,12 @@ async function handleImportOuter(app: string): Promise<void> {
     input: uidCur.value.toString(),
   });
   if (uidInput === false) {
-    showSnackbar({ text: "已取消存档导入!", color: "cancel" });
+    showSnackbar.cancel("已取消存档导入");
     return;
   }
   if (uidInput === undefined) uidInput = uidCur.value.toString();
   else if (isNaN(Number(uidInput))) {
-    showSnackbar({ text: "请输入合法数字", color: "warn" });
+    showSnackbar.warn("请输入合法数字");
     return;
   }
   const data: TGApp.Plugins.UIAF.Data = JSON.parse(clipboard);
@@ -262,11 +244,9 @@ async function handleImportOuter(app: string): Promise<void> {
   loading.value = true;
   await TSUserAchi.mergeUiaf(data.list, Number(uidInput));
   loading.value = false;
-  showSnackbar({ color: "success", text: "导入成功，即将刷新页面" });
+  showSnackbar.success("导入成功，即将刷新页面");
   await TGLogger.Info("[Achievements][handleImportOuter] 导入成功");
-  setTimeout(async () => {
-    await router.push("/achievements");
-  }, 1500);
+  setTimeout(async () => await router.push("/achievements"), 1500);
 }
 
 async function createUid(): Promise<void> {
@@ -276,20 +256,20 @@ async function createUid(): Promise<void> {
     text: "UID:",
   });
   if (uidInput === undefined || uidInput === false) {
-    showSnackbar({ text: "已取消", color: "cancel" });
+    showSnackbar.cancel("已取消");
     return;
   }
   if (isNaN(Number(uidInput))) {
-    showSnackbar({ text: "请输入合法数字", color: "warn" });
+    showSnackbar.warn("请输入合法数字");
     return;
   }
   if (uidList.value.includes(Number(uidInput))) {
-    showSnackbar({ text: "该存档已存在！", color: "warn" });
+    showSnackbar.warn("该存档已存在！");
     return;
   }
   uidList.value.push(Number(uidInput));
   uidCur.value = Number(uidInput);
-  showSnackbar({ text: `切换到新存档 ${Number(uidInput)}`, color: "success" });
+  showSnackbar.success(`切换到新存档 ${Number(uidInput)}`);
 }
 
 async function deleteUid(): Promise<void> {
@@ -298,7 +278,7 @@ async function deleteUid(): Promise<void> {
     text: `确认则清空存档-${uidCur.value}对应数据`,
   });
   if (uidInput === undefined || !uidInput) {
-    showSnackbar({ text: "已取消删除存档", color: "cancel" });
+    showSnackbar.cancel("已取消删除存档");
     return;
   }
   await TSUserAchi.delUid(uidCur.value);
diff --git a/src/pages/common/Announcements.vue b/src/pages/common/Announcements.vue
index f917be7f..ce145c87 100644
--- a/src/pages/common/Announcements.vue
+++ b/src/pages/common/Announcements.vue
@@ -116,21 +116,27 @@ const annoCards = ref<AnnoCard>({
   game: [],
 });
 
-watch(curRegion, async (value) => {
-  appStore.server = value;
-  const name = getRegionName(value);
-  await TGLogger.Info(`[Announcements][watch][curRegionName] 切换服务器：${name}`);
-  await loadData();
-  showSnackbar({ text: `服务器切换为：${name}`, color: "success" });
-});
+watch(
+  () => curRegion.value,
+  async () => {
+    appStore.server = curRegion.value;
+    const name = getRegionName(curRegion.value);
+    await TGLogger.Info(`[Announcements][watch][curRegionName] 切换服务器：${name}`);
+    await loadData();
+    showSnackbar.success(`服务器切换为：${name}`);
+  },
+);
 
-watch(curLang, async (value) => {
-  appStore.lang = value;
-  const name = getLangName(value);
-  await TGLogger.Info(`[Announcements][watch][curLangName] 切换语言：${name}`);
-  await loadData();
-  showSnackbar({ text: `语言切换为：${name}`, color: "success" });
-});
+watch(
+  () => curLang.value,
+  async () => {
+    appStore.lang = curLang.value;
+    const name = getLangName(curLang.value);
+    await TGLogger.Info(`[Announcements][watch][curLangName] 切换语言：${name}`);
+    await loadData();
+    showSnackbar.success(`语言切换为：${name}`);
+  },
+);
 
 onMounted(async () => {
   await TGLogger.Info("[Announcements][onMounted] 打开公告页面");
@@ -158,9 +164,7 @@ async function loadData(): Promise<void> {
     game: listCards.filter((item) => item.typeLabel === AnnoType.game),
   };
   loadingTitle.value = "正在渲染公告数据";
-  await nextTick(async () => {
-    loading.value = false;
-  });
+  await nextTick(() => (loading.value = false));
 }
 
 function getRegionName(value: AnnoServer): string {
diff --git a/src/pages/common/Config.vue b/src/pages/common/Config.vue
index b5f89b24..a639bfcb 100644
--- a/src/pages/common/Config.vue
+++ b/src/pages/common/Config.vue
@@ -135,7 +135,7 @@ import TGRequest from "../../web/request/TGRequest.js";
 // Store
 const appStore = useAppStore();
 const homeStore = useHomeStore();
-
+// @ts-expect-error-next-line
 const isDevEnv = ref<boolean>(import.meta.env.MODE === "development");
 
 // loading
@@ -167,10 +167,7 @@ async function confirmBackup(): Promise<void> {
     text: "取消则自选路径，点击外部不做处理",
   });
   if (res === undefined) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消备份",
-    });
+    showSnackbar.cancel("已取消备份");
     return;
   }
   let saveDir = appStore.userDir;
@@ -181,10 +178,7 @@ async function confirmBackup(): Promise<void> {
       multiple: false,
     });
     if (dir === null) {
-      showSnackbar({
-        color: "error",
-        text: "路径不能为空!",
-      });
+      showSnackbar.error("路径不能为空!");
       return;
     }
     await TGLogger.Info(`[Config][confirmBackup] 选择备份路径 ${dir.toString()}`);
@@ -196,7 +190,7 @@ async function confirmBackup(): Promise<void> {
   loading.value = true;
   await backUpUserData(saveDir);
   loading.value = false;
-  showSnackbar({ text: "数据已备份!" });
+  showSnackbar.success("数据已备份!");
   await TGLogger.Info("[Config][confirmBackup] 备份完成");
 }
 
@@ -207,10 +201,7 @@ async function confirmRestore(): Promise<void> {
     text: "取消则自选路径，点击外部不做处理",
   });
   if (resConfirm === undefined) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消恢复",
-    });
+    showSnackbar.cancel("已取消恢复");
     return;
   }
   let saveDir = appStore.userDir;
@@ -221,10 +212,7 @@ async function confirmRestore(): Promise<void> {
       multiple: false,
     });
     if (dir === null) {
-      showSnackbar({
-        color: "error",
-        text: "路径不能为空!",
-      });
+      showSnackbar.error("路径不能为空!");
       return;
     }
     await TGLogger.Info(`[Config][confirmRestore] 选择恢复路径 ${dir.toString()}`);
@@ -233,25 +221,19 @@ async function confirmRestore(): Promise<void> {
     await TGLogger.Info(`[Config][confirmRestore] 恢复到默认路径 ${saveDir}`);
   }
   loadingTitle.value = "正在恢复数据...";
+  loadingSub.value = "请稍后...";
   loading.value = true;
-  loadingSub.value = "祈愿数据需单独恢复";
   await restoreUserData(saveDir);
   loading.value = false;
-  showSnackbar({ text: "数据已恢复!" });
+  showSnackbar.success("数据已恢复!");
   await TGLogger.Info("[Config][confirmRestore] 恢复完成");
 }
 
 // 更新数据
 async function confirmUpdate(title?: string): Promise<void> {
-  const res = await showConfirm({
-    title: title ?? "确认更新数据吗？",
-    text: "请确保存在备份数据",
-  });
+  const res = await showConfirm({ title: title ?? "确认更新数据吗？", text: "请确保存在备份数据" });
   if (!res) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消更新数据库",
-    });
+    showSnackbar.cancel("已取消更新数据库");
     return;
   }
   loadingTitle.value = "正在更新数据库...";
@@ -259,11 +241,8 @@ async function confirmUpdate(title?: string): Promise<void> {
   await TGSqlite.update();
   appStore.buildTime = getBuildTime();
   loading.value = false;
-  showSnackbar({
-    text: "数据库已更新!",
-  });
+  showSnackbar.success("数据库已更新!");
   await TGLogger.Info("[Config][confirmUpdate] 数据库更新完成");
-  // 刷新
   window.location.reload();
 }
 
@@ -276,25 +255,17 @@ async function confirmUpdateDevice(force?: boolean): Promise<void> {
       text: `DeviceFp:${appStore.deviceInfo.device_fp}`,
     });
     if (!resF) {
-      showSnackbar({
-        text: "已取消强制更新设备信息",
-        color: "cancel",
-      });
+      showSnackbar.cancel("已取消强制更新设备信息");
       await TGLogger.Info("[Config][confirmUpdateDevice][force] 取消强制更新设备信息");
       return;
     }
     appStore.deviceInfo = await TGRequest.Device.getFp();
     if (appStore.deviceInfo.device_fp === "0000000000000") {
       appStore.deviceInfo.device_fp = getRandomString(13, "hex");
-      showSnackbar({
-        text: `设备信息获取失败!已使用随机值 ${appStore.deviceInfo.device_fp} 代替`,
-        color: "warn",
-      });
+      showSnackbar.warn(`设备信息获取失败!已使用随机值${appStore.deviceInfo.device_fp}代替`);
       await TGLogger.Warn("[Config][confirmUpdateDevice][force] 设备信息获取失败!已使用随机值代替");
     } else {
-      showSnackbar({
-        text: "设备信息已更新! DeviceFp: " + appStore.deviceInfo.device_fp,
-      });
+      showSnackbar.success(`设备信息已更新! DeviceFp: ${appStore.deviceInfo.device_fp}`);
     }
     await TGSqlite.saveAppData("deviceInfo", JSON.stringify(appStore.deviceInfo));
     await TGLogger.Info("[Config][confirmUpdateDevice][force] 设备信息更新完成");
@@ -303,15 +274,9 @@ async function confirmUpdateDevice(force?: boolean): Promise<void> {
   await TGLogger.Info("[Config][confirmUpdateDevice] 开始更新设备信息");
   const localFp = getDeviceInfo("device_fp");
   if (localFp !== "0000000000000") {
-    const res = await showConfirm({
-      title: "确认更新设备信息吗？",
-      text: `DeviceFp:${localFp}`,
-    });
+    const res = await showConfirm({ title: "确认更新设备信息吗？", text: `DeviceFp:${localFp}` });
     if (!res) {
-      showSnackbar({
-        text: "已取消更新设备信息",
-        color: "cancel",
-      });
+      showSnackbar.cancel("已取消更新设备信息");
       await TGLogger.Info("[Config][confirmUpdateDevice] 取消更新设备信息");
       return;
     }
@@ -321,15 +286,11 @@ async function confirmUpdateDevice(force?: boolean): Promise<void> {
   console.log(appStore.deviceInfo);
   if (appStore.deviceInfo.device_fp === "0000000000000") {
     appStore.deviceInfo.device_fp = getRandomString(13, "hex");
-    showSnackbar({
-      text: "设备信息获取失败!已使用随机值代替",
-    });
+    showSnackbar.warn(`设备信息获取失败!已使用随机值${appStore.deviceInfo.device_fp}代替`);
     await TGLogger.Warn("[Config][confirmUpdateDevice] 设备信息获取失败!已使用随机值代替");
     return;
   }
-  showSnackbar({
-    text: "设备信息已更新! DeviceFp: " + appStore.deviceInfo.device_fp,
-  });
+  showSnackbar.success(`设备信息已更新! DeviceFp: ${appStore.deviceInfo.device_fp}`);
   await TGSqlite.saveAppData("deviceInfo", JSON.stringify(appStore.deviceInfo));
   await TGLogger.Info("[Config][confirmUpdateDevice] 设备信息更新完成");
 }
@@ -339,10 +300,7 @@ async function confirmDelCache(): Promise<void> {
   await TGLogger.Info("[Config][confirmDelCache] 开始清除缓存");
   const CacheDir = await getCacheDir();
   if (CacheDir === false) {
-    showSnackbar({
-      color: "error",
-      text: "不支持的平台!",
-    });
+    showSnackbar.error("不支持的平台!");
     return;
   }
   let cacheBSize: number = 0;
@@ -359,10 +317,7 @@ async function confirmDelCache(): Promise<void> {
     text: `当前缓存大小为 ${bytesToSize(cacheBSize)}`,
   });
   if (!res) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消清除缓存",
-    });
+    showSnackbar.cancel("已取消清除缓存");
     await TGLogger.Info("[Config][confirmDelCache] 取消清除缓存");
     return;
   }
@@ -373,35 +328,24 @@ async function confirmDelCache(): Promise<void> {
   }
   await TGLogger.Info("[Config][confirmDelCache] 缓存清除完成");
   loading.value = false;
-  showSnackbar({
-    text: "缓存已清除!即将退出应用！",
-  });
-  setTimeout(async () => {
-    await exit();
-  }, 1000);
+  showSnackbar.success("缓存已清除!即将退出应用！");
+  setTimeout(async () => await exit(), 1000);
 }
 
 // 恢复默认设置
 async function confirmResetApp(): Promise<void> {
   await TGLogger.Info("[Config][confirmResetApp] 开始恢复默认设置");
-  const res = await showConfirm({
-    title: "确认恢复默认设置吗？",
-  });
+  const res = await showConfirm({ title: "确认恢复默认设置吗？" });
   if (!res) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消恢复默认设置",
-    });
+    showSnackbar.cancel("已取消恢复默认设置");
     await TGLogger.Info("[Config][confirmResetApp] 取消恢复默认设置");
     return;
   }
   appStore.init();
   homeStore.init();
   await TGLogger.Info("[Config][confirmResetApp] 恢复默认设置完成");
-  showSnackbar({ text: "已恢复默认配置!即将刷新页面..." });
-  setTimeout(() => {
-    window.location.reload();
-  }, 1500);
+  showSnackbar.success("已恢复默认配置!即将刷新页面...");
+  setTimeout(() => window.location.reload(), 1500);
 }
 
 // 前置
@@ -412,25 +356,17 @@ async function tryShowReset(): Promise<void> {
     mode: "input",
   });
   if (!res) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消",
-    });
+    showSnackbar.cancel("已取消");
     return;
   }
   const time = getBuildTime();
   const code = time.startsWith("dev.") ? "dev" : time;
   if (res === code || res === "reset1128") {
     showReset.value = true;
-    showSnackbar({
-      text: "已开启重置数据库选项",
-    });
-  } else {
-    showSnackbar({
-      color: "error",
-      text: "验证失败",
-    });
+    showSnackbar.success("已开启重置数据库选项");
+    return;
   }
+  showSnackbar.error("验证失败");
 }
 
 // 重置数据库
@@ -441,10 +377,7 @@ async function confirmResetDB(title?: string): Promise<void> {
     text: "请确认已经备份关键数据",
   });
   if (!res) {
-    showSnackbar({
-      color: "cancel",
-      text: "已取消重置数据库",
-    });
+    showSnackbar.cancel("已取消重置数据库");
     await TGLogger.Info("[Config][confirmResetDB] 取消重置数据库");
     return;
   }
@@ -453,42 +386,34 @@ async function confirmResetDB(title?: string): Promise<void> {
   await TGSqlite.reset();
   await TGLogger.Info("[Config][confirmResetDB] 数据库重置完成");
   loading.value = false;
-  showSnackbar({
-    text: "数据库已重置!请进行再次检查。",
-  });
-  setTimeout(() => {
-    window.location.reload();
-  }, 1500);
+  showSnackbar.success("数据库已重置!请进行再次检查。");
+  setTimeout(() => window.location.reload(), 1500);
 }
 
 // 开启 dev 模式
 function submitDevMode(): void {
   if (appStore.devMode) {
-    showSnackbar({ text: "已关闭 dev 模式!" });
+    showSnackbar.success("已关闭 dev 模式!");
     return;
   }
-  showSnackbar({ text: "已开启 dev 模式!" });
+  showSnackbar.success("已开启 dev 模式!");
 }
 
 // 开启窗口回正
 function submitResize(): void {
   appStore.needResize = (!needResize.value).toString();
   if (needResize.value) {
-    showSnackbar({ text: "已关闭窗口回正!" });
+    showSnackbar.success("已关闭窗口回正!");
     return;
   }
-  showSnackbar({ text: "已开启窗口回正!" });
+  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;
-  }
+  if (params.title) loadingTitle.value = params.title;
+  if (params.text) loadingSub.value = params.text;
 }
 </script>
 <style lang="css" scoped>
diff --git a/src/pages/common/Home.vue b/src/pages/common/Home.vue
index 9631b9c5..e3621354 100644
--- a/src/pages/common/Home.vue
+++ b/src/pages/common/Home.vue
@@ -71,6 +71,7 @@ const curGid = ref<string>(gameSelectList[0].gid);
 
 onMounted(async () => {
   loadingTitle.value = "正在加载首页";
+  // @ts-expect-error-next-line
   const isProdEnv = import.meta.env.MODE === "production";
   // 获取当前环境
   if (isProdEnv && appStore.devMode) {
@@ -101,21 +102,13 @@ onMounted(async () => {
 async function submitHome(): Promise<void> {
   const show = showHome.value;
   if (show.length < 1) {
-    showSnackbar({
-      color: "error",
-      text: "请至少选择一个!",
-    });
+    showSnackbar.warn("请至少选择一个!");
     return;
   }
   homeStore.setShowValue(show);
-  showSnackbar({
-    color: "success",
-    text: "设置成功!",
-  });
+  showSnackbar.success("设置成功!");
   await TGLogger.Info("[Home][submitHome] 首页设置成功，当前显示：" + show.join("、"));
-  setTimeout(() => {
-    window.location.reload();
-  }, 1000);
+  setTimeout(() => window.location.reload(), 1000);
 }
 
 // 组件加载完成
diff --git a/src/pages/common/News.vue b/src/pages/common/News.vue
index 306bc174..b148a5f9 100644
--- a/src/pages/common/News.vue
+++ b/src/pages/common/News.vue
@@ -171,10 +171,7 @@ async function switchAnno(): Promise<void> {
 async function loadMore(key: NewsKey): Promise<void> {
   loadingSub.value = true;
   if (rawData.value[key].isLast) {
-    showSnackbar({
-      text: "已经是最后一页了",
-      color: "warn",
-    });
+    showSnackbar.warn("已经是最后一页了");
     loadingSub.value = false;
     return;
   }
@@ -185,10 +182,7 @@ async function loadMore(key: NewsKey): Promise<void> {
   rawData.value[key].isLast = getData.is_last;
   postData.value[key] = postData.value[key].concat(getData.list);
   if (rawData.value[key].isLast) {
-    showSnackbar({
-      text: "已经是最后一页了",
-      color: "warn",
-    });
+    showSnackbar.warn("已经是最后一页了");
     loadingSub.value = false;
     loading.value = false;
     return;
@@ -201,10 +195,7 @@ async function loadMore(key: NewsKey): Promise<void> {
 
 async function searchPost(): Promise<void> {
   if (search.value === "") {
-    showSnackbar({
-      text: "请输入搜索内容",
-      color: "error",
-    });
+    showSnackbar.warn("请输入搜索内容");
     return;
   }
   const numCheck = Number(search.value);
diff --git a/src/pages/common/PostCollect.vue b/src/pages/common/PostCollect.vue
index 6ce8cf21..324a566f 100644
--- a/src/pages/common/PostCollect.vue
+++ b/src/pages/common/PostCollect.vue
@@ -79,7 +79,7 @@
     <div class="pc-posts">
       <div v-for="item in getPageItems()" :key="item.post.post_id">
         <TPostCard
-          @update:selected="updateSelected"
+          @update:selected="selectedPost = $event"
           :model-value="item"
           :selected="selectedPost"
           :select-mode="selectedMode"
@@ -93,14 +93,13 @@
 import { event } from "@tauri-apps/api";
 import { UnlistenFn } from "@tauri-apps/api/event";
 import { storeToRefs } from "pinia";
-import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import showConfirm from "../../components/func/confirm.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 TGSqlite from "../../plugins/Sqlite/index.js";
 import TSUserCollection from "../../plugins/Sqlite/modules/userCollect.js";
 import { useUserStore } from "../../store/modules/user.js";
 import TGLogger from "../../utils/TGLogger.js";
@@ -128,18 +127,10 @@ const sortId = ref<boolean>(false);
 
 let collectListener: UnlistenFn | null = null;
 
-onBeforeMount(async () => {
-  if (!(await TGSqlite.checkTableExist("UFPost"))) {
-    await TGSqlite.update();
-    showSnackbar({
-      text: "数据库已更新",
-      color: "success",
-    });
-  }
+onMounted(async () => {
   collectListener = await event.listen("refreshCollect", async () => await load());
+  await load();
 });
-
-onMounted(async () => await load());
 onUnmounted(() => {
   if (collectListener !== null) {
     collectListener();
@@ -147,10 +138,6 @@ onUnmounted(() => {
   }
 });
 
-function updateSelected(v: string[]) {
-  selectedPost.value = v;
-}
-
 function sortPost(value: boolean) {
   let ori = sortId.value;
   sortId.value = value;
@@ -162,10 +149,7 @@ function sortPost(value: boolean) {
     }
   });
   if (ori !== sortId.value) {
-    showSnackbar({
-      text: `已${sortId.value ? "按帖子ID排序" : "按更新时间排序"}`,
-      color: "success",
-    });
+    showSnackbar.success(`已${sortId.value ? "按帖子ID排序" : "按更新时间排序"}`);
   }
 }
 
@@ -192,14 +176,14 @@ async function load(): Promise<void> {
 }
 
 function toSelect() {
-  if (!selectedMode.value) {
-    selectedPost.value = [];
-    selectedMode.value = true;
-  } else {
+  if (selectedMode.value) {
     selectedMode.value = false;
     if (selectedPost.value.length === 0) return;
     showOverlay.value = true;
+    return;
   }
+  selectedPost.value = [];
+  selectedMode.value = true;
 }
 
 async function addCollect(): Promise<void> {
@@ -211,17 +195,11 @@ async function addCollect(): Promise<void> {
   });
   if (titleC === undefined || titleC === false) return;
   if (titleC === "未分类") {
-    showSnackbar({
-      text: "分类名不可为未分类",
-      color: "error",
-    });
+    showSnackbar.warn("分类名不可为未分类");
     return;
   }
   if (collections.value.find((i) => i.title === titleC)) {
-    showSnackbar({
-      text: "分类已存在",
-      color: "error",
-    });
+    showSnackbar.warn("分类已存在");
     return;
   }
   title = titleC;
@@ -235,26 +213,17 @@ async function addCollect(): Promise<void> {
   else desc = descC;
   const res = await TSUserCollection.createCollect(title, desc);
   if (res) {
-    showSnackbar({
-      text: "新建成功",
-      color: "success",
-    });
+    showSnackbar.success("成功新建分类");
     await load();
-  } else {
-    showSnackbar({
-      text: "新建失败",
-      color: "error",
-    });
+    return;
   }
+  showSnackbar.error("新建失败");
 }
 
 async function toEdit(): Promise<void> {
   const collect = collections.value.find((c) => c.title === curSelect.value);
   if (collect === undefined) {
-    showSnackbar({
-      text: "未找到合集信息！",
-      color: "error",
-    });
+    showSnackbar.warn("未找到合集信息");
     return;
   }
   let cTc = await showConfirm({
@@ -264,25 +233,16 @@ async function toEdit(): Promise<void> {
     input: collect.title,
   });
   if (cTc === false) {
-    showSnackbar({
-      text: "取消修改分类信息",
-      color: "cancel",
-    });
+    showSnackbar.cancel("取消修改分类信息");
     return;
   }
   if (typeof cTc !== "string") cTc = collect.title;
   if (cTc === "未分类") {
-    showSnackbar({
-      text: "该名称为保留名称，不可用于作为分类名！",
-      color: "error",
-    });
+    showSnackbar.warn("分类名不可为未分类");
     return;
   }
   if (cTc !== collect.title && collections.value.find((c) => c.title === cTc)) {
-    showSnackbar({
-      text: "分类名称重复！",
-      color: "error",
-    });
+    showSnackbar.warn("分类名称重复");
     return;
   }
   let cTd = await showConfirm({
@@ -292,15 +252,9 @@ async function toEdit(): Promise<void> {
     input: collect.desc,
   });
   if (typeof cTd !== "string") cTd = collect.desc;
-  const cc = await showConfirm({
-    title: "确定修改？",
-    text: `[${cTc}] ${cTd}`,
-  });
+  const cc = await showConfirm({ title: "确定修改？", text: `[${cTc}] ${cTd}` });
   if (!cc) {
-    showSnackbar({
-      text: "取消修改分类信息",
-      color: "cancel",
-    });
+    showSnackbar.cancel("取消修改分类信息");
     return;
   }
   loadingTitle.value = "正在修改分类信息...";
@@ -308,32 +262,21 @@ async function toEdit(): Promise<void> {
   const check = await TSUserCollection.updateCollect(collect.title, cTc, cTd);
   loading.value = false;
   if (!check) {
-    showSnackbar({
-      text: "修改分类信息失败!",
-      color: "error",
-    });
+    showSnackbar.warn("修改分类信息失败");
     return;
   }
-  showSnackbar({
-    text: "成功修改分类信息！",
-  });
+  showSnackbar.success("成功修改分类信息！");
   await load();
 }
 
 async function deleteOper(force: boolean): Promise<void> {
-  if (selectedMode.value) {
-    await deletePost(force);
-  } else {
-    await deleteCollect(force);
-  }
+  if (selectedMode.value) await deletePost(force);
+  else await deleteCollect(force);
 }
 
 async function deletePost(force: boolean = false): Promise<void> {
   if (selectedPost.value.length === 0) {
-    showSnackbar({
-      text: "未选择帖子",
-      color: "error",
-    });
+    showSnackbar.warn("未选择帖子");
     return;
   }
   const title = force ? "删除帖子" : "移除帖子分类";
@@ -342,10 +285,7 @@ async function deletePost(force: boolean = false): Promise<void> {
     text: `共 ${selectedPost.value.length} 条帖子`,
   });
   if (!res) {
-    showSnackbar({
-      text: "取消操作",
-      color: "cancel",
-    });
+    showSnackbar.cancel("取消操作");
     return;
   }
   loadingTitle.value = `正在${title}...`;
@@ -353,30 +293,21 @@ async function deletePost(force: boolean = false): Promise<void> {
   let success = 0;
   for (const post of selectedPost.value) {
     const check = await TSUserCollection.deletePostCollect(post, force);
-    if (!check) {
-      showSnackbar({
-        text: `帖子 ${post} 操作失败`,
-        color: "error",
-      });
-      await new Promise((resolve) => setTimeout(resolve, 1500));
-    } else {
+    if (check) {
       success++;
+      continue;
     }
+    showSnackbar.warn(`帖子 ${post} 操作失败`);
+    await new Promise((resolve) => setTimeout(resolve, 1500));
   }
   loading.value = false;
-  showSnackbar({
-    text: `成功${title} ${success} 条`,
-    color: "success",
-  });
+  showSnackbar.success(`成功${title} ${success} 条`);
   await load();
 }
 
 async function deleteCollect(force: boolean): Promise<void> {
   if (curSelect.value === "未分类" && force) {
-    showSnackbar({
-      text: "未分类不可删除",
-      color: "error",
-    });
+    showSnackbar.warn("未分类不可删除");
     return;
   }
   const title = force ? "删除分类" : "清空分类";
@@ -385,10 +316,7 @@ async function deleteCollect(force: boolean): Promise<void> {
     text: `该分类下${selected.value.length}条帖子将被${force ? "删除" : "移除分类(未分类将被删除)"}`,
   });
   if (!res) {
-    showSnackbar({
-      text: "取消删除",
-      color: "cancel",
-    });
+    showSnackbar.cancel("取消操作");
     return;
   }
   let resD;
@@ -398,17 +326,11 @@ async function deleteCollect(force: boolean): Promise<void> {
     resD = await TSUserCollection.deleteUnCollectPost();
   }
   if (resD) {
-    showSnackbar({
-      text: `成功 ${title}`,
-      color: "success",
-    });
+    showSnackbar.success(`成功${title}`);
     await load();
-  } else {
-    showSnackbar({
-      text: `${title} 失败`,
-      color: "error",
-    });
+    return;
   }
+  showSnackbar.warn(`${title} 失败`);
 }
 
 // 根据合集筛选
@@ -427,10 +349,7 @@ async function freshPost(select: string | null): Promise<void> {
   }
   page.value = 1;
   loading.value = false;
-  showSnackbar({
-    text: `切换合集 ${select}，共 ${selected.value.length} 条帖子`,
-    color: "success",
-  });
+  showSnackbar.success(`切换合集 ${select}，共 ${selected.value.length} 条帖子`);
 }
 
 // 获取当前页的帖子
@@ -452,9 +371,10 @@ function getPageItems(): TGApp.Plugins.Mys.Post.FullData[] {
   return card;
 }
 
-watch(curSelect, async () => {
-  await freshPost(curSelect.value);
-});
+watch(
+  () => curSelect.value,
+  async () => await freshPost(curSelect.value),
+);
 
 async function freshOther(): Promise<void> {
   const input = await showConfirm({
@@ -464,27 +384,18 @@ async function freshOther(): Promise<void> {
   });
   if (typeof input === "string") {
     if (isNaN(Number(input))) {
-      showSnackbar({
-        text: "UID 格式错误，请输入数字",
-        color: "error",
-      });
+      showSnackbar.warn("UID 格式错误，请输入数字");
       return;
     }
     await freshUser(input);
     return;
   }
-  showSnackbar({
-    text: "取消导入",
-    color: "cancel",
-  });
+  showSnackbar.cancel("取消导入");
 }
 
 async function freshUser(uid?: string): Promise<void> {
   if (!userStore.cookie.value) {
-    showSnackbar({
-      text: "请先登录",
-      color: "error",
-    });
+    showSnackbar.warn("请先登录");
     return;
   }
   const cookie = {
@@ -494,43 +405,30 @@ async function freshUser(uid?: string): Promise<void> {
   loadingTitle.value = "获取用户收藏...";
   loading.value = true;
   let res = await TGRequest.User.getCollect(cookie, uid || userStore.briefInfo.value.uid);
-  let is_last = false;
-  while (!is_last) {
+  while (true) {
     if ("retcode" in res) {
       if (res.retcode === 1001) {
-        showSnackbar({
-          text: "用户收藏已设为私密，无法获取",
-          color: "error",
-        });
+        showSnackbar.warn("用户收藏已设为私密，无法获取");
       } else {
-        showSnackbar({
-          text: `[${res.retcode}] ${res.message}`,
-          color: "error",
-        });
+        showSnackbar.error(`[${res.retcode}] ${res.message}`);
       }
       loading.value = false;
-      return;
+      break;
     }
     let posts = res.list;
     loadingTitle.value = `合并收藏帖子 [offset]${res.next_offset}...`;
     await mergePosts(posts, uid || userStore.briefInfo.value.uid);
-    if (res.is_last) {
-      is_last = true;
-    } else {
-      loadingTitle.value = "获取用户收藏...";
-      loadingSub.value = `[offset]${res.next_offset} [is_last]${res.is_last}`;
-      res = await TGRequest.User.getCollect(
-        cookie,
-        uid || userStore.briefInfo.value.uid,
-        res.next_offset,
-      );
-    }
+    if (res.is_last) break;
+    loadingTitle.value = "获取用户收藏...";
+    loadingSub.value = `[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;
-  showSnackbar({
-    text: "获取用户收藏成功",
-    color: "success",
-  });
+  showSnackbar.success("获取用户收藏成功");
   window.location.reload();
 }
 
diff --git a/src/pages/common/Posts.vue b/src/pages/common/Posts.vue
index 584be904..3a4e6e79 100644
--- a/src/pages/common/Posts.vue
+++ b/src/pages/common/Posts.vue
@@ -64,7 +64,7 @@
   <ToPostSearch :gid="curGid.toString()" v-model="showSearch" :keyword="search" />
 </template>
 <script setup lang="ts">
-import { nextTick, onBeforeMount, onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import showSnackbar from "../../components/func/snackbar.js";
@@ -188,12 +188,9 @@ const posts = ref<TGApp.Plugins.Mys.Post.FullData[]>([]);
 const search = ref<string>("");
 const showSearch = ref<boolean>(false);
 
-onBeforeMount(async () => {
+onMounted(async () => {
   if (gid && typeof gid === "string") curGid.value = Number(gid);
   if (forum && typeof forum === "string") curForum.value = Number(forum);
-});
-
-onMounted(async () => {
   const gameLabel = getGameLabel(curGid.value);
   const forumLabel = getForumLabel(curGid.value, curForum.value);
   await TGLogger.Info(`[Posts][${gameLabel}][onMounted][${forumLabel}] 打开帖子列表`);
@@ -210,8 +207,7 @@ watch(
     const forumFind = forums.find((item) => item.text === curForumLabel.value);
     if (forumFind) curForum.value = forumFind.value;
     else curForum.value = forums[0].value;
-    await nextTick();
-    showSnackbar({ text: `已将分区切换到 ${getGameLabel(newVal)}`, color: "success" });
+    showSnackbar.success(`已将分区切换到 ${getGameLabel(newVal)}`);
   },
 );
 watch(
@@ -221,10 +217,7 @@ watch(
     const oldForumLabel = JSON.parse(JSON.stringify(curForumLabel.value));
     curForumLabel.value = getForumLabel(curGid.value, curForum.value);
     if (oldForumLabel !== curForumLabel.value) {
-      showSnackbar({
-        text: `已将版块切换到 ${curForumLabel.value}`,
-        color: "success",
-      });
+      showSnackbar.success(`已将版块切换到 ${curForumLabel.value}`);
     }
   },
 );
@@ -233,7 +226,7 @@ watch(
   async () => {
     await freshPostData();
     const sortLabel = getSortLabel(curSortType.value);
-    showSnackbar({ text: `已将排序切换到 ${sortLabel}`, color: "success" });
+    showSnackbar.success(`已将排序切换到 ${sortLabel}`);
   },
 );
 
@@ -248,14 +241,13 @@ async function freshPostData(): Promise<void> {
   loadingTitle.value = `正在加载 ${gameLabel}-${forumLabel}-${sortLabel} 数据`;
   const postsGet = await Mys.Post.getForumPostList(curForum.value, curSortType.value);
   posts.value = postsGet.list;
-  await nextTick();
   loading.value = false;
 }
 
 // 查询帖子
 function searchPost(): void {
   if (search.value === "") {
-    showSnackbar({ text: "请输入搜索内容", color: "error" });
+    showSnackbar.warn("请输入搜索内容");
     return;
   }
   const numCheck = Number(search.value);
diff --git a/src/plugins/Mys/index.ts b/src/plugins/Mys/index.ts
index 2f5b97bb..7e3c8c8e 100644
--- a/src/plugins/Mys/index.ts
+++ b/src/plugins/Mys/index.ts
@@ -1,14 +1,13 @@
 /**
  * @file plugins/Mys/index.ts
  * @description Mys plugin index
- * @since Beta v0.6.2
+ * @since Beta v0.6.3
  */
 
 import * as ApiHub from "./request/apiHubReq.js";
 import { getCaptcha, doCaptchaLogin } from "./request/doCaptchaLogin.js";
 import { getLoginQr, getLoginStatus } from "./request/doGameLogin.js";
-import getGachaData from "./request/getGachaData.js";
-import { getPositionData } from "./request/getPositionData.js";
+import { getPositionData, getGachaData } from "./request/obcReq.js";
 import * as Painter from "./request/painterReq.js";
 import * as Post from "./request/postReq.js";
 import { getGachaCard } from "./utils/getGachaCard.js";
diff --git a/src/plugins/Mys/request/doCaptchaLogin.ts b/src/plugins/Mys/request/doCaptchaLogin.ts
index d4ec7b99..a35377e2 100644
--- a/src/plugins/Mys/request/doCaptchaLogin.ts
+++ b/src/plugins/Mys/request/doCaptchaLogin.ts
@@ -28,10 +28,7 @@ encrypt.setPublicKey(PUB_KEY_STR);
 function rsaEncrypt(data: string): string {
   const res = encrypt.encrypt(data.toString());
   if (res === false) {
-    showSnackbar({
-      text: "RSA 加密失败",
-      color: "error",
-    });
+    showSnackbar.error("RSA 加密失败");
     return "";
   }
   return res;
diff --git a/src/plugins/Mys/request/getGachaData.ts b/src/plugins/Mys/request/getGachaData.ts
deleted file mode 100644
index 74ffe729..00000000
--- a/src/plugins/Mys/request/getGachaData.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * @file plugins/Mys/request/getGachaData.ts
- * @description Mys 抽卡请求
- * @since Beta v0.4.5
- */
-
-import TGHttp from "../../../utils/TGHttp.js";
-
-/**
- * @description 获取卡池信息
- * @since Beta  v0.5.0
- * @return {Promise<TGApp.Plugins.Mys.Gacha.Data[]>}
- */
-async function getGachaData(): Promise<TGApp.Plugins.Mys.Gacha.Data[]> {
-  const url = "https://api-takumi.mihoyo.com/common/blackboard/ys_obc/v1/gacha_pool?app_sn=ys_obc";
-  const resp = await TGHttp<TGApp.Plugins.Mys.Gacha.Response>(url, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  });
-  return resp.data.list;
-}
-
-export default getGachaData;
diff --git a/src/plugins/Mys/request/getPositionData.ts b/src/plugins/Mys/request/obcReq.ts
similarity index 59%
rename from src/plugins/Mys/request/getPositionData.ts
rename to src/plugins/Mys/request/obcReq.ts
index 544e74c5..56bc8fc7 100644
--- a/src/plugins/Mys/request/getPositionData.ts
+++ b/src/plugins/Mys/request/obcReq.ts
@@ -1,11 +1,42 @@
 /**
- * @file plugins/Mys/request/getPositionData.ts
- * @description Mys 插件热点追踪请求
- * @since Beta v0.5.0
+ * @file plugins/Mys/request/obcReq.ts
+ * @description 观测枢相关请求
+ * @since Beta v0.6.3
  */
 
 import TGHttp from "../../../utils/TGHttp.js";
 
+const obcApi = "https://api-takumi.mihoyo.com/common/blackboard/ys_obc/v1/";
+
+/**
+ * @description 获取卡池信息
+ * @since Beta  v0.6.3
+ * @return {Promise<TGApp.Plugins.Mys.Gacha.Data[]>}
+ */
+export async function getGachaData(): Promise<TGApp.Plugins.Mys.Gacha.Data[]> {
+  const resp = await TGHttp<TGApp.Plugins.Mys.Gacha.Response>(`${obcApi}gacha_pool`, {
+    method: "GET",
+    query: { app_sn: "ys_obc" },
+    headers: { "Content-Type": "application/json" },
+  });
+  return resp.data.list;
+}
+
+/**
+ * @description 获取热点追踪信息
+ * @since Beta v0.6.3
+ * @return {Promise<TGApp.Plugins.Mys.Position.Data[]>}
+ */
+export async function getPositionData(): Promise<TGApp.Plugins.Mys.Position.Data[]> {
+  const resp = await TGHttp<TGApp.Plugins.Mys.Position.Response>(`${obcApi}home/position`, {
+    method: "GET",
+    query: { app_sn: "ys_obc" },
+    headers: { "Content-Type": "application/json" },
+  });
+  const data = resp.data.list;
+  return DfsObc(data);
+}
+
 /**
  * @description 深度优先遍历
  * @since Alpha v0.2.1
@@ -24,19 +55,3 @@ function DfsObc(list: TGApp.Plugins.Mys.Position.ObcItem[]): TGApp.Plugins.Mys.P
   }
   return res;
 }
-
-/**
- * @description 获取热点追踪信息
- * @since Beta v0.5.0
- * @return {Promise<TGApp.Plugins.Mys.Position.Data[]>}
- */
-export async function getPositionData(): Promise<TGApp.Plugins.Mys.Position.Data[]> {
-  const url =
-    "https://api-static.mihoyo.com/common/blackboard/ys_obc/v1/home/position?app_sn=ys_obc";
-  const resp = await TGHttp<TGApp.Plugins.Mys.Position.Response>(url, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  });
-  const data = resp.data.list;
-  return DfsObc(data);
-}
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 3e921e63..cea2a8e3 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -42,22 +42,22 @@ export const useUserStore = defineStore(
 
     async function switchGameAccount(uidG: string): Promise<boolean> {
       if (!uid.value) {
-        showSnackbar({ text: "未找到登录用户", color: "error" });
+        showSnackbar.warn("未找到登录用户");
         return false;
       }
       if (uidG === account.value.gameUid) {
-        showSnackbar({ text: "该账户已经选中", color: "warn" });
+        showSnackbar.warn("该账户已经选中");
         return false;
       }
       const gameAccounts = await TSUserAccount.game.getAccount(uid.value);
       const accountFind = gameAccounts.find((a) => a.gameUid === uidG);
       if (!accountFind) {
-        showSnackbar({ text: "未找到账户绑定的游戏账户", color: "error" });
+        showSnackbar.warn("未找到账户绑定的游戏账户");
         return false;
       }
       account.value = accountFind;
       await TSUserAccount.game.switchAccount(uid.value, uidG);
-      showSnackbar({ text: `成功切换游戏账户为${uidG}` });
+      showSnackbar.success(`成功切换游戏账户为${uidG}`);
       return true;
     }
 
diff --git a/src/types/Component/Snackbar.d.ts b/src/types/Component/Snackbar.d.ts
index 8aae6f93..72be083f 100644
--- a/src/types/Component/Snackbar.d.ts
+++ b/src/types/Component/Snackbar.d.ts
@@ -1,14 +1,14 @@
 /**
  * @file types Component Snackbar.d.ts
  * @description Component Snackbar 类型声明文件
- * @since Beta v0.3.4
+ * @since Beta v0.6.3
  */
 
 declare namespace TGApp.Component.Snackbar {
   /**
    * @description Snackbar 参数
    * @interface Params
-   * @since Alpha v0.2.3
+   * @since Beta v0.6.3
    * @property {string} text 文本
    * @property {string} color 颜色
    * @property {number} timeout 超时时间
@@ -17,7 +17,7 @@ declare namespace TGApp.Component.Snackbar {
    */
   interface Params {
     text: string;
-    color?: string;
-    timeout?: number;
+    color: string;
+    timeout: number;
   }
 }
diff --git a/src/utils/TGClient.ts b/src/utils/TGClient.ts
index 2ca6dd7a..ddeefcb1 100644
--- a/src/utils/TGClient.ts
+++ b/src/utils/TGClient.ts
@@ -456,7 +456,7 @@ class TGClient {
       try {
         await windowFind.destroy();
       } catch (e) {
-        showSnackbar({ text: `[TGClient][open] ${e}`, color: "error" });
+        showSnackbar.error(`[TGClient][open] ${e}`);
         await TGLogger.Error(`[TGClient][open] ${e}`);
       }
     }
@@ -721,10 +721,7 @@ class TGClient {
     console.log(`[openApplication] ${JSON.stringify(arg.payload)}`);
     const appWindow = await webviewWindow.WebviewWindow.getByLabel("TeyvatGuide");
     await appWindow?.setFocus();
-    showSnackbar({
-      text: `不支持的操作：OpenApplication(${JSON.stringify(arg.payload)})`,
-      color: "error",
-    });
+    showSnackbar.error(`不支持的操作：OpenApplication(${JSON.stringify(arg.payload)})`);
     await new Promise<void>((resolve) => setTimeout(() => resolve(), 1500));
     const windowFind = await webviewWindow.WebviewWindow.getByLabel("mhy_client");
     if (windowFind !== null) await windowFind.setFocus();
@@ -761,7 +758,7 @@ class TGClient {
       if (appWindow != null) {
         await appWindow.setFocus();
       }
-      showSnackbar({ text: `未知链接:${arg.payload.page}`, color: "error", timeout: 3000 });
+      showSnackbar.error(`未知链接:${arg.payload.page}`, 3000);
       await new Promise<void>((resolve) => {
         setTimeout(() => {
           resolve();
diff --git a/src/utils/TGShare.ts b/src/utils/TGShare.ts
index 733d002e..6c47a346 100644
--- a/src/utils/TGShare.ts
+++ b/src/utils/TGShare.ts
@@ -37,12 +37,12 @@ export async function saveCanvasImg(
   });
   if (res === null) {
     await TGLogger.Info(`[saveCanvasImg][${filename}] 未选择保存路径`);
-    showSnackbar({ text: "未选择保存路径", color: "cancel" });
+    showSnackbar.cancel("未选择保存路径");
     return;
   }
   await writeFile(res, buffer);
   await TGLogger.Info(`[saveCanvasImg][${filename}] 已将图像保存到本地`);
-  showSnackbar({ text: `已将 ${filename} 保存到本地` });
+  showSnackbar.success(`已将 ${filename} 保存到本地`);
 }
 
 /**
@@ -132,7 +132,7 @@ export async function generateShareImg(
   const sizeStr = bytesToSize(size);
   await TGLogger.Info(`[generateShareImg][${fileName}] 图像大小为 ${sizeStr}`);
   if (size > 80000000) {
-    showSnackbar({ text: `图像大小为 ${sizeStr}，过大，无法保存`, color: "warn", timeout: 3000 });
+    showSnackbar.warn(`图像过大(${sizeStr})，无法保存`, 3000);
     return;
   }
   if (size > 20000000) {
@@ -145,11 +145,11 @@ export async function generateShareImg(
       await saveCanvasImg(buffer, fileName);
       return;
     }
-    showSnackbar({ color: "warn", text: "将尝试保存到剪贴板" });
+    showSnackbar.warn("将尝试保存到剪贴板");
   }
   try {
     await copyToClipboard(buffer);
-    showSnackbar({ text: `已将 ${fileName} 复制到剪贴板，大小为 ${sizeStr}` });
+    showSnackbar.success(`已将 ${fileName} 复制到剪贴板，大小为 ${sizeStr}`);
     await TGLogger.Info(`[generateShareImg][${fileName}] 已将图像复制到剪贴板`);
   } catch (e) {
     await TGLogger.Error(`[generateShareImg][${fileName}] 复制到剪贴板失败 ${e}`);
diff --git a/src/utils/TGShell.ts b/src/utils/TGShell.ts
index 6eace666..211c2355 100644
--- a/src/utils/TGShell.ts
+++ b/src/utils/TGShell.ts
@@ -23,12 +23,12 @@ class TGShell {
   async openPath(path: string): Promise<void> {
     const plat = platform();
     let command: string;
-    if (plat === "windows") command = "win_open";
-    else if (plat === "macos") command = "mac_open";
-    else {
-      showSnackbar({ text: "暂不支持该平台", color: "warn" });
+    if (plat !== "windows" && plat !== "macos") {
+      showSnackbar.warn("暂不支持该平台");
       return;
     }
+    if (plat === "windows") command = "win_open";
+    else command = "mac_open";
     await Command.create(command, [path]).execute();
   }
 }
diff --git a/src/utils/UIAF.ts b/src/utils/UIAF.ts
index 3e129742..6f1068db 100644
--- a/src/utils/UIAF.ts
+++ b/src/utils/UIAF.ts
@@ -36,6 +36,7 @@ export async function getUiafHeader(): Promise<TGApp.Plugins.UIAF.Export> {
  */
 export async function verifyUiafData(path: string): Promise<boolean> {
   const fileData: string = await readTextFile(path);
+  // @ts-expect-error-next-line
   const ajv = new Ajv();
   const validate = ajv.compile(UiafSchema);
   try {
@@ -43,17 +44,14 @@ export async function verifyUiafData(path: string): Promise<boolean> {
     if (!validate(fileJson)) {
       if (validate.errors === undefined || validate.errors === null) return false;
       const error: ErrorObject = validate.errors[0];
-      showSnackbar({
-        text: `${error.instancePath || error.schemaPath} ${error.message}`,
-        color: "error",
-      });
+      showSnackbar.error(`${error.instancePath || error.schemaPath} ${error.message}`);
       await TGLogger.Error(`UIAF 数据验证失败，文件路径：${path}`);
       await TGLogger.Error(`错误信息 ${validate.errors?.toString()}`);
       return false;
     }
     return true;
   } catch (e) {
-    showSnackbar({ text: `UIAF 数据格式错误 ${e}`, color: "error" });
+    showSnackbar.error(`UIAF 数据格式错误 ${e}`);
     await TGLogger.Error(`UIAF 数据格式错误，文件路径：${path}`);
     await TGLogger.Error(`错误信息 ${e}`);
     return false;
@@ -66,6 +64,7 @@ export async function verifyUiafData(path: string): Promise<boolean> {
  * @returns {boolean} 是否验证通过
  */
 export async function verifyUiafDataClipboard(): Promise<boolean> {
+  // @ts-expect-error-next-line
   const ajv = new Ajv();
   const validate = ajv.compile(UiafSchema);
   const data = await window.navigator.clipboard.readText();
@@ -74,17 +73,14 @@ export async function verifyUiafDataClipboard(): Promise<boolean> {
     if (!validate(fileJson)) {
       if (validate.errors === undefined || validate.errors === null) return false;
       const error: ErrorObject = validate.errors[0];
-      showSnackbar({
-        text: `${error.instancePath || error.schemaPath} ${error.message}`,
-        color: "error",
-      });
+      showSnackbar.error(`${error.instancePath || error.schemaPath} ${error.message}`);
       await TGLogger.Error(`UIAF 数据验证失败，剪贴板数据：${data}`);
       await TGLogger.Error(`错误信息 ${validate.errors}`);
       return false;
     }
     return true;
   } catch (e) {
-    showSnackbar({ text: `UIAF 数据格式错误 ${e}`, color: "error" });
+    showSnackbar.error(`UIAF 数据格式错误 ${e}`);
     await TGLogger.Error(`UIAF 数据格式错误，剪贴板数据：${data}`);
     await TGLogger.Error(`错误信息 ${e}`);
     return false;
diff --git a/src/utils/UIGF.ts b/src/utils/UIGF.ts
index 1408e5ec..e71cd0c3 100644
--- a/src/utils/UIGF.ts
+++ b/src/utils/UIGF.ts
@@ -102,7 +102,7 @@ export async function verifyUigfData(path: string, isVersion4: boolean = false):
     if (isVersion4) return validateUigf4Data(fileJson);
     return validateUigfData(fileJson);
   } catch (e) {
-    showSnackbar({ text: `UIGF 数据格式错误 ${e}`, color: "error" });
+    showSnackbar.error(`UIGF 数据格式错误 ${e}`);
     await TGLogger.Error(`UIGF 数据格式错误，文件路径：${path}`);
     await TGLogger.Error(`错误信息 ${e}`);
     return false;
@@ -121,18 +121,12 @@ function validateUigfData(data: object): boolean {
   if (!validate(data)) {
     if (!validate.errors || validate.errors.length === 0) return false;
     const error: ErrorObject = validate.errors[0];
-    showSnackbar({
-      text: `${error.instancePath || error.schemaPath} ${error.message}`,
-      color: "error",
-    });
+    showSnackbar.error(`${error.instancePath || error.schemaPath} ${error.message}`);
     return false;
   }
   const parsedData: TGApp.Plugins.UIGF.Schema = <TGApp.Plugins.UIGF.Schema>data;
   if (parsedData.info.uigf_version < "v2.3") {
-    showSnackbar({
-      text: "UIGF 版本过低，请使用 v2.3 或以上版本",
-      color: "error",
-    });
+    showSnackbar.error("UIGF 版本过低，请使用 v2.3 或以上版本");
     return false;
   }
   return true;
@@ -150,10 +144,7 @@ function validateUigf4Data(data: object): boolean {
   if (!validate4(data)) {
     if (!validate4.errors || validate4.errors.length === 0) return false;
     const error: ErrorObject = validate4.errors[0];
-    showSnackbar({
-      text: `${error.instancePath || error.schemaPath} ${error.message}`,
-      color: "error",
-    });
+    showSnackbar.error(`${error.instancePath || error.schemaPath} ${error.message}`);
     return false;
   }
   return true;
diff --git a/src/utils/dataBS.ts b/src/utils/dataBS.ts
index ab3c06bd..5ebd5373 100644
--- a/src/utils/dataBS.ts
+++ b/src/utils/dataBS.ts
@@ -41,37 +41,37 @@ export async function backUpUserData(dir: string): Promise<void> {
 export async function restoreUserData(dir: string): Promise<void> {
   let errNum = 0;
   if (!(await exists(dir))) {
-    showSnackbar({ text: "备份目录不存在", color: "error" });
+    showSnackbar.error("备份目录不存在");
     return;
   }
   const restoreAchi = await TSUserAchi.restoreUiaf(dir);
   if (!restoreAchi) {
-    showSnackbar({ text: `成就数据恢复失败`, color: "error" });
+    showSnackbar.error("成就数据恢复失败");
     errNum++;
   }
   const restoreAccount = await TSUserAccount.account.restore(dir);
   if (!restoreAccount) {
-    showSnackbar({ text: "Cookie 数据恢复失败", color: "error" });
+    showSnackbar.error("Cookie 数据恢复失败");
     errNum++;
   }
   const restoreAbyss = await TSUserAbyss.restoreAbyss(dir);
   if (!restoreAbyss) {
-    showSnackbar({ text: "深渊数据恢复失败", color: "error" });
+    showSnackbar.error("深渊数据恢复失败");
     errNum++;
   }
   const restoreCombat = await TSUserCombat.restoreCombat(dir);
   if (!restoreCombat) {
-    showSnackbar({ text: "真境剧诗数据恢复失败", color: "error" });
+    showSnackbar.error("真境剧诗数据恢复失败");
     errNum++;
   }
   const restoreGacha = await TSUserGacha.restoreUigf(dir);
   if (!restoreGacha) {
-    showSnackbar({ text: "祈愿数据恢复失败", color: "error" });
+    showSnackbar.error("祈愿数据恢复失败");
     errNum++;
   }
-  if (errNum === 0) {
-    showSnackbar({ text: "数据恢复成功", color: "success" });
-  } else {
-    showSnackbar({ text: `数据恢复失败，失败数量：${errNum}`, color: "error" });
+  if (errNum !== 0) {
+    showSnackbar.error(`数据恢复失败，失败数:${errNum}`);
+    return;
   }
+  showSnackbar.success("数据恢复成功");
 }
diff --git a/src/utils/linkParser.ts b/src/utils/linkParser.ts
index 3097d9b0..c5a7e9a6 100644
--- a/src/utils/linkParser.ts
+++ b/src/utils/linkParser.ts
@@ -148,10 +148,7 @@ export async function parseLink(
       text: "取消则使用外部浏览器打开",
     });
     if (openCheck === undefined) {
-      showSnackbar({
-        text: "已取消打开",
-        color: "warn",
-      });
+      showSnackbar.cancel("已取消打开");
       return true;
     }
     if (!openCheck) return url.href;
diff --git a/tsconfig.json b/tsconfig.json
index b7c14919..eae36d4b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,7 @@
     "src/data/**/*.json",
     "tsconfig.json",
     "vite.config.ts",
-    "eslint.config.js"
+    "eslint.config.mjs"
   ],
   "exclude": ["node_modules"]
 }