♻️ 函数式调用替代to-loading

src/pages/common/PostCollect.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="pc-container">
-    <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSub" />
     <div class="pc-top">
       <v-select
         v-model="curSelect"
@@ -79,7 +78,7 @@
     <div class="pc-posts">
       <div v-for="item in getPageItems()" :key="item.post.post_id">
         <TPostCard
-          @update:selected="selectedPost = $event"
+          @update:selected="(v) => (selectedPost = v)"
           :model-value="item"
           :selected="selectedPost"
           :select-mode="selectedMode"
@@ -96,18 +95,15 @@ import { storeToRefs } from "pinia";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import showDialog from "../../components/func/dialog.js";
+import showLoading from "../../components/func/loading.js";
 import showSnackbar from "../../components/func/snackbar.js";
 import TPostCard from "../../components/main/t-postcard.vue";
 import ToCollectPost from "../../components/overlay/to-collectPost.vue";
-import ToLoading from "../../components/overlay/to-loading.vue";
 import TSUserCollection from "../../plugins/Sqlite/modules/userCollect.js";
 import { useUserStore } from "../../store/modules/user.js";
 import TGLogger from "../../utils/TGLogger.js";
 import TGRequest from "../../web/request/TGRequest.js";
 
-const loading = ref(false);
-const loadingTitle = ref("加载中...");
-const loadingSub = ref("");
 const userStore = storeToRefs(useUserStore());
 
 const collections = ref<TGApp.Sqlite.UserCollection.UFCollection[]>([]);
@@ -154,11 +150,9 @@ function sortPost(value: boolean) {
 }
 
 async function load(): Promise<void> {
-  loadingTitle.value = "获取收藏帖子...";
-  loading.value = true;
-  loadingTitle.value = "获取收藏合集...";
+  showLoading.start("正在加载收藏帖子...", "获取收藏合集");
   collections.value = await TSUserCollection.getCollectList();
-  loadingTitle.value = "获取未分类帖子...";
+  showLoading.update("正在加载收藏帖子...", "获取未分类帖子");
   const postUnCollect = await TSUserCollection.getUnCollectPostList();
   if (curSelect.value === "未分类" || collections.value.length === 0) {
     selected.value = postUnCollect;
@@ -172,7 +166,7 @@ async function load(): Promise<void> {
   selectedMode.value = false;
   selectedPost.value = [];
   if (page.value > length.value) page.value = 1;
-  loading.value = false;
+  showLoading.end();
 }
 
 function toSelect() {
@@ -239,10 +233,9 @@ async function toEdit(): Promise<void> {
     showSnackbar.cancel("取消修改分类信息");
     return;
   }
-  loadingTitle.value = "正在修改分类信息...";
-  loading.value = true;
+  showLoading.start("正在修改分类信息...");
   const check = await TSUserCollection.updateCollect(collect.title, cTc, cTd);
-  loading.value = false;
+  showLoading.end();
   if (!check) {
     showSnackbar.warn("修改分类信息失败");
     return;
@@ -267,8 +260,7 @@ async function deletePost(force: boolean = false): Promise<void> {
     showSnackbar.cancel("取消操作");
     return;
   }
-  loadingTitle.value = `正在${title}...`;
-  loading.value = true;
+  showLoading.start(`正在${title}...`);
   let success = 0;
   for (const post of selectedPost.value) {
     const check = await TSUserCollection.deletePostCollect(post, force);
@@ -279,7 +271,7 @@ async function deletePost(force: boolean = false): Promise<void> {
     showSnackbar.warn(`帖子 ${post} 操作失败`);
     await new Promise((resolve) => setTimeout(resolve, 1500));
   }
-  loading.value = false;
+  showLoading.end();
   showSnackbar.success(`成功${title} ${success} 条`);
   await load();
 }
@@ -318,8 +310,7 @@ async function freshPost(select: string | null): Promise<void> {
     curSelect.value = "未分类";
     return;
   }
-  loadingTitle.value = `获取合集 ${select}...`;
-  loading.value = true;
+  showLoading.start("正在获取合集帖子...", `获取合集 ${select}`);
   if (select === "未分类") {
     curSelect.value = "未分类";
     selected.value = await TSUserCollection.getUnCollectPostList();
@@ -327,7 +318,7 @@ async function freshPost(select: string | null): Promise<void> {
     selected.value = await TSUserCollection.getCollectPostList(select);
   }
   page.value = 1;
-  loading.value = false;
+  showLoading.end();
   showSnackbar.success(`切换合集 ${select}，共 ${selected.value.length} 条帖子`);
 }
 
@@ -377,32 +368,30 @@ async function freshUser(uid?: string): Promise<void> {
     cookie_token: userStore.cookie.value.cookie_token,
     account_id: userStore.cookie.value.account_id,
   };
-  loadingTitle.value = "获取用户收藏...";
-  loading.value = true;
+  showLoading.start("获取用户收藏...", `UID: ${uid || userStore.briefInfo.value.uid}`);
   let res = await TGRequest.User.getCollect(cookie, uid || userStore.briefInfo.value.uid);
   while (true) {
     if ("retcode" in res) {
+      showLoading.end();
       if (res.retcode === 1001) {
         showSnackbar.warn("用户收藏已设为私密，无法获取");
       } else {
         showSnackbar.error(`[${res.retcode}] ${res.message}`);
       }
-      loading.value = false;
       break;
     }
     let posts = res.list;
-    loadingTitle.value = `合并收藏帖子 [offset]${res.next_offset}...`;
+    showLoading.update("获取用户收藏...", `合并收藏帖子 [offset]${res.next_offset}...`);
     await mergePosts(posts, uid || userStore.briefInfo.value.uid);
     if (res.is_last) break;
-    loadingTitle.value = "获取用户收藏...";
-    loadingSub.value = `[offset]${res.next_offset} [is_last]${res.is_last}`;
+    showLoading.update("获取用户收藏...", `[offset]${res.next_offset} [is_last]${res.is_last}`);
     res = await TGRequest.User.getCollect(
       cookie,
       uid || userStore.briefInfo.value.uid,
       res.next_offset,
     );
   }
-  loading.value = false;
+  showLoading.end();
   showSnackbar.success("获取用户收藏成功");
   window.location.reload();
 }
@@ -414,8 +403,7 @@ async function mergePosts(
 ): Promise<void> {
   const title = `用户收藏-${collect}`;
   for (const post of posts) {
-    loadingTitle.value = `收藏帖子 [${post.post.post_id}]...`;
-    loadingSub.value = `[POST]${post.post.subject} [collection]${title}`;
+    showLoading.start("获取用户收藏...", `[POST]${post.post.subject} [collection]${title}`);
     const res = await TSUserCollection.addCollect(post.post.post_id, post, title, true);
     if (!res) {
       await TGLogger.Error(`[PostCollect] mergePosts [${post.post.post_id}]`);