♻️ 函数式调用 snackbar

2025-12-14 09:38:13 +08:00 · 2023-08-28 16:20:37 +08:00
parent 923aae692f
commit 598ce68a40
5 changed files with 125 additions and 147 deletions
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -64,13 +64,11 @@
      <span>暂无数据，请尝试刷新</span>
    </div>
  </div>
-  <v-snackbar v-model="snackbar" :color="snackbarColor" timeout="1500">
-    {{ snackbarText }}
-  </v-snackbar>
 </template>
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
+import snackbar from "../../components/func/snackbar";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import TSubLine from "../../components/main/t-subline.vue";
 import TuaOverview from "../../components/userAbyss/tua-overview.vue";
@@ -89,10 +87,6 @@ const userStore = useUserStore();
 const loading = ref<boolean>(true);
 const loadingTitle = ref<string>();
 const loadingSub = ref<string>();
-// snackbar
-const snackbar = ref<boolean>(false);
-const snackbarColor = ref<string>("success");
-const snackbarText = ref<string>();

 // data
 const userTab = ref<number>(0);
@@ -152,9 +146,10 @@ function toAbyss(id: number): void {
  if (abyssFind) {
    curAbyss.value = abyssFind;
  } else {
-    snackbarColor.value = "error";
-    snackbarText.value = "未找到该深渊数据";
-    snackbar.value = true;
+    snackbar({
+      text: "未找到该深渊数据",
+      color: "error",
+    });
  }
 }

@@ -184,20 +179,18 @@ async function uploadAbyss(): Promise<void> {
    return;
  }
  loadingTitle.value = "正在转换角色数据";
-  transAbyss.avatars = Hutao.Abyss.utils.transAvatars(roles);
+  transAbyss.Avatars = Hutao.Abyss.utils.transAvatars(roles);
  loadingTitle.value = "正在上传深渊数据";
  const res = await Hutao.Abyss.postData(transAbyss);
-  if (res.retcode === 0) {
-    snackbarColor.value = "success";
-    snackbarText.value = res.message;
-  } else {
-    snackbarColor.value = "error";
-    snackbarText.value = res.message;
-  }
  loading.value = false;
-  setTimeout(() => {
-    snackbar.value = true;
-  }, 200);
+  if (res.retcode === 0) {
+    snackbar({ text: <string>res.message });
+  } else {
+    snackbar({
+      text: <string>res.message,
+      color: "error",
+    });
+  }
 }
 </script>
 <style lang="css" scoped>
--- a/src/pages/WIKI/GCG.vue
+++ b/src/pages/WIKI/GCG.vue
@@ -101,11 +101,11 @@
      </v-card>
    </div>
  </div>
-  <v-snackbar v-model="snackbar" timeout="1500" color="error"> {{ snackbarText }} </v-snackbar>
 </template>
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
+import snackbar from "../../components/func/snackbar";
 import ToLoading from "../../components/overlay/to-loading.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
@@ -116,9 +116,6 @@ import Mys from "../../plugins/Mys";
 // loading
 const loading = ref<boolean>(true);
 const allCards = computed(() => AppGCGData);
-// snackbar
-const snackbar = ref<boolean>(false);
-const snackbarText = ref<string>("");
 // search
 const doSearch = ref<boolean>(false);
 const search = ref<string>("");
@@ -142,8 +139,10 @@ function toOuter(cardName: string, cardId: number): void {
  console.log(cardName, cardId);
  // 若不存在 contentId
  if (cardId === -1) {
-    snackbarText.value = "该卡牌暂无外部链接";
-    snackbar.value = true;
+    snackbar({
+      text: "该卡牌暂无外部链接",
+      color: "error",
+    });
    return;
  }
  const url = Mys.Api.Obc.replace("{contentId}", cardId.toString());
@@ -168,8 +167,10 @@ async function searchCard(): Promise<void> {
  console.log(res);
  loading.value = false;
  if (res.length === 0) {
-    snackbarText.value = "未找到相关卡牌";
-    snackbar.value = true;
+    snackbar({
+      text: "未找到相关卡牌",
+      color: "error",
+    });
    doSearch.value = false;
  } else {
    CardsInfoS.value = res;
--- a/src/pages/common/Achievements.vue
+++ b/src/pages/common/Achievements.vue
@@ -103,10 +103,6 @@
        </v-list>
      </div>
    </div>
-    <!-- 弹窗提示 -->
-    <v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor" top>
-      {{ snackbarText }}
-    </v-snackbar>
  </div>
 </template>

@@ -114,6 +110,7 @@
 // vue
 import { onMounted, ref, onBeforeMount, computed } from "vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import snackbar from "../../components/func/snackbar";
 // tauri
 import { dialog, fs } from "@tauri-apps/api";
 // Store
@@ -159,9 +156,6 @@ const emptyHeight = computed(() => {
 const translateY = ref<string>("0px");
 // render
 const search = ref<string>("");
-const snackbar = ref<boolean>(false);
-const snackbarText = ref<string>("");
-const snackbarColor = ref<string>("#F5810A");

 onBeforeMount(async () => {
  const { total, fin } = await TGSqlite.getAchievementsOverview();
@@ -219,8 +213,10 @@ function handleScroll(e: Event): void {
 async function selectSeries(index: number): Promise<void> {
  // 如果选中的是已经选中的系列，则不进行操作
  if (selectedSeries.value === index) {
-    snackbarText.value = "已经选中该系列";
-    snackbar.value = true;
+    snackbar({
+      color: "warn",
+      text: "已经选中该系列",
+    });
    return;
  }
  loading.value = true;
@@ -241,9 +237,10 @@ function openImg(): void {

 async function searchCard(): Promise<void> {
  if (search.value === "") {
-    snackbarColor.value = "#F5810A";
-    snackbarText.value = "请输入搜索内容";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "请输入搜索内容",
+    });
    return;
  }
  selectedSeries.value = -1;
@@ -251,9 +248,10 @@ async function searchCard(): Promise<void> {
  loading.value = true;
  selectedAchievement.value = await TGSqlite.searchAchievements(search.value);
  if (selectedAchievement.value.length === 0) {
-    snackbarColor.value = "#F5810A";
-    snackbarText.value = "没有找到对应的成就";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "没有找到对应的成就",
+    });
  }
  loading.value = false;
 }
@@ -271,8 +269,10 @@ async function importJson(): Promise<void> {
  if (selectedFile && (await verifyUiafData(<string>selectedFile))) {
    const remoteRaw: string | false = await readUiafData(<string>selectedFile);
    if (remoteRaw === false) {
-      snackbarText.value = "读取 UIAF 数据失败，请检查文件是否符合规范";
-      snackbar.value = true;
+      snackbar({
+        color: "error",
+        text: "读取 UIAF 数据失败，请检查文件是否符合规范",
+      });
      return;
    }
    loadingTitle.value = "正在解析数据";
@@ -290,9 +290,10 @@ async function importJson(): Promise<void> {
 async function exportJson(): Promise<void> {
  // 判断是否有数据
  if (achievementsStore.finAchievements === 0) {
-    snackbarColor.value = "#F5810A";
-    snackbarText.value = "没有可导出的数据";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "没有可导出的数据",
+    });
    return;
  }
  // 获取本地数据
@@ -311,17 +312,16 @@ async function exportJson(): Promise<void> {
  });
  if (isSave) {
    await fs.writeTextFile(isSave, JSON.stringify(UiafData));
-    snackbarColor.value = "#00BFA5";
-    snackbarText.value = "导出成功";
-    snackbar.value = true;
+    snackbar({ text: "导出成功" });
  } else {
-    snackbarColor.value = "#F5810A";
-    snackbarText.value = "导出已取消";
-    snackbar.value = true;
+    snackbar({
+      color: "warn",
+      text: "导出已取消",
+    });
  }
 }

-function getIcon(series: number): string {
+function getIcon(series: number): string | undefined {
  return AppAchievementSeriesData.find((item) => item.id === series)?.icon;
 }
 </script>
--- a/src/pages/common/Config.vue
+++ b/src/pages/common/Config.vue
@@ -177,10 +177,6 @@
      <v-list-item-subtitle>{{ appStore.dataPath.userDataDir }}</v-list-item-subtitle>
    </v-list-item>
  </v-list>
-  <!-- 弹窗提示条 -->
-  <v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
-    {{ snackbarText }}
-  </v-snackbar>
  <!-- 确认弹窗 -->
  <ToConfirm
    v-model="confirmShow"
@@ -195,6 +191,7 @@
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
+import snackbar from "../../components/func/snackbar";
 import ToLoading from "../../components/overlay/to-loading.vue";
 import ToConfirm from "../../components/overlay/to-confirm.vue";
 // tauri
@@ -243,11 +240,6 @@ const userInfo = computed(() => {
  };
 });

-// snackbar
-const snackbar = ref<boolean>(false);
-const snackbarText = ref<string>("");
-const snackbarColor = ref<string>("success");
-
 // confirm
 const confirmText = ref<string>("");
 const isConfirmInput = ref<boolean>(false);
@@ -269,9 +261,10 @@ onMounted(async () => {
      userStore.cookie = JSON.parse(ck.value);
    }
  } catch (e) {
-    snackbarText.value = "读取数据库失败！";
-    snackbarColor.value = "warn";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "读取数据库失败！",
+    });
  }
  loading.value = false;
 });
@@ -398,9 +391,7 @@ async function backupData(): Promise<void> {
  const abyss = await TGSqlite.getAbyss();
  await backupAbyssData(abyss);
  loading.value = false;
-  snackbarText.value = "数据已备份!";
-  snackbarColor.value = "success";
-  snackbar.value = true;
+  snackbar({ text: "数据已备份!" });
 }

 async function restoreData(): Promise<void> {
@@ -419,13 +410,8 @@ async function restoreData(): Promise<void> {
  if (!res) {
    fail.push("深渊数据");
  }
-  if (fail.length > 0) {
-    snackbarText.value = `${fail.join("、")} 恢复失败!`;
-    snackbarColor.value = "error";
-  } else {
-    snackbarText.value = "数据已恢复!";
-    snackbarColor.value = "success";
-  }
+  if (fail.length > 0) snackbar({ text: `${fail.join("、")} 恢复失败!`, color: "error" });
+  else snackbar({ text: "数据已恢复!" });
  const cookie = await TGSqlite.getCookie();
  userStore.initCookie(cookie);
  loading.value = false;
@@ -437,8 +423,7 @@ async function delTempData(): Promise<void> {
    recursive: true,
  });
  await fs.createDir("tempData", { dir: fs.BaseDirectory.AppLocalData });
-  snackbarText.value = "临时数据已删除!";
-  snackbar.value = true;
+  snackbar({ text: "临时数据已删除!" });
 }

 async function delUserData(): Promise<void> {
@@ -446,8 +431,7 @@ async function delUserData(): Promise<void> {
    dir: fs.BaseDirectory.AppLocalData,
    recursive: true,
  });
-  snackbarText.value = "用户数据已删除!";
-  snackbar.value = true;
+  snackbar({ text: "用户数据已删除!" });
  achievementsStore.init();
  await fs.createDir("userData", { dir: fs.BaseDirectory.AppLocalData });
 }
@@ -457,8 +441,7 @@ function initAppData(): void {
  appStore.init();
  homeStore.init();
  achievementsStore.init();
-  snackbarText.value = "已恢复默认配置!即将刷新页面...";
-  snackbar.value = true;
+  snackbar({ text: "已恢复默认配置!即将刷新页面..." });
  setTimeout(() => {
    window.location.reload();
  }, 1500);
@@ -467,10 +450,8 @@ function initAppData(): void {
 // 开启 dev 模式
 function submitDevMode(): void {
  appStore.devMode
-    ? (snackbarText.value = "已关闭 dev 模式!")
-    : (snackbarText.value = "已开启 dev 模式!");
-  snackbarColor.value = "success";
-  snackbar.value = true;
+    ? snackbar({ text: "已关闭 dev 模式!" })
+    : snackbar({ text: "已开启 dev 模式!" });
 }

 // 修改首页显示
@@ -478,16 +459,15 @@ function submitHome(): void {
  // 获取已选
  const show = showHome.value;
  if (show.length < 1) {
-    snackbarText.value = "请至少选择一个!";
-    snackbarColor.value = "error";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "请至少选择一个!",
+    });
    return;
  }
  // 设置
  homeStore.setShowValue(show);
-  snackbarText.value = "已修改!";
-  snackbarColor.value = "success";
-  snackbar.value = true;
+  snackbar({ text: "已修改!" });
 }

 // 刷新用户数据
@@ -495,9 +475,10 @@ async function refreshUser(): Promise<void> {
  const ck = userStore.cookie;
  // ck = {}
  if (Object.keys(ck).length < 1) {
-    snackbarText.value = "请先输入 Cookie!";
-    snackbarColor.value = "error";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "请先输入 Cookie!",
+    });
    return;
  }
  let failCount = 0;
@@ -552,13 +533,12 @@ async function refreshUser(): Promise<void> {
    failCount++;
  }
  if (failCount > 0) {
-    snackbarText.value = "刷新失败!请重新输入 cookie!";
-    snackbarColor.value = "error";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "刷新失败!请重新输入 cookie!",
+    });
  } else {
-    snackbarText.value = "刷新成功!";
-    snackbarColor.value = "success";
-    snackbar.value = true;
+    snackbar({ text: "刷新成功!" });
  }
  loading.value = false;
 }
@@ -567,9 +547,10 @@ async function refreshUser(): Promise<void> {
 async function inputCookie(): Promise<void> {
  const cookie = confirmInput.value;
  if (cookie === "") {
-    snackbarText.value = "Cookie 为空!";
-    snackbarColor.value = "error";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "Cookie 为空!",
+    });
    return;
  }
  loadingTitle.value = "正在获取 tokens...";
@@ -581,9 +562,10 @@ async function inputCookie(): Promise<void> {
  const uid = cookieObj.find((item) => item[0] === "login_uid")?.[1];
  // 如果两者不存在
  if (!ticket || !uid) {
-    snackbarText.value = "Cookie 无效!";
-    snackbarColor.value = "error";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "Cookie 无效!",
+    });
    return;
  }
  try {
@@ -602,14 +584,15 @@ async function inputCookie(): Promise<void> {
      await TGSqlite.saveAccount(resAccounts);
    }
    loading.value = false;
-    snackbarText.value = "Cookie 已保存!";
-    snackbarColor.value = "success";
-    snackbar.value = true;
+    snackbar({
+      text: "Cookie 已保存!",
+    });
  } catch (err) {
    loading.value = false;
-    snackbarText.value = "Cookie 无效!";
-    snackbarColor.value = "error";
-    snackbar.value = true;
+    snackbar({
+      color: "error",
+      text: "Cookie 无效!",
+    });
  }
 }

@@ -644,9 +627,9 @@ async function checkDB(): Promise<void> {
      }
    }
    loading.value = false;
-    snackbarText.value = "数据库已是最新!";
-    snackbarColor.value = "success";
-    snackbar.value = true;
+    snackbar({
+      text: "数据库已是最新!",
+    });
  }
 }

@@ -656,9 +639,9 @@ async function resetDB(): Promise<void> {
  loading.value = true;
  await TGSqlite.reset();
  loading.value = false;
-  snackbarText.value = "数据库已重置!请进行再次检查。";
-  snackbarColor.value = "success";
-  snackbar.value = true;
+  snackbar({
+    text: "数据库已重置!请进行再次检查。",
+  });
  // 刷新
  window.location.reload();
 }
@@ -671,9 +654,9 @@ async function updateDB(): Promise<void> {
  await TGSqlite.update();
  achievementsStore.lastVersion = await TGSqlite.getLatestAchievementVersion();
  loading.value = false;
-  snackbarText.value = "数据库已是最新！";
-  snackbarColor.value = "success";
-  snackbar.value = true;
+  snackbar({
+    text: "数据库已更新!",
+  });
  // 刷新
  window.location.reload();
 }
--- a/src/views/t-news.vue
+++ b/src/views/t-news.vue
@@ -263,9 +263,6 @@
      </div>
    </v-window-item>
  </v-window>
-  <v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor">
-    {{ snackbarText }}
-  </v-snackbar>
  <ToChannel v-model="showList" />
 </template>

@@ -273,6 +270,7 @@
 // vue
 import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import snackbar from "../components/func/snackbar";
 import ToLoading from "../components/overlay/to-loading.vue";
 import ToChannel from "../components/overlay/to-channel.vue";
 // store
@@ -294,10 +292,6 @@ const appStore = useAppStore();
 const loading = ref<boolean>(true);
 const loadingTitle = ref<string>("正在加载");
 const loadingSub = ref<boolean>(false);
-// snackbar
-const snackbar = ref<boolean>(false);
-const snackbarText = ref<string>("");
-const snackbarColor = ref<string>("success");

 // search
 const search = ref<string>("");
@@ -373,9 +367,10 @@ async function switchAnno(): Promise<void> {
 async function loadMore(data: "notice" | "activity" | "news"): Promise<void> {
  loadingSub.value = true;
  if (rawData.value[data].isLast) {
-    snackbarText.value = "已经是最后一页了";
-    snackbarColor.value = "#35acce";
-    snackbar.value = true;
+    snackbar({
+      text: "已经是最后一页了",
+      color: "warn",
+    });
    loadingSub.value = false;
    return;
  }
@@ -389,9 +384,10 @@ async function loadMore(data: "notice" | "activity" | "news"): Promise<void> {
  const getCard = Mys.News.card[data](getData);
  postData.value[data] = postData.value[data].concat(getCard);
  if (rawData.value[data].isLast) {
-    snackbarText.value = "已经是最后一页了";
-    snackbarColor.value = "#35acce";
-    snackbar.value = true;
+    snackbar({
+      text: "已经是最后一页了",
+      color: "warn",
+    });
    loadingSub.value = false;
    loading.value = false;
    return;
@@ -407,7 +403,6 @@ async function toPost(item: TGApp.Plugins.Mys.News.RenderCard | string): Promise
    const path = router.resolve({
      name: "帖子详情",
      params: {
-        // eslint-disable-next-line camelcase
        post_id: item,
      },
    }).href;
@@ -428,7 +423,6 @@ async function toJson(item: TGApp.Plugins.Mys.News.RenderCard | string): Promise
    const path = router.resolve({
      name: "帖子详情（JSON）",
      params: {
-        // eslint-disable-next-line camelcase
        post_id: item,
      },
    }).href;
@@ -446,9 +440,10 @@ async function toJson(item: TGApp.Plugins.Mys.News.RenderCard | string): Promise

 async function searchPost(): Promise<void> {
  if (search.value === "") {
-    snackbarText.value = "请输入搜索内容";
-    snackbarColor.value = "error";
-    snackbar.value = true;
+    snackbar({
+      text: "请输入搜索内容",
+      color: "error",
+    });
    return;
  }
  if (!isNaN(Number(search.value))) {
@@ -457,9 +452,10 @@ async function searchPost(): Promise<void> {
      await toJson(search.value);
    }
  } else {
-    snackbarText.value = "请输入搜索内容";
-    snackbarColor.value = "error";
-    snackbar.value = true;
+    snackbar({
+      text: "请输入搜索内容",
+      color: "error",
+    });
  }
 }
 </script>
@@ -519,8 +515,13 @@ async function searchPost(): Promise<void> {
  position: relative;
  height: 50px;
  color: var(--common-text-title);
-  transition: padding-top 0.3s linear, padding-bottom 0.3s linear, background 0.3s linear,
-    font-size 0.3s linear, line-height 0.3s linear, white-space 0.3s linear;
+  transition:
+    padding-top 0.3s linear,
+    padding-bottom 0.3s linear,
+    background 0.3s linear,
+    font-size 0.3s linear,
+    line-height 0.3s linear,
+    white-space 0.3s linear;
 }

 .news-card-title:hover {