feat(reader): add increase font and decrease font function

xwcoder · xwcoder · commit bd80c460a4b4 · 2023-11-13T00:15:08.000+08:00
diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
@@ -15,7 +15,9 @@
       "copy": {
         "title": "Copy url",
         "success": "Copied"
-      }
+      },
+      "fontIncrease": "Larger",
+      "fontDecrease": "Smaller"
     },
 
     "form": {
diff --git a/src/i18n/zh-CN.json b/src/i18n/zh-CN.json
@@ -15,7 +15,9 @@
       "copy": {
         "title": "复制链接",
         "success": "已复制到剪贴板"
-      }
+      },
+      "fontIncrease": "更大",
+      "fontDecrease": "更小"
     },
 
     "form": {
diff --git a/src/router/settings/electron-main/settings.ts b/src/router/settings/electron-main/settings.ts
@@ -5,6 +5,6 @@ export const router = new Router({ prefix: '/settings' })
 
 // const getTheme = () => settings.appearance === 'auto' ? 'system' : settings.appearance
 
-router.use('get', () => settingService.get())
+router.use('get', (_, path) => settingService.get(path))
 
 router.use('set', (_, { path, value }: { path: string, value: any }) => settingService.set(path, value))
diff --git a/src/ui/apps/reader/MainPanel/Article/Toolbar/font-decrease-button.tsx b/src/ui/apps/reader/MainPanel/Article/Toolbar/font-decrease-button.tsx
@@ -0,0 +1,17 @@
+import intl from 'react-intl-universal'
+import { FontDecreaseRegular } from '@fluentui/react-icons'
+import { Button } from '@/ui/apps/reader/components/toolbar'
+import { store } from '@/ui/store'
+
+const { readerStore } = store
+
+export default function FontDecreaseButton() {
+  return (
+    <Button
+      icon={FontDecreaseRegular}
+      onClick={() => readerStore.decreaseFont()}
+      fontSize={20}
+      tip={intl.get('reader.action.fontDecrease')}
+    />
+  )
+}
diff --git a/src/ui/apps/reader/MainPanel/Article/Toolbar/font-increase-button.tsx b/src/ui/apps/reader/MainPanel/Article/Toolbar/font-increase-button.tsx
@@ -0,0 +1,17 @@
+import intl from 'react-intl-universal'
+import { FontIncreaseRegular } from '@fluentui/react-icons'
+import { Button } from '@/ui/apps/reader/components/toolbar'
+import { store } from '@/ui/store'
+
+const { readerStore } = store
+
+export default function FontIncreaseButton() {
+  return (
+    <Button
+      icon={FontIncreaseRegular}
+      onClick={() => readerStore.increaseFont()}
+      fontSize={20}
+      tip={intl.get('reader.action.fontIncrease')}
+    />
+  )
+}
diff --git a/src/ui/apps/reader/MainPanel/Article/Toolbar/index.tsx b/src/ui/apps/reader/MainPanel/Article/Toolbar/index.tsx
@@ -3,6 +3,8 @@ import { MarkReadButton, StarButton } from '@/ui/apps/reader/components/toolbar'
 import { store } from '@/ui/store'
 import BackToListButton from './back-button'
 import OpenExternalButton from './open-external-btn'
+import FontIncreaseButton from './font-increase-button'
+import FontDecreaseButton from './font-decrease-button'
 
 const { readerStore } = store
 
@@ -18,6 +20,8 @@ function Toolbar() {
         <MarkReadButton />
         <StarButton id={activeId!} />
         <OpenExternalButton url={activeArticle!.url} />
+        <FontDecreaseButton />
+        <FontIncreaseButton />
       </div>
     </div>
   )
diff --git a/src/ui/apps/reader/MainPanel/Article/content.tsx b/src/ui/apps/reader/MainPanel/Article/content.tsx
@@ -19,7 +19,6 @@ const useStyles = makeStyles({
       marginTop: '20px',
       marginBottom: '20px',
       lineHeight: 1.625,
-      fontSize: tokens.fontSizeBase400,
     },
 
     '& pre': {
@@ -61,9 +60,26 @@ const useStyles = makeStyles({
   },
 })
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const fontSizes = [
+  'text-[12px]',
+  'text-[13px]',
+  'text-[14px]',
+  'text-[15px]',
+  'text-[16px]',
+  'text-[17px]',
+  'text-[18px]',
+  'text-[19px]',
+  'text-[20px]',
+  'text-[21px]',
+  'text-[22px]',
+  'text-[23px]',
+  'text-[24px]',
+]
+
 function Content() {
   const styles = useStyles()
-  const { activeArticle, feeds } = readerStore
+  const { activeArticle, feeds, fontSize } = readerStore
 
   if (!activeArticle) {
     return null
@@ -121,7 +137,7 @@ function Content() {
           </div>
         </div>
       </div>
-      <div className="px-5">
+      <div className={`px-5 text-[${fontSize}px]`}>
         <div
           ref={containerRef}
           className={styles.content}
diff --git a/src/ui/store/reader.ts b/src/ui/store/reader.ts
@@ -3,9 +3,12 @@ import { Tab, Feed, Article } from '@/types/reader'
 import * as remote from '@/services/remote/browser/remote'
 import * as feedService from '@/services/reader/browser/feed'
 import * as articleService from '@/services/reader/browser/article'
+import * as settingService from '@/services/settings/browser/settings'
 
 import type { RootStore } from './index'
 
+const fontSizeKey = 'reader.fontSize'
+
 export class ReaderStore {
   rootStore: RootStore
 
@@ -27,6 +30,8 @@ export class ReaderStore {
 
   showKeyboardPanel = false
 
+  fontSize = 14
+
   constructor(rootStore: RootStore) {
     makeAutoObservable(this, {
       rootStore: false,
@@ -44,6 +49,11 @@ export class ReaderStore {
     runInAction(() => { this.feeds = feeds || [] })
 
     this.getArticles()
+
+    const fontSize = await settingService.get(fontSizeKey)
+    runInAction(() => {
+      this.fontSize = fontSize || 14
+    })
   }
 
   private initListeners() {
@@ -333,4 +343,14 @@ export class ReaderStore {
   toggleKeyboardPanel() {
     this.showKeyboardPanel = !this.showKeyboardPanel
   }
+
+  increaseFont() {
+    this.fontSize = Math.min(this.fontSize + 1, 24)
+    settingService.set(fontSizeKey, this.fontSize)
+  }
+
+  decreaseFont() {
+    this.fontSize = Math.max(this.fontSize - 1, 12)
+    settingService.set(fontSizeKey, this.fontSize)
+  }
 }
