refactor(modules/web): arrange storeToRefs destruct

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];
 });

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,28 +61,35 @@ const virtualListdata = computed(() => {
   return virtualListDataSource;
 });
 
-const emit = defineEmits(["getContent"]);
-const gotoChapter = (note) => {
-  const chapterIndex = catalog.value.indexOf(note);
-  currentChapterIndex.value = chapterIndex;
-  store.setPopCataVisible(false);
-  store.setContentLoading(true);
-  store.saveBookProgress();
-  emit("getContent", chapterIndex);
-};
-
+//打开目录 计算当前章节对应的虚拟列表位置
 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);
+  currentChapterIndex.value = chapterIndex;
+  store.setPopCataVisible(false);
+  store.setContentLoading(true);
+  store.saveBookProgress();
+  emit("getContent", chapterIndex);
+};
+
 </script>
 
 <style lang="scss" scoped>

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 = [
   {

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);
 });

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);

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>

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", "编辑源"],

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) {

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移动端判断 最大阅读宽度修正

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 或者通过内网穿透的地址)",