feat: add support for serif fonts and text justification options in settings

Author: honwhy

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [v2.0.4] - 2025-05-20
+
+### ✨ 新特性
+
+- **支持衬线字体**：支持调整字体为衬线字体。
+- **支持文本对齐**：支持选择是否左右对齐文本。
+
 ## [v2.0.3] - 2025-05-12
 
 ### ✨ 新特性

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wechat-reader-enhancer",
   "type": "module",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": true,
   "description": "为微信公众号文章生成结构化目录，提升阅读体验",
   "scripts": {

public/injected.css

@@ -1,8 +1,11 @@
-body.wx_wap_page.serif-fonts {
+body.wx_wap_page.wre-serif-fonts {
   font-family:
     SimSun,
     Times New Roman,
     Georgia,
     Merriweather,
     Playfair Display;
 }
+body.wx_wap_page.text-justify p {
+  text-align: justify;
+}

src/composable/config.ts

@@ -7,6 +7,8 @@ export const defaultSettings: Settings = {
   minLevel: 1, // 识别的最小标题级别
   maxLevel: 6, // 识别的最大标题级别
   tocPosition: `left`, // 目录位置
+  useSerifFont: `0`, // 是否使用衬线字体
+  justifyText: `0`, // 是否使用对齐文本
   isEnabled: true,
   serviceType: ``,
   endpoint: ``,

src/content/App.vue

@@ -80,6 +80,26 @@ function buildToc() {
   // 获取文章标题
   articleTitle.value = getArticleTitle()
 }
+function handleSeriFont() {
+  if (settings.value.useSerifFont === `1`) {
+    if (!document.body.classList?.contains(`wre-serif-fonts`)) {
+      addClass(document.body, `wre-serif-fonts`)
+    }
+  }
+  else {
+    removeClass(document.body, `wre-serif-fonts`)
+  }
+}
+function handleJustifyText() {
+  if (settings.value.justifyText === `1`) {
+    if (!document.body.classList?.contains(`text-justify`)) {
+      addClass(document.body, `text-justify`)
+    }
+  }
+  else {
+    removeClass(document.body, `text-justify`)
+  }
+}
 /**
  * 初始化插件
  */
@@ -97,6 +117,11 @@ async function init() {
 
     // addVerticalText()
     initLinkifier()
+
+    // 是否使用衬线字体
+    handleSeriFont()
+    // 是否使用文本对齐
+    handleJustifyText()
     console.log(`公众号阅读增强插件初始化完成`)
   }
   catch (error) {
@@ -115,6 +140,8 @@ async function update() {
     // 初始化滚动监听
     initScrollObserver(toRaw(itemList.value))
     createQrCode()
+    handleSeriFont()
+    handleJustifyText()
   }
   catch (error) {
     console.error(`公众号阅读增强插件更新失败:`, error)

src/popup/App.vue

@@ -184,6 +184,66 @@ function showMessage(message: string, isError: boolean = false) {
       </div>
     </div>
 
+    <!-- 使用衬线字体 -->
+    <label>使用衬线字体</label>
+    <div class="flex-between">
+      <div style="display: flex; gap: 10px; align-items: center;">
+        <label>
+          <input
+            v-model="settings.useSerifFont"
+            type="radio"
+            value="1"
+            aria-label="是"
+            title="是"
+            name="useSerifFont"
+            @change="updateSettings(settings)"
+          >
+          是
+        </label>
+        <label>
+          <input
+            v-model="settings.useSerifFont"
+            type="radio"
+            value="0"
+            aria-label="否"
+            title="否"
+            name="useSerifFont"
+            @change="updateSettings(settings)"
+          >
+          否
+        </label>
+      </div>
+    </div>
+    <!-- 文本左右对齐 -->
+    <label>文本左右对齐</label>
+    <div class="flex-between">
+      <div style="display: flex; gap: 10px; align-items: center;">
+        <label>
+          <input
+            v-model="settings.justifyText"
+            type="radio"
+            value="1"
+            aria-label="是"
+            title="是"
+            name="justifyText"
+            @change="updateSettings(settings)"
+          >
+          是
+        </label>
+        <label>
+          <input
+            v-model="settings.justifyText"
+            type="radio"
+            value="0"
+            aria-label="否"
+            title="否"
+            name="justifyText"
+            @change="updateSettings(settings)"
+          >
+          否
+        </label>
+      </div>
+    </div>
     <div class="buttons">
       <button id="resetButton" class="secondary" @click="onReset">
         恢复默认

src/types/index.ts

@@ -18,6 +18,8 @@ export interface Settings {
   minLevel: number // 识别的最小标题级别
   maxLevel: number // 识别的最大标题级别
   tocPosition: string // 目录位置 (left/right)
+  useSerifFont: string // 是否使用衬线字体
+  justifyText: string // 是否使用对齐文本
   isEnabled: boolean // 插件是否启用
   serviceType: string // 模型服务类型
   endpoint: string // 模型API地址