♻️ showSnackbar重构

2026-04-01 06:39:45 +08:00 · 2024-11-14 18:01:38 +08:00
parent 20b9631468
commit ac6dbe0cdf
69 changed files with 614 additions and 1098 deletions
--- 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);