♻️ showSnackbar重构

2025-12-06 08:32:51 +08:00 · 2024-11-14 18:01:38 +08:00
parent 20b9631468
commit ac6dbe0cdf
69 changed files with 614 additions and 1098 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -1 +0,0 @@
-ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
--- 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");
  }
 }
--- 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>
--- 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;
--- 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>
--- 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}`);
  }
 });
--- 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>
--- 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,
--- 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;
--- 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;

-onMounted(() => {
-  displayBox(props);
-});
+// eslint-disable-next-line no-undef
+let timer: NodeJS.Timeout | undefined = undefined;
+
+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,
--- 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("未找到对应角色或武器");
  }
 }

--- 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);
--- 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;
  }
 }
--- 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 {
--- 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"]
--- 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;
--- 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> {
--- 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> {
--- 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() {
--- 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>
--- 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;
  }
--- 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>
--- 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);
--- 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 "";
      }
--- 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 {
--- 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}`);
        },
      },
    ],
--- 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>
--- 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 {
--- 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;
--- 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;
  }
 }
--- 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> {
--- 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>
--- 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];
--- 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>
--- 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);
--- 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);
--- 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++;
 }
--- 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);
--- 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;
--- 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;
--- 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;
--- 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>
--- 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();
 }
--- 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);
--- 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>
--- 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);
    }
--- 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);
--- 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);
--- 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 {
--- 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>
--- 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);
 }

 // 组件加载完成
--- 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);
--- 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();
 }

--- 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);
--- 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";
--- 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;
--- a/src/plugins/Mys/request/getGachaData.ts
+++ b/src/plugins/Mys/request/getGachaData.ts
@@ -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;
--- a/src/plugins/Mys/request/getPositionData.ts
+++ b/src/plugins/Mys/request/getPositionData.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);
-}
--- 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;
    }

--- 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;
  }
 }
--- 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();
--- 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}`);
--- 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();
  }
 }
--- 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;
--- 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;
--- 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("数据恢复成功");
 }
--- 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;
--- 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"]
 }
				`@@ -1 +0,0 @@`
				`ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/`