From 01b031806b82879d33643d0cbf37b0f7ff07b09d Mon Sep 17 00:00:00 2001
From: Xwite <1797350009@qq.com>
Date: Wed, 2 Oct 2024 18:19:25 +0800
Subject: [PATCH] refactor(modules/web): arrange storeToRefs destruct

---
 modules/web/src/components/CatalogItem.vue    |  1 +
 modules/web/src/components/PopCatalog.vue     | 49 ++++++++++---------
 modules/web/src/components/ReadSettings.vue   |  2 +-
 modules/web/src/components/SourceItem.vue     |  7 ++-
 modules/web/src/components/SourceList.vue     |  4 +-
 modules/web/src/components/SourceTabForm.vue  |  2 +-
 modules/web/src/components/SourceTabTools.vue |  2 +-
 modules/web/src/store/bookStore.js            |  3 +-
 modules/web/src/views/BookChapter.vue         | 17 +++----
 modules/web/src/views/BookShelf.vue           | 13 +++--
 10 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/modules/web/src/components/CatalogItem.vue b/modules/web/src/components/CatalogItem.vue
index 8a2eb400d..50bf1091d 100644
--- a/modules/web/src/components/CatalogItem.vue
+++ b/modules/web/src/components/CatalogItem.vue
@@ -23,6 +23,7 @@ const isSelected = (idx) => {
   return idx == props.currentChapterIndex;
 };
 
+// PC端 一个虚拟列表中有两个章节
 const catas = computed(() => {
   return props.source?.catas ?? [props.source];
 });
diff --git a/modules/web/src/components/PopCatalog.vue b/modules/web/src/components/PopCatalog.vue
index 2523041e4..0b1f9e373 100644
--- a/modules/web/src/components/PopCatalog.vue
+++ b/modules/web/src/components/PopCatalog.vue
@@ -27,23 +27,21 @@ import CatalogItem from "./CatalogItem.vue";
 
 const store = useBookStore();
 
-const isNight = computed(() => theme.value == 6);
-const { catalog, popCataVisible, miniInterface } = storeToRefs(store);
+const {
+  catalog,
+  popCataVisible, miniInterface
+} = storeToRefs(store);
 
-const theme = computed(() => {
-  return store.config.theme;
-});
+//主题
+const isNight = computed(() => store.theme);
+const theme = computed(() => store.theme);
 const popupTheme = computed(() => {
   return {
     background: settings.themes[theme.value].popup,
   };
 });
 
-const currentChapterIndex = computed({
-  get: () => store.readingBook.index,
-  set: (value) => (store.readingBook.index = value),
-});
-
+//虚拟列表 数据源
 const virtualListdata = computed(() => {
   let catalogValue = catalog.value;
   if (miniInterface.value) return catalogValue;
@@ -63,6 +61,25 @@ const virtualListdata = computed(() => {
   return virtualListDataSource;
 });
 
+//打开目录 计算当前章节对应的虚拟列表位置
+const virtualListRef = ref();
+const currentChapterIndex = computed({
+  get: () => store.readingBook.index,
+  set: (value) => (store.readingBook.index = value),
+});
+const virtualListIndex = computed(() => {
+  let index = currentChapterIndex.value;
+  if (miniInterface.value) return index;
+  // pc端 virtualListIitem有2个章节
+  return Math.floor(index / 2);
+});
+onUpdated(() => {
+  // dom更新触发ResizeObserver，更新虚拟列表内部的sizes Map
+  if (!popCataVisible.value) return;
+  virtualListRef.value.scrollToIndex(virtualListIndex.value);
+});
+
+// 点击加载对应章节内容
 const emit = defineEmits(["getContent"]);
 const gotoChapter = (note) => {
   const chapterIndex = catalog.value.indexOf(note);
@@ -73,18 +90,6 @@ const gotoChapter = (note) => {
   emit("getContent", chapterIndex);
 };
 
-const virtualListRef = ref();
-const virtualListIndex = computed(() => {
-  let index = currentChapterIndex.value;
-  if (miniInterface.value) return index;
-  return Math.floor(index / 2);
-});
-
-onUpdated(() => {
-  // dom更新触发ResizeObserver，更新虚拟列表内部的sizes Map
-  if (!popCataVisible.value) return;
-  virtualListRef.value.scrollToIndex(virtualListIndex.value);
-});
 </script>
 
 <style lang="scss" scoped>
diff --git a/modules/web/src/components/ReadSettings.vue b/modules/web/src/components/ReadSettings.vue
index 10a6c63d1..75a214ea9 100644
--- a/modules/web/src/components/ReadSettings.vue
+++ b/modules/web/src/components/ReadSettings.vue
@@ -202,7 +202,7 @@ watch(
 
 //主题颜色
 const theme = computed(() => store.theme);
-const isNight = computed(() => store.isDark);
+const isNight = computed(() => store.isNight);
 const moonIcon = computed(() => theme.value == 6 ? "" : "");
 const themeColors = [
   {
diff --git a/modules/web/src/components/SourceItem.vue b/modules/web/src/components/SourceItem.vue
index 585988980..a85c0bb97 100644
--- a/modules/web/src/components/SourceItem.vue
+++ b/modules/web/src/components/SourceItem.vue
@@ -18,14 +18,17 @@ import { Edit } from "@element-plus/icons-vue";
 import { getSourceUniqueKey } from "@/utils/souce";
 
 const props = defineProps(["source"]);
+
 const store = useSourceStore();
-const { savedSourcesMap, currentSourceUrl } = storeToRefs(store);
+
+const currentSourceUrl = computed(() => store.currentSourceUrl);
 const sourceUrl = computed(() => getSourceUniqueKey(props.source));
+
 const handleSourceClick = (source) => {
   store.changeCurrentSource(source);
 };
 const isSaveError = computed(() => {
-  const map = savedSourcesMap.value;
+  const map = store.savedSourcesMap;
   if (map.size == 0) return false;
   return !map.has(sourceUrl.value);
 });
diff --git a/modules/web/src/components/SourceList.vue b/modules/web/src/components/SourceList.vue
index 1a6b41eec..4b3014308 100644
--- a/modules/web/src/components/SourceList.vue
+++ b/modules/web/src/components/SourceList.vue
@@ -54,7 +54,7 @@ import SourceItem from "./SourceItem.vue";
 const store = useSourceStore();
 const sourceUrlSelect = ref([]);
 const searchKey = ref("");
-const { sources, sourcesMap } = storeToRefs(store);
+const sources  = computed(() => store.sources);
 
 // 筛选源
 /** @type Ref<import('@/source').Source[]> */
@@ -74,7 +74,7 @@ const sourceSelect = computed(() => {
   if (urls.length == 0) return [];
   const sourcesFilteredMap =
     searchKey.value == ""
-      ? sourcesMap.value
+      ? store.sourcesMap
       : convertSourcesToMap(sourcesFiltered.value);
   return urls.reduce((sources, sourceUrl) => {
     const source = sourcesFilteredMap.get(sourceUrl);
diff --git a/modules/web/src/components/SourceTabForm.vue b/modules/web/src/components/SourceTabForm.vue
index 612cb29ba..a9aa5e99e 100644
--- a/modules/web/src/components/SourceTabForm.vue
+++ b/modules/web/src/components/SourceTabForm.vue
@@ -60,7 +60,7 @@
 <script setup>
 const store = useSourceStore();
 defineProps(["config"]);
-const { currentSource } = storeToRefs(store);
+const currentSource = store.currentSource;
 </script>
 
 <style lang="scss" scoped>
diff --git a/modules/web/src/components/SourceTabTools.vue b/modules/web/src/components/SourceTabTools.vue
index e690e7a87..73ab5952c 100644
--- a/modules/web/src/components/SourceTabTools.vue
+++ b/modules/web/src/components/SourceTabTools.vue
@@ -19,7 +19,7 @@ import { useSourceStore } from "@/store";
 
 const store = useSourceStore();
 
-const { currentTab: current_tab } = storeToRefs(store);
+const current_tab = store.currentTab;
 
 const tabData = ref([
   ["editTab", "编辑源"],
diff --git a/modules/web/src/store/bookStore.js b/modules/web/src/store/bookStore.js
index 7c7404aa7..47b5f69b1 100644
--- a/modules/web/src/store/bookStore.js
+++ b/modules/web/src/store/bookStore.js
@@ -5,6 +5,7 @@ export const useBookStore = defineStore("book", {
   state: () => {
     return {
       connectStatus: "正在连接后端服务器……",
+      /**@type {"primary" | "success" |"danger"} */
       connectType: "primary",
       newConnect: true,
       /**@type {Array<{respondTime:number}>} */
@@ -53,7 +54,7 @@ export const useBookStore = defineStore("book", {
     theme: (state) => {
       return state.config.theme
     },
-    isDark: (state) => state.config.theme == 6,
+    isNight: (state) => state.config.theme == 6,
   },
   actions: {
     setConnectStatus(connectStatus) {
diff --git a/modules/web/src/views/BookChapter.vue b/modules/web/src/views/BookChapter.vue
index 7351a314d..2079383db 100644
--- a/modules/web/src/views/BookChapter.vue
+++ b/modules/web/src/views/BookChapter.vue
@@ -132,21 +132,21 @@ const {
   readSettingsVisible,
   miniInterface,
   showContent,
-  config,
-  readingBook,
   bookProgress,
+  theme,
+  isNight,
 } = storeToRefs(store);
+
 const chapterPos = computed({
-  get: () => readingBook.value.chapterPos,
-  set: (value) => (readingBook.value.chapterPos = value),
+  get: () => store.readingBook.chapterPos,
+  set: (value) => (store.readingBook.chapterPos = value),
 });
 const chapterIndex = computed({
-  get: () => readingBook.value.index,
-  set: (value) => (readingBook.value.index = value),
+  get: () => store.readingBook.index,
+  set: (value) => (store.readingBook.index = value),
 });
 
-const theme = computed(() => config.value.theme);
-const infiniteLoading = computed(() => config.value.infiniteLoading);
+const infiniteLoading = computed(() => store.config.infiniteLoading);
 
 // 字体
 const fontFamily = computed(() => {
@@ -208,7 +208,6 @@ const rightBarTheme = computed(() => {
     display: miniInterface.value && !showToolBar.value ? "none" : "block",
   };
 });
-const isNight = computed(() => theme.value == 6);
 
 /**
  * pc移动端判断 最大阅读宽度修正
diff --git a/modules/web/src/views/BookShelf.vue b/modules/web/src/views/BookShelf.vue
index e211d729a..b385d028b 100644
--- a/modules/web/src/views/BookShelf.vue
+++ b/modules/web/src/views/BookShelf.vue
@@ -84,9 +84,7 @@ import { Search } from "@element-plus/icons-vue";
 import API from "@api";
 
 const store = useBookStore();
-const { connectStatus, connectType, newConnect, shelf, isDark } = storeToRefs(store);
-
-const isNight = computed(() => isDark.value);
+const isNight = computed(() => store.isNight);
 
 const readingRecent = ref({
   name: "尚无阅读记录",
@@ -101,8 +99,9 @@ const { showLoading, closeLoading, loadingWrapper, isLoading } = useLoading(
   "正在获取书籍信息"
 );
 
+// 书架书籍和在线书籍搜索
 const books = shallowRef([]);
-
+const shelf = computed(() => store.shelf);
 const search = ref("");
 const isSearching = ref(false);
 watchEffect(() => {
@@ -119,7 +118,7 @@ watchEffect(() => {
     );
   });
 });
-
+//搜索在线书籍
 const searchBook = () => {
   if (search.value == "") return;
   books.value = [];
@@ -150,6 +149,10 @@ const searchBook = () => {
   );
 };
 
+//连接状态
+const connectStatus = computed(() => store.connectStatus);
+const connectType = computed(() => store.connectType);
+const newConnect = computed(() => store.newConnect);
 const setIP = () => {
   ElMessageBox.prompt(
     "请输入 IP 和端口 ( 如：127.0.0.1:9527 或者通过内网穿透的地址)",