From 747cc21a8572108c4d1b9e52cafd318c540e7f7b Mon Sep 17 00:00:00 2001
From: "openai-code-agent[bot]" <242516109+Codex@users.noreply.github.com>
Date: Tue, 31 Mar 2026 09:23:35 +0000
Subject: [PATCH 1/3] Initial plan


From a4b161e538109a3e5e2471a2902de430092da113 Mon Sep 17 00:00:00 2001
From: "openai-code-agent[bot]" <242516109+Codex@users.noreply.github.com>
Date: Tue, 31 Mar 2026 09:34:03 +0000
Subject: [PATCH 2/3] feat: add reader style css variables

Co-authored-by: wuyu8512 <33444499+wuyu8512@users.noreply.github.com>
---
 src/components/html/Editor/Html.vue     |  4 ++-
 src/components/html/Editor/MarkDown.vue |  5 +++-
 src/components/html/HtmlReader.vue      | 11 ++++++-
 src/composition/useReadCssVars.ts       | 24 +++++++++++++++
 src/css/read.scss                       | 20 +++++++++++--
 src/pages/Book/Read/Read.vue            |  4 ++-
 src/pages/Setting.vue                   | 39 +++++++++++++++++++++++++
 src/stores/setting.ts                   |  4 +++
 8 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 src/composition/useReadCssVars.ts

diff --git a/src/components/html/Editor/Html.vue b/src/components/html/Editor/Html.vue
index b12fa1d6..e7d45945 100644
--- a/src/components/html/Editor/Html.vue
+++ b/src/components/html/Editor/Html.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="mode">
+  <div :class="mode" :style="readCssVars">
     <q-editor
       ref="editorRef"
       paragraph-tag="p"
@@ -24,6 +24,7 @@ import bbCodeParser from 'src/utils/bbcode/simple'
 import sanitizerHtml from 'src/utils/sanitizeHtml'
 
 import { useIsActivated } from 'src/composition/useIsActivated'
+import { useReadCssVars } from 'src/composition/useReadCssVars'
 
 import { uploadImage } from 'src/services/user'
 
@@ -32,6 +33,7 @@ import type { QEditor, QEditorCommand } from 'quasar'
 const props = defineProps<{ mode: 'simple' | 'common'; html: string }>()
 const $q = useQuasar()
 const emit = defineEmits(['update:html'])
+const { readCssVars } = useReadCssVars()
 let isInternalChange = false
 
 const processHtml = (html: string) => {
diff --git a/src/components/html/Editor/MarkDown.vue b/src/components/html/Editor/MarkDown.vue
index 11995ba9..5f6d83bf 100644
--- a/src/components/html/Editor/MarkDown.vue
+++ b/src/components/html/Editor/MarkDown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="mode">
+  <div :class="mode" :style="readCssVars">
     <md-editor
       ref="editorRef"
       v-model="markdownText"
@@ -42,6 +42,8 @@ import { ref, watch } from 'vue'
 
 import sanitizerHtml from 'src/utils/sanitizeHtml'
 
+import { useReadCssVars } from 'src/composition/useReadCssVars'
+
 import { uploadImage } from 'src/services/user'
 
 import type { ToolbarNames, ExposeParam } from 'md-editor-v3'
@@ -53,6 +55,7 @@ const props = defineProps<{ mode: 'simple' | 'common'; html: string }>()
 const $q = useQuasar()
 const editorRef = ref<ExposeParam>()
 const emit = defineEmits(['update:html'])
+const { readCssVars } = useReadCssVars()
 
 const mdToolBar: ToolbarNames[] = [
   'bold',
diff --git a/src/components/html/HtmlReader.vue b/src/components/html/HtmlReader.vue
index b4e185da..a44040c9 100644
--- a/src/components/html/HtmlReader.vue
+++ b/src/components/html/HtmlReader.vue
@@ -1,5 +1,11 @@
 <template>
-  <div ref="contentRef" class="html-reader print-hide" v-html="props.html" @click="clickHandle" />
+  <div
+    ref="contentRef"
+    class="html-reader print-hide"
+    v-html="props.html"
+    :style="readCssVars"
+    @click="clickHandle"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -10,6 +16,8 @@ import { useSettingStore } from 'stores/setting'
 
 import { useLayout } from 'components/app/useLayout'
 
+import { useReadCssVars } from 'src/composition/useReadCssVars'
+
 import { PROVIDE } from 'src/const/provide'
 
 const $q = useQuasar()
@@ -20,6 +28,7 @@ const imagePreview = inject<any>(PROVIDE.IMAGE_PREVIEW)
 
 const { headerOffset } = layout
 const { readSetting } = settingStore
+const { readCssVars } = useReadCssVars()
 
 const props = defineProps<{ html: string }>()
 const contentRef = ref<HTMLElement>()
diff --git a/src/composition/useReadCssVars.ts b/src/composition/useReadCssVars.ts
new file mode 100644
index 00000000..244ed07a
--- /dev/null
+++ b/src/composition/useReadCssVars.ts
@@ -0,0 +1,24 @@
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { useSettingStore } from 'stores/setting'
+
+export function useReadCssVars() {
+  const settingStore = useSettingStore()
+  const { readSetting } = storeToRefs(settingStore)
+
+  const readCssVars = computed(() => {
+    const setting = readSetting.value
+    return {
+      '--read-font-size': `${setting.fontSize}px`,
+      '--read-line-height': `${setting.lineHeight}`,
+      '--read-paragraph-spacing': `${setting.paragraphSpacing}em`,
+      '--read-paragraph-indent': `${setting.paragraphIndent}em`,
+      '--read-letter-spacing': `${setting.letterSpacing}em`,
+    }
+  })
+
+  return {
+    readCssVars,
+  }
+}
diff --git a/src/css/read.scss b/src/css/read.scss
index a5789caa..eb022661 100644
--- a/src/css/read.scss
+++ b/src/css/read.scss
@@ -1,8 +1,22 @@
+:root {
+  --read-font-size: 16px;
+  --read-line-height: 1.8;
+  --read-paragraph-spacing: 0px;
+  --read-paragraph-indent: 2em;
+  --read-letter-spacing: 0em;
+}
+
+:where(.html-reader, .md-editor-preview, .q-editor__content) {
+  font-size: var(--read-font-size, 16px);
+  line-height: var(--read-line-height, 1.8);
+  letter-spacing: var(--read-letter-spacing, 0em);
+}
+
 p {
-  margin: 0;
+  margin: 0 0 var(--read-paragraph-spacing, 0px);
   padding: 0;
-  line-height: 1.8em;
-  text-indent: 2em;
+  line-height: var(--read-line-height, 1.8);
+  text-indent: var(--read-paragraph-indent, 2em);
 
   img {
     margin: 0 5px;
diff --git a/src/pages/Book/Read/Read.vue b/src/pages/Book/Read/Read.vue
index 6e6a30fc..bdcefb53 100644
--- a/src/pages/Book/Read/Read.vue
+++ b/src/pages/Book/Read/Read.vue
@@ -140,6 +140,7 @@ import { DragPageSticky } from 'components'
 import { useLayout } from 'components/app/useLayout'
 import HtmlReader from 'components/html/HtmlReader.vue'
 
+import { useReadCssVars } from 'src/composition/useReadCssVars'
 import { useTimeoutFn } from 'src/composition/useTimeoutFn'
 
 import { NOOP } from 'src/const/empty'
@@ -220,6 +221,7 @@ if (!CSS.supports('line-break', 'anywhere')) {
 }
 
 const { readSetting } = settingStore
+const { readCssVars } = useReadCssVars()
 const bgStyle = computed(() => ({
   backgroundImage:
     readSetting.bgType === 'paper'
@@ -244,7 +246,7 @@ function toggleDark() {
 }
 
 const readStyle = computed(() => ({
-  fontSize: readSetting.fontSize + 'px',
+  ...readCssVars.value,
   textAlign: readSetting.justify ? 'justify' : 'initial',
   color:
     readSetting.bgType === 'custom' ? (colors.brightness(readSetting.customColor) < 128 ? '#fff' : '#000') : 'inherit',
diff --git a/src/pages/Setting.vue b/src/pages/Setting.vue
index a925688e..9e8c1187 100644
--- a/src/pages/Setting.vue
+++ b/src/pages/Setting.vue
@@ -80,6 +80,24 @@
                 <q-slider label v-model="readSetting.fontSize" :min="12" :max="30" />
               </div>
               <q-separator />
+              <div class="q-gutter-xs q-mt-md">
+                <div class="text-subtitle1">阅读样式</div>
+                <div v-for="option in readStyleOptions" :key="option.key" class="q-mt-sm">
+                  <div class="row items-center justify-between q-mb-xs">
+                    <div>{{ option.label }}</div>
+                    <div class="text-caption text-grey-7">{{ readStyleLabel(option) }}</div>
+                  </div>
+                  <q-slider
+                    v-model.number="readSetting[option.key]"
+                    :min="option.min"
+                    :max="option.max"
+                    :step="option.step"
+                    label
+                    :label-value="readStyleLabel(option)"
+                  />
+                </div>
+              </div>
+              <q-separator />
               <div class="q-gutter-xs q-mt-md">
                 <div class="text-subtitle1">
                   阅读页宽度{{ readSetting.widthType === 'custom' ? '（设为 0 时为全屏，只在大屏幕下生效）' : '' }}
@@ -162,6 +180,27 @@ const settingStore = useSettingStore()
 const { dark } = storeToRefs(settingStore)
 const { readSetting, generalSetting, editorSetting } = settingStore
 
+type ReadSettingKey = 'lineHeight' | 'paragraphSpacing' | 'paragraphIndent' | 'letterSpacing'
+type ReadStyleOption = {
+  key: ReadSettingKey
+  label: string
+  min: number
+  max: number
+  step: number
+  unit?: string
+  precision?: number
+}
+
+const readStyleOptions: ReadStyleOption[] = [
+  { key: 'lineHeight', label: '行高', min: 1, max: 3, step: 0.05, precision: 2 },
+  { key: 'paragraphSpacing', label: '段间距', min: 0, max: 2, step: 0.05, unit: 'em', precision: 2 },
+  { key: 'paragraphIndent', label: '段首缩进', min: 0, max: 4, step: 0.25, unit: 'em', precision: 1 },
+  { key: 'letterSpacing', label: '字间距', min: -0.1, max: 0.5, step: 0.01, unit: 'em', precision: 2 },
+]
+
+const readStyleLabel = (option: ReadStyleOption) =>
+  `${readSetting[option.key].toFixed(option.precision ?? 0)}${option.unit ?? ''}`
+
 const tab = ref('Setting')
 
 watch(dark, (newDark) => {
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
index 6720b695..08e02186 100644
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -16,6 +16,10 @@ export const useSettingStore = defineStore('app.setting', {
     },
     readSetting: {
       fontSize: 16,
+      lineHeight: 1.8,
+      paragraphSpacing: 0,
+      paragraphIndent: 2,
+      letterSpacing: 0,
       bgType: 'none' as 'none' | 'paper' | 'custom',
       customColor: '#000000',
       convert: null as null | 't2s' | 's2t',

From 22c6840248311c2569bcf6a4d6d3bdebb08cdef6 Mon Sep 17 00:00:00 2001
From: "openai-code-agent[bot]" <242516109+Codex@users.noreply.github.com>
Date: Tue, 31 Mar 2026 16:00:34 +0000
Subject: [PATCH 3/3] fix: refine reader style controls

Co-authored-by: wuyu8512 <33444499+wuyu8512@users.noreply.github.com>
---
 src/composition/useReadCssVars.ts |  1 -
 src/css/read.scss                 |  2 --
 src/pages/Setting.vue             | 58 ++++++++++++++++++++++++-------
 src/stores/setting.ts             |  1 -
 4 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/composition/useReadCssVars.ts b/src/composition/useReadCssVars.ts
index 244ed07a..031407f9 100644
--- a/src/composition/useReadCssVars.ts
+++ b/src/composition/useReadCssVars.ts
@@ -14,7 +14,6 @@ export function useReadCssVars() {
       '--read-line-height': `${setting.lineHeight}`,
       '--read-paragraph-spacing': `${setting.paragraphSpacing}em`,
       '--read-paragraph-indent': `${setting.paragraphIndent}em`,
-      '--read-letter-spacing': `${setting.letterSpacing}em`,
     }
   })
 
diff --git a/src/css/read.scss b/src/css/read.scss
index eb022661..ca1ba677 100644
--- a/src/css/read.scss
+++ b/src/css/read.scss
@@ -3,13 +3,11 @@
   --read-line-height: 1.8;
   --read-paragraph-spacing: 0px;
   --read-paragraph-indent: 2em;
-  --read-letter-spacing: 0em;
 }
 
 :where(.html-reader, .md-editor-preview, .q-editor__content) {
   font-size: var(--read-font-size, 16px);
   line-height: var(--read-line-height, 1.8);
-  letter-spacing: var(--read-letter-spacing, 0em);
 }
 
 p {
diff --git a/src/pages/Setting.vue b/src/pages/Setting.vue
index 9e8c1187..cc531bda 100644
--- a/src/pages/Setting.vue
+++ b/src/pages/Setting.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page>
+  <q-page class="setting-page">
     <div class="q-pa-md q-mx-auto" :style="`width: ${$q.screen.gt.md ? settingStore['getGlobalWidth'] : '100%'}`">
       <div class="q-gutter-y-md">
         <q-tabs dense v-model="tab" class="text-teal">
@@ -82,19 +82,37 @@
               <q-separator />
               <div class="q-gutter-xs q-mt-md">
                 <div class="text-subtitle1">阅读样式</div>
-                <div v-for="option in readStyleOptions" :key="option.key" class="q-mt-sm">
+                <div v-for="option in readStyleOptions" :key="option.key" class="q-mt-sm read-style-row">
                   <div class="row items-center justify-between q-mb-xs">
                     <div>{{ option.label }}</div>
                     <div class="text-caption text-grey-7">{{ readStyleLabel(option) }}</div>
                   </div>
-                  <q-slider
-                    v-model.number="readSetting[option.key]"
-                    :min="option.min"
-                    :max="option.max"
-                    :step="option.step"
-                    label
-                    :label-value="readStyleLabel(option)"
-                  />
+                  <div class="row items-center q-gutter-sm read-style-control">
+                    <q-slider
+                      class="col"
+                      v-model.number="readSetting[option.key]"
+                      :min="option.min"
+                      :max="option.max"
+                      :step="option.step"
+                      label
+                      :label-value="readStyleLabel(option)"
+                    />
+                    <q-input
+                      dense
+                      outlined
+                      type="number"
+                      class="read-style-input"
+                      input-class="text-right"
+                      v-model.number="readSetting[option.key]"
+                      :min="option.min"
+                      :max="option.max"
+                      :step="option.step"
+                    >
+                      <template v-if="option.unit" #append>
+                        <div>{{ option.unit }}</div>
+                      </template>
+                    </q-input>
+                  </div>
                 </div>
               </div>
               <q-separator />
@@ -180,7 +198,7 @@ const settingStore = useSettingStore()
 const { dark } = storeToRefs(settingStore)
 const { readSetting, generalSetting, editorSetting } = settingStore
 
-type ReadSettingKey = 'lineHeight' | 'paragraphSpacing' | 'paragraphIndent' | 'letterSpacing'
+type ReadSettingKey = 'lineHeight' | 'paragraphSpacing' | 'paragraphIndent'
 type ReadStyleOption = {
   key: ReadSettingKey
   label: string
@@ -195,7 +213,6 @@ const readStyleOptions: ReadStyleOption[] = [
   { key: 'lineHeight', label: '行高', min: 1, max: 3, step: 0.05, precision: 2 },
   { key: 'paragraphSpacing', label: '段间距', min: 0, max: 2, step: 0.05, unit: 'em', precision: 2 },
   { key: 'paragraphIndent', label: '段首缩进', min: 0, max: 4, step: 0.25, unit: 'em', precision: 1 },
-  { key: 'letterSpacing', label: '字间距', min: -0.1, max: 0.5, step: 0.01, unit: 'em', precision: 2 },
 ]
 
 const readStyleLabel = (option: ReadStyleOption) =>
@@ -214,6 +231,23 @@ watch([readSetting, generalSetting, editorSetting], settingStore.save)
 </script>
 
 <style lang="scss" scoped>
+.setting-page {
+  overflow-x: hidden;
+}
+
+.read-style-row {
+  overflow-x: hidden;
+}
+
+.read-style-control {
+  flex-wrap: nowrap;
+}
+
+.read-style-input {
+  width: 96px;
+  flex: 0 0 96px;
+}
+
 .preview {
   @media screen and (min-width: $breakpoint-md-min) {
     width: var(--width);
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
index 08e02186..b326b673 100644
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -19,7 +19,6 @@ export const useSettingStore = defineStore('app.setting', {
       lineHeight: 1.8,
       paragraphSpacing: 0,
       paragraphIndent: 2,
-      letterSpacing: 0,
       bgType: 'none' as 'none' | 'paper' | 'custom',
       customColor: '#000000',
       convert: null as null | 't2s' | 's2t',