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,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>

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