From 152dc4e3b8442022d278fc0a08cdcea1ecd4b117 Mon Sep 17 00:00:00 2001
From: Xwite <1797350009@qq.com>
Date: Sun, 14 May 2023 14:03:55 +0800
Subject: [PATCH] [skip ci] perf(web): improve little  performance

---
 modules/web/src/components/BookItems.vue      | 11 ++++++-----
 modules/web/src/components/CatalogItem.vue    |  9 ++-------
 modules/web/src/components/ChapterContent.vue | 12 ++++++------
 modules/web/src/components/PopCatalog.vue     | 14 ++++++++------
 modules/web/src/components/SourceItem.vue     |  5 +++--
 modules/web/src/components/SourceList.vue     | 18 ++++++++++--------
 modules/web/src/components/SourceTabTools.vue |  8 ++++----
 7 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/modules/web/src/components/BookItems.vue b/modules/web/src/components/BookItems.vue
index fc2907c62..5eed0e6dc 100644
--- a/modules/web/src/components/BookItems.vue
+++ b/modules/web/src/components/BookItems.vue
@@ -22,7 +22,7 @@
             <div class="author">
               {{ book.author }}
             </div>
-            <div class="tags" v-show="isSearch">
+            <div class="tags" v-if="isSearch">
               <el-tag
                 v-for="tag in book.kind?.split(',').slice(0, 2)"
                 :key="tag"
@@ -30,16 +30,16 @@
                 {{ tag }}
               </el-tag>
             </div>
-            <div class="update-info" v-show="!isSearch">
+            <div class="update-info" v-if="!isSearch">
               <div class="dot">•</div>
               <div class="size">共{{ book.totalChapterNum }}章</div>
               <div class="dot">•</div>
               <div class="date">{{ dateFormat(book.lastCheckTime) }}</div>
             </div>
           </div>
-          <div class="intro" v-show="isSearch">{{ book.intro }}</div>
+          <div class="intro" v-if="isSearch">{{ book.intro }}</div>
 
-          <div class="dur-chapter" v-show="!isSearch">
+          <div class="dur-chapter" v-if="!isSearch">
             已读：{{ book.durChapterTitle }}
           </div>
           <div class="last-chapter">最新：{{ book.latestChapterTitle }}</div>
@@ -52,7 +52,7 @@
 import { dateFormat } from "../plugins/utils";
 const props = defineProps(["books", "isSearch"]);
 const emit = defineEmits(["bookClick"]);
-const handleClick = (book) => emit("bookClick", toRaw(book));
+const handleClick = (book) => emit("bookClick", book);
 const getCover = (coverUrl) => {
   return /^data:/.test(coverUrl)
     ? coverUrl
@@ -64,6 +64,7 @@ const getCover = (coverUrl) => {
 const subJustify = computed(() =>
   props.isSearch ? "space-between" : "flex-start"
 );
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/modules/web/src/components/CatalogItem.vue b/modules/web/src/components/CatalogItem.vue
index 1da8ab298..51efac6ef 100644
--- a/modules/web/src/components/CatalogItem.vue
+++ b/modules/web/src/components/CatalogItem.vue
@@ -12,17 +12,12 @@
   </div>
 </template>
 <script setup>
-const props = defineProps(["index", "source", "gotoChapter"]);
-
-const store = useBookStore();
-
-const index = computed(() => store.readingBook.index);
+const props = defineProps(["index", "source", "gotoChapter", "currentChapterIndex"]);
 
 const isSelected = (idx) => {
-  return idx == index.value;
+  return idx == props.currentChapterIndex;
 };
 
-// 处理pc mobile
 const catas = computed(() => {
   return props.source?.catas ?? [props.source];
 });
diff --git a/modules/web/src/components/ChapterContent.vue b/modules/web/src/components/ChapterContent.vue
index 2906e58d3..c5050f0b7 100644
--- a/modules/web/src/components/ChapterContent.vue
+++ b/modules/web/src/components/ChapterContent.vue
@@ -71,10 +71,10 @@ const scrollToReadedLength = (length) => {
 defineExpose({
   scrollToReadedLength,
 });
-const observer = ref(null);
+let intersectionObserver = null;
 const emit = defineEmits(["readedLengthChange"]);
 onMounted(() => {
-  observer.value = new IntersectionObserver(
+  intersectionObserver = new IntersectionObserver(
     (entries) => {
       for (let { target, isIntersecting } of entries) {
         if (isIntersecting) {
@@ -90,15 +90,15 @@ onMounted(() => {
       rootMargin: `0px 0px -${window.innerHeight - 24}px 0px`,
     }
   );
-  observer.value.observe(titleRef.value);
+  intersectionObserver.observe(titleRef.value);
   paragraphRef.value.forEach((element) => {
-    observer.value.observe(element);
+    intersectionObserver.observe(element);
   });
 });
 
 onUnmounted(() => {
-  observer.value?.disconnect();
-  observer.value = null;
+  intersectionObserver?.disconnect();
+  intersectionObserver = null;
 });
 </script>
 
diff --git a/modules/web/src/components/PopCatalog.vue b/modules/web/src/components/PopCatalog.vue
index 4d5c457c3..1676900b4 100644
--- a/modules/web/src/components/PopCatalog.vue
+++ b/modules/web/src/components/PopCatalog.vue
@@ -14,7 +14,7 @@
       :data-sources="virtualListdata"
       :data-component="CatalogItem"
       :estimate-size="40"
-      :extra-props="{ gotoChapter }"
+      :extra-props="{ gotoChapter, currentChapterIndex }"
     />
   </div>
 </template>
@@ -39,7 +39,7 @@ const popupTheme = computed(() => {
   };
 });
 
-const index = computed({
+const currentChapterIndex = computed({
   get: () => store.readingBook.index,
   set: (value) => (store.readingBook.index = value),
 });
@@ -65,16 +65,18 @@ const virtualListdata = computed(() => {
 
 const emit = defineEmits(["getContent"]);
 const gotoChapter = (note) => {
-  index.value = catalog.value.indexOf(note);
+  const chapterIndex = catalog.value.indexOf(note);
+  currentChapterIndex.value = chapterIndex;
   store.setPopCataVisible(false);
   store.setContentLoading(true);
-  emit("getContent", index.value);
+  emit("getContent", chapterIndex);
 };
 
 const virtualListRef = ref();
 const virtualListIndex = computed(() => {
-  if (miniInterface.value) return index.value;
-  return Math.floor(index.value / 2);
+  let index = currentChapterIndex.value;
+  if (miniInterface.value) return index;
+  return Math.floor(index / 2);
 });
 
 onUpdated(() => {
diff --git a/modules/web/src/components/SourceItem.vue b/modules/web/src/components/SourceItem.vue
index 22f932bbe..5bbaf9b1c 100644
--- a/modules/web/src/components/SourceItem.vue
+++ b/modules/web/src/components/SourceItem.vue
@@ -24,8 +24,9 @@ const handleSourceClick = (source) => {
   store.changeCurrentSource(source);
 };
 const isSaveError = computed(() => {
-  if (savedSourcesMap.value.size == 0) return false;
-  return !savedSourcesMap.value.has(sourceUrl.value);
+  const map = savedSourcesMap.value;
+  if (map.size == 0) return false;
+  return !map.has(sourceUrl.value);
 });
 </script>
 <style lang="scss" scoped>
diff --git a/modules/web/src/components/SourceList.vue b/modules/web/src/components/SourceList.vue
index 7024fbf3b..8c135b350 100644
--- a/modules/web/src/components/SourceList.vue
+++ b/modules/web/src/components/SourceList.vue
@@ -51,19 +51,19 @@ const store = useSourceStore();
 const sourceUrlSelect = ref([]);
 const searchKey = ref("");
 const { sources, sourcesMap } = storeToRefs(store);
-const isBookSource = computed(() => {
-  return /bookSource/.test(window.location.href);
-});
+
 const sourceSelect = computed(() => {
-  if (sourceUrlSelect.value.length == 0) return [];
-  return sourceUrlSelect.value.map(
+  const urls = sourceUrlSelect.value;
+  if (urls.length == 0) return [];
+  return urls.map(
     (sourceUrl) => sourcesMap.value.get(sourceUrl) ?? {}
   );
 });
 const deleteSelectSources = () => {
-  API.deleteSource(sourceSelect.value).then(({ data }) => {
+  const sourceSelectValue = sourceSelect.value;
+  API.deleteSource(sourceSelectValue).then(({ data }) => {
     if (!data.isSuccess) return ElMessage.error(data.errorMsg);
-    store.deleteSources(sourceSelect.value);
+    store.deleteSources(sourceSelectValue);
     sourceUrlSelect.value = [];
   });
 };
@@ -107,13 +107,15 @@ const importSourceFile = () => {
   });
   input.click();
 };
+
+const isBookSource = /bookSource/.test(window.location.href);
 const outExport = () => {
   const exportFile = document.createElement("a");
   let sources =
       sourceUrlSelect.value.length === 0
         ? sourcesFiltered.value
         : sourceSelect.value,
-    sourceType = isBookSource.value ? "BookSource" : "RssSource";
+    sourceType = isBookSource ? "BookSource" : "RssSource";
 
   exportFile.download = `${sourceType}_${Date()
     .replace(/.*?\s(\d+)\s(\d+)\s(\d+:\d+:\d+).*/, "$2$1$3")
diff --git a/modules/web/src/components/SourceTabTools.vue b/modules/web/src/components/SourceTabTools.vue
index e690e7a87..f3c721353 100644
--- a/modules/web/src/components/SourceTabTools.vue
+++ b/modules/web/src/components/SourceTabTools.vue
@@ -6,10 +6,10 @@
       :name="tab[0]"
       :label="tab[1]"
     >
-      <source-json v-if="index == 0" />
-      <source-debug v-if="index == 1" />
-      <source-list v-if="index == 2" />
-      <source-help v-if="index == 3" />
+      <source-json v-show="index == 0" />
+      <source-debug v-show="index == 1" />
+      <source-list v-show="index == 2" />
+      <source-help v-show="index == 3" />
     </el-tab-pane>
   </el-tabs>
 </template>