refactor(modules/web): use deep watcher to sync read config;remove unnecessary refs

modules/web/src/components/ReadSettings.vue

@@ -16,7 +16,7 @@
             :style="themeColor"
             ref="themes"
             @click="setTheme(index)"
-            :class="{ selected: selectedTheme == index }"
+            :class="{ selected: theme == index }"
             ><em v-if="index < 6" class="iconfont">&#58980;</em
             ><em v-else class="moon-icon">{{ moonIcon }}</em></span
           >
@@ -188,11 +188,23 @@ import API from "@api";
 
 const store = useBookStore();
 
-const theme = ref(0);
+//阅读界面设置改变时保存同步配置
+watch(
+  () => store.config,
+  (newValue) => {
+    localStorage.setItem("config", JSON.stringify(newValue));
+    API.saveReadConfig(newValue);
+  },
+  {
+    deep: 2 //深度为2
+  }
+)
 
-const isNight = ref(store.config.theme == 6);
-const moonIcon = ref("");
-const themeColors = shallowRef([
+//主题颜色
+const theme = computed(() => store.theme);
+const isNight = computed(() => store.isDark);
+const moonIcon = computed(() => theme.value == 6 ? "" : "");
+const themeColors = [
   {
     background: "rgba(250, 245, 235, 0.8)",
   },
@@ -214,62 +226,30 @@ const themeColors = shallowRef([
   {
     background: "rgba(0, 0, 0, 0.5)",
   },
-]);
-const moonIconStyle = ref({
-  display: "inline",
-  color: "rgba(255,255,255,0.2)",
-});
-const fonts = ref(["雅黑", "宋体", "楷书"]);
-const customFontName = ref(store.config.customFontName);
-const customFontSavePopVisible = ref(false);
-
-onMounted(() => {
-  //初始化设置项目
-  var config = store.config;
-  theme.value = config.theme;
-  if (theme.value == 6) {
-    moonIcon.value = "";
-  } else {
-    moonIcon.value = "";
-  }
-});
-const config = computed(() => {
-  return store.config;
-});
-
+];
 const popupTheme = computed(() => {
   return {
-    background: settings.themes[config.value.theme].popup,
+    background: settings.themes[theme.value].popup,
   };
 });
-const selectedTheme = computed(() => {
-  return store.config.theme;
-});
-const selectedFont = computed(() => {
-  return store.config.font;
-});
-
 const setTheme = (theme) => {
-  if (theme == 6) {
-    isNight.value = true;
-    moonIcon.value = "";
-    moonIconStyle.value.color = "#ed4259";
-  } else {
-    isNight.value = false;
-    moonIcon.value = "";
-    moonIconStyle.value.color = "rgba(255,255,255,0.2)";
-  }
-  config.value.theme = theme;
-  saveConfig(config.value);
-};
+  store.config.theme = theme;
+}
+
+//预置字体
+const fonts = ref(["雅黑", "宋体", "楷书"]);
 const setFont = (font) => {
-  config.value.font = font;
-  saveConfig(config.value);
+  store.config.font = font;
 };
+const selectedFont = computed(() => {
+  return store.config.font;
+});
+//自定义字体
+const customFontName = ref(store.config.customFontName);
+const customFontSavePopVisible = ref(false);
 const setCustomFont = () => {
-  config.value.font = -1;
-  config.value.customFontName = customFontName.value;
-  saveConfig(config.value);
+  store.config.font = -1;
+  store.config.customFontName = customFontName.value;
 };
 // 加载网络字体
 const loadFontFromURL = () => {
@@ -319,85 +299,71 @@ const loadFontFromURL = () => {
   );
 }
 
+//字体大小
 const fontSize = computed(() => {
   return store.config.fontSize;
 });
 const moreFontSize = () => {
-  if (config.value.fontSize < 48) config.value.fontSize += 2;
-  saveConfig(config.value);
+  if (store.config.fontSize < 48) store.config.fontSize += 2;
 };
 const lessFontSize = () => {
-  if (config.value.fontSize > 12) config.value.fontSize -= 2;
-  saveConfig(config.value);
+  if (store.config.fontSize > 12) store.config.fontSize -= 2;
 };
 
+//字 行 段落间距
 const spacing = computed(() => {
   return store.config.spacing;
 });
 const lessLetterSpacing = () => {
   store.config.spacing.letter -= 0.01;
-  saveConfig(config.value);
 };
 const moreLetterSpacing = () => {
   store.config.spacing.letter += 0.01;
-  saveConfig(config.value);
 };
 const lessLineSpacing = () => {
   store.config.spacing.line -= 0.1;
-  saveConfig(config.value);
 };
 const moreLineSpacing = () => {
   store.config.spacing.line += 0.1;
-  saveConfig(config.value);
 };
 const lessParagraphSpacing = () => {
   store.config.spacing.paragraph -= 0.1;
-  saveConfig(config.value);
 };
 const moreParagraphSpacing = () => {
   store.config.spacing.paragraph += 0.1;
-  saveConfig(config.value);
 };
 
+//页面宽度
 const readWidth = computed(() => {
   return store.config.readWidth;
 });
 const moreReadWidth = () => {
   // 此时会截断页面
-  if (config.value.readWidth + 160 + 2 * 68 > window.innerWidth) return;
-  config.value.readWidth += 160;
-  saveConfig(config.value);
+  if (store.config.readWidth + 160 + 2 * 68 > window.innerWidth) return;
+  store.config.readWidth += 160;
 };
 const lessReadWidth = () => {
-  if (config.value.readWidth > 640) config.value.readWidth -= 160;
-  saveConfig(config.value);
+  if (store.config.readWidth > 640) store.config.readWidth -= 160;
 };
+
+//翻页速度
 const jumpDuration = computed(() => {
   return store.config.jumpDuration;
 });
 const moreJumpDuration = () => {
   store.config.jumpDuration += 100;
-  saveConfig(config.value);
 };
 const lessJumpDuration = () => {
   if (store.config.jumpDuration === 0) return;
   store.config.jumpDuration -= 100;
-  saveConfig(config.value);
 };
+
+//无限加载
 const infiniteLoading = computed(() => {
   return store.config.infiniteLoading;
 });
 const setInfiniteLoading = (loading) => {
-  config.value.infiniteLoading = loading;
-  saveConfig(config.value);
-};
-const saveConfig = (config) => {
-  store.setConfig(config);
-  localStorage.setItem("config", JSON.stringify(config));
-  uploadConfig(config);
-};
-const uploadConfig = (config) => {
-  API.saveReadConfig(config);
+  store.config.infiniteLoading = loading;
 };
 </script>