♻️ 函数式调用 snackbar

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";
+    snackbar({
-    snackbarText.value = "未找到该深渊数据";
+      text: "未找到该深渊数据",
-    snackbar.value = true;
+      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(() => {
+  if (res.retcode === 0) {
-    snackbar.value = true;
+    snackbar({ text: <string>res.message });
-  }, 200);
+  } else {
+    snackbar({
+      text: <string>res.message,
+      color: "error",
+    });
+  }
 }
 </script>
 <style lang="css" scoped>

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({
-    snackbar.value = true;
+      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({
-    snackbar.value = true;
+      text: "未找到相关卡牌",
+      color: "error",
+    });
     doSearch.value = false;
   } else {
     CardsInfoS.value = res;

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({
-    snackbar.value = true;
+      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";
+    snackbar({
-    snackbarText.value = "请输入搜索内容";
+      color: "error",
-    snackbar.value = true;
+      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";
+    snackbar({
-    snackbarText.value = "没有找到对应的成就";
+      color: "error",
-    snackbar.value = true;
+      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({
-      snackbar.value = true;
+        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";
+    snackbar({
-    snackbarText.value = "没有可导出的数据";
+      color: "error",
-    snackbar.value = true;
+      text: "没有可导出的数据",
+    });
     return;
   }
   // 获取本地数据
@@ -311,17 +312,16 @@ async function exportJson(): Promise<void> {
   });
   if (isSave) {
     await fs.writeTextFile(isSave, JSON.stringify(UiafData));
-    snackbarColor.value = "#00BFA5";
+    snackbar({ text: "导出成功" });
-    snackbarText.value = "导出成功";
-    snackbar.value = true;
   } else {
-    snackbarColor.value = "#F5810A";
+    snackbar({
-    snackbarText.value = "导出已取消";
+      color: "warn",
-    snackbar.value = true;
+      text: "导出已取消",
+    });
   }
 }
 
-function getIcon(series: number): string {
+function getIcon(series: number): string | undefined {
   return AppAchievementSeriesData.find((item) => item.id === series)?.icon;
 }
 </script>

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 = "读取数据库失败！";
+    snackbar({
-    snackbarColor.value = "warn";
+      color: "error",
-    snackbar.value = true;
+      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 = "数据已备份!";
+  snackbar({ text: "数据已备份!" });
-  snackbarColor.value = "success";
-  snackbar.value = true;
 }
 
 async function restoreData(): Promise<void> {
@@ -419,13 +410,8 @@ async function restoreData(): Promise<void> {
   if (!res) {
     fail.push("深渊数据");
   }
-  if (fail.length > 0) {
+  if (fail.length > 0) snackbar({ text: `${fail.join("、")} 恢复失败!`, color: "error" });
-    snackbarText.value = `${fail.join("、")} 恢复失败!`;
+  else snackbar({ text: "数据已恢复!" });
-    snackbarColor.value = "error";
-  } else {
-    snackbarText.value = "数据已恢复!";
-    snackbarColor.value = "success";
-  }
   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({ text: "临时数据已删除!" });
-  snackbar.value = true;
 }
 
 async function delUserData(): Promise<void> {
@@ -446,8 +431,7 @@ async function delUserData(): Promise<void> {
     dir: fs.BaseDirectory.AppLocalData,
     recursive: true,
   });
-  snackbarText.value = "用户数据已删除!";
+  snackbar({ text: "用户数据已删除!" });
-  snackbar.value = true;
   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({ text: "已恢复默认配置!即将刷新页面..." });
-  snackbar.value = true;
   setTimeout(() => {
     window.location.reload();
   }, 1500);
@@ -467,10 +450,8 @@ function initAppData(): void {
 // 开启 dev 模式
 function submitDevMode(): void {
   appStore.devMode
-    ? (snackbarText.value = "已关闭 dev 模式!")
+    ? snackbar({ text: "已关闭 dev 模式!" })
-    : (snackbarText.value = "已开启 dev 模式!");
+    : snackbar({ text: "已开启 dev 模式!" });
-  snackbarColor.value = "success";
-  snackbar.value = true;
 }
 
 // 修改首页显示
@@ -478,16 +459,15 @@ function submitHome(): void {
   // 获取已选
   const show = showHome.value;
   if (show.length < 1) {
-    snackbarText.value = "请至少选择一个!";
+    snackbar({
-    snackbarColor.value = "error";
+      color: "error",
-    snackbar.value = true;
+      text: "请至少选择一个!",
+    });
     return;
   }
   // 设置
   homeStore.setShowValue(show);
-  snackbarText.value = "已修改!";
+  snackbar({ text: "已修改!" });
-  snackbarColor.value = "success";
-  snackbar.value = true;
 }
 
 // 刷新用户数据
@@ -495,9 +475,10 @@ async function refreshUser(): Promise<void> {
   const ck = userStore.cookie;
   // ck = {}
   if (Object.keys(ck).length < 1) {
-    snackbarText.value = "请先输入 Cookie!";
+    snackbar({
-    snackbarColor.value = "error";
+      color: "error",
-    snackbar.value = true;
+      text: "请先输入 Cookie!",
+    });
     return;
   }
   let failCount = 0;
@@ -552,13 +533,12 @@ async function refreshUser(): Promise<void> {
     failCount++;
   }
   if (failCount > 0) {
-    snackbarText.value = "刷新失败!请重新输入 cookie!";
+    snackbar({
-    snackbarColor.value = "error";
+      color: "error",
-    snackbar.value = true;
+      text: "刷新失败!请重新输入 cookie!",
+    });
   } else {
-    snackbarText.value = "刷新成功!";
+    snackbar({ text: "刷新成功!" });
-    snackbarColor.value = "success";
-    snackbar.value = true;
   }
   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 为空!";
+    snackbar({
-    snackbarColor.value = "error";
+      color: "error",
-    snackbar.value = true;
+      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 无效!";
+    snackbar({
-    snackbarColor.value = "error";
+      color: "error",
-    snackbar.value = true;
+      text: "Cookie 无效!",
+    });
     return;
   }
   try {
@@ -602,14 +584,15 @@ async function inputCookie(): Promise<void> {
       await TGSqlite.saveAccount(resAccounts);
     }
     loading.value = false;
-    snackbarText.value = "Cookie 已保存!";
+    snackbar({
-    snackbarColor.value = "success";
+      text: "Cookie 已保存!",
-    snackbar.value = true;
+    });
   } catch (err) {
     loading.value = false;
-    snackbarText.value = "Cookie 无效!";
+    snackbar({
-    snackbarColor.value = "error";
+      color: "error",
-    snackbar.value = true;
+      text: "Cookie 无效!",
+    });
   }
 }
 
@@ -644,9 +627,9 @@ async function checkDB(): Promise<void> {
       }
     }
     loading.value = false;
-    snackbarText.value = "数据库已是最新!";
+    snackbar({
-    snackbarColor.value = "success";
+      text: "数据库已是最新!",
-    snackbar.value = true;
+    });
   }
 }
 
@@ -656,9 +639,9 @@ async function resetDB(): Promise<void> {
   loading.value = true;
   await TGSqlite.reset();
   loading.value = false;
-  snackbarText.value = "数据库已重置!请进行再次检查。";
+  snackbar({
-  snackbarColor.value = "success";
+    text: "数据库已重置!请进行再次检查。",
-  snackbar.value = true;
+  });
   // 刷新
   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 = "数据库已是最新！";
+  snackbar({
-  snackbarColor.value = "success";
+    text: "数据库已更新!",
-  snackbar.value = true;
+  });
   // 刷新
   window.location.reload();
 }

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 = "已经是最后一页了";
+    snackbar({
-    snackbarColor.value = "#35acce";
+      text: "已经是最后一页了",
-    snackbar.value = true;
+      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 = "已经是最后一页了";
+    snackbar({
-    snackbarColor.value = "#35acce";
+      text: "已经是最后一页了",
-    snackbar.value = true;
+      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 = "请输入搜索内容";
+    snackbar({
-    snackbarColor.value = "error";
+      text: "请输入搜索内容",
-    snackbar.value = true;
+      color: "error",
+    });
     return;
   }
   if (!isNaN(Number(search.value))) {
@@ -457,9 +452,10 @@ async function searchPost(): Promise<void> {
       await toJson(search.value);
     }
   } else {
-    snackbarText.value = "请输入搜索内容";
+    snackbar({
-    snackbarColor.value = "error";
+      text: "请输入搜索内容",
-    snackbar.value = true;
+      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,
+  transition:
-    font-size 0.3s linear, line-height 0.3s linear, white-space 0.3s linear;
+    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 {