web: 添加hooks

modules/web/src/views/BookShelf.vue

@@ -78,8 +78,8 @@
 import "@/assets/fonts/shelffont.css";
 import { useBookStore } from "@/store";
 import githubUrl from "@/assets/imgs/github.png";
+import { useLoading } from "@/hooks/loading";
 import { Search } from "@element-plus/icons-vue";
-import loadingSvg from "@element-plus/icons-svg/loading.svg?raw";
 import API from "@api";
 
 const store = useBookStore();
@@ -92,23 +92,13 @@ const readingRecent = ref({
   chapterIndex: 0,
   chapterPos: 0,
 });
-const showLoading = ref(false);
 const shelfWrapper = ref(null);
-const loadingSerive = ref(null);
-watch(showLoading, (loading) => {
-  if (!loading) return loadingSerive.value?.close();
-  loadingSerive.value = ElLoading.service({
-    target: shelfWrapper.value,
-    spinner: loadingSvg,
-    text: "正在获取书籍信息",
-    lock: true,
-  });
-});
+const { showLoading, closeLoading, loadingWrapper } = useLoading(
+  shelfWrapper,
+  "正在获取书籍信息"
+);
 
 const books = ref([]);
-watchEffect(() => {
-  if (books.value.length > 0) showLoading.value = false;
-});
 
 const search = ref("");
 const isSearching = ref(false);
@@ -131,7 +121,7 @@ const searchBook = () => {
   if (search.value == "") return;
   books.value = [];
   store.clearSearchBooks();
-  showLoading.value = true;
+  showLoading();
   isSearching.value = true;
   API.search(
     search.value,
@@ -145,7 +135,7 @@ const searchBook = () => {
       }
     },
     () => {
-      showLoading.value = false;
+      closeLoading();
       if (books.value.length == 0) {
         ElMessage.info("搜索结果为空");
       }
@@ -196,14 +186,15 @@ onMounted(() => {
       readingRecent.value.chapterIndex = 0;
     }
   }
-  showLoading.value = true;
-  store
-    .saveBookProgress()
-    //确保各种网络情况下同步请求先完成
-    .finally(fetchBookShelfData);
+  loadingWrapper(
+    store
+      .saveBookProgress()
+      //确保各种网络情况下同步请求先完成
+      .finally(fetchBookShelfData)
+  );
 });
 const fetchBookShelfData = () => {
-  API.getBookShelf()
+  return API.getBookShelf()
     .then((response) => {
       store.setConnectType("success");
       if (response.data.isSuccess) {
@@ -217,13 +208,11 @@ const fetchBookShelfData = () => {
         );
       } else {
         ElMessage.error(response.data.errorMsg);
-        showLoading.value = false;
       }
       store.setConnectStatus("已连接 ");
       store.setNewConnect(false);
     })
     .catch(function (error) {
-      showLoading.value = false;
       store.setConnectType("danger");
       store.setConnectStatus("连接失败");
       ElMessage.error("后端连接失败");