[skip ci] wip: web添加字距 段距 行距实现

modules/web/src/components/ChapterContent.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="title">{{ title }}</div>
   <div v-for="(para, index) in carray" :key="index">
     <img
       class="full"
@@ -16,7 +17,11 @@ import config from "../plugins/config";
 import { getImageFromLegado, isLegadoUrl } from "../plugins/utils";
 
 const store = useBookStore();
-defineProps(["carray"]);
+const props = defineProps({
+  carray: { type: Array, required: true },
+  title: { type: String, required: true },
+  spacing: { type: Object, required: true },
+});
 
 const fontFamily = computed(() => {
   if (store.config.font >= 0) {
@@ -49,14 +54,27 @@ watch(fontSize, () => {
     store.setShowContent(true);
   });
 });
+
+const letterSpacing = computed(() => props.spacing.letter); //字间距 倍数
+const lineSpacing = computed(() => 1 + props.spacing.line); //行距 基础行距1
+const paragraphSpacing = computed(() => props.spacing.paragraph); //段距
 </script>
 
 <style lang="scss" scoped>
+.title {
+  margin-bottom: 57px;
+  font: 24px / 32px PingFangSC-Regular, HelveticaNeue-Light,
+    "Helvetica Neue Light", "Microsoft YaHei", sans-serif;
+}
 p {
   display: block;
   word-wrap: break-word;
   word-break: break-all;
 
+  letter-spacing: calc(v-bind("letterSpacing") * 1em);
+  line-height: v-bind("lineSpacing");
+  margin: calc(v-bind("paragraphSpacing") * 1em) 0;
+
   :deep(img) {
     height: 1em;
   }

modules/web/src/store/bookStore.js

@@ -22,6 +22,11 @@ export const useBookStore = defineStore("book", {
         readWidth: 800,
         infiniteLoading: false,
         customFontName: "",
+        spacing: {
+          paragraph: 1,
+          line: 0.8,
+          letter: 0,
+        },
       },
       miniInterface: false,
       readSettingsVisible: false,
@@ -53,7 +58,7 @@ export const useBookStore = defineStore("book", {
       this.readingBook = readingBook;
     },
     setConfig(config) {
-      this.config = config;
+      Object.assign(this.config, config);
     },
     setReadSettingsVisible(visible) {
       this.readSettingsVisible = visible;

modules/web/src/store/sourceStore.js

@@ -22,15 +22,19 @@ export const useSourceStore = defineStore("source", {
   },
   getters: {
     sources: (state) => (isBookSource ? state.bookSources : state.rssSources),
-    sourceUrlKey: () => isBookSource ? "bookSourceUrl" : "sourceUrl",
+    sourceUrlKey: () => (isBookSource ? "bookSourceUrl" : "sourceUrl"),
     sourcesMap: (state) => {
       let map = new Map();
-      state.sources.forEach(source => map.set(source[state.sourceUrlKey], source));
+      state.sources.forEach((source) =>
+        map.set(source[state.sourceUrlKey], source)
+      );
       return map;
     },
     savedSourcesMap: (state) => {
       let map = new Map();
-      state.savedSources.forEach(source => map.set(source[state.sourceUrlKey], source));
+      state.savedSources.forEach((source) =>
+        map.set(source[state.sourceUrlKey], source)
+      );
       return map;
     },
     currentSourceUrl: (state) =>
@@ -73,13 +77,14 @@ export const useSourceStore = defineStore("source", {
     },
     //保存当前编辑源
     saveCurrentSource() {
-      let source = this.currentSource, map = this.sourcesMap;
+      let source = this.currentSource,
+        map = this.sourcesMap;
       map.set(source[this.sourceUrlKey], source);
       this.saveSources(Array.from(map.values()));
     },
     // 更改当前编辑的源
     changeCurrentSource(source) {
-      this.currentSource = JSON.parse(JSON.stringify((source)));
+      this.currentSource = JSON.parse(JSON.stringify(source));
     },
     // update editTab tabName and editTab info
     changeTabName(tabName) {
@@ -87,7 +92,7 @@ export const useSourceStore = defineStore("source", {
       localStorage.setItem("tabName", tabName);
     },
     changeEditTabSource(source) {
-       this.editTabSource = JSON.parse(JSON.stringify((source)));
+      this.editTabSource = JSON.parse(JSON.stringify(source));
     },
     editHistory(history) {
       let historyObj;

modules/web/src/views/BookChapter.vue

@@ -82,10 +82,12 @@
       <div class="content">
         <div class="top-bar" ref="top"></div>
         <div v-for="data in chapterData" :key="data.index" ref="chapter">
-          <div class="title" :index="data.index" v-if="showContent">
-            {{ data.title }}
-          </div>
-          <chapter-content :carray="data.content" v-if="showContent" />
+          <chapter-content
+            :carray="data.content"
+            :title="data.title"
+            :spacing="store.config.spacing"
+            v-if="showContent"
+          />
         </div>
         <div class="loading" ref="loading"></div>
         <div class="bottom-bar" ref="bottom"></div>
@@ -667,12 +669,6 @@ onUnmounted(() => {
       font-family: "Microsoft YaHei", PingFangSC-Regular, HelveticaNeue-Light,
         "Helvetica Neue Light", sans-serif;
 
-      .title {
-        margin-bottom: 57px;
-        font: 24px / 32px PingFangSC-Regular, HelveticaNeue-Light,
-          "Helvetica Neue Light", "Microsoft YaHei", sans-serif;
-      }
-
       .bottom-bar,
       .top-bar {
         height: 64px;