web: 书架无书时不显示loading

modules/web/src/api/index.js

@@ -48,7 +48,6 @@ const search = (
 ) => {
   // webSocket
   const url = `ws://${hostname}:${Number(port) + 1}/searchBook`;
-
   const socket = new WebSocket(url);
 
   socket.onopen = () => {

modules/web/src/components.d.ts

@@ -17,6 +17,7 @@ declare module '@vue/runtime-core' {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']

modules/web/src/views/BookChapter.vue

@@ -82,10 +82,10 @@
       <div class="content">
         <div class="top-bar" ref="top"></div>
         <div v-for="data in chapterData" :key="data.index" ref="chapter">
-          <div class="title" :index="data.index" v-if="show">
+          <div class="title" :index="data.index" v-if="showContent">
             {{ data.title }}
           </div>
-          <chapter-content :carray="data.content" v-if="show"/>
+          <chapter-content :carray="data.content" v-if="showContent"/>
         </div>
         <div class="loading" ref="loading"></div>
         <div class="bottom-bar" ref="bottom"></div>
@@ -115,7 +115,7 @@ watch(showLoading, (loading) => {
 });
 
 const store = useBookStore();
-
+// 读取阅读配置
 try {
   const browerConfig = JSON.parse(localStorage.getItem("config"));
   if (browerConfig != null) store.setConfig(browerConfig);
@@ -131,102 +131,78 @@ const chapterData = ref([]);
 const scrollObserve = ref(null);
 const readingObserve = ref(null);
 
-const { chapterPos } = toRefs(store.readingBook);
-const chapterIndex = computed({
-  get: () => store.readingBook.index,
-  set: (index) => (store.readingBook.index = index),
-});
 const {
   catalog,
   popCataVisible,
   readSettingsVisible,
-  config,
-  miniInterface
+  miniInterface,
+  showContent,
 } = storeToRefs(store);
 
-const show = computed(()=>store.showContent)
-const theme = computed(() => config.value.theme);
+const { chapterPos, index: chapterIndex} = toRefs(store.readingBook);
+
+const { theme, infiniteLoading } = toRefs(store.config);
 
-const bodyColor = computed(() => settings.themes[config.value.theme].body);
+// 主题部分
+const bodyColor = computed(() => settings.themes[theme.value].body);
 const chapterColor = computed(
-  () => settings.themes[config.value.theme].content
+  () => settings.themes[theme.value].content
 );
-const popupColor = computed(() => settings.themes[config.value.theme].popup);
+const popupColor = computed(() => settings.themes[theme.value].popup);
 
 const readWidth = computed(() => {
-  if (!store.miniInterface) {
+  if (!miniInterface.value) {
     return store.config.readWidth - 130 + "px";
   } else {
     return window.innerWidth + "px";
   }
 });
 const popupWidth = computed(() => {
-  if (!store.miniInterface) {
+  if (!miniInterface.value) {
     return store.config.readWidth - 33;
   } else {
     return window.innerWidth - 33;
   }
 });
-
 const bodyTheme = computed(() => {
   return {
-    background: settings.themes[store.config.theme].body,
+    background: settings.themes[theme.value].body,
   };
 });
 const chapterTheme = computed(() => {
   return {
-    background: settings.themes[store.config.theme].content,
+    background: settings.themes[theme.value].content,
     width: readWidth.value,
   };
 });
-
 const leftBarTheme = computed(() => {
   return {
-    background: settings.themes[store.config.theme].popup,
-    marginLeft: store.miniInterface
+    background: settings.themes[theme.value].popup,
+    marginLeft: miniInterface.value
       ? 0
       : -(store.config.readWidth / 2 + 68) + "px",
-    display: store.miniInterface && !showToolBar.value ? "none" : "block",
+    display: miniInterface.value && !showToolBar.value ? "none" : "block",
   };
 });
 const rightBarTheme = computed(() => {
   return {
-    background: settings.themes[store.config.theme].popup,
-    marginRight: store.miniInterface
+    background: settings.themes[theme.value].popup,
+    marginRight: miniInterface.value
       ? 0
       : -(store.config.readWidth / 2 + 52) + "px",
-    display: store.miniInterface && !showToolBar.value ? "none" : "block",
+    display: miniInterface.value && !showToolBar.value ? "none" : "block",
   };
 });
-
-const enableInfiniteLoading = computed(() => {
-  return config.value.infiniteLoading;
-});
-
-watchEffect(() => {
-  if (chapterData.value.length > 0) {
-    store.setContentLoading(false);
-    //添加章节内容到observe
-    addReadingObserve();
-  }
-});
-
-watchEffect(() => {
-  document.title = catalog.value[chapterIndex.value]?.title || document.title;
-  store.saveBookProcess();
-});
 const isNight = ref(false);
 watchEffect(() => {
   isNight.value = theme.value == 6;
 });
-
 watch(bodyColor, (color) => {
   bodyTheme.value.background = color;
 });
 watch(chapterColor, (color) => {
   chapterTheme.value.background = color;
 });
-
 watch(readWidth, (width) => {
   chapterTheme.value.width = width;
   let leftToolMargin = -((parseInt(width) + 130) / 2 + 68) + "px";
@@ -234,13 +210,27 @@ watch(readWidth, (width) => {
   leftBarTheme.value.marginLeft = leftToolMargin;
   rightBarTheme.value.marginRight = rightToolMargin;
 });
-
 watch(popupColor, (color) => {
   leftBarTheme.value.background = color;
   rightBarTheme.value.background = color;
 });
+
+
+watchEffect(() => {
+  if (chapterData.value.length > 0) {
+    store.setContentLoading(false);
+    //添加章节内容到observe
+    addReadingObserve();
+  }
+});
+
+watchEffect(() => {
+  document.title = catalog.value[chapterIndex.value]?.title || document.title;
+  store.saveBookProcess();
+});
+
 watchEffect(() => {
-  if (!enableInfiniteLoading.value) {
+  if (!infiniteLoading.value) {
     scrollObserve.value?.disconnect();
   } else {
     scrollObserve.value?.observe(loading.value);
@@ -542,7 +532,7 @@ onMounted(() => {
       scrollObserve.value = new IntersectionObserver(handleIScrollObserve, {
         rootMargin: "-100% 0% 20% 0%",
       });
-      enableInfiniteLoading.value && scrollObserve.value.observe(loading.value);
+      infiniteLoading.value && scrollObserve.value.observe(loading.value);
       //监听当前阅读章节
       readingObserve.value = new IntersectionObserver(handleIReadingObserve);
       //第二次点击同一本书 页面标题不会变化

modules/web/src/views/BookShelf.vue

@@ -140,11 +140,16 @@ const searchBook = () => {
         store.setSearchBooks(JSON.parse(data));
         store.searchBooks.forEach((item) => books.value.push(item));
       } catch (e) {
-        ElMessage({ message: "后端数据错误", type: "error" });
+        ElMessage.error("后端数据错误");
         throw e;
       }
     },
-    () => (showLoading.value = false)
+    () => {
+      showLoading.value = false;
+      if (books.value.length == 0) {
+        ElMessage.info("搜索结果为空")
+      }
+    }
   );
 };
 
@@ -209,7 +214,8 @@ const fetchBookShelfData = () => {
           })
         );
       } else {
-        ElMessage({ message: response.data.errorMsg, type: "error" });
+        ElMessage.error(response.data.errorMsg);
+        showLoading.value = false;
       }
       store.setConnectStatus("已连接 ");
       store.setNewConnect(false);
@@ -218,7 +224,7 @@ const fetchBookShelfData = () => {
       showLoading.value = false;
       store.setConnectType("danger");
       store.setConnectStatus("连接失败");
-      ElMessage({ message: "后端连接失败", type: "error" });
+      ElMessage.error("后端连接失败")
       store.setNewConnect(false);
       throw error;
     });