♻️ 函数式调用 snackbar

BTMuli · Aug 28, 2023 · 598ce68 · 598ce68
1 parent 923aae6
commit 598ce68
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 145 deletions.
diff --git 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);
+  loading.value = false;
   if (res.retcode === 0) {
-    snackbarColor.value = "success";
-    snackbarText.value = res.message;
+    snackbar({ text: <string>res.message });
   } else {
-    snackbarColor.value = "error";
-    snackbarText.value = res.message;
+    snackbar({
+      text: <string>res.message,
+      color: "error",
+    });
   }
-  loading.value = false;
-  setTimeout(() => {
-    snackbar.value = true;
-  }, 200);
 }
 </script>
 <style lang="css" scoped>

diff --git 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;

diff --git a/src/pages/common/Achievements.vue b/src/pages/common/Achievements.vue
@@ -103,17 +103,14 @@
         </v-list>
       </div>
     </div>
-    <!-- 弹窗提示 -->
-    <v-snackbar v-model="snackbar" timeout="1500" :color="snackbarColor" top>
-      {{ snackbarText }}
-    </v-snackbar>
   </div>
 </template>
 
 <script lang="ts" setup>
 // 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,19 +237,21 @@ 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;
   loadingTitle.value = "正在搜索";
   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>